/* V5 - optimized + safe URLs + smoke cards */
:root{
  --bg:#0b0c0f; --card:#12141b; --muted:#a7b0c0; --text:#f3f6ff;
  --accent:#1fa97a; --gold:#c7a96b; --shadow:0 18px 60px rgba(0,0,0,.55);
  --r:18px;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family: system-ui,-apple-system,Segoe UI,Arial;
  background: radial-gradient(1200px 700px at 20% 0%, rgba(31,169,122,.12), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(199,169,107,.10), transparent 55%),
              var(--bg);
  color:var(--text); overflow-x:hidden;
}
a{color:inherit} .muted{color:var(--muted)}
.container{width:min(1100px,92vw); margin:0 auto}
.topbar{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background: rgba(8,10,14,.62);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 4vw;
}
.brand{display:flex; gap:10px; align-items:center; font-weight:800}
.logo-dot{width:12px; height:12px; border-radius:999px; background: radial-gradient(circle at 30% 30%, #fff, var(--accent));
  box-shadow:0 0 18px rgba(31,169,122,.6);}
.nav{display:flex; gap:14px; flex-wrap:wrap}
.nav a{text-decoration:none; padding:8px 10px; border-radius:12px; color:rgba(243,246,255,.82); transition:.2s}
.nav a:hover{background:rgba(255,255,255,.06)} .nav a.active{background:rgba(31,169,122,.14); border:1px solid rgba(31,169,122,.24); color:#eafff7}

.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  padding:14px 18px; border-radius:14px; min-height:48px;
  border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); color:var(--text);
  text-decoration:none; user-select:none; -webkit-tap-highlight-color:transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:active{transform: translateY(1px) scale(.99)}
.btn.primary{background: linear-gradient(135deg, rgba(31,169,122,.95), rgba(199,169,107,.55)); color:#07110c;
  border-color: rgba(31,169,122,.55); box-shadow: 0 10px 30px rgba(31,169,122,.18);}
.btn.ghost{background:transparent}
.btn-glow{position:absolute; inset:-2px; border-radius:16px; background: radial-gradient(600px 220px at 50% 0%, rgba(255,255,255,.55), transparent 55%);
  opacity:.12; pointer-events:none;}
.ripple{position:absolute; border-radius:999px; transform:scale(0); background: rgba(255,255,255,.35);
  animation:ripple .65s ease-out; pointer-events:none; mix-blend-mode:overlay;}
@keyframes ripple{to{transform:scale(2.6); opacity:0;}}

.section{padding:26px 0 36px} .section-title{margin:0 0 10px; font-size: clamp(22px,2.4vw,34px)}
.footer{padding:22px 0 30px; border-top:1px solid rgba(255,255,255,.06)} .footer-inner{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* AGE GATE */
.age{background: radial-gradient(1200px 650px at 20% 10%, rgba(31,169,122,.20), transparent 55%),
              radial-gradient(900px 600px at 80% 0%, rgba(199,169,107,.18), transparent 60%),
              #05060a;}
#particles{position:fixed; inset:0; width:100%; height:100%; z-index:0;}
.smoke-layer{position:fixed; inset:-40px; z-index:1; pointer-events:none;
  background: radial-gradient(800px 500px at 15% 30%, rgba(255,255,255,.10), transparent 60%),
              radial-gradient(600px 420px at 80% 40%, rgba(31,169,122,.10), transparent 60%),
              radial-gradient(700px 500px at 50% 85%, rgba(199,169,107,.10), transparent 62%);
  filter: blur(26px); mix-blend-mode: screen; animation: drift 10s ease-in-out infinite alternate;}
@keyframes drift{from{transform:translate3d(-18px,-10px,0) scale(1.05)} to{transform:translate3d(18px,12px,0) scale(1.08)}}
.gate{position:relative; z-index:2; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:18px 4vw;}
.gate-card{width:min(560px,96vw); background: linear-gradient(180deg, rgba(18,20,27,.92), rgba(10,12,16,.78));
  border:1px solid rgba(255,255,255,.10); border-radius: var(--r); box-shadow: var(--shadow); padding:22px 18px; text-align:center; position:relative; overflow:hidden;}
.gate-card:before{content:""; position:absolute; inset:-2px; background: radial-gradient(900px 260px at 50% 0%, rgba(31,169,122,.45), transparent 60%); opacity:.25; pointer-events:none;}
.badge{display:inline-flex; padding:6px 10px; border-radius:999px; font-weight:900; background: rgba(31,169,122,.16); border:1px solid rgba(31,169,122,.28); color:#d9fff1;}
.gate-card h1{margin:10px 0 6px; font-size: clamp(22px,3vw,34px)} .sub{margin:0 0 18px; color: rgba(243,246,255,.80);}
.btn-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;} .legal{margin:16px 0 0; font-size:12px; color: rgba(167,176,192,.85)}
.fade-out{animation: pageFade .38s ease forwards;} @keyframes pageFade{to{opacity:0;}}

/* HERO */
.hero{padding:46px 4vw 30px; min-height:56vh; display:flex; align-items:center; justify-content:center; position:relative;}
.hero-content{width:min(1000px,92vw); background: linear-gradient(180deg, rgba(18,20,27,.70), rgba(10,12,16,.28));
  border:1px solid rgba(255,255,255,.08); border-radius:26px; padding:28px 18px; box-shadow: var(--shadow); overflow:hidden;}
.hero-kicker{margin:0; color: rgba(199,169,107,.95); font-weight:900;}
.hero-title{margin:10px 0 10px; font-size: clamp(32px,4.5vw,54px);} .hero-sub{margin:0 0 18px; color: rgba(243,246,255,.82); line-height:1.5;}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap;}
.bullets{margin-top:18px; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px;}
.bullet{background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:10px 12px;}

/* Catalog */
.catalog-head{display:flex; justify-content:space-between; align-items:flex-end; gap:12px;}
.selected-pill{border-radius:999px; padding:10px 12px; background: rgba(31,169,122,.10); border:1px solid rgba(31,169,122,.22); font-weight:800; min-width:108px; text-align:center;}
.filters{position:sticky; top:56px; z-index:10; margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding:10px; border-radius:18px; background: rgba(8,10,14,.72); border:1px solid rgba(255,255,255,.07); backdrop-filter: blur(10px);}
.search{flex:1 1 180px; min-height:46px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); color: var(--text); padding:0 12px; outline:none;}
.search::placeholder{color: rgba(167,176,192,.85)}
.filter-buttons{display:flex; gap:8px; flex-wrap:wrap}
.chip{min-height:44px; padding:10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); cursor:pointer; transition:.18s}
.chip.active{background: rgba(31,169,122,.14); border-color: rgba(31,169,122,.28);}
.sort{min-height:46px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); color: var(--text); padding:0 10px; outline:none;}
.cat-title{display:flex; align-items:center; gap:10px; margin:18px 0 10px;} .cat-title h2{margin:0; font-size:22px}
.grid{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px;}
.card{position:relative; background: linear-gradient(180deg, rgba(18,20,27,.88), rgba(10,12,16,.35)); border:1px solid rgba(255,255,255,.08);
  border-radius:18px; overflow:hidden; box-shadow: 0 14px 50px rgba(0,0,0,.30); transform: translateY(8px); opacity:0; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;}
.card.show{transform:translateY(0); opacity:1}
.card:hover{transform: translateY(-2px) scale(1.01); box-shadow: 0 18px 60px rgba(0,0,0,.45); border-color: rgba(31,169,122,.22);}
.thumb{width:100%; aspect-ratio:1/1; background: rgba(255,255,255,.04); position:relative; overflow:hidden;}
.thumb img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.05);}
.card-body{padding:12px}
.name{font-weight:900; margin:0 0 8px}
.meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px}
.badge2{font-size:12px; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);}
.badge2.sativa{border-color: rgba(31,169,122,.25); background: rgba(31,169,122,.10)}
.badge2.indica{border-color: rgba(199,169,107,.25); background: rgba(199,169,107,.10)}
.badge2.hybrid{border-color: rgba(120,160,255,.22); background: rgba(120,160,255,.10)}

/* Card smoke */
.card .card-smoke{
  position:absolute; inset:-20%;
  background:
    radial-gradient(280px 180px at 20% 30%, rgba(255,255,255,.09), transparent 60%),
    radial-gradient(240px 160px at 70% 40%, rgba(31,169,122,.10), transparent 62%),
    radial-gradient(300px 200px at 50% 75%, rgba(199,169,107,.10), transparent 62%);
  filter: blur(18px);
  opacity:.16;
  transform: translate3d(-10px, 8px, 0) scale(1.06);
  transition: opacity .25s ease, transform .35s ease;
  pointer-events:none;
  mix-blend-mode: screen;
}
.card:hover .card-smoke{opacity:.30; transform: translate3d(10px,-8px,0) scale(1.08)}
@media (hover:none){
  .card .card-smoke{opacity:.24}
}

.tag{
  position:absolute; top:10px; inset-inline-start:10px;
  padding:7px 10px; border-radius:999px;
  font-size:12px; font-weight:900;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
.tag.reco{border-color: rgba(31,169,122,.35); background: rgba(31,169,122,.14)}
.tag.strong{border-color: rgba(199,169,107,.35); background: rgba(199,169,107,.14)}
.tag.new{border-color: rgba(120,160,255,.35); background: rgba(120,160,255,.14)}

.card-actions{display:flex; gap:8px}
.card-actions .btn{flex:1; min-height:44px; padding:10px 12px; border-radius:14px}

/* Responsive */
@media (max-width:980px){.grid{grid-template-columns: repeat(3, minmax(0,1fr))} .bullets{grid-template-columns:1fr}}
@media (max-width:640px){.grid{grid-template-columns: repeat(2, minmax(0,1fr))} .filters{top:54px}}

/* V7: animated smoke always (mobile too) */
@keyframes smokeFloat{
  0%{ transform: translate3d(-12px, 10px, 0) scale(1.06) rotate(-1deg); opacity:.20; }
  50%{ transform: translate3d(10px, -8px, 0) scale(1.08) rotate(1deg); opacity:.30; }
  100%{ transform: translate3d(-6px, 6px, 0) scale(1.07) rotate(-.5deg); opacity:.24; }
}
.card .card-smoke{
  animation: smokeFloat 6.5s ease-in-out infinite;
  opacity:.24;
}
.card:hover .card-smoke{opacity:.32;}

/* V8: strain detail page (clone style) */
.detail-wrap{
  width:min(980px,92vw); margin: 0 auto;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow:hidden;
}
.detail-head{
  display:grid;
  grid-template-columns: 1.4fr .9fr;
  gap:16px;
  padding:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.detail-title{margin:0; font-size:28px}
.detail-sub{margin:6px 0 0; color: rgba(243,246,255,.78)}
.rating-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px}
.stars{display:inline-flex; gap:2px; font-size:16px; letter-spacing:1px}
.stars .on{color: #ffd166}
.reviews-link{color: rgba(31,169,122,.95); text-decoration:none; font-weight:800}
.product-hero{
  display:flex; align-items:center; justify-content:center;
  border-radius:18px; border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  overflow:hidden;
}
.product-hero img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio: 16/10;
}
.detail-body{padding:18px}
.hr{height:1px; background: rgba(255,255,255,.07); margin:14px 0}
.kv{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.kv b{color: rgba(243,246,255,.92)}
.p{color: rgba(243,246,255,.80); line-height:1.75; margin:0}
.p + .p{margin-top:10px}
.origin{
  margin-top:10px;
  color: rgba(243,246,255,.78);
}
.origin a{color: rgba(120,160,255,.92); text-decoration:none; font-weight:900}
.icons-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
.icon-card{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  text-align:center;
}
.icon-label{margin-top:8px; font-weight:800; color: rgba(243,246,255,.86); font-size:13px}
.icon-emoji{font-size:20px}
.feature-list{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  margin-top:12px;
}
.feature-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.feature-item .left{display:flex; gap:10px; align-items:center}
.feature-item .emoji{font-size:18px}
.feature-item .txt{font-weight:800; color: rgba(243,246,255,.86)}
.review-box{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.review{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.review:last-child{border-bottom:none}
.review .name{margin:0; font-weight:900}
.review .meta{margin:2px 0 0; color: rgba(243,246,255,.70); font-size:12px}
.review .text{grid-column:1/-1; color: rgba(243,246,255,.80); margin:8px 0 0; line-height:1.6}
.review .stars{justify-self:end}
.cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
@media (max-width:820px){
  .detail-head{grid-template-columns: 1fr; }
  .icons-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}



/* =========================
   Gentleman center logo header (responsive)
   ========================= */

.topbar{ position: sticky; top:0; z-index: 999; }
.topbar-inner{
  max-width:1200px;
  margin:0 auto;
  padding:12px 16px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
}

.brand-slot{ justify-self:end; }
.nav-slot{ justify-self:start; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.brand-link{ display:flex; gap:10px; align-items:center; font-weight:900; }
.brand-text{ opacity:.92; }
.dot{ width:10px; height:10px; border-radius:50%; background: linear-gradient(135deg,#22c55e,#60a5fa); box-shadow:0 0 18px rgba(34,197,94,.35); }

.center-slot{ justify-self:center; }
.gentleman-logo{
  font-family: 'Cinzel','Playfair Display',serif;
  font-weight:800;
  letter-spacing:1px;
  font-size:18px;
  line-height:1;
  position:relative;
  display:inline-block;
  background: linear-gradient(90deg,#8b6a1f 0%,#f7d774 18%,#fff1b8 35%,#ffd27d 55%,#caa34d 72%,#f7d774 88%,#8b6a1f 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow: 0 0 14px rgba(255,215,120,.18), 0 0 2px rgba(255,215,120,.35);
  animation: goldShift 3.8s ease-in-out infinite, goldGlow 2.6s ease-in-out infinite;
}
.gentleman-logo::after{
  content:"";
  position:absolute;
  inset:-10px -22px;
  pointer-events:none;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 65%, transparent 100%);
  transform: translateX(-140%) skewX(-18deg);
  filter: blur(.6px);
  opacity:0;
  animation: shimmer 5.5s ease-in-out infinite;
}
.logo-enter{
  opacity:0;
  transform: translateY(-10px) scale(.98);
  animation: logoIn 650ms cubic-bezier(.2,.9,.2,1) 120ms forwards, goldShift 3.8s ease-in-out infinite, goldGlow 2.6s ease-in-out infinite;
}

/* Smoke overlay for header */
.smoke-header{ position:relative; overflow:hidden; }
.smoke-header::before,
.smoke-header::after{
  content:"";
  position:absolute;
  inset:-25%;
  pointer-events:none;
  background:
    radial-gradient(60% 40% at 20% 30%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(50% 35% at 70% 60%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(35% 25% at 55% 20%, rgba(255,255,255,.04), transparent 60%);
  animation: headerDrift 22s linear infinite;
  opacity:.55;
}
.smoke-header::after{
  animation-duration:34s;
  mix-blend-mode: screen;
  opacity:.42;
}
@keyframes headerDrift{ from{transform:translateX(-5%) translateY(2%)} to{transform:translateX(5%) translateY(-6%)} }

/* Responsive: keep logo visible on mobile */
@media (max-width: 700px){
  .topbar-inner{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand nav"
      "center center";
    row-gap:10px;
    padding:10px 12px;
  }
  .brand-slot{ grid-area: brand; justify-self:start; }
  .nav-slot{ grid-area: nav; justify-self:end; gap:10px; font-size:14px; }
  .center-slot{ grid-area: center; justify-self:center; }
  .gentleman-logo{ font-size:16px; }
}
@media (max-width: 420px){
  .nav-slot{ gap:8px; font-size:13px; }
  .gentleman-logo{ font-size:15px; letter-spacing:.8px; }
}

/* If reduced motion */
@media (prefers-reduced-motion: reduce){
  .gentleman-logo, .gentleman-logo::after, .logo-enter, .smoke-header::before, .smoke-header::after{
    animation:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}


@keyframes goldShift{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes goldGlow{ 0%,100%{text-shadow:0 0 10px rgba(255,215,120,.12),0 0 2px rgba(255,215,120,.30)} 50%{text-shadow:0 0 18px rgba(255,215,120,.26),0 0 3px rgba(255,215,120,.45)} }
@keyframes shimmer{ 0%,62%{opacity:0;transform:translateX(-140%) skewX(-18deg)} 70%{opacity:.7} 82%{opacity:0;transform:translateX(140%) skewX(-18deg)} 100%{opacity:0;transform:translateX(140%) skewX(-18deg)} }
@keyframes logoIn{ to{ opacity:1; transform: translateY(0) scale(1);} }


/* PWA install button */

.btn-gold{
  background: linear-gradient(135deg, #D4AF37, #B8860B);
  color: #111 !important;
  border: 1px solid rgba(255,255,255,0.20);
  font-weight: 800;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 10px 25px rgba(212,175,55,0.22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}
.btn-gold:active{ transform: scale(0.98); filter: brightness(0.98); }

.btn-gold::after{
  content:"";
  position:absolute;
  top:-30%;
  left:-60%;
  width:50%;
  height:160%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 45%, rgba(255,255,255,0) 100%);
  opacity:0;
}

.install-animate{
  animation: installIn .55s ease both;
}
.install-animate::after{
  animation: shimmer 1.2s ease .35s 1 both;
  opacity: 1;
}

@keyframes installIn{
  from{ opacity:0; transform: translateY(10px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes shimmer{
  from{ left:-60%; opacity:0; }
  10%{ opacity:1; }
  to{ left:120%; opacity:0; }
}

.ios-hint{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.25);
  font-size: 14px;
  line-height: 1.35;
}


/* Full-width install button row (spans the combined CTA width) */
.install-row{
  width: 100%;
  margin-top: 12px;
}
.install-row #installAppBtn{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 900;
}


/* FAQ Accordion (flashy + modern) */
.faq-wrap{
  padding: 28px 16px;
}
.faq-card{
  max-width: 980px;
  margin: 0 auto;
  border-radius: 22px;
  background: rgba(10,10,10,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  overflow: hidden;
  position: relative;
}
.faq-card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(600px 220px at 20% 0%, rgba(212,175,55,0.20), transparent 60%),
              radial-gradient(600px 220px at 80% 100%, rgba(68,180,120,0.16), transparent 60%);
  pointer-events:none;
}
.faq-head{
  padding: 22px 18px 10px;
  position: relative;
}
.faq-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(212,175,55,0.14);
  border: 1px solid rgba(212,175,55,0.28);
  font-weight: 900;
  letter-spacing: .2px;
}
.faq-title{
  margin: 12px 0 6px;
  font-size: 22px;
  font-weight: 1000;
}
.faq-sub{
  margin: 0 0 10px;
  opacity: .85;
  font-size: 14px;
  line-height: 1.4;
}

.faq{
  position: relative;
  padding: 10px 14px 18px;
}
.faq-item{
  margin: 12px 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.35);
  overflow: hidden;
  transform: translateZ(0);
}
.faq-q{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 16px 14px;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: right;
  position: relative;
}
.faq-q:after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background: linear-gradient(90deg, rgba(212,175,55,0.10), rgba(255,255,255,0.02), rgba(68,180,120,0.10));
  transition: opacity .22s ease;
}
.faq-q:hover:after{ opacity: 1; }

.faq-ico{
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: rgba(212,175,55,0.14);
  border: 1px solid rgba(212,175,55,0.22);
  flex: 0 0 34px;
  filter: drop-shadow(0 10px 18px rgba(212,175,55,0.10));
}
.faq-qtext{
  font-weight: 900;
  font-size: 16px;
  line-height: 1.2;
  z-index: 1;
}
.faq-plus{
  margin-right: auto;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  position: relative;
  z-index: 1;
}
.faq-plus:before,
.faq-plus:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 14px;
  height: 2px;
  background: rgba(255,255,255,0.9);
  transform: translate(-50%,-50%);
  transition: transform .22s ease, opacity .22s ease;
  border-radius: 2px;
}
.faq-plus:after{
  transform: translate(-50%,-50%) rotate(90deg);
  opacity: 1;
}

.faq-a{
  padding: 0 16px 16px;
  animation: faqDrop .26s ease both;
}
.faq-a p{
  margin: 0;
  opacity: .92;
  line-height: 1.55;
  font-size: 14px;
}

.faq-item.open{
  border-color: rgba(212,175,55,0.22);
  box-shadow: 0 16px 40px rgba(212,175,55,0.10);
}
.faq-item.open .faq-plus:after{
  opacity: 0; /* becomes minus */
}
.faq-item.open .faq-q:after{
  opacity: 1;
}

@keyframes faqDrop{
  from{ transform: translateY(-6px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}


/* FAQ style override: match site green CTA + larger readable typography */
.faq-title{ font-size: 26px !important; }
.faq-sub{ font-size: 16px !important; }

.faq-qtext{ font-size: 18px !important; }
.faq-a p{ font-size: 16px !important; line-height: 1.75 !important; }

/* Make the question row feel like a green CTA */
.faq-item{
  background: rgba(0,0,0,0.38) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.faq-q{
  padding: 18px 16px !important;
}
.faq-ico{
  background: rgba(68,180,120,0.16) !important;
  border-color: rgba(68,180,120,0.30) !important;
  filter: drop-shadow(0 12px 22px rgba(68,180,120,0.12)) !important;
}
.faq-q:after{
  background: linear-gradient(90deg,
    rgba(68,180,120,0.18),
    rgba(255,255,255,0.03),
    rgba(68,180,120,0.14)
  ) !important;
}

/* Replace plus button look to green */
.faq-plus{
  background: rgba(68,180,120,0.10) !important;
  border-color: rgba(68,180,120,0.22) !important;
}
.faq-plus:before,
.faq-plus:after{
  background: rgba(255,255,255,0.95) !important;
}

/* Open state: green glow (fits site CTA) */
.faq-item.open{
  border-color: rgba(68,180,120,0.34) !important;
  box-shadow: 0 18px 46px rgba(68,180,120,0.14) !important;
}
.faq-card:before{
  background: radial-gradient(700px 240px at 22% 0%, rgba(68,180,120,0.20), transparent 62%),
              radial-gradient(700px 240px at 78% 100%, rgba(68,180,120,0.16), transparent 62%) !important;
}

/* Better spacing on small screens */
@media (max-width: 520px){
  .faq-wrap{ padding: 22px 12px !important; }
  .faq-title{ font-size: 24px !important; }
  .faq-qtext{ font-size: 17px !important; }
  .faq-a p{ font-size: 15.5px !important; }
}


/* Subtle green flash sweep on open */
.faq-item.open .faq-q::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(68,180,120,0.18) 45%,
    rgba(68,180,120,0.35) 50%,
    rgba(68,180,120,0.18) 55%,
    transparent 100%
  );
  animation: faqFlash 0.7s ease-out;
  pointer-events:none;
}

@keyframes faqFlash{
  from{ opacity:0; transform: translateX(-30%); }
  40%{ opacity:1; }
  to{ opacity:0; transform: translateX(30%); }
}

/* Flash on close as well */
.faq-item.closing .faq-q::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(68,180,120,0.14) 45%,
    rgba(68,180,120,0.28) 50%,
    rgba(68,180,120,0.14) 55%,
    transparent 100%
  );
  animation: faqFlashClose 0.55s ease-out;
  pointer-events:none;
}

@keyframes faqFlashClose{
  from{ opacity:0; transform: translateX(20%); }
  40%{ opacity:1; }
  to{ opacity:0; transform: translateX(-20%); }
}


/* BOTTOM BAR (app-like, mobile-first) */
.nav-bottom{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(8,8,8,0.82);
  border-top: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
}
.b-btn{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 16px;
  text-decoration:none;
  color: inherit;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-weight: 900;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.b-ico{ font-size: 18px; }
.b-txt{ font-size: 12px; opacity: .92; }

.b-btn.active{
  background: rgba(68,180,120,0.18);
  border-color: rgba(68,180,120,0.35);
  box-shadow: 0 16px 44px rgba(68,180,120,0.14);
}
.b-btn:active{ transform: scale(0.98); }

@media (max-width: 900px){
  .nav-bottom{ display: grid; }
  body{ padding-bottom: 86px; } /* prevent content hiding behind bottom bar */
}

/* Hide top nav when bottom bar is used (optional) */
@media (max-width: 900px){
  .nav-top.hide-on-mobile{ display:none; }
}


/* TOP BAR (green pills) */
.nav-top{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(8,8,8,0.78);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}
.nav-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: inherit;
  font-weight: 1000;
}
.nav-logo{
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: rgba(68,180,120,0.16);
  border: 1px solid rgba(68,180,120,0.28);
  box-shadow: 0 14px 34px rgba(68,180,120,0.10);
}
.nav-name{ font-size: 16px; }

.nav-links{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration:none;
  color: inherit;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-weight: 900;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.nav-btn:hover{
  transform: translateY(-1px);
  background: rgba(68,180,120,0.10);
  border-color: rgba(68,180,120,0.18);
  box-shadow: 0 14px 36px rgba(68,180,120,0.10);
}
.nav-btn.active{
  background: rgba(68,180,120,0.18);
  border-color: rgba(68,180,120,0.35);
  box-shadow: 0 16px 44px rgba(68,180,120,0.14);
}
.n-ico{ font-size: 16px; }

@media (max-width: 520px){
  .nav-name{ display:none; }
  .nav-btn span:last-child{ display:none; } /* hide text on very small screens */
  .nav-btn{ padding: 10px 10px; }
}


/* Ensure TOP BAR is disabled completely */
.nav-top{ display: none !important; }


/* Logo-only top bar (desktop) */
.logo-only{
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 10px 14px;
  background: rgba(8,8,8,0.65);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}
.logo-only-link{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: inherit;
  font-weight: 1000;
}
.logo-only-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(68,180,120,0.9);
  box-shadow: 0 0 18px rgba(68,180,120,0.55);
}
.logo-only-text{
  font-size: 16px;
  letter-spacing: 0.2px;
}

/* Desktop CTA row (3 buttons) */
.cta-desktop-row{
  display: none;
  gap: 12px;
  margin-top: 14px;
}
.cta-desktop-row a{
  flex: 1 1 0;
}

/* show on desktop only */
@media (min-width: 901px){
  .cta-desktop-row{ display:flex; }
}

/* CTA button base */
.cta-pulse{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  text-decoration:none;
  color: #0b0b0b;
  font-weight: 1000;
  letter-spacing: .2px;
  overflow: hidden;
  transform: translateZ(0);
  box-shadow: 0 18px 44px rgba(0,0,0,0.35);
  transition: transform .18s ease, filter .18s ease;
}
.cta-pulse:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.cta-pulse:active{ transform: scale(0.99); }

.cta-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.25);
}

/* Colors: keep green for start, change others */
.cta-green{ background: linear-gradient(135deg, rgba(68,180,120,1), rgba(30,130,90,1)); }
.cta-blue{ background: linear-gradient(135deg, rgba(88,146,255,1), rgba(56,96,210,1)); color: #0b0b0b; }
.cta-purple{ background: linear-gradient(135deg, rgba(186,120,255,1), rgba(120,70,210,1)); color: #0b0b0b; }

/* Glow flashes */
.cta-pulse::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(260px 120px at 20% 0%, rgba(255,255,255,0.35), transparent 60%),
              radial-gradient(260px 120px at 80% 100%, rgba(255,255,255,0.20), transparent 60%);
  opacity: .85;
  pointer-events:none;
}
.cta-pulse::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,0.12) 45%,
    rgba(255,255,255,0.28) 50%,
    rgba(255,255,255,0.12) 55%,
    transparent 100%
  );
  transform: translateX(-35%);
  animation: ctaShine 2.4s ease-in-out infinite;
  pointer-events:none;
  opacity: .9;
}
@keyframes ctaShine{
  0%{ transform: translateX(-45%); opacity: .0; }
  20%{ opacity: .9; }
  55%{ transform: translateX(45%); opacity: .0; }
  100%{ transform: translateX(45%); opacity: 0; }
}

/* Hide legacy template top nav */
.nav{ display:none !important; }


/* Premium desktop CTA sizing + SVG icons */
@media (min-width: 901px){
  .premium-cta{
    display: flex !important;
    gap: 16px;
    margin-top: 16px;
  }
  .premium-cta .cta-pulse{
    min-height: 64px;
    font-size: 18px;
    padding: 18px 18px;
  }
  .premium-cta .cta-ico{
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
  }
  .premium-cta .cta-svg{
    width: 22px;
    height: 22px;
  }
}
.cta-svg{
  fill: none;
  stroke: rgba(10,10,10,0.92);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Make the shine a bit stronger on desktop */
@media (min-width: 901px){
  .cta-pulse::after{ opacity: 1; }
}
/* Hard-hide legacy template top nav/menu if any left */
.nav{ display:none !important; }


/* Premium icon set: consistent SVG + polished ring */
.premium-cta .cta-ico{
  position: relative;
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.premium-cta .cta-ico::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 16px;
  background: radial-gradient(22px 22px at 30% 20%, rgba(212,175,55,0.28), transparent 60%),
              radial-gradient(26px 26px at 70% 80%, rgba(68,180,120,0.26), transparent 62%);
  opacity: .9;
  pointer-events:none;
}

/* SVG uses currentColor so each button can tint its icon */
.cta-svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.25));
}

/* Button text stays dark, but icons get premium tinted per button */
.cta-green{ color: rgba(10,10,10,0.92); }
.cta-blue{ color: rgba(10,10,10,0.92); }
.cta-purple{ color: rgba(10,10,10,0.92); }

/* Tint only the icon (stroke) with a premium accent */
.cta-green .cta-svg{ color: rgba(212,175,55,0.95); }   /* gold */
.cta-blue .cta-svg{ color: rgba(255,255,255,0.95); }   /* clean white */
.cta-purple .cta-svg{ color: rgba(212,175,55,0.92); }  /* gold */


/* FIX: keep premium CTA as a single neat row on desktop */
@media (min-width: 901px){
  .premium-cta{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
  }
  .premium-cta .cta-pulse{
    width: 100%;
  }
}


/* Restore Add-to-Home bar to full width + good sizing */
.install-row{
  width: 100% !important;
  display: block !important;
  margin-top: 14px !important;
}
#installAppBtn, .install-row a, .install-row button{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 54px !important;
  border-radius: 18px !important;
  font-size: 16px !important;
  font-weight: 1000 !important;
}
.install-hint{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(68,180,120,0.12);
  border: 1px solid rgba(68,180,120,0.20);
  font-size: 14px;
  line-height: 1.4;
  opacity: .95;
}
.hero-sub{
  margin: 10px 0 0;
  opacity: .9;
  font-size: 15px;
  line-height: 1.5;
}


/* Ensure bottom bar always works */
.nav-bottom{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(8,8,8,0.82);
  border-top: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
}
.b-btn{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 16px;
  text-decoration:none;
  color: inherit;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-weight: 900;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.b-ico{ font-size: 18px; }
.b-txt{ font-size: 12px; opacity: .92; }
.b-btn.active{
  background: rgba(68,180,120,0.18);
  border-color: rgba(68,180,120,0.35);
  box-shadow: 0 16px 44px rgba(68,180,120,0.14);
}
body{ padding-bottom: 86px; }

/* Mobile CTA row under install bar (home) */
.cta-mobile-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.m-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 16px;
  text-decoration:none;
  font-weight: 1000;
  color: rgba(10,10,10,0.92);
  box-shadow: 0 14px 34px rgba(0,0,0,0.32);
}
.m-ico{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.25);
}
.m-green{ background: linear-gradient(135deg, rgba(68,180,120,1), rgba(30,130,90,1)); }
.m-blue{ background: linear-gradient(135deg, rgba(88,146,255,1), rgba(56,96,210,1)); }
.m-purple{ background: linear-gradient(135deg, rgba(186,120,255,1), rgba(120,70,210,1)); }

@media (min-width: 901px){
  .cta-mobile-row{ display: none; }
}


/* === CLEAN HOME (approved layout) === */
.home-wrap{max-width:1100px;margin:0 auto;padding:30px 16px 28px;}

.gentle-header{
  position: sticky; top: 0; z-index: 55;
  padding: 12px 16px;
  background: rgba(8,8,8,0.72);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  display:flex; justify-content:center;
}
.gentle-logo{
  position: relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 18px;
  border-radius: 18px;
  text-decoration:none;
  overflow:hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.gentle-logo-text{
  font-weight: 1000;
  font-size: 18px;
  letter-spacing: .3px;
  color: rgba(212,175,55,0.95);
  text-shadow: 0 10px 26px rgba(212,175,55,0.18);
}
.gentle-shine{
  position:absolute; inset:-40px;
  background: linear-gradient(120deg, transparent 0%, rgba(212,175,55,0.10) 40%, rgba(212,175,55,0.28) 50%, rgba(212,175,55,0.10) 60%, transparent 100%);
  transform: translateX(-60%);
  animation: logoShine 2.9s ease-in-out infinite;
  pointer-events:none;
  opacity: .95;
}
@keyframes logoShine{
  0%{ transform: translateX(-70%); opacity: .0; }
  18%{ opacity: .95; }
  55%{ transform: translateX(70%); opacity: .0; }
  100%{ transform: translateX(70%); opacity: 0; }
}

.hero-card{
  margin: 22px auto 16px;
  padding: 26px 22px;
  border-radius: 22px;
  background: rgba(10,10,12,0.75);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  text-align:center;
}
.hero-tag{font-weight:900;font-size:13px;opacity:.9;color:rgba(212,175,55,0.9);margin-bottom:8px;}
.hero-title{margin:0;font-size:clamp(40px,5vw,64px);font-weight:1000;letter-spacing:.2px;}
.hero-sub{margin:10px auto 0;max-width:760px;opacity:.9;font-size:15px;line-height:1.6;}

.cta-grid{
  display:grid; gap:14px; margin:14px auto;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px){ .cta-grid{ grid-template-columns: 1fr; } }

.cta-btn{
  position: relative;
  display:flex; align-items:center; justify-content:center;
  gap: 12px;
  padding: 18px 16px;
  border-radius: 20px;
  text-decoration:none;
  font-weight: 1000;
  color: rgba(10,10,10,0.92);
  overflow:hidden;
  box-shadow: 0 18px 46px rgba(0,0,0,0.35);
  transform: translateZ(0);
  transition: transform .18s ease, filter .18s ease;
}
.cta-btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.cta-btn:active{ transform: scale(0.99); }

.cta-ico-box{
  width: 46px; height: 46px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  position: relative;
}
.cta-ico-box::after{
  content:""; position:absolute; inset:-1px; border-radius: 18px;
  background: radial-gradient(22px 22px at 30% 20%, rgba(212,175,55,0.26), transparent 60%),
              radial-gradient(26px 26px at 70% 80%, rgba(68,180,120,0.24), transparent 62%);
  opacity: .95; pointer-events:none;
}
.cta-svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 10px 18px rgba(0,0,0,0.25));}

.cta-btn::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.10) 45%, rgba(255,255,255,0.26) 50%, rgba(255,255,255,0.10) 55%, transparent 100%);
  transform: translateX(-35%);
  animation: ctaShine 2.6s ease-in-out infinite;
  pointer-events:none;
  opacity:.9;
}
@keyframes ctaShine{
  0%{ transform: translateX(-45%); opacity: .0; }
  18%{ opacity: .9; }
  55%{ transform: translateX(45%); opacity: .0; }
  100%{ transform: translateX(45%); opacity: 0; }
}

.cta-green{ background: linear-gradient(135deg, rgba(68,180,120,1), rgba(30,130,90,1)); }
.cta-blue{ background: linear-gradient(135deg, rgba(88,146,255,1), rgba(56,96,210,1)); }
.cta-purple{ background: linear-gradient(135deg, rgba(186,120,255,1), rgba(120,70,210,1)); }
.cta-green .cta-svg{ color: rgba(212,175,55,0.95); }
.cta-blue .cta-svg{ color: rgba(255,255,255,0.95); }
.cta-purple .cta-svg{ color: rgba(212,175,55,0.92); }

.benefits{
  margin: 10px auto 14px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 900px){ .benefits{ grid-template-columns: 1fr; } }
.benefit{
  display:flex; align-items:center; justify-content: space-between;
  gap:10px;
  padding:14px 16px;
  border-radius:16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-weight:900;
}
.benefit .check{ width: 24px; text-align:center; }

.install-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  min-height: 56px;
  border-radius: 18px;
  font-weight: 1000;
  text-decoration:none;
  background: rgba(212,175,55,0.95);
  color: rgba(10,10,10,0.95);
  box-shadow: 0 18px 46px rgba(212,175,55,0.18);
}
.install-hint{
  margin-top:10px;
  padding:12px 14px;
  border-radius:16px;
  background: rgba(68,180,120,0.12);
  border: 1px solid rgba(68,180,120,0.20);
  font-size:14px;
  line-height:1.4;
  opacity:.95;
}


/* === FIXES v2 === */
/* Bigger logo block like orange box */
.gentle-logo{
  padding: 14px 34px !important;
  border-radius: 22px !important;
  min-width: 260px;
  justify-content: center;
}
.gentle-logo-text{
  font-size: 22px !important;
}
@media (max-width: 900px){
  .gentle-logo{
    min-width: 220px;
    padding: 14px 28px !important;
  }
  .gentle-logo-text{ font-size: 20px !important; }
}

/* Center text inside benefits pills (red box) */
.benefit{
  justify-content: center !important;
  text-align: center;
}
.benefit span{
  display:flex;
  align-items:center;
  justify-content:center;
}
.benefit .check{
  display:none; /* keep clean centered text like you want */
}


/* === Contact page tweaks (v2) === */
.page-contact .contact-title-center{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.page-contact .hours-card{
  margin-top: 16px;
  padding: 18px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.page-contact .hours-card h3{
  margin: 0 0 10px;
  font-weight: 1000;
  font-size: 18px;
}
.page-contact .hours-lines{
  display: grid;
  gap: 10px;
}
.page-contact .hours-line{
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.06);
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
}


/* Restore contact buttons */
.contact-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px auto 8px;
  max-width: 520px;
}
@media (max-width: 700px){
  .contact-actions{ grid-template-columns: 1fr; }
}
.contact-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px 18px;
  border-radius: 18px;
  font-weight: 1000;
  text-decoration:none;
  color: #0b0b0b;
}
.contact-btn.telegram{
  background: linear-gradient(135deg, #2AABEE, #1E96D4);
}
.contact-btn.whatsapp{
  background: linear-gradient(135deg, #25D366, #1EBE57);
}


/* === Age verification polish (v5) === */
.page-age .age-card{
  animation: ageEnter .32s ease-out both;
}
@keyframes ageEnter{
  from{ opacity: 0; transform: translateY(10px) scale(0.99); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
.page-age .age-subtitle{
  margin: 10px auto 0;
  text-align: center;
  opacity: .9;
  line-height: 1.6;
  font-weight: 800;
}
.page-age .age-brandline{
  text-align:center;
  margin-top: 8px;
  font-size: 13px;
  opacity: .85;
  color: rgba(212,175,55,0.85);
}
.page-age .age-actions{
  display:flex;
  gap: 12px;
  justify-content:center;
  align-items:center;
  margin-top: 16px;
  flex-wrap: wrap;
}
.page-age .age-btn{
  border: 0;
  cursor: pointer;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px 16px;
  border-radius: 18px;
  font-weight: 1000;
  min-width: 220px;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.page-age .age-yes{
  background: linear-gradient(135deg, rgba(68,180,120,1), rgba(30,130,90,1));
  color: rgba(10,10,10,0.92);
  box-shadow: 0 18px 46px rgba(68,180,120,0.22);
}
.page-age .age-yes:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.page-age .age-no{
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.10);
  opacity: .92;
  min-width: 180px;
}
.page-age .age-no:hover{ transform: translateY(-1px); opacity: 1; }
@media (max-width: 520px){
  .page-age .age-btn{ min-width: 100%; }
}
.page-age .age-privacy{
  margin-top: 14px;
  text-align:center;
  font-size: 12.5px;
  opacity: .86;
}


/* === Age verification polish (v6) === */
.page-age .age-card{ animation: ageEnter .32s ease-out both; }
@keyframes ageEnter{
  from{ opacity: 0; transform: translateY(10px) scale(0.99); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
.page-age .age-subtitle{
  margin: 10px auto 0;
  text-align: center;
  opacity: .9;
  line-height: 1.6;
  font-weight: 800;
}
.page-age .age-brandline{
  text-align:center;
  margin-top: 8px;
  font-size: 13px;
  opacity: .85;
  color: rgba(212,175,55,0.85);
}
.page-age .age-actions{
  display:flex;
  gap: 12px;
  justify-content:center;
  align-items:center;
  margin-top: 16px;
  flex-wrap: wrap;
}
.page-age .age-btn{
  border: 0;
  cursor: pointer;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px 16px;
  border-radius: 18px;
  font-weight: 1000;
  min-width: 220px;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.page-age .age-yes{
  background: linear-gradient(135deg, rgba(68,180,120,1), rgba(30,130,90,1));
  color: rgba(10,10,10,0.92);
  box-shadow: 0 18px 46px rgba(68,180,120,0.22);
}
.page-age .age-yes:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.page-age .age-no{
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.10);
  opacity: .92;
  min-width: 180px;
}
.page-age .age-no:hover{ transform: translateY(-1px); opacity: 1; }
@media (max-width: 520px){ .page-age .age-btn{ min-width: 100%; } }
.page-age .age-privacy{
  margin-top: 14px;
  text-align:center;
  font-size: 12.5px;
  opacity: .86;
}


/* === Age privacy pill (v7) === */
.page-age .age-privacy-pill{
  margin: 16px auto 0;
  padding: 12px 18px;
  max-width: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13.5px;
  font-weight: 900;
  color: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 46px rgba(0,0,0,0.28);
}
.page-age .age-privacy-pill .lock-icon{
  font-size: 15px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.25));
}


/* === Age privacy pill placement (v9) === */
.page-age .age-actions{
  display:flex;
  gap: 12px;
  justify-content:center;
  align-items:center;
  margin: 16px auto 0;
  flex-wrap: wrap;
}
.page-age .age-privacy-pill{
  margin: 14px auto 0;
  padding: 12px 18px;
  max-width: 520px;
  width: calc(100% - 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 13.5px;
  font-weight: 900;
  color: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 46px rgba(0,0,0,0.24);
  pointer-events: none;  /* not clickable */
  user-select: none;
}
.page-age .age-privacy-pill .lock-icon{
  font-size: 15px;
  opacity: .95;
}
@media (max-width: 520px){
  .page-age .age-privacy-pill{ width: calc(100% - 32px); }
}


/* === Catalog watermark + stronger badges (v10) === */

/* Scope to catalog & strain pages */
body.catalog, body.strain {
  --gold: rgba(212,175,55,0.95);
}

/* Ensure image wrappers are positioned */
.catalog img, .strain img,
.catalog .card, .strain .card,
.catalog figure, .strain figure {
  position: relative;
}

/* Watermark top-left */
.catalog img::after, .strain img::after {
  content: "הג׳נטלמן";
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 6;
  padding: 6px 10px;
  border-radius: 12px;
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: .2px;
  color: var(--gold);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
  pointer-events: none;
}

/* Fallback for wrappers */
.catalog .card::before, .strain .card::before,
.catalog figure::before, .strain figure::before {
  content: "הג׳נטלמן";
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 6;
  padding: 6px 10px;
  border-radius: 12px;
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: .2px;
  color: var(--gold);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
  pointer-events: none;
}

/* Strengthen existing badges: חזק / מומלץ / חדש */
.badge, .tag, .label {
  background: linear-gradient(135deg, rgba(0,0,0,0.65), rgba(0,0,0,0.35)) !important;
  color: var(--gold) !important;
  border: 1px solid rgba(212,175,55,0.45) !important;
  font-weight: 1000 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

/* Pulse for emphasis (very subtle) */
@keyframes badgePulse {
  0%,100% { box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
  50% { box-shadow: 0 14px 34px rgba(212,175,55,0.35); }
}
.badge.strong, .badge.featured, .badge.new {
  animation: badgePulse 2.8s ease-in-out infinite;
}

/* Mobile sizing */
@media (max-width: 520px){
  .catalog img::after, .strain img::after,
  .catalog .card::before, .strain .card::before {
    font-size: 11px;
    padding: 5px 8px;
  }
}


/* === Protected pages: disable selection (v14) === */
body.protected {
  -webkit-user-select: none;
  user-select: none;
}
body.protected img{
  -webkit-user-drag: none;
}