/* ==========================================================================
   Woguto — Public conversion landing page
   ==========================================================================
   HOW TO CUSTOMIZE (search for these markers):
   - Brand colors:     search "TOKENS" below
   - Real app URL:     search "APP_URL" in the script section
   - Campaign/product/idea data: search "MOCK DATA" in the script section
   - Logo images:      search "LOGO_ICON_BASE64" and "LOGO_FULL_BASE64" below
   ========================================================================== */

:root{
  /* ---------- TOKENS ---------- */
  --green-deep:   #0E4F33;
  --green-mid:    #16714A;
  --green-glow:   #2E9E6B;
  --brown-deep:   #3B2415;
  --brown-mid:    #5C3A22;
  --cream:        #FBF8F2;
  --paper:        #FFFFFF;
  --ink:          #1C1A16;
  --ink-soft:     #5B5548;
  --line:         #E7E1D4;
  --gold:         #C79A46;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(59,36,21,0.10);
  /* Display font echoes a bold geometric wordmark; accent font
     echoes the rounded "agencies" script under it. */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-accent:  'Baloo 2', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:78px;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;margin:0;letter-spacing:-0.01em;}
p{margin:0;}
button{font-family:inherit;border:none;cursor:pointer;background:none;}
:focus-visible{outline:3px solid var(--green-glow);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;}
}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px;}
.section{padding:56px 0;}
.section-tight{padding:40px 0;}

/* ---------- TOP UTILITY BAR ---------- */
.top-bar{background:var(--brown-deep);color:rgba(255,255,255,0.88);}
.top-bar-inner{display:flex;justify-content:flex-end;align-items:center;padding:6px 0;}
.top-bar-datetime{font-size:0.74rem;font-weight:600;letter-spacing:0.01em;font-family:var(--font-body);}
@media (max-width:480px){ .top-bar-datetime{font-size:0.68rem;} }

/* ---------- HEADER / NAVBAR ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(251,248,242,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-top:10px;padding-bottom:10px;
}
.brand-lockup{display:flex;align-items:center;gap:10px;}
.brand-lockup img{height:38px;width:auto;}
.brand-wordmark{display:flex;flex-direction:column;line-height:1;}
.brand-wordmark .name{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--brown-deep);letter-spacing:0.01em;}
.brand-wordmark .tag{font-family:var(--font-accent);font-weight:600;font-size:0.72rem;color:var(--green-deep);margin-top:1px;}

.main-nav{display:none;align-items:center;gap:26px;}
.main-nav a{font-size:0.9rem;font-weight:600;color:var(--ink-soft);}
.main-nav a:hover{color:var(--green-deep);}
@media (min-width:900px){ .main-nav{display:flex;} }

.header-actions{display:flex;align-items:center;gap:10px;}
.header-cta{
  background:var(--green-deep);color:#fff;
  padding:10px 16px;border-radius:100px;
  font-weight:600;font-size:0.82rem;white-space:nowrap;
}
.nav-toggle{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;
  border:1px solid var(--line);background:var(--paper);font-size:1.1rem;
}
@media (min-width:900px){ .nav-toggle{display:none;} }

.mobile-nav{
  display:none;flex-direction:column;
  border-top:1px solid var(--line);
  background:var(--paper);
  padding:10px 20px 16px;
}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:11px 0;font-weight:600;font-size:0.95rem;border-bottom:1px solid var(--line);color:var(--ink);}
.mobile-nav a:last-child{border-bottom:none;}
@media (min-width:900px){ .mobile-nav{display:none !important;} }

/* ---------- ACTIVITY TICKER ---------- */
.activity-ticker{background:var(--paper);border-bottom:1px solid var(--line);padding:9px 0;overflow:hidden;}
.activity-ticker .wrap{display:flex;align-items:center;gap:9px;font-size:0.82rem;color:var(--ink-soft);}
.activity-ticker .dot{width:7px;height:7px;border-radius:50%;background:var(--green-glow);flex:0 0 auto;animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
.activity-ticker #ticker-text{transition:opacity .35s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- HERO ---------- */
.hero{
  padding:44px 0 34px;
  background:
    radial-gradient(700px 340px at 85% -10%, rgba(46,158,107,0.20), transparent 60%),
    var(--cream);
}
.hero-eyebrow{
  display:inline-block;font-family:var(--font-accent);
  color:var(--green-mid);font-weight:600;font-size:0.92rem;margin-bottom:14px;
}
.hero h1{
  font-size:clamp(2.1rem, 7vw, 3.4rem);
  color:var(--brown-deep);font-weight:800;line-height:1.04;
}
.hero h1 em{font-style:normal;color:var(--green-deep);}
.hero-sub{margin-top:16px;font-size:1.08rem;color:var(--ink-soft);max-width:520px;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 24px;border-radius:100px;font-weight:600;font-size:0.95rem;
  transition:transform .15s ease, box-shadow .15s ease;font-family:var(--font-body);
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--green-deep);color:#fff;box-shadow:0 8px 20px rgba(14,79,51,0.28);}
.btn-primary:hover{background:var(--green-mid);}
.btn-secondary{background:var(--paper);color:var(--brown-deep);border:1.5px solid var(--line);}
.btn-secondary:hover{border-color:var(--brown-mid);}
.btn-ghost{background:transparent;color:var(--green-deep);border:1.5px solid var(--green-deep);}
.btn-lg{padding:17px 22px;font-size:1rem;}

.hero-stats{display:flex;gap:22px;margin-top:34px;flex-wrap:wrap;}
.hero-stats div{min-width:120px;}
.hero-stats strong{display:block;font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--brown-deep);}
.hero-stats span{font-size:0.82rem;color:var(--ink-soft);}

/* ---------- FEATURED SLIDER ---------- */
.slider{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow);height:280px;margin-top:10px;
}
@media (min-width:720px){ .slider{height:320px;} }
.slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .5s ease;
  display:flex;align-items:flex-end;
  background-size:cover;background-position:center;background-color:var(--green-deep);
  padding:26px;color:#fff;
}
.slide.active{opacity:1;visibility:visible;}
.slide::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top, rgba(20,14,8,0.82) 0%, rgba(20,14,8,0.25) 60%, rgba(20,14,8,0.15) 100%);
}
.slide .slide-inner{position:relative;z-index:1;max-width:520px;}
.slide .cat-pill{
  background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.3);
  display:inline-block;padding:5px 12px;border-radius:100px;font-size:0.72rem;font-weight:600;margin-bottom:10px;
}
.slide h3{font-size:clamp(1.3rem,4vw,1.8rem);color:#fff;}
.slide p{margin-top:8px;font-size:0.92rem;color:rgba(255,255,255,0.85);max-width:440px;}
.slide .btn{margin-top:14px;background:#fff;color:var(--green-deep);}
.slide-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.slide-actions .btn{margin-top:0;}
.slide-actions .btn-secondary{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.7);}
.slide-dots{
  position:absolute;bottom:16px;right:18px;display:flex;gap:6px;z-index:5;
}
.slide-dots button{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.5);padding:0;
}
.slide-dots button.active{background:#fff;width:20px;border-radius:100px;}

/* ---------- HOOK SECTION ---------- */
.hook{
  background:var(--brown-deep);color:#fff;border-radius:28px;
  padding:44px 28px;margin:8px 20px;text-align:left;
}
.hook .wrap{padding:0;max-width:640px;margin:0;}
.hook h2{font-size:clamp(1.6rem,5vw,2.3rem);color:#fff;}
.hook h2 .no{color:var(--green-glow);}
.hook p{margin-top:16px;color:rgba(255,255,255,0.82);font-size:1rem;max-width:480px;}

/* ---------- CATEGORY HOOK CHIPS ---------- */
.category-chip-row{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 10px;-ms-overflow-style:none;scrollbar-width:none;}
.category-chip-row::-webkit-scrollbar{display:none;}
.category-chip{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:16px 22px;min-width:90px;font-size:0.82rem;font-weight:600;color:var(--brown-deep);
  transition:transform .15s ease, border-color .15s ease;
}
.category-chip:hover{border-color:var(--green-deep);transform:translateY(-2px);}
.category-chip .emoji{font-size:1.6rem;}

/* ---------- SECTION HEADS ---------- */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(1.4rem,4vw,1.9rem);color:var(--brown-deep);}
.section-head p{color:var(--ink-soft);margin-top:6px;font-size:0.95rem;max-width:480px;}

/* ---------- FILTER TABS ---------- */
.filter-tabs{
  display:flex;gap:8px;overflow-x:auto;padding:2px 2px 14px;margin-bottom:6px;
  -ms-overflow-style:none;scrollbar-width:none;
}
.filter-tabs::-webkit-scrollbar{display:none;}
.filter-tab{
  flex:0 0 auto;padding:9px 16px;border-radius:100px;font-size:0.85rem;font-weight:600;
  background:var(--paper);border:1px solid var(--line);color:var(--ink-soft);white-space:nowrap;
}
.filter-tab.active{background:var(--green-deep);border-color:var(--green-deep);color:#fff;}

/* ---------- PAGINATION ---------- */
.pagination{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:28px;flex-wrap:wrap;}
.page-btn{
  min-width:38px;height:38px;padding:0 10px;border-radius:10px;
  border:1px solid var(--line);background:var(--paper);
  font-weight:600;font-size:0.85rem;color:var(--ink-soft);transition:background .15s ease;
}
.page-btn:hover:not(:disabled){border-color:var(--green-deep);color:var(--green-deep);}
.page-btn.active{background:var(--green-deep);color:#fff;border-color:var(--green-deep);}
.page-btn:disabled{opacity:0.35;cursor:default;}

/* ---------- GRID OF CARDS (magazine style) ---------- */
.op-listing-grid{display:grid;grid-template-columns:1fr;gap:18px;}
@media (min-width:640px){ .op-listing-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:980px){ .op-listing-grid{grid-template-columns:1fr 1fr 1fr;} }

.card{
  background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(59,36,21,0.05);
}
.card-media{
  height:170px;width:100%;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--green-deep),var(--green-mid));
}
.card-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.card-media::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top, rgba(20,14,8,0.55) 0%, rgba(20,14,8,0.05) 55%, transparent 75%);
}
.card-media .type-mark{position:absolute;bottom:10px;right:12px;font-size:1.3rem;opacity:0.85;z-index:2;}
.card-media .cat-badge{
  position:absolute;bottom:-1px;left:14px;transform:translateY(50%);z-index:2;
  background:var(--paper);color:var(--brown-deep);
  font-size:0.7rem;font-weight:700;padding:6px 12px;border-radius:100px;
  box-shadow:0 4px 10px rgba(0,0,0,0.12);
}
.card-media .locked-tag{
  position:absolute;top:12px;right:12px;z-index:2;
  background:rgba(255,255,255,0.94);color:var(--brown-deep);
  font-size:0.7rem;font-weight:700;padding:5px 9px;border-radius:100px;
}
.card-body{padding:16px 14px 14px;display:flex;flex-direction:column;gap:10px;flex:1;}
.card-body h3{font-size:1rem;color:var(--ink);font-weight:700;line-height:1.25;}
.card-stats{display:flex;gap:10px;font-size:0.78rem;color:var(--ink-soft);font-weight:600;}
.card-stats span{display:flex;align-items:center;gap:4px;}
.card-price{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--green-deep);}
.card-price .unit{font-family:var(--font-body);font-weight:600;font-size:0.72rem;color:var(--ink-soft);margin-left:5px;}
.card-actions{margin-top:auto;display:flex;gap:8px;}
.card-actions button{
  flex:1;border-radius:100px;font-weight:700;font-size:0.78rem;padding:10px 6px;
  text-align:center;transition:background .15s ease, border-color .15s ease;white-space:nowrap;
}
.btn-card-outline{background:transparent;border:1.5px solid var(--green-deep);color:var(--green-deep);}
.btn-card-outline:hover{background:rgba(14,79,51,0.07);}
.btn-card-solid{background:var(--green-deep);color:#fff;border:1.5px solid var(--green-deep);}
.btn-card-solid:hover{background:var(--green-mid);}

/* ---------- SHARE-FLOW MODAL ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:100;background:rgba(20,14,8,0.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .2s ease;
}
.modal-overlay.open{opacity:1;visibility:visible;}
.modal-box{
  background:var(--paper);border-radius:var(--radius-lg);padding:30px 26px;
  max-width:360px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.28);
  position:relative;
}
.modal-close{position:absolute;top:12px;right:14px;font-size:1.2rem;color:var(--ink-soft);line-height:1;padding:4px;}
.modal-spinner{
  width:38px;height:38px;border-radius:50%;margin:6px auto 18px;
  border:4px solid var(--line);border-top-color:var(--green-deep);
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.modal-box p.modal-msg{font-size:0.92rem;color:var(--ink-soft);}
.modal-box .lock-badge{width:46px;height:46px;border-radius:50%;background:var(--brown-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin:6px auto 14px;}
.modal-box h4{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--brown-deep);margin-bottom:8px;}
.modal-box .btn{margin-top:18px;width:100%;}

/* ---------- CAROUSEL (used for FOMO + Idea preview) ---------- */
.carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 14px;margin:0 -4px;-ms-overflow-style:none;scrollbar-width:none;}
.carousel::-webkit-scrollbar{display:none;}
.carousel .card{scroll-snap-align:start;flex:0 0 78%;max-width:300px;}
@media (min-width:640px){ .carousel .card{flex:0 0 320px;} }

/* ---------- 4-UP OPPORTUNITY GRID ---------- */
.op-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:640px){ .op-grid{grid-template-columns:1fr 1fr;} }
.op-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px;display:flex;gap:14px;align-items:flex-start;}
.op-card .ico{font-size:1.6rem;flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:var(--cream);display:flex;align-items:center;justify-content:center;}
.op-card h3{font-size:1.02rem;margin-bottom:4px;font-weight:700;}
.op-card p{font-size:0.87rem;color:var(--ink-soft);}

/* ---------- IDEA LAB ---------- */
.idea-lab{background:linear-gradient(160deg, var(--green-deep), #0A3A26);border-radius:28px;padding:44px 26px;margin:8px 20px;color:#fff;}
.idea-lab .wrap{padding:0;max-width:640px;margin:0;}
.idea-lab .tag{font-family:var(--font-accent);color:var(--green-glow);font-weight:600;font-size:0.85rem;letter-spacing:0.02em;}
.idea-lab h2{font-size:clamp(1.5rem,5vw,2.1rem);color:#fff;margin-top:10px;}
.idea-lab .prompt{margin-top:20px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);border-radius:var(--radius-md);padding:16px 18px;font-size:0.95rem;color:rgba(255,255,255,0.92);}
.idea-lab .btn-primary{background:#fff;color:var(--green-deep);margin-top:22px;}
.idea-lab .btn-primary:hover{background:var(--cream);}

/* ---------- TRUST / HOW IT WORKS ---------- */
.trust-steps{display:flex;flex-direction:column;gap:0;border-radius:var(--radius-lg);background:var(--paper);border:1px solid var(--line);overflow:hidden;}
.trust-step{display:flex;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line);align-items:flex-start;}
.trust-step:last-child{border-bottom:none;}
.trust-step .n{font-family:var(--font-display);font-weight:800;color:var(--green-deep);font-size:1.1rem;flex:0 0 28px;}
.trust-step h4{font-size:0.98rem;margin-bottom:3px;font-weight:700;}
.trust-step p{font-size:0.86rem;color:var(--ink-soft);}
.trust-note{margin-top:16px;font-size:0.82rem;color:var(--ink-soft);background:var(--cream);border:1px dashed var(--line);padding:12px 14px;border-radius:var(--radius-sm);}

/* ---------- TESTIMONIALS ---------- */
.testimonial-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:720px){ .testimonial-grid{grid-template-columns:1fr 1fr 1fr;} }
.testimonial-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px;display:flex;flex-direction:column;gap:12px;}
.testimonial-card .quote{font-size:0.92rem;color:var(--ink);line-height:1.55;}
.testimonial-card .who{display:flex;align-items:center;gap:10px;margin-top:auto;}
.testimonial-card .avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--green-deep),var(--green-mid));
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:0.85rem;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.testimonial-card .who strong{display:block;font-size:0.85rem;color:var(--ink);}
.testimonial-card .who span{display:block;font-size:0.76rem;color:var(--ink-soft);}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:10px;}
.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;}
.faq-item summary{
  padding:16px 18px;font-weight:600;font-size:0.95rem;cursor:pointer;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--brown-deep);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-size:1.2rem;color:var(--green-deep);flex:0 0 auto;}
.faq-item[open] summary::after{content:"−";}
.faq-item p{padding:0 18px 16px;margin:0;font-size:0.88rem;color:var(--ink-soft);}

/* ---------- LIVE TRANSACTIONS FEED ---------- */
.tx-feed{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
.tx-feed-header{
  display:flex;align-items:center;gap:8px;padding:14px 18px;
  border-bottom:1px solid var(--line);font-size:0.8rem;font-weight:700;color:var(--brown-deep);
  text-transform:uppercase;letter-spacing:0.03em;
}
.tx-feed-header .dot{width:7px;height:7px;border-radius:50%;background:var(--green-glow);animation:pulse 1.6s infinite;}
.tx-list{display:flex;flex-direction:column;}
.tx-row{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);transition:opacity .3s ease;}
.tx-row:last-child{border-bottom:none;}
.tx-logo{width:34px;height:34px;border-radius:10px;background:var(--cream);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden;}
.tx-logo img{width:100%;height:100%;object-fit:contain;padding:3px;}
.tx-main{flex:1;min-width:0;}
.tx-main .tx-name{font-size:0.9rem;font-weight:700;color:var(--ink);}
.tx-main .tx-phone{font-size:0.78rem;color:var(--ink-soft);font-family:monospace;}
.tx-side{text-align:right;flex:0 0 auto;}
.tx-side .tx-amount{font-family:var(--font-display);font-weight:800;font-size:0.95rem;color:var(--green-deep);}
.tx-side .tx-time{font-size:0.72rem;color:var(--ink-soft);}

/* ---------- FOOTER ---------- */
.footer-cta{text-align:center;padding:56px 20px 40px;}
.footer-cta h2{font-size:clamp(1.6rem,5vw,2.2rem);color:var(--brown-deep);max-width:520px;margin:0 auto;}
.footer-cta p{margin-top:12px;color:var(--ink-soft);}
.footer-cta .btn{margin-top:22px;}

.site-footer{background:var(--brown-deep);color:rgba(255,255,255,0.82);padding:48px 20px 20px;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:32px;}
@media (min-width:720px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;} }
.footer-brand img{height:40px;margin-bottom:12px;filter:brightness(0) invert(1);opacity:0.95;}
.footer-brand p{font-size:0.85rem;color:rgba(255,255,255,0.65);max-width:280px;}
.footer-col h5{font-family:var(--font-display);font-weight:700;font-size:0.9rem;color:#fff;margin-bottom:12px;}
.footer-col a{display:block;font-size:0.85rem;color:rgba(255,255,255,0.68);margin-bottom:9px;}
.footer-col a:hover{color:#fff;}
.footer-bottom{
  max-width:1120px;margin:34px auto 0;padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.14);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:0.78rem;color:rgba(255,255,255,0.55);
}

/* ---------- STICKY MOBILE CTA ---------- */
.mobile-sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--paper);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(0,0,0,0.08);}
.mobile-sticky .btn{width:100%;}

/* ---------- DETAIL PAGE ---------- */
#detail-view{display:none;}
#detail-view.active{display:block;}
#home-view.hidden{display:none;}
.detail-hero{height:230px;border-radius:var(--radius-lg);background-size:cover;background-position:center;background-color:var(--green-deep);display:flex;align-items:flex-end;padding:20px;color:#fff;position:relative;overflow:hidden;}
.detail-hero::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(to top, rgba(20,14,8,0.82) 0%, rgba(20,14,8,0.2) 65%, rgba(20,14,8,0.1) 100%);}
.detail-hero .cat-pill{position:absolute;top:16px;left:16px;z-index:1;background:rgba(0,0,0,0.3);padding:6px 12px;border-radius:100px;font-size:0.75rem;font-weight:600;}
.detail-hero h1{position:relative;z-index:1;font-size:clamp(1.5rem,5vw,2.1rem);color:#fff;}
.detail-back{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--green-deep);font-size:0.88rem;margin-bottom:16px;}
.detail-lede{font-size:1.02rem;color:var(--ink-soft);margin-top:18px;max-width:600px;}
.detail-meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px;}
@media(min-width:600px){ .detail-meta-grid{grid-template-columns:repeat(4,1fr);} }
.meta-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;}
.meta-box .label{font-size:0.72rem;color:var(--ink-soft);}
.meta-box .value{font-family:var(--font-display);font-weight:700;font-size:1.02rem;margin-top:4px;color:var(--brown-deep);}
.meta-box .value.green{color:var(--green-deep);}

.locked-panel{margin-top:28px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--paper);}
.locked-preview{position:relative;max-height:128px;overflow:hidden;padding:22px 22px 0;}
.locked-preview h3{font-size:1.05rem;margin-bottom:14px;font-weight:700;}
.locked-preview::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--paper) 88%);}
.locked-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.locked-list li{display:flex;gap:10px;align-items:flex-start;font-size:0.92rem;color:var(--ink-soft);}
.unlock-card{
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:8px 22px 26px;
}
.unlock-card .lock-badge{width:46px;height:46px;border-radius:50%;background:var(--brown-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-top:14px;}
.unlock-card h4{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--brown-deep);max-width:320px;}
.unlock-card p{font-size:0.86rem;color:var(--ink-soft);max-width:320px;}
.unlock-card .btn{margin-top:6px;}
.unlock-checklist{margin-top:4px;text-align:left;font-size:0.82rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:5px;}

.share-row{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap;}
.share-row .btn{font-size:0.86rem;padding:12px 18px;}