/* ==========================================================================
   Cinematic hero  (--p = raw scroll progress 0→1, --e = eased progress)
   ========================================================================== */
@property --in{syntax:"<number>";inherits:false;initial-value:0}
.cd-hero{position:relative;--p:0;--e:0;--y0:47vh;--s0:.66;isolation:isolate}
.cd-hero__sticky{position:relative;padding:clamp(120px,16vw,170px) 0 60px}
.cd-hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.cd-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.cd-orb--a{width:46vw;height:46vw;inset-block-start:-14vw;inset-inline-start:-8vw;background:var(--cd-blue);animation:cd-drift 22s ease-in-out infinite}
.cd-orb--b{width:38vw;height:38vw;inset-block-start:2vw;inset-inline-end:-10vw;background:var(--cd-purple);animation:cd-drift 26s ease-in-out infinite reverse}
.cd-orb--c{width:30vw;height:30vw;inset-block-end:-8vw;inset-inline-start:30vw;background:var(--cd-pink);opacity:.28;animation:cd-drift 30s ease-in-out infinite}
@keyframes cd-drift{50%{transform:translate3d(4vw,3vw,0) scale(1.08)}}
.cd-hero__grid{position:absolute;inset:0;background:linear-gradient(var(--cd-line) 1px,transparent 1px) 0 0/72px 72px,linear-gradient(90deg,var(--cd-line) 1px,transparent 1px) 0 0/72px 72px;-webkit-mask-image:radial-gradient(75% 65% at 50% 30%,#000,transparent);mask-image:radial-gradient(75% 65% at 50% 30%,#000,transparent);opacity:.55}

.cd-hero__copy{position:relative;z-index:4;text-align:center;max-width:980px;margin-inline:auto;padding-inline:var(--cd-gut)}
.cd-hero__status{display:inline-flex;align-items:center;gap:10px;padding:6px 16px;margin-bottom:22px;border:1px solid var(--cd-line2);border-radius:999px;background:var(--cd-glass);backdrop-filter:blur(10px);font-size:.85rem;font-weight:600;color:var(--cd-muted)}
.cd-pulse{width:8px;height:8px;border-radius:50%;background:#34e08a;box-shadow:0 0 0 0 rgba(52,224,138,.6);animation:cd-pulse 2s infinite}
@keyframes cd-pulse{70%{box-shadow:0 0 0 10px rgba(52,224,138,0)}100%{box-shadow:0 0 0 0 rgba(52,224,138,0)}}
.cd-hero__title{font-size:clamp(2.3rem,min(5.6vw,8.8vh),5rem);line-height:1.28;font-weight:900;text-wrap:balance}
.cd-hero__text{margin:20px auto 30px;max-width:56ch;color:var(--cd-muted);font-size:clamp(1rem,1.3vw,1.16rem)}
.cd-hero__copy .cd-btn-row{justify-content:center}

/* floating elements */
.cd-hero__scene{position:relative;margin-top:56px;padding-inline:var(--cd-gut)}
.cd-float{position:absolute;z-index:5;--in:0;opacity:calc(var(--in)*max(0,1 - var(--p)*3.2));transform:translate3d(var(--mx,0px),calc(var(--my,0px) - var(--p)*70px),0);transition:--in 1s var(--cd-ease);animation:cd-bob 7s ease-in-out infinite;pointer-events:none;background:rgba(12,16,30,.72);border:1px solid var(--cd-line2);border-radius:18px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
@keyframes cd-bob{50%{translate:0 -12px}}
.cd-hero.is-s1 .cd-code{--in:1}
.cd-hero.is-s2 .cd-pal,.cd-hero.is-s2 .cd-typo,.cd-hero.is-s2 .cd-uikit{--in:1}
.cd-hero.is-s4 .cd-perf{--in:1}
.cd-code{left:2.5vw;top:2vh;width:min(330px,25vw);rotate:-3deg;padding:0;overflow:hidden;animation-delay:-2s}
.cd-code__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--cd-line);font-family:var(--cd-mono);font-size:.7rem;color:var(--cd-dim)}
.cd-code__bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.cd-code__bar i:nth-child(2){background:#febc2e}.cd-code__bar i:nth-child(3){background:#28c840}
.cd-code__bar span{margin-inline-start:auto}
.cd-code pre{margin:0;padding:14px 16px 16px;font-family:var(--cd-mono);font-size:.74rem;line-height:1.75;color:#c9d3f0;white-space:pre;overflow:hidden}
.cd-code code{display:block;text-align:left}
.cd-code__l{display:block;opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .4s;min-height:1.75em}
.cd-hero.is-s1 .cd-code__l{opacity:1;transform:none;transition-delay:calc(var(--i)*.14s + .3s)}
.cd-code__caret{display:inline-block;width:7px;height:1em;background:var(--cd-blue);vertical-align:-2px;animation:cd-blink 1s steps(2) infinite}
@keyframes cd-blink{50%{opacity:0}}
.t-k{color:#c792ff;font-style:normal}.t-s{color:#7ee0a7;font-style:normal}.t-n{color:#ffb86b;font-style:normal}.t-f{color:#6ea8ff;font-style:normal}.t-c{color:#5c6685;font-style:normal}
.cd-code i{font-style:normal}
.cd-pal{right:3vw;top:0;width:min(220px,16vw);min-width:180px;padding:14px 16px;rotate:3deg;animation-delay:-4s}
.cd-pal__h{margin:0 0 10px;font-family:var(--cd-mono);font-size:.68rem;color:var(--cd-dim);text-transform:uppercase;letter-spacing:.08em}
.cd-pal__sw{display:flex;gap:8px}.cd-pal__sw i{flex:1;height:34px;border-radius:10px}
.cd-pal__hex{margin:10px 0 0;font-family:var(--cd-mono);font-size:.62rem;color:var(--cd-muted);white-space:nowrap}
.cd-typo{left:8vw;bottom:3vh;display:flex;align-items:center;gap:14px;padding:12px 18px;animation-delay:-1s;rotate:-2deg}
.cd-typo__aa{font-size:2.6rem;font-weight:800;line-height:1;background:var(--cd-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--cd-display)}
.cd-typo__m{font-size:.82rem;font-weight:700;line-height:1.35}.cd-typo__m small{color:var(--cd-dim);font-family:var(--cd-mono);font-size:.66rem;font-weight:400}
.cd-uikit{right:7vw;bottom:4vh;display:flex;align-items:center;gap:14px;padding:14px 16px;animation-delay:-5s;rotate:2deg}
.cd-uikit__btn{padding:6px 16px;border-radius:999px;background:var(--cd-grad);font-size:.78rem;font-weight:700}
.cd-uikit__tg{width:38px;height:22px;border-radius:999px;background:var(--cd-blue);position:relative}.cd-uikit__tg i{position:absolute;inset:3px 3px 3px auto;width:16px;border-radius:50%;background:#fff}
.cd-uikit__sl{width:64px;height:4px;border-radius:4px;background:var(--cd-line2);position:relative}.cd-uikit__sl i{position:absolute;inset:0 40% 0 0;background:var(--cd-grad);border-radius:4px}
.cd-uikit__sl i::after{content:"";position:absolute;inset-inline-end:-6px;top:-5px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.cd-perf{right:4vw;top:-8vh;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 12px;animation-delay:-3s}
.cd-perf svg{transform:rotate(-90deg)}
.cd-perf circle{fill:none;stroke-width:4}.cd-perf__bg{stroke:var(--cd-line2)}
.cd-perf__fg{stroke:#34e08a;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s var(--cd-ease) .3s}
.cd-hero.is-s4 .cd-perf__fg{stroke-dashoffset:0}
.cd-perf b{display:block;font-size:1.1rem;line-height:1.1;font-family:var(--cd-display)}.cd-perf small{color:var(--cd-dim);font-size:.66rem;font-family:var(--cd-mono)}

/* browser */
.cd-browser{position:relative;width:min(1120px,100%);margin-inline:auto;aspect-ratio:16/10.6;display:flex;flex-direction:column;border-radius:20px;background:#090c17;border:1px solid var(--cd-line2);overflow:hidden;box-shadow:0 50px 120px -30px rgba(var(--cd-blue-rgb),.5),0 0 0 1px rgba(255,255,255,.04) inset;transition:box-shadow 1s}
.cd-hero.is-s3 .cd-browser{box-shadow:0 50px 140px -20px rgba(var(--cd-purple-rgb),.6),0 0 0 1px rgba(var(--cd-blue-rgb),.5)}
.cd-browser__chrome{display:flex;align-items:center;gap:16px;height:44px;padding:0 16px;border-bottom:1px solid var(--cd-line);background:rgba(255,255,255,.03);flex:none}
.cd-browser__dots{display:flex;gap:7px}.cd-browser__dots i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.cd-browser__dots i:nth-child(2){background:#febc2e}.cd-browser__dots i:nth-child(3){background:#28c840}
.cd-browser__url{flex:1;max-width:460px;margin-inline:auto;display:flex;align-items:center;gap:8px;height:28px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.05);font-size:.74rem;color:var(--cd-muted);font-family:var(--cd-mono);overflow:hidden}
.cd-browser__url .cd-ico{width:13px;height:13px;color:#34e08a;flex:none}
.cd-browser__url em{font-style:normal;white-space:nowrap;clip-path:inset(0 100% 0 0);transition:clip-path 1.2s steps(22)}
.cd-hero.is-s3 .cd-browser__url em{clip-path:inset(0 0 0 0)}
.cd-browser__view{flex:1;min-height:0;container-type:inline-size;position:relative;overflow:hidden}

/* mock website (all sizes in cqw so it scales with the browser) */
.cd-mock{position:absolute;inset:0;display:flex;flex-direction:column;padding:1.6cqw 4cqw 0;color:#fff;background:radial-gradient(60cqw 40cqw at 85% 10%,rgba(var(--cd-purple-rgb),.4),transparent 70%),radial-gradient(50cqw 40cqw at 0% 100%,rgba(var(--cd-blue-rgb),.35),transparent 70%),#080b16;filter:grayscale(1) brightness(.75);transition:filter 1.4s var(--cd-ease);font-family:var(--cd-display)}
.cd-hero.is-s2 .cd-mock{filter:none}
.cd-mock__nav{display:flex;align-items:center;gap:3cqw;height:4.2cqw;flex:none}
.cd-mock__logo{width:2.4cqw;height:2.4cqw;border-radius:.7cqw;background:var(--cd-grad)}
.cd-mock__links{display:flex;gap:2cqw;margin-inline-start:2cqw}.cd-mock__links i{width:4.6cqw;height:.7cqw;border-radius:1cqw;background:rgba(255,255,255,.28)}
.cd-mock__pill{margin-inline-start:auto;width:8cqw;height:2.6cqw;border-radius:2cqw;border:1px solid rgba(255,255,255,.3)}
.cd-mock__hero{flex:1;min-height:0;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:3cqw}
.cd-mock__chip{display:inline-block;padding:.5cqw 1.5cqw;border-radius:2cqw;border:1px solid rgba(255,255,255,.2);font-size:1.05cqw;color:rgba(255,255,255,.75);opacity:.3;transition:opacity 1s}
.cd-mock__title{margin:1.6cqw 0 1.4cqw;font-size:5.4cqw;line-height:1.05;font-weight:700;letter-spacing:-.03em;max-width:11ch;color:transparent;background:rgba(255,255,255,.1);border-radius:1cqw;transition:color .9s var(--cd-ease) .2s,background .9s .2s;text-align:left}
.cd-hero.is-s4 .cd-mock__title{color:#fff;background:transparent}
.cd-mock__lines{display:grid;gap:.9cqw;margin:0 0 2.2cqw;max-width:34cqw}.cd-mock__lines i{height:.9cqw;border-radius:1cqw;background:rgba(255,255,255,.22)}.cd-mock__lines i:nth-child(2){width:88%}.cd-mock__lines i:nth-child(3){width:60%}
.cd-mock__btns{display:flex;gap:1.4cqw}
.cd-mock__btn{position:relative;padding:1.1cqw 2.6cqw;border-radius:3cqw;font-size:1.25cqw;font-weight:600;background:rgba(255,255,255,.14);color:transparent;transition:color .8s .3s,background .8s .3s,box-shadow .5s,transform .5s var(--cd-ease)}
.cd-mock__btn--ghost{background:transparent;box-shadow:0 0 0 1px rgba(255,255,255,.22) inset}
.cd-hero.is-s4 .cd-mock__btn{color:#fff}.cd-hero.is-s4 .cd-mock__btn:first-child{background:var(--cd-grad)}
.cd-hero.is-s4 .cd-mock__btn--ghost{color:rgba(255,255,255,.85)}
.cd-fcursor{position:absolute;inset-inline-start:55%;inset-block-start:60%;z-index:6;opacity:0;translate:14cqw -12cqw;width:2.6cqw;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));transition:opacity .4s,translate 1.6s var(--cd-ease) .4s}
.cd-hero.is-s5 .cd-fcursor{opacity:1;translate:0 0}
.cd-hero.is-s5 .cd-mock__btn:first-child{transition-delay:0s,0s,1.9s,1.9s;box-shadow:0 0 0 .5cqw rgba(var(--cd-purple-rgb),.45),0 1.6cqw 4cqw -1cqw rgba(var(--cd-pink-rgb),.8);transform:translateY(-.3cqw)}
.cd-mock__art{position:relative;height:100%;max-height:30cqw;display:grid;place-items:center;opacity:.3;transition:opacity 1.2s .2s}
.cd-hero.is-s4 .cd-mock__art,.cd-hero.is-s4 .cd-mock__chip{opacity:1}
.cd-mock__ring{position:absolute;width:24cqw;height:24cqw;border-radius:50%;background:conic-gradient(from 210deg,var(--cd-blue),var(--cd-purple),var(--cd-pink),var(--cd-blue));-webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%);animation:cd-spin 14s linear infinite}
@keyframes cd-spin{to{transform:rotate(360deg)}}
.cd-mock__card{position:absolute;border-radius:1.6cqw;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);animation:cd-bob 6s ease-in-out infinite}
.cd-mock__card--1{width:12cqw;height:8cqw;inset-block-start:16%;inset-inline-start:6%}
.cd-mock__card--2{width:10cqw;height:10cqw;inset-block-end:12%;inset-inline-end:10%;animation-delay:-2s;background:linear-gradient(135deg,rgba(var(--cd-pink-rgb),.55),rgba(var(--cd-purple-rgb),.2))}
.cd-mock__card--3{width:8cqw;height:5cqw;inset-block-start:8%;inset-inline-end:16%;animation-delay:-4s}
.cd-mock__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;padding-block:2cqw 0;flex:none}
.cd-mock__cards div{height:8cqw;border-radius:1.4cqw 1.4cqw 0 0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-bottom:0;padding:1.4cqw 1.6cqw;display:flex;flex-direction:column;justify-content:space-between;color:var(--cd-blue);opacity:.4;transition:opacity 1s calc(var(--i,0)*.15s + .4s)}
.cd-mock__cards div:nth-child(2){color:var(--cd-purple)}.cd-mock__cards div:nth-child(3){color:var(--cd-pink)}
.cd-mock__cards i{display:block;width:40%;height:.9cqw;border-radius:1cqw;background:rgba(255,255,255,.4)}
.cd-mock__cards svg{width:100%;height:3cqw}
.cd-hero.is-s4 .cd-mock__cards div{opacity:1}

/* stage indicator */
.cd-stages{direction:ltr;display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:30px auto 0;position:relative;z-index:6;padding:0 var(--cd-gut)}
.cd-stages button{display:flex;align-items:center;gap:8px;padding:5px 14px 5px 6px;padding-inline:6px 14px;border:1px solid var(--cd-line);border-radius:999px;background:rgba(8,11,22,.6);backdrop-filter:blur(10px);font-family:var(--cd-mono);font-size:.7rem;color:var(--cd-dim);transition:.4s var(--cd-ease);pointer-events:none;letter-spacing:.02em}
.cd-stages button span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--cd-glass2);font-size:.65rem}
.cd-stages button.is-done{color:var(--cd-muted)}.cd-stages button.is-done span{background:rgba(52,224,138,.2);color:#34e08a}
.cd-stages button.is-cur{color:#fff;border-color:rgba(var(--cd-purple-rgb),.7);box-shadow:0 0 24px -4px rgba(var(--cd-purple-rgb),.7)}
.cd-stages button.is-cur span{background:var(--cd-grad);color:#fff}

/* static (no-scroll-scene) fallbacks */
@media(max-width:1100px){.cd-perf,.cd-typo{display:none}}
@media(max-width:820px){.cd-code,.cd-pal,.cd-uikit,.cd-perf,.cd-typo{display:none}.cd-hero__scene{margin-top:40px}.cd-browser{aspect-ratio:4/3.4;border-radius:14px}.cd-mock__hero{grid-template-columns:1fr}.cd-mock__art{display:none}.cd-mock__title{font-size:8.4cqw}.cd-mock__chip{font-size:2cqw}.cd-mock__btn{font-size:2.2cqw}.cd-mock__lines i{height:1.4cqw}.cd-mock__cards div{height:12cqw}.cd-stages{margin-top:22px}}

/* ---- cinematic scroll mode (desktop, motion allowed) ---- */
@media(min-width:821px) and (min-height:560px) and (prefers-reduced-motion:no-preference){
	.cd-hero.is-cine .cd-hero__track{height:250vh;position:relative}
	.cd-hero.is-cine .cd-hero__sticky{position:sticky;inset-block-start:0;height:100vh;padding:0;overflow:hidden}
	.cd-hero.is-cine .cd-hero__copy{position:absolute;inset-inline:0;inset-block-start:min(13vh,140px);transform:translate3d(0,calc(var(--p)*-70px),0);opacity:max(0,calc(1 - var(--p)*2.8))}
	.cd-hero.is-cine.is-past .cd-hero__copy{pointer-events:none}
	.cd-hero.is-cine .cd-hero__scene{position:absolute;inset:0;margin:0;padding:0}
	.cd-hero.is-cine .cd-browser{position:absolute;inset:0;width:100%;aspect-ratio:auto;max-width:none;margin:0;border-radius:calc((1 - var(--e))*30px);transform:translate3d(0,calc((1 - var(--e))*var(--y0)),0) scale(calc(var(--s0) + (1 - var(--s0))*var(--e)));transform-origin:50% 50%;border-width:calc((1 - var(--e))*1.5px);will-change:transform}
	.cd-hero.is-cine .cd-browser__chrome{height:calc(44px - var(--e)*8px)}
	.cd-hero.is-cine .cd-stages{position:absolute;inset-inline:0;top:calc(var(--y0) + 17vh - 52px);margin:0;opacity:max(0,calc(1 - var(--p)*4))}
	.cd-hero.is-cine .cd-hero__bg{transform:translate3d(0,calc(var(--p)*-90px),0)}
		.cd-hero.is-cine .cd-code{top:58vh}
	.cd-hero.is-cine .cd-pal{top:56vh}
	.cd-hero.is-cine .cd-typo{top:auto;bottom:12vh}
	.cd-hero.is-cine .cd-uikit{top:auto;bottom:9vh}
	.cd-hero.is-cine .cd-perf{top:33vh}
}
@media(min-width:821px) and (max-height:760px) and (min-height:560px){.cd-hero{--y0:50vh}.cd-hero__text{margin-block:14px 20px}}

/* entrance */
.cd-js .cd-hero__copy>*{animation:cd-up 1s var(--cd-ease) both}
.cd-js .cd-hero__copy>*:nth-child(2){animation-delay:.08s}.cd-js .cd-hero__copy>*:nth-child(3){animation-delay:.3s}.cd-js .cd-hero__copy>*:nth-child(4){animation-delay:.42s}
.cd-js .cd-hero__scene{animation:cd-up 1.2s var(--cd-ease) .35s both}
@keyframes cd-up{from{opacity:0;translate:0 30px}}

/* scroll-down cue */
.cd-scrolldown{position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;gap:8px;width:26px;margin:36px auto 0;color:var(--cd-muted);transition:color .3s}
.cd-scrolldown:hover{color:#fff}
.cd-scrolldown span{width:1px;height:34px;background:linear-gradient(var(--cd-blue),var(--cd-pink));position:relative;overflow:hidden}
.cd-scrolldown span::after{content:"";position:absolute;inset-inline:0;inset-block-start:-100%;height:60%;background:#fff;animation:cd-scroll-run 1.8s ease-in-out infinite}
@keyframes cd-scroll-run{50%{inset-block-start:100%}100%{inset-block-start:100%}}
.cd-scrolldown__arrow{width:14px;height:14px;transform:rotate(90deg)!important}
.cd-hero.is-cine .cd-scrolldown{display:none}
@media(max-width:820px){.cd-scrolldown{margin-top:24px}}
@media(prefers-reduced-motion:reduce){.cd-scrolldown span::after{animation:none;inset-block-start:20%}}