/* ═══════════════════════════════════════════════════════════
   REMUSOL — ABOUT PAGE (enhanced)
   Link AFTER style.css and enhance.css:
   <link rel="stylesheet" href="about-enhance.css?v=1">
   Files needed in the same folder: about.mp4, about.png
═══════════════════════════════════════════════════════════ */

#page-about {
  --ab-navy: #091431;
  --ab-navy2: #0c1a42;
  --ab-navy3: #0a1c4d;
  --ab-blue: #2563eb;
  --ab-royal: #1e4fd8;
  --ab-cyan: #22d3ee;
  --ab-sky: #60a5fa;
  --ab-ink: #0a1f4d;
  --ab-body: #475a82;
  --ab-soft: #f3f7ff;
  --ab-line: #dbe6fb;
  --ab-ease: cubic-bezier(.2, .8, .2, 1);
  overflow-x: clip;
}

/* ───────── Keyframes ───────── */
@keyframes abWordUp { from { opacity: 0; transform: translateY(105%) rotate(3deg); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes abFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes abFadeDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes abLeft { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
@keyframes abRight { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes abZoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes abShimmer { to { background-position: -200% center; } }
@keyframes abDot { 0% { box-shadow: 0 0 0 0 rgba(96,165,250,.55); } 70% { box-shadow: 0 0 0 10px rgba(96,165,250,0); } 100% { box-shadow: 0 0 0 0 rgba(96,165,250,0); } }
@keyframes abGlow { 0%, 100% { box-shadow: 0 8px 24px rgba(37,99,235,.4); } 50% { box-shadow: 0 8px 34px rgba(59,130,246,.7); } }
@keyframes abDrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(60px,40px,0) scale(1.15); } }
@keyframes abKen { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes abBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes abLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes abSweep { from { transform: translateX(-130%) skewX(-20deg); } to { transform: translateX(230%) skewX(-20deg); } }
@keyframes abPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes abRing { 0% { box-shadow: 0 0 0 0 rgba(34,211,238,.6); } 100% { box-shadow: 0 0 0 16px rgba(34,211,238,0); } }
@keyframes abSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes abRise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-110vh) scale(1.2); opacity: 0; } }
@keyframes abGridMove { from { background-position: 0 0, 0 0; } to { background-position: 56px 56px, 56px 56px; } }

/* ───────── Shared bits ───────── */
.ab-wrap { max-width: 1240px; margin: 0 auto; padding: 0 6vw; position: relative; z-index: 2; }

.ab-pill {
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.1rem;
  padding: .4rem 1rem; border-radius: 999px;
  border: 1px solid rgba(37,99,235,.28); background: rgba(37,99,235,.08);
  font: 600 .88rem 'Inter', sans-serif; color: var(--ab-royal);
}
.ab-pill .ab-dot { background: var(--ab-blue); box-shadow: 0 0 0 4px rgba(37,99,235,.18); }
.ab-pill-dark {
  border-color: rgba(147,197,253,.4); background: rgba(15,40,100,.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #dbeafe; font-weight: 500;
}
.ab-pill-dark .ab-dot { background: #60a5fa; box-shadow: 0 0 0 4px rgba(96,165,250,.25); }
.ab-dot { width: 8px; height: 8px; border-radius: 50%; background: #60a5fa; box-shadow: 0 0 0 4px rgba(96,165,250,.25); animation: abDot 2s ease-out infinite; flex-shrink: 0; }

.ab-head { text-align: center; max-width: 760px; margin: 0 auto 3.4rem; }
.ab-h2 {
  margin: 0; font: 800 clamp(1.9rem, 4vw, 3rem)/1.18 'Space Grotesk', sans-serif;
  letter-spacing: -.015em; color: var(--ab-ink);
}
.ab-h2::after {
  content: ""; display: block; width: 96px; height: 3px; margin: 20px auto 0; border-radius: 3px;
  background: linear-gradient(90deg, #60a5fa, #22d3ee); transform-origin: center;
}
.ab-h2.ab-left { text-align: left; }
.ab-h2.ab-left::after { margin-left: 0; transform-origin: left; }
.ab-lead { margin: 1.1rem auto 0; font: 400 1.05rem/1.75 'Inter', sans-serif; color: var(--ab-body); max-width: 60ch; }

.ab-dark .ab-h2, .ab-h2.ab-on-dark { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.3); }
.ab-dark .ab-lead { color: #cfdcf7; }

/* Buttons */
.ab-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.7rem; border-radius: 999px; font: 600 1rem 'Inter', sans-serif; text-decoration: none; cursor: pointer;
  transition: transform .2s, background .2s, box-shadow .2s, border-color .2s, color .2s;
}
.ab-btn svg { transition: transform .25s ease; }
.ab-btn:hover svg { transform: translateX(5px); }
.ab-btn:focus-visible, .ab-spot:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
.ab-btn-solid { background: #2563eb; color: #fff; box-shadow: 0 8px 24px rgba(37,99,235,.4); }
.ab-btn-solid:hover { background: #1d4ed8; transform: translateY(-2px); }
.ab-btn-solid::after {
  content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-130%) skewX(-20deg);
}
.ab-btn-solid:hover::after { animation: abSweep .8s ease; }
.ab-btn-ghost { border: 1.5px solid rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ab-btn-ghost:hover { background: #fff; border-color: #fff; color: #0a2a6e; transform: translateY(-2px); }

/* Scroll reveal (JS adds .ab-js to the page, then .ab-in per element) */
.ab-js [data-r]:not(.ab-in), .ab-js [data-tl]:not(.ab-in) .ab-tl-card { opacity: 0; }
.ab-js [data-r].ab-in { animation: abFadeUp .9s var(--ab-ease) var(--d, 0s) backwards; }
.ab-js [data-r="left"].ab-in { animation-name: abLeft; }
.ab-js [data-r="right"].ab-in { animation-name: abRight; }
.ab-js [data-r="zoom"].ab-in { animation-name: abZoom; }
.ab-js .ab-h2[data-r]:not(.ab-in)::after { transform: scaleX(0); }
.ab-js .ab-h2[data-r].ab-in::after { animation: abLine .9s var(--ab-ease) .5s backwards; }

/* Card spotlight (JS sets --mx / --my) */
.ab-spot { position: relative; overflow: hidden; }
.ab-spot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(96,165,250,.22), transparent 70%);
}
.ab-spot:hover::after { opacity: 1; }

/* ═════════════ 1. HERO (video) ═════════════ */
.ab-hero {
  position: relative; z-index: 2; isolation: isolate; overflow: hidden; color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 90vh; min-height: 90svh; padding: 9rem 6vw 8rem;
  background: var(--ab-navy) url("about.png") center / cover no-repeat;
}
.ab-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.ab-hero-shade {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(4,12,34,.9) 0%, rgba(6,22,64,.62) 55%, rgba(6,22,64,.3) 100%),
    linear-gradient(0deg, rgba(4,12,34,.88) 0%, rgba(4,12,34,0) 42%);
}
.ab-hero-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: .45; }
.ab-hero-orb.o1 { width: 420px; height: 420px; left: -140px; top: -100px; background: radial-gradient(circle, #3b82f6, transparent 70%); animation: abDrift 16s ease-in-out infinite alternate; }
.ab-hero-orb.o2 { width: 480px; height: 480px; right: -160px; bottom: -140px; background: radial-gradient(circle, #22d3ee, transparent 70%); animation: abDrift 20s ease-in-out infinite alternate-reverse; }

.ab-hero-content { position: relative; z-index: 2; max-width: 760px; text-align: left; }
.ab-badge {
  display: inline-flex; align-items: center; gap: .6rem; padding: .45rem 1rem; border-radius: 999px;
  border: 1px solid rgba(147,197,253,.4); background: rgba(15,40,100,.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: 500 .9rem 'Inter', sans-serif; color: #dbeafe; animation: abFadeDown .8s var(--ab-ease) .1s backwards;
}
.ab-hero-title {
  margin: 1.4rem 0 1.2rem; font: 700 clamp(2.8rem, 7vw, 5.4rem)/1.05 'Space Grotesk', sans-serif;
  letter-spacing: -.02em; color: #fff; background: none; -webkit-text-fill-color: #fff;
}
.ab-line { display: block; overflow: hidden; padding: .06em 0 .14em; margin-bottom: -.08em; }
.ab-w { display: inline-block; will-change: transform, opacity; animation: abWordUp .95s var(--ab-ease) backwards; animation-delay: calc(.35s + var(--i) * .13s); }
.ab-grad {
  background: linear-gradient(100deg, #93c5fd 0%, #fff 28%, #60a5fa 52%, #bfdbfe 76%, #93c5fd 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: abWordUp .95s var(--ab-ease) backwards, abShimmer 5s linear 1.6s infinite;
  animation-delay: calc(.35s + var(--i) * .13s), 1.6s;
}
.ab-hero-sub { max-width: 58ch; margin: 0 0 2.2rem; font: 400 1.15rem/1.7 'Inter', sans-serif; color: #cfdcf7; animation: abFadeUp .9s var(--ab-ease) 1s backwards; }
.ab-hero-btns { display: flex; flex-wrap: wrap; gap: 1rem; }
.ab-hero-btns .ab-btn-solid { animation: abFadeUp .9s var(--ab-ease) 1.2s backwards, abGlow 2.8s ease-in-out 2.3s infinite; }
.ab-hero-btns .ab-btn-ghost { animation: abFadeUp .9s var(--ab-ease) 1.35s backwards; }


/* ═════════════ 2. STATS (overlaps hero) ═════════════ */
.ab-stats-wrap { position: relative; z-index: 4; padding: 0 6vw; margin-top: -3.6rem; }
.ab-stats {
  max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border: 1px solid var(--ab-line); border-radius: 22px; padding: 2rem 1rem;
  box-shadow: 0 24px 60px rgba(10,28,77,.16);
}
.ab-stat { padding: .3rem 1.8rem; border-left: 1px solid var(--ab-line); }
.ab-stat:first-child { border-left: 0; }
.ab-stat-num { font: 700 clamp(2.1rem, 4vw, 3rem)/1.05 'Space Grotesk', sans-serif; color: var(--ab-royal); letter-spacing: -.02em; }
.ab-stat-label { margin-top: .4rem; font: 500 .98rem 'Inter', sans-serif; color: var(--ab-body); }

/* ═════════════ 3. STORY ═════════════ */
.ab-story { position: relative; z-index: 2; overflow: hidden; padding: 7rem 0 6.5rem; background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 70%, #fff 100%); }
.ab-story::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(37,99,235,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 20% 40%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 20% 40%, #000 10%, transparent 70%);
}
.ab-story-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 4.5rem; align-items: center; }
.ab-story-media { position: relative; padding: 0 22px 22px 0; }
.ab-story-media::before {
  content: ""; position: absolute; right: 0; bottom: 0; width: 82%; height: 82%; border-radius: 28px; z-index: 0;
  background: linear-gradient(135deg, #2563eb, #22d3ee); opacity: .9;
}
.ab-story-frame { position: relative; z-index: 1; overflow: hidden; border-radius: 26px; aspect-ratio: 5 / 6; background: #dfe9f7; box-shadow: 0 24px 56px rgba(10,28,77,.25); }
.ab-story-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ab-ease); }
.ab-story-media:hover .ab-story-frame img { transform: scale(1.06); }
.ab-story-tag {
  position: absolute; z-index: 2; left: -18px; bottom: 54px; display: flex; align-items: center; gap: .85rem;
  padding: .9rem 1.2rem .9rem .9rem; border-radius: 16px; background: rgba(255,255,255,.96);
  box-shadow: 0 16px 36px rgba(10,28,77,.22); animation: abBob 4.2s ease-in-out infinite;
}
.ab-story-tag .ab-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; }
.ab-story-tag b { display: block; font: 700 1rem 'Space Grotesk', sans-serif; color: var(--ab-ink); }
.ab-story-tag span { font: 400 .82rem 'Inter', sans-serif; color: var(--ab-body); }

.ab-story-text p.ab-lead { margin-left: 0; max-width: 54ch; }
.ab-values { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ab-value {
  display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem; border-radius: 16px; background: #fff;
  border: 1px solid var(--ab-line); box-shadow: 0 4px 16px rgba(30,79,216,.06);
  transition: transform .35s var(--ab-ease), border-color .35s, box-shadow .35s;
}
.ab-value:hover { transform: translateY(-5px); border-color: #93b4f5; box-shadow: 0 16px 34px rgba(30,79,216,.16); }
.ab-value .ab-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(37,99,235,.1); color: var(--ab-blue); transition: background .3s, color .3s; }
.ab-value:hover .ab-ic { background: var(--ab-blue); color: #fff; }
.ab-value h4 { font: 700 1rem 'Space Grotesk', sans-serif; color: var(--ab-ink); margin-bottom: .2rem; }
.ab-value p { font: 400 .86rem/1.55 'Inter', sans-serif; color: var(--ab-body); }

/* ═════════════ 4. MISSION & VISION (about.png background) ═════════════ */
.ab-mv { position: relative; z-index: 2; isolation: isolate; overflow: hidden; padding: 7rem 0; background: #0c2d6e; color: #fff; }
.ab-mv-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; z-index: -3; animation: abKen 30s ease-in-out infinite alternate; }
.ab-mv::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(14,60,140,.82) 0%, rgba(8,26,66,.93) 100%); }
.ab-mv-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; }
.ab-mv-orb.a { width: 440px; height: 440px; left: -140px; top: -100px; background: radial-gradient(circle, #3b82f6, transparent 70%); animation: abDrift 15s ease-in-out infinite alternate; }
.ab-mv-orb.b { width: 500px; height: 500px; right: -160px; bottom: -140px; background: radial-gradient(circle, #22d3ee, transparent 70%); animation: abDrift 19s ease-in-out infinite alternate-reverse; }
.ab-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.ab-mv-card {
  padding: 2.4rem 2.2rem; border-radius: 22px; border: 1px solid rgba(147,197,253,.28);
  background: linear-gradient(160deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 100%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 44px rgba(2,10,34,.4);
  transition: transform .4s var(--ab-ease), border-color .4s, box-shadow .4s;
}
.ab-mv-card:hover { transform: translateY(-8px); border-color: rgba(147,197,253,.7); box-shadow: 0 26px 56px rgba(2,10,34,.5); }
.ab-mv-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.ab-mv-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgba(127,208,255,.18); color: #9fd4ff; animation: abBob 3.6s ease-in-out infinite; transition: background .35s, color .35s; }
.ab-mv-card:nth-child(2) .ab-mv-icon { animation-delay: -1.8s; }
.ab-mv-card:hover .ab-mv-icon { background: #60a5fa; color: #06173f; }
.ab-mv-tag { font: 600 1rem 'Inter', sans-serif; color: #93c5fd; }
.ab-mv-card h3 { font: 700 clamp(1.3rem, 2.3vw, 1.65rem)/1.3 'Space Grotesk', sans-serif; color: #fff; margin-bottom: 1rem; letter-spacing: -.01em; }
.ab-mv-card p { font: 400 1rem/1.75 'Inter', sans-serif; color: #d3e1f8; }

/* ═════════════ 5. WHY CHOOSE (counters) ═════════════ */
.ab-why { position: relative; z-index: 2; padding: 7rem 0 6rem; background: #fff; }
.ab-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.ab-why-card {
  position: relative; padding: 1.9rem 1.6rem 1.7rem; border-radius: 20px; background: #fff; border: 1px solid var(--ab-line);
  box-shadow: 0 4px 18px rgba(30,79,216,.06); transition: transform .35s var(--ab-ease), box-shadow .35s, border-color .35s;
}
.ab-why-card::before {
  content: ""; position: absolute; left: 1.6rem; right: 1.6rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #2563eb, #22d3ee); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ab-ease);
}
.ab-why-card:hover { transform: translateY(-7px); border-color: #93b4f5; box-shadow: 0 20px 44px rgba(30,79,216,.16); }
.ab-why-card:hover::before { transform: scaleX(1); }
.ab-why-card .ab-ic { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1.3rem; background: rgba(37,99,235,.1); color: var(--ab-blue); animation: abBob 3.6s ease-in-out infinite; transition: background .3s, color .3s; }
.ab-why-card:nth-child(2) .ab-ic { animation-delay: -.9s; }
.ab-why-card:nth-child(3) .ab-ic { animation-delay: -1.8s; }
.ab-why-card:nth-child(4) .ab-ic { animation-delay: -2.7s; }
.ab-why-card:hover .ab-ic { background: var(--ab-blue); color: #fff; }
.ab-why-num { font: 700 clamp(2.2rem, 3.6vw, 2.9rem)/1 'Space Grotesk', sans-serif; letter-spacing: -.02em; color: var(--ab-royal); }
.ab-why-label { margin-top: .5rem; font: 500 .98rem 'Inter', sans-serif; color: var(--ab-body); }

/* ═════════════ 6. JOURNEY (dark animated, timeline) ═════════════ */
.ab-journey { position: relative; z-index: 2; isolation: isolate; overflow: hidden; padding: 7rem 0 7.5rem; color: #fff; background: linear-gradient(135deg, #091431 0%, #0c1a42 50%, #0a1c4d 100%); }
.ab-jbg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ab-jgrid {
  position: absolute; inset: -56px 0 0 0;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
  animation: abGridMove 9s linear infinite;
}
.ab-jorb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.ab-jorb.a { width: 460px; height: 460px; left: -120px; top: -100px; background: radial-gradient(circle, #38bdf8, transparent 70%); animation: abDrift 16s ease-in-out infinite alternate; }
.ab-jorb.b { width: 520px; height: 520px; right: -160px; bottom: -160px; background: radial-gradient(circle, #818cf8, transparent 70%); animation: abDrift 20s ease-in-out infinite alternate-reverse; }
.ab-jring { position: absolute; left: 80%; top: 28%; width: 520px; height: 520px; border: 1.5px dashed rgba(255,255,255,.2); border-radius: 50%; transform: translate(-50%,-50%); animation: abSpin 60s linear infinite; }
.ab-jdot { position: absolute; bottom: -20px; width: 7px; height: 7px; border-radius: 50%; background: rgba(191,219,254,.9); box-shadow: 0 0 12px rgba(147,197,253,.9); animation: abRise linear infinite; }
.ab-jdot:nth-of-type(1) { left: 8%; animation-duration: 15s; }
.ab-jdot:nth-of-type(2) { left: 24%; width: 5px; height: 5px; animation-duration: 11s; animation-delay: -4s; }
.ab-jdot:nth-of-type(3) { left: 41%; animation-duration: 18s; animation-delay: -9s; }
.ab-jdot:nth-of-type(4) { left: 58%; width: 6px; height: 6px; animation-duration: 13s; animation-delay: -2s; }
.ab-jdot:nth-of-type(5) { left: 74%; animation-duration: 16s; animation-delay: -11s; }
.ab-jdot:nth-of-type(6) { left: 91%; width: 5px; height: 5px; animation-duration: 12s; animation-delay: -6s; }

.ab-tl { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; }
.ab-tl-line { position: absolute; top: 11px; left: 10%; right: 10%; height: 2px; background: rgba(255,255,255,.16); border-radius: 2px; }
.ab-tl-line i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #60a5fa, #22d3ee); transform-origin: left; }
.ab-js .ab-tl:not(.ab-in) .ab-tl-line i { transform: scaleX(0); }
.ab-js .ab-tl.ab-in .ab-tl-line i { animation: abLine 2.2s var(--ab-ease) .2s backwards; }
.ab-tl-item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ab-tl-dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; margin-bottom: 1.5rem; background: #0c1a42; border: 4px solid #60a5fa; box-shadow: 0 0 0 5px rgba(96,165,250,.16); }
.ab-js .ab-tl:not(.ab-in) .ab-tl-dot { transform: scale(0); }
.ab-js .ab-tl.ab-in .ab-tl-dot { animation: abPop .5s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay: calc(.35s + var(--i) * .42s); }
.ab-tl-dot.now { border-color: #22d3ee; background: #22d3ee; }
.ab-tl-dot.now::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; animation: abRing 1.8s ease-out infinite; }
.ab-tl-card {
  width: 100%; height: 100%; padding: 1.4rem 1.2rem 1.3rem; border-radius: 18px; border: 1px solid rgba(147,197,253,.24);
  background: linear-gradient(160deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 14px 34px rgba(2,10,34,.35);
  transition: transform .35s var(--ab-ease), border-color .35s, box-shadow .35s;
}
.ab-js .ab-tl.ab-in .ab-tl-card { animation: abFadeUp .8s var(--ab-ease) backwards; animation-delay: calc(.5s + var(--i) * .42s); }
.ab-tl-card:hover { transform: translateY(-6px); border-color: rgba(96,165,250,.7); box-shadow: 0 22px 46px rgba(2,10,34,.5), 0 0 30px rgba(59,130,246,.25); }
.ab-tl-card.now { border-color: rgba(34,211,238,.55); background: linear-gradient(160deg, rgba(34,211,238,.18) 0%, rgba(255,255,255,.05) 100%); }
.ab-tl-year { display: block; font: 800 1.5rem/1 'Space Grotesk', sans-serif; letter-spacing: -.01em; color: #67e8f9; margin-bottom: .6rem; }
.ab-tl-card h4 { font: 700 1rem/1.35 'Space Grotesk', sans-serif; color: #fff; margin-bottom: .45rem; }
.ab-tl-card p { font: 400 .86rem/1.6 'Inter', sans-serif; color: #c4d4f1; }

/* ═════════════ 7. INDUSTRIES ═════════════ */
.ab-ind { position: relative; z-index: 2; padding: 7rem 0 6.5rem; background: var(--ab-soft); }
.ab-ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; max-width: 980px; margin: 0 auto; }
.ab-ind-card {
  display: flex; align-items: center; gap: 1.1rem; padding: 1.3rem 1.5rem; border-radius: 18px; background: #fff; border: 1px solid var(--ab-line);
  box-shadow: 0 4px 16px rgba(30,79,216,.06); transition: transform .35s var(--ab-ease), border-color .35s, box-shadow .35s;
}
.ab-ind-card:hover { transform: translateY(-6px); border-color: #93b4f5; box-shadow: 0 18px 38px rgba(30,79,216,.16); }
.ab-ind-card .ab-ic { flex-shrink: 0; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: rgba(37,99,235,.1); color: var(--ab-blue); transition: background .3s, color .3s, transform .35s var(--ab-ease); }
.ab-ind-card:hover .ab-ic { background: linear-gradient(135deg, #2563eb, #22d3ee); color: #fff; transform: rotate(-6deg) scale(1.06); }
.ab-ind-card span { font: 600 1.05rem 'Space Grotesk', sans-serif; color: var(--ab-ink); }

/* ═════════════ 8. LEADERSHIP ═════════════ */
.ab-team { position: relative; z-index: 2; isolation: isolate; overflow: hidden; padding: 7rem 0 6.5rem; color: #fff; background: linear-gradient(135deg, #091431 0%, #0c1a42 50%, #0a1c4d 100%); }
.ab-team-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
.ab-team-card {
  width: 214px; padding: 2.2rem 1rem 1.8rem; text-align: center; border-radius: 22px; border: 1px solid rgba(147,197,253,.24);
  background: linear-gradient(160deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 100%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 16px 38px rgba(2,10,34,.4);
  transition: transform .4s var(--ab-ease), box-shadow .4s, border-color .4s;
}
.ab-team-card:hover { transform: translateY(-10px); border-color: rgba(96,165,250,.7); box-shadow: 0 26px 54px rgba(2,10,34,.55), 0 0 32px rgba(59,130,246,.3); }
.ab-team-avatar {
  position: relative; width: 128px; height: 128px; margin: 0 auto 1.3rem; padding: 4px; border-radius: 50%;
  background: conic-gradient(from 0deg, #2563eb, #22d3ee, #6366f1, #2563eb); transition: transform .6s var(--ab-ease);
}
.ab-team-card:hover .ab-team-avatar { transform: rotate(360deg); }
.ab-team-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 4px solid #0c1a42; background: #1e3a8a; transition: transform .6s var(--ab-ease); }
.ab-team-card:hover .ab-team-avatar img { transform: rotate(-360deg); }
.ab-team-card h4 { font: 700 1.08rem 'Space Grotesk', sans-serif; color: #fff; margin-bottom: .25rem; }
.ab-team-card p { font: 400 .88rem/1.45 'Inter', sans-serif; color: #b9cbef; }

@media (min-width: 1101px) { .ab-team-card { width: calc((100% - 4.8rem) / 5); } }

/* extra animated layers for the dark team background */
.ab-jring.r2 { left: 12%; top: 82%; width: 340px; height: 340px; border-color: rgba(147,197,253,.26); animation-duration: 45s; animation-direction: reverse; }
.ab-jbeam { position: absolute; top: -20%; left: -30%; width: 40%; height: 140%; pointer-events: none; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(96,165,250,.14), rgba(34,211,238,.1), transparent); filter: blur(10px); animation: abBeam 11s ease-in-out infinite; }
@keyframes abBeam { 0% { transform: translateX(0) rotate(18deg); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(380%) rotate(18deg); opacity: 0; } }

/* ═════════════ 9. TRUST + CTA ═════════════ */
.ab-cta { position: relative; z-index: 2; padding: 1rem 6vw 6rem; background: #fff; }
.ab-cta-box {
  position: relative; isolation: isolate; overflow: hidden; max-width: 1180px; margin: 0 auto; text-align: center; color: #fff;
  padding: 4.5rem 2.5rem 2.6rem; border-radius: 30px; border: 1px solid rgba(147,197,253,.2);
  background: linear-gradient(135deg, #091431 0%, #0c1a42 50%, #0a1c4d 100%); box-shadow: 0 24px 60px rgba(6,16,48,.4);
}
.ab-cta-box::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 75%);
}
.ab-cta-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; }
.ab-cta-orb.a { width: 340px; height: 340px; left: -90px; top: -90px; background: radial-gradient(circle, #38bdf8, transparent 70%); animation: abDrift 15s ease-in-out infinite alternate; }
.ab-cta-orb.b { width: 380px; height: 380px; right: -110px; bottom: -130px; background: radial-gradient(circle, #818cf8, transparent 70%); animation: abDrift 19s ease-in-out infinite alternate-reverse; }
.ab-cta-box h2 { font: 800 clamp(1.8rem, 3.8vw, 2.7rem)/1.18 'Space Grotesk', sans-serif; letter-spacing: -.015em; margin: 0 auto 1rem; max-width: 20ch; color: #fff; }
.ab-cta-box > p { max-width: 52ch; margin: 0 auto 2rem; font: 400 1.05rem/1.7 'Inter', sans-serif; color: #cfdcf7; }
.ab-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 2.6rem; }
.ab-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; padding-top: 1.9rem; border-top: 1px solid rgba(255,255,255,.14); }
.ab-trust-item { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .7rem .6rem; border-radius: 12px; font: 500 .86rem/1.35 'Inter', sans-serif; color: #dbe6fb; text-align: left; transition: background .3s; }
.ab-trust-item:hover { background: rgba(255,255,255,.07); }
.ab-trust-item svg { flex-shrink: 0; color: #22d3ee; }

/* ═════════════ Responsive ═════════════ */
@media (max-width: 1000px) {
  .ab-story-grid { grid-template-columns: 1fr; gap: 3.2rem; }
  .ab-story-media { max-width: 520px; margin: 0 auto; width: 100%; }
  .ab-why-grid { grid-template-columns: repeat(2, 1fr); }
  .ab-ind-grid { grid-template-columns: repeat(2, 1fr); }
  .ab-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .ab-hero { padding: 7.5rem 6vw 6.5rem; }
  .ab-stats { grid-template-columns: repeat(2, 1fr); row-gap: 1.6rem; padding: 1.6rem .6rem; }
  .ab-stat:nth-child(odd) { border-left: 0; }
  .ab-story, .ab-mv, .ab-why, .ab-ind, .ab-team { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .ab-story { padding-top: 5.5rem; }
  .ab-journey { padding: 4.5rem 0 5rem; }
  .ab-mv-grid { grid-template-columns: 1fr; }
  .ab-head { margin-bottom: 2.4rem; }

  /* timeline turns vertical */
  .ab-tl { grid-template-columns: 1fr; gap: 1.2rem; padding-left: 46px; }
  .ab-tl-line { top: 8px; bottom: 8px; left: 11px; right: auto; width: 2px; height: auto; }
  .ab-tl-line i { width: 100%; height: 100%; transform-origin: top; }
  .ab-js .ab-tl:not(.ab-in) .ab-tl-line i { transform: scaleY(0); }
  .ab-js .ab-tl.ab-in .ab-tl-line i { animation-name: abLineV; }
  .ab-tl-item { align-items: flex-start; text-align: left; }
  .ab-tl-dot { position: absolute; left: -46px; top: 18px; margin: 0; }
}
@keyframes abLineV { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 560px) {
  .ab-values { grid-template-columns: 1fr; }
  .ab-why-grid { grid-template-columns: 1fr 1fr; gap: .9rem; }
  .ab-why-card { padding: 1.4rem 1.1rem; }
  .ab-ind-grid { grid-template-columns: 1fr; }
  .ab-story-tag { left: 8px; bottom: 40px; }
  .ab-mv-card { padding: 1.8rem 1.4rem; }
  .ab-team-card { width: calc(50% - .75rem); padding: 1.8rem .8rem 1.5rem; }
  .ab-team-avatar { width: 108px; height: 108px; }
  .ab-cta { padding: 0 1.25rem 4rem; }
  .ab-cta-box { padding: 3.2rem 1.4rem 1.8rem; border-radius: 24px; }
  .ab-trust { grid-template-columns: 1fr; }
  .ab-trust-item { justify-content: flex-start; }
  .ab-hero-orb, .ab-mv-orb { opacity: .3; }
  .ab-jring { display: none; }
}

/* ═════════════ Reduced motion ═════════════ */
@media (prefers-reduced-motion: reduce) {
  #page-about *, #page-about *::before, #page-about *::after { animation: none !important; transition: none !important; }
  .ab-js [data-r], .ab-js [data-tl] .ab-tl-card { opacity: 1 !important; }
  .ab-grad { background-position: 0 0; }
}