/* Flammers — "Glass" look. All colours are variables on :root (dark variant below). */
:root{
  --accent:#b92f0b; --accent-2:#e8590c; --on-accent:#fff;
  --wa:#0f7a3f; --ink:#1d1410; --muted:#5b4c44;
  --bg1:#fff1e6; --bg2:#ffd9c2; --blob1:#ff7a3d; --blob2:#ffc247; --blob3:#e0442b;
  --glass:rgba(255,255,255,.72); --glass-b:rgba(255,255,255,.65); --solid:#fffaf6;
  --sh:0 8px 28px rgba(120,45,15,.14); --chip:rgba(255,255,255,.6);
  --r:20px; --top-h:104px;
  --f-display:'Bricolage Grotesque','Trebuchet MS',system-ui,sans-serif; --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --accent:#ff9a62; --accent-2:#ffb13d; --on-accent:#1d0d06; --wa:#0f7a3f; --ink:#f8efe9; --muted:#d3c1b6;
  --bg1:#1a0f0b; --bg2:#2b1209; --blob1:#c2330d; --blob2:#8a4b00; --blob3:#7a1f12;
  --glass:rgba(255,255,255,.09); --glass-b:rgba(255,255,255,.18); --solid:#2a1a13; --sh:0 8px 28px rgba(0,0,0,.45); --chip:rgba(255,255,255,.08);
}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 1rem/1.55 var(--f-body);color:var(--ink);background:linear-gradient(160deg,var(--bg1),var(--bg2)) fixed;min-height:100vh;overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom,0)}
img{max-width:100%;display:block}
a{color:inherit}
[id]{scroll-margin-top:calc(var(--top-h) + 12px)}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blobs i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.blobs i:nth-child(1){width:46vmax;height:46vmax;background:var(--blob1);top:-14vmax;left:-12vmax}
.blobs i:nth-child(2){width:38vmax;height:38vmax;background:var(--blob2);top:30vh;right:-14vmax}
.blobs i:nth-child(3){width:40vmax;height:40vmax;background:var(--blob3);bottom:-16vmax;left:20vw}
.glass{background:var(--glass);border:1px solid var(--glass-b);box-shadow:var(--sh);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--solid)}}
h1,h2,h3,.wordmark{font-family:var(--f-display)}
/* header */
.topbar{position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top,0);border-width:0 0 1px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1180px;margin:0 auto;padding:8px 20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:40px;height:40px;border-radius:12px;object-fit:cover}
.wordmark{font-weight:800;font-size:1.4rem;letter-spacing:.01em;color:var(--accent)}
.pills{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.pills::-webkit-scrollbar{display:none}
.pills-in{display:flex;gap:8px;max-width:1180px;margin:0 auto;padding:2px 20px 10px;width:max-content;min-width:100%}
.pill{flex:none;min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;border:1px solid var(--glass-b);background:var(--chip);color:var(--ink);font:600 .86rem var(--f-body);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.pill:hover{border-color:var(--accent)}
.pill.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:999px;border:2px solid transparent;font:700 .92rem var(--f-body);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.2)}
.btn:active{transform:scale(.97)}
.btn-wa{background:var(--wa);color:#fff}
.btn-ghost{background:var(--chip);color:var(--ink);border-color:var(--ink)}
/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding-top:34px;padding-bottom:10px}
.kicker{display:inline-block;padding:5px 14px;border-radius:999px;background:var(--chip);border:1px solid var(--glass-b);font-weight:600;font-size:.8rem;margin-bottom:14px}
h1{font-size:clamp(2.3rem,6vw,4.1rem);line-height:1.02;font-weight:800;letter-spacing:-.02em;max-width:12ch}
h1 em{font-style:normal;color:var(--accent)}
.lead{margin-top:14px;max-width:48ch;color:var(--muted);font-size:1.02rem}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px;padding:16px 18px;border-radius:var(--r)}
.facts span{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.facts b{font-size:.95rem}
.hero-img{aspect-ratio:16/9;border-radius:24px;overflow:hidden;box-shadow:var(--sh)}
.hero-img img{width:100%;height:100%;object-fit:cover}
/* sections + cards */
.block{padding-top:34px}
.sec-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.sec-head h2{font-size:1.5rem;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.count{color:var(--muted);font-size:.85rem;font-weight:500}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.card{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;transition:transform .2s}
.card:hover{transform:translateY(-3px)}
.ph{aspect-ratio:1/1;background:rgba(0,0,0,.08);position:relative}
.deal .ph{aspect-ratio:3/2}
.ph img{width:100%;height:100%;object-fit:cover}
.nophoto{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;font-weight:600;font-size:.82rem;color:var(--muted);background:linear-gradient(135deg,rgba(255,150,80,.25),rgba(255,200,80,.2));min-height:80px}
.body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.body h3{font-size:1.02rem;font-weight:700;line-height:1.25}
.body p{font-size:.84rem;color:var(--muted);line-height:1.4;flex:1}
.deal ul{list-style:none;font-size:.86rem;color:var(--muted);flex:1}
.deal li::before{content:"✓ ";color:var(--accent)}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px}
.price b{font-size:1.05rem;font-weight:800;color:var(--accent)}
.price small{font-size:.72rem;color:var(--muted)}
.price s{font-size:.78rem;color:var(--muted)}
.order{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:700 .85rem var(--f-body);text-decoration:none;transition:filter .15s,transform .15s}
.order:hover{filter:brightness(1.08)}
.order:active{transform:scale(.96)}
.badge{position:absolute;top:10px;left:10px;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:.72rem;padding:4px 10px;border-radius:999px;z-index:2}
/* highlights */
.hl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.hl div{padding:20px;border-radius:var(--r);text-align:center}
.hl b{display:block;font:800 1.7rem var(--f-display);color:var(--accent)}
.hl span{font-size:.88rem;color:var(--muted)}
/* QR, map, cta */
.qr{display:flex;align-items:center;gap:28px;padding:24px;border-radius:24px;max-width:760px;margin:0 auto}
.qr-img{flex:none;width:200px;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#fff}
.qr-img img{width:100%;height:100%;object-fit:contain}
.qr-img .nophoto{color:#4a3b34}
.qr h2{font-size:1.5rem;margin-bottom:6px}
.qr p{color:var(--muted);margin-bottom:16px}
.map{display:grid;grid-template-columns:.9fr 1.1fr;border-radius:24px;overflow:hidden}
.map-info{padding:26px}
.map-info h2{font-size:1.5rem;margin-bottom:12px}
.map-info p{padding:10px 0;border-top:1px solid var(--glass-b)}
.map-info span{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.map-info .btn{margin-top:14px}
.map-frame{min-height:320px}
.map-frame iframe{width:100%;height:100%;min-height:320px;border:0;display:block}
.cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:28px 30px;border-radius:24px}
.cta h2{font-size:1.5rem}.cta p{color:var(--muted)}
.foot{margin-top:40px;padding:26px 20px 100px;text-align:center;font-size:.82rem;color:var(--muted)}
.float-wa{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom,0));z-index:60;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.float-wa svg{width:30px;height:30px}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:22px;padding-top:22px}
  .map{grid-template-columns:1fr}
  .qr{flex-direction:column;text-align:center}
}
@media (max-width:520px){
  .wrap,.nav{padding-left:14px;padding-right:14px}
  .pills-in{padding-left:14px;padding-right:14px}
  .facts{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .body{padding:10px 10px 12px}
  .foot-row{flex-direction:column;align-items:stretch}
  .order{width:100%}
  .cta{padding:22px 18px}
}
@media (prefers-reduced-motion:reduce){html,.pills{scroll-behavior:auto}*{transition:none!important}}

/* ===== Popular: continuous auto carousel ===== */
.sec-head .car-ctl{display:flex;gap:8px;margin-left:auto}
.icon{width:44px;height:44px;border-radius:50%;border:1px solid var(--glass-b);background:var(--chip);color:var(--ink);font:800 1.3rem/1 var(--f-body);cursor:pointer;display:grid;place-items:center;padding:0}
.icon:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
#pop-play{font-size:.8rem;letter-spacing:-1px}
.pop-view{overflow:hidden;padding:8px 4px 28px;margin:-8px -4px -14px;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.pop-view .track{display:flex;gap:16px;will-change:transform}
.pop-view .card{flex:0 0 min(260px,74vw)}
.pop-view .ph img{pointer-events:none;-webkit-user-drag:none}
/* solid cards inside the moving row: blur filters on moving cards make phones stutter */
.pop-view .card.glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--solid)}

/* ===== Mobile / touch polish ===== */
html{-webkit-text-size-adjust:100%}
@media (hover:none){.card:hover,.btn:hover{transform:none;box-shadow:var(--sh)}.btn:hover{box-shadow:none}}
.body h3{overflow-wrap:anywhere}
.body p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.deal ul{overflow-wrap:anywhere}
.wrap,.nav{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
@media (max-width:820px){.kicker{border-radius:14px}}
@media (max-width:520px){
  .wrap,.nav,.pills-in{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #deals-grid.grid{grid-template-columns:minmax(0,1fr)}
  .body p{-webkit-line-clamp:3}
  .sec-head{align-items:center}
  .sec-head .count{order:3;width:100%}
  .pop-view{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .nav .btn{padding:0 16px;font-size:.86rem}
  .wordmark{font-size:1.25rem}
}
@media (max-width:360px){.hero-copy .btn{width:100%}h1{font-size:2.1rem}}