/* ═══════════════════════════════════════════════
   CSS VARIABLES — fonts & sizes matched to home.css
═══════════════════════════════════════════════ */
:root {
    --black:         #000000;
    --black-1:       #080808;
    --black-3:       #111111;
    --black-4:       #161616;
    --black-5:       #1a1a1a;
    --accent:        #ff6b35;
    --accent-glow:   rgba(255,107,53,0.25);
    --accent-faint:  rgba(255,107,53,0.08);
    --accent-border: rgba(255,107,53,0.15);
    --accent-alt:    #8b5cf6;
    --white:         #ffffff;
    --white-dim:     rgba(255,255,255,0.65);
    --white-muted:   rgba(255,255,255,0.42);
    --white-faint:   rgba(255,255,255,0.06);
    --border:        rgba(255,255,255,0.07);
    --border-hover:  rgba(255,255,255,0.18);

    /* ── Fonts — identical to home.css ── */
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body:    'Plus Jakarta Sans', sans-serif;
    --font-tech:    'Orbitron', sans-serif;
    --font-tag:     'Rajdhani', sans-serif;

    --radius-sm:   8px;
    --radius-md:   14px;
    --radius-lg:   20px;
    --radius-xl:   24px;
    --radius-full: 50px;
    --section-pad: 8rem 5%;
    --max-width:   1300px;
    --transition:  0.3s ease;

    --title-hero: clamp(2rem, 5vw, 4rem);
    --title-card: 1.2rem;
    --title-xl:   clamp(2rem, 4vw, 3rem);
    --title-lg:   clamp(1.8rem, 3.2vw, 2.6rem);
    --title-md:   clamp(1.1rem, 1.8vw, 1.5rem);
    --title-sm:   clamp(0.95rem, 1.4vw, 1.15rem);
    --body-lg:    clamp(0.78rem, 2vw, 0.85rem);
    --body-md:    0.88rem;
    --body-sm:    0.85rem;
    --body-color: rgba(255,255,255,0.42);
    --body-lh:    1.75;
}

/* ═══════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
    font-family: var(--font-body);
    background: var(--black);
    color: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before {
    content:''; position:fixed; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity:0.025; pointer-events:none; z-index:9999;
}

/* ═══════════════════════════════════════════════
   SHARED UTILITIES
═══════════════════════════════════════════════ */
section { position:relative; z-index:10; }
.container { max-width:var(--max-width); margin:0 auto; }

.divider {
    width:100%; height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,107,53,.2),transparent);
}

.section-tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    padding: 0.35rem 1rem;
    background: var(--accent-faint);
    border: 1px solid rgba(255,107,53,.2);
    border-radius: var(--radius-full);
    margin-bottom: 1rem;
}

.section-title {
    font-family: var(--font-display);
    font-size: var(--title-hero);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    color: var(--white);
}

.section-title span {
    background: linear-gradient(135deg,var(--accent) 0%,#ff9f6b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header { text-align:center; max-width:680px; margin:0 auto 5rem; }
.section-header p {
    font-family: var(--font-body);
    font-size: var(--body-lg);
    color: var(--body-color);
    line-height: var(--body-lh);
    margin-top: 1.2rem;
    text-align: justify;
}
.section-header .section-title { margin-top:1rem; }

.icon-box {
    display:flex; align-items:center; justify-content:center;
    border-radius:14px; flex-shrink:0;
    background:var(--accent-faint); border:1px solid var(--accent-border);
}
.icon-box svg { stroke:var(--accent); stroke-width:2; fill:none; }
.mission-card--vision .icon-box svg { stroke:var(--accent-alt); }
.icon-box--sm  { width:36px;  height:36px; }
.icon-box--md  { width:50px;  height:50px; }
.icon-box--lg  { width:60px;  height:60px; border-radius:18px; }
.icon-box--xl  { width:64px;  height:64px; border-radius:18px; }
.icon-box--sm svg { width:16px; height:16px; }
.icon-box--md svg { width:22px; height:22px; }
.icon-box--lg svg { width:26px; height:26px; }
.icon-box--xl svg { width:28px; height:28px; }

.card-glow {
    position:absolute; border-radius:50%; filter:blur(60px);
    pointer-events:none; background:rgba(255,107,53,.12);
}

.btn {
    border:none; border-radius:var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor:pointer; transition:all var(--transition);
    padding: 0.8rem 1.8rem;
    text-decoration:none; display:inline-block;
}
.btn--primary {
    background:var(--accent); color:var(--white);
    box-shadow:0 4px 30px var(--accent-glow);
}
.btn--primary:hover { transform:translateY(-3px); box-shadow:0 8px 40px rgba(255,107,53,.5); background:#ff7d4a; }
.btn--ghost {
    background:transparent; color:var(--white);
    border:1px solid rgba(255,255,255,.2);
}
.btn--ghost:hover { background:var(--white-faint); border-color:rgba(255,255,255,.4); transform:translateY(-3px); }
.btn--lg { font-size:1rem; padding:1.1rem 2.8rem; }

.two-col { display:grid; grid-template-columns:1fr 1fr; align-items:center; }

/* ═══════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════ */
@keyframes pulseDot   { 0%,100%{opacity:.12;transform:scale(1)} 50%{opacity:.4;transform:scale(1.6)} }
@keyframes fadeLeft   { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeRight  { from{opacity:0;transform:translateX(30px)}  to{opacity:1;transform:translateX(0)} }
@keyframes floatBadge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes ringPulse  { 0%,100%{opacity:.5} 50%{opacity:.15} }

.reveal       { opacity:0; transform:translateY(30px);  transition:opacity .7s ease,transform .7s ease; }
.reveal-left  { opacity:0; transform:translateX(-30px); transition:opacity .7s ease,transform .7s ease; }
.reveal-right { opacity:0; transform:translateX(30px);  transition:opacity .7s ease,transform .7s ease; }
.reveal.visible,.reveal-left.visible,.reveal-right.visible { opacity:1; transform:translate(0); }

/* ═══════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════ */
nav {
    position:fixed; top:0; width:100%;
    display:flex; justify-content:space-between; align-items:center;
    padding:1.2rem 5%; z-index:1000;
    background:rgba(0,0,0,.8); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
}
.logo {
    font-family: var(--font-display);
    font-size:1.45rem; font-weight:800;
    display:flex; align-items:center; gap:.6rem;
    text-decoration:none; color:var(--white); letter-spacing:-.5px;
}
.logo-img     { height:38px; width:auto; object-fit:contain; }
.logo-img--sm { height:30px; }
.logo-text { display:flex; flex-direction:column; line-height:1; }
.logo-text__main {
    font-family: var(--font-tech);
    font-size:1.1rem; font-weight:800; letter-spacing:2px; color:var(--white);
}
.logo-text__sub {
    font-family: var(--font-tech);
    font-size:.48rem; font-weight:600; letter-spacing:3px;
    color:var(--accent); text-transform:uppercase; margin-top:2px;
}
.nav-links { display:flex; gap:.4rem; list-style:none; }
.nav-links a {
    font-family: var(--font-body);
    color:var(--white-dim); text-decoration:none;
    font-size: 0.88rem; font-weight:500;
    padding:.55rem 1.1rem; border-radius:var(--radius-sm); transition:all var(--transition);
}
.nav-links a:hover  { color:var(--white); background:var(--white-faint); }
.nav-links a.active { color:var(--accent); background:var(--white-faint); }
.nav-cta {
    padding:.6rem 1.8rem; background:var(--accent); color:var(--white);
    border:none; border-radius:var(--radius-full); cursor:pointer;
    font-family: var(--font-body);
    font-weight:600; font-size:0.85rem;
    transition:all var(--transition); box-shadow:0 0 20px var(--accent-glow);
}
.nav-cta:hover { background:#ff7d4a; transform:translateY(-2px); }

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.hero {
    position:relative; min-height:100vh;
    display:flex; align-items:center;
    padding:120px 5% 80px; overflow:hidden;
}
.hero-bg { position:absolute; inset:0; overflow:hidden; }
.hero-bg__gradient {
    position:absolute; inset:0;
    background:
        radial-gradient(ellipse 60% 60% at 80% 20%,rgba(255,107,53,.1) 0%,transparent 60%),
        radial-gradient(ellipse 40% 50% at 10% 80%,rgba(59,130,246,.08) 0%,transparent 60%),
        radial-gradient(ellipse 30% 40% at 50% 50%,rgba(139,92,246,.05) 0%,transparent 60%);
}
.hero-bg__grid {
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
    background-size:50px 50px;
    mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 20%,transparent 100%);
}
.circuit-dot { position:absolute; border-radius:50%; background:var(--accent); animation:pulseDot 3s ease-in-out infinite; }

.hero-inner {
    position:relative; z-index:5;
    max-width:var(--max-width); width:100%; margin:0 auto;
    display:grid; grid-template-columns:1fr 1.4fr; gap:2rem; align-items:center;
}
.hero-content { animation:fadeLeft 1s cubic-bezier(.22,1,.36,1) .2s both; }

.hero-eyebrow { display:flex; align-items:center; gap:1.2rem; margin-bottom:1.6rem; }
.hero-eyebrow__line { width:40px; height:1px; background:var(--accent); flex-shrink:0; }
.hero-eyebrow__text {
    font-family: var(--font-body);
    font-size: 0.58rem;
    color: var(--accent);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 700;
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--title-hero);
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 1.4rem;
    color: var(--white);
}
.hero-title .accent {
    background: linear-gradient(135deg,var(--accent) 0%,#ff9f6b 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-title .outline { -webkit-text-stroke:1.5px rgba(255,255,255,.18); color:transparent; }

.hero-body {
    font-family: var(--font-body);
    font-size: var(--body-lg);
    color: var(--body-color);
    line-height: var(--body-lh);
    margin-bottom: 2.2rem;
    max-width: 450px;
    text-align: justify;
}

.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; }

.hero-collage {
    animation:fadeRight 1.1s cubic-bezier(.22,1,.36,1) .4s both;
    position:relative; width:600px; height:520px;
    flex-shrink:0; align-self:center;
    margin-left:auto; margin-right:-2%;
}
.collage-glow {
    position:absolute; inset:0;
    background:radial-gradient(ellipse 65% 65% at 50% 50%,rgba(255,107,53,.05) 0%,transparent 70%);
    pointer-events:none; z-index:0;
}
.photo-card { transition:transform .35s cubic-bezier(.175,.885,.32,1.275),box-shadow .3s ease; }

.collage-stat {
    position:absolute; background:rgba(8,8,8,.92); backdrop-filter:blur(16px);
    border:1px solid rgba(255,107,53,.28); border-radius:12px;
    padding:9px 13px; z-index:50;
    animation:floatBadge 3s ease-in-out infinite;
    box-shadow:0 8px 24px rgba(0,0,0,.7);
    width: fit-content;
    white-space: nowrap;
}
.collage-stat__num {
    font-family: var(--font-display);
    font-size: 1.1rem; font-weight:800; line-height:1; color:var(--white);
}
.collage-stat__num em { color:var(--accent); font-style:normal; }
.collage-stat__label {
    font-family: var(--font-tech);
    font-size: 0.55rem;
    color: rgba(255,255,255,.42);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    margin-top: 2px;
}
.cs1 { right:-18px; top:40px; animation-delay:0s; }
.cs2 { left:-18px; bottom:30px; animation-delay:1.5s; }

/* ═══════════════════════════════════════════════
   WHO WE ARE
═══════════════════════════════════════════════ */
.who { padding:var(--section-pad); background:var(--black-1); }
.who .two-col { gap:7rem; }

.who-body {
    font-family: var(--font-body);
    font-size: var(--body-md);
    color: var(--body-color);
    line-height: var(--body-lh);
    margin-top: 1.8rem;
    text-align: justify;
}
.who-body p+p { margin-top:1.2rem; }

.who-highlights { margin-top:2.5rem; display:flex; flex-direction:column; gap:1rem; }
.who-highlight {
    display:flex; align-items:flex-start; gap:1rem;
    padding:1.2rem 1.5rem; background:var(--black-3);
    border:1px solid var(--border); border-radius:12px; transition:all var(--transition);
}
.who-highlight:hover { border-color:rgba(255,107,53,.2); transform:translateX(6px); }

.who-highlight__text h4 {
    font-family: var(--font-display);
    font-size: var(--title-card);
    font-weight: 700;
    color: var(--white);
    margin-bottom: .25rem;
}
.who-highlight__text p {
    font-family: var(--font-body);
    font-size: var(--body-md);
    color: rgba(255,255,255,.35);
    line-height: var(--body-lh);
    text-align: justify;
}

.who-right { display:flex; flex-direction:column; gap:1.5rem; }
.who-card {
    padding:2.5rem; border-radius:var(--radius-xl);
    position:relative; overflow:hidden;
    background:var(--black-3); border:1px solid var(--border); transition:all .4s;
}
.who-card:hover { border-color:rgba(255,107,53,.15); transform:translateY(-6px); box-shadow:0 24px 50px rgba(0,0,0,.6); }
.who-card .card-glow { top:-40px; right:-40px; width:160px; height:160px; }

.who-card h3 {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 800;
    color: var(--white);
    margin-bottom: 1rem;
    letter-spacing: -.5px;
}
.who-card p {
    font-family: var(--font-body);
    font-size: var(--body-md);
    color: var(--body-color);
    line-height: var(--body-lh);
    text-align: justify;
}

.metrics-row { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.metric-mini {
    text-align:center; padding:1.5rem 1rem; background:var(--black-3);
    border:1px solid var(--border); border-radius:16px; transition:all var(--transition);
}
.metric-mini:hover { border-color:rgba(255,107,53,.2); background:var(--black-4); }

.metric-mini__num {
    font-family: var(--font-display);
    font-size: 1.8rem; font-weight:800; letter-spacing:-1px; color:var(--white);
}
.metric-mini__num em { color:var(--accent); font-style:normal; }

.metric-mini__label {
    font-family: var(--font-body);
    font-size: 0.72rem; color:rgba(255,255,255,.3);
    text-transform:uppercase; letter-spacing:1.5px;
    font-weight:600; margin-top:.3rem;
}

/* ═══════════════════════════════════════════════
   OUR STORY
═══════════════════════════════════════════════ */
.story { padding:var(--section-pad); }
.story-timeline { display:flex; flex-direction:column; max-width:860px; margin:0 auto; }
.story-item { display:flex; gap:2.5rem; padding-bottom:3rem; position:relative; }
.story-item:not(:last-child)::before {
    content:''; position:absolute; left:27px; top:56px; bottom:0;
    width:1px; background:linear-gradient(to bottom,rgba(255,107,53,.35),transparent);
}
.story-dot {
    width:56px; height:56px; border-radius:50%; flex-shrink:0;
    background:var(--black-3); border:1px solid rgba(255,107,53,.25);
    display:flex; align-items:center; justify-content:center;
    position:relative; z-index:1; transition:all var(--transition);
}
.story-dot.active { background:rgba(255,107,53,.1); border-color:var(--accent); box-shadow:0 0 24px rgba(255,107,53,.2); }
.story-dot svg { width:20px; height:20px; stroke:var(--accent); stroke-width:2; fill:none; }
.story-content { padding-top:.8rem; flex:1; }

.story-year {
    font-family: var(--font-tech);
    font-size: 0.58rem;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: .5rem;
}
.story-title {
    font-family: var(--font-display);
    font-size: var(--title-card);
    font-weight: 700;
    color: var(--white);
    margin-bottom: .7rem;
}
.story-text {
    font-family: var(--font-body);
    font-size: var(--body-md);
    color: var(--body-color);
    line-height: var(--body-lh);
    text-align: justify;
}

.story-pull {
    padding:2.5rem 3rem; max-width:860px; margin:4rem auto 0;
    background:rgba(255,107,53,.04); border:1px solid rgba(255,107,53,.12);
    border-radius:var(--radius-lg); text-align:center; position:relative;
}
.story-pull::before {
    content:'"';
    font-family: var(--font-display);
    font-size:8rem; color:rgba(255,107,53,.07);
    position:absolute; top:-20px; left:2rem; line-height:1;
}
.story-pull p {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(255,255,255,.72);
    line-height: 1.65;
    font-style: italic;
    position:relative; z-index:1; text-align:center;
}
.story-pull cite {
    display:block; margin-top:1rem;
    font-family: var(--font-tech);
    font-size: 0.58rem;
    color: var(--accent);
    font-style:normal; letter-spacing:1.5px;
    text-transform:uppercase; font-weight:700;
}

/* ═══════════════════════════════════════════════
   MISSION & VISION
═══════════════════════════════════════════════ */
.mission { padding:var(--section-pad); background:var(--black-1); }
.mission-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.mission-card {
    padding:3rem; border-radius:var(--radius-xl);
    border:1px solid var(--accent-border); background:var(--black-3);
    position:relative; overflow:hidden; transition:all .4s;
    display:flex; flex-direction:column; height:100%;
}
.mission-card--vision { border-color:rgba(139,92,246,.15); }
.mission-card:hover { transform:translateY(-8px); box-shadow:0 30px 60px rgba(0,0,0,.6); }
.mission-card .card-glow { top:-60px; right:-60px; width:200px; height:200px; filter:blur(80px); background:rgba(255,107,53,.12); }
.mission-card--vision .card-glow { background:rgba(139,92,246,.18); }
.mission-card__content { flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding-top:2.5rem; }

.mission-card__tag {
    font-family: var(--font-tech);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .8rem;
}
.mission-card--vision .mission-card__tag { color:var(--accent-alt); }

.mission-card h3 {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 800;
    color: var(--white);
    margin-bottom: 1.3rem;
    letter-spacing: -.5px;
}
.mission-card p {
    font-family: var(--font-body);
    font-size: var(--body-md);
    color: var(--body-color);
    line-height: var(--body-lh);
    text-align: justify;
}

/* ═══════════════════════════════════════════════
   CORE VALUES
═══════════════════════════════════════════════ */
.values { padding:var(--section-pad); }
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; max-width:var(--max-width); margin:0 auto; }
.value-card {
    padding:2.4rem 2rem; background:var(--black-3);
    border:1px solid var(--border); border-radius:var(--radius-lg);
    position:relative; overflow:hidden;
    transition:all .4s cubic-bezier(.175,.885,.32,1.275);
}
.value-card::after {
    content:''; position:absolute; top:0; left:0; width:100%; height:2px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
    opacity:0; transition:opacity .4s;
}
.value-card:hover { transform:translateY(-10px); border-color:var(--border-hover); background:var(--black-4); box-shadow:0 24px 50px rgba(0,0,0,.6); }
.value-card:hover::after { opacity:1; }

.value-card__num {
    font-family: var(--font-tech);
    font-size:4rem; font-weight:800;
    color:rgba(255,255,255,.04);
    line-height:1; position:absolute; top:1rem; right:1.2rem; letter-spacing:-2px;
}
.value-card h4 {
    font-family: var(--font-display);
    font-size: var(--title-card);
    font-weight: 700;
    color: var(--white);
    margin-bottom: .7rem;
}
.value-card p {
    font-family: var(--font-body);
    font-size: var(--body-md);
    color: var(--body-color);
    line-height: var(--body-lh);
    text-align: justify;
}
.value-card .icon-box { margin-bottom:1.6rem; }

/* ═══════════════════════════════════════════════
   WHAT SETS US APART
═══════════════════════════════════════════════ */
.different { padding:var(--section-pad); background:var(--black-1); }
.different .two-col { gap:5rem; align-items:start; }

.different-body {
    font-family: var(--font-body);
    font-size: var(--body-md);
    color: var(--body-color);
    line-height: var(--body-lh);
    margin-top: 1.8rem;
    max-width: 460px;
    text-align: justify;
}

.diff-features { margin-top:2.5rem; display:flex; flex-direction:column; gap:1.2rem; }
.diff-feature {
    display:flex; align-items:flex-start; gap:1.2rem;
    padding:1.4rem 1.6rem; background:var(--black-3);
    border:1px solid var(--border); border-radius:var(--radius-md);
    position:relative; overflow:hidden;
    transition:border-color .3s,background .3s,transform .3s;
}
.diff-feature::before {
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:3px; background:var(--accent); border-radius:0 2px 2px 0;
    opacity:0; transition:opacity .3s;
}
.diff-feature:hover { border-color:rgba(255,107,53,.22); background:var(--black-4); transform:translateX(6px); }
.diff-feature:hover::before { opacity:1; }
.diff-feature .icon-box {
    width:40px; height:40px; border-radius:10px; flex-shrink:0;
    background:rgba(255,107,53,.08); border:1px solid rgba(255,107,53,.18);
    display:flex; align-items:center; justify-content:center; transition:background .3s;
}
.diff-feature:hover .icon-box { background:rgba(255,107,53,.16); }
.diff-feature .icon-box svg { width:16px; height:16px; stroke:var(--accent); stroke-width:2; fill:none; }
.diff-feature__text { display:flex; flex-direction:column; gap:.3rem; }

.diff-feature__text h4 {
    font-family: var(--font-display);
    font-size: var(--title-card);
    font-weight: 700;
    color: var(--white);
    margin: 0;
}
.diff-feature__text p {
    font-family: var(--font-body);
    font-size: var(--body-md);
    color: rgba(255,255,255,.38);
    line-height: var(--body-lh);
    text-align: justify;
    margin: 0;
}

.metric-cards { display:flex; flex-direction:column; gap:1.2rem; position:sticky; top:6rem; }
.metric-card {
    display:flex; align-items:center; gap:2rem;
    padding:1.8rem 2.2rem; background:var(--black-3);
    border:1px solid var(--border); border-radius:var(--radius-lg);
    position:relative; overflow:hidden;
    transition:border-color .35s,background .35s,transform .35s,box-shadow .35s;
}
.metric-card::before {
    content:''; position:absolute; top:0; left:0; width:3px; height:100%;
    background:var(--accent); border-radius:3px 0 0 3px; opacity:0; transition:opacity .3s;
}
.metric-card::after {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
    opacity:0; transition:opacity .4s;
}
.metric-card:hover { border-color:rgba(255,107,53,.25); background:var(--black-4); transform:translateX(-6px); box-shadow:6px 0 40px rgba(255,107,53,.06); }
.metric-card:hover::before,.metric-card:hover::after { opacity:1; }

.metric-card__num {
    font-family: var(--font-display);
    font-size: clamp(2.6rem,3.5vw,3.4rem);
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1; white-space:nowrap;
    color: var(--white); flex-shrink:0; min-width:130px;
}
.metric-card__num span { color:var(--accent); }
.metric-card__divider { width:1px; align-self:stretch; background:rgba(255,255,255,.07); flex-shrink:0; }
.metric-card__info { display:flex; flex-direction:column; gap:.35rem; flex:1; }

.metric-card__label {
    font-family: var(--font-display);
    font-size: var(--title-card);
    font-weight: 700;
    color: var(--white);
    letter-spacing: -.2px;
}
.metric-card__sub {
    font-family: var(--font-body);
    font-size: var(--body-md);
    color: rgba(255,255,255,.35);
    line-height: var(--body-lh);
    text-align: justify;
}

/* ═══════════════════════════════════════════════
   EXPERTISE
═══════════════════════════════════════════════ */
.expertise { padding:var(--section-pad); }
.expertise-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.expertise-card {
    padding:2.8rem 2.5rem; background:var(--black-3);
    border:1px solid var(--border); border-radius:var(--radius-xl);
    display:flex; gap:2rem; align-items:flex-start;
    position:relative; overflow:hidden; transition:all .4s;
}
.expertise-card::before {
    content:''; position:absolute; inset:0; border-radius:var(--radius-xl);
    background:linear-gradient(135deg,rgba(255,107,53,.03) 0%,transparent 60%);
    opacity:0; transition:opacity .4s;
}
.expertise-card:hover { transform:translateY(-8px); border-color:rgba(255,107,53,.18); box-shadow:0 28px 56px rgba(0,0,0,.6); }
.expertise-card:hover::before { opacity:1; }

.expertise-card__body h3 {
    font-family: var(--font-display);
    font-size: var(--title-card);
    font-weight: 700;
    color: var(--white);
    margin-bottom: .8rem;
}
.expertise-card__body p {
    font-family: var(--font-body);
    font-size: var(--body-md);
    color: var(--body-color);
    line-height: var(--body-lh);
    text-align: justify;
}

.expertise-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }

.expertise-tag {
    font-family: var(--font-tag);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255,107,53,.8);
    background: rgba(255,107,53,.06);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-full);
    padding: .28rem .85rem;
}

/* ═══════════════════════════════════════════════
   TEAM
═══════════════════════════════════════════════ */
.team { padding:var(--section-pad); background:var(--black-1); }
.team .section-header { max-width:560px; }
.team-intro {
    max-width:var(--max-width); margin:0 auto 3.5rem;
    padding:2.5rem 3rem; background:rgba(255,107,53,.04);
    border:1px solid rgba(255,107,53,.12); border-radius:var(--radius-lg);
    display:flex; gap:2rem; align-items:center;
}
.team-intro p {
    font-family: var(--font-body);
    font-size: var(--body-md);
    color: rgba(255,255,255,.5);
    line-height: var(--body-lh);
    text-align: justify;
}
.team-intro strong { color:rgba(255,255,255,.8); font-weight:600; }

.team-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1.2rem; max-width:var(--max-width); margin:0 auto; }
.team-card {
    background:var(--black-3); border:1px solid var(--border);
    border-radius:16px; overflow:hidden;
    transition:all .4s cubic-bezier(.175,.885,.32,1.275);
}
.team-card:hover { transform:translateY(-8px); border-color:var(--border-hover); box-shadow:0 20px 40px rgba(0,0,0,.7),0 0 24px rgba(255,107,53,.06); }

.team-avatar {
    height:220px; position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    border-radius:16px 16px 0 0; padding:0;
}
.team-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: 0;
    display: block;
}
.avatar-bg { position:absolute; inset:0; }
.avatar-initials {
    position:relative; z-index:2;
    font-family: var(--font-tech);
    font-size:2rem; font-weight:800;
    color:rgba(255,255,255,.12); letter-spacing:-1px;
}
.avatar-ring { position:absolute; border-radius:50%; border:1px solid; animation:ringPulse 4s ease-in-out infinite; }

.team-info { padding:1.1rem 1.2rem 1.4rem; }

.team-info__name {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: .2rem;
}
.team-info__role {
    font-family: var(--font-tech);
    font-size: 0.58rem;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: .75rem;
}
.team-info__bio {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: rgba(255,255,255,.35);
    line-height: 1.65;
    margin-bottom: 1rem;
    text-align: justify;
}
.team-socials { display:flex; gap:.4rem; }
.team-social {
    width:28px; height:28px; border-radius:7px;
    background:var(--black-5); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.35); transition:all var(--transition); text-decoration:none;
}
.team-social:hover { background:var(--accent); border-color:var(--accent); color:var(--white); transform:translateY(-2px); }
.team-social svg { width:12px; height:12px; }

/* ═══════════════════════════════════════════════
   CTA
═══════════════════════════════════════════════ */
.cta { padding:var(--section-pad); text-align:center; position:relative; overflow:hidden; }
.cta-orb { position:absolute; border-radius:50%; filter:blur(160px); pointer-events:none; }
.cta-orb--1 { width:550px; height:550px; background:var(--accent); opacity:.07; top:-200px; left:50%; transform:translateX(-50%); }
.cta-orb--2 { width:300px; height:300px; background:#3b82f6; opacity:.06; bottom:-100px; right:10%; }
.cta-content { position:relative; z-index:5; max-width:750px; margin:0 auto; }

.cta-content h2 {
    font-family: var(--font-display);
    font-size: var(--title-hero);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--white);
}
.cta-content h2 em { font-style:normal; color:var(--accent); }

.cta-content p {
    font-family: var(--font-body);
    font-size: var(--body-lg);
    color: var(--body-color);
    line-height: var(--body-lh);
    max-width:520px; margin:0 auto 2.8rem; text-align:justify;
}
.cta-content .section-tag { margin-bottom:1.5rem; }
.cta-buttons { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }

.cta-note {
    margin-top:1.5rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: rgba(255,255,255,.22);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — 1200px
═══════════════════════════════════════════════ */
@media (max-width:1200px) {
    .team-grid { grid-template-columns:repeat(4,1fr); }
    .hero-collage { transform:scale(.88); transform-origin:center right; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — 1100px
═══════════════════════════════════════════════ */
@media (max-width:1100px) {
    .team-grid { grid-template-columns:repeat(3,1fr); }
    .expertise-grid,.mission-grid { grid-template-columns:1fr; }
    .values-grid { grid-template-columns:repeat(2,1fr); }
    .hero-collage { transform:scale(.78); transform-origin:center right; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — 1024px
═══════════════════════════════════════════════ */
@media (max-width:1024px) {
    .hero-title { font-size:clamp(1.9rem,5vw,3.2rem); }
    .cta-content h2 { font-size:clamp(1.9rem,5vw,3.2rem); }
    .section-title { font-size:clamp(1.9rem,5vw,3.2rem); }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — 900px
═══════════════════════════════════════════════ */
@media (max-width:900px) {
    :root { --section-pad: 5rem 5%; }
    .hero-inner { grid-template-columns:1fr; gap:2.5rem; }
    .who .two-col,.different .two-col { grid-template-columns:1fr; gap:4rem; }
    .hero-collage {
        width: 100%;
        height: 380px;
        transform: none;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        overflow: visible;
        position: relative;
    }
    .hero-collage > * { width:100%; }
    .cs1 { right: 12px; top: 12px; left: auto; width: fit-content; }
    .cs2 { left: 12px; bottom: 12px; right: auto; width: fit-content; }
    .team-grid { grid-template-columns:repeat(2,1fr); }
    .metric-cards { position:static; }
    .metric-card:hover { transform:translateY(-4px); }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — 768px
═══════════════════════════════════════════════ */
@media (max-width:768px) {
    :root { --section-pad: 4rem 5%; }
    .hero { padding: 100px 5% 3rem; min-height: auto; }
    .section-header { margin-bottom: 3rem; }
    .who .two-col { gap: 2.5rem; }
    .different .two-col { gap: 2.5rem; }
    .hero-title { font-size:clamp(1.8rem,7vw,2.8rem); letter-spacing:-.5px; }
    .section-title { font-size:clamp(1.8rem,6vw,2.8rem); letter-spacing:-.5px; }
    .cta-content h2 { font-size:clamp(1.8rem,6vw,2.8rem); }

    .hero-body { font-size:0.8rem; }
    .section-header p { font-size:0.8rem; }
    .who-body { font-size:0.8rem; }
    .who-card p { font-size:0.8rem; }
    .different-body { font-size:0.8rem; }
    .story-text { font-size:0.8rem; }
    .mission-card p { font-size:0.8rem; }
    .value-card p { font-size:0.8rem; }
    .diff-feature__text p { font-size:0.8rem; }
    .expertise-card__body p { font-size:0.8rem; }
    .metric-card__sub { font-size:0.8rem; }
    .team-intro p { font-size:0.8rem; }
    .cta-content p { font-size:0.8rem; }

    .btn { padding:0.75rem 1.4rem; font-size:0.82rem; }
    .btn--lg { font-size:0.85rem; padding:0.9rem 2rem; }

    .section-tag { font-size:0.68rem; letter-spacing:2.5px; padding:0.3rem 0.85rem; }

    .who-highlight__text h4 { font-size:1rem; }
    .story-title { font-size:1rem; }
    .value-card h4 { font-size:1rem; }
    .diff-feature__text h4 { font-size:1rem; }
    .expertise-card__body h3 { font-size:1rem; }
    .who-card h3 { font-size:1.1rem; }
    .mission-card h3 { font-size:1.1rem; }
    .metric-card__label { font-size:1rem; }

    .team-info__name { font-size:0.82rem; }
    .team-info__bio { font-size:0.72rem; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — 600px
═══════════════════════════════════════════════ */
@media (max-width:600px) {
    :root { --section-pad: 3rem 4%; }
    .hero { padding: 90px 4% 2.5rem; min-height: auto; }
    .hero-inner { gap: 2rem; }
    .section-header { margin-bottom: 2.2rem; }
    .story-pull { padding: 1.8rem 1.5rem; margin-top: 2.5rem; }
    .story-item { gap: 1.5rem; padding-bottom: 2rem; }
    .who-highlights { margin-top: 1.8rem; }
    .who-body { margin-top: 1.2rem; }
    .diff-features { margin-top: 1.8rem; }
    .team-intro { padding: 1.5rem; margin-bottom: 2rem; }
    .values-grid { gap: 1rem; }
    .metric-cards { gap: 0.8rem; }
    .hero-btns { gap: 0.7rem; }
    .hero-collage {
        width: 100%;
        height: 300px;
        transform: none;
        margin: 0 auto;
    }
    .hero-collage > * { width: 100%; }
    .cs1 { right: 12px; top: 12px; left: auto; width: fit-content; }
    .cs2 { left: 12px; bottom: 12px; right: auto; width: fit-content; }
    .nav-links { display:none; }
    .team-grid,.values-grid,.mission-grid { grid-template-columns:1fr; }
    .metrics-row { grid-template-columns:1fr 1fr; }
    .team-intro { flex-direction:column; text-align:center; }
    .team-intro p { text-align:center; }

    /* ── PORTRAIT PHOTO FIX ── */
    .team-avatar { height: 360px; }

    .hero-title { font-size:clamp(1.6rem,8vw,2.2rem); letter-spacing:-.5px; }
    .section-title { font-size:clamp(1.6rem,7vw,2.2rem); letter-spacing:-.5px; }
    .cta-content h2 { font-size:clamp(1.6rem,7vw,2.2rem); }

    .hero-body { font-size:0.78rem; }
    .section-header p { font-size:0.78rem; }
    .who-body { font-size:0.78rem; }
    .story-text { font-size:0.77rem; }
    .mission-card p { font-size:0.77rem; }
    .value-card p { font-size:0.77rem; }
    .diff-feature__text p { font-size:0.77rem; }
    .expertise-card__body p { font-size:0.77rem; }
    .cta-content p { font-size:0.78rem; }

    .expertise-grid { grid-template-columns:1fr; }
    .story-pull p { font-size:0.92rem; }
    .metric-card__num { font-size:clamp(2rem,6vw,2.8rem); }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — 520px
═══════════════════════════════════════════════ */
@media (max-width:520px) {
    .metric-card { flex-direction:column; align-items:flex-start; gap:1rem; padding:1.4rem 1.6rem; }
    .metric-card__divider { display:none; }
    .metric-card__num { min-width:unset; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — 360px
═══════════════════════════════════════════════ */
@media (max-width:360px) {
    .hero-title { font-size:1.5rem; }
    .section-title { font-size:1.5rem; }
    .cta-content h2 { font-size:1.5rem; }
    .team-grid { grid-template-columns:1fr; }
    /* Keep tall avatar even at smallest screens */
    .team-avatar { height: 320px; }
}

/* ═══════════════════════════════════════════════
   SAFE AREA (notched phones)
═══════════════════════════════════════════════ */
@supports (padding: max(0px)) {
    .hero,
    .who,
    .story,
    .mission,
    .values,
    .different,
    .expertise,
    .team,
    .cta {
        padding-left: max(5%, env(safe-area-inset-left));
        padding-right: max(5%, env(safe-area-inset-right));
    }
}