@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

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

html, body {
  margin: 0;
  min-height: 100%;
}

:root {
  --accent: #76b900;
  --accent-dim: #98d600;
  --accent-alt: #a6d54b;
  --accent-alt-glow: rgba(166, 213, 75, 0.14);
  --bg: #010201;
  --surface: rgba(9, 13, 9, 0.84);
  --surface-strong: rgba(13, 18, 13, 0.94);
  --surface-soft: rgba(255, 255, 255, 0.03);
  --text: #eff7e8;
  --text-muted: #90a37a;
  --border: rgba(126, 170, 77, 0.16);
  --border-strong: rgba(152, 214, 0, 0.24);
  --grid-color: rgba(118, 185, 0, 0.04);
  --glow: rgba(118, 185, 0, 0.24);
  --glow-strong: rgba(166, 213, 75, 0.18);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
  --pointer-x: 50%;
  --pointer-y: 42%;
  --mono: 'Press Start 2P', monospace;
  --display: 'Press Start 2P', monospace;
  --glitch: 'Press Start 2P', monospace;
  --sans: 'Press Start 2P', monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
}

[data-theme="light"] {
  --accent: #5a9f00;
  --accent-dim: #76b900;
  --accent-alt: #94b43f;
  --accent-alt-glow: rgba(148, 180, 63, 0.14);
  --bg: #f5f7ef;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-strong: rgba(255, 255, 255, 0.96);
  --surface-soft: rgba(15, 23, 42, 0.03);
  --text: #172013;
  --text-muted: #5c6d52;
  --border: rgba(126, 170, 77, 0.12);
  --border-strong: rgba(118, 185, 0, 0.18);
  --grid-color: rgba(118, 185, 0, 0.04);
  --glow: rgba(118, 185, 0, 0.14);
  --glow-strong: rgba(148, 180, 63, 0.12);
  --shadow: 0 24px 80px rgba(15, 23, 42, 0.12);
}

body {
  background:
    radial-gradient(circle at 12% 18%, rgba(118, 185, 0, 0.09), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(166, 213, 75, 0.07), transparent 26%),
    radial-gradient(circle at 50% 80%, rgba(118, 185, 0, 0.06), transparent 32%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body::before,
body::after {
  content: '';
  position: fixed;
  inset: -20vmax;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(118, 185, 0, 0.08) 0%, transparent 24%),
    radial-gradient(circle at 18% 18%, var(--glow) 0%, transparent 33%),
    radial-gradient(circle at 84% 16%, var(--accent-alt-glow) 0%, transparent 28%),
    radial-gradient(circle at 52% 78%, rgba(255, 255, 255, 0.05) 0%, transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(118, 185, 0, 0.06) 0%, transparent 42%);
  filter: blur(36px);
  opacity: 0.95;
  animation: drift 26s ease-in-out infinite alternate;
}

body::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(118, 185, 0, 0.05) 0%, transparent 58%),
    radial-gradient(circle at 62% 42%, rgba(214, 179, 90, 0.04) 0%, transparent 36%);
  filter: blur(30px);
  opacity: 0.28;
  animation: mist-drift 24s ease-in-out infinite alternate;
}

@keyframes drift {
  0% { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  100% { transform: translate3d(1.5%, 1.25%, 0) scale(1.04); }
}

@keyframes mist-drift {
  0% { transform: translate3d(-1rem, 0, 0) scale(1); }
  100% { transform: translate3d(1rem, -0.5rem, 0) scale(1.02); }
}

#gpu-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.scanline {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0 49.35%, rgba(118, 185, 0, 0.03) 49.65%, rgba(118, 185, 0, 0.11) 49.9%, rgba(166, 213, 75, 0.16) 50%, rgba(118, 185, 0, 0.09) 50.1%, transparent 50.35%);
  background-size: 100% 8px;
  mix-blend-mode: screen;
  opacity: 0.13;
  animation: scan-drift 18s linear infinite;
}

.scanline::before,
.scanline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.scanline::before {
  top: calc(50% - 18px);
  height: 18px;
  background: repeating-linear-gradient(90deg, rgba(118, 185, 0, 0.05) 0 6px, transparent 6px 12px);
  opacity: 0.46;
  filter: blur(0.6px);
  mix-blend-mode: screen;
  animation: scan-glitch 1.8s steps(2, end) infinite;
}

.scanline::after {
  top: calc(50% - 9px);
  height: 8px;
  background: linear-gradient(90deg, transparent, rgba(166, 213, 75, 0.24), transparent);
  opacity: 0.42;
  animation: scan-flicker 1.2s linear infinite;
}

@keyframes scan-drift {
  from { transform: translateY(-8px); }
  to { transform: translateY(8px); }
}

@keyframes scan-glitch {
  0%, 100% { transform: translateX(0) skewX(0deg); opacity: 0.35; }
  25% { transform: translateX(2px) skewX(-8deg); opacity: 0.52; }
  50% { transform: translateX(-1px) skewX(10deg); opacity: 0.42; }
  75% { transform: translateX(3px) skewX(-4deg); opacity: 0.58; }
}

@keyframes scan-flicker {
  0%, 100% { opacity: 0.22; transform: translateX(0); }
  50% { opacity: 0.62; transform: translateX(-2px); }
}

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1.1rem 1.4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.brand__chip {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-alt));
  box-shadow: 0 0 16px var(--glow);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0.15rem 0.2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: none;
  transition: transform 180ms var(--ease), opacity 180ms var(--ease), color 180ms var(--ease);
}

.theme-toggle:hover {
  transform: translateY(-1px);
  opacity: 0.92;
  color: var(--accent);
}

[data-theme="dark"] .icon-dark { display: inline; }
[data-theme="dark"] .icon-light { display: none; }
[data-theme="light"] .icon-dark { display: none; }
[data-theme="light"] .icon-light { display: inline; }

.theme-toggle .icon-dark,
.theme-toggle .icon-light {
  font: 700 1rem/1 var(--display);
  transform: translateY(-0.02em);
}

.theme-toggle:focus-visible {
  outline: none;
  text-shadow: 0 0 12px var(--glow);
}

.shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  width: min(1220px, calc(100vw - 2rem));
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: 4.5rem 0 2rem;
}

.hero-card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  width: min(100%, 960px);
}

.metric__head {
  font-family: var(--display);
}

.name {
  margin: 0;
  position: relative;
  display: inline-block;
  width: fit-content;
  font: 700 clamp(1.9rem, 4.5vw, 3.8rem)/0.9 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  text-wrap: balance;
  text-shadow: 0 0 22px rgba(118, 185, 0, 0.18);
}

.name::before,
.name::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.name:hover::before {
  opacity: 0.8;
  color: var(--accent);
  transform: translate(-1px, -1px);
  clip-path: inset(0 0 56% 0);
  animation: glitch-top 460ms steps(2, end) 1;
  font-family: var(--glitch);
}

.name:hover::after {
  opacity: 0.7;
  color: var(--accent-alt);
  transform: translate(1px, 1px);
  clip-path: inset(55% 0 0 0);
  animation: glitch-bottom 460ms steps(2, end) 1;
  font-family: var(--glitch);
}

@keyframes glitch-top {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2px, -1px); }
  40% { transform: translate(2px, 0); }
  60% { transform: translate(-1px, 1px); }
  80% { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}

@keyframes glitch-bottom {
  0% { transform: translate(0, 0); }
  20% { transform: translate(2px, 1px); }
  40% { transform: translate(-2px, 0); }
  60% { transform: translate(1px, -1px); }
  80% { transform: translate(-1px, 1px); }
  100% { transform: translate(0, 0); }
}

.summary {
  display: block;
  width: fit-content;
  max-width: 36rem;
  margin: 1rem 0 1.4rem;
  font-size: clamp(0.55rem, 0.95vw, 0.72rem);
  line-height: 2;
  color: var(--text-muted);
  transition: opacity 170ms var(--ease), transform 170ms var(--ease);
  will-change: opacity, transform;
  cursor: pointer;
}

.summary.is-fading {
  opacity: 0.16;
  transform: translateY(0.03rem);
}

.typewriter-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  margin-bottom: 1.6rem;
}

.typewriter {
  font: 700 clamp(0.65rem, 1.2vw, 0.9rem)/1.05 var(--display);
  color: var(--accent);
  letter-spacing: 0.1em;
  text-shadow: 0 0 16px var(--glow);
  text-transform: uppercase;
}

.cursor {
  color: var(--accent-alt);
  font: 400 0.8rem/1 var(--glitch);
  animation: caret 1s steps(1, end) infinite;
}

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

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.25rem;
}

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0.6rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent), rgba(255,255,255,0.02);
  color: var(--text);
  text-decoration: none;
  font: 600 0.5rem/1 var(--display);
  letter-spacing: 0.06em;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease);
}

.action:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset, 0 12px 28px rgba(0, 0, 0, 0.18), 0 0 24px var(--glow);
}

.action--icon {
  width: 2rem;
  padding: 0;
}

.action--icon svg {
  width: 1rem;
  height: 1rem;
}

.action--text.action--calcom {
  background: linear-gradient(90deg, rgba(118,185,0,0.14), rgba(214,179,90,0.14));
}

.calcom-embed {
  display: block;
  width: 100%;
  height: clamp(260px, 44vh, 380px);
  border: 0;
  border-radius: 18px;
  background: rgba(255,255,255,0.02);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(2, 6, 18, 0.72);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--ease), visibility 220ms var(--ease);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: relative;
  width: min(920px, 100%);
  max-height: min(88vh, 760px);
  overflow: hidden;
  padding: 1.1rem 1.1rem 1.15rem;
  border-radius: 24px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 44%), var(--surface-strong);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transform: translateY(14px) scale(0.99);
  transition: transform 220ms var(--ease);
}

.modal-overlay.active .modal {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.contact-form {
  margin-top: 0;
  display: grid;
  gap: 0.55rem;
}

.contact-form h3 {
  margin: 0 0 0.2rem;
  color: var(--text-muted);
  font: 600 0.5rem/1.2 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font: 500 0.55rem/1.7 var(--display);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(90,220,247,0.12);
}

.contact-form textarea {
  resize: vertical;
  resize: none;
  overflow: hidden;
}

.contact-form button[type="submit"] {
  border: 0;
  border-radius: 14px;
  padding: 0.75rem 1rem;
  color: white;
  background: linear-gradient(90deg, var(--accent), var(--accent-alt));
  font: 700 0.55rem/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.contact-form button[type="submit"]:disabled {
  cursor: wait;
  opacity: 0.62;
}

.form-status {
  min-height: 1rem;
  margin: 0;
  color: var(--accent);
  font: 500 0.45rem/1.5 var(--display);
  letter-spacing: 0.04em;
}

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

code {
  font-family: var(--mono);
}

@media (max-width: 1100px) {
  .shell {
    width: min(820px, calc(100vw - 1.25rem));
  }
}

@media (max-width: 680px) {
  .top-bar {
    padding: 0.8rem 0.8rem 0;
  }

  .brand {
    gap: 0;
  }

  .shell {
    width: min(100vw - 1rem, 100%);
    padding: 4rem 0.5rem 1rem;
  }

  .hero-card {
    padding: 1.15rem;
  }

  .name {
    font-size: clamp(1.6rem, 10vw, 2.4rem);
  }

  .summary {
    font-size: 0.48rem;
    margin: 0.8rem 0 1rem;
  }

  .typewriter-row {
    display: flex;
    flex-wrap: wrap;
    border-radius: 18px;
  }

  .typewriter {
    font-size: clamp(0.62rem, 4.8vw, 0.84rem);
  }

  .action-row {
    gap: 0.55rem;
  }

  .action {
    min-height: 1.8rem;
    padding: 0.52rem 0.7rem;
  }

  .action--icon {
    width: 1.8rem;
  }

  .theme-toggle {
    padding: 0.1rem 0.15rem;
  }

  .modal {
    width: min(100%, calc(100vw - 1rem));
    max-height: calc(100vh - 1rem);
    padding: 0.9rem;
  }

  .calcom-embed {
    height: clamp(210px, 30vh, 300px);
    border-radius: 14px;
  }

  .contact-form {
    gap: 0.45rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  body::before,
  body::after,
  .scanline,
  .cursor {
    animation: none !important;
  }
}