:root {
  --gs-bg: #11161c;
  --gs-bg-soft: #151c24;
  --gs-surface: #1a222c;
  --gs-surface-raised: #202b36;
  --gs-line: rgba(167, 187, 205, 0.2);
  --gs-line-strong: rgba(85, 195, 231, 0.48);
  --gs-text: #f7f9fb;
  --gs-muted: #b8c3ce;
  --gs-cyan: #55c3e7;
  --gs-cyan-deep: #08759c;
  --gs-red: #ee4b55;
  --gs-red-deep: #bd2732;
  --gs-focus: #8cdef7;
  --gs-radius: 14px;
  --gs-radius-small: 9px;
  --gs-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  --gs-section-space: clamp(4.5rem, 8vw, 8rem);
  --gs-header-height: 76px;
  color-scheme: dark;
}

@view-transition {
  navigation: auto;
}

html {
  scroll-padding-top: calc(var(--gs-header-height) + 24px);
  scrollbar-color: var(--gs-cyan-deep) var(--gs-bg);
}

body {
  min-width: 320px;
  padding-top: var(--gs-header-height) !important;
  overflow-x: clip !important;
  background:
    radial-gradient(
      circle at 8% 8%,
      rgba(85, 195, 231, 0.07),
      transparent 26rem
    ),
    var(--gs-bg) !important;
  color: var(--gs-text) !important;
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
  text-rendering: optimizeLegibility;
}

body.menu-open,
body.dialog-open {
  overflow: hidden !important;
}

::selection {
  background: var(--gs-cyan);
  color: #071116;
}

::-webkit-scrollbar {
  width: 11px;
}

::-webkit-scrollbar-track {
  background: var(--gs-bg);
}

::-webkit-scrollbar-thumb {
  border: 3px solid var(--gs-bg);
  border-radius: 999px;
  background: var(--gs-cyan-deep);
}

[hidden] {
  display: none !important;
}

#global-loader,
.map-seo-text,
.visually-hidden[aria-hidden="true"] {
  display: none !important;
}

.section-animate,
.section-animate.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.section-divider {
  display: none;
}

.main-content,
.lok-main {
  min-height: 60vh;
  position: relative;
  isolation: isolate;
}

main section {
  scroll-margin-top: calc(var(--gs-header-height) + 24px);
}

.container {
  width: min(100% - 32px, 1200px) !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

a {
  text-underline-offset: 0.2em;
}

a,
button,
input,
select,
textarea,
summary {
  -webkit-tap-highlight-color: transparent;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--gs-focus) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
}

.skip-link {
  position: fixed;
  z-index: 20000;
  top: 10px;
  left: 12px;
  padding: 12px 16px;
  border: 2px solid var(--gs-focus);
  border-radius: var(--gs-radius-small);
  background: #071116;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-scroll-progress {
  position: fixed;
  z-index: 12000;
  inset: 0 0 auto;
  height: 3px;
  pointer-events: none;
}

.site-scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--gs-cyan) 0 76%, var(--gs-red) 76%);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
}

.back-to-top {
  position: fixed;
  z-index: 980;
  right: 22px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--gs-line-strong);
  border-radius: 50%;
  background: rgba(17, 22, 28, 0.94);
  color: var(--gs-cyan);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  cursor: pointer;
  transition:
    transform 180ms ease,
    background-color 180ms ease;
}

.back-to-top:hover {
  transform: translateY(-3px);
  background: var(--gs-surface-raised);
}

/* Zaglavlje */
.auto-service-header {
  height: var(--gs-header-height) !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(85, 195, 231, 0.34) !important;
  background: rgba(15, 20, 26, 0.9) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease !important;
}

.auto-service-header.scrolled {
  background: rgba(12, 17, 22, 0.97) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22) !important;
}

.auto-service-header::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 5%,
    var(--gs-cyan) 34%,
    transparent 66%,
    var(--gs-red) 92%
  );
  opacity: 0.7;
}

.auto-service-header > .container {
  width: min(100% - 32px, 1400px) !important;
  max-width: 1400px !important;
}

.header-container {
  min-height: var(--gs-header-height);
  gap: clamp(12px, 2vw, 26px) !important;
}

.header-logo {
  gap: 10px !important;
  min-width: max-content;
}

.header-logo:hover {
  color: inherit !important;
  transform: none !important;
}

.header-logo .logo-image {
  width: 46px !important;
  height: 46px !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px !important;
  object-fit: contain !important;
  background: #252c34;
}

.header-logo:hover .logo-image {
  transform: none !important;
}

.logo-title {
  color: var(--gs-text) !important;
  font-size: 0.98rem !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
}

.logo-subtitle {
  color: var(--gs-muted) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.03em;
}

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

.nav-links {
  gap: clamp(12px, 1.5vw, 22px) !important;
}

.nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 !important;
  color: #dce4eb !important;
  font-size: 0.82rem;
  font-weight: 600 !important;
  white-space: nowrap;
}

.nav-link::after {
  bottom: 5px !important;
  height: 1px !important;
  background: var(--gs-cyan) !important;
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: #fff !important;
}

.nav-link[aria-current="page"]::after {
  width: 100%;
}

.header-cta {
  margin-left: auto;
  gap: 8px !important;
}

.btn-header {
  min-height: 44px;
  justify-content: center;
  border-radius: 8px !important;
  padding: 9px 14px !important;
  font-size: 0.82rem;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease !important;
}

.btn-header:hover {
  transform: none !important;
}

.btn-header-primary {
  border: 1px solid var(--gs-cyan-deep) !important;
  background: var(--gs-cyan-deep) !important;
  color: #fff !important;
}

.btn-header-primary:hover {
  background: #1b9fc9 !important;
  box-shadow: none !important;
}

.btn-header-secondary {
  border: 1px solid rgba(238, 75, 85, 0.76) !important;
  background: transparent !important;
  color: #fff !important;
}

.btn-header-secondary:hover {
  background: var(--gs-red-deep) !important;
}

.mobile-menu-toggle {
  display: flex !important;
  width: 44px !important;
  height: 44px !important;
  padding: 10px !important;
  border: 1px solid var(--gs-line) !important;
  border-radius: 8px;
}

.hamburger-line {
  height: 2px !important;
  background: #fff !important;
}

.mobile-menu-overlay {
  z-index: 9998 !important;
  background: rgba(2, 6, 9, 0.76) !important;
  backdrop-filter: blur(6px) !important;
}

.mobile-menu-overlay:not(.active) {
  display: none !important;
}

.mobile-menu-sidebar {
  z-index: 9999 !important;
  inset: 0 0 0 auto !important;
  width: min(88vw, 360px) !important;
  height: 100dvh !important;
  border-left: 1px solid var(--gs-line-strong) !important;
  background:
    linear-gradient(145deg, rgba(85, 195, 231, 0.05), transparent 35%), #111820 !important;
  box-shadow: -28px 0 70px rgba(0, 0, 0, 0.38) !important;
  transition: none !important;
}

.mobile-menu-sidebar:not(.active):not(.closing) {
  display: none !important;
}

.mobile-menu-sidebar.active {
  display: flex !important;
  animation: gs-menu-in 210ms ease-out both;
}

.mobile-menu-sidebar.closing {
  display: flex !important;
  animation: gs-menu-out 190ms ease-in both;
}

@keyframes gs-menu-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes gs-menu-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

.mobile-menu-header {
  min-height: 78px;
  padding: 16px 18px !important;
  border-bottom-color: var(--gs-line) !important;
  background: rgba(85, 195, 231, 0.04) !important;
}

.mobile-menu-close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--gs-line) !important;
  border-radius: 50% !important;
}

.mobile-nav {
  padding: 12px !important;
}

.mobile-nav-link {
  min-height: 52px;
  padding: 12px 14px !important;
  border: 1px solid transparent;
  border-left: 1px solid transparent !important;
  border-radius: 8px;
  color: #eaf0f5 !important;
}

.mobile-nav-link:hover,
.mobile-nav-link[aria-current="page"] {
  border-color: var(--gs-line) !important;
  background: rgba(85, 195, 231, 0.08) !important;
  color: #fff !important;
}

.mobile-nav-link[aria-current="page"] {
  box-shadow: inset 3px 0 var(--gs-cyan);
}

.mobile-menu-footer {
  border-top-color: var(--gs-line) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

.mobile-contact-btn {
  min-height: 48px;
  border: 1px solid var(--gs-line-strong);
  background: transparent !important;
}

.mobile-contact-btn:first-child {
  background: var(--gs-cyan-deep) !important;
}

/* Zajednički tipografski i akcioni elementi */
.gs-section {
  position: relative;
  padding-block: var(--gs-section-space);
  border-top: 1px solid var(--gs-line);
}

.gs-section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: max(16px, calc((100vw - 1200px) / 2));
  width: clamp(72px, 12vw, 170px);
  height: 2px;
  background: var(--gs-cyan);
}

.gs-section:nth-of-type(even) {
  background:
    linear-gradient(180deg, rgba(85, 195, 231, 0.025), transparent 32%),
    var(--gs-bg-soft);
}

.gs-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px !important;
  color: var(--gs-cyan) !important;
  font-size: 0.76rem !important;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.gs-eyebrow > span {
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--gs-red) 0 32%, var(--gs-cyan) 32%);
}

.gs-section h2,
.gs-page-hero h1,
.gs-hero h1 {
  margin: 0;
  color: var(--gs-text) !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  text-wrap: balance;
}

.gs-section h2 {
  font-size: clamp(2rem, 4vw, 3.7rem) !important;
  line-height: 1.08 !important;
}

.gs-section h3 {
  color: var(--gs-text) !important;
}

.gs-section p,
.gs-page-hero p {
  color: var(--gs-muted);
}

.gs-section-heading {
  display: grid;
  grid-template-columns: minmax(180px, 0.38fr) minmax(0, 1fr);
  gap: clamp(30px, 7vw, 100px);
  align-items: start;
  margin-bottom: clamp(36px, 6vw, 72px);
}

.gs-section-heading .gs-eyebrow {
  margin-top: 9px !important;
}

.gs-section-heading > div > p {
  max-width: 68ch;
  margin: 20px 0 0;
  font-size: clamp(1rem, 1.4vw, 1.16rem);
}

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

.gs-button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--gs-radius-small);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.gs-button:hover {
  transform: translateY(-2px);
  color: #fff;
}

.gs-button-primary {
  border-color: var(--gs-red);
  background: var(--gs-red-deep);
  color: #fff;
}

.gs-button-primary:hover {
  background: #d4333e;
}

.gs-button-secondary {
  border-color: var(--gs-line-strong);
  background: rgba(85, 195, 231, 0.05);
  color: #eefdff;
}

.gs-button-secondary:hover {
  border-color: var(--gs-cyan);
  background: rgba(85, 195, 231, 0.11);
}

.gs-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--gs-cyan) !important;
  font-weight: 700;
  text-decoration: none;
}

.gs-text-link:hover {
  color: #93e3fa !important;
}

/* Početna: hero */
.gs-hero {
  position: relative;
  min-height: min(800px, calc(100svh - var(--gs-header-height)));
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(44px, 7vw, 88px);
  background: #0d1319;
}

.gs-hero-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(85, 195, 231, 0.09) 1px, transparent 1px),
    linear-gradient(rgba(85, 195, 231, 0.06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent 72%);
}

.gs-hero-backdrop::after {
  content: "";
  position: absolute;
  width: min(55vw, 760px);
  aspect-ratio: 1.7;
  top: 9%;
  right: -10%;
  border: 1px solid rgba(85, 195, 231, 0.22);
  transform: skewX(-18deg);
}

.gs-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(36px, 6vw, 86px);
  align-items: center;
}

.gs-hero-copy {
  position: relative;
  z-index: 2;
}

.gs-hero h1 {
  max-width: 12ch;
  font-size: clamp(3rem, 5.6vw, 6rem) !important;
  line-height: 0.98 !important;
}

.gs-hero-lead {
  max-width: 62ch;
  margin: 26px 0 0;
  color: #c8d2dc !important;
  font-size: clamp(1.03rem, 1.6vw, 1.24rem);
  line-height: 1.75;
}

.gs-hero-lead strong {
  color: #fff;
}

.gs-service-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 30px 0;
  padding: 0;
  list-style: none;
}

.gs-service-points li {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--gs-line);
  color: #e4eaf0;
  font-size: 0.9rem;
  font-weight: 600;
}

.gs-service-points i {
  width: 22px;
  color: var(--gs-cyan);
  text-align: center;
}

.gs-contact-note {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin: 22px 0 0 !important;
  color: var(--gs-muted) !important;
  font-size: 0.86rem;
}

.gs-contact-note span:first-child {
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.gs-contact-note a {
  color: var(--gs-cyan);
}

.gs-hero-visual {
  position: relative;
  margin: 0;
  border: 1px solid var(--gs-line-strong);
  background: var(--gs-surface);
  box-shadow: var(--gs-shadow);
  clip-path: polygon(4% 0, 100% 0, 100% 93%, 96% 100%, 0 100%, 0 7%);
}

.gs-hero-visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  clip-path: inherit;
  pointer-events: none;
}

.gs-hero-visual picture {
  display: block;
  aspect-ratio: 1.18;
  overflow: hidden;
}

.gs-hero-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.gs-hero-visual figcaption {
  min-height: 84px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid var(--gs-line);
}

.gs-visual-index,
.gs-card-number {
  color: var(--gs-cyan);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.gs-hero-visual figcaption strong,
.gs-hero-visual figcaption small {
  display: block;
}

.gs-hero-visual figcaption strong {
  color: #fff;
  font-size: 0.9rem;
}

.gs-hero-visual figcaption small {
  margin-top: 2px;
  color: var(--gs-muted);
  font-size: 0.72rem;
}

.gs-hero-visual figcaption a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gs-cyan);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

/* Početna: usluge */
.gs-services {
  background:
    radial-gradient(
      circle at 90% 16%,
      rgba(238, 75, 85, 0.06),
      transparent 25rem
    ),
    var(--gs-bg-soft) !important;
}

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

.gs-service-card {
  position: relative;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  padding: 26px;
  overflow: hidden;
  border: 1px solid var(--gs-line);
  border-radius: var(--gs-radius);
  background: rgba(27, 35, 45, 0.76);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.gs-service-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gs-cyan), transparent 65%);
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 220ms ease;
}

.gs-service-card:hover {
  border-color: rgba(85, 195, 231, 0.44);
  background: var(--gs-surface-raised);
  transform: translateY(-4px);
}

.gs-service-card:hover::after {
  transform: scaleX(1);
}

.gs-service-card-featured {
  background:
    linear-gradient(145deg, rgba(85, 195, 231, 0.12), transparent 56%),
    var(--gs-surface);
}

.gs-card-number {
  position: absolute;
  top: 22px;
  right: 24px;
}

.gs-card-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 40px;
  border: 1px solid var(--gs-line-strong);
  border-radius: 50%;
  color: var(--gs-cyan);
  font-size: 1.1rem;
}

.gs-service-card h3 {
  margin: 0 0 12px;
  font-size: 1.18rem;
  line-height: 1.35;
}

.gs-service-card p {
  margin: 0 0 24px;
  font-size: 0.9rem;
  line-height: 1.7;
}

.gs-service-card > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--gs-cyan);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.gs-section-action {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
  margin-top: 34px;
}

/* Početna: proces */
.gs-process {
  background:
    linear-gradient(115deg, rgba(85, 195, 231, 0.045), transparent 42%), #0f151b !important;
}

.gs-process-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
  gap: clamp(42px, 8vw, 120px);
  align-items: start;
}

.gs-process-intro {
  position: sticky;
  top: calc(var(--gs-header-height) + 30px);
}

.gs-process-intro h2 {
  font-size: clamp(2.2rem, 4.2vw, 4rem) !important;
}

.gs-process-intro > p:not(.gs-eyebrow) {
  margin: 22px 0 30px;
  font-size: 1.02rem;
  line-height: 1.75;
}

.gs-process-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  counter-reset: none;
  list-style: none;
}

.gs-process-list li {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  padding: 28px 0;
  border-top: 1px solid var(--gs-line);
}

.gs-process-list li:last-child {
  border-bottom: 1px solid var(--gs-line);
}

.gs-process-list li > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gs-line-strong);
  border-radius: 50%;
  color: var(--gs-cyan);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.gs-process-list h3 {
  margin: 0 0 8px;
  font-size: 1.18rem;
}

.gs-process-list p {
  max-width: 58ch;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
}

/* Početna: javni podaci */
.gs-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(38px, 7vw, 96px);
  align-items: center;
}

.gs-proof-image,
.gs-page-hero-image {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--gs-line-strong);
  border-radius: var(--gs-radius);
  box-shadow: var(--gs-shadow);
}

.gs-proof-image img,
.gs-page-hero-image img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: block;
  object-fit: cover;
}

.gs-proof-image figcaption,
.gs-page-hero-image figcaption {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: rgba(9, 14, 19, 0.86);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

.gs-proof-copy > p:not(.gs-eyebrow) {
  margin: 22px 0 26px;
  font-size: 1rem;
  line-height: 1.8;
}

.gs-proof-list,
.gs-check-list {
  display: grid;
  gap: 0;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.gs-proof-list li,
.gs-check-list li {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-top: 1px solid var(--gs-line);
  color: #e8edf2;
  font-size: 0.91rem;
}

.gs-proof-list li:last-child,
.gs-check-list li:last-child {
  border-bottom: 1px solid var(--gs-line);
}

.gs-proof-list i,
.gs-check-list i {
  width: 22px;
  color: var(--gs-cyan);
  text-align: center;
}

/* Partner */
.pr-sekcija {
  padding-block: var(--gs-section-space) !important;
  border-top: 1px solid var(--gs-line);
  background: var(--gs-bg-soft) !important;
}

.pr-okvir {
  padding: clamp(24px, 5vw, 52px) !important;
  border: 1px solid var(--gs-line) !important;
  border-radius: var(--gs-radius) !important;
  background: var(--gs-surface) !important;
  box-shadow: none !important;
}

.pr-badge {
  width: fit-content;
  border-color: var(--gs-line-strong) !important;
  background: transparent !important;
  color: var(--gs-cyan) !important;
}

.pr-grid {
  align-items: center !important;
}

.pr-logo {
  border-color: var(--gs-line) !important;
  background: #e9edf0 !important;
}

.pr-tekst h2 {
  color: var(--gs-text) !important;
  font-size: clamp(1.7rem, 3vw, 2.6rem) !important;
  letter-spacing: -0.035em;
}

.pr-tekst p,
.pr-lista li {
  color: var(--gs-muted) !important;
}

.pr-lista i {
  color: var(--gs-cyan) !important;
}

/* Početna: završni kontakt */
.gs-contact-cta {
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(238, 75, 85, 0.07),
      transparent 30rem
    ),
    #0d1319 !important;
}

.gs-contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.8fr);
  border: 1px solid var(--gs-line-strong);
  border-radius: var(--gs-radius);
  overflow: hidden;
  background: var(--gs-surface);
}

.gs-contact-copy {
  padding: clamp(28px, 6vw, 70px);
}

.gs-contact-copy h2 {
  max-width: 13ch;
}

.gs-contact-copy > p:not(.gs-eyebrow) {
  max-width: 58ch;
  margin: 22px 0 30px;
  line-height: 1.8;
}

.gs-contact-image {
  min-height: 420px;
  margin: 0;
  overflow: hidden;
  border-left: 1px solid var(--gs-line);
}

.gs-contact-image picture,
.gs-contact-image img {
  width: 100%;
  height: 100%;
  display: block;
}

.gs-contact-image img {
  object-fit: cover;
}

.gs-contact-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
  border: 1px solid var(--gs-line);
  border-radius: var(--gs-radius);
  overflow: hidden;
  background: var(--gs-surface);
}

.gs-contact-strip > a {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border-right: 1px solid var(--gs-line);
  color: #fff;
  text-decoration: none;
  transition: background-color 180ms ease;
}

.gs-contact-strip > a:last-child {
  border-right: 0;
}

.gs-contact-strip > a:hover {
  background: var(--gs-surface-raised);
}

.gs-contact-strip i {
  color: var(--gs-cyan);
  font-size: 1.1rem;
}

.gs-contact-strip span,
.gs-contact-strip small {
  display: block;
}

.gs-contact-strip span {
  font-size: 0.83rem;
  font-weight: 700;
}

.gs-contact-strip small {
  margin-bottom: 3px;
  color: var(--gs-muted);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gs-map {
  position: relative;
  min-height: 420px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--gs-line);
  border-radius: var(--gs-radius);
  background: var(--gs-surface);
}

.gs-map iframe {
  width: 100%;
  height: 420px;
  display: block;
  border: 0;
  filter: saturate(0.65) contrast(1.08);
}

.gs-map > a {
  position: absolute;
  right: 16px;
  bottom: 16px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border: 1px solid var(--gs-line-strong);
  border-radius: 8px;
  background: rgba(12, 17, 22, 0.94);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

/* Unutrašnje stranice */
.gs-page-hero {
  position: relative;
  padding-block: clamp(60px, 9vw, 120px);
  overflow: hidden;
  border-bottom: 1px solid var(--gs-line);
  background:
    linear-gradient(115deg, rgba(85, 195, 231, 0.08), transparent 40%),
    linear-gradient(300deg, rgba(238, 75, 85, 0.055), transparent 36%), #0e141a;
}

.gs-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(85, 195, 231, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(85, 195, 231, 0.04) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.75), transparent 78%);
  pointer-events: none;
}

.gs-page-hero > .container {
  position: relative;
}

.gs-page-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(400px, 1.1fr);
  gap: clamp(38px, 7vw, 100px);
  align-items: center;
}

.gs-page-hero h1 {
  max-width: 18ch;
  font-size: clamp(2.7rem, 5vw, 5.4rem) !important;
  line-height: 1.02 !important;
}

.gs-page-hero-compact h1 {
  max-width: 17ch;
}

.gs-page-hero-compact > .container {
  max-width: 960px !important;
  margin-left: max(16px, calc((100vw - 1200px) / 2)) !important;
}

.gs-page-lead {
  max-width: 67ch;
  margin: 24px 0 30px !important;
  color: #c8d2dc !important;
  font-size: clamp(1.03rem, 1.7vw, 1.23rem);
  line-height: 1.8;
}

.gs-page-lead strong {
  color: #fff;
}

.gs-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: clamp(34px, 6vw, 70px);
  color: var(--gs-muted);
  font-size: 0.78rem;
}

.gs-breadcrumb a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  color: var(--gs-cyan);
}

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

.gs-principles-grid article {
  min-height: 250px;
  padding: 28px;
  border: 1px solid var(--gs-line);
  border-radius: var(--gs-radius);
  background: var(--gs-surface);
}

.gs-principles-grid article > span {
  display: block;
  margin-bottom: 54px;
  color: var(--gs-cyan);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.75rem;
}

.gs-principles-grid h3 {
  margin: 0 0 12px;
  font-size: 1.2rem;
}

.gs-principles-grid p {
  margin: 0;
  line-height: 1.75;
}

.gs-location-panel {
  background:
    linear-gradient(100deg, rgba(85, 195, 231, 0.055), transparent 45%), #0d1319 !important;
}

.gs-location-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
  gap: clamp(36px, 7vw, 100px);
  align-items: center;
}

.gs-location-grid > .gs-button {
  grid-column: 2;
  justify-self: start;
}

.gs-info-list {
  margin: 0;
}

.gs-info-list > div {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto;
  gap: 20px;
  padding: 13px 0;
  border-top: 1px solid var(--gs-line);
}

.gs-info-list > div:last-child {
  border-bottom: 1px solid var(--gs-line);
}

.gs-info-list dt {
  color: var(--gs-muted);
  font-weight: 500;
}

.gs-info-list dd {
  margin: 0;
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.gs-info-list a {
  color: var(--gs-cyan);
}

.gs-service-catalog {
  background: var(--gs-bg-soft) !important;
}

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

.gs-catalog-list article {
  position: relative;
  display: grid;
  grid-template-columns: 50px 62px 1fr;
  gap: 22px;
  align-items: start;
  padding: 30px 16px;
  border-bottom: 1px solid var(--gs-line);
  transition: background-color 180ms ease;
}

.gs-catalog-list article:hover {
  background: rgba(85, 195, 231, 0.045);
}

.gs-catalog-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gs-line-strong);
  border-radius: 50%;
  color: var(--gs-cyan);
}

.gs-catalog-list h3 {
  margin: 0 0 9px;
  font-size: 1.23rem;
}

.gs-catalog-list p {
  max-width: 78ch;
  margin: 0;
  line-height: 1.75;
}

.gs-faq-layout,
.gs-info-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(42px, 8vw, 120px);
  align-items: start;
}

.gs-faq-layout > div:first-child {
  position: sticky;
  top: calc(var(--gs-header-height) + 30px);
}

.gs-faq-layout > div:first-child > p:not(.gs-eyebrow),
.gs-info-grid > div > p:not(.gs-eyebrow) {
  margin-top: 20px;
  line-height: 1.75;
}

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

.gs-details-list details {
  border-bottom: 1px solid var(--gs-line);
  background: transparent;
}

.gs-details-list summary {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 4px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.gs-details-list summary::-webkit-details-marker {
  display: none;
}

.gs-details-list summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--gs-cyan);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 1.35rem;
}

.gs-details-list details[open] summary::after {
  content: "−";
}

.gs-details-list details p {
  max-width: 75ch;
  margin: 0;
  padding: 0 42px 22px 4px;
  line-height: 1.8;
}

.gs-process-list-wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.gs-process-list-wide li {
  padding: 28px;
  border: 1px solid var(--gs-line);
  border-radius: var(--gs-radius);
  background: var(--gs-surface);
}

.gs-process-list-wide li:last-child {
  border-bottom: 1px solid var(--gs-line);
}

.gs-insurance-info {
  background: var(--gs-bg-soft) !important;
}

.gs-check-list {
  margin: 0;
}

/* Lokacije */
.gs-location-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(38px, 6vw, 78px);
  align-items: start;
}

.gs-services-grid-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gs-services-grid-compact .gs-service-card {
  min-height: 230px;
}

.gs-faq-inline {
  margin-top: 70px;
  padding: 0;
  border: 0;
  background: transparent !important;
}

.gs-faq-inline::before {
  display: none;
}

.gs-faq-inline h2,
.gs-nearby h2 {
  margin-bottom: 26px;
  font-size: clamp(1.7rem, 3vw, 2.5rem) !important;
}

.gs-nearby {
  margin-top: 70px;
}

.gs-nearby ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.gs-nearby li a {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--gs-line);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
}

.gs-nearby li a:hover {
  border-color: var(--gs-line-strong);
  background: var(--gs-surface);
}

.gs-nearby i {
  color: var(--gs-cyan);
}

.gs-location-aside {
  position: sticky;
  top: calc(var(--gs-header-height) + 24px);
  display: grid;
  gap: 14px;
}

.gs-location-card {
  padding: 24px;
  border: 1px solid var(--gs-line);
  border-radius: var(--gs-radius);
  background: var(--gs-surface);
}

.gs-location-card:first-child {
  border-top-color: var(--gs-cyan);
}

.gs-location-card h2 {
  margin: 0 0 16px;
  font-size: 1.12rem !important;
  letter-spacing: -0.02em !important;
}

.gs-location-card address {
  margin: 0 0 18px;
  color: var(--gs-muted);
  font-style: normal;
  line-height: 1.8;
}

.gs-location-card > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gs-cyan);
  font-weight: 700;
}

.gs-location-card .gs-info-list > div {
  grid-template-columns: 1fr;
  gap: 2px;
}

.gs-location-card .gs-info-list dd {
  text-align: left;
}

.gs-location-hub {
  background: var(--gs-bg-soft) !important;
}

.gs-district {
  padding: 34px 0;
  border-top: 1px solid var(--gs-line);
}

.gs-district > header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
  margin-bottom: 18px;
}

.gs-district > header h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2.3vw, 2rem);
}

.gs-district > header span {
  color: var(--gs-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.gs-district ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-district li a {
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid var(--gs-line);
  border-radius: 9px;
  background: rgba(27, 35, 45, 0.56);
  color: #fff;
  text-decoration: none;
  transition:
    border-color 180ms ease,
    transform 180ms ease;
}

.gs-district li a:hover {
  border-color: var(--gs-line-strong);
  transform: translateY(-2px);
}

.gs-district li strong,
.gs-district li small {
  display: block;
}

.gs-district li strong {
  font-size: 0.91rem;
}

.gs-district li small {
  margin-top: 3px;
  color: var(--gs-muted);
  font-size: 0.69rem;
}

.gs-district li em {
  padding: 4px 7px;
  border: 1px solid rgba(238, 75, 85, 0.52);
  border-radius: 999px;
  color: #ffbdc1;
  font-size: 0.63rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gs-district li i {
  color: var(--gs-cyan);
}

.gs-location-question {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
  margin-top: 34px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--gs-line-strong);
  border-radius: var(--gs-radius);
  background: var(--gs-surface);
}

.gs-location-question h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem) !important;
}

.gs-location-question p:last-child {
  max-width: 70ch;
  margin: 14px 0 0;
}

/* Kontakt i formulari */
.contact-modern,
.map-modern,
.quote-modern {
  padding-block: clamp(56px, 8vw, 100px) !important;
  background: transparent !important;
}

.contact-header,
.quote-header,
.map-header {
  max-width: 850px;
  margin: 0 auto clamp(34px, 5vw, 58px) !important;
}

.contact-title,
.quote-title,
.map-title {
  color: var(--gs-text) !important;
  font-size: clamp(2.4rem, 5vw, 4.8rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.045em !important;
  text-wrap: balance;
}

.contact-subtitle,
.quote-subtitle,
.map-subtitle {
  color: var(--gs-muted) !important;
}

.contact-info-card,
.contact-form-card,
.quote-form-card,
.info-card,
.map-card {
  border: 1px solid var(--gs-line) !important;
  border-radius: var(--gs-radius) !important;
  background: var(--gs-surface) !important;
  box-shadow: none !important;
}

.contact-info-card,
.contact-form-card,
.quote-form-card {
  padding: clamp(22px, 4vw, 38px) !important;
}

.contact-main-grid {
  gap: 16px !important;
}

.info-title,
.form-title,
.step-title {
  color: var(--gs-text) !important;
}

.info-label,
.field-hint {
  color: var(--gs-muted) !important;
}

.info-list a,
.contact-socials a {
  color: #eaf1f5 !important;
}

.contact-socials a {
  min-width: 44px;
  min-height: 44px;
}

.form-group label {
  color: #edf3f7 !important;
  font-weight: 600 !important;
}

.form-group input,
.form-group select,
.form-group textarea {
  min-height: 48px;
  border: 1px solid rgba(184, 195, 206, 0.34) !important;
  border-radius: 9px !important;
  background: #111820 !important;
  color: #fff !important;
}

.form-group textarea {
  min-height: 120px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #aebbc7 !important;
  opacity: 1;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gs-focus) !important;
  outline: 3px solid rgba(140, 222, 247, 0.24) !important;
  outline-offset: 1px !important;
}

.required {
  color: #ff8a92 !important;
}

.btn-primary,
.btn-secondary,
.btn-nav,
.btn-service,
.cta-btn,
.emergency-btn {
  min-height: 48px;
}

/* Sjaj na dugmadima isao je od --accent-red do svetlog --accent-blue, pa je beo
   tekst nad plavom polovinom padao na 3,43:1. Iste boje, samo duboke varijante. */
.btn-primary {
  background: linear-gradient(135deg, var(--gs-red-deep), var(--gs-cyan-deep), var(--gs-red-deep)) !important;
}

.quote-modern .btn-primary,
.contact-modern .btn-primary {
  border: 1px solid var(--gs-red) !important;
  border-radius: 9px !important;
  background: var(--gs-red-deep) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.form-step:not(.active),
.hidden {
  display: none !important;
}

.client-type-option input[type="radio"],
.service-option input[type="radio"],
.location-option input[type="radio"],
.glass-type-option input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.client-type-option input[type="radio"]:focus-visible + .client-type-card,
.service-option input[type="radio"]:focus-visible + .service-card,
.location-option input[type="radio"]:focus-visible + .location-card,
.glass-type-option input[type="radio"]:focus-visible + .glass-type-card {
  outline: 3px solid var(--gs-focus) !important;
  outline-offset: 3px !important;
}

.wizard-progress {
  scrollbar-width: thin;
}

.wizard-step {
  position: relative;
}

.wizard-step:focus-visible {
  border-radius: 8px;
}

.step-circle {
  font-variant-numeric: tabular-nums;
}

.save-data-modal {
  background: rgba(2, 6, 9, 0.82) !important;
  backdrop-filter: blur(7px);
}

.save-data-modal-content {
  border: 1px solid var(--gs-line-strong) !important;
  border-radius: var(--gs-radius) !important;
  background: var(--gs-surface) !important;
}

/* Zajednički CTA */
.global-cta {
  padding-block: clamp(48px, 7vw, 84px) !important;
  border-top: 1px solid var(--gs-line);
  background:
    linear-gradient(110deg, rgba(85, 195, 231, 0.05), transparent 48%), #0f151b !important;
}

.global-cta .cta-card,
.cta-emergency-bar {
  border: 1px solid var(--gs-line) !important;
  border-radius: var(--gs-radius) !important;
  background: var(--gs-surface) !important;
  box-shadow: none !important;
}

.global-cta .cta-card h3 {
  color: #fff !important;
}

.global-cta .cta-card p,
.emergency-text {
  color: var(--gs-muted) !important;
}

.global-cta .contact-method,
.global-cta .cta-btn,
.global-cta .emergency-btn {
  min-height: 48px;
}

.cta-emergency-bar {
  border-top-color: var(--gs-cyan) !important;
}

/* Footer */
.auto-service-footer {
  border-top: 1px solid var(--gs-line) !important;
  background: #0a0f14 !important;
}

.auto-service-footer .footer-content,
.footer-sitemap {
  border-color: var(--gs-line) !important;
}

.auto-service-footer h3,
.auto-service-footer h4,
.auto-service-footer h5 {
  color: #fff !important;
}

.auto-service-footer p,
.working-hours,
.footer-links a,
.sitemap-column a {
  color: #aeb9c4 !important;
}

.auto-service-footer a:hover {
  color: var(--gs-cyan) !important;
}

.auto-service-footer .social-links a {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--gs-line);
  background: transparent !important;
}

.developer-credit {
  border-top-color: var(--gs-line) !important;
}

.mobile-sticky-cta {
  z-index: 950 !important;
  min-height: 62px;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid var(--gs-line-strong) !important;
  background: rgba(10, 15, 20, 0.97) !important;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: blur(14px);
}

.mobile-sticky-cta a {
  min-height: 46px !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
}

.mobile-sticky-cta .msc-call {
  background: var(--gs-cyan-deep) !important;
}

.mobile-sticky-cta .msc-quote {
  background: var(--gs-red-deep) !important;
}

@media (min-width: 1180px) {
  .desktop-nav {
    display: flex !important;
  }

  .mobile-menu-toggle {
    display: none !important;
  }
}

@media (max-width: 1179px) {
  .header-cta .btn-header span {
    display: none;
  }

  .btn-header {
    width: 44px;
    padding: 8px !important;
  }
}

@media (max-width: 900px) {
  .gs-hero {
    min-height: auto;
  }

  .gs-hero-grid,
  .gs-page-hero-grid,
  .gs-process-layout,
  .gs-proof-grid,
  .gs-contact-panel,
  .gs-location-grid,
  .gs-location-page-grid,
  .gs-faq-layout,
  .gs-info-grid {
    grid-template-columns: 1fr;
  }

  .gs-hero h1 {
    max-width: 13ch;
  }

  .gs-hero-visual {
    max-width: 720px;
  }

  .gs-process-intro,
  .gs-faq-layout > div:first-child,
  .gs-location-aside {
    position: static;
  }

  .gs-services-grid,
  .gs-district ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gs-contact-image {
    min-height: 350px;
    border-top: 1px solid var(--gs-line);
    border-left: 0;
  }

  .gs-contact-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gs-contact-strip > a:nth-child(2) {
    border-right: 0;
  }

  .gs-contact-strip > a:nth-child(-n + 2) {
    border-bottom: 1px solid var(--gs-line);
  }

  .gs-location-grid > .gs-button {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  :root {
    --gs-header-height: 65px;
    --gs-section-space: clamp(3.8rem, 15vw, 5.5rem);
  }

  .container,
  .auto-service-header > .container {
    width: min(100% - 24px, 1200px) !important;
  }

  .logo-text {
    display: none !important;
  }

  .header-logo .logo-image {
    width: 42px !important;
    height: 42px !important;
  }

  .header-container {
    min-height: var(--gs-header-height);
    gap: 7px !important;
  }

  .header-cta {
    margin-left: auto;
  }

  .mobile-menu-toggle,
  .btn-header {
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  .gs-section-heading {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .gs-section-heading .gs-eyebrow {
    margin-top: 0 !important;
  }

  .gs-hero {
    padding-block: 42px 52px;
  }

  .gs-hero-backdrop {
    background-size: 44px 44px;
  }

  .gs-hero-grid {
    gap: 34px;
  }

  .gs-hero h1 {
    font-size: clamp(2.65rem, 13vw, 4.1rem) !important;
  }

  .gs-hero-lead {
    margin-top: 20px;
    font-size: 1rem;
  }

  .gs-service-points {
    grid-template-columns: 1fr;
    margin-block: 24px;
  }

  .gs-actions {
    align-items: stretch;
  }

  .gs-actions .gs-button {
    flex: 1 1 100%;
  }

  .gs-hero-visual picture {
    aspect-ratio: 0.84;
    max-height: 600px;
  }

  .gs-hero-visual figcaption {
    grid-template-columns: auto 1fr;
    padding: 14px 16px;
  }

  .gs-hero-visual figcaption > a {
    grid-column: 2;
  }

  .gs-services-grid,
  .gs-services-grid-compact,
  .gs-principles-grid,
  .gs-process-list-wide,
  .gs-district ul,
  .gs-nearby ul {
    grid-template-columns: 1fr;
  }

  .gs-service-card {
    min-height: 250px;
    padding: 22px;
  }

  .gs-card-icon {
    margin-bottom: 34px;
  }

  .gs-process-list li {
    grid-template-columns: 46px 1fr;
    gap: 15px;
    padding-block: 24px;
  }

  .gs-process-list li > span {
    width: 42px;
    height: 42px;
  }

  .gs-proof-image img,
  .gs-page-hero-image img {
    min-height: 300px;
  }

  .gs-contact-copy {
    padding: 26px 22px 30px;
  }

  .gs-contact-image {
    min-height: 280px;
  }

  .gs-contact-strip {
    grid-template-columns: 1fr;
  }

  .gs-contact-strip > a {
    min-height: 66px;
    border-right: 0;
    border-bottom: 1px solid var(--gs-line);
  }

  .gs-contact-strip > a:last-child {
    border-bottom: 0;
  }

  .gs-map,
  .gs-map iframe {
    min-height: 340px;
    height: 340px;
  }

  .gs-page-hero {
    padding-block: 48px 64px;
  }

  .gs-page-hero h1 {
    font-size: clamp(2.45rem, 11vw, 3.8rem) !important;
  }

  .gs-page-hero-compact > .container {
    width: min(100% - 24px, 1200px) !important;
    margin-inline: auto !important;
  }

  .gs-breadcrumb {
    margin-bottom: 36px;
  }

  .gs-catalog-list article {
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding-inline: 4px;
  }

  .gs-catalog-list article .gs-catalog-icon {
    grid-column: 1;
    grid-row: 2;
    width: 40px;
    height: 40px;
  }

  .gs-catalog-list article > div:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .gs-process-list-wide li {
    padding: 22px;
  }

  .gs-district {
    padding-block: 28px;
  }

  .gs-location-question {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .contact-title,
  .quote-title,
  .map-title {
    font-size: clamp(2.2rem, 10vw, 3.4rem) !important;
  }

  .wizard-progress {
    display: grid !important;
    grid-template-columns:
      38px minmax(8px, 1fr) 38px minmax(8px, 1fr)
      38px minmax(8px, 1fr) 38px minmax(8px, 1fr) 38px !important;
    align-items: center;
    gap: 0 !important;
    width: 100%;
    overflow: visible !important;
    padding: 0 0 16px !important;
  }

  .wizard-step {
    width: 38px !important;
    min-width: 38px !important;
  }

  .wizard-line {
    width: 100% !important;
    min-width: 8px !important;
    margin: 0 !important;
  }

  .step-circle {
    width: 36px !important;
    height: 36px !important;
  }

  .step-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .form-navigation {
    gap: 10px !important;
  }

  .form-navigation .btn-nav {
    min-width: 0 !important;
    flex: 1 1 0;
  }

  .back-to-top {
    right: 14px;
    bottom: calc(76px + env(safe-area-inset-bottom));
  }

  body {
    padding-bottom: calc(62px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 390px) {
  .header-cta .btn-header-secondary {
    display: none !important;
  }

  .gs-hero h1 {
    font-size: clamp(2.45rem, 12.8vw, 3.25rem) !important;
  }

  .gs-button {
    width: 100%;
  }

  .gs-map > a {
    right: 10px;
    bottom: 10px;
    left: 10px;
    justify-content: center;
  }
}

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

  .auto-service-header,
  .btn-header {
    transition: none !important;
  }

  .gs-service-card:hover,
  .gs-district li a:hover,
  .gs-button:hover,
  .back-to-top:hover {
    transform: none !important;
  }
}

@media print {
  .auto-service-header,
  .mobile-sticky-cta,
  .site-scroll-progress,
  .back-to-top,
  .global-cta {
    display: none !important;
  }

  body {
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
  }
}

/* Kontura vetrobrana i precizna putanja kroz sadržaj */
.glass-intro {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #eefaff;
  background: #06141c;
  pointer-events: none;
  animation: glass-intro-out 640ms cubic-bezier(.65, 0, .2, 1) both;
}
.glass-intro svg { width: min(50vw, 250px); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 18px 28px rgba(0,0,0,.32)); }
.glass-intro strong { position: absolute; margin-top: 155px; font-size: .74rem; letter-spacing: .22em; }
.glass-intro__outline { stroke: #dff8ff; stroke-dasharray: 560; animation: glass-outline-draw .46s ease-out both; }
.glass-intro__crack { stroke: #f3b340; stroke-dasharray: 100; animation: glass-crack-draw .38s .08s ease-out both; }
.glass-intro__shine { position: absolute; inset: -30%; background: linear-gradient(112deg, transparent 40%, rgba(255,255,255,.28) 49%, transparent 58%); transform: translateX(-60%); animation: glass-shine .54s ease-out both; }
@keyframes glass-outline-draw { from { stroke-dashoffset: 560; } to { stroke-dashoffset: 0; } }
@keyframes glass-crack-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes glass-shine { to { transform: translateX(60%); } }
@keyframes glass-intro-out { 0%, 70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

.site-scroll-progress-outline { transform: none !important; }
.site-scroll-progress-outline span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #57d8ff, #eafaff 52%, #f3b340); box-shadow: 0 0 12px rgba(87,216,255,.55); }
.glass-enter { opacity: 0; transition: opacity .58s ease, transform .7s cubic-bezier(.2,.72,.2,1), clip-path .7s cubic-bezier(.2,.72,.2,1); transition-delay: calc(var(--glass-order, 0) * 56ms); }
.glass-enter-left { transform: translate3d(-22px, 7px, 0); }
.glass-enter-right { transform: translate3d(22px, 9px, 0); }
.glass-enter-cut { transform: translate3d(0, 15px, 0); clip-path: polygon(0 0, 100% 0, 86% 70%, 100% 100%, 0 100%, 12% 58%); }
.glass-enter-depth { transform: translate3d(0, 10px, 0) scale(.975); }
.glass-entered { opacity: 1; transform: none; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
.gs-hero-visual,
.gs-page-hero-image { transform: translate3d(0, var(--glass-parallax, 0), 0); transition: transform 80ms linear; }

.glass-outline-guide { position: fixed; z-index: 2450; top: 50%; right: 18px; display: none; width: 194px; gap: 7px; transform: translateY(-50%); pointer-events: none; }
.glass-outline-guide__line { position: absolute; top: 10px; right: 8px; bottom: 10px; width: 2px; overflow: hidden; border-radius: 99px; background: repeating-linear-gradient(to bottom, rgba(87,216,255,.35) 0 7px, transparent 7px 11px); }
.glass-outline-guide__line span { display: block; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background: #58d9ff; box-shadow: 0 0 10px rgba(88,217,255,.8); }
.glass-outline-guide__stop { position: relative; display: grid; grid-template-columns: 1fr 18px; align-items: center; gap: 10px; min-height: 28px; padding: 0; border: 0; color: var(--gs-muted, #60717b); background: transparent; font: 700 .68rem/1.2 Poppins, sans-serif; text-align: right; pointer-events: auto; cursor: pointer; }
.glass-outline-guide__stop span { overflow: hidden; opacity: 0; transform: translateX(8px); transition: opacity .2s ease, transform .2s ease; white-space: nowrap; text-overflow: ellipsis; }
.glass-outline-guide__stop i { z-index: 1; width: 9px; height: 9px; margin-left: auto; border: 2px solid #42c9ef; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #fff; }
.glass-outline-guide:hover .glass-outline-guide__stop span,
.glass-outline-guide__stop:focus-visible span,
.glass-outline-guide__stop.is-active span { opacity: 1; transform: none; }
.glass-outline-guide__stop.is-active { color: #087b9d; }
.glass-outline-guide__stop.is-active i { background: #f3b340; box-shadow: 0 0 0 5px rgba(66,201,239,.16), 0 0 17px rgba(66,201,239,.6); }
.glass-action-pressed { transform: translateY(1px) scale(.975) !important; }
.glass-form-check { animation: glass-form-check .34s ease both; }
@keyframes glass-form-check { 35% { transform: translateX(-4px); } 70% { transform: translateX(4px); } }

@media (min-width: 1500px) { .glass-outline-guide { display: grid; } }
@media (max-width: 767px) {
  .glass-enter-left,
  .glass-enter-right,
  .glass-enter-cut,
  .glass-enter-depth { transform: translate3d(0, 9px, 0); clip-path: none; }
  .glass-intro svg { width: 170px; }
  .glass-intro strong { margin-top: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .glass-intro, .site-scroll-progress-outline, .glass-outline-guide { display: none !important; }
  .glass-enter { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .gs-hero-visual, .gs-page-hero-image { transform: none !important; transition: none !important; }
}
@media print { .glass-intro, .glass-outline-guide { display: none !important; } }

/* Vizuelna dorada po geometriji automobilskog stakla */
main > section:not(:first-child) { content-visibility: auto; contain-intrinsic-size: auto 780px; }
.gs-hero,
.gs-page-hero { isolation: isolate; background: radial-gradient(circle at 82% 28%,rgba(82,207,245,.22),transparent 30rem),linear-gradient(128deg,#06151d,#0b2935 62%,#0a1f28); }
.gs-hero::after,
.gs-page-hero::after { content: ''; position: absolute; z-index: -1; right: -8%; top: 8%; width: min(48vw,620px); aspect-ratio: 1.9; border: 2px solid rgba(193,239,252,.18); border-radius: 46% 46% 38% 38% / 72% 72% 28% 28%; transform: rotate(-5deg); box-shadow: inset 0 0 0 14px rgba(255,255,255,.025),0 28px 80px rgba(0,0,0,.24); }
.gs-hero h1,
.gs-page-hero h1 { font-size: clamp(2.55rem,5.2vw,5.25rem); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
.gs-hero h1::after,
.gs-page-hero h1::after { content: ''; display: block; width: 94px; height: 4px; margin-top: 1.1rem; border-radius: 99px; background: linear-gradient(90deg,#51d1f5,#f3b340); }
.gs-service-card,
.gs-location-card { position: relative; overflow: hidden; border-top: 3px solid rgba(82,207,245,.72) !important; }
.gs-service-card:nth-child(even),
.gs-location-card:nth-child(even) { border-top-color: rgba(243,179,64,.78) !important; }
.gs-service-card::after { content: ''; position: absolute; right: -18px; bottom: -24px; width: 72px; height: 72px; opacity: .12; background: linear-gradient(135deg,transparent 45%,#45c9ef 46% 49%,transparent 50%),linear-gradient(45deg,transparent 45%,#f3b340 46% 49%,transparent 50%); pointer-events: none; }
.gs-section { box-shadow: inset 0 1px rgba(82,207,245,.08); }
.global-cta,
.gs-contact-cta { background: radial-gradient(circle at 12% 50%,rgba(243,179,64,.17),transparent 22rem),radial-gradient(circle at 88% 50%,rgba(82,207,245,.2),transparent 26rem),linear-gradient(116deg,#06141c,#0b2b38) !important; }
.glass-outline-guide { width: 18px; }
@media (max-width: 767px) {
  .gs-hero h1, .gs-page-hero h1 { font-size: clamp(2.35rem,11.5vw,3.8rem); }
  .gs-hero::after, .gs-page-hero::after { right: -42%; width: 96vw; opacity: .5; }
  main > section:not(:first-child) { contain-intrinsic-size: auto 640px; }
}