/* ===========================================================
   PAMETNICA — design tokens
   =========================================================== */
:root{
  --ink:    #0A3258;
  --chalk:  #F4F7FB;
  --chalk-2:#E7EEF7;
  --board:  #04599A;
  --board-2:#1571B8;
  --signal: #FF6B35;
  --signal-dim: #E85A2A;
  --slate:  #5A6670;
  --slate-2:#8B95A0;
  --led:    #3FA9F5;
  --white:  #FFFFFF;

  --display: "Space Grotesk", "Arial Narrow", sans-serif;
  --body:    "IBM Plex Sans", "Segoe UI", sans-serif;

  /* Type scale — 3 tekstualne + 3 naslovne veličine */
  --fs-caption: 0.75rem;                     /* oznake, labele, plava traka, sitni tekst */
  --fs-ui:      0.9rem;                       /* navigacija, gumbi, sekundarni tekst */
  --fs-body:    1rem;                          /* glavni tekst i lead */
  --fs-h3:      1.25rem;                       /* naslovi kartica / manji podnaslovi */
  --fs-h2:      clamp(1.6rem, 3vw, 2.2rem);   /* naslovi sekcija */
  --fs-h1:      clamp(2rem, 4.5vw, 3.2rem);   /* hero naslov */

  --radius-bezel: 18px;
  --radius-sm: 8px;
  --max: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--chalk);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{
  font-family:var(--display);
  margin:0 0 .4em;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
}
p{margin:0 0 1em;color:var(--ink);}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}

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

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

/* ---------- eyebrow / mono labels ---------- */
.eyebrow{
  font-family:var(--body);
  font-size:var(--fs-caption);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate);
  display:flex;
  align-items:center;
  gap:.5em;
  margin-bottom:1em;
}
.eyebrow::before{
  display:none;
}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--body);
  font-weight:600;
  font-size:var(--fs-ui);
  letter-spacing:.02em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.95em 1.6em;
  border-radius:999px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--signal);color:var(--white);}
.btn-primary:hover{background:var(--signal-dim);}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn-ghost:hover{background:var(--ink);color:var(--chalk);}
.btn-ghost-light{border-color:rgba(247,244,236,.4);color:var(--chalk);background:transparent;}
.btn-ghost-light:hover{background:var(--chalk);color:var(--ink);}
.btn-arrow{transition:transform .2s ease;}
.btn:hover .btn-arrow{transform:translateX(3px);}
/* Full-width CTA — gumb popunjava širinu svog kontejnera (bez praznog prostora desno) */
.btn-block{width:100%;justify-content:center;}
/* Neobavezna napomena — otkriva se na klik (progressive disclosure) */
.note-toggle{display:inline-flex;align-items:center;gap:.4em;background:none;border:none;padding:0;cursor:pointer;font-family:var(--body);font-size:var(--fs-ui);color:rgba(247,244,236,.7);text-align:left;}
.note-toggle .nt-cue{color:var(--signal);font-weight:600;white-space:nowrap;}
.note-toggle:hover .nt-cue{text-decoration:underline;}
.note-toggle[aria-expanded="true"] .nt-cue{display:none;}
.note-field{margin-top:.9em;}

/* ===========================================================
   HEADER
   =========================================================== */
.topbar{
  background:var(--ink);
  color:var(--chalk-2);
  font-family:var(--body);
  font-size:var(--fs-caption);
}
.topbar .container{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:.5em;padding-bottom:.5em;
  gap:1em;flex-wrap:wrap;
}
.topbar a{opacity:.85;transition:opacity .2s;}
.topbar a:hover{opacity:1;color:var(--signal);}
.topbar .sep{opacity:.3;margin:0 .6em;}

header.site-header{
  background:var(--chalk);
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid rgba(20,33,61,.08);
}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9em 0;
}
.logo{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--fs-h3);
  display:flex;align-items:center;gap:.5em;
}
.logo-img{height:42px;width:auto;display:block;}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--led);box-shadow:0 0 8px var(--led);}
nav.main-nav{display:flex;gap:1.8em;font-size:var(--fs-ui);font-weight:500;}
nav.main-nav > ul{display:flex;gap:1.8em;}
nav.main-nav li{position:relative;}
nav.main-nav a{padding:.4em 0;border-bottom:2px solid transparent;}
nav.main-nav a:hover, nav.main-nav a.active{border-color:var(--signal);}
.nav-cta{display:flex;align-items:center;gap:1em;}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;}

.has-mega{position:relative;}
.mega{
  position:absolute;top:100%;left:0;
  background:var(--white);
  border:1px solid rgba(20,33,61,.1);
  border-radius:var(--radius-sm);
  box-shadow:0 18px 40px -10px rgba(20,33,61,.18);
  padding:1.2em;
  min-width:260px;
  display:none;
  z-index:60;
  font-size:var(--fs-ui);
}
.has-mega:hover .mega, .has-mega:focus-within .mega{display:block;}
.mega li a{display:block;padding:.45em .3em;border-radius:6px;border-bottom:none;}
.mega li a:hover{background:var(--chalk-2);color:var(--signal-dim);}

@media (max-width: 900px){
  .menu-toggle{display:block;z-index:60;}
  /* Sakrij meni dok nije otvoren */
  nav.main-nav{
    display:none;
    position:absolute;
    top:calc(100% + .9em);left:0;right:0;
    flex-direction:column;
    background:var(--white);
    box-shadow:0 20px 40px -12px rgba(20,33,61,.25);
    border:1px solid var(--chalk-2);
    border-radius:var(--radius-sm);
    padding:.6em 1.1em 1em;
    gap:0;
    z-index:55;
    max-height:78vh;overflow-y:auto;
  }
  /* Kad JS doda .open klasu — prikaži */
  nav.main-nav.open{display:flex;}
  nav.main-nav > ul{
    flex-direction:column;
    gap:0;
    width:100%;
  }
  nav.main-nav li{
    width:100%;
    border-bottom:1px solid var(--chalk-2);
  }
  nav.main-nav > ul > li:last-child{border-bottom:none;}
  nav.main-nav a{
    display:block;
    padding:.9em .2em;
    border-bottom:none;
  }
  /* Mega meni (podizbornici) — uvijek vidljiv unutar otvorenog mobilnog menija */
  .mega{
    position:static !important;
    display:block !important;
    box-shadow:none;
    border:none;
    padding:0 0 .6em 1em;
    min-width:auto;
    background:transparent;
  }
  .has-mega > a::after{content:" ▾";font-size:var(--fs-ui);color:var(--slate);}
  .mega li a{padding:.55em .3em;font-size:var(--fs-ui);color:var(--slate);}
  /* Header ostaje sticky, nav-row je kontekst za apsolutni meni */
  .nav-row{position:relative;}
}

/* ===========================================================
   BEZEL — signature component
   =========================================================== */
.bezel{
  position:relative;
  background:none;
  border-radius:var(--radius-sm);
  padding:0;
  box-shadow:none;
}
.bezel .led,
.bezel.is-on .led{display:none;}
.bezel .screen{
  position:relative;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:none;
}
.bezel .screen img{width:100%;height:100%;object-fit:cover;display:block;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.45;}}

/* placeholder visual used until real product photography is added */
.ph{
  display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:4/3;
  background:
    linear-gradient(135deg, rgba(255,255,255,.05) 0%, transparent 40%),
    var(--board);
  color:rgba(247,244,236,.5);
}
.ph svg{width:38%;height:38%;opacity:.85;}

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  padding:clamp(40px,8vw,96px) 0 clamp(50px,7vw,90px);
  overflow:hidden;
}
.hero .container{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(30px,5vw,70px);
  align-items:center;
}
.hero h1{
  font-size:var(--fs-h1);
  line-height:1.3;
  max-width:13ch;
}
.hero h1 em{color:var(--signal);font-style:normal;}
.hero .lead{font-size:var(--fs-body);color:var(--slate);max-width:42ch;line-height:1.85;}
.hero .cta-row{display:flex;gap:1em;margin-top:1.6em;flex-wrap:wrap;}
/* Hero CTA gumbi na proizvodima/kategorijama/rješenjima — isti raspored kao naslovnica */
.hero-actions{margin-top:1.4em;display:flex;gap:.8em;flex-wrap:wrap;}
/* Mobitel: hero CTA gumbi idu jedan ispod drugoga, punom širinom */
@media (max-width:560px){
  .hero-actions,
  .hero .cta-row{flex-direction:column;align-items:stretch;}
  .hero-actions .btn,
  .hero .cta-row .btn{width:100%;justify-content:center;}
}

.stat-rail{
  display:flex;gap:1.4em;margin-top:2.6em;flex-wrap:wrap;
}
.stat-rail .stat{
  font-family:var(--body);
  padding-left:0;
}
.stat .num{display:block;font-family:var(--display);font-size:var(--fs-h3);font-weight:700;color:var(--ink);}
.stat .lbl{font-size:var(--fs-caption);color:var(--slate);text-transform:uppercase;letter-spacing:.06em;}

.hero-visual{position:relative;}
.hero-visual .bezel{aspect-ratio:4/3;}
.hero-visual .bezel .screen{aspect-ratio:4/3;}
.hero-visual .float-tag{
  position:absolute;bottom:-18px;left:-18px;
  background:var(--white);
  border-radius:var(--radius-sm);
  box-shadow:0 14px 30px -10px rgba(20,33,61,.25);
  padding:.9em 1.2em;
  font-family:var(--body);
  font-size:var(--fs-caption);
  display:flex;align-items:center;gap:.6em;
  text-decoration:none;color:var(--ink);
  transition:transform .15s ease, box-shadow .2s ease;
}
.hero-visual a.float-tag:hover{transform:translateY(-2px);box-shadow:0 18px 36px -10px rgba(20,33,61,.32);}
.float-tag .ft-arrow{color:var(--signal);font-family:var(--body);font-weight:600;margin-left:.15em;transition:transform .2s ease;}
.hero-visual a.float-tag:hover .ft-arrow{transform:translateX(3px);}
.float-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--led);}

@media (max-width:760px){
  .hero .container{grid-template-columns:1fr;}
  .hero-visual{order:-1;}
}

/* ===========================================================
   TRUST / VALUE STRIP
   =========================================================== */
.value-strip{
  background:var(--white);
  border-top:1px solid rgba(20,33,61,.08);
  border-bottom:1px solid rgba(20,33,61,.08);
}
.value-strip .container{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;
}
.value-strip .item{
  padding:1.6em var(--gutter);
  display:flex;gap:1em;align-items:flex-start;
  border-right:1px solid rgba(20,33,61,.08);
}
.value-strip .item:last-child{border-right:none;}
.value-strip .ic{flex:none;color:var(--signal);}
.value-strip strong{display:block;font-family:var(--display);font-size:var(--fs-body);margin-bottom:.15em;}
.value-strip span.txt{font-size:var(--fs-ui);color:var(--slate);}
@media (max-width:760px){
  .value-strip .container{grid-template-columns:1fr;}
  .value-strip .item{border-right:none;border-bottom:1px solid rgba(20,33,61,.08);}
}

/* ===========================================================
   SECTION generic
   =========================================================== */
.section{padding:clamp(56px,8vw,100px) 0;}
.section-head{max-width:640px;margin-bottom:2.6em;}
.section-head h2{font-size:var(--fs-h2);}
.section-head.testi-head{max-width:none;}
.section.on-board{background:var(--board);color:var(--chalk);}
.section.on-board h2, .section.on-board h3, .section.on-board p{color:var(--chalk);}
.section.on-board .eyebrow{color:rgba(247,244,236,.65);}
.section.on-board .eyebrow::before{background:var(--led);}

/* feature grid (Iskustvo/Inovativnost/Interakcija/Inspiracija) */
.feature-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.4em;
}
.feature-card{
  background:rgba(247,244,236,.06);
  border:1px solid rgba(247,244,236,.14);
  border-radius:var(--radius-sm);
  padding:1.6em 1.4em;
}
.feature-card .num{font-family:var(--body);font-size:var(--fs-caption);color:var(--led);}
.feature-card h3{font-size:var(--fs-body);margin-top:.5em;}
.feature-card p{font-size:var(--fs-ui);color:rgba(247,244,236,.75);margin-bottom:0;}
@media (max-width:900px){.feature-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.feature-grid{grid-template-columns:1fr;}}

/* category / product grid */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3em;}
.cat-card{
  display:flex;flex-direction:column;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--white);
  border:1px solid rgba(20,33,61,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cat-card>img,.cat-card>.ph{flex:none;}
.cat-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -16px rgba(20,33,61,.22);}
.cat-card .ph{aspect-ratio:16/10;}
.cat-card .body{padding:1.2em 1.3em 1.4em;display:flex;flex-direction:column;flex:1;}
.cat-card h3{font-size:var(--fs-body);margin-bottom:.3em;}
.cat-card p{font-size:var(--fs-ui);color:var(--slate);margin-bottom:.8em;}
.cat-card .go{font-family:var(--body);font-size:var(--fs-caption);text-transform:uppercase;color:var(--signal-dim);display:flex;align-items:center;gap:.4em;margin-top:auto;}
@media (max-width:1000px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.cat-grid{grid-template-columns:1fr;}}

/* process steps (real sequence -> numbered) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6em;counter-reset:step;}
.step{position:relative;padding-top:2.4em;}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--body);font-size:var(--fs-ui);color:var(--signal-dim);
  position:absolute;top:0;left:0;
}
.step::after{content:"";position:absolute;top:.55em;left:2.4em;right:0;height:1px;background:rgba(20,33,61,.12);}
.step h3{font-size:var(--fs-body);}
.step p{font-size:var(--fs-ui);color:var(--slate);}
@media (max-width:760px){.steps{grid-template-columns:1fr;}}

/* testimonials */
.testi-rail{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.3em;
}
.testi-card{
  background:var(--white);
  border:1px solid rgba(20,33,61,.08);
  border-radius:var(--radius-sm);
  padding:1.6em;
  display:flex;flex-direction:column;
}
.testi-card p.quote{font-size:var(--fs-ui);color:var(--ink);line-height:1.6;flex:1;margin:0;}
.testi-card .src{font-family:var(--body);font-size:var(--fs-caption);color:var(--slate);text-transform:uppercase;letter-spacing:.04em;margin-top:1.1em;}
@media (max-width:1000px){.testi-rail{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.testi-rail{grid-template-columns:1fr;}}

/* contact / quote form */
.quote-section{
  background:var(--ink);
  color:var(--chalk);
  border-radius:24px;
  margin:0 var(--gutter);
  padding:clamp(36px,6vw,64px);
  display:grid;grid-template-columns:1fr 1.2fr;gap:3em;
}
.quote-section h2{color:var(--chalk);}
.quote-section .lead{color:rgba(247,244,236,.75);}
.quote-section .container-inner{max-width:none;}
.form-grid{display:grid;grid-template-columns:1fr;gap:1em;}
/* Honeypot – nevidljivo polje za hvatanje botova (izvan ekrana, ne display:none) */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;}
.form-grid .full{grid-column:1/-1;}
label{display:block;font-family:var(--body);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.05em;color:rgba(247,244,236,.6);margin-bottom:.5em;}
input,select,textarea{
  width:100%;
  background:rgba(247,244,236,.06);
  border:1px solid rgba(247,244,236,.2);
  border-radius:8px;
  padding:.8em .9em;
  color:var(--chalk);
  font-family:var(--body);
  font-size:var(--fs-ui);
}
input::placeholder,textarea::placeholder{color:rgba(247,244,236,.4);}
input:focus,select:focus,textarea:focus{outline:2px solid var(--signal);border-color:var(--signal);}
.checkbox-row{display:flex;gap:.7em;align-items:flex-start;font-size:var(--fs-ui);color:rgba(247,244,236,.7);}
.checkbox-row input{width:auto;margin-top:.2em;}
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23F7F4EC' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9em center;
}
/* Chromium: opcije naslijede svijetli color sa select-a i postanu nevidljive na bijelom popupu.
   Eksplicitno postavljamo tamni tekst na bijeloj pozadini za padajuću listu. */
select option,
select optgroup{
  color:var(--ink);
  background-color:#fff;
}
@media (max-width:900px){
  .quote-section{grid-template-columns:1fr;margin:0 1em;border-radius:18px;}
  .form-grid{grid-template-columns:1fr;}
}

/* ===========================================================
   FOOTER
   =========================================================== */
footer.site-footer{background:var(--board);color:rgba(247,244,236,.85);padding:64px 0 24px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.4em;padding-bottom:3em;border-bottom:1px solid rgba(247,244,236,.12);}
.footer-grid h4{color:var(--chalk);font-size:var(--fs-ui);text-transform:uppercase;letter-spacing:.06em;font-family:var(--body);margin-bottom:1em;}
.footer-grid li{margin-bottom:.6em;font-size:var(--fs-ui);}
.footer-grid a:hover{color:var(--signal);}
.footer-bottom{display:flex;justify-content:space-between;padding-top:1.6em;font-size:var(--fs-ui);color:rgba(247,244,236,.5);flex-wrap:wrap;gap:1em;}
.footer-bottom a:hover{color:var(--signal);}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

/* utility */
.muted{color:var(--slate);}
.text-center{text-align:center;}
.mt-0{margin-top:0;}
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;}
[data-reveal].is-visible{opacity:1;transform:none;}

/* ===========================================================
   BREADCRUMB
   =========================================================== */
.breadcrumb{
  font-family:var(--body);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.05em;
  color:var(--slate);padding:1.2em 0 0;display:flex;gap:.5em;align-items:center;flex-wrap:wrap;
}
.breadcrumb a:hover{color:var(--signal-dim);}
.breadcrumb .sep{opacity:.4;}

/* ===========================================================
   PAGE HERO (kategorije, kompleti, statične stranice)
   =========================================================== */
.page-hero{padding:1.6em 0 clamp(40px,6vw,72px);}
.page-hero .container{
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,60px);align-items:center;
}
.page-hero h1{font-size:var(--fs-h2);max-width:16ch;}
.page-hero .lead{font-size:var(--fs-body);color:var(--slate);max-width:46ch;}
.page-hero .bezel{aspect-ratio:4/3;}
.page-hero .bezel .screen{aspect-ratio:4/3;}
.page-hero .bezel img{width:100%;height:100%;object-fit:cover;}
@media (max-width:760px){
  .page-hero .container{grid-template-columns:1fr;}
  .page-hero .hero-visual{order:-1;}
}

/* kit/comparison badge row under category hero */
.meta-row{display:flex;gap:1.6em;margin-top:1.6em;flex-wrap:wrap;}
.meta-row .m{font-family:var(--body);font-size:var(--fs-caption);color:var(--slate);display:flex;align-items:center;gap:.5em;}
.meta-row .m::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal);}

/* ===========================================================
   PRODUCT GRID (kategorija listing)
   =========================================================== */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3em;}
.prod-card{
  display:block;background:var(--white);border:1px solid rgba(20,33,61,.08);
  border-radius:var(--radius-sm);overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.prod-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -16px rgba(20,33,61,.2);}
.prod-card .shot{aspect-ratio:4/3;background:var(--chalk-2);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.prod-card .shot img{width:100%;height:100%;object-fit:contain;padding:14px;}
.prod-card .body{padding:1.1em 1.2em 1.3em;}
.prod-card .kicker{font-family:var(--body);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.06em;color:var(--slate-2);}
.prod-card h3{font-size:var(--fs-body);margin:.3em 0 .4em;}
.prod-card p{font-size:var(--fs-ui);color:var(--slate);margin-bottom:.7em;}
.prod-card .go{font-family:var(--body);font-size:var(--fs-caption);text-transform:uppercase;color:var(--signal-dim);display:flex;align-items:center;gap:.4em;}
@media (max-width:900px){.prod-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.prod-grid{grid-template-columns:1fr;}}

/* filter/sub-nav pills (category quick filters, optional use) */
.pill-row{display:flex;gap:.6em;margin-bottom:2em;flex-wrap:wrap;}
.pill-row a{
  font-family:var(--body);font-size:var(--fs-caption);padding:.5em 1.1em;border-radius:999px;
  border:1px solid rgba(20,33,61,.15);color:var(--slate);
}
.pill-row a.active, .pill-row a:hover{border-color:var(--board);color:var(--board);background:var(--chalk-2);}

/* ===========================================================
   SPEC TABLE (datasheet style, proizvod stranice)
   =========================================================== */
.spec-table{width:100%;border-collapse:collapse;font-family:var(--body);font-size:var(--fs-ui);}
.spec-table tr{border-bottom:1px solid rgba(20,33,61,.08);}
.spec-table td{padding:.7em .4em;}
.spec-table td:first-child{color:var(--slate);width:42%;}
.spec-table td:last-child{color:var(--ink);font-weight:500;}

/* ===========================================================
   KIT / KOMPLET page (Value, Optima, Premium, Touch)
   =========================================================== */
.kit-tier-nav{display:flex;gap:.8em;flex-wrap:wrap;margin:2em 0 0;}
.kit-tier-nav a{
  flex:1;min-width:140px;text-align:center;
  font-family:var(--body);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.04em;
  padding:.9em 1em;border-radius:var(--radius-sm);border:1px solid rgba(20,33,61,.12);color:var(--slate);
}
.kit-tier-nav a.active{background:var(--ink);border-color:var(--ink);color:var(--white);}
.kit-tier-nav a:hover:not(.active){border-color:var(--board);color:var(--board);}

.kit-includes{display:grid;grid-template-columns:repeat(2,1fr);gap:.9em;}
.kit-includes li{
  list-style:none;display:flex;gap:.8em;align-items:flex-start;
  font-size:var(--fs-ui);padding:.9em 1em;background:var(--white);
  border:1px solid rgba(20,33,61,.08);border-radius:var(--radius-sm);
}
.kit-includes li svg{flex:none;color:var(--signal);margin-top:.15em;}
@media (max-width:640px){.kit-includes{grid-template-columns:1fr;}}

.kit-compare{width:100%;border-collapse:collapse;font-size:var(--fs-ui);}
.kit-compare th,.kit-compare td{padding:.9em 1em;text-align:center;border:1px solid rgba(20,33,61,.08);}
.kit-compare th{font-family:var(--body);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.04em;background:var(--chalk-2);}
.kit-compare td:first-child,.kit-compare th:first-child{text-align:left;font-family:var(--body);}
.kit-compare td.yes{color:var(--board);font-weight:600;}
.kit-compare td.no{color:var(--slate-2);}
.kit-compare tr.this-tier td, .kit-compare tr.this-tier th{background:rgba(4,89,154,.06);}
.kit-compare-wrap{overflow-x:auto;}

/* small inline icon list used in value-strip-like rows on kit pages */
.icon-list{display:flex;flex-direction:column;gap:1.1em;}
.icon-list .row{display:flex;gap:1em;align-items:flex-start;}
.icon-list .ic{flex:none;width:36px;height:36px;border-radius:10px;background:var(--chalk-2);display:flex;align-items:center;justify-content:center;color:var(--board);}
.icon-list strong{display:block;font-size:var(--fs-ui);margin-bottom:.2em;}
.icon-list span{font-size:var(--fs-ui);color:var(--slate);}


/* ===========================================================
   BREADCRUMB
   =========================================================== */
.breadcrumb{
  font-family:var(--body);
  font-size:var(--fs-caption);
  color:var(--slate);
  padding:1.4em 0 0;
}
.breadcrumb a{color:var(--slate);}
.breadcrumb a:hover{color:var(--signal-dim);}
.breadcrumb .sep{margin:0 .5em;opacity:.5;}

/* ===========================================================
   CATEGORY / SOLUTION HERO (simpler variant of homepage hero)
   =========================================================== */
.cat-hero{padding:1.6em 0 clamp(40px,6vw,70px);}
.cat-hero .container{
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center;
}
.cat-hero h1{font-size:var(--fs-h2);line-height:1.1;max-width:16ch;}
.cat-hero .lead{font-size:var(--fs-body);color:var(--slate);max-width:46ch;}
.cat-hero .bezel{aspect-ratio:4/3;}
.cat-hero .bezel .screen{aspect-ratio:4/3;}
.cat-hero .bezel img{width:100%;height:100%;object-fit:cover;}
@media (max-width:760px){.cat-hero .container{grid-template-columns:1fr;}.cat-hero .bezel{order:-1;}}

.mini-gallery{display:flex;gap:.7em;margin-top:1.4em;}
.mini-gallery .bezel{width:64px;aspect-ratio:1/1;padding:0;border-radius:10px;}
.mini-gallery .bezel .screen{aspect-ratio:1/1;border-radius:8px;}
.mini-gallery .bezel img{width:100%;height:100%;object-fit:cover;}

/* ===========================================================
   PRODUCT GRID
   =========================================================== */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3em;}
.product-card{
  background:var(--white);
  border:1px solid rgba(10,42,88,.08);
  border-radius:var(--radius-sm);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.product-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -16px rgba(10,42,88,.18);}
.product-card .shot{aspect-ratio:4/3;background:var(--chalk-2);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.product-card .shot img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;}
.product-card .pc-body{padding:1.1em 1.2em 1.3em;display:flex;flex-direction:column;flex:1;}
.product-card h3{font-size:var(--fs-ui);margin-bottom:.3em;line-height:1.25;}
.product-card p{font-size:var(--fs-ui);color:var(--slate);margin-bottom:1em;flex:1;}
.product-card .pc-foot{display:flex;align-items:center;justify-content:space-between;gap:.6em;margin-top:auto;}
.product-card .price-tag{font-family:var(--body);font-size:var(--fs-caption);color:var(--slate-2);text-transform:uppercase;}
.product-card .pc-cta{font-family:var(--body);font-size:var(--fs-caption);text-transform:uppercase;color:var(--board);display:flex;align-items:center;gap:.3em;white-space:nowrap;}
.product-card:hover .pc-cta{color:var(--signal-dim);}
@media (max-width:1000px){.product-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.product-grid{grid-template-columns:1fr;}}

/* category intro strip (count + filter-ish text) */
.cat-intro-row{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:1.6em;flex-wrap:wrap;gap:.6em;
}
.cat-intro-row .count{font-family:var(--body);font-size:var(--fs-caption);color:var(--slate);}

/* related categories strip */
.related-cats{display:flex;gap:.8em;flex-wrap:wrap;}
.related-cats a{
  font-family:var(--body);font-size:var(--fs-caption);text-transform:uppercase;
  border:1px solid rgba(10,42,88,.15);border-radius:999px;
  padding:.55em 1.1em;color:var(--ink);
}
.related-cats a:hover{border-color:var(--signal);color:var(--signal-dim);}

/* ===========================================================
   SOLUTION (rjesenje) PAGE — kit tier
   =========================================================== */
.tier-nav{display:flex;gap:.6em;flex-wrap:wrap;margin-bottom:2em;}
.tier-nav a{
  font-family:var(--body);font-size:var(--fs-caption);text-transform:uppercase;
  padding:.6em 1.2em;border-radius:999px;border:1px solid rgba(10,42,88,.15);color:var(--slate);
}
.tier-nav a.is-active{background:var(--ink);color:var(--chalk);border-color:var(--ink);}
.tier-nav a:hover:not(.is-active){border-color:var(--signal);color:var(--signal-dim);}

.tier-hero{padding:1.6em 0 clamp(40px,6vw,70px);}
.tier-hero .container{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center;}
.tier-hero h1{font-size:var(--fs-h2);max-width:18ch;}
.tier-hero .bezel{aspect-ratio:4/3;}
.tier-hero .bezel .screen{aspect-ratio:4/3;}
.tier-hero .bezel img{width:100%;height:100%;object-fit:cover;}
.tier-pricepill{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--body);font-size:var(--fs-caption);
  background:var(--chalk-2);border-radius:999px;padding:.4em 1em;margin-bottom:1.2em;
}
.tier-pricepill .dot{width:6px;height:6px;border-radius:50%;background:var(--signal);}
@media (max-width:760px){.tier-hero .container{grid-template-columns:1fr;}.tier-hero .bezel{order:-1;}}

.includes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2em;}
.includes-card{
  border:1px solid rgba(10,42,88,.1);border-radius:var(--radius-sm);
  padding:1.4em 1.3em;
}
.includes-card .ic{color:var(--signal);margin-bottom:.6em;}
.includes-card h3{font-size:var(--fs-body);}
.includes-card p{font-size:var(--fs-ui);color:var(--slate);margin-bottom:0;}
@media (max-width:900px){.includes-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.includes-grid{grid-template-columns:1fr;}}

.compare-strip{display:flex;gap:1em;flex-wrap:wrap;}
.compare-pill{
  flex:1;min-width:200px;
  border:1px solid rgba(247,244,236,.18);border-radius:var(--radius-sm);
  padding:1.3em 1.2em;
}
.compare-pill.is-current{border-color:var(--signal);background:rgba(255,107,53,.08);}
.compare-pill h4{color:var(--chalk);font-family:var(--display);font-size:var(--fs-body);margin-bottom:.3em;}
.compare-pill p{color:rgba(247,244,236,.7);font-size:var(--fs-ui);margin-bottom:0;}
.compare-pill a{font-family:var(--body);font-size:var(--fs-caption);text-transform:uppercase;color:var(--led);}


/* ===========================================================
   GLOBALNA MOBILNA RESPONZIVNOST — sprječava horizontalni scroll
   =========================================================== */

/* Hard stop protiv probijanja širine na SVIM stranicama */
html, body{max-width:100%;overflow-x:clip;}
*{min-width:0;}
img, svg, video, table{max-width:100%;}

/* Slike u produkt stranicama i bezelima nikad ne probijaju */
.bezel, .bezel img, .screen, .screen img{max-width:100%;}

/* Tablet i niže — inline product-page gridovi (1.1fr 1fr) se lome */
@media (max-width:820px){
  /* Hero sekcija produkt stranice: 2 kolone → 1 */
  section[style*="grid-template-columns:1.1fr 1fr"] > div[style*="grid"],
  div[style*="grid-template-columns:1.1fr 1fr"]{
    grid-template-columns:1fr !important;
    gap:1.5rem !important;
  }
  /* "O proizvodu" sekcija: 1fr 1fr → 1 */
  div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
    gap:1.5rem !important;
  }
  /* Feature grid unutar produkta (2 stupca) ostaje 2 do 560 */
}

/* Slični proizvodi: 3 kolone → 2 → 1 */
@media (max-width:760px){
  div[style*="grid-template-columns:repeat(3,1fr)"]{
    grid-template-columns:repeat(2,1fr) !important;
  }
}
@media (max-width:520px){
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns:repeat(2,1fr)"]{
    grid-template-columns:1fr !important;
  }
  /* Feature grid (ikone) na vrlo malim ekranima → 1 */
  div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
}

/* Breadcrumb na mobitelu — prelama se umjesto da gura širinu */
p[style*="letter-spacing:.1em"][style*="text-transform:uppercase"]{
  word-break:break-word;
}

/* Spec tablice — dopusti horizontalni scroll SAMO unutar tablice, ne cijele stranice */
@media (max-width:600px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table td{white-space:normal !important;}
}

/* Container padding na mobitelu */
@media (max-width:600px){
  .container{padding-left:18px;padding-right:18px;}
}

/* Hero naslovi i tekst — sprječava da duge riječi probiju */
h1, h2, h3{overflow-wrap:break-word;word-wrap:break-word;}

/* Dugmad u redu na mobitelu se prelamaju */
@media (max-width:520px){
  div[style*="display:flex"][style*="gap"]{flex-wrap:wrap;}
}

/* Navigacija — osiguraj da mega meni ne probija */
@media (max-width:900px){
  .mega{max-width:100vw;}
}

/* 360° i interaktivne stranice — slike i widgeti */
.scene, .sc, #rw, #pw{max-width:100% !important;}

/* Pojačano: inline white-space:nowrap u spec tablicama se poništava na mobitelu */
@media (max-width:600px){
  table td[style*="nowrap"]{white-space:normal !important;}
  table tr{display:table-row;}
}

/* 4-kolone sekcije (npr. "Svaki paket uključuje") → 2+2 na tabletu, 1 na malom */
@media (max-width:760px){
  div[style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:repeat(2,1fr) !important;
    gap:1.4em !important;
  }
}
@media (max-width:420px){
  div[style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:1fr !important;
  }
}

/* ── Hero: interaktivni 3D prikaz učionice (prizma) ── */
.hero-prism{width:100%;text-align:center;}
.hero-prism .demo-note{
  display:inline-flex;align-items:center;gap:.6em;margin:18px auto 0;
  background:var(--white);border:1px solid var(--chalk-2);border-radius:var(--radius-sm);
  box-shadow:0 10px 24px -12px rgba(20,33,61,.22);
  padding:.75em 1.15em;font-family:var(--body);font-size:var(--fs-caption);
  text-decoration:none;color:var(--ink);transition:transform .15s ease, box-shadow .2s ease;
}
.hero-prism .demo-note:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(20,33,61,.3);}
.hero-prism .demo-note .dot{width:7px;height:7px;border-radius:50%;background:var(--led);flex:none;}
.hero-prism .demo-note .ft-arrow{color:var(--signal);font-family:var(--body);font-weight:600;margin-left:.15em;transition:transform .2s ease;}
.hero-prism .demo-note:hover .ft-arrow{transform:translateX(3px);}
.wall-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:380px;margin:0 auto 14px;}
.wb{font-family:var(--body);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.06em;padding:7px 10px;border-radius:20px;border:1px solid var(--chalk-2);color:var(--slate);background:var(--white);cursor:pointer;transition:all .18s;user-select:none;white-space:nowrap;text-align:center;}
.wb:hover{border-color:var(--slate);color:var(--ink);}
.wb.on{background:var(--signal);border-color:var(--signal);color:#fff;}
#rw{
  position:relative;width:100%;max-width:860px;height:360px;margin:0 auto;
  perspective:1500px;perspective-origin:50% 44%;
  overflow:hidden;border-radius:16px;
  background:radial-gradient(120% 95% at 50% 36%,#123a60 0%,#0a2138 46%,#050f1b 82%);
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;
}
#rw:active{cursor:grabbing;}
#cube{position:absolute;top:50%;left:50%;width:620px;height:360px;margin:-180px 0 0 -310px;transform-style:preserve-3d;transform:translateZ(-40px) scale(1) rotateY(0deg);}
.face{position:absolute;width:620px;height:360px;background:#0a1c2e;opacity:0;transition:opacity .4s ease;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.f-front{transform:rotateY(0deg) translateZ(310px);}
.f-right{transform:rotateY(90deg) translateZ(310px);}
.f-back{transform:rotateY(180deg) translateZ(310px);}
.f-left{transform:rotateY(-90deg) translateZ(310px);}
.fbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.fgrad{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,17,30,.94) 0%,rgba(4,17,30,.35) 52%,rgba(4,17,30,.12) 100%);}
.fcard{position:absolute;bottom:calc(16px*var(--iscl,1.5));left:0;right:0;padding:0 calc(24px*var(--iscl,1.5));}
.f-cat{font-family:var(--body);font-size:calc(.66rem*var(--iscl,1.5));text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.6);margin-bottom:calc(3px*var(--iscl,1.5));}
.f-name{font-family:var(--display);font-size:calc(1.06rem*var(--iscl,1.5));font-weight:600;color:#fff;line-height:1.2;margin-bottom:calc(5px*var(--iscl,1.5));}
.f-desc{font-size:calc(.82rem*var(--iscl,1.5));color:rgba(255,255,255,.78);line-height:1.45;margin-bottom:calc(10px*var(--iscl,1.5));max-width:44ch;}
.f-btn{display:inline-flex;align-items:center;gap:.4em;font-family:var(--body);font-size:calc(.72rem*var(--iscl,1.5));text-transform:uppercase;letter-spacing:.06em;color:var(--signal);border:.5px solid var(--signal);border-radius:20px;padding:calc(4px*var(--iscl,1.5)) calc(12px*var(--iscl,1.5));text-decoration:none;transition:background .15s;}
.f-btn:hover{background:rgba(255,107,53,.15);}
#hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(4,17,30,.75);backdrop-filter:blur(4px);color:#fff;font-size:var(--fs-ui);font-family:var(--body);padding:8px 16px;border-radius:20px;pointer-events:none;transition:opacity .6s;display:flex;align-items:center;gap:.5em;border:1px solid rgba(255,255,255,.15);}
.hint-icon{font-size:var(--fs-body);}
@media (max-width:700px){#rw{height:320px;}}
@media (max-width:420px){.wb{font-size:var(--fs-caption);padding:7px 5px;letter-spacing:.03em;}}

/* ── FAQ / Q&A accordion (naslovnica) ── */
.faq-list{max-width:760px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--chalk-2);}
.faq-item:first-child{border-top:1px solid var(--chalk-2);}
.faq-item summary{
  list-style:none;cursor:pointer;padding:1.15em 0;
  display:flex;align-items:center;justify-content:space-between;gap:1.2em;
  font-family:var(--display);font-weight:600;font-size:var(--fs-body);color:var(--ink);
  transition:color .15s ease;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--board);}
.faq-item summary::after{
  content:"";flex:none;width:9px;height:9px;margin-right:5px;
  border-right:2px solid var(--signal);border-bottom:2px solid var(--signal);
  transform:rotate(45deg);transition:transform .25s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg);}
.faq-a{padding:0 0 1.3em;color:var(--slate);line-height:1.7;max-width:66ch;}
.faq-a p{margin:0;}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.faq-item[open] .faq-a{animation:faqIn .25s ease;}

/* ── Recenzije – slideshow ── */
.testi-carousel{max-width:820px;margin:0 auto;}
.testi-stage{position:relative;padding:0 clamp(46px,6vw,60px);}
.testi-viewport{position:relative;}
.testi-slide{position:absolute;top:0;left:0;width:100%;opacity:0;visibility:hidden;text-align:center;}
.testi-slide.is-active{opacity:1;visibility:visible;animation:testiIn .5s ease;}
@keyframes testiIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.testi-slide .quote{font-family:var(--display);font-weight:500;font-size:var(--fs-h3);line-height:1.6;color:var(--ink);margin:0 auto;max-width:60ch;}
.testi-slide .src{font-family:var(--body);font-size:var(--fs-ui);text-transform:uppercase;letter-spacing:.06em;color:var(--signal-dim);margin:1.4em 0 0;}
.testi-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--chalk-2);background:var(--white);color:var(--ink);font-size:var(--fs-h3);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .18s,color .18s;box-shadow:0 8px 20px -12px rgba(20,33,61,.35);}
.testi-arrow:hover{border-color:var(--signal);color:var(--signal);}
.testi-arrow.prev{left:0;}
.testi-arrow.next{right:0;}
.testi-dots{display:flex;justify-content:center;gap:9px;margin-top:2em;}
.testi-dots .tdot{width:9px;height:9px;padding:0;border:none;border-radius:50%;background:var(--chalk-2);cursor:pointer;transition:background .2s,transform .2s;}
.testi-dots .tdot:hover{background:var(--slate);}
.testi-dots .tdot.is-active{background:var(--signal);transform:scale(1.3);}
@media (max-width:600px){
  .testi-stage{padding:0 38px;}
  .testi-arrow{width:38px;height:38px;font-size:var(--fs-h3);}
  .testi-slide .quote{font-size:var(--fs-body);}
}

/* ── Hero: stacked full-width prizma (redizajn) ── */
.hero--stack .container{display:block;}
.hero--stack .hero-copy{max-width:880px;margin:0 auto;text-align:center;}
.hero--stack .eyebrow{justify-content:center;}
.hero--stack .hero-copy h1{max-width:20ch;margin:0 auto;text-wrap:balance;}
.hero--stack .hero-copy .lead{max-width:58ch;margin:1.2em auto 0;}
.hero--stack .cta-row{justify-content:center;}
.hero--stack .stat-rail{justify-content:center;margin-top:2.9em;}
.hero-prism--big{max-width:920px;margin:2.8em auto 0;}
.hero-prism--big #rw{height:530px;background:transparent;border-radius:22px;box-shadow:0 28px 58px -26px rgba(10,33,58,.34);}
.hero-prism--big .wall-nav{display:flex;flex-wrap:wrap;justify-content:center;max-width:none;gap:10px;}
@media (max-width:700px){
  .hero-prism--big #rw{height:300px;}
}
@media (max-width:600px){
  .hero-prism--big .wall-nav{display:grid;grid-template-columns:1fr 1fr;max-width:380px;}
}

/* ── Toast obavijest (slanje forme) ── */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(24px);
  z-index:1000;width:min(92vw,430px);
  display:flex;align-items:flex-start;gap:.75em;
  background:var(--white);border:1px solid var(--chalk-2);border-radius:var(--radius-sm);
  box-shadow:0 24px 50px -18px rgba(20,33,61,.4);
  padding:1em 1.1em;
  opacity:0;pointer-events:none;transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.toast .toast-ic{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-ui);color:#fff;margin-top:1px;line-height:1;
}
.toast.ok .toast-ic{background:#1FA463;}
.toast.err .toast-ic{background:var(--signal);}
.toast .toast-body{flex:1;font-size:var(--fs-ui);line-height:1.5;}
.toast .toast-body strong{display:block;font-family:var(--display);font-size:var(--fs-ui);color:var(--ink);margin-bottom:.15em;}
.toast .toast-msg{color:var(--slate);}
.toast .toast-x{
  flex:none;background:none;border:none;cursor:pointer;
  font-size:var(--fs-h3);line-height:1;color:var(--slate);opacity:.6;padding:0 .1em;transition:opacity .15s;
}
.toast .toast-x:hover{opacity:1;}
@media (max-width:480px){.toast{left:12px;right:12px;transform:translateY(24px);width:auto;} .toast.show{transform:translateY(0);}}

/* ---- Consent banner ---- */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:var(--ink);color:var(--chalk);box-shadow:0 -8px 30px rgba(10,50,88,.25);transform:translateY(110%);transition:transform .3s ease;}
.cookie-banner.show{transform:translateY(0);}
.cookie-inner{max-width:var(--max);margin:0 auto;padding:1em var(--gutter);display:flex;align-items:center;gap:1.4em;flex-wrap:wrap;justify-content:space-between;}
.cookie-text{margin:0;font-size:var(--fs-ui);color:rgba(244,247,251,.85);max-width:62ch;line-height:1.6;}
.cookie-text a{color:var(--led);text-decoration:underline;}
.cookie-actions{display:flex;gap:.6em;flex-shrink:0;}
.cookie-link{background:none;border:none;padding:0;cursor:pointer;color:inherit;font:inherit;text-decoration:underline;}
@media (max-width:560px){
  .cookie-inner{flex-direction:column;align-items:stretch;}
  .cookie-actions .btn{flex:1;justify-content:center;}
}