/* =====================================================================
   Solarsite — Design system
   Distinct from typical solar sites: warm sunset palette + deep indigo
   typographic hero, bricolage display + inter body, gritty grain.
===================================================================== */

:root {
  --ink: #0d0a17;            /* near-black indigo */
  --ink-2: #1c1432;          /* deep aubergine */
  --paper: #f8f3ea;          /* warm off-white */
  --paper-2: #efe5d3;        /* sand */
  --sun: #ff6b1a;            /* solar orange */
  --sun-deep: #e63b00;       /* sunset deep */
  --sun-glow: #ffb05a;       /* halo */
  --gold: #ffd166;
  --leaf: #2a8a4a;           /* trustworthy green for stats */
  --leaf-2: #194d2a;
  --hairline: rgba(13,10,23,0.12);
  --hairline-light: rgba(255,255,255,0.14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.65; mix-blend-mode: multiply;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

h1, h2, h3, h4, h5 {
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
}
h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: -0.015em; }
em { font-style: italic; }

/* ------------ Layout helpers ------------ */
.section-head {
  max-width: 920px; margin: 0 auto 56px; padding: 0 28px; text-align: center;
  position: relative; z-index: 2;
}
.section-head .kicker {
  display: inline-block; font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sun-deep); padding: 6px 14px; border: 1px solid var(--sun);
  border-radius: 99px; margin-bottom: 18px; font-weight: 600;
}
.section-head h2 em { color: var(--sun-deep); font-style: italic; }
.section-sub {
  margin-top: 18px; font-size: clamp(1rem, 1.4vw, 1.15rem); color: rgba(13,10,23,0.7);
  max-width: 720px; margin-inline: auto;
}
.section-head.light .kicker { color: var(--gold); border-color: var(--gold); }
.section-head.light h2 { color: var(--paper); }
.section-head.light h2 em { color: var(--sun-glow); }
.section-head.light .section-sub { color: rgba(255,255,255,0.75); }

/* ------------ Buttons ------------ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px; border-radius: 99px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  transition: all 0.18s ease; will-change: transform;
}
.btn.primary {
  background: var(--ink); color: var(--paper);
  box-shadow: 0 4px 0 var(--sun-deep), 0 18px 30px -10px rgba(230,59,0,0.45);
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--sun-deep), 0 22px 36px -10px rgba(230,59,0,0.6); }
.btn.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sun-deep); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.small { padding: 12px 20px; font-size: 14px; }
.btn.big { padding: 20px 30px; font-size: 17px; width: 100%; justify-content: center; }
.cta-pill {
  background: var(--sun); color: var(--ink); padding: 11px 20px; border-radius: 99px;
  font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
  transition: all 0.16s ease;
}
.cta-pill:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); }

/* ============ TOP CONTACT BAR ============ */
.topbar {
  background: linear-gradient(90deg, var(--sun-deep) 0%, var(--sun) 100%);
  color: var(--ink); padding: 8px 24px;
  position: relative; z-index: 6;
}
.topbar-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap;
}
.tb-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em;
}
.tb-status .dot-pulse { background: var(--leaf-2); box-shadow: 0 0 0 0 rgba(25,77,42,0.6); }
.topbar-right { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tb-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 99px;
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  background: rgba(13,10,23,0.06); color: var(--ink);
  transition: all 0.14s ease;
}
.tb-link:hover { background: var(--ink); color: var(--paper); }
.tb-link span { font-size: 13px; }
.tb-link--wa { background: #11823b; color: #fff; }
.tb-link--wa:hover { background: #0c5e2a; color: #fff; }
@media (max-width: 760px) {
  .topbar { padding: 7px 16px; }
  .tb-status { font-size: 11.5px; }
  .tb-link { padding: 4px 9px; font-size: 12px; }
  .tb-link--hide-sm { display: none; }
}

/* ============ TICKER ============ */
.ticker {
  position: relative; z-index: 5; background: var(--ink); color: var(--paper);
  padding: 9px 0; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ticker-track {
  display: inline-flex; gap: 38px; white-space: nowrap;
  animation: ticker-scroll 38s linear infinite;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.06em;
}
.ticker-track span { opacity: 0.85; }
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
  background: rgba(248,243,234,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.logo-mark { width: 28px; height: 28px; color: var(--sun); }
.logo-text {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px;
  letter-spacing: -0.03em; font-weight: 700;
}
.logo-text em { color: var(--sun-deep); font-style: italic; }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--ink); opacity: 0.78;
  transition: opacity 0.15s ease;
}
.nav-links a:hover { opacity: 1; }
@media (max-width: 880px) { .nav-links { display: none; } .nav { padding: 12px 18px; } }

/* ============ HERO ============ */
.hero {
  position: relative; min-height: 92vh;
  padding: 90px 32px 80px;
  background: radial-gradient(ellipse at 80% 0%, #ffd28a 0%, #ffae5d 25%, var(--paper) 60%);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse at 50% 60%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 0%, transparent 75%);
  opacity: 0.55;
}
.sun-orb {
  position: absolute; right: -160px; top: -160px;
  width: 620px; height: 620px; pointer-events: none;
  filter: blur(0.5px);
}
.sun-core {
  position: absolute; inset: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff5d6 0%, #ffd166 30%, var(--sun) 60%, var(--sun-deep) 100%);
  box-shadow: 0 0 120px 40px rgba(255,143,30,0.45), 0 0 260px 80px rgba(255,107,26,0.25);
  animation: pulse 5s ease-in-out infinite;
}
.sun-rays {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255,143,30,0.25) 0deg, transparent 14deg,
    rgba(255,143,30,0.25) 30deg, transparent 44deg,
    rgba(255,143,30,0.25) 60deg, transparent 74deg,
    rgba(255,143,30,0.25) 90deg, transparent 104deg,
    rgba(255,143,30,0.25) 120deg, transparent 134deg,
    rgba(255,143,30,0.25) 150deg, transparent 164deg,
    rgba(255,143,30,0.25) 180deg, transparent 194deg,
    rgba(255,143,30,0.25) 210deg, transparent 224deg,
    rgba(255,143,30,0.25) 240deg, transparent 254deg,
    rgba(255,143,30,0.25) 270deg, transparent 284deg,
    rgba(255,143,30,0.25) 300deg, transparent 314deg,
    rgba(255,143,30,0.25) 330deg, transparent 344deg);
  mask: radial-gradient(circle, transparent 50%, #000 51%, #000 100%);
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 51%, #000 100%);
  animation: spin 60s linear infinite;
}
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes spin { to { transform: rotate(360deg); } }

.hero-inner {
  position: relative; z-index: 3; max-width: 1200px; margin: 0 auto; width: 100%;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: 0.06em; padding: 8px 14px;
  background: rgba(13,10,23,0.06); border: 1px solid var(--hairline);
  border-radius: 99px; margin-bottom: 30px;
}
.dot-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--leaf);
  box-shadow: 0 0 0 0 rgba(42,138,74,0.55);
  animation: dot 1.6s ease-out infinite;
}
@keyframes dot {
  0% { box-shadow: 0 0 0 0 rgba(42,138,74,0.55); }
  100% { box-shadow: 0 0 0 14px rgba(42,138,74,0); }
}

.hero-h1 {
  font-size: clamp(2.6rem, 7.2vw, 6.8rem); line-height: 0.95;
  letter-spacing: -0.035em; max-width: 1100px;
}
.hero-h1 .line { display: block; }
.hero-h1 .accent {
  background: linear-gradient(120deg, #1f5d2c 0%, #2a8a4a 45%, #5cb85c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic;
}
.hero-h1 em { font-family: 'Bricolage Grotesque', serif; font-style: italic; color: var(--sun-deep); }
.hero-h1 .hero-h1-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.32em; font-weight: 500;
  letter-spacing: -0.005em;
  margin-top: 14px;
  color: rgba(13,10,23,0.68);
}

.hero-sub {
  margin-top: 28px; max-width: 580px;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: rgba(13,10,23,0.78); line-height: 1.55;
}
.hero-sub strong { color: var(--ink); }

.hero-ctas { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }

.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 30px; margin-top: 70px; padding-top: 30px;
  border-top: 1px dashed var(--hairline); max-width: 920px;
}
.hero-stats > div { display: flex; flex-direction: column; }
.hero-stats strong {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; line-height: 1;
  letter-spacing: -0.025em; color: var(--ink);
}
.hero-stats span {
  font-size: 13px; margin-top: 8px; color: rgba(13,10,23,0.65); letter-spacing: -0.005em;
}
@media (max-width: 720px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .sun-orb { width: 360px; height: 360px; right: -100px; top: -100px; }
}

.scroll-hint {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  width: 24px; height: 38px; border: 2px solid var(--ink); border-radius: 99px;
  display: flex; justify-content: center; padding-top: 8px;
}
.scroll-hint span {
  width: 4px; height: 8px; border-radius: 2px; background: var(--ink);
  animation: scroll-bob 1.6s ease-in-out infinite;
}
@keyframes scroll-bob {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.4; }
}

/* ============ BRANDS MARQUEE ============ */
.brands {
  background: var(--ink); color: var(--paper);
  padding: 30px 0; overflow: hidden; position: relative; z-index: 4;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.brands-label {
  text-align: center; margin-bottom: 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: 0.55;
}
.brands-track {
  display: flex; gap: 36px; white-space: nowrap;
  animation: brand-scroll 26s linear infinite;
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em;
}
.brands-track span { opacity: 0.78; }
.brands-track span:nth-child(even) { opacity: 0.4; font-size: 16px; }
@keyframes brand-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============ WHY ============ */
.why { padding: 120px 32px; max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.why-card {
  background: var(--paper-2); padding: 36px 30px; border-radius: 22px;
  border: 1px solid var(--hairline); position: relative; overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.why-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(13,10,23,0.2); }
.why-card.highlight {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.why-card.highlight h3 { color: var(--sun-glow); }
.why-num {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.16em;
  opacity: 0.5; margin-bottom: 18px;
}
.why-card h3 { margin-bottom: 12px; color: var(--ink); }
.why-card.highlight h3 { color: var(--sun-glow); }
.why-card p { font-size: 15px; line-height: 1.65; color: rgba(13,10,23,0.75); }
.why-card.highlight p { color: rgba(255,255,255,0.78); }
.why-card p em { color: var(--sun-deep); font-style: italic; font-weight: 600; }
.why-card.highlight p em { color: var(--gold); }
@media (max-width: 980px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .why-grid { grid-template-columns: 1fr; } .why { padding: 80px 22px; } }

/* ============ SERVICES ============ */
.services { padding: 100px 32px 120px; max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
.service-tabs {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 42px;
}
.tab {
  padding: 12px 22px; border-radius: 99px; font-size: 15px; font-weight: 500;
  background: var(--paper-2); color: var(--ink);
  border: 1.5px solid transparent; transition: all 0.16s ease;
}
.tab:hover { border-color: var(--hairline); }
.tab.active {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  box-shadow: 0 4px 0 var(--sun-deep);
}

.service-panel {
  display: none; grid-template-columns: 1.4fr 1fr; gap: 50px;
  background: var(--paper-2); border-radius: 30px; padding: 56px;
  border: 1px solid var(--hairline);
}
.service-panel.active { display: grid; animation: fadeUp 0.4s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sp-left h3 { margin-bottom: 18px; max-width: 520px; }
.sp-left p { color: rgba(13,10,23,0.75); line-height: 1.65; font-size: 16px; max-width: 540px; }
.sp-list { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.sp-list li {
  padding: 12px 0 12px 24px; border-bottom: 1px dashed var(--hairline);
  position: relative; font-size: 14.5px;
}
.sp-list li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--sun);
  box-shadow: 0 0 0 4px rgba(255,107,26,0.18);
}
.sp-list strong { color: var(--ink); margin-right: 6px; }

.sp-card {
  background: var(--ink); color: var(--paper); border-radius: 22px;
  padding: 32px 30px; position: relative; height: fit-content;
  box-shadow: 0 30px 70px -30px rgba(13,10,23,0.4);
}
.sp-card-h {
  display: inline-block; padding: 5px 12px; border-radius: 99px;
  background: var(--sun); color: var(--ink); font-size: 11px;
  font-family: 'JetBrains Mono', monospace; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700; margin-bottom: 18px;
}
.sp-card h4 { font-size: 24px; margin-bottom: 14px; color: var(--paper); }
.sp-price {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: 38px; color: var(--gold); letter-spacing: -0.02em; margin-bottom: 22px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
.sp-price sub {
  font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(255,255,255,0.5);
  font-weight: 500; vertical-align: baseline;
}
.sp-price .strike { font-size: 22px; color: rgba(255,255,255,0.4); text-decoration: line-through; font-weight: 500; }
.sp-card ul { list-style: none; margin-bottom: 22px; }
.sp-card ul li {
  padding: 10px 0 10px 22px; position: relative; font-size: 14px; color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sp-card ul li::before {
  content: "✓"; position: absolute; left: 0; color: var(--sun-glow); font-weight: 700;
}
@media (max-width: 880px) {
  .service-panel.active { grid-template-columns: 1fr; padding: 38px 26px; }
  .services { padding: 70px 18px; }
}

/* ============ CALCULATOR ============ */
.calc {
  position: relative; padding: 130px 32px 130px;
  background: var(--ink); color: var(--paper); overflow: hidden;
}
.calc-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 0% 100%, rgba(255,107,26,0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(255,176,90,0.18) 0%, transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 80px);
}
.calc-card {
  max-width: 1180px; margin: 0 auto; position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  background: rgba(255,255,255,0.04); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 28px; overflow: hidden;
}
.calc-controls {
  padding: 50px; border-right: 1px solid rgba(255,255,255,0.08);
}
.calc-field { display: block; margin-bottom: 32px; }
.calc-field > span {
  display: block; font-size: 13px; font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55);
  margin-bottom: 14px;
}
.calc-input {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; background: rgba(255,255,255,0.05);
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.08);
}
.calc-input em {
  font-style: normal; color: var(--gold); font-weight: 700;
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px;
}
.calc-input output {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px;
  font-weight: 700; color: var(--paper); letter-spacing: -0.02em;
  min-width: 90px; text-align: right;
}
.calc-input input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 4px; background: rgba(255,255,255,0.15); border-radius: 99px; outline: none;
}
.calc-input input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sun); border: 3px solid var(--paper);
  box-shadow: 0 4px 14px rgba(255,107,26,0.5); cursor: pointer;
  transition: transform 0.12s ease;
}
.calc-input input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.calc-input input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sun); border: 3px solid var(--paper); cursor: pointer;
}

.calc-segments { display: flex; gap: 6px; flex-wrap: wrap; }
.seg {
  padding: 10px 16px; border-radius: 10px; background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7); font-size: 13.5px; font-weight: 500;
  border: 1px solid rgba(255,255,255,0.06); transition: all 0.15s ease;
}
.seg:hover { background: rgba(255,255,255,0.09); color: var(--paper); }
.seg.active {
  background: var(--sun); color: var(--ink); border-color: var(--sun); font-weight: 600;
}

.calc-output {
  padding: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  background: linear-gradient(180deg, rgba(255,107,26,0.08) 0%, transparent 80%);
}
.calc-stat {
  padding: 22px 24px; border-radius: 16px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
.calc-stat.full { grid-column: 1 / -1; background: rgba(255,209,102,0.08); border-color: rgba(255,209,102,0.2); }
.calc-stat.hero { background: rgba(255,107,26,0.12); border-color: rgba(255,107,26,0.25); }
.cs-label {
  display: block; font-size: 11px; font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55);
  margin-bottom: 10px;
}
.calc-stat strong {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.7rem, 2.5vw, 2.1rem); font-weight: 700;
  color: var(--paper); letter-spacing: -0.025em; display: block;
}
.calc-stat.hero strong { color: var(--sun-glow); }
.calc-stat.full strong { color: var(--gold); }
.calc-stat em {
  display: block; margin-top: 8px; font-style: normal;
  font-size: 12.5px; color: rgba(255,255,255,0.6);
}
.calc-cta { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
@media (max-width: 980px) {
  .calc-card { grid-template-columns: 1fr; }
  .calc-controls, .calc-output { padding: 32px; }
  .calc-controls { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .calc { padding: 80px 18px; }
}

/* ============ AMC ============ */
.amc { padding: 120px 32px; max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
.amc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.amc-card {
  padding: 38px 32px 34px; border-radius: 26px;
  background: var(--paper-2); border: 1px solid var(--hairline);
  position: relative; transition: transform 0.2s ease;
}
.amc-card:hover { transform: translateY(-4px); }
.amc-card.featured {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  box-shadow: 0 30px 80px -30px rgba(13,10,23,0.4);
  transform: scale(1.04);
}
.amc-tag {
  position: absolute; top: -14px; left: 30px;
  background: var(--sun); color: var(--ink); padding: 6px 14px; border-radius: 99px;
  font-size: 11px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700;
}
.amc-card h3 {
  font-size: 22px; margin-bottom: 16px;
  display: flex; gap: 10px; align-items: baseline;
}
.amc-card h3 span {
  font-size: 13px; font-family: 'JetBrains Mono', monospace;
  font-weight: 500; opacity: 0.55; letter-spacing: 0.1em; text-transform: uppercase;
}
.amc-price {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: 40px; letter-spacing: -0.025em; color: var(--sun-deep);
  margin-bottom: 26px;
}
.amc-card.featured .amc-price { color: var(--gold); }
.amc-price sub {
  font-family: 'Inter', sans-serif; font-size: 13px;
  color: rgba(13,10,23,0.55); font-weight: 500; vertical-align: baseline; margin-left: 4px;
}
.amc-card.featured .amc-price sub { color: rgba(255,255,255,0.55); }
.amc-card ul { list-style: none; margin-bottom: 28px; }
.amc-card ul li {
  padding: 10px 0 10px 26px; position: relative; font-size: 14.5px;
  border-bottom: 1px dashed var(--hairline); color: rgba(13,10,23,0.78);
}
.amc-card.featured ul li { color: rgba(255,255,255,0.82); border-bottom-color: rgba(255,255,255,0.08); }
.amc-card ul li::before {
  content: "✓"; position: absolute; left: 0; color: var(--sun); font-weight: 700;
}
.amc-card.featured ul li::before { color: var(--sun-glow); }
.amc-card ul li strong { color: var(--ink); }
.amc-card.featured ul li strong { color: var(--paper); }
.amc-bottom {
  margin-top: 36px; text-align: center; font-size: 14px;
  color: rgba(13,10,23,0.7);
}
.amc-bottom strong { color: var(--ink); }
@media (max-width: 980px) { .amc-grid { grid-template-columns: 1fr; } .amc-card.featured { transform: none; } }

/* ============ STORIES ============ */
.stories { padding: 120px 32px; max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
.story-grid { display: grid; gap: 30px; }
.story {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 0;
  background: var(--paper-2); border-radius: 30px; overflow: hidden;
  border: 1px solid var(--hairline);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.story:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -40px rgba(13,10,23,0.25); }
.story-image { background: linear-gradient(135deg, #ffd28a, #ff7a3d); min-height: 360px; }
.story-image svg { width: 100%; height: 100%; object-fit: cover; }
.story-body { padding: 50px; display: flex; flex-direction: column; gap: 22px; }
.story-meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.story-tag {
  display: inline-block; padding: 6px 14px; border-radius: 99px;
  background: var(--ink); color: var(--paper); font-size: 11px;
  font-family: 'JetBrains Mono', monospace; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 600;
}
.story-loc { font-size: 13px; color: rgba(13,10,23,0.65); font-weight: 500; }
.story h3 {
  font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.2;
  letter-spacing: -0.02em; color: var(--ink);
}
.story-quote {
  font-size: 16px; line-height: 1.65; color: rgba(13,10,23,0.78);
  border-left: 3px solid var(--sun); padding-left: 20px; font-style: italic;
}
.story-author { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.story-avatar {
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 18px;
}
.story-author strong { display: block; font-size: 15px; color: var(--ink); }
.story-author em { font-size: 12.5px; color: rgba(13,10,23,0.65); font-style: normal; }
.story-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: var(--ink); color: var(--paper);
  border-radius: 16px; padding: 18px;
  margin-top: 6px;
}
.story-stats > div { text-align: center; padding: 4px 6px; border-right: 1px solid rgba(255,255,255,0.08); }
.story-stats > div:last-child { border-right: 0; }
.story-stats span {
  display: block; font-size: 10.5px; font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; margin-bottom: 4px;
}
.story-stats strong {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 700;
  color: var(--gold); letter-spacing: -0.02em;
}

@media (max-width: 880px) {
  .story { grid-template-columns: 1fr; }
  .story-body { padding: 32px 26px; }
  .story-image { min-height: 220px; }
}

/* mini wall */
.quote-wall {
  margin-top: 60px; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.qcard {
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: 14px; padding: 20px 22px;
  font-size: 14.5px; line-height: 1.5; font-weight: 500;
}
.qcard em { display: block; margin-top: 8px; font-size: 12px; color: rgba(13,10,23,0.6); font-style: normal; }
@media (max-width: 880px) { .quote-wall { grid-template-columns: 1fr; } }

/* ============ PROCESS ============ */
.process {
  padding: 120px 32px; background: var(--paper-2); position: relative; z-index: 2;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.process-list {
  list-style: none; max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.process-list li {
  padding: 32px 28px; background: var(--paper);
  border-radius: 22px; border: 1px solid var(--hairline);
  position: relative; counter-increment: step;
}
.process-list li span {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 50px; line-height: 1; font-weight: 700;
  color: var(--sun); letter-spacing: -0.04em;
}
.process-list li h4 { font-size: 18px; margin: 14px 0 10px; }
.process-list li p { font-size: 14.5px; line-height: 1.6; color: rgba(13,10,23,0.7); }
@media (max-width: 880px) { .process-list { grid-template-columns: 1fr; } }

/* ============ SUBSIDY ============ */
.subsidy { padding: 120px 32px; max-width: 1280px; margin: 0 auto; }
.subs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.subs-card {
  padding: 30px 26px 28px; background: var(--paper-2);
  border-radius: 20px; border: 1px solid var(--hairline);
  transition: transform 0.2s ease;
}
.subs-card:hover { transform: translateY(-3px); }
.subs-card.highlight {
  background: linear-gradient(160deg, var(--sun) 0%, var(--sun-deep) 100%);
  color: var(--paper); border-color: transparent;
}
.subs-card h4 { font-size: 19px; margin-bottom: 4px; }
.subs-card p { font-size: 13px; color: rgba(13,10,23,0.65); margin-bottom: 18px; }
.subs-card.highlight p { color: rgba(255,255,255,0.85); }
.subs-amount {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: 32px; letter-spacing: -0.025em; color: var(--sun-deep);
}
.subs-card.highlight .subs-amount { color: var(--paper); }
.subs-amount sub {
  display: block; font-family: 'Inter', sans-serif; font-size: 11px;
  color: rgba(13,10,23,0.55); font-weight: 500; vertical-align: baseline;
  margin-top: 4px; text-transform: uppercase; letter-spacing: 0.08em;
}
.subs-card.highlight .subs-amount sub { color: rgba(255,255,255,0.7); }
.subs-note {
  margin-top: 38px; padding: 24px 28px; background: var(--ink); color: var(--paper);
  border-radius: 16px; font-size: 14.5px; line-height: 1.65;
}
.subs-note strong { color: var(--gold); }
@media (max-width: 880px) { .subs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .subs-grid { grid-template-columns: 1fr; } }

/* ============ COVERAGE ============ */
.coverage { padding: 100px 32px 120px; max-width: 1280px; margin: 0 auto; }

/* big tally headline */
.coverage-tally {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center; gap: 24px;
  padding: 40px 32px; margin-bottom: 60px;
  background: var(--ink); color: var(--paper);
  border-radius: 26px;
  box-shadow: 0 30px 80px -40px rgba(13,10,23,0.4);
}
.coverage-tally > div:not(.tally-divider) {
  display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center;
}
.tally-num {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1;
  color: var(--gold); letter-spacing: -0.04em;
}
.tally-num small {
  font-family: 'Inter', sans-serif; font-size: 0.45em; font-weight: 600;
  color: var(--sun-glow); margin-left: 4px; vertical-align: 0.25em;
}
.tally-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.tally-divider {
  width: 1px; height: 60px; background: rgba(255,255,255,0.14);
  align-self: center;
}

.coverage-h3 {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink); opacity: 0.65;
  margin-bottom: 22px;
}

.cov-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.cov-state {
  padding: 30px 28px; background: var(--paper-2); border: 1px solid var(--hairline);
  border-radius: 18px; transition: all 0.18s ease; position: relative;
}
.cov-state:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(13,10,23,0.18);
}
.cov-state.cov-direct {
  background: linear-gradient(160deg, #fff5e0 0%, var(--paper-2) 100%);
  border-color: rgba(255,107,26,0.25);
}
.cov-tag {
  display: inline-block; padding: 4px 10px; border-radius: 99px;
  background: var(--sun); color: var(--ink);
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  margin-bottom: 12px;
}
.cov-state strong {
  display: block; font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 26px; letter-spacing: -0.025em; color: var(--ink); margin-bottom: 4px;
}
.cov-state span {
  display: block; font-size: 13.5px;
  font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em;
  color: var(--sun-deep); font-weight: 600; margin-bottom: 12px;
}
.cov-state em {
  display: block; font-size: 13px; color: rgba(13,10,23,0.65);
  font-style: normal; line-height: 1.5;
}

/* channel partner block */
.coverage-partners {
  margin-top: 70px; padding: 50px 44px 44px;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(255,107,26,0.08) 0%, transparent 50%),
    var(--paper-2);
  border: 1.5px dashed var(--hairline);
}
.cp-head { max-width: 760px; margin-bottom: 32px; }
.cp-head .kicker {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sun-deep); padding: 5px 12px; border: 1px solid var(--sun);
  border-radius: 99px; margin-bottom: 14px; font-weight: 600;
}
.cp-head h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 14px; line-height: 1.2;
}
.cp-head h3 em { color: var(--sun-deep); font-style: italic; }
.cp-head p {
  font-size: 15px; line-height: 1.65; color: rgba(13,10,23,0.75);
}
.cp-head p strong { color: var(--ink); }

.cp-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.cp-cell {
  padding: 22px 20px; background: var(--paper);
  border: 1px solid var(--hairline); border-radius: 14px;
  transition: all 0.18s ease;
}
.cp-cell:hover { border-color: var(--sun); transform: translateY(-2px); }
.cp-cell > span {
  display: inline-block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px; color: var(--sun-deep); font-weight: 700;
  line-height: 1; margin-bottom: 10px;
}
.cp-cell strong {
  display: block; font-size: 15.5px;
  font-family: 'Bricolage Grotesque', sans-serif;
  letter-spacing: -0.015em; color: var(--ink); margin-bottom: 6px;
}
.cp-cell em {
  display: block; font-style: normal;
  font-size: 12.5px; line-height: 1.5;
  color: rgba(13,10,23,0.65);
}

@media (max-width: 980px) {
  .coverage-tally {
    grid-template-columns: 1fr 1fr;
    gap: 28px 16px;
    padding: 32px 24px;
  }
  .tally-divider { display: none; }
  .cov-grid { grid-template-columns: 1fr; }
  .cp-grid { grid-template-columns: 1fr 1fr; }
  .coverage-partners { padding: 36px 24px; }
}
@media (max-width: 540px) {
  .coverage-tally { grid-template-columns: 1fr; }
  .cp-grid { grid-template-columns: 1fr; }
}

/* ============ NAV: CTA group + "For OEMs" highlight pill ============ */
.nav-cta-group {
  display: flex; align-items: center; gap: 10px;
}
.oem-nav-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px 8px 11px; border-radius: 99px;
  background: linear-gradient(135deg, var(--sun-deep) 0%, var(--sun) 100%);
  color: var(--paper); font-weight: 600; letter-spacing: -0.01em;
  border: 1.5px solid var(--sun-deep);
  box-shadow: 0 4px 0 #b32d00, 0 12px 28px -10px rgba(230,59,0,0.4);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  position: relative;
}
.oem-nav-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #b32d00, 0 16px 32px -10px rgba(230,59,0,0.5);
}
.oem-nav-pill:active { transform: translateY(2px); box-shadow: 0 1px 0 #b32d00; }
.oem-pill-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(255,209,102,0.6);
  animation: oem-pulse 1.8s ease-out infinite;
}
@keyframes oem-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,209,102,0.6); }
  100% { box-shadow: 0 0 0 12px rgba(255,209,102,0); }
}
.oem-pill-text {
  display: inline-flex; flex-direction: column; line-height: 1.1;
  font-size: 13px;
}
.oem-pill-text small {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 500; color: rgba(255,255,255,0.85);
  margin-top: 2px;
}
.oem-pill-arrow {
  font-size: 14px; line-height: 1;
  transition: transform 0.16s ease;
}
.oem-nav-pill:hover .oem-pill-arrow { transform: translate(2px, -2px); }
.oem-nav-pill.is-active {
  background: var(--ink); border-color: var(--ink);
  box-shadow: 0 4px 0 var(--sun-deep);
}
.oem-nav-pill.is-active .oem-pill-text small { color: var(--gold); }
.oem-nav-pill.is-active .oem-pill-dot { background: var(--leaf); animation: none; }

@media (max-width: 880px) {
  .nav-cta-group { gap: 6px; }
  .oem-pill-text small { display: none; }
  .oem-nav-pill { padding: 7px 12px; }
}

/* slim footer for partners page */
.footer--slim { padding: 50px 32px 28px; }
.footer--slim .footer-top {
  grid-template-columns: 1fr 2fr; gap: 40px; padding-bottom: 28px;
}
.footer-cols--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) {
  .footer--slim .footer-top { grid-template-columns: 1fr; }
}

/* ============ OEM PARTNERS ============ */
.partners {
  position: relative; padding: 130px 32px 130px;
  background: linear-gradient(170deg, #14102a 0%, #0d0a17 60%, #1c1432 100%);
  color: var(--paper); overflow: hidden;
}
.partners-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(255,107,26,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(255,209,102,0.12) 0%, transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 90px);
}
.partners > * { position: relative; z-index: 2; }
.partners .section-head { max-width: 1000px; }

/* OEM strip */
.oem-strip {
  max-width: 1280px; margin: 0 auto 80px;
  padding: 30px 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
}
.oem-strip-label {
  text-align: center; margin-bottom: 22px;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.oem-strip-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.oem-tile {
  padding: 20px 18px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07); border-radius: 14px;
  transition: all 0.18s ease;
}
.oem-tile:hover {
  border-color: var(--sun); transform: translateY(-2px);
  background: rgba(255,107,26,0.06);
}
.oem-tile strong {
  display: block; font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 17px; letter-spacing: -0.02em; color: var(--gold); margin-bottom: 4px;
}
.oem-tile span {
  font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.45;
  display: block;
}

/* Value-add 6 cards */
.vadd-grid {
  max-width: 1280px; margin: 0 auto 100px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.vadd-card {
  padding: 36px 30px; border-radius: 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.2s ease;
}
.vadd-card:hover {
  background: rgba(255,255,255,0.07); transform: translateY(-3px);
  border-color: rgba(255,107,26,0.3);
}
.vadd-feature {
  background: linear-gradient(160deg, rgba(255,107,26,0.16) 0%, rgba(255,107,26,0.04) 100%);
  border-color: rgba(255,107,26,0.35);
}
.vadd-num {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: 0.18em; color: var(--sun-glow); margin-bottom: 18px;
}
.vadd-card h3 {
  font-size: 20px; letter-spacing: -0.02em; margin-bottom: 14px;
  color: var(--paper); line-height: 1.25;
}
.vadd-card p {
  font-size: 14.5px; line-height: 1.7;
  color: rgba(255,255,255,0.78);
}
.vadd-card p strong { color: var(--gold); font-weight: 600; }

/* Mechanics flow */
.vadd-flow {
  max-width: 1280px; margin: 0 auto 100px;
  padding: 60px 50px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 28px;
}
.vadd-flow-head { max-width: 720px; margin-bottom: 40px; }
.vadd-flow-head .kicker {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); padding: 5px 12px; border: 1px solid var(--gold);
  border-radius: 99px; margin-bottom: 14px; font-weight: 600;
}
.vadd-flow-head h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.02em;
}
.vadd-flow-steps {
  list-style: none;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  position: relative;
}
.vadd-flow-steps::before {
  content: ""; position: absolute;
  top: 26px; left: 4%; right: 4%; height: 2px;
  background: repeating-linear-gradient(to right, rgba(255,107,26,0.5) 0 6px, transparent 6px 12px);
}
.vadd-flow-steps li {
  position: relative; padding: 0 16px; z-index: 2;
}
.vfs-num {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--sun); color: var(--sun);
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 700;
  margin-bottom: 16px;
}
.vadd-flow-steps li h4 {
  font-size: 15px; margin-bottom: 8px;
  color: var(--paper); letter-spacing: -0.01em; line-height: 1.3;
}
.vadd-flow-steps li p {
  font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,0.65);
}
.vadd-flow-result {
  margin-top: 36px; padding: 20px 24px;
  background: rgba(255,209,102,0.08); border: 1px solid rgba(255,209,102,0.2);
  border-radius: 14px;
  font-size: 14px; line-height: 1.6;
}
.vadd-flow-result strong {
  display: block; margin-bottom: 4px;
  color: var(--gold); font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px; font-weight: 700;
}
.vadd-flow-result span { color: rgba(255,255,255,0.78); }

/* Engagement models */
.vadd-models {
  max-width: 1280px; margin: 0 auto 100px;
}
.vadd-models-head { text-align: center; margin-bottom: 36px; max-width: 700px; margin-inline: auto; }
.vadd-models-head .kicker {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); padding: 5px 12px; border: 1px solid var(--gold);
  border-radius: 99px; margin-bottom: 14px; font-weight: 600;
}
.vadd-models-head h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.02em;
}

.vadd-model-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  align-items: stretch;
}
.vadd-model {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px; padding: 32px 28px 28px;
  position: relative; display: flex; flex-direction: column; gap: 18px;
  transition: transform 0.2s ease;
}
.vadd-model:hover { transform: translateY(-3px); }
.vadd-model-feat {
  background: linear-gradient(170deg, var(--sun) 0%, var(--sun-deep) 100%);
  color: var(--ink); border-color: transparent;
  transform: scale(1.04);
  box-shadow: 0 30px 80px -30px rgba(255,107,26,0.5);
}
.vadd-model .ribbon {
  position: absolute; top: -14px; left: 28px;
  background: var(--ink); color: var(--gold);
  padding: 6px 14px; border-radius: 99px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
}
.vadd-model header span {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55);
  font-weight: 600;
}
.vadd-model-feat header span { color: rgba(13,10,23,0.7); }
.vadd-model header h4 {
  font-size: 22px; letter-spacing: -0.02em; margin-top: 4px;
  color: var(--paper);
}
.vadd-model-feat header h4 { color: var(--ink); }
.vadd-model ul { list-style: none; flex: 1; display: grid; gap: 10px; }
.vadd-model ul li {
  position: relative; padding-left: 22px;
  font-size: 14px; line-height: 1.55;
  color: rgba(255,255,255,0.78);
}
.vadd-model-feat ul li { color: rgba(13,10,23,0.85); }
.vadd-model ul li::before {
  content: "▸"; position: absolute; left: 0;
  color: var(--sun-glow); font-weight: 700;
}
.vadd-model-feat ul li::before { color: var(--ink); }
.vadd-model em {
  display: block; font-style: normal; font-size: 12.5px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em; padding-top: 16px;
  border-top: 1px dashed rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55);
}
.vadd-model-feat em {
  border-top-color: rgba(13,10,23,0.2);
  color: rgba(13,10,23,0.7);
}

/* Partner CTA / form */
.vadd-cta {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px;
  align-items: start;
}
.vadd-cta-copy .kicker {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); padding: 5px 12px; border: 1px solid var(--gold);
  border-radius: 99px; margin-bottom: 14px; font-weight: 600;
}
.vadd-cta-copy h3 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem); letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.vadd-cta-copy p {
  font-size: 1rem; line-height: 1.7;
  color: rgba(255,255,255,0.75); max-width: 480px;
}

.vadd-form {
  background: var(--paper); color: var(--ink);
  border-radius: 24px; padding: 38px 36px;
  box-shadow: 0 50px 100px -40px rgba(0,0,0,0.5);
}
.vadd-form h4 {
  font-size: 22px; margin-bottom: 22px; padding-bottom: 16px;
  border-bottom: 1px dashed var(--hairline); letter-spacing: -0.02em;
}
.vf-row { margin-bottom: 18px; }
.vf-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vf-row label { display: block; }
.vf-row label > span,
.vf-label {
  display: block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 8px; color: var(--ink); opacity: 0.78;
}
.vf-row input,
.vf-row textarea {
  width: 100%; padding: 14px 16px; font-size: 15px; font-family: inherit;
  border: 1.5px solid var(--hairline); border-radius: 10px;
  background: var(--paper); color: var(--ink); transition: border-color 0.15s ease;
}
.vf-row input:focus, .vf-row textarea:focus { outline: none; border-color: var(--ink); }
.vf-radios { display: flex; gap: 8px; flex-wrap: wrap; }
.vf-radios label { position: relative; cursor: pointer; }
.vf-radios input { position: absolute; opacity: 0; pointer-events: none; }
.vf-radios label span {
  display: inline-block; padding: 10px 16px; border-radius: 10px;
  background: var(--paper-2); border: 1.5px solid var(--hairline);
  font-size: 13.5px; font-weight: 500; transition: all 0.14s ease;
}
.vf-radios input:checked + span {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  box-shadow: 0 4px 0 var(--sun-deep);
}
.vf-fineprint {
  font-size: 12px; color: rgba(13,10,23,0.65); line-height: 1.6;
  margin-top: 14px; text-align: center;
}
.vf-fineprint strong { color: var(--ink); }
.vf-success { text-align: center; padding: 22px 10px; }
.vf-success-emoji { font-size: 50px; margin-bottom: 12px; animation: pop 0.6s ease; }
.vf-success h4 { font-size: 20px; margin-bottom: 10px; padding: 0; border: 0; }
.vf-success p { color: rgba(13,10,23,0.72); font-size: 14px; line-height: 1.6; }

/* responsive */
@media (max-width: 1080px) {
  .oem-strip-row { grid-template-columns: repeat(3, 1fr); }
  .vadd-grid { grid-template-columns: repeat(2, 1fr); }
  .vadd-flow-steps { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
  .vadd-flow-steps::before { display: none; }
  .vadd-model-grid { grid-template-columns: 1fr; }
  .vadd-model-feat { transform: none; }
  .vadd-cta { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 700px) {
  .oem-strip-row { grid-template-columns: 1fr 1fr; }
  .vadd-grid { grid-template-columns: 1fr; }
  .vadd-flow-steps { grid-template-columns: 1fr; }
  .vadd-flow { padding: 40px 24px; }
  .partners { padding: 80px 18px; }
  .vf-row.two { grid-template-columns: 1fr; }
  .vadd-form { padding: 30px 24px; }
}

/* ============ FAQ ============ */
.faq { padding: 100px 32px 120px; max-width: 920px; margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-list details {
  background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 14px;
  padding: 22px 26px; transition: all 0.2s ease;
}
.faq-list details[open] { background: var(--paper); border-color: var(--ink); box-shadow: 0 12px 30px -16px rgba(13,10,23,0.16); }
.faq-list summary {
  cursor: pointer; font-weight: 600; font-size: 16px;
  list-style: none; display: flex; justify-content: space-between; gap: 18px;
  letter-spacing: -0.005em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 26px; line-height: 0.6; color: var(--sun-deep); font-weight: 600;
  transition: transform 0.2s ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p {
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--hairline);
  font-size: 14.5px; line-height: 1.7; color: rgba(13,10,23,0.78);
}

/* ============ CONTACT ============ */
.contact {
  position: relative; padding: 130px 32px 130px;
  background: linear-gradient(180deg, var(--ink) 0%, #211538 100%); color: var(--paper);
  overflow: hidden;
}
.contact-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(255,107,26,0.35) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(255,209,102,0.18) 0%, transparent 55%);
}
.contact-inner {
  max-width: 1280px; margin: 0 auto; position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px;
}
.contact-left .kicker {
  display: inline-block; font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); padding: 6px 14px; border: 1px solid var(--gold);
  border-radius: 99px; margin-bottom: 18px; font-weight: 600;
}
.contact-left h2 { font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: 20px; }
.contact-left > p { font-size: 1.05rem; color: rgba(255,255,255,0.7); margin-bottom: 32px; line-height: 1.6; }
.contact-points { list-style: none; display: grid; gap: 12px; margin-bottom: 36px; }
.contact-points li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 14.5px; color: rgba(255,255,255,0.85);
}
.contact-points li span {
  width: 22px; height: 22px; border-radius: 50%; background: var(--sun);
  color: var(--ink); flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.contact-direct {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.contact-direct > div { padding: 16px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.contact-direct strong { display: block; font-size: 11px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.1em; opacity: 0.55; margin-bottom: 6px; }
.contact-direct a {
  display: block; font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 17px; font-weight: 600; color: var(--gold);
  letter-spacing: -0.01em; word-break: break-word;
}
.contact-direct em { display: block; margin-top: 4px; font-size: 11.5px; opacity: 0.55; font-style: normal; }

/* form */
.contact-form {
  background: var(--paper); color: var(--ink); border-radius: 24px;
  padding: 40px 38px; box-shadow: 0 50px 100px -40px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.05); position: relative;
}
.contact-form h3 {
  font-size: 24px; margin-bottom: 26px; padding-bottom: 18px;
  border-bottom: 1px dashed var(--hairline);
}
.ff-row { margin-bottom: 18px; }
.ff-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ff-row label { display: block; }
.ff-row label > span,
.ff-label {
  display: block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 8px; color: var(--ink); opacity: 0.78;
}
.ff-row label em { font-style: normal; opacity: 0.55; text-transform: none; font-weight: 500; letter-spacing: 0; }

.ff-row input,
.ff-row textarea,
.ff-row select {
  width: 100%; padding: 14px 16px; font-size: 15px; font-family: inherit;
  border: 1.5px solid var(--hairline); border-radius: 10px;
  background: var(--paper); color: var(--ink); transition: border-color 0.15s ease;
}
.ff-row input:focus,
.ff-row textarea:focus,
.ff-row select:focus { outline: none; border-color: var(--ink); }

.ff-radios { display: flex; gap: 8px; flex-wrap: wrap; }
.ff-radios label {
  position: relative; cursor: pointer;
  display: inline-flex;
}
.ff-radios input { position: absolute; opacity: 0; pointer-events: none; }
.ff-radios label span {
  display: inline-block; padding: 12px 18px; border-radius: 10px;
  background: var(--paper-2); border: 1.5px solid var(--hairline);
  font-size: 14px; font-weight: 500; transition: all 0.14s ease;
  text-transform: none; letter-spacing: 0; margin: 0;
}
.ff-radios input:checked + span {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  box-shadow: 0 4px 0 var(--sun-deep);
}

.ff-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.ff-check input { margin-top: 4px; accent-color: var(--sun); }
.ff-check span { font-size: 13.5px; line-height: 1.5; color: rgba(13,10,23,0.78); }

.ff-fineprint {
  font-size: 12px; color: rgba(13,10,23,0.6); line-height: 1.6;
  margin-top: 14px; text-align: center;
}
.ff-fineprint strong { color: var(--ink); }

.ff-success {
  text-align: center; padding: 30px 10px;
}
.ff-success-emoji { font-size: 56px; margin-bottom: 14px; animation: pop 0.6s ease; }
@keyframes pop { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.ff-success h3 { font-size: 22px; margin-bottom: 10px; padding: 0; border: 0; }
.ff-success p { color: rgba(13,10,23,0.7); font-size: 14.5px; line-height: 1.6; }

@media (max-width: 980px) {
  .contact-inner { grid-template-columns: 1fr; gap: 50px; }
  .contact-direct { grid-template-columns: 1fr; }
  .ff-row.two { grid-template-columns: 1fr; }
  .contact { padding: 80px 18px; }
  .contact-form { padding: 32px 24px; }
}

/* ============ FOOTER ============ */
.footer { background: var(--ink); color: var(--paper); padding: 80px 32px 30px; }
.footer-top {
  max-width: 1280px; margin: 0 auto; padding-bottom: 50px;
  display: grid; grid-template-columns: 1.2fr 2.5fr; gap: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .logo { color: var(--sun); margin-bottom: 18px; }
.footer-brand p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.7); margin-bottom: 22px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badges span {
  padding: 6px 12px; border-radius: 6px; background: rgba(255,255,255,0.06);
  font-size: 11.5px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
}
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.footer-cols h5 {
  font-size: 13px; font-family: 'JetBrains Mono', monospace; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px;
  color: var(--gold);
}
.footer-cols a {
  display: block; font-size: 14px; padding: 6px 0;
  color: rgba(255,255,255,0.72); transition: color 0.14s ease;
}
.footer-cols a:hover { color: var(--paper); }
.footer-cols p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.6); margin-top: 10px; }

.footer-bottom {
  max-width: 1280px; margin: 30px auto 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-size: 12.5px; color: rgba(255,255,255,0.55);
}
.foot-links { display: flex; gap: 8px; }
.foot-links a:hover { color: var(--paper); }
@media (max-width: 980px) {
  .footer-top { grid-template-columns: 1fr; gap: 38px; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

/* ============ Floating WhatsApp ============ */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 100;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 40px rgba(37,211,102,0.45);
  animation: wa-pulse 2.4s ease-in-out infinite;
  transition: transform 0.18s ease;
}
.wa-float:hover { transform: scale(1.1); }
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 14px 40px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.4); }
  50% { box-shadow: 0 14px 40px rgba(37,211,102,0.45), 0 0 0 14px rgba(37,211,102,0); }
}

/* ============ FLOATING QUICK-CONTACT WIDGET ============ */
.quick-contact {
  position: fixed; right: 22px; bottom: 92px; z-index: 100;
}
.qc-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px; border-radius: 99px;
  background: var(--ink); color: var(--paper);
  box-shadow: 0 14px 40px rgba(13,10,23,0.35);
  font-weight: 600; font-size: 14px; letter-spacing: -0.005em;
  border: 0; cursor: pointer; transition: all 0.18s ease;
}
.qc-toggle:hover { transform: translateY(-2px); background: var(--sun); color: var(--ink); }
.qc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--sun); color: var(--ink); font-size: 14px;
}
.qc-toggle:hover .qc-icon { background: var(--ink); color: var(--sun); }

.qc-panel {
  position: absolute; bottom: 60px; right: 0;
  width: 320px; max-width: calc(100vw - 44px);
  background: var(--paper); color: var(--ink);
  border-radius: 18px; padding: 14px;
  box-shadow: 0 30px 70px -10px rgba(13,10,23,0.35);
  border: 1px solid var(--hairline);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.quick-contact.open .qc-panel { opacity: 1; pointer-events: auto; transform: none; }

.qc-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px 12px;
  border-bottom: 1px dashed var(--hairline);
}
.qc-head strong {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px;
  letter-spacing: -0.015em;
}
.qc-close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--ink); opacity: 0.55;
}
.qc-close:hover { opacity: 1; }

.qc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 8px; border-radius: 10px;
  transition: background 0.14s ease;
  margin-top: 4px;
}
.qc-row:hover { background: var(--paper-2); }
.qc-row-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper-2); display: flex;
  align-items: center; justify-content: center; font-size: 18px;
  flex-shrink: 0;
}
.qc-row strong {
  display: block; font-size: 14.5px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.005em;
}
.qc-row em {
  display: block; font-size: 12.5px; font-style: normal;
  color: rgba(13,10,23,0.6); margin-top: 2px;
}
.qc-row--wa { background: rgba(17,130,59,0.06); }
.qc-row--wa .qc-row-icon { background: #11823b; color: #fff; }
.qc-row--cta {
  margin-top: 8px; padding-top: 14px;
  border-top: 1px dashed var(--hairline);
}
.qc-row--cta .qc-row-icon { background: var(--sun); color: var(--ink); }

@media (max-width: 540px) {
  .quick-contact { right: 16px; bottom: 80px; }
  .qc-toggle .qc-label { display: none; }
  .qc-toggle { padding: 10px; }
  .qc-panel { width: 280px; }
}

/* ============ ANIMATIONS — observer driven ============ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}