/* RedeX.fun — Vanilla layout (pixel-ish) */

/* ===== CSS Variables (tokens) ===== */
:root{
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;

  --bg-page: #e9edf1;
  --bg-surface: #ffffff;
  --bg-surface-2: #f5f7fa;
  --text: #1b2430;
  --text-muted: #556070;
  --border: rgba(27,36,48,0.12);
  --shadow: rgba(27,36,48,0.14);

  --brand: #2f9e57;
  --brand-2: #1f7a43;
  --brand-soft: rgba(47,158,87,0.14);


  /* Category accents (site cards) */
  --badge-border: rgba(0,0,0,0.08);
  --cat-bem-estar: var(--brand);
  --cat-bem-estar-bg: var(--brand-soft);
  --cat-nutricao: #1f9d8f;
  --cat-nutricao-bg: rgba(31,157,143,0.14);
  --cat-energia: #e07a13;
  --cat-energia-bg: rgba(224,122,19,0.14);
  --cat-metabolismo: #7b61ff;
  --cat-metabolismo-bg: rgba(123,97,255,0.14);
  --cat-coracao: #d64545;
  --cat-coracao-bg: rgba(214,69,69,0.14);
  --cat-tireoide: #2d6cdf;
  --cat-tireoide-bg: rgba(45,108,223,0.14);
  --cat-mente: #9b5de5;
  --cat-mente-bg: rgba(155,93,229,0.14);
  --cat-digestao: #f4a261;
  --cat-digestao-bg: rgba(244,162,97,0.16);
  --cat-audicao: #00b4d8;
  --cat-audicao-bg: rgba(0,180,216,0.14);
  --cat-lifestyle: #6c757d;
  --cat-lifestyle-bg: rgba(108,117,125,0.12);

  /* Theme toggle */
  --toggle-bg: var(--brand-soft);
  --toggle-border: rgba(31,122,67,0.28);

  --focus: #1f7a43;

  --section-pad-y: 30px; /* REQUIRED */
  --container-max: 1160px;
  --container-pad-x: clamp(18px, 3vw, 32px);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  --shadow-1: 0 8px 20px rgba(0,0,0,.12);
  --shadow-2: 0 18px 40px rgba(0,0,0,.22);

  --gutter: 24px;
  --row-gap: 24px;

  --nav-h: 64px;
  --tap: 44px;
}

html[data-theme="dark"]{
  --bg-page: #0f1115;
  --bg-surface: #141923;
  --bg-surface-2: #0f141d;
  --text: #e9eef5;
  --text-muted: #b5bfcc;
  --border: rgba(233,238,245,0.14);
  --shadow: rgba(0,0,0,0.55);

  --brand: #43b66a;
  --brand-2: #2f9e57;
  --brand-soft: rgba(67,182,106,0.16);

  --focus: #7ce7a2;

  --shadow-1: 0 10px 24px rgba(0,0,0,.35);
  --shadow-2: 0 22px 60px rgba(0,0,0,.60);


  /* Category accents (site cards) */
  --badge-border: rgba(255,255,255,0.12);
  --cat-bem-estar: var(--brand);
  --cat-bem-estar-bg: var(--brand-soft);
  --cat-nutricao: #3bcbb6;
  --cat-nutricao-bg: rgba(59,203,182,0.16);
  --cat-energia: #f5a54b;
  --cat-energia-bg: rgba(245,165,75,0.18);
  --cat-metabolismo: #a29bfe;
  --cat-metabolismo-bg: rgba(162,155,254,0.16);
  --cat-coracao: #ff6b6b;
  --cat-coracao-bg: rgba(255,107,107,0.16);
  --cat-tireoide: #6ea8fe;
  --cat-tireoide-bg: rgba(110,168,254,0.16);
  --cat-mente: #c77dff;
  --cat-mente-bg: rgba(199,125,255,0.16);
  --cat-digestao: #f6bd60;
  --cat-digestao-bg: rgba(246,189,96,0.16);
  --cat-audicao: #4cc9f0;
  --cat-audicao-bg: rgba(76,201,240,0.16);
  --cat-lifestyle: #ced4da;
  --cat-lifestyle-bg: rgba(206,212,218,0.10);

  /* Theme toggle */
  --toggle-bg: linear-gradient(180deg, var(--bg-surface), var(--bg-surface-2));
  --toggle-border: var(--border);

}

*{ box-sizing:border-box; }
html{ color-scheme: light dark; }
body{
  margin:0;
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text);
  line-height: 1.5;
}

img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
p{ margin: 0; }
ul{ margin:0; padding:0; list-style:none; }

/* ===== Utilities ===== */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.brand-accent{ color: var(--brand); font-style: italic; }
.micro{ font-size: 14px; color: var(--text-muted); }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.02));
  font-size: 12px;
  color: var(--text-muted);
}

/* Skip link */
.skip-link{
  position:absolute; top:8px; left:8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  transform: translateY(-120%);
  transition: transform .18s ease;
  z-index: 1000;
}
.skip-link:focus{ transform: translateY(0); outline: 3px solid var(--focus); outline-offset: 2px; }

/* App surface */
.app{
  max-width: 1440px;
  margin: 24px auto;
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
  overflow: clip;
  border: 1px solid rgba(0,0,0,0.03);
}

/* Container */
.container{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-x);
}

/* Focus */
:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ===== Header / Nav ===== */
.site-header{
  position: relative;
  background:
    radial-gradient(1200px 380px at 20% 0%, var(--brand-soft), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.03), transparent 40%);
}
.nav{
  min-height: var(--nav-h);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--container-pad-x);
  max-width: var(--container-max);
  margin: 0 auto;
}
.brand{ display:flex; align-items:center; gap:12px; }

.nav__toggle{
  display:none;
  width: var(--tap);
  height: var(--tap);
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  box-shadow: var(--shadow-1);
  align-items:center; justify-content:center;
}
.hamburger{
  width: 18px; height: 2px; background: var(--text);
  position: relative;
}
.hamburger::before,.hamburger::after{
  content:"";
  position:absolute; left:0;
  width: 18px; height: 2px; background: var(--text);
}
.hamburger::before{ top: -6px; }
.hamburger::after{ top: 6px; }

.nav__menu{
  display:flex;
  align-items:center;
  justify-content: space-between;
  flex:1;
  gap: 16px;
}
.nav__links{
  display:flex;
  align-items:center;
  gap: 16px;
  padding-left: 12px;
}
.nav__links a{
  font-size: 14px;
  color: var(--text-muted);
  padding: 10px 10px;
  border-radius: 10px;
}
.nav__links a:hover{ background: rgba(0,0,0,0.04); color: var(--text); }

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

/* Language */
.lang{
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-surface-2));
}
.lang__btn{
  width: 36px; height: 36px;
  border-radius: 999px;
  border: none;
  background: transparent;
  cursor: pointer;
  display:grid; place-items:center;
  font-size: 16px;
}
.lang__btn[aria-pressed="true"]{
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}

/* Theme toggle */
.theme-toggle{
  width: var(--tap);
  height: var(--tap);
  border-radius: 12px;
  border: 1px solid var(--toggle-border);
  background: var(--toggle-bg);
  box-shadow: var(--shadow-1);
  cursor:pointer;
}
.theme-toggle:focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; }
.theme-toggle__icon{ font-size: 16px; }

/* ===== Hero ===== */
.hero{
  padding-block: var(--section-pad-y);
  min-block-size: 100svh; /* REQUIRED when it fills the fold */
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 34px;
  align-items:center;
}
.hero__content h1{
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.lead{
  font-size: 16px;
  color: var(--text-muted);
  margin-bottom: 16px;
  max-width: 62ch;
}
.checklist{
  display:grid;
  gap: 10px;
  margin-bottom: 18px;
}
.checklist li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: var(--text);
}
.check{
  width: 20px; height: 20px;
  border-radius: 999px;
  display:grid; place-items:center;
  background: var(--brand-soft);
  color: var(--brand);
  flex: 0 0 auto;
  margin-top: 2px;
}

.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
.hero__cta .micro{ width:100%; margin-top: 6px; }

.hero__media{
  justify-self:end;
  width: min(520px, 100%);
}
.media-frame{
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  background: radial-gradient(800px 260px at 20% 0%, var(--brand-soft), transparent 55%);
}
.media-frame img{ aspect-ratio: 4 / 3; object-fit: cover; }

/* Categories row */
.hero__cats{ margin-top: 22px; }
.cat-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cat-card{
  --cat-card-accent: var(--brand);
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  box-shadow: var(--shadow-1);
  display:block;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: rgba(0,0,0,0.10);
}
.cat-card img{ aspect-ratio: 16/9; object-fit: cover; }

.cat-card[data-filter="bem-estar"]{ --cat-card-accent: var(--cat-bem-estar); }
.cat-card[data-filter="nutricao"]{ --cat-card-accent: var(--cat-nutricao); }
.cat-card[data-filter="mente"]{ --cat-card-accent: var(--cat-mente); }

.cat-card__label{
  display:block;
  padding: 12px 14px;
  font-weight: 800;
  text-align:center;
  border-top: 3px solid var(--cat-card-accent);
}

/* ===== Sections ===== */
.site-main > .section{
  padding-block: var(--section-pad-y); /* REQUIRED */
}
.section h2{
  margin: 0;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  text-align:center;
  letter-spacing: -0.01em;
}
.section > .container{ margin-top: 18px; }

.card-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.card{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-surface-2));
  box-shadow: var(--shadow-1);
  padding: 18px;
}
.card h3{
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.25;
}
.card p{ color: var(--text-muted); }
.stars{ color: var(--brand); display:inline-block; margin-top: 10px; letter-spacing: 1px; }

/* Steps */
.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.step{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
  padding: 18px;
}
.step h3{
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.25;
  display:flex;
  gap: 10px;
  align-items:center;
}
.step__n{
  width: 28px; height: 28px;
  border-radius: 999px;
  display:grid; place-items:center;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 800;
}
.step p{ color: var(--text-muted); }
.disclaimer{
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-muted);
}

/* Catalog */
.catalog{
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: radial-gradient(900px 260px at 10% 0%, var(--brand-soft), transparent 55%),
              linear-gradient(180deg, var(--bg-surface), var(--bg-surface-2));
  box-shadow: var(--shadow-1);
  padding: 18px;
}
.catalog__controls{
  display:grid;
  gap: 12px;
  margin-bottom: 14px;
}
.input{
  height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text);
}
.input::placeholder{ color: var(--text-muted); opacity: .8; }
.input:focus-visible{ outline-offset: 1px; }

.chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.chip{
  --chip-accent: var(--brand);
  --chip-bg-active: var(--brand-soft);
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
}
.chip.is-active{
  background: var(--chip-bg-active);
  color: var(--text);
  border-color: var(--chip-accent);
}
.chip:hover{ color: var(--text); }

/* Chip accents by category */
.chip[data-filter="bem-estar"]{ --chip-accent: var(--cat-bem-estar); --chip-bg-active: var(--cat-bem-estar-bg); }
.chip[data-filter="nutricao"]{ --chip-accent: var(--cat-nutricao); --chip-bg-active: var(--cat-nutricao-bg); }
.chip[data-filter="energia"]{ --chip-accent: var(--cat-energia); --chip-bg-active: var(--cat-energia-bg); }
.chip[data-filter="metabolismo"]{ --chip-accent: var(--cat-metabolismo); --chip-bg-active: var(--cat-metabolismo-bg); }
.chip[data-filter="coração"],
.chip[data-filter="coracao"]{ --chip-accent: var(--cat-coracao); --chip-bg-active: var(--cat-coracao-bg); }
.chip[data-filter="tireoide"]{ --chip-accent: var(--cat-tireoide); --chip-bg-active: var(--cat-tireoide-bg); }
.chip[data-filter="mente"]{ --chip-accent: var(--cat-mente); --chip-bg-active: var(--cat-mente-bg); }
.chip[data-filter="digestao"]{ --chip-accent: var(--cat-digestao); --chip-bg-active: var(--cat-digestao-bg); }
.chip[data-filter="audicao"]{ --chip-accent: var(--cat-audicao); --chip-bg-active: var(--cat-audicao-bg); }
.chip[data-filter="lifestyle"]{ --chip-accent: var(--cat-lifestyle); --chip-bg-active: var(--cat-lifestyle-bg); }

.site-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.site-card{
  --site-accent: var(--brand);
  --site-accent-bg: var(--brand-soft);
  position:relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--site-accent);
  background: var(--bg-surface);
  padding: 14px 14px 14px 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.site-card__badge{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--site-accent-bg);
  color: var(--site-accent);
  font-weight: 800;
  font-size: 12px;
  border: 1px solid var(--badge-border);
}
.site-card[data-cat="bem-estar"]{ --site-accent: var(--cat-bem-estar); --site-accent-bg: var(--cat-bem-estar-bg); }
.site-card[data-cat="nutricao"]{ --site-accent: var(--cat-nutricao); --site-accent-bg: var(--cat-nutricao-bg); }
.site-card[data-cat="energia"]{ --site-accent: var(--cat-energia); --site-accent-bg: var(--cat-energia-bg); }
.site-card[data-cat="metabolismo"]{ --site-accent: var(--cat-metabolismo); --site-accent-bg: var(--cat-metabolismo-bg); }
.site-card[data-cat="coração"],
.site-card[data-cat="coracao"]{ --site-accent: var(--cat-coracao); --site-accent-bg: var(--cat-coracao-bg); }
.site-card[data-cat="tireoide"]{ --site-accent: var(--cat-tireoide); --site-accent-bg: var(--cat-tireoide-bg); }
.site-card[data-cat="mente"]{ --site-accent: var(--cat-mente); --site-accent-bg: var(--cat-mente-bg); }
.site-card[data-cat="digestao"]{ --site-accent: var(--cat-digestao); --site-accent-bg: var(--cat-digestao-bg); }
.site-card[data-cat="audicao"]{ --site-accent: var(--cat-audicao); --site-accent-bg: var(--cat-audicao-bg); }
.site-card[data-cat="lifestyle"]{ --site-accent: var(--cat-lifestyle); --site-accent-bg: var(--cat-lifestyle-bg); }

.site-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
}
.site-card h4{
  margin: 10px 0 6px;
  font-size: 16px;
  line-height: 1.25;
}
.site-card p{
  margin:0;
  font-size: 14px;
  color: var(--text-muted);
}
.site-card__url{
  display:block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--site-accent);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Social proof */
.reviews{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.review{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-surface-2));
  box-shadow: var(--shadow-1);
  padding: 18px;
}
.review__head{
  display:flex; gap: 12px; align-items:center;
  margin-bottom: 10px;
}
.review__head img{
  border-radius: 999px;
  border: 1px solid var(--border);
}
.review h3{ margin:0; font-size: 16px; }
.review p{ color: var(--text-muted); }

/* Access split */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

/* Accordion */
.accordion{
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-surface-2));
  box-shadow: var(--shadow-1);
  overflow:hidden;
}
.accordion__item + .accordion__item{ border-top: 1px solid var(--border); }
.accordion__btn{
  width: 100%;
  min-height: 56px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 16px;
  padding: 14px 18px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align:left;
}
.accordion__btn:hover{ background: rgba(0,0,0,0.04); }
.accordion__icon{
  width: 28px; height: 28px;
  border-radius: 999px;
  display:grid; place-items:center;
  border: 1px solid var(--border);
  color: var(--brand);
  flex: 0 0 auto;
}
.accordion__panel{
  padding: 0 18px 14px 18px;
  display: none;
}
.accordion__panel p{ color: var(--text-muted); }
.accordion__item.is-open .accordion__panel{ display:block; }
.accordion__item.is-open .accordion__icon{ transform: rotate(45deg); }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor:pointer;
  user-select:none;
}
.btn--primary{
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  color: #fff;
  box-shadow: var(--shadow-1);
}
.btn--primary:hover{ filter: brightness(1.03); }
.btn--secondary{
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn--secondary:hover{ background: var(--brand-soft); }
.btn--ghost{
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.btn--ghost:hover{ color: var(--text); background: rgba(0,0,0,0.04); }

/* ===== Footer ===== */
.site-footer{
  padding: 26px 0 30px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.02));
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.3fr .7fr 1fr;
  gap: 18px;
  align-items:start;
}
.footer__badges{ display:flex; gap: 10px; margin-top: 10px; }
.footer__badge{
  display:inline-flex;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
}
.footer__links{
  display:grid;
  gap: 10px;
  align-content:start;
}
.footer__links a{
  color: var(--text-muted);
  padding: 6px 8px;
  border-radius: 10px;
}
.footer__links a:hover{ background: rgba(0,0,0,0.04); color: var(--text); }
.footer__legal{ color: var(--text-muted); }

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .hero__grid{ grid-template-columns: 1.2fr .8fr; gap: 22px; }
  .site-grid{ grid-template-columns: repeat(2, 1fr); }
  .card-grid, .steps, .reviews{ grid-template-columns: repeat(2, 1fr); }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .split{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  .nav{ padding-inline: var(--container-pad-x); }
  .nav__toggle{ display:flex; }
  .nav__menu{
    position: absolute;
    top: calc(var(--nav-h) - 6px);
    right: var(--container-pad-x);
    left: var(--container-pad-x);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2);
    padding: 14px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap: 12px;
    z-index: 40;
  }
  .nav__menu.is-open{ display:flex; }
  .nav__links{
    padding:0;
    justify-content: space-between;
  }
  .nav__links a{ width:100%; }
  .nav__controls{ justify-content: space-between; }

  .hero__grid{ grid-template-columns: 1fr; }
  .hero__media{ display:none; }

  .cat-grid{ grid-template-columns: repeat(2, 1fr); }
  .card-grid, .steps, .reviews{ grid-template-columns: 1fr; }
  .site-grid{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 420px){
  .cat-grid{ grid-template-columns: 1fr; }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  .cat-card, .site-card, .btn{ transition: none !important; }
}