/* Core variables */
:root{--hero-scale:min(100vw / 1920, 1); --content-max: 1300px; --edge-pad:24px; --gutter:clamp(var(--edge-pad), calc((100vw - var(--content-max))/2), 400px); --header-height: 88px; --hero-copy-top: 135px; --hero-bottom-gap: 0px; --globe-width-base:1100px; --globe-right-offset: 96px;}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif; color:#1D1F2C; overflow-x:hidden}

/* Header */
.menu-bar{
  position:fixed; top:0; left:0; right:0; height: var(--header-height); z-index:1000;
  background:#170C02;
  border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.55);
}
.menu-1920{
  display:flex; align-items:center; justify-content:space-between;
  height:100%; padding:20px var(--gutter);
}
.logo{width:79px; height:auto}
.btn-cta{display:flex; align-items:center; justify-content:center; width:168px; height:51px; padding:9.5px 32px; gap:8px; background:#F58A1F; border-radius:8px; text-decoration:none}
.btn-cta-text{font-weight:500; font-size:18px; line-height:180%; color:#1D1F2C}

/* HERO */
.hero{
  background:#170C02;
  background-image: url('assets/img/Line 7.png');
  background-repeat: no-repeat;
  background-position: left 0 top 119px;
  background-size: 1381px 650.27px;
  position: relative;
  overflow: hidden;
  min-height: calc(926px * var(--hero-scale));
  display:grid; grid-template-columns: 1fr; grid-template-rows: auto;  grid-auto-rows: auto; }
.hero-stage{
  width: min(var(--content-max), calc(100vw - 2*var(--edge-pad)));
  margin: 0 auto;
  position: relative;
  padding-top: var(--hero-copy-top); /* keep Figma vertical offset */
 grid-area: 1 / 1; z-index:2; }

.hero-stage .chip{display:inline-flex; align-items:center; gap:10px; height:32px}
.hero-stage .chip img{width:24px; height:24px}
.hero-stage .chip .chip-text{font-weight:500; font-size:18px; line-height:180%; background:linear-gradient(270deg,#F58A1F 12.65%, #E9AA16 82.53%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero-stage h1{font-weight:600; font-size:64px; line-height:120%; margin:0; color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.35)}
.accent-text{background:linear-gradient(270deg,#F58A1F 12.65%, #E9AA16 82.53%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero-stage .lede{font-size:18px; line-height:180%; color:#E9E9EA; max-width:655px; margin:0; text-shadow:0 1px 12px rgba(0,0,0,.25)}
.hero-stage .globe{position:absolute; left:1034px; top:148px; width:752px; height:auto; filter:drop-shadow(0 0 80px rgba(245,138,31,.18))}

/* Metrics gutters aligned to 170px at 1920 */
.metrics{background:linear-gradient(270deg,#E9AA16 12.65%,#F58A1F 82.53%)}
.metrics-inner{
    /* aligns to 170px gutters at 1920 */
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;              /* critical: no internal spacing so last item touches right gutter */
  padding: 40px 0; width:min(var(--content-max), calc(100vw - 2*var(--edge-pad))); margin:0 auto; }
.metric .num{font-weight:700; font-size:56px}
.metric .label{opacity:.9}

/* Mobile fallback */
@media (max-width: 1024px){
  :root{ --hero-scale:1 }
  .hero{padding-top:96px}
  .hero-stage{
  position:relative; width:1920px; height:926px; margin:0 auto;
  transform:scale(var(--hero-scale)); transform-origin:top center;
  background-image: url('assets/img/Line 7.png');
  background-repeat: no-repeat;
  background-position: left 0 top 119px;
  background-size: 1381px 650.27px;
}
  
  .hero-stage .globe{position:static; width:min(640px, 90vw); margin:16px auto}
  .metrics-inner{
  width: min(1580px, calc(100vw - 48px));  /* aligns to 170px gutters at 1920 */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;              /* critical: no internal spacing so last item touches right gutter */
  padding: 40px 0;
}
}

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



main{ padding-top: var(--header-height); }

.hero-stage .hero-copy{
  display:flex; flex-direction:column; gap:24px; color:#fff;
  max-width: 655px;
}

.hero .globe{
  grid-area: 1 / 1;
  justify-self: end;
  align-self: start;
  width: calc(var(--globe-width-base) * var(--hero-scale));
  margin-right: var(--globe-right-offset);
  height: auto;
  filter: drop-shadow(0 0 80px rgba(245,138,31,.18));
  z-index: 1;
  pointer-events: none;
}


/* ============== Our Edge ============== */
.edge{
  background:#FFFFFF;
  padding: 96px 0; /* space above/below section */
}
.edge-inner{
  width: min(var(--content-max), calc(100vw - 48px));
  margin: 0 auto;
}
.edge-head{
  text-align: center;
  margin-bottom: 40px;
}
.edge-head h2{
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.2;
  color: #1D1F2C;
  margin: 0 0 12px 0;
}
.edge-sub{
  font-size: clamp(14px, 2.1vw, 16px);
  line-height: 1.8;
  color: rgba(29,31,44,.7);
  margin: 0;
}
.edge-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.edge-card{
  background:#F4F4F4;
  border-radius: 12px;
  padding: 28px 28px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 12px 30px rgba(0,0,0,0.03);
  position: relative;
}
.edge-card--dark{
  background: #1A0F05; /* very dark brown */
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.edge-card--dark::before{
  content:"";
  position:absolute; inset:-40% -20% auto auto;
  width: 420px; height: 420px;
  background: radial-gradient(35% 35% at 60% 60%, rgba(245,138,31,.55) 0%, rgba(245,138,31,.12) 55%, transparent 70%);
  filter: blur(18px);
  z-index: -1;
}
.edge-badge{
  width: 44px; height: 44px;
  border-radius: 999px;
  display:grid; place-items:center;
  background: linear-gradient(180deg, #FFA83B 0%, #F58A1F 100%);
  box-shadow: 0 6px 22px rgba(245,138,31,.35);
  margin-bottom: 16px;
}
.edge-title{
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 10px 0;
  color:#1D1F2C;
}
.edge-card--dark .edge-title{ color:#fff }
.edge-copy{
  font-size: 16px;
  line-height: 1.8;
  color: rgba(29,31,44,.75);
  margin: 0;
}
.edge-card--dark .edge-copy{ color: rgba(255,255,255,.9) }

/* Responsive */
@media (max-width: 1200px){
  .edge-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px){
  .edge{ padding: 64px 0; }
  .edge-grid{ grid-template-columns: 1fr; }
  .edge-card{ padding: 24px; }
}

/* =========================
   Testimonial (Client Quote)
   ========================= */
.testimonial{
  background:#170C02;
  padding: 72px 24px;
}
/* Canonical testimonial sizing */
.testimonial-inner{
  width: min(var(--content-max), calc(100vw - 48px));
  max-width: var(--content-max);
  margin-inline: auto;
}
/* Narrower block centered inside outer width */
.testimonial-figure{
  width: min(calc(var(--content-max) * 0.72), 980px);
  margin-inline: auto;
}
.testimonial-quote p{
  color:#fff;
  margin:0;
  font-weight:600;
  font-size: clamp(18px, 0.9vw + 10px, 30px);
  line-height: 1.55;
  letter-spacing: .02em;
}

.testimonial-figure{ margin:0; }
.testimonial-quote{
  margin: 0 0 16px 0;
  text-align: center;
}
.testimonial-attrib{
  text-align:center;
  font-weight:500;
  font-size: clamp(16px, 1vw + 12px, 24px);
  line-height: 1.5;
  color:#F58A1F;
}
/* gradient text for author */
.testimonial-attrib span{
  background: linear-gradient(270deg, #F58A1F 12.65%, #E9AA16 82.53%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* v40 tweaks: tighter alignment and scaling */
.testimonial{ 
  padding: clamp(56px, 6vw, 96px) 24px; /* responsive vertical rhythm */
}
.testimonial-attrib{
  margin-top: 16px;
  font-size: clamp(16px, 1.2vw + 12px, 22px);
  font-weight: 600;
}

/* v41: testimonial alignment – inner container matches global width,
   figure scales down within it for a tighter measure */
/* Narrower block centered inside outer width */
.testimonial-figure{
  width: min(calc(var(--content-max) * 0.72), 980px);
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 8px; /* small breathing room so text doesn't touch */
}


/* =======================
   OFFER (What we offer)
   ======================= */
.offer{
  background:#F6F7FA;
  padding: clamp(56px, 8vw, 92px) 0;
}
.offer .section-head{
  text-align:center;
  margin-bottom: clamp(28px,4vw,40px);
}
.offer h2{
  font-size: clamp(28px,2.2vw,44px);
  line-height:1.15;
  color:#101522;
  margin:0 0 12px;
}
.offer .section-sub{
  max-width: 940px;
  margin: 0 auto;
  color:#6b7380;
  font-size: clamp(14px,1vw,16px);
}

.offer .content{ width: min(var(--content-max), calc(100vw - 48px)); max-width: var(--content-max); margin:0 auto; }

.offer-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
}

.offer-card{
  background:#fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(16,21,34,0.06);
  padding: 28px;
  position:relative;
}
.offer-card h3{
  font-size: clamp(18px, 1.4vw, 22px);
  color:#1a1f2b;
  margin:14px 0 10px;
}
.offer-card p{
  color:#616a78;
  font-size: clamp(14px, .95vw, 16px);
  line-height:1.7;
  margin:0;
}
.offer-card .icon-wrap{
  width: 56px; height: 56px;
  display:grid; place-items:center;
  border-radius: 50%;
  background: radial-gradient(closest-side, #F7A21C, #E79B1E 70%, #EA8F16 100%);
  box-shadow: 0 12px 30px rgba(229,145,25,.35);
}
.offer-card .icon-wrap img{ width:32px; height:32px; display:block; }

.c-span-2{ grid-column: span 2; }
.c-span-3{ grid-column: span 3; }

/* Featured left card */
.offer-card.featured{
  color:#fff;
  background:
    radial-gradient(600px 300px at 82% 12%, rgba(241,150,25,.22), transparent 70%),
    radial-gradient(420px 280px at 10% 88%, rgba(241,150,25,.35), transparent 60%),
    #140B04;
  box-shadow: 0 18px 40px rgba(12,6,2,.65);
  overflow:hidden;
}
.offer-card.featured h3{ color:#fff; }
.offer-card.featured p{ color:#E9E9EB; }
.offer-card.featured .icon-wrap{
  background: radial-gradient(closest-side, #FFC470, #F29F1B);
  box-shadow: 0 16px 34px rgba(241,150,25,.45);
}
/* gradient border using mask */
.offer-card.featured::before{
  content:'';
  position:absolute; inset:0;
  border-radius:16px;
  padding: 1px;
  background: linear-gradient(135deg, #F58A1F 12%, #E9AA16 88%);
  -webkit-mask: 
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}

/* Responsive */
@media (max-width: 960px){
  .offer-grid{ grid-template-columns: repeat(2,1fr); }
  .c-span-3{ grid-column: span 2; }
}


/* v49: Normalize Offer icons to 44px */
.offer-card .icon-wrap{ width:44px; height:44px; }
.offer-card .icon-wrap img{ width:44px; height:44px; }

/* ===========================
   HIGHLIGHTS (Key Highlights)
   =========================== */

:root{
  /* reuse your site-wide variable; values shown per your earlier directions */
  /* --content-max: 1300px; */
  --highlights-pad-y: clamp(72px, 8vw, 120px);
  --highlights-gap: clamp(24px, 5vw, 48px);
  --highlights-left-col: clamp(280px, 30vw, 420px);
}

.highlights{
  position: relative;
  background:#170C02; /* Figma frame color */
  overflow: hidden;
}

.highlights::before{
  /* sweeping line background (bottom-right) */
  content:"";
  position:absolute;
  inset:auto -10% -6% -10%;
  height:min(90%,900px);
  background: url("assets/img/Line 8.png") no-repeat right bottom / contain;
  opacity:.45;           /* subtle as in comp */
  pointer-events:none;
}

.highlights-inner{
  width:min(var(--content-max), calc(100vw - 48px));
  margin-inline:auto;
  padding-block: var(--highlights-pad-y);
  display:grid;
  grid-template-columns: var(--highlights-left-col) 1fr;
  align-items:center;
  column-gap: var(--highlights-gap);
}

.highlights-art{
  position:relative;
  margin:0;
  aspect-ratio: 366.16 / 440.5; /* from Figma export */
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.highlights-art::before{
  /* faint, multiplied glow behind illustration (mimics Figma blend) */
  content:"";
  position:absolute;
  inset:-10% -15% -5% -15%;
  background: radial-gradient(48.66% 48.66% at 50% 50%,
              #FFD84D 0%, #FFA65C 13%, #CD7C39 17%, #A26736 20%,
              #835126 24%, #613C1D 28%, #4E2F15 33%, #25170B 38%,
              #1F1309 44%, #100904 52%, #120901 62%, #000 92%);
  mix-blend-mode: screen;
  opacity:.42;
  pointer-events:none;
}
.highlights-illus{
  width:100%;
  height:auto;
  display:block;
}

.highlights-copy{
  color:#fff;
}

.highlights-title{
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight:600;
  font-size:clamp(28px, 3.2vw, 48px);
  line-height:1.2;
  margin:0 0 24px 0;
}

.highlights-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:16px;
}

.highlights-list li{
  display:flex;
  align-items:center;
  gap:12px;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight:400;
  font-size:clamp(16px, 1.1vw, 18px); /* Figma: 18 with 180% line-height */
  line-height:1.8;
}

.highlights-list .spark{
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:block;
  /* the star icon already has the orange gradient baked in */
}

/* -------- Responsive fallbacks -------- */
@media (max-width: 900px){
  .highlights-inner{
    grid-template-columns: 1fr;
    row-gap: var(--highlights-gap);
  }
  .highlights-art{
    max-width: 420px;
    margin-inline:auto;
  }
}


/* === WE SERVE section === */
.we-serve{ padding: clamp(64px, 12vw, 120px) 0; background: transparent; }
.we-serve .section-head{ font-size: clamp(28px, 4vw, 48px); line-height:1.15; font-weight:600; color:#1D1F2C; text-align:center; margin:0 auto clamp(28px, 4vw, 48px); }
.we-serve .we-serve-chips{ display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:center; max-width:1100px; margin:0 auto; }
.we-serve .chip{ display:inline-flex; align-items:center; justify-content:center; padding:16px 32px; border-radius:99px; background: rgba(245, 138, 31, 0.10); border:2px solid #F58A1F; box-shadow:none; position:relative; }
.we-serve .chip-text{ font-size: clamp(14px, 1.3vw, 18px); font-weight:500; color:#000; line-height:1.8; letter-spacing:0.1px; white-space:nowrap; }
@media (max-width: 640px){ .we-serve{ padding:56px 0; } .we-serve .we-serve-chips{ gap:16px 12px; } .we-serve .chip{ padding:12px 18px; } }


/* === SUBSCRIBE (CTA) === */
.subscribe{ padding: clamp(56px, 10vw, 96px) 0 0; background:transparent; position:relative; }
.subscribe .subscribe-card{ display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:27px; padding:80px 40px 80px 64px; border-radius:16px; background:linear-gradient(270deg, #F58A1F 12.65%, #E9AA16 82.53%); max-width:1320px; margin:0 auto; position:relative; z-index:2; }
.subscribe .subscribe-title{ margin:0; font-weight:600; font-size:clamp(22px, 2.2vw, 32px); line-height:130%; color:#1D1F2C; max-width:520px; }
.subscribe .subscribe-form{ display:flex; align-items:center; gap:16px; background:#FFFFFF; border:0.5px solid rgba(0,0,0,0.1); border-radius:12px; padding:8px 8px 8px 24px; height:72px; }
.subscribe .subscribe-input{ border:none; outline:none; background:transparent; font-size:16px; line-height:180%; color:#1D1F2C; width:min(360px,45vw); }
.subscribe .subscribe-input::placeholder{ color:#777980; font-weight:400; }
.subscribe .subscribe-btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; background:#F58A1F; color:#1D1F2C; border:none; border-radius:8px; font-size:16px; font-weight:500; line-height:180%; cursor:pointer; }
@media (max-width:980px){ .subscribe .subscribe-card{ flex-direction:column; align-items:flex-start; gap:24px; padding:48px 24px; } .subscribe .subscribe-form{ width:100%; height:auto; padding:10px 10px 10px 16px; } .subscribe .subscribe-input{ width:100%; } }
.bottom-black{ background:#170C02; height:115px; width:100%; margin-top:-100px; }


/* === FOOTER === */
.footer{ background:#170C02; color:#FFFFFF; padding: clamp(72px, 8vw, 120px) 24px 32px; }
.footer .footer-inner{ max-width:1320px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:32px; text-align:center; }
.footer .footer-logo{ width:157px; height:auto; display:block; margin:0 auto 8px; }
.footer .footer-desc{ max-width:880px; margin:0 auto; font-size:18px; line-height:180%; font-weight:400; color:#B6B8BA; }
.footer .footer-contact{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.footer .footer-contact-title{ font-size:24px; line-height:150%; font-weight:500; color:#FFFFFF; }
.footer .footer-icons{ display:flex; gap:24px; align-items:center; justify-content:center; }
.footer .footer-icon{ display:inline-flex; text-decoration:none; }
.footer .footer-icon .icon-bg{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#FFFFFF; }
.footer .footer-icon img{ width:20px; height:20px; display:block; }
.footer .footer-bottom{ width:100%; padding:24px 0 0; }
.footer .copyright{ margin:0 auto; font-size:16px; line-height:180%; color:#D2D2D5; }
@media (max-width:640px){ .footer{ padding:64px 16px 24px; } .footer .footer-desc{ font-size:16px; } .footer .footer-contact-title{ font-size:22px; } }


/* === Edge dark card – precise border & glow === */
.edge-card--dark{
  background:#170C02;
  color:#FFFFFF;
  isolation:isolate;
  border-radius:12px;
  position:relative;
  overflow:hidden;
}
.edge-card--dark::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.5px; /* 1.5px inside stroke */
  background:
    conic-gradient(from 0deg at 50% 50%,
      #F58A1F 0deg, #F58A1F 36deg,
      #EA8F1A 38deg, #6E3E0C 40deg, #170C02 44deg,
      #6E3E0C 48deg, #EA8F1A 50deg,
      #F58A1F 52deg, #F58A1F 216deg,
      #EA8F1A 218deg, #6E3E0C 220deg, #170C02 224deg,
      #6E3E0C 228deg, #EA8F1A 230deg,
      #F58A1F 232deg, #F58A1F 360deg
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  z-index: 2;
}
.edge-card--dark::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:
    radial-gradient(205px 150px at calc(100% - 14px) 12px, rgba(245,138,31,0.90) 0%, rgba(245,138,31,0.24) 54%, transparent 76%),
    radial-gradient(205px 150px at 12px calc(100% - 12px),   rgba(245,138,31,0.86) 0%, rgba(245,138,31,0.22) 54%, transparent 76%),
    radial-gradient(190px 140px at 120px -44px,              rgba(245,138,31,0.52) 0%, rgba(245,138,31,0.12) 56%, transparent 80%),
    radial-gradient(120% 120% at 58% 44%, rgba(0,0,0,0.30) 0%, transparent 55%),
    radial-gradient(92% 92% at 52% 72%,  rgba(0,0,0,0.20) 0%, transparent 62%);
  filter: blur(16px);
  z-index: 0;
  pointer-events:none;
}


/* === Featured Offer card: apply same rounded gradient border ring === */
.offer-card.featured{
  position: relative;
  border-radius: 12px; /* keep consistent with edge card */
  overflow: hidden;    /* ensure ring clips to radius */
}
.offer-card.featured::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px; /* inside stroke thickness */
  background:
    conic-gradient(from 0deg at 50% 50%,
      /* Orange sweep with eased cuts matching .edge-card--dark */
      #F58A1F 0deg, #F58A1F 36deg,
      #EA8F1A 38deg, #6E3E0C 40deg, #170C02 44deg,
      #6E3E0C 48deg, #EA8F1A 50deg,
      #F58A1F 52deg, #F58A1F 216deg,
      #EA8F1A 218deg, #6E3E0C 220deg, #170C02 224deg,
      #6E3E0C 228deg, #EA8F1A 230deg,
      #F58A1F 232deg, #F58A1F 360deg
    );
  /* Mask to keep only the 1.5px ring */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}


/* === Mobile layout (<= 768px) — from 'Vexio Mobile version.pdf' === */
@media (max-width: 768px){
  /* Global spacing */
  .content, .metrics-inner, .edge-inner, .offer .content, .highlights-inner, .footer-inner{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* HERO: stack to single column, center text */
  .hero{ text-align:center; padding: 56px 0 32px; }
  .hero-stage{ margin: 0 auto; }
  .btn-cta{ margin-left:auto; margin-right:auto; }

  /* METRICS: 1-col list */
  .metrics-inner{ display:grid; grid-template-columns: 1fr; gap: 16px; }
  .metrics .metric{ justify-content:center; text-align:center; }

  /* EDGE: 1-col cards */
  .edge-inner{ padding-top: 24px; padding-bottom: 24px; }
  .edge-grid{ display:grid; grid-template-columns: 1fr; row-gap: 16px; }
  .edge-card{ padding: 20px; }

  /* TESTIMONIAL: tighten spacing */
  .testimonial-inner{ padding: 32px 16px; text-align:center; }

  /* OFFER: stack cards */
  .offer .content{ padding-top: 24px; padding-bottom: 24px; }
  .offer-grid{ display:grid; grid-template-columns: 1fr; row-gap: 16px; }
  .offer-card{ padding: 20px; }

  /* HIGHLIGHTS: single column */
  .highlights-inner{ display:flex; flex-direction:column; gap: 16px; text-align:center; }
  .highlights-illus{ order:-1; margin: 0 auto; }

  /* INDUSTRIES (We Serve): tighter chips */
  .we-serve{ padding: 48px 0 32px; }
  .we-serve .we-serve-chips{ gap: 12px; }
  .we-serve .chip{ padding: 10px 16px; }

  /* SUBSCRIBE CTA: already stacks; ensure full width */
  .subscribe .subscribe-card{ width: calc(100% - 32px); margin: 0 auto; }
  .subscribe .subscribe-form{ width: 100%; }
  .bottom-black{ height: 115px; margin-top: -58px; } /* half overlap on mobile */

  /* FOOTER: compact */
  .footer{ padding: 40px 16px 20px; }
  .footer .footer-desc{ font-size: 16px; }
}

/* Small phones (<= 420px): slightly tighter */
@media (max-width: 420px){
  .hero{ padding-top: 44px; }
  .edge-card, .offer-card{ padding: 16px; }
  .we-serve .chip{ padding: 8px 14px; }
}


/* === Mobile refinements v5.1 (PDF fidelity) === */
@media (max-width: 768px){
  /* HERO — left aligned like PDF, reduce spacing */
  .hero{ text-align:left; padding: 40px 0 24px; }
  .hero .content{ padding-left:16px !important; padding-right:16px !important; }
  .hero h1{ margin-bottom: 10px; max-width: 20ch; }
  .hero p{ max-width: 42ch; }
  .btn-cta{ margin-left:0; }

  /* METRICS — full-bleed gradient bar, left-aligned figures with tighter leading */
  .metrics{ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; }
  .metrics-inner{ display:grid; grid-template-columns: 1fr; gap: 8px; padding: 18px 16px !important; }
  .metrics .metric{ text-align:left; align-items:flex-start; }
  .metrics .metric h3{ line-height: 1.1; margin-bottom: 2px; }
  .metrics .metric p{ margin: 0; }

  /* SECTION TITLES */
  .section-head, .section-title, .edge h2, .offer h2{ text-align:center; margin-bottom: 12px; }

  /* EDGE — 1 col, consistent gutters */
  .edge .content{ padding-left:16px !important; padding-right:16px !important; }
  .edge-grid{ display:grid; grid-template-columns: 1fr; row-gap: 12px; }
  .edge-card{ padding: 18px; }
  .edge-card .edge-title{ font-size: 20px; line-height: 1.5; margin: 10px 0 6px; }
  .edge-card .edge-copy{ font-size: 16px; line-height: 1.8; }

  /* TESTIMONIAL — full-bleed band */
  .testimonial{ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .testimonial-inner{ padding: 28px 16px; text-align:center; }

  /* OFFER — 1 col */
  .offer .content{ padding-left:16px !important; padding-right:16px !important; }
  .offer-grid{ display:grid; grid-template-columns: 1fr; row-gap: 12px; }
  .offer-card{ padding: 18px; }

  /* HIGHLIGHTS — stack bullets under art */
  .highlights-inner{ display:flex; flex-direction:column; gap: 12px; text-align:left; padding-left:16px !important; padding-right:16px !important; }
  .highlights-illus{ order:-1; margin: 0 auto 8px; }
  .highlights li{ margin: 6px 0; }

  /* WE SERVE — two columns on most phones */
  .we-serve{ padding: 40px 0 24px; }
  .we-serve .we-serve-chips{ justify-content:center; }
  .we-serve .chip{ padding: 10px 16px; flex: 0 1 calc(50% - 12px); }

  /* SUBSCRIBE CTA — left text, full-width input */
  .subscribe .subscribe-card{ width: calc(100% - 32px); margin: 0 auto; }
  .subscribe .subscribe-title{ max-width: 22ch; }
  .subscribe .subscribe-form{ width:100%; }
  .bottom-black{ height: 115px; margin-top: -58px; }

  /* FOOTER — condensed */
  .footer{ padding: 36px 16px 18px; }
  .footer .footer-desc{ font-size: 16px; }
}

@media (max-width: 480px){
  .hero h1{ font-size: clamp(28px, 9vw, 38px); }
  .metrics-inner{ gap: 10px; }
  .edge-card, .offer-card{ padding: 16px; }
  .we-serve .chip{ flex: 0 1 calc(50% - 10px); }
}


/* === Mobile hero (v5.2) — match PDF layout === */
@media (max-width: 768px){
  .hero{
    min-height: auto;
    padding: 44px 0 18px;
    background-position: left -120px top -40px;
    background-size: 900px auto;
  }
  .hero-stage{
    width: 100%;
    padding-top: 0;
  }
  .hero-stage .chip{
    margin-left: 16px;
  }
  .hero-stage h1{
    font-size: clamp(34px, 8vw, 42px);
    line-height: 1.06;
    margin: 10px 16px 10px;
    max-width: 20ch; /* keep line breaks similar to PDF */
  }
  .hero-stage .lede{
    font-size: 14px;
    line-height: 1.7;
    margin: 0 16px;
    max-width: 42ch;
  }
  .hero-stage .globe{
    position: absolute;
    right: -120px;
    bottom: -60px;
    left: auto; top: auto;
    width: min(520px, 120vw);
    height: auto;
    filter: drop-shadow(0 0 60px rgba(245,138,31,0.18));
    opacity: 1;
  }
}


/* === Mobile fixes v5.3: header CTA alignment + hero globe stacking === */
@media (max-width: 768px){
  /* Header CTA to the far right with smaller gutters */
  .menu-1920{ padding: 12px 16px !important; }
  .menu-1920 .logo{ width: 64px; }
  .menu-1920 .btn-cta{ margin-left: auto; }

  /* Globe stacks under copy and centers */
  .hero{ background-position: left -120px top -40px; background-size: 900px auto; }
  .hero-stage{ padding-top: 0; }
  .hero-stage .globe{
    position: static !important;
    display: block;
    margin: 24px auto 0;
    width: min(560px, 100%);
    height: auto;
    filter: drop-shadow(0 18px 40px rgba(245,138,31,0.18));
  }
}


/* === Mobile hero refinements v5.4: globe size + consistent positioning during resize === */

/* Tablet & down: ensure the globe is in normal flow and can't be overridden by earlier rules */
@media (max-width: 1024px){
  .hero-stage .globe{
    position: static !important;
    display: block;
    max-width: 100%;
    height: auto;
  }
}

/* Phones: scale with viewport, keep under copy and centered */
@media (max-width: 768px){
  .hero-stage .globe{
    width: clamp(260px, 80vw, 420px);
    margin: 24px auto 0;
    transform: none; /* kill any transforms from desktop */
  }
}

/* Small phones (≤ 480px): a bit smaller and more margin above metrics */
@media (max-width: 480px){
  .hero-stage .globe{
    width: clamp(220px, 92vw, 360px);
    margin-top: 20px;
  }
}


/* === Mobile hero hard override v5.5 === */
@media (max-width: 768px){
  /* Kill grid so globe can't sit in the same grid cell as copy */
  .hero{ display: block !important; min-height: auto; }

  /* Neutralize grid placement on the image */
  .hero .globe{
    grid-area: auto !important;
    justify-self: auto !important;
    align-self: auto !important;
  }

  /* Final globe size & position */
  .hero-stage .globe, .hero .globe{
    position: static !important;
    display: block !important;
    width: clamp(220px, 88vw, 380px);
    max-width: 100%;
    height: auto;
    margin: 24px auto 0 !important;
    transform: none !important;
  }
}


/* === Mobile hero gap fix v5.6 === */
@media (max-width: 768px){
  .hero{
    min-height: 0 !important;      /* kill desktop min-height */
    padding-bottom: 0 !important;   /* no extra space under copy */
  }
  .hero-stage{
    padding-top: 0 !important;      /* remove desktop top offset */
    margin-bottom: 0 !important;
  }
}


/* === Mobile hero gap fix v5.7 === */
/* The 1024px rule sets .hero-stage { height: 92dvh; } which creates a huge gap.
   Override it for phones and small tablets. Place AFTER the 1024px block. */
@media (max-width: 1024px){
  .hero-stage{
    height: auto !important;
    min-height: 0 !important;
    transform: none !important; /* ensure no scale affects perceived size */
  }
}

@media (max-width: 768px){
  .hero-stage{
    height: auto !important;
    min-height: 0 !important;
  }
}


/* === Mobile tweak v5.8: center Metrics === */
@media (max-width: 768px){
  .metrics-inner{ justify-items: center; }
  .metrics .metric{
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .metrics .metric h3,
  .metrics .metric p{
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* === Mobile tweak v5.9: Subscribe button uses icon instead of text === */
@media (max-width: 768px){
  .subscribe .subscribe-btn{
    position: relative;
    min-width: 48px;
    width: 56px;
    height: 44px;
    padding: 0 !important;
    border-radius: 10px;
    /* keep background color from desktop */
  }
  .subscribe .subscribe-btn::before{
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    background: url("assets/subscribe/sent.png") no-repeat center / contain;
  }
  /* Visually hide text but keep it for screen readers */
  .subscribe .subscribe-btn{ font-size: 0; }
  .subscribe .subscribe-btn:after{ content: "Book A Demo"; position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}


/* === Mobile tweak v5.10: center the subscribe title === */
@media (max-width: 768px){
  .subscribe .subscribe-title{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}