/* ==========================================================================
   polaganje-ploscic.si — Zupan
   Design system: porcelain surfaces, graphite ink, terracotta glaze accent.
   Motion: critically-damped springs by default, bounce only after momentum.
   ========================================================================== */

/* ---------- Fonts (self-hosted — no requests to Google = GDPR friendly) --- */
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(../fonts/manrope-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(../fonts/manrope-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(../fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:italic;font-display:swap;font-weight:400;
  src:url(../fonts/instrument-serif-latin-ext-400-italic.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-display:swap;font-weight:400;
  src:url(../fonts/instrument-serif-latin-400-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens ------------------------------------------------------ */
:root{
  color-scheme:light;
  --bg:#f6f4f0; --bg-2:#eeeae3; --bg-3:#e4dfd6; --card:#fffdf9;
  --ink:#151413; --ink-2:#55514c; --ink-3:#8a847c;
  --line:rgba(21,20,19,.10); --line-2:rgba(21,20,19,.18);
  --accent:#c4502f; --accent-2:#a8401f; --accent-soft:#f6e1d8;
  --glaze:#1e4a57; --glaze-soft:#d9e7ea;
  --dark:#0f0f10; --dark-2:#1a1a1c; --on-dark:#f3f1ec; --on-dark-2:#a8a39b;
  --ok:#2f7d4f; --err:#c0392b;
  --r-s:10px; --r:18px; --r-l:28px; --r-xl:40px;
  --shadow-s:0 1px 2px rgba(20,16,10,.06),0 2px 8px rgba(20,16,10,.05);
  --shadow:0 2px 6px rgba(20,16,10,.05),0 12px 32px rgba(20,16,10,.08);
  --shadow-l:0 4px 12px rgba(20,16,10,.06),0 30px 80px rgba(20,16,10,.16);
  --maxw:1240px; --gutter:clamp(16px,4vw,40px);
  /* Apple-style curves */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  /* Spring (damping 1.0, response ~0.4s) sampled into linear() */
  --spring:linear(0,0.001 0.5%,0.0084 1.5%,0.0285 2.8%,0.0648 4.4%,0.1182 6.4%,0.1869 8.5%,0.2674 10.9%,0.3549 13.5%,0.4447 16.3%,0.5325 19.3%,0.6148 22.4%,0.6891 25.8%,0.7541 29.3%,0.8092 33%,0.8547 36.8%,0.8914 40.8%,0.9202 45%,0.9423 49.3%,0.959 53.8%,0.9713 58.4%,0.9803 63.1%,0.9866 68%,0.991 73%,0.9941 78.1%,0.9962 83.4%,0.9975 88.8%,0.9984 94.3%,1);
  /* Spring with light bounce (damping .8) — only after momentum */
  --spring-bounce:linear(0,0.0012 0.5%,0.0104 1.5%,0.0357 2.8%,0.0824 4.4%,0.1526 6.4%,0.2444 8.5%,0.3529 10.9%,0.4709 13.5%,0.5905 16.3%,0.7037 19.3%,0.804 22.4%,0.8871 25.8%,0.9508 29.3%,0.9953 33%,1.0224 36.8%,1.0355 40.8%,1.0383 45%,1.0345 49.3%,1.0274 53.8%,1.0194 58.4%,1.012 63.1%,1.0063 68%,1.0023 73%,0.9999 78.1%,0.9988 83.4%,0.9985 88.8%,0.9987 94.3%,1);
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Bricolage Grotesque","Manrope",system-ui,sans-serif;
  --serif:"Instrument Serif",ui-serif,Georgia,serif;
  --header-h:80px;
}

/* ---------- Reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:650;letter-spacing:-.022em;line-height:1.1;text-wrap:balance}
.display,.h1,.h2,.h3,.foot-big,.stat b,.calc-big,.nf .big,.marquee span,.scrub,.logo,.pstep h3{font-family:var(--display)}
p{margin:0 0 1em;text-wrap:pretty}
ul,ol{margin:0;padding:0}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;transition:top .2s}
.skip:focus{top:12px}

/* ---------- Layout ------------------------------------------------------ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:820px}
.section{padding-block:clamp(72px,11vw,150px)}
.section-s{padding-block:clamp(48px,7vw,90px)}
.dark{background:var(--dark);color:var(--on-dark)}
.dark .muted{color:var(--on-dark-2)}
.tint{background:var(--bg-2)}
.muted{color:var(--ink-2)}
.center{text-align:center}
.grid{display:grid;gap:clamp(14px,2vw,24px)}
.stack>*+*{margin-top:var(--s,1rem)}

/* ---------- Type -------------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:10px;height:10px;border-radius:2px;background:currentColor;transform:rotate(45deg) scale(.8)}
.dark .eyebrow{color:#f08a6a}
.display{font-size:clamp(2.5rem,5.9vw,5.3rem);line-height:.98;letter-spacing:-.045em;font-weight:680}
.h1{font-size:clamp(2.3rem,5.6vw,4.6rem);line-height:1.02;letter-spacing:-.04em;font-weight:670}
.h2{font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.05;letter-spacing:-.035em}
.h3{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.02em;line-height:1.2}
.lead{font-size:clamp(1.12rem,1.6vw,1.35rem);line-height:1.5;color:var(--ink-2);letter-spacing:-.008em;max-width:62ch}
.dark .lead{color:var(--on-dark-2)}
em,.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.display em,.h1 em,.h2 em,.scrub em{font-size:1.06em;letter-spacing:-.015em}
.display em,.h1 em,.h2 em{font-weight:400;color:var(--accent)}
.dark .h2 em,.dark .display em{color:#f08a6a}
.small{font-size:.875rem}
.prose{font-size:1.0938rem;line-height:1.72;color:#2b2926}
.prose h2{font-size:clamp(1.55rem,2.6vw,2.1rem);margin:2.2em 0 .6em;letter-spacing:-.03em}
.prose h3{font-size:1.25rem;margin:1.8em 0 .5em}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1.2em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--accent-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose strong{font-weight:620;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.prose th{font-weight:600;background:var(--bg-2)}
.prose blockquote{margin:1.6em 0;padding:18px 22px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 12px 12px 0}

/* ---------- Buttons ----------------------------------------------------- */
.btn{--bg-b:var(--ink);--fg-b:#fff;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding:0 24px;border-radius:999px;background:var(--bg-b);color:var(--fg-b);font-weight:560;font-size:1rem;letter-spacing:-.01em;
  white-space:nowrap;isolation:isolate;overflow:hidden;
  transition:transform .5s var(--spring),background-color .25s,box-shadow .3s;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 20px rgba(0,0,0,.12)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120px circle at var(--bx,50%) var(--by,50%),rgba(255,255,255,.28),transparent 60%);opacity:0;transition:opacity .3s}
.btn:hover::after{opacity:1}
.btn:active{transform:scale(.965);transition-duration:.1s}
.btn svg{width:18px;height:18px;transition:transform .45s var(--spring)}
.btn:hover svg{transform:translateX(3px)}
.btn-accent{--bg-b:var(--accent)}
.btn-accent:hover{--bg-b:var(--accent-2)}
.btn-ghost{--bg-b:transparent;--fg-b:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-ghost:hover{--bg-b:rgba(21,20,19,.05)}
.dark .btn-ghost{--fg-b:var(--on-dark);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.dark .btn-ghost:hover{--bg-b:rgba(255,255,255,.07)}
.btn-light{--bg-b:#fff;--fg-b:var(--ink)}
.btn-s{height:42px;padding:0 18px;font-size:.9375rem}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:560;color:var(--accent-2)}
.link-arrow svg{width:16px;height:16px;transition:transform .45s var(--spring)}
.link-arrow:hover svg{transform:translateX(4px)}
.dark .link-arrow{color:#f08a6a}

/* ---------- Header / glass navigation ---------------------------------- */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:120;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--sp,0));pointer-events:none}
.header{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);view-transition-name:site-header;
  transition:background-color .35s,box-shadow .35s,backdrop-filter .35s,transform .45s var(--ease-out)}
.header.scrolled{background:rgba(18,17,16,.55);backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);box-shadow:0 1px 0 rgba(255,255,255,.08);color:var(--on-dark)}
.header.scrolled .nav-link:hover,.header.scrolled .nav-link[aria-expanded="true"]{background:rgba(255,255,255,.12)}
.menu-open .header{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
.header.on-dark:not(.scrolled){color:var(--on-dark)}
.header .wrap{height:100%;display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:11px;font-weight:680;letter-spacing:-.03em;font-size:1.1rem;flex:none}
.logo-mark{width:34px;height:34px;flex:none}
.logo-mark rect{transition:transform .6s var(--spring);transform-box:fill-box;transform-origin:center}
.logo:hover .logo-mark rect:nth-child(4){transform:rotate(45deg) scale(.82)}
.logo:hover .logo-mark rect:nth-child(1){transform:translate(-1px,-1px)}
.logo small{display:block;font-size:.7rem;font-weight:500;letter-spacing:.02em;opacity:.62;margin-top:-2px}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav-link{position:relative;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;font-size:.9375rem;font-weight:500;letter-spacing:-.01em;transition:background-color .2s}
.nav-link:hover,.nav-link[aria-expanded="true"]{background:rgba(21,20,19,.06)}
.header.on-dark:not(.scrolled) .nav-link:hover{background:rgba(255,255,255,.1)}
.nav-link[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;border-radius:1px;background:var(--accent);transform:translateX(-50%) rotate(45deg)}
.nav-link .chev{width:12px;height:12px;transition:transform .4s var(--spring)}
.nav-link[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-cta{margin-left:10px}
.nav-phone{display:inline-flex;align-items:center;gap:8px;font-weight:560;font-size:.9375rem;padding:0 10px;height:40px}
.nav-phone svg{width:16px;height:16px}
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:12px;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:1.75px;border-radius:2px;background:currentColor;transition:transform .5s var(--spring),opacity .2s}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:25px}
.menu-open .burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-open .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* Mega menu — originates from its trigger */
.mega{position:absolute;top:calc(var(--header-h) - 6px);left:50%;width:min(980px,calc(100vw - 32px));translate:-50% 0;
  background:rgba(255,253,249,.97);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);border-radius:var(--r-l);box-shadow:var(--shadow-l);padding:14px;
  transform-origin:var(--ox,50%) 0;opacity:0;transform:scale(.96) translateY(-6px);filter:blur(6px);pointer-events:none;
  transition:opacity .22s var(--ease-out),transform .45s var(--spring),filter .3s var(--ease-out);color:var(--ink)}
.mega.open{opacity:1;transform:none;filter:none;pointer-events:auto}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.mega-grid a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;font-size:.9375rem;font-weight:520;letter-spacing:-.01em;transition:background-color .18s}
.mega-grid a:hover{background:rgba(21,20,19,.05)}
.mega-grid a img{width:40px;height:40px;border-radius:10px;flex:none;box-shadow:0 0 0 1px var(--line)}
.mega-grid a small{display:block;font-weight:400;color:var(--ink-3);font-size:.78rem}
.mega-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;padding:14px 16px;border-radius:16px;background:var(--bg-2);font-size:.9rem}

/* Mobile sheet */
.sheet{position:fixed;inset:0;z-index:99;background:rgba(246,244,240,.94);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  padding:calc(var(--header-h) + 12px) var(--gutter) 32px;overflow:auto;opacity:0;visibility:hidden;transition:opacity .3s var(--ease-out),visibility 0s .3s;color:var(--ink)}
.menu-open .sheet{opacity:1;visibility:visible;transition:opacity .3s var(--ease-out)}
.sheet a{display:block}
.sheet .s-main a{font-size:2rem;font-weight:640;letter-spacing:-.035em;padding:6px 0}
.sheet .s-sub{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;margin:10px 0 24px}
.sheet .s-sub a{font-size:.95rem;color:var(--ink-2);padding:7px 0;border-bottom:1px solid var(--line)}
.sheet .reveal-m{opacity:0;transform:translateY(18px)}
.menu-open .sheet .reveal-m{opacity:1;transform:none;transition:opacity .4s var(--ease-out) calc(var(--i)*35ms + 60ms),transform .6s var(--spring) calc(var(--i)*35ms + 60ms)}
.menu-open{overflow:hidden}
.menu-open .header{color:var(--ink)!important}

/* Real logo */
.logo-img{height:70px;width:auto;flex:none;transition:height .35s var(--ease-out)}
.header.scrolled .logo-img{height:58px}
@media (max-width:860px){.logo-img,.header.scrolled .logo-img{height:52px}}
.logo-tag{display:block;padding-left:12px;border-left:1px solid var(--line-2);font-size:.66rem;line-height:1.25;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.footer .logo-tag{color:var(--on-dark-2);border-color:rgba(255,255,255,.2)}
.footer .logo-img{height:72px}
@media (max-width:420px){.logo-tag{display:none}}

/* Mobile action bar */
.actionbar{display:none}

/* ---------- Reveal system (materialize: blur + lift + fade) ------------- */
.rv{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity .9s var(--ease-out),transform 1.1s var(--spring),filter .9s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.rv.in{opacity:1;transform:none;filter:none}
.rv-scale{opacity:0;transform:scale(.94);transition:opacity .9s var(--ease-out),transform 1.2s var(--spring);transition-delay:calc(var(--i,0) * 70ms)}
.rv-scale.in{opacity:1;transform:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--spring);transition-delay:calc(var(--i) * 45ms + var(--d,0ms))}
.split.in .w>span{transform:none}
/* Scroll-scrubbed statement */
.scrub{font-size:clamp(1.7rem,3.8vw,3.1rem);line-height:1.18;letter-spacing:-.035em;font-weight:620}
.scrub .sw{opacity:.16;transition:opacity .25s linear}
.scrub .sw.on{opacity:1}
.scrub em{color:var(--accent)}

/* ---------- Hero -------------------------------------------------------- */
.hero{position:relative;min-height:min(100svh,980px);display:flex;align-items:center;padding-top:calc(var(--header-h) + 40px);padding-bottom:60px;overflow:hidden;isolation:isolate}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;width:100%}
.hero h1{margin:18px 0 24px}
.hero .lead{margin-bottom:34px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-meta{display:flex;flex-wrap:wrap;gap:22px;margin-top:40px;font-size:.9rem;color:var(--ink-2)}
.hero-meta span{display:inline-flex;align-items:center;gap:8px}
.hero-meta svg{width:18px;height:18px;color:var(--accent)}
.hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70vw;height:70vw;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(196,80,47,.13),transparent 70%);filter:blur(10px)}
.hero::after{content:"";position:absolute;inset:auto auto -30% -20%;width:60vw;height:60vw;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(30,74,87,.10),transparent 70%)}

/* Full-width photo hero */
.hero-photo{min-height:100svh;align-items:flex-end;padding-bottom:clamp(64px,10vh,120px);background:#111}
.hero-photo::before,.hero-photo::after{display:none}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:translate3d(0,var(--hy,0px),0) scale(1.06);animation:heroIn 2.4s var(--ease-out) both;will-change:transform}
@keyframes heroIn{from{opacity:0;scale:1.08}to{opacity:1;scale:1}}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,11,10,.78) 0%,rgba(12,11,10,.55) 40%,rgba(12,11,10,.12) 75%),linear-gradient(0deg,rgba(12,11,10,.55) 0%,transparent 45%),linear-gradient(180deg,rgba(12,11,10,.45) 0%,transparent 22%)}
.hero-copy{max-width:760px}
.hero-photo .lead{color:rgba(255,255,255,.86)}
.hero-photo .hero-meta{color:rgba(255,255,255,.8)}
.hero-photo .hero-meta svg{color:#f08a6a}
.hero-scroll{position:absolute;left:50%;bottom:26px;width:26px;height:42px;translate:-50% 0;border-radius:14px;border:1.5px solid rgba(255,255,255,.55)}
.hero-scroll span{position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:2px;background:#fff;translate:-50% 0;animation:scrollDot 1.8s var(--ease-in-out) infinite}
@keyframes scrollDot{0%{opacity:0;transform:translateY(-2px)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
.header.on-dark:not(.scrolled) .nav-phone{color:#fff}
@media (max-width:860px){.hero-photo{min-height:92svh}.hero-shade{background:linear-gradient(0deg,rgba(12,11,10,.85) 0%,rgba(12,11,10,.55) 55%,rgba(12,11,10,.35) 100%)}.hero-scroll{display:none}}

/* 3D tile floor — tiles are laid one by one, then lift toward the pointer */
.floor-stage{position:relative;aspect-ratio:1/1;perspective:1400px;perspective-origin:50% 20%;touch-action:pan-y}
.floor{position:absolute;inset:6% 4%;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gap,5px);
  transform:rotateX(56deg) rotateZ(-38deg) scale(.94);transform-style:preserve-3d;
  transition:transform 1.6s var(--spring)}
.floor-stage.tilt .floor{transform:rotateX(calc(56deg + var(--ry,0deg))) rotateZ(calc(-38deg + var(--rx,0deg))) scale(.94)}
.tile{position:relative;aspect-ratio:1;border-radius:3px;transform-style:preserve-3d;
  background:linear-gradient(135deg,var(--c1,#fbf8f3),var(--c2,#e9e3d9));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 1px 0 rgba(0,0,0,.08);
  transform:translateZ(var(--z,0px));will-change:transform;opacity:0}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);background-size:250% 250%;background-position:var(--sheen,100%) 0;mix-blend-mode:soft-light}
.tile.laid{opacity:1}
.tile.a{--c1:#e7795a;--c2:#c4502f}
.tile.g{--c1:#3d7282;--c2:#1e4a57}
.tile.s{--c1:#efe9df;--c2:#d9d0c2}
.floor-shadow{position:absolute;inset:18% 8% 4%;background:radial-gradient(closest-side,rgba(40,25,10,.22),transparent);filter:blur(30px);transform:translateY(12%) scaleY(.5);z-index:-1}
.trowel{position:absolute;width:74px;height:74px;right:8%;bottom:16%;filter:drop-shadow(0 16px 20px rgba(0,0,0,.2));animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px) rotate(-4deg)}}
.chip-float{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;background:rgba(255,253,249,.75);
  backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.7);font-size:.85rem;font-weight:560;
  animation:bob 6s ease-in-out infinite;color:var(--ink)}
.chip-float i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-style:normal}
.chip-float i svg{width:18px;height:18px}
.chip-float small{display:block;font-weight:450;color:var(--ink-3);font-size:.75rem}
.chip-1{left:0;top:12%;animation-delay:-2s}
.chip-2{right:0;top:52%;animation-delay:-4s}

/* ---------- Photo reel (scroll-linked horizontal) ------------------------ */
.reel{position:relative}
.reel-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,4vh,44px);overflow:hidden;padding-top:var(--header-h)}
.reel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px}
.reel-head .h2{margin-top:12px}
.reel-track{display:flex;gap:18px;align-items:flex-end;width:max-content;padding-inline:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));will-change:transform}
.reel-item{margin:0;flex:none;width:min(38vw,560px,64vh)}
.reel-item.tall{width:min(24vw,360px,40vh)}
.reel-img{position:relative;overflow:hidden;border-radius:var(--r-l);aspect-ratio:4/3;background:#222;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.reel-item.tall .reel-img{aspect-ratio:3/4}
.reel-img img{position:absolute;top:0;left:-6%;width:112%;max-width:none;height:100%;object-fit:cover;transform:translate3d(var(--px,0px),0,0) scale(1.02)}
.reel-item figcaption{margin-top:12px;font-size:.88rem;line-height:1.45;color:var(--on-dark-2);max-width:40ch}
.reel-item figcaption span{display:block;color:#f08a6a;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-bottom:4px}
.reel-bar{width:calc(min(100vw, var(--maxw)) - 2 * var(--gutter));margin:0 auto;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.reel-bar span{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--rp,0))}
.reel.native{height:auto!important}
.reel.native .reel-sticky{position:relative;height:auto;padding-block:clamp(64px,10vw,110px)}
.reel.native .reel-track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;transform:none!important;padding-bottom:6px}
.reel.native .reel-track::-webkit-scrollbar{display:none}
.reel.native .reel-item{scroll-snap-align:center;width:78vw}
.reel.native .reel-item.tall{width:58vw}
.reel.native .reel-bar{display:none}
.phero-art.is-photo{aspect-ratio:4/5}
.pfig{margin:2.2em 0;border-radius:var(--r-l);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.pfig img{width:100%;height:auto}
.pfig.tall{float:right;width:44%;margin:.4em 0 1.4em 1.8em}
.prose #potek,.prose #vprasanja,.prose #nasveti{clear:both}
@media (max-width:640px){.pfig.tall{float:none;width:100%;margin:1.6em 0}.pfig.tall img{max-height:70vh;object-fit:cover}}
.pfig figcaption{padding:12px 16px;font-size:.85rem;color:var(--ink-3)}

/* ---------- Marquee ----------------------------------------------------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:22px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;width:max-content;gap:48px;animation:marq 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:48px;font-size:clamp(1.3rem,2.6vw,2rem);font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.marquee span::after{content:"";width:12px;height:12px;background:var(--accent);border-radius:2px;transform:rotate(45deg)}
.marquee span:nth-child(even){font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink-2)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Section heads ---------------------------------------------- */
.shead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(36px,5vw,64px)}
.shead .h2{margin-top:14px;max-width:18ch}
.shead p{max-width:46ch;margin:0}

/* ---------- Service cards (bento) -------------------------------------- */
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,20px)}
.svc{--mx:50%;--my:50%;position:relative;grid-column:span 4;display:flex;flex-direction:column;min-height:340px;border-radius:var(--r-l);background:var(--card);
  overflow:hidden;isolation:isolate;box-shadow:var(--shadow-s),inset 0 0 0 1px var(--line);transform-style:preserve-3d;
  transition:transform .6s var(--spring),box-shadow .4s}
.svc:hover{box-shadow:var(--shadow-l),inset 0 0 0 1px var(--line)}
.svc.wide{grid-column:span 8}
.svc.tall{grid-row:span 2}
.svc-art{position:relative;flex:1;min-height:180px;overflow:hidden}
.svc-art svg,.svc-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--spring)}
.svc:hover .svc-art svg,.svc:hover .svc-art img{transform:scale(1.06) rotate(-1deg)}
.svc-body{position:relative;padding:22px 24px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;background:var(--card)}
.svc h3{font-size:1.28rem;letter-spacing:-.025em}
.svc p{margin:6px 0 0;font-size:.92rem;color:var(--ink-2);line-height:1.45}
.svc .go{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);transition:background-color .3s,color .3s,transform .6s var(--spring)}
.svc .go svg{width:18px;height:18px}
.svc:hover .go{background:var(--accent);color:#fff;transform:rotate(-45deg)}
.svc::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.35),transparent 45%);opacity:0;transition:opacity .4s;mix-blend-mode:soft-light}
.svc:hover::after{opacity:1}
.svc .num{position:absolute;top:16px;left:18px;z-index:3;font-size:.75rem;font-weight:600;letter-spacing:.06em;padding:5px 9px;border-radius:999px;background:rgba(255,253,249,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* Pattern tiles animate in (laid) when their SVG enters view */
.pat .t{opacity:0;transform:translateY(-8px) scale(.9);transform-box:fill-box;transform-origin:center;
  transition:opacity .5s var(--ease-out),transform .9s var(--spring);transition-delay:calc(var(--i) * 12ms)}
.pat.in .t{opacity:1;transform:none}
.pat .wave{animation:wave 6s ease-in-out infinite}
@keyframes wave{50%{transform:translateX(-18px)}}

/* ---------- Before / After --------------------------------------------- */
.ba{--pos:50%;position:relative;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-l);user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize;background:#999}
.ba>svg,.ba>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--pos))}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;translate:-1px 0;box-shadow:0 0 20px rgba(0,0,0,.3)}
.ba-knob{position:absolute;top:50%;left:50%;width:58px;height:58px;translate:-50% -50%;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 30px rgba(0,0,0,.25);color:var(--ink);transition:transform .45s var(--spring)}
.ba.dragging .ba-knob{transform:scale(1.12)}
.ba-knob svg{width:26px;height:26px}
.ba-label{position:absolute;top:20px;padding:7px 13px;border-radius:999px;font-size:.8rem;font-weight:600;background:rgba(15,15,16,.55);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ba-label.l{left:20px}.ba-label.r{right:20px}

/* ---------- Process (sticky scrollytelling) ---------------------------- */
.proc{position:relative}
.proc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,90px)}
.proc-visual{position:sticky;top:calc(var(--header-h) + 5vh);height:min(78vh,640px);display:grid;place-items:center}
.proc-canvas{position:relative;width:min(100%,520px);aspect-ratio:1;border-radius:var(--r-xl);background:var(--dark-2);overflow:hidden;box-shadow:var(--shadow-l)}
.proc-canvas svg{position:absolute;inset:0;width:100%;height:100%}
.proc-badge{position:absolute;left:18px;bottom:18px;padding:9px 14px;border-radius:14px;background:rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font-size:.85rem;font-weight:560}
.proc-steps{padding-block:6vh 8vh}
.pstep{min-height:52vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .5s var(--ease-out)}
.pstep.active{opacity:1}
.pstep .n{font-family:var(--serif);font-style:italic;font-size:3.2rem;line-height:1;color:#f08a6a}
.pstep h3{font-size:clamp(1.5rem,2.6vw,2.2rem);margin:12px 0 12px;letter-spacing:-.03em}
.pstep p{color:var(--on-dark-2);max-width:44ch;font-size:1.05rem}

/* ---------- Feature grid ------------------------------------------------ */
.feat-grid{grid-template-columns:repeat(3,1fr)}
.feat{padding:30px 28px;border-radius:var(--r-l);background:var(--card);box-shadow:var(--shadow-s),inset 0 0 0 1px var(--line);transition:transform .6s var(--spring),box-shadow .4s}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.feat .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:22px}
.feat .ic svg{width:24px;height:24px}
.feat h3{font-size:1.18rem;margin-bottom:8px;letter-spacing:-.02em}
.feat p{margin:0;color:var(--ink-2);font-size:.97rem}

/* ---------- Stats ------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:var(--r-l);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.stat{background:var(--bg);padding:30px 26px}
.stat b{display:block;font-size:clamp(2.2rem,4vw,3.3rem);font-weight:660;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:10px;color:var(--ink-2);font-size:.93rem}

/* ---------- Calculator -------------------------------------------------- */
.calc{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border-radius:var(--r-xl);overflow:hidden;background:var(--card);box-shadow:var(--shadow-l)}
.calc-form{padding:clamp(24px,4vw,48px)}
.calc-out{padding:clamp(24px,4vw,48px);background:var(--dark);color:var(--on-dark);display:flex;flex-direction:column;justify-content:space-between;gap:28px;position:relative;overflow:hidden}
.calc-out::before{content:"";position:absolute;inset:auto -30% -40% auto;width:90%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(196,80,47,.35),transparent);filter:blur(20px)}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calc-big{font-size:clamp(3rem,7vw,5.2rem);font-weight:680;letter-spacing:-.05em;line-height:.95;font-variant-numeric:tabular-nums}
.calc-big small{font-size:.35em;font-weight:500;letter-spacing:-.01em;color:var(--on-dark-2);margin-left:6px}
.calc-lines{display:grid;gap:10px;position:relative}
.calc-lines div{display:flex;justify-content:space-between;gap:14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1);font-size:.95rem}
.calc-lines b{font-variant-numeric:tabular-nums;font-weight:600}
.seg{display:flex;flex-wrap:wrap;gap:6px;padding:5px;border-radius:14px;background:var(--bg-2)}
.seg label{flex:1;min-width:max-content}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;text-align:center;padding:9px 12px;border-radius:10px;font-size:.88rem;font-weight:540;cursor:pointer;transition:background-color .25s,box-shadow .25s,color .2s;color:var(--ink-2)}
.seg input:checked+span{background:#fff;color:var(--ink);box-shadow:var(--shadow-s)}
.seg input:focus-visible+span{outline:2px solid var(--accent)}

/* ---------- Forms ------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;position:relative}
.field label,.flabel{font-size:.85rem;font-weight:580;color:var(--ink-2);letter-spacing:-.005em}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:14px 16px;border-radius:14px;border:1px solid var(--line-2);background:#fff;
  font-size:1rem;transition:border-color .2s,box-shadow .25s;appearance:none;-webkit-appearance:none}
.field textarea{min-height:140px;resize:vertical;line-height:1.5}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355514c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:42px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(21,20,19,.32)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(196,80,47,.15)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--err);box-shadow:0 0 0 4px rgba(192,57,43,.12)}
.field .err{font-size:.8rem;color:var(--err);min-height:0;overflow:hidden;max-height:0;transition:max-height .3s var(--ease-out)}
.field.invalid .err{max-height:40px}
.field.shake{animation:shake .45s var(--ease-out)}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--ink-2);line-height:1.5;cursor:pointer;margin:6px 0 18px}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line-2);background:#fff;margin:1px 0 0;display:grid;place-items:center;transition:background-color .2s,border-color .2s}
.check input::after{content:"";width:11px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) scale(0);margin-top:-3px;transition:transform .35s var(--spring-bounce)}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{transform:rotate(-45deg) scale(1)}
.check a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.check.invalid input{border-color:var(--err);box-shadow:0 0 0 4px rgba(192,57,43,.12)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px;border:1.5px dashed var(--line-2);border-radius:16px;background:var(--bg);text-align:center;font-size:.9rem;color:var(--ink-2);cursor:pointer;transition:border-color .2s,background-color .2s}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop svg{width:26px;height:26px;color:var(--accent)}
.files{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.files span{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;border-radius:10px;background:var(--bg-2);font-size:.8rem;animation:pop .5s var(--spring-bounce)}
.files img{width:30px;height:30px;border-radius:6px;object-fit:cover}
@keyframes pop{from{transform:scale(.8);opacity:0}}
.form-note{font-size:.78rem;color:var(--ink-3);margin-top:14px;line-height:1.5}
.form-note a{text-decoration:underline}
.grecaptcha-badge{visibility:hidden!important}
.form-status{display:none;margin-top:16px;padding:14px 16px;border-radius:14px;font-size:.93rem}
.form-status.err{display:block;background:#fbe9e6;color:#8f2a1f}
.btn[data-loading]{pointer-events:none}
.btn[data-loading] .lbl{opacity:0}
.btn .spin{position:absolute;width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;opacity:0;animation:rot .8s linear infinite}
.btn[data-loading] .spin{opacity:1}
@keyframes rot{to{transform:rotate(360deg)}}
.success{display:none;text-align:center;padding:40px 10px}
.success.show{display:block;animation:pop .7s var(--spring-bounce)}
.success svg{width:84px;height:84px;margin:0 auto 18px}
.success circle{stroke-dasharray:190;stroke-dashoffset:190;animation:draw .8s var(--ease-out) forwards}
.success path{stroke-dasharray:50;stroke-dashoffset:50;animation:draw .5s var(--ease-out) .55s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- Contact layout --------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(24px,5vw,72px);align-items:start}
.contact-card{padding:clamp(24px,4vw,44px);border-radius:var(--r-xl);background:var(--card);box-shadow:var(--shadow-l)}
.cinfo{display:grid;gap:12px;margin-top:30px}
.cinfo a,.cinfo div{display:flex;gap:16px;align-items:center;padding:16px 18px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:transform .5s var(--spring),box-shadow .3s}
.cinfo a:hover{transform:translateY(-2px);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.cinfo i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.cinfo i svg{width:20px;height:20px}
.cinfo small{display:block;color:var(--ink-3);font-size:.8rem}
.cinfo b{font-weight:600;letter-spacing:-.01em}
.map-gate{position:relative;aspect-ratio:16/10;border-radius:var(--r-l);overflow:hidden;background:var(--bg-3);display:grid;place-items:center;text-align:center;padding:24px;margin-top:22px}
.map-gate iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-gate p{font-size:.88rem;color:var(--ink-2);max-width:36ch;margin:10px auto 16px}

/* ---------- Page hero (inner pages) ------------------------------------ */
.phero{position:relative;padding:calc(var(--header-h) + clamp(40px,7vw,90px)) 0 clamp(40px,6vw,80px);overflow:hidden;isolation:isolate}
.phero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);align-items:center}
.phero h1{margin:16px 0 20px}
.phero .lead{margin-bottom:30px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:.84rem;color:var(--ink-3);margin-bottom:20px}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{opacity:.5}
.phero-art{position:relative;aspect-ratio:1/1;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-l);transform:perspective(1200px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));transition:transform .8s var(--spring);will-change:transform}
.phero-art svg,.phero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero-art::after{content:"";position:absolute;inset:0;background:radial-gradient(500px circle at var(--mx,30%) var(--my,20%),rgba(255,255,255,.35),transparent 50%);mix-blend-mode:soft-light;pointer-events:none}
.phero-art .tag{position:absolute;left:16px;bottom:16px;z-index:2;padding:9px 14px;border-radius:14px;background:rgba(255,253,249,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:.82rem;font-weight:580}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chips span{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:.86rem;font-weight:520}
.chips svg{width:15px;height:15px;color:var(--ok)}

/* ---------- Article / service body ------------------------------------- */
.body-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.toc{position:sticky;top:calc(var(--header-h) + 30px);font-size:.88rem}
.toc b{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.toc a:not(.btn){display:block;padding:7px 0 7px 14px;border-left:2px solid var(--line);color:var(--ink-2);transition:color .2s,border-color .3s}
.toc a:not(.btn):hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-color:var(--accent);font-weight:560}
.toc .btn{margin-top:22px;width:100%;color:#fff}
.prose .incl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:1.2em 0 2em;padding:0;list-style:none}
.incl li{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);margin:0;font-size:.97rem;line-height:1.45}
.incl li::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/13px no-repeat}
.prose .steps{list-style:none;padding:0;margin:1.4em 0 2em;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;left:19px;top:10px;bottom:10px;width:2px;background:var(--line)}
.steps::after{content:"";position:absolute;left:19px;top:10px;width:2px;height:calc(var(--sp2,0) * (100% - 20px));background:var(--accent);transition:height .2s linear}
.steps li{position:relative;padding:0 0 22px 60px;margin:0;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:0;top:-4px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);font-weight:640;font-size:.95rem;z-index:1;transition:background-color .4s,color .4s,box-shadow .4s}
.steps li.on::before{background:var(--accent);color:#fff;box-shadow:none}
.steps li b{display:block;font-size:1.06rem;letter-spacing:-.015em;margin-bottom:2px;color:var(--ink)}
.tips{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.2em 0 2em}
.tip{padding:22px;border-radius:18px;background:var(--glaze);color:#eaf2f3}
.tip b{display:block;color:#fff;margin-bottom:6px;font-size:1.02rem}
.tip p{margin:0;font-size:.93rem;line-height:1.55;color:#c7dadd}

/* ---------- FAQ -------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px;cursor:pointer;font-size:1.1rem;font-weight:580;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:32px;height:32px;border-radius:50%;background:var(--bg-2);position:relative;transition:background-color .3s,transform .5s var(--spring)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.75px;background:currentColor;border-radius:2px;translate:-50% -50%;transition:transform .5s var(--spring)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i{background:var(--accent);color:#fff;transform:rotate(180deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq .ans{overflow:hidden}
.faq .ans>div{padding:0 50px 24px 2px;color:var(--ink-2);line-height:1.65}

/* ---------- Related (drag carousel with momentum) ---------------------- */
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--gutter) 30px;margin-inline:calc(var(--gutter) * -1);scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.rail.drag a{pointer-events:none}
.rail>*{scroll-snap-align:start;flex:0 0 min(78vw,320px)}
.rail .svc{min-height:300px}
.rail-nav{display:flex;gap:8px}
.rail-nav button{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:background-color .2s,transform .4s var(--spring)}
.rail-nav button:hover{background:rgba(21,20,19,.05)}
.rail-nav button:active{transform:scale(.92)}
.rail-nav svg{width:18px;height:18px}

/* ---------- CTA band --------------------------------------------------- */
.cta{position:relative;border-radius:var(--r-xl);padding:clamp(40px,7vw,96px) clamp(24px,5vw,72px);background:var(--dark);color:var(--on-dark);overflow:hidden;isolation:isolate}
.cta .h2{max-width:16ch}
.cta p{max-width:48ch;margin:20px 0 32px}
.cta-art{position:absolute;right:-8%;top:50%;width:min(46%,540px);aspect-ratio:1;translate:0 -50%;z-index:-1;opacity:.85;transform:rotate(-12deg);-webkit-mask:linear-gradient(100deg,transparent 8%,#000 55%);mask:linear-gradient(100deg,transparent 8%,#000 55%)}
.cta>*:not(.cta-art){max-width:620px}
.cta-art img{width:100%;height:100%}
.cta::before{content:"";position:absolute;inset:auto auto -50% -10%;width:60%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(196,80,47,.35),transparent);z-index:-1}
.cta .btns{display:flex;flex-wrap:wrap;gap:12px}

/* Illustrative photo labels */
.illu{position:absolute;right:14px;top:14px;z-index:3;padding:5px 10px;border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.02em;color:#fff;background:rgba(15,15,16,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-illu{top:auto;bottom:22px;right:var(--gutter)}
.photo-note{margin:12px 0 0;font-size:.85rem;color:var(--on-dark-2)}
.notice{display:flex;gap:12px;align-items:flex-start;max-width:70ch;margin-top:22px;padding:16px 18px;border-radius:16px;background:var(--accent-soft);color:#6e2a16;font-size:.95rem;line-height:1.5}
.notice svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--accent)}
.pfig figcaption b{color:var(--ink-2)}

/* CTA with photo */
.cta-photo{position:absolute;inset:0 0 0 38%;z-index:-1;-webkit-mask:linear-gradient(90deg,transparent 0%,#000 55%);mask:linear-gradient(90deg,transparent 0%,#000 55%)}
.cta-photo img{width:100%;height:100%;object-fit:cover;opacity:.75}
figure.phero-art{margin:0}
.phero-art .credit{position:absolute;right:14px;top:12px;z-index:2;font-size:.68rem;color:rgba(255,255,255,.85);text-shadow:0 1px 4px rgba(0,0,0,.6)}
.phero-art .credit a{text-decoration:underline;text-underline-offset:2px}
.mega-grid a img{object-fit:cover}

/* ---------- Areas ------------------------------------------------------ */
.areas{display:flex;flex-wrap:wrap;gap:10px}
.areas span{padding:10px 16px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-weight:520;font-size:.95rem;transition:transform .5s var(--spring),background-color .3s,color .3s}
.areas span:hover{transform:translateY(-3px) rotate(-2deg);background:var(--ink);color:#fff}

/* ---------- Gallery ---------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.filters button{padding:10px 16px;border-radius:999px;font-size:.9rem;font-weight:540;box-shadow:inset 0 0 0 1px var(--line-2);transition:background-color .25s,color .25s,transform .4s var(--spring)}
.filters button:active{transform:scale(.95)}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.gal{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:260px;gap:14px}
.gal figure{position:relative;margin:0;border-radius:var(--r);overflow:hidden;cursor:zoom-in;background:var(--bg-3)}
.gal figure.gw{grid-column:span 2}.gal figure.gh{grid-row:span 2}
.gal figure>svg,.gal figure>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--spring)}
.gal figure:hover>svg,.gal figure:hover>img{transform:scale(1.05)}
.gal figcaption{position:absolute;left:12px;bottom:12px;right:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:rgba(255,253,249,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:.85rem;font-weight:580;transform:translateY(8px);opacity:0;transition:opacity .3s,transform .5s var(--spring)}
.gal figure:hover figcaption,.gal figure:focus-visible figcaption{opacity:1;transform:none}
.gal figcaption svg{width:16px;height:16px;flex:none}
.gal figure.hide{display:none}
.lb{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:rgba(10,10,11,0);transition:background-color .35s;pointer-events:none}
.lb.open{background:rgba(10,10,11,.88);pointer-events:auto}
.lb-img{position:relative;width:min(92vw,1100px);aspect-ratio:3/2;border-radius:20px;overflow:hidden;touch-action:none;will-change:transform}
.lb-img>svg,.lb-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lb-cap{position:absolute;left:50%;bottom:24px;translate:-50% 0;color:#fff;font-size:.95rem;opacity:0;transition:opacity .3s}
.lb.open .lb-cap{opacity:.85}
.lb button{position:absolute;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .3s,background-color .2s}
.lb.open button{opacity:1}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb button svg{width:20px;height:20px}
.lb .x{top:20px;right:20px}.lb .pv{left:20px;top:50%}.lb .nx{right:20px;top:50%}

/* ---------- Blog cards ------------------------------------------------- */
.posts{grid-template-columns:repeat(2,1fr)}
.post{display:flex;flex-direction:column;border-radius:var(--r-l);overflow:hidden;background:var(--card);box-shadow:var(--shadow-s),inset 0 0 0 1px var(--line);transition:transform .6s var(--spring),box-shadow .4s}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-l)}
.post-art{position:relative;aspect-ratio:16/9;overflow:hidden}
.post-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--spring)}
.post:hover .post-art img{transform:scale(1.05)}
.post-b{padding:24px 26px 28px}
.post-b small{color:var(--ink-3);font-size:.8rem;font-weight:560;letter-spacing:.04em;text-transform:uppercase}
.post-b h3{font-size:1.35rem;margin:8px 0 10px;letter-spacing:-.025em}
.post-b p{color:var(--ink-2);font-size:.95rem;margin:0}

/* ---------- Footer ----------------------------------------------------- */
.footer{background:var(--dark);color:var(--on-dark);padding:clamp(64px,9vw,120px) 0 28px;position:relative;overflow:hidden}
.foot-big{font-size:clamp(2.6rem,8.5vw,7.6rem);font-weight:680;letter-spacing:-.055em;line-height:.95;margin-bottom:clamp(40px,6vw,80px)}
.foot-big a{display:inline-flex;align-items:center;gap:.25em;transition:color .3s}
.foot-big a:hover{color:#f08a6a}
.foot-big svg{width:.7em;height:.7em;transition:transform .6s var(--spring)}
.foot-big a:hover svg{transform:rotate(-45deg)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;padding-top:40px;border-top:1px solid rgba(255,255,255,.1)}
.foot-grid h4{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2);font-weight:600;margin-bottom:16px}
.foot-grid a.logo{display:flex}
.footer .logo-mark rect:first-child{fill:#f3f1ec}
.foot-grid a{display:block;padding:5px 0;color:#d9d5ce;font-size:.93rem;transition:color .2s}
.foot-grid a:hover{color:#fff}
.foot-grid p{color:var(--on-dark-2);font-size:.93rem}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;color:var(--on-dark-2)}
.foot-bottom button,.foot-bottom a{color:var(--on-dark-2);text-decoration:underline;text-underline-offset:3px}
.foot-bottom nav{display:flex;flex-wrap:wrap;gap:18px}
.foot-tiles{position:absolute;right:-60px;top:-60px;width:360px;opacity:.07;transform:rotate(18deg);pointer-events:none}

/* ---------- Cookie consent (GDPR) ------------------------------------- */
.cc{position:fixed;z-index:250;left:16px;bottom:16px;width:min(440px,calc(100vw - 32px));padding:22px;border-radius:24px;
  background:rgba(255,253,249,.9);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:var(--shadow-l);border:1px solid rgba(255,255,255,.8);
  transform:translateY(calc(100% + 30px));opacity:0;transition:transform .7s var(--spring),opacity .4s;color:var(--ink)}
.cc.show{transform:none;opacity:1}
.cc h2{font-size:1.1rem;margin-bottom:8px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.cc h2 svg{width:22px;height:22px;color:var(--accent)}
.cc p{font-size:.86rem;color:var(--ink-2);line-height:1.5;margin-bottom:14px}
.cc p a{text-decoration:underline}
.cc-btns{display:flex;gap:8px;flex-wrap:wrap}
.cc-btns .btn{flex:1;height:44px;font-size:.9rem;padding:0 14px}
.cc-opts{display:grid;gap:8px;margin:0 0 14px;max-height:0;overflow:hidden;transition:max-height .5s var(--ease-out)}
.cc.expand .cc-opts{max-height:400px}
.cc-opt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:14px;background:var(--bg-2);font-size:.86rem}
.cc-opt b{display:block;font-weight:600;font-size:.9rem}
.cc-opt small{color:var(--ink-3)}
.switch{position:relative;flex:none;width:46px;height:28px}
.switch input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:1;margin:0}
.switch span{position:absolute;inset:0;border-radius:99px;background:#cfc9bf;transition:background-color .3s}
.switch span::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .45s var(--spring)}
.switch input:checked+span{background:var(--ok)}
.switch input:checked+span::after{transform:translateX(18px)}
.switch input:disabled+span{opacity:.6}
.switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Toast ------------------------------------------------------ */
.toast{position:fixed;left:50%;bottom:24px;z-index:260;translate:-50% 0;padding:12px 18px;border-radius:14px;background:var(--ink);color:#fff;font-size:.9rem;box-shadow:var(--shadow-l);transform:translateY(120%);opacity:0;transition:transform .6s var(--spring),opacity .3s}
.toast.show{transform:none;opacity:1}

/* ---------- 404 -------------------------------------------------------- */
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px var(--gutter) 60px}
.nf .big{font-size:clamp(7rem,24vw,16rem);font-weight:700;letter-spacing:-.07em;line-height:.9;display:flex;justify-content:center;gap:.04em}
.nf .big span{display:inline-block;animation:drop 1.2s var(--spring-bounce) both}
.nf .big span:nth-child(2){animation-delay:.12s;color:var(--accent);transform-origin:bottom left}
.nf .big span:nth-child(3){animation-delay:.24s}
@keyframes drop{from{transform:translateY(-120%) rotate(-12deg);opacity:0}}

/* ---------- View transitions (cross-document page transitions) ------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s var(--ease-in-out) both}
::view-transition-new(root){animation:vt-in .5s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:scale(.985);filter:blur(4px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

/* ---------- Responsive ------------------------------------------------- */
@media (max-width:1240px){.nav-phone{display:none}.nav-link{padding:0 11px}}
.nav-link,.nav-phone{white-space:nowrap}
@media (max-width:1080px){
  .nav,.nav-phone,.nav-cta{display:none}
  .burger{display:block}
  .svc{grid-column:span 6}.svc.wide{grid-column:span 12}
  .foot-grid{grid-template-columns:1fr 1fr}
  .body-grid{grid-template-columns:1fr}
  .toc{display:none}
}
@media (max-width:860px){
  .cta-photo{inset:0;opacity:.35}
  .cta-art{opacity:.25;width:80%;right:-30%}
  :root{--header-h:66px}
  .hero-grid,.phero-grid,.proc-grid,.calc,.contact-grid{grid-template-columns:1fr}
  .hero{min-height:auto;padding-top:calc(var(--header-h) + 28px)}
  .floor-stage{max-width:520px;margin:10px auto 0;width:100%}
  .chip-1{top:4%}.chip-2{top:auto;bottom:6%}
  .phero-art,.phero-art.is-photo{max-width:520px;aspect-ratio:4/3}
  .proc-visual{position:sticky;top:calc(var(--header-h) + 8px);height:auto;z-index:2;padding:8px 0}
  .proc-canvas{width:min(100%,300px)}
  .pstep{min-height:46vh}
  .feat-grid,.posts{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:1fr 1fr;grid-auto-rows:190px}
  .incl,.tips{grid-template-columns:1fr}
  .actionbar{display:flex;position:fixed;z-index:90;left:12px;right:12px;bottom:12px;gap:8px;padding:8px;border-radius:22px;
    background:rgba(255,253,249,.8);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:var(--shadow-l);border:1px solid rgba(255,255,255,.7);
    transform:translateY(140%);transition:transform .6s var(--spring)}
  .actionbar.show{transform:none}
  .actionbar .btn{flex:1;height:48px;font-size:.95rem;padding:0 12px}
  .cc{bottom:12px;left:12px;width:calc(100vw - 24px)}
  .footer{padding-bottom:100px}
}
@media (max-width:560px){
  .svc,.svc.wide{grid-column:span 12}
  .row2,.calc-row{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}.gal figure.gw{grid-column:auto}
  .foot-grid{grid-template-columns:1fr}
  .sheet .s-sub{grid-template-columns:1fr}
  .hero-meta{gap:14px}
  .ba{aspect-ratio:4/3}
}

/* ---------- Accessibility preferences --------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .rv,.rv-scale{transform:none;filter:none;transition:opacity .3s ease}
  .split .w>span{transform:none;transition:none}
  .pat .t{transform:none;transition:opacity .3s ease}
  .tile{transition:none}
  .marquee-track{animation:none}
  .scrub .sw{opacity:1}
  @view-transition{navigation:none}
}
.header.scrolled .nav-link[aria-current="page"]::after{background:#f08a6a}
@media (prefers-reduced-transparency:reduce){
  .header.scrolled{background:#161514}
  .mega,.sheet,.cc,.actionbar,.chip-float{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--line:rgba(0,0,0,.35);--line-2:rgba(0,0,0,.6);--ink-2:#2a2825}
}
@media print{.header,.footer,.cc,.actionbar,.progress{display:none}}

/* ---------- AI pomočnik ------------------------------------------------ */
.aiw{position:fixed;right:20px;bottom:20px;z-index:240;font-size:.95rem}
.aiw-fab{display:flex;align-items:center;gap:10px;height:54px;padding:0 20px 0 16px;border-radius:999px;background:var(--ink);color:#fff;font-weight:560;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .5s var(--spring),opacity .3s}
.aiw-fab:hover{transform:translateY(-2px)}
.aiw-fab:active{transform:scale(.96)}
.aiw-dot{width:26px;height:26px;border-radius:9px;background:conic-gradient(from 200deg,#c4502f,#f08a6a,#1e4a57,#c4502f);position:relative;animation:aiwSpin 6s linear infinite}
.aiw-dot::after{content:"";position:absolute;inset:7px;border-radius:4px;background:var(--ink)}
@keyframes aiwSpin{to{transform:rotate(360deg)}}
.aiw.open .aiw-fab{opacity:0;pointer-events:none;transform:scale(.8)}
.aiw-panel{position:absolute;right:0;bottom:0;width:min(400px,calc(100vw - 32px));height:min(620px,calc(100svh - 110px));display:flex;flex-direction:column;border-radius:26px;overflow:hidden;
  background:rgba(255,253,249,.92);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);box-shadow:var(--shadow-l);border:1px solid rgba(255,255,255,.7);
  transform-origin:100% 100%;opacity:0;transform:scale(.85) translateY(20px);filter:blur(6px);transition:opacity .25s var(--ease-out),transform .5s var(--spring),filter .3s var(--ease-out)}
.aiw.open .aiw-panel{opacity:1;transform:none;filter:none}
.aiw-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px 14px 20px;border-bottom:1px solid var(--line)}
.aiw-head b{display:block;font-size:1rem;letter-spacing:-.01em}
.aiw-head small{color:var(--ink-3);font-size:.78rem}
.aiw-x{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2)}
.aiw-x svg{width:16px;height:16px}
.aiw-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.aiw-msg{max-width:88%;padding:11px 14px;border-radius:18px;line-height:1.5;font-size:.93rem;animation:aiwIn .5s var(--spring) both}
.aiw-msg p{margin:0 0 .5em}.aiw-msg p:last-child{margin:0}
.aiw-msg ul,.aiw-msg ol{margin:.2em 0 .5em;padding-left:1.2em}
.aiw-msg a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.aiw-msg.bot{align-self:flex-start;background:#fff;box-shadow:inset 0 0 0 1px var(--line);border-bottom-left-radius:6px}
.aiw-msg.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.aiw-msg.err{background:#fbe9e6;color:#8f2a1f}
.aiw-src{margin-top:8px;font-size:.78rem;color:var(--ink-3)}
.aiw-src a{display:block;color:var(--ink-2)}
@keyframes aiwIn{from{opacity:0;transform:translateY(8px) scale(.97)}}
.aiw-typing{display:flex;gap:4px;padding:14px 16px}
.aiw-typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:aiwB 1.2s infinite}
.aiw-typing i:nth-child(2){animation-delay:.15s}.aiw-typing i:nth-child(3){animation-delay:.3s}
@keyframes aiwB{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-4px)}}
.aiw-sugg{display:flex;flex-wrap:wrap;gap:6px}
.aiw-sugg button{padding:8px 12px;border-radius:999px;font-size:.82rem;background:var(--accent-soft);color:#7a2f18;transition:transform .4s var(--spring)}
.aiw-sugg button:active{transform:scale(.95)}
.aiw-form{display:flex;align-items:flex-end;gap:8px;padding:10px 12px 6px;border-top:1px solid var(--line)}
.aiw-form textarea{flex:1;resize:none;max-height:120px;min-height:44px;padding:11px 14px;border-radius:14px;border:1px solid var(--line-2);background:#fff;font-size:.95rem;line-height:1.4}
.aiw-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(196,80,47,.15)}
.aiw-form button{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;transition:transform .4s var(--spring),opacity .2s}
.aiw-form button:disabled{opacity:.4}
.aiw-form button svg{width:18px;height:18px}
.aiw-note{margin:0;padding:4px 16px 12px;font-size:.7rem;line-height:1.4;color:var(--ink-3)}
.aiw-note a{text-decoration:underline}
@media (max-width:860px){.aiw{right:12px;bottom:84px}.aiw-fab-t{display:none}.aiw-fab{width:54px;padding:0;justify-content:center}
  .aiw.open{inset:auto 0 0 0;right:0;bottom:0}.aiw-panel{position:fixed;inset:auto 0 0 0;width:100%;height:85svh;border-radius:24px 24px 0 0}}
@media (prefers-reduced-transparency:reduce){.aiw-panel{background:var(--card);backdrop-filter:none}}
.aiw-panel[hidden]{display:none}

/* AI mojster — maskota */
.aiw-fab{padding:0 20px 0 5px;height:62px;gap:12px}
.aiw-ava{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #f2b705,0 4px 12px rgba(0,0,0,.3);animation:aiwWave 5s var(--ease-in-out) infinite;transform-origin:50% 90%}
@keyframes aiwWave{0%,70%,100%{transform:none}76%{transform:rotate(-8deg)}82%{transform:rotate(6deg)}88%{transform:rotate(-3deg)}}
.aiw-dot{display:none}
.aiw-bubble{position:absolute;right:8px;bottom:76px;width:230px;padding:12px 30px 12px 14px;border-radius:18px 18px 6px 18px;background:#fff;box-shadow:var(--shadow-l);font-size:.86rem;line-height:1.4;color:var(--ink);animation:aiwIn .6s var(--spring-bounce) both;cursor:pointer}
.aiw-bx{position:absolute;right:6px;top:4px;width:24px;height:24px;border-radius:50%;font-size:1rem;color:var(--ink-3)}
.aiw.open .aiw-bubble{display:none}
.aiw-head{justify-content:flex-start;gap:12px}
.aiw-head .aiw-x{margin-left:auto}
.aiw-hava{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #f2b705}
.aiw-on{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2fbf5f;margin-right:6px;vertical-align:1px;box-shadow:0 0 0 3px rgba(47,191,95,.18)}
.aiw-hello{display:flex;align-items:flex-end;gap:4px}
.aiw-hello img{flex:none;width:92px;height:auto;margin-left:-8px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.18));animation:aiwIn .7s var(--spring-bounce) both;-webkit-mask:linear-gradient(180deg,#000 80%,transparent);mask:linear-gradient(180deg,#000 80%,transparent);border-radius:14px}
.aiw-hello .aiw-msg{margin-bottom:6px}
@media (max-width:860px){.aiw-fab{width:62px;padding:0;justify-content:center}.aiw-ava{width:54px;height:54px}.aiw-bubble{bottom:72px;width:210px}}
@media (prefers-reduced-motion:reduce){.aiw-ava{animation:none}}

/* footer credits + števec ogledov */
.foot-credits{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px 20px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06);font-size:.8rem;color:var(--on-dark-2)}
.foot-credits a{color:#d9d5ce;transition:color .2s}
.foot-credits a:hover{color:#fff}
.foot-credits i{font-style:normal;opacity:.4;margin:0 6px}
.foot-credits .views b{color:#fff;font-variant-numeric:tabular-nums;font-weight:600}
.foot-credits .views::before{content:"·";opacity:.4;margin-right:14px}
.footer{padding-bottom:96px}

/* ---------- Footer (clean) ---------- */
.footer{padding:clamp(56px,7vw,88px) 0 96px}
.foot-tiles,.foot-big{display:none}
.foot-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:clamp(24px,3.5vw,40px);border-radius:var(--r-l);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);margin-bottom:clamp(44px,6vw,72px)}
.foot-title{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.03em;margin-bottom:6px;color:#fff}
.foot-cta p{margin:0;color:var(--on-dark-2);font-size:.97rem}
.foot-cta-btns{display:flex;flex-wrap:wrap;gap:10px}
.foot-cta .btn-ghost{--fg-b:var(--on-dark);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.foot-grid{display:grid;grid-template-columns:1.2fr 1.6fr .9fr;gap:clamp(28px,5vw,72px);padding:0;border:0}
.foot-brand .logo{margin-bottom:18px}
.foot-brand p{max-width:34ch;font-size:.93rem;line-height:1.6;color:var(--on-dark-2);margin-bottom:20px}
.foot-contact{list-style:none;display:grid;gap:10px}
.foot-contact li{display:flex;align-items:center;gap:10px;font-size:.93rem;color:#d9d5ce}
.foot-contact svg{width:16px;height:16px;color:#f08a6a;flex:none}
.foot-contact a{padding:0!important;display:inline!important}
.foot-grid h4{font-family:var(--font);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2);font-weight:600;margin-bottom:14px}
.foot-col a{display:block;padding:5px 0;font-size:.93rem;color:#d9d5ce;transition:color .2s,transform .3s var(--ease-out)}
.foot-col a:hover{color:#fff;transform:translateX(3px)}
.foot-svc>div{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 24px;margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid rgba(255,255,255,.08);font-size:.82rem;color:var(--on-dark-2)}
.fb-left{display:flex;flex-direction:column;gap:4px}
.fb-note{font-size:.76rem;opacity:.75}
.fb-links{display:flex;flex-wrap:wrap;gap:18px}
.fb-links a,.fb-links button{color:var(--on-dark-2);text-decoration:none;font-size:.82rem;transition:color .2s}
.fb-links a:hover,.fb-links button:hover{color:#fff}
.foot-credits{margin-top:12px;padding-top:0;border-top:0;font-size:.76rem;opacity:.85}
@media (max-width:1080px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}.foot-cta-btns{flex-direction:column;width:100%}.foot-cta-btns .btn{width:100%}}
.foot-credits{justify-content:center;text-align:center;margin-top:22px}

/* ---------- Potek dela: animirana obnova kopalnice + razstavljen prikaz slojev ---------- */
.proc-grid{grid-template-columns:1.25fr 1fr}
.proc-visual{height:min(80vh,680px)}
.proc-canvas{width:100%;max-width:760px;aspect-ratio:4/3;background:#151516}
.proc-canvas .bath{position:absolute;inset:0;width:100%;height:100%}
/* razstavljen prikaz slojev */
.xview{position:absolute;right:12px;top:12px;width:min(36%,250px);padding:10px 10px 4px;border-radius:16px;background:rgba(15,15,16,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:var(--xo,0);transform:translateY(calc((1 - var(--xo,0)) * -10px));transition:opacity .5s var(--ease-out),transform .6s var(--spring);pointer-events:none}
.xview-t{display:block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#f08a6a;font-weight:700;margin:0 0 2px 4px}
.xsvg{width:100%;height:auto;overflow:visible}
.xl{transform:translateY(calc(var(--i) * (-6px - var(--ex) * 30px)));transition:transform .9s var(--spring),opacity .4s;opacity:.35}
.xl text{opacity:var(--ex);transition:opacity .4s}
.xl.on{opacity:1}
.xl.on text{font-weight:700;fill:#f08a6a}
.proc-illu{opacity:.85;transition:opacity .6s}
.proc-canvas[data-step="8"] .xview{--xo:0}
.proc-prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.08)}
.proc-prog i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--pp,0));transition:transform .6s var(--ease-out)}
.pstep{min-height:46vh}
@media (max-width:860px){.proc-canvas{width:100%;max-width:520px}.xview{width:52%;right:8px;top:8px;padding:6px 6px 2px}.xview-t{font-size:.58rem}.proc-badge{left:10px;bottom:12px;font-size:.75rem}.pstep{min-height:40vh}}
.proc-canvas .xview .xsvg{position:static;inset:auto;display:block;width:100%;height:auto}
@media (max-width:860px){.proc-grid{grid-template-columns:1fr}.proc-visual{height:auto}.proc-canvas{max-width:none}}

/* faze obnove: slike iz istega kota + animirani prehodi */
.bath .ly{transition:opacity .7s var(--ease-out)}
.bath .ly3,.bath .ly4,.bath .ly5,.bath .ly5b,.bath .ly6,.bath .jg,.bath .sil,.bath .shine,.bath .ly8,.bath .meas{opacity:0}
.proc-canvas.on-3 .ly3,.proc-canvas.on-4 .ly4,.proc-canvas.on-5 .ly5,.proc-canvas.on-7 .sil,.proc-canvas.on-7 .shine,.proc-canvas.on-8 .ly8{opacity:1}
.proc-canvas.on-6 .ly5b{opacity:1;transition-delay:.1s}
.proc-canvas.on-6 .ly6{opacity:1;transition:opacity 1.1s .5s}
.proc-canvas[data-step="6"] .jg,.proc-canvas[data-step="7"] .jg{opacity:1}
.proc-canvas[data-step="1"] .meas{opacity:1;transition-delay:.4s}
.bath .meas path{stroke-dashoffset:300;animation:measDash 2s linear infinite}
@keyframes measDash{to{stroke-dashoffset:0}}
.bath .laser{transform-box:fill-box;transform-origin:center;animation:laser 1.4s ease-in-out infinite}
@keyframes laser{50%{transform:scale(1.5);opacity:.5}}
/* 2 rušenje: stara kopalnica razpade na kose, ki padejo */
.bath .ch{transform-box:fill-box;transform-origin:center;transition:transform 1s cubic-bezier(.55,0,.85,.35),opacity .6s var(--ease-out)}
.proc-canvas.on-2 .ch{opacity:0;transform:translate(var(--x),1100px) rotate(var(--r));transition-delay:calc(var(--d) * 13ms),calc(300ms + var(--d) * 13ms)}
/* 3 hidroizolacija (pasovi valjčka), 4 lepilo (polje za poljem) */
.bath .mk{opacity:0;transition:opacity .45s var(--ease-out)}
.proc-canvas.on-3 #km3 .mk,.proc-canvas.on-4 #km4 .mk{opacity:1;transition-delay:calc(var(--d) * 45ms)}
/* 5 ploščice: ena za drugo */
.bath .tl{opacity:0;transform:translateY(-34px) scale(.985);transform-box:fill-box;transform-origin:50% 100%;transition:opacity .4s var(--ease-out),transform .8s var(--spring)}
.proc-canvas.on-5 .tl{opacity:1;transform:none;transition-delay:calc(var(--d) * 55ms)}
/* 6 fugiranje: linije fug se izrišejo in zažarijo, nato ostanejo poudarjene */
.bath .jg polyline{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease-out)}
.proc-canvas.on-6 .jg polyline{stroke-dashoffset:0;transition-delay:calc(1.2s + var(--d) * 75ms)}
.bath .jglow{opacity:.85;transition:opacity 1.2s}
.bath .jline{opacity:.95;transition:opacity 1.2s,stroke .8s}
.proc-canvas[data-step="7"] .jglow{opacity:0}
.proc-canvas[data-step="7"] .jline{opacity:.4;stroke:#f2f2f2}
/* 7 silikon + čiščenje (sij čez ploščice) */
.bath .sil polyline{stroke-dasharray:1;stroke-dashoffset:1;opacity:.85;transition:stroke-dashoffset 1s var(--ease-out)}
.proc-canvas.on-7 .sil polyline{stroke-dashoffset:0;transition-delay:calc(.3s + var(--d) * 150ms)}
.bath .sweep{transform:translateX(0);transition:transform 2s cubic-bezier(.45,0,.3,1)}
.proc-canvas.on-7 .sweep{transform:translateX(4600px);transition-delay:1.4s}
/* 8 omarica, ogledalo, radiator … nato celotna fotografija */
.bath .nf{opacity:0;transform:translateY(-24px);transform-box:fill-box;transition:opacity .6s var(--ease-out),transform .8s var(--spring)}
.proc-canvas.on-8 .nf{opacity:1;transform:none;transition-delay:calc(var(--d) * 160ms)}
.bath .f8{opacity:0;transition:opacity 1s var(--ease-out)}
.proc-canvas.on-8 .f8{opacity:1;transition-delay:1.3s}
.proc-canvas.back *{transition-delay:0s !important}
@media (prefers-reduced-motion:reduce){.bath *{transition-duration:.01s !important;transition-delay:0s !important;animation:none !important}}
.proc-canvas .proc-illu{position:absolute;left:14px;top:14px;right:auto;bottom:auto}
/* večje slike poteka dela */
@media (min-width:861px){
  .proc .wrap{max-width:min(1480px,96vw)}
  .proc-grid{grid-template-columns:1.9fr 1fr;gap:clamp(24px,4vw,64px)}
  .proc-visual{height:min(88vh,860px)}
  .proc-canvas{max-width:none;width:100%}
}
/* kalkulator: predogled polaganja v prostoru */
.calc-room{position:relative;margin-top:22px;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:#1a1a1b;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.calc-room canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.calc-room-l{position:absolute;left:12px;bottom:12px;padding:7px 12px;border-radius:12px;background:rgba(15,15,16,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:.8rem;font-weight:600;transition:opacity .3s}
.calc-room .illu{right:12px;top:12px}
/* logotip Keramičarstvo Zupan */
.logo-svg{height:50px;width:auto;flex:none;display:block;overflow:visible;transition:height .35s var(--ease-out)}
.header.scrolled .logo-svg{height:42px}
.logo-svg .lm rect{transform-box:fill-box;transform-origin:center;transition:transform .6s var(--spring)}
.logo:hover .logo-svg .t4{transform:rotate(45deg) scale(.8)}
.logo:hover .logo-svg .t1{transform:translate(-1.5px,-1.5px)}
.foot-brand .logo-svg{height:56px}
@media (max-width:860px){.logo-svg{height:40px}.header.scrolled .logo-svg{height:36px}}