/* =====================
   THEME
===================== */
:root{
  --teal:#255C63;
  --mint:#f7f7f7;
  --white:#ffffff;
  --green:#161715;

  --text:#0f172a;
  --muted:#64748b;

  --border:rgba(0,0,0,.10);
  --shadow:0 12px 30px rgba(0,0,0,.12);

  /* ✅ Réglage central de la distance triocar -> searchbox */
  --triocar-overlap: 300px; /* desktop */
  --triocar-gap: -100px;      /* espace entre triocar et searchbox */
}

/* =====================
   RESET & GLOBAL
===================== */
*{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--mint);
  color: var(--text);
  line-height: 1.6;
}

/* ✅ padding-top uniquement pour les pages normales (header blanc fixe) */
body:not(.is-home){
  padding-top: 80px;
}

a{ color:inherit; }

/* =====================
   HERO SECTION (HEADER + HERO ON SAME BG)
===================== */
.hero-section{
  position: relative;
  background: url("../images/agents_dgs.png") center/cover no-repeat;
  overflow: visible;
}
body.is-home .hero-section{
  padding-top: 80px;
}

/* Overlay noir (derrière le contenu) */
.hero-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  z-index: 0; /* important : derrière */
}

/* Le contenu du hero passe devant l’overlay */
.hero-section > *{
  position: relative;
  z-index: 1;
}

/* =====================
   HEADER HOME (INDEX) : TRANSPARENT AU LOAD
===================== */
.site-header-home{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;

  background: transparent;
  box-shadow: none;

  transition: background .25s ease, box-shadow .25s ease;
}

/* Textes blancs sur le hero (index uniquement) */
.site-header-home .nav a,
.site-header-home .contact-phone,
.site-header-home .contact-phone strong{
  color: #fff;
}

/* Badge téléphone léger (index) */
.site-header-home .contact-phone{
  background: rgba(255,255,255,.18);
}

/* SCROLL (index) : fond blanc + textes foncés */
body.scrolled .site-header-home{
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

body.scrolled .site-header-home .nav a,
body.scrolled .site-header-home .contact-phone,
body.scrolled .site-header-home .contact-phone strong{
  color: #111;
}

body.scrolled .site-header-home .contact-phone{
  background: rgba(0,0,0,.06);
}

/* =====================
   STRUCTURE COMMUNE HEADER
===================== */
.header-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

/* Logo */
.logo{ display:flex; align-items:center; text-decoration:none; }
.logo img{ height:56px; width:auto; display:block; }

/* Nav (ne mets PAS de couleur ici, sinon tu casses le mode home) */
.nav{ display:flex; align-items:center; gap:18px; }
.nav a{
  text-decoration:none;
  font-weight:700;
  opacity:.95;
}
.nav a:hover{ opacity:.80; }

/* Phone CTA (base) */
.contact-phone{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-size:13px;
  padding:10px 14px;
  background-color: #919191;
  border-radius:999px;
  backdrop-filter: blur(6px);
  transition: transform .2s ease, opacity .2s ease, background .25s ease;
}
.contact-phone:hover{ transform: translateY(-1px); opacity:.92; }

.phone-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #ffff;
  font-size:14px;
}
.phone-text{ line-height:1.2; color: #fff; }


/* =====================
   HERO CONTENT
===================== */
.hero-inner{
  position:relative;
  z-index:2;
  height:420px; /* desktop */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 24px;
}

.hero-content{
  max-width:900px;
  color:var(--white);
}

.hero-content h2{
  font-size:42px;
  line-height:1.15;
  font-weight:800;
  margin-bottom:14px;
}

.hero-content p{
  font-size:18px;
  opacity:.95;
}

.phone-input{
  display: flex;
  align-items: center;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.phone-prefix{
  padding: 0 12px;
  font-weight: 800;
  font-size: 14px;
  background: #eef6f5;
  color: #255C63;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.phone-input input{
  border: none;
  outline: none;
  padding: 12px;
  font-size: 14px;
  width: 100%;
}

/* focus clean */
.phone-input:focus-within{
  border-color: #255C63;
  box-shadow: 0 0 0 2px rgba(37,92,99,.15);
}


/* =====================
   TRI-CAR (chevauchement)
===================== */
.triocar{
  position:absolute;
  left:50%;
  bottom: calc(-1 * var(--triocar-overlap));
  transform:translateX(-50%);
  width:min(900px, 92%);
  height:auto;
  z-index:10;
  pointer-events:none;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.45));
}
/* ===== Formulaire demandes ===== */
.dgs-form{ margin-top: 10px; }
.dgs-form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.dgs-field label{
  display:block;
  font-weight:600;
  margin-bottom: 6px;
  color: var(--text);
}
.dgs-field input,
.dgs-field textarea{
  width:100%;
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid rgba(0,0,0,.12);
  outline:none;
  background:#fff;
}
.dgs-field input:focus,
.dgs-field textarea:focus{
  border-color: rgba(37,92,99,.45);
  box-shadow: 0 0 0 4px rgba(37,92,99,.10);
}
.dgs-field textarea{ resize: vertical; }
.dgs-field input[disabled],
.dgs-field textarea[disabled]{ background: rgba(0,0,0,.04); }
.dgs-error{ display:block; color:#b42318; margin-top:6px; font-weight:700; }
.dgs-col-2{ grid-column: span 2; }

@media (max-width: 820px){
  .dgs-form-grid{ grid-template-columns: 1fr; }
  .dgs-col-2{ grid-column: span 1; }
}

/* =====================
   SEARCH WRAP (distance sous triocar)
   => 1 seule règle, pas de doublon
===================== */
.dgs-search-wrap{
  padding: calc(var(--triocar-overlap) + var(--triocar-gap)) 20px 40px;
}

.search-wrapper{
  position: relative;
  z-index: 1;
}


/* =====================
   DGS SEARCHBOX (composant)
===================== */
.dgs-search{
  max-width:980px;
  margin:0 auto;
  background:var(--white);
  border-radius:18px;
  box-shadow:var(--shadow);
  border:1px solid rgba(37,92,99,.12);
  overflow:visible;
  position: relative;
}

/* Tabs */
.dgs-tabs{
  display:grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(37,92,99,.05);
}

.dgs-tab{
  padding:16px 12px;
  border:none;
  background:transparent;
  cursor:pointer;
  font-weight:900;
  color:var(--teal);
  font-size:15px;
}

.dgs-tab.is-active{
  background:var(--white);
  border-bottom:3px solid var(--teal);
}

.dgs-form{ padding:18px; }
.dgs-panel{ display:none; }
.dgs-panel.is-active{ display:block; }

/* Desktop = rectangle (2 colonnes) */
.dgs-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}

.dgs-field{ display:flex; flex-direction:column; gap:8px; }
.dgs-label{ font-weight:900; color:var(--text); font-size:13px; }

.dgs-input, .dgs-select{
  height:50px;
  border-radius:12px;
  border:1px solid var(--border);
  padding:0 14px;
  font-size:15px;
  outline:none;
  background:#fff;
}

.dgs-input:focus, .dgs-select:focus{
  border-color: rgba(37,92,99,.6);
}

/* Submit */
.dgs-submit{
  margin-top:16px;
  width:100%;
  height:54px;
  border:none;
  border-radius:14px;
  background:var(--teal);
  color:#fff;
  font-weight:900;
  font-size:16px;
  cursor:pointer;
  transition: transform .2s ease, opacity .2s ease;
}
.dgs-submit:hover{ transform:translateY(-1px); opacity:.92; }

/* Multi-select */
.dgs-multi{ position:relative; }
.dgs-multi-btn{
  width:100%;
  height:50px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}

.dgs-multi-text{
  color:#6b7280;
  font-size:15px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.dgs-chevron{ color:#6b7280; }

.dgs-multi-pop{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.14);
  padding:12px;
  z-index:30;
}

.dgs-multi.is-open .dgs-multi-pop{ display:block; }

.dgs-multi-search{
  width:100%;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  padding:0 12px;
  outline:none;
  margin-bottom:10px;
}

.dgs-multi-list{
  max-height:220px;
  overflow:auto;
  padding-right:4px;
}

.dgs-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 6px;
  border-radius:10px;
  cursor:pointer;
}
.dgs-item:hover{ background: rgba(37,92,99,.06); }
.dgs-item input{ width:18px; height:18px; }

/* Suggestions (prix) */
.dgs-suggestions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.dgs-chip{
  border:1px solid rgba(37,92,99,.18);
  background: rgba(37,92,99,.06);
  color: var(--teal);
  padding:7px 10px;
  border-radius:999px;
  cursor:pointer;
  font-weight:900;
  font-size:13px;
}

/* =========================
   MENU DESKTOP (ton <nav class="nav nav-desktop">)
========================= */
.nav.nav-desktop {
    display: flex;
    gap: 28px;
    align-items: center;
}

.nav.nav-desktop a {
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 14px;
}

/* Contact desktop (déjà dans ton HTML) */
.contact-desktop {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
}

.contact-desktop .phone-text {
    line-height: 1.1;
    font-size: 13px;
}


/* =====================
   MAIN / CARDS
===================== */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:40px 24px;
}

.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* ✅ 3 par ligne */
  gap:22px;
}


.card{
  background:var(--white);
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 32px rgba(0,0,0,.12);
}

.card img{
  width:100%;
  height:190px;
  object-fit:cover;
}

.card-body{ padding:18px; }
.card-body h3{ font-size:18px; margin-bottom:6px; }

.meta{ font-size:14px; color:var(--muted); margin-bottom:10px; }
.price{ font-size:16px; font-weight:900; color:var(--teal); }

.btn{
  display:block;
  margin-top:14px;
  padding:12px;
  text-align:center;
  background:var(--teal);
  color:var(--white);
  text-decoration:none;
  border-radius:10px;
  font-size:14px;
  font-weight:900;
  transition:transform .2s ease, opacity .2s ease;
}
.btn:hover{ transform:translateY(-1px); opacity:.92; }

/* =========================
   SECTION HEADER (ACCUEIL)
========================= */
.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
  text-align: center;
}

.section-left{
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.section-title{
  margin:0;
  font-size:34px;
  font-weight:900;
  color:var(--text);
}


.section-sub{
  margin-top:6px;
  color:#475569;
  font-size:15px;
  
}

.section-more{
  margin-top:4px;
  font-weight:800;
  color:#0b57d0;
  text-decoration:none;
  white-space:nowrap;
  flex: 0 0 auto;
}

.section-more:hover{
  text-decoration:underline;
}

/* =====================
   BACKGROUND ZONE SECTIONS
===================== */
.bg-soft{
  background: #ffffff; /* clair élégant */
  padding: 80px 0;
}

.bg-soft1{
  background: #F3F7FB; /* clair élégant */
  padding: 80px 0;
}

.section-head-index{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.section-left-index{
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.section-title-index{
  margin:0;
  font-size:34px;
  font-weight:900;
  color:var(--text);
}


.section-image-wrap{
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.section-image{
  width: 100%;
  max-width: 300px; /* augmente ici sans souci */
  height: auto;
  display: block;
}

@media (max-width: 768px) {

  .section-head-index{
    flex-direction: column;     /* empile le contenu */
    align-items: flex-start;
    gap: 10px;
  }

  .section-title-index{
    font-size: 22px;            /* titre plus petit */
    line-height: 1.25;
  }

  .section-sub{
    font-size: 14px;
    justify-content: center
  }

  .section-more{
    font-size: 14px;
    margin-top: 4px;
  }
  /* Justifié sur mobile + alinéa un peu plus petit */
  .section2-sub{
    font-size: 14px;
    text-indent: 18px;
  }
}

/* =========================
   PARAGRAPHES section2-sub
   (alinéa + texte justifié)
========================= */
.section2-sub{
  margin-top: 14px;
  color:#475569;
  font-size:15px;
  line-height:1.75;

  /* Justification */
  text-align: justify;
  text-justify: inter-word;

  /* Alinéa (indentation début de paragraphe) */
  text-indent: 32px;

  /* Optionnel mais utile pour éviter des trous bizarres */
  hyphens: auto;
}


/* =====================
   LOCATION SECTION
===================== */
.location-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.location-text{
  max-width: 520px;
}

.location-image-wrap{
  display: flex;
  justify-content: center;
  
}

.location-image{
  width: 100%;
  max-width: 250px;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.15));
}

/* Infos */
.location-infos{
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.1);
  font-size: 15px;
  line-height: 1.6;
}

.location-link{
  color: var(--teal);
  text-decoration: none;
  font-weight: 900;
}

.location-link:hover{
  text-decoration: underline;
}
/* =====================
   SERVICES GRID
===================== */

.services-grid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.service-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  overflow: hidden;
  padding: 18px;
  transition: transform .2s ease, box-shadow .2s ease;
  text-align: left;
}

.service-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}

.service-illus{
  height: 180px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  background: rgba(37,92,99,.04);
  margin-bottom: 14px;
}

.service-illus img{
  width: 100%;
  max-width: 240px;
  height: auto;
  display:block;
}

.service-card h3{
  font-size: 18px;
  font-weight: 900;
  margin: 8px 0 6px;
  color: var(--text);
}

.service-card p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Bouton en bas */
.services-cta{
  display:flex;
  justify-content:center;
  margin-top: 26px;
}

.services-btn{
  height: 52px;
  padding: 0 20px;
  border-radius: 14px;
  border: none;
  background: var(--teal);
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}

.services-btn:hover{
  transform: translateY(-1px);
  opacity: .92;
}

/* Responsive */
@media (max-width: 1100px){
  .services-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .services-grid{ grid-template-columns: 1fr; }
  .service-card{ text-align: center; }
}

/* =====================
   MODAL
===================== */
body.modal-open{ overflow: hidden; }

.modal{
  position: fixed;
  inset: 0;
  z-index: 999;

  display: flex;
  align-items: center;      /* 🔥 centrage vertical */
  justify-content: center;  /* 🔥 centrage horizontal */

  pointer-events: none;
}

/* header : garde ton z-index si tu veux */
.site-header,
.index-header,
.vehicule-header {
  z-index: 1200;
}

/* modal doit être AU-DESSUS du header */
.modal {
  z-index: 99999 !important;
}

/* overlay et panel au-dessus aussi */
.modal__overlay {
  z-index: 99999 !important;
}

.modal__panel {
  z-index: 100000 !important;
}

.modal.is-open{ display: block; }

.modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}

.modal__panel{
  position: relative;
  width: min(720px, 92vw);
  margin: 7vh auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  overflow: hidden;
}

.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.modal__head h3{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}

.modal__close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  cursor: pointer;
  font-size: 18px;
}

.modal__form{ padding: 18px; }

.modal__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.modal__field{ display:flex; flex-direction:column; gap: 7px; }

.modal__field label{
  font-weight: 900;
  font-size: 13px;
  color: var(--text);
}

.modal__field input,
.modal__field select,
.modal__field textarea{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 12px 12px;
  outline: none;
  font-size: 14px;
}

.modal__field textarea{ grid-column: 1 / -1; resize: vertical; }

.modal__actions{
  margin-top: 14px;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
}

.modal__btn{
  height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  border: none;
  background: var(--teal);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.modal__btn.secondary{
  background: #eef6f5;
  color: var(--teal);
  border: 1px solid rgba(37,92,99,.18);
}

/* Responsive modal */
@media (max-width: 720px){
  .modal__grid{ grid-template-columns: 1fr; }
  .modal__panel{ margin: 10vh auto; }
}


/* =====================
   MODAL – ANIMATION PRO
===================== */
body.modal-open{ overflow:hidden; }

.modal{
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
}

.modal.is-open{ pointer-events: auto; }

/* overlay fade */
.modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .28s ease;
}

.modal.is-open .modal__overlay{ opacity: 1; }

/* panel slide+zoom */
.modal__panel{
  position: relative;
  width: min(720px, 92vw);
  margin: 8vh auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  overflow: hidden;

  transform: translateY(28px) scale(.96);
  opacity: 0;
  transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}

.modal.is-open .modal__panel{
  transform: translateY(0) scale(1);
  opacity: 1;
}


/* Responsive */
@media (max-width: 900px){
  .location-grid{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .location-text{
    margin: 0 auto;
  }
}

  

/* mobile */
@media (max-width: 700px){
  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .section-left{
    max-width:100%;
  }
}

/* =====================
   SOCIAL SECTION
===================== */
.social-grid{
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.social-card{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}

.social-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
}

/* Icon */
.social-icon{
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37,92,99,.08);
  flex-shrink: 0;
}

.social-icon img{
  width: 36px;
  height: 36px;
}

/* Content */
.social-content h3{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 900;
}

.social-content p{
  margin: 0;
  font-size: 14.5px;
  color: #475569;
  line-height: 1.5;
}

.social-action{
  display: inline-block;
  margin-top: 6px;
  font-weight: 800;
  color: #255C63;
}

/* Brand accents */
.social-card.facebook .social-icon{ background:#e7f0ff; }
.social-card.instagram .social-icon{ background:#fce7f3; }
.social-card.whatsapp .social-icon{ background:#dcfce7; }

/* Responsive */
@media (max-width: 900px){
  .social-grid{
    grid-template-columns: 1fr;
  }
}



/* =====================
   FOOTER
===================== */
.site-footer{
  background: #0f2f33;
  color: rgba(255,255,255,.85);
  padding: 60px 0 18px;
  margin-top: 40px;
}

.footer-container{
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap: 26px;
}

.footer-title{
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  letter-spacing: .2px;
}

.footer-logo img{
  height: 46px;
  width: auto;
  display: block;
  margin-bottom: 12px;
}

.footer-text{
  margin: 0 0 14px;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
  font-size: 14px;
}

.footer-links,
.footer-contact{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.footer-links a,
.footer-contact a,
.footer-legal a{
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-size: 14px;
}

.footer-links a:hover,
.footer-contact a:hover,
.footer-legal a:hover{
  color: #fff;
  text-decoration: underline;
}

.footer-contact li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: rgba(255,255,255,.78);
}

.footer-ico{
  width: 18px;
  display: inline-flex;
  justify-content: center;
  opacity: .95;
}

/* Social icons */
.footer-social{
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.footer-social a{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background .2s ease;
}

.footer-social a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.14);
}

.footer-social img{
  width: 20px;
  height: 20px;
}

/* Legal */
.footer-legal{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,.65);
}

.footer-legal span{
  opacity: .5;
}

/* Bottom bar */
.footer-bottom{
  width: min(1200px, 92vw);
  margin: 26px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,255,255,.70);
}

.footer-top{
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  background: rgba(255,255,255,.10);
  padding: 10px 12px;
  border-radius: 12px;
}

.footer-top:hover{
  background: rgba(255,255,255,.16);
}

/* Responsive */
@media (max-width: 980px){
  .footer-container{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px){
  .footer-container{
    grid-template-columns: 1fr;
  }
}


/* =====================
   RESPONSIVE
===================== */
@media (max-width:900px){
  .nav{ display:none; }

  .hero-inner{ height:460px; }
  .hero-content h2{ font-size:34px; }
  .hero-content p{ font-size:16px; }

  :root{
    --triocar-overlap: 210px;
    --triocar-gap: 34px;
  }

  .dgs-grid{ grid-template-columns: 1fr; }
}

@media (max-width:600px){
  /* Hero compact mobile */
  .hero-inner{
    height:420px;
    padding-top:40px;
    padding-bottom:20px;
  }

  .hero-content h2{
    font-size:30px;
    line-height:1.10;
  }

  .hero-content p{ font-size:15px; }

  :root{
    --triocar-overlap: 150px;
    --triocar-gap: -50px;
  }
}

@media (max-width:380px){
  :root{
    --triocar-overlap: 135px;
    --triocar-gap: -100px;
  }
}

@media (max-width: 1100px){
  .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .cards{ grid-template-columns: 1fr; }
}