/* =========================================================
   TEELANI GOLF VENTURES — CSS GENERAL (v7)
   ========================================================= */

/* ---------- Variables & Base ---------- */
:root{
  --brand:#16a34a;
  --brand-500:#22c55e;
  --brand-400:#34d399;
  --brand-700:#15803d;
  --brand-800:#166534;
  --brand-deep:#0f6f3a;         /* verde profundo (trayectoria del logo) */
  --accent:#0891b2;
  --ink:#0b1220;
  --ink-2:#0f172a;
  --muted:#556070;
  --text-light:#e2e8f0;
  --bg:#f8fafc;
  --card:#ffffff;
  --line:#e5e7eb;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* ---------- Utilidades ---------- */
.grid{display:grid;gap:18px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.section{padding:64px 0}
.h2{font-size:30px;margin:0 0 8px}
.sub{color:var(--muted);margin:0 0 24px}
.badge{display:inline-block;background:#dcfce7;color:#065f46;border:1px solid #86efac;padding:6px 10px;border-radius:9999px;font-weight:800;font-size:12px}
small.hint{color:#64748b}

/* ---------- Botones genéricos ---------- */
.btn{
  display:inline-block;
  padding:12px 16px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  font-weight:800;background:#fff;color:var(--ink);
  transition:transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(2,6,23,.08)}
.btn.primary{background:var(--brand-500);border-color:var(--brand-800);color:#fff}
.btn.primary:hover{background:var(--brand-700)}

/* =========================================================
   MENÚ MÓVIL: apilar barras y centrar
   ========================================================= */
.hamburger{
  display:none;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}
.hamburger span{
  display:block;
  width:24px;
  height:3px;                 /* un poco más gruesas */
  background:var(--ink);
  margin:4px 0;               /* separación VERTICAL */
  transition:transform .18s ease, opacity .18s ease;
  transform-origin:center;
}

/* Estado abierto (X) */
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Menú móvil oculto por defecto */
.mobile-nav{ display:none; }

/* Solo móvil */
@media (max-width:640px){
  .header .nav{ display:none !important; }
  .hamburger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;    /* << APILA LAS BARRAS */
    gap:0;
    width:44px; height:44px;  /* área táctil */
  }

  .mobile-nav{
    position:absolute; left:0; right:0; top:100%;
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 8px 30px rgba(2,6,23,.08);
    padding:12px 16px; z-index:50;
  }
  .mobile-nav.is-open{ display:block; }
  .mobile-nav a{
    display:block; padding:12px 10px; border-radius:10px;
    color:var(--ink); font-weight:800; text-decoration:none;
  }
  .mobile-nav a:hover{ background:var(--card); text-decoration:none; }
}

/* ---------- CTAs del hero ---------- */
.btn-cta{
  font-size:1.1rem;
  padding:14px 26px;border-radius:9999px;font-weight:800;text-decoration:none;
  transition:transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.btn-cta.primary{background:var(--brand-500);color:#fff;border:2px solid var(--brand-800)}
.btn-cta.primary:hover{background:var(--brand-700);transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.35)}
.btn-cta.secondary{background:transparent;border:2px solid #fff;color:#fff}
.btn-cta.secondary:hover{background:rgba(255,255,255,.16);transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.35)}

/* ---------- Tarjetas, tablas, formularios ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 8px 20px rgba(2,6,23,.06)}
.card .p{padding:16px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.form{display:grid;gap:14px}
.input, select, textarea{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:10px;font-size:16px}

/* =========================================================
   HEADER (logo grande y menú; Contacto en verde texto)
   ========================================================= */
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:40}
.header .wrap{
  display:flex;align-items:center;justify-content:space-between;min-height:88px;gap:28px
}
.brand{display:flex;align-items:center;gap:12px}
.brand-img{
  height:68px;                    /* más grande */
  width:auto;display:block;
}
.nav{
  display:flex;align-items:center;
  gap:34px;
  white-space:nowrap;
}
.nav a{
  font-weight:800;color:var(--ink-2);
  text-decoration:none;letter-spacing:.2px;
  padding:10px 0;line-height:1.1;
}
.nav a:hover,.nav a.is-active{text-decoration:underline}

/* Contacto: solo texto verde profundo */
.nav a.contacto {
  color: var(--brand-deep);
  font-weight:900;
}

/* =========================================================
   HERO (foto de fondo + overlay con más sombra y menos altura)
   ========================================================= */
.hero{
  position:relative;
  min-height:60vh;
  background:url('/assets/img/home-header.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;text-align:center;isolation:isolate;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:rgba(0,0,0,.7);
  z-index:0;
}
.hero-content{position:relative;z-index:1;max-width:1000px;padding:0 20px;color:#fff}
.hero-title{
  font-size:4.2rem;line-height:1.08;font-weight:900;margin:0 0 16px;text-transform:uppercase;
  color:var(--brand-400);
  text-shadow:0 2px 4px rgba(0,0,0,.42);
}
.hero-sub{font-size:1.5rem;font-weight:600;margin:0 0 8px}
.hero-desc{font-size:1.1rem;margin:0 0 26px;color:var(--text-light)}
.hero-actions{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}

/* =========================================================
   HOME: Ventajas, Testimoniales, Torneos, Sedes
   ========================================================= */
.advantages{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.adv{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 8px 20px rgba(2,6,23,.06)}
.adv h3{margin:0 0 8px}.adv p{margin:0;color:#475569}

.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.testimonial{background:#0b1220;color:#e2e8f0;border-radius:18px;padding:20px;border:1px solid #111827}
.testimonial p{margin:0 0 10px}.testimonial strong{color:#bbf7d0}

.sede{position:relative;border-radius:18px;overflow:hidden;min-height:220px;color:#fff}
.sede::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:0}
.sede .content{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;z-index:1}
.sede .name{font-size:20px;font-weight:900;margin:0 0 4px}.sede .fields{color:#e5e7eb;margin:0}

/* =========================================================
   Encabezados de grupo (México / Estados Unidos)
   ========================================================= */

.group-title{
  display:flex;align-items:center;gap:12px;
  margin:24px 0 12px;
  font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;
  font-size:14px;line-height:1;
  color:#0f172a;
}
.group-title::before,.group-title::after{
  content:"";flex:1 1 auto;height:1px;background:#e5e7eb;
}
.group-title span{
  white-space:nowrap;padding:6px 10px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:9999px;
}

/* =========================================================
   Teelani: botones apilados y botón de 2 líneas (solo Próximos torneos)
   ========================================================= */

.grid.cols-3:has(> .card){
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}
@media (max-width:1024px){
  .grid.cols-3:has(> .card){
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
@media (max-width:640px){
  .grid.cols-3:has(> .card){
    grid-template-columns: 1fr !important; /* uno por fila en móvil */
  }
}

/* =========================================================
   M3: Sedes — 2 por fila en móvil + centrado del fondo
   ========================================================= */

/* Próximos torneos: 3 (desk) → 2 (tablet) → 1 (móvil) */
.grid-torneos{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
@media (max-width:1024px){
  .grid-torneos{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .grid-torneos{ grid-template-columns: 1fr; }
}

/* Sedes: 3 (desk) → 2 (tablet) → 2 (móvil) */
.grid-sedes{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
@media (max-width:1024px){
  .grid-sedes{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .grid-sedes{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
}
/* Fondo de sedes siempre centrado/cover, gane sobre inline */
.grid-sedes .sede{
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  min-height:150px; /* ayuda visual en 2 columnas */
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:#0b1220;color:#cbd5e1;padding:40px 0;margin-top:40px}
.footer a{color:#93c5fd}

/* =========================================================
   Torneo: layout responsivo de detalle
   ========================================================= */
.grid-detalle{
  display:grid;
  grid-template-columns: 2fr 1fr;   /* izquierda ancha, derecha info */
  gap:20px;
}

/* Tablet y móvil: una sola columna */
@media (max-width: 1024px){
  .grid-detalle{ grid-template-columns: 1fr; }
  .grid-detalle .card{ margin-top:0; } /* evita escalones al apilar */
}

/* Microajustes para móvil */
@media (max-width: 640px){
  .grid-detalle .p{ padding:16px 18px; }
  .grid-detalle .h2{ font-size:28px; line-height:1.1; }
  .grid-detalle .sub{ font-size:16px; }
  .grid-detalle .badge{ font-size:12px; padding:6px 10px; border-radius:999px; }
  .grid-detalle ul{ padding-left:18px; }
  .grid-detalle .btn{ width:100%; text-align:center; }
  .grid-detalle .hint{ display:block; margin-top:12px; }
}

/* =========================================================
   Próximos Torneos: tabla → cards en móvil
   ========================================================= */
@media (max-width: 640px){
  .table-proximos{ width:100%; border-collapse:separate; border-spacing:0 12px; }
  .table-proximos thead{ display:none; }

  .table-proximos tbody tr{
    display:block;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px 14px;
    box-shadow:0 2px 10px rgba(2,6,23,.06);
  }

  .table-proximos tbody td{
    display:flex;
    gap:8px;
    padding:6px 0;
    border:0;
  }

  /* 1ª celda = título del evento */
  .table-proximos tbody td:first-child{
    display:block;
    padding:0 0 8px 0;
  }
  .table-proximos tbody td:first-child strong{
    display:block;
    font-size:18px;
    line-height:1.2;
  }
  .table-proximos tbody td:first-child small{
    display:block;
    color:var(--hint);
  }

  /* Etiquetas para las demás celdas */
  .table-proximos tbody td:nth-child(2)::before{ content:"Sede"; font-weight:800; min-width:88px; color:var(--hint); }
  .table-proximos tbody td:nth-child(3)::before{ content:"Fechas"; font-weight:800; min-width:88px; color:var(--hint); }
  .table-proximos tbody td:nth-child(4)::before{ content:"Precio"; font-weight:800; min-width:88px; color:var(--hint); }

  /* Botón ocupa todo el ancho */
  .table-proximos tbody td:nth-child(5){ padding-top:10px; }
  .table-proximos tbody td:nth-child(5) .btn{
    display:block; width:100%; text-align:center;
  }
}

/* Móvil: separaciones entre las "cards" de la tabla Próximos Torneos */
@media (max-width: 640px){
  .table-proximos{
    border-collapse: separate !important;
    border-spacing: 0 !important;   /* anulamos el spacing por tabla */
  }
  .table-proximos tbody tr{
    display: block;                  /* ya lo tienes, lo reforzamos */
    margin: 12px 0;                  /* << espacio vertical entre cards */
  }
  .table-proximos tbody tr:first-child{ margin-top: 0; }
  .table-proximos tbody tr:last-child{  margin-bottom: 0; }
}

/* =========================================================
   Organiza tu Torneo Privado: layout responsivo
   ========================================================= */
.grid-privado{
  display: grid;
  grid-template-columns: 2fr 1fr; /* izquierda ancha, derecha form */
  gap: 20px;
}

/* Tablet y móvil: apilar (info primero, form abajo) */
@media (max-width: 1024px){
  .grid-privado{
    grid-template-columns: 1fr;
  }
  .grid-privado .card{ margin-top: 0; }
}

/* =========================================================
   Contacto: layout responsivo (info arriba en móvil)
   ========================================================= */
.grid-contact{
  display: grid;
  grid-template-columns: 2fr 1fr;          /* izquierda ancha, derecha form (ajusta si quieres) */
  gap: 20px;
  grid-template-areas: "info form";
}
.grid-contact .col-info{ grid-area: info; }
.grid-contact .col-form{ grid-area: form; }

/* Tablet y móvil: 1 columna, info primero */
@media (max-width: 1024px){
  .grid-contact{
    grid-template-columns: 1fr;
    grid-template-areas:
      "info"
      "form";
  }
  .grid-contact .card{ margin-top: 0; }     /* evita escalones al apilar */
}

/* Microajustes opcionales en móvil */
@media (max-width: 640px){
  .grid-contact .p{ padding:16px 18px; }
  .grid-contact .btn{ width:100%; text-align:center; }
}

/* =========================================================
   SEDES — estilos específicos (Mazatlán y demás)
   ========================================================= */
:root {
  --header-h: 72px;
  --subnav-h: 56px;
  --container-w: 1120px;
  --gap: 20px;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,.06);
  --border: 1px solid rgba(0,0,0,.08);
  --text: #0f172a;
  --muted: #475569;
  --line: rgba(15,23,42,.08);
  --bg-soft: #f8fafc;
  --brand: #0ea5e9;
  --brand-ink: #0369a1;
}

/* Layout base */
.section { padding: 40px 0; }
.container { max-width: var(--container-w); margin: 0 auto; padding: 0 16px; }
.h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; color: var(--text); margin: 0 0 10px; }
.h3 { font-size: clamp(18px, 1.7vw, 22px); margin: 12px 0 6px; }
.sub { color: var(--muted); font-size: 15px; line-height: 1.6; }
.hint { color: #64748b; font-size: 12px; }

/* HERO */
.sede-hero {
  position: relative;
  min-height: 42svh;
  display: grid;
  align-items: end;
  isolation: isolate;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(0,0,0,.0) 10%, rgba(0,0,0,.45) 100%),
    var(--sede-bg, url('/assets/img/placeholder-hero.webp')) center/cover no-repeat;
}
.sede-hero .container { padding-top: 80px; padding-bottom: 28px; }
.sede-title {
  font-size: clamp(32px, 5.2vw, 56px);
  line-height: 1.05;
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.sede-sub { color: #e2e8f0; max-width: 800px; }

/* Breadcrumbs */
.breadcrumbs ol {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}
.breadcrumbs a { text-decoration: none; border-bottom: 1px solid transparent; }
.breadcrumbs a:hover { border-bottom-color: rgba(255,255,255,.35); }
.breadcrumbs li { color: #e2e8f0; }
.breadcrumbs li:last-child { color: #fff; }

/* Intro + ubicación */
.grid-sede-intro {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1.2fr 1fr;
}
.card {
  background: #fff;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: clip;
}
.card .p { padding: 16px; }
.map-embed {
  border-radius: 12px;
  overflow: hidden;
  border: var(--border);
  background: #fff;
}
.map-embed iframe { width: 100%; height: 320px; display: block; border: 0; }
.map-embed.sm iframe { height: 240px; }

/* Submenú pegajoso */
.sede-subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(4px);
}
.sede-tabs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
  margin: 0;
}
.sede-tabs .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid transparent;
}
.sede-tabs .tab:hover { background: #eef2f7; border-color: var(--line); }
.sede-tabs .tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Compensación de anclas */
.anchor-offset,
[id].h2,
.section [id] {
  scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 16px);
}

/* Campos (field) */
.field { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
.field header .meta { color: var(--muted); font-size: 14px; margin: 6px 0 12px; }
.field-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.field-media { border-radius: 12px; overflow: hidden; border: var(--border); background: #fff; }
.field-media img { display: block; width: 100%; height: auto; }
.field-copy p { margin: 0 0 10px; }

/* POIs (tarjetas reutilizables) */
.poi-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.poi {
  display: grid;
  grid-template-rows: auto 1fr;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: clip;
  background: #fff;
}
.poi-media { aspect-ratio: 16 / 9; background: #f1f5f9; overflow: hidden; }
.poi-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform .4s ease;
}
.poi:hover .poi-media img { transform: scale(1.03); }
.poi .p { padding: 14px; display: grid; gap: 8px; align-content: start; }
.poi-title { margin: 0; font-size: 18px; line-height: 1.3; }
.poi-desc { margin: 0; color: var(--muted); font-size: 14px; }

/* Mapitas en POI */
.poi-map summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--brand-ink);
  list-style: none;
}
.poi-map summary::-webkit-details-marker { display: none; }
.poi-map summary::after {
  content: "▾";
  margin-left: 6px;
  font-size: 12px;
  transition: transform .2s ease;
}
.poi-map[open] summary::after { transform: rotate(180deg); }
.poi-map .map-embed { margin-top: 10px; }

/* Botones / badge local (no rompe .badge global) */
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid var(--line);
  color: var(--text);
}
.btn.primary { background: var(--brand); color: #fff; border-color: transparent; }
.btn.primary:hover { filter: brightness(.96); }

.sede-badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(14,165,233,.12);
  color: var(--brand-ink);
  border: 1px solid rgba(14,165,233,.25);
}

/* Listas auxiliares */
.itemlist { margin: 12px 0 0; padding-left: 18px; }
.itemlist li { margin: 6px 0; }

/* FAQ */
.faq details {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin: 8px 0;
  background: #fff;
}
.faq summary { cursor: pointer; font-weight: 700; }
.faq p { margin: 8px 0 0; }

/* Explora otras sedes */
.grid-sedes { display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-sedes .sede {
  position: relative;
  display: grid;
  place-items: end start;
  min-height: 180px;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  border: var(--border);
  box-shadow: var(--shadow);
}
.grid-sedes .sede::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 20%, rgba(0,0,0,.45) 100%);
}
.grid-sedes .sede .content { position: relative; z-index: 2; padding: 14px; }
.grid-sedes .sede .name {
  color: #fff;
  font-weight: 900;
  letter-spacing: -.01em;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}

/* Responsivo */
@media (max-width: 1100px) {
  .grid-sede-intro { grid-template-columns: 1fr; }
  .map-embed iframe { height: 280px; }
  .poi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-sedes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .section { padding: 28px 0; }
  .sede-hero { min-height: 36svh; }
  .sede-hero .container { padding-top: 64px; padding-bottom: 22px; }
  .sede-tabs { gap: 6px; padding: 8px 0; }
  .sede-tabs .tab { height: 34px; padding: 0 10px; font-size: 13px; }
  .poi-grid { grid-template-columns: 1fr; }
  .grid-sedes { grid-template-columns: 1fr; }
  .map-embed iframe { height: 240px; }
}

/* Accesibilidad / motion */
@media (prefers-reduced-motion: reduce) {
  .poi-media img { transition: none !important; }
}
.sede-tabs .tab:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1200px){.container{max-width:1000px}}
@media (max-width:1024px){
  .brand-img{height:60px}
  .nav{gap:24px}
  .hero{min-height:66vh}
  .hero-title{font-size:3.6rem}
}
@media (max-width:900px){
  .advantages,.testimonials{grid-template-columns:1fr 1fr}
  .hero{min-height:62vh}
  .hero-title{font-size:3rem}
  .hero-sub{font-size:1.25rem}
  .hero-desc{font-size:1rem}
}
@media (max-width:768px){
  .header .wrap{flex-wrap:wrap;row-gap:10px}
  .nav{width:100%;justify-content:flex-end;gap:18px}
  .advantages,.testimonials{grid-template-columns:1fr}
}
@media (max-width:480px){
  .hero-actions{gap:12px}
  .btn-cta{width:100%;text-align:center}
}