/* ============================================================
   GUSSDA — Theme Preview
   Brand color: #c94a0a (GUSSDA Orange)
   Scheme B:    Charcoal nav + orange accents
   ============================================================ */

/* ── CSS Custom Properties ──────────────────────────────────── */
:root {
  /* Brand */
  --gussda-orange:       #c94a0a;
  --gussda-orange-dark:  #a33a08;
  --gussda-orange-light: #e85d1a;
  --gussda-orange-pale:  #fef0e8;

  /* Navigation — Charcoal */
  --nav-bg:              #2A2A2A;
  --nav-text:            rgba(255,255,255,.85);
  --nav-text-hover:      #ffffff;
  --nav-active:          var(--gussda-orange);
  --nav-mobile-bg:       #222222;

  /* Backgrounds */
  --bg-page:             #f7f5f2;
  --bg-section:          #f0ede8;
  --bg-card:             #ffffff;
  --bg-card-hover:       #faf8f6;
  --bg-dark:             #1a1a1a;
  --bg-dark-alt:         #2A2A2A;

  /* Fonts */
  --font-heading:        'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --font-body:           'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:           'SF Mono','Fira Code','Consolas',monospace;

  /* Font Weights */
  --weight-heading-bold: 700;
  --weight-heading-medium: 500;
  --weight-heading-light: 300;
  --weight-body-regular: 400;
  --weight-body-light:   300;

  /* Text */
  --text-primary:        #1a1a1a;
  --text-secondary:      #555555;
  --text-muted:          #999999;
  --text-light:          #f7f5f2;
  --text-on-dark:        rgba(255,255,255,.75);

  /* Borders */
  --border-light:        #e8e4de;
  --border-medium:       #c8c3bb;
  --border-card:         #e0dbd4;

  /* Shadows */
  --shadow-sm:           0 1px 3px rgba(0,0,0,.06);
  --shadow-md:           0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:           0 8px 24px rgba(0,0,0,.1);
  --shadow-hover:        0 12px 32px rgba(0,0,0,.14);

  /* Buttons */
  --btn-primary-bg:      var(--gussda-orange);
  --btn-primary-text:    #ffffff;
  --btn-primary-hover:   var(--gussda-orange-dark);
  --btn-dark-bg:         #1a1a1a;
  --btn-dark-text:       #f7f5f2;
  --btn-dark-hover:      var(--gussda-orange);
  --btn-outline-border:  #bbb;
  --btn-outline-text:    #666;

  /* Radii */
  --radius-sm:           2px;
  --radius-md:           4px;
  --radius-lg:           8px;

  /* Transitions */
  --transition-fast:     .15s ease;
  --transition-normal:   .25s ease;
  --transition-slow:     .5s ease;
}

/* ============================================================
   NAVIGATION — White nav with dark text
   ============================================================ */
.nav-links a.active {
  border-bottom-color: #c94a0a !important;
}

.nav-ham span {
  background: #1a1a1a !important;
}

.nav-mob a.active {
  color: #c94a0a !important;
}

/* ============================================================
   PAGE HERO — White / light background
   ============================================================ */
.page-hero {
  background: #f7f5f2 !important;
}
.page-hero .sh2 {
  color: var(--text-primary) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--weight-heading-bold) !important;
  letter-spacing: -0.02em;
}
.page-hero p {
  color: var(--text-secondary) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--weight-body-light) !important;
}
.page-hero .breadcrumb a,
.page-hero .breadcrumb span {
  color: var(--text-muted) !important;
}
.page-hero .breadcrumb a:hover {
  color: var(--text-primary) !important;
}

/* ============================================================
   TRUST STRIP — Keep dark, refine text
   ============================================================ */
.trust {
  background: var(--bg-dark) !important;
}
.ti {
  color: rgba(255,255,255,.5) !important;
}
.ti::before {
  background: var(--gussda-orange) !important;
}

/* ============================================================
   WHY STRIP — Light sections (index page key numbers)
   ============================================================ */
.why-strip {
  background: var(--bg-section) !important;
}
.ws-item {
  border-left-color: rgba(201,74,10,.4) !important;
}
.ws-n {
  color: var(--text-primary) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--weight-heading-bold) !important;
  letter-spacing: -0.02em;
}
.ws-t {
  color: var(--gussda-orange) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--weight-heading-medium) !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.ws-d {
  color: var(--text-secondary) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--weight-body-light) !important;
}

.planb-wrap {
  background: var(--bg-page) !important;
}
.planb-box {
  border-color: rgba(201,74,10,.35) !important;
}
.planb-box::before {
  background: var(--bg-page) !important;
  color: var(--gussda-orange) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--weight-heading-bold) !important;
}
.planb-box h4 {
  color: var(--text-primary) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--weight-heading-medium) !important;
}
.planb-box p {
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--weight-body-light) !important;
}
.planb-inner p {
  color: var(--text-primary) !important;
}

/* ============================================================
   PRODUCT CARDS — Add depth with shadows & rounded corners
   ============================================================ */
.pc {
  background: var(--bg-card) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal),
              transform var(--transition-normal),
              background var(--transition-normal) !important;
  overflow: hidden;
}
.pc:hover {
  background: var(--bg-card-hover) !important;
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.pi {
  background: #f5f3ef !important;
}

.pb {
  border-top-color: var(--border-light) !important;
}

.pt {
  color: var(--gussda-orange) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--weight-heading-medium) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pn {
  color: var(--text-primary) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--weight-heading-medium) !important;
}

.ps {
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--weight-body-light) !important;
}

.pq {
  color: var(--gussda-orange) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--weight-heading-bold) !important;
}

/* Featured products grid */
.feat {
  background: var(--border-medium) !important;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Product grid (product page) */
.pgrid {
  background: var(--border-medium) !important;
}

/* ============================================================
   CERTIFICATION CARDS — Enhanced shadows
   ============================================================ */
.cv-img-wrap {
  box-shadow: var(--shadow-md) !important;
  border-radius: var(--radius-sm);
}
.cv-img-wrap:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-4px);
}

/* ============================================================
   BUTTONS — Refined
   ============================================================ */
.btn {
  border-radius: var(--radius-sm);
}

.btn-dark {
  background: var(--btn-dark-bg) !important;
  color: var(--btn-dark-text) !important;
}
.btn-dark:hover {
  background: var(--btn-dark-hover) !important;
  color: #fff !important;
}

.btn-ol {
  border-color: var(--btn-outline-border) !important;
  color: var(--btn-outline-text) !important;
}
.btn-ol:hover {
  border-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
}

.btn-w {
  border-radius: var(--radius-sm);
}
.btn-w:hover {
  background: var(--gussda-orange) !important;
}

.btn-ol-w {
  border-radius: var(--radius-sm);
}

/* ============================================================
   SECTION LABELS & HEADINGS
   ============================================================ */
.slbl {
  color: var(--gussda-orange) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--weight-body-regular) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.slbl::after {
  background: var(--gussda-orange) !important;
}

.sh2 {
  color: var(--text-primary) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--weight-heading-bold) !important;
  letter-spacing: -0.02em;
}
.planb-inner .sh2 {
  color: var(--text-primary) !important;
}


/* ============================================================
   TABS (product page)
   ============================================================ */
.tabs {
  border-bottom-color: var(--border-medium) !important;
}
.tab {
  color: var(--text-muted) !important;
}
.tab.on {
  color: var(--text-primary) !important;
}
.tab.on::after {
  background: var(--gussda-orange) !important;
}

/* ============================================================
   FOOTER — Unified dark
   ============================================================ */
footer {
  background: var(--bg-dark-alt) !important;
}
.foot-top {
  border-bottom-color: rgba(255,255,255,.08) !important;
}
.foot-nav a {
  color: rgba(255,255,255,.5) !important;
}
.foot-nav a:hover {
  color: #fff !important;
}
.foot-bottom {
  color: rgba(255,255,255,.35) !important;
}


/* ============================================================
   CONTACT PAGE — Form refinements
   ============================================================ */
.field input,
.field select,
.field textarea {
  background: var(--bg-section) !important;
  border-color: var(--border-card) !important;
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast) !important;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gussda-orange) !important;
  background: var(--bg-card) !important;
  box-shadow: 0 0 0 3px rgba(201,74,10,.1);
}

.fsub {
  background: var(--btn-dark-bg) !important;
  color: var(--btn-dark-text) !important;
  border-radius: var(--radius-sm);
}
.fsub:hover {
  background: var(--btn-dark-hover) !important;
}

/* Quick contact boxes */
.qbox {
  background: var(--bg-card) !important;
  transition: box-shadow var(--transition-normal),
              transform var(--transition-normal) !important;
}
.qbox:hover {
  background: var(--bg-card-hover) !important;
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.qt {
  color: var(--gussda-orange) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--weight-heading-medium) !important;
}

/* ============================================================
   ABOUT PAGE — Pillars & Steps
   ============================================================ */
.pillars-grid {
  background: var(--border-medium) !important;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.pill {
  background: var(--bg-card) !important;
}
.pill-n {
  color: var(--border-light) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--weight-heading-bold) !important;
}
.pill h4 {
  color: var(--text-primary) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--weight-heading-medium) !important;
}
.pill p {
  color: var(--text-secondary) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--weight-body-light) !important;
}

.steps {
  background: var(--border-medium) !important;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.step {
  background: var(--bg-card) !important;
}
.sn {
  color: var(--border-light) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--weight-heading-bold) !important;
}
.step h4 {
  color: var(--text-primary) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--weight-heading-medium) !important;
}
.step p {
  color: var(--text-secondary) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--weight-body-light) !important;
}

/* ============================================================
   PRODUCT DETAIL — Spec table & feature tags
   ============================================================ */
.spec-table tr {
  border-bottom-color: var(--border-light) !important;
}
.spec-table td:first-child {
  color: var(--text-muted) !important;
}
.spec-table td:last-child {
  color: var(--text-primary) !important;
}

.ftag {
  color: var(--gussda-orange) !important;
  border-color: rgba(201,74,10,.25) !important;
  border-radius: var(--radius-sm);
}

.detail-img-wrap {
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
}

.detail-cta {
  border-top-color: var(--border-light) !important;
}

/* ============================================================
   MISC — Utility refinements
   ============================================================ */
.intro-right p {
  color: var(--text-secondary) !important;
}
.intro-right p.company-name {
  color: var(--gussda-orange) !important;
}
.intro-right p.tagline {
  color: var(--text-primary) !important;
}

.cert-note {
  color: var(--text-muted) !important;
}
.cert-note2 {
  color: #aaa !important;
}

.cv-label {
  color: var(--text-primary) !important;
}
.cv-sub {
  color: var(--text-muted) !important;
}

/* ============================================================
   SCROLL ANIMATION — Subtle reveal
   ============================================================ */
.rv {
  opacity: 1 !important;
  transform: none !important;
}