/* ─────────────────────────────────────────────────────────────
   E-Limit Heat — shared design layer ("Engineered Dark")
   Loaded on every page. Scoped under new eh- classes so it never
   collides with the existing per-page styles.
   ───────────────────────────────────────────────────────────── */

/* ===== HERO ===== */
.eh-hero{
  position:relative;overflow:hidden;
  background:radial-gradient(120% 130% at 82% -10%,#123049 0%,#0A1628 58%);
  border-radius:0;padding:56px 48px;color:#fff;
}
.eh-hero .eh-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(90% 90% at 80% 0%,#000,transparent 78%);
  mask-image:radial-gradient(90% 90% at 80% 0%,#000,transparent 78%);
}
.eh-hero .eh-glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 60% at 86% 16%,rgba(0,196,113,.30),transparent 62%),radial-gradient(46% 66% at 8% 96%,rgba(0,153,204,.26),transparent 60%);
}
.eh-wrap{position:relative;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;}
.eh-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#8ff0cf;background:rgba(0,196,113,.12);border:1px solid rgba(0,196,113,.3);padding:6px 13px;border-radius:100px;margin-bottom:18px;font-family:'DM Sans',sans-serif;}
.eh-eyebrow svg{width:14px;height:14px;}
.eh-h1{font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(34px,5vw,52px);line-height:1.01;letter-spacing:-.6px;margin-bottom:14px;color:#fff;}
.eh-h1 .g{background:linear-gradient(90deg,#3fc3ee,#3ff0a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.eh-sub{font-size:16px;color:rgba(255,255,255,.72);max-width:440px;margin-bottom:24px;line-height:1.6;}
.eh-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px;}
.eh-btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;padding:14px 26px;border-radius:100px;cursor:pointer;border:none;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s;}
.eh-btn.p{background:linear-gradient(90deg,#0099CC,#00C471);color:#fff;box-shadow:0 10px 28px rgba(0,153,204,.42);}
.eh-btn.p:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,153,204,.5);}
.eh-btn.o{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.22);}
.eh-btn.o:hover{background:rgba(255,255,255,.14);}
.eh-trust{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:13px;color:rgba(255,255,255,.6);}
.eh-trust .t{display:inline-flex;align-items:center;gap:6px;}
.eh-trust b{color:#fff;}
.eh-trust svg{width:16px;height:16px;color:#3ff0a8;}
.eh-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px;backdrop-filter:blur(6px);}
.eh-card h2{font-family:'Montserrat',sans-serif;font-weight:800;font-size:16px;margin-bottom:2px;color:#fff;}
.eh-card .eh-cs{font-size:12.5px;color:rgba(255,255,255,.6);margin-bottom:14px;}
.eh-row{display:flex;align-items:center;gap:12px;padding:11px;border-radius:12px;text-decoration:none;color:#fff;transition:background .16s,border-color .16s;border:1px solid transparent;}
.eh-row:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);}
.eh-row .ri{width:38px;height:38px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(0,153,204,.22),rgba(0,196,113,.22));border:1px solid rgba(255,255,255,.12);}
.eh-row .ri svg{width:20px;height:20px;color:#8ff0cf;}
.eh-row .rt{flex:1;}
.eh-row .rt strong{font-size:14px;font-weight:700;}
.eh-row .rt small{display:block;font-size:12px;color:rgba(255,255,255,.56);margin-top:1px;}
.eh-row .ra{color:rgba(255,255,255,.4);display:flex;}
.eh-login{display:block;text-align:center;font-size:13px;font-weight:700;color:#3ff0a8;margin-top:10px;text-decoration:none;padding-top:10px;}
.eh-login:hover{color:#8ff0cf;}
@media(max-width:860px){.eh-hero{padding:40px 22px;}.eh-wrap{grid-template-columns:1fr;gap:26px;}}

/* ===== Inline icon system (replaces emoji; sizes to surrounding text) ===== */
.eh-i{display:inline-flex;align-items:center;justify-content:center;vertical-align:-0.15em;line-height:0;}
.eh-i svg{width:1em;height:1em;display:block;}

/* ===== Richer light sections — Option 2 (gradient-accent cards) ===== */
body{
  background:linear-gradient(180deg,#EAF1F8,#FAFCFE 45%,#FFFFFF);
  background-attachment:fixed;
}
/* Uniform light content cards: soft gradient fill, crisp border, brand accent
   bar on top. Text stays dark (these cards sit on light sections). */
.val-card,.wc,.help-card{
  position:relative;
  background:linear-gradient(180deg,#FFFFFF,#F5F9FD);
  border:1px solid #E3EBF3;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(10,22,40,.07);
  overflow:hidden;
  color:var(--dark);
}
.val-card::before,.wc::before,.help-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#0099CC,#00C471);
}
/* Homepage service tiles keep their own look, just lifted off the canvas. */
.tile{box-shadow:0 12px 30px rgba(10,22,40,.07);}

/* Guard: never let white text land on a light card/section. */
.val-card, .val-card p, .val-card h3, .val-card h4,
.wc, .wc p, .wc h4, .help-card, .help-card p, .help-card h3{color:var(--dark);}
.val-card .val-desc, .wc p, .help-card p{color:#556579;}

/* ===== Icons on dark / coloured backgrounds → white, so they stand out ===== */
.tile-bg .eh-i, .tile-tag .eh-i, .sp-perk-icon .eh-i, .perk-icon .eh-i,
.sp-free-tag .eh-i, .fb-icon .eh-i, .free-box .eh-i, .pp-title .eh-i, .pp-deal .eh-i,
.comm-item .eh-i, .comm-emoji .eh-i, .bg-green .eh-i, .bg-orange .eh-i,
.btn-grad .eh-i, .btn-green .eh-i, .nav-cta .eh-i, .mob-cta-btn .eh-i,
.eh-btn .eh-i, .safe-badge .eh-i{
  color:#fff !important;
}

/* Broader coverage: every dark section, sitewide. Any inline icon inside
   these containers renders white so it reads against the dark background. */
.hero .eh-i, .eh-hero .eh-i, .nz-hero .eh-i, .sys-hero .eh-i, .xh-hero .eh-i,
.sp-home .eh-i, .sp-card .eh-i, .comm-block .eh-i, .comm-panel .eh-i,
.feat .eh-i, .ft-vis .eh-i, .reviews-wrap .eh-i, .about-panel .eh-i, .ap-in .eh-i,
.stats-bar .eh-i, .cta-band .eh-i, .plan-promo .eh-i, .tile .eh-i,
.roadmap .eh-i, .report-band .eh-i, footer .eh-i,
.pp-icon .eh-i, .pi .eh-i, .fs-icon .eh-i, .step-num .eh-i,
.btn-dark .eh-i, .btn-outline .eh-i{
  color:#fff !important;
}

/* Exceptions: white cards that sit INSIDE dark sections keep dark icons. */
.hero-card .eh-i, .phone-card .eh-i, .part-panel .eh-i, .help-card .eh-i,
.val-card .eh-i, .wc .eh-i{
  color:var(--dark, #0A1628) !important;
}
/* …but the gradient icon chip inside the part panel stays white. */
.part-panel .pp-icon .eh-i{ color:#fff !important; }

/* Giant decorative icons (service tiles, feature panels, commercial panel):
   white AND lifted out of near-invisible opacity so they actually show. */
.tile-bg{ color:#fff !important; opacity:.5 !important; }
.tile:hover .tile-bg{ opacity:.7 !important; }
.ft-vis{ color:#fff !important; }
.comm-emoji{ color:#fff !important; }
.comm-panel-in .eh-i, .ft-vis > .eh-i{ color:#fff !important; }

/* Belt and braces: paint the stroke white at SVG level in every dark spot,
   so no colour inheritance quirk can ever leave these icons dark again. */
.tile-bg .eh-i svg, .tile-tag .eh-i svg,
.ft-vis .eh-i svg, .comm-emoji .eh-i svg, .comm-panel-in .eh-i svg,
.sp-perk-icon .eh-i svg, .sp-card .eh-i svg, .sp-free-tag .eh-i svg,
.sp-home .eh-i svg, .comm-block .eh-i svg, .comm-item .eh-i svg,
.feat .eh-i svg, .plan-promo .eh-i svg, .pp-badge .eh-i svg,
.reviews-wrap .eh-i svg, .about-panel .eh-i svg, .ap-in .eh-i svg,
.stats-bar .eh-i svg, .cta-band .eh-i svg, .roadmap .eh-i svg,
.pi .eh-i svg, .pp-icon .eh-i svg, .fs-icon .eh-i svg, .step-num .eh-i svg,
footer .eh-i svg{
  stroke:#fff !important;
}