/* Shared starry-sky design for page A and page B */
:root { --text:#eef0ff; --muted:#aab0d6; --card:rgba(18,20,58,.78); --line:rgba(255,255,255,.13); --accent:#6c56f0; --accent-soft:rgba(143,123,255,.2); --pill:#d4caff; --warm:rgba(255,200,90,.09); --warm-line:rgba(255,200,90,.35); --mark:#ff4fa3; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--text); line-height:1.6; 
  background-color:#070920;
  background-image:
    radial-gradient(1px 1px at 20px 30px,#fff,transparent),
    radial-gradient(1px 1px at 120px 80px,rgba(255,255,255,.8),transparent),
    radial-gradient(1.5px 1.5px at 200px 150px,#fff,transparent),
    radial-gradient(1px 1px at 60px 190px,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 260px 40px,#fff,transparent),
    radial-gradient(1.5px 1.5px at 160px 10px,rgba(200,210,255,.9),transparent),
    radial-gradient(ellipse at 15% 10%,rgba(123,63,191,.45),transparent 50%),
    radial-gradient(ellipse at 85% 55%,rgba(29,111,209,.35),transparent 55%),
    radial-gradient(ellipse at 30% 95%,rgba(190,60,160,.25),transparent 50%);
  background-size:300px 220px,300px 220px,300px 220px,300px 220px,300px 220px,300px 220px,100% 100%,100% 100%,100% 100%;
  background-attachment:fixed; }
a { color:#b9adff; }
.wrap { max-width:960px; margin:0 auto; padding:0 16px; }
nav { display:flex; justify-content:space-between; align-items:center; padding:18px 0; font-size:14px; color:var(--muted); gap:12px; flex-wrap:wrap; }

.hero { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; padding:28px 0; }
@media (max-width:760px) { .hero { grid-template-columns:1fr; } }
h1 { font-size:clamp(28px,4.5vw,40px); line-height:1.15; margin:10px 0 12px; letter-spacing:-.4px; }
.lead { font-size:17px; color:var(--muted); }
h2 { font-size:24px; margin:52px 0 14px; }
.price { font-size:38px; font-weight:700; margin:10px 0 2px; }
.price small { display:block; font-size:14px; font-weight:400; color:var(--muted); }
.pill { display:inline-block; background:var(--accent-soft); color:var(--pill); font-size:13px; font-weight:600; padding:4px 12px; border-radius:99px; }
.small { font-size:14px; color:var(--muted); }
.btn { background:var(--accent); color:#fff; border:0; border-radius:10px; padding:14px 28px; font-size:17px; font-weight:600; cursor:pointer; margin-top:12px; width:100%; }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.facts div { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; font-size:14px; color:var(--muted); }
.facts b { display:block; font-size:18px; color:var(--text); }
.panel { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 22px; }
.warm { background:var(--warm); border:1px solid var(--warm-line); border-radius:12px; padding:18px 22px; }
.warm h3, .panel h3 { margin-top:0; }
.bundle { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0 4px; }
.bundle label { border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; font-size:14px; cursor:pointer; background:var(--card); display:block; position:relative; transition:border-color .15s, background .15s; }
.bundle label:has(input:checked) { border-color:var(--accent); background:rgba(108,86,240,.22); }
.bundle input { position:absolute; opacity:0; pointer-events:none; }
.bundle b { display:block; }
details { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin-bottom:8px; }
summary { cursor:pointer; font-weight:600; }
table.spec { width:100%; border-collapse:collapse; font-size:14px; }
table.spec td { padding:8px 4px; border-bottom:1px solid var(--line); }
table.spec td:first-child { color:var(--muted); width:45%; }
footer { margin-top:60px; padding:24px 0; border-top:1px solid var(--line); font-size:12px; color:var(--muted); line-height:1.5; }
.gallery { display:flex; flex-direction:column; gap:10px; }
.main-img { position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 20px 60px rgba(80,60,200,.35); aspect-ratio:1; }
.main-img img { width:100%; height:100%; object-fit:cover; display:block; }
.thumbs { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.thumbs button { padding:0; border:2px solid transparent; border-radius:10px; overflow:hidden; cursor:pointer; background:none; aspect-ratio:1; }
.thumbs button.on { border-color:var(--accent); }
.thumbs img { width:100%; height:100%; object-fit:cover; display:block; }
.feature { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
@media (max-width:760px) { .feature { grid-template-columns:1fr; } }
.feature img { width:100%; border-radius:14px; display:block; }
.fine { font-size:12px; color:var(--muted); line-height:1.5; }
.fine p { margin:0 0 8px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); font-size:20px; font-weight:700; letter-spacing:.3px; text-decoration:none; }
.brand img { width:38px; height:38px; border-radius:9px; display:block; }
.cta-end { display:grid; grid-template-columns:96px 1fr minmax(180px,auto); gap:18px; align-items:center; margin-top:44px; }
.cta-end img { width:96px; height:96px; border-radius:12px; object-fit:cover; display:block; }
.cta-end .price { font-size:28px; margin:0; }
.cta-end .btn { width:auto; margin:0; }
@media (max-width:560px) { .cta-end { grid-template-columns:72px 1fr; } .cta-end img { width:72px; height:72px; } .cta-end .btn { grid-column:1 / -1; width:100%; } }
.doc { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px clamp(18px,4vw,40px); margin:12px 0 0; max-width:780px; }
.doc h1 { font-size:clamp(26px,4vw,34px); margin:0 0 4px; }
.doc h2 { font-size:19px; margin:30px 0 8px; }
.doc p, .doc li { color:#d7dbf5; }
.doc ol, .doc ul { padding-left:22px; }
.doc li { margin-bottom:6px; }
.form-box { border:1px dashed var(--line); border-radius:10px; padding:16px 20px; margin:18px 0; }
.fill { display:inline-block; min-width:220px; border-bottom:1px solid var(--muted); height:1em; vertical-align:bottom; }
.btn.print { width:auto; }
@media print {
  body { background:#fff; color:#000; }
  nav, footer, .btn.print { display:none; }
  .doc { background:#fff; border:0; color:#000; }
  .doc p, .doc li, .doc a { color:#000; }
  .fill { border-bottom-color:#000; }
}
.feature .fit { display:flex; flex-direction:column; justify-content:space-between; }
.feature .fit p { margin:0 !important; }