++ /workspaces/ID_GALAXY_LINK-01/ID_GALAXY.css
/* ID_GALAXY — styl strony produktu */
:root{
  --bg1:#0f1724;
  --bg2:#0b1a2b;
  --accent:#6ee7b7;
  --text: #0b1220; /* default (light theme) */
  --muted: #475569; /* subdued for light theme */
  --tagline: #55697a;
  --card:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: 'Inter', Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height:1.55;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.hero{
  position:relative;
  padding:64px 20px 88px;
  text-align:center;
  overflow:hidden;
}
.hero, .card{scroll-margin-top:24px}
.hero::after{
  content:"";
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse at 20% 20%, rgba(110,231,183,0.06), transparent 10%), radial-gradient(ellipse at 80% 80%, rgba(94,197,255,0.04), transparent 20%);
}
.site-nav{
  position:relative;
  z-index:1;
  max-width:1000px;
  margin:0 auto 28px;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  background:rgba(6,16,28,0.42);
  backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(2,6,23,0.22);
}
.brand{
  color:var(--text);
  text-decoration:none;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:0.92rem;
}
.nav-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nav-links a{
  color:var(--muted);
  text-decoration:none;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid transparent;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.08);transform:translateY(-1px)}
.nav-links-desktop{display:flex}
.nav-menu{display:none}
.nav-menu summary{
  position:relative;
  list-style:none;
  cursor:pointer;
  color:var(--text);
  font-weight:700;
  padding:10px 38px 10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  transition:background-color .15s ease,border-color .15s ease,transform .15s ease;
}
.nav-menu summary:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12);transform:translateY(-1px)}
.nav-menu summary::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-70%) rotate(45deg);
  transition:transform .18s ease;
  opacity:0.9;
}
.nav-menu[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-panel{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(-8px);
  transition:max-height .25s ease, opacity .2s ease, transform .2s ease;
}
.nav-menu[open] .nav-panel{
  max-height:220px;
  opacity:1;
  transform:translateY(0);
}
.nav-menu .nav-links{flex-direction:column;align-items:stretch;gap:8px;padding-top:10px}
.nav-menu .nav-links a{text-align:left;background:rgba(255,255,255,0.03)}
.hero-inner{position:relative;z-index:1;max-width:900px;margin:0 auto}
.hero h1{font-size:3rem;margin:0 0 8px;letter-spacing:0.4px}
.tagline{color:var(--muted);max-width:720px;margin:0 auto 18px}
.hero-cta{display:inline-flex;gap:12px}
.btn{display:inline-block;padding:10px 18px;border-radius:10px;background:linear-gradient(90deg,var(--accent),#60a5fa);color:#042028;text-decoration:none;font-weight:600;transition:transform .12s ease, box-shadow .12s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(16,24,32,0.35)}
.btn:active{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(110,231,183,0.12)}
.btn:focus-visible{outline:3px solid rgba(110,231,183,0.2);outline-offset:4px;border-radius:10px}

/* ensure contrast for tagline */
.tagline{color:var(--tagline)}

.container{max-width:1000px;margin:-56px auto 40px;padding:0 20px;display:grid;grid-template-columns:1fr;gap:20px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:12px;box-shadow:0 6px 20px rgba(2,6,23,0.6);backdrop-filter: blur(4px);border:1px solid rgba(255,255,255,0.02)}
.grid{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:center}
.card h2,.card h3{margin-top:0}
.info-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.info-card p{margin-bottom:0;color:var(--muted)}
.info-link{white-space:nowrap}
.status-pill{
  flex:0 0 auto;
  padding:10px 14px;
  border-radius:999px;
  font-size:0.9rem;
  font-weight:700;
  color:var(--accent);
  border:1px solid rgba(110,231,183,0.16);
  background:rgba(110,231,183,0.06);
}
.features-list{list-style:none;padding:0;margin:8px 0 0;color:var(--muted)}
.features-list li{padding:8px 0;border-bottom:1px dashed rgba(255,255,255,0.03)}

.mockup{display:flex;justify-content:center}
.device{width:300px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#06324a,#052033);padding:18px;border:1px solid rgba(255,255,255,0.04)}
.screen{height:160px;border-radius:8px;background:#020617;position:relative;display:flex;align-items:center;justify-content:center;color:#88f0c0;overflow:hidden}
.screen .text{position:relative;z-index:2;font-weight:700;letter-spacing:1px}
.stars-anim{position:absolute;inset:0;background-image:radial-gradient(#ffffff 1px, transparent 1px);background-size:40px 40px;opacity:0.06;animation:moveStars 20s linear infinite}
.base{margin-top:12px;text-align:center;color:var(--muted);font-size:0.9rem}

/* hero media: photo + SVG preview */
.hero-media{display:flex;gap:18px;justify-content:center;align-items:center;margin-top:22px;position:relative;z-index:1}
.hero-photo,.hero-preview{max-width:46%;height:auto;border-radius:12px;box-shadow:0 18px 40px rgba(2,6,23,0.65);border:1px solid rgba(255,255,255,0.02)}
.hero-photo{object-fit:cover;border:3px solid rgba(110,231,183,0.06);transition:transform .18s ease, box-shadow .18s ease}
.hero-photo:hover{transform:scale(1.02);box-shadow:0 26px 60px rgba(2,6,23,0.7)}
.hero-preview{background:transparent;padding:6px}

@keyframes moveStars{from{background-position:0 0}to{background-position:400px 200px}}

.site-footer{text-align:center;padding:18px;color:var(--muted)}

/* responsywność */
@media (max-width:820px){
  .hero{padding:48px 16px 64px}
  .hero-inner{max-width:100%}
  .site-nav{padding:10px 12px;align-items:flex-start;flex-wrap:wrap}
  .nav-links-desktop{display:none}
  .nav-menu{display:block;margin-left:auto;flex:0 0 auto}
  .nav-menu .nav-links{margin-top:10px}
  .grid{grid-template-columns:1fr}
  .hero h1{font-size:2.2rem}
  .hero-cta{display:flex;flex-wrap:wrap;justify-content:center}
  .btn{min-width:140px}
  .container{margin-top:-32px;padding:0 16px}
  .card{padding:18px}
  .info-card{align-items:flex-start;flex-direction:column}
  .info-link{width:100%;text-align:center}
  .hero-media{flex-direction:column;gap:14px}
  .hero-photo,.hero-preview{max-width:100%}
  .hero-photo{max-height:320px;object-fit:cover}
  .device{width:min(100%,320px)}
}

/* Dark mode defaults */
@media (prefers-color-scheme: dark) {
  :root{
    --bg1:#0f1724;
    --bg2:#0b1a2b;
    --accent:#6ee7b7;
    --text:#E6F7FF;
    --muted:#9FBFD6;
    --tagline:#BFDCEA;
    --card:#0f2130;
  }
}

/* Light mode adjustments */
@media (prefers-color-scheme: light) {
  :root{
    --bg1:#f6fbff;
    --bg2:#eaf6ff;
    --accent:#2b6cb0;
    --text:#0b1220;
    --muted:#475569;
    --tagline:#55697a;
    --card:#ffffff;
  }
  body{background:linear-gradient(180deg,var(--bg1),var(--bg2));}
  .card{background:var(--card);color:var(--text)}
  .hero h1{color:var(--text)}
  .btn{color:#fff}
}