/* Favezy marketing landing — section system matching Reoccurr's "Supreme" landing:
   alternating full-bleed light/dark/tinted sections, eyebrow + gradient headline + UI mockup each. */

.lp-sec { padding: 100px 24px; }
.lp-in { max-width: 1160px; margin: 0 auto; }
.lp-alt { background: var(--surface); }
.lp-green { background: var(--reward-soft); }
.lp-amber { background: var(--warning-soft); }
.lp-purple { background: var(--vip-soft); }
.lp-dark { --d-text:#F4EFE8; --d-mut:#B4AA9D; --d-bd:rgba(255,255,255,.09); --d-surf:#211C22; background:#17141A; color:var(--d-text); }

.lp-head { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.lp-head h2, .lp-h { font-family: var(--font-display); font-weight: 700; letter-spacing: -.028em; line-height: 1.06; }
.lp-head h2 { font-size: 46px; }
.lp-h { font-size: 46px; }
.lp-sub { font-size: 18px; color: var(--text-secondary); line-height: 1.5; margin-top: 18px; }
.lp-dark .lp-sub { color: var(--d-mut); }
.lp-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--brand-deep); background:var(--brand-soft); padding:6px 13px; border-radius:999px; margin-bottom:20px; }
.lp-dark .lp-eyebrow { background:rgba(255,107,90,.14); color:#FF8877; }
.lp-green .lp-eyebrow { color:var(--reward-deep); background:rgba(0,168,98,.12); }
.lp-amber .lp-eyebrow { color:var(--warning); background:rgba(184,134,11,.12); }
.lp-purple .lp-eyebrow { color:var(--vip); background:rgba(122,74,209,.12); }

.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.lp-split.rev .lp-copy { order: 2; }
@media (max-width: 860px){ .lp-split{ grid-template-columns:1fr; gap:36px; } .lp-split.rev .lp-copy{ order:0; } .lp-h{font-size:34px} .lp-head h2{font-size:34px} }
.lp-copy p.body { font-size: 16.5px; color: var(--text-secondary); line-height: 1.6; margin-top: 18px; }
.lp-dark .lp-copy p.body { color: var(--d-mut); }
.lp-checks { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.lp-checks li { display:flex; gap:10px; font-size:15px; align-items:flex-start; }
.lp-checks li svg { width:20px; height:20px; color:var(--reward-deep); flex:none; margin-top:1px; }

/* big confident marketing CTAs (Reoccurr "Supreme" scale) */
.cta .btn { height: 56px; padding: 0 32px; font-size: 16.5px; font-weight: 700; border-radius: 999px; }
.cta .btn-primary { box-shadow: 0 14px 34px rgba(225,75,61,.34); }
.cta .btn svg { width: 18px; height: 18px; }

/* mockup cards — airier, float more */
.mock { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 24px 56px -14px rgba(13,14,16,.12), 0 4px 12px rgba(13,14,16,.05); padding: 28px 30px; }
.lp-dark .mock { background: var(--d-surf); border-color: var(--d-bd); }
.mock-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.lp-dark .mock-row { border-color:var(--d-bd); }
.mock-row:last-child { border-bottom:none; }
.mini-ico { width:34px; height:34px; border-radius:9px; background:var(--brand-soft); color:var(--brand-deep); display:grid; place-items:center; flex:none; }
.mini-ico svg { width:17px; height:17px; }

/* hero */
.lp-hero { text-align:center; padding: 60px 24px 20px; position:relative; overflow:hidden; }
.lp-hero::before { content:""; position:absolute; inset:0; background:
  radial-gradient(680px 320px at 78% -6%, rgba(255,107,90,.14), transparent 60%),
  radial-gradient(600px 300px at 12% 4%, rgba(255,62,143,.10), transparent 58%),
  radial-gradient(700px 340px at 50% 120%, rgba(122,74,209,.08), transparent 60%);
  pointer-events:none; }
.lp-hero > * { position:relative; }
.lp-hero h1 { font-family:var(--font-display); font-weight:700; font-size:60px; line-height:1.03; letter-spacing:-.032em; max-width:820px; margin:0 auto; }
@media (max-width:640px){ .lp-hero h1{font-size:38px} }
.lp-hero .lp-sub { max-width:620px; margin:22px auto 0; font-size:19px; }
.cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }

.hero-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; max-width:864px; margin:64px auto 0; }
.hero-card { border-radius:22px; padding:24px; background:var(--surface); border:1px solid var(--border); box-shadow:0 24px 56px -14px rgba(13,14,16,.13), 0 4px 12px rgba(13,14,16,.05); text-align:left; }
.hero-card.up { transform:translateY(-18px); background:#211C22; border:none; color:#F4EFE8; }
@media (max-width:900px){
  .hero-cards { grid-template-columns:1fr; max-width:340px; gap:14px; }
  .hero-cards .hero-card.up { transform:none; }
}

/* hub diagram */
.hub { display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; max-width:940px; margin:0 auto; }
@media (max-width:760px){ .hub{ grid-template-columns:1fr 1fr; } .hub .hub-core{ grid-column:1 / -1; order:-1; } }
.hub-col { display:grid; gap:12px; }
.hub-chip { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); font-size:14px; font-weight:600; }
.hub-chip svg { width:18px; height:18px; color:var(--brand-deep); flex:none; }
.hub-core { width:132px; height:132px; border-radius:26px; background:linear-gradient(150deg,var(--brand),var(--brand-pink)); display:grid; place-items:center; color:var(--brand-ink); box-shadow:0 18px 40px rgba(255,107,90,.32); margin:0 auto; }
.hub-core svg { width:44px; height:44px; }

/* category tiles */
.cat-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; max-width:820px; margin:0 auto; }
@media (max-width:760px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:440px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
.cat { text-align:center; padding:18px 8px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); font-size:12.5px; font-weight:600; color:var(--text-secondary); }
.cat .ci { width:40px; height:40px; border-radius:11px; margin:0 auto 9px; background:var(--brand-soft); color:var(--brand-deep); display:grid; place-items:center; }
.cat .ci svg { width:20px; height:20px; }

/* branded trade illustrations */
.trade-band { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; max-width:900px; margin:0 auto 20px; }
@media (max-width:820px){ .trade-band{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:520px){ .trade-band{ grid-template-columns:repeat(2,1fr) } }
.trade-card { display:block; border-radius:16px; padding:16px 10px 12px; text-align:center; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s; }
a.trade-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.trade-band.six { grid-template-columns:repeat(6,1fr); }
@media (max-width:820px){ .trade-band.six{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:520px){ .trade-band.six{ grid-template-columns:repeat(2,1fr) } }
.trade-card svg { width:90px; height:90px; }
.trade-card span { display:block; font-weight:600; font-size:13px; margin-top:4px; color:#4A1B0C; }

/* how-it-works 4-step row */
.steps4 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:900px){ .steps4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .steps4 { grid-template-columns:1fr; } }
.card.step { text-align:left; }
.step-ill { width:88px; height:88px; border-radius:18px; display:grid; place-items:center; margin-bottom:15px; }
.step-ill svg { width:58px; height:58px; }
.step-k { font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-deep); margin-bottom:3px; }
.card.step h3 { margin:0 0 6px; }
.card.step p { font-size:14.5px; line-height:1.56; }

/* stat mini */
.mstat { background:var(--surface-2); border-radius:12px; padding:14px 16px; }
.lp-dark .mstat { background:rgba(255,255,255,.05); }
.mstat .l { font-size:12px; color:var(--text-secondary); }
.lp-dark .mstat .l { color:var(--d-mut); }
.mstat .v { font-family:var(--font-display); font-size:24px; font-weight:700; letter-spacing:-.02em; margin-top:3px; }

/* chat bubbles */
.bub { max-width:82%; padding:11px 14px; border-radius:14px; font-size:14px; line-height:1.45; }
.bub.ai { background:var(--brand-soft); color:var(--brand-ink); border-bottom-left-radius:4px; }
.lp-dark .bub.ai { background:rgba(255,107,90,.16); color:#FFD9D2; }
.bub.you { background:var(--surface-2); margin-left:auto; border-bottom-right-radius:4px; }
.lp-dark .bub.you { background:rgba(255,255,255,.07); color:var(--d-text); }

/* stars */
.stars { color:#F5A623; letter-spacing:2px; font-size:15px; }

/* "For your trade" nav dropdown (native <details>, works on touch + desktop) */
.nav-drop { position:relative; }
.nav-drop > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:600; color:var(--text-secondary); user-select:none; white-space:nowrap; }
.nd-short { display:none; }
.topbar .btn-sm { white-space:nowrap; flex:none; }
.nav-drop > summary::-webkit-details-marker { display:none; }
.nav-drop > summary::marker { content:""; }
.nav-drop > summary svg { transition:transform .18s; }
.nav-drop[open] > summary { color:var(--brand-deep); }
.nav-drop[open] > summary svg { transform:rotate(180deg); }
.nav-drop:not([open]) > .nav-drop-menu { display:none; }
.nav-drop-menu { position:absolute; top:calc(100% + 12px); right:0; z-index:60; width:372px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-md); padding:8px; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.nav-drop-menu a { display:block; padding:9px 11px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; }
.nav-drop-menu a:hover { background:var(--surface-2); color:var(--brand-deep); }
.nav-drop-menu a.nd-active { background:var(--brand-soft); color:var(--brand-deep); }
.nav-drop-menu .nd-all { grid-column:1 / -1; border-top:1px solid var(--border); margin-top:4px; padding-top:11px; color:var(--brand-deep); }
@media (max-width:560px){ .nav-drop-menu { position:fixed; top:58px; left:10px; right:10px; width:auto; max-height:72vh; overflow:auto; } .tb-cross { display:none; } .nd-long { display:none; } .nd-short { display:inline; } }

/* FAQ accordion (native <details>) */
.faq { max-width:768px; margin:0 auto; display:grid; gap:12px; }
.faq details { background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); }
.faq summary { list-style:none; cursor:pointer; padding:19px 22px; font-family:var(--font-display); font-weight:600; font-size:16.5px; letter-spacing:-.01em; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::marker { content:""; }
.faq .fq-chev { width:28px; height:28px; border-radius:50%; background:var(--brand-soft); color:var(--brand-deep); display:grid; place-items:center; flex:none; transition:transform .2s; }
.faq details[open] .fq-chev { transform:rotate(180deg); }
.faq details:not([open]) .fq-a { display:none; }
.faq .fq-a { padding:0 22px 20px; }
.faq .fq-a p { margin:0; color:var(--text-secondary); font-size:15.5px; line-height:1.6; }

/* POS / integrations tiles */
.pos-group-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-secondary); margin-bottom:12px; }
.pos-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.pos-tile { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 16px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:var(--shadow); font-family:var(--font-display); font-weight:600; font-size:15px; }
.pos-tile .st { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border-radius:999px; flex:none; }
.pos-tile .st.live { background:var(--reward-soft); color:var(--reward-deep); }
.pos-tile .st.soon { background:var(--surface-2); color:var(--text-secondary); }
.pos-tile.live { border-color:rgba(0,168,98,.25); }

/* footer */
.lp-foot { background:#17141A; color:#B4AA9D; padding:56px 24px 40px; }
.lp-foot a { color:#D9D0C5; }
.lp-foot-in { max-width:1080px; margin:0 auto; display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; align-items:flex-start; }
.lp-foot .cols { display:flex; gap:56px; flex-wrap:wrap; font-size:14px; }
.lp-foot .cols b { color:#F4EFE8; font-weight:600; display:block; margin-bottom:10px; font-size:13px; }
.lp-foot .cols a { display:block; margin-bottom:8px; }