/* ============================================================
   H2O DA AMAZÔNIA — GLOBAL STYLESHEET
   Seções:
   1.  Variáveis (tokens de design)
   2.  Reset & Base
   3.  Topbar
   4.  Header & Navegação
   5.  Page Hero (páginas internas)
   6.  Reutilizáveis (container, títulos, cards)
   7.  Botões
   8.  Formulários
   9.  Footer
   10. Animações
   11. Responsivo
============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. VARIÁVEIS
───────────────────────────────────────────────────────────── */
:root {
  /* Cores principais */
  --cor-azul-escuro : #002244;
  --cor-azul        : #003d6b;
  --cor-azul-claro  : #0077b6;
  --cor-azul-agua   : #00b4d8;
  --cor-verde       : #0f8a5f;
  --cor-amarelo     : #f59e0b;

  /* Neutros */
  --cor-branco      : #ffffff;
  --cor-bg-claro    : #f4f6f9;
  --cor-cinza       : #666666;
  --cor-texto       : #1a1a2e;
  --cor-borda       : #dee2e6;

  /* Sombras */
  --sombra-sm : 0 2px 8px  rgba(0, 61, 107, 0.08);
  --sombra    : 0 4px 24px rgba(0, 61, 107, 0.10);
  --sombra-lg : 0 8px 40px rgba(0, 61, 107, 0.14);

  /* Arredondamentos */
  --radius-sm : 6px;
  --radius    : 12px;
  --radius-lg : 20px;

  /* Tipografia */
  --font       : 'Montserrat', sans-serif;
  --font-serif : 'Lora', serif;

  /* Gradientes */
  --grad-hero : linear-gradient(135deg, var(--cor-azul-escuro) 0%, var(--cor-azul) 55%, var(--cor-azul-claro) 100%);
  --grad-agua : linear-gradient(135deg, var(--cor-azul-claro), var(--cor-azul-agua));

  /* Transição padrão */
  --trans : all 0.25s ease;
}


/* ─────────────────────────────────────────────────────────────
   1b. SCROLLBAR CUSTOMIZADA
   Remove a seta e estiliza para combinar com o design do site.
   Funciona no Chrome, Edge e Safari (Firefox via scrollbar-width).
───────────────────────────────────────────────────────────── */

/* Firefox */
* {
  scrollbar-width : thin;
  scrollbar-color : var(--cor-azul-claro) var(--cor-azul-escuro);
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width  : 6px;   /* largura fina e elegante */
  height : 6px;
}

::-webkit-scrollbar-track {
  background    : var(--cor-azul-escuro);
  border-radius : 0;
}

::-webkit-scrollbar-thumb {
  background    : var(--cor-azul-claro);
  border-radius : 100px;
  transition    : background .2s;
}

::-webkit-scrollbar-thumb:hover {
  background : var(--cor-azul-agua);
}

/* Remove os botões de seta da scrollbar */
::-webkit-scrollbar-button { display: none; }

/* ─────────────────────────────────────────────────────────────
   2. RESET & BASE
───────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html            { scroll-behavior: smooth; }
body            { font-family: var(--font); color: var(--cor-texto); background: var(--cor-branco); overflow-x: hidden; line-height: 1.6; }
a               { text-decoration: none; color: inherit; }
img             { max-width: 100%; display: block; }
ul              { list-style: none; }
button          { font-family: var(--font); cursor: pointer; }


/* ─────────────────────────────────────────────────────────────
   3. TOPBAR
───────────────────────────────────────────────────────────── */
.topbar {
  background : var(--cor-azul-escuro);
  color      : rgba(255,255,255,.85);
  font-size  : 13px;
  padding    : 8px 0;
}

.topbar__inner {
  display       : flex;
  justify-content: space-between;
  align-items   : center;
  flex-wrap     : wrap;
  gap           : 8px;
}

.topbar__info {
  display     : flex;
  gap         : 24px;
  align-items : center;
  flex-wrap   : wrap;
}

.topbar__info span {
  display     : flex;
  align-items : center;
  gap         : 6px;
}

.topbar__social { display: flex; gap: 10px; }

.topbar__social a {
  width          : 28px;
  height         : 28px;
  border-radius  : 50%;
  background     : rgba(255,255,255,.12);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 13px;
  transition     : var(--trans);
}

.topbar__social a:hover { background: var(--cor-azul-agua); }


/* ─────────────────────────────────────────────────────────────
   4. HEADER & NAVEGAÇÃO
───────────────────────────────────────────────────────────── */
.header {
  background    : var(--cor-branco);
  border-bottom : 1px solid var(--cor-borda);
  position      : sticky;
  top           : 0;
  z-index       : 100;
  box-shadow    : var(--sombra-sm);
  transition    : box-shadow .3s ease;
}

.header.scrolled { box-shadow: var(--sombra); }

.header__inner {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  height          : 72px;
  gap             : 24px;
}

/* ── Logo */
.logo {
  display     : flex;
  align-items : center;
  gap         : 10px;
  flex-shrink : 0;
}

/* Moldura circular da logo */
.logo__frame {
  width           : 52px;
  height          : 52px;
  border-radius   : 50%;
  overflow        : hidden;
  flex-shrink     : 0;
  border          : 2px solid rgba(0, 119, 182, 0.20);
  box-shadow      : 0 2px 10px rgba(0, 61, 107, 0.14);
  background      : var(--cor-branco);
  transition      : box-shadow .25s, border-color .25s, transform .25s;
}

.logo:hover .logo__frame {
  box-shadow   : 0 4px 18px rgba(0, 119, 182, 0.28);
  border-color : var(--cor-azul-claro);
  transform    : scale(1.04);
}

/* Imagem dentro da moldura circular */
.logo__img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  object-position: center;
  display    : block;
}

/* Texto ao lado da logo (opcional — visível em telas maiores) */
.logo__text {
  display        : flex;
  flex-direction : column;
}

.logo__name {
  font-size      : 16px;
  font-weight    : 800;
  color          : var(--cor-azul);
  line-height    : 1.15;
  letter-spacing : -0.2px;
}

.logo__sub {
  font-size      : 10px;
  color          : var(--cor-cinza);
  font-weight    : 500;
  letter-spacing : 0.3px;
}

@media (max-width: 480px) {
  .logo__text { display: none; } /* só o círculo no mobile pequeno */
}

/* ── Nav desktop */
.nav-desktop {
  display     : flex;
  align-items : center;
  gap         : 4px;
}

.nav__link {
  padding       : 8px 15px;
  border-radius : var(--radius-sm);
  font-size     : 14px;
  font-weight   : 600;
  color         : var(--cor-texto);
  transition    : var(--trans);
}

.nav__link:hover,
.nav__link--active {
  color      : var(--cor-azul-claro);
  background : var(--cor-bg-claro);
}

.nav__link--cta {
  background  : var(--cor-azul-claro);
  color       : var(--cor-branco) !important;
  padding     : 10px 20px;
  border-radius: 8px;
  margin-left : 4px;
}

.nav__link--cta:hover { background: var(--cor-azul-escuro) !important; }

/* ── Botão hamburger */
.menu-toggle {
  display    : none;
  background : none;
  border     : none;
  font-size  : 24px;
  color      : var(--cor-azul);
  padding    : 4px;
  line-height: 1;
}

/* ── Nav mobile */
.nav-mobile {
  display        : none;
  flex-direction : column;
  gap            : 4px;
  padding        : 12px 24px 20px;
  background     : var(--cor-branco);
  border-top     : 1px solid var(--cor-borda);
}

.nav-mobile.is-open { display: flex; }

.nav-mobile .nav__link {
  padding   : 12px 16px;
  font-size : 15px;
}

.nav-mobile .nav__link--cta {
  text-align  : center;
  margin-left : 0;
  margin-top  : 4px;
}


/* ─────────────────────────────────────────────────────────────
   5. PAGE HERO (páginas internas)
───────────────────────────────────────────────────────────── */
.page-hero {
  background : var(--grad-hero);
  color      : var(--cor-branco);
  padding    : 64px 0;
  position   : relative;
  overflow   : hidden;
}

/* Padrão de pontos sutil no fundo (páginas sem foto) */
.page-hero::before {
  content         : '';
  position        : absolute;
  inset           : 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='20' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E");
  pointer-events  : none;
}

.page-hero__inner { position: relative; z-index: 2; }

/* ── Page hero COM imagem de fundo ────────────────────────────
   Uso: <section class="page-hero page-hero--img"
              style="--hero-img: url('sua-foto.jpg');">
     <div class="page-hero__bg"></div>
     <div class="page-hero__overlay"></div>
     ...
   </section>
──────────────────────────────────────────────────────────── */
.page-hero--img {
  /* Remove o gradiente padrão — a foto assume o lugar */
  background : var(--cor-azul-escuro);
}

/* Oculta o padrão de bolinhas quando há foto */
.page-hero--img::before { display: none; }

/* Camada da foto */
.page-hero__bg {
  position            : absolute;
  inset               : 0;
  background-image    : var(--hero-img);
  background-size     : cover;
  background-position : center 40%;
  background-repeat   : no-repeat;
  z-index             : 0;
}

/* Overlay gradiente: escuro na esquerda → semi-transparente na direita */
.page-hero__overlay {
  position   : absolute;
  inset      : 0;
  background : linear-gradient(
    105deg,
    rgba(0, 22, 44, 0.88) 0%,
    rgba(0, 34, 68, 0.80) 40%,
    rgba(0, 61, 107, 0.65) 70%,
    rgba(0, 119, 182, 0.45) 100%
  );
  z-index    : 1;
}

/* Breadcrumb */
.breadcrumb {
  display     : flex;
  align-items : center;
  gap         : 8px;
  font-size   : 13px;
  color       : rgba(255,255,255,.6);
  margin-bottom: 16px;
}

.breadcrumb a          { color: rgba(255,255,255,.6); transition: color .2s; }
.breadcrumb a:hover    { color: var(--cor-azul-agua); }
.breadcrumb__sep       { color: rgba(255,255,255,.3); }
.breadcrumb__current   { color: rgba(255,255,255,.9); }

.page-hero__title {
  font-family : var(--font-serif);
  font-size   : clamp(28px, 4vw, 46px);
  font-weight : 600;
  line-height : 1.2;
  margin-bottom: 12px;
}

.page-hero__desc {
  font-size  : 16px;
  color      : rgba(255,255,255,.82);
  max-width  : 600px;
  line-height: 1.75;
}


/* ─────────────────────────────────────────────────────────────
   6. REUTILIZÁVEIS
───────────────────────────────────────────────────────────── */

/* Container central */
.container {
  max-width : 1200px;
  margin    : 0 auto;
  padding   : 0 24px;
}

/* Seções */
.section        { padding: 80px 0; }
.section--bg    { background: var(--cor-bg-claro); }
.section--dark  { background: var(--cor-azul-escuro); }

/* Cabeçalho de seção */
.section__label {
  display        : block;
  font-size      : 12px;
  font-weight    : 700;
  color          : var(--cor-azul-claro);
  letter-spacing : 2px;
  text-transform : uppercase;
  margin-bottom  : 10px;
}
.section--dark .section__label { color: var(--cor-azul-agua); }

.section__title {
  font-family  : var(--font-serif);
  font-size    : clamp(24px, 3vw, 36px);
  font-weight  : 600;
  color        : var(--cor-azul-escuro);
  line-height  : 1.25;
  margin-bottom: 14px;
}
.section--dark .section__title { color: var(--cor-branco); }

.section__sub {
  font-size  : 15px;
  color      : var(--cor-cinza);
  line-height: 1.75;
  max-width  : 580px;
}

.section__header        { margin-bottom: 52px; }
.section__header--center{ text-align: center; }
.section__header--center .section__sub { margin: 0 auto; }

/* Ícone decorativo (caixa colorida com emoji/ícone) */
.icon-box {
  width           : 52px;
  height          : 52px;
  border-radius   : 12px;
  background      : var(--grad-agua);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 22px;
  flex-shrink     : 0;
}
.icon-box--sm { width: 40px; height: 40px; font-size: 17px; border-radius: 10px; }
.icon-box--lg { width: 64px; height: 64px; font-size: 28px; border-radius: 14px; }

/* Card genérico */
.card {
  background    : var(--cor-branco);
  border        : 1px solid var(--cor-borda);
  border-radius : var(--radius);
  padding       : 28px;
  transition    : var(--trans);
}
.card:hover {
  box-shadow   : var(--sombra);
  transform    : translateY(-4px);
  border-color : var(--cor-azul-claro);
}

/* Tag */
.tag {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  background   : var(--cor-bg-claro);
  border       : 1px solid var(--cor-borda);
  border-radius: 100px;
  padding      : 5px 14px;
  font-size    : 13px;
  font-weight  : 600;
  color        : var(--cor-azul);
}

/* Estrelas (depoimentos) */
.stars { color: var(--cor-amarelo); letter-spacing: 2px; font-size: 15px; }


/* ─────────────────────────────────────────────────────────────
   7. BOTÕES
───────────────────────────────────────────────────────────── */
.btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  padding        : 13px 26px;
  border-radius  : 8px;
  font-family    : var(--font);
  font-size      : 14px;
  font-weight    : 700;
  cursor         : pointer;
  border         : 2px solid transparent;
  transition     : var(--trans);
  line-height    : 1;
  white-space    : nowrap;
}

.btn--primary {
  background   : var(--cor-azul-claro);
  color        : var(--cor-branco);
  border-color : var(--cor-azul-claro);
}
.btn--primary:hover {
  background   : var(--cor-azul-escuro);
  border-color : var(--cor-azul-escuro);
  transform    : translateY(-2px);
  box-shadow   : 0 6px 20px rgba(0,119,182,.3);
}

.btn--outline-white {
  background   : transparent;
  color        : var(--cor-branco);
  border-color : rgba(255,255,255,.5);
}
.btn--outline-white:hover {
  background   : rgba(255,255,255,.12);
  border-color : var(--cor-branco);
}

.btn--white {
  background   : var(--cor-branco);
  color        : var(--cor-azul);
  border-color : var(--cor-branco);
}
.btn--white:hover {
  background   : var(--cor-azul-agua);
  color        : var(--cor-branco);
  border-color : var(--cor-azul-agua);
  transform    : translateY(-2px);
}

.btn--whatsapp {
  background   : #25d366;
  color        : var(--cor-branco);
  border-color : #25d366;
}
.btn--whatsapp:hover {
  background   : #128c7e;
  border-color : #128c7e;
  transform    : translateY(-2px);
  box-shadow   : 0 6px 20px rgba(37,211,102,.3);
}

.btn--full { width: 100%; }
.btn--lg   { padding: 15px 32px; font-size: 15px; }


/* ─────────────────────────────────────────────────────────────
   8. FORMULÁRIOS
───────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }

.form-group label {
  display       : block;
  font-size     : 13px;
  font-weight   : 600;
  color         : var(--cor-azul-escuro);
  margin-bottom : 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width         : 100%;
  padding       : 12px 14px;
  border        : 1.5px solid var(--cor-borda);
  border-radius : var(--radius-sm);
  font-size     : 14px;
  font-family   : var(--font);
  color         : var(--cor-texto);
  background    : var(--cor-branco);
  transition    : border-color .2s, box-shadow .2s;
  outline       : none;
  appearance    : none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color : var(--cor-azul-claro);
  box-shadow   : 0 0 0 3px rgba(0,119,182,.08);
}

.form-group textarea { resize: vertical; min-height: 110px; }

/* Seta customizada no select */
.form-group select {
  background-image   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat  : no-repeat;
  background-position: right 14px center;
  padding-right      : 36px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Mensagem de sucesso */
.form-success {
  display    : none;
  text-align : center;
  padding    : 48px 20px;
}
.form-success__icon  { font-size: 56px; display: block; margin-bottom: 16px; }
.form-success__title { font-size: 22px; font-weight: 700; color: var(--cor-verde); margin-bottom: 8px; }
.form-success__text  { font-size: 14px; color: var(--cor-cinza); line-height: 1.7; }


/* ─────────────────────────────────────────────────────────────
   9. FOOTER
───────────────────────────────────────────────────────────── */
.footer {
  background : var(--cor-azul-escuro);
  color      : rgba(255,255,255,.75);
  padding    : 64px 0 0;
  position   : relative;
  overflow   : hidden;
}

/* Imagem de fundo do rodapé (rede de pontos) */
.footer--bg::before {
  content             : '';
  position            : absolute;
  inset               : 0;
  background-image    : url('assets/img/rotape.png');
  background-size     : cover;
  background-position : center right;
  background-repeat   : no-repeat;
  opacity             : 0.18;   /* bem sutil para não disputar com o texto */
  pointer-events      : none;
  z-index             : 0;
}

/* Garante que todo conteúdo do footer fique acima da imagem */
.footer--bg > * {
  position : relative;
  z-index  : 1;
}

/* Faixa CTA no topo do footer */
.footer__cta {
  background    : var(--grad-agua);
  border-radius : var(--radius);
  padding       : 24px 28px;
  display       : flex;
  align-items   : center;
  justify-content: space-between;
  gap           : 20px;
  flex-wrap     : wrap;
  margin-bottom : 52px;
}

.footer__cta p    { font-size: 16px; font-weight: 700; color: var(--cor-branco); }
.footer__cta span { font-size: 13px; color: rgba(255,255,255,.82); display: block; margin-top: 2px; }

/* Grid de colunas */
.footer__grid {
  display               : grid;
  grid-template-columns : 1.6fr 1fr 1fr 1fr;
  gap                   : 40px;
  padding-bottom        : 48px;
}

.footer__brand-name {
  font-size   : 20px;
  font-weight : 800;
  color       : var(--cor-branco);
  display     : block;
  margin-bottom: 12px;
}

.footer__brand-desc {
  font-size   : 13px;
  line-height : 1.75;
  color       : rgba(255,255,255,.6);
  margin-bottom: 20px;
}

.footer__social { display: flex; gap: 10px; }

.footer__social a {
  width           : 36px;
  height          : 36px;
  border-radius   : 8px;
  background      : rgba(255,255,255,.08);
  border          : 1px solid rgba(255,255,255,.14);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 14px;
  transition      : var(--trans);
}
.footer__social a:hover { background: var(--cor-azul-agua); border-color: var(--cor-azul-agua); }

.footer__col-title {
  font-size      : 12px;
  font-weight    : 700;
  color          : var(--cor-branco);
  letter-spacing : 1.5px;
  text-transform : uppercase;
  margin-bottom  : 18px;
  display        : block;
}

.footer__links li         { margin-bottom: 10px; }
.footer__links a          { font-size: 14px; color: rgba(255,255,255,.62); transition: color .2s; }
.footer__links a:hover    { color: var(--cor-azul-agua); }

.footer__contact-item {
  display     : flex;
  gap         : 10px;
  align-items : center;   /* centraliza emoji e texto na mesma linha */
  font-size   : 13px;
  color       : rgba(255,255,255,.62);
  margin-bottom: 10px;
  line-height : 1.5;
}

/* Emoji do ícone: tamanho fixo para não desalinhar */
.footer__contact-item .fi {
  font-size   : 15px;
  flex-shrink : 0;
  width       : 18px;
  text-align  : center;
  line-height : 1;
}

.footer__bottom {
  border-top      : 1px solid rgba(255,255,255,.10);
  padding         : 18px 0;
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  font-size       : 12px;
  color           : rgba(255,255,255,.38);
  flex-wrap       : wrap;
  gap             : 8px;
}


/* ─────────────────────────────────────────────────────────────
   10. ANIMAÇÕES
───────────────────────────────────────────────────────────── */

/* Elementos que entram ao fazer scroll */
.reveal {
  opacity   : 0;
  transform : translateY(22px);
  transition: opacity .5s ease, transform .5s ease;
  will-change: opacity, transform;
}

.reveal.visible              { opacity: 1; transform: translateY(0); }
.reveal.delay-1              { transition-delay: .10s; }
.reveal.delay-2              { transition-delay: .20s; }
.reveal.delay-3              { transition-delay: .30s; }

/* ── Canvas do particles.js — hero principal e heroes internos ── */
#particles-js {
  position      : absolute;
  inset         : 0;
  z-index       : 2;
  pointer-events: none;
}

#particles-js canvas { pointer-events: auto; }

/* Hero interno: o canvas precisa ficar dentro do page-hero */
.page-particles {
  position      : absolute;
  inset         : 0;
  z-index       : 2;
  pointer-events: none;
}

.page-particles canvas { pointer-events: auto; }

/* Hero: anima via keyframe sem depender do IntersectionObserver
   (conteúdo acima da dobra já está visível ao carregar) */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.hero .reveal {
  animation         : heroIn .6s ease both;
  opacity           : 1; /* sobrescreve o opacity:0 do .reveal */
}

.hero .reveal.delay-1 { animation-delay: .12s; }
.hero .reveal.delay-2 { animation-delay: .24s; }
.hero .reveal.delay-3 { animation-delay: .36s; }


/* ─────────────────────────────────────────────────────────────
   10b. ÍCONES SOCIAIS (SVG inline via icons.js)
───────────────────────────────────────────────────────────── */

/* Link social genérico — se aplica tanto na topbar quanto no footer */
.social-link {
  display         : flex;
  align-items     : center;
  justify-content : center;
  transition      : var(--trans);
  flex-shrink     : 0;
}

.social-link svg {
  display : block;
  fill    : currentColor;
}

/* ── Topbar: círculos pequenos brancos ── */
.topbar__social .social-link {
  width         : 28px;
  height        : 28px;
  border-radius : 50%;
  background    : rgba(255, 255, 255, 0.12);
  color         : rgba(255, 255, 255, 0.85);
}

.topbar__social .social-link:hover {
  background : var(--cor-azul-agua);
  color      : var(--cor-branco);
}

/* ── Footer: quadrados arredondados ── */
.footer__social .social-link {
  width         : 36px;
  height        : 36px;
  border-radius : 8px;
  background    : rgba(255, 255, 255, 0.08);
  border        : 1px solid rgba(255, 255, 255, 0.14);
  color         : rgba(255, 255, 255, 0.75);
}

.footer__social .social-link:hover {
  background   : var(--cor-azul-agua);
  border-color : var(--cor-azul-agua);
  color        : var(--cor-branco);
}

/* ── Cores de marca ao passar o mouse (opcional — descomente se quiser) ──
.footer__social .social-link[aria-label="Facebook"]:hover  { background: #1877f2; border-color: #1877f2; }
.footer__social .social-link[aria-label="Instagram"]:hover { background: #e1306c; border-color: #e1306c; }
.footer__social .social-link[aria-label="LinkedIn"]:hover  { background: #0a66c2; border-color: #0a66c2; }
.footer__social .social-link[aria-label="WhatsApp"]:hover  { background: #25d366; border-color: #25d366; }
── */


/* ─────────────────────────────────────────────────────────────
   11. RESPONSIVO
───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  .nav-desktop  { display: none; }
  .menu-toggle  { display: block; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__cta  { flex-direction: column; text-align: center; }
  .page-hero    { padding: 48px 0; }
  .section      { padding: 60px 0; }
  .form-row     { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .topbar__info { display: none; }
  .container    { padding: 0 16px; }
}