/* ═══════════════════════════════════════════════════════════════════════
   Alivo — alivo.me (coming soon, redizajn B1-lite)
   Klasa: proizvod-naprijed promo (referenca: dikidi.ru/promo/business).
   Tamni hero sa STVARNIM ekranima proizvoda, gusto, poslovno.

   Paleta je JEDNA porodica — navy iz docs/DESIGN.md (§2, §3) produžena u
   dubinu za pozadinu — plus jedan akcent (violet). Nema drugog tona.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ink porodica — najdublji ton nosi hero, navy-950 je sidebar proizvoda */
  --ink-1000: #0B0E1C;
  --ink-950:  #171A2E;   /* ALIVO NAVY — sidebar u proizvodu */
  --ink-900:  #1E2238;
  --ink-800:  #272C46;
  --ink-700:  #343A59;
  --ink-600:  #454B6B;

  /* tekst na tamnom — kontrast mjeren nad --ink-1000 */
  --on-dark:       #F4F3FB;   /* 17.9:1 */
  --on-dark-2:     #C9CCE0;   /* 12.3:1 */
  --on-dark-3:     #9AA0BC;   /*  7.0:1 */
  --line-dark:     rgba(255, 255, 255, 0.09);
  --line-dark-2:   rgba(255, 255, 255, 0.16);

  /* akcent — violet, DESIGN.md §2; na tamnom se KORISTI SVJETLIJI stepen za
     tekst (violet-300/400), a primary ostaje boja dugmeta */
  --brand:        #5B4BD5;
  --brand-hover:  #4C3FC4;
  --accent:       #A78BFA;   /* violet-400 — 8.1:1 na ink-1000 */
  --accent-soft:  #C4B5FD;   /* violet-300 */

  /* svijetle površine za donje sekcije (paketi, forma, podnožje) */
  --paper:      #F8F8FC;     /* BACKGROUND, DESIGN.md */
  --surface:    #FFFFFF;
  --surface-2:  #F0F0F7;
  --line:       #E5E7EB;
  --fg:         #171A2E;
  --fg-2:       #454B6B;
  --fg-3:       #6B7280;

  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --disp: "Bricolage Grotesque", var(--sans);

  /* skala — modularna; hero naslov je niži nego u prošloj verziji jer
     dijeli ekran sa proizvodom, a ne sa praznim prostorom */
  --t-micro:  0.8125rem;
  --t-small:  0.9375rem;
  --t-body:   1.0625rem;
  --t-lead:   clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --t-h3:     clamp(1.1875rem, 1.1rem + 0.5vw, 1.4375rem);
  --t-h2:     clamp(1.625rem, 1.3rem + 1.5vw, 2.25rem);
  --t-h1:     clamp(2rem, 1.35rem + 3vw, 3.5rem);
  --t-stat:   clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);

  --gut:     1.25rem;
  --band-y:  clamp(3.25rem, 2rem + 5vw, 5.5rem);
  --radius:  14px;
}

/* ─────────────────────────── fontovi (nepromijenjeni, subset 119 znakova) ── */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-subset.woff2") format("woff2-variations");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-subset.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-italic-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ─────────────────────────── osnova ─────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink-1000);
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--disp);
  /* 600 umjesto 700: na tamnom se slovo optički deblja, pa 700 zatvara
     unutrašnje bjeline u „a" i „e" na velikim veličinama */
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture { display: block; max-width: 100%; }

.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--gut); }

:where(a, button, summary, input):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--ink-1000); padding: .6rem 1rem; z-index: 10; }
.skip:focus { left: 0; }

/* ─────────────────────────── header ─────────────────────────── */

.site-head { padding: 1.1rem 0; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.wordmark { display: flex; align-items: baseline; gap: .5rem; margin: 0; }
.wordmark__name { font-family: var(--disp); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.03em; color: var(--on-dark); }
.wordmark__desc { font-size: var(--t-small); color: var(--on-dark-3); }

.head-cta {
  display: inline-flex; align-items: center;
  min-height: 44px;                 /* dodirni cilj, ne veličina slova */
  padding: .55rem .95rem;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--on-dark);
  text-decoration: none;
  border: 1px solid var(--line-dark-2);
  border-radius: 9px;
  transition: border-color .14s ease, background-color .14s ease;
}
.head-cta:hover { border-color: var(--accent); background: rgba(167, 139, 250, .08); }

/* ─────────────────────────── hero ─────────────────────────── */

.hero { padding: clamp(1.25rem, 1rem + 2vw, 3rem) 0 clamp(2.5rem, 2rem + 3vw, 4.5rem); overflow: hidden; }
.hero__grid { display: grid; gap: 2.5rem; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent);
}
.hero__eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--accent); }

.hero__title { margin-top: .9rem; font-size: var(--t-h1); max-width: 16ch; }
.hero__lead  { margin-top: 1rem; font-size: var(--t-lead); color: var(--on-dark-2); max-width: 36ch; }

/* forma — ISTA (app.js, D1), samo tamna koža */
.signup { margin-top: 1.6rem; max-width: 32rem; }
.signup__row { display: grid; gap: .65rem; }
.field { display: grid; gap: .35rem; }
.field__label { font-size: var(--t-small); font-weight: 600; color: var(--on-dark-2); }
.field__input {
  width: 100%; min-height: 52px; padding: .75rem .95rem;
  font: inherit; font-size: var(--t-body);
  color: var(--on-dark); background: var(--ink-900);
  border: 1px solid var(--line-dark-2); border-radius: 10px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.field__input::placeholder { color: var(--on-dark-3); }
.field__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(167,139,250,.22); }
.field__input[aria-invalid="true"] { border-color: #F87171; box-shadow: 0 0 0 3px rgba(248,113,113,.18); }

.btn {
  position: relative; min-height: 52px; padding: .8rem 1.35rem;
  font: inherit; font-weight: 600; color: #fff;
  background: var(--brand); border: 0; border-radius: 10px; cursor: pointer;
  transition: background-color .14s ease, transform .14s ease;
}
.btn:hover { background: var(--brand-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .62; cursor: default; transform: none; }
.btn__spinner { display: none; }
.btn.is-busy .btn__label { visibility: hidden; }
.btn.is-busy .btn__spinner {
  display: block; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.signup__note { margin-top: .65rem; font-size: var(--t-small); color: var(--on-dark-3); }
.signup__msg  { margin-top: .65rem; font-size: var(--t-small); font-weight: 600; min-height: 1.2em; }
.signup__msg[data-tone="ok"]   { color: #6EE7A0; }
.signup__msg[data-tone="info"] { color: var(--on-dark-2); }
.signup__msg[data-tone="err"]  { color: #FCA5A5; }
.signup__msg.is-new { animation: rise .34s cubic-bezier(.2,.7,.3,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ── kompozicija uređaja: laptop + telefon, oba CRTANI okviri u CSS-u ── */

.devices { position: relative; margin-top: 1rem; padding: 0 0 12% 9%; }

.laptop { position: relative; }
.laptop__screen {
  background: #000;
  border: 9px solid #1C2036;
  border-bottom-width: 12px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 40px 90px -30px rgba(0,0,0,.85);
}
.laptop__screen img { width: 100%; height: auto; }
.laptop__base {
  height: 12px;
  margin: 0 -3.5%;
  background: #2A2F4A;
  border-radius: 0 0 12px 12px;
  border-top: 1px solid #3A4060;
}
.laptop__base::after {
  content: ""; display: block; width: 14%; height: 3px; margin: 0 auto;
  background: #1A1D30; border-radius: 0 0 4px 4px;
}

.phone {
  position: absolute; left: 0; bottom: 0; width: 27%;
  border: 7px solid #14172A; border-radius: 26px; overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -20px rgba(0,0,0,.9);
}
.phone img { width: 100%; height: auto; }

/* ─────────────────────────── traka povjerenja ─────────────────────────── */

.trust { border-block: 1px solid var(--line-dark); background: var(--ink-950); }
.trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.trust__item { padding: 1.35rem .5rem 1.35rem 0; }
.trust__item + .trust__item { border-left: 1px solid var(--line-dark); padding-left: 1.1rem; }
.trust__item:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-dark); }
.trust__item:nth-child(4) { border-top: 1px solid var(--line-dark); }
.trust__big { font-family: var(--disp); font-weight: 600; font-size: var(--t-stat); letter-spacing: -0.02em; color: var(--accent); line-height: 1.05; }
.trust__cap { margin-top: .35rem; font-size: var(--t-small); color: var(--on-dark-2); max-width: 20ch; }

/* ═══════════════════════ 768 ═══════════════════════ */

@media (min-width: 48rem) {
  :root { --gut: 2rem; }
  .signup__row { grid-template-columns: 1fr auto; align-items: end; gap: .75rem; }
  .trust__grid { grid-template-columns: repeat(4, 1fr); }
  .trust__item:nth-child(3) { border-left: 1px solid var(--line-dark); padding-left: 1.1rem; border-top: 0; }
  .trust__item:nth-child(4) { border-top: 0; }
  .trust__item { padding-block: 1.75rem; }
}

/* ═══════════════════════ 1200 ═══════════════════════ */

@media (min-width: 75rem) {
  :root { --gut: 2.5rem; }
  .site-head { padding: 1.5rem 0; }
  .hero { padding-top: 3.5rem; padding-bottom: 5rem; }
  .hero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 3.5rem; }
  .hero__title { max-width: 15ch; }
  /* telefon preklapa laptop, ali ne smije da proguta cijelu prvu kolonu
     kalendara — 13% lijevog prostora ostavlja Jovaninu kolonu čitljivom */
  .devices { margin-top: 0; padding: 0 0 10% 13%; }
  .phone { width: 25%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .signup__msg.is-new { animation: none; }
  .btn:active { transform: none; }
}

/* ═══════════════════════ FEATURE BLOKOVI ═══════════════════════ */

.features { padding: var(--band-y) 0 1rem; }
.feat { display: grid; gap: 1.5rem; padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0; border-top: 1px solid var(--line-dark); }
.feat:first-child { border-top: 0; padding-top: 0; }
.feat__kicker { font-size: var(--t-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.feat__title { margin-top: .5rem; font-size: var(--t-h2); max-width: 18ch; }
.feat__text { margin-top: .85rem; color: var(--on-dark-2); max-width: 44ch; }
.feat__media { margin: 0; }

.screen {
  border: 1px solid var(--line-dark-2);
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.85);
}
.screen img { width: 100%; height: auto; }

.phone--static { position: static; width: min(62%, 280px); margin-inline: auto; }
.feat__media--phone { display: grid; gap: 1rem; justify-items: center; }
.qr {
  width: 160px;
  padding: 10px;
  border: 1px solid var(--line-dark-2);
  border-radius: 12px; overflow: hidden; background: #fff;
}
.qr img { width: 100%; height: auto; }
.qr__cap { margin-top: .4rem; text-align: center; font-size: var(--t-micro); color: var(--on-dark-3); }

/* ═══════════════════════ PAKETI ═══════════════════════ */

.plans-band { padding: var(--band-y) 0; background: var(--ink-950); border-top: 1px solid var(--line-dark); }
.h2 { font-size: var(--t-h2); max-width: 20ch; }
.h2--small { font-size: var(--t-h3); }
.h2--center { max-width: none; text-align: center; }
.lede { margin-top: .75rem; font-size: var(--t-lead); color: var(--on-dark-2); max-width: 48ch; }
.lede--center { text-align: center; margin-inline: auto; }

/* Na 375 kartice idu u horizontalni scroll-snap: četiri kartice jedna
   ispod druge bi bile 2000px skrola kroz istu formu. */
.plans {
  margin-top: 2rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82%, 20rem);
  gap: .9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gut);
  padding: .25rem var(--gut) 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.plans::-webkit-scrollbar { display: none; }
.plan {
  scroll-snap-align: start;
  background: var(--ink-900);
  border: 1px solid var(--line-dark-2);
  border-radius: var(--radius);
  padding: 1.35rem 1.25rem 1.5rem;
  display: flex; flex-direction: column;
}
.plan--accent { border-color: var(--accent); }
.plan__name { font-size: var(--t-h3); }
.plan--accent .plan__name { color: var(--accent); }
.plan__price { margin-top: .6rem; font-family: var(--disp); font-weight: 600; font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1; }
.plan__price span { font-family: var(--sans); font-weight: 500; font-size: var(--t-small); color: var(--on-dark-3); letter-spacing: 0; }
.plan__period { margin-top: .35rem; font-size: var(--t-micro); color: var(--on-dark-3); }
.plan__list { margin-top: 1.1rem; display: grid; gap: .55rem; }
.plan__list li { position: relative; padding-left: 1.3rem; font-size: var(--t-small); color: var(--on-dark-2); }
.plan__list li::before { content: ""; position: absolute; left: .1rem; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-600); }
.plan--accent .plan__list li::before { background: var(--accent); }
.plan__list .plan__all { padding-left: 0; color: var(--on-dark-3); font-weight: 600; }
.plan__list .plan__all::before { display: none; }
.plan__note { margin-top: auto; padding-top: 1rem; font-size: var(--t-micro); color: var(--on-dark-3); }

/* ═══════════════════════ DODACI ═══════════════════════ */

.addons { padding: 1.75rem 0; border-block: 1px solid var(--line-dark); }
.addons__lead { color: var(--on-dark-2); }
.addons__lead strong { color: var(--on-dark); }
.addons__list { margin-top: .9rem; display: grid; gap: .6rem; }
/* svaki dodatak je ćelija sa oznakom uz desnu ivicu — tri reda različite
   dužine teksta inače prelamaju oznaku na tri različita mjesta */
.addon {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem .9rem; border: 1px solid var(--line-dark); border-radius: 10px;
  font-size: var(--t-small); color: var(--on-dark-2);
}
.addon .tag { flex: none; }
.tag { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--on-dark-3); border: 1px solid var(--line-dark-2); border-radius: 999px; padding: .1rem .5rem; }

/* ═══════════════════════ U IZRADI ═══════════════════════ */

.soon-band { padding: var(--band-y) 0; }
.soon { margin-top: 1.5rem; display: grid; gap: .8rem; max-width: 46ch; }
.soon li { position: relative; padding-left: 1.5rem; color: var(--on-dark-2); border-bottom: 1px solid var(--line-dark); padding-bottom: .8rem; }
.soon li:last-child { border-bottom: 0; }
.soon li::before { content: ""; position: absolute; left: 0; top: .65em; width: 10px; height: 2px; background: var(--accent); }

/* ═══════════════════════ LISTA ČEKANJA — svijetla podloga ═══════════════════════ */

.join { background: var(--paper); color: var(--fg); padding: var(--band-y) 0; }
.join .h2 { color: var(--fg); }
.join .lede { color: var(--fg-2); }
.wrap--narrow { max-width: 34rem; }

.signup--light { margin-inline: auto; }
.signup--light .field__label { color: var(--fg-2); }
.signup--light .field__input { background: var(--surface); color: var(--fg); border-color: #CFD3DC; }
.signup--light .field__input::placeholder { color: #9CA3AF; }
.signup--light .field__input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(91,75,213,.16); }
.signup--light .signup__msg[data-tone="ok"]   { color: #15803D; }
.signup--light .signup__msg[data-tone="info"] { color: var(--fg-2); }
.signup--light .signup__msg[data-tone="err"]  { color: #B91C1C; }
.join :where(a, button, summary, input):focus-visible { outline-color: var(--brand); }

.privacy { margin-top: 1.5rem; text-align: center; }
.privacy__sum {
  display: inline-block; padding: .66rem .85rem; margin: -.66rem -.85rem;
  font-size: var(--t-small); color: var(--brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.privacy__sum::-webkit-details-marker { display: none; }
.privacy__body {
  margin-top: 1rem; text-align: left;
  font-size: var(--t-small); color: var(--fg-2); line-height: 1.6;
  max-width: 60ch;                    /* pisan za usku kolonu — ne šire od toga ni na 1440 */
  margin-inline: auto;
}
.privacy__title { font-size: var(--t-h3); color: var(--fg); font-family: var(--disp); font-weight: 600; }
.privacy__body p { margin-top: .8rem; }
/* inline link usred pasusa: dodirni cilj 44px nosi padding, negativna
   margina vraća prelom reda na svoje — isto pravilo kao .lnk u podnožju */
.privacy__body .lnk { display: inline-block; padding-block: .7rem; margin-block: -.7rem; }

/* ═══════════════════════ PODNOŽJE ═══════════════════════ */

.site-foot { background: var(--paper); color: var(--fg-3); padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--line); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: space-between; }
.site-foot p { font-size: var(--t-small); margin: 0; }
.lnk { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: .7rem; margin-block: -.7rem; }

/* ═══════════════════════ otkrivanje (animacija 1/2) ═══════════════════════ */

.js [data-reveal] { opacity: 0; transform: translateY(12px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal].is-in { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════ 768 ═══════════════════════ */

@media (min-width: 48rem) {
  .feat { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 2.5rem; }
  .feat--flip .feat__copy { order: 2; }
  .feat--flip .feat__media { order: 1; }
  .feat__media--phone { grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 2rem; }
  .phone--static { width: 280px; margin: 0; }
  .qr { width: 200px; }

  .plans {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    padding-inline: var(--gut);
    max-width: 72rem;
    margin-inline: auto;
    gap: 1.1rem;
  }
  .addons__list { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

/* ═══════════════════════ 1200 ═══════════════════════ */

@media (min-width: 75rem) {
  .feat { gap: 4rem; padding-block: 4rem; }
  .plans { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  .plan { padding: 1.6rem 1.5rem 1.75rem; }
}