/* =========================================================
   ABOUT PAGE — GRAPHITE GLASS (same design, better palette)
   Palette: Deep black + charcoal + soft grey + porcelain
========================================================= */

:root{
  /* Core palette */
  --ab-bg-main: #111214;              /* Deep Black */
  --ab-bg-2: #16181B;                 /* Lifted black */
  --ab-charcoal: #2F3536;             /* Charcoal */
  --ab-graphite: #3A3F45;             /* Graphite */
  --ab-soft-grey: #6F7078;            /* Muted grey */
  --ab-light-grey: #B9BCC3;           /* Slightly light grey */

  /* Text */
  --ab-text-main: #F1F1EE;            /* Porcelain */
  --ab-text-muted: rgba(241,241,238,.74);
  --ab-text-faint: rgba(241,241,238,.58);

  /* Lines + shadows */
  --ab-line: rgba(255,255,255,.10);
  --ab-line-strong: rgba(255,255,255,.16);
  --ab-shadow: 0 18px 45px rgba(0,0,0,.35);
  --ab-shadow-soft: 0 12px 30px rgba(0,0,0,.26);

  /* Radii */
  --ab-radius: 18px;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: "Poppins", sans-serif;
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 520px at 85% 10%, rgba(111,112,120,.10), transparent 60%),
    linear-gradient(180deg, var(--ab-bg-main), #0B0C0E);
  color: var(--ab-text-main);
}

/* Wider container + better margins */
.ab-aboutPageWrap{
  max-width: 1320px;
  margin: 0 auto;
  padding: 34px 18px 80px;
}
@media (min-width: 640px){ .ab-aboutPageWrap{ padding: 46px 26px 90px; } }
@media (min-width: 1024px){ .ab-aboutPageWrap{ padding: 56px 44px 110px; } }

/* =========================================================
   HERO CARD — dark glass with subtle light accents
========================================================= */
.ab-aboutHero{
  position: relative;
  border: 1px solid var(--ab-line-strong);
  border-radius: 26px;

  /* same structure, nicer “glass + depth” */
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(185,188,195,.16), transparent 58%),
    radial-gradient(900px 520px at 88% 18%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(47,53,54,.38), rgba(17,18,20,.90));

  box-shadow: var(--ab-shadow);
  overflow: hidden;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Decorative blobs (still same idea, now neutral) */
.ab-aboutHero::before,
.ab-aboutHero::after{
  content:"";
  position:absolute;
  width: 460px;
  height: 460px;
  border-radius: 999px;
  opacity: .45;
  pointer-events:none;
}
.ab-aboutHero::before{
  left: -230px;
  top: -250px;
  background: radial-gradient(circle at 30% 30%, rgba(185,188,195,.22), transparent 65%);
}
.ab-aboutHero::after{
  right: -250px;
  bottom: -280px;
  background: radial-gradient(circle at 60% 40%, rgba(111,112,120,.22), transparent 65%);
}

.ab-aboutHeroGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 22px;
  align-items: center;
}
@media (min-width: 900px){
  .ab-aboutHeroGrid{
    grid-template-columns: 1.05fr .95fr;
    gap: 28px;
    padding: 36px;
  }
}

/* =========================================================
   BADGE — glass pill
========================================================= */
.ab-aboutBadge{
  display: inline-flex;
  align-items:center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  padding: 8px 12px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  background: rgba(255,255,255,.06);
  color: var(--ab-text-main);
  width: fit-content;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ab-aboutBadgeDot{
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--ab-light-grey);
  box-shadow: 0 0 0 5px rgba(185,188,195,.16);
}

/* TITLE */
.ab-aboutTitle{
  margin: 14px 0 10px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  line-height: 1.05;
  font-size: clamp(30px, 3.2vw, 48px);
  color: var(--ab-text-main);
}

/* TEXT */
.ab-aboutText{
  margin: 0;
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ab-text-muted);
}

/* CTA ROW */
.ab-aboutCtaRow{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

/* =========================================================
   BUTTONS — thin white outline + glass reflection hover
========================================================= */
.ab-aboutBtn{
  border: 1px solid rgba(255,255,255,.22);
  cursor: pointer;
  padding: 12px 18px;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  user-select: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  will-change: transform;
  position: relative;
  overflow: hidden;

  background: rgba(255,255,255,.06);
  color: var(--ab-text-main);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ab-aboutBtn svg{ width: 18px; height: 18px; }

.ab-aboutBtn::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.36) 50%, transparent 100%);
  opacity: 0;
  transform: translateX(-120%);
  transition: all .55s ease;
  pointer-events:none;
}

.ab-aboutBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.40);
  background: rgba(255,255,255,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.ab-aboutBtn:hover::after{
  opacity: 1;
  transform: translateX(120%);
}

.ab-aboutBtn:active{ transform: translateY(0px) scale(.99); }

/* Primary (same role, now neutral “premium grey”) */
.ab-aboutBtnPrimary{
  background: rgba(185,188,195,.18);
  border-color: rgba(255,255,255,.26);
  color: var(--ab-text-main);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.ab-aboutBtnPrimary:hover{
  background: rgba(185,188,195,.24);
}

/* Outline */
.ab-aboutBtnOutline{
  background: rgba(255,255,255,.05);
  color: var(--ab-text-main);
  border: 1px solid rgba(255,255,255,.22);
}

/* =========================================================
   STATS — glass cards
========================================================= */
.ab-aboutStats{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ab-aboutStatCard{
  padding: 12px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ab-aboutStatNum{
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 34px);
  color: var(--ab-text-main);
  line-height: 1.1;
  margin-bottom: 6px;
}
.ab-aboutStatLabel{
  font-size: 12px;
  line-height: 1.35;
  color: rgba(241,241,238,0.72);
}

@media (max-width: 520px){
  .ab-aboutStats{ grid-template-columns: 1fr; }
}

/* =========================================================
   RIGHT IMAGE — glass frame
========================================================= */
.ab-aboutMediaWrap{
  display:flex;
  justify-content: center;
}

.ab-aboutMediaCard{
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  border-radius: 22px;

  background: rgba(255,255,255,.08);
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 42px rgba(0,0,0,.30);

  position: relative;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ab-aboutMediaCard img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  filter: saturate(1.03) contrast(1.02);
}

.ab-aboutMediaCard::after{
  content:"";
  position:absolute;
  inset: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.30);
  pointer-events:none;
}

/* ===== Scroll reveal (trigger once) ===== */
.ab-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s ease, transform .75s ease;
  will-change: opacity, transform;
}
.ab-reveal.ab-isVisible{
  opacity: 1;
  transform: translateY(0);
}

.ab-delay-1{ transition-delay: .10s; }
.ab-delay-2{ transition-delay: .18s; }
.ab-delay-3{ transition-delay: .26s; }

@media (prefers-reduced-motion: reduce){
  .ab-reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .ab-aboutBtn{ transition: none !important; }
}

/* =========================================================
   WHY SECTION — same layout, palette swapped
========================================================= */
.ab-why{
  padding: 44px 0;
  background: transparent;
  color: var(--ab-text-main);
}

.ab-why__wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}
@media (min-width:640px){ .ab-why__wrap{ padding: 0 26px; } }
@media (min-width:1024px){ .ab-why__wrap{ padding: 0 44px; } }

.ab-why__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
@media (min-width: 980px){
  .ab-why__grid{
    grid-template-columns: 0.9fr 1.1fr;
    gap: 30px;
    align-items: center;
  }
}
/* =========================
   WHY CHOOSE US — FLOATING LIGHT PANEL
   Dark page bg stays outside
========================= */

.ab-why{
  padding: 80px 18px; /* outer breathing space */
  background: transparent; /* keep page dark behind */
}

/* LIGHT ROUNDED CONTAINER */
.ab-why__wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 42px;

  background: #F1F1EE; /* porcelain light */
  border-radius: 26px;

  border: 1px solid rgba(255,255,255,.10);

  /* soft floating effect */
  box-shadow:
    0 30px 70px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.45);

  position: relative;
  overflow: hidden;
}

/* subtle light texture glow */
.ab-why__wrap::before{
  content:"";
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(520px 260px at 20% 10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(420px 240px at 85% 80%, rgba(47,53,54,.05), transparent 60%);
  pointer-events:none;
}

/* GRID (same layout) */
.ab-why__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items:start;
}

@media (min-width: 980px){
  .ab-why__grid{
    grid-template-columns: 0.9fr 1.1fr;
    gap: 30px;
    align-items:center;
  }
}

/* LEFT TEXT — charcoal */
.ab-why__title{
  margin:0 0 10px;
  font-family:"Montserrat",sans-serif;
  font-weight:800;
  letter-spacing:.6px;
  font-size:clamp(20px,2.3vw,32px);
  color:#2F3536;
}

.ab-why__desc{
  margin:0 0 18px;
  max-width:52ch;
  font-family:"Poppins",sans-serif;
  font-size:14px;
  line-height:1.75;
  color:rgba(47,53,54,.72);
}

/* BUTTON — light glass */
.ab-why__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:10px;

  background:rgba(255,255,255,.65);
  color:#2F3536;
  border:1px solid rgba(47,53,54,.18);

  font-family:"Montserrat",sans-serif;
  font-weight:800;
  letter-spacing:.4px;
  font-size:12px;

  backdrop-filter:blur(10px);
  transition:.25s ease;
}

.ab-why__btn:hover{
  background:#fff;
  border-color:rgba(47,53,54,.35);
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
}

/* CARDS */
.ab-why__cards{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

@media (min-width:720px){
  .ab-why__cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }
}

/* LIGHT GLASS CARDS */
.ab-why__card{
  background:rgba(255,255,255,.75);
  border:1px solid rgba(47,53,54,.10);
  border-radius:14px;
  padding:18px;
  display:flex;
  gap:14px;
  align-items:flex-start;

  backdrop-filter:blur(12px);
  box-shadow:0 12px 30px rgba(0,0,0,.05);

  transition:.25s ease;
}

.ab-why__card:hover{
  transform:translateY(-2px);
  background:#fff;
  border-color:rgba(47,53,54,.18);
  box-shadow:0 18px 36px rgba(0,0,0,.10);
}

/* ICON */
.ab-why__icon{
  width:38px;
  height:38px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;

  color:#2F3536;
  background:rgba(47,53,54,.08);
  border:1px solid rgba(47,53,54,.12);

  flex:0 0 auto;
}

/* TEXT */
.ab-why__cardTitle{
  margin:0 0 6px;
  font-family:"Montserrat",sans-serif;
  font-weight:800;
  font-size:16px;
  color:#2F3536;
}

.ab-why__cardDesc{
  margin:0;
  font-family:"Poppins",sans-serif;
  font-size:13px;
  line-height:1.6;
  color:rgba(47,53,54,.70);
}

/* =========================================================
   VMV SECTION — kept exactly, only neutral palette update
========================================================= */
.ab-vmv2{
  padding: 72px 0;
  background: transparent;
}

.ab-vmv2__wrap{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 18px;
}
@media (min-width:640px){ .ab-vmv2__wrap{ padding: 0 28px; } }
@media (min-width:1024px){ .ab-vmv2__wrap{ padding: 0 56px; } }

.ab-vmv2__canvas{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  min-height: 520px;
}

/* 50/50 split background inside canvas */
.ab-vmv2__split{
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
}
.ab-vmv2__split--left{
  left: 0;
  background:
    radial-gradient(120% 120% at 20% 25%, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.40) 70%),
    linear-gradient(180deg, rgba(0,0,0,0.58), rgba(0,0,0,0.52));
}
.ab-vmv2__split--right{
  right: 0;
  background: #F1F1EE; /* keep this light like your reference */
}

/* layout */
.ab-vmv2__grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 32px 22px;
  align-items: center;
}
@media (min-width: 980px){
  .ab-vmv2__grid{
    grid-template-columns: 0.95fr 1.05fr;
    gap: 28px;
    padding: 42px 44px;
  }
}

/* LEFT */
.ab-vmv2__left{
  color: #fff;
  padding: 10px 6px 10px 6px;
}
.ab-vmv2__label{
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.60);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ab-vmv2__title{
  margin: 0 0 14px;
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 4vw, 64px);
  line-height: 1.02;
}
.ab-vmv2__title span{
  color: var(--ab-light-grey); /* swapped from green to light grey */
}
.ab-vmv2__text{
  margin: 0 0 12px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(255,255,255,0.74);
  max-width: 60ch;
}
.ab-vmv2__text--muted{
  color: rgba(255,255,255,0.60);
}

/* RIGHT cards */
.ab-vmv2__right{
  display:grid;
  gap:14px;
  max-width: 92%;
  margin-left: auto;
  margin-right: 2%;
}

.ab-vmv2__card{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 22px 22px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.06);
}

/* highlight card (was green) -> soft grey highlight */
.ab-vmv2__card--highlight{
  background: rgba(185,188,195,0.92);
}

.ab-vmv2__cardIcon{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: rgba(0,0,0,0.72);
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
}
.ab-vmv2__cardIcon--onHighlight{
  background: rgba(255,255,255,0.38);
}

.ab-vmv2__cardIcon svg{
  width: 28px;
  height: 28px;
}

.ab-vmv2__cardTitle{
  margin: 2px 0 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: 18px;
  color: rgba(0,0,0,0.86);
}
.ab-vmv2__cardText{
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(0,0,0,0.68);
}

/* TARGET overlaps split line */
.ab-vmv2__targetWrap{
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-52%, -50%);
  z-index: 3;
  pointer-events: none;
}
.ab-vmv2__target{
  width: 260px;
  height: 260px;
  border-radius: 999px;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.28));
}
.ab-vmv2__targetSvg{
  width: 100%;
  height: 100%;
  display: block;
}

/* Responsive target sizing */
@media (max-width: 1120px){
  .ab-vmv2__target{ width: 230px; height: 230px; }
}
@media (max-width: 979px){
  .ab-vmv2__targetWrap{
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
  }
  .ab-vmv2__target{ width: 210px; height: 210px; }
}
@media (max-width: 640px){
  .ab-vmv2__canvas{ min-height: 640px; }
  .ab-vmv2__targetWrap{ top: 44%; }
  .ab-vmv2__target{ width: 190px; height: 190px; }
  .ab-vmv2__card{ grid-template-columns: 56px 1fr; padding: 18px; border-radius: 14px; }
  .ab-vmv2__cardIcon{ width: 48px; height: 48px; border-radius: 12px; }
}

/* Reveal animation */
.ab-vmv2-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .85s ease, transform .85s ease;
  will-change: opacity, transform;
}
.ab-vmv2-visible{
  opacity: 1;
  transform: translateY(0);
}
.ab-vmv2-delay-1{ transition-delay: .08s; }
.ab-vmv2-delay-2{ transition-delay: .16s; }
.ab-vmv2-delay-3{ transition-delay: .24s; }
.ab-vmv2-delay-4{ transition-delay: .32s; }

@media (prefers-reduced-motion: reduce){
  .ab-vmv2-reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
}