/* =========================================================
  TYPOGRAPHY ENGINE — font only (no layout, no color)
  File: assets/css/typography-engine.css
========================================================= */

:root{
  /* Font stacks */
  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);

  /* Fluid type scale */
  --fs-0: clamp(0.95rem, 0.90rem + 0.20vw, 1.05rem); /* body */
  --fs-1: clamp(1.05rem, 1.00rem + 0.35vw, 1.25rem); /* lead */
  --fs-2: clamp(1.25rem, 1.10rem + 0.85vw, 1.65rem); /* h5 */
  --fs-3: clamp(1.45rem, 1.25rem + 1.10vw, 1.95rem); /* h4 */
  --fs-4: clamp(1.75rem, 1.45rem + 1.60vw, 2.35rem); /* h3 */
  --fs-5: clamp(1.95rem, 1.55rem + 1.70vw, 2.70rem); /* h2 (smaller) */
  --fs-6: clamp(2.75rem, 2.10rem + 3.20vw, 4.10rem); /* h1 (bigger) */

  /* Line heights */
  --lh-tight: 1.08;
  --lh-snug:  1.18;
  --lh-body:  1.55;

  /* Weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-black:   800;

  /* Tracking */
  --track-tight: -0.02em;
  --track-normal: 0;
  --track-wide:  0.08em;
}

/* =========================================================
  FONT LAB — data-font mappings (font only)
  NOTE: these map to fonts you already load in <link href=...googleapis...>
========================================================= */

html{ font-family: var(--font-sans); }

/* f1 — Nunito Sans — Calm / Therapy */
html[data-font="f1"]{
  --font-sans: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);
}

/* f6 — Red Hat Display — Authority */
html[data-font="f6"]{
  --font-sans: "Red Hat Display", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);
}

/* f7 — Inter — UI Standard */
html[data-font="f7"]{
  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);
}

/* f8 — DM Sans — Friendly */
html[data-font="f8"]{
  --font-sans: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);
}

/* f10 — Space Grotesk — Distinctive */
html[data-font="f10"]{
  --font-sans: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);
}

/* f11 — Fraunces + Inter — Editorial */
html[data-font="f11"]{
  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
}

/* f12 — Fraunces + DM Sans — Warm */
html[data-font="f12"]{
  --font-sans: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
}

/* Optional: prevent “dead” options from feeling broken (fallback mappings)
   If you keep f2/f3/f4/f5/f9 in the select, map them to something real. */
html[data-font="f2"]{ --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-display: var(--font-sans); }
html[data-font="f3"]{ --font-sans: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-display: var(--font-sans); }
html[data-font="f4"]{ --font-sans: "Red Hat Display", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-display: var(--font-sans); }
html[data-font="f5"]{ --font-sans: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-display: var(--font-sans); }
html[data-font="f9"]{ --font-sans: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-display: var(--font-sans); }

/* =========================================================
  Smoothing (still typography, not layout)
========================================================= */
html{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Base font only (NO color, NO margins) */
body{
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  line-height: var(--lh-body);
}

/* Global headings font only (NO color, NO margins) */
h1,h2,h3,h4,h5{
  font-family: var(--font-display);
  font-weight: var(--w-black);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
}

h1{ font-size: var(--fs-6); }
h2{ font-size: var(--fs-5); }
h3{ font-size: var(--fs-4); line-height: var(--lh-snug); }
h4{ font-size: var(--fs-3); line-height: var(--lh-snug); font-weight: var(--w-bold); }
h5{ font-size: var(--fs-2); line-height: var(--lh-snug); font-weight: var(--w-bold); }

/* “Lead” font only */
.lead{
  font-size: var(--fs-1);
  line-height: 1.6;
}

/* Pitstop helpers — font only */
.pit-h{
  font-size: var(--fs-4);
  line-height: var(--lh-snug);
  font-weight: var(--w-black);
  letter-spacing: var(--track-tight);
}

.pit-kicker{
  font-size: 0.78rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.pit-p{
  line-height: var(--lh-body);
}

.pit-ul{
  line-height: var(--lh-body);
}

.display-5{
  font-size: var(--fs-6);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}

.pit-impact-line{
  font-size: clamp(1.15rem, 1.2vw, 1.45rem);
  line-height: 1.65;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.82);
  max-width: 60ch;
  margin-top: 1.5rem;
}

.el-center{
  text-align: center;
}

/* =========================================================
  TYPE APPLICATION — extra bindings (font only)
  - helps your sigil + pro section inherit the tokens
========================================================= */

.pit-h,
.sigil-title,
.pro-heading{
  font-family: var(--font-display);
  letter-spacing: var(--track-tight);
}

.masterp,
.pit-p,
.sigil-subtext,
.pro-lead{
  font-family: var(--font-sans);
}

/* Kicker tracking (font only) */
.sigil-kicker,
.pro-kicker{
  letter-spacing: var(--track-wide);
}

/* =========================================================
  Gradient text utilities (kept as-is)
========================================================= */
.pit-multiblugren{
  background: linear-gradient(90deg,#8A7EB1 0%,#2c4eff 25%,#4facfe 50%,#56f0c1 75%,#00ff88 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  display:inline-block;
  filter: drop-shadow(0 2px 10px rgba(86, 240, 193, 0.2));
}

.pit-multipakegreblu{
  background: linear-gradient(90deg,#4facfe 0%,#56f0c1 45%,#00ff88 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  display:inline-block;
  filter: drop-shadow(0 4px 12px rgba(0, 255, 136, 0.25));
}

.pit-multishdeelec{
  background: linear-gradient(90deg,#D1E9FF 0%,#A3D2FF 30%,#4facfe 65%,#2c4eff 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  display:inline-block;
  filter: drop-shadow(0 2px 8px rgba(163, 210, 255, 0.3));
}

.pit-multipubleg{
  background: linear-gradient(270deg,#D1E9FF 0%,#A3D2FF 30%,#4facfe 65%,#2c4eff 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  display:inline-block;
  filter: drop-shadow(0 2px 8px rgba(44, 78, 255, 0.25));
}

.pit-multiglubale{
  background: linear-gradient(90deg,#4facfe 0%,#48ffc9 35%,#56f0c1 65%,#00ff88 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  display:inline-block;
  filter: drop-shadow(0 2px 12px rgba(0, 255, 136, 0.25));
}

/* Mobile tuning — still typography only */
@media (max-width: 576px){
  :root{
    --lh-tight: 1.10;
    --lh-snug:  1.20;
  }
}

/* =========================================================
   PRO SECTION — Impact Typography Enhancement
   Scoped: .pro-section only
   No global overrides
========================================================= */

.pro-section{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* --- soft atmospheric lift behind text --- */
.pro-section::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(60% 40% at 50% 20%, rgba(157,150,239,0.14), transparent 60%),
    radial-gradient(50% 35% at 50% 80%, rgba(124,240,200,0.10), transparent 65%);
  filter: blur(22px);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

/* ensure content sits above glow */
.pro-section > *{
  position: relative;
  z-index: 2;
}

/* =========================================================
   LOGO (centered, calm presence)
========================================================= */

.pro-section .bv-quote-logo{
  display: flex;
  justify-content: center;
  align-items: center;
}

.pro-section .bv-quote-logo img{
  width: clamp(120px, 16vw, 150px);
  height: auto;
  border-radius: 16px;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.12);
}

/* =========================================================
   HEADLINE (authority + clarity)
========================================================= */

.pro-section h3{
  max-width: 22ch;
  margin-inline: auto;
  text-align: center;
}

/* =========================================================
   HIGH-IMPACT STATEMENT LINE
========================================================= */

.pro-section .pit-impact-line{
  position: relative;
  margin-inline: auto;
  text-align: center;
  max-width: 58ch;

  /* typographic authority */
  font-weight: 500;
  letter-spacing: 0.01em;

  /* visual lift */
  color: rgba(255,255,255,0.88);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.45),
    0 12px 40px rgba(0,0,0,0.35);
}

/* sentence rhythm */
.pro-section .pit-impact-line span{
  text-shadow:
    0 0 18px rgba(157,150,239,0.35);
}

/* =========================================================
   DIVIDER (quiet confidence)
========================================================= */

.pro-section .divider{
  width: 72px;
  height: 3px;
  margin: 1.75rem auto 1.25rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(79,108,255,0.9),
    rgba(124,240,200,0.9)
  );
  opacity: 0.85;
}

/* =========================================================
   OPTIONAL MICRO-MOTION (safe, subtle)
========================================================= */

@media (prefers-reduced-motion: no-preference){
  .pro-section .pit-impact-line{
    animation: proSectionBreath 6s ease-in-out infinite;
  }
}

@keyframes proSectionBreath{
  0%,100%{ opacity: 0.90; }
  50%{ opacity: 1; }
}

/* =========================================================
   MOBILE TUNING
========================================================= */

@media (max-width: 576px){
  .pro-section h3{
    max-width: 100%;
  }

  .pro-section .pit-impact-line{
    max-width: 100%;
  }
}

/* =========================================================
   PRO SECTION — Typography only (typography-engine.css)
========================================================= */

.pro-kicker{
  font-size: 0.78rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.pro-heading{
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
}

.pro-lead{
  font-size: var(--fs-1);
  line-height: 1.62;
}