/* Reset */
*{box-sizing:border-box}html,body{margin:0;padding:0}
:root{
  --bg:#0a0a0a; --panel:#0f0f0f; --fg:#eaeaea; --muted:#a1a1a1;
  --line:#1f1f1f; --pill:#141414; --pill-border:#2a2a2a;
}
body{font-family:'Inter',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg)}
.container{width:min(1100px,92vw);margin-inline:auto}

/* Header */
.header{
  position:sticky; top:0; z-index:20;
  background:rgba(10,10,10,.9); border-bottom:1px solid var(--line);
  backdrop-filter: blur(8px);
}
/* Desktop: center logo and menu vertically stacked */
.header-inner{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:18px 24px 12px;
}
.brand{display:inline-flex; align-items:center; text-decoration:none}
.brand img{height:88px; display:block}
.nav{display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:center}
.nav a{color:var(--fg); text-decoration:none; font-weight:600; font-size:15px; padding:10px 12px; border-radius:10px}
.nav a:hover{background:#141414}
.nav .is-active{outline:1px solid #2a2a2a}

/* Mobile toggle hidden on desktop */
.menu-row{display:none; width:100%; align-items:center; justify-content:space-between}
.menu-toggle{
  display:none; width:44px; height:44px; border-radius:8px; border:1px solid var(--line);
  background:#121212; color:var(--fg); align-items:center; justify-content:center; cursor:pointer;
}
.menu-toggle span, .menu-toggle:before, .menu-toggle:after{
  content:""; display:block; width:24px; height:2px; background:var(--fg); transition:transform .25s ease, opacity .2s ease;
}
.menu-toggle span{transform-origin:center}
.menu-toggle:before, .menu-toggle:after{position:absolute}
.menu-toggle:before{transform:translateY(-7px)}
.menu-toggle:after{transform:translateY(7px)}
.menu-toggle.active span{opacity:0}
.menu-toggle.active:before{transform:translateY(0) rotate(45deg)}
.menu-toggle.active:after{transform:translateY(0) rotate(-45deg)}

/* Mobile dropdown */
.nav-panel{display:none; overflow:hidden; border-top:1px solid var(--line)}
.nav-panel.open{display:block; animation:slideDown .25s ease forwards}
@keyframes slideDown{from{max-height:0; opacity:.0} to{max-height:260px; opacity:1}}
.nav-col{display:flex; flex-direction:column; gap:4px; padding:12px 16px}
.nav-col a{padding:12px 12px}

/* Larger logo on big desktop */
@media (min-width: 1024px){ .brand img{height:112px} }

/* Hero */
.hero{ text-align:center; padding:72px 0 60px }
h1{font-size:clamp(42px,7.4vw,76px); line-height:1.05; margin:0 0 14px; letter-spacing:-.02em; font-weight:800}
.tagline{color:var(--muted); font-size:clamp(16px,2.6vw,20px); margin:0 0 28px}

/* Buttons */
.buttons{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:2rem}
.pill{display:inline-block; padding:12px 16px; border-radius:999px; background:var(--pill); border:1px solid var(--pill-border); color:var(--fg); text-decoration:none; transition:transform .08s ease,border-color .2s ease, background .2s ease; font-weight:600; font-size:14px}
.pill:hover{transform:translateY(-1px); border-color:#3a3a3a; background:#161616}
.pill-ig{border-color:#3b3b3b}
.pill:focus-visible{outline:2px solid #888; outline-offset:2px}

/* Page */
.page{padding:64px 0}
.lead{color:var(--muted); font-size:18px}

/* Products */
.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:24px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px; text-align:center}
.card h3{margin:8px 0 6px; font-size:18px}
.card p{margin:0; color:var(--muted); font-size:14px}
.card .buttons{margin-top:12px}

/* Footer */
.footer{border-top:1px solid var(--line); margin-top:56px}
.footer .container{padding:18px 0; text-align:center}
.small{font-size:12px; color:var(--muted)}

/* Mobile layout */
@media (max-width: 768px){
  .header-inner{flex-direction:column; align-items:center; gap:10px; padding:12px 16px 8px}
  .nav{display:none}
  .menu-row{display:flex}
  .menu-toggle{display:inline-flex; position:relative}
}