/* RESPONSIVE FIX: overflow-x:hidden was only set on body, not html.
   On mobile browsers the actual scrollable area is html's scrollWidth,
   so horizontal overflow from any element could still create stray
   blank space / rubber-band scroll beyond the page content. */
html{overflow-x:hidden;}

/* ==========================
   ABOUT PAGE
   Layers on top of ../home/style.css — reuses .primary-btn, .secondary-btn,
   .cards/.card, .text-blue. New selectors are namespaced "ab-".
========================== */

html, body { width:100%; max-width:100%; overflow-x:hidden; }
*, *::before, *::after { box-sizing:border-box; }
img, video, svg, canvas { max-width:100%; }
img { height:auto; }

.ab-eyebrow{
    display:inline-block;
    color: var(--tb-primary);
    background: var(--tb-primary-light);
    border:1px solid var(--border-color);
    padding:6px 16px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight:700;
    letter-spacing:.06em;
    margin-bottom:16px;
    text-transform: uppercase;
}
.ab-eyebrow-center{ display:inline-block; }

/* ---------- HERO ---------- */
.ab-hero{
    padding: var(--section-padding) var(--container-px);
    background: transparent;
}

.ab-hero-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:clamp(32px, 6vw, 64px);
    flex-wrap:wrap;
    max-width:1180px;
    margin:0 auto;
}

.ab-hero-content{ flex:1 1 420px; min-width:0; }

.ab-hero-content h1{
    font-size:clamp(30px, 5vw, 46px);
    line-height:1.2;
    color: var(--text-primary);
    font-weight:700;
    margin-bottom:20px;
}
.ab-hero-content h1 .text-blue{ color: var(--tb-primary); }

.ab-lead{
    font-size: var(--text-md);
    line-height:1.85;
    color: var(--text-secondary);
    margin-bottom:30px;
    max-width:540px;
}

.ab-hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:32px; }

.ab-tags{ display:flex; flex-wrap:wrap; gap:12px; }
.ab-tags span{
    display:inline-flex; align-items:center; gap:8px;
    background:#fff; border:1.5px solid var(--border-color); border-radius: var(--radius-pill);
    padding:8px 16px; font-size: var(--text-sm); font-weight:600; color: var(--text-secondary);
}
.ab-tags i{ color: var(--tb-primary); font-size:13px; }

.ab-hero-media{
    flex:1 1 380px; min-width:280px; max-width:520px;
    position:relative;
}
.ab-hero-media img{
    width:100%; display:block; border-radius: var(--radius-xl);
    box-shadow:0 30px 60px rgba(13,32,58,.16);
}

.ab-floating-card{
    position:absolute;
    display:flex; align-items:center; gap:12px;
    background: var(--tb-surface);
    padding: 12px 18px;
    border-radius: var(--radius-lg);
    box-shadow:0 16px 34px rgba(13,32,58,.16);
    animation:ab-float 3.4s ease-in-out infinite;
}
.ab-floating-card i{
    width:38px; height:38px; border-radius: var(--radius-md); flex:0 0 38px;
    background: var(--tb-primary-light); color: var(--tb-primary); font-size:15px;
    display:flex; align-items:center; justify-content:center;
}
.ab-floating-card div{ display:flex; flex-direction:column; line-height:1.3; }
.ab-floating-card strong{ font-size: var(--text-sm); color: var(--text-primary); }
.ab-floating-card span{ font-size: var(--text-xs); color: var(--text-muted); }

.ab-float-1{ top:-16px; left:-18px; }
.ab-float-2{ bottom:-16px; right:-18px; animation-delay:.6s; }

@keyframes ab-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }

@media(max-width:560px){
    .ab-floating-card{ padding:9px 12px; gap:9px; }
    .ab-floating-card strong{ font-size:13px; }
    .ab-floating-card span{ font-size:10px; }
    .ab-float-1{ top:-12px; left:-10px; }
    .ab-float-2{ bottom:-12px; right:0; }
}

/* ---------- STATS ---------- */
.ab-stats-wrap{ padding:0 var(--container-px); margin-top:-28px; position:relative; z-index:2; }
.ab-stats{
    max-width:1100px; margin:0 auto;
    display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
    background: var(--text-primary); border-radius: var(--radius-lg); padding:4px;
    box-shadow:0 24px 55px rgba(13,32,58,.2);
}
@media(max-width:768px){ .ab-stats{ grid-template-columns:repeat(2, 1fr); gap:1px; } }
@media(max-width:480px){ .ab-stats{ grid-template-columns:1fr; } }
.ab-stat{
    background:#16294a; border-radius: var(--radius-md); padding:24px 18px;
    display:flex; flex-direction:column; align-items:center; text-align:center;
}
.ab-stat strong{ font-size:clamp(24px, 3vw, 30px); font-weight:700; color: var(--text-inverse); }
.ab-stat span{ font-size: var(--text-xs); color:#9fb1cf; margin-top:6px; }

/* ---------- STORY ---------- */
.ab-story{ padding: var(--section-padding) var(--container-px); }
.ab-story-inner{
    max-width:1180px; margin:0 auto;
    display:flex; align-items:center; gap:clamp(32px, 6vw, 64px); flex-wrap:wrap;
}
.ab-story-media{ flex:1 1 420px; min-width:280px; }
.ab-story-media img{
    width:100%; display:block; border-radius: var(--radius-xl);
    box-shadow:0 24px 50px rgba(13,32,58,.12);
}
.ab-story-content{ flex:1 1 420px; min-width:0; }
.ab-story-content h2{
    font-size:clamp(26px, 4vw, 36px); color: var(--text-primary); margin-bottom:18px; line-height:1.25;
}
.ab-story-content p{
    color: var(--text-secondary); font-size: var(--text-md); line-height:1.85; margin-bottom:16px;
}
.ab-check-list{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ab-check-list li{ display:flex; align-items:flex-start; gap:10px; color: var(--text-secondary); font-size: var(--text-sm); font-weight:500; }
.ab-check-list i{ color: var(--text-success); margin-top:2px; }

/* ---------- VALUES (reuses .features / .cards / .card) ---------- */
.ab-values{ background:#f7f9fc; padding: var(--section-padding) var(--container-px); }
.ab-values h2{ color: var(--text-primary); text-align: left; max-width: 1100px; margin: 12px auto 48px; }
.ab-values .ab-eyebrow-center { display: block; max-width: 1100px; margin: 0 auto 16px; text-align: left; }
.ab-values .cards { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.ab-values .card{
    text-align:left;
    background: #fff;
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--tb-shadow-l1);
}
.ab-values .card i{ font-size: 28px; color: var(--tb-primary); margin-bottom: 12px; display: block; } /* Issue 8 fix */
.ab-values .card h3 { font-size: var(--text-lg); margin: 0 0 10px; color: var(--text-primary); }
.ab-values .card p{ font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }

/* ---------- CTA BANNER ---------- */
.ab-cta{
    padding: var(--section-padding) var(--container-px);
    background: var(--text-primary);
    position:relative;
    overflow:hidden;
}
.ab-cta::before{
    content:"";
    position:absolute; width:340px; height:340px; border-radius:50%;
    top:-180px; right:-100px; background:rgba(13,110,253,.18);
}
.ab-cta-inner{
    position:relative; z-index:1;
    max-width:640px; margin:0 auto; text-align:center;
}
.ab-cta-inner h2{ color: var(--text-inverse); font-size:clamp(26px, 4vw, 36px); margin-bottom:14px; }
.ab-cta-inner p{ color:#aebde0; font-size: var(--text-md); line-height:1.7; margin-bottom:30px; }
.ab-cta-buttons{ display:flex; justify-content:center; flex-wrap:wrap; gap:16px; }
.ab-ghost-btn{
    display:inline-flex; align-items:center; justify-content:center;
    background:transparent; color: var(--text-inverse); border:1.5px solid rgba(255,255,255,.28);
    text-decoration:none; padding:13px 26px; border-radius: var(--radius-pill);
    font-family:'Poppins',sans-serif; font-size: var(--text-sm); font-weight:600;
    transition:background .25s ease, border-color .25s ease;
}
.ab-ghost-btn:hover{ background:rgba(255,255,255,.08); border-color:#fff; }

/* ---------- SCROLL REVEAL ---------- */
.ab-reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.ab-reveal.ab-in-view{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
    .ab-reveal{ opacity:1; transform:none; transition:none; }
    .ab-floating-card{ animation:none; }
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:992px){
    .ab-hero-inner{ flex-direction:column; text-align:center; }
    .ab-lead{ margin-left:auto; margin-right:auto; }
    .ab-hero-cta, .ab-tags{ justify-content:center; }
    .ab-story-inner{ flex-direction:column; }
    .ab-story-content{ text-align:left; }
}

@media(max-width:600px){
    .ab-hero-media{ margin-top:20px; }
    .ab-hero, .ab-story, .ab-cta { padding-inline:16px; }
    .ab-hero-cta .primary-btn, .ab-hero-cta .ab-ghost-btn, .ab-cta-buttons a { width:100%; }
    .ab-stats-wrap { padding-inline:16px; }
    .ab-hero-content,
    .ab-hero-media,
    .ab-story-media,
    .ab-story-content { flex:1 1 auto; min-width:0; width:100%; max-width:100%; }
}