/* ================================================================
   INGESTICS — Cinematic Scroll Styles
   ================================================================ */
:root {
    --brand: #3A9D8C; --brand-light: #5BBFAD; --brand-dark: #2A7D6C;
    --brand-glow: rgba(58,157,140,0.35);
    --surface: #050505; --surface-2: #08080F; --surface-card: #0E0E18;
    --border: rgba(255,255,255,0.07);
    --text-1: #F1F5F9; --text-2: #94A3B8; --text-3: #64748B;
    --ease-expo: cubic-bezier(0.16,1,0.3,1);
}

/* ── LIGHT THEME (Inspired by Ingestics Company Logo: Glass + White + Teal #10A595) ── */
[data-theme="light"] {
    --brand: #10A595;
    --brand-light: #20C7B5;
    --brand-dark: #0D8275;
    --brand-glow: rgba(16, 165, 149, 0.25);
    --surface: #F0F6FD;
    --surface-2: #E6F0FA;
    --surface-card: rgba(255, 255, 255, 0.85);
    --border: rgba(16, 165, 149, 0.22);
    --text-1: #0F172A;
    --text-2: #475569;
    --text-3: #64748B;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--surface);color:var(--text-1);font-family:'Inter',system-ui,sans-serif;overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--brand);color:#fff}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--brand);border-radius:10px}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* ── Noise ── */
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");pointer-events:none;z-index:10000;opacity:0.35}

/* ── Canvas ── */
#particle-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:1}

/* Logo styling (shared by footer/logo branding) */
.nav-logo{font-family:'Playfair Display',serif;font-weight:700;font-size:20px;display:flex;align-items:center;gap:8px;color:var(--text-1)}
.nav-logo svg{width:26px;height:26px}

/* ── Acts ── */
.act{width:100%;position:relative;background:var(--surface);z-index:2}
.act-inner{height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:0 24px}
.act-alt{background:var(--surface-2)}

/* ── ACT 1: Hero ── */
.hero-flower{position:relative;width:140px;height:140px;margin-bottom:24px;z-index:5}
@media(min-width:768px){.hero-flower{width:180px;height:180px;margin-bottom:28px}}
.hero-flower svg{width:100%;height:100%;filter:drop-shadow(0 0 30px rgba(58,157,140,0.25))}
.flower-glow-bg{position:absolute;inset:-40%;background:radial-gradient(circle,var(--brand-glow) 0%,transparent 70%);border-radius:50%;opacity:0.4;z-index:-1}
.flower-ring{animation:ring-spin 90s linear infinite;transform-origin:center}
@keyframes ring-spin{to{transform:rotate(360deg)}}
.hero-headline{font-family:'Playfair Display',serif;font-size:clamp(30px,5vw,56px);line-height:1.1;letter-spacing:-0.03em;text-align:center;margin-bottom:16px;position:relative;z-index:5}
.hw{display:inline-block;opacity:0;transform:translateY(40px);will-change:transform,opacity}
.tg{background:linear-gradient(135deg,var(--brand),var(--brand-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{color:var(--text-2);font-size:clamp(14px,1.8vw,17px);max-width:540px;text-align:center;line-height:1.65;opacity:0;transform:translateY(30px);position:relative;z-index:5}
.hero-badge{opacity:0;transform:translateY(20px);margin-bottom:20px;z-index:5}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(58,157,140,0.1);border:1px solid rgba(58,157,140,0.15);border-radius:999px;font-size:12px;font-weight:600;color:var(--brand);letter-spacing:0.04em}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}

/* ── ACT 2: Problem ── */
.problem-line{font-family:'Playfair Display',serif;font-size:clamp(26px,4.5vw,48px);color:var(--text-1);text-align:center;position:absolute;top:6%;left:0;width:100%;white-space:nowrap;z-index:30;pointer-events:none;text-shadow:0 4px 20px rgba(0,0,0,0.8)}
.problem-question{font-family:'Playfair Display',serif;font-size:clamp(28px,5vw,56px);color:var(--text-1);text-align:center;position:absolute;line-height:1.15;z-index:30;pointer-events:none;text-shadow:0 4px 20px rgba(0,0,0,0.8)}
.problem-reveal{font-family:'Playfair Display',serif;font-size:clamp(22px,3.5vw,36px);color:var(--brand);text-align:center;position:absolute;opacity:0;text-shadow:0 0 40px var(--brand-glow);z-index:30;pointer-events:none}
.char-anim{display:inline-block;opacity:0}
.word-anim{display:inline-block;opacity:0;transform:translateY(25px)}

/* ── Three.js WebGL Container & Scene ── */
.lays-3d-scene{width:100%;height:100%;max-width:1000px;max-height:800px;position:absolute;display:flex;justify-content:center;align-items:center;z-index:5;opacity:0;transform:translateY(60px) scale(0.9);will-change:transform,opacity}
.lays-webgl-container{width:100%;height:100%;position:absolute;inset:0;display:flex;justify-content:center;align-items:center;z-index:10}
.lays-webgl-container canvas{outline:none;pointer-events:auto;cursor:grab}
.lays-webgl-container canvas:active{cursor:grabbing}

/* ── Clinical Diagnostic HUD Overlays ── */
.hud-overlays{position:absolute;inset:0;pointer-events:none;z-index:20;display:flex;flex-direction:column;justify-content:center;align-items:center}

/* Tooltip on Calories Zoom (Beat 3) */
.cal-tooltip{position:absolute;top:25%;right:6%;background:rgba(16,185,129,0.95);color:#FFFFFF;padding:12px 18px;border-radius:12px;font-family:'Playfair Display',serif;font-size:15px;font-weight:700;letter-spacing:0.02em;box-shadow:0 15px 35px rgba(16,185,129,0.4), 0 0 0 1px rgba(255,255,255,0.4);max-width:270px;line-height:1.35;opacity:0;transform:scale(0.8) translateY(15px);pointer-events:none;backdrop-filter:blur(12px);text-align:center;will-change:transform,opacity}
@media(min-width:768px){.cal-tooltip{right:10%;font-size:16px;max-width:300px}}
.tt-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:6px;animation:blink 1.5s infinite;box-shadow:0 0 8px #FFF}

/* 3D Holographic Diagnostic HUD Cards (Beat 6) */
.warning-cards-container{position:absolute;bottom:10%;right:4%;left:auto;display:flex;flex-direction:column;gap:10px;z-index:25;perspective:1000px;width:90%;max-width:340px}
@media(min-width:768px){.warning-cards-container{right:8%;left:auto;max-width:380px}}
.warn-card{background:rgba(8, 14, 26, 0.88);color:#F8FAFC;border-radius:12px;padding:12px 16px;display:flex;align-items:flex-start;gap:12px;box-shadow:0 20px 40px rgba(0,0,0,0.6), 0 0 30px rgba(58,157,140,0.12);border:1px solid rgba(255,255,255,0.12);border-left:4px solid #EF4444;opacity:0;transform:translateX(40px) scale(0.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);will-change:transform,opacity}
.warn-salt{border-left-color:#F59E0B}
.warn-score{border-left-color:#3A9D8C;background:rgba(15, 23, 42, 0.92);border-right:1px solid rgba(58,157,140,0.3)}
.warn-icon{font-size:20px;flex-shrink:0;margin-top:2px;filter:drop-shadow(0 0 8px rgba(255,255,255,0.3))}
.warn-details strong{display:block;font-size:13px;font-weight:700;color:#FFFFFF;margin-bottom:3px;letter-spacing:0.03em;font-family:system-ui,-apple-system,sans-serif}
.warn-details span{font-size:11.5px;color:#94A3B8;line-height:1.4;display:block;font-family:system-ui,-apple-system,sans-serif}

/* ── ACT 3: Chat Demo ── */
.chat-window{background:var(--surface-2);border:1px solid var(--border);border-radius:24px;overflow:hidden;width:100%;max-width:600px;box-shadow:0 40px 100px rgba(0,0,0,0.5),0 0 80px rgba(58,157,140,0.05);opacity:0;transform:scale(0.88)}
.chat-chrome{background:rgba(255,255,255,0.03);border-bottom:1px solid var(--border);padding:14px 20px;display:flex;align-items:center;gap:12px}
.chat-dots{display:flex;gap:6px}
.chat-dot{width:10px;height:10px;border-radius:50%;opacity:0;transform:scale(0)}
.dot-r{background:#FF5F57}.dot-y{background:#FEBC2E}.dot-g{background:#28C840}
.chat-url{flex:1;text-align:center;font-size:12px;color:var(--text-3);font-weight:500;opacity:0}
.chat-body{padding:24px;display:flex;flex-direction:column;gap:16px}
.bubble{padding:14px 18px;border-radius:18px;font-size:14px;line-height:1.65;opacity:0}
.bubble-user{align-self:flex-end;background:rgba(58,157,140,0.12);border:1px solid rgba(58,157,140,0.2);border-bottom-right-radius:6px;color:var(--text-1);max-width:85%}
.bubble-agent{align-self:flex-start;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-bottom-left-radius:6px;color:var(--text-2);max-width:92%}
.bubble-agent strong{color:var(--text-1)}
.bubble-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--brand);margin-bottom:6px;opacity:0}
.typing-dots{display:flex;gap:4px;padding:8px 0;opacity:0}
.typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--text-3)}
.typing-dots.playing span{animation:typing-bounce 1.2s ease-in-out infinite}
.typing-dots.playing span:nth-child(2){animation-delay:0.15s}
.typing-dots.playing span:nth-child(3){animation-delay:0.3s}
@keyframes typing-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
.demo-agent-text{opacity:0}
.rating-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:700;color:var(--brand);background:rgba(58,157,140,0.12);opacity:0;transform:scale(0.5)}
.health-grid{display:grid;gap:10px;margin-top:14px}
.health-row{display:flex;align-items:center;gap:10px}
.health-label{width:85px;font-size:11px;color:var(--text-3);flex-shrink:0;font-weight:500}
.health-track{flex:1;height:5px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden}
.health-fill{height:100%;border-radius:3px;width:0%}
.hf-good{background:linear-gradient(90deg,var(--brand),var(--brand-light))}
.hf-mid{background:linear-gradient(90deg,#F59E0B,#FBBF24)}
.hf-bad{background:linear-gradient(90deg,#EF4444,#F87171)}
.health-val{width:32px;font-size:11px;color:var(--text-3);text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

/* ── ACT 4: Stats ── */
.stat-hero{position:absolute;font-family:'Playfair Display',serif;font-size:clamp(48px,12vw,120px);font-weight:700;color:var(--text-1);opacity:0;transform:scale(2.5);font-variant-numeric:tabular-nums;text-align:center}
.stat-hero .stat-sub{font-family:'Inter',sans-serif;font-size:clamp(12px,1.5vw,15px);font-weight:500;color:var(--text-3);letter-spacing:0.04em;display:block;margin-top:8px}

/* ── ACT 5: Capabilities ── */
.cap-grid{display:flex;gap:20px;max-width:1000px;width:100%;flex-wrap:wrap;justify-content:center}
@media(max-width:767px){.cap-grid{flex-direction:column;align-items:center}}
.cap-card{flex:1;min-width:260px;max-width:320px;padding:32px 24px;background:rgba(255,255,255,0.025);border:1px solid var(--border);border-radius:20px;opacity:0;backdrop-filter:blur(8px)}
.cap-icon{width:44px;height:44px;border-radius:12px;background:rgba(58,157,140,0.1);border:1px solid rgba(58,157,140,0.15);display:flex;align-items:center;justify-content:center;color:var(--brand);margin-bottom:16px}
.cap-title{font-family:'Playfair Display',serif;font-size:19px;font-weight:600;color:var(--text-1);margin-bottom:8px}
.cap-desc{font-size:14px;color:var(--text-2);line-height:1.65}

/* ── ACT 6: Horizontal Steps ── */
.steps-header{text-align:center;padding-top:10vh;width:100%;position:relative;z-index:5}
.steps-progress{display:flex;align-items:center;gap:0;max-width:400px;margin:32px auto 0;position:relative}
.step-dot{width:36px;height:36px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text-3);transition:border-color 0.4s,color 0.4s,background 0.4s;position:relative;z-index:2;background:var(--surface)}
.step-dot.active{border-color:var(--brand);color:var(--brand);background:rgba(58,157,140,0.1)}
.step-line-track{flex:1;height:2px;background:var(--border);position:relative;overflow:hidden}
.step-line-fill{position:absolute;inset:0;background:var(--brand);transform:scaleX(0);transform-origin:left}
.steps-viewport{width:100%;overflow:hidden;flex:1;display:flex;align-items:center}
.steps-track{display:flex;width:400%}
.step-panel{width:100vw;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0 10vw}
.step-content{max-width:500px}
.step-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.15em;color:var(--brand);margin-bottom:8px}
.step-title{font-family:'Playfair Display',serif;font-size:clamp(24px,3.5vw,32px);font-weight:600;color:var(--text-1);margin-bottom:12px}
.step-desc{font-size:15px;color:var(--text-2);line-height:1.7}

/* ── ACT 7: Features ── */
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;max-width:1000px;width:100%}
.f-card{padding:28px 22px;background:rgba(255,255,255,0.025);border:1px solid var(--border);border-radius:16px;opacity:0;transform:translateY(30px)}
.f-icon{width:38px;height:38px;border-radius:10px;background:rgba(58,157,140,0.08);display:flex;align-items:center;justify-content:center;color:var(--brand);margin-bottom:14px}
.f-title{font-weight:600;font-size:15px;color:var(--text-1);margin-bottom:6px}
.f-desc{font-size:13px;color:var(--text-2);line-height:1.6}
.section-label{color:var(--brand);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:12px}
.section-title{font-family:'Playfair Display',serif;font-size:clamp(26px,4.5vw,44px);font-weight:600;line-height:1.15;letter-spacing:-0.02em;margin-bottom:14px;color:var(--text-1)}
.section-sub{color:var(--text-2);font-size:clamp(15px,2vw,17px);max-width:540px;line-height:1.7;margin-bottom:40px}
.tg-text{background:linear-gradient(135deg,var(--brand),var(--brand-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── ACT 8: Founders Fly-Through ── */
.founders-intro {
    position: absolute;
    text-align: center;
    opacity: 0;
}
.founder-slide {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    text-align: center;
    pointer-events: none;
}
.founder-photo-wrap {
    width: clamp(150px, 20vw, 220px);
    height: clamp(150px, 20vw, 220px);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(58, 157, 140, 0.45);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 40px rgba(58, 157, 140, 0.2);
    background: var(--surface-2);
    margin-bottom: 8px;
    flex-shrink: 0;
}
.founder-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    image-rendering: -webkit-optimize-contrast;
    display: block;
}
.photo-pratyush {
    object-position: center 20%;
}
.photo-vedant {
    object-position: center 25%;
}
.photo-siyona {
    object-position: center 34%;
}
.founder-name {
    font-family: 'Playfair Display', serif;
    font-size: clamp(34px, 6vw, 68px);
    font-weight: 600;
    color: var(--text-1);
    white-space: nowrap;
    line-height: 1.1;
}
.founder-role {
    font-size: clamp(12px, 1.5vw, 16px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--brand);
    white-space: nowrap;
}

/* ── ACT 9: CTA ── */
.cta-glow{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(58,157,140,0.12) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.cta-form{display:flex;max-width:460px;width:100%;margin:0 auto;border-radius:999px;overflow:hidden;border:1px solid var(--border);background:var(--surface-2);transition:border-color 0.3s,box-shadow 0.3s}
.cta-form:focus-within{border-color:rgba(58,157,140,0.4);box-shadow:0 0 40px rgba(58,157,140,0.1)}
.cta-input{flex:1;padding:14px 22px;background:transparent;border:none;outline:none;color:var(--text-1);font-size:14px;font-family:inherit}
.cta-input::placeholder{color:var(--text-3)}
.cta-submit{padding:14px 24px;background:var(--brand);color:#fff;border:none;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;transition:background 0.3s;font-family:inherit}
.cta-submit:hover{background:var(--brand-dark)}

/* ── FAQ ── */
.faq-section{background:var(--surface-2);padding:100px 24px;position:relative;z-index:2}
.faq-list{max-width:680px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;cursor:pointer;font-size:15px;font-weight:500;color:var(--text-1);transition:color 0.3s;user-select:none}
.faq-q:hover{color:var(--brand)}
.faq-icon{width:22px;height:22px;flex-shrink:0;color:var(--text-3);transition:transform 0.4s var(--ease-expo),color 0.3s}
.faq-item.active .faq-icon{transform:rotate(45deg);color:var(--brand)}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.5s var(--ease-expo)}
.faq-a-inner{padding-bottom:22px;font-size:14px;color:var(--text-2);line-height:1.75}

/* ── Footer ── */
.footer {
    border-top: 1px solid var(--border);
    padding: 80px 24px 60px;
    position: relative;
    z-index: 2;
    background: var(--surface);
}
.footer-inner {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}
.footer-flower {
    width: 60px;
    height: 60px;
    opacity: 0.8;
}
.footer-links {
    display: flex;
    gap: 32px;
    margin-top: 8px;
}
.footer-links a {
    font-size: 14px;
    color: var(--text-2);
    transition: color 0.3s;
}
.footer-links a:hover {
    color: var(--brand);
}
.footer-copy {
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.6;
    margin-top: 4px;
}

/* ── LIGHT THEME COMPONENT OVERRIDES ── */
[data-theme="light"] body::after {
    opacity: 0.15;
}
[data-theme="light"] .f-card,
[data-theme="light"] .cap-card,
[data-theme="light"] .founder-photo-wrap,
[data-theme="light"] .cta-form,
[data-theme="light"] .chat-window {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-color: rgba(16, 165, 149, 0.28);
    box-shadow: 0 12px 36px rgba(16, 165, 149, 0.08);
}
[data-theme="light"] .faq-item {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(16, 165, 149, 0.22);
    border-radius: 16px;
    margin-bottom: 14px;
    padding: 0 24px;
    box-shadow: 0 4px 18px rgba(16, 165, 149, 0.06);
    transition: all 0.3s var(--ease-expo);
}
[data-theme="light"] .faq-item:hover {
    border-color: rgba(16, 165, 149, 0.45);
    box-shadow: 0 8px 25px rgba(16, 165, 149, 0.12);
    transform: translateY(-2px);
}
[data-theme="light"] .chat-chrome {
    background: rgba(240, 246, 253, 0.9);
}
[data-theme="light"] .bubble-agent {
    background: #FFFFFF;
    border-color: rgba(16, 165, 149, 0.25);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .bubble-user {
    background: rgba(16, 165, 149, 0.14);
    border-color: rgba(16, 165, 149, 0.35);
}
[data-theme="light"] .warn-card {
    background: rgba(255, 255, 255, 0.94);
    color: #0F172A;
    border: 1px solid rgba(16, 165, 149, 0.3);
    box-shadow: 0 10px 30px rgba(16, 165, 149, 0.12);
}
[data-theme="light"] .warn-details strong {
    color: #0F172A;
}
[data-theme="light"] .warn-details span {
    color: #475569;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SKY THEME + SECTION RAIL
   ---------------------------------------------------------------------------
   The marketing page now shares the product's background: the same time-of-day
   cloud sky rendered by /static/sky.js. It is scoped to the LIGHT theme, which
   is also the default now — the dark cinematic surface is still one tap away
   and is left exactly as it was.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Daypart palette. Mirrors the keyframes in sky.js so the pre-shader paint and
   the no-WebGL fallback are the same time of day as the canvas. */
[data-theme="light"] {
  --sky-top:#a9daf2; --sky-mid:#d8eff9; --sky-hor:#fdf1de;
  --sky-cloud:#ffffff; --sky-cloud-dim:#d5e7f2;
  --sky-glow:rgba(255,241,210,.60); --sky-glow-x:76%; --sky-glow-y:20%;
}
[data-theme="light"][data-daypart="earlyMorning"]{
  --sky-top:#c2d4ef; --sky-mid:#e4e2f2; --sky-hor:#fbe2d6;
  --sky-cloud:#fff5ee; --sky-cloud-dim:#dcd5e6;
  --sky-glow:rgba(255,215,191,.70); --sky-glow-x:18%; --sky-glow-y:86%;
}
[data-theme="light"][data-daypart="afternoon"]{
  --sky-top:#8ccdf2; --sky-mid:#c4e7f8; --sky-hor:#f1fbff;
  --sky-cloud:#ffffff; --sky-cloud-dim:#cce4f0;
  --sky-glow:rgba(255,255,255,.55); --sky-glow-x:50%; --sky-glow-y:6%;
}
[data-theme="light"][data-daypart="evening"]{
  --sky-top:#b0c1e5; --sky-mid:#e9d6e2; --sky-hor:#fdd8bb;
  --sky-cloud:#fff1e6; --sky-cloud-dim:#cbbdd6;
  --sky-glow:rgba(255,197,154,.75); --sky-glow-x:22%; --sky-glow-y:84%;
}
[data-theme="light"][data-daypart="night"]{
  --sky-top:#b3bfdb; --sky-mid:#ccd6e9; --sky-hor:#e3e7f2;
  --sky-cloud:#f4f7fc; --sky-cloud-dim:#b2bcd4;
  --sky-glow:rgba(233,239,255,.70); --sky-glow-x:72%; --sky-glow-y:14%;
}

/* Fixed behind everything. Hidden outright in the dark theme so the shader
   isn't paying for pixels nobody sees. */
.sky-layer{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; display:none; }
[data-theme="light"] .sky-layer{ display:block; }
.sky-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block;
  filter:blur(.6px) saturate(1.03); transform:scale(1.03); }
.sky-layer.has-gl .sky-fallback{ display:none; }
.sky-fallback{ position:absolute; inset:0;
  background:
    radial-gradient(60% 45% at var(--sky-glow-x) var(--sky-glow-y), var(--sky-glow), transparent 70%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 54%, var(--sky-hor) 100%); }
.sky-puff{ position:absolute; border-radius:999px;
  background:linear-gradient(180deg, var(--sky-cloud) 55%, var(--sky-cloud-dim) 100%); }
.sky-puff::before,.sky-puff::after{ content:""; position:absolute; border-radius:50%; background:var(--sky-cloud); }
.sky-puff::before{ width:46%; aspect-ratio:1; left:7%;  bottom:16%; }
.sky-puff::after { width:34%; aspect-ratio:1; left:49%; bottom:28%; }
@keyframes skyDriftA{ from{transform:translate3d(-30vw,0,0)} to{transform:translate3d(130vw,0,0)} }
@keyframes skyDriftB{ from{transform:translate3d(-40vw,0,0)} to{transform:translate3d(140vw,0,0)} }
.sky-puff.pf{ animation:skyDriftB 190s linear infinite; opacity:.5 }
.sky-puff.pn{ animation:skyDriftA 120s linear infinite; opacity:.78 }
.sky-puff.s1{ width:14vw; height:6vw;   top:6%;  left:-8vw;  animation-duration:120s; animation-delay:-40s }
.sky-puff.s2{ width:10vw; height:4.5vw; top:15%; left:-26vw; animation-duration:88s;  animation-delay:-30s }
.sky-puff.s3{ width:18vw; height:7.5vw; top:23%; left:-44vw; animation-duration:160s; animation-delay:-70s }
@media (prefers-reduced-motion:reduce){ .sky-puff{ animation:none !important } }

/* Let the sky through. In the light theme the acts stop painting their own
   surface and instead sit on the sky with a soft scrim, so text stays readable
   over cloud without hiding it. `act-alt` keeps a slightly denser scrim so the
   alternating rhythm of the page survives. */
[data-theme="light"] body{ background:transparent }
[data-theme="light"] .act{ background:transparent }
[data-theme="light"] .act::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.52));
}
[data-theme="light"] .act-alt::before{
  background:linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.72));
}
/* isolation only: the panel layout below owns `position`, and giving it
   position:relative here (at higher specificity than a plain .act rule) is
   what kept every panel in normal flow instead of stacking them. */
[data-theme="light"] .act{ isolation:isolate }
/* The particle canvas reads as grit on a dark surface and as dirt on a bright
   one — and the noise overlay does the same. Both go in the light theme. */
[data-theme="light"] #particle-canvas{ opacity:.25 }
[data-theme="light"] body::after{ opacity:.12 }

/* ── Section rail ──────────────────────────────────────────────────────────
   Nine pinned acts is a long way to scroll to reach the last animation. The
   rail makes each one a single click and doubles as a progress read-out.
   Labels stay hidden until hover so it reads as a quiet marker, not a menu. */
.section-rail{
  position:fixed; right:18px; top:50%; transform:translateY(-50%);
  z-index:9998; display:flex; flex-direction:column; gap:.55rem;
  padding:.65rem .5rem; border-radius:999px;
  background:rgba(255,255,255,.10); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border);
}
[data-theme="light"] .section-rail{
  background:rgba(255,255,255,.62); border-color:rgba(16,165,149,.22);
  box-shadow:0 8px 26px -18px rgba(15,23,42,.5);
}
.section-rail a{ display:flex; align-items:center; gap:.5rem; justify-content:flex-end; }
.rail-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:var(--text-3); opacity:.5;
  transition:opacity .2s, background .2s, transform .2s;
}
.section-rail a:hover .rail-dot{ opacity:1; transform:scale(1.35) }
.section-rail a.is-active .rail-dot{ background:var(--brand); opacity:1; transform:scale(1.45) }
.rail-label{
  font-size:11px; font-weight:600; color:var(--text-2); white-space:nowrap;
  max-width:0; overflow:hidden; opacity:0;
  transition:max-width .25s var(--ease-expo), opacity .2s;
}
.section-rail:hover .rail-label{ max-width:120px; opacity:1 }
@media(max-width:820px){ .section-rail{ display:none } }

/* Keep page content above the fixed sky. NOTE: the theme toggle is deliberately
   NOT in this list — it is position:fixed, and forcing position:relative here
   dropped it back into flow and parked it at the top-left of the document. */
main{ position:relative; z-index:2 }   /* panels position themselves */

/* Last-resort reveal. Every animated element starts at opacity:0 and is faded
   in by GSAP; if the CDN fails to load, the page renders completely blank with
   no error a visitor can act on. main.js sets .anim-failed when GSAP is absent
   shortly after load, which drops the page back to plain, readable content. */
.anim-failed [style*="opacity:0"],
.anim-failed [style*="opacity: 0"],
.anim-failed .hero-badge,
.anim-failed .hw,
.anim-failed .hero-sub,
.anim-failed .chat-window,
.anim-failed .chat-dot,
.anim-failed .chat-url,
.anim-failed .cap-card,
.anim-failed .founder-slide,
.anim-failed .bubble,
.anim-failed .bubble-label,
.anim-failed .typing-dots,
.anim-failed .demo-agent-text,
.anim-failed .rating-badge,
.anim-failed .stat-hero,
.anim-failed .step-content,
.anim-failed .f-card,
.anim-failed .section-title{ opacity:1 !important; transform:none !important; filter:none !important }
/* The stats act stacks its four numbers absolutely on top of each other and
   reveals them one at a time; with no timeline running they would all pile up
   in the same spot, so lay them out instead. */
.anim-failed .stat-hero{ position:relative; display:block; margin:.4rem 0 }

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY HEADER
   ---------------------------------------------------------------------------
   Replaces the old right-hand rail. Navigation belongs where people look for
   it, and one navigation control beats two competing ones. Starts transparent
   over the hero and condenses into a glass bar once you scroll past it.
   ═══════════════════════════════════════════════════════════════════════════ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:9990;
  display:flex; align-items:center; gap:24px;
  padding:14px clamp(16px, 4vw, 40px);
  transition:background .28s var(--ease-expo), box-shadow .28s var(--ease-expo),
             backdrop-filter .28s, padding .28s var(--ease-expo);
}
.site-header.is-stuck{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 0 rgba(15,23,42,.06), 0 10px 30px -24px rgba(15,23,42,.45);
  padding-top:10px; padding-bottom:10px;
}

.sh-brand{
  display:inline-flex; align-items:center; gap:9px; flex-shrink:0;
  color:var(--brand); text-decoration:none;
}
.sh-mark{ width:26px; height:26px; }
.sh-word{
  font-family:'Playfair Display',serif; font-weight:700; font-size:19px;
  letter-spacing:-.01em; color:var(--text-1);
}

.sh-nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.sh-nav a{
  position:relative; padding:8px 13px; border-radius:9px;
  font-size:13.5px; font-weight:600; letter-spacing:-.005em;
  color:var(--text-2); text-decoration:none;
  transition:color .18s, background .18s;
}
.sh-nav a:hover{ color:var(--text-1); background:rgba(16,165,149,.08); }
.sh-nav a.is-active{ color:var(--brand); }
/* Underline grows from the centre so the active state reads as a mark on the
   word rather than a box around it. */
.sh-nav a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:4px; height:2px;
  border-radius:2px; background:var(--brand);
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform .24s var(--ease-expo);
}
.sh-nav a.is-active::after{ transform:scaleX(1); }

.sh-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.sh-cta{
  flex-shrink:0;
  display:inline-flex; align-items:center; padding:9px 18px; border-radius:999px;
  font-size:13.5px; font-weight:700; letter-spacing:-.005em;
  color:#fff; text-decoration:none;
  background:linear-gradient(135deg, var(--brand-light), var(--brand));
  box-shadow:0 6px 18px -8px rgba(16,165,149,.65);
  transition:transform .18s var(--ease-expo), box-shadow .18s;
}
.sh-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(16,165,149,.8); }
.sh-cta:active{ transform:translateY(0); }


/* Reading-progress hairline along the bottom edge of the header. */


/* Optical crispness: let the browser hint edges rather than smear them, and
   pull tracking in slightly at display sizes where the serif gets airy. */
[data-theme="light"] body{
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
[data-theme="light"] .section-title,
[data-theme="light"] .hero-headline{ letter-spacing:-.022em; }
[data-theme="light"] .hero-sub,
[data-theme="light"] .section-sub{ letter-spacing:-.006em; }

/* Surfaces: a real hairline plus a tight shadow, instead of a wide soft glow.
   A 1px edge at full opacity is what makes a card look cut rather than fogged. */
/* NOTE: no backdrop-filter here, deliberately. Blurring what is behind an
   element is re-composited every frame, and doing that for a dozen cards while
   the page scrolls is one of the most reliable ways to make scrolling stutter.
   A near-opaque fill reads sharper anyway. The header is the one exception:
   it is a single element and it sits still. */
[data-theme="light"] .cap-card,
[data-theme="light"] .f-card,
[data-theme="light"] .step-content,
[data-theme="light"] .chat-window,
[data-theme="light"] .faq-item{
  background:rgba(255,255,255,.93);
  border:1px solid rgba(15,23,42,.09);
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 28px -22px rgba(15,23,42,.45);
}
[data-theme="light"] .cap-card:hover,
[data-theme="light"] .f-card:hover{
  border-color:rgba(16,165,149,.34);
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 18px 40px -26px rgba(16,165,149,.6);
}
/* The scrim behind each act was doing the work a card border should do; pull it
   back so the sky stays legible as sky and the cards carry the contrast. */
[data-theme="light"] .act::before{
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.40));
}
[data-theme="light"] .act-alt::before{
  background:linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.62));
}
/* Grit belongs on a dark surface. On the sky it is just noise over cloud. */
[data-theme="light"] #particle-canvas{ opacity:0; }
[data-theme="light"] body::after{ opacity:0; }
/* Brand accents want more saturation against a bright field than a dark one. */
[data-theme="light"] .tg-text,
[data-theme="light"] .hw.tg{ color:var(--brand-dark); }
[data-theme="light"] .badge{
  background:rgba(255,255,255,.78); border:1px solid rgba(16,165,149,.28);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
/* Keep the fixed header clear of the first line of every pinned act. */
.act-inner{ padding-top:72px; }

/* ── Compositing cost ─────────────────────────────────────────────────────
   Only the active panel is promoted; see the panel rules below. */
.sky-layer{ contain:strict; }
/* Respect the OS setting: no smooth-scroll hijack, no cinematic reveals. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .sh-nav button::after{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANELLED LAYOUT — the page does not scroll
   ---------------------------------------------------------------------------
   Every act is a panel stacked in the same place; exactly one is visible and
   the header switches between them. This replaces nine pinned, scroll-scrubbed
   sections: there is no scroll position to smooth, no pin to thrash, and no
   distance to travel before reaching the last section.

   Panels taller than the viewport (FAQ, team) scroll INTERNALLY rather than
   moving the document, so the header never moves and the sky never shifts.
   ═══════════════════════════════════════════════════════════════════════════ */
html, body{ height:100%; overflow:hidden; overscroll-behavior:none; }

.act, .faq-section{
  position:fixed; inset:0; z-index:2;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .34s var(--ease-expo), visibility .34s;
}
.act.is-active, .faq-section.is-active{
  opacity:1; visibility:visible; pointer-events:auto;
}
/* Only the ACTIVE panel is promoted. Compositing nine full-screen layers at
   once is what the old pinned layout was quietly doing. */
.act.is-active{ will-change:opacity; }
.act:not(.is-active){ will-change:auto; }

/* One scroll container per panel. Targeting `.faq-section > *` instead made
   EVERY direct child 100% tall, which is what opened a viewport-sized gap
   between the FAQ heading and its first question. */
.act-inner{
  height:100%; max-height:100%;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.faq-section{
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-top:clamp(88px, 12vh, 124px);
}
.act-inner{
  padding-top:clamp(84px, 11vh, 116px);
  padding-bottom:clamp(28px, 6vh, 64px);
  /* `safe` is the whole point here. Plain `center` centres the content even
     when it is TALLER than the panel, which pushes the top of it off the
     screen and behind the fixed header, and no amount of scrolling brings it
     back because the overflow is above the scroll origin. That is what hid the
     Capabilities heading. `safe center` centres when there is room and falls
     back to flex-start when there is not. */
  justify-content:safe center;
}
/* Browsers without `safe` alignment: prefer clipping the BOTTOM (scrollable)
   over the top (not reachable). */
@supports not (justify-content: safe center){
  .act-inner{ justify-content:flex-start; }
}

/* Entrance: the panel body lifts in as it becomes active. Pure CSS, so it runs
   whether or not the GSAP choreography loaded. */
.act.is-active > .act-inner,
.faq-section.is-active > *{ animation:panelIn .5s var(--ease-expo) both; }
.faq-section.is-active > *:nth-child(2){ animation-delay:.05s; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .act, .faq-section{ transition:none; }
  .act.is-active > .act-inner, .faq-section.is-active > *{ animation:none; }
}

/* ── Header: all nine sections, always visible ── */
.site-header{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 0 rgba(15,23,42,.06), 0 10px 30px -24px rgba(15,23,42,.45);
  gap:14px;
}
.sh-brand{
  background:none; border:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px; flex-shrink:0; color:var(--brand);
}
.sh-nav{
  display:flex; align-items:center; gap:2px; margin-left:auto;
  min-width:0; overflow-x:auto; scrollbar-width:none;
}
.sh-nav::-webkit-scrollbar{ display:none; }
.sh-nav button{
  position:relative; flex-shrink:0;
  padding:8px 11px; border:0; border-radius:9px; background:none; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600; letter-spacing:-.005em;
  color:var(--text-2); white-space:nowrap;
  transition:color .18s, background .18s;
}
.sh-nav button:hover{ color:var(--text-1); background:rgba(16,165,149,.08); }
.sh-nav button.is-active{ color:var(--brand); }
.sh-nav button::after{
  content:""; position:absolute; left:11px; right:11px; bottom:3px; height:2px;
  border-radius:2px; background:var(--brand);
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform .24s var(--ease-expo);
}
.sh-nav button.is-active::after{ transform:scaleX(1); }

@media(max-width:1120px){
  .sh-word{ display:none; }
  .sh-nav button{ padding:8px 9px; font-size:12.5px; }
}
@media(max-width:720px){
  .site-header{ padding-left:12px; padding-right:12px; gap:8px; }
  .sh-cta{ padding:8px 13px; font-size:12.5px; }
  /* The rail scrolls sideways rather than collapsing into a menu: every
     section stays one tap away, which is the whole point of removing the
     hamburger. A soft mask hints there is more to the right. */
  .sh-nav{
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
}

/* The footer now lives at the end of the FAQ panel rather than in document
   flow: in a panelled layout anything left in flow paints over every fixed
   panel, which is what put the footer across the middle of the page. */
.faq-section .footer{ margin-top:48px; background:transparent; }
.faq-section{ padding-bottom:32px; }
/* Any element that is neither a panel nor chrome must not sit in flow. */
body > footer, main > footer{ display:none; }

/* ── How it works: the four-step track ───────────────────────────────────────
   The track is 400% wide and slid horizontally by the timeline, so each step
   must be exactly one viewport wide or the panes drift out of register and the
   cards look sliced down the middle. The viewport also needs its own height,
   otherwise the flex parent collapses it and the card is cropped top and
   bottom. */
.steps-viewport{ min-height:min(52vh, 420px); }
/* The track is slid horizontally by one viewport per step, so each panel has
   to be exactly one viewport wide. Sizing the panels off the 400% track (25%)
   looked right but resolved against the wrong basis once flex got involved,
   which is why the cards came out a third of their intended width and read as
   sliced. `100%` of the VIEWPORT, with flex-basis pinned and shrink disabled,
   is unambiguous. */
/* The track is a flex ITEM inside .steps-viewport, so `width:400%` was being
   shrunk straight back down to the viewport width (flex-shrink defaults to 1),
   which is why each panel resolved to a fraction of its intended size and the
   cards looked sliced. Pinning the basis and disabling shrink is what actually
   makes the track four viewports wide. */
.steps-track{ flex:0 0 400%; width:400%; display:flex; }
/* One panel per step, sized off the 400% track rather than the viewport unit.
   100vw ignores the horizontal padding on .act-inner, so each panel came out
   wider than the window it slides inside and the card ran off the right edge. */
.steps-track > .step-panel{
  width:25%; flex:0 0 25%;
  display:flex; align-items:center; justify-content:center;
  padding:0 6vw; box-sizing:border-box;
}
.step-content{ max-width:min(520px, 88vw); width:100%; }
.steps-header{ padding-top:0; }
@media(max-width:720px){
  .steps-viewport{ min-height:min(46vh, 360px); }
  .steps-track > .step-panel{ padding:0 5vw; }
}

/* These three panels used to carry inline styles (padding:0, a hand-set
   flex-direction, position:relative). Inline wins over the stylesheet, so they
   were quietly cancelling the padding that keeps a panel's first line clear of
   the fixed header, which is why the "How it works" heading sat behind it. */
.act-inner-steps{ flex-direction:column; }
.act-inner-scroll{ justify-content:flex-start; }
.act-inner-rel{ position:relative; }
/* Give the step track a fixed share of the panel so the heading above it is
   never pushed off the top. */
.act-inner-steps .steps-viewport{ flex:0 0 auto; height:min(46vh, 380px); min-height:0; }
.act-inner-steps .steps-header{ flex:0 0 auto; }

/* ── Waitlist CTA ────────────────────────────────────────────────────────────
   The pill has overflow:hidden, and a flex item's default min-width is `auto`,
   so the email input refused to shrink below its own content width and pushed
   the submit button past the clip edge. That is why the label read
   "Join Waitli". min-width:0 lets the input give way; the button never does. */
.cta-form{ align-items:stretch; }
.cta-input{ min-width:0; }
.cta-submit{ flex:0 0 auto; }
@media(max-width:420px){
  /* Below this there is genuinely no room for both on one line. */
  .cta-form{ flex-direction:column; border-radius:18px; }
  .cta-submit{ border-radius:0 0 18px 18px; }
}

/* ── Four steps: the card needs to look like a card ─────────────────────────
   It was a bare white rectangle running edge to edge inside its pane, which
   read as a chopped-off slab rather than a container. */
.step-content{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(15,23,42,.09);
  border-radius:20px;
  padding:clamp(20px, 3.4vw, 30px);
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 18px 40px -28px rgba(15,23,42,.5);
}
.step-content .step-tag{ margin-bottom:6px; }
.step-content .step-title{ margin-bottom:8px; }
.step-content .step-desc{ margin:0; }

/* The header sat right on top of the nav; give the whole page a little more
   breathing room under the fixed bar. */
.sh-nav{ margin-left:auto; margin-right:0; }