/* ============================================================
   Jurnal AI Commander — shared stylesheet (tema StackCircuit)
   Diadaptasi dari design ChatGPT yang diluluskan Brofiq (2026-07-22).
   Guna sama untuk index (hub) + semua artikel → tukar sekali, jadi ke semua.
   ============================================================ */

/* --- Font self-host (zero ping luar, pendirian PDPA) — variable, subset latin --- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(fonts/inter-latin.woff2) format('woff2');
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(fonts/spacegrotesk-latin.woff2) format('woff2');
}

:root{
  --bg:#090512;
  --bg-2:#100824;
  --panel:rgba(22,13,48,.78);
  --panel-solid:#160d30;
  --line:rgba(255,255,255,.11);
  --text:#f8f7ff;
  --muted:#b8b2cc;
  --muted-2:#8f87a8;
  --purple:#8b5cf6;
  --purple-2:#6d28d9;
  --pink:#d946ef;
  --cyan:#22d3ee;
  --green:#34d399;
  --yellow:#fbbf24;
  --danger:#fb7185;
  --shadow:0 28px 80px rgba(0,0,0,.38);
  --radius:24px;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);
  background:
    radial-gradient(circle at 12% 7%, rgba(139,92,246,.20), transparent 34rem),
    radial-gradient(circle at 90% 22%, rgba(217,70,239,.12), transparent 29rem),
    radial-gradient(circle at 60% 70%, rgba(34,211,238,.07), transparent 34rem),
    var(--bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.72;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,#000,transparent 76%);z-index:-1;
}
a{color:inherit}
img,svg{max-width:100%}
p{color:#d6d1e4;font-size:1.04rem}
strong{color:#fff}
.skip-link{position:absolute;left:-9999px;top:12px;z-index:9999;background:#fff;color:#111;padding:10px 14px;border-radius:10px}
.skip-link:focus{left:12px}
.progress{position:fixed;inset:0 auto auto 0;height:3px;width:0;background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink));z-index:1000;box-shadow:0 0 18px rgba(139,92,246,.8)}

/* --------- nav --------- */
.nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(18px);background:rgba(9,5,18,.72);border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--max);margin:auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{text-decoration:none;display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.02em}
.brand-mark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--purple),var(--pink));box-shadow:0 10px 28px rgba(139,92,246,.35)}
.brand small{color:var(--muted-2);font-weight:600;margin-left:4px}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{text-decoration:none;color:var(--muted);font-size:.93rem;font-weight:600}
.nav-links a:hover{color:#fff}
/* nav CTA "Sertai Kami" — striking: gradient penuh + glow (bukan pill lut sinar) */
.nav-cta{position:relative;padding:11px 20px;border-radius:999px;font-weight:800;font-size:.92rem;letter-spacing:-.01em;
  color:#fff !important;
  background:linear-gradient(135deg,var(--purple,#8b5cf6),var(--pink,#d946ef) 52%,var(--cyan,#22d3ee));
  border:1.5px solid rgba(217,70,239,.55);
  box-shadow:0 0 0 1px rgba(139,92,246,.2),0 12px 30px -10px rgba(139,92,246,.85);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.nav-cta:hover{transform:translateY(-2px);filter:saturate(1.12);
  box-shadow:0 0 0 1px rgba(139,92,246,.3),0 18px 42px -10px rgba(217,70,239,.95)}

.shell{max-width:var(--max);margin:0 auto;padding:0 22px 90px}

/* --------- hero (article) --------- */
.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(370px,.92fr);align-items:center;gap:54px;min-height:690px;padding:72px 0 46px}
.crumb{color:var(--muted-2);font-size:.86rem;margin-bottom:22px}
.crumb a{text-decoration:none}
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;color:#e6ddff;font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(139,92,246,.35);background:rgba(139,92,246,.10);padding:8px 12px;border-radius:999px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
h1,h2,h3,h4{font-family:"Space Grotesk",Inter,sans-serif;line-height:1.12}
h1{font-size:clamp(2.8rem,6vw,5.45rem);letter-spacing:-.065em;margin:0 0 24px;max-width:820px}
.gradient{background:linear-gradient(90deg,#fff 5%,#c4b5fd 42%,#67e8f9 72%,#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{max-width:740px;font-size:clamp(1.08rem,1.5vw,1.27rem);color:#cfc9df;margin-bottom:26px}
.meta{display:flex;flex-wrap:wrap;gap:12px 20px;color:var(--muted-2);font-size:.89rem;align-items:center}
.meta span{display:inline-flex;align-items:center;gap:8px}
.author-chip{color:#ece8f7}
.avatar{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,var(--purple),var(--pink));font-size:.72rem;font-weight:900}

/* hero visual (fake terminal) */
.hero-visual{position:relative;min-height:530px;border:1px solid var(--line);border-radius:34px;background:linear-gradient(145deg,rgba(24,14,53,.92),rgba(12,8,29,.88));box-shadow:var(--shadow);overflow:hidden;isolation:isolate}
.hero-visual::before{content:"";position:absolute;width:390px;height:390px;border-radius:50%;background:rgba(139,92,246,.23);filter:blur(60px);right:-120px;top:-120px;z-index:-1}
.hero-visual::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(34,211,238,.14);filter:blur(55px);left:-100px;bottom:-60px;z-index:-1}
.window-top{display:flex;align-items:center;gap:7px;padding:17px 19px;border-bottom:1px solid var(--line)}
.dot{width:9px;height:9px;border-radius:50%;background:#fb7185}
.dot:nth-child(2){background:#fbbf24}.dot:nth-child(3){background:#34d399}
.window-title{margin-left:8px;color:var(--muted-2);font-size:.78rem}
.visual-body{padding:30px}
.terminal{border:1px solid rgba(255,255,255,.12);background:rgba(4,3,12,.72);border-radius:18px;padding:20px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;color:#c8c3d6}
.terminal .line{margin:8px 0}
.cmd{color:#67e8f9}.ok{color:#6ee7b7}.warn{color:#fbbf24}.danger{color:#fda4af}
.belt-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-top:22px}
.belt-card{border:1px solid var(--line);border-radius:18px;padding:17px;background:rgba(255,255,255,.035)}
.belt-card b{display:block;font-size:.92rem;margin-bottom:5px}.belt-card small{color:var(--muted-2)}
.belt-icon{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,var(--purple),var(--pink));box-shadow:0 14px 40px rgba(139,92,246,.32)}
.status-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.status{padding:13px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line);text-align:center}
.status strong{display:block;font-size:1.25rem}.status small{color:var(--muted-2);font-size:.72rem}

/* --------- main grid (TOC + article) --------- */
.main-grid{display:grid;grid-template-columns:270px minmax(0,760px);gap:52px;justify-content:center;align-items:start}
.toc{position:sticky;top:92px;padding:20px;border:1px solid var(--line);border-radius:20px;background:rgba(17,10,38,.72);backdrop-filter:blur(12px)}
.toc b{display:block;margin-bottom:12px;font-size:.86rem;color:#fff}
.toc ol{margin:0;padding-left:19px}
.toc li{margin:8px 0;color:var(--muted-2);font-size:.84rem}
.toc a{text-decoration:none;color:inherit}.toc a:hover{color:#fff}
article{min-width:0}
article h2{font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.045em;margin:92px 0 22px;scroll-margin-top:100px}
article h2:first-child{margin-top:0}
article h3{font-size:1.25rem;margin:0 0 8px}
article ul{color:#d6d1e4;padding-left:22px}
article li{margin:10px 0}
.intro-drop::first-letter{float:left;font-family:"Space Grotesk";font-size:4rem;line-height:.8;padding:9px 12px 0 0;color:#c4b5fd;font-weight:700}
.quote{margin:32px 0;padding:30px 30px 28px;border-radius:24px;border:1px solid rgba(139,92,246,.35);background:linear-gradient(135deg,rgba(139,92,246,.13),rgba(34,211,238,.055));box-shadow:0 16px 46px rgba(0,0,0,.18)}
.quote .big{font-family:"Space Grotesk";font-size:clamp(1.35rem,3vw,2rem);line-height:1.3;color:#fff;margin:0}
.quote small{display:block;margin-top:12px;color:var(--muted-2)}
.plain-callout{border-left:3px solid var(--cyan);padding:5px 0 5px 20px;margin:30px 0}
.plain-callout p{margin:0}
.sources-inline{color:var(--muted-2);font-size:.82rem}
.sources-inline a{color:#c4b5fd;text-underline-offset:3px}

/* definition / risk / alesa intro / pillars / flow / comparison / testimony */
.definition{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
.def-card{padding:22px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.035)}
.def-card .icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin-bottom:15px;background:rgba(139,92,246,.16);color:#ddd6fe;font-weight:800}
.def-card h3{font-size:1rem}.def-card p{font-size:.88rem;color:var(--muted);margin:0}
.risk-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:28px 0}
.risk{border:1px solid var(--line);background:rgba(255,255,255,.032);border-radius:20px;padding:20px}
.risk b{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.risk p{font-size:.9rem;margin:0;color:var(--muted)}
.risk i{width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:0 0 11px rgba(251,113,133,.55)}
.alesa-intro{border:1px solid rgba(139,92,246,.36);border-radius:28px;padding:30px;margin:32px 0;background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(217,70,239,.06) 52%,rgba(34,211,238,.05));position:relative;overflow:hidden}
.alesa-intro::after{content:"A";position:absolute;right:-10px;bottom:-95px;font:900 260px/1 "Space Grotesk";color:rgba(255,255,255,.025)}
.alesa-label{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.07);color:#ddd6fe;font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.alesa-intro h3{font-size:1.75rem;margin:15px 0 12px}
.alesa-intro p:last-child{margin-bottom:0}
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:28px 0}
.pillar{border:1px solid var(--line);border-radius:24px;padding:26px;background:rgba(255,255,255,.034)}
.pillar-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px}
.pillar:first-child .pillar-icon{background:rgba(34,211,238,.13);color:var(--cyan)}
.pillar:last-child .pillar-icon{background:rgba(139,92,246,.18);color:#c4b5fd}
.pillar .mini{color:var(--muted-2);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.pillar ul{padding-left:18px;margin-bottom:0;font-size:.91rem}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:30px 0;position:relative}
.flow::before{content:"";position:absolute;left:9%;right:9%;top:35px;height:1px;background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink));opacity:.48}
.flow-step{position:relative;text-align:center;z-index:1}
.flow-step .n{width:70px;height:70px;border-radius:22px;display:grid;place-items:center;margin:0 auto 14px;background:var(--panel-solid);border:1px solid rgba(139,92,246,.45);box-shadow:0 10px 30px rgba(0,0,0,.25);font:700 1.2rem "Space Grotesk"}
.flow-step b{display:block;font-size:.88rem}.flow-step small{color:var(--muted-2);font-size:.76rem}
.comparison{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0}
.compare-card{border:1px solid var(--line);border-radius:24px;padding:26px;background:rgba(255,255,255,.032)}
.compare-card.featured{border-color:rgba(139,92,246,.5);background:linear-gradient(145deg,rgba(139,92,246,.16),rgba(34,211,238,.04));box-shadow:0 18px 55px rgba(109,40,217,.14)}
.compare-card .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:14px}
.compare-card .badge{border-radius:999px;padding:5px 9px;font-size:.7rem;font-weight:800;background:rgba(255,255,255,.08);color:var(--muted);white-space:nowrap}
.featured .badge{background:rgba(52,211,153,.14);color:#a7f3d0}
.compare-card ul{list-style:none;padding:0;margin:20px 0 0}
.compare-card li{display:flex;gap:10px;font-size:.91rem;margin:10px 0}
.compare-card li::before{content:"×";color:var(--danger);font-weight:900}
.featured li::before{content:"✓";color:var(--green)}
.metric{margin-top:18px;border-top:1px solid var(--line);padding-top:17px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.metric b{display:block;font-size:1.3rem}.metric small{color:var(--muted-2);font-size:.72rem}
.testimony{position:relative;border:1px solid rgba(34,211,238,.28);border-radius:26px;padding:30px;margin:32px 0;background:linear-gradient(145deg,rgba(34,211,238,.07),rgba(139,92,246,.09));overflow:hidden}
.testimony::before{content:"\201C";position:absolute;right:22px;top:-28px;font:900 130px/1 Georgia,serif;color:rgba(255,255,255,.06)}
.testimony-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px}
.testimony .org{display:flex;align-items:center;gap:13px}
.org-mark{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.08);font-weight:900}
.testimony-tag{font-size:.72rem;color:#a5f3fc;padding:6px 9px;border-radius:999px;background:rgba(34,211,238,.09);border:1px solid rgba(34,211,238,.2)}
.testimony blockquote{margin:0;font-size:1.08rem;color:#efecf7}
.disclosure{margin-top:17px;color:var(--muted-2);font-size:.76rem}
.local-principles{display:flex;flex-wrap:wrap;gap:9px;margin:25px 0}
.local-principles span{padding:8px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.035);font-size:.79rem;color:#d9d4e6}

/* FAQ */
.faq{display:grid;gap:10px;margin:28px 0}
details{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03);padding:0 20px}
summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:700;color:#f2eff9;display:flex;justify-content:space-between;gap:18px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:#c4b5fd;font-size:1.25rem}
details[open] summary::after{content:"\2212"}
details p{font-size:.94rem;margin:0 0 20px}

/* CTA */
.cta{margin-top:70px;border-radius:30px;padding:42px;text-align:center;background:radial-gradient(circle at 20% 20%,rgba(34,211,238,.14),transparent 20rem),linear-gradient(135deg,rgba(109,40,217,.82),rgba(126,34,206,.72) 52%,rgba(15,23,42,.9));border:1px solid rgba(196,181,253,.34);box-shadow:var(--shadow)}
.cta h2{margin:0 0 15px;font-size:clamp(2rem,5vw,3.4rem)}
.cta p{max-width:620px;margin:0 auto 25px;color:#e5dfff}
.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.btn{text-decoration:none;padding:13px 18px;border-radius:13px;font-weight:800;font-size:.91rem;transition:.2s ease;display:inline-block}
.btn-primary{background:#fff;color:#241242}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.2)}
.btn-secondary{border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.08);color:#fff}.btn-secondary:hover{background:rgba(255,255,255,.14)}
/* butang UTAMA "Sertai Kami" — paling menonjol dalam blok CTA (survey + komuniti) */
.btn-join{position:relative;color:#fff;font-size:1rem;padding:16px 30px;border-radius:15px;
  background:linear-gradient(135deg,var(--purple,#8b5cf6),var(--pink,#d946ef) 52%,var(--cyan,#22d3ee));
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 4px rgba(139,92,246,.28),0 18px 46px -10px rgba(217,70,239,.95);
  animation:joinPulse 2.8s ease-in-out infinite}
.btn-join:hover{transform:translateY(-3px);filter:saturate(1.14);animation:none;border-color:#fff;
  box-shadow:0 0 0 6px rgba(139,92,246,.36),0 26px 60px -10px rgba(217,70,239,1)}
@keyframes joinPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(139,92,246,.28),0 18px 46px -10px rgba(217,70,239,.95)}
  50%{box-shadow:0 0 0 7px rgba(139,92,246,.4),0 22px 56px -10px rgba(217,70,239,1)}}
@media (prefers-reduced-motion:reduce){.btn-join{animation:none}}

/* references */
.references{border-top:1px solid var(--line);margin-top:70px;padding-top:28px}
.references h2{font-size:1.35rem;margin:0 0 18px}
.references ol{color:var(--muted);font-size:.82rem;padding-left:20px}
.references li{margin:9px 0}.references a{color:#c4b5fd;text-underline-offset:3px}

/* footer */
footer{border-top:1px solid var(--line);background:rgba(5,3,12,.55)}
.footer-inner{max-width:var(--max);margin:auto;padding:32px 22px 46px;display:flex;justify-content:space-between;gap:30px;color:var(--muted-2);font-size:.82rem}
.footer-inner strong{display:block;margin-bottom:5px}.footer-inner a{color:#c4b5fd}

/* ============================================================
   HUB (index) — tambahan kelas untuk halaman utama journal
   ============================================================ */
.hero-index{text-align:center;padding:84px 0 20px;max-width:820px;margin:0 auto}
.hero-index h1{max-width:none;margin-left:auto;margin-right:auto}
.hero-index .lede{margin:0 auto 26px}
.section-head{margin:76px 0 4px}
.section-head .kick{color:var(--purple);font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.section-head h2{font-size:clamp(1.7rem,4vw,2.5rem);letter-spacing:-.04em;margin:0}
.section-head p{color:var(--muted);margin:10px 0 0;max-width:640px}
.section-head.big{margin-top:84px}
.section-head.big .kick{font-size:1.05rem;letter-spacing:.14em;color:#c4b5fd;display:inline-flex;align-items:center;gap:9px}
.section-head.big .kick::before{content:"📖";font-size:1.1rem}
.section-head.big h2{font-size:clamp(2rem,5vw,3.1rem)}
.mandate{text-align:center;font-size:.95rem;color:var(--muted);margin:16px 0 4px}
.mandate b{color:var(--yellow)}
.founder{display:flex;gap:14px;align-items:center;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.founder .ph{flex:none;width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--purple),var(--pink));display:grid;place-items:center;font-weight:900;font-size:.95rem}
.founder b{display:block;font-size:.95rem;color:#fff}
.founder span{font-size:.82rem;color:var(--muted-2)}
.solve{background:linear-gradient(150deg,rgba(24,14,53,.7),rgba(12,8,29,.6));border:1px solid var(--line);border-radius:28px;padding:clamp(26px,4vw,40px);margin:26px 0}
.solve .act{text-align:center;margin-top:26px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin:26px 0}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:rgba(255,255,255,.034);border:1px solid var(--line);border-radius:22px;padding:26px;transition:.2s ease}
.card:hover{border-color:rgba(139,92,246,.5);transform:translateY(-3px)}
.card .cat{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#c4b5fd;margin-bottom:12px}
.card h3{font-size:1.2rem;margin:0 0 10px;line-height:1.25}
.card p{font-size:.92rem;color:var(--muted);margin:0 0 16px;flex:1}
.card .read{font-size:.8rem;color:var(--muted-2);font-weight:700}
.card.feat{grid-column:1/-1;position:relative;overflow:hidden;padding:32px;cursor:pointer;
  background:linear-gradient(135deg,rgba(139,92,246,.30),rgba(34,211,238,.10) 55%,rgba(217,70,239,.16));
  border:1.5px solid rgba(139,92,246,.6);
  box-shadow:0 0 0 1px rgba(139,92,246,.14),0 22px 60px -18px rgba(139,92,246,.5);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.card.feat::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;background:rgba(139,92,246,.28);filter:blur(72px);z-index:0;pointer-events:none}
.card.feat>*{position:relative;z-index:1}
.card.feat:hover{transform:translateY(-4px);border-color:rgba(196,181,253,.9);box-shadow:0 0 0 1px rgba(139,92,246,.28),0 32px 84px -18px rgba(139,92,246,.7)}
.card.feat h3{font-size:clamp(1.6rem,3.6vw,2.3rem)}
.card.feat p{color:#e2ddf1;font-size:1rem}
.card.feat .pill{font-size:.8rem;padding:7px 15px;color:#0a0c16;background:linear-gradient(135deg,#a7f3d0,#67e8f9);border:none;box-shadow:0 6px 18px -4px rgba(103,232,249,.5)}
.feat-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:8px}
.feat-btn{display:inline-flex;align-items:center;gap:9px;background:#fff;color:#241242;font-weight:800;font-size:.98rem;padding:13px 24px;border-radius:13px;box-shadow:0 12px 30px -8px rgba(255,255,255,.28);transition:transform .2s ease,box-shadow .2s ease}
.card.feat:hover .feat-btn{transform:translateX(3px);box-shadow:0 16px 38px -8px rgba(255,255,255,.42)}
.pill{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#a7f3d0;border:1px solid rgba(52,211,153,.3);border-radius:999px;padding:5px 11px;margin-bottom:14px;background:rgba(52,211,153,.1)}
.card.soon{opacity:.6;cursor:default}
.card.soon:hover{transform:none;border-color:var(--line)}
.card.soon .cat{color:var(--muted-2)}

/* --------- responsive --------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:54px}
  .hero-visual{min-height:auto}
  .main-grid{grid-template-columns:1fr}
  .toc{position:relative;top:auto}
  .definition,.flow{grid-template-columns:repeat(2,1fr)}
  .flow::before{display:none}
}
@media (max-width:680px){
  .nav-links a:not(.nav-cta){display:none}
  .brand small{display:none}
  .shell{padding-inline:16px}
  .hero{gap:30px;padding-top:40px}
  h1{font-size:clamp(2.55rem,15vw,4.25rem)}
  .visual-body{padding:18px}
  .belt-flow{grid-template-columns:1fr}.belt-icon{margin:auto}.status-row{grid-template-columns:1fr}
  .definition,.risk-strip,.pillars,.comparison,.flow{grid-template-columns:1fr}
  article h2{margin-top:70px}
  .alesa-intro,.testimony,.quote,.cta,.solve{padding:24px}
  .testimony-head{align-items:flex-start;flex-direction:column}
  .footer-inner{flex-direction:column}
}
@media print{
  body{background:#fff;color:#111}
  body::before,.nav,.progress,.hero-visual,.toc,.actions{display:none!important}
  .hero{min-height:auto;display:block}
  .shell,.main-grid{max-width:none;display:block}
  p,article ul,.references ol{color:#333}
  h1,h2,h3,strong{color:#111}
  .quote,.def-card,.risk,.alesa-intro,.pillar,.compare-card,.testimony,details,.cta{background:#fff;color:#111;box-shadow:none;border-color:#bbb}
  .gradient{color:#111;-webkit-text-fill-color:#111}
}