:root{
    color-scheme: light;
    --white:#ffffff;
    --navy:#0b1e3d;
    --navy-soft:#1c3860;
    --navy-glow:#2f5fe0;
    --ink:#15181d;
    --stone:#6b6f76;
    --hairline:#e2e1db;
    --hairline-navy: rgba(11,30,61,0.16);
    /* "surface-2" = kontrastne (navy) sekcije - O nama, Međunarodno iskustvo, prijelaz prije CTA-a */
    --surface-2:#0b1e3d;
    --on-surface-2:#ffffff;
    --on-surface-2-muted: rgba(255,255,255,0.62);
    --on-surface-2-strong: rgba(255,255,255,0.85);
    --on-surface-2-eyebrow: rgba(255,255,255,0.75);
    --on-surface-2-eyebrow-line: rgba(255,255,255,0.6);
    --on-surface-2-hairline: rgba(255,255,255,0.15);
    --max: 1160px;
    --pad: clamp(24px, 5vw, 64px);
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --header-bg: rgba(255,255,255,0.78);
  }

  /* ---------- TAMNA TEMA (ručni toggle, ne prati automatski preglednik) ---------- */
  :root[data-theme="dark"]{
    color-scheme: dark;
    --white:#111418;
    --navy:#e5e4e2;
    --navy-soft:#f2f1ee;
    --navy-glow:#f5f4f0;
    --ink:#f5f5f0;
    --stone:#9da4ae;
    --hairline: rgba(255,255,255,0.10);
    --hairline-navy: rgba(229,228,226,0.25);
    --surface-2:#1b1f24;
    --on-surface-2:#f5f5f0;
    --on-surface-2-muted: rgba(245,245,240,0.62);
    --on-surface-2-strong: rgba(245,245,240,0.85);
    --on-surface-2-eyebrow: rgba(245,245,240,0.75);
    --on-surface-2-eyebrow-line: rgba(245,245,240,0.6);
    --on-surface-2-hairline: rgba(255,255,255,0.12);
    --header-bg: rgba(17,20,24,0.78);
  }
  :root[data-theme="dark"] body::after{ opacity:0.04; }
  body,
  .logo-item,
  .nav-cta,
  .btn-primary,
  .btn-secondary,
  .mobile-menu,
  .scroll-progress,
  .founder-mark img{
    transition:background-color .35s ease, color .35s ease, border-color .35s ease;
  }

  *{ box-sizing:border-box; }
  html{
    scroll-behavior:smooth;
    scrollbar-width:thin;
    scrollbar-color:var(--navy) var(--white);
  }
  body{
    margin:0;
    background:var(--white);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* flat, tanak, tamno plavi scrollbar (Webkit/Chromium) */
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:var(--white); }
  ::-webkit-scrollbar-thumb{ background:var(--navy); border-radius:0; }
  ::-webkit-scrollbar-thumb:hover{ background:var(--navy-soft); }

  /* suptilna grain/noise tekstura preko cijele stranice, čisto vizualna */
  body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:9999;
    pointer-events:none;
    opacity:0.025;
    mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* skip-link za pristupačnost */
  .skip-link{
    position:fixed;
    top:-60px;
    left:16px;
    background:var(--navy);
    color:var(--white);
    padding:12px 22px;
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    letter-spacing:0.03em;
    text-decoration:none;
    z-index:1000;
    transition:top .25s ease;
  }
  .skip-link:focus{ top:16px; }

  /* tanka scroll-progress traka, na tragu "route/via" motiva */
  .scroll-progress{
    position:fixed;
    top:0; left:0;
    height:2px;
    width:0%;
    background:var(--navy);
    z-index:998;
    pointer-events:none;
  }

  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:400;
    color:var(--navy);
    margin:0;
    letter-spacing:-0.01em;
  }

  a{ color:inherit; }
  ::selection{ background:var(--navy); color:var(--white); }

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--navy);
    outline-offset:4px;
  }

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--navy);
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:22px; height:1px;
    background:var(--navy);
    display:inline-block;
  }

  .wrap{
    max-width:var(--max);
    margin:0 auto;
    padding-left:var(--pad);
    padding-right:var(--pad);
  }

  .hairline{
    border-top:1px solid var(--hairline);
  }

  /* ---------- NAV ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    background:var(--header-bg);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid var(--hairline);
    padding-top:var(--safe-t);
  }
  .nav-inner{
    max-width:var(--max);
    margin:0 auto;
    padding:20px var(--pad);
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .wordmark{
    font-family:'Fraunces', serif;
    font-size:17px;
    letter-spacing:0.14em;
    color:var(--navy);
    text-decoration:none;
  }
  .wordmark img{
    height:26px;
    width:auto;
    display:block;
  }
  .wordmark .logo-dark{ display:none; }
  :root[data-theme="dark"] .wordmark .logo-light{ display:none; }
  :root[data-theme="dark"] .wordmark .logo-dark{ display:block; }
  .footer-inner .wordmark img{ height:20px; }
  .nav-links{
    display:flex;
    gap:36px;
    list-style:none;
    margin:0; padding:0;
  }
  .nav-links a{
    font-size:13px;
    letter-spacing:0.04em;
    text-decoration:none;
    color:var(--ink);
    position:relative;
    padding-bottom:3px;
  }
  .nav-links a::after{
    content:"";
    position:absolute; left:0; right:100%; bottom:0;
    height:1px; background:var(--navy);
    transition:right .35s cubic-bezier(.65,0,.35,1);
  }
  .nav-links a:hover::after{ right:0; }
  .nav-links a.is-active-section{ color:var(--navy); }
  .nav-links a.is-active-section::after{ right:0; }
  .nav-cta{
    font-size:13px;
    border:1px solid var(--navy);
    padding:9px 20px;
    text-decoration:none;
    color:var(--navy);
    transition:background .3s ease, color .3s ease;
    white-space:nowrap;
  }
  .nav-cta:hover{ background:var(--navy); color:var(--white); }
  /* WhatsApp gumbi - uvijek prava WhatsApp zelena, neovisno o svijetlom/tamnom modu */
  /* Bazno (uključivo mobilno): WhatsApp gumb uvijek zelen */
  .btn-whatsapp{
    background:#25d366 !important;
    border-color:#25d366 !important;
    color:#ffffff !important;
  }
  .btn-whatsapp:hover{
    background:#1ebe5b !important;
    border-color:#1ebe5b !important;
    color:#ffffff !important;
  }
  /* Desktop (pravi hover): default izgled kao normalan gumb, zeleno SAMO na hover */
  @media (hover:hover) and (pointer:fine){
    .nav-cta.btn-whatsapp{
      background:transparent !important;
      border-color:var(--navy) !important;
      color:var(--navy) !important;
    }
    .btn-primary.btn-whatsapp{
      background:var(--navy) !important;
      border-color:var(--navy) !important;
      color:var(--white) !important;
    }
    .btn-whatsapp:hover{
      background:#25d366 !important;
      border-color:#25d366 !important;
      color:#ffffff !important;
    }
  }
  .nav-mobile-hide{ display:flex; }
  @media (max-width:1000px){
    .nav-mobile-hide{ display:none; }
  }

  /* ---------- HAMBURGER / MOBILNI IZBORNIK ---------- */
  .menu-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:44px;
    height:44px;
    padding:0;
    background:none;
    border:none;
    cursor:pointer;
  }
  .menu-toggle span{
    display:block;
    width:22px;
    height:1px;
    background:var(--navy);
    transition:transform .35s cubic-bezier(.65,0,.35,1), opacity .25s ease;
  }
  .menu-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2){ opacity:0; }
  .menu-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  @media (max-width:1000px){
    .menu-toggle{ display:flex; }
  }

  .mobile-menu{
    position:fixed;
    inset:0;
    z-index:199;
    background:var(--white);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:calc(32px + var(--safe-t)) calc(var(--pad) + var(--safe-r)) calc(32px + var(--safe-b)) calc(var(--pad) + var(--safe-l));
    transform:translateY(-100%);
    transition:transform .45s cubic-bezier(.65,0,.35,1);
  }
  .mobile-menu.is-open{ transform:translateY(0); }
  .mobile-menu-top{
    position:absolute;
    top:0; left:0; right:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:calc(20px + var(--safe-t)) calc(var(--pad) + var(--safe-r)) 20px calc(var(--pad) + var(--safe-l));
  }
  .mobile-menu-top .wordmark img{ height:24px; }
  .menu-close{
    position:relative;
    width:44px;
    height:44px;
    padding:0;
    background:none;
    border:none;
    cursor:pointer;
    flex-shrink:0;
  }
  .menu-close span{
    position:absolute;
    top:50%; left:50%;
    width:22px;
    height:1px;
    background:var(--navy);
  }
  .menu-close span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
  .menu-close span:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg); }
  .mobile-menu ul{
    list-style:none;
    margin:0; padding:0;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:20px;
  }
  .mobile-menu ul a{
    font-family:'Fraunces', serif;
    font-size:clamp(22px, 6.5vw, 30px);
    color:var(--navy);
    text-decoration:none;
    text-align:right;
  }
  .mobile-menu-foot{
    margin-top:56px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:20px;
    width:100%;
  }
  .mobile-menu-foot .lang-switch{ font-size:14px; }
  .mobile-menu-foot .response-note{ margin-top:0; text-align:right; }
  .lang-switch-row{
    display:flex;
    align-items:center;
    gap:18px;
  }
  @media (min-width:1001px){
    .mobile-menu{ display:none; }
  }

  /* ---------- THEME TOGGLE (sunce/mjesec) ---------- */
  .theme-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    padding:0;
    background:none;
    border:none;
    cursor:pointer;
    color:var(--navy);
  }
  .theme-toggle svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.4;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .theme-toggle .icon-moon{ display:block; }
  .theme-toggle .icon-sun{ display:none; }
  :root[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
  :root[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }

  .lang-switch{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.05em;
  }
  .lang-switch a{
    text-decoration:none;
    color:var(--stone);
    padding:4px 2px;
  }
  .lang-switch a.is-active{
    color:var(--navy);
    border-bottom:1px solid var(--navy);
  }
  .lang-switch span{ color:var(--hairline); }

  /* ---------- HERO ---------- */
  .hero{
    padding-top:calc(160px + var(--pad) + var(--safe-t));
    padding-bottom:80px;
    position:relative;
  }
  @media (max-width:480px){
    .hero{ padding-top:calc(120px + var(--pad) + var(--safe-t)); padding-bottom:56px; }
    .hero-actions{ flex-direction:column; align-items:stretch; gap:18px; }
    .hero-actions .btn-primary{ text-align:center; }
    .hero-actions .btn-secondary{ text-align:center; }
    .hero .eyebrow{ font-size:9px; letter-spacing:0.08em; gap:6px; }
    .hero .eyebrow::before{ width:14px; }
  }
  @media (max-width:380px){
    .hero{ padding-top:calc(100px + var(--pad) + var(--safe-t)); }
    .hero h1{ font-size:clamp(32px, 9vw, 74px); }
  }
  .hero .eyebrow{ margin-bottom:28px; }
  .hero h1{
    font-size:clamp(38px, 6vw, 74px);
    line-height:1.06;
    max-width:16ch;
  }
  .hero h1 em{
    font-style:italic;
    color:var(--navy-soft);
  }
  /* stagger reveal po retku - hero je iznad fold-a pa animira odmah na load */
  .hero h1 .line{
    display:block;
    overflow:hidden;
    padding-bottom:0.2em;
    margin-bottom:-0.2em;
  }
  .hero h1 .line span{
    display:inline-block;
    opacity:0;
    transform:translateY(100%);
    animation:lineUp 1.15s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hero h1 .line:nth-child(1) span{ animation-delay:.35s; }
  .hero h1 .line:nth-child(2) span{ animation-delay:.58s; }
  .hero h1 .line:nth-child(3) span{ animation-delay:.81s; }
  @keyframes lineUp{ to{ opacity:1; transform:translateY(0); } }
  .hero-sub{
    margin-top:34px;
    max-width:46ch;
    font-size:clamp(16px,1.7vw,19px);
    line-height:1.7;
    color:var(--stone);
    font-weight:300;
  }
  .hero-actions{
    margin-top:44px;
    display:flex;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;
  }
  .btn-primary{
    background:var(--navy);
    color:var(--white);
    text-decoration:none;
    padding:16px 32px;
    font-size:14px;
    letter-spacing:0.03em;
    display:inline-block;
    transition:background .3s ease, transform .3s ease;
  }
  .btn-primary::after{
    content:"→";
    display:inline-block;
    margin-left:10px;
    transition:transform .3s cubic-bezier(.65,0,.35,1);
  }
  .btn-primary:hover{ background:var(--navy-soft); transform:scale(1.02); }
  .btn-primary:hover::after{ transform:translateX(4px); }
  @media (hover:hover) and (pointer:fine){
    .btn-primary{ transition:background .3s ease, transform .12s ease-out; }
  }
  @media (prefers-reduced-motion: reduce){
    .btn-primary:hover{ transform:none; }
    .btn-primary:hover::after{ transform:none; }
  }
  .btn-secondary{
    text-decoration:none;
    color:var(--navy);
    font-size:14px;
    letter-spacing:0.03em;
    border-bottom:1px solid var(--hairline-navy);
    padding-bottom:3px;
    transition:border-color .3s ease;
  }
  .btn-secondary:hover{ border-color:var(--navy); }

  /* route line signature */
  .route{
    margin-top:80px;
    width:100%;
    height:auto;
    display:block;
  }
  .route path{
    fill:none;
    stroke:url(#routeGradient);
    stroke-width:1;
    stroke-dasharray:1400;
    stroke-dashoffset:1400;
    animation:draw 2.6s cubic-bezier(.65,0,.35,1) forwards .3s;
  }
  .route stop.stop-navy{ stop-color:var(--navy); }
  .route stop.stop-glow{ stop-color:var(--navy-glow); }
  .route circle:not(.route-signal){
    fill:var(--navy);
    opacity:0;
    animation:fadein .6s ease forwards;
  }
  .route circle:nth-of-type(1){ animation-delay:.4s; }
  .route circle:nth-of-type(2){ animation-delay:1.5s; }
  .route circle:nth-of-type(3){ animation-delay:2.6s; }
  .route-signal{
    fill:var(--navy-glow);
    opacity:0;
    animation:signalFade 7s ease-in-out infinite;
    animation-delay:2.9s;
  }
  @keyframes signalFade{
    0%, 3%{ opacity:0; }
    8%, 90%{ opacity:1; }
    97%, 100%{ opacity:0; }
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }
  @keyframes fadein{ to{ opacity:1; } }

  @media (prefers-reduced-motion: reduce){
    .route path{ animation:none; stroke-dashoffset:0; }
    .route circle:not(.route-signal){ animation:none; opacity:1; }
    .route-signal{ display:none; }
    html{ scroll-behavior:auto; }
    .hero h1 .line span{ animation:none; opacity:1; transform:none; }
  }

  /* ---------- GENERIC SECTION ---------- */
  section{
    padding:120px 0;
  }
  .section-head{
    display:grid;
    grid-template-columns:1fr 1.6fr;
    gap:60px;
    margin-bottom:80px;
  }
  .section-head h2{
    font-size:clamp(30px, 4vw, 46px);
    line-height:1.15;
  }
  .section-head p{
    color:var(--stone);
    font-weight:300;
    font-size:17px;
    line-height:1.75;
    max-width:52ch;
  }
  @media (max-width:820px){
    .section-head{ grid-template-columns:1fr; gap:24px; }
  }

  /* ---------- O NAMA ---------- */
  .about-list{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:0;
    border-top:1px solid var(--hairline);
  }
  .about-list div{
    padding:28px 28px 28px 0;
    border-bottom:1px solid var(--hairline);
    font-family:'Fraunces', serif;
    font-size:19px;
    color:var(--navy);
    font-weight:400;
  }
  @media (max-width:820px){
    .about-list{ grid-template-columns:1fr; }
  }

  /* ---------- SERVICES ---------- */
  .service{
    border-top:1px solid var(--hairline);
    padding:56px 0;
    display:grid;
    grid-template-columns:120px 1fr 1fr;
    gap:40px;
    align-items:start;
    position:relative;
    transition:padding-left .4s cubic-bezier(.65,0,.35,1);
  }
  .service:last-child{ border-bottom:1px solid var(--hairline); }
  @media (hover:hover) and (pointer:fine){
    .service:hover{ padding-left:16px; }
  }
  .service .num{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:var(--stone);
    letter-spacing:0.06em;
    padding-top:6px;
  }
  .service h3{
    font-size:clamp(24px,2.6vw,32px);
    font-weight:400;
  }
  .service h3 span{
    display:block;
    font-family:'Inter', sans-serif;
    font-size:14px;
    color:var(--stone);
    font-weight:300;
    margin-top:10px;
    letter-spacing:0;
  }
  .service ul{
    list-style:none;
    margin:0; padding:0;
    color:var(--ink);
    font-size:15px;
    line-height:2.1;
    font-weight:300;
  }
  .service ul li{
    border-bottom:1px solid var(--hairline);
    padding-bottom:8px;
    margin-bottom:8px;
  }
  .service ul li:last-child{ border-bottom:none; }
  .service ul li a{
    text-decoration:none;
    color:inherit;
    display:inline-block;
    position:relative;
    transition:color .3s ease;
  }
  .service ul li a::after{
    content:"";
    position:absolute; left:0; right:100%; bottom:-1px;
    height:1px; background:var(--navy);
    transition:right .35s cubic-bezier(.65,0,.35,1);
  }
  .service ul li a:hover{ color:var(--navy); }
  .service ul li a:hover::after{ right:0; }
  @media (max-width:900px){
    .service{ grid-template-columns:1fr; gap:16px; }
    .service .num{ padding-top:0; }
  }

  /* ---------- INTERNATIONAL / STATS ---------- */
  .intl{
    background:var(--surface-2);
    color:var(--on-surface-2);
    padding:130px 0;
  }
  .intl h2{ color:var(--on-surface-2); }
  .intl .section-head p{ color:var(--on-surface-2-muted); }
  .intl .eyebrow{ color:var(--on-surface-2-eyebrow); }
  .intl .eyebrow::before{ background:var(--on-surface-2-eyebrow-line); }
  .intl .about-list{ border-top-color:var(--on-surface-2-hairline); }
  .intl .approach p{ color:var(--on-surface-2-muted); }
  .intl .about-list div{
    color:var(--on-surface-2);
    border-bottom-color:var(--on-surface-2-hairline);
  }

  .transition-navy{
    background:var(--surface-2);
    padding:100px 0;
  }
  .transition-navy p{
    color:var(--on-surface-2-strong);
  }

  .stat-route{
    width:100%;
    margin-top:40px;
  }
  .stats-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:var(--on-surface-2-hairline);
    margin-top:56px;
  }
  .stat{
    background:transparent;
    padding:44px 30px;
    text-align:left;
  }
  .stat .n{
    font-family:'Fraunces', serif;
    font-size:clamp(34px, 4vw, 50px);
    font-weight:400;
    color:var(--on-surface-2);
  }
  .stat .l{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--on-surface-2-muted);
    margin-top:14px;
  }
  @media (max-width:820px){
    .stats-grid{ grid-template-columns:repeat(2, 1fr); }
  }

  /* ---------- APPROACH ---------- */
  .approach{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
  }
  .approach h2{
    font-size:clamp(32px, 4.4vw, 52px);
    line-height:1.18;
  }
  .approach p{
    color:var(--stone);
    font-weight:300;
    font-size:17px;
    line-height:1.8;
    max-width:48ch;
  }
  @media (max-width:820px){
    .approach{ grid-template-columns:1fr; gap:36px; }
  }

  /* ---------- LOGO WALL / PARTNERI ---------- */
  .logo-wall{
    background:#ffffff;
    padding-top:100px;
    padding-bottom:100px;
  }
  .logo-wall .section-head{ margin-bottom:64px; }
  .logo-wall .eyebrow{ color:#0b1e3d; }
  .logo-wall .eyebrow::before{ background:#0b1e3d; }
  .logo-wall h2{ color:#0b1e3d; }
  .logo-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    grid-auto-rows:128px;
    gap:0;
  }
  .logo-item{
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    padding:8px 12px;
    min-width:0;
    background-color:#ffffff;
    transition:background .3s ease;
  }
  /* susjedne kockice koje "posuđujemo" za tekst fragmenta dok se hovera drugi logo (desktop only) */
  .logo-item.is-donor{
    background:var(--navy);
    pointer-events:none;
    cursor:default;
  }
  .logo-fragment{
    color:var(--white);
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px;
    line-height:1.55;
    letter-spacing:0.01em;
    text-align:center;
    padding:0 10px;
  }
  /* bounding box: svaki logo se skalira UNUTAR fiksne visine (object-fit:contain),
     bez obzira na vlastite dimenzije ili format (jpg, png, svg...).
     "wide" (default) = širi omjer, tipičan za većinu wordmark logotipa.
     "tall" / "square" dobivaju ~15% veću dopuštenu visinu da optički
     izgledaju jednako "teško" kao široki logotipi u istoj mreži. */
  .logo-item img,
  .logo-item .logo-ph{
    width:100%;
    height:96px;
    object-fit:contain;
    filter:none;
    opacity:1;
    transform:scale(var(--logo-scale, 1));
    transition:filter .4s ease, opacity .4s ease, transform .4s ease;
  }
  .logo-item[data-size="tall"] img,
  .logo-item[data-size="square"] img,
  .logo-item[data-size="tall"] .logo-ph,
  .logo-item[data-size="square"] .logo-ph{
    height:110px;
  }
  .logo-item:hover img{
    transform:scale(calc(var(--logo-scale, 1) * 1.1));
  }
  /* logotipi koji su izvorno bijeli/svijetli (logo_full_white: 1) —
     invertiraju se u crno da budu vidljivi na bijeloj pozadini stranice */
  .logo-item[data-white="1"] img{
    filter:invert(1) grayscale(100%);
    opacity:1;
    transform:scale(var(--logo-scale, 1));
  }
  .logo-item[data-white="1"]:hover img{
    filter:invert(1) grayscale(100%);
    opacity:1;
    transform:scale(calc(var(--logo-scale, 1) * 1.1));
  }
  /* placeholder mark za slomljene/neučitane slike (broken image fallback) */
  .logo-ph{
    color:var(--stone);
    opacity:0.5;
    transition:color .4s ease, opacity .4s ease;
  }
  .logo-item:hover .logo-ph{
    color:var(--navy);
    opacity:0.9;
  }
  /* poziv na suradnju za prazna mjesta u mreži ("Ovdje može biti Vaš logo") */
  .logo-cta{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px dashed var(--hairline-navy);
    color:var(--stone);
    text-align:center;
    padding:8px;
    transition:border-color .3s ease, color .3s ease;
  }
  .logo-cta-plus{
    font-family:'Fraunces', serif;
    font-size:22px;
    line-height:1;
    font-weight:300;
    color:inherit;
  }
  .logo-cta-text{
    font-family:'IBM Plex Mono', monospace;
    font-size:10px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    line-height:1.5;
    max-width:130px;
    color:inherit;
  }
  .logo-item--cta:hover .logo-cta{
    border-color:var(--navy);
    color:var(--navy);
  }
  /* Vidljivo samo ako je JavaScript isključen (inače JS grid preuzima prikaz) */
  .logo-fallback-heading{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--stone);
    margin:24px 0 12px;
  }
  .logo-fallback-list{
    list-style:none;
    margin:0; padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:10px 24px;
  }
  .logo-fallback-list a{
    color:var(--navy);
    font-size:14px;
    text-decoration:underline;
    text-underline-offset:3px;
  }
  @media (max-width:820px){
    .logo-grid{ grid-template-columns:repeat(4, 1fr); grid-auto-rows:112px; }
    .logo-item{ padding:8px 10px; }
    .logo-item img, .logo-item .logo-ph{ height:83px; }
    .logo-item[data-size="tall"] img,
    .logo-item[data-size="square"] img,
    .logo-item[data-size="tall"] .logo-ph,
    .logo-item[data-size="square"] .logo-ph{ height:95px; }
    .logo-cta-text{ font-size:9px; max-width:110px; }
  }
  @media (max-width:520px){
    .logo-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:100px; }
    .logo-item{ padding:8px 8px; }
    .logo-item img, .logo-item .logo-ph{ height:72px; }
    .logo-item[data-size="tall"] img,
    .logo-item[data-size="square"] img,
    .logo-item[data-size="tall"] .logo-ph,
    .logo-item[data-size="square"] .logo-ph{ height:82px; }
    .logo-cta-plus{ font-size:18px; }
    .logo-cta-text{ font-size:8.5px; max-width:100px; }
  }


  /* ---------- FOUNDER ---------- */
  .founder{
    border-top:1px solid var(--hairline);
    display:grid;
    grid-template-columns:0.9fr 1.3fr;
    gap:70px;
    padding-top:110px;
    padding-bottom:60px;
  }
  .founder-mark{
    aspect-ratio:4/5;
    border:1px solid var(--hairline-navy);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
  }
  .founder-mark img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
  }
  .founder h3{
    font-size:clamp(28px,3.2vw,38px);
  }
  .founder .role{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--stone);
    margin-top:14px;
  }
  .founder p.bio{
    margin-top:28px;
    color:var(--stone);
    font-weight:300;
    font-size:16px;
    line-height:1.8;
    max-width:52ch;
  }
  .focus-tags{
    margin-top:34px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
  }
  .focus-tags span{
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px;
    letter-spacing:0.04em;
    color:var(--navy);
    border:1px solid var(--hairline-navy);
    padding:8px 14px;
  }
  @media (max-width:820px){
    .founder{ grid-template-columns:1fr; gap:36px; padding-top:80px; padding-bottom:44px; }
    .founder-mark{ max-width:220px; }
  }

  /* ---------- FINAL CTA ---------- */
  .final{
    text-align:center;
    padding:160px 0 130px;
  }
  .final h2{
    font-size:clamp(36px, 6vw, 68px);
    line-height:1.12;
  }
  .final h2.reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
  .final h2 .line{
    display:block;
    overflow:hidden;
    padding-bottom:0.2em;
    margin-bottom:-0.2em;
  }
  .final h2 .line span{
    display:inline-block;
    opacity:0;
    transform:translateY(100%);
    transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
  }
  .final h2.is-visible .line:nth-child(1) span{ transition-delay:.15s; opacity:1; transform:translateY(0); }
  .final h2.is-visible .line:nth-child(2) span{ transition-delay:.38s; opacity:1; transform:translateY(0); }
  .final .eyebrow{ justify-content:center; }
  .final .eyebrow::before{ display:none; }
  .final-actions{ margin-top:48px; }
  .response-note{
    margin-top:16px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.04em;
    color:var(--stone);
  }

  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid var(--hairline);
    padding:44px 0;
  }
  .footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
  }
  .footer-inner .wordmark{ font-size:14px; }
  .footer-tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    color:var(--stone);
    letter-spacing:0.04em;
  }
  .footer-right{
    display:flex;
    align-items:center;
    gap:24px;
  }
  .footer-loc{
    font-size:12px;
    color:var(--stone);
    letter-spacing:0.02em;
  }
  .footer-legal{
    font-size:12px;
    color:var(--stone);
    letter-spacing:0.02em;
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:color .3s ease, border-color .3s ease;
  }
  .footer-legal:hover{
    color:var(--navy);
    border-color:var(--navy);
  }
  @media (max-width:520px){
    .footer-inner{
      flex-wrap:nowrap;
      gap:10px;
    }
    .footer-inner .wordmark img{ height:14px; }
    .footer-right{ gap:10px; }
    .footer-loc,
    .footer-legal{
      font-size:9px;
      letter-spacing:0.01em;
      white-space:nowrap;
    }
  }

  .legal-strip{
    border-top:1px solid var(--hairline);
    padding:22px 0 calc(22px + var(--safe-b));
  }
  .legal-strip .wrap{
    font-family:'IBM Plex Mono', monospace;
    font-size:10px;
    line-height:1.5;
    color:var(--stone);
    text-align:center;
  }
  .legal-field{ display:inline; }
  .legal-field + .legal-field::before{
    content:"|";
    color:var(--stone);
    margin:0 8px;
  }
  .legal-field--break{
    display:block;
    margin-top:4px;
  }
  .legal-field--break::before{
    content:"" !important;
    margin:0 !important;
  }
  @media (max-width:600px){
    .legal-strip .wrap{
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .legal-field{ display:block; }
    .legal-field + .legal-field::before{ content:""; margin:0; }
  }

  /* reveal on scroll */
  .reveal{
    opacity:0;
    transform:translateY(18px);
    filter:blur(3px);
    transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1), filter .8s cubic-bezier(.2,.6,.2,1);
  }
  .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; filter:none; transition:none; }
  }

  /* ---------- PRAVNE STRANICE (npr. Politika privatnosti) ---------- */
  .legal-page main{
    padding-top:calc(140px + var(--pad));
    padding-bottom:120px;
  }
  .legal-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:var(--stone);
    text-decoration:none;
    margin-bottom:48px;
  }
  .legal-back:hover{ color:var(--navy); }
  .legal-content{
    max-width:740px;
  }
  .legal-content .eyebrow{ margin-bottom:24px; }
  .legal-content h1{
    font-size:clamp(32px, 5vw, 52px);
    line-height:1.15;
    margin-bottom:14px;
  }
  .legal-content .updated{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.04em;
    color:var(--stone);
    margin-bottom:56px;
  }
  .legal-content .notice{
    border:1px solid var(--hairline-navy);
    padding:20px 24px;
    font-size:14px;
    line-height:1.7;
    color:var(--stone);
    margin-bottom:56px;
  }
  .legal-content .notice strong{ color:var(--navy); }
  .legal-content h2{
    font-family:'Fraunces', serif;
    font-weight:400;
    color:var(--navy);
    font-size:clamp(22px, 3vw, 28px);
    margin-top:56px;
    margin-bottom:18px;
  }
  .legal-content p{
    color:var(--ink);
    font-size:16px;
    line-height:1.85;
    font-weight:300;
    margin-bottom:18px;
  }
  .legal-content ul{
    padding-left:22px;
    margin-bottom:18px;
  }
  .legal-content li{
    color:var(--ink);
    font-size:16px;
    line-height:1.8;
    font-weight:300;
    margin-bottom:10px;
  }
  .legal-content a{
    color:var(--navy);
    text-decoration:underline;
    text-underline-offset:3px;
  }
  .legal-content strong{
    color:var(--navy);
    font-weight:500;
  }