/* =====================================================================
   VELKI100 — COMPLAINTS & FEEDBACK · "yellow broadcast" theme
   ---------------------------------------------------------------------
   Follows the HOME design: continuous yellow canvas (from page-broadcast.css),
   white cards with ink text, red-accent headlines + underline, ink/yellow
   buttons, and ink accent panels. Scoped under body.vk-complaints-pro.
   ===================================================================== */

body.vk-complaints-pro {
    --ink:    #0A0A0C;
    --ink-2:  rgba(10,10,12,.72);
    --ink-3:  rgba(10,10,12,.55);
    --yellow: #FFC21A;
    --yellow-2:#FFD24D;
    --red:    #E4121F;
    --card:   #ffffff;
    --line:   rgba(10,10,12,.12);
    --pad:    var(--vk-pad, 24px);
    --max:    var(--vk-max, 1200px);
    --bn: 'Hind Siliguri', system-ui, sans-serif;
    --en: 'Sora', 'Inter', system-ui, sans-serif;
}

/* category accents (used on the icon tile / SLA pill only — cards stay white) */
body.vk-complaints-pro .vkc-acc--gold   { --acc:#F5A700; --acc-2:#C98200; --acc-rgb:245,167,0; }
body.vk-complaints-pro .vkc-acc--violet { --acc:#7C3AED; --acc-2:#5B21B6; --acc-rgb:124,58,237; }
body.vk-complaints-pro .vkc-acc--teal   { --acc:#0E9F8E; --acc-2:#0B7A6D; --acc-rgb:14,159,142; }
body.vk-complaints-pro .vkc-acc--rose   { --acc:#E4121F; --acc-2:#B00C16; --acc-rgb:228,18,31; }
body.vk-complaints-pro .vkc-acc--amber  { --acc:#E08600; --acc-2:#A86200; --acc-rgb:224,134,0; }
body.vk-complaints-pro .vkc-acc--cyan   { --acc:#0E8FC0; --acc-2:#0A6E95; --acc-rgb:14,143,192; }

body.vk-complaints-pro svg { display:inline-block; vertical-align:middle; }

/* ---------- shared ---------- */
body.vk-complaints-pro .vkc-section { max-width:var(--max); margin:0 auto; padding:64px var(--pad); }
body.vk-complaints-pro .vkc-head { text-align:center; max-width:760px; margin:0 auto 38px; }
body.vk-complaints-pro .vkc-eyebrow {
    display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px;
    background:rgba(10,10,12,.06); border:1px solid rgba(10,10,12,.2); color:var(--ink);
    font-family:var(--en); font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
body.vk-complaints-pro .vkc-eyebrow svg { color:var(--red); }
body.vk-complaints-pro .vkc-eyebrow--c { margin-bottom:16px; }
body.vk-complaints-pro .vkc-h2 {
    font-family:var(--bn); font-weight:700; color:var(--ink);
    font-size:clamp(26px, 3.6vw, 40px); line-height:1.18; letter-spacing:-.01em; margin:0 0 12px;
}
body.vk-complaints-pro .vkc-h2 em { font-style:normal; color:var(--red); position:relative; white-space:nowrap; }
body.vk-complaints-pro .vkc-h2 em::after {
    content:""; position:absolute; left:0; right:0; bottom:.02em; height:.1em;
    background:var(--red); border-radius:2px; opacity:.92;
}
body.vk-complaints-pro .vkc-lead { font-family:var(--bn); color:var(--ink-2); font-size:15.5px; line-height:1.7; margin:0; }

/* buttons */
body.vk-complaints-pro .vkc-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:14px 22px; border-radius:8px;
    font-family:var(--bn); font-weight:800; font-size:14.5px; text-decoration:none;
    border:2px solid transparent; cursor:pointer;
    transition:transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
body.vk-complaints-pro .vkc-btn--lg { padding:16px 26px; font-size:15px; }
body.vk-complaints-pro .vkc-btn--wa { background:var(--ink); color:#fff; box-shadow:0 16px 34px rgba(0,0,0,.26); }
body.vk-complaints-pro .vkc-btn--wa svg { color:#25D366; }
body.vk-complaints-pro .vkc-btn--wa:hover { transform:translateY(-2px); box-shadow:0 22px 42px rgba(0,0,0,.32); }
body.vk-complaints-pro .vkc-btn--gold { background:var(--yellow); color:var(--ink); box-shadow:0 16px 30px rgba(255,194,26,.34); }
body.vk-complaints-pro .vkc-btn--gold svg { color:var(--ink); }
body.vk-complaints-pro .vkc-btn--gold:hover { background:var(--yellow-2); transform:translateY(-2px); }
body.vk-complaints-pro .vkc-btn--ghost { background:transparent; color:var(--ink); border-color:rgba(10,10,12,.32); }
body.vk-complaints-pro .vkc-btn--ghost svg { color:var(--red); }
body.vk-complaints-pro .vkc-btn--ghost:hover { border-color:var(--ink); background:rgba(10,10,12,.06); }

/* ---------- HERO ---------- */
body.vk-complaints-pro .vkc-hero {
    position:relative; overflow:hidden; isolation:isolate;
    padding:30px var(--pad) 48px; border-bottom:2px solid var(--ink); background:transparent;
}
body.vk-complaints-pro .vkc-hero__bg { display:none; }
body.vk-complaints-pro .vkc-hero::before {
    content:"VELKI100"; position:absolute; left:50%; top:-6%; transform:translateX(-50%);
    font-family:var(--en); font-weight:800; font-size:clamp(120px,24vw,380px); letter-spacing:-.05em;
    color:rgba(10,10,12,.05); white-space:nowrap; pointer-events:none; z-index:0;
}
body.vk-complaints-pro .vkc-hero__inner { position:relative; z-index:1; max-width:var(--max); margin:0 auto; }
body.vk-complaints-pro .vkc-crumb { display:flex; align-items:center; gap:8px; margin-bottom:20px; font-family:var(--bn); font-size:12.5px; color:var(--ink-3); }
body.vk-complaints-pro .vkc-crumb a { color:rgba(10,10,12,.7); text-decoration:none; }
body.vk-complaints-pro .vkc-crumb a:hover { color:var(--red); }
body.vk-complaints-pro .vkc-hero__grid { display:grid; grid-template-columns:1.45fr .95fr; gap:40px; align-items:center; }
body.vk-complaints-pro .vkc-hero__title {
    font-family:var(--bn); font-weight:700; color:var(--ink);
    font-size:clamp(32px, 5.2vw, 60px); line-height:1.12; letter-spacing:-.01em; margin:16px 0 16px;
}
body.vk-complaints-pro .vkc-hero__title em { font-style:normal; color:var(--red); position:relative; white-space:nowrap; }
body.vk-complaints-pro .vkc-hero__title em::after {
    content:""; position:absolute; left:0; right:0; bottom:.02em; height:.11em; background:var(--red); border-radius:2px;
}
body.vk-complaints-pro .vkc-hero__lead { font-family:var(--bn); color:rgba(10,10,12,.82); font-size:16px; line-height:1.72; max-width:56ch; margin:0 0 24px; }
body.vk-complaints-pro .vkc-hero__lead strong { color:var(--ink); font-weight:700; }
body.vk-complaints-pro .vkc-hero__cta { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:24px; }
body.vk-complaints-pro .vkc-chips { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:18px 0 0; margin:0; border-top:1px solid rgba(10,10,12,.16); }
body.vk-complaints-pro .vkc-chips li {
    display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px;
    background:rgba(255,255,255,.55); border:1px solid rgba(10,10,12,.16);
    font-family:var(--bn); font-size:12.5px; font-weight:600; color:var(--ink);
}
body.vk-complaints-pro .vkc-chips svg { color:var(--red); }

/* guarantee seal — ink disc with yellow ring on the yellow canvas */
body.vk-complaints-pro .vkc-seal { display:flex; flex-direction:column; align-items:center; gap:18px; }
body.vk-complaints-pro .vkc-seal__ring {
    position:relative; width:198px; height:198px; border-radius:50%; display:grid; place-items:center; text-align:center;
    background:var(--ink); border:5px solid var(--ink);
    box-shadow:0 24px 50px rgba(0,0,0,.32), 0 0 0 6px var(--yellow), 0 0 0 8px var(--ink);
}
body.vk-complaints-pro .vkc-seal__num {
    position:relative; z-index:1; font-family:var(--bn); font-weight:800; color:var(--yellow);
    font-size:62px; line-height:.9; display:flex; flex-direction:column; align-items:center;
}
body.vk-complaints-pro .vkc-seal__num small { font-size:15px; font-weight:700; color:#fff; letter-spacing:.04em; margin-top:4px; }
body.vk-complaints-pro .vkc-seal__lbl { position:relative; z-index:1; margin-top:8px; font-family:var(--bn); font-size:12.5px; font-weight:700; color:rgba(255,255,255,.85); }
body.vk-complaints-pro .vkc-seal__stats { display:flex; gap:8px; list-style:none; padding:0; margin:0; }
body.vk-complaints-pro .vkc-seal__stats li {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:11px 10px; border-radius:13px;
    background:#fff; border:1px solid var(--line); box-shadow:0 12px 26px rgba(0,0,0,.1);
}
body.vk-complaints-pro .vkc-seal__stats b { font-family:var(--bn); font-weight:800; color:var(--ink); font-size:16px; }
body.vk-complaints-pro .vkc-seal__stats span { font-family:var(--bn); font-size:10.5px; color:var(--ink-3); text-align:center; }

/* ---------- STEP TIMELINE (white cards) ---------- */
body.vk-complaints-pro .vkc-steps { position:relative; list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
body.vk-complaints-pro .vkc-steps::before {
    content:""; position:absolute; left:12%; right:12%; top:60px; height:2px; z-index:0;
    background:repeating-linear-gradient(90deg, rgba(10,10,12,.4) 0 9px, transparent 9px 18px);
}
body.vk-complaints-pro .vkc-step {
    position:relative; z-index:1; text-align:center; padding:30px 20px 22px; border-radius:16px;
    background:var(--card); border:1px solid var(--line); box-shadow:0 18px 40px rgba(0,0,0,.1);
    transition:transform .25s, box-shadow .25s;
}
body.vk-complaints-pro .vkc-step:hover { transform:translateY(-5px); box-shadow:0 28px 56px rgba(0,0,0,.16); }
body.vk-complaints-pro .vkc-step__head { position:relative; display:inline-grid; place-items:center; width:62px; height:62px; margin:0 auto 16px; }
body.vk-complaints-pro .vkc-step__icon {
    width:62px; height:62px; border-radius:16px; display:grid; place-items:center; color:var(--yellow);
    background:var(--ink); box-shadow:0 12px 24px rgba(0,0,0,.22);
}
body.vk-complaints-pro .vkc-step__num {
    position:absolute; top:-8px; right:-12px; min-width:26px; height:26px; padding:0 7px;
    display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
    background:var(--yellow); color:var(--ink); font-family:var(--en); font-size:13px; font-weight:800;
    border:2px solid #fff; box-shadow:0 6px 14px rgba(0,0,0,.2);
}
body.vk-complaints-pro .vkc-step__title { font-family:var(--bn); font-size:17px; font-weight:800; color:var(--ink); margin:0 0 6px; }
body.vk-complaints-pro .vkc-step__desc { font-family:var(--bn); font-size:13px; color:var(--ink-2); line-height:1.6; margin:0; }

/* ---------- CATEGORY CARDS (white) ---------- */
body.vk-complaints-pro .vkc-cats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
body.vk-complaints-pro .vkc-cat {
    position:relative; isolation:isolate; overflow:hidden; padding:26px 22px 22px; border-radius:18px;
    background:var(--card); border:1px solid var(--line); box-shadow:0 18px 40px rgba(0,0,0,.1);
    transition:transform .25s, box-shadow .25s, border-color .25s;
}
body.vk-complaints-pro .vkc-cat::before {
    content:""; position:absolute; top:0; left:0; right:0; height:4px; z-index:2;
    background:linear-gradient(90deg, var(--acc), var(--acc-2)); opacity:.95;
}
body.vk-complaints-pro .vkc-cat__glow { display:none; }
body.vk-complaints-pro .vkc-cat:hover { transform:translateY(-6px); border-color:rgba(var(--acc-rgb),.5); box-shadow:0 30px 60px rgba(0,0,0,.18); }
body.vk-complaints-pro .vkc-cat__icon {
    width:54px; height:54px; border-radius:14px; display:grid; place-items:center; color:#fff; margin-bottom:16px;
    background:linear-gradient(160deg, var(--acc), var(--acc-2));
    box-shadow:0 12px 24px -8px rgba(var(--acc-rgb),.55);
}
body.vk-complaints-pro .vkc-cat__title { font-family:var(--bn); font-size:19px; font-weight:800; color:var(--ink); margin:0 0 7px; }
body.vk-complaints-pro .vkc-cat__desc { font-family:var(--bn); font-size:13.5px; color:var(--ink-2); line-height:1.65; margin:0 0 16px; }
body.vk-complaints-pro .vkc-cat__sla {
    display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
    background:rgba(var(--acc-rgb),.10); border:1px solid rgba(var(--acc-rgb),.3); color:var(--acc-2);
    font-family:var(--bn); font-size:11.5px; font-weight:700;
}
body.vk-complaints-pro .vkc-cat__sla svg { color:var(--acc-2); }

/* ---------- ESCALATION LADDER (white cards) ---------- */
body.vk-complaints-pro .vkc-ladder { position:relative; list-style:none; padding:0; margin:0 auto; max-width:780px; }
body.vk-complaints-pro .vkc-ladder::before {
    content:""; position:absolute; left:31px; top:30px; bottom:30px; width:2px;
    background:repeating-linear-gradient(180deg, rgba(10,10,12,.4) 0 8px, transparent 8px 16px);
}
body.vk-complaints-pro .vkc-tier {
    position:relative; display:grid; grid-template-columns:62px 1fr auto; align-items:center; gap:16px;
    padding:16px 20px; margin-bottom:14px; border-radius:16px;
    background:var(--card); border:1px solid var(--line); box-shadow:0 14px 34px rgba(0,0,0,.1);
    transition:transform .25s, box-shadow .25s;
}
body.vk-complaints-pro .vkc-tier:last-child { margin-bottom:0; }
body.vk-complaints-pro .vkc-tier:hover { transform:translateX(4px); box-shadow:0 20px 44px rgba(0,0,0,.16); }
body.vk-complaints-pro .vkc-tier__icon {
    position:relative; z-index:1; width:62px; height:62px; border-radius:50%; display:grid; place-items:center; color:var(--yellow);
    background:var(--ink); border:3px solid #fff; box-shadow:0 10px 22px rgba(0,0,0,.25);
}
body.vk-complaints-pro .vkc-tier__tag { display:inline-block; font-family:var(--en); font-size:10.5px; font-weight:800; letter-spacing:.06em; color:var(--red); text-transform:uppercase; margin-bottom:3px; }
body.vk-complaints-pro .vkc-tier__title { font-family:var(--bn); font-size:17px; font-weight:800; color:var(--ink); margin:0 0 3px; }
body.vk-complaints-pro .vkc-tier__desc { font-family:var(--bn); font-size:13px; color:var(--ink-2); margin:0; line-height:1.5; }
body.vk-complaints-pro .vkc-tier__time {
    font-family:var(--bn); font-size:12.5px; font-weight:800; color:var(--ink); white-space:nowrap;
    padding:8px 14px; border-radius:999px; background:var(--yellow); border:1px solid rgba(10,10,12,.18);
}

/* ---------- DIRECT ESCALATION PANEL (ink) ---------- */
body.vk-complaints-pro .vkc-escalate {
    display:grid; grid-template-columns:1.2fr .9fr; gap:30px; align-items:center;
    padding:38px; border-radius:22px; background:var(--ink); border:2px solid var(--ink);
    box-shadow:0 30px 70px rgba(0,0,0,.34);
}
body.vk-complaints-pro .vkc-escalate .vkc-eyebrow { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff; }
body.vk-complaints-pro .vkc-escalate .vkc-eyebrow svg { color:var(--yellow); }
body.vk-complaints-pro .vkc-escalate .vkc-h2 { color:#fff; }
body.vk-complaints-pro .vkc-escalate .vkc-h2 em { color:var(--yellow); }
body.vk-complaints-pro .vkc-escalate .vkc-h2 em::after { background:var(--yellow); }
body.vk-complaints-pro .vkc-escalate .vkc-lead { color:rgba(255,255,255,.78); }
body.vk-complaints-pro .vkc-escalate__btns { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
body.vk-complaints-pro .vkc-escalate .vkc-btn--wa { background:var(--yellow); color:var(--ink); }
body.vk-complaints-pro .vkc-escalate .vkc-btn--wa svg { color:#0A6E2E; }
body.vk-complaints-pro .vkc-escalate .vkc-btn--gold { background:#fff; color:var(--ink); }
body.vk-complaints-pro .vkc-escalate__assure { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
body.vk-complaints-pro .vkc-escalate__assure li {
    display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
body.vk-complaints-pro .vkc-escalate__assure svg { color:var(--yellow); flex-shrink:0; }
body.vk-complaints-pro .vkc-escalate__assure b { display:block; font-family:var(--bn); font-size:14px; color:#fff; }
body.vk-complaints-pro .vkc-escalate__assure span { font-family:var(--bn); font-size:12px; color:rgba(255,255,255,.7); }

/* ---------- FEEDBACK CTA (ink) ---------- */
body.vk-complaints-pro .vkc-cta {
    text-align:center; max-width:760px; margin:0 auto; padding:46px 32px; border-radius:22px;
    background:var(--ink); border:2px solid var(--ink); box-shadow:0 30px 70px rgba(0,0,0,.34);
}
body.vk-complaints-pro .vkc-cta .vkc-eyebrow { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff; }
body.vk-complaints-pro .vkc-cta .vkc-h2 { color:#fff; }
body.vk-complaints-pro .vkc-cta .vkc-h2 em { color:var(--yellow); }
body.vk-complaints-pro .vkc-cta .vkc-h2 em::after { background:var(--yellow); }
body.vk-complaints-pro .vkc-cta .vkc-lead { color:rgba(255,255,255,.78); margin:0 auto 24px; max-width:560px; }
body.vk-complaints-pro .vkc-cta__btns { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
body.vk-complaints-pro .vkc-cta .vkc-btn--wa { background:var(--yellow); color:var(--ink); }
body.vk-complaints-pro .vkc-cta .vkc-btn--wa svg { color:#0A6E2E; }
body.vk-complaints-pro .vkc-cta .vkc-btn--ghost { color:#fff; border-color:rgba(255,255,255,.4); }
body.vk-complaints-pro .vkc-cta .vkc-btn--ghost:hover { border-color:#fff; background:rgba(255,255,255,.1); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px) {
    /* Hero → single centered column: seal on top, copy centered below */
    body.vk-complaints-pro .vkc-hero { padding:14px var(--pad) 34px; }
    body.vk-complaints-pro .vkc-hero__grid { grid-template-columns:1fr; gap:22px; justify-items:center; }
    body.vk-complaints-pro .vkc-seal { order:-1; gap:14px; width:100%; }
    body.vk-complaints-pro .vkc-seal__stats { width:100%; max-width:360px; }
    body.vk-complaints-pro .vkc-crumb { justify-content:center; margin-bottom:10px; }
    body.vk-complaints-pro .vkc-hero__copy { text-align:center; display:flex; flex-direction:column; align-items:center; }
    body.vk-complaints-pro .vkc-hero__lead { margin-left:auto; margin-right:auto; }
    body.vk-complaints-pro .vkc-hero__cta { justify-content:center; }
    body.vk-complaints-pro .vkc-chips { justify-content:center; }
    body.vk-complaints-pro .vkc-cats { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
    body.vk-complaints-pro .vkc-steps { grid-template-columns:repeat(2,1fr); }
    body.vk-complaints-pro .vkc-steps::before { display:none; }
    /* Direct-escalate panel → stacked & centered */
    body.vk-complaints-pro .vkc-escalate { grid-template-columns:1fr; gap:24px; text-align:center; }
    body.vk-complaints-pro .vkc-escalate__copy { display:flex; flex-direction:column; align-items:center; }
    body.vk-complaints-pro .vkc-escalate .vkc-lead { margin-left:auto; margin-right:auto; }
    body.vk-complaints-pro .vkc-escalate__btns { justify-content:center; }
    body.vk-complaints-pro .vkc-escalate__assure li { justify-content:center; }
}
@media (max-width:600px) {
    body.vk-complaints-pro .vkc-section { padding:46px var(--pad); }
    body.vk-complaints-pro .vkc-cats { grid-template-columns:1fr; }
    body.vk-complaints-pro .vkc-steps { grid-template-columns:1fr; }
    body.vk-complaints-pro .vkc-escalate { padding:26px 20px; }
    body.vk-complaints-pro .vkc-tier { grid-template-columns:52px 1fr; }
    body.vk-complaints-pro .vkc-tier__time { grid-column:2; justify-self:start; margin-top:4px; }
    body.vk-complaints-pro .vkc-ladder::before { left:26px; }
    body.vk-complaints-pro .vkc-tier__icon { width:52px; height:52px; }
    body.vk-complaints-pro .vkc-hero__cta .vkc-btn,
    body.vk-complaints-pro .vkc-cta__btns .vkc-btn { flex:1 1 100%; }
}