:root {
     --navy: #0D1B6A;
     --teal: #7ACED3;
     --crimson: #8F3317;
     --amber: #E8A63D;
     --navy-deep: #091452;
     --navy-mid: #1E2E7A;
     --teal-light: #A8E4E9;
     --teal-dark: #4ABBC4;
     --amber-light: #F2C06A;
     --crimson-light: #B84420;
     --brand-muted: #5E6A8A;
     --brand-soft: #F0F3FF;
     --brand-white: #FAFBFF;
     --brand-line: #D8DEEF;
     --brand-orange: var(--amber);
     --brand-orange-light: var(--amber-light);
     --brand-ink: var(--navy);
     --brand-mid: var(--navy-mid);
     --font-head: 'Montserrat', sans-serif;
     --font-body: 'Inter', sans-serif;
     --font-mono: 'JetBrains Mono', monospace;
     --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
     --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: var(--font-body);
     background: var(--brand-white);
     color: var(--navy);
     overflow-x: hidden;
     line-height: 1.7;
 }

 h1,
 h2,
 h3,
 h4 {
     font-family: var(--font-head);
     line-height: 1.1;
 }

 h1 {
     font-weight: 900;
 }

 h2 {
     font-weight: 800;
 }

 h3 {
     font-weight: 700;
 }

 /* ─── Shared utilities ─── */
 .label-tag {
     font-family: var(--font-head);
     font-size: 0.7rem;
     font-weight: 700;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: var(--amber);
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }

 .label-tag::before {
     content: '';
     display: inline-block;
     width: 20px;
     height: 2px;
     background: var(--amber);
     flex-shrink: 0;
 }

 .label-tag.light {
     color: var(--teal-light);
 }

 .label-tag.light::before {
     background: var(--teal-light);
 }

 .label-tag.teal-tag {
     color: var(--teal-dark);
 }

 .label-tag.teal-tag::before {
     background: var(--teal-dark);
 }

 .text-highlight {
     position: relative;
     display: inline;
 }

 .text-highlight::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 0;
     width: 0;
     height: 3px;
     background: var(--brand-orange);
     border-radius: 2px;
     transition: width 0.8s var(--ease-expo);
 }

 .text-highlight.highlighted::after {
     width: 100%;
 }

 .btn-primary-ng {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: var(--brand-orange);
     color: #fff;
     font-family: var(--font-head);
     font-weight: 700;
     font-size: 0.85rem;
     letter-spacing: 0.06em;
     padding: 16px 32px;
     border-radius: 4px;
     border: none;
     cursor: pointer;
     text-decoration: none;
     transition: all 0.3s var(--ease-expo);
     position: relative;
     overflow: hidden;
 }

 .btn-primary-ng::after {
     content: '';
     position: absolute;
     inset: 0;
     background: rgba(255, 255, 255, 0.12);
     transform: translateX(-110%);
     transition: transform 0.4s var(--ease-expo);
 }

 .btn-primary-ng:hover::after {
     transform: translateX(0);
 }

 .btn-primary-ng:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 32px rgba(232, 166, 61, 0.4);
     color: #fff;
 }

 .btn-primary-ng .btn-arrow {
     width: 18px;
     height: 18px;
     transition: transform 0.3s var(--ease-expo);
 }

 .btn-primary-ng:hover .btn-arrow {
     transform: translateX(4px);
 }

 .btn-primary-ng.large {
     padding: 20px 44px;
     font-size: 0.95rem;
 }

 .btn-ghost-ng {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: transparent;
     color: var(--brand-ink);
     font-family: var(--font-head);
     font-weight: 700;
     font-size: 0.85rem;
     letter-spacing: 0.06em;
     padding: 15px 30px;
     border-radius: 4px;
     border: 1.5px solid var(--brand-line);
     cursor: pointer;
     text-decoration: none;
     transition: all 0.3s var(--ease-expo);
 }

 .btn-ghost-ng:hover {
     border-color: var(--brand-ink);
     background: var(--brand-ink);
     color: #fff;
     transform: translateY(-2px);
 }

 .btn-ghost-ng.on-dark {
     color: rgba(255, 255, 255, 0.7);
     border-color: rgba(255, 255, 255, 0.2);
 }

 .btn-ghost-ng.on-dark:hover {
     border-color: #fff;
     background: rgba(255, 255, 255, 0.1);
     color: #fff;
 }

 /* ─── Nav ─── */
 .ng-nav {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 1000;
     padding: 0 48px;
     height: 72px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: rgba(250, 251, 255, 0.92);
     backdrop-filter: blur(16px);
     border-bottom: 1px solid transparent;
     transition: border-color 0.3s, box-shadow 0.3s;
 }

 .ng-nav.scrolled {
     border-color: var(--brand-line);
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
 }

 .ng-logo {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     text-decoration: none;
     flex-shrink: 0;
 }

 .logo-wordmark {
     font-family: var(--font-head);
     font-weight: 900;
     font-size: 1.2rem;
     letter-spacing: -0.03em;
     line-height: 1;
     color: #0D1B6A;
 }

 .logo-wordmark-footer {
     color: var(--brand-line);
 }

 .logo-wordmark span {
     color: #8F3317;
 }

 .logo-tagline {
     font-family: var(--font-head);
     font-size: 0.52rem;
     font-weight: 700;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: #7ACED3;
     margin-top: 3px;
     display: block;
 }

 .ng-nav-links {
     display: flex;
     align-items: center;
     gap: 36px;
     list-style: none;
 }

 .ng-nav-links a {
     font-family: var(--font-head);
     font-size: 0.8rem;
     font-weight: 600;
     letter-spacing: 0.04em;
     color: var(--brand-mid);
     text-decoration: none;
     transition: color 0.2s;
     position: relative;
 }

 .ng-nav-links a::after {
     content: '';
     position: absolute;
     bottom: -3px;
     left: 0;
     width: 0;
     height: 2px;
     background: var(--amber);
     transition: width 0.3s var(--ease-expo);
 }

 .ng-nav-links a:hover {
     color: var(--brand-ink);
 }

 .ng-nav-links a:hover::after,
 .ng-nav-links a.active::after {
     width: 100%;
 }

 .ng-nav-links a.active {
     color: var(--brand-ink);
 }

 /* reveal */
 .reveal-up,
 .reveal-left,
 .reveal-right {
     opacity: 1;
 }

 /* ═══════════════════════════════════════════════════
       SECTION 1 — THREE.JS HERO
    ═══════════════════════════════════════════════════ */
 .it-hero {
     min-height: 100vh;
     padding-top: 72px;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
     background: var(--navy-deep);
 }

 #three-canvas {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     opacity: 0.85;
 }

 .hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(9, 20, 82, 0.85) 0%, rgba(9, 20, 82, 0.4) 50%, rgba(9, 20, 82, 0.7) 100%);
     z-index: 1;
 }

 .hero-content {
     position: relative;
     z-index: 2;
 }

 .hero-headline {
     font-size: clamp(2.4rem, 4.8vw, 4rem);
     font-weight: 900;
     line-height: 1.02;
     letter-spacing: -0.03em;
     color: #fff;
     margin-bottom: 24px;
 }

 .hero-headline em {
     font-style: normal;
     color: var(--amber);
 }

 .hero-sub {
     font-size: 1rem;
     color: rgba(255, 255, 255, 0.55);
     max-width: 520px;
     line-height: 1.85;
     margin-bottom: 44px;
 }

 .hero-proof-row {
     display: flex;
     gap: 32px;
     margin-top: 48px;
     flex-wrap: wrap;
 }

 .hpr-item {
     display: flex;
     flex-direction: column;
 }

 .hpr-num {
     font-family: var(--font-head);
     font-size: 2rem;
     font-weight: 900;
     line-height: 1;
     color: #fff;
 }

 .hpr-num span {
     color: var(--amber);
     font-size: 1rem;
 }

 .hpr-lbl {
     font-size: 0.72rem;
     color: rgba(255, 255, 255, 0.4);
     font-weight: 500;
     margin-top: 4px;
     letter-spacing: 0.04em;
 }

 .hpr-div {
     width: 1px;
     background: rgba(255, 255, 255, 0.1);
     align-self: stretch;
 }


 /* ─── Custom cursor ─── */
 .cursor-dot {
     width: 8px;
     height: 8px;
     background: var(--amber);
     border-radius: 50%;
     position: fixed;
     pointer-events: none;
     z-index: 9999;
     transform: translate(-50%, -50%);
     transition: width 0.2s, height 0.2s, background 0.2s;
 }

 .cursor-ring {
     width: 36px;
     height: 36px;
     border: 1.5px solid rgba(232, 166, 61, 0.5);
     border-radius: 50%;
     position: fixed;
     pointer-events: none;
     z-index: 9998;
     transform: translate(-50%, -50%);
 }

 body:has(a:hover) .cursor-dot,
 body:has(button:hover) .cursor-dot {
     width: 14px;
     height: 14px;
 }


 /* ─── Scroll progress bar ─── */
 #scrollBar {
     position: fixed;
     top: 0;
     left: 0;
     height: 3px;
     z-index: 2000;
     background: linear-gradient(90deg, var(--amber), var(--teal-dark));
     width: 0%;
     transform-origin: left;
     pointer-events: none;
 }


 /* code snippet card on right */
 .hero-code-card {
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 16px;
     padding: 28px 32px;
     backdrop-filter: blur(12px);
     position: relative;
 }

 .code-card-bar {
     display: flex;
     gap: 6px;
     margin-bottom: 20px;
 }

 .code-card-bar span {
     width: 12px;
     height: 12px;
     border-radius: 50%;
 }

 .code-card-bar .dot-r {
     background: #FF5F56;
 }

 .code-card-bar .dot-y {
     background: #FFBD2E;
 }

 .code-card-bar .dot-g {
     background: #27C93F;
 }

 .code-block {
     font-family: var(--font-mono);
     font-size: 0.78rem;
     line-height: 1.9;
     color: rgba(255, 255, 255, 0.45);
 }

 .code-block .c-kw {
     color: var(--teal-light);
 }

 .code-block .c-fn {
     color: var(--amber-light);
 }

 .code-block .c-str {
     color: #A8E4A0;
 }

 .code-block .c-num {
     color: #E08060;
 }

 .code-block .c-cm {
     color: rgba(255, 255, 255, 0.25);
 }

 .code-block .c-cursor {
     display: inline-block;
     width: 2px;
     height: 1em;
     background: var(--teal);
     margin-left: 1px;
     vertical-align: middle;
     animation: blink 1s step-end infinite;
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 1
     }

     50% {
         opacity: 0
     }
 }

 .code-tags {
     display: flex;
     gap: 8px;
     margin-top: 20px;
     flex-wrap: wrap;
 }

 .code-tag {
     font-family: var(--font-mono);
     font-size: 0.65rem;
     font-weight: 500;
     padding: 4px 10px;
     border-radius: 4px;
 }

 .code-tag.t-blue {
     background: rgba(74, 187, 196, 0.15);
     color: var(--teal-light);
     border: 1px solid rgba(74, 187, 196, 0.2);
 }

 .code-tag.t-amber {
     background: rgba(232, 166, 61, 0.12);
     color: var(--amber-light);
     border: 1px solid rgba(232, 166, 61, 0.2);
 }

 .code-tag.t-green {
     background: rgba(160, 228, 160, 0.1);
     color: #A8E4A0;
     border: 1px solid rgba(160, 228, 160, 0.2);
 }

 /* scroll cue */
 .scroll-cue {
     position: absolute;
     bottom: 32px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 3;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
 }

 .scroll-cue span {
     font-family: var(--font-head);
     font-size: 0.6rem;
     font-weight: 700;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.25);
 }

 .scroll-line {
     width: 1px;
     height: 40px;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent);
     animation: scrollPulse 1.8s ease-in-out infinite;
 }

 @keyframes scrollPulse {

     0%,
     100% {
         opacity: 0.3;
         transform: scaleY(1)
     }

     50% {
         opacity: 1;
         transform: scaleY(1.2)
     }
 }

 /* ═══════════════════════════════════════════════════
       SECTION 2 — DIGITAL TRANSFORMATION
    ═══════════════════════════════════════════════════ */
 .transform-section {
     padding: 120px 0;
     background: var(--brand-white);
     position: relative;
     overflow: hidden;
 }

 .transform-section::before {
     content: '';
     position: absolute;
     right: -200px;
     top: 50%;
     width: 500px;
     height: 500px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(74, 187, 196, 0.06), transparent 70%);
     transform: translateY(-50%);
 }

 .transform-flow {
     display: flex;
     flex-direction: column;
     gap: 1px;
 }

 .tf-row {
     display: flex;
     align-items: stretch;
     gap: 0;
     border: 1px solid var(--brand-line);
     border-radius: 14px;
     overflow: hidden;
     transition: transform 0.3s var(--ease-expo), box-shadow 0.3s;
     background: #fff;
 }

 .tf-row:hover {
     transform: translateX(8px);
     box-shadow: 0 8px 32px rgba(13, 27, 106, 0.08);
 }

 .tf-row+.tf-row {
     margin-top: 12px;
 }

 .tf-num {
     width: 64px;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--font-mono);
     font-size: 1.2rem;
     font-weight: 700;
     color: rgba(255, 255, 255, 0.8);
 }

 .tf-num.amber {
     background: var(--amber);
 }

 .tf-num.teal {
     background: var(--teal-dark);
 }

 .tf-num.navy {
     background: var(--navy);
 }

 .tf-body {
     padding: 20px 24px;
     flex: 1;
 }

 .tf-title {
     font-family: var(--font-head);
     font-size: 0.9rem;
     font-weight: 800;
     color: var(--navy);
     margin-bottom: 4px;
 }

 .tf-desc {
     font-size: 0.8rem;
     color: var(--brand-muted);
     line-height: 1.65;
 }

 .tf-icon {
     width: 64px;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.4rem;
     background: var(--brand-soft);
 }

 /* ═══════════════════════════════════════════════════
       SECTION 3 — CUSTOM SOFTWARE
    ═══════════════════════════════════════════════════ */
 .software-section {
     padding: 120px 0;
     background: var(--navy);
     position: relative;
     overflow: hidden;
 }

 .sw-grid-bg {
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
     background-size: 60px 60px;
 }

 .sw-card {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.09);
     border-radius: 18px;
     padding: 32px;
     height: 100%;
     position: relative;
     overflow: hidden;
     transition: background 0.3s, transform 0.3s var(--ease-expo), box-shadow 0.3s;
 }

 .sw-card:hover {
     background: rgba(255, 255, 255, 0.09);
     transform: translateY(-8px);
     box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
 }

 .sw-card::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 2px;
 }

 .sw-card.c-amber::after {
     background: linear-gradient(90deg, var(--amber), transparent);
 }

 .sw-card.c-teal::after {
     background: linear-gradient(90deg, var(--teal-dark), transparent);
 }

 .sw-card.c-red::after {
     background: linear-gradient(90deg, #D05030, transparent);
 }

 .sw-icon {
     font-size: 2.2rem;
     margin-bottom: 20px;
     display: block;
 }

 .sw-title {
     font-family: var(--font-head);
     font-size: 1.05rem;
     font-weight: 800;
     color: #fff;
     margin-bottom: 10px;
 }

 .sw-body {
     font-size: 0.82rem;
     color: rgba(255, 255, 255, 0.45);
     line-height: 1.75;
     margin-bottom: 20px;
 }

 .sw-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
 }

 .sw-tag {
     font-family: var(--font-mono);
     font-size: 0.62rem;
     font-weight: 500;
     padding: 4px 10px;
     border-radius: 4px;
     background: rgba(255, 255, 255, 0.07);
     color: rgba(255, 255, 255, 0.5);
     border: 1px solid rgba(255, 255, 255, 0.08);
 }

 /* ═══════════════════════════════════════════════════
       SECTION 4 — MOBILE APPS
    ═══════════════════════════════════════════════════ */
 .mobile-section {
     padding: 120px 0;
     background: var(--brand-soft);
     position: relative;
     overflow: hidden;
 }

 /* ── Premium CSS Phone Mockup ── */
 .mob-scene-wrap {
     position: relative;
     width: 380px;
     max-width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 /* Outer glow atmosphere */
 .mob-scene-wrap::before {
     content: '';
     position: absolute;
     inset: -60px;
     background: radial-gradient(ellipse at 50% 50%, rgba(74, 187, 196, 0.12) 0%, rgba(13, 27, 106, 0.06) 50%, transparent 70%);
     border-radius: 50%;
     animation: mobGlow 4s ease-in-out infinite;
 }

 @keyframes mobGlow {

     0%,
     100% {
         opacity: 0.7;
         transform: scale(1);
     }

     50% {
         opacity: 1;
         transform: scale(1.05);
     }
 }

 /* Phone shell */
 .mob-phone-shell {
     position: relative;
     width: 280px;
     border-radius: 44px;
     background: linear-gradient(160deg, #1a1f3a 0%, #0d1226 60%, #111830 100%);
     box-shadow:
         0 0 0 2px rgba(255, 255, 255, 0.1),
         0 0 0 6px rgba(13, 27, 106, 0.8),
         0 0 0 8px rgba(255, 255, 255, 0.04),
         0 60px 120px rgba(0, 0, 0, 0.5),
         0 20px 60px rgba(13, 27, 106, 0.4),
         inset 0 1px 0 rgba(255, 255, 255, 0.08);
     animation: phoneBob 5s ease-in-out infinite;
     z-index: 2;
 }

 @keyframes phoneBob {

     0%,
     100% {
         transform: translateY(0px) rotate(-1deg);
     }

     50% {
         transform: translateY(-12px) rotate(1deg);
     }
 }

 /* Side buttons */
 .mob-phone-shell::before {
     content: '';
     position: absolute;
     right: -4px;
     top: 100px;
     width: 4px;
     height: 60px;
     background: rgba(255, 255, 255, 0.08);
     border-radius: 0 4px 4px 0;
     box-shadow: 0 45px 0 rgba(255, 255, 255, 0.08);
 }

 .mob-phone-shell::after {
     content: '';
     position: absolute;
     left: -4px;
     top: 80px;
     width: 4px;
     height: 36px;
     background: rgba(255, 255, 255, 0.06);
     border-radius: 4px 0 0 4px;
     box-shadow: 0 50px 0 rgba(255, 255, 255, 0.06), 0 94px 0 rgba(255, 255, 255, 0.06);
 }

 /* Screen area */
 .mob-screen {
     margin: 12px;
     border-radius: 34px;
     overflow: hidden;
     background: #fff;
     min-height: 560px;
     position: relative;
 }

 /* Notch */
 .mob-notch {
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 110px;
     height: 30px;
     background: #0d1226;
     border-radius: 0 0 20px 20px;
     z-index: 10;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
 }

 .mob-notch-cam {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: #1a1f3a;
     box-shadow: 0 0 0 2px rgba(74, 187, 196, 0.2);
 }

 .mob-notch-mic {
     width: 28px;
     height: 5px;
     border-radius: 4px;
     background: #1a1f3a;
 }

 /* App content */
 .mob-app-content {
     padding: 40px 16px 16px;
     background: #fff;
     min-height: 560px;
     display: flex;
     flex-direction: column;
 }

 /* App header */
 .mob-app-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 20px;
 }

 .mob-app-greeting {
     font-family: var(--font-head);
     font-size: 1.05rem;
     font-weight: 900;
     color: var(--navy);
     line-height: 1.15;
 }

 .mob-app-greeting small {
     display: block;
     font-size: 0.6rem;
     font-weight: 500;
     color: var(--brand-muted);
     letter-spacing: 0.04em;
 }

 .mob-app-avatar {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--teal-dark), var(--navy-mid));
     border: 2px solid rgba(74, 187, 196, 0.3);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.9rem;
 }

 /* Rooms row */
 .mob-section-label {
     font-family: var(--font-head);
     font-size: 0.65rem;
     font-weight: 800;
     color: var(--navy);
     letter-spacing: 0.04em;
     margin-bottom: 10px;
     text-transform: uppercase;
 }

 .mob-rooms-row {
     display: flex;
     gap: 8px;
     margin-bottom: 18px;
     overflow: hidden;
 }

 .mob-room-chip {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4px;
     padding: 8px 10px;
     border-radius: 14px;
     font-family: var(--font-mono);
     font-size: 0.52rem;
     color: var(--brand-muted);
     border: 1px solid var(--brand-line);
     background: var(--brand-soft);
     white-space: nowrap;
     cursor: pointer;
     transition: all 0.2s;
     flex: 1;
 }

 .mob-room-chip.active {
     background: var(--navy);
     color: #fff;
     border-color: var(--navy);
 }

 .mob-room-chip-icon {
     font-size: 1rem;
 }

 /* Smart systems grid */
 .mob-systems-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 8px;
     margin-bottom: 14px;
 }

 .mob-sys-card {
     border-radius: 16px;
     padding: 14px 12px;
     position: relative;
     overflow: hidden;
     transition: transform 0.2s;
 }

 .mob-sys-card:hover {
     transform: scale(1.02);
 }

 .mob-sys-card.c-purple {
     background: linear-gradient(135deg, #e8e0f8, #d4c8f5);
 }

 .mob-sys-card.c-blue {
     background: linear-gradient(135deg, #cce8ff, #b3d9ff);
 }

 .mob-sys-card.c-yellow {
     background: linear-gradient(135deg, #fff3cc, #ffe8a0);
 }

 .mob-sys-card.c-pink {
     background: linear-gradient(135deg, #ffd6d6, #ffbcbc);
 }

 .mob-sys-icon {
     font-size: 1.3rem;
     margin-bottom: 8px;
     display: block;
 }

 .mob-sys-name {
     font-family: var(--font-head);
     font-size: 0.65rem;
     font-weight: 800;
     color: #1a1a2e;
     margin-bottom: 2px;
 }

 .mob-sys-sub {
     font-family: var(--font-mono);
     font-size: 0.52rem;
     color: rgba(30, 30, 60, 0.55);
 }

 /* Toggle switch */
 .mob-toggle {
     position: absolute;
     top: 12px;
     right: 10px;
     width: 28px;
     height: 16px;
     border-radius: 99px;
     border: none;
     cursor: pointer;
     transition: background 0.3s;
     display: flex;
     align-items: center;
     padding: 0 2px;
 }

 .mob-toggle.on {
     background: var(--navy);
 }

 .mob-toggle.off {
     background: rgba(0, 0, 0, 0.15);
 }

 .mob-toggle-knob {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: #fff;
     transition: transform 0.3s;
 }

 .mob-toggle.on .mob-toggle-knob {
     transform: translateX(12px);
 }

 .mob-toggle.off .mob-toggle-knob {
     transform: translateX(0);
 }

 /* Bottom nav */
 .mob-bottom-nav {
     margin-top: auto;
     background: var(--navy);
     border-radius: 18px;
     padding: 12px 24px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .mob-nav-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 3px;
     cursor: pointer;
 }

 .mob-nav-icon {
     font-size: 1rem;
 }

 .mob-nav-label {
     font-family: var(--font-mono);
     font-size: 0.45rem;
     color: rgba(255, 255, 255, 0.45);
 }

 .mob-nav-item.active .mob-nav-label {
     color: var(--teal-light);
 }

 .mob-nav-item.active .mob-nav-icon {
     filter: drop-shadow(0 0 4px rgba(122, 206, 211, 0.6));
 }

 /* ── Floating info badges (same as before) ── */
 .mob-badge {
     position: absolute;
     display: flex;
     align-items: center;
     gap: 10px;
     background: rgba(255, 255, 255, 0.96);
     backdrop-filter: blur(16px);
     border: 1px solid rgba(13, 27, 106, 0.1);
     border-radius: 14px;
     padding: 10px 16px;
     box-shadow: 0 12px 40px rgba(13, 27, 106, 0.18);
     animation: badgeFloat 4s ease-in-out infinite;
     z-index: 10;
     white-space: nowrap;
 }

 .mob-badge--tl {
     top: 6%;
     left: -12%;
     animation-delay: 0s;
 }

 .mob-badge--tr {
     top: 18%;
     right: -12%;
     animation-delay: 1s;
 }

 .mob-badge--br {
     bottom: 24%;
     right: -12%;
     animation-delay: 2s;
 }

 .mob-badge--bl {
     bottom: 10%;
     left: -12%;
     animation-delay: 0.5s;
 }

 @keyframes badgeFloat {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-8px);
     }
 }

 .mbb-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     flex-shrink: 0;
     animation: dotPulse 2s ease-in-out infinite;
 }

 @keyframes dotPulse {

     0%,
     100% {
         opacity: 1;
         box-shadow: 0 0 0 0 rgba(93, 216, 122, 0.5);
     }

     50% {
         opacity: 0.7;
         box-shadow: 0 0 0 6px rgba(93, 216, 122, 0);
     }
 }

 .mbb-icon {
     font-size: 1.1rem;
     line-height: 1;
     flex-shrink: 0;
 }

 .mbb-title {
     font-family: var(--font-head);
     font-size: 0.78rem;
     font-weight: 800;
     color: var(--navy);
     line-height: 1.1;
 }

 .mbb-sub {
     font-family: var(--font-mono);
     font-size: 0.62rem;
     color: var(--brand-muted);
     margin-top: 2px;
 }

 /* ── Platform pills ── */
 .mob-platform-pills {
     position: absolute;
     bottom: -40px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 8px;
     z-index: 10;
 }

 .mob-pill {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-family: var(--font-mono);
     font-size: 0.68rem;
     font-weight: 700;
     padding: 7px 14px;
     border-radius: 100px;
     backdrop-filter: blur(12px);
     border: 1px solid rgba(13, 27, 106, 0.12);
     background: rgba(255, 255, 255, 0.9);
     box-shadow: 0 4px 16px rgba(13, 27, 106, 0.1);
     white-space: nowrap;
 }

 .mob-pill--ios {
     color: #555;
 }

 .mob-pill--android {
     color: #3DDC84;
 }

 .mob-pill--rn {
     color: #61DAFB;
 }

 .mobile-feat {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .mob-feat-item {
     display: flex;
     gap: 16px;
     align-items: flex-start;
     padding: 20px;
     border-radius: 14px;
     border: 1px solid var(--brand-line);
     background: #fff;
     transition: transform 0.25s var(--ease-expo), box-shadow 0.25s;
 }

 .mob-feat-item:hover {
     transform: translateX(8px);
     box-shadow: 0 8px 24px rgba(13, 27, 106, 0.08);
 }

 .mfi-icon {
     font-size: 1.6rem;
     flex-shrink: 0;
 }

 .mfi-title {
     font-family: var(--font-head);
     font-size: 0.88rem;
     font-weight: 700;
     color: var(--navy);
     margin-bottom: 4px;
 }

 .mfi-body {
     font-size: 0.78rem;
     color: var(--brand-muted);
     line-height: 1.6;
 }

 /* ═══════════════════════════════════════════════════
       SECTION 5 — WEB APP & SaaS
    ═══════════════════════════════════════════════════ */
 .saas-section {
     padding: 120px 0;
     background: var(--brand-white);
     position: relative;
 }

 .saas-browser {
     background: var(--navy-deep);
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 40px 80px rgba(13, 27, 106, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.08);
 }

 .browser-bar {
     background: rgba(255, 255, 255, 0.05);
     padding: 12px 20px;
     display: flex;
     align-items: center;
     gap: 12px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }

 .browser-dots {
     display: flex;
     gap: 5px;
 }

 .browser-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
 }

 .browser-dot.r {
     background: rgba(255, 95, 86, 0.6);
 }

 .browser-dot.y {
     background: rgba(255, 189, 46, 0.6);
 }

 .browser-dot.g {
     background: rgba(39, 201, 63, 0.6);
 }

 .browser-url {
     flex: 1;
     background: rgba(255, 255, 255, 0.06);
     border-radius: 6px;
     padding: 5px 14px;
     font-family: var(--font-mono);
     font-size: 0.68rem;
     color: rgba(255, 255, 255, 0.3);
 }

 .browser-body {
     padding: 28px;
 }

 .browser-dash {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 12px;
     margin-bottom: 16px;
 }

 .dash-kpi {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 10px;
     padding: 14px 16px;
     border: 1px solid rgba(255, 255, 255, 0.07);
 }

 .dash-kpi-val {
     font-family: var(--font-head);
     font-size: 1.4rem;
     font-weight: 900;
     line-height: 1;
 }

 .dash-kpi-val.amber {
     color: var(--amber);
 }

 .dash-kpi-val.teal {
     color: var(--teal-light);
 }

 .dash-kpi-val.red {
     color: #E08060;
 }

 .dash-kpi-label {
     font-size: 0.65rem;
     color: rgba(255, 255, 255, 0.3);
     font-family: var(--font-mono);
     margin-top: 4px;
 }

 .dash-chart {
     background: rgba(255, 255, 255, 0.04);
     border-radius: 10px;
     padding: 16px;
     border: 1px solid rgba(255, 255, 255, 0.06);
 }

 .dash-chart-bars {
     display: flex;
     gap: 6px;
     align-items: flex-end;
     height: 60px;
 }

 .dcb {
     flex: 1;
     border-radius: 3px 3px 0 0;
 }

 .dash-table {
     background: rgba(255, 255, 255, 0.04);
     border-radius: 10px;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.06);
 }

 .dash-tr {
     display: flex;
     padding: 8px 14px;
     font-family: var(--font-mono);
     font-size: 0.65rem;
     border-bottom: 1px solid rgba(255, 255, 255, 0.04);
 }

 .dash-tr:last-child {
     border-bottom: none;
 }

 .dash-tr.header {
     color: rgba(255, 255, 255, 0.25);
 }

 .dash-tr.data {
     color: rgba(255, 255, 255, 0.55);
 }

 .dash-td {
     flex: 1;
 }

 .dash-badge {
     display: inline-block;
     padding: 2px 7px;
     border-radius: 3px;
     font-size: 0.55rem;
     font-weight: 700;
 }

 .dash-badge.green {
     background: rgba(39, 201, 63, 0.15);
     color: #5DD87A;
 }

 .dash-badge.amber {
     background: rgba(232, 166, 61, 0.15);
     color: var(--amber);
 }

 .saas-pillars {
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .saas-pill {
     display: flex;
     gap: 16px;
     padding: 18px 20px;
     border-radius: 12px;
     border: 1px solid var(--brand-line);
     background: var(--brand-soft);
     align-items: flex-start;
     transition: all 0.25s var(--ease-expo);
 }

 .saas-pill:hover {
     border-color: var(--teal-dark);
     transform: translateX(6px);
     background: #fff;
     box-shadow: 0 4px 20px rgba(74, 187, 196, 0.1);
 }

 .saas-pill-icon {
     font-size: 1.3rem;
     flex-shrink: 0;
 }

 .saas-pill-title {
     font-family: var(--font-head);
     font-size: 0.85rem;
     font-weight: 700;
     color: var(--navy);
     margin-bottom: 3px;
 }

 .saas-pill-body {
     font-size: 0.78rem;
     color: var(--brand-muted);
     line-height: 1.6;
 }

 /* ═══════════════════════════════════════════════════
       SECTION 6 — TECH STACK
    ═══════════════════════════════════════════════════ */
 .stack-section {
     padding: 120px 0;
     background: var(--navy-deep);
     position: relative;
     overflow: hidden;
 }

 .stack-section::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
     background-size: 60px 60px;
 }

 .stack-category {
     margin-bottom: 48px;
 }

 .stack-cat-label {
     font-family: var(--font-mono);
     font-size: 0.65rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.15em;
     margin-bottom: 16px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .stack-cat-label::after {
     content: '';
     flex: 1;
     height: 1px;
     background: rgba(255, 255, 255, 0.07);
 }

 .stack-cat-label.amber {
     color: var(--amber);
 }

 .stack-cat-label.teal {
     color: var(--teal-dark);
 }

 .stack-cat-label.red {
     color: #E08060;
 }

 .stack-cat-label.white {
     color: rgba(255, 255, 255, 0.35);
 }

 .stack-pills {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
 }

 .stack-pill {
     font-family: var(--font-mono);
     font-size: 0.78rem;
     font-weight: 500;
     padding: 10px 20px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.09);
     color: rgba(255, 255, 255, 0.65);
     display: flex;
     align-items: center;
     gap: 8px;
     transition: all 0.25s var(--ease-expo);
     cursor: default;
 }

 .stack-pill:hover {
     transform: translateY(-4px);
     color: #fff;
 }

 .stack-pill.s-amber:hover {
     background: rgba(232, 166, 61, 0.15);
     border-color: rgba(232, 166, 61, 0.3);
     box-shadow: 0 8px 20px rgba(232, 166, 61, 0.15);
 }

 .stack-pill.s-teal:hover {
     background: rgba(74, 187, 196, 0.15);
     border-color: rgba(74, 187, 196, 0.3);
     box-shadow: 0 8px 20px rgba(74, 187, 196, 0.15);
 }

 .stack-pill.s-red:hover {
     background: rgba(208, 80, 48, 0.15);
     border-color: rgba(208, 80, 48, 0.3);
     box-shadow: 0 8px 20px rgba(208, 80, 48, 0.12);
 }

 .stack-pill.s-white:hover {
     background: rgba(255, 255, 255, 0.1);
     border-color: rgba(255, 255, 255, 0.2);
 }

 .sp-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     flex-shrink: 0;
 }

 .sp-dot.amber {
     background: var(--amber);
 }

 .sp-dot.teal {
     background: var(--teal-dark);
 }

 .sp-dot.red {
     background: #D05030;
 }

 .sp-dot.white {
     background: rgba(255, 255, 255, 0.4);
 }

 /* ═══════════════════════════════════════════════════
       SECTION 7 — DATA-FIRST / APIs
    ═══════════════════════════════════════════════════ */
 .api-section {
     padding: 120px 0;
     background: var(--brand-white);
     position: relative;
 }

 .api-flow {
     position: relative;
 }

 .api-node {
     background: var(--brand-soft);
     border: 1px solid var(--brand-line);
     border-radius: 12px;
     padding: 16px 20px;
     display: flex;
     align-items: center;
     gap: 12px;
     transition: all 0.25s var(--ease-expo);
 }

 .api-node:hover {
     border-color: var(--teal-dark);
     background: #fff;
     transform: scale(1.03);
     box-shadow: 0 8px 24px rgba(74, 187, 196, 0.1);
 }

 .api-node-icon {
     font-size: 1.4rem;
     flex-shrink: 0;
 }

 .api-node-title {
     font-family: var(--font-head);
     font-size: 0.82rem;
     font-weight: 700;
     color: var(--navy);
 }

 .api-node-sub {
     font-family: var(--font-mono);
     font-size: 0.65rem;
     color: var(--brand-muted);
 }

 .api-arrow {
     text-align: center;
     padding: 8px 0;
     font-size: 1.2rem;
     color: var(--teal-dark);
     opacity: 0.6;
 }

 .api-center-badge {
     background: var(--navy);
     border-radius: 16px;
     padding: 28px 24px;
     text-align: center;
     border: 1px solid rgba(255, 255, 255, 0.06);
 }

 .api-badge-icon {
     font-size: 2.5rem;
     display: block;
     margin-bottom: 12px;
 }

 .api-badge-title {
     font-family: var(--font-head);
     font-size: 1rem;
     font-weight: 800;
     color: #fff;
     margin-bottom: 6px;
 }

 .api-badge-sub {
     font-size: 0.78rem;
     color: rgba(255, 255, 255, 0.4);
     line-height: 1.6;
 }

 .api-feature-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
 }

 .api-feat {
     padding: 18px 20px;
     border-radius: 12px;
     border: 1px solid var(--brand-line);
     background: var(--brand-soft);
 }

 .api-feat-title {
     font-family: var(--font-head);
     font-size: 0.82rem;
     font-weight: 700;
     color: var(--navy);
     margin-bottom: 4px;
 }

 .api-feat-body {
     font-size: 0.75rem;
     color: var(--brand-muted);
     line-height: 1.6;
 }

 /* ═══════════════════════════════════════════════════
       SECTION 8 — QA & SECURITY
    ═══════════════════════════════════════════════════ */
 .qa-section {
     padding: 120px 0;
     background: var(--brand-soft);
     position: relative;
     overflow: hidden;
 }

 .qa-card {
     border-radius: 18px;
     padding: 36px;
     height: 100%;
     position: relative;
     overflow: hidden;
     border: 1px solid var(--brand-line);
     background: #fff;
     transition: transform 0.3s var(--ease-expo), box-shadow 0.3s;
 }

 .qa-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 24px 48px rgba(13, 27, 106, 0.1);
 }

 .qa-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
 }

 .qa-card.qa-amber::before {
     background: linear-gradient(90deg, var(--amber), var(--amber-light));
 }

 .qa-card.qa-teal::before {
     background: linear-gradient(90deg, var(--teal-dark), var(--teal-light));
 }

 .qa-card.qa-red::before {
     background: linear-gradient(90deg, var(--crimson), #D05030);
 }

 .qa-card.qa-navy::before {
     background: linear-gradient(90deg, var(--navy), var(--navy-mid));
 }

 .qa-icon {
     font-size: 2rem;
     margin-bottom: 20px;
     display: block;
 }

 .qa-title {
     font-family: var(--font-head);
     font-size: 1rem;
     font-weight: 800;
     color: var(--navy);
     margin-bottom: 10px;
 }

 .qa-body {
     font-size: 0.82rem;
     color: var(--brand-muted);
     line-height: 1.75;
 }

 .qa-stat {
     margin-top: 20px;
     display: flex;
     align-items: baseline;
     gap: 6px;
 }

 .qa-stat-num {
     font-family: var(--font-head);
     font-size: 2rem;
     font-weight: 900;
     line-height: 1;
 }

 .qa-stat-num.amber {
     color: var(--amber);
 }

 .qa-stat-num.teal {
     color: var(--teal-dark);
 }

 .qa-stat-num.red {
     color: var(--crimson-light);
 }

 .qa-stat-num.navy {
     color: var(--navy);
 }

 .qa-stat-label {
     font-family: var(--font-mono);
     font-size: 0.7rem;
     color: var(--brand-muted);
 }

 /* ═══════════════════════════════════════════════════
       SECTION 9 — SDLC PROCESS
    ═══════════════════════════════════════════════════ */
 .sdlc-section {
     padding: 120px 0;
     background: var(--navy);
     position: relative;
 }

 .sdlc-bg {
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
     background-size: 60px 60px;
 }

 .sdlc-timeline {
     position: relative;
 }

 .sdlc-vline {
     position: absolute;
     left: 32px;
     top: 0;
     bottom: 0;
     width: 2px;
     background: rgba(255, 255, 255, 0.06);
 }

 .sdlc-item {
     display: flex;
     gap: 32px;
     padding: 0 0 48px 0;
     position: relative;
 }

 .sdlc-item:last-child {
     padding-bottom: 0;
 }

 .sdlc-dot-wrap {
     width: 64px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
     z-index: 2;
 }

 .sdlc-dot {
     width: 64px;
     height: 64px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     flex-shrink: 0;
     border: 2px solid rgba(255, 255, 255, 0.08);
     transition: transform 0.3s var(--ease-expo), box-shadow 0.3s;
 }

 .sdlc-dot:hover {
     transform: scale(1.1);
 }

 .sdlc-dot.sd-amber {
     background: rgba(232, 166, 61, 0.15);
     box-shadow: 0 0 20px rgba(232, 166, 61, 0);
 }

 .sdlc-dot.sd-amber:hover {
     box-shadow: 0 0 30px rgba(232, 166, 61, 0.3);
 }

 .sdlc-dot.sd-teal {
     background: rgba(74, 187, 196, 0.15);
 }

 .sdlc-dot.sd-teal:hover {
     box-shadow: 0 0 30px rgba(74, 187, 196, 0.3);
 }

 .sdlc-dot.sd-navy {
     background: rgba(255, 255, 255, 0.08);
 }

 .sdlc-dot.sd-red {
     background: rgba(208, 80, 48, 0.15);
 }

 .sdlc-dot.sd-red:hover {
     box-shadow: 0 0 30px rgba(208, 80, 48, 0.25);
 }

 .sdlc-dot.sd-green {
     background: rgba(39, 201, 63, 0.12);
 }

 .sdlc-dot.sd-green:hover {
     box-shadow: 0 0 30px rgba(39, 201, 63, 0.25);
 }

 .sdlc-content {
     flex: 1;
     padding-top: 8px;
 }

 .sdlc-step-num {
     font-family: var(--font-mono);
     font-size: 0.62rem;
     font-weight: 700;
     letter-spacing: 0.15em;
     color: rgba(255, 255, 255, 0.25);
     text-transform: uppercase;
     margin-bottom: 6px;
 }

 .sdlc-step-title {
     font-family: var(--font-head);
     font-size: 1.3rem;
     font-weight: 800;
     color: #fff;
     margin-bottom: 10px;
 }

 .sdlc-step-body {
     font-size: 0.85rem;
     color: rgba(255, 255, 255, 0.45);
     line-height: 1.75;
     max-width: 540px;
 }

 .sdlc-pills {
     display: flex;
     gap: 6px;
     flex-wrap: wrap;
     margin-top: 14px;
 }

 .sdlc-pill {
     font-family: var(--font-mono);
     font-size: 0.62rem;
     font-weight: 500;
     padding: 4px 10px;
     border-radius: 4px;
     background: rgba(255, 255, 255, 0.06);
     color: rgba(255, 255, 255, 0.45);
     border: 1px solid rgba(255, 255, 255, 0.08);
 }

 /* ═══════════════════════════════════════════════════
       SECTION 9 — SDLC RIGHT PANEL
    ═══════════════════════════════════════════════════ */
 .sdlc-visual {
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .sdlc-sprint-card {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.09);
     border-radius: 20px;
     padding: 28px;
     overflow: hidden;
 }

 .sdlc-sprint-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     margin-bottom: 24px;
 }

 .sdlc-sprint-label {
     font-family: var(--font-mono);
     font-size: 0.62rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.15em;
     color: rgba(255, 255, 255, 0.3);
     margin-bottom: 4px;
 }

 .sdlc-sprint-title {
     font-family: var(--font-head);
     font-size: 0.95rem;
     font-weight: 800;
     color: #fff;
 }

 .sdlc-sprint-badge {
     font-family: var(--font-mono);
     font-size: 0.65rem;
     font-weight: 700;
     padding: 6px 14px;
     border-radius: 100px;
     background: rgba(232, 166, 61, 0.15);
     border: 1px solid rgba(232, 166, 61, 0.3);
     color: var(--amber-light);
     white-space: nowrap;
 }

 .sdlc-kanban {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 10px;
     margin-bottom: 20px;
 }

 .kanban-col {}

 .kanban-col-title {
     font-family: var(--font-mono);
     font-size: 0.6rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.12em;
     margin-bottom: 8px;
 }

 .kc-todo {
     color: rgba(255, 255, 255, 0.3);
 }

 .kc-inprog {
     color: var(--teal-light);
 }

 .kc-done {
     color: #5DD87A;
 }

 .kanban-card {
     background: rgba(255, 255, 255, 0.06);
     border: 1px solid rgba(255, 255, 255, 0.07);
     border-radius: 8px;
     padding: 8px 10px;
     margin-bottom: 6px;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: background 0.25s, transform 0.25s;
 }

 .kanban-card:hover {
     background: rgba(255, 255, 255, 0.1);
     transform: translateY(-2px);
 }

 .kanban-card.kc-active {
     border-color: rgba(74, 187, 196, 0.25);
     background: rgba(74, 187, 196, 0.07);
 }

 .kanban-card.kc-done-card {
     border-color: rgba(93, 216, 122, 0.2);
     background: rgba(93, 216, 122, 0.06);
 }

 .kc-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     flex-shrink: 0;
 }

 .kc-dot.amber {
     background: var(--amber);
 }

 .kc-dot.teal {
     background: var(--teal-dark);
 }

 .kc-dot.green {
     background: #5DD87A;
 }

 .kc-text {
     font-family: var(--font-mono);
     font-size: 0.62rem;
     color: rgba(255, 255, 255, 0.55);
 }

 .sdlc-progress-wrap {
     margin-top: 4px;
 }

 .sdlc-progress-label {
     display: flex;
     justify-content: space-between;
     font-family: var(--font-mono);
     font-size: 0.65rem;
     color: rgba(255, 255, 255, 0.35);
     margin-bottom: 8px;
 }

 .sdlc-pct {
     color: var(--amber-light);
     font-weight: 700;
 }

 .sdlc-progress-track {
     height: 6px;
     border-radius: 99px;
     background: rgba(255, 255, 255, 0.07);
     overflow: hidden;
 }

 .sdlc-progress-fill {
     height: 100%;
     border-radius: 99px;
     width: 0;
     background: linear-gradient(90deg, var(--amber), var(--teal-dark));
     transition: width 0.05s linear;
 }

 .sdlc-commits {
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.07);
     border-radius: 14px;
     padding: 18px 20px;
 }

 .sdlc-commits-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 14px;
 }

 .sdlc-commits-label {
     font-family: var(--font-mono);
     font-size: 0.65rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.12em;
     color: rgba(255, 255, 255, 0.3);
 }

 .sdlc-live-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: #5DD87A;
     box-shadow: 0 0 8px rgba(93, 216, 122, 0.6);
     animation: livePulse 2s ease-in-out infinite;
 }

 @keyframes livePulse {

     0%,
     100% {
         opacity: 1;
         box-shadow: 0 0 8px rgba(93, 216, 122, 0.6);
     }

     50% {
         opacity: 0.5;
         box-shadow: 0 0 16px rgba(93, 216, 122, 0.9);
     }
 }

 .commit-item {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 6px 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.04);
 }

 .commit-item:last-child {
     border-bottom: none;
 }

 .commit-hash {
     font-family: var(--font-mono);
     font-size: 0.62rem;
     color: var(--amber-light);
     font-weight: 700;
     flex-shrink: 0;
 }

 .commit-msg {
     font-family: var(--font-mono);
     font-size: 0.62rem;
     color: rgba(255, 255, 255, 0.45);
     flex: 1;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .commit-time {
     font-family: var(--font-mono);
     font-size: 0.58rem;
     color: rgba(255, 255, 255, 0.2);
     flex-shrink: 0;
 }

 .sdlc-metrics {
     display: flex;
     align-items: center;
     gap: 0;
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.07);
     border-radius: 14px;
     padding: 18px 20px;
 }

 .sdlc-metric {
     flex: 1;
     text-align: center;
 }

 .sdlc-metric-val {
     font-family: var(--font-head);
     font-size: 1.6rem;
     font-weight: 900;
     line-height: 1;
 }

 .sdlc-metric-val.amber {
     color: var(--amber);
 }

 .sdlc-metric-val.teal {
     color: var(--teal-light);
 }

 .sdlc-metric-val.green {
     color: #5DD87A;
 }

 .sdlc-metric-label {
     font-family: var(--font-mono);
     font-size: 0.6rem;
     color: rgba(255, 255, 255, 0.3);
     margin-top: 4px;
 }

 .sdlc-metric-div {
     width: 1px;
     height: 40px;
     background: rgba(255, 255, 255, 0.07);
 }

 /* ═══════════════════════════════════════════════════
       WORDPRESS SECTION
    ═══════════════════════════════════════════════════ */
 .wp-section {
     padding: 120px 0;
     background: var(--brand-white);
     position: relative;
     overflow: hidden;
 }

 .wp-section::before {
     content: '';
     position: absolute;
     left: -200px;
     top: 50%;
     width: 500px;
     height: 500px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(232, 166, 61, 0.06), transparent 70%);
     transform: translateY(-50%);
 }

 .wp-card {
     background: var(--brand-soft);
     border: 1px solid var(--brand-line);
     border-radius: 18px;
     padding: 28px;
     height: 100%;
     position: relative;
     overflow: hidden;
     transition: transform 0.3s var(--ease-expo), box-shadow 0.3s, border-color 0.3s;
 }

 .wp-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 20px 48px rgba(13, 27, 106, 0.1);
     border-color: var(--teal-dark);
 }

 .wp-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
 }

 .wp-card.wp-a::before {
     background: linear-gradient(90deg, var(--amber), var(--amber-light));
 }

 .wp-card.wp-t::before {
     background: linear-gradient(90deg, var(--teal-dark), var(--teal-light));
 }

 .wp-card.wp-r::before {
     background: linear-gradient(90deg, var(--crimson), #D05030);
 }

 .wp-card.wp-n::before {
     background: linear-gradient(90deg, var(--navy), var(--navy-mid));
 }

 .wp-icon {
     font-size: 2rem;
     margin-bottom: 16px;
     display: block;
 }

 .wp-title {
     font-family: var(--font-head);
     font-size: 0.92rem;
     font-weight: 800;
     color: var(--navy);
     margin-bottom: 8px;
 }

 .wp-body {
     font-size: 0.8rem;
     color: var(--brand-muted);
     line-height: 1.7;
     margin-bottom: 14px;
 }

 .wp-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 5px;
 }

 .wp-tag {
     font-family: var(--font-mono);
     font-size: 0.6rem;
     font-weight: 500;
     padding: 3px 8px;
     border-radius: 4px;
     background: rgba(13, 27, 106, 0.07);
     color: var(--brand-muted);
     border: 1px solid var(--brand-line);
 }

 .wp-speed-bar {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .wpb-row {
     display: flex;
     flex-direction: column;
     gap: 4px;
 }

 .wpb-label {
     display: flex;
     justify-content: space-between;
     font-family: var(--font-mono);
     font-size: 0.65rem;
     color: var(--brand-muted);
 }

 .wpb-track {
     height: 8px;
     border-radius: 99px;
     background: var(--brand-line);
     overflow: hidden;
 }

 .wpb-fill {
     height: 100%;
     border-radius: 99px;
     width: 0;
     transition: width 1.2s var(--ease-expo);
 }

 .wpb-fill.amber {
     background: linear-gradient(90deg, var(--amber), var(--amber-light));
 }

 .wpb-fill.teal {
     background: linear-gradient(90deg, var(--teal-dark), var(--teal-light));
 }

 .wpb-fill.navy {
     background: linear-gradient(90deg, var(--navy), var(--navy-mid));
 }

 /* ═══════════════════════════════════════════════════
       FUNNEL / LANDING PAGE SECTION
    ═══════════════════════════════════════════════════ */
 .funnel-section {
     padding: 120px 0;
     background: var(--navy);
     position: relative;
     overflow: hidden;
 }

 .funnel-section::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
     background-size: 60px 60px;
 }

 /* Funnel diagram */
 .funnel-diagram {
     position: relative;
 }

 .funnel-stage {
     display: flex;
     align-items: center;
     margin-bottom: 4px;
     transition: transform 0.25s var(--ease-expo);
 }

 .funnel-stage:hover {
     transform: scale(1.02);
 }

 .funnel-bar {
     height: 52px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 20px;
     position: relative;
     overflow: hidden;
     margin: 0 auto;
 }

 .funnel-bar::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 60%);
 }

 .funnel-bar-label {
     font-family: var(--font-head);
     font-size: 0.78rem;
     font-weight: 700;
     color: #fff;
     position: relative;
     z-index: 1;
 }

 .funnel-bar-stat {
     font-family: var(--font-mono);
     font-size: 0.7rem;
     font-weight: 700;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
     z-index: 1;
 }

 .funnel-arrow {
     text-align: center;
     padding: 2px 0;
     color: rgba(255, 255, 255, 0.2);
     font-size: 0.9rem;
 }

 .funnel-card {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.09);
     border-radius: 16px;
     padding: 24px;
     height: 100%;
     transition: background 0.3s, transform 0.3s var(--ease-expo);
 }

 .funnel-card:hover {
     background: rgba(255, 255, 255, 0.09);
     transform: translateY(-6px);
 }

 .funnel-card-icon {
     font-size: 1.8rem;
     margin-bottom: 16px;
     display: block;
 }

 .funnel-card-title {
     font-family: var(--font-head);
     font-size: 0.92rem;
     font-weight: 800;
     color: #fff;
     margin-bottom: 8px;
 }

 .funnel-card-body {
     font-size: 0.8rem;
     color: rgba(255, 255, 255, 0.45);
     line-height: 1.75;
 }

 /* ═══════════════════════════════════════════════════
       CTA
    ═══════════════════════════════════════════════════ */
 .cta-section {
     background: var(--navy-deep);
     padding: 140px 0;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .cta-bg-glow {
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse at 20% 50%, rgba(232, 166, 61, 0.08), transparent 60%), radial-gradient(ellipse at 80% 50%, rgba(74, 187, 196, 0.06), transparent 60%);
 }

 .cta-headline {
     font-size: clamp(2.2rem, 4vw, 3.5rem);
     font-weight: 900;
     letter-spacing: -0.03em;
     color: #fff;
     margin-bottom: 24px;
 }

 .cta-headline em {
     font-style: normal;
     color: var(--amber);
 }

 .cta-body {
     font-size: 1rem;
     color: rgba(255, 255, 255, 0.5);
     max-width: 560px;
     margin: 0 auto 48px;
     line-height: 1.8;
 }

 .cta-trio {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 32px;
     margin-bottom: 48px;
     flex-wrap: wrap;
 }

 .cta-trio-item {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .check {
     width: 24px;
     height: 24px;
     border-radius: 50%;
     background: rgba(232, 166, 61, 0.2);
     border: 1px solid rgba(232, 166, 61, 0.4);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.7rem;
     color: var(--amber-light);
     flex-shrink: 0;
 }

 .cta-trio-item span {
     font-family: var(--font-head);
     font-size: 0.82rem;
     font-weight: 600;
     color: rgba(255, 255, 255, 0.6);
 }

 .cta-divider {
     width: 1px;
     height: 24px;
     background: rgba(255, 255, 255, 0.12);
 }

 /* ─── Footer ─── */
 .footer {
     background: var(--navy-deep);
     border-top: 1px solid rgba(255, 255, 255, 0.06);
     padding: 20px 0;
 }

 .footer-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 16px;
 }

 .footer-logo {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     text-decoration: none;
 }

 .footer-copy {
     font-size: 0.75rem;
     color: rgba(255, 255, 255, 0.50);
 }

 /* ─── Logo image sizing ─── */
 .ng-logo-img {
     width: 40px;
     height: 40px;
     object-fit: contain;
     flex-shrink: 0;
 }

 .footer-logo .ng-logo-img {
     width: 56px;
     height: 56px;
     border-radius: 6px;
 }

 /* ─── Mobile Hamburger Menu ─── */
 .ng-hamburger {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
     padding: 6px;
     border: none;
     background: transparent;
     z-index: 1100;
 }

 .ng-hamburger span {
     display: block;
     width: 24px;
     height: 2px;
     background: var(--navy);
     border-radius: 2px;
     transition: all 0.3s var(--ease-expo);
 }

 .ng-hamburger.open span:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
 }

 .ng-hamburger.open span:nth-child(2) {
     opacity: 0;
 }

 .ng-hamburger.open span:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
 }

 .ng-mobile-menu {
     display: none;
     position: fixed;
     top: 72px;
     left: 0;
     width: 100%;
     background: rgba(250, 251, 255, 0.98);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--brand-line);
     z-index: 999;
     padding: 20px 24px 28px;
     flex-direction: column;
     gap: 4px;
     box-shadow: 0 8px 32px rgba(13, 27, 106, 0.1);
 }

 .ng-mobile-menu.open {
     display: flex;
 }

 .ng-mobile-menu a {
     font-family: var(--font-head);
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--brand-mid);
     text-decoration: none;
     padding: 12px 0;
     border-bottom: 1px solid var(--brand-line);
     transition: color 0.2s;
 }

 .ng-mobile-menu a:last-child {
     border-bottom: none;
 }

 .ng-mobile-menu a.active,
 .ng-mobile-menu a:hover {
     color: var(--navy);
 }

 .ng-mobile-cta {
     margin-top: 16px;
 }

 /* ═══════════════════════════════════════════════════
       RESPONSIVE BREAKPOINTS
    ═══════════════════════════════════════════════════ */

 /* ─── Large Desktop 1400px ─── */
 @media (max-width: 1400px) {
     .ng-nav {
         padding: 0 40px;
     }

     .it-hero .container,
     .transform-section .container,
     .software-section .container,
     .mobile-section .container,
     .saas-section .container,
     .cta-section .container,
     .footer .container {
         padding: 0 40px;
     }
 }

 /* ─── Laptop 1200px ─── */
 @media (max-width: 1200px) {
     .ng-nav {
         padding: 0 32px;
     }

     .ng-nav-links {
         gap: 24px;
     }

     .hero-headline {
         font-size: clamp(2.2rem, 4vw, 3.6rem);
     }

     .it-hero .container,
     .transform-section .container,
     .software-section .container,
     .mobile-section .container,
     .saas-section .container,
     .stack-section .container,
     .sdlc-section .container,
     .wp-section .container,
     .funnel-section .container,
     .cta-section .container,
     .footer .container {
         padding: 0 32px;
     }

     .mob-scene-wrap {
         width: 320px;
     }

     .mob-phone-shell {
         width: 250px;
     }
 }

 /* ─── Tablet Landscape 992px ─── */
 @media (max-width: 992px) {

     /* Nav */
     .ng-nav {
         padding: 0 24px;
     }

     .ng-nav-links {
         display: none;
     }

     .ng-nav>.btn-primary-ng {
         display: none;
     }

     .ng-hamburger {
         display: flex;
     }

     /* Sections padding */
     .transform-section,
     .software-section,
     .mobile-section,
     .saas-section,
     .stack-section,
     .sdlc-section,
     .wp-section,
     .funnel-section {
         padding: 80px 0;
     }

     .cta-section {
         padding: 100px 0;
     }

     /* All containers */
     .it-hero .container,
     .transform-section .container,
     .software-section .container,
     .mobile-section .container,
     .saas-section .container,
     .stack-section .container,
     .sdlc-section .container,
     .wp-section .container,
     .funnel-section .container,
     .cta-section .container,
     .footer .container {
         padding: 0 24px;
     }

     /* Hero */
     .it-hero {
         min-height: auto;
         padding-top: 72px;
         padding-bottom: 60px;
     }

     .hero-code-card {
         padding: 20px 24px;
     }

     /* Transform */
     .tf-row {
         flex-direction: column;
     }

     .tf-num {
         width: 100%;
         height: 48px;
         border-radius: 0;
     }

     .tf-icon {
         width: 100%;
         height: 48px;
         border-radius: 0;
     }

     /* Phone mockup */
     .phone-mockup-wrap {
         gap: 8px;
     }

     .mob-scene-wrap {
         width: 280px;
     }

     .mob-phone-shell {
         width: 220px;
     }

     /* API grid */
     .api-feature-row {
         grid-template-columns: 1fr;
     }

     /* SaaS browser */
     .browser-dash {
         grid-template-columns: repeat(2, 1fr);
     }

     /* SDLC */
     .sdlc-right {
         margin-top: 32px;
     }

     /* Footer */
     .footer-inner {
         flex-direction: column;
         align-items: flex-start;
         gap: 12px;
     }
 }

 /* ─── Tablet Portrait 768px ─── */
 @media (max-width: 768px) {

     /* Hero */
     .it-hero {
         padding-bottom: 50px;
     }

     .hero-headline {
         font-size: clamp(2rem, 6vw, 2.8rem);
     }

     .hero-sub {
         font-size: 0.9rem;
     }

     .hero-proof-row {
         gap: 20px;
     }

     .hpr-num {
         font-size: 1.6rem;
     }

     .hero-code-card {
         margin-top: 32px;
     }

     .code-block {
         font-size: 0.72rem;
     }

     /* Buttons */
     .btn-primary-ng.large {
         padding: 16px 28px;
         font-size: 0.85rem;
     }

     .d-flex.gap-3.flex-wrap {
         gap: 12px !important;
     }

     /* Transform */
     .transform-section {
         padding: 64px 0;
     }

     .tf-row {
         flex-direction: row;
     }

     .tf-row:hover {
         transform: none;
     }

     /* Software section */
     .software-section {
         padding: 64px 0;
     }

     .sw-card {
         padding: 24px;
     }

     /* Mobile app section */
     .mobile-section {
         padding: 64px 0;
     }

     .mob-scene-wrap {
         width: 260px;
         margin: 0 auto;
     }

     .mob-phone-shell {
         width: 200px;
     }

     .mob-badge--tl,
     .mob-badge--tr,
     .mob-badge--br,
     .mob-badge--bl {
         display: none;
     }

     /* SaaS section */
     .saas-section {
         padding: 64px 0;
     }

     .browser-dash {
         grid-template-columns: 1fr;
     }

     .saas-browser {
         max-width: 100%;
     }

     /* Stack */
     .stack-section {
         padding: 64px 0;
     }

     .stack-grid {
         grid-template-columns: repeat(3, 1fr) !important;
         gap: 10px !important;
     }

     /* SDLC */
     .sdlc-section {
         padding: 64px 0;
     }

     /* WordPress */
     .wp-section {
         padding: 64px 0;
     }

     /* Funnel */
     .funnel-section {
         padding: 64px 0;
     }

     .funnel-bar {
         padding: 0 12px;
     }

     .funnel-bar-label {
         font-size: 0.7rem;
     }

     /* CTA */
     .cta-section {
         padding: 80px 0;
     }

     .cta-headline {
         font-size: clamp(1.8rem, 5vw, 2.8rem);
     }

     .cta-trio {
         flex-direction: column;
         align-items: center;
         gap: 12px;
     }

     .cta-divider {
         display: none;
     }

     /* Footer */
     .footer {
         padding: 24px 0;
     }

     .footer-inner {
         flex-direction: column;
         align-items: flex-start;
         gap: 10px;
     }

     .footer-copy {
         font-size: 0.7rem;
     }

     /* Logo */
     .logo-wordmark {
         font-size: 1rem;
     }
 }

 /* ─── Large Mobile 576px ─── */
 @media (max-width: 576px) {

     /* Nav */
     .ng-nav {
         padding: 0 16px;
         height: 64px;
     }

     .ng-logo-img {
         width: 34px;
         height: 34px;
     }

     .logo-wordmark {
         font-size: 0.95rem;
     }

     .logo-tagline {
         font-size: 0.45rem;
     }

     /* Hero */
     .it-hero {
         padding-top: 64px;
     }

     .hero-headline {
         font-size: clamp(1.7rem, 7vw, 2.4rem);
         line-height: 1.1;
     }

     .hero-sub {
         font-size: 0.85rem;
         margin-bottom: 28px;
     }

     .hero-proof-row {
         gap: 14px;
         margin-top: 28px;
         flex-wrap: wrap;
     }

     .hpr-div {
         display: none;
     }

     .hpr-num {
         font-size: 1.4rem;
     }

     .hero-code-card {
         padding: 16px;
     }

     .code-block {
         font-size: 0.68rem;
         line-height: 1.7;
     }

     /* Buttons – full width on mobile */
     .btn-primary-ng.large,
     .btn-ghost-ng {
         width: 100%;
         justify-content: center;
     }

     /* General sections */
     .transform-section,
     .software-section,
     .mobile-section,
     .saas-section,
     .stack-section,
     .sdlc-section,
     .wp-section,
     .funnel-section {
         padding: 52px 0;
     }

     /* Transform rows */
     .tf-row {
         flex-direction: column;
     }

     .tf-num {
         width: 100%;
         height: 40px;
         border-radius: 14px 14px 0 0;
         font-size: 1rem;
     }

     .tf-icon {
         width: 100%;
         height: 40px;
         border-radius: 0;
     }

     .tf-body {
         padding: 16px;
     }

     /* Software cards */
     .sw-card {
         padding: 20px;
     }

     .sw-title {
         font-size: 0.95rem;
     }

     /* Mobile app */
     .mob-scene-wrap {
         width: 240px;
     }

     .mob-phone-shell {
         width: 190px;
     }

     .mob-platform-pills {
         flex-wrap: wrap;
         justify-content: center;
         gap: 6px;
     }

     /* SaaS */
     .saas-browser .browser-body {
         padding: 12px;
     }

     .dash-kpi {
         padding: 10px 12px;
     }

     .dash-kpi-val {
         font-size: 1.2rem;
     }

     /* Stack grid */
     .stack-grid {
         grid-template-columns: repeat(2, 1fr) !important;
     }

     /* SDLC timeline */
     .sdlc-item {
         padding: 16px 0;
     }

     .sdlc-step-num {
         width: 32px;
         height: 32px;
         font-size: 0.75rem;
     }

     .sdlc-step-connector {
         left: 15px;
     }

     /* WP cards */
     .wp-card {
         padding: 20px;
     }

     /* Funnel */
     .funnel-card {
         padding: 18px;
     }

     .funnel-bar {
         height: 44px;
         padding: 0 10px;
     }

     .funnel-bar-label {
         font-size: 0.65rem;
     }

     .funnel-bar-stat {
         font-size: 0.62rem;
     }

     /* Stat strip */
     [style*="min-width:180px"] {
         min-width: 140px !important;
         padding: 20px 16px !important;
     }

     /* CTA */
     .cta-section {
         padding: 64px 0;
     }

     .cta-headline {
         font-size: clamp(1.6rem, 6vw, 2.2rem);
     }

     .cta-body {
         font-size: 0.88rem;
     }

     .cta-section .d-flex {
         flex-direction: column;
     }

     .btn-ghost-ng.on-dark {
         width: 100%;
         justify-content: center;
     }

     /* Footer */
     .footer-inner {
         gap: 8px;
     }

     .logo-wordmark {
         font-size: 0.9rem;
     }

     /* Headings in sections */
     h2[style*="font-size:clamp"] {
         font-size: clamp(1.7rem, 5.5vw, 2.4rem) !important;
     }
 }

 /* ─── Small Mobile 400px ─── */
 @media (max-width: 400px) {
     .ng-nav {
         padding: 0 12px;
     }

     .ng-logo {
         gap: 6px;
     }

     .ng-logo-img {
         width: 30px;
         height: 30px;
     }

     .logo-wordmark {
         font-size: 0.85rem;
     }



     /* Hero */
     .hero-headline {
         font-size: clamp(1.5rem, 8vw, 2rem);
     }

     .hero-sub {
         font-size: 0.8rem;
     }

     .hero-proof-row {
         flex-direction: column;
         gap: 8px;
     }

     .hpr-item {
         flex-direction: row;
         align-items: center;
         gap: 10px;
     }

     .hero-code-card {
         display: none;
     }

     /* Buttons */
     .btn-primary-ng,
     .btn-ghost-ng {
         padding: 14px 20px;
         font-size: 0.8rem;
         width: 100%;
         justify-content: center;
     }

     /* Sections */
     .transform-section,
     .software-section,
     .mobile-section,
     .saas-section,
     .stack-section,
     .sdlc-section,
     .wp-section,
     .funnel-section {
         padding: 40px 0;
     }

     /* Stack grid 1 col at smallest */
     .stack-grid {
         grid-template-columns: repeat(2, 1fr) !important;
         gap: 6px !important;
     }

     .stack-pill {
         padding: 8px 10px !important;
     }

     /* Software */
     .sw-card {
         padding: 16px;
         border-radius: 12px;
     }

     .sw-icon {
         font-size: 1.8rem;
     }

     /* Mobile phone */
     .mob-scene-wrap {
         width: 210px;
     }

     .mob-phone-shell {
         width: 170px;
     }

     .mob-phone-screen {
         border-radius: 24px;
     }

     /* Funnel */
     .funnel-bar {
         height: 38px;
     }

     .funnel-bar-label {
         font-size: 0.6rem;
     }

     .funnel-bar-stat {
         display: none;
     }

     /* CTA */
     .cta-section {
         padding: 48px 0;
     }

     .cta-headline {
         font-size: 1.5rem;
     }

     .cta-trio-item span {
         font-size: 0.75rem;
     }

     /* Footer */
     .footer-logo .ng-logo-img {
         width: 28px;
         height: 28px;
     }

     .footer-copy {
         font-size: 0.65rem;
     }

     /* Section headings */
     h2 {
         letter-spacing: -0.02em !important;
     }
 }