:root{
  --bg:#0A0A0C; --bg2:#0E0E12; --surface:#14141B; --surface2:#1B1B24;
  --border:rgba(255,255,255,.07); --border2:rgba(255,255,255,.12);
  --text:#ECEDF1; --muted:#8A8B98; --faint:#5E5F6B;
  --accent:#2DD4A7; --accent-dim:#1c8f72; --gold:#E8B84B;
  --up:#37D399; --down:#F2585B; --keep:#8A8B98;
  --lim:#E4A72E; --rare:#E5484D; --sr:#3E7BFA; --unq:#CBB994;
  --radius:16px; --shadow:0 10px 40px rgba(0,0,0,.45);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 700px at 78% -12%, rgba(45,212,167,.10), transparent 60%),
    radial-gradient(1000px 600px at 8% 0%, rgba(124,92,255,.08), transparent 55%),
    var(--bg);
  color:var(--text); font-family:var(--font); -webkit-font-smoothing:antialiased;
  letter-spacing:.1px;
}
.hidden{display:none !important}
button{font-family:inherit;cursor:pointer}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#24242e;border-radius:8px}

/* Brand */
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:.2px}
.brand-logo{width:24px;height:24px;border-radius:7px;display:block}
.brand-mark{width:14px;height:14px;border-radius:50%;
  background:conic-gradient(from 210deg,var(--accent),var(--gold),var(--accent));
  box-shadow:0 0 18px rgba(45,212,167,.5)}

/* Gate */
.gate{min-height:100vh;display:grid;place-items:center;padding:24px}
.gate-card{width:100%;max-width:420px;background:linear-gradient(180deg,var(--surface),var(--bg2));
  border:1px solid var(--border);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.gate-sub{color:var(--muted);font-size:14px;line-height:1.6;margin:14px 0 22px}
.field{display:block;margin-bottom:16px}
.field span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:7px;letter-spacing:.3px}
.field input{width:100%;background:var(--bg);border:1px solid var(--border2);color:var(--text);
  border-radius:11px;padding:12px 14px;font-size:14px;outline:none;transition:border .15s,box-shadow .15s}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(45,212,167,.15)}
.field small{display:block;color:var(--faint);font-size:11.5px;margin-top:6px}
.btn-primary{width:100%;border:0;border-radius:11px;padding:13px;font-size:14.5px;font-weight:650;
  color:#04120d;background:linear-gradient(180deg,#43e6bb,var(--accent));
  box-shadow:0 8px 24px rgba(45,212,167,.28);transition:transform .12s,filter .12s}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.6;cursor:default}
.gate-msg{margin-top:14px;font-size:13px;min-height:18px}
.gate-msg.err{color:var(--down)}
.gate-note{color:var(--faint);font-size:11.5px;margin:18px 0 0;text-align:center}

/* Auth tabs + buttons */
.tabs{display:flex;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:4px;margin:18px 0 20px}
.tab{flex:1;background:transparent;border:0;color:var(--muted);border-radius:8px;padding:9px;font-size:13px;font-weight:600}
.tab.active{background:var(--surface2);color:var(--text)}
.or{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;margin:16px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--border)}
.btn-google{display:block;text-align:center;text-decoration:none;background:#fff;color:#1f1f1f;
  border-radius:11px;padding:12px;font-size:14px;font-weight:600;border:1px solid #dadce0}
.btn-google:hover{filter:brightness(.97)}
.btn-block{width:100%;margin-top:14px}

/* App shell */
.app{max-width:1320px;margin:0 auto;padding:0 22px 80px}
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:20px 2px;position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg,var(--bg) 60%,transparent);backdrop-filter:blur(6px)}
.topbar-right{display:flex;align-items:center;gap:10px}
.nick{color:var(--muted);font-size:13.5px;margin-right:6px}

/* Main navigation */
.mainnav{display:flex;gap:6px}
.navlink{background:transparent;border:0;color:var(--muted);font-size:14px;font-weight:600;
  padding:8px 14px;border-radius:9px;border-bottom:2px solid transparent}
.navlink:hover{color:var(--text)}
.navlink.active{color:var(--text);border-bottom-color:var(--accent)}
.view{animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Dashboard overview */
.overview{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.ov-card{background:linear-gradient(180deg,var(--surface),var(--bg2));border:1px solid var(--border);
  border-radius:18px;padding:16px 18px}
.ov-head{margin-bottom:10px}
.ov-title{font-size:13px;font-weight:700;letter-spacing:.3px}
.ov-title.up{color:var(--up)} .ov-title.down{color:var(--down)} .ov-title.gold{color:var(--gold)}
.ov-list{display:flex;flex-direction:column;gap:4px}
.ov-row{display:flex;align-items:center;gap:11px;padding:8px 8px;border-radius:11px;cursor:pointer;transition:background .12s}
.ov-row:hover{background:var(--surface2)}
.ov-img{width:34px;height:44px;object-fit:cover;object-position:center top;border-radius:6px;background:#0c0c11;flex:none}
.ov-name{flex:1;min-width:0}
.ov-player{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-club{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.ov-val{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
.ov-val.up{color:var(--up)} .ov-val.down{color:var(--down)}
.ov-sub{font-size:11px;font-weight:600}
.ov-note{color:var(--faint);font-size:11px;margin-top:10px}
.ov-empty{color:var(--faint);font-size:12.5px;padding:10px 4px}

/* My Cards header */
.cards-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(135deg,var(--surface),var(--bg2));border:1px solid var(--border);
  border-radius:18px;padding:18px 24px;margin:6px 0 18px}
.cards-total-num{font-size:32px;font-weight:740;margin-top:4px}

/* Season segmented control */
.seg{display:flex;gap:3px;background:var(--surface);border:1px solid var(--border2);border-radius:10px;padding:3px}
.segbtn{background:transparent;border:0;color:var(--muted);border-radius:8px;padding:7px 12px;font-size:12.5px}
.segbtn.active{background:var(--surface2);color:var(--text)}
.btn-ghost{background:var(--surface);border:1px solid var(--border2);color:var(--text);
  border-radius:10px;padding:8px 14px;font-size:13px;transition:background .15s,border .15s}
.btn-ghost:hover{background:var(--surface2);border-color:var(--accent)}

/* Hero */
.hero{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;
  background:linear-gradient(135deg,var(--surface),var(--bg2));
  border:1px solid var(--border);border-radius:22px;padding:26px 28px;margin:6px 0 16px;
  box-shadow:var(--shadow)}
.hero-label{color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:1.4px}
.hero-total{font-size:46px;font-weight:750;line-height:1.05;margin-top:8px;
  background:linear-gradient(90deg,#fff,#cfeee0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-meta{color:var(--muted);font-size:13.5px;margin-top:8px}
.rarity-chips{display:flex;flex-direction:column;gap:8px;min-width:220px}

/* Portfolio value tracker */
.tracker{background:linear-gradient(135deg,var(--surface),var(--bg2));border:1px solid var(--border);
  border-radius:20px;padding:20px 24px;margin:0 0 22px;box-shadow:var(--shadow)}
.tracker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.track-note{color:var(--muted);font-size:12.5px;margin-top:6px}
.range-tog{display:flex;gap:3px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:3px}
.rbtn{background:transparent;border:0;color:var(--muted);border-radius:7px;padding:6px 12px;font-size:12px}
.rbtn.active{background:var(--surface2);color:var(--text)}
.track-chart{position:relative}
.track-chart canvas{width:100%!important;height:230px!important;display:block}
.rchip{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:8px 12px;font-size:12.5px}
.rchip .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px}
.rchip .lbl{color:var(--muted)} .rchip .val{font-weight:650}

/* Value basis toggle */
.valtog2{display:inline-flex;gap:3px;margin-top:14px;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:3px}
.vbtn2{background:transparent;border:0;color:var(--muted);border-radius:7px;padding:6px 13px;font-size:12px}
.vbtn2.active{background:var(--surface2);color:var(--text)}

/* Controls */
.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.search{flex:1;min-width:220px;background:var(--surface);border:1px solid var(--border2);
  color:var(--text);border-radius:12px;padding:11px 15px;font-size:14px;outline:none}
.search:focus{border-color:var(--accent)}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--surface);border:1px solid var(--border2);color:var(--muted);
  border-radius:999px;padding:7px 13px;font-size:12.5px;transition:all .14s;user-select:none}
.chip:hover{color:var(--text)}
.chip.active{color:#06110d;font-weight:650;border-color:transparent}
.toggle{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;user-select:none;cursor:pointer}
.toggle input{accent-color:var(--accent);width:16px;height:16px}
.select{background:var(--surface);border:1px solid var(--border2);color:var(--text);
  border-radius:10px;padding:9px 12px;font-size:13px;outline:none}
.viewtog{display:flex;gap:3px;background:var(--surface);border:1px solid var(--border2);border-radius:10px;padding:3px}
.vbtn{background:transparent;border:0;color:var(--muted);border-radius:8px;padding:7px 13px;font-size:12.5px}
.vbtn.active{background:var(--surface2);color:var(--text)}

/* Banner + diagnose */
.banner{background:rgba(232,184,75,.10);border:1px solid rgba(232,184,75,.3);color:#f0d18f;
  border-radius:12px;padding:11px 15px;font-size:13px;margin-bottom:16px}
.diag-out{background:var(--surface);border:1px solid var(--border2);border-radius:14px;padding:16px;margin:0 0 18px}
.diag-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:10px}
.diag-out textarea{width:100%;height:300px;background:var(--bg);color:var(--text);border:1px solid var(--border);
  border-radius:10px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;padding:12px;resize:vertical}
.diag-note{color:var(--faint);font-size:11.5px;margin-top:8px}

/* Signal chips (BUY / SELL / KEEP) */
.sig{font-size:10.5px;font-weight:700;letter-spacing:.4px;border-radius:6px;padding:2px 7px;display:inline-block}
.sig-buy{color:#06110d;background:var(--up)}
.sig-sell{color:#160404;background:var(--down)}
.sig-keep{color:var(--text);background:var(--surface2);border:1px solid var(--border2)}

/* Grid cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:16px}
.card{background:linear-gradient(180deg,var(--surface),var(--bg2));border:1px solid var(--border);
  border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .16s,border-color .16s,box-shadow .16s;
  position:relative}
.card:hover{transform:translateY(-4px);border-color:var(--border2);box-shadow:0 16px 34px rgba(0,0,0,.5)}
.card-accent{position:absolute;top:0;left:0;right:0;height:3px}
.card-img{width:100%;aspect-ratio:5/7;object-fit:cover;object-position:center top;background:#0c0c11;display:block}
.card-body{padding:11px 12px 13px}
.card-name{font-size:13.5px;font-weight:640;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-club{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.card-row{display:flex;align-items:center;justify-content:space-between;margin-top:9px}
.card-sub{font-size:11px;color:var(--muted);margin-top:6px;display:flex;align-items:center;justify-content:space-between;gap:6px;white-space:nowrap;overflow:hidden}
.cs-muted{color:var(--faint)}
.card-floor{font-weight:700;font-size:14px}
.card-l5{font-size:11px;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:2px 7px}
.card-sig{flex:none}
.badge-in{position:absolute;top:9px;right:9px;background:rgba(45,212,167,.15);color:var(--accent);
  border:1px solid rgba(45,212,167,.35);border-radius:7px;font-size:10px;padding:2px 6px;font-weight:600}
.serial{position:absolute;top:9px;left:9px;background:rgba(0,0,0,.55);color:#dcdce4;border-radius:7px;
  font-size:10px;padding:2px 6px;backdrop-filter:blur(3px)}
.grid-more{color:var(--faint);font-size:12.5px;text-align:center;padding:22px}

/* Table view */
#tableWrap{width:100%;overflow-x:auto}
.ptable{width:100%;border-collapse:collapse;font-size:13.5px}
.ptable thead th{text-align:left;color:var(--muted);font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:.5px;padding:0 12px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.ptable th:nth-child(3),.ptable th:nth-child(4),.ptable th:nth-child(5){text-align:right}
.ptable th:nth-child(n+6){text-align:center}
.ptable tbody tr{border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.ptable tbody tr:hover{background:var(--surface)}
.ptable td{padding:9px 12px;vertical-align:middle}
.t-cimg{width:58px;position:relative}
.t-img{width:42px;aspect-ratio:5/7;object-fit:cover;object-position:center top;border-radius:6px;background:#0c0c11;display:block;margin-left:8px}
.t-acc{position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px}
.t-name{font-weight:600;font-size:14px;white-space:nowrap}
.t-sub{color:var(--muted);font-size:11.5px;margin-top:2px;white-space:nowrap}
.t-num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.t-sig{text-align:center;white-space:nowrap}
.t-sc,.t-ctr{text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.tmut{color:var(--faint)}
.t-in{color:var(--accent);font-weight:700}

/* Modal (wide card detail) */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(4,4,7,.72);backdrop-filter:blur(6px)}
.modal-card{position:relative;width:100%;background:linear-gradient(180deg,var(--surface),var(--bg2));
  border:1px solid var(--border2);border-radius:20px;box-shadow:var(--shadow);animation:pop .18s ease}
.modal-wide{max-width:1120px;max-height:92vh;overflow:auto;padding:26px 28px}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}}
.modal-close{position:absolute;top:14px;right:16px;background:transparent;border:0;color:var(--muted);
  font-size:26px;line-height:1;z-index:2}
.mw-grid{display:grid;grid-template-columns:236px 1fr 260px;gap:26px}

/* Left column */
.mw-left{display:flex;flex-direction:column;gap:14px}
.m-img{width:100%;aspect-ratio:5/7;object-fit:cover;object-position:center top;border-radius:14px;background:#0c0c11}
.m-price{background:var(--bg);border:1px solid var(--border);border-radius:13px;padding:12px 14px}
.m-primary{font-size:22px;font-weight:740}
.m-primary small{color:var(--muted);font-size:12px;font-weight:500;margin-left:6px}
.m-floorline{color:var(--muted);font-size:12.5px;margin-top:8px}
.m-floorline b{color:var(--text);font-weight:650}
.m-meta{background:var(--bg);border:1px solid var(--border);border-radius:13px;padding:6px 14px}
.mi{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.mi:last-child{border-bottom:0}
.mi-k{color:var(--muted)}
.mi-v{color:var(--text);font-weight:600;text-align:right}
.m-sorare{color:var(--accent);font-size:13px;text-decoration:none;font-weight:600}
.m-sorare:hover{text-decoration:underline}

/* Signal box */
.signal{border-radius:13px;padding:12px 14px;border:1px solid var(--border)}
.sig-box-buy{background:rgba(55,211,153,.10);border-color:rgba(55,211,153,.35)}
.sig-box-sell{background:rgba(242,88,91,.10);border-color:rgba(242,88,91,.35)}
.sig-box-keep{background:var(--bg)}
.sig-top{display:flex;align-items:center;justify-content:space-between}
.sig-tag{color:var(--faint);font-size:10px;text-transform:uppercase;letter-spacing:.6px}
.sig-why{color:var(--muted);font-size:12px;margin-top:8px;line-height:1.5}

/* Middle column */
.mw-mid{min-width:0}
.m-name{font-size:24px;font-weight:740;margin-bottom:14px}
.m-sec-title{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin:18px 0 8px}
.m-scores{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0}
.sbox{background:var(--bg);border:1px solid var(--border);border-radius:13px;padding:13px 14px}
.sbox .k{color:var(--muted);font-size:11px;letter-spacing:.6px}
.sbox .v{font-size:24px;font-weight:730;margin-top:5px}
.m-matches{margin-top:6px}
.match-bars{display:flex;align-items:flex-end;gap:4px;height:96px;margin-top:10px}
.mbar{flex:1;min-width:5px;height:100%;display:flex;align-items:flex-end;position:relative}
.mbar .fill{width:100%;border-radius:5px 5px 0 0;min-height:3px;transition:height .25s}
.mbar .lbl{position:absolute;top:-15px;left:0;right:0;text-align:center;font-size:9px;color:var(--faint)}
.m-chart-big{position:relative}
.m-chart-big canvas{width:100%!important;height:240px!important;display:block}
.m-note{color:var(--faint);font-size:12px;margin-top:8px}

/* Right column: recent sales list */
.mw-right{min-width:0}
.sales-list{display:flex;flex-direction:column;gap:6px;max-height:520px;overflow:auto;padding-right:4px}
.sl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 12px}
.sl-price{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px}
.sl-delta{font-size:11px;font-weight:600}
.sl-when{color:var(--muted);font-size:11px;text-align:right;white-space:nowrap}
.sl-empty{color:var(--faint);font-size:12.5px;padding:10px 2px}

@media(max-width:1000px){
  .mw-grid{grid-template-columns:1fr}
  .mw-left{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .mw-left .m-img{width:180px}
  .m-price,.signal{flex:1;min-width:200px}
  .sales-list{max-height:340px}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:16px}
  .rarity-chips{flex-direction:row;flex-wrap:wrap}
}

/* ---------- Landing page ---------- */
.landing{max-width:1180px;margin:0 auto;padding:0 22px 60px}
.landing-bar{margin-bottom:8px}
.landing-nav a{text-decoration:none}
.btn-slim{width:auto;padding:9px 18px;font-size:13px}
.btn-big{width:auto;padding:14px 28px;font-size:15px}

.lhero{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center;padding:64px 0 80px}
.lhero-text h1{font-size:clamp(34px,4.6vw,56px);font-weight:780;line-height:1.08;letter-spacing:-.5px;margin:0 0 20px}
.grad{background:linear-gradient(90deg,var(--accent),#7ee9c9);-webkit-background-clip:text;background-clip:text;color:transparent}
.lhero-sub{color:var(--muted);font-size:16.5px;line-height:1.7;max-width:560px;margin:0 0 28px}
.lhero-cta{display:flex;gap:14px;flex-wrap:wrap}
.lhero-note{color:var(--faint);font-size:12.5px;margin-top:16px}

.lhero-panel{display:flex;justify-content:center}
.lp-card{width:100%;max-width:340px;background:linear-gradient(160deg,var(--surface),var(--bg2));
  border:1px solid var(--border2);border-radius:22px;padding:26px 28px;box-shadow:var(--shadow);
  transform:rotate(1.5deg)}
.lp-total{font-size:40px;font-weight:760;margin-top:8px;
  background:linear-gradient(90deg,#fff,#cfeee0);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-delta{color:var(--up);font-size:13.5px;font-weight:650;margin-top:6px}
.lp-rows{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.lp-row{display:flex;align-items:center;justify-content:space-between;background:var(--bg);
  border:1px solid var(--border);border-radius:11px;padding:9px 13px;font-size:13px}
.lp-row span{color:var(--muted);display:flex;align-items:center}
.lp-row .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:9px}

.lsection{padding:56px 0}
.lsection h2{font-size:clamp(24px,3vw,34px);font-weight:740;letter-spacing:-.3px;margin:0 0 10px;text-align:center}
.lsection-sub{color:var(--muted);font-size:15px;text-align:center;margin:0 auto 40px;max-width:560px;line-height:1.6}
.lfeatures{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lfeat{background:linear-gradient(180deg,var(--surface),var(--bg2));border:1px solid var(--border);
  border-radius:18px;padding:24px;transition:transform .16s,border-color .16s}
.lfeat:hover{transform:translateY(-3px);border-color:var(--border2)}
.lfeat-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:19px;
  background:rgba(45,212,167,.12);color:var(--accent);border:1px solid rgba(45,212,167,.3);margin-bottom:16px}
.lfeat h3{font-size:16px;font-weight:700;margin:0 0 8px}
.lfeat p{color:var(--muted);font-size:13.5px;line-height:1.65;margin:0}

.lsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lstep{background:linear-gradient(180deg,var(--surface),var(--bg2));border:1px solid var(--border);
  border-radius:18px;padding:24px;position:relative}
.lstep-n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--accent);color:#04120d;font-weight:750;font-size:15px;margin-bottom:14px}
.lstep h3{font-size:15.5px;font-weight:700;margin:0 0 8px}
.lstep p{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0}
.lcta-end{display:flex;justify-content:center;margin-top:44px}

.lfooter{border-top:1px solid var(--border);margin-top:40px;padding:36px 0 10px;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.lfooter p{color:var(--faint);font-size:12px;line-height:1.7;max-width:640px;margin:0}

@media(max-width:900px){
  .lhero{grid-template-columns:1fr;gap:36px;padding:36px 0 48px}
  .lhero-panel{order:-1}
  .lfeatures,.lsteps{grid-template-columns:1fr}
  .landing-nav{display:none}
}

/* ---------- Auth as modal ---------- */
.gate-modal{position:fixed;inset:0;z-index:60;padding:20px}
.gate-backdrop{position:absolute;inset:0;background:rgba(4,4,7,.72);backdrop-filter:blur(6px)}
.gate-modal .gate-card{position:relative;animation:pop .18s ease}

/* ---------- Connect Sorare button (topbar) ---------- */
.btn-sorare{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#0b0b0f;
  border:1px solid #fff;border-radius:10px;padding:8px 15px;font-size:13px;font-weight:700;
  text-decoration:none;transition:filter .12s,transform .12s}
.btn-sorare:hover{filter:brightness(.9)}
.btn-sorare:active{transform:translateY(1px)}
.btn-sorare svg{fill:#0b0b0f;flex:none}
.btn-sorare-block{width:100%;justify-content:center;padding:12px;font-size:14.5px;margin-top:18px}

/* ---------- Demo mode ---------- */
.demo-pill{background:rgba(232,184,75,.14);color:var(--gold);border:1px solid rgba(232,184,75,.4);
  border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:4px 11px}

/* ---------- Image placeholders (initials) ---------- */
.ph{display:grid;place-items:center;background:linear-gradient(180deg,#15151d,#0c0c11)}
.ph span{color:var(--phc,var(--muted));font-weight:750;font-size:12px;letter-spacing:.5px;opacity:.9}
.ph-big span{font-size:34px}
.ov-img.ph span,.t-img.ph span{font-size:12px}
#mImgPh.ph-big{border-radius:14px;aspect-ratio:5/7;border:1px solid var(--border)}