/* ARCADIAN — slusaj.hr (radio streaming) */

/* hero */
.slu-hero { position: relative; overflow: hidden; background: var(--navy); color: #fff; padding: clamp(64px,8vw,120px) 0 clamp(56px,6vw,96px); }
.slu-hero::after {
  content: ""; position: absolute; right: -160px; top: -120px; width: 520px; height: 520px; border-radius: 50%;
  border: 1px solid rgba(198,162,60,.16); box-shadow: 0 0 0 70px rgba(198,162,60,.05);
}
.slu-hero__wave { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: flex-end; gap: 5px; padding: 0 8%; opacity: .22; }
.slu-hero__wave span { flex: 1; background: var(--gold); border-radius: 3px 3px 0 0; animation: sluwave 1.4s ease-in-out infinite; }
@keyframes sluwave { 0%,100% { height: 18%; } 50% { height: 90%; } }
@media (prefers-reduced-motion: reduce) { .slu-hero__wave span { animation: none; height: 50%; } }
.slu-hero__inner { position: relative; z-index: 2; }
.slu-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px,5.4vw,68px); line-height: 1; letter-spacing: -.02em; margin: 20px 0 22px; text-wrap: balance; color: #fff; }
.slu-hero h1 .gold { color: var(--gold); }
.slu-hero p { font-size: clamp(17px,1.7vw,21px); color: var(--on-navy-2); line-height: 1.5; max-width: 48ch; }
.slu-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.slu-ghost { color: #fff; border-color: color-mix(in srgb,#fff 24%, transparent); }
.slu-ghost:hover { border-color: var(--gold); background: color-mix(in srgb,#fff 6%, transparent); }

/* why grid */
.slu-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.slu-why__item { background: var(--card); padding: 30px 28px; transition: background .2s var(--ease); }
.slu-why__item:hover { background: #fff; }
.slu-why__ic { width: 42px; height: 42px; border-radius: 11px; background: color-mix(in srgb,var(--gold) 16%, transparent); display: grid; place-items: center; margin-bottom: 16px; }
.slu-why__ic svg { width: 22px; height: 22px; color: var(--gold-deep); }
.slu-why__item h3 { font-size: 17px; margin-bottom: 7px; letter-spacing: -.01em; }
.slu-why__item p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }

/* pricing cards */
.slu-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.slu-plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px; display: flex; flex-direction: column; position: relative; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.slu-plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.slu-plan--feat { border-color: color-mix(in srgb,var(--gold) 55%, var(--line)); box-shadow: var(--shadow-md); }
.slu-plan--feat::before { content: "Najčešći izbor"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; background: var(--gold); color: var(--navy); border-radius: 100px; padding: 4px 13px; font-weight: 700; white-space: nowrap; }
.slu-plan__name { font-family: var(--font-display); font-weight: 800; font-size: 23px; color: var(--navy); letter-spacing: -.01em; }
.slu-plan__tag { font-size: 13px; color: var(--ink-3); margin-top: 5px; }
.slu-plan__price { margin: 20px 0 4px; display: flex; align-items: baseline; gap: 7px; flex-wrap: nowrap; white-space: nowrap; }
.slu-plan__price .amt { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--ink); letter-spacing: -.02em; white-space: nowrap; }
.slu-plan--feat .slu-plan__price .amt { color: var(--gold-deep); }
.slu-plan__price .per { font-size: 14px; color: var(--ink-3); }
.slu-plan__terms { font-size: 12.5px; color: var(--ink-3); margin-bottom: 20px; }
.slu-plan__divider { height: 1px; background: var(--line); margin: 0 0 20px; }
.slu-plan__list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.slu-plan__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink); line-height: 1.4; }
.slu-plan__list li.off { color: var(--ink-3); opacity: .6; }
.slu-plan__chk { width: 18px; height: 18px; flex: none; border-radius: 50%; background: color-mix(in srgb,var(--gold) 18%, transparent); display: grid; place-items: center; margin-top: 1px; }
.slu-plan__chk svg { width: 10px; height: 10px; color: var(--gold-deep); }
.slu-plan__off { width: 18px; height: 18px; flex: none; display: grid; place-items: center; margin-top: 1px; color: var(--ink-3); font-size: 13px; }
.slu-plan__btns { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }

/* comparison table */
.slu-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.slu-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.slu-table th, .slu-table td { padding: 13px 18px; text-align: center; border-top: 1px solid var(--line); }
.slu-table thead th { background: var(--navy); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 15px; border-top: 0; }
.slu-table thead th.feat { color: var(--gold-soft); }
.slu-table tbody th { text-align: left; font-weight: 500; color: var(--ink-2); background: var(--paper-2); }
.slu-table tbody tr:nth-child(even) td, .slu-table tbody tr:nth-child(even) th { background: color-mix(in srgb, var(--paper-2) 50%, transparent); }
.slu-table .yes { color: var(--gold-deep); font-weight: 700; }
.slu-table .no { color: var(--ink-3); opacity: .5; }
.slu-table .val { color: var(--ink); font-weight: 600; }
.slu-table .price-row td { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ink); }
.slu-table .price-row .feat-col { color: var(--gold-deep); }
.slu-table .price-row .sub { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* stream computer */
.slu-sc { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.slu-sc__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 30px; display: flex; flex-direction: column; }
.slu-sc__kind { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.slu-sc__price { font-family: var(--font-display); font-weight: 800; font-size: 32px; color: var(--ink); letter-spacing: -.02em; margin: 10px 0 18px; }
.slu-sc__price .per { font-size: 14px; font-weight: 400; color: var(--ink-3); }
.slu-sc__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.slu-sc__list li { display: grid; grid-template-columns: 17px 1fr; gap: 10px; align-items: start; font-size: 14.5px; color: var(--ink); line-height: 1.45; margin-bottom: 4px; }
.slu-sc__list svg { width: 17px; height: 17px; flex: none; color: var(--gold-deep); margin-top: 2px; }

.slu-foot-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.7; margin-top: 18px; }

@media (max-width: 860px) {
  .slu-why, .slu-plans, .slu-sc { grid-template-columns: 1fr; }
  .slu-table-wrap { overflow-x: auto; }
  .slu-table { min-width: 620px; }
}