:root{
  --bg:#050805;--bg2:#0a0f0a;--panel:rgba(198,255,61,.04);--panel2:rgba(198,255,61,.08);
  --line:rgba(198,255,61,.14);--line2:rgba(198,255,61,.3);
  --text:#e9f5e0;--muted:#9fb49a;--dim:#5f7260;
  --lime:#c6ff3d;--frog:#3ddc84;--cyan:#39e5ff;--violet:#a78bfa;--amber:#ffb454;--red:#ff5c6c;--blue:#4f8cff;
  --font:"Inter",system-ui,sans-serif;--display:"Space Grotesk","Inter",sans-serif;--mono:"JetBrains Mono",Menlo,monospace;
  --max:1140px;--gutter:20px;--r:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.65;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.08;margin:0 0 .5em}
h1{font-size:clamp(2.6rem,7vw,5.4rem);font-weight:700}
h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:700}
h3{font-size:1.2rem;font-weight:600}
p{margin:0 0 1em}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}.dim{color:var(--dim)}
.lime{color:var(--lime)}.frog{color:var(--frog)}.cyan{color:var(--cyan)}
.grad{background:linear-gradient(110deg,var(--lime),var(--frog) 50%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
section{padding:96px 0;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);border:1px solid var(--line2);background:rgba(198,255,61,.06);padding:6px 12px;border-radius:999px;margin-bottom:18px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}
.head{max-width:760px;margin-bottom:48px}
.head p{font-size:1.1rem;color:var(--muted)}
.center{text-align:center;margin-left:auto;margin-right:auto}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:12px;font-weight:600;font-size:.95rem;border:1px solid transparent;cursor:pointer;font-family:var(--font);transition:.2s;white-space:nowrap}
.btn-primary{background:var(--lime);color:#050805;box-shadow:0 10px 30px -10px rgba(198,255,61,.6)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(198,255,61,.8)}
.btn-ghost{background:var(--panel);border-color:var(--line2);color:var(--text)}
.btn-ghost:hover{background:var(--panel2)}
.tag{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:6px;border:1px solid var(--line);color:var(--muted)}
.tag.lime{color:var(--lime);border-color:var(--line2)}.tag.cyan{color:var(--cyan);border-color:rgba(57,229,255,.35)}.tag.violet{color:var(--violet);border-color:rgba(167,139,250,.4)}.tag.amber{color:var(--amber);border-color:rgba(255,180,84,.4)}.tag.red{color:var(--red);border-color:rgba(255,92,108,.4)}.tag.blue{color:#8fb3ff;border-color:rgba(79,140,255,.45)}.tag.frog{color:var(--frog);border-color:rgba(61,220,132,.4)}
hr.div{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--line2),transparent);margin:0}

/* backgrounds */
#bg{position:fixed;inset:0;z-index:-2;pointer-events:none}
.bg-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(198,255,61,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(198,255,61,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,#000 20%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,#000 20%,transparent 100%)}

/* nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(5,8,5,.72);border-bottom:1px solid var(--line)}
.nav .container{display:flex;align-items:center;justify-content:space-between;height:62px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:700;font-size:1rem;letter-spacing:.04em}
.logo .navlogo{height:34px;width:auto;filter:drop-shadow(0 0 10px rgba(198,255,61,.35))}.logo .navtxt{font-family:var(--mono);font-size:.8rem;letter-spacing:.16em;color:var(--muted);margin-right:4px}
.nav-links{display:flex;gap:22px;font-size:.88rem;color:var(--muted)}
.nav-links a:hover{color:var(--lime)}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;width:38px;height:38px;cursor:pointer}
.mobile-menu{display:none;border-top:1px solid var(--line);background:rgba(5,8,5,.97);padding:10px 0 14px}
.mobile-menu a{display:block;padding:11px var(--gutter);color:var(--muted)}
.mobile-menu.open{display:block}
.progress{position:fixed;top:0;left:0;height:2px;background:var(--lime);width:0;z-index:60;box-shadow:0 0 10px var(--lime)}

/* hero */
.hero{min-height:88vh;display:flex;align-items:center;padding:60px 0 60px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero .lead{font-size:1.2rem;color:var(--muted);max-width:560px}
.flipword{display:inline-block;position:relative;cursor:pointer;font-family:var(--mono);letter-spacing:.02em}
.flipword span{display:inline-block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.flipword.flipped span{transform:scaleX(-1)}
.flipword .hint{position:absolute;left:0;top:100%;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);transform:none!important;font-family:var(--mono)}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
.hstat{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:14px}
.hstat b{display:block;font-family:var(--display);font-size:1.5rem;letter-spacing:-.02em}
.hstat span{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
/* terminal */
.term{background:linear-gradient(180deg,rgba(10,15,10,.92),rgba(5,8,5,.95));border:1px solid var(--line2);border-radius:18px;box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 60px -20px rgba(198,255,61,.3);overflow:hidden;font-family:var(--mono);font-size:.8rem}
.term-bar{display:flex;gap:8px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);color:var(--dim);font-size:.7rem}
.term-bar i{width:10px;height:10px;border-radius:50%;background:#2c3446}.term-bar i:nth-child(1){background:#ff5f57}.term-bar i:nth-child(2){background:#febc2e}.term-bar i:nth-child(3){background:#28c840}
.term-bar span{margin-left:auto;letter-spacing:.08em}
.term-body{padding:16px 18px 18px;min-height:300px;line-height:1.75;color:#cfe3c7}
.term-body .ln{opacity:0;transform:translateY(4px);animation:ln .4s forwards}
.k{color:var(--lime)}.v{color:var(--frog)}.a{color:var(--cyan)}.w{color:var(--amber)}.d{color:var(--dim)}
.cursor{display:inline-block;width:8px;height:14px;background:var(--lime);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes ln{to{opacity:1;transform:none}}@keyframes blink{50%{opacity:0}}

/* marquee */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;overflow:hidden;background:rgba(198,255,61,.02)}
.marquee-track{display:flex;gap:40px;white-space:nowrap;animation:marq 46s linear infinite;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.marquee-track span::before{content:"🐸";margin-right:12px}
@keyframes marq{to{transform:translateX(-50%)}}

/* cards */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;position:relative;overflow:hidden;transition:.25s}
.card:hover{border-color:var(--line2);transform:translateY(-3px);background:var(--panel2)}
.card h3{margin-top:12px}
.card p{color:var(--muted);font-size:.94rem;margin:0}
.card .num{position:absolute;top:16px;right:18px;font-family:var(--mono);font-size:.7rem;color:var(--dim)}
.card .big{font-family:var(--display);font-size:2.2rem;letter-spacing:-.03em;line-height:1;margin-bottom:6px}

/* answer block */
.answer{border:1px solid var(--line2);border-radius:20px;padding:30px;background:radial-gradient(ellipse at top left,rgba(198,255,61,.12),transparent 55%),linear-gradient(180deg,rgba(10,15,10,.9),rgba(5,8,5,.9));box-shadow:0 30px 80px -40px rgba(198,255,61,.35)}
.answer p{font-size:1.08rem;color:var(--text)}
.answer p b{color:var(--lime)}

/* timeline (micky) */
.hscroll{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 18px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.hscroll::-webkit-scrollbar{height:6px}.hscroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.tcard{flex:0 0 300px;scroll-snap-align:start;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:22px;position:relative}
.tcard .yr{font-family:var(--mono);color:var(--lime);font-size:.78rem;letter-spacing:.1em;margin-bottom:10px}
.tcard h3{font-size:1.05rem}
.tcard p{color:var(--muted);font-size:.9rem;margin:0}
.tcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--lime),transparent);border-radius:3px}

/* grid (ribbit empire) */
.layers{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.layers button{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:8px 14px;font-size:.82rem;cursor:pointer;font-family:var(--font);transition:.2s}
.layers button.active,.layers button:hover{border-color:var(--lime);color:var(--lime);background:rgba(198,255,61,.08)}
.nodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.node{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:12px 14px;font-size:.86rem;transition:.25s;position:relative}
.node small{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.node.dimmed{opacity:.22;filter:grayscale(1)}
.node.hot{border-color:var(--lime);box-shadow:0 0 0 1px rgba(198,255,61,.25),0 0 24px -8px rgba(198,255,61,.5)}
.node.core{border-color:var(--lime);background:rgba(198,255,61,.1)}

/* evidence board */
.meter{display:flex;align-items:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.meter .bar{flex:1;min-width:200px;height:10px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden;border:1px solid var(--line)}
.meter .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--frog),var(--lime));transition:width .5s;box-shadow:0 0 14px var(--lime)}
.meter b{font-family:var(--mono);font-size:.8rem;color:var(--lime);min-width:150px}
.flip{perspective:1200px;height:230px;cursor:pointer}
.flip .inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.flip.on .inner{transform:rotateY(180deg)}
.flip .face .tag{align-self:flex-start}
.flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--panel);display:flex;flex-direction:column;overflow:hidden}
.flip .back{transform:rotateY(180deg);border-color:var(--line2);background:linear-gradient(180deg,rgba(198,255,61,.1),rgba(10,15,10,.95))}
.flip h3{font-size:1rem;margin:10px 0 6px}
.flip .front p{color:var(--muted);font-size:.88rem;margin:0}
.flip .back p{font-size:.84rem;color:var(--text);margin:0;line-height:1.5}
.flip .back small{margin-top:auto;font-family:var(--mono);font-size:.64rem;color:var(--lime);letter-spacing:.08em}
.flip .tap{margin-top:auto;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* vertical timeline */
.vt{position:relative;padding-left:30px}
.vt::before{content:"";position:absolute;left:9px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--lime),var(--line))}
.vt .ev{position:relative;margin-bottom:22px;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:18px 20px;transition:.25s}
.vt .ev:hover{border-color:var(--line2)}
.vt .ev::before{content:"";position:absolute;left:-27px;top:22px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--lime);box-shadow:0 0 10px var(--lime)}
.vt .ev .when{font-family:var(--mono);font-size:.72rem;color:var(--lime);letter-spacing:.1em;margin-bottom:6px}
.vt .ev h3{font-size:1.02rem;margin-bottom:6px}
.vt .ev p{margin:0;color:var(--muted);font-size:.9rem}
.vt .ev.future{border-style:dashed;opacity:.8}
.vt .ev.future::before{background:var(--bg);border-color:var(--dim);box-shadow:none}
.yrs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.yrs button{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:7px 13px;font-size:.8rem;cursor:pointer;font-family:var(--mono)}
.yrs button.active{border-color:var(--lime);color:var(--lime)}

/* tabs (thesis) */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.tabs button{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:10px;padding:10px 14px;font-size:.85rem;cursor:pointer;font-family:var(--font);transition:.2s}
.tabs button.active{border-color:var(--lime);color:var(--lime);background:rgba(198,255,61,.08)}
.pane{display:none;border:1px solid var(--line2);border-radius:20px;padding:28px;background:linear-gradient(180deg,rgba(10,15,10,.9),rgba(5,8,5,.9))}
.pane.active{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;animation:ln .4s}
.pane h3{font-size:1.5rem}
.pane p{color:var(--muted)}
.pane ul{color:var(--muted);padding-left:18px;margin:0 0 12px;font-size:.94rem}
.pane li{margin-bottom:6px}
.pane .viz{border:1px solid var(--line);border-radius:14px;padding:18px;background:rgba(0,0,0,.35);min-height:220px}
.quote{border-left:3px solid var(--lime);padding:6px 0 6px 16px;color:var(--text);font-style:italic;margin:14px 0}
.quote small{display:block;font-style:normal;color:var(--dim);font-family:var(--mono);font-size:.7rem;margin-top:6px}

/* token trio */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.tok{border:1px solid var(--line);border-radius:14px;padding:18px;cursor:pointer;transition:.25s;background:var(--panel)}
.tok.b{--c:var(--blue)}.tok.g{--c:var(--frog)}.tok.r{--c:var(--red)}
.tok:hover,.tok.active{border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset,0 0 30px -12px var(--c)}
.tok .sq{width:34px;height:34px;border-radius:8px;background:var(--c);margin-bottom:10px;box-shadow:0 0 16px var(--c)}
.tok b{display:block;font-family:var(--display);font-size:1.05rem}
.tok span{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.tok-out{border:1px solid var(--line);border-radius:14px;padding:18px;background:rgba(0,0,0,.35);min-height:90px;color:var(--muted);font-size:.95rem}
.tok-out b{color:var(--text)}

/* acts */
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.act{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--panel);position:relative}
.act .roman{font-family:var(--display);font-size:2.4rem;color:var(--lime);line-height:1;margin-bottom:8px}
.act ul{list-style:none;padding:0;margin:12px 0 0;color:var(--muted);font-size:.9rem}
.act li{padding:6px 0 6px 22px;position:relative;border-top:1px dashed var(--line)}
.act li::before{content:"✓";position:absolute;left:0;top:7px;color:var(--frog);font-weight:800;font-size:.8rem}
.act li.todo::before{content:"○";color:var(--dim)}
.act.live{border-color:var(--line2);box-shadow:0 0 50px -20px rgba(198,255,61,.5)}
.pill{display:inline-flex;gap:6px;align-items:center;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--frog);border:1px solid rgba(61,220,132,.4);background:rgba(61,220,132,.08);padding:4px 9px;border-radius:999px}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--frog);box-shadow:0 0 8px var(--frog);animation:blink 1.4s infinite}

/* token facts */
.facts{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.kv{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.kv div{display:flex;justify-content:space-between;gap:14px;padding:12px 16px;border-top:1px solid var(--line);font-size:.9rem}
.kv div:first-child{border-top:0}
.kv div span:first-child{color:var(--dim);font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding-top:3px}
.kv div span:last-child{text-align:right;color:var(--text)}
.ca{font-family:var(--mono);font-size:.74rem;word-break:break-all;color:var(--lime);cursor:pointer;border:1px dashed var(--line2);padding:8px 10px;border-radius:8px;display:block;margin-top:6px;transition:.2s}
.ca:hover{background:rgba(198,255,61,.08)}
.bridge{border:1px solid var(--line2);border-radius:14px;padding:18px;background:rgba(0,0,0,.35)}
.bridge .bar{height:12px;border-radius:7px;background:rgba(255,255,255,.06);border:1px solid var(--line);overflow:hidden;margin:10px 0}
.bridge .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--frog),var(--lime));box-shadow:0 0 14px var(--lime);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}

/* calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.sl{margin-bottom:18px}
.sl label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.sl label b{color:var(--lime);text-transform:none;letter-spacing:0;font-size:.85rem}
input[type=range]{width:100%;accent-color:var(--lime)}
.out{border:1px solid var(--line2);border-radius:16px;padding:22px;background:linear-gradient(180deg,rgba(198,255,61,.08),rgba(5,8,5,.9))}
.out .row{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-top:1px solid var(--line);gap:12px}
.out .row:first-child{border-top:0}
.out .row span{color:var(--muted);font-size:.9rem}
.out .row b{font-family:var(--display);font-size:1.4rem;letter-spacing:-.02em}
.out .row b.huge{font-size:2.2rem;color:var(--lime)}
.note{font-size:.8rem;color:var(--dim);margin-top:12px;line-height:1.5}

/* quiz */
.quiz{border:1px solid var(--line2);border-radius:20px;padding:28px;background:linear-gradient(180deg,rgba(10,15,10,.9),rgba(5,8,5,.9))}
.quiz .q{font-family:var(--display);font-size:1.3rem;margin-bottom:16px}
.quiz .opts{display:grid;gap:10px}
.quiz .opts button{text-align:left;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:13px 16px;cursor:pointer;font-family:var(--font);font-size:.95rem;transition:.2s}
.quiz .opts button:hover{border-color:var(--line2)}
.quiz .opts button.right{border-color:var(--frog);background:rgba(61,220,132,.12)}
.quiz .opts button.wrong{border-color:var(--red);background:rgba(255,92,108,.1)}
.quiz .fb{margin-top:14px;color:var(--muted);font-size:.92rem;min-height:24px}
.quiz .foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:12px;flex-wrap:wrap}
.quiz .score{font-family:var(--mono);font-size:.78rem;color:var(--lime)}

/* glossary */
details{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:10px;padding:0 18px}
summary{cursor:pointer;padding:15px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--lime)}
details[open] summary::after{content:"–"}
details p{color:var(--muted);padding-bottom:15px;margin:0;font-size:.93rem}

/* sources */
.src{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.src a{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--panel);transition:.2s;font-size:.9rem}
.src a:hover{border-color:var(--lime)}
.src a b{display:block}
.src a small{color:var(--dim);font-family:var(--mono);font-size:.68rem}
.src .ic{flex:none;width:34px;height:34px;border-radius:9px;background:rgba(198,255,61,.1);border:1px solid var(--line2);display:grid;place-items:center;font-family:var(--mono);font-size:.7rem;color:var(--lime)}

.disc{border:1px solid rgba(255,180,84,.35);background:rgba(255,180,84,.06);border-radius:14px;padding:18px 20px;color:var(--muted);font-size:.88rem}
.disc b{color:var(--amber)}
footer{border-top:1px solid var(--line);padding:40px 0 30px;font-size:.82rem;color:var(--dim);font-family:var(--mono)}
footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}

@media (max-width:980px){
  .hero-grid,.pane.active,.facts,.calc{grid-template-columns:1fr}
  .g3,.g4,.acts,.trio{grid-template-columns:repeat(2,1fr)}
  .src{grid-template-columns:1fr}
}
@media (max-width:680px){
  .btn{white-space:normal;text-align:center}
  section{padding:64px 0}
  .nav-links{display:none}.burger{display:inline-grid;place-items:center}
  .g2,.g3,.g4,.acts,.trio,.hero-stats{grid-template-columns:1fr}
  .hero{min-height:auto;padding:48px 0 40px}
  .flip{height:250px}
  .pane{padding:20px}
  .answer{padding:22px}
}