/* STAKLO DIZAJN MIRO */
:root {
  --bg: #f2f5f7;
  --bg2: #e6ecf0;
  --paper: #ffffff;
  --ink: #0e1a22;
  --muted: #5a6a75;
  --line: rgba(14, 26, 34, .12);
  --accent: #2a90d6;
  --accent-d: #1570b0;
  --deep: #0b151c;
  --deep2: #13212b;
  --grey: #9aa6ae;
  --glass: rgba(255, 255, 255, .55);
  --r: 18px;
  --head: 'Inter Tight', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --body: 'Inter', system-ui, sans-serif;
  --wrap: min(1240px, 100% - 48px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.65 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--head); margin: 0; font-weight: 600; letter-spacing: -.03em; line-height: 1.02; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.wrap { width: var(--wrap); margin-inline: auto; }
.menu-open, .menu-open body { overflow: hidden; }

.eyebrow { font: 500 13px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-d); margin: 0 0 22px; }
.h2 { font-size: clamp(38px, 5.4vw, 76px); }
.h3 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 22px; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split .w > span { display: inline-block; }
.sec { padding: clamp(90px, 12vw, 170px) 0; }
.sec__head { margin-bottom: clamp(40px, 6vw, 80px); max-width: 760px; }
.sec__head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.sec__lead { color: var(--muted); font-size: 18px; margin-top: 26px; max-width: 600px; }

/* gumbi */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 99px; border: 0; background: var(--accent); color: #fff; font: 600 15px/1 var(--body); letter-spacing: .01em; transition: background .3s, color .3s, border-color .3s, box-shadow .3s; position: relative; overflow: hidden; }
.btn:hover { background: var(--accent-d); box-shadow: 0 10px 30px -10px rgba(42, 144, 214, .7); }
.btn[hidden] { display: none; }
.btn--sm { height: 44px; padding: 0 20px; font-size: 14px; }
.btn--glass { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn--glass:hover { background: rgba(255, 255, 255, .26); box-shadow: none; }
.btn--line { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--line:hover { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; }
.link { color: var(--accent-d); font-weight: 600; }
.glass { background: var(--glass); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 30px 60px -30px rgba(14, 26, 34, .25); }

/* logo */
.logo { display: flex; align-items: center; gap: 12px; }
.logo__mark, .pre__mark { display: inline-flex; gap: 3px; }
.logo__mark i, .pre__mark i { width: 14px; height: 18px; transform: skewX(-28deg); border-radius: 2px; background: var(--grey); }
.logo__mark i + i, .pre__mark i + i { background: var(--accent); }
.logo__word { display: flex; flex-direction: column; font: 600 17px/.92 var(--head); letter-spacing: -.02em; }
.logo__word b { color: var(--accent); font-weight: 700; }

/* preloader */
.pre { position: fixed; inset: 0; z-index: 100; background: var(--deep); color: #fff; display: grid; place-items: center; overflow: hidden; }
.pre__in { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.pre__mark i { width: 22px; height: 30px; }
.pre__word { font: 500 clamp(22px, 3vw, 30px)/1 var(--head); letter-spacing: -.02em; }
.pre__word b { color: var(--accent); font-weight: 700; }
.pre__count { font: 500 13px/1 var(--body); letter-spacing: .2em; color: var(--grey); }
.pre__count::after { content: ' %'; }
.pre__sheen { position: absolute; inset: -20% auto -20% -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09), transparent); transform: skewX(-20deg); }
.no-anim .pre { display: none; }

/* navigacija */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: 80px; padding: 0 max(24px, calc((100% - 1320px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #fff; transition: background .35s, color .35s, transform .45s cubic-bezier(.6, 0, .2, 1), height .35s, box-shadow .35s; }
.nav.is-scrolled { height: 68px; color: var(--ink); background: rgba(242, 245, 247, .72); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 1px 0 var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__links { display: flex; gap: 34px; font-size: 15px; font-weight: 500; }
.nav__links a { position: relative; padding: 6px 0; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s; }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { display: flex; align-items: center; gap: 22px; }
.nav__tel { font-weight: 600; font-size: 15px; }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid currentColor; background: none; position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform .35s; }
.burger span:first-child { top: 18px; } .burger span:last-child { top: 26px; }
.menu-open .burger span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu-open .nav { color: #fff; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu { position: fixed; inset: 0; z-index: 40; background: var(--deep); color: #fff; padding: 120px 24px 40px; display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 0 100% 0); transition: clip-path .7s cubic-bezier(.7, 0, .2, 1); }
.menu-open .menu { clip-path: inset(0 0 0 0); }
.menu nav { display: flex; flex-direction: column; gap: 6px; }
.menu nav a { font: 600 clamp(36px, 9vw, 56px)/1.15 var(--head); letter-spacing: -.03em; }
.menu__foot { display: flex; flex-direction: column; gap: 6px; color: var(--grey); }

/* hero */
.hero { position: relative; min-height: calc(100svh - 90px); display: flex; flex-direction: column; justify-content: flex-end; color: #fff; overflow: hidden; padding: 140px 0 clamp(60px, 11vh, 110px); }
.hero__img { position: absolute; inset: -6% 0 0; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 16, 22, .78) 0%, rgba(8, 16, 22, .35) 50%, rgba(8, 16, 22, .05) 80%), linear-gradient(0deg, rgba(8, 16, 22, .7) 0%, transparent 45%); }
.hero__inner { position: relative; width: var(--wrap); margin: 0 auto; }
.hero .eyebrow { color: #cfe6f7; }
.hero__title { font-size: clamp(54px, 9.4vw, 148px); font-weight: 600; letter-spacing: -.045em; line-height: .94; margin-bottom: 30px; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: block; }
.hero__title em { color: #9fd3fa; }
.hero__sub { max-width: 520px; font-size: clamp(17px, 1.4vw, 19px); color: rgba(255, 255, 255, .86); margin-bottom: 34px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.info { background: var(--bg); border-bottom: 1px solid var(--line); }
.info__bar { display: grid; grid-template-columns: repeat(3, 1fr); }
.info__bar > div { padding: 30px 28px; display: flex; flex-direction: column; gap: 6px; }
.info__bar > div:first-child { padding-left: 0; }
.info__bar > div + div { border-left: 1px solid var(--line); }
.info__bar span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.info__bar b { font: 600 18px/1.3 var(--head); letter-spacing: -.01em; }
.info__bar a:hover b { color: var(--accent-d); }
.hero__cap { position: absolute; right: max(24px, calc((100% - 1240px) / 2)); top: 104px; margin: 0; font-size: 12px; color: rgba(255, 255, 255, .65); writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .06em; }

/* o nama */
.about__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.about__text > p { color: var(--muted); font-size: 18px; max-width: 560px; }
.about__text .h2 { margin-bottom: 34px; }
.facts { list-style: none; margin: 44px 0 0; padding: 30px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.facts b { display: block; font: 600 clamp(38px, 4vw, 54px)/1 var(--head); letter-spacing: -.04em; margin-bottom: 8px; }
.facts li > span { color: var(--muted); font-size: 14px; }
.about__media { position: relative; display: grid; grid-template-columns: 1fr .8fr; gap: 18px; align-items: end; }
.clip { margin: 0; overflow: hidden; border-radius: var(--r); }
.clip img { width: 100%; height: 100%; object-fit: cover; }
.about__a { aspect-ratio: 3 / 4; }
.about__b { aspect-ratio: 4 / 5; margin-bottom: 60px; }
.about__note { grid-column: 1 / -1; font-size: 14px; color: var(--muted); margin: 6px 0 0; }

/* usluge */
.services { background: var(--paper); }
.svc { border-top: 1px solid var(--line); }
.svc__row { border-bottom: 1px solid var(--line); }
.svc__head { width: 100%; background: none; border: 0; text-align: left; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 44px; gap: 30px; align-items: center; padding: 30px 0; transition: padding .4s; }
.svc__head h3 { font-size: clamp(26px, 3.2vw, 46px); transition: color .3s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.svc__head p { margin: 0; color: var(--muted); font-size: 16px; }
.svc__plus { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); position: relative; transition: background .3s, border-color .3s, transform .5s; }
.svc__plus::before, .svc__plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; translate: -50% -50%; }
.svc__plus::after { rotate: 90deg; transition: rotate .4s; }
.svc__head:hover h3 { color: var(--accent-d); transform: translateX(10px); }
.svc__head:hover .svc__plus { border-color: var(--accent); }
.svc__row.is-open .svc__plus { background: var(--ink); color: #fff; border-color: var(--ink); }
.svc__row.is-open .svc__plus::after { rotate: 0deg; }
.svc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.6, 0, .2, 1); }
.svc__row.is-open .svc__body { grid-template-rows: 1fr; }
.svc__in { overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 30px; }
.svc__in > div { padding-bottom: 36px; padding-right: 74px; }
.svc__pic { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; margin-bottom: 36px; }
.svc__list { margin: 0 0 20px; padding: 0; list-style: none; }
.svc__list li { padding: 9px 0 9px 26px; position: relative; border-bottom: 1px solid var(--line); font-size: 16px; }
.svc__list li::before { content: ''; position: absolute; left: 3px; top: 18px; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
.svc__glass { font-size: 15px; color: var(--muted); background: var(--bg); border-radius: 12px; padding: 14px 18px; margin: 0; }
.svc__glass b { color: var(--ink); }
.svc__float { position: fixed; z-index: 30; left: 0; top: 0; width: 300px; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; pointer-events: none; opacity: 0; box-shadow: 0 30px 60px -20px rgba(14, 26, 34, .45); }
.svc__float img { width: 100%; height: 100%; object-fit: cover; }

/* radovi */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 40px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--line); background: transparent; font-size: 14px; font-weight: 500; transition: background .3s, color .3s, border-color .3s; }
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; grid-auto-flow: dense; gap: 14px; }
.tile { margin: 0; position: relative; border-radius: 14px; overflow: hidden; background: var(--bg2); }
.tile--tall { grid-row: span 2; }
.tile--wide { grid-column: span 2; grid-row: span 2; }
.tile button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s cubic-bezier(.2, .8, .2, 1); }
.tile:hover img { scale: 1.06; }
.tile figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, .7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font: 600 14px/1.3 var(--head); pointer-events: none; transition: translate .5s cubic-bezier(.2, .8, .2, 1), opacity .4s; }
.tile figcaption span { display: block; font: 400 13px/1.3 var(--body); color: var(--muted); }
@media (hover: hover) { .tile figcaption { translate: 0 calc(100% + 14px); opacity: 0; } .tile:hover figcaption { translate: 0 0; opacity: 1; } }
.tile.is-out { display: none; }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 90; background: rgba(8, 14, 19, .92); backdrop-filter: blur(10px); display: grid; place-items: center; padding: 40px 70px; }
.lb[hidden] { display: none; }
.lb figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lb img { max-width: min(1100px, 100%); max-height: calc(100vh - 140px); border-radius: 10px; object-fit: contain; }
.lb figcaption { color: #fff; font-size: 15px; text-align: center; }
.lb button { position: absolute; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); color: #fff; border-radius: 50%; width: 50px; height: 50px; font-size: 26px; line-height: 1; }
.lb__x { top: 20px; right: 20px; }
.lb__prev { left: 14px; top: 50%; translate: 0 -50%; }
.lb__next { right: 14px; top: 50%; translate: 0 -50%; }

/* od mat do prozirnog */
.clear { position: relative; height: 100vh; min-height: 560px; overflow: hidden; color: #fff; display: grid; place-items: center; }
.clear__img { position: absolute; inset: -40px; }
.clear__img img { width: 100%; height: 100%; object-fit: cover; filter: blur(28px) saturate(.7) brightness(1.15); }
.clear::after { content: ''; position: absolute; inset: 0; background: rgba(8, 16, 22, .32); }
.clear__in { position: relative; z-index: 2; text-align: center; padding: 0 24px; }
.clear__title { font-size: clamp(46px, 8vw, 124px); letter-spacing: -.045em; line-height: .95; }
.clear__title span { display: block; }
.clear__title em { color: #bfe3ff; }
.clear__list { list-style: none; margin: 40px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; }
.clear__list li { padding: 10px 18px; border-radius: 99px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 15px; font-weight: 500; }
.no-anim .clear__img img { filter: none; }

/* vodič */
.guide { background: var(--deep); color: #fff; position: relative; z-index: 3; margin-top: -50vh; border-radius: 32px 32px 0 0; padding-top: clamp(64px, 8vw, 100px); box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, .45); }
.no-anim .guide { margin-top: 0; }
.guide .eyebrow { color: #7cc2f2; }
.guide .sec__lead { color: rgba(255, 255, 255, .65); }
.types { display: grid; grid-template-columns: 280px 1fr; gap: 40px; }
.types__tabs { display: flex; flex-direction: column; gap: 4px; }
.types__tabs button { text-align: left; background: none; border: 0; border-left: 2px solid rgba(255, 255, 255, .12); padding: 14px 20px; font: 500 18px/1.2 var(--head); color: rgba(255, 255, 255, .55); transition: color .3s, border-color .3s, background .3s; }
.types__tabs button:hover { color: #fff; }
.types__tabs button[aria-selected="true"] { color: #fff; border-color: var(--accent); background: linear-gradient(90deg, rgba(42, 144, 214, .16), transparent); }
.types__panels { position: relative; min-height: 440px; }
.type { position: absolute; inset: 0; display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; padding: 36px; border-radius: 22px; background: linear-gradient(140deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .1); opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.type.is-on { opacity: 1; visibility: visible; position: relative; }
.type h3 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 18px; }
.type h3 small { font: 500 13px/1 var(--body); letter-spacing: .14em; color: #7cc2f2; vertical-align: middle; margin-left: 8px; border: 1px solid rgba(124, 194, 242, .4); padding: 5px 8px; border-radius: 6px; }
.type p { color: rgba(255, 255, 255, .78); }
.type ul { list-style: none; margin: 22px 0 0; padding: 0; }
.type li { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 15.5px; color: rgba(255, 255, 255, .78); }
.type li b { color: #fff; font-weight: 600; }
.type__img { border-radius: 14px; overflow: hidden; min-height: 260px; }
.type__img img { width: 100%; height: 100%; object-fit: cover; }
.pick, .care { margin-top: clamp(70px, 9vw, 120px); }
.pick__table { border-top: 1px solid rgba(255, 255, 255, .14); }
.pick__table > div { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.pick__table > div span:first-child { font: 600 18px/1.3 var(--head); }
.pick__table > div span:last-child { color: rgba(255, 255, 255, .72); }
.pick__note { margin-top: 18px; font-size: 14px; color: rgba(255, 255, 255, .5); }
.care ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.care li { padding: 24px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .7); font-size: 15px; }
.care li b { display: block; color: #fff; font: 600 18px/1.25 var(--head); margin-bottom: 10px; }

/* upit */
.ask { background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); position: relative; overflow: hidden; }
.ask::before, .ask::after { content: ''; position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; pointer-events: none; }
.ask::before { width: 520px; height: 520px; background: #b8dcf5; right: -120px; top: 80px; }
.ask::after { width: 380px; height: 380px; background: #d7e1e7; left: -100px; bottom: 40px; }
.ask__grid { position: relative; z-index: 1; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.ask__intro { position: sticky; top: 110px; }
.ask__intro > p { color: var(--muted); font-size: 18px; }
.ask__intro .h2 { margin-bottom: 28px; }
.ask__tip { margin-top: 28px; padding: 16px 20px; border-left: 2px solid var(--accent); background: rgba(255, 255, 255, .5); border-radius: 0 12px 12px 0; font-size: 15px !important; }
.bk { border-radius: 24px; padding: clamp(24px, 3.4vw, 44px); }
.bk__steps { list-style: none; margin: 0 0 14px; padding: 0; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bk__steps li.is-on { color: var(--ink); }
.bk__steps[hidden] { display: none; }
.bk__progress { height: 3px; background: var(--line); border-radius: 3px; margin-bottom: 34px; overflow: hidden; }
.bk__progress span { display: block; height: 100%; width: 25%; background: var(--accent); transition: width .5s cubic-bezier(.6, 0, .2, 1); }
.bk__step { border: 0; margin: 0; padding: 0; min-width: 0; display: none; }
.bk__step.is-on { display: block; animation: stepIn .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes stepIn { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.bk legend { font: 600 clamp(24px, 2.4vw, 30px)/1.1 var(--head); letter-spacing: -.02em; padding: 0; margin-bottom: 8px; }
.bk__hint { color: var(--muted); font-size: 15px; margin-bottom: 20px; }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.opt input, .pills input { position: absolute; opacity: 0; pointer-events: none; }
.opt span { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); font-size: 14.5px; font-weight: 500; line-height: 1.3; cursor: pointer; transition: border-color .25s, background .25s, box-shadow .25s; }
.opt svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.opt span:hover { border-color: var(--grey); }
.opt input:checked + span { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(42, 144, 214, .18); }
.opt input:checked + span svg { stroke: var(--accent-d); }
.opt input:focus-visible + span, .pills input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fld { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.fld > span { font-size: 14px; font-weight: 500; }
.fld input, .fld select, .fld textarea { width: 100%; font: 400 16px/1.4 var(--body); color: var(--ink); background: rgba(255, 255, 255, .8); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; transition: border-color .25s, box-shadow .25s; }
.fld textarea { resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(42, 144, 214, .16); }
.is-bad { border-color: #d8434e !important; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills span { display: inline-block; padding: 10px 16px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, .7); font-size: 14px; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.pills input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; cursor: pointer; margin: 6px 0 18px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin-top: 2px; }
.cal-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; transition: opacity .3s; }
.cal-wrap.is-off { opacity: .35; pointer-events: none; }
.cal { background: rgba(255, 255, 255, .75); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.cal__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal__title { text-transform: capitalize; font-family: var(--head); font-weight: 600; }
.cal__nav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: none; font-size: 20px; line-height: 1; }
.cal__nav:disabled { opacity: .3; cursor: default; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal__dow span { font-size: 12px; color: var(--muted); padding: 4px 0; }
.cal__grid button { aspect-ratio: 1; border-radius: 10px; border: 0; background: transparent; font-size: 14px; font-weight: 500; transition: background .2s, color .2s; }
.cal__grid button:not(:disabled):hover { background: var(--bg2); }
.cal__grid button:disabled { color: rgba(14, 26, 34, .22); cursor: default; }
.cal__grid button.is-sel { background: var(--accent); color: #fff; }
.slots__title { display: block; font-family: var(--head); font-weight: 600; margin-bottom: 10px; }
.slots__title::first-letter { text-transform: uppercase; }
.slots__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.slots__grid button { height: 40px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .75); font-size: 14px; transition: background .2s, color .2s, border-color .2s; }
.slots__grid button:hover { border-color: var(--accent); }
.slots__grid button.is-sel { background: var(--accent); border-color: var(--accent); color: #fff; }
.sum { margin: 6px 0 18px; padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); font-size: 14.5px; }
.sum dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.sum dt { color: var(--muted); }
.sum dd { margin: 0; font-weight: 500; }
.bk__err { color: #c2333e; font-size: 14px; margin: 14px 0 0; }
.bk__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }
.bk__nav[hidden] { display: none; }
.bk__next { margin-left: auto; }
.bk__done h3 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 12px; }
.bk__done > p { color: var(--muted); }
.bk__send { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.bk__send[hidden] { display: none; }
.bk__sent { font-weight: 600; color: var(--accent-d); }

/* pitanja */
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 90px); }
.qas { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; padding: 24px 50px 24px 0; position: relative; font: 600 clamp(18px, 1.6vw, 21px)/1.3 var(--head); letter-spacing: -.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; position: absolute; right: 6px; top: 50%; translate: 0 -50%; font: 300 28px/1 var(--body); color: var(--accent-d); transition: rotate .3s; }
.qa[open] summary::after { rotate: 45deg; }
.qa p { color: var(--muted); padding-right: 50px; margin: -6px 0 24px; }

/* kontakt */
.contact { background: var(--paper); }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: stretch; }
.contact .h2 { margin-bottom: 44px; }
.contact__list { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 24px; }
.contact__list > div { display: flex; flex-direction: column; gap: 4px; font-size: 17px; }
.contact__list span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.contact__list a:not(.link) { font-weight: 600; }
.contact__list a:not(.link):hover { color: var(--accent-d); }
.contact__list p { margin: 0; }
.contact__list .link { margin-top: 6px; font-size: 15px; }
.map { min-height: 460px; }
.map iframe { width: 100%; height: 100%; min-height: 460px; border: 0; display: block; filter: grayscale(.4) contrast(1.05); }

/* podnožje */
.foot { background: var(--deep); color: rgba(255, 255, 255, .7); padding: 80px 0 34px; overflow: hidden; }
.foot__big { font: 600 clamp(40px, 10.2vw, 156px)/1 var(--head); letter-spacing: -.05em; color: #fff; white-space: nowrap; margin-bottom: 50px; }
.foot__big b { color: var(--accent); font-weight: 700; }
.foot__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; }
.foot__row p { margin: 0; }
.foot__row a:hover { color: #fff; }

/* bez animacija */
.no-anim .split .w > span, .no-anim .hero__title .line > span { transform: none !important; }

/* prilagodba */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .types { grid-template-columns: 1fr; }
  .types__tabs { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 6px; scrollbar-width: none; }
  .types__tabs button { border-left: 0; border-bottom: 2px solid rgba(255, 255, 255, .12); white-space: nowrap; padding: 12px 16px; font-size: 16px; }
  .care ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  body { font-size: 16px; }
  .nav__cta .btn, .nav__tel { display: none; }
  .burger { display: block; }
  .hero { padding-bottom: 48px; min-height: calc(100svh - 150px); }
  .hero__shade { background: linear-gradient(0deg, rgba(8, 16, 22, .88) 0%, rgba(8, 16, 22, .45) 55%, rgba(8, 16, 22, .2) 100%); }
  .info__bar { grid-template-columns: 1fr 1fr; }
  .info__bar > div { padding: 16px 14px; }
  .info__bar > div:nth-child(2) { padding-right: 0; }
  .info__bar > div:last-child { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .info__bar span { font-size: 10.5px; }
  .info__bar b { font-size: 15px; }
  .hero__cap { display: none; }
  .about__grid, .ask__grid, .faq__grid, .contact__grid { grid-template-columns: 1fr; }
  .ask__intro { position: static; }
  .svc__head { grid-template-columns: 1fr 40px; gap: 6px 16px; padding: 22px 0; }
  .svc__head p { grid-row: 2; grid-column: 1; }
  .svc__plus { grid-row: 1 / 3; grid-column: 2; width: 40px; height: 40px; }
  .svc__in { grid-template-columns: 1fr; gap: 0; }
  .svc__in > div { padding-right: 0; }
  .svc__pic { margin-bottom: 18px; }
  .grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; gap: 10px; }
  .tile--wide { grid-column: span 2; }
  .tile figcaption { left: 6px; right: 6px; bottom: 6px; padding: 6px 10px; font-size: 12.5px; border-radius: 8px; }
  .tile figcaption span { display: none; }
  .type { grid-template-columns: 1fr; padding: 24px; }
  .type__img { min-height: 200px; max-height: 240px; order: -1; }
  .opts { grid-template-columns: 1fr 1fr; }
  .cal-wrap { grid-template-columns: 1fr; }
  .map, .map iframe { min-height: 340px; }
  .foot__row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :root { --wrap: calc(100% - 32px); }
  .facts { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .facts b { font-size: 32px; }
  .facts li > span { font-size: 12.5px; }
  .about__b { margin-bottom: 30px; }
  .row2, .contact__list, .care ul { grid-template-columns: 1fr; }
  .opts { gap: 8px; }
  .opt span { flex-direction: row; align-items: center; gap: 10px; padding: 12px; font-size: 13.5px; }
  .opt svg { width: 22px; height: 22px; flex: none; }
  .pick__table > div { grid-template-columns: 1fr; gap: 4px; }
  .bk__steps { font-size: 11px; letter-spacing: .03em; }
  .slots__grid { grid-template-columns: repeat(4, 1fr); }
  .lb { padding: 60px 10px; }
  .lb__prev, .lb__next { top: auto; bottom: 14px; translate: none; }
  .lb__prev { left: calc(50% - 60px); } .lb__next { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }