*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--black);color:var(--text);font-family:'Exo 2',sans-serif;overflow-x:hidden;min-height:100vh;}

/* ─── GRID BG ─── */
body::before{
  content:'';position:fixed;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%,   rgba(10,60,180,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 15%,  rgba(0,80,200,0.14) 0%, transparent 50%),
    radial-gradient(ellipse 80% 35% at 50% 100%, rgba(10,100,255,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 35% 35% at 75% 60%,  rgba(0,40,120,0.12) 0%, transparent 50%),
    radial-gradient(ellipse 55% 25% at 10% 70%,  rgba(0,60,160,0.10) 0%, transparent 50%);
  pointer-events:none;z-index:0;
}

/* Noise grain overlay for depth */
body::after{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:200px 200px;
  pointer-events:none;z-index:0;opacity:0.6;
}

/* ─── PAGES ─── */
.page{display:none;position:relative;z-index:1;min-height:100vh;}
.page.active{display:block;}

/* ─── NAV ─── */
.nav-left{display:flex;align-items:center;gap:12px;}

/* Hamburger */
.hamburger{
  background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;
  gap:5px;padding:6px;border-radius:4px;
  transition:background 0.2s;
}
.hamburger:hover{background:rgba(10,132,255,0.1);}
.hamburger span{
  display:block;width:22px;height:2px;
  background:var(--text);border-radius:2px;
  transition:all 0.3s;transform-origin:center;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Overlay */
.menu-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(4,8,15,0.75);
  z-index:300;
}
.menu-overlay.active{display:block;animation:fadeIn 0.25s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* Slide menu */
.slide-menu{
  position:fixed;top:0;left:0;bottom:0;width:310px;
  background:var(--panel2);border-right:1px solid var(--border);
  z-index:400;
  transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1);
  display:flex;flex-direction:column;
  overflow-y:auto;
  will-change:transform;
  contain:layout style;
}
.slide-menu.open{transform:translateX(0);}

.slide-menu-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.slide-menu-logo{display:flex;align-items:center;gap:0;}
.slide-menu-close{
  background:none;border:none;color:var(--dim);
  font-size:1.2rem;cursor:pointer;padding:4px 8px;
  border-radius:4px;transition:color 0.2s;
}
.slide-menu-close:hover{color:var(--blue);}

.slide-menu-label{
  font-size:0.65rem;font-weight:700;letter-spacing:3px;
  text-transform:uppercase;color:var(--blue);
  padding:20px 20px 8px;opacity:0.8;
}

.slide-menu-items{flex:1;padding:0 10px;}

.menu-item{
  width:100%;background:none;border:none;
  display:flex;align-items:center;gap:12px;
  padding:13px 12px;border-radius:6px;
  cursor:pointer;font-family:"Exo 2",sans-serif;
  color:var(--text);text-align:left;
  transition:background 0.18s;position:relative;
  margin-bottom:2px;
}
.menu-item:hover{background:rgba(10,132,255,0.08);}
.menu-item-hot:hover{background:rgba(255,100,32,0.08);}
.menu-item-green:hover{background:rgba(0,212,100,0.07);}
.menu-item-teal:hover{background:rgba(0,200,255,0.07);}

.mi-icon{font-size:1.3rem;flex-shrink:0;width:28px;text-align:center;}
.mi-name{font-size:0.88rem;font-weight:600;flex:1;line-height:1.3;}
.mi-arr{color:var(--dim);font-size:0.9rem;flex-shrink:0;transition:transform 0.2s;}
.menu-item:hover .mi-arr{transform:translateX(4px);color:var(--blue);}
.menu-item-hot .mi-arr,.menu-item-green .mi-arr{display:none;}

.mi-badge{
  font-size:0.58rem;font-weight:700;letter-spacing:1.5px;
  padding:2px 7px;border-radius:3px;flex-shrink:0;
  background:linear-gradient(90deg,var(--orange),#ffb347);color:#fff;
}
.mi-badge-green{background:linear-gradient(90deg,#00b341,#00d464) !important;}

.slide-menu-footer{
  padding:16px 20px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:10px;flex-shrink:0;
}
.slide-footer-link{
  display:flex;align-items:center;gap:8px;
  font-size:0.85rem;font-weight:600;color:var(--dim);
  text-decoration:none;padding:9px 12px;border-radius:6px;
  border:1px solid var(--border);transition:all 0.2s;
}
.slide-footer-link:hover{color:var(--blue);border-color:var(--blue);}
.slide-footer-link.green{color:#25D366;border-color:rgba(37,211,102,0.3);}
.slide-footer-link.green:hover{background:rgba(37,211,102,0.08);border-color:#25D366;}
.slide-footer-link.insta{color:#E1306C;border-color:rgba(225,48,108,0.3);}
.slide-footer-link.insta:hover{background:rgba(225,48,108,0.08);border-color:#E1306C;}

nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5%;height:56px;
  background:rgba(4,8,15,0.98);
  border-bottom:1px solid rgba(22,32,64,0.6);
}
.nav-logo{
  display:inline-flex;align-items:center;gap:0;
  background:none;border:none;cursor:pointer;padding:0;
  text-decoration:none;line-height:1;
}
.logo-h{
  font-family:'Orbitron',sans-serif;
  font-size:1.05rem;font-weight:700;
  color:#ffffff;
  letter-spacing:2px;
  text-transform:uppercase;
  transition:letter-spacing 0.35s cubic-bezier(0.16,1,0.3,1), text-shadow 0.35s ease;
}
.logo-sep{
  width:2px;height:16px;
  background:linear-gradient(180deg,var(--blue),var(--accent));
  margin:0 7px;
  border-radius:2px;
  flex-shrink:0;
  box-shadow:0 0 6px rgba(10,132,255,0.7);
  transition:height 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
}
.logo-c{
  font-family:'Orbitron',sans-serif;
  font-size:1.05rem;font-weight:700;
  color:transparent;
  background:linear-gradient(90deg,var(--blue),var(--accent));
  -webkit-background-clip:text;background-clip:text;
  letter-spacing:2px;
  text-transform:uppercase;
  text-shadow:none;
  filter:drop-shadow(0 0 8px rgba(10,132,255,0.4));
  transition:letter-spacing 0.35s cubic-bezier(0.16,1,0.3,1), filter 0.35s ease;
}
.nav-logo:hover .logo-h{
  letter-spacing:4px;
  text-shadow:0 0 12px rgba(255,255,255,0.3);
}
.nav-logo:hover .logo-sep{
  height:22px;
  box-shadow:0 0 14px rgba(10,132,255,1), 0 0 28px rgba(0,212,255,0.5);
}
.nav-logo:hover .logo-c{
  letter-spacing:4px;
  filter:drop-shadow(0 0 14px rgba(10,132,255,0.8));
}
.nav-tagline{
  font-family:'Rajdhani',sans-serif;
  font-size:0.72rem;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--dim);
  display:flex;align-items:center;gap:6px;
  margin-left:16px;
  padding-left:16px;
  border-left:1px solid var(--border);
}
.nav-tag-dot{
  width:4px;height:4px;border-radius:50%;
  background:var(--blue);flex-shrink:0;
  box-shadow:0 0 6px rgba(10,132,255,0.8);
}
@media(max-width:900px){
  .nav-tagline{display:none;}
}

/* Nav Links (route navigation) */
.nav-links{
  display:flex;align-items:center;gap:2px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;padding:3px;
}
.nav-link{
  background:none;border:none;color:var(--dim);text-decoration:none;
  font-family:'Exo 2',sans-serif;font-size:0.72rem;
  font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  padding:6px 14px;border-radius:8px;cursor:pointer;
  transition:all 0.25s ease;white-space:nowrap;
  display:flex;align-items:center;gap:5px;
  position:relative;
}
.nav-link svg{opacity:0.5;transition:opacity 0.25s;}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,0.06);}
.nav-link:hover svg{opacity:0.8;}
.nav-link.active{
  color:#fff;
  background:rgba(10,132,255,0.18);
  box-shadow:0 0 12px rgba(10,132,255,0.15);
}
.nav-link.active svg{opacity:1;stroke:var(--blue);}
@media(max-width:900px){.nav-links{display:none;}}
:root[data-theme="light"] .nav-links{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.06);
}
:root[data-theme="light"] .nav-link{color:#5a6a7a;}
:root[data-theme="light"] .nav-link:hover{color:#1a2a3a;background:rgba(0,0,0,0.04);}
:root[data-theme="light"] .nav-link.active{
  color:#0A84FF;background:rgba(10,132,255,0.1);
  box-shadow:0 0 12px rgba(10,132,255,0.08);
}
:root[data-theme="light"] .nav-link.active svg{stroke:#0A84FF;}

.nav-right{
  display:flex;align-items:center;gap:6px;
}
.nav-back{
  display:none;align-items:center;gap:6px;
  background:none;border:1px solid var(--border);border-radius:8px;
  color:var(--dim);font-family:'Exo 2',sans-serif;font-size:0.78rem;
  font-weight:600;letter-spacing:1px;text-transform:uppercase;
  padding:7px 14px;cursor:pointer;transition:all 0.2s;
}
.nav-back:hover{color:var(--blue);border-color:var(--blue);}
.nav-back.visible{display:flex;}
.nav-booking{
  display:flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,rgba(10,132,255,0.12),rgba(0,212,255,0.06));
  border:1px solid rgba(10,132,255,0.3);border-radius:8px;
  color:var(--blue);font-family:'Exo 2',sans-serif;font-size:0.78rem;
  font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:7px 14px;cursor:pointer;transition:all 0.2s;
}
.nav-booking svg{stroke:var(--blue);flex-shrink:0;}
.nav-booking:hover{
  background:linear-gradient(135deg,rgba(10,132,255,0.2),rgba(0,212,255,0.1));
  border-color:var(--blue);
  box-shadow:0 0 12px rgba(10,132,255,0.15);
}
@media(max-width:600px){.nav-booking span{display:none;}.nav-booking{padding:7px 9px;}}
.nav-lang{
  background:none;border:1px solid var(--border);border-radius:8px;
  color:var(--dim);padding:5px 10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;font-family:'Exo 2',sans-serif;
  font-size:0.7rem;font-weight:700;letter-spacing:1px;
}
.nav-lang:hover{border-color:var(--blue);color:var(--blue);}
[data-lang="en"] .nav-lang{border-color:var(--blue);color:var(--blue);background:rgba(10,132,255,0.08);}
.nav-theme{
  background:none;border:1px solid var(--border);border-radius:8px;
  color:var(--dim);padding:7px 9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;
}
.nav-theme svg{stroke:var(--dim);transition:stroke 0.2s;}
.nav-theme:hover{border-color:var(--blue);color:var(--blue);}
.nav-theme:hover svg{stroke:var(--blue);}
.nav-theme .theme-icon-moon{display:none;}
:root[data-theme="light"] .nav-theme .theme-icon-sun{display:none;}
:root[data-theme="light"] .nav-theme .theme-icon-moon{display:block;}
:root[data-theme="light"] nav{background:rgba(240,244,248,0.95);border-bottom-color:var(--border);}
:root[data-theme="light"] .logo-h{color:#0f1722;}
:root[data-theme="light"] .hamburger span{background:#0f1722;}


/* ─── HOME HERO ─── */
#home-hero{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:flex-start;
  text-align:left;padding:120px 6% 0;
  position:relative;overflow:hidden;
  background:url('../images/hero-bg.jpg') 65% 70% / cover no-repeat;
}
#home-hero::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg, rgba(2,6,14,0.35) 0%, rgba(2,6,14,0.05) 25%, rgba(2,6,14,0.0) 45%, rgba(2,6,14,0.5) 72%, rgba(2,6,14,0.95) 100%),
    linear-gradient(90deg, rgba(2,6,14,0.92) 0%, rgba(2,6,14,0.75) 28%, rgba(2,6,14,0.3) 52%, transparent 70%);
}
.hero-glow-ring{
  position:absolute;width:1000px;height:1000px;border-radius:50%;
  background:radial-gradient(circle,rgba(10,132,255,0.06) 0%,rgba(0,212,255,0.02) 35%,transparent 60%);
  top:45%;left:50%;transform:translate(-50%,-50%);
  opacity:0.65;pointer-events:none;
}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(10,132,255,0.3);border-radius:20px;
  padding:6px 20px;font-size:0.72rem;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--blue);
  background:rgba(10,132,255,0.1);margin-bottom:20px;
  opacity:0;position:relative;z-index:2;
  margin-top:20px;
}
.hero-animate .hero-eyebrow{animation:fadeUp 0.6s ease both;}
.hero-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.15;}}

.hero-title{
  font-family:'Orbitron',sans-serif;
  font-size:clamp(1.8rem,5vw,3.5rem);
  font-weight:900;line-height:0.95;
  letter-spacing:-1px;
  position:relative;z-index:2;
  text-shadow:0 2px 30px rgba(0,0,0,0.6);
}
.ht-white{text-shadow:0 0 40px rgba(255,255,255,0.15);}
.hero-car-label{
  position:absolute;right:5%;bottom:42%;z-index:3;
  font-family:'Orbitron',sans-serif;font-size:1.1rem;font-weight:700;
  color:#fff;letter-spacing:5px;
  text-transform:uppercase;text-align:right;
  text-shadow:0 2px 16px rgba(0,0,0,0.9),0 0 30px rgba(10,132,255,0.4);
  pointer-events:none;
}
.hero-car-label span{
  display:block;font-size:0.6rem;font-weight:500;
  letter-spacing:6px;color:var(--blue);opacity:0.8;
  margin-top:4px;
}
@media(max-width:768px){
  .hero-car-label{display:none;}
}
.ht-white{color:#ffffff;display:block;}
.ht-blue{display:block;}
.ht-blue .hl{
  color:transparent;
  background:linear-gradient(90deg,var(--blue),var(--accent),var(--blue));
  background-size:200%;
  -webkit-background-clip:text;background-clip:text;
}
@keyframes shimmer{0%{background-position:0%;}100%{background-position:200%;}}

/* Hero letter-by-letter animation — triggered after loading screen */
.hl{
  display:inline-block;
  opacity:0;
  transform:translateY(30px) scale(0.8);
}
.hero-animate .hl{
  animation:heroLetterIn 0.5s calc(var(--i) * 0.07s) cubic-bezier(0.16,1,0.3,1) forwards;
}
.hero-animate .ht-blue .hl{
  animation:heroLetterIn 0.5s calc(var(--i) * 0.07s) cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes heroLetterIn{
  0%{opacity:0;transform:translateY(30px) scale(0.8);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

.hero-sub{
  display:block;font-family:'Rajdhani',sans-serif;
  font-size:1.3rem;color:#fff;
  line-height:1.5;max-width:460px;margin-top:22px;
  position:relative;z-index:2;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  text-shadow:0 2px 24px rgba(0,0,0,0.6);
  border-left:3px solid var(--blue);
  padding-left:14px;
}
.hero-animate .hero-sub{animation:fadeUp 0.6s 1.1s ease both;}
.hero-divider{display:none;}
.hero-animate .hero-divider{animation:fadeUp 0.6s 1.2s ease both;}
.hero-animate .stats-bar{animation:fadeUp 0.6s 1.3s ease both;}
.hero-animate .tools-bar{animation:fadeUp 0.6s 1.4s ease both;}

/* ─── SERVICES SECTION ─── */
#services-section{padding:0 5% 80px;}
.sec-label{
  text-align:center;margin-bottom:44px;
  font-size:0.72rem;letter-spacing:3px;text-transform:uppercase;
  color:var(--blue);font-weight:600;
  animation:fadeUp 0.7s 0.3s ease both;
}
.sec-label::before,.sec-label::after{content:'──';margin:0 10px;opacity:0.3;}

/* ─── QUICK LINKS (Home page) ─── */
.home-quick-links{padding:0 5% 80px;position:relative;z-index:1;}
.quick-links-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;max-width:1100px;margin:0 auto;
}
.ql-card{
  display:flex;flex-direction:column;align-items:center;gap:0;
  background:rgba(8,14,26,0.5);
  border:1px solid rgba(255,255,255,0.04);
  border-radius:20px;padding:32px 20px 24px;
  text-decoration:none;color:var(--text);
  transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  position:relative;overflow:hidden;
  text-align:center;
  animation:qlFadeIn 0.6s cubic-bezier(0.25,0.46,0.45,0.94) backwards;
  animation-delay:var(--ql-delay,0s);
}
@keyframes qlFadeIn{
  from{opacity:0;transform:translateY(20px) scale(0.95);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.ql-card::before{
  content:'';position:absolute;inset:0;opacity:0;
  transition:opacity 0.5s;pointer-events:none;
  background:radial-gradient(circle at 50% 30%,hsla(var(--ql-hue),80%,55%,0.1),transparent 70%);
}
.ql-card::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:0;height:3px;border-radius:3px 3px 0 0;
  background:var(--ql-color);
  transition:width 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.ql-card:hover{
  border-color:hsla(var(--ql-hue),60%,50%,0.25);
  transform:translateY(-8px);
  background:rgba(8,14,26,0.85);
  box-shadow:
    0 16px 48px rgba(0,0,0,0.3),
    0 0 40px hsla(var(--ql-hue),70%,50%,0.08),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
.ql-card:hover::before{opacity:1;}
.ql-card:hover::after{width:50%;}
.ql-index{display:none;}
.ql-icon-wrap{
  width:56px;height:56px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  position:relative;z-index:1;
  background:hsla(var(--ql-hue),60%,50%,0.1);
  color:var(--ql-color);
  border:1px solid hsla(var(--ql-hue),60%,50%,0.12);
  margin-bottom:18px;
  transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.ql-icon-wrap svg{width:26px;height:26px;}
.ql-card:hover .ql-icon-wrap{
  transform:scale(1.12) translateY(-2px);
  box-shadow:0 8px 28px hsla(var(--ql-hue),70%,50%,0.25);
  border-color:hsla(var(--ql-hue),60%,50%,0.3);
  background:hsla(var(--ql-hue),60%,50%,0.18);
}
.ql-body{flex:1;min-width:0;position:relative;z-index:1;margin-bottom:14px;}
.ql-name{
  font-family:'Rajdhani',sans-serif;font-size:1.05rem;font-weight:700;
  margin-bottom:6px;letter-spacing:0.3px;
}
.ql-desc{font-family:'Exo 2',sans-serif;font-size:0.72rem;color:var(--dim);line-height:1.6;margin-bottom:0;opacity:0.5;}
.ql-arrow{
  display:flex;align-items:center;gap:6px;
  font-family:'Exo 2',sans-serif;
  font-size:0.72rem;font-weight:700;letter-spacing:0.5px;
  color:var(--ql-color);transition:all 0.35s;
  opacity:0;white-space:nowrap;
  margin-top:auto;
  transform:translateY(4px);
}
.ql-card:hover .ql-arrow{opacity:1;transform:translateY(0);}
@media(max-width:900px){
  .quick-links-grid{grid-template-columns:repeat(3,1fr);gap:10px;}
}
@media(max-width:768px){
  .quick-links-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .ql-card:nth-child(5){grid-column:1 / -1;max-width:50%;margin:0 auto;}
  .ql-card{padding:22px 16px 18px;border-radius:16px;}
  .ql-icon-wrap{width:46px;height:46px;margin-bottom:14px;}
  .ql-name{font-size:0.95rem;}
  .ql-desc{display:none;}
  .ql-body{margin-bottom:10px;}
  .ql-arrow{opacity:0.6;transform:none;}
}
@media(max-width:480px){
  .quick-links-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .ql-card:nth-child(5){max-width:100%;}
  .ql-card{padding:18px 14px 16px;}
  .ql-icon-wrap{width:40px;height:40px;}
}
/* Light mode */
:root[data-theme="light"] .ql-card{
  background:rgba(255,255,255,0.65);border-color:rgba(0,0,0,0.06);
}
:root[data-theme="light"] .ql-card:hover{
  background:rgba(255,255,255,0.9);border-color:hsla(var(--ql-hue),60%,50%,0.2);
  box-shadow:0 8px 32px rgba(0,0,0,0.08),0 0 0 1px hsla(var(--ql-hue),60%,50%,0.1);
}
:root[data-theme="light"] .ql-card::before{opacity:0 !important;}

/* ─── PAGE HEADERS (subpages) ─── */
.page-header{
  padding:90px 5% 40px;text-align:center;position:relative;z-index:1;
}
.page-header h1{
  font-family:'Rajdhani',sans-serif;font-size:2rem;font-weight:700;letter-spacing:1px;
  background:linear-gradient(90deg,var(--blue),#00d4ff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;margin-bottom:8px;
}
.page-header p{font-size:0.88rem;color:var(--dim);max-width:500px;margin:0 auto;}

.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:16px;max-width:1200px;margin:0 auto;
}

.svc-btn{
  background:var(--panel);border:1px solid var(--border);
  border-radius:8px;padding:32px 28px;
  cursor:pointer;text-align:left;
  transition:all 0.28s;position:relative;overflow:hidden;
  font-family:'Exo 2',sans-serif;color:var(--text);
  width:100%;
}
.svc-btn::before{
  content:'';position:absolute;top:0;left:0;
  width:100%;height:3px;
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.3s;
}
.svc-btn:hover{border-color:rgba(10,132,255,0.5);transform:translateY(-5px);box-shadow:0 18px 40px rgba(10,132,255,0.1);}
.svc-btn:hover::before{transform:scaleX(1);}
.svc-btn.blue::before{background:linear-gradient(90deg,var(--blue),var(--accent));}
.svc-btn.orange::before{background:linear-gradient(90deg,var(--orange),#ffb347);}
.svc-btn.green::before{background:linear-gradient(90deg,var(--green),#00ffaa);}
.svc-btn.orange{border-color:rgba(255,100,32,0.2);background:linear-gradient(135deg,var(--panel),rgba(255,80,20,0.04));}
.svc-btn.green{border-color:rgba(0,212,100,0.2);background:linear-gradient(135deg,var(--panel),rgba(0,212,100,0.03));}

.svc-badge{
  position:absolute;top:14px;right:14px;
  font-size:0.6rem;font-weight:700;letter-spacing:2px;padding:3px 9px;border-radius:3px;
}
.badge-hot{background:linear-gradient(90deg,var(--orange),#ffb347);color:#fff;}
.badge-new{background:linear-gradient(90deg,#00b341,#00d464);color:#fff;}

.svc-icon{font-size:2.2rem;margin-bottom:18px;display:block;}
.svc-name{
  font-family:'Rajdhani',sans-serif;font-size:1.2rem;
  font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:10px;
}
.svc-short{font-size:0.87rem;color:var(--dim);line-height:1.65;}
.svc-arrow{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:18px;font-size:0.75rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  transition:gap 0.2s;
}
.svc-btn.blue .svc-arrow{color:var(--blue);}
.svc-btn.orange .svc-arrow{color:var(--orange);}
.svc-btn.green .svc-arrow{color:var(--green);}
.svc-btn:hover .svc-arrow{gap:12px;}

@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}

/* ─── SCROLL REVEAL ─── */
.sr{opacity:0;transform:translateY(32px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1);}
.sr-left{opacity:0;transform:translateX(-40px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1);}
.sr-right{opacity:0;transform:translateX(40px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1);}
.sr-scale{opacity:0;transform:scale(0.92);transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1);}
.sr.in-view,.sr-left.in-view,.sr-right.in-view,.sr-scale.in-view{opacity:1;transform:none;}

/* ─── HOME EXTRAS (FAQ, CONTACT, FOOTER) ─── */
.home-section{padding:80px 5%;position:relative;z-index:1;}
.home-section.alt{background:var(--black2);}

.sec-header{text-align:center;margin-bottom:52px;}
.sec-tag{font-size:0.7rem;letter-spacing:3px;text-transform:uppercase;color:var(--blue);font-weight:600;display:block;margin-bottom:12px;}
.sec-tag::before,.sec-tag::after{content:'──';margin:0 8px;opacity:0.3;}
.sec-h2{font-family:'Rajdhani',sans-serif;font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:700;letter-spacing:2px;text-transform:uppercase;}
.sec-desc{margin-top:12px;color:var(--dim);font-size:0.95rem;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.7;}

/* Stats bar */
.stats-bar{
  display:flex;justify-content:center;flex-wrap:nowrap;gap:0;
  border:none;border-radius:0;overflow:hidden;
  width:100vw;margin-left:-6%;margin-top:auto;
  background:rgba(2,6,14,0.95);
  border-top:1px solid rgba(10,132,255,0.1);
  border-bottom:1px solid rgba(10,132,255,0.05);
  animation:fadeUp 0.7s 0.35s ease both;
  position:relative;z-index:2;
}
.stats-bar::before{display:none;}
.stat-item{
  padding:22px 40px;text-align:center;
  border-right:1px solid rgba(255,255,255,0.06);flex:1;min-width:auto;
  position:relative;transition:background 0.3s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.stat-item:hover{background:rgba(10,132,255,0.04);}
.stat-item:last-child{border-right:none;}
.stat-n{
  font-family:'Orbitron',sans-serif;font-size:1.6rem;font-weight:700;
  color:var(--blue);position:relative;display:inline-block;
  text-shadow:0 0 20px rgba(10,132,255,0.3);
}
.stat-l{font-size:0.6rem;color:var(--dim);letter-spacing:2px;text-transform:uppercase;margin-top:2px;font-weight:600;opacity:0.5;}

/* FAQ */
.faq-wrap{max-width:760px;margin:0 auto;}
.faq-btn{
  width:100%;background:var(--panel);border:1px solid var(--border);
  border-radius:6px;margin-bottom:10px;cursor:pointer;
  font-family:'Exo 2',sans-serif;text-align:left;color:var(--text);
  transition:border-color 0.2s;overflow:hidden;
}
.faq-btn:hover,.faq-btn.open{border-color:var(--blue);}
.faq-btn.open{background:rgba(10,132,255,0.05);}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;font-size:0.93rem;font-weight:600;gap:14px;}
.faq-ic{font-size:1.3rem;color:var(--blue);flex-shrink:0;transition:transform 0.3s;line-height:1;}
.faq-btn.open .faq-ic{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.35s ease,padding 0.3s;font-size:0.88rem;color:var(--dim);line-height:1.75;padding:0 22px;}
.faq-btn.open .faq-a{max-height:200px;padding:0 22px 18px;}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:900px;margin:0 auto;align-items:start;}
.cinfo-title{font-family:'Rajdhani',sans-serif;font-size:1.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;}
.cinfo-desc{color:var(--dim);line-height:1.8;font-size:0.93rem;margin-bottom:30px;}
.cinfo-item{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);}
.cinfo-item:last-child{border-bottom:none;}
.cinfo-icon{width:38px;height:38px;border-radius:4px;background:rgba(10,132,255,0.1);border:1px solid rgba(10,132,255,0.2);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}
.cinfo-txt{font-size:0.88rem;color:var(--dim);}
.cinfo-txt strong{display:block;color:var(--text);font-size:0.75rem;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px;}
.cinfo-txt a{color:var(--dim);text-decoration:none;transition:color 0.2s;}
.cinfo-txt a:hover{color:var(--blue);}
.cform{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:34px;}
.cform-title{font-family:'Rajdhani',sans-serif;font-size:1.2rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:22px;}
.fg{margin-bottom:16px;}
.fg label{display:block;font-size:0.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:6px;}
.fg input,.fg textarea,.fg select{
  width:100%;background:var(--black2);border:1px solid var(--border);
  border-radius:4px;padding:11px 14px;color:var(--text);
  font-family:'Exo 2',sans-serif;font-size:0.9rem;
  transition:border-color 0.2s;outline:none;
}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(10,132,255,0.15);}
.fg textarea{resize:vertical;min-height:100px;}
.fg select option{background:var(--panel);}
.btn-submit{width:100%;background:var(--blue);border:none;border-radius:4px;color:#fff;font-family:'Rajdhani',sans-serif;font-size:1rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:13px;cursor:pointer;transition:all 0.2s;box-shadow:0 0 20px rgba(10,132,255,0.3);}
.btn-submit:hover{background:var(--accent);color:var(--black);}

/* Footer */
site-footer{
  display:block;position:relative;z-index:1;padding:0 5%;
  background:linear-gradient(180deg,var(--black2) 0%,rgba(2,6,14,0.98) 100%);
  border-top:1px solid rgba(10,132,255,0.08);
}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:48px;
  padding:56px 0 44px;max-width:1200px;margin:0 auto;
}
.footer-col{display:flex;flex-direction:column;gap:0;}
.footer-brand-col{gap:18px;}
.footer-brand-col .footer-tagline{
  font-size:0.84rem;color:var(--dim);line-height:1.8;font-weight:400;max-width:300px;
}
.footer-socials{display:flex;gap:10px;margin-top:6px;}
.footer-social{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);color:var(--dim);
  text-decoration:none;transition:all 0.25s;
}
.footer-social:hover{border-color:var(--blue);color:var(--blue);background:rgba(10,132,255,0.08);}
.footer-col-title{
  font-family:'Rajdhani',sans-serif;font-size:0.72rem;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;
  margin-bottom:20px;color:var(--dim);opacity:0.6;
}
.footer-nav-link{
  font-size:0.88rem;color:var(--dim);text-decoration:none;
  padding:6px 0;transition:color 0.2s;display:block;
}
.footer-nav-link:hover{color:var(--text);}
.footer-contact-item{
  display:flex;align-items:center;gap:10px;
  font-size:0.88rem;color:var(--dim);text-decoration:none;
  padding:7px 0;transition:color 0.2s;
}
.footer-contact-item:hover{color:var(--text);}
.footer-address{align-items:flex-start;}
.footer-address span{line-height:1.5;}
.footer-divider{
  height:1px;max-width:1200px;margin:0 auto;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);
}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 0;max-width:1200px;margin:0 auto;
}
.footer-copy{font-size:0.76rem;color:var(--dim);opacity:0.5;}
.footer-since{
  font-size:0.68rem;color:var(--blue);opacity:0.5;
  letter-spacing:3px;font-weight:700;text-transform:uppercase;
}
@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px 24px;padding:40px 0 32px;}
  .footer-brand-col{grid-column:1/-1;}
  .footer-brand-col .footer-tagline{max-width:100%;}
  .footer-socials{justify-content:flex-start;}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center;}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr;gap:28px;}
}

/* ─── SERVICE PAGE ─── */
#service-page{padding-top:70px;}
.sp-hero{
  padding:70px 5% 50px;
  background:linear-gradient(180deg,rgba(10,132,255,0.07) 0%,transparent 100%);
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
.powered-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,rgba(255,100,32,0.12),rgba(255,180,70,0.08));
  border:1px solid rgba(255,100,32,0.35);
  border-radius:6px;padding:8px 18px;margin-top:18px;
}
.powered-label{
  font-size:0.68rem;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:rgba(255,150,80,0.7);
}
.powered-name{
  font-family:'Rajdhani',sans-serif;font-size:1.1rem;
  font-weight:700;letter-spacing:1.5px;
  background:linear-gradient(90deg,#ff6420,#ffb347);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 6px rgba(255,100,32,0.4));
}
.sp-hero::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),var(--accent),var(--blue),transparent);
}
.sp-back-wrap{padding:20px 5% 0;}
.sp-back{
  display:inline-flex;align-items:center;gap:8px;
  background:none;border:1px solid var(--border);border-radius:4px;
  color:var(--dim);font-family:'Exo 2',sans-serif;font-size:0.78rem;
  font-weight:600;letter-spacing:1px;text-transform:uppercase;
  padding:8px 16px;cursor:pointer;margin-bottom:24px;transition:all 0.2s;
}
.sp-back:hover{color:var(--blue);border-color:var(--blue);}
.sp-icon{font-size:3.2rem;margin-bottom:16px;display:block;}
.sp-title{font-family:'Rajdhani',sans-serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:700;letter-spacing:2px;text-transform:uppercase;line-height:1.1;}
.sp-subtitle{margin-top:10px;color:var(--dim);font-size:1rem;max-width:640px;line-height:1.7;}

.sp-body{max-width:1100px;margin:0 auto;padding:60px 5%;}
.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}

.sp-card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:34px;}
.sp-card-title{font-family:'Rajdhani',sans-serif;font-size:1rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.sp-card-title.blue{color:var(--accent);}
.sp-card-title.orange{color:var(--orange);}
.sp-card-title.green{color:var(--green);}

.sp-desc{font-size:0.93rem;color:var(--dim);line-height:1.85;margin-bottom:0;}

.benefit-row{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid rgba(22,32,64,0.6);}
.benefit-row:last-child{border-bottom:none;}
.ben-check{color:var(--blue);font-size:0.95rem;margin-top:2px;flex-shrink:0;}
.ben-txt{font-size:0.9rem;color:var(--dim);line-height:1.5;}

.models-wrap{display:flex;flex-wrap:wrap;gap:8px;}
.model-group-label{
  width:100%;font-size:0.68rem;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--blue);
  margin:14px 0 6px;padding-bottom:4px;
  border-bottom:1px solid rgba(10,132,255,0.2);
}
.model-group-label:first-child{margin-top:0;}
.model-chip{
  background:rgba(10,132,255,0.08);border:1px solid rgba(10,132,255,0.2);
  border-radius:4px;padding:5px 13px;font-size:0.78rem;font-weight:600;
  color:var(--text);transition:all 0.18s;
}
.model-chip:hover{background:rgba(10,132,255,0.18);border-color:var(--blue);}

.sp-cta-bar{
  margin-top:48px;padding:32px 36px;
  background:linear-gradient(135deg,rgba(10,132,255,0.1),rgba(0,212,255,0.05));
  border:1px solid rgba(10,132,255,0.25);border-radius:8px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.sp-cta-txt h3{font-family:'Rajdhani',sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px;}
.sp-cta-txt p{font-size:0.87rem;color:var(--dim);line-height:1.6;}
.sp-cta-btns{display:flex;gap:12px;flex-shrink:0;flex-wrap:wrap;}
.btn-wa{
  display:inline-flex;align-items:center;gap:8px;
  background:#25D366;border:none;border-radius:4px;
  color:#fff;font-family:'Rajdhani',sans-serif;font-size:0.95rem;
  font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  padding:12px 22px;cursor:pointer;text-decoration:none;
  transition:all 0.2s;box-shadow:0 0 18px rgba(37,211,102,0.3);
}
.btn-wa:hover{background:#1ebe5d;transform:translateY(-2px);}
.btn-contact{
  display:inline-flex;align-items:center;gap:8px;
  background:none;border:1px solid var(--border);border-radius:4px;
  color:var(--text);font-family:'Rajdhani',sans-serif;font-size:0.95rem;
  font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  padding:12px 22px;cursor:pointer;transition:all 0.2s;
}
.btn-contact:hover{border-color:var(--blue);color:var(--blue);}

/* ─── MOJE VOZILO WIDGET ─── */
.mv-widget{position:fixed;bottom:32px;left:20px;z-index:998;font-family:'Exo 2',sans-serif;}
.mv-toggle{
  display:flex;align-items:center;gap:10px;
  background:rgba(10,22,40,0.92);
  border:1px solid rgba(255,255,255,0.08);
  color:#fff;border-radius:14px;padding:11px 16px;cursor:pointer;
  font-size:0.8rem;font-weight:600;letter-spacing:0.3px;
  box-shadow:0 4px 24px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.04);
  transition:all 0.25s ease;white-space:nowrap;
  animation:waPop 0.5s 1.2s ease both;
}
.mv-toggle:hover{
  border-color:rgba(10,132,255,0.35);
  box-shadow:0 6px 28px rgba(10,132,255,0.15),inset 0 1px 0 rgba(255,255,255,0.06);
  transform:translateY(-2px);
}
.mv-icon{
  width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,rgba(10,132,255,0.15),rgba(0,212,255,0.08));
  border:1px solid rgba(10,132,255,0.2);
  display:flex;align-items:center;justify-content:center;
  color:#5ac8fa;flex-shrink:0;
}
.mv-label{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:0.88rem;letter-spacing:0.4px;}
.mv-chevron{opacity:0.35;transition:all 0.25s;display:flex;align-items:center;}
.mv-toggle:hover .mv-chevron{opacity:0.7;}
.mv-widget.open .mv-chevron{transform:rotate(180deg);opacity:0.7;}
.mv-panel{
  position:absolute;bottom:calc(100% + 10px);left:0;
  width:280px;background:var(--panel2,#0d1f3c);
  border:1px solid var(--border,rgba(255,255,255,0.12));
  border-radius:14px;padding:16px;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  animation:mvSlideUp 0.2s ease;
}
@keyframes mvSlideUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.mv-panel-title{font-size:0.78rem;font-weight:700;color:var(--blue,#0a84ff);letter-spacing:1px;text-transform:uppercase;margin-bottom:12px;}
.mv-select,.mv-input{
  width:100%;background:rgba(255,255,255,0.05);border:1px solid var(--border,rgba(255,255,255,0.1));
  color:#fff;border-radius:8px;padding:9px 12px;font-size:0.85rem;margin-bottom:8px;
  box-sizing:border-box;outline:none;transition:border-color 0.2s;
}
.mv-select:focus,.mv-input:focus{border-color:var(--blue,#0a84ff);}
.mv-select option{background:#0a1628;color:#fff;}
.mv-save-btn{
  width:100%;background:var(--blue,#0a84ff);color:#fff;border:none;border-radius:8px;
  padding:10px;font-size:0.85rem;font-weight:700;cursor:pointer;transition:background 0.2s;
}
.mv-save-btn:hover{background:#0070d8;}
.mv-car-name{font-size:0.95rem;font-weight:700;color:#fff;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border,rgba(255,255,255,0.1));}
.mv-compat-label{font-size:0.72rem;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:8px;}
.mv-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.mv-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:20px;font-size:0.78rem;font-weight:600;
  cursor:pointer;border:none;transition:all 0.15s;text-decoration:none;
}
.mv-chip-compat{background:rgba(10,132,255,0.15);color:#5ac8fa;border:1px solid rgba(10,132,255,0.3);}
.mv-chip-compat:hover{background:rgba(10,132,255,0.3);color:#fff;}
.mv-chip-all{background:rgba(50,215,75,0.12);color:#30d158;border:1px solid rgba(50,215,75,0.25);}
.mv-chip-all:hover{background:rgba(50,215,75,0.25);color:#fff;}
.mv-chip-tuning{background:rgba(255,149,0,0.15);color:#ff9500;border:1px solid rgba(255,149,0,0.3);}
.mv-chip-tuning:hover{background:rgba(255,149,0,0.3);color:#fff;}
.mv-chip-tag{display:block;font-size:0.68rem;font-weight:400;opacity:0.75;margin-top:1px;}
.mv-change-btn{background:none;border:none;color:rgba(255,255,255,0.4);font-size:0.78rem;cursor:pointer;padding:0;transition:color 0.2s;}
.mv-change-btn:hover{color:#fff;}
@media(max-width:768px){
  .mv-widget{bottom:78px;left:12px;}
  .mv-panel{
    position:fixed;
    bottom:120px;
    left:12px;
    right:12px;
    width:auto;
    max-width:100%;
    max-height:calc(100vh - 140px);
    overflow-y:auto;
    border-radius:16px;
    padding:14px;
    box-shadow:0 8px 40px rgba(0,0,0,0.5);
  }
  .mv-panel .mv-select,
  .mv-panel .mv-input{
    padding:8px 10px;
    font-size:0.82rem;
    margin-bottom:6px;
  }
  .mv-panel .mv-save-btn{
    padding:9px;
    font-size:0.82rem;
  }
  .mv-panel .mv-panel-title{
    font-size:0.72rem;
    margin-bottom:8px;
  }
}

/* ─── WHATSAPP FLOAT ─── */
.wa-float{
  position:fixed;bottom:26px;right:26px;z-index:999;
  background:#25D366;border-radius:50px;
  padding:13px 18px 13px 14px;
  display:flex;align-items:center;gap:9px;
  text-decoration:none;
  box-shadow:0 6px 22px rgba(37,211,102,0.4);
  transition:all 0.25s;
  animation:waPop 0.5s 1s ease both;
}
.wa-float:hover{background:#1ebe5d;transform:translateY(-3px);}
.wa-float span{color:#fff;font-weight:700;font-size:0.85rem;letter-spacing:0.5px;}
@keyframes waPop{from{transform:scale(0);opacity:0;}60%{transform:scale(1.1);}to{transform:scale(1);opacity:1;}}

/* ─── MOBILE STICKY BAR ─── */
.mobile-sticky-bar{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:500;
  background:var(--panel2);
  border-top:1px solid var(--border);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.msb-wa{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  background:#25D366;border:none;border-radius:6px;
  color:#fff;font-family:'Exo 2',sans-serif;font-size:0.88rem;
  font-weight:700;letter-spacing:0.5px;padding:13px;
  cursor:pointer;text-decoration:none;
  box-shadow:0 0 16px rgba(37,211,102,0.25);
}
.msb-call{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:none;border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-family:'Exo 2',sans-serif;font-size:0.88rem;
  font-weight:700;padding:13px 18px;cursor:pointer;text-decoration:none;
  white-space:nowrap;
}
@media(max-width:768px){
  .mobile-sticky-bar{display:flex;}
  .wa-float{display:none;}
  body{padding-bottom:72px;}
}

/* ─── BOOKING PAGE ─── */
.booking-hero{
  padding:50px 5% 40px;
  background:linear-gradient(180deg,rgba(10,132,255,0.07) 0%,transparent 100%);
  border-bottom:1px solid var(--border);position:relative;
}
.booking-hero::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--blue),var(--accent),var(--blue),transparent);}
.booking-hero-inner{max-width:1100px;margin:0 auto;}
.booking-body{max-width:860px;margin:0 auto;padding:48px 5% 80px;}

.booking-step{
  background:var(--panel);border:1px solid var(--border);
  border-radius:10px;padding:32px;margin-bottom:20px;
  transition:border-color 0.3s;
}
.booking-step.active{border-color:rgba(10,132,255,0.4);}
.booking-step-locked{opacity:0.4;pointer-events:none;filter:grayscale(0.3);}
.booking-step-locked.unlocked{opacity:1;pointer-events:all;filter:none;}

.bstep-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;}
.bstep-num{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-family:'Rajdhani',sans-serif;font-size:1.1rem;font-weight:700;
  color:#fff;flex-shrink:0;
}
.bstep-title{font-family:'Rajdhani',sans-serif;font-size:1.1rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;}
.bstep-sub{font-size:0.8rem;color:var(--dim);margin-top:2px;}

.booking-selects{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;}
.bsel-group{display:flex;flex-direction:column;gap:6px;}
.bsel-label{font-size:0.7rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);font-weight:600;}
.bsel{width:100%;background:var(--black2);border:1px solid var(--border);border-radius:4px;padding:11px 14px;color:var(--text);font-family:'Exo 2',sans-serif;font-size:0.9rem;outline:none;transition:border-color 0.2s;}
.bsel:focus{border-color:var(--blue);}
.bsel option{background:var(--panel);}

.bstep-vehicle-preview{
  display:flex;align-items:center;gap:12px;
  background:rgba(10,132,255,0.06);border:1px solid rgba(10,132,255,0.2);
  border-radius:6px;padding:12px 16px;margin-bottom:16px;
}
.bvp-icon{font-size:1.4rem;}
.bvp-text{flex:1;font-weight:600;font-size:0.93rem;}
.bvp-change{background:none;border:1px solid var(--border);border-radius:4px;color:var(--dim);font-family:'Exo 2',sans-serif;font-size:0.75rem;padding:5px 12px;cursor:pointer;transition:all 0.2s;}
.bvp-change:hover{color:var(--blue);border-color:var(--blue);}

.btn-bstep{
  background:var(--blue);border:none;border-radius:4px;
  color:#fff;font-family:'Rajdhani',sans-serif;font-size:1rem;
  font-weight:700;letter-spacing:2px;text-transform:uppercase;
  padding:13px 28px;cursor:pointer;transition:all 0.2s;
  box-shadow:0 0 20px rgba(10,132,255,0.25);
}
.btn-bstep:hover{background:var(--accent);color:var(--black);}

/* Services checkboxes */
.booking-services{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
.bsvc-item{
  display:flex;align-items:center;gap:12px;
  background:var(--black2);border:1px solid var(--border);
  border-radius:6px;padding:14px 16px;cursor:pointer;
  transition:all 0.2s;user-select:none;
}
.bsvc-item:hover{border-color:rgba(10,132,255,0.4);}
.bsvc-item.bsvc-disabled{
  opacity:0.3;cursor:not-allowed;pointer-events:none;
  border-color:rgba(255,60,60,0.2) !important;
  background:rgba(255,40,40,0.04) !important;
}
.bsvc-item input{display:none;}
.bsvc-item.checked{
  background:rgba(10,132,255,0.08);
  border-color:var(--blue);
}
.bsvc-check-box{
  width:20px;height:20px;border:2px solid var(--border);
  border-radius:4px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;
  transition:all 0.2s;font-size:0.8rem;
}
.bsvc-item.checked .bsvc-check-box{background:var(--blue);border-color:var(--blue);}
.bsvc-icon{font-size:1.2rem;flex-shrink:0;}
.bsvc-name{font-size:0.85rem;font-weight:600;line-height:1.3;}

/* Summary */
.booking-summary{
  background:var(--black2);border:1px solid var(--border);
  border-radius:6px;padding:20px;margin-bottom:20px;
}
.bsum-title{font-family:'Rajdhani',sans-serif;font-size:0.85rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-bottom:14px;}
.bsum-row{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid rgba(22,32,64,0.5);font-size:0.88rem;}
.bsum-row:last-child{border-bottom:none;}
.bsum-l{color:var(--dim);flex-shrink:0;width:90px;}
.bsum-v{color:var(--text);font-weight:600;line-height:1.5;}

.btn-reserve{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:#25D366;border:none;border-radius:6px;
  color:#fff;font-family:'Rajdhani',sans-serif;font-size:1.1rem;
  font-weight:700;letter-spacing:2px;text-transform:uppercase;
  padding:16px 28px;cursor:pointer;text-decoration:none;width:100%;
  box-shadow:0 0 24px rgba(37,211,102,0.35);transition:all 0.2s;
  margin-bottom:12px;
}
.btn-reserve:hover{background:#1ebe5d;transform:translateY(-2px);}
.breserve-note{font-size:0.8rem;color:var(--dim);text-align:center;line-height:1.6;}

@media(max-width:768px){
  .booking-selects{grid-template-columns:1fr;}
  .booking-services{grid-template-columns:1fr 1fr;}
  .booking-body{padding:28px 4% 100px;}
  .booking-step{padding:22px 16px;}
}

/* ─── COMPATIBILITY CHECKER + CALCULATOR ─── */
.tool-modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(2,6,14,0.88);z-index:600;
  align-items:center;justify-content:center;padding:16px;
}
.tool-modal-overlay.active{display:flex;animation:fadeIn 0.2s ease;}
.tool-modal{
  background:var(--panel2);border:1px solid var(--border);
  border-radius:10px;width:100%;max-width:680px;
  max-height:90vh;overflow-y:auto;position:relative;
}
.tm-header{
  padding:28px 32px 20px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,rgba(10,132,255,0.08),transparent);
}
.tm-header h2{font-family:'Rajdhani',sans-serif;font-size:1.6rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;}
.tm-header p{color:var(--dim);font-size:0.88rem;margin-top:6px;line-height:1.6;}
.tm-close{position:absolute;top:16px;right:20px;background:none;border:none;color:var(--dim);font-size:1.3rem;cursor:pointer;padding:4px 8px;border-radius:4px;transition:color 0.2s;}
.tm-close:hover{color:var(--blue);}
.tm-body{padding:28px 32px;}

/* Checker */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:24px;}
.brand-btn{
  background:var(--panel);border:1px solid var(--border);border-radius:6px;
  padding:14px 10px;cursor:pointer;text-align:center;
  font-family:'Exo 2',sans-serif;font-size:0.85rem;font-weight:600;
  color:var(--text);transition:all 0.2s;
}
.brand-btn:hover{border-color:var(--blue);color:var(--blue);}
.brand-btn.active{border-color:var(--blue);background:rgba(10,132,255,0.1);color:var(--blue);}
.brand-logo{font-size:1.4rem;display:block;margin-bottom:6px;}

.model-section{display:none;}
.model-section.active{display:block;animation:fadeUp 0.3s ease;}
.model-section h3{font-family:'Rajdhani',sans-serif;font-size:1rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:16px;}

.compat-table{width:100%;border-collapse:collapse;}
.compat-table th{font-size:0.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--dim);font-weight:700;padding:8px 12px;border-bottom:1px solid var(--border);text-align:left;}
.compat-table td{padding:11px 12px;border-bottom:1px solid rgba(22,32,64,0.5);font-size:0.85rem;}
.compat-table tr:last-child td{border-bottom:none;}
.compat-table tr:hover td{background:rgba(10,132,255,0.04);}
.compat-table .model-name{font-weight:600;}
.compat-table .years{color:var(--dim);font-size:0.8rem;}

.tag{display:inline-flex;align-items:center;gap:5px;border-radius:4px;padding:3px 10px;font-size:0.72rem;font-weight:700;letter-spacing:0.5px;}
.tag-soft{background:rgba(10,132,255,0.15);color:#60c0ff;border:1px solid rgba(10,132,255,0.3);}
.tag-wireless{background:rgba(0,212,100,0.12);color:#00d464;border:1px solid rgba(0,212,100,0.3);}
.tag-adapter{background:rgba(255,180,0,0.12);color:#ffc030;border:1px solid rgba(255,180,0,0.3);}
.tag-no{background:rgba(255,60,60,0.1);color:#ff6060;border:1px solid rgba(255,60,60,0.25);}

.compat-legend{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}

/* Calculator */
.calc-step{margin-bottom:20px;}
.calc-step label{display:block;font-size:0.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:8px;}
.calc-select{width:100%;background:var(--black2);border:1px solid var(--border);border-radius:4px;padding:12px 14px;color:var(--text);font-family:'Exo 2',sans-serif;font-size:0.9rem;outline:none;transition:border-color 0.2s;}
.calc-select:focus{border-color:var(--blue);}
.calc-select option{background:var(--panel);}

.calc-results{margin-top:24px;display:none;}
.calc-results.active{display:block;animation:fadeUp 0.3s ease;}
.calc-results h3{font-family:'Rajdhani',sans-serif;font-size:1rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:14px;}
.calc-result-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--panel);border:1px solid var(--border);border-radius:6px;margin-bottom:8px;}
.cri-left{display:flex;align-items:center;gap:10px;font-size:0.88rem;font-weight:600;}
.cri-icon{font-size:1.1rem;}
.tag-yes{background:rgba(0,212,100,0.12);color:#00d464;border:1px solid rgba(0,212,100,0.3);border-radius:4px;padding:3px 10px;font-size:0.72rem;font-weight:700;}
.tag-maybe{background:rgba(255,180,0,0.12);color:#ffc030;border:1px solid rgba(255,180,0,0.3);border-radius:4px;padding:3px 10px;font-size:0.72rem;font-weight:700;}
.tag-contact{background:rgba(10,132,255,0.12);color:#60c0ff;border:1px solid rgba(10,132,255,0.3);border-radius:4px;padding:3px 10px;font-size:0.72rem;font-weight:700;}

.calc-cta{margin-top:20px;padding:18px;background:linear-gradient(135deg,rgba(10,132,255,0.08),transparent);border:1px solid rgba(10,132,255,0.2);border-radius:6px;text-align:center;}
.calc-cta p{font-size:0.85rem;color:var(--dim);margin-bottom:12px;}

/* ─── CHIPTUNING KALKULATOR ─── */
#chipCalc{width:100%;}
.cc-selects{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:20px;}
.cc-field{}
.cc-label{display:block;font-size:0.7rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:6px;}
.cc-select{
  width:100%;background:var(--black2);border:1px solid var(--border);border-radius:6px;
  padding:12px 14px;color:var(--text);font-family:'Exo 2',sans-serif;font-size:0.85rem;
  outline:none;transition:border-color 0.25s,opacity 0.25s;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236a85aa' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.cc-select:focus{border-color:var(--blue);}
.cc-select:disabled{opacity:0.4;cursor:not-allowed;}
.cc-select option{background:var(--panel);color:var(--text);}

.cc-result{
  background:var(--panel);border:1px solid var(--border);border-radius:10px;
  padding:24px;animation:fadeUp 0.4s ease;
}
.cc-result-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;flex-wrap:wrap;}
.cc-car-name{font-family:'Rajdhani',sans-serif;font-size:1.05rem;font-weight:700;letter-spacing:1px;color:var(--text);}
.cc-stage-badge{
  background:linear-gradient(135deg,var(--blue),var(--accent));color:#fff;
  font-family:'Rajdhani',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:2px;
  padding:4px 14px;border-radius:20px;text-transform:uppercase;
}

.cc-bars{display:flex;flex-direction:column;gap:18px;}
.cc-bar-group{}
.cc-bar-label{font-size:0.7rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:8px;}
.cc-bar-track{display:flex;flex-direction:column;gap:6px;}
.cc-bar{
  height:32px;border-radius:6px;display:flex;align-items:center;
  padding:0 12px;font-size:0.78rem;font-weight:700;
  transition:width 0.8s cubic-bezier(0.16,1,0.3,1);width:0;
  position:relative;min-width:0;
}
.cc-bar span{white-space:nowrap;position:relative;z-index:1;}
.cc-bar-orig{background:rgba(106,133,170,0.2);color:var(--dim);border:1px solid rgba(106,133,170,0.15);}
.cc-bar-stage{background:linear-gradient(90deg,var(--blue),var(--accent));color:#fff;box-shadow:0 2px 12px rgba(10,132,255,0.3);}
.cc-gain{
  font-family:'Rajdhani',sans-serif;font-size:1.1rem;font-weight:700;
  color:var(--green);margin-top:4px;letter-spacing:0.5px;
}
.cc-legend{display:flex;gap:20px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}
.cc-leg-item{display:flex;align-items:center;gap:6px;font-size:0.75rem;color:var(--dim);font-weight:600;}
.cc-leg-dot{width:12px;height:12px;border-radius:3px;}
.cc-leg-orig{background:rgba(106,133,170,0.25);border:1px solid rgba(106,133,170,0.2);}
.cc-leg-stage{background:linear-gradient(90deg,var(--blue),var(--accent));}

.cc-cta{margin-top:20px;text-align:center;}
.cc-cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;
  font-family:'Exo 2',sans-serif;font-size:0.88rem;font-weight:700;
  padding:12px 28px;border-radius:8px;text-decoration:none;
  transition:transform 0.2s,box-shadow 0.2s;
  box-shadow:0 2px 12px rgba(37,211,102,0.2);
}
.cc-cta-btn:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(37,211,102,0.35);}

@media(max-width:640px){
  .cc-selects{grid-template-columns:1fr;gap:10px;}
  .cc-result{padding:16px;}
  .cc-car-name{font-size:0.9rem;}
  .cc-bar{height:28px;font-size:0.72rem;padding:0 8px;}
  .cc-gain{font-size:0.95rem;}
}

/* Tool buttons on home */
.tools-bar{display:flex;gap:10px;justify-content:flex-start;flex-wrap:wrap;margin-top:16px;margin-bottom:24px;animation:fadeUp 0.7s 0.4s ease both;position:relative;z-index:2;}
.tool-btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:rgba(11,18,34,0.75);
  border:1px solid rgba(10,132,255,0.15);border-radius:10px;
  color:var(--text);font-family:'Exo 2',sans-serif;font-size:0.95rem;
  font-weight:700;letter-spacing:0.5px;padding:16px 28px;cursor:pointer;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 0 20px rgba(10,132,255,0.06),0 2px 12px rgba(0,0,0,0.3);
  position:relative;overflow:hidden;
}
.tool-btn::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(10,132,255,0.4),transparent);
}
.tool-btn:hover{
  border-color:rgba(10,132,255,0.5);color:#fff;
  background:rgba(10,132,255,0.12);
  transform:translateY(-3px);
  box-shadow:0 0 30px rgba(10,132,255,0.2),0 8px 24px rgba(0,0,0,0.3);
}
.tool-btn .tb-icon{font-size:1.2rem;transition:transform 0.2s;}
.tool-btn:hover .tb-icon{transform:scale(1.15);}

@media(max-width:768px){
  .tool-btn{font-size:0.82rem;padding:13px 16px;}
  .tool-btn .tb-icon{font-size:1rem;}
}

@media(max-width:768px){
  .tm-header{padding:20px 18px 16px;}
  .tm-body{padding:18px;}
  .brand-grid{grid-template-columns:repeat(3,1fr);gap:8px;}
  .brand-btn{padding:10px 6px;font-size:0.78rem;}
  .compat-table td,.compat-table th{padding:8px 8px;font-size:0.78rem;}
  .tools-bar{gap:8px;}
  .tool-btn{font-size:0.78rem;padding:10px 14px;}
}

/* ─── TICKER ─── */
.ticker-wrap{
  position:fixed;top:0;left:0;right:0;z-index:300;
  height:32px;
  background:rgba(2,6,14,0.97);
  display:flex;align-items:center;overflow:hidden;
  border-bottom:1px solid rgba(10,132,255,0.1);
}
.ticker-label{
  background:var(--blue);padding:3px 10px;
  font-size:0.52rem;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:#fff;white-space:nowrap;
  display:flex;align-items:center;flex-shrink:0;
  border-radius:3px;margin:0 14px 0 12px;
}
.ticker-track{flex:1;overflow:hidden;height:100%;display:flex;align-items:center;}
.ticker-inner{
  display:flex;gap:0;white-space:nowrap;
  animation:tickerScroll 40s linear infinite;
  will-change:transform;
}
.ticker-inner span{
  font-size:0.7rem;font-weight:500;color:rgba(255,255,255,0.7);
  padding:0 32px;
}
.ticker-inner span::after{
  content:'·';display:inline-block;
  color:var(--blue);font-weight:700;font-size:0.9rem;
  vertical-align:middle;margin-left:32px;
}
@keyframes tickerScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ═══ COUNTDOWN BANNER ═══ */
#countdownBanner {
  background: linear-gradient(135deg, #ff6420, #ff3a00);
  padding: 8px 20px;
  margin-bottom: 0;
  text-align: center;
  position: fixed;
  top: 28px;
  left: 0;
  right: 0;
  z-index: 250;
}
/* Desktop: sve relative, ništa ne prati scroll */
@media(min-width: 769px) {
  nav { position: relative !important; top: auto !important; }
  #countdownBanner { position: relative !important; top: auto !important; }
  #home-hero { padding-top: 40px !important; }
  #service-page { padding-top: 60px !important; }
  .ticker-wrap { position: relative !important; }
}
/* Mobile: banner relative, nav fixed ispod tickera */
@media(max-width: 768px) {
  #countdownBanner { position: relative !important; top: auto !important; }
  nav { position: fixed !important; top: 28px !important; }
  #home-hero { padding-top: 65px !important; }
}

/* ─── HERO VIDEO BG ─── */
.hero-video-bg{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  background:none;
}

#heroCanvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:0.5;
}

/* Subtle technical grid overlay */
.hero-grid-overlay{
  position:absolute;inset:0;z-index:1;
  background-image:
    linear-gradient(rgba(10,132,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,132,255,0.03) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.4) 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.4) 0%, transparent 70%);
}

/* Horizontal light streaks — like highway at night */
.hero-light-streak{
  position:absolute;
  height:1px;
  z-index:2;
  border-radius:50%;
}

.hero-streak-1{
  top:35%;left:0;right:0;
  background:linear-gradient(90deg, transparent 0%, rgba(10,132,255,0.12) 20%, rgba(0,212,255,0.08) 50%, rgba(10,132,255,0.12) 80%, transparent 100%);
  opacity:0.65;
}

.hero-streak-2{
  top:55%;left:10%;right:10%;
  background:linear-gradient(90deg, transparent 0%, rgba(10,132,255,0.06) 30%, rgba(0,212,255,0.04) 60%, transparent 100%);
  opacity:0.5;
}

.hero-streak-3{
  top:72%;left:20%;right:5%;
  background:linear-gradient(90deg, transparent 0%, rgba(10,132,255,0.04) 40%, rgba(0,212,255,0.06) 70%, transparent 100%);
  opacity:0.4;
}

/* Edge vignette for depth */
.hero-vignette{
  position:absolute;inset:0;z-index:3;
  background:radial-gradient(ellipse 80% 70% at 50% 45%, transparent 40%, rgba(4,8,16,0.7) 100%);
}

/* ─── LOCATION ─── */
.loc-grid{display:grid;grid-template-columns:320px 1fr;gap:24px;max-width:1000px;margin:0 auto;align-items:stretch;}
.loc-info{display:flex;flex-direction:column;gap:12px;}
.loc-card{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--panel);border:1px solid var(--border);border-radius:10px;
  padding:16px 18px;transition:border-color 0.25s;
}
.loc-card:hover{border-color:var(--blue);}
.loc-card-icon{font-size:1.3rem;line-height:1;margin-top:2px;}
.loc-card-body{flex:1;min-width:0;}
.loc-card-title{font-size:0.68rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:4px;}
.loc-card-text{font-size:0.88rem;color:var(--text);line-height:1.5;}
.loc-hours{display:flex;justify-content:space-between;gap:8px;font-size:0.82rem;padding:2px 0;}
.loc-hours span:first-child{color:var(--dim);}
.loc-hours-val{font-weight:600;color:var(--text);}
.loc-closed{color:#ff6060;}
.loc-link{color:var(--blue);text-decoration:none;font-weight:600;transition:color 0.2s;}
.loc-link:hover{color:var(--accent);}
.loc-directions-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--panel);border:1px solid var(--blue);border-radius:10px;
  color:var(--blue);font-family:'Exo 2',sans-serif;font-size:0.85rem;font-weight:700;
  padding:14px;text-decoration:none;cursor:pointer;
  transition:all 0.25s;margin-top:auto;
}
.loc-directions-btn:hover{background:rgba(10,132,255,0.1);transform:translateY(-2px);box-shadow:0 4px 16px rgba(10,132,255,0.15);}
.loc-map{position:relative;min-height:360px;}
.map-wrap{width:100%;height:100%;border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.map-wrap iframe{display:block;width:100%;height:100%;min-height:360px;}

/* ─── MAP HERO (Kontakt page) ─── */
.map-hero{
  position:relative;max-width:1100px;margin:0 auto 24px;
  border-radius:16px;overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 8px 40px rgba(0,0,0,0.2);
}
.map-hero-wrap{width:100%;height:400px;}
.map-hero-wrap iframe{display:block;width:100%;height:100%;}
.map-hero-overlay{
  position:absolute;top:16px;left:16px;z-index:2;pointer-events:none;
}
.map-hero-pin{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,0,0,0.8);
  padding:8px 16px;border-radius:24px;
  font-size:0.82rem;font-weight:700;color:#fff;
  border:1px solid rgba(255,255,255,0.1);
}
.map-hero-pin svg{flex-shrink:0;}
.map-info-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:12px;max-width:1100px;margin:0 auto;
}
.map-info-card{
  background:var(--panel);border:1px solid var(--border);
  border-radius:12px;padding:20px 18px;text-align:center;
  text-decoration:none;color:var(--text);
  transition:all 0.25s;
}
.map-info-card:hover{border-color:var(--blue);transform:translateY(-2px);}
.map-info-cta{cursor:pointer;}
.map-info-cta:hover{background:rgba(10,132,255,0.05);}
.map-info-icon{font-size:1.6rem;margin-bottom:8px;}
.map-info-label{font-size:0.68rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);margin-bottom:6px;}
.map-info-val{font-size:0.85rem;font-weight:600;line-height:1.4;}
.map-info-val a{color:var(--text);text-decoration:none;}
.map-info-val a:hover{color:var(--blue);}
@media(max-width:768px){
  .map-hero-wrap{height:280px;}
  .map-info-row{grid-template-columns:repeat(2,1fr);gap:10px;}
}
@media(max-width:480px){
  .map-info-row{grid-template-columns:1fr;}
}
:root[data-theme="light"] .map-hero{box-shadow:0 8px 40px rgba(0,0,0,0.06);}
:root[data-theme="light"] .map-hero-pin{background:rgba(255,255,255,0.85);color:#0f1722;}

.loc-status{
  position:absolute;top:12px;left:12px;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:20px;
  font-size:0.72rem;font-weight:700;letter-spacing:0.5px;
  z-index:2;
}
.loc-status.open{background:rgba(0,212,100,0.15);color:#00d464;border:1px solid rgba(0,212,100,0.3);}
.loc-status.closed{background:rgba(255,60,60,0.15);color:#ff6060;border:1px solid rgba(255,60,60,0.3);}
.loc-status-dot{width:6px;height:6px;border-radius:50%;display:inline-block;}
.loc-status.open .loc-status-dot{background:#00d464;box-shadow:0 0 6px rgba(0,212,100,0.5);}
.loc-status.closed .loc-status-dot{background:#ff6060;}
@media(max-width:768px){
  .loc-grid{grid-template-columns:1fr;gap:16px;}
  .loc-map{min-height:280px;}
  .map-wrap iframe{min-height:280px;}
}

/* ─── CTA BANNER ─── */
.cta-banner-inner{
  display:flex;align-items:center;justify-content:space-between;gap:48px;
  max-width:1100px;margin:0 auto;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(10,132,255,0.08) 0%,rgba(2,6,14,0.8) 100%);
  border:1px solid rgba(10,132,255,0.15);border-radius:20px;
  padding:52px 56px;position:relative;overflow:hidden;
}
.cta-banner-inner::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(10,132,255,0.4),transparent);
}
.cta-banner-inner::after{
  content:'';position:absolute;bottom:-100px;right:-100px;width:300px;height:300px;
  background:radial-gradient(circle,rgba(10,132,255,0.06) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.cta-banner-text{flex:1;min-width:280px;}
.cta-banner-title{
  font-family:'Rajdhani',sans-serif;font-size:2.2rem;font-weight:700;
  letter-spacing:1px;margin-bottom:12px;
  background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,0.8) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.cta-banner-desc{color:var(--dim);line-height:1.8;font-size:0.92rem;max-width:460px;}
.cta-banner-actions{display:flex;gap:14px;flex-shrink:0;flex-wrap:wrap;}
.cta-banner-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Exo 2',sans-serif;font-size:0.88rem;font-weight:700;
  letter-spacing:0.5px;text-decoration:none;
  padding:15px 28px;border-radius:12px;cursor:pointer;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  position:relative;overflow:hidden;
}
.cta-banner-primary{
  background:var(--blue);color:#fff;border:1px solid var(--blue);
  box-shadow:0 0 24px rgba(10,132,255,0.25),0 4px 16px rgba(0,0,0,0.2);
}
.cta-banner-primary:hover{
  background:#0070e0;transform:translateY(-2px);
  box-shadow:0 0 40px rgba(10,132,255,0.35),0 8px 28px rgba(0,0,0,0.25);
}
.cta-banner-secondary{
  background:rgba(37,211,102,0.08);color:#25d366;
  border:1px solid rgba(37,211,102,0.2);
}
.cta-banner-secondary:hover{
  background:rgba(37,211,102,0.16);border-color:rgba(37,211,102,0.45);
  transform:translateY(-2px);box-shadow:0 0 24px rgba(37,211,102,0.15);
}
@media(max-width:768px){
  .cta-banner-inner{padding:36px 24px;gap:24px;flex-direction:column;text-align:center;}
  .cta-banner-desc{max-width:100%;}
  .cta-banner-actions{justify-content:center;width:100%;}
  .cta-banner-btn{flex:1;justify-content:center;padding:14px 20px;font-size:0.82rem;}
}

@media(max-width:768px){
  .ticker-wrap{height:24px;}
  .ticker-inner span{font-size:0.68rem;padding:0 28px;}
  nav{top:24px !important;}
  .qr-inner{flex-direction:column;text-align:center;}
  body{padding-top:24px;}
  #home-hero{padding-top:110px;}
}

/* Car animations removed — replaced with minimalistic background */

/* ─── PARTNERS BAR ─── */
.partners-bar{
  padding:18px 5% 22px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:rgba(4,10,22,0.6);
  display:flex;align-items:center;justify-content:center;
  gap:24px;flex-wrap:wrap;
}
.partners-label{
  font-size:0.65rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--dim);font-weight:600;white-space:nowrap;
}
.partners-list{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;}
.partner-badge{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--border);border-radius:5px;
  padding:7px 14px;transition:all 0.2s;cursor:default;
}
.partner-badge:hover{transform:translateY(-2px);}
.pb-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.pb-name{font-family:'Rajdhani',sans-serif;font-size:0.95rem;font-weight:700;letter-spacing:1px;}
.pb-tag{font-size:0.62rem;letter-spacing:1px;text-transform:uppercase;opacity:0.6;padding:2px 6px;border-radius:3px;}

.partner-asf{background:rgba(255,100,32,0.06);border-color:rgba(255,100,32,0.25);}
.partner-asf:hover{border-color:rgba(255,100,32,0.5);background:rgba(255,100,32,0.1);}
.partner-asf .pb-dot{background:#ff6420;box-shadow:0 0 6px rgba(255,100,32,0.8);}
.partner-asf .pb-name{background:linear-gradient(90deg,#ff6420,#ffb347);-webkit-background-clip:text;background-clip:text;color:transparent;}
.partner-asf .pb-tag{background:rgba(255,100,32,0.1);color:#ff9060;}

.partner-obd{background:rgba(10,132,255,0.06);border-color:rgba(10,132,255,0.25);}
.partner-obd:hover{border-color:rgba(10,132,255,0.5);background:rgba(10,132,255,0.1);}
.partner-obd .pb-dot{background:#0A84FF;box-shadow:0 0 6px rgba(10,132,255,0.8);}
.partner-obd .pb-name{color:#60b0ff;}
.partner-obd .pb-tag{background:rgba(10,132,255,0.1);color:#60b0ff;}

.partner-mbt{background:rgba(0,180,120,0.06);border-color:rgba(0,180,120,0.25);}
.partner-mbt:hover{border-color:rgba(0,180,120,0.5);background:rgba(0,180,120,0.1);}
.partner-mbt .pb-dot{background:#00b478;box-shadow:0 0 6px rgba(0,180,120,0.8);}
.partner-mbt .pb-name{color:#00d496;}
.partner-mbt .pb-tag{background:rgba(0,180,120,0.1);color:#00d496;}

.partner-bim{background:rgba(30,120,255,0.06);border-color:rgba(30,120,255,0.25);}
.partner-bim:hover{border-color:rgba(30,120,255,0.5);background:rgba(30,120,255,0.1);}
.partner-bim .pb-dot{background:#1e78ff;box-shadow:0 0 6px rgba(30,120,255,0.8);}
.partner-bim .pb-name{color:#6aacff;}
.partner-bim .pb-tag{background:rgba(30,120,255,0.1);color:#6aacff;}

.partner-hpt{background:rgba(0,120,200,0.06);border-color:rgba(0,150,230,0.25);}
.partner-hpt:hover{border-color:rgba(0,150,230,0.5);background:rgba(0,120,200,0.1);}
.partner-hpt .pb-dot{background:#0096e6;box-shadow:0 0 6px rgba(0,150,230,0.8);}
.partner-hpt .pb-name{background:linear-gradient(90deg,#0096e6,#40c0ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.partner-hpt .pb-tag{background:rgba(0,150,230,0.1);color:#40c0ff;}

@media(max-width:768px){
  .partners-bar{gap:12px;padding:14px 4%;}
  .partner-badge{padding:6px 10px;}
  .pb-name{font-size:0.85rem;}
}

/* ─── CERTIFICATION ─── */
.cert-section{
  padding:60px 5%;
  position:relative;z-index:1;
}
.cert-inner{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;gap:50px;
}
.cert-text{flex:1;}
.cert-label{
  font-family:'Exo 2',sans-serif;font-size:0.72rem;
  font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--blue);margin-bottom:14px;
}
.cert-title{
  font-family:'Exo 2',sans-serif;font-size:1.6rem;font-weight:800;
  line-height:1.3;margin:0 0 16px;color:var(--text);
}
.cert-highlight{
  background:linear-gradient(90deg,#ff6420,#ffb347);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cert-desc{
  font-family:'Exo 2',sans-serif;font-size:0.88rem;
  color:var(--dim);line-height:1.7;margin:0 0 24px;
}
.cert-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px;}
.cert-badge{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;border-radius:12px;
  text-decoration:none;transition:all 0.25s ease;
  position:relative;
}
.cb-icon{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.cb-info{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.cb-name{
  font-family:'Rajdhani',sans-serif;font-size:0.95rem;
  font-weight:700;letter-spacing:0.5px;line-height:1.2;
}
.cb-role{
  font-family:'Exo 2',sans-serif;font-size:0.68rem;
  font-weight:500;letter-spacing:0.3px;opacity:0.6;
}
.cb-arrow{
  opacity:0.3;transition:all 0.25s ease;flex-shrink:0;
  margin-left:4px;
}
.cert-badge:hover .cb-arrow{opacity:0.8;transform:translate(2px,-2px);}
.cert-badge-asf{
  background:rgba(255,100,32,0.06);border:1px solid rgba(255,100,32,0.15);
  color:#ffb060;
}
.cert-badge-asf .cb-icon{background:rgba(255,100,32,0.12);color:#ff8040;}
.cert-badge-asf:hover{
  background:rgba(255,100,32,0.1);border-color:rgba(255,100,32,0.3);
  transform:translateY(-2px);box-shadow:0 6px 24px rgba(255,100,32,0.1);
}
.cert-badge-hpt{
  background:rgba(0,150,230,0.06);border:1px solid rgba(0,150,230,0.15);
  color:#40c0ff;
}
.cert-badge-hpt .cb-icon{background:rgba(0,150,230,0.12);color:#0ab0ff;}
.cert-badge-hpt:hover{
  background:rgba(0,150,230,0.1);border-color:rgba(0,150,230,0.3);
  transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,150,230,0.1);
}
.cert-img-wrap{
  flex-shrink:0;width:380px;position:relative;
}
.cert-img{
  width:100%;border-radius:12px;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 8px 40px rgba(0,0,0,0.3);
  transition:transform 0.3s ease;
  cursor:zoom-in;
}
.cert-img:hover{transform:scale(1.03);}
@media(max-width:768px){
  .cert-inner{flex-direction:column;gap:30px;text-align:center;}
  .cert-img-wrap{width:100%;max-width:400px;}
  .cert-badges{justify-content:center;}
  .cert-title{font-size:1.3rem;}
}

/* Light mode cert */
:root[data-theme="light"] .cert-badge-asf{background:rgba(255,100,32,0.05);border-color:rgba(255,100,32,0.15);color:#c05020;}
:root[data-theme="light"] .cert-badge-asf .cb-icon{background:rgba(255,100,32,0.1);color:#d05a1a;}
:root[data-theme="light"] .cert-badge-asf:hover{background:rgba(255,100,32,0.1);box-shadow:0 6px 24px rgba(255,100,32,0.08);}
:root[data-theme="light"] .cert-badge-hpt{background:rgba(0,150,230,0.05);border-color:rgba(0,150,230,0.15);color:#0070a8;}
:root[data-theme="light"] .cert-badge-hpt .cb-icon{background:rgba(0,150,230,0.1);color:#0080c0;}
:root[data-theme="light"] .cert-badge-hpt:hover{background:rgba(0,150,230,0.1);box-shadow:0 6px 24px rgba(0,150,230,0.08);}
:root[data-theme="light"] .cert-img{
  border-color:rgba(0,0,0,0.1);
  box-shadow:0 8px 40px rgba(0,0,0,0.1);
}

/* Certificate modal */
.cert-modal{
  display:none;position:fixed;inset:0;z-index:10001;
  background:rgba(0,0,0,0.8);
  align-items:center;justify-content:center;
}
.cert-modal.open{display:flex;}
.cert-modal-box{
  position:relative;max-width:700px;width:90%;
  animation:certFadeIn 0.25s ease;
}
.cert-modal-box img{
  width:100%;border-radius:12px;
  box-shadow:0 16px 60px rgba(0,0,0,0.5);
}
.cert-modal-close{
  position:absolute;top:-14px;right:-14px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);
  color:#fff;font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.2s;z-index:1;
}
.cert-modal-close:hover{background:rgba(255,255,255,0.3);}
@keyframes certFadeIn{from{opacity:0;transform:scale(0.92);}to{opacity:1;transform:scale(1);}}

/* ─── RADOVI PAGE ─── */
.radovi-wrap{max-width:700px;margin:0 auto;padding:0 5% 60px;}
.radovi-grid{display:flex;flex-direction:column;gap:10px;}
.rad-card{
  display:flex;align-items:center;gap:14px;
  background:var(--panel);border:1px solid var(--border);
  border-radius:12px;padding:14px 18px;
  cursor:pointer;transition:all 0.2s ease;
}
.rad-card:hover{border-color:rgba(255,149,0,0.3);transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,0.2);}
.rad-icon{
  width:38px;height:38px;border-radius:10px;
  background:rgba(255,149,0,0.1);border:1px solid rgba(255,149,0,0.2);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;flex-shrink:0;
}
.rad-info{flex:1;min-width:0;}
.rad-title{
  font-family:'Rajdhani',sans-serif;font-size:0.95rem;
  font-weight:700;letter-spacing:0.3px;color:var(--text);line-height:1.2;
}
.rad-meta{
  font-family:'Exo 2',sans-serif;font-size:0.65rem;
  font-weight:500;letter-spacing:0.5px;color:var(--dim);
  opacity:0.6;margin-top:1px;
}
.rad-count{
  font-family:'Exo 2',sans-serif;font-size:0.68rem;
  font-weight:600;color:var(--blue);opacity:0.7;
  white-space:nowrap;flex-shrink:0;
}
.rad-arrow{
  font-size:1rem;color:var(--dim);opacity:0.3;
  transition:all 0.2s;flex-shrink:0;
}
.rad-card:hover .rad-arrow{opacity:0.8;color:var(--blue);transform:translateX(3px);}

/* ─── RAD MODAL ─── */
.rad-modal{
  display:none;position:fixed;inset:0;z-index:99998;
  background:rgba(0,0,0,0.92);
  align-items:flex-start;justify-content:center;
  padding:20px;overflow-y:auto;
}
.rad-modal.open{display:flex;}
.rad-modal-box{
  max-width:720px;width:100%;
  background:#070e1c;border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;overflow:hidden;margin:auto;position:relative;
  animation:radModalIn 0.3s ease;
}
@keyframes radModalIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.rad-modal-close{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.15);
  color:#fff;font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:2;transition:background 0.2s;
}
.rad-modal-close:hover{background:rgba(255,255,255,0.15);}
.rad-modal-hero{
  width:100%;height:160px;
  background:linear-gradient(135deg,#0a1628,#0d2347);
  display:flex;align-items:center;justify-content:center;
  font-size:4rem;
}
.rad-modal-body{padding:28px 32px 36px;}
.rad-modal-tag{
  font-family:'Exo 2',sans-serif;font-size:0.65rem;
  font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:#ff9500;margin-bottom:10px;
}
.rad-modal-title{
  font-family:'Rajdhani',sans-serif;font-size:1.6rem;
  font-weight:700;color:#fff;line-height:1.3;margin:0 0 8px;
}
.rad-modal-meta{
  font-family:'Exo 2',sans-serif;font-size:0.72rem;
  color:rgba(255,255,255,0.3);margin-bottom:24px;
}
.rad-modal-content{
  font-family:'Exo 2',sans-serif;font-size:0.88rem;
  color:rgba(255,255,255,0.65);line-height:1.8;
}
.rm-item{
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,0.05);
}
.rm-item:last-child{border-bottom:none;}
.rm-item h3{
  font-family:'Rajdhani',sans-serif;font-size:1rem;
  font-weight:700;color:#fff;margin:0 0 6px;line-height:1.3;
}
.rm-item p{
  margin:0;font-size:0.84rem;color:rgba(255,255,255,0.55);line-height:1.7;
}
.rad-modal-gallery{
  margin-top:24px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.rm-section-label{
  font-family:'Exo 2',sans-serif;font-size:0.7rem;
  font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,0.3);margin-bottom:12px;
}
.rm-video-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:12px;margin-bottom:20px;
}
.rm-video-grid video{
  width:100%;border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  background:#000;
}
.rm-img-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;
}
.rad-modal-gallery img,.rm-img-grid img{
  width:100%;border-radius:10px;cursor:pointer;
  border:1px solid rgba(255,255,255,0.08);
  transition:transform 0.2s,box-shadow 0.2s;
  aspect-ratio:4/3;object-fit:cover;
}
.rad-modal-gallery img:hover{transform:scale(1.04);box-shadow:0 6px 24px rgba(0,0,0,0.4);}
@media(max-width:768px){
  .rad-modal-body{padding:20px;}
  .rad-modal-title{font-size:1.2rem;}
  .rad-modal-hero{height:120px;font-size:3rem;}
  .rm-video-grid{grid-template-columns:1fr;}
}

/* Light mode radovi */
:root[data-theme="light"] .rad-card{
  background:rgba(255,255,255,0.8);border-color:rgba(0,0,0,0.06);
}
:root[data-theme="light"] .rad-card:hover{border-color:rgba(255,149,0,0.25);}
:root[data-theme="light"] .rad-icon{
  background:rgba(255,149,0,0.08);border-color:rgba(255,149,0,0.15);
}
:root[data-theme="light"] .rad-modal-box{
  background:#fff;border-color:rgba(0,0,0,0.08);
}
:root[data-theme="light"] .rad-modal-hero{
  background:linear-gradient(135deg,#f0f4f8,#e8ecf0);
}
:root[data-theme="light"] .rad-modal-title{color:#1a1a2e;}
:root[data-theme="light"] .rad-modal-meta{color:rgba(0,0,0,0.35);}
:root[data-theme="light"] .rad-modal-content{color:rgba(0,0,0,0.6);}
:root[data-theme="light"] .rm-item{border-bottom-color:rgba(0,0,0,0.06);}
:root[data-theme="light"] .rm-item h3{color:#1a1a2e;}
:root[data-theme="light"] .rm-item p{color:rgba(0,0,0,0.5);}
:root[data-theme="light"] .rad-modal-gallery{border-top-color:rgba(0,0,0,0.06);}
:root[data-theme="light"] .rad-modal-close{background:rgba(0,0,0,0.08);color:#333;border-color:rgba(0,0,0,0.1);}

/* ─── INFO PAGE ─── */
.info-page-section{
  background:var(--panel);border:1px solid var(--border);
  border-radius:8px;padding:24px 28px;margin-bottom:14px;
  border-left:3px solid var(--blue);
  transition:border-color 0.2s;
}
.info-page-section:hover{border-left-color:var(--accent);}
.info-page-h{
  font-family:'Rajdhani',sans-serif;font-size:1rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--blue);margin-bottom:12px;
}
.info-page-p{
  font-size:0.88rem;color:var(--dim);line-height:1.8;margin:0;
}

@media(max-width:768px){
  .info-page-section{padding:18px 16px;}
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--black2);}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--blue),var(--accent));
  border-radius:3px;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,var(--accent),var(--blue));
  box-shadow:0 0 6px rgba(10,132,255,0.5);
}
:root[data-theme="light"] ::-webkit-scrollbar-track{background:#e8edf2;}
:root[data-theme="light"] ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#0A84FF,#0057c8);
}

/* ─── RESPONSIVE ─── */
@media(max-width:768px){
  /* Grid layouts */
  .contact-grid{grid-template-columns:1fr;}
  .sp-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr;gap:12px;}

  /* Stats */
  .stats-bar{
    flex-direction:row;flex-wrap:wrap;margin-top:auto;
    display:grid;grid-template-columns:1fr 1fr;gap:0;
  }
  .stat-item{
    border-right:none;border-bottom:1px solid rgba(255,255,255,0.04);
    padding:12px 16px;
    border-right:1px solid rgba(255,255,255,0.04);
  }
  .stat-item:nth-child(2n){border-right:none;}
  .stat-item:nth-child(n+3){border-bottom:none;}
  .stat-n{font-size:1rem;}
  .stat-l{font-size:0.55rem;}

  /* Nav */
  nav ul{display:none;}
  nav{padding:12px 4%;}
  .nav-back{display:none !important;}


  /* Hero */
  #home-hero{padding:0 5% 0;align-items:flex-start;text-align:left;background-position:center 50%;}
  #home-hero::after{background:
    linear-gradient(180deg, rgba(2,6,14,0.6) 0%, rgba(2,6,14,0.05) 30%, rgba(2,6,14,0.0) 50%, rgba(2,6,14,0.55) 75%, rgba(2,6,14,0.92) 100%),
    linear-gradient(90deg, rgba(2,6,14,0.7) 0%, rgba(2,6,14,0.3) 40%, transparent 70%) !important;}
  .hero-title{letter-spacing:0px;}
  .hero-sub{font-size:0.88rem;margin-top:12px;}
  .hero-divider{margin:16px 0;}
  .hero-eyebrow{font-size:0.65rem;margin-bottom:14px;}
  .stats-bar{margin-left:-5%;width:100vw;flex-wrap:wrap;}
  .stat-item{min-width:120px;padding:16px 20px;}
  .tools-bar{justify-content:flex-start;}

  /* Service cards */
  .svc-btn{padding:22px 20px;}
  .svc-icon{font-size:1.8rem;margin-bottom:12px;}
  .svc-name{font-size:1.05rem;}
  .svc-short{font-size:0.83rem;}
  .svc-arrow{margin-top:12px;font-size:0.72rem;}
  #services-section{padding:0 4% 60px;}
  .sec-label{margin-bottom:28px;}

  /* Service page */
  .sp-hero{padding:16px 4% 32px;}
  .sp-icon{font-size:2.4rem;margin-bottom:10px;}
  .sp-title{font-size:1.6rem;letter-spacing:1px;}
  .sp-subtitle{font-size:0.88rem;}
  .sp-body{padding:28px 4%;}
  .sp-card{padding:22px 18px;}
  .sp-cta-bar{flex-direction:column;padding:22px 20px;gap:16px;}
  .sp-cta-btns{width:100%;}
  .btn-wa,.btn-contact{width:100%;justify-content:center;}

  /* Back button sticky */
  .sp-back-wrap{
    position:sticky;top:54px;z-index:100;
    background:rgba(4,8,15,0.97);
    border-bottom:1px solid var(--border);
    padding:8px 4%;
  }
  .sp-back{
    margin-bottom:0;width:100%;
    justify-content:center;font-size:0.82rem;padding:10px 16px;
  }

  /* FAQ */
  .faq-q{font-size:0.85rem;padding:15px 16px;}
  .faq-a{font-size:0.85rem;}
  .faq-btn.open .faq-a{padding:0 16px 16px;}

  /* Contact */
  .cinfo-title{font-size:1.3rem;}
  .cform{padding:22px 18px;}
  .home-section{padding:52px 4%;}

  /* Section headers */
  .sec-h2{font-size:1.6rem;}
  .sec-desc{font-size:0.88rem;}

  /* Models */
  .model-chip{font-size:0.75rem;padding:4px 10px;}
  .models-wrap{gap:6px;}

  /* WA float */
  .wa-float span{display:none;}
  .wa-float{padding:13px;border-radius:50%;}

  /* Powered badge */
  .powered-badge{margin-top:12px;}
  .powered-name{font-size:0.95rem;}
}

.obd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-bottom:4px;}
.obd-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(10,132,255,0.04);border:1px solid rgba(10,132,255,0.12);border-radius:6px;cursor:pointer;font-size:0.82rem;color:var(--text);transition:all 0.15s;}
.obd-item:hover{border-color:rgba(10,132,255,0.35);background:rgba(10,132,255,0.08);}
.obd-item input[type=checkbox]{accent-color:var(--blue);width:14px;height:14px;flex-shrink:0;}
.obd-item:has(input:checked){border-color:var(--blue);background:rgba(10,132,255,0.12);}

#spGalleryTrack img {
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:8px;cursor:pointer;
  border:1px solid var(--border);
  transition:transform 0.2s,border-color 0.2s;
}
#spGalleryTrack img:hover { transform:scale(1.02);border-color:rgba(10,132,255,0.5); }
#spLightbox { display:none; }
#spLightbox.open { display:flex !important; }

.gallery-masonry {
  columns: 4;
  column-gap: 10px;
}
.gallery-masonry img {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: transform 0.2s, border-color 0.2s;
  break-inside: avoid;
}
.gallery-masonry img:hover { transform: scale(1.02); border-color: rgba(10,132,255,0.5); }
.gallery-show-more {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  background: rgba(10,132,255,0.08);
  border: 1px solid rgba(10,132,255,0.2);
  border-radius: 8px;
  color: var(--blue);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.gallery-show-more:hover { background: rgba(10,132,255,0.15); }
@media(max-width:700px) { .gallery-masonry { columns: 2; } }
@media(max-width:400px) { .gallery-masonry { columns: 1; } }

/* ═══ LOADING SCREEN ═══ */
#loadingScreen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #02060e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.7s ease;
}
#loadingScreen.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.ls-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 16px;
  margin-bottom: 28px;
  opacity: 0;
  animation: lsFadeIn 0.8s 0.1s ease forwards;
}
.ls-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  letter-spacing: 5px;
  margin-bottom: 32px;
  opacity: 0;
  animation: lsFadeIn 0.6s 0.35s ease forwards;
}
.ls-line {
  width: 160px;
  height: 2px;
  background: #0a84ff;
  border-radius: 2px;
  transform: scaleX(0);
  animation: lsExpand 1.2s 0.5s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes lsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes lsExpand {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ═══ ONLINE BADGE ═══ */
.online-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 6px;
  vertical-align: middle;
}
.online-badge.online {
  background: rgba(0, 212, 100, 0.12);
  color: #00d464;
  border: 1px solid rgba(0, 212, 100, 0.3);
}
.online-badge.offline {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.1);
}
.online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00d464;
  flex-shrink: 0;
}
.online-badge.online .online-dot {
  animation: dotPulse 1.5s ease-in-out infinite;
}
.online-badge.offline .online-dot {
  background: rgba(255,255,255,0.2);
  animation: none;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

/* ═══ COUNTDOWN BANNER ═══ */
#countdownBanner {
  background: linear-gradient(135deg, #ff6420, #ff3a00);
  padding: 12px 20px;
  text-align: center;
  position: relative;
  z-index: 299;
}
.cd-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}
.cd-text span {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  color: #fff;
  background: rgba(0,0,0,0.25);
  padding: 2px 10px;
  border-radius: 6px;
  margin: 0 4px;
}
.cd-sub {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.8);
  margin-top: 2px;
}

/* ═══ AKTIVACIJA FUNKCIJA PAGE ═══ */
.aktiv-brands {
  display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap;
}
.aktiv-brand-btn {
  padding: 8px 22px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--panel); color: var(--dim); font-size: 0.82rem;
  font-weight: 700; letter-spacing: 1px; cursor: pointer;
  transition: all 0.2s; font-family: 'Exo 2', sans-serif;
}
.aktiv-brand-btn.active, .aktiv-brand-btn:hover {
  border-color: var(--blue); color: #fff; background: rgba(10,132,255,0.1);
}
.aktiv-cats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.aktiv-cat {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px;
  transition: border-color 0.2s;
}
.aktiv-cat:hover { border-color: rgba(10,132,255,0.3); }
.aktiv-cat-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.aktiv-cat-icon { font-size: 1.6rem; }
.aktiv-cat-title {
  font-family: 'Rajdhani', sans-serif; font-size: 1rem;
  font-weight: 700; letter-spacing: 1px; color: #fff;
  text-transform: uppercase;
}
.aktiv-cat-sub { font-size: 0.72rem; color: var(--dim); margin-top: 1px; }
.aktiv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.aktiv-tag {
  padding: 4px 12px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 600;
  background: rgba(10,132,255,0.07);
  border: 1px solid rgba(10,132,255,0.18);
  color: rgba(232,238,248,0.85);
  transition: all 0.15s;
}
.aktiv-tag:hover { background: rgba(10,132,255,0.15); border-color: rgba(10,132,255,0.4); }
@media(max-width: 768px) {
  .aktiv-cats { grid-template-columns: 1fr; }
}

/* ═══ AKTIVACIJA FUNKCIJA PAGE ═══ */
.akt-brand-tabs {
  display: flex;
  gap: 10px;
  margin: 24px 0 28px;
  flex-wrap: wrap;
}
.akt-tab {
  padding: 8px 24px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--dim);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.akt-tab:hover { border-color: rgba(10,132,255,0.4); color: var(--text); }
.akt-tab.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.akt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.akt-cat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  transition: border-color 0.2s;
}
.akt-cat-card:hover { border-color: rgba(10,132,255,0.3); }
.akt-cat-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.akt-cat-desc {
  font-size: 0.78rem;
  color: var(--dim);
  margin-bottom: 14px;
  line-height: 1.5;
}
.akt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.akt-tag {
  font-size: 0.74rem;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(10,132,255,0.06);
  border: 1px solid rgba(10,132,255,0.15);
  color: var(--text);
  line-height: 1.4;
}
@media(max-width: 768px) {
  .akt-grid { grid-template-columns: 1fr; }
  .akt-brand-tabs { gap: 8px; }
  .akt-tab { padding: 7px 16px; font-size: 0.85rem; }
}


}

/* ═══ REFERRAL ═══ */
.referral-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
}
@media(max-width: 640px) { .referral-wrap { grid-template-columns: 1fr; } }
.ref-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ref-icon { font-size: 2rem; }
.ref-title { font-family: 'Rajdhani', sans-serif; font-size: 1.2rem; font-weight: 700; color: #fff; letter-spacing: 1px; }
.ref-sub { font-size: 0.85rem; color: var(--dim); line-height: 1.6; }
.ref-input-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ref-input {
  flex: 1; min-width: 140px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: #fff;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-family: 'Exo 2', sans-serif;
  outline: none;
  transition: border-color 0.2s;
}
.ref-input:focus { border-color: var(--blue); }
.ref-gen-btn, .ref-use-btn {
  padding: 10px 18px;
  background: linear-gradient(135deg, #0a84ff, #0060cc);
  border: none; border-radius: 8px;
  color: #fff; font-weight: 700;
  font-size: 0.85rem; cursor: pointer;
  font-family: 'Exo 2', sans-serif;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.ref-gen-btn:hover, .ref-use-btn:hover { opacity: 0.85; }
.ref-code-box {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(10,132,255,0.1);
  border: 1px solid rgba(10,132,255,0.3);
  border-radius: 8px; padding: 12px 16px;
  margin-top: 4px;
}
.ref-code-label { font-size: 0.78rem; color: var(--dim); }
.ref-code {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem; font-weight: 700;
  color: #0a84ff; letter-spacing: 3px;
  flex: 1;
}
.ref-copy-btn {
  background: none; border: 1px solid rgba(10,132,255,0.4);
  border-radius: 6px; color: #0a84ff;
  padding: 6px 12px; font-size: 0.78rem;
  cursor: pointer; transition: all 0.2s;
}
.ref-copy-btn:hover { background: rgba(10,132,255,0.15); }
.ref-hint { font-size: 0.8rem; color: var(--dim); line-height: 1.6; }
.ref-wa-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff;
  text-decoration: none; padding: 10px 20px;
  border-radius: 8px; font-weight: 700;
  font-size: 0.85rem; margin-top: 4px;
  width: fit-content; transition: opacity 0.2s;
}
.ref-wa-btn:hover { opacity: 0.85; }


/* INSTAGRAM EMBED */
.ig-card {
  max-width: 480px;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.ig-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.ig-follow-btn {
  background: linear-gradient(135deg,#e1306c,#833ab4);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: opacity 0.2s;
}
.ig-follow-btn:hover { opacity: 0.85; }
.ig-embed-container {
  position: relative;
  background: #0a1628;
  /* Clip the white instagram embed UI */
  overflow: hidden;
}
/* Hide the white border/bg of instagram embed */
.ig-embed-container .instagram-media {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-width: unset !important;
  width: 100% !important;
}
#igEmbedWrap {
  /* Clip bottom white bar slightly */
  margin-bottom: -8px;
}
#igEmbedWrap iframe {
  border-radius: 0 !important;
  display: block;
}
#igEmbedWrap blockquote {
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: #0a1628 !important;
}
.ig-card-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}


/* ═══ AUTH ═══ */
.nav-account {
  display: flex;
  align-items: center;
  gap: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: rgba(255,255,255,0.55);
  padding: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  position: relative;
}
.nav-account:hover { color: rgba(255,255,255,0.9); }
.nav-acc-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
  overflow: hidden;
  transition: all 0.2s;
  position: relative;
}
.nav-account:hover .nav-acc-avatar {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
.nav-acc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* Hide label by default on desktop — icon only */
#navAccountLabel {
  display: none;
}
.nav-account.logged-in .nav-acc-avatar {
  border-color: rgba(48,209,88,0.5);
  background: rgba(48,209,88,0.1);
}
/* Online indicator dot when logged in */
.nav-acc-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #30d158;
  border: 1.5px solid #060d1a;
  display: none;
}
.nav-account.logged-in .nav-acc-dot { display: block; }
@media(max-width:768px){
  .nav-acc-avatar { width: 30px; height: 30px; font-size: 0.7rem; }
}

/* Auth Modal */
#authModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: rgba(0,0,0,0.88);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-box {
  max-width: 420px;
  width: 100%;
  background: #0a1628;
  border: 1px solid rgba(10,132,255,0.3);
  border-radius: 16px;
  overflow: hidden;
}
.auth-header {
  background: linear-gradient(135deg, #0a84ff, #0060cc);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.auth-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
}
.auth-close {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.auth-tab {
  flex: 1;
  padding: 13px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
}
.auth-tab.active {
  color: #0a84ff;
  border-bottom-color: #0a84ff;
}
.auth-body { padding: 24px; }
.auth-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  padding: 11px 14px;
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.auth-input:focus { border-color: #0a84ff; }
.auth-submit {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #0a84ff, #0060cc);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  margin-top: 4px;
  transition: opacity 0.2s;
}
.auth-submit:hover { opacity: 0.88; }
.auth-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-msg {
  font-size: 0.82rem;
  margin-top: 10px;
  text-align: center;
  min-height: 20px;
}
.auth-msg.success { color: #30d158; }
.auth-msg.error { color: #ff453a; }

/* User panel (when logged in) */
.auth-user-panel { padding: 24px; text-align: center; }
.auth-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a84ff, #0060cc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 14px;
}
.auth-user-email {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
  word-break: break-all;
}
.auth-logout {
  padding: 10px 24px;
  background: rgba(255,69,58,0.15);
  border: 1px solid rgba(255,69,58,0.3);
  border-radius: 8px;
  color: #ff453a;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.auth-logout:hover { background: rgba(255,69,58,0.25); }


/* ROLE BADGES */
.role-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.role-vlasnik  { background: rgba(191,90,242,0.2); color: #bf5af2; border: 1px solid rgba(191,90,242,0.3); }
.role-novi     { background: rgba(142,142,147,0.2); color: #8e8e93; border: 1px solid rgba(142,142,147,0.3); }
.role-redovan  { background: rgba(10,132,255,0.2); color: #0a84ff; border: 1px solid rgba(10,132,255,0.3); }
.role-vip      { background: rgba(255,214,10,0.2); color: #ffd60a; border: 1px solid rgba(255,214,10,0.3); }
.role-referral { background: rgba(255,159,10,0.2); color: #ff9f0a; border: 1px solid rgba(255,159,10,0.3); }
.role-blokiran { background: rgba(255,69,58,0.2); color: #ff453a; border: 1px solid rgba(255,69,58,0.3); }
.user-card {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.user-card:last-child { border-bottom: none; }
.user-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a84ff, #0060cc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  color: #fff;
  font-weight: 700;
}
.user-info { flex: 1; min-width: 120px; }
.user-name { font-size: 0.85rem; font-weight: 600; color: #fff; }
.user-email { font-size: 0.72rem; color: rgba(255,255,255,0.4); margin-top:2px; }
.user-role-select {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: #fff;
  padding: 5px 8px;
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
.user-save-btn {
  padding: 5px 12px;
  background: rgba(48,209,88,0.15);
  border: 1px solid rgba(48,209,88,0.3);
  border-radius: 6px;
  color: #30d158;
  font-size: 0.72rem;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.user-save-btn:hover { background: rgba(48,209,88,0.25); }


/* DASHBOARD */
.dash-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.dash-bar-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  width: 80px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.dash-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}
.dash-bar-val {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.35);
  width: 24px;
  text-align: right;
  flex-shrink: 0;
}
.dash-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dash-user-row:last-child { border-bottom: none; }


/* PROFILE TABS */
.ptab { transition: color 0.2s, border-color 0.2s; }
.ptab.active { color: #0a84ff !important; border-bottom-color: #0a84ff !important; }

/* STARS */
.star { color: #ffd60a; }

/* AUTH MODAL wider for profile */
#authModal .auth-box {
  max-width: 380px;
}


/* ===== BLOG ===== */
#blogSection { padding: 60px 0 80px; }
.blog-section-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 8px;
}
.blog-section-sub {
  text-align: center;
  color: rgba(255,255,255,0.35);
  font-size: 0.85rem;
  margin-bottom: 36px;
  letter-spacing: 1px;
}
.blog-tags {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.blog-tag-btn {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: rgba(255,255,255,0.4);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.blog-tag-btn:hover, .blog-tag-btn.active {
  background: rgba(10,132,255,0.15);
  border-color: rgba(10,132,255,0.4);
  color: #0a84ff;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.blog-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s;
}
.blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(10,132,255,0.25);
  background: rgba(10,132,255,0.04);
  box-shadow: 0 12px 40px rgba(10,132,255,0.1);
}
.blog-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, #0a1628, #0a2040);
}
.blog-card-img-placeholder {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, #0a1628, #0d2347);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}
.blog-card-body { padding: 18px; }
.blog-card-tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #0a84ff;
  margin-bottom: 8px;
}
.blog-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 8px;
}
.blog-card-excerpt {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.6;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.blog-card-date { font-size: 0.68rem; color: rgba(255,255,255,0.25); }
.blog-card-read {
  font-size: 0.72rem;
  font-weight: 700;
  color: #0a84ff;
  letter-spacing: 0.5px;
}
/* Blog Modal */
#blogModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.92);
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.blog-modal-box {
  max-width: 720px;
  width: 100%;
  background: #070e1c;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  overflow: hidden;
  margin: auto;
  position: relative;
}
.blog-modal-cover {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}
.blog-modal-cover-placeholder {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #0a1628, #0d2347);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}
.blog-modal-body { padding: 28px 32px 36px; }
.blog-modal-tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0a84ff;
  margin-bottom: 10px;
}
.blog-modal-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 10px;
}
.blog-modal-meta { font-size: 0.72rem; color: rgba(255,255,255,0.3); margin-bottom: 24px; }
.blog-modal-content {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.9;
}
.blog-modal-content h2 { color: #fff; font-size: 1.05rem; margin: 24px 0 10px; }
.blog-modal-content h3 { color: rgba(255,255,255,0.85); font-size: 0.95rem; margin: 18px 0 8px; }
.blog-modal-content p { margin-bottom: 14px; }
.blog-modal-content strong { color: #fff; }
.blog-modal-content ul { padding-left: 20px; margin-bottom: 14px; }
.blog-modal-content li { margin-bottom: 6px; }
.blog-modal-content img { width:100%; border-radius:10px; margin:14px 0; object-fit:cover; }
.blog-comments { border-top:1px solid rgba(255,255,255,0.07); margin-top:28px; padding-top:22px; }
.blog-comments-title { font-size:0.78rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.3); margin-bottom:16px; }
.blog-comment-item { display:flex; gap:10px; margin-bottom:16px; }
.blog-comment-av { width:30px; height:30px; border-radius:50%; background:rgba(10,132,255,0.2); border:1px solid rgba(10,132,255,0.3); display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; color:#0a84ff; flex-shrink:0; }
.blog-comment-body { flex:1; }
.blog-comment-name { font-size:0.75rem; font-weight:700; color:rgba(255,255,255,0.8); margin-bottom:3px; }
.blog-comment-text { font-size:0.8rem; color:rgba(255,255,255,0.55); line-height:1.6; }
.blog-comment-date { font-size:0.65rem; color:rgba(255,255,255,0.2); margin-top:4px; }
.blog-comment-form { margin-top:16px; display:flex; gap:8px; }
.blog-comment-input { flex:1; padding:9px 12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:8px; color:rgba(255,255,255,0.7); font-size:0.8rem; outline:none; }
.blog-comment-input:focus { border-color:rgba(10,132,255,0.5); }
.blog-comment-send { padding:9px 16px; background:#0a84ff; border:none; border-radius:8px; color:#fff; font-size:0.8rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.blog-comment-login { font-size:0.78rem; color:rgba(255,255,255,0.25); text-align:center; padding:10px 0; }
.blog-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  line-height: 1;
}
.blog-empty {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255,255,255,0.2);
  font-size: 0.85rem;
}
@media(max-width:768px){
  .blog-grid { grid-template-columns: 1fr; }
  .blog-modal-body { padding: 20px; }
  .blog-modal-title { font-size: 1.05rem; }
}


@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.25); }
  28% { transform: scale(1); }
  42% { transform: scale(1.15); }
  56% { transform: scale(1); }
}

/* ═══ SCROLL-TO-TOP BUTTON ═══ */
#scrollTopBtn {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  z-index: 999;
  box-shadow: 0 4px 14px rgba(10,132,255,0.3);
}
#scrollTopBtn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#scrollTopBtn:hover {
  background: var(--blue2);
  transform: translateY(-2px);
}

/* ═══ BREADCRUMB NAVIGATION ═══ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0 8px;
  font-size: 0.8rem;
  color: var(--dim);
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--blue);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb-sep {
  color: var(--dim);
  opacity: 0.5;
  margin: 0 2px;
}

/* ═══ SKELETON LOADING ═══ */
.skeleton {
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel2) 50%, var(--panel) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 12px;
}
.skeleton-card { min-height: 80px; }
/* ═══ PAGE TRANSITIONS ═══ */
.page-fade-out {
  animation: pageFadeOut 0.2s ease forwards;
}
.page-fade-in {
  animation: pageFadeIn 0.3s ease forwards;
}
@keyframes pageFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══ FUEL CALCULATOR ═══ */
/* ─── FUEL CALCULATOR ─── */
.fuel-calc-wrap{
  max-width:1100px;margin:0 auto 30px;
  background:rgba(11,18,34,0.7);
  border:1px solid rgba(10,132,255,0.12);border-radius:18px;
  padding:32px 36px;position:relative;overflow:hidden;
}
.fuel-calc-wrap::before{
  content:'';position:absolute;top:-1px;left:24px;width:80px;height:2px;
  background:linear-gradient(90deg,var(--blue),transparent);border-radius:2px;
}
.fc-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;}
.fc-icon-wrap{
  width:48px;height:48px;border-radius:14px;
  background:rgba(10,132,255,0.1);border:1px solid rgba(10,132,255,0.2);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);flex-shrink:0;
}
.fc-title{
  font-family:'Rajdhani',sans-serif;font-size:1.25rem;font-weight:700;
  letter-spacing:0.5px;margin:0;
}
.fc-subtitle{font-size:0.82rem;color:var(--dim);margin:2px 0 0;}
.fc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;}
.fc-input-group{display:flex;flex-direction:column;gap:6px;}
.fc-label{
  display:flex;align-items:center;gap:6px;
  font-size:0.78rem;color:var(--dim);font-weight:600;letter-spacing:0.3px;
}
.fc-label svg{color:var(--blue);opacity:0.7;}
.fc-input-wrap{position:relative;}
.fc-input-wrap input{
  width:100%;padding:11px 60px 11px 14px;
  border-radius:10px;border:1px solid var(--border);
  background:var(--black2);color:var(--text);
  font-size:0.88rem;font-family:'Exo 2',sans-serif;
  transition:border-color 0.25s;
}
.fc-input-wrap input:focus{outline:none;border-color:var(--blue);}
.fc-select{
  width:100%;padding:11px 14px;
  border-radius:10px;border:1px solid var(--border);
  background:var(--black2);color:var(--text);
  font-size:0.88rem;font-family:'Exo 2',sans-serif;
  transition:border-color 0.25s;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7a8d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.fc-select:focus{outline:none;border-color:var(--blue);}
:root[data-theme="light"] .fc-select{background:#fff;border-color:#d0d8e4;}
.fc-unit{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:0.72rem;color:var(--dim);font-weight:600;letter-spacing:0.5px;
  pointer-events:none;
}
.fc-calc-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;border-radius:10px;border:none;
  background:var(--blue);color:#fff;cursor:pointer;
  font-family:'Exo 2',sans-serif;font-size:0.88rem;font-weight:700;
  letter-spacing:0.5px;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 0 20px rgba(10,132,255,0.2);
}
.fc-calc-btn:hover{background:#0070e0;transform:translateY(-2px);box-shadow:0 0 30px rgba(10,132,255,0.3);}
.fc-results{margin-top:24px;animation:fcFadeIn 0.4s ease;}
@keyframes fcFadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.fc-results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px;}
.fc-stat-card{
  background:rgba(255,255,255,0.03);border:1px solid var(--border);
  border-radius:14px;padding:18px 16px;text-align:center;
}
.fc-stat-icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px;
}
.fc-stat-green{background:rgba(0,212,100,0.1);color:#00d464;}
.fc-stat-blue{background:rgba(10,132,255,0.1);color:var(--blue);}
.fc-stat-orange{background:rgba(255,149,0,0.1);color:#ff9500;}
.fc-stat-value{font-size:1.15rem;font-weight:800;margin-bottom:4px;}
.fc-stat-label{font-size:0.72rem;color:var(--dim);letter-spacing:0.3px;}
.fc-highlight{
  background:rgba(10,132,255,0.06);border:1px solid rgba(10,132,255,0.15);
  border-radius:14px;padding:18px 20px;
}
.fc-highlight-main{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid rgba(10,132,255,0.1);
}
.fc-highlight-label{font-weight:700;font-size:0.95rem;}
.fc-highlight-value{font-size:1.4rem;font-weight:800;color:#00d464;}
.fc-highlight-sub{display:flex;justify-content:space-between;font-size:0.82rem;color:var(--dim);}
.fc-highlight-roi{font-weight:700;color:var(--blue);}
@media(max-width:768px){
  .fuel-calc-wrap{padding:24px 20px;}
  .fc-inputs{grid-template-columns:1fr;}
  .fc-results-grid{grid-template-columns:1fr;}
}
@media(min-width:769px) and (max-width:1024px){
  .fc-results-grid{grid-template-columns:repeat(3,1fr);}
}
:root[data-theme="light"] .fuel-calc-wrap{background:rgba(255,255,255,0.7);border-color:#d0d8e4;}
:root[data-theme="light"] .fc-input-wrap input{background:#fff;border-color:#d0d8e4;}
:root[data-theme="light"] .fc-stat-card{background:rgba(0,0,0,0.02);border-color:#d0d8e4;}
:root[data-theme="light"] .fc-highlight{background:rgba(10,132,255,0.04);border-color:rgba(10,132,255,0.12);}

/* ═══ PORTFOLIO SECTION ═══ */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 16px;
}
.portfolio-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(10,132,255,0.12);
}
.portfolio-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.portfolio-card-body {
  padding: 16px;
}
.portfolio-card-body h4 {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: var(--text);
}
.portfolio-card-body .pc-service {
  font-size: 0.75rem;
  color: var(--blue);
  margin-bottom: 8px;
}
.portfolio-card-body .pc-results {
  font-size: 0.8rem;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 6px;
}
.portfolio-card-body .pc-desc {
  font-size: 0.78rem;
  color: var(--dim);
  line-height: 1.5;
}
.portfolio-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.portfolio-filters button {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--dim);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
}
.portfolio-filters button.active,
.portfolio-filters button:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}


/* ═══ PUSH NOTIFICATION BANNER ═══ */
.push-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 1000;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.push-banner.visible { transform: translateY(0); }
.push-banner p {
  font-size: 0.82rem;
  color: var(--text);
  margin: 0;
}
.push-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.push-banner-actions button {
  padding: 6px 16px;
  border-radius: 8px;
  border: none;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
}
.push-banner .pb-allow {
  background: var(--blue);
  color: #fff;
}
.push-banner .pb-dismiss {
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--border);
}

/* ═══ BLOG SEARCH & SHARE ═══ */
.blog-search-wrap {
  margin-bottom: 16px;
}
.blog-search-wrap input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--black2);
  color: var(--text);
  font-size: 0.85rem;
}
.blog-reading-time {
  font-size: 0.7rem;
  color: var(--dim);
  margin-top: 6px;
}
.blog-share-btns {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.blog-share-btns button {
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--dim);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s;
}
.blog-share-btns button:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* ═══════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ═══════════════════════════════════════════ */

/* ─── LIGHT MODE: GLOBAL POZADINA ─── */
:root[data-theme="light"] #page-home,
:root[data-theme="light"] #page-booking,
:root[data-theme="light"] #service-page{
  background:
    radial-gradient(ellipse 70% 50% at 85% 15%, rgba(10,132,255,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 10% 85%, rgba(0,180,255,0.07) 0%, transparent 50%),
    #f0f4f8;
}

/* ─── HERO POZADINA ─── */
:root[data-theme="light"] .hero-video-bg{
  background:
    radial-gradient(ellipse 70% 55% at 15% 25%, rgba(10,132,255,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 15%, rgba(0,180,255,0.14) 0%, transparent 50%),
    radial-gradient(ellipse 55% 45% at 50% 80%, rgba(10,132,255,0.12) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 5% 70%, rgba(0,212,255,0.1) 0%, transparent 45%),
    radial-gradient(ellipse 40% 35% at 90% 65%, rgba(10,100,255,0.08) 0%, transparent 45%),
    linear-gradient(150deg, #e8eff8 0%, #dce6f2 25%, #e4ecf7 50%, #dfe8f4 75%, #eaf0f8 100%);
}
:root[data-theme="light"] #heroCanvas{opacity:0.35;}
:root[data-theme="light"] .hero-grid-overlay{
  background-image:
    linear-gradient(rgba(10,132,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,132,255,0.06) 1px, transparent 1px);
  mask-image:radial-gradient(ellipse 75% 65% at 50% 50%, rgba(0,0,0,0.5) 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 50%, rgba(0,0,0,0.5) 0%, transparent 70%);
}
:root[data-theme="light"] .hero-streak-1{
  height:2px;
  background:linear-gradient(90deg, transparent 0%, rgba(10,132,255,0.15) 20%, rgba(0,212,255,0.2) 50%, rgba(10,132,255,0.15) 80%, transparent 100%);
}
:root[data-theme="light"] .hero-streak-2{
  height:2px;
  background:linear-gradient(90deg, transparent 0%, rgba(10,132,255,0.1) 30%, rgba(0,212,255,0.12) 60%, transparent 100%);
}
:root[data-theme="light"] .hero-streak-3{
  height:2px;
  background:linear-gradient(90deg, transparent 0%, rgba(10,132,255,0.08) 40%, rgba(0,212,255,0.1) 70%, transparent 100%);
}
:root[data-theme="light"] .hero-vignette{
  background:radial-gradient(ellipse 90% 80% at 50% 45%, transparent 50%, rgba(232,239,248,0.4) 100%);
}
:root[data-theme="light"] .hero-glow-ring{
  background:radial-gradient(circle, rgba(10,132,255,0.12) 0%, rgba(0,212,255,0.06) 35%, transparent 60%);
}

/* ─── HERO TEKST ─── */
:root[data-theme="light"] #home-hero::after{
  background:linear-gradient(180deg, rgba(240,244,248,0.88) 0%, rgba(240,244,248,0.65) 40%, rgba(240,244,248,0.78) 70%, rgba(240,244,248,0.95) 100%);
}
:root[data-theme="light"] .ht-white{color:#0f1722;}
:root[data-theme="light"] .hero-sub{color:#2a3a4e;}
:root[data-theme="light"] .hero-eyebrow{
  background:rgba(10,132,255,0.08);border-color:rgba(10,132,255,0.2);color:#0A84FF;
}
:root[data-theme="light"] .hero-divider{
  background:linear-gradient(90deg,transparent,rgba(10,132,255,0.3),transparent);
}

/* ─── ACCOUNT IKONICA ─── */
:root[data-theme="light"] .nav-account{color:#3d4f63;}
:root[data-theme="light"] .nav-account:hover{color:#0f1722;}
:root[data-theme="light"] .nav-acc-avatar{
  border-color:rgba(15,23,34,0.2);background:rgba(15,23,34,0.06);color:#3d4f63;
}
:root[data-theme="light"] .nav-account:hover .nav-acc-avatar{
  background:rgba(10,132,255,0.08);border-color:rgba(10,132,255,0.3);color:#0A84FF;
}

/* ─── STATS BAR ─── */
:root[data-theme="light"] .stats-bar{
  background:rgba(255,255,255,0.97);border-color:#d0d8e4;
}
:root[data-theme="light"] .stat-n{color:#0A84FF;}
:root[data-theme="light"] .stat-l{color:#3d4f63;}
:root[data-theme="light"] .stat-item+.stat-item{border-left-color:#d0d8e4;}

/* ─── TOOLS BAR ─── */
:root[data-theme="light"] .tool-btn{
  background:rgba(255,255,255,0.9);
  border-color:#d0d8e4;color:#0f1722;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
:root[data-theme="light"] .tool-btn::before{opacity:0.3;}
:root[data-theme="light"] .tool-btn:hover{
  border-color:var(--blue);background:rgba(10,132,255,0.06);
  box-shadow:0 4px 20px rgba(10,132,255,0.1);
}

/* ─── PARTNERS BAR ─── */
:root[data-theme="light"] .partners-bar{
  background:rgba(240,244,248,0.8);border-color:#d0d8e4;
}
:root[data-theme="light"] .partners-label{color:#3d4f63;}
:root[data-theme="light"] .partner-badge{border-color:#d0d8e4;background:rgba(255,255,255,0.6);}

/* ─── SERVICE KARTICE ─── */
:root[data-theme="light"] .svc-btn{
  background:#fff;border-color:#d0d8e4;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
:root[data-theme="light"] .svc-btn:hover{
  border-color:var(--blue);box-shadow:0 4px 16px rgba(10,132,255,0.1);
}
:root[data-theme="light"] .svc-name{color:#0f1722;}
:root[data-theme="light"] .svc-short{color:#3d4f63;}

/* ─── TOOL MODAL OVERLAYS (Checker + Calculator) ─── */
:root[data-theme="light"] .tool-modal-overlay{
  background:rgba(240,244,248,0.92);
}
:root[data-theme="light"] .tool-modal{
  background:#fff;border-color:#d0d8e4;
  box-shadow:0 8px 40px rgba(0,0,0,0.1);
}
:root[data-theme="light"] .tm-close{color:#3d4f63;}
:root[data-theme="light"] .tm-close:hover{color:#0f1722;}
:root[data-theme="light"] .tm-header h2{color:#0f1722;}
:root[data-theme="light"] .tm-header p{color:#3d4f63;}
:root[data-theme="light"] .cc-label{color:#3d4f63;}
:root[data-theme="light"] .cc-select{
  background:#f5f7fa;border-color:#d0d8e4;color:#0f1722;
}
:root[data-theme="light"] .cc-select option{background:#fff;color:#0f1722;}
:root[data-theme="light"] .cc-result{
  background:#f5f7fa;border-color:#d0d8e4;
}
:root[data-theme="light"] .cc-bar-label{color:#3d4f63;}
:root[data-theme="light"] .cc-bar-track{background:#e8edf2;}
:root[data-theme="light"] .cc-car-name{color:#0f1722;}
:root[data-theme="light"] .cc-gain{color:#0f1722;}
:root[data-theme="light"] .cc-leg-item{color:#3d4f63;}

/* ─── SERVICE DETAIL PAGE ─── */
:root[data-theme="light"] .sp-back-btn{
  background:#fff;border-color:#d0d8e4;color:#0f1722;
}
:root[data-theme="light"] .sp-card{
  background:#fff;border-color:#d0d8e4;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
:root[data-theme="light"] .sp-cta-bar{
  background:linear-gradient(135deg,rgba(10,132,255,0.06),rgba(0,212,255,0.03));
  border-color:#d0d8e4;
}
:root[data-theme="light"] .sp-cta-title{color:#0f1722;}
:root[data-theme="light"] .sp-cta-sub{color:#3d4f63;}
:root[data-theme="light"] .model-chip{
  background:rgba(10,132,255,0.06);border-color:#d0d8e4;color:#0f1722;
}
:root[data-theme="light"] .model-chip:hover{
  background:rgba(10,132,255,0.12);border-color:var(--blue);
}

/* ─── BOOKING FORMA ─── */
:root[data-theme="light"] .booking-section{background:#f5f7fa;border-color:#d0d8e4;}
:root[data-theme="light"] .bsvc-item{
  background:#fff;border-color:#d0d8e4;color:#0f1722;
}
:root[data-theme="light"] .bsvc-item.checked{
  border-color:var(--blue);background:rgba(10,132,255,0.06);
}
:root[data-theme="light"] .booking-input,
:root[data-theme="light"] .booking-select,
:root[data-theme="light"] .booking-textarea{
  background:#fff;border-color:#d0d8e4;color:#0f1722;
}

/* ─── MOJE VOZILO WIDGET ─── */
:root[data-theme="light"] .mv-toggle{
  background:rgba(255,255,255,0.9);border-color:rgba(0,0,0,0.08);color:#0f1722;
  box-shadow:0 2px 16px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.8);
}
:root[data-theme="light"] .mv-toggle:hover{
  border-color:rgba(10,132,255,0.3);box-shadow:0 4px 20px rgba(10,132,255,0.1);
}
:root[data-theme="light"] .mv-icon{
  background:linear-gradient(135deg,rgba(10,132,255,0.1),rgba(0,212,255,0.05));
  border-color:rgba(10,132,255,0.15);color:#0a84ff;
}
:root[data-theme="light"] .mv-panel{
  background:#fff;border-color:#d0d8e4;
  box-shadow:0 8px 30px rgba(0,0,0,0.1);
}
:root[data-theme="light"] .mv-panel-title{color:#0f1722;}
:root[data-theme="light"] .mv-select,
:root[data-theme="light"] .mv-input{
  background:#f5f7fa;border-color:#d0d8e4;color:#0f1722;
}
:root[data-theme="light"] .mv-car-name{color:#0f1722;}
:root[data-theme="light"] .mv-compat-label{color:#3d4f63;}
:root[data-theme="light"] .mv-change-btn{color:#3d4f63;}

/* ─── FOOTER ─── */
:root[data-theme="light"] site-footer{
  background:#e8edf2;border-top-color:#d0d8e4;
}
:root[data-theme="light"] .footer-divider{background:#d0d8e4;}
:root[data-theme="light"] .footer-nav-link{color:#3d4f63;}
:root[data-theme="light"] .footer-nav-link:hover{color:var(--blue);}
:root[data-theme="light"] .footer-contact-item{color:#3d4f63;}
:root[data-theme="light"] .footer-social{border-color:#d0d8e4;color:#3d4f63;}
:root[data-theme="light"] .footer-copy{color:#3d4f63;}

/* ─── MOBILE STICKY BAR ─── */
:root[data-theme="light"] .mobile-sticky-bar{
  background:rgba(255,255,255,0.99);border-top-color:#d0d8e4;
}
:root[data-theme="light"] .msb-call{
  border-color:#d0d8e4;color:#0f1722;background:#fff;
}

/* ─── WHATSAPP FLOAT ─── */
:root[data-theme="light"] .wa-float{
  box-shadow:0 4px 16px rgba(0,0,0,0.1);
}

/* ─── SCROLL TOP ─── */
:root[data-theme="light"] #scrollTopBtn{
  box-shadow:0 4px 16px rgba(10,132,255,0.15);
}

/* ─── TICKER ─── */
:root[data-theme="light"] .ticker-wrap{
  background:linear-gradient(90deg,#0A84FF,#0068d6);
  border-bottom-color:rgba(0,0,0,0.06);
}

/* ─── CTA BANNER / INFO PAGES ─── */
:root[data-theme="light"] .cta-banner-inner{background:rgba(255,255,255,0.7);border-color:#d0d8e4;}
:root[data-theme="light"] .cta-banner-inner::before{opacity:0.5;}
:root[data-theme="light"] .cta-banner-primary{box-shadow:0 4px 16px rgba(10,132,255,0.15);}
:root[data-theme="light"] .cta-banner-secondary{background:rgba(37,211,102,0.06);}
:root[data-theme="light"] .info-content{color:#0f1722;}

/* ─── ADMIN OVERLAY (ostaje tamni) ─── */

/* ─── PUSH BANNER ─── */
:root[data-theme="light"] .push-banner{
  background:#fff;border-color:#d0d8e4;color:#0f1722;
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
}

/* ─── BLOG / RECENZIJE ─── */
:root[data-theme="light"] .blog-card{
  background:#fff;border-color:#d0d8e4;
}
:root[data-theme="light"] .blog-card:hover{
  border-color:var(--blue);box-shadow:0 4px 16px rgba(10,132,255,0.08);
}

/* ─── BREADCRUMB ─── */
:root[data-theme="light"] .breadcrumb-nav{color:#3d4f63;}
:root[data-theme="light"] .breadcrumb-nav a{color:#3d4f63;}
:root[data-theme="light"] .breadcrumb-nav a:hover{color:#0A84FF;}

/* Home redesign 2026 */
#page-home{
  background:
    radial-gradient(circle at 80% 12%, rgba(10,132,255,0.16), transparent 34%),
    linear-gradient(180deg, var(--black) 0%, var(--black2) 52%, var(--black) 100%);
}

/* Premium homepage variant inspired by the supplied reference */
.ticker-wrap,
#countdownBanner{
  display:none !important;
}

body{
  background:#02060e;
}

nav{
  height:88px;
  padding:0 4.5%;
  background:rgba(2,6,14,0.88) !important;
  border-bottom:1px solid rgba(120,170,255,0.12);
  backdrop-filter:blur(18px);
}

.nav-logo{
  transform:scale(1.18);
  transform-origin:left center;
}

.nav-links{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  gap:42px;
  background:transparent;
  border:0;
  padding:0;
}

.nav-link{
  padding:34px 8px 30px;
  border-radius:0;
  color:#fff;
  font-size:0.9rem;
  letter-spacing:0.6px;
}

.nav-link svg{
  display:none;
}

.nav-link:hover{
  background:transparent;
  color:#fff;
}

.nav-link.active{
  background:transparent;
  box-shadow:none;
}

.nav-link.active::after,
.nav-link:hover::after{
  content:'';
  position:absolute;
  left:12px;
  right:12px;
  bottom:20px;
  height:2px;
  background:#0A84FF;
  box-shadow:0 0 16px rgba(10,132,255,0.9);
}

.nav-booking{
  min-height:48px;
  padding:0 24px;
  border-radius:7px;
  color:#fff;
  background:linear-gradient(135deg,#0A84FF,#004ee8);
  border-color:rgba(80,150,255,0.6);
  box-shadow:0 12px 34px rgba(10,132,255,0.26);
}

.nav-booking span{
  display:inline !important;
}

.nav-theme,
.nav-account .nav-acc-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(5,15,32,0.7);
  border-color:rgba(120,170,255,0.22);
}

#page-home{
  background:#02060e;
}

#home-hero{
  min-height:auto;
  padding:56px 4.5% 34px;
  display:grid;
  grid-template-columns:minmax(360px, 0.78fr) minmax(460px, 1fr);
  column-gap:28px;
  align-items:start;
  background:url('../images/hero-bg.jpg') right 12% top 0 / min(72vw, 1180px) auto no-repeat, #02060e;
}

#home-hero::before{
  background:
    linear-gradient(90deg, rgba(2,6,14,0.99) 0%, rgba(2,6,14,0.92) 31%, rgba(2,6,14,0.34) 58%, rgba(2,6,14,0.08) 100%),
    linear-gradient(180deg, rgba(2,6,14,0.06) 0%, rgba(2,6,14,0.15) 58%, #02060e 100%);
}

#home-hero::after{
  background:
    linear-gradient(180deg, transparent 0%, rgba(2,6,14,0.18) 55%, #02060e 100%),
    radial-gradient(ellipse at 78% 30%, rgba(10,132,255,0.16), transparent 38%);
}

.hero-video-bg,
.hero-glow-ring,
.hero-car-label{
  pointer-events:none;
}

.hero-video-bg{
  opacity:0.34;
}

.hero-glow-ring{
  width:520px;
  height:520px;
  left:18%;
  top:28%;
}

.hero-eyebrow,
.hero-title,
.hero-sub,
.hero-actions{
  grid-column:1;
  max-width:540px;
}

.hero-eyebrow{
  margin-top:0;
  align-self:start;
  width:max-content;
  padding:10px 20px;
  border-radius:999px;
  color:#fff;
  background:rgba(8,22,45,0.72);
  border-color:rgba(77,142,255,0.38);
  font-size:0.82rem;
  letter-spacing:1.4px;
}

.hero-title{
  font-size:clamp(3.6rem, 5.4vw, 6rem);
  line-height:0.94;
  margin-top:18px;
  text-transform:uppercase;
}

.ht-white{
  color:#fff;
}

.ht-blue .hl{
  background:linear-gradient(180deg,#0877ff 0%,#0062ff 58%,#0048ce 100%);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 18px rgba(10,132,255,0.4));
}

.hero-sub{
  margin-top:24px;
  padding-left:18px;
  border-left:2px solid #0A84FF;
  max-width:420px;
  color:rgba(255,255,255,0.82);
  font-size:1.18rem;
  line-height:1.55;
}

.hero-actions{
  display:flex;
  gap:16px;
  margin-top:34px;
}

.hero-action{
  min-width:210px;
  min-height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border-radius:7px;
  text-decoration:none;
  color:#fff;
  font-family:'Exo 2',sans-serif;
  font-weight:800;
  letter-spacing:0.4px;
  text-transform:uppercase;
  transition:transform 0.2s, border-color 0.2s, background 0.2s;
}

.hero-action-primary{
  background:linear-gradient(135deg,#0A84FF,#004ee8);
  border:1px solid rgba(95,160,255,0.64);
  box-shadow:0 16px 42px rgba(10,132,255,0.28);
}

.hero-action-secondary{
  background:rgba(5,13,28,0.66);
  border:1px solid rgba(160,190,255,0.55);
}

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

.ha-icon{
  font-size:0.75rem;
  color:#cfe4ff;
}

.hero-benefits,
.hero-service-grid,
.stats-bar{
  grid-column:1 / -1;
}

.hero-benefits{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:0;
  margin-top:48px;
  max-width:1180px;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(90deg, rgba(8,18,36,0.62), rgba(8,18,36,0.22));
  border:1px solid rgba(80,140,230,0.1);
}

.hero-benefit{
  min-height:76px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:16px 24px;
  color:#fff;
  font-weight:700;
  border-right:1px solid rgba(120,170,255,0.18);
}

.hero-benefit:last-child{
  border-right:0;
}

.hb-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:#d8ebff;
  font-size:0.7rem;
  font-weight:900;
  background:linear-gradient(180deg, rgba(10,132,255,0.22), rgba(5,16,35,0.88));
  border:1px solid rgba(80,150,255,0.45);
  box-shadow:inset 0 0 18px rgba(10,132,255,0.24);
}

.hero-service-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:20px;
  margin-top:24px;
}

.hero-service-card{
  min-height:220px;
  display:flex;
  flex-direction:column;
  padding:26px;
  border-radius:10px;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(160deg, rgba(9,20,40,0.88), rgba(1,8,18,0.84));
  border:1px solid rgba(90,150,230,0.2);
  box-shadow:0 22px 50px rgba(0,0,0,0.22);
  transition:transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}

.hero-service-card:hover{
  transform:translateY(-4px);
  border-color:rgba(10,132,255,0.55);
  box-shadow:0 24px 60px rgba(10,132,255,0.12), 0 22px 50px rgba(0,0,0,0.25);
}

.hsc-icon{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:22px;
  border-radius:12px;
  color:#0A84FF;
  font-size:0.78rem;
  font-weight:900;
  background:linear-gradient(180deg, rgba(10,132,255,0.18), rgba(5,12,28,0.96));
  border:1px solid rgba(90,150,230,0.28);
  box-shadow:inset 0 0 18px rgba(10,132,255,0.24);
}

.hsc-title{
  font-family:'Exo 2',sans-serif;
  font-size:1.04rem;
  font-weight:900;
  letter-spacing:0.5px;
  text-transform:uppercase;
}

.hsc-line{
  width:42px;
  height:2px;
  margin:15px 0 20px;
  background:#0A84FF;
  box-shadow:0 0 16px rgba(10,132,255,0.8);
}

.hsc-desc{
  min-height:58px;
  color:rgba(255,255,255,0.72);
  font-size:0.9rem;
  line-height:1.55;
}

.hsc-more{
  margin-top:auto;
  color:#0A84FF;
  font-size:0.78rem;
  font-weight:900;
  letter-spacing:0.4px;
  text-transform:uppercase;
}

#home-hero .stats-bar{
  width:100%;
  max-width:none;
  min-height:110px;
  margin-top:24px;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  border-radius:10px;
  border-color:rgba(90,150,230,0.22);
  background:rgba(6,16,34,0.72);
}

#home-hero .stat-item{
  flex-direction:row;
  gap:22px;
  padding:18px 32px;
  justify-content:center;
  border-right:1px solid rgba(120,170,255,0.18);
}

#home-hero .stat-item:last-child{
  border-right:0;
}

#home-hero .stat-n{
  font-size:0;
}

#home-hero .stat-n::after{
  font-family:'Orbitron',sans-serif;
  font-size:1.85rem;
  color:#fff;
  font-weight:900;
}

#home-hero .stat-item:nth-child(1) .stat-n::after{content:'500+';}
#home-hero .stat-item:nth-child(2) .stat-n::after{content:'100+';}
#home-hero .stat-item:nth-child(3) .stat-n::after{content:'2h';}
#home-hero .stat-item:nth-child(4) .stat-n::after{content:'DOZIVOTNA';font-family:'Exo 2',sans-serif;font-size:1.12rem;}

#home-hero .stat-l{
  max-width:150px;
  font-size:0;
}

#home-hero .stat-l::after{
  display:block;
  color:rgba(255,255,255,0.74);
  font-size:0.78rem;
  line-height:1.35;
  letter-spacing:0.9px;
  text-transform:uppercase;
}

#home-hero .stat-item:nth-child(1) .stat-l::after{content:'Zadovoljnih klijenata';}
#home-hero .stat-item:nth-child(2) .stat-l::after{content:'Chiptuninga';}
#home-hero .stat-item:nth-child(3) .stat-l::after{content:'Brz odgovor';}
#home-hero .stat-item:nth-child(4) .stat-l::after{content:'Garancija na softver';}

.hero-tools-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.partners-bar{
  margin-top:0;
}

@media(max-width:1200px){
  #home-hero{
    grid-template-columns:1fr;
    background-size:980px auto;
    background-position:right -120px top 40px;
  }

  .hero-benefits,
  .hero-service-grid{
    max-width:none;
  }

  .hero-service-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:768px){
  .ticker-wrap,
  #countdownBanner{
    display:none !important;
  }

  body{
    padding-top:0;
    padding-bottom:94px;
  }

  nav{
    top:0 !important;
    height:76px;
    padding:0 5%;
  }

  .nav-logo{
    transform:scale(0.98);
  }

  .nav-booking{
    min-height:40px;
    width:42px;
    padding:0;
    border-radius:10px;
  }

  .nav-theme,
  .nav-account .nav-acc-avatar{
    width:40px;
    height:40px;
  }

  #home-hero{
    padding:104px 5% 28px !important;
    display:flex;
    flex-direction:column;
    background:url('../images/hero-bg.jpg') center 76px / 760px auto no-repeat, #02060e;
  }

  #home-hero::before{
    background:
      linear-gradient(180deg, rgba(2,6,14,0.56) 0%, rgba(2,6,14,0.62) 34%, rgba(2,6,14,0.96) 58%, #02060e 100%),
      linear-gradient(90deg, rgba(2,6,14,0.82), rgba(2,6,14,0.22));
  }

  #home-hero::after{
    background:linear-gradient(180deg, transparent 0%, rgba(2,6,14,0.65) 42%, #02060e 100%);
  }

  .hero-eyebrow{
    margin-top:0;
    padding:8px 14px;
    font-size:0.66rem;
  }

  .hero-title{
    margin-top:20px;
    font-size:clamp(2.7rem, 16vw, 4.25rem);
    max-width:100%;
  }

  .hero-sub{
    max-width:330px;
    margin-top:16px;
    font-size:1rem;
    line-height:1.5;
  }

  .hero-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin-top:24px;
  }

  .hero-action{
    width:100%;
    min-width:0;
    min-height:52px;
  }

  .hero-benefits{
    width:100%;
    grid-template-columns:1fr 1fr;
    gap:1px;
    margin-top:26px;
    background:rgba(8,18,36,0.46);
  }

  .hero-benefit{
    min-height:76px;
    padding:12px;
    gap:10px;
    font-size:0.78rem;
    border:0;
    background:rgba(4,12,27,0.82);
  }

  .hb-icon{
    width:38px;
    height:38px;
    font-size:0.58rem;
  }

  .hero-service-grid{
    width:100%;
    grid-template-columns:1fr;
    gap:12px;
    margin-top:16px;
  }

  .hero-service-card{
    min-height:auto;
    padding:18px;
    display:grid;
    grid-template-columns:48px 1fr;
    column-gap:14px;
    align-items:center;
  }

  .hsc-icon{
    grid-row:1 / 5;
    width:48px;
    height:48px;
    margin:0;
    font-size:0.62rem;
  }

  .hsc-title{
    font-size:0.95rem;
  }

  .hsc-line{
    margin:8px 0 8px;
  }

  .hsc-desc{
    min-height:0;
    font-size:0.82rem;
  }

  .hsc-more{
    margin-top:10px;
    font-size:0.72rem;
  }

  #home-hero .stats-bar{
    width:100%;
    min-height:0;
    margin-top:16px;
    grid-template-columns:1fr 1fr;
  }

  #home-hero .stat-item{
    min-width:0;
    padding:16px 10px;
    flex-direction:column;
    gap:4px;
    border-right:0;
    border-bottom:1px solid rgba(120,170,255,0.14);
  }

  #home-hero .stat-item:nth-child(n+3){
    border-bottom:0;
  }

  #home-hero .stat-n::after{
    font-size:1.25rem;
  }

  #home-hero .stat-item:nth-child(4) .stat-n::after{
    font-size:0.9rem;
  }

  #home-hero .stat-l::after{
    font-size:0.62rem;
    text-align:center;
  }
}

#home-hero{
  min-height:calc(100vh - 88px);
  padding:clamp(76px, 9vw, 120px) 6% 34px;
  justify-content:center;
  gap:0;
  background:url('../images/hero-bg.jpg') 76% 58% / cover no-repeat;
  isolation:isolate;
}

#home-hero::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg, rgba(2,6,14,0.96) 0%, rgba(2,6,14,0.84) 36%, rgba(2,6,14,0.28) 68%, rgba(2,6,14,0.08) 100%),
    linear-gradient(180deg, rgba(2,6,14,0.28) 0%, rgba(2,6,14,0.08) 46%, rgba(2,6,14,0.92) 100%);
}

#home-hero::after{
  z-index:1;
  background:
    radial-gradient(ellipse at 24% 46%, rgba(10,132,255,0.18), transparent 36%),
    linear-gradient(180deg, transparent 0%, rgba(2,6,14,0.82) 100%);
  pointer-events:none;
}

.hero-video-bg{z-index:1;}
#heroCanvas{opacity:0.55;}
.hero-grid-overlay{opacity:0.8;}
.hero-vignette{background:radial-gradient(ellipse 90% 72% at 72% 48%, transparent 35%, rgba(2,6,14,0.76) 100%);}
.hero-light-streak{filter:blur(0.2px);}

.hero-glow-ring{
  width:720px;
  height:720px;
  top:50%;
  left:28%;
  z-index:1;
  background:radial-gradient(circle, rgba(10,132,255,0.15) 0%, rgba(0,212,255,0.05) 38%, transparent 68%);
}

.hero-eyebrow,
.hero-title,
.hero-sub,
.stats-bar,
.tools-bar{
  max-width:760px;
}

.hero-eyebrow{
  margin:0 0 18px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(10,132,255,0.12);
  border-color:rgba(10,132,255,0.38);
  color:#9fd0ff;
  letter-spacing:2px;
  backdrop-filter:blur(14px);
}

.hero-title{
  font-size:clamp(2.55rem, 7vw, 6.6rem);
  line-height:0.88;
  letter-spacing:0;
  margin:0;
}

.ht-white,
.ht-blue{
  display:block;
}

.ht-white{
  color:#fff;
  text-shadow:0 18px 60px rgba(0,0,0,0.48);
}

.ht-blue .hl{
  background:linear-gradient(90deg, #36a3ff 0%, #00d4ff 45%, #b9e6ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

.hero-sub{
  max-width:650px;
  margin-top:22px;
  padding:0;
  border-left:0;
  color:rgba(232,238,248,0.88);
  font-family:'Exo 2',sans-serif;
  font-size:clamp(1rem, 1.55vw, 1.28rem);
  line-height:1.65;
  font-weight:600;
  letter-spacing:0.15px;
  text-transform:none;
}

.tools-bar{
  order:5;
  margin:30px 0 24px;
  gap:12px;
  display:grid;
  grid-template-columns:1fr 1.35fr 1fr;
  width:min(760px, 100%);
}

.tool-btn{
  min-height:54px;
  justify-content:center;
  text-align:center;
  padding:15px 20px;
  border-radius:8px;
  border-color:rgba(255,255,255,0.1);
  background:rgba(6,12,24,0.72);
  box-shadow:0 16px 44px rgba(0,0,0,0.28);
  backdrop-filter:blur(16px);
}

.tool-btn:first-child{
  color:#fff;
  border-color:rgba(10,132,255,0.55);
  background:linear-gradient(135deg, rgba(10,132,255,0.95), rgba(0,96,204,0.9));
  box-shadow:0 18px 50px rgba(10,132,255,0.22), 0 12px 36px rgba(0,0,0,0.26);
}

.tool-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(0,212,255,0.48);
}

.stats-bar{
  order:6;
  width:min(760px, 100%);
  margin:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
  background:rgba(255,255,255,0.06);
  box-shadow:0 24px 70px rgba(0,0,0,0.24);
  backdrop-filter:blur(16px);
}

.stat-item{
  padding:18px 16px;
  background:rgba(4,10,22,0.72);
  border:0;
}

.stat-n{
  font-size:clamp(1.2rem, 2vw, 1.65rem);
  color:#fff;
  text-shadow:none;
}

.stat-l{
  max-width:120px;
  color:rgba(232,238,248,0.58);
  font-size:0.68rem;
  line-height:1.35;
  letter-spacing:1.1px;
  opacity:1;
}

.hero-car-label{
  right:6%;
  bottom:18%;
  padding:14px 16px;
  border-right:2px solid rgba(10,132,255,0.8);
  background:linear-gradient(90deg, transparent, rgba(2,6,14,0.52));
}

.partners-bar{
  margin:0 auto;
  padding:22px 5%;
  border-top:0;
  background:linear-gradient(180deg, rgba(2,6,14,0.96), rgba(4,10,22,0.78));
}

.partners-list{gap:10px;}
.partner-badge{
  border-radius:8px;
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.08);
  cursor:pointer;
}

.cert-section{
  padding:74px 5%;
}

.cert-inner{
  align-items:stretch;
  gap:26px;
}

.cert-text,
.cert-img-wrap{
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.075);
  border-radius:8px;
  box-shadow:0 22px 60px rgba(0,0,0,0.18);
}

.cert-text{
  padding:34px;
}

.cert-img-wrap{
  width:360px;
  padding:14px;
}

.cert-img{border-radius:6px;}

.home-quick-links{
  padding:26px 5% 86px;
}

.quick-links-grid{
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
}

.ql-card{
  align-items:flex-start;
  min-height:245px;
  padding:24px 18px 20px;
  border-radius:8px;
  text-align:left;
  background:linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
  border-color:rgba(255,255,255,0.08);
}

.ql-card::before{
  opacity:0.35;
}

.ql-icon-wrap{
  margin:18px 0 24px;
  border-radius:8px;
}

.ql-body{
  min-height:94px;
}

.ql-desc{
  line-height:1.55;
}

.ql-arrow{
  margin-top:auto;
  opacity:0.78;
  transform:none;
}

.cta-banner{
  background:linear-gradient(180deg, rgba(4,10,22,0.35), rgba(2,6,14,0.96));
}

.cta-banner-inner{
  border-radius:8px;
  padding:44px;
  background:
    linear-gradient(135deg, rgba(10,132,255,0.18), rgba(0,212,255,0.06) 38%, rgba(255,255,255,0.035)),
    rgba(4,10,22,0.9);
}

.cta-banner-title{
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing:0;
}

.cta-banner-btn{
  border-radius:8px;
}

:root[data-theme="light"] #page-home{
  background:linear-gradient(180deg, #f0f4f8 0%, #e8edf2 55%, #f0f4f8 100%);
}

:root[data-theme="light"] #home-hero::before{
  background:
    linear-gradient(90deg, rgba(240,244,248,0.98) 0%, rgba(240,244,248,0.88) 40%, rgba(240,244,248,0.24) 76%),
    linear-gradient(180deg, rgba(240,244,248,0.24) 0%, rgba(240,244,248,0.88) 100%);
}

:root[data-theme="light"] #home-hero::after{
  background:
    radial-gradient(ellipse at 24% 46%, rgba(10,132,255,0.16), transparent 36%),
    linear-gradient(180deg, transparent 0%, rgba(240,244,248,0.9) 100%);
}

:root[data-theme="light"] .hero-sub{
  color:#243347;
  text-shadow:none;
}

:root[data-theme="light"] .stats-bar{
  border-color:rgba(10,25,46,0.12);
  background:rgba(10,25,46,0.08);
  box-shadow:0 20px 52px rgba(10,25,46,0.1);
}

:root[data-theme="light"] .stat-item,
:root[data-theme="light"] .tool-btn,
:root[data-theme="light"] .cert-text,
:root[data-theme="light"] .cert-img-wrap,
:root[data-theme="light"] .ql-card{
  background:rgba(255,255,255,0.82);
  border-color:rgba(10,25,46,0.1);
}

:root[data-theme="light"] .stat-n{color:#0f1722;}
:root[data-theme="light"] .stat-l{color:#4b5d72;}

:root[data-theme="light"] .tool-btn:first-child{
  color:#fff;
  background:linear-gradient(135deg, #0A84FF, #0060cc);
}

:root[data-theme="light"] .partners-bar{
  background:linear-gradient(180deg, rgba(240,244,248,0.96), rgba(232,237,242,0.84));
  border-color:#d0d8e4;
}

:root[data-theme="light"] .cta-banner{
  background:linear-gradient(180deg, rgba(232,237,242,0.35), rgba(240,244,248,0.96));
}

:root[data-theme="light"] .cta-banner-inner{
  background:linear-gradient(135deg, rgba(10,132,255,0.1), rgba(255,255,255,0.9));
}

@media(max-width:1100px){
  .quick-links-grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
  .ql-card:nth-child(5){grid-column:auto;max-width:none;margin:0;}
  .cert-inner{flex-direction:column;}
  .cert-img-wrap{width:auto;max-width:520px;}
}

@media(max-width:768px){
  body{padding-bottom:96px;}

  #home-hero{
    min-height:auto;
    padding:82px 5% 28px !important;
    background-position:66% 50%;
  }

  #home-hero::before{
    background:
      linear-gradient(180deg, rgba(2,6,14,0.86) 0%, rgba(2,6,14,0.48) 46%, rgba(2,6,14,0.94) 100%),
      linear-gradient(90deg, rgba(2,6,14,0.76), rgba(2,6,14,0.12));
  }

  .hero-title{
    font-size:clamp(2rem, 12vw, 3.55rem);
  }

  .hero-sub{
    max-width:100%;
    margin-top:16px;
    font-size:0.92rem;
    line-height:1.5;
  }

  .tools-bar{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    margin:20px 0 16px;
    gap:10px;
  }

  .tool-btn{
    min-height:48px;
    width:100%;
    justify-content:center;
    padding:12px 14px;
  }

  .stats-bar{
    width:100%;
    margin:2px 0 0;
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }

  .stat-item{
    min-width:0;
    padding:10px 6px;
  }

  .stat-n{font-size:1rem;}
  .stat-l{font-size:0.5rem;letter-spacing:0.7px;line-height:1.25;}

  .quick-links-grid{
    grid-template-columns:1fr;
  }

  .ql-card{
    min-height:auto;
  }

  .ql-card:nth-child(5){
    max-width:none;
  }

  .cert-section,
  .home-quick-links{
    padding-left:4%;
    padding-right:4%;
  }

  .cert-text,
  .cta-banner-inner{
    padding:26px 20px;
  }

  .cta-banner-actions{
    width:100%;
  }

  .cta-banner-btn{
    width:100%;
  }
}

/* Final premium homepage overrides */
.ticker-wrap,
#countdownBanner{display:none !important;}

nav{
  height:88px !important;
  top:0 !important;
  padding:0 4.5% !important;
  background:rgba(2,6,14,0.9) !important;
  border-bottom:1px solid rgba(120,170,255,0.12) !important;
  backdrop-filter:blur(18px);
}

nav .nav-logo{transform:scale(1.18);transform-origin:left center;}
nav .nav-links{position:absolute;left:50%;transform:translateX(-50%);gap:42px;background:transparent;border:0;padding:0;}
nav .nav-link{padding:34px 8px 30px;border-radius:0;color:#fff;font-size:0.9rem;letter-spacing:0.6px;background:transparent;}
nav .nav-link svg{display:none;}
nav .nav-link:hover,nav .nav-link.active{background:transparent;box-shadow:none;color:#fff;}
nav .nav-link.active::after,nav .nav-link:hover::after{content:'';position:absolute;left:12px;right:12px;bottom:20px;height:2px;background:#0A84FF;box-shadow:0 0 16px rgba(10,132,255,0.9);}
nav .nav-booking{min-height:48px;padding:0 24px;border-radius:7px;color:#fff;background:linear-gradient(135deg,#0A84FF,#004ee8);border-color:rgba(80,150,255,0.6);box-shadow:0 12px 34px rgba(10,132,255,0.26);}
nav .nav-booking span{display:inline !important;}
nav .nav-theme,nav .nav-account .nav-acc-avatar{width:48px;height:48px;border-radius:50%;background:rgba(5,15,32,0.7);border-color:rgba(120,170,255,0.22);}

#page-home{background:#02060e;}
#home-hero{
  min-height:auto !important;
  padding:56px 4.5% 34px !important;
  display:grid !important;
  grid-template-columns:minmax(360px, 0.78fr) minmax(460px, 1fr);
  column-gap:28px;
  align-items:start;
  background:url('../images/hero-desktop-final.png') center top / cover no-repeat, #02060e !important;
}
#home-hero::before{background:linear-gradient(90deg,rgba(2,6,14,0.99) 0%,rgba(2,6,14,0.92) 31%,rgba(2,6,14,0.34) 58%,rgba(2,6,14,0.08) 100%),linear-gradient(180deg,rgba(2,6,14,0.06) 0%,rgba(2,6,14,0.15) 58%,#02060e 100%) !important;}
#home-hero::after{background:linear-gradient(180deg,transparent 0%,rgba(2,6,14,0.18) 55%,#02060e 100%),radial-gradient(ellipse at 78% 30%,rgba(10,132,255,0.16),transparent 38%) !important;}
#home-hero .hero-video-bg{opacity:0.34;}
#home-hero .hero-glow-ring{width:520px;height:520px;left:18%;top:28%;}
#home-hero .hero-eyebrow,#home-hero .hero-title,#home-hero .hero-sub,#home-hero .hero-actions{grid-column:1;max-width:540px;}
#home-hero .hero-eyebrow{margin:0;width:max-content;padding:10px 20px;border-radius:999px;color:#fff;background:rgba(8,22,45,0.72);border-color:rgba(77,142,255,0.38);font-size:0.82rem;letter-spacing:1.4px;}
#home-hero .hero-title{font-size:clamp(3.6rem,5.4vw,6rem);line-height:0.94;margin-top:18px;text-transform:uppercase;}
#home-hero .ht-white{color:#fff;}
#home-hero .ht-blue .hl{background:linear-gradient(180deg,#0877ff 0%,#0062ff 58%,#0048ce 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 18px rgba(10,132,255,0.4));}
#home-hero .hero-sub{margin-top:24px;padding-left:18px;border-left:2px solid #0A84FF;max-width:420px;color:rgba(255,255,255,0.82);font-size:1.18rem;line-height:1.55;}
.hero-actions{display:flex;gap:16px;margin-top:34px;}
.hero-actions,
.hero-benefits,
.hero-service-grid,
#home-hero .stats-bar{
  position:relative;
  z-index:3;
}
.hero-action{min-width:210px;min-height:56px;display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:7px;text-decoration:none;color:#fff;font-family:'Exo 2',sans-serif;font-weight:800;letter-spacing:0.4px;text-transform:uppercase;transition:transform 0.2s,border-color 0.2s,background 0.2s;}
.hero-action-primary{background:linear-gradient(135deg,#0A84FF,#004ee8);border:1px solid rgba(95,160,255,0.64);box-shadow:0 16px 42px rgba(10,132,255,0.28);}
.hero-action-secondary{background:rgba(5,13,28,0.66);border:1px solid rgba(160,190,255,0.55);}
.hero-action:hover{transform:translateY(-2px);}
.ha-icon{font-size:0.75rem;color:#cfe4ff;}
.hero-actions .ha-icon{display:none;}
.hero-benefits,.hero-service-grid,#home-hero .stats-bar{grid-column:1 / -1;}
.hero-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:48px;max-width:1180px;border-radius:12px;overflow:hidden;background:linear-gradient(90deg,rgba(8,18,36,0.62),rgba(8,18,36,0.22));border:1px solid rgba(80,140,230,0.1);}
.hero-benefit{min-height:76px;display:flex;align-items:center;gap:18px;padding:16px 24px;color:#fff;font-weight:700;border-right:1px solid rgba(120,170,255,0.18);}
.hero-benefit:last-child{border-right:0;}
.hb-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#d8ebff;font-size:0.7rem;font-weight:900;background:linear-gradient(180deg,rgba(10,132,255,0.22),rgba(5,16,35,0.88));border:1px solid rgba(80,150,255,0.45);box-shadow:inset 0 0 18px rgba(10,132,255,0.24);}
.hero-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:24px;}
.hero-service-card{min-height:220px;display:flex;flex-direction:column;padding:26px;border-radius:10px;text-decoration:none;color:#fff;background:linear-gradient(160deg,rgba(9,20,40,0.88),rgba(1,8,18,0.84));border:1px solid rgba(90,150,230,0.2);box-shadow:0 22px 50px rgba(0,0,0,0.22);transition:transform 0.22s,border-color 0.22s,box-shadow 0.22s;}
.hero-service-card:hover{transform:translateY(-4px);border-color:rgba(10,132,255,0.55);box-shadow:0 24px 60px rgba(10,132,255,0.12),0 22px 50px rgba(0,0,0,0.25);}
.hsc-icon{width:58px;height:58px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;border-radius:12px;color:#0A84FF;font-size:0.78rem;font-weight:900;background:linear-gradient(180deg,rgba(10,132,255,0.18),rgba(5,12,28,0.96));border:1px solid rgba(90,150,230,0.28);box-shadow:inset 0 0 18px rgba(10,132,255,0.24);}
.hsc-title{font-family:'Exo 2',sans-serif;font-size:1.04rem;font-weight:900;letter-spacing:0.5px;text-transform:uppercase;}
.hsc-line{width:42px;height:2px;margin:15px 0 20px;background:#0A84FF;box-shadow:0 0 16px rgba(10,132,255,0.8);}
.hsc-desc{min-height:58px;color:rgba(255,255,255,0.72);font-size:0.9rem;line-height:1.55;}
.hsc-more{margin-top:auto;color:#0A84FF;font-size:0.78rem;font-weight:900;letter-spacing:0.4px;text-transform:uppercase;}
#home-hero .stats-bar{display:grid !important;width:100%;max-width:none;min-height:110px;margin-top:24px;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:10px;border-color:rgba(90,150,230,0.22);background:rgba(6,16,34,0.72);}
#home-hero .stat-item{flex-direction:row;gap:22px;padding:18px 32px;justify-content:center;border-right:1px solid rgba(120,170,255,0.18);background:rgba(4,10,22,0.72);}
#home-hero .stat-item:last-child{border-right:0;}
#home-hero .stat-n{font-size:0;}
#home-hero .stat-n::after{font-family:'Orbitron',sans-serif;font-size:1.85rem;color:#fff;font-weight:900;}
#home-hero .stat-item:nth-child(1) .stat-n::after{content:'500+';}
#home-hero .stat-item:nth-child(2) .stat-n::after{content:'100+';}
#home-hero .stat-item:nth-child(3) .stat-n::after{content:'2h';}
#home-hero .stat-item:nth-child(4) .stat-n::after{content:'DOZIVOTNA';font-family:'Exo 2',sans-serif;font-size:1.12rem;}
#home-hero .stat-l{max-width:150px;font-size:0;}
#home-hero .stat-l::after{display:block;color:rgba(255,255,255,0.74);font-size:0.78rem;line-height:1.35;letter-spacing:0.9px;text-transform:uppercase;}
#home-hero .stat-item:nth-child(1) .stat-l::after{content:'Zadovoljnih klijenata';}
#home-hero .stat-item:nth-child(2) .stat-l::after{content:'Chiptuninga';}
#home-hero .stat-item:nth-child(3) .stat-l::after{content:'Brz odgovor';}
#home-hero .stat-item:nth-child(4) .stat-l::after{content:'Garancija na softver';}
.hero-tools-hidden{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;opacity:0 !important;pointer-events:none !important;}
body:has(#page-home.active) .mv-widget{display:none !important;}

#home-hero .hero-benefits{margin-top:30px;}
#home-hero .hero-service-grid{margin-top:16px;}
#home-hero .hero-service-card{min-height:172px;padding:20px;}
#home-hero .hsc-icon{width:48px;height:48px;margin-bottom:14px;}
#home-hero .hsc-line{margin:10px 0 12px;}
#home-hero .hsc-desc{min-height:42px;}
#home-hero .stats-bar{margin-top:16px;}

@media(max-width:1200px){
  #home-hero{grid-template-columns:1fr;background-size:cover !important;background-position:center top !important;}
  .hero-service-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:768px){
  body{padding-top:0;padding-bottom:94px;}
  nav{height:76px !important;padding:0 5% !important;}
  nav .nav-logo{transform:scale(0.98);}
  nav .nav-booking{display:none !important;}
  nav .nav-booking span{display:none !important;}
  nav .nav-theme,nav .nav-account .nav-acc-avatar{width:40px;height:40px;}
  #home-hero{padding:104px 5% 28px !important;display:flex !important;flex-direction:column;background:url('../images/hero-mobile-final.png') center top / cover no-repeat,#02060e !important;}
  #home-hero::before{background:linear-gradient(180deg,rgba(2,6,14,0.56) 0%,rgba(2,6,14,0.62) 34%,rgba(2,6,14,0.96) 58%,#02060e 100%),linear-gradient(90deg,rgba(2,6,14,0.82),rgba(2,6,14,0.22)) !important;}
  #home-hero::after{background:linear-gradient(180deg,transparent 0%,rgba(2,6,14,0.65) 42%,#02060e 100%) !important;}
  #home-hero .hero-eyebrow{margin-top:0;padding:8px 14px;font-size:0.66rem;}
  #home-hero .hero-title{margin-top:20px;font-size:clamp(2.35rem,11.5vw,3rem);max-width:100%;letter-spacing:0;}
  #home-hero .hero-sub{max-width:330px;margin-top:16px;font-size:1rem;line-height:1.5;}
  .hero-actions{width:100%;display:grid;grid-template-columns:1fr;gap:12px;margin-top:24px;}
  .hero-action{width:100%;min-width:0;min-height:52px;}
  .hero-benefits{width:100%;grid-template-columns:1fr 1fr;gap:1px;margin-top:26px;background:rgba(8,18,36,0.46);}
  .hero-benefit{min-height:76px;padding:12px;gap:10px;font-size:0.78rem;border:0;background:rgba(4,12,27,0.82);}
  .hero-benefit span:last-child{line-height:1.25;}
  .hb-icon{width:38px;height:38px;font-size:0.58rem;}
  .hero-service-grid{width:100%;grid-template-columns:1fr;gap:12px;margin-top:16px;}
  .hero-service-card{min-height:auto;padding:18px;display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:center;}
  #home-hero .hero-service-card{min-height:auto;padding:18px;}
  .hsc-icon{grid-row:1 / 5;width:48px;height:48px;margin:0;font-size:0.62rem;}
  #home-hero .hsc-icon{width:48px;height:48px;margin:0;}
  .hsc-title{font-size:0.95rem;}
  .hsc-line{margin:8px 0;}
  .hsc-desc{min-height:0;font-size:0.82rem;}
  .hsc-more{margin-top:10px;font-size:0.72rem;}
  #home-hero .stats-bar{width:100%;min-height:0;margin-top:16px;grid-template-columns:1fr 1fr;}
  #home-hero .stat-item{min-width:0;padding:16px 10px;flex-direction:column;gap:4px;border-right:0;border-bottom:1px solid rgba(120,170,255,0.14);}
  #home-hero .stat-item:nth-child(n+3){border-bottom:0;}
  #home-hero .stat-n::after{font-size:1.25rem;}
  #home-hero .stat-item:nth-child(4) .stat-n::after{font-size:0.9rem;}
  #home-hero .stat-l::after{font-size:0.62rem;text-align:center;}
}

/* Premium nav collision fix */
nav{
  display:grid !important;
  grid-template-columns:minmax(260px,1fr) auto minmax(260px,1fr);
  align-items:center;
  gap:18px;
}

nav .nav-left{
  min-width:0;
}

nav .nav-tagline{
  display:none !important;
}

nav .nav-logo{
  transform:scale(1.04);
}

nav .nav-links{
  position:static !important;
  transform:none !important;
  justify-self:center;
  display:flex;
  gap:40px;
}

nav .nav-right{
  justify-self:end;
  min-width:0;
}

nav .nav-booking{
  min-width:118px;
  justify-content:center;
  gap:0;
}

nav .nav-booking svg{
  display:none;
}

@media(max-width:1180px){
  nav{
    grid-template-columns:minmax(250px,1fr) auto minmax(230px,1fr);
    gap:14px;
  }

  nav .nav-logo{
    transform:scale(0.96);
  }

  nav .nav-links{
    gap:26px;
  }

  nav .nav-link{
    font-size:0.78rem;
    padding-left:4px;
    padding-right:4px;
  }

  nav .nav-booking{
    min-width:112px;
    padding:0 18px;
  }
}

@media(max-width:900px){
  nav{
    display:flex !important;
  }

  nav .nav-links{
    display:none;
  }
}

/* Disable startup loading screen */
#loadingScreen{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Why us section */
.why-section{
  padding:68px 4.5% 76px;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(10,132,255,0.1), transparent 36%),
    linear-gradient(180deg, #02060e 0%, #030914 100%);
}

.why-head{
  max-width:1392px;
  margin:0 auto 28px;
  display:grid;
  grid-template-columns:minmax(320px, 0.8fr) minmax(360px, 1fr);
  gap:28px;
  align-items:end;
}

.why-head .sec-label{
  grid-column:1 / -1;
  margin:0;
  text-align:left;
  color:#0A84FF;
  letter-spacing:4px;
}

.why-head .sec-label::before,
.why-head .sec-label::after{
  display:none;
}

.why-head h2{
  color:#fff;
  font-family:'Exo 2',sans-serif;
  font-size:clamp(1.9rem, 3.2vw, 3rem);
  line-height:1.08;
  letter-spacing:-0.02em;
}

.why-head p{
  color:rgba(210,225,245,0.7);
  line-height:1.75;
  font-size:0.98rem;
  margin:0;
}

.why-grid{
  max-width:1392px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}

.why-card{
  min-height:210px;
  padding:24px;
  border-radius:10px;
  background:linear-gradient(155deg, rgba(9,20,40,0.88), rgba(1,8,18,0.9));
  border:1px solid rgba(90,150,230,0.18);
  box-shadow:0 20px 48px rgba(0,0,0,0.18);
}

.why-icon{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:22px;
  border-radius:50%;
  color:#d8ebff;
  font-size:0.72rem;
  font-weight:900;
  background:linear-gradient(180deg, rgba(10,132,255,0.22), rgba(5,16,35,0.88));
  border:1px solid rgba(80,150,255,0.45);
  box-shadow:inset 0 0 18px rgba(10,132,255,0.24);
}

.why-card h3{
  color:#fff;
  font-size:1rem;
  font-weight:900;
  margin-bottom:12px;
}

.why-card p{
  color:rgba(210,225,245,0.62);
  font-size:0.84rem;
  line-height:1.65;
  margin:0;
}

@media(max-width:1100px){
  .why-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:768px){
  .why-section{
    padding:46px 5% 54px;
  }

  .why-head{
    grid-template-columns:1fr;
    gap:14px;
    margin-bottom:18px;
  }

  .why-head h2{
    font-size:1.7rem;
  }

  .why-head p{
    font-size:0.9rem;
  }

  .why-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .why-card{
    min-height:auto;
    display:grid;
    grid-template-columns:42px 1fr;
    column-gap:14px;
    padding:16px;
  }

  .why-icon{
    grid-row:1 / 3;
    width:42px;
    height:42px;
    margin:0;
  }

  .why-card h3{
    margin-bottom:6px;
  }

  .why-card p{
    font-size:0.8rem;
  }
}

/* Premium quick links section */
.home-quick-links{
  padding:70px 4.5% 92px !important;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(10,132,255,0.1), transparent 38%),
    linear-gradient(180deg, #02060e 0%, #030914 100%);
}

.home-quick-links .sec-label{
  margin-bottom:34px;
  color:#0A84FF;
  letter-spacing:5px;
  font-size:0.72rem;
  opacity:1;
}

.home-quick-links .sec-label::before,
.home-quick-links .sec-label::after{
  color:rgba(10,132,255,0.4);
}

.home-quick-links .quick-links-grid{
  max-width:1392px;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:16px;
}

.home-quick-links .ql-card{
  min-height:224px;
  padding:22px;
  border-radius:10px;
  align-items:flex-start;
  text-align:left;
  background:
    linear-gradient(155deg, rgba(9,20,40,0.88), rgba(1,8,18,0.9)),
    radial-gradient(circle at 18% 0%, hsla(var(--ql-hue), 90%, 50%, 0.16), transparent 48%);
  border:1px solid rgba(90,150,230,0.18);
  box-shadow:0 20px 48px rgba(0,0,0,0.18);
}

.home-quick-links .ql-card::before{
  opacity:0;
}

.home-quick-links .ql-card::after{
  left:22px;
  right:auto;
  bottom:auto;
  top:100px;
  width:42px !important;
  height:2px;
  transform:none;
  border-radius:999px;
  opacity:0.95;
  box-shadow:0 0 16px currentColor;
}

.home-quick-links .ql-card:hover{
  transform:translateY(-4px);
  border-color:hsla(var(--ql-hue), 90%, 58%, 0.45);
  box-shadow:0 24px 60px hsla(var(--ql-hue), 90%, 45%, 0.1), 0 22px 50px rgba(0,0,0,0.26);
}

.home-quick-links .ql-index{
  top:18px;
  right:18px;
  color:rgba(255,255,255,0.16);
  font-family:'Orbitron',sans-serif;
}

.home-quick-links .ql-icon-wrap{
  width:58px;
  height:58px;
  margin:0 0 30px;
  border-radius:12px;
  background:linear-gradient(180deg, hsla(var(--ql-hue), 90%, 50%, 0.18), rgba(5,12,28,0.96));
  border:1px solid hsla(var(--ql-hue), 80%, 58%, 0.25);
  color:var(--ql-color);
  box-shadow:inset 0 0 18px hsla(var(--ql-hue), 90%, 50%, 0.18);
}

.home-quick-links .ql-icon-wrap svg{
  width:25px;
  height:25px;
  stroke-width:1.8;
}

.home-quick-links .ql-body{
  flex:1;
  min-height:88px;
  margin:0;
}

.home-quick-links .ql-name{
  color:#fff;
  font-family:'Exo 2',sans-serif;
  font-size:1.02rem;
  font-weight:900;
  letter-spacing:0.2px;
  margin-bottom:12px;
}

.home-quick-links .ql-desc{
  color:rgba(210,225,245,0.56);
  font-size:0.82rem;
  line-height:1.55;
  opacity:1;
}

.home-quick-links .ql-arrow{
  margin-top:18px;
  color:var(--ql-color);
  opacity:1;
  transform:none;
  font-size:0.76rem;
  font-weight:900;
  letter-spacing:0.3px;
  text-transform:uppercase;
}

@media(max-width:1200px){
  .home-quick-links .quick-links-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media(max-width:768px){
  .partners-bar{
    display:none !important;
  }

  .cert-section{
    padding-top:42px !important;
    padding-bottom:48px !important;
  }

  .cert-desc{
    display:none;
  }

  .cert-badges{
    display:none !important;
  }

  .home-quick-links{
    display:none;
  }

  .home-quick-links{
    padding:52px 5% 72px !important;
  }

  .home-quick-links .sec-label{
    margin-bottom:24px;
    letter-spacing:3px;
  }

  .home-quick-links .quick-links-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .home-quick-links .ql-card{
    min-height:auto;
    display:grid;
    grid-template-columns:52px 1fr;
    column-gap:14px;
    padding:18px;
  }

  .home-quick-links .ql-card:nth-child(5){
    max-width:none;
  }

  .home-quick-links .ql-card::after{
    display:none;
  }

  .home-quick-links .ql-index{
    display:none;
  }

  .home-quick-links .ql-icon-wrap{
    grid-row:1 / 4;
    width:52px;
    height:52px;
    margin:0;
  }

  .home-quick-links .ql-body{
    min-height:0;
  }

  .home-quick-links .ql-name{
    font-size:0.98rem;
    margin-bottom:6px;
  }

  .home-quick-links .ql-desc{
    display:block;
    font-size:0.78rem;
  }

  .home-quick-links .ql-arrow{
    margin-top:10px;
  }
}

/* Premium certificates gallery */
.cert-section{
  background:
    radial-gradient(ellipse at 82% 8%, rgba(10,132,255,0.09), transparent 36%),
    linear-gradient(180deg, #02060e 0%, #030914 100%);
}

.cert-inner{
  max-width:1392px !important;
}

.cert-gallery{
  flex:1.15;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  min-width:0;
}

.cert-gallery .cert-img-wrap{
  width:auto;
  max-width:none;
  min-width:0;
  padding:12px;
  appearance:none;
  border-radius:10px;
  cursor:pointer;
  text-align:left;
  background:linear-gradient(160deg, rgba(9,20,40,0.88), rgba(1,8,18,0.84));
  border:1px solid rgba(90,150,230,0.2);
  box-shadow:0 22px 50px rgba(0,0,0,0.22);
  transition:transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}

.cert-gallery .cert-img-wrap:hover{
  transform:translateY(-3px);
  border-color:rgba(10,132,255,0.48);
  box-shadow:0 22px 60px rgba(10,132,255,0.12), 0 22px 50px rgba(0,0,0,0.24);
}

.cert-thumb-label{
  display:flex;
  align-items:center;
  gap:8px;
  color:#8fc8ff;
  font-size:0.72rem;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  padding:4px 2px 10px;
}

.cert-thumb-label::before{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:#0A84FF;
  box-shadow:0 0 12px rgba(10,132,255,0.85);
}

.cert-gallery .cert-img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:center;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.08);
}

.cert-badge-magic{
  background:rgba(160,160,170,0.07);
  border:1px solid rgba(210,210,220,0.16);
  color:#f0f0f2;
}

.cert-badge-magic .cb-icon{
  background:rgba(255,255,255,0.1);
  color:#fff;
  font-size:0.68rem;
  font-weight:900;
  letter-spacing:0.5px;
}

.cert-badge-magic:hover{
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.28);
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(255,255,255,0.08);
}

.cert-modal-box{
  max-width:min(1120px, 92vw);
}

.cert-modal-box img{
  max-height:86vh;
  object-fit:contain;
  background:#fff;
}

@media(max-width:900px){
  .cert-gallery{
    grid-template-columns:1fr;
    width:100%;
  }
}

/* Credentials section redesign */
.cert-section{
  padding:64px 4.5% 72px !important;
}

.cert-inner{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:24px !important;
  align-items:start !important;
}

.cert-text{
  display:grid;
  grid-template-columns:minmax(280px, 0.9fr) minmax(340px, 1.1fr);
  gap:28px;
  align-items:end;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.cert-label{
  margin-bottom:12px;
  color:#0A84FF;
  letter-spacing:4px;
}

.cert-title{
  max-width:560px;
  font-size:clamp(1.8rem, 3vw, 2.6rem) !important;
  line-height:1.12;
}

.cert-desc{
  max-width:620px;
  margin:0 !important;
  padding:22px 24px;
  border-radius:10px;
  background:linear-gradient(160deg, rgba(9,20,40,0.72), rgba(1,8,18,0.78));
  border:1px solid rgba(90,150,230,0.16);
  color:rgba(210,225,245,0.72) !important;
}

.cert-badges{
  grid-column:1 / -1;
  margin-top:2px !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px !important;
}

.cert-badge{
  border-radius:10px !important;
  min-height:76px;
  background:linear-gradient(155deg, rgba(9,20,40,0.74), rgba(1,8,18,0.76)) !important;
  border:1px solid rgba(90,150,230,0.18) !important;
}

.cert-gallery{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.cert-gallery .cert-img-wrap{
  display:grid;
  grid-template-columns:minmax(180px, 0.46fr) 1fr;
  gap:22px;
  align-items:center;
  padding:16px !important;
  min-height:220px;
  overflow:hidden;
}

.cert-gallery .cert-img-wrap::after{
  content:'Otvori sertifikat';
  justify-self:start;
  align-self:end;
  grid-column:2;
  color:#0A84FF;
  font-size:0.76rem;
  font-weight:900;
  letter-spacing:0.5px;
  text-transform:uppercase;
}

.cert-gallery .cert-img{
  grid-row:1 / 3;
  aspect-ratio:1.38 / 1;
  object-fit:cover;
  border-radius:8px;
  box-shadow:0 18px 42px rgba(0,0,0,0.34);
}

.cert-thumb-label{
  align-self:end;
  padding:0;
  color:#fff;
  font-size:1.08rem;
  line-height:1.3;
  letter-spacing:0.2px;
  text-transform:none;
}

.cert-thumb-label::before{
  width:9px;
  height:9px;
}

.cert-gallery .cert-img-wrap:nth-child(1) .cert-thumb-label::after{
  content:'Certificate of Training';
  display:block;
  margin-top:8px;
  color:rgba(210,225,245,0.58);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.cert-gallery .cert-img-wrap:nth-child(2) .cert-thumb-label::after{
  content:'DynoBike, DynoHub & StageX Diesel ECU Remapping';
  display:block;
  margin-top:8px;
  color:rgba(210,225,245,0.58);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

@media(max-width:1100px){
  .cert-text{
    grid-template-columns:1fr;
  }

  .cert-badges,
  .cert-gallery{
    grid-template-columns:1fr;
  }
}

@media(max-width:768px){
  .cert-section{
    padding:48px 5% 58px !important;
  }

  .cert-text{
    text-align:left !important;
    gap:18px;
  }

  .cert-desc{
    padding:18px;
  }

  .cert-badges{
    grid-template-columns:1fr;
  }

  .cert-gallery .cert-img-wrap{
    grid-template-columns:1fr;
    gap:14px;
    min-height:auto;
  }

  .cert-gallery .cert-img{
    grid-row:auto;
    aspect-ratio:16 / 10;
  }

  .cert-gallery .cert-img-wrap::after{
    grid-column:auto;
  }
}

/* Final hero cleanup */
#home-hero{
  background:url('../images/hero-desktop-final.png') center top / 100% auto no-repeat, #02060e !important;
}

#home-hero::before{
  background:
    linear-gradient(90deg,
      #02060e 0%,
      rgba(2,6,14,0.94) 28%,
      rgba(2,6,14,0.62) 48%,
      rgba(2,6,14,0.12) 78%,
      rgba(2,6,14,0.04) 100%),
    linear-gradient(180deg,
      rgba(2,6,14,0.08) 0%,
      rgba(2,6,14,0.04) 54%,
      #02060e 100%) !important;
}

#home-hero .hero-title{
  max-width:760px !important;
  font-size:clamp(3.1rem, 4.6vw, 5.3rem) !important;
  line-height:0.96 !important;
  overflow:visible !important;
}

#home-hero .ht-white,
#home-hero .ht-blue{
  display:block !important;
  width:max-content !important;
  max-width:100% !important;
  white-space:nowrap !important;
}

@media(max-width:1400px){
  #home-hero{
    background:url('../images/hero-desktop-final.png') center top / auto 760px no-repeat, #02060e !important;
  }

  #home-hero .hero-title{
    max-width:620px !important;
    font-size:clamp(3rem, 4.7vw, 4.65rem) !important;
  }
}

@media(min-width:769px){
  #home-hero{
    padding-bottom:52px !important;
  }

  #home-hero .hero-benefits{
    margin-top:220px !important;
  }

  #home-hero .hero-service-grid{
    margin-top:18px !important;
  }
}

@media(max-width:768px){
  #home-hero{
    background:url('../images/hero-mobile-final.png') center top / cover no-repeat, #02060e !important;
  }

  #home-hero::before{
    background:
      linear-gradient(180deg,
        rgba(2,6,14,0.38) 0%,
        rgba(2,6,14,0.5) 30%,
        rgba(2,6,14,0.74) 56%,
        #02060e 100%),
      linear-gradient(90deg,
        rgba(2,6,14,0.9) 0%,
        rgba(2,6,14,0.58) 58%,
        rgba(2,6,14,0.22) 100%) !important;
  }

  #home-hero .hero-title{
    max-width:100% !important;
    font-size:clamp(2.35rem, 11.2vw, 3rem) !important;
  }
}

/* Final premium nav links */
@media(min-width:901px){
  nav .nav-links{
    gap:8px !important;
    padding:6px !important;
    border:1px solid rgba(90,150,230,0.16) !important;
    border-radius:999px !important;
    background:linear-gradient(180deg, rgba(7,18,38,0.66), rgba(3,9,20,0.46)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 44px rgba(0,0,0,0.22) !important;
    backdrop-filter:blur(18px);
  }

  nav .nav-link{
    position:relative !important;
    min-width:104px !important;
    height:42px !important;
    padding:0 18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    border-radius:999px !important;
    color:rgba(235,245,255,0.78) !important;
    font-family:'Exo 2',sans-serif !important;
    font-size:0.78rem !important;
    font-weight:900 !important;
    letter-spacing:1px !important;
    text-transform:uppercase !important;
    background:transparent !important;
    border:1px solid transparent !important;
    transition:color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
  }

  nav .nav-link::before{
    content:'' !important;
    width:6px !important;
    height:6px !important;
    border-radius:50% !important;
    background:rgba(120,170,255,0.34) !important;
    box-shadow:none !important;
    transition:background 0.2s, box-shadow 0.2s !important;
  }

  nav .nav-link::after{
    display:none !important;
  }

  nav .nav-link:hover,
  nav .nav-link.active{
    color:#fff !important;
    background:linear-gradient(135deg, rgba(10,132,255,0.24), rgba(0,78,232,0.12)) !important;
    border-color:rgba(90,160,255,0.34) !important;
    box-shadow:0 0 0 1px rgba(10,132,255,0.08), 0 12px 30px rgba(10,132,255,0.14) !important;
    transform:translateY(-1px) !important;
  }

  nav .nav-link:hover::before,
  nav .nav-link.active::before{
    background:#0A84FF !important;
    box-shadow:0 0 14px rgba(10,132,255,0.95) !important;
  }
}

/* Final blog post card polish */
#page-blog{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(10,132,255,0.12), transparent 34%),
    linear-gradient(180deg, #02060e 0%, #030914 100%) !important;
}

#page-blog .page-header{
  padding:120px 5% 44px !important;
  border-bottom:1px solid rgba(90,150,230,0.14) !important;
  background:linear-gradient(180deg, rgba(2,6,14,0.94), rgba(4,10,22,0.72)) !important;
}

#blogSection{
  padding:34px 5% 90px !important;
}

#blogSection .blog-section-title{
  color:#fff !important;
  text-shadow:0 0 24px rgba(10,132,255,0.22);
}

#blogSection .blog-section-sub{
  color:rgba(220,232,248,0.64) !important;
}

#blogTagsBar{
  max-width:1120px;
  margin:0 auto 30px !important;
  justify-content:flex-start !important;
}

#blogTagsBar .blog-tag-btn{
  min-height:30px !important;
  padding:0 16px !important;
  border-radius:999px !important;
  color:rgba(230,240,255,0.62) !important;
  background:rgba(5,13,28,0.62) !important;
  border:1px solid rgba(110,160,230,0.16) !important;
  font-weight:900 !important;
}

#blogTagsBar .blog-tag-btn:hover,
#blogTagsBar .blog-tag-btn.active{
  color:#fff !important;
  background:linear-gradient(135deg, rgba(10,132,255,0.34), rgba(0,78,232,0.14)) !important;
  border-color:rgba(10,132,255,0.58) !important;
  box-shadow:0 0 24px rgba(10,132,255,0.12) !important;
}

#blogGrid{
  display:grid !important;
  grid-template-columns:1fr !important;
  max-width:1120px !important;
  gap:18px !important;
  padding:0 !important;
}

#blogGrid .blog-card{
  display:grid !important;
  grid-template-columns:160px 1fr !important;
  align-items:stretch !important;
  min-height:150px !important;
  overflow:hidden !important;
  border-radius:14px !important;
  background:
    linear-gradient(135deg, rgba(10,132,255,0.08), transparent 36%),
    linear-gradient(180deg, rgba(8,18,36,0.92), rgba(2,8,18,0.96)) !important;
  border:1px solid rgba(160,195,255,0.26) !important;
  box-shadow:0 24px 70px rgba(0,0,0,0.22) !important;
}

#blogGrid .blog-card:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(10,132,255,0.62) !important;
  box-shadow:0 26px 80px rgba(10,132,255,0.12), 0 24px 70px rgba(0,0,0,0.26) !important;
}

#blogGrid .blog-card-img,
#blogGrid .blog-card-img-placeholder{
  width:100% !important;
  height:100% !important;
  min-height:150px !important;
  object-fit:cover !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#63b3ff !important;
  font-size:2.4rem !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(10,132,255,0.24), transparent 42%),
    linear-gradient(145deg, rgba(7,19,42,0.98), rgba(1,6,14,0.98)) !important;
  border-right:1px solid rgba(120,170,255,0.16) !important;
}

#blogGrid .blog-card-body{
  padding:24px 28px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}

#blogGrid .blog-card-tag{
  width:max-content !important;
  margin-bottom:10px !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  color:#8cc9ff !important;
  background:rgba(10,132,255,0.12) !important;
  border:1px solid rgba(10,132,255,0.24) !important;
}

#blogGrid .blog-card-title{
  color:#fff !important;
  font-size:1.18rem !important;
  line-height:1.28 !important;
  margin-bottom:10px !important;
}

#blogGrid .blog-card-excerpt{
  color:rgba(220,232,248,0.76) !important;
  font-size:0.94rem !important;
  line-height:1.62 !important;
  margin-bottom:18px !important;
}

#blogGrid .blog-card-footer{
  justify-content:flex-start !important;
  gap:16px !important;
  flex-wrap:wrap !important;
}

#blogGrid .blog-card-date,
#blogGrid .blog-reading-time{
  color:rgba(220,232,248,0.52) !important;
  font-size:0.76rem !important;
}

#blogGrid .blog-card-read{
  margin-left:auto !important;
  color:#0A84FF !important;
}

#soro-blog{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:18px !important;
  max-width:1120px !important;
  margin:0 auto 18px !important;
  padding:0 !important;
}

#soro-blog:empty{
  display:none !important;
}

#soro-blog,
#soro-blog *{
  font-family:'Exo 2', sans-serif !important;
}

#soro-blog > *,
#soro-blog > * > *{
  width:100% !important;
  max-width:100% !important;
}

#soro-blog a[href],
#soro-blog article{
  color:rgba(220,232,248,0.78) !important;
  text-decoration:none !important;
}

#soro-blog .soro-post-card{
  position:relative !important;
  display:flex !important;
  gap:0 !important;
  align-items:stretch !important;
  width:100% !important;
  max-width:100% !important;
  min-height:150px !important;
  margin:0 0 18px !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:14px !important;
  background:
    linear-gradient(135deg, rgba(10,132,255,0.08), transparent 36%),
    linear-gradient(180deg, rgba(8,18,36,0.94), rgba(2,8,18,0.98)) !important;
  border:1px solid rgba(160,195,255,0.30) !important;
  box-shadow:0 24px 70px rgba(0,0,0,0.24) !important;
}

#soro-blog .soro-post-card:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(10,132,255,0.62) !important;
  box-shadow:0 26px 80px rgba(10,132,255,0.12), 0 24px 70px rgba(0,0,0,0.28) !important;
}

#soro-blog .soro-post-card *{
  max-width:100% !important;
  color:inherit !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

#soro-blog .soro-card-content{
  flex:1 1 auto !important;
  min-width:0 !important;
  padding:24px 28px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
}

#soro-blog .soro-card-content > *{
  width:100% !important;
}

#soro-blog img,
#soro-blog .soro-img-fallback{
  flex:0 0 160px !important;
  width:160px !important;
  height:100% !important;
  min-height:150px !important;
  object-fit:cover !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#63b3ff !important;
  font-size:0.82rem !important;
  font-weight:900 !important;
  letter-spacing:0.18em !important;
  text-transform:uppercase !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(10,132,255,0.24), transparent 42%),
    linear-gradient(145deg, rgba(7,19,42,0.98), rgba(1,6,14,0.98)) !important;
  border-right:1px solid rgba(120,170,255,0.16) !important;
}

#soro-blog h1,
#soro-blog h2,
#soro-blog h3,
#soro-blog h4{
  color:#fff !important;
  font-size:1.12rem !important;
  line-height:1.3 !important;
  font-weight:900 !important;
  margin:0 0 10px !important;
  text-shadow:0 0 18px rgba(10,132,255,0.10) !important;
}

#soro-blog p,
#soro-blog .soro-post-card div{
  color:rgba(220,232,248,0.76) !important;
  font-size:0.94rem !important;
  line-height:1.62 !important;
  margin:0 0 16px !important;
}

#soro-blog time,
#soro-blog .soro-post-card small{
  color:rgba(220,232,248,0.54) !important;
  font-size:0.76rem !important;
}

@media(max-width:768px){
  #page-blog .page-header{
    padding:96px 5% 34px !important;
  }

  #blogSection{
    padding:26px 5% 74px !important;
  }

  #blogTagsBar{
    justify-content:flex-start !important;
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    padding-bottom:8px !important;
  }

  #blogGrid .blog-card{
    grid-template-columns:1fr !important;
  }

  #soro-blog{
    gap:16px !important;
  }

  #soro-blog .soro-post-card{
    flex-direction:column !important;
  }

  #soro-blog img,
  #soro-blog .soro-img-fallback{
    flex:0 0 auto !important;
    width:100% !important;
    height:190px !important;
    min-height:190px !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(120,170,255,0.16) !important;
  }

  #soro-blog .soro-card-content{
    padding:20px !important;
  }

  #blogGrid .blog-card-img,
  #blogGrid .blog-card-img-placeholder{
    height:190px !important;
    min-height:190px !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(120,170,255,0.16) !important;
  }

  #blogGrid .blog-card-body{
    padding:20px !important;
  }

  #blogGrid .blog-card-read{
    width:100% !important;
    margin-left:0 !important;
  }
}