/* ============================================================================
   MobileApplication.ca — design enhancement layer
   Loaded AFTER site.css. Introduces a cyan secondary accent + a distinct,
   more refined card/button/section treatment so the site is its own design,
   not a copy of the source template. Also: white textured masthead.
   ========================================================================== */

:root {
  --cyan: #06B6D4;
  --cyan-strong: #0891B2;
  --grad: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);
  --grad-rev: linear-gradient(135deg, #06B6D4 0%, #2563EB 100%);
  --grad-soft: linear-gradient(135deg, rgba(37,99,235,.10), rgba(6,182,212,.10));
  --ring: 0 0 0 4px rgba(37,99,235,.14);
  --shadow-blue: 0 18px 40px -20px rgba(37,99,235,.40);
}
[data-theme=dark] {
  --cyan: #22D3EE;
  --cyan-strong: #06B6D4;
  --grad: linear-gradient(135deg, #3B82F6 0%, #22D3EE 100%);
  --grad-soft: linear-gradient(135deg, rgba(59,130,246,.16), rgba(34,211,238,.14));
}

/* ---------- White masthead ---------- */
.site-header {
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
}
.site-header.scrolled {
  box-shadow: 0 8px 30px -16px rgba(37,99,235,.28);
  border-bottom-color: rgba(37,99,235,.18);
}
[data-theme=dark] .site-header {
  background: #0a0f1e !important;
  border-bottom-color: rgba(255,255,255,.08);
}

/* ---------- Buttons: blue → cyan gradient + lively hover ---------- */
.btn--primary {
  background: var(--grad) !important;
  border: none !important;
  box-shadow: 0 8px 20px -8px rgba(37,99,235,.55);
}
.btn--primary:hover {
  background: var(--grad-rev) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(6,182,212,.6);
}
.btn--call:hover { border-color: var(--cyan); color: var(--cyan-strong); }

/* ---------- Gradient text accents ---------- */
.accent,
.section-head h2 .accent,
h1 .accent,
h2 .accent {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Eyebrow / kicker badges removed site-wide ---------- */
.eyebrow { display: none !important; }

/* ---------- Cards: gradient top-accent + refined hover lift ---------- */
.guar-card, .seo-card, .tip, .b-feat, .panel, .svc-stage,
.testimonial-card, .tc-card, .stat-block, .choice, .factor-list li {
  position: relative;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.guar-card, .seo-card, .tip, .b-feat, .panel, .svc-stage, .tc-card { overflow: hidden; }
.guar-card::before, .seo-card::before, .tip::before, .b-feat::before,
.panel::before, .svc-stage::before, .tc-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.guar-card:hover::before, .seo-card:hover::before, .tip:hover::before,
.b-feat:hover::before, .panel:hover::before, .svc-stage:hover::before,
.tc-card:hover::before { transform: scaleX(1); }
.guar-card:hover, .seo-card:hover, .tip:hover, .b-feat:hover, .panel:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-blue);
  border-color: rgba(37,99,235,.32);
}

/* ---------- Stat numbers: bold gradient ---------- */
.stat-block .n, .stat-block strong, .stat-block .num, .est-stat strong {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

/* ---------- Icon chips / nodes get the gradient ---------- */
.stat-ic, .process-icon, .tl-node, .inc-count, .step-num {
  background: var(--grad) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -8px rgba(6,182,212,.5);
}
.chip { border-color: rgba(37,99,235,.25); }
.chip svg { color: var(--cyan); }

/* ---------- Hero quote card: soft gradient ring ---------- */
.quote-card, .wizard {
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(37,99,235,.35);
}
.quote-card { position: relative; }
.quote-card::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .35; pointer-events: none;
}

/* ---------- FAQ open state accent ---------- */
.faq-q[aria-expanded="true"] { color: var(--lav-strong); }
.faq-item:has(.faq-q[aria-expanded="true"]) { border-color: var(--lav); box-shadow: var(--ring); }
.faq-q .pm { color: var(--cyan-strong); }

/* ---------- Comparison: positive column gets accent ---------- */
.compare-col.us { border-color: rgba(37,99,235,.4); box-shadow: var(--shadow-blue); }
.compare-col.us .badge { background: var(--grad); color: #fff; }

/* ---------- Choice (wizard) selected state ---------- */
.choice:hover { border-color: var(--lav); }
.choice.selected, .choice[aria-pressed="true"] {
  border-color: var(--lav);
  background: var(--grad-soft);
  box-shadow: var(--ring);
}

/* ---------- Service tab active underline ---------- */
.svc-tab.active .svc-tab-name, .svc-tab[aria-selected="true"] .svc-tab-name { color: var(--lav-strong); }
.seg.active, .seg[aria-selected="true"] { background: var(--grad) !important; color: #fff !important; }

/* ---------- Inputs focus ring in the new accent ---------- */
input:focus, textarea:focus, select:focus { box-shadow: var(--ring) !important; border-color: var(--lav) !important; }

/* ---------- Trust bar / marquee polish ---------- */
.trust-bar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.marquee-item:hover { color: var(--lav-strong); }
.stars, .tc-stars { color: var(--star, #f5b942); }

/* ---------- Section dividers with subtle blue wash ---------- */
.section--alt { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }

/* ============================================================================
   Refinements: white hero "masthead", refreshed bg texture, mobile header
   ========================================================================== */

/* Hero (top banner) -> light/white with a refined texture (was dark w/ missing photo) */
.hero {
  background:
    radial-gradient(circle at 1px 1px, rgba(37,99,235,.06) 1.2px, transparent 1.4px) 0 0 / 22px 22px,
    radial-gradient(60% 70% at 100% 0%, rgba(6,182,212,.12), transparent 60%),
    radial-gradient(55% 60% at 0% 100%, rgba(37,99,235,.10), transparent 60%),
    var(--bg) !important;
}
.hero-copy h1 { color: var(--text) !important; }
.hero-copy h1 .accent {
  background: var(--grad) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .chip { background: #fff; color: var(--muted); }
[data-theme=dark] .hero .chip { background: rgba(255,255,255,.04); }

/* Refreshed page texture: soft blueprint grid instead of heavy dots */
.section {
  background:
    linear-gradient(rgba(37,99,235,.038) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(37,99,235,.038) 1px, transparent 1px) 0 0 / 34px 34px,
    radial-gradient(50% 60% at 100% 0%, rgba(6,182,212,.06), transparent 62%),
    var(--bg) !important;
}
.section--alt {
  background:
    linear-gradient(rgba(37,99,235,.05) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(37,99,235,.05) 1px, transparent 1px) 0 0 / 34px 34px,
    radial-gradient(60% 60% at 0% 0%, rgba(6,182,212,.07), transparent 60%),
    var(--bg-2) !important;
}
[data-theme=dark] .section,
[data-theme=dark] .section--alt {
  background:
    linear-gradient(rgba(96,165,250,.06) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(96,165,250,.06) 1px, transparent 1px) 0 0 / 34px 34px,
    var(--bg) !important;
}

/* Mobile header: solid white, and strip the boxed backgrounds off the icons */
@media (max-width: 860px) {
  .site-header { background: #ffffff !important; background-image: none !important; }
  [data-theme=dark] .site-header { background: #0a0f1e !important; }
  .nav-toggle, .theme-toggle {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
}

/* Mobile sticky bar: single full-width call button */
.mobile-cta-bar .btn--phone { flex: 1; }