/* ========================================
   SecureTechs — Design A · LIGHT THEME OVERRIDES
   Layered ON TOP of design-a.css
   Hybrid model: warm cream base, dark hero & CTA bands kept for punch
   ======================================== */

:root{
  --bg: #FAF7F2;            /* warm cream */
  --plum-700: #FFFFFF;      /* surface alt → white */
  --plum-600: #F4EFE6;      /* slight cream tint */
  --plum-800: #FFFFFF;
  --surface: #FFFFFF;
  --border: rgba(26,11,46,0.08);
  --text: #1A0B2E;
  --text-soft: rgba(26,11,46,0.78);
  --text-muted: rgba(26,11,46,0.6);
  --text-dim: rgba(26,11,46,0.45);
}

/* Body */
body{background:var(--bg);color:var(--text)}

/* NAV — light, slightly translucent */
.nav{
  background:rgba(250,247,242,0.85);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(140%) blur(10px);
}
.nav-links a{color:rgba(26,11,46,0.75)}
.nav-links a:hover,.nav-links a.is-current{color:#1A0B2E}
.nav-links a.is-current::after{background:linear-gradient(90deg,var(--pink),var(--purple))}
.logo{color:#1A0B2E}
.logo-dot{color:var(--pink)}

/* HERO stays DARK (hybrid model — drama + image readability) */
.hero{background:radial-gradient(ellipse at top right,#2A1648 0%,#0F081C 70%)}
.hero h1,.hero p,.hero-eyebrow,.ribbons-label{color:#fff}

/* Trust bar — light */
.trust-bar,.trust-bar-svc{
  background:#FFFFFF;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.trust-item b{color:#1A0B2E}
.trust-item span{color:var(--text-muted)}

/* Section heads on light — h1 added so page intros render dark on cream.
   .grad spans inside use background-clip:text so they stay gradient-coloured.
   !important required because dark CSS has many specific h2 rules
   (.section-head-center h2, .svc-feature-section h2, .proj-block h2, .prose h2,
   etc.) all setting color:#fff with equal-or-higher specificity — listing each
   would be brittle. Inside dark-restored sections, the h2 rule below
   (.testi h2,.bio-section h2,...) with !important re-flips back to white. */
.section-head h2,
.section-head-center h2,
.section-head-left h2,
h1,h2,h3,h4,h5{color:#1A0B2E !important}
/* Global yellow eyebrow chip — dark text on stronger yellow tint so labels
   like "FIXED PRICE", "PRICING", "OUR PROCESS" are clearly readable on cream
   backgrounds. Inside dark-restored sections, .testi .eyebrow / .skills .eyebrow
   etc. (further down) re-apply the yellow-on-dark treatment. */
.eyebrow{
  color:#1A0B2E !important;
  background:rgba(252,211,77,0.22) !important;
  border-color:rgba(252,211,77,0.55) !important;
}
p,.section-sub{color:var(--text-soft)}
.lead{color:var(--text-muted)}

/* Page intro headers (portfolio, services archive, testimonials archive,
   book-a-call) — design-a.css hardcodes color:#fff on .page-hero h1 and
   .page-head h1; on cream bg those go invisible. */
.page-hero h1,.page-head h1{color:#1A0B2E}
.page-hero-sub,.page-head p{color:var(--text-muted)}

/* Breadcrumbs separator was rgba(255,255,255,0.2) — invisible on cream */
.breadcrumbs .sep{color:rgba(26,11,46,0.25)}

/* Filter chip hover: chip stays on white surface in light theme,
   but design-a.css sets color:#fff on hover → white-on-white. */
.fb-chip:hover{color:#1A0B2E}

/* Hero-eyebrow pill (e.g. "★ 93+ projects shipped · 5.0★ rated").
   Default to dark text on stronger yellow tint — works on every cream-bg
   page (page-hero, page-head, svc-hero, contact, book, etc.). The line-37
   rule sets .hero-eyebrow{color:#fff} for the dark homepage hero — keep
   that working via a more-specific .hero .hero-eyebrow override below. */
.hero-eyebrow{
  color:#1A0B2E !important;
  background:rgba(252,211,77,0.22) !important;
  border-color:rgba(252,211,77,0.55) !important;
}
.hero .hero-eyebrow{
  color:#fff !important;
  background:rgba(252,211,77,0.08) !important;
  border-color:rgba(252,211,77,0.25) !important;
}

/* SURFACES — cards become white on cream */
.svc-feat-item,.pkg-card,.spc-step,.cat-card,.port-card,.rev-card,.tl-card,
.faq,.metric-card,.stat-card,.process-card{
  background:#FFFFFF;
  border-color:var(--border);
  box-shadow:0 2px 8px rgba(26,11,46,0.04);
}
.svc-feat-item:hover,.spc-step:hover,.cat-card:hover,.port-card:hover{
  border-color:rgba(167,139,250,0.4);
  box-shadow:0 12px 28px rgba(26,11,46,0.10);
}

/* Featured Standard package */
.pkg-card.is-popular{
  background:linear-gradient(180deg,rgba(167,139,250,0.08) 0%,#FFFFFF 60%);
  border-color:rgba(167,139,250,0.45);
  box-shadow:0 18px 36px rgba(167,139,250,0.18);
}

/* Card headings, body, prices */
.svc-feat-item h4,.pkg-head h3,.spc-step h4,.port-card h3,.rev-who,.cat-card h3,
.tl-card h4,.pkg-list li b,.pkg-price-num,.svc-hero-stats b,.pfs-stats b,
.rfs-name,.tl-year{color:#1A0B2E}
.svc-feat-item p,.pkg-head p,.spc-step p,.port-card p,.rev-role,.cat-card p,
.tl-card p,.pkg-list li,.pkg-price-note,.svc-hero-stats span,.pfs-stats span,
.rfs-role,.section-sub{color:var(--text-soft)}
.sfi-num,.cat-num,.spc-num{color:var(--text-dim)}
/* Pricing-card eyebrow ("STARTER", "STANDARD", "PREMIUM") was --text-dim
   (rgba 0.45) — too faint on white card. Use full dark for legibility. */
.pkg-eyebrow{color:#1A0B2E;letter-spacing:0.18em}

/* CONTAINER GUTTER FIX — several classes are combined with .container on the
   same element and use shorthand `padding:Ypx 0` which wipes the container's
   horizontal `padding:0 28px`. Compound selector .container.X gives 0,0,2
   specificity and full shorthand forces all four sides explicitly. */
.container.nav-inner{
  padding:14px 28px !important;
}
.container.blog-layout{
  padding:40px 28px !important;
}
.container.blog-tags-bar{
  padding:20px 28px !important;
}
.container.blog-archive-layout{
  padding:0 28px !important;
}
@media (max-width:600px){
  .container.nav-inner{padding:14px 20px !important;}
  .container.blog-layout{
    padding:32px 20px !important;
    grid-template-columns:1fr !important;
  }
  .container.blog-tags-bar{padding:20px 20px !important;}
  .container.blog-archive-layout{
    padding:0 20px !important;
    grid-template-columns:1fr !important;
  }
}

/* Project category chips on portfolio cards. Dark CSS uses
   color:var(--purple-light) which is UNDEFINED — text falls back to inherit
   and renders almost the same as the light-purple chip background.
   Explicit dark text + stronger purple background for legibility. !important
   forced because cascade specificity wasn't reliably letting the bare
   .port-tag rule win over inherited dark-CSS values. */
.port-tag{
  color:#1A0B2E !important;
  background:rgba(167,139,250,0.22) !important;
  border-color:rgba(167,139,250,0.5) !important;
}
/* Same chip, on dark-restored sections (e.g. .related-section) — keep purple
   accent on translucent dark surface like the original dark theme. */
.related-section .port-tag{
  color:#C4B5FD !important;
  background:rgba(167,139,250,0.15) !important;
  border-color:rgba(167,139,250,0.3) !important;
}
/* Other places using --purple-light fallback chain on light bg */
.cat-arrow{color:#7C3AED}

/* SERVICES PAGE specific */
.svc-hero{background:radial-gradient(ellipse at top right,rgba(167,139,250,0.12) 0%,var(--bg) 60%)}
.svc-hero-text h1{color:#1A0B2E}

/* SLIDER cards (portfolio + reviews) — light */
.port-feat-slider,.rev-feat-slider{
  background:#FFFFFF;
  border-color:var(--border);
  box-shadow:0 18px 38px rgba(26,11,46,0.10);
}
.pfs-text h3,.pfs-text>p{color:#1A0B2E}
.pfs-text>p{color:var(--text-soft)}
.rfs-quote p{color:#1A0B2E}
.rfs-side{
  background:linear-gradient(180deg,rgba(167,139,250,0.06) 0%,rgba(255,107,157,0.03) 100%);
  border-right-color:rgba(26,11,46,0.06);
}

/* Buttons */
.btn-secondary{
  background:#FFFFFF;
  color:#1A0B2E;
  border:1px solid var(--border);
}
.btn-secondary:hover{
  background:#F4EFE6;
  border-color:rgba(167,139,250,0.4);
}

/* Filter chips */
.fb-chip{
  background:#FFFFFF;
  border-color:var(--border);
  color:var(--text-soft);
}
.fb-chip:hover{border-color:rgba(167,139,250,0.4)}
.fb-chip.is-active{
  background:linear-gradient(135deg,var(--pink),var(--purple));
  color:#fff;border-color:transparent;
}

/* Comparison table */
.pkg-compare{background:#FFFFFF;border-color:var(--border)}
.pc-row>div{color:var(--text-soft);border-bottom-color:rgba(26,11,46,0.06)}
.pc-row>div:not(:first-child){border-left-color:rgba(26,11,46,0.06)}
.pc-row>div:first-child{color:#1A0B2E}
.pc-row-head>div{background:rgba(167,139,250,0.05);color:var(--text-dim)}
.pc-row-price{background:rgba(167,139,250,0.05)}
.pc-row-price b{color:#1A0B2E}

/* FAQ */
.faq summary{color:#1A0B2E}
.faq p{color:var(--text-soft)}

/* Ribbons-wrap on cream — the ribbons themselves stay vibrant */
.ribbons-wrap{background:transparent}

/* CTA band — KEEP DARK for drama */
.cta{background:radial-gradient(ellipse at center,#2A1648 0%,#0F081C 70%)}
.cta h2,.cta p{color:#fff}
.cta .eyebrow{color:var(--yellow)!important}

/* FOOTER — DARK (anchor, classic pattern) */
.footer{background:#0F081C;border-top:1px solid rgba(255,255,255,0.06)}
.footer .logo{color:#fff}
.footer p,.footer-llc,.footer-col a,.footer-col h5{color:rgba(255,255,255,0.7)}
.footer-col h5{color:#fff}
.footer-col a:hover{color:#fff}
.footer-base{border-top-color:rgba(255,255,255,0.06)}
.footer-base p{color:rgba(255,255,255,0.5)}

/* Process strip (svc-process) — soft cream block */
.svc-process{background:#F4EFE6}

/* About hub side cards & timeline — adjust */
.timeline::before{opacity:0.18}

/* Scrollbar tone */
html{color-scheme:light}

/* ========================================================================
   DARK-SECTION RESTORE — sections originally on plum-700/plum-800 lost their
   bg when those vars were flipped to #FFFFFF for surfaces. Cards/blockquotes
   inside still use hardcoded white text (e.g. .testi-card blockquote, .stat b,
   .who, .pfs-stats b) which the global h2-h5/p overrides above don't catch.
   Re-pin dark backgrounds and explicit white text — same pattern as .hero/.cta.
   ======================================================================== */

/* Re-scope text-color CSS variables back to LIGHT values inside dark sections.
   This catches every selector that uses var(--text-*), --border, --surface
   without needing to enumerate them — the cascade does the rest. */
.testi,
.slider-section,
.related-section,
.bio-section,
.skills-section,
.timeline-section,
.faq-section,
.funnel-section,
.puzzle-section,
.hub-section,
.catalogue,
.trust-bar-svc,
.slide-text,
.cta,
.hero,
.footer{
  --text: #F4F0FA;
  --text-soft: rgba(244,240,250,0.78);
  --text-muted: rgba(244,240,250,0.7);
  --text-dim: rgba(244,240,250,0.5);
  --border: rgba(255,255,255,0.08);
  --surface: rgba(255,255,255,0.04);
}

/* Sections that must stay dark */
.testi,
.slider-section,
.related-section{
  background:linear-gradient(180deg,#251142 0%,#1A0B2E 100%);
}
.bio-section,
.skills-section,
.timeline-section,
.faq-section,
.funnel-section,
.puzzle-section,
.hub-section,
.catalogue{
  background:#1A0B2E;
}
.trust-bar-svc{
  background:#251142;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
/* Slide-text inner panel — was using plum-600 (now cream) in its gradient */
.slide-text{
  background:linear-gradient(135deg,#3B0764 0%,#1E1B4B 100%);
}

/* Restore white text inside those dark sections (global h2-h5/p overrides
   above made them dark — flip back). !important needed because the global
   override now uses !important too. */
.testi h2,.testi h3,
.slider-section h2,.slider-section h3,
.slide-text h2,.slide-text h3,
.bio-section h2,.bio-section h3,.bio-section h4,
.bio-text h2,.bio-text h3,
.skills-section h2,.skills-section h3,.skills-section h4,
.timeline-section h2,.timeline-section h3,.timeline-section h4,
.faq-section h2,.faq-section h3,.faq-section h4,
.funnel-section h2,.funnel-section h3,.funnel-section h4,
.puzzle-section h2,.puzzle-section h3,.puzzle-section h4,
.hub-section h2,.hub-section h3,.hub-section h4,
.related-section h2,.related-section h3,.related-section h4,
.trust-bar-svc h2,.trust-bar-svc h3,
.catalogue h2,.catalogue h3,.catalogue h4,
.testi .section-head h2,
.slider-section .section-head h2,
.related-section .section-head h2,
.bio-section .section-head h2,
.skills-section .section-head h2,
.timeline-section .section-head h2,
.faq-section .section-head h2,
.funnel-section .section-head h2,
.puzzle-section .section-head h2,
.hub-section .section-head h2,
.catalogue .section-head h2{
  color:#fff !important;
}
.testi p,.testi .section-head p,
.slider-section p,.slider-section .section-head p,
.slide-text p,
.bio-section p,.bio-section .section-head p,
.skills-section p,.skills-section .section-head p,
.timeline-section p,.timeline-section .section-head p,
.faq-section p,.faq-section .section-head p,
.funnel-section p,.funnel-section .section-head p,
.puzzle-section p,.puzzle-section .section-head p,
.hub-section p,.hub-section .section-head p,
.related-section p,.related-section .section-head p,
.trust-bar-svc p,
.catalogue p,.catalogue .section-head p{
  color:rgba(244,240,250,0.78);
}

/* Card surfaces inside dark sections — keep translucent dark, not white.
   Light CSS line 55 makes these all solid #FFFFFF, which becomes a white card
   on dark section bg containing now-light text = invisible. Match the original
   dark-theme card treatment instead. */
.testi .testi-card,
.timeline-section .tl-card,
.skills-section .skill-card,
.related-section .port-card,
.related-section .rev-card,
.catalogue .cat-card,
.bio-section .pkg-card,
.bio-section .stat-card,
.bio-section .metric-card,
.hub-section .pkg-card,
.funnel-section .pkg-card,
.puzzle-section .pkg-card{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.10);
  box-shadow:none;
}
.testi .testi-card:hover,
.timeline-section .tl-card:hover,
.skills-section .skill-card:hover,
.related-section .port-card:hover,
.related-section .rev-card:hover,
.catalogue .cat-card:hover{
  border-color:rgba(167,139,250,0.4);
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
}
.testi .testi-card blockquote{color:#F4F0FA}
.testi .testi-card .who{color:#fff}
.testi .testi-card .role{color:rgba(244,240,250,0.7)}

/* Stats bar uses pink/purple/teal gradient — remains vibrant.
   But .stat b and .stat span have hardcoded #fff which is correct on that
   gradient; ensure light theme didn't accidentally darken them. */
.stats-bar .stat b{color:#fff}
.stats-bar .stat span{color:rgba(255,255,255,0.9)}

/* FAQ items inside dark .faq-section need dark-section treatment */
.faq-section .faq{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.10);
  box-shadow:none;
}
.faq-section .faq summary{color:#fff}
.faq-section .faq p{color:rgba(244,240,250,0.78)}

/* Trust bar (services pages) inside its dark restored bg */
.trust-bar-svc .trust-item b{color:#fff}
.trust-bar-svc .trust-item span{color:rgba(244,240,250,0.7)}

/* Eyebrow in dark sections — restore yellow accent */
.testi .eyebrow,
.slider-section .eyebrow,
.bio-section .eyebrow,
.skills-section .eyebrow,
.timeline-section .eyebrow,
.faq-section .eyebrow,
.funnel-section .eyebrow,
.puzzle-section .eyebrow,
.hub-section .eyebrow,
.related-section .eyebrow,
.catalogue .eyebrow{
  color:var(--yellow,#FCD34D) !important;
  background:rgba(252,211,77,0.08) !important;
  border-color:rgba(252,211,77,0.25) !important;
}