/* ============================================================
   CSTUN — тёмный премиум. Дизайн-система.
   ============================================================ */
:root{
  --bg:#12121A; --bg-2:#0E0E15; --surface:#1E1E2A; --surface-2:#262636;
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.14);
  --gold:#C9A227; --gold-2:#E6C14A; --violet:#7C3AED; --violet-2:#9D5CFF;
  --text:#F5F5F7; --muted:#9A9AAC; --danger:#ff5468; --ok:#3ddc84;
  --radius:16px; --radius-sm:10px; --maxw:1240px;
  --shadow:0 20px 50px -20px rgba(0,0,0,.7);
  --glow-gold:0 0 0 1px rgba(201,162,39,.35), 0 8px 30px -6px rgba(201,162,39,.35);
  --grad:linear-gradient(120deg,var(--gold),var(--violet));
  --grad-soft:linear-gradient(120deg,rgba(201,162,39,.14),rgba(124,58,237,.14));
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* фоновое свечение */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(600px 400px at 15% -5%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(201,162,39,.12), transparent 55%),
    radial-gradient(500px 500px at 50% 120%, rgba(124,58,237,.10), transparent 60%);
}
h1,h2,h3,h4{font-family:"Space Grotesk","Inter",sans-serif; line-height:1.15; margin:0 0 .5em; font-weight:600;}
h1{font-size:clamp(2rem,5vw,3.4rem); letter-spacing:-.02em;}
h2{font-size:clamp(1.5rem,3.2vw,2.3rem); letter-spacing:-.01em;}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.muted{color:var(--muted)}
.gradient-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.center{text-align:center}
section{padding:64px 0}

/* ---------- навбар ---------- */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:rgba(14,14,21,.72); border-bottom:1px solid var(--border);}
.nav-in{display:flex; align-items:center; gap:24px; height:66px}
.brand{display:flex; align-items:center; gap:10px; font-family:"Space Grotesk"; font-weight:700; font-size:1.35rem; letter-spacing:.02em}
.brand .dot{width:12px; height:12px; border-radius:50%; background:var(--grad); box-shadow:var(--glow-gold)}
.nav-links{display:flex; gap:6px; margin-left:auto; align-items:center}
.nav-links a{padding:9px 14px; border-radius:10px; color:var(--muted); font-weight:500; transition:.25s var(--ease)}
.nav-links a:hover{color:var(--text); background:var(--surface)}
.nav-links a.active{color:var(--text)}
.burger{display:none; margin-left:auto; background:none; border:0; color:var(--text); font-size:1.6rem; cursor:pointer}

/* ---------- кнопки ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border-radius:12px;
  font-weight:600; font-family:inherit; cursor:pointer; border:1px solid transparent;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .25s; font-size:.98rem;}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad); color:#141018; box-shadow:var(--glow-gold)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(201,162,39,.5),0 14px 40px -8px rgba(201,162,39,.5)}
.btn-ghost{background:var(--surface); color:var(--text); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--border-2); background:var(--surface-2)}
.btn-gold{background:var(--gold); color:#1a1408}
.btn-sm{padding:8px 14px; font-size:.88rem}
.btn-danger{background:rgba(255,84,104,.14); color:var(--danger); border-color:rgba(255,84,104,.3)}
.btn-block{width:100%; justify-content:center}

/* ---------- бейджи ---------- */
.badge{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  font-size:.76rem; font-weight:600; border:1px solid var(--border-2); color:var(--muted)}
.badge-pro{background:var(--grad); color:#141018; border:0}
.badge-gold{color:var(--gold-2); border-color:rgba(201,162,39,.4); background:rgba(201,162,39,.08)}
.badge-type{color:var(--violet-2); border-color:rgba(124,58,237,.4); background:rgba(124,58,237,.1)}
.badge-ok{color:var(--ok); border-color:rgba(61,220,132,.35)}
.badge-off{color:var(--muted)}

/* ---------- hero ---------- */
.hero{position:relative; padding:90px 0 70px; overflow:hidden}
.hero h1{margin-bottom:.35em}
.hero p.lead{font-size:1.2rem; color:var(--muted); max-width:640px; margin:0 auto 2em}
.hero.center .cta{justify-content:center}
.cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-stats{display:flex; gap:38px; flex-wrap:wrap; margin-top:56px; justify-content:center}
.hero-stats .s b{font-family:"Space Grotesk"; font-size:2.2rem; display:block; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-stats .s span{color:var(--muted); font-size:.9rem}

/* ---------- карточки / сетки ---------- */
.grid{display:grid; gap:18px}
.grid-brands{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; transition:transform .28s var(--ease), border-color .28s, box-shadow .28s; position:relative; overflow:hidden}
.card::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .3s}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.card:hover::after{opacity:.6}
.card-link{cursor:pointer}
.brand-card{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:26px 14px; text-align:center; min-height:120px}
.brand-card .b-name{font-family:"Space Grotesk"; font-weight:600; font-size:1.05rem}
.brand-card .b-count{font-size:.8rem; color:var(--muted)}
.brand-card .b-logo{width:44px; height:44px; border-radius:12px; background:var(--grad-soft);
  display:grid; place-items:center; font-family:"Space Grotesk"; font-weight:700; color:var(--gold-2)}

/* строка ЭБУ / модели */
.row-item{display:flex; align-items:center; gap:16px; padding:16px 18px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm); transition:.25s var(--ease); cursor:pointer}
.row-item:hover{border-color:var(--border-2); background:var(--surface-2); transform:translateX(4px)}
.row-item .ico{width:40px; height:40px; border-radius:10px; background:var(--grad-soft); display:grid; place-items:center; color:var(--gold-2); flex:0 0 auto}
.row-item .rt{flex:1; min-width:0}
.row-item .rt b{display:block; font-weight:600}
.row-item .rt small{color:var(--muted)}
.chev{color:var(--muted); flex:0 0 auto}

/* ---------- таблицы ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:.94rem}
.tbl th,.tbl td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--border)}
.tbl th{color:var(--muted); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em}
.tbl tr:hover td{background:var(--surface)}
.tbl .spec{color:var(--muted)}

/* ---------- крошки ---------- */
.crumbs{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:.9rem; margin:22px 0 26px; flex-wrap:wrap}
.crumbs a:hover{color:var(--gold-2)}
.crumbs .sep{opacity:.5}

/* ---------- формы ---------- */
.form{max-width:420px; margin:0 auto}
.field{margin-bottom:16px}
.field label{display:block; margin-bottom:7px; font-size:.9rem; color:var(--muted)}
.input,select,textarea{width:100%; padding:13px 15px; background:var(--bg-2); border:1px solid var(--border);
  border-radius:11px; color:var(--text); font:inherit; transition:.2s}
.input:focus,select:focus,textarea:focus{outline:0; border-color:var(--violet); box-shadow:0 0 0 3px rgba(124,58,237,.2)}
.auth-wrap{min-height:calc(100vh - 66px); display:grid; place-items:center; padding:40px 20px}
.auth-card{width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border);
  border-radius:22px; padding:38px 34px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.auth-card::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad)}

/* ---------- панель спецификаций ЭБУ ---------- */
.spec-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px}
.spec-box{background:var(--bg-2); border:1px solid var(--border); border-radius:12px; padding:14px 16px}
.spec-box .k{font-size:.78rem; color:var(--muted); margin-bottom:3px}
.spec-box .v{font-weight:600; font-family:"Space Grotesk"}
.pinout{border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; background:#fff;
  max-height:300px; cursor:zoom-in; position:relative; display:flex; align-items:center; justify-content:center}
.pinout img{width:100%; height:100%; max-height:300px; object-fit:contain}
.pinout::after{content:"⤢ увеличить"; position:absolute; bottom:8px; right:10px; background:rgba(6,6,12,.7);
  color:#fff; font-size:.72rem; padding:4px 9px; border-radius:8px; opacity:0; transition:.25s}
.pinout:hover::after{opacity:1}

/* модалка / лайтбокс */
.modal-overlay{position:fixed; inset:0; z-index:100; background:rgba(6,6,12,.85); backdrop-filter:blur(9px);
  display:none; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .25s}
.modal-overlay.open{display:flex; opacity:1}
.modal-box{background:var(--surface); border:1px solid var(--border-2); border-radius:var(--radius);
  max-width:720px; width:100%; max-height:85vh; overflow:auto; padding:28px 30px; position:relative;
  transform:translateY(14px) scale(.98); transition:transform .3s var(--ease); box-shadow:var(--shadow)}
.modal-overlay.open .modal-box{transform:none}
.modal-box::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); border-radius:var(--radius) var(--radius) 0 0}
.modal-close{position:fixed; top:20px; right:26px; background:var(--surface-2); border:1px solid var(--border-2);
  color:var(--text); width:42px; height:42px; border-radius:50%; font-size:1.5rem; cursor:pointer; line-height:1;
  z-index:101; transition:.2s}
.modal-close:hover{background:var(--danger); color:#fff; transform:rotate(90deg)}
.modal-title{font-family:'Space Grotesk'; font-weight:600; font-size:1.2rem; margin-bottom:14px; padding-right:20px}
.modal-text{white-space:pre-wrap; color:var(--text); line-height:1.65; font-size:.95rem}
.modal-img{max-width:94vw; max-height:90vh; background:#fff; border-radius:10px; cursor:zoom-out; box-shadow:var(--shadow)}
.link-desc{background:none; border:0; color:var(--gold-2); cursor:pointer; font-size:.86rem; font-family:inherit;
  padding:8px 0 0; display:inline-flex; align-items:center; gap:5px; transition:.2s}
.link-desc:hover{color:var(--gold)}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{padding:6px 12px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); font-size:.85rem}
.chip.on{color:var(--gold-2); border-color:rgba(201,162,39,.4)}

/* панель РРЦ */
.price-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px}
.price-card{background:var(--grad-soft); border:1px solid var(--border-2); border-radius:14px; padding:16px}
.price-card .mode{font-size:.8rem; color:var(--muted)}
.price-card .val{font-family:"Space Grotesk"; font-size:1.4rem; font-weight:600; margin-top:4px}

/* флеш */
.flash{padding:13px 18px; border-radius:12px; margin-bottom:16px; border:1px solid var(--border-2)}
.flash.info{background:rgba(124,58,237,.12)}
.flash.error{background:rgba(255,84,104,.12); border-color:rgba(255,84,104,.35)}
.flash.ok{background:rgba(61,220,132,.12); border-color:rgba(61,220,132,.35)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--border); padding:40px 0; margin-top:60px; color:var(--muted)}
.footer-in{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}

/* ---------- reveal-анимации ---------- */
[data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
[data-reveal].in{opacity:1; transform:none}
[data-reveal].d1{transition-delay:.06s}[data-reveal].d2{transition-delay:.12s}
[data-reveal].d3{transition-delay:.18s}[data-reveal].d4{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1; transform:none; transition:none}}

/* ---------- адаптив ---------- */
.toolbar{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:24px}
.search-box{flex:1; min-width:220px; position:relative}
.search-box .input{padding-left:42px}
.search-box .si{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted)}
@media(max-width:840px){
  .nav-links{position:fixed; inset:66px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(14,14,21,.98); border-bottom:1px solid var(--border); padding:10px 16px 18px;
    transform:translateY(-120%); transition:transform .3s var(--ease); margin:0}
  .nav-links.open{transform:none}
  .nav-links a{padding:14px 12px; border-radius:10px}
  .burger{display:block}
  section{padding:44px 0}
  .hero{padding:60px 0 40px}
}