/* Layout: sticky app bar, one centered 1120px column; marketplace grid → profile with sticky package rail → checkout split → order stepper */
:root{
  --bg:#F4F6F2; --surface:#FFFFFF; --sunk:#EAEFEA; --ink:#10221F; --muted:#5A6B66; --line:#D9E1DC;
  --brand:#0B5D4B; --brand-ink:#FFFFFF; --brand-soft:#DCEFE8;
  --accent:#F2A93B; --accent-ink:#2B1A00; --accent-soft:#FCEBCB;
  --ok:#1F8A5B; --warn:#A86A12; --bad:#B93B33;
  --display:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r:14px; --shadow:0 1px 2px rgba(16,34,31,.06), 0 6px 24px rgba(16,34,31,.07);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0C1513; --surface:#13201D; --sunk:#0F1A18; --ink:#E6EFEB; --muted:#93A6A0; --line:#243530;
  --brand:#4CC2A0; --brand-ink:#04211A; --brand-soft:#173A31;
  --accent:#F4B451; --accent-ink:#2B1A00; --accent-soft:#3A2D16;
  --ok:#4CC28A; --warn:#E3A845; --bad:#EC7A70; --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.3); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0C1513; --surface:#13201D; --sunk:#0F1A18; --ink:#E6EFEB; --muted:#93A6A0; --line:#243530;
  --brand:#4CC2A0; --brand-ink:#04211A; --brand-soft:#173A31;
  --accent:#F4B451; --accent-ink:#2B1A00; --accent-soft:#3A2D16;
  --ok:#4CC28A; --warn:#E3A845; --bad:#EC7A70; --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.3); color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.01em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* App bar */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:12px;padding-block:10px;flex-wrap:wrap}
.logo{display:flex;align-items:baseline;gap:2px;font-family:var(--display);font-weight:800;font-size:22px;cursor:pointer;background:none;border:0;padding:0}
.logo b{color:var(--brand)} .logo i{font-style:normal;color:var(--accent);font-size:28px;line-height:0}
.bar nav{display:flex;gap:4px;margin-left:8px}
.bar .spacer{flex:1}
.seg{display:inline-flex;background:var(--sunk);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{border:0;background:none;padding:5px 12px;border-radius:999px;cursor:pointer;font-weight:600;font-size:13px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.navlink{border:0;background:none;padding:6px 10px;border-radius:8px;cursor:pointer;font-weight:600;color:var(--muted)}
.navlink[aria-current="page"]{color:var(--ink);background:var(--sunk)}
.rolebar{background:var(--brand-soft);font-size:13px}
.rolebar .wrap{display:flex;gap:10px;align-items:center;padding-block:6px;flex-wrap:wrap}

/* Buttons & fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--surface);padding:10px 16px;border-radius:10px;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.ghost{background:none;border-color:transparent}
.btn.danger{color:var(--bad)}
.btn.block{width:100%}
.btn.sm{padding:6px 10px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
label.f{display:grid;gap:6px;font-weight:600;font-size:13px}
.inp{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;font-weight:400;font-size:15px}
.inp:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}
textarea.inp{min-height:90px;resize:vertical}
.err{color:var(--bad);font-size:13px;font-weight:500}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.pill.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.pill.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.pill.bad{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.pill.brand{background:var(--brand-soft);color:var(--brand)}
.pill.acc{background:var(--accent-soft);color:var(--warn)}

main{padding-block:24px 64px}

/* Browse */
.hero{display:grid;gap:14px;padding-block:12px 20px}
.hero h1{font-size:clamp(30px,5vw,48px);font-weight:800;line-height:1.05;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--brand);background:linear-gradient(transparent 62%,var(--accent-soft) 62%)}
.hero p{margin:0;max-width:56ch;color:var(--muted);font-size:17px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
.step{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.step > span{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:700;font-family:var(--mono);font-size:13px}
.step b{display:block}
.step div span{display:block;font-size:13px}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px;margin-block:8px 18px}
.filters .search{flex:1 1 240px;position:relative}
.filters .search .inp{padding-left:38px}
.filters .search svg{position:absolute;left:12px;top:50%;translate:0 -50%;color:var(--muted)}
.filters select.inp{width:auto;flex:0 1 auto}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-weight:600;font-size:13px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.ccard{display:flex;flex-direction:column;overflow:hidden;cursor:pointer;transition:transform .15s, box-shadow .15s;text-align:left;padding:0;font:inherit}
.ccard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ccard .cover{height:118px;position:relative;display:flex;align-items:flex-end;padding:12px}
.ccard .cover .av{width:64px;height:64px;font-size:22px;border:3px solid var(--surface);margin-bottom:-40px}
.ccard .cover .plats{position:absolute;top:10px;right:10px;display:flex;gap:4px}
.ccard .body{padding:30px 14px 14px;display:grid;gap:8px;flex:1}
.ccard .name{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.2}
.ccard .meta{display:flex;gap:12px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.ccard .foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:10px 14px}
.ccard .from{font-size:12px;color:var(--muted)}
.ccard .from b{display:block;color:var(--ink);font-size:17px}
.av{border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--display);flex:none}
.plat{font-family:var(--mono);font-size:11px;font-weight:500;background:rgba(0,0,0,.35);color:#fff;padding:2px 6px;border-radius:6px}
.stars{color:var(--accent);letter-spacing:1px}
.empty{padding:40px;text-align:center;color:var(--muted)}

/* Profile */
.back{margin-bottom:14px}
.profile{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:24px;align-items:start}
.phead{overflow:hidden}
.phead .cover{height:150px}
.phead .inner{padding:0 20px 20px;display:grid;gap:12px}
.phead .av{width:96px;height:96px;font-size:34px;border:4px solid var(--surface);margin-top:-48px}
.phead h1{font-size:30px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stats div{background:var(--surface);padding:10px 12px}
.stats b{display:block;font-family:var(--mono);font-size:18px;font-weight:500}
.stats small{color:var(--muted);font-size:12px}
.section{display:grid;gap:12px;margin-top:22px}
.section h2{font-size:20px}
.port{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tile{aspect-ratio:9/14;max-width:100%;border-radius:12px;position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;cursor:pointer;border:0;text-align:left;font:inherit}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.65))}
.tile > *{position:relative;z-index:1}
.tile .play{position:absolute;top:50%;left:50%;translate:-50% -50%;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.25);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:1}
.tile b{font-size:14px;line-height:1.2}
.tile small{opacity:.85;font-size:12px}
.review{padding:14px;display:grid;gap:4px}
.rail{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);display:grid;gap:12px}
.pkgs{padding:16px;display:grid;gap:10px}
.pkg{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:1.5px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;background:var(--surface);text-align:left;font:inherit;width:100%}
.pkg[aria-checked="true"]{border-color:var(--brand);background:var(--brand-soft)}
.pkg .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center}
.pkg[aria-checked="true"] .dot{border-color:var(--brand)}
.pkg[aria-checked="true"] .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand)}
.pkg .t{font-weight:700}
.pkg .s{font-size:12px;color:var(--muted)}
.pkg .p{font-family:var(--mono);font-weight:500;text-align:right}
.pkg .save{display:block;font-family:var(--body);font-size:11px;color:var(--ok);font-weight:700}
.incl{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:14px}
.incl li{display:flex;gap:8px}
.incl li::before{content:"✓";color:var(--ok);font-weight:700}
.escrow{display:flex;gap:10px;padding:12px 14px;font-size:13px;background:var(--accent-soft);border-color:transparent}
.escrow svg{flex:none;color:var(--warn);margin-top:2px}

/* Checkout */
.checkout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.panel{padding:20px;display:grid;gap:16px}
.panel h2{font-size:19px}
.methods{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.method{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;background:var(--surface);text-align:left;font:inherit;display:grid;gap:2px}
.method[aria-checked="true"]{border-color:var(--brand);background:var(--brand-soft)}
.method b{font-size:14px} .method small{font-size:12px;color:var(--muted)}
.sum{display:grid;gap:8px;font-size:14px}
.sum .row{display:flex;justify-content:space-between;gap:12px}
.sum .row span:last-child{font-family:var(--mono)}
.sum .total{border-top:1px solid var(--line);padding-top:10px;font-weight:700;font-size:17px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Orders */
.olist{display:grid;gap:10px}
.orow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 14px;cursor:pointer;text-align:left;font:inherit;width:100%}
.orow:hover{border-color:var(--muted)}
.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:16px}
.st{display:grid;gap:6px;font-size:13px;color:var(--muted);font-weight:600}
.st i{height:6px;border-radius:3px;background:var(--line)}
.st.done i{background:var(--brand)} .st.done{color:var(--ink)}
.st.now i{background:var(--accent)} .st.now{color:var(--ink)}
.detail{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.msgs{display:grid;gap:8px;max-height:340px;overflow:auto;padding:4px}
.msg{max-width:80%;padding:8px 12px;border-radius:12px;background:var(--sunk);font-size:14px}
.msg.me{justify-self:end;background:var(--brand);color:var(--brand-ink)}
.msg small{display:block;opacity:.7;font-size:11px}
.log{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13px}
.log li{display:grid;grid-template-columns:auto 1fr;gap:10px}
.log time{font-family:var(--mono);color:var(--muted)}
.deliv{padding:14px;display:flex;gap:12px;align-items:center;background:var(--brand-soft);border-color:transparent;word-break:break-all}

/* Dashboards */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{padding:14px 16px}
.kpi small{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.kpi b{display:block;font-family:var(--mono);font-size:clamp(16px,4.2vw,22px);white-space:nowrap;font-weight:500;margin-top:4px}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td .inp{padding:7px 9px;font-size:14px;min-width:80px}
.money-in{position:relative;display:inline-block}
.money-in span{position:absolute;left:9px;top:50%;translate:0 -50%;color:var(--muted);font-family:var(--mono);font-size:13px}
.money-in .inp{padding-left:22px;width:110px;font-family:var(--mono)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.head h1{font-size:28px}

/* Overlay & toast */
.overlay{position:fixed;inset:0;background:rgba(8,16,14,.55);display:grid;place-items:center;z-index:50;padding:16px}
.modal{background:var(--surface);border-radius:18px;padding:28px;max-width:380px;width:100%;text-align:center;display:grid;gap:10px;justify-items:center}
.spin{width:44px;height:44px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--brand);animation:spin 1s linear infinite}
@keyframes spin{to{rotate:360deg}}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));translate:-50% 0;background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:600;z-index:60;box-shadow:var(--shadow)}
footer{border-top:1px solid var(--line);padding-block:20px;font-size:13px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width:900px){
  .profile,.checkout,.detail{grid-template-columns:1fr}
  .rail{position:static}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .steps{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .bar nav{order:3;width:100%;margin-left:0}
  .orow{grid-template-columns:auto minmax(0,1fr);}
  .orow > :nth-child(3), .orow > :nth-child(4){grid-column:2}
  .two{grid-template-columns:1fr}
  .stepper{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Real app additions ---------- */
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;width:100%}
[hidden]{display:none!important}
img{max-width:100%}
a{color:var(--brand)}
.av{overflow:hidden;background-size:cover;background-position:center}
.av img,.cover img{width:100%;height:100%;object-fit:cover;display:block}
.ccard .cover,.phead .cover{background-size:cover;background-position:center}
.auth{max-width:440px;margin:24px auto;padding:24px;display:grid;gap:16px}
.auth h1{font-size:28px}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.role{border:1.5px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;background:var(--surface);text-align:left;font:inherit;display:grid;gap:2px}
.role[aria-checked="true"]{border-color:var(--brand);background:var(--brand-soft)}
.role b{font-size:15px}.role small{color:var(--muted);font-size:12px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.formgrid .full{grid-column:1/-1}
.checks{display:flex;flex-wrap:wrap;gap:6px}
.checks label{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-weight:600;font-size:13px;cursor:pointer}
.checks input{accent-color:var(--brand)}
.notice{padding:12px 14px;border-radius:12px;font-size:14px;display:flex;gap:10px;align-items:flex-start}
.notice.warn{background:var(--accent-soft)}
.notice.ok{background:var(--brand-soft)}
.notice.bad{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)}
.tile video,.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
a.tile{text-decoration:none}
.tile .rm{position:absolute;top:8px;right:8px;z-index:2;background:rgba(0,0,0,.55);color:#fff;border:0;border-radius:8px;padding:4px 8px;font-size:12px;cursor:pointer}
.loading{padding:60px 0;display:grid;place-items:center}
.starpick{display:flex;gap:4px}
.starpick button{border:0;background:none;font-size:28px;cursor:pointer;color:var(--line);padding:0 2px;line-height:1}
.starpick button.on{color:var(--accent)}
.imgpick{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.userchip{display:flex;gap:8px;align-items:center}
.lang-note{font-size:12px}
@media (max-width:620px){.formgrid{grid-template-columns:1fr}.roles{grid-template-columns:1fr}}
@media (max-width:620px){
  .bar .wrap{gap:8px}
  .logo{font-size:19px}
  .seg button{padding:5px 9px}
  #userbox .btn{padding:6px 8px}
}

/* Chat, help, safety */
.badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;font-family:var(--mono)}
.rules{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--muted);background:var(--sunk);border-radius:10px;padding:8px 10px}
.rules svg{flex:none;margin-top:1px}
.msg.flag{outline:1px dashed var(--warn)}
.msg .hidden-note{display:block;font-size:11px;opacity:.75;margin-top:2px}
.thread{display:grid;gap:12px;max-width:760px}
.thread .msgs{max-height:min(60vh,520px);min-height:200px}
.socials{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.social{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600;text-decoration:none;color:var(--ink)}
.social:hover{border-color:var(--muted)}
.social .plat{background:var(--ink);color:var(--bg)}
.verified{display:inline-flex;align-items:center;gap:4px;color:var(--brand);font-size:13px;font-weight:700}
.chatrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;text-decoration:none;color:inherit}
.chatrow .last{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team{background:var(--accent-soft)!important;color:var(--ink)!important}

/* ---------- Landing page (light: CSS-only motion, small lazy images) ---------- */
.lp{display:grid;gap:clamp(56px,9vw,104px);padding-block:8px 24px}
.lp section{display:grid;gap:20px}
.kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.lp h2{font-size:clamp(28px,4.4vw,44px);line-height:1.05;font-weight:800;max-width:20ch}
.lp .lead{margin:0;color:var(--muted);font-size:clamp(16px,2vw,19px);max-width:56ch}
.ctas{display:flex;gap:10px;flex-wrap:wrap}
.btn.lg{padding:14px 22px;font-size:16px;border-radius:12px}

.l-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(24px,5vw,56px)!important;padding-top:clamp(8px,3vw,28px)}
.l-hero h1{font-size:clamp(38px,6.6vw,74px);line-height:.98;font-weight:800;letter-spacing:-.025em}
.l-hero h1 .hl{color:var(--brand);position:relative;white-space:nowrap}
.l-hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.22em;background:var(--accent);opacity:.55;z-index:-1;border-radius:4px;transform-origin:left;animation:underline 1s .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes underline{from{transform:scaleX(0)}}
.trust{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);font-weight:600}
.trust span{display:inline-flex;gap:6px;align-items:center}
.trust span::before{content:"✓";color:var(--ok);font-weight:800}

.stage{position:relative;height:clamp(420px,52vw,560px)}
.phone{position:absolute;width:44%;aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:var(--sunk);box-shadow:0 20px 50px rgba(8,30,26,.28);border:5px solid var(--surface);animation:float 7s ease-in-out infinite}
.phone img{width:100%;height:100%;object-fit:cover;display:block}
.phone::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.phone .tag{position:absolute;left:10px;bottom:12px;z-index:1;color:#fff;font-weight:700;font-size:13px;display:flex;gap:6px;align-items:center}
.phone .tag::before{content:"";width:8px;height:8px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 0 3px rgba(255,77,109,.35)}
.phone.p1{left:2%;top:10%;transform:rotate(-7deg);animation-delay:-1s}
.phone.p2{left:30%;top:0;z-index:2;width:46%;animation-delay:-3s}
.phone.p3{right:0;top:16%;transform:rotate(7deg);animation-delay:-5s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}
.chip-float{position:absolute;z-index:3;background:var(--surface);color:var(--ink);border-radius:14px;padding:9px 13px;font-size:13px;font-weight:700;box-shadow:var(--shadow);display:flex;gap:8px;align-items:center;animation:pop .7s cubic-bezier(.2,.9,.3,1.3) both}
.chip-float i{font-style:normal;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:14px}
.chip-float.c1{left:-2%;bottom:14%;animation-delay:.7s}.chip-float.c1 i{background:var(--brand-soft);color:var(--brand)}
.chip-float.c2{right:-1%;top:4%;animation-delay:1s}.chip-float.c2 i{background:var(--accent-soft);color:var(--warn)}
.chip-float.c3{right:6%;bottom:4%;animation-delay:1.3s}.chip-float.c3 i{background:var(--brand-soft);color:var(--brand)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.9)}}

.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:14px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:36px;width:max-content;animation:slide 32s linear infinite}
.marquee span{font-family:var(--display);font-weight:800;font-size:clamp(20px,3vw,30px);color:var(--muted);white-space:nowrap}
.marquee span:nth-child(3n+1){color:var(--brand)}
.marquee span::after{content:"✦";margin-left:36px;color:var(--accent)}
@keyframes slide{to{transform:translateX(-50%)}}

.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.numbers div{background:var(--surface);padding:22px 20px;display:grid;gap:6px;align-content:start}
.numbers b{font-family:var(--display);font-size:clamp(34px,4.6vw,52px);line-height:1;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}
.numbers span{font-size:14px;color:var(--muted)}
.sources{font-size:12px;color:var(--muted);margin:0}
.sources a{color:inherit}

.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step3{padding:22px;display:grid;gap:10px;align-content:start}
.step3 .n{width:38px;height:38px;border-radius:12px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-family:var(--display);font-size:18px}
.step3 h3{font-size:20px}
.step3 p{margin:0;color:var(--muted)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.side{padding:clamp(20px,3vw,32px);display:grid;gap:14px;align-content:start;border-radius:22px}
.side.brands{background:var(--brand);color:var(--brand-ink);border:0}
.side.brands .muted,.side.brands li::before{color:inherit;opacity:.8}
.side h3{font-size:clamp(24px,3vw,32px)}
.side ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.side li{display:flex;gap:10px}
.side li::before{content:"→";font-weight:800;color:var(--brand)}
.side.brands .btn{background:var(--surface);color:var(--ink);border-color:transparent}

.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.gallery figure{margin:0;position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:var(--sunk)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;backdrop-filter:blur(4px)}

.paylist{display:flex;flex-wrap:wrap;gap:8px}
.paylist span{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px}
.safe3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.safe3 .card{padding:20px;display:grid;gap:8px;align-content:start}
.safe3 h3{font-size:18px}.safe3 p{margin:0;color:var(--muted);font-size:14px}

.faq{display:grid;gap:8px;max-width:820px}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:0 18px}
.faq summary{cursor:pointer;padding:16px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-size:22px;line-height:1;color:var(--brand);transition:rotate .2s}
.faq details[open] summary::after{rotate:45deg}
.faq details p{margin:0 0 16px;color:var(--muted)}

.final{background:var(--ink);color:var(--bg);border-radius:28px;padding:clamp(28px,6vw,64px);display:grid;gap:18px;justify-items:start;position:relative;overflow:hidden}
.final h2{color:var(--bg)}
.final .lead{color:var(--bg);opacity:.75}
.final::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:var(--accent);opacity:.9;animation:float 9s ease-in-out infinite}

/* Reveal on scroll — only when JS is running; content stays visible otherwise. */
.js-reveal [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js-reveal [data-reveal].in{opacity:1;transform:none}

@media (max-width:900px){
  .l-hero{grid-template-columns:1fr}
  .stage{height:min(118vw,520px);max-width:520px;width:100%;justify-self:center}
  .numbers{grid-template-columns:repeat(2,1fr)}
  .steps3,.split,.safe3{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .gallery figure:nth-child(n+4){display:none}
}
@media (max-width:520px){ .gallery{grid-template-columns:repeat(2,1fr)} .gallery figure:nth-child(n+3){display:none} .chip-float{font-size:12px;padding:7px 10px} }
@media (prefers-reduced-motion:reduce){.js-reveal [data-reveal]{opacity:1;transform:none}.marquee .track{animation:none}}