/* ==========================================================================
   MIMIC — home (the keynote gateway)
   hero · story · experiences · how · who · trust · finale
   ========================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:118vh;min-height:118svh;display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--nav-h) + clamp(1rem,4.6vh,4rem));padding-bottom:42vh;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 55% at 50% 0%,rgba(46,55,252,.2),transparent 62%),#000}
.hero__wave{position:absolute;inset:auto 0 0 0;width:100%;height:46%;z-index:-1;opacity:0;transition:opacity 2.6s var(--ease-soft) .7s;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(180deg,transparent 0,#000 22%,#000 58%,transparent 96%);mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(180deg,transparent 0,#000 22%,#000 58%,transparent 96%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.is-ready .hero__wave{opacity:1}
/* the hero carries the brand, so the bar stays quiet until you scroll */
.page-home .nav .brand{transition:opacity .5s var(--ease-soft)}
.page-home .nav:not(.is-scrolled):not(.is-open) .brand{opacity:0;pointer-events:none}
.hero__fade{position:absolute;inset:auto 0 0 0;height:12%;z-index:-1;background:linear-gradient(180deg,transparent,#000)}
.hero__in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;opacity:calc(1 - var(--hp,0)*1.5);transform:translate3d(0,calc(var(--hp,0)*-70px),0);will-change:opacity,transform}
.hero .hero-title{font-size:clamp(3.25rem,min(10.2vw,17.2vh),10.5rem)}
@media (max-width:560px){
  .hero .hero-title{font-size:min(16.4vw,12.5vh)}
  .doors{flex-direction:column;align-items:stretch;width:min(100%,340px)}
  .door{justify-content:flex-start}
  .door .arr{margin-left:auto}
}
.hero__lead{margin-top:clamp(1.1rem,2.8vh,2rem)}
.hero__lead .voice{font-size:1.2em;color:#fff}

.hero__lockup{display:inline-flex;align-items:center;gap:.85rem;margin-bottom:clamp(1.1rem,3.4vh,2.4rem);padding:.5rem 1.15rem .5rem .8rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.logo-draw{width:44px;height:38px;flex:none;overflow:visible;filter:drop-shadow(0 0 14px rgba(39,158,254,.6))}
.logo-draw__l{fill:none;stroke:#fff;stroke-width:74;stroke-linecap:round;stroke-dasharray:1 3;stroke-dashoffset:1.12}
.logo-draw__l--bot{stroke-dashoffset:-1.12}
.is-ready .logo-draw__l--top{animation:drawTop 1.25s var(--ease-in-out) .25s forwards}
.is-ready .logo-draw__l--bot{animation:drawBot 1.25s var(--ease-in-out) .85s forwards}
@keyframes drawTop{to{stroke-dashoffset:0}}
@keyframes drawBot{to{stroke-dashoffset:0}}
.hero__word{width:82px;height:21px;color:#fff;flex:none}
.hero__by{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.hero__velentis{display:inline-flex;align-items:center;gap:.5rem;opacity:.92;transition:opacity .3s}
.hero__velentis:hover{opacity:1}
.hero__velentis .vm{height:22px;width:auto}
.hero__velentis .vw{height:12px;width:auto}

/* staged entrance — only when JS is there to finish it */
.js .hero__lockup,.js .hero__lead,.js .hero .doors,.js .hero__cue{opacity:0;transform:translate3d(0,20px,0);filter:blur(10px);transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out),filter 1.2s var(--ease-out)}
.js.is-ready .hero__lockup{opacity:1;transform:none;filter:none;transition-delay:.05s}
.js.is-ready .hero__lead{opacity:1;transform:none;filter:none;transition-delay:1.05s}
.js.is-ready .hero .doors{opacity:1;transform:none;filter:none;transition-delay:1.25s}
.js.is-ready .hero__cue{opacity:calc(1 - var(--hp,0)*4);transform:none;filter:none;transition-delay:1.9s}
.hero .hero-title .w>span{transition-delay:calc(var(--wi,0)*110ms + 450ms)}

/* the two doors */
.doors{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:clamp(1.4rem,3.6vh,2.6rem)}
.door{--c:var(--indigo-t);--c-rgb:139,147,255;position:relative;display:inline-flex;align-items:center;gap:.95rem;min-height:66px;padding:.6rem 1.3rem .6rem 1.2rem;border-radius:999px;border:1px solid var(--line-2);background:rgba(4,6,12,.74);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);text-align:left;transition:transform .6s var(--ease-out),border-color .35s,background-color .35s,box-shadow .6s var(--ease-out)}
.door--curated{--c:var(--cyan-t);--c-rgb:111,220,255}
.door__dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px rgba(var(--c-rgb),.14),0 0 20px 3px rgba(var(--c-rgb),.75);animation:doorDot 3s ease-in-out infinite}
.door--curated .door__dot{animation-delay:-1.5s}
@keyframes doorDot{50%{box-shadow:0 0 0 8px rgba(var(--c-rgb),.06),0 0 26px 5px rgba(var(--c-rgb),.9)}}
.door__t b{display:block;font-size:1.0625rem;font-weight:700;letter-spacing:-.018em;line-height:1.2}
.door__t small{display:block;font-size:.8125rem;color:var(--text-3);line-height:1.3;margin-top:.1rem}
.door .arr{margin-left:.7rem;font-size:1.05rem;color:var(--text-3);transition:color .3s}
.door:hover{transform:translateY(-3px);border-color:rgba(var(--c-rgb),.7);background:rgba(var(--c-rgb),.12);box-shadow:0 22px 60px -20px rgba(var(--c-rgb),.7)}
.door:hover .arr{color:#fff}
.doors--lg .door{min-height:78px;padding-inline:1.5rem 1.6rem}
.doors--lg .door__t b{font-size:1.1875rem}

.hero__cue{margin-top:clamp(1.1rem,2.6vh,1.8rem);max-width:calc(100vw - 2.5rem);display:flex;flex-direction:column;align-items:center;gap:.75rem;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);text-align:center;line-height:1.5}
.hero__cue:hover{color:#fff}
.hero__cue i{width:1px;height:30px;background:linear-gradient(180deg,#fff,transparent);transform-origin:top;animation:cue 2.4s var(--ease-in-out) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ── Story ────────────────────────────────────────────────────────────── */
.story{position:relative;height:660vh;background:#000}
.story__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.story__stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#000 0,transparent 16%,transparent 86%,#000 100%)}
.story__field{position:absolute;inset:0;width:100%;height:100%}
.story__beats{position:absolute;inset:0;z-index:2;pointer-events:none}
.beat{position:absolute;inset:clamp(5rem,13vh,9rem) 0 auto 0;padding-inline:var(--gutter);display:grid;justify-items:center;gap:1.1rem;text-align:center;opacity:var(--t,0);transform:translate3d(0,calc(var(--s,0)*-52px),0);filter:blur(calc((1 - var(--t,0))*14px));will-change:opacity,transform,filter}
.beat .display{max-width:16ch;font-size:clamp(2.5rem,min(7vw,10vh),7.5rem)}
.beat .lead{max-width:34ch}

.story__logo{position:absolute;left:50%;top:64%;z-index:1;width:min(38vw,47vh,540px);opacity:var(--lo,0);transform:translate(-50%,-50%) scale(var(--ls,1));will-change:opacity,transform}
.story__logo svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 44px rgba(39,158,254,.55))}
.story__l{fill:none;stroke:#fff;stroke-width:74;stroke-linecap:round;stroke-dasharray:1 3}
.story__l--top{stroke-dashoffset:calc(1.12 - var(--dt,0)*1.12)}
.story__l--bot{stroke-dashoffset:calc(-1.12 + var(--db,0)*1.12)}
.story__tag{position:absolute;width:min(230px,24vw);display:grid;gap:.3rem;transition:none}
.story__tag b{font-size:1.0625rem;font-weight:700;letter-spacing:-.015em}
.story__tag span{font-size:.875rem;color:var(--text-3);line-height:1.45}
.story__tag::after{content:'';position:absolute;top:.72rem;width:2.2rem;height:1px;background:linear-gradient(90deg,var(--line-3),transparent)}
.story__tag--top{right:calc(100% + 3.4rem);top:9%;text-align:right;opacity:var(--tt,0);transform:translateX(calc((1 - var(--tt,0))*14px))}
.story__tag--top b{color:var(--indigo-t)}
.story__tag--top::after{left:calc(100% + .6rem);transform:scaleX(-1)}
.story__tag--bot{left:calc(100% + 3.4rem);bottom:9%;opacity:var(--tb,0);transform:translateX(calc((1 - var(--tb,0))*-14px))}
.story__tag--bot b{color:var(--cyan-t)}
.story__tag--bot::after{right:calc(100% + .6rem)}

.story__rail{position:absolute;left:clamp(1rem,2.4vw,2.25rem);top:50%;z-index:3;width:2px;height:132px;border-radius:2px;background:var(--line);transform:translateY(-50%);overflow:hidden}
.story__rail i{display:block;width:100%;height:100%;background:var(--grad-deep);transform-origin:top;transform:scaleY(var(--p,0))}

@media (max-width:900px){
  .story{height:620vh}
  .story__logo{width:min(62vw,36vh,300px);top:64%}
  .story__tag{width:min(78vw,300px);text-align:center}
  .story__tag::after{display:none}
  .story__tag--top{right:auto;left:50%;top:auto;bottom:calc(100% + .9rem);transform:translate(-50%,calc((1 - var(--tt,0))*10px))}
  .story__tag--bot{left:50%;bottom:auto;top:calc(100% + .9rem);transform:translate(-50%,calc((1 - var(--tb,0))*-10px))}
  .story__tag span{font-size:.8125rem}
  .story__rail{display:none}
}

/* ── Experiences ──────────────────────────────────────────────────────── */
.exp{background:radial-gradient(70% 40% at 50% 0%,rgba(39,158,254,.12),transparent 70%)}
.exp .section-head{margin-bottom:0}
.portals{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,1.8vw,1.75rem);margin-top:clamp(3rem,6vw,5rem)}
.portal{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01) 55%,rgba(var(--accent-rgb),.07));box-shadow:inset 0 1px 0 rgba(255,255,255,.07);transition:border-color .5s,box-shadow .8s var(--ease-out),opacity .5s,filter .5s}
.portal--interactive{--accent:#6373ff;--accent-t:var(--indigo-t);--accent-rgb:99,115,255}
.portal--curated{--accent:var(--cyan);--accent-t:var(--cyan-t);--accent-rgb:57,205,253}
.portal:hover{border-color:rgba(var(--accent-rgb),.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 50px 130px -60px rgba(var(--accent-rgb),.85)}
@media (hover:hover){.portals:hover .portal:not(:hover){opacity:.62;filter:saturate(.7)}}
.portal__stage{position:relative;height:clamp(520px,48vw,690px);display:grid;place-items:center;perspective:1500px}
.portal__halo{position:absolute;left:50%;top:54%;width:min(92%,640px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(var(--accent-rgb),.5),rgba(var(--accent-rgb),.12) 52%,transparent 72%);filter:blur(8px);transition:opacity .6s;opacity:.75}
.portal:hover .portal__halo{opacity:1}
.portal__phone{--pw:clamp(232px,21vw,292px);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(-3deg);transform-style:preserve-3d}

.portal__stack{position:relative;width:min(86%,480px);aspect-ratio:480/560;container-type:inline-size;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d}
.portal__vmsg{--vw:74cqw;position:absolute;left:0;top:0;rotate:-3deg}
.portal__gcard{--gw:57cqw;position:absolute;right:0;bottom:0;rotate:4deg;animation:floaty 9s ease-in-out infinite}
.portal__toast{position:absolute;right:-6%;top:-4%;font-size:clamp(.66rem,3.3cqw,1rem);animation:floaty 6s ease-in-out -2s infinite}

.portal__body{display:grid;gap:1rem;justify-items:start;padding:.25rem clamp(1.5rem,3vw,2.75rem) clamp(1.75rem,3vw,2.75rem)}
.portal__body .h2{font-size:clamp(2rem,3.5vw,3.35rem)}
.portal__body .body-2{max-width:42ch}
.portal__go{position:static;margin-top:.6rem}
.portal__go::after{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit}
.exp__both{margin-top:clamp(2rem,4vw,3.25rem);text-align:center;font-family:var(--font-serif);font-style:italic;font-size:clamp(1.25rem,2vw,1.75rem);color:var(--text-2)}
@media (max-width:940px){
  .portals{grid-template-columns:1fr}
  .portal__stage{height:clamp(500px,118vw,640px)}
  .portal__phone{--pw:clamp(226px,60vw,280px)}
}
@media (max-width:560px){
  .portal--curated .portal__stage{height:clamp(430px,112vw,560px)}
}

/* ── Who ──────────────────────────────────────────────────────────────── */
.who__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,1.2vw,1.25rem)}
.who__card .h3{font-size:clamp(1.2rem,1.55vw,1.5rem)}
.who__card{display:grid;gap:.85rem;align-content:start;padding:clamp(1rem,1.5vw,1.25rem);padding-bottom:clamp(1.5rem,2.4vw,2rem);overflow:hidden;transition:border-color .5s,transform .8s var(--ease-out)}
.who__card:hover{border-color:rgba(var(--accent-rgb),.45);transform:translateY(-4px)}
.who__frame{margin-bottom:.9rem;border-radius:var(--r-md);box-shadow:none}
.who__name{position:absolute;left:1rem;bottom:.85rem;display:grid;gap:.15rem;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.who__name b{font-family:var(--font-sans);font-size:1.0625rem;font-weight:650;letter-spacing:-.015em;text-transform:none;color:#fff}
.who__note{margin-top:1.6rem;text-align:center;color:var(--text-3)}
.who__card .eyebrow{color:var(--accent-t)}
.who__card>:not(.who__frame){padding-inline:clamp(.4rem,1vw,.9rem)}
.who__card blockquote{margin-top:.5rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:clamp(1.2rem,1.5vw,1.45rem);line-height:1.2;color:var(--text)}
.who__card .small{margin-top:auto}
@media (max-width:1100px){.who__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.who__grid{grid-template-columns:1fr}}

/* ── Trust ────────────────────────────────────────────────────────────── */
.trustsec{background:radial-gradient(60% 50% at 0% 40%,rgba(46,55,252,.14),transparent 70%)}
.trustsec__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2.5rem,7vw,7rem);align-items:start}
.trustsec__head{display:grid;gap:1.4rem;position:sticky;top:calc(var(--nav-h) + 3rem)}
.trustsec__by{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:1.2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.pillar{display:flex;gap:1.25rem;padding:1.9rem 0;border-top:1px solid var(--line)}
.pillar:last-child{border-bottom:1px solid var(--line)}
.pillar__n{flex:none;width:2.4rem;padding-top:.28rem;font-size:.75rem;color:var(--sky-t)}
.pillar p{margin-top:.4rem;color:var(--text-3);font-size:var(--fs-small);line-height:1.55;max-width:44ch}
@media (max-width:900px){.trustsec__grid{grid-template-columns:1fr}.trustsec__head{position:static}}

/* ── Finale ───────────────────────────────────────────────────────────── */
.finale{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:start center;text-align:center;overflow:hidden;isolation:isolate;padding:clamp(6rem,15vh,10rem) 0 38vh;
  background:radial-gradient(80% 50% at 50% 0%,rgba(46,55,252,.16),transparent 65%)}
.finale__wave{position:absolute;inset:auto 0 0 0;width:100%;height:40%;z-index:-1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(180deg,transparent 0,#000 24%,#000 60%,transparent 98%);mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(180deg,transparent 0,#000 24%,#000 60%,transparent 98%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.finale__fade{position:absolute;inset:auto 0 0 0;height:18%;z-index:-1;background:linear-gradient(180deg,transparent,var(--ink))}
.finale__in{display:grid;justify-items:center;gap:1.5rem}
.finale .hero-title{font-size:clamp(2.6rem,min(7.4vw,13.5vh),7.5rem)}
.finale__talk{margin-top:.4rem;font-size:1rem}

/* ── Without JavaScript: the story reads as plain statements ──────────── */
html:not(.js) .story{height:auto;padding-block:var(--section)}
html:not(.js) .story__stage{position:static;height:auto;overflow:visible}
html:not(.js) .story__stage::after,html:not(.js) .story__field,html:not(.js) .story__logo,html:not(.js) .story__rail,html:not(.js) .hero__wave,html:not(.js) .finale__wave{display:none}
html:not(.js) .story__beats{position:static;display:grid;gap:clamp(4rem,10vw,7rem)}
html:not(.js) .beat{position:static;opacity:1;transform:none;filter:none}
html:not(.js) .logo-draw__l{stroke-dashoffset:0}