/* AVA AMES — Websites & Digital Solutions
   Redizajn 30.10.2026 (docs/superpowers/specs/2026-10-30-redizajn-design.md): tamni uvod sa dva
   prozora u obliku znaka, ostatak belo sa tankim linijama, plava je akcenat. Ugao crta iz znaka
   (28,9° od vertikale) je potpis pokreta na celom sajtu. */

/* Hanken Grotesk (OFL, src/assets/fonts/OFL.txt), podskup latinica + latin-ext, sa našeg servera. */
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/HankenGrotesk.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --paper: #ffffff; --ink: #141416; --muted: #63646c; --line: #e2e2e6; --blue: #2D2BE0; --fuchsia: #D10F7E;
  --on-dark: #ffffff; --on-dark-muted: rgba(255,255,255,.74);
  --font: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --strong: 560;
  --slant: 28.9deg;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gut: clamp(20px, 4.2vw, 64px);
  --sec: clamp(64px, 8vw, 112px);
  --wide: 1360px;
  /* Logo u zaglavlju: od 760 px pun logo (1115 × 200) sa opisom, 280–340 px (330 px na 1440 px);
     ispod 760 px opis ne bi bio čitljiv, pa stoji logo-kompakt (1017 × 106) bez opisa. */
  --logo-w: clamp(280px, 8vw + 215px, 340px);
  --logo-r: calc(200 / 1115);
  --head: calc(var(--logo-w) * var(--logo-r) + 52px);   /* visina zaglavlja: logo + 2 × 26 */
  color-scheme: light;
}

/* Automatisierung nosi fuksiju umesto plave (kartica na početnoj i cela stranica): dva pravca, dve boje.
   Beli tekst na fuksiji ima kontrast 5,15, pa važe ista pravila kao za plavu. */
.page-automation, .product.auto { --blue: var(--fuchsia); }
.page-automation .win::after { background: linear-gradient(180deg, rgba(209,15,126,0) 45%, rgba(209,15,126,.32)); }
.page-automation .choice:hover input[type=checkbox]:checked, .page-automation .choice:has(:focus-visible) input[type=checkbox]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5 5.5 11 12 3' fill='none' stroke='%23D10F7E' stroke-width='2'/%3E%3C/svg%3E"); }

/* Osnova */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img { max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
/* Plava ivica fokusa na tamnom nema kontrast od 3:1, zato bela. */
.on-dark a:focus-visible, .on-dark button:focus-visible, .intro a:focus-visible,
.is-menu-open a:focus-visible, .is-menu-open button:focus-visible { outline-color: var(--on-dark); }
[hidden] { display: none !important; }
.in { max-width: var(--wide); margin: 0 auto; padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); }
.u { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.u:hover { text-decoration-thickness: 2px; }
.btn, .button { display: inline-block; max-width: 100%; hyphens: auto; overflow-wrap: break-word; padding: 16px 26px; background: var(--blue); color: var(--on-dark); font-weight: var(--strong); text-decoration: none; transition: background-color .25s, color .25s; }
.btn:hover, .button:hover { background: var(--ink); }
.intro .btn:hover, .intro .btn:focus-visible { background: var(--on-dark); color: var(--ink); }
.kicker { margin: 0 0 22px; font-size: 14px; font-weight: var(--strong); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.skip-link { position: absolute; top: 8px; left: 16px; z-index: 100; transform: translateY(-180%); padding: 14px 20px; color: var(--on-dark); background: var(--blue); }
.skip-link:focus { transform: none; }

/* Zaglavlje: na tamnom uvodu sadržajnih stranica, belo na pravnim stranicama i 404. Nije lepljivo. */
.site-header.on-dark { background: var(--ink); color: var(--on-dark); }
.site-header .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 26px; }
.site-header .logo { display: block; flex: none; width: var(--logo-w); }
.logo img { display: block; width: 100%; height: auto; }
/* prelama se samo uz uvećan tekst; pri običnoj veličini meni staje u jedan red */
.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px 34px; font-size: 16px; }
.site-nav a { text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.site-nav .lang { color: var(--muted); }
.on-dark .site-nav .lang, .is-menu-open .site-nav .lang { color: var(--on-dark-muted); }
.site-nav .cta { font-weight: var(--strong); text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* Kontakt u traci do 1199 px, uz „Menü“: put do upita na jedan dodir i kad je meni zatvoren */
.header-contact { display: none; margin-left: auto; font-size: 16px; font-weight: var(--strong); text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* negativna margina: padding širi dodirnu površinu, a dugme ne povećava visinu zaglavlja */
.nav-toggle { display: none; padding: 6px 0; margin-block: -6px; border: 0; background: none; color: inherit; font: inherit; font-size: 16px; font-weight: var(--strong); cursor: pointer; }

/* Mobilni meni (do 1199 px): preko celog ekrana, tamno, belim slovima */
@media (max-width: 1199px) {
  .site-header .header-inner { flex-wrap: wrap; }
  html.js .nav-toggle { display: block; }
  html.js .header-contact { display: block; }
  html.js .is-menu-open .header-contact { display: none; }
  html.js .site-nav { display: none; }
  html:not(.js) .site-nav { flex-wrap: wrap; width: 100%; gap: 10px 22px; }
  .site-header.is-menu-open { position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: var(--ink); color: var(--on-dark); }
  .is-menu-open .logo img { filter: brightness(0) invert(1); }
  html.js .site-nav.is-open { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 18px; padding-block: clamp(24px, 6vh, 56px) 40px; font-size: 30px; font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; }
  html.js .site-nav.is-open .cta { font-weight: 300; }
}
@media (max-width: 759px) {
  :root { --logo-w: min(230px, calc(100vw - 188px)); --logo-r: calc(106 / 1017); }   /* ostaje mesta za Kontakt i Menü */
}
/* Ispod 390 px logo, Kontakt i Menü ne staju u red uz pun razmak: manji razmak, logo se skuplja do širine koja preostane */
@media (max-width: 389px) {
  :root { --logo-w: min(230px, calc(100vw - 172px)); }
  .site-header .header-inner { gap: 16px; }
}
@media (max-width: 1199px) and (max-height: 520px) {
  html.js .site-nav.is-open { gap: 10px; padding-block: 12px 24px; font-size: 22px; }
}

/* Uvod: tamna podloga, tanko belo slovo, plavo dugme; desno dva prozora u obliku znaka */
.intro { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark); }
.intro .in { position: relative; z-index: 2; padding-block: clamp(48px, 9vh, 120px) clamp(56px, 9vh, 120px); }
.intro h1 { margin: 0; max-width: 12em; font-size: clamp(42px, 6.2vw, 96px); font-weight: 300; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.intro h1 > span { display: block; }
.intro .lead { margin: 28px 0 0; max-width: 32em; font-size: clamp(18px, 1.5vw, 21px); color: var(--on-dark-muted); text-wrap: pretty; }
.intro .kicker { color: var(--on-dark-muted); }
.actions { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; margin-top: clamp(32px, 4vw, 48px); font-size: 17px; font-weight: var(--strong); }

/* Prozori: geometrija znaka 352 × 420 (brand/logo-2026, MARK_SHAPES) u procentima */
.windows { position: relative; z-index: 1; display: block; height: clamp(220px, 62vw, 400px); aspect-ratio: 352 / 420; margin: 0 max(var(--gut), env(safe-area-inset-right, 0px)) 0 auto; }
.win { position: absolute; inset: 0; overflow: hidden; }
.win.w1 { clip-path: polygon(0% 100%, 19.32% 100%, 85.23% 0%, 65.91% 0%); }
.win.w2 { clip-path: polygon(38.64% 100%, 57.95% 100%, 100% 36.19%, 80.68% 36.19%); }
.win img { position: absolute; inset: -30px; width: calc(100% + 60px); max-width: none; height: calc(100% + 60px); object-fit: cover; opacity: 0; transform: translate(var(--px, 0px), var(--py, 0px)) scale(1.04); }
.win img.on { opacity: 1; }
.win::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(45,43,224,0) 45%, rgba(45,43,224,.32)); }
@media (min-width: 1100px) {
  .intro:has(.windows) { min-height: clamp(560px, calc(100svh - var(--head)), 820px); display: flex; align-items: center; }
  .intro:has(.windows) .in { width: 100%; }
  .intro:has(.windows) .in > * { max-width: min(58%, 780px); }
  .intro .windows { position: absolute; right: max(var(--gut), calc((100% - var(--wide)) / 2 + var(--gut))); bottom: 0; height: min(86%, 620px); margin: 0; }
}
@media (max-width: 1099px) {
  .intro:has(.windows) .in { padding-bottom: 40px; }
}

/* Pokret: samo kad sistem ne traži smanjene pokrete; bez toga sve je odmah vidljivo */
@media (prefers-reduced-motion: no-preference) {
  .intro h1 > span, .intro h1:not(:has(span)), .intro .in > :not(h1) { animation: up .9s var(--ease) both; }
  .intro h1 > span + span { animation-delay: .12s; }
  .intro .in > .lead { animation-delay: .24s; }
  .intro .in > .actions { animation-delay: .36s; }
  .win.w1 { animation: rise1 1.2s .15s var(--ease) both; }
  .win.w2 { animation: rise2 1.2s .35s var(--ease) both; }
  .win img { transition: opacity 1.4s ease, transform .8s var(--ease); }
}
@keyframes up { from { opacity: 0; transform: translateY(24px); } }
@keyframes rise1 { from { clip-path: polygon(0% 100%, 19.32% 100%, 19.32% 100%, 0% 100%); } }
@keyframes rise2 { from { clip-path: polygon(38.64% 100%, 57.95% 100%, 57.95% 100%, 38.64% 100%); } }

/* Kartice: pri prelasku ili fokusu plava površina uleće pod uglom crta, tekst pobeli */
.card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: color .4s, border-color .4s; }
.card::before { content: ""; position: absolute; z-index: -1; inset: -2px -40%; background: var(--blue); transform: skewX(calc(-1 * var(--slant))) translateX(-115%); transition: transform .6s var(--ease); }
.card:hover, .card:focus-visible, .card:has(:focus-visible) { color: var(--on-dark); border-color: var(--blue); }
.card:hover::before, .card:focus-visible::before, .card:has(:focus-visible)::before { transform: skewX(calc(-1 * var(--slant))) translateX(0); }
.card p, .card .muted { color: var(--muted); transition: color .4s; }
.card:hover p, .card:focus-visible p, .card:has(:focus-visible) p,
.card:hover .muted, .card:focus-visible .muted, .card:has(:focus-visible) .muted { color: rgba(255,255,255,.86); }
.card:focus-visible { outline-offset: 3px; }

/* Stroga mreža: polja odvojena tankim linijama */
.grid-lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.grid-lines > * { margin: 0; padding: clamp(22px, 2.4vw, 34px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Početna: dva proizvoda kao kartice, sporedne usluge jednim redom, činjenice u mreži */
.products .in { padding-top: clamp(48px, 6vw, 88px); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22em), 1fr)); gap: clamp(16px, 2vw, 24px); }
.product { min-height: clamp(300px, 26vw, 360px); }
.product h2 { margin: 0; padding-right: 56px; font-size: clamp(32px, 3.6vw, 52px); hyphens: auto; font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; transition: transform .5s var(--ease); }
.product p { margin: 16px 0 32px; max-width: 28em; font-size: clamp(17px, 1.3vw, 19px); }
.product .znak { position: absolute; top: clamp(28px, 3vw, 44px); right: clamp(28px, 3vw, 44px); width: 40px; height: auto; transition: transform .6s var(--ease); }
.product .znak polygon { fill: var(--blue); transition: fill .4s; }
.card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; margin-top: auto; padding-top: 28px; border-top: 1px solid var(--line); transition: border-color .4s; }
.card-foot .price { font-size: 19px; }
.card-foot .more { font-size: 16px; font-weight: var(--strong); color: var(--blue); transition: color .4s; }
.product:hover h2, .product:focus-visible h2 { transform: translateX(6px); }
.product:hover .znak, .product:focus-visible .znak { transform: translateY(-6px); }
.product:hover .znak polygon, .product:focus-visible .znak polygon { fill: var(--on-dark); }
.product:hover .card-foot, .product:focus-visible .card-foot { border-color: rgba(255,255,255,.35); }
.product:hover .more, .product:focus-visible .more { color: var(--on-dark); }
.also { margin: 28px 0 0; max-width: 46em; color: var(--muted); }
/* link u svom redu, poravnat sa tekstom iznad (u istom redu bi se prelomio uvučen) */
.also a { display: block; width: fit-content; margin-top: 10px; color: var(--ink); font-weight: var(--strong); }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.4; letter-spacing: -0.01em; }
.more-row { margin: 24px 0 0; font-weight: var(--strong); }

/* Website: šta svaki sajt dobija, četiri izbora sa sabiranjem, ostalo uz sajt, tehnika, uslovi */
.intro-price { margin: 0; font-size: clamp(19px, 1.6vw, 22px); font-weight: 400; color: var(--on-dark); }
.included { list-style: none; margin: 0; padding: 0; }
.included li { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.4; }
.note { margin: 20px 0 0; max-width: 46em; font-size: 15px; color: var(--muted); }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.choice { gap: 14px; }
.choice-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.choice-head label { flex: 1 1 10em; min-width: 0; font-size: clamp(20px, 1.7vw, 24px); font-weight: 400; letter-spacing: -0.015em; line-height: 1.2; hyphens: auto; cursor: pointer; }
/* die ganze Karte wählt aus: das Label deckt die Karte ab, das Auswahlfeld liegt darüber */
.choice-head label::after { content: ""; position: absolute; inset: 0; }
.choice-price { margin-left: auto; font-size: 17px; }
.choice p { margin: 0; font-size: 16px; }
.choice input[type=checkbox] { flex: none; position: relative; z-index: 1; top: 3px; font-size: 16px; appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--ink); border-radius: 0; background: var(--paper) center / 14px no-repeat; cursor: pointer; transition: background-color .3s, border-color .3s; }
.choice input[type=checkbox]:checked { border-color: var(--blue); background-color: var(--blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5 5.5 11 12 3' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); }
.choice input[type=checkbox]:focus-visible, .choice select:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; }
.choice select { position: relative; z-index: 1; align-self: flex-start; margin-top: auto; min-width: 7em; font: inherit; font-size: 17px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 0; padding: 8px 12px; cursor: pointer; }
.choice:hover input[type=checkbox], .choice:has(:focus-visible) input[type=checkbox] { border-color: var(--on-dark); }
.choice:hover input[type=checkbox]:checked, .choice:has(:focus-visible) input[type=checkbox]:checked { background-color: var(--on-dark); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5 5.5 11 12 3' fill='none' stroke='%232D2BE0' stroke-width='2'/%3E%3C/svg%3E"); }
.choice:hover select, .choice:has(:focus-visible) select { border-color: var(--on-dark); }
/* gewählt: dauerhaft blaue Kante, auch ohne Maus */
.choice:has(input:checked), .choice:has(select option:checked:not([value="0"])) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
/* Bez JavaScript-a izbori su mirna lista sa cenama: polja ne bi ništa sabrala ni poslala. */
html:not(.js) form.choices input, html:not(.js) form.choices select, html:not(.js) form.choices .note { display: none; }
.choices-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; margin-top: clamp(28px, 3vw, 40px); padding-top: 24px; border-top: 1px solid var(--ink); }
.total { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; color: var(--muted); }
.total output { font-size: clamp(30px, 3vw, 44px); font-weight: 300; letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); }
.extras { border-top: 1px solid var(--ink); }
.extra { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); gap: 10px 32px; padding-block: 26px 30px; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.extra h3 { grid-column: 1; margin: 0; font-size: clamp(21px, 1.8vw, 26px); font-weight: 400; letter-spacing: -0.018em; line-height: 1.2; }
.extra-price { grid-column: 2; margin: 0; font-size: 19px; }
.extra-body { grid-column: 3; }
.extra-body p { margin: 0 0 12px; color: var(--muted); }
.extra-body .u { font-weight: var(--strong); }
.extra-body .small { margin: 14px 0 0; font-size: 15px; }
.price-list { list-style: none; margin: 0; padding: 0; }
.price-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 24px; padding-block: 9px; border-bottom: 1px solid var(--line); }
.price-list li:first-child { padding-top: 0; }
.tech { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.tech li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr); gap: 4px 32px; padding-block: 16px 18px; border-bottom: 1px solid var(--line); }
.tech-name { font-weight: var(--strong); }
.tech-text { color: var(--muted); }
.tech-price { text-align: right; }
.fine { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }

/* Odeljci na belom */
section.block .in { padding-block: var(--sec) 0; }
section.block:last-of-type .in, .closing .in { padding-bottom: var(--sec); }
.head { margin-bottom: clamp(32px, 4vw, 56px); }
.head h2 { margin: 0; max-width: 18em; font-size: clamp(32px, 3.6vw, 54px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.head p { margin: 18px 0 0; max-width: 38em; color: var(--muted); }
.statement { margin: 0; font-weight: 300; font-size: clamp(34px, 4.4vw, 66px); line-height: 1.06; letter-spacing: -0.032em; max-width: 16em; text-wrap: balance; }
.closing p { margin: 24px 0 0; max-width: 34em; color: var(--muted); }

/* Sport, Tourismus: ponuda i razlog krupno na belom (prva rečenica jača, druga obična), pa dugme */
.offer-block .in { padding-block: var(--sec) 0; }
.offer-block .offer { margin: 0 0 .3em; max-width: 20em; font-size: clamp(30px, 4vw, 60px); font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.offer-block .claim { margin: 0; max-width: 22em; font-size: clamp(30px, 4vw, 60px); font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; color: var(--muted); text-wrap: balance; }
.offer-block .actions { margin-top: clamp(32px, 4vw, 52px); }

/* Zusammenarbeit: četiri stvarna koraka, zato brojevi; činjenice u mreži */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); }
.steps li { padding-top: 20px; border-top: 1px solid var(--ink); }
.steps .n { display: block; margin-bottom: 18px; font-size: clamp(40px, 4vw, 64px); font-weight: 300; line-height: 1; color: var(--blue); }
.steps h3 { margin: 0 0 10px; font-size: 21px; font-weight: var(--strong); }
.steps p { margin: 0; font-size: 16px; color: var(--muted); }
.facts-list { list-style: none; margin: 0; padding: 0; }
.facts-list h3 { margin: 0 0 8px; font-size: clamp(19px, 1.5vw, 22px); font-weight: 400; letter-spacing: -0.012em; line-height: 1.25; }
.facts-list p { margin: 0; font-size: 16px; color: var(--muted); }

/* Napomena u uvodu (Automatisierung: uslov Microsoft 365) */
.intro-note { margin: 14px 0 0; font-size: 16px; color: var(--on-dark-muted); }
.choice-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18em), 1fr)); }

/* Redovi, parovi i spiskovi na belom */
.rows { border-top: 1px solid var(--ink); }
.row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 8px 32px; padding-block: 24px 28px; border-bottom: 1px solid var(--line); }
.row h3 { margin: 0; font-size: clamp(21px, 1.8vw, 26px); font-weight: 400; letter-spacing: -0.018em; line-height: 1.2; }
.row p { margin: 0; max-width: 40em; color: var(--muted); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 5vw, 80px); }
.pair > div { padding-top: 24px; border-top: 1px solid var(--ink); }
.pair h2 { margin: 0 0 16px; font-size: clamp(22px, 2vw, 28px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; }
.pair p { margin: 0; max-width: 34em; color: var(--muted); }
.scope-list { list-style: none; margin: 0 0 20px; padding: 0; }
.scope-list li { padding-block: 10px; border-bottom: 1px solid var(--line); }
.scope-list li:first-child { padding-top: 0; }
.more-link { font-size: 16px; font-weight: var(--strong); }
.lead-text { margin: 0; max-width: 38em; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; }
.terms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); border-top: 1px solid var(--ink); }
.terms li { padding-block: 16px 18px; border-bottom: 1px solid var(--line); max-width: 34em; }
.lead-text + .terms { margin-top: clamp(28px, 3vw, 40px); }

/* Kontakt: forma na belom */
.contact .in { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px clamp(40px, 6vw, 112px); padding-block: clamp(48px, 6vw, 88px) var(--sec); }
.form { display: grid; gap: 22px; }
.form .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.form label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: var(--strong); }
.form label span { font-weight: 400; color: var(--muted); }
.form input, .form select, .form textarea { width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: var(--paper); border: 1px solid #b9bac2; border-radius: 0; padding: 13px 14px; }
.form textarea { min-height: 160px; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.form .help { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.form .narrow { max-width: 50%; }
.form .privacy { margin: 0; font-size: 14px; color: var(--muted); }
.form button { justify-self: start; font: inherit; font-size: 17px; font-weight: var(--strong); border: 0; cursor: pointer; padding: 16px 26px; background: var(--blue); color: var(--on-dark); transition: background-color .25s; }
.form button:hover { background: var(--ink); }
.form button:disabled { cursor: progress; background: var(--muted); }
.form button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-status { margin: 0; font-size: 17px; font-weight: var(--strong); }
.form-status:empty { display: none; }
.form-status[data-state=error] { color: #a3201a; }
.form-status[data-state=success] { color: #17663a; }
.form-status:focus { outline: none; }
.aside > div { padding-top: 20px; border-top: 1px solid var(--ink); }
.aside > div + div { margin-top: 36px; }
.aside h2 { margin: 0 0 10px; font-size: 19px; font-weight: var(--strong); }
.aside p { margin: 0; color: var(--muted); }
.aside .mail { color: var(--ink); font-size: 19px; overflow-wrap: anywhere; }

/* Podnožje: dve paralelne ravni sa linijom iznad, obe na istim ivicama sadržaja.
   Gore logo levo i slogan desno; dole branše levo i pravne stranice desno, svaka grupa sa natpisom. */
.site-footer { padding-bottom: 56px; font-size: 15px; color: var(--muted); }
.foot-brand, .foot-links { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 48px; padding-block: 36px; border-top: 1px solid var(--line); }
.site-footer .logo { display: block; width: min(300px, 100%); }
.site-footer .slogan { margin: 0; font-size: 17px; }
.site-footer nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 32px; }
.site-footer nav a { color: var(--ink); text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 5px; }
.foot-label { margin: 0; font-size: 14px; font-weight: var(--strong); letter-spacing: .16em; text-transform: uppercase; }
/* do 1099 px dve jednake kolone, natpis iznad linkova; ispod 520 px jedna kolona */
@media (max-width: 1099px) {
  .foot-brand { flex-direction: column; align-items: flex-start; }
  .foot-links { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 32px 48px; }
  .site-footer nav { flex-direction: column; align-items: flex-start; gap: 10px; }
  .foot-label { margin-bottom: 4px; }
}
@media (max-width: 519px) {
  .foot-links { grid-template-columns: 1fr; }
}

/* Pravne stranice i 404: postojeći sadržaj, čitljiva tipografija */
.legal-main { padding-block: clamp(48px, 6vw, 88px) var(--sec); }
.legal-main .container, .legal-content, .status-page .container { max-width: var(--wide); margin: 0 auto; padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); }
.eyebrow { margin: 0 0 18px; font-size: 14px; font-weight: var(--strong); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.legal-intro h1, .status-page h1 { margin: 0 0 clamp(32px, 4vw, 56px); max-width: 15em; font-size: clamp(40px, 4.5vw, 60px); font-weight: 300; letter-spacing: -0.032em; line-height: 1.05; overflow-wrap: anywhere; }
.legal-content > * { max-width: 42em; }
.legal-content h2 { margin: 40px 0 14px; font-size: clamp(24px, 2.2vw, 28px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; }
.legal-content h3 { margin: 28px 0 10px; font-size: 20px; font-weight: var(--strong); line-height: 1.25; }
.legal-content p { margin: 0; }
.legal-content p + p { margin-top: 14px; }
.legal-content ul { padding-left: 24px; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { overflow-wrap: anywhere; }
.legal-content address { font-style: normal; }
.template-note { margin-bottom: 32px; padding: 18px 22px; border-left: 4px solid var(--blue); background: #ebebfc; font-size: 16px; }
.legal-placeholder { background: #fff0ad; color: #383120; padding: 2px 4px; overflow-wrap: anywhere; }
.review-note { margin: 0; padding: 10px var(--gut); font-size: 14px; color: var(--muted); }
.status-page { padding-block: clamp(64px, 10vw, 140px); }
.status-page p:not(.eyebrow) { margin: 0 0 32px; max-width: 36em; color: var(--muted); }

@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact .in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .row, .pair, .steps, .terms, .form .two { grid-template-columns: minmax(0, 1fr); }
  .form .narrow { max-width: none; }
  .extra { grid-template-columns: minmax(0, 1fr); }
  .extra h3, .extra-price, .extra-body { grid-column: 1; }
  .price-list li { grid-template-columns: minmax(0, 1fr); }
  .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .tech li { grid-template-columns: minmax(0, 1fr); }
  .tech-price { text-align: left; }
  .tech-price:empty { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .card::before, .card p, .btn, .product h2, .product .znak { transition: none; }
}