:root{
    --bg-0:#0b0b0a;
    --paper:#f5f4ef;
    --lime:#c6ff2e;
    --lime-2:#e4ff8a;
    --ink:#efe9dd;
    --ink-dim:#a6a196;
    --line: rgba(198,255,46,0.18);
    --card: rgba(255,255,255,0.04);
    --container-max: 480px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; width:100%; overflow-x:hidden;}
  body{
    width:100%;
    min-height:100vh;
    background:var(--bg-0);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  .display{font-family:'Archivo Black', sans-serif; letter-spacing:0.01em;}

  /* ---------- fluid container: grows with the viewport, capped for large screens ---------- */
  .wrap{
    width:100%;
    max-width:var(--container-max);
    margin:0 auto;
    padding:0 20px;
  }
  @media (min-width:768px){  :root{ --container-max:700px; } }
  @media (min-width:1024px){ :root{ --container-max:920px; } }
  @media (min-width:1366px){ :root{ --container-max:1080px; } }
  @media (min-width:1440px){ :root{ --container-max:1160px; } }
  @media (min-width:1920px){ :root{ --container-max:1320px; } }

  /* ---------- top strip ---------- */
  .topstrip{
    background:var(--lime); color:var(--bg-0);
    text-align:center; font-size:11.5px; font-weight:800;
    letter-spacing:0.08em; text-transform:uppercase;
    padding:9px 10px;
  }

  .topbar{
    display:flex; align-items:center; justify-content:center;
    gap:8px; padding:16px 0 4px;
    font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--lime); font-weight:700;
  }
  .topbar .dot{width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(198,255,46,0.18);}

  .eyebrow{
    display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--lime);
    border:1px solid var(--lime); border-radius:8px;
    padding:6px 12px;
  }

  /* =====================================================================
     HERO
     Mobile (default): stacked layout, photo as a soft faded backdrop.
     Desktop (>=1024px): true two-column grid, photo visible beside text.
     ===================================================================== */
  .hero{
    position:relative;
    width:100%;
    min-height:640px;
    max-width:600px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background-color:var(--bg-0);
    overflow:hidden;
    padding:32px 20px 36px;
  }
  .hero-photo{
    position:absolute;
    top:0; right:-14%;
    width:64%; height:100%;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:top center;
    opacity:0.48;
    z-index:0;
    pointer-events:none;
    border-radius:0;
    -webkit-mask-image:linear-gradient(100deg, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.95) 55%, black 75%),
                        linear-gradient(0deg, transparent 0%, black 18%, black 82%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(100deg, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.95) 55%, black 75%),
               linear-gradient(0deg, transparent 0%, black 18%, black 82%, transparent 100%);
    mask-composite:intersect;
    background-image:url("../images/foto.jpg");
  }

  .hero-content{position:relative; z-index:1; width:100%; max-width:440px; margin:0 auto;}
  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:7px;
    font-size:11.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--lime); border:1px solid var(--line); border-radius:8px;
    padding:6px 12px; margin-bottom:18px;
  }
  .hero-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(198,255,46,0.18);}
  .accent-line{
    display:block; width:78px; height:3px; margin-top:14px;
    background:var(--lime); border-radius:2px;
  }
  .store-hl{color:var(--lime); font-weight:600;}
  .quick-points{
    list-style:none; margin:20px 0 0; padding:0;
    display:flex; flex-direction:column; gap:8px;
  }
  .quick-points li{
    font-size:13px; color:var(--ink); display:flex; align-items:center; gap:8px;
  }
  .quick-points li b{color:var(--lime); font-size:15px; flex:none;}

  /* ---------- headline block ---------- */
  .headline-block{text-align:left; margin-top:22px;}
  h1{
    font-size:clamp(26px, 7.6vw, 34px);
    line-height:1.16;
    text-align:left;
    color:var(--paper);
    word-break:break-word;
  }
  h1 .hl{color:var(--lime);}
  .sub{
    max-width:400px; margin:14px 0 0; color:var(--ink-dim);
    font-size:14.5px; line-height:1.55;
  }
  .sub b{color:var(--ink); font-weight:700;}

  /* ---------- stats row ---------- */
  .stats{
    display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
    margin:24px auto 0; max-width:400px; width:100%;
  }
  .stat{
    flex:1 1 100px; min-width:100px; background:var(--card); border:1px solid var(--line);
    border-radius:14px; padding:14px 8px; text-align:center;
  }
  .stat .icon{
    width:30px; height:30px; margin:0 auto 8px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:rgba(198,255,46,0.12);
  }
  .stat .icon svg{width:16px; height:16px;}
  .stat .num{font-weight:800; font-size:13px; color:var(--paper);}
  .stat .label{font-size:10px; color:var(--ink-dim); margin-top:2px; line-height:1.3;}

  /* ---------- CTA ---------- */
  .cta-area{margin:26px auto 0; max-width:380px; width:100%;}
  .hero .cta-area{margin:26px 0 0; max-width:100%;}
  .cta{
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; text-decoration:none; cursor:pointer;
    background:linear-gradient(180deg, var(--lime-2), var(--lime));
    color:#0b0b0a; font-weight:800; font-size:16.5px;
    padding:18px 18px; border-radius:12px; border:none;
    box-shadow:0 16px 34px -10px rgba(198,255,46,0.45), inset 0 1px 0 rgba(255,255,255,0.5);
    white-space:normal; word-break:break-word; text-align:center;
  }
  .cta svg{width:20px; height:20px; flex:none;}
  .cta:active{transform:translateY(1px);}
  .cta:hover{filter:brightness(1.04);}
  .microcopy{
    text-align:center; font-size:12px; color:var(--ink-dim);
    margin-top:10px;
  }
  .hero .microcopy{text-align:left;}
  .microcopy b{color:var(--lime);}

  /* ---------- store strip ---------- */
  .stores{
    margin:34px auto 0; max-width:420px; width:100%; text-align:center;
  }
  .stores p.label{
    font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--ink-dim); margin-bottom:14px;
  }
  .store-row{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;}
  .store-chip{
    font-family:'Archivo Black', sans-serif; font-size:12.5px;
    color:var(--ink); padding:9px 14px;
    border:1px solid var(--line); border-radius:9px;
    background:var(--card); white-space:nowrap;
  }

  /* ---------- benefit bars ---------- */
  .benefits{margin:34px auto 0; max-width:420px; width:100%; display:flex; flex-direction:column; gap:10px;}
  .benefit{
    display:flex; align-items:center; gap:10px;
    background:var(--card); border:1px solid var(--line);
    border-radius:12px; padding:13px 14px;
    font-size:13px; color:var(--ink);
  }
  .benefit .dot2{color:var(--lime); font-size:16px; line-height:1; flex:none;}

  /* ---------- second cta ---------- */
  .cta2{margin:40px auto 0; text-align:center; max-width:420px; width:100%;}
  .cta2 h2{font-size:22px; color:var(--paper); margin-bottom:8px;}
  .cta2 p{font-size:14px; color:var(--ink-dim); margin-bottom:18px;}

  footer{
    margin:48px auto 0; padding:24px 0 40px; text-align:center;
    border-top:1px solid var(--line);
  }
  footer p{font-size:11px; color:#6b675c; line-height:1.6; max-width:400px; margin:0 auto;}
  footer .brand{color:var(--lime); font-weight:700;}

  /* =====================================================================
     BREAKPOINTS
     ===================================================================== */

  /* ---- 375px / 414px large phones: a little more breathing room ---- */
  @media (min-width:375px){
    .hero{padding:36px 22px 40px;}
  }
  @media (min-width:414px){
    .hero{padding:40px 24px 44px;}
  }

  /* ---- 768px tablets: wider stacked hero, bigger type ---- */
  @media (min-width:768px){
    .hero{max-width:760px; min-height:720px; padding:56px 40px;}
    .hero-content{max-width:520px;}
    h1{font-size:40px;}
    .sub{max-width:460px; font-size:15.5px;}
    .stats{max-width:600px;}
    .stores{max-width:600px;}
    .benefits{max-width:600px;}
    .cta2{max-width:600px;}
  }

  /* ---- 1024px+ desktop: keep the same stacked look, photo stays a soft faded backdrop ---- */
  @media (min-width:1024px){
    .hero{
      max-width:920px;
      min-height:760px;
      padding:72px 56px;
    }
    .hero-content{max-width:560px;}
    .hero-photo{
      width:58%;
      right:-10%;
      opacity:0.24;
    }
    h1{font-size:44px;}
    .sub{max-width:500px; font-size:16px;}
    .quick-points li{font-size:14px;}
    .cta{font-size:17px; padding:19px 20px;}
    .stats{max-width:760px;}
    .stores{max-width:760px;}
    .benefits{max-width:760px;}
    .cta2{max-width:760px;}
    .cta2 h2{font-size:28px;}
    .cta2 p{font-size:15.5px;}
  }

  /* ---- 1366px laptops ---- */
  @media (min-width:1366px){
    .hero{max-width:980px; padding:80px 64px;}
    h1{font-size:48px;}
    .stats{max-width:860px;}
    .stores{max-width:860px;}
    .benefits{max-width:860px;}
    .cta2{max-width:860px;}
  }

  /* ---- 1440px+ large desktop ---- */
  @media (min-width:1440px){
    .hero{max-width:1020px; padding:84px 68px;}
    h1{font-size:50px;}
  }

  /* ---- 1920px 2K/4K displays: cap growth, keep it centered and readable ---- */
  @media (min-width:1920px){
    .hero{max-width:1080px;}
    .stats{max-width:960px;}
    .stores{max-width:960px;}
    .benefits{max-width:960px;}
    .cta2{max-width:960px;}
  }

  /* ---- very small phones (<=340px): tighten spacing so nothing overflows ---- */
  @media (max-width:340px){
    .wrap{padding:0 14px;}
    .hero{padding:28px 14px 32px;}
    h1{font-size:24px;}
    .cta{font-size:15px; padding:16px;}
    .store-chip{font-size:11.5px; padding:8px 10px;}
  }