/* TradeFlare homepage redesign PREVIEW (Oct 31, 2026). AUW-style full-screen video hero; light white sections; brand blue #0f54fd accents. Mobile-first. */
:root{--brand-50:#e6efff;--brand-100:#cfe0ff;--brand-300:#6fa0ff;--brand-500:#0f54fd;--brand-600:#0b45d6;--brand-700:#0836a8;
--teal:#0b45d6;--bg:#ffffff;--soft:#f6f8fc;--card:#ffffff;--fg:#0f121a;--muted-fg:#5c6475;--muted:#eff2f8;--border:#dbe0ea;--radius:10px;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--fg);background:var(--bg);line-height:1.55;font-size:16px}
img{max-width:100%;height:auto}a{color:var(--brand-600)}a:hover{color:var(--brand-700)}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:100;background:#fff;padding:.5rem 1rem;border-radius:8px}
.container{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.container{padding:0 40px}}
.narrow{max-width:820px}
h1,h2,h3{line-height:1.15;letter-spacing:-.01em;margin:0 0 .6rem}
h2{font-size:clamp(1.7rem,4.6vw,2.6rem);font-weight:800}h3{font-size:1.15rem;font-weight:700}
section{padding:64px 0}@media(min-width:900px){section{padding:96px 0}}
.section-alt{background:var(--soft)}.section-tight{padding:22px 0}
.section-head{max-width:760px;margin-bottom:2.2rem}
.muted{color:var(--muted-fg)}.small{font-size:.9rem}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-600)}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--brand-500);border-radius:2px}
.lead{font-size:1.1rem;color:#2b3242}.fineprint{font-size:.88rem;color:var(--muted-fg)}
/* Buttons: AUW-like square-ish, bold */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font:inherit;font-weight:700;text-decoration:none;border-radius:6px;padding:.8rem 1.5rem;font-size:1rem;line-height:1.2;border:2px solid transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .2s;text-align:center}
.btn-primary{background:var(--brand-500);color:#fff}.btn-primary:hover{background:var(--brand-600);color:#fff}
.btn-outline{background:#fff;color:var(--brand-700);border-color:var(--brand-500)}.btn-outline:hover{background:var(--brand-500);color:#fff}
.btn-ghost{background:transparent;color:var(--brand-700);border-color:var(--brand-300)}.btn-ghost:hover{background:var(--brand-50)}
.btn-sm{padding:.5rem 1rem;font-size:.9rem}.btn-lg{padding:1rem 1.9rem;font-size:1.08rem}
/* Header: transparent over the video (AUW), white once scrolled */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,box-shadow .3s}
.site-header .container{display:flex;align-items:center;gap:1rem;height:64px}
.wordmark{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.2rem;color:#fff;text-decoration:none}
.nav{display:none;gap:1.4rem;margin-left:auto}.nav a{color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;opacity:.92}.nav a:hover{opacity:1;text-decoration:underline}
.header-cta{margin-left:auto}
@media(min-width:1080px){.nav{display:flex}.header-cta{margin-left:1rem}}
.site-header .header-cta{background:transparent;color:#fff;border:1px solid #fff;border-radius:0;padding:.5rem 1.4rem}
.site-header .header-cta:hover{background:#fff;color:#000}
.site-header.scrolled{background:#fff;box-shadow:0 1px 0 var(--border)}
.site-header.scrolled .wordmark,.site-header.scrolled .nav a{color:var(--fg)}
.site-header.scrolled .header-cta{color:var(--brand-700);border-color:var(--brand-500)}.site-header.scrolled .header-cta:hover{background:var(--brand-500);color:#fff}
/* Full-screen video hero */
.vhero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#111;color:#fff;padding:0}
.vhero video,.vhero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.05) 30%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.72) 100%)}
.vhero-copy{position:absolute;z-index:2;left:0;right:0;bottom:12vh;bottom:12svh}
.vhero h1{font-size:clamp(2.6rem,11vw,5.6rem);font-weight:900;line-height:.98;letter-spacing:-.025em;margin:0 0 1rem;max-width:11ch;text-shadow:0 2px 24px rgba(0,0,0,.35);animation:tfIn 1.2s ease-out both}
.vhero p{font-size:clamp(1.05rem,3.6vw,1.35rem);font-weight:700;margin:0 0 1.6rem;max-width:30ch;text-shadow:0 1px 12px rgba(0,0,0,.5);animation:tfIn 1.2s .35s ease-out both}
.vhero .btn-app{animation:tfIn 1.2s .7s ease-out both;font-size:1.15rem;padding:1.05rem 2rem;border-radius:6px;box-shadow:0 12px 30px -10px rgba(15,84,253,.8)}
.vhero .btn-app svg{width:22px;height:22px}
.vhero-sub{display:block;margin-top:.9rem;font-size:.9rem;font-weight:600;opacity:.9;animation:tfIn 1.2s .9s ease-out both}
.vhero-sub a{color:#fff}
.ai-label{position:absolute;z-index:2;top:76px;left:20px;font-size:.7rem;font-weight:700;letter-spacing:.04em;background:rgba(0,0,0,.45);padding:.25rem .55rem;border-radius:4px;color:#fff}
@media(min-width:768px){.ai-label{left:40px}}
.scroll-cue{position:absolute;z-index:2;bottom:22px;left:50%;transform:translateX(-50%);width:26px;height:40px;border:2px solid rgba(255,255,255,.8);border-radius:14px}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;background:#fff;border-radius:2px;animation:tfCue 1.8s infinite}
@keyframes tfIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes tfCue{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(12px)}}
@media(prefers-reduced-motion:reduce){.vhero h1,.vhero p,.vhero .btn-app,.vhero-sub{animation:none}}
/* Intro (original hero content) */
.update-notice{background:var(--brand-50)!important;border-bottom:1px solid var(--brand-100)!important}
.hero-grid{display:grid;gap:2.5rem;align-items:center}@media(min-width:960px){.hero-grid{grid-template-columns:1.1fr .9fr;gap:4rem}}
.intro h1{font-size:clamp(2rem,6vw,3.2rem);font-weight:900}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 .5rem}
.badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--brand-100);background:var(--brand-50);color:var(--brand-700);font-size:.8rem;font-weight:700;padding:.3rem .8rem;border-radius:999px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--teal);display:inline-block}
.pill-live{display:inline-flex;align-items:center;gap:.4rem;background:var(--brand-50);color:var(--brand-700);border:1px solid var(--brand-100);font-weight:800;font-size:.72rem;padding:.2rem .65rem;border-radius:999px;white-space:nowrap;vertical-align:middle;letter-spacing:.02em}
.soon-inline{font-size:.8rem}
/* Call card */
.call-card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 30px 60px -30px rgba(0,0,0,.18);overflow:hidden}
.call-card header{display:flex;justify-content:space-between;align-items:center;background:var(--brand-500);color:#fff;padding:.8rem 1.1rem;font-weight:700;font-size:.9rem}
.call-card header .dot{background:#fff;margin-right:.4rem}
.call-body{padding:1.1rem;display:grid;gap:.9rem}
.urgent{display:flex;gap:.6rem;background:#e6efff;border:1px solid #cfe0ff;color:#0836a8;border-radius:10px;padding:.7rem .85rem;font-size:.92rem}
.call-fields{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0;font-size:.92rem}.call-fields dt{color:var(--muted-fg)}.call-fields dd{margin:0;font-weight:600}
.transcript{background:var(--soft);border-radius:10px;padding:.7rem .85rem;font-size:.9rem}.transcript p{margin:.2rem 0}.who{font-weight:700;color:var(--brand-700)}
.rec{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--muted-fg)}.rec .bar{flex:1;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--brand-500) 40%,var(--border) 40%)}
.call-actions{display:flex;flex-wrap:wrap;gap:.5rem}.call-actions span{font-size:.82rem;font-weight:700;border:1px solid var(--border);border-radius:6px;padding:.35rem .7rem}.call-actions .primary{background:var(--brand-500);color:#fff;border-color:var(--brand-500)}
.example-note{font-size:.8rem;color:var(--muted-fg);text-align:center;margin-top:.6rem}
.proof{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:center;padding:0;margin:0;list-style:none;font-weight:700;font-size:.95rem}
.proof li::before{content:"✓";color:var(--teal);font-weight:900;margin-right:.4rem}
/* Cards & grids */
.grid-3,.grid-4{display:grid;gap:1rem}
@media(min-width:640px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.4rem}
.card p{color:var(--muted-fg);margin:.3rem 0 0}
.feature{border-top:4px solid var(--brand-500)}
.step-num{display:inline-block;font-weight:900;font-size:1.6rem;color:var(--brand-500);margin-bottom:.4rem}
.say{font-style:italic;color:var(--brand-700)!important}
.subhead{display:flex;align-items:center;gap:.75rem;margin:0 0 1rem}.subhead h3{margin:0}
.status-block{display:grid;gap:1rem;margin-top:1.5rem}
/* Voice section: light (no navy) */
.voice{position:relative;background:linear-gradient(180deg,#fff 0%,var(--brand-50) 100%);overflow:hidden}
.voice-glow{display:none}
.voice-grid{display:grid;gap:2.5rem;align-items:center}@media(min-width:960px){.voice-grid{grid-template-columns:1.15fr .85fr;gap:4rem}}
.voice-lead{color:#2b3242;font-size:1.05rem}
.voice-live{display:flex;gap:.9rem;align-items:flex-start;background:#fff;border:1px solid var(--brand-100);border-left:4px solid var(--brand-500);border-radius:12px;padding:1rem 1.1rem;margin:1.2rem 0}
.voice-live h3{margin:0 0 .2rem}.voice-live p{margin:0;color:var(--muted-fg)}
.voice-cards{display:grid;gap:1rem}@media(min-width:640px){.voice-cards{grid-template-columns:1fr 1fr}}
.vcard{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.1rem}.vcard h3{margin:.6rem 0 .3rem}.vcard p{margin:0;color:var(--muted-fg)}
.voice-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem}
.voice-demo{margin:0;display:grid;justify-items:center;gap:.8rem}
.voice-demo figcaption{font-size:.9rem;color:var(--muted-fg)}
.phone{width:290px;max-width:100%;background:#0f121a;border-radius:40px;padding:12px;box-shadow:0 40px 80px -30px rgba(0,0,0,.3);position:relative}
.phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:110px;height:22px;background:#0f121a;border-radius:0 0 14px 14px;z-index:2}
.phone-screen{background:#fff;border-radius:30px;padding:2.2rem 1rem 1.2rem;display:grid;gap:.8rem;min-height:520px;align-content:start}
.phone-status{display:flex;justify-content:space-between;font-size:.75rem;font-weight:700}.phone-title{color:var(--brand-600)}
.bubble{border-radius:16px;padding:.7rem .85rem;font-size:.88rem}.bubble-who{display:block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;opacity:.75;margin-bottom:.2rem}
.bubble-you{background:var(--brand-500);color:#fff;margin-left:1.5rem}.bubble-tf{background:var(--muted);margin-right:1.5rem}
.job-chip{display:flex;gap:.6rem;align-items:center;border:1px solid var(--border);border-radius:12px;padding:.6rem .75rem;font-size:.82rem}.job-chip span{display:block;color:var(--muted-fg)}
.job-dot{width:10px;height:10px;border-radius:50%;background:var(--teal);flex:none}
.wave{display:flex;gap:3px;justify-content:center;align-items:center;height:36px}.wave span{width:4px;border-radius:2px;background:var(--brand-300);height:30%;animation:tfWave 1.1s infinite ease-in-out}
.wave span:nth-child(3n){animation-delay:.2s}.wave span:nth-child(3n+1){animation-delay:.4s}
@keyframes tfWave{0%,100%{height:25%}50%{height:95%}}
.mic-wrap{display:grid;justify-items:center;gap:.4rem}.mic{width:64px;height:64px;border-radius:50%;background:var(--brand-500);display:grid;place-items:center;box-shadow:0 0 0 8px var(--brand-50)}.mic-hint{font-size:.75rem;color:var(--muted-fg)}
/* Plans */
.plans{display:grid;gap:1.25rem;max-width:860px}@media(min-width:760px){.plans{grid-template-columns:1fr 1fr}}
#founding .plans{grid-template-columns:1fr;max-width:520px}
.plan{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.75rem;display:flex;flex-direction:column}
.plan.featured{border:2px solid var(--brand-500);box-shadow:0 24px 50px -30px rgba(15,84,253,.5)}
.plan .who{color:var(--muted-fg);margin:0}.price{font-size:2.4rem;font-weight:900;margin:.6rem 0 0}.price small{font-size:1rem;font-weight:600;color:var(--muted-fg)}
.checks{list-style:none;padding:0;margin:1rem 0 1.5rem;display:grid;gap:.55rem;flex:1;align-content:start}
.checks li{padding-left:1.6rem;position:relative}.checks li::before{content:"✓";position:absolute;left:0;color:var(--brand-500);font-weight:900}
.fine{font-size:.85rem;color:var(--muted-fg);margin:.8rem 0 0}
.billing-note{margin-top:1.5rem;max-width:860px}
/* Download */
.download{display:grid;gap:2rem;align-items:center}@media(min-width:900px){.download{grid-template-columns:1fr 1fr;gap:4rem}}
.app-head{display:flex;gap:1rem;align-items:center;margin-bottom:1rem}.app-head img{border-radius:16px}
.download ol{padding-left:1.2rem}.download li{margin:.3rem 0}
.store-badges{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.store-badge img{display:block;height:52px;width:auto}
.badge-soon{margin:16px 0 0;font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.store-note{color:var(--muted-fg);margin-top:1rem}
.dl-big{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}
/* FAQ */
details{border-bottom:1px solid var(--border);padding:1rem 0}summary{cursor:pointer;font-weight:700;font-size:1.05rem;list-style:none;position:relative;padding-right:2rem}
summary::-webkit-details-marker{display:none}summary::after{content:"+";position:absolute;right:0;top:-.1rem;font-size:1.5rem;color:var(--brand-500)}details[open] summary::after{content:"–"}
details p{color:var(--muted-fg);margin:.6rem 0 0}
.contact-card{display:grid;gap:1.25rem}@media(min-width:800px){.contact-card{grid-template-columns:1.4fr 1fr;align-items:center}}
/* CTA band: light */
.cta-band{text-align:center;background:#fff;border-top:1px solid var(--border)}
.cta-band .eyebrow{justify-content:center}.cta-band h2{font-size:clamp(2rem,6vw,3.4rem);font-weight:900}.cta-band .lead{margin:0 auto 1.6rem;max-width:40ch}
.cta-band .btn+.btn{margin-left:.5rem}
/* Footer */
.site-footer{background:var(--soft);border-top:1px solid var(--border);padding:40px 0;font-size:.9rem;color:var(--muted-fg)}
.site-footer .container{display:grid;gap:1.25rem}.site-footer .wordmark{color:var(--fg)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}.site-footer nav a{color:var(--fg);text-decoration:none}.site-footer nav a:hover{color:var(--brand-600)}
.legal-credits{font-size:.78rem;margin:0}
/* Sticky mobile download bar (added) */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--border);display:flex;gap:.6rem;align-items:center;transform:translateY(110%);transition:transform .3s}
.mbar.show{transform:none}.mbar .btn{flex:1}.mbar span{font-size:.8rem;color:var(--muted-fg);font-weight:600;max-width:9rem;line-height:1.2}
@media(min-width:900px){.mbar{display:none}}
.preview-flag{position:fixed;right:10px;bottom:10px;z-index:60;background:#111;color:#fff;font-size:.72rem;padding:.3rem .6rem;border-radius:4px;opacity:.75}
@media(max-width:899px){.preview-flag{bottom:76px}}