/* ─────────────────────────────────────────────────────────────
   Leraix — modernisation layer

   Loaded after styles.css, so everything here overrides it. Kept
   as a separate layer on purpose: the base sheet still describes
   the layout, and this file changes how it looks and feels. If a
   change here misbehaves, delete this file and the site still works.

   Design references:
   - open-props (MIT) — fluid type, spacing, shadow and easing scales
   - Geist (SIL OFL 1.1) — typeface, self-hosted, one variable file
   - Brand gradient sampled from the supplied logo mark
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand: cyan → blue → magenta, taken from the mark */
  --brand-cyan: #2ad2f5;
  --brand-blue: #3b82f6;
  --brand-magenta: #e23da8;

  --brand: var(--brand-cyan);
  --brand-deep: var(--brand-blue);
  --brand-grad: linear-gradient(135deg, var(--brand-cyan), var(--brand-blue) 52%, var(--brand-magenta));

  /* Surfaces get a touch more separation than the base sheet */
  --bg: #08080b;
  --bg-soft: #0e0e13;
  --panel: #13131a;
  --line: #23232e;
  --line-bright: #33333f;
  --text: #f4f4f7;
  --muted: #9c9cae;

  --max: 1160px;
  --radius: 16px;
  --radius-lg: 22px;
}

/* ── Type ─────────────────────────────────────────────────── */

body {
  font-family: "Geist", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: clamp(15px, 0.4vw + 14px, 16.5px);
  letter-spacing: -0.011em;
  background-image:
    radial-gradient(60% 50% at 50% 0%, rgba(42, 210, 245, 0.09), transparent 70%),
    radial-gradient(45% 40% at 85% 8%, rgba(226, 61, 168, 0.07), transparent 70%);
  background-repeat: no-repeat;
}

h1, h2, h3, .h1 {
  letter-spacing: -0.032em;
  line-height: 1.06;
}

h1, .h1 {
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  font-weight: 620;
}

h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  font-weight: 600;
}

p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* The headline gradient, now in the real brand colours */
.grad,
h1 .grad {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Buttons ──────────────────────────────────────────────── */

.btn {
  border-radius: 11px;
  font-weight: 560;
  letter-spacing: -0.01em;
  transition: transform 0.18s var(--ease-2, cubic-bezier(.2,.7,.3,1)),
              box-shadow 0.18s var(--ease-2, cubic-bezier(.2,.7,.3,1)),
              background 0.18s ease, border-color 0.18s ease;
}

.btn.primary {
  background: var(--brand-grad);
  color: #06060a;
  border: 0;
  font-weight: 640;
  box-shadow: 0 6px 22px rgba(59, 130, 246, 0.28);
}

.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.36);
  text-decoration: none;
}

.btn:not(.primary):hover {
  transform: translateY(-1px);
  border-color: var(--line-bright);
  text-decoration: none;
}

/* ── Cards ────────────────────────────────────────────────── */

.card,
.step-card,
.feature {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover,
.step-card:hover,
.feature:hover {
  border-color: var(--line-bright);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
}

/* ── Hero screenshot ──────────────────────────────────────── */

.hero-shot {
  position: relative;
  margin: 40px auto 0;
  max-width: 640px;
}

.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-bright);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

/* soft brand glow behind the panel */
.hero-shot::before {
  content: "";
  position: absolute;
  inset: -14% -8% -6%;
  background: var(--brand-grad);
  filter: blur(64px);
  opacity: 0.17;
  z-index: -1;
  border-radius: 50%;
}

/* ── Feedback ─────────────────────────────────────────────── */

.feedback {
  display: grid;
  gap: 18px;
  max-width: 620px;
  margin: 0 auto;
}

.feedback .row {
  display: grid;
  gap: 8px;
  text-align: left;
}

.feedback label {
  font-size: 0.86rem;
  font-weight: 540;
  color: var(--muted);
}

.feedback input,
.feedback textarea,
.feedback select {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.feedback input:focus,
.feedback textarea:focus,
.feedback select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.feedback textarea {
  min-height: 132px;
  resize: vertical;
}

.feedback .actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.feedback .note {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}

.feedback .sent {
  display: none;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.09);
  color: #b9f5cd;
  font-size: 0.9rem;
}

.feedback .sent.show { display: block; }

/* ── Accessibility ────────────────────────────────────────── */

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

:focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ─────────────────────────────────────────────────────────────
   Motion

   Every hidden initial state is scoped to `html.motion`, a class
   the inline head script adds only when the visitor has not asked
   for reduced motion. If motion.js never runs, the class is
   removed and the page is fully visible. No JS, no blank page.
   ───────────────────────────────────────────────────────────── */

html.motion .hero .pill,
html.motion .hero h1,
html.motion .hero .lede,
html.motion .hero .cta,
html.motion .hero .meta {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}

html.motion .hero-shot {
  opacity: 0;
  transform: translateY(26px) scale(0.975);
  will-change: opacity, transform;
}

html.motion section .eyebrow,
html.motion section > .wrap > h2,
html.motion section .sub,
html.motion #feedback .feedback {
  opacity: 0;
  transform: translateY(16px);
}

html.motion .grid > .card,
html.motion .prices > .price {
  opacity: 0;
  transform: translateY(18px);
}

/* Nav condenses once the page moves (toggled by ScrollTrigger) */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background 0.28s ease, border-color 0.28s ease, backdrop-filter 0.28s ease;
  border-bottom: 1px solid transparent;
}

.nav.is-stuck {
  background: rgba(8, 8, 11, 0.74);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--line);
}

/* Ambient drift behind the hero — CSS only, no JS cost */
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(2%, -3%, 0) scale(1.06); }
}

html.motion .hero::after {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70vh;
  background:
    radial-gradient(38% 46% at 22% 28%, rgba(42, 210, 245, 0.16), transparent 70%),
    radial-gradient(34% 42% at 78% 18%, rgba(226, 61, 168, 0.14), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  z-index: -1;
  animation: drift 18s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  html.motion .hero::after { animation: none; }
}

/* Feedback: failure state. Reuses the .sent element rather than adding
   another node, so the form has exactly one place to report an outcome. */
.feedback .sent.is-error {
  border-color: rgba(239, 120, 120, 0.4);
  background: rgba(239, 120, 120, 0.1);
  color: #ffc9c9;
}