/* ================================================
         ABOUT PAGE — MODERN ICON-DRIVEN DESIGN SYSTEM
         No images. Pure CSS + Icons + Typography.
         ================================================ */
      :root {
        --bg-main: #ffffff;
        --bg-hero: #f8f9fa;
        --bg-surface: #ffffff;
        --bg-surface-hover: #f1f5f9;
        --bg-alt: #f1f5f9;
        --bg-dark: #212f3c;
        --bg-dark-surface: #1e293b;
        --border-subtle: #e2e8f0;
        --border-focus: #cbd5e1;
        --text-primary: #111827;
        --text-secondary: #4b5563;
        --text-tertiary: #6b7280;
        --text-on-dark: #f1f5f9;
        --text-on-dark-muted: #94a3b8;
        --accent-cyan: #0084c8;
        --accent-cyan-dark: #006b9f;
        --accent-cyan-light: #e0f2fe;
        --accent-warm: #fae251;
        --accent-warm-1: #94a3b8;
        --badge-bg: #ffffff;
        --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
        --font-mono: "JetBrains Mono", "Roboto Mono", monospace;
        --radius-sm: 8px;
        --radius-md: 14px;
        --radius-lg: 20px;
        --radius-xl: 28px;
      }

      #about-page-wrapper {
        font-family: var(--font-sans);
        background: var(--bg-main);
        color: var(--text-primary);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }

      .sec-pad {
        padding: 90px 24px;
      }
      .sec-pad-lg {
        padding: 120px 24px;
      }
      .wrap {
        max-width: 1200px;
        margin: 0 auto;
      }
      .wrap-narrow {
        max-width: 800px;
        margin: 0 auto;
      }

      .badge-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        border-radius: 100px;
        padding: 6px 18px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-secondary);
        margin-bottom: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      }
      .badge-label i {
        color: var(--accent-cyan);
        font-size: 0.8rem;
      }

      .sec-heading {
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 800;
        letter-spacing: -0.025em;
        line-height: 1.15;
        color: var(--text-primary);
        margin-bottom: 20px;
      }

      .body-text {
        font-size: 1.1rem;
        line-height: 1.8;
        color: var(--text-secondary);
      }
      .body-text + .body-text {
        margin-top: 1rem;
      }

      /* HERO */
      .hero-section {
        position: relative;
        min-height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 140px 24px 100px;
        background: var(--bg-hero);
        border-bottom: 1px solid var(--border-subtle);
        overflow: hidden;
      }

      .hero-deco {
        position: absolute;
        border-radius: 50%;
        opacity: 0.06;
        pointer-events: none;
      }
      .hero-deco--1 {
        width: 500px;
        height: 500px;
        background: var(--accent-warm-1);
        top: -120px;
        left: -100px;
      }
      .hero-deco--2 {
        width: 350px;
        height: 350px;
        background: var(--accent-warm-1);
        bottom: -80px;
        right: -60px;
      }
      .hero-deco--3 {
        width: 200px;
        height: 200px;
        background: var(--accent-warm-1);
        top: 30%;
        right: 10%;
        opacity: 0.04;
      }

      .hero-inner {
        position: relative;
        z-index: 1;
        max-width: 860px;
      }

      .hero-inner h1 {
        font-size: clamp(2.4rem, 5.5vw, 4.2rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.1;
        margin-bottom: 28px;
        color: var(--text-primary);
      }

      .hero-inner .hero-lead {
        font-size: clamp(1.05rem, 2vw, 1.3rem);
        color: var(--text-secondary);
        line-height: 1.7;
        max-width: 680px;
        margin: 0 auto 40px;
      }

      .hero-trust {
        display: flex;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
      }
      .hero-trust-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        padding: 10px 20px;
        border-radius: 100px;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      }
      .hero-trust-chip i {
        color: var(--accent-cyan);
      }
      .hero-trust-chip .star {
        color: var(--accent-warm);
      }

      /* STATS BAR */
      .stats-bar {
        background: var(--bg-dark);
        padding: 50px 24px;
      }
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
        max-width: 1100px;
        margin: 0 auto;
        text-align: center;
      }
      .stat-item {
        position: relative;
      }
      .stat-item:not(:last-child)::after {
        content: "";
        position: absolute;
        right: -16px;
        top: 15%;
        height: 70%;
        width: 1px;
        background: rgba(255, 255, 255, 0.1);
      }
      .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: var(--radius-md);
        background: rgba(0, 132, 200, 0.15);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 14px;
      }
      .stat-icon i {
        font-size: 1.3rem;
        color: var(--accent-cyan);
      }
      .stat-number {
        font-size: 2.2rem;
        font-weight: 800;
        color: #ffffff;
        font-family: var(--font-mono);
        letter-spacing: -0.03em;
        line-height: 1.2;
      }
      .stat-label {
        font-size: 0.85rem;
        color: var(--text-on-dark-muted);
        font-weight: 500;
        margin-top: 4px;
      }

      /* STORY */
      .story-section {
        background: var(--bg-main);
      }
      .story-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
      }

      .icon-mural {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
      .mural-tile {
        background: var(--bg-alt);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        padding: 28px 16px;
        text-align: center;
        transition: all 0.3s ease;
      }
      .mural-tile:hover {
        border-color: var(--accent-cyan);
        box-shadow: 0 8px 24px -4px rgba(0, 132, 200, 0.1);
        transform: translateY(-3px);
      }
      .mural-tile i {
        font-size: 1.8rem;
        color: var(--accent-cyan);
        margin-bottom: 12px;
      }
      .mural-tile span {
        display: block;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--text-secondary);
        line-height: 1.3;
      }
      .mural-tile--highlight {
        background: var(--accent-cyan);
        border-color: var(--accent-cyan);
      }
      .mural-tile--highlight i,
      .mural-tile--highlight span {
        color: #ffffff;
      }

      /* PILLARS */
      .pillars-section {
        background: var(--bg-alt);
      }
      .pillars-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
      }
      .pillar-card {
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-xl);
        padding: 44px 32px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }
      .pillar-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--accent-cyan), transparent);
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      .pillar-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 40px -8px rgba(0, 132, 200, 0.12);
        border-color: var(--border-focus);
      }
      .pillar-card:hover::before {
        opacity: 1;
      }
      .pillar-icon-wrap {
        width: 64px;
        height: 64px;
        border-radius: var(--radius-md);
        background: var(--accent-cyan-light);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
      }
      .pillar-icon-wrap i {
        font-size: 1.6rem;
        color: var(--accent-cyan);
      }
      .pillar-card h3 {
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 14px;
      }

      /* ECOSYSTEM DARK */
      .eco-section {
        background: var(--bg-dark);
        position: relative;
        overflow: hidden;
      }
      .eco-deco {
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: var(--accent-cyan);
        opacity: 0.04;
        pointer-events: none;
      }
      .eco-deco--1 {
        top: -200px;
        right: -100px;
      }
      .eco-deco--2 {
        bottom: -200px;
        left: -100px;
      }

      .eco-content {
        position: relative;
        z-index: 1;
      }

      .eco-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 70px;
        align-items: center;
      }

      .eco-feature-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
      .eco-feature-item {
        background: var(--bg-dark-surface);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--radius-lg);
        padding: 28px 22px;
        text-align: center;
        transition: all 0.3s ease;
      }
      .eco-feature-item:hover {
        border-color: var(--accent-cyan);
        background: rgba(0, 132, 200, 0.08);
        transform: translateY(-3px);
      }
      .eco-feature-item i {
        font-size: 1.5rem;
        color: var(--accent-cyan);
        margin-bottom: 12px;
      }
      .eco-feature-item h4 {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--text-on-dark);
        line-height: 1.3;
      }
      .eco-feature-item p {
        font-size: 0.75rem;
        color: var(--text-on-dark-muted);
        margin-top: 6px;
      }

      .eco-section .sec-heading {
        color: #ffffff;
      }
      .eco-section .body-text {
        color: var(--text-on-dark-muted);
      }
      .eco-section .badge-label {
        background: var(--bg-dark-surface);
        border-color: rgba(255, 255, 255, 0.1);
        color: var(--text-on-dark-muted);
      }
      .eco-section .badge-label i {
        color: var(--accent-cyan);
      }

      /* VISION */
      .vision-section {
        background: var(--bg-main);
        text-align: center;
      }
      .vision-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        max-width: 900px;
        margin: 50px auto 0;
      }
      .vision-card {
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-xl);
        padding: 48px 32px 40px;
        position: relative;
        transition: all 0.3s ease;
      }
      .vision-card:hover {
        border-color: var(--accent-cyan);
        box-shadow: 0 16px 32px -6px rgba(0, 132, 200, 0.1);
      }
      .vision-year {
        position: absolute;
        top: -22px;
        left: 50%;
        transform: translateX(-50%);
        font-family: var(--font-mono);
        font-size: 1.6rem;
        font-weight: 800;
        background: var(--accent-cyan);
        color: #ffffff;
        padding: 6px 24px;
        border-radius: 100px;
        letter-spacing: -0.02em;
      }
      .vision-card h3 {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 12px;
        margin-top: 8px;
      }
      .vision-card p {
        color: var(--text-secondary);
        font-size: 1.05rem;
        line-height: 1.7;
      }
      .vision-icon {
        font-size: 2rem;
        color: var(--accent-cyan);
        margin-bottom: 16px;
      }

      /* GEO */
      .geo-section {
        background: var(--bg-hero);
        border-top: 1px solid var(--border-subtle);
        border-bottom: 1px solid var(--border-subtle);
        text-align: center;
      }
      .geo-region-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-top: 32px;
      }
      .geo-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        padding: 8px 16px;
        border-radius: 100px;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-primary);
        transition: all 0.2s ease;
      }
      .geo-chip:hover {
        border-color: var(--accent-cyan);
        color: var(--accent-cyan);
      }
      .geo-chip i {
        color: var(--accent-cyan);
        font-size: 0.7rem;
      }

      /* CTA */
      .cta-section {
        background: var(--bg-alt);
      }
      .cta-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: var(--bg-surface);
        border-radius: var(--radius-xl);
        overflow: hidden;
        box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.08);
        border: 1px solid var(--border-subtle);
      }
      .cta-info-panel {
        background: var(--bg-dark);
        padding: 56px 48px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        overflow: hidden;
      }
      .cta-info-panel::before {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: var(--accent-cyan);
        opacity: 0.06;
        bottom: -100px;
        right: -80px;
      }
      .cta-info-panel h2 {
        font-size: 2rem;
        font-weight: 800;
        color: #ffffff;
        margin-bottom: 16px;
        position: relative;
        z-index: 1;
      }
      .cta-info-panel > p {
        color: var(--text-on-dark-muted);
        font-size: 1.05rem;
        margin-bottom: 36px;
        position: relative;
        z-index: 1;
      }
      .cta-contact-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: relative;
        z-index: 1;
      }
      .cta-contact-row {
        display: flex;
        align-items: flex-start;
        gap: 14px;
      }
      .cta-contact-row i {
        color: var(--accent-cyan);
        font-size: 1.1rem;
        margin-top: 3px;
        width: 20px;
        text-align: center;
      }
      .cta-contact-row span {
        color: var(--text-on-dark-muted);
        font-size: 0.95rem;
        font-weight: 500;
        line-height: 1.5;
      }
      .cta-social-row {
        display: flex;
        gap: 12px;
        margin-top: 28px;
        position: relative;
        z-index: 1;
      }
      .cta-social-link {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-sm);
        background: var(--bg-dark-surface);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-on-dark-muted);
        font-size: 1rem;
        transition: all 0.2s ease;
        text-decoration: none;
        border: 1px solid rgba(255, 255, 255, 0.06);
      }
      .cta-social-link:hover {
        background: var(--accent-cyan);
        color: #ffffff;
        border-color: var(--accent-cyan);
      }

      .cta-form-panel {
        padding: 56px 48px;
      }
      .cta-form-panel h3 {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 28px;
      }

      .form-group-wrap {
        margin-bottom: 18px;
      }
      .form-ctrl {
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: 1.5px solid var(--border-focus);
        padding: 12px 0;
        font-size: 0.95rem;
        color: var(--text-primary);
        font-family: var(--font-sans);
        transition: border-color 0.3s;
      }
      .form-ctrl:focus {
        outline: none;
        border-bottom-color: var(--accent-cyan);
      }
      .form-ctrl::placeholder {
        color: var(--text-tertiary);
      }
      .err-label {
        color: #ef4444;
        font-size: 0.78rem;
        min-height: 16px;
        display: block;
        margin-top: 4px;
      }

      .btn-submit {
        width: 100%;
        padding: 16px;
        background: var(--text-primary);
        color: #ffffff;
        border: none;
        border-radius: var(--radius-sm);
        font-size: 1rem;
        font-weight: 600;
        font-family: var(--font-sans);
        cursor: pointer;
        transition: all 0.2s;
        margin-top: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }
      .btn-submit:hover {
        background: var(--accent-cyan);
        transform: translateY(-2px);
      }

      /* RESPONSIVE */
      @media (max-width: 991px) {
        .story-grid,
        .eco-grid,
        .cta-grid {
          grid-template-columns: 1fr;
        }
        .stats-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 28px;
        }
        .stat-item:not(:last-child)::after {
          display: none;
        }
        .pillars-grid {
          grid-template-columns: 1fr;
        }
        .hero-section {
          padding: 120px 20px 70px;
          min-height: auto;
        }
        .eco-grid {
          gap: 50px;
        }
        .cta-info-panel,
        .cta-form-panel {
          padding: 40px 28px;
        }
      }
      @media (max-width: 640px) {
        .sec-pad {
          padding: 60px 16px;
        }
        .sec-pad-lg {
          padding: 80px 16px;
        }
        .stats-grid {
          grid-template-columns: 1fr 1fr;
          gap: 24px;
        }
        .icon-mural {
          grid-template-columns: repeat(2, 1fr);
        }
        .eco-feature-grid {
          grid-template-columns: 1fr;
        }
        .vision-grid {
          grid-template-columns: 1fr;
        }
        .hero-trust {
          gap: 10px;
        }
        .hero-trust-chip {
          padding: 8px 14px;
          font-size: 0.78rem;
        }
      }

      /* SCROLL ANIMATIONS */
      .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition:
          opacity 0.6s ease,
          transform 0.6s ease;
      }
      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }

      footer {
        margin-top: -140px;
      }