/* styles.css defines the static landing page's colors, card layouts, navigation,
   and decorative motion. Responsive grids keep cards within the page width,
   while terminal examples scroll inside their cards so complete commands remain
   available on narrow screens. */
:root {
  color-scheme: dark;
  --bg: #050708;
  --panel: rgba(12, 15, 17, 0.82);
  --panel-strong: rgba(18, 22, 25, 0.9);
  --line: rgba(255, 255, 255, 0.17);
  --line-soft: rgba(255, 255, 255, 0.09);
  --text: #f7f7f3;
  --muted: #c7d0d8;
  --dim: #7f8b95;
  --cyan: #8bdcff;
  --mint: #73f0c7;
  --amber: #ffcc7a;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle at 14% 75%, rgba(80, 184, 255, 0.14), transparent 28%),
    radial-gradient(circle at 82% 16%, rgba(115, 240, 199, 0.1), transparent 24%),
    var(--bg);
  color: var(--text);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  background:
    linear-gradient(rgba(139, 220, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 220, 255, 0.08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 92%);
  transform: perspective(500px) rotateX(57deg) scale(1.8) translateY(-170px);
  transform-origin: top center;
}

body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(120deg, transparent 0 48%, rgba(255, 255, 255, 0.06) 49%, transparent 50%),
    radial-gradient(circle, rgba(255, 255, 255, 0.26) 1px, transparent 1.5px);
  background-size: 180px 180px, 220px 220px;
  opacity: 0.28;
}

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

.page-shell {
  width: min(1520px, calc(100% - 64px));
  margin: 0 auto;
  padding: 30px 0 34px;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  font-weight: 900;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 16px;
}

.brand small {
  margin-top: 1px;
  color: var(--dim);
  font-size: 11px;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.nav-links a,
.status-pill,
.feature-strip span,
.mini-status span {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.nav-links a {
  padding: 8px 16px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  transition:
    transform 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.nav-links a:hover {
  transform: translateY(-3px);
  color: #ffffff;
  border-color: rgba(139, 220, 255, 0.78);
  background: rgba(139, 220, 255, 0.14);
  box-shadow:
    0 10px 24px rgba(139, 220, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.nav-links a:focus-visible {
  outline: 2px solid rgba(139, 220, 255, 0.9);
  outline-offset: 3px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: max-content;
  padding: 7px 18px;
  border-color: rgba(115, 240, 199, 0.36);
  border-radius: 999px;
  color: #d9fff4;
  font-size: 12px;
}

.status-pill span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
}

.glass-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 45%),
    var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

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

.hero-card,
.benefit-card {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: 34px 36px;
}

.card-icon,
.gift-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 900;
}

.gift-icon {
  background: rgba(139, 220, 255, 0.14);
  color: var(--cyan);
}

.hero-card h1 {
  max-width: 680px;
  overflow-wrap: anywhere;
  margin: 0 0 14px;
  font-size: clamp(44px, 6vw, 64px);
  line-height: 0.98;
  letter-spacing: 0;
}

.hero-card p,
.benefit-card p,
.api-card p,
.section-heading p {
  color: var(--muted);
  line-height: 1.75;
}

.hero-card p {
  max-width: 740px;
  margin: 0 0 24px;
  font-size: 17px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 900;
}

.button-primary {
  background: #fff;
  color: #050708;
  box-shadow: 0 14px 28px rgba(255, 255, 255, 0.12);
}

.button-ghost {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.07);
}

.button-full {
  width: 100%;
}

.mini-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.mini-status span {
  padding: 6px 12px;
  border-color: rgba(139, 220, 255, 0.36);
  border-radius: 999px;
  color: #d9f5ff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
}

.orbital {
  position: absolute;
  top: 20px;
  right: 38px;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

.orbital::before,
.orbital::after {
  position: absolute;
  inset: 18px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: inherit;
}

.orbital::after {
  inset: 38px;
}

.orbital span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 16px var(--cyan);
  transform-origin: 0 0;
}

.orbital span:nth-child(1) {
  animation: orbit-outer 8s linear infinite;
}

.orbital span:nth-child(2) {
  animation: orbit-middle 6s linear infinite reverse;
}

.orbital span:nth-child(3) {
  animation: orbit-inner 4.5s linear infinite;
}

@keyframes orbit-outer {
  from {
    transform: rotate(0deg) translateX(66px) translate(-3px, -3px);
  }
  to {
    transform: rotate(360deg) translateX(66px) translate(-3px, -3px);
  }
}

@keyframes orbit-middle {
  from {
    transform: rotate(0deg) translateX(48px) translate(-3px, -3px);
  }
  to {
    transform: rotate(360deg) translateX(48px) translate(-3px, -3px);
  }
}

@keyframes orbit-inner {
  from {
    transform: rotate(0deg) translateX(28px) translate(-3px, -3px);
  }
  to {
    transform: rotate(360deg) translateX(28px) translate(-3px, -3px);
  }
}

.benefit-card h2,
.notice-card h2 {
  margin: 8px 0 8px;
  font-size: 26px;
}

.benefit-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 22px 0;
}

.benefit-metrics div {
  min-height: 74px;
  padding: 12px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.22);
}

.benefit-metrics strong,
.benefit-metrics span {
  display: block;
}

.benefit-metrics strong {
  font-size: 17px;
}

.benefit-metrics span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 34px 0 16px;
}

.section-heading h2 {
  margin: 0;
  font-size: 25px;
}

.section-heading p {
  margin: 0;
  text-align: right;
}

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

.api-card {
  overflow: hidden;
}

.api-visual {
  display: grid;
  aspect-ratio: 16 / 9;
  width: 100%;
  place-items: center;
  border-bottom: 1px solid var(--line-soft);
  background-size: cover;
  background-position: center;
}

.api-visual span {
  padding: 11px 22px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.52);
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.visual-claude {
  background:
    linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.68)),
    url("/landing-assets/claude.webp");
  background-size: cover;
  background-position: center;
}

.visual-codex {
  background:
    linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.68)),
    url("/landing-assets/codex.webp");
  background-size: cover;
  background-position: center;
}

.visual-gemini {
  background:
    linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.68)),
    url("/landing-assets/gemini.webp");
  background-size: cover;
  background-position: center;
}

.visual-image {
  background:
    linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.68)),
    url("/landing-assets/image-api.webp");
  background-size: cover;
  background-position: center;
}

.api-body {
  padding: 20px 20px 18px;
}

.api-body h3 {
  margin: 0 0 6px;
  font-size: 22px;
}

.api-body p {
  min-height: 58px;
  margin: 0 0 14px;
  font-size: 14px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.tags span {
  padding: 5px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.feature-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 18px 0;
}

.feature-strip span {
  padding: 11px 13px;
  border-radius: 12px;
  color: #dfe7ee;
  font-size: 12px;
  font-weight: 900;
}

.bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
  gap: 18px;
}

.terminal-card,
.notice-card {
  min-height: 166px;
  padding: 22px;
}

pre {
  margin: 0;
  overflow-x: auto;
}

code {
  color: #d8f2ff;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 1.65;
}

code::selection {
  background: rgba(139, 220, 255, 0.3);
}

.notice-card ul {
  padding: 0;
  margin: 10px 0 0;
  list-style: none;
}

.notice-card li {
  position: relative;
  margin: 10px 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.6;
}

.notice-card li::before {
  position: absolute;
  top: 9px;
  left: 0;
  width: 7px;
  height: 7px;
  content: "";
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  color: var(--dim);
  font-size: 12px;
}

.site-footer a {
  padding: 8px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 1060px) {
  .site-header,
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-grid,
  .bottom-grid {
    /* A zero track minimum lets the terminal's scroll area contain long commands
       instead of making the single-column page wider than its viewport. */
    grid-template-columns: minmax(0, 1fr);
  }

  .api-grid,
  .feature-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-heading p {
    text-align: left;
  }
}

@media (max-width: 680px) {
  .page-shell {
    width: min(100% - 28px, 1380px);
    padding-top: 18px;
  }

  .nav-links {
    justify-content: flex-start;
  }

  .nav-links a {
    padding: 8px 12px;
  }

  .hero-card,
  .benefit-card,
  .terminal-card,
  .notice-card {
    padding: 22px;
  }

  .hero-card h1 {
    font-size: 42px;
  }

  .orbital {
    opacity: 0.42;
    right: -20px;
  }

  .api-grid,
  .feature-strip,
  .benefit-metrics {
    grid-template-columns: 1fr;
  }

  .api-body p {
    min-height: 0;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

.cursor-glow {
  position: fixed;
  left: var(--x, 50vw);
  top: var(--y, 50vh);
  z-index: 2;
  width: 260px;
  height: 260px;
  pointer-events: none;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(139, 220, 255, 0.12) 26%,
    rgba(255, 255, 255, 0.04) 44%,
    transparent 70%
  );
  filter: blur(10px);
  opacity: 0.75;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  transition:
    left 0.12s linear,
    top 0.12s linear;
}

.page-shell {
  position: relative;
  z-index: 3;
}

.api-visual {
  position: relative;
  overflow: hidden;
  background: none !important;
}

.api-visual::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background-size: cover;
  background-position: center;
  transition:
    transform 2.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 2.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.api-visual::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.68));
}

.api-visual span {
  position: relative;
  z-index: 2;
}

.api-card:hover .api-visual::before {
  transform: scale(1.08);
  filter: saturate(1.12) brightness(1.06);
}

.visual-claude::before {
  background-image: url("/landing-assets/claude.webp");
}

.visual-codex::before {
  background-image: url("/landing-assets/codex.webp");
}

.visual-gemini::before {
  background-image: url("/landing-assets/gemini.webp");
}

.visual-image::before {
  background-image: url("/landing-assets/image-api.webp");
}

.button {
  transition:
    transform 0.18s ease;
}

.button:hover {
  transform: translateY(-3px);
}

.gift-icon {
  position: relative;
}

.gift-icon {
  display: grid;
  place-items: center;
}

.gift-svg {
  width: 22px;
  height: 22px;
  stroke: var(--cyan);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(139, 220, 255, 0.35));
}