/* =========================================================
   VARIABLES
========================================================= */

/* =========================================================
   SELF-HOSTED FONTOVI

   Fontovi se poslužuju lokalno (assets/fonts/) umjesto s
   Google servera — bez slanja IP adrese posjetitelja
   Googleu prije bilo kakve privole.

   NAPOMENA: putanje su relativne na OVU css datoteku
   (css/style.css), ne na HTML stranicu koja je učitava —
   zato "../assets/fonts/..." radi ispravno na HR, EN i DE
   verzijama podjednako.
========================================================= */

@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../assets/fonts/dm-sans-v17-latin-300.woff2') format('woff2');
}

@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
}

@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../assets/fonts/dm-sans-v17-latin-500.woff2') format('woff2');
}

@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../assets/fonts/dm-sans-v17-latin-600.woff2') format('woff2');
}

@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../assets/fonts/dm-sans-v17-latin-700.woff2') format('woff2');
}

@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/manrope-v20-latin-regular.woff2') format('woff2');
}

@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../assets/fonts/manrope-v20-latin-500.woff2') format('woff2');
}

@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../assets/fonts/manrope-v20-latin-600.woff2') format('woff2');
}

@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../assets/fonts/manrope-v20-latin-700.woff2') format('woff2');
}

@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('../assets/fonts/manrope-v20-latin-800.woff2') format('woff2');
}

@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../assets/fonts/space-grotesk-v22-latin-500.woff2') format('woff2');
}

@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../assets/fonts/space-grotesk-v22-latin-600.woff2') format('woff2');
}

@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../assets/fonts/space-grotesk-v22-latin-700.woff2') format('woff2');
}

@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../assets/fonts/ibm-plex-mono-v20-latin-300.woff2') format('woff2');
}

@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2');
}

@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../assets/fonts/ibm-plex-mono-v20-latin-500.woff2') format('woff2');
}


:root{
  --black:#020B13;
  --deep:#031A2C;
  --deep-2:#062B46;
  --ocean:#075B91;
  --blue:#0B78B8;
  --cyan:#22C2EF;
  --cyan-light:#A9ECFA;

  --white:#FFFFFF;
  --off-white:#F4F8FA;
  --text:#10283D;
  --muted:#66798A;
  --line:#D8E3EA;

  --display:'Manrope',sans-serif;
  --body:'DM Sans',sans-serif;
  --nav:'Space Grotesk',sans-serif;
  --mono:'IBM Plex Mono',monospace;

  --max:1180px;
}

/* =========================================================
   RESET
========================================================= */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:var(--body);
  color:var(--text);
  background:var(--off-white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

body.menu-open{
  overflow:hidden;
}

img{
  display:block;
  max-width:100%;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
  background:none;
  border:0;
  color:inherit;
}

ul{
  list-style:none;
}

::selection{
  background:var(--cyan);
  color:var(--black);
}

.wrap{
  width:min(var(--max),calc(100% - 48px));
  margin:0 auto;
}

@media(max-width:600px){
  .wrap{
    width:min(var(--max),calc(100% - 32px));
  }
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4{
  font-family:var(--display);
  line-height:1.05;
  letter-spacing:-.035em;
}

h2{
  font-size:clamp(34px,5vw,58px);
  font-weight:700;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;

  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-weight:500;
}

.eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:currentColor;
}

.section-intro{
  max-width:700px;
  margin-bottom:58px;
}

.section-intro h2{
  margin-top:16px;
}

.section-intro p{
  margin-top:18px;
  color:var(--muted);
  font-size:17px;
  max-width:620px;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  min-height:52px;
  padding:0 24px;

  border-radius:5px;
  border:1px solid transparent;

  font-size:14px;
  font-weight:700;

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  background:var(--cyan);
  color:var(--black);
}

.btn-primary:hover{
  background:#68DDF7;
}

.btn-dark{
  background:var(--deep);
  color:#fff;
}

.btn-dark:hover{
  background:var(--black);
}

.btn-outline{
  border-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.04);
  color:#fff;
}

.btn-outline:hover{
  border-color:#fff;
  background:rgba(255,255,255,.1);
}

.btn-light-outline{
  border-color:var(--line);
  background:#fff;
  color:var(--deep);
}

.btn-light-outline:hover{
  border-color:var(--ocean);
}

/* =========================================================
   HEADER
========================================================= */

header{
  position:sticky;
  top:0;
  z-index:100;

  border-bottom:1px solid var(--line);
}

header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;

  background:rgba(255,255,255,.97);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.nav{
  min-height:76px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.logo img{
  width:auto;
  height:38px;
  max-width:230px;
  object-fit:contain;
}

/* Header is a permanent white bar, so the logo just sits flush —
   no badge/background needed */
.logo-badge{
  display:inline-flex;
  align-items:center;
}

.logo-badge img{
  height:44px;
  width:auto;
  max-width:260px;
  object-fit:contain;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:30px;
}

.mobile-nav-extra{
  display:none;
}

.main-nav a{
  color:rgba(255,255,255,.68);
  font-family:var(--nav);
  font-size:13px;
  font-weight:500;
  letter-spacing:-.01em;
  transition:color .2s ease;
}

.main-nav a:hover{
  color:#fff;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.header-actions .btn{
  min-height:42px;
  padding:0 17px;
  font-size:12px;
}

/* Language switch — modern dropdown */
.lang-dropdown{
  position:relative;
}

.lang-dropdown-toggle{
  display:flex;
  align-items:center;
  gap:8px;

  min-height:38px;
  padding:0 8px 0 13px;

  background:rgba(3,26,44,.05);
  border:1px solid rgba(3,26,44,.12);
  border-radius:8px;

  color:var(--deep);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;

  transition:background .2s ease, border-color .2s ease, color .2s ease;
}

.lang-dropdown-toggle:hover{
  background:rgba(3,26,44,.09);
  border-color:rgba(3,26,44,.22);
}

.lang-dropdown.open .lang-dropdown-toggle{
  background:var(--deep);
  border-color:var(--deep);
  color:#fff;
}

.lang-caret{
  width:9px;
  height:9px;
  flex-shrink:0;
  color:currentColor;
  transition:transform .25s ease;
}

.lang-dropdown.open .lang-caret{
  transform:rotate(180deg);
}

.lang-dropdown-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;

  min-width:172px;
  padding:6px;

  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 20px 46px rgba(3,26,44,.16);

  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;

  z-index:200;
}

.lang-dropdown.open .lang-dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.lang-option{
  width:100%;
  display:flex;
  align-items:center;
  gap:11px;

  padding:9px 10px;

  background:transparent;
  border:0;
  border-radius:7px;

  text-align:left;

  transition:background .15s ease;
}

.lang-option:hover{
  background:var(--off-white);
}

.lang-option-code{
  width:24px;
  flex-shrink:0;

  color:var(--deep);

  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
}

.lang-option-name{
  color:var(--muted);
  font-size:13px;
  transition:color .15s ease;
}

.lang-option.active .lang-option-name{
  color:var(--deep);
  font-weight:600;
}

.lang-option.active{
  background:rgba(11,120,184,.08);
}

.lang-option-check{
  width:14px;
  height:14px;
  margin-left:auto;
  flex-shrink:0;

  color:var(--blue);
  opacity:0;
  transition:opacity .15s ease;
}

.lang-option.active .lang-option-check{
  opacity:1;
}

@media(max-width:1180px){
  .lang-dropdown{
    display:none;
  }
}

.menu-toggle{
  display:none;

  width:42px;
  height:42px;

  border:1px solid var(--line);
  background:var(--off-white);
  border-radius:5px;

  color:var(--deep);
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after{
  display:block;
  width:20px;
  height:2px;
  background:var(--deep);
  margin:auto;
  position:relative;
}

.menu-toggle span::before,
.menu-toggle span::after{
  content:"";
  position:absolute;
  left:0;
}

.menu-toggle span::before{
  top:-7px;
}

.menu-toggle span::after{
  top:7px;
}

@media(max-width:1180px){

  .main-nav{
    display:none;

    position:fixed;
    top:76px;
    left:0;
    right:0;
    bottom:0;

    padding:35px 24px;

    background:var(--deep);

    flex-direction:column;
    align-items:flex-start;
    gap:25px;

    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  .main-nav.open{
    display:flex;
  }

  .main-nav a{
    font-size:22px;
  }

  .mobile-nav-extra{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:nowrap;

    gap:clamp(6px,2vw,10px);

    width:100%;
    margin-top:10px;
    padding-top:30px;
    padding-bottom:2px;

    border-top:1px solid rgba(255,255,255,.15);

    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .mobile-nav-extra::-webkit-scrollbar{
    display:none;
  }

  #mainNav .mobile-cta{
    flex-shrink:0;
    flex-grow:0;

    width:auto !important;
    max-width:none;
    margin:0;

    min-height:0;
    height:auto;
    padding:7px clamp(8px,2.5vw,12px);

    font-size:clamp(10px,2.8vw,11px);
    line-height:1.2;
    white-space:nowrap;

    color:var(--black) !important;
  }

  #mainNav .mobile-cta::after{
    content:none;
  }

  .mobile-lang-switch{
    display:flex;
    flex-shrink:0;
    align-items:center;
    gap:clamp(4px,1.5vw,6px);

    margin-left:auto;
  }

  .mobile-lang-option{
    flex-shrink:0;

    padding:9px clamp(10px,2.8vw,14px);

    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.18);
    border-radius:6px;

    color:rgba(255,255,255,.65) !important;

    font-family:var(--mono);
    font-size:clamp(12px,3.2vw,13px);
    font-weight:600;
    letter-spacing:.02em;
    white-space:nowrap;

    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }

  .mobile-lang-option.active{
    background:#fff;
    border-color:#fff;
    color:var(--deep) !important;
  }

  .header-actions > .btn{
    display:none;
  }

  .menu-toggle{
    display:block;
  }

}

/* =========================================================
   HERO
========================================================= */

.hero{
  min-height:calc(100vh - 76px);
  min-height:720px;

  position:relative;
  overflow:hidden;

  display:flex;
  align-items:center;

  color:#fff;

  background:
    radial-gradient(
      circle at 75% 25%,
      rgba(34,194,239,.25),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #020B13 0%,
      #052C46 55%,
      #075B91 100%
    );
}

/* When the real hero photo is available,
   create assets/hero-pool.jpg and uncomment this:

.hero{
  background:
    linear-gradient(
      90deg,
      rgba(2,11,19,.96) 0%,
      rgba(2,11,19,.78) 42%,
      rgba(2,11,19,.20) 100%
    ),
    url("assets/hero-pool.jpg") center/cover no-repeat;
}
*/

.hero::before,
.hero::after{
  content:none;
}

.hero-waves{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:48%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  opacity:.95;
}

.hero-waves svg{
  width:100%;
  height:100%;
  display:block;
}

.hero-waves .wave{
  fill:none;
  stroke-linejoin:round;
}

.hero-waves .wave-back{
  fill:rgba(34,194,239,.09);
  stroke:rgba(104,220,247,.22);
  stroke-width:2;
}

.hero-waves .wave-front{
  fill:rgba(255,255,255,.055);
  stroke:rgba(255,255,255,.16);
  stroke-width:2;
}

.hero-waves::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, transparent 30%, rgba(2,11,19,.18));
}

.hero-content{
  position:relative;
  z-index:3;

  max-width:760px;

  padding:100px 0 130px;
}

.hero .eyebrow{
  color:var(--cyan);
}

.hero h1{
  margin-top:22px;

  font-size:clamp(48px,7.5vw,88px);
  line-height:.95;

  color:#fff;
  font-weight:700;
}

.hero h1 span{
  color:var(--cyan);
}

.hero-lead{
  max-width:620px;

  margin-top:30px;

  color:rgba(255,255,255,.70);

  font-size:18px;
  line-height:1.7;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;

  margin-top:38px;
}

.hero-bottom{
  position:relative;
  z-index:3;
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  border-top:1px solid rgba(255,255,255,.10);

  z-index:3;
}

.hero-bottom-inner{
  min-height:58px;

  display:flex;
  justify-content:space-between;
  align-items:center;
}

.hero-bottom span{
  color:rgba(255,255,255,.38);

  font-family:var(--mono);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.14em;
}

@media(max-width:600px){

  .hero{
    min-height:680px;
  }

  .hero-content{
    padding:80px 0 110px;
  }

  .hero h1{
    font-size:48px;
  }

  .hero-lead{
    font-size:16px;
  }

  .hero-bottom-inner span:last-child{
    display:none;
  }
}

/* =========================================================
   STATS
========================================================= */

.stats{
  background:var(--black);
  color:#fff;

  border-bottom:1px solid rgba(255,255,255,.08);
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.stat{
  min-height:135px;

  padding:28px 30px;

  border-right:1px solid rgba(255,255,255,.10);
}

.stat:first-child{
  padding-left:0;
}

.stat:last-child{
  border-right:0;
}

.stat strong{
  display:block;

  font-family:var(--display);
  font-size:36px;
  line-height:1;

  letter-spacing:-.04em;

  color:#fff;
}

.stat span{
  display:block;

  margin-top:10px;

  color:rgba(255,255,255,.45);

  font-family:var(--mono);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

@media(max-width:720px){

  .stats-grid{
    grid-template-columns:1fr 1fr;
  }

  .stat{
    min-height:110px;
    padding:22px 18px;
  }

  .stat:nth-child(2){
    border-right:0;
  }

  .stat:nth-child(3),
  .stat:nth-child(4){
    border-top:1px solid rgba(255,255,255,.10);
  }

  .stat:first-child{
    padding-left:18px;
  }
}

/* =========================================================
   GENERAL SECTIONS
========================================================= */

section.standard{
  padding:110px 0;
}

@media(max-width:700px){
  section.standard{
    padding:75px 0;
  }
}

/* =========================================================
   SERVICES
========================================================= */

.services{
  background:#fff;
}

.services .eyebrow{
  color:var(--ocean);
}

.services .section-intro{
  max-width:700px;
}

.services .section-intro p{
  margin-top:20px;
}

.text-mark{
  color:var(--deep);
  font-weight:700;

  background-image:linear-gradient(transparent 62%, rgba(34,194,239,.4) 62%);
  background-repeat:no-repeat;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}



.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;

  background:var(--line);
  border:1px solid var(--line);
}

.service{
  position:relative;
  display:block;

  min-height:390px;
  padding:34px 28px;

  background:#fff;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;
}

.service:hover{
  background:var(--deep);
  color:#fff;

  transform:translateY(-5px);
  z-index:2;
}

.service-number{
  font-family:var(--mono);
  font-size:11px;
  color:var(--cyan);
}

.service-icon{
  width:46px;
  height:46px;

  margin:42px 0 25px;
}

.service h3{
  font-size:24px;
  margin-bottom:14px;
}

.service p{
  color:var(--muted);
  font-size:14px;
}

.service:hover p{
  color:rgba(255,255,255,.62);
}

.service-arrow{
  position:absolute;
  bottom:27px;
  right:27px;

  font-size:20px;
  color:var(--ocean);
}

.service:hover .service-arrow{
  color:var(--cyan);
}

@media(max-width:1000px){
  .service-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:600px){
  .service-grid{
    grid-template-columns:1fr;
  }

  .service{
    min-height:320px;
  }
}

/* =========================================================
   PROCESS
========================================================= */

.process{
  background:var(--off-white);
}

.process-layout{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:100px;
}

.process-title{
  position:sticky;
  top:120px;
  align-self:start;
}

.process-title h2{
  margin-top:16px;
}

.process-title p{
  margin-top:20px;
  color:var(--muted);
  font-size:16px;
}

.process-list{
  border-top:1px solid var(--line);
}

.process-item{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:25px;

  padding:30px 0;

  border-bottom:1px solid var(--line);
}

.process-num{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ocean);
}

.process-item h3{
  font-size:25px;
  margin-bottom:10px;
}

.process-item p{
  max-width:570px;
  color:var(--muted);
  font-size:15px;
}

@media(max-width:850px){

  .process-layout{
    grid-template-columns:1fr;
    gap:50px;
  }

  .process-title{
    position:static;
  }

}

/* =========================================================
   DARK REFERENCE / AREA
========================================================= */

.area{
  position:relative;
  overflow:hidden;

  background:var(--deep);
  color:#fff;
}

.area .section-intro{
  max-width:800px;
}

.area .eyebrow{
  color:var(--cyan);
}

.area h2{
  color:#fff;
}

.area .section-intro p{
  color:rgba(255,255,255,.55);
}

.area-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.area-list{
  border-top:1px solid rgba(255,255,255,.12);
}

.area-item{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:20px;

  padding:28px 0;

  border-bottom:1px solid rgba(255,255,255,.12);
}

.area-code{
  font-family:var(--mono);
  color:var(--cyan);
  font-size:11px;
}

.area-item h3{
  color:#fff;
  font-size:23px;
  margin-bottom:8px;
}

.area-item p{
  color:rgba(255,255,255,.52);
  font-size:14px;
}

.map-placeholder{
  min-height:500px;

  position:relative;

  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(34,194,239,.16),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      #052B43,
      #031A2C
    );

  overflow:hidden;
}

.map-placeholder::before{
  content:"";
  position:absolute;
  inset:10%;

  border:1px dashed rgba(34,194,239,.22);
  border-radius:50%;

  transform:rotate(-15deg);
}

.map-placeholder::after{
  content:"";
  position:absolute;

  width:65%;
  height:1px;

  top:50%;
  left:18%;

  background:rgba(34,194,239,.25);

  transform:rotate(-28deg);
}

.map-label{
  position:absolute;

  padding:7px 10px;

  border:1px solid rgba(255,255,255,.12);
  background:rgba(2,11,19,.75);

  font-family:var(--mono);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;

  color:#fff;
}

.map-label.salzburg{
  left:32%;
  top:30%;
  color:var(--cyan);
}

.map-label.bayern{
  left:12%;
  top:18%;
}

.map-label.hr{
  left:55%;
  bottom:25%;
  color:var(--cyan);
}

.map-label.dalmacija{
  left:68%;
  bottom:10%;
}

@media(max-width:850px){

  .area-layout{
    grid-template-columns:1fr;
  }

  .map-placeholder{
    min-height:400px;
  }

}

/* =========================================================
   ABOUT / PARTNERS
========================================================= */

.about{
  background:var(--off-white);
}

section.standard.about{
  padding-bottom:40px;
}

.about-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:70px;
  margin-bottom:65px;
}

.about-heading .eyebrow,
.partners-head .eyebrow{
  color:var(--ocean);
}

.about-heading h2{
  margin-top:16px;
  max-width:360px;
}

.about-copy p{
  margin-top:0;
  margin-bottom:20px;
  max-width:620px;
  color:var(--muted);
  font-size:17px;
}

.about-copy p:last-child{
  margin-bottom:0;
}

.about-copy strong{
  color:var(--text);
}

@media(max-width:850px){

  .about-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

}

.about-facts{
  border-left:1px solid var(--line);
}

.about-fact{
  padding:0 0 24px 30px;
  margin-bottom:24px;
  border-bottom:1px solid var(--line);
}

.about-fact:last-child{
  margin-bottom:0;
}

.about-fact strong{
  display:block;
  font-family:var(--display);
  font-size:25px;
  letter-spacing:-.03em;
}

.about-fact span{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-family:var(--mono);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.1em;
}

@media(max-width:850px){
  .about-grid{grid-template-columns:1fr; gap:45px;}
  .about-facts{border-left:0; border-top:1px solid var(--line); padding-top:30px;}
  .about-fact{padding-left:0;}
}

.partners-panel{
  margin-top:70px;
  margin-bottom:10px;
  padding:40px 40px;

  background:#fff;
  border-radius:20px;

  box-shadow:
    0 14px 32px rgba(3,26,44,.07),
    0 2px 8px rgba(3,26,44,.04);
}

.partners-head{
  margin:0 0 35px;
  max-width:720px;
}

.partners-head h3{
  margin-top:16px;
  font-size:32px;
}

.partners-head p{
  margin-top:14px;
  color:var(--muted);
}

@media(max-width:700px){

  .partners-panel{
    padding:40px 26px;
  }

}

/* =========================================================
   WHY US
========================================================= */

.why{
  background:var(--off-white);
}

section.standard.why{
  padding-top:40px;
}

/* =========================================================
   CTA
========================================================= */

.cta{
  padding:100px 0;

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(34,194,239,.20),
      transparent 28%
    ),
    var(--deep);
}

.cta-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:50px;
}

.cta .eyebrow{
  color:var(--cyan);
}

.cta h2{
  max-width:700px;
  margin-top:18px;
  color:#fff;
}

.cta p{
  max-width:600px;
  margin-top:18px;
  color:rgba(255,255,255,.55);
}

@media(max-width:800px){

  .cta-inner{
    display:block;
  }

  .cta .btn{
    margin-top:30px;
  }

}

/* =========================================================
   FOOTER
========================================================= */

footer{
  background:var(--black);
  color:#fff;

  padding:65px 0 25px;
}

.footer-top{
  display:flex;
  justify-content:space-between;
  gap:60px;

  padding-bottom:55px;

  border-bottom:1px solid rgba(255,255,255,.10);
}

.footer-logo img{
  height:84px;
  width:auto;
}

.footer-logo.logo-badge{
  padding:16px 26px;
}

.footer-description{
  max-width:340px;

  margin-top:20px;

  color:rgba(255,255,255,.42);
  font-family:var(--nav);
  font-size:13px;
}

.footer-cols{
  display:flex;
  gap:80px;
}

.footer-col h4{
  margin-bottom:16px;

  color:rgba(255,255,255,.4);

  font-family:var(--mono);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:500;
}

.footer-col a,
.footer-col p{
  display:block;

  margin-bottom:9px;

  color:rgba(255,255,255,.62);

  font-family:var(--nav);
  font-size:13px;
}

.footer-col a:hover{
  color:#fff;
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;

  padding-top:24px;

  color:rgba(255,255,255,.3);

  font-family:var(--mono);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.footer-legal-links{
  display:flex;
  gap:18px;
}

.footer-legal-links a{
  color:rgba(255,255,255,.3);
  transition:color .2s ease;
}

.footer-legal-links a:hover{
  color:#fff;
}

@media(max-width:750px){

  .footer-top{
    display:block;
  }

  .footer-cols{
    margin-top:45px;
    gap:45px;
    flex-wrap:wrap;
  }

}

@media(max-width:500px){

  .footer-bottom{
    display:block;
  }

  .footer-bottom span{
    display:block;
    margin-bottom:8px;
  }

}

/* =========================================================
   REVEAL
========================================================= */

.reveal{
  opacity:0;
  transform:translateY(25px);

  transition:
    opacity .7s ease,
    transform .7s ease;
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   BACK TO TOP
========================================================= */

.back-top{
  position:fixed;

  right:22px;
  bottom:22px;

  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;

  background:var(--deep);
  color:#fff;

  opacity:0;
  visibility:hidden;

  transform:translateY(10px);

  transition:.25s ease;

  z-index:80;
}

.back-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.back-top:hover{
  background:var(--cyan);
  color:var(--black);
}


/* O NAMA — anchor offset + location icon */
#o-nama { scroll-margin-top: 110px; }
.contact-icon svg { display:block; }

/* =========================================================
   PREMIUM HEADER / NAVIGATION
========================================================= */

header {
  transition: border-color .35s ease, box-shadow .35s ease;
}

header.scrolled {
  border-bottom-color: rgba(0,0,0,.10);
  box-shadow: 0 8px 30px rgba(0,0,0,.055);
}

#mainNav a {
  position: relative;
  padding: 9px 0;
  color: var(--muted);
  text-decoration: none;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
  transition: color .25s ease;
}

/* Mobilni puni izbornik ima tamnu pozadinu — treba svijetli tekst */
#mainNav.open a {
  color: rgba(255,255,255,.75);
}

#mainNav.open a:hover,
#mainNav.open a.active {
  color: #fff;
}

#mainNav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .28s ease;
}

#mainNav a:hover,
#mainNav a.active {
  color: var(--deep);
}

#mainNav a:hover::after,
#mainNav a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* CTA in header */
header .btn-primary {
  position: relative;
  overflow: hidden;
  min-height: 42px;
  padding: 0 18px;
  transition: transform .25s ease, box-shadow .25s ease;
}

header .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

/* Anchor positioning under sticky header */
#usluge,
#proces,
#projekti,
#o-nama,
#kontakt {
  scroll-margin-top: 110px;
}

#o-nama,#projekti,#kontakt,#usluge,#proces { scroll-margin-top:110px; }

/* =========================================================
   MODERN "PRONAĐITE NAS" SOCIALS
========================================================= */

.logo-fallback {
  display: none;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
}

.logo-fallback strong {
  display: block;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
}

.logo-fallback small {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.65);
}

.socials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.socials .social {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 13px;
  overflow: hidden;

  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);

  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;

  transition:
    color .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.socials .social::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 0;
}

.socials .social > * {
  position: relative;
  z-index: 1;
}

.socials .social svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
}

.socials .social:hover {
  transform: translateY(-4px);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
}

.socials .social:hover::before {
  opacity: 1;
}

/* Instagram — original Instagram gradient */
.social-instagram::before {
  background: linear-gradient(
    135deg,
    #833AB4 0%,
    #C13584 38%,
    #E1306C 62%,
    #F77737 82%,
    #FCAF45 100%
  );
}

/* Facebook */
.social-facebook::before {
  background: #1877F2;
}

/* WhatsApp */
.social-whatsapp::before {
  background: #25D366;
}

@media (max-width: 600px) {
  .socials {
    grid-template-columns: 1fr;
  }

  .socials .social {
    justify-content: flex-start;
    padding: 0 16px;
  }
}


/* Country flags in content */
.market-stat .country-flag {
  display: block;
  margin-bottom: 12px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 42px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}

.market-stat {
  transition: transform .25s ease, background .25s ease;
}

.market-stat:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.05);
}

@media (max-width: 700px){
  .hero-waves{ height:34%; }
}