/* ============================================================
   наталия веда — таролог | шаблон «чёрное золото» (visual2)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{font-family:Bellota;font-weight:700;font-style:normal;font-display:swap;
  src:url(../fonts/bellota-cyrillic-700.woff2) format('woff2');}
@font-face{font-family:Bellota;font-weight:700;font-style:italic;font-display:swap;
  src:url(../fonts/bellota-cyrillic-700-italic.woff2) format('woff2');}
@font-face{font-family:Bellota;font-weight:400;font-style:normal;font-display:swap;
  src:url(../fonts/bellota-cyrillic-400.woff2) format('woff2');}

@font-face{font-family:Inter;font-weight:400;font-style:normal;font-display:swap;
  src:url(../fonts/inter-cyrillic-400.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:Inter;font-weight:400;font-style:normal;font-display:swap;
  src:url(../fonts/inter-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F;}
@font-face{font-family:Inter;font-weight:500;font-style:normal;font-display:swap;
  src:url(../fonts/inter-cyrillic-500.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:Inter;font-weight:500;font-style:normal;font-display:swap;
  src:url(../fonts/inter-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F;}
@font-face{font-family:Inter;font-weight:600;font-style:normal;font-display:swap;
  src:url(../fonts/inter-cyrillic-600.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:Inter;font-weight:600;font-style:normal;font-display:swap;
  src:url(../fonts/inter-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F;}

/* ---------- Tokens ---------- */
:root{
  --bg-0:#0d0b08; --bg-1:#1c1712; --bg-2:#29251c;
  --panel:#262017; --panel-2:#17130e;
  --grad-text:linear-gradient(178deg,#8a6a2f 0%,#d9b45e 34%,#fff3c4 60%,#b98f3e 100%);
  --grad-btn:linear-gradient(180deg,#f7e7b3 0%,#e0bd66 42%,#c0993f 72%,#a9803a 100%);
  --btn-ink:#3d2c10;
  --gold-3:#ffe7a9; --gold-line:#d4af6a;
  --gold-soft:rgba(212,175,106,.35);
  --gold-soft-strong:rgba(212,175,106,.55);
  --text:#f3ece0; --text-dim:#9e9077;
  --glow-gold:rgba(224,189,102,.55); --glow-gold-wide:rgba(224,189,102,.28);
  --col:480px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font:400 15px/1.55 Inter,system-ui,sans-serif;
  color:var(--text); background:var(--bg-0);
  overflow-x:hidden; min-height:100vh;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{line-height:1.05;}

/* ---------- Star field ---------- */
.stars{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 8%,rgba(255,240,200,.9),transparent),
    radial-gradient(1.2px 1.2px at 78% 14%,rgba(212,175,106,.8),transparent),
    radial-gradient(1px 1px at 33% 30%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.3px 1.3px at 63% 44%,rgba(212,175,106,.7),transparent),
    radial-gradient(1px 1px at 22% 58%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.4px 1.4px at 88% 66%,rgba(255,240,200,.8),transparent),
    radial-gradient(1.1px 1.1px at 48% 78%,rgba(212,175,106,.7),transparent),
    radial-gradient(1px 1px at 8% 88%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.3px 1.3px at 70% 92%,rgba(255,240,200,.7),transparent);
  background-repeat:no-repeat;
}

/* ---------- Layout ---------- */
.wrap{
  position:relative;z-index:1;
  width:100%;max-width:var(--col);margin:0 auto;
  padding:16px 10px 24px;
  display:flex;flex-direction:column;gap:18px;
}
section{display:flex;flex-direction:column;gap:18px;}

/* крупные скруглённые блоки-панели, как колонки референса */
.block{
  --glow-a:radial-gradient(120% 45% at 50% 0%,rgba(70,55,30,.45),transparent 62%);
  --glow-b:radial-gradient(120% 45% at 50% 100%,rgba(55,43,24,.32),transparent 62%);
  background:var(--bg-1);
  background-image:
    url(../img/dust.svg),
    url(../img/dust.svg),
    var(--glow-a),
    var(--glow-b);
  background-size:280px 280px,430px 430px,100% 100%,100% 100%;
  background-position:0 0,150px 90px,0 0,0 0;
  border:1px solid rgba(212,175,106,.12);
  border-radius:26px;
  padding:44px 20px 48px;
  display:flex;flex-direction:column;gap:52px;
}
/* блок 1: мощное золотое зарево в верхней трети, за фото мастера */
.block:nth-of-type(1){
  --glow-a:radial-gradient(95% 40% at 50% 17%,rgba(133,100,46,.6),transparent 68%);
}
/* блок 3: зарево в нижней половине, за фото «поддержка» */
.block:nth-of-type(3){
  --glow-a:radial-gradient(120% 35% at 50% 0%,rgba(64,50,27,.4),transparent 62%);
  --glow-b:radial-gradient(100% 45% at 50% 76%,rgba(120,90,42,.5),transparent 68%);
}
/* блок 4: умеренная подсветка снизу, у финального призыва */
.block:nth-of-type(4){
  --glow-b:radial-gradient(85% 38% at 62% 97%,rgba(112,85,40,.45),transparent 68%);
}

/* ---------- Metallic gold text ---------- */
.metal{
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 6px rgba(224,189,102,.22));
}
.section-title{
  font-family:Bellota,serif;font-weight:700;text-transform:lowercase;
  font-size:clamp(34px,9vw,40px);text-align:center;letter-spacing:.01em;
}
.card-sub{
  font-family:Bellota,serif;font-weight:700;text-transform:lowercase;
  font-size:21px;
}

/* ---------- Panels ---------- */
.panel{
  background:var(--panel);border:1px solid var(--gold-soft);
  border-radius:16px;padding:20px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  font:600 13px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.14em;
  color:var(--btn-ink);background:var(--grad-btn);
  border:none;border-radius:11px;padding:15px 26px;cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,248,220,.75),
    inset 0 -2px 4px rgba(80,55,15,.35),
    0 4px 14px rgba(0,0,0,.45);
  transition:transform .18s ease,box-shadow .35s ease,filter .35s ease,color .25s ease,border-color .25s ease;
}
.btn--block{width:100%;}

.btn:hover,.btn:focus-visible{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,248,220,.85),
    0 0 24px var(--glow-gold),
    0 0 60px var(--glow-gold-wide),
    0 6px 18px rgba(0,0,0,.5);
  filter:brightness(1.05);
}
.btn:active{transform:translateY(0);
  box-shadow:inset 0 2px 5px rgba(60,40,10,.5),0 2px 8px rgba(0,0,0,.5);}

/* running diagonal sheen */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,250,230,.55) 50%,transparent 70%);
  transform:translateX(-130%);}
.btn:hover::before,.btn:focus-visible::before{animation:sheen .8s ease forwards;}
@keyframes sheen{to{transform:translateX(130%);}}

/* sparks */
.spark{position:absolute;color:var(--gold-3);font-size:11px;opacity:0;pointer-events:none;
  text-shadow:0 0 6px rgba(255,231,169,.9);}
.spark:nth-of-type(1){top:14%;left:12%;}
.spark:nth-of-type(2){top:60%;right:16%;left:auto;animation-delay:.12s;}
.spark:nth-of-type(3){bottom:16%;left:38%;animation-delay:.24s;}
.btn:hover .spark,.btn:focus-visible .spark{animation:spark .8s ease forwards;}
@keyframes spark{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}

/* ghost / secondary */
.btn--ghost{
  background:transparent;color:var(--gold-line);
  border:1px solid var(--gold-soft-strong);
  box-shadow:inset 0 1px 0 rgba(255,248,220,.06);
}
.btn--ghost::before{display:none;}
.btn--ghost:hover,.btn--ghost:focus-visible{
  border-color:var(--gold-line);color:var(--gold-3);filter:none;
  box-shadow:inset 0 1px 0 rgba(255,248,220,.1),0 0 22px var(--glow-gold-wide);
}

/* focus visible ring */
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-3);outline-offset:3px;}

/* ============================================================
   Photo placeholders
   ============================================================ */
.ph{position:relative;background:var(--panel-2);border-radius:16px;overflow:hidden;
  border:1px solid var(--gold-soft);}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 25%,rgba(224,189,102,.16),transparent 60%),
    radial-gradient(140% 100% at 50% 120%,rgba(0,0,0,.55),transparent 55%);}
.ph .ph__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.ph--hero{aspect-ratio:4/5;width:76%;margin:0 auto;}
.ph--about{aspect-ratio:16/10;width:100%;}

/* ============================================================
   1. HERO
   ============================================================ */
.hero{position:relative;text-align:center;gap:22px;}
.hero__title{
  font-family:Bellota,serif;font-weight:700;text-transform:lowercase;
  font-size:clamp(34px,11vw,52px);line-height:.98;letter-spacing:.005em;
  white-space:nowrap;
}
.hero__stats{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;text-align:left;}
.stat{display:flex;flex-direction:column;}
.stat--r{text-align:right;}
.stat--c{text-align:center;}
.stat__num{font-family:Bellota,serif;font-weight:700;font-size:34px;line-height:1;}
.stat__label{font-size:12px;color:var(--text-dim);line-height:1.25;margin-top:2px;max-width:9em;}
.stat--r .stat__label{margin-left:auto;}
.stat--c .stat__label{margin:2px auto 0;}
.hero__lead{max-width:26ch;margin:0 auto;line-height:1.3;}
.hero .btn{align-self:center;min-width:220px;}

/* ============================================================
   2. ОБО МНЕ
   ============================================================ */
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.about__col{padding:18px 15px;}
.about__col .card-sub{text-align:center;margin-bottom:12px;}
.facts,.words{list-style:none;display:flex;flex-direction:column;gap:12px;}
.facts li,.words li{font-size:12.5px;line-height:1.5;color:var(--text-dim);}
.facts b,.words b{font-weight:700;}

/* ============================================================
   3. С ЧЕМ Я МОГУ ПОМОЧЬ
   ============================================================ */
.help__list{list-style:none;display:flex;flex-direction:column;gap:14px;}
.help__row{display:flex;gap:14px;align-items:stretch;padding:16px;overflow:hidden;}
.help__text{flex:1;min-width:0;}
.help__text .card-sub{font-size:17px;margin-bottom:5px;}
.help__text p{font-size:13px;line-height:1.5;color:var(--text-dim);}
.ph--mini{position:relative;flex:0 0 78px;align-self:stretch;min-height:96px;
  border-radius:12px;overflow:hidden;background:var(--panel-2);
  border:1px solid var(--gold-soft);}
.ph--mini::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 50% 30%,rgba(224,189,102,.14),transparent 60%);}

/* ============================================================
   4. УСЛУГИ — ornate frame
   ============================================================ */
.services{gap:20px;}
/* зазор под заголовком, чтобы хвосты букв не наезжали на карточку */
.services .section-title{margin-bottom:5px;}
.ornate{
  position:relative;border:1px solid var(--gold-soft-strong);
  border-radius:32px;padding:38px 24px 34px;background:transparent;
  text-align:center;display:flex;flex-direction:column;gap:8px;
}
/* внутренняя линия двойной рамки */
.ornate::before{content:"";position:absolute;inset:4px;pointer-events:none;
  border:1px solid var(--gold-soft);border-radius:28px;}
/* светящиеся бусины вдоль боковых сторон */
.ornate::after{content:"";position:absolute;top:42px;bottom:42px;left:-3px;right:-3px;pointer-events:none;
  background-image:
    radial-gradient(circle,var(--gold-3) 1.6px,rgba(255,231,169,.35) 2.4px,transparent 3.4px),
    radial-gradient(circle,var(--gold-3) 1.6px,rgba(255,231,169,.35) 2.4px,transparent 3.4px);
  background-size:7px 12px,7px 12px;
  background-repeat:repeat-y,repeat-y;
  background-position:left center,right center;}
/* разрыв линии по центру: точка — ромб — точка */
.ornate .diamond{position:absolute;top:3px;left:50%;color:var(--gold-3);font-size:13px;line-height:1;
  background:var(--bg-1);padding:0 7px;transform:translate(-50%,-50%);z-index:2;
  display:flex;align-items:center;gap:6px;
  text-shadow:0 0 6px rgba(255,231,169,.6);}
.ornate .diamond::before,.ornate .diamond::after{content:"";flex:0 0 auto;
  width:3px;height:3px;border-radius:50%;background:var(--gold-line);}
.ornate .diamond--b{top:auto;bottom:3px;transform:translate(-50%,50%);}
/* звёздочки-вспышки в углах рамки */
.ornate__corner{position:absolute;width:30px;height:30px;opacity:.95;z-index:1;}
.ornate__corner--tl{top:-6px;left:-6px;}
.ornate__corner--tr{top:-6px;right:-6px;}
.ornate__corner--bl{bottom:-6px;left:-6px;}
.ornate__corner--br{bottom:-6px;right:-6px;}
/* при наведении: левые звёздочки крутятся по часовой, правые — против */
.ornate:hover .ornate__corner--tl,
.ornate:hover .ornate__corner--bl{animation:corner-cw 6s linear infinite;}
.ornate:hover .ornate__corner--tr,
.ornate:hover .ornate__corner--br{animation:corner-ccw 6s linear infinite;}
@keyframes corner-cw{to{transform:rotate(360deg);}}
@keyframes corner-ccw{to{transform:rotate(-360deg);}}

.service__title{font-family:Bellota,serif;font-weight:700;text-transform:lowercase;
  font-size:23px;line-height:1.1;margin-bottom:8px;}
.service__label{font-family:Bellota,serif;font-weight:700;font-size:16px;margin-top:8px;}
.service__list{list-style:none;display:flex;flex-direction:column;gap:5px;text-align:left;
  max-width:30ch;margin:0 auto;}
.service__list li{position:relative;padding-left:16px;font-size:13.5px;color:var(--text);line-height:1.45;}
.service__list li::before{content:"•";position:absolute;left:2px;color:var(--gold-line);}
.service__p{font-size:13.5px;color:var(--text);max-width:32ch;margin:0 auto;}
.price{margin-top:4px;display:flex;flex-direction:column;align-items:center;gap:0;}
.price s{color:var(--text-dim);font-size:15px;text-decoration-color:var(--gold-soft-strong);}
.price__now{font-family:Bellota,serif;font-weight:700;font-size:40px;line-height:1;}
.service .btn{align-self:stretch;margin-top:14px;}

/* ============================================================
   6. ПОДДЕРЖКА
   ============================================================ */
.support{align-items:center;text-align:center;}
.support__title{
  font-family:Bellota,serif;font-weight:700;text-transform:lowercase;
  font-size:clamp(26px,7.5vw,32px);line-height:1.1;max-width:14ch;
}

/* ============================================================
   7. FAQ
   ============================================================ */
.faq__list{list-style:none;display:flex;flex-direction:column;gap:12px;}
.faq__item{background:var(--panel);border:1px solid var(--gold-soft);border-radius:14px;overflow:hidden;}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:none;border:none;cursor:pointer;text-align:left;
  padding:16px 18px;color:var(--text);font:500 14px/1.35 Inter,sans-serif;
}
.faq__mark{color:var(--gold-line);font-size:14px;transition:transform .3s ease,color .3s ease;flex:0 0 auto;}
.faq__q[aria-expanded="true"] .faq__mark{transform:rotate(180deg);color:var(--gold-3);}
.faq__q[aria-expanded="true"]{color:var(--gold-3);}
.faq__a{padding:0 18px 18px;}
.faq__a[hidden]{display:none;}
.faq__a p{font-size:13.5px;line-height:1.55;color:var(--text-dim);}

/* ============================================================
   8. КОНТАКТЫ + 9. ФИНАЛ
   ============================================================ */
.contacts__buttons{display:flex;flex-direction:column;gap:12px;}
.finale{margin-top:8px;}
.finale__call{
  font-family:Bellota,serif;font-weight:700;font-style:italic;text-transform:lowercase;
  font-size:clamp(22px,6.5vw,28px);line-height:1.1;overflow-wrap:break-word;
  text-align:center;
}
.disclaimer{font-size:11px;line-height:1.5;color:var(--text-dim);opacity:.85;
  border-top:1px solid var(--gold-soft);padding-top:16px;margin-top:6px;text-align:center;}

/* ============================================================
   Hover-свечение карточек — как у ghost-кнопки
   ============================================================ */
.panel,.ornate,.faq__item{transition:transform .18s ease,box-shadow .35s ease,border-color .25s ease;}
.panel:hover,.faq__item:hover{
  transform:translateY(-2px);border-color:var(--gold-line);
  box-shadow:0 0 22px var(--glow-gold-wide);
}
.ornate:hover{
  transform:translateY(-2px);border-color:var(--gold-line);
  box-shadow:0 0 22px var(--glow-gold-wide);
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .btn,.btn--ghost{transition:box-shadow .2s,filter .2s,color .2s,border-color .2s;}
  .btn:hover,.btn:focus-visible{transform:none;}
  .panel,.ornate,.faq__item{transition:box-shadow .2s,border-color .2s;}
  .panel:hover,.ornate:hover,.faq__item:hover{transform:none;}
  .ornate:hover .ornate__corner{animation:none;}
  .btn::before,.btn:hover::before,.btn:focus-visible::before{animation:none;display:none;}
  .spark,.btn:hover .spark,.btn:focus-visible .spark{animation:none;opacity:0;}
  .faq__mark{transition:none;}
}

/* ============================================================
   Desktop: приглушённая золотая пыль на тёмном поле вокруг колонки
   ============================================================ */
@media (min-width:540px){
  .stars{
    opacity:.4;
    background-image:url(../img/dust.svg),url(../img/dust.svg);
    background-size:380px 380px,640px 640px;
    background-position:0 0,190px 140px;
    background-repeat:repeat,repeat;
  }
}

/* ============================================================
   Narrow screens
   ============================================================ */
@media (max-width:400px){
  .wrap{padding:12px 8px 18px;gap:14px;}
  .block{padding:38px 16px 42px;gap:46px;}
  .ph--mini{flex-basis:66px;}
}
@media (max-width:360px){
  .about__col{padding:14px 11px;}
  .about__grid{gap:9px;}
}