@charset "UTF-8";
/* =====================================================================
   SHISHARKA GROOMING — app.css
   Tokeni, osnova, layout, komponente.
   Sadržaj:
     01  Tokeni (boje, tipografija, prostor, senke, motion)
     02  Reset i osnova
     03  Tipografija
     04  Layout (container, grid, sekcije)
     05  Dugmad
     06  Kartice (Offset Plate) i čipovi
     07  Signature elementi (šapa, bubble highlight, bubble hem)
     08  Header i navigacija
     09  Footer
     10  Forme
     11  Traka sa psom (dog band)
     12  Reveal na skrol
     13  Utility
   ===================================================================== */

/* ==================================================================
   01  TOKENI
   ================================================================== */
:root {
  /* --- brend: ravna violet, bez gradijenata --- */
  --brand-primary:    #5B4BF5;
  --brand-hover:      #4A38E0;
  --brand-active:     #3E2CC4;
  --brand-subtle:     #E9E5FE;
  --brand-subtle-ink: #3A2BB8;

  /* --- akcent: topla koralna, razbija monotoniju violet --- */
  --accent:       #F97A55;
  --accent-hover: #E8663F;
  --accent-soft:  #FFEDE4;
  --accent-ink:   #7A2E12;

  /* --- tekst --- */
  --ink-1: #17123A;
  --ink-2: #4B4470;
  --ink-3: #6F6890;

  /* --- površine --- */
  --surface-page:     #F4F2FC;
  --surface-card:     #FBFAFE;
  --surface-elevated: #FFFFFF;

  /* --- struktura --- */
  --border:        #E4DEF7;
  --border-strong: #CFC5EF;

  /* --- semantika --- */
  --success: #0F7A57;  --success-soft: #E3F6EE;
  --warn:    #B45309;  --warn-soft:    #FDF1E3;
  --danger:  #C42B45;  --danger-soft:  #FDECEF;

  --focus-ring: rgb(91 75 245 / 0.35);

  /* --- tipografija --- */
  --font-display: "Gabarito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-display-xl: clamp(2.75rem, 1.6rem + 5.2vw, 5.5rem);
  --t-display-l:  clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
  --t-display-m:  clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  --t-title-s:    clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --t-body-l:     clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-body-m:     1rem;
  --t-body-s:     0.9375rem;
  --t-caption:    0.8125rem;
  --t-eyebrow:    0.75rem;
  --t-numeral-xl: clamp(4rem, 2rem + 9vw, 9rem);

  --measure:         64ch;
  --measure-lead:    46ch;
  --measure-display: 18ch;

  /* --- prostor (baza 4px) --- */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px; --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px; --space-10: 128px; --space-11: 160px;

  --section-y: clamp(72px, 9vw, 144px);
  --gutter:    clamp(20px, 4vw, 48px);
  --container:      1240px;
  --container-wide: 1440px;
  --container-text: 720px;

  /* --- radijusi: meki, prate bubble logotip --- */
  --r-xs: 8px;   --r-sm: 12px;  --r-md: 18px;  --r-lg: 26px;
  --r-xl: 36px;  --r-2xl: 48px; --r-pill: 999px;

  /* --- senke: slojevite, u violet tonu, nikad crne --- */
  --shadow-1: 0 1px 2px rgb(38 26 96 / .06), 0 2px 6px rgb(38 26 96 / .05);
  --shadow-2: 0 2px 4px rgb(38 26 96 / .05), 0 8px 18px -4px rgb(38 26 96 / .10),
              0 20px 40px -12px rgb(38 26 96 / .10);
  --shadow-3: 0 3px 6px rgb(38 26 96 / .06), 0 14px 28px -6px rgb(38 26 96 / .12),
              0 34px 64px -16px rgb(38 26 96 / .16);
  --shadow-brand: 0 8px 20px -6px rgb(91 75 245 / .38), 0 18px 44px -18px rgb(91 75 245 / .30);
  --shadow-bevel: inset 0 1px 0 rgb(255 255 255 / .70);

  /* --- motion --- */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 520ms; --dur-5: 800ms;
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft:  cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.36, 0.64, 1);

  --header-h: 72px;
  --band-h:   88px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-primary: #8B7CFF;  --brand-hover: #A091FF;  --brand-active: #7565F0;
    --brand-subtle:  #241E4E;  --brand-subtle-ink: #CFC6FF;
    --accent: #FFA98A;         --accent-hover: #FFBDA3;
    --accent-soft: #3A241C;    --accent-ink: #FFD9C7;
    --ink-1: #F2EFFF;  --ink-2: #C4BDE6;  --ink-3: #928AB5;
    --surface-page: #0E0B20;  --surface-card: #171334;  --surface-elevated: #1F1A42;
    --border: #2E2760;  --border-strong: #453B85;
    --success: #4ED8A6; --success-soft: #10331F;
    --warn:    #F0B357; --warn-soft:    #3A2A12;
    --danger:  #FF8095; --danger-soft:  #3A1520;
    --focus-ring: rgb(139 124 255 / 0.45);

    --shadow-1: 0 1px 2px rgb(0 0 0 / .24), 0 2px 6px rgb(0 0 0 / .20);
    --shadow-2: 0 2px 4px rgb(0 0 0 / .20), 0 8px 18px -4px rgb(0 0 0 / .40),
                0 20px 40px -12px rgb(0 0 0 / .40);
    --shadow-3: 0 3px 6px rgb(0 0 0 / .24), 0 14px 28px -6px rgb(0 0 0 / .48),
                0 34px 64px -16px rgb(0 0 0 / .60);
    --shadow-bevel: inset 0 1px 0 rgb(255 255 255 / .06);

    color-scheme: dark;
  }
}

/* ==================================================================
   02  RESET I OSNOVA
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--t-body-m);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-hover); }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--brand-subtle); color: var(--brand-subtle-ink); }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-7) 0; }

/* preskoči na sadržaj */
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 200;
  background: var(--surface-elevated); color: var(--ink-1);
  padding: var(--space-3) var(--space-5); border-radius: var(--r-pill);
  box-shadow: var(--shadow-2); font-weight: 600;
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* ==================================================================
   03  TIPOGRAFIJA
   ================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-1);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
p { margin: 0 0 var(--space-4); text-wrap: pretty; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.h-xl { font-size: var(--t-display-xl); font-weight: 800; line-height: .98; letter-spacing: -.03em; }
.h-l  { font-size: var(--t-display-l);  font-weight: 700; line-height: 1.04; letter-spacing: -.022em; }
.h-m  { font-size: var(--t-display-m);  font-weight: 700; line-height: 1.15; letter-spacing: -.014em; }
.h-s  { font-size: var(--t-title-s); font-family: var(--font-body); font-weight: 600;
        line-height: 1.3; letter-spacing: -.006em; }

h1 { font-size: var(--t-display-xl); font-weight: 800; line-height: .98; letter-spacing: -.03em; }
h2 { font-size: var(--t-display-l);  font-weight: 700; line-height: 1.04; letter-spacing: -.022em; }
h3 { font-size: var(--t-display-m);  font-weight: 700; line-height: 1.15; letter-spacing: -.014em; }
h4 { font-size: var(--t-title-s); font-family: var(--font-body); font-weight: 600;
     line-height: 1.3; letter-spacing: -.006em; }

.lead {
  font-size: var(--t-body-l); line-height: 1.55; letter-spacing: -.002em;
  color: var(--ink-2); max-width: var(--measure-lead);
}
.body-s   { font-size: var(--t-body-s); line-height: 1.6; letter-spacing: .004em; }
.caption  { font-size: var(--t-caption); line-height: 1.45; letter-spacing: .01em;
            font-weight: 500; color: var(--ink-3); }
.eyebrow {
  font-size: var(--t-eyebrow); line-height: 1; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; color: var(--brand-primary);
  display: block; margin-bottom: var(--space-4);
}
.num { font-variant-numeric: tabular-nums; }
.ink-1 { color: var(--ink-1); }
.ink-3 { color: var(--ink-3); }

/* ==================================================================
   04  LAYOUT
   ================================================================== */
.container      { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }
.container-text { width: 100%; max-width: var(--container-text); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section--card  { background: var(--surface-card); }
.section--brand { background: var(--brand-primary); color: #fff; }
.section--brand h1, .section--brand h2, .section--brand h3 { color: #fff; }

.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); }
@media (max-width: 899px) { .grid12 { grid-template-columns: 1fr; } }

.stack   > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-7 > * + * { margin-top: var(--space-7); }

.row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.row--between { justify-content: space-between; }

/* zaglavlje sekcije: naslov levo, opis desno — ne centrirano */
.section-head {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-8); align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.section-head p { margin: 0; }
@media (max-width: 899px) { .section-head { grid-template-columns: 1fr; align-items: start; } }

/* ==================================================================
   05  DUGMAD
   ================================================================== */
.btn {
  --btn-bg: var(--brand-primary);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 52px; padding: 0 var(--space-6);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 0; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: var(--t-body-m); font-weight: 600;
  letter-spacing: -.006em; text-align: center; white-space: nowrap;
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}
.btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.btn:active { transform: translateY(0) scale(.985); transition-duration: var(--dur-1); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--brand-hover); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-brand); }
}

.btn--lg { min-height: 60px; padding: 0 var(--space-7); font-size: var(--t-body-l); }
.btn--sm { min-height: 42px; padding: 0 var(--space-5); font-size: var(--t-body-s); }
.btn--block { width: 100%; }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink-1);
  border: 1px solid var(--border-strong); box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { background: var(--brand-subtle); color: var(--brand-subtle-ink);
                      border-color: var(--brand-primary); box-shadow: none; transform: translateY(-2px); }
}

.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--ink-1); }
@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover { background: var(--accent-hover); color: var(--ink-1); }
}

/* na violet podlozi */
.btn--onbrand { --btn-bg: var(--surface-elevated); --btn-fg: var(--brand-primary); }
@media (hover: hover) and (pointer: fine) {
  .btn--onbrand:hover { background: var(--surface-elevated); color: var(--brand-hover);
                        box-shadow: 0 10px 30px -8px rgb(0 0 0 / .35); }
}

/* tekstualni link sa strelicom */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 600; color: var(--brand-primary); min-height: 44px;
}
.link-arrow svg { transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover svg { transform: translateX(4px); }
}

/* ==================================================================
   06  KARTICE (OFFSET PLATE) I ČIPOVI
   ================================================================== */
.plate { position: relative; isolation: isolate; border-radius: var(--r-lg); }
.plate::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--accent-soft);
  transform: translate(12px, 12px);
  transition: transform var(--dur-2) var(--ease-out);
}
.plate--brand::before { background: var(--brand-subtle); }

.card {
  background: var(--surface-elevated);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: clamp(24px, 3vw, 40px);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .plate:hover::before { transform: translate(6px, 6px); }
  .plate:hover > .card { transform: translateY(-4px); box-shadow: var(--shadow-3); }
  .plate:hover .card__title { color: var(--brand-primary); }
}
.card__title { margin: 0 0 var(--space-3); transition: color var(--dur-2) var(--ease-out); }
.card__foot {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); font-size: var(--t-body-s); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.icon-tile {
  width: 56px; height: 56px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--brand-subtle); color: var(--brand-primary);
  border-radius: var(--r-md); margin-bottom: var(--space-5);
}
.icon-tile svg { width: 30px; height: 30px; }
.icon-tile--accent { background: var(--accent-soft); color: var(--accent-ink); }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px var(--space-3); border-radius: var(--r-pill);
  background: var(--brand-subtle); color: var(--brand-subtle-ink);
  font-size: var(--t-caption); font-weight: 600; letter-spacing: .01em;
}
.chip--accent  { background: var(--accent-soft); color: var(--accent-ink); }
.chip--success { background: var(--success-soft); color: var(--success); }
.chip--warn    { background: var(--warn-soft); color: var(--warn); }
.chip--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--ink-2); }

/* ==================================================================
   07  SIGNATURE ELEMENTI
   ================================================================== */

/* --- 7.1 Šapa trag (samo linija, nikad ispunjena) --- */
.paw-trail {
  --paw-color: %235B4BF5;
  height: 24px; width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='24' viewBox='0 0 64 24'%3E%3Cg fill='none' stroke='%235B4BF5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' opacity='.28'%3E%3Cg transform='rotate(-8 16 12)'%3E%3Cpath d='M12.6 14.2c0-2.2 1.6-3.6 3.4-3.6s3.4 1.4 3.4 3.6c0 1.9-1.4 3.1-3.4 3.1s-3.4-1.2-3.4-3.1Z'/%3E%3Cellipse cx='11.4' cy='8.6' rx='1.5' ry='1.9'/%3E%3Cellipse cx='15' cy='6.6' rx='1.5' ry='2'/%3E%3Cellipse cx='18.8' cy='6.9' rx='1.5' ry='2'/%3E%3Cellipse cx='21.8' cy='9.4' rx='1.4' ry='1.8'/%3E%3C/g%3E%3Cg transform='rotate(6 46 13)'%3E%3Cpath d='M42.6 15.2c0-2.2 1.6-3.6 3.4-3.6s3.4 1.4 3.4 3.6c0 1.9-1.4 3.1-3.4 3.1s-3.4-1.2-3.4-3.1Z'/%3E%3Cellipse cx='41.4' cy='9.6' rx='1.5' ry='1.9'/%3E%3Cellipse cx='45' cy='7.6' rx='1.5' ry='2'/%3E%3Cellipse cx='48.8' cy='7.9' rx='1.5' ry='2'/%3E%3Cellipse cx='51.8' cy='10.4' rx='1.4' ry='1.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 64px 24px;
}
.paw-trail--wide { background-size: 92px 24px; }

/* šapa kao bullet u listama */
.paw-list { list-style: none; margin: 0; padding: 0; }
.paw-list li {
  position: relative; padding-left: 36px; margin-bottom: var(--space-4);
  max-width: var(--measure);
}
.paw-list li::before {
  content: ""; position: absolute; left: 0; top: .25em;
  width: 22px; height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B4BF5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.6 16.4c0-2.4 1.7-4 3.7-4s3.7 1.6 3.7 4c0 2.1-1.5 3.4-3.7 3.4s-3.7-1.3-3.7-3.4Z'/%3E%3Cellipse cx='7' cy='10' rx='1.7' ry='2.2'/%3E%3Cellipse cx='11' cy='7.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='15.2' cy='7.9' rx='1.7' ry='2.3'/%3E%3Cellipse cx='18.6' cy='10.8' rx='1.6' ry='2'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
  opacity: .55;
}

/* vodeni znak šape u margini sekcije */
.paw-watermark {
  position: absolute; width: 180px; height: 180px; pointer-events: none;
  opacity: .1; color: var(--brand-primary);
}
.paw-watermark svg { width: 100%; height: 100%; }
.paw-watermark--left  { left: calc(var(--gutter) * -.6); top: 12%; }
.paw-watermark--right { right: calc(var(--gutter) * -.5); bottom: 8%; transform: rotate(18deg); }
@media (max-width: 899px) { .paw-watermark { display: none; } }

/* --- 7.2 Bubble highlight (jedna reč po stranici) --- */
.bubble {
  position: relative; display: inline-block;
  padding: 0 .28em; padding-bottom: 4px;
  line-height: 1.1;
  background: var(--brand-subtle); color: var(--brand-subtle-ink);
  border-radius: var(--r-pill); font-style: normal;
}
.bubble__squiggle {
  position: absolute; left: 4%; right: 4%; bottom: -10px;
  width: 92%; height: 12px; overflow: visible; color: var(--brand-primary);
}
.bubble__squiggle path {
  fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
}
.is-drawn .bubble__squiggle path,
.reveal.is-in .bubble__squiggle path {
  animation: squiggle-draw 620ms var(--ease-out-soft) 180ms forwards;
}
@keyframes squiggle-draw { to { stroke-dashoffset: 0; } }

/* --- 7.3 Bubble hem (prelaz između sekcija, tri nejednaka luka) ---
   Koristi se kao SAMOSTALAN element IZMEĐU dve sekcije:
     <div class="hem-wrap" style="background:<boja gornje sekcije>">
       <svg class="hem" style="color:<boja donje sekcije>"> ... </svg>
     </div>
   Tako prelaz ne zavisi od paddinga sekcija.                          */
.hem-wrap { display: block; line-height: 0; overflow: hidden; }
.hem { display: block; width: 100%; height: 64px; margin-bottom: -1px; }
.hem--flip { transform: rotate(180deg); margin-bottom: 0; margin-top: -1px; }
.hem path { fill: currentColor; }
@media (max-width: 699px) { .hem { height: 40px; } }

/* --- 7.4 Prevelik redni broj --- */
.ordinal {
  font-family: var(--font-display); font-size: var(--t-numeral-xl);
  font-weight: 800; line-height: .85; letter-spacing: -.045em;
  color: transparent; -webkit-text-stroke: 2px var(--border-strong);
  pointer-events: none; user-select: none;
}

/* ==================================================================
   08  HEADER
   ================================================================== */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface-page); /* fallback za pretraživače bez color-mix */
  background: color-mix(in srgb, var(--surface-page) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out),
              background-color var(--dur-3) var(--ease-out);
}
@supports not (backdrop-filter: blur(4px)) { .header { background: var(--surface-page); } }
.header.is-stuck { border-bottom-color: var(--border); box-shadow: var(--shadow-1); }

.header__inner {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: var(--header-h);
}

/* logotip: SVG psi + bubble tekst */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--brand-primary); }
.logo:hover { color: var(--brand-primary); }
.logo__mark { width: 46px; height: 40px; flex: 0 0 auto; }
.logo__mark path, .logo__mark ellipse, .logo__mark circle { fill: currentColor; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__word {
  font-family: var(--font-display); font-weight: 800; font-size: 1.35rem;
  letter-spacing: -.01em; color: var(--brand-primary);
}
.logo__sub {
  font-size: .625rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 3px;
}
/* kada postoji prava slika logotipa */
.logo--image { gap: 0; }
.logo__img { height: 46px; width: auto; display: block; }
.footer .logo__img { height: 54px; }
@media (max-width: 599px) { .logo__img { height: 40px; } }

@media (hover: hover) and (pointer: fine) {
  .logo:hover .logo__mark { transform: translateY(-1px) rotate(-2deg); }
  .logo__mark { transition: transform var(--dur-2) var(--ease-overshoot); }
  .logo__img  { transition: transform var(--dur-2) var(--ease-overshoot); }
  .logo:hover .logo__img { transform: translateY(-1px) scale(1.02); }
}

.nav { margin-left: auto; display: flex; align-items: center; gap: var(--space-6); }
.nav__list { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative; display: inline-block; padding: var(--space-2) 0;
  color: var(--ink-2); font-weight: 500; font-size: var(--t-body-s);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--brand-primary); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--ink-1); }
  .nav__link:hover::after { transform: scaleX(1); }
}
.nav__link[aria-current="page"] { color: var(--ink-1); font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"]::before {
  content: ""; position: absolute; left: -18px; top: 50%; translate: 0 -50%;
  width: 13px; height: 13px; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B4BF5' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8.6 16.4c0-2.4 1.7-4 3.7-4s3.7 1.6 3.7 4c0 2.1-1.5 3.4-3.7 3.4s-3.7-1.3-3.7-3.4Z'/%3E%3Cellipse cx='7' cy='10' rx='1.7' ry='2.2'/%3E%3Cellipse cx='11' cy='7.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='15.2' cy='7.9' rx='1.7' ry='2.3'/%3E%3Cellipse cx='18.6' cy='10.8' rx='1.6' ry='2'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
}

.nav__cta { display: inline-flex; }

/* mobilni meni */
.nav-toggle {
  display: none; margin-left: auto;
  width: 48px; height: 48px; border: 1px solid var(--border-strong);
  background: var(--surface-elevated); border-radius: var(--r-md);
  align-items: center; justify-content: center; color: var(--ink-1);
}
.nav-toggle__bars { position: relative; width: 20px; height: 14px; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform var(--dur-3) var(--ease-out),
              opacity var(--dur-2) var(--ease-out), top var(--dur-3) var(--ease-out);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    margin: 0; padding: var(--space-6) var(--gutter) var(--space-8);
    flex-direction: column; align-items: stretch; gap: var(--space-2);
    background: var(--surface-elevated);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-3);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: var(--space-4) 0; font-size: var(--t-title-s);
    border-bottom: 1px solid var(--border);
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"]::before { left: auto; right: 0; }
  .nav__cta { margin-top: var(--space-5); }
  .nav__cta .btn { width: 100%; }
}

/* ==================================================================
   09  FOOTER
   ================================================================== */
.footer {
  background: var(--surface-elevated); border-top: 1px solid var(--border);
  padding-block: clamp(56px, 6vw, 88px) var(--space-6);
  margin-bottom: var(--band-h);
}
.footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
}
@media (max-width: 899px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .footer__grid { grid-template-columns: 1fr; } }

.footer h4 {
  font-family: var(--font-body); font-size: var(--t-caption); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--space-4);
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li + li { margin-top: var(--space-3); }
.footer__list a, .footer__list span { color: var(--ink-2); font-size: var(--t-body-s); }
.footer__list a:hover { color: var(--brand-primary); }

.footer__bottom {
  margin-top: clamp(40px, 5vw, 64px); padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
  align-items: center; justify-content: space-between;
  font-size: var(--t-caption); color: var(--ink-3);
}

.socials { display: flex; gap: var(--space-3); }
.social {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--surface-card);
  border: 1px solid var(--border); color: var(--ink-2);
  transition: background-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-overshoot);
}
.social svg { width: 21px; height: 21px; }
@media (hover: hover) and (pointer: fine) {
  .social:hover { background: var(--brand-subtle); color: var(--brand-primary); transform: rotate(-8deg); }
}

/* ==================================================================
   10  FORME
   ================================================================== */
.field { display: block; margin-bottom: var(--space-5); }
.field__label {
  display: block; margin-bottom: var(--space-2);
  font-size: var(--t-body-s); font-weight: 600; color: var(--ink-1);
}
.field__label .req { color: var(--accent); }
.field__hint { display: block; margin-top: var(--space-2); font-size: var(--t-caption); color: var(--ink-3); }

.input, .textarea, .select {
  width: 100%; min-height: 52px; padding: 14px var(--space-4);
  background: var(--surface-elevated); color: var(--ink-1);
  border: 1px solid var(--border); border-radius: 14px;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none; padding-right: var(--space-8); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F6890' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 18px;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  border-color: var(--brand-primary); outline: 3px solid var(--focus-ring); outline-offset: 2px;
}
.field.has-error .input, .field.has-error .textarea, .field.has-error .select { border-color: var(--danger); }

.field__error {
  display: none; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2); font-size: var(--t-body-s); font-weight: 500; color: var(--danger);
}
.field.has-error .field__error { display: flex; }
.field__error svg { width: 16px; height: 16px; flex: 0 0 auto; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-5); }
@media (max-width: 599px) { .form-grid { grid-template-columns: 1fr; } }

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

/* poruke */
.alert {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-5); border-radius: var(--r-md);
  font-size: var(--t-body-s); line-height: 1.6;
}
.alert svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; }
.alert--success { background: var(--success-soft); color: var(--success); }
.alert--danger  { background: var(--danger-soft);  color: var(--danger); }
.alert--warn    { background: var(--warn-soft);    color: var(--warn); }
.alert--info    { background: var(--brand-subtle); color: var(--brand-subtle-ink); }
.alert strong { display: block; color: inherit; font-family: var(--font-display); font-size: var(--t-title-s); }

/* spinner u dugmetu */
.btn__spinner {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid rgb(255 255 255 / .35); border-top-color: #fff;
  animation: spin .7s linear infinite; display: none;
}
.btn.is-loading .btn__spinner { display: block; }
.btn.is-loading { pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==================================================================
   11  TRAKA SA PSOM (dog band)
   ================================================================== */
.dogband {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: var(--band-h); pointer-events: none;
  /* namerno bez `paint`: ono bi odseklo drop-shadow ispod psa
     i uglove kada pas nagne glavu na vrhu stranice */
  contain: layout style;
}
.dogband__trail {
  position: absolute; left: 0; right: 0; top: 58px; height: 24px;
  opacity: .75;
}
.dogband__rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--border-strong);
}
.dogband__rule::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--progress, 0%); background: var(--brand-primary);
  transition: width 80ms linear;
}
.dogband__group {
  position: absolute; left: 0; bottom: 2px; width: 100%; height: calc(var(--band-h) - 2px);
}

/* --- loptica --- */
.dogband__ball {
  position: absolute; bottom: 14px; left: 0;
  width: var(--ball-size, 26px); height: var(--ball-size, 26px);
  border-radius: var(--r-pill); background: var(--accent);
  box-shadow: inset -3px -4px 0 rgb(0 0 0 / .14),
              0 3px 8px -2px rgb(38 26 96 / .35);
  will-change: transform;
}
.dogband__ball::before {
  content: ""; position: absolute; inset: 5px 4px auto 4px; height: 3px; border-radius: 3px;
  background: rgb(255 255 255 / .55);
}

/* senka loptice na podu — jača kad je loptica niža */
.dogband__shadow {
  position: absolute; bottom: 10px; left: 0;
  width: var(--ball-size, 26px); height: 6px; border-radius: 50%;
  background: rgb(38 26 96 / .22); filter: blur(2px);
  will-change: transform, opacity;
}

/* --- pas: sprite od 14 frejmova izvučenih iz GIF-a --- */
.dogband__dog {
  position: absolute; bottom: 6px; left: 0;
  width: var(--dog-w, 77px); height: var(--dog-h, 76px);
  /* putanju postavlja PHP kroz --dog-sprite (sa ?v= za keš) */
  background-image: var(--dog-sprite, url("../img/dog-run.png"));
  background-repeat: no-repeat;
  background-size: calc(var(--dog-w, 77px) * 14) var(--dog-h, 76px);
  background-position: 0 0;
  /* beli pas na svetloj podlozi treba definisanu ivicu */
  filter: drop-shadow(0 2px 3px rgb(38 26 96 / .28))
          drop-shadow(0 0 1px rgb(38 26 96 / .45));
  will-change: transform, background-position;
  transform-origin: 50% 90%;
}
/* Brend verzija: u footer.php promeni $dogSprite na dog-run-brand.png.
   Ova klasa samo prilagođava senku, jer brend pas nema belo telo. */
.dogband--brand .dogband__dog {
  filter: drop-shadow(0 3px 6px rgb(38 26 96 / .30));
}

@media (max-width: 767px) {
  :root { --band-h: 56px; }
  .dogband { --dog-w: 52px; --dog-h: 51px; --ball-size: 20px; }
  .dogband__trail { top: 26px; }
  .dogband__dog { bottom: 4px; }
  .dogband__ball { bottom: 9px; }
  .dogband__shadow { bottom: 6px; }
}

/* ==================================================================
   12  REVEAL NA SKROL
   ================================================================== */
.reveal { opacity: 0; transform: translateY(20px);
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

.reveal-h { opacity: 0; transform: translateY(24px);
  transition: opacity 620ms var(--ease-out-soft), transform 620ms var(--ease-out-soft); }
.reveal-h.is-in { opacity: 1; transform: none; }

.reveal-media { opacity: 0; transform: scale(1.04);
  transition: opacity 700ms var(--ease-out-soft), transform 700ms var(--ease-out-soft); }
.reveal-media.is-in { opacity: 1; transform: scale(1); }

.reveal-ord { opacity: 0; transform: translateX(-24px);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
  transition-delay: 60ms; }
.reveal-ord.is-in { opacity: 1; transform: none; }

/* ==================================================================
   13  UTILITY
   ================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.measure      { max-width: var(--measure); }
.measure-lead { max-width: var(--measure-lead); }
.no-wrap { white-space: nowrap; }
[hidden] { display: none !important; }

/* placeholder za fotografiju — jasno vidljivo šta treba zameniti */
.photo-ph {
  position: relative; display: grid; place-items: center;
  background: var(--brand-subtle); color: var(--brand-subtle-ink);
  border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 3 / 4;
  text-align: center; padding: var(--space-6);
}
.photo-ph::before {
  content: ""; position: absolute; inset: 10px; border: 2px dashed currentColor;
  opacity: .3; border-radius: calc(var(--r-xl) - 6px); pointer-events: none;
}
.photo-ph__label {
  font-size: var(--t-caption); font-weight: 600; letter-spacing: .04em;
  max-width: 22ch; position: relative; display: block;
}
.photo-ph__path {
  position: relative; display: block; margin-top: var(--space-2);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px; opacity: .6; word-break: break-all;
}
.photo-ph__icon { width: 40px; height: 40px; margin: 0 auto var(--space-3); opacity: .5; }

/* video u okviru se ponaša isto kao slika */
.media-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==================================================================
   REDUCED MOTION
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .reveal-h, .reveal-media, .reveal-ord { opacity: 1 !important; transform: none !important; }
  .bubble__squiggle path { stroke-dashoffset: 0 !important; }
  .dogband { height: 4px; }
  .dogband__dog, .dogband__ball, .dogband__shadow, .dogband__trail { display: none; }
  .footer { margin-bottom: 4px; }
}