/* =========================================================
   VALIANT DIGITAL — DESIGN TOKENS
   Source of truth for the system. Import this before anything else.
   ========================================================= */

@font-face {
  font-family: "FT Sterling";
  src: url("./fonts/FTSterling-Book.woff2") format("woff2"),
       url("./fonts/FTSterling-Book.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "FT Sterling";
  src: url("./fonts/FTSterling-Medium.woff2") format("woff2"),
       url("./fonts/FTSterling-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "FT Sterling";
  src: url("./fonts/FTSterling-Bold.woff2") format("woff2"),
       url("./fonts/FTSterling-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ---------- BRAND PALETTE ---------- */
  /* Signature gradient stops (used in the conic "sunset" glow) */
  --v-grad-orange: #FD6C1D;
  --v-grad-blue:   #2A56D6;
  --v-grad-purple: #4623B1;

  /* Surfaces */
  --v-ink:        rgb(7, 24, 33);     /* page & hero background */
  --v-ink-2:      rgb(10, 29, 47);    /* section fade target    */
  --v-ink-3:      rgb(19, 31, 51);    /* top-of-section fade    */
  --v-button:     rgb(232, 232, 232); /* off-white CTA pill     */
  --v-button-ink: rgb(21, 22, 30);    /* CTA label              */

  /* Accents */
  --v-accent:        #FD6C1D;   /* orange overline */
  --v-accent-ring:   rgba(77,123,255,0.49);
  --v-accent-ring-2: rgba(77,123,255,0.14);
  --v-accent-ring-3: rgba(77,123,255,0.04);
  --v-accent-glow:   rgba(78,124,255,0.52);
  --v-accent-hilite: rgba(80,197,255,0.09);

  /* Foreground — always on dark ink */
  --v-fg:      rgb(255,255,255);
  --v-fg-80:   rgba(255,255,255,0.80);
  --v-fg-60:   rgba(255,255,255,0.60);
  --v-fg-40:   rgba(255,255,255,0.40);
  --v-fg-20:   rgba(255,255,255,0.20);
  --v-fg-10:   rgba(255,255,255,0.10);
  --v-fg-04:   rgba(255,255,255,0.04);

  /* Glass fills */
  --v-glass:      rgba(255,255,255,0.10);
  --v-glass-soft: rgba(255,255,255,0.04);
  --v-glass-lift: rgba(255,255,255,0.20);

  /* Overlines & stamps */
  --v-overline-bg: rgba(0,0,0,0.50);

  /* ---------- TYPE ---------- */
  --v-font: "FT Sterling", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --v-track-tight: -0.020em;   /* all headlines & body */
  --v-track-wide:   0.050em;   /* overlines            */

  /* Scale (from Figma) */
  --v-t-display:  56px;   /* hero headline          */
  --v-t-h1:       52px;   /* hero / page title      */
  --v-t-h2:       48px;   /* section headline       */
  --v-t-h3:       40px;   /* sub-section            */
  --v-t-h4:       32px;   /* story-telling / card   */
  --v-t-h5:       24px;   /* tile title             */
  --v-t-h6:       18px;   /* small label            */
  --v-t-body:     16px;   /* default body           */
  --v-t-body-s:   15px;   /* secondary body         */
  --v-t-meta:     14px;   /* eyebrow / meta         */

  /* Line-heights */
  --v-lh-tight:   1.00;
  --v-lh-snug:    1.10;
  --v-lh-normal:  1.30;
  --v-lh-body:    1.47; /* 22/15 */
  --v-lh-body-lg: 1.50; /* 24/16 */

  /* ---------- RADII ---------- */
  --v-r-xs:  4px;
  --v-r-sm:  5px;
  --v-r-md:  8px;
  --v-r-lg:  24px;  /* video & video-frame */
  --v-r-pill: 1000px;

  /* ---------- SPACING (8pt-ish, matches Figma usage) ---------- */
  --v-s-1:  4px;
  --v-s-2:  8px;
  --v-s-3:  12px;
  --v-s-4:  16px;
  --v-s-5:  24px;
  --v-s-6:  32px;
  --v-s-7:  48px;
  --v-s-8:  64px;
  --v-s-9:  80px;
  --v-s-10: 112px;

  /* ---------- EFFECTS ---------- */
  --v-blur:        blur(84px);
  --v-border:      1px solid var(--v-fg-10);
  --v-border-soft: 1px solid rgba(255,255,255,0.15);

  /* CTA shadow: white-bloom + blue-lift + cyan-spill */
  --v-shadow-cta:
    0 4px 10px  0 rgba(255,255,255,0.43),
    0 10px 40px 0 var(--v-accent-glow),
    0 4px 30px  0 var(--v-accent-hilite);

  /* Tile drop-shadow — very long, subtle, stacked */
  --v-shadow-tile:
    21px  29px  36px 0 rgba(0,0,0,0.26),
    47px  66px  49px 0 rgba(0,0,0,0.15),
    83px  118px 58px 0 rgba(0,0,0,0.04),
    130px 184px 63px 0 rgba(0,0,0,0.01);

  /* ---------- GRADIENTS ---------- */
  --v-conic:
    conic-gradient(from 0deg,
      var(--v-grad-orange) 0%,
      var(--v-grad-blue)  47%,
      var(--v-grad-purple) 94%);

  --v-conic-soft:
    conic-gradient(from 0deg,
      rgba(253,108,29,0.50) 0%,
      rgba(42,86,214,0.50) 47%,
      rgba(70,35,177,0.50) 94%);

  --v-conic-cool:
    conic-gradient(from 0deg,
      rgba(42,86,214,0.30) 0%,
      rgba(70,35,177,0.30) 94%);

  --v-radial-section:
    radial-gradient(circle at 50% 50%,
      rgba(42,86,214,0.12) 0%,
      rgba(70,35,177,0.12) 46%,
      rgba(7,24,33,0.12) 100%);

  --v-fade-top:
    linear-gradient(var(--v-ink-3) 0%,
      rgba(10,29,47,0.73) 56%,
      rgba(10,29,47,0) 100%);
  --v-fade-bottom:
    linear-gradient(rgba(10,29,47,0) 0%,
      rgba(10,29,47,0.73) 44%,
      var(--v-ink-2) 100%);
}

/* ---------- BASE ---------- */
html, body {
  margin: 0;
  padding: 0;
  /* clip stray horizontal overflow (decorative glows etc.) without breaking
     sticky positioning the way overflow:hidden would */
  overflow-x: clip;
  max-width: 100%;
  background: var(--v-ink);
  color: var(--v-fg);
  font-family: var(--v-font);
  font-weight: 500;
  letter-spacing: var(--v-track-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }

/* =========================================================
   TYPOGRAPHY UTILITIES
   ========================================================= */
.v-display { font-size: var(--v-t-display); line-height: var(--v-lh-snug); font-weight: 500; letter-spacing: var(--v-track-tight); }
.v-h1 { font-size: var(--v-t-h1); line-height: 1.15; font-weight: 500; letter-spacing: var(--v-track-tight); }
.v-h2 { font-size: var(--v-t-h2); line-height: 1.083; font-weight: 500; letter-spacing: var(--v-track-tight); }
.v-h3 { font-size: var(--v-t-h3); line-height: 1.10; font-weight: 500; letter-spacing: var(--v-track-tight); }
.v-h4 { font-size: var(--v-t-h4); line-height: var(--v-lh-tight); font-weight: 500; letter-spacing: var(--v-track-tight); }
.v-h5 { font-size: var(--v-t-h5); line-height: var(--v-lh-tight); font-weight: 500; letter-spacing: var(--v-track-tight); }
.v-h6 { font-size: var(--v-t-h6); line-height: 1.44; font-weight: 500; letter-spacing: var(--v-track-tight); }
.v-body   { font-size: var(--v-t-body);   line-height: var(--v-lh-body-lg); font-weight: 500; letter-spacing: var(--v-track-tight); }
.v-body-s { font-size: var(--v-t-body-s); line-height: var(--v-lh-body);    font-weight: 400; letter-spacing: var(--v-track-tight); }
.v-meta   { font-size: var(--v-t-meta);   line-height: var(--v-lh-tight);   font-weight: 400; }
.v-dim    { color: var(--v-fg-60); }
.v-dim-80 { color: var(--v-fg-80); }

/* Overline — uppercase sparing, letterspaced, orange */
.v-overline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: var(--v-overline-bg);
  border-radius: var(--v-r-sm);
  font-size: var(--v-t-meta);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--v-track-wide);
  color: var(--v-accent);
  text-transform: lowercase;
}

/* =========================================================
   SIGNATURE CTA — Triple-ring Pill Button
   Usage: <a class="v-cta"><span>Get started</span><svg .../></a>
   ========================================================= */
.v-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: var(--v-r-pill);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: transform .25s ease;
  text-decoration: none;
}
.v-cta > .v-cta__r2 {
  display: flex; padding: 0; border-radius: inherit;
  border: 1px solid transparent;
}
.v-cta > .v-cta__r2 > .v-cta__r3 {
  display: flex; padding: 0; border-radius: inherit;
  border: 1px solid transparent;
}
/* Sunset halo — soft blurred conic-gradient glow behind the pill,
   breathes in opacity + scale. Replaces the old triple-ring borders. */
.v-cta::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  background: var(--v-conic);
  filter: blur(20px);
  opacity: 0.45;
  z-index: -1;
  pointer-events: none;
  transform-origin: center;
  animation: v-cta-halo 3.6s ease-in-out infinite;
  will-change: opacity, transform;
}
.v-cta:hover { transform: translateY(-1px); }
.v-cta:hover::before { opacity: 0.65; }

@keyframes v-cta-halo {
  0%, 100% { opacity: 0.35; transform: scale(0.98); }
  50%      { opacity: 0.55; transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .v-cta::before { animation: none; opacity: 0.5; transform: none; }
}
.v-cta__core {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 32px;
  min-height: 52px;
  border-radius: 35px;
  background: var(--v-button);
  color: var(--v-button-ink);
  font-family: var(--v-font);
  font-weight: 700;
  font-size: var(--v-t-body);
  line-height: 24px;
  white-space: nowrap;
  box-shadow: var(--v-shadow-cta);
}
.v-cta:hover { transform: translateY(-1px); }
.v-cta:active { transform: translateY(0); }

/* Ghost variant — white pill on dark backgrounds, small.
   Suppresses the signature sunset-halo glow so it reads
   as a secondary action. */
.v-cta--ghost,
.v-cta--ghost > .v-cta__r2,
.v-cta--ghost > .v-cta__r2 > .v-cta__r3 {
  border-color: transparent !important;
  animation: none !important;
}
.v-cta--ghost::before { display: none; }
.v-cta--ghost .v-cta__core {
  background: transparent;
  color: var(--v-fg);
  border: 1px solid var(--v-fg-20);
  box-shadow: none;
}
.v-cta--ghost:hover .v-cta__core {
  border-color: var(--v-fg-40);
  background: rgba(255,255,255,0.04);
}

/* =========================================================
   GLASS SURFACES
   ========================================================= */
.v-glass {
  background: var(--v-glass);
  border-radius: var(--v-r-xs);
  backdrop-filter: var(--v-blur);
  -webkit-backdrop-filter: var(--v-blur);
}
.v-glass--rounded { border-radius: var(--v-r-md); }
.v-glass--ring    { border: var(--v-border-soft); }

/* =========================================================
   CONIC GLOW (atmospheric background)
   Drop inside a relatively-positioned section to add mood.
   ========================================================= */
.v-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--v-conic-cool);
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}
.v-glow--hot   { background: var(--v-conic-soft); }
.v-glow--full  { background: var(--v-conic); opacity: .7; }

/* =========================================================
   PILL BADGES — star / google review style
   ========================================================= */
.v-pill {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 8px 16px 8px 12px;
  border-radius: 905px;
  background: linear-gradient(rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 100%);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: inset 0 0 8px rgba(255,255,255,0.10);
  font-size: var(--v-t-meta);
}

/* Verified-review stamp */
.v-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: var(--v-overline-bg);
  border-radius: var(--v-r-xs);
  font-size: var(--v-t-meta);
  color: var(--v-fg);
}

/* =========================================================
   ICONS
   ========================================================= */
.v-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.v-icon--check    { -webkit-mask-image: url("./icons/check.svg");         mask-image: url("./icons/check.svg"); }
.v-icon--contract { -webkit-mask-image: url("./icons/contract_edit.svg"); mask-image: url("./icons/contract_edit.svg"); }
.v-icon--verified { -webkit-mask-image: url("./icons/beenhere.svg");      mask-image: url("./icons/beenhere.svg"); }
.v-icon--flag     { -webkit-mask-image: url("./icons/mountain_flag.svg"); mask-image: url("./icons/mountain_flag.svg"); }
.v-icon--tactic   { -webkit-mask-image: url("./icons/tactic.svg");        mask-image: url("./icons/tactic.svg"); }

/* =========================================================
   LOGO — re-drawn as SVG, matches the Figma word-mark proportions
   ========================================================= */
.v-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--v-fg); }
.v-logo__mark {
  display: inline-flex;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--v-conic);
  position: relative;
}
.v-logo__mark::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 4px;
  background: var(--v-ink);
}
.v-logo__mark::before {
  content: "";
  position: absolute; inset: 8px;
  border-radius: 2px;
  background: var(--v-fg);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.v-logo__word {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
}