/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--purple-700);
  color: #fff;
}
.btn-primary:hover { background: var(--purple-600); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--text-muted); }

.btn-light {
  background: #fff;
  color: var(--purple-800);
}
.btn-light:hover { background: #f1eaf9; }

/* ---------- nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.site-nav .container {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--nav-h, 76px);
}
.site-nav__logo img { height: 28px; width: auto; }
.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 1;
}
.site-nav__links a {
  font-size: 14.5px;
  color: var(--text-muted);
  font-weight: 500;
}
.site-nav__links a:hover, .site-nav__links a[aria-current="page"] { color: var(--text); }
.site-nav__actions { display: flex; align-items: center; gap: var(--space-4); }
.lang-switch {
  font-size: 13.5px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}
.lang-switch:hover { color: var(--text); border-color: var(--text-muted); }
.lang-switch__long { display: inline; }
.lang-switch__short { display: none; }

/* the logo has a colour cut and a reversed cut — show whichever suits the theme */
.site-nav__logo, .site-footer__brand { position: relative; }
.logo-light { display: none; }
:root[data-theme="light"] .logo-dark { display: none; }
:root[data-theme="light"] .logo-light { display: block; }

/* theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  flex: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-muted); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
/* one icon per theme — the sun offers light, the moon offers dark */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
}

/* Shown only inside the open mobile menu, where the bar has no room for it.
   It lives inside .site-nav__links, whose `a` rule (0,1,1) outranks
   .btn-primary (0,1,0) — without this the label renders muted grey on purple
   and is unreadable in both themes. */
.nav-menu-cta { display: none; }
.site-nav__links a.btn-primary { color: #fff; }
.site-nav__links a.btn-primary:hover { color: #fff; }

@media (max-width: 860px) {
  .site-nav__links { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-nav.is-open .site-nav__links {
    display: flex;
    position: absolute;
    top: var(--nav-h, 76px);
    inset-inline: 0;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-5);
    gap: var(--space-4);
  }
}

/* Narrow screens: the bar now carries a theme toggle and a language switch as
   well as the logo, CTA and menu button. Rather than let five controls squeeze
   each other, the CTA moves into the open menu and the language switch drops to
   a short label. Nothing is lost — it is relocated. */
@media (max-width: 560px) {
  .nav-cta { display: none; }
  .site-nav.is-open .nav-menu-cta { display: inline-flex; margin-top: var(--space-2); }
  .lang-switch__long { display: none; }
  .lang-switch__short { display: inline; }
}

@media (max-width: 420px) {
  :root { --nav-h: 66px; }
  .site-nav .container { gap: var(--space-3); }
  .site-nav__actions { gap: var(--space-2); }
  .site-nav__logo img { height: 24px; }
  .lang-switch { padding: 5px 10px; font-size: 12.5px; }
  .theme-toggle { width: 32px; height: 32px; }
  .nav-toggle { padding: 7px 9px; }
}

/* ---------- badge / pill ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 16px 6px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font-size: 13.5px;
  color: var(--text-muted);
}
html[dir="rtl"] .badge { padding: 6px 6px 6px 16px; }
.badge__tag {
  background: var(--purple-700);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-9) var(--space-8);
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, var(--purple-glow) 0%, transparent 65%);
  pointer-events: none;
}
.hero__inner { position: relative; max-width: 780px; margin-inline: auto; }
.hero h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.5rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-block: var(--space-5);
}
.hero h1 .accent {
  background: linear-gradient(90deg, var(--accent-grad-from), var(--accent-grad-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lede {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 620px;
  margin-inline: auto;
}
.hero__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}
.hero__visual {
  position: relative;
  margin-top: var(--space-8);
  max-width: 980px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--bg-elevated);
}
.hero__visual img { width: 100%; height: auto; }

/* ---------- sections ---------- */
.section { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-8); }
.section__head { max-width: 640px; margin-inline: auto; text-align: center; margin-bottom: var(--space-7); }
.section__eyebrow {
  color: var(--link-accent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.section__head h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: var(--space-3);
}
.section__head p {
  color: var(--text-muted);
  margin-top: var(--space-3);
  font-size: 1.05rem;
}

/* ---------- cards / grid ---------- */
.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--chip-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--chip-fg);
  margin-bottom: var(--space-4);
}
.card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: var(--space-2); }
.card p { color: var(--text-muted); font-size: .95rem; }

/* ---------- numbered steps ---------- */
.steps { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); counter-reset: step; }
.step {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  position: relative;
}
.step__num {
  width: 34px; height: 34px;
  border-radius: var(--radius-pill);
  background: var(--purple-700);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.step h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: var(--space-2); }
.step p { color: var(--text-muted); font-size: .95rem; }

/* ---------- brain: today vs next ---------- */
.split { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.split__panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  background: var(--bg-elevated);
}
.split__panel--next {
  background: linear-gradient(160deg, var(--panel-next-tint), transparent 70%);
  border-color: var(--accent-soft-border);
}
.tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.tag--now { background: var(--bg-elevated-2); color: var(--text-muted); border: 1px solid var(--border); }
.tag--next { background: var(--purple-700); color: #fff; }
.split__panel h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: var(--space-3); }
.split__panel p { color: var(--text-muted); font-size: .97rem; }
.split__panel p + p { margin-top: var(--space-3); }

.pullquote {
  text-align: center;
  max-width: 720px;
  margin: var(--space-7) auto 0;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}

/* ---------- salary / plain statement band ---------- */
.statement {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background: var(--bg-elevated);
}
.statement h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; }
.statement p { color: var(--text-muted); margin-top: var(--space-4); max-width: 620px; margin-inline: auto; }
.statement__nots {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-3); margin-top: var(--space-6);
}
.statement__nots span {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  font-size: .88rem;
  color: var(--text-faint);
}

/* ---------- aram band ---------- */
.aram {
  border: 1px solid var(--accent-soft-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  background: linear-gradient(140deg, var(--panel-tint-strong), transparent 65%);
  text-align: center;
}
.aram h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; }
.aram p { color: var(--text-muted); margin-top: var(--space-3); max-width: 600px; margin-inline: auto; }
.aram .btn { margin-top: var(--space-6); }

/* ---------- cta band ----------
   This band keeps its deep purple in BOTH themes, so it has to set its own
   text colour. Left to inherit, the heading takes --text and turns near-black
   on purple the moment the light theme is on. Any element with a fixed dark
   background needs its own colour context for the same reason. */
.cta-band {
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--purple-800), var(--purple-700));
  padding: var(--space-8) var(--space-6);
  text-align: center;
  color: #fff;
}
.cta-band h2 { color: #fff; }
.cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; }
.cta-band p { color: rgba(255,255,255,.8); margin-top: var(--space-3); }
.cta-band__actions { margin-top: var(--space-6); display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--border-soft);
  padding-block: var(--space-8) var(--space-6);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, 1fr);
  gap: var(--space-7);
  padding-bottom: var(--space-7);
}
.site-footer__brand img { height: 26px; margin-bottom: var(--space-4); }
.site-footer__brand p { color: var(--text-muted); font-size: .92rem; max-width: 320px; }
.site-footer h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  margin-bottom: var(--space-4);
}
.site-footer li + li { margin-top: var(--space-3); }
.site-footer a { color: var(--text-muted); font-size: .95rem; }
.site-footer a:hover { color: var(--text); }
.site-footer__bottom {
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--text-faint);
  font-size: .85rem;
}

@media (max-width: 760px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}