
:root{
  --bg:#12110f;
  --bg2:#171512;
  --panel:rgba(25,23,20,.56);
  --ivory:#eee8dc;
  --muted:#c6beb2;
  --gold:#c8a66e;
  --line:rgba(196,168,121,.20);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);overflow-x:clip}
body{
  margin:0;color:var(--ivory);font-family:Arial,sans-serif;line-height:1.65;overflow-x:clip;
  background:
    radial-gradient(ellipse 72% 530px at 85% 17%,rgba(143,128,108,.13),transparent 78%),
    radial-gradient(ellipse 80% 650px at 7% 47%,rgba(106,98,86,.10),transparent 76%),
    radial-gradient(ellipse 78% 600px at 88% 76%,rgba(128,109,85,.09),transparent 78%),
    linear-gradient(180deg,#131412 0%,#1b1a17 45%,#141512 100%);
}
a{color:inherit}
.wrap{width:min(1100px,92%);margin:auto}
.serif,h1,h2,h3,.brand{font-family:Georgia,"Times New Roman",serif}

/* HERO: только утверждённое изображение целиком, без наложенных заголовков */
.hero{padding:0;border:0;background:transparent;width:100%;max-width:100vw}
.hero-art{width:100%;max-width:100vw;overflow:hidden;background:#11110f}
.hero-art img{
  display:block;width:100%;max-width:100%;height:auto;object-fit:contain;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 94%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 94%,transparent 100%);
}
.hero-action{
  margin:-20px auto 0;position:relative;z-index:2;text-align:center;
  padding:0 20px 34px;width:100%;max-width:100%;
}
.hero-tagline{font:italic clamp(22px,3vw,38px)/1.22 Georgia,serif;margin:0 auto 10px;max-width:680px;text-wrap:balance}
.hero-period{color:var(--gold);font-size:13px;letter-spacing:.18em;margin:0 0 22px}
.btn{
  display:inline-block;border:1px solid rgba(211,181,132,.72);padding:14px 24px;
  text-decoration:none;text-transform:uppercase;letter-spacing:.12em;font-size:12px;
  background:#d4b889;color:#15120f;font-weight:700;
}
.btn.alt{background:rgba(16,15,13,.28);color:var(--ivory)}

section{padding:76px 0;border-top:1px solid rgba(190,162,116,.13);position:relative}
section:not(.hero):before{
  content:"";position:absolute;left:8%;right:8%;top:0;height:120px;pointer-events:none;
  background:radial-gradient(ellipse at center top,rgba(171,139,95,.045),transparent 70%);
}
/* Архитектура и дымка взяты из утверждённого hero, без новых изображений. */
#club:after,#faq:after{
  content:"";position:absolute;right:0;top:4%;bottom:4%;width:min(27vw,320px);
  pointer-events:none;opacity:.14;background:url('/assets/ambient-arch.jpg') center/cover no-repeat;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 72%);
  mask-image:radial-gradient(ellipse at center,#000 20%,transparent 72%);
}
#faq:after{left:0;right:auto;transform:scaleX(-1);opacity:.09}
#club>.wrap,#faq>.wrap{position:relative;z-index:1}
.section-title{text-align:center;margin-bottom:38px}
.section-title small{color:var(--gold);letter-spacing:.25em;text-transform:uppercase}
.section-title h2{font-size:clamp(34px,6vw,60px);font-weight:400;margin:8px 0}
.intro{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.intro .quote{font:36px/1.25 Georgia,serif}
.intro p{color:#d0c8bc}

/* Карточки не меняем по структуре; только растворяем их в общей поверхности */
.keepers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.keeper{
  border:1px solid rgba(190,162,116,.17);
  background:linear-gradient(180deg,rgba(30,28,24,.44),rgba(18,17,15,.18));
  overflow:hidden;box-shadow:0 22px 55px rgba(0,0,0,.10);
}
.keeper img{
  display:block;width:100%;aspect-ratio:2/3;object-fit:contain;object-position:center top;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 91%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 91%,transparent 100%);
}
.keeper .text{padding:14px 20px 22px;margin-top:-6px}
.keeper h3{font-size:26px;margin:0 0 10px;font-weight:400}
.keeper p{color:#c9c0b4;font-size:14px;margin:0}

.visual{
  display:block;width:min(900px,100%);margin:0 auto 40px;border:0;
  box-shadow:0 25px 70px rgba(0,0,0,.10);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 4%,#000 96%,transparent 100%);
}
.tariffs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tariff{
  padding:28px;border:1px solid rgba(190,162,116,.18);
  background:linear-gradient(180deg,rgba(31,28,24,.50),rgba(17,16,14,.24));
}
.tariff.featured{border-color:rgba(201,169,116,.72)}
.tariff h3{font-size:30px;margin:0}
.price{font:32px Georgia,serif;color:var(--gold);margin:8px 0 18px}
.tariff p{color:#c7bfb3;min-height:75px}

.faq{max-width:860px;margin:auto}
.faq details{border-bottom:1px solid rgba(190,162,116,.22);padding:20px 0}
.faq summary{font:22px Georgia,serif;cursor:pointer}
.faq p{color:#c8c0b5}

.notice{
  border:1px solid rgba(190,162,116,.17);padding:25px;color:#c8c0b5;
  background:rgba(26,23,20,.34);
}
.cta{text-align:center;background:radial-gradient(circle at 50% 15%,rgba(116,91,61,.13),transparent 58%)}
.cta h2{font-size:clamp(40px,7vw,72px);font-weight:400;margin:0 0 25px}
footer{
  padding:35px 4%;border-top:1px solid rgba(190,162,116,.17);color:#aaa197;
  font-size:12px;display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap;
  background:rgba(13,13,12,.24)
}
footer a{margin-right:14px}

/* Юридические страницы — та же поверхность, без отдельной чёрной коробки */
.legal-top{
  padding:18px 4%;border-bottom:1px solid rgba(190,162,116,.16);
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(18,17,15,.48);backdrop-filter:blur(8px)
}
.legal-top .brand{letter-spacing:.22em;text-decoration:none}
.legal{
  width:min(900px,92%);margin:34px auto 70px;padding:clamp(18px,4vw,42px);
  border:1px solid rgba(190,162,116,.16);
  background:linear-gradient(180deg,rgba(30,27,23,.42),rgba(17,16,14,.18));
}
.legal-head{
  display:flex;gap:24px;justify-content:space-between;align-items:flex-end;
  padding-bottom:24px;margin-bottom:22px;border-bottom:1px solid rgba(190,162,116,.18)
}
.legal-kicker{color:var(--gold);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.legal h1{font-size:clamp(30px,5vw,46px);line-height:1.08;font-weight:400;margin:7px 0 0}
.legal pre{white-space:pre-wrap;font:15px/1.72 Arial,sans-serif;color:#ded7cd;margin:0}
.legal-pdf{white-space:nowrap}
.pdfbox{text-align:center;margin:35px 0 0}

@media(max-width:1000px){
  .wrap{width:min(100% - 34px,1100px)}
  .hero-art img{width:100%;height:auto;min-width:0}
  .hero-action{margin:-3px auto 0;padding:0 17px 24px}
  .hero-tagline{font-size:clamp(22px,6vw,30px);max-width:22ch}
  .hero-period{font-size:11px;letter-spacing:.14em;margin-bottom:18px}
  .hero-action .btn{max-width:100%;white-space:normal}
  .intro,.keepers,.tariffs{grid-template-columns:1fr}
  .intro{gap:24px}
  .intro .quote{font-size:22px;line-height:1.34;text-wrap:pretty}
  #club .section-title{margin-bottom:18px}
  #club .section-title h2{font-size:clamp(27px,7vw,38px)}
  #club:after,#faq:after{width:38vw;opacity:.075}
  .keeper{border-left-color:transparent;border-right-color:transparent}
  .keeper img{aspect-ratio:auto}
  .keeper .text{padding:14px 16px 24px}
  .tariff p{min-height:0}
  section{padding:58px 0}
  .section-title{margin-bottom:28px}
  .legal-top .brand{display:none}
  .legal-top{justify-content:flex-end}
  .legal{width:calc(100% - 24px);padding:20px 18px;margin-top:18px}
  .legal-head{display:block}
  .legal-pdf{margin-top:18px}
  .legal pre{font-size:14px;line-height:1.68}
}
.keeper,.tariff,.notice,.legal{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.012),0 22px 60px rgba(0,0,0,.075);
}

.faq summary{list-style:none;display:flex;align-items:flex-start;gap:12px;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary::after{content:"";flex:0 0 7px;height:7px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:rotate(45deg);margin:5px 3px 0 auto;transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:9px}
.faq summary:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.faq summary::after{transition:none}}
