/* ============================================================
   IGoldcash — "The Assayer's Counter" design system
   Loaded AFTER each page's inline styles: equal-specificity
   rules here win the cascade. Overrides colour, type, border,
   shadow — never display/position/flex (layout stays intact).
   ============================================================ */

:root{
  /* token flip: every page's inline var() references pick these up */
  --primary:#0C2F36;          /* ink teal */
  --primary-2:#0F3A43;        /* deep ink (headings, dark surfaces) */
  --accent:#C9A227;           /* hallmark gold */
  --muted:#5C6B70;
  --bg:#F7F3EA;               /* warm ivory */
  --card:#FFFDF7;             /* panel ivory */
  --ink:#1A2A2F;              /* body text */
  --line:rgba(12,47,54,.16);  /* hairline */
  --line-strong:rgba(12,47,54,.28);
  --gold-soft:rgba(201,162,39,.10);
  --gold-line:rgba(201,162,39,.45);
  --wa:#25d366;
  --serif:'Fraunces',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
}

html,body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
}

h1,h2,h3,h4{ font-family:var(--serif); color:var(--primary-2); letter-spacing:-0.01em; }
h1{ font-weight:700; }
h2{ font-weight:600; }
.lead{ color:var(--muted); }

::selection{ background:var(--accent); color:#0C2F36; }

a{ color:var(--primary-2); }
a:hover{ color:#8A6F16; }

/* numbers are the product — instrument readout treatment */
.mono, .num{ font-family:var(--mono); font-feature-settings:"tnum"; }

/* ---------- hallmark stamp (eyebrow) ---------- */
.hallmark{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:#8A6F16; border:1px solid var(--gold-line);
  border-radius:3px; padding:.3rem .65rem; margin-bottom:.9rem;
  background:var(--gold-soft);
}

/* ---------- navbar ---------- */
.navbar{
  background:var(--primary);
  box-shadow:none;
  border-bottom:1px solid rgba(201,162,39,.35);
}
.navbar-brand{ font-family:var(--serif); }
.nav-link{ color:rgba(247,243,234,.85)!important; font-weight:600; }
.nav-link:hover{ color:var(--accent)!important; }
.btn-appointment{
  background:var(--accent); color:#12262B;
  border-radius:6px; font-weight:700; border:none;
}
.btn-appointment:hover{
  background:#D9B43A; color:#0C2F36;
  transform:none; box-shadow:0 4px 14px rgba(201,162,39,.35);
}

/* ---------- hero (homepage) ---------- */
.hero-section-card{ background:var(--primary); }
.hero-parallax-overlay{
  background:linear-gradient(to right,rgba(8,28,33,.18) 0%,rgba(8,28,33,.72) 58%,rgba(8,28,33,.82) 100%);
}
.hero-headline{
  font-family:var(--serif); color:#F7F3EA;
  text-shadow:0 2px 16px rgba(0,0,0,.45);
}
.hero-subline{ font-family:var(--sans); color:rgba(247,243,234,.92); font-weight:600; }
.hero-rule{ width:64px; height:2px; background:var(--accent); margin:0 0 1rem; border:none; }
.hero-btn-call{
  background:var(--accent); color:#12262B; border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.hero-btn-call:hover{ background:#D9B43A; color:#0C2F36; transform:translateY(-2px); }
.hero-btn-wa{ background:var(--wa); border-radius:6px; }
.hero-badge{
  border:1px solid rgba(247,243,234,.3); border-radius:4px;
  background:rgba(8,28,33,.35); font-family:var(--mono);
}
@media(max-width:768px){
  .hero-parallax-overlay{
    background:linear-gradient(to bottom,rgba(8,28,33,.05) 0%,rgba(8,28,33,.15) 40%,rgba(8,28,33,.9) 72%,rgba(8,28,33,.97) 100%);
  }
}

/* ---------- page hero (inner pages) ---------- */
.page-hero{ border-bottom:1px solid var(--gold-line); }
.page-hero h1{ color:#F7F3EA; }
.blog-hero h1{ color:#F7F3EA; }

/* ---------- panels: kill the card-soup shadows ---------- */
.trust-item{
  background:var(--card); border:1px solid var(--line);
  border-radius:10px; box-shadow:none;
}
.trust-item i{ color:var(--accent); }
.benefit-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:10px; box-shadow:none;
  transition:border-color .2s ease, transform .2s ease;
}
.benefit-card:hover{ transform:translateY(-3px); border-color:var(--gold-line); }
.benefit-icon{
  background:none; border:1.5px solid var(--gold-line);
  border-radius:8px; color:#8A6F16;
  width:52px; height:52px;
}
.benefit-icon i{ font-size:1.4rem; }
.testimonial-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:10px; box-shadow:none;
}
.author-avatar{
  background:var(--primary); border-radius:6px;
  font-family:var(--mono); font-weight:600;
}
.how-it-works-wrapper{
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; box-shadow:none;
}
.process-step{
  background:var(--card); border:1px solid var(--line);
  border-radius:10px; box-shadow:none;
  transition:border-color .2s ease, transform .2s ease;
}
.process-step:hover{ transform:translateY(-3px); border-color:var(--gold-line); }
.step-number{
  background:none; border:1.5px solid var(--accent);
  border-radius:8px; color:#8A6F16;
  font-family:var(--mono); font-weight:600;
  box-shadow:none;
}
.stat-box, .value-card, .sidebar-card, .tip-box{
  background:var(--card); border:1px solid var(--line);
  border-radius:10px; box-shadow:none;
}
.cta-box{ border-radius:12px; }

/* ---------- buttons ---------- */
.btn-primary-custom{
  background:var(--accent); color:#12262B; border-radius:6px;
  box-shadow:0 6px 20px rgba(201,162,39,.28); border:none;
}
.btn-primary-custom:hover{ background:#D9B43A; transform:translateY(-2px); }
.btn-secondary-custom{
  border:1.5px solid rgba(247,243,234,.35); border-radius:6px; color:#F7F3EA;
}
.btn-gold{
  background:var(--accent); color:#12262B; border-radius:6px; font-weight:700;
}
.btn-gold:hover{ background:#D9B43A; color:#0C2F36; }
.btn-wa{ background:var(--wa); border-radius:6px; }

/* ---------- tables: engraved ledger look ---------- */
.rate-table, .comparison-table, .distance-table{
  border:1px solid var(--line); border-radius:8px;
}
.rate-table th, .comparison-table th, .distance-table th{
  background:var(--primary); color:#F7F3EA;
  font-family:var(--mono); font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase; font-weight:600;
}
.rate-table td, .comparison-table td, .distance-table td{
  border-color:var(--line);
}

/* ---------- forms ---------- */
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, textarea{
  background:#FFFDF7; border-color:var(--line-strong)!important;
  border-radius:8px!important; color:var(--ink);
}
input:focus, select:focus, textarea:focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px var(--gold-soft);
}
.form-input{ background:#FFFDF7; border-color:var(--line-strong); border-radius:8px; }
.form-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--gold-soft); }
.karat-btn{ border:1px solid var(--line-strong); border-radius:8px; font-family:var(--mono); }
.karat-btn.active{ background:var(--primary); color:var(--accent); border-color:var(--primary); }

/* ---------- accordion / FAQ ---------- */
.accordion-item, .faq-item{
  background:var(--card); border:1px solid var(--line)!important;
  border-radius:8px!important; box-shadow:none;
}
.accordion-button{
  background:var(--card); color:var(--primary-2);
  font-weight:600; font-family:var(--sans);
}
.accordion-button:not(.collapsed){
  background:var(--gold-soft); color:var(--primary-2); box-shadow:none;
}
.accordion-button:focus{ box-shadow:0 0 0 3px var(--gold-soft); border-color:var(--gold-line); }

/* ---------- footer ---------- */
.footer{
  background:#0A272D;
  border-top:1px solid rgba(201,162,39,.4);
  color:rgba(247,243,234,.9);
}
.footer a{ color:rgba(247,243,234,.85); }
.footer a:hover{ color:var(--accent); }

/* ---------- floats & mobile CTA (conversion plumbing: minimal touch) ---------- */
.mobile-cta-call{ background:var(--primary)!important; }
/* .whatsapp-float untouched — it converts */

/* ---------- a11y & motion ---------- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .whatsapp-float::before{ animation:none!important; }
}