/* SlikFlow hero v7 — split layout + 3D coverflow. Uses ONLY the site's own colour tokens
   (--ind --blue --card --bg2 --line --head --ink --mute --ok), so day/night + accent themes keep working. */
.hero.hx{text-align:left;padding:78px 0 96px}
.hx-w{display:grid;grid-template-columns:1fr 1.1fr;gap:46px;align-items:center}
.hx .hx-l .pill{margin-bottom:22px}
.hx .hx-l h1{margin:0 0 .45em;max-width:none;font-size:clamp(2.3rem,4.6vw,3.9rem)}
.hx .hx-l .lede{margin:0 0 30px;max-width:34em;font-size:1.12rem}
.hx .hx-l .bt,.hx .hx-l .proof{justify-content:flex-start}
.hx .hx-l .proof{margin-top:30px}
.hx-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.hx-chips span{font:600 .72rem "JetBrains Mono",monospace;color:var(--mute);border:1px solid var(--line);background:var(--card);padding:6px 12px;border-radius:99px}
.hx-chips span:before{content:"✓ ";color:var(--ok)}
.hx .hx-r{margin:0;max-width:none;position:relative}
.hx .hx-r:before{inset:6% 0 8%}
.hx .hx-r .fl{z-index:8}.hx .hx-r .fl.a{left:-10px;top:-18px}.hx .hx-r .fl.b2{right:-10px;top:auto;bottom:86px}
.hx-st{position:relative;height:440px;perspective:1400px;z-index:1}
.hx-c{margin:0;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;text-align:left;box-shadow:0 50px 90px -42px rgba(20,30,80,.55)}
.hx-st.on .hx-c{position:absolute;left:50%;top:50%;width:min(88%,540px);transition:transform .8s cubic-bezier(.65,0,.25,1),opacity .8s,filter .8s;cursor:pointer;will-change:transform}
.hx-st:not(.on) .hx-c:not(:first-child){display:none}
.hx-st:not(.on) .hx-c{max-width:540px;margin:0 auto}
.hx-c.act{border-color:color-mix(in srgb,var(--ind) 55%,var(--line));box-shadow:0 60px 100px -44px color-mix(in srgb,var(--ind) 70%,transparent),0 0 0 1px color-mix(in srgb,var(--ind) 18%,transparent);cursor:default}
.hx-c .wb{padding:11px 14px}.hx-c .wb i{width:9px;height:9px}.hx-c .u2{font-size:.66rem;padding:3px 16px}.hx-c .wb em{font-size:.6rem}
.hx-b{height:292px;position:relative;overflow:hidden}.hx-b img{width:100%;height:100%;object-fit:cover;display:block}
.hx-c .tb{padding:4px 12px 0;overflow:hidden}.hx-c .tb table{min-width:0;font-size:.7rem}.hx-c .tb th{padding:9px 6px;font-size:.6rem}.hx-c .tb td{padding:10px 6px;white-space:nowrap}
.hx-c .tb .bad{font-weight:800}
.hx-c figcaption{padding:11px 16px;border-top:1px solid var(--line);background:var(--bg2)}
.hx-c figcaption b{display:block;color:var(--head);font:800 .9rem Sora,sans-serif}.hx-c figcaption span{font-size:.78rem;color:var(--mute)}
.hx-c .hx-k{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px}
.hx-k div{border:1px solid var(--line);border-radius:11px;padding:8px 11px;background:var(--bg2)}
.hx-k small{display:block;font:600 .54rem "JetBrains Mono",monospace;color:var(--mute);letter-spacing:.04em}
.hx-k b{font:800 1.05rem Sora,sans-serif;color:var(--head)}.hx-k em{font-style:normal;color:var(--ok);font-weight:800;font-size:.66rem;margin-left:5px}
.hx-g{padding:0 12px 12px;height:132px}.hx-g svg{width:100%;height:100%}
.hx-g .a{fill:url(#hxg)}.hx-g .l{fill:none;stroke:var(--ind);stroke-width:2.6;stroke-linejoin:round}
.hx-ctl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:4px;position:relative;z-index:2}
.hx-ctl button.n{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--head);cursor:pointer;display:grid;place-items:center;transition:.2s}
.hx-ctl button.n:hover{background:var(--ind);border-color:var(--ind);color:#fff}
.hx-ctl svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hx-dt{display:flex;gap:8px}.hx-dt button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:var(--line);cursor:pointer;transition:.35s}
.hx-dt button[aria-current=true]{width:30px;background:linear-gradient(90deg,var(--ind),var(--blue))}
.hx .hx-r .smp{text-align:center;padding:10px 0 0}
@media(max-width:900px){.hero.hx{padding:48px 0 70px}.hx-w{grid-template-columns:1fr;gap:34px;text-align:center}.hx .hx-l .bt,.hx .hx-l .proof,.hx-chips{justify-content:center}.hx .hx-l .lede,.hx .hx-l h1{margin-inline:auto}.hx-st{height:410px}.hx .hx-r .fl{display:none}}
@media(prefers-reduced-motion:reduce){.hx-st.on .hx-c{transition:none}}

/* Headline — Option B (editorial): mixed weights, gradient key word, accent rule on the lede */
.hx .hx-l h1{font:800 clamp(2.1rem,4vw,3.4rem)/1.08 Sora,sans-serif;letter-spacing:-.04em;text-wrap:balance}
.hx .hx-lt{font-weight:600;color:var(--mute)}
.hx h1 .hx-k{display:inline !important;padding:0 !important;margin:0 !important;background:linear-gradient(95deg,var(--ind),var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:800}
.hx .hx-l .lede{font-size:1.08rem;padding-left:18px;border-left:3px solid;border-image:linear-gradient(var(--ind),var(--a3,var(--blue))) 1}
@media(max-width:900px){.hx .hx-l .lede{text-align:left;max-width:30em}}