:root{
  --ink:#163d62;
  --ink-2:#0f2f4e;
  --soft:#5b7e9d;
  --soft-2:#7d9ab0;
  --cyan:#20add5;
  --cyan-2:#26b5cf;
  --red:#ef3e67;
  --red-2:#d92e56;
  --blue:#1565c0;
  --tint:#e4f7fc;
  --tint-2:#eef8fc;
  --line:#dceaf2;
  --sans:Inter,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  background:radial-gradient(circle at 50% 0%, #ffffff 0 24%, #f4fbfd 58%, #e6f5fa 100%);
  min-height:100vh;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* srca u pozadini */
.hearts{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.hearts b{ position:absolute; display:block; line-height:1; mix-blend-mode:multiply; }

/* logo */
.logo{ display:inline-flex; align-items:center; gap:12px; }
.logo .mark{ position:relative; display:block; line-height:1; }
.logo .mark i{ position:absolute; left:0; top:0; font-style:normal; mix-blend-mode:multiply; }
.logo .mark i:first-child{ color:var(--red); }
.logo .mark i:last-child{ color:var(--cyan-2); }
.logo .word{ font-weight:400; color:var(--ink-2); white-space:nowrap; }

/* tipografija */
.eyebrow{
  display:inline-block; font-weight:800; letter-spacing:.24em; color:var(--cyan);
  border-bottom:3px solid var(--cyan); padding-bottom:6px; font-size:12px;
}
h1,h2,h3{ letter-spacing:-.025em; margin:0; }

/* gumbi */
.btn{
  width:100%; border:none; cursor:pointer; border-radius:100px; padding:15px 20px;
  font-family:var(--sans); font-size:15px; font-weight:800; color:#fff;
  background:var(--red); box-shadow:0 14px 26px -14px rgba(239,62,103,.85);
  display:flex; align-items:center; justify-content:center; gap:9px;
  transition:all .16s cubic-bezier(.2,.8,.2,1);
}
.btn:hover:enabled{ background:var(--red-2); transform:translateY(-1px); }
.btn:active:enabled{ transform:translateY(0) scale(.985); }
.btn:disabled{ background:#e3edf3; color:#a3b8c7; box-shadow:none; cursor:not-allowed; }
.btn.blue{ background:var(--blue); box-shadow:0 14px 26px -14px rgba(21,101,192,.8); }
.btn.blue:hover:enabled{ background:#0f4fa0; }
.btn.dark{ background:var(--ink); box-shadow:0 12px 22px -14px rgba(22,61,98,.9); }
.btn.dark:hover:enabled{ background:#0e2c48; }
.btn.ghost{ background:#fff; color:var(--ink); border:1.5px solid #e4eef5; box-shadow:none; }
.btn.ghost:hover:enabled{ border-color:var(--cyan); color:var(--cyan); background:#f7fcfe; }
.btn.sm{ padding:12px 14px; font-size:13.5px; border-radius:14px; }

/* polja */
.field{
  width:100%; display:flex; align-items:center; gap:10px;
  background:#fff; border:1.5px solid #dfeaf2; border-radius:100px; padding:14px 18px;
  box-shadow:0 8px 18px -14px rgba(22,61,98,.5);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field:focus-within{ border-color:var(--cyan); box-shadow:0 0 0 4px rgba(32,173,213,.14); }
.field svg{ color:var(--soft-2); flex:0 0 auto; }
.field input{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-family:var(--sans); font-size:16px; color:var(--ink);
}
.field input::placeholder{ color:#a8bece; }

.inp, .ta{
  width:100%; font-family:var(--sans); font-size:13.5px; color:var(--ink);
  background:#fbfdfe; border:1.5px solid #e4eef5; border-radius:11px; padding:10px 13px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.inp:hover, .ta:hover{ background:#fff; border-color:#d6e6f0; }
.inp:focus, .ta:focus{ outline:none; background:#fff; border-color:var(--cyan); box-shadow:0 0 0 4px rgba(32,173,213,.13); }
.ta{ resize:vertical; min-height:54px; line-height:1.45; font-size:12.5px; }

/* veliko srce */
.bigheart{ position:relative; width:96px; height:96px; display:grid; place-items:center; }
.bigheart .hh{ position:relative; width:64px; height:64px; }
.bigheart .hh i{ position:absolute; left:0; top:0; font-style:normal; font-size:62px; line-height:1; mix-blend-mode:multiply; }
.bigheart .hh i:first-child{ color:var(--red); }
.bigheart .hh i:last-child{ color:var(--cyan-2); left:16px; }
.bigheart .ray{ position:absolute; background:var(--cyan); border-radius:2px; opacity:.85; }

/* kartica */
.card{
  background:#fff; border:1px solid #e8f1f7; border-radius:18px;
  box-shadow:0 14px 30px -26px rgba(22,61,98,.75);
}

@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes pop{ 0%{ transform:scale(.9) translateY(10px); opacity:0; } 62%{ transform:scale(1.03) translateY(0); } 100%{ transform:scale(1); opacity:1; } }

/* povratak na upravljacku plocu */
.backlink{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  color:var(--soft); background:#fff; border:1px solid var(--line); border-radius:100px;
  padding:9px 15px 9px 12px; font-family:var(--sans); font-size:11.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 10px 20px -18px rgba(22,61,98,.9);
  transition:border-color .15s ease, color .15s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.backlink:hover{ border-color:var(--cyan); color:var(--cyan); background:#f7fcfe; }
.backlink:active{ transform:scale(.97); }
.backlink svg{ flex:0 0 auto; }
/* samo ikona - kad nema mjesta za tekst */
.backlink.only{ width:36px; height:36px; padding:0; justify-content:center; border-radius:50%; }

/* mobilne korekcije zajednickih elemenata */
@media (max-width:600px){
  .btn{ padding:14px 18px; font-size:14.5px; }
  .btn.sm{ padding:12px 12px; font-size:13px; min-height:44px; }
  .field{ padding:13px 16px; }
  .inp, .ta{ font-size:16px; padding:11px 13px; }   /* 16px sprjecava zoom na iOS-u */
  .ta{ font-size:14px; }
  .eyebrow{ font-size:11px; letter-spacing:.2em; }
  .backlink{ font-size:11px; padding:9px 13px 9px 11px; min-height:38px; }
  .backlink.only{ width:38px; height:38px; min-height:38px; padding:0; }
}