:root{
    --bg:#0b0c0f; --ink:#e5e7eb; --muted:#9aa3b2; --panel:#12141a;
    --brand:#6e75ff; --accent:#22d3ee; --radius:18px;
  }
  @media (prefers-color-scheme: light){
    :root{--bg:#f8fafc; --ink:#0b1220; --muted:#475569; --panel:#ffffff}
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
    background:
      radial-gradient(1100px 500px at -10% -10%, rgba(110,117,255,.25), transparent 60%),
      radial-gradient(900px 420px at 110% -20%, rgba(34,211,238,.22), transparent 60%),
      var(--bg);
    color:var(--ink); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
  }
  a{color:inherit}
  .wrap{width:min(1100px,92%); margin-inline:auto}
  
  /* Header */
  header{position:sticky;top:0;z-index:5; backdrop-filter:saturate(160%) blur(8px);
    background:color-mix(in srgb, var(--bg) 78%, transparent);
    border-bottom:1px solid rgba(148,163,184,.18)}
  .nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
  .brand{display:flex;gap:.6rem;align-items:center;text-decoration:none}
  .logo{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
    background:linear-gradient(135deg, var(--brand), var(--accent));
    box-shadow:0 10px 30px rgba(34,211,238,.18)}
  .brand b{letter-spacing:.4px}
  
  /* Hero */
  .hero{position:relative; padding:86px 0 72px; text-align:center}
  .eyebrow{display:inline-block; padding:.28rem .7rem; border:1px dashed rgba(148,163,184,.35);
    border-radius:999px; color:var(--muted); font-size:.9rem}
  h1{font-size:clamp(2.2rem, 2rem + 2.8vw, 4.2rem); line-height:1.06; margin:.7rem auto .5rem; width:min(900px,95%)}
  h1 span{background:linear-gradient(135deg, var(--brand), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
  .sub{color:var(--muted); font-size:clamp(1rem, .9rem + .6vw, 1.22rem); margin:0 auto; width:min(760px,95%)}
  
  /* Panels */
  .panel{position:relative; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
    border-radius:var(--radius); padding:20px; box-shadow:0 6px 18px rgba(0,0,0,.35);
    backdrop-filter:blur(10px) saturate(150%); transition:transform 0.15s ease, box-shadow 0.15s ease; cursor:pointer}
  .panel:hover{transform:scale(1.05); box-shadow:0 12px 24px rgba(0,0,0,.4); background:rgba(255,255,255,0.15)}
  .grid{display:grid; gap:16px; grid-template-columns:repeat(12,1fr)}
  
  /* Decorative 3D canvas */
  #bg3d{position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:-1; pointer-events:none; opacity:.9; margin:0; inset:0; display:block; outline:none}
  .grain:before{content:""; position:fixed; inset:0; pointer-events:none; mix-blend-mode:overlay; z-index:0;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%222%22 stitchTiles=%22stitch%22/></filter><rect width=%22160%22 height=%22160%22 filter=%22url(%23n)%22 opacity=%220.04%22/></svg>');
  }
  
  /* Sections */
  .section{position:relative; z-index:1; padding:42px 0}
  .cards .panel{grid-column:span 4}
  @media (max-width: 960px){ .cards .panel{grid-column:span 6} }
  @media (max-width: 640px){ .cards .panel{grid-column:span 12} .hero{padding-top:64px} }
  
  /* Footer */
  footer{position:relative; z-index:1; padding:42px 0 64px; color:var(--muted);
    border-top:1px solid rgba(148,163,184,.16); text-align:center}
  
  /* Test button bar */
  .testbar{position:fixed; z-index:3; bottom:16px; left:50%; transform:translateX(-50%);
    display:flex; gap:16px; padding:12px 16px; border-radius:14px; background:rgba(18,20,26,.6);
    backdrop-filter:saturate(160%) blur(8px); border:1px solid rgba(148,163,184,.2);
    box-shadow:0 10px 30px rgba(0,0,0,.35)}
  .testbtn{position:relative; display:inline-flex; align-items:center; gap:.6rem; color:#e5e7eb;
    font-weight:600; border:1px solid rgba(148,163,184,.25);
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));
    border-radius:12px; padding:.8rem 1.2rem; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; font-size:1rem}
  .testbtn:hover{transform:scale(1.1); box-shadow:0 10px 20px rgba(110,117,255,.18)}
  .testbtn:active{animation:jiggle 0.2s ease}
  @media (max-width:640px){.testbar{left:auto; right:12px; transform:none; flex-wrap:wrap; width:min(94vw, 460px)}}
  
  @media (prefers-reduced-motion: reduce){ #bg3d{display:none} }
  
  /* Jiggle animation */
  @keyframes jiggle {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px) rotate(-1deg); }
    75% { transform: translateX(2px) rotate(1deg); }
  }