@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700&family=Syne:wght@500;600;700;800&display=swap');

:root {
  --ai-bg: #050706;
  --ai-panel: #0b100c;
  --ai-ink: #eff8e9;
  --ai-muted: #9aa997;
  --ai-line: rgba(180, 255, 73, .2);
  --ai-line-soft: rgba(239, 248, 233, .1);
  --ai-lime: #a8ff00;
  --ai-mono: 'IBM Plex Mono', monospace;
  --ai-display: 'Syne', sans-serif;
  --ai-body: 'Manrope', sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--ai-bg); scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: linear-gradient(rgba(168, 255, 0, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 255, 0, .035) 1px, transparent 1px), var(--ai-bg);
  background-size: 72px 72px;
  color: var(--ai-ink);
  font: 400 16px/1.6 var(--ai-body);
}
body::before { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 72% 38%, rgba(168, 255, 0, .12), transparent 26rem); content: ''; }
a { color: inherit; text-underline-offset: 4px; }
a:focus-visible, select:focus-visible { outline: 3px solid var(--ai-lime); outline-offset: 4px; }
.ai-skip { position: absolute; top: -64px; left: 20px; z-index: 10; padding: 10px 14px; background: var(--ai-lime); color: #071000; font-weight: 700; }
.ai-skip:focus { top: 20px; }
.ai-shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.ai-topbar { border-bottom: 1px solid var(--ai-line-soft); }
.ai-topbar .ai-shell { display: flex; min-height: 84px; align-items: center; justify-content: space-between; gap: 24px; }
.ai-wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ai-ink); font-family: var(--ai-display); font-size: 17px; font-weight: 800; letter-spacing: -.05em; text-decoration: none; }
.ai-wordmark-mark { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--ai-lime); color: var(--ai-lime); font-family: var(--ai-mono); font-size: 13px; letter-spacing: 0; }
.ai-wordmark-slash { color: var(--ai-lime); font-family: var(--ai-mono); font-weight: 400; }
.ai-wordmark-lab { color: var(--ai-muted); font-family: var(--ai-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; }
.ai-nav { display: flex; align-items: center; gap: 12px; }
.ai-nav-link { color: var(--ai-muted); font-family: var(--ai-mono); font-size: 12px; text-decoration: none; }
.ai-nav-link:hover { color: var(--ai-lime); }
.ai-language { min-height: 40px; padding: 0 12px; border: 1px solid var(--ai-line); border-radius: 0; background: var(--ai-panel); color: var(--ai-ink); font: 500 12px var(--ai-mono); }
.ai-hero { display: grid; min-height: calc(100vh - 84px); grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); align-items: center; gap: clamp(48px, 8vw, 120px); padding: 72px 0 84px; }
.ai-copy { max-width: 610px; }
.ai-kicker { margin: 0 0 28px; color: var(--ai-lime); font: 500 12px/1.4 var(--ai-mono); letter-spacing: .16em; }
.ai-kicker::before { margin-right: 10px; content: '↳'; }
.ai-title { max-width: 9ch; margin: 0; color: var(--ai-ink); font: 700 clamp(58px, 8vw, 112px)/.94 var(--ai-display); letter-spacing: -.075em; }
.ai-title .grad { color: var(--ai-lime); }
.ai-lead { max-width: 570px; margin: 32px 0 0; color: var(--ai-muted); font-size: clamp(18px, 2.1vw, 24px); line-height: 1.45; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.ai-button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 0 20px; border: 1px solid var(--ai-lime); border-radius: 0; font-size: 14px; font-weight: 700; text-decoration: none; transition: transform .2s ease, background .2s ease, color .2s ease; }
.ai-button:hover { transform: translateY(-2px); }
.ai-button-primary { background: var(--ai-lime); color: #071000; }
.ai-button-primary:hover { background: #c4ff5b; }
.ai-button-ghost { border-color: var(--ai-line); color: var(--ai-muted); }
.ai-button-ghost:hover { border-color: var(--ai-lime); color: var(--ai-lime); }
.ai-signals { display: grid; grid-template-columns: repeat(3, auto); gap: 16px 24px; margin-top: 54px; color: var(--ai-muted); font: 500 11px/1.4 var(--ai-mono); }
.ai-signal { display: inline-flex; align-items: center; gap: 8px; }
.ai-signal::before { width: 6px; height: 6px; border-radius: 50%; background: var(--ai-lime); box-shadow: 0 0 12px var(--ai-lime); content: ''; }
.ai-art { margin: 0; }
.ai-art-frame { position: relative; overflow: hidden; border: 1px solid var(--ai-line); background: #000; box-shadow: 0 0 0 8px rgba(168, 255, 0, .025), 0 30px 100px rgba(114, 255, 0, .12); }
.ai-art-frame::before, .ai-art-frame::after { position: absolute; z-index: 1; width: 22px; height: 22px; border-color: var(--ai-lime); border-style: solid; content: ''; pointer-events: none; }
.ai-art-frame::before { top: 18px; left: 18px; border-width: 1px 0 0 1px; }
.ai-art-frame::after { right: 18px; bottom: 18px; border-width: 0 1px 1px 0; }
.ai-logo-link { display: block; }
.ai-art img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.ai-caption { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; color: var(--ai-muted); font: 500 11px var(--ai-mono); letter-spacing: .04em; }
.ai-caption-index { color: var(--ai-lime); }
.ai-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ai-line); border-bottom: 1px solid var(--ai-line); }
.ai-stat { display: grid; min-height: 112px; align-content: center; gap: 4px; padding: 20px 24px; border-right: 1px solid var(--ai-line); }
.ai-stat:last-child { border-right: 0; }
.ai-stat strong { color: var(--ai-lime); font: 600 18px var(--ai-mono); }
.ai-stat span { color: var(--ai-muted); font-size: 13px; }
.ai-footer { display: flex; min-height: 84px; align-items: center; justify-content: space-between; gap: 20px; color: var(--ai-muted); font: 500 11px var(--ai-mono); }
.ai-footer a { color: var(--ai-lime); text-decoration: none; }
@media (max-width: 860px) {
  .ai-hero { grid-template-columns: 1fr; gap: 52px; padding-top: 56px; }
  .ai-copy { max-width: 760px; }
  .ai-title { max-width: 12ch; }
  .ai-art { width: min(620px, 100%); justify-self: center; }
}
@media (max-width: 560px) {
  .ai-shell { width: min(100% - 28px, 1160px); }
  .ai-topbar .ai-shell { min-height: 72px; }
  .ai-wordmark-lab, .ai-nav-link { display: none; }
  .ai-hero { min-height: auto; padding: 54px 0 64px; }
  .ai-title { font-size: clamp(52px, 16vw, 78px); }
  .ai-lead { margin-top: 24px; font-size: 18px; }
  .ai-signals { grid-template-columns: 1fr; gap: 10px; margin-top: 36px; }
  .ai-stats { grid-template-columns: 1fr; }
  .ai-stat { min-height: 82px; border-right: 0; border-bottom: 1px solid var(--ai-line); }
  .ai-stat:last-child { border-bottom: 0; }
  .ai-footer { min-height: 100px; align-items: flex-start; flex-direction: column; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ai-button { transition: none; }
  .ai-button:hover { transform: none; }
}
[dir='rtl'] .ai-kicker::before { margin-right: 0; margin-left: 10px; }
[dir='rtl'] .ai-stat { border-right: 0; border-left: 1px solid var(--ai-line); }
[dir='rtl'] .ai-stat:last-child { border-left: 0; }