/* ============================================================
   Hushflo — marketing site
   Light/white · indigo #6366F1 · magenta #EC4899 · indigo→magenta gradient
   Geist (display) · Inter (body) · JetBrains Mono (data/eyebrow)
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300..900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root{
  --page:#FFFFFF; --surface:#FFFFFF; --surface-2:#F7F8FA; --surface-3:#EFF1F5; --ink-surface:#0B0D17;
  --border:#EBEDF1; --border-soft:#F1F3F6; --border-med:#DCE0E6;
  --ink:#0B0D17; --body:#4B5563; --muted:#6B7280; --ghost:#AEB4C0;
  --indigo:#6366F1; --indigo-dark:#4F46E5; --indigo-soft:#818CF8; --indigo-light:#EEF2FF;
  --magenta:#EC4899; --magenta-dark:#DB2777; --magenta-light:#FCE7F3;
  --violet:#8B5CF6; --violet-light:#F1EAFE; --cyan:#0891B2; --cyan-light:#DEF5FA; --teal:#0D9488; --teal-light:#DBF6F1;
  --success:#059669; --success-bg:#D1FAE5; --danger:#DC2626; --danger-bg:#FEE2E2; --amber:#B45309; --amber-bg:#FEF3C7;
  --grad:linear-gradient(120deg,#6366F1 0%,#A14FD6 52%,#EC4899 100%);
  --grad-soft:linear-gradient(120deg,#EEF2FF 0%,#F3ECFD 50%,#FCE7F3 100%);
  --f-display:"Geist",system-ui,sans-serif; --f-body:"Inter",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --shadow-sm:0 2px 8px rgba(15,23,42,.05); --shadow-md:0 10px 30px rgba(15,23,42,.08);
  --shadow-lg:0 24px 60px rgba(15,23,42,.12); --shadow-indigo:0 16px 40px rgba(99,102,241,.22);
  --maxw:1200px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:88px;}
body{margin:0; background:var(--page); color:var(--ink); font-family:var(--f-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;}
a{color:var(--indigo); text-decoration:none;} a:hover{color:var(--indigo-dark);}
img{max-width:100%; display:block;}
h1,h2,h3,h4{margin:0; font-family:var(--f-display); color:var(--ink); letter-spacing:-0.02em; line-height:1.06;}
p{margin:0; line-height:1.6; color:var(--body);}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* ---------- eyebrow ---------- */
.eyebrow{font-family:var(--f-mono); font-weight:600; font-size:12px; letter-spacing:2.2px; text-transform:uppercase; color:var(--indigo); display:inline-flex; align-items:center; gap:10px;}
.eyebrow::before{content:""; width:20px; height:2px; border-radius:2px; background:var(--grad);}
.eyebrow.c::before{display:none;}

/* ---------- buttons ---------- */
.btn{font-family:var(--f-body); font-weight:600; font-size:15px; padding:13px 22px; border-radius:12px; border:1.5px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:9px; transition:all .18s ease; white-space:nowrap; text-decoration:none;}
.btn svg{width:17px; height:17px;}
.btn-primary{background:var(--indigo); color:#fff; box-shadow:var(--shadow-indigo);}
.btn-primary:hover{background:var(--indigo-dark); color:#fff; transform:translateY(-1px);}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--border-med);}
.btn-ghost:hover{border-color:var(--indigo); color:var(--indigo); background:var(--indigo-light);}
.btn-lg{padding:16px 28px; font-size:16px; border-radius:14px;}
.btn-grad{background:var(--grad); color:#fff; box-shadow:var(--shadow-indigo);}
.btn-grad:hover{color:#fff; transform:translateY(-1px); filter:brightness(1.05);}

/* ---------- nav ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; height:72px; display:flex; align-items:center; background:rgba(255,255,255,.82); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s;}
.nav.scrolled{border-bottom-color:var(--border); box-shadow:var(--shadow-sm);}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; width:100%;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{width:28px; height:28px;}
.brand span{font-family:var(--f-display); font-weight:600; font-size:21px; letter-spacing:-0.02em; color:var(--ink);}
.nav-links{display:flex; align-items:center; gap:32px;}
.nav-links a{font-size:14.5px; font-weight:500; color:var(--body);}
.nav-links a:hover{color:var(--ink);}
.nav-cta{display:flex; align-items:center; gap:14px;}
.nav-cta .btn{padding:10px 18px; font-size:14px;}
.nav-login{font-size:14.5px; font-weight:500; color:var(--body);}

/* ---------- section rhythm ---------- */
section{position:relative;}
.sec{padding:104px 0;}
.sec-tint{background:var(--surface-2);}
.sec-head{max-width:720px;}
.sec-head.center{margin:0 auto; text-align:center;}
.sec-head .eyebrow{margin-bottom:18px;}
.sec-title{font-size:44px; font-weight:800; letter-spacing:-0.025em; text-wrap:balance;}
.sec-sub{font-size:19px; color:var(--body); margin-top:20px; line-height:1.55; text-wrap:pretty;}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(20px);}
.reveal.in{opacity:1; transform:none; transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none;}}