:root{
  --bg:#07080d; --ash:#10121b;
  --card: rgba(16,18,27,.72);
  --line: rgba(255,255,255,.10);
  --text:#f4f6ff; --muted: rgba(244,246,255,.70);
  --lava1:#ffb020; --lava2:#ff5a1f; --lava3:#c1121f;
  --accent: linear-gradient(135deg, rgba(255,176,32,.28), rgba(255,90,31,.22), rgba(193,18,31,.18));
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --r:18px; --r2:24px; --max:1180px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,176,32,.18), transparent 60%),
    radial-gradient(900px 700px at 90% 10%, rgba(255,90,31,.16), transparent 55%),
    radial-gradient(900px 700px at 60% 110%, rgba(193,18,31,.12), transparent 55%),
    var(--bg);
}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 16px}
.topbar{position:sticky; top:0; z-index:50; background: rgba(7,8,13,.72); backdrop-filter: blur(10px); border-bottom:1px solid var(--line);}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand__mark{width:42px; height:42px; border-radius:14px; display:grid; place-items:center; border:1px solid var(--line); background: var(--accent); box-shadow: var(--shadow);}
.brand__mark svg{width:28px; height:28px; display:block}
.brand__name{font-weight:900; letter-spacing:.2px}
.brand__tag{font-size:12px; color:var(--muted)}
.nav{display:flex; align-items:center; gap:10px}
@media (max-width:920px){.nav .hide-sm{display:none}}
.btn{height:42px; padding:0 14px; border-radius:14px; border:1px solid var(--line); background: rgba(16,18,27,.45); color: var(--text); display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; font-weight:800; transition: transform .06s ease, filter .2s ease, background .2s ease;}
.btn:active{transform: translateY(1px)}
.btn--primary{background: linear-gradient(135deg, rgba(255,176,32,.35), rgba(255,90,31,.25), rgba(193,18,31,.18)); border-color: rgba(255,176,32,.22);}
.btn--ghost{background: transparent}
.btn--full{width:100%}
.burger{display:none}
@media (max-width:920px){.burger{display:inline-flex}}
.drawer{position:fixed; inset:0; z-index:80; display:none;}
.drawer.on{display:block}
.drawer__bg{position:absolute; inset:0; background: rgba(0,0,0,.55)}
.drawer__panel{position:absolute; right:0; top:0; height:100%; width:min(360px, 92vw); border-left:1px solid var(--line); background: rgba(7,8,13,.92); backdrop-filter: blur(12px); padding:16px;}
.drawer__head{display:flex; align-items:center; justify-content:space-between}
.drawer__links{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.drawer__links a{padding:10px 12px; border-radius:14px; border:1px solid var(--line); background: rgba(16,18,27,.35)}
.drawer__links a small{display:block; color:var(--muted)}
.hero{padding:18px 0 8px; display:grid; grid-template-columns:1.25fr .75fr; gap:18px;}
@media (max-width:920px){.hero{grid-template-columns:1fr}}
.heroCard{border:1px solid var(--line); border-radius: var(--r2); background: var(--card); box-shadow: var(--shadow); overflow:hidden;}
.heroMedia{height:190px; background:
  radial-gradient(900px 190px at 30% 10%, rgba(255,176,32,.35), transparent 60%),
  radial-gradient(700px 200px at 80% 40%, rgba(255,90,31,.25), transparent 60%),
  linear-gradient(120deg, rgba(16,18,27,.65), rgba(7,8,13,.65)),
  url("/assets/img/branding-board.png");
  background-size: cover; background-position:center; border-bottom:1px solid var(--line); position:relative;}
.heroMedia:after{content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(7,8,13,.35), rgba(7,8,13,.90));}
.heroCopy{padding:14px}
h1{margin:0 0 8px; font-size: clamp(26px, 3.2vw, 44px); line-height:1.05}
.lead{color:var(--muted); margin:0 0 12px; font-size:14px; line-height:1.45}
.kpis{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; border:1px solid var(--line); background: rgba(16,18,27,.35); color: var(--muted); font-size:12px;}
.filters{margin-top:12px; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:10px;}
@media (max-width:760px){.filters{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:6px}
label{font-size:12px; color:var(--muted)}
input,select,textarea{border:1px solid var(--line); background: rgba(7,8,13,.55); color: var(--text); border-radius:14px; padding:0 12px; height:42px; outline:none;}
textarea{height:auto; padding:10px 12px; min-height:110px}
input::placeholder, textarea::placeholder{color: rgba(244,246,255,.55)}
.toggles{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:8px}
.check{display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none}
.check input{height:18px; width:18px}
.section{margin:14px 0; border-radius: var(--r2); border:1px solid var(--line); background: var(--card); box-shadow: var(--shadow);}
.section__head{padding:14px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px;}
.section__head h2{margin:0; font-size:18px}
.section__body{padding:14px}
.section__foot{padding:14px; border-top:1px solid var(--line); display:flex; justify-content:center}
.grid{padding:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid{grid-template-columns:1fr}}
.cardPromo{border-radius:18px; border:1px solid var(--line); background: rgba(7,8,13,.55); overflow:hidden; display:flex; flex-direction:column;}
.cardPromo__head{padding:12px 12px 0}
.cardPromo__title{margin:0 0 8px; font-size:16px; line-height:1.15}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.badge{font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid var(--line); color: var(--muted);}
.badge--boost{border-color: rgba(255,176,32,.55); color: rgba(255,176,32,.98); background: rgba(255,176,32,.10)}
.badge--urgent{border-color: rgba(255,90,31,.35); color: rgba(255,90,31,.92)}
.badge--container{border-color: rgba(193,18,31,.35); color: rgba(255,120,120,.95)}
.badge--zone,.badge--cat,.badge--store{border-color: rgba(255,255,255,.14)}
.cardPromo__body{padding:0 12px 12px; color: var(--muted); font-size:13px; line-height:1.35}
.cardPromo__prices{margin-top:auto; padding:12px; border-top:1px solid var(--line); display:flex; align-items:flex-end; justify-content:space-between; gap:10px;}
.priceOld{color: rgba(244,246,255,.55); text-decoration: line-through; font-size:12px}
.priceNew{font-size:20px; font-weight:950}
.discount{font-weight:950; padding:6px 10px; border-radius:14px; border:1px solid rgba(255,176,32,.25); background: rgba(255,176,32,.08); color: rgba(255,176,32,.92);}
.metaLine{padding:0 12px 12px; color: rgba(244,246,255,.55); font-size:12px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.alert{margin:14px; padding:12px; border-radius:16px; border:1px solid rgba(255,90,31,.22); background: rgba(255,90,31,.08); color: rgba(255,176,32,.92);}
.alert--error{border-color: rgba(255,90,31,.35); background: rgba(255,90,31,.10); color: rgba(255,120,120,.95)}
.hidden{display:none !important}
.footer{margin-top:22px; border-top:1px solid var(--line); background: rgba(7,8,13,.65);}
.footer__inner{padding:16px 0; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.small{font-size:12px; color: var(--muted)}
.hr{height:1px; background: var(--line); margin:12px 0}