/* =================================================================
   Cormant-CS Australia — Shared Design System
   Enterprise DCIM benchmark: nlyte.com / sunbirddcim.com
   Built for cormant-cs.com.au by Avantex Australasia
   Pure CSS — no framework, no build step.
   ================================================================= */

/* Self-hosted Inter (variable, latin) — no render-blocking third-party request */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter.woff2') format('woff2');
}

:root {
  /* Brand palette (from brief) */
  --navy:        #1C3F6E;
  --navy-deep:   #0d2444;
  --navy-near:   #081628;   /* near-black hero base */
  --red:         #C0392B;
  --red-dark:    #a32f22;
  --teal:        #1d9e75;
  --teal-dark:   #178460;
  --light-bg:    #f7f9ff;
  --text-primary:#0d1a2e;
  --text-muted:  #555555;
  --white:       #ffffff;

  /* Derived */
  --line:        #e1e7f2;
  --line-soft:   #eef2fa;
  --shadow-sm:   0 1px 3px rgba(13,26,46,.08), 0 1px 2px rgba(13,26,46,.06);
  --shadow-md:   0 10px 30px rgba(13,26,46,.10), 0 4px 10px rgba(13,26,46,.06);
  --shadow-lg:   0 30px 60px rgba(8,22,40,.30), 0 12px 24px rgba(8,22,40,.18);
  --radius:      10px;
  --radius-lg:   16px;
  --maxw:        1200px;
  --ease:        cubic-bezier(.16,.84,.44,1);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--white);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;            /* contain the off-canvas mobile menu — no h-scroll, keeps sticky working */
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text-primary);
  font-weight: 800;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.35rem; }
p  { margin: 0 0 1rem; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 640px) { .container { padding: 0 20px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .01em;
  padding: .85rem 1.5rem;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s var(--ease), background .2s, box-shadow .2s, color .2s;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary { background: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(192,57,43,.30); }
.btn-primary:hover { background: var(--red-dark); color:#fff; box-shadow: 0 10px 24px rgba(192,57,43,.38); }

.btn-teal { background: var(--teal); color:#fff; box-shadow: 0 6px 18px rgba(29,158,117,.28); }
.btn-teal:hover { background: var(--teal-dark); color:#fff; }

.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.40); }
.btn-ghost:hover { background: rgba(255,255,255,.10); color:#fff; border-color:#fff; }

.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color:#fff; }

.btn-lg { font-size: 1.05rem; padding: 1rem 1.9rem; }

.link-arrow { font-weight: 700; color: var(--teal-dark); display:inline-flex; align-items:center; gap:.4rem; }
.link-arrow .arr { transition: transform .2s var(--ease); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover .arr { transform: translateX(4px); }

/* ---------- Eyebrow / section heading ---------- */
.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: 1rem;
}
.eyebrow.on-dark { color: #5fd6ab; }

.section { padding: 88px 0; }
.section-sm { padding: 60px 0; }
.section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.section-head p { color: var(--text-muted); font-size: 1.15rem; }
.bg-light { background: var(--light-bg); }
.bg-navy  { background: var(--navy-deep); color: #dfe8f5; }
.bg-navy h1, .bg-navy h2, .bg-navy h3 { color: #fff; }

/* =================================================================
   TOP BAR
   ================================================================= */
.topbar {
  background: var(--navy-near);
  color: #aebfd6;
  font-size: .82rem;
  letter-spacing: .01em;
}
.topbar .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 38px;
}
.topbar strong { color: #fff; }
.topbar .topbar-right { display:flex; gap:1.4rem; align-items:center; }
.topbar a { color:#aebfd6; }
.topbar a:hover { color:#fff; text-decoration:none; }
@media (max-width: 860px){ .topbar .topbar-right { display:none; } }

/* =================================================================
   HEADER / NAV
   ================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;   /* solid — no backdrop-filter (it would trap the fixed mobile menu) */
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 72px;
}

/* Brand: official Cormant (a division of BGIS) logo + Australia tag */
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand:hover { text-decoration:none; }
.brand-logo { height: 42px; width:auto; display:block; }
.brand-tag {
  align-self:center; padding-left:.75rem; border-left:1px solid var(--line);
  font-size:.66rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-muted); line-height:1.2;
}
@media (max-width: 980px){ .brand-logo { height: 34px; } .brand-tag { padding-left:.6rem; } }
@media (max-width: 400px){ .brand-tag { display:none; } }

/* Nav links */
.nav-menu { display:flex; align-items:center; gap:.3rem; list-style:none; margin:0; padding:0; }
.nav-menu > li { position: relative; }
.nav-link {
  display:flex; align-items:center; gap:.35rem;
  padding:.6rem .9rem; border-radius:7px;
  font-weight:600; font-size:.98rem; color:var(--text-primary);
  cursor:pointer; background:none; border:none; font-family:inherit;
}
.nav-link:hover { background: var(--line-soft); color: var(--navy); text-decoration:none; }
.nav-link .caret { width:9px; height:9px; transition: transform .2s; opacity:.6; }
.has-dropdown[aria-expanded="true"] .caret,
.nav-item.open .nav-link .caret { transform: rotate(180deg); }

/* Dropdown */
.dropdown {
  position:absolute; top:calc(100% + 10px); left:0;
  min-width: 300px;
  background:#fff; border:1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding:.5rem; opacity:0; visibility:hidden;
  transform: translateY(8px); transition: all .2s var(--ease);
}
.nav-item.open .dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a {
  display:flex; gap:.8rem; align-items:flex-start;
  padding:.7rem .8rem; border-radius:8px; color:var(--text-primary);
}
.dropdown a:hover { background: var(--light-bg); text-decoration:none; }
.dropdown .dd-ico {
  flex:none; width:38px; height:38px; border-radius:8px;
  background: var(--light-bg); color: var(--teal-dark);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
}
.dropdown .dd-ico svg { width:20px; height:20px; }
.dropdown strong { display:block; font-size:.96rem; font-weight:700; color:var(--navy); }
.dropdown small { display:block; font-size:.82rem; color:var(--text-muted); line-height:1.4; }

.nav-cta { display:flex; align-items:center; gap:.6rem; }

/* Hamburger */
.nav-toggle {
  display:none; width:44px; height:44px; border:none; background:none;
  cursor:pointer; padding:10px; border-radius:8px;
}
.nav-toggle:hover { background: var(--line-soft); }
.nav-toggle span { display:block; height:2.5px; background:var(--navy); border-radius:2px; margin:5px 0; transition: all .25s var(--ease); }
.nav-toggle.active span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 980px){
  .nav-toggle { display:block; position:relative; z-index:102; }
  /* Panel stays WITHIN the viewport (right:0, width:85vw => spans 15vw–100vw),
     so it can never create horizontal overflow. Toggled with visibility/opacity,
     not an off-screen slide. */
  .nav-menu {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(380px, 85vw);
    flex-direction: column; align-items: stretch; gap:0;
    background:#fff; padding: 88px 22px 32px;
    box-shadow: -20px 0 50px rgba(8,22,40,.22);
    overflow-y:auto; z-index:101;
    visibility:hidden; opacity:0; pointer-events:none;
    transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav-menu.open { visibility:visible; opacity:1; pointer-events:auto; transform: translateY(0); }
  .nav-link { padding:.9rem .6rem; font-size:1.05rem; justify-content:space-between; border-radius:8px; }
  .dropdown {
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; min-width:0; padding:.2rem 0 .4rem .6rem;
    max-height:0; overflow:hidden; transition:max-height .3s var(--ease);
  }
  .nav-item.open .dropdown { max-height:600px; }
  .nav-cta { padding-top:1rem; border-top:1px solid var(--line); margin-top:.5rem; }
  .nav-cta .btn { width:100%; justify-content:center; }
  .nav-cta .topbar-phone { display:none; }
  .nav-backdrop {
    position:fixed; inset:0; background:rgba(8,22,40,.45);
    opacity:0; visibility:hidden; transition:opacity .3s; z-index:99;
  }
  .nav-backdrop.show { opacity:1; visibility:visible; }
}

/* =================================================================
   HERO
   ================================================================= */
.hero {
  position: relative; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(29,158,117,.18), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(28,63,110,.45), transparent 55%),
    linear-gradient(160deg, var(--navy-near) 0%, var(--navy-deep) 55%, #0a2a52 100%);
  color:#dfe8f5;
}
.hero::before {  /* subtle grid */
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(900px 600px at 70% 20%, #000, transparent 75%);
  pointer-events:none;
}
.hero-inner {
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.05fr 1.1fr; gap: 56px; align-items:center;
  /* vertical only — horizontal padding comes from .container (this element is .container.hero-inner) */
  padding-top: 88px; padding-bottom: 96px;
}
.hero h1 { color:#fff; margin-bottom:1.1rem; }
.hero h1 em { font-style:normal; color:#5fd6ab; }
.hero-sub { font-size: 1.22rem; color:#c2d2e8; max-width: 36ch; margin-bottom: 2rem; }
.hero-cta { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.hero-trust {
  margin-top: 2.4rem; display:flex; align-items:center; gap:1rem;
  font-size:.92rem; color:#9fb4d2;
}
.hero-trust .pill {
  display:inline-flex; align-items:center; gap:.5rem;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  padding:.45rem .8rem; border-radius:999px; color:#cfe0f4; font-weight:600; font-size:.85rem;
}
.hero-trust .pill svg { width:15px; height:15px; color:#5fd6ab; }

/* Hero product image */
.hero-media { position:relative; }
.hero-media img {
  width:100%; border-radius: 12px;
  box-shadow: var(--shadow-lg);
}
.hero-media .glow {
  position:absolute; inset:-8% -6% -12% -6%; z-index:-1;
  background: radial-gradient(closest-side, rgba(29,158,117,.35), transparent 70%);
  filter: blur(40px);
}
.hero-badge {
  position:absolute; left:-18px; bottom:26px;
  background:#fff; color:var(--navy); border-radius:12px;
  box-shadow: var(--shadow-md); padding:.85rem 1.1rem;
  display:flex; align-items:center; gap:.7rem; font-weight:700; font-size:.92rem;
}
.hero-badge .dot { width:10px;height:10px;border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(29,158,117,.2); }

@media (max-width: 980px){
  .hero-inner { grid-template-columns: 1fr; gap:40px; padding-top:60px; padding-bottom:70px; }
  .hero-sub { max-width:none; }
  .hero-badge { left: 10px; }
}

/* Narrow phones: let CTAs wrap and stack full-width so long button text never clips */
@media (max-width: 600px){
  .btn { white-space: normal; text-align: center; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn,
  .hero-cta .link-arrow { width: 100%; justify-content: center; text-align: center; }
}

/* =================================================================
   CUSTOMER LOGO STRIP
   ================================================================= */
.logos { background:#fff; border-bottom:1px solid var(--line-soft); }
.logos .container { padding-top:40px; padding-bottom:40px; }
.logos-title {
  text-align:center; font-size:.82rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:28px;
}
.logos-row {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap: 44px;
}
.logos-row img {
  height: 38px; width:auto; object-fit:contain;
  filter: grayscale(100%); opacity:.62; transition: all .25s;
}
.logos-row img.tall { height: 52px; }
.logos-row img:hover { filter: grayscale(0%); opacity:1; }
@media (max-width:680px){ .logos-row { gap:28px; } .logos-row img { height:30px; } .logos-row img.tall{height:40px;} }

/* Scrolling logo marquee (Australian companies first) */
.logos-marquee{ position:relative; overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.logos-track{ display:flex; align-items:center; gap:56px; width:max-content; animation:logos-scroll 75s linear infinite; }
.logos-marquee:hover .logos-track{ animation-play-state:paused; }
.logos-track img{ height:40px; width:auto; object-fit:contain; filter:grayscale(100%); opacity:.6; transition:filter .25s,opacity .25s; flex:none; }
.logos-track img.tall{ height:54px; }
.logos-marquee:hover .logos-track img{ filter:grayscale(0%); opacity:.95; }
@keyframes logos-scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (max-width:680px){ .logos-track{ gap:40px; } .logos-track img{ height:30px;} .logos-track img.tall{ height:40px;} }
@media (prefers-reduced-motion:reduce){ .logos-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto;} .logos-marquee{ -webkit-mask-image:none; mask-image:none;} }

/* =================================================================
   FEATURE ROWS (alternating image / text)
   ================================================================= */
.feature-row {
  display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center;
}
.feature-row + .feature-row { margin-top: 96px; }
.feature-row.reverse .feature-media { order: 2; }
.feature-media {
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg,#eef3fb,#dfe8f5);
  padding: 18px; border:1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.feature-media img { border-radius: 8px; box-shadow: 0 6px 18px rgba(13,26,46,.12); width:100%; }
.feature-text .eyebrow { margin-bottom:.6rem; }
.feature-text h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom:.7rem; }
.feature-text p { color: var(--text-muted); font-size:1.08rem; }
.feature-list { list-style:none; padding:0; margin: 1.2rem 0 1.6rem; }
.feature-list li { position:relative; padding-left: 1.9rem; margin-bottom:.7rem; color:var(--text-primary); }
.feature-list li::before {
  content:""; position:absolute; left:0; top:.35em;
  width:18px; height:18px; border-radius:50%;
  background: var(--teal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
}
@media (max-width: 900px){
  .feature-row { grid-template-columns:1fr; gap:36px; }
  .feature-row.reverse .feature-media { order:0; }
  .feature-row + .feature-row { margin-top:64px; }
}

/* =================================================================
   CAPABILITY CARDS (compact grid w/ icons)
   ================================================================= */
.cap-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:24px; }
.cap-card {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
.cap-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color:#cfdaee; }
.cap-ico {
  width:50px; height:50px; border-radius:12px; margin-bottom:18px;
  background: linear-gradient(150deg, rgba(29,158,117,.16), rgba(28,63,110,.12));
  display:flex; align-items:center; justify-content:center; color:var(--teal-dark);
}
.cap-ico svg { width:26px; height:26px; }
.cap-card h3 { font-size:1.12rem; margin-bottom:.4rem; }
.cap-card p { color:var(--text-muted); font-size:.96rem; margin-bottom:.8rem; }
.cap-card a { font-weight:700; font-size:.92rem; color:var(--teal-dark); }
@media (max-width:1000px){ .cap-grid { grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .cap-grid { grid-template-columns:1fr;} }

/* =================================================================
   STATS BAND
   ================================================================= */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat .num { font-size: clamp(2.2rem,4vw,3rem); font-weight:900; color:#fff; letter-spacing:-.03em; line-height:1; }
.stat .num span { color:#5fd6ab; }
.stat .lbl { color:#aebfd6; font-size:.95rem; margin-top:.5rem; }
@media (max-width:680px){ .stats { grid-template-columns:repeat(2,1fr); gap:32px 16px; } }

/* =================================================================
   AVANTEX PARTNER BAND
   ================================================================= */
.partner {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#dfe8f5; border-radius: var(--radius-lg); overflow:hidden;
  position:relative;
}
.partner-inner {
  display:grid; grid-template-columns: 1.4fr 1fr; gap:40px; align-items:center;
  padding: 48px 52px;
}
.partner h2 { color:#fff; font-size:1.9rem; }
.partner p { color:#c2d2e8; font-size:1.08rem; margin-bottom:0; }
.partner .au-flag { font-size:1.1rem; }
.partner-side { text-align:left; }
.partner-side .partner-facts { list-style:none; margin:0 0 1.4rem; padding:0; }
.partner-side .partner-facts li {
  display:flex; gap:.7rem; align-items:center; margin-bottom:.7rem; color:#dfe8f5; font-weight:600;
}
.partner-side .partner-facts svg { width:20px; height:20px; color:#5fd6ab; flex:none; }
@media (max-width: 860px){
  .partner-inner { grid-template-columns:1fr; padding:36px 28px; gap:28px; }
}

/* =================================================================
   COMPARISON TEASER CARDS
   ================================================================= */
.compare-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.compare-card {
  display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; transition: all .2s var(--ease); color:inherit;
}
.compare-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#cfdaee; text-decoration:none; }
.compare-card .vs { font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.compare-card h3 { font-size:1.25rem; margin:.4rem 0 .5rem; color:var(--navy); }
.compare-card p { color:var(--text-muted); font-size:.96rem; margin-bottom:1rem; }
.compare-card .go { color:var(--teal-dark); font-weight:700; font-size:.92rem; }
@media (max-width:900px){ .compare-grid { grid-template-columns:1fr; } }

/* =================================================================
   COMPARISON TABLE (proper enterprise table)
   ================================================================= */
.cmp-table-wrap { overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow-md); }
.cmp-table { width:100%; border-collapse:collapse; min-width: 680px; background:#fff; }
.cmp-table th, .cmp-table td { padding: 18px 22px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.cmp-table thead th { background: var(--navy-deep); color:#fff; font-size:1rem; font-weight:700; border-bottom:none; }
.cmp-table thead th:first-child { background: var(--navy-near); }
.cmp-table thead th.col-us { background: var(--teal-dark); position:relative; }
.cmp-table tbody th { font-weight:700; color:var(--navy); width:26%; background:var(--light-bg); }
.cmp-table td { color:var(--text-muted); font-size:.97rem; }
.cmp-table td.us { color:var(--text-primary); font-weight:600; background:rgba(29,158,117,.06); }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom:none; }
.cmp-yes, .cmp-no, .cmp-part { display:inline-flex; align-items:center; gap:.4rem; font-weight:700; }
.cmp-yes { color: var(--teal-dark); }
.cmp-no  { color: var(--red); }
.cmp-part{ color: #b8860b; }
.cmp-ic { width:18px; height:18px; flex:none; }

/* Comparison table -> stacked cards on mobile (no horizontal scrolling) */
@media (max-width: 700px){
  .cmp-table-wrap { overflow: visible; border: none; box-shadow: none; border-radius: 0; }
  .cmp-table { min-width: 0; background: none; }
  .cmp-table thead { display: none; }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; width: 100%; }
  .cmp-table tr {
    background:#fff; border:1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); margin-bottom: 16px; overflow: hidden;
  }
  .cmp-table tbody th {
    width:100%; background: var(--navy-deep); color:#fff;
    font-size:1rem; padding: 14px 18px;
  }
  .cmp-table td { border:none; border-bottom:1px solid var(--line-soft); padding: 12px 18px; }
  .cmp-table tr td:last-child { border-bottom:none; }
  .cmp-table td::before {
    content: attr(data-label); display:block; margin-bottom:4px;
    font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted);
  }
  .cmp-table td.us { background: rgba(29,158,117,.06); }
  .cmp-table td.us::before { color: var(--teal-dark); }
}

/* =================================================================
   FAQ
   ================================================================= */
.faq-list { max-width: 840px; margin: 0 auto; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-q {
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:1.12rem; font-weight:700; color:var(--navy);
  padding: 22px 48px 22px 0; position:relative; line-height:1.4;
}
.faq-q::after {
  content:""; position:absolute; right:6px; top:26px;
  width:18px; height:18px;
  background: var(--teal-dark);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .25s var(--ease);
}
.faq-item.open .faq-q::after { transform: rotate(135deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-a-inner { padding: 0 0 22px; color:var(--text-muted); font-size:1.05rem; }
.faq-item.open .faq-a { max-height: 600px; }

/* =================================================================
   CTA BAND
   ================================================================= */
.cta-band {
  background:
    radial-gradient(800px 400px at 85% 20%, rgba(29,158,117,.22), transparent 60%),
    linear-gradient(135deg, var(--navy-near), var(--navy-deep));
  color:#fff; text-align:center; border-radius: var(--radius-lg);
  padding: 64px 32px;
}
.cta-band h2 { color:#fff; max-width: 22ch; margin: 0 auto .8rem; }
.cta-band p { color:#c2d2e8; font-size:1.15rem; max-width: 50ch; margin:0 auto 2rem; }
.cta-band .hero-cta { justify-content:center; }
.cta-note { margin-top:1.4rem; font-size:.88rem; color:#9fb4d2; }

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer { background: var(--navy-near); color:#9fb4d2; padding: 64px 0 28px; }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:40px; }
.footer-brand .brand-name { color:#fff; }
.footer-brand .brand-name span { color:#5fd6ab; }
.footer-brand p { color:#8ea4c4; font-size:.95rem; max-width: 34ch; margin-top:1rem; }
.footer-col h4 { color:#fff; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer-col ul { list-style:none; margin:0; padding:0; }
.footer-col li { margin-bottom:.6rem; }
.footer-col a { color:#9fb4d2; font-size:.96rem; }
.footer-col a:hover { color:#fff; text-decoration:none; }
.footer-bottom {
  margin-top: 48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.10);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  font-size:.86rem; color:#7e94b4;
}
.footer-bottom a { color:#9fb4d2; }
.footer-partner-note { color:#8ea4c4; font-size:.9rem; max-width:60ch; margin-top:1rem; }
@media (max-width:860px){ .footer-grid { grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:520px){ .footer-grid { grid-template-columns:1fr; } }

/* =================================================================
   PAGE HERO (inner pages — smaller than home hero)
   ================================================================= */
.page-hero {
  background:
    radial-gradient(900px 500px at 85% -20%, rgba(29,158,117,.16), transparent 60%),
    linear-gradient(160deg, var(--navy-near), var(--navy-deep));
  color:#dfe8f5; padding: 64px 0 72px; position:relative; overflow:hidden;
}
.page-hero::before {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:56px 56px; mask-image: radial-gradient(700px 400px at 75% 10%, #000, transparent 75%);
}
.page-hero .container { position:relative; z-index:1; }
.page-hero .breadcrumb { font-size:.86rem; color:#9fb4d2; margin-bottom:1.2rem; }
.page-hero .breadcrumb a { color:#9fb4d2; }
.page-hero .breadcrumb a:hover { color:#fff; }
.page-hero h1 { color:#fff; max-width: 18ch; }
.page-hero.wide h1 { max-width: 24ch; }
.page-hero p { color:#c2d2e8; font-size:1.18rem; max-width: 60ch; margin-top:.6rem; }
.page-hero .hero-cta { margin-top: 1.8rem; }

/* generic prose */
.prose { max-width: 760px; }
.prose p { color: var(--text-muted); font-size:1.1rem; }
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.6rem; color:var(--navy); }

/* callout */
.callout {
  border-left: 4px solid var(--teal); background: var(--light-bg);
  padding: 22px 26px; border-radius: 0 var(--radius) var(--radius) 0; margin: 2rem 0;
}
.callout.red { border-left-color: var(--red); }
.callout strong { color: var(--navy); }
.callout p:last-child { margin-bottom:0; }

/* process steps */
.steps { counter-reset: step; display:grid; gap:20px; }
.step-item {
  display:grid; grid-template-columns: 56px 1fr; gap:20px; align-items:start;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px;
}
.step-item .step-n {
  counter-increment: step; width:46px; height:46px; border-radius:50%;
  background: linear-gradient(150deg,var(--teal),var(--navy)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.2rem;
}
.step-item .step-n::before { content: counter(step); }
.step-item h3 { font-size:1.15rem; margin-bottom:.3rem; }
.step-item p { color:var(--text-muted); margin-bottom:0; }

/* utility */
.text-center { text-align:center; }
.mt-2 { margin-top:2rem; } .mt-3 { margin-top:3rem; }
.muted { color: var(--text-muted); }
.nowrap { white-space:nowrap; }

/* =================================================================
   CO-BRAND (Avantex = Master Distributor)
   ================================================================= */
/* Hero co-brand line — Avantex logo on a white chip over the dark hero */
.hero-cobrand {
  display:flex; align-items:center; gap:.9rem; margin-top:1.8rem;
}
.hero-cobrand .chip {
  background:#fff; border-radius:10px; padding:8px 14px; display:inline-flex; align-items:center;
  box-shadow:0 8px 20px rgba(8,22,40,.30); flex:none;
}
.hero-cobrand .chip img { height:30px; width:auto; display:block; }
.hero-cobrand .label { font-size:.82rem; font-weight:700; letter-spacing:.04em; color:#cfe0f4; line-height:1.35; }
.hero-cobrand .label strong { color:#fff; display:block; font-size:.9rem; }
@media (max-width: 980px){ .hero-cobrand { flex-wrap:wrap; } }

/* Topbar Avantex mini-logo */
.topbar-logo { height:18px; width:auto; vertical-align:middle; background:#fff; border-radius:4px; padding:2px 5px; }

/* Partner band — Avantex logo card */
.partner-logo-card {
  background:#fff; border-radius:14px; padding:22px 24px; margin-bottom:1.5rem;
  box-shadow: var(--shadow-md); text-align:center;
}
.partner-logo-card img { height:52px; width:auto; margin:0 auto 12px; display:block; }
.partner-logo-card span {
  display:block; font-size:.78rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--navy);
}

/* Footer Avantex lockup */
.footer-avantex { display:flex; align-items:center; gap:14px; margin-top:1.5rem; }
.footer-avantex .chip { background:#fff; border-radius:10px; padding:9px 13px; display:inline-flex; flex:none; }
.footer-avantex .chip img { height:30px; width:auto; display:block; }
.footer-avantex span { font-size:.82rem; color:#9fb4d2; font-weight:600; line-height:1.4; }
.footer-avantex span strong { color:#fff; display:block; }

/* =================================================================
   VIDEO SECTION (YouTube click-to-play facade)
   ================================================================= */
.video-section .section-head p { color:#c2d2e8; }
.video-frame { max-width: 940px; margin: 0 auto; }
.video-embed {
  position:relative; width:100%; padding-bottom:56.25%; height:0;
  border-radius:16px; overflow:hidden; box-shadow: var(--shadow-lg);
  background:#0a1626;
}
.video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-facade {
  position:absolute; inset:0; width:100%; height:100%;
  border:0; padding:0; cursor:pointer; display:block; background:none;
}
.video-poster { width:100%; height:100%; object-fit:cover; display:block; }
.video-facade::after {  /* subtle dark wash for contrast */
  content:""; position:absolute; inset:0;
  background: radial-gradient(closest-side at 50% 50%, rgba(8,22,40,.15), rgba(8,22,40,.45));
}
.video-play {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:86px; height:86px; border-radius:50%; z-index:1;
  background: var(--red); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 34px rgba(0,0,0,.45); transition: transform .2s var(--ease), background .2s;
}
.video-facade:hover .video-play { transform:translate(-50%,-50%) scale(1.08); background: var(--red-dark); }
.video-play svg { width:34px; height:34px; color:#fff; margin-left:5px; }
.video-caption { text-align:center; color:#9fb4d2; font-size:.9rem; margin-top:16px; }