/* ==========================================================================
   Jobatra landing page — design tokens
   ========================================================================== */
:root {
  --brand: #fdca45;
  --brand-hover: #f0b81f;
  --yellow-50: #fff8e4;
  --yellow-500: #fdca45;
  --yellow-600: #d9a017;

  --navy-800: #160f44;
  --navy-700: #241a63;
  --navy-900: #0e0930;

  --gray-50: #f7f6fa;
  --gray-100: #efedf4;
  --white: #ffffff;

  --text-primary: #160f44;
  --text-secondary: #4b4470;
  --text-muted: #6f6892;
  --text-subtle: #8e88a8;
  --text-on-navy: #cfc9e0;
  --text-on-navy-muted: #9a94ab;

  --border-subtle: #e6e3ee;
  --border-strong: #d5d1e2;

  --info: #3b7ddd;
  --info-surface: #eaf1fd;
  --success-surface: #e8f6ee;
  --warning-surface: #fdf1e3;
  --danger-surface: #fdeaea;
  --danger: #c0392b;
  --surface-brand-subtle: #f2effb;

  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius-control: 12px;
  --radius-card: 16px;
  --radius-panel: 28px;
  --radius-pill: 999px;

  --shadow-soft: 0 2px 10px rgba(22, 15, 68, .06);
  --shadow-lift: 0 10px 24px rgba(22, 15, 68, .10);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --container: 1200px;
  --gutter: 40px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--text-primary);
  text-decoration: none;
}

a:hover {
  color: var(--yellow-600);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  margin: 0;
}

svg {
  display: block;
  flex: none;
}

:focus-visible {
  outline: 2px solid var(--yellow-600);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--navy-800);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
}

.skip-link:focus {
  left: 8px;
  color: #fff;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container--narrow {
  max-width: 820px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-primary);
  border-left: 3px solid var(--brand);
  padding-left: 10px;
}

.eyebrow--plain {
  border-left: 0;
  padding-left: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  padding: 0 18px;
  height: 42px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .16s var(--ease), color .16s var(--ease),
    border-color .16s var(--ease), transform .16s var(--ease);
}

.btn:hover {
  color: inherit;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.btn--sm {
  height: 38px;
  font-size: 14px;
  padding: 0 16px;
}

.btn--md {
  height: 48px;
}

.btn--lg {
  height: 52px;
  font-size: 16px;
  padding: 0 26px;
}

.btn--block {
  width: 100%;
}

.btn--brand {
  background: var(--brand);
  color: var(--navy-800);
}

.btn--brand:hover {
  background: var(--brand-hover);
  color: var(--navy-800);
}

.btn--primary {
  background: var(--navy-800);
  color: #fff;
}

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

.btn--secondary {
  background: var(--white);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn--secondary:hover {
  background: var(--gray-50);
  color: var(--text-primary);
}

.btn--link {
  background: transparent;
  color: var(--text-primary);
  padding: 0 4px;
  height: 38px;
}

.btn--link:hover {
  color: var(--yellow-600);
}

/* ==========================================================================
   Inputs
   ========================================================================== */
.input {
  width: 100%;
  height: 48px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--white);
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}

.input::placeholder {
  color: var(--text-subtle);
}

.input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(253, 202, 69, .28);
}

.input--textarea {
  height: auto;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

.select-wrap {
  position: relative;
}

.select-wrap select.input {
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

.select-wrap__chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-subtle);
  pointer-events: none;
}

.label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 7px;
}

.label__optional {
  font-weight: 500;
  color: var(--text-subtle);
  font-family: var(--font-body);
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.tag--static {
  height: 34px;
  background: var(--gray-50);
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}

.navbar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.navbar__logo img {
  height: 30px;
}

.navbar__nav {
  display: flex;
  gap: 28px;
  align-items: center;
}

.navbar__nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-secondary);
}

.navbar__nav a:hover {
  color: var(--text-primary);
}

.navbar__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.navbar__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--white);
  color: var(--text-primary);
  cursor: pointer;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 3px 3px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--white);
}

.lang-switch__icon {
  color: var(--text-subtle);
  margin-right: 4px;
}

.lang-switch button {
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-subtle);
  padding: 6px 9px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}

.lang-switch button:hover {
  color: var(--text-primary);
}

.lang-switch button.is-active {
  background: var(--navy-800);
  color: #fff;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--gray-50) 100%);
  border-bottom: 1px solid var(--border-subtle);
  /* 170px (not the 80px section rhythm) makes the hero ~30% taller than the
     content alone would, giving the photo more room. All the extra height has
     to come from padding, since the text block's height is fixed by its copy. */
  padding: 170px 0;
}

/* Keeps every text element above the photo without touching them individually. */
.hero .container {
  position: relative;
  z-index: 1;
}

/* Hidden by default. The background-image is declared ONLY inside the 861px
   media query below, so phones never fetch it at all. */
.hero__media {
  display: none;
}

.hero__title {
  font-weight: 800;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 22px 0 18px;
  max-width: 680px;
}

.hero__subtitle {
  font-size: 19px;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 0 32px;
}

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

.hero__stats {
  display: flex;
  gap: 32px;
  margin-top: 44px;
  flex-wrap: wrap;
}

/* --- Hero photograph (desktop only) -------------------------------------
   The hero background is a vertical gradient, so the image cannot fade to a
   flat colour — it has to fade to TRANSPARENT via mask-image, letting the
   real gradient show through the falloff. */
@media (min-width: 861px) {
  .hero__media {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 40%;
    pointer-events: none;
    /* never steals clicks from the CTAs */
  }

  .hero__media-img {
    position: absolute;
    inset: 0;
    background-image: url('../assets/hero-plumber.webp');
    background-size: cover;
    background-position: center center;

    /* Horizontal stops are measured, not eyeballed: fully transparent until
       32% of this box, which stays right of the text column's right edge at
       every width from 1201px up (worst case is ~1250px viewport, where the
       ramp start sits ~3px from the title cap — over a white-wall region of
       the photo). Fully opaque by 52% so the plumber's face at ~57% is clear
       of the ramp, leaving the toolbox to emerge out of the falloff.
       Vertical: only 8% at the top, because his head starts at 13% of the
       image height and a longer ramp clipped it. The top of the photo is a
       bright white wall, so it needs very little help to disappear.
       Both composite spellings are required: Safari only understands
       source-in, the standard is intersect. Getting it wrong yields a union
       instead of an intersection, i.e. no fade on one axis. */
    -webkit-mask-image:
      linear-gradient(to right, transparent 32%, #000 52%),
      linear-gradient(to bottom, transparent 0%, #000 8%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 32%, #000 52%),
      linear-gradient(to bottom, transparent 0%, #000 8%, #000 80%, transparent 100%);
    mask-composite: intersect;
  }

  /* Sibling of the masked layer, never a child — a masked chip would fade too. */
  .hero__chip {
    position: absolute;
    left: 30%;
    /* straddles the fade ramp, so it reads as overlapping the photo */
    bottom: 20%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lift);
    padding: 10px 18px 10px 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
  }

  .hero__chip [data-icon] {
    color: var(--info);
  }
}

/* Reserve the photo's share of the hero for text ONLY while the container
   spans the full viewport. Percentage padding resolves against the containing
   block (.hero = viewport width), NOT the container — so above the 1200px
   container cap this padding would keep growing while the container doesn't,
   crushing the text column on wide screens. From 1201px up, the centered
   container plus the 680px title cap provide the clearance by themselves. */
@media (min-width: 861px) and (max-width: 1200px) {
  .hero .container {
    padding-right: 46%;
  }
}

.stat__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
}

.stat__l {
  font-size: 14px;
  color: var(--text-muted);
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section {
  padding: 80px 0 40px;
}

.section--cta {
  padding: 80px 0;
}

.section--signup {
  padding: 20px 0 80px;
}

.band {
  background: var(--gray-50);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin-top: 60px;
  padding: 80px 0;
}

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 28px;
}

.section__head--center {
  display: block;
  text-align: center;
  margin-bottom: 48px;
}

.section__title {
  font-weight: 800;
  font-size: 34px;
  margin-top: 14px;
  letter-spacing: -.01em;
}

/* Categories */
.cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.cat-card {
  display: block;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 22px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}

.cat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border-strong);
  color: inherit;
}

.cat-card__tile {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-800);
}

.cat-card__name {
  font-weight: 700;
  font-size: 17px;
  margin: 16px 0 4px;
}

.cat-card__count {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

/* How it works */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.step {
  text-align: center;
  padding: 0 12px;
}

.step__badge {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--navy-800);
}

.step__num {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy-800);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step__title {
  font-weight: 700;
  font-size: 19px;
  margin: 20px 0 8px;
}

.step__body {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
}

/* Featured professionals */
.pros-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pro-card {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 22px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}

.pro-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.pro-card__head {
  display: flex;
  gap: 14px;
  align-items: center;
}

.pro-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-brand-subtle);
  color: var(--navy-800);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.pro-card__name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pro-card__name {
  font-weight: 700;
  font-size: 18px;
  margin: 0;
}

.pro-card__role {
  font-size: 14px;
  color: var(--text-muted);
  margin: 2px 0 0;
}

.pro-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0;
}

.pro-card__rating strong {
  font-family: var(--font-display);
  font-size: 15px;
}

.pro-card__rating span {
  font-size: 14px;
  color: var(--text-muted);
}

.pro-card__tags {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.pro-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 16px;
}

.pro-card__price {
  font-size: 14px;
  color: var(--text-muted);
}

.pro-card__price strong {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text-primary);
}

/* CTA band */
.cta-panel {
  background: var(--navy-800);
  border-radius: var(--radius-panel);
  padding: 64px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cta-panel__copy {
  max-width: 560px;
}

.cta-panel__title {
  font-weight: 800;
  font-size: 38px;
  line-height: 1.1;
  margin: 0 0 12px;
  color: #fff;
}

.cta-panel__body {
  font-size: 17px;
  color: #bcb6cf;
  margin: 0;
}

/* ==========================================================================
   Contractor signup
   ========================================================================== */
.signup-card {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-soft);
  padding: 48px;
}

.signup-card__head {
  margin-bottom: 32px;
}

.signup-card__subtitle {
  font-size: 17px;
  color: var(--text-muted);
  margin: 12px 0 0;
  max-width: 560px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.form-row--full {
  grid-column: 1 / -1;
}

.form-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-control);
  background: var(--danger-surface);
  border: 1px solid #f3c9c4;
  color: var(--danger);
  font-size: 14px;
  font-weight: 500;
}

.form-error[hidden] {
  display: none;
}

.signup-form .btn--block {
  margin-top: 24px;
}

.form-legal {
  font-size: 13px;
  color: var(--text-subtle);
  text-align: center;
  margin: 14px 0 0;
}

.is-loading {
  position: relative;
}

.is-loading .spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.signup-success {
  text-align: center;
  padding: 8px 0;
}

.signup-success__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--success-surface);
  color: #1e8a4c;
  margin-bottom: 20px;
}

.signup-success__title {
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -.01em;
}

.signup-success__body {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 520px;
  margin: 12px auto 28px;
}

.store-badges {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--navy-800);
  color: #fff;
  border-radius: var(--radius-control);
  padding: 12px 22px 12px 18px;
  min-width: 200px;
  transition: background-color .16s var(--ease), transform .16s var(--ease);
}

.store-badge:hover {
  background: var(--navy-700);
  color: #fff;
  transform: translateY(-2px);
}

.store-badge__icon {
  display: flex;
}

.store-badge__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.store-badge__text small {
  font-size: 11px;
  color: #bcb6cf;
}

.store-badge__text strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}

.signup-success__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-subtle);
  margin: 20px 0 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--navy-800);
  color: #fff;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-top: 64px;
  padding-bottom: 32px;
}

.footer__brand img {
  height: 30px;
  margin-bottom: 16px;
}

.footer__brand p {
  font-size: 14px;
  color: #bcb6cf;
  line-height: 1.6;
  max-width: 260px;
  margin: 0;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer__col h4 {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 5px;
}

.footer__col a {
  font-size: 14px;
  color: var(--text-on-navy);
}

.footer__col a:hover {
  color: var(--brand);
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 13px;
  color: var(--text-on-navy-muted);
}

.footer__legal {
  display: flex;
  gap: 20px;
}

.footer__legal a {
  color: var(--text-on-navy-muted);
}

.footer__legal a:hover {
  color: var(--brand);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --gutter: 28px;
  }

  .hero__title {
    font-size: 46px;
  }

  .cats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pros-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-panel {
    padding: 48px 40px;
  }

  .cta-panel__title {
    font-size: 32px;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 36px;
  }

  .signup-card {
    padding: 36px;
  }
}

@media (max-width: 860px) {
  .navbar__nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lift);
    padding: 8px var(--gutter) 16px;
  }

  .navbar__nav.is-open {
    display: flex;
  }

  .navbar__nav a {
    padding: 13px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 16px;
  }

  .navbar__nav a:last-child {
    border-bottom: 0;
  }

  .navbar__toggle {
    display: inline-flex;
  }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .section__head {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  :root {
    --gutter: 20px;
  }

  /* Deliberately NOT scaled by the same 30%: there is no photo below 861px, so
     the extra height would just be dead space pushing the CTA off the fold. */
  .hero {
    padding: 72px 0;
  }

  .hero__title {
    font-size: 36px;
  }

  .hero__subtitle {
    font-size: 17px;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__stats {
    gap: 24px;
  }

  .section {
    padding: 56px 0 24px;
  }

  .section--cta {
    padding: 48px 0;
  }

  .section--signup {
    padding: 8px 0 56px;
  }

  .band {
    padding: 56px 0;
    margin-top: 40px;
  }

  .section__title {
    font-size: 27px;
  }

  .cats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pros-grid {
    grid-template-columns: 1fr;
  }

  .cta-panel {
    padding: 36px 26px;
    border-radius: 20px;
  }

  .cta-panel__title {
    font-size: 27px;
  }

  .cta-panel .btn {
    width: 100%;
  }

  .signup-card {
    padding: 26px 20px;
    border-radius: 20px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .signup-success__title {
    font-size: 24px;
  }

  .store-badge {
    width: 100%;
    justify-content: center;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__bottom-inner {
    flex-direction: column;
  }
}

@media (max-width: 400px) {
  .hero__title {
    font-size: 31px;
  }

  .cats-grid {
    grid-template-columns: 1fr;
  }

  .lang-switch {
    padding-left: 6px;
  }

  .lang-switch__icon {
    display: none;
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}