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

:root {
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --bg-0: #090909; --bg-1: #111111; --bg-2: #151515; --bg-3: #1a1a1a;
  --border-hairline: rgba(255,255,255,.06); --border-soft: rgba(255,255,255,.1);
  --fg-0: #ffffff; --fg-1: #c9c9c9; --fg-2: #8a8a8a; --fg-3: #5c5c5c;
  --red-500: #e11d2e; --red-600: #c8102e; --red-700: #8f0b20;
  --red-glow: rgba(225,29,46,.35); --red-ambient: rgba(200,16,46,.14);

  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-4xl: 3rem;
  --tracking-wide: .08em; --tracking-tight: -.03em;
  --weight-medium: 500; --weight-semibold: 600;

  --radius-pill: 999px; --radius-lg: 16px; --radius-md: 10px;
  --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 20px 40px -20px rgba(0,0,0,.6);
  --dur-base: 280ms; --ease-out: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--fg-0); text-decoration: none; }
a:hover { color: var(--red-500); }

.es-btn--primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  border-radius: var(--radius-pill); padding: 14px 26px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; position: relative; isolation: isolate;
  background: linear-gradient(180deg, var(--red-500), var(--red-700)); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -10px 16px -8px rgba(0,0,0,.4),
    0 14px 32px -12px var(--red-glow), 0 2px 0 rgba(0,0,0,.2);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.es-btn--primary::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.28), transparent 55%);
  opacity: .6; pointer-events: none; z-index: -1;
}
.es-btn--primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -10px 16px -8px rgba(0,0,0,.45),
    0 20px 44px -12px var(--red-glow), 0 2px 0 rgba(0,0,0,.2);
}

@keyframes catBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes catTail { 0%,100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }
@keyframes catBlink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes floatGlow { 0%,100% { opacity: .5; } 50% { opacity: .85; } }

.page { min-height: 100vh; background: var(--bg-0); position: relative; overflow: hidden; }
.page::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 50% 40%, rgba(225,29,46,.16), transparent 60%);
}
.page::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
}
.wrap { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 56px 32px 96px; display: flex; flex-direction: column; gap: 40px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand__mark { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, var(--red-500), var(--red-700)); }
.brand__name { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: #fff; letter-spacing: -.02em; }

.window { position: relative; border-radius: var(--radius-lg); border: 1px solid var(--border-hairline); background: var(--bg-1); box-shadow: var(--shadow-card); overflow: hidden; }
.window__chrome { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--border-hairline); background: var(--bg-2); }
.window__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.window__path { margin-left: 10px; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.35); }

.stage { min-height: 560px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 64px 24px; text-align: center; position: relative; }
.stage__glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, rgba(225,29,46,.12), transparent 65%); animation: floatGlow 4s ease-in-out infinite; pointer-events: none; }
.stage__code { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 15px; letter-spacing: .12em; color: var(--red-500); text-transform: uppercase; }

.cat { position: relative; z-index: 1; width: 120px; height: 110px; animation: catBob 3.4s ease-in-out infinite; }
.cat__ear { position: absolute; top: 0; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 30px solid #1c1c1c; }
.cat__ear--l { left: 14px; } .cat__ear--r { right: 14px; }
.cat__head { position: absolute; left: 10px; top: 18px; width: 100px; height: 80px; border-radius: 50% 50% 46% 46%; background: linear-gradient(160deg,#242424,#111111); border: 1px solid rgba(255,255,255,.08); }
.cat__eye { position: absolute; top: 46px; width: 10px; height: 14px; border-radius: 50%; background: var(--red-500); animation: catBlink 4.2s ease-in-out infinite; }
.cat__eye--l { left: 34px; } .cat__eye--r { right: 34px; }
.cat__nose { position: absolute; left: 52px; top: 62px; width: 16px; height: 10px; border-radius: 0 0 10px 10px; background: #151515; }
.cat__tail { position: absolute; left: -18px; bottom: 6px; width: 36px; height: 8px; border-radius: 6px; background: #1c1c1c; transform-origin: right center; animation: catTail 2.4s ease-in-out infinite; }

.stage__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.stage__title { font-family: var(--font-display); font-size: 44px; font-weight: 600; letter-spacing: -.03em; color: #fff; margin: 0; }
.stage__body { font-family: var(--font-body); font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.55); margin: 0; }
.stage__cta { position: relative; z-index: 1; }

.footer-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: rgba(255,255,255,.28); text-align: center; }

@media (max-width: 560px) {
  .stage__title { font-size: 30px; }
  .wrap { padding: 40px 18px 64px; }
}