/* ==========================================================================
   Yemaar Technologies — Design System
   Deep navy / sapphire / violet — a network-and-security palette built to
   match the actual brand mark (blue-to-violet shield, amber node) rather than
   fight it. System fonts only (no external requests — keeps CSP locked to
   'self' and avoids third-party font CDNs).
   ========================================================================== */

:root{
  --bg:            #05070d;
  --bg-alt:        #090c16;
  --surface:       #0e1220;
  --surface-2:     #141a2c;
  --border:        #232b45;
  --border-soft:   #1a2036;

  /* Primary accent — sapphire blue, the dominant tone in the logo's shield. */
  --sapphire:        #3b7bff;
  --sapphire-bright: #7aa8ff;
  --sapphire-dim:    #1f3f8f;

  /* Secondary accent — violet, the logo's gradient partner. Used for
     gradients, glows and rare highlights — never as the only accent, so the
     site doesn't read as purple-heavy. */
  --violet:        #9b4dff;
  --violet-bright: #c08bff;

  /* Deeper jewel-tone stops used only for solid button fills — the brighter
     sapphire/violet above read beautifully as glows and gradient text, but
     white button text on them falls short of 4.5:1 contrast. These pass with
     room to spare while staying in the same hue family. */
  --sapphire-btn: #2450bf;
  --violet-btn:   #6b28ba;

  /* A restrained echo of the logo's amber node — spent only on the single
     "most popular" marker, never on primary actions. */
  --amber: #f0a93c;

  --accent-glow:        rgba(59,123,255,0.20);
  --accent-glow-violet: rgba(155,77,255,0.16);

  --text:          #eef1fb;
  --text-muted:    #a3aac4;
  --text-faint:    #656d8a;

  --danger:        #ef5f6b;
  --success:       #3fc99b;

  --radius:        10px;
  --radius-sm:     6px;
  --maxw:          1180px;

  --shadow-card:   0 4px 24px rgba(0,0,0,0.45);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--sapphire-bright); text-decoration: none; }
a:hover{ text-decoration: underline; }
h1,h2,h3,h4{ font-family: var(--font-sans); font-weight: 700; line-height: 1.2; margin: 0 0 .6em; letter-spacing: -0.01em; }
h1{ font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -0.02em; }
h2{ font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
h3{ font-size: 1.3rem; }
p{ margin: 0 0 1em; color: var(--text-muted); }
ul{ margin:0 0 1em; padding-left: 1.2em; color: var(--text-muted); }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section{ padding: 88px 0; }
.section.tight{ padding: 56px 0; }
.section-alt{ background: var(--bg-alt); }
.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color: var(--sapphire-bright); margin-bottom: 14px;
}
/* Gradient text — a direct visual quote of the logo's own blue-to-violet
   gradient, used sparingly on headline highlights and price figures. */
.gold-text{
  background: linear-gradient(100deg, var(--sapphire-bright), var(--violet-bright));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.center{ text-align:center; }
.lede{ font-size: 1.15rem; max-width: 62ch; }
.center .lede{ margin-left:auto; margin-right:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 28px; border-radius: var(--radius-sm); font-weight:700; font-size:.95rem;
  border: 1px solid transparent; cursor:pointer; transition: all .15s ease; text-decoration:none;
  white-space: nowrap;
}
.btn:hover{ text-decoration:none; }
.btn-gold{
  background: linear-gradient(135deg, var(--sapphire-btn), var(--violet-btn));
  color: #f7f9ff;
}
.btn-gold:hover{ filter: brightness(1.1); box-shadow: 0 0 0 1px var(--accent-glow), 0 8px 24px var(--accent-glow); }
.btn-outline{
  background: transparent; color: var(--text); border-color: var(--border);
}
.btn-outline:hover{ border-color: var(--sapphire); color: var(--sapphire-bright); }
.btn-block{ width:100%; }
.btn-lg{ padding: 16px 34px; font-size: 1rem; }

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(5,7,13,0.88);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 16px 24px; max-width: var(--maxw); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--text); font-weight:800; letter-spacing:.02em; font-size:1.15rem; }
.brand:hover{ text-decoration:none; }
.brand .mark{ flex:none; }
.brand .word{ color: var(--text); }
.brand .word b{ color: var(--sapphire-bright); font-weight:800; }
.brand .sub{ display:block; font-size:.55rem; letter-spacing:.28em; color: var(--text-faint); font-weight:600; margin-top:1px; }

.nav-links{ display:flex; align-items:center; gap: 18px; }
.nav-links ul > li{ position: relative; list-style:none; }
.nav-links a.top-link{
  display:block; padding: 10px 14px; color: var(--text-muted); font-weight:600; font-size:.92rem; border-radius: var(--radius-sm);
}
.nav-links a.top-link:hover{ color: var(--sapphire-bright); text-decoration:none; background: var(--surface); }
.nav-links li.active > a.top-link{ color: var(--sapphire-bright); }
.nav ul{ margin:0; padding:0; display:flex; align-items:center; gap:2px; }

.has-dropdown{ }
.dropdown{
  display:none; position:absolute; top: calc(100% + 6px); left:0; min-width: 260px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px; box-shadow: var(--shadow-card);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ display:block; }
.dropdown a{
  display:block; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-muted); font-size:.9rem; font-weight:600;
}
.dropdown a:hover{ background: var(--surface-2); color: var(--sapphire-bright); text-decoration:none; }

.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{
  display:none; background:none; border:1px solid var(--border); color:var(--text); border-radius: var(--radius-sm);
  width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer;
}

@media (max-width: 920px){
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    background: var(--bg-alt); border-bottom:1px solid var(--border-soft); padding: 10px 16px 18px;
  }
  .nav-links.open{ display:flex; }
  .nav-links ul{ flex-direction:column; align-items:stretch; width:100%; }
  .dropdown{ display:block; position:static; border:none; background:none; padding: 0 0 0 14px; box-shadow:none; }
  .has-dropdown:hover .dropdown{ display:block; }
  .nav-cta .btn-outline{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; padding: 120px 0 96px; overflow:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, var(--accent-glow), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, var(--accent-glow-violet), transparent 55%),
    radial-gradient(circle, rgba(122,168,255,0.10) 1px, transparent 1.6px) 0 0/28px 28px,
    var(--bg);
  border-bottom: 1px solid var(--border-soft);
}
.hero h1{ max-width: 16ch; }
.hero .lede{ font-size:1.2rem; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 32px; }
.hero-stats{ display:flex; gap:36px; margin-top:56px; flex-wrap:wrap; }
.hero-stats div{ }
.hero-stats b{ display:block; font-size:1.6rem; color: var(--sapphire-bright); }
.hero-stats span{ font-size:.82rem; color: var(--text-faint); }

.page-hero{
  padding: 64px 0 56px; text-align:center;
  background:
    radial-gradient(ellipse 800px 400px at 50% -20%, var(--accent-glow), transparent 60%),
    radial-gradient(circle, rgba(122,168,255,0.08) 1px, transparent 1.6px) 0 0/28px 28px,
    var(--bg);
  border-bottom: 1px solid var(--border-soft);
}
.page-hero h1{ max-width: 26ch; margin: 0 auto .5em; }
.page-hero.page-hero-photo{ position:relative; overflow:hidden; background:none; }
.page-hero.page-hero-photo::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image: var(--hero-photo); background-size:cover; background-position:center 40%;
}
.page-hero.page-hero-photo::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 800px 400px at 50% -20%, var(--accent-glow), transparent 60%),
    linear-gradient(180deg, rgba(5,7,13,0.55), rgba(5,7,13,0.92) 80%);
}
.page-hero.page-hero-photo .container{ position:relative; z-index:1; }
.breadcrumb{ font-size:.82rem; color: var(--text-faint); margin-bottom: 14px; }
.breadcrumb a{ color: var(--text-faint); }
.breadcrumb a:hover{ color: var(--sapphire-bright); }

/* ---------- Grid / Cards ---------- */
.grid{ display:grid; gap: 22px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-3{ grid-template-columns: repeat(2,1fr);} .grid-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 28px; transition: border-color .15s ease, transform .15s ease;
}
.card:hover{ border-color: var(--sapphire-dim); }
.card .icon{ color: var(--sapphire-bright); margin-bottom: 16px; }
.card h3{ margin-bottom: 8px; }
.card p{ margin-bottom: 0; font-size: .94rem; }
.card a.card-link{ display:inline-block; margin-top:14px; font-size:.88rem; font-weight:700; }

.icon{ width:34px; height:34px; }
.icon-lg{ width:44px; height:44px; }

/* ---------- Badges / tech chips ---------- */
.badge-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.tech-chip{
  border:1px solid var(--border); background: var(--surface); color: var(--text-muted);
  padding: 9px 18px; border-radius: 999px; font-size:.85rem; font-weight:600; letter-spacing:.01em;
}

/* ---------- Pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; align-items:stretch; }
.pricing-grid.cols-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px){ .pricing-grid, .pricing-grid.cols-4{ grid-template-columns:1fr; } }
.price-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 32px 26px; display:flex; flex-direction:column;
}
.price-card.featured{ border-color: var(--sapphire); box-shadow: 0 0 0 1px var(--accent-glow), var(--shadow-card); position:relative; }
.price-card.featured::before{
  content:"Most Popular"; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background: linear-gradient(135deg, var(--amber), #d98a1f); color:#1a1206; font-size:.72rem; font-weight:800;
  padding:5px 14px; border-radius: 999px; letter-spacing:.05em;
}
.price-card.premium{ border-color: var(--violet); box-shadow: 0 0 0 1px var(--accent-glow-violet), var(--shadow-card); position:relative; }
.price-card.premium::before{
  content:"Premium Onsite"; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background: linear-gradient(135deg, var(--violet-bright), var(--sapphire-bright)); color:#fff; font-size:.72rem; font-weight:800;
  padding:5px 14px; border-radius: 999px; letter-spacing:.05em;
}
.price-card h3{ color: var(--text); }
.price-amount{
  font-size: 2.1rem; font-weight:800; margin: 6px 0 4px;
  background: linear-gradient(100deg, var(--sapphire-bright), var(--violet-bright));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.price-amount span{ font-size:.95rem; color: var(--text-faint); font-weight:600; -webkit-text-fill-color: var(--text-faint); }
.price-card ul{ flex:1; list-style:none; padding:0; margin: 18px 0 22px; }
.price-card ul li{ padding: 8px 0; border-top:1px solid var(--border-soft); font-size:.92rem; color: var(--text-muted); display:flex; gap:8px; }
.price-card ul li:first-child{ border-top:none; }
.price-note{ text-align:center; color: var(--text-faint); font-size:.85rem; margin-top:22px; }

/* ---------- Process steps ---------- */
.steps{ counter-reset: step; display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
@media (max-width:900px){ .steps{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .steps{ grid-template-columns: 1fr; } }
.step{ position:relative; padding: 30px 22px 22px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); }
.step::before{
  counter-increment: step; content: counter(step, decimal-leading-zero);
  color: var(--sapphire-bright); font-weight:800; font-size:1.4rem; display:block; margin-bottom:10px; letter-spacing:.05em;
}

/* ---------- Why-us list ---------- */
.check-list{ list-style:none; padding:0; margin:0; }
.check-list li{ display:flex; gap:12px; padding: 12px 0; border-top:1px solid var(--border-soft); color: var(--text-muted); }
.check-list li:first-child{ border-top:none; }
.check-list svg{ flex:none; color: var(--sapphire-bright); margin-top:2px; }

/* ---------- Compact category / scope lists (long "what's included" style
   breakdowns, where a full check-list SVG per item would be excessive markup) ---------- */
.mini-check-list{ list-style:none; padding:0; margin:0; }
.mini-check-list li{ position:relative; padding:6px 0 6px 22px; font-size:.92rem; color: var(--text-muted); }
.mini-check-list li::before{ content:"\2713"; position:absolute; left:0; top:6px; color: var(--sapphire-bright); font-weight:700; }
.mini-list{ list-style:none; padding:0; margin:0; }
.mini-list li{ position:relative; padding:6px 0 6px 18px; font-size:.92rem; color: var(--text-muted); }
.mini-list li::before{ content:"\2013"; position:absolute; left:0; color: var(--text-faint); }

/* ---------- CTA band ---------- */
.cta-band{
  background:
    radial-gradient(ellipse 600px 300px at 20% 0%, var(--accent-glow), transparent 60%),
    radial-gradient(ellipse 600px 300px at 100% 100%, var(--accent-glow-violet), transparent 60%),
    linear-gradient(135deg, #0b0f1c, #0a0d17);
  border:1px solid var(--border);
  border-radius: 16px; padding: 56px 40px; text-align:center;
}
@media (max-width:700px){ .cta-band{ padding: 40px 22px; } }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size:.85rem; font-weight:700; color: var(--text); }
.field .hint{ font-size:.78rem; color: var(--text-faint); }
.field input[type=text], .field input[type=email], .field input[type=tel],
.field select, .field textarea, .field input[type=file]{
  background: var(--bg-alt); border:1px solid var(--border); color: var(--text);
  padding: 12px 14px; border-radius: var(--radius-sm); font-size:16px; font-family: inherit; width:100%;
  /* 16px minimum — iOS Safari auto-zooms the page on focus for any input font
     smaller than this, which is jarring on a form this long. */
}
.field textarea{ resize: vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--sapphire); box-shadow: 0 0 0 3px var(--accent-glow);
}
.field.error input, .field.error select, .field.error textarea{ border-color: var(--danger); }
.field .error-msg{ display:none; font-size:.78rem; color: var(--danger); }
.field.error .error-msg{ display:block; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }
.radio-row{ display:flex; gap:18px; flex-wrap:wrap; }
.radio-row label{ display:flex; align-items:center; gap:7px; font-weight:600; font-size:.9rem; color: var(--text-muted); }
.form-msg{ padding:14px 16px; border-radius: var(--radius-sm); font-size:.9rem; margin-bottom:18px; display:none; }
.form-msg.show{ display:block; }
.form-msg.ok{ background: rgba(63,201,155,0.12); border:1px solid var(--success); color:#a6f0d8; }
.form-msg.fail{ background: rgba(239,95,107,0.12); border:1px solid var(--danger); color:#f8b6bd; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--border-soft); background: var(--bg-alt); padding: 64px 0 28px; margin-top: 40px; }
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h4{ color: var(--text); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid ul li{ margin-bottom:10px; }
.footer-grid ul a{ color: var(--text-muted); font-size:.92rem; }
.footer-grid ul a:hover{ color: var(--sapphire-bright); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  margin-top: 48px; padding-top: 24px; border-top:1px solid var(--border-soft);
  font-size:.82rem; color: var(--text-faint);
}
.footer-bottom a{ color: var(--text-faint); }
.footer-bottom a:hover{ color: var(--sapphire-bright); }

/* ---------- Support chat widget ----------
   Themed entirely off the site's own custom properties (--bg/--surface/--border/
   --sapphire-btn/--violet-btn/--text/--font-sans) rather than hardcoded colors, so
   it always matches the current site palette and picks up future rebrands for free. */
.yc-launcher{
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--sapphire-btn), var(--violet-btn));
  border: 1px solid var(--border); color: #fff;
  border-radius: 999px; padding: 13px 20px 13px 16px;
  font-weight: 700; font-size: .92rem; cursor: pointer; font-family: var(--font-sans);
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s, transform .2s;
}
.yc-launcher:hover{ box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 0 3px var(--accent-glow); transform: translateY(-1px); }
.yc-panel{
  position: fixed; right: 22px; bottom: 88px; z-index: 200;
  width: min(360px, calc(100vw - 32px)); height: min(500px, calc(100vh - 140px));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: none; flex-direction: column; overflow: hidden;
  animation: yc-panel-in .22s ease-out;
  font-family: var(--font-sans);
}
@keyframes yc-panel-in{ from{ opacity:0; transform: translateY(10px) scale(.98); } to{ opacity:1; transform: translateY(0) scale(1); } }
.yc-panel.yc-open{ display: flex; }
.yc-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: linear-gradient(135deg, var(--sapphire-btn), var(--violet-btn));
  border-bottom: 1px solid var(--border);
  color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .02em;
}
.yc-head-actions{ display: flex; align-items: center; gap: 10px; }
.yc-head-link{ background: none; border: none; color: rgba(255,255,255,0.85); font-size: .72rem; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }
.yc-head-link:hover{ color: #fff; }
.yc-close{ background: none; border: none; color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.yc-messages{ flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.yc-msg{ max-width: 88%; padding: 9px 12px; border-radius: 10px; font-size: .87rem; line-height: 1.45; animation: yc-msg-in .18s ease-out; }
@keyframes yc-msg-in{ from{ opacity:0; transform: translateY(4px); } to{ opacity:1; transform: translateY(0); } }
.yc-msg-bot{ align-self: flex-start; background: var(--bg-alt); color: var(--text); border: 1px solid var(--border-soft); border-bottom-left-radius: 2px; }
.yc-msg-user{ align-self: flex-end; background: linear-gradient(135deg, var(--sapphire-btn), var(--violet-btn)); color: #fff; font-weight: 600; border-bottom-right-radius: 2px; }
.yc-msg-system{ align-self: center; color: var(--text-faint); font-size: .78rem; font-style: italic; }
.yc-quick-replies{ display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 2px 4px; }
.yc-chip{
  background: transparent; border: 1px solid var(--sapphire); color: var(--sapphire-bright);
  border-radius: 999px; padding: 7px 13px; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s;
}
.yc-chip:hover{ background: var(--sapphire); color: #fff; }
.yc-form{ display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border-soft); background: var(--surface); }
.yc-input{
  flex: 1; background: var(--bg-alt); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 16px; font-family: inherit;
}
.yc-input::placeholder{ color: var(--text-faint); }
.yc-input:focus{ outline: none; border-color: var(--sapphire); }
.yc-send{
  background: linear-gradient(135deg, var(--sapphire-btn), var(--violet-btn)); color: #fff; border: none; border-radius: var(--radius-sm);
  width: 40px; font-size: 1rem; cursor: pointer; font-weight: 700;
}
.yc-send:hover{ filter: brightness(1.1); }
@media (max-width: 480px){
  .yc-launcher span{ display:none; }
  .yc-launcher{ padding: 14px; }
  .yc-panel{ width: calc(100vw - 24px); right: 12px; height: min(70vh, 560px); }
}

/* ---------- Utility ---------- */
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.text-muted{ color: var(--text-muted); }
.divider{ height:1px; background: var(--border-soft); border:none; margin: 48px 0; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--sapphire); color:#f7f9ff; padding:10px 16px; z-index:1000; }
.skip-link:focus{ left:12px; top:12px; }

/* ---------- Hero background photo ----------
   Layered under the existing radial-gradient hero background via ::before so
   the gradients still glow on top of the photo instead of replacing it. */
.hero.hero-photo{ background-image: none; }
.hero.hero-photo::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image: var(--hero-photo);
  background-size: cover; background-position: center 35%;
}
.hero.hero-photo::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, var(--accent-glow), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, var(--accent-glow-violet), transparent 55%),
    linear-gradient(100deg, var(--bg) 22%, rgba(5,7,13,0.86) 55%, rgba(5,7,13,0.55) 100%);
}
.hero.hero-photo .container{ position:relative; z-index:1; }

/* ---------- Feature split (image + text) ---------- */
.feature-split{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center; }
.feature-split.reverse .feature-media{ order:2; }
@media (max-width: 860px){ .feature-split{ grid-template-columns:1fr; } .feature-split.reverse .feature-media{ order:0; } }
.feature-media{
  border-radius: var(--radius); overflow:hidden; border:1px solid var(--border);
  box-shadow: var(--shadow-card); aspect-ratio: 4/3;
}
.feature-media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Trust icon grid ---------- */
.trust-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
@media (max-width:860px){ .trust-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .trust-grid{ grid-template-columns: 1fr; } }
.trust-item{ display:flex; gap:16px; align-items:flex-start; padding:6px 0; }
.trust-item .icon{ flex:none; color: var(--sapphire-bright); }
.trust-item h4{ margin:0 0 4px; font-size:1rem; color: var(--text); }
.trust-item p{ margin:0; font-size:.88rem; }

/* ---------- Multi-CTA banner (image texture background) ---------- */
.multi-cta{
  position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border);
}
.multi-cta::before{
  content:""; position:absolute; inset:0;
  background-image: var(--cta-photo); background-size:cover; background-position:center;
}
.multi-cta::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,7,13,0.88), rgba(5,7,13,0.94));
}
.multi-cta-grid{ position:relative; z-index:1; display:grid; grid-template-columns: repeat(3,1fr); }
@media (max-width:860px){ .multi-cta-grid{ grid-template-columns:1fr; } }
.multi-cta-item{
  padding: 40px 30px; text-align:center; border-left:1px solid var(--border-soft);
}
.multi-cta-item:first-child{ border-left:none; }
@media (max-width:860px){ .multi-cta-item{ border-left:none; border-top:1px solid var(--border-soft); } .multi-cta-item:first-child{ border-top:none; } }
.multi-cta-item h3{ margin-bottom:14px; font-size:1.1rem; }

/* ==========================================================================
   v5 additions — colorful redesign (stat tiles, scenario cards, gradient
   icon bubbles, feature strip). Introduces the logo's green as a third
   accent alongside sapphire/violet, used only inside icon gradients so the
   overall palette stays calm.
   ========================================================================== */
:root{
  --green:        #2ecc71;
  --green-bright: #58e69a;
  --cyan:         #22c3e6;
}

/* --- Gradient icon bubbles ------------------------------------------------ */
.icon-bubble{
  display:inline-flex; align-items:center; justify-content:center;
  width:58px; height:58px; border-radius:16px; flex:none;
  border:1px solid var(--border);
  background: linear-gradient(135deg, rgba(59,123,255,0.18), rgba(155,77,255,0.10));
  color: var(--sapphire-bright);
  box-shadow: 0 0 22px rgba(59,123,255,0.12);
}
.icon-bubble svg{ width:28px; height:28px; }
.ib-green{
  background: linear-gradient(135deg, rgba(46,204,113,0.18), rgba(34,195,230,0.10));
  color: var(--green-bright);
  box-shadow: 0 0 22px rgba(46,204,113,0.12);
}
.ib-violet{
  background: linear-gradient(135deg, rgba(155,77,255,0.20), rgba(59,123,255,0.10));
  color: var(--violet-bright);
  box-shadow: 0 0 22px rgba(155,77,255,0.14);
}
.ib-cyan{
  background: linear-gradient(135deg, rgba(34,195,230,0.18), rgba(59,123,255,0.10));
  color: #6fdcf2;
  box-shadow: 0 0 22px rgba(34,195,230,0.12);
}

/* Colorize the existing service-card icons — rotating accents, no HTML churn */
.card > svg.icon{
  width:52px; height:52px; padding:11px; border-radius:14px;
  border:1px solid var(--border);
  background: linear-gradient(135deg, rgba(59,123,255,0.16), rgba(155,77,255,0.08));
  color: var(--sapphire-bright);
}
.grid .card:nth-child(3n+2) > svg.icon{
  background: linear-gradient(135deg, rgba(46,204,113,0.16), rgba(34,195,230,0.08));
  color: var(--green-bright);
}
.grid .card:nth-child(3n) > svg.icon{
  background: linear-gradient(135deg, rgba(155,77,255,0.18), rgba(59,123,255,0.08));
  color: var(--violet-bright);
}

/* --- Stat tiles ----------------------------------------------------------- */
.stat-panel{
  border:1px solid var(--border); border-radius:16px; background: var(--surface);
  display:grid; grid-template-columns: repeat(4,1fr); overflow:hidden;
}
.stat-tile{ padding:26px 18px; text-align:center; position:relative; }
.stat-tile + .stat-tile{ border-left:1px solid var(--border-soft); }
.stat-tile .icon-bubble{ width:48px; height:48px; border-radius:50%; margin-bottom:12px; }
.stat-tile .icon-bubble svg{ width:24px; height:24px; }
.stat-tile b{ display:block; font-size:1.45rem; color:var(--text); letter-spacing:.01em; }
.stat-tile span{ display:block; font-size:.82rem; color:var(--text-muted); margin-top:4px; line-height:1.35; }
@media (max-width:860px){ .stat-panel{ grid-template-columns:repeat(2,1fr); } .stat-tile:nth-child(n+3){ border-top:1px solid var(--border-soft); } .stat-tile:nth-child(3){ border-left:none; } }
@media (max-width:420px){ .stat-panel{ grid-template-columns:1fr; } .stat-tile + .stat-tile{ border-left:none; border-top:1px solid var(--border-soft); } }

/* --- Scenario ("problems we hear") cards ----------------------------------- */
.scenario-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .scenario-grid{ grid-template-columns:1fr; } }
.scenario-card{
  border:1px solid var(--border); border-radius:16px; background: var(--surface);
  padding:26px; display:flex; flex-direction:column; gap:16px;
  transition: border-color .18s ease, transform .18s ease;
}
.scenario-card:hover{ border-color: var(--sapphire-dim); transform: translateY(-2px); }
.scenario-card blockquote{
  margin:0; font-style:italic; color:var(--text); font-size:1.02rem; line-height:1.55;
}
.scenario-card .help-label{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); font-weight:700;
}
.scenario-card .help-link{ font-weight:700; color:var(--sapphire-bright); }

/* --- Feature strip ---------------------------------------------------------- */
.feature-strip{
  border:1px solid var(--border); border-radius:16px; background: var(--surface);
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; overflow:hidden;
}
.feature-item{ display:flex; gap:14px; align-items:flex-start; padding:24px 22px; }
.feature-item + .feature-item{ border-left:1px solid var(--border-soft); }
.feature-item .icon-bubble{ width:44px; height:44px; border-radius:50%; }
.feature-item .icon-bubble svg{ width:22px; height:22px; }
.feature-item h4{ margin:0 0 4px; font-size:.98rem; color:var(--text); }
.feature-item p{ margin:0; font-size:.84rem; color:var(--text-muted); line-height:1.45; }
@media (max-width:900px){
  .feature-strip{ grid-template-columns:repeat(2,1fr); }
  .feature-item:nth-child(n+3){ border-top:1px solid var(--border-soft); }
  .feature-item:nth-child(3){ border-left:none; }
}
@media (max-width:520px){
  .feature-strip{ grid-template-columns:1fr; }
  .feature-item + .feature-item{ border-left:none; border-top:1px solid var(--border-soft); }
}

/* --- Footer full-logo block -------------------------------------------------- */
.footer-logo{ display:block; max-width:230px; width:100%; height:auto; border-radius:14px; border:1px solid var(--border-soft); margin-bottom:14px; }