/* ============================================================================
   brand.css — StandScale brand palette, loaded LAST on inner pages so it wins
   over each page's older colour theme (WhatsApp green, AP bronze, default blue).
   Source: the business card / logo.
     Navy   #172856  wordmark      -> text, dark surfaces
     Accent #2350C9  brand blue    -> links, buttons, highlights
     Lemon  #FFEB5A  lemon yellow  -> ~15% accent: labels, glows, small marks
     Tints  #F1F6FF  light blue    -> hero + section bands
   Contrast (WCAG AA): every text colour below is >= 4.5:1 on white and on the
   cream tint. The home page (index.html) carries the same tokens inline.
   Product identity stays in ONE cue per page: WhatsApp keeps its green chat
   bubble eyebrow; everything else follows the brand.
   ============================================================================ */
:root{
  --navy-0:#FFFFFF;
  --navy-1:#F1F6FF;
  --navy-2:#E3ECFD;
  --navy-3:#CFDDFA;
  --ink:#FFFFFF;
  --line:rgba(23,40,86,0.11);
  --line-soft:rgba(23,40,86,0.07);
  --text:#172856;
  --text-soft:#3C4E63;
  --text-mute:#5B6A7C;
  --gold:#2350C9;
  --gold-soft:rgba(35,80,201,0.09);
  --cyan:#172856;
  --cyan-soft:rgba(23,40,86,0.09);
  --shadow:0 6px 24px rgba(15,45,90,0.07);
  --sun:#FFEB5A;
  --sun-deep:#E8C81A;
  --sun-soft:#FFF8C7;
}

/* Buttons, cards, menus: navy shadows and hovers instead of the old hues */
.btn-primary{box-shadow:0 8px 20px rgba(35,80,201,0.22);}
.btn-primary:hover{background:#172856;}
.grid-card:hover{box-shadow:0 14px 30px rgba(15,45,90,0.12);}
.nav-dropdown-menu{box-shadow:0 14px 34px rgba(15,45,90,0.12);}
.grid-card.sme{
  border-color:rgba(35,80,201,0.22);
  background:linear-gradient(180deg, var(--sun-soft) 0%, var(--navy-0) 58%);
}
.grid-card.sme h3{color:var(--gold);}

/* Headings in brand navy */
.page-hero h1, h2, .grid-card h3, .faq-item summary, .fit-row h4{color:var(--text);}
.page-hero h1 em{font-style:normal; color:var(--gold);}

/* Calm hero: no triangle mosaic (it showed tile seams); soft warm gradient only */
.hero-mosaic{display:none;}

/* Video placeholder + player chrome */
.video-frame{
  box-shadow:0 18px 46px rgba(15,45,90,0.14);
  background:
    radial-gradient(120% 120% at 88% 92%, rgba(35,80,201,0.12) 0%, transparent 62%),
    linear-gradient(160deg, var(--navy-1) 0%, var(--navy-2) 58%, var(--navy-3) 100%);
}
.video-frame::after{background-image:url("hero-mosaic.svg");}
.video-play{background:var(--gold); box-shadow:0 10px 26px rgba(35,80,201,0.32);}
.video-play:hover{background:#172856;}

/* Small marks: logo gold instead of page-specific hues */
.eyebrow .dot{background:var(--sun-deep);}
.plain-list li::before{background:var(--gold);}
.steps li::before, .cost-rows b{color:var(--gold);}
.cost-rows li:hover{border-left-color:var(--gold); background:rgba(35,80,201,0.035);}
.fit-head{background:var(--text); color:#FFFFFF;}
.fit-row .ours{background:var(--navy-1);}
.fit-row .ours h4{color:var(--gold);}

/* Lemon-yellow accent (~15%) */
.vertical-label{background:transparent !important; color:var(--gold) !important; padding:0 !important; border-radius:0; font-weight:600; letter-spacing:0.14em; gap:10px; margin-bottom:20px;}
.vertical-label::before{content:""; width:22px; height:3px; border-radius:2px; background:var(--sun-deep); flex-shrink:0;}
.hero::before{background:radial-gradient(circle, var(--sun-soft) 0%, transparent 70%) !important; opacity:1;}