/* shadcn/ui-style tokens: neutral zinc base, one bold accent (electric violet) */
:root{
  --background:#fafafa; --foreground:#09090b; --card:#ffffff; --muted:#f4f4f5; --muted-fg:#52525b;
  --border:#e4e4e7; --ring:#4f2cf0; --accent:#4f2cf0; --accent-fg:#ffffff; --accent-soft:#ede9fe;
  --radius:14px; --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--background);color:var(--foreground);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.mono{font-family:var(--mono)}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--foreground);color:#fff;padding:8px 12px;border-radius:8px;z-index:10}
.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:10px}

.grid-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(#d4d4d8 1px,transparent 1px);background-size:22px 22px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%)}

.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 0}
.brand{display:inline-flex;min-height:44px;align-items:center}
.brand img{width:112px}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;padding:6px 12px;border:1px solid var(--border);border-radius:999px;background:var(--card)}
.dot{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:pulse 2s infinite}

.hero{display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:40px;padding:56px 0 72px}
.eyebrow{display:inline-block;font-size:13px;color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:999px;margin:0 0 18px}
h1{font-size:clamp(44px,7.2vw,88px);line-height:.98;letter-spacing:-.045em;font-weight:800;margin:0 0 22px}
.accent{color:var(--accent);position:relative;white-space:nowrap}
.accent::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;background:var(--accent);opacity:.18;border-radius:4px}
.lead{font-size:clamp(19px,2.2vw,23px);font-weight:500;margin:0 0 10px;max-width:34ch}
.sub{color:var(--muted-fg);margin:0 0 30px;max-width:46ch}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border-radius:10px;font-weight:600;font-size:15px;text-decoration:none;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.btn-primary{background:var(--accent);color:var(--accent-fg);box-shadow:0 6px 20px -8px rgba(79,44,240,.7)}
.btn-primary:hover{background:#3f1fd6;transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--border);background:var(--card)}
.btn-ghost:hover{background:var(--muted)}

.flask{justify-self:center;position:relative;border:0;background:none;padding:12px;cursor:pointer;border-radius:24px;width:min(300px,100%)}
.flask svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 24px 30px rgba(79,44,240,.18))}
.glass{fill:none;stroke:var(--foreground);stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
.tick{fill:none;stroke:var(--foreground);stroke-width:3;stroke-linecap:round;opacity:.35}
.liquid,.wave{fill:var(--accent)}
.wave{animation:wave 4s linear infinite}
.bub{fill:#fff;opacity:.85;animation:rise 3.2s ease-in infinite}
.b2{animation-delay:.8s;animation-duration:2.6s}.b3{animation-delay:1.5s;animation-duration:3.8s}.b4{animation-delay:2.2s}
.flask-hint{display:block;text-align:center;font-size:12px;color:var(--muted-fg);margin-top:6px}
.flask.shake svg{animation:shake .6s ease}

.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:20px}
h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.03em;margin:0}
.muted{color:var(--muted-fg);margin:0}
.cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;min-height:200px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s ease;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(79,44,240,.12),transparent 60%)}
.card:hover{transform:translateY(-3px);border-color:#c4b5fd;box-shadow:0 12px 28px -14px rgba(79,44,240,.35)}
.card:hover::before{opacity:1}
.card h3{font-size:19px;letter-spacing:-.02em;margin:16px 0 6px}
.card p{margin:0;color:var(--muted-fg);font-size:15px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:#3b1fb8}
.pill-soft{background:var(--muted);color:var(--muted-fg)}
.card-teaser{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.card-teaser p{color:#ece8ff}
.card-teaser::before{background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 60%)}
.card-teaser:hover{border-color:var(--accent)}
.beaker{font-size:30px;line-height:1;display:inline-block;animation:bob 3s ease-in-out infinite}

.lab{padding-bottom:64px}
.rules{padding:28px 0 72px;border-top:1px dashed var(--border)}
.small-head{font-size:13px;font-weight:500;color:var(--muted-fg);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px}
.rule-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rule-list li{font-size:18px;font-weight:600;letter-spacing:-.01em;display:flex;gap:12px;align-items:baseline}
.num{color:var(--accent);font-size:14px}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px;padding:24px 0 calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--border);font-size:14px;color:var(--muted-fg)}
.foot p{margin:0}
.foot a{display:inline-flex;min-height:44px;align-items:center;font-weight:600;color:var(--foreground);text-underline-offset:4px}

@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-100px)}}
@keyframes rise{0%{transform:translateY(0);opacity:0}15%{opacity:.85}100%{transform:translateY(-110px);opacity:0}}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-4px) rotate(6deg)}}

@media (max-width:960px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;gap:16px;padding:28px 0 48px}
  .flask{order:-1;width:170px;justify-self:start;padding:0}
  .flask-hint{text-align:left}
  .rule-list{grid-template-columns:1fr}
}
@media (max-width:520px){
  .cards{grid-template-columns:1fr}
  .card{min-height:0}
  .actions .btn{flex:1 1 100%}
  .brand img{width:96px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .bub{opacity:.6}
}