/* =========================================================
   Mongolos Interactive Inc. — Ultra Pro CSS v6
   - Banner logo header (assets/logo.png)
   - About uses square logo (assets/logo1.png)
   - Premium aurora + mauve moving stars
   - Responsive / Mobile centered header
   - High-contrast Light theme
========================================================= */

:root{
  --bg:#07070B;
  --panel: rgba(18,18,26,.62);
  --text:#F3F2F8;
  --muted: rgba(243,242,248,.70);
  --purple:#8B5CF6;
  --purple2:#A78BFA;
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --glow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 60px rgba(0,0,0,.55);
  --r2: 22px;
  --wrap: min(1180px, 92%);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1000px 600px at 25% 25%, rgba(139,92,246,.16), transparent 55%),
    radial-gradient(900px 600px at 75% 15%, rgba(167,139,250,.10), transparent 55%),
    radial-gradient(900px 700px at 70% 80%, rgba(139,92,246,.10), transparent 55%),
    var(--bg);
  color:var(--text);
  overflow-x:hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a{color: var(--purple2); text-decoration:none}
a:hover{text-decoration:underline}
.wrap,.container{width:var(--wrap); margin:0 auto}
.main{padding-bottom:60px}
.section{padding:26px 0}
.center{text-align:center}
.muted{color:var(--muted)}

/* ===== Background: Stars + Aurora ===== */
#stars{position:fixed; inset:0; z-index:-2; width:100%; height:100%;}
.aurora{
  position:fixed; inset:-25% -25%; z-index:-3; pointer-events:none;
  background:
    radial-gradient(780px 520px at 12% 40%, rgba(139,92,246,.44), transparent 62%),
    radial-gradient(860px 620px at 86% 18%, rgba(167,139,250,.30), transparent 64%),
    radial-gradient(980px 700px at 75% 78%, rgba(139,92,246,.24), transparent 62%);
  filter: blur(30px) saturate(1.35);
  opacity: 1;
  animation: auroraMove 14s ease-in-out infinite alternate;
}
@keyframes auroraMove{
  from{transform: translate3d(-2.5%, -1.5%, 0) scale(1)}
  to{transform: translate3d(2.5%, 1.5%, 0) scale(1.04)}
}

/* ===== Header / Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(7,7,11,.55);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav{
  display:flex; align-items:center; gap:14px;
  padding:14px 0; flex-wrap:nowrap;
}
.brand{display:flex; align-items:center; text-decoration:none; color:inherit; flex:0 0 auto}
.brand--banner{flex:0 0 auto}
.brand__banner{
  height: 56px;
  width:auto;
  display:block;
  object-fit:contain;
  filter: drop-shadow(0 0 22px rgba(139,92,246,.28));
}

.nav__tools{display:flex; align-items:center; gap:10px; margin-left:auto; flex:0 0 auto}

.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(243,242,248,.86);
  cursor:pointer; white-space:nowrap;
}
.chip:hover{background: rgba(255,255,255,.08)}
.chip__dot{
  width:10px;height:10px;border-radius:999px;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  box-shadow: 0 0 16px rgba(139,92,246,.75);
}
.seg{display:flex; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.10)}
.seg__btn{
  padding:9px 12px; background: rgba(255,255,255,.04);
  color:rgba(243,242,248,.78); border:0; cursor:pointer; font-weight:900;
}
.seg__btn:hover{background: rgba(255,255,255,.06)}
.seg__btn.is-active{background: rgba(139,92,246,.18); color:#F5F3FF}

/* ===== Menu ===== */
.menu{flex:1 1 auto; display:flex; justify-content:center; align-items:center; min-width:0}
.menu__burger{display:none; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:10px 12px; color:#fff}
.menu__list{
  list-style:none; display:flex; gap:14px; margin:0; padding:0;
  flex-wrap:nowrap; white-space:nowrap; overflow:visible;
}
.menu__link{
  display:inline-flex; align-items:center; padding:10px 10px;
  border-radius:14px; color:rgba(243,242,248,.84);
  font-weight:900; border:1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.menu__link:hover{color:#fff; background: rgba(255,255,255,.05); transform: translateY(-1px)}
.menu__link.is-active{color:#fff; background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.18)}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:3px;
  border-radius:16px; padding:10px 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff; white-space:nowrap;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05);
  transition: transform .15s ease, background .15s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.08)}
.btn small{font-size:11px; color:rgba(243,242,248,.66); font-weight:800}
.btn--primary{
  background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(107,70,193,.92));
  border-color: rgba(139,92,246,.35);
  box-shadow: 0 0 0 1px rgba(139,92,246,.22), 0 18px 80px rgba(139,92,246,.15);
}

/* ===== Cards ===== */
.panel, .case, .ctaPanel{
  background: var(--panel);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--r2);
  box-shadow: var(--glow);
}
.panel{padding:18px; position:relative; overflow:hidden}
.panel:before{
  content:""; position:absolute; inset:-60px -40px auto -40px; height:240px;
  background: radial-gradient(closest-side, rgba(167,139,250,.22), transparent 70%);
  filter: blur(8px); opacity:.9;
}
.case{padding:16px}
.ctaPanel{padding:18px}

/* ===== Footer ===== */
.footer{margin-top:34px; border-top:1px solid rgba(255,255,255,.06); background: rgba(7,7,11,.35); backdrop-filter: blur(12px)}
.footer__grid{display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:18px; padding:22px 0}
.footer__title{font-weight:900; margin-bottom:10px}
.footer__links{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.footer__links a{color: rgba(243,242,248,.74); font-weight:900}
.footer__links a:hover{color:#fff}
.footer__bottom{padding:14px 0; text-align:center; color: rgba(243,242,248,.58); border-top:1px solid rgba(255,255,255,.06)}

/* ===== Responsive ===== */
@media (max-width: 1280px){
  .menu{justify-content:flex-end}
  .menu__burger{display:inline-flex}
  .menu__list{
    display:none; width:100%;
    flex-direction:column; gap:10px; padding:12px; margin-top:10px;
    background: rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px; white-space:normal;
  }
  .menu.is-open .menu__list{display:flex}
}
@media (max-width: 720px){
  .nav{flex-wrap:wrap; gap:10px}
  .brand--banner{width:100%; justify-content:center}
  .brand__banner{height:44px; margin:2px auto}
  .nav__tools{width:100%; justify-content:center; order:2}
  .menu{width:100%; justify-content:center; order:3}
  .btn.btn--primary{width:100%; order:4}
}

/* ===== Light theme (high contrast) ===== */
html[data-theme="light"] body{
  background:
    radial-gradient(1100px 700px at 20% 25%, rgba(139,92,246,.16), transparent 55%),
    radial-gradient(900px 650px at 80% 15%, rgba(167,139,250,.12), transparent 55%),
    #F8F7FD;
  color:#0a0a10;
}
html[data-theme="light"] .topbar{
  background: rgba(248,247,253,.88);
  border-bottom: 1px solid rgba(10,10,16,.10);
}
html[data-theme="light"] .menu__link{color: rgba(10,10,16,.78)}
html[data-theme="light"] .menu__link:hover{background: rgba(10,10,16,.06); color:#000}
html[data-theme="light"] .menu__link.is-active{background: rgba(139,92,246,.16); border-color: rgba(139,92,246,.24); color:#000}

html[data-theme="light"] .chip{
  background: rgba(10,10,16,.06);
  border-color: rgba(10,10,16,.14);
  color:#000;
}
html[data-theme="light"] .seg{border-color: rgba(10,10,16,.14)}
html[data-theme="light"] .seg__btn{background: rgba(10,10,16,.05); color: rgba(10,10,16,.78)}
html[data-theme="light"] .seg__btn.is-active{background: rgba(139,92,246,.18); color:#000}

html[data-theme="light"] .btn{
  background: rgba(10,10,16,.08);
  border-color: rgba(10,10,16,.18);
  color:#07070b;
  box-shadow: 0 10px 24px rgba(10,10,16,.10);
}
html[data-theme="light"] .btn:hover{background: rgba(10,10,16,.12)}
html[data-theme="light"] .btn--primary{
  background: linear-gradient(135deg, rgba(139,92,246,1), rgba(107,70,193,1));
  border-color: rgba(139,92,246,.45);
  color:#fff;
  box-shadow: 0 14px 30px rgba(139,92,246,.22);
}
html[data-theme="light"] .btn--primary small{color: rgba(255,255,255,.86)}

html[data-theme="light"] .panel, html[data-theme="light"] .case, html[data-theme="light"] .ctaPanel{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(10,10,16,.10);
  box-shadow: 0 16px 40px rgba(10,10,16,.10);
}
html[data-theme="light"] .footer{
  background: rgba(248,247,253,.90);
  border-top:1px solid rgba(10,10,16,.10);
}
html[data-theme="light"] .footer__links a{color: rgba(10,10,16,.74)}
html[data-theme="light"] .footer__links a:hover{color:#000}



/* ===== MOBILE BURGER CENTERED UNDER BANNER ===== */
@media (max-width: 720px){
  .topbar .nav{
    flex-direction:column;
    align-items:center;
  }
  .brand--banner{
    width:100%;
    display:flex;
    justify-content:center;
    margin-bottom:8px;
  }
  .menu{
    width:100%;
    display:flex;
    justify-content:center;
    order:2;
  }
  .menu__burger{
    display:inline-flex;
    margin:6px auto 10px;
  }
  .menu__list{
    width:100%;
    max-width:420px;
    margin:0 auto;
    text-align:center;
  }
  .nav__tools{
    width:100%;
    justify-content:center;
    order:3;
    margin-top:6px;
  }
}



/* ===== FIX MOBILE BURGER UNDER BANNER (site-header layout) ===== */
@media (max-width: 820px){
  .site-header .nav-wrap{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:10px !important;
  }
  .site-header .brand--banner{
    width:100% !important;
    justify-content:center !important;
    order:1 !important;
  }
  .site-header .brand__banner{
    height: 40px !important;
    margin: 0 auto !important;
  }
  .site-header .mobile-menu-btn{
    display:inline-flex !important;
    justify-content:center !important;
    align-items:center !important;
    order:2 !important;
    margin: 2px auto 6px !important;
  }
  .site-header .main-nav{
    width:100% !important;
    order:3 !important;
  }
  .site-header .nav-controls{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    order:4 !important;
  }
}


/* =========================================================
   SERVICES — Ultra Pro Layout (Tables + Pricing)
   Mongolos Interactive Inc.
========================================================= */

/* Section header + divider */
.svcTop{
  display:flex; justify-content:space-between; gap:18px; align-items:flex-end;
  margin-top:14px;
}
.svcTop__right{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.hrGlow{
  height:1px; margin:26px 0 0;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.45), rgba(255,255,255,.10), rgba(139,92,246,.45), transparent);
  opacity:.75;
}

/* Pricing table */
.pricing{
  margin-top:26px;
  background: rgba(18,18,26,.55);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.pricing__head{
  padding:18px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(139,92,246,.14), rgba(0,0,0,0));
  display:flex; justify-content:space-between; gap:14px; align-items:flex-end;
}
.pricing__title{font-weight:950; margin:0; font-size:18px}
.pricing__sub{margin:6px 0 0; color:rgba(243,242,248,.70); font-size:13px; line-height:1.55}

.priceTable{width:100%; border-collapse:separate; border-spacing:0}
.priceTable th, .priceTable td{
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
}
.priceTable th{
  text-align:left;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(243,242,248,.62);
  background: rgba(0,0,0,.18);
}
.priceCol{
  width: 22%;
}
.priceCol strong{
  display:block; font-size:14px; font-weight:950; color:#fff;
}
.priceCol small{
  display:block; margin-top:4px;
  color:rgba(243,242,248,.65); font-weight:800; font-size:12px;
}
.pricePlan{
  display:flex; align-items:center; gap:10px;
}
.planDot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg,var(--purple),var(--purple2));
  box-shadow: 0 0 18px rgba(139,92,246,.70);
}
.planTag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-size:12px; font-weight:900; color:rgba(243,242,248,.88);
}
.planTag--best{
  background: rgba(139,92,246,.16);
  border-color: rgba(139,92,246,.28);
  color:#F5F3FF;
}
.yesNo{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:900; font-size:12px;
  padding:7px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.yesNo.yes{color:#EDE9FE; border-color: rgba(139,92,246,.20); background: rgba(139,92,246,.12)}
.yesNo.no{color: rgba(243,242,248,.55); opacity:.8}

.pricing__foot{
  padding:16px 18px;
  display:flex; justify-content:space-between; gap:14px; align-items:center;
}
.pricing__foot p{margin:0; color:rgba(243,242,248,.70); font-size:13px}
.pricing__foot .btn{white-space:nowrap}

/* Service groups with premium tables */
.svcGrid{display:grid; gap:18px; margin-top:20px}
.svcGroup{
  background: rgba(18,18,26,.55);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.svcHead{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:14px; padding:18px 18px 14px;
  background: linear-gradient(180deg, rgba(139,92,246,.14), rgba(0,0,0,0));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.svcTitle{font-weight:950; font-size:18px; margin:0}
.svcSub{margin:6px 0 0; color:rgba(243,242,248,.70); font-size:13px; line-height:1.55}
.svcBadge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:999px;
  background: rgba(139,92,246,.16);
  border:1px solid rgba(139,92,246,.28);
  color:#F5F3FF; font-weight:900; font-size:12px; white-space:nowrap;
}

.svcTable{width:100%; border-collapse:separate; border-spacing:0}
.svcTable th, .svcTable td{
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
}
.svcTable th{
  text-align:left;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(243,242,248,.62);
  background: rgba(0,0,0,.18);
}
.svcTable tr:hover td{background: rgba(255,255,255,.03)}

.svcName{font-weight:950; color:#fff; display:flex; align-items:center; gap:10px}
.svcDot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg,var(--purple),var(--purple2));
  box-shadow: 0 0 18px rgba(139,92,246,.70);
  flex:0 0 auto;
}
.svcDesc{color:rgba(243,242,248,.70); font-size:13px; line-height:1.6; margin-top:6px}
.svcList{margin:0; padding-left:18px; color:rgba(243,242,248,.72); font-size:13px; line-height:1.6}
.svcList li{margin:4px 0}
.svcKPIs{display:flex; flex-wrap:wrap; gap:10px}
.svcKpi{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(243,242,248,.86);
  font-size:12px; font-weight:900;
}
.svcKpi b{color:#fff}
.svcCheck{font-weight:950; color:#EDE9FE}

.svcCTAbar{
  padding:16px 18px;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.svcCTAbar p{margin:0; color:rgba(243,242,248,.70); font-size:13px}

/* Mobile transform (pricing + service tables) */
@media (max-width: 820px){
  .svcTop{flex-direction:column; align-items:flex-start}
  .svcTop__right{justify-content:flex-start}
  .priceTable thead, .svcTable thead{display:none}

  .priceTable, .priceTable tbody, .priceTable tr, .priceTable td,
  .svcTable, .svcTable tbody, .svcTable tr, .svcTable td{display:block; width:100%}

  .priceTable tr, .svcTable tr{
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:10px 0;
  }
  .priceTable td, .svcTable td{
    border-bottom:none;
    padding:10px 16px;
  }
  .priceTable td[data-label]:before,
  .svcTable td[data-label]:before{
    content: attr(data-label);
    display:block;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(243,242,248,.55);
    margin-bottom:6px;
    font-weight:950;
  }

  .pricing__foot{flex-direction:column; align-items:flex-start}
  .pricing__foot .btn{width:100%}
}

/* Light theme fixes for these blocks */
html[data-theme="light"] .pricing,
html[data-theme="light"] .svcGroup{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(10,10,16,.12);
  box-shadow: 0 16px 40px rgba(10,10,16,.10);
}
html[data-theme="light"] .pricing__head,
html[data-theme="light"] .svcHead{
  border-bottom:1px solid rgba(10,10,16,.10);
  background: linear-gradient(180deg, rgba(139,92,246,.14), rgba(255,255,255,.0));
}
html[data-theme="light"] .priceTable th,
html[data-theme="light"] .svcTable th{
  background: rgba(10,10,16,.04);
  color: rgba(10,10,16,.62);
}
html[data-theme="light"] .svcDesc,
html[data-theme="light"] .pricing__sub,
html[data-theme="light"] .svcSub{color: rgba(10,10,16,.70)}
html[data-theme="light"] .svcList{color: rgba(10,10,16,.72)}
html[data-theme="light"] .planTag,
html[data-theme="light"] .svcKpi,
html[data-theme="light"] .yesNo{
  background: rgba(10,10,16,.06);
  border-color: rgba(10,10,16,.14);
  color: rgba(10,10,16,.78);
}
html[data-theme="light"] .planTag--best,
html[data-theme="light"] .yesNo.yes{
  background: rgba(139,92,246,.14);
  border-color: rgba(139,92,246,.24);
  color: #0a0a10;
}


/* =========================================================
   SERVICES — Vertical Tables (Ultra Pro)
   - Dark, structured, not pêle-mêle
   - Desktop: 2 columns cards
   - Mobile/tablet: 1 column, same density
========================================================= */

.svcVIntro{max-width:880px; margin:0 auto}
.svcVGrid{
  width:var(--wrap); margin:22px auto 0;
  display:grid; gap:18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.svcVGroup{
  grid-column:1 / -1;
  margin-top:6px;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:14px;
}
.svcVGroup__title{
  font-weight:950; font-size:18px; margin:0;
}
.svcVGroup__sub{
  margin:6px 0 0;
  color:rgba(243,242,248,.70);
  font-size:13px; line-height:1.55;
}
.svcVBadge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:999px;
  background: rgba(139,92,246,.16);
  border:1px solid rgba(139,92,246,.28);
  color:#F5F3FF; font-weight:950; font-size:12px; white-space:nowrap;
}

.svcVCard{
  background: rgba(18,18,26,.55);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.svcVCard:before{
  content:"";
  position:absolute; inset:-60px -40px auto -40px; height:200px;
  background: radial-gradient(closest-side, rgba(167,139,250,.18), transparent 70%);
  filter: blur(10px);
  opacity:.9;
  pointer-events:none;
}
.svcVTop{
  padding:16px 18px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(139,92,246,.12), rgba(0,0,0,0));
  position:relative;
}
.svcVName{
  margin:0;
  display:flex; align-items:center; gap:10px;
  font-size:16px; font-weight:950;
}
.svcVDot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg,var(--purple),var(--purple2));
  box-shadow: 0 0 18px rgba(139,92,246,.70);
}
.svcVDesc{
  margin:8px 0 0;
  color:rgba(243,242,248,.70);
  font-size:13px; line-height:1.6;
}

.svcVTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  position:relative;
}
.svcVTable th, .svcVTable td{
  padding:12px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
}
.svcVTable th{
  width:140px;
  text-align:left;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(243,242,248,.62);
  background: rgba(0,0,0,.16);
}
.svcVTable tr:last-child th,
.svcVTable tr:last-child td{border-bottom:none;}

.svcVList{
  margin:0;
  padding-left:18px;
  color:rgba(243,242,248,.78);
  font-size:13px;
  line-height:1.6;
}
.svcVList li{margin:4px 0}

.svcVChips{display:flex; flex-wrap:wrap; gap:10px}
.svcVChip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(243,242,248,.88);
  font-size:12px; font-weight:950;
}
.svcVChip b{color:#fff}
.svcVCheck{color:#EDE9FE; font-weight:950}

.svcVCard__cta{
  padding:14px 18px 16px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.svcVCard__cta p{
  margin:0;
  color:rgba(243,242,248,.70);
  font-size:13px;
}

/* Tablet/Mobile */
@media (max-width: 980px){
  .svcVGrid{grid-template-columns:1fr}
  .svcVGroup{flex-direction:column; align-items:flex-start}
  .svcVTable th{width:124px}
}
@media (max-width: 520px){
  .svcVTable th{width:112px; padding:12px 14px}
  .svcVTable td{padding:12px 14px}
  .svcVTop{padding:14px 14px 10px}
  .svcVCard__cta{flex-direction:column; align-items:stretch}
  .svcVCard__cta .btn{width:100%}
}

/* Light theme */
html[data-theme="light"] .svcVCard{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(10,10,16,.12);
  box-shadow: 0 16px 40px rgba(10,10,16,.10);
}
html[data-theme="light"] .svcVTop{
  border-bottom:1px solid rgba(10,10,16,.10);
  background: linear-gradient(180deg, rgba(139,92,246,.12), rgba(255,255,255,0));
}
html[data-theme="light"] .svcVDesc{color: rgba(10,10,16,.72)}
html[data-theme="light"] .svcVTable th{
  background: rgba(10,10,16,.04);
  color: rgba(10,10,16,.62);
}
html[data-theme="light"] .svcVList{color: rgba(10,10,16,.74)}
html[data-theme="light"] .svcVChip{
  background: rgba(10,10,16,.06);
  border-color: rgba(10,10,16,.14);
  color: rgba(10,10,16,.78);
}

/* =========================================================
   SERVICES – HERO CENTERED (Ultra Pro Fix)
========================================================= */

/* Centre tout le hero services */
.services-hero,
.services-hero .wrap{
  text-align: center;
}

/* Titre + texte bien centrés */
.services-hero h1,
.services-hero h2,
.services-hero p{
  margin-left: auto;
  margin-right: auto;
}

/* CTA centrés */
.services-hero .hero__cta,
.services-hero .cta-actions,
.services-hero .btn-group{
  display: flex;
  margin-top: 15px;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
}

/* Boutons bien alignés */
.services-hero .btn{
  min-width: 220px;
  text-align: center;
}

/* Mobile : full width clean */
@media (max-width: 720px){
  .services-hero .btn{
    width: 100%;
    max-width: 420px;
  }
}