/* ================================================================
   BBG About Page — Premium Neumorphic + Glassmorphism  v3
   ================================================================
   Elevated design system:
   - Neumorphic soft-UI base with glassmorphism overlays
   - Animated gradient mesh backgrounds
   - Floating geometric decorations (CSS-only)
   - 3D hover tilt on cards
   - Gradient text headings
   - Animated counter numbers
   - Pulsing CTA elements
   - Advanced scroll-reveal with staggered cascades
   ================================================================ */

/* ── Tokens & Base ───────────────────────────────────────────── */
.bbg-about-page {
    --neu-bg:  #e8ecf2;
    --neu-d:   #c5cbd7;
    --neu-l:   #ffffff;

    --shadow-xs:    4px 4px 10px var(--neu-d), -4px -4px 10px var(--neu-l);
    --shadow-sm:    5px 5px 14px var(--neu-d), -5px -5px 14px var(--neu-l);
    --shadow-md:    6px 6px 16px var(--neu-d), -6px -6px 16px var(--neu-l);
    --shadow-lg:    8px 8px 22px var(--neu-d), -8px -8px 22px var(--neu-l);
    --shadow-xl:   10px 10px 30px var(--neu-d), -10px -10px 30px var(--neu-l);
    --shadow-inset: inset 3px 3px 7px var(--neu-d), inset -3px -3px 7px var(--neu-l);

    --blue:     #042C58;
    --blue-d:   #021A38;
    --blue-l:   #0B5394;
    --blue-glow: rgba(4, 44, 88, .35);
    --navy:     #042C58;
    --dark:     #0E0700;
    --text:     #333333;
    --text-2:   #555555;
    --text-3:   #777777;
    --white:    #ffffff;
    --accent:   #0B5394;
    --accent2:  #0B5394;

    --r-sm:     12px;
    --r-md:     16px;
    --r-lg:     20px;
    --r-xl:     24px;
    --r-2xl:    32px;

    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease-smooth: cubic-bezier(.4, 0, .2, 1);

    background: var(--neu-bg);
    font-family: 'Karla', sans-serif;
    color: var(--text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.bbg-about-page *,
.bbg-about-page *::before,
.bbg-about-page *::after {
    box-sizing: border-box;
}

/* ================================================================
   ANIMATED GRADIENT MESH BLOBS (background decoration)
   ================================================================ */
@keyframes blob-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(30px, -50px) scale(1.05); }
    50%      { transform: translate(-20px, 20px) scale(.97); }
    75%      { transform: translate(40px, 30px) scale(1.03); }
}

.about-blobs {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.about-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .18;
    animation: blob-float 18s ease-in-out infinite;
}

.about-blob--1 {
    width: 500px;
    height: 500px;
    background: var(--blue);
    top: 10%;
    left: -5%;
    animation-delay: 0s;
}

.about-blob--2 {
    width: 400px;
    height: 400px;
    background: var(--accent2);
    top: 40%;
    right: -8%;
    animation-delay: -6s;
}

.about-blob--3 {
    width: 350px;
    height: 350px;
    background: var(--accent2);
    bottom: 10%;
    left: 30%;
    animation-delay: -12s;
}

/* ================================================================
   FLOATING GEOMETRIC SHAPES (CSS only)
   ================================================================ */
@keyframes geo-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes geo-drift {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-30px) rotate(180deg); }
}

.about-geo-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.about-geo {
    position: absolute;
    border: 2px solid rgba(4, 44, 88, .15);
    opacity: .4;
}

.about-geo--circle {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    top: 15%;
    right: 8%;
    animation: geo-spin 25s linear infinite;
}

.about-geo--diamond {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    bottom: 20%;
    left: 6%;
    animation: geo-drift 12s ease-in-out infinite;
}

.about-geo--triangle {
    width: 0;
    height: 0;
    border: none;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 55px solid rgba(4, 44, 88, .08);
    top: 60%;
    right: 15%;
    animation: geo-drift 16s ease-in-out infinite reverse;
}

.about-geo--ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border-width: 3px;
    border-color: rgba(4, 44, 88, .12);
    top: 35%;
    left: 12%;
    animation: geo-spin 30s linear infinite reverse;
}

.about-geo--cross {
    width: 40px;
    height: 40px;
    border: none;
    background:
        linear-gradient(rgba(4, 44, 88, .12), rgba(4, 44, 88, .12)) center/3px 100% no-repeat,
        linear-gradient(rgba(4, 44, 88, .12), rgba(4, 44, 88, .12)) center/100% 3px no-repeat;
    bottom: 35%;
    right: 10%;
    animation: geo-drift 14s ease-in-out infinite;
    animation-delay: -4s;
}

/* ================================================================
   SECTIONS BASE
   ================================================================ */
.about-section {
    position: relative;
    padding: 100px 0;
    z-index: 1;
}

.about-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 30px;
}

/* ── Label (kicker) ──────────────────────────────────────────── */
.about-label {
    display: inline-block;
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 10px;
    position: relative;
}

.about-label--center { display: block; text-align: center; }
.about-label--light  { color: rgba(255,255,255,.50); }

/* Animated underline for labels */
.about-label::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--accent2));
    margin-top: 4px;
    transition: width .6s var(--ease-smooth);
    border-radius: 2px;
}
.about-label--center::after {
    margin-left: auto;
    margin-right: auto;
}
.about-label--light::after {
    background: linear-gradient(90deg, rgba(255,255,255,.4), rgba(255,255,255,.1));
}

[data-reveal].is-visible .about-label::after,
.about-hero .about-label::after {
    width: 40px;
}

/* ── Headings — gradient text ────────────────────────────────── */
.about-heading {
    font-family: 'Nissan', sans-serif;
    font-weight: 600;
    font-size: 44px;
    color: var(--dark);
    margin: 0 0 16px;
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.about-heading--gradient {
    background: linear-gradient(135deg, var(--dark) 0%, var(--blue) 45%, var(--blue-l) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-heading--center { text-align: center; }
.about-heading--white  { color: var(--white); -webkit-text-fill-color: var(--white); background: none; }

.about-lead {
    text-align: center;
    font-size: 18px;
    color: var(--text-2);
    max-width: 720px;
    margin: 0 auto 48px;
    line-height: 1.75;
}

/* ================================================================
   BUTTONS — blue first, force override theme
   ================================================================ */
.bbg-about-page .about-btn,
.bbg-about-page a.about-btn,
.bbg-about-page button.about-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    font-family: 'Karla', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none !important;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .25s var(--ease-spring), box-shadow .3s ease, background .25s ease, color .25s ease;
    z-index: 1;
}

/* Animated shimmer on hover */
.about-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
    transition: left .5s ease;
    z-index: -1;
}

.about-btn:hover::before {
    left: 100%;
}

/* -- PRIMARY: BLUE (force override theme pink/rose) ----------- */
.bbg-about-page .about-btn--primary,
.bbg-about-page a.about-btn--primary,
.bbg-about-page a.about-btn--primary:link,
.bbg-about-page a.about-btn--primary:visited,
.bbg-about-page a.about-btn--primary:active {
    background: linear-gradient(135deg, #0B5394 0%, #042C58 100%) !important;
    color: #ffffff !important;
    box-shadow:
        5px 5px 14px var(--neu-d),
       -5px -5px 14px var(--neu-l),
        0 4px 20px rgba(4, 44, 88, .28);
}

.bbg-about-page .about-btn--primary:hover,
.bbg-about-page a.about-btn--primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        6px 6px 18px var(--neu-d),
       -6px -6px 18px var(--neu-l),
        0 8px 30px rgba(4, 44, 88, .40);
    background: linear-gradient(135deg, #1A7BC4 0%, #0B5394 100%) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.about-btn--primary:active {
    transform: translateY(0) scale(.98) !important;
    box-shadow: var(--shadow-inset) !important;
}

/* -- WHITE ---------------------------------------------------- */
.bbg-about-page .about-btn--white,
.bbg-about-page a.about-btn--white,
.bbg-about-page a.about-btn--white:link,
.bbg-about-page a.about-btn--white:visited {
    background: var(--white) !important;
    color: var(--dark) !important;
    box-shadow:
        0 4px 18px rgba(0, 0, 0, .15),
        0 1px 4px rgba(0, 0, 0, .06);
}

.bbg-about-page .about-btn--white:hover,
.bbg-about-page a.about-btn--white:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 10px 35px rgba(0, 0, 0, .18),
        0 2px 8px rgba(0, 0, 0, .08);
    color: var(--blue) !important;
    text-decoration: none !important;
}

/* -- GLASS ---------------------------------------------------- */
.bbg-about-page .about-btn--glass,
.bbg-about-page button.about-btn--glass {
    background: rgba(255,255,255,.12) !important;
    color: var(--white) !important;
    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .15);
}

.bbg-about-page .about-btn--glass:hover,
.bbg-about-page button.about-btn--glass:hover {
    background: rgba(255,255,255,.22) !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .22);
    color: var(--white) !important;
    text-decoration: none !important;
    border-color: rgba(255,255,255,.45);
}

/* -- OUTLINE WHITE -------------------------------------------- */
.bbg-about-page .about-btn--outline-white,
.bbg-about-page a.about-btn--outline-white,
.bbg-about-page a.about-btn--outline-white:link,
.bbg-about-page a.about-btn--outline-white:visited {
    background: transparent !important;
    color: var(--white) !important;
    border: 2px solid rgba(255,255,255,.50);
    box-shadow: none;
}

.bbg-about-page .about-btn--outline-white:hover,
.bbg-about-page a.about-btn--outline-white:hover {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.85);
    transform: translateY(-3px) scale(1.02);
    color: var(--white) !important;
    text-decoration: none !important;
}

/* ================================================================
   1. HERO — cinematic full-bleed
   ================================================================ */
.about-hero {
    position: relative;
    min-height: 580px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
}

/* Full-bleed background video */
.about-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.about-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,12,35,.68) 0%, rgba(0,0,0,.52) 60%, rgba(0,20,50,.72) 100%);
    z-index: 1;
}

/* Animated scanline */
.about-hero__overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255,255,255,.012) 2px,
        rgba(255,255,255,.012) 4px
    );
    pointer-events: none;
}

/* Sunken inset shadow */
.about-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow:
        inset 0  10px 24px rgba(0, 0, 0, .45),
        inset 0 -5px 14px rgba(0, 0, 0, .15),
        inset  8px 0 16px rgba(0, 0, 0, .18),
        inset -8px 0 16px rgba(0, 0, 0, .18);
    pointer-events: none;
    z-index: 2;
}

/* Decorative dots */
.about-hero__dots {
    position: absolute;
    width: 200px;
    opacity: .10;
    z-index: 2;
    pointer-events: none;
    transition: opacity .4s;
}

.about-hero__dots--left  { bottom: 40px; left:  40px; }
.about-hero__dots--right { top: 40px;    right: 40px; }

/* Floating particles in hero */
.about-hero__particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

@keyframes particle-float {
    0%   { transform: translateY(100vh) scale(0); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(-20vh) scale(1); opacity: 0; }
}

.about-hero__particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, .3);
    border-radius: 50%;
    animation: particle-float linear infinite;
}

.about-hero__particle:nth-child(1)  { left: 10%;  animation-duration: 12s; animation-delay: 0s;   width: 3px; height: 3px; }
.about-hero__particle:nth-child(2)  { left: 25%;  animation-duration: 16s; animation-delay: -3s;  width: 5px; height: 5px; }
.about-hero__particle:nth-child(3)  { left: 40%;  animation-duration: 11s; animation-delay: -7s;  width: 3px; height: 3px; }
.about-hero__particle:nth-child(4)  { left: 55%;  animation-duration: 14s; animation-delay: -2s;  width: 6px; height: 6px; }
.about-hero__particle:nth-child(5)  { left: 70%;  animation-duration: 13s; animation-delay: -5s;  width: 4px; height: 4px; }
.about-hero__particle:nth-child(6)  { left: 85%;  animation-duration: 15s; animation-delay: -9s;  width: 3px; height: 3px; }
.about-hero__particle:nth-child(7)  { left: 18%;  animation-duration: 17s; animation-delay: -1s;  width: 5px; height: 5px; }
.about-hero__particle:nth-child(8)  { left: 62%;  animation-duration: 10s; animation-delay: -6s;  width: 4px; height: 4px; }
.about-hero__particle:nth-child(9)  { left: 48%;  animation-duration: 19s; animation-delay: -11s; width: 3px; height: 3px; }
.about-hero__particle:nth-child(10) { left: 92%;  animation-duration: 14s; animation-delay: -8s;  width: 5px; height: 5px; }

/* Hero content */
.about-hero__inner {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 860px;
    padding: 120px 30px 110px;
}

.about-hero__tag {
    display: inline-block;
    font-family: 'Karla', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #FFF;
    background: rgba(18, 94, 179, 0.1);
    border: 1px solid rgba(4, 44, 88, .22);
    border-radius: 50px;
    padding: 7px 22px;
    margin-bottom: 22px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: tag-glow 3s ease-in-out infinite alternate;
}

@keyframes tag-glow {
    0%   { box-shadow: 0 0 12px rgba(4, 44, 88, .10); }
    100% { box-shadow: 0 0 22px rgba(4, 44, 88, .25); }
}

.about-hero__title {
    font-family: 'Nissan', sans-serif;
    font-weight: 600;
    font-size: 58px;
    color: var(--white);
    margin: 0 0 20px;
    letter-spacing: -0.5px;
    line-height: 1.12;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .25);
}

.about-hero__subtitle {
    font-family: 'Karla', sans-serif;
    font-size: 19px;
    font-weight: 400;
    color: rgba(255, 255, 255, .85);
    margin: 0 0 38px;
    line-height: 1.65;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.about-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ================================================================
   2. STATS BAR — animated counters with glassmorphism
   ================================================================ */
/* ================================================================
   3. INTRO — text + image with offset overlap
   ================================================================ */
.about-intro {
    background: var(--neu-bg);
    padding-top: 90px;
}

.about-intro__grid {
    display: flex;
    align-items: center;
    gap: 70px;
}

.about-intro__text {
    flex: 1 1 55%;
}

.about-intro__text p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.78;
    color: var(--text);
    margin: 0 0 16px;
}

.about-intro__subtext {
    font-size: 16px !important;
    color: var(--text-2) !important;
    font-style: italic;
    border-left: 3px solid transparent;
    border-image: linear-gradient(180deg, var(--blue), var(--accent2)) 1;
    padding-left: 20px;
    margin-top: 8px !important;
    margin-bottom: 30px !important;
    position: relative;
}

.about-intro__visual {
    flex: 1 1 45%;
    position: relative;
    overflow: hidden;
    border-radius: var(--r-2xl);
}

.about-intro__image {
    width: 100%;
    border-radius: var(--r-2xl);
    box-shadow:
        var(--shadow-lg),
        0 20px 50px rgba(4, 44, 88, .08);
    display: block;
    transition: transform .4s var(--ease-smooth);
}

.about-intro__visual:hover .about-intro__image {
    transform: scale(1.02);
}

.about-intro__image--logo {
    padding: 40px;
    object-fit: contain;
    background: var(--neu-bg);
}

.about-intro__decor {
    position: absolute;
    width: 130px;
    bottom: -35px;
    right: -25px;
    opacity: .20;
    pointer-events: none;
}

/* Glow ring behind image */
.about-intro__visual::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: var(--r-2xl);
    background: linear-gradient(135deg, rgba(4, 44, 88, .12), rgba(11, 83, 148, .08));
    z-index: -1;
    opacity: 0;
    transition: opacity .4s;
}

.about-intro__visual:hover::before {
    opacity: 1;
}

/* ================================================================
   4. MISSION — icon cards with gradient border hover
   ================================================================ */
.about-mission {
    background: var(--neu-bg);
    position: relative;
}

.about-card-grid {
    display: grid;
    gap: 24px;
    padding: 6px;
}

.about-card-grid--5 { grid-template-columns: repeat(5, 1fr); }
.about-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.about-card-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ── Icon Card — intruded, extrudes smoothly on hover ────────── */
.about-icon-card {
    background: var(--neu-bg);
    border-radius: var(--r-xl);
    padding: 34px 24px 28px;
    box-shadow:
        inset 4px 4px 10px var(--neu-d),
        inset -4px -4px 10px var(--neu-l);
    transition: box-shadow .6s ease, transform .6s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation-delay: var(--card-delay, 0s);
    position: relative;
}

.about-icon-card:hover {
    transform: translateY(-3px);
    box-shadow:
        6px 6px 16px var(--neu-d),
        -6px -6px 16px var(--neu-l);
}

.about-icon-card__icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(4, 44, 88, .08);
    color: var(--blue);
    font-size: 24px;
    margin-bottom: 20px;
    box-shadow:
        inset 3px 3px 8px var(--neu-d),
        inset -3px -3px 8px var(--neu-l);
    border: 1px solid rgba(4, 44, 88, .10);
    transition: box-shadow .6s ease, transform .6s ease, border-color .6s ease;
}

.about-icon-card:hover .about-icon-card__icon {
    box-shadow:
        4px 4px 10px var(--neu-d),
        -4px -4px 10px var(--neu-l);
    border-color: rgba(4, 44, 88, .15);
    transform: scale(1.05);
}

.about-icon-card__title {
    font-family: 'Nissan', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--dark);
    margin: 0 0 10px;
}

.about-icon-card__desc {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0;
}

/* ================================================================
   5. VISION — accent banner with animated gradient
   ================================================================ */
@keyframes gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.about-vision {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #042C58, #0B5394, #021A38, #042C58);
    background-size: 300% 300%;
    animation: gradient-shift 12s ease infinite;
}

.about-vision__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 700px 700px at 85% 20%, rgba(255,255,255,.08) 0%, transparent 70%),
        radial-gradient(ellipse 500px 500px at 10% 80%, rgba(0,0,0,.12) 0%, transparent 60%);
    pointer-events: none;
}

/* Floating orbs */
.about-vision__bg::before,
.about-vision__bg::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .15;
    animation: blob-float 20s ease-in-out infinite;
}

.about-vision__bg::before {
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, .2);
    top: -50px;
    right: -50px;
    animation-delay: -5s;
}

.about-vision__bg::after {
    width: 200px;
    height: 200px;
    background: rgba(11, 83, 148, .15);
    bottom: -40px;
    left: 10%;
}

.about-vision__inner {
    max-width: 840px;
    margin: 0 auto;
    text-align: center;
    padding: 0 30px;
    position: relative;
    z-index: 1;
}

.about-vision__icon {
    font-size: 56px;
    color: rgba(255, 255, 255, .18);
    margin-bottom: 14px;
}

.about-vision__text {
    font-size: 21px;
    color: rgba(255, 255, 255, .92);
    line-height: 1.78;
    margin: 14px 0 0;
}

/* ================================================================
   6. APPROACH — step cards
   ================================================================ */
.about-approach {
    background: var(--neu-bg);
    position: relative;
}

.about-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 6px;
    position: relative;
}

.about-step {
    background: var(--neu-bg);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-inset);
    overflow: hidden;
    transition: transform .3s var(--ease-spring), box-shadow .3s ease;
    animation-delay: var(--step-delay, 0s);
    position: relative;
}

.about-step:hover {
    transform: translateY(-4px);
    box-shadow:
        inset 4px 4px 10px var(--neu-d),
        inset -4px -4px 10px var(--neu-l),
        0 4px 14px rgba(4, 44, 88, .08);
}

.about-step__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.about-step__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--ease-smooth);
}

.about-step:hover .about-step__img-wrap img {
    transform: scale(1.05);
}

/* Blue gradient overlay on hover */
.about-step__img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(4, 44, 88, .12) 100%);
    opacity: 0;
    transition: opacity .3s;
}

.about-step:hover .about-step__img-wrap::after {
    opacity: 1;
}

.about-step__num {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: 'Nissan', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--white);
    background: linear-gradient(135deg, var(--blue), var(--blue-d));
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(4, 44, 88, .45);
    z-index: 1;
    transition: transform .3s var(--ease-spring);
}

.about-step:hover .about-step__num {
    transform: scale(1.08);
}

.about-step__body {
    padding: 26px 28px 30px;
}

.about-step__title {
    font-family: 'Nissan', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--dark);
    margin: 0 0 8px;
}

.about-step__desc {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.65;
    margin: 0;
}

/* ================================================================
   7. TARGET AUDIENCE — offset cards with accent stripe
   ================================================================ */
.about-audience {
    background: var(--neu-bg);
    position: relative;
}

.about-audience__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    padding: 6px;
    margin-top: 20px;
}

.about-audience__card {
    background: var(--neu-bg);
    border: none;
    border-radius: var(--r-2xl);
    overflow: hidden;
    box-shadow:
        inset 4px 4px 10px var(--neu-d),
        inset -4px -4px 10px var(--neu-l);
    transition: box-shadow .3s ease;
    position: relative;
}

/* Accent top border */
.about-audience__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--blue), var(--accent2));
    opacity: 1;
    z-index: 2;
}

.about-audience__img-wrap {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    position: relative;
}

.about-audience__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s var(--ease-smooth);
}



.about-audience__body {
    padding: 32px 34px 38px;
}

.about-audience__icon {
    font-size: 34px;
    color: var(--blue);
    margin-bottom: 12px;
    transition: transform .3s var(--ease-spring);
}



.about-audience__title {
    font-family: 'Nissan', sans-serif;
    font-weight: 600;
    font-size: 23px;
    color: var(--blue);
    margin: 0 0 10px;
}

.about-audience__desc {
    font-size: 16px;
    color: var(--text-2);
    line-height: 1.7;
    margin: 0;
}

/* ================================================================
   8. CTA BANNER — cinematic parallax with pulsing button
   ================================================================ */
.about-cta {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
    padding: 120px 0;
}

.about-cta__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(0,20,50,.75) 0%, rgba(0,0,0,.55) 50%, rgba(0,45,114,.50) 100%);
    z-index: 1;
}

/* Animated gradient shimmer */
.about-cta__overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg,
        transparent 30%,
        rgba(4, 44, 88, .06) 50%,
        transparent 70%
    );
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
}

.about-cta__inner {
    position: relative;
    z-index: 2;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
    padding: 0 30px;
}

.about-cta__text {
    font-size: 19px;
    color: rgba(255, 255, 255, .88);
    line-height: 1.72;
    margin: 0 0 36px;
}

.about-cta__btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Pulsing ring behind primary CTA button */
@keyframes pulse-ring {
    0%   { transform: scale(1);   opacity: .6; }
    50%  { transform: scale(1.08); opacity: 0; }
    100% { transform: scale(1);   opacity: 0; }
}

.about-cta__btns .about-btn--white {
    position: relative;
}

.about-cta__btns .about-btn--white::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, .35);
    animation: pulse-ring 2.5s ease-out infinite;
    pointer-events: none;
}

/* ================================================================
   9. VIDEO POPUP OVERLAY
   ================================================================ */
.about-video-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
}

.about-video-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.about-video-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.about-video-overlay__wrap {
    position: relative;
    z-index: 2;
    width: 90vw;
    max-width: 960px;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow:
        0 25px 70px rgba(0, 0, 0, .55),
        0 0 0 1px rgba(255, 255, 255, .08);
    transform: scale(.88) translateY(20px);
    transition: transform .4s var(--ease-spring);
}

.about-video-overlay.is-active .about-video-overlay__wrap {
    transform: scale(1) translateY(0);
}

.about-video-overlay__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: background .2s, transform .2s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.about-video-overlay__close:hover {
    background: rgba(0,0,0,.75);
    transform: rotate(90deg);
}

.about-video-overlay__player {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
}

/* ================================================================
   10. SCROLL-REVEAL
   ================================================================ */
[data-reveal] {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity .7s var(--ease-smooth), transform .7s var(--ease-smooth);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Direction variants */
[data-reveal="left"] {
    transform: translateX(-40px);
}
[data-reveal="left"].is-visible {
    transform: translateX(0);
}

[data-reveal="right"] {
    transform: translateX(40px);
}
[data-reveal="right"].is-visible {
    transform: translateX(0);
}

[data-reveal="scale"] {
    transform: scale(.92);
}
[data-reveal="scale"].is-visible {
    transform: scale(1);
}

/* Staggered child cards */
[data-reveal].is-visible .about-icon-card,
[data-reveal].is-visible .about-step,
[data-reveal].is-visible .about-audience__card {
    animation: neu-card-in .55s var(--ease-spring) both;
    animation-delay: var(--card-delay, var(--step-delay, 0s));
}

@keyframes neu-card-in {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ================================================================
   11. RESPONSIVE
   ================================================================ */

/* ── Large tablet ────────────────────────────────────────────── */
@media (max-width: 1140px) {
    .about-card-grid--5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Tablet ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .about-hero__title {
        font-size: 46px;
    }
    .about-heading {
        font-size: 36px;
    }
    .about-steps {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-card-grid--5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Small tablet / landscape phones ─────────────────────────── */
@media (max-width: 768px) {
    .about-hero {
        min-height: 440px;
    }
    .about-hero__inner {
        padding: 85px 20px 75px;
    }
    .about-hero__title {
        font-size: 38px;
    }
    .about-hero__subtitle {
        font-size: 17px;
    }
    .about-hero__dots {
        display: none;
    }
    .about-section {
        padding: 70px 0;
    }
    .about-container {
        padding: 0 20px;
    }
    .about-heading {
        font-size: 32px;
    }
    .about-lead {
        font-size: 16px;
    }
    .about-intro__grid {
        flex-direction: column;
        gap: 36px;
    }
    .about-intro__text,
    .about-intro__visual {
        flex: 1 1 100%;
    }
    .about-intro__text p {
        font-size: 17px;
    }
    .about-intro__decor {
        display: none;
    }
    .about-card-grid--5,
    .about-card-grid--3,
    .about-card-grid--2 {
        grid-template-columns: 1fr;
    }
    .about-steps {
        grid-template-columns: 1fr;
    }
    .about-audience__grid {
        grid-template-columns: 1fr;
    }
    .about-cta {
        padding: 80px 0;
        background-attachment: scroll;
    }
    .about-vision__text {
        font-size: 18px;
    }
    .about-hero__actions {
        flex-direction: column;
    }
    .about-cta__btns {
        flex-direction: column;
    }
    .about-blobs {
        display: none;
    }
    .about-geo-shapes {
        display: none;
    }
}

/* ── Small phones ────────────────────────────────────────────── */
@media (max-width: 480px) {
    .about-hero {
        min-height: 380px;
    }
    .about-hero__title {
        font-size: 32px;
    }
    .about-heading {
        font-size: 28px;
    }
    .about-icon-card {
        padding: 24px 18px 22px;
    }
    .about-audience__body {
        padding: 24px 22px 28px;
    }
    .about-step__body {
        padding: 20px 20px 22px;
    }
    .about-btn {
        padding: 14px 28px;
        font-size: 13px;
    }
    .about-video-overlay__wrap {
        width: 96vw;
    }
}