/* jagonya.ai: dark studio. Motif: jendela bidik kamera (sudut bingkai, timecode, titik REC). */
@font-face{font-family:"Archivo";src:url(/static/fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Inter";src:url(/static/fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JB Mono";src:url(/static/fonts/jbmono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#08080a;--bg2:#0f0f12;--card:#141418;--card2:#1b1b21;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --text:#f5f3ee;--soft:#c9c7c1;--muted:#8f8e97;
  --amber:#ffb31a;--amber2:#ffcd5c;--amber-ink:#1a1200;
  --rec:#ff3d2e;--violet:#8b7bff;
  --glass:rgba(22,22,27,.66);
  --display:"Archivo",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif;--mono:"JB Mono",ui-monospace,monospace;
  --r:18px;--r-lg:26px;
  --ease:cubic-bezier(.22,1,.36,1);--ease2:cubic-bezier(.16,1,.3,1);
  --tab:0px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:var(--tab)}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
::selection{background:var(--amber);color:var(--amber-ink)}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--amber);color:var(--amber-ink);padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{left:8px}
[hidden]{display:none!important}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Butiran film halus di seluruh halaman */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,.foot{position:relative;z-index:1}

/* Tipografi */
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
.wrap-s{width:min(860px,100% - 32px);margin-inline:auto}
section{padding:clamp(64px,10vw,128px) 0;position:relative}
.h-xxl,.h-xl,.h-lg,.h-md{font-family:var(--display);font-stretch:112%;font-weight:800;letter-spacing:-.025em;line-height:.98;margin:0;text-wrap:balance}
.h-xxl{font-size:clamp(42px,6.2vw,92px)}
.h-xl{font-size:clamp(38px,6.4vw,84px)}
.h-lg{font-size:clamp(32px,4.6vw,60px)}
.h-md{font-size:clamp(21px,2.3vw,28px);line-height:1.1;letter-spacing:-.015em}
.center{text-align:center;margin-inline:auto}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--soft);max-width:60ch;margin:22px 0 0}
.center.lead,.center .lead{margin-inline:auto}
.muted{color:var(--muted)}.soft{color:var(--soft)}
.small{font-size:14px}
.amber{color:var(--amber)}
.grad{background:linear-gradient(100deg,var(--amber) 10%,#ffd98a 45%,var(--amber) 80%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s linear infinite}
.outline{-webkit-text-stroke:1.5px var(--text);color:transparent}
@keyframes sheen{to{background-position:-200% 0}}
.eyebrow,.hud{font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:7px 12px;border:1px solid var(--line2);border-radius:99px;background:var(--glass);backdrop-filter:blur(12px)}
.rec{width:8px;height:8px;border-radius:50%;background:var(--rec);box-shadow:0 0 0 0 rgba(255,61,46,.6);animation:rec 1.6s infinite;flex:none}
.eyebrow .rec{width:7px;height:9px;border-radius:2.5px}
@keyframes rec{0%{box-shadow:0 0 0 0 rgba(255,61,46,.55)}70%{box-shadow:0 0 0 9px rgba(255,61,46,0)}100%{box-shadow:0 0 0 0 rgba(255,61,46,0)}}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(32px,5vw,56px)}
.sec-head .eyebrow{justify-self:start}
.sec-head.center{justify-items:center;text-align:center}
.sec-head.center .eyebrow{justify-self:center}
.sec-head p{margin:0;color:var(--soft);max-width:62ch;font-size:clamp(16px,1.4vw,18px)}
.tc{font:500 12px var(--mono);color:var(--muted);letter-spacing:.08em}

/* Tombol */
.btn{--h:54px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 26px;border-radius:99px;border:0;cursor:pointer;background:var(--amber);color:var(--amber-ink);font:800 16px/1 var(--display);font-stretch:105%;letter-spacing:-.005em;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px -12px rgba(255,179,26,.65)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.98)}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-ghost{background:var(--glass);color:var(--text);border:1px solid var(--line2);backdrop-filter:blur(14px)}
.btn-ghost:hover{box-shadow:none;border-color:rgba(255,255,255,.3)}
.btn-sm{--h:42px;padding:0 18px;font-size:14.5px}
.btn-block{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.center .btns,.btns.center{justify-content:center}

/* Logo hidup (inline SVG, {{template "logo" "anim"}}).
   Isi: 7 potongan .k (balok gelap) + .y1 (dadu kuning) + .y2 (lampu REC kuning, kadang jadi mata).
   Variabel per potongan di template: --i urutan rakit, --sx/--sy arah terbang (-1..1), --r miring awal.
   Status dari site.js: .go = sedang dirakit, .built = utuh (boleh gestur).
   Gestur sementara: .g-wave (balok lompat bergiliran), .g-hop (dadu menggelinding), .g-blink (mata melirik + kedip),
   .boom (berhamburan lalu kembali; hover/tap). --sv = goyang jeli saat scroll.
   Varian: .mark (logo raksasa footer), .lost (404: berserakan, dirakit saat disentuh).
   Tanpa JS atau reduced motion: logo diam utuh. Semua gerak hanya transform/opacity. */
.brand{display:inline-flex;align-items:center;gap:11px;font:800 19px/1 var(--display);font-stretch:110%;letter-spacing:-.02em}
.brand .wm b{color:var(--amber);font-weight:800}
.logo{width:34px;height:34px;flex:none;overflow:visible}
.logo .k{fill:var(--text)}
.logo .y{fill:var(--amber)}
.logo path,.logo polygon{transform-box:fill-box;transform-origin:50% 100%}
.logo .y2{transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){
  .logo .k,.logo .y{translate:0 calc(var(--sv,0)*var(--lag,1)*16%);transition:translate .7s cubic-bezier(.3,2.2,.45,1)}
  .logo .k{--lag:calc(.45 + var(--i)*.14)}
  .logo .y1{--lag:1.8}.logo .y2{--lag:1.3}
  .js .logo.anim:not(.go):not(.built) :is(.k,.y){opacity:0}
  .logo.go .k{animation:lg-build .95s calc(var(--i)*75ms) backwards}
  .logo.go .y1{animation:lg-dice 1.2s .5s backwards}
  .logo.go .y2{animation:lg-rec 2.6s 1.5s infinite,lg-pop .75s .8s backwards}
  .logo.built .y2{animation:lg-rec 2.6s infinite}
  .logo.g-wave .k{animation:lg-wave .8s calc(var(--i)*65ms)}
  .logo.g-wave .y1{animation:lg-wave .8s .5s}
  .logo.g-hop .y1{animation:lg-hop 1.05s}
  .logo.g-hop .k{animation:lg-flinch .5s calc(.42s + var(--i)*20ms)}
  .logo.g-blink .y2{animation:lg-rec 2.6s infinite,lg-look 1.5s}
  .logo.boom :is(.k,.y1){animation:lg-boom .95s calc(var(--i,2)*22ms)}
  .logo.boom .y2{animation:lg-rec 2.6s infinite,lg-boom-y .95s}
  .js .logo.anim{cursor:pointer}
}
@keyframes lg-build{
  0%{opacity:0;transform:translate(calc(var(--sx)*110%),calc(var(--sy)*110%)) rotate(var(--r)) scale(.5);animation-timing-function:cubic-bezier(.5,0,.85,.45)}
  42%{opacity:1;transform:scale(1.16,.8);animation-timing-function:cubic-bezier(.15,.7,.35,1)}
  62%{transform:translateY(-16%) rotate(calc(var(--r)*-.25)) scale(.93,1.09);animation-timing-function:cubic-bezier(.6,0,.9,.55)}
  78%{transform:scale(1.07,.94);animation-timing-function:ease-out}
  90%{transform:translateY(-3%) scale(.99,1.01)}
  100%{transform:none}
}
@keyframes lg-dice{
  0%{opacity:0;transform:translateY(-340%) rotate(-300deg) scale(.7);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  38%{opacity:1;transform:scale(1.28,.68);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  56%{transform:translateY(-60%) rotate(14deg) scale(.9,1.12);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  70%{transform:scale(1.14,.84);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  82%{transform:translateY(-16%) rotate(-4deg)}
  92%{transform:scale(1.04,.96)}
  100%{transform:none}
}
@keyframes lg-pop{0%{opacity:0;transform:scale(0) rotate(-90deg)}55%{opacity:1;transform:scale(1.4) rotate(8deg)}75%{transform:scale(.86)}90%{transform:scale(1.06)}100%{transform:none}}
@keyframes lg-rec{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes lg-wave{0%,100%{transform:none}25%{transform:translateY(-14%) scale(.96,1.06)}50%{transform:scale(1.07,.92)}70%{transform:translateY(-3%)}}
@keyframes lg-hop{
  0%{transform:none}
  16%{transform:scale(1.18,.76);animation-timing-function:cubic-bezier(.2,.8,.4,1)}
  46%{transform:translateY(-175%) rotate(200deg) scale(.94,1.08);animation-timing-function:cubic-bezier(.6,0,.9,.5)}
  66%{transform:rotate(360deg) scale(1.2,.78);animation-timing-function:cubic-bezier(.2,.8,.4,1)}
  80%{transform:translateY(-18%) rotate(360deg)}
  92%{transform:rotate(360deg) scale(1.05,.95)}
  100%{transform:rotate(360deg)}
}
@keyframes lg-flinch{0%,100%{transform:none}35%{transform:scale(1.05,.93)}}
@keyframes lg-look{0%,100%{transform:none}14%,36%{transform:translateX(-22%)}50%,70%{transform:translateX(22%)}80%{transform:scale(1.1,.08)}86%{transform:none}91%{transform:scale(1.1,.08)}96%{transform:none}}
@keyframes lg-boom{
  0%{transform:none;animation-timing-function:cubic-bezier(.15,.8,.3,1)}
  30%{transform:translate(calc(var(--sx)*34%),calc(var(--sy)*34%)) rotate(calc(var(--sx)*16deg + var(--r)*.5)) scale(.88);animation-timing-function:cubic-bezier(.6,0,.85,.5)}
  58%{transform:translate(calc(var(--sx)*-5%),calc(var(--sy)*-5%)) scale(1.07,.93);animation-timing-function:ease-out}
  78%{transform:translate(calc(var(--sx)*3%),calc(var(--sy)*3%)) scale(.98,1.03)}
  100%{transform:none}
}
@keyframes lg-boom-y{0%{transform:none}30%{transform:translate(-40%,30%) rotate(120deg) scale(1.5)}58%{transform:rotate(-10deg) scale(.85)}78%{transform:scale(1.08)}100%{transform:none}}

/* Logo raksasa di footer: balok gelap timbul, kotak kuning menyala. */
.foot{overflow:clip}
.foot-mark{--w:clamp(260px,46vw,620px);width:var(--w);aspect-ratio:1;margin:44px auto calc(var(--w)*-.42 - 28px)}
.logo.mark{width:100%;height:100%}
.logo.mark .k{fill:#131317;stroke:rgba(255,255,255,.07);stroke-width:1.5px;vector-effect:non-scaling-stroke}
.logo.mark .y{fill:var(--amber);opacity:.85}
/* Logo pembuka di ajakan penutup */
.final-logo{width:clamp(64px,8vw,92px);margin:0 auto 26px;aspect-ratio:1}
.final-logo .logo{width:100%;height:100%}

/* 404: logo berserakan, dirakit saat disentuh (site.js memasang .fix) */
.logo.lost{width:min(150px,40vw);height:auto;aspect-ratio:1;margin:72px auto 40px;cursor:pointer}
.logo.lost :is(.k,.y){transform:translate(calc(var(--sx)*30%),calc(var(--sy)*30%)) rotate(calc(var(--sx)*18deg + var(--r)*.7));transition:transform .8s cubic-bezier(.3,1.7,.45,1) calc(var(--i,3)*35ms)}
.logo.lost.fix :is(.k,.y){transform:none}
@media (prefers-reduced-motion:no-preference){
  .logo.lost:not(.fix) :is(.k,.y){animation:lg-drift 3.6s ease-in-out calc(var(--i,3)*-.5s) infinite alternate}
}
@keyframes lg-drift{to{translate:calc(var(--sy)*6%) calc(var(--sx)*-8%)}}

/* Ornamen huruf logo ({{template "glyph" ...}}): garis amber tipis, melayang pelan, parallax dari site.js.
   .gl-ink = isi gelap samar tanpa garis amber. .jl = versi kecil di kartu Alur JAGO. */
.glyph{position:absolute;left:var(--x);top:var(--y);height:var(--h);width:auto;max-width:none;z-index:-1;pointer-events:none;overflow:visible;fill:none;stroke:rgba(255,179,26,.2);stroke-width:1.3px;--gl-y:none;--gl-ys:rgba(255,179,26,.6)}
.gl-ink{fill:rgba(255,255,255,.022);stroke:rgba(255,255,255,.08)}
@media (max-width:860px){.hero .glyph{height:min(var(--h),440px)}.hero .sq.fl{left:auto!important;right:20px!important;top:104px!important;bottom:auto!important}.hero .sq.fl.ln{display:none}}
.jg-defs{position:absolute;width:0;height:0;overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .glyph:not(.jl){animation:gl-float 16s ease-in-out infinite alternate}
  .glyph:nth-of-type(2n){animation-duration:21s;animation-direction:alternate-reverse}
}
@keyframes gl-float{from{transform:rotate(-4deg)}to{transform:rotate(4deg) translateY(-3%)}}
.has-gl{overflow:clip;isolation:isolate}
.has-gl>.wrap{position:relative}

/* Kotak jagonya: bentuk kotak kuning logo (sudut kiri-atas dan kanan-bawah membulat).
   --sq-r dipakai ulang untuk bullet, penanda, tombol tab, badge. <i class="sq"></i> = kotak lepas;
   .sq.fl melayang, .sq.ln versi garis. */
:root{--sq-r:42% 8% 32% 8% / 36% 6% 26% 6%}
.sq{position:absolute;display:block;width:var(--s,14px);aspect-ratio:137/179;background:var(--amber);border-radius:var(--sq-r);pointer-events:none;z-index:-1}
.sq.ln{background:none;border:1.5px solid rgba(255,179,26,.55)}
@media (prefers-reduced-motion:no-preference){
  .sq.fl{animation:sq-fl 5s ease-in-out infinite;animation-delay:var(--d,0s)}
}
@keyframes sq-fl{0%,100%{transform:translateY(0) rotate(-8deg)}30%{transform:translateY(-14px) rotate(10deg)}55%{transform:translateY(0) rotate(-4deg) scale(1.12,.86)}70%{transform:translateY(-5px) rotate(0)}}

/* Header: kaca melayang */
.top{position:fixed;top:12px;left:50%;z-index:50;width:min(1200px,100% - 24px);transform:translateX(-50%);display:flex;align-items:center;gap:16px;padding:9px 9px 9px 16px;border-radius:99px;border:1px solid transparent;transition:transform .45s var(--ease),background .3s,border-color .3s,backdrop-filter .3s}
.top.scrolled,.top.open{background:var(--glass);border-color:var(--line);backdrop-filter:blur(18px) saturate(1.4)}
.top.hide{transform:translate(-50%,-140%)}
.top .brand{margin-right:auto}
.pill{display:flex;gap:2px;padding:4px;border-radius:99px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.pill a{padding:8px 14px;border-radius:99px;font-size:14.5px;font-weight:500;color:var(--soft);transition:color .2s,background .2s}
.pill a:hover,.pill a[aria-current]{color:var(--text);background:rgba(255,255,255,.07)}
.menu-btn,.mnav{display:none}
.top.lp{position:absolute;background:none;border-color:transparent}

/* Tab bar HP: rasa aplikasi */
.tabbar{display:none}
@media (max-width:860px){
  .pill{display:none}
  .top{top:0;width:100%;border-radius:0;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:linear-gradient(var(--bg) 30%,rgba(8,8,10,0))}
  .top.scrolled{background:rgba(8,8,10,.82);border-color:transparent;border-bottom-color:var(--line)}
  .top.hide{transform:translate(-50%,-110%)}
  .top .btn-sm{--h:38px;padding:0 15px;font-size:13.5px}
  body:not(.is-lp){--tab:calc(68px + env(safe-area-inset-bottom))}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;height:var(--tab);padding:0 6px env(safe-area-inset-bottom);background:rgba(12,12,15,.86);backdrop-filter:blur(20px) saturate(1.5);border-top:1px solid var(--line)}
  .tabbar a{display:grid;justify-items:center;gap:4px;padding:6px 0;font-size:10.5px;font-weight:600;letter-spacing:.01em;color:var(--muted);-webkit-tap-highlight-color:transparent;transition:color .2s}
  .tabbar a svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
  .tabbar a[aria-current]{color:var(--text)}
  .tabbar a[aria-current] svg{stroke:var(--amber)}
  .tabbar a:active svg{transform:scale(.86)}
  .tabbar .tab-cta span.ic{display:grid;place-items:center;width:48px;height:48px;margin-top:-26px;border-radius:20px 6px 17px 6px;border:4px solid var(--bg);box-sizing:content-box;background:var(--amber);color:var(--amber-ink);box-shadow:0 8px 24px -8px rgba(255,179,26,.7)}
  .tabbar .tab-cta span.ic svg{stroke:var(--amber-ink)!important;stroke-width:2.2}
  .tabbar .tab-cta{color:var(--amber)!important}
}

/* Hero */
.hero{padding:clamp(120px,15vw,170px) 0 clamp(48px,7vw,90px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero-grid>*{min-width:0}
.hero h1{margin-bottom:0}
.hero .lead{margin-top:24px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px}
.hero-meta span{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--soft)}
.hero-meta svg{width:18px;height:18px;stroke:var(--amber);fill:none;stroke-width:2}
.glow{position:absolute;pointer-events:none;border-radius:50%;filter:blur(90px);opacity:.5;z-index:-1}
.glow.a{width:520px;height:520px;background:radial-gradient(circle,rgba(255,179,26,.45),transparent 65%);top:-160px;right:-120px}
.glow.b{width:460px;height:460px;background:radial-gradient(circle,rgba(139,123,255,.35),transparent 65%);bottom:-200px;left:-160px}

/* Dinding video: kolom klip vertikal yang mengalir pelan */
.wall{position:relative;height:clamp(460px,58vw,640px);display:grid;grid-template-columns:repeat(3,1fr);gap:12px;mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.wall .col{display:grid;gap:12px;align-content:start;justify-items:stretch;animation:wall 38s linear infinite}
.wall .col:nth-child(2){animation-duration:46s;animation-direction:reverse}
.wall .col:nth-child(3){animation-duration:42s}
.wall:hover .col{animation-play-state:paused}
@keyframes wall{to{transform:translateY(-50%)}}
.clip{margin:0;position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.clip video,.clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clip .tag{position:absolute;left:8px;bottom:8px;z-index:2;padding:5px 9px;border-radius:99px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.clip .tc{position:absolute;right:9px;top:9px;z-index:2;color:#fff;opacity:.85;font-size:10.5px;display:flex;align-items:center;gap:6px}
.clip .tc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rec)}

/* Bingkai jendela bidik */
.vf{position:relative}
.vf::before,.vf::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--amber);pointer-events:none;z-index:3}
.vf::before{top:-8px;left:-8px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.vf::after{bottom:-8px;right:-8px;border-left:0;border-top:0;border-radius:0 0 6px 0}

/* Marquee teks */
.marq{overflow:hidden;border-block:1px solid var(--line);padding:18px 0;background:var(--bg2)}
.marq-in{display:flex;gap:42px;width:max-content;animation:marq 40s linear infinite}
.marq span{display:inline-flex;align-items:center;gap:42px;font:800 clamp(22px,3vw,36px)/1 var(--display);font-stretch:118%;letter-spacing:-.01em;white-space:nowrap;color:var(--soft)}
.marq span::after{content:"";width:13px;aspect-ratio:137/179;background:var(--amber);border-radius:var(--sq-r);animation:sq-bob 1.6s cubic-bezier(.3,0,.5,1) infinite}
.marq span:nth-child(even)::after{background:none;border:2px solid var(--amber);animation-delay:-.8s}
@keyframes sq-bob{0%,100%{transform:translateY(0) scale(1.12,.88)}12%{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) rotate(90deg)}88%{transform:translateY(0) rotate(180deg)}}
@keyframes marq{to{transform:translateX(-50%)}}

/* Kartu umum */
.card{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.6vw,32px);position:relative;overflow:hidden}
.card h3{font:800 20px/1.15 var(--display);font-stretch:108%;letter-spacing:-.01em;margin:0 0 10px}
.card p{margin:0;color:var(--soft);font-size:15.5px}
.card .num{font:500 12px var(--mono);color:var(--amber);letter-spacing:.1em;display:block;margin-bottom:18px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.grid>*{min-width:0}

/* Galeri format: grid video 9:16 */
.reel{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;justify-items:stretch}
.reel .clip{cursor:pointer}
.reel .clip:nth-child(6n+2),.reel .clip:nth-child(6n+5){transform:translateY(28px)}
.reel .clip::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.6));pointer-events:none}
.reel .clip .tag{z-index:3}
.clip .play{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);display:grid;place-items:center;z-index:3;transition:opacity .3s,transform .3s var(--ease)}
.clip .play::before{content:"";border-left:13px solid #fff;border-block:8px solid transparent;margin-left:4px}
.clip.playing .play{opacity:0;transform:scale(.6)}

/* Bandingkan: cara lama vs dengan AI */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch}
.vs>div:not(.x){border-radius:var(--r);padding:clamp(22px,3vw,34px);border:1px solid var(--line)}
.vs .old{background:var(--bg2)}
.vs .old li{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(255,61,46,.6)}
.vs .new{background:linear-gradient(160deg,rgba(255,179,26,.12),rgba(139,123,255,.06) 60%,var(--card));border-color:rgba(255,179,26,.35)}
.vs ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.vs li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.vs .new li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:8px 2px 7px 2px;background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1200' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat}
.vs .old li::before{content:"×";flex:none;width:18px;color:var(--rec);font-weight:800;text-align:center}
.vs .x{display:grid;place-items:center;font:800 26px var(--display);color:var(--amber)}

/* Langkah / alur kerja */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:f}
.flow .card{padding-top:58px}
.flow .card::before{counter-increment:f;content:"0" counter(f);position:absolute;top:20px;left:clamp(22px,2.6vw,32px);font:500 12px var(--mono);color:var(--amber);letter-spacing:.12em}
.flow .card h3{padding-right:34px}
.flow .card::after{content:"";position:absolute;top:26px;left:64px;right:78px;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}

/* Produk / tangga belajar */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.prod{display:flex;flex-direction:column;gap:14px;border-radius:var(--r-lg);padding:clamp(24px,2.8vw,34px);background:var(--card);border:1px solid var(--line);position:relative;transition:transform .4s var(--ease),border-color .3s}
.prod:hover{transform:translateY(-4px);border-color:var(--line2)}
.prod.hot{background:linear-gradient(170deg,rgba(255,179,26,.14),var(--card) 55%);border-color:rgba(255,179,26,.45)}
.prod .lvl{font:500 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.prod h3{font:800 clamp(24px,2.4vw,30px)/1.05 var(--display);font-stretch:112%;letter-spacing:-.02em;margin:0}
.prod p{margin:0;color:var(--soft);font-size:15.5px}
.prod ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px}
.prod li{display:flex;gap:10px}
.prod li::before{content:"";flex:none;width:7px;height:9px;margin-top:8px;border-radius:var(--sq-r);background:var(--amber)}
.prod .price{margin-top:auto;padding-top:16px;border-top:1px dashed var(--line2);display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.prod .price b{font:800 32px/1 var(--display);font-stretch:105%}
.prod .price s{color:var(--muted)}
.prod .price small{flex-basis:100%;color:var(--muted);font-size:13px}
.badge{position:absolute;top:-12px;right:22px;padding:6px 12px;border-radius:12px 3px 12px 3px;background:var(--amber);color:var(--amber-ink);font:800 12px/1 var(--display);letter-spacing:.02em}

/* Modul / kurikulum */
.mods{display:grid;gap:10px}
.mod{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);overflow:hidden;transition:border-color .3s}
.mod[open]{border-color:rgba(255,179,26,.4);background:var(--card)}
.mod summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:20px clamp(18px,2.4vw,28px)}
.mod summary::-webkit-details-marker{display:none}
.mod summary .n{font:500 12px var(--mono);color:var(--amber);letter-spacing:.1em}
.mod summary b{font:800 clamp(17px,1.7vw,21px)/1.2 var(--display);font-stretch:106%}
.mod summary small{display:block;font:400 14px/1.4 var(--body);color:var(--muted);margin-top:4px}
.mod summary::after{content:"+";font:300 26px/1 var(--body);color:var(--muted);transition:transform .3s var(--ease)}
.mod[open] summary::after{transform:rotate(45deg);color:var(--amber)}
.mod .body{padding:0 clamp(18px,2.4vw,28px) 22px calc(clamp(18px,2.4vw,28px) + 52px)}
.mod ol{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:l}
.mod ol li{counter-increment:l;display:grid;grid-template-columns:34px 1fr;font-size:15px;color:var(--soft)}
.mod ol li::before{content:counter(l,decimal-leading-zero);font:500 12px/1.9 var(--mono);color:var(--muted)}
.mod ol li b{color:var(--text);font-weight:600}
.mod .out{margin-top:16px;padding:14px 16px;border-radius:12px;background:rgba(255,179,26,.08);border:1px solid rgba(255,179,26,.22);font-size:14.5px}
.mod .out span{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:4px}

/* Rundown / jadwal workshop */
.rundown{display:grid;gap:0;border-left:1px dashed var(--line2);margin-left:8px}
.rundown li{list-style:none;position:relative;padding:0 0 26px 28px}
.rundown li::before{content:"";position:absolute;left:-6px;top:5px;width:11px;height:14px;border-radius:var(--sq-r);background:var(--bg);border:2px solid var(--amber)}
.rundown li.brk::before{border-color:var(--muted)}
.rundown time{font:500 12.5px var(--mono);color:var(--amber);letter-spacing:.08em}
.rundown b{display:block;font:800 18px/1.25 var(--display);font-stretch:106%;margin:4px 0}
.rundown p{margin:0;color:var(--soft);font-size:15px}
.rundown{padding:0;margin-block:0}

/* Founder AI */
.founder{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:center}
.founder>*{min-width:0}
.avatar{position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,#2a2333,#0e0e12 70%);border:1px solid var(--line)}
.avatar img,.avatar video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar .scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px);pointer-events:none}
.avatar .chip{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:99px;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.avatar .ph{position:absolute;inset:0;display:grid;place-items:center}
.avatar .ph svg{width:46%;opacity:.95}
.proofs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:28px}
.proofs div{padding:16px;border-radius:14px;background:var(--bg2);border:1px solid var(--line)}
.proofs b{display:block;font:800 15.5px/1.2 var(--display);margin-bottom:4px}
.proofs span{font-size:14px;color:var(--muted)}

/* Tiket / harga webinar */
.ticket{display:grid;grid-template-columns:1.25fr .75fr;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,179,26,.35);background:var(--card)}
.ticket>*{min-width:0}
.ticket .l{padding:clamp(24px,3.4vw,44px);border-right:2px dashed var(--line2);position:relative}
.ticket .r{padding:clamp(24px,3.4vw,44px);display:grid;align-content:center;gap:12px;background:linear-gradient(160deg,rgba(255,179,26,.14),transparent 70%)}
.ticket dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:22px 0 0;font-size:15px}
.ticket dt{font:500 11.5px/1.9 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ticket dd{margin:0;font-weight:600}
.ticks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.ticks li{display:flex;gap:12px;font-size:15.5px}
.ticks li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:8px 2px 7px 2px;background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1200' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat}
.price-old{color:var(--muted);font-size:20px}
span.price{font:800 clamp(44px,5vw,60px)/1 var(--display);font-stretch:105%;color:var(--amber);letter-spacing:-.02em}
.cd-label{margin:10px 0 6px;font:500 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cd{display:flex;gap:8px}
.cd div{flex:1;text-align:center;padding:10px 4px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid var(--line)}
.cd b{display:block;font:800 26px/1 var(--display);font-variant-numeric:tabular-nums}
.cd span{font-size:11px;color:var(--muted)}

/* FAQ */
.faq{display:grid;gap:10px;max-width:860px;text-align:left}
.faq details{border:1px solid var(--line);border-radius:16px;background:var(--bg2);transition:border-color .3s,background .3s}
.faq details[open]{border-color:var(--line2);background:var(--card)}
.faq summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;justify-content:space-between;gap:18px;font-weight:600;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;line-height:1;color:var(--muted);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--amber)}
.faq details p{margin:0;padding:0 22px 20px;color:var(--soft)}

/* Ajakan penutup */
.final{text-align:center;overflow:hidden}
.final .box{position:relative;border-radius:32px;padding:clamp(48px,8vw,96px) 22px;background:radial-gradient(80% 120% at 50% 0%,rgba(255,179,26,.22),transparent 60%),var(--card);border:1px solid var(--line2);overflow:hidden}
.final .box::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(circle at 50% 30%,#000,transparent 70%);-webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 70%);pointer-events:none}
.final .box{isolation:isolate}
.final .box>*{position:relative}
.final .box>:is(.glyph,.sq){position:absolute}

/* Statistik kecil */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stats div{background:var(--bg2);padding:22px}
.stats b{display:block;font:800 clamp(28px,3vw,40px)/1 var(--display);font-stretch:108%}
.stats span{font-size:14px;color:var(--muted)}

/* Form konsultasi */
.form{display:grid;gap:14px}
.form label{display:grid;gap:6px;font-weight:600;font-size:14.5px}
.form input,.form select,.form textarea,.co-form input{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line2);border-radius:12px;padding:14px 16px;min-height:52px;width:100%}
.form textarea{min-height:110px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus,.co-form input:focus{outline:2px solid var(--amber);outline-offset:1px}
.form-msg{min-height:1.4em;margin:0;color:var(--amber2);font-size:14.5px}

/* Bar CTA mengambang (LP dan desktop) */
.fbar{position:fixed;left:50%;bottom:16px;z-index:55;display:flex;align-items:center;gap:16px;width:min(560px,100% - 24px);padding:8px 8px 8px 20px;border-radius:99px;background:var(--glass);border:1px solid var(--line2);backdrop-filter:blur(18px) saturate(1.4);transform:translate(-50%,160%);transition:transform .5s var(--ease)}
.fbar.on{transform:translate(-50%,0)}
.fbar-txt{display:grid;margin-right:auto;line-height:1.25;min-width:0}
.fbar-txt b{font:800 14.5px var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbar-txt small{color:var(--muted);font-size:13px}
.fbar-txt s{opacity:.7}
@media (max-width:860px){
  body:not(.is-lp) .fbar{display:none}
  .is-lp .fbar{bottom:0;width:100%;border-radius:20px 20px 0 0;padding:10px 12px calc(10px + env(safe-area-inset-bottom)) 18px}
  .is-lp{padding-bottom:84px}
}

/* Footer */
.foot{border-top:1px solid var(--line);padding:56px 0 calc(28px + var(--tab));background:var(--bg2);margin-top:40px}
.foot-grid{display:grid;grid-template-columns:1.2fr .8fr 1.4fr;gap:32px}
.foot nav{display:grid;gap:10px;align-content:start}
.foot nav a{color:var(--soft)}
.foot nav a:hover{color:var(--amber)}
.foot .ai-made{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:7px 12px;border-radius:99px;border:1px solid var(--line2);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:36px;padding-top:20px;font-size:13.5px;color:var(--muted)}
.foot-lp{grid-template-columns:1fr 1.4fr}

/* Huruf J A G O di kartu Alur JAGO: potongan logo yang dirakit saat kartu muncul, menyala saat disentuh. */
.glyph.jl{position:absolute;left:auto;top:16px;right:18px;height:50px;z-index:0;stroke:rgba(255,179,26,.5);stroke-width:1.4px;fill:rgba(255,179,26,.05);--gl-y:rgba(255,179,26,.5);transition:fill .4s,stroke .4s,transform .8s cubic-bezier(.3,1.8,.45,1) .25s,opacity .4s .25s}
.flow .card:hover .jl{fill:rgba(255,179,26,.22);stroke:var(--amber);--gl-y:var(--amber)}
.js .flow .card[data-r]:not(.in) .jl{opacity:0;transform:translateY(-50%) rotate(-25deg) scale(.6)}
@media (prefers-reduced-motion:no-preference){.flow .card:hover .jl{animation:lg-wave .8s}}

/* Kartu yang bisa diklik: kotak kuning jatuh ke sudut saat disentuh. */
a.card::after,.prod::after{content:"";position:absolute;top:18px;right:18px;width:10px;aspect-ratio:137/179;background:var(--amber);border-radius:var(--sq-r);opacity:0;transform:translateY(-34px) rotate(-120deg);transition:transform .6s cubic-bezier(.3,1.9,.45,1),opacity .25s;pointer-events:none}
a.card:hover::after,.prod:hover::after{opacity:1;transform:none}

/* Garis waktu REC di atas layar: progres baca, kepalanya kotak jagonya. Dipasang site.js. */
.jg-prog{position:fixed;left:0;right:0;top:env(safe-area-inset-top);height:2px;z-index:80;pointer-events:none}
.jg-prog i{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,179,26,0),var(--amber));transform-origin:0 50%;transform:scaleX(0)}
.jg-prog b{position:absolute;left:-4px;top:-3px;width:7px;height:9px;background:var(--amber);border-radius:var(--sq-r);box-shadow:0 0 12px rgba(255,179,26,.8)}

/* Muncul saat scroll */
.js [data-r]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-r].in{opacity:1;transform:none}
.js .stag>[data-r]:nth-child(2){transition-delay:.08s}.js .stag>[data-r]:nth-child(3){transition-delay:.16s}.js .stag>[data-r]:nth-child(4){transition-delay:.24s}

/* Checkout (hook dari checkout.js) */
.co-wrap{padding-top:120px}
.co-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;align-items:start}
.co-grid>*{min-width:0}
.co-sum,.co-form-box{border:1px solid var(--line2);border-radius:var(--r-lg);padding:clamp(22px,3.4vw,36px);background:var(--card)}
.co-sum dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:18px 0}
.co-sum dt{font:500 11px/2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.co-sum dd{margin:0;font-weight:600}
.co-price{display:flex;align-items:baseline;gap:14px;padding-top:16px;border-top:1px dashed var(--line2)}
.co-price s{color:var(--muted);font-size:20px}
.co-price b{font:800 clamp(34px,10vw,46px)/1 var(--display);color:var(--amber)}
.co-form{display:grid;gap:16px}
.co-form label{display:grid;gap:6px;font-weight:600;font-size:15px}
.co-form fieldset{border:0;padding:0;margin:0}
.co-form legend{font-weight:600;font-size:15px;margin-bottom:8px}
.co-ch{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ch{display:flex!important;align-items:center;gap:10px;border:1px solid var(--line2);border-radius:12px;padding:12px 14px;cursor:pointer;font-weight:500!important}
.ch:has(input:checked){border-color:var(--amber);background:rgba(255,179,26,.08)}
.ch input{accent-color:var(--amber);width:auto;min-height:0}
.co-msg{min-height:1.4em;margin:0;color:var(--amber2);font-size:14.5px}
.pay-proc{display:grid;justify-items:center;text-align:center;gap:4px;margin:18px 0 6px}
.pay-proc .pay-anim{width:min(100%,320px);aspect-ratio:528/262;margin-bottom:6px}
.pay-proc p{margin:0}
.pay-body{display:grid;gap:16px;margin:20px 0}
.pay-body>*{min-width:0}
.pay-amt b{display:block;font:800 44px var(--display);color:var(--amber)}
.pay-va{display:grid;gap:8px;min-width:0;border:1px solid rgba(255,179,26,.5);border-radius:16px;padding:18px}
.pay-va b{font:800 clamp(19px,5.4vw,34px)/1.2 var(--display);letter-spacing:.02em;word-spacing:.12em;font-variant-numeric:tabular-nums}
.pay-qr img{background:#fff;border-radius:12px;padding:10px;margin:0 auto}
.pay-wait{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;border-top:1px solid var(--line);padding-top:16px}
.pay-wait .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);animation:lg-rec 1.4s infinite}
.typ-steps{list-style:none;margin:30px auto 0;padding:0;display:grid;gap:10px;text-align:left;max-width:560px;counter-reset:t}
.typ-steps li{counter-increment:t;display:grid;grid-template-columns:40px 1fr;gap:4px 14px;border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--bg2)}
.typ-steps li::before{content:counter(t,decimal-leading-zero);grid-row:span 2;font:500 15px var(--mono);color:var(--amber)}
.typ-steps span{color:var(--soft);font-size:15px}

/* Link bio */
.links{display:grid;gap:10px;max-width:480px;margin:0 auto}
.links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-radius:16px;background:var(--card);border:1px solid var(--line);font-weight:600;transition:border-color .2s,transform .3s var(--ease)}
.links a:hover{border-color:rgba(255,179,26,.5);transform:translateY(-2px)}

/* Responsif */
@media (max-width:1024px){
  .reel{grid-template-columns:repeat(4,1fr)}
  .reel .clip:nth-child(n){transform:none}
  .flow{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .hero{padding-top:96px}
  .hero-grid,.founder,.ticket,.co-grid{grid-template-columns:1fr}
  .wall{height:420px}
  .ladder,.g3,.vs{grid-template-columns:1fr}
  .vs .x{transform:rotate(90deg);padding:4px 0}
  .ticket .l{border-right:0;border-bottom:2px dashed var(--line2)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .foot-grid,.foot-lp{grid-template-columns:1fr}
  .co-ch{grid-template-columns:1fr}
  /* Geser horizontal ala aplikasi */
  .snap{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(78%,1fr);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding:4px 16px 14px;scrollbar-width:none}
  .snap::-webkit-scrollbar{display:none}
  .snap>*{scroll-snap-align:start}
  .reel.snap{grid-auto-columns:42%}
  .ladder.snap{grid-auto-columns:86%;padding-top:16px}
  .mod .body{padding-left:clamp(18px,2.4vw,28px)}
  .btns .btn{flex:1 1 100%}
}
@media (max-width:520px){
  .g2:not(.snap),.flow,.g4:not(.snap){grid-template-columns:1fr}
  .proofs{grid-template-columns:1fr}
  .wall{grid-template-columns:repeat(2,1fr);height:380px}
  .wall .col:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-r]{opacity:1;transform:none}
}