/* ============================================================
   DayProp v2 — dizajn sistem
   Tamna tema (industrijski standard za prop/trading sajtove),
   brend: violet (#9B7BF3 iz loga), novac/profit: zelena (semantika).
   ============================================================ */

:root {
  --bg: #0e0d14;
  --bg-raise: #14121d;
  --card: #181624;
  --card-2: #1e1b2c;
  --ink: #edeaf6;
  --muted: #a29bb8;
  --faint: #6f6885;
  --brand: #9b7bf3;
  --brand-strong: #b096ff;
  --brand-soft: rgba(155, 123, 243, 0.14);
  --money: #3ddc97;
  --money-soft: rgba(61, 220, 151, 0.12);
  --warn: #e0a04a;
  --line: rgba(162, 155, 184, 0.16);
  --line-strong: rgba(162, 155, 184, 0.3);
  --radius: 12px;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --maxw: 1100px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--brand-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; margin: 0 auto; }

h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0 0 14px; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 5.4vw, 3.3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; }
h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 14px; }
.muted { color: var(--muted); }
.small { font-size: 0.86rem; }
.money { color: var(--money); }
.num { font-variant-numeric: tabular-nums; }

.eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-strong);
  background: var(--brand-soft); padding: 5px 12px; border-radius: 999px; margin-bottom: 18px;
}

section { padding: 72px 0; }
section.tight { padding: 48px 0; }
.section-head { max-width: 640px; margin-bottom: 40px; }
.section-head p { color: var(--muted); font-size: 1.05rem; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(14, 13, 20, 0.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .bar { display: flex; align-items: center; gap: 28px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.logo img { height: 34px; width: auto; }
.logo:hover { text-decoration: none; }
.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav a { color: var(--muted); font-size: 0.92rem; font-weight: 600; }
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav .btn { color: #0e0d14; }
.burger { display: none; margin-left: auto; background: none; border: 1px solid var(--line-strong); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 1rem; cursor: pointer; }
@media (max-width: 880px) {
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--bg-raise); border-bottom: 1px solid var(--line); padding: 14px 20px 20px; gap: 14px; }
  .nav.open { display: flex; }
  .burger { display: block; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-weight: 800; font-size: 0.95rem;
  padding: 13px 26px; border-radius: 10px; border: none; cursor: pointer;
  background: var(--brand); color: #0e0d14; transition: background 0.15s ease;
}
.btn:hover { background: var(--brand-strong); text-decoration: none; }
.btn.big { font-size: 1.05rem; padding: 16px 34px; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.btn.ghost:hover { background: var(--card); border-color: var(--faint); }

/* ---------- hero ---------- */
.hero { padding: 84px 0 64px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; top: -220px; right: -160px; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(155, 123, 243, 0.16) 0%, transparent 65%);
  pointer-events: none;
}
.hero .grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
@media (max-width: 880px) { .hero .grid { grid-template-columns: 1fr; } }
.hero h1 em { font-style: normal; color: var(--brand-strong); }
.hero .sub { font-size: 1.14rem; color: var(--muted); max-width: 540px; margin-bottom: 28px; }
.hero .sub b { color: var(--ink); }
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.proof-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.proof-strip span {
  font-size: 0.82rem; font-weight: 700; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
}
.proof-strip b { color: var(--money); }

/* hero — kladionički tiket */
.ticket {
  --paper: #f6f2e7;
  --paper-ink: #1c1812;
  --paper-faint: #8a8271;
  --paper-line: #d9d2c0;
  background: var(--paper); color: var(--paper-ink);
  border-radius: 6px; padding: 22px 26px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(255,255,255,0.06) inset;
  position: relative; transform: rotate(1.2deg);
  font-family: var(--mono);
}
.ticket::before, .ticket::after {
  content: ""; position: absolute; left: 0; right: 0; height: 12px;
  background-image: radial-gradient(circle at 8px 0, transparent 5px, var(--paper) 5.5px);
  background-size: 16px 12px; background-repeat: repeat-x;
}
.ticket::before { top: -11px; }
.ticket::after { bottom: -11px; transform: scaleY(-1); }
.ticket .t-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid var(--paper-ink); padding-bottom: 10px; margin-bottom: 4px;
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.ticket .t-head .no { color: var(--paper-faint); }
.ticket .row { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-bottom: 1px dashed var(--paper-line); }
.ticket .lbl { color: var(--paper-faint); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ticket .val { font-weight: 800; font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.ticket .val.big { font-size: 1.55rem; color: #0d7a4d; }
.ticket .foot { font-size: 0.68rem; color: var(--paper-faint); margin-top: 12px; line-height: 1.5; font-family: var(--sans); }
.ticket .barcode {
  margin-top: 14px; height: 34px;
  background: repeating-linear-gradient(90deg, var(--paper-ink) 0 2px, transparent 2px 4px, var(--paper-ink) 4px 7px, transparent 7px 9px, var(--paper-ink) 9px 10px, transparent 10px 14px);
  opacity: 0.85;
}
.ticket .stamp {
  position: absolute; right: 22px; top: auto; bottom: 98px; transform: rotate(-8deg);
  background: var(--paper);
  box-shadow: 0 0 0 4px var(--paper);
  border: 3px solid rgba(13, 122, 77, 0.75); color: rgba(13, 122, 77, 0.9);
  border-radius: 8px; padding: 4px 10px; font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; pointer-events: none;
}
@media (max-width: 880px) { .ticket { transform: none; } }

/* kladionica vs dayprop */
table.cmp td.k { color: var(--faint); }
table.cmp td.d { color: var(--ink); font-weight: 600; }
table.cmp td.d .money { font-weight: 800; }

/* ---------- explainer (šta je prop firma) ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 30px 0 16px; }
@media (max-width: 700px) { .compare { grid-template-columns: 1fr; } }
.compare .side { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.compare .side.win { border-color: var(--money); background: linear-gradient(180deg, var(--money-soft), var(--card)); }
.compare .side .cap { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.compare .side .amt { font-size: 2rem; font-weight: 800; margin-bottom: 4px; }
.compare .side .res { font-size: 1.05rem; color: var(--muted); }
.compare .side .res b { font-size: 1.35rem; }
.compare .side.win .res b { color: var(--money); }

/* ---------- koraci ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; position: relative; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.8rem; color: var(--brand-strong);
  display: block; margin-bottom: 14px; letter-spacing: 0.1em;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.94rem; margin: 0; }
.step .ex { margin-top: 14px; padding: 10px 14px; background: var(--bg-raise); border-radius: 8px; font-size: 0.85rem; color: var(--muted); border: 1px dashed var(--line-strong); }
.step .ex b { color: var(--money); }

/* ---------- kalkulator ---------- */
.calc { background: var(--card); border: 1px solid var(--line-strong); border-radius: 16px; padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
@media (max-width: 800px) { .calc { grid-template-columns: 1fr; padding: 24px 20px; } }
.calc .field { margin-bottom: 24px; }
.calc label { display: flex; justify-content: space-between; font-size: 0.88rem; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.calc label output { color: var(--ink); font-weight: 800; }
.calc input[type="range"] { width: 100%; accent-color: var(--brand); cursor: pointer; }
.calc .result { background: var(--bg-raise); border-radius: 12px; padding: 24px; }
.calc .result .line { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.calc .result .line:last-of-type { border-bottom: none; }
.calc .result .line .v { font-weight: 800; font-size: 1.1rem; }
.calc .result .line .v.hero-num { font-size: 1.9rem; color: var(--money); }
.calc .disclaimer { font-size: 0.78rem; color: var(--faint); margin-top: 14px; line-height: 1.5; }
.calc .ctx { font-size: 0.86rem; color: var(--money); font-weight: 700; margin: 12px 0 0; }

/* ---------- konfigurator ---------- */
.config { background: var(--card); border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; }
.config .inner { display: grid; grid-template-columns: 1.2fr 0.8fr; }
@media (max-width: 880px) { .config .inner { grid-template-columns: 1fr; } }
.config .left { padding: 30px; }
.config .right { background: var(--bg-raise); padding: 30px; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
@media (max-width: 880px) { .config .right { border-left: none; border-top: 1px solid var(--line); } }
.config .group { margin-bottom: 24px; }
.config .group .glbl { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  border: 1px solid var(--line-strong); background: transparent; color: var(--muted);
  font-family: var(--sans); font-size: 0.9rem; font-weight: 700; padding: 9px 16px;
  border-radius: 9px; cursor: pointer; transition: all 0.12s ease;
}
.pill:hover { color: var(--ink); border-color: var(--faint); }
.pill.active { background: var(--brand); border-color: var(--brand); color: #0e0d14; }
.pill .badge { display: block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--money); }
.pill.active .badge { color: #0e0d14; opacity: 0.75; }
.adv-toggle { background: none; border: none; color: var(--faint); font-size: 0.82rem; font-weight: 700; cursor: pointer; padding: 0; font-family: var(--sans); }
.adv-toggle:hover { color: var(--muted); }
.rules-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 6px; }
.rules-grid .r { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.rules-grid .r b { display: block; font-size: 1.05rem; }
.rules-grid .r span { font-size: 0.72rem; color: var(--muted); font-weight: 600; }
.config .price-lbl { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.config .price { font-size: 2.6rem; font-weight: 800; margin: 4px 0 0; }
.config .price .eur { font-size: 1rem; color: var(--muted); font-weight: 600; }
.config .price-notes { font-size: 0.82rem; color: var(--muted); margin: 10px 0 22px; }
.config .price-notes b { color: var(--money); }
.config .buy { margin-top: auto; }
.config .bridge { font-size: 0.76rem; color: var(--faint); margin-top: 12px; line-height: 1.5; }
.promo-banner { display: none; background: var(--money-soft); border: 1px solid var(--money); color: var(--ink); border-radius: 10px; padding: 10px 16px; font-size: 0.88rem; font-weight: 700; margin-bottom: 18px; }
.promo-banner.on { display: block; }

/* ---------- poverenje / model ---------- */
.honest { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; }
@media (max-width: 800px) { .honest { grid-template-columns: 1fr; } }
.honest .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.honest .card.accent { border-color: var(--brand); }
.honest .card p { color: var(--muted); font-size: 0.96rem; }
.honest .card p b { color: var(--ink); }
.honest .card .hl { color: var(--ink); font-size: 1.02rem; }

/* ---------- tabela poređenja ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: var(--radius); }
table.cmp { border-collapse: collapse; width: 100%; font-size: 0.92rem; min-width: 560px; }
table.cmp th, table.cmp td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); }
table.cmp tr:last-child td { border-bottom: none; }
table.cmp thead th { background: var(--bg-raise); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
table.cmp td.yes { color: var(--money); font-weight: 700; }
table.cmp td.no { color: var(--faint); }
table.cmp td:first-child { color: var(--muted); }
/* Tabela pravila mora cela da stane na telefon — min-width od 560px je tu zbog
   širokih tabela sa više kolona (rang-lista na terminalu), ali kod pravila
   gura kolonu „uz test" van ekrana, a to je baš ona koja se poredi. */
@media (max-width: 560px) {
  #pravila-app table.cmp { min-width: 0; font-size: 0.8rem; }
  #pravila-app table.cmp th, #pravila-app table.cmp td { padding: 10px 9px; }
  #pravila-app table.cmp thead th { font-size: 0.66rem; letter-spacing: 0.03em; }

  /* Poređenje sa kladionicom ima duge rečenice u ćelijama, pa se ne može samo
     stisnuti — na telefonu se svaki red slaže u blok, sa oznakom čija je koja
     tvrdnja. Bez ovoga se bočno vidi samo kolona „Kladionica", dakle sve loše
     vesti, a naša kolona (poenta cele sekcije) ostaje van ekrana. */
  #nije-kladionica .tablewrap { border: none; }
  #nije-kladionica table.cmp { min-width: 0; display: block; }
  #nije-kladionica table.cmp thead { display: none; }
  #nije-kladionica table.cmp tbody, #nije-kladionica table.cmp tr { display: block; }
  #nije-kladionica table.cmp tr {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--card); padding: 14px 16px; margin-bottom: 10px;
  }
  #nije-kladionica table.cmp td { display: block; border: none; padding: 0; }
  #nije-kladionica table.cmp td:first-child {
    color: var(--ink); font-weight: 800; font-size: 0.95rem; margin-bottom: 8px;
  }
  #nije-kladionica table.cmp td.k, #nije-kladionica table.cmp td.d { padding-left: 14px; position: relative; }
  #nije-kladionica table.cmp td.k { margin-bottom: 6px; }
  #nije-kladionica table.cmp td.k::before, #nije-kladionica table.cmp td.d::before {
    position: absolute; left: 0; top: 0; font-weight: 800;
  }
  #nije-kladionica table.cmp td.k::before { content: "✕"; color: #ef5350; }
  #nije-kladionica table.cmp td.d::before { content: "✓"; color: var(--money); }
}

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 20px 4px; font-weight: 700; font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--brand-strong); flex-shrink: 0; transition: transform 0.15s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .a { padding: 0 4px 22px; color: var(--muted); font-size: 0.96rem; max-width: 700px; }
.faq-item .a b { color: var(--ink); }

/* ---------- final CTA ---------- */
.final-cta { text-align: center; background: linear-gradient(180deg, var(--bg-raise), var(--bg)); border-top: 1px solid var(--line); }
.final-cta h2 { margin-bottom: 10px; }
.final-cta p { color: var(--muted); max-width: 520px; margin: 0 auto 28px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 48px 0 40px; font-size: 0.85rem; color: var(--muted); }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 36px; margin-bottom: 32px; }
@media (max-width: 700px) { .site-footer .cols { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--ink); font-size: 0.85rem; margin: 0 0 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
.site-footer .legal { font-size: 0.76rem; color: var(--faint); line-height: 1.6; border-top: 1px solid var(--line); padding-top: 24px; }

/* ---------- sticky mobile CTA ---------- */
.sticky-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  background: rgba(20, 18, 29, 0.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-strong); padding: 10px 16px;
  justify-content: space-between; align-items: center; gap: 12px;
}
.sticky-cta .p { font-size: 0.85rem; font-weight: 700; }
.sticky-cta .p .money { display: block; font-size: 1.05rem; }
.sticky-cta .btn { padding: 10px 20px; font-size: 0.88rem; white-space: nowrap; }
@media (max-width: 700px) { .sticky-cta.show { display: flex; } }

/* ---------- pravila: šta ruši izazov ----------
   Prekršaji moraju da se vide pre nego što se pročitaju — crveni okvir i
   krupan naslov po stavci. Zeleni parnjak (.can) za ono što je dozvoljeno. */
.stop, .can { border-radius: var(--radius); padding: 24px; border: 1px solid; }
.stop { background: linear-gradient(180deg, rgba(239, 83, 80, 0.09), var(--card)); border-color: rgba(239, 83, 80, 0.42); }
.can { background: linear-gradient(180deg, var(--money-soft), var(--card)); border-color: rgba(61, 220, 151, 0.35); }
.stop > h3, .can > h3 { margin: 0 0 4px; font-size: 1.15rem; }
.stop > h3 { color: #ff8a8e; }
.can > h3 { color: var(--money); }
.stop > p.lead, .can > p.lead { color: var(--muted); font-size: 0.94rem; margin: 0 0 18px; }
.breach { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.breach li { background: var(--bg-raise); border-left: 3px solid #ef5350; border-radius: 0 8px 8px 0; padding: 14px 16px; }
.breach li b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 4px; }
.breach li span { display: block; color: var(--muted); font-size: 0.9rem; }
.breach li .ex { display: block; margin-top: 8px; font-size: 0.84rem; color: var(--faint); }
.breach li .ex b { display: inline; color: var(--money); font-size: 0.84rem; }
.allow { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.allow li { padding-left: 26px; position: relative; color: var(--muted); font-size: 0.94rem; }
.allow li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--money); font-weight: 800; }
.allow.no li::before { content: "✕"; color: #ef5350; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 800px) { .duo { grid-template-columns: 1fr; } }

/* ---------- podstranice ---------- */
.page-hero { padding: 64px 0 40px; border-bottom: 1px solid var(--line); }
.page-hero p { color: var(--muted); font-size: 1.08rem; max-width: 620px; }
.prose { max-width: 720px; }
.prose h2 { margin-top: 48px; font-size: 1.5rem; }
.prose h3 { margin-top: 30px; }
.prose p, .prose li { color: var(--muted); }
.prose b, .prose strong { color: var(--ink); }
.prose .note { background: var(--card); border-left: 3px solid var(--warn); border-radius: 0 8px 8px 0; padding: 14px 18px; font-size: 0.9rem; }

/* ---------- terminal CTA (početna, odmah posle hero-a) ----------
   Besplatna proba je prvi korak pre kupovine, pa stoji visoko i vizuelno
   se izdvaja: brend okvir + mini prikaz dva dugmeta, da se u sekundi vidi
   o čemu je reč bez čitanja teksta. */
.tcta {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(155, 123, 243, 0.16), transparent 60%),
    var(--card);
  border: 1px solid var(--line-strong); border-radius: 18px;
  padding: 36px 40px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.tcta h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 0 0 12px; letter-spacing: -0.02em; }
.tcta p { color: var(--muted); font-size: 1.05rem; margin: 0 0 22px; }
.tcta .cta-row { margin-bottom: 18px; }

/* mini terminal — statična slika, ne widget. Cela je link ka /terminal/:
   ljudi klikću na sliku grafikona pre nego na dugme iznad nje. */
.tcta-vis {
  display: flex; justify-content: center;
  text-decoration: none; color: inherit; cursor: pointer;
  transition: transform 0.18s ease;
}
/* bez ovoga globalno `a:hover{text-decoration:underline}` podvuče
   ceo sadržaj makete — cenu, dugmad, stanje računa. */
.tcta-vis:hover, .tcta-vis:focus, .tcta-vis * { text-decoration: none; }
.tcta-vis:hover .tcta-mini,
.tcta-vis:focus-visible .tcta-mini {
  border-color: rgba(61, 220, 151, 0.5);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
}
.tcta-vis:hover { transform: translateY(-2px); }
.tcta-vis:focus-visible { outline: 2px solid var(--money); outline-offset: 6px; border-radius: 16px; }
@media (prefers-reduced-motion: reduce) {
  .tcta-vis, .tcta-vis:hover { transition: none; transform: none; }
}
.tcta-mini {
  width: 100%; max-width: 320px; background: var(--bg-raise);
  border: 1px solid var(--line-strong); border-radius: 14px; padding: 14px 16px 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.tcta-top { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; color: var(--muted); }
.tcta-live { color: var(--money); font-size: 0.62rem; }
.tcta-price { font-family: var(--mono); font-size: 1.6rem; font-weight: 700; margin: 6px 0 10px; font-variant-numeric: tabular-nums; }
.tcta-spark {
  display: block; width: 100%; height: 52px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.tcta-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tcta-btns span {
  border-radius: 10px; padding: 11px 6px; text-align: center;
  font-weight: 800; font-size: 0.95rem; letter-spacing: 0.05em;
}
.tcta-btns small { display: block; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.72; margin-top: 3px; }
/* iste boje kao dugmad u terminalu (/terminal/) — maketa i prava stvar
   moraju da izgledaju isto, inače klik sa naslovne deluje kao druga aplikacija */
.tcta-btns span { border: 1px solid transparent; }
.tcta-sell { background: rgba(242, 85, 90, 0.16); border-color: rgba(242, 85, 90, 0.4); color: #ff8a8e; }
.tcta-buy { background: rgba(61, 220, 151, 0.16); border-color: rgba(61, 220, 151, 0.4); color: var(--money); }
.tcta-acc {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 0.78rem; color: var(--muted);
}
.tcta-acc b { color: var(--ink); font-family: var(--mono); font-size: 0.95rem; }

@media (max-width: 860px) {
  .tcta { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px; }
  .tcta-vis { order: -1; }            /* na telefonu slika ide iznad teksta */
  .tcta-mini { max-width: 100%; }
}

/* ---------- kupovina računa (zamenilo konfigurator) ----------
   Jedna odluka: koliko veliki račun. Bez tržišta, proizvoda i platforme —
   svaki dodatni korak je mesto na kome početnik odustane. */
.accts {
  /* 4 veličine ($5k–$50k) — sve u jednom redu na desktopu */
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 900px) { .accts { grid-template-columns: repeat(2, 1fr); } }
.acct {
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 14px;
  padding: 22px 18px 18px; text-align: center;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.acct:hover { border-color: var(--brand); transform: translateY(-2px); }
.acct-size { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.acct-lbl { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); }
/* dve opcije po veličini računa: odmah (skuplje) i uz test (jeftinije) */
.acct-opt { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.acct-opt-t { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.acct-opt-p { font-size: 1.25rem; font-weight: 800; margin-top: 2px; }
.acct-opt-s { font-size: 0.68rem; color: var(--faint); margin-bottom: 9px; }
.acct-opt.is-now .acct-opt-p { color: var(--ink); }
.acct-opt.is-test .acct-opt-p { color: var(--money); }
.acct-opt.is-test .acct-opt-t { color: var(--money); }
.acct-buy { display: block; text-align: center; padding: 10px 8px; font-size: 0.88rem; }
.acct-opt.is-now .acct-buy { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.acct-opt.is-now .acct-buy:hover { background: var(--card-2); }
@media (max-width: 560px) {
  .accts { grid-template-columns: 1fr 1fr; gap: 10px; }
  .acct { padding: 18px 12px 14px; }
  .acct-size { font-size: 1.25rem; }
}

/* Link u boji pozadine — na Nikolin zahtev (25.7.2026): stranica ostaje na
   sajtu i u footeru, ali je posetilac ne vidi.
   ⚠️ Google ovo tretira kao "hidden text and links" (spam politika) i kazna
   je na nivou celog sajta. Bezbednija zamena je običan, samo tiši link. */
.site-footer a.ghost-link { color: var(--bg); }
.site-footer a.ghost-link:hover { color: var(--bg); text-decoration: none; }

/* ---------- pravila (4 kartice) ---------- */
.rules4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .rules4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .rules4 { grid-template-columns: 1fr; } }
.rule {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 18px; position: relative;
}
.rule .rn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-strong);
  font-size: 0.8rem; font-weight: 800; margin-bottom: 12px;
}
.rule h3 { font-size: 1rem; margin: 0 0 8px; line-height: 1.3; }
.rule h3 b { color: var(--money); }
.rule p { color: var(--muted); font-size: 0.9rem; margin: 0; }
.rule p b { color: var(--ink); }

/* objašnjenje ispod tabele pravila */
.rules-note { margin-top: 22px; max-width: 760px; }
.rules-note p { color: var(--muted); font-size: 0.92rem; }
.rules-note b { color: var(--ink); }