/* 7k1821m.casino — архетип cartouche, namespace crt */

:root{
  --bg:#0F1210;
  --surface:#181C19;
  --line:#252B26;
  --red:#C81B30;
  --gold:#D7A944;
  --green:#33D296;

  --ink:#E7EDE8;
  --ink-dim:#9CA79E;
  --radius-btn:11px;
  --f-display:'Podkova',Georgia,serif;
  --f-body:'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  --wrap:1080px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.66;
  -webkit-text-size-adjust:100%;
}

.crt-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- шапка: картуш ---------- */

.crt-head{
  position:sticky;
  top:0;
  z-index:40;
  background:linear-gradient(180deg,rgba(15,18,16,.98),rgba(15,18,16,.9));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}

.crt-head__in{
  max-width:var(--wrap);
  margin:0 auto;
  padding:10px 20px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
}

/* овальная рамка с двойным контуром — общий приём архетипа */
.crt-frame{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 20px;
  font-family:var(--f-display);
  letter-spacing:.02em;
}

.crt-frame::after{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(215,169,68,.28);
  border-radius:999px;
  pointer-events:none;
}

.crt-mark{
  justify-self:center;
  color:var(--ink);
  font-size:1.32rem;
  padding:8px 26px;
  border-color:var(--gold);
  background:radial-gradient(120% 160% at 50% 0%,rgba(200,27,48,.18),transparent 70%);
}

.crt-mark__sub{
  font-family:var(--f-body);
  font-size:.62rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  margin-left:8px;
}

.crt-btn-ghost{
  justify-self:start;
  color:var(--ink);
  border-color:var(--red);
  background:transparent;
  font-size:.92rem;
}

.crt-btn-solid{
  justify-self:end;
  color:#fff;
  background:var(--red);
  border-color:var(--red);
  font-size:.92rem;
}

.crt-btn-solid::after{border-color:rgba(255,255,255,.35)}

.crt-btn-ghost:hover{background:rgba(200,27,48,.14)}
.crt-btn-solid:hover{filter:brightness(1.1)}

/* ---------- секция-картуш ---------- */

.crt-sec{
  position:relative;
  margin:30px 0;
  padding:30px 30px 26px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:34px/26px;
}

.crt-sec::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(215,169,68,.2);
  border-radius:28px/20px;
  pointer-events:none;
}

/* угловые завитки картуша */
.crt-sec::after{
  content:"";
  position:absolute;
  top:-1px;left:-1px;right:-1px;bottom:-1px;
  border-radius:34px/26px;
  pointer-events:none;
  background:
    radial-gradient(9px 9px at 22px 22px,rgba(200,27,48,.55) 0 2px,transparent 3px),
    radial-gradient(9px 9px at calc(100% - 22px) 22px,rgba(200,27,48,.55) 0 2px,transparent 3px),
    radial-gradient(9px 9px at 22px calc(100% - 22px),rgba(215,169,68,.5) 0 2px,transparent 3px),
    radial-gradient(9px 9px at calc(100% - 22px) calc(100% - 22px),rgba(215,169,68,.5) 0 2px,transparent 3px);
}

.crt-sec>*{position:relative;z-index:1}

h1,h2,h3{font-family:var(--f-display);line-height:1.24;margin:0 0 14px}

h1{font-size:2.05rem;letter-spacing:-.01em}
h2{font-size:1.46rem;padding-left:16px;border-left:3px solid var(--red)}
h3{font-size:1.1rem;color:var(--gold);margin-top:22px}

p{margin:0 0 14px}

.crt-lead{font-size:1.06rem;color:#D5DDD6}

.crt-accent{color:var(--gold);font-variant-numeric:tabular-nums}
.crt-em{color:var(--ink);border-bottom:1px dotted rgba(215,169,68,.6)}
.crt-yes{color:var(--green)}

/* ---------- hero ---------- */

.crt-hero{
  margin-top:26px;
  padding:34px 30px 28px;
  background:
    radial-gradient(90% 120% at 50% -10%,rgba(200,27,48,.16),transparent 60%),
    var(--surface);
}

.crt-kpi{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin:22px 0 24px;
  padding:0;
}

.crt-kpi li{
  border:1px solid var(--line);
  border-radius:20px/16px;
  padding:14px 12px;
  text-align:center;
  background:rgba(37,43,38,.35);
}

.crt-kpi span.crt-kpi__v{
  display:block;
  font-family:var(--f-display);
  font-size:1.34rem;
  color:var(--gold);
}

.crt-kpi__k{display:block;font-size:.78rem;color:var(--ink-dim);margin-top:5px}

.crt-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 30px;
  border-radius:var(--radius-btn);
  background:var(--red);
  color:#fff;
  text-decoration:none;
  font-family:var(--f-display);
  font-size:1.05rem;
  border:1px solid var(--red);
}

.crt-cta:hover{filter:brightness(1.12)}

.crt-cta--line{background:transparent;color:var(--ink)}

/* ---------- графика ---------- */

.crt-fig{margin:22px 0 6px}
.crt-fig svg{display:block;width:100%;max-width:100%;height:auto}
.crt-cap{font-size:.84rem;color:var(--ink-dim);margin-top:8px}

/* ---------- таблицы в рамочной кайме ---------- */

.crt-tbl{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:22px/18px;
  padding:6px;
  margin:18px 0;
  background:rgba(37,43,38,.25);
}

table{border-collapse:collapse;width:100%;min-width:520px;font-size:.94rem}

th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line)}

thead th{
  font-family:var(--f-display);
  color:var(--gold);
  font-weight:400;
  border-bottom:1px solid rgba(215,169,68,.45);
  white-space:nowrap;
}

tbody tr:last-child td{border-bottom:0}

/* ---------- карточки и списки ---------- */

.crt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:18px 0}

.crt-card{
  border:1px solid var(--line);
  border-radius:24px/18px;
  padding:18px 20px;
  background:rgba(24,28,25,.8);
}

.crt-card h3{margin-top:0}

.crt-card__t{
  font-family:var(--f-display);
  font-size:1.1rem;
  color:var(--gold);
  margin:0 0 10px;
}

.crt-list{list-style:none;padding:0;margin:14px 0}

.crt-list li{
  position:relative;
  padding-left:26px;
  margin-bottom:10px;
}

.crt-list li::before{
  content:"";
  position:absolute;
  left:4px;top:.62em;
  width:11px;height:7px;
  border:1px solid var(--gold);
  border-radius:50%;
}

/* ---------- клуб ---------- */

.crt-ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0}

.crt-ladder div{
  border:1px solid var(--line);
  border-radius:18px/14px;
  padding:12px 10px;
  text-align:center;
  font-size:.88rem;
}

.crt-ladder div span{display:block;font-family:var(--f-display);color:var(--gold);font-size:1.02rem}

/* ---------- FAQ ---------- */

details{
  border:1px solid var(--line);
  border-radius:20px/16px;
  padding:13px 18px;
  margin-bottom:11px;
  background:rgba(37,43,38,.22);
}

summary{
  cursor:pointer;
  font-family:var(--f-display);
  font-size:1.02rem;
  list-style:none;
}

summary::-webkit-details-marker{display:none}

summary::before{content:"◈ ";color:var(--red)}

details[open] summary{color:var(--gold)}

details p{margin:12px 0 2px;font-size:.96rem}

/* ---------- отзыв ---------- */

.crt-quote{
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:0 22px 22px 0/0 18px 18px 0;
  padding:16px 20px;
  margin:18px 0;
  background:rgba(37,43,38,.25);
}

.crt-quote__who{display:block;margin-top:9px;font-size:.84rem;color:var(--ink-dim)}

/* ---------- подвал ---------- */

.crt-foot{
  border-top:1px solid var(--line);
  margin-top:36px;
  padding:26px 0 40px;
  color:var(--ink-dim);
  font-size:.88rem;
}

.crt-foot p{margin:0 0 9px}

.crt-foot .crt-18{
  color:var(--ink);
  border:1px solid var(--red);
  border-radius:999px;
  display:inline-block;
  padding:7px 18px;
  margin-top:8px;
}

.crt-foot a{color:var(--gold)}

/* ---------- мобильная ---------- */

@media (max-width:900px){
  .crt-kpi{grid-template-columns:repeat(3,1fr)}
  .crt-grid{grid-template-columns:1fr}
  .crt-ladder{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:640px){
  body{font-size:16px}
  .crt-wrap{padding:0 14px}
  .crt-head__in{padding:8px 12px;gap:6px}
  .crt-mark{font-size:1.02rem;padding:7px 14px}
  .crt-mark__sub{display:none}
  .crt-frame{padding:8px 12px}
  .crt-btn-ghost,.crt-btn-solid{font-size:.8rem}
  .crt-sec,.crt-hero{padding:22px 16px;border-radius:26px/20px;margin:20px 0}
  .crt-sec::before{inset:6px;border-radius:21px/15px}
  .crt-sec::after{border-radius:26px/20px}
  h1{font-size:1.54rem}
  h2{font-size:1.2rem;padding-left:11px}
  .crt-kpi{grid-template-columns:repeat(2,1fr)}
  .crt-ladder{grid-template-columns:repeat(2,1fr)}
  .crt-cta{width:100%;justify-content:center}
  table{min-width:440px}
}