/* Dankevich.com v2 — лампова палітра (11.08): фон #131518, латунь #C9A455 */
:root{
  --bg:#131518; --bg2:#1a1d21; --ink:#EDE8DC; --mut:#9a948a;
  --brass:#C9A455; --brass-soft:rgba(201,164,85,.12); --line:rgba(201,164,85,.22);
  --radius:14px; --maxw:1060px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg); color:var(--ink);
  font:400 17px/1.65 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
a{color:var(--brass)}
h1,h2.big,h3{font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.015em}
h1{font-size:clamp(32px,5vw,52px); line-height:1.1; margin:0 0 16px}
h3{font-size:22px; margin:0 0 10px}
.eyebrow{font:700 12px/1 "Space Mono",monospace; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mut); margin:0 0 22px}
.mono{font-family:"Space Mono",monospace}
section{padding:52px 0; border-top:1px solid var(--line)}
section.first{border-top:0}
.lede{font-size:clamp(17px,2.3vw,21px); color:var(--mut); max-width:60ch; margin:0}

/* шапка */
.nav{display:flex; align-items:center; gap:22px; padding:20px 0; flex-wrap:wrap}
.nav .logo{font-family:Fraunces,Georgia,serif; font-weight:600; font-size:20px;
  color:var(--ink); text-decoration:none; margin-right:auto}
.nav a.item{color:var(--mut); text-decoration:none; font-size:15px}
.nav a.item:hover,.nav a.item.on{color:var(--brass)}
.nav .cart{color:var(--ink); text-decoration:none; font-size:15px;
  border:1px solid var(--line); border-radius:9px; padding:7px 13px}
.nav .cart b{font-family:"Space Mono",monospace; color:var(--brass); font-weight:700}

/* герой */
.hero{display:grid; gap:34px; padding:44px 0 56px; align-items:center}
@media(min-width:800px){ .hero{grid-template-columns:1.2fr .8fr} }
.hero img{width:100%; border-radius:var(--radius); display:block;
  border:1px solid var(--line)}

/* картки */
.cards{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:640px){ .cards{grid-template-columns:1fr 1fr} }
@media(min-width:960px){ .cards.five{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; display:flex; flex-direction:column; gap:8px; transition:border-color .15s}
.card:hover{border-color:var(--brass)}
.card p{margin:0; color:var(--mut); font-size:15.5px; line-height:1.55}
.card .go{margin-top:auto; padding-top:12px; text-decoration:none; font-weight:600; font-size:15px}
.card a.cover{position:absolute; inset:0}
.tag{display:inline-block; font:700 11px/1 "Space Mono",monospace; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brass); background:var(--brass-soft);
  border-radius:6px; padding:5px 8px; width:max-content}
.soon{display:inline-block; font:700 11px/1 "Space Mono",monospace; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bg); background:var(--brass); border-radius:6px;
  padding:5px 8px; width:max-content}
.price{font-family:"Space Mono",monospace; font-size:20px; font-weight:700; color:var(--ink)}
.price small{color:var(--mut); font-weight:400; font-size:14px}

/* полиця крамниці */
details.skill{background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
  padding:0; overflow:hidden}
details.skill summary{list-style:none; cursor:pointer; padding:22px 24px; display:grid;
  gap:6px; position:relative}
details.skill summary::-webkit-details-marker{display:none}
details.skill summary::after{content:"+"; position:absolute; right:22px; top:20px;
  font-family:"Space Mono",monospace; font-size:20px; color:var(--mut)}
details.skill[open] summary::after{content:"–"}
details.skill:hover{border-color:var(--brass)}
details.skill .in{padding:0 24px 22px; color:var(--mut); font-size:15.5px}
details.skill .in p{margin:0 0 12px}
details.skill .in ol{margin:0 0 14px; padding-left:20px}
details.skill .in li{margin-bottom:6px}
.skill-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.skill-head h3{margin:0}
.skill-head .price{margin-left:auto}
.oneline{margin:0; color:var(--mut); font-size:15.5px}

/* кнопки */
.btn{display:inline-block; text-decoration:none; text-align:center; background:var(--brass);
  color:#14110a; padding:13px 26px; border-radius:9px; font-size:16px; font-weight:700;
  border:0; cursor:pointer; font-family:Manrope,sans-serif; transition:opacity .15s}
.btn:hover{opacity:.88}
.btn-ghost{display:inline-block; text-decoration:none; text-align:center; background:transparent;
  color:var(--brass); padding:12px 24px; border-radius:9px; font-size:15px; font-weight:600;
  border:1px solid var(--brass); cursor:pointer}
button:disabled,.btn:disabled{opacity:.45; cursor:not-allowed}

/* кошик і чекаут */
.cart-list{display:grid; gap:10px; margin:0 0 16px}
.cart-row{display:flex; align-items:baseline; gap:12px; border-bottom:1px dashed var(--line);
  padding-bottom:10px}
.cart-row .nm{flex:1}
.cart-row .rm{background:none; border:0; color:var(--mut); cursor:pointer; font-size:14px;
  text-decoration:underline; padding:0}
.cart-total{display:flex; justify-content:space-between; font-size:18px; margin:0 0 22px}
.checkout-box{background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; max-width:560px}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--mut);
  margin:0 0 12px}
.check input{margin-top:4px}

/* форми */
form.std{display:grid; gap:12px; max-width:520px}
input,textarea{font:inherit; padding:12px 14px; border:1px solid var(--line);
  border-radius:9px; background:var(--bg); color:var(--ink); width:100%}
textarea{min-height:110px; resize:vertical}
input:focus,textarea:focus{outline:1px solid var(--brass)}

/* чат Іри (перенос зі старої верстки, темна) */
.chat{width:100%; max-width:330px; background:#17212b; border-radius:16px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35); text-align:left; font-size:14.5px}
.chat-top{display:flex; align-items:center; gap:10px; padding:11px 14px; background:#202b36;
  border-bottom:1px solid #0f151b}
.chat-top .ava{width:31px; height:31px; border-radius:50%; background:var(--brass); color:#14110a;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:none}
.chat-top b{display:block; font-size:14.5px; color:#e9edf0; line-height:1.25}
.chat-top i{font-style:normal; font-size:12px; color:#8899a6}
.chat-body{padding:14px 12px; display:flex; flex-direction:column; gap:7px}
.msg{max-width:84%; padding:8px 11px 7px; border-radius:13px; position:relative;
  line-height:1.42; color:#e9edf0}
.msg .time{font-size:10.5px; opacity:.5; margin-left:8px; float:right; position:relative; top:5px}
.msg.in{align-self:flex-start; background:#202b36; border-bottom-left-radius:5px}
.msg.out{align-self:flex-end; background:#2b5278; border-bottom-right-radius:5px}
.voice{display:flex; align-items:center; gap:9px}
.voice .play{width:29px; height:29px; border-radius:50%; background:var(--brass); flex:none; position:relative}
.voice .play::after{content:""; position:absolute; left:11px; top:9px; border-style:solid;
  border-width:5.5px 0 5.5px 9px; border-color:transparent transparent transparent #14110a}
.voice .wave{display:flex; align-items:center; gap:2.5px; height:24px}
.voice .wave i{width:2.5px; border-radius:2px; background:var(--brass); opacity:.75; display:block}
.voice .dur{font-size:11.5px; opacity:.6}

/* модал заглушки оплати */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none;
  align-items:center; justify-content:center; padding:24px; z-index:50}
.modal.open{display:flex}
.modal .box{background:var(--bg2); border:1px solid var(--brass); border-radius:var(--radius);
  padding:32px; max-width:440px}
.modal .box h3{margin-top:0}
.modal .box p{color:var(--mut)}

/* підвал */
footer{padding:44px 0 70px; border-top:1px solid var(--line); color:var(--mut); font-size:14.5px}
.legal{display:grid; gap:26px; grid-template-columns:1fr}
@media(min-width:720px){ .legal{grid-template-columns:1fr 1fr} }
.legal p{margin:0 0 11px; line-height:1.6}
.media{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg2);
  aspect-ratio:9/16; overflow:hidden}
.media video{width:100%; height:100%; object-fit:cover; display:block}
.about{display:grid; gap:30px; grid-template-columns:1fr}
@media(min-width:720px){ .about{grid-template-columns:1.35fr 1fr; align-items:start} }
img{max-width:100%}

/* мобільний кошик: назва на весь рядок, ціна нижче */
@media(max-width:640px){
  .cart-row{flex-wrap:wrap}
  .cart-row .nm{flex:1 1 100%}
  .cart-row .price{font-size:16px}
  .cart-total .price{font-size:18px}
}

/* маніфест першого екрана */
.formula-serif{font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.015em;
  font-size:clamp(34px,5.5vw,58px); line-height:1.12; margin:0 0 26px}
.formula-serif b{color:var(--brass); font-weight:600}
.manifest p{margin:0 0 14px; font-size:17.5px; line-height:1.7; color:var(--mut)}
.manifest .hi{font-size:20px; color:var(--ink)}
.manifest .strong-line{color:var(--ink); font-weight:600}

/* відео в героях сторінок — на місці фото */
.hero-video{width:100%; border-radius:var(--radius); display:block;
  border:1px solid var(--line); object-fit:cover}