:root{--bg:#f2efe9;--text:#0d0d0d;--muted:#595856;--blue:#0339a6;--line:rgba(3,57,166,.17);--glass:rgba(255,255,255,.33);--glow:rgba(3,57,166,.12);color-scheme:light}html[data-theme=dark]{--bg:#011640;--text:#f2efe9;--muted:#bfbfbf;--blue:#7caeff;--line:rgba(143,191,255,.23);--glass:rgba(24,64,118,.26);--glow:rgba(3,57,166,.65);color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-snap-type:y proximity;scroll-padding-top:20px}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,'IBM Plex Sans Arabic',sans-serif;transition:background .4s,color .4s}html[lang=ar] body{font-family:'IBM Plex Sans Arabic',Inter,sans-serif}button,input,select,textarea{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button,a{color:inherit}button,summary{cursor:pointer}button{border:0}a{text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:6px}::selection{background:#0339a6;color:#fff}.ambient{position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 18% 48%,var(--glow),transparent 53%)}header{position:absolute;top:30px;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;z-index:10}.glass{background:var(--glass);border:1px solid var(--line);box-shadow:inset 0 1px 0 #ffffff30,0 12px 45px #00133306;backdrop-filter:blur(24px)}.logo{font-family:Inter,sans-serif;font-size:26px;letter-spacing:-3px;padding:12px 23px;border-radius:40px;direction:ltr;font-weight:600}.logo span{font-size:10px;letter-spacing:0;vertical-align:top;margin-left:6px}.controls{display:flex;gap:10px;align-items:center}#language{border-radius:30px;padding:13px 23px;font-size:14px}.settings{position:relative}.settings summary{list-style:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px}.settings summary::-webkit-details-marker{display:none}.settings-menu{position:absolute;inset-inline-end:0;top:58px;padding:20px;border-radius:20px;min-width:200px;background:var(--bg)}select{display:block;margin-top:12px;padding:8px;width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px}.scene{min-height:100svh;padding:96px 9vw 65px;position:relative;scroll-snap-align:start;max-width:1800px;margin:auto}.hero{display:flex;flex-direction:column;justify-content:center;padding-top:160px}.hero-body{width:100%}.eyebrow{font-size:14px;font-weight:500;letter-spacing:.16em;line-height:2}html[lang=ar] .eyebrow{letter-spacing:0}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(58px,6.8vw,112px);font-weight:500;line-height:1.12;letter-spacing:-.055em;margin-bottom:48px}html[lang=ar] h1{font-size:clamp(60px,6.8vw,106px);line-height:1.42;letter-spacing:-.045em}em{font-style:normal;color:var(--blue)}.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:30px;max-width:1080px}.hero-bottom p{font-size:18px;line-height:1.9;margin:0}.hero-bottom p span{color:var(--muted);font-size:16px}.explore{display:flex;align-items:center;gap:25px;font-size:14px}.circle{border:1px solid var(--line);border-radius:50%;height:50px;width:50px;display:grid;place-items:center;font-size:22px;transition:transform .3s}.explore:hover .circle{transform:translateY(6px)}.scene-foot{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted);margin-top:70px;letter-spacing:.12em}.domain{direction:ltr}.section-label{font-size:13px;letter-spacing:.1em;color:var(--muted);margin-bottom:65px}h2{font-size:clamp(40px,4.6vw,76px);font-weight:500;letter-spacing:-.045em;line-height:1.2;margin-bottom:32px}html[lang=ar] h2{line-height:1.5;letter-spacing:-.025em}.lead{font-size:clamp(20px,2vw,28px);line-height:1.8;max-width:650px}.muted{color:var(--muted);font-size:18px;line-height:1.9;max-width:520px}.small{font-size:14px}.about-grid,.build-grid,.impact-layout{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.portrait{height:500px;position:relative;background:linear-gradient(0deg,var(--bg),transparent 30%),linear-gradient(135deg,transparent,#8b90941c,transparent);border-top:1px solid var(--line);display:grid;place-items:center}.portrait-note{display:flex;flex-direction:column;gap:15px;text-align:center;color:var(--muted)}.portrait-note span{font:12px Inter;letter-spacing:.18em}.portrait-note strong{font-weight:400;font-size:18px}.pmp{position:absolute;bottom:35px;inset-inline-end:0;padding:19px 25px;border-radius:18px;display:flex;gap:20px;align-items:center;direction:ltr}.pmp b{font-size:28px}.pmp span{font:11px/1.5 Inter}.impact{display:flex;flex-direction:column;justify-content:center}.metric-stage{position:relative;text-align:center;min-height:440px;display:flex;flex-direction:column;justify-content:center}.metric-stage strong{font-size:clamp(110px,14vw,230px);font-weight:500;letter-spacing:-.08em;line-height:1.1;color:var(--blue);z-index:1}.metric-stage p{font-size:24px;margin-top:24px}.ghost{position:absolute;font-size:clamp(140px,19vw,300px);font-weight:600;opacity:.035;top:-20px;inset-inline-start:-30px;direction:ltr}.metric-nav{display:flex;justify-content:center;gap:20px;direction:ltr}.metric-nav button{background:none;color:var(--muted);border-bottom:2px solid var(--line);padding:12px 18px}.metric-nav .active{border-color:var(--blue);color:var(--blue)}.stack{padding-top:25px}.build-card{border-radius:22px;padding:26px;margin-bottom:16px;transition:background .4s,transform .4s}.build-card:nth-child(2){margin-inline-start:22px}.build-card:nth-child(3){margin-inline-start:44px}.build-card[open]{background:var(--glow);transform:translateY(-5px)}.build-card summary{list-style:none;display:flex;align-items:center;gap:22px}.build-card summary::-webkit-details-marker{display:none}.build-card h3{font-size:22px;font-weight:500;margin:0;flex:1}.build-card summary>span{font-size:12px;color:var(--muted)}.build-card summary b{font-size:22px;font-weight:400}.build-card[open] summary b{transform:rotate(45deg)}.build-card p{font-size:16px;line-height:1.9;color:var(--muted);margin:24px 0 0}.flow-layout{display:flex;flex-direction:column;margin-top:-35px}#network{max-width:650px;width:100%;align-self:flex-end;position:relative;color:var(--blue)}#network svg{width:100%;overflow:visible}#network circle{fill:var(--blue);transition:cx .8s,cy .8s,r .8s}#network line{stroke:var(--blue);stroke-width:1;transition:all .8s}#flow-word{position:absolute;bottom:0;right:20px;font-size:12px;letter-spacing:.2em;color:var(--muted)}.steps{display:flex;border-top:1px solid var(--line);margin-top:24px}.steps button{background:none;color:var(--muted);padding:24px 12px;flex:1;display:flex;gap:15px;align-items:center;border-top:2px solid transparent;margin-top:-1px;text-align:start}.steps button span{font-size:12px}.steps button b{font-size:19px;font-weight:500}.steps button.active{color:var(--blue);border-color:var(--blue)}#step-description{font-size:20px;margin-top:25px;min-height:72px}.closing{display:flex;flex-direction:column}.closing-body{text-align:center;flex:1;padding:35px 0 70px}.closing h2{font-size:clamp(48px,6.8vw,100px)}.contact-cta{border-radius:40px;background:#0339a6;color:#fff;padding:17px 32px;font-size:17px;transition:transform .3s,box-shadow .3s}.contact-cta:hover{transform:translateY(-3px);box-shadow:0 10px 30px #0339a62a}.socials{display:flex;justify-content:center;gap:12px;margin-top:25px}.socials a{display:grid;place-items:center;width:45px;height:45px;border-radius:50%;background:var(--glass);border:1px solid var(--line)}svg.icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6}.socials a:hover{color:var(--blue)}footer{border-top:1px solid var(--line);padding-top:25px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}footer .socials{margin:0}.wordmark{font:600 30px Inter;letter-spacing:-3px;color:var(--text)}.prototype{font-size:12px}.chapter-nav{position:fixed;inset-inline-end:25px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:13px;z-index:5}.chapter-nav a{height:8px;width:8px;border:1px solid var(--muted);border-radius:50%;transition:all .3s}.chapter-nav a.active{background:var(--blue);border-color:var(--blue);height:23px;border-radius:5px}.skip{position:fixed;top:-70px;background:var(--bg);padding:15px;z-index:30}.skip:focus{top:0}dialog{padding:0;border:1px solid var(--line);border-radius:26px;background:var(--bg);color:var(--text);max-width:600px;width:calc(100% - 32px);max-height:90svh;box-shadow:0 40px 140px #00133340}dialog::backdrop{background:#00133370;backdrop-filter:blur(12px)}.panel{padding:35px}.panel h2{font-size:36px;margin-bottom:10px}.close{position:absolute;inset-inline-end:20px;top:18px;background:transparent;color:var(--text);font-size:30px;width:40px;height:40px}form{display:grid;grid-template-columns:1fr 1fr;gap:16px}form label{font-size:14px}form label:nth-child(n+3){grid-column:1/-1}input,textarea{display:block;border:0;border-bottom:1px solid var(--line);padding:10px 0;width:100%;background:transparent;color:var(--text);border-radius:0}form button{grid-column:1/-1;margin-top:8px}#form-status{grid-column:1/-1;font-size:14px;margin:0}.contact-links{display:flex;gap:18px;border-top:1px solid var(--line);margin-top:24px;padding-top:20px;flex-wrap:wrap}.contact-links a{background:none;color:var(--text);display:flex;align-items:center;gap:8px;font-size:14px}.reveal{opacity:1;transform:none}.js .reveal{opacity:0;transform:translateY(25px);transition:opacity .8s,transform .8s}.js .reveal.visible{opacity:1;transform:none}@media(min-width:1600px){.scene{padding-inline:145px}}@media(max-width:1199px){.scene{padding-inline:7vw}.about-grid,.build-grid,.impact-layout{gap:5vw}.build-card{padding:22px}.build-card h3{font-size:19px}.portrait{height:440px}}@media(max-width:767px){html{scroll-snap-type:none}header{top:22px;left:6%;right:6%}.logo{font-size:24px;padding:10px 18px}#language{padding:11px 18px}.settings summary{width:40px;height:40px}.scene{padding:88px 7vw 40px;min-height:90svh}.hero{min-height:100svh;padding-top:155px;justify-content:center}h1{font-size:clamp(46px,10.5vw,76px);line-height:1.18;margin-bottom:36px}html[lang=ar] h1{font-size:clamp(43px,10.9vw,77px);line-height:1.5}.hero .eyebrow{max-width:220px;font-size:12px;margin-bottom:27px}.hero-bottom{align-items:start;flex-direction:column;gap:30px}.hero-bottom p{font-size:17px}.explore{width:100%;justify-content:space-between}.scene-foot{margin-top:40px;font-size:10px}.section-label{margin-bottom:35px}h2{font-size:42px}.about-grid,.build-grid,.impact-layout{grid-template-columns:1fr;gap:30px}.portrait{height:280px;grid-row:1}.portrait-note{gap:10px}.pmp{bottom:15px;padding:13px 18px}.pmp b{font-size:23px}.about-grid .reveal{grid-row:2}.about{padding-top:65px}.lead{font-size:21px}.muted{font-size:16px}.small{font-size:13px}.impact-layout{gap:15px}.metric-stage{min-height:360px}.metric-stage strong{font-size:clamp(115px,31vw,200px)}.ghost{font-size:48vw;top:0;inset-inline-start:0}.impact-layout h2{font-size:38px}.impact .small{max-width:280px}.stack{padding-top:0}.build-card:nth-child(2){margin-inline-start:12px}.build-card:nth-child(3){margin-inline-start:24px}.build-card{padding:24px 18px}.flow-layout{flex-direction:row-reverse;gap:8px;margin-top:10px;align-items:center}.steps{flex-direction:column;border-top:0;border-inline-start:1px solid var(--line);flex:1;margin-top:0}.steps button{border-top:0;border-inline-start:2px solid transparent;gap:13px;padding:22px 16px}.steps button.active{border-inline-start-color:var(--blue)}.steps button b{font-size:18px}#network{width:43%;align-self:stretch;display:flex;align-items:center}#network svg{transform:rotate(90deg) scale(1.3)}#flow-word{display:none}#step-description{font-size:18px;min-height:100px}.closing{min-height:90svh}.closing h2{font-size:clamp(42px,10.5vw,70px)}.closing .eyebrow{font-size:14px;letter-spacing:0}.closing-body{padding:40px 0 70px}footer{flex-wrap:wrap;gap:18px}footer>span{font-size:11px}footer .socials a{height:36px;width:36px}.prototype{width:100%;text-align:center}.chapter-nav{inset-inline-end:8px;gap:10px}.chapter-nav a{width:4px;height:4px}.chapter-nav a.active{height:16px}.panel{padding:30px 24px}.panel h2{font-size:30px}dialog{margin:auto auto 0;width:100%;max-width:none;max-height:92svh;border-radius:25px 25px 0 0}form{grid-template-columns:1fr}form label{grid-column:1/-1}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:none}*,*::before,*::after{transition:none!important;animation:none!important}.js .reveal{opacity:1;transform:none}}
.skip{transform:translateY(-200%)}.skip:focus{transform:translateY(0)}
@supports(animation-timeline:view()){ @media(prefers-reduced-motion:no-preference){.hero-body,.about-grid,.build-grid{animation:scene-depth linear both;animation-timeline:view();animation-range:exit 0% exit 95%}@keyframes scene-depth{to{opacity:.35;transform:scale(.98);filter:blur(3px)}}}}

.logo,.wordmark{display:grid;place-items:center;position:relative;width:76px;height:76px;padding:0;overflow:hidden;border-radius:50%}.logo img,.wordmark img{grid-area:1/1;object-fit:contain}.brand-light{width:116px;height:116px;max-width:none}.brand-dark{display:none;width:65px;height:65px}html[data-theme=dark] .brand-light{display:none}html[data-theme=dark] .brand-dark{display:block}.wordmark{width:58px;height:58px}.wordmark .brand-light{width:92px;height:92px}.wordmark .brand-dark{width:50px;height:50px}.pmp{padding:16px 20px;gap:16px}.pmp img{width:100px;height:100px;object-fit:contain}.pmp span{font:14px/1.7 inherit}.pmp:hover{border-color:var(--blue)}.contact-links a{padding-block:8px}@media(max-width:767px){.logo{width:60px;height:60px}.logo .brand-light{width:96px;height:96px}.logo .brand-dark{width:54px;height:54px}.pmp{padding:10px 14px;bottom:0}.pmp img{width:72px;height:72px}.pmp span{font-size:12px}}
.logo img,.wordmark img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.pmp span{font-family:inherit;font-size:14px;line-height:1.7}

.logo,.wordmark{border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;overflow:visible}
/* Compact credential with an accessible hover/focus label. */
.pmp{padding:10px;gap:0;border-radius:16px;overflow:visible}
.pmp img{width:64px;height:64px;display:block}
.pmp span{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,4px);padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font-size:13px;line-height:1.6;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s,visibility .18s;box-shadow:0 8px 24px #00133318}
.pmp:hover span,.pmp:focus-visible span{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(max-width:767px){.pmp{padding:8px}.pmp img{width:52px;height:52px}.pmp span{left:0;transform:translate(0,4px)}.pmp:hover span,.pmp:focus-visible span{transform:translate(0,0)}}

/* Scene paging and portrait-corner credential. */
html{scroll-snap-type:y mandatory;scroll-padding-top:0}
.scene{min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always}
.portrait .pmp{bottom:0;right:auto;left:auto;inset-inline-start:auto;inset-inline-end:0;direction:inherit}
.pmp span{left:auto;right:auto;inset-inline-end:0;transform:translateY(4px)}
.pmp:hover span,.pmp:focus-visible span{transform:translateY(0)}
#process-playback{background:var(--glass);border:1px solid var(--line);border-radius:30px;padding:10px 18px;color:var(--muted);font-size:14px}
.steps button{position:relative;overflow:hidden}
.playing .steps button.active::after{content:'';position:absolute;bottom:0;inset-inline-start:0;height:2px;width:100%;background:var(--blue);transform-origin:left;animation:step-clock 4s linear}
html[dir=rtl] .playing .steps button.active::after{transform-origin:right}
@keyframes step-clock{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:y proximity}}
/* A single aligned footer row with balanced spacing. */
footer{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(12px,3vw,48px);padding-top:24px}
footer>span:not(.prototype){text-align:center;font-size:13px;white-space:nowrap}
footer .socials{margin:0;gap:10px;justify-content:flex-end}
footer .prototype{display:none}
@media(max-width:767px){footer{grid-template-columns:36px minmax(0,1fr) auto;gap:8px}footer .wordmark{width:36px;height:44px}footer .wordmark .brand-light{width:70px;height:70px}footer .wordmark .brand-dark{width:40px;height:40px}footer>span:not(.prototype){font-size:11px;white-space:normal;line-height:1.6}footer .socials{gap:4px}footer .socials a{width:30px;height:36px;border:0;background:transparent}footer svg.icon{width:17px;height:17px}}

/* Preserve the supplied photograph in full, with its original aspect ratio. */
.portrait{height:auto;width:min(100%,440px);justify-self:center;display:block;position:relative;background:none;border:0;margin:0 0 44px;overflow:visible}
.portrait-frame{padding:8px;border:1px solid var(--line);border-radius:5px;background:var(--glass);box-shadow:0 22px 60px #00133318}
.portrait-photo{display:block;width:100%;height:auto;aspect-ratio:3000/3599;object-fit:contain;border-radius:2px}
.portrait .pmp{bottom:0;inset-inline-end:0;transform:translate(50%,50%);z-index:2;background:var(--bg);box-shadow:0 8px 28px #00133320}
html[dir=rtl] .portrait .pmp{transform:translate(-50%,50%)}
@media(max-width:767px){.portrait{width:min(calc(100% - 36px),340px);height:auto;margin:0 auto 42px}.portrait-frame{padding:6px}}

.metric-nav{direction:inherit}
#metric-playback{align-self:center;margin-top:18px;background:var(--glass);border:1px solid var(--line);border-radius:30px;padding:10px 18px;color:var(--muted);font-size:14px}
.metric-nav button{position:relative;overflow:hidden}
.playing .metric-nav button.active::after{content:'';position:absolute;bottom:0;inset-inline-start:0;height:2px;width:100%;background:var(--blue);transform-origin:left;animation:step-clock 4s linear}
html[dir=rtl] .playing .metric-nav button.active::after{transform-origin:right}

.stack{position:relative;height:390px;padding:0;perspective:1000px}
.stack .build-card{position:absolute;top:0;inset-inline:0;margin:0!important;min-height:240px;background:var(--bg);transform:translateY(calc(var(--layer)*62px)) scale(calc(1 - var(--layer)*.035));transform-origin:center bottom;z-index:calc(3 - var(--layer));transition:transform .7s cubic-bezier(.22,1,.36,1),box-shadow .7s,border-color .7s;padding:28px}
.stack .build-card.active{transform:translateY(-12px) scale(1);border-color:var(--blue);box-shadow:0 24px 55px #00133325;background:var(--bg)}
.stack .build-card:not(.active) summary{padding-top:160px}
.stack .build-card.active p{animation:card-copy .65s ease both}
@keyframes card-copy{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
#build-playback{grid-column:2;justify-self:start;margin-top:-45px;border:1px solid var(--line);background:var(--glass);color:var(--muted);border-radius:30px;padding:10px 18px;font-size:14px}
@media(max-width:767px){.stack{height:400px;margin-top:18px}.stack .build-card{padding:22px;min-height:250px}#build-playback{grid-column:1;margin-top:0}}
/* Full approved Arabic copy and transparent brand artwork. */
.brand-light,.wordmark .brand-light{width:65px;height:65px;filter:brightness(0) saturate(100%) invert(17%) sepia(98%) saturate(2930%) hue-rotate(217deg) brightness(78%) contrast(108%)}
.wordmark .brand-light{width:50px;height:50px}
.hero-bottom>p{max-width:690px}.section-ending{font-size:20px;line-height:1.9;color:var(--muted);margin:48px 0 0;max-width:850px}.closing-body>.muted{margin:0 auto 28px}.about-grid{align-items:start}.about .portrait{margin-top:24px}.metric-stage #metric-detail{font-size:16px;line-height:1.8;min-height:65px;margin:0 auto 20px}.metric-stage .wide-number{font-size:clamp(45px,6vw,96px);letter-spacing:-.025em;line-height:1.5}.metric-stage #metric-label{font-size:22px;line-height:1.7}.how>h2,.build h2{font-size:clamp(34px,4vw,62px)}.how>.muted{max-width:850px}.how .flow-layout{margin-top:10px}.stack{height:610px}.stack .build-card{min-height:300px;z-index:calc(8 - var(--layer));transform:translateY(calc(var(--layer)*62px)) scale(calc(1 - var(--layer)*.025))}.stack .build-card.active{transform:translateY(-12px) scale(1)}.stack .build-card:not(.active) summary{padding-top:230px}.stack .build-card .keywords{font-size:13px;line-height:1.9;color:var(--muted);padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:767px){.logo .brand-light{width:54px;height:54px}.wordmark .brand-light{width:40px;height:40px}.stack{height:680px}.stack .build-card{min-height:370px;padding:22px 18px}.stack .build-card:not(.active) summary{padding-top:300px}.build-card h3{font-size:18px}.section-ending{font-size:18px}.metric-stage .wide-number{font-size:44px}.about .portrait{margin-top:0}.how>h2,.build h2{font-size:36px}}
/* Keep full copy reachable and bring scene content higher. */
.scene:not(.hero){padding-top:56px;padding-bottom:44px}
.section-label{margin-bottom:28px}
.about-grid{gap:5vw}.about h2{margin-bottom:18px}.about .lead{font-size:21px;line-height:1.65;margin-bottom:18px}.about .muted{font-size:16px;line-height:1.8;margin-bottom:18px}.about .portrait{width:min(100%,360px)}
.how>h2,.build h2,.impact h2{font-size:clamp(32px,3.5vw,54px);margin-bottom:20px}
.how>.muted{font-size:16px;line-height:1.8;margin-bottom:8px}
.how #network{max-width:460px}.how .flow-layout{margin-top:-18px}.how .steps{margin-top:10px}.how .steps button{padding:17px 10px}.how #step-description{font-size:18px;line-height:1.8;margin:16px 0;min-height:66px}
.section-ending{font-size:18px;line-height:1.75;margin-top:26px}
.build-grid{align-items:start;gap:28px 5vw}.build-grid>.muted,.build-grid>div>.muted{font-size:16px;line-height:1.8}
.stack{height:525px}.stack .build-card{min-height:270px;padding:22px;transform:translateY(calc(var(--layer)*50px)) scale(calc(1 - var(--layer)*.025))}.stack .build-card:not(.active) summary{padding-top:196px}.stack .build-card p{font-size:15px;line-height:1.75;margin-top:18px}.stack .build-card .keywords{font-size:13px;margin-top:12px;padding-top:10px}.stack .build-card h3{font-size:20px}.stack .build-card summary{gap:12px}#build-playback{margin-top:-20px}
.topic-icon{width:25px;height:25px;flex:0 0 25px;fill:none;stroke:#0339A6;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
html[data-theme=dark] .topic-icon{background:#f2efe9;border-radius:8px;padding:4px;width:33px;height:33px;flex-basis:33px}
.steps button{gap:10px}.steps button b{font-size:17px}
/* Long scenes scroll freely; no forced snapping can hide their endings. */
.scene.long-scene{scroll-snap-align:none;scroll-snap-stop:normal}
@media(max-width:767px){.scene:not(.hero){padding-top:42px;padding-bottom:40px}.section-label{margin-bottom:24px}.about .portrait{width:min(calc(100% - 36px),280px)}.about-grid{gap:24px}.about h2{font-size:36px}.build-grid{gap:22px}.stack{height:590px;margin-top:0}.stack .build-card{min-height:325px;padding:20px 16px}.stack .build-card:not(.active) summary{padding-top:255px}.stack .build-card h3{font-size:17px}.build .section-ending{margin-top:20px}#build-playback{margin-top:0}.how .flow-layout{margin-top:8px}.how .steps button{padding:17px 8px;gap:8px}.how .steps button span{display:none}.how .steps button b{font-size:17px}.how #network{max-width:43%}.section-ending{font-size:16px}.hero .eyebrow{max-width:none}footer>span:not(.prototype){font-size:10px}}
.closing-body{padding-top:10px;padding-bottom:30px}.closing h2{font-size:clamp(44px,5.8vw,84px);margin-bottom:22px}.closing-body>.eyebrow{margin-bottom:15px}.closing-body>.muted{font-size:17px;line-height:1.8;margin-bottom:24px}

footer>span:not(.prototype){white-space:nowrap;line-height:1.5}footer{grid-template-columns:auto minmax(0,1fr) auto}@media(max-width:767px){footer>span:not(.prototype){font-size:10px}footer{gap:6px}footer .socials a{width:28px}}
.metric-stage{overflow:hidden;min-width:0;padding:12px}.metric-stage .ghost{max-width:100%;font-size:clamp(120px,16vw,230px)}
html[lang=en] .about .eyebrow{font-size:12px;letter-spacing:.08em}html[lang=en] .build-card h3{overflow-wrap:anywhere}html[lang=en] .hero-bottom>p{font-size:18px;line-height:1.8}
/* A short, unnumbered bridge within What I Build. */
.audience-bridge{margin-top:80px;padding:48px 0 12px;border-top:1px solid var(--line)}
.audience-bridge>.eyebrow{color:var(--blue);margin-bottom:18px}
.audience-heading{font-size:clamp(26px,3vw,43px);font-weight:500;line-height:1.5;letter-spacing:-.025em;max-width:900px;margin:0 0 22px}
.audience-copy{font-size:18px;line-height:1.9;color:var(--muted);max-width:850px;margin:0 0 42px}
.audience-sequence{display:flex;list-style:none;padding:0;margin:0;isolation:isolate;gap:0}
.audience-sequence li{flex:1;min-width:0;position:relative;padding:0 10px 0 0;display:flex;flex-direction:column;gap:20px}
html[dir=rtl] .audience-sequence li{padding:0 0 0 10px}
.audience-sequence li:not(:last-child)::after{content:'';position:absolute;top:9px;inset-inline-start:10px;width:100%;height:1px;background:linear-gradient(90deg,var(--line),#0339a659);z-index:-1}
html[dir=rtl] .audience-sequence li:not(:last-child)::after{background:linear-gradient(270deg,var(--line),#0339a659)}
.audience-node{width:19px;height:19px;border-radius:50%;background:var(--bg);border:1px solid #0339a6;box-shadow:0 0 0 5px var(--glass);display:block;position:relative}
.audience-node::after{content:'';position:absolute;inset:5px;border-radius:50%;background:#0339a6}
.audience-category{font-size:15px;line-height:1.8;font-weight:500;max-width:210px;padding-inline-end:10px}
html[data-theme=dark] .audience-node{background:#f2efe9}
@media(max-width:767px){.audience-bridge{margin-top:50px;padding-top:30px}.audience-heading{font-size:28px;line-height:1.5}.audience-copy{font-size:16px;margin-bottom:30px}.audience-sequence{flex-direction:column;gap:0}.audience-sequence li,html[dir=rtl] .audience-sequence li{flex-direction:row;align-items:flex-start;gap:20px;padding:0 0 26px}.audience-node{flex:0 0 19px;margin-top:5px}.audience-sequence li:not(:last-child)::after{top:18px;inset-inline-start:9px;width:1px;height:100%;background:var(--line)!important}.audience-category{max-width:none;font-size:16px;padding:0}.audience-sequence li:last-child{padding-bottom:0}}
.scene.long-scene{scroll-snap-align:start;scroll-snap-stop:normal}
html:has(.audience-bridge){scroll-snap-type:y proximity}
#audience-heading{scroll-margin-top:90px}
/* Restore section snapping while allowing the long build scene to be read. */
html:has(.audience-bridge){scroll-snap-type:y mandatory;scroll-padding-top:0}
.scene,.scene.long-scene{scroll-snap-align:start;scroll-snap-stop:always}
.audience-sequence li{cursor:default;outline-offset:9px}
.audience-node{transition:transform .28s ease,box-shadow .28s ease;transform-origin:center}
.audience-category{display:block;transition:transform .28s ease,color .28s ease;transform-origin:left top}
html[dir=rtl] .audience-category{transform-origin:right top}
@media(hover:hover){.audience-sequence li:hover .audience-node{transform:scale(1.45);box-shadow:0 0 0 7px var(--glass),0 0 22px #0339a629}.audience-sequence li:hover .audience-category{transform:scale(1.08);color:var(--blue)}}
.audience-sequence li:focus-visible .audience-node{transform:scale(1.45)}
.audience-sequence li:focus-visible .audience-category{transform:scale(1.08);color:var(--blue)}
@media(prefers-reduced-motion:reduce){html:has(.audience-bridge){scroll-snap-type:y proximity}.audience-node,.audience-category{transition:none}}