/*
  DORA Technologies — Professional Stylesheet
  Designed with intention: editorial layouts, restrained colour,
  deliberate spacing. No generic card grids on every section.
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* Ink (text) scale */
  --ink-900: #0a1628;
  --ink-700: #1e3350;
  --ink-500: #4a607a;
  --ink-300: #8fa4bb;
  --ink-100: #c8d7e6;

  /* Brand — professional mid-blue, not the generic electric default */
  --blue-700: #0f3d9e;   /* deep, confident */
  --blue-600: #1a56c8;   /* primary — measured, not neon */
  --blue-500: #2264d8;   /* interactive */
  --blue-100: #cfe2fb;
  --blue-50:  #e7f2ff;

  /* Surface */
  --white:    #ffffff;
  --surface:  #f7f9fc;
  --line:     #e4eaf3;

  /* Status */
  --green-600: #16a34a;
  --green-100: #dcfce7;
  --red-600:   #dc2626;
  --red-100:   #fee2e2;
  --amber-600: #d97706;
  --amber-100: #fef3c7;

  /* Shadows */
  --s0: 0 1px 2px rgba(10,22,40,.06);
  --s1: 0 1px 3px rgba(10,22,40,.08), 0 1px 2px rgba(10,22,40,.05);
  --s2: 0 4px 8px rgba(10,22,40,.06), 0 2px 4px rgba(10,22,40,.04);
  --s3: 0 12px 24px rgba(10,22,40,.08), 0 4px 8px rgba(10,22,40,.04);
  --s4: 0 24px 48px rgba(10,22,40,.10), 0 8px 16px rgba(10,22,40,.06);

  /* Radius */
  --r-sm:  6px;
  --r:     10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill:9999px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --fast: 140ms var(--ease);
  --base: 220ms var(--ease);
  --slow: 340ms var(--ease);
}

/* ============================================================
   2. RESET
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html  { scroll-behavior:smooth; }
body  {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.65;
  color:var(--ink-900);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img      { max-width:100%; display:block; }
a        { text-decoration:none; color:var(--blue-600); transition:color var(--fast); }
a:hover  { color:var(--blue-700); }
ul       { list-style:none; }
button   { font-family:inherit; cursor:pointer; }

/* ============================================================
   3. LAYOUT
   ============================================================ */
.container {
  width:100%; max-width:1180px;
  margin-inline:auto; padding-inline:28px;
}
.col-2 { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.col-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.col-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.tc    { text-align:center; }

/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */
.kicker {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--blue-600);
  margin-bottom:14px;
}
.kicker::before {
  content:''; display:block; flex-shrink:0;
  width:20px; height:2px;
  background:var(--blue-600); border-radius:2px;
}

.h1 {
  font-size:clamp(38px,5.5vw,62px);
  font-weight:900; line-height:1.06; letter-spacing:-1.5px;
  color:var(--ink-900);
}
.h2 {
  font-size:clamp(26px,3.5vw,40px);
  font-weight:800; line-height:1.16; letter-spacing:-.6px;
  color:var(--ink-900);
}
.h3 {
  font-size:22px; font-weight:800;
  line-height:1.25; letter-spacing:-.2px;
  color:var(--ink-900);
}
.accent { color:var(--blue-600); }
.lead {
  font-size:17px; line-height:1.78;
  color:var(--ink-500); max-width:560px;
}
.tc .lead { margin-inline:auto; }

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 26px; font-size:14.5px; font-weight:600;
  border-radius:var(--r-pill); border:2px solid transparent;
  transition:all var(--base); white-space:nowrap; line-height:1;
}
.btn i { font-size:12px; }
.btn-lg { padding:16px 32px; font-size:15.5px; }
.btn-lg i { font-size:13px; }

.btn-solid {
  background:var(--blue-600); color:var(--white);
  border-color:var(--blue-600);
}
.btn-solid:hover {
  background:var(--blue-700); border-color:var(--blue-700);
  color:var(--white); transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(26,86,200,.30);
}
.btn-ghost {
  background:transparent; color:var(--blue-600);
  border-color:var(--blue-600);
}
.btn-ghost:hover {
  background:var(--blue-600); color:var(--white);
  transform:translateY(-1px);
}
.btn-ghost-white {
  background:transparent; color:var(--white);
  border-color:rgba(255,255,255,.45);
}
.btn-ghost-white:hover {
  background:rgba(255,255,255,.1); color:var(--white);
  border-color:rgba(255,255,255,.8);
}
.btn-white {
  background:var(--white); color:var(--ink-900);
  border-color:var(--white); font-weight:700;
}
.btn-white:hover {
  background:var(--blue-50); color:var(--ink-900);
  transform:translateY(-1px);
}

/* ============================================================
   6. ICON SYSTEM — flex, not grid, for FA pseudo-element centering
   ============================================================ */
.ic, .ic-sm, .ic-lg {
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
/* Force the FA :before glyph to sit flush */
.ic > i, .ic-sm > i, .ic-lg > i {
  display:block; line-height:1;
}

.ic    { width:52px; height:52px; min-width:52px; border-radius:12px; }
.ic-sm { width:38px; height:38px; min-width:38px; border-radius:9px;  }
.ic-lg { width:68px; height:68px; min-width:68px; border-radius:16px; }

.ic > i    { font-size:20px; }
.ic-sm > i { font-size:14px; }
.ic-lg > i { font-size:27px; }

/* Colour pairings — background / foreground */
.c-blue   { background:#dce8ff; color:#1a4fd4; }
.c-indigo { background:#e0e7ff; color:#4338ca; }
.c-cyan   { background:#cffafe; color:#0e7490; }
.c-teal   { background:#ccfbf1; color:#0d9488; }
.c-green  { background:#dcfce7; color:#15803d; }
.c-red    { background:#fee2e2; color:#b91c1c; }
.c-amber  { background:#fef3c7; color:#b45309; }
.c-purple { background:#f3e8ff; color:#7c3aed; }
.c-slate  { background:#f1f5f9; color:#475569; }
.c-navy   { background:#e0e7ff; color:#1e3a7a; }
.c-white  { background:rgba(255,255,255,.16); color:#ffffff; }
.c-wa     { background:#e7fbe8; color:#25d366; } /* WhatsApp green */

/* ============================================================
   7. LOGO
   ============================================================ */
.logo-img { height:44px; width:auto; display:block; }

/* ============================================================
   8. HEADER
   ============================================================ */
#header {
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--base);
}
#header.scrolled { box-shadow:var(--s1); }

.nav-wrap {
  display:flex; align-items:center; justify-content:space-between;
  height:70px; gap:24px;
}

/* Nav links */
.nav-links { display:flex; align-items:center; gap:2px; flex:1; }
.nav-links > li { position:relative; }
.nav-links > li > a {
  display:flex; align-items:center; gap:5px;
  padding:8px 11px; font-size:13.5px; font-weight:600;
  color:var(--ink-700); border-radius:var(--r);
  transition:all var(--fast); white-space:nowrap;
}
.nav-links > li > a:hover,
.nav-links > li > a.active {
  color:var(--blue-600); background:var(--blue-50);
}
.nav-links > li > a .fa-chevron-down {
  font-size:9px; color:var(--ink-300); transition:transform var(--base);
}
.nav-links > li:hover > a .fa-chevron-down { transform:rotate(180deg); }

/* Mega dropdown */
.mega-drop {
  position:absolute; top:calc(100% + 12px); left:50%;
  transform:translateX(-50%);
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--s4);
  padding:20px 20px 24px; display:grid;
  grid-template-columns:repeat(3,1fr); gap:4px;
  min-width:640px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--base), visibility var(--base), top var(--base);
}
.nav-links > li:hover .mega-drop {
  opacity:1; visibility:visible; pointer-events:all; top:calc(100% + 5px);
}
.drop-label {
  font-size:9.5px; font-weight:800; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--ink-300);
  padding:6px 10px 8px;
  border-bottom:1px solid var(--line); margin-bottom:4px;
}
.mega-drop a {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:var(--r-sm);
  font-size:13.5px; font-weight:500; color:var(--ink-700);
  transition:all var(--fast);
}
.mega-drop a:hover { background:var(--blue-50); color:var(--blue-600); }
.mega-drop a i { font-size:11px; color:var(--blue-600); width:13px; text-align:center; }

/* Right side */
.nav-right { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.nav-phone {
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:700; color:var(--ink-900); white-space:nowrap;
}
.nav-phone .ic-sm { background:var(--blue-50); color:var(--blue-600); }

/* Mobile */
.nav-toggle { display:none; background:none; border:none; font-size:20px; color:var(--ink-700); padding:6px; }
.mobile-nav {
  display:none; background:var(--white);
  border-top:1px solid var(--line);
  padding:16px 20px 28px;
}
.mobile-nav.open { display:block; }
.mobile-nav a {
  display:block; padding:11px 12px; font-size:15px; font-weight:600;
  color:var(--ink-800); border-radius:var(--r); transition:all var(--fast);
}
.mobile-nav a:hover { background:var(--blue-50); color:var(--blue-600); }
.mob-label {
  display:block; font-size:9.5px; font-weight:800; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--ink-300); padding:14px 12px 4px;
}

/* ============================================================
   9. HERO
   ============================================================ */
#hero {
  background:var(--white);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-wrap {
  display:grid; grid-template-columns:55fr 45fr;
  min-height:600px; align-items:stretch;
}
.hero-copy {
  padding:88px 64px 88px 0;
  display:flex; flex-direction:column; justify-content:center;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--green-100); color:var(--green-600);
  font-size:12px; font-weight:700; padding:5px 13px 5px 8px;
  border-radius:var(--r-pill); margin-bottom:28px;
  border:1px solid #bbf7d0; width:fit-content;
}
.hero-badge .dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--green-600);
  animation:blink 2.2s ease infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.hero-copy .h1 { margin-bottom:22px; }
.hero-copy .lead { margin-bottom:36px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:52px; }

.hero-metrics {
  display:flex; gap:0; padding-top:40px;
  border-top:1px solid var(--line);
}
.hero-metric { flex:1; padding-right:28px; }
.hero-metric:not(:last-child) {
  border-right:1px solid var(--line); margin-right:28px;
}
.hero-metric .val {
  font-size:28px; font-weight:900; color:var(--ink-900); line-height:1;
}
.hero-metric .lbl {
  font-size:12px; color:var(--ink-300); font-weight:600; margin-top:4px;
}

/* Hero visual panel */
.hero-panel {
  background:var(--ink-900);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:48px 40px;
}
.hero-panel::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(26,86,200,.22) 0%,transparent 60%);
}
.hero-panel::after {
  content:'';
  position:absolute; right:-60px; bottom:-60px;
  width:260px; height:260px;
  border:50px solid rgba(255,255,255,.04); border-radius:50%;
}

/* Dashboard inside hero */
.dash-card {
  width:100%; max-width:340px; position:relative; z-index:1;
  background:var(--white); border-radius:var(--r-md);
  box-shadow:var(--s4); overflow:hidden;
}
.dash-bar {
  background:#1a2840; padding:12px 16px;
  display:flex; align-items:center; gap:10px;
}
.dash-dots { display:flex; gap:5px; }
.dash-dots span {
  width:9px; height:9px; border-radius:50%;
}
.d-r{background:#ff5f57;} .d-y{background:#ffbd2e;} .d-g{background:#28c840;}
.dash-title {
  font-size:11px; font-weight:600; color:rgba(255,255,255,.5);
  display:flex; align-items:center; gap:6px; letter-spacing:.3px;
}
.dash-title i { font-size:10px; color:var(--blue-100); }

.dash-body { padding:16px; display:flex; flex-direction:column; gap:10px; }

.dash-row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.stat-tile {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:12px;
  display:flex; align-items:center; gap:9px;
}
.stat-tile .ic-sm { flex-shrink:0; }
.st-label { font-size:10px; font-weight:600; color:var(--ink-300); text-transform:uppercase; letter-spacing:.5px; }
.st-val   { font-size:13px; font-weight:800; color:var(--ink-900); margin-top:1px; }
.st-live  { display:flex; align-items:center; gap:4px; }
.live-dot { width:6px; height:6px; border-radius:50%; background:var(--green-600); }
.live-txt { font-size:11px; font-weight:700; color:var(--green-600); }

.uptime-tile {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:12px;
}
.ut-head { display:flex; justify-content:space-between; margin-bottom:7px; }
.ut-label { font-size:11px; font-weight:600; color:var(--ink-500); }
.ut-val   { font-size:12px; font-weight:800; color:var(--green-600); }
.ut-bar   { height:5px; background:var(--line); border-radius:99px; overflow:hidden; }
.ut-fill  { height:100%; width:99.9%; background:linear-gradient(90deg,var(--green-600),#16a34a); border-radius:99px; }

.ticket-list { display:flex; flex-direction:column; gap:5px; }
.t-row {
  display:flex; align-items:center; gap:8px;
  padding:9px 10px; border-radius:var(--r-sm);
  font-size:12px; font-weight:500;
}
.t-row.ok   { background:var(--green-100); color:#14532d; }
.t-row.ok i { color:var(--green-600); font-size:12px; flex-shrink:0; }
.t-row.pend { background:var(--amber-100); color:#78350f; }
.t-row.pend i { color:var(--amber-600); font-size:12px; flex-shrink:0; }

/* Floating pills on hero */
.hero-pill {
  position:absolute; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r);
  padding:9px 14px; display:flex; align-items:center; gap:10px;
  box-shadow:var(--s3); z-index:2; white-space:nowrap;
}
.hero-pill.p1 { bottom:60px; left:-20px; }
.hero-pill.p2 { top:48px; right:-20px; }
.hero-pill i { font-size:16px; }
.hp-val { font-size:13px; font-weight:800; color:var(--ink-900); line-height:1; }
.hp-sub { font-size:10px; color:var(--ink-300); margin-top:1px; }

/* ============================================================
   10. TRUST BAR
   ============================================================ */
#trust-bar {
  background:var(--white);
  border-bottom:1px solid var(--line); padding:22px 0;
}
.trust-inner {
  display:flex; align-items:center; gap:36px; overflow:hidden;
}
.trust-lbl {
  font-size:11px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--ink-300); flex-shrink:0;
}
.trust-sep { width:1px; height:24px; background:var(--line); flex-shrink:0; }
.trust-names {
  display:flex; flex-wrap:wrap; align-items:center; gap:28px;
}
.trust-name {
  font-size:13.5px; font-weight:600; color:var(--ink-300);
  transition:color var(--fast); white-space:nowrap;
}
.trust-name:hover { color:var(--ink-700); }

/* ============================================================
   11. PROBLEMS / CHALLENGES
   ============================================================ */
#problems {
  padding:96px 0;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.problems-inner {
  display:grid; grid-template-columns:340px 1fr; gap:80px;
  align-items:start;
}
.problems-left { position:sticky; top:100px; }
.problems-left .kicker { margin-bottom:16px; }
.problems-left .h2 { margin-bottom:18px; }
.problems-left .lead { margin-bottom:32px; }

.problems-list { display:flex; flex-direction:column; gap:0; }
.problem-row {
  display:flex; align-items:flex-start; gap:20px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
}
.problem-row:first-child { border-top:1px solid var(--line); }
.prob-num {
  font-size:13px; font-weight:900; color:var(--blue-100);
  min-width:28px; margin-top:2px; letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;
}
.prob-body h3 { font-size:15px; font-weight:700; color:var(--ink-900); margin-bottom:4px; }
.prob-body p  { font-size:13.5px; color:var(--ink-500); line-height:1.65; }

/* ============================================================
   12. SERVICES
   ============================================================ */
#services {
  padding:96px 0; background:var(--surface);
  border-bottom:1px solid var(--line);
}
.services-header { margin-bottom:56px; }

.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.svc-card {
  background:var(--white); padding:32px 28px;
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  transition:all var(--base); position:relative;
  overflow:hidden;
}
.svc-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:3px; background:var(--blue-600);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--base);
}
.svc-card:hover { box-shadow:var(--s3); z-index:1; }
.svc-card:hover::after { transform:scaleX(1); }

.svc-card .ic {
  align-self: center;
  margin-bottom:22px;
}
.svc-card h3  {
  font-size:16px; font-weight:700;
  color:var(--ink-900); margin-bottom:10px; line-height:1.3;
}
.svc-card p {
  font-size:13.5px; color:var(--ink-500);
  line-height:1.72; margin-bottom:20px; flex:1;
}
.svc-list {
  display:flex; flex-direction:column; gap:7px; margin-bottom:22px;
}
.svc-list li {
  display:flex; align-items:flex-start; gap:9px;
  font-size:13px; color:var(--ink-500); line-height:1.4;
}
.svc-list li i {
  font-size:8px; color:var(--blue-600);
  margin-top:4px; flex-shrink:0;
}
.svc-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color:var(--blue-600);
  margin-top:auto; transition:gap var(--fast);
}
.svc-link:hover { gap:10px; }
.svc-link i { font-size:10px; }

/* ============================================================
   13. VOIP SECTION
   ============================================================ */
#voip-band {
  padding:96px 0; background:var(--white);
  border-bottom:1px solid var(--line);
}
.voip-block {
  background:var(--ink-900); border-radius:var(--r-xl);
  padding:0; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr;
}
.voip-copy {
  padding:64px 60px; display:flex; flex-direction:column; justify-content:center;
}
.voip-copy .kicker { color:#93b4d8; }
.voip-copy .kicker::before { background:#93b4d8; }
.voip-copy .h2 { color:var(--white); margin-bottom:16px; }
.voip-copy .lead { color:rgba(255,255,255,.65); max-width:420px; margin-bottom:32px; }

.check-list { display:flex; flex-direction:column; gap:11px; margin-bottom:36px; }
.check-item {
  display:flex; align-items:center; gap:10px;
  font-size:14.5px; font-weight:500; color:rgba(255,255,255,.88);
}
.check-item i { color:var(--green-600); font-size:13px; flex-shrink:0; }

.voip-tiles {
  background:rgba(255,255,255,.04); padding:64px 52px;
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  align-content:center;
}
.voip-tile {
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md); padding:22px 20px;
  transition:background var(--base);
}
.voip-tile:hover { background:rgba(255,255,255,.1); }
.voip-tile .ic { align-self:center; margin-bottom:14px; }
.voip-tile h4 { font-size:14px; font-weight:700; color:var(--white); margin-bottom:5px; }
.voip-tile p  { font-size:12.5px; color:rgba(255,255,255,.55); line-height:1.6; }

/* ============================================================
   14. WHY SECTION — large text, not card grid
   ============================================================ */
#why {
  padding:96px 0; background:var(--surface);
  border-bottom:1px solid var(--line);
}
.why-intro { margin-bottom:64px; }
.why-list {
  display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.why-item {
  display:flex;
  flex-direction:column;
  padding:40px 36px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background var(--base);
  position:relative;
}
.why-item:hover { background:var(--white); }
.why-item .ic { align-self:center; margin-bottom:20px; }
.why-item h3  { font-size:17px; font-weight:700; color:var(--ink-900); margin-bottom:8px; }
.why-item p   { font-size:14px; color:var(--ink-500); line-height:1.7; }

/* ============================================================
   15. SUPPORT PREVIEW
   ============================================================ */
#support-preview {
  padding:96px 0; background:var(--white);
  border-bottom:1px solid var(--line);
}
.support-split { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }

.steps { display:flex; flex-direction:column; gap:28px; margin:32px 0 36px; }
.step  { display:flex; gap:16px; align-items:flex-start; }
.step-n {
  width:34px; height:34px; border-radius:50%;
  background:var(--blue-600); color:var(--white);
  font-size:13.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.step-body h4 { font-size:15px; font-weight:700; color:var(--ink-900); margin-bottom:3px; }
.step-body p  { font-size:13.5px; color:var(--ink-500); }

.contact-panel {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:28px;
  display:flex; flex-direction:column; gap:10px;
}
.crow {
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:15px 18px;
  display:flex; align-items:center; gap:14px;
  transition:all var(--fast);
}
.crow:hover { border-color:var(--blue-100); box-shadow:var(--s0); }
.crow .ic-sm { flex-shrink:0; }
.crow-lbl { font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-300); }
.crow-val { font-size:15px; font-weight:700; color:var(--ink-900); margin-top:1px; }
.crow-val a { color:var(--ink-900); }
.crow-val a:hover { color:var(--blue-600); }

/* ============================================================
   16. CLIENTS (LOGOS) — FIXED: proper sizing, centering, consistency
   ============================================================ */
.clients-section {
  padding: 80px 0;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.clients-section .center {
  text-align: center;
  margin-bottom: 56px;
}
.client-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 48px;
}
.client-logo {
  flex: 0 0 auto;
  width: 160px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--surface);
  border-radius: var(--r);
  transition: all var(--fast);
}
.client-logo:hover {
  transform: translateY(-3px);
  box-shadow: var(--s2);
  background: var(--white);
  border-color: var(--blue-100);
}
.client-logo img {
  max-width: 100%;
  max-height: 76px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0%);
  transition: filter var(--fast);
}
.client-logo:hover img {
  filter: grayscale(0%);
}

/* ============================================================
   17. PARTNERS (LOGOS) — FIXED: consistent sizing and layout
   ============================================================ */
.partners-section {
  padding: 80px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.partners-section .center {
  text-align: center;
  margin-bottom: 56px;
}
.partner-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 48px;
}
.partner-logo {
  flex: 0 0 auto;
  width: 180px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--white);
  border-radius: var(--r);
  transition: all var(--fast);
  border: 1px solid var(--line);
}
.partner-logo:hover {
  transform: translateY(-3px);
  box-shadow: var(--s2);
  border-color: var(--blue-100);
}
.partner-logo img {
  max-width: 100%;
  max-height: 78px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0%);
  transition: filter var(--fast);
}
.partner-logo:hover img {
  filter: grayscale(0%);
}

/* ============================================================
   18. CTA BAND
   ============================================================ */
#cta-band {
  background:var(--ink-900); padding:80px 0;
  position:relative; overflow:hidden;
}
#cta-band::before {
  content:''; position:absolute; left:-80px; bottom:-80px;
  width:320px; height:320px;
  background:radial-gradient(circle,rgba(26,86,200,.18) 0%,transparent 70%);
}
.cta-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:40px; flex-wrap:wrap; position:relative;
}
.cta-copy h2 { font-size:clamp(22px,3.5vw,34px); font-weight:800; color:var(--white); margin-bottom:8px; }
.cta-copy p  { font-size:16px; color:rgba(255,255,255,.65); }
.cta-btns { display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0; }

/* ============================================================
   19. PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  background:var(--ink-900); padding:72px 0;
  position:relative; overflow:hidden;
}
.page-hero::after {
  content:''; position:absolute; right:-60px; top:-60px;
  width:300px; height:300px;
  background:radial-gradient(circle,rgba(26,86,200,.16) 0%,transparent 70%);
}
.page-hero .container { position:relative; z-index:1; }
.breadcrumb {
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; color:rgba(255,255,255,.45); margin-bottom:18px;
}
.breadcrumb a { color:rgba(255,255,255,.45); }
.breadcrumb a:hover { color:var(--white); }
.breadcrumb i { font-size:9px; }
.page-hero h1 {
  font-size:clamp(28px,5vw,48px); font-weight:900; color:var(--white);
  margin-bottom:14px; letter-spacing:-.5px; line-height:1.1;
}
.page-hero p { font-size:17px; color:rgba(255,255,255,.7); max-width:540px; line-height:1.75; }

/* ============================================================
   20. SERVICES PAGE
   ============================================================ */
.cat-section { padding:80px 0; border-bottom:1px solid var(--line); }
.cat-section:nth-child(even) { background:var(--surface); }
.cat-layout { display:grid; grid-template-columns:240px 1fr; gap:72px; align-items:start; }
.cat-side {
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.cat-side .ic-lg { margin-bottom:20px; }
.cat-side h2 { font-size:21px; font-weight:800; color:var(--ink-900); margin-bottom:10px; }
.cat-side p  { font-size:13.5px; color:var(--ink-500); line-height:1.75; }
.cat-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cat-card {
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:22px;
  transition:all var(--base);
}
.cat-card:hover { border-color:var(--blue-100); box-shadow:var(--s2); }
.cat-card h3 { font-size:14.5px; font-weight:700; color:var(--ink-900); margin-bottom:7px; }
.cat-card p  { font-size:13px; color:var(--ink-500); line-height:1.65; }

/* ============================================================
   21. VOIP PAGE
   ============================================================ */
.pkg-row {
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-top:56px;
}
.pkg {
  background:var(--white); border:2px solid var(--line);
  border-radius:var(--r-lg); padding:32px 24px;
  position:relative; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  transition:all var(--base);
}
.pkg.best { border-color:var(--blue-600); }
.pkg:hover { border-color:var(--blue-600); box-shadow:var(--s3); transform:translateY(-3px); }
.pkg-badge {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--blue-600); color:var(--white);
  font-size:11px; font-weight:800; padding:4px 14px;
  border-radius:var(--r-pill); letter-spacing:.3px; white-space:nowrap;
}
.pkg .ic-lg { margin:0 auto 18px; }
.pkg-name   { font-size:19px; font-weight:800; color:var(--ink-900); margin-bottom:8px; }
.pkg-desc   { font-size:13.5px; color:var(--ink-500); margin-bottom:24px; line-height:1.65; flex:1; }
.pkg-feats  { text-align:left; display:flex; flex-direction:column; gap:9px; margin-bottom:28px; }
.pkg-feats li {
  display:flex; align-items:flex-start; gap:9px;
  font-size:13.5px; color:var(--ink-700);
}
.pkg-feats li i { color:var(--blue-600); font-size:11px; margin-top:2px; flex-shrink:0; }

/* ============================================================
   22. SUPPORT PAGE
   ============================================================ */
.channels {
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-bottom:72px;
}
.chan {
  display:flex; flex-direction:column; align-items:center;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:32px 24px;
  text-align:center; transition:all var(--base);
}
.chan:hover { border-color:var(--blue-100); box-shadow:var(--s3); transform:translateY(-3px); }
.chan .ic-lg { margin:0 auto 18px; }
.chan h3    { font-size:18px; font-weight:700; color:var(--ink-900); margin-bottom:8px; }
.chan p     { font-size:13.5px; color:var(--ink-500); margin-bottom:20px; line-height:1.65; }
.chan .cval { font-size:16px; font-weight:700; color:var(--blue-600); }
.chan .cnote{ font-size:11.5px; color:var(--ink-300); margin-top:6px; }

.process-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  margin-top:48px; position:relative;
}
.process-row::before {
  content:''; position:absolute; top:22px; left:72px; right:72px;
  height:1px; background:var(--line);
}
.proc { text-align:center; position:relative; }
.proc-n {
  width:46px; height:46px; border-radius:50%;
  background:var(--blue-600); color:var(--white);
  font-size:17px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px; border:3px solid var(--white);
  box-shadow:0 0 0 1px var(--blue-100); position:relative; z-index:1;
}
.proc h4 { font-size:14px; font-weight:700; color:var(--ink-900); margin-bottom:5px; }
.proc p  { font-size:12.5px; color:var(--ink-500); line-height:1.6; }

/* ============================================================
   23. CONTACT / FORMS
   ============================================================ */
.form-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:64px; align-items:start; }
.form-info h2 { font-size:28px; font-weight:800; color:var(--ink-900); margin-bottom:14px; letter-spacing:-.3px; }
.form-info p  { font-size:15px; color:var(--ink-500); margin-bottom:32px; line-height:1.75; }
.info-list { display:flex; flex-direction:column; gap:18px; }
.info-row  { display:flex; gap:14px; align-items:flex-start; }
.info-row .ic-sm { flex-shrink:0; margin-top:2px; }
.i-lbl { font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-300); }
.i-val { font-size:14px; font-weight:600; color:var(--ink-800); margin-top:2px; line-height:1.55; }
.i-val a { color:var(--ink-800); }
.i-val a:hover { color:var(--blue-600); }

.form-box {
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:36px; box-shadow:var(--s1);
}
.f-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.f-grp { margin-bottom:18px; }
.f-grp label {
  display:block; font-size:12.5px; font-weight:700;
  color:var(--ink-900); margin-bottom:6px;
}
.f-grp input,
.f-grp select,
.f-grp textarea {
  width:100%; padding:11px 14px;
  border:1.5px solid var(--line); border-radius:var(--r);
  font-size:14px; font-family:inherit;
  color:var(--ink-900); background:var(--surface);
  transition:all var(--fast); outline:none; line-height:1.5;
}
.f-grp input:focus,
.f-grp select:focus,
.f-grp textarea:focus {
  border-color:var(--blue-600); background:var(--white);
  box-shadow:0 0 0 3px rgba(26,86,200,.08);
}
.f-grp textarea { resize:vertical; min-height:115px; }
.f-grp input::placeholder,
.f-grp textarea::placeholder { color:var(--ink-100); }

/* ============================================================
   24. ABOUT PAGE
   ============================================================ */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding:96px 0; }
.about-vis {
  background:linear-gradient(145deg,var(--ink-900),#1e3a7a);
  border-radius:var(--r-xl); padding:52px 40px;
  color:var(--white); text-align:center; position:relative; overflow:hidden;
}
.about-vis::after {
  content:''; position:absolute; bottom:-30px; right:-30px;
  width:160px; height:160px;
  border:36px solid rgba(255,255,255,.04); border-radius:50%;
}
.about-vis .big-i { font-size:72px; opacity:.15; margin-bottom:22px; }
.about-vis h3 { font-size:22px; font-weight:800; margin-bottom:10px; }
.about-vis p  { font-size:14.5px; opacity:.72; line-height:1.75; }

.about-body { display:flex; flex-direction:column; }
.about-body .kicker { margin-bottom:16px; }
.about-body .h2     { margin-bottom:14px; }
.about-body .lead   { margin-bottom:22px; }
.about-body-p { font-size:15px; color:var(--ink-500); line-height:1.8; margin-bottom:20px; }
.vals { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:28px; }
.val-item {
  background:var(--surface);
  border-left:3px solid var(--blue-600);
  border-radius:0 var(--r) var(--r) 0; padding:16px 18px;
}
.val-item h4 { font-size:13.5px; font-weight:700; color:var(--ink-900); margin-bottom:3px; }
.val-item p  { font-size:12.5px; color:var(--ink-500); }

.stats-row { background:var(--ink-900); padding:64px 0; }
.stats-inner {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:32px; text-align:center;
}
.s-stat .s-num  { font-size:44px; font-weight:900; color:var(--white); line-height:1; }
.s-stat .s-lbl  { font-size:13px; color:rgba(255,255,255,.55); font-weight:600; margin-top:6px; }

/* ============================================================
   25. FOOTER
   ============================================================ */
#footer { background:#070e1b; padding:72px 0 0; color:rgba(255,255,255,.55); }
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1.6fr;
  gap:48px; padding-bottom:56px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.footer-brand p { font-size:13.5px; margin-top:16px; line-height:1.75; max-width:280px; }
.footer-col h5 {
  font-size:10.5px; font-weight:800; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--white); margin-bottom:18px;
}
.footer-col ul { display:flex; flex-direction:column; gap:9px; }
.footer-col ul li a { font-size:13.5px; color:rgba(255,255,255,.45); transition:color var(--fast); }
.footer-col ul li a:hover { color:var(--white); }
.fcontact { display:flex; flex-direction:column; gap:14px; }
.frow { display:flex; gap:10px; font-size:13.5px; align-items:flex-start; }
.frow i { font-size:13px; color:var(--blue-600); margin-top:2px; flex-shrink:0; }
.frow span { line-height:1.6; }
.frow a { color:rgba(255,255,255,.45); }
.frow a:hover { color:var(--white); }
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0; font-size:12.5px;
  color:rgba(255,255,255,.25); flex-wrap:wrap; gap:8px;
}

/* ============================================================
   26. WHATSAPP FAB
   ============================================================ */
.wa-fab {
  position:fixed; bottom:28px; right:28px;
  width:54px; height:54px; border-radius:50%;
  background:#25d366; color:var(--white); font-size:24px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(37,211,102,.4);
  z-index:999; transition:all var(--base);
}
.wa-fab:hover {
  background:#20ba5a; color:var(--white);
  transform:scale(1.08);
  box-shadow:0 6px 26px rgba(37,211,102,.5);
}

/* ============================================================
   27. RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
  .hero-wrap            { grid-template-columns:1fr; }
  .hero-panel           { display:none; }
  .hero-copy            { padding:72px 0; }
  .problems-inner       { grid-template-columns:1fr; }
  .problems-left        { position:static; }
  .svc-grid             { grid-template-columns:1fr 1fr; }
  .voip-block           { grid-template-columns:1fr; }
  .voip-copy            { padding:52px 48px; }
  .voip-tiles           { padding:48px; }
  .why-list             { grid-template-columns:1fr; }
  .support-split        { grid-template-columns:1fr; }
  .footer-grid          { grid-template-columns:1fr 1fr; }
  .cat-layout           { grid-template-columns:1fr; }
  .about-grid           { grid-template-columns:1fr; padding:64px 0; }
  .stats-inner          { grid-template-columns:1fr 1fr; gap:24px; }
  .pkg-row              { grid-template-columns:1fr 1fr; }
  .channels             { grid-template-columns:1fr 1fr; }
  .form-grid            { grid-template-columns:1fr; }
  .process-row          { grid-template-columns:1fr 1fr; }
  .process-row::before  { display:none; }
  .mega-drop            { min-width:480px; grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
  .nav-links  { display:none; }
  .nav-right .btn  { display:none; }
  .nav-phone  { display:none; }
  .nav-toggle { display:block; }
  .svc-grid   { grid-template-columns:1fr; }
  .why-list   { grid-template-columns:1fr; }
  .channels   { grid-template-columns:1fr; }
  .pkg-row    { grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .cta-inner  { flex-direction:column; text-align:center; }
  .f-row      { grid-template-columns:1fr; }
  .vals       { grid-template-columns:1fr; }
  .cat-cards  { grid-template-columns:1fr; }
  .voip-tiles { grid-template-columns:1fr; }
  
  /* Logo section responsive adjustments */
  .client-logos,
  .partner-logos {
    gap: 24px;
  }
  .client-logo {
    width: 140px;
    height: 90px;
  }
  .partner-logo {
    width: 150px;
    height: 100px;
  }
}

@media (max-width:480px) {
  .container { padding-inline:16px; }
  .stats-inner { grid-template-columns:1fr 1fr; }
  .hero-metrics { flex-wrap:wrap; gap:16px; }
  .hero-metric  { flex:none; padding-right:0; border-right:none!important; margin-right:0!important; }
  .trust-names  { display:none; }
  
  /* Logo section mobile adjustments */
  .client-logos,
  .partner-logos {
    gap: 16px;
  }
  .client-logo {
    width: 120px;
    height: 80px;
  }
  .partner-logo {
    width: 130px;
    height: 90px;
  }
}

/* ============================================================
   28. ICON CENTERING — single authoritative section
   ============================================================

   Two distinct centering problems for FA icons in cards:

   A) The GLYPH inside its coloured box (.ic / .ic-sm / .ic-lg)
      → handled by the base flex rule (align-items + justify-content)
        already set on .ic, .ic-sm, .ic-lg at section 6.

   B) The COLOURED BOX inside its parent card column
      → flex-direction:column defaults to align-items:stretch,
        so a fixed-width box sits at the LEFT edge.
      → Fix: align-self:center on the icon container, or
        margin-inline:auto (both approaches used below).
   ============================================================ */

/* Glyph centering inside the box — redundant safety net */
.ic > i, .ic-sm > i, .ic-lg > i {
  display:block;
  line-height:1;
  text-align:center;
  pointer-events:none;
}

/*
  ICON BOX CENTERING — every flex-column card type
  In a flex-direction:column container the cross-axis is horizontal.
  align-self:center horizontally centres the fixed-width icon box.
  margin-inline:auto achieves the same for block-context parents.
*/
.svc-card  .ic   { align-self:center; }
.why-item  .ic   { align-self:center; }
.voip-tile .ic   { align-self:center; }
.chan    .ic-lg   { align-self:center; }
.pkg    .ic-lg   { align-self:center; }
.cat-info .ic-lg { align-self:center; }   /* services page left column */
.cat-side .ic-lg { align-self:center; }

/* ============================================================
   COMPATIBILITY — aliases for class names used in inner pages
   ============================================================ */

/* old variable names still referenced in inline styles */
:root {
  --gray-50:    var(--surface);
  --gray-100:   var(--surface);
  --gray-200:   var(--line);
  --radius-lg:  var(--r-lg);
  --radius-xl:  var(--r-xl);
  --radius:     var(--r);
  --ink-800:    var(--ink-900);
  --navy:       #0a1628;
  --navy-700:   #1e3a7a;
}

/* class aliases */
.center         { text-align:center; }
.center .lead   { margin-inline:auto; }
.mobile-section-label,
.mob-label      { display:block; font-size:9.5px; font-weight:800; letter-spacing:1.3px;
                  text-transform:uppercase; color:var(--ink-300); padding:14px 12px 4px; }

/* Services page uses cat-info / cat-side interchangeably */
/* services page left sidebar — flex-column with centred alignment */
.cat-info       { display:flex; flex-direction:column; align-items:center; text-align:center; }
.cat-info .ic-lg { margin-bottom:20px; }
.cat-info h2    { font-size:21px; font-weight:800; color:var(--ink-900); margin-bottom:10px; }
.cat-info p     { font-size:13.5px; color:var(--ink-500); line-height:1.75; }

/* contact / support row sub-classes */
.crow-body      { flex:1; min-width:0; }
.crow-lbl       { font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-300); }
.crow-val       { font-size:15px; font-weight:700; color:var(--ink-900); margin-top:1px; }
.crow-val a     { color:var(--ink-900); }
.crow-val a:hover { color:var(--blue-600); }

/* about page */
.about-body     { display:flex; flex-direction:column; }
.about-body-p   { font-size:15px; color:var(--ink-500); line-height:1.8; margin-bottom:20px; }
.big-i          { display:block; }

/* voip page inner classes */
.voip-copy      { padding:64px 60px; display:flex; flex-direction:column; justify-content:center; }
.voip-copy .kicker { color:#93b4d8; }
.voip-copy .kicker::before { background:#93b4d8; }
.voip-copy .h2  { color:var(--white); margin-bottom:16px; }
.voip-copy .lead { color:rgba(255,255,255,.65); max-width:420px; margin-bottom:32px; }

/* support page */
.cval  { font-size:16px; font-weight:700; color:var(--blue-600); }
.cnote { font-size:11.5px; color:var(--ink-300); margin-top:6px; }

/* form info aliases */
.form-info      {}
.form-info h2   { font-size:28px; font-weight:800; color:var(--ink-900); margin-bottom:14px; letter-spacing:-.3px; }
.form-info p    { font-size:15px; color:var(--ink-500); margin-bottom:32px; line-height:1.75; }
.info-list      { display:flex; flex-direction:column; gap:18px; }
.info-row       { display:flex; gap:14px; align-items:flex-start; }
.info-row .ic-sm { flex-shrink:0; margin-top:2px; }
.i-lbl { font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-300); }
.i-val { font-size:14px; font-weight:600; color:var(--ink-900); margin-top:2px; line-height:1.55; }
.i-val a { color:var(--ink-900); }
.i-val a:hover { color:var(--blue-600); }

/* about page aliases */
.about-grid     { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding:96px 0; }
.about-vis      { background:linear-gradient(145deg,var(--ink-900),#1e3a7a); border-radius:var(--r-xl); padding:52px 40px; color:var(--white); text-align:center; position:relative; overflow:hidden; }
.about-vis h3   { font-size:22px; font-weight:800; margin-bottom:10px; }
.about-vis p    { font-size:14.5px; opacity:.72; line-height:1.75; }
.vals           { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:28px; }
.val-item       { background:var(--surface); border-left:3px solid var(--blue-600); border-radius:0 var(--r) var(--r) 0; padding:16px 18px; }
.val-item h4    { font-size:13.5px; font-weight:700; color:var(--ink-900); margin-bottom:3px; }
.val-item p     { font-size:12.5px; color:var(--ink-500); }
.stats-row      { background:var(--ink-900); padding:64px 0; }
.stats-inner    { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center; }
.s-num          { font-size:44px; font-weight:900; color:var(--white); line-height:1; }
.s-lbl          { font-size:13px; color:rgba(255,255,255,.55); font-weight:600; margin-top:6px; }

/* footer aliases */
.footer-brand p { font-size:13.5px; margin-top:16px; line-height:1.75; max-width:280px; }

@media (max-width:1024px) {
  .about-grid    { grid-template-columns:1fr; padding:64px 0; }
  .stats-inner   { grid-template-columns:1fr 1fr; gap:24px; }
}
@media (max-width:768px) {
  .vals          { grid-template-columns:1fr; }
}

@media (max-width:480px) {
  .container { padding-inline:16px; }
  .stats-inner { grid-template-columns:1fr 1fr; }
  .hero-metrics { flex-wrap:wrap; gap:16px; }
  .hero-metric  { flex:none; padding-right:0; border-right:none!important; margin-right:0!important; }
  .trust-names  { display:none; }
}