/* ---------- tokens ---------- */
:root{
  --red:#D11742;
  --red-dark:#B31138;
  --ink:#1A1A2E;
  --body:#5A5A6E;
  --muted:#8A8A9B;
  --line:#E8E8EF;
  --bg:#FFFFFF;
  --bg-alt:#F7F8FA;
  --green:#1B8A4B;
  --green-soft:#E7F4EC;
  --radius:14px;
  --wrap:1080px;
  --shadow:0 4px 24px rgba(26,26,46,.07);
  --shadow-lg:0 18px 50px rgba(26,26,46,.13);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--body);
  background:var(--bg);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{color:var(--ink);margin:0;line-height:1.16;letter-spacing:-.02em}
p{margin:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:32px}
.center{text-align:center}

.eyebrow{
  color:var(--red);font-weight:700;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;gap:38px;height:68px}
.nav-brand{display:flex;align-items:center;text-decoration:none;flex:none}
.logo{width:52px;height:auto}
.nav-links{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav-links a{font-size:13.5px;color:var(--ink);text-decoration:none;font-weight:500}
.nav-links a:hover{color:var(--red)}

.nav-links .btn-sm{color:#fff;margin-left:8px}
.nav-links .btn-sm:hover{color:#fff}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(180deg,#FBFBFD 0%,#F7F8FA 100%);
  min-height:calc(100vh - 68px);display:flex;flex-direction:column;justify-content:center;
  padding-top:56px;padding-bottom:56px;
}
.hero-solo{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-copy{max-width:900px}
.hero-copy h1{
  font-size:clamp(34px,4.6vw,58px);font-weight:500;margin-bottom:62px;
  letter-spacing:-.022em;line-height:1.14;color:var(--body);
}
.q{display:block;font-weight:800;color:var(--ink);letter-spacing:-.032em}
.promise{display:block;font-size:.58em;margin-top:16px;line-height:1.35;text-wrap:balance}
.hl{font-weight:800;color:var(--ink);white-space:nowrap}
.lede{font-size:17px;max-width:34em;margin:0 auto 30px;color:var(--body)}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:10px;
  font-weight:600;font-size:15px;text-decoration:none;border:0;cursor:pointer;
}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(209,23,66,.28)}
.btn-primary:hover{background:var(--red-dark)}
.btn-sm{padding:10px 18px;font-size:13.5px;border-radius:9px;box-shadow:0 3px 10px rgba(209,23,66,.22)}
.btn-sm .ico-wa{width:16px;height:16px}
.ico-wa{width:19px;height:19px;fill:currentColor;flex:none}
.section-cta{margin-top:48px}

.video-card{
  position:relative;display:block;width:100%;max-width:620px;margin:26px auto 0;
  padding:0;border:0;border-radius:16px;overflow:hidden;cursor:pointer;
  background:var(--red);box-shadow:var(--shadow-lg);
  transition:transform .2s ease,box-shadow .2s ease;
}
.video-card img{width:100%;height:auto;display:block}
.video-card:hover{transform:translateY(-3px)}
.video-play{
  position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;
  background:rgba(255,255,255,.94);box-shadow:0 8px 26px rgba(0,0,0,.28);
  transition:transform .2s ease,background .2s ease;
}
.video-play::after{
  content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);
  border-style:solid;border-width:15px 0 15px 25px;
  border-color:transparent transparent transparent var(--red);
}
.video-card:hover .video-play{transform:scale(1.07);background:#fff}

/* ---------- scan modal (desktop only) ---------- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px}
.modal-backdrop{position:absolute;inset:0;background:rgba(20,20,35,.55);backdrop-filter:blur(3px)}
.modal-card{
  position:relative;background:#fff;border-radius:18px;padding:36px 40px 30px;
  width:100%;max-width:420px;text-align:center;box-shadow:0 30px 80px rgba(20,20,35,.35);
  animation:pop .18s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.modal-x{
  position:absolute;top:12px;right:14px;background:none;border:0;cursor:pointer;
  font-size:24px;line-height:1;color:var(--muted);padding:6px;
}
.modal-x:hover{color:var(--ink)}
.modal-x.on-dark{color:#fff;top:-40px;right:-4px;font-size:30px}
.modal-x.on-dark:hover{color:#fff;opacity:.75}
.modal-video{
  position:relative;width:100%;max-width:900px;border-radius:16px;overflow:hidden;
  background:#000;box-shadow:0 30px 80px rgba(20,20,35,.45);animation:pop .18s ease-out;
}
.modal-video video{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}

/* Native fullscreen: the wrapper becomes the screen, so the desktop 900px cap
   would otherwise strand the video in the middle of a black field. The close
   and speed buttons ride along because fullscreen is requested on the wrapper,
   not on the <video>. */
.modal-video:fullscreen,
.modal-video:-webkit-full-screen{
  max-width:none;width:100vw;height:100vh;border-radius:0;
  display:flex;align-items:center;justify-content:center;
}
.modal-video:fullscreen video,
.modal-video:-webkit-full-screen video{
  width:100%;height:100%;aspect-ratio:auto;object-fit:contain;
}
.modal-video:fullscreen .modal-x.on-dark,
.modal-video:-webkit-full-screen .modal-x.on-dark{
  top:16px;right:16px;font-size:26px;width:44px;height:44px;
  background:rgba(0,0,0,.55);border-radius:50%;display:grid;place-items:center;padding:0;
}
.modal-video:fullscreen .speed-btn,
.modal-video:-webkit-full-screen .speed-btn{
  top:auto;bottom:96px;left:16px;background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.3);
}
.speed-btn{
  position:absolute;top:-44px;left:0;z-index:2;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);
  color:#fff;border-radius:999px;padding:5px 14px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;backdrop-filter:blur(6px);
}
.speed-btn:hover{background:rgba(255,255,255,.3)}
.modal-card h3{font-size:21px;font-weight:700;margin-bottom:10px}
.modal-lede{font-size:13px;line-height:1.6;max-width:32ch;margin:0 auto}
.modal-qr{width:190px;height:190px;margin:24px auto 14px;border:1px solid var(--line);border-radius:12px;padding:10px}
.modal-steps{font-size:12px;color:var(--muted)}
.modal-number{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);line-height:1.7;
}
.modal-number a{font-size:15px;font-weight:700;color:var(--red);text-decoration:none}
.modal-number a:hover{text-decoration:underline;text-underline-offset:3px}
.vip{
  margin-top:24px;padding-top:22px;border-top:1px solid var(--line);padding:22px 20px 20px;border-radius:12px;background:var(--bg-alt);
  border:1px solid var(--line);
}
.vip-title{font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:14px}

/* ---------- social proof marquee ---------- */
.proof{margin-top:0;padding-top:88px}
.proof-label{
  text-align:center;font-size:11.5px;color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:36px;
}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:slide 34s linear infinite}
@keyframes slide{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.brands{
  display:flex;align-items:center;gap:66px;list-style:none;margin:0;padding:0 33px;
}
.brands li{
  display:flex;align-items:center;min-height:52px;
  font-size:23px;font-weight:600;color:var(--ink);
  letter-spacing:.02em;white-space:nowrap;
}
/* real logo files live in assets/brands/<slug>.png — until one exists,
   its text wordmark is shown instead */
.brands img{max-height:52px;width:auto;filter:grayscale(1);opacity:.6;transition:opacity .2s}
/* optical balance: solid-block and very wide marks need to sit smaller
   than tall wordmarks or they dominate the row */
.brands img[alt="iShop"]{max-height:38px}
.brands img[alt="Adidas"]{max-height:40px}
.brands img[alt="Salvatore Ferragamo"],
.brands img[alt="Ferragamo"]{max-height:34px}
.brands img[alt="Hermès"]{max-height:30px}
.brands img[alt="Sunglass Hut"]{max-height:32px}
.brands img[hidden]{display:none}          /* beats the base img{display:block} */
.brands .brand-text{opacity:.42;transition:opacity .2s}
.brands img + .brand-text{display:none}
.brands img[hidden] + .brand-text{display:inline}
.brands li:hover img{opacity:.95}
.brands li:hover .brand-text{opacity:.8}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation-duration:90s}
}

/* ---------- sections ---------- */
.section{padding:78px 0}
.section.alt{background:var(--bg-alt)}
.section h2{font-size:32px;font-weight:700}
.section-lede{margin-top:16px;font-size:15px;color:var(--body)}
.center .section-lede{margin-inline:auto;max-width:34em}
.section-lede.left{max-width:32em}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.step{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;box-shadow:var(--shadow);
}
.section.alt .step{background:#fff}
.step-ico{
  width:52px;height:52px;border-radius:13px;background:#FDECF0;
  display:grid;place-items:center;margin-bottom:18px;
}
.step-ico img{width:26px;height:26px}
.step-n{font-size:11px;font-weight:700;color:var(--red);margin-bottom:4px;letter-spacing:.08em}
.step h3{font-size:18px;font-weight:700;margin-bottom:9px}
.step-d{font-size:13.5px;line-height:1.6}
/* contact page */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px;max-width:700px;margin-inline:auto}
.contact-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow);text-decoration:none;
  display:flex;flex-direction:column;align-items:flex-start;
  transition:transform .2s,box-shadow .2s;
}
.contact-card:hover{box-shadow:var(--shadow-lg)}
.contact-card h3{font-size:17px;font-weight:700;margin-bottom:2px}
.contact-value{
  margin-top:0;font-size:14.5px;font-weight:600;color:var(--red);
  text-decoration:none;line-height:1.4;overflow-wrap:anywhere;
}
.contact-value:hover{text-decoration:underline;text-underline-offset:3px}
.copy-btn{
  margin-top:14px;background:none;border:1px solid var(--line);border-radius:8px;
  padding:7px 13px;font-family:inherit;font-size:12.5px;font-weight:600;
  color:var(--body);cursor:pointer;transition:border-color .18s,color .18s;
}
.copy-btn:hover{border-color:var(--red);color:var(--red)}
.copy-btn.copied{border-color:var(--green);color:var(--green)}

/* why us — figures */
.figures{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:52px;
  text-align:center;
}
.figure{padding:0 12px}
.figure strong{
  display:block;font-size:clamp(34px,4.4vw,50px);font-weight:800;color:var(--red);
  letter-spacing:-.035em;line-height:1.05;margin-bottom:10px;
}
.figure span{
  display:block;font-size:13.5px;line-height:1.5;color:var(--body);
  max-width:22ch;margin-inline:auto;
}

/* faq */
.faq{max-width:640px;margin:44px auto 0;display:flex;flex-direction:column;gap:11px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 2px 8px rgba(26,26,46,.04)}
.faq summary{
  list-style:none;cursor:pointer;padding:17px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:13.5px;font-weight:600;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.pm{position:relative;width:13px;height:13px;flex:none}
.pm::before,.pm::after{content:"";position:absolute;background:var(--red);border-radius:2px}
.pm::before{left:0;top:5.5px;width:13px;height:2px}
.pm::after{left:5.5px;top:0;width:2px;height:13px;transition:transform .2s}
.faq details[open] .pm::after{transform:scaleY(0)}
.faq details p{padding:0 20px 18px;font-size:13px;line-height:1.65;max-width:56ch}
.faq-list{
  list-style:none;margin:0;padding:0 20px 18px;
  display:flex;flex-direction:column;gap:11px;max-width:62ch;
}
.faq-list li{position:relative;padding-left:20px;font-size:13px;line-height:1.6}
.faq-list li::before{
  content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--red);
}
.faq-list strong{color:var(--ink);font-weight:600}

/* footer */
.footer{padding:52px 0 60px;margin-top:78px;border-top:1px solid var(--line)}
.foot-inner{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.foot-brand{display:block}
.foot-brand .logo{width:58px}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.foot-links a{font-size:13.5px;color:var(--ink);text-decoration:none;font-weight:500}
.foot-links a:hover{color:var(--red)}
.socials{display:flex;gap:14px}
.socials a{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;color:var(--body);transition:color .2s,border-color .2s,transform .2s;
}
.socials a:hover{color:var(--red);border-color:var(--red);transform:translateY(-2px)}
.socials svg{width:19px;height:19px}
.foot-address{
  margin-top:26px;font-style:normal;text-align:center;
  font-size:12.5px;line-height:1.7;color:var(--muted);
}
.foot-address a{text-decoration:none;transition:color .18s}
.foot-address a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px}
/* legal notice: present and readable, but it never competes with the CTA */
.foot-legal{
  /* the column flex parent centres items, which shrink-wraps them — width:100%
     plus auto margins is what actually lets this paragraph breathe */
  width:100%;max-width:62ch;margin:6px auto 0;
  font-size:11.5px;line-height:1.65;color:var(--muted);text-wrap:pretty;
}
.foot-legal p+p{margin-top:9px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:12px}
  /* phone: each step becomes one compact row so all three fit on screen */
  .step{
    display:grid;grid-template-columns:46px 1fr;column-gap:16px;
    align-items:center;padding:16px 18px;
  }
  .step-ico{width:46px;height:46px;border-radius:11px;margin:0;grid-row:span 3}
  .step-ico img{width:22px;height:22px}
  .step-n{grid-column:2;margin:0;font-size:10px}
  .step h3{grid-column:2;font-size:16px;margin:0 0 2px}
  .step-d{grid-column:2;font-size:13px;line-height:1.45}
  .figures{grid-template-columns:1fr;gap:34px}
  .contact-grid{grid-template-columns:1fr;gap:14px}
  .proof{padding-top:52px}
  .hero{min-height:0;padding-bottom:40px}
  .hero-copy h1{margin-bottom:34px}
  .promise{font-size:.62em;margin-top:12px}
  .brands{gap:34px;padding:0 17px}
  .brands li{font-size:17px;min-height:38px}
  .brands img{max-height:36px}
  .brands img[alt="iShop"]{max-height:28px}
  .brands img[alt="Adidas"]{max-height:28px}
  .brands img[alt="Ferragamo"]{max-height:24px}
  .proof-label{margin-bottom:24px;font-size:10.5px}
  /* the fade mask can leave a hairline at the edges on small screens */
  .marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
           mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .nav-links{gap:18px}
  .nav-links a[href^='#']{display:none}
  .nav-inner{gap:16px}
  /* On a phone the hero already has its own big CTA, so the one in the bar is
     noise until the hero is gone. It arrives once the brand strip scrolls past.
     Desktop is untouched — the bar CTA is always there. */
  .js-nav-cta{
    opacity:0;pointer-events:none;transform:translateY(-6px);
    transition:opacity .22s ease,transform .22s ease;
  }
  .js-nav-cta.is-past-proof{opacity:1;pointer-events:auto;transform:none}
  .hero-copy h1{font-size:clamp(32px,8.5vw,44px)}
  .hero{padding-top:56px}
  .lede{font-size:15.5px}
  .section h2{font-size:26px}
  #scanModal{display:none}
  #videoModal{padding:0}
  .modal-video{
    max-width:none;width:100vw;height:100dvh;border-radius:0;
    display:flex;align-items:center;justify-content:center;box-shadow:none;
  }
  .modal-video video{height:100%;width:100%;aspect-ratio:auto;object-fit:contain}
  .modal-x.on-dark{
    top:14px;right:14px;font-size:26px;width:44px;height:44px;
    background:rgba(0,0,0,.55);border-radius:50%;display:grid;place-items:center;padding:0;
  }
  .speed-btn{top:auto;bottom:96px;left:14px;background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.3)}
  .watch-link{padding:14px 18px;font-size:14.5px}
  .btn{width:100%;justify-content:center}
  .wrap{padding-inline:24px}
  .section{padding:56px 0}
  .foot-links{gap:20px}
}
@media (max-width:560px){
}