/* 7konline.best — архетип hexgrid, namespace hex- */

:root{
  --bg:#0B0001;          /* фон: почти чёрный с красным подтоном */
  --surface:#110D0E;     /* панели, карточки */
  --surface-2:#252323;   /* вложенные блоки, строки таблиц */
  --deep:#2C0D14;        /* тёмно-бордовая подложка акцентных блоков */
  --deep-2:#2E070D;
  --red:#D1021B;         /* фирменный красный, главный акцент */
  --red-dark:#A71023;    /* низ градиента кнопок */
  --red-deep:#830B1A;    /* глубокий бордовый */
  --red-deeper:#7C0818;
  --wine:#5A0819;        /* тени и подложки */
  --active:#C9051D;      /* активное состояние категорий */
  --yellow:#F5C66B;      /* фирменное золото-песок */
  --gold:#C79E0C;        /* насыщенное золото */
  --gold-2:#CEA334;
  --gold-light:#FEDA95;
  --gold-pale:#F6EB76;
  --green:#2DD890;       /* успех, подтверждения */
  --text:#D1D1D1;
  --text-2:#DADADA;
  --muted:#B4B4B4;
  --muted-2:#8B8B8B;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Noto Sans",system-ui,Arial,sans-serif;
  font-size:16px;
  line-height:1.62;
  -webkit-text-size-adjust:100%;
}

h1,h2,h3,.hex-logo-name,.hex-kpi-val,.hex-num{
  font-family:"Underdog","Noto Sans",Georgia,serif;
  font-weight:400;
  letter-spacing:.01em;
}

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

img{max-width:100%;height:auto;display:block;}

.hex-wrap{max-width:1180px;margin:0 auto;padding:0 20px;}

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

.hex-top{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--surface);
  border-bottom:1px solid var(--red-deep);
  box-shadow:0 6px 22px rgba(90,8,25,.55);
}

.hex-top-in{
  max-width:1180px;
  margin:0 auto;
  padding:10px 20px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.hex-logo{display:flex;align-items:center;gap:9px;margin-right:auto;}
.hex-logo svg{display:block;}
.hex-logo-name{font-size:21px;color:var(--gold-light);line-height:1;}
.hex-logo-sub{display:block;font-size:11px;color:var(--muted-2);letter-spacing:.14em;text-transform:uppercase;font-family:"Noto Sans",sans-serif;}

.hex-top-tag{
  font-size:12px;
  color:var(--muted-2);
  padding:5px 12px;
  background:var(--surface-2);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}

/* срезанные углы — фирменная геометрия шапки этого сайта */
.hex-btn{
  display:inline-block;
  padding:11px 22px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  border-radius:10px;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:filter .18s ease,transform .18s ease;
}
.hex-btn:hover{filter:brightness(1.1);transform:translateY(-1px);}

.hex-btn-ghost{
  background:var(--surface-2);
  color:var(--gold-light);
  border:1px solid var(--yellow);
}
.hex-btn-ghost:hover{color:var(--gold-pale);}

.hex-btn-main{
  background:linear-gradient(180deg,#D1021B 0%,#A71023 100%);
  color:#fff;
  border:1px solid var(--red);
  box-shadow:0 4px 14px rgba(209,2,27,.34);
}
.hex-btn-main:hover{color:#fff;}

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

.hex-hero{
  position:relative;
  padding:38px 0 30px;
  background:
    radial-gradient(660px 320px at 82% 8%,rgba(209,2,27,.20),transparent 68%),
    linear-gradient(180deg,#2E070D 0%,#0B0001 82%);
  overflow:hidden;
}

/* фоновая шестиугольная сетка */
.hex-hero::before{
  content:"";
  position:absolute;
  inset:-40px;
  opacity:.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><path d='M28 1 54 16v32L28 63 2 48V16z' fill='none' stroke='%23D1021B' stroke-width='1.4'/></svg>");
  background-size:56px 64px;
  pointer-events:none;
}

.hex-hero .hex-wrap{position:relative;z-index:2;}

.hex-hero h1{
  font-size:38px;
  line-height:1.16;
  margin:0 0 14px;
  color:var(--gold-light);
}
.hex-lead{font-size:17px;color:var(--text-2);margin:0 0 20px;max-width:760px;}

.hex-hero-grid{display:grid;grid-template-columns:1.25fr .95fr;gap:26px;align-items:start;}

.hex-banner{
  clip-path:polygon(34px 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%,0 34px);
  border:1px solid var(--red-deep);
}
.hex-banner-cap{font-size:12.5px;color:var(--muted-2);margin:9px 0 0;}

/* KPI: пять шестиугольных плиток */
.hex-kpi{
  list-style:none;
  margin:24px 0 22px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
.hex-kpi li{
  background:linear-gradient(180deg,#7C0818 0%,#830B1A 100%);
  clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%);
  padding:26px 10px;
  text-align:center;
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hex-kpi-val{display:block;font-size:24px;color:var(--gold-light);line-height:1.1;}
.hex-kpi-key{display:block;font-size:11.5px;color:var(--text);margin-top:7px;letter-spacing:.05em;text-transform:uppercase;}

.hex-cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:6px 0 0;}
.hex-cta{
  display:inline-block;
  padding:15px 34px;
  font-size:16px;
  font-weight:700;
  color:#fff;
  border-radius:10px;
  background:linear-gradient(180deg,#D1021B 0%,#A71023 100%);
  box-shadow:0 6px 20px rgba(209,2,27,.36);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
}
.hex-cta:hover{color:#fff;filter:brightness(1.08);}
.hex-cta-note{font-size:13px;color:var(--muted-2);}

/* ---------- секции ---------- */

.hex-sec{padding:34px 0;border-top:1px solid #231014;}
.hex-sec h2{
  font-size:27px;
  line-height:1.24;
  margin:0 0 6px;
  color:var(--gold-light);
  position:relative;
  padding-left:34px;
}
.hex-sec h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.32em;
  width:22px;
  height:25px;
  background:linear-gradient(180deg,#D1021B 0%,#A71023 100%);
  clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%);
}
.hex-sec h3{font-size:18.5px;margin:22px 0 6px;color:var(--yellow);}
.hex-sec p{margin:0 0 13px;}
.hex-sec ul{margin:0 0 14px;padding-left:20px;}
.hex-sec li{margin-bottom:6px;}

.hex-em{color:var(--gold-light);}
.hex-hot{color:var(--red);}
.hex-ok{color:var(--green);}
.hex-num{color:var(--gold-2);font-size:1.02em;}

/* ячейки-соты для перечислений */
.hex-cells{
  list-style:none;
  margin:16px 0 18px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:14px;
}
.hex-cells li{
  background:var(--surface);
  border:1px solid #2A1418;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  padding:16px 18px;
  margin:0;
}
.hex-cells li span{display:block;color:var(--yellow);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px;}

/* панель-акцент */
.hex-panel{
  background:var(--deep);
  border-left:3px solid var(--red);
  padding:18px 20px;
  margin:18px 0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
}

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

.hex-tablebox{overflow-x:auto;margin:16px 0 18px;-webkit-overflow-scrolling:touch;}
.hex-table{width:100%;border-collapse:collapse;min-width:560px;font-size:14.5px;}
.hex-table caption{
  caption-side:top;
  text-align:left;
  font-size:13px;
  color:var(--muted-2);
  padding-bottom:8px;
}
.hex-table th,.hex-table td{padding:11px 13px;text-align:left;border-bottom:1px solid #2A1418;}
.hex-table thead th{
  background:linear-gradient(180deg,#7C0818 0%,#830B1A 100%);
  color:var(--gold-light);
  font-weight:600;
  font-size:13.5px;
  letter-spacing:.03em;
}
.hex-table tbody tr:nth-child(even){background:var(--surface-2);}
.hex-table tbody tr:nth-child(odd){background:var(--surface);}
.hex-table tfoot td{background:var(--deep);color:var(--gold-light);font-weight:600;}

/* ---------- соты галереи ---------- */

.hex-comb{
  list-style:none;
  margin:20px 0 10px;
  padding:0 0 12px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px 18px;
}
.hex-comb li{margin:0;}
.hex-comb li:nth-child(n+5):nth-child(-n+8){transform:translateY(-14px);}
.hex-comb li:nth-child(n+9){transform:translateY(-28px);}
.hex-cell-img{
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:var(--surface-2);
  aspect-ratio:1/1;
  overflow:hidden;
}
.hex-cell-img img{width:100%;height:100%;object-fit:cover;}
.hex-comb figcaption{font-size:12.5px;color:var(--muted-2);margin-top:8px;text-align:center;line-height:1.4;}
.hex-comb figcaption span{display:block;color:var(--yellow);font-size:12px;}
.hex-comb figure{margin:0;}

.hex-provlogo{
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--surface);
  border:1px solid #2A1418;
  padding:14px 18px;
  margin:18px 0;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
}
.hex-provlogo p{margin:0;font-size:14px;color:var(--muted);}

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

.hex-tiers{
  list-style:none;
  margin:18px 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
.hex-tiers li{
  background:var(--surface);
  border:1px solid var(--red-deep);
  clip-path:polygon(50% 0,100% 20%,100% 80%,50% 100%,0 80%,0 20%);
  padding:26px 8px;
  text-align:center;
  min-height:158px;
  margin:0;
}
.hex-tier-name{display:block;font-family:"Underdog","Noto Sans",serif;font-size:18px;color:var(--gold-light);}
.hex-tier-val{display:block;font-size:12.5px;color:var(--muted);margin-top:6px;}

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

.hex-faq details{
  background:var(--surface);
  border:1px solid #2A1418;
  margin-bottom:10px;
  padding:0;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.hex-faq summary{
  cursor:pointer;
  padding:14px 18px;
  color:var(--gold-light);
  font-size:15.5px;
  list-style:none;
}
.hex-faq summary::-webkit-details-marker{display:none;}
.hex-faq summary::before{content:"◆ ";color:var(--red);}
.hex-faq details[open] summary{background:var(--deep);}
.hex-faq p{margin:0;padding:4px 18px 16px;font-size:14.8px;color:var(--text);}

/* ---------- отзыв, источники ---------- */

.hex-review{
  background:linear-gradient(180deg,#2C0D14 0%,#110D0E 100%);
  border:1px solid var(--red-deep);
  padding:20px 22px;
  margin:20px 0;
  clip-path:polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px);
}
.hex-review p{margin:0 0 10px;font-size:15.4px;color:var(--text-2);}
.hex-review-who{font-size:13px;color:var(--yellow);}

.hex-sources{
  background:var(--surface);
  border-top:2px solid var(--gold);
  padding:22px;
  margin:26px 0 0;
}
.hex-sources h3{margin-top:0;}
.hex-sources ul{margin:0;padding-left:20px;font-size:14.4px;color:var(--muted);}

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

.hex-foot{
  background:var(--surface);
  border-top:1px solid var(--red-deep);
  padding:28px 0 36px;
  margin-top:30px;
  font-size:13.6px;
  color:var(--muted);
}
.hex-foot p{margin:0 0 9px;}
.hex-foot-legal{color:var(--muted-2);}
.hex-age{
  display:inline-block;
  margin-top:8px;
  padding:9px 16px;
  background:var(--deep-2);
  border:1px solid var(--red);
  color:var(--gold-light);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}

/* ---------- адаптив ---------- */

@media (max-width:980px){
  .hex-hero-grid{grid-template-columns:1fr;}
  .hex-kpi{grid-template-columns:repeat(3,1fr);}
  .hex-tiers{grid-template-columns:repeat(3,1fr);}
  .hex-comb{grid-template-columns:repeat(3,1fr);}
  .hex-comb li:nth-child(n+5):nth-child(-n+8),
  .hex-comb li:nth-child(n+9){transform:none;}
}

@media (max-width:640px){
  body{font-size:15.4px;}
  .hex-wrap,.hex-top-in{padding-left:14px;padding-right:14px;}
  .hex-top-in{gap:8px;row-gap:9px;}
  .hex-top-tag{display:none;}
  .hex-logo{margin-right:auto;}
  .hex-btn{padding:9px 14px;font-size:13px;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);}
  .hex-hero h1{font-size:27px;}
  .hex-lead{font-size:15.6px;}
  .hex-kpi{grid-template-columns:repeat(2,1fr);gap:10px;}
  .hex-kpi li{min-height:132px;padding:22px 8px;}
  .hex-kpi-val{font-size:20px;}
  .hex-tiers{grid-template-columns:repeat(2,1fr);}
  .hex-comb{grid-template-columns:repeat(2,1fr);gap:12px;}
  .hex-sec h2{font-size:22px;padding-left:28px;}
  .hex-sec h2::before{width:18px;height:20px;}
  .hex-cta{padding:13px 22px;font-size:15px;width:100%;text-align:center;}
  .hex-table{min-width:520px;}
  .hex-banner{clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);}
}

@media (max-width:380px){
  .hex-btn{padding:8px 11px;font-size:12px;}
  .hex-logo-name{font-size:18px;}
}