/* ezkea.com — marketing site for EZ-Kea.
 *
 * Design tokens are lifted verbatim from the application's own stylesheet
 * (ez-kea/static/css/styles.css) so the site and the product read as one
 * thing: charcoal console theme, hue-neutral greys, and only the two brand
 * signal colors (hub blue, key orange) carrying any color.
 *
 * Layout rhythm follows a left-aligned hero + centered interior sections,
 * with alternating section backgrounds separated by hairlines.
 *
 * No build step, no framework, no external requests. Inter is self-hosted
 * for the same reason the app vendors it: no third-party fetch at page load. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700.woff2') format('woff2');
}

:root {
  --bg: #13141a;
  --surface: #1b1d23;
  --surface-raised: #232530;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.17);

  --text-primary: #f2f1ee;
  --text-secondary: #96939c;

  /* Hub blue — links, section eyebrows, the accent half of each headline. */
  --accent: #1ba1d8;
  --accent-hover: #56c1ea;
  --on-accent: #071b24;

  /* Key orange — the single primary-action color, used sparingly. */
  --brand-orange: #f58b1e;
  --brand-orange-hover: #ffa847;
  --on-orange: #1f0f00;

  --success-green: #10b981;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, monospace;

  /* Wide enough that the hero screenshot is legible at desktop sizes. Every
     section shares it, so the header wordmark, the hero headline, and the
     section grids all sit on the same left edge. */
  --wrap: 1240px;
}

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

html {
  scroll-behavior: smooth;
  /* Anchored sections shouldn't slide under the sticky header. */
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The width/height attributes on each <img> reserve layout space so nothing
   reflows as images load. height:auto is what lets the intrinsic aspect ratio
   win once CSS shrinks the width — without it the height attribute is taken
   literally and the screenshots stretch vertically. */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
}

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

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- layout */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* Interior sections alternate between --bg and --surface, each opening with
   a hairline, which is what gives the page its banded rhythm. */
section {
  padding: 96px 0;
  border-top: 1px solid var(--border);
}

section.alt {
  background: var(--surface);
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(19, 20, 26, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  /* Mirrors the app navbar's 2px accent top border. */
  border-top: 2px solid var(--accent);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 60px;
}

/* Wordmark: mono, uppercase, wide-tracked, with the app's blinking terminal
   cursor after it. The app's single deliberate animation, reused here. */
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wordmark img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.wordmark .cursor {
  color: var(--accent);
  animation: cursor-blink 1.1s steps(1) infinite;
}

@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}

.site-nav a {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
}

.site-nav a:hover {
  color: var(--text-primary);
}

.site-nav .btn {
  font-size: 0.85rem;
  padding: 7px 14px;
}

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

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Key orange is the one primary action on the page. Everything else is
   outlined, so the eye lands on "try the demo" without any hierarchy fight
   against the blue used for links and eyebrows. */
.btn-primary {
  background: var(--brand-orange);
  color: var(--on-orange);
}

.btn-primary:hover {
  background: var(--brand-orange-hover);
  color: var(--on-orange);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ---------------------------------------------------------------- typography */

/* Small uppercase mono kicker above each section heading. */
.eyebrow {
  margin: 0 0 14px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.6rem);
}

h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.3rem);
}

/* The second clause of a headline, in hub blue. */
.hl {
  color: var(--accent);
}

.lede {
  margin: 22px 0 0;
  color: var(--text-secondary);
  font-size: 1.075rem;
  line-height: 1.7;
}

.section-head {
  max-width: 700px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-head .lede {
  margin-top: 18px;
}

/* ---------------------------------------------------------------- hero */

.hero {
  padding: 92px 0 100px;
  border-top: none;
  /* Same top vignette the app layers over its background. */
  background:
    radial-gradient(ellipse 1400px 700px at 50% -12%, rgba(255, 255, 255, 0.035), transparent 60%),
    var(--bg);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 56px;
  align-items: center;
}

/* The hero screenshot is a full 1680x1000 capture of a dense table UI, so it
   needs real width before the content inside it is legible. Letting it bleed
   into the right gutter buys that width without squeezing the headline column
   into bad line breaks. */
@media (min-width: 1100px) {
  .hero-grid > .shot {
    margin-right: -24px;
  }
}

.hero h1 {
  max-width: 15ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

.pills li {
  padding: 5px 13px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

/* Screenshots sit in the same card treatment the app uses, which makes them
   look mounted rather than pasted onto the page. */
.shot {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 18px 40px -20px rgba(0, 0, 0, 0.8);
}

/* ---------------------------------------------------------------- stats */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.stat {
  padding: 28px 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  text-align: center;
}

section.alt .stat {
  background: var(--surface-raised);
}

.stat-num {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.stat-label {
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- cards */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.card {
  padding: 26px 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 8px 20px -12px rgba(0, 0, 0, 0.6);
}

section.alt .card {
  background: var(--surface-raised);
}

/* Card titles get the same mono uppercase treatment as section eyebrows —
   it reads as a label on a rack panel rather than a heading. */
.card h3 {
  margin: 0 0 12px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.65;
}

/* Prose blocks — heading + paragraph, no card chrome. */
.prose-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.prose-blocks h3 {
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.prose-blocks p {
  margin: 14px 0 0;
  color: var(--text-secondary);
  font-size: 0.96rem;
  line-height: 1.7;
}

/* ---------------------------------------------------------------- gallery */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.gallery figure {
  margin: 0;
}

.gallery figcaption {
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

/* ---------------------------------------------------------------- licensing */

.license-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.license-list li {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.96rem;
  line-height: 1.6;
}

section.alt .license-list li {
  background: var(--surface-raised);
}

.license-list strong {
  color: var(--text-primary);
}

/* Step number in the same mono/blue register as the eyebrows. */
.license-list .step {
  flex: none;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding-top: 2px;
}

.pullquote {
  margin: 24px 0 0;
  padding: 20px 24px;
  border-left: 2px solid var(--brand-orange);
  background: rgba(245, 139, 30, 0.07);
  border-radius: 0 8px 8px 0;
  color: var(--text-primary);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- quickstart */

.code-block {
  margin: 0;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.38);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.8;
  overflow-x: auto;
}

.code-block .c {
  color: var(--text-secondary);
}

.code-block .p {
  color: var(--success-green);
  user-select: none;
}

/* ---------------------------------------------------------------- cta */

.cta {
  text-align: center;
}

/* The hero constrains its h1 to a short measure for a deliberate two-line
   break. In a centered context that leaves the block itself off-centre, so
   the constraint is re-centred rather than dropped. */
.cta h1 {
  max-width: 22ch;
  margin-inline: auto;
}

.cta .lede {
  max-width: 640px;
  margin-inline: auto;
}

.cta .hero-actions {
  justify-content: center;
  margin-top: 30px;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  padding: 40px 0;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: var(--text-secondary);
}

.site-footer a:hover {
  color: var(--text-primary);
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 940px) {
  section {
    padding: 72px 0;
  }

  .hero {
    padding: 64px 0 76px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .hero h1 {
    max-width: none;
  }

  .grid-3,
  .prose-blocks,
  .stats {
    grid-template-columns: 1fr;
  }

  .prose-blocks {
    gap: 32px;
  }

  /* The header nav links collapse; the demo button stays. */
  .nav-links {
    display: none;
  }
}

@media (max-width: 640px) {
  .grid-2,
  .gallery {
    grid-template-columns: 1fr;
  }

  .section-head {
    margin-bottom: 40px;
  }

  .hero-actions .btn {
    flex: 1 1 auto;
  }

  .site-footer ul {
    margin-left: 0;
    gap: 14px 20px;
  }
}

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

  .wordmark .cursor {
    animation: none;
  }

  .btn {
    transition: none;
  }
}