/* Colby's Tech Life — Cinematic Experience V2.
   Progressive enhancement only: dependency-free, transform/opacity/clip driven, reduced-motion safe. */

html{overflow-x:clip}
body.home-page{overflow-x:clip}

:root{--boot-progress:0;--hero-progress:0;--hero-edge:0;--hero-pointer-x:0;--hero-pointer-y:0;--handoff-progress:0;--build-progress:0;--stage-1:0;--stage-2:0;--stage-3:0;--stage-4:0;--stage-5:0;--break-progress:0}
html.ctl-boot-running:not(.ctl-boot-complete),html.ctl-boot-running:not(.ctl-boot-complete) body{overflow:hidden}

/* 01 — slower system boot */
.ctl-boot{display:none;position:fixed;inset:0;z-index:5000;place-items:center;overflow:hidden;background:#01040d;color:#fff;pointer-events:none;isolation:isolate}
.ctl-js:not(.ctl-boot-complete):not(.ctl-boot-skip) .ctl-boot{display:grid}
.ctl-boot::before{content:"";position:absolute;inset:-40%;z-index:-2;background:radial-gradient(circle at 50% 42%,rgba(22,139,255,.22),transparent 30rem),linear-gradient(rgba(67,216,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(67,216,255,.05) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px;transform:perspective(760px) rotateX(63deg) translate3d(0,15%,0) scale(1.05);opacity:.7;animation:ctlBootGrid 2.45s linear both}
.ctl-boot::after{content:"";position:absolute;z-index:6;left:-22%;right:-22%;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(54,228,255,.45),#aef8ff,rgba(54,228,255,.45),transparent);box-shadow:0 0 34px rgba(54,228,255,.62),0 12px 44px rgba(29,168,255,.18);transform:translateY(calc(var(--boot-progress) * 100vh));opacity:.76}
.ctl-boot-inner{position:relative;z-index:2;width:min(760px,calc(100vw - 44px));padding:34px 0 30px;text-align:left}
.ctl-boot-inner::before,.ctl-boot-inner::after{position:absolute;color:#67dff6;font:700 .58rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;white-space:pre;opacity:.5}
.ctl-boot-inner::before{content:"CTL.OS / EXPERIENCE CORE\A NODE 01 · VISUAL\A NODE 02 · MOTION";left:0;bottom:100%;margin-bottom:18px}
.ctl-boot-inner::after{content:"SYNC 01\A 60 FPS TARGET\A ACCESSIBILITY READY";right:0;top:100%;margin-top:18px;text-align:right}
.ctl-boot-mark{position:relative;margin:0 0 15px;color:#fff;font-size:clamp(2.8rem,8.5vw,6.9rem);font-weight:950;line-height:.86;letter-spacing:-.072em;text-transform:uppercase;text-shadow:0 0 34px rgba(34,230,255,.12);opacity:0;transform:translate3d(0,18px,0) skewX(-5deg);clip-path:inset(0 100% 0 0)}
.ctl-boot-mark::before{content:"CTL // 01";display:block;width:auto;height:auto;margin-bottom:15px;background:none;box-shadow:none;color:#79eaff;font:900 .62rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2em}
.ctl-boot-mark::after{content:"";position:absolute;left:0;bottom:-8px;width:clamp(76px,18vw,160px);height:2px;background:#2de7ff;box-shadow:0 0 20px rgba(45,231,255,.8)}
.ctl-boot-title{margin:0;color:#8eeeff;font:850 clamp(.82rem,1.6vw,1.06rem)/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.26em;text-transform:uppercase;opacity:0;transform:translateY(8px)}
.ctl-boot-title span{display:inline;margin-left:.7em;color:#d7f8ff;-webkit-text-stroke:0;text-shadow:0 0 20px rgba(34,230,255,.18)}
.ctl-boot-console{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end;margin-top:34px;padding-top:18px;border-top:1px solid rgba(123,229,255,.2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;opacity:0;transform:translateY(9px)}
.ctl-boot-status{color:#d8f6ff;font-size:.7rem;font-weight:800;letter-spacing:.13em;min-height:1em}
.ctl-boot-status.is-switching{animation:ctlStatusSwitch .22s ease both}
.ctl-boot-code{color:#5fdfff;font-size:.64rem;letter-spacing:.05em;opacity:.62;text-align:right}
.ctl-boot-track{position:relative;height:3px;margin-top:12px;overflow:visible;background:rgba(133,222,255,.1)}
.ctl-boot-track::before{content:"";position:absolute;inset:-5px 0;border-left:1px solid rgba(126,231,255,.35);border-right:1px solid rgba(126,231,255,.18)}
.ctl-boot-bar{height:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#168bff,#22e6ff 62%,#d5fdff);box-shadow:0 0 25px rgba(34,230,255,.68)}
html.ctl-boot-running .ctl-boot-mark{animation:ctlBootIdentity .48s .18s cubic-bezier(.16,1,.3,1) forwards}
html.ctl-boot-running .ctl-boot-title{animation:ctlBootSub .32s .48s ease forwards}
html.ctl-boot-running .ctl-boot-console{animation:ctlBootSub .28s .68s ease forwards}
html.ctl-boot-complete .ctl-boot{display:grid;animation:ctlBootExitV2 .27s cubic-bezier(.7,0,.2,1) both}
html.ctl-boot-complete .ctl-boot-inner{animation:ctlBootCompress .27s cubic-bezier(.7,0,.2,1) both}
html.ctl-boot-complete .ctl-boot::before{animation:ctlBootGridExit .27s ease-in both}
html.ctl-boot-skip .ctl-boot{display:none!important}
html.ctl-boot-failsafe:not(.ctl-boot-running):not(.ctl-boot-complete) .ctl-boot{display:none!important}
@keyframes ctlBootIdentity{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translate3d(-14px,18px,0) skewX(-6deg);filter:blur(5px)}55%{opacity:1;filter:blur(0);transform:translate3d(4px,0,0) skewX(1deg)}72%{text-shadow:2px 0 rgba(255,80,135,.28),-2px 0 rgba(34,230,255,.35)}100%{opacity:1;clip-path:inset(0);transform:none;filter:none}}
@keyframes ctlBootSub{to{opacity:1;transform:none}}
@keyframes ctlStatusSwitch{0%{opacity:.15;transform:translateX(5px);filter:blur(2px)}100%{opacity:1;transform:none;filter:none}}
@keyframes ctlBootGrid{0%{transform:perspective(760px) rotateX(63deg) translate3d(0,18%,0) scale(1.08)}100%{transform:perspective(760px) rotateX(63deg) translate3d(0,5%,0) scale(1.02)}}
@keyframes ctlBootCompress{to{transform:scaleY(.18) scaleX(1.06);opacity:.08;filter:blur(2px)}}
@keyframes ctlBootGridExit{to{transform:perspective(760px) rotateX(76deg) translate3d(0,-18%,0) scale(1.35);opacity:0}}
@keyframes ctlBootExitV2{0%{clip-path:inset(0);background:#01040d}65%{opacity:.86;clip-path:inset(47% 0 47% 0)}100%{opacity:0;visibility:hidden;clip-path:inset(50% 0 50% 0)}}

/* Hero — stronger depth, connected system-active state */
.home-3d-hero{--hero-handoff:0;transform-origin:center top}
.home-3d-hero .hero-tech-video{transform:translate3d(calc(var(--hero-pointer-x) * -7px),calc(var(--hero-pointer-y) * -5px),0) scale(calc(1.025 + var(--hero-progress) * .045));filter:saturate(calc(1.08 + var(--hero-progress) * .08)) contrast(1.05) brightness(calc(.82 - var(--hero-progress) * .1));will-change:transform,filter}
.home-3d-hero::after{transform:translate3d(calc(var(--hero-pointer-x) * 5px),calc(var(--hero-progress) * -24px),0) scale(calc(1 + var(--hero-progress) * .025));transform-origin:center;will-change:transform;opacity:calc(.22 + var(--hero-edge) * .08)}
.home-3d-hero .hero-content::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:calc(12% + var(--hero-progress) * 46%);height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(90,231,255,.08),rgba(137,242,255,.46),rgba(90,231,255,.08),transparent);box-shadow:0 0 32px rgba(34,230,255,.15);opacity:calc(.35 + var(--hero-edge) * .55)}
.hero-title-lines .hero-line{display:block;overflow:hidden;padding-right:.07em}
.hero-title-lines .hero-line>span{display:block;transform:translate3d(0,115%,0) skewY(3deg);opacity:0;letter-spacing:-.02em}
html.ctl-boot-complete .hero-title-lines .hero-line>span,html.ctl-boot-failsafe:not(.ctl-boot-running) .hero-title-lines .hero-line>span{animation:ctlHeroLine .72s cubic-bezier(.16,1,.3,1) forwards}
html.ctl-boot-complete .hero-title-lines .hero-line:nth-child(2)>span,html.ctl-boot-failsafe:not(.ctl-boot-running) .hero-title-lines .hero-line:nth-child(2)>span{animation-delay:.08s}
html.ctl-boot-complete .hero-title-lines .hero-line:nth-child(3)>span,html.ctl-boot-failsafe:not(.ctl-boot-running) .hero-title-lines .hero-line:nth-child(3)>span{animation-delay:.16s}
.home-3d-hero .eyebrow,.home-3d-hero .hero-lead,.home-3d-hero .hero-actions,.home-3d-hero .hero-meta{opacity:0;transform:translateY(14px)}
html.ctl-boot-complete .home-3d-hero .eyebrow,html.ctl-boot-failsafe:not(.ctl-boot-running) .home-3d-hero .eyebrow{animation:ctlHeroMeta .42s .08s ease forwards}
html.ctl-boot-complete .home-3d-hero .hero-lead,html.ctl-boot-failsafe:not(.ctl-boot-running) .home-3d-hero .hero-lead{animation:ctlHeroMeta .46s .25s ease forwards}
html.ctl-boot-complete .home-3d-hero .hero-actions,html.ctl-boot-failsafe:not(.ctl-boot-running) .home-3d-hero .hero-actions{animation:ctlHeroMeta .46s .34s ease forwards}
html.ctl-boot-complete .home-3d-hero .hero-meta,html.ctl-boot-failsafe:not(.ctl-boot-running) .home-3d-hero .hero-meta{animation:ctlHeroMeta .46s .43s ease forwards}
.hero-scroll-cue{opacity:calc(1 - var(--hero-progress));box-shadow:0 0 calc(20px + var(--hero-edge) * 28px) rgba(34,230,255,.12);transition:border-color .2s ease}
.hero-scroll-cue::before{content:"";position:absolute;left:50%;bottom:-18px;width:1px;height:13px;background:linear-gradient(#70eaff,transparent);transform:translateX(-50%) scaleY(calc(1 + var(--hero-edge)));transform-origin:top}
@keyframes ctlHeroLine{0%{opacity:0;transform:translate3d(0,115%,0) skewY(3deg);letter-spacing:.025em;filter:blur(5px)}72%{opacity:1;filter:none}100%{opacity:1;transform:none;letter-spacing:-.02em;filter:none}}
@keyframes ctlHeroMeta{to{opacity:1;transform:none}}

/* 02 — hero-to-browser handoff */
.ctl-cinematic-handoff{position:fixed;inset:0;z-index:860;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;background:#01040d}
.ctl-cinematic-handoff::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 18%,rgba(1,4,13,.86) 88%);opacity:calc(var(--handoff-progress) * .9)}
.ctl-cinematic-handoff.is-active{opacity:1;visibility:visible}
.ctl-handoff-frame{position:absolute;left:0;top:0;overflow:hidden;background:#020711;box-shadow:0 calc(28px + var(--handoff-progress) * 28px) calc(78px + var(--handoff-progress) * 65px) rgba(0,0,0,.58),0 0 0 calc(var(--handoff-progress) * 1px) rgba(104,225,255,.32),0 0 calc(var(--handoff-progress) * 72px) rgba(30,166,255,.11);transform-origin:top left;will-change:width,height,transform,border-radius}
.ctl-handoff-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% center;filter:saturate(1.1) contrast(1.05) brightness(calc(.78 - var(--handoff-progress) * .1));transform:scale(calc(1 + var(--handoff-progress) * .018))}
.ctl-handoff-frame::before{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,rgba(1,4,13,.02),rgba(1,4,13,.62));opacity:calc(.2 + var(--handoff-progress) * .34)}
.ctl-handoff-frame::after{content:"";position:absolute;z-index:4;left:0;right:0;top:calc(var(--handoff-progress) * 100%);height:1px;background:linear-gradient(90deg,transparent,#79edff,transparent);box-shadow:0 0 26px rgba(84,232,255,.55);opacity:calc(var(--handoff-progress) * .9)}
.ctl-handoff-chrome{position:absolute;z-index:3;top:0;left:0;right:0;height:44px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid rgba(164,232,255,.18);background:rgba(3,10,24,.86);backdrop-filter:blur(12px);opacity:clamp(0,calc((var(--handoff-progress) - .2) * 1.7),1);transform:translateY(calc((1 - var(--handoff-progress)) * -18px))}
.ctl-handoff-chrome i{width:8px;height:8px;border-radius:50%;background:rgba(212,241,255,.5)}
.ctl-handoff-chrome span{margin-left:6px;color:#9cc4d8;font:800 .65rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em}

/* 03 — scroll-built website */
.cinematic-build{position:relative;height:470vh;background:#020611;color:#fff;border-top:1px solid rgba(102,229,255,.12);border-bottom:1px solid rgba(102,229,255,.12)}
.cinematic-build-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;align-items:center;background:radial-gradient(circle at 78% 28%,rgba(24,141,255,.17),transparent 30rem),linear-gradient(135deg,#020611 0%,#06152b 56%,#071d33 100%)}
.cinematic-build-sticky::before{content:"";position:absolute;inset:-8%;pointer-events:none;background-image:linear-gradient(rgba(97,222,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(97,222,255,.05) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);transform:perspective(900px) rotateX(calc(var(--build-progress) * 1.4deg)) translateY(var(--build-shift,0px)) scale(calc(1 + var(--build-progress) * .02));transform-origin:center}
.cinematic-build-sticky::after{content:"BUILD SYSTEM / ACTIVE";position:absolute;right:24px;bottom:20px;color:rgba(123,228,255,.42);font:800 .56rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em}
.build-experience{position:relative;z-index:2;width:min(1240px,calc(100% - 44px));margin:auto;display:grid;grid-template-columns:minmax(210px,.32fr) minmax(0,1fr);gap:clamp(26px,5vw,72px);align-items:center}
.build-narrative{position:relative;z-index:4}
.build-kicker{display:flex;align-items:center;gap:12px;margin:0 0 16px;color:#61e8ff;font-size:.72rem;font-weight:950;letter-spacing:.19em;text-transform:uppercase}
.build-kicker::before{content:"";width:44px;height:2px;background:#2de6ff;box-shadow:0 0 18px rgba(45,230,255,.55)}
.build-narrative h2{max-width:8ch;margin:0;color:#fff;font-size:clamp(3.2rem,6.7vw,6.8rem);line-height:.88;letter-spacing:-.075em}
.build-narrative h2 em{display:block;color:transparent;font-style:normal;-webkit-text-stroke:1px rgba(169,229,255,.5)}
.build-status-wrap{margin-top:28px;padding-top:18px;border-top:1px solid rgba(160,229,255,.15)}
.build-index{display:block;color:#5edfff;font:900 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em}
.build-status{display:block;margin-top:8px;color:#d9f4ff;font-size:.82rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.build-progress-track{height:2px;margin-top:14px;background:rgba(143,221,255,.12);overflow:hidden}
.build-progress-track::after{content:"";display:block;width:100%;height:100%;transform:scaleX(var(--build-progress));transform-origin:left;background:linear-gradient(90deg,#168bff,#22e6ff);box-shadow:0 0 18px rgba(34,230,255,.5)}
.build-device{position:relative;width:100%;height:min(72svh,720px);min-height:480px;overflow:hidden;border:1px solid rgba(133,225,255,calc(.12 + var(--stage-1) * .25));border-radius:26px;background:#07111f;box-shadow:0 48px 120px rgba(0,0,0,.5),0 0 calc(45px + var(--stage-3) * 48px) rgba(17,133,255,calc(.06 + var(--stage-3) * .08));transform-origin:center;will-change:transform}
.build-device::before{content:"";position:absolute;z-index:14;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(100,235,255,.3),transparent) top left/var(--stage-1) 1px no-repeat,linear-gradient(180deg,rgba(100,235,255,.3),transparent) top left/1px var(--stage-1) no-repeat;opacity:.8}
.build-browser-bar{position:relative;z-index:12;height:46px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid rgba(128,223,255,.12);background:rgba(3,10,22,.96);clip-path:inset(0 calc((1 - var(--stage-1)) * 100%) 0 0)}
.build-browser-bar i{width:8px;height:8px;border-radius:50%;background:#49647b}.build-browser-bar i:nth-child(1){background:#ff7182}.build-browser-bar i:nth-child(2){background:#ffd66d}.build-browser-bar i:nth-child(3){background:#64e5a1}
.build-browser-bar span{margin-left:8px;color:#83a5bd;font:700 .66rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.build-canvas{position:absolute;inset:46px 0 0;overflow:hidden;background:#f8fbff;color:#07152d}
.build-canvas::before{content:"X: 024  Y: 018   VIEWPORT / 1440";position:absolute;z-index:8;left:16px;bottom:13px;color:rgba(8,83,123,.45);font:700 .54rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;pointer-events:none;opacity:calc(1 - var(--stage-3))}
.build-seed-video{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% center;filter:saturate(1.04) contrast(1.03) brightness(calc(.64 - var(--stage-1) * .18));opacity:calc(1 - var(--stage-1) * .82);transform:scale(1);transition:opacity .12s linear}
.cinematic-build[data-build-stage="2"] .build-seed-video{opacity:.12}
.cinematic-build[data-build-stage="3"] .build-seed-video,.cinematic-build[data-build-stage="4"] .build-seed-video,.cinematic-build[data-build-stage="5"] .build-seed-video{opacity:0}
.build-wireframe,.build-designed,.build-live{position:absolute;inset:0}
.build-wireframe{z-index:3;padding:clamp(18px,3vw,42px);background:linear-gradient(rgba(16,96,135,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(16,96,135,.055) 1px,transparent 1px),#fbfdff;background-size:32px 32px;opacity:1;transition:opacity .16s linear}
.build-wireframe::before{content:"";position:absolute;inset:clamp(12px,2vw,26px);border:1px dashed rgba(13,119,166,.22);box-shadow:inset 25% 0 0 -24.9% rgba(13,119,166,.18),inset -25% 0 0 -24.9% rgba(13,119,166,.18);opacity:calc(.35 + var(--stage-1) * .65)}
.build-wireframe::after{content:"1280  •  960  •  640  •  320";position:absolute;right:18px;top:13px;color:rgba(7,104,148,.45);font:700 .52rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em}
.cinematic-build[data-build-stage="3"] .build-wireframe{opacity:calc(.28 * (1 - var(--stage-3)))}
.cinematic-build[data-build-stage="4"] .build-wireframe,.cinematic-build[data-build-stage="5"] .build-wireframe{opacity:0}
.build-wire-nav{height:34px;display:grid;grid-template-columns:110px 1fr 90px;gap:14px;align-items:center}
.wire{border-radius:6px;background:#e2eaf2;transform:scaleX(var(--stage-2));transform-origin:left;opacity:calc(.18 + var(--stage-2) * .82)}
.build-wire-nav .wire:nth-child(2){width:48%;justify-self:end;transform-origin:right}.build-wire-nav .wire:nth-child(3){background:#d2deea}
.build-wire-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(18px,3vw,40px);margin-top:clamp(34px,6vw,74px);align-items:center}
.build-wire-copy{display:grid;gap:12px}.build-wire-copy .wire:nth-child(1){width:35%;height:11px}.build-wire-copy .wire:nth-child(2){width:92%;height:48px}.build-wire-copy .wire:nth-child(3){width:76%;height:48px}.build-wire-copy .wire:nth-child(4){width:68%;height:14px}.build-wire-copy .wire:nth-child(5){width:48%;height:14px}.build-wire-copy .wire:nth-child(6){width:132px;height:42px;margin-top:10px;background:#cbd9e7}
.build-wire-media{height:min(40vh,350px);border:1px solid rgba(9,107,153,.25);border-radius:18px;background:linear-gradient(135deg,rgba(230,237,244,calc(.12 + var(--stage-2) * .88)),rgba(215,227,237,calc(.12 + var(--stage-2) * .88)));position:relative;overflow:hidden;clip-path:inset(calc((1 - var(--stage-1)) * 48%) calc((1 - var(--stage-1)) * 48%) round 18px)}
.build-wire-media::before,.build-wire-media::after{content:"";position:absolute;border-radius:50%;border:1px solid #c5d6e3;opacity:var(--stage-2)}.build-wire-media::before{width:42%;aspect-ratio:1;left:14%;top:23%}.build-wire-media::after{width:20%;aspect-ratio:1;right:18%;bottom:16%}
.build-designed{z-index:5;display:grid;grid-template-rows:auto 1fr;background:radial-gradient(circle at 82% 26%,rgba(73,211,255,.17),transparent 22rem),linear-gradient(135deg,#fff 0%,#f4fbff 68%,#e8f8ff 100%);opacity:var(--stage-3);clip-path:inset(0 calc((1 - var(--stage-3)) * 100%) 0 0);transform:scale(calc(1.018 - var(--stage-3) * .018));transform-origin:left center}
.build-designed::before{content:"";position:absolute;z-index:8;top:0;bottom:0;left:calc(var(--stage-3) * 100% - 12%);width:12%;background:linear-gradient(90deg,transparent,rgba(64,215,255,.18),rgba(255,255,255,.82),transparent);filter:blur(4px);pointer-events:none;opacity:calc(var(--stage-3) * .9)}
.build-designed::after{content:"";position:absolute;z-index:10;width:18px;height:18px;border:1px solid rgba(6,65,102,.62);border-radius:50%;left:calc(19% + var(--stage-4) * 52%);top:calc(66% - var(--stage-4) * 25%);box-shadow:0 0 0 4px rgba(34,230,255,.1),0 8px 18px rgba(0,0,0,.12);opacity:calc(var(--stage-4) * (1 - var(--stage-5)));transform:scale(calc(.7 + var(--stage-4) * .3));pointer-events:none}
.cinematic-build[data-build-stage="5"] .build-designed{opacity:calc(1 - var(--stage-5) * .88);clip-path:inset(0);transform:scale(calc(1 - var(--stage-5) * .008))}
.designed-nav{display:flex;align-items:center;justify-content:space-between;padding:18px clamp(18px,3vw,36px);border-bottom:1px solid #d9eaf3}.designed-brand{font-size:.9rem;font-weight:950;letter-spacing:.14em}.designed-links{display:flex;gap:18px;color:#57718a;font-size:.72rem;font-weight:850}.designed-nav button{border:0;border-radius:999px;padding:10px 14px;background:#07152d;color:#fff;font-weight:850;transform:scale(calc(1 + var(--stage-4) * .055));box-shadow:0 0 calc(var(--stage-4) * 26px) rgba(24,151,220,.18)}
.designed-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.86fr);gap:clamp(18px,4vw,52px);align-items:center;padding:clamp(24px,5vw,64px)}.designed-copy small{display:block;margin-bottom:13px;color:#0786cf;font-weight:950;letter-spacing:.17em;text-transform:uppercase}.designed-copy h3{max-width:8ch;margin:0;color:#07152d;font-size:clamp(2.5rem,5vw,5.5rem);line-height:.9;letter-spacing:-.07em}.designed-copy p{max-width:32rem;margin:18px 0;color:#53687d}.designed-actions{display:flex;flex-wrap:wrap;gap:9px}.designed-actions span{padding:10px 14px;border-radius:999px;background:#07152d;color:#fff;font-size:.76rem;font-weight:850;transform:translateY(calc(var(--stage-4) * -3px))}.designed-actions span:last-child{background:#e4f4fc;color:#0b6f9e}
.designed-product{position:relative;min-height:320px;display:grid;place-items:center;border-radius:24px;background:radial-gradient(circle at 50% 45%,#fff 0 14%,#b8efff 15% 18%,transparent 19%),linear-gradient(145deg,#07152d,#063a64);box-shadow:0 24px 54px rgba(6,44,76,.2);overflow:hidden;transform:perspective(700px) rotateY(calc(var(--stage-4) * -2deg)) translateZ(0)}.designed-product::before,.designed-product::after{content:"";position:absolute;width:180px;aspect-ratio:1;border-radius:50%;border:1px solid rgba(119,236,255,.24)}.designed-product::before{transform:scale(calc(1.55 + var(--stage-4) * .1))}.designed-product::after{transform:scale(calc(2.15 + var(--stage-4) * .13))}.designed-product strong{position:relative;z-index:2;color:#fff;font-size:clamp(1.5rem,4vw,3.2rem);letter-spacing:-.05em;text-align:center}.designed-product strong span{display:block;color:#62e8ff;font-size:.35em;letter-spacing:.18em;text-transform:uppercase}
.build-live{z-index:9;background:#fff;opacity:var(--stage-5);clip-path:inset(calc((1 - var(--stage-5)) * 48%) calc((1 - var(--stage-5)) * 1.5%) round calc((1 - var(--stage-5)) * 20px));transform:scale(calc(.992 + var(--stage-5) * .008));pointer-events:none}
.build-live::after{content:"";position:absolute;z-index:3;left:0;right:0;top:calc(var(--stage-5) * 100%);height:2px;background:linear-gradient(90deg,transparent,#60ebff,#fff,#60ebff,transparent);box-shadow:0 0 28px rgba(34,230,255,.72);opacity:calc((1 - var(--stage-5)) * .8);pointer-events:none}
.build-live.is-interactive{pointer-events:auto}
.build-live iframe{width:100%;height:100%;border:0;background:#fff;filter:blur(calc((1 - var(--stage-5)) * 3px)) contrast(calc(.9 + var(--stage-5) * .1));opacity:calc(.4 + var(--stage-5) * .6)}
.build-live-badge{visibility:hidden;pointer-events:none;position:absolute;z-index:11;right:16px;bottom:16px;display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid rgba(103,229,255,.18);border-radius:999px;background:rgba(2,9,20,.86);color:#d9f8ff;font-size:.64rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(12px);text-decoration:none;opacity:0;transform:translateY(10px)}
.cinematic-build[data-build-stage="5"] .build-live-badge{visibility:visible;pointer-events:auto;opacity:var(--stage-5);transform:translateY(calc((1 - var(--stage-5)) * 10px))}
.build-live-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#45f2a3;box-shadow:0 0 12px rgba(69,242,163,.8)}

@media(max-width:767px){
  .home-3d-hero .hero-tech-video{transform:scale(calc(1.02 + var(--hero-progress) * .035))}
  .home-3d-hero::after{transform:translateY(calc(var(--hero-progress) * -15px))}
  .ctl-boot-inner::before,.ctl-boot-inner::after{display:none}
}
@media(max-width:640px){
  .ctl-boot-inner{width:calc(100vw - 34px);padding-top:20px}.ctl-boot-mark{font-size:clamp(2.6rem,14vw,4.5rem)}.ctl-boot-title{font-size:.67rem;letter-spacing:.18em}.ctl-boot-console{grid-template-columns:1fr;margin-top:26px}.ctl-boot-code{font-size:.56rem;text-align:left}
  .ctl-cinematic-handoff{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  html.ctl-boot-running,html.ctl-boot-running body{overflow:auto}.ctl-boot{display:none!important}.ctl-cinematic-handoff{display:none!important}
  .hero-title-lines .hero-line>span,.home-3d-hero .eyebrow,.home-3d-hero .hero-lead,.home-3d-hero .hero-actions,.home-3d-hero .hero-meta{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .home-3d-hero .hero-tech-video,.home-3d-hero::after{transform:none!important;filter:none!important}
}


/* 2026-09 sharp cinematic UI geometry */
.build-device,
.wire,
.designed-nav button,
.designed-actions span,
.build-live-badge{
  border-radius:2px!important;
}