:root{
  --ink:#0f172a; --muted:#6b7280; --line:#e5e7eb; --bg:#ffffff; --panel:#ffffff;

  /* Accent: green theme */
  --accent:#16a34a;
  --accent-2:#22c55e;

  /* USP chips: soft green */
  --chip-bg:#f6fff9;
  --chip-bd:#c7f0d7;
  --chip-fg:#064e3b;

  --shadow:0 6px 28px rgba(2,6,23,.08);
}

/* Page wrapper */
.vk-results{
  background:var(--bg); padding:16px 16px;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink);
}
.vk-results *{box-sizing:border-box}
.vk-wrap{max-width:min(1120px,100%); margin:0 auto}

/* ========================= FEATURED ========================= */
.vk-featured{
  position:relative; background:var(--panel);
  border:3px solid #bfead2;            /* soft green border */
  border-radius:18px;
  padding:22px; box-shadow:var(--shadow); margin-bottom:18px;
}
.vk-badge{
  position:absolute; top:-8px; right:-5px;
  background:linear-gradient(135deg,#3b82f6,#2563eb); /* contrasts the green CTA */
  color:#fff; font-size:11px; font-weight:900;
  padding:6px 12px; border-radius:8px; white-space:nowrap;
  box-shadow:0 10px 20px rgba(59,130,246,.20); z-index:2;
}
.vk-grid{
  display:grid; grid-template-columns:96px 1fr 220px; gap:22px; align-items:center;
}
.vk-logo{
  width:96px; height:96px; border-radius:14px; background:#f3f4f6; border:1px solid #eef2f7;
  display:grid; place-items:center; overflow:hidden
}
.vk-logo img{max-width:100%; max-height:100%; object-fit:contain}
.vk-logo span{font-weight:900; font-size:28px; color:#111827}

.vk-main{display:flex; flex-direction:column; gap:10px; min-width:0}
.vk-name{
  margin:0 !important; font-size:20px; font-weight:900;
  word-break: normal !important; overflow-wrap:anywhere; hyphens:auto;
}
.vk-sub{color:#4b5563; font-size:14px}

/* USP chips */
.vk-usps{
  list-style:none !important;
  margin:4px 0 0 !important;
  padding:0 !important;
  padding-inline-start:0 !important;
  margin-inline-start:0 !important;
  display:flex; gap:8px; flex-wrap:wrap; align-self:flex-start;
}
.vk-usps li{
  margin:0 !important; text-indent:0;
  background:var(--chip-bg);
  border:1px solid var(--chip-bd);
  color:var(--chip-fg);
  font-weight:600; font-size:12px; padding:6px 10px; border-radius:10px; white-space:nowrap;
}
.vk-usps li::marker{content:none}

/* Align featured heading/sub with chips */
.vk-name, .vk-sub{ margin-left:10px; }

/* CTA (featured) */
.vk-cta{display:flex; justify-content:flex-end}
.vk-btn-cta{
  all:unset; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; font-weight:900;
  border-radius:12px; padding:12px 18px; box-shadow:0 12px 26px rgba(34,197,94,.24);
  transition:filter .15s ease, transform .05s ease;
}
.vk-btn-cta:hover{filter:brightness(.92); color:#fff;}
.vk-btn-cta:active{filter:brightness(.88)}

/* ========================= OTHER CARDS ========================= */
.vk-list{display:grid; gap:14px}

/* Clear grid areas so title can own a full row */
.vk-card{
  background:#fff; border:1.5px solid #cfe9db; border-radius:14px; padding:16px 18px;
  display:grid;
  grid-template-columns:64px 1fr auto;
  grid-template-areas:
    "logo head cta"
    "logo sub  cta"
    "logo usps cta";
  gap:16px;
  align-items:center;
}
.vk-card.dim{opacity:.94}

.vk-card-logo{
  grid-area:logo;
  width:64px; height:64px; border-radius:12px; background:#f3f4f6; border:1px solid #eef2f7;
  display:grid; place-items:center; overflow:hidden
}
.vk-card-logo img{max-width:100%; max-height:100%; object-fit:contain}
.vk-card-logo span{font-weight:900; font-size:20px}

.vk-card-name{
  grid-area:head;
  font-weight:900; font-size:18px; margin:0 0 0 10px !important;
  word-break: normal !important; overflow-wrap:anywhere; hyphens:auto;
}
.vk-card-sub{
  grid-area:sub;
  font-size:13px; color:#64748b; margin-left:10px;
}
.vk-card-usps{
  grid-area:usps;
  list-style:none; margin:2px 0 0 !important; padding:0; display:flex; gap:8px; flex-wrap:wrap;
}
.vk-card-usps li{
  background:var(--chip-bg); border:1px solid var(--chip-bd); color:var(--chip-fg);
  font-weight:600; font-size:12px; padding:6px 10px; border-radius:10px; white-space:nowrap;
}

.vk-card-cta{
  grid-area:cta;
  display:flex; justify-content:flex-end; align-self:stretch; align-items:center;
}
.vk-card-cta .vk-btn-cta{
  padding:10px 14px; border-radius:10px;
  background:#585858; color:#e6f7ec; box-shadow:none; transform:none;
}
.vk-card-cta .vk-btn-cta:hover{ filter:brightness(1.02); }
.vk-card-cta .vk-btn-cta:active{ filter:brightness(0.98); }

/* ========================= RESPONSIVE ========================= */
@media (max-width:980px){
  .vk-grid{grid-template-columns:88px 1fr 200px}
  .vk-logo{width:88px; height:88px}
}
@media (max-width:820px){
  .vk-grid{grid-template-columns:80px 1fr}
  .vk-logo{width:80px; height:80px}
  .vk-cta{grid-column:1 / -1; justify-content:stretch; margin-top:8px}
  .vk-btn-cta{width:100%}
  .vk-name, .vk-sub, .vk-card-name, .vk-card-sub{margin-left:8px}
}

/* Mobile: title row, subtitle row, then logo + USPs, CTA at bottom */
@media (max-width:760px){

  /* Featured layout */
  .vk-grid{
    grid-template-columns:56px 1fr;
    grid-template-areas:
      "headName headName"
      "headSub  headSub"
      "logo     usps"
      "cta      cta";
    gap:10px; align-items:start;
  }
  .vk-main{ display:contents; }
  .vk-name{ grid-area:headName; margin-left:0 !important; }
  .vk-sub{  grid-area:headSub;  margin-left:0 !important; }
  .vk-logo{ grid-area:logo; width:56px; height:56px; }
  .vk-usps{ grid-area:usps; margin-top:4px !important; min-width:0; }
  .vk-cta{  grid-area:cta; justify-content:stretch; margin-top:6px; }
  .vk-btn-cta{ width:100%; }

  /* Other cards layout */
  .vk-card{
    grid-template-columns:56px 1fr;
    grid-template-areas:
      "head head"
      "sub  sub"
      "logo usps"
      "cta  cta";
    gap:10px; align-items:start;
  }
  .vk-card-name{ grid-area:head; margin-left:0 !important; }
  .vk-card-sub{  grid-area:sub;  margin-left:0 !important; }
  .vk-card-logo{ grid-area:logo; width:56px; height:56px; }
  .vk-card-usps{ grid-area:usps; margin-top:4px !important; min-width:0; }
  .vk-card-cta{  grid-area:cta; justify-content:stretch; margin-top:6px; }
  .vk-card-cta .vk-btn-cta{ width:100%; }
}