/* ===== Tap to Enterprise — design tokens & base ===== */
:root{
  --navy:#1F3A5F;
  --navy-deep:#16293f;
  --indigo:#3D2B8E;
  --teal:#0E7C6B;
  --teal-bright:#13987f;

  --ink:#16243a;
  --ink-soft:#475569;
  --ink-faint:#7c8a9c;

  --base:#FBFAF8;        /* warm white page */
  --card:#ffffff;
  --tint:#F3F1EC;        /* warm panel */
  --tint-navy:#EEF2F7;   /* cool panel */
  --line:#E7E3DB;
  --line-cool:#dde5ee;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:34px;

  --shadow-sm:0 1px 2px rgba(22,41,63,.05), 0 2px 8px rgba(22,41,63,.04);
  --shadow-md:0 4px 14px rgba(22,41,63,.07), 0 18px 40px rgba(22,41,63,.07);
  --shadow-lg:0 10px 30px rgba(22,41,63,.10), 0 40px 80px rgba(22,41,63,.10);

  --maxw:1180px;
  --gutter:clamp(20px,5vw,64px);

  --sans:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --serif:"Newsreader", Georgia, serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--base);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:color-mix(in oklab, var(--teal) 22%, transparent);}

h1,h2,h3,h4{font-family:var(--display,var(--sans));line-height:1.06;letter-spacing:-.022em;font-weight:700;color:var(--ink);text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{display:block;max-width:100%}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,9vw,128px)}

/* serif italic accent */
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}

/* eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);
}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:15px;letter-spacing:-.01em;
  padding:14px 22px;border-radius:999px;
  transition:transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal);color:#fff;box-shadow:0 6px 18px rgba(14,124,107,.28)}
.btn-primary:hover{background:var(--teal-bright);box-shadow:0 10px 26px rgba(14,124,107,.34);transform:translateY(-1px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-deep);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-cool)}
.btn-ghost:hover{border-color:var(--navy);background:#fff}
.btn-lg{padding:17px 30px;font-size:16px}
.arrow{transition:transform .2s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* reveal: content is always fully visible. A subtle transform-only entrance
   plays when scrolled into view; even if the runtime stalls the animation
   clock, opacity is never gated so nothing can be left hidden/unreadable. */
.reveal{opacity:1;transform:none}
.reveal.in{animation:revealIn .65s cubic-bezier(.2,.7,.2,1)}
@keyframes revealIn{from{transform:translateY(16px)}to{transform:none}}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.in{animation:none;transform:none}
  html{scroll-behavior:auto}
}