/* ==========================================================================
   Fast Solutions Inc — style.css
   Jedan stil za svih pet strana.
   Boje su izvučene direktno iz loga: teget #043947 i crvena #E8292E.
   ========================================================================== */

/* --- 1 · TOKENI ---------------------------------------------------------- */
:root{
  /* boje */
  --navy:        #043947;
  --navy-800:    #06303b;
  --navy-900:    #022630;
  --red:         #E8292E;
  --red-700:     #C41F24;
  --paper:       #EFF2F3;
  --paper-2:     #E4E9EB;
  --white:       #FFFFFF;
  --ink:         #3B4A50;
  --ink-soft:    #64757D;
  --rule:        #D7DEE1;
  --rule-dark:   rgba(255,255,255,.14);

  /* tipografija */
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* razmaci */
  --gut: clamp(1.25rem, 5vw, 4rem);     /* bočna margina */
  --max: 1280px;                         /* širina sadržaja */
  --sec: clamp(4.5rem, 9vw, 8rem);       /* vertikalni razmak sekcija */

  --radius: 4px;
  --shadow: 0 18px 44px -24px rgba(4,57,71,.45);
}

/* --- 2 · OSNOVA ---------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  font-family:var(--font);
  font-variation-settings:'wdth' 100;
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

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

a{ color:var(--navy); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--red); }

h1,h2,h3,h4{
  font-variation-settings:'wdth' 112;
  color:var(--navy);
  letter-spacing:-.015em;
  line-height:1.08;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.35rem, 1.3rem + 4.4vw, 4.4rem); font-weight:800; }
h2{ font-size:clamp(1.85rem, 1.15rem + 2.9vw, 3rem);  font-weight:800; }
h3{ font-size:clamp(1.2rem, 1.05rem + .7vw, 1.5rem);  font-weight:700; font-variation-settings:'wdth' 106; }
h4{ font-size:1.0625rem; font-weight:700; font-variation-settings:'wdth' 104; }

p{ margin:0 0 1.15em; max-width:68ch; }
p:last-child{ margin-bottom:0; }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--red); color:#fff; padding:.75rem 1.25rem; font-weight:700;
}
.skip:focus{ left:0; color:#fff; }

/* --- 3 · RASPORED -------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.section{ padding-block:var(--sec); }
.section--paper{ background:var(--paper); }
.section--navy{ background:var(--navy); color:rgba(255,255,255,.78); }
.section--navy h2,
.section--navy h3{ color:#fff; }

/* uvodni blok sekcije: naslov levo, rečenica desno */
.lead{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1rem 3.5rem;
  margin-bottom:clamp(2.5rem,5vw,4rem);
  padding-bottom:1.75rem;
  border-bottom:1px solid var(--rule);
}
.section--navy .lead{ border-bottom-color:var(--rule-dark); }
.lead h2{ margin-bottom:0; }
.lead p{ margin:0; color:var(--ink-soft); }
.section--navy .lead p{ color:rgba(255,255,255,.72); }
.section--navy strong{ color:#fff; font-weight:700; }

/* ograničena širina pasusa */
.measure{ max-width:60ch; }

/* razmak posle bloka */
.pushed{ margin-top:2rem; }

@media (min-width:860px){
  .lead{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:end; }
}

/* --- 4 · DUGMAD ---------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.95rem 1.7rem;
  font:inherit; font-weight:700;
  font-variation-settings:'wdth' 104;
  letter-spacing:.005em;
  border:2px solid var(--red);
  border-radius:var(--radius);
  background:var(--red); color:#fff;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{ background:var(--red-700); border-color:var(--red-700); color:#fff; }

.btn--ghost{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn--ghost:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }

.btn--light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--light:hover{ background:#fff; border-color:#fff; color:var(--navy); }

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* tekstualna veza */
.tlink{
  display:inline-block;
  font-weight:700;
  color:var(--navy);
  text-decoration:none;
  border-bottom:2px solid var(--red);
  padding-bottom:2px;
  transition:color .18s ease, border-color .18s ease;
}
.tlink:hover{ color:var(--red); }
.section--navy .tlink{ color:#fff; }
.section--navy .tlink:hover{ color:var(--red); border-color:#fff; }

/* --- 5 · ZAGLAVLJE ------------------------------------------------------- */
.head{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding-block:1.1rem;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease;
}
.head--solid{
  background:var(--white);
  border-bottom-color:var(--rule);
}

.head__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
}

.head__logo{ display:block; flex:none; }
.head__logo img{ width:clamp(138px,15vw,168px); }
.head .logo-dark{ display:none; }
.head--solid .logo-dark{ display:block; }
.head--solid .logo-light{ display:none; }

.nav{ display:flex; align-items:center; gap:clamp(1.1rem,2.2vw,2rem); }

.nav a{
  font-weight:600;
  font-size:.975rem;
  color:#fff;
  text-decoration:none;
  padding-block:.4rem;
  border-bottom:2px solid transparent;
  transition:border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.head--solid .nav a{ color:var(--navy); }
.nav a:hover{ border-bottom-color:var(--red); color:#fff; }
.head--solid .nav a:hover{ color:var(--navy); }
.nav a[aria-current="page"]{ border-bottom-color:var(--red); }

.nav__cta{
  padding:.7rem 1.25rem;
  border:2px solid var(--red);
  background:var(--red);
  border-radius:var(--radius);
  color:#fff !important;
}
.nav__cta:hover{ background:var(--red-700); border-color:var(--red-700); }

/* dugme za meni na telefonu */
.burger{
  display:none;
  width:46px; height:40px;
  padding:0;
  background:transparent;
  border:2px solid rgba(255,255,255,.5);
  border-radius:var(--radius);
  cursor:pointer;
}
.head--solid .burger{ border-color:var(--rule); }
.burger span{
  display:block; width:20px; height:2px; margin:4px auto;
  background:#fff; transition:transform .2s ease, opacity .2s ease;
}
.head--solid .burger span{ background:var(--navy); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:920px){
  .burger{ display:block; position:relative; z-index:3; }
  .nav{
    position:fixed; inset:0 0 0 auto; z-index:1;
    width:min(320px,82vw);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0;
    padding:6rem 1.75rem 2rem;
    background:var(--navy);
    transform:translateX(100%);
    transition:transform .28s ease;
    overflow-y:auto;
  }
  .nav[data-open="true"]{ transform:translateX(0); }
  .nav a{
    color:#fff !important;
    font-size:1.1rem;
    padding-block:1rem;
    border-bottom:1px solid var(--rule-dark);
  }
  .nav a[aria-current="page"]{ border-bottom-color:var(--red); }
  .nav__cta{ margin-top:1.5rem; text-align:center; justify-content:center; border-bottom:2px solid var(--red); }
  .scrim{
    position:fixed; inset:0; z-index:50;
    background:rgba(2,38,48,.6);
    opacity:0; pointer-events:none;
    transition:opacity .28s ease;
  }
  .scrim[data-open="true"]{ opacity:1; pointer-events:auto; }
}

/* --- 6 · HEROJ (naslovna) ------------------------------------------------ */
.hero{
  position:relative;
  min-height:min(92svh,860px);
  display:flex; align-items:flex-end;
  padding-top:9rem;
  background:var(--navy-900);
  overflow:hidden;
}
.hero__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.82;
}
.hero::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(95deg, rgba(2,38,48,.9) 0%, rgba(2,38,48,.64) 40%, rgba(2,38,48,.14) 72%, rgba(2,38,48,.3) 100%),
    linear-gradient(to top, rgba(2,38,48,.55) 0%, rgba(2,38,48,0) 45%);
}
@media (max-width:820px){
  .hero::after{
    background:linear-gradient(to top, rgba(2,38,48,.95) 0%, rgba(2,38,48,.86) 42%, rgba(2,38,48,.5) 72%, rgba(2,38,48,.35) 100%);
  }
}

.hero__in{
  position:relative; z-index:2;
  width:100%;
  padding-bottom:clamp(3rem,6vw,5rem);
}
.hero h1{
  color:#fff;
  max-width:16ch;
  font-variation-settings:'wdth' 115;
  margin-bottom:.5em;
}
.hero p{
  color:rgba(255,255,255,.84);
  font-size:clamp(1.05rem,.98rem + .42vw,1.3rem);
  max-width:46ch;
  margin-bottom:2rem;
}

/* traka sa podacima ispod heroja */
.dock{
  background:var(--navy);
  border-top:3px solid var(--red);
}
.dock__grid{
  display:grid;
  grid-template-columns:1fr;
}
.dock__cell{
  padding:1.6rem 0;
  border-bottom:1px solid var(--rule-dark);
}
.dock__cell:last-child{ border-bottom:0; }
.dock__k{
  display:block;
  font-size:clamp(1.4rem,1.2rem + .9vw,2rem);
  font-weight:800;
  font-variation-settings:'wdth' 110;
  color:#fff;
  line-height:1.15;
  letter-spacing:-.015em;
}
.dock__v{
  display:block;
  margin-top:.3rem;
  font-size:.92rem;
  color:rgba(255,255,255,.62);
}
@media (min-width:760px){
  .dock__grid{ grid-template-columns:repeat(3,1fr); }
  .dock__cell{
    padding:2.1rem 2rem 2.1rem 0;
    border-bottom:0;
    border-right:1px solid var(--rule-dark);
  }
  .dock__cell:last-child{ border-right:0; padding-right:0; }
  .dock__cell + .dock__cell{ padding-left:2rem; }
}

/* --- 7 · ZAGLAVLJE PODSTRANE -------------------------------------------- */
.phead{
  position:relative;
  background:var(--navy-900);
  padding:clamp(9rem,15vw,12rem) 0 clamp(3.5rem,6vw,5rem);
  overflow:hidden;
}
.phead__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.4;
}
.phead::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(95deg, rgba(2,38,48,.92) 0%, rgba(2,38,48,.62) 60%, rgba(2,38,48,.4) 100%);
}
.phead__in{ position:relative; z-index:2; }
.phead h1{ color:#fff; max-width:18ch; margin-bottom:.35em; }
.phead p{ color:rgba(255,255,255,.8); max-width:52ch; font-size:1.1rem; margin:0; }

/* --- 8 · NAIZMENIČNI BLOKOVI (usluge) ----------------------------------- */
.split{
  display:grid;
  gap:2rem;
  align-items:center;
}
.split + .split{ margin-top:clamp(3.5rem,7vw,6rem); }
.split__media img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.split__body h3{ margin-bottom:.7rem; }
.split__body .tlink{ margin-top:.4rem; }

@media (min-width:880px){
  .split{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(2.5rem,5vw,4.5rem); }
  .split--flip{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); }
  .split--flip .split__media{ order:2; }
}

/* lista sa crvenom crticom */
.marks{
  list-style:none;
  margin:0 0 1.4rem;
  padding:0;
  display:grid;
  gap:.6rem;
}
.marks li{
  position:relative;
  padding-left:1.6rem;
}
.marks li::before{
  content:'';
  position:absolute; left:0; top:.68em;
  width:10px; height:2px;
  background:var(--red);
}
.section--navy .marks li{ color:rgba(255,255,255,.82); }

/* dve ravnopravne kolone */
.duo{
  display:grid;
  gap:2.25rem;
}
@media (min-width:780px){
  .duo{ grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4rem); }
}
.duo__box h3{ margin-bottom:.9rem; }
.duo__box--no .marks li::before{ background:var(--ink-soft); }

/* tri kolone sa crvenom linijom na vrhu */
.trio{
  display:grid;
  gap:2.25rem;
}
@media (min-width:820px){
  .trio{ grid-template-columns:repeat(3,1fr); gap:clamp(2rem,4vw,3.5rem); }
}
.trio__box{
  padding-top:1.4rem;
  border-top:3px solid var(--red);
}
.trio__box h3{ margin-bottom:.55rem; }
.trio__box p{ margin:0; }

/* --- 9 · KORACI ---------------------------------------------------------- */
.steps{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  gap:0;
  counter-reset:korak;
}
.steps li{
  counter-increment:korak;
  padding:1.9rem 0;
  border-top:1px solid var(--rule);
  display:grid;
  gap:.4rem 1.75rem;
}
.section--navy .steps li{ border-top-color:var(--rule-dark); }
.steps li:last-child{ border-bottom:1px solid var(--rule); }
.section--navy .steps li:last-child{ border-bottom-color:var(--rule-dark); }
.steps li::before{
  content:counter(korak,decimal-leading-zero);
  font-size:1.05rem;
  font-weight:800;
  font-variation-settings:'wdth' 110;
  color:var(--red);
  line-height:1.4;
}
.steps h3{ margin:0; }
.steps p{ margin:0; }

@media (min-width:780px){
  .steps li{ grid-template-columns:3.5rem minmax(0,15rem) minmax(0,1fr); align-items:start; }
  .steps li::before{ grid-row:1; }
}

/* --- 10 · POZIV NA AKCIJU ------------------------------------------------ */
.cta{
  position:relative;
  padding-block:clamp(4rem,8vw,6.5rem);
  background:var(--navy-900);
  overflow:hidden;
}
.cta__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.85;
}
.cta::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(2,38,48,.94) 0%, rgba(2,38,48,.72) 48%, rgba(2,38,48,.2) 100%);
}
@media (max-width:820px){
  .cta::after{
    background:linear-gradient(to top, rgba(2,38,48,.95) 0%, rgba(2,38,48,.82) 55%, rgba(2,38,48,.5) 100%);
  }
}
.cta__in{ position:relative; z-index:2; }
.cta h2{ color:#fff; max-width:17ch; }
.cta p{ color:rgba(255,255,255,.82); max-width:48ch; margin-bottom:2rem; }

/* --- 11 · PODNOŽJE ------------------------------------------------------- */
.foot{
  background:var(--navy);
  color:rgba(255,255,255,.7);
  font-size:.95rem;
  padding-top:clamp(3.5rem,7vw,5rem);
}
.foot a{ color:rgba(255,255,255,.7); text-decoration:none; }
.foot a:hover{ color:#fff; }

.foot__top{
  display:grid;
  gap:2.5rem;
  padding-bottom:3rem;
  border-bottom:1px solid var(--rule-dark);
}
@media (min-width:820px){
  .foot__top{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.1fr); gap:3.5rem; }
}
.foot__logo img{ width:160px; margin-bottom:1.1rem; }
.foot__brand p{ max-width:34ch; margin:0; }

.foot h4{
  color:#fff;
  font-size:.95rem;
  margin-bottom:1rem;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }

.foot address{ font-style:normal; display:grid; gap:.6rem; }
.foot address a{ font-weight:600; color:#fff; }

/* linija o Good Trade Logistics */
.foot__note{
  margin-top:2.25rem;
  padding:1.1rem 1.35rem;
  border-left:3px solid var(--red);
  background:rgba(255,255,255,.05);
  border-radius:0 var(--radius) var(--radius) 0;
}
.foot__note p{ margin:0; max-width:58ch; }
.foot__note strong{ color:#fff; font-weight:700; }

.foot__bar{
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem;
  align-items:center; justify-content:space-between;
  padding-block:1.6rem;
  font-size:.875rem;
  color:rgba(255,255,255,.55);
}
.credit{
  color:rgba(255,255,255,.55);
  text-decoration:none;
  transition:color .18s ease;
}
.credit:hover{ color:#fff; }
.credit span{ color:var(--red); }

/* --- 12 · KONTAKT I FORMA ----------------------------------------------- */
.contact-grid{
  display:grid;
  gap:3rem;
}
@media (min-width:920px){
  .contact-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(3rem,6vw,5rem); }
}

.info{
  display:grid;
  gap:1.75rem;
  align-content:start;
}
.info__item{
  padding-top:1.35rem;
  border-top:1px solid var(--rule);
}
.info__item h4{ margin-bottom:.35rem; color:var(--navy); }
.info__item p,
.info__item address{
  margin:0;
  font-style:normal;
  color:var(--ink);
}
.info__item a{ font-weight:600; }

.form{
  display:grid;
  gap:1.15rem;
  background:var(--white);
  padding:clamp(1.5rem,3vw,2.5rem);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.form__row{ display:grid; gap:1.15rem; }
@media (min-width:560px){ .form__row{ grid-template-columns:1fr 1fr; } }

.field{ position:relative; }
.field input,
.field select,
.field textarea{
  width:100%;
  font:inherit;
  color:var(--navy);
  padding:1.45rem .95rem .6rem;
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field textarea{ resize:vertical; min-height:7.5rem; line-height:1.55; }
.field select{ appearance:none; padding-top:1.5rem; cursor:pointer; }

.field label{
  position:absolute; left:.95rem; top:1.05rem;
  font-size:.95rem;
  color:var(--ink-soft);
  pointer-events:none;
  transition:transform .16s ease, font-size .16s ease, color .16s ease;
  transform-origin:left top;
  background:transparent;
}
.field input:focus + label,
.field textarea:focus + label,
.field select:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label,
.field select:valid + label{
  transform:translateY(-.68rem) scale(.8);
  color:var(--navy);
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(4,57,71,.1);
  outline:none;
}
.field select:focus-visible,
.field input:focus-visible,
.field textarea:focus-visible{ outline:none; }

/* strelica za padajući spisak */
.field--select::after{
  content:'';
  position:absolute; right:1.1rem; top:calc(50% - 2px);
  width:9px; height:9px;
  border-right:2px solid var(--ink-soft);
  border-bottom:2px solid var(--ink-soft);
  transform:translateY(-50%) rotate(45deg);
  pointer-events:none;
}

/* skriveno polje protiv robota */
.honey{
  position:absolute !important;
  left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.form__foot{
  display:grid;
  gap:1rem;
  align-items:center;
}
@media (min-width:620px){
  .form__foot{ grid-template-columns:auto minmax(0,1fr); gap:1.5rem; }
}
.form__note{
  margin:0;
  font-size:.875rem;
  color:var(--ink-soft);
}
.field__warn{
  margin:.45rem 0 0;
  font-size:.875rem;
  color:var(--red-700);
}

/* poruke posle slanja */
.alert{
  display:flex;
  gap:.9rem;
  padding:1.15rem 1.35rem;
  margin-bottom:1.5rem;
  border-radius:var(--radius);
  border-left:4px solid;
  background:var(--white);
}
.alert[hidden]{ display:none; }
.alert p{ margin:0; }
.alert__title{ font-weight:700; color:var(--navy); }
.alert svg{ flex:none; margin-top:.15rem; }
.alert--ok{ border-color:#1E8E5A; color:var(--ink); }
.alert--ok svg{ color:#1E8E5A; }
.alert--err{ border-color:var(--red); color:var(--ink); }
.alert--err svg{ color:var(--red); }

/* --- 13 · SITNICE -------------------------------------------------------- */
.map{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  border-radius:var(--radius);
  filter:grayscale(.35) contrast(1.05);
}

.prose h3{ margin-top:2.25rem; }
.prose h3:first-child{ margin-top:0; }

/* --- 14 · POKRET --------------------------------------------------------- */
@keyframes ulaz{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}
@keyframes slikaUlaz{
  from{ transform:scale(1.06); }
  to{ transform:none; }
}
.hero__in > *{ animation:ulaz .7s cubic-bezier(.22,.8,.3,1) both; }
.hero__in > *:nth-child(2){ animation-delay:.1s; }
.hero__in > *:nth-child(3){ animation-delay:.2s; }
.hero__img{ animation:slikaUlaz 1.4s cubic-bezier(.22,.8,.3,1) both; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* --- 15 · ŠTAMPA --------------------------------------------------------- */
@media print{
  .head,.nav,.burger,.cta,.hero__img{ display:none !important; }
  body{ color:#000; }
}