@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('/assets/fonts/syne-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('/assets/fonts/syne-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ========== ROOT & RESETS ========== */
    :root {
      --bg: #030303;
      --text: #EAEAEA;
      --accent: #7B61FF;
      --accent-glow: #A78BFA;
      --border: rgba(123, 97, 255, 0.12);
      --muted: rgba(234, 234, 234, 0.5);
      --fs-hero: clamp(1.5rem, 7.5vw, 10rem);
      --fs-h2: clamp(1.8rem, 4.5vw, 4.5rem);
      --fs-h3: clamp(1.2rem, 2vw, 2rem);
      --fs-body: clamp(0.875rem, 1vw, 1.125rem);
      --fs-label: 0.75rem;
    }

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

    [hidden] {
      display: none !important;
    }

    html {
      background: var(--bg);
      color: var(--text);
      cursor: none;
      overflow-x: hidden;
    }

    body {
      background: var(--bg);
      font-family: 'JetBrains Mono', monospace;
      overflow-x: hidden;
      min-width: 320px;
    }

    body.menu-open {
      overflow: hidden;
    }

    ::selection {
      background: var(--accent);
      color: var(--bg);
    }

    .skip-link {
      position: fixed;
      top: 0.75rem;
      left: 0.75rem;
      z-index: 1000000;
      padding: 0.8rem 1rem;
      border-radius: 999px;
      background: var(--accent);
      color: #fff;
      font-size: 0.72rem;
      font-weight: 500;
      text-decoration: none;
      transform: translateY(-160%);
      transition: transform 0.2s ease;
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    a:focus-visible,
    button:focus-visible {
      outline: 2px solid var(--accent-glow);
      outline-offset: 4px;
      border-radius: 4px;
    }

    /* ========== CUSTOM CURSOR ========== */
    .cursor-outer {
      position: fixed;
      top: 0;
      left: 0;
      width: 40px;
      height: 40px;
      border: 1.5px solid var(--accent);
      border-radius: 50%;
      pointer-events: none;
      z-index: 99999;
      mix-blend-mode: difference;
      transform: translate(-50%, -50%);
      transition: width 0.3s cubic-bezier(0.25, 0, 0, 1), height 0.3s cubic-bezier(0.25, 0, 0, 1), border-color 0.3s;
    }

    .cursor-outer.hovering {
      width: 70px;
      height: 70px;
      border-color: var(--accent-glow);
      background: rgba(123, 97, 255, 0.06);
    }

    .cursor-dot {
      position: fixed;
      top: 0;
      left: 0;
      width: 6px;
      height: 6px;
      background: var(--accent);
      border-radius: 50%;
      pointer-events: none;
      z-index: 100000;
      transform: translate(-50%, -50%);
    }

    @media (hover: none),
    (pointer: coarse) {

      .cursor-outer,
      .cursor-dot {
        display: none !important;
      }

      html {
        cursor: auto;
      }
    }

    /* ========== GRID OVERLAY ========== */
    .grid-overlay {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 2;
      background-image:
        repeating-linear-gradient(90deg, rgba(123, 97, 255, 0.035) 0, rgba(123, 97, 255, 0.035) 1px, transparent 1px, transparent),
        repeating-linear-gradient(0deg, rgba(123, 97, 255, 0.035) 0, rgba(123, 97, 255, 0.035) 1px, transparent 1px, transparent);
      background-size: 80px 80px;
    }

    /* ========== GRAIN OVERLAY ========== */
    .grain-overlay {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 10000;
      opacity: 0.035;
    }

    .grain-overlay::after {
      content: '';
      position: absolute;
      inset: -200%;
      width: 400%;
      height: 400%;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      background-size: 200px 200px;
      animation: grain 0.4s steps(1) infinite;
    }

    @keyframes grain {

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

      10% {
        transform: translate(-5%, -10%);
      }

      30% {
        transform: translate(3%, -15%);
      }

      50% {
        transform: translate(12%, 9%);
      }

      70% {
        transform: translate(9%, 4%);
      }

      90% {
        transform: translate(-1%, 7%);
      }
    }

    /* ========== NAVIGATION ========== */
    .nav-main {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10001;
      padding: 0 clamp(1.5rem, 4vw, 4rem);
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      backdrop-filter: blur(34px) saturate(1.45);
      -webkit-backdrop-filter: blur(34px) saturate(1.45);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(3, 3, 3, 0.10);
      border-bottom: 1px solid rgba(255, 255, 255, 0.085);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 18px 45px rgba(0, 0, 0, 0.12);
    }

    .nav-main::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
      opacity: 0.24;
    }

    .nav-logo {
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: 1.3rem;
      letter-spacing: 0.08em;
      color: var(--text);
      text-decoration: none;
    }

    .nav-logo span {
      color: var(--accent);
    }

    .nav-links {
      display: flex;
      gap: 2.5rem;
      list-style: none;
      align-items: center;
    }

    .nav-links a {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(234, 234, 234, 0.72);
      text-decoration: none;
      position: relative;
      padding-bottom: 4px;
      text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
      transition: color 0.3s, text-shadow 0.3s;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.4s cubic-bezier(0.25, 0, 0, 1);
    }

    .nav-links a:hover {
      color: var(--text);
      text-shadow: 0 0 18px rgba(167, 139, 250, 0.42);
    }

    .nav-links a:hover::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    /* Mobile nav toggle */
    .nav-toggle {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      pointer-events: auto;
      padding: 8px;
    }

    .nav-toggle span {
      display: block;
      width: 24px;
      height: 1.5px;
      background: var(--text);
      transition: 0.3s;
    }

    .nav-toggle.active span:nth-child(1) {
      transform: rotate(45deg) translate(4px, 4px)
    }

    .nav-toggle.active span:nth-child(2) {
      opacity: 0
    }

    .nav-toggle.active span:nth-child(3) {
      transform: rotate(-45deg) translate(4px, -4px)
    }

    .nav-mobile {
      position: fixed;
      inset: 0;
      z-index: 999;
      background: rgba(3, 3, 3, 0.95);
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s cubic-bezier(.25, 0, 0, 1)
    }

    .nav-mobile.open {
      opacity: 1;
      pointer-events: all
    }

    .nav-mobile a {
      font-family: 'Syne', sans-serif;
      font-size: clamp(1.5rem, 5vw, 2.5rem);
      font-weight: 800;
      text-transform: uppercase;
      color: var(--text);
      text-decoration: none;
      letter-spacing: .05em;
      opacity: .6;
      transition: opacity .3s, color .3s
    }

    .nav-mobile a:hover {
      opacity: 1;
      color: var(--accent)
    }

    /* Language Switcher */
    .language-nav {
      display: inline-flex;
      align-items: center;
      gap: 0.15rem;
      padding: 0.18rem;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.035);
      backdrop-filter: blur(18px) saturate(1.25);
      -webkit-backdrop-filter: blur(18px) saturate(1.25);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075);
    }

    .language-link {
      min-width: 2rem;
      padding: 0.32rem 0.48rem !important;
      border-radius: 100px;
      font-size: 0.55rem !important;
      letter-spacing: 0.1em !important;
      text-align: center;
      transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s !important;
    }

    .language-link::after {
      display: none;
    }

    .language-link:hover,
    .language-link[aria-current="page"] {
      background: rgba(255, 255, 255, 0.075) !important;
      color: var(--text) !important;
      box-shadow: 0 0 22px rgba(123, 97, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .language-nav-mobile {
      margin-top: 1rem;
    }

    .language-nav-mobile .language-link {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem !important;
      opacity: 0.75;
    }

    @media (max-width: 768px) {
      .nav-links {
        display: none;
      }

      .nav-toggle {
        display: flex;
      }

      .nav-main {
        height: 72px;
      }
    }

    /* ========== HERO ========== */
    .hero-section {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 clamp(1.5rem, 4vw, 5rem);
      overflow: hidden;
    }

    .hero-section::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        linear-gradient(90deg, rgba(3, 3, 3, 0.98) 0%, rgba(3, 3, 3, 0.72) 42%, rgba(3, 3, 3, 0.22) 100%),
        linear-gradient(180deg, rgba(3, 3, 3, 0.08) 0%, rgba(3, 3, 3, 0.82) 100%),
        url('/images/frontier-hero.webp') center right / cover no-repeat;
      opacity: 0.95;
    }

    .hero-section::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      background: radial-gradient(circle at 74% 46%, rgba(123, 97, 255, 0.18), transparent 34%);
      pointer-events: none;
    }

    .hero-canvas {
      position: absolute;
      inset: 0;
      z-index: 2;
      opacity: 0.60;
      mix-blend-mode: screen;
    }

    @media (max-width: 768px) {
      .hero-canvas {
        opacity: 0.54;
      }
    }

    .hero-content {
      position: relative;
      z-index: 5;
      max-width: 1400px;
      margin: 0 auto;
      width: 100%;
      padding-top: 80px;
    }

    .hero-overline {
      font-family: 'JetBrains Mono', monospace;
      font-size: var(--fs-label);
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 2rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .hero-overline::before {
      content: '';
      width: 40px;
      height: 1px;
      background: var(--accent);
    }

    .hero-title {
      font-family: 'Syne', sans-serif;
      font-size: var(--fs-hero);
      font-weight: 800;
      line-height: 0.92;
      letter-spacing: -0.04em;
      text-transform: uppercase;
      margin-bottom: 2.5rem;
    }

    .hero-title .line {
      overflow: hidden;
      display: block;
      padding: 0.1em 0.05em;
      margin: -0.1em -0.05em;
    }

    .hero-title .line-inner {
      display: block;
    }

    .hero-title .mono-word {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 400;
      font-style: italic;
      color: var(--accent-glow);
      font-size: 0.75em;
    }

    .hero-subtitle {
      font-size: var(--fs-body);
      color: var(--muted);
      max-width: 50ch;
      line-height: 1.7;
      margin-bottom: 3rem;
    }

    .hero-subtitle .line {
      overflow: hidden;
      display: block;
    }

    .hero-subtitle .line-inner {
      display: block;
    }

    /* CTA Button */
    .btn-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      padding: 1rem 2.5rem;
      border: 1px solid rgba(123, 97, 255, 0.4);
      border-radius: 100px;
      background: transparent;
      color: var(--text);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: none;
      position: relative;
      overflow: hidden;
      transition: color 0.4s cubic-bezier(0.25, 0, 0, 1), border-color 0.4s;
    }

    .btn-cta .btn-bg {
      position: absolute;
      inset: 0;
      background: var(--accent);
      border-radius: 100px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.5s cubic-bezier(0.25, 0, 0, 1);
      z-index: -1;
    }

    .btn-cta:hover .btn-bg {
      transform: scaleX(1);
    }

    .btn-cta:hover {
      color: var(--bg);
      border-color: var(--accent);
    }

    .btn-cta .arrow {
      transition: transform 0.3s cubic-bezier(0.25, 0, 0, 1);
    }

    .btn-cta:hover .arrow {
      transform: translate(4px, -4px);
    }

    /* Scroll Indicator */
    .scroll-indicator {
      position: absolute;
      bottom: 3rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      z-index: 5;
    }

    .scroll-indicator span {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(234, 234, 234, 0.3);
    }

    .scroll-line {
      width: 1px;
      height: 50px;
      background: linear-gradient(to bottom, var(--accent), transparent);
      animation: scrollPulse 2s ease-in-out infinite;
    }

    @keyframes scrollPulse {

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

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

    /* ========== TICKER / MARQUEE ========== */
    .ticker-section {
      border-top: 1px solid rgba(123, 97, 255, 0.08);
      border-bottom: 1px solid rgba(123, 97, 255, 0.08);
      padding: 1.5rem 0;
      overflow: hidden;
      position: relative;
      z-index: 5;
    }

    .ticker-track {
      display: flex;
      width: max-content;
      gap: 0;
    }

    .ticker-content {
      display: flex;
      align-items: center;
      gap: 0;
      flex-shrink: 0;
      padding-right: 0;
    }

    .ticker-item {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(0.7rem, 0.9vw, 0.85rem);
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(234, 234, 234, 0.4);
      white-space: nowrap;
      padding: 0 1.5rem;
      transition: color 0.3s;
    }

    .ticker-item:hover {
      color: var(--accent);
    }

    .ticker-dot {
      width: 4px;
      height: 4px;
      background: var(--accent);
      border-radius: 50%;
      flex-shrink: 0;
      opacity: 0.5;
    }

    /* ========== ABOUT SECTION ========== */
    .about-section {
      padding: clamp(6rem, 15vh, 14rem) clamp(1.5rem, 4vw, 5rem);
      position: relative;
      z-index: 5;
    }

    .about-inner {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(3rem, 6vw, 8rem);
      align-items: start;
    }

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

    .section-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: var(--fs-label);
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 2rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .section-label::before {
      content: '';
      width: 30px;
      height: 1px;
      background: var(--accent);
    }

    .about-heading {
      font-family: 'Syne', sans-serif;
      font-size: var(--fs-h2);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.03em;
      margin-bottom: 2rem;
    }

    .about-heading .line {
      overflow: hidden;
      display: block;
    }

    .about-heading .line-inner {
      display: block;
    }

    .about-heading em {
      font-family: 'JetBrains Mono', monospace;
      font-style: italic;
      font-weight: 400;
      color: var(--accent-glow);
      font-size: 0.8em;
    }

    .about-body {
      font-size: var(--fs-body);
      color: var(--muted);
      line-height: 1.8;
      max-width: 50ch;
    }

    .about-body .line {
      overflow: hidden;
      display: block;
    }

    .about-body .line-inner {
      display: block;
    }

    .stat-row {
      display: flex;
      gap: 3rem;
      margin-top: 3rem;
      flex-wrap: wrap;
    }

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

    .stat-number {
      font-family: 'Syne', sans-serif;
      font-size: 2.5rem;
      font-weight: 800;
      color: var(--accent);
      line-height: 1;
    }

    .stat-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 0.5rem;
    }

    .frontier-image-card {
      margin-top: 3rem;
      border: 1px solid rgba(123, 97, 255, 0.18);
      border-radius: 20px;
      overflow: hidden;
      background: rgba(123, 97, 255, 0.035);
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
    }

    .frontier-image-card img {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      opacity: 0.92;
      filter: saturate(1.04) contrast(1.04);
    }

    .services-cta {
      grid-column: 1 / -1;
      margin-top: 2rem;
      text-align: center;
    }

    .services-cta .btn-cta {
      display: inline-flex;
    }

    .frontier-image-caption {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1rem 1.1rem;
      color: var(--muted);
      font-size: 0.68rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      border-top: 1px solid rgba(123, 97, 255, 0.12);
    }

    .frontier-image-caption span:last-child {
      color: var(--accent-glow);
    }

    /* ========== SERVICE CARDS ========== */
    .services-grid {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .service-card {
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      background: rgba(123, 97, 255, 0.03);
      border: 1px solid rgba(123, 97, 255, 0.1);
      border-radius: 16px;
      padding: 2rem 2.2rem;
      position: relative;
      overflow: hidden;
      transition: border-color 0.4s, background 0.4s;
    }

    .service-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 0%, rgba(123, 97, 255, 0.06) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 0.5s;
    }

    .service-card:hover {
      border-color: rgba(123, 97, 255, 0.25);
      background: rgba(123, 97, 255, 0.05);
    }

    .service-card:hover::before {
      opacity: 1;
    }

    .service-card-index {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.2em;
      color: rgba(123, 97, 255, 0.5);
      text-transform: uppercase;
      margin-bottom: 1rem;
    }

    .service-card-title {
      font-family: 'Syne', sans-serif;
      font-size: var(--fs-h3);
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: 0.75rem;
    }

    .service-card-desc {
      font-size: 0.8rem;
      color: var(--muted);
      line-height: 1.7;
      max-width: 40ch;
    }

    .service-card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 1.2rem;
    }

    .service-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.3rem 0.7rem;
      border: 1px solid rgba(123, 97, 255, 0.15);
      border-radius: 100px;
      color: rgba(234, 234, 234, 0.5);
    }

    /* ========== WORK / METRICS SECTION ========== */
    .metrics-section {
      padding: clamp(6rem, 15vh, 14rem) clamp(1.5rem, 4vw, 5rem);
      position: relative;
      z-index: 5;
      border-top: 1px solid rgba(123, 97, 255, 0.06);
      overflow: hidden;
    }

    .metrics-inner {
      max-width: 1400px;
      margin: 0 auto;
      overflow: hidden;
    }

    .metrics-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2px;
      margin-top: 4rem;
      overflow: hidden;
    }

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

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

    .metric-card {
      border: 1px solid rgba(123, 97, 255, 0.06);
      padding: clamp(1.5rem, 3vw, 3rem) clamp(0.75rem, 2vw, 1.5rem);
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: border-color 0.4s;
    }

    .metric-card:hover {
      border-color: rgba(123, 97, 255, 0.2);
    }

    .metric-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 50%, rgba(123, 97, 255, 0.04) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.4s;
    }

    .metric-card:hover::after {
      opacity: 1;
    }

    .metric-value {
      font-family: 'Syne', sans-serif;
      font-size: clamp(1.6rem, 3vw, 3.2rem);
      font-weight: 800;
      color: var(--text);
      line-height: 1.2;
      position: relative;
      z-index: 1;
    }

    .metric-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(0.5rem, 0.6vw, 0.6rem);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 1rem;
      position: relative;
      z-index: 1;
      word-break: break-word;
    }

    /* ========== PROCESS SECTION ========== */
    .process-section {
      padding: clamp(6rem, 15vh, 14rem) clamp(1.5rem, 4vw, 5rem);
      position: relative;
      z-index: 5;
    }

    .process-inner {
      max-width: 1400px;
      margin: 0 auto;
    }

    .process-heading {
      font-family: 'Syne', sans-serif;
      font-size: var(--fs-h2);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.03em;
      margin-bottom: 5rem;
      max-width: 18ch;
    }

    .process-heading .line {
      overflow: hidden;
      display: block;
    }

    .process-heading .line-inner {
      display: block;
    }

    .process-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }

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

    .process-step {
      padding: 2.5rem 0;
      border-top: 1px solid rgba(123, 97, 255, 0.1);
      position: relative;
    }

    .process-step:hover {
      border-top-color: var(--accent);
    }

    .step-number {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.2em;
      color: var(--accent);
      margin-bottom: 1.5rem;
    }

    .step-title {
      font-family: 'Syne', sans-serif;
      font-size: 1.4rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: 1rem;
    }

    .step-desc {
      font-size: 0.8rem;
      color: var(--muted);
      line-height: 1.7;
      max-width: 35ch;
    }

    /* ========== CTA SECTION ========== */
    .cta-section {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: clamp(6rem, 15vh, 14rem) clamp(1.5rem, 4vw, 5rem);
      overflow: hidden;
      z-index: 5;
      background: radial-gradient(ellipse at 50% 40%, rgba(123, 97, 255, 0.04) 0%, transparent 60%);
    }

    .cta-canvas {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .cta-content {
      position: relative;
      z-index: 5;
    }

    .cta-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: var(--fs-label);
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 3rem;
    }

    .cta-heading {
      font-family: 'Syne', sans-serif;
      font-size: clamp(2.5rem, 7vw, 7rem);
      font-weight: 800;
      line-height: 0.95;
      letter-spacing: -0.04em;
      text-transform: uppercase;
      margin-bottom: 2rem;
    }

    .cta-heading .line {
      overflow: hidden;
      display: block;
    }

    .cta-heading .line-inner {
      display: block;
    }

    .cta-subtext {
      font-size: var(--fs-body);
      color: var(--muted);
      max-width: 45ch;
      margin: 0 auto 3rem;
      line-height: 1.7;
    }

    .cta-big-btn {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      padding: 1.4rem 3.5rem;
      border: 1px solid rgba(123, 97, 255, 0.4);
      border-radius: 100px;
      background: transparent;
      color: var(--text);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.9rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: none;
      position: relative;
      overflow: hidden;
      transition: color 0.4s cubic-bezier(0.25, 0, 0, 1), border-color 0.4s, box-shadow 0.4s;
    }

    .cta-big-btn .btn-bg {
      position: absolute;
      inset: 0;
      background: var(--accent);
      border-radius: 100px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.5s cubic-bezier(0.25, 0, 0, 1);
      z-index: -1;
    }

    .cta-big-btn:hover .btn-bg {
      transform: scaleX(1);
    }

    .cta-big-btn:hover {
      color: var(--bg);
      border-color: var(--accent);
      box-shadow: 0 0 60px rgba(123, 97, 255, 0.2), 0 0 120px rgba(123, 97, 255, 0.1);
    }

    .cta-contact {
      margin-top: 4rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }

    .cta-email {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.8rem;
      letter-spacing: 0.05em;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.3s;
    }

    .cta-email:hover {
      color: var(--accent);
    }

    .cta-availability {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4ade80;
      box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {

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

      50% {
        opacity: 0.5;
        transform: scale(0.8);
      }
    }

    /* ========== FOOTER ========== */
    .footer {
      position: relative;
      z-index: 5;
      border-top: 1px solid rgba(123, 97, 255, 0.08);
      padding: 0 clamp(1.5rem, 4vw, 5rem);
      overflow: hidden;
    }

    .footer-border-anim {
      position: absolute;
      top: -1px;
      left: 0;
      width: 100%;
      height: 1px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
    }

    .footer-brand {
      padding: clamp(4rem, 10vh, 8rem) 0 clamp(3rem, 6vh, 5rem);
      max-width: 1400px;
      margin: 0 auto;
    }

    .footer-brand-text {
      font-family: 'Syne', sans-serif;
      font-size: clamp(4rem, 14vw, 12rem);
      font-weight: 800;
      line-height: 0.85;
      letter-spacing: -0.05em;
      text-transform: uppercase;
      color: var(--text);
      opacity: 0.08;
      transition: opacity 0.6s;
    }

    .footer-brand:hover .footer-brand-text {
      opacity: 0.15;
    }

    .footer-grid {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3rem;
      padding-bottom: clamp(3rem, 6vh, 5rem);
    }

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

    .footer-col-title {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 1.5rem;
      position: relative;
      padding-bottom: 0.75rem;
    }

    .footer-col-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 20px;
      height: 1px;
      background: var(--accent);
    }

    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .footer-col a {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      color: rgba(234, 234, 234, 0.4);
      text-decoration: none;
      letter-spacing: 0.05em;
      display: inline-block;
      transition: color 0.3s, transform 0.3s cubic-bezier(0.25, 0, 0, 1);
    }

    .footer-col a:hover {
      color: var(--text);
      transform: translateX(6px);
    }

    .footer-bottom {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2rem 0;
      border-top: 1px solid rgba(123, 97, 255, 0.06);
      flex-wrap: wrap;
      gap: 1rem;
    }

    .footer-copy {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.1em;
      color: rgba(234, 234, 234, 0.25);
    }

    /* ========== PREMIUM LOADER ========== */
    .page-loader {
      position: fixed;
      inset: 0;
      z-index: 999999;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden
    }

    .loader-grid {
      position: absolute;
      inset: 0;
      background-image: repeating-linear-gradient(90deg, rgba(123, 97, 255, 0.03) 0, rgba(123, 97, 255, 0.03) 1px, transparent 1px, transparent), repeating-linear-gradient(0deg, rgba(123, 97, 255, 0.03) 0, rgba(123, 97, 255, 0.03) 1px, transparent 1px, transparent);
      background-size: 60px 60px;
      opacity: 0;
      animation: loaderGridIn .8s ease-out forwards
    }

    @keyframes loaderGridIn {
      to {
        opacity: 1
      }
    }

    .loader-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(100px);
      pointer-events: none;
      opacity: 0;
      animation: loaderOrbIn 1.2s ease-out forwards
    }

    .loader-orb-1 {
      width: 400px;
      height: 400px;
      background: rgba(123, 97, 255, 0.08);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation-delay: 0s
    }

    .loader-orb-2 {
      width: 200px;
      height: 200px;
      background: rgba(167, 139, 250, 0.06);
      top: 30%;
      right: 20%;
      animation-delay: .3s
    }

    @keyframes loaderOrbIn {
      to {
        opacity: 1
      }
    }

    .loader-scan {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(123, 97, 255, 0.4), transparent);
      animation: loaderScan 2s linear infinite;
      opacity: 0.6
    }

    @keyframes loaderScan {
      0% {
        top: 0
      }

      100% {
        top: 100%
      }
    }

    .loader-center {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2.5rem
    }

    .loader-logo {
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      letter-spacing: .08em;
      color: var(--text);
      text-transform: uppercase;
      position: relative;
      overflow: hidden
    }

    .loader-logo span {
      color: var(--accent);
      text-shadow: 0 0 30px rgba(123, 97, 255, 0.5)
    }

    .loader-logo-glitch {
      position: absolute;
      inset: 0;
      opacity: 0
    }

    @keyframes glitch1 {

      0%,
      100% {
        clip-path: inset(40% 0 50% 0);
        transform: translate(-3px, 2px)
      }

      25% {
        clip-path: inset(10% 0 80% 0);
        transform: translate(3px, -1px)
      }

      50% {
        clip-path: inset(60% 0 10% 0);
        transform: translate(-2px, 3px)
      }

      75% {
        clip-path: inset(20% 0 60% 0);
        transform: translate(2px, -2px)
      }
    }

    @keyframes glitch2 {

      0%,
      100% {
        clip-path: inset(50% 0 30% 0);
        transform: translate(3px, -2px)
      }

      25% {
        clip-path: inset(80% 0 5% 0);
        transform: translate(-3px, 1px)
      }

      50% {
        clip-path: inset(5% 0 70% 0);
        transform: translate(2px, -3px)
      }

      75% {
        clip-path: inset(70% 0 15% 0);
        transform: translate(-2px, 2px)
      }
    }

    .loader-logo-glitch:nth-child(2) {
      color: rgba(123, 97, 255, 0.7);
      animation: glitch1 .3s ease-in-out infinite alternate
    }

    .loader-logo-glitch:nth-child(3) {
      color: rgba(167, 139, 250, 0.5);
      animation: glitch2 .3s ease-in-out infinite alternate-reverse
    }

    .loader-progress {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.2rem;
      width: clamp(200px, 40vw, 350px)
    }

    .loader-percent {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(1rem, 2vw, 1.4rem);
      font-weight: 400;
      color: rgba(234, 234, 234, 0.6);
      letter-spacing: .15em
    }

    .loader-percent em {
      font-style: normal;
      color: var(--accent);
      font-weight: 500
    }

    .loader-bar {
      width: 100%;
      height: 2px;
      background: rgba(123, 97, 255, 0.1);
      position: relative;
      overflow: hidden;
      border-radius: 2px
    }

    .loader-bar-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--accent), var(--accent-glow));
      border-radius: 2px;
      box-shadow: 0 0 12px rgba(123, 97, 255, 0.5), 0 0 30px rgba(123, 97, 255, 0.2)
    }

    .loader-bar::after {
      content: '';
      position: absolute;
      top: -4px;
      right: 0;
      width: 8px;
      height: 10px;
      background: var(--accent);
      border-radius: 2px;
      box-shadow: 0 0 15px rgba(123, 97, 255, 0.8);
      opacity: 0;
      transition: opacity .3s
    }

    .loader-bar.active::after {
      opacity: 1
    }

    .loader-console {
      display: flex;
      flex-direction: column;
      gap: .4rem;
      width: clamp(200px, 40vw, 350px);
      margin-top: .5rem
    }

    .loader-console-line {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(.55rem, .7vw, .65rem);
      letter-spacing: .05em;
      color: rgba(234, 234, 234, 0.2);
      opacity: 0;
      transform: translateY(8px);
      display: flex;
      align-items: center;
      gap: .5rem
    }

    .loader-console-line .tag {
      color: rgba(123, 97, 255, 0.4);
      font-weight: 500
    }

    .loader-console-line.done {
      color: rgba(123, 97, 255, 0.5)
    }

    .loader-console-line.done .tag {
      color: var(--accent)
    }

    .loader-status {
      font-family: 'JetBrains Mono', monospace;
      font-size: .6rem;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: rgba(123, 97, 255, 0.3);
      margin-top: 1rem;
      opacity: 0
    }

    .loader-status .blink {
      animation: statusBlink 1s step-end infinite
    }

    @keyframes statusBlink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: 0
      }
    }

    /* ========== REDUCED MOTION ========== */
    @media (prefers-reduced-motion: reduce) {

      .grain-overlay,
      .grid-overlay,
      .page-loader,
      .cursor-outer,
      .cursor-dot,
      .hero-canvas,
      .cta-canvas {
        display: none;
      }

      html {
        cursor: auto;
        scroll-behavior: auto;
      }

      .v-hidden {
        visibility: visible !important;
      }

      .scroll-line {
        animation: none;
      }

      .status-dot {
        animation: none;
      }

      * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
      }
    }

    /* ========== UTILITY ========== */
    .reveal-wrap {
      overflow: hidden;
      display: block;
    }

    .reveal-inner {
      display: block;
    }

    /* Visibility */
    .v-hidden {
      visibility: visible;
    }

    .js.motion-ok .v-hidden {
      visibility: hidden;
    }

    .is-static .v-hidden {
      visibility: visible;
    }

    @media print {
      .page-loader,
      .cursor-outer,
      .cursor-dot,
      .grid-overlay,
      .grain-overlay,
      .hero-canvas,
      .cta-canvas,
      .scroll-indicator {
        display: none !important;
      }

      body {
        background: #fff;
        color: #111;
      }

      .v-hidden {
        visibility: visible !important;
      }
    }

    .error-page {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 2rem;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      cursor: auto;
      background:
        radial-gradient(circle at 72% 28%, rgba(123, 97, 255, 0.18), transparent 32%),
        radial-gradient(circle at 20% 80%, rgba(167, 139, 250, 0.08), transparent 28%),
        var(--bg);
    }

    .error-page a {
      cursor: pointer;
    }

    .error-starfield {
      position: fixed;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      opacity: 0.94;
    }

    .error-main {
      width: min(100%, 900px);
      position: relative;
      z-index: 2;
    }

    .error-main h1 {
      margin-bottom: 1.5rem;
      font-family: 'Syne', sans-serif;
      font-size: clamp(3rem, 10vw, 8rem);
      font-weight: 800;
      line-height: 0.9;
      letter-spacing: -0.05em;
      text-transform: uppercase;
    }

    .error-main h1 em {
      color: var(--accent-glow);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.55em;
      font-weight: 400;
    }

    .error-main > p:not(.section-label) {
      max-width: 55ch;
      color: var(--muted);
      line-height: 1.7;
    }

    .error-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-top: 2rem;
    }