:root {
  --cs-navy: #08243f;
  --cs-ocean: #0d4d78;
  --cs-accent: #ffe522;
  --cs-sand: #f3efe8;
  --cs-mist: #eef4f7;
  --cs-ink: #11263a;
  --cs-muted: #5f7285;
  --cs-line: rgba(17, 38, 58, 0.12);
  --cs-shadow: 0 24px 60px rgba(8, 36, 63, 0.15);
}

html { scroll-behavior: smooth; }
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--cs-ink);
  background: radial-gradient(circle at top right, rgba(255, 229, 34, 0.14), transparent 28%), linear-gradient(180deg, #f7fbfc 0%, #ffffff 28%, #f8fafb 100%);
  overflow-x: hidden;
}
a { color: var(--cs-ocean); }
a:hover { color: #093552; }
.topbar { background: linear-gradient(90deg, #123a63, #1b4d7c); }
.topbar-sticky { position: sticky; top: 0; z-index: 1035; box-shadow: 0 10px 24px rgba(8, 36, 63, 0.18); }
.topbar-link, .utility-link { color: #fff; text-decoration: none; }
.topbar-cta { align-self: flex-start; }
.utility-link { padding: 0.25rem 0.75rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; font-size: 0.875rem; }
.utility-link-accent { background: var(--cs-accent); border-color: var(--cs-accent); color: var(--cs-navy); font-weight: 700; }
.utility-link-accent:hover { background: #ffef66; border-color: #ffef66; color: var(--cs-navy); }
.utility-link.is-placeholder, .footer-chip.is-placeholder { opacity: 0.78; }
.site-navbar { background: rgba(20, 51, 83, 0.98); backdrop-filter: blur(16px); box-shadow: 0 12px 30px rgba(8, 36, 63, 0.2); top: 48px; }
.navbar-brand { text-decoration: none; gap: 0.8rem; }
.navbar { --bs-navbar-padding-y: 0.95rem; }
.navbar-nav { gap: 0.42rem; align-items: stretch; }
.nav-item { display: flex; }
.brand-badge { display:inline-flex; align-items:center; justify-content:center; padding:0.45rem 0.85rem; border-radius:1rem; background:rgba(255,255,255,0.96); box-shadow:0 10px 24px rgba(8,36,63,0.18); }
.brand-logo { display:block; width:auto; height:52px; max-width:180px; object-fit:contain; }
.country-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.9rem 0.5rem 1rem;
  border-radius: 1rem;
  background:
    linear-gradient(90deg, #007749 0 0.32rem, transparent 0.32rem),
    linear-gradient(135deg, rgba(255, 229, 34, 0.18), rgba(255, 255, 255, 0.12));
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 10px 24px rgba(8,36,63,0.18);
  color: #fff;
  line-height: 1.1;
  flex-shrink: 0;
}
.country-badge-topbar {
  background:
    linear-gradient(90deg, #007749 0 0.32rem, transparent 0.32rem),
    linear-gradient(135deg, rgba(255, 229, 34, 0.26), rgba(255, 255, 255, 0.1));
}
.country-badge-label {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  font-weight: 700;
}
.country-badge-name {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--cs-accent);
}
.brand-mark { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.9rem; background: linear-gradient(135deg, var(--cs-accent), #fff17a); color: var(--cs-navy); font-weight: 800; font-size: 1.4rem; }
.brand-name, .brand-tag { display:block; }
.brand-name { color:#fff; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; }
.brand-tag { font-size:0.72rem; color:rgba(255,229,34,0.9); }
.nav-link {
  min-width: 8.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.9) !important;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
  text-align: center;
  padding: 0.68rem 0.72rem !important;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform 160ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,229,34,0.8);
  box-shadow: 0 10px 24px rgba(8,36,63,0.2);
  transform: translateY(-2px);
}
.nav-link:active {
  transform: translateY(0) scale(0.97);
  background: rgba(255,229,34,0.18);
  border-color: rgba(255,229,34,0.95);
}
.nav-link.active {
  color: var(--cs-navy) !important;
  background: var(--cs-accent);
  border-color: var(--cs-accent);
  box-shadow: 0 12px 28px rgba(255,229,34,0.22);
}
.nav-link.active:hover {
  color: var(--cs-navy) !important;
  background: #ffef66;
  border-color: #ffef66;
}
.btn-accent, .btn-outline-accent:hover, .btn-outline-light { background:var(--cs-accent); border-color:var(--cs-accent); color:var(--cs-navy); }
.btn-accent:hover { background:#ffef66; border-color:#ffef66; color:var(--cs-navy); }
.btn-outline-accent { background:var(--cs-accent); border-color:var(--cs-accent); color:var(--cs-navy); }
.btn-outline-accent:hover, .btn-outline-light:hover { background:#ffef66; border-color:#ffef66; color:var(--cs-navy); }
.btn-outline-light { font-weight:700; }
.navbar .btn { font-weight:700; padding:0.8rem 1.2rem; box-shadow:0 10px 24px rgba(8, 36, 63, 0.18); }
.hero-section { padding:2.5rem 0 2rem; overflow:hidden; }
.hero-shell { background:linear-gradient(135deg, rgba(8,36,63,0.96), rgba(13,77,120,0.92)); border-radius:2rem; overflow:hidden; box-shadow:var(--cs-shadow); }
.hero-copy { padding:2.1rem 1.9rem; color:#fff; }
.hero-brand-lockup { display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
.hero-brand-mark { display:inline-flex; align-items:center; justify-content:center; padding:0.5rem 0.8rem; border-radius:1rem; background:rgba(255,255,255,0.96); box-shadow:0 12px 26px rgba(8,36,63,0.18); }
.hero-brand-logo { display:block; height:40px; width:auto; max-width:160px; object-fit:contain; }
.hero-brand-copy { display:flex; flex-direction:column; gap:0.2rem; }
.hero-brand-title { font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.64); font-weight:700; }
.hero-brand-text { font-size:0.92rem; color:rgba(255,255,255,0.88); font-weight:600; }
.hero-country-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.9rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}
.hero-country-pill::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #007749, #ffb612);
  box-shadow: 0 0 0 0.16rem rgba(255,255,255,0.14);
}
.eyebrow { display:inline-block; margin-bottom:0.75rem; color:#ffe522; letter-spacing:0.18em; text-transform:uppercase; font-size:0.74rem; font-weight:700; }
.display-title { font-size:clamp(1.45rem, 1.7vw, 2rem); line-height:1.08; font-weight:800; max-width:22ch; }
.lead-copy { color:rgba(255,255,255,0.82); font-size:0.94rem; max-width:40rem; }
.hero-metrics { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0.6rem; margin-top:0.9rem; }
.metric-card { padding:0.65rem 0.75rem; border-radius:0.9rem; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); font-size:0.8rem; line-height:1.3; }
.metric-value { display:block; font-size:1rem; font-weight:800; margin-bottom:0.15rem; }
.hero-image, .image-card { background-size:cover; background-position:center; }
.hero-image { min-height:100%; height:100%; position:relative; }
.hero-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,36,63,0.04), rgba(8,36,63,0.38)); }
.section-pad { padding:4.5rem 0; }
.home-intro-section { padding-top:2.5rem; }
.section-kicker { color:var(--cs-ocean); text-transform:uppercase; letter-spacing:0.16em; font-size:0.78rem; font-weight:700; }
.section-title { font-size:clamp(1.6rem, 2.25vw, 2.4rem); margin:0.5rem 0 1rem; font-weight:800; line-height:1.16; }
.section-copy { color:var(--cs-muted); max-width:44rem; }
.service-card, .trust-card, .stats-card, .contact-card { border:1px solid var(--cs-line); border-radius:1.5rem; background:rgba(255,255,255,0.86); box-shadow:0 18px 50px rgba(8,36,63,0.08); padding:1.75rem; height:100%; }
.service-card h3, .trust-card h3, .stats-card h3, .contact-card h3, .section-title, .section-copy, .feature-list li, .check-list li { overflow-wrap:anywhere; }
.service-icon, .trust-icon { width:3rem; height:3rem; display:inline-flex; align-items:center; justify-content:center; border-radius:1rem; margin-bottom:1rem; background:linear-gradient(135deg, rgba(255,229,34,0.22), rgba(13,77,120,0.12)); color:var(--cs-navy); font-size:1.25rem; }
.muted-panel { background:var(--cs-mist); }
.alt-panel { background:linear-gradient(180deg, rgba(8,36,63,0.04), rgba(13,77,120,0.04)); }
.app-download-card { background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(238,244,247,0.96)); }
.app-download-card .btn { min-height:3.5rem; font-weight:700; }
.app-download-card .bi { font-size:1.2rem; }
.brand-emblem-card { position:relative; overflow:hidden; }
.brand-emblem-card::after { content:""; position:absolute; right:-2rem; bottom:-2rem; width:10rem; height:10rem; background:url('../images/cellstop-logo.png') no-repeat center/contain; opacity:0.08; transform:rotate(-6deg); pointer-events:none; }
.feature-list, .check-list, .footer-list { list-style:none; padding:0; margin:0; }
.feature-list li, .check-list li { padding-left:1.75rem; position:relative; margin-bottom:0.75rem; color:var(--cs-muted); }
.feature-list li::before, .check-list li::before { content:""; position:absolute; left:0; top:0.55rem; width:0.65rem; height:0.65rem; border-radius:999px; background:var(--cs-accent); }
.image-card { min-height:22rem; border-radius:1.6rem; box-shadow:var(--cs-shadow); }
.cta-band { border-radius:2rem; padding:2.5rem; color:#fff; background:linear-gradient(135deg, var(--cs-navy), #136293); }
.cta-band .h1 { font-size: clamp(1.55rem, 2.1vw, 2.25rem); line-height: 1.15; }
.stats-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; }
.stats-card .value { font-size:2rem; font-weight:800; color:var(--cs-navy); }
.stats-card p { color: var(--cs-ink); }
.quote-card { background:#fff; border-radius:1.5rem; padding:2rem; border:1px solid var(--cs-line); }
.page-hero { padding:4rem 0 2rem; }
.page-hero .container { max-width: 1400px; }
.page-hero-shell {
  position: relative;
  overflow: hidden;
  min-height: 20rem;
  padding: 4rem 3rem;
  border-radius: 2rem;
  background: linear-gradient(135deg, rgba(8,36,63,0.94), rgba(13,77,120,0.9));
  color: #fff;
  box-shadow: var(--cs-shadow);
}
.page-hero-shell.has-hero-art {
  background-image:
    linear-gradient(90deg, rgba(8,36,63,0.92) 0%, rgba(8,36,63,0.78) 42%, rgba(13,77,120,0.52) 100%),
    var(--hero-image);
  background-size: cover;
  background-position: center;
}
.page-hero-shell .section-title,
.page-hero-shell .section-copy {
  position: relative;
  z-index: 1;
}
.page-hero-shell .section-copy { color:rgba(255,255,255,0.82); max-width:58rem; }
.contact-strip { background:var(--cs-sand); }
.map-card { overflow:hidden; padding:0; }
.map-embed { width:100%; min-height:360px; border:0; display:block; }
.site-footer { background:linear-gradient(180deg, #071b2f 0%, #051423 100%); color:#fff; }
.footer-brand-lockup { display:flex; flex-direction:column; align-items:flex-start; gap:1rem; }
.footer-brand-row { display:flex; align-items:center; flex-wrap:wrap; gap:0.85rem; }
.footer-brand-badge { display:inline-flex; align-items:center; justify-content:center; padding:0.7rem 0.95rem; border-radius:1.1rem; background:rgba(255,255,255,0.96); box-shadow:0 12px 28px rgba(0,0,0,0.22); }
.footer-brand-logo { display:block; height:50px; width:auto; max-width:170px; object-fit:contain; }
.country-badge-footer {
  background:
    linear-gradient(90deg, #007749 0 0.32rem, transparent 0.32rem),
    linear-gradient(135deg, rgba(255, 229, 34, 0.22), rgba(255,255,255,0.08));
}
.footer-title { font-size:1.75rem; font-weight:800; }
.footer-heading { font-size:1rem; text-transform:uppercase; letter-spacing:0.12em; color:rgba(255,255,255,0.72); margin-bottom:1rem; }
.footer-copy, .footer-list a, .footer-list li { color:rgba(255,255,255,0.72); text-decoration:none; }
.footer-list li { margin-bottom:0.75rem; }
.footer-chip { display:inline-flex; align-items:center; padding:0.4rem 0.8rem; border-radius:999px; background:rgba(255,255,255,0.08); color:#fff; text-decoration:none; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.12); font-size:0.92rem; }
.form-control, .form-select { border-radius:0.85rem; padding:0.85rem 1rem; border-color:rgba(8,36,63,0.12); }
.form-control:focus, .form-select:focus { border-color:rgba(13,77,120,0.5); box-shadow:0 0 0 0.2rem rgba(13,77,120,0.15); }
.visually-hidden-trap { position:absolute; left:-9999px; }
.badge-soft { display:inline-flex; padding:0.45rem 0.8rem; border-radius:999px; background:rgba(13,77,120,0.08); color:var(--cs-ocean); font-weight:600; }
@media (max-width: 991.98px) { .hero-copy { padding:2rem 1.35rem; } .hero-brand-lockup { flex-direction:column; align-items:flex-start; } .display-title { max-width:18ch; } .hero-metrics { grid-template-columns:1fr; } .hero-image { min-height:16rem; height:auto; } .page-hero-shell { padding:2.5rem 1.5rem; min-height:18rem; } .brand-logo { height:44px; max-width:150px; } .brand-badge { padding:0.35rem 0.65rem; } .navbar-brand { align-items:flex-start; } .country-badge { padding:0.45rem 0.8rem 0.45rem 0.95rem; } .site-navbar { top: 68px; } .navbar-nav { gap:0.4rem; margin-top:1rem; } .nav-item { display:block; } .nav-link { min-width:100%; width:100%; justify-content:flex-start; text-align:left; } }
@media (max-width: 575.98px) { .hero-section, .section-pad { padding:2.5rem 0; } .hero-copy { padding:1.8rem 1.1rem; } .display-title { max-width:15ch; } .hero-image { min-height:13rem; height:auto; } .cta-band { padding:2rem 1.4rem; } .navbar-brand { gap:0.55rem; } .country-badge-name { font-size:0.88rem; } .country-badge-label { font-size:0.6rem; } .site-navbar { top: 96px; } }