/* Statične strane Haustora (naslovna + pravne). Isti tokeni kao aplikacija (src/styles.css): beton, zelena ograde
   kao jedini akcent, mesing samo za natpisnu pločicu. */
:root{
  --bg:#eceeed; --surface:#ffffff; --sunk:#f5f6f5; --ink:#18211f; --muted:#5a6663; --line:#d3d9d7;
  --accent:#1f5c4b; --accent-ink:#ffffff; --accent-soft:#dcebe5; --brass:#9a6a14;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --shadow:0 18px 50px rgba(16,24,22,.16);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111614; --surface:#1a211f; --sunk:#151b19; --ink:#e4eae8; --muted:#97a39f; --line:#2c3633;
  --accent:#5fb69b; --accent-ink:#0d1a16; --accent-soft:#1f3a32; --brass:#d1a14a; --shadow:0 18px 50px rgba(0,0,0,.55); color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#111614; --surface:#1a211f; --sunk:#151b19; --ink:#e4eae8; --muted:#97a39f; --line:#2c3633;
  --accent:#5fb69b; --accent-ink:#0d1a16; --accent-soft:#1f3a32; --brass:#d1a14a; --shadow:0 18px 50px rgba(0,0,0,.55); color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.12;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1160px;margin:0 auto;padding-inline:20px}
.narrow{max-width:760px}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.eyebrow{font:500 12.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.fine{font-size:13.5px;color:var(--muted)}

/* natpisna pločica */
.plate{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.plate::before{content:"";flex:none;width:32px;height:32px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Crect width='96' height='96' rx='21' fill='%231f5c4b'/%3E%3Cg transform='translate(48 48) scale(.78) translate(-48 -48)'%3E%3Cpath fill='%23f3f1e7' d='M18 16h16v24h28V16h16v64H18z'/%3E%3Cpath fill='%23d1a14a' d='M38 80V62a10 10 0 0 1 20 0v18z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.plate b{font:800 23px/1 var(--display);letter-spacing:-.03em}
.wm i{display:inline-block;width:.56em;height:.56em;box-sizing:border-box;border:.13em solid var(--brass);border-radius:50%;margin:0 .035em}

.btn{display:inline-flex;align-items:center;justify-content:center;font:600 14.5px var(--body);padding:9px 15px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.p{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.p:hover{filter:brightness(1.08)}
.btn.big{font-size:16px;padding:13px 20px}

header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding-block:10px}
header.top nav{display:flex;align-items:center;gap:22px}
header.top nav a:not(.btn){color:var(--ink);text-decoration:none;font-size:14.5px}
header.top nav a:not(.btn):hover{color:var(--accent)}

section{padding-block:76px}
section.alt{background:var(--sunk);border-block:1px solid var(--line)}
section h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;letter-spacing:-.015em;max-width:20ch}

/* hero */
.hero{padding-block:64px 56px}
.hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center}
.hero h1{font-size:clamp(40px,6vw,72px);font-weight:800;letter-spacing:-.03em;line-height:1}
.lede{font-size:19px;color:var(--muted);margin-top:20px;max-width:46ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero .fine{margin-top:16px}
.hshot{position:relative;padding-bottom:36px}
.hshot .desk{border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);width:100%;aspect-ratio:1366/640;object-fit:cover;object-position:top left}
.hshot .phone{position:absolute;right:-6px;bottom:0;width:27%;border:6px solid var(--ink);border-radius:22px;box-shadow:var(--shadow)}

/* tri stuba */
.pillars{padding-block:8px 72px}
.p3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.pillars .p3 > div{border-top:2px solid var(--accent);padding-top:16px}
.pillars .n{font:500 12.5px var(--mono);color:var(--brass);letter-spacing:.08em}
.p3 h3{font-size:20px;font-weight:700;margin:6px 0 8px}
.p3 p{color:var(--muted);font-size:15.5px}
.cards{margin-top:36px;gap:16px}
.cards > div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px}
.cards h3{font-size:17px;margin-top:0}

/* levo tekst, desno snimak */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:52px;align-items:center}
.split.rev > div{order:2}
.split figure{margin:0}
.split img{border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);width:100%;aspect-ratio:1366/660;object-fit:cover;object-position:top left}
.checks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.checks li{padding-left:28px;position:relative;color:var(--muted);font-size:15.5px}
.checks li b{color:var(--ink);font-weight:600}
.checks li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:7px;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg)}

.phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:40px}
.phones figure{margin:0;display:grid;gap:14px;align-content:start}
.phones img{border:7px solid var(--ink);border-radius:28px;box-shadow:var(--shadow)}
.phones figcaption{font-size:14.5px;color:var(--muted)}
.phones figcaption b{color:var(--ink);display:block}

.steps{list-style:none;counter-reset:s;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;color:var(--muted);font-size:15.5px}
.steps li::before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font:600 14px var(--mono);margin-bottom:12px}
.steps li b{color:var(--ink);display:block}

details{border-bottom:1px solid var(--line);padding-block:16px}
details:first-of-type{margin-top:28px;border-top:1px solid var(--line)}
summary{cursor:pointer;font:600 17px var(--display);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 22px/1 var(--mono);color:var(--accent)}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--muted)}

.final{text-align:center;padding-block:84px}
.final h2{max-width:none}
.final .cta{justify-content:center}

footer{border-top:1px solid var(--line);padding-block:44px 56px;font-size:14.5px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:32px}
footer h4{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
footer a:not(.plate){display:block;color:var(--ink);text-decoration:none;padding-block:3px}
footer a:not(.plate):hover{color:var(--accent)}
footer p{color:var(--muted);margin-top:12px;max-width:34ch}

/* pravne strane */
.legal{max-width:780px;padding-block:56px 80px}
.legal h1{font-size:clamp(32px,4.4vw,46px);font-weight:800;letter-spacing:-.02em}
.legal .lede{margin:16px 0 8px;max-width:none}
.legal h2{font-size:22px;font-weight:700;margin:38px 0 10px;scroll-margin-top:80px}
.legal p,.legal li{color:var(--ink)}
.legal p{margin-block:10px}
.legal ul,.legal ol{padding-left:22px;display:grid;gap:8px;margin-block:10px}

@media (max-width:900px){
  .hgrid,.split{grid-template-columns:1fr;gap:32px}
  .split.rev > div{order:0}
  .phones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:1fr 1fr}
  section{padding-block:56px}
}
@media (max-width:620px){
  header.top nav a:not(.btn){display:none}
  .hero{padding-block:36px 40px}
  .fgrid{grid-template-columns:1fr}
  .btn.big{width:100%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}