/* ============================================================
   Aloha Browser — prototype styles
   Tokens extracted from Figma (light theme)
   ============================================================ */

/* PP Pangram Sans — the real design font */
@font-face {
  font-family: "PP Pangram Sans";
  src: url("../assets/fonts/PPPangramSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Pangram Sans";
  src: url("../assets/fonts/PPPangramSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Pangram Sans";
  src: url("../assets/fonts/PPPangramSans-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Pangram Sans";
  src: url("../assets/fonts/PPPangramSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Pangram Sans";
  src: url("../assets/fonts/PPPangramSans-Extrabold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand / aqua */
  --aqua-50:  #e8fafc;
  --aqua-150: #b7e8ef;
  --aqua-200: #98dee7;
  --aqua-300: #6fcdd9;
  --aqua-400: #49c0cb;
  --aqua-500: #21a2b2;  /* brand */
  --aqua-550: #1d8a96;
  --aqua-600: #187580;
  --aqua-700: #135e6a;

  /* Text */
  --text-primary:   #1c1d26;
  --text-secondary: #4a4c5d;
  --text-tertiary:  #6b6f80;
  --text-aqua:      #21a2b2;
  --text-aqua-2:    #1d8a96;
  --text-gold:      #bd8a1e;
  --twilight:       #8846d6;
  --text-twilight:  #660fba;
  --text-premium-primary: #e345a5;  /* text/premium/primary */
  --divider:        #e4e5ec;

  /* Surfaces / greys */
  --surface-page: #fafafa;
  --surface-top:  #ffffff;
  --grey-100: #f3f4f8;
  --grey-200: #e4e5ec;
  --grey-300: #d7d9e2;
  --grey-400: #cbcdd8;

  /* Fills */
  --fill-dark:   #232533;
  --fill-button: #21a2b2;
  --gold:        #e1c995;

  /* ---- Semantic component tokens (light defaults) ---- */
  --bg-page:        #fafafa;
  --nav-bg:         #ffffff;
  --nav-border:     #e4e5ec;
  --nav-shadow:     0 8px 30px rgba(16, 36, 42, 0.06);

  --btn-dark-bg:    #232533;
  --btn-dark-text:  #ffffff;
  --btn-accent-bg:  #21a2b2;
  --btn-accent-text:#ffffff;

  --lang-bg:        #e4e5ec;
  --lang-bg-hover:  #d7d9e2;
  --profile-bg:     #e1c995;
  --logo-filter:    none;
  --caret-color:    #232533;

  /* hero background glow */
  --glow-top:       rgba(232, 250, 252, 1);
  --glow-side:      rgba(151, 222, 231, 0.45);
  --qr-shadow:      rgba(16, 36, 42, 0.12);

  /* Type */
  --font: "PP Pangram Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --container: 1176px;
  --nav-h: 92px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   Dark theme — semantic palette swap
   ============================================================ */
[data-theme="dark"] {
  --text-primary:   #ffffff;
  --text-secondary: #bec1ce;
  --text-tertiary:  #a4a8b9;
  --text-aqua:      #49c0cb;

  --text-aqua-2:    #6fcdd9;
  --text-gold:      #deb778;
  --divider:        rgba(255, 255, 255, 0.10);

  --surface-page:   #0b0c12;
  --surface-top:    #14161f;

  --bg-page:        #0b0c12;
  --nav-bg:         #14161f;
  --nav-border:     rgba(255, 255, 255, 0.08);
  --nav-shadow:     0 8px 30px rgba(0, 0, 0, 0.35);

  --btn-dark-bg:    #e8fafc;
  --btn-dark-text:  #232533;
  --btn-accent-bg:  #b7e8ef;
  --btn-accent-text:#232533;

  --lang-bg:        #323341;
  --lang-bg-hover:  #3f4251;
  --profile-bg:     #91805e;
  --logo-filter:    brightness(0) invert(1);
  --caret-color:    #ffffff;

  --glow-top:       rgba(73, 192, 203, 0.10);
  --glow-side:      rgba(33, 162, 178, 0.16);
  --qr-shadow:      rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* Themed section wrapper — one per theme, stacked for comparison */
.hero-block {
  position: relative;
  background: var(--bg-page);
  color: var(--text-primary);
}
/* Background illustration spans the whole block (behind the nav) and fades
   out at the bottom so there is no hard band into the Trust bar */
.hero-block::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1280px;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
}
.hero-block[data-theme="light"]::before {
  background-image: url("../assets/hero-bg-light.png");
}
.hero-block[data-theme="dark"]::before {
  background-image:
    radial-gradient(120% 80% at 50% -10%, var(--glow-top) 0%, transparent 55%),
    radial-gradient(70% 50% at 18% 78%, var(--glow-side) 0%, transparent 60%),
    radial-gradient(70% 50% at 82% 78%, var(--glow-side) 0%, transparent 60%);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 32px;
  border: none;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.18px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
              background-color 0.2s ease, filter 0.2s ease;
}
.btn:active { transform: scale(0.97); }

.btn--dark   { background: var(--btn-dark-bg); color: var(--btn-dark-text); }
.btn--dark:hover   { box-shadow: 0 10px 24px rgba(35, 37, 51, 0.22); transform: translateY(-2px); }

.btn--accent { background: var(--btn-accent-bg); color: var(--btn-accent-text); }
.btn--accent:hover { box-shadow: 0 10px 24px rgba(33, 162, 178, 0.32); transform: translateY(-2px); filter: brightness(1.03); }

.btn--icon { padding: 0; width: 56px; }
.btn--icon .nav__caret { width: 22px; height: 22px; }
.btn--accent .nav__caret path { stroke: var(--btn-accent-text); }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 16px 24px;
}
.nav__inner {
  width: 100%;
  max-width: var(--container);
  display: flex;
  align-items: stretch;
  gap: 16px;
}
.nav__bar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 60px;
  padding: 0 20px 0 32px;
  background: var(--nav-bg);
  border: 1px solid var(--nav-border);
  border-radius: 12px;
  box-shadow: var(--nav-shadow);
}
.nav__logo img { width: 110px; height: 28px; filter: var(--logo-filter); }

.nav__menu {
  display: flex;
  align-items: center;
  gap: 40px;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  background: none;
  border: none;
  font-family: var(--font);
  cursor: pointer;
  position: relative;
  letter-spacing: 0.16px;
  transition: color 0.2s ease;
}
.nav__link:hover { color: var(--text-gold); }
/* Premium keeps its own brand colour on hover */
.nav__link--premium:hover { color: var(--text-premium-primary); }

.nav__caret { width: 19px; height: 19px; transition: transform 0.25s ease; }
.nav__link .nav__caret path,
.nav__lang .nav__caret path { stroke: var(--caret-color); }
.nav__link--dropdown:hover .nav__caret,
.nav__lang:hover .nav__caret { transform: translateY(2px); }

.nav__right { display: flex; align-items: center; gap: 24px; }
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 16px;
  background: var(--lang-bg);
  border: none;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.nav__lang:hover { background: var(--lang-bg-hover); }
.nav__profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 10px;
  background: var(--profile-bg);
  border: none;
  border-radius: 80px;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.nav__profile:hover { transform: scale(1.05); filter: brightness(1.04); }
.nav__profile svg { width: 19px; height: 19px; }
.nav__profile svg path { stroke: var(--caret-color); }

.nav__cta { height: 60px; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  padding-top: 24px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
/* old in-hero bg element no longer used — background now spans the whole
   themed block (behind the nav too) via .hero-block::before */
.hero__bg { display: none; }

/* ============================================================
   Nav dropdown — the Browser submenu
   ============================================================ */
.nav__dropdown { position: relative; }

/* Page scrim behind an open dropdown — sits under the nav (z 100) and the
   QR dock (z 200), so those stay bright while the page dims. */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.nav-overlay.is-visible { opacity: 1; visibility: visible; }

.submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  width: 158px;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--bg-page);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.16);
  text-align: left;
}
.submenu[hidden] { display: none; }

/* invisible bridge across the 14px gap, so moving the pointer from the
   button down into the menu doesn't close it */
.submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

/* hover state on the trigger: text and chevron go gold */
.nav__dropdown:hover .nav__link--dropdown,
.nav__link--dropdown[aria-expanded="true"] { color: var(--text-gold); }

/* On hover the leading icon collapses to nothing and the chevron opens up on
   the right, which slides the label left. Only widths animate — the icons
   stay in the markup throughout. */
.submenu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11.5px 14px;
  overflow: hidden;
  text-decoration: none;
}
.submenu__row { display: flex; align-items: center; min-width: 0; }

.submenu__icon,
.submenu__arrow {
  flex: 0 0 auto;
  transition: width 0.25s ease-out, margin 0.25s ease-out;
}
.submenu__icon {
  width: 20px;
  height: 20px;
  margin-right: 12px;
}
.submenu__item:hover .submenu__icon { width: 0; margin-right: 0; }

.submenu__arrow {
  width: 0;
  height: 16px;
  margin-left: 0;
}
.submenu__item:hover .submenu__arrow { width: 16px; margin-left: 8px; }

.submenu__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.14px;
  color: var(--text-primary);
  white-space: nowrap;
}

.nav__link--dropdown[aria-expanded="true"] { color: var(--text-gold); }


.nav__link--dropdown[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.nav__caret { transition: transform 0.25s var(--ease-out); }

/* ============================================================
   Download options popup — opens from the hero chevron button
   ============================================================ */
/* The popup is anchored to .hero__buttons, not to this wrapper, so it centres
   under the whole button pair instead of hanging off the chevron. */
.dl-popup__wrap { position: static; }

.dl-popup {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding: 32px 40px;
  border-radius: 24px;
  background: var(--surface-top);
  box-shadow: 0 12px 40px rgba(16, 36, 42, 0.16);
  text-align: left;
}
.dl-popup[hidden] { display: none; }

/* bridge across the gap so the pointer can travel into the popup */
.dl-popup::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.dl-popup__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dl-popup__head {
  margin: 0;
  padding-bottom: 8px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.18px;
  color: var(--text-primary);
}

.dl-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--aqua-300);
  border-radius: 12px;
  background: var(--aqua-50);
  text-decoration: none;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.dl-opt:hover { background: var(--aqua-150); border-color: var(--aqua-400); }

.dl-opt__name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.16px;
  color: var(--text-primary);
  white-space: nowrap;
}
/* icons keep their natural proportions inside a shared 24px slot */
.dl-opt__icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  object-fit: none;
  object-position: center;
}

/* store rating pill */
.dl-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  padding: 4px 6px 3px 4px;
  border-radius: 8px;
  background: var(--fill-dark);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
}
.dl-tag img { width: 11.2px; height: 11.2px; }

.dl-qr {
  width: 201px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--grey-400);
  border-radius: 13px;
}
.dl-qr__caption {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.14px;
  color: var(--text-primary);
}
.dl-qr__code { width: 86px; height: 86px; }

@media (max-width: 900px) {
  .dl-popup { flex-direction: column; gap: 20px; padding: 24px; }
}

/* ============================================================
   QR dock — pinned to the right edge, collapses to a small tab
   ============================================================ */
.qr-dock {
  position: fixed;
  top: 200px;
  right: 0;
  /* sits above everything, including the sticky nav (z-index 100) */
  z-index: 200;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--divider);
  border-right: 0;
  box-shadow: 0 12px 30px var(--qr-shadow);
  /* expanded metrics */
  width: 170px;
  height: 200px;
  padding: 28px 20px 28px 28px;
  border-radius: 24px 0 0 24px;
  transition:
    width 0.4s var(--ease-out),
    height 0.4s var(--ease-out),
    padding 0.4s var(--ease-out),
    border-radius 0.4s var(--ease-out);
}

.qr-dock__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
  transition: opacity 0.25s var(--ease-out);
}
.qr-dock__code { width: 100px; height: 100px; display: block; }
.qr-dock__caption {
  margin: 0;
  width: 112px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.14px;
  color: var(--text-primary);
}

/* phone icon only shows once collapsed */
.qr-dock__phone {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  color: var(--text-secondary);
  opacity: 0;
  display: none;
}

.qr-dock__toggle {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.qr-dock__toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.4s var(--ease-out);
}
.qr-dock__toggle:focus-visible {
  outline: 2px solid var(--text-aqua);
  outline-offset: 3px;
  border-radius: 4px;
}

/* collapsed state */
.qr-dock.is-collapsed {
  width: 76px;
  height: 50px;
  padding: 0 12px;
  border-radius: 12px 0 0 12px;
  align-items: center;
}
.qr-dock.is-collapsed .qr-dock__body {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}
.qr-dock.is-collapsed .qr-dock__phone { display: block; opacity: 1; }
.qr-dock.is-collapsed .qr-dock__toggle svg { transform: rotate(180deg); }

@media (max-width: 900px) {
  .qr-dock { display: none; }
}

.hero__text {
  position: relative;
  z-index: 2;
  width: min(800px, 92vw);
  text-align: center;
  padding-bottom: 60px;
}
.hero__title {
  margin: 0 0 8px;
  font-size: clamp(40px, 5.6vw, 64px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.hero__title-line { display: block; }
.hero__title-line--accent { color: var(--text-aqua); }

/* Cycling phrase rotator (aqua line) */
.hero__rotator {
  position: relative;
  display: block;
  height: 1.12em;
  overflow: hidden;
}
.hero__rotator-track { display: block; height: 100%; }
.hero__phrase {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: block;
  line-height: 1.12;
  transform: translateY(110%);
  opacity: 0;
  filter: blur(8px);
  will-change: transform, opacity, filter;
  transition:
    transform 0.95s var(--ease-out),
    opacity 0.8s var(--ease-out),
    filter 0.8s var(--ease-out);
}
.hero__phrase.is-active {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
}
.hero__phrase.is-out {
  transform: translateY(-110%);
  opacity: 0;
  filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
  .hero__phrase { transition: opacity 0.3s ease; transform: none; filter: none; }
  .hero__phrase.is-out { transform: none; filter: none; }
}

.hero__subtitle {
  margin: 8px auto 0;
  max-width: 480px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-primary);
}
.hero__buttons {
  position: relative; /* anchors the download popup, so it centres on the pair */
  margin-top: 32px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.hero__illustration {
  position: relative;
  z-index: 1;
  width: min(1196px, 96vw);
  will-change: transform;
}

/* Three-card 3D scene */
.hero__cards {
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 1196 / 620;
  perspective: 1400px;
}
.hcard {
  position: absolute;
  margin: 0;
  will-change: transform;
}
.hcard img { width: 100%; height: auto; display: block; }

.hcard--vpn     { left: 1%;   top: 10.6%; width: 47%; z-index: 1; transform: translateX(0); }
.hcard--privacy { left: 52%;  top: 10.6%; width: 49%; z-index: 2; transform: translateX(0); }
.hcard--media   { left: 49%;  top: 0.5%;  width: 59%; z-index: 3; transform: translateX(-50%); }

/* ---- Entrance: centre appears first, sides fan out from behind it ---- */
@media (prefers-reduced-motion: no-preference) {
  /* initial hidden state */
  .hcard { opacity: 0; }
  .hcard--vpn     { transform: translateX(52%)  scale(0.9); }
  .hcard--privacy { transform: translateX(-46%) scale(0.9); }
  .hcard--media   { transform: translateX(-50%) scale(0.9); }

  .hcard {
    transition:
      opacity 0.7s var(--ease-out),
      transform 0.95s var(--ease-out);
  }

  /* revealed state */
  .hero__illustration.is-in .hcard { opacity: 1; }
  .hero__illustration.is-in .hcard--media {
    transform: translateX(-50%) scale(1);
  }
  .hero__illustration.is-in .hcard--vpn {
    transform: translateX(0) scale(1);
    transition-delay: 0.45s;              /* after the centre lands */
  }
  .hero__illustration.is-in .hcard--privacy {
    transform: translateX(0) scale(1);
    transition-delay: 0.6s;
  }

  /* gentle float once everything is in place */
  .hero__illustration.is-in .hcard {
    animation: card-float 8s ease-in-out 1.9s infinite;
  }
  .hero__illustration.is-in .hcard--media  { animation-name: card-float-center; animation-duration: 9s; }
  .hero__illustration.is-in .hcard--privacy { animation-duration: 8.5s; }

  @keyframes card-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
  }
  @keyframes card-float-center {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-16px); }
  }
}

/* ============================================================
   Entrance animations
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  [data-animate] { opacity: 0; }

  [data-animate="nav"] {
    transform: translateY(-16px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  }
  [data-animate="up"] {
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    transition-delay: calc(var(--d, 0) * 0.1s + 0.15s);
  }
  [data-animate="illustration"] {
    transform: translateY(40px) scale(0.98);
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
    transition-delay: 0.35s;
  }
  [data-animate="qr"] {
    transform: translateY(-10px) scale(0.9);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
    transition-delay: 0.7s;
  }

  .is-in[data-animate] { opacity: 1; transform: none; }

  /* gentle continuous float on the hero illustration once revealed */
  .hero__illustration.is-in { animation: float 7s ease-in-out 1.4s infinite; }
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
  }
}

/* ============================================================
   Trust bar
   ============================================================ */
.trust {
  position: relative;
  z-index: 1;
  padding: 8px 0 64px;
}
.trust__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.trust__item {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.trust__label {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
}
.trust__label--gold { color: var(--text-gold); }

.trust__stat { display: flex; flex-direction: column; gap: 8px; }
.trust__number {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.trust__number--aqua { color: var(--text-aqua); }

.trust__sub {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.16px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.trust__sub svg { width: 24px; height: 24px; flex-shrink: 0; }

.trust__divider {
  flex-shrink: 0;
  width: 1px;
  height: 125px;
  background: var(--divider);
}

@media (max-width: 720px) {
  .trust__inner { flex-wrap: wrap; justify-content: flex-start; gap: 32px 40px; }
  .trust__divider { display: none; }
}

/* ============================================================
   Section heading (reusable across content sections)
   ============================================================ */
.section-label {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.18px;
  color: var(--text-aqua-2);
}
.section-title {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}
.section-title .accent { color: var(--text-aqua); }

/* ============================================================
   Privacy zone
   ============================================================ */
.privacy {
  position: relative;
  z-index: 1;
  padding: 40px 0 90px;
}
.privacy__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.privacy__head {
  display: flex;
  gap: 40px;
  align-items: flex-end;
}
.privacy__heading { flex: 1 1 auto; }
.privacy__quote {
  flex: 0 0 340px;
  padding-left: 24px;
  border-left: 2px solid var(--text-aqua);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-primary);
}
.privacy__quote p { margin: 0; }

.privacy__body {
  display: flex;
  gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
}
.privacy__features {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 550px;
  padding-top: 20px;
}
.feature__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
  transition: color 0.4s var(--ease-out);
}
.feature__text {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 490px;
  transition: color 0.4s var(--ease-out);
}
/* scroll-driven active state: aqua title + emphasised text */
.feature.is-active .feature__title { color: var(--text-aqua); }
.feature.is-active .feature__text  { color: var(--text-primary); }

.privacy__cta { margin-top: 4px; align-self: flex-start; }

/* phone mock-up: three screens cross-fade as the active feature changes */
.privacy__phone {
  position: relative;
  flex: 0 0 auto;
  width: 332px;
  height: 583px;
  overflow: hidden;
}
.privacy__phone-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 332px;
  height: auto;
  display: block;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.privacy__phone-img.is-active { opacity: 1; }
.privacy__phone::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg-page));
}

@media (max-width: 900px) {
  .privacy__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .privacy__quote { flex-basis: auto; }
  .privacy__body { flex-direction: column; align-items: center; }
  .privacy__phone { align-self: center; }
}

/* ============================================================
   Overlap: a stack of sticky panels. Each panel pins at the top
   and the next one slides up over it, while the one underneath
   blurs and dissolves (progress driven by JS).
   ============================================================ */
.overlap { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .overlap__panel { position: sticky; top: 0; }
  .overlap__inner {
    transition: opacity 0.15s linear;
    transform-origin: center 35%;
  }
}

/* stacking order: each panel paints above the previous one */
.overlap .privacy   { z-index: 1; }
.overlap .downloads { z-index: 2; }

/* VPN covers Downloads but is not pinned itself — only the panel being
   covered needs to stick. Scrolling normally keeps its scroll accents alive
   and means no spacer is needed after it. */
.overlap .vpn {
  position: relative;
  z-index: 3;
}

/* ============================================================
   Downloads zone (Media collection)
   ============================================================ */
.downloads {
  border-radius: 40px 40px 0 0;
  box-shadow: 0 -8px 24px rgba(60, 30, 110, 0.08);
  background:
    linear-gradient(180deg, #efe8fb 0%, #f4eefc 42%, var(--bg-page) 100%);
  padding: 72px 0 90px;
}
.downloads__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.downloads__head {
  display: flex;
  gap: 40px;
  align-items: flex-end;
}
.downloads__heading { flex: 1 1 auto; }
.section-label--twilight { color: var(--text-twilight); }
.section-title .accent-twilight { color: var(--twilight); }

.downloads__quote {
  flex: 0 0 340px;
  padding-left: 24px;
  border-left: 2px solid var(--twilight);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-primary);
}
.downloads__quote p { margin: 0; }

.downloads__body {
  display: flex;
  gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
}
.downloads__left {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 0 1 680px;
}
.downloads__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.dl-feature {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 20px 20px 32px 0;
}
.dl-feature:nth-child(1),
.dl-feature:nth-child(3) { border-right: 1px solid var(--divider); padding-right: 32px; }
.dl-feature:nth-child(2),
.dl-feature:nth-child(4) { padding-left: 32px; }
.dl-feature:nth-child(1),
.dl-feature:nth-child(2) { border-bottom: 1px solid var(--divider); padding-top: 0; }
.dl-feature__icon { color: var(--text-tertiary); height: 24px; }
.dl-feature__icon svg { width: 24px; height: 24px; display: block; }
.dl-feature__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
}
.dl-feature__text {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-secondary);
}
.downloads__cta { align-self: flex-start; }

.downloads__illustration {
  flex: 0 0 332px;
  width: 332px;
}
.downloads__illustration img { width: 332px; height: auto; display: block; }

@media (max-width: 900px) {
  .downloads__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .downloads__quote { flex-basis: auto; }
  .downloads__body { flex-direction: column; align-items: center; }
  .downloads__left { flex-basis: auto; }
}

/* ============================================================
   VPN zone
   ============================================================ */
.vpn {
  border-radius: 40px 40px 0 0;
  box-shadow: 0 -8px 24px rgba(20, 90, 110, 0.08);
  background: linear-gradient(180deg, #e3f1f8 0%, #edf7fb 42%, var(--bg-page) 100%);
  padding: 72px 0 90px;
}
.vpn__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.vpn__head {
  display: flex;
  gap: 40px;
  align-items: flex-end;
}
.vpn__heading { flex: 1 1 auto; }
.vpn__quote {
  flex: 0 0 340px;
  padding-left: 24px;
  border-left: 2px solid var(--text-aqua);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-primary);
}
.vpn__quote p { margin: 0; }

.vpn__body {
  display: flex;
  gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
}
.vpn__features {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 550px;
  padding-top: 20px;
}
.vpn__cta { margin-top: 4px; align-self: flex-start; }

/* phone mock-up: three screens cross-fade as the active feature changes */
.vpn__phone {
  position: relative;
  flex: 0 0 auto;
  width: 332px;
  height: 583px;
  overflow: hidden;
}
.vpn__phone-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 332px;
  height: auto;
  display: block;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.vpn__phone-img.is-active { opacity: 1; }
.vpn__phone::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg-page));
}

@media (max-width: 900px) {
  .vpn__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .vpn__quote { flex-basis: auto; }
  .vpn__body { flex-direction: column; align-items: center; }
  .vpn__phone { align-self: center; }
}

/* ============================================================
   One browser zone (aqua backdrop)
   ============================================================ */
/* follows the VPN panel in normal flow — no overlap, so no rounded top/shadow */
.onebrowser {
  background: url("../assets/aqua-bg.jpg") center top / cover no-repeat;
  overflow: hidden;
  padding-top: 100px;
}
.onebrowser__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.onebrowser__text {
  padding-bottom: 190px;
  max-width: 560px;
}
.section-title .accent-deep { color: var(--text-aqua-2); }
.onebrowser__quote {
  margin-top: 32px;
  max-width: 300px;
  padding-left: 24px;
  border-left: 2px solid var(--text-aqua);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-primary);
}
.onebrowser__quote p { margin: 0; }
.onebrowser__cta { margin-top: 40px; }

/* the phone is cropped by the block's bottom edge, as in the design */
.onebrowser__phone { flex: 0 0 468px; width: 468px; }
.onebrowser__phone img { width: 468px; height: auto; display: block; }

@media (max-width: 900px) {
  .onebrowser { padding-top: 64px; }
  .onebrowser__inner { flex-direction: column; align-items: flex-start; }
  .onebrowser__text { padding-bottom: 48px; }
  .onebrowser__phone { align-self: center; }
}

/* ============================================================
   Comparison table
   ============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.comparison {
  background: var(--bg-page);
  padding: 90px 0 110px;
}
.comparison__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.comparison__head {
  display: flex;
  gap: 40px;
  align-items: flex-end;
  margin-bottom: 56px;
}
.comparison__heading { flex: 1 1 auto; }
.comparison__quote {
  flex: 0 0 340px;
  padding-left: 24px;
  border-left: 2px solid var(--text-aqua);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-primary);
}
.comparison__quote p { margin: 0; }

/* column widths: label column + six equal browser columns */
.ctable-wrap {
  --label-col: 24.2%;
  --brand-col: 12.63%;
  position: relative;
}

/* white card behind the Aloha column */
.ctable__spotlight {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--label-col);
  width: var(--brand-col);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(28, 29, 38, 0.07);
  pointer-events: none;
}

.ctable {
  position: relative;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.ctable th,
.ctable td { text-align: center; vertical-align: middle; }
.ctable__corner { width: var(--label-col); }
.ctable__brand { width: var(--brand-col); }

.ctable__brand {
  padding: 24px 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.ctable__brand img {
  width: 28px;
  height: 28px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.ctable__brand span { vertical-align: middle; }
.ctable__brand--own { color: var(--text-aqua); }

/* group heading rows */
.ctable__group th {
  text-align: left;
  padding: 28px 0 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-aqua);
  border-top: 1px solid var(--divider);
}

/* feature rows */
.ctable tbody th[scope="row"] {
  text-align: left;
  padding: 14px 24px 14px 24px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}
.ctable tbody td { padding: 14px 8px; }
.ctable__check {
  width: 20px;
  height: 20px;
  display: block;
  margin: 0 auto;
  color: var(--text-aqua);
}
.ctable .is-no { color: var(--text-tertiary); }
.ctable .is-partial {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-tertiary);
}

@media (max-width: 900px) {
  .comparison__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .comparison__quote { flex-basis: auto; }
  /* let the table scroll rather than squeeze the columns */
  .ctable-wrap { overflow-x: auto; }
  .ctable { min-width: 760px; }
  .ctable__spotlight { display: none; }
}

/* ============================================================
   Premium zone — three cards that stack up as you scroll
   ============================================================ */
.premium {
  background: url("../assets/premium-bg.jpg") center top / cover no-repeat;
  padding: 100px 0 120px;
}
.premium__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.premium__head {
  display: flex;
  gap: 40px;
  align-items: flex-end;
  margin-bottom: 40px;
}
.premium__heading { flex: 1 1 auto; }
.section-label--premium { color: var(--text-premium-primary); }
.section-title .accent-premium { color: var(--text-premium-primary); }
.premium__quote {
  flex: 0 0 340px;
  padding-left: 24px;
  border-left: 2px solid var(--text-premium-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-primary);
}
.premium__quote p { margin: 0; }

/* The stack: each card sticks 24px lower than the one before it, so the
   cards underneath stay visible as thin strips. Later cards paint above
   earlier ones by DOM order — no z-index needed. */
.stack-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pcard {
  position: sticky;
  top: calc(96px + var(--i, 0) * 24px);
  min-height: 476px;
  padding: 56px;
  border-radius: 24px;
  background: linear-gradient(160deg, #fff9fc 0%, #ffeef5 100%);
  box-shadow: 0 10px 40px rgba(140, 40, 105, 0.10);
  display: flex;
  align-items: center;
  /* shrink towards the top edge, so the visible strip stays put while the
     body of the card recedes (scale + brightness are driven by JS) */
  transform-origin: center top;
  will-change: transform, filter;
}
.pcard__body { max-width: 700px; }
.pcard__title {
  margin: 0 0 24px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
}
.pcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.pcard__tags li {
  padding: 10px 20px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-premium-primary);
}
.pcard__text {
  margin: 0 0 32px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-secondary);
}
.btn--premium { background: var(--text-premium-primary); color: #fff; }
.btn--premium:hover { background: #d33b98; }

.pcard__icon {
  position: absolute;
  top: 40px;
  right: 72px;
  width: 104px;
  height: auto;
  display: block;
  pointer-events: none;
}

@media (max-width: 900px) {
  .premium__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .premium__quote { flex-basis: auto; }
  /* stacking needs vertical room — fall back to a plain list on small screens */
  .pcard { position: static; min-height: 0; padding: 32px; }
  .pcard__icon { display: none; }
}

/* ============================================================
   Closing call to action
   ============================================================ */
.cta {
  text-align: center;
  padding: 72px 0 120px;
  /* Lavender-to-mint backdrop, rebuilt in CSS from the design asset: a wide
     mint ellipse peaking at 68% height over a lavender-to-page-colour fade.
     Kept as gradients rather than an image — it is a smooth blend with no
     detail, and the PNG cost 822KB. */
  background:
    radial-gradient(ellipse 58% 24% at 50% 68%,
      #d8f0f3 0%,
      rgba(216, 240, 243, 0.72) 46%,
      rgba(216, 240, 243, 0) 100%),
    linear-gradient(180deg,
      #f6f4f9 0%,
      #f8f6fb 24%,
      #f6f8fb 44%,
      #f9fbfb 84%,
      var(--bg-page) 100%);
}
/* The devices sit wider than the text column, as in the design. The PNG
   carries ~73px of soft shadow + transparent tail below the devices, which
   already supplies the gap to the heading — hence the negative margin. */
.cta__devices {
  max-width: 1536px;
  margin: 0 auto -12px;
  padding: 0 24px;
}
.cta__devices img {
  width: 100%;
  height: auto;
  display: block;
}
.cta__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.cta__title {
  margin: 0 0 16px;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.cta__title .accent { color: var(--text-aqua); }
.cta__subtitle {
  margin: 0 0 40px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .cta { padding: 48px 0 80px; }
  .cta__title { font-size: 32px; }
  .cta__devices { margin-bottom: 40px; }
}

/* ============================================================
   FAQ — native <details> accordion, no JS required
   ============================================================ */
.faq {
  background: var(--bg-page);
  padding: 100px 0 120px;
}
.faq__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.faq__title {
  margin: 0 0 72px;
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.faq__group {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}
.faq__category {
  flex: 0 0 300px;
  margin: 0;
  padding-top: 20px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-aqua);
}
.faq__list { flex: 1 1 auto; min-width: 0; }

.faq__item { border-bottom: 1px solid var(--divider); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible {
  outline: 2px solid var(--text-aqua);
  outline-offset: 4px;
  border-radius: 4px;
}
.faq__chevron {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--text-tertiary);
  transition: transform 0.25s var(--ease-out);
}
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__a {
  padding: 0 48px 24px 0;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-secondary);
}
.faq__a p { margin: 0; }

@media (max-width: 900px) {
  .faq { padding: 64px 0 80px; }
  .faq__title { font-size: 40px; margin-bottom: 40px; }
  .faq__group { flex-direction: column; gap: 12px; }
  .faq__category { flex-basis: auto; padding-top: 32px; }
  .faq__a { padding-right: 24px; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: url("../assets/footer-bg.jpg") center bottom / cover no-repeat;
  padding: 56px 0 40px;
}
.footer__inner,
.footer__bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 56px;
}

.footer__brand { flex: 0 0 300px; }
.footer__logo { width: 110px; height: 28px; display: block; }
.footer__lead {
  margin: 28px 0 0;
  max-width: 270px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-secondary);
}
.footer__brand .btn { margin-top: 32px; }

.footer__nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.footer__col-title {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-secondary);
}
.footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer__list a {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.footer__list a:hover { color: var(--text-aqua); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
}
.footer__copy {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* theme switch — light is the only theme built so far */
.footer__theme {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}
.footer__theme button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.footer__theme button svg { width: 20px; height: 20px; }
.footer__theme button[aria-pressed="true"] {
  background: #fff;
  color: var(--text-aqua);
  box-shadow: 0 2px 8px rgba(28, 29, 38, 0.08);
}

@media (max-width: 900px) {
  .footer__inner { flex-direction: column; gap: 40px; }
  .footer__brand { flex-basis: auto; }
  .footer__nav { flex-wrap: wrap; gap: 32px 40px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}