/* =========================================================================
   HOMTLY — Design System
   "Know Your Home." — the intelligence + trust layer for residential property
   ========================================================================= */

:root {
  /* Brand */
  --brand:        #1d4ed8;   /* Homtly blue */
  --brand-600:    #2557d6;
  --brand-700:    #1a3fae;
  --brand-050:    #eef3ff;
  --brand-ink:    #10214a;

  --accent:       #0ea472;   /* verified / good — teal-green */
  --accent-050:   #e7f7f0;

  /* Semantic score colors */
  --good:         #0ea472;
  --ok:           #3f9d4f;
  --mid:          #e0a127;
  --warn:         #e2872b;
  --bad:          #e5484d;

  /* Neutrals */
  --ink:          #0f1b2d;
  --ink-2:        #38455a;
  --ink-3:        #6b7688;
  --line:         #e5e8f0;
  --line-2:       #eef1f6;
  --bg:           #f6f8fc;
  --bg-2:         #eef2f9;
  --card:         #ffffff;
  --card-2:       #fbfcfe;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(16,33,74,.06), 0 1px 3px rgba(16,33,74,.05);
  --shadow:    0 6px 20px -8px rgba(16,33,74,.18), 0 2px 6px -2px rgba(16,33,74,.08);
  --shadow-lg: 0 24px 60px -20px rgba(16,33,74,.30), 0 8px 24px -12px rgba(16,33,74,.16);
  --ring:      0 0 0 4px rgba(29,78,216,.14);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --maxw: 1120px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:      #6b8cff;
    --brand-600:  #6b8cff;
    --brand-700:  #93a9ff;
    --brand-050:  #16224a;
    --brand-ink:  #cdd8ff;
    --accent:     #2fd39a;
    --accent-050: #10362a;
    --good:#2fd39a; --ok:#5ec96f; --mid:#f2c24d; --warn:#f0a05a; --bad:#ff6b70;
    --ink:  #eef2fb;
    --ink-2:#c2ccdd;
    --ink-3:#8a97ad;
    --line: #26314a;
    --line-2:#1e2740;
    --bg:   #0b1120;
    --bg-2: #0f1728;
    --card: #131c30;
    --card-2:#0f1728;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 8px 24px -10px rgba(0,0,0,.6);
    --shadow-lg: 0 30px 70px -24px rgba(0,0,0,.7);
    --ring: 0 0 0 4px rgba(107,140,255,.22);
  }
}
:root[data-theme="dark"] {
  --brand:#6b8cff; --brand-600:#6b8cff; --brand-700:#93a9ff; --brand-050:#16224a; --brand-ink:#cdd8ff;
  --accent:#2fd39a; --accent-050:#10362a;
  --good:#2fd39a; --ok:#5ec96f; --mid:#f2c24d; --warn:#f0a05a; --bad:#ff6b70;
  --ink:#eef2fb; --ink-2:#c2ccdd; --ink-3:#8a97ad;
  --line:#26314a; --line-2:#1e2740; --bg:#0b1120; --bg-2:#0f1728; --card:#131c30; --card-2:#0f1728;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 8px 24px -10px rgba(0,0,0,.6); --shadow-lg:0 30px 70px -24px rgba(0,0,0,.7);
  --ring:0 0 0 4px rgba(107,140,255,.22);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
button { font-family: inherit; }
h1,h2,h3,h4 { line-height: 1.14; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
p { margin: 0; }
::selection { background: rgba(29,78,216,.16); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--ink-3); }
.center { text-align: center; }
.mono { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.brand .logo { width: 32px; height: 32px; flex: none; }
.brand .word { font-weight: 800; font-size: 20px; letter-spacing: -0.03em; color: var(--ink); }
.brand .word b { color: var(--brand); }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a {
  padding: 8px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: 14.5px;
}
.nav a:hover { background: var(--bg-2); color: var(--ink); }
.nav a.active { color: var(--brand); background: var(--brand-050); }
.header-spacer { flex: 1; }
.icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--bg-2); }
.menu-toggle { display: none; }

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 12px 18px; border-radius: 12px; font-weight: 700; font-size: 15px;
  border: 1px solid transparent; cursor: pointer; transition: transform .06s ease, box-shadow .2s, background .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--brand-600); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg-2); }
.btn-soft { background: var(--brand-050); color: var(--brand); }
.btn-soft:hover { background: color-mix(in srgb, var(--brand-050) 70%, var(--brand) 12%); }
.btn-lg { padding: 15px 24px; font-size: 16px; border-radius: 14px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------- Cards / chips */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 22px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line);
}
.chip.good { background: var(--accent-050); color: var(--good); border-color: color-mix(in srgb,var(--good) 30%, transparent); }
.chip.warn { background: color-mix(in srgb,var(--warn) 14%, var(--card)); color: var(--warn); border-color: color-mix(in srgb,var(--warn) 30%, transparent); }
.chip.bad  { background: color-mix(in srgb,var(--bad) 12%, var(--card));  color: var(--bad);  border-color: color-mix(in srgb,var(--bad) 30%, transparent); }
.chip.brand{ background: var(--brand-050); color: var(--brand); border-color: color-mix(in srgb,var(--brand) 26%, transparent); }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px){ .g3,.g4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .g2,.g3,.g4 { grid-template-columns: 1fr;} }

/* ---------------------------------------------------------------- Hero / Landing */
.hero { position: relative; overflow: clip; }
.hero .wrap { padding: 60px 20px 30px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
@media (max-width: 900px){ .hero-grid { grid-template-columns: 1fr; gap: 26px; } }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px;
  color: var(--brand); background: var(--brand-050); padding: 6px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb,var(--brand) 20%, transparent);
}
.hero h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 850; margin: 18px 0 0; letter-spacing: -0.035em; }
.hero h1 .grad {
  background: linear-gradient(100deg, var(--brand), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lede { font-size: clamp(16px, 2.2vw, 19px); color: var(--ink-2); margin-top: 16px; max-width: 34ch; }
.hero-cta { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 26px; margin-top: 30px; flex-wrap: wrap; }
.hero-stats .s b { font-size: 22px; font-weight: 800; display: block; letter-spacing: -0.02em; }
.hero-stats .s span { font-size: 13px; color: var(--ink-3); }

.aurora { position:absolute; inset:-40% -10% auto; height: 520px; z-index:-1;
  background:
    radial-gradient(40% 55% at 78% 20%, color-mix(in srgb,var(--accent) 28%, transparent), transparent 70%),
    radial-gradient(45% 60% at 18% 8%, color-mix(in srgb,var(--brand) 30%, transparent), transparent 70%);
  filter: blur(20px); opacity:.7; pointer-events:none;
}

/* action cards ("What do you want to do?") */
.actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 8px; }
@media (max-width: 980px){ .actions { grid-template-columns: repeat(3,1fr);} }
@media (max-width: 620px){ .actions { grid-template-columns: repeat(2,1fr);} }
.action {
  text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px; cursor: pointer; transition: transform .12s, box-shadow .2s, border-color .2s; box-shadow: var(--shadow-sm);
}
.action:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb,var(--brand) 34%, var(--line)); }
.action .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-050); color: var(--brand); margin-bottom: 12px; }
.action h4 { font-size: 16px; }
.action p { font-size: 13px; color: var(--ink-3); margin-top: 4px; }

/* score-preview card in hero */
.score-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 24px; position: relative;
}
.score-card .top { display: flex; align-items: center; gap: 18px; }
.ring { position: relative; flex: none; }
.ring .num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring .num b { font-size: 34px; font-weight: 850; letter-spacing: -0.03em; line-height: 1; }
.ring .num span { font-size: 11.5px; color: var(--ink-3); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.catbars { margin-top: 18px; display: grid; gap: 9px; }
.catbar { display: grid; grid-template-columns: 92px 1fr 34px; align-items: center; gap: 10px; font-size: 13px; }
.catbar .track { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.catbar .fill { height: 100%; border-radius: 999px; }
.catbar .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* section */
.section { padding: 46px 0; }
.section h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 820; letter-spacing: -0.03em; }
.section .sub { color: var(--ink-3); margin-top: 8px; max-width: 60ch; }
.sec-head { margin-bottom: 26px; }

/* flywheel steps */
.flow { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
@media (max-width: 820px){ .flow { grid-template-columns: repeat(2,1fr);} }
.flow .step { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; position: relative; }
.flow .step .n { width: 30px; height: 30px; border-radius: 9px; background: var(--brand); color:#fff; font-weight: 800; display: grid; place-items: center; font-size: 14px; }
.flow .step h4 { margin-top: 12px; font-size: 15.5px; }
.flow .step p { font-size: 13px; color: var(--ink-3); margin-top: 4px; }

/* feature list */
.feat { display: flex; gap: 12px; }
.feat .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-050); color: var(--good); display: grid; place-items: center; flex: none; }
.feat h4 { font-size: 16px; }
.feat p { font-size: 13.5px; color: var(--ink-3); margin-top: 3px; }

/* ---------------------------------------------------------------- Assessment / forms */
.assess { max-width: 760px; margin: 0 auto; }
.stepper { display: flex; gap: 6px; margin: 22px 0 8px; }
.stepper .dot { flex: 1; height: 6px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.stepper .dot i { display:block; height:100%; width:0; background: var(--brand); transition: width .3s; }
.stepper .dot.done i { width: 100%; }
.stepper .dot.active i { width: 55%; }
.step-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; }
.step-meta .lbl { font-weight: 700; color: var(--brand); font-size: 13px; letter-spacing: .02em; text-transform: uppercase; }
.step-meta .cnt { font-size: 13px; color: var(--ink-3); }
.q-title { font-size: clamp(22px, 3vw, 28px); font-weight: 800; margin-top: 6px; letter-spacing: -0.02em; }
.q-help { color: var(--ink-3); margin-top: 8px; font-size: 14.5px; }

.field { margin-top: 20px; }
.field > label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.field .hint { font-weight: 500; color: var(--ink-3); font-size: 12.5px; margin-left: 6px; }
.input, select.input, textarea.input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  color: var(--ink); font-size: 15px; transition: border-color .15s, box-shadow .15s;
}
.input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px){ .row2 { grid-template-columns: 1fr; } }

/* option chips (single/multi select) */
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  padding: 9px 14px; border-radius: 11px; border: 1px solid var(--line); background: var(--card);
  cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-2); transition: all .12s;
  user-select: none;
}
.opt:hover { border-color: color-mix(in srgb,var(--brand) 40%, var(--line)); }
.opt.sel { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: var(--shadow-sm); }
.opt.sel.good { background: var(--good); border-color: var(--good); }
.opt.sel.bad  { background: var(--bad);  border-color: var(--bad); }

/* range slider */
.rng { display: flex; align-items: center; gap: 14px; }
.rng input[type=range]{ flex: 1; accent-color: var(--brand); height: 6px; }
.rng .val { min-width: 76px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

/* toggles grid (yes/no docs) */
.toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px){ .toggle-grid { grid-template-columns: 1fr; } }
.tg {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer;
}
.tg:hover { background: var(--bg-2); }
.tg .lab { font-weight: 600; font-size: 14px; }
.tg .sw { width: 42px; height: 24px; border-radius: 999px; background: var(--bg-2); position: relative; transition: background .15s; flex: none; border: 1px solid var(--line); }
.tg .sw::after { content:""; position:absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s; }
.tg.on .sw { background: var(--good); border-color: var(--good); }
.tg.on .sw::after { transform: translateX(18px); }

/* photo upload */
.dropzone {
  border: 2px dashed color-mix(in srgb,var(--brand) 32%, var(--line)); border-radius: var(--r);
  padding: 28px; text-align: center; background: var(--brand-050); cursor: pointer; transition: background .15s;
}
.dropzone:hover { background: color-mix(in srgb,var(--brand-050) 70%, var(--brand) 8%); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px,1fr)); gap: 8px; margin-top: 12px; }
.thumbs .t { aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); position: relative; background: var(--bg-2); }
.thumbs .t img { width: 100%; height: 100%; object-fit: cover; }

.assess-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }

/* ---------------------------------------------------------------- Report */
.report-hero { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: center; }
@media (max-width: 780px){ .report-hero { grid-template-columns: 1fr; text-align: center; } .report-hero .rh-ring{ margin: 0 auto; } }
.rh-ring { display: grid; place-items: center; }
.grade-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-weight: 800;
  font-size: 15px; color: #fff;
}
.percentile { font-size: clamp(20px,3vw,26px); font-weight: 820; letter-spacing: -0.02em; margin-top: 12px; }
.dualscore { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
@media (max-width:780px){ .dualscore{ justify-content:center; } }
.dscore { border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; background: var(--card); min-width: 130px; }
.dscore .k { font-size: 12px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.dscore .val { font-size: 26px; font-weight: 850; letter-spacing: -0.02em; margin-top: 2px; }
.dscore .val small { font-size: 14px; color: var(--ink-3); font-weight: 700; }

.report-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 30px 0 22px; overflow-x: auto; }
.report-tabs button {
  padding: 11px 14px; border: none; background: none; color: var(--ink-3); font-weight: 700; font-size: 14.5px;
  cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
}
.report-tabs button.active { color: var(--brand); border-color: var(--brand); }

.catlist { display: grid; gap: 12px; }
.catrow { display: grid; grid-template-columns: 150px 1fr 48px; gap: 14px; align-items: center; }
@media (max-width: 560px){ .catrow { grid-template-columns: 120px 1fr 40px; } }
.catrow .cn { font-weight: 700; font-size: 14px; }
.catrow .cn small { display:block; color: var(--ink-3); font-weight: 500; font-size: 11.5px; }
.catrow .track { height: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.catrow .track i { display:block; height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.catrow .cv { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }

.sw-list { display: grid; gap: 10px; }
.sw-item { display:flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.sw-item .mk { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; font-weight: 800; }
.sw-item.pos .mk { background: var(--accent-050); color: var(--good); }
.sw-item.neg .mk { background: color-mix(in srgb,var(--warn) 14%, var(--card)); color: var(--warn); }
.sw-item .txt b { font-size: 14.5px; } .sw-item .txt p { font-size: 13px; color: var(--ink-3); }

/* fair price gauge */
.gauge { position: relative; height: 74px; margin: 14px 0 6px; }
.gauge .bar { position: absolute; left:0; right:0; top: 30px; height: 12px; border-radius: 999px;
  background: linear-gradient(90deg, var(--good), var(--mid) 55%, var(--bad)); }
.gauge .band { position: absolute; top: 24px; height: 24px; border-radius: 8px; background: rgba(255,255,255,.35); border: 2px dashed rgba(255,255,255,.85); mix-blend-mode: overlay; }
.gauge .mark { position: absolute; top: 8px; transform: translateX(-50%); text-align: center; }
.gauge .mark .pin { width: 3px; height: 34px; background: var(--ink); margin: 0 auto; border-radius: 2px; }
.gauge .mark .lb { font-size: 11px; font-weight: 800; white-space: nowrap; margin-bottom: 2px; }
.price-legend { display:flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); font-weight: 600; }

/* upgrade roadmap */
.road { display: grid; gap: 10px; }
.road .r {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.road .r .chk { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line); }
.road .r .delta { font-weight: 800; color: var(--good); font-variant-numeric: tabular-nums; }
.road .r b { font-size: 14.5px; } .road .r small { color: var(--ink-3); display:block; }
.road-total { display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding: 14px 16px; border-radius: 12px; background: var(--accent-050); border: 1px solid color-mix(in srgb,var(--good) 30%, transparent); }
.road-total b { color: var(--good); font-size: 18px; }

/* verification shield */
.shield-track { display: grid; gap: 8px; }
.shield-lvl { display:flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.shield-lvl.done { background: var(--accent-050); border-color: color-mix(in srgb,var(--good) 30%, transparent); }
.shield-lvl.next { border-color: color-mix(in srgb,var(--brand) 34%, var(--line)); }
.shield-lvl .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--bg-2); color: var(--ink-3); }
.shield-lvl.done .ic { background: var(--good); color: #fff; }
.shield-lvl b { font-size: 14.5px; } .shield-lvl small { display:block; color: var(--ink-3); font-size: 12.5px; }

/* evidence / trust ledger */
.ledger { display: grid; gap: 8px; }
.ledger .l { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; align-items:center; }
.ledger .l .method { font-size: 12.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------- Profile */
.profile-head { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; }
@media (max-width: 720px){ .profile-head { grid-template-columns: 1fr; text-align:center; } }
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 130px; gap: 8px; }
.gallery .g { border-radius: 12px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); }
.gallery .g:first-child { grid-row: span 2; }
.gallery .g img { width:100%; height:100%; object-fit: cover; }
.spec-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
@media (max-width: 720px){ .spec-grid { grid-template-columns: repeat(2,1fr); } }
.spec { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); }
.spec .k { font-size: 12px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.spec .v { font-size: 17px; font-weight: 800; margin-top: 3px; }

/* ---------------------------------------------------------------- Compare */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px){ .cmp { grid-template-columns: 1fr; } }
.cmp-pick { border: 1px dashed var(--line); border-radius: var(--r); padding: 16px; }
.cmp-row { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.cmp-row .mid { text-align: center; font-size: 12px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cmp-row .side { font-weight: 700; }
.cmp-row .side.win { color: var(--good); }
.cmp-row.l .side:first-child{ text-align:left } .cmp-row .side:last-child{ text-align:right }
.verdict { background: var(--brand-050); border: 1px solid color-mix(in srgb,var(--brand) 26%, transparent); border-radius: var(--r); padding: 18px; }

/* ---------------------------------------------------------------- Leaderboard */
.board-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.board-tabs .bt { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-weight: 700; font-size: 13.5px; cursor: pointer; color: var(--ink-2); }
.board-tabs .bt.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.lb-row { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 14px; align-items: center; padding: 12px 8px; border-bottom: 1px solid var(--line-2); }
.lb-row .rank { font-weight: 850; font-size: 18px; color: var(--ink-3); text-align: center; }
.lb-row.me { background: var(--brand-050); border-radius: 12px; }
.lb-row.top1 .rank { color: var(--mid); } .lb-row.top2 .rank { color: #9aa7bd; } .lb-row.top3 .rank { color: #c08457; }
.lb-row .nm b { font-size: 14.5px; } .lb-row .nm small { color: var(--ink-3); }
.lb-score { font-weight: 850; font-size: 18px; font-variant-numeric: tabular-nums; }

/* find / match cards */
.match { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); }
.match .ph { height: 150px; background: var(--bg-2); position: relative; }
.match .ph .mscore { position:absolute; top: 10px; right: 10px; background: rgba(15,27,45,.78); color:#fff; padding: 6px 10px; border-radius: 10px; font-weight: 800; font-size: 13px; }
.match .body { padding: 16px; }
.match .why { font-size: 13px; color: var(--good); font-weight: 700; margin-top: 8px; }

/* share modal */
.modal-back { position: fixed; inset: 0; background: rgba(9,15,28,.55); backdrop-filter: blur(4px); z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); max-width: 460px; width: 100%; padding: 22px; }
.share-card-preview { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.share-btns { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 16px; }
.share-btns .sb { display: grid; place-items: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--card); }
.share-btns .sb:hover { background: var(--bg-2); }

/* callout / disclaimer */
.callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb,var(--mid) 10%, var(--card)); border: 1px solid color-mix(in srgb,var(--mid) 28%, transparent); }
.callout .ic { color: var(--mid); flex: none; }
.callout p { font-size: 13px; color: var(--ink-2); }
.preview-tag { font-size: 11px; font-weight: 800; color: var(--brand); background: var(--brand-050); padding: 3px 8px; border-radius: 6px; letter-spacing: .03em; }

/* footer */
.site-footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 40px 0; background: var(--card-2); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 30px; }
@media (max-width: 760px){ .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-grid h5 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 12px; }
.foot-grid a { display: block; color: var(--ink-2); font-weight: 500; font-size: 14px; padding: 4px 0; cursor: pointer; }
.foot-grid a:hover { color: var(--brand); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); flex-wrap: wrap; gap: 10px; }

/* toast */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; font-size: 14px;
  box-shadow: var(--shadow-lg); z-index: 200; transition: all .25s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* reveal on load */
.reveal { opacity: 0; transform: translateY(14px); animation: rise .5s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

.divide { height: 1px; background: var(--line); margin: 22px 0; }
.kbd { font-size: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; font-weight: 700; }

/* mobile nav */
@media (max-width: 760px){
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; background: var(--card); border-bottom: 1px solid var(--line); padding: 10px; gap: 4px; box-shadow: var(--shadow); }
  .nav.open { display: flex; }
  .menu-toggle { display: grid; }
}