:root {
        --bg-light: #f4efe7;
        --bg-soft: #f7f1e7;
        --surface: #fffdf9;
        --surface-alt: #f7f2ea;
        --text-primary: #1b1b1a;
        --text-secondary: #4f4a42;
        --card-bg: #fffdfb;
        --border-color: rgba(27, 27, 26, 0.1);
        --primary: #c6a46b;
        --primary-strong: #b1884f;
        --primary-soft: rgba(198, 164, 107, 0.12);
        --teal: #2f4f4a;
        --teal-soft: rgba(47, 79, 74, 0.12);
        --amber: #d7b06d;
        --amber-soft: rgba(215, 176, 109, 0.12);
        --navy: #171513;
        --navy-strong: #0f0d0c;
        --slate-900: #181614;
        --forest: #1d3c35;
        --forest-deep: #132d29;
        --rose: #a66d5a;
        --shadow-color: 198, 164, 107;
        --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
        --ease-spring: cubic-bezier(0.16, 1.2, 0.32, 1);
      }

      html {
        scroll-behavior: smooth;
        scroll-padding-top: 88px;
      }

      body {
        font-family: "Manrope", "DM Sans", sans-serif;
        background:
          radial-gradient(circle at top left, rgba(198, 164, 107, 0.18), transparent 20%),
          radial-gradient(circle at bottom right, rgba(47, 79, 74, 0.12), transparent 22%),
          linear-gradient(180deg, #f7f3ed 0%, #f7f2eb 100%);
        color: var(--text-primary);
        font-size: 16px;
        line-height: 1.7;
        letter-spacing: -0.01em;
      }

      a {
        text-decoration: none;
      }

      section[id] {
        scroll-margin-top: 88px;
      }

      .font-montserrat {
        font-family: "Space Grotesk", "DM Sans", sans-serif;
      }

      .hero-bg {
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(
            circle at top left,
            rgba(198, 164, 107, 0.28),
            transparent 34%
          ),
          radial-gradient(
            circle at 78% 18%,
            rgba(47, 79, 74, 0.14),
            transparent 26%
          ),
          linear-gradient(180deg, #faf6ee 0%, #f5efe3 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
      }
      .hero-bg::before {
        content: "";
        position: absolute;
        top: -20%;
        left: -12%;
        width: 900px;
        height: 900px;
        background: radial-gradient(
          circle,
          rgba(198, 164, 107, 0.22),
          transparent 58%
        );
        animation: pulse-light 10s ease-in-out infinite;
        z-index: 0;
      }
      .hero-bg::after {
        content: "";
        position: absolute;
        right: -10%;
        bottom: -18%;
        width: 700px;
        height: 700px;
        background: radial-gradient(
          circle,
          rgba(47, 79, 74, 0.14),
          transparent 58%
        );
        animation: pulse-light 12s ease-in-out infinite reverse;
        z-index: 0;
      }
      .hero-bg h1 span,
      .section-eyebrow,
      #impact .text-5xl {
        color: var(--primary);
      }

      .hero-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem;
        margin-top: 1.5rem;
      }
      .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.66rem 0.9rem;
        border-radius: 999px;
        border: 1px solid rgba(12, 32, 43, 0.08);
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 16px 26px -20px rgba(12, 32, 43, 0.28);
        color: var(--navy);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .hero-badge i {
        width: 0.95rem;
        height: 0.95rem;
        color: var(--primary);
      }

      .section-shell {
        position: relative;
        isolation: isolate;
      }
      .section-shell::before {
        content: "";
        position: absolute;
        inset: 8% 2% auto;
        height: 70%;
        background: radial-gradient(
          circle at center,
          rgba(58, 111, 247, 0.08),
          transparent 62%
        );
        z-index: -1;
        pointer-events: none;
      }
      .glass-panel {
        background: rgba(255, 255, 255, 0.62);
        border: 1px solid rgba(17, 28, 45, 0.07);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 30px 70px -40px rgba(13, 27, 42, 0.24);
      }
      .cinematic-card {
        position: relative;
        overflow: hidden;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.96),
          rgba(247, 241, 229, 0.85)
        );
        border: 1px solid rgba(198, 164, 107, 0.16);
        box-shadow: 0 30px 60px -34px rgba(13, 27, 42, 0.18);
        transition:
          transform 0.4s var(--ease-spring),
          box-shadow 0.4s ease,
          border-color 0.4s ease;
      }
      .section-divider {
        display: block;
        width: 88px;
        height: 3px;
        margin: 1.1rem auto 0;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--forest), var(--amber));
        box-shadow: 0 8px 18px rgba(217, 142, 52, 0.2);
      }
      .cinematic-card::before {
        content: "";
        position: absolute;
        inset: -30% auto auto -20%;
        width: 55%;
        height: 130%;
        background: linear-gradient(
          120deg,
          rgba(198, 164, 107, 0.14),
          rgba(47, 79, 74, 0.04),
          transparent
        );
        transform: rotate(12deg);
        pointer-events: none;
      }
      .cinematic-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 40px 80px -38px rgba(17, 28, 45, 0.28);
        border-color: rgba(198, 164, 107, 0.3);
      }

      @keyframes pulse-light {
        0% {
          transform: scale(0.9);
          opacity: 0.7;
        }
        50% {
          transform: scale(1.2);
          opacity: 1;
        }
        100% {
          transform: scale(0.9);
          opacity: 0.7;
        }
      }

      @keyframes floatDrift {
        0%,
        100% {
          transform: translateY(0px) rotate(0deg);
        }
        50% {
          transform: translateY(-12px) rotate(1.5deg);
        }
      }

      @keyframes fadeUpSoft {
        from {
          opacity: 0;
          transform: translate3d(0, 18px, 0) scale(0.985);
          filter: blur(6px);
        }
        to {
          opacity: 1;
          transform: translate3d(0, 0, 0) scale(1);
          filter: blur(0);
        }
      }

      #features {
        background:
          radial-gradient(
            circle at top,
            rgba(14, 88, 73, 0.07),
            transparent 24%
          ),
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.98),
            rgba(240, 247, 245, 0.98)
          ) !important;
      }
      #features .feature-title {
        font-size: clamp(2rem, 2.5vw, 2.8rem);
        line-height: 1;
        letter-spacing: -0.05em;
        color: #0d4d3f;
      }
      #features .feature-subtitle {
        color: rgba(15, 23, 42, 0.72);
        font-size: clamp(0.95rem, 1.3vw, 1.1rem);
        line-height: 1.55;
      }
      .feature-card {
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.9),
          rgba(240, 246, 255, 0.95)
        );
        border: 1px solid rgba(15, 23, 42, 0.07);
        box-shadow: 0 8px 30px -22px rgba(15, 23, 42, 0.24);
        transition:
          transform 0.38s var(--ease-spring),
          box-shadow 0.38s ease,
          border-color 0.38s ease,
          background 0.38s ease;
      }
      .feature-card:hover {
        transform: translateY(-10px) scale(1.01);
        box-shadow: 0 32px 56px -24px rgba(17, 28, 45, 0.2);
        border-color: rgba(47, 109, 246, 0.24);
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.98),
          rgba(234, 243, 255, 0.96)
        );
      }

      /* Key Features: sequential, lightweight activation */
      #features .feature-activate {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
        transition:
          opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.28s ease,
          border-color 0.28s ease;
      }
      #features .feature-activate.is-active {
        opacity: 1;
        transform: translateY(0) scale(1);
        animation: featureActivationGlow 0.85s ease-out both;
      }
      #features .feature-activate.is-active:hover {
        transform: translateY(-5px) scale(1);
        border-color: rgba(56, 189, 248, 0.52);
        box-shadow: 0 18px 34px -20px rgba(15, 23, 42, 0.25);
      }
      #features .feature-activate p {
        transition:
          opacity 0.28s ease,
          transform 0.28s ease;
      }
      #features .feature-activate:hover p {
        opacity: 0.92;
        transform: translateY(-1px);
      }
      #features .feature-activate > div:first-child {
        transition:
          filter 0.28s ease,
          transform 0.28s ease;
      }
      #features .feature-activate:hover > div:first-child {
        filter: saturate(1.12);
        transform: translateY(-1px);
      }
      @keyframes featureActivationGlow {
        0% {
          box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
        }
        45% {
          box-shadow:
            0 0 0 5px rgba(56, 189, 248, 0.1),
            0 16px 30px -24px rgba(56, 189, 248, 0.35);
        }
        100% {
          box-shadow:
            0 0 0 0 rgba(56, 189, 248, 0),
            0 10px 24px -20px rgba(15, 23, 42, 0.16);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        #features .feature-activate {
          opacity: 1;
          transform: none;
          transition: none;
          animation: none;
        }
        #features .feature-activate.is-active:hover {
          transform: none;
        }
      }

      .glow-button {
        box-shadow:
          0 0 10px rgba(var(--shadow-color), 0),
          0 0 0px rgba(var(--shadow-color), 0);
        transition: box-shadow 0.3s ease-in-out;
      }
      .glow-button:hover {
        box-shadow:
          0 0 20px rgba(var(--shadow-color), 0.5),
          0 0 30px rgba(var(--shadow-color), 0.3);
      }

      .team-card img {
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      .team-card:hover img {
        transform: scale(1.08);
      }

      .award-badge {
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        transition:
          background-color 0.3s,
          transform 0.3s,
          color 0.3s;
      }
      .award-badge:hover {
        background-color: var(--sky-blue);
        color: white;
        transform: scale(1.05);
      }
      /* Target child elements on hover */
      .award-badge:hover i {
        color: white !important;
      }
      .award-badge:hover .award-badge-text {
        color: white !important;
      }

      .abstract-bg {
        background-color: #f8fafc;
        border: 1px solid var(--border-color);
        background-image:
          linear-gradient(45deg, #fafcff 25%, transparent 25%),
          linear-gradient(-45deg, #fafcff 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, #fafcff 75%),
          linear-gradient(-45deg, transparent 75%, #fafcff 75%);
        background-size: 20px 20px;
      }

      /* Styles for active tab card and content panes */
      .tab-card.tab-active {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
        border-color: var(--sky-blue);
      }

      /* Smooth transition for content swapping */
      .tab-pane {
        animation: fadeIn 0.4s ease-in-out;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Premium Mission & Vision Timeline */
      .mission-journey {
        position: relative;
        overflow: visible;
      }

      .mission-journey-header {
        margin-bottom: 2rem;
        text-align: center;
      }

      .mission-journey-header h2 {
        font-size: clamp(2.2rem, 4vw, 3.5rem);
        line-height: 1.1;
        letter-spacing: -0.06em;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 1rem 0;
      }

      .mission-vision-intro {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        max-width: 900px;
        margin: 0 auto 2.5rem;
        text-align: center;
      }

      .mission-vision-intro > div {
        padding: 0.5rem;
      }

      .mission-vision-intro h3 {
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #64748b;
        margin: 0 0 0.5rem 0;
      }

      .mission-vision-intro p {
        font-size: 1.1rem;
        line-height: 1.6;
        color: #0f172a;
        margin: 0;
        font-weight: 600;
      }

      .mission-journey-shell {
        position: relative;
        margin-top: 1.5rem;
      }

      .mission-timeline {
        position: relative;
        width: 100%;
        max-width: 1100px;
        margin: 0 auto 3rem;
        padding: 2rem 1rem;
      }

      .mission-track {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1.5rem;
        min-height: 200px;
        padding: 0 1rem;
      }

      .mission-track::before {
        content: "";
        position: absolute;
        top: 80px;
        left: 4%;
        right: 4%;
        height: 3px;
        background: linear-gradient(90deg, #e2e8f0 0%, #e2e8f0 100%);
        transform: scaleX(0);
        transform-origin: left center;
        box-shadow: 0 0 12px rgba(148, 163, 184, 0.12);
        z-index: 0;
      }

      .mission-progress {
        position: absolute;
        top: 80px;
        left: 4%;
        width: 0;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, #0c4a8b, #5b21b6, #15803d, #b45309);
        box-shadow: 0 0 12px rgba(59, 130, 246, 0.28);
        transition:
          width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
          height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 1;
      }

      .mission-timeline.is-ready .mission-track::before {
        animation: drawMissionLine 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }

      .mission-particle {
        position: absolute;
        top: 70px;
        left: 4%;
        width: 14px;
        height: 14px;
        border-radius: 999px;
        background: linear-gradient(135deg, #ffffff, rgba(59, 130, 246, 0.95));
        box-shadow:
          0 0 24px rgba(59, 130, 246, 0.9),
          0 0 40px rgba(59, 130, 246, 0.6);
        opacity: 0;
        pointer-events: none;
        z-index: 3;
        transition:
          left 0.7s cubic-bezier(0.22, 1, 0.36, 1),
          top 0.7s cubic-bezier(0.22, 1, 0.36, 1);
      }

      .mission-timeline.is-animating .mission-particle {
        opacity: 0.9;
      }

      .timeline-point {
        position: relative;
        z-index: 2;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
        padding: 0.5rem 0.5rem 0 0.5rem;
        background: none;
        border: none;
        cursor: pointer;
        opacity: 0;
        transform: translateY(20px) scale(0.8);
        transition:
          transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
          filter 0.4s ease;
      }

      .mission-timeline.is-ready .timeline-point {
        animation: missionPointReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1)
          forwards;
        animation-delay: var(--delay);
      }

      .timeline-point:hover {
        transform: translateY(-8px) scale(1.08);
        filter: drop-shadow(0 18px 28px rgba(15, 23, 42, 0.15));
      }

      .timeline-point:focus-visible {
        outline: 3px solid rgba(14, 165, 233, 0.5);
        outline-offset: 7px;
        border-radius: 1rem;
      }

      /* ACTIVE STATE: Strong, dark, saturated colors */
      .timeline-point.is-active .timeline-icon-wrap {
        transform: scale(1.15);
      }

      .timeline-point.is-active .timeline-icon-wrap::after {
        content: "";
        position: absolute;
        inset: -11px;
        border: 2px solid var(--pulse-color, rgba(12, 74, 139, 0.4));
        border-radius: inherit;
        animation: missionRing 2.2s ease-out infinite;
      }

      /* Purity: Deep Blue */
      .timeline-point[data-tone="sky"].is-active .timeline-icon-wrap {
        --pulse-color: rgba(12, 74, 139, 0.42);
        background: #0c4a8b;
        border-color: #0c4a8b;
        box-shadow:
          0 0 0 12px rgba(12, 74, 139, 0.16),
          0 0 0 3px rgba(255, 255, 255, 0.95),
          0 0 35px rgba(12, 74, 139, 0.35);
      }
      .timeline-point[data-tone="sky"].is-active i {
        color: #ffffff;
        width: 28px !important;
        height: 28px !important;
      }

      /* Trust: Deep Purple */
      .timeline-point[data-tone="violet"].is-active .timeline-icon-wrap {
        --pulse-color: rgba(91, 33, 182, 0.42);
        background: #5b21b6;
        border-color: #5b21b6;
        box-shadow:
          0 0 0 12px rgba(91, 33, 182, 0.16),
          0 0 0 3px rgba(255, 255, 255, 0.95),
          0 0 35px rgba(91, 33, 182, 0.35);
      }
      .timeline-point[data-tone="violet"].is-active i {
        color: #ffffff;
        width: 28px !important;
        height: 28px !important;
      }

      /* Innovation: Deep Green */
      .timeline-point[data-tone="green"].is-active .timeline-icon-wrap {
        --pulse-color: rgba(21, 128, 61, 0.42);
        background: #15803d;
        border-color: #15803d;
        box-shadow:
          0 0 0 12px rgba(21, 128, 61, 0.16),
          0 0 0 3px rgba(255, 255, 255, 0.95),
          0 0 35px rgba(21, 128, 61, 0.35);
      }
      .timeline-point[data-tone="green"].is-active i {
        color: #ffffff;
        width: 28px !important;
        height: 28px !important;
      }

      /* Sustainability: Deep Amber/Gold */
      .timeline-point[data-tone="amber"].is-active .timeline-icon-wrap {
        --pulse-color: rgba(180, 83, 9, 0.42);
        background: #b45309;
        border-color: #b45309;
        box-shadow:
          0 0 0 12px rgba(180, 83, 9, 0.16),
          0 0 0 3px rgba(255, 255, 255, 0.95),
          0 0 35px rgba(180, 83, 9, 0.35);
      }
      .timeline-point[data-tone="amber"].is-active i {
        color: #ffffff;
        width: 28px !important;
        height: 28px !important;
      }

      .timeline-icon-wrap {
        position: relative;
        display: grid;
        place-items: center;
        width: 92px;
        height: 92px;
        border-radius: 999px;
        background: rgba(248, 250, 252, 0.95);
        border: 2px solid rgba(148, 163, 184, 0.28);
        box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.18);
        transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        backdrop-filter: blur(4px);
      }

      .timeline-point[data-tone="sky"] .timeline-icon-wrap {
        border-color: rgba(12, 74, 139, 0.32);
        background: rgba(226, 240, 255, 0.6);
      }
      .timeline-point[data-tone="violet"] .timeline-icon-wrap {
        border-color: rgba(91, 33, 182, 0.32);
        background: rgba(243, 232, 255, 0.6);
      }
      .timeline-point[data-tone="green"] .timeline-icon-wrap {
        border-color: rgba(21, 128, 61, 0.32);
        background: rgba(226, 252, 240, 0.6);
      }
      .timeline-point[data-tone="amber"] .timeline-icon-wrap {
        border-color: rgba(180, 83, 9, 0.32);
        background: rgba(255, 244, 222, 0.6);
      }

      .timeline-point i {
        width: 2.4rem !important;
        height: 2.4rem !important;
        stroke-width: 2.1 !important;
        transition: all 0.4s ease;
      }

      .timeline-point[data-tone="sky"] i {
        color: #0c4a8b;
      }
      .timeline-point[data-tone="violet"] i {
        color: #5b21b6;
      }
      .timeline-point[data-tone="green"] i {
        color: #15803d;
      }
      .timeline-point[data-tone="amber"] i {
        color: #b45309;
      }

      .timeline-label {
        font-size: clamp(1.05rem, 1.8vw, 1.35rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        color: #0f172a;
        transition: color 0.4s ease;
      }

      .timeline-point.is-active .timeline-label {
        color: #0f172a;
      }

      .timeline-point.is-active .timeline-label::after {
        content: "Selected";
        display: block;
        margin-top: 0.3rem;
        color: #64748b;
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .timeline-dot {
        position: absolute;
        top: 80px;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 999px;
        transform: translateX(-50%);
        opacity: 0;
        z-index: 1;
      }

      /* Information Panel */
      .mission-info-panel {
        position: relative;
        margin: 0 auto;
        max-width: 950px;
        min-height: 320px;
        padding-top: 2rem;
      }

      .mission-info-content {
        position: relative;
        background: linear-gradient(
          180deg,
          #ffffff 0%,
          rgba(255, 255, 255, 0.98) 100%
        );
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 1.75rem;
        padding: 3rem 3.5rem;
        box-shadow: 0 28px 52px -28px rgba(15, 23, 42, 0.2);
        opacity: 0;
        transform: translateY(35px);
        transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        border-left: 6px solid transparent;
        overflow: hidden;
      }

      .mission-info-content[data-panel="purity"] {
        border-left-color: #0c4a8b;
      }
      .mission-info-content[data-panel="trust"] {
        border-left-color: #5b21b6;
      }
      .mission-info-content[data-panel="innovation"] {
        border-left-color: #15803d;
      }
      .mission-info-content[data-panel="sustainability"] {
        border-left-color: #b45309;
      }

      .mission-info-content.is-showing {
        opacity: 1;
        transform: translateY(0);
      }

      .mission-info-content.is-hiding {
        opacity: 0;
        transform: translateY(22px);
      }

      .info-title {
        display: flex;
        align-items: center;
        gap: 1.2rem;
        margin-bottom: 1.2rem;
      }

      .info-icon {
        display: grid;
        place-items: center;
        width: 72px;
        height: 72px;
        border-radius: 1.25rem;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(148, 163, 184, 0.2);
        box-shadow: 0 8px 18px -12px rgba(15, 23, 42, 0.12);
        flex-shrink: 0;
        animation: infoIconAppear 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        opacity: 0;
      }

      .info-icon i {
        width: 2.2rem !important;
        height: 2.2rem !important;
        stroke-width: 2.2 !important;
      }

      .info-title h3 {
        margin: 0;
        font-size: clamp(1.8rem, 2.5vw, 2.4rem);
        font-weight: 800;
        letter-spacing: -0.04em;
        color: #0f172a;
        animation: infoTitleAppear 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards
          0.1s both;
      }

      .info-description {
        margin: 0 0 1.6rem 0;
        color: #64748b;
        font-size: clamp(1.05rem, 1.4vw, 1.2rem);
        line-height: 1.7;
        letter-spacing: -0.01em;
        font-weight: 500;
        animation: infoDescAppear 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards
          0.2s both;
      }

      .info-points {
        list-style: none;
        margin: 0 0 1.8rem 0;
        padding: 0;
      }

      .info-points li {
        margin-bottom: 0.85rem;
        padding-left: 1.8rem;
        position: relative;
        color: #475569;
        font-size: clamp(1rem, 1.2vw, 1.1rem);
        line-height: 1.6;
        font-weight: 500;
        animation: infoPointAppear 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        opacity: 0;
      }

      .info-points li:nth-child(1) {
        animation-delay: 0.3s;
      }
      .info-points li:nth-child(2) {
        animation-delay: 0.4s;
      }
      .info-points li:nth-child(3) {
        animation-delay: 0.5s;
      }
      .info-points li:nth-child(4) {
        animation-delay: 0.6s;
      }

      .info-points li::before {
        content: "•";
        position: absolute;
        left: 0;
        color: inherit;
        font-weight: 800;
        font-size: 1.4rem;
        line-height: 1;
        top: -0.15em;
      }

      .info-impact {
        margin-top: 1.8rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(148, 163, 184, 0.16);
        color: #64748b;
        font-size: clamp(0.95rem, 1.1vw, 1.05rem);
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        animation: infoImpactAppear 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards
          0.7s both;
      }

      @keyframes drawMissionLine {
        0% {
          transform: scaleX(0);
        }
        100% {
          transform: scaleX(1);
        }
      }

      @keyframes missionParticleTravel {
        0% {
          opacity: 0;
          transform: translateX(0) scale(0.8);
        }
        15% {
          opacity: 1;
          transform: translateX(0) scale(1);
        }
        100% {
          opacity: 0;
          transform: translateX(var(--travel-distance, 0px)) scale(1.1);
        }
      }

      @keyframes missionPointReveal {
        0% {
          opacity: 0;
          transform: translateY(20px) scale(0.8);
        }
        100% {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      @keyframes missionPulse {
        0%,
        100% {
          box-shadow:
            0 0 0 10px rgba(255, 255, 255, 0.6),
            0 0 0 3px rgba(255, 255, 255, 0.95);
        }
        50% {
          box-shadow:
            0 0 0 14px rgba(255, 255, 255, 0.3),
            0 0 0 3px rgba(255, 255, 255, 0.95),
            0 0 40px rgba(59, 130, 246, 0.2);
        }
      }

      @keyframes missionRing {
        0%,
        100% {
          opacity: 0.22;
          transform: scale(0.92);
        }
        50% {
          opacity: 0;
          transform: scale(1.18);
        }
      }

      @keyframes missionGlow {
        0% {
          box-shadow:
            0 0 0 8px rgba(59, 130, 246, 0.08),
            0 0 0 2px rgba(255, 255, 255, 0.85),
            0 0 20px rgba(59, 130, 246, 0.12);
        }
        100% {
          box-shadow:
            0 0 0 12px rgba(59, 130, 246, 0.05),
            0 0 0 2px rgba(255, 255, 255, 0.95),
            0 0 32px rgba(59, 130, 246, 0.16);
        }
      }

      @keyframes infoIconAppear {
        0% {
          opacity: 0;
          transform: scale(0.7);
        }
        100% {
          opacity: 1;
          transform: scale(1);
        }
      }

      @keyframes infoTitleAppear {
        0% {
          opacity: 0;
          transform: translateY(12px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes infoDescAppear {
        0% {
          opacity: 0;
          transform: translateY(10px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes infoPointAppear {
        0% {
          opacity: 0;
          transform: translateY(10px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes infoImpactAppear {
        0% {
          opacity: 0;
          transform: translateY(8px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @media (max-width: 767px) {
        .mission-vision-intro {
          grid-template-columns: 1fr;
          gap: 1.5rem;
          margin-bottom: 2rem;
        }

        .mission-track {
          flex-direction: column;
          align-items: center;
          gap: 2rem;
          min-height: auto;
          padding: 1.5rem 0;
        }

        .mission-track::before {
          top: 0;
          bottom: 0;
          left: 50%;
          right: auto;
          width: 3px;
          height: auto;
          transform: translateX(-50%) scaleY(0);
          transform-origin: top center;
        }

        .mission-progress {
          top: 0;
          left: 31px;
          width: 2px;
          height: 0;
          background: linear-gradient(
            180deg,
            #0c4a8b,
            #5b21b6,
            #15803d,
            #b45309
          );
          transition: height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .mission-timeline.is-ready .mission-track::before {
          animation: drawMissionLineVertical 1.4s cubic-bezier(0.22, 1, 0.36, 1)
            forwards;
        }

        .mission-particle {
          left: 50%;
          top: 0;
          transform: translateX(-50%);
        }

        .mission-timeline.is-animating .mission-particle {
          animation: none;
          opacity: 0.9;
        }

        .timeline-icon-wrap {
          width: 80px;
          height: 80px;
        }

        .timeline-point i {
          width: 2rem !important;
          height: 2rem !important;
        }

        .timeline-label {
          font-size: 1.1rem;
        }

        .mission-info-content {
          padding: 2rem 1.8rem;
        }

        .info-title {
          gap: 1rem;
          margin-bottom: 1rem;
        }

        .info-icon {
          width: 64px;
          height: 64px;
        }
      }

      @keyframes drawMissionLineVertical {
        0% {
          transform: translateX(-50%) scaleY(0);
        }
        100% {
          transform: translateX(-50%) scaleY(1);
        }
      }

      @keyframes missionParticleTravelVertical {
        0% {
          opacity: 0;
          transform: translateX(-50%) translateY(0) scale(0.8);
        }
        15% {
          opacity: 1;
          transform: translateX(-50%) translateY(0) scale(1);
        }
        100% {
          opacity: 0;
          transform: translateX(-50%) translateY(var(--travel-distance, 0px))
            scale(1.1);
        }
      }

      @media (max-width: 767px) {
        .mission-track {
          flex-direction: column;
          align-items: flex-start;
          gap: 1.15rem;
          min-height: 0;
          padding-left: 1.1rem;
        }

        .mission-track::before {
          left: 31px;
          right: auto;
          top: 0;
          bottom: 0;
          width: 2px;
          height: auto;
          background: linear-gradient(
            180deg,
            rgba(59, 130, 246, 0.28) 0%,
            rgba(99, 102, 241, 0.25) 35%,
            rgba(16, 185, 129, 0.25) 65%,
            rgba(234, 179, 8, 0.25) 100%
          );
          transform-origin: top center;
        }

        .mission-timeline.is-ready .mission-track::before {
          animation: drawMissionLineVertical 1.1s cubic-bezier(0.22, 1, 0.36, 1)
            forwards;
        }

        .timeline-point {
          width: 100%;
          flex-direction: row;
          justify-content: flex-start;
          gap: 1rem;
          opacity: 0;
        }

        .timeline-dot {
          left: 31px;
          top: 50%;
        }

        .mission-particle {
          left: 31px;
          top: 0;
        }

        .timeline-icon-wrap {
          width: 62px;
          height: 62px;
        }

        .timeline-label {
          font-size: 1.2rem;
        }

        .mission-info-content {
          padding: 1.5rem 1.2rem;
        }
      }

      @keyframes drawMissionLineVertical {
        0% {
          transform: scaleY(0);
        }
        100% {
          transform: scaleY(1);
        }
      }

      /* Mission & Vision: light two-column vertical journey */
      .mission-journey-shell {
        display: grid;
        grid-template-columns: minmax(230px, 0.35fr) minmax(0, 0.65fr);
        gap: clamp(2rem, 5vw, 5rem);
        max-width: 1120px;
        margin: 3rem auto 0;
        align-items: stretch;
      }

      .mission-timeline {
        margin: 0;
        padding: 0;
        min-height: 0;
      }

      .mission-track {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.6rem;
        min-height: 100%;
        padding: 0;
      }

      .mission-track::before {
        top: 28px;
        bottom: 28px;
        left: 28px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(
          180deg,
          rgba(125, 181, 230, 0.3),
          rgba(190, 162, 226, 0.3),
          rgba(131, 196, 153, 0.3),
          rgba(231, 190, 117, 0.3)
        );
        transform: scaleY(0);
        transform-origin: top center;
      }

      .mission-timeline.is-ready .mission-track::before {
        animation: drawMissionLineVertical 0.7s cubic-bezier(0.22, 1, 0.36, 1)
          forwards;
      }

      .mission-progress {
        top: 28px;
        left: 28px;
        width: 2px;
        height: 0;
        background: linear-gradient(180deg, #7db5e6, #bea2e2, #83c499, #e7be75);
        box-shadow: 0 0 10px rgba(125, 181, 230, 0.22);
      }

      .mission-particle {
        top: 21px;
        left: 21px;
        width: 14px;
        height: 14px;
        background: radial-gradient(
          circle at 35% 35%,
          #fff,
          #a8d5f2 50%,
          #7db5e6
        );
        box-shadow: 0 0 14px rgba(125, 181, 230, 0.55);
        transform: none;
      }

      .timeline-point {
        flex: 0 0 auto;
        width: 100%;
        min-height: 84px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 1rem;
        padding: 0;
        text-align: left;
      }

      .timeline-point:hover {
        transform: translateY(-3px) scale(1.02);
        filter: drop-shadow(0 9px 14px rgba(15, 23, 42, 0.08));
      }

      .timeline-icon-wrap {
        width: 58px;
        height: 58px;
        flex: 0 0 58px;
        background: #fff;
        border-width: 1.5px;
        box-shadow: 0 5px 14px -10px rgba(15, 23, 42, 0.26);
      }

      .timeline-point i {
        width: 1.45rem !important;
        height: 1.45rem !important;
        stroke-width: 2 !important;
      }
      .timeline-point[data-tone="sky"] .timeline-icon-wrap {
        border-color: rgba(125, 181, 230, 0.62);
        background: #f7fbff;
      }
      .timeline-point[data-tone="violet"] .timeline-icon-wrap {
        border-color: rgba(190, 162, 226, 0.62);
        background: #fcfaff;
      }
      .timeline-point[data-tone="green"] .timeline-icon-wrap {
        border-color: rgba(131, 196, 153, 0.62);
        background: #f8fdf9;
      }
      .timeline-point[data-tone="amber"] .timeline-icon-wrap {
        border-color: rgba(231, 190, 117, 0.66);
        background: #fffdf8;
      }
      .timeline-point[data-tone="sky"] i {
        color: #609fce;
      }
      .timeline-point[data-tone="violet"] i {
        color: #9978c4;
      }
      .timeline-point[data-tone="green"] i {
        color: #5fa77a;
      }
      .timeline-point[data-tone="amber"] i {
        color: #c99842;
      }

      .timeline-point.is-active .timeline-icon-wrap {
        transform: scale(1.08);
        background: #fff;
      }
      .timeline-point[data-tone="sky"].is-active .timeline-icon-wrap {
        background: #f0f8ff;
        border-color: #78b4e1;
        box-shadow:
          0 0 0 6px rgba(125, 181, 230, 0.13),
          0 7px 16px -11px rgba(78, 142, 190, 0.42);
      }
      .timeline-point[data-tone="violet"].is-active .timeline-icon-wrap {
        background: #faf5ff;
        border-color: #b08bd8;
        box-shadow:
          0 0 0 6px rgba(190, 162, 226, 0.14),
          0 7px 16px -11px rgba(128, 87, 177, 0.4);
      }
      .timeline-point[data-tone="green"].is-active .timeline-icon-wrap {
        background: #f2fbf4;
        border-color: #79ba8f;
        box-shadow:
          0 0 0 6px rgba(131, 196, 153, 0.14),
          0 7px 16px -11px rgba(62, 139, 88, 0.35);
      }
      .timeline-point[data-tone="amber"].is-active .timeline-icon-wrap {
        background: #fff9ed;
        border-color: #d8a958;
        box-shadow:
          0 0 0 6px rgba(231, 190, 117, 0.15),
          0 7px 16px -11px rgba(177, 123, 36, 0.35);
      }
      .timeline-point.is-active .timeline-icon-wrap::after {
        inset: -7px;
        border-width: 1px;
      }
      .timeline-point.is-active i {
        color: #4e8ebe !important;
      }
      .timeline-point[data-tone="violet"].is-active i {
        color: #8057b1 !important;
      }
      .timeline-point[data-tone="green"].is-active i {
        color: #3e8b58 !important;
      }
      .timeline-point[data-tone="amber"].is-active i {
        color: #b17b24 !important;
      }

      .timeline-label {
        font-size: 1rem;
        color: #64748b;
      }
      .timeline-point.is-active .timeline-label {
        color: #334155;
        font-weight: 800;
      }
      .timeline-point.is-active .timeline-label::after {
        display: none;
      }
      .timeline-point.is-active::after {
        content: "";
        position: absolute;
        left: 66px;
        right: -2.8rem;
        top: 29px;
        height: 1px;
        background: linear-gradient(
          90deg,
          rgba(125, 181, 230, 0.55),
          rgba(125, 181, 230, 0)
        );
        z-index: -1;
      }

      .mission-info-panel {
        min-height: 400px;
        margin: 0;
        padding: 0;
        align-self: center;
      }
      .mission-info-content {
        min-height: 400px;
        padding: clamp(2rem, 4vw, 3.25rem);
        border-radius: 1.5rem;
        border-left-width: 4px;
        box-shadow: 0 18px 42px -30px rgba(15, 23, 42, 0.32);
      }
      .mission-info-content[data-panel="purity"] {
        border-left-color: #8fc4e8;
      }
      .mission-info-content[data-panel="trust"] {
        border-left-color: #c3a7e3;
      }
      .mission-info-content[data-panel="innovation"] {
        border-left-color: #92cba5;
      }
      .mission-info-content[data-panel="sustainability"] {
        border-left-color: #e6be78;
      }
      .info-icon {
        width: 64px;
        height: 64px;
        border-radius: 1.1rem;
      }
      .info-icon i {
        width: 1.9rem !important;
        height: 1.9rem !important;
      }
      .mission-info-content[data-panel="purity"] .info-icon {
        color: #609fce !important;
        background: #f0f8ff !important;
      }
      .mission-info-content[data-panel="trust"] .info-icon {
        color: #9978c4 !important;
        background: #faf5ff !important;
      }
      .mission-info-content[data-panel="innovation"] .info-icon {
        color: #5fa77a !important;
        background: #f2fbf4 !important;
      }
      .mission-info-content[data-panel="sustainability"] .info-icon {
        color: #c99842 !important;
        background: #fff9ed !important;
      }

      @media (max-width: 767px) {
        .mission-journey-shell {
          grid-template-columns: 1fr;
          gap: 1.5rem;
          margin-top: 2rem;
        }
        .mission-timeline {
          padding: 0;
        }
        .mission-track {
          gap: 0.25rem;
        }
        .timeline-point {
          min-height: 70px;
        }
        .mission-info-panel,
        .mission-info-content {
          min-height: 0;
        }
        .timeline-point.is-active::after {
          display: none;
        }
      }


      /* Problem Network — premium milk-chain story */
      .problem-network-shell {
        position: relative;
        max-width: 760px;
        margin: 0 auto;
        padding: 0.5rem 0 0;
        perspective: 1200px;
        overflow: visible;
      }
      .problem-network {
        position: relative;
        width: min(600px, 78vw);
        height: 430px;
        margin: 0 auto;
        transform-origin: center center;
        border-radius: 2.2rem;
        background:
          radial-gradient(circle at 30% 20%, rgba(247, 199, 110, 0.14), transparent 18%),
          radial-gradient(circle at 72% 78%, rgba(86, 167, 125, 0.12), transparent 24%),
          linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(242, 247, 250, 0.96));
        border: 1px solid rgba(148, 163, 184, 0.15);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.9),
          0 28px 80px -42px rgba(15, 23, 42, 0.28);
        filter: drop-shadow(0 18px 40px rgba(15, 23, 42, 0.06));
        animation: networkFloat 7s ease-in-out infinite;
        transform-style: preserve-3d;
        overflow: visible;
      }
      .problem-network::before {
        content: "";
        position: absolute;
        inset: 16% 18%;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(145, 167, 200, 0.12),
          rgba(145, 167, 200, 0.03) 34%,
          rgba(255, 255, 255, 0) 72%
        );
        border: 1px solid rgba(148, 163, 184, 0.14);
        box-shadow: 0 0 90px rgba(59, 130, 246, 0.06);
        animation: haloPulse 5s ease-in-out infinite;
      }
      .problem-network::after {
        content: "";
        position: absolute;
        inset: 24% 28%;
        border-radius: 50%;
        border: 1px dashed rgba(148, 163, 184, 0.22);
        animation: orbitRing 18s linear infinite;
      }
      .problem-core {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 150px;
        height: 150px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.99),
          rgba(234, 245, 255, 0.96)
        );
        border: 1px solid rgba(125, 181, 230, 0.28);
        box-shadow:
          0 30px 60px -28px rgba(15, 23, 42, 0.2),
          inset 0 0 0 8px rgba(255, 255, 255, 0.96),
          0 0 0 20px rgba(125, 181, 230, 0.04);
        display: grid;
        place-items: center;
        z-index: 4;
        animation: corePulse 5s ease-in-out infinite;
        transition:
          width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
          height 0.7s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform, box-shadow, width, height;
        overflow: visible;
      }
      .problem-core.is-selected {
        width: 290px;
        height: 290px;
        box-shadow:
          0 36px 72px -30px rgba(15, 23, 42, 0.22),
          inset 0 0 0 8px rgba(255, 255, 255, 0.96),
          0 0 0 28px rgba(125, 181, 230, 0.04);
        overflow: hidden;
      }
      .problem-core::before {
        content: "";
        position: absolute;
        inset: 20px;
        border-radius: 50%;
        background: radial-gradient(
          circle at 35% 30%,
          rgba(255, 255, 255, 1),
          rgba(191, 219, 254, 0.9)
        );
        border: 1px solid rgba(125, 211, 252, 0.3);
      }
      .problem-core-intro {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        gap: 0.8rem;
        color: #0f4a76;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        text-align: center;
        padding: 0 1.2rem;
        transition:
          opacity 0.35s ease,
          transform 0.35s ease;
      }
      .problem-core.is-selected .problem-core-intro {
        opacity: 0;
        transform: scale(0.78);
        pointer-events: none;
      }
      .problem-core i {
        width: 52px !important;
        height: 52px !important;
        stroke-width: 2.2 !important;
        color: #0f6ca8;
        position: relative;
        z-index: 1;
      }
      .problem-core .problem-detail-card {
        position: absolute;
        inset: 10px 12px 10px 12px;
        width: auto;
        margin: 0;
        padding: 1rem 1.05rem 0.9rem;
        border: 0;
        border-radius: 50%;
        background: transparent;
        box-shadow: none;
        opacity: 0;
        transform: translateY(18px) scale(0.96);
        transition:
          opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
        overflow: visible;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
      .problem-core.is-selected .problem-detail-card {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      .problem-core .problem-detail-card.is-showing {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      .problem-core .problem-detail-card.is-hiding {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
      }
      .problem-core .problem-detail-head {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-bottom: 0.38rem;
        width: 100%;
      }
      .problem-core .detail-icon {
        width: 40px;
        height: 40px;
        border-radius: 0.85rem;
        flex-shrink: 0;
      }
      .problem-core .detail-icon i {
        width: 18px !important;
        height: 18px !important;
      }
      .problem-core .problem-detail-title {
        font-size: clamp(0.78rem, 1.25vw, 0.94rem);
        line-height: 1.08;
        max-width: 150px;
        text-align: center;
        margin: 0;
      }
      .problem-core .problem-detail-text {
        font-size: clamp(0.62rem, 0.82vw, 0.74rem);
        line-height: 1.35;
        margin: 0.2rem auto 0.42rem;
        max-width: 200px;
        text-align: center;
      }
      .problem-core .problem-detail-points {
        list-style: none;
        padding: 0;
        margin: 0 auto 0.32rem;
        width: min(190px, 82%);
        text-align: center;
      }
      .problem-core .problem-detail-points li {
        position: relative;
        padding-left: 0;
        margin: 0.2rem 0;
        color: rgba(71, 85, 105, 0.82);
        font-size: clamp(0.56rem, 0.78vw, 0.66rem);
        line-height: 1.25;
        opacity: 0;
        transform: translateY(7px);
        text-align: center;
        animation: problemPointIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }
      .problem-core .problem-detail-points li::before {
        content: "";
        position: static;
        display: none;
      }
      .problem-core .problem-detail-points li:nth-child(1) {
        animation-delay: 0.2s;
      }
      .problem-core .problem-detail-points li:nth-child(2) {
        animation-delay: 0.28s;
      }
      .problem-core .problem-detail-points li:nth-child(3) {
        animation-delay: 0.36s;
      }
      .problem-core .problem-detail-impact {
        margin: 0 auto;
        padding-top: 0.25rem;
        border-top: 1px solid rgba(148, 163, 184, 0.18);
        width: min(190px, 82%);
        color: rgba(71, 85, 105, 0.82);
        font-size: 0.46rem;
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        opacity: 0;
        text-align: center;
        animation: problemPointIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards
          0.44s;
      }
      .network-particle {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        opacity: 0;
        pointer-events: none;
        z-index: 5;
        background: radial-gradient(
          circle at 35% 35%,
          #fff,
          #bfe4ff 55%,
          #69b6e8
        );
        box-shadow: 0 0 18px rgba(105, 182, 232, 0.8);
      }
      .network-connection {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 3px;
        height: 230px;
        border-radius: 999px;
        background: linear-gradient(
          180deg,
          rgba(var(--line-rgb, 125, 181, 230), 0.08),
          rgba(var(--line-rgb, 125, 181, 230), 0.74),
          rgba(var(--line-rgb, 125, 181, 230), 0.08)
        );
        transform: translate(-50%, -50%) rotate(var(--angle));
        opacity: 0.32;
        z-index: 1;
        transition:
          opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.45s ease,
          filter 0.45s ease;
        animation: lineGlow 3s ease-in-out infinite alternate;
        will-change: opacity, transform, box-shadow;
      }
      .network-connection.is-active {
        opacity: 1;
        filter: brightness(1.08);
        box-shadow: 0 0 20px rgba(var(--line-rgb), 0.3);
      }
      .problem-node {
        position: absolute;
        left: 50%;
        top: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        width: 92px;
        min-height: 92px;
        padding: 0.52rem 0.38rem 0.56rem;
        border-radius: 1.35rem;
        border: 1px solid rgba(148, 163, 184, 0.18);
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.99),
          rgba(244, 247, 250, 0.98)
        );
        box-shadow: 0 20px 32px -24px rgba(15, 23, 42, 0.3);
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
        cursor: pointer;
        transition:
          transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
          border-color 0.45s ease,
          background 0.45s ease,
          filter 0.45s ease,
          opacity 0.45s ease;
        z-index: 3;
        animation: nodeFloat 5.2s ease-in-out infinite;
        animation-delay: var(--delay, 0s);
        will-change: transform, box-shadow, filter;
      }
      .problem-node::before {
        content: "";
        position: absolute;
        inset: auto 12px 11px;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(
          90deg,
          rgba(var(--tone-rgb), 0.12),
          rgba(var(--tone-rgb), 0.76),
          rgba(var(--tone-rgb), 0.12)
        );
      }
      .problem-node:hover {
        transform: translate(
          calc(-50% + var(--x)),
          calc(-50% + var(--y) - 8px)
        );
        box-shadow: 0 24px 42px -24px rgba(15, 23, 42, 0.24);
        border-color: rgba(var(--tone-rgb), 0.38);
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 1),
          rgba(244, 247, 250, 0.98)
        );
        filter: saturate(1.08);
      }
      .problem-node.is-active {
        border-color: rgba(var(--tone-rgb), 0.65);
        box-shadow:
          0 22px 42px -22px rgba(var(--tone-rgb), 0.5),
          0 0 0 5px rgba(var(--tone-rgb), 0.12);
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 1),
          rgba(248, 250, 252, 1)
        );
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)))
          scale(1.04);
      }
      .problem-node-icon {
        width: 46px;
        height: 46px;
        border-radius: 1rem;
        display: grid;
        place-items: center;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 1),
          rgba(var(--tone-rgb), 0.12)
        );
        border: 1px solid rgba(var(--tone-rgb), 0.28);
        position: relative;
        z-index: 1;
      }
      .problem-node-icon i {
        width: 22px !important;
        height: 22px !important;
        color: rgb(var(--tone-rgb));
      }
      .problem-node-name {
        position: relative;
        z-index: 1;
        font-size: 0.58rem;
        line-height: 1.12;
        font-weight: 800;
        letter-spacing: -0.02em;
        text-align: center;
        color: #0f172a;
      }
      .problem-detail-card {
        position: relative;
        width: min(680px, calc(100% - 2rem));
        margin: 0 auto;
        padding: 1.25rem 1.2rem 1.3rem;
        border-radius: 1.5rem;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.96),
          rgba(248, 250, 252, 0.98)
        );
        border: 1px solid rgba(148, 163, 184, 0.16);
        box-shadow: 0 30px 55px -30px rgba(15, 23, 42, 0.18);
        opacity: 0;
        transform: translateY(22px) scale(0.985);
        transition:
          opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
          border-color 0.42s ease,
          box-shadow 0.42s ease;
        will-change: opacity, transform;
      }
      .problem-detail-card[data-tone="sky"] {
        border-color: rgba(14, 165, 233, 0.28);
      }
      .problem-detail-card[data-tone="amber"] {
        border-color: rgba(245, 158, 11, 0.28);
      }
      .problem-detail-card[data-tone="red"] {
        border-color: rgba(239, 68, 68, 0.28);
      }
      .problem-detail-card[data-tone="green"] {
        border-color: rgba(34, 197, 94, 0.28);
      }
      .problem-detail-card[data-tone="violet"] {
        border-color: rgba(139, 92, 246, 0.28);
      }
      .problem-detail-card[data-tone="indigo"] {
        border-color: rgba(99, 102, 241, 0.28);
      }
      .problem-detail-card.is-showing {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      .problem-detail-card.is-hiding {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
      }
      .problem-detail-head {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        margin-bottom: 0.75rem;
      }
      .detail-icon {
        display: grid;
        place-items: center;
        width: 54px;
        height: 54px;
        border-radius: 1rem;
        border: 1px solid rgba(148, 163, 184, 0.18);
        background: rgba(255, 255, 255, 1);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
      }
      .detail-icon i {
        width: 24px !important;
        height: 24px !important;
        color: rgb(var(--detail-tone-rgb, 14 165 233));
      }
      .problem-detail-title {
        margin: 0;
        font-size: clamp(1.4rem, 1.8vw, 1.9rem);
        font-weight: 800;
        letter-spacing: -0.04em;
        color: #0f172a;
      }
      .problem-detail-text {
        margin: 0;
        color: #475569;
        font-size: clamp(1rem, 1.2vw, 1.2rem);
        line-height: 1.7;
        letter-spacing: -0.02em;
      }
      @keyframes networkFloat {
        0%,
        100% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-8px);
        }
      }
      @keyframes haloPulse {
        0%,
        100% {
          opacity: 0.7;
          transform: scale(0.98);
        }
        50% {
          opacity: 1;
          transform: scale(1.03);
        }
      }
      @keyframes orbitRing {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      @keyframes corePulse {
        0%,
        100% {
          box-shadow:
            0 28px 52px -26px rgba(15, 23, 42, 0.18),
            inset 0 0 0 5px rgba(255, 255, 255, 0.9),
            0 0 0 rgba(58, 111, 247, 0);
        }
        50% {
          box-shadow:
            0 32px 58px -22px rgba(58, 111, 247, 0.18),
            inset 0 0 0 5px rgba(255, 255, 255, 0.9),
            0 0 0 18px rgba(58, 111, 247, 0.06);
        }
      }
      @keyframes lineGlow {
        0% {
          opacity: 0.28;
          box-shadow: 0 0 0 rgba(58, 111, 247, 0);
        }
        100% {
          opacity: 1;
          box-shadow: 0 0 18px rgba(58, 111, 247, 0.2);
        }
      }
      @keyframes nodeFloat {
        0%,
        100% {
          transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)))
            scale(1);
        }
        50% {
          transform: translate(
              calc(-50% + var(--x)),
              calc(-50% + var(--y) - 8px)
            )
            scale(1.02);
        }
      }
      @keyframes problemPointIn {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes problemNodePulse {
        50% {
          box-shadow:
            0 20px 40px -20px rgba(var(--tone-rgb), 0.48),
            0 0 0 9px rgba(var(--tone-rgb), 0);
        }
      }
      @keyframes coreReveal {
        from {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.88);
        }
        to {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }
      }
      @keyframes connectionReveal {
        from {
          opacity: 0;
        }
        to {
          opacity: 0.36;
        }
      }
      @keyframes nodeReveal {
        from {
          opacity: 0;
          transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)))
            scale(0.85);
        }
        to {
          opacity: 1;
          transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)))
            scale(1);
        }
      }
      .problem-network:not(.is-visible) .problem-core,
      .problem-network:not(.is-visible) .problem-node {
        opacity: 0;
      }
      .problem-network.is-visible .problem-core {
        animation: coreReveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
      }
      .problem-network.is-visible .network-connection {
        animation: connectionReveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
      }
      .problem-network.is-visible .problem-node {
        animation: nodeReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
      }
      .problem-network.is-visible .problem-node:nth-of-type(1) {
        animation-delay: 0.1s;
      }
      .problem-network.is-visible .problem-node:nth-of-type(2) {
        animation-delay: 0.17s;
      }
      .problem-network.is-visible .problem-node:nth-of-type(3) {
        animation-delay: 0.24s;
      }
      .problem-network.is-visible .problem-node:nth-of-type(4) {
        animation-delay: 0.31s;
      }
      .problem-network.is-visible .problem-node:nth-of-type(5) {
        animation-delay: 0.38s;
      }
      .problem-network.is-visible .problem-node:nth-of-type(6) {
        animation-delay: 0.45s;
      }
      .problem-node.is-active {
        border-color: rgba(var(--tone-rgb), 0.65);
        box-shadow:
          0 12px 30px -20px rgba(var(--tone-rgb), 0.65),
          0 0 0 5px rgba(var(--tone-rgb), 0.11);
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)))
          scale(1.05);
        animation: problemNodePulse 2.2s ease-in-out infinite;
      }
      .network-connection.is-active {
        opacity: 0.9;
        box-shadow: 0 0 14px rgba(125, 181, 230, 0.35);
      }
      @media (max-width: 767px) {
        .problem-network-shell {
          padding-top: 0.3rem;
        }
        .problem-network {
          width: min(620px, 92vw);
          height: 470px;
          margin-bottom: -36px;
          transform: scale(0.86);
          transform-origin: center center;
        }
        .problem-core {
          width: 150px;
          height: 150px;
        }
        .problem-node {
          width: 100px;
          min-height: 100px;
          padding: 0.5rem 0.38rem;
        }
        .problem-node-name {
          font-size: 0.62rem;
        }
        .network-connection {
          height: 150px;
        }
        .problem-detail-card {
          padding: 0.9rem 0.8rem 0.85rem;
        }
      }

      /* Our Solution — full-bleed marquee styles */
      .solution-full-bleed {
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        width: 100vw;
        box-sizing: border-box;
        padding: 28px 0;
      }
      .solution-box {
        max-width: none;
        margin: 0 auto;
        background: transparent;
        border: 0;
        border-radius: 12px;
        box-shadow: none;
        overflow: hidden;
      }
      .solution-header {
        padding: 20px 36px;
      }
      .solution-header h3 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 800;
      }
      .solution-header p {
        margin: 6px 0 0;
        color: var(--text-secondary);
        font-size: 1rem;
        max-width: 900px;
      }

      .solution-carousel {
        width: 100%;
        overflow: hidden;
      }
      .solution-track {
        display: flex;
        align-items: stretch;
        width: max-content;
        gap: 16px;
        will-change: transform;
        animation: marquee 25s linear infinite;
      }

      /* Balanced card width so all 8 items stay in the continuous loop */
      .solution-card {
        flex: 0 0 260px;
        width: 260px;
        max-width: 260px;
        box-sizing: border-box;
        padding: 10px;
        position: relative;
        flex-shrink: 0;
      }
      @media (min-width: 640px) {
        .solution-card {
          flex-basis: 290px;
          width: 290px;
          max-width: 290px;
        }
      }
      @media (min-width: 1024px) {
        .solution-card {
          flex-basis: 320px;
          width: 320px;
          max-width: 320px;
        }
      }

      /* New card layout: polished showcase cards for all 8 solution items */
      .solution-card-inner {
        border-radius: 18px;
        overflow: hidden;
        background:
          linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) padding-box,
          linear-gradient(
              135deg,
              rgba(125, 181, 230, 0.58),
              rgba(190, 162, 226, 0.38),
              rgba(131, 196, 153, 0.45)
            )
            border-box;
        border: 1px solid transparent;
        box-shadow: 0 22px 40px -26px rgba(15, 23, 42, 0.28);
        display: flex;
        flex-direction: column;
        height: 100%;
        transition:
          transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.35s ease,
          border-color 0.35s ease;
        transition:
          transform 0.28s ease,
          box-shadow 0.28s ease,
          border-color 0.28s ease;
      }

      /* Keep full image visible without cropping and keep all cards equal size */
      .solution-image {
        width: 100%;
        height: 200px;
        overflow: hidden;
        background: linear-gradient(135deg, #edf6ff 0%, #f8fafc 100%);
        display: block;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
      }
      .solution-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        transition: transform 0.5s ease;
        background: #fff;
      }

      /* Title block directly below image */
      .solution-title {
        padding: 12px 14px 10px;
        background: linear-gradient(
          90deg,
          rgba(59, 130, 246, 0.12),
          rgba(168, 85, 247, 0.08)
        );
        color: #0f172a;
        font-weight: 800;
        display: flex;
        gap: 8px;
        align-items: center;
        min-height: 58px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.06);
      }
      .solution-title .num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        height: 32px;
        border-radius: 999px;
        background: linear-gradient(135deg, #1d4ed8, #7c3aed);
        color: white;
        font-weight: 900;
        font-size: 0.82rem;
        box-shadow: 0 8px 18px -10px rgba(59, 130, 246, 0.9);
      }
      .solution-title .label {
        font-weight: 800;
        font-size: 1rem;
        line-height: 1.2;
      }

      /* Solution block below the title */
      .solution-desc {
        padding: 12px 14px 16px;
        background: #ffffff;
        color: var(--text-secondary);
        font-size: 0.84rem;
        line-height: 1.5;
        min-height: 92px;
        border-top: 1px solid rgba(15, 23, 42, 0.03);
      }
      .solution-desc .sol-label {
        display: block;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        color: #2c7be5;
        margin-bottom: 8px;
        text-transform: uppercase;
      }

      /* Remove previous overlay/badge rules if present */
      .solution-overlay,
      .solution-badge {
        display: none !important;
      }

      /* Hover: polished lift and image zoom */
      .solution-card-inner:hover {
        transform: translateY(-6px);
        box-shadow:
          0 28px 50px -24px rgba(54, 123, 191, 0.34),
          0 0 0 4px rgba(125, 181, 230, 0.09);
        background:
          linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) padding-box,
          linear-gradient(135deg, #77afe0, #b595d9, #78bb91, #deb462) border-box;
      }
      .solution-card-inner:hover .solution-image img {
        transform: scale(1.05);
      }

      /* Marquee animation: repeat the full 16-card set continuously without stopping */
      @keyframes marquee {
        0% {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(-50%, 0, 0);
        }
      }

      /* force smoothness */
      .solution-track,
      .solution-card-inner {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
      }

      /* Gradient Banner for Conclusion */
      .gradient-banner {
        background-image: linear-gradient(90deg, var(--sky-blue), var(--green));
      }

      /* Quick Nav Button */
      .quick-nav {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        z-index: 40; /* Lowered from 50 to be below sticky header */
      }
      .quick-nav-menu {
        position: absolute;
        bottom: 100%;
        right: 0;
        margin-bottom: 0.75rem; /* 12px */
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .quick-nav:hover .quick-nav-menu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
      }

      /* Our Journey Timeline */
      .journey-timeline {
        --journey-progress: 0;
        position: relative;
      }
      .journey-timeline::before,
      .journey-timeline::after {
        content: "";
        position: absolute;
        top: 2rem;
        bottom: 2rem;
        left: 50%;
        width: 3px;
        transform: translateX(-50%);
        border-radius: 999px;
      }
      .journey-timeline::before {
        background: #cbd5e1;
      }
      .journey-timeline::after {
        background: var(--sky-blue);
        transform: translateX(-50%) scaleY(var(--journey-progress));
        transform-origin: top;
        transition: transform 0.7s ease;
      }
      .journey-item {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr);
        align-items: center;
        gap: 0;
        min-height: 21rem;
        margin-bottom: 6rem;
        opacity: 1;
        transition:
          opacity 0.75s ease,
          transform 0.75s ease;
      }
      .journey-item--image-left,
      .journey-item--image-right,
      .journey-item[data-journey-index="0"] {
        transform: none;
      }
      .journey-item.is-visible {
        opacity: 1;
        transform: translateX(0);
      }
      .journey-item:last-child {
        margin-bottom: 0;
      }
      .journey-media {
        grid-row: 1;
        margin: 0;
        z-index: 1;
        overflow: hidden;
        border: 1px solid var(--border-color);
        border-radius: 0.875rem;
        background: var(--bg-light);
        box-shadow: 0 18px 35px -18px rgba(15, 23, 42, 0.35);
      }
      .journey-item--image-left .journey-media {
        grid-column: 1;
      }
      .journey-item--image-right .journey-media {
        grid-column: 3;
      }
      .journey-image {
        display: block;
        width: 100%;
        height: 21rem;
        object-fit: cover;
        object-position: center;
      }
      .journey-image--avishkar {
        object-position: center top;
      }
      .journey-image--chapters {
        object-position: center top;
      }
      .journey-content {
        grid-row: 1;
        z-index: 1;
        max-width: 29rem;
        padding: 1.5rem 1.75rem;
      }
      .journey-item--image-left .journey-content {
        grid-column: 3;
        justify-self: start;
      }
      .journey-item--image-right .journey-content {
        grid-column: 1;
        justify-self: end;
      }
      .journey-number {
        display: block;
        margin-bottom: 0.75rem;
        color: var(--sky-blue);
        font-size: 0.8rem;
        font-weight: 800;
        letter-spacing: 0.14em;
      }
      .journey-prize {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        border-radius: 999px;
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 700;
        color: #92400e;
        background: #fef3c7;
        border: 1px solid #fcd34d;
      }
      .journey-marker {
        grid-column: 2;
        grid-row: 1;
        z-index: 2;
        width: 1.35rem;
        height: 1.35rem;
        justify-self: center;
        border: 4px solid #dbeafe;
        border-radius: 999px;
        background: var(--sky-blue);
        box-shadow: 0 0 0 5px #f8fafc;
      }
      .journey-item.is-visible .journey-marker {
        animation: journey-marker-pulse 0.7s ease-out;
      }
      @keyframes journey-marker-pulse {
        0% {
          transform: scale(0.8);
          box-shadow: 0 0 0 5px #f8fafc;
        }
        50% {
          transform: scale(1.22);
          box-shadow: 0 0 0 10px rgba(198, 164, 107, 0.22);
        }
        100% {
          transform: scale(1);
          box-shadow: 0 0 0 5px #f8fafc;
        }
      }
      @media (max-width: 767px) {
        .journey-timeline::before,
        .journey-timeline::after {
          top: 1.5rem;
          bottom: 1.5rem;
          left: 0.875rem;
          transform: none;
        }
        .journey-timeline::after {
          transform: scaleY(var(--journey-progress));
        }
        .journey-item {
          grid-template-columns: 2.25rem minmax(0, 1fr);
          grid-template-rows: auto auto;
          align-items: start;
          min-height: 0;
          margin-bottom: 3rem;
        }
        .journey-item--image-left,
        .journey-item--image-right {
          transform: translateY(2rem);
        }
        .journey-item.is-visible {
          transform: translateY(0);
        }
        .journey-item--image-left .journey-media,
        .journey-item--image-right .journey-media {
          grid-column: 2;
          grid-row: 1;
          border-radius: 0.75rem 0.75rem 0 0;
        }
        .journey-item--image-left .journey-content,
        .journey-item--image-right .journey-content {
          grid-column: 2;
          grid-row: 2;
          width: 100%;
          max-width: none;
          justify-self: stretch;
          padding: 1.5rem;
          border: 1px solid var(--border-color);
          border-top: 0;
          border-radius: 0 0 0.75rem 0.75rem;
          background: var(--bg-light);
          box-shadow: 0 18px 35px -18px rgba(15, 23, 42, 0.35);
        }
        .journey-marker {
          grid-column: 1;
          grid-row: 1;
          width: 1rem;
          height: 1rem;
          border-width: 3px;
        }
        .journey-image {
          height: 15rem;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .journey-item {
          opacity: 1;
          transform: none !important;
          transition: none;
        }
        .journey-timeline::after {
          transition: none;
        }
        .journey-item.is-visible .journey-marker {
          animation: none;
        }
      }
      /* Side nav click areas for Problem section (visible arrows on md+) */
      .side-nav-area {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 14%;
        z-index: 20;
        cursor: pointer;
        transition: background-color 0.18s ease;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .side-nav-area:hover {
        background-color: rgba(2, 6, 23, 0.03);
      }
      .side-nav-left {
        left: 0;
      }
      .side-nav-right {
        right: 0;
      }
      /* hide the visible arrows but keep the buttons clickable */
      .side-nav-area svg {
        display: none;
      }
      .side-nav-area:focus {
        outline: 2px solid rgba(18, 90, 72, 0.35);
      }

      /* Production visual system */
      :root {
        --ink: #10283a;
        --ink-soft: #48657b;
        --forest: #123f52;
        --forest-deep: #0b2c3f;
        --mint: #dfeef4;
        --cream: #f4f8fb;
        --line: rgba(16, 40, 58, 0.12);
        --orange: #d7a45d;
      }

      html {
        scroll-padding-top: 84px;
        overflow-x: hidden;
      }
      body {
        overflow-x: hidden;
      }
      body {
        font-family: "Manrope", "DM Sans", sans-serif;
        color: var(--ink);
        background: var(--cream);
        letter-spacing: -0.01em;
      }
      h1,
      h2,
      h3,
      h4,
      .font-montserrat {
        font-family: "Space Grotesk", sans-serif;
        letter-spacing: -0.045em;
      }
      p {
        color: var(--ink-soft);
      }
      .container {
        max-width: 1240px;
      }
      header#header {
        background: rgba(22, 21, 20, 0.74);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 10px 28px rgba(15, 13, 12, 0.12);
      }
      header#header.is-scrolled {
        border-bottom-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 14px 32px rgba(15, 13, 12, 0.16);
      }
      header#header > div {
        min-height: 76px;
        transition:
          min-height 0.25s ease,
          padding 0.25s ease;
      }
      header#header.is-scrolled > div {
        min-height: 62px;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
      }
      header#header nav a {
        position: relative;
        font-size: 0.82rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.82);
        font-weight: 800;
      }
      header#header nav a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 100%;
        bottom: -0.45rem;
        height: 2px;
        background: linear-gradient(90deg, var(--primary), #f4e7cb);
        transition: right 0.2s ease;
      }
      header#header nav a:hover::after,
      header#header nav a:focus-visible::after {
        right: 0;
      }
      .hero-bg {
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(
            circle at top left,
            rgba(198, 164, 107, 0.28),
            transparent 34%
          ),
          radial-gradient(
            circle at 78% 18%,
            rgba(47, 79, 74, 0.14),
            transparent 26%
          ),
          linear-gradient(180deg, #faf6ee 0%, #f5efe3 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
        padding-top: 104px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
      }
      .hero-bg::before {
        content: "";
        position: absolute;
        top: -20%;
        left: -12%;
        width: 900px;
        height: 900px;
        background: radial-gradient(
          circle,
          rgba(198, 164, 107, 0.22),
          transparent 58%
        );
        animation: pulse-light 10s ease-in-out infinite;
        z-index: 0;
      }
      .hero-bg::after {
        content: "";
        position: absolute;
        right: -10%;
        bottom: -18%;
        width: 700px;
        height: 700px;
        background: radial-gradient(
          circle,
          rgba(47, 79, 74, 0.14),
          transparent 58%
        );
        animation: pulse-light 12s ease-in-out infinite reverse;
        z-index: 0;
      }
      .hero-bg .container {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
        align-items: center;
        gap: 5rem;
        min-height: 650px;
        text-align: left;
        position: relative;
        z-index: 1;
      }
      .hero-bg h1 {
        max-width: 720px;
        font-size: clamp(3.25rem, 6vw, 6.3rem);
        line-height: 0.94;
        color: #111827;
        letter-spacing: -0.05em;
      }
      .hero-bg h1 span {
        color: var(--primary);
      }
      .hero-bg p {
        max-width: 620px;
        font-size: 1.16rem;
        line-height: 1.65;
        color: rgba(31, 41, 55, 0.74);
      }
      .hero-bg .hero-visual {
        position: relative;
        min-height: 420px;
        display: grid;
        place-items: center;
      }
      .hero-visual::before {
        content: "";
        position: absolute;
        width: min(430px, 80vw);
        aspect-ratio: 1;
        border-radius: 32% 68% 49% 51% / 53% 38% 62% 47%;
        border: 1px solid rgba(198, 164, 107, 0.3);
        background: radial-gradient(circle, rgba(255,255,255,0.55), transparent 65%);
        box-shadow: inset 0 0 24px rgba(198, 164, 107, 0.14);
        transform: rotate(-10deg);
      }
      .hero-visual::after {
        content: "";
        position: absolute;
        width: 72%;
        aspect-ratio: 1;
        border-radius: 50%;
        border: 1px dashed rgba(47, 79, 74, 0.35);
        transform: rotate(22deg);
        box-shadow: 0 0 0 12px rgba(47, 79, 74, 0.05);
      }
      .hero-visual-card {
        position: relative;
        z-index: 2;
        width: min(360px, 78vw);
        padding: 1rem;
        border-radius: 1.7rem;
        background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(247,238,224,0.82));
        border: 1px solid rgba(198, 164, 107, 0.16);
        box-shadow: 0 30px 60px -34px rgba(27, 27, 26, 0.22);
        transform: rotate(3deg);
        animation: floatDrift 8s ease-in-out infinite;
        transition:
          transform 0.6s var(--ease-smooth),
          box-shadow 0.4s ease;
      }
      .hero-visual-card:hover {
        transform: rotate(1.5deg) translateY(-8px);
        box-shadow: 0 40px 90px -30px rgba(198, 164, 107, 0.3);
      }
      .hero-visual-card img {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 1.15rem;
      }
      .hero-visual-label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.9rem 0.2rem 0.15rem;
        color: #1f2937;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.09em;
        text-transform: uppercase;
      }
      .hero-visual-label span:last-child {
        color: var(--primary);
      }
      .hero-visual-live {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
      }
      .hero-visual-live::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--forest);
        box-shadow: 0 0 0 0 rgba(18, 90, 72, 0.5);
        animation: heroLive 2s ease-out infinite;
      }
      @keyframes heroLive {
        0% {
          box-shadow: 0 0 0 0 rgba(18, 90, 72, 0.45);
        }
        70%,
        100% {
          box-shadow: 0 0 0 8px rgba(18, 90, 72, 0);
        }
      }
      .hero-bg .glow-button,
      .gradient-banner {
        background: linear-gradient(135deg, #d9b06d, #b98e4c);
      }
      .hero-bg .glow-button:hover {
        background: linear-gradient(135deg, #e4c78b, #b18141);
      }
      .hero-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 1.4rem;
        color: #c79c59;
        font-size: 0.75rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }
      .hero-kicker::before {
        content: "";
        width: 34px;
        height: 1px;
        background: currentColor;
      }
      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.8rem;
        margin-top: 2rem;
      }
      .hero-secondary {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.75rem 1rem;
        color: #1f2937;
        font-weight: 700;
        border-radius: 999px;
        border: 1px solid rgba(18, 53, 43, 0.18);
        background: rgba(255, 255, 255, 0.76);
        transition:
          transform 0.2s ease,
          background 0.2s ease,
          border-color 0.2s ease;
      }
      .hero-secondary:hover {
        transform: translateY(-1px);
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(18, 53, 43, 0.34);
      }
      .hero-metrics {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
        margin-top: 2.4rem;
      }
      .hero-metric {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        min-height: 62px;
        padding: 0.8rem 1rem;
        border: 1px solid rgba(198, 164, 107, 0.14);
        background: rgba(255, 253, 249, 0.82);
        color: #1b1b1a;
        border-radius: 1rem;
        box-shadow: 0 18px 28px -22px rgba(15, 23, 42, 0.2);
      }
      .hero-metric i {
        width: 18px;
        height: 18px;
        color: var(--primary);
      }
      .hero-metric strong {
        display: block;
        font-size: 0.9rem;
        font-weight: 800;
        line-height: 1.2;
        color: #111827;
      }
      .hero-metric span {
        display: block;
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(31, 41, 55, 0.72);
      }
      .trust-strip {
        background: linear-gradient(90deg, #1a1d1c 0%, #312924 100%);
        color: #fff;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin-top: 2.4rem;
      }
      .trust-strip p,
      .trust-strip span {
        color: rgba(255, 255, 255, 0.78);
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
      }
      .trust-strip img {
        max-width: 150px;
        max-height: 42px;
        filter: brightness(0) invert(1) contrast(1.2);
        opacity: 0.9;
      }
      section[id] {
        scroll-margin-top: 88px;
        min-height: min(82vh, 760px);
      }
      section.py-20 {
        padding-top: 4rem;
        padding-bottom: 4.5rem;
      }
      #problem,
      #features,
      #architecture,
      #innovation,
      #impact,
      #team,
      #demo {
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.9),
          rgba(242, 248, 246, 0.98)
        ) !important;
      }
      #demo {
        background:
          radial-gradient(
            circle at top,
            rgba(45, 142, 140, 0.08),
            transparent 30%
          ),
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.82),
            rgba(241, 248, 247, 0.96)
          ) !important;
      }
      #mission-and-values,
      #journey,
      #research-sdg {
        background: linear-gradient(180deg, #f1faf6 0%, #eef5ef 100%) !important;
      }
      #problem > .container > .text-center h2,
      #features h2,
      #architecture h2,
      #innovation h2,
      #impact h2,
      #journey h2,
      #research-sdg h2,
      #team h2,
      #demo h2 {
        color: var(--ink);
        font-size: clamp(1.9rem, 2.8vw, 3rem);
      }
      .problem-network-shell,
      .solution-box,
      .mission-journey-shell,
      .journey-timeline {
        border-color: var(--line);
      }
      .mission-journey-header h2 {
        max-width: 850px;
        margin-left: auto;
        margin-right: auto;
      }
      .mission-journey-header h2::after {
        content: "";
        display: block;
        width: 58px;
        height: 3px;
        margin: 1.3rem auto 0;
        background: var(--orange);
      }
      .mission-section-lead {
        max-width: 680px;
        margin: 1rem auto 0;
        font-size: 1.08rem;
      }
      .mission-statements {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        max-width: 1080px;
        margin: 3rem auto 0;
      }
      .mission-statement {
        padding: clamp(1.75rem, 3vw, 3rem);
        border: 1px solid rgba(23, 53, 44, 0.14);
        border-top: 3px solid var(--forest);
        background: rgba(255, 255, 255, 0.74);
        box-shadow: 0 18px 38px rgba(18, 61, 50, 0.07);
      }
      .mission-statement:nth-child(2) {
        border-top-color: #4d8fbe;
      }
      .mission-statement-label {
        margin: 0 0 1.25rem;
        color: var(--orange);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }
      .mission-statement h3 {
        margin: 0;
        color: var(--ink);
        font-size: clamp(1.45rem, 2.5vw, 2.25rem);
        line-height: 1.12;
      }
      .mission-statement ul {
        display: grid;
        gap: 0.75rem;
        margin: 1.7rem 0 0;
        padding: 1.2rem 0 0 1.15rem;
        border-top: 1px solid var(--line);
        color: var(--ink-soft);
        font-size: 0.86rem;
        line-height: 1.5;
      }
      .mission-pillars {
        max-width: 1080px;
        margin: 4rem auto 0;
      }
      .mission-pillars-heading {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.2rem;
      }
      .mission-pillars-heading .section-eyebrow {
        margin: 0;
      }
      .mission-pillars-heading h3 {
        margin: 0;
        color: var(--ink);
        font-size: clamp(1.4rem, 2.2vw, 2rem);
      }
      .mission-pillar-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.8rem;
      }
      .mission-pillar {
        position: relative;
        min-height: 185px;
        padding: 1.3rem;
        border: 1px solid rgba(23, 53, 44, 0.12);
        background: rgba(255, 255, 255, 0.58);
        transition:
          transform 0.25s ease,
          border-color 0.25s ease,
          box-shadow 0.25s ease;
      }
      .mission-pillar:hover {
        transform: translateY(-4px);
        border-color: var(--forest);
        box-shadow: 0 16px 30px rgba(18, 61, 50, 0.1);
      }
      .mission-pillar > span {
        display: block;
        margin-bottom: 0.8rem;
        color: var(--orange);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.14em;
      }
      .mission-pillar > i {
        width: 1.35rem;
        height: 1.35rem;
        color: var(--forest);
      }
      .mission-pillar h4 {
        margin: 0.7rem 0 0.4rem;
        color: var(--ink);
        font-size: 1.05rem;
      }
      .mission-pillar p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 0.78rem;
        line-height: 1.5;
      }
      .mission-closing {
        max-width: 1080px;
        margin: 2rem auto 0;
        padding: 1.15rem 1.25rem;
        color: #fff;
        background: var(--forest-deep);
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-align: center;
        text-transform: uppercase;
      }
      #mission-and-values {
        padding-top: 3.25rem !important;
        padding-bottom: 3.25rem !important;
      }
      #mission-and-values .mission-journey-header {
        margin-bottom: 0;
      }
      #mission-and-values .mission-journey-header h2 {
        max-width: 980px;
        font-size: clamp(2rem, 3.2vw, 3rem);
        line-height: 1.04;
      }
      #mission-and-values .mission-journey-header h2 {
        margin-bottom: 0.65rem;
      }
      #mission-and-values .mission-journey-header h2::after {
        margin-top: 0.8rem;
      }
      #mission-and-values .mission-section-lead {
        margin-top: 0.7rem;
      }
      #mission-and-values .mission-statements {
        margin-top: 1.7rem;
        gap: 0.9rem;
      }
      #mission-and-values .mission-statement {
        padding: 1.5rem 1.65rem;
      }
      #mission-and-values .mission-statement-label {
        margin-bottom: 0.75rem;
      }
      #mission-and-values .mission-statement h3 {
        font-size: clamp(1.25rem, 2vw, 1.75rem);
      }
      #mission-and-values .mission-pillars {
        margin-top: 2rem;
      }
      #mission-and-values .mission-pillars-heading {
        margin-bottom: 0.8rem;
      }
      #mission-and-values .mission-pillar {
        min-height: 0;
        padding: 1rem;
        display: flex;
        flex-direction: column;
      }
      #mission-and-values .mission-pillar > span {
        margin-bottom: 0.5rem;
      }
      #mission-and-values .mission-pillar h4 {
        margin: 0.45rem 0 0.25rem;
      }
      #mission-and-values .mission-pillar p {
        min-height: 2.9rem;
        font-size: 0.72rem;
      }
      #mission-and-values .mission-pillar ul {
        display: grid;
        gap: 0.38rem;
        margin: 1rem 0 0;
        padding: 0.85rem 0 0 1rem;
        border-top: 1px solid var(--line);
        color: var(--ink-soft);
        font-size: 0.72rem;
        line-height: 1.35;
      }
      #mission-and-values .mission-pillar li::marker {
        color: var(--forest);
      }
      #mission-and-values .mission-pillar em {
        color: var(--orange);
        font-style: normal;
        font-weight: 800;
      }
      #mission-and-values .mission-closing {
        margin-top: 1.35rem;
        padding: 0.9rem 1rem;
        font-size: 0.68rem;
      }
      @media (min-width: 1025px) {
        #mission-and-values .mission-statement {
          padding: 1.15rem 1.35rem;
        }
        #mission-and-values .mission-statement h3 {
          font-size: 1.55rem;
        }
        #mission-and-values .mission-pillar {
          padding: 0.85rem;
        }
        #mission-and-values .mission-pillar > span {
          margin-bottom: 0.3rem;
        }
        #mission-and-values .mission-pillar h4 {
          margin: 0.35rem 0 0.2rem;
          font-size: 0.95rem;
        }
        #mission-and-values .mission-pillar p {
          font-size: 0.68rem;
        }
        #mission-and-values .mission-pillar ul {
          font-size: 0.68rem;
        }
      }
      .mission-vision-intro > div {
        padding: 1.25rem 1.5rem;
        border-top: 2px solid rgba(30, 98, 80, 0.24);
        background: rgba(255, 255, 255, 0.42);
      }
      .mission-vision-intro h3 {
        color: var(--orange);
        font-size: 0.75rem;
        letter-spacing: 0.17em;
      }
      .mission-vision-intro p {
        color: var(--ink);
        font-size: 1.05rem;
      }
      .timeline-point {
        border: 0;
        background: transparent;
        cursor: pointer;
      }
      .timeline-point:focus-visible {
        outline-offset: 7px;
      }
      .timeline-point.is-active .timeline-label {
        color: var(--forest);
      }
      .mission-info-content {
        border-radius: 2px !important;
        background: rgba(255, 255, 255, 0.88);
      }
      .mission-info-content.is-showing {
        animation: missionPanelIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
      }
      .mission-info-content.is-hiding {
        animation: missionPanelOut 0.18s ease both;
      }
      @keyframes missionPanelIn {
        from {
          opacity: 0;
          transform: translateY(14px) scale(0.985);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
      @keyframes missionPanelOut {
        from {
          opacity: 1;
          transform: translateY(0);
        }
        to {
          opacity: 0;
          transform: translateY(-8px);
        }
      }
      .mission-timeline::after {
        content: "AUTO";
        position: absolute;
        right: 0;
        top: -1.5rem;
        color: var(--forest);
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        opacity: 0.62;
      }
      .mission-timeline.is-paused::after {
        content: "PAUSED";
        color: var(--orange);
      }
      .mission-timeline.is-autoplaying .timeline-point.is-active::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -0.25rem;
        height: 2px;
        transform-origin: left;
        background: var(--forest);
        animation: missionAutoplayProgress 5.2s linear infinite;
      }
      @keyframes missionAutoplayProgress {
        from {
          transform: scaleX(0);
        }
        to {
          transform: scaleX(1);
        }
      }
      .problem-node.is-active .problem-node-name {
        color: var(--forest);
      }
      .problem-core .problem-detail-card.is-showing {
        animation: problemPanelIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
      }
      @keyframes problemPanelIn {
        from {
          opacity: 0;
          transform: translateY(18px) scale(0.92);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
      .problem-detail-card[data-tone="coral"] {
        border-color: rgba(239, 124, 119, 0.38);
      }
      .market-section {
        background: var(--forest-deep);
        color: #fff;
      }
      .market-section p {
        color: rgba(255, 255, 255, 0.72);
      }
      .market-visual {
        display: grid;
        grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
        align-items: center;
        gap: clamp(2rem, 6vw, 6rem);
      }
      .market-map {
        padding: 1rem;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.18);
      }
      .market-map img {
        display: block;
        width: 100%;
        aspect-ratio: 1.3;
        object-fit: contain;
        background: rgba(255, 255, 255, 0.92);
      }
      .market-kicker {
        color: #e2a967;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }
      .market-section h2 {
        color: #fff;
        font-size: clamp(2rem, 4vw, 4rem);
      }
      .market-points {
        display: grid;
        gap: 0.75rem;
        margin-top: 1.8rem;
      }
      .market-point {
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
        padding: 0.85rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
      }
      .market-point i {
        flex: 0 0 auto;
        color: #e2a967;
        width: 1.15rem;
        height: 1.15rem;
        margin-top: 0.2rem;
      }
      .feature-card,
      .team-card,
      .award-badge {
        border-color: var(--line);
        border-radius: 2px !important;
        box-shadow: 0 16px 34px rgba(18, 61, 50, 0.06);
      }
      .feature-card:hover {
        border-color: var(--forest);
        box-shadow: 0 22px 46px rgba(18, 61, 50, 0.12);
      }
      .journey-media,
      .journey-content,
      .journey-card {
        border-radius: 2px;
      }
      .journey-media {
        border-color: var(--line);
      }
      .journey-marker {
        background: var(--forest);
        border-color: var(--mint);
      }
      .journey-timeline::after {
        background: var(--forest);
      }
      .section-eyebrow {
        color: var(--orange);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }
      .evidence-grid {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr 0.85fr;
        grid-auto-rows: 210px;
        gap: 1rem;
      }
      .evidence-card {
        position: relative;
        overflow: hidden;
        min-height: 210px;
        border: 1px solid var(--line);
        background: #dfe9e2;
      }
      .evidence-card:first-child {
        grid-row: span 2;
      }
      .evidence-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }
      .evidence-card:hover img {
        transform: scale(1.04);
      }
      .evidence-card figcaption {
        position: absolute;
        inset: auto 0 0;
        padding: 2.5rem 1.1rem 1rem;
        color: #fff;
        background: linear-gradient(transparent, rgba(18, 61, 50, 0.9));
        font-weight: 700;
      }
      .evidence-card figcaption small {
        display: block;
        margin-top: 0.25rem;
        color: rgba(255, 255, 255, 0.76);
        font-size: 0.78rem;
        font-weight: 500;
      }
      .evidence-meta {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        margin-top: 1rem;
      }
      .evidence-stat {
        padding: 1.3rem;
        border-top: 2px solid var(--orange);
        background: rgba(255, 255, 255, 0.55);
      }
      .evidence-stat strong {
        display: block;
        color: var(--ink);
        font-family: "Space Grotesk", sans-serif;
        font-size: 1.6rem;
      }
      .evidence-stat span {
        color: var(--ink-soft);
        font-size: 0.82rem;
      }
      .impact-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        border: 1px solid var(--line);
        background: var(--line);
      }
      .impact-grid > div {
        padding: 1.8rem;
        background: var(--cream);
      }
      .impact-grid .text-5xl {
        color: var(--forest) !important;
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(2.5rem, 4vw, 4.5rem);
      }
      .field-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        margin-top: 3rem;
      }
      .field-strip figure {
        margin: 0;
        border: 1px solid var(--line);
        background: #fff;
      }
      .field-strip img {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
      }
      .field-strip figcaption {
        padding: 0.9rem 1rem 1rem;
        color: var(--ink);
        font-size: 0.88rem;
        font-weight: 700;
      }
      .field-strip figcaption span {
        display: block;
        margin-top: 0.2rem;
        color: var(--ink-soft);
        font-size: 0.76rem;
        font-weight: 500;
      }
      .core-modules-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
      }
      .core-module {
        position: relative;
        min-height: 230px;
        padding: 1.25rem;
        overflow: hidden;
        border: 1px solid rgba(30, 98, 80, 0.2);
        background: rgba(255, 255, 255, 0.72);
        transition:
          transform 0.28s ease,
          box-shadow 0.28s ease,
          border-color 0.28s ease;
      }
      .core-module::after {
        content: "";
        position: absolute;
        right: -2rem;
        bottom: -3rem;
        width: 7rem;
        height: 7rem;
        border-radius: 50%;
        background: var(--module-soft, rgba(30, 98, 80, 0.08));
        transition: transform 0.35s ease;
      }
      .core-module:hover {
        transform: translateY(-6px);
        border-color: var(--module-color, var(--forest));
        box-shadow: 0 20px 36px rgba(18, 61, 50, 0.12);
      }
      .core-module:hover::after {
        transform: scale(1.7);
      }
      .core-module-icon {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 2.6rem;
        height: 2.6rem;
        margin-bottom: 1.1rem;
        color: #fff;
        background: var(--module-color, var(--forest));
        border-radius: 0.75rem;
        box-shadow: 0 8px 16px -8px var(--module-color, var(--forest));
      }
      .core-module-icon i {
        width: 1.3rem;
        height: 1.3rem;
      }
      .core-module h3,
      .core-module p,
      .core-module-tags {
        position: relative;
        z-index: 1;
      }
      .core-module h3 {
        margin: 0;
        color: var(--ink);
        font-size: 1rem;
        letter-spacing: -0.025em;
      }
      .core-module p {
        margin: 0.55rem 0 0.85rem;
        color: var(--ink-soft);
        font-size: 0.77rem;
        line-height: 1.55;
      }
      .core-module-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
      }
      .core-module-tags span {
        padding: 0.22rem 0.48rem;
        color: var(--ink-soft);
        background: rgba(30, 98, 80, 0.09);
        border-radius: 999px;
        font-size: 0.62rem;
        line-height: 1.2;
      }
      .core-module-action {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        margin-top: 1rem;
        color: var(--module-color, var(--forest));
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.02em;
      }
      .core-module-action i {
        width: 0.85rem;
        height: 0.85rem;
        transition: transform 0.2s ease;
      }
      .core-module:hover .core-module-action i {
        transform: translateX(3px);
      }
      .command-module {
        grid-column: auto;
        display: block;
        min-height: 230px;
        background: var(--forest-deep);
        border-color: var(--forest-deep);
      }
      .command-module h3,
      .command-module p {
        color: #fff;
      }
      .command-module p {
        margin-bottom: 0.65rem;
        color: rgba(255, 255, 255, 0.74);
      }
      .command-module .core-module-tags span {
        color: rgba(255, 255, 255, 0.82);
        background: rgba(255, 255, 255, 0.12);
      }
      .command-module .core-module-action {
        color: #f2bd78;
        white-space: nowrap;
      }
      .data-layer-banner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem;
        margin-top: 1.25rem;
        padding: 1.35rem 1.5rem;
        border: 1px solid rgba(30, 98, 80, 0.2);
        background: rgba(255, 255, 255, 0.58);
      }
      .data-layer-banner strong {
        display: block;
        color: var(--ink);
        font-family: "Space Grotesk", sans-serif;
        font-size: 1.05rem;
      }
      .data-layer-banner span {
        color: var(--ink-soft);
        font-size: 0.78rem;
      }
      .data-layer-flow {
        color: var(--forest);
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.02em;
      }
      .data-layer-flow b {
        color: var(--orange);
        padding: 0 0.28rem;
      }
      .business-model-section {
        background: #f3f6f4 !important;
      }
      .business-model-intro {
        max-width: 800px;
        margin: 0 auto 3.2rem;
        text-align: center;
      }
      .business-model-intro h2 {
        color: var(--ink);
        font-size: clamp(2rem, 3.6vw, 3.7rem);
        line-height: 1.05;
      }
      .business-model-intro p {
        max-width: 700px;
        margin: 1rem auto 0;
        font-size: 1.05rem;
      }
      .business-model-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
        align-items: stretch;
      }
      .business-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 1.45rem;
        border: 1px solid rgba(23, 53, 44, 0.14);
        background: #fff;
        box-shadow: 0 16px 34px rgba(18, 61, 50, 0.06);
        transition:
          transform 0.28s ease,
          box-shadow 0.28s ease,
          border-color 0.28s ease;
      }
      .business-card:hover {
        transform: translateY(-6px);
        border-color: var(--forest);
        box-shadow: 0 24px 44px rgba(18, 61, 50, 0.13);
      }
      .business-card.is-primary {
        border-top: 4px solid var(--forest);
        box-shadow: 0 22px 46px rgba(18, 61, 50, 0.12);
      }
      .business-card-number {
        color: var(--orange);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.16em;
      }
      .business-card-category {
        display: inline-flex;
        align-self: flex-start;
        margin: 0.8rem 0 1rem;
        padding: 0.28rem 0.55rem;
        color: var(--forest);
        background: var(--mint);
        border-radius: 999px;
        font-size: 0.65rem;
        font-weight: 800;
        letter-spacing: 0.04em;
      }
      .business-card h3 {
        margin: 0;
        color: var(--ink);
        font-size: 1.1rem;
      }
      .business-price {
        margin: 1.25rem 0 0.25rem;
        color: var(--forest-deep);
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(1.8rem, 2.7vw, 2.5rem);
        font-weight: 700;
        line-height: 1.05;
      }
      .business-price-unit {
        min-height: 1.15rem;
        color: var(--orange);
        font-size: 0.76rem;
        font-weight: 800;
      }
      .business-target {
        min-height: 3.8rem;
        margin: 1rem 0;
        color: var(--ink-soft);
        font-size: 0.78rem;
        line-height: 1.5;
      }
      .business-includes {
        display: grid;
        gap: 0.6rem;
        margin: 0;
        padding: 1rem 0;
        border-top: 1px solid var(--line);
        list-style: none;
      }
      .business-includes li {
        position: relative;
        padding-left: 1.1rem;
        color: var(--ink-soft);
        font-size: 0.76rem;
        line-height: 1.4;
      }
      .business-includes li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.45rem;
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 50%;
        background: var(--forest);
      }
      .business-card-action {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        margin-top: auto;
        padding-top: 1rem;
        color: var(--forest);
        font-size: 0.78rem;
        font-weight: 800;
      }
      .business-card-action i {
        width: 0.9rem;
        height: 0.9rem;
        transition: transform 0.2s ease;
      }
      .business-card-action:hover i {
        transform: translateX(3px);
      }
      .business-logic {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.55rem;
        margin-top: 2.2rem;
        color: var(--ink-soft);
        font-size: 0.78rem;
        font-weight: 800;
        text-align: center;
      }
      .business-logic span {
        padding: 0.55rem 0.8rem;
        border: 1px solid rgba(30, 98, 80, 0.18);
        background: rgba(255, 255, 255, 0.58);
      }
      .business-logic b {
        color: var(--orange);
        align-self: center;
      }
      @media (max-width: 1024px) {
        .business-model-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (max-width: 640px) {
        .business-model-grid {
          grid-template-columns: 1fr;
        }
        .business-target {
          min-height: 0;
        }
        .business-logic {
          flex-direction: column;
          align-items: stretch;
        }
        .business-logic b {
          transform: rotate(90deg);
        }
      }
      @media (max-width: 1024px) {
        .core-modules-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (max-width: 1024px) {
        .mission-pillar-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (max-width: 640px) {
        .core-modules-grid {
          grid-template-columns: 1fr;
        }
        .core-module {
          min-height: 0;
        }
        .command-module {
          min-height: 0;
        }
        .command-module .core-module-action {
          white-space: normal;
        }
      }
      footer {
        background: var(--forest-deep) !important;
      }
      footer p,
      footer a {
        color: rgba(255, 255, 255, 0.72);
      }
      :focus-visible {
        outline: 3px solid rgba(216, 139, 69, 0.8);
        outline-offset: 4px;
      }
      @media (max-width: 900px) {
        .hero-bg .container {
          grid-template-columns: 1fr;
          gap: 1rem;
          text-align: center;
        }
        .hero-bg .container > div:first-child {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .hero-bg .hero-visual {
          min-height: 300px;
        }
        .hero-bg {
          min-height: auto;
        }
        .hero-bg .container {
          min-height: auto;
        }
        .evidence-grid {
          grid-template-columns: 1fr 1fr;
        }
        .evidence-card:first-child {
          grid-row: span 1;
        }
      }
      @media (max-width: 640px) {
        section.py-20 {
          padding-top: 4.5rem;
          padding-bottom: 4.5rem;
        }
        .hero-bg h1 {
          font-size: clamp(2.8rem, 13vw, 4.5rem);
        }
        .hero-bg .container {
          padding-top: 5rem;
          padding-bottom: 4rem;
        }
        .hero-visual-card {
          width: min(300px, 82vw);
        }
        .evidence-grid,
        .evidence-meta,
        .impact-grid {
          grid-template-columns: 1fr;
        }
        .field-strip {
          grid-template-columns: 1fr;
        }
        .evidence-grid {
          grid-auto-rows: 250px;
        }
        .mission-vision-intro {
          grid-template-columns: 1fr;
          gap: 1rem;
        }
        .market-visual {
          grid-template-columns: 1fr;
          gap: 2rem;
        }
        .mission-statements,
        .mission-pillar-grid {
          grid-template-columns: 1fr;
        }
        .mission-pillars-heading {
          display: block;
        }
        .mission-pillars-heading h3 {
          margin-top: 0.55rem;
        }
        .mission-closing {
          font-size: 0.68rem;
          line-height: 1.7;
          letter-spacing: 0.08em;
        }
      }
      .mobile-menu-toggle {
        display: none;
      }
      .mobile-nav {
        display: none;
      }
      @media (max-width: 767px) {
        .mobile-menu-toggle {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 42px;
          height: 42px;
          border: 1px solid rgba(17, 28, 45, 0.12);
          color: var(--text-primary);
          background: rgba(255, 255, 255, 0.8);
          border-radius: 0.75rem;
          box-shadow: 0 8px 18px -12px rgba(17, 28, 45, 0.18);
        }
        .mobile-nav {
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          padding: 0.75rem 1.5rem 1rem;
          background: rgba(255, 255, 255, 0.96);
          border-bottom: 1px solid rgba(17, 28, 45, 0.08);
          box-shadow: 0 16px 30px rgba(17, 28, 45, 0.08);
          opacity: 0;
          visibility: hidden;
          transform: translateY(-8px);
          transition:
            opacity 0.28s var(--ease-smooth),
            transform 0.28s var(--ease-smooth),
            visibility 0.28s ease;
        }
        .mobile-nav.is-open {
          display: grid;
          gap: 0.25rem;
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }
        .mobile-nav a {
          padding: 0.7rem 0;
          color: var(--text-primary);
          font-weight: 700;
          border-bottom: 1px solid rgba(17, 28, 45, 0.08);
        }
        .mobile-nav a:last-child {
          border-bottom: 0;
        }
        .mobile-nav a.nav-active {
          color: var(--primary-strong);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .hero-bg::before,
        .hero-bg::after {
          animation: none;
        }
        .hero-visual-card,
        .evidence-card img {
          transition: none;
          transform: none;
        }
        .mission-timeline.is-autoplaying .timeline-point.is-active::before {
          animation: none;
          transform: scaleX(1);
        }
      }

      /* ==========================================================
         PREMIUM POLISH LAYER — refined palette, motion & detail
         ========================================================== */
      :root {
        --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --gold: #d98e34;
        --gold-soft: rgba(217, 142, 52, 0.16);
        --forest: #125a48;
        --forest-deep: #0a3429;
        --cream: #faf7ef;
        --ink: #12352b;
        --ink-soft: #4c665c;
      }

      html {
        scroll-behavior: smooth;
      }
      body {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeSpeed;
      }

      ::selection {
        background: rgba(217, 142, 52, 0.3);
        color: var(--forest-deep);
      }

      ::-webkit-scrollbar {
        width: 12px;
      }
      ::-webkit-scrollbar-track {
        background: #ece6d9;
      }
      ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #2b7d66, #0a3429);
        border: 3px solid #ece6d9;
        border-radius: 999px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #37937a, #125a48);
      }
      html {
        scrollbar-color: #2b7d66 #ece6d9;
      }

      /* Reading progress bar */
      #reading-progress {
        position: fixed;
        top: 0;
        left: 0;
        width: 0%;
        height: 3px;
        background: linear-gradient(90deg, #1e6250, #d98e34);
        box-shadow: 0 1px 8px rgba(217, 142, 52, 0.45);
        z-index: 80;
        pointer-events: none;
      }

      /* ---------- Header: frosted glass ---------- */
      header#header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 60;
        background: rgba(255, 255, 255, 0.75);
        border-bottom: 1px solid rgba(17, 28, 45, 0.06);
        backdrop-filter: blur(18px) saturate(1.4);
        -webkit-backdrop-filter: blur(18px) saturate(1.4);
        transition:
          padding 0.25s ease,
          box-shadow 0.25s ease,
          border-color 0.25s ease;
      }
      header#header.is-scrolled {
        border-bottom-color: rgba(198, 164, 107, 0.4);
        box-shadow: 0 12px 28px rgba(17, 28, 45, 0.08);
      }
      header#header.is-scrolled > div {
        padding-top: 0.72rem !important;
        padding-bottom: 0.72rem !important;
      }
      header#header.is-scrolled [aria-label="DudhAmrut home"] span:first-child {
        width: 2.4rem !important;
        height: 2.4rem !important;
      }
      header#header.is-scrolled strong {
        font-size: 1.1rem !important;
      }
      header#header .flex.items-center > a > span:first-child {
        border-radius: 0.85rem;
        background: linear-gradient(135deg, #125a48, #0a3429);
        box-shadow: 0 8px 18px -8px rgba(18, 90, 72, 0.45);
      }
      header#header a[aria-label="DudhAmrut home"] {
        color: var(--text-primary);
      }
      header#header a[aria-label="DudhAmrut home"] strong {
        color: #12352b;
      }
      header#header a[aria-label="DudhAmrut home"] small {
        color: #2f4f4a;
      }
      header#header nav a {
        position: relative;
        color: var(--text-secondary);
        letter-spacing: 0.02em;
        opacity: 0.9;
        transition:
          opacity 0.2s ease,
          color 0.2s ease;
      }
      header#header nav a:hover,
      header#header nav a.nav-active {
        opacity: 1;
        color: var(--navy);
      }
      header#header nav a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 100%;
        bottom: -0.5rem;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--primary), var(--teal));
        transition:
          right 0.25s ease,
          left 0.25s ease,
          opacity 0.25s ease;
        opacity: 0;
      }
      header#header nav a:hover::after,
      header#header nav a.nav-active::after {
        left: 0;
        right: 0;
        opacity: 1;
      }
      header a.bg-emerald-900 {
        position: relative;
        overflow: hidden;
        border-radius: 999px;
        background: linear-gradient(
          135deg,
          var(--primary),
          var(--navy)
        ) !important;
        box-shadow:
          0 10px 22px -10px rgba(91, 108, 255, 0.55),
          inset 0 1px 0 rgba(255, 255, 255, 0.14);
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease;
      }
      header a.bg-emerald-900:hover {
        transform: translateY(-2px);
        box-shadow:
          0 16px 30px -12px rgba(10, 52, 41, 0.4),
          0 0 0 4px rgba(198, 164, 107, 0.18);
      }

      /* ---------- Primary buttons: lift + shine ---------- */
      .hero-bg .glow-button,
      #demo a[class*="bg-sky-500"],
      .quick-nav button {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 999px;
        transition:
          transform 0.35s var(--ease-out),
          box-shadow 0.35s ease,
          background 0.35s ease;
      }
      .hero-bg .glow-button {
        background: linear-gradient(135deg, #1e6250, #0a3429);
        box-shadow:
          0 14px 28px -12px rgba(10, 52, 41, 0.55),
          inset 0 1px 0 rgba(255, 255, 255, 0.16);
      }
      .hero-bg .glow-button:hover {
        background: linear-gradient(135deg, #2b7d66, #125a48);
        transform: translateY(-2px);
        box-shadow:
          0 22px 42px -14px rgba(10, 52, 41, 0.5),
          0 0 0 4px rgba(217, 142, 52, 0.16);
      }
      #demo a[class*="bg-sky-500"] {
        background: linear-gradient(135deg, #1e6250, #0a3429);
        box-shadow:
          0 14px 28px -12px rgba(10, 52, 41, 0.5),
          inset 0 1px 0 rgba(255, 255, 255, 0.16);
      }
      #demo a[class*="bg-sky-500"]:hover {
        transform: translateY(-2px) scale(1.02);
        background: linear-gradient(135deg, #2b7d66, #125a48);
        box-shadow:
          0 22px 42px -14px rgba(10, 52, 41, 0.5),
          0 0 0 4px rgba(217, 142, 52, 0.16);
      }
      .hero-bg .glow-button::after,
      header a.bg-emerald-900::after,
      #demo a[class*="bg-sky-500"]::after,
      .quick-nav button::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -160%;
        width: 55%;
        background: linear-gradient(
          105deg,
          transparent,
          rgba(255, 255, 255, 0.28),
          transparent
        );
        transform: skewX(-22deg);
        transition: left 0.65s ease;
        pointer-events: none;
      }
      .hero-bg .glow-button:hover::after,
      header a.bg-emerald-900:hover::after,
      #demo a[class*="bg-sky-500"]:hover::after,
      .quick-nav:hover button::after {
        left: 160%;
      }

      .hero-secondary {
        position: relative;
        padding: 0.75rem 1.25rem;
        border: 1px solid rgba(18, 53, 43, 0.18);
        border-radius: 999px;
        transition:
          border-color 0.3s ease,
          background 0.3s ease,
          transform 0.3s var(--ease-out),
          color 0.3s ease;
      }
      .hero-secondary:hover {
        transform: translateY(-2px);
        background: rgba(30, 98, 80, 0.07);
        border-color: rgba(18, 53, 43, 0.34);
      }

      /* ---------- Hero: rise-in, floating card, orbiting rings ---------- */
      .hero-kicker,
      .hero-bg h1,
      .hero-bg p,
      .hero-actions,
      .hero-metrics {
        animation: fadeUpSoft 0.9s var(--ease-smooth) both;
      }
      .hero-bg h1 {
        animation-delay: 0.06s;
      }
      .hero-bg p {
        animation-delay: 0.12s;
      }
      .hero-actions {
        animation-delay: 0.2s;
      }
      @keyframes heroRise {
        from {
          opacity: 0;
          transform: translateY(26px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      .hero-visual-card {
        border-radius: 1rem;
        animation: gentleFloat 8s ease-in-out infinite;
      }
      @keyframes gentleFloat {
        0%,
        100% {
          transform: rotate(3deg) translateY(0);
        }
        50% {
          transform: rotate(1.6deg) translateY(-14px);
        }
      }
      .hero-visual::before {
        animation: heroRingPulse 8s ease-in-out infinite;
      }
      .hero-visual::after {
        animation: heroRingSpin 56s linear infinite;
      }
      @keyframes heroRingPulse {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.025);
        }
      }
      @keyframes heroRingSpin {
        from {
          transform: rotate(22deg);
        }
        to {
          transform: rotate(382deg);
        }
      }

      /* ---------- Signature: gradient headings ---------- */
      #problem > .container > .text-center h2,
      #solution h2,
      #features h2,
      #architecture h2,
      #innovation h2,
      #impact h2,
      #journey h2,
      #research-sdg h2,
      #team h2,
      #demo h2,
      #evidence h2,
      .business-model-intro h2,
      #mission-and-values .mission-journey-header h2 {
        background: linear-gradient(
          115deg,
          var(--forest-deep) 18%,
          var(--forest) 48%,
          #d98e34 130%
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        letter-spacing: -0.035em;
      }
      #mission-and-values .mission-journey-header h2::after {
        background: #c9842c;
      }

      .section-eyebrow {
        color: #bf7a22;
      }

      /* ---------- Cards: soft, layered, smooth lifts ---------- */
      .feature-card,
      .core-module,
      .business-card,
      .team-card,
      .award-badge,
      .mission-statement,
      .mission-pillar {
        border-radius: 1rem;
        transition:
          transform 0.35s var(--ease-out),
          box-shadow 0.35s ease,
          border-color 0.35s ease,
          background 0.35s ease;
      }
      .feature-card,
      .core-module,
      .business-card,
      .team-card,
      .award-badge {
        box-shadow:
          0 1px 2px rgba(10, 52, 41, 0.04),
          0 14px 30px -20px rgba(10, 52, 41, 0.2);
      }
      .feature-card:hover,
      .core-module:hover,
      .business-card:hover,
      .team-card:hover,
      .mission-statement:hover {
        transform: translateY(-6px);
        box-shadow: 0 26px 50px -26px rgba(10, 52, 41, 0.28);
      }
      .mission-pillar:hover,
      .award-badge:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 44px -22px rgba(10, 52, 41, 0.26);
      }
      .award-badge:hover {
        background: linear-gradient(
          140deg,
          var(--forest),
          var(--forest-deep)
        ) !important;
      }
      .award-badge i {
        transition:
          transform 0.3s var(--ease-spring),
          color 0.3s ease;
      }
      .award-badge:hover i {
        transform: translateY(-2px) scale(1.08);
      }

      #features .feature-activate.is-active:hover {
        transform: translateY(-8px);
        border-color: rgba(18, 90, 72, 0.35);
        box-shadow: 0 26px 50px -24px rgba(10, 52, 41, 0.28);
      }
      #features .feature-activate:hover > div:first-child {
        transform: translateY(-3px) scale(1.06);
        filter: saturate(1.15);
      }

      .core-module-icon {
        transition:
          transform 0.35s var(--ease-spring),
          box-shadow 0.35s ease;
      }
      .core-module:hover .core-module-icon {
        transform: translateY(-3px) rotate(-3deg) scale(1.06);
      }

      /* ---------- Evidence, journey, market ---------- */
      .evidence-card {
        border-radius: 1rem;
        transition:
          transform 0.4s var(--ease-out),
          box-shadow 0.4s ease;
      }
      .evidence-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 24px 44px -22px rgba(10, 52, 41, 0.3);
      }
      .evidence-card img {
        transition: transform 0.6s var(--ease-out);
      }

      .journey-media,
      .journey-content {
        border-radius: 0.95rem;
        transition:
          transform 0.45s var(--ease-out),
          box-shadow 0.45s ease;
      }
      .journey-item:hover .journey-media {
        transform: translateY(-6px);
        box-shadow: 0 30px 54px -24px rgba(10, 52, 41, 0.35);
      }
      .journey-image {
        transition: transform 0.6s var(--ease-out);
      }
      .journey-item:hover .journey-image {
        transform: scale(1.03);
      }

      .market-map {
        border-radius: 1rem;
      }
      .market-point {
        transition:
          padding-left 0.3s var(--ease-out),
          border-color 0.3s ease;
      }
      .market-point:hover {
        padding-left: 0.5rem;
        border-color: rgba(255, 255, 255, 0.34);
      }

      /* ---------- Solution marquee: smooth + pause on hover ---------- */
      .solution-card-inner {
        transition:
          transform 0.45s var(--ease-out),
          box-shadow 0.45s ease,
          border-color 0.45s ease;
      }
      .solution-card-inner:hover {
        transform: translateY(-8px);
        box-shadow:
          0 30px 55px -25px rgba(10, 52, 41, 0.3),
          0 0 0 4px rgba(217, 142, 52, 0.12);
      }
      .solution-image img {
        transition: transform 0.6s var(--ease-out);
      }
      .solution-carousel:hover .solution-track {
        animation-play-state: paused;
      }

      /* ---------- Impact counters ---------- */
      #impact .text-5xl {
        display: inline-block;
        background: linear-gradient(
          120deg,
          var(--forest-deep) 15%,
          var(--forest) 50%,
          #d98e34 130%
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }

      /* ---------- Trust strip, banner, footer ---------- */
      .trust-strip {
        background: linear-gradient(
          90deg,
          #09161d 0%,
          #0d2d36 28%,
          #123d38 100%
        );
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
      }
      .trust-strip img {
        opacity: 0.92;
        filter: brightness(1.08) saturate(0.88);
        transition:
          opacity 0.3s ease,
          transform 0.3s ease,
          filter 0.3s ease;
      }
      .trust-strip img:hover {
        opacity: 1;
        transform: translateY(-2px);
        filter: brightness(1.15) saturate(1);
      }
      .gradient-banner {
        background: linear-gradient(
          120deg,
          #132d29 0%,
          #1d3c35 32%,
          #24493f 66%,
          #2c5548 100%
        );
        position: relative;
        overflow: hidden;
      }
      .gradient-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            circle at top left,
            rgba(215, 176, 109, 0.24),
            transparent 30%
          ),
          radial-gradient(
            circle at bottom right,
            rgba(109, 168, 150, 0.2),
            transparent 34%
          );
      }
      .gradient-banner > * {
        position: relative;
        z-index: 1;
      }
      footer {
        border-top: 3px solid transparent;
        background: linear-gradient(180deg, #0a3429, #082b23) !important;
      }
      footer a {
        transition:
          color 0.2s ease,
          opacity 0.2s ease;
      }
      footer a:hover {
        color: #fff !important;
        opacity: 1;
      }
      .business-logic span {
        border-radius: 999px;
      }
      .data-layer-banner {
        border-radius: 1rem;
      }

      .mobile-menu-toggle {
        border-radius: 0.75rem;
      }

      @media (prefers-reduced-motion: reduce) {
        .hero-visual-card,
        .hero-visual::before,
        .hero-visual::after,
        .solution-card-inner,
        .evidence-card img,
        .journey-image,
        .hero-kicker,
        .hero-bg h1,
        .hero-bg p,
        .hero-actions {
          animation: none !important;
          transition: none !important;
        }
        .solution-track {
          animation: none !important;
        }
      }

      /* ==========================================================
         THE PROBLEM — interactive network refinements
         ========================================================== */
      #problem .problem-network {
        background:
          radial-gradient(circle at 30% 20%, rgba(231, 190, 117, 0.18), transparent 20%),
          radial-gradient(circle at 72% 80%, rgba(18, 90, 72, 0.16), transparent 26%),
          linear-gradient(180deg, #fffef9, #f6f0e2);
        border: 1px solid rgba(198, 164, 107, 0.32);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.9),
          0 30px 80px -40px rgba(10, 52, 41, 0.3);
      }
      #problem .problem-network::before {
        background: radial-gradient(
          circle,
          rgba(217, 142, 52, 0.16),
          rgba(217, 142, 52, 0.05) 38%,
          rgba(255, 255, 255, 0) 72%
        );
        border: 1px solid rgba(198, 164, 107, 0.32);
        box-shadow: 0 0 90px rgba(217, 142, 52, 0.12);
      }
      #problem .problem-network::after {
        border-color: rgba(18, 90, 72, 0.45);
      }
      #problem .problem-core {
        background: linear-gradient(140deg, #fffef7, #f2ead8);
        border: 1px solid rgba(198, 164, 107, 0.55);
        box-shadow:
          0 30px 60px -28px rgba(10, 52, 41, 0.25),
          inset 0 0 0 8px #fffffe,
          0 0 0 22px rgba(217, 142, 52, 0.06);
      }
      #problem .problem-core.is-selected {
        width: 340px;
        height: 340px;
        box-shadow:
          0 36px 72px -30px rgba(10, 52, 41, 0.28),
          inset 0 0 0 8px #fffffe,
          0 0 0 30px rgba(217, 142, 52, 0.07);
        overflow: hidden;
      }
      #problem .problem-core .problem-detail-card {
        inset: 38px 20px;
        gap: 0.22rem;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
      #problem .problem-core .problem-detail-card > * {
        min-width: 0;
        max-width: 200px;
      }
      #problem .problem-core::before {
        background: radial-gradient(
          circle at 35% 30%,
          #fffef7,
          rgba(231, 209, 163, 0.6)
        );
        border: 1px solid rgba(198, 164, 107, 0.4);
      }
      #problem .problem-core-intro {
        color: var(--forest-deep);
      }
      #problem .problem-core-intro i {
        color: var(--forest);
      }
      #problem .problem-core .problem-detail-head {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 0.35rem;
        margin: 0 0 0.15rem;
        max-width: 210px;
      }
      #problem .problem-core .detail-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        flex-shrink: 0;
        background: #fffef9;
        border-color: rgba(198, 164, 107, 0.35);
      }
      #problem .problem-core .detail-icon i {
        width: 16px !important;
        height: 16px !important;
      }
      #problem .problem-core .problem-detail-title {
        font-size: clamp(0.72rem, 1.15vw, 0.85rem);
        line-height: 1.18;
        max-width: 155px;
        margin: 0;
        text-align: center;
      }
      #problem .problem-core .problem-detail-text {
        color: #3e5a4e;
        font-size: clamp(0.62rem, 0.88vw, 0.72rem);
        line-height: 1.4;
        max-width: 195px;
        margin: 0;
        text-align: center;
        letter-spacing: -0.01em;
      }
      #problem .problem-core .problem-detail-points {
        list-style: none;
        padding: 0;
        margin: 0;
        width: min(185px, 78%);
        text-align: center;
      }
      #problem .problem-core .problem-detail-points li {
        color: #4c665c;
        font-size: clamp(0.56rem, 0.8vw, 0.65rem);
        line-height: 1.35;
        margin: 0.12rem 0;
        text-align: center;
      }
      #problem .problem-core .problem-detail-impact {
        color: var(--forest-deep);
        border: 0;
        border-top: 1px solid rgba(198, 164, 107, 0.4);
        margin: 0.1rem 0 0;
        padding: 0.22rem 0 0;
        width: min(185px, 78%);
        font-size: 0.52rem;
        line-height: 1.3;
        letter-spacing: 0.05em;
        text-align: center;
      }
      #problem .problem-node {
        width: 106px;
        min-height: 106px;
        gap: 0.5rem;
        padding: 0.6rem 0.4rem 0.72rem;
        border-color: rgba(23, 53, 44, 0.14);
        background: linear-gradient(180deg, #fffef9, #f7f2e6);
        box-shadow: 0 22px 34px -24px rgba(10, 52, 41, 0.3);
      }
      #problem .problem-node-icon {
        width: 54px;
        height: 54px;
        background: linear-gradient(
          135deg,
          #fffef9,
          rgba(var(--tone-rgb), 0.14)
        );
        border-color: rgba(var(--tone-rgb), 0.34);
      }
      #problem .problem-node-icon i {
        width: 25px !important;
        height: 25px !important;
      }
      #problem .problem-node-name {
        color: #1c2b24;
        font-size: 0.69rem;
        line-height: 1.2;
        letter-spacing: 0.005em;
      }
      #problem .network-particle {
        background: radial-gradient(
          circle at 35% 35%,
          #fffdf4,
          #f7dfae 55%,
          #d98e34
        );
        box-shadow: 0 0 18px rgba(217, 142, 52, 0.85);
      }
      #problem .network-connection {
        width: 2.5px;
        opacity: 0.4;
      }
      #problem .network-connection.is-active {
        box-shadow: 0 0 20px rgba(var(--line-rgb), 0.4);
      }
      .problem-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        margin-top: 1.5rem;
        color: var(--ink-soft);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-align: center;
      }
      .problem-hint::before,
      .problem-hint::after {
        content: "";
        width: 2.4rem;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(198, 164, 107, 0.6));
      }
      .problem-hint::after {
        background: linear-gradient(90deg, rgba(198, 164, 107, 0.6), transparent);
      }
      @media (max-width: 767px) {
        #problem .problem-node {
          width: 102px;
          min-height: 102px;
          padding: 0.5rem 0.38rem 0.62rem;
        }
        #problem .problem-core.is-selected {
          width: 318px;
          height: 318px;
        }
      }
      #problem .problem-network.is-expanded {
        width: min(700px, 94vw);
        height: 590px;
        transition:
          width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
          height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      }
      #problem .problem-network.is-expanded .network-connection {
        height: 470px;
      }

      /* ==========================================================
         TYPOGRAPHY REFINEMENT — unified size + rhythm
         ========================================================== */
      html {
        font-size: 16.5px;
      }
      body {
        font-size: 1.0625rem;
        letter-spacing: -0.003em;
      }
      main p {
        line-height: 1.72;
      }
      main .text-sm,
      main .text-base {
        line-height: 1.65;
      }
      #problem > .container > .text-center h2,
      #solution > .container > .text-center h2,
      #architecture h2,
      #innovation h2,
      #impact h2,
      #journey h2,
      #mission-and-values .mission-journey-header h2,
      #research-sdg h2,
      #team h2,
      #demo h2,
      #evidence > .container h2 {
        font-size: clamp(2.05rem, 3.1vw, 2.95rem);
        line-height: 1.08;
        letter-spacing: -0.03em;
      }
      .section-eyebrow {
        font-size: 0.78rem;
      }
      main section[id] > .container > .text-center > p {
        color: var(--ink-soft);
        font-size: 1.1rem;
        line-height: 1.72;
      }
      main h3.text-lg {
        font-size: 1.22rem;
        letter-spacing: -0.01em;
      }
      main a.text-sm,
      main button.text-sm {
        font-size: 0.95rem;
      }
      #evidence > .container h2 {
        background: linear-gradient(
          115deg,
          var(--forest-deep) 18%,
          var(--forest) 48%,
          #d98e34 130%
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }