/* ═══ TRANCADO — shared site styles ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #131313;
  --surface-low: #1c1b1b;
  --surface: #20201f;
  --surface-high: #2a2a2a;
  --on-surface: #e5e2e1;
  --on-surface-variant: #c4c6d1;
  --outline: #8d909a;
  --primary: #abc7ff;
  --primary-container: #002d62;
  --secondary: #ffb4ab;
  --secondary-container: #c90011;
  --tertiary: #f1c100;
  --on-tertiary: #3d2f00;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--on-surface);
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── NAV ── */
nav.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.5rem;
  background: rgba(19,19,19,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

nav.site-nav a.logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: .06em;
  color: #fff;
  text-decoration: none;
}

nav.site-nav a.logo img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

nav.site-nav .nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

nav.site-nav .nav-links a {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  text-decoration: none;
}
nav.site-nav .nav-links a:hover { color: #fff; }
nav.site-nav .nav-links a.active { color: var(--tertiary); }

nav.site-nav a.lang {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--primary);
  text-decoration: none;
  border: 1px solid rgba(171,199,255,.35);
  border-radius: .4rem;
  padding: .25rem .6rem;
}
nav.site-nav a.lang:hover { background: rgba(171,199,255,.12); }

@media (max-width: 640px) {
  nav.site-nav .nav-links { gap: .8rem; }
  nav.site-nav .nav-links a { font-size: .72rem; }
  nav.site-nav a.logo span { display: none; }
}

/* ── HOME HERO ── */
.hero {
  position: relative;
  min-height: calc(100vh - 63px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem 4rem;
  overflow: hidden;
  background: url('felt.jpg') center / cover no-repeat var(--bg);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 58% at 50% 42%, rgba(8,8,18,.6) 0%, rgba(8,8,18,.3) 55%, transparent 78%),
    linear-gradient(180deg, rgba(10,10,25,.45) 0%, rgba(10,10,25,.35) 45%, rgba(19,19,19,.85) 100%),
    linear-gradient(135deg, rgba(0,45,98,.12) 0%, rgba(201,0,17,.1) 100%);
  z-index: 0;
}

.hero-bg-tiles {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><g stroke='%23ffffff' stroke-width='2' fill='none'><g transform='translate(45,20) rotate(-18)'><rect width='40' height='84' rx='7'/><line x1='7' y1='42' x2='33' y2='42'/></g><g transform='translate(200,110) rotate(24)'><rect width='40' height='84' rx='7'/><line x1='7' y1='42' x2='33' y2='42'/></g><g transform='translate(70,180) rotate(-32)'><rect width='40' height='84' rx='7'/><line x1='7' y1='42' x2='33' y2='42'/></g></g><g fill='%23ffffff'><g transform='translate(45,20) rotate(-18)'><circle cx='12' cy='11' r='3.2'/><circle cx='28' cy='11' r='3.2'/><circle cx='12' cy='21' r='3.2'/><circle cx='28' cy='21' r='3.2'/><circle cx='12' cy='31' r='3.2'/><circle cx='28' cy='31' r='3.2'/><circle cx='12' cy='53' r='3.2'/><circle cx='28' cy='53' r='3.2'/><circle cx='12' cy='73' r='3.2'/><circle cx='28' cy='73' r='3.2'/></g><g transform='translate(200,110) rotate(24)'><circle cx='12' cy='11' r='3.2'/><circle cx='28' cy='11' r='3.2'/><circle cx='20' cy='21' r='3.2'/><circle cx='12' cy='31' r='3.2'/><circle cx='28' cy='31' r='3.2'/><circle cx='12' cy='53' r='3.2'/><circle cx='20' cy='63' r='3.2'/><circle cx='28' cy='73' r='3.2'/></g><g transform='translate(70,180) rotate(-32)'><circle cx='12' cy='11' r='3.2'/><circle cx='28' cy='31' r='3.2'/><circle cx='12' cy='53' r='3.2'/><circle cx='28' cy='53' r='3.2'/><circle cx='12' cy='63' r='3.2'/><circle cx='28' cy='63' r='3.2'/><circle cx='12' cy='73' r='3.2'/><circle cx='28' cy='73' r='3.2'/></g></g></svg>");
  background-size: 300px 300px;
}

.hero-content { position: relative; z-index: 1; max-width: 720px; }

.app-badge {
  display: inline-block;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 2rem;
  padding: .3rem .9rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 14vw, 8rem);
  line-height: .95;
  letter-spacing: .03em;
  color: #fff;
  text-shadow: 0 6px 30px rgba(0,0,0,.4);
  margin-bottom: .75rem;
}

.hero-tagline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.25rem, 4vw, 2rem);
  letter-spacing: .08em;
  color: var(--tertiary);
  text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 2px 12px rgba(0,0,0,.6);
  margin-bottom: 1.5rem;
}

.hero-sub {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.6);
  max-width: 500px;
  margin: 0 auto 2.5rem;
}

.cta-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--tertiary);
  color: var(--on-tertiary);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .85rem 1.75rem;
  border-radius: .5rem;
  border-bottom: 3px solid #a88300;
  transition: transform .1s, border-bottom-width .1s;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: translateY(2px); border-bottom-width: 1px; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .85rem 1.75rem;
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,.25);
  transition: background .15s;
}
.btn-secondary:hover { background: rgba(255,255,255,.18); }

/* ── DOMINO TILES VISUAL ── */
.tiles-row {
  display: flex;
  gap: .6rem;
  justify-content: center;
  margin-top: 3rem;
  flex-wrap: wrap;
}

.tile {
  width: 44px;
  height: 88px;
  perspective: 600px;
}

.tile-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
  animation: tile-flip .8s cubic-bezier(.45,.05,.35,1.2) forwards;
}

.tiles-row .tile:nth-child(1) .tile-inner { animation-delay: .6s; }
.tiles-row .tile:nth-child(2) .tile-inner { animation-delay: .8s; }
.tiles-row .tile:nth-child(3) .tile-inner { animation-delay: 1s; }
.tiles-row .tile:nth-child(4) .tile-inner { animation-delay: 1.2s; }
.tiles-row .tile:nth-child(5) .tile-inner { animation-delay: 1.4s; }
.tiles-row .tile:nth-child(6) .tile-inner { animation-delay: 1.6s; }
.tiles-row .tile:nth-child(7) .tile-inner { animation-delay: 1.8s; }

@keyframes tile-flip {
  to { transform: rotateY(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tile-inner { animation: none; transform: rotateY(0deg); }
}

.tile-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 6px;
}

.tile-front {
  background: linear-gradient(180deg, #ffffff 0%, #f0ede8 100%);
  box-shadow: 0 4px 0 #bcbcbc, 0 8px 15px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
}

/* Ivory back with Dominican Republic map silhouette filled with the flag */
.tile-back {
  transform: rotateY(180deg);
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'><defs><clipPath id='m'><path d='M94.8 34.0 L91.6 40.6 L88.1 40.2 L86.7 44.4 L84.3 44.4 L82.8 41.0 L80.3 39.2 L76.3 39.6 L72.6 38.2 L65.6 39.3 L63.8 38.1 L62.7 39.2 L61.4 38.1 L57.1 37.7 L53.1 39.7 L50.0 43.8 L44.4 43.7 L42.3 44.6 L40.2 44.4 L40.7 43.4 L39.5 42.4 L40.1 40.2 L38.1 38.7 L37.0 38.8 L35.9 40.8 L33.4 41.1 L31.4 43.1 L28.1 41.9 L27.3 43.6 L28.3 46.2 L24.8 52.1 L22.3 54.5 L19.7 60.0 L16.8 56.1 L13.3 55.8 L14.4 54.5 L13.7 51.0 L10.9 48.8 L10.9 44.6 L12.5 41.7 L7.6 38.7 L7.7 37.1 L5.2 34.4 L9.3 33.9 L12.1 30.6 L11.9 27.1 L10.4 25.2 L8.7 25.0 L10.7 24.2 L14.1 20.2 L14.2 18.7 L11.0 16.2 L12.6 13.5 L11.3 5.9 L12.2 6.2 L11.2 3.5 L13.4 2.2 L14.0 1.0 L18.2 0.8 L23.2 2.6 L24.6 2.6 L25.1 1.7 L25.6 2.6 L25.8 1.8 L27.2 1.8 L29.7 0.0 L31.0 1.3 L31.0 0.7 L33.6 0.7 L34.9 2.6 L38.9 4.4 L43.6 4.2 L47.2 7.3 L51.3 8.1 L53.1 6.6 L55.4 6.6 L56.9 8.3 L56.4 10.4 L57.3 13.2 L60.6 16.8 L65.5 15.3 L70.3 16.5 L72.8 14.8 L72.4 16.4 L74.4 16.2 L74.6 16.8 L72.8 19.3 L63.8 18.2 L63.1 21.3 L67.1 21.9 L67.7 21.9 L66.9 21.3 L68.6 21.3 L69.8 22.7 L74.2 23.8 L75.1 23.5 L75.0 22.8 L77.1 24.7 L79.0 23.3 L84.7 25.0 Z'/></clipPath></defs><g transform='translate(0 100) rotate(-90)'><g clip-path='url(%23m)'><rect x='0' y='0' width='50' height='30' fill='%23002d62'/><rect x='50' y='0' width='50' height='30' fill='%23c90011'/><rect x='0' y='30' width='50' height='30' fill='%23c90011'/><rect x='50' y='30' width='50' height='30' fill='%23002d62'/><rect x='46' y='0' width='8' height='60' fill='%23f5f2ea'/><rect x='0' y='26' width='100' height='8' fill='%23f5f2ea'/></g><path d='M94.8 34.0 L91.6 40.6 L88.1 40.2 L86.7 44.4 L84.3 44.4 L82.8 41.0 L80.3 39.2 L76.3 39.6 L72.6 38.2 L65.6 39.3 L63.8 38.1 L62.7 39.2 L61.4 38.1 L57.1 37.7 L53.1 39.7 L50.0 43.8 L44.4 43.7 L42.3 44.6 L40.2 44.4 L40.7 43.4 L39.5 42.4 L40.1 40.2 L38.1 38.7 L37.0 38.8 L35.9 40.8 L33.4 41.1 L31.4 43.1 L28.1 41.9 L27.3 43.6 L28.3 46.2 L24.8 52.1 L22.3 54.5 L19.7 60.0 L16.8 56.1 L13.3 55.8 L14.4 54.5 L13.7 51.0 L10.9 48.8 L10.9 44.6 L12.5 41.7 L7.6 38.7 L7.7 37.1 L5.2 34.4 L9.3 33.9 L12.1 30.6 L11.9 27.1 L10.4 25.2 L8.7 25.0 L10.7 24.2 L14.1 20.2 L14.2 18.7 L11.0 16.2 L12.6 13.5 L11.3 5.9 L12.2 6.2 L11.2 3.5 L13.4 2.2 L14.0 1.0 L18.2 0.8 L23.2 2.6 L24.6 2.6 L25.1 1.7 L25.6 2.6 L25.8 1.8 L27.2 1.8 L29.7 0.0 L31.0 1.3 L31.0 0.7 L33.6 0.7 L34.9 2.6 L38.9 4.4 L43.6 4.2 L47.2 7.3 L51.3 8.1 L53.1 6.6 L55.4 6.6 L56.9 8.3 L56.4 10.4 L57.3 13.2 L60.6 16.8 L65.5 15.3 L70.3 16.5 L72.8 14.8 L72.4 16.4 L74.4 16.2 L74.6 16.8 L72.8 19.3 L63.8 18.2 L63.1 21.3 L67.1 21.9 L67.7 21.9 L66.9 21.3 L68.6 21.3 L69.8 22.7 L74.2 23.8 L75.1 23.5 L75.0 22.8 L77.1 24.7 L79.0 23.3 L84.7 25.0 Z' fill='none' stroke='%23223' stroke-width='1.6' stroke-linejoin='round'/></g></svg>") 50% 50% / 92% auto no-repeat,
    linear-gradient(180deg, #fffdf5 0%, #f7f1de 55%, #e9dfc4 100%);
  box-shadow: 0 4px 0 #bfb08c, 0 8px 15px rgba(0,0,0,.5);
  border: 1px solid #d8ccae;
}

/* highlighted double-six */
.tile-hi .tile-front {
  box-shadow: 0 4px 0 #abc7ff80, 0 8px 15px rgba(0,0,0,.5);
  outline: 2px solid #abc7ff;
}

.tile-half {
  width: 100%;
  flex: 1;
  display: grid;
  place-items: center;
  position: relative;
}

.tile-half + .tile-half::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: rgba(0,0,0,.2);
}

/* ── SECTIONS ── */
.section {
  padding: 5rem 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.section-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: .15em;
  color: var(--primary);
  margin-bottom: .5rem;
}

.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1;
  color: var(--on-surface);
  margin-bottom: 1rem;
}

.section-body {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--on-surface-variant);
  max-width: 540px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 3rem;
}

.feature-card {
  background: var(--surface-low);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: .75rem;
  padding: 1.5rem;
}

.feature-icon { font-size: 1.75rem; margin-bottom: .75rem; }

.feature-card h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: .04em;
  color: var(--on-surface);
  margin-bottom: .4rem;
}

.feature-card p {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--on-surface-variant);
}

/* ── MODE CARDS ── */
.modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 3rem;
}

.mode-card {
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-low) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .75rem;
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
}

.mode-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-container), var(--secondary-container));
}

.mode-card h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: .05em;
  color: var(--tertiary);
  margin-bottom: .5rem;
}

.mode-card p { font-size: .92rem; color: var(--on-surface-variant); }

/* ── CTA BAND ── */
.cta-band {
  text-align: center;
  padding: 5rem 1.5rem;
  background: linear-gradient(135deg, rgba(0,45,98,.55) 0%, rgba(201,0,17,.35) 100%);
}

.cta-band h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  letter-spacing: .04em;
  color: #fff;
  margin-bottom: 1.5rem;
}

/* ── DIVIDER ── */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--outline), transparent);
  margin: 0 1.5rem;
}

/* ── SUBPAGE HERO ── */
.page-hero {
  background: linear-gradient(135deg, rgba(0,45,98,.85) 0%, rgba(20,20,20,1) 60%);
  padding: 3rem 1.5rem 2.5rem;
  text-align: center;
}

.page-hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  letter-spacing: .04em;
  color: #fff;
  margin-bottom: .5rem;
}

.page-hero .subtitle {
  font-size: .95rem;
  color: var(--on-surface-variant);
  max-width: 560px;
  margin: 0 auto;
}

/* ── CONTENT (legal / text pages) ── */
.content {
  max-width: 740px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.content h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: .06em;
  color: var(--primary);
  margin-top: 2.5rem;
  margin-bottom: .65rem;
}
.content h2:first-of-type { margin-top: 0; }

.content h3 {
  font-size: 1rem;
  color: var(--tertiary);
  margin: 1.25rem 0 .35rem;
}

.content p {
  font-size: .95rem;
  color: var(--on-surface-variant);
  margin-bottom: .85rem;
}

.content strong { color: var(--on-surface); }

.content ul { list-style: none; margin: .5rem 0 .85rem 0; }

.content ul li {
  font-size: .95rem;
  color: var(--on-surface-variant);
  padding: .3rem 0 .3rem 1.25rem;
  position: relative;
}

.content ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--tertiary);
}

.content ol {
  margin: .5rem 0 .85rem 1.4rem;
}

.content ol li {
  font-size: .95rem;
  color: var(--on-surface-variant);
  margin-bottom: .4rem;
}

.highlight-box {
  background: var(--surface-low);
  border-left: 3px solid var(--primary);
  border-radius: 0 .5rem .5rem 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: .92rem;
  color: var(--on-surface-variant);
}

.content a { color: var(--primary); text-decoration: none; }
.content a:hover { text-decoration: underline; }

.effective-date {
  display: inline-block;
  background: rgba(241,193,0,.1);
  border: 1px solid rgba(241,193,0,.25);
  border-radius: .4rem;
  padding: .3rem .75rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--tertiary);
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.error-name {
  display: inline-block;
  background: var(--surface-high);
  color: var(--secondary);
  border-radius: 8px;
  padding: .1rem .55rem;
  font-size: .85rem;
  font-weight: 600;
}

/* ── VOCAB TABLE ── */
.vocab-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: .92rem;
}

.vocab-table th {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-align: left;
  color: var(--primary);
  padding: .5rem .75rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
}

.vocab-table td {
  padding: .5rem .75rem;
  color: var(--on-surface-variant);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.vocab-table td:first-child {
  color: var(--tertiary);
  font-weight: 600;
  white-space: nowrap;
}

/* ── FOOTER ── */
footer.site-footer {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--outline);
  font-size: .82rem;
}

footer.site-footer a { color: var(--primary); text-decoration: none; }
footer.site-footer a:hover { text-decoration: underline; }

footer.site-footer .footer-links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* ── MUSIC TOGGLE ── */
#music-toggle {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 60;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(28,27,27,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--outline);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  transition: color .15s, border-color .15s;
}
#music-toggle:hover { background: rgba(42,42,42,.95); color: var(--on-surface); }
#music-toggle.playing {
  color: var(--tertiary);
  border-color: rgba(241,193,0,.5);
  animation: music-pulse 2s ease-out infinite;
}
@keyframes music-pulse {
  0% { box-shadow: 0 4px 12px rgba(0,0,0,.4), 0 0 0 0 rgba(241,193,0,.35); }
  70% { box-shadow: 0 4px 12px rgba(0,0,0,.4), 0 0 0 12px rgba(241,193,0,0); }
  100% { box-shadow: 0 4px 12px rgba(0,0,0,.4), 0 0 0 0 rgba(241,193,0,0); }
}

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .hero { padding-top: 3rem; }
  .tiles-row { gap: .4rem; }
  .tile { width: 36px; height: 72px; }
}