/* Shared tokens + primitives for the three redesign concepts */
:root {
  --navy: #06102c; --navy-deep: #030816; --black: #111111; --ink: #111111;
  --orange: #d17f33; --orange-bright: #f2a548; --orange-strong: #b86a28;
  --blue: #005dd9; --blue-soft: #3d8ed6; --blue-pale: #8fc2e8;
  --muted: #5c6a7d; --line: #e3e8ef; --ice: #f6f9fd; --ice-2: #eaf1fb;
  --font-title: "Satoshi", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-title); letter-spacing: -0.02em; line-height: 1.1; }
ol, ul { margin: 0; padding: 0; list-style: none; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; color: var(--navy); padding: 8px 14px; border-radius: 8px; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--orange-bright); outline-offset: 3px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 999px; font-family: var(--font-title); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.005em; line-height: 1; white-space: nowrap; transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.btn-accent { background: var(--orange); color: #fff; }
.btn-accent:hover { background: var(--orange-bright); color: var(--navy); transform: translateY(-1px); }
.btn-lg { padding: 16px 30px; font-size: 1.02rem; }
.btn-sm { padding: 9px 18px; font-size: .86rem; }
.btn-ghost-light { border: 1.5px solid rgba(255,255,255,.35); color: #fff; }
.btn-ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-ghost-dark { border: 1.5px solid rgba(6,16,44,.2); color: var(--navy); }
.btn-ghost-dark:hover { border-color: var(--navy); background: rgba(6,16,44,.04); }

/* scroll reveal (only when JS is running) */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* soft BLUE fades between light and dark sections (OKLab stops: navy > deep blue > #3D5A99 > #8FA9D6 > #EAF1FB > light) */
.fade-top, .fade-bottom {
  position: relative; isolation: isolate; --fade-h: 200px; --fade-to: #fff;
  --blue-fade: #06102c 0.0%, #0a1636 5.0%, #0f1d41 10.0%, #14234c 15.0%, #192a57 20.0%, #1f3364 25.0%, #263c71 30.0%, #2e467e 35.0%, #35508b 40.0%, #3d5a99 45.0%, #4d69a5 50.0%, #5d79b1 55.0%, #6d89be 60.0%, #7e99ca 65.0%, #8fa9d6 70.0%, #a5bbe0 75.0%, #bccde9 80.0%, #d3dff2 85.0%, #eaf1fb 90.0%, var(--fade-to) 100%;
}
.fade-top::before, .fade-bottom::after { content: ""; position: absolute; left: 0; right: 0; height: var(--fade-h); z-index: -1; pointer-events: none; }
.fade-top::before { top: 0; background: linear-gradient(180deg, var(--blue-fade)); }
.fade-bottom::after { bottom: 0; background: linear-gradient(0deg, var(--blue-fade)); }
@media (max-width: 639px) { .fade-top, .fade-bottom { --fade-h: 140px; } }

/* calendly embed */
.calendly-mount { min-height: 300px; background: #fff; overflow: hidden; }
.calendly-mount iframe { width: 100%; height: 700px; border: 0; display: block; }
.calendly-placeholder { padding: 48px 32px; text-align: center; display: grid; place-items: center; gap: 12px; color: var(--navy); }

/* feature icons: static refined line icons (1.75px) */
.ico svg { width: 100%; height: 100%; }
.ico path, .ico circle, .ico rect { vector-effect: none; }

/* support card face swap (tap/hover/focus shows the detail text) */
.faces { display: grid; }
.faces .face { grid-area: 1 / 1; transition: opacity .35s var(--ease), transform .45s var(--ease), visibility .35s; }
.faces .face.b { opacity: 0; visibility: hidden; transform: translateY(10px); }
.is-back .faces .face.f { opacity: 0; visibility: hidden; transform: translateY(-10px); }
.is-back .faces .face.b { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) {
  .swap:hover .faces .face.f { opacity: 0; visibility: hidden; transform: translateY(-10px); }
  .swap:hover .faces .face.b { opacity: 1; visibility: visible; transform: none; }
}
.swap:focus-visible .faces .face.f { opacity: 0; visibility: hidden; }
.swap:focus-visible .faces .face.b { opacity: 1; visibility: visible; transform: none; }