/* ============================================================
   TalkSpree Landing - shared design system
   Brand: blue → violet gradient (#4A72FF → #BF48FF) on clean white,
   matching the in-app "Apple-minimal" design language.
   ============================================================ */

:root {
  --blue: #4a72ff;
  --violet: #bf48ff;
  --deep: #14102a;          /* dark section background */
  --deep-2: #0e0b1f;
  --ink: #16121f;
  --ink-soft: #4b4757;
  --ink-dim: #7c7889;
  --paper: #ffffff;
  --paper-soft: #f7f7fb;
  --line: #e8e6f0;
  --green: #34d399;         /* "connection made" green */
  --green-soft: #d1fae5;
  --grad: linear-gradient(120deg, var(--blue), var(--violet));
  --grad-soft: linear-gradient(120deg, rgba(74, 114, 255, 0.08), rgba(191, 72, 255, 0.08));
  --radius-lg: 2rem;
  --radius-md: 1.25rem;
  --radius-sm: 0.75rem;
  --shadow-sm: 0 1px 3px rgba(20, 16, 42, 0.08);
  --shadow-md: 0 6px 24px rgba(20, 16, 42, 0.1);
  --shadow-lg: 0 18px 50px rgba(20, 16, 42, 0.16);
  --font-head: "Poppins", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --header-h: 76px;
  /* one rhythm value for "gap between a section heading and its content" */
  --gap-block: clamp(24px, 3vw, 38px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

::selection { background: rgba(191, 72, 255, 0.22); }

/* ---------- Scrollbars ----------
   The default grey bar looked like a browser chrome leftover next to the rest
   of the page, so the site borrows the app's pill-track scrollbar
   (src/index.css, .custom-scrollbar): a soft inset rail with the thumb floating
   inside it - here carrying the brand gradient instead of slate grey.

   Scoped to `html` (the page scrollbar) plus an opt-in .thin-scrollbar for
   inner scroll regions, so form fields and selects keep their native bars. */
/* Setting scrollbar-width/scrollbar-color on an element makes Chrome ignore
   that element's ::-webkit-scrollbar rules entirely, so the standard properties
   are fenced off to engines with no ::-webkit-scrollbar support - Firefox. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: #8f6dff var(--paper-soft); }
  .thin-scrollbar { scrollbar-width: thin; scrollbar-color: #cfcadd transparent; }
}

html::-webkit-scrollbar { width: 14px; height: 14px; }
/* Chrome still paints stepper arrows at both ends unless they are removed;
   they break the pill shape. */
html::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
html::-webkit-scrollbar-track {
  background: var(--paper-soft);
  border-radius: 999px;
  box-shadow: inset 0 1px 4px rgba(20, 16, 42, 0.12);
}
html::-webkit-scrollbar-thumb {
  /* vertical gradient, so the blue-to-violet run reads along the thumb's length;
     background-clip:padding-box turns the border into padding, which is what
     insets the thumb inside the rail */
  background: linear-gradient(180deg, var(--blue), var(--violet));
  background-clip: padding-box;
  border: 3px solid var(--paper-soft);
  border-radius: 999px;
  transition: border-width 0.2s ease;
}
html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3a63ff, #b22bff);
  background-clip: padding-box;
  border-width: 2px;
}
html::-webkit-scrollbar-corner { background: transparent; }

/* Inner scroll regions (modal panels). Mirrors the app's .thin-scrollbar. */
.thin-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scrollbar::-webkit-scrollbar-track { background: transparent; }
.thin-scrollbar::-webkit-scrollbar-thumb {
  background: #d6d2e4;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.thin-scrollbar::-webkit-scrollbar-thumb:hover { background: #b9b3cd; background-clip: padding-box; }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; letter-spacing: -0.02em; }

.wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.wrap-wide { width: min(1360px, calc(100% - 48px)); margin: 0 auto; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* small uppercase kicker above titles - plain text, like the hero's */
.eyebrow {
  display: inline-block;
  font: 700 0.8rem/1.4 var(--font-head);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 800;
  color: var(--ink);
}
.section-sub {
  margin-top: 14px;
  font-size: clamp(1rem, 1.4vw, 1.13rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 640px;
}
.center { text-align: center; }
.center .section-sub { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 700 0.95rem/1 var(--font-head);
  padding: 14px 26px;
  border-radius: 999px;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  color: #fff;
  background: var(--grad);
  box-shadow: 0 8px 22px rgba(107, 93, 255, 0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(107, 93, 255, 0.45); }

.btn-ghost {
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--line);
}
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }

.btn-white {
  color: var(--deep);
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
.btn-white:hover { transform: translateY(-2px); }

.btn-sm { padding: 10px 20px; font-size: 0.88rem; }
.btn-lg { padding: 18px 36px; font-size: 1.05rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
/* Opaque while scrolled, and also whenever the menu panel is open - a
   transparent header floating over the panel read as a glitch. */
.site-header.scrolled,
body.nav-open .site-header {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 6px 24px rgba(20, 16, 42, 0.06);
}
.header-inner {
  width: min(1360px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.brand { display: flex; align-items: center; }
.brand img { height: 22px; width: auto; }

.main-nav { display: flex; justify-content: center; gap: 6px; }
.main-nav a {
  font: 600 0.92rem/1 var(--font-head);
  color: var(--ink-soft);
  padding: 10px 16px;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
}
.main-nav a:hover { color: var(--ink); background: var(--paper-soft); }
.main-nav a.active { color: var(--ink); background: var(--paper-soft); }

.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
/* The open panel carries its own sign-up button, so the header's copy gets out
   of the way instead of showing the same CTA twice. */
.header-actions .btn-primary {
  transition: opacity 0.25s ease 0.05s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s,
              box-shadow 0.2s ease, background 0.2s ease;
}
body.nav-open .header-actions .btn-primary {
  opacity: 0;
  transform: scale(0.88);
  pointer-events: none;
  transition-delay: 0s;
}

/* A square touch target, pulled right by half its own padding so the bars line
   up optically with the page gutter rather than the button's box. */
.nav-burger {
  display: none;
  width: 42px; height: 42px;
  margin-right: -9px;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 12px;
  transition: background 0.2s ease;
}
.nav-burger:hover { background: var(--paper-soft); }
.nav-burger span {
  width: 22px; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.18s ease, width 0.25s ease;
}
body.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-burger span:nth-child(2) { opacity: 0; width: 0; }
body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The panel is always in the DOM (display:none cannot be transitioned) and is
   hidden with visibility + opacity + a small lift. `visibility` is delayed to
   the end of the exit so the fade is actually visible on the way out. */
.mobile-nav {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 99;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 22px 44px -26px rgba(20, 16, 42, 0.5);
  padding: 10px 24px 24px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.26s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.34s;
}
body.nav-open .mobile-nav {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.26s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

/* Dimmed page behind the panel; tapping it closes the menu (shared.js). */
.nav-scrim {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 98;
  background: rgba(14, 11, 31, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
body.nav-open .nav-scrim { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s; }

/* Rows and buttons rise in behind the panel, one after the other. Scoped to
   direct children so the CTA anchors keep their .btn styling. */
.mobile-nav > a,
.mobile-nav > .mobile-nav-actions {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
body.nav-open .mobile-nav > a,
body.nav-open .mobile-nav > .mobile-nav-actions { opacity: 1; transform: none; }
body.nav-open .mobile-nav > *:nth-child(1) { transition-delay: 0.06s; }
body.nav-open .mobile-nav > *:nth-child(2) { transition-delay: 0.11s; }
body.nav-open .mobile-nav > *:nth-child(3) { transition-delay: 0.16s; }
body.nav-open .mobile-nav > *:nth-child(4) { transition-delay: 0.21s; }
body.nav-open .mobile-nav > *:nth-child(5) { transition-delay: 0.26s; }

.mobile-nav > a {
  display: block;
  font: 700 1.06rem/1 var(--font-head);
  padding: 16px 6px;
  border-bottom: 1px solid var(--paper-soft);
  border-radius: 10px;
  transition: opacity 0.3s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease, background 0.2s ease;
}
.mobile-nav > a:hover { color: var(--blue); background: var(--paper-soft); }
.mobile-nav > a:last-of-type { border-bottom: none; }

.mobile-nav .mobile-nav-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.mobile-nav .mobile-nav-actions .btn { flex: 0 1 152px; }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .nav-scrim, .mobile-nav > a, .mobile-nav > .mobile-nav-actions,
  .nav-burger span, .header-actions .btn-primary { transition-duration: 0.01ms !important; }
}

/* ---------- Step tabs (phone navigation) ----------
   Shared by the home page's "journey" tour and how-it-works' member
   walkthrough: both are a list beside a stage on desktop, and on a phone both
   become a centred row of numbered tabs opening into one bubble
   with the visualization underneath. Built by createStepTabs() in shared.js
   from whatever list the page already renders. The active tab loses its bottom
   border and paints over the bubble's, so tab and bubble read as one surface -
   the folder-browser trick from the app's CircleHub.tsx. Each page decides at
   which width to swap its list for this. */
.tour-mnav { display: none; }
/* Centred on the page: the row used to be pinned 16px from the left, which
   read as "slightly off" against a full-width bubble. */
.tmn-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin-bottom: -2px;
}
/* Each tab is the chip plus an even 7px shroud on all sides, so the white
   "folder" that opens into the bubble sits symmetrically around the numeral
   instead of being a wide slab with the chip floating inside it. */
.tmn-btn {
  position: relative;
  flex: 0 0 auto;
  padding: 7px 7px 9px;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  background: transparent;
  transition: background 0.2s ease;
}
/* the numeral chip, identical to .tour-item .t-num on desktop - square */
.tmn-btn .t-num {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--grad-soft);
  border: 1px solid rgba(107, 93, 255, 0.18);
  display: flex; align-items: center; justify-content: center;
  font: 800 0.76rem/1 var(--font-head);
  letter-spacing: 0.04em;
  color: var(--blue);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.tmn-btn:hover .t-num { border-color: rgba(107, 93, 255, 0.4); }
.tmn-btn.on {
  z-index: 3;
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 -3px 10px -5px rgba(20, 16, 42, 0.18);
}
.tmn-btn.on .t-num {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(107, 93, 255, 0.35);
}
/* covers the bubble's top border under the active tab */
.tmn-btn.on::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; bottom: -2px;
  height: 3px;
  background: #fff;
}
.tmn-bubble {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 1.1rem;
  padding: 16px 18px 20px;
  box-shadow: var(--shadow-md);
}
.tmn-bubble h3 { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.tmn-bubble p { margin-top: 8px; font-size: 0.88rem; line-height: 1.6; color: var(--ink-soft); }
.tmn-bubble.swap h3, .tmn-bubble.swap p { animation: fade-slide 0.35s ease; }
@keyframes fade-slide { from { opacity: 0; transform: translateY(-4px); } }
.tmn-bubble .t-bar {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 0%;
  background: var(--grad);
  border-radius: 3px;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(14, 11, 31, 0.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }

.modal-card {
  width: min(480px, 100%);
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 40px 36px 34px;
  text-align: center;
  position: relative;
  transform: translateY(18px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.modal-backdrop.open .modal-card { transform: none; }

.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--paper-soft);
  color: var(--ink-dim);
  font-size: 1rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.modal-close:hover { background: var(--line); color: var(--ink); }

.modal-orb {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font: 800 1.7rem var(--font-head);
  box-shadow: 0 10px 30px rgba(107, 93, 255, 0.4);
}
.modal-card h3 { font-size: 1.45rem; font-weight: 800; margin-bottom: 10px; }
.modal-card p { color: var(--ink-soft); line-height: 1.6; font-size: 0.97rem; }
.modal-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.modal-cta .hint { font-size: 0.82rem; color: var(--ink-dim); margin-top: 4px; }

/* ---------- CTA band (shared) ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--deep);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(36px, 4.5vw, 58px) clamp(24px, 5vw, 60px);
  text-align: center;
  isolation: isolate;
}
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  opacity: 0.55;
}
.cta-band::before { width: 420px; height: 420px; background: var(--blue); top: -180px; left: -120px; }
.cta-band::after { width: 420px; height: 420px; background: var(--violet); bottom: -200px; right: -120px; }
.cta-band h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; }
.cta-band p { margin: 14px auto 0; max-width: 560px; color: rgba(255, 255, 255, 0.78); line-height: 1.65; }

/* Smart CTA: audience toggle changes button copy + destination */
.smart-cta { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.audience-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 5px;
  position: relative;
}
.audience-toggle button {
  position: relative;
  z-index: 1;
  font: 700 0.88rem/1 var(--font-head);
  color: rgba(255, 255, 255, 0.72);
  padding: 11px 22px;
  border-radius: 999px;
  transition: color 0.25s ease;
}
.audience-toggle button.on { color: var(--deep); }
.audience-toggle .thumb {
  position: absolute;
  top: 5px; bottom: 5px;
  border-radius: 999px;
  background: #fff;
  transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.smart-cta .btn-primary { box-shadow: 0 10px 34px rgba(107, 93, 255, 0.55); }
.smart-cta .cta-note { font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: clamp(44px, 5vw, 72px);
  background: var(--deep-2);
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(38px, 4vw, 56px) 0 26px;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.5), transparent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 40px;
}
.footer-brand img { height: 20px; margin-bottom: 18px; }
.footer-brand p { font-size: 0.92rem; line-height: 1.7; color: rgba(255, 255, 255, 0.55); max-width: 300px; }
.footer-col h4 {
  font: 700 0.8rem/1 var(--font-head);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 18px;
}
.footer-col a {
  display: block;
  font-size: 0.94rem;
  padding: 7px 0;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer-col a:hover { color: #fff; transform: translateX(3px); }

.footer-socials { display: flex; gap: 10px; margin-top: 16px; }
.footer-socials a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.footer-socials a:hover { background: var(--grad); border-color: transparent; transform: translateY(-3px); }
.footer-socials svg { width: 17px; height: 17px; fill: #fff; }

.footer-bottom {
  margin-top: 54px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
}
.footer-bottom a { color: rgba(255, 255, 255, 0.55); margin-left: 18px; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Contact section (shared across pages) ---------- */
.contact-band { background: var(--deep); color: #fff; }
.contact-band .eyebrow { color: #cabdff; }
.contact-band .section-title { color: #fff; }
.contact-band .section-sub { color: rgba(255, 255, 255, 0.7); }
.contact-cols {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}
/* Grid children default to min-width:auto, so they refuse to shrink below their
   min-content. The topic <select> is as wide as its longest option, which blew
   the whole column (and the page) past the viewport on phones. */
.contact-cols > *,
.form-row > *,
.field { min-width: 0; }

.contact-info .eyebrow { margin-bottom: 12px; }
.contact-info h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.contact-info p {
  margin-top: 14px;
  max-width: 46ch;
  font-size: 0.94rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
}
.contact-rows { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.85);
  min-width: 0;
}
.contact-row > :last-child { min-width: 0; }
.contact-row .ico {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; justify-content: center;
  color: #cabdff;
}
.contact-row .ico svg { width: 17px; height: 17px; }
.contact-info .footer-socials { margin-top: 22px; }

.contact-form {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.field label { font: 700 0.76rem/1 var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.field input, .field textarea, .field select {
  width: 100%;
  min-width: 0;
  font: 500 0.95rem var(--font-body);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 13px 16px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
  resize: vertical;
}
.field select option { color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, 0.35); }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: rgba(167, 139, 250, 0.7);
  background: rgba(255, 255, 255, 0.09);
}
.contact-form .btn { width: 100%; margin-top: 2px; }
/* no reserved height - an empty status used to leave a dead gap under the button */
.form-status {
  margin-top: 12px;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #a7f3d0;
}
.form-status:empty { display: none; }
/* contact sits directly above the footer - no gap between the dark bands */
.contact-band + .site-footer { margin-top: 0; }

/* ---------- Section spacing ----------
   NOTE: these used to read clamp(64px, 9vw, 60px) and clamp(44px, 6vw, 80px).
   The first had min > max, so it was pinned at 64px forever, while "tight"
   sections grew to 80px - tight sections were taller than normal ones on any
   wide screen. Both are now ordered correctly and sized so a whole section
   fits on a laptop viewport. */
.section { padding: clamp(48px, 5.5vw, 76px) 0; }
.section-tight { padding: clamp(34px, 4vw, 54px) 0; }

/* Standard gap between a section's heading block and its content grid. */
.section-body { margin-top: var(--gap-block); }

/* ---------- Responsive ---------- */
@media (min-width: 1021px) {
  /* no burger up here, so the panel and its scrim must never be reachable */
  .mobile-nav, .nav-scrim { display: none; }
}

@media (max-width: 1020px) {
  .main-nav { display: none; }
  .header-actions .btn-ghost { display: none; }
  .nav-burger { display: flex; }
  .header-inner { grid-template-columns: auto 1fr auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .contact-cols { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --header-h: 64px; }
  /* tighter page gutter on a phone, and a real gap between the CTA and burger */
  .header-inner { width: min(1360px, calc(100% - 32px)); gap: 12px; }
  .header-actions { gap: 6px; }
  .brand img { height: 18px; }
  .header-actions .btn-sm { padding: 10px 17px; font-size: 0.82rem; }
  .mobile-nav { padding: 8px 20px 22px; }
  .mobile-nav > a { font-size: 1rem; padding: 15px 6px; }
  .mobile-nav .mobile-nav-actions .btn { flex: 1 1 0; max-width: 170px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; }
  .footer-bottom a { margin-left: 0; margin-right: 18px; }
  .form-row { grid-template-columns: 1fr; }
}