/* HAMUP landing v2 — dark "tech company" style (Linear / Vercel / Stripe inspired), scroll-driven.
   Loaded on every page via additionalhtmlhead; only #page-site-index mounts it. Font: Vazirmatn (fonts.css, 9 weights). */

/* Keep the old front page invisible until the landing is mounted (visible after 2.5s if JS fails). */
@keyframes hl-show{to{opacity:1}}
body#page-site-index #page{opacity:0;animation:hl-show .3s 2.5s forwards}
body#page-site-index.hl-ready #page,
body#page-site-index.hl-ready #page-footer{display:none!important}
body#page-site-index.hl-ready{background:#06050a}
html:has(body#page-site-index.hl-ready),
body#page-site-index.hl-ready,
body#page-site-index.hl-ready #page-wrapper{overflow:visible!important;height:auto!important}

/* Navbar: invisible over the hero, frosted glass after scrolling. */
body#page-site-index.hl-ready .navbar.fixed-top{transition:background .4s,box-shadow .4s,border-color .4s}
body#page-site-index.hl-ready:not(.hl-scrolled) .navbar.fixed-top{background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important}
body#page-site-index.hl-scrolled .navbar.fixed-top{background:rgba(10,8,14,.72)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:none!important;backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px)}

.hl{--bg:#06050a;--fg:#f4f1f6;--mute:#a49aa8;--line:rgba(255,255,255,.09);--glass:rgba(255,255,255,.04);
  --rose:#ff3d7f;--maroon:#b0244f;--amber:#ffb020;--gold:#FFC627;--violet:#8b5cf6;
  --grad:linear-gradient(95deg,#ff6a95 0%,#ff3d7f 30%,#ffb020 70%,#ffd66b 100%);
  --display:"Vazirmatn",Tahoma,sans-serif;--text:"Vazirmatn",Tahoma,sans-serif;
  position:relative;font-family:var(--text);color:var(--fg);overflow-x:clip;line-height:1.85;font-feature-settings:"ss01","kern"}
.hl *{box-sizing:border-box}
.hl a{text-decoration:none}
.hl section{position:relative}
.hl-wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* Fixed background: glow colour follows the section in view; subtle film grain on top. */
.hl-bg{position:fixed;inset:0;z-index:-1;background:var(--bg);pointer-events:none}
.hl-glow{position:absolute;inset:-20% -10% auto -10%;height:90vh;background:radial-gradient(50% 60% at 50% 0%,var(--hl-glow,rgba(255,61,127,.35)),transparent 70%);
  transition:background 1s ease}
.hl-noise{position:absolute;inset:0;opacity:.06;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.hl-grad{background:var(--grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hl-shine 7s linear infinite}
@keyframes hl-shine{to{background-position:-200% center}}
.hl-eyebrow{font-family:var(--text);font-weight:600;font-size:.85rem;color:var(--rose);text-align:center;margin:0 0 .6rem}
.hl-h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.3;margin:0 auto 3rem;text-align:center;max-width:900px}

/* Buttons */
.hl-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:2.2rem}
.hl-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.8rem 1.6rem;border-radius:12px;font-weight:700;
  font-size:1rem;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s;will-change:transform}
.hl-btn-primary{color:#fff!important;background:linear-gradient(135deg,#ff3d7f,#b0244f);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 10px 35px -8px rgba(255,61,127,.7)}
.hl-btn-primary::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);
  background-size:250% 100%;animation:hl-sheen 3.5s ease-in-out infinite}
@keyframes hl-sheen{0%,60%{background-position:150% 0}100%{background-position:-100% 0}}
.hl-btn-primary:hover{box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 14px 45px -6px rgba(255,61,127,.9)}
.hl-btn-glass{color:var(--fg)!important;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset;backdrop-filter:blur(8px)}
.hl-btn-glass:hover{background:rgba(255,255,255,.1)}

/* 1. Hero */
.hl-hero{padding:150px 0 0;text-align:center;overflow:hidden;perspective:1400px}
.hl-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--bg))}
.hl-floor{position:absolute;left:-50%;right:-50%;bottom:-10%;height:70%;transform:rotateX(72deg);transform-origin:bottom;
  background-image:linear-gradient(rgba(255,61,127,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,61,127,.22) 1px,transparent 1px);
  background-size:64px 64px;animation:hl-floor 6s linear infinite;
  mask-image:linear-gradient(to top,#000 0%,transparent 75%);-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 75%)}
@keyframes hl-floor{to{background-position:0 64px}}
.hl-beams i{position:absolute;top:-30%;width:1px;height:60%;background:linear-gradient(to bottom,transparent,rgba(255,176,32,.8),transparent);
  animation:hl-beam 7s linear infinite;opacity:.7}
.hl-beams i:nth-child(1){left:18%;animation-delay:-1s}.hl-beams i:nth-child(2){left:38%;animation-delay:-4s}
.hl-beams i:nth-child(3){left:63%;animation-delay:-2.5s}.hl-beams i:nth-child(4){left:84%;animation-delay:-5.5s}
@keyframes hl-beam{0%{transform:translateY(-20%);opacity:0}15%{opacity:.8}100%{transform:translateY(260%);opacity:0}}
.hl-hero-inner{position:relative;z-index:2;padding:0 20px;will-change:transform,opacity}
.hl-pill{display:inline-flex;align-items:center;gap:.6rem;padding:.3rem .5rem .3rem .9rem;border-radius:999px;color:var(--fg)!important;
  background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset;font-size:.9rem;margin-bottom:1.8rem;transition:background .2s}
.hl-pill:hover{background:rgba(255,255,255,.09)}
.hl-pill-tag{background:var(--grad);color:#1a0610;font-weight:800;border-radius:999px;padding:.05rem .6rem;font-size:.78rem}
.hl-pill b{color:var(--rose)}
.hl-hero-title{font-family:var(--display);font-weight:900;font-size:clamp(2.5rem,7.2vw,6.4rem);line-height:1.22;margin:0;
  display:flex;flex-direction:column;align-items:center}
.hl-line{display:block}
.hl-rotator{min-height:1.25em;display:inline-flex;align-items:center}
.hl-caret{display:inline-block;width:.06em;height:.9em;margin-right:.08em;background:var(--rose);animation:hl-blink 1s steps(1) infinite;border-radius:2px}
@keyframes hl-blink{50%{opacity:0}}
.hl-hero-sub{max-width:680px;margin:1.6rem auto 0;font-size:clamp(1.02rem,1.6vw,1.25rem);color:var(--mute)}
.hl-hero-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-top:2rem;color:var(--mute);font-size:.9rem}
.hl-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;margin-left:.45rem;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:hl-pulse 2s infinite}
@keyframes hl-pulse{70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* Product shot */
.hl-shot-wrap{position:relative;z-index:2;max-width:1100px;margin:70px auto 0;padding:0 20px 100px;perspective:1600px}
.hl-shot{border-radius:18px;background:rgba(16,12,20,.82);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 120px -20px rgba(255,61,127,.45),0 0 0 8px rgba(255,255,255,.02);
  transform-origin:top center;transform:rotateX(var(--tilt,24deg)) scale(var(--sc,.92));overflow:hidden;text-align:right;backdrop-filter:blur(10px)}
.hl-shot-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);direction:ltr}
.hl-shot-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.hl-shot-bar i:nth-child(2){background:#febc2e}.hl-shot-bar i:nth-child(3){background:#28c840}
.hl-shot-bar span{margin:0 auto;font:12px ui-monospace,Menlo,monospace;color:var(--mute);background:rgba(255,255,255,.05);padding:3px 14px;border-radius:7px}
.hl-shot-body{display:grid;grid-template-columns:200px 1fr;min-height:380px}
.hl-shot-side{border-left:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:var(--mute)}
.hl-shot-side b{font-family:var(--display);font-size:1.3rem;color:var(--fg);margin-bottom:10px}
.hl-shot-side span{padding:7px 10px;border-radius:8px}
.hl-shot-side span.on{background:rgba(255,61,127,.12);color:#fff;box-shadow:0 0 0 1px rgba(255,61,127,.3) inset}
.hl-shot-main{padding:18px;display:flex;flex-direction:column;gap:14px}
.hl-shot-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hl-shot-kpis div{background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column}
.hl-shot-kpis small{color:var(--mute);font-size:.75rem}
.hl-shot-kpis b{font-family:var(--display);font-size:1.6rem;line-height:1.3}
.hl-shot-kpis em{font-style:normal;font-size:.75rem;color:#22c55e}
.hl-shot-kpis .warn em{color:#22c55e}.hl-shot-kpis .warn b{color:#ff6a95}
.hl-shot-row{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;flex:1}
.hl-shot-chart,.hl-shot-list{background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:14px}
.hl-shot-chart small,.hl-shot-list small{color:var(--mute);font-size:.78rem}
.hl-bars{height:150px;display:flex;align-items:flex-end;gap:12px;margin-top:10px}
.hl-bars i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(to top,#b0244f,#ff6a95);transform-origin:bottom;
  transform:scaleY(0);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.hl-in .hl-bars i,.hl-shot.in .hl-bars i{transform:scaleY(1)}
.hl-bars i:nth-child(2){transition-delay:.08s}.hl-bars i:nth-child(3){transition-delay:.16s}.hl-bars i:nth-child(4){transition-delay:.24s}
.hl-bars i:nth-child(5){transition-delay:.32s}.hl-bars i:nth-child(6){transition-delay:.4s}
.hl-bars-l{display:flex;gap:12px;margin-top:6px}.hl-bars-l span{flex:1;text-align:center;font-size:.68rem;color:var(--mute)}
.hl-shot-list p{display:flex;align-items:center;gap:8px;margin:9px 0 0;font-size:.82rem}
.hl-shot-list i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff3d7f,#ffb020);
  color:#1a0610;font-weight:800;font-size:.72rem}
.hl-shot-list span{margin-right:auto;font-size:.68rem;padding:1px 8px;border-radius:999px}
.hl-shot-list .bad{background:rgba(255,61,127,.15);color:#ff8fb0}.hl-shot-list .mid{background:rgba(255,176,32,.15);color:#ffcf70}

/* 2. Logos marquee */
.hl-logos{padding:30px 0 70px;text-align:center}
.hl-where-title{font-family:var(--display);font-weight:900;font-size:clamp(1.6rem,3.6vw,2.8rem);line-height:1.45;margin:0 auto 1.2rem;max-width:800px}
.hl-where-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:2.2rem}
.hl-where-stats span{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;background:rgba(255,255,255,.04);
  box-shadow:0 0 0 1px var(--line) inset;color:var(--mute);font-size:.92rem}
.hl-where-stats b{font-weight:900;font-size:1.15rem;color:var(--fg)}
.hl-logos .hl-marquee{margin-bottom:14px}
.hl-mq-track.hl-chips-row{gap:14px;animation-duration:30s}
.hl-city{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:16px;white-space:nowrap;font-weight:800;font-size:1.15rem;
  color:var(--fg);background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 10px 30px -12px var(--c);position:relative;overflow:hidden}
.hl-city::before{content:"";position:absolute;inset:0;background:radial-gradient(120px 60px at 85% 0%,color-mix(in srgb,var(--c) 35%,transparent),transparent 70%)}
.hl-city i{position:relative;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
.hl-city i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--c);animation:hl-ring 2.2s ease-out infinite}
@keyframes hl-ring{from{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(2.2)}}
.hl-city small{position:relative;font-weight:500;font-size:.78rem;color:var(--mute)}
.hl-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.hl-mq-track{display:flex;gap:56px;width:max-content;animation:hl-mq 35s linear infinite}
.hl-mq-track.hl-slow{gap:20px;animation-duration:55s}
.hl-mq-track.hl-rev{animation-direction:reverse}
.hl-marquee:hover .hl-mq-track{animation-play-state:paused}
@keyframes hl-mq{to{transform:translateX(50%)}}
.hl-logos span{font-family:var(--display);font-weight:800;font-size:1.6rem;color:rgba(255,255,255,.28);white-space:nowrap}

/* 3. Word reveal */
.hl-words{height:190vh}
.hl-words .hl-sticky::before{content:"";position:absolute;width:60vmin;height:60vmin;border-radius:50%;filter:blur(80px);
  background:radial-gradient(circle,rgba(139,92,246,.35),rgba(255,61,127,.15) 60%,transparent 70%);opacity:.9}
.hl-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hl-words-text{max-width:1080px;padding:0 28px;margin:0;text-align:center;font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,4.2vw,3.5rem);line-height:1.6}
.hl-words-text{position:relative}
.hl-words-text .w{color:rgba(255,255,255,.26);transition:color .3s}
.hl-words-text .w.on{color:var(--fg)}
.hl-words-text .w.on.hot{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* 4. Bento with cursor spotlight */
.hl-bento-sec{padding:120px 0}
.hl-bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(250px,auto);gap:16px}
.hl-tile{position:relative;border-radius:22px;padding:26px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  box-shadow:0 0 0 1px var(--line) inset;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.hl-tile::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,61,127,.55),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.hl-tile::after{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(255,61,127,.08),transparent 40%);
  opacity:0;transition:opacity .3s}
.hl-tile:hover::before,.hl-tile:hover::after{opacity:1}
.hl-tile h3{font-family:var(--display);font-weight:800;font-size:1.45rem;margin:18px 0 6px}
.hl-tile p{color:var(--mute);margin:0;font-size:.95rem}
.hl-t-path{grid-column:span 2}
.hl-t-report{grid-column:span 2}
.hl-viz{flex:1;display:flex;align-items:center;justify-content:center;min-height:120px}
/* path */
.hl-viz-path{gap:0}
.hl-viz-path i{font-style:normal;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1rem;flex:none;
  background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset}
.hl-viz-path i.d{background:rgba(34,197,94,.15);color:#4ade80;box-shadow:0 0 0 1px rgba(34,197,94,.35) inset}
.hl-viz-path i.a{background:var(--grad);color:#1a0610;box-shadow:0 0 30px rgba(255,61,127,.6);animation:hl-bob 2.4s ease-in-out infinite}
.hl-viz-path i.l{opacity:.5}
.hl-viz-path s{flex:1;max-width:70px;height:2px;background:linear-gradient(90deg,#4ade80,#4ade80)}
.hl-viz-path s.off{background:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 6px,transparent 6px 12px)}
@keyframes hl-bob{50%{transform:translateY(-6px)}}
/* waveform */
.hl-viz-wave{gap:5px}
.hl-viz-wave i{width:6px;border-radius:3px;background:linear-gradient(to top,#ff3d7f,#ffb020);height:20%;animation:hl-wave 1.2s ease-in-out infinite}
.hl-viz-wave i:nth-child(odd){animation-duration:.9s}.hl-viz-wave i:nth-child(3n){animation-duration:1.5s}
.hl-viz-wave i:nth-child(2){animation-delay:-.2s}.hl-viz-wave i:nth-child(4){animation-delay:-.5s}.hl-viz-wave i:nth-child(6){animation-delay:-.7s}
.hl-viz-wave i:nth-child(8){animation-delay:-.3s}.hl-viz-wave i:nth-child(10){animation-delay:-.9s}.hl-viz-wave i:nth-child(12){animation-delay:-.4s}
@keyframes hl-wave{50%{height:85%}}
/* avatars */
.hl-viz-avatars{position:relative}
.hl-viz-avatars i,.hl-viz-avatars b{font-style:normal;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin-left:-12px;
  border:3px solid #120e16;font-weight:800;background:linear-gradient(135deg,#ff3d7f,#8b5cf6)}
.hl-viz-avatars i:nth-child(2){background:linear-gradient(135deg,#ffb020,#ff3d7f)}.hl-viz-avatars i:nth-child(3){background:linear-gradient(135deg,#22c55e,#0ea5e9)}
.hl-viz-avatars i:nth-child(4){background:linear-gradient(135deg,#8b5cf6,#0ea5e9)}
.hl-viz-avatars b{background:#1c1622;color:var(--mute);font-size:.85rem}
.hl-ping{position:absolute;top:8px;left:8px;font-style:normal;font-size:.75rem;padding:3px 10px;border-radius:999px;background:rgba(255,61,127,.15);
  color:#ff8fb0;box-shadow:0 0 0 1px rgba(255,61,127,.35) inset;animation:hl-bob 3s ease-in-out infinite}
/* ring */
.hl-viz-ring{position:relative}
.hl-viz-ring svg{width:130px;height:130px;transform:rotate(-90deg)}
.hl-viz-ring circle{fill:none;stroke:rgba(255,255,255,.08);stroke-width:10}
.hl-viz-ring circle.v{stroke:url(#none);stroke:#ff3d7f;stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:314;transition:stroke-dashoffset 1.8s cubic-bezier(.2,.8,.2,1)}
.hl-tile.in .hl-viz-ring circle.v{stroke-dashoffset:79}
.hl-viz-ring b{position:absolute;font-family:var(--display);font-size:1.7rem}
/* qr */
.hl-viz-qr{width:120px;height:120px;margin:auto;flex:none;border-radius:12px;padding:10px;background:#fff;
  background-image:conic-gradient(#000 25%,transparent 0 50%,#000 0 75%,transparent 0);background-size:20px 20px;background-clip:content-box;
  box-shadow:0 0 40px rgba(255,176,32,.35);position:relative}
.hl-viz-qr::before,.hl-viz-qr::after{content:"";position:absolute;width:34px;height:34px;border:7px solid #000;background:#fff;top:8px;right:8px;border-radius:4px}
.hl-viz-qr::after{top:auto;bottom:8px;left:8px;right:auto}
/* bars */
.hl-viz-bars{align-items:flex-end;gap:14px;height:140px;padding:0 10%}
.hl-viz-bars i{flex:1;height:var(--h);border-radius:8px 8px 3px 3px;background:linear-gradient(to top,rgba(255,61,127,.25),#ff6a95);
  transform-origin:bottom;transform:scaleY(.05);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.hl-tile.in .hl-viz-bars i{transform:scaleY(1)}
.hl-viz-bars i:nth-child(2){transition-delay:.1s}.hl-viz-bars i:nth-child(3){transition-delay:.2s}.hl-viz-bars i:nth-child(4){transition-delay:.3s}
.hl-viz-bars i:nth-child(5){transition-delay:.4s}.hl-viz-bars i:nth-child(6){transition-delay:.5s}

/* 5. Stats */
.hl-stats{padding:40px 0 120px}
.hl-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hl-stat{padding:40px 16px;text-align:center;border-left:1px solid var(--line)}
.hl-stat:last-child{border-left:0}
.hl-stat b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,5vw,4.4rem);line-height:1.15;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.55));-webkit-background-clip:text;background-clip:text;color:transparent}
.hl-stat sup{font-size:.5em;top:-.9em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hl-stat span{color:var(--mute)}

/* 6. Story */
.hl-story{padding:40px 0}
.hl-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.hl-step{min-height:86vh;display:flex;flex-direction:column;justify-content:center;opacity:.2;transform:translateY(20px);transition:opacity .6s,transform .6s}
.hl-step.is-on{opacity:1;transform:none}
.hl-step em{font-style:normal;font-weight:600;color:var(--rose);font-size:.9rem}
.hl-step h3{font-family:var(--display);font-weight:900;font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.3;margin:.4rem 0 1rem}
.hl-step p{font-size:1.12rem;color:var(--mute);max-width:470px}
.hl-story-device{position:sticky;top:calc(50vh - 300px);height:600px;display:flex;justify-content:center}
.hl-phone{width:300px;height:600px;border-radius:48px;background:#0b0a0f;padding:12px;position:relative;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.18),0 0 0 9px #0b0a0f,0 0 0 10px rgba(255,255,255,.08),0 50px 120px -10px rgba(255,61,127,.45)}
.hl-notch{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:96px;height:28px;background:#000;border-radius:20px;z-index:3}
.hl-screens{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:#121016;color:var(--fg)}
.hl-screen{position:absolute;inset:0;padding:64px 14px 14px;opacity:0;transform:scale(.96) translateY(14px);transition:opacity .6s,transform .6s;
  display:flex;flex-direction:column;gap:9px;font-size:.82rem;line-height:1.5}
.hl-screen.is-on{opacity:1;transform:none}
.hl-app-top{font-family:var(--display);font-weight:800;font-size:1.15rem;margin-bottom:4px}
.hl-mod{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:10px;display:grid;grid-template-columns:30px 1fr;column-gap:8px;position:relative;overflow:hidden}
.hl-mod i{grid-row:span 2;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-size:.8rem}
.hl-mod small{color:var(--mute)}
.hl-mod.done i{background:rgba(34,197,94,.18);color:#4ade80}
.hl-mod.open{border-color:rgba(255,61,127,.45);box-shadow:0 0 24px -8px rgba(255,61,127,.6)}
.hl-mod.open i{background:var(--grad);color:#1a0610}
.hl-mod.open s{position:absolute;bottom:0;right:0;height:3px;width:var(--p);background:var(--grad)}
.hl-mod.lock{opacity:.5}
.hl-mod.special{background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(255,61,127,.25));border-color:rgba(139,92,246,.5)}
.hl-mod.special i{background:rgba(255,255,255,.12);color:#ffd66b}
.hl-video{width:100%;border-radius:14px;background:#000;aspect-ratio:16/9;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.hl-chips{display:flex;flex-wrap:wrap;gap:6px}
.hl-chips span{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:.74rem}
.hl-audio{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;align-items:center;gap:10px}
.hl-audio i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--grad);color:#1a0610;display:grid;place-items:center}
.hl-audio s{flex:1;height:4px;border-radius:2px;background:linear-gradient(90deg,#ff3d7f 0 45%,rgba(255,255,255,.15) 45%)}
.hl-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.hl-kpis div{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;text-align:center;padding:8px 4px}
.hl-kpis b{display:block;font-family:var(--display);font-size:1.3rem}
.hl-kpis small{color:var(--mute)}
.hl-kpis .warn b{color:#ff6a95}
.hl-person{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:8px 10px;display:flex;align-items:center;gap:8px}
.hl-person i{font-style:normal;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#ff3d7f,#8b5cf6);display:grid;place-items:center;font-weight:800}
.hl-person b{flex:1;font-weight:600}
.hl-person span{font-size:.68rem;border-radius:999px;padding:2px 8px}
.hl-person .ok{background:rgba(34,197,94,.15);color:#4ade80}.hl-person .bad{background:rgba(255,61,127,.15);color:#ff8fb0}.hl-person .mid{background:rgba(255,176,32,.15);color:#ffcf70}
.hl-comp{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:9px 11px;display:grid;grid-template-columns:1fr auto;row-gap:5px}
.hl-comp b{font-weight:600}.hl-comp small{color:#ffcf70;font-weight:700;text-align:left}
.hl-lv{grid-column:1/-1;display:flex;gap:4px}
.hl-lv i{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.08)}
.hl-lv i.on{background:var(--grad)}
.hl-spark{width:100%;height:70px;margin-top:auto}
.hl-spark path{fill:none;stroke:#ff3d7f;stroke-width:3;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.6s;
  filter:drop-shadow(0 0 6px rgba(255,61,127,.8))}
.hl-screen.is-on .hl-spark path{stroke-dashoffset:0}
.hl-cert{width:100%;border-radius:10px;box-shadow:0 20px 40px rgba(0,0,0,.5);margin-top:16px;transform:rotate(-2deg)}
.hl-verify{margin-top:14px;background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.3);border-radius:12px;padding:10px;font-weight:700;text-align:center}

/* 7. Horizontal pinned cards */
.hl-hscroll .hl-sticky{flex-direction:column;align-items:stretch;justify-content:center}
.hl-hhead{width:100%;text-align:center}
.hl-hhead .hl-h2{margin-bottom:2rem}
.hl-track{display:flex;gap:20px;padding:0 6vw;will-change:transform}
.hl-card{position:relative;flex:0 0 min(80vw,400px);height:min(56vh,470px);border-radius:24px;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff!important;background:linear-gradient(180deg,rgba(6,5,10,.05) 20%,rgba(6,5,10,.95)),var(--img) center/cover;
  box-shadow:0 0 0 1px var(--line) inset,0 30px 70px -30px rgba(0,0,0,.9);transition:transform .4s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.hl-card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);
  transform:translateX(-100%);transition:transform .8s}
.hl-card:hover{transform:translateY(-8px)}
.hl-card:hover::after{transform:translateX(100%)}
.hl-card span{align-self:flex-start;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:2px 12px;font-size:.78rem}
.hl-card h3{font-family:var(--display);font-weight:800;font-size:1.8rem;line-height:1.35;margin:.7rem 0 .3rem}
.hl-card p{margin:0;color:rgba(255,255,255,.75)}
.hl-card-more{background:linear-gradient(135deg,#b0244f,#ff3d7f 50%,#ffb020);justify-content:center;align-items:center;text-align:center}

/* 8. Voices */
.hl-voices{padding:120px 0;overflow:hidden}
.hl-voices .hl-marquee{margin-bottom:18px}
.hl-voices figure{margin:0;width:380px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:20px;padding:24px}
.hl-voices blockquote{margin:0 0 1rem;font-size:1.05rem}
.hl-voices figcaption{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:.88rem}
.hl-voices figcaption i{font-style:normal;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff3d7f,#ffb020);color:#1a0610;font-weight:800}

/* 9. Final card with rotating gradient border */
.hl-final{padding:60px 0 40px}
.hl-final-card{position:relative;border-radius:28px;padding:80px 30px;text-align:center;overflow:hidden;isolation:isolate;background:#0d0a12}
.hl-final-glow{position:absolute;inset:-60%;z-index:-2;background:conic-gradient(from 0deg,#ff3d7f,#ffb020,#8b5cf6,#ff3d7f);animation:hl-spin 8s linear infinite}
.hl-final-card::after{content:"";position:absolute;inset:1.5px;border-radius:27px;z-index:-1;
  background:radial-gradient(80% 120% at 50% 0%,rgba(255,61,127,.22),transparent 60%),#0d0a12}
@keyframes hl-spin{to{transform:rotate(360deg)}}
.hl-final-title{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,5.5vw,4.4rem);line-height:1.3;margin:0}
.hl-final-card p{max-width:600px;margin:1rem auto 0;color:var(--mute);font-size:1.1rem}
.hl-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 26px;margin-top:70px;padding:28px 0 10px;border-top:1px solid var(--line);color:var(--mute);font-size:.88rem}
.hl-foot img{height:28px;opacity:.85}

/* Reveal on scroll */
.hl-reveal{opacity:0;transform:translateY(36px);filter:blur(6px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s}
.hl-reveal.in{opacity:1;transform:none;filter:none}
.hl-bento .hl-reveal:nth-child(2),.hl-stat-grid .hl-reveal:nth-child(2){transition-delay:.08s}
.hl-bento .hl-reveal:nth-child(3),.hl-stat-grid .hl-reveal:nth-child(3){transition-delay:.16s}
.hl-bento .hl-reveal:nth-child(4),.hl-stat-grid .hl-reveal:nth-child(4){transition-delay:.24s}
.hl-bento .hl-reveal:nth-child(5){transition-delay:.32s}.hl-bento .hl-reveal:nth-child(6){transition-delay:.4s}

/* Responsive */
@media (max-width:980px){
  .hl-bento{grid-template-columns:1fr 1fr}
  .hl-t-path,.hl-t-report{grid-column:span 2}
  .hl-shot-body{grid-template-columns:1fr}
  .hl-shot-side{display:none}
  .hl-shot-kpis{grid-template-columns:repeat(2,1fr)}
  .hl-story-grid{grid-template-columns:1fr}
  .hl-story-device{order:-1;top:64px;height:430px;z-index:1}
  .hl-phone{transform:scale(.7);transform-origin:top center}
  .hl-step{min-height:72vh;position:relative;z-index:2;background:linear-gradient(180deg,transparent,rgba(6,5,10,.92) 25%);padding:24px;border-radius:20px}
  .hl-stat-grid{grid-template-columns:repeat(2,1fr)}
  .hl-stat:nth-child(2){border-left:0}
  .hl-stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:640px){
  .hl-hero{padding-top:120px}
  .hl-bento{grid-template-columns:1fr}
  .hl-t-path,.hl-t-report{grid-column:auto}
  .hl-shot-row{grid-template-columns:1fr}
  .hl-shot-list{display:none}
  .hl-words{height:150vh}
  .hl-city{font-size:1rem;padding:10px 16px}
  .hl-voices figure{width:290px}
  .hl-logos span{font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  .hl *,.hl *::before,.hl *::after{animation:none!important;transition:none!important}
  .hl-reveal{opacity:1;transform:none;filter:none}
}