:root {
  --bg:#07080b; --panel:#0e1016; --text:#f5f3ef; --muted:#9ca1ad;
  --line:rgba(255,255,255,.13); --red:#ff314f; --blue:#67d7ff; --max:1240px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh; color:var(--text);
  background:radial-gradient(circle at 84% 15%,rgba(103,215,255,.1),transparent 28rem),radial-gradient(circle at 20% 38%,rgba(255,49,79,.13),transparent 31rem),var(--bg);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.55; overflow-x:hidden;
}
body::before {
  content:""; position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.16;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
}
button,input { font:inherit; }
a { color:inherit; }
.wrap { width:min(calc(100% - 40px),var(--max)); margin:0 auto; }
.nav {
  height:82px; display:flex; align-items:center; border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(7,8,11,.72); backdrop-filter:blur(18px);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo { font-weight:950; font-size:1.3rem; letter-spacing:-.06em; text-decoration:none; }
.logo span { color:var(--red); }
.nav-links { display:flex; align-items:center; gap:25px; }
.nav-links a { color:#d6d7dc; font-size:.9rem; font-weight:750; text-decoration:none; }
.nav-links a:hover { color:white; }
.nav-active { padding:9px 15px; border:1px solid rgba(255,255,255,.28); border-radius:99px; color:white!important; }

.shop-head { padding:78px 0 42px; }
.shop-head-grid { display:grid; grid-template-columns:1fr auto; align-items:end; gap:28px; }
.eyebrow { margin:0 0 15px; color:var(--red); font-size:.76rem; font-weight:850; letter-spacing:.18em; text-transform:uppercase; }
h1 { max-width:850px; margin:0; font-size:clamp(3.3rem,8.5vw,8rem); line-height:.82; letter-spacing:-.075em; }
h1 em { color:transparent; -webkit-text-stroke:1.3px rgba(255,255,255,.72); font-style:normal; }
.intro { max-width:570px; margin:24px 0 0; color:#c4c7cf; font-size:1.05rem; }
.demo-badge {
  align-self:start; display:inline-flex; align-items:center; gap:9px; padding:10px 14px;
  border:1px solid rgba(103,215,255,.28); border-radius:99px; color:#bdeeff;
  background:rgba(103,215,255,.07); font-size:.78rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
}
.demo-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 15px rgba(103,215,255,.9); }

.product {
  display:grid; grid-template-columns:minmax(300px,.86fr) 1.14fr; min-height:610px;
  margin:22px auto 96px; border:1px solid var(--line); border-radius:28px; overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  box-shadow:0 40px 110px rgba(0,0,0,.38);
}
.cover {
  position:relative; min-height:560px; isolation:isolate; display:flex; flex-direction:column;
  justify-content:space-between; padding:36px; overflow:hidden;
  background:linear-gradient(135deg,rgba(255,49,79,.84),rgba(116,11,42,.62) 40%,rgba(10,15,28,.92) 72%),#191018;
}
.cover::before {
  content:""; position:absolute; z-index:-1; width:460px; aspect-ratio:1; right:-130px; top:-110px;
  border:1px solid rgba(255,255,255,.2); border-radius:50%;
  box-shadow:0 0 0 54px rgba(255,255,255,.035),0 0 0 108px rgba(255,255,255,.025),0 0 100px rgba(103,215,255,.25);
}
.cover::after {
  content:""; position:absolute; inset:auto -20% -25% 10%; z-index:-1; height:48%;
  transform:rotate(-8deg); background:linear-gradient(90deg,transparent,rgba(103,215,255,.22),transparent); filter:blur(25px);
}
.cover-label { font-size:.74rem; font-weight:850; letter-spacing:.18em; text-transform:uppercase; }
.cover-title { margin:0; font-size:clamp(3.5rem,6vw,6.6rem); line-height:.78; letter-spacing:-.08em; word-break:break-word; }
.cover-title span { display:block; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.78); }
.cover-foot { display:flex; justify-content:space-between; gap:20px; color:rgba(255,255,255,.76); font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }

.details { display:flex; flex-direction:column; padding:42px; }
.status-row { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.status { display:inline-flex; align-items:center; gap:9px; color:#c8f8d6; font-size:.78rem; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
.status::before { content:""; width:8px; height:8px; border-radius:50%; background:#57e889; box-shadow:0 0 16px rgba(87,232,137,.8); }
.sku { color:#6f7480; font-size:.78rem; font-weight:750; }
.details h2 { margin:31px 0 4px; font-size:clamp(2.2rem,4.4vw,4.4rem); line-height:.95; letter-spacing:-.055em; }
.producer { margin:0; color:var(--muted); font-weight:650; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 26px; }
.tag { padding:7px 11px; border:1px solid var(--line); border-radius:99px; color:#c7cad2; font-size:.74rem; font-weight:750; }

.player { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:15px; padding:15px; border:1px solid var(--line); border-radius:17px; background:rgba(0,0,0,.24); }
.play { width:48px; height:48px; display:grid; place-items:center; border:0; border-radius:50%; color:white; background:var(--red); cursor:pointer; transition:transform .18s ease,background .18s ease; }
.play:hover { transform:scale(1.04); background:#ff4b65; }
.play svg { width:18px; height:18px; fill:currentColor; }
.timeline { display:grid; gap:6px; }
.track-label { color:#e3e4e8; font-size:.82rem; font-weight:800; }
.progress { width:100%; height:5px; margin:0; accent-color:var(--red); cursor:pointer; }
.time { min-width:42px; color:#8f939d; font-variant-numeric:tabular-nums; font-size:.78rem; text-align:right; }

.buy-row { display:grid; grid-template-columns:1fr auto; align-items:end; gap:24px; margin-top:auto; padding-top:30px; }
.price-label { display:block; margin-bottom:3px; color:#878b96; font-size:.72rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.price { font-size:clamp(2.2rem,5vw,4rem); line-height:1; font-weight:950; letter-spacing:-.055em; }
.buy { min-height:54px; padding:0 23px; border:0; border-radius:99px; color:white; background:var(--red); box-shadow:0 12px 40px rgba(255,49,79,.24); font-weight:850; cursor:pointer; transition:transform .18s ease,background .18s ease; }
.buy:hover { transform:translateY(-2px); background:#ff4b65; }
.price-note { grid-column:1/-1; margin:-11px 0 0; color:#777c88; font-size:.78rem; }

.included { padding:0 0 100px; }
.included h3 { margin:0 0 24px; font-size:clamp(1.8rem,3.5vw,3rem); letter-spacing:-.045em; }
.included-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.included-item { min-height:145px; padding:22px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); }
.included-item strong { display:block; margin-bottom:8px; font-size:1.02rem; }
.included-item span { color:var(--muted); font-size:.9rem; }
.included-item .num { display:block; margin-bottom:30px; color:var(--red); font-size:.73rem; font-weight:850; }

footer { padding:30px 0 42px; border-top:1px solid var(--line); }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:22px; color:#777c88; font-size:.84rem; }
.footer-links { display:flex; gap:18px; }
.footer-links a { text-decoration:none; }
.footer-links a:hover { color:white; }

dialog { width:min(calc(100% - 32px),530px); padding:0; border:1px solid rgba(255,255,255,.18); border-radius:24px; color:var(--text); background:#11131a; box-shadow:0 35px 120px rgba(0,0,0,.72); }
dialog::backdrop { background:rgba(0,0,0,.74); backdrop-filter:blur(7px); }
.modal { padding:27px; }
.modal-top { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.modal .eyebrow { margin-bottom:9px; }
.modal h3 { margin:0; font-size:2rem; letter-spacing:-.045em; }
.close { width:38px; height:38px; border:1px solid var(--line); border-radius:50%; color:white; background:transparent; cursor:pointer; }
.order { display:grid; grid-template-columns:1fr auto; gap:10px; margin:25px 0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.order span { color:var(--muted); }
.order strong:last-child { text-align:right; }
.demo-note { margin:0 0 21px; padding:14px 15px; border:1px solid rgba(103,215,255,.24); border-radius:12px; color:#c4eefa; background:rgba(103,215,255,.06); font-size:.9rem; }
.checkout { width:100%; min-height:52px; border:0; border-radius:99px; color:#8e929c; background:#242731; font-weight:850; cursor:not-allowed; }

@media (max-width:850px) {
  .shop-head-grid { grid-template-columns:1fr; }
  .demo-badge { justify-self:start; }
  .product { grid-template-columns:1fr; }
  .cover { min-height:480px; }
  .included-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
  .wrap { width:min(calc(100% - 26px),var(--max)); }
  .nav { height:70px; }
  .nav-links a:not(.nav-active) { display:none; }
  .shop-head { padding:58px 0 30px; }
  h1 { font-size:clamp(3.2rem,18vw,5.3rem); }
  .product { margin-bottom:72px; border-radius:20px; }
  .cover { min-height:400px; padding:25px; }
  .details { padding:25px; }
  .player { grid-template-columns:auto 1fr; }
  .time { grid-column:2; text-align:left; }
  .buy-row { grid-template-columns:1fr; }
  .buy { width:100%; }
  .included-grid { grid-template-columns:1fr; }
  .footer-inner { align-items:flex-start; flex-direction:column; }
}