:root {
        --p: #14275c;
        --pd: #0d1b42;
        --pl: #2f57a8;
        --pp: #e9eefa;
        --ppp: #f4f7fd;
        --acc: #3a64bf;
        --acc2: #88a8e0;
        --ora: #f2a307;
        --grn: #10b981;
        --ylw: #f7b500;
        --txt: #0f0e1a;
        --sub: #52525b;
        --bdr: #e4e4e7;
        --wht: #fff;
        --bg: #ffffff;
        --ig: linear-gradient(135deg, #3a64bf 0%, #14275c 100%);
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        font-family: "Outfit", sans-serif;
        color: var(--txt);
        background: #fff;
        overflow-x: hidden;
        font-size: 15px;
        line-height: 1.5;
      }
      h1,
      h2,
      h3,
      h4 {
        font-family: "Bricolage Grotesque", sans-serif;
        line-height: 1.15;
        letter-spacing: -0.03em;
      }
      a {
        color: inherit;
      }
      .wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
      }
      .sec-h {
        font-size: clamp(1.55rem, 2.8vw, 2.15rem);
        font-weight: 500;
        color: var(--txt);
      }
      .sec-p {
        font-size: 0.95rem;
        color: var(--sub);
        line-height: 1.7;
        margin-top: 10px;
      }
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--p);
        margin-bottom: 14px;
      }
      .eyebrow::before {
        display: none;
      }
      .grad {
        background: linear-gradient(100deg, #8b7bf0, #5b4fd6);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }

      /* NAV */
      nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 300;
        height: 62px;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--bdr);
        transition: box-shadow 0.3s;
      }
      nav.sc {
        box-shadow: 0 4px 28px rgba(20, 39, 92, 0.09);
      }
      .nw {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
        display: flex;
        align-items: center;
        height: 100%;
      }
      .logo {
        display: flex;
        align-items: center;
        gap: 9px;
        text-decoration: none;
        flex-shrink: 0;
        margin-right: 36px;
      }
      .logo-sq {
        width: 34px;
        height: 34px;
        background: var(--p);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .logo-sq svg {
        stroke: #fff;
      }
      .logo-name {
        font-family: "Bricolage Grotesque", sans-serif;
        font-size: 1rem;
        font-weight: 700;
        color: var(--txt);
        letter-spacing: -0.03em;
      }
      .logo-name em {
        color: var(--p);
        font-style: normal;
      }
      .nl {
        display: flex;
        align-items: center;
        gap: 4px;
        list-style: none;
      }
      .nl a {
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--sub);
        text-decoration: none;
        padding: 6px 12px;
        border-radius: 7px;
        transition: color 0.2s, background 0.2s;
        white-space: nowrap;
      }
      .nl a:hover,
      .nl a.on {
        color: var(--p);
        background: var(--ppp);
      }
      .nr {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: auto;
      }
      .n-btn {
        background: var(--p);
        color: #fff;
        padding: 8px 18px;
        border-radius: 8px;
        font-size: 0.82rem;
        font-weight: 600;
        text-decoration: none;
        transition: background 0.2s, transform 0.15s;
        white-space: nowrap;
      }
      .n-btn:hover {
        background: var(--pd);
        transform: translateY(-1px);
      }
      .hbg {
        display: none;
        flex-direction: column;
        gap: 4.5px;
        cursor: pointer;
        padding: 5px;
        background: none;
        border: none;
      }
      .hbg span {
        width: 22px;
        height: 1.8px;
        background: var(--txt);
        border-radius: 2px;
        transition: all 0.3s;
      }
      .hbg.op span:nth-child(1) {
        transform: translateY(6.3px) rotate(45deg);
      }
      .hbg.op span:nth-child(2) {
        opacity: 0;
      }
      .hbg.op span:nth-child(3) {
        transform: translateY(-6.3px) rotate(-45deg);
      }
      .mm {
        display: none;
        position: fixed;
        top: 62px;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 299;
        padding: 18px;
        flex-direction: column;
        gap: 2px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
        transform: translateY(-10px);
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s;
      }
      .mm.op {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
      }
      .mm a {
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--txt);
        text-decoration: none;
        padding: 12px 14px;
        border-radius: 9px;
        display: block;
      }
      .mm a:hover {
        background: var(--ppp);
        color: var(--p);
      }

      /* PAGE HERO */
      .ph {
        position: relative;
        padding: 130px 24px 70px;
        background: linear-gradient(125deg, #ffffff 0%, #f4f1ff 55%, #e9e4ff 100%);
        overflow: hidden;
      }
      .ph::before {
        content: "";
        position: absolute;
        top: -160px;
        right: -120px;
        width: 460px;
        height: 460px;
        background: radial-gradient(circle, rgba(58, 100, 191, 0.12) 0%, transparent 70%);
        border-radius: 50%;
      }
      .ph::after {
        content: "";
        position: absolute;
        bottom: 30px;
        left: 50px;
        width: 130px;
        height: 130px;
        background-image: radial-gradient(var(--acc2) 2px, transparent 2px);
        background-size: 16px 16px;
        opacity: 0.5;
      }
      .ph-inner {
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
        position: relative;
        z-index: 1;
      }
      .crumb {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--sub);
        background: #fff;
        border: 1px solid var(--bdr);
        padding: 6px 14px;
        border-radius: 100px;
        margin-bottom: 20px;
        box-shadow: 0 6px 18px rgba(20, 39, 92, 0.08);
      }
      .crumb a {
        text-decoration: none;
        color: var(--sub);
      }
      .crumb a:hover {
        color: var(--p);
      }
      .crumb span {
        color: var(--p);
      }
      .ph h1 {
        font-size: clamp(2.3rem, 5vw, 3.6rem);
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -0.03em;
        margin-bottom: 16px;
      }
      .ph p {
        font-size: 1rem;
        color: var(--sub);
        line-height: 1.7;
        max-width: 560px;
        margin: 0 auto;
      }

      /* STORY */
      .story {
        padding: 90px 24px;
      }
      .story-in {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1.05fr;
        gap: 64px;
        align-items: center;
      }
      .story-vis {
        position: relative;
        padding: 14px 34px 34px 14px;
      }
      .story-img {
        width: 100%;
        aspect-ratio: 1 / 1.05;
        border-radius: 26px;
        overflow: hidden;
        background: linear-gradient(145deg, var(--pp), #ddd8ff);
        box-shadow: 0 26px 60px rgba(20, 39, 92, 0.2);
      }
      .story-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .story-badge {
        position: absolute;
        right: 0;
        bottom: 0;
        background: var(--ig);
        color: #fff;
        border-radius: 20px;
        padding: 20px 24px;
        box-shadow: 0 18px 40px rgba(20, 39, 92, 0.4);
      }
      .story-badge b {
        font-family: "Bricolage Grotesque", sans-serif;
        font-size: 2rem;
        font-weight: 800;
        display: block;
        line-height: 1;
      }
      .story-badge span {
        font-size: 0.72rem;
        opacity: 0.85;
      }
      .story h2 {
        font-size: clamp(1.7rem, 3.2vw, 2.4rem);
        font-weight: 500;
        margin-bottom: 16px;
        line-height: 1.14;
      }
      .story p {
        font-size: 0.95rem;
        color: var(--sub);
        line-height: 1.78;
        margin-bottom: 14px;
      }
      .story-sign {
        margin-top: 22px;
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .story-sign .av {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--ig);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-family: "Bricolage Grotesque", sans-serif;
      }
      .story-sign .nm {
        font-weight: 700;
        color: var(--txt);
      }
      .story-sign .rl {
        font-size: 0.78rem;
        color: var(--sub);
      }

      /* MISSION VISION */
      .mv {
        padding: 96px 24px;
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(680px 380px at 10% -10%, rgba(58, 100, 191, 0.1), transparent 70%),
          radial-gradient(620px 360px at 100% 120%, rgba(247, 181, 0, 0.08), transparent 70%),
          var(--ppp);
      }
      .mv-grid {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 26px;
        position: relative;
        z-index: 1;
      }
      .mv-card {
        background: linear-gradient(180deg, #ffffff, #fbfcff);
        border: 1px solid rgba(20, 39, 92, 0.08);
        border-radius: 24px;
        padding: 42px 36px 38px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(20, 39, 92, 0.07);
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s, border-color 0.4s;
      }
      .mv-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: var(--ig);
      }
      .mv-card::after {
        content: "";
        position: absolute;
        right: -70px;
        top: -70px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(58, 100, 191, 0.12), transparent 70%);
        transition: transform 0.5s ease;
        z-index: 0;
      }
      .mv-card:hover {
        transform: translateY(-8px);
        border-color: rgba(58, 100, 191, 0.22);
        box-shadow: 0 28px 56px rgba(20, 39, 92, 0.16);
      }
      .mv-card:hover::after {
        transform: scale(1.35);
      }
      .mv-ico {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        background: var(--ig);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 22px;
        box-shadow: 0 12px 26px rgba(20, 39, 92, 0.3);
        position: relative;
        z-index: 1;
        transition: transform 0.4s ease;
      }
      .mv-card:hover .mv-ico {
        transform: translateY(-3px) rotate(-6deg);
      }
      .mv-ico svg {
        stroke: #fff;
      }
      .mv-card h3 {
        font-size: 1.32rem;
        font-weight: 800;
        margin-bottom: 11px;
        position: relative;
        z-index: 2;
      }
      .mv-card p {
        font-size: 0.92rem;
        color: var(--sub);
        line-height: 1.75;
        position: relative;
        z-index: 2;
        max-width: 94%;
      }
      .mv-card .big {
        position: absolute;
        right: 20px;
        bottom: 4px;
        font-family: "Bricolage Grotesque", sans-serif;
        font-size: 6rem;
        font-weight: 800;
        background: var(--ig);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        opacity: 0.12;
        line-height: 1;
        z-index: 0;
      }
      /* Vision card — gold accent */
      .mv-card:nth-child(2)::before {
        background: linear-gradient(135deg, #f7b500, #e8860c);
      }
      .mv-card:nth-child(2)::after {
        background: radial-gradient(circle, rgba(247, 181, 0, 0.16), transparent 70%);
      }
      .mv-card:nth-child(2) .mv-ico {
        background: linear-gradient(135deg, #f7b500, #e8860c);
        box-shadow: 0 12px 26px rgba(242, 163, 7, 0.32);
      }
      .mv-card:nth-child(2) .big {
        background: linear-gradient(135deg, #f7b500, #e8860c);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      /* STATS BAND */
      .sb {
        padding: 70px 24px;
        background: linear-gradient(135deg, #0b0a2e 0%, #141235 45%, #1b1647 100%);
        position: relative;
        overflow: hidden;
      }
      .sb::before {
        content: "";
        position: absolute;
        top: -140px;
        right: 8%;
        width: 380px;
        height: 380px;
        background: radial-gradient(circle, rgba(58, 100, 191, 0.3) 0%, transparent 70%);
        border-radius: 50%;
      }
      .sb-grid {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        position: relative;
        z-index: 1;
      }
      .sb-item {
        text-align: center;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 18px;
        padding: 28px 18px;
        backdrop-filter: blur(6px);
      }
      .sb-n {
        font-family: "Bricolage Grotesque", sans-serif;
        font-size: clamp(1.8rem, 3.2vw, 2.6rem);
        font-weight: 800;
        background: linear-gradient(120deg, #fff 30%, #c9c2ff);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        line-height: 1;
      }
      .sb-l {
        font-size: 0.82rem;
        color: rgba(255, 255, 255, 0.66);
        margin-top: 8px;
      }

      /* VALUES */
      .val {
        padding: 96px 24px;
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(560px 320px at 100% -10%, rgba(58, 100, 191, 0.07), transparent 70%),
          radial-gradient(520px 300px at 0% 110%, rgba(247, 181, 0, 0.06), transparent 70%),
          #ffffff;
      }
      .val-head {
        text-align: center;
        max-width: 560px;
        margin: 0 auto 48px;
        position: relative;
        z-index: 1;
      }
      .val-head .eyebrow {
        justify-content: center;
      }
      .val-grid {
        max-width: 1150px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        position: relative;
        z-index: 1;
      }
      .val-card {
        background: linear-gradient(180deg, #ffffff, #fafbff);
        border: 1px solid rgba(20, 39, 92, 0.08);
        border-radius: 22px;
        padding: 32px 28px;
        box-shadow: 0 1px 3px rgba(16, 15, 26, 0.04), 0 12px 28px rgba(20, 39, 92, 0.06);
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s, border-color 0.4s;
        position: relative;
        overflow: hidden;
      }
      .val-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--ig);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s;
      }
      .val-card::after {
        content: "";
        position: absolute;
        right: -55px;
        bottom: -55px;
        width: 170px;
        height: 170px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(58, 100, 191, 0.1), transparent 70%);
        opacity: 0;
        transition: opacity 0.4s;
        z-index: 0;
      }
      .val-card:hover {
        transform: translateY(-8px);
        border-color: rgba(58, 100, 191, 0.22);
        box-shadow: 0 26px 50px rgba(20, 39, 92, 0.15);
      }
      .val-card:hover::before {
        transform: scaleX(1);
      }
      .val-card:hover::after {
        opacity: 1;
      }
      .val-ico {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        background: linear-gradient(135deg, #eef2fc, #e3e9f8);
        border: 1px solid rgba(58, 100, 191, 0.14);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        position: relative;
        z-index: 1;
        transition: background 0.35s, transform 0.35s, box-shadow 0.35s;
      }
      .val-ico svg {
        stroke: var(--p);
        transition: stroke 0.35s;
      }
      .val-card:hover .val-ico {
        background: var(--ig);
        transform: translateY(-2px) scale(1.06);
        box-shadow: 0 10px 22px rgba(20, 39, 92, 0.28);
      }
      .val-card:hover .val-ico svg {
        stroke: #fff;
      }
      .val-card h3 {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 8px;
        position: relative;
        z-index: 1;
      }
      .val-card p {
        font-size: 0.85rem;
        color: var(--sub);
        line-height: 1.62;
        position: relative;
        z-index: 1;
      }
      /* alternating accent bars for vibrancy */
      .val-card:nth-child(3n + 2)::before {
        background: linear-gradient(135deg, #f7b500, #e8860c);
      }
      .val-card:nth-child(3n + 3)::before {
        background: linear-gradient(135deg, #3a64bf, #88a8e0);
      }
      .val-card:nth-child(3n + 2):hover .val-ico {
        background: linear-gradient(135deg, #f7b500, #e8860c);
      }

      /* TIMELINE */
      .tl {
        padding: 90px 24px;
        background: var(--ppp);
      }
      .tl-head {
        text-align: center;
        max-width: 560px;
        margin: 0 auto 52px;
      }
      .tl-head .eyebrow {
        justify-content: center;
      }
      .tl-wrap {
        max-width: 760px;
        margin: 0 auto;
        position: relative;
      }
      .tl-wrap::before {
        content: "";
        position: absolute;
        left: 27px;
        top: 8px;
        bottom: 8px;
        width: 2px;
        background: linear-gradient(var(--acc), var(--acc2));
      }
      .tl-item {
        display: flex;
        gap: 24px;
        margin-bottom: 30px;
        position: relative;
      }
      .tl-item:last-child {
        margin-bottom: 0;
      }
      .tl-year {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--ig);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Bricolage Grotesque", sans-serif;
        font-weight: 800;
        font-size: 0.82rem;
        flex-shrink: 0;
        box-shadow: 0 8px 20px rgba(20, 39, 92, 0.3);
        position: relative;
        z-index: 1;
      }
      .tl-body {
        background: #fff;
        border: 1px solid var(--bdr);
        border-radius: 16px;
        padding: 20px 24px;
        flex: 1;
        box-shadow: 0 8px 22px rgba(20, 39, 92, 0.06);
      }
      .tl-body h4 {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 5px;
      }
      .tl-body p {
        font-size: 0.85rem;
        color: var(--sub);
        line-height: 1.6;
      }

      /* TEAM */
      .team {
        padding: 90px 24px;
      }
      .team-head {
        text-align: center;
        max-width: 560px;
        margin: 0 auto 48px;
      }
      .team-head .eyebrow {
        justify-content: center;
      }
      .team-grid {
        max-width: 1150px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
      }
      .tm {
        position: relative;
        background: #fff;
        border: 1px solid var(--bdr);
        border-radius: 20px;
        padding: 24px 20px;
        text-align: center;
        box-shadow: 0 1px 3px rgba(16, 15, 26, 0.04), 0 10px 28px rgba(20, 39, 92, 0.07);
        transition: transform 0.35s, box-shadow 0.35s;
        overflow: hidden;
      }
      .tm::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 78px;
        background: linear-gradient(135deg, var(--acc), var(--p));
        opacity: 0.1;
      }
      .tm:hover {
        transform: translateY(-6px);
        box-shadow: 0 22px 46px rgba(20, 39, 92, 0.15);
      }
      .tm-av {
        position: relative;
        z-index: 1;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        margin: 8px auto 16px;
        background: var(--ig);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-family: "Bricolage Grotesque", sans-serif;
        font-weight: 700;
        font-size: 1.5rem;
        border: 4px solid #fff;
        box-shadow: 0 8px 22px rgba(20, 39, 92, 0.28);
      }
      .tm-name {
        font-family: "Bricolage Grotesque", sans-serif;
        font-size: 1rem;
        font-weight: 700;
      }
      .tm-role {
        font-size: 0.78rem;
        color: var(--p);
        font-weight: 600;
        margin-top: 3px;
      }

      /* CTA */
      .cta {
        padding: 80px 24px;
      }
      .cta-in {
        max-width: 1100px;
        margin: 0 auto;
        background:
          radial-gradient(circle at 82% 18%, rgba(139, 92, 246, 0.35), transparent 55%),
          radial-gradient(circle at 12% 90%, rgba(58, 100, 191, 0.28), transparent 55%),
          linear-gradient(135deg, #06021a 0%, #130734 42%, #1e0f52 72%, #241a6e 100%);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 28px;
        padding: 56px 48px;
        text-align: center;
        position: relative;
        overflow: hidden;
        box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
      }
      .cta-in::before {
        content: "";
        position: absolute;
        top: -100px;
        right: -80px;
        width: 320px;
        height: 320px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 50%;
      }
      .cta-in h2 {
        font-size: clamp(1.6rem, 3vw, 2.3rem);
        font-weight: 500;
        color: #fff;
        margin-bottom: 12px;
        position: relative;
      }
      .cta-in p {
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.98rem;
        max-width: 520px;
        margin: 0 auto 28px;
        position: relative;
      }
      .cta-btns {
        display: flex;
        gap: 14px;
        justify-content: center;
        flex-wrap: wrap;
        position: relative;
      }
      .btn-w {
        background: #fff;
        color: var(--p);
        padding: 13px 28px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 0.9rem;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: transform 0.2s, box-shadow 0.2s;
      }
      .btn-w:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
      }
      .btn-ow {
        background: transparent;
        color: #fff;
        padding: 12px 26px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 0.9rem;
        text-decoration: none;
        border: 1.5px solid rgba(255, 255, 255, 0.4);
        transition: background 0.2s, border-color 0.2s;
      }
      .btn-ow:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: #fff;
      }

      /* FOOTER */
      footer {
        background: #0b0a18;
        color: rgba(255, 255, 255, 0.6);
        padding: 60px 24px 28px;
      }
      .fi {
        max-width: 1200px;
        margin: 0 auto;
      }
      .fg {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1fr;
        gap: 48px;
        padding-bottom: 36px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
      .fb p {
        margin-top: 16px;
        font-size: 0.88rem;
        line-height: 1.7;
        max-width: 320px;
      }
      .fsoc {
        display: flex;
        gap: 10px;
        margin-top: 20px;
      }
      .fs {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
      }
      .fs svg {
        stroke: rgba(255, 255, 255, 0.7);
      }
      .fs:hover {
        background: var(--p);
      }
      .fcol h5 {
        color: #fff;
        font-size: 0.95rem;
        font-weight: 700;
        margin-bottom: 16px;
      }
      .fcol ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 11px;
      }
      .fcol a {
        text-decoration: none;
        font-size: 0.88rem;
        color: rgba(255, 255, 255, 0.6);
        transition: color 0.2s;
      }
      .fcol a:hover {
        color: var(--acc2);
      }
      .fbot {
        text-align: center;
        font-size: 0.82rem;
        padding-top: 24px;
        color: rgba(255, 255, 255, 0.45);
      }

      /* reveal */
      .rv {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity 0.7s ease, transform 0.7s ease;
      }
      .rv.vi {
        opacity: 1;
        transform: translateY(0);
      }

      /* ===== AMBIENT DARK-THEME CONTRAST OVERRIDES ===== */
      /* eyebrows use dark brand color -> lighten */
      .story .eyebrow,
      .val .eyebrow,
      .mv .eyebrow {
        color: var(--acc2);
      }
      /* section text with explicit dark colors -> light */
      .sec-h,
      .story h2,
      .story-sign .nm {
        color: #fff;
      }
      .sec-p,
      .story p,
      .story-sign .rl,
      .mv-card p,
      .val-card p {
        color: rgba(255, 255, 255, 0.7);
      }
      /* glass cards: translucent borders + lighten accent-line backdrop rings */
      .mv-card,
      .val-card {
        border-color: rgba(255, 255, 255, 0.12);
      }
      /* chip icon tiles: ensure the icon stroke reads white on the dark chip */
      .val-ico {
        border-color: rgba(255, 255, 255, 0.14);
      }
      .val-ico svg {
        stroke: #fff;
      }
      /* CTA gradient card sits on a dark section — keep it fully intact */
      .cta .cta-in {
        z-index: 1;
      }

      /* responsive */
      @media (max-width: 980px) {
        .nl,
        .n-ph {
          display: none;
        }
        .hbg {
          display: flex;
        }
        .mm {
          display: flex;
        }
        .story-in,
        .mv-grid {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .sb-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .val-grid {
          grid-template-columns: 1fr 1fr;
        }
        .team-grid {
          grid-template-columns: 1fr 1fr;
        }
        .fg {
          grid-template-columns: 1fr 1fr;
          gap: 32px;
        }
      }
      @media (max-width: 560px) {
        .val-grid,
        .team-grid {
          grid-template-columns: 1fr;
        }
        .cta-in {
          padding: 40px 24px;
        }
        .tl-wrap::before {
          left: 27px;
        }
      }