/* =========================================================
   hellosamvit · Ultimate Gen AI Course landing page
   Everything is scoped under .hs so it won't clash with Graphy.
   ========================================================= */
.hs{
  --bg:#0B0B0C; --line:rgba(255,255,255,.08);
  --white:#FFFFFF; --grey-1:#EFEFEF; --grey-2:#A1A1A6; --grey-3:#6E6E73;
  --purple:#794EFF; --lavender:#A98DFA;
  --glass:rgba(255,255,255,.045); --glass-strong:rgba(255,255,255,.07); --glass-line:rgba(255,255,255,.10);
  --serif:'Instrument Serif', Georgia, serif;
  --display:'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  --max:1180px;
  --ease:cubic-bezier(.2,.8,.2,1);
  position:relative; isolation:isolate; overflow-x:clip;
  background:var(--bg); color:var(--grey-2);
  font-family:var(--body); font-weight:300; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.hs *, .hs *::before, .hs *::after{box-sizing:border-box}
.hs :where(img, video){display:block; max-width:100%}
.hs :where(a){color:inherit; text-decoration:none}
.hs :where(h1, h2, h3, p, blockquote, figure, ol){margin:0}
.hs :where(ul, ol){margin:0; padding:0; list-style:none}
.hs :where(button){font:inherit; color:inherit; background:none; border:0; cursor:pointer}

/* Film grain */
.hs::before{
  content:""; position:fixed; inset:-50%; z-index:-1; pointer-events:none; opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:hs-grain 1.2s steps(6) infinite;
}
@keyframes hs-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.hs-glow{position:absolute; z-index:-1; pointer-events:none; border-radius:50%; filter:blur(90px); opacity:.55}

/* Scroll progress */
.hs-progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:70; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg, var(--purple), var(--lavender)); box-shadow:0 0 12px rgba(121,78,255,.8)}

/* Layout */
.hs-wrap{width:min(var(--max), 100% - 32px); margin-inline:auto}
.hs-section{position:relative; padding:128px 0}
.hs-section + .hs-section{border-top:1px solid var(--line)}
.hs-stack-y{display:flex; flex-direction:column; gap:56px}

/* Type */
.hs-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:500; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--lavender);
}
.hs-eyebrow::before{content:""; width:28px; height:1px; background:currentColor; opacity:.7}
.hs-h2{
  font-family:var(--display); font-weight:700; color:var(--white);
  font-size:clamp(34px, 5.2vw, 64px); line-height:1.04; letter-spacing:-.035em; text-wrap:balance;
}
.hs-h3{font-family:var(--display); font-weight:700; color:var(--white); font-size:clamp(28px,3.6vw,44px); line-height:1.08; letter-spacing:-.03em; text-wrap:balance}
.hs-it{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; color:var(--lavender)}
.hs-lead{font-size:clamp(16px,1.6vw,19px); color:var(--grey-2); max-width:620px}
.hs-head{display:flex; flex-direction:column; align-items:flex-start; gap:18px; max-width:880px}
.hs-head.center{align-items:center; text-align:center; margin-inline:auto}

/* Heading mask reveal */
.hs.is-js .hs-mask .m{display:inline-block; overflow:hidden; vertical-align:top; padding:0 .06em .12em; margin:0 -.06em -.12em}
.hs.is-js .hs-mask .mw{display:inline-block; transform:translateY(110%) rotate(4deg); transform-origin:0 100%; transition:transform 1s var(--ease); transition-delay:var(--d,0s)}
.hs.is-js .hs-mask.play .mw{transform:none}

/* Buttons */
.hs-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:14px;
  padding:18px 30px; border-radius:999px; overflow:hidden;
  background:linear-gradient(180deg, #8A63FF 0%, var(--purple) 55%, #5B33E6 100%);
  color:var(--white); font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-.01em;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 18px 50px -12px rgba(121,78,255,.65);
  transition:transform .35s var(--ease), box-shadow .35s;
}
.hs-btn::after{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  animation:hs-shine 4.5s ease-in-out infinite;
}
@keyframes hs-shine{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.hs-btn:hover{box-shadow:0 0 0 1px rgba(255,255,255,.2) inset, 0 24px 60px -10px rgba(121,78,255,.85)}
.hs-btn .arrow{transition:transform .35s var(--ease)}
.hs-btn:hover .arrow{transform:translateX(5px)}
.hs-btn:focus-visible, .hs-ghost:focus-visible, .hs-nav a:focus-visible, .hs-faq summary:focus-visible{outline:2px solid var(--lavender); outline-offset:4px}
.hs-price-old{font-family:var(--body); font-weight:400; font-size:.86em; color:rgba(255,255,255,.62); text-decoration:line-through; text-decoration-thickness:1.5px}
.hs-price-new{font-weight:800}
.hs-btn .sep{width:1px; height:18px; background:rgba(255,255,255,.35)}
.hs-ghost{
  display:inline-flex; align-items:center; gap:10px; padding:15px 24px; border-radius:999px;
  border:1px solid var(--glass-line); background:var(--glass); color:var(--white);
  font-family:var(--display); font-weight:600; font-size:15px; transition:background .3s, border-color .3s;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.hs-ghost:hover{background:var(--glass-strong); border-color:rgba(169,141,250,.5)}
.hs-ghost svg{transition:transform .3s}
.hs-ghost:hover svg{transform:translateX(4px)}
.hs-cta-note{font-size:13px; letter-spacing:.04em; color:var(--grey-3); text-align:center}
.hs-cta-note b{color:var(--grey-1); font-weight:500}

/* Cursor spotlight on cards */
.hs-spot{position:relative; --mx:50%; --my:50%}
.hs-spot::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1; opacity:0; transition:opacity .4s; background:radial-gradient(380px circle at var(--mx) var(--my), rgba(169,141,250,.16), transparent 45%)}
.hs-spot:hover::after{opacity:1}

/* Nav */
.hs-nav{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:50;
  width:min(var(--max), 100% - 24px); display:flex; align-items:center; justify-content:space-between;
  padding:10px 10px 10px 12px; border-radius:999px; border:1px solid transparent;
  transition:background .4s, border-color .4s;
}
.hs-nav.is-scrolled{background:rgba(14,14,16,.62); border-color:var(--glass-line); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%)}
.hs-brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.04em; color:var(--white)}
.hs-brand img{width:34px; height:34px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px rgba(169,141,250,.45)}
.hs-nav-links{display:flex; align-items:center; gap:8px}
.hs-nav-links .link{padding:10px 16px; font-family:var(--display); font-weight:500; font-size:15px; color:var(--grey-1); border-radius:999px; transition:color .25s, background .25s}
.hs-nav-links .link:hover{color:var(--white); background:var(--glass)}
.hs-nav .hs-btn{padding:11px 20px; font-size:14px; gap:10px; box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 10px 30px -10px rgba(121,78,255,.7)}

/* ===== 1 · HERO ===== */
.hs-hero{padding:150px 0 110px; text-align:center; overflow:hidden}
.hs-aurora{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.hs-aurora span{position:absolute; border-radius:50%; filter:blur(100px); opacity:.5; mix-blend-mode:screen}
.hs-aurora span:nth-child(1){width:620px; height:420px; left:50%; top:-120px; margin-left:-310px; background:radial-gradient(closest-side, rgba(121,78,255,.75), transparent); animation:hs-drift1 14s ease-in-out infinite alternate}
.hs-aurora span:nth-child(2){width:420px; height:420px; left:8%; top:280px; background:radial-gradient(closest-side, rgba(169,141,250,.45), transparent); animation:hs-drift2 18s ease-in-out infinite alternate}
.hs-aurora span:nth-child(3){width:460px; height:380px; right:4%; top:420px; background:radial-gradient(closest-side, rgba(90,50,230,.55), transparent); animation:hs-drift1 16s ease-in-out infinite alternate-reverse}
@keyframes hs-drift1{to{transform:translate(80px, 60px) scale(1.15)}}
@keyframes hs-drift2{to{transform:translate(-60px, -80px) scale(1.2)}}

.hs-hero-title{
  font-family:var(--display); font-weight:800; color:var(--white); white-space:nowrap;
  font-size:clamp(17px, 5.6vw, 58px); line-height:1.05; letter-spacing:-.015em;
}
.hs-hero-title .ch, .hs-hero-title .solid{
  background:linear-gradient(180deg, #FFFFFF 15%, #EFEFEF 55%, var(--lavender) 110%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hs.is-js .hs-hero-title .solid{background:none; color:inherit}
.hs-hero-ft{
  margin-top:clamp(10px, 1.4vw, 16px);
  font-family:var(--display); font-weight:700; font-size:clamp(20px, 2.6vw, 30px); letter-spacing:-.02em; color:var(--grey-1);
}
.hs-hero-ft .ft{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--lavender); font-size:1.1em; margin-right:.12em}
.hs-hero-fw{
  margin-top:clamp(36px, 5vw, 64px);
  font-family:var(--serif); font-style:italic; font-weight:400; color:var(--lavender);
  font-size:clamp(46px, 7.4vw, 104px); line-height:.95; letter-spacing:-.02em;
}
.hs-hero-line{
  max-width:820px; margin:22px auto 0;
  font-family:var(--display); font-weight:700; color:var(--white);
  font-size:clamp(20px, 2.6vw, 30px); line-height:1.32; letter-spacing:-.02em; text-wrap:balance;
}
.hs-hero-line .glow{transition:color 1.2s, text-shadow 1.2s}
.hs-hero-line .glow.lit{color:var(--lavender); text-shadow:0 0 22px rgba(121,78,255,.9), 0 0 48px rgba(121,78,255,.5); animation:hs-breathe 3.2s ease-in-out 1.2s infinite}
@keyframes hs-breathe{50%{text-shadow:0 0 12px rgba(121,78,255,.6), 0 0 26px rgba(121,78,255,.3)}}

/* Text animations */
.hs.is-js .hs-split .ch, .hs.is-js .hs-split .w{display:inline-block; opacity:0; filter:blur(14px); transform:translateY(.35em)}
.hs.is-js .hs-hero-title.hs-split .ch{transform:translateY(.6em) rotate(8deg) scale(.9)}
.hs.is-js .hs-split.play .ch, .hs.is-js .hs-split.play .w{animation:hs-in 1s var(--ease) forwards; animation-delay:var(--d,0s)}
@keyframes hs-in{to{opacity:1; filter:blur(0); transform:none}}
.hs.is-js .hs-fade{opacity:0; transform:translateY(16px)}
.hs.is-js .hs-fade.play{animation:hs-in 1s var(--ease) forwards; animation-delay:var(--d,0s)}

/* Main video */
.hs-video{
  position:relative; margin:56px auto 0; max-width:960px; width:100%; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden;
  background:radial-gradient(120% 90% at 50% 120%, rgba(121,78,255,.55), transparent 60%), linear-gradient(180deg, #151418 0%, #0E0D12 100%);
  border:1px solid var(--glass-line);
  box-shadow:0 60px 120px -40px rgba(121,78,255,.45);
}
.hs-video::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(160deg, rgba(169,141,250,.7), transparent 40%, transparent 60%, rgba(121,78,255,.6)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2}
.hs-video img.poster, .hs-video video, .hs-video iframe{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0}
.hs-play{position:absolute; inset:0; z-index:3; display:grid; place-items:center; width:100%}
.hs-play span{
  position:relative; width:96px; height:96px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg, #8A63FF, var(--purple)); box-shadow:0 0 0 12px rgba(121,78,255,.18), 0 20px 60px rgba(121,78,255,.6);
  transition:transform .4s var(--ease);
}
.hs-play span::before{content:""; position:absolute; inset:-12px; border-radius:50%; border:1px solid rgba(169,141,250,.6); animation:hs-pulse 2.4s ease-out infinite}
@keyframes hs-pulse{0%{transform:scale(1); opacity:.9}100%{transform:scale(1.6); opacity:0}}
.hs-play:hover span{transform:scale(1.07)}
.hs-play svg{margin-left:5px}

/* Journey */
.hs-journey{max-width:960px; margin:30px auto 0; padding:26px 28px 24px; border-radius:var(--r-lg); background:rgba(255,255,255,.03); border:1px solid var(--glass-line); text-align:left; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.hs-journey ol{position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:24px}
.hs-journey .rail{position:absolute; left:8px; right:calc(33.333% - 16px); top:8px; height:2px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden}
.hs-journey .rail i{position:absolute; inset:0; background:linear-gradient(90deg, var(--purple), var(--lavender)); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.8s var(--ease) .2s; box-shadow:0 0 14px var(--purple)}
.hs-journey.play .rail i{transform:none}
.hs-journey li{position:relative; display:flex; flex-direction:column; gap:6px; padding-top:30px}
.hs-journey .node{position:absolute; top:0; left:0; width:18px; height:18px; border-radius:50%; background:#16151B; border:2px solid rgba(255,255,255,.18); transition:background .5s, border-color .5s, box-shadow .5s; transition-delay:var(--d,0s)}
.hs-journey.play .node{background:var(--purple); border-color:var(--lavender); box-shadow:0 0 0 6px rgba(121,78,255,.18), 0 0 20px rgba(121,78,255,.8)}
.hs-journey .lvl{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--grey-3)}
.hs-journey h3{font-family:var(--display); font-weight:800; font-size:clamp(20px,2.2vw,26px); letter-spacing:-.03em; color:var(--white); line-height:1.1}
.hs-journey li:last-child h3{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--lavender); font-size:clamp(24px,2.6vw,31px)}
.hs-journey .what{font-size:14px; color:var(--grey-2); line-height:1.55}
.hs-journey-note{margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-size:13.5px; color:var(--grey-3)}
.hs-journey-note b{color:var(--grey-1); font-weight:500}

/* Hero price block */
.hs-buy{max-width:760px; margin:48px auto 0; display:flex; flex-direction:column; align-items:center; gap:20px}
.hs-buy-row{display:flex; align-items:baseline; justify-content:center; gap:18px}
.hs-buy-row .now{font-family:var(--display); font-weight:800; font-size:clamp(58px, 8vw, 88px); line-height:1; letter-spacing:-.05em; color:var(--white); text-shadow:0 0 40px rgba(121,78,255,.45)}
.hs-buy-row .was{font-size:clamp(20px, 2.4vw, 26px); color:var(--grey-3); text-decoration:line-through; text-decoration-color:var(--lavender); text-decoration-thickness:2px}
.hs-buy .hs-btn{width:100%; max-width:600px; font-size:clamp(17px,1.8vw,20px); padding:22px 28px}
.hs-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px}
.hs-chips li{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; font-size:13.5px; color:var(--grey-1); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
.hs-chips li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--lavender); box-shadow:0 0 8px var(--lavender)}

/* Video walls */
.hs-wall{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; perspective:1200px}
.hs-vcard{
  position:relative; aspect-ratio:9/16; border-radius:var(--r-md); overflow:hidden; transform-style:preserve-3d;
  background:linear-gradient(180deg, #17161B 0%, #0F0E13 100%); border:1px solid var(--glass-line);
  transition:border-color .4s;
}
.hs-vcard:hover{border-color:rgba(169,141,250,.45)}
.hs-vcard video, .hs-vcard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hs-vcard .ph{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:20px;
  background:radial-gradient(90% 60% at 50% 110%, rgba(121,78,255,.45), transparent 70%), radial-gradient(60% 40% at 20% 0%, rgba(169,141,250,.12), transparent 70%);
}
.hs-vcard .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.06) 50%, transparent 65%); background-size:250% 100%; animation:hs-sheen 3.5s linear infinite}
@keyframes hs-sheen{from{background-position:120% 0}to{background-position:-120% 0}}
.hs-vcard .ph i{display:grid; place-items:center; width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); margin:0 auto 12px}
.hs-vcard .ph small{display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-3)}
.hs-vcard iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3}
.hs-vplay{position:absolute; inset:0; z-index:2; display:grid; place-items:center; width:100%; background:none}
.hs-vplay span{width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:rgba(121,78,255,.85); box-shadow:0 0 0 8px rgba(121,78,255,.2), 0 14px 40px rgba(121,78,255,.6); transition:transform .35s var(--ease)}
.hs-vplay:hover span{transform:scale(1.08)}
.hs-vplay svg{margin-left:3px}
.hs-vcard .shade{position:absolute; inset:0 0 auto 0; height:30%; background:linear-gradient(180deg, rgba(8,8,10,.6), transparent); pointer-events:none}
.hs-vcard .top{position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; gap:8px; z-index:2}
.hs-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; white-space:nowrap;
  font-family:var(--display); font-weight:600; font-size:11.5px; letter-spacing:.01em; color:var(--white);
  background:rgba(20,18,26,.55); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.hs-chip.ai{background:rgba(121,78,255,.35); border-color:rgba(169,141,250,.55)}
.hs-chip .dot{width:6px; height:6px; border-radius:50%; background:var(--lavender); box-shadow:0 0 10px var(--lavender)}
/* AI Realism: widescreen cinema grid (featured card spans two rows) */
.hs-cinema{display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px; perspective:1200px}
.hs-cinema .hs-vcard{aspect-ratio:16/9; border-radius:var(--r-md)}
.hs-cinema .hs-vcard.feat{grid-row:span 2; aspect-ratio:auto; min-height:100%}
.hs-cinema .hs-vcard:not(.feat) .hs-vplay span{width:46px; height:46px}
.hs-cinema .hs-vcard.feat .hs-vplay span{width:72px; height:72px}
.hs-wall-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px}
.hs-wall-foot p{max-width:560px; color:var(--grey-2)}
.hs-wall-foot p em{font-family:var(--serif); font-style:italic; font-size:1.18em; color:var(--grey-1)}

/* 4 · Honest promise */
.hs-promise-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:end}
.hs-promise-body{display:flex; flex-direction:column; gap:14px}
.hs-promise-body p{color:var(--grey-2); font-size:clamp(16px,1.5vw,18.5px)}
.hs-promise-body strong{color:var(--white); font-weight:500}
.hs-pull{
  position:relative; padding:34px 34px 30px; border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.hs-pull .q{display:block; height:44px; margin:-6px 0 6px -4px; font-family:var(--serif); font-size:110px; line-height:1; color:var(--purple)}
.hs-pull .q-end{height:40px; margin:10px -4px -18px 0; text-align:right; line-height:.8}
.hs-pull p{font-family:var(--serif); font-style:italic; font-size:clamp(24px,2.6vw,34px); line-height:1.2; color:var(--white)}
.hs-pull p span{color:var(--lavender)}
.hs-tagline{display:flex; align-items:center; gap:16px; font-family:var(--display); font-weight:600; color:var(--grey-1); letter-spacing:-.01em}
.hs-tagline::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--glass-line), transparent)}

/* 5 · For / Not for */
.hs-fit{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:22px; align-items:stretch}
.hs-fit > *{min-width:0}
.hs-panel{border-radius:var(--r-lg); padding:38px; background:var(--glass); border:1px solid var(--glass-line); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px)}
.hs-panel h3{font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-.03em; color:var(--white); display:flex; align-items:center; gap:12px}
.hs-panel h3 .badge{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--purple)}
.hs-panel.not h3 .badge{background:rgba(255,255,255,.08); border:1px solid var(--glass-line)}
/* Fit check: "for you" panel glows, role cards power up one by one */
.hs-panel.yes{background:radial-gradient(90% 70% at 0% 0%, rgba(121,78,255,.18), transparent 60%), radial-gradient(60% 50% at 100% 100%, rgba(169,141,250,.08), transparent 70%), var(--glass); border-color:rgba(169,141,250,.18)}
.hs-panel.yes h3 .badge{box-shadow:0 0 0 0 rgba(169,141,250,.6); animation:hs-ping 2.4s ease-out infinite}
.hs-roles{margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.hs-role{position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; gap:16px; padding:18px 54px 18px 18px; border-radius:var(--r-sm);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); border:1px solid rgba(255,255,255,.06); font-size:15px;
  transition:transform .45s var(--ease), border-color .6s, box-shadow .8s; transition-delay:0s, calc(var(--d,0s) + .9s), calc(var(--d,0s) + .9s)}
/* scan beam that sweeps across each card */
.hs-role::before{content:""; position:absolute; top:0; bottom:0; left:0; width:45%; z-index:2; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, transparent, rgba(121,78,255,.25) 35%, rgba(255,255,255,.55) 50%, rgba(121,78,255,.25) 65%, transparent); transform:translateX(-100%) skewX(-18deg)}
/* spinning glow border, switched on after the scan */
.hs-role::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:1; pointer-events:none; opacity:0;
  background:conic-gradient(from var(--a,0deg), transparent 0 55%, var(--lavender) 72%, var(--purple) 84%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:hs-spin 5s linear infinite; animation-delay:calc(var(--d,0s) * -9); transition:opacity .8s calc(var(--d,0s) + .9s)}
.hs-role .ic{flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:13px; color:var(--grey-3); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  transition:color .5s, background .5s, border-color .5s, box-shadow .5s, transform .45s var(--ease); transition-delay:calc(var(--d,0s) + .75s), calc(var(--d,0s) + .75s), calc(var(--d,0s) + .75s), calc(var(--d,0s) + .75s), 0s}
.hs-role .txt{display:flex; flex-direction:column; gap:4px; min-width:0}
.hs-role .old{position:relative; align-self:flex-start; color:var(--grey-2); font-size:13.5px; font-weight:400}
.hs-role .old::after{content:""; position:absolute; left:-2px; right:-2px; top:55%; height:1.5px; background:var(--lavender); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease) var(--d,0s)}
.hs-role .new{font-family:var(--display); font-weight:700; font-size:17px; line-height:1.2; color:var(--white); letter-spacing:-.02em; opacity:0; filter:blur(6px); transform:translateY(8px); transition:opacity .5s, filter .5s, transform .5s var(--ease); transition-delay:calc(var(--d,0s) + .7s)}
.hs-role .new em{font-family:var(--serif); font-weight:400; font-style:italic; color:var(--lavender); font-size:1.1em}
.hs-role .up{position:absolute; top:12px; right:12px; z-index:3; padding:3px 8px; border-radius:999px; font-family:var(--display); font-weight:700; font-size:10.5px; letter-spacing:.04em; color:#fff;
  background:linear-gradient(135deg, var(--purple), #4B2BC0); box-shadow:0 0 14px rgba(121,78,255,.7); opacity:0; transform:scale(.4) rotate(-12deg);
  transition:opacity .3s, transform .5s cubic-bezier(.3,1.6,.5,1); transition-delay:calc(var(--d,0s) + 1s)}
/* powered-up state */
.hs-roles.play .hs-role, .hs:not(.is-js) .hs-role{border-color:transparent; box-shadow:inset 80px 0 90px -60px rgba(121,78,255,.32), 0 18px 40px -26px rgba(121,78,255,.7)}
.hs-roles.play .hs-role::before{animation:hs-scan .85s var(--ease) calc(var(--d,0s) + .3s) both}
.hs-roles.play .hs-role::after, .hs:not(.is-js) .hs-role::after{opacity:1}
.hs-roles.play .ic, .hs:not(.is-js) .hs-role .ic{color:#fff; background:linear-gradient(135deg, var(--purple), #3F23A8); border-color:rgba(169,141,250,.6); box-shadow:0 0 26px -2px rgba(121,78,255,.65)}
.hs-roles.play .old::after, .hs:not(.is-js) .hs-role .old::after{transform:scaleX(1)}
.hs-roles.play .new, .hs:not(.is-js) .hs-role .new{opacity:1; filter:none; transform:none}
.hs-roles.play .up, .hs:not(.is-js) .hs-role .up{opacity:1; transform:none}
.hs-role:hover{transform:translateY(-3px)}
.hs-role:hover .ic{transform:rotate(-8deg) scale(1.08)}
@keyframes hs-scan{0%{opacity:0; transform:translateX(-100%) skewX(-18deg)}15%{opacity:1}85%{opacity:1}100%{opacity:0; transform:translateX(260%) skewX(-18deg)}}
/* "Also for" ticker */
.hs-also{margin-top:28px}
.hs-also p{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--grey-3); margin-bottom:12px}
.hs-also-rows{display:flex; flex-direction:column; gap:10px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.hs-also-track{display:flex; gap:10px; width:max-content; animation:hs-marq-s 32s linear infinite}
.hs-also-track.rev{animation-direction:reverse; animation-duration:38s}
.hs-also-rows:hover .hs-also-track{animation-play-state:paused}
@keyframes hs-marq-s{to{transform:translateX(calc(-50% - 5px))}}
.hs-also li{display:inline-flex; align-items:center; gap:9px; white-space:nowrap; padding:10px 16px; border-radius:999px; font-size:14px; color:var(--grey-1); background:rgba(121,78,255,.1); border:1px solid rgba(121,78,255,.28); transition:background .3s, border-color .3s, box-shadow .3s}
.hs-also li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--lavender); box-shadow:0 0 8px var(--lavender)}
.hs-also li:hover{background:rgba(121,78,255,.24); border-color:rgba(169,141,250,.7); box-shadow:0 0 22px -4px rgba(121,78,255,.7)}
.hs-also li b{font-weight:600; color:#fff}
.hs-also li:has(b){background:linear-gradient(135deg, rgba(121,78,255,.55), rgba(75,43,192,.45)); border-color:rgba(169,141,250,.7)}
/* "NOT for you": cold, hatched, a little stubborn */
.hs-panel.not{background:repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 12px), rgba(255,255,255,.02)}
.hs-not-list{margin-top:28px; display:grid; gap:12px}
.hs-not-list li{display:flex; gap:14px; align-items:flex-start; padding:16px; border-radius:var(--r-sm); background:rgba(10,10,12,.55); border:1px solid rgba(255,255,255,.05); color:var(--grey-2); font-size:15.5px; line-height:1.45}
.hs-not-list .x{flex:none; display:grid; place-items:center; width:26px; height:26px; margin-top:-1px; border-radius:50%; color:#FF6B6B; background:rgba(255,107,107,.08); border:1px solid rgba(255,107,107,.28)}
.hs.is-js .hs-not-list .x{opacity:0; transform:scale(.3) rotate(-120deg); transition:opacity .4s, transform .6s cubic-bezier(.3,1.6,.5,1); transition-delay:var(--d,0s)}
.hs.is-js .hs-panel.not.play .hs-not-list .x{opacity:1; transform:none}
.hs-not-list li:hover{border-color:rgba(255,107,107,.22)}
.hs-not-list li:hover .x{animation:hs-nope .45s ease}
@keyframes hs-nope{0%,100%{translate:0}20%{translate:-4px}40%{translate:4px}60%{translate:-3px}80%{translate:2px}}

/* 6 · Learners + Ratings */
.hs-ratings-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px}
.hs-ratings-head .hs-head{gap:14px}
.hs-marquee{display:flex; flex-direction:column; gap:18px; margin-inline:calc(50% - 50vw); padding-block:6px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent)}
.hs-track{display:flex; gap:18px; width:max-content; animation:hs-marq var(--dur, 70s) linear infinite}
.hs-track.rev{animation-direction:reverse}
.hs-marquee:hover .hs-track{animation-play-state:paused}
@keyframes hs-marq{to{transform:translateX(calc(-50% - 9px))}}
.hs-review{
  position:relative; width:380px; flex:none; display:flex; flex-direction:column; justify-content:space-between; gap:22px;
  padding:26px 26px 22px; border-radius:var(--r-md); background:rgba(255,255,255,.04); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); transition:border-color .4s, background .4s;
}
.hs-review:hover{border-color:rgba(169,141,250,.45); background:rgba(255,255,255,.06)}
.hs-review .stars{display:flex; gap:3px; color:var(--lavender); font-size:15px; letter-spacing:0}
.hs-review blockquote{font-family:var(--serif); font-style:italic; font-size:19.5px; line-height:1.42; color:var(--grey-1)}
.hs-review blockquote::before{content:"“"; color:var(--purple); margin-right:2px}
.hs-review blockquote::after{content:"”"; color:var(--purple); margin-left:1px}
.hs-review figcaption{display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--line)}
.hs-review .av{flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:16px; color:var(--white); background:linear-gradient(135deg, var(--purple), var(--lavender))}
.hs-review .who{display:flex; flex-direction:column; min-width:0}
.hs-review .who b{font-family:var(--display); font-weight:700; font-size:15px; color:var(--white); letter-spacing:-.01em}
.hs-review .who small{font-size:12.5px; color:var(--grey-3); line-height:1.4}

/* 7 · About */
.hs-about{display:grid; grid-template-columns:1fr 1.12fr; gap:56px; align-items:center}
.hs-about-copy{display:flex; flex-direction:column; align-items:flex-start; gap:30px}
.hs-about-lines{display:grid; gap:20px; position:relative}
.hs-about-lines::before{content:""; position:absolute; left:15px; top:10px; bottom:10px; width:1px; background:linear-gradient(180deg, var(--purple), transparent)}
.hs-about-lines p{position:relative; display:grid; grid-template-columns:44px 1fr; gap:6px; font-size:clamp(16.5px,1.6vw,19.5px); line-height:1.5; color:var(--grey-1)}
.hs-about-lines p b{position:relative; z-index:1; display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:#141318; border:1px solid rgba(169,141,250,.45); font-family:var(--display); font-weight:700; font-size:12px; color:var(--lavender)}
.hs-about-lines p strong{color:var(--white); font-weight:600}
.hs-about-lines p .hl{color:var(--lavender); font-weight:600}
.hs-stack{position:relative; width:100%; aspect-ratio:100/72}
.hs-photo{
  position:absolute; width:43%; aspect-ratio:4/5; border-radius:22px; overflow:hidden; padding:10px;
  background:rgba(255,255,255,.06); border:1px solid var(--glass-line); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8); transition:transform .7s var(--ease);
}
.hs-photo .in{position:relative; width:100%; height:100%; border-radius:14px; overflow:hidden; background:linear-gradient(180deg, #1A1820, #100F14)}
.hs-photo img{width:100%; height:100%; object-fit:cover}
.hs-photo.p1{left:0; top:12%; transform:rotate(-6deg); z-index:1}
.hs-photo.p2{left:28.5%; top:0; transform:rotate(1.5deg); z-index:3}
.hs-photo.p3{right:0; top:18%; transform:rotate(6deg); z-index:2}
.hs-stack:hover .p1{transform:rotate(-9deg) translateX(-14px)}
.hs-stack:hover .p2{transform:rotate(0deg) translateY(-8px) scale(1.02)}
.hs-stack:hover .p3{transform:rotate(9deg) translateX(14px)}

/* 8 · Pricing */
.hs-price-wrap{display:flex; flex-direction:column; align-items:center; gap:56px}
.hs-pricecard{
  position:relative; width:min(620px, 100%); padding:46px 44px 40px; border-radius:32px; text-align:left;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:0 0 0 1px rgba(121,78,255,.2), 0 50px 140px -40px rgba(121,78,255,.7);
}
.hs-pricecard::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:conic-gradient(from var(--a,0deg), transparent 0 60%, var(--lavender) 75%, var(--purple) 85%, transparent 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:hs-spin 6s linear infinite; pointer-events:none}
@property --a{syntax:'<angle>'; inherits:false; initial-value:0deg}
@keyframes hs-spin{to{--a:360deg}}
.hs-pricecard .label{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.hs-pricecard .label span{font-family:var(--display); font-weight:600; color:var(--grey-1); font-size:15px}
.hs-pill{padding:7px 12px; border-radius:999px; background:rgba(121,78,255,.22); border:1px solid rgba(169,141,250,.5); color:var(--white); font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:.02em}
.hs-amount{display:flex; align-items:baseline; gap:16px; margin-top:16px; flex-wrap:wrap}
.hs-amount .now{font-family:var(--display); font-weight:800; font-size:clamp(60px,9vw,92px); line-height:1; letter-spacing:-.05em; color:var(--white)}
.hs-amount .was{font-size:24px; color:var(--grey-3); text-decoration:line-through; text-decoration-color:var(--lavender); text-decoration-thickness:2px}
.hs-incl{margin:30px 0 32px; display:grid; gap:14px; padding-top:28px; border-top:1px solid var(--line)}
.hs-incl li{display:flex; gap:14px; align-items:flex-start; color:var(--grey-1); font-size:16px}
.hs-incl li svg{flex:none; margin-top:4px}
.hs-pricecard .hs-btn{width:100%; font-size:19px; padding:21px}
.hs-trust{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px; margin-top:18px; font-size:13px; color:var(--grey-3)}
.hs-trust span{display:inline-flex; align-items:center; gap:7px}

/* 9 · Benefits bento */
.hs-bento{display:grid; grid-template-columns:repeat(6, 1fr); gap:16px}
.hs-tile{
  position:relative; overflow:hidden; border-radius:var(--r-md); padding:28px; min-height:200px;
  display:flex; flex-direction:column; justify-content:space-between; gap:24px;
  background:var(--glass); border:1px solid var(--glass-line); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  transition:border-color .4s;
}
.hs-tile:hover{border-color:rgba(169,141,250,.4)}
.hs-tile .ic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:rgba(121,78,255,.16); border:1px solid rgba(169,141,250,.35)}
.hs-tile h3{font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.025em; color:var(--white); line-height:1.15}
.hs-tile p{font-size:14.5px; color:var(--grey-2); margin-top:6px; line-height:1.55}
.hs-tile.t1{grid-column:span 3; grid-row:span 2; background:radial-gradient(100% 80% at 100% 100%, rgba(121,78,255,.35), transparent 60%), var(--glass)}
.hs-tile.t1 h3{font-size:clamp(28px,3vw,38px)}
.hs-tile.t1 .big{font-family:var(--serif); font-style:italic; font-size:clamp(70px,9vw,120px); line-height:.9; color:var(--lavender); opacity:.9}
.hs-tile.t2, .hs-tile.t3{grid-column:span 3}
.hs-tile.t4, .hs-tile.t5, .hs-tile.t6{grid-column:span 2}
.hs-tile.t7{grid-column:span 6; min-height:auto; flex-direction:row; align-items:center}
.hs-tile.t7 h3{font-size:clamp(22px,2.4vw,30px)}
.hs-avatars{display:flex; margin-left:auto}
.hs-avatars span{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; margin-left:-12px; border:2px solid #15141A; background:linear-gradient(135deg, var(--purple), var(--lavender)); font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.02em; color:var(--white)}
.hs-avatars span:nth-child(2){background:linear-gradient(135deg, #2B2140, var(--purple))}
.hs-avatars span:nth-child(3){background:linear-gradient(135deg, var(--lavender), #EFEFEF); color:#2B2140}
.hs-avatars span:nth-child(4){background:linear-gradient(135deg, #1C1B22, #4A3A7A)}
.hs-avatars span:last-child{display:grid; place-items:center; background:var(--purple); font-family:var(--display); font-weight:700; font-size:13px; color:var(--white)}

/* 10 · FAQ as comments */
.hs-faq-shell{
  width:100%; max-width:820px; margin-inline:auto; border-radius:var(--r-lg); overflow:hidden;
  background:rgba(255,255,255,.035); border:1px solid var(--glass-line); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
}
.hs-faq-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 26px; border-bottom:1px solid var(--line); font-family:var(--display); font-weight:600; color:var(--white)}
.hs-faq-top span{font-family:var(--body); font-weight:400; font-size:13px; color:var(--grey-3)}
.hs-faq{border-bottom:1px solid var(--line)}
.hs-faq summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:40px 1fr auto; gap:14px; align-items:start; padding:22px 26px; transition:background .3s}
.hs-faq summary:hover{background:rgba(255,255,255,.02)}
.hs-faq summary::-webkit-details-marker{display:none}
.hs-ava{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:14px; color:var(--white); background:linear-gradient(135deg, #2A2733, #1A1820); border:1px solid rgba(255,255,255,.1)}
.hs-q .who{font-family:var(--display); font-weight:600; font-size:13.5px; color:var(--grey-2)}
.hs-q .txt{display:block; margin-top:3px; font-family:var(--display); font-weight:600; font-size:clamp(17px,1.8vw,19px); line-height:1.35; letter-spacing:-.015em; color:var(--white)}
.hs-q .reply-hint{display:block; margin-top:8px; font-size:12.5px; font-weight:500; color:var(--grey-3)}
.hs-faq[open] .reply-hint{display:none}
.hs-heart{margin-top:8px; color:var(--grey-3); transition:color .3s, transform .3s}
.hs-faq[open] .hs-heart{color:var(--purple); transform:scale(1.12)}
.hs-faq[open] .hs-heart path{fill:var(--purple)}
.hs-reply{display:grid; grid-template-columns:32px 1fr; gap:12px; padding:0 26px 24px 80px; animation:hs-in .6s var(--ease)}
.hs-reply img{width:32px; height:32px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px rgba(169,141,250,.45)}
.hs-reply .who{font-family:var(--display); font-weight:700; font-size:13.5px; color:var(--white)}
.hs-reply .who i{font-style:normal; font-weight:500; color:var(--lavender); margin-left:6px; font-size:12px}
.hs-reply p{margin-top:3px; font-family:var(--body); font-weight:300; font-size:15.5px; line-height:1.6; color:var(--grey-1)}
.hs-todo{padding:2px 8px; border-radius:6px; background:rgba(121,78,255,.22); color:var(--white); font-weight:500; border:1px dashed rgba(169,141,250,.7)}
.hs-comment-bar{display:flex; align-items:center; gap:14px; padding:16px 18px 16px 26px}
.hs-comment-bar img{width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none}
.hs-comment-bar .field{flex:1; min-width:0; padding:13px 18px; border-radius:999px; border:1px solid var(--glass-line); background:rgba(0,0,0,.25); color:var(--grey-2); font-size:15px}
.hs-comment-bar .field b{color:var(--white); font-weight:500}
.hs-comment-bar .field .mail{color:var(--lavender); font-weight:500; user-select:all}

/* 11 · Final */
.hs-final{padding:160px 0 150px; text-align:center; overflow:hidden}
.hs-final .inner{display:flex; flex-direction:column; align-items:center; gap:28px}
.hs-final blockquote{max-width:1000px; font-family:var(--serif); font-style:italic; font-weight:400; color:var(--white); font-size:clamp(46px, 8.5vw, 120px); line-height:1; letter-spacing:-.025em; text-wrap:balance}
.hs-final blockquote .w:nth-last-child(-n+3){color:var(--lavender); text-shadow:0 0 40px rgba(121,78,255,.55)}
.hs-final cite{font-style:normal; font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:var(--grey-3)}
.hs-final .cta{display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:28px}
.hs-final .hs-btn{font-size:19px; padding:21px 38px}
.hs-deadline{display:inline-flex; align-items:center; gap:10px; padding:10px 18px; border-radius:999px; background:rgba(121,78,255,.14); border:1px solid rgba(169,141,250,.45); font-family:var(--display); font-weight:600; font-size:15px; color:var(--white)}
.hs-deadline::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--lavender); box-shadow:0 0 0 0 rgba(169,141,250,.7); animation:hs-ping 1.8s ease-out infinite}
@keyframes hs-ping{to{box-shadow:0 0 0 10px rgba(169,141,250,0)}}

/* Footer */
.hs-foot{border-top:1px solid var(--line); padding:44px 0 120px}
.hs-foot .hs-wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px}
.hs-foot nav{display:flex; flex-wrap:wrap; gap:6px 22px; font-size:14px}
.hs-foot nav a{color:var(--grey-2); transition:color .25s}
.hs-foot nav a:hover{color:var(--white)}
.hs-foot small{display:block; width:100%; font-size:12.5px; color:var(--grey-3)}

/* Sticky mobile bar */
.hs-sticky{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:60; display:none; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 10px 10px 20px; border-radius:999px; background:rgba(16,15,20,.8); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  transform:translateY(140%); transition:transform .5s var(--ease);
}
.hs-sticky.show{transform:none}
.hs-sticky .p{font-family:var(--display); font-weight:800; font-size:20px; color:var(--white); letter-spacing:-.03em; line-height:1}
.hs-sticky .p s{font-family:var(--body); font-weight:400; font-size:13px; color:var(--grey-3); margin-left:6px; text-decoration-color:var(--lavender)}
.hs-sticky small{display:block; font-size:11px; color:var(--grey-3); margin-top:3px}
.hs-sticky .hs-btn{padding:13px 20px; font-size:15px}

/* Reveal on scroll */
.hs.is-js [data-reveal]{opacity:0; transform:translateY(32px); transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:var(--d,0s)}
.hs.is-js .hs-wall [data-reveal]{transform:translateY(90px) rotate(var(--rot,3deg)) scale(.94)}
.hs.is-js .hs-cinema [data-reveal]{transform:translateY(60px) scale(.94)}
.hs.is-js [data-reveal].play{opacity:1; transform:none}
.hs.is-js .hs-vcard.ready{transition:transform .25s ease-out, border-color .4s; transition-delay:0s}

/* Responsive */
@media (max-width: 980px){
  .hs-promise-grid, .hs-about{grid-template-columns:1fr; gap:48px}
  .hs-fit{grid-template-columns:1fr}
  .hs-stack{max-width:560px; margin-inline:auto}
  .hs-bento{grid-template-columns:repeat(2, 1fr)}
  .hs-tile.t1{grid-column:span 2; grid-row:auto}
  .hs-tile.t2, .hs-tile.t3, .hs-tile.t4, .hs-tile.t5, .hs-tile.t6{grid-column:span 1}
  .hs-tile.t7{grid-column:span 2}
}
@media (max-width: 760px){
  .hs{font-size:16px}
  .hs-section{padding:88px 0}
  .hs-stack-y{gap:40px}
  .hs-nav-links .link{display:none}
  .hs-nav .hs-btn .hs-price-old{display:none}
  .hs-hero{padding:120px 0 80px}
  .hs-video{margin-top:40px; border-radius:var(--r-md)}
  .hs-play span{width:76px; height:76px}
  .hs-journey{padding:22px 20px}
  .hs-journey ol{grid-template-columns:1fr; gap:22px; padding-left:34px}
  .hs-journey .rail{left:8px; right:auto; top:8px; bottom:8px; width:2px; height:auto}
  .hs-journey .rail i{transform:scaleY(0); transform-origin:50% 0}
  .hs-journey.play .rail i{transform:none}
  .hs-journey li{padding-top:0}
  .hs-journey .node{left:-34px; top:2px}
  .hs-buy{margin-top:40px}
  .hs-final .hs-btn{width:100%; font-size:17px; padding:19px 22px}
  .hs-wall{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-inline:-16px; padding:0 16px 8px; scrollbar-width:none}
  .hs-wall::-webkit-scrollbar{display:none}
  .hs-vcard{flex:0 0 68%; scroll-snap-align:center}
  .hs.is-js .hs-wall [data-reveal]{transform:translateY(40px)}
  .hs-cinema{grid-template-columns:1fr 1fr; gap:10px}
  .hs-cinema .hs-vcard.feat{grid-column:span 2; grid-row:auto; aspect-ratio:16/9; min-height:0}
  .hs-cinema .hs-vcard{border-radius:var(--r-sm)}
  .hs-cinema .hs-vcard:not(.feat) .hs-chip{font-size:10px; padding:4px 8px}
  .hs-cinema .hs-vcard:not(.feat) .top{top:8px; left:8px; right:8px}
  .hs-marquee{-webkit-mask-image:none; mask-image:none; margin-inline:-16px}
  .hs-track{animation:none; overflow-x:auto; scroll-snap-type:x mandatory; width:auto; padding:0 16px 6px; scrollbar-width:none}
  .hs-track::-webkit-scrollbar{display:none}
  .hs-track .dup{display:none}
  .hs-review{width:84vw; max-width:360px; scroll-snap-align:center}
  .hs-roles{grid-template-columns:1fr}
  .hs-role{padding:16px 50px 16px 14px; gap:14px}
  .hs-role .new{font-size:16px}
  .hs-panel{padding:26px 20px}
  .hs-pricecard{padding:34px 22px 28px}
  .hs-bento{grid-template-columns:1fr}
  .hs-tile.t1, .hs-tile.t2, .hs-tile.t3, .hs-tile.t4, .hs-tile.t5, .hs-tile.t6, .hs-tile.t7{grid-column:auto}
  .hs-tile.t7{flex-direction:column; align-items:flex-start}
  .hs-avatars{margin-left:12px}
  .hs-stack{aspect-ratio:100/76}
  .hs-photo{padding:6px; border-radius:16px}
  .hs-photo .in{border-radius:11px}
  .hs-faq summary{grid-template-columns:34px 1fr auto; padding:18px 16px; gap:12px}
  .hs-ava{width:34px; height:34px; font-size:12px}
  .hs-reply{padding:0 16px 20px 62px}
  .hs-comment-bar{padding:14px 12px 14px 16px}
  .hs-comment-bar img{display:none}
  .hs-final{padding:110px 0 100px}
  .hs-sticky{display:flex}
}
/* 95% scroll pop-up */
.hs-pop{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:16px; visibility:hidden; pointer-events:none}
.hs-pop.open{visibility:visible; pointer-events:auto}
.hs-pop-bg{position:absolute; inset:0; background:rgba(6,6,8,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transition:opacity .4s var(--ease)}
.hs-pop.open .hs-pop-bg{opacity:1}
.hs-pop-card{position:relative; width:min(440px, 100%); padding:36px 30px 26px; border-radius:28px; text-align:center; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg, #1B1824, #121116); border:1px solid rgba(169,141,250,.35);
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(121,78,255,.25);
  opacity:0; transform:translateY(24px) scale(.82)}
.hs-pop.open .hs-pop-card{animation:hs-pop-in .7s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes hs-pop-in{to{opacity:1; transform:none}}
.hs-pop-card::before{content:""; position:absolute; inset:-40% -20% auto; height:70%; z-index:-1; background:radial-gradient(closest-side, rgba(121,78,255,.45), transparent); pointer-events:none}
.hs-pop-x{position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:0; background:rgba(255,255,255,.06); color:var(--grey-1); font-size:20px; line-height:1; cursor:pointer}
.hs-pop-x:hover{background:rgba(255,255,255,.12); color:var(--white)}
.hs-pop-eyebrow{font-family:var(--body); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--lavender)}
.hs-pop h3{margin:12px 0 10px; font-family:var(--display); font-weight:800; font-size:clamp(28px, 7vw, 36px); line-height:1.02; letter-spacing:-.035em; color:var(--white)}
.hs-pop h3 .hs-it{font-weight:400}
.hs-pop-sub{color:var(--grey-2); font-size:15px; line-height:1.5; margin:0 auto 20px; max-width:320px}
.hs-pop-price{display:flex; align-items:baseline; justify-content:center; gap:10px; margin-bottom:18px}
.hs-pop-price .now{font-family:var(--display); font-weight:800; font-size:40px; letter-spacing:-.04em; color:var(--white)}
.hs-pop-price s{color:var(--grey-3); font-size:18px; text-decoration-color:var(--lavender)}
.hs-pop .hs-btn{width:100%; justify-content:center}
.hs-pop-note{display:block; margin-top:14px; font-size:13px; color:var(--grey-2)}
.hs-pop-later{margin-top:6px; padding:8px 12px; border:0; background:none; color:var(--grey-3); font:inherit; font-size:13px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.hs-pop-later:hover{color:var(--grey-1)}
.hs-pop-burst{position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; z-index:1}
.hs-pop-burst i{position:absolute; width:8px; height:8px; margin:-4px; border-radius:50%; background:var(--lavender); opacity:0}
.hs-pop.open .hs-pop-burst i{animation:hs-burst .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:.12s}
@keyframes hs-burst{0%{opacity:1; transform:translate(0,0) scale(1)}100%{opacity:0; transform:translate(var(--x), var(--y)) scale(.3)}}

@media (prefers-reduced-motion: reduce){
  .hs *, .hs *::before, .hs *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .hs::before{animation:none}
  .hs-track{animation:none; flex-wrap:wrap; width:auto}
  .hs-track .dup{display:none}
  .hs-also-track{animation:none; flex-wrap:wrap; width:auto}
  .hs-also-track .dup{display:none}
  .hs-also-rows{-webkit-mask-image:none; mask-image:none}
}

/* =========================================================
   About page (about.html)
   ========================================================= */
.hs-nav-links .link[aria-current="page"]{color:var(--white); background:var(--glass)}
.ab-src{font-size:12px; color:var(--grey-3); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.2)}
.ab-src:hover{color:var(--lavender)}

/* Hero */
.ab-hero{padding:170px 0 120px; overflow:hidden}
.ab-hero .hs-wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center}
.ab-hero h1{white-space:nowrap; font-family:var(--display); font-weight:800; font-size:clamp(50px, 7.6vw, 108px); line-height:.94; letter-spacing:-.045em; color:var(--white); margin:20px 0 24px}
.ab-hero h1 .hs-it{font-weight:400; letter-spacing:-.02em; text-shadow:0 0 40px rgba(121,78,255,.45)}
.ab-hero .ab-kicker{font-family:var(--display); font-weight:700; font-size:clamp(20px, 2.1vw, 26px); line-height:1.25; letter-spacing:-.02em; color:var(--white); max-width:560px}
.ab-hero .ab-kicker .hs-it{font-weight:400}
.ab-hero .hs-lead{max-width:540px; margin-top:14px}
.ab-hero .hs-lead b{color:var(--white); font-weight:500}
.ab-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.ab-portrait{position:relative; width:100%; max-width:480px; aspect-ratio:10/11; justify-self:end}
.ab-portrait .hs-photo.a{left:0; top:0; width:70%; transform:rotate(-3deg); z-index:2}
.ab-portrait .hs-photo.b{right:0; bottom:0; width:50%; transform:rotate(6deg); z-index:3}
.ab-portrait:hover .hs-photo.a{transform:rotate(-5deg) translateX(-10px)}
.ab-portrait:hover .hs-photo.b{transform:rotate(9deg) translateX(10px)}
.ab-handle{position:absolute; left:6%; bottom:6%; z-index:4; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px;
  background:rgba(20,18,28,.75); border:1px solid rgba(169,141,250,.45); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  font-family:var(--display); font-weight:600; font-size:14px; color:var(--white); box-shadow:0 14px 40px -12px rgba(121,78,255,.6); transition:transform .3s var(--ease)}
.ab-handle:hover{transform:translateY(-3px)}

/* Why I create */
.ab-why{max-width:980px}
.ab-why .big{margin-top:22px; font-family:var(--display); font-weight:800; font-size:clamp(34px, 5vw, 68px); line-height:1.02; letter-spacing:-.04em; color:var(--white)}
.ab-why .big .hs-it{font-weight:400}
.ab-why .hs-lead{margin-top:26px; max-width:700px}

/* Proof timeline */
.ab-story{display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:start}
.ab-side{position:sticky; top:110px; display:flex; flex-direction:column; gap:28px}
.ab-side-photo{margin:0; position:relative; width:min(100%, 340px); aspect-ratio:4/5; border-radius:22px; overflow:hidden; padding:8px; background:rgba(255,255,255,.06); border:1px solid var(--glass-line); transform:rotate(-2deg); box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.ab-side-photo img{width:100%; height:100%; object-fit:cover; border-radius:16px}
.ab-side-photo figcaption{position:absolute; left:18px; bottom:18px; padding:7px 12px; border-radius:999px; background:rgba(11,11,12,.7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font-size:12px; color:var(--grey-1); border:1px solid rgba(255,255,255,.12)}
.ab-tl{position:relative; padding-left:44px}
.ab-rail{position:absolute; left:9px; top:10px; bottom:10px; width:2px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden}
.ab-rail i{position:absolute; inset:0; background:linear-gradient(180deg, var(--purple), var(--lavender)); box-shadow:0 0 14px rgba(121,78,255,.8); transform-origin:50% 0; transform:scaleY(var(--p,0))}
.ab-tl ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px}
.ab-tl li{position:relative; padding:26px 28px; border-radius:var(--r-md); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid var(--glass-line)}
.ab-tl li::before{content:""; position:absolute; left:-42px; top:32px; width:16px; height:16px; border-radius:50%; background:#15141A; border:2px solid var(--lavender); box-shadow:0 0 0 5px rgba(121,78,255,.15); transition:background .4s, box-shadow .4s}
.ab-tl li.play::before{background:var(--purple); box-shadow:0 0 0 5px rgba(121,78,255,.22), 0 0 18px rgba(121,78,255,.9)}
.ab-tl .n{font-family:var(--body); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--lavender)}
.ab-tl h3{margin:8px 0 8px; font-family:var(--display); font-weight:800; font-size:clamp(23px, 2.5vw, 30px); letter-spacing:-.03em; color:var(--white)}
.ab-tl li p:last-child{color:var(--grey-2); font-size:clamp(15px, 1.35vw, 17px); line-height:1.6}
.ab-tl strong{color:var(--white); font-weight:500}
.ab-tl .hl{color:var(--lavender); font-weight:600}
.ab-tl li.now{border-color:rgba(169,141,250,.45); background:radial-gradient(120% 140% at 0% 0%, rgba(121,78,255,.2), rgba(255,255,255,.02) 60%)}

/* Numbers */
.ab-stats{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
.ab-stat{padding:32px 26px; border-radius:var(--r-lg); background:radial-gradient(120% 120% at 0% 0%, rgba(121,78,255,.18), rgba(255,255,255,.02) 60%); border:1px solid var(--glass-line)}
.ab-stat b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(38px, 4.4vw, 58px); line-height:1; letter-spacing:-.045em; color:var(--white); white-space:nowrap}
.ab-stat b .hs-it{font-weight:400}
.ab-stat > span{display:block; margin-top:12px; color:var(--grey-2); font-size:14.5px; line-height:1.45}

/* Craft stack */
.ab-craft{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center}
.ab-craft-photo{margin:0; position:relative; aspect-ratio:4/5; max-width:420px; border-radius:var(--r-lg); overflow:hidden; padding:10px; background:rgba(255,255,255,.06); border:1px solid var(--glass-line); transform:rotate(2deg)}
.ab-craft-photo img{width:100%; height:100%; object-fit:cover; border-radius:18px}
.ab-skills{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:34px; list-style:none; padding:0}
.ab-skills li{display:inline-flex; align-items:center; gap:10px}
.ab-skills li span{padding:12px 20px; border-radius:999px; border:1px solid var(--glass-line); background:var(--glass); font-family:var(--display); font-weight:600; font-size:16px; color:var(--grey-1)}
.ab-skills li:not(:last-child)::after{content:"→"; color:var(--grey-3)}
.ab-skills li.ai span{background:linear-gradient(135deg, var(--purple), var(--lavender)); border-color:transparent; color:var(--white); box-shadow:0 0 30px rgba(121,78,255,.6)}

/* Work cards */
.ab-work{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:56px}
.ab-wcard{position:relative; display:block; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--glass-line); background:#121116; isolation:isolate}
.ab-wcard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s var(--ease)}
.ab-wcard::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(11,11,12,0) 35%, rgba(11,11,12,.92))}
.ab-wcard:hover img{transform:scale(1.06)}
.ab-wcard .body{position:absolute; left:0; right:0; bottom:0; padding:26px}
.ab-wcard h3{font-family:var(--display); font-weight:800; font-size:clamp(22px, 2.2vw, 28px); letter-spacing:-.03em; color:var(--white)}
.ab-wcard p{margin-top:6px; color:var(--grey-1); opacity:.8; font-size:14.5px}
.ab-wcard .go{position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background .3s, transform .4s var(--ease)}
.ab-wcard:hover .go{background:var(--purple); transform:rotate(-45deg)}

/* The shift */
.ab-figs{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:56px}
.ab-fig{padding:30px 26px; border-radius:var(--r-lg); border:1px solid var(--glass-line); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015))}
.ab-fig b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(40px, 4.6vw, 60px); line-height:1; letter-spacing:-.045em; color:var(--white)}
.ab-fig b .hs-it{font-weight:400}
.ab-fig p{margin:12px 0 14px; color:var(--grey-1); font-size:15.5px; line-height:1.45}
.ab-cols{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:16px}
.ab-col{padding:28px 26px; border-radius:var(--r-lg); border:1px solid var(--glass-line); background:var(--glass)}
.ab-col h3{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--white); display:flex; align-items:center; gap:10px}
.ab-col h3::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--lavender); box-shadow:0 0 12px var(--purple)}
.ab-col ul{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.ab-col li{color:var(--grey-2); font-size:15px; line-height:1.5}
.ab-col li b{color:var(--white); font-weight:500}
.ab-shift-end{margin-top:48px; display:flex; flex-direction:column; gap:22px; align-items:flex-start}
.ab-shift-end p{font-family:var(--display); font-weight:700; font-size:clamp(22px, 2.6vw, 32px); line-height:1.2; letter-spacing:-.025em; color:var(--white); max-width:860px}
.ab-shift-end p .hs-it{font-weight:400}
.ab-roles{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0}
.ab-roles li{padding:10px 18px; border-radius:999px; border:1px solid rgba(169,141,250,.35); background:rgba(121,78,255,.1); font-family:var(--display); font-weight:600; font-size:15px; color:var(--grey-1)}

/* Plan: each stage gets more "charged" */
.ab-plan{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:56px; align-items:end}
.ab-step{position:relative; padding:30px 26px 28px; border-radius:var(--r-lg); border:1px solid var(--glass-line); overflow:hidden; isolation:isolate; transition:transform .5s var(--ease), box-shadow .5s}
.ab-step .n{font-family:var(--body); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--grey-3)}
.ab-step h3{margin:10px 0 10px; font-family:var(--display); font-weight:800; font-size:clamp(26px, 2.6vw, 34px); letter-spacing:-.035em; color:var(--white)}
.ab-step p{color:var(--grey-2); font-size:15.5px; line-height:1.55}
.ab-meter{display:flex; gap:5px; margin-top:14px}
.ab-meter i{width:26px; height:5px; border-radius:3px; background:rgba(255,255,255,.12)}
.ab-meter i.on{background:linear-gradient(90deg, var(--purple), var(--lavender)); box-shadow:0 0 10px rgba(121,78,255,.8)}
.ab-step.s1{background:linear-gradient(180deg, rgba(121,78,255,.08), rgba(255,255,255,.015) 70%)}
.ab-step.s2{padding-top:56px; border-color:rgba(169,141,250,.3);
  background:radial-gradient(120% 90% at 0% 0%, rgba(121,78,255,.32), transparent 60%), linear-gradient(180deg, rgba(121,78,255,.12), rgba(255,255,255,.02));
  box-shadow:0 20px 50px -20px rgba(121,78,255,.45)}
.ab-step.s2 .n{color:var(--lavender)}
.ab-step.s3{padding-top:82px; border-color:rgba(169,141,250,.7);
  background:radial-gradient(120% 100% at 100% 0%, rgba(169,141,250,.55), transparent 55%), linear-gradient(160deg, #5B33E6 0%, #3A1FA8 45%, #1A1430 100%);
  box-shadow:0 30px 80px -20px rgba(121,78,255,.75), 0 0 0 1px rgba(169,141,250,.25) inset}
.ab-step.s3 .n{color:rgba(255,255,255,.75)}
.ab-step.s3 h3{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--white); letter-spacing:-.01em; text-shadow:0 0 30px rgba(255,255,255,.35)}
.ab-step.s3 p{color:rgba(255,255,255,.82)}
.ab-step.s3 .ab-meter i.on{background:#fff; box-shadow:0 0 12px rgba(255,255,255,.9)}
.ab-step.s3::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 48%, transparent 66%); transform:translateX(-120%); animation:hs-shine 4.5s ease-in-out infinite}
.ab-step:hover{transform:translateY(-6px)}
.ab-incl{margin-top:26px; color:var(--grey-2); font-size:15.5px}
.ab-incl b{color:var(--white); font-weight:500}

/* Contact */
.ab-contact{display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:center}
.ab-contact-photo{margin:0; position:relative; aspect-ratio:4/5; max-width:400px; border-radius:var(--r-lg); overflow:hidden; padding:10px; background:rgba(255,255,255,.06); border:1px solid var(--glass-line); transform:rotate(-3deg); box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.ab-contact-photo img{width:100%; height:100%; object-fit:cover; border-radius:18px}
.ab-contact-links{display:flex; flex-direction:column; gap:12px; margin-top:32px; max-width:480px}
.ab-clink{display:flex; align-items:center; gap:16px; padding:16px 20px; border-radius:20px; border:1px solid var(--glass-line); background:var(--glass); transition:border-color .3s, background .3s, transform .3s var(--ease)}
.ab-clink:hover{border-color:rgba(169,141,250,.55); background:var(--glass-strong); transform:translateX(4px)}
.ab-clink .ic{flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg, var(--purple), var(--lavender)); box-shadow:0 10px 24px -8px rgba(121,78,255,.7)}
.ab-clink .t{display:flex; flex-direction:column; min-width:0}
.ab-clink small{font-size:12.5px; color:var(--grey-3)}
.ab-clink b{font-family:var(--display); font-weight:700; font-size:18px; color:var(--white); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ab-clink .go{margin-left:auto; flex:none}

/* Promise */
.ab-promise{position:relative; max-width:920px; margin-inline:auto; text-align:center; padding:64px 40px; border-radius:36px; border:1px solid rgba(169,141,250,.35);
  background:radial-gradient(90% 120% at 50% 0%, rgba(121,78,255,.24), rgba(255,255,255,.02) 65%)}
.ab-promise .hs-eyebrow{justify-content:center}
.ab-promise h2{margin:18px auto 20px; font-family:var(--display); font-weight:800; font-size:clamp(34px, 5vw, 64px); line-height:1; letter-spacing:-.04em; color:var(--white); max-width:760px}
.ab-promise h2 .hs-it{font-weight:400}
.ab-promise p{color:var(--grey-1); font-size:clamp(16px, 1.6vw, 19px); line-height:1.6; max-width:620px; margin-inline:auto}
.ab-promise p + p{margin-top:12px; color:var(--grey-2)}

@media (max-width: 980px){
  .ab-hero .hs-wrap, .ab-story, .ab-craft{grid-template-columns:1fr; gap:48px}
  .ab-portrait{justify-self:center}
  .ab-side{position:static}
  .ab-side-photo{width:min(100%, 300px)}
  .ab-craft-photo{margin-inline:auto; max-width:360px}
  .ab-stats{grid-template-columns:1fr 1fr}
  .ab-work{grid-template-columns:1fr 1fr}
  .ab-work .ab-wcard:last-child{grid-column:span 2; aspect-ratio:16/10}
  .ab-figs, .ab-cols, .ab-plan{grid-template-columns:1fr}
  .ab-step.s2, .ab-step.s3{padding-top:30px}
  .ab-contact{grid-template-columns:1fr; gap:44px}
  .ab-contact-photo{margin-inline:auto; max-width:340px}
}
@media (max-width: 760px){
  .ab-hero{padding:120px 0 80px}
  .ab-tl{padding-left:34px}
  .ab-rail{left:6px}
  .ab-tl li{padding:22px 20px}
  .ab-tl li::before{left:-35px; top:28px; width:14px; height:14px}
  .ab-stats{gap:10px}
  .ab-stat{padding:22px 18px}
  .ab-stat b{font-size:34px}
  .ab-work{grid-template-columns:1fr; gap:14px; margin-top:40px}
  .ab-work .ab-wcard, .ab-work .ab-wcard:last-child{grid-column:auto; aspect-ratio:16/11}
  .ab-skills li span{padding:10px 15px; font-size:14.5px}
  .ab-promise{padding:44px 22px; border-radius:28px}
}