/* ===========================================================
   ProductLab — components + sections styles
   =========================================================== */

/* ---------------- PHONE ---------------- */
.phone {
  position: relative;
  width: 312px;
  background: #05080f;
  border-radius: 46px;
  padding: 11px;
  box-shadow: 0 2px 0 2px #1a2138 inset, var(--shadow-lg);
}
.phone-notch {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 26px; background: #05080f; border-radius: 0 0 16px 16px; z-index: 5;
}
.phone-screen {
  position: relative;
  background: #131c33;
  border-radius: 36px;
  padding: 12px 12px 0;
  height: 638px;
  overflow: hidden;
  display: flex; flex-direction: column;
  --pa-card:#1e2945; --pa-card2:#27345a; --pa-teal:#34d6c6; --pa-muted:#8a97ba; --pa-line:#2a375c;
}
/* status bar */
.pa-status { display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:700; padding: 4px 8px 10px; color:#fff; }
.pa-status .dots { display:flex; gap:5px; align-items:center; }
/* top bar: avatar / play / balance */
.pa-top { display:flex; align-items:center; gap:8px; padding: 0 2px 12px; }
.pa-avatar { width:34px; height:34px; border-radius:50%; background:#33405f; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.pa-pill { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px; border-radius:999px; background:var(--pa-card); border:1px solid var(--pa-line); color:#fff; font-weight:700; font-size:14px; }
.pa-pill.play { margin-left:auto; }
.pa-pill .coin { width:18px; height:18px; border-radius:50%; background:linear-gradient(160deg,#ffe07a,#e8a900); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); flex-shrink:0; }
.pa-pill .joy { width:20px; height:20px; border-radius:50%; background:linear-gradient(160deg,#3a4a72,#202b49); display:inline-flex; align-items:center; justify-content:center; }
.pa-pill.bump { animation: paBump .6s var(--ease); }
@keyframes paBump { 0%{ transform:scale(1);} 35%{ transform:scale(1.09); box-shadow:0 0 0 4px rgba(52,214,198,.25);} 100%{ transform:scale(1);} }
/* promo banner */
.pa-promo { position:relative; flex-shrink:0; border-radius:18px; overflow:hidden; padding:16px 15px; background:linear-gradient(115deg, #0b59c4, #1f7fe0 70%); box-shadow: 0 8px 20px rgba(8,40,90,.4); }
.pa-promo h5 { font-family:var(--font-display); color:#fff; font-size:18px; line-height:1.05; letter-spacing:-.01em; max-width:58%; }
.pa-promo h5 b { color: var(--pa-teal); }
.pa-promo p { color:rgba(255,255,255,.82); font-size:11px; margin-top:3px; }
.pa-promo .cta { margin-top:11px; display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800; color:#fff; border:1.5px solid rgba(255,255,255,.5); border-radius:999px; padding:6px 13px; }
.pa-promo .bag { position:absolute; right:8px; top:50%; transform:translateY(-50%); }
.pa-promo .spark { position:absolute; color:#ffd84a; }
/* filter tabs */
.pa-filters { display:flex; gap:7px; margin:14px 0 4px; }
.pa-filter { flex:1; text-align:center; font-size:11.5px; font-weight:700; color:var(--pa-muted); background:transparent; border:1px solid transparent; border-radius:11px; padding:9px 4px; white-space:nowrap; }
.pa-filter.act { color:#fff; background:var(--pa-card2); }
/* section heading */
.pa-heading { display:flex; align-items:center; justify-content:space-between; margin:16px 2px 10px; }
.pa-heading h4 { font-family:var(--font-display); color:#fff; font-size:18px; }
.pa-heading .info { width:18px; height:18px; border-radius:50%; border:1.5px solid var(--pa-muted); color:var(--pa-muted); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
/* study list */
.pa-list { display:flex; flex-direction:column; gap:9px; overflow:hidden; }
.pa-study { display:flex; align-items:center; gap:12px; background:var(--pa-card); border-radius:14px; padding:13px 13px; transition: background .3s var(--ease); }
.pa-study.claimed { background:rgba(52,214,198,.10); }
.pa-study-left { width:74px; flex-shrink:0; display:flex; flex-direction:column; gap:2px; }
.pa-study-amt { font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--pa-teal); line-height:1.05; }
.pa-study-amt.label { font-size:14.5px; line-height:1.12; }
.pa-study-amt.small { font-size:14px; }
.pa-study-sub { font-size:10.5px; color:var(--pa-muted); }
.pa-study-name { flex:1; min-width:0; color:#fff; font-weight:700; font-size:13.5px; line-height:1.2; }
.pa-claim { flex-shrink:0; font-weight:800; font-size:12.5px; color:#cdd6ee; background:var(--pa-card2); border:none; border-radius:11px; padding:9px 15px; transition: background .2s, color .2s; }
.pa-claim.done { color:#062018; background:var(--pa-teal); display:inline-flex; align-items:center; gap:5px; }
/* bottom tabs */
.pa-tabs { margin-top:auto; display:flex; justify-content:space-around; align-items:center; gap:6px; margin:10px 4px; padding: 9px 8px calc(9px + env(safe-area-inset-bottom)); border-radius:999px; background:rgba(40,52,86,.55); backdrop-filter: blur(6px); border:1px solid var(--pa-line); }
.pa-tab { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; font-weight:700; color:var(--pa-muted); flex:1; }
.pa-tab.act { color:#fff; }
.pa-tab.act .pa-tab-ic { background:rgba(255,255,255,.10); }
.pa-tab-ic { width:30px; height:26px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; }

/* ---------------- NAV ---------------- */
.nav { position: sticky; top: 0; z-index: 50; transition: background .25s, box-shadow .25s, border-color .25s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(244,246,239,.82); backdrop-filter: blur(14px) saturate(1.3); border-bottom-color: var(--line); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.02em; }
.brand-mark { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; }
.brand-mark img { width:100%; height:100%; object-fit:contain; display:block; }
.footer a.footer-brand { display:flex; align-items:center; gap:10px; font-size:20px; padding:0; }
.footer a.footer-brand .brand-mark { width:40px; height:40px; }
.nav-links { display:flex; align-items:center; gap:30px; }
.nav-links a { font-size:15px; font-weight:600; color:var(--ink-2); transition:color .15s; }
.nav-links a:hover { color: var(--brand-deep); }
.nav-cta { display:flex; align-items:center; gap:14px; }
@media (max-width: 880px){ .nav-links { display:none; } }

/* ---------------- HERO ---------------- */
.hero { position: relative; overflow: hidden; padding: 56px 0 40px; }
.hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items:center; }
.hero h1 { font-size: clamp(40px, 5.6vw, 70px); line-height: .98; }
.hero h1 .hl { color: #137cde; position:relative; white-space:nowrap; }
.hero-sub { font-size: 19px; line-height:1.5; color: var(--ink-2); max-width: 33ch; margin: 22px 0 26px; }
.hero-proof { display:flex; gap: 26px; margin-top: 30px; flex-wrap:wrap; }
.hero-proof .stat .n { font-family:var(--font-display); font-weight:700; font-size: 28px; letter-spacing:-.02em; }
.hero-proof .stat .l { font-size: 13px; color: var(--ink-3); font-weight:600; }
.hero-phone-wrap { display:flex; justify-content:center; position:relative; }
.hero-blob { position:absolute; inset:-6% -10% -6% -6%; background: radial-gradient(60% 60% at 70% 30%, var(--green-200), transparent 70%); filter: blur(8px); z-index:0; }
.float-card { position:absolute; background:#fff; border:1px solid var(--line); border-radius:16px; padding:11px 13px; box-shadow: var(--shadow-md); display:flex; align-items:center; gap:10px; z-index:6; white-space:nowrap; }
.float-card .fc-ic { width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center; }
@media (max-width: 940px){
  .hero-grid { grid-template-columns: 1fr; gap: 12px; text-align:center; }
  .hero-sub { margin-left:auto; margin-right:auto; }
  .hero-proof { justify-content:center; }
  .hero-actions { justify-content:center; display:flex; }
  .hero-phone-wrap { margin-top: 22px; }
}

/* ---------------- TRUST STRIP ---------------- */
.trust { background: var(--ink); color: #cfe; padding: 22px 0; }
.trust-inner { display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.trust-item { display:flex; align-items:center; gap:13px; }
.trust-item:not(:last-child) { border-right: 1px solid var(--dark-line); }
.trust-ic { width:42px; height:42px; border-radius:12px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background: rgba(19,124,222,.14); border:1px solid var(--dark-line); }
.trust-tx { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.trust-tx b { color:#fff; font-family:var(--font-display); font-size:16px; }
.trust-tx span { color: var(--dark-ink-2); font-size:12.5px; }
@media (max-width: 820px){ .trust-inner { grid-template-columns: repeat(2,1fr); gap:18px 22px; } .trust-item:nth-child(2){ border-right:none; } }
@media (max-width: 460px){ .trust-inner { grid-template-columns: 1fr; } .trust-item { border-right:none !important; } }

/* ---------------- SECTION HEADERS ---------------- */
.sec-head { max-width: 660px; margin-bottom: 48px; }
.sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.sec-head h2 { font-size: clamp(32px, 4.2vw, 50px); line-height:1.02; margin: 12px 0 0; }
.sec-head p { font-size: 18px; color: var(--ink-2); margin-top: 16px; line-height:1.5; }

/* ---------------- HOW IT WORKS ---------------- */
.steps { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.step { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 28px; position:relative; transition: transform .2s var(--ease), box-shadow .2s; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step-n { position:absolute; top:20px; right:26px; font-family:var(--font-display); font-size:46px; font-weight:700; color:var(--green-100); letter-spacing:-.02em; line-height:1; pointer-events:none; }
.step-ic { width:56px; height:56px; border-radius:16px; background: var(--brand-soft); display:inline-flex; align-items:center; justify-content:center; margin: 0 0 18px; position:relative; }
.step h3 { font-size:22px; }
.step p { margin-top:10px; color:var(--ink-2); line-height:1.5; font-size:15.5px; }
.step-line { position:absolute; top: 56px; right: -22px; width: 22px; height:2px; background: var(--line-2); z-index:1; }
@media (max-width: 820px){ .steps { grid-template-columns:1fr; } .step-line{ display:none; } }

/* ---------------- WAYS TO EARN ---------------- */
.ways { display:grid; grid-template-columns: repeat(5,1fr); gap: 16px; align-items:stretch; }
.way { background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding: 22px; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; height:100%; display:flex; flex-direction:column; }
.way:hover { transform: translateY(-3px); border-color: var(--green-300); box-shadow: var(--shadow-sm); }
.way-ic { width:46px;height:46px;border-radius:13px;background:var(--brand-soft);display:inline-flex;align-items:center;justify-content:center; margin-bottom:14px;}
.way h4 { font-size:18px; }
.way p { font-size:14px; color:var(--ink-3); margin-top:7px; line-height:1.45; }
.way .way-amt { align-self:flex-start; margin-top:auto; font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:var(--brand-deep); background:var(--brand-soft); padding:3px 9px; border-radius:999px; }
@media (max-width: 1040px){ .ways { grid-template-columns: repeat(3,1fr);} }
@media (max-width: 720px){ .ways { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 460px){ .ways { grid-template-columns: 1fr;} }

/* ---------------- PROOF BAND ---------------- */
.proof { background: linear-gradient(150deg, var(--green-800), var(--brand-deep) 70%); color:#eafff5; border-radius: var(--r-xl); padding: 56px; position:relative; overflow:hidden; }
.proof-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; position:relative; z-index:2; }
.proof .p-stat .n { font-family:var(--font-display); font-weight:700; font-size: clamp(44px,6vw,72px); letter-spacing:-.03em; line-height:1; }
.proof .p-stat .l { font-size:16px; opacity:.85; margin-top:8px; }
.proof-glow { position:absolute; width:420px;height:420px; border-radius:50%; background: radial-gradient(circle, rgba(126,238,179,.3), transparent 70%); top:-160px; right:-80px; }
@media (max-width: 760px){ .proof { padding: 36px 26px; } .proof-grid { grid-template-columns:1fr; gap:26px; text-align:center;} }

/* ---------------- REVIEWS ---------------- */
.reviews { display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items:stretch; }
.review { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 24px; break-inside:avoid; height:100%; display:flex; flex-direction:column; }
.review-title { font-family:var(--font-display); font-weight:700; font-size:17px; margin: 10px 0 8px; }
.review p { color: var(--ink-2); line-height:1.55; font-size:15px; }
.review-by { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }
.review-by .h { font-weight:700; font-size:14px; }
@media (max-width: 880px){ .reviews { grid-template-columns:1fr; } }

/* ---------------- PRIVACY ---------------- */
.privacy { background: var(--cream-2); border-radius: var(--r-xl); padding: 56px; }
.privacy-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items:center; }
.privacy-points { display:flex; flex-direction:column; gap: 18px; margin-top: 26px; }
.pp { display:flex; gap: 14px; align-items:flex-start; }
.pp-ic { width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; }
.pp h4 { font-size:17px; }
.pp p { font-size:14.5px; color:var(--ink-2); margin-top:4px; line-height:1.45; }
.privacy-visual { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-md); }
@media (max-width: 880px){ .privacy { padding: 36px 26px;} .privacy-grid { grid-template-columns:1fr; gap:30px;} }

/* ---------------- BUSINESS (DARK) ---------------- */
.biz { background: var(--dark-bg); color: var(--dark-ink); position:relative; overflow:hidden; }
.biz::before { content:""; position:absolute; inset:0; background:
   radial-gradient(50% 50% at 85% 0%, rgba(10,157,99,.18), transparent 60%),
   linear-gradient(180deg, #08160e, var(--dark-bg)); }
.biz-grid-bg { position:absolute; inset:0; background-image: linear-gradient(var(--dark-line) 1px, transparent 1px), linear-gradient(90deg, var(--dark-line) 1px, transparent 1px); background-size: 56px 56px; opacity:.35; mask-image: radial-gradient(80% 60% at 50% 0%, #000, transparent 75%); }
.biz .wrap { position:relative; z-index:2; }
.biz-tag { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--green-300); background: rgba(10,157,99,.12); border:1px solid var(--dark-line); padding:7px 14px; border-radius:999px; }
.biz h2 { color:#fff; font-size: clamp(34px,4.6vw,56px); margin-top:20px; }
.biz-sub { font-size: 19px; color: var(--dark-ink); max-width: 60ch; margin-top:18px; line-height:1.5; }
.biz-stats { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin: 48px 0; }
.biz-stat { border:1px solid var(--dark-line); border-radius: var(--r-md); padding: 26px; background: rgba(12,31,22,.6); }
.biz-stat .n { font-family:var(--font-display); font-weight:700; font-size: clamp(34px,4vw,48px); color:#fff; letter-spacing:-.02em; }
.biz-stat .l { color: var(--dark-ink-2); margin-top:6px; font-size:14.5px; }
.biz-cols { display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.biz-card { border:1px solid var(--dark-line); border-radius: var(--r-lg); padding: 30px; background: rgba(12,31,22,.5); }
.biz-card .bc-ic { width:48px;height:48px;border-radius:13px;background:rgba(10,157,99,.15);border:1px solid var(--dark-line);display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px; }
.biz-card h3 { color:#fff; font-size:21px; }
.biz-card p { color: var(--dark-ink); margin-top:10px; line-height:1.55; font-size:15px; }
.biz-feeds { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.feed-chip { font-family:var(--font-mono); font-size:12.5px; color:var(--dark-ink); border:1px solid var(--dark-line); border-radius:999px; padding:6px 13px; background: rgba(255,255,255,.02); }
.biz-cta { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:46px; padding:30px 34px; border:1px solid var(--dark-line); border-radius: var(--r-lg); background: linear-gradient(120deg, rgba(10,157,99,.14), rgba(12,31,22,.4)); flex-wrap:wrap; }
.biz-cta h3 { color:#fff; font-size:24px; }
.biz-cta p { color: var(--dark-ink); margin-top:6px; }
@media (max-width: 820px){ .biz-stats { grid-template-columns:1fr; } .biz-cols { grid-template-columns:1fr; } }

/* ---------------- FINAL CTA ---------------- */
.final { text-align:center; }
.final-card { background: linear-gradient(160deg, var(--green-500), var(--brand-deep)); border-radius: var(--r-xl); padding: 64px 40px; color:#fff; position:relative; overflow:hidden; }
.final-card h2 { color:#fff; font-size: clamp(34px,5vw,58px); }
.final-card p { font-size:19px; opacity:.92; margin: 16px auto 30px; max-width: 46ch; }
.final-qr { width:120px; height:120px; border-radius:18px; background:#fff; padding:8px; box-shadow: var(--shadow-md); }
.final-qr img { width:100%; height:100%; object-fit:contain; display:block; border-radius:10px; }
.final-actions { display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; }
.final-glow { position:absolute; width:500px;height:500px;border-radius:50%; background: radial-gradient(circle, rgba(255,206,63,.25), transparent 65%); bottom:-260px; left:-120px; }

/* ---------------- FOOTER ---------------- */
.footer { background: var(--ink); color: var(--dark-ink); padding: 56px 0 30px; }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 30px; }
.footer h5 { color:#fff; font-family:var(--font-display); font-size:14px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:14px; }
.footer a { display:block; color:var(--dark-ink); font-size:14.5px; padding: 5px 0; transition: color .15s; }
.footer a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:44px; padding-top:24px; border-top:1px solid var(--dark-line); color: var(--dark-ink-2); font-size:13.5px; flex-wrap:wrap; gap:12px; }
.social-row { display:flex; gap:10px; margin-top:18px; }
.social-link { width:42px; height:42px; border-radius:12px; border:none; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:rgba(255,255,255,.07); transition: background .15s, transform .15s var(--ease); }
.social-link svg { width:20px; height:20px; display:block; }
.social-link:hover { background:var(--brand); transform:translateY(-2px); }
@media (max-width: 760px){ .footer-grid { grid-template-columns: 1fr 1fr; gap:26px;} }

/* floaty hero cards */
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }
@media (prefers-reduced-motion: reduce){ .float-card { animation: none !important; } }
body.hide-floaters .float-card { display: none; }
.store-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* single-column band: keep the floaters inside the viewport (inline styles need the !important) */
@media (max-width: 940px){
  .hero-phone-wrap .float-card { left: 4px !important; right: auto !important; }
  .hero-phone-wrap .float-card + .float-card { left: auto !important; right: 4px !important; }
}
@media (max-width: 520px){ .float-card { display:none; } }

/* QR pattern (simple css) */
.qr { display:block; width:100%; height:100%; border-radius:8px; background-color:#fff; background-image:
  linear-gradient(45deg,#0e1b14 25%, transparent 25%, transparent 75%, #0e1b14 75%),
  linear-gradient(45deg,#0e1b14 25%, transparent 25%, transparent 75%, #0e1b14 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; }