/* TexMax — texmax.app marketing site. Plain CSS, no framework. Google Fonts are linked from index.html's , not @import'd here — an @import inside this stylesheet would force a second serial round-trip before the browser even discovers the font request, delaying first paint. */ :root{ --canvas:#0b0b16; --panel:#14142a; --panel-glass:rgba(20,20,42,.82); --panel-2:#1b1b36; --accent:#5b5fef; --accent-hover:#4a4edb; --accent-glow:#9b6bf5; --text-primary:#f1f0fa; --text-secondary:#b4b1d2; --border:rgba(155,150,190,.16); --border-strong:rgba(155,150,190,.28); --success:#4fd1a5; --font-display:'Space Grotesk',sans-serif; --font-body:'Plus Jakarta Sans',sans-serif; --font-mono:'JetBrains Mono',monospace; --ease:cubic-bezier(.22,.9,.32,1); --ease-soft:cubic-bezier(.4,0,.2,1); --tshadow:0 1px 2px rgba(5,5,10,.9),0 3px 12px rgba(5,5,10,.7),0 10px 40px rgba(5,5,10,.7); --radius-sm:8px; --radius-md:14px; --radius-lg:22px; } *{box-sizing:border-box} html,body{overflow-x:clip;overflow-x:hidden} html{scroll-behavior:auto} body{ margin:0;background:var(--canvas);color:var(--text-primary); font-family:var(--font-body);line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.1;margin:0} p{margin:0} a{color:inherit} code,.mono{font-family:var(--font-mono)} .skip-link{ position:absolute;left:12px;top:-60px;background:var(--accent);color:#fff;padding:10px 16px; border-radius:var(--radius-sm);z-index:200;transition:top .2s var(--ease-soft);text-decoration:none;font-weight:600; } .skip-link:focus{top:12px} :focus-visible{outline:2px solid var(--accent-glow);outline-offset:3px;border-radius:4px} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} /* ---------- Background environment (one fixed layer, whole site) ---------- */ .env-layer{ position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(ellipse 60% 50% at 18% 8%, rgba(91,95,239,.14), transparent 60%), radial-gradient(ellipse 55% 45% at 85% 30%, rgba(155,107,245,.12), transparent 60%), radial-gradient(ellipse 70% 60% at 50% 100%, rgba(91,95,239,.10), transparent 65%); animation:envdrift 70s ease-in-out infinite alternate; } @keyframes envdrift{ 0%{opacity:.85;transform:translateY(0)} 100%{opacity:1;transform:translateY(-18px)} } .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } main{position:relative;z-index:2} /* One video loops as a full-viewport fixed background for the entire page, from behind the hero text at the very top all the way down to the footer. Kept light so the footage's real color and detail carry through; text over it gets its own local scrim (.band-textblock::before) instead of this layer being darkened to do the job on its own. */ .thread-bg{ position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.1s var(--ease-soft); background-image:url('hero-poster.jpg');background-size:cover;background-position:center; } .thread-bg.visible{opacity:1} #threadVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .thread-bg-scrim{ position:absolute;inset:0; } @media (max-width:820px){.thread-bg{display:none}} @media (prefers-reduced-motion:reduce){#threadVideo{display:none}} /* ---------- Nav ---------- */ .nav{ position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between; padding:18px 28px;backdrop-filter:blur(14px);background:rgba(11,11,22,.72); border-bottom:1px solid var(--border); } .logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.15em;text-decoration:none;color:var(--text-primary)} .logo-bubble{ width:30px;height:30px;object-fit:contain;flex-shrink:0; filter:drop-shadow(0 3px 10px rgba(91,95,239,.4)); } .logo .accent{color:var(--accent-glow)} .nav-links{display:flex;gap:28px;align-items:center} .nav-links a{text-decoration:none;color:var(--text-secondary);font-size:.92em;font-weight:600;transition:color .2s var(--ease-soft)} .nav-links a:hover{color:var(--text-primary)} .nav-cta{display:flex;gap:12px;align-items:center} @media (max-width:820px){.nav-links{display:none}} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px; font-weight:700;font-size:.95em;text-decoration:none;border:none;cursor:pointer; transition:transform .2s var(--ease-soft),box-shadow .2s var(--ease-soft),background .2s var(--ease-soft); font-family:var(--font-body); } .btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 30px -8px rgba(91,95,239,.6)} .btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 12px 36px -8px rgba(91,95,239,.75)} .btn-ghost{background:transparent;color:var(--text-primary);border:1px solid var(--border-strong)} .btn-ghost:hover{border-color:var(--accent-glow);background:rgba(155,107,245,.08)} @media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}} /* ---------- Hero ---------- */ /* Static hero: no local video of its own. It sits on top of the shared fixed background video (.thread-bg, z-index 1) which now covers the whole page starting right behind it. */ .hero-pin{position:relative} .hero-stage{ position:relative;height:auto;min-height:92vh;overflow:hidden;display:flex;flex-direction:column; align-items:center;justify-content:center;padding:60px 0; } .hero-scrim{ position:absolute;inset:0;z-index:2;pointer-events:none; } .band{ position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:20px 24px;width:100%; } .band.band-lower{margin-top:14px} /* Local scrim right behind the text block itself, on top of the global one, so legibility holds even where the brightest strands of the footage cross directly behind a letter. */ .band-textblock{ position:relative;display:flex;flex-direction:column;align-items:center;padding:36px 40px;border-radius:28px; } .band-textblock::before{ content:"";position:absolute;inset:-6% -8%;border-radius:32px;z-index:-1; } .band .hero-kicker{ display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px; background:rgba(91,95,239,.16);border:1px solid rgba(91,95,239,.35);font-size:.82em;font-weight:600; color:var(--accent-glow);margin-bottom:28px;font-family:var(--font-mono);width:fit-content; } .band .hero-kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success)} .band h1{ font-size:clamp(2.2em,5vw,4.2em);max-width:16ch;letter-spacing:-.01em; color:#ffd66b; animation:heroSunGlow 3.8s ease-in-out infinite;animation-delay:-1.6s; } @keyframes heroSunGlow{ 0%,100%{text-shadow:var(--tshadow),0 0 10px rgba(255,196,80,.35),0 0 24px rgba(255,140,40,.2)} 50%{text-shadow:var(--tshadow),0 0 26px rgba(255,214,110,.9),0 0 55px rgba(255,150,40,.55),0 0 90px rgba(255,100,20,.3)} } .hero-sub{ max-width:56ch;margin:26px auto 0;font-size:1.15em;color:#fdf6e3; animation:heroShine 3.4s ease-in-out infinite;animation-delay:-1.4s; } @keyframes heroShine{ 0%,100%{text-shadow:var(--tshadow),0 0 8px rgba(255,244,214,.3),0 0 18px rgba(255,225,150,.15)} 50%{text-shadow:var(--tshadow),0 0 22px rgba(255,244,214,.85),0 0 48px rgba(255,225,150,.5),0 0 70px rgba(255,215,130,.25)} } /* Same shine treatment as .hero-sub, for a sub-page's own header lead so it matches the homepage. */ .section-lead.shine{animation:heroShine 3.4s ease-in-out infinite;animation-delay:-1.4s} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:100%} .hero-flow-line{ margin-top:22px;font-family:var(--font-mono);font-size:.85em;color:var(--text-secondary); display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;text-shadow:var(--tshadow); max-width:100%; } .hero-flow-line .seg{padding:5px 12px;border-radius:8px;background:rgba(20,20,42,.7);backdrop-filter:blur(8px);border:1px solid var(--border)} .hero-flow-line .arrow{color:var(--accent-glow)} .scroll-cue{ position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;width:26px;height:26px; color:var(--text-secondary);opacity:.7;animation:cuebounce 2s ease-in-out infinite; } @keyframes cuebounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}} @media (prefers-reduced-motion:reduce){.scroll-cue{display:none}} .settle-section{padding:100px 0 130px;position:relative;overflow:hidden} .settle-section::before{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:130px;z-index:0; background:linear-gradient(var(--accent-glow),transparent);opacity:.55; } /* Three-panel hero diagram */ .hero-diagram{ position:relative;z-index:1;width:100%;max-width:1040px;margin:0 auto; display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:8px; } @media (max-width:900px){.hero-diagram{grid-template-columns:1fr;gap:18px} .hero-diagram .flow-arrow{transform:rotate(90deg)}} .panel-card{ background:var(--panel-glass);backdrop-filter:blur(14px);border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:22px; text-align:left;box-shadow:0 20px 60px -20px rgba(0,0,0,.6); } .panel-card h3{display:flex;align-items:center;gap:10px;font-size:.78em;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-glow);margin-bottom:14px;font-family:var(--font-mono);font-weight:600} .panel-icon{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-glow));display:flex;align-items:center;justify-content:center;flex-shrink:0} .panel-icon svg{width:16px;height:16px;color:#fff} .fake-dashboard{background:rgba(27,27,54,.85);backdrop-filter:blur(14px);border-radius:var(--radius-md);padding:16px;border:1px solid var(--border-strong)} .fake-dashboard .fd-title{font-size:.8em;color:var(--text-secondary);margin-bottom:10px} .fake-dashboard .fd-row{display:flex;flex-direction:column;gap:4px;margin-bottom:10px} .fake-dashboard label{font-size:.72em;color:var(--text-secondary);font-family:var(--font-mono)} .fake-dashboard .fd-value{background:var(--canvas);border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:.85em} .fake-dashboard .fd-btn{ margin-top:6px;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:9px; font-weight:700;font-size:.85em;text-align:center;font-family:var(--font-body); } .api-panel{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center} .api-status{display:flex;align-items:center;gap:8px;font-size:.85em;color:var(--success);font-family:var(--font-mono)} .api-status .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success)} .api-pulse{ width:64px;height:64px;border-radius:50%;border:2px solid var(--accent-glow); display:flex;align-items:center;justify-content:center;position:relative; } .api-pulse::before{ content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(155,107,245,.4); animation:pulsering 2.4s ease-out infinite; } @keyframes pulsering{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.5);opacity:0}} .gateway-panel .gw-row{display:flex;justify-content:space-between;font-size:.85em;padding:8px 0;border-bottom:1px solid var(--border)} .gateway-panel .gw-row:last-child{border-bottom:none} .gateway-panel .gw-label{color:var(--text-secondary);font-family:var(--font-mono);font-size:.9em} .gateway-panel .gw-val{font-weight:600;color:var(--success)} .flow-arrow{display:flex;align-items:center;justify-content:center;color:var(--accent-glow);opacity:.7} .flow-arrow svg{width:28px;height:28px} /* ---------- Sections ---------- */ section{position:relative;padding:130px 0} .section-kicker{ font-family:var(--font-mono);font-size:.82em;letter-spacing:.06em;color:var(--accent-glow); text-transform:uppercase;margin-bottom:16px;font-weight:500; } .section-title{font-size:clamp(1.9em,3.6vw,2.8em);max-width:20ch;letter-spacing:-.01em} .section-lead{margin-top:18px;font-size:1.12em;color:var(--text-secondary);max-width:60ch;line-height:1.65} .section-lead.lead-warm{color:#fdf6e3;text-shadow:var(--tshadow)} .section-head{margin-bottom:64px} .section-head.center{text-align:center;margin-left:auto;margin-right:auto} .section-head.center .section-title,.section-head.center .section-lead{margin-left:auto;margin-right:auto} /* reveal-on-scroll */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:translateY(0)} .reveal-stagger > *{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal-stagger.in > *{opacity:1;transform:translateY(0)} .reveal-stagger.in > *:nth-child(1){transition-delay:0ms} .reveal-stagger.in > *:nth-child(2){transition-delay:90ms} .reveal-stagger.in > *:nth-child(3){transition-delay:180ms} .reveal-stagger.in > *:nth-child(4){transition-delay:270ms} .reveal-stagger.in > *:nth-child(5){transition-delay:360ms} .reveal-stagger.in > *:nth-child(6){transition-delay:450ms} .reveal-stagger.in > *:nth-child(7){transition-delay:540ms} .reveal-stagger.in > *:nth-child(8){transition-delay:630ms} .reveal-stagger.in > *:nth-child(9){transition-delay:720ms} .reveal-stagger.in > *:nth-child(10){transition-delay:810ms} .reveal-stagger.in > *:nth-child(11){transition-delay:900ms} body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important} /* ---------- Chapter: flow steps (vertical) ---------- */ .flow-vertical{display:flex;flex-direction:column;align-items:center;gap:0;max-width:640px;margin:0 auto} .flow-node{ background:var(--panel-glass);backdrop-filter:blur(14px);border:1px solid var(--border-strong);border-radius:var(--radius-md); padding:18px 26px;font-family:var(--font-mono);font-size:.95em;font-weight:500;text-align:center;min-width:280px; color:var(--text-primary);box-shadow:0 14px 40px -18px rgba(0,0,0,.6); } .flow-node.hi{border-color:var(--accent-glow);background:rgba(91,95,239,.22)} .flow-connector{width:2px;height:38px;background:linear-gradient(var(--accent),var(--accent-glow));position:relative} .flow-connector.drawn{transform:scaleY(0);transform-origin:top;transition:transform 1s var(--ease)} .flow-connector.drawn.in{transform:scaleY(1)} .flow-connector::after{ content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%); width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--accent-glow); } /* ---------- Logo cloud (Chapter 1: existing software) ---------- */ .logo-cloud{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;max-width:900px;margin:0 auto 60px} .logo-chip{ background:var(--panel-glass);backdrop-filter:blur(14px);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:16px; text-align:center;font-weight:700;font-size:.92em;color:var(--text-primary); transition:border-color .25s var(--ease-soft),color .25s var(--ease-soft),transform .25s var(--ease-soft),box-shadow .25s var(--ease-soft); } .logo-chip:hover{border-color:var(--accent-glow);color:var(--accent-glow);transform:translateY(-3px);box-shadow:0 14px 34px -16px rgba(91,95,239,.5)} .converge-arrow{display:flex;justify-content:center;margin:8px 0 30px;color:var(--accent-glow)} .converge-arrow svg{width:32px;height:44px} .software-tag{ display:inline-block;background:var(--panel-glass);backdrop-filter:blur(14px);border:1px solid var(--accent-glow);border-radius:10px; padding:14px 30px;font-family:var(--font-mono);font-size:.95em;font-weight:700;color:var(--text-primary); } .tag-row{display:flex;justify-content:center;margin-bottom:8px} /* ---------- Code blocks ---------- */ .code-block{ background:#08080f;border:1px solid var(--border);border-radius:var(--radius-md);padding:22px 24px; font-family:var(--font-mono);font-size:.88em;line-height:1.7;overflow-x:auto;max-width:100%; box-shadow:0 20px 50px -22px rgba(0,0,0,.7); } .code-block .c-method{color:#4fd1a5;font-weight:600} .code-block .c-key{color:var(--accent-glow)} .code-block .c-str{color:#ffcf87} .code-block .c-comment{color:var(--text-secondary)} .code-wrap{max-width:640px;margin:0 auto} /* ---------- Two-column chapters ---------- */ .chapter{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center} /* Grid items default to min-width:auto, so a wide descendant (a long code line) can force the whole track wider than the container regardless of the 1fr sizing. min-width:0 makes the track actually respect its share of space; the code block's own overflow-x:auto then handles any content still too wide to fit. */ .chapter > *{min-width:0} @media (max-width:900px){.chapter{grid-template-columns:1fr;gap:40px}} .chapter.reverse{direction:rtl} .chapter.reverse > *{direction:ltr} /* ---------- Phone gateway status card ---------- */ .phone-card{ background:var(--panel-glass);backdrop-filter:blur(14px);border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:28px; box-shadow:0 24px 70px -24px rgba(0,0,0,.7);max-width:360px;margin:0 auto; } .phone-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px} .phone-card-head h3{font-size:1em;font-family:var(--font-body);font-weight:700} .status-pill{display:flex;align-items:center;gap:6px;font-size:.78em;font-weight:700;color:var(--success);font-family:var(--font-mono)} .status-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success);animation:blink 2s ease-in-out infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.4}} .phone-card-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border);font-size:.9em} .phone-card-row:last-child{border-bottom:none} .phone-card-row .pc-label{color:var(--text-secondary)} .phone-card-row .pc-val{font-weight:600} /* ---------- SIM to network chain ---------- */ .chain{display:flex;flex-direction:column;align-items:center;gap:0;max-width:420px;margin:0 auto} .chain-node{display:flex;align-items:center;gap:12px;background:var(--panel-glass);backdrop-filter:blur(14px);border:1px solid var(--border-strong);border-radius:12px;padding:14px 20px;width:100%;font-size:.92em;font-weight:700;color:var(--text-primary)} .chain-node .icon{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-glow));display:flex;align-items:center;justify-content:center;flex-shrink:0} .chain-node .icon svg{width:18px;height:18px;color:#fff} .chain-connector{width:2px;height:30px;background:var(--border-strong)} /* ---------- Webhook payload highlight ---------- */ .payload-highlight{color:var(--success);font-weight:600} /* ---------- Interactive moment (press and hold) ---------- */ .interactive-moment{ max-width:520px;margin:60px auto 0;text-align:center;background:var(--panel-glass);backdrop-filter:blur(14px);border:1px solid var(--border-strong); border-radius:var(--radius-lg);padding:40px 32px; } .hold-btn{ position:relative;width:150px;height:150px;border-radius:50%;margin:0 auto 20px;border:none;cursor:pointer; background:var(--panel-2);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono); font-weight:700;font-size:.9em;color:var(--text-primary);overflow:hidden;user-select:none;-webkit-user-select:none; } .hold-btn svg.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)} .hold-btn svg.ring circle{fill:none;stroke-width:5} .hold-btn svg.ring .track{stroke:var(--border)} .hold-btn svg.ring .fill{stroke:var(--accent-glow);stroke-linecap:round;transition:stroke-dashoffset .05s linear} .hold-btn span{position:relative;z-index:1;pointer-events:none} .moment-flow{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px;font-family:var(--font-mono);font-size:.8em} .moment-flow .mf-step{padding:6px 12px;border-radius:8px;background:var(--panel-2);color:var(--text-secondary);border:1px solid var(--border);transition:color .3s var(--ease-soft),border-color .3s var(--ease-soft),background .3s var(--ease-soft)} .moment-flow .mf-step.lit{color:var(--success);border-color:var(--success);background:rgba(79,209,165,.1)} .moment-status{margin-top:16px;font-size:.9em;color:var(--text-secondary);min-height:1.4em} /* ---------- Use case grid ---------- */ /* Multi-column, not CSS grid: a grid row stretches to its tallest cell, which left a big dead gap under any shorter card sharing a row with "Appointment platform" (5 steps). Columns stack each card by its own height instead, so nothing is left stranded. */ .usecase-grid{columns:2;column-gap:48px} @media (max-width:820px){.usecase-grid{columns:1}} .usecase-card{break-inside:avoid;padding:10px 0 10px 22px;margin-bottom:48px;border-left:2px solid rgba(155,107,245,.4)} /* The 4-card grid ("Support platform" / "Ecommerce" are items 3 and 4) nudged right for balance; the 2-card grid above it never reaches a 3rd child, so this rule only ever touches that one. */ .usecase-grid .usecase-card:nth-child(3), .usecase-grid .usecase-card:nth-child(4){margin-left:36px} @media (max-width:820px){ .usecase-grid .usecase-card:nth-child(3), .usecase-grid .usecase-card:nth-child(4){margin-left:0} } .usecase-card h3{font-size:1.3em;margin-bottom:20px;color:#fff;text-shadow:var(--tshadow)} .usecase-chain{display:flex;flex-direction:column;gap:2px} .usecase-step{font-family:var(--font-mono);font-size:.98em;font-weight:500;padding:10px 0;color:#f4f3fb;text-shadow:var(--tshadow);display:flex;align-items:center;gap:12px} .usecase-step:not(:last-child)::after{content:"";display:block} .usecase-step .num{width:25px;height:25px;border-radius:50%;background:rgba(8,8,15,.55);border:1px solid rgba(96,96,126,.3);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;font-size:.82em;flex-shrink:0;color:var(--accent-glow);text-shadow:none} /* ---------- FAQ ---------- */ .faq-item{border-bottom:1px solid var(--border);padding:22px 0} .faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:700;font-size:1.02em;gap:20px} .faq-q .chev{transition:transform .3s var(--ease-soft);flex-shrink:0;color:var(--accent-glow)} .faq-item.open .faq-q .chev{transform:rotate(180deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease-soft);color:var(--text-secondary);line-height:1.7} .faq-item.open .faq-a{max-height:400px;margin-top:14px} /* ---------- Final CTA ---------- */ .final-cta{text-align:center;padding:150px 0} .final-cta h2{font-size:clamp(2em,4.4vw,3.2em);max-width:18ch;margin:0 auto} .final-cta .section-lead{margin-left:auto;margin-right:auto} .cta-form{max-width:440px;margin:40px auto 0;display:flex;flex-direction:column;gap:12px} .cta-form input{ padding:14px 18px;border-radius:12px;border:1px solid var(--border-strong);background:var(--panel); color:var(--text-primary);font-size:1em;font-family:var(--font-body); } .cta-form input:focus{outline:none;border-color:var(--accent-glow)} .cta-success{display:none;background:rgba(79,209,165,.1);border:1px solid var(--success);border-radius:12px;padding:16px;color:var(--success);font-weight:600} .cta-success.show{display:block} .cta-error{max-width:440px;margin:10px auto 0;color:#ff6570;font-size:.9em;font-weight:600;min-height:1.2em} /* ---------- Footer ---------- */ footer{border-top:1px solid var(--border);padding:50px 0 40px} .footer-grid{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:30px} .footer-links{display:flex;gap:26px;flex-wrap:wrap} .footer-links a{color:var(--text-secondary);text-decoration:none;font-size:.9em} .footer-links a:hover{color:var(--text-primary)} .footer-copy{color:var(--text-secondary);font-size:.85em;margin-top:20px} /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} .reveal,.reveal-stagger > *,.flow-connector.drawn{opacity:1 !important;transform:none !important} }