/* katyakabakchi design system v1.1 (Cleaned & Optimized)
   Black = showcase, paper = work. Orange is light, not paint (<= 5% of a screen).
   Zero radius, zero shadows, zero gradients on planes (only the light behind the portrait). */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600;800&family=Golos+Text:wght@400;500;600&display=swap');

:root {
  --black: #0A0A0A;
  --ink: #161616;
  --paper: #EFEDE8;
  --paper-2: #E4E1DA;
  --line: #C9C6C0;
  --cap-paper: #5F5B55;
  --cap-black: #8C8880;
  --orange: #F0561D;
  --orange-dark: #B83E10;
  --line-black: rgba(239, 237, 232, .14);

  --display: 'Unbounded', 'Arial Black', sans-serif;
  --text: 'Golos Text', system-ui, -apple-system, sans-serif;

  --maxw: 1200px;
  --gutter: 40px;
  --sec: clamp(72px, 9vw, 128px);
}

* { box-sizing: border-box; border-radius: 0; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 18px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { width: min(100% - var(--gutter) * 2, var(--maxw)); margin: 0 auto; }

/* ---------- type ---------- */
.label { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.label.o { color: var(--orange-dark); }
.on-black .label.o { color: var(--orange); }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -.02em; }
h2 { font-weight: 600; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; }
h3 { font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.cap { font-size: 13px; line-height: 1.5; color: var(--cap-paper); }
.on-black .cap { color: var(--cap-black); }
.body { max-width: 820px; }
.body p { margin: 0 0 18px; }

/* ---------- sections ---------- */
.on-black { background: var(--black); color: var(--paper); }
.sec { padding: var(--sec) 0; }
.sec-head { display: flex; align-items: baseline; gap: 18px; border-bottom: 1px solid var(--ink); padding-bottom: 14px; margin-bottom: 48px; }
.on-black .sec-head { border-color: var(--line-black); }
.sec-head .cap { margin: 0; }

/* grid on black: 90px step, 6% */
.grid-bg { background-image: linear-gradient(rgba(239,237,232,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(239,237,232,.06) 1px, transparent 1px); background-size: 90px 90px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: 16px 22px; border: 1px solid currentColor; background: transparent; color: inherit; transition: background .18s, color .18s, border-color .18s; white-space: nowrap; cursor: pointer; }
.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.on-black .btn:hover { background: var(--paper); color: var(--black); border-color: var(--paper); }
.btn.fill { background: var(--orange); border-color: var(--orange); color: var(--black); }
.btn.fill:hover { background: var(--paper); border-color: var(--paper); color: var(--black); }
.btn.btn-ink { background: var(--black); border-color: var(--black); color: var(--paper); }
.btn.btn-ink:hover { background: var(--paper); border-color: var(--paper); color: var(--black); }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---------- nav ---------- */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 5; color: var(--paper); }
.nav.solid { position: static; background: var(--black); }
.nav .wrap { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; position: relative; }
.sig { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.nav ul { list-style: none; display: flex; gap: 0; margin: 0; padding: 0; font-size: 14px; }
.nav li + li::before { content: "·"; color: var(--orange); margin: 0 14px; }
.nav a { text-decoration: none; opacity: .85; transition: opacity .15s; }
.nav a:hover { opacity: 1; }
.nav li.lang b { font-weight: 600; }
.nav li.lang a { opacity: .7; }

/* ---------- burger (narrow screens) ---------- */
.burger { display: none; width: 44px; height: 44px; background: transparent; border: 1px solid rgba(239,237,232,.4); color: var(--paper); cursor: pointer; position: relative; }
.burger span, .burger span::before, .burger span::after { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; content: ""; transition: transform .2s ease, top .2s ease, background .2s ease; }
.burger span { top: 21px; }
.burger span::before { top: -7px; left: 0; right: 0; }
.burger span::after { top: 7px; left: 0; right: 0; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
.burger:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(100vh, 900px); display: flex; align-items: flex-end; overflow: hidden; }
.hero-photo { position: absolute; inset: 0; background: url(img/hero-portrait.webp) 72% 30% / cover no-repeat; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--black) 0%, rgba(10,10,10,.92) 30%, rgba(10,10,10,.2) 62%, rgba(10,10,10,0) 100%), linear-gradient(0deg, var(--black) 0%, rgba(10,10,10,0) 30%); }
.hero .grid-bg { position: absolute; inset: 0; }
.hero-in { position: relative; z-index: 2; padding: 180px 0 72px; }
.hero h1 { font-weight: 800; font-size: clamp(48px, 6.6vw, 112px); line-height: .95; letter-spacing: -.035em; max-width: 9.5ch; margin: 22px 0 30px; }
.hero h1 .label { display: block; font-size: 12px; letter-spacing: .16em; margin-bottom: 26px; font-weight: 600; }
.hero .lead { max-width: 560px; font-size: 19px; color: rgba(239,237,232,.86); margin: 0 0 36px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- numbers ---------- */
.nums { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-black); }
.num { padding: 34px 28px 34px 0; }
.num + .num { padding-left: 28px; border-left: 1px solid var(--line-black); }
.num b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.num b.o { color: var(--orange); }
.num span { display: block; margin-top: 12px; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cap-black); line-height: 1.5; }

/* ---------- about & registry ---------- */
.about { display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: start; }
.about figure { margin: 0; }
.about figure img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.about figcaption { margin-top: 10px; }
.reg { border-top: 1px solid var(--ink); margin-top: 40px; }
.reg-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 18px; align-items: baseline; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; position: relative; transition: background .15s; }
.reg-row .n { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--cap-paper); padding-left: 12px; }
.reg-row .t { font-weight: 500; min-width: 0; }
.reg-row .t small { display: block; font-weight: 400; font-size: 14px; color: var(--cap-paper); line-height: 1.5; margin-top: 2px; }
.reg-row .r { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--cap-paper); white-space: nowrap; }
a.reg-row:hover, .reg-row.active { background: var(--paper-2); }
a.reg-row:hover::before, .reg-row.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--orange); }
a.reg-row:hover .r { color: var(--orange-dark); }
.reg-row:target { background: var(--paper-2); scroll-margin-top: 90px; }
.reg-row:target::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--orange); }

/* ---------- case sections nav ---------- */
.case-nav { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); margin-top: 16px; }
.case-nav a { display: block; padding: 20px; font-size: 14px; line-height: 1.55; color: var(--cap-paper); text-decoration: none; transition: background .15s; }
.case-nav a + a { border-left: 1px solid var(--line); }
.case-nav b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.case-nav span { display: block; }
.case-nav a:hover { background: var(--paper-2); }
.case-nav a:hover b { color: var(--orange-dark); }

/* ---------- services ---------- */
.ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; background: var(--orange); border: 1px solid var(--orange); color: var(--black); padding: 20px 24px; margin: 0 0 40px; }
.ask p { margin: 0; max-width: 620px; }
.svc { display: grid; grid-template-columns: 64px 1fr 260px; gap: 32px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.svc:first-of-type { border-top: 1px solid var(--ink); }
.svc .n { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--cap-paper); padding-top: 8px; }
.svc h3 { font-size: clamp(22px, 2.4vw, 30px); margin: 4px 0 14px; }
.svc p { margin: 0 0 12px; max-width: 640px; }
.svc .fmt { margin-top: 6px; }
.price b { display: block; font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.03em; }
.price .rub { display: block; margin-top: 6px; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; color: var(--cap-paper); }
.price .label { display: block; margin: 10px 0 20px; color: var(--cap-paper); line-height: 1.6; }
.price .label.o { color: var(--orange-dark); }
.rules { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); margin-top: 40px; }
.rules div { padding: 20px; font-size: 14px; line-height: 1.55; color: var(--cap-paper); }
.rules div + div { border-left: 1px solid var(--line); }
.rules b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }

/* ---------- case close-up ---------- */
.case { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.case p { color: rgba(239,237,232,.82); margin: 0 0 18px; max-width: 520px; }
.case .nums2 { display: flex; gap: 40px; margin: 30px 0 10px; }
.case .nums2 b { display: block; font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.03em; }
.case .nums2 b.o { color: var(--orange); }
.case .nums2 span { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cap-black); }
.chart { border: 1px solid var(--line-black); padding: 26px; }
.chart-top { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line-black); padding-bottom: 12px; margin-bottom: 22px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 48px; gap: 14px; align-items: center; margin-bottom: 14px; font-size: 14px; }
.bar { height: 30px; background: rgba(239,237,232,.06); position: relative; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--paper); display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-style: normal; font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--black); }
.bar i.o { background: var(--orange); }
.bar-row .pc { font-size: 13px; color: var(--cap-black); text-align: right; }
.drop { font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .12em; color: var(--orange); margin: -6px 0 12px 164px; }
.verdict { border-top: 1px solid var(--line-black); margin-top: 22px; padding-top: 16px; font-size: 15px; line-height: 1.55; color: rgba(239,237,232,.86); }
.verdict .label { display: inline; color: var(--orange); margin-right: 8px; }

/* ---------- stills strip ---------- */
.stills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-black); }
.stills img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

/* ---------- articles ---------- */
.arts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.art { padding: 24px 24px 28px 0; }
.art + .art { padding-left: 24px; border-left: 1px solid var(--line); }
.art .label { color: var(--orange-dark); }
.art h3 { margin: 12px 0 10px; }
.art p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cap-paper); }
.ph { color: var(--cap-paper); border-bottom: 1px dashed var(--line); }

/* ---------- faq ---------- */
.faq details { border-bottom: 1px solid var(--line); }
.faq > details:first-child, .sec-head + .faq details:first-child, .sec-head + .reg, .sec-head + .arts { border-top: 0; }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; gap: 16px; padding: 20px 0; font-weight: 500; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); color: var(--orange-dark); text-align: right; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 22px; max-width: 760px; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.contact > img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.contact h2 { font-weight: 800; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; margin: 18px 0 22px; }
.contact p { color: rgba(239,237,232,.82); margin: 0 0 30px; max-width: 480px; }
.links { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--line-black); }
.links a { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line-black); text-decoration: none; font-size: 16px; }
.links a span { color: var(--cap-black); transition: color .15s; }
.links a:hover span { color: var(--orange); }

.foot { border-top: 1px solid var(--line-black); padding: 28px 0 40px; }
.foot .wrap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }

/* ---------- inner page head ---------- */
.page-head { padding: 64px 0 72px; }
.page-head h1 { font-weight: 800; font-size: clamp(40px, 6vw, 84px); line-height: 1; letter-spacing: -.035em; margin: 22px 0 24px; }
.page-head p { max-width: 640px; color: rgba(239,237,232,.82); margin: 0; }
.group-title { margin: 64px 0 0; scroll-margin-top: 90px; }
.group-title:first-child { margin-top: 0; }

/* ---------- «Своя система» demo ---------- */
.demo{--cap:#8C8880;--dim:rgba(239,237,232,.14);--dim-2:rgba(239,237,232,.32);--ink:#161616}
.demo h2 { margin: 0 0 18px; }
.demo .intro{max-width:720px;color:rgba(239,237,232,.78);margin:0 0 36px}
.demo .steps{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--dim);width:fit-content;max-width:100%;margin-bottom:28px}
.demo .steps button{font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;background:transparent;color:var(--cap);border:0;border-right:1px solid var(--dim);padding:14px 18px;cursor:pointer;position:relative;transition:color .15s,background .15s}
.demo .steps button:hover{color:var(--paper)}
.demo .steps button:last-child{border-right:0}
.demo .steps button[aria-pressed="true"]{color:var(--paper);background:rgba(239,237,232,.06)}
.demo .steps button[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--orange)}
.demo .steps button:focus-visible,.demo .node:focus-visible,.demo .cta:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.demo .step-note{min-height:3.2em;max-width:760px;margin:-8px 0 26px;color:rgba(239,237,232,.78)}
.demo .step-note b{color:var(--paper);font-weight:600}
.demo .board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.demo .col h3{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 4px}
.demo .col .cap{margin-bottom:14px}
.demo .col-body{display:flex;flex-direction:column;gap:12px}
.demo .node{text-align:left;font:inherit;color:inherit;background:transparent;border:1px dashed var(--dim-2);padding:16px 16px 14px;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:background .2s,border-color .2s,color .2s;min-width:0}
.demo .node:hover:not(.sel){border-color:var(--paper);background:rgba(239,237,232,.08)}
.demo .node .t{font-weight:600;font-size:16px;line-height:1.3;display:flex;align-items:center;gap:10px}
.demo .node .d{font-size:14px;line-height:1.45;color:var(--cap)}
.demo .node .m{font-family:var(--display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cap);margin-top:4px}
.demo .light{width:9px;height:9px;flex:none;background:var(--dim-2)}
.demo .node.on{border:1px solid var(--paper);background:rgba(239,237,232,.04)}
.demo .node.on .light{background:var(--orange);box-shadow:0 0 12px 2px rgba(240,86,29,.55)}
.demo .node.sel{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.demo .node.sel .d,.demo .node.sel .m{color:#5F5B55}
.demo .arrow{display:flex;align-items:center;justify-content:center;color:var(--cap);font-size:13px}
.demo .card{margin-top:28px;border:1px solid var(--dim);background:var(--ink);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0}
.demo .card .l{padding:24px;border-right:1px solid var(--dim)}
.demo .card .l .label { font-size: 11px; }
.demo .card .r{padding:24px;display:flex;flex-direction:column;gap:14px}
.demo .card h4{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em;margin:8px 0 10px}
.demo .card p{margin:0 0 10px;color:rgba(239,237,232,.82);max-width:60ch}
.demo .io{border:1px solid var(--dim);padding:12px 14px;min-width:0}
.demo .io .label{color:var(--cap);margin-bottom:6px}
.demo .io p{margin:0;font-size:15px;color:var(--paper)}
.demo .io p.label { font-size: 11px; letter-spacing: .14em; line-height: 1.4; }
.demo .io.out{border-color:var(--dim-2)}
.demo .io.out .label{color:var(--orange)}
.demo .ex-note{font-size:12.5px;color:var(--cap)}
.demo .result{margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--dim)}
.demo .result div{padding:20px 18px 0 0}
.demo .result b{display:block;font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:6px}
.demo .result span{display:block;font-size:14.5px;color:var(--cap);line-height:1.5}
.demo .cta{display:inline-flex;margin-top:40px;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:16px 22px;background:var(--orange);border:1px solid var(--orange);color:var(--black)}
.demo .cta:hover{background:var(--paper);border-color:var(--paper)}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  :root { --gutter: 24px; }
  .burger { display: block; }
  .nav ul#menu { display: none; position: absolute; top: 100%; right: 0; left: 0; flex-direction: column; background: var(--black); border: 1px solid var(--line-black); padding: 8px 0; z-index: 20; font-size: 17px; }
  .nav ul#menu.open { display: flex; }
  .nav ul#menu li + li::before { content: none; }
  .nav ul#menu a { display: block; padding: 14px 20px; opacity: 1; }
  .nav ul#menu li.lang { display: flex; gap: 6px; padding: 14px 20px; border-top: 1px solid var(--line-black); margin-top: 6px; }
  .nav ul#menu li.lang a { display: inline; padding: 0; opacity: .8; }

  .nums { grid-template-columns: 1fr 1fr; }
  .num:nth-child(3) { border-left: 0; padding-left: 0; }
  .num:nth-child(n+3) { border-top: 1px solid var(--line-black); }
  .about, .case, .contact { grid-template-columns: 1fr; gap: 40px; }
  .about figure { max-width: 420px; }
  .svc { grid-template-columns: 40px 1fr; }
  .svc .price { grid-column: 2; }
  .arts { grid-template-columns: 1fr; }
  .art + .art { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .stills { grid-template-columns: 1fr 1fr; }
  .stills img:nth-child(3) { display: none; }
  .case-nav { grid-template-columns: 1fr 1fr; }
  .case-nav a:nth-child(3) { border-left: 0; }
  .case-nav a:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .demo .board{grid-template-columns:1fr}
  .demo .card{grid-template-columns:1fr}
  .demo .card .l{border-right:0;border-bottom:1px solid var(--dim)}
  .demo .result{grid-template-columns:1fr 1fr}
}

@media (max-width: 620px) {
  :root { --gutter: 16px; }
  body { font-size: 17px; }
  .hero-photo { background-size: 220% auto; background-position: 82% 0; background-color: var(--black); }
  .hero-photo::after { background: linear-gradient(0deg, var(--black) 0%, rgba(10,10,10,.88) 42%, rgba(10,10,10,.1) 72%, rgba(10,10,10,0) 100%); }
  .hero-in { padding-top: 330px; }
  .num { padding: 24px 16px 24px 0; }
  .num + .num { padding-left: 16px; }
  .num:nth-child(3) { padding-left: 0; }
  .reg-row { grid-template-columns: 40px 1fr; }
  .reg-row .r { grid-column: 2; white-space: normal; }
  .rules { grid-template-columns: 1fr; }
  .rules div + div { border-left: 0; border-top: 1px solid var(--line); }
  .bar-row { grid-template-columns: 96px 1fr 40px; font-size: 13px; }
  .drop { margin-left: 110px; }
  .case .nums2 { gap: 24px; flex-wrap: wrap; }
  .btn { white-space: normal; }
  .case-nav { grid-template-columns: 1fr; }
  .case-nav a + a { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 480px) {
  .demo .steps button{padding:12px 11px;font-size:10.5px}
  .demo .result{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce) {
  .demo .node{transition:none}
}