/* ============================================================
   Raevski Marketing — premium dark/gold landing
   Palette per brief: black #0A0A0A · white · matte gold #C9A84C
   Type DNA from design system: Newsreader (serif) + Inter (sans)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:        #0A0A0A;
  --bg-2:      #100f0d;
  --panel:     #141310;
  --ink:       #FFFFFF;
  --muted:     rgba(255,255,255,.60);
  --faint:     rgba(255,255,255,.40);
  --gold:      #C9A84C;
  --gold-2:    #e3c876;
  --gold-deep: #9c7f33;
  --gold-22:   rgba(201,168,76,.22);
  --gold-12:   rgba(201,168,76,.12);
  --hairline:  rgba(255,255,255,.10);
  --hairline-2:rgba(255,255,255,.06);

  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max: 1180px;
  --gutter: 22px;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;

  --ease: cubic-bezier(.2,0,0,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold-22); color:#fff; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
section{ position:relative; }
.band{ padding-block:84px; }
.band-pb-sm{ padding-bottom:44px; }
.band-pt-sm{ padding-top:48px; }
/* mobile: tighten the gap between Services and "Как устроена моя работа" */
@media (max-width:680px){
  [aria-labelledby="svc-t"]{ padding-bottom:16px; }
  [aria-labelledby="how-t"]{ padding-top:26px; padding-bottom:16px; }
  [aria-labelledby="case-t"]{ padding-top:26px; }
  #case-t{ font-size:27px; }
  .hero{ padding-bottom:22px; }
  [aria-labelledby="prob-t"]{ padding-top:30px; }
}

/* ---------- type ---------- */
h1,h2,h3{ font-family:var(--font-serif); font-weight:400; line-height:1.08; letter-spacing:-.01em; margin:0; }
.overline{
  font-family:var(--font-sans); font-weight:500; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:10px;
}
.overline::before{ content:""; width:26px; height:1px; background:var(--gold); opacity:.7; }
h2.section-title{
  font-size:clamp(30px,7vw,52px);
  letter-spacing:-.02em;
  max-width:18ch;
  margin-top:18px;
}
.lead{ color:var(--muted); font-size:clamp(16px,2.4vw,19px); max-width:60ch; }
.serif-accent{ font-style:italic; color:var(--gold-2); }

/* ---------- buttons (neon hover) ---------- */
.btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-sans); font-weight:500; font-size:15.5px;
  padding:15px 26px; border-radius:var(--radius-s);
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), background .2s var(--ease), box-shadow .25s var(--ease), color .2s var(--ease);
  overflow:hidden;
}
.btn svg{ width:19px; height:19px; flex:none; }
/* neon top/bottom line on hover */
.btn::before, .btn::after{
  content:""; position:absolute; left:14%; right:14%; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-2), transparent);
  opacity:0; transition:opacity .25s var(--ease), transform .35s var(--ease);
  z-index:2;
}
.btn::before{ top:0; transform:translateY(-2px); }
.btn::after{ bottom:0; transform:translateY(2px); }
.btn:hover::before, .btn:hover::after, .btn:focus-visible::before, .btn:focus-visible::after{
  opacity:1; transform:translateY(0);
}
.btn-primary{
  background:var(--gold); color:#171205; font-weight:600;
  box-shadow:0 0 0 0 var(--gold-22);
}
.btn-primary:hover{
  background:var(--gold-2);
  box-shadow:0 10px 40px -8px rgba(201,168,76,.55);
  transform:translateY(-2px);
}
.btn-primary:active{ transform:translateY(0); background:var(--gold-deep); }
.btn-ghost{
  background:rgba(255,255,255,.03); color:var(--ink);
  border-color:var(--hairline);
}
.btn-ghost:hover{ background:rgba(255,255,255,.06); border-color:var(--gold-22); transform:translateY(-2px); }
.btn-block{ width:100%; }

.focus-ring:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--gold-22); }

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline-2);
  transition:transform .3s var(--ease);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:center; height:64px; }
.brand{ display:inline-flex; align-items:center; gap:11px; font-family:var(--font-serif); font-size:19px; letter-spacing:.01em; white-space:nowrap; }
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px 1px var(--gold); flex:none; }
.brand b{ font-weight:500; }
.brand span{ color:var(--faint); font-family:var(--font-sans); font-size:12px; letter-spacing:.04em; }
/* logo lockup: monogram + stacked wordmarks */
.brand-symbol{ height:30px; width:auto; flex:none; display:block; filter:drop-shadow(0 0 12px rgba(201,168,76,.28)); }
.brand-lockup{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.brand-lockup .wm-raevskii{ height:13px; width:auto; display:block; }
.brand-lockup .wm-marketing{ height:6px; width:auto; display:block; opacity:.92; }
.brand{ transition:opacity .2s var(--ease); }
.brand:hover{ opacity:.82; }
.header-cta{ display:inline-flex; }
.site-header .brand{ display:none; }

/* ---------- hero ---------- */
.hero{ position:relative; padding-top:82px; padding-bottom:48px; overflow:hidden; isolation:isolate; }
.hero-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.hero-bg::after{ /* vignette to ground content */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 50% -10%, transparent 40%, rgba(10,10,10,.7) 100%);
}
/* lamp / glow */
.lamp{ position:absolute; top:-2px; left:50%; transform:translateX(-50%); width:min(1200px,150%); height:560px; }
.lamp .cone{ position:absolute; top:0; height:340px; width:min(560px,52vw); filter:blur(14px); will-change:opacity; }
.lamp .cone-l{ right:50%; background-image:conic-gradient(from 70deg at center top, var(--gold-22), transparent 58%); -webkit-mask-image:linear-gradient(to top,transparent,#fff 90%); mask-image:linear-gradient(to top,transparent,#fff 90%); }
.lamp .cone-r{ left:50%;  background-image:conic-gradient(from 290deg at center top, transparent 42%, var(--gold-22)); -webkit-mask-image:linear-gradient(to top,transparent,#fff 90%); mask-image:linear-gradient(to top,transparent,#fff 90%); }
.lamp .halo{ position:absolute; top:34px; left:50%; transform:translateX(-50%); width:min(620px,78%); height:230px; background:radial-gradient(ellipse at center, rgba(201,168,76,.40), transparent 72%); filter:blur(46px); }
.lamp .line{ position:absolute; top:118px; left:50%; transform:translateX(-50%); width:min(480px,62%); height:3px; border-radius:3px; background:linear-gradient(90deg,transparent,var(--gold-2) 18%,var(--gold-2) 82%,transparent); box-shadow:0 0 28px 5px rgba(201,168,76,.7); }
.lamp .line-glow{ position:absolute; top:108px; left:50%; transform:translateX(-50%); width:min(360px,48%); height:22px; background:var(--gold); filter:blur(28px); opacity:.55; border-radius:50%; }
.lamp-anim .halo{ animation:lampPulse 7s ease-in-out infinite; }
.lamp-anim .line-glow{ animation:lampPulse 7s ease-in-out infinite .5s; }
@keyframes lampPulse{ 0%,100%{opacity:.4} 50%{opacity:.7} }

.hero-grid{ display:grid; grid-template-columns:1fr; gap:0; align-items:start; }
.hero-copy{ max-width:760px; margin-top:-13%; position:relative; z-index:2; }
.hero h1{
  font-size:clamp(31px,7vw,68px);
  letter-spacing:-.025em; line-height:1.08;
  text-wrap:balance;
}
.hero h1 em{ font-style:italic; color:var(--gold-2); }
/* mobile: word is inline, same size as the rest of the heading */
.hero-word{ display:inline; font-size:inherit; letter-spacing:inherit; }
/* mobile: de-emphasise the heading tail so it reads lighter */
.hero-tail{
  display:block; margin-top:.34em;
  font-size:.52em; line-height:1.25; letter-spacing:.005em;
  color:var(--muted); font-style:italic;
}
.hero-word .acc{ position:relative; }
.hero-word .acc::after{
  content:"\00B4"; position:absolute; left:50%; top:-.34em;
  transform:translateX(-44%); font-size:.82em; line-height:1;
  color:inherit; pointer-events:none;
}
.hero .lead{ margin-top:22px; }
.hero-actions{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; }
.hero-meta{
  margin-top:20px; color:var(--faint); font-size:13px; letter-spacing:.01em;
  display:flex; flex-wrap:wrap; gap:8px 6px; align-items:center;
}
.hero-meta .sep{ color:var(--gold); opacity:.6; }

.hero-photo{ position:relative; justify-self:center; width:min(340px,76%); order:-1; }
.hero-photo::before{ /* pedestal glow */
  content:""; position:absolute; left:50%; bottom:-6%; transform:translateX(-50%);
  width:90%; height:60%; background:radial-gradient(ellipse at center bottom, rgba(201,168,76,.30), transparent 70%);
  filter:blur(34px); z-index:-1;
}
.hero-photo img{ width:100%; height:auto; aspect-ratio:1100 / 1971; transform:scaleX(-1); filter:drop-shadow(0 26px 50px rgba(0,0,0,.55)); -webkit-mask-image:linear-gradient(to bottom,#000 42%,rgba(0,0,0,.55) 68%,transparent 90%); mask-image:linear-gradient(to bottom,#000 42%,rgba(0,0,0,.55) 68%,transparent 90%); }

/* ---------- problem ---------- */
.prob-list{ list-style:none; margin:34px 0 0; padding:0; display:grid; gap:14px; }
.prob-list li{
  display:flex; gap:16px; align-items:center;
  background:var(--panel); border:1px solid var(--hairline-2);
  border-radius:var(--radius-m); padding:20px 22px;
  font-size:16.5px; color:rgba(255,255,255,.86);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.prob-list li:hover{ border-color:var(--gold-22); }
.prob-list .mk{
  flex:none; width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--gold-12); color:var(--gold-2); border:1px solid var(--gold-22);
}
.prob-list .mk svg{ width:21px; height:21px; }
.prob-close{ margin-top:30px; font-family:var(--font-serif); font-size:clamp(20px,3.4vw,28px); color:var(--ink); max-width:none; }
.prob-close b{ color:var(--gold-2); font-weight:500; font-style:italic; }

/* ---------- about / process chain ---------- */
.about-intro{ display:grid; grid-template-columns:1fr; gap:30px; align-items:start; }
.about-photo{ order:-1; }
.about-photo{ position:relative; margin:0; border-radius:16px; isolation:isolate; }
.about-photo::before{ /* gold glow behind */
  content:""; position:absolute; inset:-6% -4%; z-index:-1;
  background:radial-gradient(ellipse at 60% 40%, rgba(201,168,76,.30), transparent 70%);
  filter:blur(40px);
}
.about-photo img{ width:100%; height:auto; aspect-ratio:9 / 12; object-fit:cover; object-position:50% 4%; display:block; border-radius:16px; border:1px solid var(--hairline); }
.about-photo::after{ /* blend edges into bg-2 */
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(16,15,13,.55) 100%);
}
.about-photo figcaption.about-overlay-quote{
  position:absolute; left:8%; right:8%; bottom:14%; z-index:2;
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(20px,2.5vw,28px); line-height:1.22; letter-spacing:-.01em;
  color:#fff; text-shadow:0 2px 22px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.9);
}
.about-photo figcaption.about-overlay-quote::before{
  content:""; display:block; width:38px; height:2px; background:var(--gold);
  margin-bottom:12px; border-radius:2px; box-shadow:0 0 14px 1px rgba(201,168,76,.7);
}
.about-photo::after{ /* deepen gradient so quote reads over the palm */
  background:linear-gradient(180deg, transparent 38%, rgba(8,8,8,.78) 100%);
}
.about-body{ margin-top:24px; display:grid; gap:18px; max-width:60ch; }
.about-body p{ margin:0; color:var(--muted); font-size:17px; }
.about-body p.q{ color:rgba(255,255,255,.9); }
.chain-head{ margin-top:54px; font-family:var(--font-serif); font-size:clamp(19px,2.8vw,24px); color:var(--ink); }
.chain{ margin-top:26px; display:grid; grid-template-columns:1fr; gap:12px; counter-reset:step; }
.chain .node{
  display:flex; align-items:center; gap:16px;
  background:var(--panel); border:1px solid var(--hairline-2);
  border-radius:var(--radius-m); padding:16px 20px;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.chain .node:hover{ border-color:var(--gold-22); transform:translateX(4px); }
.chain .num{
  flex:none; font-family:var(--font-serif); font-size:17px; font-weight:500; color:var(--gold-2);
  width:38px; height:38px; border-radius:50%; line-height:1;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold-22); background:var(--gold-12);
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1, "pnum" 1;
}
.chain .num > span{ display:block; transform:translateY(-0.5px); }
.chain .node.plus{ background:linear-gradient(90deg, var(--gold-12), transparent); border-color:var(--gold-22); }
.chain .node.plus .num{ background:var(--gold); color:#171205; border-color:var(--gold); }
.chain .label{ font-size:16.5px; }
.about-close{ margin-top:34px; max-width:none; color:var(--muted); font-size:17px; }
.about-close b{ color:var(--ink); font-weight:500; }

/* ---------- glow cards ---------- */
.glow-card{
  position:relative; border-radius:var(--radius-l);
  background:
    radial-gradient(420px circle at var(--mx,-100px) var(--my,-100px), var(--gold-12), transparent 42%),
    var(--panel);
  border:1px solid var(--hairline);
  padding:30px;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
  overflow:hidden;
}
.glow-card::before{ /* cursor-following border highlight */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:radial-gradient(360px circle at var(--mx,-100px) var(--my,-100px), var(--gold-2), transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .3s var(--ease); pointer-events:none;
}
.glow-card:hover{ transform:translateY(-3px); }
.glow-card:hover::before{ opacity:1; }

.cards-2{ margin-top:40px; display:grid; grid-template-columns:1fr; gap:20px; }
.cards-2 .glow-card{ display:flex; flex-direction:column; overflow:visible; }
.cards-2 .glow-card .kv{ margin-bottom:26px; }
.cards-2 .glow-card .btn{ margin-top:auto; }

.svc-eyebrow{ display:flex; align-items:center; gap:12px; }
.svc-ico{ width:42px; height:42px; border-radius:11px; flex:none; display:grid; place-items:center; background:var(--gold-12); border:1px solid var(--gold-22); color:var(--gold-2); }
.svc-ico svg{ width:22px; height:22px; }
.glow-card h3{ font-size:25px; margin-top:18px; letter-spacing:-.01em; }
.svc-eyebrow + h3{ margin-top:16px; }
.glow-card p{ color:var(--muted); font-size:15.5px; margin:14px 0 0; }
/* service card rich text: lists + stacked paragraphs */
.svc-text{ margin-top:14px; }
.svc-text > p{ margin:0 0 11px; color:var(--muted); font-size:15.5px; }
.svc-text > p:last-child{ margin-bottom:0; }
.svc-text .lead-in{ margin-bottom:7px; }
.svc-list{ list-style:none; margin:0 0 11px; padding:0; display:grid; gap:7px; }
.svc-list li{ position:relative; padding-left:18px; color:var(--muted); font-size:15.5px; line-height:1.5; }
.svc-list li::before{ content:""; position:absolute; left:2px; top:.62em; width:7px; height:1px; background:var(--gold-2); }
.kv .v .vp{ display:block; }
.kv .v .vp + .vp{ margin-top:10px; }

/* ---------- "Почему я не указал цену?" popover ---------- */
.price-why{ position:relative; margin-top:14px; display:flex; justify-content:center; }
.price-why-trigger{
  background:none; border:none; cursor:pointer; padding:4px 2px;
  font-family:var(--font-sans); font-size:14px; color:var(--gold-2);
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--gold-22); text-decoration-thickness:1px;
  transition:color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.price-why-trigger:hover{ color:var(--gold); text-decoration-color:var(--gold); }
.price-why-pop{
  position:absolute; bottom:calc(100% + 14px); left:50%;
  width:min(330px,80vw); transform:translateX(-50%) translateY(8px);
  background:
    radial-gradient(420px circle at 50% 0%, var(--gold-12), transparent 60%),
    #16140f;
  border:1px solid var(--gold-22); border-radius:var(--radius-m);
  padding:22px 22px 20px; text-align:left; z-index:30;
  box-shadow:0 24px 60px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.2);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
}
/* bridge so the cursor can travel from trigger to popover without closing */
.price-why-pop::before{
  content:""; position:absolute; top:100%; left:0; right:0; height:18px;
}
/* downward arrow */
.price-why-pop::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-1px);
  width:14px; height:14px; rotate:45deg; background:#16140f;
  border-right:1px solid var(--gold-22); border-bottom:1px solid var(--gold-22);
}
.price-why-pop h4{
  margin:0; font-family:var(--font-serif); font-weight:500; font-size:19px;
  color:var(--gold-2); letter-spacing:-.01em;
}
.price-why-pop p{ margin:12px 0 0; color:var(--muted); font-size:14.5px; line-height:1.55; }
.cards-2 .glow-card .price-why-pop .btn{ margin-top:34px; }
/* show on desktop hover (whole wrapper) and when toggled open via JS */
@media (hover:hover){
  .price-why:hover .price-why-pop{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
}
.price-why.open .price-why-pop{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.kv{ margin-top:18px; display:grid; gap:10px; }
.kv .row{ display:flex; gap:10px; font-size:14.5px; line-height:1.5; }
.kv .k{ flex:none; color:var(--gold-2); font-weight:500; min-width:84px; }
.kv .v{ color:rgba(255,255,255,.78); }
.note-flag{ color:var(--gold-2); font-weight:500; }
.price-tag{
  margin-top:20px; display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-top:18px; border-top:1px solid var(--hairline-2);
}
.price-tag .pl{ font-size:13px; color:var(--faint); letter-spacing:.04em; text-transform:uppercase; }
.price-tag .pv{ font-family:var(--font-serif); font-size:20px; color:var(--ink); }
.glow-card .btn{ margin-top:20px; }

/* ---------- steps timeline ---------- */
.steps{ margin-top:44px; display:grid; gap:0; position:relative; }
.step{
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:22px;
  padding-bottom:34px;
}
.step:last-child{ padding-bottom:0; }
.step .rail{ position:relative; display:flex; flex-direction:column; align-items:center; }
.step .bead{
  flex:none; width:48px; height:48px; border-radius:50%; z-index:2;
  display:grid; place-items:center; font-family:var(--font-serif); font-size:20px;
  color:var(--gold-2); background:var(--bg-2); border:1px solid var(--gold-22);
  box-shadow:0 0 0 5px rgba(10,10,10,1);
}
.step .line{ position:absolute; top:48px; bottom:-6px; width:1px; background:linear-gradient(var(--gold-22),var(--hairline-2)); }
.step:last-child .line{ display:none; }
.step .body{ padding-top:6px; }
.step .body h4{ margin:0; font-family:var(--font-serif); font-weight:500; font-size:20px; }
.step .body p{ margin:8px 0 0; color:var(--muted); font-size:15.5px; }

/* ---------- cases ---------- */
.cards-3{ margin-top:40px; display:grid; grid-template-columns:1fr; gap:20px; }
.case .logo-plate{
  width:104px; height:104px; border-radius:50%; margin:0 auto 24px;
  background:rgba(255,255,255,.04); border:1px solid var(--hairline-2);
  display:grid; place-items:center; padding:0;
}
.case .logo-plate img{ max-height:56px; max-width:92px; width:auto; object-fit:contain; }
.case .role{ color:var(--faint); font-size:13.5px; margin:0 0 16px; }
.case h3{ font-size:21px; }
.case .res{ margin-top:auto; }
.case-rows{ display:grid; gap:13px; margin-top:6px; }
.case-rows .cr{ font-size:14.5px; line-height:1.55; }
.case-rows .crl{ display:block; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-2); margin-bottom:3px; }
.case-rows .cr.result{ color:#fff; }
.case-rows .cr.result .crl{ color:var(--gold); }
.glow-card.case{ display:flex; flex-direction:column; }

/* ---------- fit (for whom) ---------- */
.fit-grid{ margin-top:40px; display:grid; grid-template-columns:1fr; gap:20px; }
.fit-col{ border-radius:var(--radius-l); padding:28px; border:1px solid var(--hairline); }
.fit-col.yes{ background:linear-gradient(180deg, var(--gold-12), transparent 60%), var(--panel); border-color:var(--gold-22); }
.fit-col.no{ background:var(--bg-2); }
.fit-col h3{ font-size:21px; margin-bottom:20px; display:flex; align-items:center; gap:12px; }
.fit-col h3 .badge{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:none; }
.fit-col.yes .badge{ background:var(--gold); color:#171205; }
.fit-col.no .badge{ background:rgba(255,255,255,.06); color:var(--faint); }
.fit-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.fit-list li{ display:flex; gap:13px; font-size:15.5px; line-height:1.5; }
.fit-list .ic{ flex:none; margin-top:2px; }
.fit-col.yes .fit-list .ic{ color:var(--gold-2); }
.fit-col.no .fit-list{ color:var(--faint); }
.fit-col.no .fit-list .ic{ color:var(--faint); }
.fit-list svg{ width:18px; height:18px; }

/* ---------- faq ---------- */
.faq{ margin-top:38px; display:grid; gap:0; max-width:860px; }
.faq-item{ border-top:1px solid var(--hairline-2); }
.faq-item:last-child{ border-bottom:1px solid var(--hairline-2); }
.faq-q{
  width:100%; background:none; border:none; cursor:pointer; color:var(--ink);
  font-family:var(--font-serif); font-size:clamp(18px,2.6vw,22px); text-align:left;
  padding:24px 50px 24px 0; position:relative; line-height:1.25;
  transition:color .2s var(--ease);
}
.faq-q:hover{ color:var(--gold-2); }
.faq-q .pm{ position:absolute; right:2px; top:26px; width:22px; height:22px; color:var(--gold); transition:transform .3s var(--ease); }
.faq-item.open .faq-q .pm{ transform:rotate(45deg); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.faq-a .inner{ padding:0 50px 26px 0; color:var(--muted); font-size:16px; }

/* ---------- final cta ---------- */
.final{ position:relative; overflow:hidden; }
.final .glow-card{ padding:clamp(34px,6vw,68px); text-align:center; }
.final .glow-card{
  background:
    radial-gradient(540px circle at 50% 0%, rgba(201,168,76,.20), transparent 60%),
    var(--panel);
  border-color:var(--gold-22);
}
.final-halo{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(700px,90%); height:300px; background:radial-gradient(ellipse at top, rgba(201,168,76,.28), transparent 70%); filter:blur(50px); pointer-events:none; z-index:-1; }
.final h2{ font-size:clamp(30px,6vw,50px); letter-spacing:-.02em; margin-inline:auto; max-width:18ch; }
.final p{ color:var(--muted); margin:22px auto 0; max-width:54ch; font-size:17px; }
.final .scarce{ margin-top:14px; color:var(--gold-2); font-size:15px; }
.final .btn{ margin-top:30px; }

/* ---------- footer ---------- */
.site-footer{ position:relative; border-top:1px solid var(--hairline-2); padding:70px 0 40px; overflow:hidden; }
.foot-halo{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(900px,120%); height:240px; background:radial-gradient(ellipse at top, rgba(201,168,76,.16), transparent 70%); filter:blur(40px); pointer-events:none; }
.foot-grid{ display:grid; grid-template-columns:1fr; gap:34px; }
.foot-id .brand{ font-size:24px; }
.foot-id .brand-symbol{ height:46px; }
.foot-id .brand-lockup{ gap:6px; }
.foot-id .brand-lockup .wm-raevskii{ height:19px; }
.foot-id .brand-lockup .wm-marketing{ height:9px; }
.foot-id p{ color:var(--faint); margin:14px 0 0; font-size:14.5px; }
.foot-socials{ display:flex; gap:12px; }
.foot-socials a{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  border:1px solid var(--hairline); color:var(--muted);
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.foot-socials a:hover{ color:var(--gold-2); border-color:var(--gold-22); background:var(--gold-12); transform:translateY(-3px); }
.foot-socials svg{ width:20px; height:20px; }
.foot-links{ display:grid; gap:11px; }
.foot-links a{ color:var(--muted); font-size:14.5px; width:max-content; transition:color .2s var(--ease); }
.foot-links a:hover{ color:var(--gold-2); }
.foot-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid var(--hairline-2); color:var(--faint); font-size:13px; }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); filter:blur(4px); transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; filter:none; }
.stagger > *{ opacity:0; transform:translateY(18px); filter:blur(3px); transition:opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease); transition-delay:calc(var(--i,0) * 80ms); }
.stagger.in > *{ opacity:1; transform:none; filter:none; }

/* ============================================================
   RESPONSIVE — tablet & desktop
   ============================================================ */
/* small phones — keep the whole heading one uniform size */
@media (max-width:380px){
  .hero h1{ font-size:27px; }
}
@media (min-width:680px){
  .cards-2{ grid-template-columns:1fr 1fr; }
  .fit-grid{ grid-template-columns:1fr 1fr; }
  .prob-list{ grid-template-columns:1fr 1fr; }
  .hero-meta{ font-size:13.5px; }
}
@media (min-width:768px){
  .band{ padding-block:104px; }
  .band-pb-sm{ padding-bottom:56px; }
  .band-pt-sm{ padding-top:60px; }
  .site-header .brand{ display:inline-flex; }
  .site-header .wrap{ justify-content:space-between; }
  .hero-actions .btn{ width:auto; }
}
@media (min-width:920px){
  :root{ --gutter:40px; }
  .cards-3{ grid-template-columns:repeat(3,1fr); }
  .hero{ padding-top:118px; padding-bottom:0; }
  .hero-grid{ grid-template-columns:1.32fr .82fr; gap:24px; align-items:start; }
  .hero-copy{ margin-top:54px; }
  .hero-photo{ justify-self:end; width:min(386px,100%); order:0; margin-top:-58px; }
  .hero + .band, .hero + section{ padding-top:36px; }
  .chain{ grid-template-columns:1fr 1fr; }
  .about-intro{ grid-template-columns:1.12fr .88fr; gap:44px; }
  .about-photo{ order:0; }
  .chain .node.plus{ grid-column:1 / -1; }
  /* desktop only: enlarge the first word "Маркетинг" */
  .hero-word{
    display:block; font-size:1.5em; line-height:.98;
    letter-spacing:-.035em; margin-bottom:.04em;
  }
}
@media (min-width:1080px){
  .foot-grid{ grid-template-columns:1.5fr auto; align-items:start; }
}

/* mobile: glow cards get a static soft border instead of cursor follow */
@media (hover:none){
  .glow-card{ background:linear-gradient(180deg, var(--gold-12), transparent 40%), var(--panel); }
  .glow-card::before{ opacity:.5; background:linear-gradient(180deg, var(--gold-22), transparent 50%); -webkit-mask:none; mask:none; padding:0; border:1px solid transparent; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
  .reveal, .stagger > *{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .lamp-anim .halo, .lamp-anim .line-glow{ animation:none !important; }
}