/* ==========================================================
   neercsys.com — portfolio u BalkTalk stilu
   Paleta, font (Geist) i animacije preuzeti sa balktalk.net
   ========================================================== */

/* ---------- Font: Geist Variable (isti kao na BalkTalku) ---------- */
@font-face {
  font-family: "Geist Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/geist-latin-ext-wght-normal.woff2) format("woff2-variations"),
       url(/assets/fonts/geist-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/geist-latin-wght-normal.woff2) format("woff2-variations"),
       url(/assets/fonts/geist-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Paleta ---------- */
:root {
  /* BalkTalk brand */
  --brand: oklch(51.4% .068 255.6);
  --brand-deep: oklch(43.2% .068 249);
  --brand-light: oklch(71.4% .076 256.3);
  --bubble: oklch(95.5% .008 250);
  --bubble-dark: oklch(25.7% .026 255.8);
  --ink: oklch(20% .02 256);
  --night: oklch(15.8% .014 258.2);
  --night-card: oklch(20.2% .019 255.7);
  --signup: #1e6e3f;
  --signup-hover: #238049;
  --hero: #0b1020;

  /* Tailwind slate + akcenti koje BalkTalk koristi */
  --slate-100: oklch(96.8% .007 247.896);
  --slate-200: oklch(92.9% .013 255.508);
  --slate-300: oklch(86.9% .022 252.894);
  --slate-400: oklch(70.4% .04 256.788);
  --slate-500: oklch(55.4% .046 257.417);
  --slate-600: oklch(44.6% .043 257.281);
  --slate-700: oklch(37.2% .044 257.287);
  --amber-100: oklch(96.2% .059 95.617);
  --amber-300: oklch(87.9% .169 91.605);
  --amber-400: oklch(82.8% .189 84.429);
  --amber-500: oklch(76.9% .188 70.08);
  --amber-700: oklch(55.5% .163 48.998);
  --emerald-100: oklch(95% .052 163.051);
  --emerald-300: oklch(84.5% .143 164.978);
  --emerald-400: oklch(76.5% .177 163.223);
  --emerald-700: oklch(50.8% .118 165.612);
  --orange-100: oklch(95.4% .038 75.164);
  --orange-300: oklch(83.7% .128 66.29);
  --orange-400: oklch(75% .183 55.934);
  --orange-700: oklch(55.3% .195 38.402);
  --rose-100: oklch(94.1% .03 12.58);
  --rose-300: oklch(81% .117 11.638);
  --rose-400: oklch(71.2% .194 13.428);
  --rose-600: oklch(58.6% .253 17.585);
  --sky-100: oklch(95.1% .026 236.824);
  --sky-300: oklch(82.8% .111 230.318);
  --sky-400: oklch(74.6% .16 232.661);
  --sky-700: oklch(50% .134 242.749);
  --violet-100: oklch(94.3% .029 294.588);
  --violet-300: oklch(81.1% .111 293.571);
  --violet-400: oklch(70.2% .183 293.541);
  --violet-700: oklch(49.1% .27 292.581);

  --font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* Svijetla tema */
  --page: oklch(98.5% .003 248);
  --text: var(--ink);
  --text-2: var(--slate-600);
  --muted: var(--slate-500);
  --card: #ffffff;
  --border: rgb(0 0 0 / .05);
  --border-strong: rgb(0 0 0 / .1);
  --chip: var(--slate-100);
  --chip-text: var(--slate-600);
  --accent: var(--brand);
  --solid-bg: var(--ink);
  --solid-fg: #ffffff;
  --hero-bg: var(--hero);
  --card-shadow: 0 1px 2px rgb(15 23 42 / .04);
  --card-shadow-hover: 0 20px 25px -5px rgb(15 23 42 / .05), 0 8px 10px -6px rgb(15 23 42 / .05);
  --footer-bg: rgb(255 255 255 / .7);
  --bar-bg: rgb(255 255 255 / .95);
  --panel-from: color-mix(in oklab, var(--brand) 10%, transparent);
  --chip-soft: rgb(255 255 255 / .7);
  --line-1: var(--slate-200);
  --line-2: var(--slate-100);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: var(--night);
    --text: var(--slate-100);
    --text-2: var(--slate-400);
    --muted: var(--slate-400);
    --card: var(--night-card);
    --border: rgb(255 255 255 / .1);
    --border-strong: rgb(255 255 255 / .15);
    --chip: rgb(255 255 255 / .1);
    --chip-text: var(--slate-300);
    --accent: var(--brand-light);
    --solid-bg: #ffffff;
    --solid-fg: var(--night);
    --hero-bg: var(--night);
    --card-shadow-hover: 0 20px 25px -5px rgb(0 0 0 / .3), 0 8px 10px -6px rgb(0 0 0 / .3);
    --footer-bg: color-mix(in oklab, var(--night-card) 40%, transparent);
    --bar-bg: color-mix(in oklab, var(--night) 95%, transparent);
    --panel-from: color-mix(in oklab, var(--brand-light) 10%, transparent);
    --chip-soft: rgb(255 255 255 / .1);
    --line-1: rgb(255 255 255 / .12);
    --line-2: rgb(255 255 255 / .06);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --page: var(--night);
  --text: var(--slate-100);
  --text-2: var(--slate-400);
  --muted: var(--slate-400);
  --card: var(--night-card);
  --border: rgb(255 255 255 / .1);
  --border-strong: rgb(255 255 255 / .15);
  --chip: rgb(255 255 255 / .1);
  --chip-text: var(--slate-300);
  --accent: var(--brand-light);
  --solid-bg: #ffffff;
  --solid-fg: var(--night);
  --hero-bg: var(--night);
  --card-shadow-hover: 0 20px 25px -5px rgb(0 0 0 / .3), 0 8px 10px -6px rgb(0 0 0 / .3);
  --footer-bg: color-mix(in oklab, var(--night-card) 40%, transparent);
  --bar-bg: color-mix(in oklab, var(--night) 95%, transparent);
  --panel-from: color-mix(in oklab, var(--brand-light) 10%, transparent);
  --chip-soft: rgb(255 255 255 / .1);
  --line-1: rgb(255 255 255 / .12);
  --line-2: rgb(255 255 255 / .06);
  color-scheme: dark;
}

/* Pastelne pločice za ikone (BalkTalk "Šta te čeka" kartice) */
.t-amber   { --l-bg: var(--amber-100);   --l-fg: var(--amber-700);   --d-bg: color-mix(in oklab, var(--amber-400) 15%, transparent);   --d-fg: var(--amber-300); }
.t-sky     { --l-bg: var(--sky-100);     --l-fg: var(--sky-700);     --d-bg: color-mix(in oklab, var(--sky-400) 15%, transparent);     --d-fg: var(--sky-300); }
.t-rose    { --l-bg: var(--rose-100);    --l-fg: var(--rose-600);    --d-bg: color-mix(in oklab, var(--rose-400) 15%, transparent);    --d-fg: var(--rose-300); }
.t-emerald { --l-bg: var(--emerald-100); --l-fg: var(--emerald-700); --d-bg: color-mix(in oklab, var(--emerald-400) 15%, transparent); --d-fg: var(--emerald-300); }
.t-violet  { --l-bg: var(--violet-100);  --l-fg: var(--violet-700);  --d-bg: color-mix(in oklab, var(--violet-400) 15%, transparent);  --d-fg: var(--violet-300); }
.t-orange  { --l-bg: var(--orange-100);  --l-fg: var(--orange-700);  --d-bg: color-mix(in oklab, var(--orange-400) 15%, transparent);  --d-fg: var(--orange-300); }
.status-live, .pill.ok { --l-bg: var(--emerald-100); --l-fg: var(--emerald-700); --d-bg: color-mix(in oklab, var(--emerald-400) 15%, transparent); --d-fg: var(--emerald-300); }

.tile, .ma-thumb, .status-live, .pill.ok { background: var(--l-bg); color: var(--l-fg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.tile, .ma-thumb, .status-live, .pill.ok) { background: var(--d-bg); color: var(--d-fg); }
}
:root[data-theme="dark"] :is(.tile, .ma-thumb, .status-live, .pill.ok) { background: var(--d-bg); color: var(--d-fg); }

/* ---------- Osnova ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.025em;
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; }
svg { display: block; }

:focus-visible {
  outline: 2px solid var(--brand-light);
  outline-offset: 2px;
  border-radius: .5rem;
}

/* Dvojezičnost: prikazuje se samo aktivni jezik */
html[data-lang="bs"] body [lang="en"],
html[data-lang="en"] body [lang="bs"] { display: none !important; }

.container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.i {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: .625rem 1rem;
  border-radius: .75rem;
  background: var(--signup);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Dugmad ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: 1rem;
  font: 500 1rem/1.5rem var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn .i { width: 1.125rem; height: 1.125rem; }

.btn-signup {
  padding-inline: 1.75rem;
  background: var(--signup);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 15px -3px rgb(30 110 63 / .3), 0 4px 6px -4px rgb(30 110 63 / .3);
}
.btn-signup:hover { background: var(--signup-hover); transform: translateY(-.125rem); }

.btn-outline {
  border: 1px solid rgb(255 255 255 / .25);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn-outline:hover { background: rgb(255 255 255 / .1); }

.btn-glass {
  background: rgb(255 255 255 / .1);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn-glass:hover { background: rgb(255 255 255 / .2); }

.btn-small {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1rem;
  border-radius: .75rem;
  background: var(--solid-bg);
  color: var(--solid-fg);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s var(--ease), opacity .15s var(--ease);
}
.btn-small .i { width: 1rem; height: 1rem; }
.btn-small:hover { transform: translateY(-.125rem); opacity: .9; }

/* ---------- Zaglavlje ---------- */
.site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 30;
  color: #fff;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-block: 1rem;
}

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .625rem;
  color: inherit;
  text-decoration: none;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .875rem;
  background: linear-gradient(135deg, var(--brand-light), var(--brand-deep));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2), 0 4px 12px -4px rgb(0 0 0 / .4);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
}
.brand-name {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.025em;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.nav-links {
  display: none;
  align-items: center;
  gap: .25rem;
  margin-right: .25rem;
  font-size: .875rem;
  font-weight: 500;
}
.nav-links a {
  padding: .5rem .75rem;
  border-radius: .5rem;
  color: rgb(255 255 255 / .8);
  text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav-links a:hover { background: rgb(255 255 255 / .1); color: #fff; }

.lang-switch {
  display: inline-flex;
  padding: .1875rem;
  border-radius: .625rem;
  background: rgb(255 255 255 / .1);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .15);
}
.lang-switch button {
  padding: .3125rem .5rem;
  border: 0;
  border-radius: .4375rem;
  background: transparent;
  color: rgb(255 255 255 / .7);
  font: 600 .75rem/1 var(--font-sans);
  letter-spacing: .025em;
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.lang-switch button:hover { color: #fff; }
.lang-switch button[aria-pressed="true"] { background: #fff; color: var(--hero); }

.nav-icon {
  display: inline-grid;
  place-items: center;
  padding: .5rem;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: rgb(255 255 255 / .8);
  cursor: pointer;
  transition: background-color .15s var(--ease);
}
.nav-icon:hover { background: rgb(255 255 255 / .1); color: #fff; }

.icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }

.nav-cta {
  display: none;
  padding: .5rem 1rem;
  border-radius: .5rem;
  background: var(--signup);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s var(--ease);
}
.nav-cta:hover { background: var(--signup-hover); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--hero-bg);
  color: #fff;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -10;
  background:
    radial-gradient(ellipse 60% 45% at 50% 38%, color-mix(in oklab, var(--brand) 40%, transparent), transparent 70%),
    radial-gradient(ellipse 35% 40% at 10% 72%, color-mix(in oklab, var(--brand-deep) 38%, transparent), transparent 70%),
    radial-gradient(ellipse 30% 35% at 90% 28%, color-mix(in oklab, var(--amber-400) 14%, transparent), transparent 70%),
    var(--hero-bg);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(255 255 255 / .09) 1px, transparent 1.5px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 25%, transparent 75%);
}
.hero-fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: -10;
  height: 12rem;
  background: linear-gradient(to top, var(--hero-bg), transparent);
}

.hero-floats {
  position: absolute;
  inset: 0;
  z-index: -5;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.hero-inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
  padding: 6rem 1rem 2rem;
  text-align: center;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .375rem 1rem .375rem .375rem;
  border: 1px solid rgb(255 255 255 / .15);
  border-radius: 999px;
  background: rgb(255 255 255 / .1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: .875rem;
}
.hero-pill strong { color: var(--amber-300); font-weight: 600; }

.pill-stack { display: flex; }
.pill-stack > span {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 0 0 2px var(--hero-bg);
  color: #fff;
  font: 700 .5625rem/1 var(--font-mono);
}
.pill-stack > span + span { margin-left: -.5rem; }
.pill-stack > .c-amber { color: var(--ink); }

.hero h1 {
  margin-top: 1.75rem;
  font-size: 2.25rem;
  line-height: 1.05;
}

.hero-sub {
  max-width: 42rem;
  margin: 1.5rem auto 0;
  color: rgb(255 255 255 / .75);
  font-size: 1.125rem;
  line-height: 1.75rem;
  text-wrap: pretty;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 2rem;
}

.hero-note {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  color: rgb(255 255 255 / .55);
  font-size: .875rem;
}
.hero-note .i { width: 1rem; height: 1rem; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: 33rem;
  margin: 2rem 0 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: 1rem;
  background: rgb(255 255 255 / .06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.hero-stats > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: .75rem .5rem;
  text-align: center;
}
.hero-stats > div + div { border-left: 1px solid rgb(255 255 255 / .1); }
.hero-stats dt {
  color: rgb(255 255 255 / .55);
  font-size: .625rem;
  line-height: 1.25;
  letter-spacing: .025em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero-stats dd {
  margin: .25rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Plutajući krugovi i emoji (BalkTalk animacije) */
.bubble-float {
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 0 0 2px rgb(255 255 255 / .8), 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .5);
  color: #fff;
  font: 700 calc(var(--s) * .3)/1 var(--font-mono);
  text-shadow: 0 1px 2px rgb(0 0 0 / .25);
}
.bubble-float.c-amber { color: var(--ink); text-shadow: none; }

.emoji-float {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: clamp(16px, 1.5vw, 24px);
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / .6));
}

.c-brand   { --c1: var(--brand-light); --c2: var(--brand-deep); }
.c-violet  { --c1: var(--violet-400);  --c2: var(--violet-700); }
.c-sky     { --c1: var(--sky-400);     --c2: var(--sky-700); }
.c-emerald { --c1: var(--emerald-400); --c2: var(--emerald-700); }
.c-amber   { --c1: var(--amber-300);   --c2: var(--amber-500); }
.c-rose    { --c1: var(--rose-400);    --c2: var(--rose-600); }
.c-orange  { --c1: var(--orange-400);  --c2: var(--orange-700); }

.hero-floats > .home-float { display: none; }
.hero-floats > .mobile-only { display: grid; }

@keyframes home-pop { 0% { opacity: 0; scale: .6; } }
@keyframes home-float {
  0%, 100% { translate: 0; }
  33% { translate: 6px -10px; }
  66% { translate: -5px 6px; }
}
@keyframes radio-live { 50% { opacity: .25; } }

.home-float {
  animation:
    home-pop .7s cubic-bezier(.34, 1.56, .64, 1) var(--pop-delay, 0s) both,
    home-float var(--float, 9s) ease-in-out var(--pop-delay, 0s) infinite;
}

.live-dot {
  display: inline-block;
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--emerald-400);
  animation: radio-live 1.6s ease-in-out infinite;
}

/* ---------- Sekcije ---------- */
.section { padding-top: 4rem; scroll-margin-top: 1rem; }
.section-last { padding-bottom: 2.5rem; }

.section-head {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}
.section-head h2 { font-size: 1.875rem; line-height: 2.25rem; }
.section-head p {
  margin-top: .75rem;
  color: var(--text-2);
  font-size: 1.125rem;
  line-height: 1.75rem;
}

/* Kartice (kao "Šta te čeka" na BalkTalku) */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  box-shadow: var(--card-shadow);
}
.feature, .project {
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.feature:hover, .project:hover {
  transform: translateY(-.25rem);
  box-shadow: var(--card-shadow-hover);
}

.tile {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
}
.tile .i { width: 1.5rem; height: 1.5rem; }

/* O meni */
.about-layout {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}

.about-card { padding: 1.5rem; }
.about-id {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.about-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-light), var(--brand-deep));
  box-shadow: 0 0 0 4px var(--bubble), 0 10px 15px -3px rgb(15 23 42 / .15);
  color: #fff;
  font-size: 1.75rem;
  font-weight: 800;
}
:root[data-theme="dark"] .about-avatar { box-shadow: 0 0 0 4px var(--bubble-dark), 0 10px 15px -3px rgb(0 0 0 / .4); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .about-avatar { box-shadow: 0 0 0 4px var(--bubble-dark), 0 10px 15px -3px rgb(0 0 0 / .4); }
}
.about-id h3 { font-size: 1.25rem; }
.about-role { margin-top: .125rem; color: var(--muted); font-size: .875rem; }
.about-card p:not(.about-role) {
  margin-top: .875rem;
  color: var(--text-2);
  line-height: 1.625;
}
.about-card .about-id + p,
.about-card .about-id + p + p {
  margin-top: 0;
  color: var(--text);
  font-size: 1.125rem;
  line-height: 1.6;
}

.services { display: grid; gap: 1rem; }
.feature {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
}
.feature h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.4;
}
.feature p {
  margin-top: .25rem;
  color: var(--text-2);
  line-height: 1.625;
}

/* Projekti */
.projects {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}

.project {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.project-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 19rem;
  padding: 2rem 1.5rem;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.pv-night {
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in oklab, var(--brand) 38%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 40% at 90% 90%, color-mix(in oklab, var(--amber-400) 12%, transparent), transparent 70%),
    var(--hero);
}
.pv-soft {
  background:
    linear-gradient(to bottom right, var(--panel-from), transparent 55%, color-mix(in oklab, var(--amber-400) 10%, transparent)),
    var(--card);
}

.project-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.5rem;
}
.project-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3125rem .75rem;
  border-radius: 999px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: .75rem;
  font-weight: 600;
}
.status.status-live { background: var(--l-bg); color: var(--l-fg); }
.status .i { width: .875rem; height: .875rem; }
.status-live .live-dot { background: currentColor; }

.project h3 {
  margin-top: 1.25rem;
  font-size: 1.5rem;
  line-height: 2rem;
}
.project-meta { margin-top: .125rem; color: var(--muted); font-size: .875rem; }
.project-desc {
  margin-top: 1rem;
  color: var(--text-2);
  line-height: 1.625;
}

.checks {
  display: grid;
  gap: .5rem 1rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
}
.checks li {
  position: relative;
  padding-left: 1.75rem;
  line-height: 1.5;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .125rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--emerald-100);
}
.checks li::after {
  content: "";
  position: absolute;
  left: .3125rem;
  top: .4375rem;
  width: .625rem;
  height: .625rem;
  background: var(--emerald-700);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-theme="dark"] .checks li::before { background: color-mix(in oklab, var(--emerald-400) 15%, transparent); }
:root[data-theme="dark"] .checks li::after { background: var(--emerald-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .checks li::before { background: color-mix(in oklab, var(--emerald-400) 15%, transparent); }
  :root:not([data-theme="light"]) .checks li::after { background: var(--emerald-300); }
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.tags li {
  padding: .25rem .625rem;
  border-radius: 999px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: .75rem;
  font-weight: 500;
}

.project-actions {
  margin-top: auto;
  padding-top: 1.5rem;
}

/* Maketa: BalkTalk chat (uvijek u "night" izdanju) */
.mock {
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .5);
  font-size: .8125rem;
  line-height: 1.4;
  overflow: hidden;
}
.mock-stack {
  position: relative;
  width: min(100%, 21rem);
}
.mock-chat {
  background: var(--night-card);
  border: 1px solid rgb(255 255 255 / .1);
  color: var(--slate-100);
}
.mc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgb(255 255 255 / .1);
}
.mc-room { font-weight: 600; }
.mc-online {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: var(--slate-400);
  font-size: .75rem;
}
.mc-msgs {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: 1rem;
}
.msg {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  max-width: 88%;
}
.msg.me { align-self: flex-end; }
.av {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  font-size: .6875rem;
  font-weight: 700;
}
.av-rose { background: color-mix(in oklab, var(--rose-400) 20%, transparent); color: var(--rose-300); }
.av-sky  { background: color-mix(in oklab, var(--sky-400) 20%, transparent);  color: var(--sky-300); }
.bubble {
  padding: .5rem .75rem;
  border-radius: 1rem 1rem 1rem .25rem;
  background: var(--bubble-dark);
}
.bubble b {
  display: block;
  margin-bottom: .125rem;
  color: var(--slate-400);
  font-size: .6875rem;
  font-weight: 500;
}
.msg.me .bubble {
  border-radius: 1rem 1rem .25rem 1rem;
  background: var(--brand);
  color: #fff;
}
.mc-event {
  align-self: center;
  padding: .3125rem .75rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .08);
  color: var(--slate-300);
  font-size: .6875rem;
  font-weight: 500;
}
.mc-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 .75rem .75rem;
  padding: .375rem .375rem .375rem .875rem;
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: .75rem;
  background: rgb(255 255 255 / .04);
  color: var(--slate-500);
}
.mc-input .send {
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: .5rem;
  background: var(--signup);
  color: #fff;
}
.mc-input .send .i { width: .875rem; height: .875rem; }

.mc-float {
  position: absolute;
  top: 3.25rem;
  right: -1.75rem;
  display: grid;
  gap: .25rem;
  width: 9.5rem;
  padding: .75rem .875rem;
  border: 1px solid rgb(255 255 255 / .12);
  background: var(--night-card);
  color: #fff;
  transform: rotate(3deg);
  animation:
    home-pop .7s cubic-bezier(.34, 1.56, .64, 1) .5s both,
    home-float 9s ease-in-out .5s infinite;
}
.mc-float-label {
  color: var(--amber-300);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.mc-float b { font-size: .8125rem; }
.mc-bar {
  height: .3125rem;
  margin-top: .25rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / .1);
}
.mc-bar i {
  display: block;
  width: 30%;
  height: 100%;
  border-radius: inherit;
  background: var(--amber-400);
}

/* Maketa: Filament admin (prati temu) */
.mock-admin {
  width: min(100%, 27rem);
  background: var(--card);
  border: 1px solid var(--border-strong);
  box-shadow: 0 20px 25px -5px rgb(15 23 42 / .1), 0 8px 10px -6px rgb(15 23 42 / .1);
}
.ma-bar {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .625rem .875rem;
  border-bottom: 1px solid var(--border);
  background: var(--chip);
}
.ma-bar i {
  width: .5625rem;
  height: .5625rem;
  border-radius: 50%;
  background: var(--line-1);
}
.ma-url {
  flex: 1;
  margin-left: .625rem;
  padding: .375rem .625rem;
  border-radius: .5rem;
  background: var(--card);
  color: var(--muted);
  font: 400 .6875rem/1 var(--font-mono);
}
.ma-body {
  display: grid;
  grid-template-columns: 7rem 1fr;
  min-height: 15rem;
}
.ma-side {
  display: flex;
  flex-direction: column;
  gap: .1875rem;
  padding: .875rem .625rem;
  border-right: 1px solid var(--border);
  font-size: .75rem;
}
.ma-side > span {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .5625rem;
  border-radius: .5rem;
  color: var(--muted);
}
.ma-side > span::before {
  content: "";
  flex: none;
  width: .6875rem;
  height: .6875rem;
  border: 1.5px solid currentColor;
  border-radius: .1875rem;
  opacity: .7;
}
.ma-side > .on {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.ma-main { padding: .875rem 1rem; }
.ma-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .625rem;
}
.ma-top b { font-size: .9375rem; }
.ma-btn {
  padding: .375rem .625rem;
  border-radius: .5rem;
  background: var(--signup);
  color: #fff;
  font-size: .6875rem;
  font-weight: 600;
}
.ma-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem 0;
  border-top: 1px solid var(--border);
}
.ma-thumb {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: .5rem;
}
.ma-lines {
  display: grid;
  flex: 1;
  gap: .3125rem;
}
.ma-lines i {
  display: block;
  height: .4375rem;
  border-radius: 999px;
  background: var(--line-1);
}
.ma-lines i + i { width: 48%; background: var(--line-2); }
.pill {
  flex: none;
  padding: .25rem .5rem;
  border-radius: 999px;
  font-size: .625rem;
  font-weight: 600;
}
.pill.draft { background: var(--chip); color: var(--chip-text); }

/* Vještine (kao "Sigurno druženje" panel) */
.skills-panel {
  padding: 1.5rem;
  border-radius: 1.5rem;
  background: linear-gradient(to bottom right, var(--panel-from), transparent, color-mix(in oklab, var(--amber-400) 10%, transparent));
  box-shadow: inset 0 0 0 1px var(--border);
  text-align: center;
}
.skills-panel h2 { font-size: 1.5rem; line-height: 2rem; }
.skills-sub { margin-top: .5rem; color: var(--text-2); }
.skills-grid {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}
.skill {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tile-white {
  background: var(--card);
  color: var(--accent);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05), inset 0 0 0 1px var(--border);
}
.skill h3 {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  max-width: 20rem;
  margin: .875rem 0 0;
  padding: 0;
  list-style: none;
}
.chips li {
  padding: .375rem .75rem;
  border-radius: 999px;
  background: var(--chip-soft);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--chip-text);
  font-size: .875rem;
  font-weight: 500;
}

/* Kontakt (kao završni CTA na BalkTalku) */
.cta-box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 4rem 1.5rem;
  border-radius: 1.5rem;
  background: var(--hero);
  color: #fff;
  text-align: center;
}
.cta-bg {
  position: absolute;
  inset: 0;
  z-index: -10;
  background:
    linear-gradient(to top, var(--hero), color-mix(in oklab, var(--hero) 70%, transparent), color-mix(in oklab, var(--hero) 40%, transparent)),
    radial-gradient(ellipse 50% 70% at 20% 10%, color-mix(in oklab, var(--brand) 55%, transparent), transparent 70%),
    radial-gradient(ellipse 45% 60% at 85% 20%, color-mix(in oklab, var(--amber-400) 22%, transparent), transparent 70%),
    var(--hero);
}
.cta-box h2 {
  max-width: 42rem;
  margin-inline: auto;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.cta-box > p:not(.cta-mail) {
  max-width: 36rem;
  margin: .75rem auto 0;
  color: rgb(255 255 255 / .7);
}
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 2rem;
}
.cta-actions .btn { width: 100%; }
.cta-mail {
  margin-top: 1.25rem;
  color: rgb(255 255 255 / .55);
  font-size: .875rem;
}
.copy-done { display: none; }
.copy-btn-done .copy-label { display: none; }
.copy-btn-done .copy-done { display: inline; color: var(--emerald-300); }

/* Donja traka na mobilnom */
.mobile-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: .5rem;
  padding: .75rem;
  padding-bottom: max(.75rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-strong);
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mobile-bar a {
  padding: .75rem;
  border-radius: .75rem;
  text-align: center;
  text-decoration: none;
}
.mb-secondary {
  flex: 1;
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-weight: 500;
}
.mb-primary {
  flex: 1.6;
  background: var(--signup);
  color: #fff;
  font-weight: 600;
  transition: background-color .15s var(--ease);
}
.mb-primary:hover { background: var(--signup-hover); }

/* ---------- Podnožje ---------- */
.site-footer {
  margin-top: 0;
  padding-bottom: 6rem;
  border-top: 1px solid var(--border);
  background: var(--footer-bg);
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  padding-block: 3rem;
}
.footer-about { max-width: 24rem; }
.footer-about .brand { color: var(--text); }
.footer-about p {
  margin-top: 1rem;
  color: var(--text-2);
  font-size: .875rem;
  line-height: 1.625;
}
.footer-about .footer-small {
  margin-top: .75rem;
  color: var(--muted);
  font-size: .75rem;
}
.footer-title {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: normal;
}
.footer-links {
  display: grid;
  gap: .625rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .875rem;
}
.footer-links a {
  color: var(--text-2);
  text-decoration: none;
  transition: color .15s var(--ease);
}
.footer-links a:hover { color: var(--text); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding-block: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .75rem;
}
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--text); }

/* ---------- Responzivnost (Tailwind prijelomi) ---------- */
@media (min-width: 640px) {
  .nav-right { gap: .5rem; }
  .nav-cta { display: inline-block; }
  .hero { min-height: 92svh; }
  .hero-inner { padding: 7rem 1rem 2.5rem; }
  .hero h1 { font-size: 3.75rem; }
  .hero-sub { font-size: 1.25rem; }
  .hero-cta { margin-top: 2.5rem; }
  .hero-stats { margin-top: 3rem; }
  .hero-stats > div { padding: 1rem; }
  .hero-stats dt { font-size: .75rem; }
  .hero-stats dd { font-size: 1.5rem; }
  .section { padding-top: 6rem; }
  .section-head h2 { font-size: 2.25rem; line-height: 2.5rem; }
  .about-card { padding: 2rem; }
  .feature { padding: 1.5rem; }
  .project-body { padding: 2rem; }
  .checks { grid-template-columns: 1fr 1fr; }
  .skills-panel { padding: 2.5rem; }
  .skills-panel h2 { font-size: 1.875rem; line-height: 2.25rem; }
  .cta-box { padding: 4rem 3rem; }
  .cta-box h2 { font-size: 2.25rem; line-height: 2.5rem; }
  .cta-actions { flex-direction: row; }
  .cta-actions .btn { width: auto; }
  .mobile-bar { display: none; }
  .site-footer { padding-bottom: 0; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .nav-links { display: flex; }
  .skills-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}

@media (min-width: 1024px) {
  .hero h1 { font-size: 4.5rem; }
  .hero-floats > .home-float { display: grid; }
  .hero-floats > .emoji-float { display: block; }
  .hero-floats > .mobile-only { display: none; }
  .about-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
}

@media (max-width: 1279px) {
  .hero-floats > .xl-only { display: none !important; }
}

@media (max-width: 479px) {
  .mc-float { display: none; }
  .ma-body { grid-template-columns: 1fr; }
  .ma-side { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home-float, .live-dot, .mc-float { animation: none; }
}