:root{
  --red:#c8102e; --red-dark:#a30d24; --navy:#15314b;
  --ink:#191f26; --muted:#6b7280; --line:#e7e9ee;
  --bg:#f6f7f9; --card:#ffffff;
  --shadow:0 1px 3px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06);
  --radius:18px;
  --safe-t:env(safe-area-inset-top); --safe-b:env(safe-area-inset-bottom);
  --safe-l:env(safe-area-inset-left); --safe-r:env(safe-area-inset-right);
  --header-h:64px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink);
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;
}
a{color:inherit;text-decoration:none;}
img{display:block;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  padding-top:var(--safe-t);
}
.header-inner{
  max-width:1500px; margin:0 auto;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 max(18px,var(--safe-l)) 0 max(18px,var(--safe-r));
  gap:16px;
}
.brand{display:flex; align-items:center; gap:11px;}
.brand .leaf{width:34px;height:34px;flex:none;}
.brand .leaf path{fill:var(--red);}
.brand-text{display:flex;flex-direction:column;line-height:1;}
.brand-name{font-weight:800;font-size:22px;letter-spacing:.06em;color:var(--ink);}
.brand-sub{font-size:9.5px;font-weight:700;letter-spacing:.22em;color:var(--muted);margin-top:3px;}
.header-actions{display:flex;align-items:center;gap:14px;}
.since{font-size:13px;color:var(--muted);font-weight:500;}
.call-btn{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--red);color:#fff;font-weight:700;font-size:15px;
  padding:10px 16px;border-radius:999px;
  box-shadow:0 4px 14px rgba(200,16,46,.28);
  transition:transform .12s ease, background .12s ease;
}
.call-btn:active{transform:scale(.96);background:var(--red-dark);}
.call-btn svg{width:18px;height:18px;fill:#fff;}
.install-btn{
  background:#fff;border:1.5px solid var(--line);color:var(--ink);
  font-weight:650;font-size:14px;padding:9px 14px;border-radius:999px;
}
.install-btn:active{background:var(--bg);}

/* ---------- Intro / hero ---------- */
.intro{max-width:1500px;margin:0 auto;padding:26px max(20px,var(--safe-l)) 6px;}
.intro h1{margin:0;font-size:32px;font-weight:800;letter-spacing:-.015em;line-height:1.08;}
.intro h1 .h1-sub{display:block;font-size:16px;font-weight:600;color:var(--red);letter-spacing:0;margin-top:6px;}
.intro .lead{margin:14px 0 0;color:#3b424c;font-size:16.5px;line-height:1.55;max-width:860px;}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 9px;margin:16px 0 0;padding:0;}
.trust li{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:650;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px 7px 11px;
}
.trust li::before{content:"";width:16px;height:16px;flex:none;border-radius:999px;background:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='black'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='black'/%3E%3C/svg%3E") center/13px no-repeat;}
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:20px 0 4px;}
.cta-primary{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--red);color:#fff;font-weight:750;font-size:16.5px;
  padding:14px 22px;border-radius:14px;
  box-shadow:0 6px 18px rgba(200,16,46,.30);
  transition:transform .12s ease, background .12s ease;
}
.cta-primary:active{transform:scale(.97);background:var(--red-dark);}
.cta-primary svg{width:20px;height:20px;fill:#fff;}
.cta-sub{color:var(--muted);font-size:14px;font-weight:500;}
@media (max-width:600px){
  .intro h1{font-size:27px;}
  .intro h1 .h1-sub{font-size:15px;}
  .intro .lead{font-size:15.5px;}
  .cta-primary{width:100%;justify-content:center;}
}

/* ---------- Intro (legacy) ---------- */

/* ---------- Filters ---------- */
.filters{
  position:sticky; top:calc(var(--header-h) + var(--safe-t)); z-index:30;
  background:linear-gradient(var(--bg) 70%, rgba(246,247,249,0));
  display:flex; gap:10px; overflow-x:auto; scrollbar-width:none;
  padding:14px max(20px,var(--safe-l)) 14px;
  max-width:1500px; margin:0 auto;
  -webkit-overflow-scrolling:touch;
}
.filters::-webkit-scrollbar{display:none;}
.chip{
  flex:none; display:inline-flex;align-items:center;gap:8px;
  background:var(--card); border:1.5px solid var(--line); color:var(--ink);
  font-weight:650; font-size:15px; padding:10px 16px; border-radius:999px;
  white-space:nowrap; transition:transform .1s ease, background .12s, border-color .12s;
}
.chip .n{font-size:12.5px;font-weight:700;color:var(--muted);
  background:var(--bg);padding:2px 8px;border-radius:999px;}
.chip svg{width:18px;height:18px;}
.chip:active{transform:scale(.96);}
.chip.active{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 4px 14px rgba(200,16,46,.24);}
.chip.active .n{background:rgba(255,255,255,.22);color:#fff;}
.chip.showcase.active{background:var(--navy);border-color:var(--navy);box-shadow:0 4px 14px rgba(21,49,75,.26);}

/* ---------- Grid (masonry) ---------- */
.grid{
  max-width:1500px;margin:0 auto;
  padding:6px max(14px,var(--safe-l)) 40px;
  column-gap:14px;
  columns:5;
}
@media (max-width:1400px){.grid{columns:4;}}
@media (max-width:1024px){.grid{columns:3;}}
@media (max-width:620px){.grid{columns:2;}}
.tile{
  position:relative; break-inside:avoid; margin-bottom:14px;
  border-radius:14px; overflow:hidden; background:var(--card);
  box-shadow:var(--shadow); content-visibility:auto;
  contain-intrinsic-size:280px;
  transition:transform .12s ease;
}
.tile:active{transform:scale(.985);}
.tile img{width:100%;height:auto;background:#eef0f3;}
.tile .fav-dot{
  position:absolute;top:9px;right:9px;width:30px;height:30px;border-radius:999px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s;
}
.tile .fav-dot svg{width:17px;height:17px;fill:#fff;stroke:var(--muted);stroke-width:1.6px;}
.tile.faved .fav-dot{opacity:1;}
.tile.faved .fav-dot svg{fill:var(--red);stroke:var(--red);}

/* ---------- Empty (showcase) ---------- */
.empty{max-width:600px;margin:60px auto;text-align:center;padding:0 24px;}
.empty p{font-size:18px;margin:6px 0;}
.empty .muted{color:var(--muted);font-size:15px;}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);background:#fff;
  padding:24px max(20px,var(--safe-l)) calc(104px + var(--safe-b));
  text-align:center;
}
.foot-brand{font-weight:800;font-size:17px;letter-spacing:.02em;}
.foot-brand .brand-name{color:var(--red);}
.foot-meta{margin-top:8px;color:var(--muted);font-size:14px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.foot-meta a{color:var(--red);font-weight:600;}

/* ---------- Floating call button ---------- */
.fab-call{
  position:fixed; z-index:60;
  left:50%; transform:translateX(-50%);
  bottom:calc(18px + var(--safe-b));
  display:inline-flex; align-items:center; gap:12px;
  background:var(--red); color:#fff;
  padding:15px 26px 15px 22px; border-radius:999px;
  box-shadow:0 8px 28px rgba(200,16,46,.42), 0 2px 6px rgba(0,0,0,.18);
  transition:transform .12s ease, background .12s ease;
  animation:fabIn .4s cubic-bezier(.2,.9,.3,1.2) both;
}
.fab-call:active{transform:translateX(-50%) scale(.95);background:var(--red-dark);}
.fab-call svg{width:26px;height:26px;fill:#fff;flex:none;}
.fab-text{display:flex;flex-direction:column;line-height:1.05;}
.fab-lead{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.9;}
.fab-num{font-size:19px;font-weight:800;letter-spacing:.01em;}
@keyframes fabIn{from{opacity:0;transform:translateX(-50%) translateY(20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.lightbox:not([hidden]) ~ .fab-call,
body:has(.lightbox:not([hidden])) .fab-call{display:none;}
@media (max-width:600px){
  .fab-call{padding:13px 22px 13px 18px;}
  .fab-num{font-size:17px;}
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100; background:#0b0d10;
  display:flex; align-items:center; justify-content:center;
  touch-action:none; user-select:none;-webkit-user-select:none;
}
.lb-stage{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.lb-img{
  max-width:100vw; max-height:100vh; width:auto; height:auto;
  object-fit:contain; will-change:transform;
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.lb-img.dragging{transition:none;}
.lb-bar{
  position:absolute;left:0;right:0;display:flex;align-items:center;gap:12px;
  padding:calc(12px + var(--safe-t)) max(16px,var(--safe-r)) 12px max(16px,var(--safe-l));
  z-index:2; pointer-events:none;
  transition:opacity .25s;
}
.lb-top{top:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));}
.lb-cat{color:#fff;font-weight:700;font-size:16px;letter-spacing:.01em;}
.lb-count{color:rgba(255,255,255,.7);font-size:14px;font-weight:600;}
.lb-top-actions{margin-left:auto;display:flex;gap:8px;pointer-events:auto;}
.lb-icon{
  width:44px;height:44px;border-radius:999px;color:#fff;
  background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;
  transition:background .12s, transform .1s;
}
.lb-icon:active{transform:scale(.92);background:rgba(255,255,255,.28);}
.lb-icon svg{width:23px;height:23px;fill:currentColor;}
.lb-icon#lbClose svg,.lb-nav svg{fill:none;}
.lb-icon.on{background:#fff;color:var(--red);}
.lb-icon.on svg{fill:var(--red);}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:54px;height:54px;border-radius:999px;color:#fff;
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .25s, background .12s;
}
.lb-nav:active{background:rgba(255,255,255,.26);}
.lb-nav svg{width:30px;height:30px;}
.lb-prev{left:max(12px,var(--safe-l));}
.lb-next{right:max(12px,var(--safe-r));}
.lightbox.ui-hidden .lb-bar,.lightbox.ui-hidden .lb-nav{opacity:0;pointer-events:none;}
.lightbox.playing .lb-nav{opacity:0;}

@media (hover:none){ .lb-nav{display:none;} }  /* touch devices use swipe */
@media (pointer:fine){ .tile:hover .fav-dot{opacity:1;} }

/* compact header on phones */
@media (max-width:600px){
  .since{display:none;}
  .header-inner{gap:10px;}
  .intro{padding-top:20px;}
  .intro h1{font-size:26px;}
}