:root {
  --bg: #f6f5f2;
  --paper: #ffffff;
  --soft: #eeece7;
  --text: #16191d;
  --muted: #5d666e;
  --line: #e6e2da;
  --gold: #b7863d;
  --gold2: #d7ad64;
  --charcoal: #20262d;
  /* engineering / brushed-metal palette (derived from existing brand) */
  --steel-900: #161b21;
  --steel-800: #1d242b;
  --steel-700: #262e37;
  --steel-600: #313a44;
  /* modern radius scale */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  /* elevation — softer, more diffuse modern shadows */
  --shadow-sm: 0 1px 2px rgba(20,24,30,.04), 0 6px 16px rgba(20,24,30,.05);
  --shadow-md: 0 10px 24px rgba(28,34,42,.08), 0 24px 48px rgba(28,34,42,.06);
  --shadow-lg: 0 30px 70px rgba(18,22,28,.22);
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }

body {
  margin: 0;
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { text-decoration: none; color: inherit }

.container { width: min(1180px, 92%); margin: auto }

/* ── HEADER ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 38px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 20px rgba(35,28,18,.04);
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: max-content;
}

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--gold);
  border-radius: 0;
  font-weight: 900;
  font-size: 20px;
  border: none;
}

.brand strong {
  display: block;
  letter-spacing: 1.5px;
  color: var(--gold);
  font-family: Inter, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 22px;
}

.brand small {
  display: block;
  color: #6e6b68;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.8px;
}

/* Nav */
.nav {
  display: flex;
  gap: 24px;
  margin-left: auto;
}

.nav a {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .8px;
  color: #273039;
}

.nav a:hover { color: var(--gold) }

.nav-toggle {
  display: none;
  color: #273039;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 9px;
  line-height: 1;
  cursor: pointer;
}

/* Language switch – slightly smaller */
.language-switch { display: flex; gap: 5px }

.language-switch button {
  border: 1px solid var(--line);
  background: #fff;
  color: #222;
  padding: 5px 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  cursor: pointer;
}

.language-switch .active {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

/* ── BUTTONS (premium, higher conversion) ── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 30px;
  border-radius: var(--r-sm);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 1px;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, filter .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
}

/* light sweep on hover */
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
  pointer-events: none;
}

.btn:hover::after { left: 140% }

.btn-gold {
  background: linear-gradient(120deg, var(--gold2), var(--gold));
  color: #1a1205;
  border: 0;
  box-shadow: 0 4px 16px rgba(183,134,61,.28);
}

.btn-gold:hover {
  box-shadow: 0 10px 26px rgba(183,134,61,.40);
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.btn-outline, .btn-light {
  border: 1.5px solid var(--gold);
  color: var(--gold);
  background: rgba(183,134,61,.04);
}

.btn-outline:hover, .btn-light:hover {
  background: var(--gold);
  color: #1a1205;
  border-color: var(--gold);
  box-shadow: 0 10px 26px rgba(183,134,61,.30);
  transform: translateY(-2px);
}

.hero-actions .btn-outline {
  border-color: rgba(255,255,255,.45);
  color: #fff;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(4px);
}

.hero-actions .btn-outline:hover {
  background: rgba(255,255,255,.95);
  color: var(--steel-900);
  border-color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

.header-cta.btn-outline {
  min-height: 40px;
  padding: 0 20px;
  background: rgba(183,134,61,.06);
  color: var(--gold);
}

.header-cta.btn-outline:hover {
  background: var(--gold);
  color: #fff;
}

/* ── HERO (premium engineering split) ── */
.hero {
  position: relative;
  min-height: 700px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 70px 0 90px;
  background: var(--steel-900);
}

/* deep brushed-steel backdrop */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(215,173,100,.16) 0%, transparent 50%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.020) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, var(--steel-700) 0%, var(--steel-800) 45%, var(--steel-900) 100%);
}

/* blueprint engineering grid */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(215,173,100,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215,173,100,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 100% at 30% 40%, #000 35%, transparent 75%);
  mask-image: radial-gradient(120% 100% at 30% 40%, #000 35%, transparent 75%);
  opacity: .7;
}

/* soft gold glow behind headline */
.hero-glow {
  position: absolute;
  top: -10%;
  left: -8%;
  width: 60%;
  height: 90%;
  background: radial-gradient(circle, rgba(183,134,61,.20) 0%, transparent 62%);
  filter: blur(10px);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 56px;
  align-items: center;
  width: min(1180px, 92%);
}

.hero-copy { max-width: 560px }

.eyebrow, .section-kicker {
  color: var(--gold2);
  letter-spacing: 5px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.eyebrow-tick {
  display: inline-block;
  width: 42px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.hero h1 {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.5px;
  margin: 18px 0 22px;
  color: #ffffff;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}

.lead {
  font-size: 18px;
  color: rgba(233,236,240,.82);
  max-width: 480px;
  line-height: 1.72;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

/* framed showroom visual */
.hero-visual {
  position: relative;
  z-index: 2;
}

.hero-frame {
  position: relative;
  border-radius: var(--r-lg);
  padding: 12px;
  background: linear-gradient(155deg, rgba(215,173,100,.55), rgba(255,255,255,.06) 40%, rgba(0,0,0,.25));
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.12);
}

.hero-photo {
  /* The framed photo box matches the source image's 3:2 aspect ratio on every
     device. Because the box and the image share the same ratio, 'cover' shows
     the entire composition with no side- or top-cropping — so the Swiss flag
     (top-right) and the Alps stay fully in frame identically on phone, tablet
     and desktop. One shared focal point and one shared filter mean the hero now
     looks the same everywhere, instead of diverging between a bright tablet and
     a darker phone. */
  aspect-ratio: 3 / 2;
  border-radius: 9px;
  background: url('../img/hero-showroom.png') center/cover no-repeat;
  filter: brightness(1.4) saturate(1.12) contrast(1.06);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), inset 0 -55px 70px rgba(12,15,19,.26);
}

.hero-frame-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--gold2);
  opacity: .9;
}

.hero-frame-corner.tl { top: 20px; left: 20px; border-right: 0; border-bottom: 0 }
.hero-frame-corner.tr { top: 20px; right: 20px; border-left: 0; border-bottom: 0 }
.hero-frame-corner.bl { bottom: 20px; left: 20px; border-right: 0; border-top: 0 }
.hero-frame-corner.br { bottom: 20px; right: 20px; border-left: 0; border-top: 0 }

/* ── TRUST STRIP (brushed metal) ── */
.trust-strip {
  margin-top: -52px;
  position: relative;
  z-index: 3;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  color: white;
  border: 1px solid rgba(215,173,100,.22);
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, var(--steel-700) 0%, var(--steel-800) 100%);
  box-shadow: 0 24px 54px rgba(16,20,26,.34), inset 0 1px 0 rgba(255,255,255,.08);
}

.trust-grid article {
  padding: 26px 24px;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: background .3s ease;
}

.trust-grid article:hover { background: rgba(215,173,100,.07) }
.trust-grid article:last-child { border-right: 0 }

.trust-grid .trust-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
}

.trust-grid .trust-icon svg {
  width: 30px;
  height: 30px;
  stroke: var(--gold2);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-grid b {
  display: block;
  color: var(--gold2);
  margin: 4px 0;
}

.trust-grid p {
  margin: 0;
  color: #dddde2;
}

/* ── SECTIONS ── */
.section { padding: 92px 0 }

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.section-kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(183,134,61,.2));
}

.section h2, .about h2, .contact h2 {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.5px;
  margin: 14px 0 24px;
}

/* ── PROCESS STEPS (compact luxury) ── */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.steps article, .blog-card, .contact-form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 24px;
  box-shadow: var(--shadow-sm);
}

.steps article {
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}

.steps article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}

.steps article:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(183,134,61,.45);
}

.steps article:hover::before { transform: scaleX(1) }

.steps .step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 6px;
}

.steps .step-icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.steps span.step-num {
  font-size: 28px;
  color: var(--gold);
  font-weight: 900;
  display: block;
}

.steps h3 {
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .5px;
  margin: 6px 0 6px;
}

.steps p {
  color: var(--muted);
  font-size: 14.5px;
  margin: 0;
  line-height: 1.6;
}

/* ── ABOUT ── */
.about {
  padding: 90px 0 80px;
  background: linear-gradient(180deg, #f8f7f5 0%, #fff 40%, #fff 100%);
}

.about-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 54px;
  align-items: center;
}

.about-photo {
  display: block;
  min-height: 430px;
  border-radius: var(--r-md);
  background: url('../img/transport-suv.png') center/cover no-repeat;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
  cursor: pointer;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94), box-shadow .45s ease;
}

.about-photo:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 28px 60px rgba(0,0,0,.28);
}

.about-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,18,22,.05) 0%, rgba(15,18,22,.15) 40%, rgba(15,18,22,.75) 100%);
  transition: background .45s ease;
}

.about-photo:hover .about-photo-overlay {
  background: linear-gradient(180deg, rgba(15,18,22,.03) 0%, rgba(15,18,22,.12) 40%, rgba(15,18,22,.68) 100%);
}

.about-photo-content {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  z-index: 2;
}

.about-photo-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gold2);
  font-size: 11px;
  letter-spacing: 4px;
  font-weight: 800;
  margin-bottom: 8px;
}

.about-photo-headline {
  display: block;
  color: #fff;
  font-family: Fraunces, Georgia, serif;
  font-size: 22px;
  line-height: 1.45;
  font-weight: 500;
  font-style: italic;
  text-shadow: 0 2px 16px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.3);
}


.about-copy p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.about-subtext {
  font-size: 15px !important;
  color: var(--muted);
  margin-top: -4px;
  font-style: italic;
  opacity: .85;
}

/* ── BLOG ── */
.blog {
  background: var(--bg);
  text-align: center;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
}

.blog-img {
  height: 196px;
  border-radius: 0;
  margin: -24px -24px 20px;
  background-size: cover;
  background-position: center;
}

.km { background-image: url('../img/blog-mileage.webp') }
.engine { background-image: url('../img/blog-engine.jpg') }
.avoid { background-image: url('../img/blog-used-car.jpg') }

.blog-card {
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(183,134,61,.45);
}

.blog-card h3 { font-size: 21px; line-height: 1.3 }
.blog-card ul { padding-left: 20px; color: #4f5962 }
.blog-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gold);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 12.5px;
}
.blog-card a::after {
  content: "\2192";
  font-size: 15px;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.blog-card a:hover { color: #9c6f2e }
.blog-card a:hover::after { transform: translateX(4px) }

/* ── CONTACT ── */
.contact {
  padding: 80px 0;
  background: linear-gradient(180deg, #fff, #f5f5f5);
}

.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 44px;
}

.contact-lead {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.7;
}

.company {
  margin: 24px 0;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid;
  gap: 4px;
}

.company strong {
  font-size: 22px;
  color: var(--gold);
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.contact-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  font-weight: 900;
  color: #242b31;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.contact-links a:hover {
  transform: translateY(-2px);
  border-color: rgba(183,134,61,.4);
  box-shadow: var(--shadow-sm);
}

.contact-links svg { width: 24px; height: 24px; fill: currentColor }
.wa { color: #187b4d !important }
.vb { color: #665cac !important }
.mail { color: var(--gold) !important }

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

input, select, textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fbfaf8;
  font: inherit;
  color: #222;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(183,134,61,.14);
}

textarea { grid-column: 1 / -1; min-height: 110px }
.contact-form button { grid-column: 1 / -1 }

/* Visually-hidden labels: accessible to screen readers, removed from the grid flow */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.hidden-field { display: none }
.form-status {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}
.form-status.ok { background: rgba(45,122,74,.12); color: #1f6b3d; border: 1px solid rgba(45,122,74,.30) }
.form-status.err { background: rgba(176,52,52,.10); color: #9c2a2a; border: 1px solid rgba(176,52,52,.30) }

/* ── FOOTER (brushed metal) ── */
footer {
  position: relative;
  color: #f0f0f4;
  text-align: center;
  padding: 48px 20px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, var(--steel-800) 0%, var(--steel-900) 100%);
  border-top: 1px solid rgba(215,173,100,.22);
}

.footer-brand { justify-content: center; margin-bottom: 15px }
.footer-brand small { color: #d0ced0 }
footer p { color: #d0ced0 }

.footer-legal { display: flex; justify-content: center; gap: 18px; margin: 0 0 14px }
.footer-legal a { color: var(--gold); font-size: 14px; font-weight: 600; letter-spacing: .3px }
.footer-legal a:hover { color: var(--gold2) }

.legal-note { font-size: 14px; color: var(--muted); font-style: italic; margin-top: 36px }

/* ── BLOG ARTICLE PAGES ── */
.blog-article-hero {
  height: 340px;
  background-size: cover;
  background-position: center;
}

.blog-article-body {
  max-width: 760px;
  padding: 48px 20px 80px;
}

.blog-back {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--gold);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .5px;
}

.blog-back:hover { color: var(--gold2) }

.blog-article-body h1 {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.5px;
  margin: 0 0 24px;
}

.blog-article-intro {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 44px;
}

.blog-article-body h2 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  margin: 40px 0 14px;
}

.blog-article-body > p {
  color: #4f5962;
  line-height: 1.75;
  font-size: 16px;
  margin: 0 0 16px;
}

.blog-cta {
  margin-top: 64px;
  padding: 36px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.blog-cta h3 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 10px;
}

.blog-cta p { color: var(--muted); margin: 0 0 22px }

/* ── RESPONSIVE: TABLET & MOBILE ── */
@media (max-width: 900px) {
  .site-header {
    padding: 2px 10px;
    min-height: 30px;
    align-items: center;
    flex-wrap: wrap;
  }

  .brand-mark { width: 30px; height: 30px }
  .brand-mark svg { width: 26px !important; height: 26px !important }
  .brand strong { font-size: 20px; letter-spacing: 3px }
  .brand small { font-size: 9px; letter-spacing: 1.4px }
  .brand { gap: 8px }

  .nav-toggle {
    display: block;
    order: 2;
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--line);
    color: #273039;
    border-radius: 6px;
    padding: 4px 7px;
    line-height: 1;
    cursor: pointer;
  }

  .nav {
    display: none;
    order: 4;
    width: 100%;
    margin: 0;
    gap: 0;
    flex-direction: column;
    padding: 4px 0;
  }

  .nav.open { display: flex }
  .nav a { padding: 7px 2px; font-size: 16px }

  .language-switch { order: 1; width: auto }
  .language-switch button { padding: 3px 7px; font-size: 9px }

  .header-cta { display: none }

  /* Hero mobile */
  .hero {
    min-height: auto;
    align-items: flex-start;
    padding: 40px 0 30px;
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .hero-grid { background-size: 38px 38px }

  .hero-content { padding-left: 0 }

  .hero .eyebrow {
    font-size: 10.5px;
    letter-spacing: 4px;
    margin-bottom: 2px;
  }

  .eyebrow-tick { width: 28px }

  .hero h1 {
    font-size: 30px;
    line-height: 1.16;
    margin: 12px 0 14px;
    color: #fff;
  }

  .lead { font-size: 15.5px; color: rgba(233,236,240,.85); line-height: 1.6 }
  .hero-actions { margin-top: 20px; gap: 10px }
  .hero-actions .btn { width: 100%; min-height: 48px; font-size: 11.5px }

  .hero-frame { padding: 8px; border-radius: 13px }
  /* No height/filter override here: the 3:2 aspect-ratio and shared filter on
     .hero-photo apply to tablets and phones alike, so the hero looks identical
     across every screen size. */
  .hero-frame-corner { width: 13px; height: 13px }
  .hero-frame-corner.tl, .hero-frame-corner.tr { top: 15px }
  .hero-frame-corner.bl, .hero-frame-corner.br { bottom: 15px }
  .hero-frame-corner.tl, .hero-frame-corner.bl { left: 15px }
  .hero-frame-corner.tr, .hero-frame-corner.br { right: 15px }

  /* Trust strip */
  .trust-strip { margin-top: 0 }

  .trust-grid, .steps, .about-grid, .blog-grid, .contact-grid {
    grid-template-columns: 1fr;
  }

  .trust-grid { border-radius: 0 }

  .trust-grid article {
    padding: 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .trust-grid .trust-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .trust-grid .trust-icon svg {
    width: 24px;
    height: 24px;
  }

  .trust-grid b { font-size: 14px; margin: 0 }
  .trust-grid p { font-size: 13px; margin: 2px 0 0 }

  /* Sections */
  .section, .about, .contact { padding: 32px 0 }

  .section h2, .about h2, .contact h2 {
    font-size: 24px;
    margin: 6px 0 14px;
  }

  .section-kicker { font-size: 10.5px; letter-spacing: 3px; margin-bottom: 2px }

  /* Steps (compact mobile) */
  .steps { gap: 8px }

  .steps article { padding: 14px 16px }

  .steps .step-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 4px;
  }

  .steps .step-icon svg { width: 24px; height: 24px }
  .steps span.step-num { font-size: 22px }
  .steps h3 { font-size: 13.5px; margin: 4px 0 4px }
  .steps p { font-size: 12.5px; margin: 2px 0 0 }

  /* About */
  .about-grid { gap: 24px }
  .about-photo { min-height: 260px }
  .about-photo-content { left: 18px; right: 18px; bottom: 18px }
  .about-photo-kicker { font-size: 10px; letter-spacing: 3px }
  .about-photo-headline { font-size: 17px; line-height: 1.4 }
  .about-copy p { font-size: 15px }
  .about-subtext { font-size: 13px !important }

  /* Blog */
  .blog-grid { gap: 14px }
  .blog-card { padding: 16px }
  .blog-card h3 { font-size: 17px }
  .blog-img { height: 150px; margin: -16px -16px 14px }

  /* Contact */
  .contact-grid { gap: 24px }
  .contact-lead { font-size: 15px }
  .company { margin: 14px 0; padding: 16px }
  .contact-form { grid-template-columns: 1fr; gap: 10px }
  input, select, textarea { padding: 12px }
  textarea { min-height: 90px }

  /* Footer */
  footer { padding: 24px 14px }

  /* Blog article */
  .blog-article-hero { height: 200px }
  .blog-article-body { padding: 28px 12px 48px }
  .blog-article-body h1 { font-size: 24px }
  .blog-article-intro { font-size: 15px; margin-bottom: 28px }
  .blog-article-body h2 { font-size: 20px; margin: 28px 0 10px }
  .blog-article-body > p { font-size: 15px }
  .blog-cta { padding: 24px 18px; margin-top: 40px }
  .blog-cta h3 { font-size: 20px }
}

@media (max-width: 390px) {
  .hero h1 { font-size: 26px }
  .brand strong { font-size: 18px }
  .language-switch button { padding: 3px 6px }
}

.ime-klase-te-znacke {
  display: none !important;
}

/* ── BRAND: shield watermark + logo usage (per brand guide) ── */
.process, .blog { position: relative; overflow: hidden }
.process .container, .blog .container { position: relative; z-index: 1 }
.process::after, .blog::after {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  right: -90px;
  top: 50%;
  transform: translateY(-50%);
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M24 4 8 8.6v13.1C8 31.4 14.7 38.2 24 41c9.3-2.8 16-9.6 16-19.3V8.6L24 4Z' stroke='%23b7863d' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M15.6 19.6 14.5 12.9l4.7 3.2 4.8-5.2 4.8 5.2 4.7-3.2-1.1 6.7H15.6Z' fill='%23b7863d'/%3E%3Cpath d='M22.3 23.7h3.4v3.4h3.4v3.4h-3.4v3.4h-3.4v-3.4h-3.4v-3.4h3.4z' fill='%23b7863d'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
}

/* Contact: small logo above company info */
.contact-logo { color: var(--gold); margin-bottom: 14px }
.contact-logo .brand-mark { width: 30px; height: 30px }

/* Footer: full logo layout */
.footer-company { display: grid; gap: 3px; margin: 0 0 18px }
.footer-company strong { color: var(--gold); letter-spacing: 1px; font-size: 16px }
.footer-company span { color: #d0ced0; font-size: 14px }
footer small { color: #b9b7ba; display: block; margin-top: 4px }