:root{
  /* Pulled to match your logo */
  --brand-1: #0494E6;  /* Meraki blue */
  --brand-2: #B32029;  /* Enterprises deep red */

  --brand-1-soft: #D5F1FF;
  --brand-2-soft: #FFD6DC;

  --ink:#0f172a;
  --ink-2:#334155;
}


/* basics */
.section { 
  padding: 64px 0; 
}

.section-head { 
  margin-bottom: 24px; 
}

.eyebrow { 
  display: inline-block; 
  font-weight: 700; 
  letter-spacing: .06em; 
  text-transform: uppercase; 
  font-size: .8rem; 
  color: var(--ink-2); /* neutral — correct */
}

.gradient-text { 
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); 
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent;
}


/* ===========================
   🔹 Modern Glassy Topbar
   =========================== */

.glassy-topbar {
  background: linear-gradient(90deg, rgba(15,23,42,0.9), rgba(15,23,42,0.7) 40%, rgba(15,23,42,0.9));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;
}

/* soft gradient light overlay moving */
.glassy-topbar::after {
  content: "";
  position: absolute;
  top: 0; left: -30%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
  transform: skewX(-20deg);
  animation: shimmerMove 6s linear infinite;
}
@keyframes shimmerMove {
  0% { left: -40%; }
  100% { left: 120%; }
}

/* Pills */
.pill {
  padding: 0.3rem 0.75rem;
  border-radius: 50rem;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden; 
  z-index: 0;
}
.pill.glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.pill:hover::before {
  opacity: 1;
}
.pill:hover {
  color: #0f172a !important;  
  background: transparent;
}
.pill span {
  position: relative;
  z-index: 2;
}

/* Icons & Actions */
.top-action {
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
  text-decoration: none;
  padding: 0.25rem 0.4rem;
  transition: all 0.25s ease;
  border-radius: 6px;
}
.top-action:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
  transform: translateY(-1px);
}
.text-gradient {
  background: linear-gradient(90deg, #007fce, #0494E6, #7ac8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hide scrollbar for pill row */
.small-hide-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.small-hide-scroll::-webkit-scrollbar {
  display: none;
}

/* Shimmer glow effect on pills  
   🔄 Updated from yellow glow → brand-1 / brand-2 glow */
@keyframes glowPulse {
  0%, 100% { 
    box-shadow: 0 0 0px rgba(4,148,230,0);   /* brand-1 */
  }
  50% { 
    box-shadow: 0 0 12px rgba(179,32,41,0.55); /* brand-2 */
  }
}

.pill.glow {
  animation: glowPulse 3s infinite ease-in-out;
}


/* =========================================
   🔹 Modern Header / Navbar Styling
   ========================================= */

/* main header container */
.main-header {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92),
    rgba(240, 248, 255, 0.92)
  );
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(4, 148, 230, 0.12); /* subtle blue tint */
  transition: all 0.3s ease;
  z-index: 1030;
}


/* when scrolled add subtle shadow and shrink */
.main-header.scrolled {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  padding-block: 2px;
  background: rgba(255,255,255,0.98);
}

/* nav */
.navbar {
  padding-block: 0.6rem;
}

/* brand logo */
.navbar-brand img {
  transition: transform 0.3s ease;
}
.navbar-brand:hover img {
  transform: scale(1.05);
}

/* nav links */
.navbar .nav-link {
  position: relative;
  font-weight: 600;
  color: var(--ink-2);
  font-size: 0.95rem;
  margin: 0 0.4rem;
  padding: 0.5rem 0.6rem;
  transition: color 0.3s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: var(--ink);
}

/* animated underline */
.navbar .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(
    90deg,
    rgba(4, 148, 230, 0.2),
    rgba(4, 148, 230, 0.85)
  );
  box-shadow: 0 0 8px rgba(4, 148, 230, 0.4);

  border-radius: 2px;
  transition: width 0.3s ease;
}

.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
  width: 100%;
}

/* CTA button (Request a Quote) */
.btn-gradient {
  background: linear-gradient(
    90deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
  color: #ffffff;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(4, 148, 230, 0.35);
  transition: all 0.3s ease;
}

.btn-gradient:hover {
  transform: translateY(-2px);
  background: linear-gradient(
    90deg,
    #0494E6,
    #33B4FF,
    #67C8FF
  );
  box-shadow: 0 10px 22px rgba(4, 148, 230, 0.45);
}


/* mobile toggler */
.navbar-toggler {
  outline: none;
}
.navbar-toggler:focus {
  box-shadow: none;
}
.navbar-toggler i {
  transition: transform 0.3s ease;
}
.navbar-toggler[aria-expanded="true"] i {
  transform: rotate(90deg);
}

/* Mobile menu background */
@media (max-width: 991px) {
  .navbar-collapse {
    background: rgba(255,255,255,0.98);
    border-radius: 1rem;
    margin-top: 0.6rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    padding: 1rem;
  }
  .navbar-nav .nav-link {
    margin: 0.25rem 0;
    padding: 0.5rem;
  }
}



/* ===== Base hero background ===== */
.hero {
  background:
    radial-gradient(1000px 500px at 70% -20%, rgba(4,148,230,0.10), transparent 70%),
    radial-gradient(1200px 600px at 0% 30%, rgba(4,148,230,0.06), transparent 80%),
    linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  position: relative;
}


/* Decorative glow */
.hero-glow{
  position:absolute; right:-12%; top:-18%;
  width:520px; height:520px; border-radius:50%;
  filter: blur(60px); opacity:.35; pointer-events:none;
  background: radial-gradient(closest-side, var(--brand-2), transparent 70%);
  animation: glowFloat 12s ease-in-out infinite alternate;
}
@keyframes glowFloat{ from{ transform: translateY(0);} to{ transform: translateY(16px);} }

/* Eyebrow + gradient text */
.eyebrow{
  font-size:.82rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink);
  padding:.35rem .75rem; border-radius:999px;
  background: rgba(0,0,0,.04);
  border:1px solid rgba(15,23,42,.08);
}
.eyebrow .dot{
  width:.5rem; height:.5rem; border-radius:50%;
  background: linear-gradient(90deg,var(--brand-1),var(--brand-2));
  display:inline-block;
}
.gradient-text{
  background-image: linear-gradient(90deg,var(--brand-1),var(--brand-2));
  -webkit-background-clip: text; background-clip:text; color:transparent;
}

/* Chips */
.chip{
  padding:.45rem .75rem; border-radius:9999px;
  background: rgba(15,23,42,.06); color:#334155; font-weight:600; font-size:12px;
  border:1px solid rgba(51,65,85,.15); white-space:nowrap;
}

/* Stats */
.hero-stats .stat{
  background:#fff; border:1px solid rgba(15,23,42,.06);
  border-radius:1rem; padding:.9rem .75rem; text-align:center;
  box-shadow:0 8px 20px rgba(15,23,42,.05);
}
.stat-val{ font-size:1.4rem; font-weight:800; color:var(--ink); line-height:1; }
.stat-key{ font-size:.78rem; color:#475569; margin-top:.15rem; }

/* ===== Visual container ===== */
.hero-viz{
  background:#e7ecf3;
  border-color:rgba(15,23,42,.08)!important;
  overflow:hidden;
  min-height: 380px;
  perspective: 1000px;
  position: relative;
}

/* Pattern + sheen sweep */
.foil-pattern{ position:absolute; inset:0; width:100%; height:100%; }
.sheen-sweep{ transform: translateX(-100%); animation: heroSheen 5.2s linear infinite; mix-blend-mode: screen; }
@keyframes heroSheen { to { transform: translateX(140%);} }

/* Main masked shot (CSS mask for wide support) */
.hero-shot{
  position:absolute; inset:7%;
  border-radius: 28px;
  overflow:hidden;
  box-shadow: 0 28px 60px rgba(15,23,42,.18);
  transform: translateZ(0);
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
  /* fancy shape via mask */
  -webkit-mask-image:
    radial-gradient(140% 100% at 0% 0%, #000 60%, transparent 61%),
    radial-gradient(140% 100% at 100% 100%, #000 60%, transparent 61%);
  -webkit-mask-composite: xor;
  mask-image:
    radial-gradient(140% 100% at 0% 0%, #000 60%, transparent 61%),
    radial-gradient(140% 100% at 100% 100%, #000 60%, transparent 61%);
  mask-composite: exclude;
}
.hero-shot img{ width:100%; height:100%; object-fit:cover; }

/* Animated shine on main shot */
.shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.45) 40%,
    rgba(255, 255, 255, 0.20) 50%,
    transparent 65%
  );
  transform: translateX(-130%);
  animation: shine 4s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes shine{ to{ transform:translateX(100%);} }

/* Hover parallax */
.hero-viz:hover .hero-shot{ transform: translateZ(0) scale(1.02); }

/* Mini angled tiles */
.mini-tile{
  position:absolute; width:110px; height:110px; border-radius:20px; overflow:hidden;
  box-shadow: 0 16px 32px rgba(15,23,42,.20);
  border: 2px solid #fff;
  transform: rotate(-8deg);
}
.mini-tile img{ width:100%; height:100%; object-fit:cover; }
.mini-tile.t1{ left: .9rem; bottom: .9rem; }
.mini-tile.t2{ right: 1rem; top: 1rem; transform: rotate(10deg); }

/* Glass tags */
.viz-tags{ position:absolute; display:flex; flex-direction:column; gap:.5rem; }
.viz-tags.left{ left:.9rem; top:.9rem; }
.viz-tags.right{ right:.9rem; bottom:.9rem; }
.glass-tag{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 8px 20px rgba(15,23,42,.10);
  padding:.45rem .7rem; border-radius:.8rem; font-weight:600; font-size:.85rem;
  color:var(--ink); display:inline-flex; align-items:center; gap:.4rem;
}
.glass-tag i{ opacity:.8; }

/* Conveyor ticker */
.viz-ticker {
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0;
  display: flex; 
  gap: 2rem; 
  white-space: nowrap;
  padding: 0.55rem 1.25rem;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92),
    rgba(240, 248, 255, 0.90)
  );
  
  border-top: 1px solid rgba(4, 148, 230, 0.12);
  overflow: hidden;

  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
}

.viz-ticker span{
  font-size:.85rem; font-weight:700; color:#1f2937; opacity:.9;
  animation: belt 18s linear infinite;
}
@keyframes belt{ to{ transform: translateX(-50%);} }

/* Responsive */
@media (max-width: 1199px){
  .hero-viz{ min-height: 340px; }
  .hero-shot{ inset:7.5%; }
}
@media (max-width: 991px){
  .hero-viz{ min-height: 300px; margin-top:.5rem; }
  .mini-tile{ width:96px; height:96px; }
  .glass-tag{ font-size:.8rem; padding:.4rem .6rem; }
}
@media (max-width: 575px){
  .hero{ padding-top: 2.25rem!important; }
  .hero-viz{ min-height: 240px; }
  .mini-tile{ width:80px; height:80px; }
  .viz-tags.left{ top:.6rem; left:.6rem; }
  .viz-tags.right{ right:.6rem; bottom:.6rem; }
}

/* Utility from your earlier setup */
.small-hide-scroll{ scrollbar-width:none; -ms-overflow-style:none; }
.small-hide-scroll::-webkit-scrollbar{ display:none; }
.object-cover{ object-fit:cover; }


/* Soft background & glow */
.clients {
  background:
    radial-gradient(
      1200px 600px at 20% -20%,
      rgba(4, 148, 230, 0.10),
      transparent 60%
    ),
    linear-gradient(#ffffff, #f8fbff);
  
  border-top: 1px solid rgba(4, 148, 230, 0.10);
  border-bottom: 1px solid rgba(4, 148, 230, 0.10);

  overflow: hidden;
  position: relative;
}

.clients-glow{
  position:absolute; left:-12%; top:-30%;
  width:520px; height:520px; border-radius:50%;
  filter: blur(60px); opacity:.28; pointer-events:none;
  background: radial-gradient(closest-side, var(--brand-2,#FFCC4D), transparent 70%);
  animation: clientsFloat 12s ease-in-out infinite alternate;
}
@keyframes clientsFloat{ from{ transform: translateY(0);} to{ transform: translateY(14px);} }

/* Marquee base */
.marquee {
  position: relative;
  overflow: hidden;

  /* subtle brand-friendly backdrop */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95),
    rgba(240, 248, 255, 0.90)
  );

  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}


.marquee__track {
  display: inline-flex;
  gap: 22px;
  align-items: center;
  white-space: nowrap;
  animation: marqueeLoop 26s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* Continuous loop: both tracks move together */
.marquee__track:nth-child(2) {
  position: absolute;
  left: 100%;
  top: 0;
}

/* Keyframes for smooth infinite scroll */
@keyframes marqueeLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Logo cards */
.logo{
  display: grid;
  place-items: center;
  width: 168px;            /* card width */
  height: 72px;            /* card height */
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  text-decoration: none;
  position: relative;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.logo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;

  /* subtle premium brand blue border glow */
  background: linear-gradient(
    90deg,
    rgba(4, 148, 230, 0.75),
    rgba(4, 148, 230, 0.35)
  ) border-box;

  -webkit-mask: 
      linear-gradient(#000 0 0) padding-box, 
      linear-gradient(#000 0 0) border-box;

          mask: 
      linear-gradient(#000 0 0) padding-box, 
      linear-gradient(#000 0 0) border-box;

  -webkit-mask-composite: xor;
          mask-composite: exclude;

  opacity: 0;
  transition: opacity .25s ease;
}

.logo:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15,23,42,.12);
  background: #fff;
  border-color: rgba(15,23,42,.15);
}
.logo:hover::after{ opacity: .75; }

/* Logo images */
.logo img{
  max-height: 36px;        /* scales all logos neatly */
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1) saturate(.6) contrast(.95);
  opacity: .85;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
.logo:hover img{
  filter: none;
  opacity: 1;
  transform: translateZ(0);
}

/* Typography tweak */
.letter-2{ letter-spacing: .12em; }

/* Responsive */
@media (max-width: 991px){
  .logo{ width: 150px; height: 64px; }
  .logo img{ max-height: 32px; }
  .marquee__track{ gap: 18px; }
}
@media (max-width: 575px){
  .logo{ width: 132px; height: 60px; padding: 8px 12px; border-radius: 14px; }
  .logo img{ max-height: 28px; }
  .marquee__track{ gap: 16px; }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
}

/* ===== About section base ===== */
.about {
  position: relative;
  background:
    radial-gradient(
      1100px 520px at 85% -10%,
      rgba(4, 148, 230, 0.10),
      transparent 60%
    ),
    linear-gradient(#ffffff, #f7f9fc);
  overflow: hidden;
}


/* soft glow blob */
.about-blob{
  position:absolute; right:-12%; top:-14%;
  width:520px; height:520px; border-radius:50%;
  background: radial-gradient(closest-side, var(--brand-2), transparent 70%);
  filter: blur(70px); opacity:.35; pointer-events:none;
  animation: aboutFloat 12s ease-in-out infinite alternate;
}
@keyframes aboutFloat{ from{ transform:translateY(0);} to{ transform:translateY(14px);} }

/* gradient accent in H2 */
.grad-accent {
  background-image: linear-gradient(
    90deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* highlights */
.about-highlights li{
  display:flex; align-items:flex-start; gap:.5rem;
  color:#475569; margin-bottom:.4rem; font-weight:600;
}
.about-highlights i{ color:#0f172a; opacity:.8; }

/* metric chips */
.metric-chip{
  border:1px solid rgba(15,23,42,.08);
  background:#fff; border-radius:1rem; padding:.9rem .85rem;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  text-align:center;
}
.metric-chip .m-val{ font-weight:800; font-size:1.4rem; line-height:1; color:#0f172a; }
.metric-chip .m-key{ font-size:.78rem; color:#64748b; margin-top:.2rem; }

/* ===== Media collage ===== */
.about-media{ min-height: 420px; }
.about-media .object-cover{ object-fit:cover; }

/* main squircle image with subtle border + sheen */
.am-main{
  position:absolute; inset:0 22% 0 0; border-radius:28px;
  overflow:hidden; background:#e8edf5; border:1px solid rgba(15,23,42,.08);
  clip-path: path("M20,40 C60,0 140,0 220,0 L360,0 C380,0 400,20 400,40 L400,260 C400,280 380,300 360,300 L120,300 C50,300 0,260 0,190 Z");
  transition: transform .45s cubic-bezier(.2,.6,.2,1);
}
.am-main:hover{ transform: scale(1.02); }
.am-sheen {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.45) 45%,
    rgba(4, 148, 230, 0.08) 55%,
    transparent 70%
  );

  transform: translateX(-110%);
  animation: aboutSheen 5.2s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes aboutSheen{ to{ transform:translateX(100%);} }

/* overlapping thumbs */
.am-thumb{
  position:absolute; width:44%; aspect-ratio:4/3; overflow:hidden; border-radius:1.25rem;
  border:1px solid rgba(15,23,42,.08); background:#eef2f7;
  transition: transform .35s ease, box-shadow .35s ease;
}
.am-thumb-1{ right:0; top:6%; transform: translate3d(0,0,0); }
.am-thumb-2{ right:4%; bottom:4%; transform: translate3d(0,0,0); }
.am-thumb:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(15,23,42,.16); }

/* glassy badge */
.glassy{
  position:absolute; left:1rem; bottom:1rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 24px rgba(15,23,42,.10);
  border-radius:.9rem; padding:.45rem .7rem; font-weight:700; color:#0f172a;
  display:inline-flex; align-items:center; gap:.4rem;
}
.glassy i{ opacity:.85; }

/* responsiveness */
@media (max-width: 991px){
  .about-media{ min-height: 360px; margin-top:.5rem; }
  .am-main{ inset:0 8% 0 0; }
  .am-thumb-1{ width:42%; }
  .am-thumb-2{ width:46%; }
}
@media (max-width: 575px){
  .about-media{ min-height: 300px; }
  .am-main{ inset:0; clip-path: none; border-radius:20px; }
  .am-thumb{ display:none; } /* simplify on small phones */
}


/* metrics */
.metric{ padding:12px 16px; border:1px solid rgba(2,6,23,.08); border-radius:16px; background:#fff; }
.metric .num{ font-size:28px; font-weight:800; color:var(--ink); line-height:1; }
.metric .cap{ color:#64748b; font-weight:600; }


/* ===== Capabilities ===== */
.cap .section-head .eyebrow{
  font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#0f172a;padding:.35rem .75rem;border-radius:999px;
  background:rgba(0,0,0,.04);border:1px solid rgba(15,23,42,.08)
}
.cap .section-head .dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
}

/* Card frame with gradient border */
.cap-card{
  position:relative;border-radius:1.25rem;padding:10px;background:transparent;
  transition:transform .18s ease, box-shadow .25s ease
}
.cap-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background: linear-gradient(
    135deg,
    rgba(4, 148, 230, 0.25),
    rgba(4, 148, 230, 0.05)
  );

  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
          mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;
          mask-composite: exclude;

  padding: 1px;
}

.cap-card:hover{ transform:translateY(-4px) }

/* Media box (uses aspect-ratio; no overlay hides image) */
.cap-media{
  position:relative; overflow:hidden; background:#e7ecf3;
  border-radius:1rem; aspect-ratio:16/9;
}
.cap-media picture, .cap-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
/* If you had old overlays, force them off */
.cap-media::before, .cap-media::after{ content:none !important; }

/* Sheen (visible only on hover) */
.cap-sheen {
  position: absolute;
  inset: -10% 0;
  transform: translateX(-120%);

  background: linear-gradient(
    110deg,
    transparent 35%,
    rgba(255, 255, 255, 0.45) 48%,
    rgba(4, 148, 230, 0.08) 55%,
    transparent 70%
  );

  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.cap-card:hover .cap-sheen{ opacity:1; animation:capSheen 2.8s linear infinite }
@keyframes capSheen { to{ transform:translateX(120%);} }

/* Corner glass badge */
.cap-badge{
  position:absolute;top:.6rem;left:.6rem;z-index:2;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  background:rgba(255,255,255,.78);border:1px solid rgba(15,23,42,.12);
  color:#0f172a;border-radius:.75rem;padding:.35rem .6rem;font-weight:700;
  font-size:.8rem;display:inline-flex;align-items:center;gap:.35rem
}
.cap-badge i{ opacity:.8 }

/* Body */
.cap-body{ padding:.75rem .25rem 0 }
.cap-tags{ display:flex; flex-wrap:wrap; gap:.4rem }
.cap-tags span{
  font-size:.75rem;font-weight:600;color:#334155;border:1px solid rgba(2,6,23,.06);
  background:rgba(15,23,42,.04); padding:.35rem .55rem; border-radius:999px
}

/* Subtle entrance (scroll into view) */
.cap-grid > [class*="col-"]{
  view-timeline-name: --cap;
  animation: capIn .6s ease both;
  animation-timeline: view();
  animation-range: entry 25% cover 30%;
}
@keyframes capIn { from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }



/* ===== Products (modern cards) ===== */
.products .section-head .eyebrow{
  font-size:.8rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#0f172a; padding:.35rem .75rem; border-radius:999px;
  background:rgba(0,0,0,.04); border:1px solid rgba(15,23,42,.08)
}
.products .section-head .dot{
  width:.5rem; height:.5rem; border-radius:50%;
  background:linear-gradient(90deg,var(--brand-1),var(--brand-2))
}

/* Card frame with subtle gradient border + lift on hover */
.pro-card{
  position:relative; border-radius:1.25rem; padding:10px; background:transparent;
  transition: transform .18s ease, box-shadow .25s ease;
}
.pro-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background: linear-gradient(
    135deg,
    rgba(4, 148, 230, 0.25),
    rgba(4, 148, 230, 0.05)
  );

  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
          mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;
          mask-composite: exclude;

  padding: 1px;
}

.pro-card:hover{ transform: translateY(-4px) }
.pro-card:hover .pro-media img{ transform: scale(1.05) }
.pro-card:hover .pro-sheen{ opacity:1; animation: proSheen 2.8s linear infinite }

/* Media */
.pro-media{ position:relative; background:#e7ecf3 }
.pro-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.6,.2,1) }
.pro-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(4, 148, 230, 0.10) 0%,
    transparent 40%,
    rgba(4, 148, 230, 0.06) 100%
  );

  pointer-events: none;
}

/* moving sheen */
.pro-sheen {
  content: "";
  position: absolute;
  inset: -10% 0;
  transform: translateX(-120%);

  background: linear-gradient(
    110deg,
    transparent 35%,
    rgba(255, 255, 255, 0.45) 48%,
    rgba(4, 148, 230, 0.08) 55%,
    transparent 70%
  );

  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

@keyframes proSheen{ to{ transform: translateX(120%) } }

/* Glass badges on the media */
.pro-badges{ position:absolute; top:.6rem; left:.6rem; display:flex; gap:.4rem; z-index:2 }
.glass-badge{
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,.78); border:1px solid rgba(15,23,42,.12);
  color:#0f172a; border-radius:.75rem; padding:.35rem .6rem; font-weight:700; font-size:.8rem;
  display:inline-flex; align-items:center; gap:.35rem;
}
.glass-badge i{ opacity:.8 }

/* Body */
.pro-body{ }
.pro-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
}


/* Spec chips */
.pro-specs .spec{
  padding:.35rem .55rem; border-radius:999px; font-size:.75rem; font-weight:600;
  color:#334155; border:1px solid rgba(2,6,23,.06); background: rgba(15,23,42,.04);
}

/* Utility */
.object-cover{ object-fit:cover }


/* ===== Industries (modern tiles) ===== */
.ind .section-head .eyebrow{
  font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#0f172a;padding:.35rem .75rem;border-radius:999px;
  background:rgba(0,0,0,.04);border:1px solid rgba(15,23,42,.08)
}
.ind .section-head .dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  display: inline-block;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
}


/* Card anchor frame with gradient border via mask */
.ind-card{
  display:block; text-decoration:none; color:inherit;
  position:relative; background:#fff; border-radius:1.25rem; padding:10px;
  transition:transform .18s ease, box-shadow .25s ease;
}
.ind-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background: linear-gradient(
    135deg,
    rgba(4, 148, 230, 0.25),
    rgba(4, 148, 230, 0.05)
  );

  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
          mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;
          mask-composite: exclude;

  padding: 1px;
  pointer-events: none;
}

.ind-card:hover{ transform:translateY(-4px); box-shadow:0 22px 44px rgba(15,23,42,.12); }

/* Media */
.ind-media{ position:relative; overflow:hidden; background:#e7ecf3; }
.ind-media img{ object-fit:cover; transition:transform .6s cubic-bezier(.2,.6,.2,1); }
.ind-card:hover .ind-media img{ transform:scale(1.05); }

/* Soft overlay + animated sheen */
.ind-media::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(4, 148, 230, 0.10) 0%,
    transparent 42%,
    rgba(4, 148, 230, 0.06) 100%
  );

  pointer-events: none;
}

.ind-sheen {
  position: absolute;
  inset: -10% 0;
  transform: translateX(-120%);

  background: linear-gradient(
    110deg,
    transparent 35%,
    rgba(255, 255, 255, 0.45) 48%,
    rgba(4, 148, 230, 0.08) 55%,
    transparent 70%
  );

  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.ind-card:hover .ind-sheen{ opacity:1; animation:indSheen 2.6s linear infinite; }
@keyframes indSheen{ to{ transform:translateX(120%);} }

/* Corner pill */
.ind-pill{
  position:absolute; top:.6rem; left:.6rem; z-index:2;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,.78); border:1px solid rgba(15,23,42,.12);
  color:#0f172a; border-radius:.75rem; padding:.35rem .6rem;
  font-weight:700; font-size:.8rem; display:inline-flex; align-items:center; gap:.35rem;
}
.ind-pill i{ opacity:.8; }

/* Body */
.ind-body{ padding:.8rem .25rem 1rem; }
.ind-body .h6{ color:#0f172a; }
.ind-body small{ font-weight:600; }

/* Scroll-in (no JS) */
.ind-grid > [class*="col-"]{
  view-timeline-name: --ind;
  animation: indIn .6s ease both;
  animation-timeline: view();
  animation-range: entry 25% cover 30%;
}
@keyframes indIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

/* Utility */
.object-cover{ object-fit:cover; }


/* ===== Quality & Sustainability ===== */
.quality-wrap {
  background:
    radial-gradient(900px 500px at 120% -10%, rgba(255,204,77,.16), transparent 60%),
    linear-gradient(#fff, #f7f9fc);
}
.q-bloom {
  position: absolute;
  right: -18%;
  top: -24%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--brand-2), transparent 70%);
  filter: blur(70px);
  opacity: .35;
  pointer-events: none;
}

/* headers */
.q-head .eyebrow {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0f172a;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(15,23,42,.08);
}
.q-head .dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: linear-gradient(90deg,var(--brand-1),var(--brand-2));
  display: inline-block;
}

/* white version for sustainability */
.white-eyebrow {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}
.white-dot {
  background: linear-gradient(90deg,#facc15,#fde68a) !important;
}

/* cards */
.q-card {
  background: #fff;
  border-radius: 1.25rem;
  position: relative;
  padding: 1.1rem;
  box-shadow: 0 20px 50px rgba(15,23,42,.06);
  border: 1px solid rgba(2,6,23,.08);
}
.s-card {
  position: relative;
  padding: 1.1rem;
  border-radius: 1.25rem;
  background: linear-gradient(180deg,#0e1422,#0a1120);
  border: 1px solid rgba(255,255,255,.08);
  color: #e8eef7;
  box-shadow: 0 20px 50px rgba(2,6,23,.25);
}

/* list */
.q-list li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .6rem .4rem;
  border-radius: .75rem;
  transition: background .2s ease;
}
.q-list li:hover {
  background: rgba(15,23,42,.04);
}
.q-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #0f172a;
  background: linear-gradient(180deg,#f9fafb,#eef2f7);
  border: 1px solid rgba(2,6,23,.06);
  box-shadow: 0 6px 14px rgba(15,23,42,.08);
}
.q-title {
  font-weight: 700;
  color: #0f172a;
}

/* chips */
.chip.small {
  padding: .25rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  border: 1px solid rgba(2,6,23,.08);
  background: rgba(15,23,42,.05);
  color: #334155;
  display: inline-block;
  margin-right: .35rem;
  margin-top: .25rem;
}

/* KPI strip */
.q-kpis {
  display: flex;
  gap: .75rem;
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px dashed rgba(2,6,23,.08);
  flex-wrap: wrap;
}
.q-kpi {
  flex: 1 1 90px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(2,6,23,.06);
  border-radius: 1rem;
  padding: .75rem .5rem;
  box-shadow: 0 10px 20px rgba(15,23,42,.04);
}
.q-kpi .val {
  font-weight: 800;
  font-size: 1.25rem;
  color: #0f172a;
  line-height: 1;
}
.q-kpi .key {
  font-size: .78rem;
  color: #64748b;
  margin-top: .15rem;
}

/* Sustainability rows */
.s-rows {
  display: grid;
  gap: .6rem;
}
.s-row {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .6rem .5rem;
  border-radius: .75rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.s-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  color: #f1f5f9;
  border: 1px solid rgba(255,255,255,.12);
}
.s-meter .track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}
.s-meter .fill {
  display: block;
  height: 100%;
  width: var(--p,50%);
  border-radius: inherit;
  background: linear-gradient(90deg,var(--brand-1),var(--brand-2));
  box-shadow: 0 6px 16px rgba(245,162,0,.35);
  animation: growBar 1.3s ease-out both;
}
@keyframes growBar {
  from { width: 0; }
}

/* responsive */
@media (max-width: 991px) {
  .q-kpis { gap: .6rem; }
  .q-kpi { padding: .65rem .4rem; }
}

/* ===== Process ===== */
.process {
  position: relative;

  background:
    radial-gradient(
      900px 420px at -10% -10%,
      rgba(4, 148, 230, 0.12),
      transparent 60%
    ),
    linear-gradient(#f8fafc, #f3f6fb);
}

.proc-glow{
  position:absolute; right:-14%; top:-22%; width:520px; height:520px; border-radius:50%;
  background: radial-gradient(closest-side, var(--brand-2), transparent 70%);
  filter: blur(60px); opacity:.35; pointer-events:none;
}

/* section eyebrow reuse */
.process .eyebrow{
  font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#0f172a;padding:.35rem .75rem;border-radius:999px;
  background:rgba(0,0,0,.04);border:1px solid rgba(15,23,42,.08)
}
.process .dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  display: inline-block;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
}


/* Rail: horizontal on md+, vertical on <md */
.process-rail{
  position: relative;
  display: grid;
  gap: 18px;
}
@media (min-width: 768px){
  .process-rail{
    grid-template-columns: repeat(4,1fr);
    align-items: start;
  }
}

/* the line itself */
.process-rail::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 38px;
  height: 3px;

  background: linear-gradient(
    90deg,
    rgba(4, 148, 230, 0.10),
    rgba(4, 148, 230, 0.22)
  );

  border-radius: 999px;
  opacity: .75;
  transform: translateZ(0);
}

.process-rail::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 37px;
  height: 5px;
  width: 25%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.50),
    rgba(4, 148, 230, 0.20),
    rgba(255, 255, 255, 0.40),
    transparent
  );

  border-radius: 999px;
  filter: blur(1px);
  mix-blend-mode: screen;

  animation: railSheen 4.5s linear infinite;
}

@keyframes railSheen{ to{ left: calc(100% - 22px); } }

@media (max-width: 767.98px){
  .process-rail::before,
  .process-rail::after{
    left: 28px; right: auto; width: 3px; height: calc(100% - 8px);
  }
  .process-rail::after{ top: auto; bottom: 8px; animation: railSheenV 4.5s linear infinite; }
  @keyframes railSheenV{ to{ bottom: calc(100% - 8px);} }
}

/* Step wrapper */
.p-step{
  position: relative; padding-top: 58px;
  view-timeline-name: --p;
  animation: pIn .6s ease both; animation-timeline: view();
  animation-range: entry 25% cover 30%;
}
@keyframes pIn{ from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:none;} }

/* badge (the number node) */
.p-badge{
  position:absolute; top: 10px; left: 0; right: 0; display:flex; justify-content:center;
}
.p-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  
  display: grid;
  place-items: center;

  font-weight: 900;
  color: #0f172a;

  background: #ffffff;
  border: 2px solid transparent;

  background-image:
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(135deg, #0284D8, #0494E6, #33B4FF);

  background-origin: border-box;
  background-clip: padding-box, border-box;

  box-shadow: 0 10px 18px rgba(4, 148, 230, 0.15);
}


/* card */
.p-card{
  background:#fff;
  border:1px solid rgba(2,6,23,.08);
  border-radius: 16px;
  padding: 16px 14px 14px;
  height: 100%;
  box-shadow: 0 16px 32px rgba(15,23,42,.06);
  transition: transform .18s ease, box-shadow .25s ease;
}
.p-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 50px rgba(15,23,42,.10);
}

/* icon tile */
.p-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;

  display: grid;
  place-items: center;
  margin-bottom: 10px;

  background: linear-gradient(
    180deg,
    #ffffff,
    #f3f9ff
  );

  border: 1px solid rgba(4, 148, 230, 0.15);

  color: #0f172a;
  font-size: 1.1rem;

  box-shadow: 0 8px 18px rgba(4, 148, 230, 0.15);
}


/* text */
.p-title{ font-weight: 700; color:#0f172a; margin-bottom: 2px; }
.p-text{ font-size: .925rem; color:#64748b; margin:0; }

/* responsive spacing */
@media (max-width: 767.98px){
  .p-step{ padding-left: 72px; padding-top: 0; }
  .p-badge{ left: 12px; top: 0; right: auto; }
}


/* ===== Certifications Section ===== */
.certifications {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      900px 480px at 85% -10%,
      rgba(4, 148, 230, 0.10),
      transparent 60%
    ),
    linear-gradient(180deg, #ffffff, #f7f9fc);
}

.cert-glow {
  position: absolute;
  left: -20%;
  top: -30%;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--brand-2), transparent 70%);
  filter: blur(90px);
  opacity: .25;
  pointer-events: none;
}

/* Section Head */
.certifications .eyebrow {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0f172a;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .04);
  border: 1px solid rgba(15, 23, 42, .08);
}
.certifications .dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  display: inline-block;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
}


/* Grid */
.cert-grid {
  perspective: 1000px;
}

/* Card base */
.cert-card {
  position: relative;
  border-radius: 1.25rem;

  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f5faff 100%
  );

  border: 1px solid rgba(4, 148, 230, 0.15);

  box-shadow: 0 20px 40px rgba(4, 148, 230, 0.10);

  padding: 2.5rem 1rem 2rem;
  overflow: hidden;
  text-align: center;

  transition: transform .25s ease, box-shadow .3s ease;
}

.cert-card:hover {
  transform: translateY(-6px) rotateX(2deg);
  box-shadow: 0 25px 50px rgba(15, 23, 42, .1);
}

/* Gradient ring behind icon */
.cert-ring {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);

  width: 72px;
  height: 72px;
  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(4, 148, 230, 0.30) 0%,
    rgba(4, 148, 230, 0.15) 40%,
    rgba(4, 148, 230, 0.05) 70%,
    transparent 100%
  );

  filter: blur(2px);
  opacity: .85;
  z-index: 0;

  animation: pulseRing 4s ease-in-out infinite alternate;
}

@keyframes pulseRing {
  from { transform: translateX(-50%) scale(1); opacity:.9; }
  to { transform: translateX(-50%) scale(1.08); opacity:.7; }
}

/* Card content */
.cert-body {
  position: relative;
  z-index: 1;
}
.cert-body i {
  font-size: 1.8rem;
  color: #0f172a;
  background: #fff;
  padding: .75rem;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(15,23,42,.1);
  position: relative;
  z-index: 2;
}
.cert-title {
  font-weight: 700;
  color: #0f172a;
  margin-top: 1.2rem;
  font-size: 1.05rem;
}
.cert-text {
  color: #64748b;
  font-size: .9rem;
  margin-top: .25rem;
}

/* Hover glow */
.cert-card:hover .cert-ring {
  animation: none;
  transform: translateX(-50%) scale(1.15);
  filter: brightness(1.1);
}

/* Responsive */
@media (max-width: 767.98px) {
  .cert-card {
    padding: 1.75rem 1rem 1.5rem;
  }
  .cert-ring {
    width: 60px;
    height: 60px;
    top: 22px;
  }
  .cert-body i {
    font-size: 1.4rem;
  }
  .cert-title {
    font-size: .95rem;
  }
}

/* ===== Resources Section ===== */
.resources {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      900px 480px at 85% -10%,
      rgba(4, 148, 230, 0.10),
      transparent 60%
    ),
    linear-gradient(180deg, #f9fafb 0%, #f1f5f9 100%);
}


/* Glows */
.res-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .3;
  pointer-events: none;
}
.res-glow-1 {
  width: 600px; height: 600px;
  top: -20%; left: -15%;
  background: radial-gradient(closest-side, var(--brand-1), transparent 70%);
}
.res-glow-2 {
  width: 500px; height: 500px;
  bottom: -15%; right: -10%;
  background: radial-gradient(closest-side, var(--brand-2), transparent 70%);
}

/* Eyebrow reused */
.resources .eyebrow {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0f172a;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .04);
  border: 1px solid rgba(15, 23, 42, .08);
}
.resources .dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  display: inline-block;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
}


/* Resource Cards */
.res-card {
  background: #fff;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
  transition: transform .25s ease, box-shadow .3s ease;
  position: relative;
}
.res-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, .12);
}

/* Image area */
.res-media {
  position: relative;
  height: 220px;
  overflow: hidden;
}
.res-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
.res-card:hover .res-media img {
  transform: scale(1.07);
}
.res-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(4, 148, 230, 0.00) 0%,
    rgba(4, 148, 230, 0.16) 100%
  );

  pointer-events: none;
}


/* Floating icon */
.res-icon {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  display: grid; place-items: center;
  color: #0f172a;
  font-size: 1.2rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .15);
  transform: translateY(0);
  transition: transform .3s ease, background .3s ease;
}
.res-card:hover .res-icon {
  transform: translateY(-4px);

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );

  color: #0f172a;
}


/* Body */
.res-body {
  padding: 1.25rem;
}
.res-body h3 {
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .4rem;
}
.res-body p {
  color: #64748b;
}
.res-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-weight: 600;
  color: var(--brand-2);
  text-decoration: none;
  transition: gap .2s ease, color .2s ease;
}
.res-link:hover {
  gap: .45rem;
  color: var(--brand-1);
}

/* Entrance animation */
.res-card {
  view-timeline-name: --res;
  animation: resIn .6s ease both;
  animation-timeline: view();
  animation-range: entry 25% cover 30%;
}
@keyframes resIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}


/* Responsive */
@media (max-width: 767.98px) {
  .res-media { height: 200px; }
  .res-icon { width: 36px; height: 36px; font-size: 1rem; }
}


/* ===== Map / Contact Short (Namespaced) ===== */
.mf-contact {
  padding: 56px 0;
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      900px 480px at 80% -10%,
      rgba(4, 148, 230, 0.10),
      transparent 60%
    ),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}


/* soft glows */
.mf-contact-glow {
  position: absolute; border-radius: 50%; filter: blur(80px);
  opacity: .35; pointer-events: none;
}
.mf-contact-glow-1 {
  width: 560px; height: 560px; top: -18%; left: -12%;
  background: radial-gradient(closest-side, var(--brand-1, #F5A200), transparent 70%);
}
.mf-contact-glow-2 {
  width: 520px; height: 520px; bottom: -16%; right: -10%;
  background: radial-gradient(closest-side, var(--brand-2, #FFCC4D), transparent 70%);
}

/* Map card */
.mf-contact-mapCard{
  background:#e9eef5;
  border-color: rgba(15,23,42,.08)!important;
  display: flex;
  flex-direction: column;
  min-height: 320px; /* mobile baseline */
}
.mf-contact-mapPattern{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1;
}
.mf-contact-mapSheen{
  transform: translateX(-120%);
  animation: mfContactMapSheen 6s linear infinite;
  mix-blend-mode: screen;
}
@keyframes mfContactMapSheen { to { transform: translateX(140%);} }

/* embed fills the card */
.mf-contact-mapEmbed{
  position: relative; z-index: 2; flex: 1 1 auto;
}
.mf-contact-mapEmbed iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0;
}

/* ticker */
.mf-contact-mapTicker{
  position:relative; z-index:3;
  display:flex; gap:1rem; white-space:nowrap; overflow:hidden;
  background: rgba(255,255,255,.9);
  border-top:1px solid rgba(15,23,42,.08);
  padding:.5rem 1rem;
}
.mf-contact-mapTicker span{
  font-size:.85rem; font-weight:600; color:#1f2937; opacity:.9;
  padding-right:1.25rem; position:relative;
}
.mf-contact-mapTicker span+span::before{
  content:"•"; position:absolute; left:-.9rem; opacity:.4;
}

/* Contact card */
.mf-contact-card{
  background:#fff; position:relative;
  border-color: rgba(15,23,42,.08)!important;
}
.mf-contact-footer {
  height: 10px;
  border-radius: 0 0 1rem 1rem;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
}


/* Eyebrow */
.mf-contact-eyebrow{
  font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#0f172a;padding:.35rem .75rem;border-radius:999px;
  background:rgba(0,0,0,.04);border:1px solid rgba(15,23,42,.08)
}
.mf-contact-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  display: inline-block;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
}


/* List */
.mf-contact-list{ margin-top:.25rem; }
.mf-contact-item{
  display:flex; gap:.75rem; align-items:flex-start;
  padding:.75rem 0; border-bottom:1px dashed rgba(2,6,23,.08);
}
.mf-contact-item:last-child{ border-bottom:0; }
.mf-contact-item i{
  font-size:1.05rem; color:#0f172a; opacity:.8;
  margin-top:.15rem;
}
.mf-contact-label{
  font-size:.8rem; font-weight:700; text-transform:uppercase; color:#475569; letter-spacing:.02em;
}
.mf-contact-value{
  font-weight:600; color:#0f172a;
}

/* Button (namespaced gradient) */
.mf-btn-gradient {
  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );

  color: #ffffff;
  font-weight: 700;
  border: none;

  box-shadow: 0 8px 20px rgba(4, 148, 230, 0.25);

  transition: all .25s ease;
}

.mf-btn-gradient:hover{ filter: brightness(.96); transform: translateY(-1px); }

/* Utility */
.mf-object-cover{ object-fit: cover; }

/* Responsive */
@media (min-width: 992px){
  .mf-contact-mapCard{ min-height: 100%; } /* matches contact card height on desktop */
}
@media (max-width: 575.98px){
  .mf-contact-mapTicker span{ font-size:.8rem; }
}


/* background glows */
.cta-glow{
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .35; pointer-events: none;
}
.cta-glow-1{ width:640px; height:640px; left:-15%; top:-20%;
  background: radial-gradient(closest-side, var(--brand-2), transparent 70%); }
.cta-glow-2{ width:520px; height:520px; right:-12%; bottom:-18%;
  background: radial-gradient(closest-side, var(--brand-1), transparent 70%); opacity:.25; }

/* subtle wire grid */
.cta-grid {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      rgba(4, 148, 230, 0.08) 1px,
      transparent 1px
    ) 0 0 / 32px 32px,
    linear-gradient(
      90deg,
      rgba(4, 148, 230, 0.08) 1px,
      transparent 1px
    ) 0 0 / 32px 32px;

  mask-image: radial-gradient(
    closest-side at 65% 30%,
    rgba(0, 0, 0, 0.35),
    transparent 70%
  );

  pointer-events: none;
}


/* eyebrow reused */
.cta .eyebrow{
  font-size:.8rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#e2e8f0; padding:.35rem .75rem; border-radius:999px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.cta .eyebrow .dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  display: inline-block;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
}

.text-white-75{ color:rgba(255,255,255,.82)!important; }
.text-brand{ color: var(--brand-2); }

/* trust chips */
.trust-chip{
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  color:#fff; font-weight:600; font-size:.875rem;
  padding:.45rem .7rem; border-radius:999px; display:inline-flex; align-items:center; gap:.4rem;
  backdrop-filter: blur(6px);
}

/* glass form card */
.rfq-card.glass{
  background: rgba(255,255,255,.9);
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 30px 60px rgba(2,6,23,.25);
}

/* header: steps */
.rfq-steps{ font-weight:700; }
.rfq-step{
  display:inline-flex; align-items:center; gap:.4rem; color:#334155; opacity:.7;
}
.rfq-step .dot{
  width:.6rem; height:.6rem; border-radius:999px;
  background: #cbd5e1; display:inline-block;
}
.rfq-step.active{ color:#0f172a; opacity:1; }
.rfq-step.active .dot{ background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); }
.rfq-divider{
  width:36px; height:2px; background: linear-gradient(90deg, #e2e8f0, #cbd5e1);
  display:inline-block; border-radius:2px; opacity:.8;
}

/* brand soft badge */
.bg-brand-soft {
  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );

  filter: saturate(1.05) brightness(1.08);
}


/* form icons in inputs */
.fi{ position:relative; }
.fi > i{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:#64748b; opacity:.9; pointer-events:none;
}
.fi input.form-control, .fi select.form-select{
  padding-left: 40px;
}
.fi-textarea > i{
  top: 18px; transform:none;
}

/* input polish */
.rfq-card .form-control, .rfq-card .form-select, .rfq-card textarea{
  border-radius: .9rem;
  border:1px solid rgba(2,6,23,.08);
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.rfq-card .form-control:focus, .rfq-card .form-select:focus, .rfq-card textarea:focus{
  border-color: rgba(245,162,0,.6);
  box-shadow: 0 0 0 .25rem rgba(245,162,0,.15);
  background:#fff;
}



/* responsive */
@media (max-width: 991.98px){
  .cta{ padding-top:2.5rem; padding-bottom:2.5rem; }
  .rfq-steps{ font-size:.95rem; }
  .rfq-divider{ width:28px; }
}
@media (max-width: 575.98px){
  .trust-chip{ font-size:.8rem; }
}


/* ================= Footer (Meraki Foils - namespaced) ================= */
.mf-footer {
  position: relative;
  padding: 48px 0 24px;
  overflow: hidden;

  background:
    radial-gradient(
      900px 480px at 80% -10%,
      rgba(4, 148, 230, 0.10),
      transparent 60%
    ),
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);

  border-top: 1px solid rgba(4, 148, 230, 0.15);
}


/* top gradient strip */
.mf-footer-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
}


/* soft decorative glows */
.mf-footer-glow{
  position:absolute; border-radius:50%; filter: blur(80px); opacity:.35; pointer-events:none;
}
.mf-footer-glow-1{ width:520px; height:520px; top:-22%; left:-14%;
  background: radial-gradient(closest-side,var(--brand-2,#FFCC4D),transparent 70%);
}
.mf-footer-glow-2{ width:520px; height:520px; bottom:-24%; right:-14%;
  background: radial-gradient(closest-side,var(--brand-1,#F5A200),transparent 70%);
}

/* brand */
.mf-footer-logo{ display:block }
.mf-footer-brand{ font-size:1.125rem; }
.mf-footer-text{ color:#475569 }

/* meta list */
.mf-footer-meta{ margin-top:.5rem }
.mf-footer-meta-item{
  display:flex; gap:.5rem; align-items:flex-start;
  color:#334155; margin:.35rem 0;
}
.mf-footer-meta-item i{ color:#0f172a; opacity:.85; margin-top:.15rem }
.mf-footer-meta-item a{ color:#334155; text-decoration:none; border-bottom:1px dashed transparent }
.mf-footer-meta-item a:hover{ color:#0f172a; border-bottom-color: rgba(2,6,23,.25) }

/* column heads */
.mf-footer-head{
  font-weight:800; letter-spacing:.02em; color:#0f172a; margin-bottom:.5rem;
}

/* link list */
.mf-footer-links{ list-style:none; padding:0; margin:0 }
.mf-footer-links li{ margin:.35rem 0 }
.mf-footer-links a{
  display:inline-block; color:#64748b; text-decoration:none; font-weight:600;
  position:relative; padding:.1rem 0;
}
.mf-footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );

  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}

.mf-footer-links a:hover{ color:#0f172a }
.mf-footer-links a:hover::after{ transform: scaleX(1) }

/* newsletter */
.mf-footer-note{ color:#64748b; margin-bottom:.5rem }
.mf-footer-newsletter{
  display:flex; gap:.5rem; align-items:center;
}
.mf-footer-input{
  flex:1; height:44px; border-radius:999px; border:1px solid rgba(2,6,23,.12);
  padding:0 14px; outline:none; background:#fff; color:#0f172a; font-weight:600;
}
.mf-footer-input:focus{ border-color: rgba(2,6,23,.3); box-shadow:0 0 0 4px rgba(245,162,0,.12) }
.mf-footer-btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  font-weight: 800;
  color: #ffffff;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );

  box-shadow: 0 10px 24px rgba(4, 148, 230, 0.25);

  transition: transform .06s ease, filter .2s ease;
}

.mf-footer-btn:hover{ filter:brightness(.96) }
.mf-footer-btn:active{ transform: translateY(1px) }
.mf-footer-micro{ color:#6b7280 }

/* social buttons */
.mf-footer-social{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  color:#0f172a; background:#ffffff; border:1px solid rgba(2,6,23,.12);
  box-shadow:0 6px 16px rgba(15,23,42,.06); text-decoration:none;
  transition: transform .08s ease, filter .2s ease, border-color .2s ease;
}
.mf-footer-social:hover{
  filter: brightness(.97); transform: translateY(-1px);
  border-color: rgba(2,6,23,.24);
}

/* divider */
.mf-footer-hr {
  border: 0;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(4, 148, 230, 0.22),
    transparent
  );

  margin: 28px 0 16px;
}


/* bottom mini links */
.mf-footer-minilink{
  color:#64748b; text-decoration:none; font-weight:600; position:relative; padding:.1rem 0;
}
.mf-footer-minilink:hover{ color:#0f172a }
.mf-footer-minilink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );

  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}

.mf-footer-minilink:hover::after{ transform: scaleX(1) }

/* responsive */
@media (max-width: 575.98px){
  .mf-footer{ padding:40px 0 20px }
  .mf-footer-input{ height:42px }
  .mf-footer-btn{ height:42px }
}


/* helpers */
.ratio-21x9{ --bs-aspect-ratio: calc(9 / 21 * 100%); }
.rounded-4{ border-radius:1rem!important; }
.rounded-3{ border-radius:.75rem!important; }

/* --- Fix horizontal overflow from decorative glows --- */
.process,
.cta,
.mf-contact {
  overflow: hidden; /* prevents glows from widening the page */
}

/* (Optional) extra safety: never allow accidental horizontal scroll */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Bring back the dark background for the CTA section */
.cta {
  position: relative;

  background:
    radial-gradient(
      900px 420px at 110% -10%,
      rgba(4, 148, 230, 0.14),
      transparent 60%
    ),
    linear-gradient(180deg, #0b1222, #0a1120);

  color-scheme: dark; /* keeps form controls visible */
}


/* Ensure white text utilities still win inside CTA */
.cta .text-white-75 { color: rgba(255,255,255,.82) !important; }
.cta .text-white    { color: #fff !important; }

/* CTA-specific eyebrow on dark */
.cta .eyebrow{
  color:#e2e8f0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

/* (Optional) scope the earlier hero eyebrow so it doesn't affect CTA) */
.hero .eyebrow{
  font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#0f172a;
  padding:.35rem .75rem;border-radius:999px;
  background: rgba(0,0,0,.04);
  border:1px solid rgba(15,23,42,.08);
}




/* =========================
   Capabilities Page (scoped)
   Namespace: .capx-page .capx-*
   ========================= */

.capx-page .capx-hero {
  position: relative;
  background: radial-gradient(1200px 600px at 10% -10%, #1e293b 0%, #0f172a 55%, #0b1224 100%);
  color: #fff;
  overflow: hidden;
  padding: 72px 0 56px;
}
@media (min-width:992px){
  .capx-page .capx-hero { padding: 96px 0 64px; }
}
.capx-page .capx-heroGrid {
  position: absolute;
  inset: 0;
  opacity: .25;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(4, 148, 230, 0.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(4, 148, 230, 0.08) 1px,
      transparent 1px
    );

  background-size: 36px 36px;

  -webkit-mask-image: radial-gradient(
    70% 70% at 70% 40%,
    #000 0%,
    transparent 100%
  );

          mask-image: radial-gradient(
    70% 70% at 70% 40%,
    #000 0%,
    transparent 100%
  );
}

.capx-page .capx-heroSheen {
  position: absolute; inset: -20% -40% auto -40%; height: 260px;
  background: radial-gradient(closest-side, rgba(255,255,255,.18), rgba(255,255,255,0));
  filter: blur(20px);
}
.capx-page .capx-eyebrow {
  color:#cbd5e1; letter-spacing:.08em; text-transform:uppercase; font-weight:600; font-size:.85rem;
  display:inline-flex; align-items:center; gap:.5rem;
}
.capx-page .capx-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
}

.capx-page .capx-title {
  font-weight:800; line-height:1.05;
}
.capx-page .capx-lead {
  color:rgba(255,255,255,.78);
}
.capx-page .capx-kpi {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 14px 16px;
  backdrop-filter: blur(6px);
  text-align:center;
}
.capx-page .capx-kpiVal { font-size:1.5rem; font-weight:800; line-height:1; color:#fff; }
.capx-page .capx-kpiKey { font-size:.8rem; color:#cbd5e1; }

.capx-page .capx-chip {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:6px 10px; border-radius:999px; font-size:.85rem;
  color:#e2e8f0; background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.25);
}
.capx-page .capx-viz {
  position: relative;
  border-radius: 20px;
  overflow: hidden;

  /* Blue-tinted border for brand uniformity */
  border: 1px solid rgba(4, 148, 230, 0.20);

  /* Premium subtle Meraki-blue layered background */
  background:
    radial-gradient(
      600px 300px at 70% -20%,
      rgba(4, 148, 230, 0.10),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.02)
    );

  /* Modern soft blue shadow + subtle inset highlight */
  box-shadow:
    0 20px 40px rgba(4, 148, 230, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.capx-page .capx-vizLabel {
  position:absolute; right:12px; top:12px; font-size:.8rem; z-index:2;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:#e5e7eb; padding:6px 10px; border-radius:999px; backdrop-filter: blur(6px);
}
.capx-page .capx-floatTile {
  position:absolute; width:44%; aspect-ratio:4/3; overflow:hidden; border-radius:14px;
  border:1px solid rgba(255,255,255,.18); box-shadow:0 8px 30px rgba(0,0,0,.4);
}
.capx-page .capx-floatTile img { width:100%; height:100%; object-fit:cover; }
.capx-page .capx-floatTile.t1 { left:-6%; top:12%; transform:rotate(-6deg); }
.capx-page .capx-floatTile.t2 { right:-6%; bottom:10%; transform:rotate(7deg); }

.capx-page .capx-subnav { display:flex; gap:8px; overflow:auto; white-space:nowrap; padding-top:10px; }
.capx-page .capx-subnavLink {
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.9rem; text-decoration:none;
  color:#e2e8f0; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
}
.capx-page .capx-subnavLink i { opacity:.85; }

/* ===== Section Head (scoped) ===== */
.capx-page .capx-sectionHead .capx-eyebrow { color:#475569; }
.capx-page .capx-sectionHead .capx-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
}


/* ===== Capability Cards (scoped) ===== */
.capx-page .capx-card {
  border-radius:18px; overflow:hidden; background:#fff; border:1px solid #e5e7eb;
  transition:transform .25s ease, box-shadow .25s ease;
  height:100%;
}
.capx-page .capx-card:hover { transform: translateY(-4px); box-shadow:0 16px 40px rgba(2,6,23,.08); }
.capx-page .capx-cardMedia {
  position:relative; border-bottom:1px solid #eef2f7; background:#f8fafc;
}
.capx-page .capx-cardMedia > .ratio > img { object-fit:cover; }
.capx-page .capx-badge {
  position:absolute; left:12px; top:12px; z-index:2;
  background:#0ea5e9; color:#062436; padding:6px 10px; border-radius:999px; font-weight:600; font-size:.85rem;
  box-shadow:0 6px 20px rgba(14,165,233,.35);
}
.capx-page .capx-cardSheen {
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 10%,
    rgba(255, 255, 255, 0.40) 32%,
    rgba(4, 148, 230, 0.20) 48%,
    rgba(255, 255, 255, 0.25) 62%,
    rgba(255, 255, 255, 0) 80%
  );

  opacity: 0;
  transition: opacity .3s ease;
}

.capx-page .capx-card:hover .capx-cardSheen { opacity:.8; }
.capx-page .capx-cardBody { padding:16px; }
.capx-page .capx-tags { display:flex; flex-wrap:wrap; gap:6px; }
.capx-page .capx-tag {
  font-size:.8rem; background:#f1f5f9; border:1px solid #e2e8f0; padding:4px 8px; border-radius:999px;
}

/* ===== Specs Table ===== */
.capx-page .capx-specsTable {
  --capx-radius: 14px;
  border:1px solid #e5e7eb; border-radius:var(--capx-radius); overflow:hidden;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
}
.capx-page .capx-specsTable thead th {
  background:#f8fafc; font-weight:700;
}
.capx-page .capx-specsTable tbody td { vertical-align: middle; }

/* ===== Process Rail (scoped) ===== */
.capx-page .capx-rail { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:18px; }
@media (max-width:991.98px){ .capx-page .capx-rail { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:575.98px){ .capx-page .capx-rail { grid-template-columns: 1fr; } }

.capx-page .capx-step {
  position:relative; background:#ffffff; border:1px solid #e5e7eb; border-radius:16px; padding:18px;
  display:flex; gap:14px; align-items:flex-start; height:100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.capx-page .capx-step:hover { transform: translateY(-3px); box-shadow:0 12px 28px rgba(2,6,23,.06); }
.capx-page .capx-stepIcon {
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:#0ea5e9; color:#062436; font-size:1.1rem; flex:0 0 auto;
}
.capx-page .capx-stepNum {
  position:absolute; top:10px; right:10px; background:#f1f5f9; color:#0f172a; border-radius:999px; font-weight:700;
  font-size:.8rem; padding:2px 8px; border:1px solid #e2e8f0;
}

/* ===== CTA tweaks (uses existing global CTA styles) ===== */
.capx-page .capx-cta-list li i { color:#0ea5e9; }

/* Utility inside scope */
.capx-page .capx-mt-2 { margin-top:.5rem; }
.capx-page .capx-mt-3 { margin-top:1rem; }
.capx-page .capx-mt-4 { margin-top:1.5rem; }
.capx-page .capx-mb-0 { margin-bottom:0; }




/* =========================
   Products Page (scoped)
   Namespace: .prdx-page .prdx-*
   ========================= */

.prdx-page .prdx-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 80px 0 64px;

  background:
    radial-gradient(
      900px 420px at 10% -10%,
      rgba(4, 148, 230, 0.18),
      transparent 60%
    ),
    radial-gradient(
      900px 420px at 110% 10%,
      rgba(4, 148, 230, 0.14),
      transparent 60%
    ),
    linear-gradient(180deg, #0f172a, #0b1224 70%);
}

@media (min-width: 992px){ .prdx-page .prdx-hero { padding: 110px 0 80px; } }

.prdx-page .prdx-heroGrid {
  position: absolute;
  inset: 0;
  opacity: .18;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(4, 148, 230, 0.10) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(4, 148, 230, 0.10) 1px,
      transparent 1px
    );

  background-size: 40px 40px;

  -webkit-mask-image: radial-gradient(
    70% 70% at 70% 40%,
    #000 0%,
    transparent 100%
  );

          mask-image: radial-gradient(
    70% 70% at 70% 40%,
    #000 0%,
    transparent 100%
  );
}


.prdx-page .prdx-eyebrow {
  color:#cbd5e1; letter-spacing:.08em; text-transform:uppercase; font-weight:700; font-size:.85rem;
  display:inline-flex; align-items:center; gap:.5rem;
}
.prdx-page .prdx-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
}


.prdx-page .prdx-title { font-weight:800; line-height:1.05; }
.prdx-page .prdx-lead { color: rgba(255,255,255,.78); }

.prdx-page .prdx-heroBadge {
  display:inline-flex; gap:.5rem; align-items:center; font-weight:700;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  padding:8px 12px; border-radius:999px; color:#e5e7eb; backdrop-filter: blur(6px);
}

.prdx-page .prdx-heroMedia {
  position: relative;
  border-radius: 22px;
  overflow: hidden;

  /* Meraki-blue border */
  border: 1px solid rgba(4, 148, 230, 0.20);

  /* Soft halo + glassy panel background */
  background:
    radial-gradient(
      700px 350px at 80% -20%,
      rgba(4, 148, 230, 0.12),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.02)
    );

  /* Blue-tinted modern shadows */
  box-shadow:
    0 24px 40px rgba(4, 148, 230, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.prdx-page .prdx-vizLabel {
  position:absolute; right:12px; top:12px; font-size:.8rem; z-index:2;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:#e5e7eb; padding:6px 10px; border-radius:999px; backdrop-filter: blur(6px);
}

.prdx-page .prdx-chip {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:6px 10px; border-radius:999px; font-size:.85rem;
  color:#e2e8f0; background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.25);
}

/* ===== Sticky filter bar ===== */
.prdx-page .prdx-filterWrap {
  position: sticky; top: 64px; z-index: 9; /* below navbar if sticky-top */
  background: #fff; border-bottom: 1px solid #e5e7eb;
}
.prdx-page .prdx-filterBar {
  display:flex; gap:8px; overflow:auto; white-space:nowrap; padding:12px 0;
}
.prdx-page .prdx-filterBtn {
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.9rem; text-decoration:none;
  color:#0f172a; padding:8px 12px; border-radius:999px; border:1px solid #e5e7eb; background:#f8fafc;
}
.prdx-page .prdx-filterBtn.active { background:#0ea5e9; color:#062436; border-color:#0ea5e9; box-shadow:0 6px 18px rgba(14,165,233,.25); }

/* ===== Section head ===== */
.prdx-page .prdx-sectionHead .prdx-eyebrow { color:#475569; }
.prdx-page .prdx-sectionHead .prdx-dot { 
  background:linear-gradient(45deg,#06b6d4,#6366f1); 
}


/* ===== Product card ===== */
.prdx-page .prdx-card {
  border-radius:18px; overflow:hidden; background:#fff; border:1px solid #e5e7eb;
  transition:transform .25s ease, box-shadow .25s ease;
  height:100%;
}
.prdx-page .prdx-card:hover { transform: translateY(-4px); box-shadow:0 16px 40px rgba(2,6,23,.08); }

.prdx-page .prdx-cardMedia { position:relative; border-bottom:1px solid #eef2f7; background:#f8fafc; }
.prdx-page .prdx-cardMedia .ratio > img { object-fit:cover; }
.prdx-page .prdx-sheen {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,0) 10%, rgba(255,255,255,.26) 30%, rgba(255,255,255,0) 60%);
  opacity:.0; transition:opacity .3s ease;
}

.prdx-page .prdx-card:hover .prdx-sheen { opacity:.8; }

.prdx-page .prdx-badges {
  position:absolute; left:12px; top:12px; display:flex; gap:6px; flex-wrap:wrap;
}
.prdx-page .prdx-badge {
  background:#0ea5e9; color:#062436; padding:6px 10px; border-radius:999px; font-weight:700; font-size:.8rem;
  box-shadow:0 6px 20px rgba(14,165,233,.35);
}

.prdx-page .prdx-cardBody { padding:16px; }
.prdx-page .prdx-specs { display:flex; flex-wrap:wrap; gap:6px; }
.prdx-page .prdx-spec {
  font-size:.8rem; background:#f1f5f9; border:1px solid #e2e8f0; padding:4px 8px; border-radius:999px;
}

.prdx-page .prdx-ctaRow { display:flex; gap:8px; flex-wrap:wrap; }

/* ===== Comparison table ===== */
.prdx-page .prdx-table {
  --prdx-r: 14px;
  border:1px solid #e5e7eb; border-radius:var(--prdx-r); overflow:hidden;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
}
.prdx-page .prdx-table thead th { background:#f8fafc; font-weight:700; }
.prdx-page .prdx-table tbody td { vertical-align: middle; }

/* ===== Mini CTA strip ===== */
.prdx-page .prdx-miniCta {
  border:1px solid #e5e7eb; border-radius:16px; padding:18px;
  background:linear-gradient(180deg, #ffffff, #f8fafc);
}

/* ===== Utilities (scoped) ===== */
.prdx-page .prdx-mt-2 { margin-top:.5rem; }
.prdx-page .prdx-mt-3 { margin-top:1rem; }
.prdx-page .prdx-mt-4 { margin-top:1.5rem; }
.prdx-page .prdx-mb-0 { margin-bottom:0; }




/* =========================
   Industries Page (scoped)
   Namespace: .ind-page .ind-*
   ========================= */

.ind-page .ind-hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(99,102,241,.25), transparent 60%),
    radial-gradient(900px 420px at 110% 10%, rgba(14,165,233,.25), transparent 60%),
    linear-gradient(180deg, #0f172a, #0b1224 70%);
  padding: 90px 0 70px;
}
@media (min-width: 992px){
  .ind-page .ind-hero { padding: 120px 0 80px; }
}
.ind-page .ind-heroGrid {
  position: absolute;
  inset: 0;
  opacity: .15;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(4, 148, 230, 0.10) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(4, 148, 230, 0.10) 1px,
      transparent 1px
    );

  background-size: 40px 40px;
}
.ind-page .ind-eyebrow {
  color:#cbd5e1; letter-spacing:.08em; text-transform:uppercase; font-weight:700; font-size:.85rem;
  display:inline-flex; align-items:center; gap:.5rem;
}
.ind-page .ind-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
}

.ind-page .ind-title { font-weight:800; line-height:1.05; }
.ind-page .ind-lead { color:rgba(255,255,255,.78); }
.ind-page .ind-chip {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:6px 10px; border-radius:999px; font-size:.85rem;
  color:#e2e8f0; background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.25);
}

/* ===== Section Head ===== */
.ind-page .ind-sectionHead .ind-eyebrow { color:#475569; }
.ind-page .ind-sectionHead .ind-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
}


/* ===== Industry Card ===== */
.ind-page .ind-card {
  border-radius:18px; overflow:hidden;
  background:#fff; border:1px solid #e5e7eb;
  transition:transform .25s ease, box-shadow .25s ease;
  height:100%;
}
.ind-page .ind-card:hover {
  transform:translateY(-4px); box-shadow:0 16px 40px rgba(2,6,23,.08);
}
.ind-page .ind-cardMedia {
  position:relative; border-bottom:1px solid #eef2f7; background:#f8fafc;
}
.ind-page .ind-cardMedia > .ratio > img { object-fit:cover; }
.ind-page .ind-badge {
  position:absolute; left:12px; top:12px; z-index:2;
  background:#0ea5e9; color:#062436; padding:6px 10px; border-radius:999px; font-weight:600; font-size:.8rem;
  box-shadow:0 6px 20px rgba(14,165,233,.35);
}
.ind-page .ind-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 10%,
    rgba(255, 255, 255, 0.40) 28%,
    rgba(4, 148, 230, 0.22) 46%,
    rgba(255, 255, 255, 0.25) 62%,
    rgba(255, 255, 255, 0) 80%
  );

  opacity: 0;
  transition: opacity .3s ease;
}

.ind-page .ind-card:hover .ind-sheen { opacity:.8; }
.ind-page .ind-cardBody { padding:16px; }
.ind-page .ind-tags { display:flex; flex-wrap:wrap; gap:6px; }
.ind-page .ind-tag {
  font-size:.8rem; background:#f1f5f9; border:1px solid #e2e8f0; padding:4px 8px; border-radius:999px;
}

/* ===== Highlight Row ===== */
.ind-page .ind-highlight {
  border-radius: 16px;
  padding: 24px;

  /* Meraki-blue border */
  border: 1px solid rgba(4, 148, 230, 0.22);

  /* Soft Meraki halo + clean white gradient */
  background:
    radial-gradient(
      700px 350px at 85% -20%,
      rgba(4, 148, 230, 0.10),
      transparent 70%
    ),
    linear-gradient(90deg, #ffffff, #f8fafc);

  /* Premium soft shadow */
  box-shadow:
    0 14px 32px rgba(4, 148, 230, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}


/* ===== Utility spacing ===== */
.ind-page .ind-mt-2 { margin-top:.5rem; }
.ind-page .ind-mt-3 { margin-top:1rem; }
.ind-page .ind-mt-4 { margin-top:1.5rem; }
.ind-page .ind-mb-0 { margin-bottom:0; }



/* =========================================
   Quality Page (mq-*)
   ========================================= */

/* Page sections base */
.mq-section {
  padding: 72px 0;
}
@media (max-width: 767.98px) {
  .mq-section {
    padding: 52px 0;
  }
}

/* ---------- Hero ---------- */
.mq-hero {
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
  color: #e5edf8;

  background:
    radial-gradient(
      900px 480px at 110% -10%,
      rgba(4, 148, 230, 0.18),
      transparent 60%
    ),
    radial-gradient(
      900px 420px at 0% 10%,
      rgba(4, 148, 230, 0.10),
      transparent 65%
    ),
    linear-gradient(180deg, #0b1120, #020617);
}


.mq-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
  pointer-events: none;
}
.mq-hero-glow-1 {
  width: 620px;
  height: 620px;
  left: -18%;
  top: -28%;
  background: radial-gradient(closest-side, rgba(250, 204, 21, 1), transparent 70%);
}
.mq-hero-glow-2 {
  width: 520px;
  height: 520px;
  right: -14%;
  bottom: -30%;
  background: radial-gradient(closest-side, rgba(245, 158, 11, 1), transparent 70%);
  opacity: .25;
}

.mq-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(
      rgba(4, 148, 230, 0.10) 1px,
      transparent 1px
    ) 0 0 / 32px 32px,
    linear-gradient(
      90deg,
      rgba(4, 148, 230, 0.10) 1px,
      transparent 1px
    ) 0 0 / 32px 32px;

  mask-image: radial-gradient(
    closest-side at 65% 30%,
    rgba(0, 0, 0, .55),
    transparent 70%
  );
}


/* eyebrow */
.mq-hero-eyebrow {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #e5e7eb;
}
.mq-hero-pill {
  padding: .3rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, .25);
  background: rgba(15, 23, 42, .65);
}
.mq-hero-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
}


/* title & text */
.mq-hero-title {
  font-size: clamp(2.15rem, 3vw + 1.1rem, 3rem);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: .3rem;
}
.mq-hero-gradient {
  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mq-hero-sub {
  margin-top: .75rem;
  color: rgba(226, 232, 240, .85);
  font-size: 1.02rem;
}

/* chips */
.mq-hero-chip {
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .55);
  background: rgba(15, 23, 42, .7);
  color: #e5edf8;
  font-size: .85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* metrics */
.mq-hero-metrics {
  margin-top: 1.6rem !important;
}
.mq-hero-metric {
  border-radius: 1rem;
  padding: .7rem .6rem;
  text-align: left;

  /* Meraki-blue border */
  border: 1px solid rgba(4, 148, 230, 0.22);

  /* Dark base + subtle Meraki halo */
  background:
    radial-gradient(
      600px 300px at 80% -20%,
      rgba(4, 148, 230, 0.12),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.92),
      rgba(15, 23, 42, 0.65)
    );

  /* Blue-tinted premium shadow */
  box-shadow:
    0 18px 40px rgba(4, 148, 230, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.mq-hero-metric-val {
  font-weight: 800;
  font-size: 1.3rem;
  color: #f9fafb;
  line-height: 1;
}
.mq-hero-metric-label {
  font-size: .8rem;
  color: #cbd5f5;
  margin-top: .15rem;
}

/* right card */
.mq-hero-card {
  background: radial-gradient(circle at 0% 0%, rgba(249, 250, 251, 1), rgba(226, 232, 240, 1));
  min-height: 260px;
  overflow: hidden;
}
.mq-hero-pattern {
  position: absolute;
  inset: 0;
  opacity: .6;
}

.mq-hero-main {
  position: relative;
  z-index: 1;
  padding: 1.1rem 1.1rem 1rem;
}
.mq-hero-main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}
.mq-hero-main-label {
  font-size: .8rem;
  font-weight: 700;
  padding: .25rem .55rem;
  border-radius: .7rem;
  background: rgba(15, 23, 42, .06);
  color: #111827;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.mq-hero-main-pill {
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .65rem;
  border-radius: 999px;

  /* Meraki Tri-Blue Gradient */
  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );

  color: #0f172a;

  /* Soft premium shadow for subtle elevation */
  box-shadow: 0 6px 14px rgba(4, 148, 230, 0.18);
}


.mq-hero-main-block {
  border-radius: .9rem;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, .4);
  padding: .6rem .65rem;
  min-height: 82px;
}
.mq-hero-main-key {
  font-size: .78rem;
  font-weight: 700;
  color: #0f172a;
}
.mq-hero-main-text {
  font-size: .8rem;
  color: #64748b;
  margin-bottom: 0;
  margin-top: .15rem;
}

/* floating badge */
.mq-hero-badge {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: .9rem;
  padding: .5rem .8rem;
  background: rgba(15, 23, 42, .94);
  color: #e5edf8;
  border: 1px solid rgba(148, 163, 184, .5);
  box-shadow: 0 18px 36px rgba(15, 23, 42, .65);
}
.mq-hero-badge i {
  font-size: 1.2rem;
}
.mq-hero-badge-title {
  font-size: .9rem;
  font-weight: 700;
}
.mq-hero-badge small {
  font-size: .75rem;
  color: #cbd5f5;
}

/* responsive hero */
@media (max-width: 991.98px) {
  .mq-hero {
    padding-top: 56px;
    padding-bottom: 48px;
  }
  .mq-hero-card {
    margin-top: .5rem;
  }
}
@media (max-width: 575.98px) {
  .mq-hero-main {
    padding: .9rem .9rem .85rem;
  }
  .mq-hero-main-block {
    min-height: auto;
  }
  .mq-hero-badge {
    position: static;
    margin: .6rem .9rem .9rem;
  }
}

/* ---------- Section header ---------- */
.mq-sec-eyebrow {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0f172a;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, .03);
  border: 1px solid rgba(15, 23, 42, .08);
}
.mq-sec-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
}

.mq-sec-title {
  font-size: clamp(1.65rem, 2vw + 1rem, 2.1rem);
  font-weight: 700;
  color: #0f172a;
}
.mq-sec-sub {
  color: #64748b;
  max-width: 640px;
}

/* ---------- Pillars ---------- */
.mq-pillars {
  position: relative;

  background:
    radial-gradient(
      900px 420px at 85% -10%,
      rgba(4, 148, 230, 0.10),
      transparent 70%
    ),
    linear-gradient(180deg, #ffffff, #f5f7fb);
}

.mq-pillar-card {
  background: #ffffff;
  border-radius: 1.25rem;
  border: 1px solid rgba(15, 23, 42, .06);
  padding: 1.25rem 1.1rem 1.1rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .05);
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.mq-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(15, 23, 42, .09);
  border-color: rgba(15, 23, 42, .14);
}
.mq-pillar-icon {
  width: 42px;
  height: 42px;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  margin-bottom: .6rem;
  color: #0f172a;

  /* Meraki-blue border */
  border: 1px solid rgba(4, 148, 230, 0.22);

  /* Soft Meraki halo + light gradient */
  background:
    radial-gradient(
      300px 180px at 70% -20%,
      rgba(4, 148, 230, 0.12),
      transparent 70%
    ),
    linear-gradient(180deg, #f9fafb, #eaf0f7);

  /* Blue-tinted premium shadow */
  box-shadow:
    0 10px 24px rgba(4, 148, 230, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.mq-pillar-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .2rem;
}
.mq-pillar-text {
  font-size: .9rem;
  color: #64748b;
  margin-bottom: .6rem;
}
.mq-pillar-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  font-size: .85rem;
  color: #4b5563;
}
.mq-pillar-list li::before {
  content: "•";
  margin-right: .35rem;
  color: #f5a200;
}

/* ---------- Process timeline ---------- */
.mq-process {
  position: relative;

  background:
    radial-gradient(
      800px 420px at -10% -10%,
      rgba(4, 148, 230, 0.12),
      transparent 60%
    ),
    linear-gradient(180deg, #f8fafc, #eef2f7);
}

.mq-process-tag {
  border-radius: 999px;
  padding: .4rem .9rem;
  background: rgba(148, 163, 184, .12);
}

.mq-process-rail {
  position: relative;
  display: grid;
  gap: 20px;
}
@media (min-width: 768px) {
  .mq-process-rail {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* line */
.mq-process-rail::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 34px;
  height: 3px;

  /* Soft ink base + light Meraki blue tint */
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.06),
    rgba(4, 148, 230, 0.16)
  );

  border-radius: 999px;
  opacity: 0.75;
}

@media (max-width: 767.98px) {
  .mq-process-rail::before {
    top: 18px;
    bottom: 0;
    left: 28px;
    right: auto;
    width: 3px;
    height: auto;
  }
}

.mq-step {
  position: relative;
  padding-top: 52px;
}
@media (max-width: 767.98px) {
  .mq-step {
    padding-left: 72px;
    padding-top: 0;
  }
}
.mq-step-badge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
@media (max-width: 767.98px) {
  .mq-step-badge {
    justify-content: flex-start;
    left: 0;
  }
}
.mq-step-badge span {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #0f172a;
  background: #ffffff;
  border: 2px solid transparent;
  background-image:
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(90deg, #f5a200, #ffcc4d);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .16);
}

/* card */
.mq-step-card {
  background: #ffffff;
  border-radius: 1rem;
  border: 1px solid rgba(15, 23, 42, .08);
  padding: 1rem .9rem .9rem;
  height: 100%;
  box-shadow: 0 16px 32px rgba(15, 23, 42, .06);
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.mq-step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, .1);
  border-color: rgba(15, 23, 42, .16);
}
.mq-step-icon {
  width: 40px;
  height: 40px;
  border-radius: .9rem;
  display: grid;
  place-items: center;
  margin-bottom: .55rem;
  color: #0f172a;

  /* Meraki-blue border */
  border: 1px solid rgba(4, 148, 230, 0.22);

  /* Soft Meraki halo + clean white gradient */
  background:
    radial-gradient(
      280px 160px at 70% -20%,
      rgba(4, 148, 230, 0.12),
      transparent 70%
    ),
    linear-gradient(180deg, #f9fafb, #eaf0f7);

  /* Premium blue-tinted shadow */
  box-shadow:
    0 10px 22px rgba(4, 148, 230, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.mq-step-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .15rem;
}
.mq-step-text {
  font-size: .88rem;
  color: #64748b;
  margin-bottom: .4rem;
}
.mq-step-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  font-size: .8rem;
  color: #4b5563;
}
.mq-step-list li + li {
  margin-top: .15rem;
}
.mq-step-list li::before {
  content: "•";
  margin-right: .3rem;
  color: #f5a200;
}

/* ---------- Lab section ---------- */
.mq-lab {
  position: relative;

  background:
    radial-gradient(
      900px 420px at 80% -20%,
      rgba(4, 148, 230, 0.10),
      transparent 70%
    ),
    linear-gradient(180deg, #ffffff, #f7f9fc);
}

.mq-lab-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: grid;
  gap: .65rem;
}
.mq-lab-icon {
  width: 36px;
  height: 36px;
  border-radius: .9rem;
  display: grid;
  place-items: center;
  margin-right: .6rem;
  color: #0f172a;

  /* Meraki-blue border */
  border: 1px solid rgba(4, 148, 230, 0.22);

  /* Soft Meraki halo + clean white gradient */
  background:
    radial-gradient(
      260px 150px at 70% -20%,
      rgba(4, 148, 230, 0.12),
      transparent 70%
    ),
    linear-gradient(180deg, #f9fafb, #eaf0f7);

  /* Premium blue-tinted shadow */
  box-shadow:
    0 10px 20px rgba(4, 148, 230, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.mq-lab-list li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}
.mq-lab-title {
  font-size: .95rem;
  font-weight: 700;
  color: #0f172a;
}
.mq-lab-list small {
  font-size: .8rem;
  color: #64748b;
}
.mq-lab-chip {
  padding: .3rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: rgba(15, 23, 42, .02);
  font-size: .8rem;
  font-weight: 700;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* visual */
.mq-lab-visual {
  min-height: 260px;
}
.mq-lab-overlay {
  position: absolute;
  inset: 0;

  background:
    /* Meraki blue halo */
    radial-gradient(
      700px 400px at 0 0,
      rgba(4, 148, 230, 0.12),
      transparent 60%
    ),

    /* soft dark vignette bottom fade */
    linear-gradient(
      180deg,
      transparent 40%,
      rgba(15, 23, 42, 0.45)
    );
}

.mq-lab-badge {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  border-radius: .85rem;
  padding: .5rem .75rem;
  background: rgba(15, 23, 42, .92);
  color: #e5edf8;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(148, 163, 184, .6);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .9);
}
.mq-lab-badge i {
  font-size: 1.2rem;
}
.mq-lab-badge-title {
  font-size: .9rem;
  font-weight: 700;
}

/* ---------- Certifications band ---------- */
.mq-cert {
  position: relative;

  background:
    radial-gradient(
      720px 420px at 120% -10%,
      rgba(4, 148, 230, 0.14),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #f9fafb,
      #edf2f7
    );
}

.mq-cert-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem;
  font-size: .9rem;
  color: #4b5563;
}
.mq-cert-list li {
  display: flex;
  gap: .4rem;
  align-items: flex-start;
}
.mq-cert-list i {
  color: #f5a200;
  margin-top: .08rem;
}

.mq-cert-grid {
  align-items: stretch;
}
.mq-cert-card {
  background: #ffffff;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, .45);
  padding: .85rem .7rem;
  text-align: center;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
}
.mq-cert-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin: 0 auto .35rem;
  color: #0f172a;

  /* Meraki-blue border */
  border: 1px solid rgba(4, 148, 230, 0.22);

  /* Soft Meraki halo + clean gradient */
  background:
    radial-gradient(
      260px 150px at 70% -20%,
      rgba(4, 148, 230, 0.12),
      transparent 70%
    ),
    linear-gradient(180deg, #f9fafb, #eaf0f7);

  /* Premium blue-tinted shadow */
  box-shadow:
    0 10px 20px rgba(4, 148, 230, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.mq-cert-label {
  font-size: .9rem;
  font-weight: 700;
  color: #0f172a;
}
.mq-cert-card small {
  font-size: .75rem;
  color: #6b7280;
}




/* ==========================
   Meraki Resources Page (mres-*)
   ========================== */

/* Hero wrapper */
.mres-hero {
  padding: 72px 0 56px;
  background:
    radial-gradient(900px 540px at 10% -10%, rgba(255,204,77,.16), transparent 60%),
    radial-gradient(800px 520px at 110% 120%, rgba(15,23,42,.88), #020617);
  position: relative;
  color: #e5e7eb;
}

/* soft glows */
.mres-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
  pointer-events: none;
}
.mres-hero-glow-1 {
  width: 580px; height: 580px;
  top: -26%; left: -16%;
  background: radial-gradient(closest-side, #facc15, transparent 70%);
}
.mres-hero-glow-2 {
  width: 540px; height: 540px;
  bottom: -20%; right: -18%;
  background: radial-gradient(closest-side, #22d3ee, transparent 70%);
}

.mres-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .32;

  background:
    /* Meraki Blue vertical grid lines */
    linear-gradient(
      rgba(4, 148, 230, 0.14) 1px,
      transparent 1px
    ) 0 0 / 32px 32px,

    /* Meraki Blue horizontal grid lines */
    linear-gradient(
      90deg,
      rgba(4, 148, 230, 0.14) 1px,
      transparent 1px
    ) 0 0 / 32px 32px;

  /* Soft vignette mask to focus grid */
  mask-image: radial-gradient(
    closest-side at 80% 40%,
    rgba(0, 0, 0, 0.75),
    transparent 70%
  );
}


/* eyebrow variant for dark hero */
.mres-eyebrow-dark {
  background: rgba(15,23,42,.7) !important;
  border-color: rgba(148,163,184,.6) !important;
  color: #e2e8f0 !important;
}
.mres-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  display: inline-block;

  background: linear-gradient(
    135deg,
    #0284D8,
    #0494E6,
    #33B4FF
  );
}


.mres-hero-title {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  color: #f9fafb;
}
.mres-hero-subtext {
  color: #cbd5f5;
  max-width: 34rem;
}

/* search bar */
.mres-search-wrapper {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}
.mres-search-input {
  flex: 1 1 220px;
  background: rgba(15,23,42,.85);
  border-radius: 999px;
  display: flex;
  align-items: center;
  padding: .18rem .25rem .18rem .95rem;
  border: 1px solid rgba(148,163,184,.65);
}
.mres-search-input i {
  color: #9ca3af;
  margin-right: .5rem;
}
.mres-search-input input {
  background: transparent;
  color: #e5e7eb;
  font-weight: 500;
}
.mres-search-input input::placeholder {
  color: #9ca3af;
}
.mres-search-btn {
  border-radius: 999px;
  padding-inline: 1.4rem;
  white-space: nowrap;
}

/* chips */
.mres-chip {
  border-radius: 999px;
  padding: .28rem .75rem;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(15,23,42,.7);
  color: #e5e7eb;
  font-size: .8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .08s ease;
}
.mres-chip:hover {
  background: rgba(15,23,42,.95);
  border-color: rgba(248,250,252,.6);
  transform: translateY(-1px);
}

/* meta pills */
.mres-meta-pill {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-width: 96px;
  padding: .5rem .75rem;
  border-radius: 1rem;
  background: rgba(15,23,42,.8);
  border: 1px solid rgba(148,163,184,.5);
  box-shadow: 0 12px 24px rgba(15,23,42,.5);
}
.mres-meta-val {
  font-weight: 800;
  font-size: 1.15rem;
  color: #facc15;
  line-height: 1;
}
.mres-meta-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #cbd5e1;
}

/* featured card */
.mres-feature-card {
  background: radial-gradient(circle at 0% 0%, rgba(250,204,21,.14), transparent 50%),
              radial-gradient(circle at 100% 100%, rgba(94,234,212,.12), transparent 52%),
              rgba(15,23,42,.98);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1.1fr);
}
@media (max-width: 991.98px) {
  .mres-feature-card {
    grid-template-columns: minmax(0, 1fr);
  }
}
.mres-feature-tag {
  position: absolute;
  top: 14px;
  left: 16px;
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(15,23,42,.9);
  border: 1px solid rgba(148,163,184,.7);
  color: #e5e7eb;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  z-index: 2;
}
.mres-feature-tag i {
  color: #facc15;
}

.mres-feature-body {
  padding: 2.6rem 1.8rem 1.8rem;
  color: #e5e7eb;
}
@media (max-width: 575.98px) {
  .mres-feature-body {
    padding: 2.2rem 1.15rem 1.4rem;
  }
}
.mres-feature-text {
  color: #cbd5f5;
}
.mres-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mres-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: .9rem;
  color: #e5e7eb;
}
.mres-feature-list li + li {
  margin-top: .2rem;
}
.mres-feature-list i {
  color: #22c55e;
  margin-top: .1rem;
}

/* feature side */
.mres-feature-side {
  border-left: 1px solid rgba(30,64,175,.6);
  background: radial-gradient(circle at 110% -10%, rgba(56,189,248,.55), transparent 55%),
              rgba(15,23,42,.95);
  padding: 2.4rem 1.3rem 1.6rem;
  flex-direction: column;
  gap: .75rem;
  justify-content: flex-end;
}
.mres-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .7rem;
  border-radius: .8rem;
  border: 1px solid rgba(148,163,184,.6);
  background: rgba(15,23,42,.8);
  color: #e5e7eb;
  font-size: .8rem;
  font-weight: 600;
}
.mres-feature-pill i {
  color: #facc15;
}

/* ==========================
   Resource list / grid
   ========================== */
.mres-list {
  position: relative;

  background:
    radial-gradient(
      780px 420px at 85% -10%,
      rgba(4, 148, 230, 0.12),
      transparent 65%
    ),
    linear-gradient(180deg, #f9fafb 0%, #eef2f7 100%);
}


/* filters row */
.mres-filter-pill {
  border-radius: 999px;
  padding: .28rem .9rem;
  border: 1px solid rgba(148,163,184,.7);
  background: #ffffff;
  font-size: .8rem;
  font-weight: 600;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .06s ease;
}
.mres-filter-pill i {
  font-size: .9rem;
}
.mres-filter-pill:hover {
  background: #0f172a;
  color: #f9fafb;
  border-color: #0f172a;
  transform: translateY(-1px);
}
.mres-filter-pill-active {
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  border-color: transparent;
  color: #0f172a;
}
.mres-sort-select {
  min-width: 160px;
  border-radius: 999px;
  padding-inline: .9rem;
  border-color: rgba(148,163,184,.8);
  font-size: .8rem;
  font-weight: 600;
}

/* cards */
.mres-card {
  background: #ffffff;
  border-radius: 1.25rem;
  box-shadow: 0 14px 36px rgba(15,23,42,.08);
  border: 1px solid rgba(148,163,184,.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.mres-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px rgba(15,23,42,.14);
  border-color: rgba(15,23,42,.2);
}

/* media band */
.mres-card-media {
  position: relative;
  height: 120px;
  background: radial-gradient(circle at 0% 0%, #f97316, transparent 60%),
              radial-gradient(circle at 100% 100%, #facc15, transparent 60%),
              #0f172a;
}
.mres-card-media-green {
  background: radial-gradient(circle at 0% 0%, #22c55e, transparent 60%),
              radial-gradient(circle at 100% 100%, #bef264, transparent 60%),
              #0f172a;
}
.mres-card-media-blue {
  background: radial-gradient(circle at 0% 0%, #38bdf8, transparent 60%),
              radial-gradient(circle at 100% 100%, #4f46e5, transparent 60%),
              #020617;
}
.mres-card-media-gold {
  background: radial-gradient(circle at 0% 0%, #f97316, transparent 60%),
              radial-gradient(circle at 100% 100%, #facc15, transparent 60%),
              #020617;
}
.mres-card-media-purple {
  background: radial-gradient(circle at 0% 0%, #a855f7, transparent 60%),
              radial-gradient(circle at 100% 100%, #6366f1, transparent 60%),
              #020617;
}
.mres-card-media-teal {
  background: radial-gradient(circle at 0% 0%, #2dd4bf, transparent 60%),
              radial-gradient(circle at 100% 100%, #0ea5e9, transparent 60%),
              #020617;
}

.mres-card-type {
  position: absolute;
  top: 12px;
  left: 14px;
  padding: .25rem .65rem;
  font-size: .75rem;
  border-radius: .85rem;
  border: 1px solid rgba(226,232,240,.9);
  color: #f9fafb;
  background: rgba(15,23,42,.4);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
}
.mres-card-type i {
  font-size: .9rem;
}

.mres-card-icon {
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  background: rgba(15,23,42,.85);
  color: #facc15;
  box-shadow: 0 10px 26px rgba(15,23,42,.65);
  font-size: 1.3rem;
}

/* card body */
.mres-card-body {
  padding: 1.15rem 1.25rem 1.1rem;
}
.mres-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .3rem;
}
.mres-card-text {
  font-size: .9rem;
  color: #64748b;
  margin-bottom: .65rem;
}
.mres-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  font-size: .78rem;
  color: #6b7280;
  margin-bottom: .4rem;
}
.mres-card-meta span i {
  margin-right: .25rem;
}

.mres-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-bottom: .5rem;
}
.mres-card-tags span {
  padding: .18rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.6);
  font-size: .75rem;
  font-weight: 600;
  color: #4b5563;
  background: #f9fafb;
}

.mres-card-link {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-weight: 600;
  font-size: .85rem;
  text-decoration: none;
  color: var(--brand-1);
  margin-top: .1rem;
}
.mres-card-link:hover {
  color: var(--brand-2);
}
.mres-card-link i {
  font-size: 1.1rem;
}

/* ==========================
   Help / CTA strip
   ========================== */
.mres-help {
  padding: 40px 0 56px;
  background: linear-gradient(180deg, #eef2f7 0%, #ffffff 100%);
}
.mres-help-card {
  background: linear-gradient(135deg, #ffffff 0%, #e5edff 100%);
  padding: 1.7rem 1.6rem;
  border: 1px solid rgba(148,163,184,.6) !important;
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
}
.mres-help-badge {
  background: linear-gradient(90deg, var(--brand-1,#F5A200), var(--brand-2,#FFCC4D));
  border: 0;
}
.mres-help-badge i {
  color: #0f172a;
}

@media (max-width: 767.98px) {
  .mres-hero {
    padding: 56px 0 40px;
  }
  .mres-help-card {
    padding: 1.4rem 1.1rem;
  }
  .mres-search-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  .mres-search-btn {
    width: 100%;
    justify-content: center;
  }
}




/* ==========================
   Meraki Contact Page (mcon-*)
   ========================== */

/* Hero */
.mcon-hero {
  padding: 72px 0 56px;
  background:
    radial-gradient(900px 580px at 0% 0%, rgba(250,204,21,.16), transparent 60%),
    radial-gradient(900px 580px at 120% 120%, rgba(56,189,248,.18), transparent 55%),
    #020617;
  color: #e5e7eb;
  position: relative;
}

.mcon-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
  pointer-events: none;
}
.mcon-hero-glow-1 {
  width: 540px; height: 540px;
  top: -24%; left: -16%;
  background: radial-gradient(closest-side, #facc15, transparent 70%);
}
.mcon-hero-glow-2 {
  width: 520px; height: 520px;
  bottom: -20%; right: -18%;
  background: radial-gradient(closest-side, #22d3ee, transparent 70%);
}

.mcon-hero-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(148,163,184,.18) 1px, transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg, rgba(148,163,184,.18) 1px, transparent 1px) 0 0/32px 32px;
  opacity: .35;
  mask-image: radial-gradient(closest-side at 70% 40%, rgba(0,0,0,.75), transparent 70%);
  pointer-events: none;
}

.mcon-eyebrow-dark {
  background: rgba(15,23,42,.7) !important;
  border-color: rgba(148,163,184,.6) !important;
  color: #e2e8f0 !important;
}

.mcon-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  display: inline-block;
}

.mcon-hero-title {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  color: #f9fafb;
  max-width: 34rem;
}
.mcon-hero-subtext {
  max-width: 32rem;
  color: #cbd5f5;
}

/* hero pills */
.mcon-hero-badges {
  margin-top: 1.25rem;
}
.mcon-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  background: rgba(15,23,42,.85);
  border: 1px solid rgba(148,163,184,.7);
  box-shadow: 0 14px 30px rgba(15,23,42,.7);
}
.mcon-hero-pill i {
  font-size: 1.1rem;
  color: #facc15;
}
.mcon-hero-pill-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #e5e7eb;
}
.mcon-hero-pill small {
  font-size: .75rem;
  color: #cbd5e1;
}

/* Hero quick contact card */
.mcon-hero-card {
  background: radial-gradient(circle at 0% 0%, rgba(250,204,21,.08), transparent 60%),
              radial-gradient(circle at 100% 100%, rgba(94,234,212,.12), transparent 60%),
              #0b1220;
  padding: 1.6rem 1.4rem;
  color: #e5e7eb;
}
.mcon-hero-card-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-1,#F5A200), var(--brand-2,#FFCC4D));
  box-shadow: 0 0 0 4px rgba(250,204,21,.35);
}
.mcon-hero-contact-list {
  display: grid;
  gap: .85rem;
}
.mcon-hero-contact-item {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}
.mcon-hero-contact-item i {
  font-size: 1.3rem;
  color: #facc15;
  margin-top: .1rem;
}
.mcon-hero-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #94a3b8;
}
.mcon-hero-value {
  font-size: .9rem;
  color: #e5e7eb;
  text-decoration: none;
}
.mcon-hero-value:hover {
  text-decoration: underline;
}

.mcon-form-badge {
  background: rgba(15,23,42,.1);
  border: 1px solid rgba(148,163,184,.6);
  font-size: .75rem;
  font-weight: 600;
}
.mcon-form-badge i {
  color: var(--brand-1,#F5A200);
}

/* ==========================
   Main contact section
   ========================== */

.mcon-main {
  padding: 48px 0 48px;
  background: linear-gradient(180deg, #f9fafb 0%, #eef2f7 100%);
}

.mcon-form-card {
  background: #ffffff;
  padding: 1.7rem 1.55rem;
  border: 1px solid rgba(148,163,184,.6);
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
}

/* form inputs */
.mcon-form-label {
  font-size: .85rem;
  font-weight: 600;
  color: #0f172a;
}
.mcon-fi {
  display: flex;
  align-items: center;
  gap: .45rem;
  border-radius: .85rem;
  border: 1px solid rgba(148,163,184,.8);
  padding: .25rem .55rem .25rem .7rem;
  background: #f9fafb;
}
.mcon-fi i {
  color: #6b7280;
}
.mcon-fi .form-control,
.mcon-fi .form-select {
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: .9rem;
}
.mcon-fi .form-control:focus,
.mcon-fi .form-select:focus {
  box-shadow: none;
}
.mcon-fi-textarea {
  align-items: flex-start;
  padding-top: .5rem;
}
.mcon-fi-textarea i {
  margin-top: .15rem;
}

.mcon-form-check .form-check-input {
  border-radius: .4rem;
  border-color: rgba(148,163,184,.9);
}
.mcon-form-check .form-check-input:checked {
  background-color: var(--brand-1,#F5A200);
  border-color: var(--brand-1,#F5A200);
}

/* Map card */
.mcon-mapCard {
  background: #eef2f7;
  position: relative;
}
.mcon-mapPattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mcon-mapSheen {
  animation: mcon-map-sheen 3.5s linear infinite;
  opacity: .7;
}
@keyframes mcon-map-sheen {
  from { transform: translateX(-70%); }
  to   { transform: translateX(100%); }
}
.mcon-mapEmbed {
  position: absolute;
  inset: 16px;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15,23,42,.25);
}
.mcon-mapEmbed iframe {
  width: 100%;
  height: 100%;
}

.mcon-mapTicker {
  position: absolute;
  left: 16px;
  bottom: 14px;
  right: 16px;
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  font-size: .78rem;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
}
.mcon-mapTicker span {
  padding: .25rem .75rem;
  border-radius: 999px;
  background: rgba(248,250,252,.95);
  border: 1px solid rgba(148,163,184,.6);
}
.mcon-map-pin {
  position: absolute;
  top: 14px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: rgba(15,23,42,.9);
  color: #f9fafb;
  font-size: .75rem;
}
.mcon-map-pin i {
  color: #f97316;
}

/* ==========================
   Contact Tiles
   ========================== */
.mcon-tiles {
  padding: 32px 0 40px;
  background: #ffffff;
}
.mcon-tile {
  border-radius: 1.25rem;
  border: 1px solid rgba(148,163,184,.55);
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 55%, #e5edff 100%);
  padding: 1.1rem .95rem;
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  box-shadow: 0 14px 30px rgba(15,23,42,.06);
}
.mcon-tile-icon {
  width: 40px;
  height: 40px;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  background: #0f172a;
  color: #facc15;
  box-shadow: 0 12px 24px rgba(15,23,42,.4);
}
.mcon-tile-body {
  flex: 1;
}
.mcon-tile-label {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #0f172a;
}
.mcon-tile-text {
  font-size: .9rem;
  color: #6b7280;
  margin-bottom: .2rem;
}
.mcon-tile-meta {
  font-size: .78rem;
  color: #4b5563;
}

/* ==========================
   FAQ
   ========================== */
.mcon-faq {
  padding: 40px 0 56px;
  background: linear-gradient(180deg, #eef2f7 0%, #ffffff 100%);
}

.mcon-faq-list li {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  color: #4b5563;
}
.mcon-faq-list li + li {
  margin-top: .25rem;
}
.mcon-faq-list i {
  color: #22c55e;
}

/* accordion */
.mcon-accordion .accordion-item {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.65);
  background: #ffffff;
}
.mcon-accordion .accordion-item + .accordion-item {
  margin-top: .6rem;
}
.mcon-accordion-btn {
  font-size: .9rem;
  font-weight: 600;
  color: #0f172a;
  background: #f9fafb;
  padding: .75rem 1rem;
}
.mcon-accordion-btn:not(.collapsed) {
  background: linear-gradient(90deg, #fefce8 0%, #e0f2fe 100%);
  color: #0f172a;
  box-shadow: inset 0 -1px 0 rgba(148,163,184,.5);
}
.mcon-accordion-btn:focus {
  border-color: transparent;
  box-shadow: 0 0 0 0.1rem rgba(234,179,8,.4);
}
.mcon-accordion-body {
  font-size: .88rem;
  color: #4b5563;
  background: #ffffff;
}

/* ==========================
   Responsive tweaks
   ========================== */
@media (max-width: 991.98px) {
  .mcon-hero {
    padding: 56px 0 40px;
  }
  .mcon-form-card {
    padding: 1.4rem 1.15rem;
  }
}

@media (max-width: 767.98px) {
  .mcon-hero-card {
    margin-top: .75rem;
  }
  .mcon-main {
    padding: 40px 0 40px;
  }
  .mcon-mapEmbed {
    inset: 14px;
  }
}

@media (max-width: 575.98px) {
  .mcon-hero-title {
    font-size: 1.7rem;
  }
  .mcon-hero-card {
    padding: 1.4rem 1.15rem;
  }
}




/* =========================================
   Meraki Privacy Policy Page (mpriv-*)
   ========================================= */

/* Hero */
.mpriv-hero {
  padding: 72px 0 56px;
  background:
    radial-gradient(900px 580px at 0% 0%, rgba(250,204,21,.14), transparent 60%),
    radial-gradient(900px 580px at 100% 100%, rgba(56,189,248,.16), transparent 55%),
    #020617;
  color: #e5e7eb;
  position: relative;
}

.mpriv-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
  pointer-events: none;
}
.mpriv-hero-glow-1 {
  width: 550px; height: 550px;
  top: -20%; left: -14%;
  background: radial-gradient(closest-side, #facc15, transparent 70%);
}
.mpriv-hero-glow-2 {
  width: 520px; height: 520px;
  bottom: -18%; right: -16%;
  background: radial-gradient(closest-side, #22d3ee, transparent 70%);
}

.mpriv-hero-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(148,163,184,.16) 1px, transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg, rgba(148,163,184,.16) 1px, transparent 1px) 0 0/32px 32px;
  opacity: .35;
  mask-image: radial-gradient(closest-side at 70% 40%, rgba(0,0,0,.75), transparent 70%);
  pointer-events: none;
}

.mpriv-eyebrow {
  background: rgba(15,23,42,.76) !important;
  border-color: rgba(148,163,184,.75) !important;
  color: #e5e7eb !important;
}

.mpriv-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--brand-1,#F5A200), var(--brand-2,#FFCC4D));
  display: inline-block;
}

.mpriv-hero-title {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: #f9fafb;
  max-width: 36rem;
}
.mpriv-hero-subtext {
  max-width: 34rem;
  color: #cbd5f5;
}

/* hero meta */
.mpriv-meta {
  margin-top: 1.3rem;
}
.mpriv-meta-item {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .9rem;
  border-radius: .9rem;
  background: rgba(15,23,42,.9);
  border: 1px solid rgba(148,163,184,.75);
  box-shadow: 0 16px 36px rgba(15,23,42,.85);
}
.mpriv-meta-item i {
  font-size: 1.1rem;
  color: #facc15;
}
.mpriv-meta-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #94a3b8;
}
.mpriv-meta-value {
  font-size: .88rem;
  color: #e5e7eb;
}

/* hero card */
.mpriv-hero-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(250,204,21,.12), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(94,234,212,.14), transparent 60%),
    #020617;
  padding: 1.6rem 1.4rem;
  color: #e5e7eb;
  box-shadow: 0 18px 40px rgba(15,23,42,.7);
}
.mpriv-hero-card-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-1,#F5A200), var(--brand-2,#FFCC4D));
  box-shadow: 0 0 0 4px rgba(250,204,21,.4);
}

.mpriv-hero-list li {
  display: flex;
  gap: .6rem;
  font-size: .9rem;
  color: #e5e7eb;
  align-items: flex-start;
}
.mpriv-hero-list li + li {
  margin-top: .45rem;
}
.mpriv-hero-list i {
  color: #22c55e;
  margin-top: .15rem;
}

/* ==========================
   Main content
   ========================== */
.mpriv-main {
  padding: 52px 0 60px;
  background: linear-gradient(180deg, #f9fafb 0%, #eef2f7 45%, #ffffff 100%);
}

/* sidecard / TOC */
.mpriv-sidecard {
  padding: 1.4rem 1.2rem;
  background: #ffffff;
  border-radius: 1.3rem;
  border: 1px solid rgba(148,163,184,.7);
  box-shadow: 0 16px 34px rgba(15,23,42,.07);
  position: sticky;
  top: 88px;
}
.mpriv-side-text {
  font-size: .85rem;
  color: #6b7280;
}
.mpriv-toc {
  margin-top: .7rem;
  display: grid;
  gap: .25rem;
}
.mpriv-toc a {
  display: inline-flex;
  font-size: .85rem;
  color: #0f172a;
  text-decoration: none;
  padding: .1rem 0;
}
.mpriv-toc a::before {
  content: "•";
  margin-right: .45rem;
  color: var(--brand-1,#F5A200);
}
.mpriv-toc a:hover {
  color: var(--brand-2,#FFCC4D);
}

/* policy sections */
.mpriv-section + .mpriv-section {
  margin-top: 2rem;
}
.mpriv-heading {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .5rem;
}
.mpriv-subheading {
  font-size: .96rem;
  font-weight: 600;
  color: #111827;
  margin-top: .75rem;
  margin-bottom: .25rem;
}

.mpriv-section p {
  font-size: .92rem;
  color: #4b5563;
  margin-bottom: .5rem;
}
.mpriv-list {
  padding-left: 1.1rem;
  margin-bottom: .5rem;
}
.mpriv-list li {
  font-size: .9rem;
  color: #4b5563;
  margin-bottom: .25rem;
}
.mpriv-list strong {
  color: #0f172a;
}

.mpriv-inline-link {
  color: var(--brand-1,#F5A200);
  text-decoration: none;
}
.mpriv-inline-link:hover {
  text-decoration: underline;
}

/* ==========================
   Responsive
   ========================== */
@media (max-width: 991.98px) {
  .mpriv-hero {
    padding: 60px 0 40px;
  }
  .mpriv-sidecard {
    position: static;
    margin-bottom: 1rem;
  }
}

@media (max-width: 767.98px) {
  .mpriv-hero-card {
    margin-top: .8rem;
    padding: 1.4rem 1.1rem;
  }
  .mpriv-main {
    padding: 40px 0 48px;
  }
}

@media (max-width: 575.98px) {
  .mpriv-hero-title {
    font-size: 1.7rem;
  }
  .mpriv-meta-item {
    width: 100%;
    justify-content: flex-start;
  }
}




/* =========================================
   Meraki Terms & Conditions Page (mterms-*)
   ========================================= */

/* Hero wrapper */
.mterms-hero {
  padding: 72px 0 56px;
  background:
    radial-gradient(900px 580px at 0% 0%, rgba(56,189,248,.16), transparent 60%),
    radial-gradient(900px 580px at 100% 100%, rgba(139,92,246,.18), transparent 55%),
    #020617;
  color: #e5e7eb;
  position: relative;
}

/* Soft glows */
.mterms-hero-glow-1,
.mterms-hero-glow-2 {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .36;
  pointer-events: none;
}
.mterms-hero-glow-1 {
  width: 520px; height: 520px;
  top: -18%; left: -16%;
  background: radial-gradient(closest-side, #22d3ee, transparent 70%);
}
.mterms-hero-glow-2 {
  width: 500px; height: 500px;
  bottom: -20%; right: -14%;
  background: radial-gradient(closest-side, #a855f7, transparent 70%);
}

/* grid overlay */
.mterms-hero-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(148,163,184,.18) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg, rgba(148,163,184,.18) 1px, transparent 1px) 0 0/26px 26px;
  opacity: .4;
  mask-image: radial-gradient(closest-side at 60% 40%, rgba(0,0,0,.9), transparent 70%);
  pointer-events: none;
}

/* hero text */
.mterms-eyebrow {
  background: rgba(15,23,42,.85) !important;
  border-color: rgba(148,163,184,.8) !important;
  color: #e5e7eb !important;
}
.mterms-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, #a855f7);
  display: inline-block;
}

.mterms-hero-title {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: #f9fafb;
  max-width: 36rem;
}
.mterms-hero-subtext {
  max-width: 35rem;
  color: #cbd5f5;
  font-size: .98rem;
}

/* meta badges */
.mterms-meta {
  margin-top: 1.3rem;
}
.mterms-meta-item {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .9rem;
  border-radius: .9rem;
  background: rgba(15,23,42,.92);
  border: 1px solid rgba(148,163,184,.85);
  box-shadow: 0 16px 36px rgba(15,23,42,.85);
}
.mterms-meta-item i {
  font-size: 1.1rem;
  color: #22d3ee;
}
.mterms-meta-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #94a3b8;
}
.mterms-meta-value {
  font-size: .88rem;
  color: #e5e7eb;
}

/* hero card */
.mterms-hero-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(56,189,248,.14), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(139,92,246,.16), transparent 55%),
    #020617;
  padding: 1.6rem 1.4rem;
  color: #e5e7eb;
  box-shadow: 0 20px 40px rgba(15,23,42,.8);
}
.mterms-hero-pill {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, #a855f7);
  box-shadow: 0 0 0 4px rgba(59,130,246,.6);
}

.mterms-hero-card-text {
  font-size: .9rem;
  color: #cbd5f5;
  margin-bottom: .8rem;
}
.mterms-hero-list li {
  display: flex;
  gap: .6rem;
  font-size: .9rem;
  color: #e5e7eb;
  align-items: flex-start;
}
.mterms-hero-list li + li {
  margin-top: .35rem;
}
.mterms-hero-list i {
  color: #22c55e;
  margin-top: .15rem;
}

/* ==========================
   Main content
   ========================== */
.mterms-main {
  padding: 52px 0 60px;
  background: linear-gradient(180deg, #f9fafb 0%, #eef2f7 45%, #ffffff 100%);
}

/* side card */
.mterms-sidecard {
  padding: 1.4rem 1.2rem;
  background: #ffffff;
  border-radius: 1.3rem;
  border: 1px solid rgba(148,163,184,.75);
  box-shadow: 0 16px 34px rgba(15,23,42,.07);
  position: sticky;
  top: 88px;
}
.mterms-side-text {
  font-size: .85rem;
  color: #6b7280;
}
.mterms-toc {
  margin-top: .7rem;
  display: grid;
  gap: .25rem;
}
.mterms-toc a {
  display: inline-flex;
  font-size: .85rem;
  color: #0f172a;
  text-decoration: none;
  padding: .1rem 0;
}
.mterms-toc a::before {
  content: "•";
  margin-right: .45rem;
  color: #22d3ee;
}
.mterms-toc a:hover {
  color: #0ea5e9;
}

/* sections */
.mterms-section + .mterms-section {
  margin-top: 2rem;
}
.mterms-heading {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .5rem;
}
.mterms-section p {
  font-size: .92rem;
  color: #4b5563;
  margin-bottom: .5rem;
}
.mterms-list {
  padding-left: 1.1rem;
  margin-bottom: .5rem;
}
.mterms-list li {
  font-size: .9rem;
  color: #4b5563;
  margin-bottom: .25rem;
}
.mterms-list strong {
  color: #0f172a;
}

.mterms-inline-link {
  color: #0ea5e9;
  text-decoration: none;
}
.mterms-inline-link:hover {
  text-decoration: underline;
}

/* ==========================
   Responsive
   ========================== */
@media (max-width: 991.98px) {
  .mterms-hero {
    padding: 60px 0 40px;
  }
  .mterms-sidecard {
    position: static;
    margin-bottom: 1rem;
  }
}

@media (max-width: 767.98px) {
  .mterms-hero-card {
    margin-top: .8rem;
    padding: 1.4rem 1.1rem;
  }
  .mterms-main {
    padding: 40px 0 48px;
  }
}

@media (max-width: 575.98px) {
  .mterms-hero-title {
    font-size: 1.7rem;
  }
  .mterms-meta-item {
    width: 100%;
    justify-content: flex-start;
  }
}




/* ======================================
   THANK YOU PAGE (mthank-*)
   ====================================== */

.mthank-hero {
  padding: 100px 0;
  background: #020617;
  position: relative;
  color: #f8fafc;
  overflow: hidden;
}

/* Background glows */
.mthank-glow-1,
.mthank-glow-2 {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.45;
  pointer-events: none;
}

.mthank-glow-1 {
  width: 450px;
  height: 450px;
  background: rgba(56, 189, 248, 0.35);
  top: -10%;
  left: -10%;
}

.mthank-glow-2 {
  width: 480px;
  height: 480px;
  background: rgba(139, 92, 246, 0.35);
  bottom: -12%;
  right: -12%;
}

/* Main card */
.mthank-box {
  max-width: 560px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 40px 32px;
  border-radius: 24px;
}

.mthank-icon i {
  font-size: 64px;
  color: #22c55e;
}

.mthank-title {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
}

.mthank-subtext {
  font-size: 1rem;
  color: #d1d5db;
  max-width: 420px;
  margin: 0 auto;
}

/* Buttons */
.mthank-box .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.mthank-box .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Responsive */
@media (max-width: 576px) {
  .mthank-box {
    padding: 32px 20px;
  }
  .mthank-title {
    font-size: 1.7rem;
  }
}




/* ============================
   ABOUT PAGE (ma- namespace)
   ============================ */

/* Hero */
.ma-hero {
  padding: 72px 0 64px;
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(255,204,77,.15), transparent 65%),
    linear-gradient(#ffffff, #f5f7fb);
  position: relative;
}

.ma-hero-glow-1,
.ma-hero-glow-2 {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
  pointer-events: none;
}
.ma-hero-glow-1 {
  width: 520px;
  height: 520px;
  left: -14%;
  top: -20%;
  background: radial-gradient(closest-side, var(--brand-1, #F5A200), transparent 70%);
}
.ma-hero-glow-2 {
  width: 520px;
  height: 520px;
  right: -14%;
  bottom: -22%;
  background: radial-gradient(closest-side, var(--brand-2, #FFCC4D), transparent 70%);
}

/* Breadcrumb */
.ma-hero-breadcrumb {
  color: #64748b;
}
.ma-hero-breadcrumb i {
  color: var(--ink-2, #334155);
}
.ma-hero-sep {
  width: 18px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(148,163,184,.3), rgba(148,163,184,.7));
}

/* Eyebrow */
.ma-hero-eyebrow {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
  color: #0f172a;
}
.ma-hero-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--brand-1,#F5A200), var(--brand-2,#FFCC4D));
}

/* Hero title */
.ma-hero-title {
  font-size: clamp(2.1rem, 3vw + 1.4rem, 3rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink,#0f172a);
}
.ma-hero-gradient {
  background-image: linear-gradient(90deg, var(--brand-1,#F5A200), var(--brand-2,#FFCC4D));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ma-hero-lead {
  font-size: 1rem;
  color: #475569;
}

/* Chips */
.ma-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(15,23,42,.03);
  color: #334155;
}
.ma-hero-chip i {
  font-size: .9rem;
}

/* Stats */
.ma-hero-stats {
  margin-top: 1.4rem;
}
.ma-hero-stat {
  border-radius: 1rem;
  padding: .7rem .65rem;
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 12px 26px rgba(15,23,42,.06);
  text-align: left;
}
.ma-hero-stat-val {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink,#0f172a);
  line-height: 1.1;
}
.ma-hero-stat-key {
  font-size: .74rem;
  font-weight: 600;
  color: #64748b;
}

.ma-hero-footnote {
  font-size: .72rem;
}

/* Hero visual */
.ma-hero-visual {
  background: #e7ecf4;
  min-height: 320px;
}
.ma-hero-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ma-hero-main-img {
  position: absolute;
  inset: 9% 9% 26% 9%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(15,23,42,.18);
}
.ma-hero-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ma-hero-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.7) 50%, transparent 60%);
  transform: translateX(-120%);
  mix-blend-mode: screen;
  animation: maHeroShine 5.2s linear infinite;
}
@keyframes maHeroShine {
  to { transform: translateX(120%); }
}

/* Glass tags */
.ma-hero-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border-radius: .9rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.12);
  color: #0f172a;
  font-size: .8rem;
  font-weight: 600;
  box-shadow: 0 12px 26px rgba(15,23,42,.12);
}
.ma-hero-tag i {
  opacity: .85;
}
.ma-hero-tag-left {
  left: 1rem;
  top: 1rem;
}
.ma-hero-tag-right {
  right: 1rem;
  bottom: 4.5rem;
}

/* Pill at bottom */
.ma-hero-pill {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 14px 30px rgba(15,23,42,.12);
  text-align: center;
  max-width: 90%;
}

/* Story / Journey */
.ma-story {
  background: linear-gradient(#ffffff, #f8fafc);
}
.ma-section-eyebrow {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
  color: #0f172a;
}
.ma-section-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--brand-1,#F5A200), var(--brand-2,#FFCC4D));
}
.ma-section-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ink,#0f172a);
}

/* Timeline */
.ma-timeline {
  position: relative;
  padding-left: 32px;
  border-left: 2px dashed rgba(148,163,184,.5);
  display: grid;
  gap: 1.2rem;
}
.ma-timeline-item {
  position: relative;
  padding-left: 10px;
  view-timeline-name: --maTimeline;
  animation: maTimelineIn .6s ease both;
  animation-timeline: view();
  animation-range: entry 30% cover 35%;
}
@keyframes maTimelineIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.ma-timeline-node {
  position: absolute;
  left: -42px;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 800;
  color: #0f172a;
  background: #fff;
  border: 2px solid transparent;
  background-image:
    linear-gradient(#fff,#fff),
    linear-gradient(90deg, var(--brand-1,#F5A200), var(--brand-2,#FFCC4D));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 8px 18px rgba(15,23,42,.12);
}

/* Mission & Vision */
.ma-mission {
  background: linear-gradient(#f8fafc,#eef2f7);
}
.ma-card {
  border-radius: 1.4rem;
  padding: 1.5rem 1.4rem 1.4rem;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 16px 38px rgba(15,23,42,.06);
}
.ma-card-dark {
  background: radial-gradient(circle at 0% 0%, #1e293b, #020617);
  color: #e5edff;
  border-color: rgba(148,163,184,.4);
  box-shadow: 0 26px 60px rgba(2,6,23,.6);
}
.ma-section-eyebrow-light {
  background: rgba(15,23,42,.4);
  border-color: rgba(148,163,184,.6);
  color: #e5edff;
}
.ma-section-dot-light {
  background: linear-gradient(90deg, #facc15, #fde68a);
}
.ma-list {
  margin: 0;
  padding: 0;
}
.ma-list li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .9rem;
  color: #475569;
  margin-bottom: .4rem;
}
.ma-list i {
  color: #0f172a;
  margin-top: .15rem;
}

/* Light pills in dark card */
.ma-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1rem;
}
.ma-pill-light {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 600;
  padding: .35rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.7);
  background: rgba(15,23,42,.6);
  color: #e5edf7;
}
.ma-pill-light i {
  font-size: .9rem;
}

/* Why Meraki */
.ma-why {
  background: linear-gradient(#ffffff,#f9fafb);
}
.ma-why-micro {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .85rem;
}
.ma-why-micro span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #475569;
  font-weight: 600;
}
.ma-why-micro i {
  color: #0f172a;
}

/* Why cards */
.ma-why-card {
  border-radius: 1.1rem;
  padding: 1rem .9rem;
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 14px 30px rgba(15,23,42,.06);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.ma-why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(15,23,42,.12);
  border-color: rgba(15,23,42,.16);
}
.ma-why-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: .5rem;
  background: linear-gradient(180deg,#f9fafb,#e5edf7);
  border: 1px solid rgba(148,163,184,.6);
  color: #0f172a;
  box-shadow: 0 10px 20px rgba(15,23,42,.12);
}

/* CTA box */
.ma-cta-box {
  margin-top: 2.5rem;
  border-radius: 1.4rem;
  padding: 1.2rem 1.3rem;
  background: linear-gradient(90deg, rgba(245,162,0,.06), rgba(255,204,77,.14));
  border: 1px dashed rgba(245,158,11,.55);
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .ma-hero {
    padding: 56px 0 48px;
  }
  .ma-hero-main-img {
    inset: 10% 8% 26% 8%;
  }
  .ma-hero-tag-right {
    bottom: 4rem;
  }
}

@media (max-width: 767.98px) {
  .ma-hero {
    padding-top: 48px;
  }
  .ma-hero-visual {
    margin-top: 1.5rem;
    min-height: 260px;
  }
  .ma-hero-main-img {
    inset: 11% 8% 28% 8%;
  }
  .ma-hero-pill {
    font-size: .8rem;
  }
  .ma-timeline {
    padding-left: 26px;
  }
  .ma-timeline-node {
    left: -36px;
  }
}

@media (max-width: 575.98px) {
  .ma-hero {
    padding-top: 40px;
  }
  .ma-hero-tag-left,
  .ma-hero-tag-right {
    display: none;
  }
  .ma-hero-main-img {
    inset: 12% 8% 30% 8%;
  }
}




/* ===========================
   BLOG DETAIL PAGE (UNIQUE CSS)
   Namespace: mbd-
=========================== */

/* Hero */
.mbd-hero {
  padding: 60px 0;
  background: #f7f9fc;
}

.mbd-hero-wrap {
  display: flex;
  flex-direction: column-reverse;
  gap: 30px;
}

@media(min-width: 992px) {
  .mbd-hero-wrap {
    flex-direction: row;
    align-items: center;
  }
}

.mbd-hero-text { flex: 1; }
.mbd-hero-img {
  flex: 1;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.mbd-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.4));
}

/* Eyebrow */
.mbd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e9eef6;
  padding: 5px 12px;
  border-radius: 12px;
  font-size: .85rem;
  font-weight: 600;
}

.mbd-hero-title {
  font-size: 2.2rem;
  font-weight: 700;
}

.mbd-meta span {
  margin-right: 12px;
  color: #6b7280;
  font-size: .9rem;
}

/* Content */
.mbd-content {
  padding: 60px 0;
}

.mbd-article h2,
.mbd-article h3 {
  margin-top: 25px;
  font-weight: 700;
}

.mbd-table th {
  background: #f1f5f9;
}

.mbd-quote {
  margin: 25px 0;
  padding: 20px;
  background: #f1f5f9;
  border-left: 4px solid #0f172a;
  border-radius: 6px;
  font-style: italic;
}

/* Sidebar */
.mbd-sidebar {
  position: sticky;
  top: 90px;
}

.mbd-sidebar-head {
  font-weight: 700;
  margin-bottom: 15px;
}

.mbd-side-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  color: #0f172a;
  border-bottom: 1px solid #e5e7eb;
  text-decoration: none;
}
.mbd-side-item:hover {
  color: #2563eb;
}

.mbd-side-cta {
  background: #f7f9fc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

/* Responsive */
@media(max-width: 768px) {
  .mbd-sidebar {
    position: static;
  }
}