:root{
  --bg:#080808;
  --panel:#121212;
  --panel2:#181818;
  --line:rgba(255,255,255,.12);
  --text:#f5f1e8;
  --muted:#c9c0ad;
  --soft:#9b927f;
  --gold:#d7aa49;
  --gold2:#f2cc6d;
  --danger:#ffdf8a;
  --shadow:0 24px 70px rgba(0,0,0,.45);
  --radius:0px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 15% 0%, rgba(215,170,73,.14), transparent 36%),
    radial-gradient(circle at 90% 20%, rgba(255,255,255,.06), transparent 28%),
    linear-gradient(180deg,#090909 0%,#0c0c0c 38%,#050505 100%);
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.5;
}
a{color:inherit}
img{max-width:100%;display:block}
.page{
  width:100%;
  padding:clamp(18px,2.2vw,42px);
}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:14px 0 28px;
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
}
.brand-mark{
  width:42px;height:42px;
  border:2px solid var(--gold);
  display:grid;
  place-items:center;
  color:var(--gold2);
  font-weight:900;
  letter-spacing:-.04em;
}
.brand-text strong{display:block;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold2)}
.brand-text span{display:block;font-size:13px;color:var(--muted)}
.nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}
.nav a{
  text-decoration:none;
  border:1px solid var(--line);
  padding:10px 14px;
  font-size:13px;
  color:var(--muted);
  background:rgba(255,255,255,.03);
}
.nav a:hover{border-color:var(--gold);color:var(--gold2)}
.hero{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:clamp(22px,3vw,54px);
  align-items:center;
  padding:clamp(34px,4vw,78px) 0 clamp(28px,4vw,62px);
}
.eyebrow{
  color:var(--gold2);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  font-weight:800;
}
h1{
  margin:.14em 0 .18em;
  font-size:clamp(38px,5vw,92px);
  line-height:.92;
  letter-spacing:-.065em;
}
.lead{
  font-size:clamp(17px,1.35vw,24px);
  color:var(--muted);
  max-width:980px;
  margin:0 0 24px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 18px;
  border:1px solid var(--gold);
  background:var(--gold);
  color:#171207;
  font-weight:900;
  text-decoration:none;
  min-height:48px;
}
.btn.secondary{
  background:transparent;
  color:var(--gold2);
}
.hero-photo{
  position:relative;
  min-height:360px;
  overflow:hidden;
  border:1px solid var(--line);
  background:radial-gradient(circle at 50% 45%, rgba(215,170,73,.16), transparent 48%), linear-gradient(135deg,rgba(215,170,73,.14),rgba(255,255,255,.03));
  box-shadow:var(--shadow);
}
.hero-photo img{
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:contain;
  padding:18px;
  transition:transform .65s ease, filter .65s ease;
}
.hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.66));
  pointer-events:none;
}
.photo-caption{
  position:absolute;
  left:18px;right:18px;bottom:16px;
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--text);
  font-weight:800;
}
.section-title{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin:22px 0 18px;
}
.section-title h2{
  margin:0;
  color:var(--gold2);
  font-size:clamp(26px,2.2vw,44px);
  letter-spacing:-.04em;
}
.section-title p{margin:0;color:var(--muted);max-width:820px}
.ride-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:clamp(16px,1.5vw,28px);
}
@media (min-width:2200px){
  .ride-grid{grid-template-columns:repeat(5,1fr)}
}
.card{
  min-height:640px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)),
    var(--panel);
  padding:20px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.card-img{
  height:190px;
  margin:-20px -20px 18px;
  background:radial-gradient(circle at 50% 40%, rgba(215,170,73,.16), #111 62%);
  overflow:hidden;
  position:relative;
}
.card-img img{width:100%;height:100%;object-fit:contain;padding:10px;transition:transform .55s ease, filter .55s ease}
.card-kicker{
  color:var(--gold2);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:900;
}
.card h3{
  margin:8px 0 4px;
  font-size:clamp(22px,1.5vw,31px);
  line-height:1.04;
  letter-spacing:-.045em;
}
.card .sub{color:var(--muted);font-size:14px;margin:0 0 14px}
.meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:13px 0 14px;
}
.meta span{
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  padding:7px 9px;
  font-size:12px;
  color:var(--text);
  font-weight:700;
}
.route-box{
  border-left:3px solid var(--gold);
  padding-left:12px;
  margin:6px 0 14px;
  font-weight:800;
  color:#fff8e8;
}
.cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:12px 0;
}
.mini-title{font-size:13px;color:var(--gold2);font-weight:900;margin:0 0 8px}
ul{margin:0;padding-left:18px;color:var(--muted)}
li{margin:3px 0}
.card-footer{
  margin-top:auto;
  border-top:1px solid var(--line);
  padding-top:16px;
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  gap:14px;
  align-items:center;
  min-height:142px;
}
.qr{
  display:block;
  width:104px;
  height:104px;
  padding:6px;
  background:#fff;
  line-height:0;
}
.qr img{display:block;width:100%;height:100%;object-fit:contain}
.footer-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}
.footer-actions small{color:var(--muted);font-weight:800}
.footer-actions a{font-size:13px}
.detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);
  gap:clamp(22px,2.8vw,54px);
  align-items:stretch;
  margin:24px 0;
}
.route-panel,.info-panel,.spec-panel{
  border:1px solid var(--line);
  background:rgba(18,18,18,.92);
  box-shadow:var(--shadow);
  padding:clamp(18px,2vw,30px);
}
.route-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  gap:22px;
  align-items:end;
}
.detail-title h1{font-size:clamp(42px,4.4vw,84px)}
.detail-title .lead{max-width:1100px}
.route-title{
  margin:0 0 10px;
  font-size:clamp(28px,2.6vw,52px);
  line-height:1;
  letter-spacing:-.055em;
}
.qr-big{
  display:block;
  width:180px;
  height:180px;
  padding:10px;
  background:#fff;
  line-height:0;
}
.qr-big img{display:block;width:100%;height:100%;object-fit:contain}
.qr-note{
  margin:10px 0 0;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}
.detail-photo{
  border:1px solid var(--line);
  background:radial-gradient(circle at 54% 48%, rgba(215,170,73,.12), #111 62%);
  min-height:520px;
  position:relative;
  overflow:hidden;
}
.detail-photo img{
  width:100%;
  height:100%;
  min-height:520px;
  object-fit:contain;
  padding:18px;
  transition:transform .75s ease, filter .75s ease;
}
.detail-photo::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.68));
}
.detail-photo .photo-caption{font-size:16px}
.panel-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.4vw,28px);
  margin:22px 0;
}
.specs{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin:18px 0 0;
}
.spec{
  border:1px solid var(--line);
  padding:12px;
  background:rgba(255,255,255,.025);
}
.spec small{display:block;color:var(--soft);font-size:12px}
.spec strong{display:block;color:var(--text);font-size:18px}
.score{
  display:grid;
  gap:8px;
}
.score-row{
  display:grid;
  grid-template-columns:110px minmax(0,1fr) 22px;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--muted);
}
.bar{
  height:8px;
  background:rgba(255,255,255,.1);
  position:relative;
  overflow:hidden;
}
.bar span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
}
.notice{
  margin:24px 0 0;
  border:1px solid rgba(215,170,73,.35);
  background:rgba(215,170,73,.08);
  padding:16px 18px;
  color:#f5dfad;
}
.footer{
  margin-top:42px;
  padding-top:24px;
  border-top:1px solid var(--line);
  color:var(--soft);
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.detail-photo::before,.hero-photo::before,.card-img::before{
  content:"";
  position:absolute;
  inset:-40% auto -40% -75%;
  width:45%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  z-index:3;
  pointer-events:none;
  opacity:0;
}
.detail-photo:hover::before,.hero-photo:hover::before,.card:hover .card-img::before{
  animation:re-shine .9s ease both;
  opacity:1;
}
.detail-photo:hover img,.hero-photo:hover img,.card:hover .card-img img{
  transform:scale(1.025);
  filter:brightness(1.08) contrast(1.06);
}
@keyframes re-shine{
  from{left:-75%;opacity:0}
  25%{opacity:1}
  to{left:130%;opacity:0}
}
.footer a{color:var(--gold2);font-weight:800;text-decoration:none}
.footer a:hover{text-decoration:underline}

@media (max-width:1100px){
  .hero,.detail-grid{grid-template-columns:1fr}
  .detail-photo,.detail-photo img{min-height:380px}
  .panel-grid{grid-template-columns:1fr}
  .specs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .page{padding:16px}
  .topbar{align-items:flex-start;flex-direction:column}
  .nav{justify-content:flex-start}
  .hero{padding:28px 0}
  h1{font-size:44px}
  .ride-grid{grid-template-columns:1fr}
  .card{min-height:auto;padding:16px}
  .card-img{margin:-16px -16px 16px;height:210px}
  .cols{grid-template-columns:1fr}
  .card-footer{grid-template-columns:94px 1fr;min-height:auto}
  .qr{width:94px;height:94px}
  .route-panel{grid-template-columns:1fr;align-items:start}
  .qr-big{width:168px;height:168px}
  .specs{grid-template-columns:1fr 1fr}
}
@media print{
  body{background:#fff;color:#111}
  .topbar,.nav,.footer,.btn.secondary{display:none!important}
  .card,.route-panel,.info-panel,.spec-panel,.detail-photo{box-shadow:none;border-color:#ccc;background:#fff;color:#111}
  .lead,ul,li,.sub,.qr-note{color:#333}
  .page{padding:10mm}
}