/* FinSentinal cinematic homepage — v9 · Jul 2026 */

.cinematic-home .site-wrap::before{
  background:
    radial-gradient(ellipse 60% 46% at 12% 7%,rgba(29,111,255,.24),transparent 62%),
    radial-gradient(ellipse 45% 36% at 92% 15%,rgba(245,184,75,.08),transparent 60%),
    radial-gradient(ellipse 70% 44% at 50% 100%,rgba(29,111,255,.08),transparent 65%);
}
.cinematic-home .site-wrap::after{opacity:.35}
.cinematic-main{overflow:clip}
.cinematic-header{background:rgba(2,8,16,.7);border-bottom-color:rgba(255,255,255,.055)}
.cinematic-header .header-inner{height:76px}
.cinematic-nav{background:transparent;border-color:transparent;gap:8px}
.cinematic-nav a{padding:9px 11px}
.cinematic-nav a:hover{background:rgba(255,255,255,.045)}
.cinematic-home .btn-lg{height:56px;padding-inline:28px;font-size:16px;border-radius:14px}

/* Hero */
.cinematic-hero{
  position:relative;
  min-height:calc(100svh - 76px);
  display:flex;
  align-items:center;
  padding:86px 0 78px;
  isolation:isolate;
}
.cinematic-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(2,8,16,.96) 0%,rgba(2,8,16,.82) 45%,rgba(2,8,16,.2) 100%),
    radial-gradient(circle at 72% 47%,rgba(29,111,255,.14),transparent 36%);
  z-index:-2;
}
.cinematic-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(77,143,255,.42),transparent);
}
.cinematic-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:-1}
.cinematic-orb-one{width:360px;height:360px;background:rgba(29,111,255,.16);right:12%;top:16%}
.cinematic-orb-two{width:220px;height:220px;background:rgba(245,184,75,.07);right:4%;bottom:12%}
.cinematic-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.82fr);
  align-items:center;
  gap:80px;
}
.cinematic-hero-copy{max-width:760px}
.cinematic-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:26px;
  color:var(--blue-3);
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.cinematic-kicker::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--blue-2),transparent)}
.cinematic-hero h1{
  max-width:760px;
  margin:0;
  color:#fff;
  font-size:clamp(62px,7.7vw,112px);
  font-weight:900;
  line-height:.9;
  letter-spacing:-.067em;
}
.cinematic-hero h1 span{
  color:transparent;
  background:linear-gradient(115deg,#6fa5ff 5%,#a9c8ff 82%);
  -webkit-background-clip:text;
  background-clip:text;
}
.cinematic-hero-copy>p{
  max-width:650px;
  margin:34px 0 0;
  color:#9bb0cf;
  font-size:19px;
  line-height:1.72;
}
.cinematic-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:40px}
.cinematic-text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#c6d7ee;
  font-size:15px;
  font-weight:600;
  border-bottom:1px solid rgba(198,215,238,.32);
  padding-bottom:3px;
  transition:color .2s,border-color .2s,transform .2s;
}
.cinematic-text-link:hover{color:#fff;border-color:#fff;transform:translateY(-1px)}
.cinematic-trust{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
  margin-top:28px;
  color:#6f86a4;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.06em;
}
.cinematic-trust span{display:flex;align-items:center;gap:8px}
.cinematic-trust span::before{content:"";width:4px;height:4px;border-radius:50%;background:#4d8fff}

.cinematic-hero-visual{position:relative;min-height:480px;display:grid;place-items:center}
.hero-terminal{
  position:relative;
  width:min(100%,430px);
  aspect-ratio:1/.94;
  border:1px solid rgba(130,180,255,.2);
  border-radius:30px;
  background:
    linear-gradient(150deg,rgba(13,31,56,.88),rgba(4,12,24,.9)),
    radial-gradient(circle at 50% 20%,rgba(29,111,255,.15),transparent 50%);
  box-shadow:0 38px 110px rgba(0,0,0,.5),0 0 80px rgba(29,111,255,.11),inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  transform:perspective(1200px) rotateY(-5deg) rotateX(2deg);
  animation:terminal-float 7s ease-in-out infinite;
}
.hero-terminal::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,#000,transparent 80%);
}
.terminal-top{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:22px 24px;
  border-bottom:1px solid rgba(255,255,255,.075);
  color:#8096b5;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:.1em;
}
.terminal-top span:last-child{color:#10e898}
.terminal-dot{width:7px;height:7px;border-radius:50%;background:#10e898;box-shadow:0 0 0 5px rgba(16,232,152,.09),0 0 22px rgba(16,232,152,.55)}
.terminal-core{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:300px;padding:40px}
.terminal-pulse{
  width:94px;height:94px;border-radius:50%;
  background:radial-gradient(circle,rgba(77,143,255,.3) 0 18%,rgba(77,143,255,.1) 20% 44%,transparent 45%);
  border:1px solid rgba(130,180,255,.22);
  box-shadow:0 0 60px rgba(29,111,255,.25),inset 0 0 30px rgba(29,111,255,.14);
  position:relative;margin-bottom:34px;
}
.terminal-pulse::before,.terminal-pulse::after{content:"";position:absolute;inset:50%;width:10px;height:10px;border-radius:50%;background:#82b4ff;transform:translate(-50%,-50%);box-shadow:0 0 24px #4d8fff}
.terminal-pulse::after{width:100%;height:100%;background:transparent;border:1px solid rgba(130,180,255,.24);animation:terminal-ping 2.5s ease-out infinite}
.terminal-status{font-size:27px;font-weight:700;letter-spacing:-.035em;color:#fff}
.terminal-sub{margin-top:7px;color:#7e94b3;font-size:14px}
.terminal-flow{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto 1fr auto;gap:10px;align-items:center;padding:0 28px 26px;color:#7188a7;font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.terminal-flow i{height:1px;background:linear-gradient(90deg,rgba(77,143,255,.15),rgba(77,143,255,.65),rgba(77,143,255,.15));position:relative;overflow:hidden}
.terminal-flow i::after{content:"";position:absolute;top:-1px;width:18px;height:3px;background:#82b4ff;box-shadow:0 0 12px #4d8fff;animation:flow-dot 2.8s linear infinite}
@keyframes terminal-float{0%,100%{transform:perspective(1200px) rotateY(-5deg) rotateX(2deg) translateY(0)}50%{transform:perspective(1200px) rotateY(-3deg) rotateX(1deg) translateY(-10px)}}
@keyframes terminal-ping{0%{opacity:.7;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}}
@keyframes flow-dot{0%{left:-20px}100%{left:calc(100% + 20px)}}

/* Scroll story */
.scroll-story{position:relative;height:430vh;background:#020810;border-bottom:1px solid rgba(255,255,255,.055)}
.scroll-stage{
  position:sticky;
  top:76px;
  height:calc(100svh - 76px);
  min-height:620px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 74% 45%,rgba(29,111,255,.11),transparent 38%),
    linear-gradient(180deg,#020810,#030b16);
}
.scroll-stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,transparent,#000 45%,#000)}
.scroll-stage-bg{position:absolute;inset:0;pointer-events:none}
.story-glow{position:absolute;width:560px;height:560px;border-radius:50%;right:2%;top:2%;background:rgba(29,111,255,.09);filter:blur(100px);transition:background .9s ease}
.scroll-stage[data-step="2"] .story-glow{background:rgba(245,158,11,.085)}
.scroll-stage[data-step="3"] .story-glow{background:rgba(16,232,152,.065)}
.story-curve{position:absolute;width:min(68vw,980px);height:auto;right:-4vw;top:50%;transform:translateY(-48%);overflow:visible;opacity:.96}
.story-line{fill:none;stroke:url(#story-line-gradient);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(77,143,255,.52));transition:filter .7s ease}
.story-area{fill:url(#story-area-gradient);opacity:.55}
.story-head{fill:#fff;stroke:#4d8fff;stroke-width:4;filter:drop-shadow(0 0 12px rgba(77,143,255,.9));opacity:0;transition:opacity .25s}
.scroll-stage[data-progress="active"] .story-head{opacity:1}
.story-visual-card{
  position:absolute;
  right:8vw;
  width:300px;
  padding:20px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  background:rgba(8,20,37,.86);
  backdrop-filter:blur(18px);
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  opacity:0;
  transform:translateY(26px) scale(.96);
  transition:opacity .55s ease,transform .55s ease;
}
.story-visual-card span{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.13em;color:#10e898}
.story-visual-card strong{display:block;margin-top:9px;color:#fff;font-size:20px;letter-spacing:-.02em}
.story-visual-card small{display:block;margin-top:6px;color:#758baa;font-size:12px;line-height:1.55}
.story-signal-card{top:18%}
.story-result-card{bottom:14%}
.scroll-stage[data-step="1"] .story-signal-card,.scroll-stage[data-step="1"] .story-result-card,.scroll-stage[data-step="2"] .story-result-card{opacity:1;transform:none}
.scroll-stage[data-step="2"] .story-signal-card{opacity:.25;transform:translateY(-12px) scale(.95)}
.scroll-stage[data-step="3"] .story-visual-card{opacity:0;transform:translateY(-15px) scale(.94)}
.story-drawdown-label{
  position:absolute;
  right:7vw;
  bottom:12%;
  color:#f7c96d;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:.09em;
  opacity:0;
  transform:translateY(15px);
  transition:opacity .5s,transform .5s;
}
.scroll-stage[data-step="2"] .story-drawdown-label{opacity:1;transform:none}
.scroll-story-content{height:100%;position:relative;display:flex;align-items:center}
.story-scenes{position:relative;width:46%;min-height:360px}
.story-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(34px);pointer-events:none;transition:opacity .5s ease,transform .5s ease}
.story-scene.is-active{opacity:1;transform:none;pointer-events:auto}
.story-number{color:#4d8fff;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em;margin-bottom:25px}
.story-scene h2{max-width:560px;color:#fff;font-size:clamp(52px,6vw,88px);line-height:.94;letter-spacing:-.057em;font-weight:900}
.story-scene p{max-width:470px;margin-top:26px;color:#8ea4c4;font-size:18px;line-height:1.72}
.story-scene .btn{align-self:flex-start;margin-top:32px}
.story-progress{position:absolute;left:24px;bottom:42px;display:flex;gap:9px}
.story-progress span{width:28px;height:2px;background:rgba(255,255,255,.15);transition:background .3s,width .3s}
.story-progress span.active{width:48px;background:#4d8fff;box-shadow:0 0 12px rgba(77,143,255,.6)}

/* Feed */
.feed-experience{padding:140px 0 130px;background:linear-gradient(180deg,#020810,#04101d)}
.minimal-heading{max-width:760px;margin-bottom:80px}
.minimal-heading>span,.proof-overline,.final-kicker{display:block;color:#82b4ff;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.19em;text-transform:uppercase;margin-bottom:20px}
.minimal-heading h2{color:#fff;font-size:clamp(44px,5.6vw,76px);font-weight:850;line-height:.98;letter-spacing:-.052em}
.feed-experience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.feed-experience-grid article{padding:44px 38px 46px;border-right:1px solid rgba(255,255,255,.1)}
.feed-experience-grid article:last-child{border-right:0}
.feed-icon{color:#4d8fff;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.15em;margin-bottom:70px}
.feed-experience-grid h3{color:#fff;font-size:27px;letter-spacing:-.035em;margin-bottom:12px}
.feed-experience-grid p{color:#8198b8;font-size:15px;line-height:1.7}

/* Proof moment */
.proof-moment{padding:150px 0;border-bottom:1px solid rgba(255,255,255,.06);background:#030b15}
.proof-moment-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.7fr);gap:100px;align-items:end}
.proof-moment h2{color:#fff;font-size:clamp(58px,7vw,94px);font-weight:900;line-height:.9;letter-spacing:-.065em}
.proof-moment h2 strong{color:#82b4ff;font-weight:900}
.proof-moment-copy{padding-bottom:8px}
.proof-moment-copy p{color:#8da3c1;font-size:18px;line-height:1.75;margin-bottom:26px}

/* Final CTA */
.final-invite{position:relative;min-height:82svh;display:flex;align-items:center;padding:130px 0;text-align:center;overflow:hidden}
.final-invite::before{content:"";position:absolute;width:760px;height:760px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(29,111,255,.22),rgba(29,111,255,.04) 42%,transparent 68%);filter:blur(8px)}
.final-invite-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.final-invite h2{color:#fff;font-size:clamp(64px,9vw,118px);font-weight:900;line-height:.88;letter-spacing:-.07em;max-width:970px}
.final-invite p{color:#94a9c8;font-size:19px;margin:30px 0 38px}
.final-invite small{display:block;margin-top:20px;color:#617692;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.045em}
.cinematic-footer{background:#02070e}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .hero-terminal,.terminal-pulse::after,.terminal-flow i::after{animation:none!important}
  .story-scene,.story-visual-card,.story-drawdown-label{transition:none!important}
  .scroll-story{height:auto}
  .scroll-stage{position:relative;top:auto;height:auto;min-height:0;padding:90px 0}
  .scroll-stage-bg{opacity:.35}
  .scroll-story-content{height:auto}
  .story-scenes{width:100%;display:grid;gap:70px;min-height:0}
  .story-scene{position:relative;opacity:1;transform:none;pointer-events:auto}
  .story-progress{display:none}
}

/* Tablet */
@media (max-width:980px){
  .cinematic-hero{min-height:auto;padding:94px 0 100px}
  .cinematic-hero-grid{grid-template-columns:1fr;gap:70px}
  .cinematic-hero-copy{max-width:820px}
  .cinematic-hero h1{font-size:clamp(68px,11vw,105px)}
  .cinematic-hero-visual{min-height:400px}
  .hero-terminal{width:min(78vw,460px)}
  .scroll-stage{top:72px;height:calc(100svh - 72px)}
  .story-curve{width:82vw;right:-25vw;opacity:.55}
  .story-scenes{width:62%}
  .story-visual-card{right:3vw;width:260px}
  .proof-moment-grid{grid-template-columns:1fr;gap:55px}
  .proof-moment-copy{max-width:620px}
}

/* Mobile */
@media (max-width:760px){
  .cinematic-header .header-inner{height:68px}
  .cinematic-header .header-cta>.btn{display:none}
  .cinematic-hero{padding:78px 0 74px;min-height:calc(100svh - 68px)}
  .cinematic-hero-grid{gap:54px}
  .cinematic-kicker{font-size:10px;line-height:1.6;letter-spacing:.16em}
  .cinematic-hero h1{font-size:clamp(55px,16vw,78px);line-height:.92}
  .cinematic-hero-copy>p{font-size:16px;line-height:1.68;margin-top:28px}
  .cinematic-actions{align-items:flex-start;flex-direction:column;gap:20px;margin-top:34px}
  .cinematic-actions .btn{width:100%}
  .cinematic-trust{gap:12px 16px;font-size:9px}
  .cinematic-hero-visual{min-height:330px}
  .hero-terminal{width:min(94vw,390px);transform:none!important;animation:none}
  .terminal-core{height:230px}
  .terminal-status{font-size:23px}
  .terminal-flow{font-size:8px;padding-inline:20px}

  .scroll-story{height:auto}
  .scroll-stage{position:relative;top:auto;height:auto;min-height:0;padding:110px 0;background:linear-gradient(180deg,#020810,#04101d)}
  .scroll-stage-bg{inset:0;opacity:.5}
  .story-curve{width:150vw;right:-65vw;top:38%;opacity:.35}
  .story-visual-card,.story-drawdown-label{display:none}
  .scroll-story-content{height:auto;display:block}
  .story-scenes{width:100%;min-height:0;display:grid;gap:96px}
  .story-scene{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto;min-height:52vh;justify-content:flex-end;padding-bottom:20px}
  .story-scene h2{font-size:clamp(48px,14vw,68px);max-width:95%}
  .story-scene p{font-size:16px;max-width:90%}
  .story-progress{display:none}
  .story-head{display:none}

  .feed-experience{padding:100px 0 90px}
  .minimal-heading{margin-bottom:48px}
  .minimal-heading h2{font-size:46px}
  .feed-experience-grid{grid-template-columns:1fr}
  .feed-experience-grid article{border-right:0;border-bottom:1px solid rgba(255,255,255,.1);padding:34px 4px}
  .feed-experience-grid article:last-child{border-bottom:0}
  .feed-icon{margin-bottom:35px}

  .proof-moment{padding:105px 0}
  .proof-moment-grid{gap:42px}
  .proof-moment h2{font-size:clamp(55px,15vw,76px)}
  .proof-moment-copy p{font-size:16px}

  .final-invite{min-height:72svh;padding:105px 0}
  .final-invite h2{font-size:clamp(60px,17vw,86px)}
  .final-invite p{font-size:16px}
  .final-invite .btn{width:100%}
}

@media (max-width:430px){
  .cinematic-hero h1{font-size:54px}
  .terminal-top{padding:18px 16px;font-size:8px}
  .terminal-core{padding:30px 20px}
  .terminal-pulse{width:80px;height:80px}
  .terminal-status{font-size:21px}
  .story-scene h2{font-size:50px}
  .final-invite h2{font-size:61px}
}