/* ============================================================
   Xaver Brand System — design tokens + base styles
   Reference var(--xv-*) in components; never hardcode hex.
   Source of truth: .claude/design_handoff_xaver_brand
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");

:root {
  /* Brand colors */
  --xv-navy:      #091435;
  --xv-charcoal:  #241F21;
  --xv-blue:      #8EB8DF;
  --xv-orange:    #F29524;
  --xv-pink:      #F088B2;

  /* Neutral surfaces */
  --xv-paper:     #FFFFFF;
  --xv-mist:      #EDF1F7;

  /* Semantic aliases */
  --xv-bg:        var(--xv-navy);
  --xv-bg-light:  var(--xv-paper);
  --xv-text:      var(--xv-charcoal);
  --xv-text-soft: #5A5358;
  --xv-on-navy:   #FFFFFF;
  --xv-link:      var(--xv-navy);
  --xv-cta:       var(--xv-orange);

  /* Legacy aliases (templates still reference these) */
  --xv-cream:     var(--xv-paper);
  --xv-cream-2:   var(--xv-mist);
  --xv-sky:       var(--xv-blue);
  --xv-navy-deep: #060D24;
  --xv-navy-soft: #0E1C4A;
  --xv-orange-soft: var(--xv-mist);
  --fg-1: var(--xv-charcoal);
  --fg-2: var(--xv-text-soft);
  --fg-3: #8A8490;

  /* Hairlines */
  --xv-line:      rgba(36, 31, 33, .14);
  --xv-line-navy: rgba(255, 255, 255, .16);

  /* Typography */
  --font-display: "Funnel Display", system-ui, sans-serif;
  --font-body:    "Figtree", system-ui, sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(9,20,53,.06), 0 2px 8px rgba(9,20,53,.06);
  --shadow-2: 0 6px 18px -8px rgba(9,20,53,.28);
  --shadow-3: 0 18px 40px -20px rgba(9,20,53,.45);

  /* Motion */
  --ease-standard: cubic-bezier(0.32, 0.08, 0.24, 1);
  --dur-2: 200ms;
}


/* ———————— Typography ———————— */

.xv-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 9vw, 116px);
  line-height: .95;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.xv-display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.xv-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.xv-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.xv-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.xv-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--xv-text-soft);
  display: flex;
  align-items: center;
  gap: 10px;
}

.xv-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

.xv-eyebrow .dot {
  display: none;
}

.xv-lede {
  font-family: var(--font-body);
  font-weight: 330;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
}

.xv-body {
  font-family: var(--font-body);
  font-weight: 330;
  font-size: 16px;
  line-height: 1.6;
}

.xv-stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.02em;
}

.xv-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}


/* ———————— Buttons ———————— */

.xv-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard);
}

.xv-btn--primary {
  background: var(--xv-orange);
  color: #fff;
}
.xv-btn--primary:hover {
  background: #d97f12;
}

.xv-btn--navy {
  background: var(--xv-navy);
  color: #fff;
}
.xv-btn--navy:hover {
  background: #060d24;
}

.xv-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid var(--xv-line-navy);
}
.xv-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.4);
}

.xv-btn--ghost-light {
  background: transparent;
  color: var(--xv-navy);
  border: 1px solid var(--xv-line);
}
.xv-btn--ghost-light:hover {
  background: var(--xv-mist);
}


/* ———————— Cards ———————— */

.xv-card {
  background: var(--xv-paper);
  border: 1px solid var(--xv-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-2) var(--ease-standard);
}
.xv-card:hover {
  box-shadow: var(--shadow-2);
}

.xv-card--navy {
  background: var(--xv-navy);
  border-color: var(--xv-line-navy);
  color: #fff;
}
.xv-card--navy .xv-body {
  color: rgba(255, 255, 255, 0.72);
}
.xv-card--navy .xv-mono {
  color: rgba(255, 255, 255, 0.5);
}


/* ———————— Sections ———————— */

.xv-section--navy {
  background: var(--xv-navy);
  color: #fff;
}

.xv-section--cream {
  background: var(--xv-paper);
  color: var(--xv-charcoal);
}


/* ———————— Service card CTA link ———————— */

.xv-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--xv-orange);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
  text-decoration: none;
  white-space: nowrap;
}
.xv-card-cta:hover {
  color: #d97f12;
}


/* ———————— Nav ———————— */

.xv-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(9, 20, 53, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--xv-line-navy);
  color: #fff;
}
.xv-nav a {
  color: rgba(255, 255, 255, 0.7);
  border-bottom: none;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  transition: color var(--dur-2) var(--ease-standard);
}
.xv-nav a:hover {
  color: #fff;
}
.xv-nav button {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body);
}
.xv-nav button:hover {
  color: #fff;
}
.xv-nav .nav-logo {
  height: 22px;
  width: auto;
  display: block;
}


/* ———————— Footer ———————— */

.xv-footer {
  background: var(--xv-navy);
  color: #fff;
  font-family: var(--font-body);
}
.xv-footer a {
  color: rgba(255, 255, 255, 0.6);
  border-bottom: none;
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-standard);
}
.xv-footer a:hover {
  color: #fff;
}
.xv-footer h3 {
  color: #fff;
}


/* ———————— Recolorable organic shape ———————— */

.xv-shape {
  display: inline-block;
  -webkit-mask: var(--shape) no-repeat center / contain;
          mask: var(--shape) no-repeat center / contain;
  background: var(--shape-color, var(--xv-orange));
}


/* ———————— Pixel-grid texture ———————— */

.xv-pixel-grid {
  background-image:
    linear-gradient(var(--xv-line-navy) 1px, transparent 1px),
    linear-gradient(90deg, var(--xv-line-navy) 1px, transparent 1px);
  background-size: 34px 34px;
}


/* ———————— Focus (accessible) ———————— */

:focus-visible {
  outline: 3px solid rgba(142, 184, 223, .4);
  outline-offset: 2px;
}