@font-face {
     font-family: 'Product Sans';
     font-style: normal;
     font-weight: 100;
     font-display: swap;
     src: url('fonts/ProductSans-Thin.woff2') format('woff2');
   }
   @font-face {
     font-family: 'Product Sans';
     font-style: normal;
     font-weight: 300;
     font-display: swap;
     src: url('fonts/ProductSans-Light.woff2') format('woff2');
   }
   @font-face {
     font-family: 'Product Sans';
     font-style: italic;
     font-weight: 300;
     font-display: swap;
     src: url('fonts/ProductSans-LightItalic.woff2') format('woff2');
   }
   @font-face {
     font-family: 'Product Sans';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url('fonts/ProductSans-Regular.woff2') format('woff2');
   }
   @font-face {
     font-family: 'Product Sans';
     font-style: normal;
     font-weight: 500;
     font-display: swap;
     src: url('fonts/ProductSans-Medium.woff2') format('woff2');
   }
   @font-face {
     font-family: 'Product Sans';
     font-style: italic;
     font-weight: 500;
     font-display: swap;
     src: url('fonts/ProductSans-MediumItalic.woff2') format('woff2');
   }
   @font-face {
     font-family: 'Product Sans';
     font-style: normal;
     font-weight: 700;
     font-display: swap;
     src: url('fonts/ProductSans-Bold.woff2') format('woff2');
   }
   @font-face {
     font-family: 'Product Sans';
     font-style: normal;
     font-weight: 900;
     font-display: swap;
     src: url('fonts/ProductSans-Black.woff2') format('woff2');
   }
 


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

   /* ═══ custom property so border glow can animate smoothly ═══ */
   @property --angle {
     syntax: '<angle>';
     initial-value: 0deg;
     inherits: false;
   }
   @property --start {
     syntax: '<number>';
     inherits: true;
     initial-value: 0;
   }

   :root {
     --navy: #020220;
     --navy-2: #05052e;
     --navy-3: #0a0a3a;
     --blue: #1560f0;
     --blue-2: #3b5bdb;
     --blue-l: #6b8fff;
     --blue-d: #0a3eb8;
     --ink-60: rgba(255, 255, 255, 0.62);
     --ink-80: rgba(255, 255, 255, 0.84);
     --border: rgba(255, 255, 255, 0.1);
     --border-h: rgba(255, 255, 255, 0.22);
     --font:
       'Product Sans', 'Google Sans', system-ui, -apple-system, 'Segoe UI',
       Roboto, sans-serif;
   }
   html {
     scroll-behavior: smooth;
   }
   html,
   body {
     background: var(--navy);
     color: #fff;
     font-family: var(--font);
     -webkit-font-smoothing: antialiased;
   }
   body {
     overflow-x: hidden;
   }

   /* ═══════════════ NAV ═══════════════ */
   nav.topnav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 500;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 18px 48px;
     background: rgba(2, 2, 32, 0.5);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   }
   .nav-logo {
     display: flex;
     align-items: center;
     line-height: 0;
     text-decoration: none;
     cursor: pointer;
   }
   .nav-logo svg {
     display: block;
     height: 16px;
     width: auto;
   }
   .nav-center {
     display: flex;
     align-items: center;
     gap: 4px;
   }

   /* ── AI pill ── */
   /* ── AI pill: glossy gradient, 3-star composite that rises from bottom to top ── */
   .ai-pill {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     position: relative;
     background:
       radial-gradient(
         ellipse 90% 120% at 50% 30%,
         rgba(200, 225, 255, 0.55) 0%,
         transparent 55%
       ),
       linear-gradient(180deg, #3d7af5 0%, #1560f0 50%, #0d4dd0 100%);
     color: #fff;
     font-size: 18px;
     font-weight: 400;
     font-style: italic;
     letter-spacing: 0.02em;
     padding: 0px 18px;
     border-radius: 24px;
     margin-right: 8px;
     border: none;
     cursor: pointer;
     font-family: var(--font);
     overflow: hidden;
     transition:
       transform 0.25s,
       box-shadow 0.25s;
   }
   .ai-pill:hover {
     transform: translateY(-1px);
     box-shadow:
       0 10px 28px rgba(21, 96, 240, 0.65),
       inset 0 1px 0 rgba(255, 255, 255, 0.45);
   }
   .ai-pill-icon-box {
     position: relative;
     width: 30px;
     height: 30px;
     flex-shrink: 0;
     overflow: hidden; /* hard-clips the rising SVG to the box bounds */
   }
   /* Two stacked SVG instances offset by half the cycle — one is always rising while
the other resets, producing a continuous bottom-to-top flow with no gap */
   .ai-stars-svg {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
     animation: aiSvgRise 2.6s linear infinite;
   }
   .ai-stars-svg.s2 {
     animation-delay: 1.3s;
   }
   @keyframes aiSvgRise {
     0% {
       transform: translateY(120%);
       opacity: 0;
     }
     15% {
       transform: translateY(80%);
       opacity: 1;
     }
     50% {
       transform: translateY(0);
       opacity: 1;
     }
     85% {
       transform: translateY(-80%);
       opacity: 1;
     }
     100% {
       transform: translateY(-120%);
       opacity: 0;
     }
   }
   /* Stars also twinkle independently within the rising SVG */
   .ai-star {
     transform-origin: center;
     transform-box: fill-box;
     animation: aiTwinkle 1.5s ease-in-out infinite;
   }
   .ai-star-mid {
     animation-delay: 0s;
   }
   .ai-star-left {
     animation-delay: 0.55s;
   }
   .ai-star-right {
     animation-delay: 1.1s;
   }
   @keyframes aiTwinkle {
     0%,
     100% {
       transform: scale(0.92);
       opacity: 0.85;
     }
     50% {
       transform: scale(1.1);
       opacity: 1;
     }
   }

   .nav-link {
     color: #fff;
     font-size: 14px;
     font-weight: 400;
     padding: 8px 14px;
     text-decoration: none;
     transition: color 0.2s;
   }
   .nav-link:hover {
     color: #fff;
   }
   .nav-right {
     display: flex;
     align-items: center;
     gap: 10px;
   }

   /* ── Contact Us: navy gradient (#16255c base) with refined edge animation ── */
   .nav-contact {
     position: relative;
     isolation: isolate;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: rgba(255, 255, 255, 0.95);
     font-size: 14px;
     font-weight: 500;
     letter-spacing: 0.005em;
     padding: 7.5px 18px;
     border-radius: 22px;
     text-decoration: none;
     font-family: var(--font);
     cursor: pointer;
     /* Gradient around #16255c — radial highlight + diagonal sweep for depth */
     background:
       radial-gradient(
         ellipse 100% 140% at 30% 30%,
         rgba(50, 90, 180, 0.4) 0%,
         transparent 60%
       ),
       linear-gradient(135deg, #1d2f6e 0%, #16255c 50%, #0f1b48 100%);
     border: 1px solid rgba(120, 160, 255, 0.18);
     box-shadow:
       0 4px 16px rgba(0, 0, 0, 0.4),
       inset 0 1px 0 rgba(255, 255, 255, 0.1);
     transition:
       transform 0.25s,
       box-shadow 0.25s,
       color 0.25s;
   }
   .nav-contact:hover {
     color: #fff;
     transform: translateY(-1px);
     box-shadow:
       0 6px 22px rgba(22, 37, 92, 0.7),
       inset 0 1px 0 rgba(255, 255, 255, 0.18);
   }
   /* Inner edge ring — slow conic with bright sweep */
   .nav-contact::before {
     content: '';
     position: absolute;
     inset: -1px;
     z-index: -1;
     border-radius: inherit;
     padding: 1px;
     background: conic-gradient(
       from var(--angle),
       rgba(120, 160, 255, 0.1) 0deg,
       rgba(140, 180, 255, 0.5) 80deg,
       rgba(220, 235, 255, 0.95) 110deg,
       rgba(140, 180, 255, 0.5) 140deg,
       rgba(120, 160, 255, 0.1) 220deg,
       rgba(120, 160, 255, 0.1) 360deg
     );
     animation: rotate-glow 5.5s linear infinite;
     -webkit-mask:
       linear-gradient(#fff 0 0) content-box,
       linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     filter: blur(0.4px);
   }
   .nav-contact:hover::before {
     animation-duration: 2.5s;
   }
   /* Outer halo — softer pulse around the button */
   .nav-contact::after {
     content: '';
     position: absolute;
     inset: -3px;
     z-index: -2;
     border-radius: 24px;
     background: conic-gradient(
       from var(--angle),
       transparent 0deg,
       rgba(60, 100, 200, 0.25) 100deg,
       rgba(180, 210, 255, 0.4) 120deg,
       rgba(60, 100, 200, 0.25) 140deg,
       transparent 240deg,
       transparent 360deg
     );
     animation: rotate-glow 5.5s linear infinite;
     filter: blur(6px);
     opacity: 0.65;
   }
   @keyframes rotate-glow {
     to {
       --angle: 360deg;
     }
   }

   @media (max-width: 980px) {
     nav.topnav {
       padding: 14px 20px;
     }
     .nav-center {
       display: none;
     }
     .nav-contact {
       padding: 6px 14px;
       font-size: 12.5px;
     }
   }

   /* ═══════════════ SHARED ═══════════════ */
   .section-eyebrow {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.28em;
     text-transform: uppercase;
     color: var(--blue-l);
     margin-bottom: 18px;
   }
   .section-h {
     font-size: clamp(30px, 3.6vw, 48px);
     font-weight: 700;
     line-height: 1.12;
     letter-spacing: -0.022em;
     margin-bottom: 14px;
   }
   /* Pillars heading — image 3 style: light weight (400), 2 lines, larger */
   .pillars-h {
     font-size: clamp(28px, 3.2vw, 40px);
     font-weight: 400;
     line-height: 1.3;
     letter-spacing: -0.012em;
     color: #fff;
     margin-bottom: 24px;
     max-width: 900px;
   }
   .section-sub {
     font-size: 16px;
     line-height: 1.7;
     color: var(--ink-60);
     max-width: 620px;
     margin-bottom: 48px;
   }

   /* ═══════════════ CANVAS ═══════════════ */
   #heroCanvas,
   #servicesCanvas {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     display: block;
     z-index: 1;
     opacity: 0;
     transition: opacity 0.6s ease;
   }
   #heroCanvas.on,
   #servicesCanvas.on {
     opacity: 1;
   }

   /* ═══════════════ HERO ═══════════════ */
   .hero {
     position: relative;
     /* Lock to viewport: laptop screens always show the full hero without scroll */
     height: 100vh;
     height: 100dvh; /* dynamic viewport — accounts for mobile browser chrome */
     min-height: 580px; /* don't crush below an absolute minimum */
     width: 100%;
     display: flex;
     align-items: center;
     /* Padding scales with viewport so it stays proportional on short screens */
     padding: clamp(80px, 11vh, 110px) 0 clamp(28px, 5vh, 60px);
     overflow: hidden;
     background:
       radial-gradient(
         ellipse 70% 50% at 75% 40%,
         rgba(59, 91, 219, 0.12) 0%,
         transparent 70%
       ),
       radial-gradient(
         ellipse 60% 40% at 15% 70%,
         rgba(107, 143, 255, 0.06) 0%,
         transparent 65%
       ),
       var(--navy);
   }
   .hero::before {
     content: '';
     position: absolute;
     inset: 0;
     z-index: 0;
     background-image:
       linear-gradient(rgba(107, 143, 255, 0.035) 1px, transparent 1px),
       linear-gradient(
         90deg,
         rgba(107, 143, 255, 0.035) 1px,
         transparent 1px
       );
     background-size: 56px 56px;
     mask-image: radial-gradient(
       ellipse 80% 70% at 50% 50%,
       #000 30%,
       transparent 85%
     );
     -webkit-mask-image: radial-gradient(
       ellipse 80% 70% at 50% 50%,
       #000 30%,
       transparent 85%
     );
   }
   .hero-inner {
     position: relative;
     z-index: 10;
     max-width: 1280px;
     width: 100%;
     margin: 0 auto;
     padding: 0 56px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 48px;
     align-items: center;
   }
   .hero-copy {
     opacity: 0;
     transform: translateY(28px);
     animation: fadeUp 1s 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
   }
   .hero-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.24em;
     text-transform: uppercase;
     color: var(--blue-l);
     /* margin scales with viewport height — tighter on short screens */
     margin-bottom: clamp(14px, 3vh, 28px);
     padding: 7px 14px;
     border: 1px solid rgba(107, 143, 255, 0.32);
     background: rgba(107, 143, 255, 0.06);
     border-radius: 22px;
   }
   .hero-eyebrow-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--blue-l);
     box-shadow: 0 0 10px var(--blue-l);
     animation: pulse 2s infinite;
   }
   @keyframes pulse {
     0%,
     100% {
       opacity: 1;
       transform: scale(1);
     }
     50% {
       opacity: 0.55;
       transform: scale(0.82);
     }
   }
   .hero h1 {
     /* Min 36px, scales with both vw and vh, capped at 78px.
        On a 1366×768 laptop this lands around 56-60px; on a 1080p desktop it's ~68px. */
     font-size: clamp(36px, min(5.6vw, 8.5vh), 78px);
     font-weight: 700;
     line-height: 1.05;
     letter-spacing: -0.032em;
     margin-bottom: clamp(14px, 3vh, 28px);
   }
   .hero h1 em {
     font-style: normal;
     font-weight: 400;
     color: rgba(255, 255, 255, 0.82);
   }
   .hero h1 .accent {
     background: linear-gradient(90deg, #6b8fff 0%, #a8c2ff 100%);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
   }
   .hero p.sub {
     font-size: clamp(14px, 1.9vh, 17px);
     line-height: 1.65;
     color: rgba(255, 255, 255, 0.82);
     max-width: 500px;
     margin-bottom: clamp(20px, 4vh, 38px);
     font-weight: 400;
   }
   .hero-ctas {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
   }
   .btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-family: var(--font);
     font-size: 14px;
     font-weight: 600;
     letter-spacing: 0.01em;
     padding: clamp(11px, 1.6vh, 14px) 26px;
     border-radius: 8px;
     cursor: pointer;
     text-decoration: none;
     transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
     border: 1px solid transparent;
     /* Reset for <button> elements that share this class */
     background: none;
     font: inherit;
     font-family: var(--font);
     font-size: 14px;
     font-weight: 600;
     line-height: 1;
     color: inherit;
   }
   .btn-primary {
     background: var(--blue);
     color: #fff;
   }
   .btn-primary:hover {
     background: var(--blue-l);
     transform: translateY(-2px);
     box-shadow: 0 10px 28px rgba(21, 96, 240, 0.4);
   }
   .btn-ghost {
     background: transparent;
     color: rgba(255, 255, 255, 0.9);
     border-color: rgba(255, 255, 255, 0.2);
   }
   .btn-ghost:hover {
     border-color: rgba(255, 255, 255, 0.45);
     background: rgba(255, 255, 255, 0.04);
   }
   .btn .arrow {
     transition: transform 0.28s;
   }
   .btn:hover .arrow {
     transform: translateX(3px);
   }
   .hero-canvas-wrap {
     position: relative;
     /* Scale to fit viewport — never exceeds available hero height */
     height: clamp(380px, 75vh, 680px);
   }
   .hero-scroll-hint {
     position: absolute;
     bottom: clamp(16px, 3vh, 32px);
     left: 56px;
     z-index: 10;
     display: flex;
     align-items: center;
     gap: 14px;
     font-size: 10.5px;
     font-weight: 600;
     letter-spacing: 0.22em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.48);
     opacity: 0;
     animation: fadeUp 0.7s 1.6s forwards;
   }
   .scroll-line {
     width: 44px;
     height: 1px;
     background: rgba(255, 255, 255, 0.25);
     position: relative;
     overflow: hidden;
   }
   .scroll-line::after {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.75);
     animation: scanLine 2.4s infinite;
   }
   @keyframes scanLine {
     0% {
       left: -100%;
     }
     100% {
       left: 100%;
     }
   }
   @keyframes fadeUp {
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }

   /* ═══════════════ CAPABILITY PILLARS ═══════════════ */
   .pillars {
     position: relative;
     padding: 80px 0;
     background:
       radial-gradient(
         ellipse 50% 40% at 20% 25%,
         rgba(40, 80, 200, 0.18) 0%,
         transparent 60%
       ),
       radial-gradient(
         ellipse 50% 40% at 80% 75%,
         rgba(40, 80, 200, 0.12) 0%,
         transparent 60%
       ),
       linear-gradient(180deg, #0a1238 0%, #0d1742 50%, #0a1238 100%);
   }
   .pillars-inner {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 56px;
   }
   .pillars-grid {
     display: grid;
     grid-template-columns: 360px 1fr;
     gap: 18px;
   }
   .pillar-tabs {
     background: rgba(8, 8, 50, 0.55);
     border: 1px solid var(--border);
     border-radius: 18px;
     padding: 10px;
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
   .pillar-tab {
     display: block;
     text-align: left;
     background: transparent;
     border: none;
     padding: 10px 22px;
     border-radius: 10px;
     cursor: pointer;
     color: #fff;
     font-family: var(--font);
     transition: background 0.3s;
   }
   .pillar-tab:last-child {
     border-bottom: none;
   }
   /* Match image 3: tab title is medium-bold ~17px, desc is light ~14px on 2 lines */
   .pillar-tab-title {
     font-size: 18px;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.5);
     margin-bottom: 4px;
     line-height: 1.25;
     transition: color 0.3s;
   }
   .pillar-tab-desc {
     font-size: 15px;
     font-weight: 400;
     line-height: 1.2;
     color: rgba(255, 255, 255, 0.4);
     transition: color 0.3s;
   }
   .pillar-tab.active .pillar-tab-title {
     color: #fff;
   }
   .pillar-tab.active .pillar-tab-desc {
     color: rgba(255, 255, 255, 0.9);
   }
   .pillar-tab:hover:not(.active) {
     background: rgba(255, 255, 255, 0.04);
   }
   .pillar-divider {
     height: 1px;
     background: rgba(255, 255, 255, 0.3);
   }

   .pillar-card {
     background: linear-gradient(
       135deg,
       #1a6df5 0%,
       #0d4dd0 60%,
       #0a3eb8 100%
     );
     border-radius: 18px;
     padding: 44px 48px;
     position: relative;
     overflow: hidden;
   }
   .pillar-card::before {
     content: '';
     position: absolute;
     inset: 0;
     background:
       radial-gradient(
         ellipse at 85% 15%,
         rgba(255, 255, 255, 0.16) 0%,
         transparent 45%
       ),
       radial-gradient(
         ellipse at 15% 90%,
         rgba(255, 255, 255, 0.08) 0%,
         transparent 50%
       );
     pointer-events: none;
   }
   .pillar-card-body {
     position: relative;
     z-index: 2;
   }
   /* Match image 3: card title medium weight ~28px, body regular ~14.5px */
   .pillar-card-title {
     font-size: 36px;
     font-weight: 500;
     letter-spacing: -0.015em;
     line-height: 1.15;
     margin-bottom: 14px;
     color: #fff;
     max-width: 620px;
   }
   .pillar-card-desc {
     font-size: 18px;
     font-weight: 300;
     line-height: 1.55;
     color: #fff;
     max-width: 580px;
     margin-bottom: 36px;
   }
   .pillar-card-label {
     font-size: 22px;
     font-weight: 400;
     letter-spacing: 0;
     color: #fff;
     margin-bottom: 16px;
   }
   .pillar-tiles {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
     gap: 10px;
   }
   .pillar-tile {
     background: #fff;
     border-radius: 12px;
     padding: 20px 12px 18px;
     text-align: center;
     color: var(--blue-d);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
     transition: transform 0.25s;
   }
   .pillar-tile:hover {
     transform: translateY(-3px);
   }
   .pillar-tile-icon {
     width: 32px;
     height: 32px;
     color: var(--blue);
   }
   .pillar-tile-icon svg {
     width: 100%;
     height: 100%;
   }
   .pillar-tile-name {
     font-size: 14px;
     font-weight: 500;
     line-height: 1.2;
     color: #141414;
   }
   @media (max-width: 900px) {
     .pillars-grid {
       grid-template-columns: 1fr;
     }
     .pillar-card {
       padding: 32px 26px;
     }
   }

   /* ═══════════════ SERVICES — STICKY SCROLL (720vh = 120vh per slide) ═══════════════
More breathing room per slide gives a smoother, less jerky scroll experience. */
   .services-wrap {
     position: relative;
     height: 720vh;
     background: var(--navy-2);
   }
   .services {
     position: sticky;
     top: 0;
     height: 100vh;
     width: 100%;
     overflow: hidden;
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
   }
   .services::before {
     content: '';
     position: absolute;
     inset: 0;
     z-index: 0;
     background: radial-gradient(
       ellipse 60% 50% at var(--gx, 35%) 50%,
       rgba(59, 91, 219, 0.1) 0%,
       transparent 65%
     );
     transition: background-position 0.6s;
     pointer-events: none;
   }
   .services-label {
     position: absolute;
     top: 92px;
     left: 56px;
     z-index: 12;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.28em;
     text-transform: uppercase;
     color: var(--blue-l);
   }
   .services-counter {
     position: absolute;
     top: 92px;
     right: 56px;
     z-index: 12;
     font-size: 12px;
     font-weight: 500;
     letter-spacing: 0.08em;
     color: rgba(255, 255, 255, 0.55);
     font-variant-numeric: tabular-nums;
   }
   .services-counter strong {
     color: #fff;
     font-weight: 700;
   }
   .services-progress {
     position: absolute;
     top: 138px;
     right: 56px;
     z-index: 12;
     width: 120px;
     height: 2px;
     background: rgba(255, 255, 255, 0.12);
     border-radius: 2px;
     overflow: hidden;
   }
   .services-progress-bar {
     height: 100%;
     background: linear-gradient(90deg, var(--blue-l), #fff);
     width: 0;
     transition: width 0.2s ease-out;
     border-radius: 2px;
   }
   .services-stage {
     position: relative;
     width: 100%;
     height: 100%;
     z-index: 10;
   }
   .service-slide {
     position: absolute;
     inset: 0;
     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
     opacity: 0;
     pointer-events: none;
     transform: translateY(14px);
     /* Inactive: fade out fast, no delay */
     transition:
       opacity 0.25s ease-in,
       transform 0.35s ease-in;
   }
   .service-slide.active {
     opacity: 1;
     pointer-events: auto;
     transform: translateY(0);
     /* Active: wait until previous slide is mostly gone, then fade in */
     transition:
       opacity 0.35s 0.2s ease-out,
       transform 0.55s 0.2s cubic-bezier(0.22, 1, 0.36, 1);
   }
   .service-slide.flip {
     direction: rtl;
   }
   .service-slide.flip .service-text {
     direction: ltr;
     padding: 0 56px 0 72px;
   }
   .service-particle-side {
     height: 100%;
     position: relative;
   }
   .service-text {
     padding: 0 72px 0 56px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     max-width: 620px;
   }
   .svc-num {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.28em;
     text-transform: uppercase;
     color: var(--blue-l);
     margin-bottom: 18px;
   }
   .svc-h2 {
     font-size: clamp(34px, 3.8vw, 56px);
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -0.025em;
     margin-bottom: 24px;
   }
   .svc-divider {
     width: 36px;
     height: 1px;
     background: rgba(255, 255, 255, 0.25);
     margin-bottom: 24px;
   }
   .svc-desc {
     font-size: 16px;
     font-weight: 400;
     line-height: 1.72;
     color: rgba(255, 255, 255, 0.88);
     margin-bottom: 28px;
     max-width: 460px;
   }
   .svc-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 12px;
   }
   .svc-list li {
     font-size: 14px;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.9);
     display: flex;
     align-items: center;
     gap: 14px;
   }
   .svc-list li::before {
     content: '';
     flex-shrink: 0;
     width: 22px;
     height: 1px;
     background: var(--blue-l);
     opacity: 0.7;
   }
   /* ── Right-side vertical pagination with labels ── */
   .services-pagination {
     position: absolute;
     top: 50%;
     right: 48px;
     transform: translateY(-50%);
     z-index: 12;
     display: flex;
     flex-direction: column;
     gap: 24px;
     align-items: flex-end;
   }
   .sp-item {
     display: flex;
     align-items: center;
     gap: 16px;
     background: transparent;
     border: none;
     cursor: pointer;
     padding: 0;
     font-family: var(--font);
     flex-direction: row;
     justify-content: flex-end;
   }
   .sp-label {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.22em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0);
     transition:
       color 0.4s ease,
       opacity 0.4s ease,
       transform 0.4s ease;
     text-align: right;
     transform: translateX(8px);
     white-space: nowrap;
   }
   .sp-dash {
     display: block;
     width: 18px;
     height: 1.5px;
     background: rgba(255, 255, 255, 0.2);
     transition:
       width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
       background 0.35s,
       box-shadow 0.35s;
     flex-shrink: 0;
   }
   .sp-item:hover .sp-label {
     color: rgba(255, 255, 255, 0.55);
     transform: translateX(0);
   }
   .sp-item:hover .sp-dash {
     background: rgba(255, 255, 255, 0.45);
   }
   .sp-item.adjacent .sp-label {
     color: rgba(255, 255, 255, 0.45);
     transform: translateX(0);
   }
   .sp-item.active .sp-label {
     color: #fff;
     transform: translateX(0);
   }
   .sp-item.active .sp-dash {
     width: 42px;
     background: var(--blue-l);
     box-shadow: 0 0 12px rgba(107, 143, 255, 0.6);
   }

   .services-hint {
     position: absolute;
     bottom: 30px;
     right: 56px;
     z-index: 12;
     font-size: 10.5px;
     font-weight: 600;
     letter-spacing: 0.22em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.42);
     display: flex;
     align-items: center;
     gap: 10px;
   }
   .services-hint svg {
     width: 14px;
     height: 14px;
   }
   @media (max-width: 900px) {
     .services-wrap {
       height: auto;
     }
     .services {
       position: relative;
       height: auto;
     }
     .services-stage {
       height: auto;
     }
     .service-slide {
       position: relative;
       grid-template-columns: 1fr;
       opacity: 1 !important;
       transform: none !important;
       pointer-events: auto;
       padding: 80px 0;
     }
     .service-particle-side {
       display: none;
     }
     .service-text {
       padding: 0 28px !important;
     }
     .services-label,
     .services-counter,
     .services-progress,
     .services-pagination,
     .services-hint {
       display: none;
     }
   }

   /* ═══════════════ WHY US ═══════════════ */
   .whyus {
     position: relative;
     padding: 80px 0;
     background:
       radial-gradient(
         ellipse 50% 40% at 20% 25%,
         rgba(40, 80, 200, 0.18) 0%,
         transparent 60%
       ),
       radial-gradient(
         ellipse 50% 40% at 80% 75%,
         rgba(40, 80, 200, 0.12) 0%,
         transparent 60%
       ),
       linear-gradient(180deg, #0a1238 0%, #0d1742 50%, #0a1238 100%);
     overflow: hidden;
   }
   .whyus::before {
     content: '';
     position: absolute;
     inset: 0;
     background:
       radial-gradient(
         circle at 15% 30%,
         rgba(120, 160, 255, 0.06) 0%,
         transparent 50%
       ),
       radial-gradient(
         circle at 85% 70%,
         rgba(120, 160, 255, 0.04) 0%,
         transparent 55%
       );
     pointer-events: none;
   }
   .whyus-inner {
     position: relative;
     z-index: 2;
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 56px;
   }
   .whyus-h {
     font-size: clamp(28px, 3.2vw, 40px);
     font-weight: 400;
     line-height: 1.25;
     letter-spacing: -0.012em;
     margin-bottom: 14px;
     color: #fff;
     max-width: 960px;
   }
   .whyus-sub {
     font-size: 15px;
     line-height: 1.7;
     color: rgba(255, 255, 255, 0.62);
     max-width: 720px;
     margin-bottom: 56px;
     font-weight: 400;
   }
   .whyus-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 18px;
   }
   .whyus-card {
     --start: 0;
     --active: 0;
     --spread: 80;
     --blur: 20;
     position: relative;
     isolation: isolate;
     background: rgba(15, 25, 65, 0.55);
     border: 1px solid rgba(107, 143, 255, 0.18);
     border-radius: 22px;
     padding: 30px 26px;
     min-height: 240px;
     transition:
       background 0.3s,
       transform 0.3s,
       border-color 0.3s;
   }
   /* Wide border arc — reveals blue background through a rotating mask window */
   .whyus-card::before {
     position: absolute;
     inset: 0;
     border: 1.5px solid transparent;
     content: '';
     border-radius: inherit;
     pointer-events: none;
     background: rgba(107, 143, 255, 0.85);
     background-attachment: fixed;
     mask:
       linear-gradient(#0000, #0000),
       conic-gradient(
         from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg),
         hsl(0 0% 100% / 0.15) 0deg,
         white,
         hsl(0 0% 100% / 0.15) calc(var(--spread) * 2.5deg)
       );
     mask-clip: padding-box, border-box;
     mask-composite: intersect;
     opacity: var(--active);
     transition: opacity 1s;
   }
   /* Tight bright arc layered on top for the hot spot */
   .whyus-card::after {
     content: '';
     pointer-events: none;
     position: absolute;
     inset: 0;
     border: 1.5px solid transparent;
     border-radius: inherit;
     background: rgba(180, 210, 255, 1);
     background-attachment: fixed;
     mask:
       linear-gradient(#0000, #0000),
       conic-gradient(
         from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg),
         #0000 0deg,
         #fff,
         #0000 calc(var(--spread) * 0.5deg)
       );
     mask-clip: padding-box, border-box;
     mask-composite: intersect;
     filter: brightness(1.5);
     opacity: var(--active, 0);
     transition: opacity 1s;
   }
   /* Blurred ambient halo — child div carries the blur so mask stays sharp */
   .card-glows {
     pointer-events: none;
     position: absolute;
     inset: 0;
     border-radius: inherit;
     filter: blur(calc(var(--blur) * 1px));
   }
   .card-glows::before,
   .card-glows::after {
     content: '';
     background: conic-gradient(
       from 180deg at 50% 70%,
       rgba(107, 143, 255, 0)   0deg,
       rgba(107, 143, 255, 0.9) 72deg,
       rgba(180, 210, 255, 1)   144deg,
       rgba(61,  100, 220, 0.9) 216deg,
       rgba(107, 143, 255, 0)   288deg,
       rgba(107, 143, 255, 0)   1turn
     );
     background-attachment: fixed;
     position: absolute;
     inset: -5px;
     border: 10px solid transparent;
     border-radius: inherit;
     mask:
       linear-gradient(#0000, #0000),
       conic-gradient(
         from calc((var(--start) - (var(--spread) * 0.5)) * 1deg),
         #000 0deg,
         #fff,
         #0000 calc(var(--spread) * 1deg)
       );
     mask-composite: intersect;
     mask-clip: padding-box, border-box;
     opacity: var(--active);
     transition: opacity 1s;
   }
   .whyus-card:hover {
     background: rgba(20, 32, 80, 0.7);
     transform: translateY(-4px);
     border-color: rgba(107, 143, 255, 0.32);
   }
   .whyus-icon {
     width: 44px;
     height: 44px;
     border-radius: 10px;
     background: linear-gradient(135deg, #3d7af5, #1560f0);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 22px;
     box-shadow: 0 4px 12px rgba(21, 96, 240, 0.35);
   }
   .whyus-icon svg {
     width: 22px;
     height: 22px;
   }
   .whyus-card h3 {
     font-size: 18px;
     font-weight: 600;
     letter-spacing: -0.012em;
     line-height: 1.25;
     margin-bottom: 14px;
     color: #fff;
   }
   .whyus-card p {
     font-size: 13.5px;
     line-height: 1.65;
     color: rgba(255, 255, 255, 0.62);
     font-weight: 400;
   }
   @media (max-width: 1000px) {
     .whyus-grid {
       grid-template-columns: repeat(2, 1fr);
     }
   }
   @media (max-width: 560px) {
     .whyus-grid {
       grid-template-columns: 1fr;
     }
   }

   /* ═══════════════ FAQ — 2-column independent stacks ═══════════════ */
   .faq {
     position: relative;
     padding: 80px 0;
     background: var(--navy);
     border-top: 1px solid var(--border);
   }
   .faq-inner {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 56px;
   }
   .faq-heading {
     font-size: clamp(30px, 3.2vw, 42px);
     font-weight: 400;
     line-height: 1.2;
     letter-spacing: -0.012em;
     margin-bottom: 48px;
     color: #fff;
     max-width: 900px;
   }
   .faq-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
     align-items: start;
   }
   .faq-col {
     display: flex;
     flex-direction: column;
     gap: 16px;
   }

   .faq-card {
     position: relative;
     isolation: isolate;
     background: rgba(9, 12, 38, 0.7);
     border: 1px solid rgba(255, 255, 255, 0.07);
     border-radius: 14px;
     padding: 0;
     cursor: pointer;
     min-height: 90px;
     transition:
       border-color 0.35s,
       box-shadow 0.45s,
       background 0.35s;
     overflow: hidden;
   }
   .faq-card:hover {
     border-color: rgba(255, 255, 255, 0.14);
     background: rgba(14, 18, 55, 0.75);
   }
   .faq-card.open {
     border-color: rgba(60, 100, 200, 0.4);
     box-shadow: 0 18px 50px rgba(8, 30, 90, 0.4);
     background: transparent;
   }
   /* Smooth-blending dark gradient.
- Top ~28% fades from fully transparent (so card top blends seamlessly into section bg)
- Then the blue gradient fills in across multiple stops, getting DARKER toward the bottom
- Reveal animates via opacity + a subtle translateY for a slow, smooth blend-in feel */
   .faq-card::before {
     content: '';
     position: absolute;
     inset: 0;
     z-index: -1;
     border-radius: inherit;
     background: linear-gradient(
       180deg,
       rgba(6, 18, 52, 0) 0%,
       rgba(6, 18, 52, 0) 22%,
       rgba(8, 30, 95, 0.45) 32%,
       rgba(10, 45, 140, 0.85) 44%,
       #0c3aa6 58%,
       #082b80 76%,
       #051c5a 92%,
       #03113c 100%
     );
     opacity: 0;
     transform: translateY(-12px);
     transition:
       opacity 0.85s ease,
       transform 1s cubic-bezier(0.22, 1, 0.36, 1);
   }
   .faq-card.open::before {
     opacity: 1;
     transform: translateY(0);
   }

   .faq-q-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     padding: 20px 16px;
     min-height: 86px;
   }
   .faq-q {
     font-size: 17px;
     font-weight: 400;
     line-height: 1.35;
     color: #fff;
     flex: 1;
     letter-spacing: -0.005em;
   }
   .faq-arrow {
     flex-shrink: 0;
     width: 22px;
     height: 22px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: rgba(255, 255, 255, 0.7);
     transition:
       transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
       color 0.3s;
   }
   .faq-card.open .faq-arrow {
     transform: rotate(180deg);
     color: #fff;
   }
   .faq-a {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
   }
   .faq-card.open .faq-a {
     max-height: 1000px;
   }
   .faq-a-inner {
     padding: 6px 28px 28px;
     font-size: 15.5px;
     line-height: 1.7;
     color: rgba(255, 255, 255, 0.92);
     font-weight: 400;
     letter-spacing: -0.001em;
   }
   @media (max-width: 800px) {
     .faq-grid {
       grid-template-columns: 1fr;
     }
     .faq-col {
       gap: 16px;
     }
     .faq-q {
       font-size: 17px;
     }
     .faq-a-inner {
       font-size: 14.5px;
     }
   }

   /* ═══════════════ CONTACT MODAL ═══════════════ */
   .modal-overlay {
     position: fixed;
     inset: 0;
     /* Top of the stack — beats nav (500), all positioned content, and any future overlays */
     z-index: 2147483647;
     background: rgba(2, 4, 18, 0.5);
     backdrop-filter: blur(2px);
     -webkit-backdrop-filter: blur(2px);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
     opacity: 0;
     visibility: hidden;
     transition:
       opacity 0.35s ease,
       visibility 0s 0.35s;
   }
   .modal-overlay.open {
     opacity: 1;
     visibility: visible;
     transition:
       opacity 0.35s ease,
       visibility 0s;
   }
   .modal-card {
     position: relative;
     width: min(960px, 100%);
     background: linear-gradient(
       135deg,
       #1849c2 0%,
       #1560f0 50%,
       #1849c2 100%
     );
     border-radius: 18px;
     display: grid;
     grid-template-columns: 1fr 1.05fr;
     overflow: hidden;
     box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
     transform: translateY(28px) scale(0.96);
     transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
   }
   .modal-overlay.open .modal-card {
     transform: translateY(0) scale(1);
   }
   /* Close button: anchored to top-right of the card, OUTSIDE the content padding flow.
Heading reserves right-side space (padding-right) so it can never overlap. */
   .modal-close {
     position: absolute;
     top: 8px;
     right: 8px;
     z-index: 20;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: rgba(0, 0, 0, 0.55);
     border: 1px solid rgba(255, 255, 255, 0.18);
     color: #fff;
     font-size: 18px;
     line-height: 1;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition:
       background 0.25s,
       transform 0.25s;
   }
   .modal-close:hover {
     background: rgba(0, 0, 0, 0.85);
     transform: rotate(90deg);
   }

   .modal-left {
     padding: 42px 38px;
     display: flex;
     flex-direction: column;
     gap: 20px;
   }
   .modal-left h2 {
     font-size: 24px;
     font-weight: 700;
     line-height: 1.22;
     letter-spacing: -0.012em;
     color: #fff;
     /* Reserve space so the X button never overlaps the heading text */
     padding-right: 42px;
   }
   .modal-left p.lead {
     font-size: 13.5px;
     line-height: 1.55;
     color: rgba(255, 255, 255, 0.78);
     font-weight: 400;
   }
   .modal-testimonial {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.16);
     border-radius: 12px;
     padding: 18px 20px;
     margin-top: 6px;
   }
   .modal-testimonial-quote {
     font-size: 12.5px;
     line-height: 1.55;
     color: rgba(255, 255, 255, 0.92);
     font-weight: 400;
     margin-bottom: 14px;
   }
   .modal-testimonial-author {
     display: flex;
     align-items: center;
     gap: 12px;
   }
   .modal-author-avatar {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     flex-shrink: 0;
     background: linear-gradient(135deg, #3d7af5, #1560f0);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-weight: 700;
     font-size: 13px;
     border: 2px solid rgba(255, 255, 255, 0.3);
   }
   .modal-author-meta strong {
     display: block;
     font-size: 13px;
     font-weight: 700;
     color: #fff;
     letter-spacing: -0.005em;
   }
   .modal-author-meta span {
     display: block;
     font-size: 11.5px;
     color: rgba(255, 255, 255, 0.7);
     font-weight: 400;
     margin-top: 2px;
   }
   .modal-share {
     font-size: 11.5px;
     line-height: 1.55;
     color: rgba(255, 255, 255, 0.62);
     font-weight: 400;
     margin-top: auto;
   }
   .modal-share a {
     color: #cfe0ff;
     text-decoration: underline;
   }
   .modal-share a:hover {
     color: #fff;
   }

   .modal-right {
     background: #fff;
     padding: 44px 32px;
     border-radius: 0;
     display: flex;
     flex-direction: column;
     gap: 14px;
   }
   .modal-form {
     display: flex;
     flex-direction: column;
     gap: 14px;
   }
   .modal-field {
     display: flex;
     flex-direction: column;
     gap: 5px;
   }
   .modal-input,
   .modal-textarea {
     width: 100%;
     border: 1px solid #e1e5ec;
     border-radius: 30px;
     padding: 13px 20px;
     font-size: 13.5px;
     font-family: var(--font);
     color: #1a1f3a;
     background: #fff;
     transition:
       border-color 0.25s,
       box-shadow 0.25s;
     outline: none;
   }
   .modal-input:focus,
   .modal-textarea:focus {
     border-color: #1560f0;
     box-shadow: 0 0 0 3px rgba(21, 96, 240, 0.12);
   }
   .modal-textarea {
     border-radius: 18px;
     min-height: 90px;
     resize: vertical;
     padding: 14px 20px;
     line-height: 1.5;
     font-family: var(--font);
   }
   .modal-input::placeholder,
   .modal-textarea::placeholder {
     color: #8b94a8;
     font-weight: 400;
   }
   /* Error states */
   .modal-field.error .modal-input,
   .modal-field.error .modal-textarea,
   .modal-field.error .modal-phone {
     border-color: #e53e3e;
     box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
   }
   .modal-field-error {
     font-size: 11.5px;
     color: #e53e3e;
     font-weight: 500;
     padding-left: 18px;
     display: none;
   }
   .modal-field.error .modal-field-error {
     display: block;
   }

   /* Phone field with country code SELECT dropdown */
   .modal-phone {
     display: flex;
     align-items: stretch;
     border: 1px solid #e1e5ec;
     border-radius: 30px;
     overflow: hidden;
     background: #fff;
     transition:
       border-color 0.25s,
       box-shadow 0.25s;
   }
   .modal-phone:focus-within {
     border-color: #1560f0;
     box-shadow: 0 0 0 3px rgba(21, 96, 240, 0.12);
   }
   .modal-phone-code {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     border: none;
     outline: none;
     cursor: pointer;
     background: #fafbfd
       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%237d869a' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")
       no-repeat right 14px center;
     padding: 0 30px 0 18px;
     font-size: 13px;
     color: #1a1f3a;
     font-weight: 500;
     font-family: var(--font);
     border-right: 1px solid #e1e5ec;
     min-width: 108px;
     max-width: 120px;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
   }
   .modal-phone input {
     flex: 1;
     border: none;
     outline: none;
     padding: 13px 18px;
     font-size: 13.5px;
     font-family: var(--font);
     color: #1a1f3a;
     background: transparent;
     min-width: 0;
   }
   .modal-phone input::placeholder {
     color: #8b94a8;
   }

   .modal-info {
     display: flex;
     flex-direction: column;
     gap: 6px;
     margin-top: 4px;
   }
   .modal-info-row {
     font-size: 11.5px;
     color: #5b6480;
     line-height: 1.4;
     display: flex;
     align-items: center;
     gap: 8px;
     font-weight: 400;
   }
   .modal-info-row svg {
     flex-shrink: 0;
     color: #1560f0;
   }
   .modal-submit {
     margin-top: 8px;
     align-self: flex-start;
     background: #1560f0;
     color: #fff;
     border: none;
     border-radius: 30px;
     padding: 13px 38px;
     font-family: var(--font);
     font-size: 13.5px;
     font-weight: 700;
     letter-spacing: 0.005em;
     cursor: pointer;
     box-shadow: 0 8px 22px rgba(21, 96, 240, 0.35);
     transition:
       background 0.25s,
       transform 0.25s,
       box-shadow 0.25s;
   }
   .modal-submit:hover {
     background: #0d4dd0;
     transform: translateY(-1px);
     box-shadow: 0 12px 30px rgba(21, 96, 240, 0.5);
   }
   .modal-submit:active {
     transform: translateY(0);
   }
   .modal-submit.success {
     background: #1d9d57;
     box-shadow: 0 8px 22px rgba(29, 157, 87, 0.4);
   }

   @media (max-width: 780px) {
     .modal-card {
       grid-template-columns: 1fr;
       max-height: 92vh;
       overflow-y: auto;
     }
     .modal-left,
     .modal-right {
       padding: 32px 26px;
     }
     .modal-left h2 {
       font-size: 20px;
       padding-right: 42px;
     }
   }

   footer {
     background: #010116;
     border-top: 1px solid var(--border);
     padding: 80px 0 40px;
   }
   .footer-inner {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 56px;
   }
   .footer-top {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 48px;
     padding-bottom: 48px;
     border-bottom: 1px solid var(--border);
   }
   .footer-brand-logo {
     display: block;
     margin-bottom: 16px;
     line-height: 0;
   }
   .footer-brand-logo svg {
     display: block;
     height: 16px;
     width: auto;
   }
   .footer-brand-desc {
     font-size: 13px;
     font-weight: 400;
     line-height: 1.72;
     color: rgba(255, 255, 255, 0.6);
     max-width: 280px;
     margin-bottom: 22px;
   }
   .footer-brand-email {
     font-size: 13px;
     color: var(--blue-l);
     text-decoration: none;
     transition: color 0.2s;
   }
   .footer-brand-email:hover {
     color: #fff;
   }
   .footer-col-title {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.22em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.58);
     margin-bottom: 18px;
   }
   .footer-col-links {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 11px;
   }
   .footer-col-links a {
     font-size: 13px;
     color: rgba(255, 255, 255, 0.68);
     text-decoration: none;
     transition: color 0.2s;
   }
   .footer-col-links a:hover {
     color: #fff;
   }
   .footer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 24px;
     padding-top: 28px;
     flex-wrap: wrap;
   }
   .footer-copy {
     font-size: 12px;
     color: rgba(255, 255, 255, 0.48);
   }
   .footer-legal {
     display: flex;
     gap: 22px;
   }
   .footer-legal a {
     font-size: 12px;
     color: rgba(255, 255, 255, 0.48);
     text-decoration: none;
     transition: color 0.2s;
   }
   .footer-legal a:hover {
     color: #fff;
   }
   .footer-social {
     display: flex;
     gap: 8px;
   }
   .footer-social a {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     border: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     font-size: 11px;
     font-weight: 600;
     transition:
       background 0.25s,
       border-color 0.25s,
       color 0.25s;
   }
   .footer-social a:hover {
     background: var(--blue);
     border-color: var(--blue);
     color: #fff;
   }
   @media (max-width: 768px) {
     .footer-top {
       grid-template-columns: 1fr 1fr;
       gap: 32px;
     }
     .footer-brand-col {
       grid-column: 1/-1;
     }
     .footer-inner {
       padding: 0 24px;
     }
     .footer-bottom {
       flex-direction: column;
       align-items: flex-start;
     }
   }

   /* shared edges */
   .hero-inner,
   .pillars-inner,
   .whyus-inner,
   .faq-inner {
     padding-left: 56px;
     padding-right: 56px;
   }
   @media (max-width: 768px) {
     .hero-inner,
     .pillars-inner,
     .whyus-inner,
     .faq-inner {
       padding-left: 24px;
       padding-right: 24px;
     }
     .hero-inner {
       grid-template-columns: 1fr;
     }
     .hero-canvas-wrap {
       display: none;
     }
     .pillars,
     .whyus,
     .faq {
       padding: 80px 0;
     }
     .hero {
       /* On mobile, single column — let height grow naturally so content never overflows */
       height: auto;
       min-height: 100vh;
       min-height: 100dvh;
       padding-top: 100px;
     }
   }
   @media (prefers-reduced-motion: reduce) {
     *,
     *::before,
     *::after {
       animation-duration: 0.01ms !important;
       transition-duration: 0.01ms !important;
     }
     .hero-copy,
     .service-slide {
       opacity: 1 !important;
       transform: none !important;
     }
     #heroCanvas,
     #servicesCanvas {
       display: none !important;
     }
   }