/* Hero film — after the hero animation finishes, its window expands to fill the whole hero
   and plays a ~55s motion-graphics story about Anubavam, then shrinks back and the loop restarts.
   Design canvas is 1280×720, scaled to fit. Desktop only (phones and reduced motion never see it). */
.hero{position:relative}
.hf{position:absolute;inset:0;z-index:30;overflow:hidden;display:none;cursor:default;
  --hf-ink:#0f1233;--hf-accent:#2a2d9f;--hf-lav:#cbd0ff;--hf-paper:#f5f7fa;--hf-navy:#13163f;--hf-mono:'JetBrains Mono',Consolas,'Courier New',monospace;
  background:var(--hf-paper);font-family:'Poppins','Segoe UI',Arial,sans-serif;color:#fff}
.hf.is-on{display:block}
.hf *{box-sizing:border-box}
.hf-canvas{position:absolute;left:50%;top:50%;width:1280px;height:720px;margin:-360px 0 0 -640px;opacity:0}
.hf-bg{position:absolute;inset:-40%;background:radial-gradient(60% 50% at 70% 30%,rgba(110,118,255,.28),transparent 70%),radial-gradient(50% 50% at 20% 80%,rgba(42,45,159,.55),transparent 70%)}

/* chrome: kicker, caption, progress, skip */
.hf-kick{position:absolute;left:80px;top:58px;display:flex;align-items:center;gap:12px;font:600 13px/1 var(--hf-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--hf-lav);overflow:hidden;height:16px}
.hf-kick::before{content:"";width:28px;height:1px;background:var(--hf-lav)}
.hf-kick span,.hf-cap span{display:block}
.hf-cap{position:absolute;left:80px;right:80px;top:618px;font-size:28px;line-height:1.25;letter-spacing:-.02em;overflow:hidden;padding-bottom:4px}
.hf-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12)}
.hf-prog i{display:block;height:100%;width:0;background:var(--hf-lav)}
.hf-skip{position:absolute;right:18px;top:16px;font:600 11px/1 var(--hf-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);
  padding:8px 12px;border:1px solid rgba(255,255,255,.25);border-radius:16px;background:rgba(19,22,63,.4);opacity:0;transition:opacity .4s,color .2s,border-color .2s}
.hf:hover .hf-skip{color:#fff;border-color:#fff}

/* scenes */
.hf-sc{position:absolute;inset:0;opacity:0;visibility:hidden}
.hf-sc.is-on{visibility:visible}
.hf-card{position:absolute;background:#fff;color:var(--hf-ink);border-radius:20px;box-shadow:0 40px 80px -30px rgba(5,7,40,.7),0 0 0 1px rgba(255,255,255,.5)}
.hf-wbar{position:absolute;left:0;right:0;top:0;height:46px;display:flex;align-items:center;gap:7px;padding:0 20px;border-bottom:1px solid #e4e7f1;font-size:14px;font-weight:600}
.hf-wbar i{width:9px;height:9px;border-radius:50%;background:#dfe2f0}
.hf-wbar span{margin-left:10px}
.hf-abs{position:absolute}
.hf-mono{font-family:var(--hf-mono);letter-spacing:.08em;text-transform:uppercase}
.hf-btn{position:absolute;height:40px;padding:0 20px;border-radius:20px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;background:var(--hf-accent);color:#fff;white-space:nowrap;transition:background .3s}
.hf-btn.ok{background:#1f7a4d}

/* intro */
.hf-title{position:absolute;left:0;right:0;top:270px;text-align:center;font-size:58px;line-height:1.12;letter-spacing:-.04em}
.hf-title .ln{display:block;overflow:hidden;padding-bottom:6px}.hf-title .ln>span{display:inline-block}
.hf-title .lav{color:var(--hf-lav)}

/* experience */
.hf-lbl{position:absolute;font:600 12px/1 var(--hf-mono);letter-spacing:.14em;text-transform:uppercase;color:#7c80a8}
.hf-big{position:absolute;font-size:120px;line-height:1;font-weight:300;letter-spacing:-.05em;color:var(--hf-ink)}
.hf-big sup{font-size:60px;vertical-align:top;color:var(--hf-accent)}
.hf-since{position:absolute;font-size:16px;color:#4a4e78}
.hf-track{position:absolute;height:6px;border-radius:3px;background:#e4e7f4}
.hf-track .fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:var(--hf-accent)}
.hf-track .knob{position:absolute;top:50%;left:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#fff;border:3px solid var(--hf-accent);box-shadow:0 6px 16px -6px rgba(42,45,159,.7)}
.hf-ms{position:absolute;top:28px;width:150px;font-size:13px;line-height:1.35;color:#9a9ec4;transition:color .4s}
.hf-ms b{display:block;font-size:15px;color:#9a9ec4;transition:color .4s}
.hf-ms::before{content:"";position:absolute;left:0;top:-31px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#d7daf0;transition:background .4s,transform .4s}
.hf-ms.lit,.hf-ms.lit b{color:var(--hf-ink)}.hf-ms.lit::before{background:var(--hf-accent);transform:scale(1.3)}

/* architecture */
.hf-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(203,208,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(203,208,255,.07) 1px,transparent 1px);background-size:40px 40px}
.hf-lines{position:absolute;inset:0;width:1280px;height:720px;overflow:visible}
.hf-lines path{fill:none;stroke:rgba(203,208,255,.55);stroke-width:2}
.hf-lines .ai{stroke:#fff}
.hf-lines .pulse{stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-dasharray:10 70;opacity:0}
.hf-box{position:absolute;height:56px;border-radius:12px;border:1.5px solid rgba(203,208,255,.6);background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff}
.hf-box.slot{border-style:dashed;color:rgba(203,208,255,.6);font-size:14px;background:none}
.hf-rowl{position:absolute;left:24px;width:100px;font:600 11px/1 var(--hf-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(203,208,255,.7)}
.hf-pal{position:absolute;left:1030px;top:140px;width:190px;height:436px;padding:20px 15px}
.hf-pal h4{margin:0 0 16px;font:600 12px/1 var(--hf-mono);letter-spacing:.14em;text-transform:uppercase;color:#7c80a8}
.hf-item{position:absolute;left:15px;width:160px;height:44px;border-radius:10px;border:1px solid #e1e4f3;background:#f5f7fa;display:flex;align-items:center;gap:8px;padding:0 14px;font-size:14px;color:#3b3f66}
.hf-item.ai{background:var(--hf-accent);border-color:var(--hf-accent);color:#fff;font-weight:600;z-index:3;box-shadow:0 10px 24px -10px rgba(42,45,159,.9);transition:width .5s,height .5s,border-radius .5s,left .5s,top .5s}

/* security */
.hf-shield{position:absolute;left:190px;top:130px;width:340px;height:420px;overflow:visible}
.hf-shield .sh{fill:rgba(42,45,159,0);stroke:var(--hf-lav);stroke-width:4;stroke-linejoin:round}
.hf-shield .lk{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.hf-chk{position:absolute;left:40px;display:flex;align-items:center;gap:14px;font-size:17px;color:#3b3f66}
.hf-chk i{width:26px;height:26px;border-radius:50%;border:2px solid #d7daf0;display:grid;place-items:center;font-style:normal;font-size:14px;color:#fff;transition:background .3s,border-color .3s}
.hf-chk.ok i{background:#1f7a4d;border-color:#1f7a4d}
.hf-chk.ok{color:var(--hf-ink)}
.hf-status{position:absolute;right:30px;top:24px;font-size:13px;font-weight:600;padding:7px 12px;border-radius:14px;background:#eceeff;color:var(--hf-accent);transition:background .3s,color .3s}
.hf-status.ok{background:#e3f4ea;color:#1f7a4d}
.hf-bar{position:absolute;left:40px;width:420px;height:6px;border-radius:3px;background:#e4e7f4;overflow:hidden}
.hf-bar i{display:block;height:100%;width:0;background:var(--hf-accent)}

/* mobile */
.hf-count{position:absolute;left:80px;top:220px}
.hf-count .n{font-size:132px;line-height:1;font-weight:300;letter-spacing:-.05em}
.hf-count .n sup{font-size:64px;vertical-align:top;color:var(--hf-lav)}
.hf-count p{margin:6px 0 0;font-size:22px;color:#c8cdf0}
.hf-plat{position:absolute;left:80px;top:430px;display:flex;flex-wrap:wrap;gap:10px;width:380px}
.hf-plat span{font-size:14px;padding:8px 14px;border-radius:18px;border:1px solid rgba(203,208,255,.45);color:#fff}
.hf-phones{position:absolute;left:0;top:0}
.hf-phone{position:absolute;top:140px;width:200px;height:410px;border-radius:34px;background:#090b22;padding:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.18)}
.hf-phone .scr{position:relative;height:100%;border-radius:25px;background:#f5f7fa;overflow:hidden;color:var(--hf-ink)}
.hf-phone .hd{height:118px;padding:34px 16px 0;color:#fff;font-size:17px;font-weight:600}
.hf-phone .hd small{display:block;font-size:11px;font-weight:400;opacity:.8;margin-bottom:4px}
.hf-phone .row{margin:10px 12px 0;height:46px;border-radius:12px;background:#fff;border:1px solid #e4e7f1;display:flex;align-items:center;gap:10px;padding:0 10px}
.hf-phone .row i{width:24px;height:24px;border-radius:8px;opacity:.85}
.hf-phone .row b{display:block;height:6px;width:70px;border-radius:3px;background:#d7daf0}
.hf-phone .row b+b{width:44px;margin-top:6px;background:#e9ebf6}
.hf-phone .cta{position:absolute;left:12px;right:12px;bottom:16px;height:40px;border-radius:20px;color:#fff;font-size:13px;font-weight:600;display:grid;place-items:center}

/* modernization */
.hf-cmp{position:absolute;left:190px;top:110px;width:900px;height:450px;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(5,7,40,.7),0 0 0 1px rgba(255,255,255,.4)}
.hf-leg{position:absolute;inset:0;background:#c9ccd6;color:#333}
.hf-leg .tb{height:34px;background:linear-gradient(#e6e7ec,#c3c6cf);border-bottom:1px solid #999;display:flex;align-items:center;gap:6px;padding:0 10px;font:12px Tahoma,Arial}
.hf-leg .tb span{padding:3px 8px;border:1px solid #888;background:#eee;font-size:11px}
.hf-leg .tbl{position:absolute;left:14px;right:14px;top:50px;bottom:14px;background:#fff;border:1px solid #888}
.hf-leg .tr{height:34px;border-bottom:1px solid #ccc;display:grid;grid-template-columns:1fr 2fr 1.4fr 1fr;gap:10px;align-items:center;padding:0 10px}
.hf-leg .tr:first-child{background:#dfe1e8;font:bold 11px Tahoma,Arial}
.hf-leg .tr b{height:7px;border-radius:2px;background:#bfc2cc}
.hf-mod{position:absolute;inset:0;background:var(--hf-paper);color:var(--hf-ink);clip-path:inset(0 0 0 92%)}
.hf-mod .side{position:absolute;left:0;top:0;bottom:0;width:170px;background:#fff;border-right:1px solid #e4e7f1;padding:24px 18px}
.hf-mod .side b{display:block;height:10px;border-radius:5px;background:#e4e7f4;margin-bottom:18px}
.hf-mod .side b:first-child{width:70%;background:var(--hf-accent)}
.hf-mod .main{position:absolute;left:200px;right:30px;top:28px}
.hf-mod h5{margin:0;font-size:24px;font-weight:600;letter-spacing:-.02em}
.hf-mod .ins{margin-top:14px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid #e1e4f3;font-size:15px;color:#3b3f66}
.hf-mod .ins em{font-style:normal;color:var(--hf-accent);font-weight:600}
.hf-mod .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.hf-mod .cards div{height:120px;border-radius:14px;background:#fff;border:1px solid #e1e4f3;padding:14px;font-size:13px;color:#5a5e86}
.hf-mod .cards strong{display:block;font-size:26px;color:var(--hf-ink);margin-top:6px}
.hf-mod .bars{display:flex;align-items:flex-end;gap:8px;height:70px;margin-top:16px}
.hf-mod .bars i{flex:1;border-radius:4px 4px 1px 1px;background:#dfe2f3}.hf-mod .bars i.h{background:var(--hf-accent)}
.hf-handle{position:absolute;top:0;bottom:0;width:0;left:92%}
.hf-handle::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(42,45,159,.4)}
.hf-handle b{position:absolute;left:-22px;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:#fff;color:var(--hf-accent);display:grid;place-items:center;font-size:16px;box-shadow:0 8px 20px -6px rgba(5,7,40,.6)}
.hf-tag{position:absolute;top:16px;font:600 12px/1 var(--hf-mono);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border-radius:12px;z-index:2}
.hf-tag.l{left:16px;background:#555a6b;color:#fff}.hf-tag.r{right:16px;background:var(--hf-accent);color:#fff}

/* proof */
.hf-tile{position:absolute;top:210px;width:250px;height:230px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(203,208,255,.3);padding:30px 26px}
.hf-tile .n{font-size:76px;line-height:1;font-weight:300;letter-spacing:-.05em}
.hf-tile .n sup{font-size:38px;vertical-align:top;color:var(--hf-lav)}
.hf-tile p{margin:18px 0 0;font-size:18px;line-height:1.35;color:#c8cdf0}

/* end card */
.hf-logo{position:absolute;left:50%;top:220px;width:497px;height:auto;margin-left:-248px}
.hf-tagline{position:absolute;left:0;right:0;top:440px;text-align:center;font-size:24px;color:#3b3f66}

/* cursor */
.hf-cursor{position:absolute;left:0;top:0;width:30px;height:30px;z-index:50;opacity:0;pointer-events:none}
.hf-cursor svg{position:absolute;left:0;top:0;width:28px;height:28px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.hf-ripple{position:absolute;left:-14px;top:-14px;width:30px;height:30px;border-radius:50%;border:2px solid #fff;opacity:0}
.hf-cam{position:absolute;inset:0;transform-origin:0 0}
.hf-phone .sheet{position:absolute;left:0;right:0;bottom:0;height:178px;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -12px 30px -12px rgba(0,0,0,.35);padding:18px 16px;transform:translateY(105%);z-index:2}
.hf-phone .sheet small{font-size:11px;color:#7c80a8}
.hf-phone .sheet strong{display:block;font-size:17px;margin:4px 0 14px;color:var(--hf-ink)}
.hf-phone .sh-bar{display:block;height:6px;border-radius:3px;background:#eceef6;overflow:hidden}
.hf-phone .sh-bar i{display:block;height:100%;width:30%;background:#d65a4a}
.hf-phone .sh-steps{display:block;margin-top:12px;font-size:11px;color:#7c80a8}.hf-phone .sh-steps em{font-style:normal;color:var(--hf-ink);font-weight:600}
.hf-phone .row{transition:border-color .3s,box-shadow .3s}
.hf-phone .row.sel{border-color:#d65a4a;box-shadow:0 0 0 3px rgba(214,90,74,.18)}
.hf-mod .ins{position:relative;padding-right:170px}
.hf-mod .ins-btn{position:absolute;right:12px;top:50%;margin-top:-17px;height:34px;padding:0 14px;border-radius:17px;background:var(--hf-accent);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;opacity:0;white-space:nowrap;transition:background .3s}
.hf-mod .ins-btn.ok{background:#1f7a4d}
/* security review: drawn as a line frame, not a filled card */
.s-line{position:absolute;color:#fff}
.s-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.s-frame .s-out{fill:none;stroke:var(--hf-lav);stroke-width:1.5;stroke-dasharray:0 100}
.s-frame .s-div{fill:none;stroke:rgba(203,208,255,.35);stroke-width:1;stroke-dasharray:0 100}
.s-frame .s-tick{fill:none;stroke:rgba(203,208,255,.7);stroke-width:1.5;opacity:0}
.s-line>:not(svg){opacity:0}
.s-line .hf-lbl{color:var(--hf-lav)}
.s-line .hf-chk{color:#c8cdf0}
.s-line .hf-chk i{border-color:rgba(203,208,255,.5);color:transparent}
.s-line .hf-chk.ok{color:#fff}.s-line .hf-chk.ok i{background:#2f9e6a;border-color:#2f9e6a;color:#fff}
.s-line .hf-status{background:none;border:1px solid rgba(203,208,255,.5);color:var(--hf-lav)}
.s-line .hf-status.ok{border-color:#2f9e6a;color:#5fd39a;background:none}
.s-line .hf-bar{background:rgba(255,255,255,.14)}.s-line .hf-bar i{background:var(--hf-lav)}
.s-line .hf-btn{background:none;border:1.5px solid var(--hf-lav);color:#fff}
.s-line .hf-btn.ok{border-color:#2f9e6a;background:#2f9e6a}
/* company profile: same line-frame treatment */
.x-line .hf-wbar{border-bottom:0;color:#fff}
.x-line .hf-wbar i{background:none;border:1px solid rgba(203,208,255,.6)}
.x-line .hf-lbl{color:var(--hf-lav)}
.x-line .hf-big{color:#fff}.x-line .hf-big sup{color:var(--hf-lav)}
.x-line .hf-since{color:#c8cdf0}.x-line .hf-since b{color:#fff}
.x-line .hf-track{background:rgba(255,255,255,.15)}
.x-line .hf-track .fill{background:var(--hf-lav)}
.x-line .hf-track .knob{background:var(--hf-navy);border-color:var(--hf-lav);box-shadow:0 0 0 6px rgba(203,208,255,.12)}
.x-line .hf-ms,.x-line .hf-ms b{color:rgba(203,208,255,.45)}
.x-line .hf-ms::before{background:rgba(203,208,255,.3)}
.x-line .hf-ms.lit,.x-line .hf-ms.lit b{color:#fff}.x-line .hf-ms.lit::before{background:var(--hf-lav)}
/* security checks: just a line tick, no circle or fill */
.s-line .hf-chk i,.s-line .hf-chk.ok i{width:24px;height:24px;border:0;background:none;border-radius:0}
.s-line .hf-chk i svg{width:24px;height:24px;overflow:visible}
.s-line .hf-chk i path{fill:none;stroke:rgba(203,208,255,.28);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke .3s}
.s-line .hf-chk.ok i path{stroke:#5fd39a;animation:hf-tick .45s cubic-bezier(.65,0,.35,1)}
@keyframes hf-tick{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* clients: headline, then a logo wall that fades out on all four edges and drifts left */
.hf-ctitle{position:absolute;left:0;right:0;top:280px;text-align:center;font-size:56px;line-height:1.12;letter-spacing:-.04em;transform-origin:50% 0}
.hf-ctitle .ln{display:block;overflow:hidden;padding-bottom:6px}.hf-ctitle .ln>span{display:inline-block}.hf-ctitle .lav{color:var(--hf-lav)}
.hf-logos{position:absolute;left:0;right:0;top:220px;height:360px;overflow:hidden;opacity:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-composite:intersect}
.hf-lrail{display:flex;width:max-content;height:100%}
.hf-lset{display:flex;flex-direction:column;justify-content:center;gap:18px;padding-right:18px}
.hf-lrow{display:flex;gap:18px}
.hf-lt{width:190px;height:96px;border-radius:14px;background:#fff;display:grid;place-items:center;padding:14px 22px;box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
.hf-lt img{max-width:100%;max-height:100%;object-fit:contain;display:block}
/* mobile apps: line-style phones, one per industry (no colour fills) */
.hf-phone{background:none;box-shadow:none;padding:10px}
.hf-phone .s-frame .s-out{stroke-width:1.8}
.hf-phone .scr{position:relative;height:100%;border-radius:24px;background:rgba(255,255,255,.03);border:1px solid rgba(203,208,255,.18);color:#fff;padding:12px 14px;opacity:0;overflow:hidden}
.ph-st{display:flex;justify-content:space-between;align-items:center;font:600 9px/1 var(--hf-mono);color:rgba(203,208,255,.7);margin-bottom:14px}
.ph-st i{width:18px;height:7px;border:1px solid rgba(203,208,255,.6);border-radius:2px}
.ph-tag{font:600 9px/1 var(--hf-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hf-lav)}
.ph-hd{display:flex;align-items:center;justify-content:space-between;margin:6px 0 14px}
.ph-hd b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.ph-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid rgba(203,208,255,.5)}
.ph-ic.sm{width:26px;height:26px;border-radius:8px}
.ph-ic svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ph-ic.sm svg{width:15px;height:15px}
.ph-sub{font-size:11px;color:#c8cdf0;margin:0 0 8px}
.ph-note{font-size:11px;color:#c8cdf0;margin-top:10px}
.ph-btn{position:absolute;left:14px;right:14px;bottom:14px;height:34px;border-radius:17px;border:1px solid var(--hf-lav);display:grid;place-items:center;font-size:12px;font-weight:600}
/* movie booking */
.ph-screen{width:100%;height:14px;margin-bottom:8px}.ph-screen path{fill:none;stroke:var(--hf-lav);stroke-width:1.5}
.ph-seats{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.ph-seats i{height:13px;border-radius:3px 3px 5px 5px;border:1px solid rgba(203,208,255,.35)}
.ph-seats i.on{border-color:#fff;box-shadow:inset 0 0 0 2px rgba(203,208,255,.55)}
/* insurance */
.ph-card{border:1px solid rgba(203,208,255,.45);border-radius:12px;padding:10px 12px;margin-bottom:14px}
.ph-card small{display:block;font-size:10px;color:#c8cdf0}.ph-card b{display:block;font-size:14px;margin:3px 0 8px}.ph-card em{font-style:normal;color:#5fd39a}
.ph-card span{display:block;height:4px;border-radius:2px;background:rgba(203,208,255,.25);width:80%;margin-top:5px}.ph-card span.s{width:55%}
.ph-steps{display:flex;align-items:center}
.ph-steps i{width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(203,208,255,.45)}.ph-steps i.on{border-color:#fff;box-shadow:inset 0 0 0 3px var(--hf-navy),inset 0 0 0 6px var(--hf-lav)}
.ph-steps b{flex:1;height:1.5px;background:rgba(203,208,255,.3)}.ph-steps b.on{background:var(--hf-lav)}
.ph-lbls{display:flex;justify-content:space-between;font-size:9px;color:#c8cdf0;margin-top:5px}
/* retail */
.hf-phone .row{margin:0 0 8px;height:46px;border-radius:12px;background:none;border:1px solid rgba(203,208,255,.3);display:flex;align-items:center;gap:9px;padding:0 9px}
.hf-phone .row b{display:block;width:auto;height:auto;background:none;font-size:11.5px;font-weight:600;color:#fff;margin:0}
.hf-phone .row small{display:block;font-size:10px;color:#c8cdf0}
.hf-phone .row.sel{border-color:#fff;box-shadow:0 0 0 3px rgba(203,208,255,.2)}
.hf-phone .sheet{background:var(--hf-navy);border-top:1px solid var(--hf-lav);box-shadow:0 -12px 30px -12px rgba(0,0,0,.6);color:#fff}
.hf-phone .sheet small,.hf-phone .sh-steps{color:#c8cdf0}.hf-phone .sheet strong{color:#fff}.hf-phone .sh-steps em{color:#fff}
.hf-phone .sh-bar{background:rgba(255,255,255,.15)}.hf-phone .sh-bar i{background:var(--hf-lav)}
/* healthcare */
.ph-week{display:flex;gap:4px;margin-bottom:14px}
.ph-week span{flex:1;text-align:center;font-size:11px;font-weight:600;padding:5px 0;border-radius:8px;border:1px solid rgba(203,208,255,.25)}
.ph-week span small{display:block;font-size:8px;font-weight:400;color:#c8cdf0;margin-bottom:2px}
.ph-week span.on{border-color:#fff}
.ph-slot{border:1px solid rgba(203,208,255,.3);border-radius:12px;padding:8px 10px;margin-bottom:8px}
.ph-slot.on{border-color:#fff}
.ph-slot b{display:block;font-size:12px}.ph-slot small{display:block;font-size:10px;color:#c8cdf0;margin-top:2px}
/* Creatrix One — real app look (white, indigo), recreated from its store screens */
.hf-phone .cx{position:absolute;inset:0;background:#fff;color:#1b1d3a;padding:12px 12px;clip-path:circle(0px at 50% 50%);z-index:3;font-family:'Poppins','Segoe UI',Arial,sans-serif}
.cx>*{opacity:0}
.cx-st{display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:600;margin-bottom:10px}.cx-st i{width:16px;height:7px;border-radius:2px;background:#1b1d3a}
.cx-ttl{text-align:center;font-size:12px;font-weight:600;margin-bottom:6px}
.cx-bc{text-align:center;font-size:8px;color:#9a9db8;margin-bottom:6px}.cx-bc b{font-weight:500;color:#1b1d3a}
.cx-fab{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#2a2d9f;color:#fff;font-size:11px;margin-bottom:6px}
.cx-greet{position:relative;display:flex;justify-content:space-between;gap:6px;border:1px solid #d9dbf5;border-left:3px solid #2a2d9f;border-radius:10px;padding:9px 9px;margin-bottom:8px;box-shadow:0 6px 14px -10px rgba(42,45,159,.5)}
.cx-greet b{font-size:11px;font-weight:600;line-height:1.25}
.cx-greet span{font-size:8.5px;color:#2a2d9f;font-weight:600;line-height:1.3}.cx-greet small{display:block;font-size:6.5px;color:#9a9db8;font-weight:600;letter-spacing:.06em}
.cx-star{position:absolute;right:-7px;top:-9px;width:20px;height:20px;border-radius:50%;background:#5b5fe0;color:#fff;font-style:normal;font-size:11px;display:grid;place-items:center}
.cx-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.cx-stats>div{border:1px solid #e4e6f2;border-radius:10px;padding:7px 8px}
.cx-stats small{display:block;font-size:6.5px;font-weight:600;letter-spacing:.06em;color:#7c80a8}
.cx-stats b{display:block;font-size:17px;font-weight:700;margin:2px 0}
.cx-stats em{font-style:normal;font-size:7px;color:#2f9e6a}.cx-stats em.lo{color:#c0392b;background:#fdecec;border-radius:6px;padding:1px 5px}
.cx-cls{border:1px solid #d9dbf5;border-left:3px solid #2a2d9f;border-radius:10px;padding:8px 9px}
.cx-cls small{display:block;font-size:7.5px;color:#2a2d9f;font-weight:600}
.cx-cls b{display:block;font-size:10.5px;font-weight:600;margin:2px 0}
.cx-cls span{display:block;font-size:8px;color:#7c80a8}
.cx-cls em{display:inline-block;margin-top:4px;font-style:normal;font-size:7px;color:#2a2d9f;background:#eceeff;border-radius:6px;padding:2px 6px}
/* skyline before the logo */
.hf-city{position:absolute;left:0;top:0;width:1280px;height:600px;overflow:hidden}
.hf-city svg{width:1280px;height:600px;display:block}
.hf-city .bd rect{fill:var(--hf-navy);stroke:var(--hf-lav);stroke-width:1.6}
.hf-city .bd path{fill:none;stroke:rgba(203,208,255,.35);stroke-width:1}
.hf-city .bd.back{opacity:.5}
.hf-city .bd{transform:translateY(700px)}
.hf-ground{position:absolute;inset:0;width:1280px;height:720px}
.hf-ground path{fill:none;stroke:var(--hf-lav);stroke-width:1.6;stroke-dasharray:0 100}
.hf-btitle{position:absolute;left:0;right:0;top:92px;text-align:center;font-size:76px;letter-spacing:-.045em;line-height:1.1}
.hf-btitle .ln{display:block;overflow:hidden;padding-bottom:8px}.hf-btitle .ln>span{display:inline-block;transform:translateY(110%)}
/* captions are spoken (voice-over), not shown */
.hf-cap{display:none}
.hf-voice{position:absolute;right:98px;top:16px;font:600 11px/1 var(--hf-mono);letter-spacing:.06em;color:rgba(255,255,255,.8);padding:8px 12px;border:1px solid rgba(255,255,255,.25);border-radius:16px;background:rgba(19,22,63,.4);opacity:0;cursor:pointer;z-index:5}
.hf-voice:hover{color:#fff;border-color:#fff}
/* flagship phone stands out: real app icon, brighter outline with a glow, a badge */
.ph-app{width:36px;height:36px;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.6),0 6px 16px -6px rgba(0,0,0,.6)}
.ph-app img{width:100%;height:100%;display:block}
.hf-phone.flag .s-frame .s-out{stroke:#fff;stroke-width:2.2}
.hf-phone.flag{filter:drop-shadow(0 0 18px rgba(203,208,255,.45))}
.hf-phone.flag::before{content:"★ Flagship";position:absolute;left:50%;top:-30px;transform:translateX(-50%);font:600 10px/1 var(--hf-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--hf-navy);background:var(--hf-lav);padding:6px 10px;border-radius:12px;white-space:nowrap}
.hf-phone.flag .ph-tag{color:#fff}
/* info panel on the left of the flagship screen */
.hf-finfo{position:absolute;left:440px;top:168px;width:318px;opacity:0;color:#fff}
.hf-finfo>*{opacity:0}
.fi-logo{display:inline-block;background:#fff;border-radius:14px;padding:10px 14px;margin-bottom:18px}
.fi-logo img{display:block;height:50px;width:auto}
.fi-k{display:block;font:600 11px/1 var(--hf-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--hf-lav)}
.fi-t{display:block;font-size:34px;font-weight:600;letter-spacing:-.03em;margin:8px 0 10px}
.fi-d{margin:0 0 14px;font-size:15px;line-height:1.5;color:#c8cdf0}
.fi-l{margin:0;padding:0;list-style:none}
.fi-l li{position:relative;padding-left:22px;margin-bottom:9px;font-size:14px}
.fi-l li::before{content:"";position:absolute;left:2px;top:4px;width:10px;height:6px;border-left:2px solid #5fd39a;border-bottom:2px solid #5fd39a;transform:rotate(-45deg)}
.hf-skip{cursor:pointer;z-index:5}
/* controls: icon only, light and quiet */
.hf .hf-skip,.hf .hf-voice{top:16px;width:34px;height:34px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:0;letter-spacing:0;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.6);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.hf .hf-skip{right:18px}.hf .hf-voice{right:60px}
.hf .hf-skip:hover,.hf .hf-voice:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:#fff}
.hf .hf-skip svg,.hf .hf-voice svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hf .hf-voice svg path:first-child,.hf .hf-skip svg path{fill:none}
/* phones: the industry is the headline */
.ph-ind{text-align:center;margin:2px 0 14px}
.ph-ind .big{width:46px;height:46px;border-radius:14px;margin:0 auto 9px;border-color:rgba(203,208,255,.7);box-shadow:0 0 0 5px rgba(203,208,255,.08)}
.ph-ind .big svg{width:26px;height:26px}
.ph-ind b{display:block;font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.ph-ind small{display:block;margin-top:4px;font-size:10px;color:var(--hf-lav);letter-spacing:.02em}
.ph-ind .ph-app.big{display:block;width:46px;height:46px;border-radius:14px}
.hf-phone .ph-sub{display:none}
.ph-seats i{height:11px}.ph-seats{gap:5px}
.ph-card{margin-bottom:10px;padding:8px 10px}
.ph-week{margin-bottom:10px}.ph-slot{padding:7px 10px;margin-bottom:6px}
.hf-phone .row{height:40px;margin-bottom:6px}

/* fit pass after the Poppins switch: keep text inside its boxes */
.hf-phone .row>span:last-child{min-width:0;flex:1}
.hf-phone .row b,.hf-phone .row small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-greet b{font-size:10px;line-height:1.3}
.cx-greet span{font-size:7.5px;flex:none;text-align:right}
.cx-greet small,.cx-stats small{white-space:nowrap;letter-spacing:.03em}
.cx-stats small{font-size:6px}
.cx-stats em{white-space:nowrap}
.cx-cls b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf-tag.l{transition:opacity .2s}

/* light ring that rides the edge of the circle when the film opens from the diamond */
.hf-ring{position:absolute;z-index:31;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 40px 14px rgba(203,208,255,.55),inset 0 0 60px 10px rgba(203,208,255,.35)}

/* "AI" as a word, never a spark symbol */
.ai-t{font:inherit;font-weight:700;letter-spacing:.02em}

/* ==========================================================================
   V2 Brand OS Film Styles (Operating Systems for Complex Organizations)
   ========================================================================== */

/* Scene 1: Fragmentation */
.v2-frag-card{position:absolute;background:#0e1132;border-radius:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.v2-silos{display:flex;gap:16px;align-items:center;justify-content:center;margin-top:48px;padding:0 24px}
.v2-silo{background:rgba(255,255,255,.05);border:1px solid rgba(203,208,255,.25);border-radius:14px;padding:18px 16px;width:210px;text-align:center;transition:border-color .3s,transform .3s}
.v2-silo:hover{border-color:var(--hf-lav);transform:translateY(-3px)}
.v2-s-tag{display:inline-block;font:600 10px/1 var(--hf-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--hf-lav);margin-bottom:8px}
.v2-silo b{display:block;font-size:15px;color:#fff;margin-bottom:4px}
.v2-silo small{display:block;font-size:11px;color:#cbd0ff;opacity:.8}
.v2-silo-gap{font:600 11px var(--hf-mono);color:#f28b82;letter-spacing:.08em;display:flex;flex-direction:column;align-items:center;gap:3px;flex:none}
.v2-silo-gap i{font-style:normal;font-size:9px;text-transform:uppercase;background:rgba(242,139,130,.15);border:1px solid rgba(242,139,130,.4);border-radius:6px;padding:2px 6px}
.v2-frag-alert{margin:36px auto 0;max-width:700px;padding:12px 18px;border-radius:12px;background:rgba(242,139,130,.12);border:1px solid rgba(242,139,130,.35);color:#ffcdd2;display:flex;align-items:center;gap:14px;font-size:13px;line-height:1.4}
.v2-warn-dot{width:22px;height:22px;border-radius:50%;background:#e53935;color:#fff;font-weight:700;display:grid;place-items:center;font-size:12px;flex:none}

/* Scene 2: Operating Core */
.v2-core-lines path{fill:none;stroke:rgba(203,208,255,.45);stroke-width:1.5}
.v2-core-lines .pulse{stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:12 80;opacity:0}
.v2-node{position:absolute;width:190px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(203,208,255,.3);color:#fff;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);backdrop-filter:blur(6px);transition:transform .4s,border-color .4s}
.v2-node .vn-icon{font-size:20px;display:block;margin-bottom:6px}
.v2-node b{display:block;font-size:14px;color:#fff;line-height:1.2}
.v2-node small{display:block;font-size:10.5px;color:var(--hf-lav);margin-top:4px}
.v2-hub{position:absolute;display:grid;place-items:center}
.v2-ring{position:absolute;border:1px solid rgba(203,208,255,.35);border-radius:50%;animation:v2-spin 18s linear infinite}
.v2-ring.vr-1{width:220px;height:220px}
.v2-ring.vr-2{width:160px;height:160px;animation-direction:reverse;animation-duration:12s}
.v2-ring.vr-3{width:110px;height:110px;animation-duration:8s}
.v2-ring::after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff}
@keyframes v2-spin{to{transform:rotate(360deg)}}
.v2-hub-center{width:96px;height:96px;border-radius:26px;background:linear-gradient(135deg,#3638bd,#7375ee);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 35px rgba(115,117,238,.6);position:relative;z-index:2}
.v2-hub-center b{font-size:28px;font-weight:700;line-height:1}
.v2-hub-center span{font:600 7px/1.2 var(--hf-mono);letter-spacing:.12em;margin-top:3px}
.v2-hub-status{font:600 7px var(--hf-mono);color:#5fd39a;margin-top:2px}
.v2-drag-elem{background:var(--hf-accent);border-color:var(--hf-accent);color:#fff;font-weight:600;box-shadow:0 8px 20px -6px rgba(42,45,159,.9)}

/* Scene 3: Policy Encoding */
.v2-policy-card{background:#0e1132;border-radius:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.v2-pol-status{border-color:rgba(203,208,255,.5);color:var(--hf-lav)}
.v2-pchk div b{display:block;font-size:14px;color:#fff}
.v2-pchk div small{display:block;font-size:11px;color:#cbd0ff;margin-top:2px}
.v2-pol-bar i{background:var(--hf-lav);transition:width .4s}
.v2-pol-btn{background:var(--hf-accent);border:0;color:#fff;font-weight:600;padding:0 24px}

/* Scene 4: Governed Intelligence Cockpit */
.v2-ai-cmp{background:#0e1132;border:1px solid rgba(203,208,255,.35)}
.v2-ai-cockpit{position:absolute;inset:0;display:flex}
.v2-ai-nav{width:180px;background:rgba(0,0,0,.25);border-right:1px solid rgba(203,208,255,.18);padding:24px 14px}
.v2-ai-brand{display:flex;align-items:center;gap:8px;margin-bottom:26px;color:#fff}
.v2-ai-brand b{width:26px;height:26px;border-radius:8px;background:var(--hf-accent);display:grid;place-items:center;font-size:12px}
.v2-ai-brand span{font:600 9px var(--hf-mono);letter-spacing:.12em;color:var(--hf-lav)}
.v2-ai-menu span{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:12px;color:#cbd0ff;margin-bottom:6px;transition:background .2s}
.v2-ai-menu span.active{background:rgba(255,255,255,.1);color:#fff;font-weight:600}
.v2-ai-body{flex:1;padding:26px 30px}
.v2-ai-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:1px solid rgba(203,208,255,.14);padding-bottom:14px}
.v2-ai-topbar h5{margin:0;font-size:20px;font-weight:600;color:#fff}
.v2-ai-topbar small{display:block;font-size:11px;color:#cbd0ff;margin-top:2px}
.v2-ai-badge{font:600 10px var(--hf-mono);color:#5fd39a;background:rgba(95,211,154,.15);border:1px solid rgba(95,211,154,.4);padding:4px 10px;border-radius:12px}
.v2-ai-alert-box{background:rgba(255,255,255,.05);border:1px solid rgba(203,208,255,.28);border-left:4px solid var(--hf-lav);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.v2-ai-alert-box strong{font-size:14px;color:#fff;display:flex;align-items:center;gap:6px}
.v2-ai-alert-box p{margin:0;font-size:13px;color:#cbd0ff;line-height:1.4}
.v2-ai-evidence{display:flex;gap:16px;font:500 10px var(--hf-mono);color:#aeb2dc;padding-top:4px}
.v2-ai-evidence span{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.06);padding:3px 8px;border-radius:6px}
.v2-ai-action-btn{align-self:flex-start;height:38px;padding:0 20px;border-radius:19px;background:var(--hf-accent);color:#fff;border:0;font-size:13px;font-weight:600;cursor:pointer;transition:background .3s;display:inline-flex;align-items:center;gap:8px}
.v2-ai-action-btn.ok{background:#1f7a4d}
.v2-ai-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.v2-aim-card{background:rgba(255,255,255,.04);border:1px solid rgba(203,208,255,.2);border-radius:12px;padding:12px 14px}
.v2-aim-card small{font:600 9px var(--hf-mono);color:#cbd0ff;letter-spacing:.08em;display:block}
.v2-aim-card b{font-size:20px;color:#fff;display:block;margin:4px 0 2px}
.v2-aim-card span{font-size:10px;color:#aeb2dc;display:block}
.v2-aim-card span.pos{color:#5fd39a}

/* Scene 5: Creatrix Devices */
.v2-cx-info{position:absolute;left:140px;top:170px;width:340px}
.v2-cx-tablet{position:absolute;padding:16px;background:rgba(255,255,255,.04);border-radius:16px}
.v2-tab-header{border-bottom:1px solid rgba(203,208,255,.2);padding-bottom:10px;margin-bottom:12px}
.v2-tab-header b{display:block;font-size:13px;color:#fff}
.v2-tab-header small{font-size:10px;color:#cbd0ff}
.v2-tab-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(203,208,255,.1);font-size:11px;color:#cbd0ff}
.v2-tab-row b.ok{color:#5fd39a}
.v2-tab-pill{margin-top:14px;text-align:center;font:600 9px var(--hf-mono);color:var(--hf-lav);border:1px solid rgba(203,208,255,.3);border-radius:12px;padding:6px 8px}

/* Scene 6: Brand Promise & Capability */
.v2-capability-grid{position:absolute;inset:0}
.v2-cap-tile{position:absolute;width:240px;height:240px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(203,208,255,.3);padding:24px 20px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 15px 35px -10px rgba(0,0,0,.5);transition:border-color .3s,transform .3s}
.v2-cap-tile:hover{border-color:#fff;transform:translateY(-4px)}
.v2-cap-head{display:flex;align-items:center;gap:8px}
.v2-cap-dot{width:8px;height:8px;border-radius:50%;background:var(--hf-lav);box-shadow:0 0 8px var(--hf-lav)}
.v2-cap-head small{font:600 11px var(--hf-mono);letter-spacing:.14em;color:var(--hf-lav)}
.v2-cap-tile .n{font-size:68px;line-height:1;font-weight:300;letter-spacing:-.04em;color:#fff}
.v2-cap-tile .n sup{font-size:32px;vertical-align:top;color:var(--hf-lav)}
.v2-cap-tile .v2-c-sub{font-size:24px;vertical-align:middle;margin-left:6px;color:var(--hf-lav);font-weight:400}
.v2-cap-tile p{margin:0;font-size:13px;line-height:1.4;color:#cbd0ff}


/* brand v2: line icons instead of emoji; word states on the promise tiles */
.v2-node .vn-icon .vn-svg{width:22px;height:22px;color:var(--hf-lav)}
.v2-ai-menu i{display:inline-flex;font-style:normal}.v2-ai-menu i .vn-svg{width:15px;height:15px}
.v2-cap-tile .n.w{font-size:46px;font-weight:400}

/* v2 Creatrix scene: web application behind the mobile app */
.v2-cx-web{position:absolute;border-radius:14px;background:#f5f7fa;overflow:hidden;color:#1b1d4a;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.18)}
.cw-bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#e6e9f4;border-bottom:1px solid #d9dcee}
.cw-bar i{width:8px;height:8px;border-radius:50%;background:#c3c7e4}
.cw-bar span{margin-left:10px;font:500 10px var(--hf-mono);color:#5c5e80}
.cw-body{display:flex;height:calc(100% - 30px)}
.cw-side{width:118px;background:#fff;border-right:1px solid #e4e7f1;padding:14px 10px;display:flex;flex-direction:column;gap:3px}
.cw-logo{width:26px;height:26px;border-radius:8px;background:#2a2d9f;color:#fff;display:grid;place-items:center;font-size:13px;margin:0 0 10px 4px}
.cw-side span{font-size:11px;color:#5c5e80;padding:6px 8px;border-radius:8px}
.cw-side span.on{background:#eceefe;color:#2a2d9f;font-weight:600}
.cw-main{flex:1;padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.cw-top{display:flex;justify-content:space-between;align-items:flex-start}
.cw-top small{display:block;font:600 9px var(--hf-mono);letter-spacing:.12em;color:#7a7da8}
.cw-top b{font-size:15px;color:#1b1d4a}
.cw-top em{font:500 9px var(--hf-mono);color:#7a7da8;border:1px solid #d9dcee;border-radius:10px;padding:3px 8px}
.cw-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cw-cards div{background:#fff;border:1px solid #e4e7f1;border-radius:10px;padding:8px 10px}
.cw-cards small{display:block;font-size:9px;color:#7a7da8}
.cw-cards b{display:block;font-size:13px;color:#2a2d9f;margin:2px 0}
.cw-cards span{font-size:9px;color:#9a9cc0}
.cw-chart{background:#fff;border:1px solid #e4e7f1;border-radius:10px;padding:8px 10px}
.cw-chart small{font-size:9px;color:#7a7da8}
.cw-bars{display:flex;align-items:flex-end;gap:8px;height:52px;margin-top:6px}
.cw-bars i{flex:1;border-radius:4px 4px 0 0;background:#c9cdf6}
.cw-bars i.h{background:#2a2d9f}
.cw-row{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #e4e7f1;border-radius:8px;padding:6px 10px;font-size:10.5px;color:#3b3f66}
.cw-row b{font-size:9.5px;font-weight:600;color:#6a55c8;background:#f0ecff;border-radius:8px;padding:2px 7px}
.cw-row b.ok{color:#1f7a4d;background:#e3f6ec}

/* v2 fragmentation scene: light app window, pastel accents (matches the Creatrix web window) */
.v2-frag-card{background:#f5f7fa;color:#1b1d4a;border-radius:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.18)}
.v2-frag-card .hf-wbar{background:#e6e9f4;border-bottom:1px solid #d9dcee;border-radius:18px 18px 0 0;color:#1b1d4a}
.v2-frag-card .hf-wbar i{background:#c3c7e4}
.v2-frag-card .v2-silos{margin-top:78px}
.v2-frag-card .v2-silo{background:#fff;border:1px solid #e4e7f1;box-shadow:0 8px 20px -14px rgba(27,29,74,.35)}
.v2-frag-card .v2-silo:hover{border-color:#c9cdf6}
.v2-frag-card .v2-silo b{color:#1b1d4a}
.v2-frag-card .v2-silo small{color:#7a7da8;opacity:1}
.v2-frag-card .v2-s-tag{padding:3px 8px;border-radius:8px}
.v2-frag-card .sl1 .v2-s-tag{color:#2a2d9f;background:#eceefe}
.v2-frag-card .sl2 .v2-s-tag{color:#6a55c8;background:#f0ecff}
.v2-frag-card .sl3 .v2-s-tag{color:#1f6f7a;background:#e3f4f6}
.v2-frag-card .v2-silo-gap{color:#c0605a}
.v2-frag-card .v2-silo-gap i{background:#fdecea;border-color:#f5c6c2}
.v2-frag-card .v2-frag-alert{margin-top:28px;background:#fdf1f0;border-color:#f5c6c2;color:#7a3a36}
.v2-frag-card .v2-frag-alert strong{color:#7a3a36}
.v2-frag-card .v2-warn-dot{background:#e57373}

/* v2 fragmentation: the three boxes fit and centre inside the window */
.v2-frag-card .v2-silos{gap:10px;padding:0 20px}
.v2-frag-card .v2-silo{width:196px;padding:16px 12px}

/* v2 OS scene: loose parts before the OS connects them */
.v2-node.loose{border-style:dashed;border-color:rgba(203,208,255,.45)}
.v2-hub.off .v2-hub-center{background:transparent;border:1.5px dashed rgba(203,208,255,.7);box-shadow:none}
.v2-hub.off .v2-ring{opacity:.25;animation-play-state:paused}
.v2-hub.off .v2-hub-status{color:#cbd0ff}
.v2-hub-center,.v2-ring{transition:background .5s,box-shadow .5s,opacity .5s,border-color .5s}

/* v2 film: line style — no dark fills; white strokes on the blue */
.v2-node,.v2-cap-tile{background:transparent;border-color:rgba(255,255,255,.55);box-shadow:none;backdrop-filter:none}
.v2-policy-card{background:transparent;box-shadow:none}
.v2-ai-cmp{background:transparent;border:1px solid rgba(255,255,255,.6);box-shadow:none}
.v2-ai-nav{background:transparent;border-right-color:rgba(255,255,255,.35)}
.v2-ai-menu span.active{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.v2-ai-topbar{border-bottom-color:rgba(255,255,255,.3)}
.v2-ai-alert-box{background:transparent;border-color:rgba(255,255,255,.5);border-left-color:#fff}
.v2-ai-evidence span{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);color:#dfe2ff}
.v2-aim-card{background:transparent;border-color:rgba(255,255,255,.5)}
.v2-ai-brand b{background:transparent;box-shadow:inset 0 0 0 1.5px #fff}
.v2-ai-action-btn{background:#fff;color:#2a2d9f}
.v2-ai-action-btn.ok{background:#e3f6ec;color:#1f7a4d}
.v2-pol-btn{background:#fff;color:#2a2d9f}
.s-line .v2-pol-btn.ok{background:none;color:#5fd39a;border-color:#2f9e6a}

/* v2 policy card: laid out in a grid so header, rows, bar and button line up */
.v2-policy-card{display:grid;grid-template-columns:1fr auto;align-items:center;padding:30px 40px 34px;row-gap:0}
.v2-policy-card .s-div{display:none}
.v2-policy-card>.hf-lbl,.v2-policy-card>.hf-status,.v2-policy-card>.hf-chk,.v2-policy-card>.hf-bar,.v2-policy-card>.hf-btn{position:relative;left:auto!important;right:auto;top:auto!important}
.v2-policy-card>.hf-lbl{grid-column:1}
.v2-policy-card>.hf-status{grid-column:2;justify-self:end}
.v2-policy-card>.hf-chk{grid-column:1/-1;padding:14px 0;border-bottom:1px solid rgba(203,208,255,.14)}
.v2-policy-card>.hf-chk.p1{margin-top:20px;border-top:1px solid rgba(203,208,255,.3)}
.v2-policy-card>.hf-bar{grid-column:1/-1;width:auto!important;margin-top:24px}
.v2-policy-card>.hf-btn{grid-column:1/-1;justify-self:start;margin-top:20px}

/* v2 AI screen: tidy rows, no stray flex gaps in the headline */
.v2-ai-body{display:flex;flex-direction:column;padding:26px 30px 28px}
.v2-ai-nav{padding:26px 14px}
.v2-ai-alert-box{margin-bottom:18px}
.v2-ai-alert-box strong{display:block;line-height:1.4}
.v2-ai-alert-box strong .ai-t{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);font-size:11px;vertical-align:1px}
.v2-ai-evidence{flex-wrap:wrap;gap:8px}
.v2-ai-metrics{margin-top:auto}
.v2-aim-card{display:flex;flex-direction:column;justify-content:center;min-height:84px}

/* v2 closing city: second title line in lavender */
.hf-btitle .lav{color:var(--hf-lav)}
/* policy items: headline only, a little larger — quick to read in a few seconds */
.v2-pchk div b{font-size:17px;font-weight:500}

/* v2 fragmentation: each system shows the same student with a different status */
.v2-frag-card .v2-silo b{margin-bottom:10px}
.v2-rec{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#f5f7fa;border-radius:8px;padding:7px 9px;font-size:12px;color:#3b3f66;text-align:left}
.v2-rec em{font-style:normal;font-size:10.5px;font-weight:600;border-radius:8px;padding:2px 7px}
.v2-rec em.ok{color:#1f7a4d;background:#e3f6ec}
.v2-rec em.bad{color:#b0574f;background:#fdecea}
.v2-frag-card .v2-frag-alert{font-size:14px}

/* v2 decision screen: fewer things, bigger type */
.v2-ai-body{padding:30px 40px 34px;gap:0}
.v2-ai-topbar h5{font-size:16px;font-weight:500;color:#dfe1ff}
.v2-ai-alert-box{padding:22px 24px;gap:10px;margin-bottom:26px}
.v2-ai-alert-box strong{font-size:24px;font-weight:500;line-height:1.3}
.v2-ai-alert-box p{font-size:16px;color:#dfe1ff}
.v2-ai-alert-box p b{color:#fff;font-weight:600}
.v2-ai-metrics{display:flex;align-items:center;gap:14px;margin:0 0 26px}
.v2-aim-card{flex:1;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;min-height:52px;padding:0 16px;font-size:15px;color:#cbd0ff;opacity:.45;transition:opacity .4s,border-color .4s}
.v2-aim-card i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.v2-aim-card.on{opacity:1;color:#fff}
.v2-aim-card.done{border-color:#5fd39a}.v2-aim-card.done i{background:#2f9e6a;box-shadow:none}
.v2-aim-arrow{color:#cbd0ff;font-size:18px}
.v2-ai-action-btn{height:44px;padding:0 26px;font-size:15px}

/* v2 scene 1: scattered systems, tangled links, a record carried by hand (white line style) */
.v2-mess{position:absolute;inset:0;width:1280px;height:720px;overflow:visible}
.v2-mess path{fill:none;stroke:rgba(203,208,255,.45);stroke-width:1.5;stroke-dasharray:100;stroke-dashoffset:100}
.v2-mess path.brk{stroke:#f2b8b4;stroke-opacity:.8}
.v2-mess .x{font:600 16px Poppins,Arial,sans-serif;fill:#f2b8b4;text-anchor:middle;opacity:0}
.v2-app{position:absolute;width:120px;height:84px;border:1.5px solid rgba(255,255,255,.7);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;opacity:0;background:rgba(42,45,159,.55)}
.v2-app svg{width:26px;height:26px;fill:none;stroke:#cbd0ff;stroke-width:1.5;stroke-linejoin:round}
.v2-app b{font:600 13px var(--hf-mono);letter-spacing:.08em}
.v2-doc{position:absolute;left:0;top:0;width:46px;display:flex;flex-direction:column;align-items:center;gap:3px;opacity:0;z-index:40}
.v2-doc svg{width:34px;height:42px;fill:rgba(255,255,255,.14);stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.v2-doc span{font:600 10px var(--hf-mono);color:#fff;white-space:nowrap}
.v2-drop{position:absolute;width:100px;text-align:center;font:600 11px var(--hf-mono);letter-spacing:.08em;text-transform:uppercase;color:#f2b8b4;opacity:0}
.v2-frag-cap{position:absolute;left:0;right:0;top:612px;text-align:center;font-size:22px;color:#dfe1ff;opacity:0}

/* promise tiles: "Evidenced" no longer touches the tile edge */
.v2-cap-tile .n.w{font-size:38px;letter-spacing:-.03em}

/* decision screen: no accent bar on the left, no green card borders — calm, even outlines */
.v2-ai-alert-box{border:1px solid rgba(255,255,255,.4)!important;border-left-width:1px!important}
.v2-aim-card.done{border-color:rgba(255,255,255,.5)}