/* ============================================================
   ViSQ — shared site styles
   Brand: Indigo #4B4BC3 · Mint #9DD9B5 · Hanken Grotesk
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root{
  --indigo-700:#35339A; --indigo-600:#3F3DB2; --indigo-500:#4B4BC3;
  --indigo-400:#6F70CF; --indigo-200:#C3C4EC; --indigo-100:#E7E7F7; --indigo-050:#F3F3FB;
  --mint-600:#5FB88C; --mint-500:#7FCBA3; --mint-400:#9DD9B5; --mint-200:#CDECD9; --mint-100:#E6F5EC;
  --sky-500:#6F86C0;
  --ink-900:#14152B; --ink-800:#1F2140; --ink-700:#34365A;
  --slate-500:#63667F; --slate-400:#878AA0; --slate-300:#B9BCCD;
  --line-200:#E4E6EF; --line-100:#EEF0F6; --paper-soft:#F6F7FB; --paper:#FFFFFF;
  --gradient-brand:linear-gradient(142deg,#9DD9B5 0%,#6F86C0 48%,#4B4BC3 100%);
  --gradient-brand-soft:linear-gradient(142deg,#E6F5EC 0%,#EEF1FB 55%,#E7E7F7 100%);
  --font:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --container:1200px;
  --nav-h:96px;
  --shadow-sm:0 1px 2px rgba(20,21,43,.06),0 4px 14px rgba(20,21,43,.05);
  --shadow-md:0 8px 30px rgba(20,21,43,.09);
  --shadow-lg:0 24px 60px rgba(20,21,43,.14);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--font); color:var(--ink-700);
  background:var(--paper); line-height:1.6; font-size:1.0625rem;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{color:var(--ink-900); line-height:1.12; margin:0; letter-spacing:-.02em; font-weight:700; text-wrap:balance;}
p{margin:0; text-wrap:pretty;}

.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 clamp(20px,5vw,48px);}
.section{padding:clamp(60px,7.5vw,104px) 0;}
.section--tint{background:var(--paper-soft);}
.section--dark{background:var(--ink-900); color:#C3C6DA;}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.8125rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--indigo-500); margin-bottom:1.1rem;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--gradient-brand); border-radius:2px;}
.section--dark .eyebrow{color:var(--mint-400);}

.h-display{font-size:clamp(2rem,1.2rem+3.2vw,3.15rem); font-weight:800; line-height:1.06;}
.h-section{font-size:clamp(1.85rem,3vw,2.65rem); font-weight:700; line-height:1.1; letter-spacing:-.02em;}
.lead{font-size:clamp(1.05rem,1rem+.4vw,1.3rem); color:var(--slate-500); line-height:1.55;}
.section--dark .lead{color:#A9AECB;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font); font-weight:600; font-size:1rem; line-height:1;
  padding:.95em 1.7em; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn--primary{background:var(--indigo-500); color:#fff; box-shadow:0 8px 24px rgba(75,75,195,.28);}
.btn--primary:hover{background:var(--indigo-600); transform:translateY(-2px); box-shadow:0 14px 32px rgba(75,75,195,.34);}
.btn--ghost{background:transparent; color:var(--ink-900); border-color:var(--line-200);}
.btn--ghost:hover{border-color:var(--indigo-400); color:var(--indigo-600); transform:translateY(-2px);}
.btn--light{background:#fff; color:var(--indigo-600);}
.btn--light:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,.22);}
.btn--outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.4);}
.btn--outline-light:hover{border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-2px);}
.btn .arrow{transition:transform .2s ease;}
.btn:hover .arrow{transform:translateX(3px);}

/* ============================ NAV ============================ */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line-100); transition:box-shadow .3s ease, background .3s ease;
}
.nav.is-scrolled{box-shadow:0 6px 24px rgba(20,21,43,.07); background:rgba(255,255,255,.96);}
.nav__inner{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); transition:height .3s cubic-bezier(.4,0,.2,1);}
.nav.is-scrolled .nav__inner{height:70px;}
.nav__logo{display:flex; align-items:center;}
.nav__logo img{height:46px; width:auto; transition:height .3s cubic-bezier(.4,0,.2,1);}
.nav.is-scrolled .nav__logo img{height:36px;}
.nav__links{display:flex; align-items:center; gap:.5rem; list-style:none; margin:0; padding:0;}
.nav__links a{
  display:inline-block; padding:.55rem .95rem; border-radius:999px;
  font-weight:500; font-size:.98rem; color:var(--ink-700); transition:color .15s, background .15s;
}
.nav__links a:hover{color:var(--indigo-600); background:var(--indigo-050);}
.nav__links a.is-active{color:var(--indigo-600); background:var(--indigo-050); font-weight:600;}
.nav__cta{margin-left:.5rem;}
.nav__links .nav__cta a.btn--primary,
.nav__cta a.btn--primary{color:#fff; background:var(--indigo-500);}
.nav__links .nav__cta a.btn--primary:hover,
.nav__cta a.btn--primary:hover{color:#fff; background:var(--indigo-600);}
.nav__toggle{
  display:none; width:44px; height:44px; border:none; background:transparent; cursor:pointer;
  align-items:center; justify-content:center; border-radius:12px;
}
.nav__toggle span{position:relative; width:22px; height:2px; background:var(--ink-900); border-radius:2px; transition:.25s;}
.nav__toggle span::before,.nav__toggle span::after{content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink-900); border-radius:2px; transition:.25s;}
.nav__toggle span::before{top:-7px;} .nav__toggle span::after{top:7px;}
body.nav-open .nav__toggle span{background:transparent;}
body.nav-open .nav__toggle span::before{top:0; transform:rotate(45deg);}
body.nav-open .nav__toggle span::after{top:0; transform:rotate(-45deg);}

@media (max-width:880px){
  .nav__toggle{display:inline-flex;}
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:.25rem;
    background:#fff; padding:16px clamp(20px,5vw,48px) 28px; border-bottom:1px solid var(--line-100);
    box-shadow:var(--shadow-md); transform:translateY(-8px); opacity:0; pointer-events:none; transition:.22s;
  }
  .nav.is-scrolled .nav__links{inset:70px 0 auto 0;}
  body.nav-open .nav__links{transform:translateY(0); opacity:1; pointer-events:auto;}
  .nav__links a{padding:.85rem 1rem; font-size:1.05rem;}
  .nav__cta{margin:.5rem 0 0;}
  .nav__cta a{width:100%;}
}

/* ============================ FOOTER ============================ */
.footer{background:var(--ink-900); color:#9497B4; padding:clamp(56px,7vw,84px) 0 28px;}
.footer__top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px;}
.footer__logo img{height:40px; width:auto; margin-bottom:20px;}
.footer__blurb{max-width:34ch; color:#8A8DAC; font-size:1rem;}
.footer h4{color:#fff; font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1.1rem; font-weight:700;}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem;}
.footer a:hover{color:#fff;}
.footer__bottom{
  margin-top:clamp(40px,6vw,64px); padding-top:24px; border-top:1px solid rgba(255,255,255,.09);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.9rem; color:#767995;
}
.footer__bottom a{color:#A9AECB;} .footer__bottom a:hover{color:#fff;}
@media (max-width:760px){ .footer__top{grid-template-columns:1fr 1fr; gap:36px;} .footer__brand{grid-column:1/-1;} }
@media (max-width:480px){ .footer__top{grid-template-columns:1fr;} }

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} }