/* =====================================================================
   CODESENZE – About page (modern)      prefix: ab-
   Needs: Bootstrap 5.3 (container/grid helpers optional), Swiper 8.4.5 CSS
   ===================================================================== */
.ab-page{
  --ab-ink:#0b1b2e; --ab-muted:#5a6a7d; --ab-navy:#07111f; --ab-navy-2:#0b2036;
  --ab-blue:#256199; --ab-cyan:#4fd1ff; --ab-violet:#a074ff; --ab-accent:#ffc83d;
  --ab-soft:#f3f7fb; --ab-line:rgba(11,27,46,.1); --ab-r:26px;
  --ab-grad:linear-gradient(100deg,#5fd8ff 0%,#6f9bff 50%,#b985ff 100%);
  color:var(--ab-ink); overflow-x:clip; line-height:1.7;
}
.ab-page *,.ab-page *::before,.ab-page *::after{ box-sizing:border-box; }
.ab-sec{ position:relative; padding:clamp(72px,9vw,128px) 0; }
.ab-soft{ background:var(--ab-soft); }
.ab-dark{ background:var(--ab-navy); color:#fff; }
.ab-page h1,.ab-page h2,.ab-page h3,.ab-page h4{ margin:0; letter-spacing:-.02em; line-height:1.15; text-wrap:balance; }
.ab-page p{ margin:0; }
.ab-grad{ background:var(--ab-grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }

/* ---------- reveal on scroll ---------- */
.ab-js [data-ab-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms); }
.ab-js [data-ab-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .ab-js [data-ab-reveal]{ opacity:1; transform:none; transition:none; }
  .ab-blobs i{ transform:none !important; }
}

/* ---------- shared bits ---------- */
.ab-eyebrow{
  display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 14px; margin-bottom:20px; border-radius:999px;
  font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; line-height:1;
  color:var(--ab-blue); background:rgba(37,97,153,.08); border:1px solid rgba(37,97,153,.15);
}
.ab-eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ab-accent); box-shadow:0 0 0 4px rgba(255,200,61,.25); }
.ab-eyebrow i{ font-style:normal; opacity:.6; }
.ab-dark .ab-eyebrow{ color:#fff; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); }
.ab-h2{ font-size:clamp(30px,4vw,52px); font-weight:600; }
.ab-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:clamp(36px,5vw,64px); flex-wrap:wrap; }
.ab-head .ab-h2{ max-width:760px; }
.ab-head.is-center{ justify-content:center; text-align:center; }
.ab-head.is-center .ab-h2{ margin-inline:auto; }
.ab-side{ font-size:15px; color:var(--ab-muted); }
.ab-side a{ color:var(--ab-blue); font-weight:600; text-decoration:none; }
.ab-dark .ab-side,.ab-dark .ab-side a{ color:rgba(255,255,255,.7); }
.ab-dark .ab-side a:hover{ color:var(--ab-accent); }

.ab-btn{
  display:inline-flex; align-items:center; gap:10px; padding:17px 30px; border-radius:999px; border:1px solid transparent;
  font-size:15.5px; font-weight:600; line-height:1; text-decoration:none; cursor:pointer;
  transition:transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
}
.ab-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s ease; }
.ab-btn:hover svg{ transform:translateX(5px); }
.ab-btn-solid{ background:var(--ab-accent); color:#0b1b2e; }
.ab-btn-solid:hover{ background:#fff; color:#0b1b2e; transform:translateY(-3px); }
.ab-btn-ghost{ color:#fff; border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.05); }
.ab-btn-ghost:hover{ background:#fff; color:#0b1b2e; transform:translateY(-3px); }
.ab-btn-outline{ color:var(--ab-ink); border-color:rgba(11,27,46,.22); }
.ab-btn-outline:hover{ background:var(--ab-ink); color:#fff; transform:translateY(-3px); }

.hm-btn-dark { background: #0b1b2e; color: #fff; }
.hm-btn-dark:hover { background: #256199; color: #fff; }

/* cursor spotlight on cards */
.ab-glow{ position:relative; isolation:isolate; }
.ab-glow::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(79,209,255,.16), transparent 45%);
}
.ab-glow:hover::before{ opacity:1; }

/* ================= HERO ================= */
.ab-hero{ padding:clamp(140px,15vw,150px) 0 clamp(70px,8vw,110px); overflow:hidden;
  background:radial-gradient(1100px 560px at 78% -12%,#16426e 0%,transparent 62%), var(--ab-navy); }
.ab-blobs{ position:absolute; inset:0; pointer-events:none; }
.ab-blobs i{ position:absolute; border-radius:50%; filter:blur(90px); will-change:transform; }
.ab-blobs .b1{ width:460px; height:460px; left:-140px; top:-40px; background:#1f7bff; opacity:.5; }
.ab-blobs .b2{ width:420px; height:420px; right:-110px; top:90px; background:#8a4dff; opacity:.45; }
.ab-blobs .b3{ width:340px; height:340px; left:42%; bottom:-170px; background:#00c2ff; opacity:.3; }
.ab-gridbg{ position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse at 50% 28%,#000 22%,transparent 72%); mask-image:radial-gradient(ellipse at 50% 28%,#000 22%,transparent 72%); }
.ab-hero .small-container{ position:relative; z-index:1; }
.ab-crumbs{ display:flex; gap:10px; margin-bottom:26px; font-size:14px; color:rgba(255,255,255,.6); }
.ab-crumbs a{ color:rgba(255,255,255,.85); text-decoration:none; }
.ab-crumbs a:hover{ color:var(--ab-accent); }
.ab-h1{ max-width:1000px; font-size:clamp(38px,6vw,84px); font-weight:600; letter-spacing:-.035em; line-height:1.04; color:#fff; }
.ab-hero-row{ display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:end; margin-top:34px; }
.ab-lead{ max-width:660px; font-size:clamp(16px,1.4vw,19px); color:rgba(255,255,255,.76); }
.ab-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
.ab-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:clamp(46px,6vw,80px); }
.ab-stat{ padding:26px 24px; border-radius:22px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:transform .4s ease, border-color .4s ease; }
.ab-stat:hover{ transform:translateY(-6px); border-color:rgba(255,255,255,.28); }
.ab-num{ font-size:clamp(34px,4vw,52px); font-weight:600; line-height:1; letter-spacing:-.03em; color:#fff; }
.ab-num em{ font-style:normal; background:var(--ab-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ab-stat span.l{ display:block; margin-top:12px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); }
@media (max-width:991.98px){ .ab-hero-row{ grid-template-columns:1fr; } .ab-actions{ justify-content:flex-start; } .ab-stats{ grid-template-columns:repeat(2,1fr); } }

/* ================= WHO WE ARE ================= */
.ab-who-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.ab-bignum{ position:absolute; right:3%; top:40px; font-size:clamp(120px,18vw,260px); font-weight:700; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(11,27,46,.08); pointer-events:none; user-select:none; }
.ab-img{ position:relative; margin:0 18px 18px 0; }
.ab-img::before{ content:""; position:absolute; inset:18px -18px -18px 18px; border-radius:34px; background:linear-gradient(135deg,var(--ab-cyan),var(--ab-violet)); opacity:.4; }
.ab-img img{ position:relative; z-index:1; display:block; width:100%; height:auto; border-radius:30px; }
.ab-badge{ position:absolute; z-index:2; left:20px; bottom:20px; display:inline-flex; align-items:center; gap:10px; padding:11px 18px; border-radius:999px;
  background:rgba(7,17,31,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; font-size:13.5px; font-weight:500; }
.ab-badge i{ width:9px; height:9px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,.25); animation:abPulse 2s infinite; }
@keyframes abPulse{ 50%{ box-shadow:0 0 0 8px rgba(74,222,128,0); } }
.ab-who-copy .ab-h2{ margin-bottom:24px; }
.ab-who-copy .lead{ font-size:clamp(17px,1.5vw,20px); color:var(--ab-ink); margin-bottom:20px; font-weight:500; }
.ab-who-copy p{ color:var(--ab-muted); margin-bottom:16px; }
.ab-who-copy .ab-btn{ margin-top:14px; }
@media (max-width:991.98px){ .ab-who-grid{ grid-template-columns:1fr; } }

/* ================= STORY (Swiper) ================= */
.ab-story .ab-h2{ color:#fff; }
.ab-story{ background:radial-gradient(900px 420px at 15% 0%,#12365a 0%,transparent 60%), var(--ab-navy); }
.ab-story-swiper{ overflow:hidden; padding:4px 0; }
/* keep the slide row exactly as Swiper calculates it (theme CSS can't shift it) */
.ab-page .swiper-wrapper{ display:flex !important; flex-wrap:nowrap !important; gap:0 !important; }
.ab-page .swiper-slide{ display:block !important; flex-shrink:0 !important; float:none !important; margin-left:0 !important; padding:0 !important; height:auto; }
.ab-story-card{ position:relative; height:100%; min-height:350px; display:flex; flex-direction:column; padding:34px; overflow:hidden; border-radius:var(--ab-r);
  border:1px solid rgba(255,255,255,.1); background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); transition:border-color .4s ease, transform .4s ease; }
.ab-story-card:hover{ border-color:rgba(255,255,255,.3); transform:translateY(-6px); }
.ab-ghost{ position:absolute; right:-4px; top:-14px; font-size:clamp(90px,9vw,130px); font-weight:700; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.13); pointer-events:none; }
.ab-idx{ position:relative; font-size:12.5px; font-weight:600; letter-spacing:.14em; color:rgba(255,255,255,.5); }
.ab-year{ position:relative; align-self:flex-start; margin:20px 0 16px; padding:8px 16px; border-radius:999px; background:linear-gradient(90deg,#1f7bff,#8a4dff); font-size:14px; font-weight:600; color:#fff; line-height:1; }
.ab-story-card h3{ position:relative; margin-bottom:12px; font-size:clamp(21px,2vw,26px); font-weight:600; color:#fff; }
.ab-story-card p{ position:relative; color:rgba(255,255,255,.72); font-size:15.5px; margin-bottom:22px; }
.ab-story-card .ab-btn{ position:relative; margin-top:auto; align-self:flex-start; padding:14px 24px; font-size:14.5px; }
.ab-story-card.is-final{ background:linear-gradient(150deg,#1d5ea6 0%,#5b3bd1 100%); border-color:transparent; }
.ab-story-ui{ display:flex; align-items:center; gap:28px; margin-top:34px; }
.ab-story-ui .ab-progress{ position:relative !important; flex:1; top:auto !important; left:auto !important; width:auto !important; height:4px !important; border-radius:4px; background:rgba(255,255,255,.14); overflow:hidden; }
.ab-story-ui .swiper-pagination-progressbar-fill{ background:var(--ab-grad) !important; border-radius:4px; }
.ab-nav{ display:flex; gap:10px; }
.ab-nav button{ width:50px; height:50px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#fff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22); transition:.3s ease; padding:0; }
.ab-nav button:hover:not(.swiper-button-disabled){ background:var(--ab-accent); border-color:var(--ab-accent); color:#0b1b2e; }
.ab-nav button.swiper-button-disabled{ opacity:.35; cursor:default; }
.ab-nav svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* ================= MISSION & VISION ================= */
.ab-mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ab-mv{ position:relative; padding:clamp(32px,4vw,56px); border-radius:32px; overflow:hidden; min-height:100%; }
.ab-mv-mission{ color:#fff; background:linear-gradient(140deg,#123b66 0%,#0a2038 60%,#0b1b2e 100%); }
.ab-mv-mission::after{ content:""; position:absolute; right:-90px; top:-90px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(79,209,255,.35),transparent 65%); pointer-events:none; }
.ab-mv-vision{ background:#fff; border:1px solid var(--ab-line); }
.ab-mv-vision::after{ content:""; position:absolute; right:-90px; bottom:-90px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(160,116,255,.22),transparent 65%); pointer-events:none; }
.ab-mv > *{ position:relative; z-index:1; }
.ab-mv-icon{ width:66px; height:66px; display:grid; place-items:center; margin-bottom:30px; border-radius:20px; color:#fff; background:linear-gradient(135deg,#1f7bff,#8a4dff); }
.ab-mv-icon svg{ width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ab-label{ display:block; margin-bottom:14px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ab-accent); }
.ab-mv-vision .ab-label{ color:var(--ab-blue); }
.ab-mv h3{ margin-bottom:18px; font-size:clamp(24px,2.6vw,34px); font-weight:600; }
.ab-mv p{ font-size:16.5px; color:var(--ab-muted); }
.ab-mv-mission p{ color:rgba(255,255,255,.76); }
@media (max-width:991.98px){ .ab-mv-grid{ grid-template-columns:1fr; } }

/* ================= VALUES ================= */
.ab-values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ab-card{ padding:34px 32px; border-radius:var(--ab-r); background:#fff; border:1px solid var(--ab-line); transition:transform .35s ease, border-color .35s ease; }
.ab-card:hover{ transform:translateY(-7px); border-color:rgba(37,97,153,.4); }
.ab-soft .ab-glow::before{ background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(37,97,153,.1), transparent 45%); }
.ab-no{ display:inline-block; margin-bottom:26px; font-size:46px; font-weight:600; line-height:1; letter-spacing:-.03em; background:linear-gradient(135deg,#256199,#8a4dff); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.ab-card h3{ margin-bottom:12px; font-size:21px; font-weight:600; }
.ab-card p{ color:var(--ab-muted); font-size:15.5px; }
@media (max-width:991.98px){ .ab-values-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:575.98px){ .ab-values-grid{ grid-template-columns:1fr; } }

/* ================= PROCESS ================= */
.ab-process{ background:radial-gradient(900px 420px at 90% 100%,#12365a 0%,transparent 60%), var(--ab-navy); }
.ab-process .ab-h2{ color:#fff; }
.ab-steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:34px; }
@media (min-width:992px){ .ab-steps::before{ content:""; position:absolute; top:0; left:10%; right:10%; border-top:2px dashed rgba(255,255,255,.25); } }
.ab-step{ position:relative; padding:54px 28px 34px; border-radius:var(--ab-r); background:#0d2035; border:1px solid rgba(255,255,255,.1); transition:transform .4s ease, border-color .4s ease; }
.ab-step:hover{ transform:translateY(-8px); border-color:rgba(255,255,255,.3); }
.ab-step-no{ position:absolute; z-index:1; top:-31px; left:28px; width:62px; height:62px; display:grid; place-items:center; border-radius:50%; font-size:19px; font-weight:700; color:#0b1b2e; background:var(--ab-accent); box-shadow:0 0 0 8px var(--ab-navy); }
.ab-step h3{ margin-bottom:10px; font-size:23px; font-weight:600; color:#fff; }
.ab-tag{ display:inline-block; margin-bottom:16px; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.06em; color:#bfe9ff; background:rgba(79,209,255,.12); }
.ab-step p{ color:rgba(255,255,255,.7); font-size:15.5px; }
@media (max-width:991.98px){ .ab-steps{ grid-template-columns:repeat(2,1fr); row-gap:52px; } }
@media (max-width:575.98px){ .ab-steps{ grid-template-columns:1fr; row-gap:48px; } }

/* ================= WHY CHOOSE ================= */
.ab-why-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; }
.ab-icon{ width:62px; height:62px; display:grid; place-items:center; margin-bottom:26px; border-radius:18px; color:#fff; background:linear-gradient(135deg,#256199,#1f7bff); transition:.35s ease; }
.ab-icon svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ab-card:hover .ab-icon{ background:linear-gradient(135deg,#8a4dff,#1f7bff); transform:rotate(-6deg) scale(1.05); }
.ab-strip{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:30px; border-radius:30px; overflow:hidden; color:#fff;
  background:radial-gradient(600px 240px at 0% 0%,#1d5ea6 0%,transparent 70%), linear-gradient(135deg,#0b2036,#0a1626); }
.ab-strip > div{ padding:clamp(28px,3.4vw,46px) 24px; text-align:center; }
.ab-strip > div + div{ border-left:1px solid rgba(255,255,255,.1); }
.ab-strip .ab-num{ font-size:clamp(36px,4.4vw,58px); }
.ab-strip .l{ display:block; margin-top:12px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.62); }
@media (max-width:767.98px){ .ab-strip{ grid-template-columns:repeat(2,1fr); } .ab-strip > div:nth-child(3){ border-left:0; } .ab-strip > div:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.1); } }

/* ================= CTA ================= */
.ab-cta-sec{ padding-top:0; }
.ab-cta{ position:relative; overflow:hidden; text-align:center; padding:clamp(56px,8vw,110px) clamp(22px,5vw,60px); border-radius:40px; color:#fff;
  background:radial-gradient(700px 360px at 85% 0%,#5b3bd1 0%,transparent 60%), radial-gradient(700px 360px at 5% 100%,#1f7bff 0%,transparent 60%), var(--ab-navy); }
.ab-cta .ab-gridbg{ -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 10%,transparent 70%); mask-image:radial-gradient(ellipse at 50% 50%,#000 10%,transparent 70%); }
.ab-cta > *{ position:relative; z-index:1; }
.ab-cta .ab-h2{ max-width:860px; margin:0 auto 20px; font-size:clamp(32px,5vw,62px); color:#fff; }
.ab-cta p{ max-width:660px; margin:0 auto 36px; color:rgba(255,255,255,.78); font-size:clamp(16px,1.4vw,19px); }
.ab-cta .ab-actions{ justify-content:center; }