/* Fybr · homepage: the hero, connect, the stages, proof. Loads after base.css. */

/* ============================ THE HERO ============================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;background:#080B0F;overflow:hidden}
.hero-stage{position:absolute;inset:0}
.hero-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.js .hero-poster{visibility:hidden}                             /* the live mark fades in over the ground, from first paint */
.js.loom-off .hero-poster{visibility:visible}
@media (prefers-reduced-motion:reduce){.js .hero-poster{visibility:visible}}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s var(--ease-out)}
.hero.is-live .hero-canvas{opacity:1}
/* a slow connection: the mark waits, faint, where the threads will braid it; it fades as they arrive */
.hero-wait{position:absolute;left:0;top:0;height:auto;opacity:0;pointer-events:none;transition:opacity .9s var(--ease-out)}
.hero.is-waiting .hero-wait{opacity:.5}
.hero.is-live .hero-wait{opacity:0}
.hero-shade{position:absolute;left:0;top:0;bottom:0;width:min(58vw,860px);pointer-events:none;background:radial-gradient(110% 90% at 0% 50%,rgba(7,9,12,.88),rgba(7,9,12,.6) 42%,rgba(7,9,12,0) 78%)}
.hero-copy{position:relative;padding-top:calc(var(--header-h) + 4vh);padding-bottom:6vh}
.hero-copy > *{max-width:min(38rem,44vw)}
.hero h1{font-size:clamp(3.2rem,7.4vw,7.2rem);line-height:.96;letter-spacing:-.035em;margin:22px 0 26px}
.hero .deck{font-size:clamp(1.08rem,1.35vw,1.24rem);color:#DDE4EC;max-width:min(36rem,44vw);margin-bottom:30px;line-height:1.55}
/* the three routes: where the visitor is, one click from the hero */
.routes{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:22px}
.routes a{display:inline-flex;align-items:center;gap:12px;padding:9px 13px;border:1px solid rgba(234,240,246,.22);border-radius:3px;background:rgba(7,9,12,.35);font-size:.88rem;color:var(--ink);transition:border-color .16s var(--ease-out),background-color .16s var(--ease-out)}
.routes a:hover{border-color:var(--brass);background:rgba(232,184,115,.08)}
.routes b{font-weight:400;color:var(--brass)}

/* ============================ CONNECT ============================= */
.connect{padding:clamp(90px,11vw,160px) 0;background:linear-gradient(180deg,#080B0F,var(--ground));border-top:1px solid var(--line-soft)}
.connect-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,80px);align-items:center}
.connect h2{font-size:clamp(2.5rem,5vw,4.8rem);line-height:1;letter-spacing:-.03em;margin-bottom:22px}
.connect .deck{font-size:clamp(1rem,1.2vw,1.15rem);color:#D6DEE7;max-width:30rem;line-height:1.55;margin-bottom:34px}
.statement{--lit:1;font-family:var(--serif);font-size:clamp(1.6rem,2.5vw,2.4rem);line-height:1.16;letter-spacing:-.02em;max-width:22ch;padding-left:18px;border-left:2px solid rgba(232,184,115,calc(.35 + var(--lit) * .65));color:var(--ink)}   /* reads fully from the start; only the rule brightens as the fibres arrive */
.connect-stage{position:relative;aspect-ratio:1.18;border-radius:8px;background:radial-gradient(70% 70% at 55% 50%,#0F151C,#090C10 75%);border:1px solid var(--line-soft);overflow:hidden}
.connect-still{position:absolute;left:50%;top:50%;width:62%;height:auto;transform:translate(-50%,-50%);transition:opacity .9s var(--ease-out)}
.connect-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s var(--ease-out)}
.connect-stage.is-live .connect-canvas{opacity:1}
.connect-stage.is-live .connect-still,.loom-on .connect-still{opacity:0}
.connect-stage .sources{display:none;position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.connect-stage.is-live .sources{display:block}
.connect-stage .sources li{position:absolute;left:0;top:0;width:max-content;max-width:8.4em;text-align:center;font:500 .78rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);opacity:0;text-shadow:0 1px 10px rgba(7,9,12,.9)}
.connect-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;min-height:2.8em;margin-top:14px}
.connect-caption{margin:0;font:400 1rem/1.5 var(--sans);color:#D6DEE7;opacity:0}
.connect-replay{flex:none;background:none;border:1px solid var(--line-soft);border-radius:999px;color:var(--ink);font:500 .72rem/1 var(--mono);letter-spacing:.08em;padding:8px 12px;cursor:pointer}
.connect-replay:hover,.connect-replay:focus-visible{border-color:var(--brass);color:var(--brass)}
.connect-replay[hidden]{display:none}
.loom-off .connect-foot{display:none}
.connect-stage .owner-label{position:absolute;left:0;top:0;margin:0;opacity:0;white-space:nowrap;color:var(--ink);font-size:.68rem;display:none}
.connect-stage.is-live .owner-label{display:block}
.loom-off .statement{--lit:1}

/* The working screens (cards in the stages section) */
.screen{--on:1;margin:28px var(--gutter) 0;width:min(480px,calc(100% - 2*var(--gutter)))}
.screen-inner{position:relative;background:linear-gradient(180deg,rgba(20,26,33,.94),rgba(13,18,24,.94));border:1px solid rgba(95,168,184,calc(.16 + var(--on) * .14));border-radius:6px;padding:18px 20px 20px;font-family:var(--sans);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.4),0 0 calc(var(--on) * 42px) rgba(232,184,115,calc(var(--on) * .10))}
.screen-inner::before{content:"";position:absolute;left:50%;bottom:-1px;width:36%;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(232,184,115,calc(var(--on) * .9)),transparent)}
.screen header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line-soft)}
.screen header b{font:500 .95rem/1.2 var(--sans);letter-spacing:.01em}
.screen header span{font:500 .72rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mid);text-align:right}
.screen dl,.screen ul,.screen ol{margin:0;padding:0;list-style:none}
.screen dd{margin:0}
.screen [style*="--i"]{opacity:clamp(0,calc(var(--on) * 9 - var(--i)),1);transform:translateY(calc((1 - clamp(0,calc(var(--on) * 9 - var(--i)),1)) * 6px))}
.screen-inputs{display:grid;gap:7px;margin-bottom:14px}
.screen-inputs div{display:flex;justify-content:space-between;gap:12px;font-size:.78rem;color:var(--ink-mid)}
.screen-inputs dd{color:var(--teal);font-family:var(--mono);font-size:.72rem}
.screen-outputs{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;padding:14px 0 4px;border-top:1px solid var(--line-soft)}
.screen-outputs dt,.screen-kpis dt{font:500 .7rem/1.25 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-low-text);margin-bottom:5px}
.screen-outputs dd,.screen-kpis dd{font:400 1.32rem/1.1 var(--serif);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.screen-outputs div:nth-child(2) dd,.screen-outputs div:nth-child(4) dd{color:var(--brass)}
.screen-bars{display:flex;align-items:end;gap:6px;height:44px;margin-top:14px}
.screen-bars i{flex:0 0 18px;height:calc(var(--h) * 100% * var(--on));background:linear-gradient(180deg,var(--brass),rgba(232,184,115,.35));border-radius:2px 2px 0 0}
.screen-bars span{margin-left:10px;align-self:end;font:500 .68rem/1.25 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-low-text)}
.screen-meters{display:grid;gap:12px;margin-bottom:16px}
.screen-meters li{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:12px;font-size:.78rem;color:var(--ink-mid)}
.screen-meters i{height:5px;border-radius:3px;background:rgba(234,240,246,.08);position:relative;overflow:hidden}
.screen-meters i::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 100% * var(--on));background:linear-gradient(90deg,var(--teal),#8FC3CE);border-radius:3px}
.screen-meters b{font:500 .7rem/1 var(--mono);color:var(--ink);white-space:nowrap}
.screen-list{display:grid;gap:8px}
.screen-list li{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:4px;background:rgba(234,240,246,.035);font-size:.78rem;color:var(--ink-mid)}
.screen-list b{font-weight:500;color:var(--ink)}
.screen-list li.is-flag{background:rgba(232,184,115,.1);box-shadow:inset 2px 0 0 var(--brass)}
.screen-list li.is-flag b{color:var(--brass-hi)}
.screen--brief .screen-list li{justify-content:flex-start;counter-increment:brief}
.screen--brief .screen-list li::before{content:counter(brief);font:500 .7rem/1.5 var(--mono);color:var(--brass);width:14px}
.screen-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.screen-kpis dd{font-size:1.18rem}
.screen-sub{font:500 .7rem/1.25 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--brass);margin:4px 0 10px}


/* ============================== THE STAGES ============================= */
@property --on{syntax:'<number>';inherits:true;initial-value:1}
.stages{padding:clamp(90px,11vw,150px) 0;background:var(--ground);border-top:1px solid var(--line-soft)}
.stages-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:end;margin-bottom:clamp(44px,5vw,70px)}
.stages-head h2{font-size:clamp(2.3rem,4.2vw,4rem);line-height:1;letter-spacing:-.03em}
.stages-head p{color:var(--ink-mid);max-width:30rem;line-height:1.6}
.stages-head .stages-cred{margin-top:16px;padding-left:14px;border-left:2px solid var(--brass);font-size:.95rem;color:#C9D2DC}
.stages-cred a{color:var(--ink);border-bottom:1px solid rgba(232,184,115,.6);white-space:nowrap}
.stages-cred a::after{content:" ↗";color:var(--brass)}
.stages-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px);align-items:start}
.stage-col .stage-kicker{color:var(--brass);font-size:.72rem}
.stage-col .stage-kicker span{color:var(--ink-mid);margin-left:8px}
.stage-col h3{font-size:clamp(1.5rem,2.1vw,2rem);line-height:1.08;letter-spacing:-.02em;margin:14px 0 12px}
.stage-col > p:not(.stage-kicker){color:var(--ink-mid);line-height:1.6;margin-bottom:14px;max-width:26rem}
.stage-col .screen{margin:28px 0 0;width:100%}
.stage-col .screen-inner{padding:16px 16px 18px}
.stage-col .screen-kpis{grid-template-columns:repeat(2,1fr)}
.js .stage-col[data-reveal-soft]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .stage-col[data-reveal-soft] .screen{--on:0;transition:--on 1.6s var(--ease-out) .3s}
.js .stage-col[data-reveal-soft].is-in{opacity:1;transform:none}
.js .stage-col[data-reveal-soft].is-in .screen{--on:1}
.js .stage-col:nth-child(2)[data-reveal-soft]{transition-delay:.1s}.js .stage-col:nth-child(3)[data-reveal-soft]{transition-delay:.2s}

/* ============================== PROOF ============================= */
.proof{padding:clamp(90px,11vw,150px) 0;background:var(--deep);border-top:1px solid var(--line-soft)}
.proof-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:clamp(40px,5vw,64px)}
.proof-head h2{font-size:clamp(2.3rem,4.2vw,4rem);line-height:1;letter-spacing:-.03em}
.proof-row{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,3vw,44px);align-items:start}
.proof-image{display:block;overflow:hidden;border-radius:4px;border:1px solid var(--line-soft);background:var(--raised)}
.proof-image img{width:100%;height:auto;transition:transform .7s var(--ease-out)}
.proof-image:hover img{transform:scale(1.02)}
.proof-kind{color:var(--teal);margin:20px 0 10px;font-size:.74rem}
.proof-item h3{font-size:clamp(1.35rem,1.9vw,1.8rem);line-height:1.15;margin-bottom:10px}
.proof-item h3 a:hover{color:var(--brass)}
.proof-item p:last-child{color:var(--ink-mid);max-width:34rem}
.proof-item:nth-child(2){margin-top:clamp(40px,8vw,120px)}
.proof-row--three{grid-template-columns:1fr 1fr 1fr}
.proof-row--three .proof-item:nth-child(2){margin-top:clamp(30px,5vw,80px)}
.proof-row--three .proof-item:nth-child(3){margin-top:clamp(60px,10vw,160px)}
.proof-finding{display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:3/2;padding:26px 24px;border-radius:4px;border:1px solid rgba(232,184,115,.35);background:radial-gradient(120% 120% at 80% 0%,rgba(232,184,115,.14),rgba(20,26,33,.9) 60%)}
.proof-finding__num{font:400 clamp(3.4rem,6vw,5.4rem)/1 var(--serif);letter-spacing:-.03em;color:var(--brass-hi)}
.proof-finding__num small{font-size:.45em;margin-left:2px}
.proof-finding__line{margin-top:10px;color:#D6DEE7;font-size:.95rem;line-height:1.45;max-width:26rem}
.proof-kind--real{color:var(--brass)}
.proof-note{margin-top:clamp(40px,5vw,70px);color:var(--ink-mid);max-width:44rem;line-height:1.65}
.proof-note .text-link{margin-left:8px}
.js [data-reveal]{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease-out)}
.js [data-reveal].is-in{clip-path:inset(0 0 0 0)}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1080px){
  .proof-row{grid-template-columns:1fr}
  .proof-item:nth-child(2){margin-top:0}
  .proof-row--three{grid-template-columns:1fr}
  .stages-grid{grid-template-columns:1fr;gap:60px}
  .stages-head{grid-template-columns:1fr}
  .stage-col .screen{max-width:480px}
  .proof-row--three .proof-item:nth-child(2),.proof-row--three .proof-item:nth-child(3){margin-top:0}
}
@media (max-width:1080px){
  .connect-grid{grid-template-columns:1fr}
  .connect-figure{max-width:640px;width:100%}
}
@media (max-width:760px){
  .hero{align-items:flex-end}
  .hero-copy{padding-bottom:calc(44px + env(safe-area-inset-bottom))}
  .hero-copy > *{max-width:none}
  .hero h1{font-size:clamp(2.9rem,13vw,4.2rem);margin:14px 0 16px}
  .hero .deck{font-size:.96rem;margin-bottom:18px;line-height:1.5;max-width:none}
  .hero-shade{width:100%;background:linear-gradient(0deg,rgba(7,9,12,.9),rgba(7,9,12,.6) 40%,rgba(7,9,12,0) 70%)}
  .routes{gap:6px;margin-top:14px}
  .routes a{padding:7px 9px;font-size:.8rem;gap:8px}
  .connect-stage{aspect-ratio:.95}
  .connect-stage .sources li{font-size:.72rem;letter-spacing:.03em;max-width:8em}
  .connect-caption{font-size:.95rem}
  .screen-inner{padding:14px 15px 16px}
  .screen header{flex-direction:column;align-items:flex-start;gap:5px}
  .screen-outputs dd,.screen-kpis dd{font-size:1.1rem}
  .screen-kpis{grid-template-columns:repeat(2,1fr)}
  .proof-head{flex-direction:column;align-items:start}
}
/* Tall desktop windows and tablets: stack like a phone, the mark above and the copy below (loom.js: stack) */
@media (min-width:761px) and (max-aspect-ratio:23/20){
  .hero{align-items:flex-end}
  .hero-copy{padding-bottom:max(56px,7vh)}
  .hero-copy > *,.hero .deck{max-width:40rem}
  .hero h1{font-size:clamp(3.2rem,8.4vw,6rem)}
  .hero-shade{width:100%;background:linear-gradient(0deg,rgba(7,9,12,.92),rgba(7,9,12,.6) 42%,rgba(7,9,12,0) 68%)}
}
/* Short viewports: the hero must fit */
@media (max-height:640px) and (min-width:761px){
  .hero h1{font-size:clamp(2.4rem,11svh,4.6rem);margin:12px 0 14px}
  .hero .deck{font-size:.95rem;margin-bottom:16px;max-width:30rem}
}
@media (prefers-reduced-motion:reduce){
  .proof-image img{transition:none}
  .js .stage-col[data-reveal-soft]{opacity:1;transform:none;transition:none}
  .js .stage-col[data-reveal-soft] .screen{--on:1;transition:none}
}