/* ============================================================
   BILAR — EV value explorer
   Visual system: Wingbits (dark / performance variant)
   At Aero display · IBM Plex Mono labels · orange accent
   ============================================================ */

@font-face { font-family:"At Aero"; src:url("fonts/AtAero-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:block; }
@font-face { font-family:"At Aero"; src:url("fonts/AtAero-RegularItalic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:block; }
@font-face { font-family:"At Aero"; src:url("fonts/AtAero-Semibold.otf") format("opentype"); font-weight:600; font-style:normal; font-display:block; }
@font-face { font-family:"At Aero"; src:url("fonts/AtAero-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:block; }

:root{
  --bg:        #0B0B0C;
  --bg-2:      #111113;
  --panel:     #161618;
  --panel-2:   #1C1C1F;
  --ink:       #F3F1EC;
  --ink-mute:  #B7B5AE;
  --ink-faint: #75736D;
  --line:      rgba(255,255,255,0.10);
  --line-2:    rgba(255,255,255,0.16);
  --line-soft: rgba(255,255,255,0.05);
  --accent:    #FF7121;
  --accent-2:  #FF8A47;
  --accent-soft: rgba(255,113,33,0.14);
  --good:      #5FD08A;   /* used sparingly for "best value" tier */
  --good-soft: rgba(95,208,138,0.13);
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "At Aero", "Inter", system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--accent); color:#0B0B0C; }

/* watermark tile, very faint, inverted for dark */
.wm{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("assets/wm-tile.svg");
  background-repeat:repeat; background-size:300px 300px;
  filter:invert(1); opacity:0.035;
}

/* ---------------- shared type ---------------- */
.mono{
  font-family:var(--mono); font-size:13px; letter-spacing:0.28em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:500;
}
.mono.accent{ color:var(--accent); }
.bracket{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.32em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:500;
}
.bracket::before,.bracket::after{ content:""; width:26px; height:1px; background:currentColor; }
.bracket.one::after{ display:none; }

.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ============================================================
   SHELL
   ============================================================ */
.wrap{ position:relative; z-index:1; max-width:1380px; margin:0 auto; padding:0 48px; }

/* ---------------- top bar ---------------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(11,11,12,0.78);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line);
}
.topbar .inner{
  max-width:1380px; margin:0 auto; padding:18px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.wordmark{
  font-family:var(--sans); font-weight:700; font-size:26px;
  letter-spacing:-0.02em; text-transform:uppercase; color:var(--ink);
  display:flex; align-items:center; gap:12px; line-height:1;
}
.wordmark .dot{ width:11px; height:11px; background:var(--accent); border-radius:50%; display:inline-block; }
.topbar .meta{ display:flex; align-items:center; gap:28px; }
.topbar .meta .mono{ font-size:12px; }
.topbar .cta{
  font-family:var(--mono); font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--bg); background:var(--accent); border:none; cursor:pointer;
  padding:11px 18px; font-weight:600; transition:background .15s ease;
}
.topbar .cta:hover{ background:var(--accent-2); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding:104px 0 72px; overflow:hidden; }
.hero .ghost{
  position:absolute; right:-40px; top:-30px; z-index:0; pointer-events:none;
  font-family:var(--sans); font-weight:700; font-size:520px; line-height:0.7;
  letter-spacing:-0.04em; color:#fff; opacity:0.028; user-select:none;
}
.hero .inner{ position:relative; z-index:2; }
.hero .eyebrow{ margin-bottom:34px; }
.hero h1{
  font-family:var(--sans); font-weight:700; text-transform:uppercase;
  font-size:clamp(56px,8.2vw,128px); line-height:0.9; letter-spacing:-0.035em;
  margin:0; color:var(--ink); text-wrap:balance; max-width:15ch;
}
.hero h1 .accent{ color:var(--accent); }
.hero h1 em{ font-style:italic; font-weight:700; }
.hero .lead{
  font-family:var(--sans); font-weight:400; font-size:23px; line-height:1.5;
  color:var(--ink-mute); max-width:60ch; margin:34px 0 0; text-wrap:pretty;
}
.hero .lead strong{ color:var(--ink); font-weight:600; }
.hero .lead em{ font-style:italic; color:var(--accent-2); font-weight:600; }

/* stat strip */
.statstrip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  margin-top:56px;
}
.statstrip .cell{ padding:26px 28px 24px; border-left:1px solid var(--line); }
.statstrip .cell:first-child{ border-left:none; padding-left:0; }
.statstrip .cell .k{ font-family:var(--mono); font-size:11px; letter-spacing:0.26em; text-transform:uppercase; color:var(--ink-faint); }
.statstrip .cell .v{ font-family:var(--sans); font-weight:700; font-size:42px; line-height:1; letter-spacing:-0.02em; margin-top:14px; color:var(--ink); }
.statstrip .cell .v small{ font-size:18px; font-weight:600; color:var(--ink-mute); letter-spacing:0; }
.statstrip .cell .v .accent{ color:var(--accent); }

/* attribution chip */
.byline{
  display:inline-flex; align-items:center; gap:16px; margin-top:38px;
  padding:12px 16px 12px 14px; border:1px solid var(--line-2); background:var(--panel);
}
.byline .ava{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#2a2a2e,#0e0e10);
  border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:700; font-size:16px; color:var(--accent);
}
.byline .txt{ display:flex; flex-direction:column; gap:3px; }
.byline .txt b{ font-family:var(--sans); font-weight:600; font-size:15px; color:var(--ink); }
.byline .txt span{ font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint); }

/* ============================================================
   EXPLORER
   ============================================================ */
.explorer{ padding:0 0 120px; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  padding:20px 0 22px; border-bottom:1px solid var(--line-2);
}
.section-head h2{
  font-family:var(--sans); font-weight:700; text-transform:uppercase;
  font-size:34px; letter-spacing:-0.02em; margin:0; color:var(--ink); line-height:1;
}
.section-head .sub{ font-family:var(--mono); font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-faint); }

/* ---- filter rail ---- */
.filters{
  position:sticky; top:69px; z-index:30;
  background:rgba(11,11,12,0.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:18px 0;
}
.filters .grid{
  display:grid; grid-template-columns:1.4fr 1.1fr 1fr 1fr auto; gap:30px; align-items:end;
}
.fgroup{ display:flex; flex-direction:column; gap:11px; min-width:0; }
.fgroup > label{ font-family:var(--mono); font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--ink-faint); display:flex; justify-content:space-between; align-items:center; }
.fgroup > label .hint{ color:var(--accent); letter-spacing:0.1em; }

/* segmented control */
.seg{ display:inline-flex; border:1px solid var(--line-2); background:var(--panel); flex-wrap:wrap; }
.seg button{
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-mute); background:transparent; border:none; cursor:pointer;
  padding:9px 13px; border-right:1px solid var(--line); transition:all .14s ease; white-space:nowrap; font-weight:500;
}
.seg button:last-child{ border-right:none; }
.seg button:hover{ color:var(--ink); background:var(--panel-2); }
.seg button.on{ background:var(--accent); color:var(--bg); font-weight:600; }

/* select */
.sel{
  appearance:none; -webkit-appearance:none;
  font-family:var(--mono); font-size:13px; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink); background:var(--panel); border:1px solid var(--line-2);
  padding:10px 36px 10px 13px; cursor:pointer; width:100%; font-weight:500;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23B7B5AE' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.sel:hover{ border-color:var(--line-2); background-color:var(--panel-2); }

/* price slider */
.slider-wrap{ display:flex; flex-direction:column; gap:9px; }
.slider-val{ font-family:var(--sans); font-weight:700; font-size:24px; letter-spacing:-0.01em; color:var(--ink); line-height:1; }
.slider-val small{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.2em; color:var(--ink-faint); margin-left:6px; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:3px; background:var(--line-2); outline:none; cursor:pointer; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; background:var(--accent); border:none; cursor:pointer; border-radius:0; }
input[type=range]::-moz-range-thumb{ width:16px; height:16px; background:var(--accent); border:none; cursor:pointer; border-radius:0; }

/* view toggle */
.viewtoggle{ display:inline-flex; border:1px solid var(--line-2); }
.viewtoggle button{ background:var(--panel); border:none; border-right:1px solid var(--line); padding:9px 11px; cursor:pointer; color:var(--ink-mute); display:flex; align-items:center; transition:all .14s; }
.viewtoggle button:last-child{ border-right:none; }
.viewtoggle button.on{ background:var(--accent); color:var(--bg); }
.viewtoggle button:hover:not(.on){ color:var(--ink); }
.viewtoggle svg{ width:16px; height:16px; display:block; }

/* result count bar */
.countbar{ display:flex; align-items:center; justify-content:space-between; padding:22px 0 16px; }
.countbar .left{ display:flex; align-items:baseline; gap:14px; }
.countbar .num{ font-family:var(--sans); font-weight:700; font-size:30px; letter-spacing:-0.02em; color:var(--ink); line-height:1; }
.countbar .lbl{ font-family:var(--mono); font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-faint); }
.countbar .right .mono{ font-size:11px; }
.countbar .right .accent{ color:var(--accent); }

/* ============================================================
   TABLE
   ============================================================ */
.tbl{ width:100%; border-collapse:collapse; }
.tbl thead th{
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500; text-align:right; padding:14px 16px; border-bottom:1px solid var(--line-2);
  cursor:pointer; user-select:none; white-space:nowrap; transition:color .14s;
}
.tbl thead th:first-child{ text-align:left; width:48px; cursor:default; }
.tbl thead th.name{ text-align:left; }
.tbl thead th:hover:not(:first-child){ color:var(--ink); }
.tbl thead th .arr{ color:var(--accent); margin-left:5px; font-size:10px; }
.tbl thead th.active{ color:var(--ink); }

.tbl tbody tr{ border-bottom:1px solid var(--line); transition:background .12s; }
.tbl tbody tr:hover{ background:var(--panel); }
.tbl tbody td{ padding:17px 16px; text-align:right; font-family:var(--sans); font-size:17px; color:var(--ink-mute); white-space:nowrap; }
.tbl tbody td.rank{ text-align:left; font-family:var(--mono); font-size:13px; color:var(--ink-faint); letter-spacing:0.06em; }
.tbl tbody td.name{ text-align:left; }
.tbl tbody td.name .m{ font-family:var(--sans); font-weight:600; font-size:18px; color:var(--ink); letter-spacing:-0.01em; }
.tbl tbody td.name .v{ font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint); margin-top:3px; }
.tbl tbody td.name .v .br{ color:var(--ink-mute); }
.tbl tbody td b{ font-family:var(--sans); font-weight:700; color:var(--ink); font-size:19px; letter-spacing:-0.01em; }
.tbl tbody td.metric-cell b{ color:var(--accent); }
.tbl tbody td .unit{ font-family:var(--mono); font-size:10px; letter-spacing:0.14em; color:var(--ink-faint); margin-left:4px; }
.tbl tbody tr.tier-good td.metric-cell b{ color:var(--good); }
.bodytag{
  display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-mute); border:1px solid var(--line-2); padding:3px 7px;
}

/* ============================================================
   CARDS
   ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px; }
.card{
  position:relative; background:var(--panel); border:1px solid var(--line);
  padding:22px 22px 20px; transition:border-color .15s, transform .15s; overflow:hidden;
}
.card:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.card .rk{ position:absolute; top:18px; right:20px; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:var(--ink-faint); }
.card .brand{ font-family:var(--mono); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-faint); }
.card h3{ font-family:var(--sans); font-weight:700; font-size:25px; letter-spacing:-0.02em; margin:7px 0 2px; color:var(--ink); line-height:1.04; }
.card .vsub{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-mute); }
.card .bigmetric{
  display:flex; align-items:baseline; gap:9px; margin:22px 0 4px;
  border-top:1px solid var(--line); padding-top:20px;
}
.card .bigmetric .n{ font-family:var(--sans); font-weight:700; font-size:54px; line-height:0.9; letter-spacing:-0.035em; color:var(--accent); }
.card.tier-good .bigmetric .n{ color:var(--good); }
.card .bigmetric .u{ font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); }
.card .metriclabel{ font-family:var(--mono); font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--ink-faint); }
.card .specs{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); margin-top:20px; border:1px solid var(--line); }
.card .specs .s{ background:var(--panel); padding:12px 13px; }
.card .specs .s .sk{ font-family:var(--mono); font-size:9.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-faint); }
.card .specs .s .sv{ font-family:var(--sans); font-weight:600; font-size:19px; color:var(--ink); margin-top:5px; letter-spacing:-0.01em; }
.card .specs .s .sv small{ font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:0.1em; color:var(--ink-faint); margin-left:3px; }
.card .pricerow{ display:flex; align-items:baseline; justify-content:space-between; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.card .pricerow .pk{ font-family:var(--mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-faint); }
.card .pricerow .pv{ font-family:var(--sans); font-weight:700; font-size:24px; letter-spacing:-0.02em; color:var(--ink); }
.card .pricerow .pv small{ font-family:var(--mono); font-size:11px; font-weight:500; color:var(--ink-faint); letter-spacing:0.1em; }
.card .badge{ position:absolute; top:0; left:0; background:var(--good); color:var(--bg); font-family:var(--mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; font-weight:600; padding:5px 9px; }

/* empty state */
.empty{ padding:80px 0; text-align:center; }
.empty .mono{ font-size:13px; }
.empty .big{ font-family:var(--sans); font-weight:700; font-size:40px; text-transform:uppercase; letter-spacing:-0.02em; color:var(--ink); margin:18px 0 10px; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ border-top:1px solid var(--line-2); padding:40px 0 80px; }
.foot .row{ display:flex; align-items:flex-start; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.foot p{ font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--ink-faint); max-width:60ch; margin:0; }
.foot a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-soft); }
.foot a:hover{ border-bottom-color:var(--accent); }
.foot .disc{ font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .filters .grid{ grid-template-columns:1fr 1fr; gap:22px; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .statstrip{ grid-template-columns:repeat(2,1fr); }
  .statstrip .cell:nth-child(3){ border-left:none; padding-left:0; }
}
@media (max-width:680px){
  .wrap,.topbar .inner,.filters .grid{ padding-left:22px; padding-right:22px; }
  .cards{ grid-template-columns:1fr; }
  .statstrip{ grid-template-columns:1fr 1fr; }
  .topbar .meta{ display:none; }
}