/* ============================================================
   FONTE  ·  shared design system
   Wealthsimple-inspired: warm, calm, premium, plain-spoken.
   Calm-light theme with subtle glassmorphism.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --bg:#FBFAF6;
  --bg-2:#F6F4ED;
  --surface:#FFFFFF;
  --surface-2:#F4F2EC;
  --ink:#15161A;
  --ink-2:#585860;
  --ink-3:#8C8C93;
  --line:#ECE9E0;
  --line-2:#E1DDD2;
  --accent:#0E7C66;
  --accent-2:#3FA98C;
  --accent-soft:#E4F2EC;
  --accent-ink:#0A5A4A;
  --pos:#138A5E;
  --neg:#C0492F;
  --warn:#B8862A;
  --gold:#C9952F;

  --radius:20px;
  --radius-sm:13px;
  --radius-lg:26px;
  --maxw:1140px;
  --shadow:0 1px 2px rgba(20,20,25,.04), 0 8px 30px rgba(20,20,25,.05);
  --shadow-lg:0 2px 8px rgba(20,20,25,.05), 0 26px 64px rgba(20,20,25,.10);

  /* glass */
  --glass-bg:rgba(255,255,255,.55);
  --glass-bg-strong:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.65);
  --glass-blur:20px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;position:relative;
}

/* warm gradient washes that the glass refracts over */
.bg-orbs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-orbs::before,.bg-orbs::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.5}
.bg-orbs::before{width:620px;height:620px;background:radial-gradient(circle,#CFE9DE,transparent 70%);top:-180px;right:-140px}
.bg-orbs::after{width:560px;height:560px;background:radial-gradient(circle,#F3E4CF,transparent 70%);bottom:-220px;left:-160px}
.orb-3{position:fixed;width:480px;height:480px;border-radius:50%;filter:blur(90px);opacity:.32;
  background:radial-gradient(circle,#D7E7F0,transparent 70%);top:40%;left:42%;z-index:-1;pointer-events:none}

.serif{font-family:"Fraunces",Georgia,serif}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:96px 0;position:relative}
@media(max-width:740px){section{padding:64px 0}}

/* ---------- glass utility ---------- */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.6);
}
.glass-strong{background:var(--glass-bg-strong)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(255,255,255,.92)}
  .glass-strong{background:rgba(255,255,255,.97)}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  font-weight:600;font-size:16px;border-radius:999px;padding:14px 26px;
  cursor:pointer;border:1px solid transparent;font-family:inherit;
  transition:transform .15s ease,background .2s ease,box-shadow .2s ease,border-color .2s;
  min-height:48px;
}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(20,20,25,.18)}
.btn-ghost{background:rgba(255,255,255,.5);color:var(--ink);border-color:var(--line-2);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:var(--surface);border-color:var(--ink-3)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(14,124,102,.28)}
.btn-lg{padding:17px 32px;font-size:17px;min-height:54px}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:border-color .2s,background .2s}
nav.scrolled{border-color:var(--line);background:rgba(251,250,246,.7);backdrop-filter:saturate(160%) blur(14px)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:10px;font-family:"Fraunces";font-weight:600;font-size:24px;letter-spacing:-.01em;color:var(--ink)}
.logo .mark{width:32px;height:32px;border-radius:10px;background:var(--accent);display:grid;place-items:center;color:#fff;box-shadow:0 4px 12px rgba(14,124,102,.32)}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{color:var(--ink-2);font-weight:500;font-size:15.5px;transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:12px}
@media(max-width:880px){.nav-links{display:none}.nav-cta .btn-ghost{display:none}}

/* ---------- generic headings ---------- */
h1,h2,h3{letter-spacing:-.02em}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);color:var(--accent-ink);
  font-weight:600;font-size:13.5px;padding:7px 14px;border-radius:999px;margin-bottom:22px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.sec-head{max-width:620px;margin-bottom:54px}
.sec-tag{color:var(--accent);font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}
h2{font-family:"Fraunces";font-weight:500;font-size:clamp(30px,4.2vw,46px);line-height:1.07}
.sec-head p{color:var(--ink-2);font-size:19px;margin-top:16px;line-height:1.5}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}

.swatch{width:9px;height:9px;border-radius:3px;flex-shrink:0;display:inline-block}
.tnum{font-variant-numeric:tabular-nums}