:root {
  --orange:#E55D29; --orange-hover:#CC5124;
  --orange-dim:rgba(229,93,41,0.12); --orange-border:rgba(229,93,41,0.35);
  --blue:#185D89; --blue-dim:rgba(24,93,137,0.15); --blue-border:rgba(24,93,137,0.35); --blue-soft:#7FB8E0;
  --bg:#0D0D0F; --bg2:#111114; --bg3:#17171B; --bg4:#1E1E24; --bg5:#242429;
  --line:rgba(255,255,255,0.06); --line2:rgba(255,255,255,0.10);
  --text:#EEEEF2; --muted:#A8A8BC; --muted2:#6E6E82; --white:#ffffff;
  --green:#3DB87A;
  --font-d:"Bebas Neue",sans-serif; --font-b:"Outfit",sans-serif;
  --ease:cubic-bezier(0.4,0,0.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--font-b);font-size:16px;line-height:1.65;overflow-x:hidden;}
body::before{content:"";position:fixed;inset:0;z-index:1000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:.35;}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;height:68px;
  display:flex;align-items:center;justify-content:space-between;padding:0 48px;
  background:rgba(13,13,15,0.92);backdrop-filter:blur(24px);border-bottom:1px solid var(--line);}
.nav-logo img{height:34px;width:auto;mix-blend-mode:lighten;}
.nav-back{display:inline-flex;align-items:center;gap:8px;color:var(--muted);
  font-size:14px;font-weight:500;text-decoration:none;transition:color .2s;}
.nav-back:hover{color:var(--text);}

/* PAGE HEADER */
.page-header{padding:140px 48px 56px;text-align:center;position:relative;overflow:hidden;}
.page-header::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 100% at 50% 0%,black 10%,transparent 100%);}
.page-header::after{content:"";position:absolute;pointer-events:none;
  width:600px;height:600px;top:-200px;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(229,93,41,0.07) 0%,transparent 65%);}
.header-tag{display:inline-flex;align-items:center;gap:8px;
  background:var(--orange-dim);border:1px solid var(--orange-border);
  border-radius:100px;padding:5px 14px;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);
  margin-bottom:20px;position:relative;z-index:2;}
.header-tag-dot{width:6px;height:6px;border-radius:50%;background:var(--orange);animation:blink 2s ease infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.page-h1{font-family:var(--font-d);font-size:clamp(48px,6vw,84px);
  color:var(--white);line-height:.95;letter-spacing:.02em;margin-bottom:16px;position:relative;z-index:2;}
.page-h1 em{color:var(--orange);font-style:normal;}
.page-sub{font-size:18px;color:var(--muted);max-width:580px;margin:0 auto 0;
  line-height:1.75;position:relative;z-index:2;}

/* MAIN LAYOUT */
.main{max-width:1240px;margin:0 auto;padding:48px 48px 80px;
  display:grid;grid-template-columns:1fr 420px;gap:64px;align-items:start;}

/* LEFT — labels + intro */
.section-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange);margin-bottom:20px;display:flex;align-items:center;gap:10px;}
.section-label::before{content:"";display:block;width:18px;height:2px;background:var(--orange);border-radius:2px;}
.intro-box{background:var(--bg3);border:1px solid var(--line2);border-radius:16px;
  padding:24px 28px;margin-bottom:28px;position:relative;overflow:hidden;}
.intro-box::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);}
.intro-title{font-family:var(--font-d);font-size:24px;color:var(--white);letter-spacing:.03em;margin-bottom:8px;}
.intro-text{font-size:15px;color:var(--muted);line-height:1.7;}
.intro-text strong{color:var(--text);font-weight:600;}

/* CONFIGURATOR CARDS */
.cfg-card{background:var(--bg3);border:1px solid var(--line2);border-radius:16px;
  padding:22px 24px;margin-bottom:20px;}
.cfg-card.blue{border-color:var(--blue-border);}
.cfg-h{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;}
.cfg-card.blue .cfg-h{color:var(--blue-soft);}

/* Sliders */
.cfg-slider{padding:16px 0;border-top:1px solid var(--line);}
.cfg-slider:first-of-type{border-top:none;}
.cfg-slider-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;}
.cfg-slider-label{font-size:15px;font-weight:500;color:var(--text);}
.cfg-slider-label .cfg-q{display:block;font-size:12px;color:var(--muted2);font-weight:400;margin-top:2px;}
.cfg-slider-val{font-family:var(--font-d);font-size:30px;line-height:1;color:var(--orange);
  letter-spacing:.02em;font-variant-numeric:tabular-nums;}
.cfg-slider-read{font-size:12px;color:var(--muted);margin-top:10px;font-variant-numeric:tabular-nums;}
.cfg-slider-read b{color:var(--text);font-weight:600;}
.cfg-note{font-size:12.5px;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);margin-top:4px;padding-top:14px;}
.cfg-note .free{color:var(--green);font-weight:700;}
.cfg-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;
  background:var(--bg5);outline:none;cursor:pointer;}
.cfg-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;
  border-radius:50%;background:var(--orange);border:3px solid var(--bg3);
  box-shadow:0 0 0 1px var(--orange-border);transition:transform .12s;}
.cfg-range::-webkit-slider-thumb:active{transform:scale(1.15);}
.cfg-range::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--orange);
  border:3px solid var(--bg3);box-shadow:0 0 0 1px var(--orange-border);}

/* Radio option rows */
.cfg-opt{display:flex;gap:14px;align-items:flex-start;padding:14px 0;
  border-top:1px solid var(--line);cursor:pointer;}
.cfg-opt:first-of-type{border-top:none;}
.cfg-opt input{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex-shrink:0;margin-top:2px;
  border:2px solid var(--line2);border-radius:50%;cursor:pointer;position:relative;transition:border-color .2s;}
.cfg-opt input:checked{border-color:var(--orange);}
.cfg-opt input:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--orange);}
.cfg-opt-body{flex:1;min-width:0;}
.cfg-opt-title{font-size:15px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.cfg-opt-desc{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.55;}
.cfg-inc{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--green);
  background:rgba(61,184,122,.12);border-radius:6px;padding:2px 8px;}
.cfg-add{font-size:13px;font-weight:600;color:var(--orange);}

/* Info tooltip */
.cfg-info{width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);
  background:var(--bg4);color:var(--muted);font-size:11px;font-weight:700;font-family:var(--font-b);
  cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center;}
.cfg-info:hover{color:var(--text);border-color:var(--orange-border);}
.cfg-tip{display:none;margin:4px 0 0;background:var(--bg4);border:1px solid var(--line2);
  border-radius:10px;padding:12px 14px;font-size:13px;color:var(--muted);line-height:1.6;}
.cfg-tip.show{display:block;}

/* Checkbox add-on rows */
.cfg-check{display:flex;gap:14px;align-items:center;padding:14px 0;
  border-top:1px solid var(--line);cursor:pointer;}
.cfg-check:first-of-type{border-top:none;}
.cfg-check input{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex-shrink:0;
  border:2px solid var(--line2);border-radius:6px;cursor:pointer;position:relative;transition:all .2s;}
.cfg-check input:checked{border-color:var(--orange);background:var(--orange);}
.cfg-card.blue .cfg-check input:checked{border-color:var(--blue);background:var(--blue);}
.cfg-check input:checked::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;
  border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg);}
.cfg-check-body{flex:1;min-width:0;}
.cfg-check-title{font-size:15px;font-weight:500;color:var(--text);display:flex;align-items:center;gap:8px;}
.cfg-check-desc{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.5;}
.cfg-check-price{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums;}
.cfg-card.blue .cfg-check-price{color:var(--blue-soft);}
.cfg-rec{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-soft);
  background:var(--blue-dim);border-radius:5px;padding:2px 7px;}
.cfg-tags{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0 3px;}
.cfg-tag{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--orange);
  background:var(--orange-dim);border:1px solid var(--orange-border);border-radius:5px;padding:2px 8px;}

/* SUMMARY CARD */
.form-card{position:sticky;top:88px;background:var(--bg3);
  border:1px solid var(--line2);border-radius:20px;overflow:hidden;}
.form-card::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--orange),var(--blue));}
.form-card-header{padding:20px 28px 16px;border-bottom:1px solid var(--line);}
.form-card-title{font-family:var(--font-d);font-size:22px;color:var(--white);letter-spacing:.04em;margin-bottom:4px;}
.form-card-sub{font-size:13px;color:var(--muted);}
.form-body{padding:18px 28px;}

.cfg-breakdown{display:flex;flex-direction:column;gap:0;margin-bottom:8px;}
.cfg-breakdown .li{display:flex;justify-content:space-between;gap:14px;
  font-size:14px;color:var(--muted);padding:4px 0;line-height:1.4;}
.cfg-breakdown .li span:last-child{color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums;}
.cfg-breakdown .li-inc span:last-child{color:var(--green);font-weight:600;}
.cfg-breakdown .li-disc span:last-child{color:var(--green);font-weight:600;}
.cfg-breakdown .li-recwrap{border-top:1px solid var(--line);margin-top:6px;padding-top:4px;}
.cfg-breakdown .li-rec{color:var(--blue-soft);}
.cfg-breakdown .li-rec span:last-child{color:var(--blue-soft);}
.cfg-breakdown:empty{display:none;}

.cfg-total-row{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--line2);margin-top:8px;padding-top:14px;}
.cfg-total-row>span:first-child{font-size:14px;font-weight:600;color:var(--text);}
.cfg-total{font-family:var(--font-d);font-size:30px;color:var(--white);letter-spacing:.02em;font-variant-numeric:tabular-nums;}
.cfg-mo-block{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;}
.cfg-mo-block>span:first-child{font-size:13px;color:var(--muted);}
.cfg-mo{font-size:18px;font-weight:600;color:var(--blue-soft);font-variant-numeric:tabular-nums;}

.submit-btn{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:15px;background:var(--orange);color:white;
  font-family:var(--font-b);font-size:15px;font-weight:700;
  border:none;border-radius:12px;cursor:pointer;
  transition:background .2s,transform .15s;margin-top:16px;}
.submit-btn:hover{background:var(--orange-hover);transform:translateY(-1px);}
.form-guarantee{display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:12px;font-size:12px;color:var(--muted2);text-align:center;line-height:1.5;}

/* FOOTER */
footer{padding:36px 48px;border-top:1px solid var(--line);}
.footer-inner{max-width:1240px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.footer-brand{font-family:var(--font-d);font-size:16px;color:var(--muted2);letter-spacing:.06em;}
.footer-copy{font-size:12px;color:var(--muted2);}

/* REVEAL */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}
@keyframes revealFallback{to{opacity:1;transform:translateY(0)}}
.page-header .reveal{animation:revealFallback 0s .8s forwards;}

/* RESPONSIVE */
@media (max-width:880px){
  nav{padding:0 24px;}
  .page-header{padding:120px 24px 40px;}
  .main{grid-template-columns:1fr;gap:28px;padding:32px 24px 64px;}
  .form-card{position:static;}
  footer{padding:32px 24px;}
}