/* Vantham landing page. Hand-written, no framework, no build step.
   Responsive via fluid type (clamp) and auto-fitting grids. */

:root{
  --blue:#3B82F6;
  --blue-dark:#2563EB;
  --ink:#1E2633;
  --ink-2:#39424F;
  --muted:#6B7280;
  --line:#E5E7EB;
  --paper:#FFFFFF;
  --paper-2:#F7F9FC;
  --radius:14px;
  --wrap:1120px;
  --shadow:0 1px 2px rgba(30,38,51,.05), 0 8px 24px rgba(30,38,51,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,32px)}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:68px}
.brand img{width:auto; height:26px}
.nav-links{display:flex; align-items:center; gap:clamp(14px,2.4vw,28px)}
.nav-links a{text-decoration:none; font-size:.94rem; font-weight:500; color:var(--ink-2)}
.nav-links a:hover{color:var(--blue)}
/* hide text links on small screens, keep the sign-in button */
@media (max-width:760px){ .nav-links a:not(.btn){display:none} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.72em 1.25em; border-radius:10px;
  background:var(--blue); color:#fff; text-decoration:none;
  font-weight:600; font-size:.96rem; line-height:1;
  border:1px solid var(--blue);
  transition:background .15s ease, transform .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--blue-dark); border-color:var(--blue-dark)}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:.58em 1em; font-size:.9rem}
.btn-lg{padding:.9em 1.5em; font-size:1rem}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{background:var(--paper-2); color:var(--ink); border-color:#D6DBE3}
.btn-invert{background:#fff; color:var(--ink); border-color:#fff}
.btn-invert:hover{background:#EEF2F7; color:var(--ink); border-color:#EEF2F7}
.btn-ghost-invert{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.btn-ghost-invert:hover{background:rgba(255,255,255,.1); color:#fff}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,9vw,104px) 0 clamp(40px,6vw,72px); background:
  radial-gradient(1000px 420px at 12% -8%, rgba(59,130,246,.10), transparent 60%),
  radial-gradient(760px 340px at 92% 4%, rgba(59,130,246,.07), transparent 62%);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 22px; padding:.45em 1em;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.7);
  font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.dot{width:7px; height:7px; border-radius:50%; background:var(--blue); flex:none}
h1{
  margin:0 0 20px;
  font-size:clamp(2.1rem,5.4vw,3.6rem);
  line-height:1.1; letter-spacing:-.02em; font-weight:700;
  max-width:19ch;
}
h1 .muted{color:var(--muted); font-weight:600}
.lede{margin:0 0 30px; max-width:62ch; font-size:clamp(1.02rem,1.9vw,1.2rem); color:var(--ink-2)}
.cta-row{display:flex; flex-wrap:wrap; gap:12px}
.cta-row.center{justify-content:center}
.fineprint{margin:26px 0 0; font-size:.88rem; color:var(--muted); max-width:60ch}

/* ---------- bands ---------- */
.band{padding:clamp(52px,7.5vw,88px) 0; border-top:1px solid var(--line)}
.band.alt{background:var(--paper-2)}
h2{margin:0 0 14px; font-size:clamp(1.55rem,3.4vw,2.3rem); line-height:1.2; letter-spacing:-.015em; font-weight:700; max-width:24ch}
.sub{margin:0 0 34px; color:var(--muted); font-size:1.03rem; max-width:58ch}
h3{margin:0 0 8px; font-size:1.1rem; font-weight:650; letter-spacing:-.01em}
p{margin:0 0 12px}

/* ---------- cards ---------- */
.cards{display:grid; gap:20px; margin-top:34px}
.cards.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,272px),1fr))}
/* 4 cards: force a balanced 2x2 on wide screens instead of 3 + an orphan */
.cards.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr))}
.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow);
}
.card p{color:var(--ink-2); font-size:.97rem; margin:0}
.card p + p{margin-top:10px}
.card.flat{box-shadow:none}
.ico{
  width:42px; height:42px; border-radius:11px; margin-bottom:16px;
  display:grid; place-items:center;
  background:rgba(59,130,246,.10); color:var(--blue);
}
.ico svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.tag{
  display:inline-block; margin-top:14px !important; padding:.3em .7em;
  border-radius:999px; background:rgba(59,130,246,.10); color:var(--blue-dark);
  font-size:.75rem; font-weight:650; letter-spacing:.04em; text-transform:uppercase;
}

/* ---------- steps ---------- */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,248px),1fr));
  counter-reset:s;
}
.steps li{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 22px;
}
.steps .num{
  display:grid; place-items:center;
  width:30px; height:30px; margin-bottom:14px;
  border-radius:9px; background:var(--ink); color:#fff;
  font-size:.85rem; font-weight:700;
}
.steps p{margin:0; color:var(--ink-2); font-size:.96rem}

/* ---------- closer ---------- */
.closer{
  padding:clamp(58px,8vw,96px) 0;
  background:linear-gradient(160deg,#1E2633 0%,#2A3444 55%,#33415A 100%);
  color:#fff; text-align:center;
}
.closer h2{margin-inline:auto; max-width:22ch}
.closer p{margin:0 auto 28px; max-width:56ch; color:rgba(255,255,255,.76); font-size:1.04rem}

/* ---------- footer ---------- */
.foot{padding:30px 0; border-top:1px solid var(--line); background:var(--paper)}
.foot-inner{display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; justify-content:space-between}
.foot p{margin:0; font-size:.9rem; color:var(--muted)}
.foot .dim{display:flex; flex-wrap:wrap; gap:18px}
.foot .dim a{text-decoration:none; color:var(--ink-2); font-weight:500}
.foot .dim a:hover{color:var(--blue)}

/* ---------- a11y + motion ---------- */
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}