:root{
  --bg:#0b0a09; --bg2:#111; --card:#1a1a1a; --card2:#232221; --line:#2e2c2a;
  --text:#f3eee8; --muted:#a39d96;
  --o1:#ff6a00; --o2:#ffb347; --ember:#855330; --ember2:#ad7c53;
  --build:#ff5a1f; --link:#ffb347; --export:#ffe1a0;
  --grad:linear-gradient(90deg,#ff6a00,#ff8f2a 45%,#ffb347);
  --r:18px;
  --font:"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
.center{text-align:center}
.hot{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--o2);font-weight:700;margin-bottom:.8rem}
h1,h2,h3,h4{line-height:1.08;letter-spacing:-.02em;font-weight:800}
h2{font-size:clamp(2rem,4.4vw,3.2rem)}
.sub{color:var(--muted);font-size:1.12rem;max-width:640px;margin:1rem auto 0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.95rem 1.6rem;border-radius:999px;font-weight:700;text-decoration:none;color:#1a0a00;background:var(--grad);box-shadow:0 0 0 1px #ffb34755,0 10px 30px -8px #ff6a00aa;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #ffb347,0 14px 40px -6px #ff6a00}
.btn-ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px #ffffff33}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--o2)}
.btn-sm{padding:.55rem 1.05rem;font-size:.9rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.center-row{justify-content:center}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:.8rem clamp(16px,3vw,36px);background:linear-gradient(#0b0a09ee,#0b0a0900);backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;text-decoration:none;letter-spacing:-.01em}
.brand img{border-radius:8px}
.nav nav{display:flex;align-items:center;gap:1.4rem;font-size:.92rem}
.nav nav a:not(.btn){text-decoration:none;color:var(--muted)}
.nav nav a:not(.btn):hover{color:var(--text)}

/* hero */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;padding:120px 0 72px;overflow:hidden}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0b0a09f2 0%,#0b0a09b0 38%,#0b0a0920 70%),linear-gradient(0deg,var(--bg) 2%,#0b0a0900 40%)}
.hero-copy{position:relative}
.hero h1{font-size:clamp(2.7rem,7vw,5.6rem);max-width:12ch;text-shadow:0 4px 30px #000}
.lede{font-size:clamp(1.1rem,2vw,1.35rem);color:#e2dbd3;max-width:34ch;margin-top:1.1rem}

/* embers */
.embers{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.embers span{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:#ffb347;box-shadow:0 0 6px 2px #ff6a00aa;opacity:0;animation:rise 14s linear infinite}
.embers span:nth-child(1){left:6%;animation-delay:0s}
.embers span:nth-child(2){left:14%;animation-delay:3s;animation-duration:17s}
.embers span:nth-child(3){left:23%;animation-delay:7s}
.embers span:nth-child(4){left:31%;animation-delay:1.5s;animation-duration:19s;width:2px;height:2px}
.embers span:nth-child(5){left:42%;animation-delay:9s}
.embers span:nth-child(6){left:50%;animation-delay:5s;animation-duration:16s}
.embers span:nth-child(7){left:58%;animation-delay:11s;width:2px;height:2px}
.embers span:nth-child(8){left:66%;animation-delay:2s;animation-duration:18s}
.embers span:nth-child(9){left:74%;animation-delay:6s}
.embers span:nth-child(10){left:81%;animation-delay:10s;animation-duration:15s;width:4px;height:4px}
.embers span:nth-child(11){left:88%;animation-delay:4s}
.embers span:nth-child(12){left:94%;animation-delay:8s;animation-duration:20s}
.embers span:nth-child(13){left:37%;animation-delay:12s;width:2px;height:2px}
.embers span:nth-child(14){left:70%;animation-delay:13s}
@keyframes rise{0%{transform:translate(0,0);opacity:0}10%{opacity:.8}70%{opacity:.5}100%{transform:translate(40px,-105vh);opacity:0}}
main,footer{position:relative;z-index:2}

/* sections */
.section{padding:110px 0 30px}

/* stage tags */
.tag{display:inline-block;padding:.12rem .6rem;border-radius:999px;font-size:.82rem;font-weight:700;letter-spacing:.04em;margin:0 .1rem;border:1px solid currentColor}
.tag.build{color:var(--build)} .tag.link{color:var(--link)} .tag.export{color:var(--export)}

/* picker */
.picker{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:2.6rem}
.pick{position:relative;display:flex;flex-direction:column;gap:1rem;padding:1.4rem 1.2rem 1.2rem;border-radius:var(--r);background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);text-decoration:none;transition:transform .25s,border-color .25s,box-shadow .25s}
.pick:hover{transform:translateY(-4px);border-color:#ff6a0099;box-shadow:0 18px 40px -18px #ff6a00aa}
.pick .ic{width:34px;height:34px}
.pick-t{font-weight:800;font-size:1.06rem;line-height:1.2;flex:1}
.ic,.dot svg{fill:none;stroke:var(--o2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mini{display:flex;align-items:center;gap:4px}
.mini i{width:9px;height:9px;border-radius:50%}
.mini b{flex:0 0 18px;height:2px;background:linear-gradient(90deg,var(--ember),var(--ember2));opacity:.7}
.mini i.build{background:var(--build);box-shadow:0 0 6px var(--build)}
.mini i.link{background:var(--link);box-shadow:0 0 6px var(--link)}
.mini i.export{background:var(--export);box-shadow:0 0 6px var(--export)}

/* paths */
.path{margin-top:28px;padding:48px clamp(20px,4vw,56px);border-radius:28px;background:radial-gradient(120% 140% at 0% 0%,#ff6a0012,transparent 50%),linear-gradient(180deg,#151413,#111);border:1px solid var(--line)}
.path-head{display:grid;grid-template-columns:auto 1fr;column-gap:1.2rem;align-items:baseline;max-width:760px}
.num{font-weight:800;font-size:1rem;color:var(--ember2);letter-spacing:.1em}
.path-head h3{font-size:clamp(1.6rem,3vw,2.3rem)}
.path-head p{grid-column:2;color:var(--muted);margin-top:.5rem;font-size:1.05rem}

/* thought flow */
.flow{list-style:none;display:flex;align-items:flex-start;margin-top:2.6rem}
.node{flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 .4rem;--c:var(--o2)}
.node.build{--c:var(--build)} .node.link{--c:var(--link)} .node.export{--c:var(--export)}
.dot{position:relative;display:grid;place-items:center;width:84px;height:84px;border-radius:24px;background:#141312;border:1.5px solid color-mix(in srgb,var(--c) 70%,transparent);box-shadow:0 0 0 6px #0b0a09,0 0 28px -6px var(--c),inset 0 0 18px -8px var(--c);transition:transform .5s cubic-bezier(.2,.9,.3,1.3),box-shadow .5s,opacity .5s,border-color .5s}
.dot svg{width:38px;height:38px;stroke:var(--c)}
.stage{margin-top:1rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-size:.85rem;color:var(--c)}
.node p{margin-top:.5rem;color:#d9d2ca;max-width:30ch;font-size:1rem}
.conn{flex:0 0 clamp(40px,9vw,120px);height:84px;display:flex;align-items:center;position:relative}
.conn span{position:relative;display:block;width:100%;height:3px;border-radius:3px;background:#2a2725;overflow:hidden}
.conn span::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--o1),var(--o2));box-shadow:0 0 12px var(--o1);transform-origin:left;transform:scaleX(1)}
.conn::after{content:"";position:absolute;right:-2px;top:50%;width:10px;height:10px;border-top:3px solid var(--o2);border-right:3px solid var(--o2);transform:translateY(-50%) rotate(45deg);filter:drop-shadow(0 0 4px var(--o1))}

/* master flow (bigger) */
.master-sec{padding-top:90px}
.flow.master{margin-top:3.2rem}
.flow.master .dot{width:128px;height:128px;border-radius:50%;box-shadow:0 0 0 8px #0b0a09,0 0 60px -6px var(--c),inset 0 0 30px -10px var(--c)}
.flow.master .dot svg{width:56px;height:56px}
.flow.master .stage{font-size:1.5rem;letter-spacing:.12em}
.flow.master .node p{font-size:1.15rem}
.flow.master .conn{height:128px}
.flow.master .conn span{height:4px}

/* scroll-lit sequencing (only when JS enabled & motion allowed) */
.js-flow .flow:not(.lit) .dot{opacity:.25;transform:scale(.86);box-shadow:0 0 0 6px #0b0a09}
.js-flow .flow:not(.lit) .stage,.js-flow .flow:not(.lit) .node p{opacity:.25}
.js-flow .flow:not(.lit) .conn span::before{transform:scaleX(0)}
.js-flow .flow:not(.lit) .conn::after{opacity:0}
.js-flow .flow .stage,.js-flow .flow .node p{transition:opacity .6s}
.js-flow .flow .conn span::before{transition:transform .55s ease-out}
.js-flow .flow .conn::after{transition:opacity .3s}
.js-flow .flow.lit > :nth-child(1) *, .js-flow .flow.lit > :nth-child(1){transition-delay:.05s}
.js-flow .flow.lit > :nth-child(2) span::before{transition-delay:.45s}
.js-flow .flow.lit > :nth-child(2)::after{transition-delay:.95s}
.js-flow .flow.lit > :nth-child(3) .dot,.js-flow .flow.lit > :nth-child(3) .stage,.js-flow .flow.lit > :nth-child(3) p{transition-delay:1s}
.js-flow .flow.lit > :nth-child(4) span::before{transition-delay:1.45s}
.js-flow .flow.lit > :nth-child(4)::after{transition-delay:1.95s}
.js-flow .flow.lit > :nth-child(5) .dot,.js-flow .flow.lit > :nth-child(5) .stage,.js-flow .flow.lit > :nth-child(5) p{transition-delay:2s}
.flow.lit .dot{animation:pulse 3.6s ease-in-out 2.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px #0b0a09,0 0 44px -2px var(--c),inset 0 0 22px -6px var(--c)}}
.flow.master.lit .dot{animation-name:pulseBig}
@keyframes pulseBig{50%{box-shadow:0 0 0 8px #0b0a09,0 0 90px 0 var(--c),inset 0 0 36px -8px var(--c)}}

/* who */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:2.6rem}
.card{padding:1.8rem;border-radius:var(--r);background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line)}
.card .ic{width:34px;height:34px;margin-bottom:1rem}
.card h4{font-size:1.25rem}
.card p{color:var(--muted);margin-top:.5rem}

/* need */
.need-strip{margin-top:100px;border-block:1px solid var(--line);background:linear-gradient(90deg,#ff6a000d,#111 30%,#111 70%,#ffb3470d)}
.need{display:flex;align-items:center;gap:2rem;padding:36px 0;flex-wrap:wrap}
.need h2{font-size:1.4rem;white-space:nowrap}
.need ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px 36px;flex:1}
.need li{display:flex;flex-direction:column}
.need li strong{font-size:1.05rem}
.need li span{color:var(--muted);font-size:.9rem}

/* final */
.final{text-align:center;padding:120px 0 110px;display:flex;flex-direction:column;align-items:center}
.final img{border-radius:22px;box-shadow:0 0 70px -10px #ff6a00;margin-bottom:1.8rem}

.foot{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:.9rem}
.foot-in{display:flex;justify-content:space-between}

/* responsive */
@media (max-width:1050px){
  .picker{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .nav nav a:not(.btn){display:none}
  .hero{min-height:min(88vh,820px);padding-bottom:48px}
  .hero-bg img{object-position:62% 30%}
  .hero-shade{background:linear-gradient(0deg,var(--bg) 8%,#0b0a09d0 45%,#0b0a0940 100%)}
  .picker{grid-template-columns:1fr 1fr}
  .picker .pick:last-child{grid-column:1/-1}
  .who{grid-template-columns:1fr}
  .path{padding:32px 20px}
  .path-head{grid-template-columns:1fr}
  .path-head p{grid-column:1}
  /* vertical flows */
  .flow{flex-direction:column;align-items:stretch}
  .node{flex-direction:row;flex-wrap:wrap;align-items:center;text-align:left;column-gap:1rem;padding:0}
  .node .stage{margin-top:0}
  .node p{flex-basis:100%;margin:.6rem 0 0 calc(64px + 1rem);max-width:none}
  .dot{width:64px;height:64px;border-radius:18px}
  .dot svg{width:30px;height:30px}
  .flow.master .dot{width:84px;height:84px}
  .flow.master .dot svg{width:40px;height:40px}
  .flow.master .stage{font-size:1.2rem}
  .flow.master .node p{margin-left:calc(84px + 1rem)}
  .conn,.flow.master .conn{flex:0 0 46px;height:46px;width:64px;justify-content:center}
  .flow.master .conn{width:84px}
  .conn span,.flow.master .conn span{width:3px;height:100%}
  .conn span::before{transform-origin:top;background:linear-gradient(180deg,var(--o1),var(--o2))}
  .js-flow .flow:not(.lit) .conn span::before{transform:scaleY(0)}
  .conn::after{right:auto;left:50%;top:auto;bottom:-2px;transform:translateX(-50%) rotate(135deg)}
  .need{gap:1rem}
}
@media (max-width:420px){ .picker{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .embers{display:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Selected-path reveal and private-destination request form */
[hidden]{display:none!important}
button.pick{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
.pick[aria-expanded="true"]{border-color:var(--hot,#ff6a00);box-shadow:0 0 24px #ff6a0033}
.pick:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #ff9c40;outline-offset:4px}
.path:not([hidden]){animation:path-reveal .35s ease-out}
@keyframes path-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.path-prompt{margin-top:2rem}.windows-note{color:var(--muted);text-align:center;padding-top:1.5rem}
.request-section{max-width:760px;padding-top:0}#request{scroll-margin-top:100px}
#request-form{margin-top:1.8rem;display:grid;gap:1.25rem;text-align:left}
#request-form label{display:grid;gap:.5rem;font-weight:600}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
#request-form input:not([type="checkbox"]),#request-form textarea{width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;background:#151413;color:#fff;padding:.85rem;font:inherit}
#request-form .check{display:flex;align-items:center;gap:.7rem;font-weight:400}
.check input{width:1.1rem;height:1.1rem;accent-color:#ff6a00}.optional{color:var(--muted);font-weight:400}
#form-status{padding:1rem;border:1px solid var(--line);border-radius:10px;color:var(--muted);margin-top:1.5rem}
#request-form .btn{justify-self:start}#request-form .btn:disabled{opacity:.5;cursor:not-allowed}
.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}.request-section{padding-left:20px;padding-right:20px}}
@media(prefers-reduced-motion:reduce){.path:not([hidden]){animation:none}}

.windows-ask{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.windows-ask p{margin:0;font-weight:600;font-size:1.1rem;color:#fff}
.form-success{margin-top:1.8rem;padding:2.2rem 1.5rem;border:2px solid #ff7a1a;border-radius:16px;background:radial-gradient(circle at 50% 0%,rgba(255,122,26,.22),rgba(21,20,19,.95) 70%);text-align:center;box-shadow:0 0 40px rgba(255,122,26,.35);outline:none}
.form-success:not([hidden]){animation:success-pop .45s ease-out}
.form-success h3{font-size:clamp(1.5rem,3vw,2rem);margin:.6rem 0 .4rem;color:#fff}
.form-success p{color:var(--muted);margin:0 0 1.3rem}
.success-mark{width:64px;height:64px;margin:0 auto;border-radius:50%;display:grid;place-items:center;font-size:2rem;font-weight:700;color:#140a02;background:linear-gradient(135deg,#ffb347,#ff6a00);box-shadow:0 0 24px rgba(255,140,0,.6)}
.btn-ghost{background:transparent!important;border:1px solid #ff7a1a!important;color:#ffb347!important}
@keyframes success-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.form-success:not([hidden]){animation:none}}

/* Real product photography */
.hero-product{position:relative;margin:0 auto;padding-top:24px;padding-bottom:20px;isolation:isolate}
.hero-product:before{content:"";position:absolute;inset:15% 12%;background:#ff6a0038;filter:blur(70px);z-index:-1}
.hero-product img,.showcase img{display:block;width:100%;height:auto}
.hero-product picture{display:block;max-width:1100px;margin:auto}
.showcase-tabs{display:flex;justify-content:center;gap:12px;margin:2rem 0 1.25rem}
.showcase-tabs button{background:#171412;color:var(--muted);border:1px solid var(--line);padding:.8rem 1.6rem;border-radius:999px;font:inherit;font-weight:700;cursor:pointer}
.showcase-tabs button[aria-selected="true"]{background:#ff6a001c;color:#ffad65;border-color:#ff6a00;box-shadow:0 0 24px #ff6a0022}
.showcase-tabs button:focus-visible,.app-shot:focus-visible{outline:2px solid #ffad65;outline-offset:5px}
.app-shot{display:block;max-width:1100px;margin:1.5rem auto 0;border-radius:20px;background:radial-gradient(ellipse,#ff6a0018,transparent 70%);cursor:zoom-in}
.showcase [role="tabpanel"]{animation:path-reveal .3s ease-out}
@media(max-width:600px){.showcase-tabs{gap:8px}.showcase-tabs button{padding:.7rem 1.1rem}.hero-product{padding-top:8px}.showcase{padding-top:55px}}
@media(prefers-reduced-motion:reduce){.showcase [role="tabpanel"]{animation:none}}

/* Uniform two-column screenshot tiles and accessible native-dialog lightbox */
.shot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:1.5rem}
.shot-grid .app-shot{width:100%;max-width:none;margin:0;aspect-ratio:1.5335;background:#111316;border:1px solid var(--line);overflow:hidden;border-radius:16px}
.shot-grid .app-shot picture{display:block;width:100%;height:100%}
.shot-grid .app-shot img{width:100%;height:100%;object-fit:contain}
.hero-zoom{display:block;cursor:zoom-in}
#image-lightbox{position:fixed;inset:0;width:min(96vw,2000px);max-width:96vw;max-height:94vh;margin:auto;padding:48px 16px 12px;border:1px solid #55402e;border-radius:16px;background:#0b0c0e;color:#eee;overflow:auto}
#image-lightbox::backdrop{background:#000e;backdrop-filter:blur(5px)}
#image-lightbox img{display:block;width:100%;height:auto;max-height:calc(88vh - 80px);object-fit:contain}
.lightbox-close{position:absolute;right:12px;top:8px;border:1px solid #735038;border-radius:50%;width:34px;height:34px;background:#201712;color:white;font-size:26px;line-height:1;cursor:pointer}
.lightbox-caption{text-align:center;color:var(--muted);margin:.6rem 0 0;font-size:.9rem}
@media(max-width:650px){.shot-grid{grid-template-columns:1fr}}

/* Center a lone showcase screenshot without enlarging its tile. */
@media(min-width:651px){.shot-grid>.app-shot:only-child{grid-column:1/-1;justify-self:center;width:calc((100% - 20px)/2)}}