/* portfolio-cards.css — inlined client site-cards, scoped via [data-card] */

[data-card] .card,
[data-card] .card *,
[data-card] .card *::before,
[data-card] .card *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[data-card] .card {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  container-type: inline-size;
  container-name: card;
  overflow: hidden;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

[data-card] .card a { color: inherit; text-decoration: none; }
[data-card] .card img,
[data-card] .card svg { display: block; max-width: 100%; }

/* === aning-hr === */
[data-card="aning-hr"] {
    --wine: #a92a2a;
    --wine-deep: #7a1a1a;
    --steel: #89a3be;
    --ink: #1a0d0d;
    --paper: #fdfdfd;
  }

  [data-card="aning-hr"] .card {
    background: #1a0d0d;
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
  }

  /* Photographic background — simulated office interior via layered gradients */
  [data-card="aning-hr"] .photo {
    position: absolute; inset: 0;
    background:
      radial-gradient(40% 60% at 70% 35%, rgba(255,220,180,0.18), transparent 60%),
      radial-gradient(50% 70% at 20% 80%, rgba(120,90,70,0.30), transparent 65%),
      linear-gradient(160deg, #3a2520 0%, #2a1818 45%, #1a0d0d 100%);
  }

  [data-card="aning-hr"] .photo::before {
    /* faint window grid suggestion */
    content: "";
    position: absolute; left: 55%; top: 18%; width: 30%; height: 45%;
    background:
      linear-gradient(to right, rgba(255,230,200,0.10) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,230,200,0.10) 1px, transparent 1px),
      radial-gradient(80% 100% at 50% 0%, rgba(255,220,180,0.18), transparent 70%);
    background-size: 3cqw 4cqw, 3cqw 4cqw, 100% 100%;
    transform: skewY(-3deg);
    filter: blur(0.2cqw);
  }

  /* Wine overlay — matches real site's 135deg gradient */
  [data-card="aning-hr"] .overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(169,42,42,0.78) 0%, rgba(137,163,190,0.18) 100%);
  }

  /* Wave divider at the bottom (matches real site) */
  [data-card="aning-hr"] .wave {
    position: absolute; left: 0; right: 0; bottom: 0;
    width: 100%; height: 12cqw;
    display: block;
  }

  [data-card="aning-hr"] .frame {
    position: absolute; inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 4cqw 6cqw 8cqw;
    z-index: 2;
    text-align: center;
  }

  [data-card="aning-hr"] .top {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 1.2cqw; letter-spacing: 0.24em; text-transform: uppercase;
    color: rgba(255,255,255,0.85); font-weight: 600;
  }

  [data-card="aning-hr"] .top .mark {
    display: inline-flex; align-items: center; gap: 0.9cqw;
    font-weight: 800;
  }

  [data-card="aning-hr"] .top .mark::before {
    content: ""; width: 1.1cqw; height: 1.1cqw; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0.3cqw rgba(255,255,255,0.25);
  }

  [data-card="aning-hr"] .hero {
    align-self: center;
    display: grid;
    gap: 2.4cqw;
    justify-items: center;
  }

  [data-card="aning-hr"] .hero h1 {
    font-weight: 800;
    font-size: 7.4cqw;
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: #fff;
    text-shadow: 0 0.3cqw 1.2cqw rgba(0,0,0,0.35);
    max-width: 18ch;
  }

  [data-card="aning-hr"] .hero p {
    font-size: 1.7cqw;
    line-height: 1.45;
    color: rgba(255,255,255,0.92);
    max-width: 44ch;
    font-weight: 400;
  }

  [data-card="aning-hr"] .cta {
    display: inline-flex; gap: 1.4cqw; justify-content: center;
    margin-top: 0.4cqw;
  }

  [data-card="aning-hr"] .btn {
    padding: 1.4cqw 2.6cqw;
    border-radius: 999px;
    font-size: 1.5cqw;
    font-weight: 600;
    letter-spacing: -0.005em;
  }

  [data-card="aning-hr"] .btn-fill { background: #fff; color: var(--wine); }

  [data-card="aning-hr"] .btn-out { border: 0.2cqw solid #fff; color: #fff; }

  [data-card="aning-hr"] .foot {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 1.2cqw; letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(255,255,255,0.75); font-weight: 600;
    position: relative; z-index: 3;
    padding-top: 1cqw;
  }

  [data-card="aning-hr"] .foot .dom { color: #fff; font-weight: 800; }


/* === aningfilm-hr === */
[data-card="aningfilm-hr"] {
    --paper: #f4ede2;
    --ink:   #2a201d;
    --rule:  #c8bea8;
    --muted: #6e5e54;
    --red:   #c14843;
    --halo-a: #efd9c8;
    --halo-b: #f4ede2;
  }

  [data-card="aningfilm-hr"] .card {
    background:
      radial-gradient(60% 80% at 28% 70%, var(--halo-a), transparent 70%),
      var(--halo-b);
    color: var(--ink);
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  }

  [data-card="aningfilm-hr"] .frame {
    position: absolute; inset: 0;
    padding: 6cqw;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 4cqw;
  }

  [data-card="aningfilm-hr"] .kicker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.05cqw;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex; justify-content: space-between; align-items: center;
  }

  [data-card="aningfilm-hr"] .kicker .dot {
    display: inline-block;
    width: 0.6cqw; height: 0.6cqw; border-radius: 50%;
    background: var(--red);
    margin-right: 0.8cqw;
    vertical-align: middle;
  }

  [data-card="aningfilm-hr"] .hero {
    align-self: center; justify-self: center;
    text-align: center;
    display: grid; gap: 2.4cqw;
    justify-items: center;
  }

  [data-card="aningfilm-hr"] .logo {
    width: 60%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0.15cqw 0 rgba(0,0,0,0.10));
  }

  [data-card="aningfilm-hr"] .tag {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 3.4cqw;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
  }

  [data-card="aningfilm-hr"] .tag .red { color: var(--red); }

  [data-card="aningfilm-hr"] .foot {
    display: flex; justify-content: space-between; align-items: end;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.05cqw;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    border-top: 0.1cqw solid var(--rule);
    padding-top: 2cqw;
  }

  [data-card="aningfilm-hr"] .foot .dom {
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.06em;
    font-size: 1.3cqw;
  }


/* === apeks-hr === */
[data-card="apeks-hr"] {
    --ink: #161616;
    --red: #fe4a49;
    --paper: #f4f2ef;
  }

  [data-card="apeks-hr"] .card {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Poppins', system-ui, sans-serif;
  }

  /* black top bar + red apex wedge */
  [data-card="apeks-hr"] .card::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--ink);
    clip-path: polygon(0 0, 100% 0, 100% 16%, 0 20%);
  }

  [data-card="apeks-hr"] .card::after {
    content: "";
    position: absolute; left: -8cqw; right: -8cqw; bottom: 0; top: 0;
    background: var(--red);
    clip-path: polygon(0 88%, 100% 70%, 100% 100%, 0 100%);
  }

  [data-card="apeks-hr"] .frame {
    position: absolute; inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 4cqw 6cqw;
    z-index: 1;
  }

  [data-card="apeks-hr"] .top {
    color: white;
    font-size: 1.3cqw; letter-spacing: 0.32em; text-transform: uppercase;
    font-weight: 800;
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 0.6cqw;
  }

  [data-card="apeks-hr"] .glyph {
    display: inline-flex; align-items: center; gap: 1.2cqw;
  }

  [data-card="apeks-hr"] .glyph svg { width: 2.2cqw; height: 2.2cqw; }

  [data-card="apeks-hr"] .word {
    align-self: center;
    font-weight: 900;
    font-size: 22cqw;
    line-height: 0.85;
    letter-spacing: -0.045em;
    color: var(--red);
    text-transform: uppercase;
    padding-top: 4cqw;
    text-align: center;
  }

  [data-card="apeks-hr"] .word u { text-decoration: none; color: var(--ink); }

  [data-card="apeks-hr"] .bottom {
    color: white;
    font-size: 1.4cqw; letter-spacing: 0.18em;
    font-weight: 800; text-transform: uppercase;
    display: flex; justify-content: space-between; align-items: end;
    align-self: end;
    margin-bottom: 0.4cqw;
  }

  [data-card="apeks-hr"] .bottom .dom { font-size: 2.2cqw; letter-spacing: -0.005em; text-transform: lowercase; }


/* === cjenik-app === */
[data-card="cjenik-app"] {
    --orange: #ff6429;
    --ink: #1f2937;
    --bg: #fdfbf9;
  }

  [data-card="cjenik-app"] .card {
    background:
      radial-gradient(80% 90% at 100% 110%, #ffd0bd, transparent 55%),
      radial-gradient(60% 70% at 0% -10%, #ffe9dd, transparent 60%),
      linear-gradient(135deg, #ffffff, var(--bg));
    color: var(--ink);
    font-family: 'Poppins', system-ui, sans-serif;
  }

  [data-card="cjenik-app"] .frame {
    position: absolute; inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 5cqw 6cqw;
  }

  [data-card="cjenik-app"] .top {
    display: flex; align-items: center; justify-content: space-between;
  }

  [data-card="cjenik-app"] .pill {
    display: inline-flex; align-items: center; gap: 1cqw;
    border: 0.15cqw solid #ffb89b;
    background: rgba(255,255,255,0.85);
    color: var(--orange);
    padding: 1cqw 2cqw;
    border-radius: 99px;
    font-size: 1.3cqw; font-weight: 700; letter-spacing: 0.04em;
  }

  [data-card="cjenik-app"] .pill .b { width: 0.9cqw; height: 0.9cqw; border-radius: 50%; background: var(--orange); }

  [data-card="cjenik-app"] .badge {
    display: inline-flex; align-items: center; gap: 1.2cqw;
    padding: 1cqw 1.6cqw 1cqw 1cqw;
    background: white;
    border: 0.15cqw solid #efe6dd;
    border-radius: 99px;
    box-shadow: 0 0.6cqw 1.6cqw -0.4cqw rgba(31,41,55,0.08);
  }

  [data-card="cjenik-app"] .badge img {
    width: 4cqw; height: 4cqw;
    display: block;
  }

  [data-card="cjenik-app"] .badge .word {
    font-weight: 800;
    font-size: 1.5cqw;
    letter-spacing: -0.005em;
    color: var(--ink);
    line-height: 1;
  }

  [data-card="cjenik-app"] .badge .word i { font-style: normal; color: var(--orange); }

  [data-card="cjenik-app"] .badge .word small {
    display: block;
    font-weight: 600;
    font-size: 0.95cqw;
    color: rgba(31,41,55,0.55);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 0.4cqw;
  }

  [data-card="cjenik-app"] .stack {
    align-self: end;
    font-weight: 900;
    font-size: 14cqw; line-height: 0.86;
    letter-spacing: -0.045em;
  }

  [data-card="cjenik-app"] .stack i {
    font-style: normal;
    background: linear-gradient(110deg, #ff8a4f, var(--orange) 50%, #ff4d1a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  [data-card="cjenik-app"] .stack u {
    text-decoration: none; color: var(--ink);
  }

  [data-card="cjenik-app"] .stack small {
    display: block;
    font-size: 0.22em;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(31,41,55,0.55);
    margin-top: 1.4cqw;
  }

  [data-card="cjenik-app"] .bottom {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 2cqw;
    font-size: 1.5cqw;
  }

  [data-card="cjenik-app"] .dom {
    color: var(--orange);
    font-weight: 800;
    font-size: 2.4cqw; letter-spacing: -0.005em;
  }

  [data-card="cjenik-app"] .cta {
    display: inline-flex; align-items: center; gap: 1cqw;
    color: var(--ink); font-weight: 700;
    background: white;
    border: 0.15cqw solid #e4dfd9;
    padding: 1.2cqw 2.2cqw;
    border-radius: 99px;
  }

  [data-card="cjenik-app"] .cta::after {
    content: "→"; color: var(--orange); font-weight: 900;
  }


/* === damirkudin-com === */
[data-card="damirkudin-com"] {
    --bg: #f5f4f2;
    --ink: #0d0d0e;
    --warn: #c8c4ba;
  }

  [data-card="damirkudin-com"] .card {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
  }

  /* black filmstrip ribbon across mid-card */
  [data-card="damirkudin-com"] .strip {
    position: absolute; left: 0; right: 0; top: 28%; height: 56%;
    background: var(--ink);
    display: flex; align-items: center;
  }

  [data-card="damirkudin-com"] .strip::before, [data-card="damirkudin-com"] .strip::after {
    content: ""; position: absolute; left: 0; right: 0; height: 3.5cqw;
    background-image: repeating-linear-gradient(
      to right,
      var(--bg) 0, var(--bg) 1.6cqw,
      transparent 1.6cqw, transparent 3.4cqw
    );
  }

  [data-card="damirkudin-com"] .strip::before { top: 0; }

  [data-card="damirkudin-com"] .strip::after { bottom: 0; }

  [data-card="damirkudin-com"] .credit {
    position: absolute; top: 4cqw; left: 6cqw; right: 6cqw;
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.3cqw; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(13,13,14,0.6);
  }

  [data-card="damirkudin-com"] .credit b { color: var(--ink); font-weight: 700; letter-spacing: 0.08em; font-size: 1.5cqw; }

  [data-card="damirkudin-com"] .title {
    position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: white;
    z-index: 2;
  }

  [data-card="damirkudin-com"] .title .h {
    font-family: 'Inter', serif;
    font-weight: 800; font-style: italic;
    font-size: 9.5cqw; line-height: 0.95;
    letter-spacing: -0.025em;
  }

  [data-card="damirkudin-com"] .title .sh {
    margin-top: 1.2cqw;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 1.6cqw; letter-spacing: 0.42em; text-transform: uppercase;
    color: rgba(255,255,255,0.7);
  }

  [data-card="damirkudin-com"] .foot {
    position: absolute; left: 6cqw; right: 6cqw; bottom: 4cqw;
    display: flex; justify-content: space-between; align-items: end;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.3cqw; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(13,13,14,0.55);
  }

  [data-card="damirkudin-com"] .foot .dom { color: var(--ink); font-weight: 700; letter-spacing: 0.08em; font-size: 1.5cqw; }


/* === dionizturizam-hr === */
[data-card="dionizturizam-hr"] {
    --bone: #e2e1da;
    --ink: #1e2226;
    --green: #3f8772;
    --terracotta: #b0411e;
  }

  [data-card="dionizturizam-hr"] .card {
    background: linear-gradient(180deg, #ebe9e0, var(--bone));
    color: var(--ink);
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  }

  /* tiny architectural rule lines top */
  [data-card="dionizturizam-hr"] .card::before {
    content: ""; position: absolute;
    top: 18cqw; left: 0; right: 0; height: 0.12cqw;
    background: var(--ink); opacity: 0.18;
  }

  [data-card="dionizturizam-hr"] .card::after {
    content: ""; position: absolute;
    top: 18.6cqw; left: 0; right: 0; height: 0.12cqw;
    background: var(--ink); opacity: 0.08;
  }

  [data-card="dionizturizam-hr"] .frame {
    position: absolute; inset: 5cqw 6cqw;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 2cqw;
  }

  [data-card="dionizturizam-hr"] .top {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 1.4cqw; letter-spacing: 0.2em; text-transform: uppercase;
    font-weight: 500; color: rgba(30,34,38,0.55);
  }

  [data-card="dionizturizam-hr"] .logo {
    display: inline-flex; align-items: center; gap: 1.2cqw;
    color: var(--ink); font-weight: 700;
  }

  [data-card="dionizturizam-hr"] .logo .sq {
    width: 2.6cqw; height: 2.6cqw;
    background: var(--terracotta);
    position: relative;
  }

  [data-card="dionizturizam-hr"] .logo .sq::before {
    content: ""; position: absolute; inset: 0.6cqw;
    background: var(--bone);
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
  }

  [data-card="dionizturizam-hr"] .big {
    align-self: center;
    font-weight: 800;
    font-size: 13cqw;
    line-height: 0.94;
    letter-spacing: -0.035em;
    color: var(--ink);
  }

  [data-card="dionizturizam-hr"] .big i {
    font-style: italic;
    color: var(--green);
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    font-size: 1.1em;
    letter-spacing: -0.02em;
  }

  [data-card="dionizturizam-hr"] .big .dot { color: var(--ink); }

  [data-card="dionizturizam-hr"] .meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2cqw;
    border-top: 0.1cqw solid rgba(30,34,38,0.3);
    padding-top: 1.6cqw;
  }

  [data-card="dionizturizam-hr"] .meta b { display: block; font-weight: 700; font-size: 1.5cqw; color: var(--ink); }

  [data-card="dionizturizam-hr"] .meta span.t { display: block; color: rgba(30,34,38,0.5); font-size: 1.1cqw; text-transform: uppercase; letter-spacing: 0.22em; margin-bottom: 0.4cqw; }

  [data-card="dionizturizam-hr"] .dom { color: var(--green); }

  [data-card="dionizturizam-hr"] .num { color: var(--green); font-feature-settings: "tnum"; }


/* === eep-hr === */
[data-card="eep-hr"] {
    --night: #0b1726;
    --night-2: #0f2235;
    --paper: #f3f4f6;
    --amber: #f5a623;
    --steel: #6b7e9a;
  }

  [data-card="eep-hr"] .card {
    background:
      radial-gradient(80% 60% at 90% 10%, rgba(245,166,35,0.08), transparent 60%),
      radial-gradient(60% 60% at 10% 100%, rgba(11,103,168,0.18), transparent 60%),
      linear-gradient(180deg, #08111b, var(--night));
    color: var(--paper);
    font-family: 'Source Serif 4', 'Times New Roman', serif;
  }

  /* power line motif — diagonal cables */
  [data-card="eep-hr"] .card::before {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(to right, transparent 49.92%, rgba(245,166,35,0.18) 50%, transparent 50.08%) 0 0 / 33% 100% no-repeat,
      linear-gradient(to right, transparent 49.92%, rgba(245,166,35,0.10) 50%, transparent 50.08%) 33% 0 / 33% 100% no-repeat,
      linear-gradient(to right, transparent 49.92%, rgba(245,166,35,0.06) 50%, transparent 50.08%) 66% 0 / 33% 100% no-repeat;
    transform: skewX(-12deg);
    pointer-events: none;
  }

  [data-card="eep-hr"] .frame {
    position: absolute; inset: 5cqw 6cqw;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 2cqw;
    z-index: 1;
  }

  [data-card="eep-hr"] .top {
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.3cqw; letter-spacing: 0.32em; text-transform: uppercase;
    font-weight: 700; color: rgba(243,244,246,0.55);
  }

  [data-card="eep-hr"] .pin { color: var(--amber); }

  [data-card="eep-hr"] .big {
    align-self: center;
    font-weight: 700;
    font-size: 22cqw;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--paper);
  }

  [data-card="eep-hr"] .big small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 400; font-style: normal;
    font-size: 0.2em;
    color: var(--steel);
    letter-spacing: 0.04em;
    margin-top: 1.6cqw;
  }

  [data-card="eep-hr"] .big i {
    font-style: italic;
    color: var(--amber);
    font-weight: 500;
  }

  [data-card="eep-hr"] .foot {
    display: flex; justify-content: space-between; align-items: end;
    font-family: 'Inter', sans-serif;
    font-size: 1.4cqw; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(243,244,246,0.55); font-weight: 600;
  }

  [data-card="eep-hr"] .foot .dom { color: var(--amber); font-size: 2cqw; letter-spacing: 0.04em; text-transform: lowercase; }


/* === kemometrika-hr === */
[data-card="kemometrika-hr"] {
    --mint: #d6f3e9;
    --mint-2: #eaf8f2;
    --teal: #15c4a2;
    --teal-deep: #0d6057;
    --ink: #1c3c45;
    --orange: #f09b4f;
  }

  [data-card="kemometrika-hr"] .card {
    background:
      radial-gradient(70% 80% at 100% 100%, #b6ead8, transparent 60%),
      radial-gradient(60% 80% at 0% -10%, #f5fbf8, transparent 60%),
      linear-gradient(135deg, var(--mint-2), var(--mint));
    color: var(--ink);
    font-family: 'Sora', system-ui, sans-serif;
  }

  /* gentle dot grid lower-right */
  [data-card="kemometrika-hr"] .card::before {
    content: "";
    position: absolute; right: 4cqw; bottom: 4cqw;
    width: 30cqw; height: 24cqw;
    background-image: radial-gradient(circle, rgba(28,60,69,0.16) 0.3cqw, transparent 0.3cqw);
    background-size: 2cqw 2cqw;
    opacity: 0.7;
    border-radius: 2cqw;
  }

  [data-card="kemometrika-hr"] .frame {
    position: absolute; inset: 5cqw 6cqw;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 2cqw;
    z-index: 1;
  }

  [data-card="kemometrika-hr"] .top {
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Manrope', sans-serif;
    font-size: 1.4cqw; letter-spacing: 0.22em; text-transform: uppercase;
    font-weight: 700; color: var(--teal-deep);
  }

  [data-card="kemometrika-hr"] .badge {
    display: inline-flex; align-items: center; gap: 1cqw;
    background: white;
    padding: 1cqw 2cqw; border-radius: 99px;
    border: 0.12cqw solid rgba(13,96,87,0.15);
  }

  [data-card="kemometrika-hr"] .badge .live { width: 0.8cqw; height: 0.8cqw; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0.4cqw rgba(21,196,162,0.25); }

  [data-card="kemometrika-hr"] .big {
    align-self: center;
    font-weight: 800;
    font-size: 11cqw; line-height: 0.88;
    letter-spacing: -0.045em;
    color: var(--ink);
  }

  [data-card="kemometrika-hr"] .big u {
    text-decoration: none;
    color: var(--teal);
  }

  [data-card="kemometrika-hr"] .big .dot { color: var(--teal); }

  [data-card="kemometrika-hr"] .big small {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 0.18em;
    color: rgba(28,60,69,0.65);
    letter-spacing: 0.02em;
    margin-top: 1.4cqw;
  }

  [data-card="kemometrika-hr"] .foot {
    display: flex; justify-content: space-between; align-items: end;
    font-family: 'Manrope', sans-serif;
    font-size: 1.4cqw; color: rgba(28,60,69,0.65);
  }

  [data-card="kemometrika-hr"] .foot .dom { color: var(--teal-deep); font-weight: 800; font-size: 2.2cqw; letter-spacing: -0.005em; }

  [data-card="kemometrika-hr"] .foot .pill {
    background: var(--teal); color: white;
    padding: 1cqw 2cqw; border-radius: 99px;
    font-weight: 700; letter-spacing: 0.04em;
  }


/* === krovistadomagoj-hr === */
[data-card="krovistadomagoj-hr"] {
    --concrete: #5a5d63;
    --concrete-2: #45484e;
    --paper: #e9e7e3;
    --orange: #d96b3a;
    --blue: #3498db;
  }

  [data-card="krovistadomagoj-hr"] .card {
    background: linear-gradient(180deg, #6e7178 0%, var(--concrete) 50%, var(--concrete-2) 100%);
    color: var(--paper);
    font-family: 'Inter', system-ui, sans-serif;
  }

  /* zigzag roof silhouette running across the bottom */
  [data-card="krovistadomagoj-hr"] .roof {
    position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
    background:
      linear-gradient(180deg, transparent, rgba(0,0,0,0.18));
    clip-path: polygon(0 60%, 8% 40%, 16% 60%, 24% 30%, 32% 60%, 40% 25%, 48% 60%, 56% 30%, 64% 60%, 72% 35%, 80% 60%, 88% 40%, 96% 60%, 100% 50%, 100% 100%, 0 100%);
  }

  [data-card="krovistadomagoj-hr"] .roof::before {
    content: ""; position: absolute; inset: 0;
    background: rgba(0,0,0,0.3);
    clip-path: inherit;
  }

  [data-card="krovistadomagoj-hr"] .triangle {
    position: absolute; left: 50%; top: 12cqw;
    transform: translateX(-50%);
    width: 8cqw; height: 0;
    border-left: 4cqw solid transparent;
    border-right: 4cqw solid transparent;
    border-bottom: 6cqw solid var(--orange);
    filter: drop-shadow(0 0.6cqw 0 rgba(0,0,0,0.18));
  }

  [data-card="krovistadomagoj-hr"] .triangle::after {
    content: ""; position: absolute;
    left: -3.4cqw; top: 0.8cqw;
    width: 6.8cqw; height: 0;
    border-left: 3.4cqw solid transparent;
    border-right: 3.4cqw solid transparent;
    border-bottom: 5cqw solid var(--concrete);
  }

  [data-card="krovistadomagoj-hr"] .frame {
    position: absolute; inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 5cqw 6cqw;
    text-align: center;
    z-index: 1;
  }

  [data-card="krovistadomagoj-hr"] .top {
    font-family: 'DM Mono', monospace;
    font-size: 1.3cqw; letter-spacing: 0.32em; text-transform: uppercase;
    color: rgba(233,231,227,0.7);
    align-self: start;
  }

  [data-card="krovistadomagoj-hr"] .name {
    align-self: end;
    font-weight: 800;
    font-size: 11cqw;
    line-height: 0.92;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--paper);
    text-shadow: 0 0.4cqw 0 rgba(0,0,0,0.2);
    z-index: 2;
    position: relative;
    margin-bottom: 4cqw;
  }

  [data-card="krovistadomagoj-hr"] .name b { display:block; color: var(--orange); font-weight: 800; font-size: 0.86em; }

  [data-card="krovistadomagoj-hr"] .foot {
    font-family: 'DM Mono', monospace;
    font-size: 1.4cqw; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(233,231,227,0.7);
    z-index: 2;
    align-self: end;
    display: flex; justify-content: space-between;
  }

  [data-card="krovistadomagoj-hr"] .foot .dom { color: var(--paper); font-weight: 500; font-size: 1.7cqw; }


/* === logicelecto-hr === */
[data-card="logicelecto-hr"] {
    --navy: #0f1845;
    --navy-2: #1a1f5c;
    --blue: #1a5ce0;
    --cyan: #00d6dd;
    --paper: #e8ecf6;
  }

  [data-card="logicelecto-hr"] .card {
    background:
      radial-gradient(60% 90% at 90% 110%, rgba(0,214,221,0.18), transparent 60%),
      radial-gradient(80% 80% at 0% 0%, rgba(26,92,224,0.18), transparent 60%),
      linear-gradient(160deg, var(--navy), var(--navy-2));
    color: var(--paper);
    font-family: 'Lato', system-ui, sans-serif;
  }

  /* big LE monogram on the right */
  [data-card="logicelecto-hr"] .monogram {
    position: absolute; right: -8cqw; top: 50%;
    transform: translateY(-50%);
    width: 60cqw; height: 60cqw;
    border-radius: 50%;
    border: 0.4cqw solid rgba(232,236,246,0.18);
    display: grid; place-items: center;
  }

  [data-card="logicelecto-hr"] .monogram::before {
    content: ""; position: absolute; inset: 6cqw;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(26,92,224,0.35), rgba(15,24,69,0));
  }

  [data-card="logicelecto-hr"] .monogram .glyph {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 28cqw;
    color: var(--blue);
    line-height: 1;
    letter-spacing: -0.05em;
    transform: translateX(-3cqw);
  }

  [data-card="logicelecto-hr"] .monogram .glyph b { color: var(--paper); }

  [data-card="logicelecto-hr"] .frame {
    position: absolute; inset: 5cqw 6cqw;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 2cqw;
    z-index: 1;
    width: 60%;
  }

  [data-card="logicelecto-hr"] .top {
    font-family: 'Inter', sans-serif;
    font-size: 1.3cqw; letter-spacing: 0.28em; text-transform: uppercase;
    color: rgba(232,236,246,0.6); font-weight: 700;
  }

  [data-card="logicelecto-hr"] .top b { color: var(--cyan); font-weight: 700; }

  [data-card="logicelecto-hr"] .big {
    align-self: center;
    font-weight: 900;
    font-size: 11cqw;
    line-height: 0.92;
    letter-spacing: -0.025em;
    color: var(--paper);
  }

  [data-card="logicelecto-hr"] .big i {
    font-style: normal;
    color: var(--cyan);
  }

  [data-card="logicelecto-hr"] .big small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.22em;
    color: rgba(232,236,246,0.7);
    letter-spacing: 0.04em;
    margin-top: 1.4cqw;
    line-height: 1.35;
  }

  [data-card="logicelecto-hr"] .foot {
    font-family: 'Inter', sans-serif;
    font-size: 1.5cqw; color: var(--cyan); font-weight: 700;
    letter-spacing: 0.04em;
    align-self: end;
  }

  [data-card="logicelecto-hr"] .foot .dom { font-size: 2.2cqw; letter-spacing: -0.005em; }


/* === magisdolls-com === */
[data-card="magisdolls-com"] {
    --ink: #1a1614;
    --paper: #ffffff;
    --rule: rgba(255,255,255,0.55);
    --muted: rgba(255,255,255,0.72);
  }

  [data-card="magisdolls-com"] .card {
    /* Real site: dark photo background overlaid with rgba(0,0,0,0.51) + dotted texture */
    background:
      radial-gradient(50% 70% at 30% 30%, rgba(120,100,90,0.45), transparent 60%),
      radial-gradient(60% 80% at 80% 80%, rgba(60,50,45,0.55), transparent 60%),
      linear-gradient(160deg, #2a2220 0%, #14100e 100%);
    color: var(--paper);
    font-family: 'Cormorant Garamond', serif;
  }

  /* Dotted overlay matching the real site's overlays/dotted.png */
  [data-card="magisdolls-com"] .card::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.18) 0.18cqw, transparent 0.22cqw);
    background-size: 0.9cqw 0.9cqw;
    mix-blend-mode: overlay;
    opacity: 0.85;
    pointer-events: none;
  }

  /* Soft cream-paper border line top + bottom (separators in real layout) */
  [data-card="magisdolls-com"] .rule-top, [data-card="magisdolls-com"] .rule-bot {
    position: absolute; left: 8cqw; right: 8cqw;
    height: 0.1cqw;
    background: var(--rule);
  }

  [data-card="magisdolls-com"] .rule-top { top: 13cqw; }

  [data-card="magisdolls-com"] .rule-bot { bottom: 13cqw; }

  [data-card="magisdolls-com"] .frame {
    position: absolute; inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 4cqw 6cqw;
    z-index: 1;
    text-align: center;
  }

  [data-card="magisdolls-com"] .top {
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.5cqw;
    color: var(--muted);
    letter-spacing: 0.04em;
  }

  [data-card="magisdolls-com"] .top .globe {
    width: 2.2cqw; height: 2.2cqw; border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: inline-grid; place-items: center;
    font-size: 1.2cqw; color: var(--paper);
    border: 0.1cqw solid var(--rule);
  }

  [data-card="magisdolls-com"] .hero {
    align-self: center;
    display: grid;
    gap: 2cqw;
    justify-items: center;
  }

  [data-card="magisdolls-com"] .hero h1 {
    font-family: 'Kalam', cursive;
    font-weight: 700;
    font-size: 13cqw;
    line-height: 0.95;
    color: var(--paper);
    letter-spacing: -0.01em;
    text-shadow: 0 0.4cqw 1.6cqw rgba(0,0,0,0.4);
  }

  [data-card="magisdolls-com"] .hero .tagline {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 2.6cqw;
    color: var(--paper);
    letter-spacing: 0.02em;
    margin-top: -1cqw;
  }

  [data-card="magisdolls-com"] .nav {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0.9cqw 1.4cqw;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.7cqw;
    color: var(--paper);
    margin-top: 0.6cqw;
  }

  [data-card="magisdolls-com"] .nav a {
    padding: 0.4cqw 1.2cqw;
    border: 0.08cqw solid rgba(255,255,255,0.45);
    border-radius: 0.4cqw;
    background: rgba(255,255,255,0.03);
    color: inherit;
  }

  [data-card="magisdolls-com"] .foot {
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.5cqw;
    color: var(--muted);
    letter-spacing: 0.04em;
  }

  [data-card="magisdolls-com"] .foot .dom { color: var(--paper); font-weight: 500; font-style: normal; font-family: 'Kalam', cursive; font-size: 1.9cqw; }


/* === maligrad-hr === */
[data-card="maligrad-hr"] {
    --sky: #5bc0eb;
    --sky-2: #79d2f1;
    --orange: #f39c12;
    --pink: #d81b60;
    --navy: #2c3e50;
    --yellow: #ffe34a;
  }

  [data-card="maligrad-hr"] .card {
    background: linear-gradient(180deg, var(--sky-2), var(--sky));
    color: var(--navy);
    font-family: 'Fredoka', system-ui, sans-serif;
  }

  /* orange top bar */
  [data-card="maligrad-hr"] .topbar {
    position: absolute; left: 0; right: 0; top: 0;
    height: 12%;
    background: var(--orange);
  }

  /* sun */
  [data-card="maligrad-hr"] .sun {
    position: absolute; right: 8cqw; top: 16cqw;
    width: 12cqw; height: 12cqw; border-radius: 50%;
    background: var(--yellow);
    box-shadow: 0 0 0 1.4cqw rgba(255,227,74,0.45);
  }

  /* clouds */
  [data-card="maligrad-hr"] .cloud {
    position: absolute;
    background: white;
    border-radius: 99px;
    box-shadow: 0 0.6cqw 0 rgba(0,0,0,0.06);
  }

  [data-card="maligrad-hr"] .c1 { left: 6cqw;  top: 16cqw; width: 16cqw; height: 5cqw; }

  [data-card="maligrad-hr"] .c1::before, [data-card="maligrad-hr"] .c1::after { content: ""; position: absolute; background: white; border-radius: 50%; }

  [data-card="maligrad-hr"] .c1::before { width: 7cqw; height: 7cqw; top: -3.2cqw; left: 2cqw; }

  [data-card="maligrad-hr"] .c1::after { width: 5cqw; height: 5cqw; top: -2cqw; left: 9cqw; }

  [data-card="maligrad-hr"] .c2 { right: 28cqw; top: 24cqw; width: 12cqw; height: 4cqw; opacity: 0.85; }

  [data-card="maligrad-hr"] .c2::before { content: ""; position: absolute; background: white; border-radius: 50%; width: 5cqw; height: 5cqw; top: -2.3cqw; left: 3cqw; }

  /* grass bottom */
  [data-card="maligrad-hr"] .grass {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 18%;
    background: #6ec06e;
    border-radius: 50% 50% 0 0 / 18% 18% 0 0;
  }

  /* tiny house */
  [data-card="maligrad-hr"] .house {
    position: absolute; left: 8cqw; bottom: 7cqw;
    width: 14cqw; height: 10cqw;
  }

  [data-card="maligrad-hr"] .house .body { position: absolute; left: 2cqw; right: 2cqw; bottom: 0; height: 7cqw; background: white; border: 0.3cqw solid var(--navy); border-radius: 0.6cqw; }

  [data-card="maligrad-hr"] .house .roof { position: absolute; left: 0; right: 0; top: 0; height: 6cqw;
    background: var(--pink); clip-path: polygon(0 100%, 50% 0, 100% 100%); }

  [data-card="maligrad-hr"] .house .door { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 3cqw; height: 4cqw; background: var(--orange); border-radius: 0.4cqw 0.4cqw 0 0; }

  [data-card="maligrad-hr"] .frame {
    position: absolute; inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 3cqw 6cqw 5cqw;
    z-index: 2;
  }

  [data-card="maligrad-hr"] .top {
    color: white;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 2cqw; letter-spacing: 0.06em;
    display: flex; align-items: center; gap: 1.4cqw;
  }

  [data-card="maligrad-hr"] .topdot { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: white; }

  [data-card="maligrad-hr"] .big {
    align-self: center;
    text-align: center;
    margin-top: 8cqw;
  }

  [data-card="maligrad-hr"] .big .h1 {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 5cqw;
    color: var(--navy);
    display: block;
  }

  [data-card="maligrad-hr"] .big .h2 {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 14cqw;
    color: var(--pink);
    line-height: 0.94;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-shadow: 0 0.6cqw 0 rgba(0,0,0,0.08);
  }

  [data-card="maligrad-hr"] .foot {
    text-align: center;
    color: white;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 2cqw; letter-spacing: 0.04em;
    z-index: 3;
  }

  [data-card="maligrad-hr"] .foot .dom { background: white; color: var(--pink); padding: 0.6cqw 2cqw; border-radius: 99px; }


/* === md-dizajn-parketi-hr === */
[data-card="md-dizajn-parketi-hr"] {
    --bone: #f2efe7;
    --cream: #e8e1ce;
    --wood-dark: #1b261e;
    --wood: #836743;
    --amber: #efc16c;
    --green: #4a8b63;
  }

  [data-card="md-dizajn-parketi-hr"] .card {
    background:
      linear-gradient(135deg, var(--bone), var(--cream));
    color: var(--wood-dark);
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  }

  /* parquet pattern overlay (right half) — herringbone in CSS gradients */
  [data-card="md-dizajn-parketi-hr"] .parquet {
    position: absolute; right: 0; top: 0; bottom: 0; width: 42%;
    background:
      linear-gradient(135deg, #b78b51 25%, transparent 25%, transparent 50%, #b78b51 50%, #b78b51 75%, transparent 75%) 0 0 / 5.6cqw 5.6cqw,
      linear-gradient(45deg, #a07641 25%, transparent 25%, transparent 50%, #a07641 50%, #a07641 75%, transparent 75%) 0 0 / 5.6cqw 5.6cqw,
      #8b643b;
    border-left: 0.2cqw solid rgba(27,38,30,0.18);
  }

  [data-card="md-dizajn-parketi-hr"] .parquet::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to left, rgba(27,38,30,0.18), transparent 50%);
  }

  [data-card="md-dizajn-parketi-hr"] .frame {
    position: absolute; left: 5cqw; right: 47%; top: 5cqw; bottom: 5cqw;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 2cqw;
  }

  [data-card="md-dizajn-parketi-hr"] .top {
    display: flex; align-items: center; gap: 1.4cqw;
    font-family: 'Inter', sans-serif;
    font-size: 1.3cqw; letter-spacing: 0.32em; text-transform: uppercase;
    color: rgba(27,38,30,0.55); font-weight: 700;
  }

  [data-card="md-dizajn-parketi-hr"] .crest {
    display: inline-grid; place-items: center;
    width: 4cqw; height: 4cqw;
    background: var(--amber);
    color: var(--wood-dark);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 2cqw;
    border-radius: 0.6cqw;
  }

  [data-card="md-dizajn-parketi-hr"] .big {
    align-self: center;
    font-weight: 500;
    font-size: 9cqw;
    line-height: 0.94;
    letter-spacing: -0.015em;
    color: var(--wood-dark);
  }

  [data-card="md-dizajn-parketi-hr"] .big i {
    font-style: italic;
    color: var(--green);
  }

  [data-card="md-dizajn-parketi-hr"] .big small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 0.16em;
    color: rgba(27,38,30,0.65);
    letter-spacing: 0.04em;
    margin-top: 2cqw;
  }

  [data-card="md-dizajn-parketi-hr"] .foot {
    font-family: 'Inter', sans-serif;
    font-size: 1.5cqw;
    color: rgba(27,38,30,0.65);
    display: flex; justify-content: space-between; align-items: end;
  }

  [data-card="md-dizajn-parketi-hr"] .foot .dom { color: var(--amber); font-weight: 700; font-size: 2cqw; letter-spacing: -0.005em; }


/* === metalvar-hr === */
[data-card="metalvar-hr"] {
    --black: #0b0b0c;
    --red: #ed1c24;
    --steel: #888888;
    --paper: #efece6;
  }

  [data-card="metalvar-hr"] .card {
    background: radial-gradient(80% 90% at 30% 100%, #2c1212, var(--black) 70%);
    color: var(--paper);
    font-family: 'Rajdhani', system-ui, sans-serif;
  }

  /* sparks — small radiating dots */
  [data-card="metalvar-hr"] .sparks {
    position: absolute; inset: 0;
    background-image:
      radial-gradient(circle at 22% 28%, rgba(245,193,108,0.9) 0.18cqw, transparent 0.2cqw),
      radial-gradient(circle at 70% 18%, rgba(245,193,108,0.65) 0.12cqw, transparent 0.16cqw),
      radial-gradient(circle at 84% 62%, rgba(245,193,108,0.5) 0.14cqw, transparent 0.18cqw),
      radial-gradient(circle at 12% 78%, rgba(245,193,108,0.7) 0.18cqw, transparent 0.2cqw),
      radial-gradient(circle at 92% 12%, rgba(245,193,108,0.55) 0.1cqw, transparent 0.14cqw),
      radial-gradient(circle at 60% 88%, rgba(245,193,108,0.65) 0.16cqw, transparent 0.2cqw),
      radial-gradient(circle at 35% 60%, rgba(245,193,108,0.4) 0.1cqw, transparent 0.14cqw);
    pointer-events: none;
  }

  /* diagonal red slash mark behind type */
  [data-card="metalvar-hr"] .slash {
    position: absolute; left: 4cqw; top: 8cqw;
    width: 90cqw; height: 0.5cqw;
    background: var(--red);
    transform: rotate(-14deg) translateY(38cqw);
    transform-origin: left center;
    box-shadow: 0 0 6cqw rgba(237,28,36,0.45);
  }

  [data-card="metalvar-hr"] .frame {
    position: absolute; inset: 5cqw 6cqw;
    display: grid;
    grid-template-rows: auto 1fr auto;
    z-index: 1;
  }

  [data-card="metalvar-hr"] .top {
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.3cqw; letter-spacing: 0.32em; text-transform: uppercase;
    color: rgba(239,236,230,0.6); font-weight: 700;
  }

  [data-card="metalvar-hr"] .iso {
    border: 0.16cqw solid var(--red);
    color: var(--paper);
    padding: 0.6cqw 1.4cqw;
    font-weight: 700; letter-spacing: 0.24em;
  }

  [data-card="metalvar-hr"] .big {
    align-self: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 19cqw; line-height: 0.88;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--paper);
  }

  [data-card="metalvar-hr"] .big i { color: var(--red); font-style: normal; }

  [data-card="metalvar-hr"] .big small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.1em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(239,236,230,0.55);
    margin-top: 1.4cqw;
  }

  [data-card="metalvar-hr"] .foot {
    display: flex; justify-content: space-between; align-items: end;
    font-family: 'Inter', sans-serif;
    font-size: 1.4cqw; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(239,236,230,0.55); font-weight: 700;
  }

  [data-card="metalvar-hr"] .foot .dom { color: var(--red); font-size: 2cqw; letter-spacing: 0.04em; text-transform: lowercase; }


/* === ovdjes-am === */
[data-card="ovdjes-am"] {
    --navy: #0e1620;
    --navy-2: #182230;
    --orange: #ff9c00;
    --teal: #0daeb9;
    --paper: #f6f7f9;
  }

  [data-card="ovdjes-am"] .card {
    background:
      radial-gradient(70% 80% at 110% 110%, rgba(255,156,0,0.16), transparent 60%),
      radial-gradient(60% 60% at 0% 0%, rgba(13,174,185,0.18), transparent 60%),
      linear-gradient(180deg, var(--navy), var(--navy-2));
    color: var(--paper);
    font-family: 'Space Grotesk', system-ui, sans-serif;
  }

  /* nfc medallion */
  [data-card="ovdjes-am"] .tag {
    position: absolute;
    right: 6cqw; top: 50%; transform: translateY(-50%);
    width: 42cqw; height: 42cqw; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffc463, var(--orange) 55%, #d97a00 90%);
    box-shadow:
      inset 0 -2cqw 4cqw rgba(0,0,0,0.25),
      0 4cqw 8cqw rgba(0,0,0,0.35);
  }

  [data-card="ovdjes-am"] .tag::before {
    content: ""; position: absolute; inset: 6cqw;
    border-radius: 50%;
    background: white;
    box-shadow: inset 0 0 0 0.6cqw var(--orange);
  }

  [data-card="ovdjes-am"] .tag::after {
    content: "S";
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: var(--orange);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 22cqw;
    line-height: 1;
  }

  [data-card="ovdjes-am"] .tag .nfc {
    position: absolute; left: 50%; bottom: 4cqw; transform: translateX(-50%);
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 2cqw; letter-spacing: 0.24em;
    z-index: 1;
  }

  [data-card="ovdjes-am"] .tag .hole {
    position: absolute; left: 50%; top: 2cqw; transform: translateX(-50%);
    width: 2.4cqw; height: 2.4cqw; border-radius: 50%;
    background: var(--navy);
    z-index: 2;
  }

  [data-card="ovdjes-am"] .frame {
    position: absolute; left: 5cqw; right: 50%; top: 5cqw; bottom: 5cqw;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 2cqw;
    z-index: 1;
  }

  [data-card="ovdjes-am"] .top {
    font-family: 'Inter', sans-serif;
    font-size: 1.3cqw; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--teal); font-weight: 700;
  }

  [data-card="ovdjes-am"] .big {
    align-self: center;
    font-weight: 700;
    font-size: 10cqw;
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--paper);
  }

  [data-card="ovdjes-am"] .big i { font-style: normal; color: var(--orange); }

  [data-card="ovdjes-am"] .big small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.18em;
    color: rgba(246,247,249,0.65);
    letter-spacing: 0.02em;
    margin-top: 1.6cqw;
  }

  [data-card="ovdjes-am"] .foot {
    font-family: 'Inter', sans-serif;
    font-size: 1.5cqw; color: rgba(246,247,249,0.55); font-weight: 600;
  }

  [data-card="ovdjes-am"] .foot .dom { color: var(--orange); font-weight: 700; font-size: 2cqw; letter-spacing: -0.005em; }


/* === pikolo-bezpardona-hr === */
[data-card="pikolo-bezpardona-hr"] {
    --cream: #f7f5f0;
    --frame-red: #c42021;
    --orange: #d94e36;
    --ink: #221e1f;
    --glass: rgba(247, 245, 240, 0.92);
    --rule: rgba(34,30,31,0.10);
  }

  [data-card="pikolo-bezpardona-hr"] .card {
    background: var(--cream);
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
    /* The signature red frame from the real site */
    box-shadow: inset 0 0 0 1.4cqw var(--frame-red);
  }

  /* Faded map background (real site uses Google Maps satellite at 22% opacity) */
  [data-card="pikolo-bezpardona-hr"] .map {
    position: absolute; inset: 1.4cqw;
    background:
      radial-gradient(60% 60% at 35% 60%, rgba(217,78,54,0.10), transparent 65%),
      conic-gradient(from 25deg at 38% 55%,
        rgba(34,30,31,0.08) 0deg,
        rgba(34,30,31,0.02) 60deg,
        rgba(34,30,31,0.10) 120deg,
        rgba(34,30,31,0.02) 200deg,
        rgba(34,30,31,0.08) 360deg),
      linear-gradient(180deg, #e8e3d8, #f7f5f0);
    opacity: 0.85;
  }

  [data-card="pikolo-bezpardona-hr"] .map::before, [data-card="pikolo-bezpardona-hr"] .map::after {
    content: "";
    position: absolute;
    background: rgba(34,30,31,0.18);
  }

  /* Two intersecting "streets" suggesting Britanski trg */
  [data-card="pikolo-bezpardona-hr"] .map::before {
    left: 18%; right: 8%; top: 56%; height: 1.6cqw;
    transform: rotate(-6deg);
    box-shadow: 0 2.6cqw 0 rgba(34,30,31,0.12);
  }

  [data-card="pikolo-bezpardona-hr"] .map::after {
    left: 38%; top: 12%; bottom: 12%; width: 1.6cqw;
    transform: rotate(8deg);
  }

  [data-card="pikolo-bezpardona-hr"] .pin {
    position: absolute; left: 38%; top: 58%;
    width: 3cqw; height: 3cqw;
    background: var(--frame-red);
    border-radius: 50% 50% 50% 0;
    transform: translate(-50%, -100%) rotate(-45deg);
    box-shadow: 0 0.6cqw 1.4cqw rgba(196,32,33,0.35);
  }

  [data-card="pikolo-bezpardona-hr"] .pin::after {
    content: ""; position: absolute; inset: 30%;
    background: var(--cream); border-radius: 50%;
  }

  /* Top nav row */
  [data-card="pikolo-bezpardona-hr"] .topnav {
    position: absolute; left: 4cqw; right: 4cqw; top: 3.2cqw;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 3;
  }

  [data-card="pikolo-bezpardona-hr"] .logo {
    display: inline-flex; align-items: center; gap: 1cqw;
    padding: 0.8cqw 1.4cqw;
    background: var(--glass);
    border-radius: 0.6cqw;
    box-shadow: 0 0.8cqw 2cqw rgba(0,0,0,0.08);
  }

  [data-card="pikolo-bezpardona-hr"] .logo .badge {
    width: 2.4cqw; height: 2.4cqw; border-radius: 50%;
    background: var(--frame-red); color: var(--cream);
    display: inline-grid; place-items: center;
    font-family: 'Frank Ruhl Libre', serif; font-weight: 900;
    font-size: 1.5cqw;
  }

  [data-card="pikolo-bezpardona-hr"] .logo .word {
    font-family: 'Frank Ruhl Libre', serif; font-weight: 700;
    font-size: 1.8cqw; color: var(--frame-red);
    text-transform: uppercase; letter-spacing: 0.14em;
  }

  [data-card="pikolo-bezpardona-hr"] .chips {
    display: inline-flex; gap: 0.6cqw;
    padding: 0.6cqw 0.9cqw;
    background: var(--glass);
    border-radius: 1cqw;
    box-shadow: 0 0.8cqw 2cqw rgba(0,0,0,0.08);
  }

  [data-card="pikolo-bezpardona-hr"] .chip {
    width: 2.6cqw; height: 2.6cqw; border-radius: 0.7cqw;
    background: rgba(255,255,255,0.55);
    border: 0.1cqw solid rgba(0,0,0,0.12);
    display: inline-grid; place-items: center;
    color: var(--ink); font-size: 1.1cqw; font-weight: 700;
    letter-spacing: 0.05em;
  }

  /* Hero glass card */
  [data-card="pikolo-bezpardona-hr"] .hero {
    position: absolute;
    left: 5cqw; top: 14cqw; width: 56%;
    background: var(--glass);
    border-radius: 0.8cqw;
    box-shadow: 0 1.2cqw 2.6cqw rgba(0,0,0,0.10);
    padding: 3cqw 3.4cqw;
    z-index: 2;
    backdrop-filter: blur(4px);
  }

  [data-card="pikolo-bezpardona-hr"] .hero h1 {
    font-family: 'Frank Ruhl Libre', serif;
    font-weight: 700;
    font-size: 7.6cqw;
    line-height: 1.0;
    letter-spacing: -0.015em;
    color: var(--ink);
  }

  [data-card="pikolo-bezpardona-hr"] .hero h1 span {
    display: block; color: var(--frame-red);
  }

  [data-card="pikolo-bezpardona-hr"] .hero p {
    font-size: 1.5cqw;
    line-height: 1.55;
    color: rgba(34,30,31,0.85);
    margin-top: 1.6cqw;
    max-width: 44ch;
  }

  [data-card="pikolo-bezpardona-hr"] .hero .status {
    margin-top: 1.6cqw;
    display: inline-flex; align-items: center; gap: 0.8cqw;
    font-family: 'Frank Ruhl Libre', serif;
    font-style: italic;
    color: var(--frame-red);
    font-size: 1.4cqw;
  }

  [data-card="pikolo-bezpardona-hr"] .pill {
    display: inline-flex; align-items: center; gap: 0.5cqw;
    padding: 0.35cqw 0.9cqw;
    border-radius: 999px;
    background: rgba(196,32,33,0.10);
    border: 0.1cqw solid rgba(196,32,33,0.35);
    color: var(--frame-red);
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: 0.95cqw;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
  }

  [data-card="pikolo-bezpardona-hr"] .pill::before {
    content: ""; width: 0.55cqw; height: 0.55cqw; border-radius: 50%;
    background: #2d9c4a; box-shadow: 0 0 0 0.22cqw rgba(45,156,74,0.25);
  }

  /* Foot */
  [data-card="pikolo-bezpardona-hr"] .foot {
    position: absolute; left: 4cqw; right: 4cqw; bottom: 3.2cqw;
    display: flex; justify-content: space-between; align-items: end;
    font-size: 1.15cqw; letter-spacing: 0.22em; text-transform: uppercase;
    font-weight: 700; color: rgba(34,30,31,0.6);
    z-index: 2;
  }

  [data-card="pikolo-bezpardona-hr"] .foot .dom { color: var(--frame-red); font-weight: 800; }


/* === sfss-app === */
[data-card="sfss-app"] {
    --sfss-bg: oklch(0.93 0.01 252);
    --sfss-paper: oklch(0.98 0.006 252);
    --sfss-paper-2: oklch(0.95 0.01 252);
    --sfss-main: oklch(0.31 0.03 255);
    --sfss-meta: oklch(0.53 0.03 255);
    --sfss-ink: oklch(0.21 0.02 255);
    --sfss-accent: oklch(0.58 0.22 262);
    --sfss-border: oklch(0.69 0.02 255 / 0.5);
    --sfss-scene-1: oklch(0.77 0.13 209);
    --sfss-scene-2: oklch(0.73 0.13 161);
    --sfss-scene-3: oklch(0.74 0.14 84);
    --sfss-scene-4: oklch(0.69 0.17 24);
  }

  [data-card="sfss-app"] .card {
    background:
      radial-gradient(68% 92% at 100% 0%, oklch(0.87 0.07 255 / 0.65), transparent 60%),
      radial-gradient(60% 84% at -8% 110%, oklch(0.83 0.08 160 / 0.34), transparent 66%),
      linear-gradient(160deg, oklch(0.95 0.01 252), var(--sfss-bg) 57%, oklch(0.9 0.012 252));
    color: var(--sfss-main);
    font-family: 'Inter', system-ui, sans-serif;
  }

  [data-card="sfss-app"] .card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, transparent 0 86%, oklch(0.75 0.08 262 / 0.25) 90% 91%, transparent 95%),
      repeating-linear-gradient(
        180deg,
        transparent 0 5.5cqw,
        oklch(0.84 0.01 255 / 0.4) 5.5cqw 5.62cqw
      );
    opacity: 0.42;
    pointer-events: none;
  }

  [data-card="sfss-app"] .frame {
    position: absolute;
    inset: 4.4cqw 4.9cqw;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1.9cqw;
  }

  [data-card="sfss-app"] .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.8cqw;
  }

  [data-card="sfss-app"] .brand {
    display: inline-flex;
    align-items: center;
    gap: 1.2cqw;
    min-width: 0;
  }

  [data-card="sfss-app"] .brand img {
    width: 4cqw;
    height: 4cqw;
    border-radius: 0.9cqw;
    border: 0.12cqw solid oklch(0.75 0.08 262 / 0.45);
    box-shadow: 0 0.8cqw 1.6cqw -1cqw oklch(0.46 0.2 262 / 0.65);
  }

  [data-card="sfss-app"] .word {
    font-weight: 900;
    font-size: 2cqw;
    letter-spacing: 0.03em;
    color: var(--sfss-ink);
    text-transform: uppercase;
    white-space: nowrap;
  }

  [data-card="sfss-app"] .live {
    display: inline-flex;
    align-items: center;
    gap: 0.8cqw;
    border: 0.12cqw solid oklch(0.68 0.08 262 / 0.5);
    background: oklch(0.97 0.01 252 / 0.82);
    color: var(--sfss-accent);
    padding: 0.85cqw 1.35cqw;
    border-radius: 99px;
    font-size: 1.07cqw;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  [data-card="sfss-app"] .live::before {
    content: "";
    width: 0.78cqw;
    height: 0.78cqw;
    border-radius: 50%;
    background: var(--sfss-accent);
  }

  [data-card="sfss-app"] .workspace {
    position: relative;
    border: 0.12cqw solid var(--sfss-border);
    border-radius: 1.45cqw;
    background: linear-gradient(172deg, var(--sfss-paper), var(--sfss-paper-2));
    box-shadow: 0 2.3cqw 3.4cqw -2.5cqw oklch(0.26 0.02 255 / 0.55);
    padding: 1.7cqw;
    display: grid;
    grid-template-columns: 1.22fr 0.78fr;
    gap: 1.5cqw;
    overflow: hidden;
  }

  [data-card="sfss-app"] .left {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    min-width: 0;
    gap: 1cqw;
  }

  [data-card="sfss-app"] .label {
    color: var(--sfss-meta);
    font-size: 0.95cqw;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  [data-card="sfss-app"] .headline {
    color: var(--sfss-ink);
    font-weight: 800;
    font-size: 3.32cqw;
    line-height: 1.02;
    letter-spacing: -0.045em;
  }

  [data-card="sfss-app"] .headline i {
    font-style: normal;
    color: var(--sfss-accent);
  }

  [data-card="sfss-app"] .lede {
    color: var(--sfss-meta);
    font-size: 1.2cqw;
    line-height: 1.36;
    font-weight: 600;
  }

  [data-card="sfss-app"] .cmd {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.8cqw;
    color: oklch(0.89 0.03 255);
    background: oklch(0.22 0.02 255);
    border-radius: 0.82cqw;
    border: 0.1cqw solid oklch(0.58 0.14 262 / 0.45);
    padding: 0.85cqw 1.1cqw;
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 1.04cqw;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  [data-card="sfss-app"] .cmd::before {
    content: ">";
    color: oklch(0.68 0.16 262);
    font-weight: 700;
  }

  [data-card="sfss-app"] .right {
    position: relative;
    border-radius: 0.9cqw;
    border: 0.1cqw solid oklch(0.77 0.02 252 / 0.8);
    background: oklch(0.97 0.006 252 / 0.8);
    padding: 0.95cqw;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0.75cqw;
  }

  [data-card="sfss-app"] .scenes {
    font-size: 0.88cqw;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--sfss-meta);
  }

  [data-card="sfss-app"] .rows {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 0.56cqw;
  }

  [data-card="sfss-app"] .row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5cqw;
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 0.86cqw;
    color: var(--sfss-main);
  }

  [data-card="sfss-app"] .dot {
    width: 0.6cqw;
    height: 0.6cqw;
    border-radius: 50%;
  }

  [data-card="sfss-app"] .row code {
    font-family: inherit;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  [data-card="sfss-app"] .row b {
    font-weight: 700;
    color: var(--sfss-meta);
  }

  [data-card="sfss-app"] .row:nth-child(1) .dot { background: var(--sfss-scene-1); }

  [data-card="sfss-app"] .row:nth-child(2) .dot { background: var(--sfss-scene-2); }

  [data-card="sfss-app"] .row:nth-child(3) .dot { background: var(--sfss-scene-3); }

  [data-card="sfss-app"] .row:nth-child(4) .dot { background: var(--sfss-scene-4); }

  [data-card="sfss-app"] .autosave {
    font-size: 0.86cqw;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sfss-accent);
    font-weight: 800;
  }

  [data-card="sfss-app"] .foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.3cqw;
    font-size: 1.08cqw;
    min-width: 0;
  }

  [data-card="sfss-app"] .meta {
    color: var(--sfss-meta);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  [data-card="sfss-app"] .dom {
    color: var(--sfss-accent);
    font-weight: 800;
    font-size: 1.85cqw;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }


/* === signbili-hr === */
[data-card="signbili-hr"] {
    --cobalt: #0a2a44;
    --cobalt-2: #143655;
    --road: #2c3a48;
    --yellow: #ffd400;
    --red: #e53935;
    --paper: #f4f4ee;
  }

  [data-card="signbili-hr"] .card {
    background: linear-gradient(180deg, var(--cobalt-2), var(--cobalt));
    color: var(--paper);
    font-family: 'Inter', system-ui, sans-serif;
  }

  /* asphalt strip with crosswalk dashes */
  [data-card="signbili-hr"] .road {
    position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
    background: linear-gradient(180deg, #1f2b38, var(--road));
    box-shadow: 0 -0.5cqw 1cqw rgba(0,0,0,0.4);
  }

  [data-card="signbili-hr"] .road::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: 2.4cqw; transform: translateY(-50%);
    background-image: repeating-linear-gradient(
      to right,
      white 0, white 5cqw, transparent 5cqw, transparent 9cqw
    );
    opacity: 0.92;
  }

  /* yellow caution stripe upper-right */
  [data-card="signbili-hr"] .caution {
    position: absolute; right: 0; top: 0;
    width: 22cqw; height: 22cqw;
    background-image: repeating-linear-gradient(
      45deg, var(--yellow) 0 2cqw, var(--cobalt) 2cqw 4cqw
    );
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    opacity: 0.95;
  }

  [data-card="signbili-hr"] .frame {
    position: absolute; inset: 5cqw 6cqw;
    display: grid;
    grid-template-rows: auto 1fr auto;
    z-index: 2;
  }

  [data-card="signbili-hr"] .top {
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.3cqw; letter-spacing: 0.24em; text-transform: uppercase;
    color: rgba(244,244,238,0.6); font-weight: 500;
  }

  [data-card="signbili-hr"] .top .dot { color: var(--red); }

  [data-card="signbili-hr"] .big {
    align-self: center;
    font-weight: 900;
    font-size: 22cqw; line-height: 0.88;
    letter-spacing: -0.04em;
    color: var(--paper);
    text-transform: uppercase;
  }

  [data-card="signbili-hr"] .big sign { color: var(--red); }

  [data-card="signbili-hr"] .big bili { position: relative; color: var(--paper); }

  [data-card="signbili-hr"] .big bili::after {
    content: "";
    position: absolute; right: -3cqw; top: 0.5cqw;
    width: 1.8cqw; height: 1.8cqw; border-radius: 50%;
    background: var(--yellow);
    box-shadow: 0 0 0 0.6cqw rgba(255,212,0,0.28);
  }

  [data-card="signbili-hr"] .big small {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 0.08em;
    letter-spacing: 0.32em;
    color: rgba(244,244,238,0.65);
    margin-top: 1.6cqw;
    text-transform: uppercase;
  }

  [data-card="signbili-hr"] .foot {
    display: flex; justify-content: space-between; align-items: end;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.4cqw; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(244,244,238,0.7);
  }

  [data-card="signbili-hr"] .foot .dom { color: white; font-size: 1.8cqw; letter-spacing: 0.04em; text-transform: lowercase; font-weight: 700; }


/* === xn-kafi-ota-hr === */
[data-card="xn-kafi-ota-hr"] {
    --bg: #fbf7f2;
    --bg-2: #f3ece2;
    --paper: #ffffff;
    --ink: #1a1410;
    --orange: #ff6a1a;
    --teal: #0fa89a;
    --muted: rgba(26,20,16,0.55);
    --rule: rgba(26,20,16,0.10);
  }

  [data-card="xn-kafi-ota-hr"] .card {
    background:
      radial-gradient(70% 90% at 100% 100%, rgba(255,106,26,0.10), transparent 55%),
      radial-gradient(60% 80% at 0% 0%, rgba(15,168,154,0.07), transparent 60%),
      linear-gradient(160deg, var(--bg), var(--bg-2));
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
  }

  /* Mock app panel on the right */
  [data-card="xn-kafi-ota-hr"] .app {
    position: absolute; right: 6cqw; top: 8cqw; bottom: 8cqw;
    width: 36cqw;
    background: var(--paper);
    border: 0.14cqw solid var(--rule);
    border-radius: 2.6cqw;
    box-shadow: 0 1.4cqw 3cqw -1.6cqw rgba(26,20,16,0.18),
                0 0.4cqw 0.8cqw -0.6cqw rgba(26,20,16,0.08);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  [data-card="xn-kafi-ota-hr"] .app .bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.6cqw 2cqw;
    border-bottom: 0.1cqw solid var(--rule);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1cqw; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--muted);
  }

  [data-card="xn-kafi-ota-hr"] .app .bar .live { color: var(--teal); display: inline-flex; align-items: center; gap: 0.6cqw; font-weight: 600; }

  [data-card="xn-kafi-ota-hr"] .app .bar .live::before {
    content: ""; width: 0.7cqw; height: 0.7cqw; border-radius: 50%;
    background: var(--teal); box-shadow: 0 0 0 0.3cqw rgba(15,168,154,0.22);
  }

  [data-card="xn-kafi-ota-hr"] .app .rows {
    padding: 1.4cqw 2cqw;
    display: grid; gap: 1cqw;
    align-content: start;
  }

  [data-card="xn-kafi-ota-hr"] .row {
    display: grid;
    grid-template-columns: 1.6cqw 1fr auto;
    gap: 1.2cqw;
    align-items: center;
    padding: 1cqw 1.2cqw;
    background: #faf6f0;
    border: 0.08cqw solid var(--rule);
    border-radius: 1cqw;
    font-size: 1.3cqw;
    color: var(--ink);
  }

  [data-card="xn-kafi-ota-hr"] .row .dot { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--orange); }

  [data-card="xn-kafi-ota-hr"] .row.done { background: rgba(15,168,154,0.08); border-color: rgba(15,168,154,0.25); }

  [data-card="xn-kafi-ota-hr"] .row.done .dot { background: var(--teal); }

  [data-card="xn-kafi-ota-hr"] .row .lbl { font-weight: 600; letter-spacing: -0.01em; }

  [data-card="xn-kafi-ota-hr"] .row .qty {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1cqw; color: var(--muted);
  }

  [data-card="xn-kafi-ota-hr"] .app .footbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.4cqw 2cqw;
    border-top: 0.1cqw solid var(--rule);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1cqw; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--muted);
  }

  [data-card="xn-kafi-ota-hr"] .app .footbar b { color: var(--ink); font-weight: 700; letter-spacing: 0.22em; }

  /* Left column */
  [data-card="xn-kafi-ota-hr"] .frame {
    position: absolute; left: 6cqw; top: 6cqw; bottom: 6cqw;
    right: 46cqw;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 2cqw;
    z-index: 1;
  }

  [data-card="xn-kafi-ota-hr"] .top {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.2cqw; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--muted); font-weight: 500;
  }

  [data-card="xn-kafi-ota-hr"] .brand {
    align-self: center;
    display: grid;
    gap: 1.4cqw;
    justify-items: start;
  }

  [data-card="xn-kafi-ota-hr"] .brand img {
    width: 100%;
    max-width: 32cqw;
    height: auto;
    display: block;
    filter: drop-shadow(0 0.4cqw 1cqw rgba(26,20,16,0.10));
  }

  [data-card="xn-kafi-ota-hr"] .brand .tag {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.7cqw;
    line-height: 1.35;
    color: var(--muted);
    max-width: 24ch;
    margin-top: 0.4cqw;
  }

  [data-card="xn-kafi-ota-hr"] .brand .tag b { color: var(--ink); font-weight: 700; }

  [data-card="xn-kafi-ota-hr"] .foot {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.2cqw; color: var(--muted);
    font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase;
    display: flex; justify-content: space-between; align-items: end;
  }

  [data-card="xn-kafi-ota-hr"] .foot .dom { color: var(--ink); font-weight: 700; font-size: 1.7cqw; letter-spacing: 0.04em; text-transform: none; }


/* === xn-knjigenaihulica-d7c-hr === */
[data-card="xn-knjigenaihulica-d7c-hr"] {
    --sand: #d0ba8e;
    --sand-deep: #caae73;
    --teal: #569aa7;
    --ink: #1b1f20;
    --paper: #ffffff;
    --paper-2: #f6efde;
  }

  [data-card="xn-knjigenaihulica-d7c-hr"] .card {
    background:
      linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
  }

  /* Painted wall — sandy plaster with the "Knjige naših ulica" title hand-lettered, as on the real building */
  [data-card="xn-knjigenaihulica-d7c-hr"] .wall {
    position: absolute; left: 0; right: 0; top: 0; height: 62%;
    background:
      radial-gradient(40% 60% at 30% 50%, rgba(255,255,255,0.18), transparent 60%),
      radial-gradient(50% 60% at 80% 60%, rgba(0,0,0,0.10), transparent 65%),
      linear-gradient(180deg, #d8c193 0%, var(--sand) 60%, #b89a64 100%);
    overflow: hidden;
  }

  /* plaster speckle */
  [data-card="xn-knjigenaihulica-d7c-hr"] .wall::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      radial-gradient(rgba(0,0,0,0.07) 0.15cqw, transparent 0.18cqw),
      radial-gradient(rgba(255,255,255,0.10) 0.12cqw, transparent 0.16cqw);
    background-size: 0.8cqw 0.8cqw, 0.5cqw 0.5cqw;
    background-position: 0 0, 0.4cqw 0.4cqw;
    mix-blend-mode: overlay;
    opacity: 0.7;
  }

  /* faint horizontal wall seam */
  [data-card="xn-knjigenaihulica-d7c-hr"] .wall::after {
    content: "";
    position: absolute; left: 0; right: 0; top: 78%;
    height: 0.3cqw;
    background: rgba(0,0,0,0.10);
    box-shadow: 0 -8cqw 0 -7.7cqw rgba(0,0,0,0.06);
  }

  /* Teal overlay strip (matches the site's #569AA7 accent) */
  [data-card="xn-knjigenaihulica-d7c-hr"] .strip {
    position: absolute; left: 0; right: 0; top: 62%;
    height: 4cqw;
    background: var(--teal);
    display: flex; align-items: center;
    padding: 0 6cqw;
    font-family: 'Inter', sans-serif;
    font-size: 1.1cqw; letter-spacing: 0.32em; text-transform: uppercase;
    font-weight: 700; color: var(--paper);
    z-index: 2;
  }

  [data-card="xn-knjigenaihulica-d7c-hr"] .strip span { opacity: 0.95; }

  [data-card="xn-knjigenaihulica-d7c-hr"] .strip .sep { margin: 0 1.2cqw; opacity: 0.55; }

  /* Title painted on the wall */
  [data-card="xn-knjigenaihulica-d7c-hr"] .painted {
    position: absolute; left: 6cqw; right: 6cqw; top: 14cqw;
    z-index: 1;
    color: var(--ink);
    text-align: left;
  }

  [data-card="xn-knjigenaihulica-d7c-hr"] .painted .eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 1.1cqw; letter-spacing: 0.32em; text-transform: uppercase;
    font-weight: 700; color: rgba(27,31,32,0.7);
    margin-bottom: 1.4cqw;
  }

  [data-card="xn-knjigenaihulica-d7c-hr"] .painted h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 10.6cqw;
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-shadow:
      0 0.2cqw 0 rgba(255,255,255,0.25),
      0 -0.15cqw 0 rgba(0,0,0,0.10);
  }

  [data-card="xn-knjigenaihulica-d7c-hr"] .painted h1 i {
    font-style: italic;
    font-weight: 500;
    color: #7a1e1e;
  }

  /* Lower content area on cream */
  [data-card="xn-knjigenaihulica-d7c-hr"] .below {
    position: absolute; left: 0; right: 0; top: calc(62% + 4cqw); bottom: 0;
    padding: 3cqw 6cqw;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3cqw;
    align-items: center;
  }

  [data-card="xn-knjigenaihulica-d7c-hr"] .lead {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 2.2cqw;
    line-height: 1.3;
    color: var(--ink);
    max-width: 36ch;
  }

  [data-card="xn-knjigenaihulica-d7c-hr"] .meta {
    display: grid; gap: 1.4cqw;
    justify-items: end; text-align: right;
  }

  [data-card="xn-knjigenaihulica-d7c-hr"] .meta .partner {
    font-family: 'Inter', sans-serif;
    font-size: 1.1cqw; letter-spacing: 0.18em; text-transform: uppercase;
    font-weight: 700; color: rgba(27,31,32,0.65);
  }

  [data-card="xn-knjigenaihulica-d7c-hr"] .meta .partner b { color: var(--ink); display: block; font-weight: 800; font-size: 1.4cqw; letter-spacing: 0.04em; margin-top: 0.3cqw; }

  [data-card="xn-knjigenaihulica-d7c-hr"] .meta .dom {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 2.2cqw;
    color: #7a1e1e;
    letter-spacing: -0.01em;
  }