/* -------------------------------------------------     
   Another PlastiK — SUSTAINAIBILITY
   ------------------------------------------------- */
/* Fonts (toujours en tête) */
@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700&display=swap');

/* ===== VARIABLES ===== */
:root {
  /* Couleurs principales */
  --primary: #1F3D32;
  --primary-light: #2A4F42;
  --primary-dark: #16291F;

  /* Accents */
  --accent: #2C5F6F;
  --accent-light: #3A7A8C;
  --accent-soft: rgba(44, 95, 111, 0.12);
  --olive: #8B9556;

  /* Neutres */
  --bg: #FFFFFF;
  --bg-sand: #F4EBE0;
  --bg-light: #F8FAFC;
  --text: #2A2A2A;
  --text-muted: #6B7280;
  --black: #0A0A0A;
  --white: #FFFFFF;

  /* UI */
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #E5E5E5;
  --gray-300: #D4D4D4;
  --gray-400: #A3A3A3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;

  --shadow: 0 8px 28px rgba(0,0,0,.08);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.12);

  --container: 1380px;
  --container-narrow: 1280px;
  --gutter: 20px;

  --header-h: 75px;
  --link-h: 44px;

  /* Hero heights */
  --hero-h-desktop: 78vh;
  --hero-h-tablet: 63vh;
  --hero-h-mobile: 50vh;

  /* Ratios de base */
  --media-ar-desktop: 5 / 3.9;    
  --media-ar-tablet:  5 / 3.8;   
  --media-ar-mobile:  5 / 3.3;   

  /* Hauteur exacte de la phase-banner */
  --banner-h: 40px;

  /* Couleur succès (pour progress-fill) */
  --success: #1aa37a;
}

/* =========================
        Base/ Reset
   ========================= */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* Fix global overflow + fond blanc parasite */
html, body {  width:100%;  max-width:100%;  overflow-x:hidden;     background:var(--bg);}
body{  min-height:100vh; display:flex; flex-direction:column; margin:0; font-family:"Cabinet Grotesk",system-ui,sans-serif;
  font-size:17px; line-height:1.75; font-weight:400; letter-spacing:-.01em;
  color:var(--text); background:transparent; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}
main{flex:1 0 auto; padding-top:calc(var(--header-h) + var(--banner-h));}
footer{margin-top:auto;}
.container{max-width:var(--container); margin:0 auto; padding:0 var(--gutter);}
.container-narrow{max-width:var(--container-narrow); margin:0 auto; padding:0 var(--gutter);}
.section{padding:60px 0; overflow-x:hidden; padding-inline:var(--gutter);}
body.has-hero main{margin-top:0;}

/* =========================
   PHASE BANNER
   ========================= */
.phase-banner{  position:fixed; top:var(--header-h); left:0; right:0; z-index:10000;  height:var(--banner-h); display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#2C5F6F 0%,#3A7A8C 100%); color:#fff;  line-height:1; font-size:.95rem; padding:0; transition:transform .3s,opacity .3s;}
body.scrolled-nav .phase-banner{transform:translateY(-100%);opacity:0;pointer-events:none;}
.phase-banner a{color:#fff;text-decoration:underline;font-weight:600;text-underline-offset:3px;transition:opacity .2s;}
.phase-banner a:hover{opacity:.85;}

/* =========================
   HEADER
   ========================= */
header.nav{  position:fixed; top:0; left:0; right:0; z-index:10001; height:var(--header-h);  width:100%; max-width:100vw; overflow-x:clip; background:var(--bg);
  transition:box-shadow .30s ease; box-shadow:0 2px 8px rgba(0,0,0,.1);}
body.scrolled-nav header.nav{box-shadow:0 6px 18px rgba(0,0,0,.12);}
header.nav .inner{  width:100%; max-width:var(--container); margin:0 auto; height:100%;  padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between;}
header.nav .logo{display:flex; align-items:center; height:100%; margin-right:clamp(32px,6vw,128px);transform:translateX(-8px)}
header.nav .logo img{display:block; height:calc(var(--header-h) - 28px); width:auto;}
header.nav .links{  display:flex; align-items:center; gap:20px; height:100%; position:relative; top:3px;  margin-left:auto; margin-right:0;}
header.nav .links a{  position:relative; display:inline-flex; align-items:center; justify-content:center;  height:var(--link-h); padding:0 14px; line-height:1; font-weight:600; color:var(--primary); text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .2s ease;}
header.nav .links a::after{  content:""; position:absolute; left:0; bottom:-3px; width:0%; height:2px; background:var(--primary); transition:width .25s ease;}
header.nav .links a:hover::after, header.nav .links a:focus::after{width:100%;}
body.has-hero header.nav{background:var(--bg); box-shadow:0 2px 8px rgba(0,0,0,.1);}
body.has-hero.scrolled-nav header.nav{background:var(--bg)!important; box-shadow:0 6px 18px rgba(0,0,0,.12)!important;}
body.has-hero header.nav .links a{color:var(--primary);}
body.has-hero.scrolled-nav header.nav .links a{color:var(--primary)!important;}

/* =========================
            BURGER
   ========================= */
header.nav .nav-toggle{  display:none; width:44px; height:44px; background:transparent; border:none; cursor:pointer; z-index:10000;  align-items:center; justify-content:center;}
header.nav .nav-toggle span{display:block; width:24px; height:2px; background:var(--primary); transition:transform .25s,opacity .2s,background .25s}
header.nav .nav-toggle span+span{margin-left:-24px; transform:translateY(6px)}
body.menu-open .nav-toggle span:first-child{transform:translateY(0) rotate(45deg)}
body.menu-open .nav-toggle span:last-child{transform:translateY(0) rotate(-45deg)}

/* =========================
         Mobile menu
   ========================= */
.mobile-menu{  position:fixed;  inset:0;  z-index:9998;  display:flex;  flex-direction:column;  align-items:center;  justify-content:center;  gap:22px;
  padding:20px;  background:rgba(31,92,66,.98);  transform:translateY(-100%);  transition:transform .28s ease;
}

body.menu-open .mobile-menu{  transform:none;}
.mobile-menu a{  color:#fff;  font-size:1.3rem;  font-weight:600;  text-decoration:none;}

/* =========================
       Language selector
   ========================= */

/* Vertical separator */
.language-separator{  display:inline-block;  width:1px;  height:26px;  background:var(--primary);  margin:0 8px;}

/* Wrapper */
.language-selector{  position:relative;  display:flex;  align-items:center;  height:var(--link-h);}

/* Toggle button */
.lang-toggle{  display:inline-flex;  align-items:center;  justify-content:center;  gap:6px;
  height:var(--link-h);  padding:0 14px;  background:transparent;  border:none;  color:var(--primary);
  font-weight:600;  font-size:1rem;  font-family:"Cabinet Grotesk",sans-serif;
  cursor:pointer;  transform:translateY(1px);  transition:opacity .25s;}
.lang-toggle:hover{  opacity:.9;}

/* Arrow */
.lang-arrow{  width:10px;  height:10px;  stroke:currentColor;  stroke-width:1.6;  transition:transform .25s;}
.lang-toggle[aria-expanded="true"] .lang-arrow{  transform:rotate(180deg);}

/* Dropdown */
.lang-dropdown{  position:absolute;  top:calc(100% + 8px);  right:0;  min-width:120px;  z-index:1000;  background:var(--bg);box-shadow:0 8px 24px rgba(0,0,0,.15);
  opacity:0;  visibility:hidden;  transform:translateY(-8px);  transition:opacity .25s ease, transform .25s ease;
}
.lang-dropdown[aria-hidden="false"]{  opacity:1;  visibility:visible;  transform:translateY(0);}

/* Language links */
.lang-option{  display:block;  width:100%;  padding:12px 20px;  background:transparent;  border:none;  text-align:left;
  text-decoration:none;  color:var(--primary);  font-weight:600;  font-size:.95rem;  font-family:"Cabinet Grotesk",sans-serif;  cursor:pointer;  transition:background .2s ease;}
.lang-option:hover,
.lang-option:focus{  background:var(--accent-soft);  text-decoration:none;}
.lang-option:focus-visible{  outline:2px solid var(--accent);  outline-offset:2px;}
.lang-option.active,
.lang-option[aria-current="page"]{  background:var(--accent-soft);  color:var(--primary);}

/* =========================
    Mobile language
   ========================= */
.mobile-lang-selector{  display:flex;  flex-direction:column;  gap:12px;  padding-top:24px;
  margin-top:24px;  border-top:1px solid rgba(0,0,0,.12);}
.lang-option-mobile{  background:rgba(255,255,255,.1);  border:1.5px solid rgba(255,255,255,.3);  border-radius:5px;
  color:#fff; padding:14px 20px;  font-weight:600;  font-size:1.1rem;  text-align:center;
  font-family:"Cabinet Grotesk",sans-serif;  cursor:pointer;  transition:background .25s, border-color .25s;}
.lang-option-mobile:hover{  background:rgba(255,255,255,.2);  border-color:rgba(255,255,255,.5);}
.lang-option-mobile.active{  background:#fff;  color:var(--primary);  border-color:#fff;}
/* =========================
  PAGE HERO
   ========================= */
.page-hero{padding:80px 0 60px; position:relative; color:#fff;}
.page-hero .container{  position:relative;   z-index:1;  max-width:var(--container);  margin:0 auto;  padding:0 var(--gutter);}
.page-hero h1{font-size:clamp(2.4rem,5.4vw,4.6rem);   font-weight:600;   line-height:1.08;   color:#fff;   margin-bottom:16px;   text-transform:uppercase;}
.page-hero .overlay{position:absolute; inset:0; background:rgba(0,0,0,.35); z-index:0;  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;     
  text-align:left; background:rgba(0,0,0,.25);}
.page-hero p{  font-size:1.2rem;   color:#fff;   text-align:justify;}

/* =========================
   DASHBOARD SECTION
   ========================= */
  .metrics-section { background:#ffffff;  padding:30px 0; position:relative;  z-index:1; }
  .metrics-header {    text-align: left;    margin-bottom: 48px;  }  
  .metrics-header h2 {  font-size: clamp(2rem, 3.5vw, 2.8rem);  color: var(--primary);  margin-bottom: 8px;  }   
  .metrics-header .update-time { font-size: 0.9rem;     color: var(--text-muted);   }
  .metrics-carousel{ position: relative; width:100%; max-width:var(--container);  margin:0 auto;}
  .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;   margin-bottom: 40px;  overflow:visible;  }
  .metric-card { background: linear-gradient(180deg,#f8fafc 0%,#edf2f7 100%);     padding: 32px;      border-radius: 5px; 
   text-align: center;    transition: transform 0.3s ease, box-shadow 0.3s ease;    }  
 .metrics-grid::-webkit-scrollbar{  display:none; } 
 .metric-icon {  font-size: 3rem;      margin-bottom: 30px; display:flex; align-items:center; justify-content:center;    }  
 .metric-icon img{  width:60px;  height:60px;  object-fit:contain;  display:block;}
 .metric-value {     font-size: 3rem;     font-weight: 900;     color: var(--text);     line-height: 1;
      margin-bottom: 8px;      font-variant-numeric: tabular-nums;    }  
 .metric-label {     font-size: 1rem;     color: var(--text);     font-weight: 600;     margin-bottom: 12px;   }
 .metric-context {      font-size: 0.85rem;      color: var(--text-muted);    }    
    
/* Barre de carrousel custom (utilisée en mobile) */
.metrics-scrollbar{  
  display:none; position:relative;  width:100%;  max-width:680px;
  margin:10px auto 0;  height:8px;  box-sizing:border-box;}

.metrics-scrollbar::before{  content:"";  position:absolute;  inset:0;
  border-radius:0;  background:#E5E7EB;}

.metrics-scrollbar-thumb{ position:absolute; inset-block:0; left:0;
  height:8px;  border-radius:0;  background:#9CA3AF;  width:40%;  transform:none;
  transition:left .18s linear, width .18s ease-out;}

/* =========================
     QR DEMO SECTION
   ========================= */
.qr-demo-section {  padding:30px 0;  background:#fff;}
.qr-demo-section .container{  max-width: var(--container);  margin: 0 auto;  padding: 0 var(--gutter);}

/* Desktop / grands écrans : 2 colonnes côte à côte */
.qr-demo-container {  display: flex;  align-items: center;  justify-content: space-between;  gap: 56px;}
.qr-demo-visual,
.qr-demo-content {  flex: 1 1 0;}
.qr-demo-visual {  background: #ffffff;  padding: 32px;  border-radius: 5px;  text-align: center;}

/* QR code responsive : diminue quand l’écran se rétrécit */
.qr-code-display {  width: clamp(220px, 40vw, 280px);  aspect-ratio: 1 / 1;  background: #fff;  margin: 0 auto 24px;  border-radius: 5px;
  display: flex;  align-items: center;  justify-content: center;  font-size: 1.2rem;  color: var(--text-muted);  font-weight: 600;}
.qr-code-display img {  width: 100%;  height: 100%;  object-fit: contain;}
.scan-instruction {  font-size: 0.95rem;  color: var(--text-muted);}
.qr-demo-content h2 {  font-size: clamp(2rem, 3.5vw, 2.8rem);  color: var(--primary);  margin-bottom: 20px;}
.qr-demo-content p {  margin-bottom: 24px;  line-height: 1.8;}
.qr-data-preview {  background: var(--bg-light);  padding: 24px;  border-radius: 5px;  margin: 24px 0;}
.qr-data-item {  display: flex;  justify-content: space-between;  padding: 12px 0;  border-bottom: 1px solid #E5E5E5;}
.qr-data-item:last-child {  border-bottom: none;}
.qr-data-label {  font-weight: 600;  color: var(--text);}
.qr-data-value {  color: var(--primary);  font-weight: 700;}

/* =========================
   SDG SECTION
   ========================= */
.sdg-section { padding:30px 0;; background: #ffffff;}
.sdg-header { text-align: center; margin-bottom: 48px; }
.sdg-header h2 { font-size: clamp(2rem, 3vw, 2.6rem); color: var(--primary); margin-bottom: 12px;font-weight: 700;}
.sdg-header p { font-size: 1rem; color: var(--text); max-width: unset; margin: 0 auto;white-space: noap;}
.sdg-grid {  display: grid;  grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 40px;}
.sdg-card { background: #fff; border-radius:5px; overflow: hidden; width: 100%; box-shadow: 0 3px 18px rgba(0,0,0,0.05); transition: transform 0.25s ease, box-shadow 0.25s ease;  }
.sdg-card:hover { transform: translateY(-4px); box-shadow: 0 8px 26px rgba(0,0,0,0.10);   }
.sdg-header-visual {  width: 100%;  aspect-ratio: 1 / 1; display: flex;  align-items: center;  justify-content: center;  background: var(--bg-light);  padding: 6px;} 
.sdg-header-visual img { width: 95%; height: 95%;  object-fit: contain; border-radius:5px }
.sdg-content { padding: 20px;  }
.sdg-content h3 {  font-size: 1rem;  color: var(--text);   margin-bottom: 8px; font-weight: 600;}    
.sdg-content p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 16px; text-align: justify; } 
.sdg-learn-more { color: var(--primary); font-weight: 500; font-size: 0.85rem; text-decoration: none; text-transform: uppercase;letter-spacing: 0.05em;}

/* Barre de carrousel custom (utilisée en mobile) */
.sdg-scrollbar{   display:none; position:relative;  width:100%;  margin:10px auto 0;  height:8px;  box-sizing:border-box;}
.sdg-scrollbar::before{  content:"";  position:absolute;  inset:0;  border-radius:0;  background:#E5E7EB;}
.sdg-scrollbar-thumb{ position:absolute; inset-block:0; left:0;  height:8px;  border-radius:0;  background:#9CA3AF;  width:40%;  transform:none;
  transition:left .18s linear, width .18s ease-out;}

/* =========================
           FOOTER
   ========================= */
 footer{background:var(--primary); color:rgba(255,255,255,.95); padding:48px 0 24px}
.footer-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:48px; max-width:var(--container);            margin:0 auto; padding:0 var(--gutter); margin-bottom:32px;}
.footer-brand{margin-bottom:20px}
.footer-brand h3{color:#fff; font-size:1.3rem; font-weight:600}
.footer-info{display:flex; flex-direction:column; gap:14px; margin-bottom:20px}
.info-item{display:flex; align-items:center; gap:12px}
.info-item svg{width:20px; height:20px; stroke:rgba(255,255,255,.9); fill:none; stroke-width:2; flex-shrink:0}
.info-item span,.info-item a{color:rgba(255,255,255,.95); font-size:.95rem; text-decoration:none; transition:color .2s}
.info-item a:hover{color:#fff}
.footer-social{display:flex; gap:12px}
.footer-social a{ width:44px; height:44px; background:var(--primary); border-radius:5px; display:flex; align-items:center; justify-content:center;
  transition:all .3s; text-decoration:none; position:relative;}
.footer-social a:hover{transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.2)}
.footer-social a svg{width:26px; height:26px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
.footer-col h4{color:#fff; font-weight:600; margin-bottom:16px; font-size:1.1rem}
.footer-col a{color:rgba(255,255,255,.85); font-size:.95rem; line-height:1.8; text-decoration:none; display:block; margin-bottom:8px; transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15); padding-top:24px; text-align:center; font-size:.85rem; color:rgba(255,255,255,.7);
  max-width:var(--container); margin:0 auto; padding-inline:var(--gutter);
}

/* ===============================
       DESKTOP INTERMÉDIAIRE
   =============================== */
/* ===  (4 cartes sans retour) === */
@media (max-width: 1280px) and (min-width: 1024px) {

  .metrics-grid{    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 18px; }
  .metric-card{ padding: 24px 20px;  }
  .metric-icon{  font-size: 2.4rem;  margin-bottom: 12px;}
  .metric-value{ font-size: 2.5rem;   margin-bottom: 6px; }
  .metric-label{   font-size: 0.95rem;   margin-bottom: 10px; }
  .metric-context{   font-size: 0.8rem; }
  .sdg-grid{  grid-template-columns: repeat(3, minmax(220px, 1fr));  gap: 28px;scrollbar-width:none;  }
  .sdg-content{  padding: 18px;}
  .sdg-content h3{    font-size: 0.95rem;    margin-bottom: 6px;  }
  .sdg-content p{    font-size: 0.85rem;  }
  .sdg-header p{    font-size: 0.95rem;  }   
}

/* ===============================
   STRUCTURE — RESPONSIVE
   =============================== */
/* DESKTOP (≥1025px) — liens toujours 1 seule ligne */
@media (min-width:1025px){  
  header.nav .links{   display:flex;   align-items:center;   flex-wrap:nowrap; gap:clamp(14px, 1.2vw, 28px); }
  header.nav .links a{   white-space:nowrap; line-height:1.2; }
}

 /* ==================
      MOBILE — 900px
      ================== */
@media (max-width: 900px){
 .sdg-grid{ grid-template-columns: repeat(2, minmax(230px, 1fr)); gap: 24px; scrollbar-width:none;  }     }

/* =========================
   ≤1024px — TABLETTES/IPADS
   ========================= */
@media (max-width:1024px) {

   :root{
    --gutter:12px;
  }
   /* ===== HEADER NAV ===== */
  header.nav .inner{display:flex; align-items:center; justify-content:space-between}
  header.nav .logo{flex:0 0 auto; margin-right:clamp(12px,2.4vw,28px)}
  header.nav .nav-toggle{display:flex !important; margin-left:auto}
  header.nav .links{display:none !important}
 
 /* On transforme la grille en track horizontale */
 .metrics-carousel{  position:relative;  width:100%;  max-width:680px;   margin:0 auto; padding-inline:0;  box-sizing:border-box;  }
 .metrics-grid{ display:flex; gap:18px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
   scroll-padding-inline:16px; padding:8px 0 16px; scrollbar-width:none;  justify-content:flex-start !important;}
 .metrics-grid::-webkit-scrollbar{  display:none;}
 .metric-card{flex: 0 0 100%; min-width: 260px; scroll-snap-align: center;}
 .metrics-scrollbar{    display:block;  }
 .sdg-scrollbar {    display:none;  }

/* ===== QR DEMO ≤1024px ===== */
.qr-demo-container{  flex-direction: column;  align-items: center;  gap: 24px;}

/* --- TITRE + DESCRIPTION À GAUCHE --- */
.qr-demo-content{  order: 1;  width: 100%;  max-width: 100%;  text-align: left;  margin: 0;}
.qr-demo-content h2,
.qr-demo-content p{  text-align: left;  width: 100%;  margin-left: 0; }

/* --- TABLEAU CENTRÉ --- */
.qr-data-preview{  max-width: 640px;  width: 100%;  margin: 16px auto 0; }

/* --- QR CODE CENTRÉ --- */
.qr-demo-visual{  order: 2;  max-width: 360px;  width: 100%;  margin: 0 auto 8px;}
.qr-demo-section{    padding-bottom: 16px;     }

/* ===== SDG HEADER ≤1024px ===== */
.sdg-section{   padding-top: 16px; }
.sdg-header{    text-align: left;    max-width: 100%;   margin: 0 0 32px 0; }
.sdg-header h2{    text-align: left;    margin: 0 0 12px 0;  }
.sdg-header p{    text-align: left;       max-width: 100%;   margin: 0;    white-space: normal;  }

/* --- Phase Banner — plein viewport, bien centrée --- */
.phase-banner,
.banner,
 header .banner,
 header.nav .banner{  display:flex !important;  align-items:center !important;
  justify-content:center !important;  text-align:center !important; position:fixed;  
  top:var(--header-h);    left:0; right:0; width:100% !important; max-width:100% !important;
  margin:0 !important; padding-left:clamp(8px,2vw,16px) !important; padding-right:clamp(8px,2vw,16px) !important;
  box-sizing:border-box !important;  }

  /* le container interne ne doit plus réduire la largeur */
  .phase-banner > .container,
  .banner > .container{
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .phase-banner * ,
  .banner *{   text-align:center !important;   margin:0 !important; }
   
   /* Verrouillage anti-scroll horizontal global (mobile + tablette) */
   html, body{  width:100%;  max-width:100%;  overflow-x:hidden;}
   }

/* =========================================================
   LARGEUR COMMUNE 98% — de 1024px à 641px (PAGE PRODUCT)
   ========================================================= */
@media (max-width:1024px) and (min-width:641px){

  .container,
  .container-narrow,
  .page-hero .container,
  .metrics-grid,
  .qr-demo-section .container,
  .sdg-grid,
  .footer-grid{
    max-width:98% !important;
    margin-inline:auto !important;   /* mêmes marges gauche / droite */
  }
}

   /* ==================
      MOBILE — ≤640px
      ================== */
   @media (max-width:640px){
      
 /* Header mobile */
  header.nav .links{ display:none !important; }
  header.nav .nav-toggle{ display:flex !important; margin-left:auto; }
  header.nav .inner{ display:flex; align-items:center; }
  header.nav .logo{ margin-right:auto; }

/* Renfort bannière mobile (plein viewport) */
 .banner,header .banner,header.nav .banner{
    width:100vw !important; max-width:none !important;
    margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; }
 .metric-card{ flex: 0 0 100%;  min-width: 260px;    scroll-snap-align: center; margin:0 auto; } 
 .qr-code-display{ width: 220px; height: 220px;  } 
 .page-hero h1 {  font-size: clamp(1.8rem, 6vw, 2.4rem) !important; line-height: 1.1;  text-align: left; }
 .page-hero p {font-size: 0.95rem !important; line-height: 1.5; max-width: 90%; text-align: left; }
 
 .qr-demo-content h2, 
 .metrics-header h2,     
 .sdg-header h2 { font-size:clamp(1.4rem,4vw,1.8rem)!important;}
 
 .sdg-header p{ white-space: normal; max-width: 100%; text-align: justify; }
 .sdg-grid{   display: flex;   overflow-x: auto;   scroll-snap-type: x mandatory;
    gap: 18px;  padding: 8px 4px 16px;  scrollbar-width:none;  }
 .sdg-grid::-webkit-scrollbar{   display:none; }
 .sdg-card{ flex: 0 0 100%;  min-width: 260px;    scroll-snap-align: center; margin:0 auto;  }
 .sdg-section{  padding-top: 50px;   padding-bottom: 50px; }      
 .sdg-scrollbar{   display:block;   width:100%;   margin:14px auto 0; }    

 /* Footer */   
 .footer-grid{grid-template-columns:1fr}       
   }

/* =========================
   UTILITIES
   ========================= */
.animate-on-scroll{ will-change: transform, opacity; }
.highlight{ color: #1aa37a; }