:root {
      --bg: #070c17;
      --bg-soft: #0e1526;
      --panel: rgba(13, 20, 34, 0.78);
      --panel-strong: rgba(9, 14, 24, 0.92);
      --text: #eef5fb;
      --muted: #7f93ab;
      --line: rgba(24, 169, 225, 0.16);
      --accent: #18a9e1;
      --accent-soft: rgba(24, 169, 225, 0.12);
      --accent-strong: rgba(24, 169, 225, 0.35);
      --accent-2: #f05a84;
      --accent-2-soft: rgba(240, 90, 132, 0.14);
      --accent-2-strong: rgba(240, 90, 132, 0.38);
      --shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
      --radius: 28px;
      --header-h: 84px;
      --container: min(1180px, calc(100vw - 32px));
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    body {
      margin: 0;
      background:
        radial-gradient(circle at top left, rgba(24, 169, 225, 0.09), transparent 28%),
        radial-gradient(circle at 85% 12%, rgba(24, 169, 225, 0.06), transparent 18%),
        linear-gradient(180deg, #05080f 0%, #070c17 32%, #0a1324 100%);
      color: var(--text);
      font-family: "IBM Plex Mono", monospace;
      min-height: 100vh;
      overflow-x: hidden;
      cursor: none;
    }

    body.menu-open {
      overflow: hidden;
    }

    a,
    button,
    input,
    textarea {
      font: inherit;
    }

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

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

    button {
      border: 0;
      background: none;
      color: inherit;
      cursor: none;
    }

    canvas,
    .hero-grid,
    .hero-orb,
    .hero-line,
    .noise {
      pointer-events: none;
    }

    .cursor-dot,
    .cursor-ring {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 120;
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
      mix-blend-mode: screen;
    }

    .cursor-dot {
      width: 8px;
      height: 8px;
      background: var(--accent);
      box-shadow: 0 0 18px var(--accent);
    }

    .cursor-ring {
      width: 34px;
      height: 34px;
      border: 1px solid rgba(24, 169, 225, 0.55);
      transition: width 0.12s ease, height 0.12s ease, border-color 0.12s ease, background 0.12s ease;
    }

    .cursor-ring.is-active {
      width: 44px;
      height: 44px;
      border-color: rgba(24, 169, 225, 0.85);
      background: rgba(24, 169, 225, 0.06);
    }

    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;
      overflow: visible;
      transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
      border-bottom: 1px solid transparent;
    }

    .site-header.is-scrolled {
      background: rgba(8, 11, 16, 0.72);
      border-color: rgba(255, 255, 255, 0.05);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .header-inner {
      width: var(--container);
      min-height: var(--header-h);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      position: relative;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 0;
      position: relative;
      z-index: 3;
      min-width: 0;
    }

    .brand-mark {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .brand-mark strong {
      font-family: "Orbitron", sans-serif;
      font-size: 1rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }

    .brand-mark span {
      color: var(--muted);
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .nav a {
      position: relative;
      padding: 10px 14px;
      color: #d7e4ef;
      font-size: 0.84rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .nav a::after {
      content: "";
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 6px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.25s ease;
    }

    .nav a:hover::after,
    .nav a:focus-visible::after {
      transform: scaleX(1);
    }

    .menu-toggle {
      display: none;
      width: 52px;
      height: 52px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 18px;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 3;
      background: rgba(255, 255, 255, 0.02);
      flex: 0 0 auto;
    }

    .menu-toggle span,
    .menu-toggle::before,
    .menu-toggle::after {
      content: "";
      position: absolute;
      width: 22px;
      height: 2px;
      border-radius: 999px;
      background: var(--text);
      transition: transform 0.28s ease, opacity 0.28s ease;
    }

    .menu-toggle::before {
      transform: translateY(-7px);
    }

    .menu-toggle::after {
      transform: translateY(7px);
    }

    .menu-toggle.is-open span {
      opacity: 0;
    }

    .menu-toggle.is-open::before {
      transform: rotate(45deg);
    }

    .menu-toggle.is-open::after {
      transform: rotate(-45deg);
    }

    main {
      position: relative;
    }

    section {
      position: relative;
      width: var(--container);
      margin: 0 auto;
    }

    .hero {
      min-height: 100vh;
      display: grid;
      align-items: center;
      padding: calc(var(--header-h) + 48px) 0 100px;
      isolation: isolate;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 12% auto auto 58%;
      width: 320px;
      height: 320px;
      background: radial-gradient(circle, rgba(24, 169, 225, 0.18) 0%, rgba(24, 169, 225, 0) 72%);
      filter: blur(18px);
      z-index: -2;
    }

    #particle-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: -4;
      opacity: 0.95;
    }

    .hero-grid {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -14%;
      height: 54%;
      background-image:
        linear-gradient(rgba(24, 169, 225, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(24, 169, 225, 0.14) 1px, transparent 1px);
      background-size: 54px 54px;
      transform: perspective(760px) rotateX(74deg) scale(1.55);
      transform-origin: center bottom;
      opacity: 0.28;
      mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.38) 18%, black 100%);
      animation: gridDrift 18s linear infinite;
      z-index: -3;
    }

    .hero-orb {
      position: absolute;
      right: 8%;
      top: 18%;
      width: min(36vw, 430px);
      aspect-ratio: 1;
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.22), transparent 14%),
        radial-gradient(circle, rgba(24, 169, 225, 0.18) 0%, rgba(24, 169, 225, 0.06) 32%, rgba(0, 0, 0, 0) 68%);
      border: 1px solid rgba(24, 169, 225, 0.14);
      filter: blur(1px);
      opacity: 0.9;
      animation: floatOrb 8s ease-in-out infinite;
      z-index: -2;
    }

    .hero-line {
      position: absolute;
      width: min(48vw, 640px);
      height: 1px;
      right: 0;
      top: 36%;
      background: linear-gradient(90deg, transparent, rgba(24, 169, 225, 0.5), transparent);
      opacity: 0.7;
      z-index: -2;
    }

    .noise {
      position: fixed;
      inset: 0;
      z-index: 90;
      opacity: 0.045;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
      background-size: 3px 3px;
      mix-blend-mode: soft-light;
    }

    .hero-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
      gap: 28px;
      align-items: end;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px;
      color: var(--accent);
      font-size: 0.76rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 48px;
      height: 1px;
      background: currentColor;
      box-shadow: 0 0 12px currentColor;
    }

    .hero-copy {
      position: relative;
      max-width: 760px;
    }

    .hero-title {
      margin: 0;
      font-family: "Orbitron", sans-serif;
      font-size: clamp(3.4rem, 9vw, 7.2rem);
      line-height: 0.95;
      letter-spacing: -0.03em;
      text-transform: uppercase;
      max-width: 10ch;
      position: relative;
      text-wrap: balance;
    }

    .hero-title-text {
      display: inline;
    }

    .hero-title-caret {
      display: none;
      width: 0.12em;
      height: 0.92em;
      margin-left: 0.08em;
      vertical-align: -0.08em;
      background: var(--accent);
      box-shadow: 0 0 18px rgba(24, 169, 225, 0.55);
      animation: blink 0.9s steps(1) infinite;
    }

    .hero-title .accent {
      color: var(--accent-2);
      text-shadow: 0 0 24px rgba(240, 90, 132, 0.32);
    }

    .hero-title.is-typing .hero-title-caret {
      display: inline-block;
    }

    .hero-title::after {
      content: "";
      position: absolute;
      inset: auto auto -10px 4px;
      width: 38%;
      height: 10px;
      background: linear-gradient(90deg, rgba(24, 169, 225, 0.34), rgba(240, 90, 132, 0.28), transparent);
      filter: blur(10px);
    }

    .hero-subtitle {
      max-width: 58ch;
      margin: 28px 0 0;
      color: #b8ccd9;
      font-size: clamp(1rem, 1.8vw, 1.16rem);
      line-height: 1.75;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 34px;
    }

    .button {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 56px;
      padding: 0 24px;
      border-radius: 18px;
      overflow: hidden;
      transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.82rem;
    }

    .button::before {
      content: "";
      position: absolute;
      inset: 0;
      transform: translateX(-110%);
      background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.22) 46%, transparent 100%);
      animation: shimmer 5.4s ease-in-out infinite;
    }

    .button-primary {
      color: #04141d;
      background: var(--accent);
      box-shadow: 0 0 0 1px rgba(24, 169, 225, 0.18), 0 0 32px rgba(24, 169, 225, 0.22);
    }

    .button-primary:hover,
    .button-primary:focus-visible {
      transform: translateY(-3px);
      box-shadow: 0 0 0 1px rgba(240, 90, 132, 0.32), 0 0 42px rgba(240, 90, 132, 0.28);
    }

    .button-secondary {
      color: var(--text);
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .button-secondary:hover,
    .button-secondary:focus-visible {
      transform: translateY(-3px);
      border-color: rgba(24, 169, 225, 0.28);
      background: rgba(24, 169, 225, 0.04);
    }

    .terminal-card {
      position: relative;
      margin-left: auto;
      width: min(100%, 420px);
      padding: 22px;
      border-radius: var(--radius);
      background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 60%),
        var(--panel);
      border: 1px solid rgba(255, 255, 255, 0.06);
      box-shadow: var(--shadow);
      backdrop-filter: blur(16px);
    }

    .terminal-card::before {
      content: "";
      position: absolute;
      inset: auto 24px -1px 24px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(24, 169, 225, 0.8), transparent);
    }

    .terminal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
      color: #9ab3a8;
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .terminal-lights {
      display: inline-flex;
      gap: 8px;
    }

    .terminal-lights span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.14);
    }

    .terminal-lights span:first-child {
      background: rgba(255, 90, 90, 0.9);
    }

    .terminal-lights span:nth-child(2) {
      background: rgba(255, 196, 64, 0.9);
    }

    .terminal-lights span:nth-child(3) {
      background: var(--accent);
      box-shadow: 0 0 10px rgba(24, 169, 225, 0.55);
    }

    .terminal-body {
      min-height: 260px;
      display: grid;
      gap: 14px;
    }

    .terminal-line {
      color: #dbf7ea;
      font-size: 0.88rem;
      line-height: 1.6;
    }

    .terminal-line span {
      color: var(--accent);
    }

    .typing-line {
      min-height: 2.2em;
      position: relative;
      color: #eef5fb;
    }

    .typing-line::after {
      content: "";
      display: inline-block;
      width: 9px;
      height: 1.2em;
      margin-left: 7px;
      vertical-align: -0.2em;
      background: var(--accent);
      box-shadow: 0 0 14px rgba(24, 169, 225, 0.65);
      animation: blink 1s steps(1) infinite;
    }

    .terminal-stack {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 8px;
    }

    .terminal-chip {
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.05);
      color: #b6ccc3;
      font-size: 0.74rem;
    }

    .terminal-chip strong {
      display: block;
      margin-bottom: 6px;
      color: var(--text);
      font-size: 0.94rem;
    }

    .section-shell {
      padding: 94px 0;
    }

    .section-shell.overlap-up {
      margin-top: -38px;
    }

    .section-frame {
      position: relative;
      padding: 34px 0 0;
    }

    .section-frame::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 96px;
      height: 1px;
      background: linear-gradient(90deg, var(--accent), transparent);
    }

    .section-kicker {
      margin: 0 0 14px;
      color: var(--accent);
      font-size: 0.74rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .section-title {
      margin: 0;
      font-family: "Orbitron", sans-serif;
      font-size: clamp(2rem, 4vw, 3.8rem);
      line-height: 1;
      text-transform: uppercase;
      max-width: 10ch;
    }

    .section-text {
      margin: 18px 0 0;
      max-width: 64ch;
      color: #b7cfc4;
      line-height: 1.8;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
      margin-top: 42px;
    }

    .service-card,
    .feature-card,
    .contact-panel {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      background:
        linear-gradient(140deg, rgba(255, 255, 255, 0.05), transparent 55%),
        var(--panel);
      border: 1px solid rgba(255, 255, 255, 0.06);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
    }

    .service-card {
      padding: 28px;
      min-height: 320px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .service-card::after,
    .feature-card::after,
    .contact-panel::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at top right, rgba(24, 169, 225, 0.18), transparent 34%);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    .service-card:hover,
    .service-card:focus-within,
    .feature-card:hover,
    .contact-panel:hover {
      transform: translateY(-8px);
      border-color: rgba(24, 169, 225, 0.24);
      box-shadow: 0 35px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(24, 169, 225, 0.12), 0 0 32px rgba(24, 169, 225, 0.12);
    }

    .service-card:hover::after,
    .feature-card:hover::after,
    .contact-panel:hover::after {
      opacity: 1;
    }

    .service-top {
      display: grid;
      gap: 18px;
    }

    .service-icon {
      width: 68px;
      height: 68px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 22px;
      background: rgba(24, 169, 225, 0.08);
      border: 1px solid rgba(24, 169, 225, 0.16);
      color: var(--accent);
      box-shadow: inset 0 0 24px rgba(24, 169, 225, 0.08);
    }

    .service-card h3,
    .contact-copy h3 {
      margin: 0;
      font-family: "Orbitron", sans-serif;
      text-transform: uppercase;
      font-size: 1.45rem;
      line-height: 1.15;
    }

    .service-card p,
    .contact-copy p {
      margin: 0;
      color: #bbd2c8;
      line-height: 1.75;
    }

    .service-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }

    .service-meta span {
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.035);
      border: 1px solid rgba(255, 255, 255, 0.06);
      color: #dffbef;
      font-size: 0.72rem;
    }

    .about-layout {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
      gap: 26px;
      margin-top: 40px;
      align-items: start;
    }

    .about-panel {
      padding: 32px;
      border-radius: calc(var(--radius) + 4px);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
        rgba(10, 16, 24, 0.82);
      border: 1px solid rgba(255, 255, 255, 0.06);
      box-shadow: var(--shadow);
    }

    .about-panel strong {
      color: var(--accent);
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .feature-card {
      padding: 22px;
      min-height: 190px;
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .feature-card svg {
      color: var(--accent);
      margin-bottom: 20px;
    }

    .feature-card h3 {
      margin: 0 0 12px;
      font-family: "Orbitron", sans-serif;
      font-size: 1rem;
      line-height: 1.25;
      text-transform: uppercase;
    }

    .feature-card p {
      margin: 0;
      color: #aec7bc;
      font-size: 0.93rem;
      line-height: 1.7;
    }

    .contact-shell {
      margin-top: 42px;
      display: grid;
      grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
      gap: 24px;
      align-items: start;
    }

    .contact-copy {
      padding: 30px;
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid rgba(255, 255, 255, 0.05);
      min-height: 100%;
    }

    .contact-copy-list {
      display: grid;
      gap: 14px;
      margin-top: 28px;
    }

    .contact-copy-list div {
      padding: 14px 16px;
      border-left: 2px solid rgba(24, 169, 225, 0.45);
      background: rgba(24, 169, 225, 0.04);
      color: #d6eee2;
    }

    .contact-panel {
      padding: 28px;
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .field {
      display: grid;
      gap: 8px;
    }

    .field.full {
      grid-column: 1 / -1;
    }

    .field label {
      color: #d7e4ef;
      font-size: 0.82rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .field input,
    .field textarea {
      width: 100%;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 18px;
      padding: 16px 18px;
      background: rgba(255, 255, 255, 0.03);
      color: var(--text);
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .field input:focus,
    .field textarea:focus {
      border-color: rgba(24, 169, 225, 0.42);
      box-shadow: 0 0 0 4px rgba(24, 169, 225, 0.08);
      background: rgba(255, 255, 255, 0.045);
    }

    .field textarea {
      min-height: 180px;
      resize: vertical;
    }

    .form-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
      margin-top: 18px;
    }

    .submit-button {
      min-width: 220px;
    }

    .submit-button[disabled] {
      opacity: 0.65;
      pointer-events: none;
    }

    .form-status {
      min-height: 1.4em;
      color: #d9fef0;
      font-size: 0.9rem;
    }

    .form-status.success {
      color: var(--accent);
    }

    .form-status.error {
      color: #ff8f8f;
    }

    .site-footer {
      width: var(--container);
      margin: 0 auto;
      padding: 28px 0 54px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 16px 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      color: #98afa5;
      font-size: 0.82rem;
    }

    .footer-brand {
      display: inline-flex;
      align-items: center;
      gap: 0;
      color: #e5fff4;
      font-family: "Orbitron", sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.18em;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }

    .footer-links a:hover,
    .footer-links a:focus-visible {
      color: var(--accent);
    }

    .reveal {
      opacity: 0;
      transform: translateY(42px);
      transition: opacity 0.7s ease, transform 0.7s ease;
      transition-delay: var(--reveal-delay, 0s);
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .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;
    }

    @keyframes gridDrift {
      from { transform: perspective(760px) rotateX(74deg) scale(1.55) translateY(0); }
      to { transform: perspective(760px) rotateX(74deg) scale(1.55) translateY(54px); }
    }

    @keyframes floatOrb {
      0%, 100% { transform: translate3d(0, 0, 0); }
      50% { transform: translate3d(0, -18px, 0); }
    }

    @keyframes shimmer {
      0%, 70% { transform: translateX(-110%); }
      100% { transform: translateX(130%); }
    }

    @keyframes blink {
      50% { opacity: 0; }
    }

    @media (max-width: 980px) {
      .hero-layout,
      .about-layout,
      .contact-shell {
        grid-template-columns: 1fr;
      }

      .hero-copy {
        max-width: none;
      }

      .terminal-card {
        margin-left: 0;
      }

      .services-grid,
      .feature-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px) {
      :root {
        --header-h: 76px;
        --container: min(calc(100vw - 24px), 100%);
      }

      .header-inner {
        width: calc(100% - 24px);
        margin: 0 12px;
        display: block;
        min-height: var(--header-h);
        padding-right: 64px;
        overflow: visible;
      }

      .brand {
        max-width: 100%;
        min-height: var(--header-h);
        display: inline-flex;
        justify-content: center;
        flex-direction: column;
      }

      .brand-mark strong,
      .brand-mark span {
        white-space: nowrap;
      }

      body {
        cursor: auto;
      }

      .cursor-dot,
      .cursor-ring {
        display: none;
      }

      .menu-toggle {
        display: inline-flex;
        width: 52px;
        height: 52px;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        justify-self: auto;
        align-self: auto;
        z-index: 4;
      }

      .nav {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        width: 100%;
        padding: 14px;
        border-radius: 24px;
        background: rgba(8, 11, 16, 0.94);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: var(--shadow);
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        transform: translateY(-10px) scale(0.98);
        transform-origin: top center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
        backdrop-filter: blur(18px);
        z-index: 2;
        max-height: calc(100vh - var(--header-h) - 32px);
        overflow-y: auto;
      }

      .nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
      }

      .nav a {
        display: block;
        padding: 16px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.03);
      }

      .hero {
        min-height: auto;
        padding-top: calc(var(--header-h) + 34px);
        padding-bottom: 72px;
      }

      .hero-layout {
        gap: 22px;
      }

      .hero-copy {
        max-width: 100%;
      }

      .eyebrow {
        margin-bottom: 18px;
        gap: 8px;
        font-size: 0.68rem;
        letter-spacing: 0.16em;
      }

      .eyebrow::before {
        width: 32px;
      }

      .hero-title {
        max-width: 100%;
        font-size: clamp(2.3rem, 13vw, 4rem);
        line-height: 1;
      }

      .hero-subtitle {
        margin-top: 22px;
        font-size: 0.95rem;
        line-height: 1.7;
      }

      .hero-actions {
        flex-direction: column;
        align-items: stretch;
        margin-top: 28px;
      }

      .button {
        width: 100%;
      }

      .hero-orb {
        right: -14%;
        top: 12%;
        width: min(72vw, 320px);
        opacity: 0.42;
      }

      .hero-line {
        top: 31%;
        width: 72vw;
        opacity: 0.36;
      }

      .hero-grid {
        bottom: -7%;
        height: 38%;
        opacity: 0.22;
      }

      .terminal-card,
      .about-panel,
      .contact-copy,
      .contact-panel,
      .service-card,
      .feature-card {
        padding: 22px;
        border-radius: 24px;
      }

      .terminal-card {
        width: 100%;
      }

      .terminal-body {
        min-height: 0;
      }

      .terminal-head {
        margin-bottom: 14px;
      }

      .terminal-line {
        font-size: 0.82rem;
      }

      .section-shell {
        padding: 76px 0;
      }

      .section-shell.overlap-up {
        margin-top: -12px;
      }

      .section-frame {
        padding-top: 24px;
      }

      .section-title {
        max-width: 100%;
        font-size: clamp(1.8rem, 10vw, 3rem);
      }

      .section-text {
        font-size: 0.94rem;
        line-height: 1.75;
      }

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

      .terminal-stack {
        grid-template-columns: 1fr;
      }

      .service-card {
        min-height: 0;
      }

      .feature-card {
        min-height: 0;
      }

      .contact-shell {
        gap: 18px;
      }

      .form-actions {
        align-items: stretch;
      }

      .submit-button {
        width: 100%;
        min-width: 0;
      }

      .site-footer {
        justify-content: flex-start;
        align-items: flex-start;
        padding-bottom: 36px;
      }

      .footer-links {
        width: 100%;
        gap: 12px 16px;
      }
    }

    @media (max-width: 520px) {
      :root {
        --container: min(calc(100vw - 20px), 100%);
      }

      .header-inner {
        width: calc(100% - 20px);
        margin: 0 10px;
        min-height: 72px;
        padding-right: 58px;
      }

      .brand-mark strong {
        font-size: 0.9rem;
        letter-spacing: 0.16em;
      }

      .brand-mark span {
        font-size: 0.62rem;
        letter-spacing: 0.14em;
      }

      .menu-toggle {
        width: 48px;
        height: 48px;
        border-radius: 16px;
      }

      .nav {
        top: calc(100% + 6px);
        padding: 12px;
        border-radius: 20px;
      }

      .nav a {
        padding: 14px;
        font-size: 0.8rem;
      }

      .hero {
        padding-top: calc(var(--header-h) + 26px);
        padding-bottom: 58px;
      }

      .hero-title {
        font-size: clamp(2rem, 12vw, 3rem);
        letter-spacing: -0.02em;
      }

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

      .button {
        min-height: 52px;
        padding: 0 18px;
        font-size: 0.76rem;
      }

      .service-card,
      .feature-card,
      .contact-panel,
      .contact-copy,
      .about-panel,
      .terminal-card {
        padding: 18px;
        border-radius: 20px;
      }

      .service-icon {
        width: 58px;
        height: 58px;
        border-radius: 18px;
      }

      .service-card h3,
      .contact-copy h3 {
        font-size: 1.18rem;
      }

      .terminal-head {
        font-size: 0.64rem;
        letter-spacing: 0.12em;
      }

      .terminal-line,
      .terminal-chip,
      .feature-card p,
      .service-card p,
      .contact-copy p,
      .section-text {
        font-size: 0.88rem;
      }

      .field input,
      .field textarea {
        padding: 14px 16px;
        border-radius: 16px;
      }

      .field textarea {
        min-height: 160px;
      }

      .site-footer {
        gap: 12px;
        font-size: 0.76rem;
      }

      .footer-brand {
        letter-spacing: 0.14em;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }