/* constellation — звёздная карта. namespace .cn* */

:root{
  --cnNight:#0a0f1e;
  --cnPanel:#121a30;
  --cnWhite:#f2f6ff;
  --cnBlue:#7cc4ff;
  --cnGold:#f0c05a;
  --cnDim:#8e9cbe;
  --cnEdge:#1d2846;
  --cnMono:'Noto Sans Mono','Consolas','DejaVu Sans Mono',monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body.cn{
  margin:0;
  padding:0;
  background:var(--cnNight);
  color:var(--cnWhite);
  font-family:'Noto Sans','Segoe UI',Arial,sans-serif;
  font-size:16px;
  line-height:1.66;
  overflow-x:hidden;
}

.cnSky{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-color:var(--cnNight);
  background-image:
    radial-gradient(1.8px 1.8px at 7% 6%, rgba(242,246,255,.95), transparent 60%),
    radial-gradient(1.1px 1.1px at 18% 14%, rgba(242,246,255,.55), transparent 60%),
    radial-gradient(2.4px 2.4px at 31% 5%, rgba(124,196,255,.85), transparent 62%),
    radial-gradient(1px 1px at 44% 11%, rgba(242,246,255,.45), transparent 60%),
    radial-gradient(1.6px 1.6px at 58% 4%, rgba(242,246,255,.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 69% 16%, rgba(240,192,90,.6), transparent 60%),
    radial-gradient(2.1px 2.1px at 82% 9%, rgba(242,246,255,.9), transparent 62%),
    radial-gradient(1px 1px at 93% 18%, rgba(242,246,255,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 5% 27%, rgba(124,196,255,.7), transparent 60%),
    radial-gradient(1px 1px at 22% 33%, rgba(242,246,255,.4), transparent 60%),
    radial-gradient(2.2px 2.2px at 37% 24%, rgba(242,246,255,.85), transparent 62%),
    radial-gradient(1.1px 1.1px at 51% 31%, rgba(242,246,255,.5), transparent 60%),
    radial-gradient(1.7px 1.7px at 64% 38%, rgba(242,246,255,.75), transparent 60%),
    radial-gradient(1px 1px at 77% 29%, rgba(124,196,255,.5), transparent 60%),
    radial-gradient(2.6px 2.6px at 88% 36%, rgba(242,246,255,.9), transparent 62%),
    radial-gradient(1.2px 1.2px at 12% 45%, rgba(242,246,255,.5), transparent 60%),
    radial-gradient(1.4px 1.4px at 27% 52%, rgba(240,192,90,.55), transparent 60%),
    radial-gradient(1px 1px at 41% 47%, rgba(242,246,255,.4), transparent 60%),
    radial-gradient(2px 2px at 55% 56%, rgba(242,246,255,.8), transparent 62%),
    radial-gradient(1.1px 1.1px at 70% 49%, rgba(242,246,255,.45), transparent 60%),
    radial-gradient(1.6px 1.6px at 84% 58%, rgba(124,196,255,.7), transparent 60%),
    radial-gradient(1px 1px at 96% 51%, rgba(242,246,255,.4), transparent 60%),
    radial-gradient(1.9px 1.9px at 9% 64%, rgba(242,246,255,.8), transparent 62%),
    radial-gradient(1.1px 1.1px at 24% 71%, rgba(242,246,255,.45), transparent 60%),
    radial-gradient(2.3px 2.3px at 39% 66%, rgba(242,246,255,.88), transparent 62%),
    radial-gradient(1px 1px at 53% 74%, rgba(124,196,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 67% 68%, rgba(242,246,255,.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 80% 77%, rgba(240,192,90,.5), transparent 60%),
    radial-gradient(1.8px 1.8px at 92% 70%, rgba(242,246,255,.8), transparent 62%),
    radial-gradient(1px 1px at 6% 83%, rgba(242,246,255,.4), transparent 60%),
    radial-gradient(2.1px 2.1px at 20% 90%, rgba(242,246,255,.85), transparent 62%),
    radial-gradient(1.1px 1.1px at 35% 85%, rgba(242,246,255,.45), transparent 60%),
    radial-gradient(1.6px 1.6px at 49% 93%, rgba(124,196,255,.65), transparent 60%),
    radial-gradient(1px 1px at 63% 87%, rgba(242,246,255,.4), transparent 60%),
    radial-gradient(2.4px 2.4px at 76% 95%, rgba(242,246,255,.9), transparent 62%),
    radial-gradient(1.3px 1.3px at 89% 88%, rgba(242,246,255,.5), transparent 60%),
    radial-gradient(1px 1px at 97% 97%, rgba(240,192,90,.45), transparent 60%);
}

.cnWrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 20px}

/* --- шапка --- */
.cnTop{
  position:relative;
  z-index:3;
  border-bottom:1px solid var(--cnEdge);
  background:rgba(10,15,30,.86);
  backdrop-filter:blur(6px);
  position:sticky;
  top:0;
}
.cnTopIn{display:flex;align-items:center;gap:14px;max-width:1080px;margin:0 auto;padding:10px 20px}
.cnMark{display:flex;align-items:center;gap:10px;min-width:0}
.cnWord{font-family:'Cormorant SC',Georgia,serif;font-size:21px;letter-spacing:.09em;line-height:1;white-space:nowrap}
.cnWord span{color:var(--cnGold)}
.cnTopMeta{margin-left:auto;font-family:var(--cnMono);font-size:11px;color:var(--cnDim);letter-spacing:.05em;white-space:nowrap}

.cnLink{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  background:linear-gradient(120deg,var(--cnGold),#ffd98a);
  color:#14100a;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  letter-spacing:.02em;
  white-space:nowrap;
  box-shadow:0 0 18px rgba(240,192,90,.28);
}
.cnLink:hover{background:linear-gradient(120deg,#ffd98a,var(--cnGold))}
.cnLinkGhost{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid var(--cnBlue);
  color:var(--cnBlue);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
}

/* --- ядро экрана --- */
.cnCore{padding:38px 0 8px}
.cnCat{
  font-family:var(--cnMono);
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--cnBlue);
  text-transform:uppercase;
  margin:0 0 10px;
}
h1.cnH1{
  font-family:'Cormorant SC',Georgia,serif;
  font-weight:600;
  font-size:clamp(25px,4.6vw,43px);
  line-height:1.16;
  letter-spacing:.015em;
  margin:0 0 16px;
  color:var(--cnWhite);
}
.cnLead{font-size:16.5px;color:#c9d3ec;margin:0 0 20px;max-width:64ch}
.cnCoreRow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:22px}

.cnFacts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 10px;padding:0;list-style:none}
.cnFact{
  background:var(--cnPanel);
  border:1px solid var(--cnEdge);
  border-radius:12px;
  padding:14px 14px 12px;
  position:relative;
}
.cnFactV{font-family:'Cormorant SC',Georgia,serif;font-size:23px;line-height:1.1;color:var(--cnGold)}
.cnFactK{font-size:12.5px;color:var(--cnDim);margin-top:4px}

/* --- разделитель-созвездие --- */
.cnDiv{
  position:relative;
  height:1px;
  margin:44px 0;
  background:linear-gradient(90deg,rgba(29,40,70,0),var(--cnEdge) 18%,var(--cnEdge) 82%,rgba(29,40,70,0));
}
.cnDiv::after{
  content:"";
  position:absolute;
  left:50%;
  top:-3.5px;
  width:8px;
  height:8px;
  margin-left:-4px;
  border-radius:50%;
  background:var(--cnGold);
  box-shadow:0 0 12px rgba(240,192,90,.75);
}

/* --- секция-созвездие --- */
.cnSec{display:grid;grid-template-columns:132px 1fr;gap:26px;align-items:start}
.cnSec>*{min-width:0}
.cnFig{width:132px;height:132px;position:sticky;top:76px}
.cnFig svg{width:100%;height:100%;display:block}
.cnFigLine{stroke:var(--cnGold);stroke-width:.7;opacity:.55;fill:none}
.cnFigDot{fill:var(--cnWhite)}
.cnFigDot.cnFigBlue{fill:var(--cnBlue)}

h2.cnH2{
  font-family:'Cormorant SC',Georgia,serif;
  font-weight:600;
  font-size:clamp(21px,2.9vw,30px);
  line-height:1.2;
  letter-spacing:.015em;
  margin:0 0 14px;
}
h3.cnH3{
  font-family:'Cormorant SC',Georgia,serif;
  font-weight:600;
  font-size:19px;
  letter-spacing:.02em;
  margin:24px 0 8px;
  color:var(--cnBlue);
}
.cnSec p{margin:0 0 13px;color:#ccd5ec}
.cnSec p.cnTight{margin-bottom:6px}
.cnAcc{color:var(--cnGold)}
.cnBlue{color:var(--cnBlue)}

/* --- карта неба (каталог) --- */
.cnMap{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 6px}
.cnMapCell{
  position:relative;
  background:var(--cnPanel);
  border:1px solid var(--cnEdge);
  border-radius:12px;
  padding:15px 13px 12px;
  min-height:112px;
}
.cnStar{
  position:absolute;
  top:11px;
  right:11px;
  border-radius:50%;
  background:var(--cnBlue);
}
.cnName{font-size:14.5px;line-height:1.3;margin:0 8px 0 0;padding-right:16px}
.cnStudio{font-size:12px;color:var(--cnDim);margin:5px 0 0}
.cnMech{font-size:12px;color:#9fb4dd;margin:2px 0 0}
.cnMag{
  font-family:var(--cnMono);
  font-size:11.5px;
  color:var(--cnGold);
  letter-spacing:.06em;
  margin:8px 0 0;
  border-top:1px solid var(--cnEdge);
  padding-top:7px;
}

/* --- клуб: шесть звёзд на линии --- */
.cnLadder{margin:18px 0 4px;background:var(--cnPanel);border:1px solid var(--cnEdge);border-radius:14px;padding:16px 12px 8px}
.cnLadder svg{width:100%;height:auto;display:block}
.cnLadLine{stroke:var(--cnGold);stroke-width:1;opacity:.6}
.cnLadDot{fill:var(--cnBlue)}
.cnLadCap{font-family:'Cormorant SC',Georgia,serif;font-size:17px;fill:var(--cnWhite)}
.cnLadNum{font-family:var(--cnMono);font-size:14px;fill:var(--cnGold)}

/* --- касса: таблица --- */
.cnScroll{overflow-x:auto;margin:18px 0 6px;-webkit-overflow-scrolling:touch}
table.cnTable{width:100%;min-width:520px;border-collapse:collapse;font-size:14px}
table.cnTable th{
  text-align:left;
  font-weight:500;
  font-family:var(--cnMono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cnBlue);
  padding:9px 12px;
  border-bottom:1px solid var(--cnEdge);
}
table.cnTable td{padding:10px 12px;border-bottom:1px solid rgba(29,40,70,.7);color:#ccd5ec}
table.cnTable tr:last-child td{border-bottom:none}
.cnLum{font-family:var(--cnMono);color:var(--cnGold);white-space:nowrap}
.cnLum i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cnGold);margin-right:7px;vertical-align:middle;box-shadow:0 0 8px rgba(240,192,90,.7)}

/* --- врезка с отзывом --- */
.cnVoice{
  background:var(--cnPanel);
  border:1px solid var(--cnEdge);
  border-left:2px solid var(--cnBlue);
  border-radius:0 12px 12px 0;
  padding:14px 16px;
  margin:18px 0;
}
.cnVoice p{margin:0 0 8px;font-size:14.5px;color:#d5deef}
.cnVoiceWho{font-family:var(--cnMono);font-size:11px;letter-spacing:.08em;color:var(--cnDim);margin:0}

/* --- список-созвездие --- */
ul.cnList{list-style:none;margin:12px 0 14px;padding:0}
ul.cnList li{position:relative;padding-left:20px;margin-bottom:8px;color:#ccd5ec;font-size:15px}
ul.cnList li::before{
  content:"";
  position:absolute;
  left:2px;
  top:10px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cnBlue);
  box-shadow:0 0 7px rgba(124,196,255,.7);
}

/* --- ступени пакета --- */
.cnSteps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 8px}
.cnStep{background:var(--cnPanel);border:1px solid var(--cnEdge);border-radius:12px;padding:14px 13px}
.cnStepN{font-family:var(--cnMono);font-size:11px;color:var(--cnBlue);letter-spacing:.1em}
.cnStepV{font-family:'Cormorant SC',Georgia,serif;font-size:22px;color:var(--cnGold);margin-top:5px;line-height:1.1}
.cnStepT{font-size:12.5px;color:var(--cnDim);margin-top:4px}

/* --- FAQ --- */
details.cnQ{
  border:1px solid var(--cnEdge);
  border-radius:12px;
  background:var(--cnPanel);
  padding:12px 15px;
  margin-bottom:10px;
}
details.cnQ summary{
  cursor:pointer;
  font-family:'Cormorant SC',Georgia,serif;
  font-size:17.5px;
  letter-spacing:.015em;
  color:var(--cnWhite);
  list-style:none;
  position:relative;
  padding-right:24px;
}
details.cnQ summary::-webkit-details-marker{display:none}
details.cnQ summary::after{
  content:"";
  position:absolute;
  right:4px;
  top:9px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cnGold);
  box-shadow:0 0 9px rgba(240,192,90,.7);
}
details.cnQ[open] summary::after{background:var(--cnBlue);box-shadow:0 0 9px rgba(124,196,255,.7)}
details.cnQ p{margin:9px 0 2px;font-size:14.5px;color:#c9d3ec}

/* --- нижние блоки --- */
.cnNote{
  border:1px solid var(--cnEdge);
  border-radius:14px;
  background:rgba(18,26,48,.7);
  padding:18px 18px 14px;
  margin:34px 0 0;
}
.cnNote h3{font-family:'Cormorant SC',Georgia,serif;font-weight:600;font-size:19px;margin:0 0 9px;letter-spacing:.02em}
.cnNote p{margin:0 0 9px;font-size:14px;color:#bcc7e3}
.cnAge{font-family:var(--cnMono);font-size:11.5px;color:var(--cnGold);letter-spacing:.06em}

.cnFoot{position:relative;z-index:1;border-top:1px solid var(--cnEdge);margin-top:40px;padding:24px 0 40px}
.cnFoot p{margin:0 0 9px;font-size:13px;color:#93a1c2;max-width:76ch}
.cnFootRow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}

/* --- мобильная раскладка --- */
@media (max-width:900px){
  .cnMap{grid-template-columns:repeat(2,1fr)}
  .cnFacts{grid-template-columns:repeat(2,1fr)}
  .cnSteps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .cnSec{grid-template-columns:1fr;gap:12px}
  .cnFig{position:static;width:96px;height:96px}
  .cnWrap{padding:0 14px}
  .cnTopIn{padding:9px 14px;gap:10px}
  .cnTopMeta{display:none}
  .cnCore{padding:22px 0 4px}
  .cnWord{font-size:18px}
  .cnLink{padding:9px 14px;font-size:13px}
  body.cn{font-size:15.5px}
  .cnDiv{margin:32px 0}
  table.cnTable{min-width:0;font-size:12.5px}
  table.cnTable th{font-size:9.5px;letter-spacing:.06em;padding:8px 6px}
  table.cnTable td{padding:8px 6px}
  .cnLum i{width:5px;height:5px;margin-right:5px}
}
@media (max-width:420px){
  .cnMap{gap:9px}
  .cnMapCell{padding:13px 10px 10px;min-height:104px}
  .cnName{font-size:13.5px;padding-right:13px}
  .cnStudio,.cnMech{font-size:11px}
  .cnMag{font-size:10.5px}
  .cnSteps{gap:9px}
}