/* =============================== hero ================================== */
.hero{
  background:
    radial-gradient(1100px 420px at 88% -8%, #ffe9b8 0%, rgba(255,233,184,0) 62%),
    linear-gradient(180deg,#fffdf7 0%,var(--bg) 100%);
  border-bottom:1px solid var(--border);
  padding:26px 0 34px;
}
.hero-in{display:grid;gap:24px;grid-template-columns:1fr;align-items:center}
.hero h1{margin-bottom:.45em}
.hero h1 em{font-style:normal;color:var(--primary)}
.hero .lead{margin-bottom:1.2em}
.hero-art{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-l);padding:12px;box-shadow:var(--shadow);
}
.hero-art svg{width:100%;height:auto;display:block;border-radius:var(--radius)}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:18px;
  font-size:.86rem;color:var(--muted);
}
.hero-meta b{color:var(--road)}

/* ========================= difficulty switcher ========================= */
.diff{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);padding:18px;box-shadow:var(--shadow-s)}
.diff-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.diff-tab{
  min-height:44px;padding:10px 16px;border-radius:999px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border-strong);
  font-family:var(--font-head);font-weight:700;font-size:.94rem;color:var(--road);
}
.diff-tab[aria-selected="true"]{background:var(--accent);border-color:#e0ac00;color:#4a3200}
.diff-panel{display:none}
.diff-panel.is-active{display:block}
.diff-panel h3{margin-top:0}
.diff-bars{display:grid;gap:12px;margin:16px 0 0}
.diff-bar span{font-size:.85rem;color:var(--muted);display:block;margin-bottom:4px}
.diff-bar div{height:12px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.diff-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--primary))}

/* =========================== demo simulator ============================ */
.sim{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);
  padding:18px;box-shadow:var(--shadow);
}
.sim-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
.sim-head h3{margin:0}
.sim-tag{
  font-family:var(--font-head);font-size:.76rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;background:var(--surface-2);border:1px solid var(--border-strong);
  color:var(--muted);border-radius:999px;padding:5px 11px;
}
.sim-board{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#dff1ff 0%,#f6fbff 45%,var(--road) 45%,#3f3f49 100%);
  border-radius:var(--radius);border:1px solid var(--border-strong);
  height:190px;
}
.sim-lanes{position:absolute;left:0;right:0;bottom:0;height:55%;display:flex}
.sim-lane{
  flex:1 1 0;border-right:2px dashed rgba(255,255,255,.35);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;
  font-size:.62rem;color:rgba(255,255,255,.6);font-family:var(--font-head);
}
.sim-lane:last-child{border-right:0}
.sim-lane.is-passed{background:rgba(53,199,89,.22)}
.sim-lane.is-boom{background:rgba(255,59,48,.35)}
.sim-chick{
  position:absolute;bottom:14%;left:0;width:38px;height:38px;
  transition:left .28s cubic-bezier(.34,1.4,.64,1);
  display:grid;place-items:center;font-size:1.7rem;line-height:1;
}
.sim-mult{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  font-family:var(--font-head);font-weight:800;font-size:1.8rem;color:var(--road);
  text-shadow:0 2px 0 #fff;
}
.sim-mult.is-crash{color:var(--danger)}
.sim-mult.is-cash{color:#1d7a37}
.sim-status{
  min-height:26px;font-size:.92rem;color:var(--muted);margin:12px 0 0;text-align:center;
  font-family:var(--font-head);
}
.sim-status.is-crash{color:var(--danger)}
.sim-status.is-cash{color:#1d7a37}
.sim-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.sim-controls .btn{flex:1 1 140px}
.sim-score{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;
  font-size:.86rem;color:var(--muted);justify-content:center;
}
.sim-score b{color:var(--road);font-family:var(--font-head)}
.sim-foot{font-size:.82rem;color:var(--muted);margin:14px 0 0;text-align:center}

/* ============================ brand cards ============================== */
.brand-card{display:flex;flex-direction:column;gap:12px}
.brand-card .brand-logo{
  height:46px;width:auto;max-width:150px;object-fit:contain;
  background:var(--surface-2);border-radius:10px;padding:6px 10px;
}
.brand-card ul{margin:0;font-size:.94rem}
.brand-card .btn{margin-top:auto;align-self:flex-start}

/* ============================ verdict box ============================== */
.verdict{
  display:grid;gap:18px;grid-template-columns:1fr;
  background:linear-gradient(135deg,#fff6dd 0%,var(--surface) 70%);
  border:1px solid var(--accent);border-radius:var(--radius-l);
  padding:22px;box-shadow:var(--shadow-s);
}
.score-ring{
  width:112px;height:112px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--primary) 0 88%, var(--surface-2) 88% 100%);
  display:grid;place-items:center;position:relative;margin:0 auto;
}
.score-ring::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--surface)}
.score-ring b{position:relative;z-index:1;font-family:var(--font-head);font-size:1.65rem;color:var(--road)}
.score-ring b small{font-size:.7rem;color:var(--muted);font-weight:600}

@media (min-width:601px){
  .verdict{grid-template-columns:140px 1fr;align-items:center}
  .sim-board{height:230px}
  .sim-chick{width:44px;height:44px;font-size:2rem}
}
@media (min-width:1025px){
  .hero{padding:44px 0 54px}
  .hero-in{grid-template-columns:1.08fr .92fr;gap:44px}
  .diff-bars{grid-template-columns:1fr 1fr;gap:16px 26px}
  .sim-board{height:260px}
}