/* ============================================================
   Tech True Point gold theme (transformation step 3, 2026-07-14).
   Inner pages only (services / plans / about / contact / payments):
   brings them onto the homepage's black / blue / gold system.
   Loads AFTER styles.css; later-file order does the overriding.
   The homepage gets the same treatment from hero-ribbon.css
   (scoped body.story-dark); consolidation is a cleanup task for
   when styles.css itself is rewritten.

   Palette (owner brief): near-black #050505 · navy #12335F ·
   royal blue #2A6BE2 (artwork-sampled) · gold #D4A84F ·
   text #F7F9FC
   ============================================================ */

:root {
  --bg: #050505;
  --bg-2: #07080C;
  --panel: #0B0D13;
  --panel-2: #10131B;
  --gold: #D4A84F;
  --gold-soft: #DDBA6E;
  --gold-hot: #F3DCA8;
  /* artwork-matched royal blue family (sampled from the reference mock) */
  --primary: #1D6BE8;
  --primary-dark: #0549B4;
  --accent: #2A6BE2;
  --baby: #6FA5EF;
  --baby-soft: #9FC2F5;
}

/* ---------- backdrop: one black canvas, navy light from above ---------- */
.bg {
  background:
    radial-gradient(90% 60% at 78% -8%, rgba(18, 51, 95, 0.55) 0%, rgba(5, 5, 5, 0) 60%),
    radial-gradient(70% 55% at 8% 30%, rgba(18, 51, 95, 0.28) 0%, rgba(5, 5, 5, 0) 65%),
    linear-gradient(180deg, #050505 0%, #040507 100%);
}
.bg-beam { display: none; }
.bg-orb { opacity: .26; }
.bg-grid { opacity: .55; }

.site-header {
  background: rgba(5, 5, 5, 0.35);
  border-bottom-color: rgba(247, 249, 252, 0.06);
}
.site-header .brand-logo { height: 56px; }
@media (max-width: 560px) { .site-header .brand-logo { height: 42px; } }
/* 900-1199: nav-links appear at 900px but the viewport is still narrow, so the
   4:1 lockup has to come down or it collides with "Home" (measured gap 0 at
   1024). Keeping the links visible beats forcing a hamburger onto laptops. */
@media (min-width: 900px) and (max-width: 1199px) { .site-header .brand-logo { height: 56px; } }
@media (min-width: 900px) { .nav-links { gap: 2.2rem; } }
/* The vw term grows nav type with the viewport, but --maxw is a fixed 1180px at
   every width, so the links crowd the brand out at 4K. Cap at 1.1rem (17.6px at
   2560), which still clears the 16px+ 4K floor. */
.nav-links a { position: relative; font-size: clamp(.96rem, .82vw, 1.1rem); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -8px; width: 22px; height: 2px; border-radius: 2px;
  background: #2A6BE2;
}
/* 4K tier. NOTE: nav type and gaps scale with the viewport but --maxw does not
   (it is 1180px at every width), so this tier was already over budget before the
   Tech True Point lockup landed: links 845 + CTA 179 left ~108px for a brand that
   wanted 211, and the logo absorbed the difference by squashing. The gap is the
   cheapest thing to give back (it is spacing, not type: the owner's 4K
   large-type preference is preserved). Keep the sum of
   brand + links + CTA under the 1132px nav or the logo distorts again. */
@media (min-width: 1800px) {
  .nav { height: 100px; }
  .site-header .brand-logo { height: 72px; }
  .nav-links { gap: 1.9rem; }
  .nav-cta { padding: 1.05rem 1.7rem; font-size: 1.1rem; }
  /* Sticky shrink for this tier. It has to live HERE: this file loads after
     styles.css, so the plain .nav height above outranks the shrink rule there
     and the header silently refused to condense on the owner's own 4K monitor.
     Same proportion as the base tier (70 -> 58). */
  .site-header.is-stuck .nav { height: 72px; }
  .site-header.is-stuck .brand-logo { height: 60px; }
}
.nav-cta, .nav-cta:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 14px -6px rgba(29, 107, 232, 0.40);
}

/* ---------- gold voice on shared components ---------- */
.eyebrow {
  color: var(--gold-soft);
  border-color: rgba(212, 168, 79, 0.30);
  background: rgba(212, 168, 79, 0.05);
}
.eyebrow::before {
  background: var(--gold);
  box-shadow: 0 0 8px rgba(212, 168, 79, 0.8);
}

.btn-primary {
  background: linear-gradient(180deg, #1D6BE8 0%, #0549B4 100%);
  color: #fff;
  border: 1px solid rgba(80, 140, 240, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 30px -8px rgba(29, 107, 232, 0.50);
}
.btn-primary:hover {
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 14px 36px -8px rgba(29, 107, 232, 0.65);
}
.btn-ghost {
  background: rgba(212, 168, 79, 0.06);
  color: var(--gold-soft);
  border: 1px solid rgba(212, 168, 79, 0.50);
}
.btn-ghost:hover {
  background: rgba(212, 168, 79, 0.14);
  border-color: rgba(221, 186, 110, 0.75);
  color: var(--gold-hot);
}

.card {
  background: rgba(255, 255, 255, 0.030);
  border-color: rgba(150, 175, 205, 0.13);
}
.card .ico {
  background: rgba(212, 168, 79, 0.07);
  border-color: rgba(212, 168, 79, 0.35);
  color: var(--gold);
  box-shadow: none;
}
.card-hover:hover .ico {
  background: rgba(212, 168, 79, 0.16);
  color: var(--gold-hot);
  box-shadow: 0 10px 26px -8px rgba(212, 168, 79, 0.45);
}
.card-hover:hover {
  border-color: rgba(212, 168, 79, 0.35);
  box-shadow: var(--shadow), 0 0 44px rgba(212, 168, 79, 0.10);
}

.value-num { color: var(--gold); }
.price-card.featured {
  border-color: rgba(212, 168, 79, 0.40);
  box-shadow: var(--shadow), 0 0 44px rgba(212, 168, 79, 0.12);
}
.price-tag {
  color: #1A1204;
  background: linear-gradient(180deg, #EDCB86, var(--gold));
  box-shadow: 0 8px 20px -6px rgba(212, 168, 79, 0.7);
}
.feature-list li::before {
  background: rgba(212, 168, 79, 0.10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23D4A84F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color: rgba(212, 168, 79, 0.35);
}

.pill { border-color: rgba(150, 175, 205, 0.16); }
.pill svg { color: var(--gold); }
.tag { border-color: rgba(150, 175, 205, 0.16); }

/* contact page: gold instruments, blue focus (focus stays high-contrast) */
.contact-meta .ico {
  background: rgba(212, 168, 79, 0.10);
  border: 1px solid rgba(212, 168, 79, 0.40);
  color: var(--gold);
  box-shadow: none;
}

.cta-band {
  background:
    radial-gradient(120% 130% at 80% 0%, rgba(18, 51, 95, 0.75), rgba(5, 6, 10, 0.85)),
    #05060A;
  border-color: rgba(212, 168, 79, 0.32);
  box-shadow: var(--shadow-lg), 0 0 60px rgba(212, 168, 79, 0.10);
}
.cta-band .eyebrow { background: rgba(212, 168, 79, 0.08); }