:root {
  --blue: #1d1aff;
  --blue-ink: #1612e8;     /* slightly deeper for big text */
  --red: #ec3a52;          /* comparison "don't" column */
  --white: #ffffff;
  --ink: #14141f;
  --cell: 12px;            /* must match CELL in pixels.js (informational) */
  --maxw: 1180px;
  --section-w: 860px;      /* shared content width for card / panel / comparison */

  /* Fluid type scale (Utopia-style), fluid between 320px and 1240px viewport.
     The display min is small enough that the wordmark fits narrow phones. */
  --fs-display: clamp(4rem, 1.74rem + 11.30vw, 10.5rem);   /* 64 -> 168 */
  --fs-h2:      clamp(1.625rem, 1.06rem + 2.83vw, 3.25rem);    /* 26 -> 52 */
  --fs-lead:    clamp(1.3125rem, 1.03rem + 1.42vw, 2.125rem);  /* 21 -> 34 */
  --fs-body:    clamp(1.0625rem, 0.91rem + 0.76vw, 1.5rem);    /* 17 -> 24 */
}

/* League Spartan — variable font, weight axis 100–900 */
@font-face {
  font-family: "League Spartan";
  src: url("LeagueSpartan-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "League Spartan", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The pixel field sits behind all content, fixed to the viewport */
#pixels {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Everything else floats above the canvas */
.site-header,
main,
.site-footer { position: relative; z-index: 1; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px clamp(20px, 5vw, 64px);
  background: var(--white);
  border-bottom: 2px solid transparent;   /* revealed once scrolled (.is-scrolled) */
  transition: border-color .2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--blue); }

.logo { text-decoration: none; }
.logo-mark,
.footer-mark {
  font-family: "League Spartan", sans-serif;
  font-weight: 600;
  letter-spacing: -0.04em;
  font-size: 34px;
  color: var(--blue);
  line-height: 1;
}

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

.btn {
  font-family: inherit;
  font-weight: 600;
  font-size: 17px;
  border-radius: 999px;
  padding: 11px 24px;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid var(--blue);
  transition: transform .12s ease, background-color .15s ease, color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.btn:active { transform: translateY(1px); }

.btn-outline { background: var(--white); color: var(--blue); }
.btn-outline:hover { background: #f0f0ff; }

.btn-solid { background: var(--blue); color: var(--white); }
.btn-solid:hover { background: var(--blue-ink); }

.lang svg { margin-top: 1px; }

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: clamp(40px, 8vw, 90px) clamp(15px, 5vw, 64px) clamp(60px, 12vw, 140px);
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wordmark {
  font-family: "League Spartan", sans-serif;
  font-weight: 600;
  color: var(--blue);
  font-size: var(--fs-display);
  letter-spacing: -0.05em;
  line-height: 0.95;
  margin: 0 0 24px;
}

.tagline {
  font-size: var(--fs-lead);
  font-weight: 400;
  margin: 0 0 8px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.badge {
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 500;
  color: var(--blue);
  border: 2px solid var(--blue);
  border-radius: 999px;
  padding: 6px 16px;
  white-space: nowrap;
}

/* Cards / panels carry the "clear" class so the pixel field opens up around them */
.card {
  background: var(--white);
  border-radius: 28px;
  width: 100%;            /* fill the hero column (avoids shrink-to-fit overflow) */
  max-width: var(--section-w);
  margin: clamp(40px, 7vw, 80px) auto 0;
  padding: clamp(15px, 3.5vw, 40px);
}

/* wordmark + tagline centred in the space above the card; card stays at bottom */
.hero-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-lead {
  font-size: var(--fs-lead);
  font-weight: 400;
  margin: 0 0 28px;
  text-align: center;
  text-wrap: balance;
}

/* ---------- Signup form ---------- */
.signup {
  display: flex;
  gap: 4px;
  align-items: stretch;
  border: 2px solid var(--blue);
  border-radius: 999px;
  padding: 6px;
  background: var(--white);
  max-width: 680px;
  margin: 0 auto;
}

.signup input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 400;
  padding: 14px 2px 14px 18px;
  color: var(--ink);
  min-width: 0;
}
.signup input::placeholder { color: #9a9ab0; }

.join-btn {
  border: none;
  padding: 14px 40px;
  font-size: var(--fs-body);
  flex-shrink: 0;
}

.form-note {
  text-align: center;
  margin: 18px 0 0;
  font-weight: 500;
  color: var(--blue);
}
.form-note--error { color: #c0392b; }

.signup-inline { margin-top: 28px; }

/* ---------- Text sections ---------- */
.text-section {
  padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 64px);
  display: flex;
  justify-content: center;
}

/* Transparent panel: the pixel field is masked OUT around it,
   leaving a clean framed area for the text (see Image 2). */
.panel {
  max-width: var(--section-w);
  background: transparent;
  padding: clamp(14px, 2.8vw, 32px);
  border-radius: 24px;
}

.panel h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--blue);
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}

.panel p {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.45;
  color: var(--blue);
  margin: 0;
}

/* ---------- Comparison ---------- */
.comparison {
  max-width: var(--section-w);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(36px, 8vw, 120px);
}

.compare-col { flex: 1 1 300px; max-width: 460px; }

.compare-emoji {
  display: block;
  text-align: center;
  font-size: clamp(54px, 7vw, 88px);
  line-height: 1;
  margin: 0 0 clamp(20px, 3vw, 36px);
}

.compare-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.4vw, 28px);
}

.compare-col li {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.2;
}

.compare-good li { color: var(--blue); }
.compare-bad li { color: var(--red); }

/* When the two columns stack into one, centre the text */
@media (max-width: 820px) {
  .compare-col { flex-basis: 100%; max-width: 100%; }
  .compare-col ul { align-items: center; text-align: center; }
}

/* ---------- Footer ---------- */
/* No background colour: the blue here comes from the pixel field, which
   reaches its solid motif in the footer region. White text sits on top. */
.site-footer {
  background: transparent;
  color: var(--white);
  padding: clamp(70px, 12vw, 140px) clamp(20px, 5vw, 64px) 60px;
}

.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}

.footer-mark { color: var(--white); font-size: 64px; display: inline-block; }

.footer-tag {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 400;
  margin: 16px 0 28px;
  opacity: .9;
  
}

.footer-tag a {
  color: var(--white);
  text-decoration: underline;
  font-weight: 600;
}

.footer-tag a:hover {
  text-decoration-style: dashed;
}

/* Partner logos (white, on the solid-blue footer) */
.footer-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 56px);
  margin-block-start: clamp(40px, 6vw, 72px);
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity .15s ease;
}
.footer-logo:hover { opacity: .8; }

.footer-logo svg { height: 45px; width: auto; display: block; }
/* recolour the two-tone logo to white, knocking the inner mark out to the
   footer blue so it reads as a cut-out against the solid field */
.footer-logo .color-text { fill: var(--white); }
.footer-logo .color-pane { fill: var(--blue); }

/* Eurosky logo is a single-colour SVG that inherits currentColor */
.footer-logo--eurosky { color: var(--white); }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .join-btn { padding: 14px 24px; }
  .tagline { flex-direction: column; gap: 10px; }
}

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