/* ==========================================================================
   SELFLYX — Design System v3
   Soft AI / tech SaaS: lavender atmosphere, editorial serif, indigo accent.
   Inspired by Nudge + Marquee. Not a CPA firm ledger look.
   ========================================================================== */

/* Fonts loaded from HTML <link> for non-blocking paint */

:root{
  --bg:           #F7F6FC;
  --bg-warm:      #FBFAF7;
  --surface:      #FFFFFF;
  --ink:          #12131A;
  --ink-soft:     #3A3D4A;
  --muted:        #5A5F6E;
  --line:         #E6E4F0;
  --line-soft:    #EEEAF8;
  --accent:       #5B5FFF;
  --accent-deep:  #4548E6;
  --accent-soft:  #ECEBFF;
  --lavender:     #D9D6F5;
  --peach:        #F5E6DC;
  --mint:         #D8F0E6;
  --ok:           #1F9D6A;
  --gold:         #5B5FFF;

  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1120px;
  --radius: 20px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.22,1,.36,1);
  --shadow-sm: 0 1px 2px rgba(18,19,26,0.04), 0 8px 24px rgba(91,95,255,0.06);
  --shadow-md: 0 8px 32px rgba(18,19,26,0.06), 0 2px 8px rgba(91,95,255,0.05);
  --shadow-lg: 0 20px 60px rgba(18,19,26,0.08), 0 4px 16px rgba(91,95,255,0.08);
  --header-offset: 88px;
}

*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-offset);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.nav-open{overflow:hidden;}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-0.02em;color:var(--ink);}
h1,h2{font-family:var(--font-display);text-wrap:balance;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding-top:0;
  padding-bottom:0;
  padding-left:max(28px, env(safe-area-inset-left, 0px));
  padding-right:max(28px, env(safe-area-inset-right, 0px));
}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:16px;
  top:0;
  z-index:10000;
  padding:10px 16px;
  background:var(--accent);
  color:#fff;
  font-size:14px;
  font-weight:600;
  border-radius:0 0 10px 10px;
  transform:translateY(-120%);
  transition:transform .25s var(--ease);
}
.skip-link:focus{
  transform:translateY(0);
  outline:none;
}

/* Utilities (replace inline styles) */
.link-accent{color:var(--accent);font-weight:600;}
.link-accent:hover{color:var(--accent-deep);}
.legal-link{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.legal-link:hover{color:var(--accent-deep);}
.legal-section.is-last{border-bottom:none;padding-bottom:0;}
.mt-12{margin-top:12px;}
.mt-16{margin-top:16px;}
.mt-18{margin-top:18px;}
.mt-22{margin-top:22px;}
.mt-28{margin-top:28px;}
.mb-28{margin-bottom:28px;}
.mt-64{margin-top:64px;}
.chip-row.spaced{margin-bottom:36px;}
.faq-intro h2{
  font-size:clamp(32px,4vw,46px);
  line-height:1.12;
  font-family:var(--font-display);
}
.faq-intro p{
  margin-top:16px;
  color:var(--ink-soft);
  font-size:16.5px;
  line-height:1.7;
  max-width:360px;
}
.contact-main h2{
  font-size:clamp(28px,3.2vw,40px);
  margin-bottom:16px;
  font-family:var(--font-display);
}
.contact-main > .lede-block{
  font-size:16.5px;
  color:var(--ink-soft);
  line-height:1.75;
  margin-bottom:28px;
}
.contact-prefer{
  font-size:14px;
  color:var(--muted);
  margin-top:18px;
}
.proof-card .proof-heading{
  font-size:clamp(24px,3vw,32px);
}
.proof-card.is-wide{max-width:100%;}
.feature-visual.spaced{margin-top:28px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .orb,
  .float-chip,
  .hero-panel,
  .product-cinema,
  .cinema-glow,
  .panel-status::before,
  .cinema-live i,
  .stack-track,
  .feature-visual.is-alive .bubble,
  .dash-badge.sample::before,
  .side-pulse::after,
  .intake-beam{
    animation:none !important;
  }
  .cinema-scene,
  .cinema-scene.is-active,
  .intake-doc,
  .ledger-row,
  .ledger-cat,
  .ex-chip,
  .pack-line,
  .deliver-pack,
  .exception-card,
  .side-stat,
  .side-pulse,
  .mini-spark,
  .hub-fill,
  .ring-fill,
  .spark-line,
  .spark-area,
  .resolve-bar i,
  .close-stamp,
  .doc-tick,
  .doc-tick::after{
    animation:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    stroke-dashoffset:0 !important;
  }
  .cinema-scene{position:relative;}
  .cinema-scene:not(.is-active){display:none;}
  .dash-panel.is-alive .dash-checklist li,
  .dash-panel.is-alive .dash-metric,
  .dash-panel.is-alive .dash-kpi-card,
  .dash-panel.is-alive .dash-table-row,
  .dash-panel.is-alive .dash-pack-item,
  .dash-panel.is-alive .dash-bar-row,
  .dash-panel.is-alive .dash-vbars > span,
  .dash-panel.is-alive .chart-line,
  .dash-panel.is-alive .chart-area,
  .dash-panel.is-alive .dash-bar-row .bar i,
  .dash-panel.is-alive .stack-bar i{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    stroke-dashoffset:0 !important;
    width:var(--w,50%) !important;
  }
  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
  .card:hover,
  .pain-card:hover,
  .component-tile:hover,
  .feature-card:hover,
  .process-step:hover,
  .who-item:hover,
  .founder-card:hover,
  .pilot-card:hover,
  .proof-card:hover,
  .values-grid .value-item:hover,
  .contact-main:hover,
  .contact-side:hover,
  .compare-table-wrap:hover,
  .sample-strip:hover,
  .feature-row:hover .dash-panel,
  .product-cinema:hover,
  .flow-step:hover,
  .flow-step.is-active:hover,
  .mini-stat:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .trust-strip span:hover,
  .chip:hover,
  .dash-checklist li:hover,
  .dash-metric:hover,
  .dash-kpi-card:hover,
  .dash-pack-item:hover,
  .dash-vbars > span:hover,
  .sample-metric:hover{
    transform:none !important;
  }
}

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px;
}
.eyebrow::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(91,95,255,0.18);
}

/* ==========================================================================
   NAV
   ========================================================================== */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  padding:20px 0;
  padding-top:max(20px, env(safe-area-inset-top, 0px));
  transition:background .35s var(--ease), backdrop-filter .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-scrolled{
  padding:12px 0;
  padding-top:max(12px, env(safe-area-inset-top, 0px));
  background:rgba(247,246,252,0.82);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 1px 0 var(--line-soft);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.03em;
  color:var(--ink);
}
.brand img{
  height:28px;width:28px;
  object-fit:contain;
  border-radius:8px;
}
.brand img:not([src]),
.brand img[src=""]{display:none;}

.nav-links{
  display:flex;
  align-items:center;
  gap:22px;
}
.nav-links a{
  font-size:13.5px;
  font-weight:500;
  color:var(--muted);
  white-space:nowrap;
  transition:color .2s var(--ease);
}
.nav-links a:hover,
.nav-links a.active{color:var(--ink);}

.nav-cta{
  display:inline-flex !important;
  align-items:center;
  padding:10px 18px !important;
  border-radius:var(--radius-pill) !important;
  background:var(--accent) !important;
  color:#fff !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  box-shadow:0 8px 20px rgba(91,95,255,0.28);
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease) !important;
}
.nav-cta:hover{
  background:var(--accent-deep) !important;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(91,95,255,0.34) !important;
}

.nav-toggle{
  display:none;
  width:44px;height:44px;
  position:relative;
  z-index:1002;
  flex-shrink:0;
}
.nav-toggle span{
  position:absolute;left:10px;right:10px;height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span:nth-child(1){top:14px;}
.nav-toggle span:nth-child(2){top:21px;}
.nav-toggle span:nth-child(3){top:28px;}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-scrim{
  position:fixed;
  inset:0;
  z-index:998;
  background:rgba(18,19,26,0.42);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.nav-scrim.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

@media (max-width:1024px){
  .nav-toggle{display:block;}
  .nav-links{
    position:fixed;
    top:0;right:0;
    z-index:1001;
    height:100vh;
    height:100dvh;
    width:min(320px,84vw);
    max-width:100%;
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    flex-direction:column;
    align-items:flex-start;
    padding:
      max(100px, calc(env(safe-area-inset-top, 0px) + 72px))
      max(28px, env(safe-area-inset-right, 0px))
      max(40px, env(safe-area-inset-bottom, 0px))
      36px;
    gap:22px;
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:translateX(100%);
    transition:transform .4s var(--ease), visibility .4s var(--ease);
    border-left:1px solid var(--line);
    visibility:hidden;
    box-shadow:var(--shadow-lg);
  }
  .nav-links.is-open{transform:translateX(0);visibility:visible;}
  .nav-links a{font-size:17px;white-space:normal;min-height:44px;display:inline-flex;align-items:center;}
  .nav-cta{margin-top:8px;width:100%;justify-content:center;min-height:48px;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 24px;
  font-size:14.5px;
  font-weight:600;
  border-radius:var(--radius-pill);
  position:relative;
  isolation:isolate;
  transition:
    transform .35s var(--ease),
    background .35s var(--ease),
    box-shadow .35s var(--ease),
    border-color .35s var(--ease),
    color .35s var(--ease),
    filter .35s var(--ease);
  will-change:transform;
}
.btn-primary{
  background:var(--accent);
  color:#fff;
  box-shadow:0 10px 28px rgba(91,95,255,0.3);
}
.btn-primary:hover{
  background:var(--accent-deep);
  transform:translateY(-2px);
  box-shadow:
    0 4px 10px rgba(18,19,26,0.05),
    0 14px 32px rgba(91,95,255,0.34);
}
.btn-ghost{
  background:rgba(255,255,255,0.7);
  color:var(--ink);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{
  border-color:rgba(91,95,255,0.35);
  background:#fff;
  color:var(--accent-deep);
  transform:translateY(-2px);
  box-shadow:
    0 4px 10px rgba(18,19,26,0.04),
    0 12px 28px rgba(91,95,255,0.12);
}
.btn:active{transform:translateY(0);filter:none;}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  padding:148px 0 56px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 90% 70% at 80% 10%, rgba(91,95,255,0.16), transparent 55%),
    radial-gradient(ellipse 70% 50% at 10% 30%, rgba(245,230,220,0.55), transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(216,240,230,0.35), transparent 55%),
    linear-gradient(180deg, #F4F3FB 0%, var(--bg) 70%, var(--bg) 100%);
}
.hero-orbs{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(40px);
  opacity:0.55;
  will-change:transform;
  animation:orb-drift 14s var(--ease) infinite alternate;
}
.orb-a{
  width:340px;height:340px;
  top:-8%;right:8%;
  background:radial-gradient(circle, rgba(91,95,255,0.55), rgba(155,140,255,0.15) 60%, transparent 70%);
  animation-duration:16s;
}
.orb-b{
  width:280px;height:280px;
  bottom:5%;left:-4%;
  background:radial-gradient(circle, rgba(245,230,220,0.9), rgba(216,240,230,0.35) 55%, transparent 70%);
  animation-duration:18s;
  animation-delay:-4s;
}
.orb-c{
  width:200px;height:200px;
  top:42%;left:42%;
  background:radial-gradient(circle, rgba(91,95,255,0.28), transparent 70%);
  animation-duration:12s;
  animation-delay:-2s;
}
@keyframes orb-drift{
  0%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(24px,-18px,0) scale(1.08);}
  100%{transform:translate3d(-16px,22px,0) scale(0.96);}
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(91,95,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,95,255,0.035) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 75%);
  pointer-events:none;
  z-index:0;
}
.hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);
  gap:44px;
  align-items:center;
}
@media (min-width:1100px){
  .hero-inner{
    grid-template-columns:minmax(0,0.78fr) minmax(420px,1.22fr);
    gap:48px;
  }
}
.hero h1{
  font-size:clamp(42px,5.4vw,68px);
  line-height:1.05;
  max-width:11ch;
}
.hero h1 em{
  font-style:italic;
  color:var(--accent);
}
.hero .lede{
  margin-top:22px;
  font-size:17.5px;
  color:var(--ink-soft);
  max-width:420px;
  line-height:1.7;
}
.trust-strip{
  position:relative;
  z-index:1;
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  max-width:420px;
}
.trust-strip span{
  font-size:12px;
  font-weight:500;
  color:var(--muted);
  background:rgba(255,255,255,0.85);
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius:var(--radius-pill);
  text-align:center;
  line-height:1.3;
  transition:
    transform .3s var(--ease),
    box-shadow .3s var(--ease),
    border-color .3s var(--ease),
    color .3s var(--ease),
    background .3s var(--ease);
}
.trust-strip span:hover{
  transform:translateY(-2px);
  color:var(--ink);
  background:#fff;
  border-color:rgba(91,95,255,0.3);
  box-shadow:0 8px 20px rgba(91,95,255,0.1);
}
.hero-ctas{
  position:relative;
  z-index:2;
  display:flex;
  gap:12px;
  margin-top:32px;
  flex-wrap:wrap;
}

/* Hero product cinema — sequential close flow, not a static checklist */
.hero-stage{
  position:relative;
  padding:20px 0 8px;
  width:100%;
  min-width:0;
}
.float-chip{
  position:absolute;
  z-index:3;
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(255,255,255,0.95);
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(10px);
  border-radius:999px;
  padding:8px 12px;
  white-space:nowrap;
  animation:chip-float 5.5s ease-in-out infinite;
  pointer-events:none;
}
.float-chip.chip-1{top:0;left:-2%;animation-delay:0s;}
.float-chip.chip-2{top:28%;right:-6%;animation-delay:-1.8s;}
.float-chip.chip-3{top:78%;left:-6%;animation-delay:-3.2s;}
@keyframes chip-float{
  0%,100%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(0,-8px,0);}
}

.product-cinema{
  position:relative;
  z-index:1;
  width:100%;
  max-width:none;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.92) 0%, rgba(247,246,252,0.95) 55%, rgba(236,235,255,0.9) 100%);
  border:1px solid rgba(255,255,255,0.95);
  border-radius:28px;
  padding:18px 18px 16px;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(18px);
  overflow:hidden;
  min-height:440px;
  display:flex;
  flex-direction:column;
  animation:panel-breathe 7s ease-in-out infinite;
}
@keyframes panel-breathe{
  0%,100%{box-shadow:var(--shadow-lg); transform:translateY(0);}
  50%{box-shadow:0 28px 70px rgba(18,19,26,0.1), 0 8px 24px rgba(91,95,255,0.12); transform:translateY(-3px);}
}
.product-cinema:hover{
  animation-play-state:paused;
  transform:translateY(-4px);
  box-shadow:
    0 8px 20px rgba(18,19,26,0.06),
    0 28px 60px rgba(91,95,255,0.16);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cinema-glow{
  position:absolute;
  inset:-20% -15% auto auto;
  width:260px;height:260px;
  background:radial-gradient(circle, rgba(91,95,255,0.28), transparent 70%);
  filter:blur(12px);
  pointer-events:none;
  z-index:0;
  animation:glow-drift 8s ease-in-out infinite alternate;
}
@keyframes glow-drift{
  from{transform:translate(0,0) scale(1);}
  to{transform:translate(-24px,18px) scale(1.12);}
}

.cinema-rail{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  margin-bottom:14px;
  padding:4px;
  background:rgba(255,255,255,0.65);
  border:1px solid var(--line-soft);
  border-radius:16px;
}
.cinema-step{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:10px 4px 8px;
  border-radius:12px;
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.02em;
  transition:color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  cursor:pointer;
}
.cinema-step-icon{
  width:32px;height:32px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:var(--line-soft);
  color:var(--muted);
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.cinema-step-icon svg{width:16px;height:16px;}
.cinema-step.is-active{
  color:var(--ink);
  background:#fff;
  box-shadow:0 8px 20px rgba(91,95,255,0.14);
  transform:translateY(-1px);
}
.cinema-step.is-active .cinema-step-icon{
  background:var(--accent);
  color:#fff;
  box-shadow:0 6px 16px rgba(91,95,255,0.35);
  transform:scale(1.06);
  animation:icon-pop .45s var(--ease);
}
.cinema-step.is-done{color:var(--ok);}
.cinema-step.is-done .cinema-step-icon{
  background:rgba(31,157,106,0.14);
  color:var(--ok);
}
.cinema-rail-line{
  width:14px;
  height:2px;
  background:rgba(91,95,255,0.28);
  flex-shrink:0;
  border-radius:2px;
}
@keyframes icon-pop{
  0%{transform:scale(0.85);}
  60%{transform:scale(1.12);}
  100%{transform:scale(1.06);}
}

.cinema-stage{
  position:relative;
  z-index:1;
  flex:1;
  min-height:0;
}
.cinema-scene{
  position:absolute;
  left:0;right:0;top:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px) scale(0.985);
  transition:
    opacity .45s var(--ease),
    transform .5s var(--ease),
    visibility 0s linear .45s;
  pointer-events:none;
  display:flex;
  flex-direction:column;
}
.cinema-scene.is-active{
  position:relative;
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  transition:
    opacity .45s var(--ease),
    transform .5s var(--ease),
    visibility 0s;
  pointer-events:auto;
}
.cinema-scene-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:16px;
}
.cinema-scene-head strong{
  display:block;
  font-size:17px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-0.01em;
  line-height:1.2;
}
.cinema-scene-head span{
  display:block;
  font-size:12.5px;
  color:var(--muted);
  margin-top:4px;
  line-height:1.4;
}
.cinema-live{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:2px;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--accent-deep);
  background:var(--accent-soft);
  border:1px solid rgba(91,95,255,0.2);
  padding:6px 10px;
  border-radius:var(--radius-pill);
  flex-shrink:0;
}
.cinema-live i{
  width:6px;height:6px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 3px rgba(91,95,255,0.18);
  animation:status-pulse 1.8s ease-out infinite;
}
.cinema-live.warn{color:#C56A2B;background:#FFF4EA;border-color:rgba(210,120,60,0.25);}
.cinema-live.warn i{box-shadow:0 0 0 3px rgba(210,120,60,0.18);}
.cinema-live.ok{color:var(--ok);background:rgba(31,157,106,0.1);border-color:rgba(31,157,106,0.2);}
.cinema-live.ok i{box-shadow:0 0 0 3px rgba(31,157,106,0.18);}
@keyframes status-pulse{
  0%{box-shadow:0 0 0 0 rgba(91,95,255,0.35);}
  70%{box-shadow:0 0 0 8px rgba(91,95,255,0);}
  100%{box-shadow:0 0 0 0 rgba(91,95,255,0);}
}

/* --- Capture scene --- */
.intake-stage{
  position:relative;
  flex:1;
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:12px;
  align-items:center;
  min-height:220px;
}
.intake-beam{
  position:absolute;
  left:8%;
  right:38%;
  top:50%;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(91,95,255,0.45), transparent);
  transform:translateY(-50%);
  opacity:0;
  pointer-events:none;
}
.cinema-scene.is-active .intake-beam{
  animation:beam-sweep 2.8s var(--ease) .3s infinite;
}
@keyframes beam-sweep{
  0%{opacity:0; transform:translateY(-50%) scaleX(0.2);}
  40%{opacity:1; transform:translateY(-50%) scaleX(1);}
  100%{opacity:0; transform:translateY(-50%) translateX(20%) scaleX(0.6);}
}
.intake-docs{display:flex;flex-direction:column;gap:6px;position:relative;z-index:1;}
.intake-doc{
  display:grid;
  grid-template-columns:34px 1fr 16px;
  gap:8px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:12px;
  padding:8px 10px;
  box-shadow:0 4px 14px rgba(18,19,26,0.04);
  opacity:0;
  transform:translateX(-18px) scale(0.96);
}
.cinema-scene.is-active .intake-doc{
  animation:doc-in .7s var(--ease) forwards;
}
.cinema-scene.is-active .intake-doc.d1{animation-delay:.15s;}
.cinema-scene.is-active .intake-doc.d2{animation-delay:.4s;}
.cinema-scene.is-active .intake-doc.d3{animation-delay:.65s;}
.cinema-scene.is-active .intake-doc.d4{animation-delay:.9s;}
@keyframes doc-in{
  to{opacity:1; transform:translateX(0) scale(1);}
}
.doc-icon{
  width:36px;height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.04em;
  color:#fff;
}
.doc-icon.pdf{background:linear-gradient(135deg,#FF6B6B,#E84A4A);}
.doc-icon.csv{background:linear-gradient(135deg,#5B5FFF,#8B7CFF);}
.doc-icon.stripe{background:linear-gradient(135deg,#6B5CFF,#9B8CFF);font-size:14px;}
.doc-icon.mail{background:linear-gradient(135deg,#1F9D6A,#4FC48E);}
.intake-doc b{display:block;font-size:12.5px;font-weight:700;color:var(--ink);}
.intake-doc em{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:1px;}
.doc-tick{
  width:16px;height:16px;
  border-radius:50%;
  border:2px solid var(--line);
  position:relative;
  opacity:0.4;
}
.cinema-scene.is-active .intake-doc .doc-tick{
  animation:tick-on .4s var(--ease) forwards;
}
.cinema-scene.is-active .d1 .doc-tick{animation-delay:1.1s;}
.cinema-scene.is-active .d2 .doc-tick{animation-delay:1.35s;}
.cinema-scene.is-active .d3 .doc-tick{animation-delay:1.55s;}
.cinema-scene.is-active .d4 .doc-tick{animation-delay:1.75s;}
@keyframes tick-on{
  0%{opacity:0.4; border-color:var(--line); background:transparent;}
  100%{
    opacity:1;
    border-color:var(--ok);
    background:var(--ok);
    box-shadow:0 0 0 4px rgba(31,157,106,0.15);
  }
}
.doc-tick::after{
  content:"";
  position:absolute;
  left:4px;top:1px;
  width:4px;height:8px;
  border:solid #fff;
  border-width:0 1.8px 1.8px 0;
  transform:rotate(45deg) scale(0);
}
.cinema-scene.is-active .doc-tick::after{
  animation:tick-mark .3s var(--ease) forwards;
}
.cinema-scene.is-active .d1 .doc-tick::after{animation-delay:1.2s;}
.cinema-scene.is-active .d2 .doc-tick::after{animation-delay:1.45s;}
.cinema-scene.is-active .d3 .doc-tick::after{animation-delay:1.65s;}
.cinema-scene.is-active .d4 .doc-tick::after{animation-delay:1.85s;}
@keyframes tick-mark{
  to{transform:rotate(45deg) scale(1);}
}
.intake-hub{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  position:relative;
  z-index:1;
}
.hub-ring{
  position:relative;
  width:104px;height:104px;
}
.hub-ring svg{
  width:100%;height:100%;
  transform:rotate(-90deg);
}
.hub-track{
  fill:none;
  stroke:rgba(91,95,255,0.12);
  stroke-width:7;
}
.hub-fill{
  fill:none;
  stroke:url(#none);
  stroke:#5B5FFF;
  stroke-width:7;
  stroke-linecap:round;
  stroke-dasharray:251.2;
  stroke-dashoffset:251.2;
  filter:drop-shadow(0 0 8px rgba(91,95,255,0.35));
}
.cinema-scene.is-active .hub-fill{
  animation:hub-fill 2.2s var(--ease) .4s forwards;
}
@keyframes hub-fill{
  to{stroke-dashoffset:40;}
}
.hub-core{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.hub-core b{
  font-family:var(--font-display);
  font-size:28px;
  font-weight:400;
  color:var(--ink);
}
.hub-core span{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:4px;
}
.hub-label{
  font-size:11px;
  color:var(--muted);
  text-align:center;
  max-width:10ch;
  line-height:1.35;
}

/* --- Connect scene (hero cinema) --- */
.connect-stage{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  min-height:220px;
  justify-content:center;
}
.connect-row{
  display:grid;
  grid-template-columns:38px 1fr 18px;
  gap:10px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 4px 14px rgba(18,19,26,0.04);
  opacity:0;
  transform:translateY(12px);
}
.cinema-scene.is-active .connect-row{
  animation:connect-in .55s var(--ease) forwards;
}
.cinema-scene.is-active .connect-row.c1{animation-delay:.12s;}
.cinema-scene.is-active .connect-row.c2{animation-delay:.32s;}
.cinema-scene.is-active .connect-row.c3{animation-delay:.52s;}
@keyframes connect-in{
  to{opacity:1; transform:translateY(0);}
}
.connect-mark{
  width:38px;height:38px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:800;
  color:#fff;
  letter-spacing:0.02em;
}
.connect-mark.qb{background:linear-gradient(135deg,#2CA01C,#1F7A14);}
.connect-mark.bank{background:linear-gradient(135deg,#1A1A1A,#333);}
.connect-mark.mail{background:linear-gradient(135deg,#5B5FFF,#4347E8);font-size:14px;}
.connect-row b{display:block;font-size:13px;font-weight:700;color:var(--ink);}
.connect-row em{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:1px;}
.connect-tick{
  width:16px;height:16px;
  border-radius:50%;
  border:2px solid var(--line);
  position:relative;
  opacity:0.35;
}
.cinema-scene.is-active .connect-tick{
  animation:tick-on .4s var(--ease) forwards;
}
.cinema-scene.is-active .c1 .connect-tick{animation-delay:1s;}
.cinema-scene.is-active .c2 .connect-tick{animation-delay:1.25s;}
.cinema-scene.is-active .c3 .connect-tick{animation-delay:1.5s;}
.connect-tick::after{
  content:"";
  position:absolute;
  left:4px;top:1px;
  width:4px;height:8px;
  border:solid #fff;
  border-width:0 1.8px 1.8px 0;
  transform:rotate(45deg) scale(0);
}
.cinema-scene.is-active .connect-tick::after{
  animation:tick-mark .3s var(--ease) forwards;
}
.cinema-scene.is-active .c1 .connect-tick::after{animation-delay:1.1s;}
.cinema-scene.is-active .c2 .connect-tick::after{animation-delay:1.35s;}
.cinema-scene.is-active .c3 .connect-tick::after{animation-delay:1.6s;}
.connect-foot{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  text-align:center;
  opacity:0;
}
.cinema-scene.is-active .connect-foot{
  animation:fade-up .5s var(--ease) 1.7s forwards;
}
@keyframes fade-up{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:none;}
}

/* --- Exception email scene (cinema) --- */
.exception-stage{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
  min-height:240px;
  justify-content:center;
  padding:6px 4px;
}
.exception-email{
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 6px 18px rgba(18,19,26,0.05);
  border-left:3px solid #5B5FFF;
  opacity:0;
  transform:translateY(10px);
}
.cinema-scene.is-active .exception-email{animation:connect-in .55s var(--ease) .15s forwards;}
.ex-head{display:flex; flex-wrap:wrap; gap:6px 12px; margin-bottom:8px;}
.ex-from{font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}
.ex-subject{font-size:12px; font-weight:600; color:var(--ink);}
.exception-email p{font-size:13px; color:var(--ink); margin:0; line-height:1.45;}
.exception-reply{
  align-self:flex-end;
  max-width:88%;
  background:#F4F3FF;
  border:1px solid rgba(91,95,255,0.18);
  border-radius:14px;
  padding:10px 14px;
  opacity:0;
  transform:translateY(10px);
}
.cinema-scene.is-active .exception-reply{animation:connect-in .55s var(--ease) 1.1s forwards;}
.ex-reply-label{display:block; font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px;}
.exception-reply p{font-size:13px; color:var(--ink); margin:0; line-height:1.4;}
.exception-done{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  font-size:12px;
  font-weight:700;
  color:var(--ok);
  opacity:0;
  margin-top:2px;
}
.exception-done i{
  width:8px;height:8px;border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 4px rgba(31,157,106,0.15);
}
.cinema-scene.is-resolved .exception-done,
.cinema-scene.is-active .exception-done{
  animation:connect-in .5s var(--ease) 1.9s forwards;
}

/* --- Process scene --- */
.process-stage{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:12px;
  flex:1;
  min-height:220px;
}
.ledger{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.ledger-row{
  display:grid;
  grid-template-columns:10px 1fr auto auto;
  gap:8px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:12px;
  padding:10px 12px;
  opacity:0;
  transform:translateY(10px);
}
.cinema-scene.is-active .ledger-row{
  animation:ledger-in .55s var(--ease) forwards;
}
.cinema-scene.is-active .ledger-row.r1{animation-delay:.1s;}
.cinema-scene.is-active .ledger-row.r2{animation-delay:.28s;}
.cinema-scene.is-active .ledger-row.r3{animation-delay:.46s;}
.cinema-scene.is-active .ledger-row.r4{animation-delay:.64s;}
@keyframes ledger-in{
  to{opacity:1; transform:translateY(0);}
}
.ledger-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(91,95,255,0.15);
}
.ledger-name{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ledger-cat{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--accent-deep);
  background:var(--accent-soft);
  padding:4px 7px;
  border-radius:999px;
  opacity:0;
  transform:scale(0.8);
}
.cinema-scene.is-active .ledger-cat{
  animation:cat-pop .4s var(--ease) forwards;
}
.cinema-scene.is-active .r1 .ledger-cat{animation-delay:.55s;}
.cinema-scene.is-active .r2 .ledger-cat{animation-delay:.75s;}
.cinema-scene.is-active .r3 .ledger-cat{animation-delay:.95s;}
.cinema-scene.is-active .r4 .ledger-cat{animation-delay:1.15s;}
@keyframes cat-pop{
  to{opacity:1; transform:scale(1);}
}
.ledger-row strong{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;}
.mini-spark{
  background:linear-gradient(180deg,#fff,#F4F3FF);
  border:1px solid var(--line-soft);
  border-radius:16px;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 8px 24px rgba(91,95,255,0.08);
  opacity:0;
  transform:scale(0.96);
}
.cinema-scene.is-active .mini-spark{
  animation:pack-in .55s var(--ease) .3s forwards;
}
.mini-spark-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.mini-spark-head span{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;}
.mini-spark-head b{font-family:var(--font-display);font-size:26px;font-weight:400;color:var(--ink);}
.spark-draw{width:100%;height:56px;margin-top:8px;}
.spark-line{
  stroke-dasharray:280;
  stroke-dashoffset:280;
}
.cinema-scene.is-active .spark-line{
  animation:draw-line 1.4s var(--ease) .5s forwards;
}
.spark-area{opacity:0;}
.cinema-scene.is-active .spark-area{
  animation:fade-area 1s ease .9s forwards;
}
@keyframes draw-line{to{stroke-dashoffset:0;}}
@keyframes fade-area{to{opacity:1;}}

/* --- Review scene --- */
.review-stage{
  display:grid;
  grid-template-columns:1.35fr 0.65fr;
  gap:12px;
  flex:1;
  min-height:220px;
}
.exception-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(210,120,60,0.28);
  border-radius:18px;
  padding:16px;
  box-shadow:0 12px 32px rgba(210,120,60,0.1);
  overflow:hidden;
  opacity:0;
  transform:translateY(14px) scale(0.97);
}
.cinema-scene.is-active .exception-card{
  animation:pack-in .55s var(--ease) .12s forwards;
}
.cinema-scene.is-active.is-resolved .exception-card{
  border-color:rgba(31,157,106,0.35);
  box-shadow:0 12px 32px rgba(31,157,106,0.12);
  transition:border-color .5s, box-shadow .5s;
}
.exception-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.exception-flag{
  font-size:10px;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#C56A2B;
  background:#FFF4EA;
  padding:5px 8px;
  border-radius:999px;
}
.cinema-scene.is-active.is-resolved .exception-flag{
  color:var(--ok);
  background:rgba(31,157,106,0.12);
}
.cinema-scene.is-active.is-resolved .exception-flag::after{content:" · cleared";}
.exception-amt{font-family:var(--font-display);font-size:22px;color:var(--ink);}
.exception-card h4{font-family:var(--font-body);font-size:15px;font-weight:700;margin:0 0 6px;}
.exception-card > p{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:12px;}
.exception-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.exception-meta span{
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  background:#FAFAFE;
  border:1px solid var(--line-soft);
  padding:4px 8px;
  border-radius:999px;
}
.exception-actions{display:flex;flex-wrap:wrap;gap:6px;}
.ex-chip{
  font-size:11px;
  font-weight:600;
  color:var(--ink-soft);
  background:#F7F6FC;
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
  opacity:0;
  transform:translateY(6px);
}
.cinema-scene.is-active .ex-chip{
  animation:chip-in .4s var(--ease) forwards;
}
.cinema-scene.is-active .ex-chip:nth-child(1){animation-delay:.5s;}
.cinema-scene.is-active .ex-chip:nth-child(2){animation-delay:.7s;}
.cinema-scene.is-active .ex-chip.is-resolve{
  animation-delay:1.5s;
  background:rgba(31,157,106,0.12);
  border-color:rgba(31,157,106,0.3);
  color:var(--ok);
}
@keyframes chip-in{to{opacity:1; transform:translateY(0);}}
.resolve-bar{
  position:absolute;
  left:0;right:0;bottom:0;
  height:3px;
  background:rgba(31,157,106,0.12);
}
.resolve-bar i{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--ok),#4FC48E);
}
.cinema-scene.is-active .resolve-bar i{
  animation:resolve-fill 1.2s var(--ease) 1.4s forwards;
}
@keyframes resolve-fill{to{width:100%;}}
.review-side{
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
}
.side-stat{
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:14px;
  opacity:0;
  transform:translateX(10px);
}
.cinema-scene.is-active .side-stat{
  animation:side-in .5s var(--ease) forwards;
}
.cinema-scene.is-active .side-stat:nth-child(1){animation-delay:.25s;}
.cinema-scene.is-active .side-stat:nth-child(2){animation-delay:.4s;}
@keyframes side-in{to{opacity:1; transform:translateX(0);}}
.side-stat span{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:4px;}
.side-stat b{font-family:var(--font-display);font-size:28px;font-weight:400;color:var(--ink);}
.side-stat b.side-open{color:#C56A2B;}
.cinema-scene.is-active.is-resolved .side-open{color:var(--ok);}
.cinema-scene.is-active.is-resolved .side-open::after{content:"";}
.side-pulse{
  flex:1;
  border-radius:14px;
  background:
    radial-gradient(circle at 50% 40%, rgba(91,95,255,0.2), transparent 60%),
    linear-gradient(180deg,#fff,var(--accent-soft));
  border:1px solid var(--line-soft);
  position:relative;
  overflow:hidden;
  min-height:60px;
  opacity:0;
}
.cinema-scene.is-active .side-pulse{
  animation:side-in .5s var(--ease) .55s forwards;
}
.side-pulse::after{
  content:"";
  position:absolute;
  inset:20% 25%;
  border-radius:50%;
  border:2px solid rgba(91,95,255,0.35);
  animation:ripple 2.4s ease-out infinite;
}
@keyframes ripple{
  0%{transform:scale(0.6); opacity:0.8;}
  100%{transform:scale(1.4); opacity:0;}
}
@keyframes pack-in{
  to{opacity:1; transform:translateY(0) scale(1);}
}

/* --- Deliver scene --- */
.deliver-stage{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:14px;
  align-items:center;
  flex:1;
  min-height:220px;
}
.close-ring-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}
.close-ring{
  width:128px;height:128px;
  transform:rotate(-90deg);
  filter:drop-shadow(0 8px 20px rgba(91,95,255,0.22));
}
.ring-track{
  fill:none;
  stroke:rgba(91,95,255,0.12);
  stroke-width:9;
}
.ring-fill{
  fill:none;
  stroke:#5B5FFF;
  stroke-width:9;
  stroke-linecap:round;
  stroke-dasharray:314;
  stroke-dashoffset:314;
}
.cinema-scene.is-active .ring-fill{
  animation:ring-fill 1.6s var(--ease) .2s forwards;
}
@keyframes ring-fill{to{stroke-dashoffset:0;}}
.close-ring-core{
  position:absolute;
  top:0;left:0;right:0;
  height:128px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.close-ring-core b{
  font-family:var(--font-display);
  font-size:36px;
  font-weight:400;
  color:var(--ink);
  line-height:1;
}
.close-ring-core span{
  font-size:14px;
  font-weight:700;
  color:var(--muted);
  margin-top:8px;
}
.close-ring-label{
  margin-top:8px;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}
.deliver-pack{
  position:relative;
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:18px;
  padding:12px 12px 14px;
  display:flex;
  flex-direction:column;
  gap:7px;
  box-shadow:0 10px 28px rgba(91,95,255,0.1);
  opacity:0;
  transform:translateX(12px);
  overflow:visible;
}
.cinema-scene.is-active .deliver-pack{
  animation:side-in .55s var(--ease) .35s forwards;
}
.pack-line{
  display:grid;
  grid-template-columns:14px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 10px;
  border-radius:12px;
  background:#FAFAFE;
  border:1px solid var(--line-soft);
  opacity:0;
  transform:translateX(8px);
}
.cinema-scene.is-active .pack-line{
  animation:side-in .45s var(--ease) forwards;
}
.cinema-scene.is-active .pack-line.p1{animation-delay:.55s;}
.cinema-scene.is-active .pack-line.p2{animation-delay:.7s;}
.cinema-scene.is-active .pack-line.p3{animation-delay:.85s;}
.cinema-scene.is-active .pack-line.p4{animation-delay:1s;}
.pack-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 3px rgba(31,157,106,0.15);
}
.pack-dot.warn{
  background:#E08A45;
  box-shadow:0 0 0 3px rgba(224,138,69,0.18);
}
.pack-line b{font-size:12.5px;font-weight:700;color:var(--ink);}
.pack-line em{
  font-style:normal;
  font-size:11px;
  font-weight:700;
  color:var(--ok);
}
.pack-line em.review-em{color:#C56A2B;}
.close-stamp{
  position:relative;
  align-self:center;
  margin-top:6px;
  font-family:var(--font-display);
  font-size:15px;
  font-style:italic;
  color:var(--accent);
  border:1.5px solid rgba(91,95,255,0.45);
  padding:5px 12px;
  border-radius:8px;
  transform:rotate(-4deg) scale(0);
  opacity:0;
  background:rgba(255,255,255,0.98);
  box-shadow:0 6px 16px rgba(91,95,255,0.12);
  z-index:1;
  white-space:nowrap;
  pointer-events:none;
}
.cinema-scene.is-active .close-stamp{
  animation:stamp-in .55s cubic-bezier(.34,1.4,.64,1) 1.35s forwards;
}
@keyframes stamp-in{
  to{opacity:1; transform:rotate(-4deg) scale(1);}
}

/* Cinema foot / progress */
.cinema-foot{
  position:relative;
  z-index:1;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line-soft);
}
.cinema-progress{
  height:3px;
  background:rgba(91,95,255,0.1);
  border-radius:99px;
  overflow:hidden;
  margin-bottom:10px;
}
.cinema-progress i{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--accent),#9B8CFF);
  border-radius:99px;
  will-change:width;
}
.cinema-foot-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.cinema-foot-stats > div{
  background:linear-gradient(180deg,#fff,#F8F7FF);
  border:1px solid var(--line-soft);
  border-radius:12px;
  padding:10px 12px;
}
.cinema-foot-stats b{
  display:block;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink);
  line-height:1.25;
}
.cinema-foot-stats span{
  font-size:11px;
  color:var(--muted);
}

/* Legacy flow-step (process pages / other) keep minimal if present */
.hero-panel{
  position:relative;
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(255,255,255,0.9);
  border-radius:28px;
  padding:22px;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(18px);
}
.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}
.panel-head .label{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.panel-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  color:var(--ok);
  background:rgba(31,157,106,0.1);
  padding:6px 10px;
  border-radius:var(--radius-pill);
}
.flow-track{display:grid;gap:10px;}
.flow-step{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:16px;
  padding:14px 16px;
  opacity:0.72;
}
.flow-step.is-active{
  opacity:1;
  border-color:rgba(91,95,255,0.45);
  background:linear-gradient(180deg,#fff,#F4F3FF);
  box-shadow:0 10px 28px rgba(91,95,255,0.14);
}
.flow-dot{
  width:36px;height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:700;
  color:var(--accent);
  background:var(--accent-soft);
  flex-shrink:0;
}
.flow-step.is-active .flow-dot{color:#fff;background:var(--accent);}
.flow-step strong{display:block;font-size:14px;font-weight:600;color:var(--ink);}
.flow-step span{font-size:12.5px;color:var(--muted);}
.panel-foot{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mini-stat{
  background:linear-gradient(180deg,#fff,#F8F7FF);
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:14px;
}
.mini-stat b{display:block;font-family:var(--font-display);font-size:22px;color:var(--ink);margin-bottom:2px;}
.mini-stat span{font-size:12px;color:var(--muted);}

/* ---------- Living dash panels (scroll in) ---------- */
.dash-panel.is-alive .dash-checklist li,
.dash-panel.is-alive .dash-metric,
.dash-panel.is-alive .dash-kpi-card,
.dash-panel.is-alive .dash-table-row,
.dash-panel.is-alive .dash-pack-item,
.dash-panel.is-alive .dash-bar-row{
  opacity:0;
  transform:translateY(10px);
}
.dash-panel.is-alive.is-inview .dash-checklist li,
.dash-panel.is-alive.is-inview .dash-metric,
.dash-panel.is-alive.is-inview .dash-kpi-card,
.dash-panel.is-alive.is-inview .dash-table-row,
.dash-panel.is-alive.is-inview .dash-pack-item,
.dash-panel.is-alive.is-inview .dash-bar-row{
  animation:panel-item-in .55s var(--ease) forwards;
  animation-delay:calc(var(--i,0) * 0.1s + 0.08s);
}
@keyframes panel-item-in{
  to{opacity:1; transform:translateY(0);}
}
.dash-panel.is-alive .chart-line{
  stroke-dasharray:420;
  stroke-dashoffset:420;
}
.dash-panel.is-alive.is-inview .chart-line{
  animation:draw-line 1.4s var(--ease) .2s forwards;
}
.dash-panel.is-alive .chart-area{opacity:0;}
.dash-panel.is-alive.is-inview .chart-area{
  animation:fade-area .9s ease .7s forwards;
}
.dash-panel.is-alive .dash-bar-row .bar i,
.dash-panel.is-alive .stack-bar i{
  width:0 !important;
  transition:none;
}
.dash-panel.is-alive.is-inview .dash-bar-row .bar i,
.dash-panel.is-alive.is-inview .stack-bar i{
  width:var(--w,50%) !important;
  transition:width 1s var(--ease) calc(var(--i,0) * 0.12s + 0.25s);
}
.dash-panel.is-alive .dash-vbars > span{
  transform:scaleY(0);
  transform-origin:bottom center;
  opacity:0.4;
}
.dash-panel.is-alive.is-inview .dash-vbars > span{
  animation:bar-grow .7s var(--ease) forwards;
  animation-delay:calc(var(--i,0) * 0.05s + 0.15s);
}
@keyframes bar-grow{
  to{transform:scaleY(1); opacity:1;}
}
.dash-badge.sample::before{
  animation:status-pulse 1.8s ease-out infinite;
}

/* Sample close strip under hero */
.sample-strip-wrap{
  position:relative;
  z-index:1;
  margin-top:36px;
}
.sample-strip{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(255,255,255,0.95);
  border-radius:20px;
  padding:18px 22px;
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(14px);
  transition:
    transform .4s var(--ease),
    box-shadow .4s var(--ease),
    border-color .4s var(--ease);
}
.sample-strip:hover{
  transform:translateY(-3px);
  border-color:rgba(91,95,255,0.22);
  box-shadow:var(--shadow-md);
}
.sample-strip-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-soft);
  padding:7px 11px;
  border-radius:var(--radius-pill);
  flex-shrink:0;
}
.sample-strip-metrics{
  display:flex;
  flex:1;
  gap:12px 28px;
  flex-wrap:wrap;
  justify-content:space-between;
  min-width:0;
}
.sample-metric{
  min-width:120px;
  border-radius:12px;
  padding:4px 6px;
  margin:-4px -6px;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.sample-metric:hover{
  background:rgba(91,95,255,0.05);
  transform:translateY(-1px);
}
.sample-metric-label{
  display:block;
  font-size:12px;
  font-weight:500;
  color:var(--muted);
  margin-bottom:4px;
}
.sample-metric strong{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:400;
  color:var(--ink);
  letter-spacing:-0.02em;
  transition:color .3s var(--ease);
}
.sample-metric:hover strong{color:var(--accent-deep);}
.sample-disclaimer{
  margin-top:12px;
  font-size:12.5px;
  color:var(--muted);
  text-align:center;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
section{padding:96px 0;}
.section-tight{padding:72px 0;}
.section-head{
  max-width:640px;
  margin-bottom:48px;
}
.section-head + .chip-row{
  margin-top:-28px;
  margin-bottom:8px;
}
.section-head.center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.section-head.center .eyebrow{
  justify-content:center;
}
.section-head h2{
  font-size:clamp(32px,4vw,48px);
  line-height:1.12;
}
.section-head p{
  margin-top:16px;
  font-size:17px;
  color:var(--ink-soft);
  line-height:1.7;
}

.bg-soft{
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(91,95,255,0.07), transparent 50%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(245,230,220,0.4), transparent 50%),
    var(--bg-warm);
}
.bg-lavender{
  background:
    linear-gradient(180deg, rgba(236,235,255,0.7), rgba(247,246,252,0.2)),
    var(--bg);
}

/* Logo / stack strip */
.stack-strip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 28px;
  padding:8px 0 0;
}
.stack-strip span{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:0.02em;
}
.stack-marquee{
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  padding:10px 0;
}
.stack-track{
  display:flex;
  width:max-content;
  gap:40px;
  animation:marquee-roll 28s linear infinite;
}
.stack-marquee:hover .stack-track{
  animation-play-state:paused;
}
.stack-track span{
  font-size:13.5px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:0.04em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0.85;
  transition:color .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
.stack-track span:hover{
  color:var(--ink);
  opacity:1;
  transform:translateY(-2px);
}
@keyframes marquee-roll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* Problem / pain cards */
.problem-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:start;
}
.problem-copy p{
  font-size:17px;
  color:var(--ink-soft);
  line-height:1.75;
  margin-bottom:14px;
}
.pain-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.pain-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 24px;
  box-shadow:var(--shadow-sm);
  transition:
    transform .4s var(--ease),
    box-shadow .4s var(--ease),
    border-color .4s var(--ease);
  will-change:transform;
}
.pain-card:hover{
  transform:translateY(-4px);
  border-color:rgba(91,95,255,0.28);
  box-shadow:
    0 2px 4px rgba(18,19,26,0.04),
    0 8px 16px rgba(18,19,26,0.05),
    0 18px 36px rgba(91,95,255,0.12);
}
.pain-num{
  font-family:var(--font-display);
  font-size:28px;
  color:var(--accent);
  line-height:1;
  display:block;
  margin-bottom:16px;
}
.pain-card h3{
  font-family:var(--font-body);
  font-size:17px;
  font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:10px;
  line-height:1.35;
}
.pain-card p{
  font-size:14.5px;
  color:var(--muted);
  line-height:1.7;
}

/* Component tile grid (kept for any short product lists) */
.component-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.component-tile{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 22px 20px;
  box-shadow:var(--shadow-sm);
  transition:
    transform .4s var(--ease),
    box-shadow .4s var(--ease),
    border-color .4s var(--ease);
  will-change:transform;
}
.component-tile:hover{
  transform:translateY(-4px);
  border-color:rgba(91,95,255,0.28);
  box-shadow:
    0 2px 4px rgba(18,19,26,0.04),
    0 8px 16px rgba(18,19,26,0.05),
    0 18px 36px rgba(91,95,255,0.12);
}
.tile-top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.tile-icon{
  width:40px;height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:var(--accent);
  background:var(--accent-soft);
  flex-shrink:0;
}
.tile-icon svg{width:20px;height:20px;}
.component-tile h3{
  font-family:var(--font-body);
  font-size:17px;
  font-weight:700;
  letter-spacing:-0.02em;
}
.tile-lede{
  font-size:14px;
  color:var(--muted);
  line-height:1.65;
  margin-bottom:14px;
}
.component-tile ul{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:18px;
  flex:1;
}
.component-tile ul li{
  font-size:13.5px;
  color:var(--ink-soft);
  padding-left:14px;
  position:relative;
  line-height:1.5;
}
.component-tile ul li::before{
  content:"";
  position:absolute;
  left:0;top:8px;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
  opacity:0.55;
}

/* Mars-style feature rows: copy + dashboard panel */
.feature-showcase{
  display:flex;
  flex-direction:column;
  gap:88px;
  margin-top:8px;
}
.feature-row{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:48px 56px;
  align-items:center;
}
.feature-row.is-reverse .feature-copy{order:2;}
.feature-row.is-reverse .feature-visual-wrap{order:1;}
.feature-copy .eyebrow{margin-bottom:14px;}
.feature-copy h3{
  font-family:var(--font-display);
  font-size:clamp(28px,3.2vw,40px);
  line-height:1.15;
  letter-spacing:-0.02em;
  margin-bottom:14px;
  max-width:16ch;
}
.feature-copy > p{
  font-size:16px;
  color:var(--ink-soft);
  line-height:1.7;
  max-width:42ch;
  margin-bottom:22px;
}
.check-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.check-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.55;
}
.check-list li::before{
  content:"";
  width:20px;height:20px;
  flex-shrink:0;
  margin-top:1px;
  border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='10' fill='%235B5FFF'/%3E%3Cpath d='M6 10.2l2.4 2.4L14 7.2' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/contain no-repeat;
}

.feature-visual-wrap{
  position:relative;
}
.feature-visual-wrap::before{
  content:"";
  position:absolute;
  inset:-12% -8% auto auto;
  width:180px;height:180px;
  background:radial-gradient(circle, rgba(91,95,255,0.22), transparent 70%);
  filter:blur(8px);
  pointer-events:none;
  z-index:0;
}
.dash-panel{
  position:relative;
  z-index:1;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px 22px 18px;
  box-shadow:var(--shadow-md);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.feature-row:hover .dash-panel{
  transform:translateY(-4px);
  border-color:rgba(91,95,255,0.22);
  box-shadow:var(--shadow-lg);
}
.dash-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:18px;
}
.dash-head strong{
  display:block;
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.dash-head span{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:3px;
}
.dash-badge{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:6px 10px;
  border-radius:var(--radius-pill);
  flex-shrink:0;
}
.dash-badge.sample{
  color:var(--accent-deep);
  background:var(--accent-soft);
  border:1px solid rgba(91,95,255,0.18);
}
.dash-badge.sample::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
  margin-right:6px;
  vertical-align:middle;
  box-shadow:0 0 0 3px rgba(91,95,255,0.18);
}

.dash-checklist{display:flex;flex-direction:column;gap:8px;}
.dash-checklist li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:12px;
  background:#FAFAFE;
  border:1px solid var(--line-soft);
  font-size:13px;
  color:var(--ink-soft);
  transition:
    transform .3s var(--ease),
    border-color .3s var(--ease),
    box-shadow .3s var(--ease),
    background .3s var(--ease);
}
.dash-checklist li:hover{
  transform:translateY(-2px);
  border-color:rgba(91,95,255,0.28);
  box-shadow:0 6px 16px rgba(91,95,255,0.1);
  background:#fff;
}
.dash-checklist li em{
  font-style:normal;
  font-size:11.5px;
  font-weight:700;
  color:var(--ok);
}
.dash-checklist li.is-warn{
  border-color:rgba(210,120,60,0.25);
  background:#FFF9F4;
}
.dash-checklist li.is-warn em{color:#C56A2B;}

.dash-metric-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:16px;
}
.dash-metric{
  background:linear-gradient(180deg,#fff,#F7F6FC);
  border:1px solid var(--line-soft);
  border-radius:12px;
  padding:12px;
  transition:
    transform .3s var(--ease),
    border-color .3s var(--ease),
    box-shadow .3s var(--ease);
}
.dash-metric:hover{
  transform:translateY(-2px);
  border-color:rgba(91,95,255,0.3);
  box-shadow:0 8px 18px rgba(91,95,255,0.1);
}
.dash-metric span{
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:4px;
}
.dash-metric strong{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:400;
  color:var(--ink);
}

.dash-chart-line{margin-bottom:6px;}
.dash-chart-line svg{
  width:100%;
  height:88px;
  display:block;
}
.dash-chart-labels{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted);
  margin-top:4px;
  padding:0 2px;
}

.dash-kpi-trio{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:14px;
}
.dash-kpi-card{
  background:linear-gradient(180deg,#fff,#F7F6FC);
  border:1px solid var(--line-soft);
  border-radius:12px;
  padding:12px 10px;
  transition:
    transform .3s var(--ease),
    border-color .3s var(--ease),
    box-shadow .3s var(--ease);
}
.dash-kpi-card:hover{
  transform:translateY(-2px);
  border-color:rgba(91,95,255,0.3);
  box-shadow:0 8px 18px rgba(91,95,255,0.1);
}
.dash-kpi-card span{
  display:block;
  font-size:11px;
  color:var(--muted);
  font-weight:600;
  margin-bottom:4px;
}
.dash-kpi-card strong{
  display:block;
  font-family:var(--font-display);
  font-size:22px;
  font-weight:400;
  color:var(--ink);
  margin-bottom:4px;
}
.dash-kpi-card em{
  font-style:normal;
  font-size:11.5px;
  font-weight:600;
}
.dash-kpi-card em.up,
.dash-kpi-card em.ok{color:var(--ok);}

.dash-bars-h{display:flex;flex-direction:column;gap:9px;}
.dash-bar-row{
  display:grid;
  grid-template-columns:72px 1fr 44px;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
}
.dash-bar-row strong{text-align:right;color:var(--ink);font-weight:600;}
.dash-bar-row .bar{
  height:8px;
  background:rgba(91,95,255,0.1);
  border-radius:99px;
  overflow:hidden;
}
.dash-bar-row .bar i{
  display:block;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--accent),#9B8CFF);
}
.dash-bar-row .bar.muted i{
  background:linear-gradient(90deg,#B8B5D0,#D5D2E6);
}

.dash-table{display:flex;flex-direction:column;gap:8px;margin-bottom:4px;}
.dash-table-head,
.dash-table-row{
  display:grid;
  grid-template-columns:70px 1fr 64px;
  gap:10px;
  align-items:center;
  font-size:12px;
}
.dash-table-head{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  padding-bottom:4px;
  border-bottom:1px solid var(--line-soft);
}
.dash-table-row span{color:var(--ink-soft);font-weight:500;}
.dash-table-row strong{text-align:right;color:var(--ink);font-weight:700;}
.dash-table-row.is-warn span{color:#C56A2B;}
.stack-bar{
  height:10px;
  background:rgba(91,95,255,0.08);
  border-radius:99px;
  overflow:hidden;
}
.stack-bar i{
  display:block;
  height:100%;
  border-radius:99px;
}
.stack-bar i.s1{background:linear-gradient(90deg,#5B5FFF,#8B87FF);}
.stack-bar i.s2{background:linear-gradient(90deg,#7B78F0,#B0AEFF);}
.stack-bar i.s3{background:linear-gradient(90deg,#E08A45,#F0B07A);}
.stack-bar i.s4{background:linear-gradient(90deg,#C8C5DB,#DCD9EC);}
.warn-dot{
  display:inline-block;
  width:0;height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-bottom:7px solid #D98A3A;
  margin-left:4px;
  vertical-align:middle;
}

.dash-vbars{
  display:flex;
  align-items:flex-end;
  gap:6px;
  height:120px;
  padding:8px 0 20px;
  margin-bottom:4px;
}
.dash-vbars > span{
  flex:1;
  height:var(--h,50%);
  border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg, rgba(91,95,255,0.75), rgba(155,140,255,0.45));
  position:relative;
  min-width:0;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.dash-vbars > span:hover{
  transform:translateY(-3px);
  opacity:1;
}
.dash-vbars > span.is-accent{
  background:linear-gradient(180deg, #5B5FFF, #8B7CFF);
  box-shadow:0 6px 16px rgba(91,95,255,0.28);
}
.dash-vbars > span em{
  position:absolute;
  bottom:-16px;
  left:50%;
  transform:translateX(-50%);
  font-style:normal;
  font-size:9px;
  color:var(--muted);
  font-weight:600;
}
.dash-panel:has(.dash-vbars){padding-bottom:18px;}

.dash-pack-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;}
.dash-pack-item{
  display:grid;
  grid-template-columns:32px 1fr auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:12px;
  background:#FAFAFE;
  border:1px solid var(--line-soft);
  transition:
    transform .3s var(--ease),
    border-color .3s var(--ease),
    box-shadow .3s var(--ease),
    background .3s var(--ease);
}
.dash-pack-item:hover{
  transform:translateY(-2px);
  border-color:rgba(91,95,255,0.28);
  box-shadow:0 6px 16px rgba(91,95,255,0.1);
  background:#fff;
}
.dash-pack-item > span{
  width:32px;height:32px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:700;
  color:var(--accent);
  background:var(--accent-soft);
}
.dash-pack-item strong{
  display:block;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
}
.dash-pack-item em{
  display:block;
  font-style:normal;
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}
.dash-pack-item b{
  font-size:11.5px;
  font-weight:700;
  color:var(--ok);
}
.dash-pack-item.is-open{
  border-color:rgba(210,120,60,0.28);
  background:#FFF9F4;
}
.dash-pack-item.is-open b{color:#C56A2B;}

.dash-foot{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.dash-foot-label{
  display:block;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:2px;
}
.dash-foot-value{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:400;
  color:var(--ink);
}
.dash-pill{
  font-size:12px;
  font-weight:600;
  padding:7px 11px;
  border-radius:var(--radius-pill);
}
.dash-pill.ok{
  color:var(--ok);
  background:rgba(31,157,106,0.1);
}
.dash-pill.warn{
  color:#C56A2B;
  background:rgba(210,120,60,0.12);
}

/* Hire comparison table */
.compare-table-wrap{
  max-width:820px;
  margin:0 auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  box-shadow:var(--shadow-sm);
  transition:
    transform .4s var(--ease),
    box-shadow .4s var(--ease),
    border-color .4s var(--ease);
}
.compare-table-wrap:hover{
  transform:translateY(-4px);
  border-color:rgba(91,95,255,0.22);
  box-shadow:var(--shadow-md);
}
.compare-table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:14.5px;
}
.compare-table th,
.compare-table td{
  padding:18px 22px;
  text-align:left;
  border-bottom:1px solid var(--line-soft);
  vertical-align:middle;
  transition:background .3s var(--ease);
}
.compare-table thead th{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  background:rgba(247,246,252,0.8);
}
.compare-table thead th.col-selflyx{
  color:var(--accent-deep);
  background:rgba(91,95,255,0.08);
}
.compare-table tbody th{
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  width:22%;
}
.compare-table tbody td{
  color:var(--ink-soft);
  line-height:1.5;
}
.compare-table tbody td.col-selflyx{
  color:var(--ink);
  font-weight:600;
  background:rgba(91,95,255,0.04);
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td{border-bottom:none;}
.compare-table tbody tr:hover th,
.compare-table tbody tr:hover td{
  background:rgba(91,95,255,0.05);
}
.compare-table tbody tr:hover td.col-selflyx{
  background:rgba(91,95,255,0.1);
}

/* Honest social / early-stage proof */
.proof-card{
  max-width:720px;
  margin:0 auto;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:28px;
  padding:48px 40px;
  box-shadow:var(--shadow-sm);
  transition:
    transform .4s var(--ease),
    box-shadow .4s var(--ease),
    border-color .4s var(--ease);
}
.proof-card:hover{
  transform:translateY(-4px);
  border-color:rgba(91,95,255,0.25);
  box-shadow:
    0 4px 10px rgba(18,19,26,0.04),
    0 20px 40px rgba(91,95,255,0.1);
}
.proof-card h2{
  font-size:clamp(28px,3.4vw,40px);
  line-height:1.15;
  margin-bottom:14px;
}
.proof-card p{
  font-size:16px;
  color:var(--ink-soft);
  line-height:1.7;
  max-width:520px;
  margin:0 auto;
}
.proof-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.proof-card .proof-actions{margin-left:auto;margin-right:auto;}

.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.card-grid.is-pair{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
  gap:20px;
}
.card-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  padding:0;
  color:var(--accent);
  font-size:14px;
  font-weight:600;
  letter-spacing:-0.01em;
  transition:color .2s var(--ease), gap .2s var(--ease);
}
.card-link:hover{
  color:var(--accent-deep);
  gap:11px;
}
.card-link::after{
  content:"→";
  font-weight:700;
  transition:transform .2s var(--ease);
}
.card-link:hover::after{
  transform:translateX(2px);
}
.card .card-link{
  margin-top:auto;
  padding-top:8px;
}
.card-grid.is-pair .card{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:32px 28px;
}
.services-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}
.services-grid .card{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:32px 28px;
  position:relative;
  overflow:hidden;
}
.services-grid .card::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:3px;
  background:linear-gradient(90deg,var(--accent),rgba(91,95,255,0.35));
  opacity:0.85;
}
.services-grid .card .check-list,
.services-grid .card ul.check-list{
  margin-top:auto;
  padding-top:18px;
}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 24px;
  box-shadow:var(--shadow-sm);
  transition:
    transform .4s var(--ease),
    box-shadow .4s var(--ease),
    border-color .4s var(--ease);
  will-change:transform;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(91,95,255,0.28);
  box-shadow:
    0 2px 4px rgba(18,19,26,0.04),
    0 8px 16px rgba(18,19,26,0.05),
    0 18px 36px rgba(91,95,255,0.12);
}
.card:hover .card-index{
  background:var(--accent);
  color:#fff;
}
.card .card-index{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-soft);
  padding:6px 10px;
  border-radius:var(--radius-pill);
  margin-bottom:18px;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.card h3{
  font-family:var(--font-body);
  font-size:18px;
  font-weight:700;
  margin-bottom:10px;
  letter-spacing:-0.02em;
}
.card p{
  font-size:14.5px;
  color:var(--muted);
  line-height:1.7;
}
.card ul{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.card ul li{
  font-size:13.5px;
  color:var(--ink-soft);
  padding-left:14px;
  position:relative;
}
.card ul li::before{
  content:"";
  position:absolute;
  left:0;top:9px;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
  opacity:0.55;
}

/* Feature bands */
.feature-band{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:20px;
}
.feature-card{
  position:relative;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:28px;
  padding:36px 32px;
  min-height:280px;
  box-shadow:var(--shadow-sm);
  transition:
    transform .45s var(--ease),
    box-shadow .45s var(--ease),
    border-color .45s var(--ease);
  will-change:transform;
}
.feature-card:hover{
  transform:translateY(-4px);
  border-color:rgba(91,95,255,0.25);
  box-shadow:
    0 4px 10px rgba(18,19,26,0.04),
    0 20px 40px rgba(91,95,255,0.12);
}
.feature-card:hover .feature-visual{
  transform:scale(1.02);
}
.feature-card.wide{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:28px;
  align-items:center;
}
.feature-card h3{
  font-family:var(--font-display);
  font-size:clamp(26px,3vw,34px);
  line-height:1.15;
  margin-bottom:12px;
}
.feature-card p{
  font-size:15.5px;
  color:var(--ink-soft);
  max-width:420px;
  line-height:1.7;
}
.feature-visual{
  position:relative;
  border-radius:20px;
  min-height:180px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), transparent 40%),
    linear-gradient(135deg, #5B5FFF, #9B8CFF 45%, #F5E6DC);
  overflow:hidden;
  transition:transform .5s var(--ease);
}
.feature-visual.mint{
  background:
    radial-gradient(circle at 70% 20%, rgba(255,255,255,0.5), transparent 45%),
    linear-gradient(145deg, #7B8CFF, #D8F0E6 60%, #F7F6FC);
}
.feature-visual.peach{
  background:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.45), transparent 40%),
    linear-gradient(160deg, #8B7CFF, #F5E6DC 55%, #ECEBFF);
}
.bubble{
  position:absolute;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.95);
  border-radius:14px;
  padding:10px 12px;
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.bubble.b1{top:18%;left:10%;}
.bubble.b2{top:48%;right:12%;}
.bubble.b3{bottom:16%;left:22%;}
.feature-visual.is-alive .bubble{
  animation:bubble-float 4.8s ease-in-out infinite;
}
.feature-visual.is-alive .bubble.b1{animation-delay:0s;}
.feature-visual.is-alive .bubble.b2{animation-delay:-1.4s;}
.feature-visual.is-alive .bubble.b3{animation-delay:-2.6s;}
@keyframes bubble-float{
  0%,100%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(0,-8px,0);}
}

/* Process */
.process-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.process-step{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px 20px;
  box-shadow:var(--shadow-sm);
  transition:
    transform .4s var(--ease),
    box-shadow .4s var(--ease),
    border-color .4s var(--ease);
  will-change:transform;
}
.process-step:hover{
  transform:translateY(-4px);
  border-color:rgba(91,95,255,0.28);
  box-shadow:
    0 2px 4px rgba(18,19,26,0.04),
    0 8px 16px rgba(18,19,26,0.05),
    0 18px 36px rgba(91,95,255,0.12);
}
.process-step:hover .step-num{
  transform:translateY(-2px);
  color:var(--accent-deep);
}
.process-step .step-num{
  font-family:var(--font-display);
  font-size:34px;
  color:var(--accent);
  line-height:1;
  margin-bottom:16px;
  display:block;
  transition:transform .35s var(--ease), color .35s var(--ease);
}
.process-step h3{
  font-family:var(--font-body);
  font-size:16px;
  font-weight:700;
  margin-bottom:8px;
}
.process-step p{
  font-size:13.5px;
  color:var(--muted);
  line-height:1.65;
}

/* Fit + stack (home) */
.fit-stack{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px 64px;
  align-items:start;
  max-width:980px;
  margin:0 auto;
}
.fit-stack-col h2{
  font-size:clamp(26px,3vw,34px);
  line-height:1.18;
  margin-top:10px;
}
.fit-stack-col p{
  margin-top:14px;
  font-size:15.5px;
  color:var(--ink-soft);
  line-height:1.65;
  max-width:42ch;
}
.fit-stack-col .check-list{
  margin-top:22px;
}

/* Who / chips */
.who-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.who-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 22px;
  box-shadow:var(--shadow-sm);
  transition:
    transform .4s var(--ease),
    box-shadow .4s var(--ease),
    border-color .4s var(--ease);
  will-change:transform;
}
.who-item:hover{
  transform:translateY(-3px);
  border-color:rgba(91,95,255,0.28);
  box-shadow:
    0 2px 4px rgba(18,19,26,0.04),
    0 14px 28px rgba(91,95,255,0.1);
}
.who-item .who-num{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:12px;
}
.who-item p{
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.7;
}
.who-item strong{color:var(--ink);font-weight:600;}

.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:0;
}
.chip-row.is-center{
  justify-content:center;
}
.chip{
  font-size:13px;
  font-weight:550;
  color:var(--ink-soft);
  background:rgba(255,255,255,0.8);
  border:1px solid var(--line);
  padding:10px 14px;
  border-radius:var(--radius-pill);
  transition:
    transform .3s var(--ease),
    box-shadow .3s var(--ease),
    border-color .3s var(--ease),
    color .3s var(--ease),
    background .3s var(--ease);
}
.chip:hover{
  transform:translateY(-2px);
  color:var(--ink);
  border-color:rgba(91,95,255,0.3);
  background:#fff;
  box-shadow:0 8px 20px rgba(91,95,255,0.1);
}

/* Founder / about block */
.founder-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:24px;
  align-items:stretch;
}
.founder-card,
.pilot-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:28px;
  padding:36px 32px;
  box-shadow:var(--shadow-sm);
  transition:
    transform .45s var(--ease),
    box-shadow .45s var(--ease),
    border-color .45s var(--ease);
  will-change:transform;
}
.founder-card:hover,
.pilot-card:hover{
  transform:translateY(-4px);
  border-color:rgba(91,95,255,0.25);
  box-shadow:
    0 4px 10px rgba(18,19,26,0.04),
    0 20px 40px rgba(91,95,255,0.1);
}
.founder-card h2,
.pilot-card h2{
  font-size:clamp(28px,3.2vw,38px);
  line-height:1.15;
  margin-bottom:14px;
}
.founder-card p,
.pilot-card p{
  font-size:15.5px;
  color:var(--ink-soft);
  line-height:1.7;
  margin-bottom:12px;
}
.founder-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.pilot-card{
  background:
    linear-gradient(160deg, rgba(91,95,255,0.08), rgba(245,230,220,0.35)),
    var(--surface);
}

/* Trust list */
.trust-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  max-width:900px;
}
.trust-list-item{
  display:flex;
  gap:14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px 16px;
}
.trust-list-item .tick{
  flex-shrink:0;
  width:28px;height:28px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:700;
  color:var(--accent);
  background:var(--accent-soft);
}
.trust-list-item p{
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.65;
}

/* FAQ */
.faq-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:40px;
  align-items:start;
}
.faq-list{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.faq-item{
  border-bottom:1px solid var(--line-soft);
  padding:0;
}
.faq-item:last-child{border-bottom:none;}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:20px 22px;
  font-size:15.5px;
  font-weight:600;
  color:var(--ink);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  border-radius:14px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.faq-item summary:hover{
  background:rgba(91,95,255,0.05);
  color:var(--accent-deep);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";
  color:var(--accent);
  font-size:20px;
  font-weight:500;
  line-height:1;
}
.faq-item[open] summary::after{content:"–";}
.faq-item p{
  padding:0 22px 20px;
  font-size:14.5px;
  color:var(--muted);
  line-height:1.7;
}

/* CTA band */
.cta-band{
  position:relative;
  padding:0 28px 100px;
  overflow:hidden;
}
.cta-shell{
  position:relative;
  max-width:var(--container);
  margin:0 auto;
  border-radius:32px;
  padding:72px 40px;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 80% 80% at 20% 20%, rgba(255,255,255,0.25), transparent 50%),
    radial-gradient(ellipse 70% 70% at 90% 80%, rgba(245,230,220,0.35), transparent 45%),
    linear-gradient(135deg, #4B4FE8 0%, #7A6CFF 42%, #B8A8FF 78%, #F0D9CB 100%);
  box-shadow:var(--shadow-lg);
  transition:box-shadow .45s var(--ease);
}
.cta-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.35) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.28) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,0.22) 0 1px, transparent 2px);
  background-size:180px 180px, 220px 220px, 160px 160px;
  opacity:0.7;
  pointer-events:none;
}
.cta-band-inner{position:relative;z-index:1;max-width:620px;margin:0 auto;}
.cta-band h2{
  font-size:clamp(30px,4vw,46px);
  color:#fff;
  margin-bottom:14px;
  line-height:1.12;
}
.cta-band p{
  color:rgba(255,255,255,0.88);
  font-size:16.5px;
  margin-bottom:28px;
  line-height:1.65;
}
.cta-band .btn-primary{
  background:#fff;
  color:var(--accent-deep);
  box-shadow:0 12px 30px rgba(18,19,26,0.18);
}
.cta-band .btn-primary:hover{
  background:#F7F6FC;
  transform:translateY(-2px);
}
.cta-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.cta-band .btn-ghost{
  background:rgba(255,255,255,0.14);
  border-color:rgba(255,255,255,0.35);
  color:#fff;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background:transparent;
  color:var(--muted);
  padding:40px 0 40px;
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  gap:40px 48px;
  padding-top:36px;
  border-top:1px solid var(--line);
  align-items:start;
}
.footer-brand-block{max-width:360px;}
.footer-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
}
.footer-brand img{height:22px;width:22px;object-fit:contain;border-radius:6px;}
.footer-tagline{
  margin-top:12px;
  font-size:13.5px;
  color:var(--muted);
  line-height:1.6;
}
.footer-pace{
  margin-top:4px;
  font-size:12.5px;
  color:var(--muted);
  line-height:1.5;
  opacity:0.88;
}
.footer-nav{
  display:contents;
}
.footer-col-label{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:14px;
}
.footer-col ul{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-col a{
  font-size:13.5px;
  color:var(--muted);
  transition:color .2s var(--ease);
}
.footer-col a:hover,
.footer-col a.active{color:var(--accent);}
.footer-bottom{
  margin-top:28px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:12.5px;
  color:#9AA0B0;
}
@media (max-width:700px){
  .footer-grid{grid-template-columns:1fr;gap:28px;}
  .footer-brand-block{max-width:none;}
}
@media (min-width:701px) and (max-width:1024px){
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
  .footer-brand-block{grid-column:1 / -1;max-width:420px;}
}

/* Legacy footer helpers (if any residual markup) */
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.footer-links{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
}
.footer-links a{
  font-size:13.5px;
  color:var(--muted);
  transition:color .2s var(--ease);
}
.footer-links a:hover{color:var(--accent);}

/* ==========================================================================
   INNER PAGES
   ========================================================================== */
.page-hero{
  position:relative;
  padding:150px 0 80px;
  overflow:hidden;
  text-align:center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(91,95,255,0.14), transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 80%, rgba(245,230,220,0.4), transparent 55%),
    var(--bg);
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(91,95,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,95,255,0.03) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(#000, transparent 85%);
  pointer-events:none;
}
.page-hero-inner{
  position:relative;
  max-width:780px;
  margin:0 auto;
  text-align:center;
}
.page-hero .eyebrow{
  justify-content:center;
}
.page-hero h1{
  font-size:clamp(36px,4.8vw,56px);
  line-height:1.08;
  margin-left:auto;
  margin-right:auto;
  max-width:720px;
}
.page-hero h1 em{
  font-style:italic;
  color:var(--accent);
}
.page-hero p{
  margin-top:18px;
  margin-left:auto;
  margin-right:auto;
  font-size:17.5px;
  color:var(--ink-soft);
  max-width:560px;
  line-height:1.7;
}
.page-hero-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.segment-note{
  max-width:640px;
  margin:40px auto 0;
  text-align:center;
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
}
.card .check-list{
  margin-top:16px;
}

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:24px;
  align-items:start;
}
.contact-main{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:28px;
  padding:36px 32px;
  box-shadow:var(--shadow-sm);
  transition:
    transform .4s var(--ease),
    box-shadow .4s var(--ease),
    border-color .4s var(--ease);
}
.contact-main:hover{
  transform:translateY(-4px);
  border-color:rgba(91,95,255,0.25);
  box-shadow:
    0 4px 10px rgba(18,19,26,0.04),
    0 20px 40px rgba(91,95,255,0.12);
}
.contact-main .btn-primary{margin-bottom:12px;}
.contact-side{
  background:
    linear-gradient(160deg, rgba(91,95,255,0.1), rgba(245,230,220,0.28)),
    var(--surface);
  border:1px solid var(--line);
  border-radius:28px;
  padding:32px 28px;
  box-shadow:var(--shadow-sm);
  transition:
    transform .4s var(--ease),
    box-shadow .4s var(--ease),
    border-color .4s var(--ease);
}
.contact-side:hover{
  transform:translateY(-4px);
  border-color:rgba(91,95,255,0.25);
  box-shadow:
    0 4px 10px rgba(18,19,26,0.04),
    0 20px 40px rgba(91,95,255,0.12);
}
.contact-side h3{
  font-family:var(--font-body);
  font-size:18px;
  font-weight:700;
  margin-bottom:12px;
}
.contact-side p{
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.7;
  margin-bottom:8px;
}
.contact-side .contact-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
  border-top:1px solid rgba(18,19,26,0.06);
  font-size:14px;
}
.contact-side .contact-line:last-of-type{border-bottom:1px solid rgba(18,19,26,0.06);}
.contact-side .contact-line span:first-child{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.contact-side .contact-line span:last-child{color:var(--ink);font-weight:500;text-align:right;}
.contact-side .btn-primary{width:100%;margin-top:22px;}

/* Legal */
.legal-content{max-width:760px;margin:0 auto;}
.legal-section{
  padding:36px 0;
  border-bottom:1px solid var(--line);
}
.legal-section h2{
  font-size:clamp(22px,2.6vw,30px);
  margin-bottom:14px;
}
.legal-section p{
  font-size:15.5px;
  color:var(--ink-soft);
  line-height:1.8;
  margin-bottom:12px;
}
.legal-section p:last-child{margin-bottom:0;}

/* About story block */
.about-story{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:28px;
  padding:48px 44px;
  box-shadow:var(--shadow-sm);
}
.about-story .eyebrow{
  justify-content:center;
}
.about-story h2{
  font-size:clamp(28px,3.2vw,40px);
  line-height:1.15;
  font-family:var(--font-display);
  margin:0 auto 22px;
  max-width:20ch;
}
.about-story-copy{
  max-width:560px;
  margin:0 auto;
  text-align:center;
}
.about-story-copy p{
  font-size:16.5px;
  color:var(--ink-soft);
  line-height:1.8;
  margin-bottom:12px;
}
.about-story-copy p:last-child{margin-bottom:0;}

/* legacy class keeps mobile stack safe if any residual markup */
.about-lead{
  display:block;
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.about-lead p{
  font-size:16.5px;
  color:var(--ink-soft);
  line-height:1.8;
  margin-bottom:12px;
}
.values-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:12px;
}
.values-grid .value-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px 16px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  transition:
    transform .4s var(--ease),
    box-shadow .4s var(--ease),
    border-color .4s var(--ease);
  will-change:transform;
}
.values-grid .value-item:hover{
  transform:translateY(-3px);
  border-color:rgba(91,95,255,0.28);
  box-shadow:
    0 2px 4px rgba(18,19,26,0.04),
    0 14px 28px rgba(91,95,255,0.1);
}
.values-grid .value-item span{
  font-family:var(--font-display);
  font-size:20px;
  color:var(--ink);
}

/* Legacy ledger (kept harmless if present) */
.ledger-rule{display:none;}
.ledger-card{display:none;}

/* Reveal — opacity only so hover transforms on cards/boxes are not overridden */
.reveal{
  opacity:0;
  transition:opacity .7s var(--ease);
}
.reveal.is-visible{opacity:1;}
/* transition is not additive across rules — combine each hover-lift component's own
   transition with the reveal fade so hover on a revealed card animates instead of snapping */
.card.reveal,
.pain-card.reveal,
.process-step.reveal,
.who-item.reveal,
.contact-main.reveal,
.contact-side.reveal,
.compare-table-wrap.reveal,
.proof-card.reveal{
  transition:
    transform .4s var(--ease),
    box-shadow .4s var(--ease),
    border-color .4s var(--ease),
    opacity .7s var(--ease);
}
.feature-card.reveal,
.founder-card.reveal,
.pilot-card.reveal{
  transition:
    transform .45s var(--ease),
    box-shadow .45s var(--ease),
    border-color .45s var(--ease),
    opacity .7s var(--ease);
}
.cta-shell.reveal{
  transition:box-shadow .45s var(--ease), opacity .7s var(--ease);
}
.card-grid .reveal:nth-child(1){transition-delay:0s;}
.card-grid .reveal:nth-child(2){transition-delay:.08s;}
.card-grid .reveal:nth-child(3){transition-delay:.16s;}
.card-grid .reveal:nth-child(4){transition-delay:.22s;}
.services-grid .reveal:nth-child(1){transition-delay:0s;}
.services-grid .reveal:nth-child(2){transition-delay:.07s;}
.services-grid .reveal:nth-child(3){transition-delay:.14s;}
.services-grid .reveal:nth-child(4){transition-delay:.2s;}
.who-grid .reveal:nth-child(1){transition-delay:0s;}
.who-grid .reveal:nth-child(2){transition-delay:.08s;}
.who-grid .reveal:nth-child(3){transition-delay:.16s;}
.process-list .reveal:nth-child(1){transition-delay:0s;}
.process-list .reveal:nth-child(2){transition-delay:.06s;}
.process-list .reveal:nth-child(3){transition-delay:.12s;}
.process-list .reveal:nth-child(4){transition-delay:.18s;}

/* Hover lifts — beat any leftover specificity fights */
.card:hover,
.pain-card:hover,
.component-tile:hover,
.feature-card:hover,
.process-step:hover,
.who-item:hover,
.founder-card:hover,
.pilot-card:hover,
.proof-card:hover,
.values-grid .value-item:hover,
.contact-main:hover,
.contact-side:hover{
  transform:translateY(-4px);
}
.compare-table-wrap:hover{
  transform:translateY(-3px);
}
.sample-strip:hover{
  transform:translateY(-2px);
}
.flow-step:hover{
  transform:translateY(-2px);
}
.flow-step.is-active:hover{
  transform:translateY(-3px);
}
.mini-stat:hover{
  transform:translateY(-2px);
}
.btn-primary:hover,
.btn-ghost:hover{
  transform:translateY(-2px);
}
.cta-band .btn-primary:hover{
  transform:translateY(-2px);
  background:#F7F6FC;
}
.cta-band .btn-ghost:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,0.22);
  border-color:rgba(255,255,255,0.55);
  box-shadow:0 12px 28px rgba(18,19,26,0.2);
}
.brand:hover{
  opacity:0.85;
}
.cta-shell:hover{
  box-shadow:
    0 24px 64px rgba(18,19,26,0.12),
    0 8px 24px rgba(91,95,255,0.2);
}

/* Responsive — unified layout + nav at 1024 */
@media (max-width:1024px){
  .hero-inner,
  .problem-grid,
  .feature-card.wide,
  .founder-grid,
  .faq-grid,
  .contact-grid,
  .feature-band{
    grid-template-columns:1fr;
  }
  .about-story{padding:36px 24px;}
  .hero{padding:128px 0 64px;}
  .hero h1{max-width:none;}
  .hero-stage{padding:12px 0 0;}
  .float-chip{display:none;}
  .product-cinema{min-height:0;padding:14px;}
  .cinema-stage{min-height:280px;}
  .card-grid.is-pair{
    max-width:none;
  }
  .cinema-step{padding:10px 2px 8px;min-height:44px;}
  .cinema-step span{font-size:10px;}
  .cinema-step-icon{width:28px;height:28px;border-radius:8px;}
  .cinema-rail-line{width:10px;}
  .intake-stage,
  .process-stage,
  .review-stage,
  .deliver-stage{
    grid-template-columns:1fr;
    min-height:0;
  }
  .intake-hub{padding-top:8px;}
  .hub-label{max-width:none;}
  .review-side{flex-direction:row;}
  .side-pulse{min-height:72px;}
  .orb{opacity:0.35;}
  .card-grid,
  .services-grid,
  .pain-grid,
  .component-grid,
  .process-list,
  .who-grid,
  .fit-stack,
  .trust-list,
  .values-grid{
    grid-template-columns:1fr;
  }
  .fit-stack{
    gap:40px;
  }
  .feature-row,
  .feature-row.is-reverse{
    grid-template-columns:1fr;
    gap:28px;
  }
  .feature-row.is-reverse .feature-copy,
  .feature-row.is-reverse .feature-visual-wrap{
    order:unset;
  }
  .feature-showcase{gap:56px;}
  .feature-copy h3{max-width:none;}
  .dash-metric-row,
  .dash-kpi-trio{grid-template-columns:1fr 1fr 1fr;}
  .dash-kpi-card strong{font-size:18px;}
  .sample-strip{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  .sample-strip-metrics{
    width:100%;
    gap:16px;
  }
  .compare-table th,
  .compare-table td{padding:14px 14px;font-size:13.5px;}
  .proof-card{padding:36px 24px;}
  .panel-foot{grid-template-columns:1fr 1fr;}
  .cta-shell{padding:56px 24px;}
  section{padding:72px 0;}
  .page-hero{padding:128px 0 64px;}
  .nav-links{gap:16px;}
}

/* Tablet: keep useful multi-col cards while main layout is stacked */
@media (min-width:641px) and (max-width:1024px){
  .card-grid.is-pair,
  .services-grid,
  .fit-stack{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .fit-stack{
    gap:32px 40px;
  }
}
@media (min-width:768px) and (max-width:1024px){
  .pain-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (min-width:1025px) and (max-width:1100px){
  .component-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* Compact phones */
@media (max-width:480px){
  .container{
    padding-left:max(16px, env(safe-area-inset-left, 0px));
    padding-right:max(16px, env(safe-area-inset-right, 0px));
  }
  .hero{padding:112px 0 48px;}
  .hero h1{font-size:clamp(34px,9vw,42px);}
  .hero .lede{font-size:16px;margin-top:18px;}
  .hero-ctas,
  .page-hero-actions,
  .proof-actions,
  .cta-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .hero-ctas .btn,
  .page-hero-actions .btn,
  .proof-actions .btn,
  .cta-actions .btn{
    width:100%;
    min-height:48px;
  }
  .trust-strip{
    max-width:none;
    gap:6px;
  }
  .trust-strip span{
    font-size:11.5px;
    padding:8px 10px;
  }
  .product-cinema{padding:12px;}
  .cinema-stage{min-height:240px;}
  .cinema-step > span:not(.cinema-step-icon){
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .cinema-step{position:relative;}
  .cinema-rail-line{width:6px;}
  .ledger-row{
    grid-template-columns:10px minmax(0,1fr) auto;
  }
  .ledger-cat{display:none;}
  .dash-metric-row,
  .dash-kpi-trio{
    grid-template-columns:1fr;
    gap:8px;
  }
  .page-hero{padding:112px 0 48px;}
  .page-hero h1{font-size:clamp(30px,8.5vw,40px);}
  .page-hero p{font-size:16px;}
  .contact-main,
  .contact-side{padding:28px 20px;}
  .proof-card{padding:28px 20px;}
  .cta-shell{padding:48px 20px;}
  section{padding:56px 0;}
  .about-story{padding:28px 20px;}
  .card,
  .services-grid .card,
  .card-grid.is-pair .card{padding:24px 20px;}
}

/* Short landscape phones: keep CTA first, shrink demo */
@media (max-height:500px) and (orientation:landscape){
  .hero{padding:88px 0 32px;}
  .hero-stage{display:none;}
  .page-hero{padding:88px 0 32px;}
  section{padding:40px 0;}
}

/* Touch: no sticky hover lifts */
@media (hover:none){
  .card:hover,
  .pain-card:hover,
  .component-tile:hover,
  .feature-card:hover,
  .process-step:hover,
  .who-item:hover,
  .founder-card:hover,
  .pilot-card:hover,
  .proof-card:hover,
  .values-grid .value-item:hover,
  .contact-main:hover,
  .contact-side:hover,
  .compare-table-wrap:hover,
  .sample-strip:hover,
  .feature-row:hover .dash-panel,
  .product-cinema:hover,
  .flow-step:hover,
  .flow-step.is-active:hover,
  .mini-stat:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .trust-strip span:hover,
  .chip:hover,
  .dash-checklist li:hover,
  .dash-metric:hover,
  .dash-kpi-card:hover,
  .dash-pack-item:hover,
  .dash-vbars > span:hover,
  .sample-metric:hover,
  .cta-shell:hover,
  .nav-cta:hover{
    transform:none !important;
  }
}

.pain-grid .reveal:nth-child(1),
.component-grid .reveal:nth-child(1){transition-delay:0s;}
.pain-grid .reveal:nth-child(2),
.component-grid .reveal:nth-child(2){transition-delay:.07s;}
.pain-grid .reveal:nth-child(3),
.component-grid .reveal:nth-child(3){transition-delay:.14s;}
.component-grid .reveal:nth-child(4){transition-delay:.18s;}
.component-grid .reveal:nth-child(5){transition-delay:.22s;}
.component-grid .reveal:nth-child(6){transition-delay:.26s;}