:root { color-scheme:dark; --orange:#ff7a00; --orange-soft:rgba(255,122,0,.13); --page:#050505; --panel:#121316; --line:#2b2e35; --muted:#aeb3bd; }
* { box-sizing:border-box; }
body { margin:0; background:var(--page); color:#f7f7f7; font-family:Inter,Arial,sans-serif; line-height:1.5; }
.site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid #202228; background:rgba(5,5,5,.94); backdrop-filter:blur(14px); }
.header-inner { width:min(100% - 48px,1320px); min-height:76px; margin:auto; display:flex; align-items:center; gap:38px; }
.brand img { display:block; width:154px; height:auto; }
nav { display:flex; align-items:center; gap:30px; margin-right:auto; }
nav a,.outline-btn { color:#d9dadd; text-decoration:none; font-size:14px; font-weight:700; }
nav a:hover { color:var(--orange); }
.header-actions { display:flex; align-items:center; gap:14px; }
#accountStatus { color:var(--muted); font-size:13px; }
.language-selector { width:auto; padding:8px 30px 8px 10px; border:1px solid #41444c; border-radius:7px; background:#080808; color:#fff; }
.outline-btn { padding:9px 15px; border:1px solid #41444c; border-radius:7px; }
.outline-btn:hover { border-color:var(--orange); color:#fff; }
main { width:min(100% - 48px,1180px); margin:0 auto 70px; }
.hero { position:relative; overflow:hidden; margin:0 calc((100vw - min(100vw - 48px,1180px)) / -2) 34px; padding:76px max(24px,calc((100vw - 1180px) / 2)) 62px; border-bottom:1px solid #23252a; background:linear-gradient(90deg,#080808 0%,rgba(8,8,8,.93) 44%,rgba(8,8,8,.65) 100%),url('/assets/checkout-hero.png') center 43% / cover; }
.hero h1 { max-width:720px; margin:5px 0 12px; font-size:clamp(35px,5vw,58px); line-height:1.04; }
.hero p { max-width:660px; margin:0; color:#c1c4ca; font-size:17px; }
.eyebrow,.step { margin:0 0 8px; color:var(--orange); font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.card { margin-bottom:22px; padding:30px; border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:0 18px 50px rgba(0,0,0,.16); }
h1,h2,h3 { margin-top:0; }
h2 { margin-bottom:20px; font-size:25px; }
.muted { color:var(--muted); }
.grid.two { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.products { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.product { display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-height:205px; padding:22px; text-align:left; border:1px solid #383b43; border-radius:12px; background:#0d0e10; color:#fff; cursor:pointer; transition:border-color .15s ease,transform .15s ease,background .15s ease; }
.product:hover { border-color:#87532c; transform:translateY(-2px); background:#111215; }
.product.selected { padding:21px; border:2px solid var(--orange); background:linear-gradient(145deg,var(--orange-soft),#0d0e10 58%); box-shadow:0 0 0 3px rgba(255,122,0,.08); }
.product-name { display:block; font-size:20px; font-weight:800; line-height:1.2; }
.product-specs { display:block; min-height:42px; color:#f0c9a5; font-size:13px; font-weight:700; }
.price,.total-price { margin-top:auto; font-size:29px; font-weight:850; line-height:1; }
.options { display:grid; gap:16px; margin-top:22px; }
.option-row { display:grid; grid-template-columns:190px 1fr; align-items:center; gap:30px; padding:22px; border:1px solid var(--line); border-radius:11px; background:#0d0e10; }
.option-label { font-size:17px; font-weight:800; }
.slider-control { min-width:0; }
.slider-value { display:block; margin-bottom:11px; color:#fff; font-size:16px; text-align:right; }
input[type='range'] { width:100%; height:6px; margin:8px 0; padding:0; border:0; border-radius:999px; background:#33363d; accent-color:var(--orange); cursor:pointer; }
input[type='range']::-webkit-slider-thumb { width:20px; height:20px; border:3px solid #111; border-radius:50%; background:var(--orange); box-shadow:0 0 0 2px var(--orange); appearance:none; }
.slider-scale { display:flex; justify-content:space-between; margin-top:5px; color:#858a94; font-size:12px; }
.term-section { margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
.term-section h3 { margin-bottom:3px; }
.terms { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:17px; }
.term { display:flex; flex-direction:column; gap:3px; padding:15px; border:1px solid #383b43; background:#0d0e10; }
.term span { color:var(--muted); font-size:12px; }
.term.selected { border:2px solid var(--orange); padding:14px; background:var(--orange-soft); }
.package-recommendation { display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px 20px; margin-top:20px; padding:18px; border:1px solid #8b591e; border-radius:10px; background:#21170d; }
.package-recommendation strong,.package-recommendation span { grid-column:1; }
.package-recommendation button { grid-column:2; grid-row:1 / span 2; }
input:not([type='range']),select { width:100%; padding:13px; border:1px solid #414550; border-radius:8px; background:#0b0c0e; color:#fff; }
form input { margin:7px 0; }
button { padding:13px 19px; border:0; border-radius:8px; background:var(--orange); color:#fff; font-weight:800; cursor:pointer; }
form button,.summary-action button { margin-top:12px; }
button:disabled { opacity:.45; cursor:not-allowed; }
.summary-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:30px; border-color:#3d332b; }
.summary-action { min-width:235px; text-align:right; }
.legal-acceptance { grid-column:1 / -1; padding:20px; border:1px solid #4b3b2e; border-radius:10px; background:#0d0e10; }
.legal-acceptance h3 { margin-bottom:12px; }
.legal-acceptance label { display:flex; gap:11px; align-items:flex-start; margin:11px 0; color:#d8dbe2; }
.legal-acceptance input { width:18px; height:18px; flex:0 0 auto; margin-top:2px; accent-color:var(--orange); }
.legal-acceptance a,.legal-footer a { color:#ff9a50; }
.legal-region-note { margin:14px 0 0; color:var(--muted); font-size:13px; }
.legal-footer { display:flex; justify-content:space-between; gap:20px; width:min(100% - 48px,1180px); margin:0 auto; padding:24px 0 38px; border-top:1px solid #24262b; color:var(--muted); font-size:13px; }
.legal-footer nav { display:flex; gap:18px; margin:0; }
.configuration-details { display:flex; flex-wrap:wrap; gap:8px; }
.configuration-pill { padding:7px 11px; border:1px solid #343741; border-radius:999px; background:#202228; color:#d8dbe2; font-size:13px; }
.stage-intro { margin:38px 0 18px; }
.hidden { display:none!important; }
.notice { margin:0 0 20px; padding:13px; border-radius:8px; background:#242730; }
.error { border:1px solid #a33; }
.success { border:1px solid #287a45; }
.result-page { display:grid; min-height:100vh; place-content:center; width:min(100% - 30px,720px); margin:auto; }
.result-page>img { width:180px; margin:0 auto 25px; }
.result-page .card { text-align:center; }
.result-actions { display:flex; justify-content:center; gap:12px; margin-top:25px; }
.button-link { padding:10px 16px; border-radius:7px; background:var(--orange); color:#fff; font-weight:800; text-decoration:none; }
@media(max-width:850px) { nav{display:none}.header-inner{width:min(100% - 30px,1180px);gap:16px}.header-actions{margin-left:auto}#accountStatus{display:none}main{width:min(100% - 30px,1180px)}.hero{margin-left:-15px;margin-right:-15px;padding:54px 24px 46px} }
@media(max-width:720px) { .grid.two,.summary-card,.option-row{grid-template-columns:1fr}.card{padding:22px}.summary-action,.slider-value{text-align:left}.brand img{width:128px}.outline-btn{padding:8px 10px;font-size:12px}.terms{grid-template-columns:1fr 1fr}.package-recommendation{grid-template-columns:1fr}.package-recommendation button{grid-column:1;grid-row:auto}.legal-footer{flex-direction:column;width:min(100% - 30px,1180px)}.legal-footer nav{display:flex;flex-wrap:wrap} }