/* ============================================================
       LAYER ORDER
    ============================================================ */
    @layer reset, tokens, base, layout, components, animations, utilities;

    /* ============================================================
       @property TYPED CUSTOM PROPERTIES
    ============================================================ */
    @property --shimmer-pos {
      syntax: '<percentage>';
      inherits: false;
      initial-value: -100%;
    }
    @property --card-grad-opacity {
      syntax: '<number>';
      inherits: false;
      initial-value: 0;
    }
    @property --nav-bg-alpha {
      syntax: '<number>';
      inherits: false;
      initial-value: 0;
    }

    /* ============================================================
       RESET
    ============================================================ */
    @layer reset {
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
      html { scroll-behavior: smooth; interpolate-size: allow-keywords; }
      img, video { max-width: 100%; display: block; }
      button, input, select, textarea { font: inherit; }
      ul, ol { list-style: none; }
      a { color: inherit; text-decoration: none; }
    }

    /* ============================================================
       TOKENS
    ============================================================ */
    @layer tokens {
      :root {
        --navy:  #0D2244;
        --navy2: #0a1a33;
        --red:   #C8102E;
        --gold:  #B8941F;
        --white: #ffffff;
        --gray50: #f8f9fa;
        --gray100: #f1f3f5;
        --gray200: #e9ecef;
        --gray400: #ced4da;
        --gray600: #6c757d;
        --gray800: #343a40;

        /* Fluid type scale */
        --text-xs:   clamp(0.7rem,   0.65rem + 0.25vw, 0.8rem);
        --text-sm:   clamp(0.8rem,   0.75rem + 0.3vw,  0.95rem);
        --text-base: clamp(0.95rem,  0.9rem  + 0.3vw,  1.05rem);
        --text-md:   clamp(1rem,     0.95rem + 0.35vw, 1.2rem);
        --text-lg:   clamp(1.1rem,   1rem    + 0.5vw,  1.4rem);
        --text-xl:   clamp(1.2rem,   1.1rem  + 0.6vw,  1.6rem);
        --text-2xl:  clamp(1.4rem,   1.2rem  + 1vw,    2rem);
        --text-3xl:  clamp(1.7rem,   1.4rem  + 1.5vw,  2.5rem);
        --text-4xl:  clamp(2rem,     1.6rem  + 2vw,    3.2rem);
        --text-5xl:  clamp(2.4rem,   1.8rem  + 3vw,    4.5rem);
        --text-hero: clamp(2.8rem,   2rem    + 4vw,    6rem);

        --radius-sm: 6px;
        --radius-md: 12px;
        --radius-lg: 20px;
        --radius-xl: 32px;

        --shadow-sm: 0 1px 3px color-mix(in srgb, var(--navy) 12%, transparent);
        --shadow-md: 0 4px 16px color-mix(in srgb, var(--navy) 16%, transparent);
        --shadow-lg: 0 8px 32px color-mix(in srgb, var(--navy) 20%, transparent);
        --shadow-xl: 0 20px 60px color-mix(in srgb, var(--navy) 28%, transparent);

        --transition-fast: 150ms ease;
        --transition-base: 250ms ease;
        --transition-slow: 400ms ease;

        --gap-xs: clamp(0.5rem, 1vw, 0.75rem);
        --gap-sm: clamp(0.75rem, 1.5vw, 1rem);
        --gap-md: clamp(1rem, 2vw, 1.5rem);
        --gap-lg: clamp(1.5rem, 3vw, 2.5rem);
        --gap-xl: clamp(2rem, 4vw, 4rem);
        --gap-2xl: clamp(3rem, 6vw, 6rem);

        --section-py: clamp(4rem, 8vw, 7rem);
        --container: min(1200px, 100% - 2 * clamp(1rem, 4vw, 2.5rem));
      }
    }

    /* ============================================================
       BASE
    ============================================================ */
    @layer base {
      html { font-size: 16px; }
      body {
        font-family: 'DM Sans', sans-serif;
        font-size: var(--text-base);
        color: var(--gray800);
        background: var(--white);
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
      }
      h1, h2, h3, h4, h5, h6 {
        font-family: 'Unbounded', sans-serif;
        line-height: 1.2;
        text-wrap: balance;
      }
      :focus-visible {
        outline: 2px solid var(--red);
        outline-offset: 3px;
        border-radius: 3px;
      }
    }

    /* ============================================================
       LAYOUT
    ============================================================ */
    @layer layout {
      .container { width: var(--container); margin-inline: auto; }

      section { padding-block: var(--section-py); }

      .section-label {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: var(--text-xs);
        font-family: 'Unbounded', sans-serif;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--red);
        margin-bottom: 1rem;

        &::before {
          content: '';
          display: block;
          width: 2rem;
          height: 2px;
          background: var(--red);
          flex-shrink: 0;
        }
      }

      .section-title {
        font-size: var(--text-3xl);
        color: var(--navy);
        margin-bottom: var(--gap-md);
      }

      .section-sub {
        font-size: var(--text-md);
        color: var(--gray600);
        max-width: 56ch;
        line-height: 1.7;
      }
    }

    /* ============================================================
       COMPONENTS
    ============================================================ */
    @layer components {

      /* ── NAV ── */
      .nav {
        position: fixed;
        top: 0;
        inset-inline: 0;
        z-index: 100;
        padding-block: 1rem;
        transition: padding var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);

        &.scrolled {
          padding-block: 0.6rem;
          background: color-mix(in srgb, var(--white) 95%, transparent);
          backdrop-filter: blur(16px) saturate(180%);
          -webkit-backdrop-filter: blur(16px) saturate(180%);
          box-shadow: var(--shadow-sm);
        }

        & .nav-inner {
          width: var(--container);
          margin-inline: auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 1rem;
        }

        & .nav-logo {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          flex-shrink: 0;

          & img {
            height: clamp(36px, 5vw, 48px);
            width: auto;
          }

          & .logo-text {
            font-family: 'Unbounded', sans-serif;
            font-size: var(--text-sm);
            font-weight: 700;
            color: var(--navy);
            line-height: 1.2;

            & span { color: var(--red); display: block; font-weight: 400; font-size: var(--text-xs); }
          }
        }

        & .nav-links {
          display: flex;
          align-items: center;
          gap: clamp(1rem, 2vw, 1.75rem);

          @media (max-width: 900px) { display: none; }

          & a {
            font-size: var(--text-sm);
            font-weight: 500;
            color: var(--navy);
            position: relative;
            padding-bottom: 2px;
            transition: color var(--transition-fast);

            &::after {
              content: '';
              position: absolute;
              bottom: -2px;
              left: 0;
              width: 0;
              height: 2px;
              background: var(--red);
              transition: width var(--transition-base);
            }

            &:hover, &.active {
              color: var(--red);
              &::after { width: 100%; }
            }
          }
        }

        & .nav-actions {
          display: flex;
          align-items: center;
          gap: 0.75rem;
        }

        & .lang-toggle {
          display: flex;
          align-items: center;
          background: color-mix(in srgb, var(--navy) 8%, transparent);
          border-radius: 100px;
          padding: 3px;
          gap: 2px;

          & button {
            border: none;
            background: none;
            padding: 0.25rem 0.65rem;
            border-radius: 100px;
            font-size: var(--text-xs);
            font-weight: 600;
            cursor: pointer;
            color: var(--gray600);
            transition: all var(--transition-fast);

            &.active {
              background: var(--navy);
              color: var(--white);
            }
          }
        }

        & .nav-cta {
          background: var(--red);
          color: var(--white);
          border: none;
          padding: 0.55rem 1.25rem;
          border-radius: 100px;
          font-size: var(--text-sm);
          font-weight: 600;
          cursor: pointer;
          transition: background var(--transition-fast), transform var(--transition-fast);
          text-decoration: none;
          display: inline-block;

          @media (max-width: 600px) { display: none; }

          &:hover { background: color-mix(in srgb, var(--red) 85%, black); transform: translateY(-1px); }
        }

        & .hamburger {
          display: none;
          border: none;
          background: none;
          cursor: pointer;
          padding: 0.5rem;
          color: var(--navy);
          flex-direction: column;
          gap: 5px;

          @media (max-width: 900px) { display: flex; }

          & span {
            display: block;
            width: 22px;
            height: 2px;
            background: currentColor;
            transition: transform var(--transition-base), opacity var(--transition-base);
          }
        }
      }

      /* ── MOBILE DIALOG ── */
      #mob-dialog {
        border: none;
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 360px;
        height: 100dvh;
        max-height: 100dvh;
        background: var(--navy);
        color: var(--white);
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        inset-inline-start: auto;
        box-shadow: var(--shadow-xl);

        &::backdrop {
          background: color-mix(in srgb, var(--navy) 60%, transparent);
          backdrop-filter: blur(4px);
        }

        @starting-style {
          transform: translateX(100%);
          opacity: 0;
        }

        transform: translateX(0);
        opacity: 1;
        transition: transform var(--transition-slow), opacity var(--transition-slow), display var(--transition-slow) allow-discrete, overlay var(--transition-slow) allow-discrete;

        & .mob-inner {
          padding: 2rem;
          display: flex;
          flex-direction: column;
          height: 100%;
        }

        & .mob-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 2.5rem;
        }

        & .mob-close {
          border: none;
          background: color-mix(in srgb, var(--white) 10%, transparent);
          color: var(--white);
          width: 40px;
          height: 40px;
          border-radius: 50%;
          cursor: pointer;
          font-size: 1.2rem;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background var(--transition-fast);

          &:hover { background: color-mix(in srgb, var(--white) 20%, transparent); }
        }

        & nav {
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
          flex: 1;

          & a {
            font-size: var(--text-lg);
            font-weight: 500;
            padding: 0.85rem 0;
            border-bottom: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
            color: var(--white);
            transition: color var(--transition-fast), padding-left var(--transition-fast);

            &:hover { color: var(--gold); padding-left: 0.5rem; }
          }
        }

        & .mob-footer {
          margin-top: 2rem;
          padding-top: 1.5rem;
          border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
        }

        & .mob-cta {
          display: block;
          background: var(--red);
          color: var(--white);
          text-align: center;
          padding: 0.85rem 1.5rem;
          border-radius: 100px;
          font-weight: 600;
          font-size: var(--text-base);
          transition: background var(--transition-fast);

          &:hover { background: color-mix(in srgb, var(--red) 85%, black); }
        }
      }

      /* ── HERO ── */
      .hero {
        position: relative;
        min-height: 100svh;
        display: flex;
        align-items: center;
        overflow: hidden;
        background: var(--navy);

        & .hero-bg {
          position: absolute;
          inset: 0;
          background:
            linear-gradient(135deg,
              color-mix(in srgb, var(--navy) 92%, transparent) 0%,
              color-mix(in srgb, var(--navy) 70%, transparent) 60%,
              color-mix(in srgb, var(--navy2) 85%, transparent) 100%
            ),
            url('https://images.unsplash.com/photo-1617788138017-80ad40651399?w=1800&q=80') center/cover no-repeat;
          will-change: transform;

          &::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 70% 50%, color-mix(in srgb, var(--red) 8%, transparent), transparent 70%);
          }
        }

        & .hero-content {
          position: relative;
          z-index: 2;
          width: var(--container);
          margin-inline: auto;
          padding-block: 10rem 5rem;
        }

        & .hero-pill {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          background: color-mix(in srgb, var(--red) 15%, transparent);
          border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
          color: color-mix(in srgb, var(--white) 90%, var(--red));
          padding: 0.4rem 1rem;
          border-radius: 100px;
          font-size: var(--text-xs);
          font-weight: 600;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          margin-bottom: 1.5rem;
          animation: pill-in 0.6s ease both;

          & .pill-dot {
            width: 6px;
            height: 6px;
            background: var(--red);
            border-radius: 50%;
            animation: pulse-dot 2s ease infinite;
          }
        }

        & .hero-title {
          font-size: var(--text-hero);
          color: var(--white);
          font-weight: 700;
          max-width: 14ch;
          margin-bottom: 1.5rem;
          animation: hero-title-in 0.8s ease 0.1s both;
          position: relative;
          overflow: hidden;

          & .shimmer-text {
            background: linear-gradient(
              90deg,
              var(--white) 0%,
              var(--white) 35%,
              color-mix(in srgb, var(--gold) 90%, var(--white)) 50%,
              var(--white) 65%,
              var(--white) 100%
            );
            background-size: 200% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shimmer 3.5s ease infinite 1s;
          }
        }

        & .hero-sub {
          font-size: var(--text-lg);
          color: color-mix(in srgb, var(--white) 70%, transparent);
          max-width: 52ch;
          line-height: 1.7;
          margin-bottom: 2.5rem;
          animation: hero-title-in 0.8s ease 0.2s both;
        }

        & .hero-btns {
          display: flex;
          flex-wrap: wrap;
          gap: 1rem;
          margin-bottom: 4rem;
          animation: hero-title-in 0.8s ease 0.3s both;
        }

        & .btn-primary {
          background: var(--red);
          color: var(--white);
          border: none;
          padding: 0.9rem 2rem;
          border-radius: 100px;
          font-size: var(--text-base);
          font-weight: 600;
          cursor: pointer;
          text-decoration: none;
          transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);

          &:hover {
            background: color-mix(in srgb, var(--red) 85%, black);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px color-mix(in srgb, var(--red) 35%, transparent);
          }
        }

        & .btn-outline {
          background: transparent;
          color: var(--white);
          border: 1.5px solid color-mix(in srgb, var(--white) 40%, transparent);
          padding: 0.9rem 2rem;
          border-radius: 100px;
          font-size: var(--text-base);
          font-weight: 600;
          cursor: pointer;
          text-decoration: none;
          transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);

          &:hover {
            border-color: var(--white);
            background: color-mix(in srgb, var(--white) 10%, transparent);
            transform: translateY(-2px);
          }
        }

        & .hero-stats {
          display: flex;
          flex-wrap: wrap;
          gap: var(--gap-lg);
          animation: hero-title-in 0.8s ease 0.4s both;
        }

        & .stat-item {
          & .stat-num {
            font-family: 'Unbounded', sans-serif;
            font-size: var(--text-3xl);
            font-weight: 700;
            color: var(--white);
            line-height: 1;
          }
          & .stat-label {
            font-size: var(--text-xs);
            color: color-mix(in srgb, var(--white) 55%, transparent);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-top: 0.3rem;
          }
        }
      }

      /* ── TRUST STRIP ── */
      .trust-strip {
        background: var(--navy);
        border-top: 1px solid color-mix(in srgb, var(--white) 8%, transparent);
        border-bottom: 1px solid color-mix(in srgb, var(--white) 8%, transparent);
        padding-block: 1rem;
        overflow: hidden;

        & .ticker-track {
          display: flex;
          gap: 3rem;
          animation: ticker 28s linear infinite;
          width: max-content;

          & span {
            font-size: var(--text-sm);
            font-weight: 500;
            color: color-mix(in srgb, var(--white) 60%, transparent);
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 0.75rem;

            &::before {
              content: '·';
              color: var(--red);
              font-size: 1.2em;
            }
          }
        }
      }

      /* ── WHY SECTION ── */
      .why {
        background: var(--gray50);

        & .why-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: var(--gap-xl);
          align-items: center;

          @media (max-width: 768px) { grid-template-columns: 1fr; }
        }

        & .why-pillars {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: var(--gap-md);

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

        & .pillar {
          background: var(--white);
          border: 1px solid var(--gray200);
          border-radius: var(--radius-lg);
          padding: 1.5rem;
          transition: box-shadow var(--transition-base), transform var(--transition-base);

          &:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-3px);
          }

          & .pillar-icon {
            font-size: 1.75rem;
            margin-bottom: 0.75rem;
          }

          & h3 {
            font-size: var(--text-md);
            color: var(--navy);
            margin-bottom: 0.5rem;
            text-wrap: balance;
          }

          & p {
            font-size: var(--text-sm);
            color: var(--gray600);
            line-height: 1.6;
          }
        }

        & .why-image-wrap {
          position: relative;

          & img {
            border-radius: var(--radius-xl);
            width: 100%;
            aspect-ratio: 4/5;
            object-fit: cover;
          }

          & .years-badge {
            position: absolute;
            bottom: 2rem;
            left: -1.5rem;
            background: var(--red);
            color: var(--white);
            padding: 1.25rem 1.5rem;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);

            @media (max-width: 768px) { left: 1rem; }

            & .badge-num {
              font-family: 'Unbounded', sans-serif;
              font-size: var(--text-3xl);
              font-weight: 700;
              line-height: 1;
            }
            & .badge-label {
              font-size: var(--text-xs);
              opacity: 0.85;
              margin-top: 0.25rem;
            }
          }
        }
      }

      /* ── EV SECTION ── */
      .ev-section {
        background: var(--white);

        & .ev-showcase {
          display: grid;
          grid-template-columns: 2fr 1fr;
          gap: var(--gap-md);
          margin-bottom: var(--gap-xl);

          @media (max-width: 768px) { grid-template-columns: 1fr; }
        }

        & .ev-main {
          position: relative;
          border-radius: var(--radius-xl);
          overflow: hidden;
          min-height: 420px;
          background: linear-gradient(135deg, var(--navy), var(--navy2));
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          padding: 2.5rem;

          & .ev-img {
            position: absolute;
            inset: 0;
            object-fit: cover;
            opacity: 0.35;
          }

          & .ev-badge {
            position: absolute;
            top: 1.5rem;
            left: 1.5rem;
            background: var(--red);
            color: var(--white);
            padding: 0.3rem 0.85rem;
            border-radius: 100px;
            font-size: var(--text-xs);
            font-weight: 700;
          }

          & .ev-info { position: relative; z-index: 1; }
          & .ev-brand { font-size: var(--text-sm); color: color-mix(in srgb, var(--white) 60%, transparent); margin-bottom: 0.5rem; }
          & h3 { font-size: var(--text-2xl); color: var(--white); margin-bottom: 0.5rem; text-wrap: balance; }
          & p { font-size: var(--text-sm); color: color-mix(in srgb, var(--white) 65%, transparent); }
        }

        & .ev-secondary {
          display: flex;
          flex-direction: column;
          gap: var(--gap-md);
        }

        & .ev-card-sm {
          flex: 1;
          border-radius: var(--radius-lg);
          overflow: hidden;
          background: linear-gradient(135deg, var(--navy), var(--navy2));
          padding: 1.75rem;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          min-height: 180px;
          position: relative;

          & .ev-badge {
            position: absolute;
            top: 1rem;
            left: 1rem;
            background: color-mix(in srgb, var(--white) 15%, transparent);
            color: var(--white);
            padding: 0.25rem 0.7rem;
            border-radius: 100px;
            font-size: var(--text-xs);
            font-weight: 600;
          }

          & h3 { font-size: var(--text-lg); color: var(--white); text-wrap: balance; }
          & p { font-size: var(--text-xs); color: color-mix(in srgb, var(--white) 55%, transparent); margin-top: 0.25rem; }
        }

        & .ev-tabs {
          display: flex;
          gap: 0.5rem;
          flex-wrap: wrap;
          margin-bottom: var(--gap-lg);
          background: var(--gray100);
          padding: 0.4rem;
          border-radius: 100px;
          width: fit-content;

          & button {
            border: none;
            background: none;
            padding: 0.5rem 1.25rem;
            border-radius: 100px;
            font-size: var(--text-sm);
            font-weight: 500;
            cursor: pointer;
            color: var(--gray600);
            transition: all var(--transition-fast);
            white-space: nowrap;

            &.active {
              background: var(--navy);
              color: var(--white);
            }

            &:hover:not(.active) { color: var(--navy); }
          }
        }

        & .ev-cards-grid {
          container-type: inline-size;
          container-name: ev-grid;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: var(--gap-md);

          @media (max-width: 900px) { grid-template-columns: repeat(2, 1fr); }
          @media (max-width: 540px) { grid-template-columns: 1fr; }
        }

        @container ev-grid (max-width: 700px) {
          .ev-cards-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @container ev-grid (max-width: 450px) {
          .ev-cards-grid { grid-template-columns: 1fr; }
        }

        & .ev-cat-card {
          border-radius: var(--radius-lg);
          border: 1.5px solid var(--gray200);
          overflow: hidden;
          transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
          --card-grad-opacity: 0;
          position: relative;

          &::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, color-mix(in srgb, var(--red) 8%, transparent), color-mix(in srgb, var(--navy) 8%, transparent));
            opacity: var(--card-grad-opacity);
            transition: --card-grad-opacity var(--transition-base);
            pointer-events: none;
            border-radius: inherit;
          }

          &:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-4px);
            border-color: color-mix(in srgb, var(--red) 25%, transparent);
            --card-grad-opacity: 1;
          }

          & .card-img {
            height: 160px;
            background: var(--gray100);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
          }

          & .card-body {
            padding: 1.25rem;

            & .card-tag {
              font-size: var(--text-xs);
              font-weight: 600;
              color: var(--red);
              text-transform: uppercase;
              letter-spacing: 0.08em;
              margin-bottom: 0.4rem;
            }

            & h3 {
              font-size: var(--text-md);
              color: var(--navy);
              margin-bottom: 0.4rem;
              text-wrap: balance;
            }

            & p {
              font-size: var(--text-sm);
              color: var(--gray600);
              line-height: 1.5;
            }
          }
        }
      }

      /* ── SERVICES ── */
      .services {
        background: var(--navy);

        & .services-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: var(--gap-md);

          @media (max-width: 1100px) { grid-template-columns: repeat(2, 1fr); }
          @media (max-width: 600px) { grid-template-columns: 1fr; }
        }

        & .service-card {
          position: relative;
          border-radius: var(--radius-xl);
          overflow: hidden;
          min-height: 480px;
          background: color-mix(in srgb, var(--white) 5%, transparent);
          border: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          padding: 2rem;
          cursor: default;
          transition: border-color var(--transition-base);

          &:hover { border-color: color-mix(in srgb, var(--red) 50%, transparent); }

          & .service-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
          }

          & h3 {
            font-size: var(--text-xl);
            color: var(--white);
            margin-bottom: 0.75rem;
            text-wrap: balance;
          }

          & .service-desc {
            font-size: var(--text-sm);
            color: color-mix(in srgb, var(--white) 65%, transparent);
            line-height: 1.6;
            margin-bottom: 1rem;
          }

          & .service-reveal {
            max-height: 0;
            overflow: hidden;
            transition: max-height var(--transition-slow);
          }

          &:hover .service-reveal {
            max-height: 300px;
          }

          & ul {
            & li {
              font-size: var(--text-sm);
              color: color-mix(in srgb, var(--white) 75%, transparent);
              padding-block: 0.35rem;
              display: flex;
              align-items: flex-start;
              gap: 0.5rem;

              &::before {
                content: '→';
                color: var(--red);
                flex-shrink: 0;
              }
            }
          }

          & .service-num {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            font-family: 'Unbounded', sans-serif;
            font-size: var(--text-4xl);
            font-weight: 700;
            color: color-mix(in srgb, var(--white) 5%, transparent);
            line-height: 1;
            pointer-events: none;
          }
        }
      }

      /* ── COVERAGE ── */
      .coverage {
        background: var(--gray50);

        & .cov-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: var(--gap-xl);
          align-items: start;

          @media (max-width: 768px) { grid-template-columns: 1fr; }
        }

        & .countries-list {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
        }

        & .country-item {
          display: flex;
          align-items: center;
          gap: 1rem;
          padding: 1rem 1.25rem;
          border-radius: var(--radius-md);
          border: 1.5px solid var(--gray200);
          background: var(--white);
          transition: all var(--transition-base);

          &.primary {
            border-color: var(--red);
            background: color-mix(in srgb, var(--red) 4%, var(--white));
          }

          &:not(.primary):hover {
            border-color: color-mix(in srgb, var(--navy) 25%, transparent);
            box-shadow: var(--shadow-sm);
          }

          & .flag { font-size: 1.5rem; }
          & .cname { font-weight: 600; color: var(--navy); font-size: var(--text-base); }
          & .crole { font-size: var(--text-xs); color: var(--gray600); margin-left: auto; }
        }

        & .cov-right {}

        & .stats-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: var(--gap-md);
          margin-bottom: var(--gap-lg);
        }

        & .cov-stat {
          background: var(--white);
          border: 1px solid var(--gray200);
          border-radius: var(--radius-lg);
          padding: 1.5rem;
          text-align: center;

          & .cnum {
            font-family: 'Unbounded', sans-serif;
            font-size: var(--text-3xl);
            font-weight: 700;
            color: var(--navy);
            line-height: 1;
          }
          & .clabel {
            font-size: var(--text-xs);
            color: var(--gray600);
            margin-top: 0.4rem;
            text-transform: uppercase;
            letter-spacing: 0.07em;
          }
        }

        & .hub-card {
          background: var(--navy);
          border-radius: var(--radius-xl);
          padding: 2rem;
          color: var(--white);
          position: relative;
          overflow: hidden;

          &::before {
            content: '🏙️';
            position: absolute;
            right: 1.5rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 4rem;
            opacity: 0.15;
          }

          & .hub-tag {
            font-size: var(--text-xs);
            font-weight: 700;
            color: var(--gold);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.5rem;
          }

          & h3 { font-size: var(--text-xl); color: var(--white); margin-bottom: 0.75rem; text-wrap: balance; }
          & p { font-size: var(--text-sm); color: color-mix(in srgb, var(--white) 65%, transparent); line-height: 1.6; }
        }
      }

      /* ── PARTNERS STRIP ── */
      .partners {
        background: var(--white);
        border-top: 1px solid var(--gray200);
        border-bottom: 1px solid var(--gray200);
        padding-block: 1.25rem;
        overflow: hidden;

        & .ticker-track {
          display: flex;
          gap: 4rem;
          animation: ticker 32s linear infinite;
          width: max-content;

          & span {
            font-family: 'Unbounded', sans-serif;
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--gray400);
            white-space: nowrap;
            transition: color var(--transition-fast);

            &:hover { color: var(--navy); }
          }
        }
      }

      /* ── CTA BAND ── */
      .cta-band {
        background: var(--navy2);
        position: relative;
        overflow: hidden;
        text-align: center;

        &::before {
          content: '';
          position: absolute;
          inset: 0;
          background-image:
            linear-gradient(color-mix(in srgb, var(--white) 4%, transparent) 1px, transparent 1px),
            linear-gradient(90deg, color-mix(in srgb, var(--white) 4%, transparent) 1px, transparent 1px);
          background-size: 60px 60px;
        }

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

        & h2 {
          font-size: var(--text-4xl);
          color: var(--white);
          max-width: 20ch;
          margin-inline: auto;
          margin-bottom: 1.5rem;
          text-wrap: balance;
        }

        & p {
          font-size: var(--text-lg);
          color: color-mix(in srgb, var(--white) 65%, transparent);
          max-width: 50ch;
          margin-inline: auto;
          margin-bottom: 2.5rem;
        }

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

        & .btn-gold {
          background: var(--gold);
          color: var(--white);
          border: none;
          padding: 0.9rem 2rem;
          border-radius: 100px;
          font-size: var(--text-base);
          font-weight: 600;
          cursor: pointer;
          text-decoration: none;
          transition: background var(--transition-fast), transform var(--transition-fast);

          &:hover { background: color-mix(in srgb, var(--gold) 85%, black); transform: translateY(-2px); }
        }
      }

      /* ── CONTACT ── */
      .contact {
        background: var(--white);

        & .contact-grid {
          display: grid;
          grid-template-columns: 3fr 2fr;
          gap: var(--gap-xl);
          align-items: start;

          @media (max-width: 900px) { grid-template-columns: 1fr; }
        }

        & .contact-form-wrap {
          background: var(--gray50);
          border: 1px solid var(--gray200);
          border-radius: var(--radius-xl);
          padding: clamp(1.5rem, 4vw, 2.5rem);
        }

        & .form-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: var(--gap-sm);

          @media (max-width: 540px) { grid-template-columns: 1fr; }
        }

        & .form-group {
          margin-bottom: var(--gap-sm);
          position: relative;

          & label {
            display: block;
            font-size: var(--text-sm);
            font-weight: 500;
            color: var(--navy);
            margin-bottom: 0.4rem;
          }

          & input, & select, & textarea {
            width: 100%;
            padding: 0.7rem 1rem;
            border: 1.5px solid var(--gray200);
            border-radius: var(--radius-sm);
            background: var(--white);
            font-size: var(--text-base);
            color: var(--gray800);
            transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

            &:focus {
              border-color: var(--navy);
              box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 10%, transparent);
              outline: none;
            }

            &.error { border-color: var(--red); }
            &.valid { border-color: #22c55e; }
          }

          & textarea {
            field-sizing: content;
            min-height: 120px;
            resize: vertical;
          }

          & .field-error {
            font-size: var(--text-xs);
            color: var(--red);
            margin-top: 0.25rem;
            display: none;
          }

          &.has-error .field-error { display: block; }
        }

        & .form-submit {
          width: 100%;
          background: var(--red);
          color: var(--white);
          border: none;
          padding: 0.9rem 2rem;
          border-radius: 100px;
          font-size: var(--text-base);
          font-weight: 600;
          cursor: pointer;
          transition: background var(--transition-fast), transform var(--transition-fast);
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          position: relative;
          overflow: hidden;

          &:hover:not(:disabled) { background: color-mix(in srgb, var(--red) 85%, black); transform: translateY(-1px); }
          &:disabled { opacity: 0.7; cursor: wait; }

          & .spinner {
            width: 18px;
            height: 18px;
            border: 2px solid color-mix(in srgb, var(--white) 40%, transparent);
            border-top-color: var(--white);
            border-radius: 50%;
            animation: spin 0.7s linear infinite;
            display: none;
          }

          &.loading .spinner { display: block; }
          &.loading .btn-label { display: none; }
        }

        & .form-success {
          display: none;
          text-align: center;
          padding: 2rem;

          &.visible { display: block; }

          & .checkmark {
            width: 56px;
            height: 56px;
            background: #22c55e;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-inline: auto;
            margin-bottom: 1rem;
            animation: check-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

            & svg {
              stroke: white;
              stroke-width: 3;
              fill: none;
              stroke-dasharray: 30;
              stroke-dashoffset: 30;
              animation: draw-check 0.4s ease 0.3s forwards;
            }
          }

          & h3 { font-size: var(--text-xl); color: var(--navy); margin-bottom: 0.5rem; }
          & p { color: var(--gray600); font-size: var(--text-sm); }
        }

        & .contact-details {
          display: flex;
          flex-direction: column;
          gap: var(--gap-md);
        }

        & .detail-card {
          background: var(--gray50);
          border: 1px solid var(--gray200);
          border-radius: var(--radius-lg);
          padding: 1.5rem;

          & .detail-icon { font-size: 1.5rem; margin-bottom: 0.75rem; }
          & h3 { font-size: var(--text-base); font-weight: 600; color: var(--navy); margin-bottom: 0.4rem; }
          & p, & a { font-size: var(--text-sm); color: var(--gray600); line-height: 1.6; }
          & a:hover { color: var(--red); }
        }
      }

      /* ── FOOTER ── */
      .footer {
        background: var(--navy2);
        color: var(--white);
        padding-block: var(--gap-2xl) var(--gap-lg);

        & .footer-grid {
          display: grid;
          grid-template-columns: 2fr 1fr 1fr 1fr;
          gap: var(--gap-lg);
          margin-bottom: var(--gap-xl);

          @media (max-width: 900px) { grid-template-columns: 1fr 1fr; }
          @media (max-width: 540px) { grid-template-columns: 1fr; }
        }

        & .footer-brand {
          & img { height: 44px; margin-bottom: 1rem; }
          & p {
            font-size: var(--text-sm);
            color: color-mix(in srgb, var(--white) 55%, transparent);
            line-height: 1.7;
            max-width: 30ch;
          }
        }

        & .footer-col {
          & h4 {
            font-size: var(--text-sm);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: color-mix(in srgb, var(--white) 50%, transparent);
            margin-bottom: 1rem;
          }
          & ul {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;

            & a {
              font-size: var(--text-sm);
              color: color-mix(in srgb, var(--white) 65%, transparent);
              transition: color var(--transition-fast);

              &:hover { color: var(--white); }
            }
          }
        }

        & .footer-bottom {
          border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
          padding-top: var(--gap-md);
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 0.5rem;

          & p { font-size: var(--text-xs); color: color-mix(in srgb, var(--white) 40%, transparent); }
        }
      }

    } /* end @layer components */

    /* ============================================================
       ANIMATIONS
    ============================================================ */
    @layer animations {

      @keyframes shimmer {
        0%   { background-position: 200% center; }
        100% { background-position: -200% center; }
      }

      @keyframes ticker {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
      }

      @keyframes pill-in {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      @keyframes hero-title-in {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      @keyframes pulse-dot {
        0%, 100% { transform: scale(1); opacity: 1; }
        50%       { transform: scale(1.5); opacity: 0.6; }
      }

      @keyframes spin {
        to { transform: rotate(360deg); }
      }

      @keyframes check-pop {
        from { transform: scale(0); opacity: 0; }
        to   { transform: scale(1); opacity: 1; }
      }

      @keyframes draw-check {
        to { stroke-dashoffset: 0; }
      }

      @keyframes fade-up {
        from { opacity: 0; transform: translateY(30px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      @keyframes parallax-bg {
        from { transform: translateY(0px); }
        to   { transform: translateY(80px); }
      }

      /* Scroll-driven reveal */
      @supports (animation-timeline: view()) {
        .reveal {
          animation: fade-up linear both;
          animation-timeline: view();
          animation-range: entry 0% entry 30%;
        }
      }

      /* Fallback handled in JS for browsers without scroll-driven animations */
      @supports not (animation-timeline: view()) {
        .reveal {
          opacity: 0;
          transform: translateY(30px);
          transition: opacity 0.6s ease, transform 0.6s ease;
          &.revealed { opacity: 1; transform: translateY(0); }
        }
      }

      /* Reduced motion */
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
        .reveal {
          opacity: 1 !important;
          transform: none !important;
        }
      }
    }

    /* ============================================================
       UTILITIES
    ============================================================ */
    @layer utilities {
      .sr-only {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
      }
      .text-center { text-align: center; }
      .mb-0 { margin-bottom: 0; }
      [data-lang-en] { display: none; }
      .lang-en [data-lang-sr] { display: none; }
      .lang-en [data-lang-en] { display: revert; }
    }