.family-page{background:#15191a}
.family-page .site-header{background:rgba(21,25,26,.9)}
.family-hero{
  position:relative;
  min-height:680px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(13,15,15,.88) 0%,rgba(13,15,15,.64) 46%,rgba(13,15,15,.28) 100%),
    url("../menu-previews/petr-shagal.webp") center/cover no-repeat;
}
.family-hero__shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,black,transparent 88%);
}
.family-hero__content{position:relative;z-index:1;padding:86px 0 70px}
.family-hero h1{max-width:760px}
.family-hero .lead{max-width:720px}
.family-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.family-hero__facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,160px));
  gap:12px;
  margin-top:44px;
  max-width:720px;
}
.family-hero__facts div{
  border-top:1px solid rgba(212,173,114,.48);
  padding-top:16px;
}
.family-hero__facts strong{display:block;font-size:42px;line-height:1;color:#fff}
.family-hero__facts span{display:block;margin-top:6px;color:rgba(249,243,234,.72);font-weight:800;font-size:13px}
.family-rules{position:relative}
.family-rule-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.family-rule{
  min-height:260px;
  padding:26px;
  border:1px solid rgba(34,35,35,.12);
  border-radius:22px;
  background:rgba(255,255,255,.58);
  display:flex;
  flex-direction:column;
}
.family-rule span,.family-roadmap article span{
  color:var(--gold-2);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  font-weight:950;
}
.family-rule h3{margin-top:26px}
.family-rule p{margin:auto 0 0;color:rgba(34,35,35,.68)}
.family-register-section{
  background:
    radial-gradient(circle at 78% 14%,rgba(142,31,63,.22),transparent 32%),
    radial-gradient(circle at 10% 80%,rgba(102,119,93,.24),transparent 34%),
    linear-gradient(145deg,#141819,#202728);
}
.family-register-grid{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:46px;
  align-items:start;
}
.family-register-grid h2{max-width:620px}
.family-benefit-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.family-benefit-list span{
  border:1px solid rgba(212,173,114,.3);
  border-radius:999px;
  padding:9px 12px;
  color:rgba(249,243,234,.78);
  background:rgba(255,255,255,.05);
  font-weight:800;
  font-size:13px;
}
.family-form{background:rgba(255,255,255,.07)}
.family-form .btn{width:auto}
.family-consent{
  display:flex;
  gap:10px;
  color:rgba(249,243,234,.74);
  font-size:13px;
  font-weight:700;
  margin-bottom:16px;
}
.family-consent input{width:17px;height:17px;flex:0 0 auto;margin-top:2px}
.family-account-grid{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:18px;
  align-items:start;
}
.family-login-panel,.family-account-demo{
  border:1px solid rgba(34,35,35,.12);
  border-radius:24px;
  background:rgba(255,255,255,.58);
  padding:22px;
}
.family-login-panel p{color:rgba(34,35,35,.66)}
.family-login-panel label{display:grid;gap:7px;margin-bottom:12px;font-weight:800;color:rgba(34,35,35,.72)}
.family-login-panel input{
  width:100%;
  border:1px solid rgba(34,35,35,.16);
  border-radius:14px;
  padding:13px;
  font:inherit;
  color:var(--ink);
  background:rgba(255,255,255,.75);
}
.family-login-status{min-height:24px;margin:14px 0 0!important;font-weight:800;color:var(--moss)!important}
.family-account-demo{display:grid;gap:14px}
.family-card{
  position:relative;
  min-height:260px;
  border-radius:22px;
  padding:24px;
  color:#fff;
  overflow:hidden;
  background:
    radial-gradient(circle at 90% 16%,rgba(212,173,114,.30),transparent 34%),
    linear-gradient(135deg,#15191a,#2f3633 58%,#7b6a50);
  box-shadow:0 22px 70px rgba(34,35,35,.18);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.family-card:before{
  content:'';
  position:absolute;
  right:-54px;
  bottom:-70px;
  width:230px;
  height:230px;
  border-radius:48px;
  border:1px solid rgba(255,255,255,.18);
  transform:rotate(-12deg);
}
.family-card span{display:block;color:var(--gold);text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:950}
.family-card strong{display:block;margin-top:8px;font-size:27px;letter-spacing:-.02em}
.family-card small{display:block;color:rgba(249,243,234,.62);font-weight:800;margin-top:4px}
.family-card__bonus{position:absolute;right:24px;top:24px;text-align:right}
.family-card__bonus b{font-size:48px;line-height:.9}
.family-card__code{
  position:relative;
  z-index:1;
  width:min(100%,320px);
  height:50px;
  border-radius:10px;
  background:
    repeating-linear-gradient(90deg,#fff 0 5px,transparent 5px 9px,#fff 9px 12px,transparent 12px 20px),
    rgba(255,255,255,.12);
  opacity:.9;
}
.family-account-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.family-account-stats div,.family-history div{
  border:1px solid rgba(34,35,35,.1);
  border-radius:16px;
  background:rgba(255,255,255,.56);
  padding:14px;
}
.family-account-stats span,.family-history small{display:block;color:rgba(34,35,35,.56);font-size:12px;font-weight:900}
.family-account-stats strong{display:block;font-size:28px;line-height:1;margin-top:5px}
.family-account-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.family-account-actions a{
  min-height:54px;
  border:1px solid rgba(34,35,35,.16);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px;
  font-weight:900;
  background:#fff8ed;
}
.family-history{display:grid;gap:8px}
.family-history h3{margin-top:8px}
.family-history div{
  display:grid;
  grid-template-columns:1fr auto;
  gap:3px 12px;
  align-items:center;
}
.family-history b{color:var(--berry)}
.family-history small{grid-column:1/-1}
.family-roadmap-section{
  background:
    radial-gradient(circle at 86% 18%,rgba(212,173,114,.18),transparent 33%),
    linear-gradient(145deg,#111415,#202728);
}
.family-roadmap{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.family-roadmap article{
  min-height:250px;
  border:1px solid rgba(212,173,114,.24);
  border-radius:22px;
  padding:22px;
  background:rgba(255,255,255,.055);
}
.family-roadmap article h3{margin-top:24px;color:#fff}
.family-roadmap article p{margin:0;color:rgba(249,243,234,.68)}
@media (max-width:980px){
  .family-hero{min-height:auto}
  .family-hero__facts,.family-rule-grid,.family-register-grid,.family-account-grid,.family-roadmap{grid-template-columns:1fr}
  .family-account-stats,.family-account-actions{grid-template-columns:1fr}
}
@media (max-width:640px){
  .family-hero__content{padding:62px 0 54px}
  .family-hero__facts{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    margin-top:28px;
  }
  .family-hero__facts strong{font-size:34px}
  .family-hero__facts span{font-size:11px;line-height:1.2}
  .family-rule,.family-login-panel,.family-account-demo{border-radius:18px;padding:18px}
  .family-card{min-height:240px}
  .family-card__bonus{position:static;text-align:left;margin-top:28px}
  .family-form .btn{width:100%}
}