/* ============================================================
   Zeus Agency — čist stylesheet
   Stil: velika tipografija, puno praznine, zrno teksture, mrak
   ============================================================ */

/* ---------- 1. Varijable ---------- */
:root{
  --bg:#05060b;
  --bg-alt:#080910;
  --surface:#0c0e18;
  --surface-2:#11131f;
  --border:rgba(232,185,58,.14);
  --border-soft:rgba(255,255,255,.07);
  --text:#eceaf3;
  --muted:#8f8ea6;
  --accent:#e8b93a;
  --accent-lt:#f6d875;
  --accent-dim:rgba(232,185,58,.12);

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --pad:clamp(1.25rem,5vw,5.5rem);
  --max:1280px;
  --r:16px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* Sigurne zone uređaja (notch / Dynamic Island / home indikator).
     Postoje samo uz <meta viewport-fit=cover> i samo na uređajima koji ih
     imaju; svugdje drugdje padaju na 0px. */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* scroll-padding-top: bez ovoga svaki #anchor završi POD fiksnim nav-om
   (koji je visok ~77–84px). Vrijedi na svim uređajima i u svim sekcijama. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(5.25rem + var(--sat))}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#000}
:focus-visible{outline:2px solid var(--accent-lt);outline-offset:3px;border-radius:4px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--accent);color:#000;padding:.75rem 1.25rem;font-weight:600;
}
.skip:focus{left:1rem;top:1rem}

/* ---------- 3. Zrno teksture (fiksni overlay) ---------- */
.grain{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
  opacity:.035;
  mix-blend-mode:overlay;
}

/* ---------- 4. Navigacija ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  /* Gornji/lijevi/desni rub drži se izvan izreza i zaobljenja ekrana. */
  padding:calc(1rem + var(--sat)) max(var(--pad),var(--sar)) 1rem max(var(--pad),var(--sal));
  background:transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(5,6,11,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--border-soft);
}
.brand,.footer-brand{
  display:flex;align-items:center;gap:.55rem;
  font-weight:800;letter-spacing:-.02em;font-size:1.05rem;
}
/* Brand mark — kružni medaljon (img/zeus-mark.png).
   Medaljon već nosi vlastiti zlatni prsten, pa vanjski obrub i podloga
   više ne trebaju: border-radius mora pratiti krug, a object-fit:cover bi
   medaljon izrezao u kvadrat. 32->36px + mekši sjaj drže marku čitljivom
   u zaglavlju i podnožju bez da postane dominantna. */
.brand-mark{
  width:36px;height:36px;flex:none;
  object-fit:contain;border-radius:50%;
  background:transparent;border:0;
  transition:transform .3s var(--ease),filter .3s var(--ease);
  box-shadow:0 0 0 1px rgba(232,185,58,.30),
             0 0 16px rgba(232,185,58,.30),
             0 2px 8px rgba(0,0,0,.55);
}
.brand:hover .brand-mark,.footer-brand:hover .brand-mark{
  transform:scale(1.07);
  filter:brightness(1.14) saturate(1.06);
  box-shadow:0 0 0 1px rgba(232,185,58,.58),
             0 0 26px rgba(232,185,58,.58),
             0 3px 12px rgba(0,0,0,.6);
}
/* Brand logo u zaglavlju i podnožju (img/zeus-logo-sm.webp).
   To je cijeli lockup — znak + wordmark "ZEUS" + potpis — pa već nosi ime
   brenda; zato je tekstualni dio ("Zeus Agency") ispušten da se ime ne
   ponavlja. Proziran WebP: bez podloge i bez obruba, samo zlatni sjaj. */
.brand-logo{
  display:block;height:44px;width:auto;flex:none;
  filter:drop-shadow(0 0 16px rgba(232,185,58,.30))
         drop-shadow(0 4px 12px rgba(0,0,0,.55));
  transition:transform .3s var(--ease),filter .3s var(--ease);
}
.brand:hover .brand-logo,.footer-brand:hover .brand-logo{
  transform:scale(1.05);
  filter:drop-shadow(0 0 26px rgba(232,185,58,.55))
         drop-shadow(0 5px 14px rgba(0,0,0,.6));
}
.brand em,.footer-brand em{font-style:normal;color:var(--muted);font-weight:500}
.nav-links{display:flex;gap:1.75rem;font-size:.9rem;color:var(--muted)}
.nav-links a{position:relative;transition:color .25s}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-4px;height:1px;width:0;
  background:var(--accent);transition:width .3s var(--ease);
}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{width:100%}
/* Aktivna sekcija — klasa, ne inline stil, da :hover i dalje radi. */
.nav-links a.is-active{color:var(--accent)}
.nav-links a.is-active::after{width:100%}

/* ---------- 5. Dugmad ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.95rem 1.9rem;border-radius:100px;
  background:var(--accent);color:#0a0a0a;
  font-weight:650;font-size:.95rem;letter-spacing:-.01em;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s;
  box-shadow:0 4px 24px rgba(232,185,58,.22);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(232,185,58,.34);background:var(--accent-lt)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:.6rem 1.25rem;font-size:.875rem}
.btn-ghost{
  background:transparent;color:var(--text);
  border:1px solid var(--border);box-shadow:none;
}
.btn-ghost:hover{background:var(--accent-dim);border-color:var(--accent);box-shadow:none;color:var(--accent-lt)}
.btn-block{display:flex;width:100%}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;z-index:2;
  /* Tri puta, u ovom redu: stari browseri uzmu 100vh, noviji 100svh,
     najnoviji 100dvh. dvh je bitan — kad se na telefonu sakrije URL traka,
     svh ostane manji od vidljivog ekrana pa se na dnu heroja vidi praznina
     (klasično „ne puni ekran"). */
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  display:flex;flex-direction:column;justify-content:center;
  /* Gornji jastuk prati visinu ekrana (14vh): na niskim ekranima ne pojede
     trećinu ekrana. Donji je manji jer odmah ispod ide nova sekcija. */
  padding:clamp(5.5rem,14vh,9rem) var(--pad) clamp(1.75rem,5vh,3rem);
  max-width:var(--max);margin:0 auto;
}
.hero::before{
  content:'';position:absolute;z-index:-1;
  width:min(900px,120vw);aspect-ratio:1;top:-18%;right:-22%;
  background:radial-gradient(circle,rgba(232,185,58,.11),transparent 62%);
  filter:blur(28px);animation:drift 22s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-4%,6%) scale(1.08)}
}
/* Novi brand logo u heroju — desna strana, tekst ostaje lijevo.
   WebP nosi vlastiti alfa kanal (prozirna pozadina), pa CSS maska nije
   potrebna — stara je rezala rub. Sjaj je samo drop-shadow u istom
   zlatnom tonu kao zrake iza. z-index:1 -> iznad .hero-rays (0) i
   .hero-fx (0), a ispod teksta heroja (2). */
.hero-mark{
  position:absolute;z-index:1;
  right:1%;top:50%;bottom:auto;
  transform:translateY(-46%);
  width:clamp(240px,27vw,430px);height:auto;
  opacity:.97;pointer-events:none;
  filter:drop-shadow(0 0 68px rgba(232,185,58,.22))
         drop-shadow(0 22px 48px rgba(0,0,0,.58));
}
/* tekst heroja mora biti iznad logotipa */
.hero-eyebrow,.hero-title,.hero-sub,.hero-cta,.marquee{position:relative;z-index:2}
.hero-eyebrow{
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:clamp(1rem,3vh,2rem);font-weight:600;
}
.hero-title{
  /* min(širina, visina): naslov se smanjuje i kad je ekran NIZAK (landscape
     telefon), ne samo uzak — inače je u landscapeu bio 96px na 390px visine. */
  font-size:clamp(2.4rem,min(12.5vw,13vh),10.5rem);
  line-height:.86;letter-spacing:-.045em;font-weight:850;
  margin-bottom:clamp(1.25rem,4vh,2.25rem);
}
.hero-title .line{display:block;overflow:hidden}
.hero-title .outline{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(236,234,243,.42);
}
.accent{color:var(--accent);-webkit-text-stroke:0}
.hero-sub{
  max-width:47ch;font-size:clamp(1rem,1.6vw,1.2rem);
  color:var(--muted);margin-bottom:clamp(1.5rem,4.5vh,2.5rem);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem}

/* ---------- 7. Traka (marquee) ---------- */
.marquee{
  margin:clamp(1.75rem,6vh,5rem) calc(var(--pad) * -1) 0;padding:1.1rem 0;
  border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);
  overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:inline-flex;gap:3.5rem;animation:slide 34s linear infinite;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.marquee-track span{display:inline-flex;align-items:center;gap:3.5rem}
.marquee-track span::after{content:'◆';color:var(--accent);font-size:.6rem;letter-spacing:0}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 8. Sekcije ---------- */
.section{position:relative;z-index:2;padding:clamp(5rem,12vh,9rem) var(--pad)}
.section-alt{background:var(--bg-alt)}
.section > *{max-width:var(--max);margin-inline:auto}
.section-head{margin-bottom:clamp(3rem,6vw,5rem)}
.kicker{
  display:inline-block;font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);margin-bottom:1.25rem;font-weight:600;
}
.section-head h2{
  font-size:clamp(2.4rem,7vw,5.25rem);line-height:.94;
  letter-spacing:-.04em;font-weight:800;margin-bottom:1.25rem;
}
.lead{max-width:52ch;color:var(--muted);font-size:clamp(1rem,1.4vw,1.15rem)}

/* ---------- 9. Kartice usluga ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}
.card{
  padding:2.25rem 1.85rem;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border-soft);
  transition:transform .45s var(--ease),border-color .45s,background .45s;
  position:relative;overflow:hidden;
}
.card::before{
  content:'';position:absolute;inset:0;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(232,185,58,.09),transparent 62%);
  transition:opacity .4s;
}
.card:hover{transform:translateY(-5px);border-color:var(--border);background:var(--surface-2)}
.card:hover::before{opacity:1}
.card-icon{
  width:34px;height:34px;margin-bottom:1.4rem;
  fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.card h3{font-size:1.28rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.7rem}
.card p{color:var(--muted);font-size:.96rem}
/* Link unutar kartice — bez strelica (bile su SVG bez width/height pa su se razvukle preko kartice) */
.card-link{
  display:inline-flex;align-items:center;
  margin-top:1rem;font-size:.94rem;font-weight:600;
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--accent-dim);
  transition:color .25s,border-color .25s;
}
.card-link:hover{color:var(--accent-lt);border-bottom-color:var(--accent)}
.card-link:focus-visible{outline:2px solid var(--accent-lt);outline-offset:3px}

/* ---------- 10. Proces ---------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem}
.step{padding-top:1.75rem;border-top:1px solid var(--border-soft);position:relative}
.step::before{
  content:'';position:absolute;top:-1px;left:0;width:0;height:1px;
  background:var(--accent);transition:width .8s var(--ease);
}
.step.in::before{width:100%}
.step-num{
  display:block;font-size:.75rem;letter-spacing:.2em;
  color:var(--accent);font-weight:700;margin-bottom:1rem;
}
.step h3{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.55rem}
.step p{color:var(--muted);font-size:.95rem}

/* ---------- 11. Projekti ---------- */
.work{display:grid;gap:1.25rem}
.work-item{
  display:grid;grid-template-columns:1.15fr 1fr;gap:0;
  border-radius:var(--r);overflow:hidden;
  background:var(--surface);border:1px solid var(--border-soft);
  transition:border-color .45s,transform .45s var(--ease);
}
.work-item:hover{border-color:var(--border);transform:translateY(-4px)}
.work-item:nth-child(even){grid-template-columns:1fr 1.15fr}
.work-item:nth-child(even) .work-media{order:2}
.work-media{margin:0;background:var(--bg-alt);overflow:hidden}
.work-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;transition:transform .8s var(--ease)}
.work-item:hover .work-media img{transform:scale(1.05)}
.work-body{padding:clamp(1.85rem,4vw,3.25rem);display:flex;flex-direction:column;justify-content:center}
.work-body h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:750;letter-spacing:-.03em;margin:.6rem 0 .85rem}
.work-body p{color:var(--muted);font-size:1rem}
.tag{
  display:inline-block;align-self:flex-start;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-dim);
  padding:.35rem .8rem;border-radius:100px;font-weight:650;
}
.voice-note{
  margin-top:1.25rem;padding:clamp(1.75rem,4vw,2.75rem);
  display:flex;gap:1.75rem;align-items:flex-start;flex-wrap:wrap;
  border-radius:var(--r);
  border:1px dashed var(--border);background:var(--accent-dim);
}
.voice-note-icon svg{width:34px;height:34px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round}
.voice-note h3{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;margin:.6rem 0 .5rem}
.voice-note p{color:var(--muted);max-width:62ch}

/* ---------- 12. Cijene ---------- */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.25rem;align-items:start}
.plan{
  padding:2.25rem 1.9rem;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border-soft);
  display:flex;flex-direction:column;position:relative;
  transition:transform .45s var(--ease),border-color .45s;
}
.plan:hover{transform:translateY(-4px);border-color:var(--border)}
.plan-featured{
  border-color:var(--accent);
  background:linear-gradient(180deg,rgba(232,185,58,.08),var(--surface) 45%);
}
.plan-badge{
  position:absolute;top:-11px;left:1.9rem;
  background:var(--accent);color:#0a0a0a;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .75rem;border-radius:100px;
}
.plan-name{font-size:1.4rem;font-weight:750;letter-spacing:-.02em}
.plan-for{color:var(--muted);font-size:.92rem;margin-top:.4rem;min-height:2.6em}
.price{display:flex;align-items:baseline;gap:.15rem;margin:1.5rem 0 1.85rem}
.price .amount{font-size:3.4rem;font-weight:850;letter-spacing:-.05em;line-height:1}
.price .cur{font-size:1.7rem;font-weight:700;color:var(--accent);align-self:flex-start;margin-top:.35rem}
.price .per{color:var(--muted);font-size:1rem;margin-left:.3rem}
.plan-list{list-style:none;display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem;flex:1}
.plan-list li{position:relative;padding-left:1.65rem;font-size:.95rem;color:var(--muted)}
.plan-list li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px rgba(232,185,58,.6);
}
.pricing-foot{margin-top:2.5rem;color:var(--muted);font-size:.97rem;max-width:60ch}
.pricing-foot a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ---------- 13. Tim ---------- */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem}
.person{text-align:center;padding:2.25rem 1.25rem;border-radius:var(--r);transition:background .4s}
.person:hover{background:var(--surface)}
.person-avatar{
  width:96px;height:96px;margin:0 auto 1.4rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border);
}
.person-avatar svg{width:56px;height:56px;fill:none;stroke:var(--muted);stroke-width:3;stroke-linecap:round}
.person:hover .person-avatar svg{stroke:var(--accent)}
.person h3{font-size:1.12rem;font-weight:700;letter-spacing:-.015em}
.person p{color:var(--muted);font-size:.9rem;margin-top:.3rem}

/* ---------- 14. Kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.form{
  display:flex;flex-direction:column;gap:1.15rem;
  padding:clamp(1.75rem,4vw,2.75rem);border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border-soft);
}
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.97rem;color:var(--text);
  background:var(--bg-alt);border:1px solid var(--border-soft);
  border-radius:11px;padding:.9rem 1.05rem;
  transition:border-color .25s,background .25s;
  width:100%;
}
.field textarea{resize:vertical;min-height:130px;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:var(--surface-2);
}
.field input:user-invalid,.field textarea:user-invalid{border-color:#c0392b}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-msg{min-height:1.4em;font-size:.92rem;font-weight:550}
.form-msg.ok{color:#4ade80}
.form-msg.err{color:#f87171}
.contact-aside{padding-top:.5rem}
.contact-aside h3{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;margin-bottom:1.35rem}
.aside-steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:1.15rem}
.aside-steps li{counter-increment:s;position:relative;padding-left:2.6rem;color:var(--muted);font-size:.97rem}
.aside-steps li::before{
  content:counter(s);position:absolute;left:0;top:-.1rem;
  width:1.75rem;height:1.75rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent-dim);color:var(--accent);
  font-size:.8rem;font-weight:700;
}
.aside-note{
  margin-top:2rem;padding:1.25rem;border-left:2px solid var(--accent);
  background:var(--accent-dim);border-radius:0 10px 10px 0;
  color:var(--muted);font-size:.92rem;
}

/* ---------- 15. Podnožje ---------- */
.footer{
  position:relative;z-index:2;
  padding:clamp(3rem,6vw,4.5rem) var(--pad) 2.5rem;
  border-top:1px solid var(--border-soft);background:var(--bg);
}
.footer > *{max-width:var(--max);margin-inline:auto}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;margin-bottom:2.5rem}
.footer-links{display:flex;gap:1.75rem;font-size:.9rem;color:var(--muted);flex-wrap:wrap}
.footer-links a{transition:color .25s}
.footer-links a:hover{color:var(--accent)}
.footer-copy{color:var(--muted);font-size:.85rem;opacity:.75}

/* ---------- 16. Dugme "nazad na vrh" ---------- */
.to-top{
  position:fixed;right:max(1.5rem,var(--sar));bottom:max(1.5rem,var(--sab));z-index:90;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:#0a0a0a;
  box-shadow:0 6px 26px rgba(232,185,58,.3);
  transition:transform .3s var(--ease),opacity .3s;
}
.to-top:hover{transform:translateY(-3px)}
/* display:grid iznad zaobilazi UA [hidden]{display:none} — bez ovoga se dugme vidi na vrhu */
.to-top[hidden]{display:none}
.to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 17. Reveal animacija ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* bez JS-a sadržaj mora ostati vidljiv */
.no-js .reveal{opacity:1;transform:none}

/* ---------- 18. Responsivnost ---------- */
@media (max-width:900px){
  .nav-links{display:none}
  /* Logo u heroju se krije: hero na tabletu već ima puno teksta, a logo ostaje u zaglavlju */
  .hero-mark{display:none}
  /* Logo u zaglavlju malo manji da navigacija ostane niska */
  .brand-logo{height:36px}
  .work-item,.work-item:nth-child(even){grid-template-columns:1fr}
  .work-item:nth-child(even) .work-media{order:0}
  .contact-grid{grid-template-columns:1fr}
  /* i visina ulazi u formulu — vidi komentar kod .hero-title */
  .hero-title{font-size:clamp(2.4rem,min(15vw,13vh),6rem)}
}
@media (max-width:560px){
  /* NAPOMENA: ovdje je prije stajalo .hero{min-height:auto;padding-top:8rem}.
     Time je hero na telefonima gubio pun ekran i bio 3,2 ekrana visok
     (mjereno 17.10.2026.). Sada hero svugdje ima min-height (dvh), a visina
     se reguliše kroz clamp() po visini ekrana. */
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .plan{padding:1.85rem 1.4rem}
  .price .amount{font-size:2.9rem}
}

/* ── Niski ekrani: telefoni u landscapeu i sve niže od 620px ──────────
   Tu pun sadržaj heroja objektivno ne stane u jedan ekran (npr. 844×390),
   pa: smanjujemo vertikalni ritam, gasimo dekorativni logo i dopuštamo
   heroju da bude viši od ekrana — ali bez praznog gornjeg jastuka od 144px. */
@media (max-height:620px){
  .hero{
    min-height:auto;
    padding:clamp(4.5rem,13vh,6rem) var(--pad) 1.5rem;
  }
  .hero-title{font-size:clamp(2.1rem,min(9vw,12vh),4.5rem);margin-bottom:1rem}
  .hero-sub{margin-bottom:1.25rem}
  .hero-cta{gap:.6rem}
  .marquee{margin-top:1.25rem;padding:.8rem 0}
  .hero-mark{display:none}
}

/* ---------- 19. Poštovanje preferencija kretanja ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .marquee-track{animation:none}
  .grain{display:none}
}

/* ---------- 20. Print ---------- */
@media print{
  .grain,.nav,.to-top,.marquee,.hero::before{display:none !important}
  body{background:#fff;color:#000}
  .reveal{opacity:1;transform:none}
}

/* ── 404 (.nf) ──────────────────────────────────────────────────────────
   Izvučeno iz inline <style> bloka u 404.html 03.10. — razlog je CSP:
   style-src više ne potrebuje 'unsafe-inline' jer više nema inline stila. */
.nf{min-height:100vh;min-height:100svh;min-height:100dvh;display:grid;place-content:center;text-align:center;padding:6rem var(--pad);position:relative;z-index:2}
.nf h1{font-size:clamp(4rem,22vw,14rem);line-height:.85;letter-spacing:-.05em;font-weight:850;color:transparent;-webkit-text-stroke:1.5px rgba(236,234,243,.35)}
.nf p{color:var(--muted);max-width:42ch;margin:1.5rem auto 2.5rem;font-size:1.05rem}
.nf .btn{display:inline-flex}

/* ─── PARTNERI (dodano 03.10. — Protos Web) ─────────────────────────────
   Dizajn preuzet iz postojećeg sistema (.work-item / .tag / .btn), da
   sekcija ne izgleda kao ubačen klin nego kao dio sajta. */
.partners{display:grid;gap:1.25rem}
.partner{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(1.1rem,3vw,2rem);
  padding:clamp(1.4rem,3vw,2.25rem);
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);
  transition:border-color .45s,transform .45s var(--ease),background .45s;
}
.partner:hover{border-color:var(--border);transform:translateY(-3px);background:var(--bg-alt)}
.partner-logo{
  width:clamp(56px,7vw,76px);height:clamp(56px,7vw,76px);
  border-radius:16px;object-fit:cover;border:1px solid var(--border-soft);
}
.partner-body{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.partner-name{font-size:clamp(1.15rem,2vw,1.45rem);font-weight:750;letter-spacing:-.02em}
.partner-desc{color:var(--muted);font-size:.97rem;max-width:56ch}
.partner-cta{
  white-space:nowrap;font-size:.85rem;color:var(--accent);
  border:1px solid var(--border-soft);border-radius:100px;padding:.5rem .95rem;
}
.partner:hover .partner-cta{border-color:var(--accent)}

/* Naslov projekta koji vodi na stvarnu stranicu */
.work-link{color:inherit;text-decoration:none;transition:color .3s}
.work-link:hover{color:var(--accent)}
.work-cta-row{margin-top:1.35rem}
.work-cta-row .btn{text-decoration:none}

@media (max-width:640px){
  .partner{grid-template-columns:auto 1fr;gap:1.1rem}
  .partner-cta{grid-column:1/-1;justify-self:start;white-space:normal}
}

/* ============================================================
   Zeus Agency — vizualna nadogradnja
   ============================================================ */

/* ---------- 6b. Canvas FX sloj ----------
   canvas ide z-index:0, a tekst heroja nosi z-index:2, pa je
   sloj uvijek ispod slova. Nije klikabilan. */
.hero-fx{
  position:absolute;inset:0;z-index:0;
  display:block;pointer-events:none;
}

/* ---------- 6c. Simboli Zeusa (pečati) ----------
   Sekcija vec stvara kontekst sloga (position:relative;z-index:2),
   pa z-index:-1 svrstava pečat IZNAD pozadine, a ISPOD sadrzaja.
   Zato nijedno postojece pravilo za djecu sekcije nije dirano. */
.seal{
  position:absolute;z-index:-1;pointer-events:none;
  top:50%;width:var(--sz,clamp(240px,30vw,430px));
  aspect-ratio:1;max-width:none;margin-inline:0;
  transform:translateY(-50%);
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:var(--op,.16);
}
/* Uz zaglavlje sekcije: tamo je praznina, pa pečat ne završi iza kartica
   i ne izgleda kao artefakt stiskanja. */
.seal-head{top:11%;--sz:clamp(200px,22vw,290px)}
.seal-a{background-image:url('../img/zeus-seal.png')}
.seal-b{background-image:url('../img/zeus-seal-alt.png')}
.seal-right{right:calc(var(--pad) * -.35)}
.seal-left{left:calc(var(--pad) * -.35)}
/* fx.js postavi --py; pečat se tiho pomakne i dobije dubinu. */
.seal[data-parallax]{transform:translateY(calc(-50% + var(--py,0px)))}

/* ---------- 15b. Medaljon u podnozju ---------- */
.footer-seal{
  width:clamp(64px,7vw,96px);height:auto;flex:none;opacity:.9;
  filter:drop-shadow(0 6px 22px rgba(232,185,58,.28));
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.footer-brand:hover .footer-seal{opacity:1;transform:translateY(-2px) rotate(-4deg)}

@media (max-width:900px){
  .seal{display:none}
}

/* ---------- 6d. Mala pečat-brtvica u hero-ju ----------
   "Mali logo gore desno": lezi preko gornjeg desnog ugla portreta,
   kao voskavi pečat na antiknoj ploči. Iznad portreta (z-index:2). */
.hero-seal{
  position:absolute;z-index:2;pointer-events:none;
  right:1%;
  /* Sidro identno portretu (.hero-mark), pa pečat prati položaj na svakoj širini. */
  top:calc(50% - .46 * clamp(230px,25vw,400px));
  width:clamp(70px,7.6vw,112px);height:auto;
  transform:translateY(calc(-100% - 16px)) rotate(-4deg);
  filter:drop-shadow(0 0 30px rgba(232,185,58,.34))
         drop-shadow(0 10px 22px rgba(0,0,0,.62));
  animation:seal-breathe 7s ease-in-out infinite;
}
@keyframes seal-breathe{
  0%,100%{transform:translateY(calc(-100% - 14px)) rotate(-4deg) scale(1)}
  50%    {transform:translateY(calc(-100% - 14px)) rotate(-1.5deg) scale(1.05)}
}
@media (prefers-reduced-motion:reduce){
  .hero-seal{animation:none;transform:translateY(calc(-100% - 16px)) rotate(-4deg)}
}
/* Portret je skriven ispod 900px; pečat bez njega samo smeta tekstu. */
@media (max-width:900px){.hero-seal{display:none}}

/* ---------- 15c. Pečat u podnozju ---------- */
.footer{overflow:hidden}
.seal-foot{--sz:clamp(190px,24vw,340px);--op:.07}

/* ---------- 15d. Ilustrativni efekti ----------
   Sve je čisti CSS: bez skripti, bez vanjskog fonta i bez data-URI, pa
   ne dira CSP koji nema unsafe-inline. Sve se poštuje prefers-reduced-motion. */

/* Zlatne zrake iza portreta. Spor okretaj (64s) da djeluje kao svjetlo,
   ne kao kazaljke. Maskiranje radi radialno prema rubu da zrake
   zapećaju u zlatnu aureolu oko glave. */
.hero-rays{
  position:absolute;z-index:0;pointer-events:none;
  right:-6%;top:50%;
  width:clamp(320px,36vw,580px);aspect-ratio:1;
  transform:translateY(-46%);
  background:conic-gradient(from 200deg at 50% 50%,
    transparent 0deg,      rgba(232,185,58,.105) 9deg,   transparent 18deg,
    transparent 27deg,     rgba(232,185,58,.085) 34deg,  transparent 45deg,
    transparent 56deg,     rgba(232,185,58,.07)  63deg,  transparent 75deg,
    transparent 91deg,     rgba(232,185,58,.10)  100deg, transparent 112deg,
    transparent 129deg,    rgba(232,185,58,.075) 136deg, transparent 149deg,
    transparent 171deg,    rgba(232,185,58,.09)  179deg, transparent 193deg,
    transparent 216deg,    rgba(232,185,58,.08)  223deg, transparent 237deg,
    transparent 261deg,    rgba(232,185,58,.10)  269deg, transparent 283deg,
    transparent 301deg,    rgba(232,185,58,.075) 309deg, transparent 323deg,
    transparent 360deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 10%,rgba(0,0,0,.5) 50%,transparent 72%);
          mask-image:radial-gradient(circle at 50% 50%,#000 10%,rgba(0,0,0,.5) 50%,transparent 72%);
  filter:blur(2px);
  animation:rays-turn 64s linear infinite;
}
@keyframes rays-turn{to{transform:translateY(-46%) rotate(360deg)}}

/* Zlatni sjaj koji jednom prođe preko pečata i nestane — pečat ostaje
   miran, a oko njega se kratko podigne blještavo prstenje. */
.seal::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,240,205,.34) 42deg,transparent 96deg);
  -webkit-mask-image:radial-gradient(circle,#000 26%,transparent 70%);
          mask-image:radial-gradient(circle,#000 26%,transparent 70%);
  opacity:0;
  animation:seal-shine 9s ease-in-out infinite;
}
@keyframes seal-shine{
  0%,74%{opacity:0;transform:rotate(0deg)}
  82%    {opacity:.95}
  100%   {opacity:0;transform:rotate(300deg)}
}

@media (prefers-reduced-motion:reduce){
  .hero-rays,.seal::after{animation:none}
  .hero-rays{opacity:.7}
}
/* Portret je skriven ispod 900px; zrake i pečat bez njega samo smetaju tekstu. */
@media (max-width:900px){.hero-rays{display:none}}

/* ══════════ 02. AGENTI (dva agenta: demo + plaćeno) ══════════ */
.agents{display:grid;gap:1.75rem}

.agent{
  padding:clamp(1.85rem,4vw,3.25rem);border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border-soft);
  position:relative;overflow:hidden;
}
.agent::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 100% 0%,rgba(232,185,58,.07),transparent 70%);
}

.agent-head{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1rem}
.agent-num{
  font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);
}
.agent-badge{
  font-size:.7rem;font-weight:600;letter-spacing:.06em;
  padding:.28rem .7rem;border-radius:100px;
  background:var(--accent-dim);color:var(--accent-lt);
  border:1px solid var(--border);
}
.agent h3{
  font-size:clamp(1.5rem,3vw,2.15rem);font-weight:750;letter-spacing:-.03em;
  margin-bottom:.75rem;
}
.agent-lead{color:var(--muted);font-size:1.02rem;max-width:74ch;margin-bottom:2rem}
.agent-lead em,.agent-list strong{color:var(--text);font-style:normal;font-weight:650}
.agent code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;
  background:var(--bg-alt);border:1px solid var(--border-soft);
  padding:.08em .38em;border-radius:5px;color:var(--accent-lt);
}

.agent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:2.5rem}
.agent-col h4{
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
}
.agent-col h4.mt{margin-top:2rem}

.agent-list{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.agent-list li{position:relative;padding-left:1.6rem;font-size:.95rem;color:var(--muted);line-height:1.55}
.agent-list li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px rgba(232,185,58,.55);
}
.agent-list-alt li::before{
  background:none;border:1px solid var(--accent);box-shadow:none;
}
.agent-list-warn li::before{
  background:var(--muted);box-shadow:none;border-radius:1px;
  width:6px;height:6px;top:.6em;transform:rotate(45deg);
}
.agent-list-warn li{font-size:.92rem}

/* Dokaz mjerenja — brojke sa stvarnog skeniranja, ne ilustracija */
.agent-proof{
  border:1px solid var(--border-soft);border-radius:12px;
  background:var(--bg-alt);padding:1.15rem 1.25rem;
}
.proof-line{
  display:grid;grid-template-columns:1fr auto;gap:.15rem .75rem;
  padding:.6rem 0;border-bottom:1px dashed var(--border-soft);
}
.proof-line:last-of-type{border-bottom:0;padding-bottom:.2rem}
.proof-line span{font-size:.9rem;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.proof-line b{font-size:.9rem;font-weight:700;color:var(--accent);text-align:right;white-space:nowrap}
.proof-line i{
  grid-column:1/-1;font-style:normal;font-size:.82rem;color:var(--muted);
}
.proof-note{font-size:.78rem;color:var(--muted);opacity:.8;margin-top:.85rem;line-height:1.5}

.agent-offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:1.25rem;margin-top:2.5rem}

.offer{
  padding:1.6rem 1.5rem;border-radius:14px;
  border:1px solid var(--border-soft);background:var(--bg-alt);
  display:flex;flex-direction:column;
}
.offer-tag{
  align-self:flex-start;font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.28rem .7rem;border-radius:100px;margin-bottom:1rem;
  background:rgba(74,222,128,.12);color:#4ade80;border:1px solid rgba(74,222,128,.28);
}
.offer-paid .offer-tag{
  background:var(--accent-dim);color:var(--accent-lt);border-color:var(--border);
}
.offer-what{font-size:.95rem;color:var(--muted);margin-bottom:1.1rem;line-height:1.55}
.offer-what strong{color:var(--text);font-weight:650}
.offer-list{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.4rem;flex:1}
.offer-list li{position:relative;padding-left:1.35rem;font-size:.9rem;color:var(--muted);line-height:1.5}
.offer-list li::before{
  content:'✓';position:absolute;left:0;top:0;
  color:var(--accent);font-size:.85rem;font-weight:700;
}

.offer-tier{padding-top:1.1rem;margin-top:.2rem;border-top:1px dashed var(--border-soft)}
.offer-tier + .offer-tier{margin-top:1.1rem}
.offer-price{display:flex;align-items:baseline;gap:.2rem;margin-bottom:.15rem}
.offer-price span{font-size:1.9rem;font-weight:850;letter-spacing:-.04em;line-height:1;color:var(--text)}
.offer-price i{font-style:normal;font-size:.92rem;color:var(--muted)}
.offer-name{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.85rem}

.agent-foot{margin-top:2rem;font-size:.88rem;color:var(--muted);max-width:78ch;line-height:1.6}
.agent-foot a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

@media (max-width:640px){
  .agent-head{gap:.5rem}
  .proof-line{grid-template-columns:1fr}
  .proof-line b{text-align:left}
}

/* ─── OZNAKE: sigurnost / zakon / financije / inspekcija ─── */
.proofs{margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--border-soft)}
.proofs-head{display:flex;flex-direction:column;gap:.9rem;max-width:62ch;margin-bottom:2rem}
.proofs-title{font-size:clamp(1.35rem,2.6vw,1.85rem);font-weight:750;letter-spacing:-.02em;line-height:1.2}
.proofs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:1.25rem;
}
.proof-card{
  display:flex;flex-direction:column;gap:.6rem;
  padding:1.5rem 1.4rem;border-radius:14px;
  background:var(--bg-alt);border:1px solid var(--border-soft);
}
.proof-card:hover{border-color:var(--border)}
.proof-card .agent-badge{align-self:flex-start}
.proof-badge{
  align-self:center;width:100%;max-width:260px;height:auto;
  border-radius:12px;display:block;margin-bottom:.35rem;
}
.proof-name{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.proof-desc{color:var(--muted);font-size:.93rem;line-height:1.6}
.proof-card .proof-note{margin-top:0}
.proofs-foot{margin-top:1.5rem;max-width:70ch}
.proofs-foot strong{color:var(--text);font-weight:700}

@media (max-width:640px){
  .proofs{margin-top:2.25rem;padding-top:1.75rem}
}

/* ---------- 21. Traka rizika (između hero CTA i marquee-a) ----------
   Sve izvedeno iz postojećih varijabli i uzoraka: --border-soft, --bg-alt,
   --accent, --accent-dim, --muted, --text. Nema novih boja ni vanjskih fontova.
   Preuzeto: .agent-proof (okvir), .agent-list (oznaka li), .proof-line
   (tipografski tretman), .proof-note (napomena). Postojeće klase NIJE prepisano. */
/* ── Sekcija rizika ────────────────────────────────────────────────────
   Blok .risk-strip je prije bio DJELOM heroja; izdvojen je u zasebnu
   sekciju da hero stane u jedan ekran. Zato mu sada treba vlastito
   centriranje (inače ga .section > * centrira, a .risk-strip margin:0
   pregazi na širokim ekranima) i malo manji gornji ritam. */
.risk-section{padding-top:clamp(2.5rem,6vh,4.5rem)}
.risk-section .risk-strip{max-width:var(--max);margin-left:auto;margin-right:auto}

.risk-strip{
  position:relative;z-index:2;
  margin:2.5rem 0 1.5rem;padding:1.5rem 1.6rem;
  border:1px solid var(--border-soft);border-radius:12px;
  background:var(--bg-alt);
}
.risk-lead{
  margin:0 0 1rem;
  font-size:.95rem;font-weight:600;color:var(--text);
  letter-spacing:-.01em;
  padding-bottom:.6rem;border-bottom:1px dashed var(--border-soft);
}
.risk-list{
  list-style:none;display:flex;flex-direction:column;gap:.7rem;
  margin:0 0 1.25rem;padding:0;
}
.risk-list li{
  position:relative;padding-left:1.6rem;
  font-size:.95rem;color:var(--muted);line-height:1.55;
}
.risk-list li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px rgba(232,185,58,.55);
}
.risk-list b{color:var(--text);font-weight:700}
.risk-strip .proof-note{margin-top:.85rem}

@media (max-width:640px){
  .risk-strip{margin:1.75rem 0 1.25rem;padding:1.15rem 1.1rem}
  .risk-lead{font-size:.9rem}
  .risk-list{gap:.6rem}
  .risk-list li{font-size:.9rem;padding-left:1.35rem}
  .risk-strip .btn{width:100%}
}

/* ─── POLITIKA PRIVATNOSTI (/privatnost.html) ──────────────────
   Dodano 07.10.2026. Style-src je 'self' (bez 'unsafe-inline'),
   pa stilovi moraju biti u vanjskom fajlu — ne mogu u <style>. */
.policy{padding:clamp(4rem,9vh,7rem) var(--pad) clamp(5rem,10vh,8rem);position:relative;z-index:2}
.policy > *{max-width:78ch;margin-inline:auto}
.policy-back{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:2.5rem;color:var(--muted);font-size:.9rem;text-decoration:none;transition:color .25s}
.policy-back:hover{color:var(--accent)}
.policy h1{font-size:clamp(2rem,5vw,3.1rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 1rem}
.policy h2{font-size:1.18rem;font-weight:700;margin:2.75rem 0 .85rem;letter-spacing:-.01em}
.policy p{color:var(--muted);line-height:1.72;margin:0 0 1rem;font-size:1rem}
.policy p strong{color:var(--text);font-weight:700}
.policy ul{color:var(--muted);line-height:1.72;margin:0 0 1rem;padding-left:1.25rem}
.policy li{margin-bottom:.45rem}
.policy li strong{color:var(--text);font-weight:700}
.policy .meta{
  border:1px solid var(--border-soft);border-left:3px solid var(--accent);
  background:var(--bg-alt);border-radius:10px;padding:1.1rem 1.3rem;margin:0 0 2.5rem;
}
.policy .meta p{margin:0;font-size:.93rem}
.policy .meta p + p{margin-top:.5rem}
.policy table{width:100%;border-collapse:collapse;margin:0 0 1.25rem;font-size:.94rem}
.policy th,.policy td{
  text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--border-soft);
  vertical-align:top;color:var(--muted)
}
.policy th{color:var(--text);font-weight:700;width:34%}
.policy .foot-note{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border-soft);font-size:.88rem}

/* UPOZORENJE redakci — briše se kad se popune TODO stavke.
   Namjerno vizualno glasno: dokument se NE objavljuje dok je ovo prisutno. */
.policy .todo{
  border:2px dashed #ff6b6b;background:rgba(255,107,107,.08);border-radius:12px;
  padding:1.25rem 1.4rem;margin:0 0 2.5rem
}
.policy .todo h2{margin:0 0 .7rem;color:#ff8f8f;font-size:1.05rem}
.policy .todo ol{margin:0;padding-left:1.3rem;color:var(--muted);line-height:1.8}
.policy .todo code{
  background:var(--surface);padding:.1rem .4rem;border-radius:4px;
  color:var(--accent-lt);font-size:.9rem
}

/* ---------- 22. Sigurne zone uređaja (notch / Dynamic Island / home indikator) ----
   <meta viewport-fit=cover> pušta sadržaj POD izrez i ispod home indikatora.
   Zato svaki rub koji nosi sadržaj držimo unutar env(safe-area-inset-*).
   Na uređajima bez izreza varijable su 0px, pa nema nikakve vizuelne razlike.
   Nav i „nazad na vrh" imaju vlastita pravila gore (padding / right+bottom). */
.section,.hero,.footer,.policy{
  padding-left:max(var(--pad),var(--sal));
  padding-right:max(var(--pad),var(--sar));
}
.footer{padding-bottom:max(2.5rem,var(--sab))}