/* 7k032n.fun — архетип granary (амбар), namespace grn- */

:root{
  --bg:#101011;
  --surface:#1A1A1C;
  --line:#282829;
  --red:#D92A3A;
  --gold:#E3B75F;
  --green:#35D89C;
  --ink:#E8E6E3;
  --ink-dim:#9A9794;
  --radius:9px;
  --grain:repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.028) 0px,
      rgba(255,255,255,.028) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 7px,
      rgba(0,0,0,.20) 7px,
      rgba(0,0,0,.20) 8px,
      rgba(0,0,0,0) 8px,
      rgba(0,0,0,0) 19px);
  --font-display:"Russo One",Impact,sans-serif;
  --font-body:"Scada","Trebuchet MS",sans-serif;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

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

.grn-wrap{max-width:1080px;margin:0 auto;padding:0 28px}

a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- шапка-закром: лого слева, кнопки справа ярусами разной ширины ---------- */

.grn-hdr{
  position:sticky;
  top:0;
  z-index:40;
  background:linear-gradient(180deg,#171719 0%,#131315 72%,#0C0C0D 100%),var(--grain);
  border-bottom:3px solid var(--line);
  box-shadow:0 10px 24px rgba(0,0,0,.55);
}
.grn-hdr-in{
  max-width:1080px;
  margin:0 auto;
  padding:10px 28px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.grn-mark{display:flex;align-items:baseline;gap:9px;min-width:0}
.grn-mark-w{
  font-family:var(--font-display);
  font-size:30px;
  letter-spacing:.06em;
  color:var(--ink);
  line-height:1;
}
.grn-mark-w em{font-style:normal;color:var(--red)}
.grn-mark-t{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-dim);
  white-space:nowrap;
}

/* ярусы: две кнопки разной ширины, верхняя уже, нижняя шире — как сусеки в закроме */
.grn-bins{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
}
.grn-btn{
  display:inline-block;
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:.05em;
  text-align:center;
  padding:8px 18px;
  border-radius:var(--radius);
  border:2px solid var(--red);
  white-space:nowrap;
}
.grn-btn:hover{text-decoration:none}
.grn-btn-ghost{
  background:transparent;
  color:var(--red);
  min-width:132px;
}
.grn-btn-ghost:hover{background:rgba(217,42,58,.12)}
.grn-btn-solid{
  background:var(--red);
  color:#fff;
  min-width:186px;
  box-shadow:0 4px 0 #8C1622;
}
.grn-btn-solid:hover{background:#E4394A}

/* ---------- первый экран ---------- */

.grn-hero{
  padding:44px 0 34px;
  background:
    radial-gradient(1100px 420px at 14% -8%,rgba(217,42,58,.16),transparent 62%),
    radial-gradient(760px 380px at 92% 4%,rgba(227,183,95,.10),transparent 60%),
    var(--grain);
  border-bottom:1px solid var(--line);
}
.grn-h1{
  font-family:var(--font-display);
  font-size:38px;
  line-height:1.18;
  margin:0 0 16px;
  letter-spacing:.01em;
}
.grn-h1 span{color:var(--gold)}
.grn-lead{font-size:18px;color:#D6D2CE;margin:0 0 26px;max-width:830px}

/* KPI — пять закромов разной высоты */
.grn-kpi{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  align-items:end;
  margin:0 0 28px;
}
.grn-bin{
  position:relative;
  background:linear-gradient(180deg,#201F22,#161618),var(--grain);
  border:1px solid var(--line);
  border-top:3px solid var(--gold);
  border-radius:var(--radius) var(--radius) 3px 3px;
  padding:14px 13px 16px;
}
.grn-bin:nth-child(1){padding-top:26px}
.grn-bin:nth-child(2){padding-top:16px}
.grn-bin:nth-child(3){padding-top:34px}
.grn-bin:nth-child(4){padding-top:20px}
.grn-bin:nth-child(5){padding-top:30px}
/* заплечики-опоры */
.grn-bin::after{
  content:"";
  position:absolute;
  left:9px;right:9px;bottom:-7px;
  height:6px;
  background:var(--line);
  border-radius:0 0 4px 4px;
}
.grn-bin-n{
  display:block;
  font-family:var(--font-display);
  font-size:25px;
  color:var(--gold);
  line-height:1.1;
}
.grn-bin-l{display:block;font-size:13px;color:var(--ink-dim);margin-top:5px}

.grn-cta{
  display:inline-block;
  font-family:var(--font-display);
  font-size:17px;
  letter-spacing:.04em;
  padding:14px 34px;
  background:var(--red);
  color:#fff;
  border-radius:var(--radius);
  box-shadow:0 5px 0 #8C1622;
}
.grn-cta:hover{background:#E4394A;text-decoration:none}
.grn-cta-note{display:block;font-size:13px;color:var(--ink-dim);margin-top:10px}

/* ---------- секции-ярусы ---------- */

.grn-sec{
  padding:34px 0 8px;
  border-bottom:1px solid var(--line);
}
.grn-sec:nth-of-type(odd){background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 40%)}
.grn-h2{
  font-family:var(--font-display);
  font-size:26px;
  line-height:1.25;
  margin:0 0 14px;
  padding-left:18px;
  position:relative;
}
.grn-h2::before{
  content:"";
  position:absolute;
  left:0;top:.18em;bottom:.18em;
  width:6px;
  background:linear-gradient(180deg,var(--red),#7A1220);
  border-radius:3px;
}
.grn-h3{
  font-family:var(--font-display);
  font-size:18px;
  margin:22px 0 8px;
  color:var(--gold);
  letter-spacing:.02em;
}
p{margin:0 0 14px}
.grn-num{color:var(--gold)}
.grn-acc{color:var(--red)}
.grn-yes{color:var(--green)}
.grn-em{color:#FFFFFF}

ul.grn-list{list-style:none;padding:0 0 0 22px;margin:0 0 16px}
ul.grn-list li{position:relative;margin:0 0 9px}
ul.grn-list li::before{
  content:"";
  position:absolute;
  left:-20px;top:.62em;
  width:9px;height:9px;
  background:var(--gold);
  clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);
}

/* карточки-сусеки с заплечиками */
.grn-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:18px 0 22px;
}
.grn-card{
  position:relative;
  background:linear-gradient(180deg,#1E1E21,var(--surface)),var(--grain);
  border:1px solid var(--line);
  border-left:3px solid var(--red);
  border-radius:var(--radius);
  padding:16px 16px 18px;
}
.grn-card::before{
  content:"";
  position:absolute;
  left:12px;right:12px;bottom:-6px;
  height:5px;
  background:#202023;
  border-radius:0 0 3px 3px;
}
.grn-card-t{
  font-family:var(--font-display);
  font-size:15px;
  color:var(--gold);
  display:block;
  margin-bottom:6px;
  letter-spacing:.03em;
}

/* ---------- таблицы ---------- */

.grn-scroll{overflow-x:auto;margin:16px 0 22px;-webkit-overflow-scrolling:touch}
table.grn-tbl{
  width:100%;
  min-width:540px;
  border-collapse:collapse;
  background:var(--surface);
  font-size:15px;
}
table.grn-tbl caption{
  caption-side:top;
  text-align:left;
  font-size:13px;
  color:var(--ink-dim);
  padding:0 0 8px;
}
table.grn-tbl th,table.grn-tbl td{
  border:1px solid var(--line);
  padding:9px 12px;
  text-align:left;
  vertical-align:top;
}
table.grn-tbl thead th{
  background:#232326;
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--gold);
  font-weight:400;
}
table.grn-tbl tbody tr:nth-child(even){background:#1D1D20}

/* ---------- лестница клуба ---------- */

.grn-ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0 22px;align-items:end}
.grn-step{
  background:linear-gradient(180deg,#201F22,#161618),var(--grain);
  border:1px solid var(--line);
  border-bottom:3px solid var(--gold);
  border-radius:var(--radius) var(--radius) 2px 2px;
  padding:12px 11px;
}
.grn-step:nth-child(1){padding-top:14px}
.grn-step:nth-child(2){padding-top:22px}
.grn-step:nth-child(3){padding-top:30px}
.grn-step:nth-child(4){padding-top:38px}
.grn-step:nth-child(5){padding-top:46px}
.grn-step-n{font-family:var(--font-display);font-size:15px;color:var(--ink);display:block}
.grn-step-v{font-size:13px;color:var(--ink-dim);display:block;margin-top:4px}

/* ---------- SVG ---------- */

.grn-fig{margin:20px 0 24px}
.grn-fig svg{display:block;width:100%;max-width:100%;height:auto}
.grn-cap{font-size:13px;color:var(--ink-dim);margin:8px 0 0}

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

.grn-quote{
  background:linear-gradient(180deg,#1E1E21,var(--surface)),var(--grain);
  border:1px solid var(--line);
  border-left:4px solid var(--gold);
  border-radius:var(--radius);
  padding:16px 18px;
  margin:20px 0 22px;
}
.grn-quote-s{display:block;font-size:13px;color:var(--ink-dim);margin-top:8px}

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

details.grn-q{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 16px;
  margin:0 0 10px;
}
details.grn-q summary{
  cursor:pointer;
  font-family:var(--font-display);
  font-size:16px;
  color:var(--ink);
  letter-spacing:.01em;
}
details.grn-q[open] summary{color:var(--gold)}
details.grn-q p{margin:10px 0 2px;font-size:16px;color:#D3CFCB}

/* ---------- источники ---------- */

.grn-src{
  background:linear-gradient(180deg,#1C1C1F,#141416),var(--grain);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
  margin:20px 0 24px;
}

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

.grn-foot{
  background:#0B0B0C;
  border-top:3px solid var(--line);
  padding:26px 0 34px;
  font-size:14px;
  color:var(--ink-dim);
}
.grn-foot p{margin:0 0 9px}
.grn-age{
  display:inline-block;
  border:1px solid var(--red);
  border-radius:var(--radius);
  padding:7px 13px;
  color:#D9D5D1;
  margin-top:6px;
}

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

@media (max-width:640px){
  body{font-size:16px}
  .grn-wrap,.grn-hdr-in{padding-left:16px;padding-right:16px}
  .grn-hdr-in{gap:10px;padding-top:8px;padding-bottom:9px}
  .grn-mark{flex-direction:column;gap:0}
  .grn-mark-w{font-size:23px}
  .grn-mark-t{font-size:9px;letter-spacing:.12em}
  .grn-bins{gap:4px}
  .grn-btn{font-size:12px;padding:6px 11px}
  .grn-btn-ghost{min-width:96px}
  .grn-btn-solid{min-width:126px;box-shadow:0 3px 0 #8C1622}
  .grn-h1{font-size:26px}
  .grn-lead{font-size:16px}
  .grn-h2{font-size:21px;padding-left:14px}
  .grn-h3{font-size:16px}
  .grn-kpi{grid-template-columns:repeat(2,1fr)}
  .grn-bin:nth-child(5){grid-column:1 / -1}
  .grn-bin,.grn-bin:nth-child(1),.grn-bin:nth-child(2),.grn-bin:nth-child(3),
  .grn-bin:nth-child(4),.grn-bin:nth-child(5){padding-top:14px}
  .grn-cards{grid-template-columns:1fr}
  .grn-ladder{grid-template-columns:1fr}
  .grn-step,.grn-step:nth-child(1),.grn-step:nth-child(2),.grn-step:nth-child(3),
  .grn-step:nth-child(4),.grn-step:nth-child(5){padding-top:12px}
  .grn-cta{display:block;text-align:center;padding:13px 18px;font-size:16px}
  table.grn-tbl{font-size:14px}
}