/* ══════════════════════════════════════
       TOKENS
    ══════════════════════════════════════ */
    :root {
      --teal: #00B4D8;
      --teal-dk: #0092B8;
      --teal-lt: #E6F8FC;
      --orange: #FF6B35;
      --org-dk: #E85520;
      --white: #ffffff;
      --off: #F7F9FA;
      --text: #111827;
      --muted: #6B7280;
      --light: #9CA3AF;
      --border: #E5E7EB;
      --dark: #0D1117;
      --dark2: #161B22;
      --fserif: 'DM Serif Display', serif;
      --fsans: 'DM Sans', sans-serif;
      --nav-h: 68px;
    }

    /* ══════════════════════════════════════
       BASE
    ══════════════════════════════════════ */

    /* ── PRELOADER ── */
    .preloader {
      position: fixed;
      inset: 0;
      background: #ffffff;
      z-index: 999999;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.6s;
    }

    .preloader.hide {
      opacity: 0;
      visibility: hidden;
    }

    .preloader-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem;
    }

    .preloader-logo {
      height: 60px;
      width: auto;
      animation: pulseLogo 1.5s ease-in-out infinite;
    }

    .preloader-bar-wrap {
      width: 140px;
      height: 4px;
      background: var(--border);
      border-radius: 4px;
      overflow: hidden;
    }

    .preloader-bar {
      height: 100%;
      background: var(--teal);
      width: 0%;
      animation: loadBar 2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }

    @keyframes pulseLogo {

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

      50% {
        opacity: 0.6;
        transform: scale(0.96);
      }
    }

    @keyframes loadBar {
      0% {
        width: 0%;
      }

      50% {
        width: 70%;
      }

      100% {
        width: 100%;
      }
    }

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

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    body {
      font-family: var(--fsans);
      background: var(--white);
      color: var(--text);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      /* GPU Acceleration for the entire page body */
      text-rendering: optimizeLegibility;
    }

    img {
      display: block;
      max-width: 100%;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    ul {
      list-style: none;
    }

    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    .container-sm {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    /* ══════════════════════════════════════
       TYPE
    ══════════════════════════════════════ */
    .eyebrow {
      display: block;
      font-family: var(--fsans);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--teal-dk);
      margin-bottom: 0.9rem;
    }

    h1 {
      font-family: var(--fserif);
      font-size: clamp(2.8rem, 6vw, 4.4rem);
      font-weight: 400;
      line-height: 1.06;
      letter-spacing: -0.01em;
    }

    h2 {
      font-family: var(--fserif);
      font-size: clamp(2rem, 4vw, 3.1rem);
      font-weight: 400;
      line-height: 1.12;
      letter-spacing: -0.01em;
    }

    h3 {
      font-family: var(--fserif);
      font-size: 1.45rem;
      font-weight: 400;
      line-height: 1.3;
    }

    em {
      font-style: italic;
      color: var(--teal-dk);
    }

    .lead {
      font-size: 1.1rem;
      color: var(--muted);
      line-height: 1.78;
    }

    p {
      font-size: 1rem;
      color: var(--muted);
      line-height: 1.75;
    }

    /* ══════════════════════════════════════
       BUTTONS
    ══════════════════════════════════════ */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--fsans);
      font-size: 0.95rem;
      font-weight: 600;
      border-radius: 100px;
      padding: 0.8rem 1.8rem;
      border: 2px solid transparent;
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
      line-height: 1;
    }

    .btn-orange {
      background: var(--orange);
      color: #fff;
      box-shadow: 0 2px 14px rgba(255, 107, 53, .28);
    }

    .btn-orange:hover {
      background: var(--org-dk);
      box-shadow: 0 6px 22px rgba(255, 107, 53, .36);
    }

    .btn-outline {
      background: transparent;
      color: var(--text);
      border-color: var(--border);
    }

    .btn-outline:hover {
      border-color: var(--teal);
      color: var(--teal-dk);
    }

    .btn-outline-white {
      background: transparent;
      color: rgba(255, 255, 255, .7);
      border-color: rgba(255, 255, 255, .18);
    }

    .btn-outline-white:hover {
      color: #fff;
      border-color: rgba(255, 255, 255, .5);
      transform: translateY(-2px);
    }

    /* ── Magnetic Interaction Layer ── */
    .magnetic-wrap {
      display: inline-block;
      position: relative;
      transform-style: preserve-3d;
      will-change: transform;
      z-index: 5;
    }

    /* ── ELITE 3D GLASS STORE BADGES ── */
    .badge-3d, .store-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.85rem;
      background: #0D1117 !important; /* Force deep dark theme for visibility */
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 18px;
      padding: 0.8rem 1.6rem;
      color: #ffffff !important; 
      cursor: pointer;
      overflow: hidden;
      /* Sharpened timing for a more responsive feel */
      transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease, border-color 0.3s ease;
      box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
      transform: perspective(800px) rotateX(0) rotateY(0);
      text-decoration: none;
      will-change: transform, box-shadow;
    }

    .badge-3d:hover, .store-btn:hover {
      background: #1a2332 !important;
      transform: perspective(800px) translateY(-6px) scale(1.04) rotateX(4deg) rotateY(-2deg);
      box-shadow: 
        0 15px 40px rgba(0, 180, 216, 0.35),
        0 8px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
      border-color: rgba(0, 180, 216, 0.6);
    }

    .badge-3d::before, .store-btn::before {
      content: '';
      position: absolute;
      top: 0; left: -100%; width: 60%; height: 100%;
      background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
      transform: skewX(-25deg);
      transition: none;
    }

    .badge-3d:hover::before, .store-btn:hover::before { 
      animation: shineGlass 0.75s ease forwards; 
    }

    @keyframes shineGlass { 
      100% { left: 220%; } 
    }

    .badge-3d-icon, .store-btn svg { 
      flex-shrink: 0; 
      width: 26px; 
      height: 26px; 
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
    }

    .badge-3d-text, .store-btn-label { 
      display: flex; 
      flex-direction: column; 
      align-items: flex-start; 
      gap: 1.5px; 
    }

    .badge-sub, .store-btn-small { 
      font-size: 0.7rem; 
      opacity: 0.8; 
      font-weight: 500; 
      font-family: var(--fsans); 
      letter-spacing: 0.04em; 
      text-transform: uppercase;
      line-height: 1;
      color: #ffffff !important;
    }

    .badge-main, .store-btn-big { 
      font-size: 1.1rem; 
      font-weight: 600; 
      font-family: var(--fsans); 
      letter-spacing: -0.01em; 
      line-height: 1; 
      color: #ffffff !important;
    }

    /* ══════════════════════════════════════
       SCROLL REVEAL
    ══════════════════════════════════════ */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      /* Balanced cubic-bezier for snappy entrance */
      transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
      will-change: transform, opacity;
    }

    .reveal.in {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .d1 {
      transition-delay: .08s;
    }

    .d2 {
      transition-delay: .16s;
    }

    .d3 {
      transition-delay: .24s;
    }

    .d4 {
      transition-delay: .32s;
    }

    .d5 {
      transition-delay: .40s;
    }

    /* ══════════════════════════════════════
       PHONE MOCKUP  — sayapp.net style
       Pure screenshot, no hardware frame.
       3-layer shadow for floating depth.
    ══════════════════════════════════════ */
    /* ══════════════════════════════════════
       PHONE MOCKUP — iPhone 15 Pro Hardware
    ══════════════════════════════════════ */
    .phone-wrap {
      position: relative;
      flex-shrink: 0;
      z-index: 5;
      perspective: 1500px;
      /* Enable 3D space */
    }

    .phone-hardware {
      position: relative;
      width: 250px;
      height: 508px;
      background: #080808;
      border-radius: 46px;
      padding: 8px;
      /* Inner bezel */
      border: 1px solid rgba(255, 255, 255, 0.08);
      /* Outer fine edge */

      /* Premium Multi-layer shadow and 3D Tilt */
      box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.4),
        0 10px 20px rgba(0, 0, 0, 0.2),
        inset 0 0 1px 1px rgba(255, 255, 255, 0.1);

      transform: rotateY(-8deg) rotateX(1deg);
      transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
      overflow: hidden;
      z-index: 2;
    }

    .phone-wrap:hover .phone-hardware {
      transform: rotateY(-2deg) rotateX(0deg) scale(1.02);
    }

    /* Titanium Bezel Effect */
    .phone-hardware::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 3px;
      background: linear-gradient(135deg, #222, #444, #222);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    /* Screen Shine (Shimmer) */
    .phone-hardware::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
      transform: skewX(-20deg);
      animation: screen-shine 8s infinite linear;
      pointer-events: none;
      z-index: 10;
    }

    @keyframes screen-shine {
      0% {
        left: -100%;
      }

      30% {
        left: 200%;
      }

      100% {
        left: 200%;
      }
    }

    /* Floating UI Chips */
    .ui-chip {
      position: absolute;
      padding: 0.6rem 1rem;
      background: rgba(255, 255, 255, 0.75);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(0, 180, 216, 0.15);
      border-radius: 12px;
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--teal-dk);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
      z-index: 15;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      animation: chip-float 4s ease-in-out infinite alternate;
    }

    .ui-chip.pulse::before {
      content: '';
      width: 6px;
      height: 6px;
      background: var(--teal);
      border-radius: 50%;
      animation: pulse-light 1.5s infinite;
    }

    @keyframes chip-float {
      0% {
        transform: translate(0, 0);
      }

      100% {
        transform: translate(0, -10px);
      }
    }

    .ui-chip-top {
      top: 20%;
      right: -60px;
      animation-delay: 0s;
    }

    .ui-chip-btm {
      bottom: 15%;
      left: -60px;
      animation-delay: -1.5s;
    }

    .phone-display {
      position: relative;
      width: 100%;
      height: 100%;
      background: #000;
      border-radius: 36px;
      overflow: hidden;
      border: 1px solid #111;

      /* Internal black bezel */
    }

    /* Dynamic Island */
    .p-island {
      position: absolute;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      width: 76px;
      height: 24px;
      background: #000;
      border-radius: 20px;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
    }

    .p-island::before {
      content: '';
      width: 8px;
      height: 8px;
      background: #0a0a0a;
      border-radius: 50%;
      box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.1);
    }

    .phone-screen {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .phone-screen img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
    }

    @keyframes float {

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

      50% {
        transform: translateY(-14px)
      }
    }

    .phone-float {
      animation: float 4.8s ease-in-out infinite;
    }

    /* ══════════════════════════════════════
       ① NAVBAR
    ══════════════════════════════════════ */
    #nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: var(--nav-h);
      z-index: 9999;
      display: flex;
      align-items: center;
      /* Super-smooth transitions for the Island morph */
      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      padding: 0 1rem;
    }

    /* Standard state (Top of page) */
    #nav:not(.scrolled) {
      background: rgba(255, 255, 255, 0);
      backdrop-filter: blur(0px);
    }

    /* SMART ISLAND STATE (Active on Scroll) */
    #nav.scrolled {
      top: 15px;
      margin: 0 auto;
      max-width: 900px; /* Centered Island width */
      height: 62px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-radius: 100px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.05),
        inset 0 0 1px 1px rgba(255, 255, 255, 0.8);
    }

    /* Hidden State (Scroll Down) - Slightly offset for Island */
    #nav.hidden {
      transform: translateY(-110%) scale(0.95);
      opacity: 0;
    }

    /* Island on Mobile - Full width pill */
    @media (max-width: 768px) {
      #nav.scrolled {
        max-width: calc(100% - 24px);
        height: 58px;
        top: 10px;
      }
    }

    .nav-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    .nav-logo img {
      height: 48px;
      width: auto;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 2.4rem;
    }

    .nav-links a.active {
      color: var(--teal);
    }

    /* Active Indicator Dot */
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 50%;
      width: 4px;
      height: 4px;
      background: var(--teal);
      border-radius: 50%;
      transform: translateX(-50%) scale(0);
      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .nav-links a.active::after {
      transform: translateX(-50%) scale(1);
    }

    .nav-links a:hover {
      color: var(--text);
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: .7rem;
    }

    .nav-dl {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      font-size: .86rem;
      font-weight: 600;
      color: var(--text);
      border: 1.5px solid var(--border);
      border-radius: 100px;
      padding: .54rem 1.1rem;
      transition: all .2s;
    }

    .nav-dl:hover {
      border-color: var(--teal);
      color: var(--teal-dk);
    }

    .nav-dl svg {
      flex-shrink: 0;
    }

    /* burger */
    .burger {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 5px;
    }

    .burger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--text);
      border-radius: 2px;
      transition: all .26s ease;
    }

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

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

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

    .mob-menu {
      display: none;
      position: fixed;
      top: var(--nav-h);
      left: 0;
      right: 0;
      background: #fff;
      border-bottom: 1px solid var(--border);
      padding: 1.5rem 2rem 2rem;
      flex-direction: column;
      z-index: 9998;
    }

    .mob-menu.open {
      display: flex;
    }

    .mob-menu a {
      padding: .85rem 0;
      font-size: 1rem;
      font-weight: 500;
      color: var(--text);
      border-bottom: 1px solid var(--border);
    }

    .mob-menu a:last-of-type {
      border-bottom: none;
    }

    .mob-menu .btn {
      margin-top: 1.25rem;
      align-self: flex-start;
      border-bottom: none;
      padding: .75rem 1.6rem;
    }

    /* ══════════════════════════════════════
       ② HERO  — full-viewport centered
    ══════════════════════════════════════ */
    #hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding-top: var(--nav-h);
      /* Gradient mesh: teal top-left, orange whisper bottom-right */
      background:
        radial-gradient(ellipse 80% 65% at 8% 5%, rgba(0, 180, 216, .09) 0%, transparent 55%),
        radial-gradient(ellipse 60% 55% at 92% 95%, rgba(255, 107, 53, .06) 0%, transparent 55%),
        radial-gradient(ellipse 55% 45% at 55% 50%, rgba(0, 180, 216, .03) 0%, transparent 70%),
        var(--white);
    }

    /* Canvas: full hero, delivery-network visualization */
    #hero-canvas {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* Centered content */
    .hero-center {
      position: relative;
      z-index: 2;
      text-align: center;
      max-width: 760px;
      padding: 4rem 2rem 5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Eyebrow live badge */
    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      background: rgba(255, 255, 255, .92);
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: .4rem 1.1rem .4rem .5rem;
      font-size: .8rem;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 2.2rem;
      box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
      backdrop-filter: blur(8px);
      opacity: 0;
      animation: fadeUp .6s cubic-bezier(.16, 1, .3, 1) .1s both;
    }

    .eyebrow-dot {
      width: 8px;
      height: 8px;
      background: #22C55E;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 0 3px rgba(34, 197, 94, .22);
      animation: pulseDot 2.2s ease-in-out infinite;
    }

    @keyframes pulseDot {

      0%,
      100% {
        box-shadow: 0 0 0 3px rgba(34, 197, 94, .22);
      }

      50% {
        box-shadow: 0 0 0 7px rgba(34, 197, 94, .07);
      }
    }

    /* Hero headline — massive serif */
    .hero-h1 {
      font-family: var(--fserif);
      font-size: clamp(3.2rem, 8.5vw, 6.2rem);
      font-weight: 400;
      line-height: 1.03;
      letter-spacing: -.025em;
      color: var(--text);
      margin-bottom: 1.4rem;
    }

    /* Per-word reveal spans injected by JS */
    .hw {
      display: inline-block;
      opacity: 0;
      transform: translateY(22px);
      animation: wordUp .65s cubic-bezier(.16, 1, .3, 1) both;
    }

    @keyframes wordUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(16px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .hero-sub {
      font-size: 1.12rem;
      color: var(--muted);
      max-width: 520px;
      margin-bottom: 2.4rem;
      line-height: 1.77;
      opacity: 0;
      animation: fadeUp .6s cubic-bezier(.16, 1, .3, 1) .72s both;
    }

    .hero-btns {
      display: flex;
      gap: .85rem;
      flex-wrap: wrap;
      justify-content: center;
      opacity: 0;
      animation: fadeUp .6s cubic-bezier(.16, 1, .3, 1) .88s both;
    }

    /* Primary CTA glow pulse */
    .btn-orange.hero-cta {
      box-shadow: 0 2px 14px rgba(255, 107, 53, .32), 0 0 0 0 rgba(255, 107, 53, .4);
      animation: ctaPulse 2.8s ease-in-out 2s infinite;
    }

    @keyframes ctaPulse {

      0%,
      100% {
        box-shadow: 0 2px 14px rgba(255, 107, 53, .32), 0 0 0 0 rgba(255, 107, 53, .4);
      }

      50% {
        box-shadow: 0 4px 22px rgba(255, 107, 53, .38), 0 0 0 10px rgba(255, 107, 53, 0);
      }
    }

    .hero-store-row {
      display: flex;
      gap: .75rem;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 1.5rem;
      opacity: 0;
      animation: fadeUp .6s cubic-bezier(.16, 1, .3, 1) 1s both;
    }

    .hero-note {
      margin-top: .9rem;
      font-size: .78rem;
      color: var(--light);
      opacity: 0;
      animation: fadeUp .5s ease 1.1s both;
    }

    /* ── Floating info cards ── */
    .hcard {
      position: absolute;
      z-index: 4;
      background: rgba(255, 255, 255, .88);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border: 1px solid rgba(255, 255, 255, .95);
      border-radius: 18px;
      padding: .9rem 1.15rem;
      box-shadow:
        0 2px 8px rgba(0, 0, 0, .05),
        0 8px 28px rgba(0, 0, 0, .07),
        inset 0 1px 0 rgba(255, 255, 255, .8);
      display: flex;
      align-items: center;
      gap: .75rem;
      min-width: 195px;
      pointer-events: none;
      opacity: 0;
    }

    /* Positions — outside the centered text block */
    .hc-1 {
      left: 3%;
      top: 26%;
    }

    .hc-2 {
      right: 3%;
      top: 26%;
    }

    .hc-3 {
      left: 3%;
      bottom: 24%;
    }

    .hc-4 {
      right: 3%;
      bottom: 24%;
    }

    /* Fly-in → perpetual float */
    @keyframes flyL {
      from {
        opacity: 0;
        transform: translateX(-28px) translateY(6px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes flyR {
      from {
        opacity: 0;
        transform: translateX(28px) translateY(6px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes bobA {

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

      50% {
        transform: translateY(-9px)
      }
    }

    @keyframes bobB {

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

      50% {
        transform: translateY(6px)
      }
    }

    .hc-1 {
      animation: flyL .7s cubic-bezier(.16, 1, .3, 1) .4s both, bobA 5s ease-in-out 1.2s infinite;
    }

    .hc-2 {
      animation: flyR .7s cubic-bezier(.16, 1, .3, 1) .55s both, bobB 5.5s ease-in-out 1.4s infinite;
    }

    .hc-3 {
      animation: flyL .7s cubic-bezier(.16, 1, .3, 1) .65s both, bobB 4.8s ease-in-out 1.6s infinite;
    }

    .hc-4 {
      animation: flyR .7s cubic-bezier(.16, 1, .3, 1) .8s both, bobA 6s ease-in-out 1.8s infinite;
    }

    /* Card internals */
    .hcard-live {
      width: 9px;
      height: 9px;
      background: #22C55E;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 0 3px rgba(34, 197, 94, .22);
      animation: pulseDot 2s ease-in-out infinite;
    }

    .hcard-icon {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      font-size: 1rem;
      flex-shrink: 0;
    }

    .hcard-lbl {
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--light);
      margin-bottom: .18rem;
      line-height: 1;
    }

    .hcard-val {
      font-size: .88rem;
      color: var(--text);
      line-height: 1.3;
      font-weight: 500;
    }

    .hcard-val b {
      font-weight: 700;
    }

    .hcard-val .clr-teal {
      color: var(--teal-dk);
    }

    .hcard-val .clr-green {
      color: #16A34A;
    }

    /* Only show cards on wide viewports */
    @media (max-width: 1100px) {
      .hcard {
        display: none;
      }
    }

    /* Scroll-down cue */
    .hero-scroll-cue {
      position: absolute;
      bottom: 1.8rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .4rem;
      z-index: 3;
      opacity: 0;
      animation: fadeUp .5s ease 1.3s both;
    }

    .scroll-ring {
      width: 22px;
      height: 34px;
      border: 1.5px solid var(--border);
      border-radius: 11px;
      display: flex;
      justify-content: center;
      padding-top: 5px;
    }

    .scroll-ball {
      width: 3px;
      height: 7px;
      background: var(--teal);
      border-radius: 2px;
      animation: scrollBall 2s ease-in-out infinite;
    }

    @keyframes scrollBall {

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

      60% {
        transform: translateY(9px);
        opacity: .3;
      }
    }

    .scroll-lbl {
      font-size: .68rem;
      font-weight: 500;
      color: var(--light);
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    /* ══════════════════════════════════════
       ③ PROOF BAR
    ══════════════════════════════════════ */
    #proof {
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: 2.2rem 0;
    }

    .proof-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    .proof-item {
      text-align: center;
      padding: 0 1rem;
      border-right: 1px solid var(--border);
    }

    .proof-item:last-child {
      border-right: none;
    }

    .proof-n {
      font-family: var(--fserif);
      font-size: 2rem;
      color: var(--teal-dk);
      line-height: 1;
      margin-bottom: .3rem;
    }

    .proof-l {
      font-size: .82rem;
      font-weight: 500;
      color: var(--muted);
    }

    /* ══════════════════════════════════════
       ④ INTRO CARDS
    ══════════════════════════════════════ */
    #intro-cards {
      padding: 6rem 0 5rem;
    }

    .intro-hd {
      text-align: center;
      margin-bottom: 3.2rem;
    }

    .intro-hd h2 {
      margin-bottom: .75rem;
    }

    .cards-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.4rem;
    }

    .ic {
      background: var(--off);
      border-radius: 20px;
      padding: 2.2rem 1.8rem;
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .ic:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 36px rgba(0, 0, 0, .07);
    }

    .ic-em {
      font-size: 2rem;
      display: block;
      margin-bottom: 1rem;
      line-height: 1;
    }

    .ic h3 {
      margin-bottom: .6rem;
    }

    .ic p {
      font-size: .92rem;
      line-height: 1.65;
    }

    /* ══════════════════════════════════════
       ⑤ FEATURE SECTIONS (alternating)
    ══════════════════════════════════════ */
    .feat {
      padding: 7rem 0;
    }

    .feat:nth-child(odd) {
      background: var(--off);
    }

    .feat:nth-child(even) {
      background: var(--white);
    }

    .feat-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 5rem;
    }

    .feat-layout.rev {
      direction: rtl;
    }

    .feat-layout.rev>* {
      direction: ltr;
    }

    .feat-copy h2 {
      margin-bottom: 1rem;
    }

    .feat-copy p {
      max-width: 420px;
      margin-bottom: 1.5rem;
    }

    .feat-list {
      display: flex;
      flex-direction: column;
      gap: .72rem;
      margin-bottom: 1.8rem;
    }

    .feat-list li {
      display: flex;
      align-items: flex-start;
      gap: .6rem;
      font-size: .94rem;
      color: var(--muted);
      line-height: 1.55;
    }

    .feat-list li::before {
      content: '';
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      margin-top: 2px;
      background: var(--teal-lt);
      border-radius: 50%;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B4D8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
      background-size: 10px;
      background-position: center;
      background-repeat: no-repeat;
    }

    .feat-visual {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .feat-glow {
      position: absolute;
      width: 320px;
      height: 320px;
      background: radial-gradient(circle, rgba(0, 180, 216, .07) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }

    /* ══════════════════════════════════════
       HARDWARE SHOWCASE (Light Theme)
    ══════════════════════════════════════ */
    #hardware {
      background: var(--white);
      color: var(--text);
      border-top: 1px solid var(--border);
      position: relative;
      height: 400vh;
      /* The 4-step scroll track */
    }

    .hw-sticky-wrap {
      position: sticky;
      top: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding: 2rem 0;
      /* Safe area */
    }

    .hw-hd h2 {
      margin-bottom: 2rem;
    }

    #hardware::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image:
        linear-gradient(rgba(0, 180, 216, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 180, 216, 0.05) 1px, transparent 1px);
      background-size: 40px 40px;
      z-index: 0;
      pointer-events: none;
      mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
    }

    #hardware .container {
      position: relative;
      z-index: 1;
      /* Keep above blueprint grid */
    }

    .hw-display {
      position: relative;
      max-width: 960px;
      margin: 0 auto 4rem;
    }

    .hw-main-img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 32px;
      border: 1px solid rgba(0, 0, 0, 0.06);
      box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15), 0 15px 25px rgba(0, 0, 0, 0.05);
    }

    @keyframes pop-in-spot {
      0% {
        transform: scale(0);
        opacity: 0;
      }

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

    /* Hotspots - Light Theme */
    .hotspot {
      position: absolute;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 2px solid var(--teal);
      border-radius: 50%;
      cursor: pointer;
      z-index: 10;
      display: grid;
      place-items: center;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      box-shadow: 0 0 0 0 rgba(0, 180, 216, 0.4);
      animation: pop-in-spot 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
    }

    .hotspot:hover,
    .hotspot.active {
      transform: scale(1.3);
      background: var(--teal);
      border-color: #fff;
      box-shadow: 0 0 25px rgba(0, 180, 216, 0.4);
    }

    .hotspot::after {
      content: '';
      position: absolute;
      inset: -10px;
      border: 1px solid var(--teal);
      border-radius: 50%;
      animation: pulse-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
      opacity: 0.6;
    }

    @keyframes pulse-ping {
      0% {
        transform: scale(0.6);
        opacity: 0.8;
      }

      100% {
        transform: scale(2.2);
        opacity: 0;
      }
    }

    /* Tech Cards styling */
    .hw-cards-container {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 20;
    }

    .hw-card {
      position: absolute;
      width: 280px;
      padding: 1.8rem;
      background: rgba(255, 255, 255, 0.82);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(0, 180, 216, 0.25);
      border-radius: 20px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
      pointer-events: all;
      opacity: 0;
      visibility: hidden;
      transform: translateY(15px) scale(0.95);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .hw-card.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }

    .hw-card-close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: none;
      background: var(--off);
      color: var(--muted);
      cursor: pointer;
      font-size: 1.2rem;
      line-height: 1;
      display: grid;
      place-items: center;
      transition: all 0.2s;
    }

    .hw-card-close:hover {
      background: var(--teal);
      color: #fff;
    }

    .card-eyebrow {
      display: block;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 0.6rem;
    }

    .hw-card h3 {
      font-size: 1.25rem;
      margin-bottom: 0.8rem;
      color: var(--text);
    }

    .hw-card p {
      font-size: 0.88rem;
      line-height: 1.6;
      color: var(--muted);
      margin-bottom: 1.2rem;
    }

    .card-specs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      padding-top: 1.2rem;
      border-top: 1px solid rgba(0, 180, 216, 0.1);
    }

    .cs-item {
      font-size: 0.75rem;
      color: var(--muted);
      font-weight: 500;
    }

    .cs-item span {
      display: block;
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      font-family: var(--fserif);
      margin-bottom: 0.1rem;
    }

    /* Card Positioning (relative to image box) */
    .hw-card[data-index="0"] {
      top: 10%;
      right: 10%;
    }

    .hw-card[data-index="1"] {
      top: 35%;
      right: 5%;
    }

    .hw-card[data-index="2"] {
      bottom: 10%;
      left: 10%;
    }

    .hw-card[data-index="3"] {
      top: 25%;
      left: 5%;
    }

    /* Premium Text Blocks */
    .hw-split-layout {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 5rem;
      align-items: center;
      width: 100%;
    }

    .hw-text-col {
      position: relative;
      height: 480px;
    }

    .hw-text-stack {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .hw-text-block {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      visibility: hidden;
      transform: translateY(30px);
      transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .hw-text-block.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .hw-text-block h2 {
      font-size: 2.8rem;
      margin-bottom: 1.5rem;
      color: var(--text);
      line-height: 1.1;
    }

    .hw-text-block p {
      font-size: 1.1rem;
      color: var(--muted);
      line-height: 1.6;
    }

    .spec-item {
      text-align: left;
    }

    .spec-val {
      font-family: var(--fserif);
      font-size: 2.2rem;
      color: var(--text);
      display: block;
      margin-bottom: .2rem;
    }

    .spec-lbl {
      font-size: .75rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--muted);
      font-weight: 600;
    }

    /* Positioning refine for hardware_final.png */
    .hs-cargo {
      top: 32%;
      left: 44%;
      animation-delay: 0.1s;
    }

    .hs-face {
      top: 54%;
      left: 63%;
      animation-delay: 0.25s;
    }

    .hs-tires {
      bottom: 22%;
      left: 42%;
      animation-delay: 0.4s;
    }

    .hs-logo {
      top: 52%;
      left: 33%;
      animation-delay: 0.55s;
    }

    @media (max-width: 900px) {
      .hw-split-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
      }

      .hw-text-col {
        height: auto;
        min-height: 300px;
        order: 2;
        margin-top: 2rem;
      }

      .hw-image-col {
        order: 1;
      }

      .hw-text-block {
        position: relative;
        display: none;
        transform: translateY(0);
      }

      .hw-text-block.active {
        display: block;
      }
    }

    @media (max-width: 768px) {
      .hw-specs {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
      }

      .hw-callout {
        display: none;
      }
    }

    /* ══════════════════════════════════════
       ⑥ REVIEWS
    ══════════════════════════════════════ */
    #reviews {
      padding: 6.5rem 0;
      background: var(--white);
    }

    .reviews-hd {
      text-align: center;
      margin-bottom: .75rem;
    }

    .reviews-hd h2 {
      margin-bottom: .6rem;
    }

    .reviews-meta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .75rem;
      margin-bottom: 3.5rem;
    }

    .stars-row {
      display: flex;
      gap: 2px;
      color: #F59E0B;
      font-size: 1.1rem;
    }

    .rating-n {
      font-family: var(--fserif);
      font-size: 1.3rem;
    }

    .rating-lbl {
      font-size: .85rem;
      color: var(--muted);
    }

    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.4rem;
    }

    .rc {
      background: var(--off);
      border-radius: 20px;
      padding: 1.8rem;
      transition: transform .25s, box-shadow .25s;
    }

    .rc:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 32px rgba(0, 0, 0, .07);
    }

    .rc-stars {
      color: #F59E0B;
      font-size: .9rem;
      margin-bottom: .8rem;
    }

    .rc-text {
      font-size: .96rem;
      color: var(--text);
      line-height: 1.65;
      margin-bottom: 1.2rem;
    }

    .rc-author {
      display: flex;
      align-items: center;
      gap: .65rem;
    }

    .rc-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--teal-lt), var(--teal));
      display: grid;
      place-items: center;
      font-size: .85rem;
      font-weight: 600;
      color: var(--teal-dk);
      flex-shrink: 0;
    }

    .rc-name {
      font-size: .88rem;
      font-weight: 600;
      color: var(--text);
    }

    .rc-role {
      font-size: .76rem;
      color: var(--light);
    }

    /* ══════════════════════════════════════
       ⑦ CONTACT US
    ══════════════════════════════════════ */
    #contact {
      padding: 7rem 0;
      background: var(--white);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 5rem;
      align-items: flex-start;
    }

    .contact-copy h2 {
      margin-bottom: 1rem;
    }

    .contact-copy .lead {
      margin-bottom: 1.5rem;
      max-width: 380px;
    }

    .contact-detail {
      display: flex;
      align-items: center;
      gap: .7rem;
      margin-top: 1.8rem;
    }

    .contact-detail-icon {
      width: 40px;
      height: 40px;
      background: var(--teal-lt);
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    .contact-detail-icon svg {
      width: 18px;
      height: 18px;
      stroke: var(--teal-dk);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .contact-detail-text {
      font-size: .9rem;
      color: var(--muted);
    }

    .contact-detail-text strong {
      display: block;
      font-weight: 600;
      color: var(--text);
      font-size: .88rem;
    }

    /* Form */
    .contact-form {
      background: var(--off);
      border-radius: 24px;
      padding: 2.5rem;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: .45rem;
    }

    .form-group label {
      font-size: .82rem;
      font-weight: 600;
      color: var(--text);
      letter-spacing: .02em;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
      font-family: var(--fsans);
      font-size: .95rem;
      color: var(--text);
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: .75rem 1rem;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
      resize: none;
      width: 100%;
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder {
      color: var(--light);
    }

    .form-group input:focus,
    .form-group textarea:focus {
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(0, 180, 216, .1);
    }

    .form-group textarea {
      min-height: 130px;
    }

    .form-full {
      margin-bottom: 1rem;
    }

    .form-submit {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 1.5rem;
    }

    .form-submit-note {
      font-size: .8rem;
      color: var(--light);
    }

    .btn-submit {
      background: var(--orange);
      color: #fff;
      border: none;
      border-radius: 100px;
      padding: .85rem 2rem;
      font-family: var(--fsans);
      font-size: .96rem;
      font-weight: 600;
      cursor: pointer;
      transition: background .2s, transform .2s, box-shadow .2s;
      box-shadow: 0 2px 14px rgba(255, 107, 53, .28);
      display: inline-flex;
      align-items: center;
      gap: .45rem;
    }

    .btn-submit:hover:not(:disabled) {
      background: var(--org-dk);
      transform: translateY(-2px);
      box-shadow: 0 6px 22px rgba(255, 107, 53, .36);
    }

    .btn-submit:disabled {
      opacity: 0.75;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .form-success {
      display: none;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 4rem 1rem;
      animation: formPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    @keyframes formPop {
      0% {
        opacity: 0;
        transform: scale(0.95);
      }

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

    .success-icon {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: var(--teal-lt);
      color: var(--teal-dk);
      display: grid;
      place-items: center;
      margin-bottom: 1.5rem;
    }

    .form-success h3 {
      font-size: 1.8rem;
      color: var(--text);
      margin-bottom: 0.5rem;
    }

    /* ══════════════════════════════════════
       ⑧ FAQ
    ══════════════════════════════════════ */
    #faq {
      padding: 7rem 0 5rem;
      background: var(--off);
    }

    .faq-hd {
      text-align: center;
      margin-bottom: 4rem;
    }

    .faq-container {
      max-width: 800px;
      margin: 0 auto;
    }

    .faq-item {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 16px;
      margin-bottom: 1.2rem;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .faq-item:hover {
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
      transform: translateY(-2px);
    }

    .faq-item.active {
      border-color: var(--teal);
      box-shadow: 0 15px 35px rgba(0, 180, 216, 0.08);
      transform: translateY(-2px);
    }

    .faq-q {
      padding: 1.5rem 1.8rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      user-select: none;
    }

    .faq-q h3 {
      font-size: 1.15rem;
      font-weight: 600;
      margin: 0;
      color: var(--text);
      transition: color 0.3s;
    }

    .faq-item.active .faq-q h3 {
      color: var(--teal-dk);
    }

    .faq-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--off);
      display: grid;
      place-items: center;
      flex-shrink: 0;
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      color: var(--muted);
    }

    .faq-item.active .faq-icon {
      background: var(--teal);
      color: var(--white);
      transform: rotate(180deg);
    }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .faq-a-inner {
      padding: 0 1.8rem 1.5rem 1.8rem;
      color: var(--muted);
      line-height: 1.65;
      font-size: 1.05rem;
    }

    /* ══════════════════════════════════════
       ⑨ CTA BAND
    ══════════════════════════════════════ */
    #cta {
      padding: 7rem 0;
      background: var(--dark);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .cta-g1 {
      position: absolute;
      top: -120px;
      left: -120px;
      width: 480px;
      height: 480px;
      background: radial-gradient(circle, rgba(0, 180, 216, .1) 0%, transparent 65%);
      pointer-events: none;
    }

    .cta-g2 {
      position: absolute;
      bottom: -100px;
      right: -100px;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(255, 107, 53, .07) 0%, transparent 65%);
      pointer-events: none;
    }

    .cta-inner {
      position: relative;
      z-index: 1;
    }

    .cta-inner .eyebrow {
      color: var(--teal);
    }

    .cta-inner h2 {
      color: #fff;
      margin-bottom: 1rem;
    }

    .cta-inner h2 em {
      color: var(--teal);
    }

    .cta-inner .lead {
      color: rgba(255, 255, 255, .5);
      max-width: 460px;
      margin: 0 auto 2.5rem;
    }

    .cta-btns {
      display: flex;
      gap: .85rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* ══════════════════════════════════════
       ⑩ FOOTER
    ══════════════════════════════════════ */
    #footer {
      background: var(--dark) !important;
      border-top: 1px solid rgba(255, 255, 255, .05) !important;
      padding: 7rem 0 3rem;
      position: relative;
      overflow: hidden;
    }

    /* Holographic Grid */
    #footer::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(0, 180, 216, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 180, 216, 0.03) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: radial-gradient(circle at center, black, transparent 80%);
      -webkit-mask-image: radial-gradient(circle at center, black, transparent 80%);
      pointer-events: none;
      z-index: 1;
    }

    /* Core Glow */
    #footer::after {
      content: '';
      position: absolute;
      bottom: -10%;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 40%;
      background: radial-gradient(circle at center, rgba(0, 180, 216, 0.08) 0%, transparent 70%);
      pointer-events: none;
      z-index: 1;
      filter: blur(40px);
      animation: core-pulse 8s infinite alternate ease-in-out;
    }

    /* Scanning Pulse Beam */
    .footer-scanner {
      position: absolute;
      top: 0;
      left: -100%;
      width: 40%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0, 180, 216, 0.15), transparent);
      z-index: 2;
      animation: footer-scan 12s infinite linear;
      pointer-events: none;
    }

    @keyframes core-pulse {
      0% {
        opacity: 0.5;
        transform: translateX(-50%) scale(1);
      }

      100% {
        opacity: 1;
        transform: translateX(-50%) scale(1.1);
      }
    }

    @keyframes footer-scan {
      0% {
        left: -100%;
      }

      20% {
        left: 200%;
      }

      100% {
        left: 200%;
      }
    }

    .footer-top {
      position: relative;
      z-index: 5;
      display: grid;
      grid-template-columns: 2fr repeat(3, 1fr);
      gap: 3rem;
      margin-bottom: 4rem;
    }

    .footer-brand img {
      height: 44px;
      width: auto;
      margin-bottom: 1.2rem;
    }

    .footer-brand p {
      font-size: .88rem;
      color: rgba(255, 255, 255, .4);
      line-height: 1.6;
      max-width: 240px;
      margin-bottom: 1.5rem;
    }

    .footer-social {
      display: flex;
      gap: 1rem;
    }

    .footer-social a {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .05);
      display: grid;
      place-items: center;
      color: rgba(255, 255, 255, .5);
      transition: all .2s;
    }

    .footer-social a:hover {
      background: var(--teal);
      color: #fff;
      transform: translateY(-3px);
    }

    .footer-lbl {
      display: block;
      font-size: .75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #fff;
      margin-bottom: 1.5rem;
    }

    .footer-col {
      display: flex;
      flex-direction: column;
      gap: .8rem;
    }

    .footer-col a {
      font-size: .92rem;
      color: rgba(255, 255, 255, .4);
      transition: color .2s;
      text-decoration: none;
    }

    .footer-col a:hover {
      color: var(--teal);
    }

    .footer-bottom {
      padding-top: 2rem;
      border-top: 1px solid rgba(255, 255, 255, .07);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }

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

    /* ══════════════════════════════════════
       ⑧ FAQ
    ══════════════════════════════════════ */
    #faq {
      padding: 7rem 0;
      background: var(--white);
    }

    .faq-hd {
      text-align: center;
      margin-bottom: 3.5rem;
    }

    .faq-hd h2 {
      margin-bottom: .6rem;
    }

    .faq-container {
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .faq-item {
      background: var(--off);
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid transparent;
      transition: border-color .3s, box-shadow .3s;
    }

    .faq-item:hover {
      border-color: rgba(0, 180, 216, .2);
    }

    .faq-item.active {
      border-color: var(--teal);
      background: var(--white);
      box-shadow: 0 12px 32px rgba(0, 0, 0, .04);
    }

    .faq-q {
      padding: 1.4rem 1.8rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      user-select: none;
    }

    .faq-q h3 {
      font-family: var(--fsans);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--text);
    }

    .faq-icon {
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      transition: transform .3s ease;
      color: var(--muted);
    }

    .faq-item.active .faq-icon {
      transform: rotate(180deg);
      color: var(--teal);
    }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .faq-a-inner {
      padding: 0 1.8rem 1.6rem;
      font-size: .96rem;
      line-height: 1.7;
      color: var(--muted);
    }

    /* ══════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════ */
    @media (max-width: 1024px) {
      .feat-layout {
        gap: 3rem;
      }

      .phone-wrap {
        transform: scale(0.9);
      }

      .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .contact-grid {
        gap: 3rem;
      }
    }

    @media (max-width: 768px) {

      .nav-links,
      .nav-right {
        display: none;
      }

      .burger {
        display: flex;
      }

      /* Hero */
      .hero-center {
        padding: 3rem 1.5rem 4rem;
      }

      .hero-btns,
      .hero-store-row {
        justify-content: center;
      }

      /* Hide decorative elements that break mobile width */
      .ui-chip, .hcard, .hero-canvas {
        display: none !important;
      }
      
      #hero {
        overflow: hidden;
      }

      /* Proof */
      .proof-row {
        grid-template-columns: 1fr 1fr;
      }

      .proof-item {
        padding: .8rem .5rem;
        border-right: none !important;
      }

      .proof-item:nth-child(odd) {
        border-right: 1px solid var(--border) !important;
      }

      .proof-row {
        row-gap: 1rem;
      }

      /* Cards & feats */
      .cards-3 {
        grid-template-columns: 1fr;
      }

      .feat-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
      }

      .feat-layout.rev {
        direction: ltr;
      }

      .feat-visual {
        order: -1;
      }

      .feat-copy p {
        margin-left: auto;
        margin-right: auto;
      }

      .feat-list li {
        text-align: left;
      }

      .phone-wrap {
        transform: scale(0.8);
        margin: -40px 0;
      }

      /* Reviews */
      .reviews-grid {
        grid-template-columns: 1fr;
      }

      /* Contact */
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
      }

      .form-row {
        grid-template-columns: 1fr;
      }

      /* Footer */
      .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
      }

      .footer-bottom {
        justify-content: center;
        text-align: center;
      }
    }

    @media (max-width: 480px) {
      .footer-top {
        grid-template-columns: 1fr;
      }

      .container,
      .container-sm {
        padding: 0 1.2rem;
      }

      h1 {
        font-size: 2.4rem;
      }

      h2 {
        font-size: 1.9rem;
      }

      .hero-btns {
        flex-direction: column;
        align-items: stretch;
      }

      .hero-btns .btn {
        justify-content: center;
      }

      .cta-btns {
        flex-direction: column;
        align-items: center;
      }

      .dl-badges {
        flex-direction: column;
        align-items: center;
      }

      .form-submit {
        flex-direction: column;
        align-items: stretch;
        gap: .85rem;
      }

      .btn-submit {
        justify-content: center;
      }
    }

    /* ══════════════════════════════════════
       CUSTOM LIDAR CURSOR
    ══════════════════════════════════════ */
    @media (hover: hover) and (pointer: fine) {
      body {
        cursor: none !important;
      }

      a,
      button,
      .btn,
      .hotspot,
      .faq-q {
        cursor: none !important;
      }

      .cursor-follower {
        position: fixed;
        width: 40px;
        height: 40px;
        background: rgba(0, 180, 216, 0.05);
        border: 1px solid rgba(0, 180, 216, 0.3);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999999;
        transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
        transform: translate(-50%, -50%);
        backdrop-filter: blur(2px);
      }

      .cursor-dot {
        position: fixed;
        width: 6px;
        height: 6px;
        background: var(--teal);
        border-radius: 50%;
        pointer-events: none;
        z-index: 10000000;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 10px var(--teal);
      }

      /* Hover state for links/buttons */
      body.cursor-hover .cursor-follower {
        width: 60px;
        height: 60px;
        background: rgba(0, 180, 216, 0.15);
        border-color: var(--teal);
      }

      .lidar-particle {
        position: fixed;
        width: 4px;
        height: 4px;
        background: var(--teal);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999998;
        transform: translate(-50%, -50%);
        animation: lidarFade 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        box-shadow: 0 0 6px var(--teal);
      }

      @keyframes lidarFade {
        0% {
          opacity: 0.8;
          transform: translate(-50%, -50%) scale(1);
        }

        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.2);
        }
      }
    }