:root{
  --bg:#0a0b0c; --fg:#e9eaec; --muted:#a3a8ae;
  --surface:rgba(255,255,255,.06); --surface-strong:rgba(255,255,255,.1); --border:rgba(255,255,255,.15);
  --brand-1:#7dd3fc; --brand-2:#a78bfa; --accent:#8ab4ff;
  --radius:16px; --container:1120px;
  --ease:cubic-bezier(.25,.46,.45,.94); --spring:cubic-bezier(.68,-0.55,.265,1.55); --smooth:cubic-bezier(.4,0,.2,1);
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;
  --shadow-sm:0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
  --shadow-md:0 4px 6px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);
}

[data-theme="light"]{
  --bg:#fafafa; --fg:#1a1a1a; --muted:#6b7280;
  --surface:rgba(0,0,0,.04); --surface-strong:rgba(0,0,0,.08); --border:rgba(0,0,0,.1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--font-sans); background:var(--bg); color:var(--fg); line-height:1.6; overflow-x:hidden}
h1,h2,h3,p,ul{margin:0}
ul{padding:0; list-style:none}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}

.container{max-width:var(--container); margin:0 auto; padding:0 1.5rem}
.grid{display:grid; gap:1.5rem}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.gradient-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 80% at 50% 10%, color-mix(in oklab, var(--brand-1) 15%, transparent), transparent 70%),
             radial-gradient(60% 80% at 50% 100%, color-mix(in oklab, var(--brand-2) 12%, transparent), transparent 70%);
}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.8) blur(20px);
  background:linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.05));
  border-bottom:1px solid var(--border);
  transition:all .3s var(--smooth);
  box-shadow:0 1px 0 rgba(255,255,255,.1);
}
.site-header .container{display:flex; align-items:center; padding:12px 0}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700}
.brand-mark{width:18px; height:18px; border-radius:6px; background:linear-gradient(135deg, var(--brand-1), var(--brand-2))}

.nav{display:flex; gap:.6rem; font-weight:600; margin-left:auto; margin-right:1rem}
.nav a{display:inline-flex; align-items:center; padding:10px 14px; border-radius:12px; position:relative; transition:all .25s var(--smooth)}
.nav a:hover{background:var(--surface)}
.nav a.active::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px;
  background:linear-gradient(90deg, var(--brand-1), var(--brand-2)); border-radius:1px;
}

.header-controls{display:flex; gap:.5rem}
.control-btn{
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:8px 12px; cursor:pointer; transition:all .2s var(--smooth);
  display:flex; align-items:center; gap:6px; font-size:.9rem; font-weight:500;
}
.control-btn:hover{background:var(--surface-strong); transform:translateY(-1px)}
.theme-icon{transition:transform .3s var(--smooth)}
[data-theme="dark"] .sun-icon{transform:rotate(180deg)}
[data-theme="light"] .moon-icon{transform:rotate(180deg)}

.progress-bar{position:fixed; top:0; left:0; height:2px; background:linear-gradient(90deg, var(--brand-1), var(--brand-2)); z-index:100; transition:width .1s ease-out}

.hero{text-align:center; padding:4rem 0 0.5rem}
.title{font-size:clamp(2.5rem, 8vw, 4.5rem); font-weight:800; line-height:1.1; margin-bottom:1.2rem}
.title .accent{
  background:linear-gradient(135deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  position:relative; z-index:1; display:inline-block;
}
.lead{font-size:1.1rem; color:var(--muted); max-width:800px; margin:0 auto 1.5rem; line-height:1.7}
.cta{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:0}

.section{padding:2rem 0}
.section-head{text-align:center; margin-bottom:1.5rem; display:flow-root; padding-bottom:.3rem}
.section-head h2{font-size:2.2rem; font-weight:700; margin:0}
.section-head p{color:var(--muted); margin:.35rem 0 0; font-size:1.05rem}
.section-divider{
  width:60px; height:3px; margin:0.6rem auto 0;
  background:linear-gradient(90deg, var(--brand-1), var(--brand-2)); border-radius:2px;
}

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; display:flex; flex-direction:column; height:100%;
  box-shadow:var(--shadow-sm); backdrop-filter:blur(10px);
  transition:all .3s var(--smooth);
}
.card:hover{
  transform:translateY(-4px) scale(1.02);
  background:var(--surface-strong);
  border-color:color-mix(in srgb, var(--border) 40%, var(--brand-2) 60%);
  box-shadow:var(--shadow-lg);
}
.card h3{font-size:1.2rem; font-weight:600; margin-bottom:.8rem}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 24px; border-radius:var(--radius); border:1px solid var(--border);
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  transition:all .25s var(--smooth); box-shadow:var(--shadow-sm); backdrop-filter:blur(10px);
}
.btn.primary{
  background:linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color:#0b0b0c; border-color:transparent; box-shadow:var(--shadow-md);
}
.btn.primary:hover{transform:translateY(-2px) scale(1.05); box-shadow:var(--shadow-lg); filter:brightness(1.1)}
.btn.ghost{background:rgba(255,255,255,.05); backdrop-filter:blur(20px)}
.btn.ghost:hover{background:rgba(255,255,255,.1); transform:translateY(-2px); border-color:var(--brand-1)}
.btn.tiny{padding:6px 12px; font-size:.8rem; font-weight:500; min-width:auto; white-space:nowrap}

.product-media{
  position:relative; border-radius:calc(var(--radius) + 4px); border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
             radial-gradient(60% 80% at 50% 10%, color-mix(in oklab, var(--brand-1) 35%, transparent), transparent 70%),
             radial-gradient(60% 80% at 50% 100%, color-mix(in oklab, var(--brand-2) 33%, transparent), transparent 70%);
  aspect-ratio:1; display:grid; place-items:center; overflow:hidden;
  transition:all .4s var(--spring); box-shadow:var(--shadow-sm);
}
.product-card:hover .product-media{
  transform:translateY(-6px) scale(1.03);
  border-color:color-mix(in srgb, var(--brand-2) 60%, var(--border));
  box-shadow:var(--shadow-lg);
}
.product-img{width:100%; height:100%; object-fit:contain; object-position:center}
.media-label{
  position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.6); color:#fff;
  padding:4px 8px; border-radius:6px; font-size:.75rem; font-weight:500;
}

.product-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:12px; gap:12px;
}
.product-header .product-title{
  margin:0; flex:1; font-size:1.1rem; line-height:1.3; display:flex; align-items:center;
}
.product-header .btn.tiny{align-self:center}

.checklist li{display:flex; align-items:flex-start; gap:.5rem; margin:.5rem 0}
.checklist li::before{content:"✓"; color:var(--brand-1); font-weight:bold; margin-top:2px}
.link-list a{color:var(--brand-1); text-decoration:underline; text-underline-offset:2px}
.link-list a:hover{color:var(--brand-2)}

.site-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:4rem;
  padding:1rem 0; 
  border-top:1px solid var(--border); 
  margin-top:1rem; 
  text-align:center;
  color:var(--muted); 
  font-size:.9rem;
  background:var(--bg);
  position:relative;
  z-index:1;
}

.site-footer .container{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:1200px;
}

.site-footer p{
  margin:0;
  line-height:1.4;
}

.reveal{opacity:0; transform:translateY(20px)}
.reveal.in-view{
  opacity:1; transform:none;
  animation:var(--anim,fadeUp) .6s var(--spring) both;
  animation-delay:var(--delay,0ms);
}
[data-animate="fade-up"]{--anim:fadeUp}
[data-animate="blur-up"]{--anim:blurUp}
[data-animate="scale-in"]{--anim:scaleIn}

@keyframes fadeUp{from{opacity:0; transform:translateY(30px) scale(.95)} to{opacity:1; transform:translateY(0) scale(1)}}
@keyframes blurUp{from{opacity:0; transform:translateY(20px); filter:blur(8px)} 60%{filter:blur(0)} to{opacity:1; transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0; transform:scale(.8) translateY(20px)} to{opacity:1; transform:scale(1) translateY(0)}}

@media(max-width:768px){
  .container{padding:0 1rem}
  .hero{padding:3rem 0 1.5rem}
  .section{padding:2rem 0}
  .cta{flex-direction:column; align-items:center}
  .nav{gap:.4rem; overflow-x:auto; scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
}