/* =========================
   AGLOVEL – Global Styles
   (Full replacement CSS)
   ========================= */

/* Fonts (safe to keep here even if <link> exists in HTML) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Slab:wght@600;700;800&display=swap');

/* ---------- Design tokens (dark by default) ---------- */
:root{
  --bg: #0b0f1a;
  --bg-2: #0e1322;
  --ink: #e6e6f0;
  --muted: #9aa3b2;
  --line: rgba(255,255,255,0.12);
  --glass: rgba(255,255,255,0.06);
  --accent: #7c3aed;   /* purple */
  --accent-2: #22d3ee; /* cyan */
  --header-h: 100px;   /* change ONE number to resize header everywhere */
  --radius: 14px;
}

/* Light mode palette – warm off-white + cream (not plain white) */
body.light, body.light-mode{
  --bg:   #fffaf3;   /* warm off-white */
  --bg-2: #f6efe3;   /* soft cream */
  --ink:  #221a10;   /* deep warm text */
  --muted:#5e5246;   /* readable small text */
  --line: rgba(0,0,0,0.12);
  --glass: rgba(255,255,255,0.92); /* luminous card */
  /* keep --accent */
}

/* ---------- Base / reset ---------- */
*{ box-sizing: border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight:400; line-height:1.6;
  color: var(--ink);
  background:
    radial-gradient(1200px 900px at 50% -10%, color-mix(in oklab, var(--accent) 14%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
.container{ max-width: 1120px; margin: 0 auto; padding: 0 20px }
.muted{ color: var(--muted) }

.display{
  font-family: 'Roboto Slab', serif;
  font-weight: 800;
  font-size: clamp(32px, 6.2vw, 52px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0 0 10px;
}
.lead{ color: var(--muted); font-size: clamp(15px, 2.6vw, 18px); margin: 0 0 22px }

/* Buttons */
.btn{
  display:inline-block; text-decoration:none;
  color:#fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.15);
  transition: transform .18s ease, filter .18s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.03) }
.btn.ghost{
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
}

/* ---------- Header (fixed on every page) ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0;
  height: var(--header-h);
  z-index: 1000;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
/* spacer DIV must be placed right after </header> in each HTML page */
#header-spacer{ height: var(--header-h); }

.nav{
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto; /* left | center | right */
  align-items: center;
  gap: 16px;
}

/* Left: logo + brand */
.brand-left{ display:flex; align-items:center; gap:12px; }
.logo{
  width: 54px; height: 54px;
  border-radius: 50%;
  object-fit: cover;
}
.brand{
  text-decoration:none; color: var(--ink);
  font-family: 'Roboto Slab', serif;
  font-weight: 700; letter-spacing:.2px;
}

/* Center: nav links (desktop) */
.links{
  display:flex; justify-content:center; align-items:center; gap:18px;
}
.links a{
  color:var(--ink); text-decoration:none; opacity:.9;
  padding:8px 12px; border-radius: 10px;
  transition: box-shadow .18s ease, opacity .18s ease, background .18s ease;
  font-weight: 600;
}
.links a:hover{ opacity:1; box-shadow: 0 0 0 1px var(--line) inset; }
.links a.is-active, .links a.active{
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 65%, transparent) inset,
              0 6px 24px rgba(0,0,0,.12);
}

/* Right: actions – theme toggle always visible, hamburger for mobile */
.right-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--glass) 100%, transparent);
  color: var(--ink);
  transition: transform .18s ease, background .18s ease;
}
.icon-btn:hover{ transform: scale(1.05); }

/* Mobile header behavior */
.hamburger{ display:none; }
@media (max-width: 900px){
  .hamburger{ display:inline-flex; }
  .links{ display:none; }       /* hide center nav by default */
  .links.open{
    display:flex;
    position:absolute; left:0; right:0; top: var(--header-h);
    flex-direction:column; gap:12px;
    padding:14px 20px;
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    border-bottom:1px solid var(--line);
  }
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  text-align:center;
  padding: 34px 0 80px;  /* header offset handled by #header-spacer */
  isolation: isolate;
}
.hero::before{
  content:"";
  position:absolute; inset: -20% -10% auto -10%;
  height: 60%;
  background: radial-gradient(900px 450px at 50% 0%,
     color-mix(in oklab, var(--accent) 28%, transparent) 0%,
     transparent 65%);
  filter: blur(18px);
  opacity:.28;
  z-index:-1;
}
body.light .hero::before, body.light-mode .hero::before{ opacity:.14 }

/* ---------- Credibility chips ---------- */
.cred{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center;
  padding: 6px 0 24px;
  color: var(--muted);
}
.cred span{
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 12px;
  background: color-mix(in oklab, var(--glass), transparent 40%);
}

/* ---------- 3-up cards ---------- */
.grid-3{
  display:grid; grid-template-columns: repeat(3,1fr); gap:16px;
  margin: 12px auto 48px;
}
.card{
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.card h3{
  margin: 0 0 8px;
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
}
.card p{ margin: 0; color: var(--muted) }

@media (max-width: 980px){
  .grid-3{ grid-template-columns: 1fr; }
}

/* ---------- App teaser (supports single screenshot) ---------- */
.app-teaser{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items:center;
  margin-bottom: 70px;
}
.teaser-copy h2{
  margin: 0 0 8px;
  font: 700 clamp(22px, 4vw, 32px) 'Roboto Slab', serif;
}
.teaser-copy p{ margin: 0 0 14px; color: var(--muted) }

.teaser-images{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.teaser-images.single{ display:flex; justify-content:center }
.teaser-images.single .frame{ max-width: 720px; width:100%; margin: 0 auto; }

.frame{
  background:
    radial-gradient(120% 120% at 20% 0%, color-mix(in oklab, var(--accent) 35%, transparent), transparent 60%),
    var(--glass);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:10px;
  box-shadow: 0 10px 30px color-mix(in oklab, black 18%, transparent);
}
.frame img{ display:block; width:100%; height:auto; border-radius: 12px }

@media (max-width: 980px){
  .app-teaser{ grid-template-columns: 1fr; }
  .teaser-images{ grid-template-columns: 1fr 1fr }
}

/* ---------- Impact metrics (circles) ---------- */
.impact{ text-align:center; padding: 3.2rem 1rem; }
.metrics{
  display:flex; justify-content:center; align-items:flex-start;
  gap: clamp(16px, 5vw, 48px); flex-wrap:wrap;
  margin: clamp(20px, 6vw, 52px) auto;
}
.metric{ display:flex; flex-direction:column; align-items:center; text-align:center; min-width: clamp(120px, 28vw, 200px); }

.metric-number{
  display:grid; place-items:center;
  width: clamp(90px, 22vw, 140px);
  height: clamp(90px, 22vw, 140px);
  border-radius: 50%;
  background: radial-gradient(110% 110% at 30% 30%, rgba(124,58,237,0.25), rgba(37,99,235,0.15) 60%, transparent 100%),
              linear-gradient(180deg, rgba(124,58,237,0.25), rgba(37,99,235,0.15));
  border: 1px solid var(--line);
  box-shadow: 0 6px 30px rgba(0,0,0,0.25) inset, 0 2px 10px rgba(0,0,0,0.15);
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(28px, 7vw, 40px);
  letter-spacing: .4px;
  user-select:none;
}
.metric-number.long{
  font-size: clamp(24px, 6vw, 34px);
  width: clamp(120px, 28vw, 170px);
  height: clamp(120px, 28vw, 170px);
}
.metric-label{
  margin-top: 10px;
  max-width: 14ch;
  line-height: 1.25;
  color: var(--muted);
}
@media (max-width:420px){ .metric-label{ max-width: 16ch } }

/* ---------- About split & CEO photo ---------- */
.about-split{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:start; margin-bottom:48px;
}
.about-copy h2{
  margin:0 0 8px;
  font: 700 clamp(22px, 4vw, 30px) 'Roboto Slab', serif;
}
.about-copy h3{ margin:18px 0 8px }
.about-photo{ text-align:center; }
.avatar{
  width: 320px; height: 320px; border-radius:50%; object-fit:cover;
  border: 2px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  margin: 40px auto 6px;
}
.caption{ font-size: 12px; color: var(--muted); }
@media (max-width: 900px){
  .about-split{ grid-template-columns:1fr; }
  .about-photo{ order:2; }
}

/* ---------- Agencies list ---------- */
.agency-list{ list-style:none; padding:0; margin:8px 0 0; display:grid; gap:8px }
.agency-list li{ display:flex; align-items:center; gap:10px }
.agency-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:999px;
  border:1px solid var(--line); background: var(--glass);
}
.agency-icon{ width:18px; height:auto; opacity:.92; display:block }
.agency-name{ color: var(--ink); opacity:.9; font-size:14px }

/* ---------- Contact grid ---------- */
.contact-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:14px; margin: 10px 0 60px;
}
.contact-card{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink);
  background: var(--glass); border:1px solid var(--line); border-radius:14px;
  padding:14px; transition: transform .18s ease, border-color .18s ease;
}
.contact-card:hover{ transform: translateY(-2px); border-color: color-mix(in oklab, var(--accent) 35%, var(--line)); }
.icon-circle{
  width:44px; height:44px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 70%, var(--glass));
}
.contact-meta h3{ margin:0 0 4px; font-size:16px; font-weight:700; font-family:'Roboto Slab', serif }
.contact-meta p{ margin:0; font-size:13px }
.contact-meta p.email{
  font-size:.95rem; letter-spacing:.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding: 18px 0; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:nowrap; }
.footer-logo{ width:28px; height:28px; object-fit:cover; border-radius:50% }
.footer-brand{ display:flex; align-items:center; gap:10px }
.footer-brand small{ white-space:nowrap; }        /* keep © line in one line */
@media (max-width: 380px){
  .footer-inner small{ font-size:12px; }          /* small safety on tiny phones */
}

/* ---------- Forms (waitlist) ---------- */
.form{ display:flex; flex-direction:column; gap:14px; max-width:420px; margin: 24px auto 0 }
.form input{
  padding: 12px 14px; border-radius: 10px; border:1px solid var(--line);
  background: var(--glass); color: var(--ink);
}
.form input::placeholder{ color: var(--muted) }
#submitBtn[disabled]{ opacity:.6; cursor:not-allowed }

/* ---------- Toast + loading ---------- */
.toast{
  position: fixed; right:20px; bottom:20px; z-index: 9999;
  background: var(--glass); border: 1px solid var(--line);
  color: var(--ink); padding:12px 14px; border-radius:12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(10px);
  animation: toast-in .25s ease forwards, toast-out .3s ease 3.0s forwards;
}
.toast.success{ border-color:#16a34a80 }
.toast.error  { border-color:#dc262680 }
.toast.info   { border-color:#2563eb80 }
@keyframes toast-in{ to{ opacity:1; transform: translateY(0) } }
@keyframes toast-out{ to{ opacity:0; transform: translateY(8px) } }
.btn.loading{ position:relative; pointer-events:none; opacity:.75 }
.btn.loading::after{
  content:""; position:absolute; right:10px; top:50%; width:14px; height:14px;
  border-radius:50%; border:2px solid currentColor; border-left-color:transparent;
  transform: translateY(-50%); animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: translateY(-50%) rotate(360deg) } }

/* ---------- Small polish ---------- */
a, .btn{ transition: all .2s ease }
a:hover, .btn:hover{ opacity:.96 }
section, header, footer{ animation: fadeInUp .6s ease both }
@keyframes fadeInUp{ from{ opacity:0; transform: translateY(10px) } to{ opacity:1; transform: none } }

/* ---------- Mobile tweaks ---------- */
@media (max-width: 720px){
  .logo{ width:44px; height:44px }
  .btn{ padding: 9px 12px }
}

/* ---------- Fixed header on mobile (pinned) ---------- */
@media (max-width: 900px){
  .site-header{
    position: fixed !important; top: 0; left: 0; right: 0;
    z-index: 2000; will-change: transform; transform: translateZ(0);
  }
  .links{ display:none; }
  .links.open{
    display:flex; position:absolute; left:0; right:0; top: var(--header-h);
    flex-direction:column; gap:12px; padding:14px 20px;
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    border-bottom:1px solid var(--line);
  }
  #header-spacer{ height: var(--header-h) !important; }
  .right-actions{ display:flex; align-items:center; gap:10px; } /* keep theme toggle visible */
}

/* ---------- Nav layout & hamburger ---------- */
.nav{
  display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:16px;
}
.hamburger{
  width:40px; height:40px; padding:0; aspect-ratio:1 / 1;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ---------- HOME teaser (leave as-is, only mobile clarity)
   No desktop override; using existing defaults. ---------- */
@media (max-width: 900px){
  #home-teaser .teaser-images{
    display:grid; grid-template-columns:1fr; gap:12px;
  }
  #home-teaser .frame{
    max-width:640px; width:100%; margin:0 auto; padding:8px;
    border-radius:10px; box-shadow:0 8px 18px rgba(0,0,0,.18);
  }
  #home-teaser .frame img{ border-radius:8px; }
}
/* ---------- PREVIEW teaser (revert to original size/layout) ---------- */
#preview-teaser .teaser-images{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* side-by-side */
  gap: 14px;
}

#preview-teaser .frame{
  padding: 10px;         /* original padding */
  border-radius: 16px;   /* original roundness */
}

#preview-teaser .frame img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
/* === PREVIEW PAGE — HARD OVERRIDE (smaller cards, side-by-side) === */
/* Assumes your preview section has: <section class="app-teaser" id="preview-teaser"> */

#preview-teaser .teaser-images{
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

#preview-teaser .frame{
  flex: 0 0 auto !important;   /* stop auto-stretch */
  width: 200px !important;     /* << change this number to resize (e.g., 180–240) */
  max-width: 90vw !important;  /* safety on very small phones */
  margin: 0 8px 12px !important;
  padding: 10px !important;
  border-radius: 12px !important;
}

#preview-teaser .frame img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 10px !important;
}
/* PREVIEW PAGE — HARD OVERRIDE (smaller cards, side-by-side) */
#preview-teaser .teaser-images{
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}
#preview-teaser .frame{
  flex: 0 0 auto !important;
  width: 200px !important;   /* tweak 180–240px */
  margin: 0 8px 12px !important;
  padding: 10px !important;
  border-radius: 12px !important;
}
#preview-teaser .frame img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 10px !important;
}
/* === PREVIEW page: MOBILE-ONLY size control === */
/* Put this at the very bottom of styles.css */
@media (max-width: 768px){
  #preview-teaser .teaser-images{
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }

  /* Knob #1: change 220px to make each card bigger/smaller on phones (good range: 180–260px) */
  #preview-teaser .frame{
    width: 220px !important;
    max-width: 46vw !important;          /* helps keep two-up on mid phones */
    margin: 0 6px 12px !important;
    padding: 10px !important;
  }

  #preview-teaser .frame img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* On very small phones, switch to single column and use most of the width */
@media (max-width: 480px){
  #preview-teaser .teaser-images{ display: block !important; }

  /* Knob #2: change 92vw to use more/less of the screen on tiny phones */
  #preview-teaser .frame{
    width: 92vw !important;              /* try 88–96vw */
    max-width: 420px !important;
    margin: 0 auto 12px !important;
  }
}
/* Footer one-liner (mobile + desktop) */
.footer-inner{ flex-wrap:wrap; gap:10px; }

.footer-brand{
  display:flex; align-items:center; gap:8px;
  min-width:0;                    /* lets the text shrink instead of wrapping */
}
.footer-brand .footer-logo{ width:22px; height:22px; }

.footer-brand small{
  white-space: nowrap;            /* never wrap */
  line-height: 1;
  font-size: clamp(10px, 2.8vw, 12px); /* auto-shrink on small phones */
}

/* Keep footer links tidy on phones */
@media (max-width:600px){
  .site-footer .links{
    display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  }
}
/* Contact email fits neatly (single line + ellipsis) */
.contact-card{ display:flex; align-items:center; gap:12px; }
.contact-meta{ flex:1; min-width:0; } /* allow text to shrink inside flex */
.contact-meta p.email{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* On small phones, let the card use full width */
@media (max-width: 480px){
  .contact-card{ max-width:100%; }
}
/* === Contact card overflow fix (override) === */
.contact-card{
  display:flex;
  align-items:center;
  gap:12px;
  max-width:none;            /* override earlier 280px */
  text-align:left;           /* not centered */
}

.contact-meta{
  flex:1;                    /* allow meta to take remaining space */
  min-width:0;               /* critical for ellipsis inside flex */
}

.contact-meta p.email{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;        /* single-line with … */
  font-size:0.95rem;         /* a touch smaller for long addresses */
  letter-spacing:0.2px;
}

@media (max-width: 480px){
  .contact-card{ max-width:100%; }
}
/* Keep long email inside the card (desktop + mobile) */
.contact-card{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; }
.contact-card .icon-circle{ flex:0 0 44px; }
.contact-card .contact-meta{ flex:1 1 auto; min-width:0; }
a.contact-card[href^="mailto:"] .contact-meta .muted{
  display:block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Make header fixed and always aligned */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* keeps it on top */
  background-color: #fff; /* adjust if you use dark/light mode */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* optional: gives subtle depth */
}

/* Ensure body content doesn't hide behind header */
body {
  margin: 0;
  padding-top: 70px; /* match your header height */
  overflow-x: hidden; /* stops sideways scrolling/shifting */
}

/* Prevent content from overflowing */
.container {
  max-width: 100%;
  overflow-x: hidden;
  padding: 0 15px; /* keeps nice spacing on mobile */
  box-sizing: border-box;
}
/* ============= 1) Header: dark vs light, always sticky, no horizontal shift ============= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: #0b1120 !important; /* dark by default (matches dark mode) */
  color: #fff;
}

/* Light theme header */
.light .site-header{
  background: #ffffff !important;
  color: inherit;
  box-shadow: 0 1px 12px rgba(0,0,0,.06);
}

/* Keep page from wobbling sideways on mobile */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; display: block; }

/* ============= 2) Push the theme + hamburger buttons to the right safely ============= */
.right-actions{
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-right: clamp(10px, 2.5vw, 18px); /* comfy right padding */
}

/* Optional: make the whole header row align nicely */
.site-header .nav{
  display: flex;
  align-items: center;
}

/* ============= 3) Give the “Security/Compliance/Performance/Global Reach” row space ============= */
/* This targets common “chips/pills” wrappers inside the hero; harmless if a selector doesn’t exist */
.hero :where(.pills, .pill-row, .feature-tags, .chips){
  margin-top: 14px;
}

/* ============= 4) Stack the big metric circles vertically on small screens ============= */
@media (max-width: 520px){
  /* Try the most likely container names; if one matches, it will apply */
  :where(.stats, .metrics, .kpis){
    display: grid;
    grid-template-columns: 1fr;   /* one per row */
    gap: 20px;
  }
  :where(.stats, .metrics, .kpis) :where(.stat, .item){
    justify-self: center;
    text-align: center;
  }
}

/* ============= Nice-to-have: general container padding so content stays “inside” ============= */
.container{ padding-inline: clamp(16px, 4vw, 24px); }
/* ===== ABOUT PAGE LAYOUT HARDENING ===== */

/* Make the split layout stable and centered by default */
.about-split{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr; /* text | photo */
  gap: clamp(18px, 3.5vw, 32px);
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}

/* Keep text readable and inside the screen */
.about-copy{
  overflow-wrap: anywhere; /* prevents long words pushing layout */
  word-break: break-word;
}

/* CEO photo: always fit inside, never overflow */
.about-photo{ text-align: center; }
.about-photo .avatar{
  max-width: min(90vw, 360px); /* responsive cap for phones */
  width: 100%;
  height: auto;             /* keep natural aspect */
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
}

/* Extra breathing room so nothing hugs edges on phones */
@media (max-width: 900px){
  .about-split{
    grid-template-columns: 1fr;  /* stack */
    padding-inline: clamp(14px, 4vw, 22px);
    gap: 18px;
  }
  .about-copy{ text-align: left; }   /* keep body text left-aligned */
  .about-photo{ order: 2; }          /* text first, photo second */
  .about-photo .avatar{
    max-width: 78vw;                 /* a bit smaller so it never clips */
  }
}

/* Safety: no horizontal scroll anywhere */
html, body { overflow-x: hidden; }
/* === CTA + Pill row + Metrics (mobile-first) ======================= */

/* 1) Keep the two CTA buttons together and give them breathing room */
.cta-group{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:.25rem;
  margin-bottom:28px; /* pushes the pill row down from the buttons */
}

/* 2) “Security / Compliance / Performance / Global Reach” chip row */
.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;       /* row/column gap between chips */
  margin-top:8px;
  margin-bottom:24px;  /* extra space before the metrics */
}
.pill-row span{ margin:0; } /* don’t inherit random margins */

/* 3) Metrics stack vertically on phones */
.stats-grid{
  display:grid;
  grid-template-columns: 1fr; /* one column on mobile */
  gap:28px;
  align-items:center;
  margin-top:8px;
}
.stat-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.stat-item .circle{
  margin-bottom:.4rem; /* small gap between number circle & label */
}

/* 4) On wider screens, lay metrics out in three columns */
@media (min-width: 768px){
  .stats-grid{ grid-template-columns: repeat(3, 1fr); }
}
/* Stack the three .metric cards vertically on phones; 3-across on larger screens */
.impact .metrics.container{
  display: grid;
  grid-template-columns: 1fr;   /* one column on mobile */
  gap: 28px;
  align-items: center;
  justify-items: center;        /* keeps the circles centered */
}

/* back to a row on tablet/desktop */
@media (min-width: 768px){
  .impact .metrics.container{
    grid-template-columns: repeat(3, 1fr);
    justify-items: stretch;
  }
}
/* Dark mode surface for cards/panels so no white panels peek through */
.dark .card,
.dark .panel,
.dark .feature-card,
.dark .surface-card{
  background: linear-gradient(180deg, #0b1220 0%, #0b1324 100%);
  border: 1px solid rgba(255,255,255,0.08);
}

/* If any section container had a hard white bg, neutralize it in dark */
.dark .section,
.dark .container.surface {
  background-color: transparent;
}
/* --- Fix: metric circles stay centered and text fits --- */
.metric { text-align: center; }

.metric-number{
  /* keep the existing gradient/visuals you already have */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;            /* no extra vertical room */
  margin: 0 auto .5rem;      /* center the circle, add a small gap */
  border-radius: 9999px;     /* ensure perfect circle */
  transform: none !important;/* kill any leftover translateY from old layout */
  padding: 0;                /* make sure text doesn’t push outside */
  /* Optional: if your circle didn’t have explicit size before, uncomment:
  width: clamp(120px, 32vw, 180px);
  height: clamp(120px, 32vw, 180px);
  */
}

/* On small screens, keep all three stacked neatly with breathable gaps */
@media (max-width: 640px){
  .metrics.container{
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;            /* vertical spacing between the three metrics */
  }
}

/* --- Fix: rogue light panel/stripe in dark mode near feature cards --- */
/* Make all “cards/panels” respect dark background and stop any light pseudo elements */
.dark .card,
.dark .panel,
.dark .feature-card,
.dark .section-card{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Kill any light gradient/stripe overlays that may be added via ::before / ::after */
.dark .card::before,
.dark .card::after,
.dark .panel::before,
.dark .panel::after,
.dark .feature-card::before,
.dark .feature-card::after,
.dark .section-card::before,
.dark .section-card::after{
  background: transparent !important;
}
/* ----- METRICS: lock text inside the circle and center it ----- */
.metrics.container{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2.25rem;                 /* vertical spacing between items */
}

.metric{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.metric-number{
  --sz: clamp(120px, 28vw, 180px);
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  display: grid;
  place-items: center;         /* perfect centering */
  margin: 0 auto 12px !important;
  line-height: 1;
  padding: 0 !important;
  overflow: hidden;            /* never let the text spill out */
  transform: none !important;  /* cancel any leftover translate */
  box-sizing: border-box;
}

.metric-number *{
  transform: none !important;  /* belt & suspenders */
}
/* ----- DARK THEME: remove stray light backgrounds/overlays ----- */
.dark .card,
.dark .panel,
.dark .feature-card,
.dark .section-card,
.dark .container-card{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

.dark .card::before,
.dark .card::after,
.dark .panel::before,
.dark .panel::after,
.dark .feature-card::before,
.dark .feature-card::after,
.dark .section-card::before,
.dark .section-card::after,
.dark .container-card::before,
.dark .container-card::after{
  background: transparent !important;
}

/* safety: never let the page fallback to white */
html, body{ background-color:#0b1220; }  /* matches your dark gradient base */
/* Prevent weird background strips on sides */
body {
  background-color: #fdfcf9;  /* use the same color as your content background */
  margin: 0;
  padding: 0;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden; /* stop side scrolling */
}
/* === Footer: nav first, copyright last; Apple-ish columns on desktop === */
.site-footer .footer-inner{
  display:flex;
  flex-direction:column;
}

/* Put the link list on top */
.site-footer .links{ 
  order:1;
  margin-top:12px;          /* space from content above footer */
}

/* Put brand/copyright at the very bottom */
.site-footer .footer-brand{ 
  order:2;
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid rgba(0,0,0,.12);  /* tweak if on dark bg */
  font-size:14px;
  opacity:.9;
}

/* Link styling rhythm */
.site-footer .links a{
  display:block;
  padding:6px 0;
  text-decoration:none;
}
.site-footer .links a:hover{ text-decoration:underline; }

/* Desktop: four clean columns like Apple */
@media (min-width:768px){
  .site-footer .links{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px 24px;
    margin-top:0;           /* tighter on desktop */
  }
  .site-footer .footer-brand{
    margin-top:20px;
  }
}
header .logo {
  width: 70px;   /* pick your size */
  height: auto;   /* keeps proportions */
}
/* ===== Header tuning (safe overrides) ===== */

/* 1) Tiny left nudge for the logo (keeps a small breathing space) */
.brand-left img{
  margin-left: -6px;        /* try -4px to -10px as you like */
  width: 44px;              /* logo size – bump up/down */
  height: auto;
}

/* 2) Make the wordmark bigger + closer to the logo */
.brand-left{
  display: flex;
  align-items: center;
  gap: 10px;                /* reduce to 6–8px to sit closer */
}

.brand{
  font-size: clamp(22px, 6vw, 32px);  /* bigger, scales on small screens */
  font-weight: 800;                   /* keep your current font, just bolder */
  line-height: 1.05;
  margin-left: 0;                     /* kill any leftover margin */
  letter-spacing: .3px;               /* optional polish */
}

/* 3) Keep right-side buttons safe on small phones */
@media (max-width: 380px){
  .brand{ font-size: clamp(20px, 5.5vw, 28px); }
  .brand-left img{ width: 40px; }
}

/* 4) Desktop polish */
@media (min-width: 768px){
  .brand-left img{ width: 52px; margin-left: -8px; }
  .brand{ font-size: 34px; }
}
.brand { white-space: nowrap; }
.brand-left {
  display: flex;
  align-items: center;
  gap: 0px; /* reduce space between logo and text */
}

.brand-left img {
  height: 70px;  /* adjust logo size */
  margin-right: 0; /* kill extra spacing */
}

.brand {
  font-size: 1.6rem; /* bump text size */
  font-weight: 700;
  white-space: nowrap; /* keep text in one line */
}
/* Brand header font */
.brand {
  font-family: 'Inter', sans-serif;
  font-weight: 700;       /* bold */
  font-size: 1.6rem;      /* tweak bigger/smaller */
  letter-spacing: 0;      /* no extra space */
  white-space: nowrap;    /* keep one line */
}
/* Keep logo + stacked text aligned */
.brand-left {
  display: flex;
  align-items: center;
  gap: 6px;              /* space between logo and text */
}

/* Logo fixed size, no wrapping */
.brand-left img {
  width: 42px;           /* tweak as needed */
  height: auto;
  margin-left: -4px;     /* small nudge left */
  flex: 0 0 auto;        /* don’t shrink */
}

/* Stacked brand text */
.brand {
  display: flex;
  flex-direction: column; /* stack words */
  line-height: 1;         /* tighten vertical gap */
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-align: left;       /* lines align neatly to logo */
}

/* Make both words same width look balanced */
.brand .top {
  font-size: 20px;
  letter-spacing: -0.3px;
}

.brand .bottom {
  font-size: 18px;        /* can tweak smaller for balance */
  letter-spacing: -0.2px;
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* keep both lines aligned to logo */
  line-height: 1.1;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  width: max-content;  /* shrink-wraps to content width */
}

.brand .top {
  font-size: 20px;
  letter-spacing: -0.2px;
}

.brand .bottom {
  font-size: 18px;
  text-transform: uppercase;
  display: inline-block;
  width: 100%;             /* match AGLOVEL width */
  text-align: justify;     /* spread letters evenly */
}

.brand .bottom::after {
  content: "";
  display: inline-block;
  width: 100%;             /* trick: forces justify to spread */
}
/* Keep logo + text on one row, tight to each other */
.brand-left{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:6px;             /* reduce if you want it tighter */
  min-width:0;
}
.brand-left img{
  flex:0 0 auto;
  width:42px;          /* tweak 38–46px */
  height:auto;
  margin-left:-4px;    /* tiny nudge left */
}

/* Stacked wordmark */
.brand{
  display:inline-flex;
  flex-direction:column;
  width:max-content;   /* makes bottom match top width */
  line-height:1.08;
  font-family:'Inter',sans-serif;
  font-weight:700;
}

/* Top line: AGLOVEL */
.brand .top{
  font-size:20px;      /* adjust to taste */
  letter-spacing:-0.2px;
}

/* Bottom line: G R O U P stretched to same width as top */
.brand .bottom{
  display:flex;
  justify-content:space-between;  /* spreads letters edge-to-edge */
  width:100%;                     /* matches AGLOVEL width */
  text-transform:uppercase;
  font-size:18px;                 /* slightly smaller for balance */
}
.brand .bottom b{
  display:block;
  font-weight:inherit;            /* keep bold weight */
}

/* Small phones safety */
@media (max-width:380px){
  .brand-left{ gap:4px; }
  .brand-left img{ width:38px; margin-left:-6px; }
  .brand .top{ font-size:18px; }
  .brand .bottom{ font-size:16px; }
}
/* --- Left header block: logo + stacked brand --- */
.brand-left{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;   /* logo never drops to next line */
  gap:6px;            /* tighten next to logo */
  min-width:0;
}

/* Logo: fixed, tiny nudge left */
.brand-left img{
  flex:0 0 auto;
  width:42px;         /* tweak 38–46px */
  height:auto;
  margin-left:-4px;   /* small left shift */
}

/* Stacked brand block */
.brand{
  display:inline-flex;
  flex-direction:column;
  width:max-content;        /* bottom line matches top width */
  line-height:1.08;
  font-family:'Inter',sans-serif;
  font-weight:700;
}

/* Top: AGLOVEL */
.brand .top{
  font-size:20px;
  letter-spacing:-0.2px;
}

/* Bottom: G R O U P (spread to edges of top width) */
.brand .bottom{
  display:flex;
  justify-content:space-between;  /* spreads letters edge-to-edge */
  width:100%;
  text-transform:uppercase;
  font-size:18px;                 /* balance vs top */
}

/* If something else was overriding, pin it */
.brand-left,
.brand-left img,
.brand, .brand .top, .brand .bottom { all: revert-layer; }
.brand-left img {
  width: 30px;   /* try 30px, adjust up or down (20–40px range) */
  height: auto;  /* keeps proportions */
}
/* Left block stays on one row; logo + text aligned center */
.brand-left{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:6px;
  min-width:0;
}

/* Logo size (tweak width value only) */
.brand-left img{
  flex:0 0 auto;
  width:30px;         /* try 28–36px to taste */
  height:auto;
}

/* Stacked wordmark */
.brand{
  display:inline-flex;
  flex-direction:column;
  width:max-content;          /* container width = widest line (AGLOVEL) */
  line-height:1.06;
  font-family:'Inter', sans-serif;
  font-weight:700;
}

/* Top line */
.brand .top{
  font-size:18px;             /* tweak with 16–20px */
  letter-spacing:-0.2px;
}

/* Bottom line stretched to same width as top */
.brand .bottom{
  display:flex;
  justify-content:space-between; /* spreads letters edge-to-edge */
  width:100%;                     /* matches AGLOVEL width above */
  text-transform:uppercase;
  font-size:18px;                 /* same size as top for equal look */
}

/* Letters for bottom line (no italics) */
.brand .bottom i{
  font-style:normal;
  display:block;
}

/* Tiny phones safety */
@media (max-width:380px){
  .brand-left{ gap:4px; }
  .brand-left img{ width:28px; }
  .brand .top, .brand .bottom{ font-size:16px; }
}
.brand-left{
  display:flex;
  align-items:center;
  gap:2px;               /* spacing between logo and text */
}

.brand-left img{
  width:30px;             /* adjust logo size */
  height:auto;
}
.brand{ display:flex; flex-direction:column; font:700 18px/1.1 'Inter',sans-serif; }
.brand .top{ letter-spacing:-0.5px; }
.brand .bottom{
  text-transform:uppercase;
  letter-spacing:3.5px;   /* <- tweak: try 6px, 8px, 10px until it lines up */
}
.brand-left img {
  height: 60px;   /* try 50, 60, 70 until you like it */
  width: auto;    /* keeps the aspect ratio */
}
/* tighten brand stack */
header.site-header .brand-left{
  gap: 3px;               /* try 4px → 3px → 2px until it feels right */
}
header.site-header .brand-left img,
header.site-header .brand{ 
  margin: 0 !important;   /* nuke any default margins */
}
.brand-left {
  display: flex;
  align-items: center;
  gap: 0; /* make logo + text sit tight */
}

.brand-left img {
  margin-right: 0;   /* remove unwanted spacing */
  padding-right: 0;
  display: block;    /* kill inline image gap */
}
/* ---- Home hero CTAs: center as a unit & remove right-lean ---- */
main .cta-group{
  display: flex;              /* treat both buttons as a row */
  justify-content: center;    /* center the pair */
  align-items: center;
  gap: 12px;                  /* equal spacing between them */
  flex-wrap: wrap;            /* safe on small phones */
}

main .cta-group .btn{
  margin: 0 !important;       /* kill any old one-sided margins */
}

main .cta-group .btn + .btn{
  margin-left: 0 !important;  /* some templates add this and push right */
}

/* (Optional) If your eye still sees a hair of right drift, nudge 2px left */
@media (min-width: 360px){
  main .cta-group .btn:last-child{ margin-left: -2px; }
}
/* ——— Logo size (one knob) ——— */
:root { --logo-size: 35px; }   /* tweak 42–48px to taste */

header.site-header .brand-left img{
  width: var(--logo-size) !important;
  height: auto;
  display: block;
}
.caption {
  white-space: nowrap;         /* keep text on one line */
  font-size: clamp(12px, 2vw, 18px); /* shrink a bit on small screens */
  text-align: center;          /* keep it centered under the photo */
}