/* ═══════════════════════════════════════════════════════════════
   ClubLe company site — shared design system
   Brand tokens mirror /padel/shared.css; keep the two in sync.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --brand: #4F46E5;
  --brand-light: #818CF8;
  --brand-pale: #EEF2FF;
  --brand-deep: #3730A3;
  --dark: #0C0A1D;
  --grey: #6B7280;
  --grey-light: #E3E2DD;
  --grey-100: #F3F2EE;
  --white: #FFFFFF;
  --green: #059669;
  --green-light: #D1FAE5;
  /* Accent aliases mirrored from padel/shared.css so components in
     components/ render the same on either stylesheet. */
  /* Secondary text on a tinted surface: --grey lands at 3.4-4.4:1 on the
     hero lavender and the grey fills, so those uses take --grey-strong,
     which clears 4.5:1 on the most saturated of them. Body copy on --paper
     keeps --grey. --green-deep does the same job for the badge. */
  --grey-strong: #4E5462;
  --green-deep: #046B4C;
  --brand-primary: var(--brand);
  --accent-green: var(--green);
  --accent-sky: #0EA5E9;
  --amber: #D97706;
  --paper: #FAFAF7;
  --footer-a: #16122e;
  --footer-b: #0C0A1D;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-logo: 'Sora', sans-serif;
  --radius: 20px;
  --radius-btn: 60px;
  --radius-input: 16px;
  --shadow-soft: 0 8px 40px color-mix(in srgb, var(--brand) 5%, transparent);
  --maxw: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  min-height: 100%;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--dark);
}

body { position: relative; overflow-x: clip; }

/* Ambient brand wash + film grain, as on the padel landing page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 30% 20%, color-mix(in srgb, var(--brand) 6%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 75% 60%, color-mix(in srgb, var(--amber) 3%, transparent) 0%, transparent 50%);
  pointer-events: none;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  opacity: 0.03;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; }
a { color: var(--brand); }
h1, h2, h3, h4 { text-wrap: balance; font-family: var(--font-display); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Locale-aware currency (default GBP for noscript/unknown) ── */
.price[data-amount]::before { content: '£' attr(data-amount); }
html[data-currency="GBP"] .price[data-amount]::before { content: '£' attr(data-amount); }
html[data-currency="EUR"] .price[data-amount]::before { content: '€' attr(data-amount); }
html[data-currency="USD"] .price[data-amount]::before { content: '$' attr(data-amount); }

/* ═══════════════ Logo mark (CSS-drawn double circle) ═══════════════ */

.logo-mark {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.logo-circle,
.logo-circle-inner {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.logo-circle {
  width: 100%;
  height: 100%;
  border: 2.8px solid var(--brand);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 70%);
}

.logo-circle-inner {
  top: 19.4%;
  left: 19.4%;
  width: 61.1%;
  height: 61.1%;
  border: 2.8px solid var(--brand-light);
  clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0 100%);
}

.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-lockup .logo-text {
  font-family: var(--font-logo);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--dark);
}

/* ═══════════════ Header / nav ═══════════════ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 247, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(227, 226, 221, 0.6);
}

.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 32px;
}

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

.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--grey);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 50px;
  transition: color 0.2s, background 0.2s;
}

.nav-links a:hover { color: var(--dark); background: var(--grey-100); }

.nav-links a.active {
  color: var(--brand);
  background: var(--brand-pale);
  font-weight: 600;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.2px;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
}

.btn .arrow { transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary {
  padding: 15px 36px;
  font-size: 16px;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 4px 24px color-mix(in srgb, var(--brand) 25%, transparent);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--brand) 35%, transparent);
  background: color-mix(in srgb, var(--brand) 85%, #000);
}

.btn-ghost {
  padding: 14px 34px;
  font-size: 16px;
  color: var(--brand);
  background: transparent;
  border: 1.5px solid var(--brand-light);
}

.btn-ghost:hover { border-color: var(--brand); background: var(--brand-pale); }

.btn-sm { padding: 10px 22px; font-size: 14px; }

/* Burger (mobile only) */
.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  color: var(--dark);
  align-items: center;
  justify-content: center;
}

.nav-burger:hover { background: var(--grey-100); }

.mobile-nav {
  display: none;
  flex-direction: column;
  padding: 8px 20px 20px;
  border-top: 1px solid rgba(227, 226, 221, 0.6);
}

.mobile-nav a {
  font-size: 16px;
  font-weight: 500;
  color: var(--dark);
  text-decoration: none;
  padding: 13px 8px;
  border-bottom: 1px solid var(--grey-100);
}

.mobile-nav a.active { color: var(--brand); font-weight: 600; }
/* .mobile-nav a is (0,1,1) and declared after .btn-primary, so it wins on
   colour, padding, weight and the divider unless the pill takes them back.
   components/chrome.css carries the same guard for the padel-family pages. */
.mobile-nav .btn {
  margin-top: 16px;
  color: #fff;
  padding: 15px 36px;
  font-weight: 600;
  border-bottom: none;
}

.site-header.nav-open .mobile-nav { display: flex; }

@media (max-width: 880px) {
  .header-inner { padding: 13px 20px; }
  .nav-links { display: none; }
  .nav-actions .btn { display: none; }
  .nav-burger { display: inline-flex; }
}

/* ═══════════════ Layout helpers ═══════════════ */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

.wrap--narrow { max-width: 760px; }

section { position: relative; z-index: 1; }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-pale);
  padding: 7px 16px;
  border-radius: 50px;
  margin-bottom: 24px;
}

.section-title {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1.12;
  color: var(--dark);
  margin-bottom: 16px;
}

.section-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--grey);
  max-width: 620px;
}

.center { text-align: center; }
.center .section-lead { margin-left: auto; margin-right: auto; }

/* ═══════════════ Hero ═══════════════ */

.hero {
  position: relative;
  z-index: 1;
  isolation: isolate;
  text-align: center;
  /* One screen exactly: the sticky header sits in flow above this, so
     subtracting its height stops the first screen from overflowing.
     --header-h is measured in site.js; the fallback covers the pre-JS
     paint and is close enough that no shift is visible. */
  min-height: calc(100dvh - var(--header-h, 70px));
  /* Centred rather than top-aligned: the hero is three short elements in a
     full-viewport box, so top-aligning leaves the lower half empty. The
     padding stays as the minimum breathing room once content grows. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 96px 24px 88px;
  animation: fadeUp 0.8s ease-out both;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(120% 90% at 50% 28%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.45) 38%, rgba(255, 255, 255, 0.12) 62%, rgba(255, 255, 255, 0) 80%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand-pale) 30%, transparent) 0%, color-mix(in srgb, var(--paper) 55%, transparent) 64%, var(--paper) 100%),
    linear-gradient(150deg, var(--brand-deep) 0%, var(--brand-light) 70%);
}

.hero h1 {
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 800;
  letter-spacing: -2.2px;
  line-height: 1.05;
  color: var(--dark);
  max-width: 800px;
  margin: 0 auto 40px;
}

.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}


/* Sub-page hero (lighter) */
.page-hero {
  text-align: center;
  padding: 80px 24px 24px;
  animation: fadeUp 0.8s ease-out both;
}

.page-hero h1 {
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 700;
  letter-spacing: -1.6px;
  line-height: 1.08;
  color: var(--dark);
  max-width: 720px;
  margin: 0 auto 20px;
}

.page-hero p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--grey-strong);
  max-width: 580px;
  margin: 0 auto;
}

/* ═══════════════ Pills (match dimensions) ═══════════════ */

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;
  /* Eight pills need 1167px and the wrap gives 1056, so one always orphaned
     onto its own line. Held to the same measure as .section-lead above it,
     they break 4 and 4 instead. */
  max-width: 620px;
  margin-inline: auto;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: clamp(12.5px, 1.2vw, 15px);
  font-weight: 400;
  color: var(--grey);
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: 50px;
  padding: 0.5em 1em;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
}

.pill .dot {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ═══════════════ Cards ═══════════════ */

.card {
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow-soft);
}

/* Card titles are h2 where the card sits directly under the page h1
   (team, press) and h3 where a section heading precedes them. */
.card h2,
.card h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--dark);
  margin-bottom: 10px;
}

.card p { font-size: 15px; line-height: 1.65; color: var(--grey); }

/* ═══════════════ Feature rows (text + phone screenshot) ═══════════════ */

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
  padding: 56px 0;
}

.feature-row:nth-child(even) .feature-row-text { order: 2; }

.feature-row-text h3 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.8px;
  color: var(--dark);
  margin-bottom: 14px;
}

.feature-row-text p { font-size: 16px; line-height: 1.7; color: var(--grey); }

.feature-row-image { text-align: center; }

.feature-row-image img {
  max-width: min(100%, 300px);
  border-radius: 28px;
  box-shadow: 0 24px 64px rgba(12, 10, 29, 0.14);
}

@media (max-width: 780px) {
  .feature-row { grid-template-columns: 1fr; padding: 36px 0; }
  .feature-row:nth-child(even) .feature-row-text { order: 0; }
}

/* ═══════════════ Numbered steps ═══════════════ */

.steps { display: grid; gap: 18px; counter-reset: step; }

.step {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow-soft);
}

.step-num {
  counter-increment: step;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-pale);
  color: var(--brand);
  font-weight: 700;
  font-size: 16px;
}

.step-num::before { content: counter(step); }

.step h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 6px;
  color: var(--dark);
}

.step p { font-size: 15px; line-height: 1.65; color: var(--grey); }

/* ═══════════════ Verticals ═══════════════ */

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

.vertical-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: var(--dark);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

a.vertical-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-light);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--brand) 10%, transparent);
}

/* Muted by surface and emoji, not by a blanket opacity: dimming the whole
   card took its body copy below 4.5:1. */
.vertical-card--soon { background: var(--grey-100); }
.vertical-card--soon .vertical-emoji { opacity: 0.55; }
.vertical-card--soon h3 { color: var(--grey-strong); }

.vertical-emoji { display: block; width: 40px; height: 40px; }
.vertical-emoji img { display: block; width: 100%; height: 100%; }

.vertical-card h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.vertical-card p { font-size: 14.5px; line-height: 1.6; color: var(--grey-strong); }

.badge {
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 50px;
}

.badge--live { color: var(--green-deep); background: var(--green-light); }
.badge--soon { color: var(--grey-strong); background: var(--grey-light); }

.vertical-card .card-link {
  margin-top: auto;
  padding-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
}

@media (max-width: 880px) {
  .vertical-grid { grid-template-columns: 1fr; }
}

/* ═══════════════ Price strip / card ═══════════════ */

.price-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 32px;
  background: var(--grey-100);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--dark);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.price-strip:hover {
  transform: translateY(-3px);
  border-color: var(--brand-light);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--brand) 8%, transparent);
}

.price-strip .price-amount {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1;
}

.price-strip .price-suffix { font-size: 19px; font-weight: 500; color: var(--grey-strong); margin-left: 4px; }
.price-strip .price-period { font-size: 14px; color: var(--grey-strong); margin-top: 4px; }

.price-strip .price-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .price-strip { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 24px; }
  .price-strip .price-amount { font-size: 38px; }
}

.pricing-card {
  max-width: 460px;
  margin: 0 auto;
  padding: 40px 32px 32px;
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.pricing-card-amount {
  font-size: clamp(48px, 8vw, 64px);
  font-weight: 700;
  letter-spacing: -2.5px;
  color: var(--dark);
  line-height: 1;
  margin-bottom: 10px;
}

.pricing-card-period { font-size: 15px; color: var(--grey); margin-bottom: 28px; }
.pricing-card .btn { width: 100%; }
.pricing-card-note { font-size: 13px; color: var(--grey); margin-top: 16px; }

/* Included / excluded lists */
.pricing-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.pricing-lists h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 20px; }

.pricing-list { list-style: none; }

.pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  font-size: 15px;
  line-height: 1.5;
  border-bottom: 1px solid var(--grey-light);
}

.pricing-list li:last-child { border-bottom: 0; }
.pricing-list .icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
.pricing-list--dont li { color: var(--grey); }

@media (max-width: 640px) {
  .pricing-lists { grid-template-columns: 1fr; gap: 40px; }
}

/* ═══════════════ CTA band ═══════════════ */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  border-radius: 28px;
  padding: 64px 32px;
  background:
    radial-gradient(ellipse 70% 80% at 15% 0%, color-mix(in srgb, var(--brand-light) 35%, transparent) 0%, transparent 60%),
    linear-gradient(150deg, var(--brand-deep) 0%, var(--brand) 75%);
  color: #fff;
}

.cta-band h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -1.2px;
  margin-bottom: 14px;
}

.cta-band p {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 480px;
  margin: 0 auto 32px;
}

.cta-band .btn-primary {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.cta-band .btn-primary:hover { background: var(--brand-pale); }

/* ═══════════════ Forms (get started) ═══════════════ */

.form-input {
  width: 100%;
  padding: 18px 24px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--dark);
  background: #fff;
  border: 1.5px solid var(--grey-light);
  border-radius: var(--radius-input);
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input::placeholder { color: #B0B5C0; font-weight: 300; }

.form-input:focus {
  border-color: var(--brand-light);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 8%, transparent);
}

.form-input.invalid {
  border-color: #DC2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08);
}

.input-wrap { position: relative; margin-bottom: 16px; }

.field-error {
  font-size: 13px;
  color: #DC2626;
  margin: -10px 0 12px;
  text-align: left;
  padding-left: 4px;
  display: none;
}

.form-error { font-size: 14px; color: #DC2626; margin-top: 8px; display: none; }

.autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid var(--grey-light);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  z-index: 100;
  display: none;
}

.autocomplete-item {
  padding: 13px 20px;
  font-size: 15px;
  color: var(--dark);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.autocomplete-item span { font-size: 13px; color: var(--grey); margin-left: 6px; }
.autocomplete-item:hover, .autocomplete-item.active { background: var(--brand-pale); }

.success-msg {
  font-size: 18px;
  font-weight: 600;
  color: var(--dark);
  letter-spacing: -0.3px;
  animation: fadeUp 0.5s ease-out both;
}

.success-msg span {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: var(--grey);
  margin-top: 8px;
}

/* ═══════════════ Prose (about / careers / legal) ═══════════════ */

.prose { font-size: 16px; line-height: 1.75; color: var(--dark); }
.prose p { margin-bottom: 18px; color: var(--grey); }
.prose p strong, .prose li strong { color: var(--dark); }

.prose h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 44px 0 14px;
}

.prose h3 { font-size: 17px; font-weight: 700; margin: 28px 0 10px; }
.prose ul, .prose ol { margin: 0 0 18px 22px; color: var(--grey); }
.prose li { margin-bottom: 8px; }
.prose .updated { font-size: 13.5px; color: var(--grey); margin-bottom: 36px; }

/* ═══════════════ Spacing rhythm ═══════════════ */

.section-pad { padding-top: 88px; padding-bottom: 0; }
.section-pad--last { padding-bottom: 96px; }

@media (max-width: 640px) {
  .section-pad { padding-top: 64px; }
  .section-pad--last { padding-bottom: 72px; }
  .hero { padding: 72px 20px 64px; }
  .page-hero { padding: 56px 20px 8px; }
  .wrap { padding-left: 20px; padding-right: 20px; }
}

/* ═══════════════ Footer ═══════════════ */

.site-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 96px;
  background:
    radial-gradient(ellipse 70% 80% at 0% 0%, color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, var(--footer-a) 0%, var(--footer-b) 55%);
  padding: 60px 32px 0;
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
}

.footer-inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}

.footer-brand .logo-lockup .logo-text { color: rgba(255, 255, 255, 0.9); }
.footer-brand .logo-circle { border-color: rgba(255, 255, 255, 0.8); }
.footer-brand .logo-circle-inner { border-color: rgba(255, 255, 255, 0.4); }

.footer-tagline {
  margin-top: 16px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.65;
  max-width: 230px;
}

.footer-social { display: flex; gap: 16px; margin-top: 20px; }

.footer-social a {
  color: rgba(255, 255, 255, 0.6);
  display: inline-flex;
  transition: color 0.2s;
}

.footer-social a:hover { color: #fff; }

.footer-col h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 18px;
}

.footer-col nav { display: flex; flex-direction: column; gap: 12px; }

.footer-col a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-col a:hover { color: rgba(255, 255, 255, 0.95); }

.footer-col .soon {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  cursor: default;
}

/* Touch pointers get a real tap area on the footer links, which are only
   18px tall by their type size. The row gap shrinks to keep the visual
   rhythm close to the mouse layout, and the social icons pull left by
   their own padding so the column stays optically aligned. */
@media (pointer: coarse) {
  .footer-col nav { gap: 0; }
  .footer-col a,
  .footer-col .soon { padding: 13px 0; }
  .footer-social { gap: 0; margin-left: -12px; }
  .footer-social a { padding: 12px; }
}

.footer-bottom {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom span { line-height: 1.8; }

@media (max-width: 980px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .site-footer { padding: 48px 24px 0; margin-top: 72px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ══════════════ Resilience: keyboard, no-JS, browser-drawn surfaces ══════════════ */

/* Off-canvas until focused, then a real target above the sticky header. */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100%;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 0 0 14px 14px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s ease-out;
}
.skip-link:focus { top: 0; }
#main:focus { outline: none; }

/* The browser default ring is invisible on the indigo button and on the dark
   footer, so the ring is drawn from the palette instead. :where() keeps the
   specificity at zero so component rules can still override it. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}
:where(.site-footer) :where(a, button):focus-visible { outline-color: #fff; }
:where(.btn):focus-visible { outline-color: var(--dark); }

::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--dark); }
.site-footer ::selection { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* A long unbroken string (a URL, a compound word in a longer language) wraps
   instead of pushing the layout wider than the viewport. */
h1, h2, h3, h4, p, li, a, .btn { overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
  /* Collapse the entrance keyframes to their end state rather than killing all
     motion: content arrives without travelling, while hover, focus and menu
     transitions keep the feedback they carry. */
  @keyframes fadeUp { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } }
  @keyframes slotPop { from { transform: none; } to { transform: none; } }
}

/* The company pages lay out in normal flow, so the main landmark only needs
   to span the viewport; see components/chrome.css for the flex-body case. */
#main { width: 100%; }