/* =========================================================
   Vodovodne in ogrevalne instalacije Bojan Vrabič s.p.
   Ena smer: bakrena linija skozi hladno vodo proti toploti.
   ========================================================= */

:root{
  /* barve, vzete iz uvodne slike */
  --canvas:#0E1A21;
  --canvas-2:#102028;
  --panel:#16252E;
  --panel-2:#1C303B;
  --accent:#C87137;
  --accent-hover:#E28B4D;
  --accent-soft:rgba(200,113,55,.16);
  --accent-glow:rgba(200,113,55,.42);
  --teal:#5E97A4;
  --teal-soft:rgba(94,151,164,.14);
  --line:#243C48;
  --line-strong:#4A6E80;
  --text:#EDF3F5;
  --text-2:#A2B8C3;
  --text-3:#7C949F;

  /* tipografija */
  --display:"Bricolage Grotesque",Georgia,serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Courier New",monospace;

  /* gibanje */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.28s;
  --t:.55s;
  --t-slow:.9s;

  /* senca besedila nad sliko */
  --tshadow:0 1px 2px rgba(5,10,14,.95),0 3px 12px rgba(5,10,14,.78),0 10px 44px rgba(5,10,14,.8);

  --wrap:1180px;
  --gutter:clamp(20px,5vw,64px);
  --nav-h:68px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  overflow-x:hidden;
  overflow-x:clip;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  overflow-x:hidden;
  overflow-x:clip;
  margin:0;
  background:var(--canvas);
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,7.2vw,5.1rem)}
h2{font-size:clamp(1.95rem,4.1vw,3.15rem)}
h3{font-size:clamp(1.2rem,1.7vw,1.42rem);letter-spacing:-.012em}
p{margin:0}

a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent-hover);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#12202A;font-weight:600;
  padding:12px 20px;border-radius:0 0 10px 0;
}
.skip:focus{left:0}

.wrap{width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}

/* ---------------------------------------------------------
   Ozadje: ena mirna plast za vsem
   --------------------------------------------------------- */
.env{position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--canvas)}
.env::before,.env::after{content:"";position:absolute;inset:-25%}
.env::before{
  background:radial-gradient(46% 38% at 22% 14%,rgba(94,151,164,.13),transparent 68%);
  animation:drift 78s var(--ease) -14s infinite alternate;
}
.env::after{
  background:radial-gradient(52% 44% at 78% 88%,rgba(200,113,55,.12),transparent 70%);
  animation:drift2 92s var(--ease) -30s infinite alternate;
}
@keyframes drift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.13)}}
@keyframes drift2{from{transform:translate3d(3%,2%,0) scale(1.08)}to{transform:translate3d(-4%,-3%,0) scale(1)}}

.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---------------------------------------------------------
   Navigacija
   --------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;height:var(--nav-h);
  display:flex;align-items:center;
  background:linear-gradient(to bottom,rgba(9,17,22,.92),rgba(9,17,22,.55) 60%,transparent);
  backdrop-filter:blur(3px);
  transition:background var(--t) var(--ease),backdrop-filter var(--t) var(--ease);
}
.nav.solid{
  background:rgba(11,21,27,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;gap:18px;width:min(100% - 32px,1320px)}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand svg{width:30px;height:30px;flex:0 0 auto}
.brand b{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.015em;line-height:1.1}
.brand span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;color:var(--text-3)}

.nav-links{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav-links a{
  text-decoration:none;color:var(--text-2);font-size:.93rem;font-weight:500;
  padding:9px 13px;border-radius:9px;position:relative;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;
  background:var(--accent);border-radius:2px;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:.95rem;line-height:1;
  padding:14px 22px;border-radius:11px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;text-shadow:none;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.btn-primary{background:var(--accent);color:#11202A;box-shadow:0 8px 26px -12px var(--accent-glow)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 14px 32px -12px var(--accent-glow)}
.btn-ghost{background:rgba(255,255,255,.045);color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:var(--accent);transform:translateY(-2px)}
.btn-sm{padding:10px 16px;font-size:.88rem;border-radius:9px}

.nav-cta{margin-left:10px}

.burger{
  display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);
  border-radius:10px;width:44px;height:40px;cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.burger span{display:block;width:18px;height:2px;background:var(--text);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text);
  transition:transform var(--t-fast) var(--ease);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:89;
  background:rgba(10,19,25,.985);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  padding:14px var(--gutter) 26px;
  transform:translateY(-14px);opacity:0;pointer-events:none;
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.mobile-menu.open{transform:none;opacity:1;pointer-events:auto}
.mobile-menu a{
  display:block;padding:15px 4px;text-decoration:none;color:var(--text);
  font-size:1.06rem;font-weight:500;border-bottom:1px solid var(--line);
}
.mobile-menu .btn{width:100%;margin-top:18px}

/* ---------------------------------------------------------
   Uvod (samo domača stran)
   --------------------------------------------------------- */
.hero{position:relative;height:460vh}
.hero-stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;place-items:center;
}
.hero-media{
  position:absolute;inset:0;
  background-image:url("hero-cev.jpg");
  background-size:cover;background-position:center;
  transform:scale(var(--z,1.05));
  transform-origin:50% 48%;
  will-change:transform;
}
.hero-warm{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 47%,rgba(226,139,77,.34),transparent 42%);
  opacity:var(--warm,0);
}
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 122% 92% at 50% 46%,rgba(8,15,20,0) 30%,rgba(8,15,20,.72) 100%),
    linear-gradient(to bottom,rgba(8,15,20,.55),rgba(8,15,20,0) 26%,rgba(8,15,20,0) 62%,rgba(8,15,20,.62));
}

.bands{position:absolute;inset:0;display:grid;place-items:center}
.band{
  grid-area:1/1;position:relative;z-index:0;
  width:min(100% - 44px,1000px);
  text-align:center;
  opacity:var(--o,0);
  text-shadow:var(--tshadow);
  pointer-events:none;
}
.band::before{
  content:"";position:absolute;inset:-46% -12%;pointer-events:none;z-index:-1;
  opacity:calc(.28 + .72*var(--k,1));
  /* polmera elipse sta natanko pol skatle, da barva pride do nic tik ob robu
     in za sabo ne pusti vidnega pravokotnika */
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(4,9,13,.84) 0%,rgba(4,9,13,.72) 30%,rgba(4,9,13,.4) 62%,rgba(4,9,13,0) 100%);
}
.band.on{pointer-events:auto}
.band .btn{text-shadow:none}

.band-line{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.05rem,5.4vw,4rem);line-height:1.08;letter-spacing:-.022em;
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* znaki in besede za vstope */
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* vstop 1: drsenje navzdol */
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}
/* vstop 2: znaki se poravnajo v bralnem vrstnem redu */
.e-align .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.9,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)));
}
/* vstop 3: prihod, beseda za besedo navzgor */
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 30px)) scale(calc(.94 + .06*var(--kc)));
}

.band-sub{
  margin-top:20px;font-size:clamp(1rem,1.5vw,1.16rem);color:#DCE7EC;
  max-width:44ch;margin-inline:auto;
  opacity:var(--ks,1);
  transform:translateY(calc((1 - var(--ks,1)) * 16px));
}
.band-actions{
  margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  opacity:var(--kb,1);
  transform:translateY(calc((1 - var(--kb,1)) * 16px));
}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(8,16,22,.6);border:1px solid rgba(94,151,164,.34);
  border-radius:999px;padding:7px 15px;
  backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:#CFE0E7;text-shadow:0 1px 3px rgba(4,9,13,.85);
}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto;position:relative}
.chip .dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--accent);
  opacity:.4;animation:pulse 3.4s var(--ease) -1s infinite;
}
@keyframes pulse{0%,100%{transform:scale(.6);opacity:.45}50%{transform:scale(1.25);opacity:0}}

.hero-chip{margin-bottom:22px;display:inline-flex}

.cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-3);opacity:var(--cue,1);pointer-events:none;
}
.cue i{display:block;width:1px;height:34px;background:linear-gradient(to bottom,transparent,var(--accent))}

/* ---------------------------------------------------------
   Mirni uvod na podstraneh
   --------------------------------------------------------- */
.page-hero{
  position:relative;padding:calc(var(--nav-h) + 58px) 0 54px;
  border-bottom:1px solid var(--line);overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(to right,rgba(14,26,33,.97) 30%,rgba(14,26,33,.72)),url("hero-cev-sm.jpg");
  background-size:cover;background-position:center;
}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.5rem);max-width:16ch}
.page-hero p{margin-top:16px;color:var(--text-2);max-width:56ch;font-size:1.05rem}

/* drobtinice */
.crumbs{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:20px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;align-items:center}
.crumbs a{color:var(--text-3);text-decoration:none;transition:color var(--t-fast) var(--ease)}
.crumbs a:hover{color:var(--accent-hover)}
.crumbs li:not(:last-child)::after{content:"›";margin-left:8px;color:var(--line-strong)}
.crumbs [aria-current]{color:var(--text-2)}

/* ---------------------------------------------------------
   Bakrena linija: podpis strani
   --------------------------------------------------------- */
.rail{
  position:fixed;left:clamp(20px,calc((100vw - var(--wrap))/2 - 88px),64px);
  top:0;bottom:0;width:26px;z-index:5;pointer-events:none;display:none;
}
.rail{opacity:0;transition:opacity .7s var(--ease)}
.rail.show{opacity:1}
.rail i{
  position:absolute;left:12px;top:0;width:2px;height:100%;
  background:linear-gradient(to bottom,var(--accent) 0%,var(--accent) 70%,rgba(200,113,55,.25) 100%);
  transform:scaleY(var(--rail,0));transform-origin:top;
  box-shadow:0 0 14px -2px var(--accent-glow);
}
.rail b{
  position:absolute;left:7px;width:12px;height:12px;border-radius:50%;
  border:2px solid var(--line-strong);background:var(--canvas);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.rail b.lit{border-color:var(--accent);background:var(--accent);box-shadow:0 0 16px -1px var(--accent-glow)}
@media (min-width:1240px){.rail{display:block}}

/* ---------------------------------------------------------
   Razdelki
   --------------------------------------------------------- */
section{position:relative}
.pad{padding:clamp(64px,9vw,124px) 0}
.pad-sm{padding:clamp(48px,6vw,80px) 0}

.kicker{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:baseline;gap:11px;margin-bottom:18px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--accent);transform:translateY(-4px)}

.lede{color:var(--text-2);font-size:clamp(1.04rem,1.5vw,1.19rem);max-width:60ch;margin-top:20px}

/* vstopi razdelkov */
.rev{opacity:0;transform:translateY(26px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.rev.in{opacity:1;transform:none}
.stag>*{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.stag.in>*{opacity:1;transform:none}
.stag.in>*:nth-child(1){transition-delay:0s}
.stag.in>*:nth-child(2){transition-delay:.09s}
.stag.in>*:nth-child(3){transition-delay:.18s}
.stag.in>*:nth-child(4){transition-delay:.27s}
.stag.in>*:nth-child(5){transition-delay:.36s}
.stag.in>*:nth-child(6){transition-delay:.45s}
.stag.done>*:nth-child(1),.stag.done>*:nth-child(2),.stag.done>*:nth-child(3),
.stag.done>*:nth-child(4),.stag.done>*:nth-child(5),.stag.done>*:nth-child(6){transition-delay:0s}

/* vrstica zaupanja */
.trust{border-block:1px solid var(--line);background:rgba(22,37,46,.5)}
.trust ul{
  list-style:none;margin:0;padding:20px 0;display:flex;flex-wrap:wrap;
  gap:14px 40px;align-items:center;justify-content:center;
}
.trust li{display:flex;align-items:center;gap:10px;font-size:.94rem;color:var(--text-2)}
.trust svg{width:18px;height:18px;flex:0 0 auto;color:var(--accent)}
.trust strong{color:var(--text);font-weight:600}

/* premisa: asimetrična dvojica */
.premise{display:grid;grid-template-columns:1fr;gap:34px}
@media (min-width:900px){
  .premise{grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,88px);align-items:start}
  .premise-right{padding-top:14px}
}
.premise h2 em{font-style:normal;color:var(--accent);position:relative;white-space:nowrap}
.premise h2 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:3px;
  background:var(--accent);opacity:.32;border-radius:2px;
  transform:scaleX(var(--u,0));transform-origin:left;
  transition:transform 1.1s var(--ease-out) .22s;
}
.premise.in h2 em::after{--u:1}
.premise-facts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:2px}
.premise-facts li{
  display:flex;gap:15px;align-items:flex-start;
  padding:17px 0;border-top:1px solid var(--line);
}
.premise-facts li:last-child{border-bottom:1px solid var(--line)}
.premise-facts span{
  font-family:var(--mono);font-size:.7rem;color:var(--accent);
  padding-top:5px;flex:0 0 26px;letter-spacing:.1em;
}
.premise-facts p{color:var(--text-2);font-size:.99rem}
.premise-facts b{color:var(--text);font-weight:600;display:block}

/* storitve: mreža kartic */
.cards{display:grid;gap:16px;grid-template-columns:1fr;margin-top:44px}
@media (min-width:660px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:15px;padding:26px 24px 24px;overflow:hidden;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:15px;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 50px -30px var(--accent-glow);
  opacity:0;transition:opacity var(--t) var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:var(--line-strong);background:var(--panel-2)}
.card:hover::after{opacity:1}
.card .ico{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid rgba(200,113,55,.3);color:var(--accent);
  margin-bottom:17px;
}
.card .ico svg{width:21px;height:21px}
.card h3{margin-bottom:9px}
.card p{color:var(--text-2);font-size:.96rem}
.card ul{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.card ul li{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);border:1px solid var(--line);border-radius:6px;padding:4px 8px;
}

/* koraki: izmenično */
.steps{display:grid;gap:18px;margin-top:46px}
.step{
  display:grid;gap:22px;align-items:center;grid-template-columns:1fr;
  border:1px solid var(--line);border-radius:17px;overflow:hidden;background:var(--panel);
}
@media (min-width:820px){
  .step{grid-template-columns:auto 1fr;gap:34px}
  .step.flip{grid-template-columns:1fr auto}
  .step.flip .step-n{order:2}
}
.step-n{
  font-family:var(--display);font-weight:700;font-size:clamp(3.4rem,7vw,5.6rem);
  line-height:.86;color:transparent;-webkit-text-stroke:1.5px var(--line-strong);
  padding:26px 0 0 30px;transition:-webkit-text-stroke-color var(--t) var(--ease);
}
@media (min-width:820px){.step-n{padding:34px 0 34px 40px}}
.step:hover .step-n{-webkit-text-stroke-color:var(--accent)}
.step-body{padding:0 26px 26px}
@media (min-width:820px){.step-body{padding:32px 40px 32px 0}}
.step-body h3{margin-bottom:8px}
.step-body p{color:var(--text-2);font-size:.99rem}
.step-body .chip{margin-top:15px;background:rgba(200,113,55,.1);border-color:rgba(200,113,55,.32);color:#E9C8AC;text-shadow:none}

/* primer dela */
.case{display:grid;gap:30px;grid-template-columns:1fr;align-items:center}
@media (min-width:940px){.case{grid-template-columns:1.08fr .92fr;gap:clamp(34px,5vw,66px)}}
.case-fig{position:relative;border-radius:17px;overflow:hidden;border:1px solid var(--line)}
.case-fig img{width:100%;aspect-ratio:16/10;object-fit:cover;transform:scale(1.02);transition:transform 1.4s var(--ease-out)}
.case-fig:hover img{transform:scale(1.07)}
.case-fig figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 20px 15px;
  background:linear-gradient(to top,rgba(8,15,20,.92),transparent);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:#C4D6DE;
}
.case-facts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px}
.case-facts li{display:flex;gap:13px;align-items:flex-start;color:var(--text-2);font-size:.99rem}
.case-facts li svg{width:17px;height:17px;color:var(--accent);flex:0 0 auto;margin-top:5px}
.quote-inline{
  margin-top:26px;padding:20px 22px;border-left:2px solid var(--accent);
  background:rgba(200,113,55,.07);border-radius:0 12px 12px 0;
}
.quote-inline p{font-size:1.06rem;line-height:1.5}
.quote-inline cite{
  display:block;margin-top:11px;font-style:normal;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
}

/* interaktivni trenutek */
.hold{
  border:1px solid var(--line);border-radius:20px;background:var(--panel);
  padding:clamp(28px,4vw,50px);text-align:center;overflow:hidden;position:relative;
}
.hold-stage{margin:30px auto 0;max-width:640px}
.hold-stage svg{width:100%;height:auto;overflow:visible}
.pipe-bg{fill:none;stroke:var(--line-strong);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.pipe-fill{
  fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,600);
  stroke-dashoffset:calc(var(--len,600) * (1 - var(--h,0)));
  filter:drop-shadow(0 0 7px var(--accent-glow));
}
.rad-body{fill:var(--panel-2);stroke:var(--line-strong);stroke-width:2}
.rad-fin{stroke:var(--line-strong);stroke-width:3;stroke-linecap:round}
.hold.done .rad-body{fill:rgba(200,113,55,.24);stroke:var(--accent);transition:fill .7s var(--ease),stroke .7s var(--ease)}
.hold.done .rad-fin{stroke:var(--accent-hover);transition:stroke .7s var(--ease)}
.hold-btn{
  margin-top:26px;position:relative;overflow:hidden;
  min-width:230px;touch-action:none;user-select:none;-webkit-user-select:none;
}
.hold-btn .fillbar{
  position:absolute;left:0;top:0;bottom:0;width:100%;background:rgba(255,255,255,.26);
  transform:scaleX(var(--h,0));transform-origin:left;pointer-events:none;
}
.hold-btn span{position:relative}
.hold-out{
  margin-top:26px;display:grid;gap:11px;max-width:560px;margin-inline:auto;
  text-align:left;
}
.hold-out li{
  list-style:none;display:flex;gap:12px;align-items:flex-start;
  padding:14px 17px;border:1px solid var(--line);border-radius:12px;background:var(--canvas-2);
  color:var(--text-2);font-size:.96rem;
  opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.hold.done .hold-out li{opacity:1;transform:none}
.hold.done .hold-out li:nth-child(1){transition-delay:.1s}
.hold.done .hold-out li:nth-child(2){transition-delay:.26s}
.hold.done .hold-out li:nth-child(3){transition-delay:.42s}
.hold-out svg{width:17px;height:17px;color:var(--accent);flex:0 0 auto;margin-top:4px}

/* ocene */
.quotes{display:grid;gap:16px;grid-template-columns:1fr;margin-top:44px}
@media (min-width:820px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{
  border:1px solid var(--line);border-radius:15px;padding:26px 24px;
  background:linear-gradient(160deg,var(--panel),var(--canvas-2));
  display:flex;flex-direction:column;
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease);
}
.quote:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.stars{display:flex;gap:3px;margin-bottom:15px;color:var(--accent)}
.stars svg{width:15px;height:15px}
.quote blockquote{margin:0;font-size:1.04rem;line-height:1.52;color:var(--text)}
.quote footer{
  margin-top:auto;padding-top:18px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
}
.quote footer b{display:block;color:var(--text-2);font-weight:500;margin-bottom:3px;letter-spacing:.1em}

/* pogosta vprašanja */
.faq{max-width:800px;margin-top:40px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:clamp(1.06rem,1.6vw,1.22rem);
  line-height:1.34;letter-spacing:-.01em;
  transition:color var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-hover)}
.faq summary::after{
  content:"";position:absolute;right:8px;top:29px;width:13px;height:13px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform var(--t) var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:33px}
.faq .ans{padding:0 44px 24px 0;color:var(--text-2);font-size:1rem}
.faq .ans a{color:var(--accent-hover)}

/* obrazec */
.contact{display:grid;gap:34px;grid-template-columns:1fr}
@media (min-width:960px){.contact{grid-template-columns:.86fr 1.14fr;gap:clamp(36px,5vw,72px)}}
.contact-facts{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:3px}
.contact-facts li{display:flex;gap:15px;padding:16px 0;border-top:1px solid var(--line);align-items:flex-start}
.contact-facts li:last-child{border-bottom:1px solid var(--line)}
.contact-facts svg{width:19px;height:19px;color:var(--accent);flex:0 0 auto;margin-top:4px}
.contact-facts b{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:500;margin-bottom:3px}
.contact-facts a{color:var(--text);text-decoration:none;font-size:1.04rem;font-weight:500}
.contact-facts a:hover{color:var(--accent-hover)}

form{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,34px)}
.field{margin-bottom:17px}
.field label{display:block;font-size:.86rem;font-weight:500;margin-bottom:7px;color:var(--text-2)}
.field .req{color:var(--accent)}
.field input,.field textarea,.field select{
  width:100%;background:var(--canvas-2);color:var(--text);
  border:1px solid var(--line-strong);border-radius:11px;
  padding:13px 15px;font-family:var(--body);font-size:1rem;line-height:1.4;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.field textarea{min-height:126px;resize:vertical}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A2B8C3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:42px;
}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--teal)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);background:var(--canvas)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.row2{display:grid;gap:17px;grid-template-columns:1fr}
@media (min-width:560px){.row2{grid-template-columns:1fr 1fr}}
.consent{display:flex;gap:11px;align-items:flex-start;margin:6px 0 20px;font-size:.87rem;color:var(--text-2)}
.consent input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--accent)}
.consent a{color:var(--accent-hover)}
form .btn{width:100%}
.form-note{margin-top:14px;font-size:.83rem;color:var(--text-3);text-align:center}

/* zemljevid */
.map-box{
  position:relative;border:1px solid var(--line);border-radius:17px;overflow:hidden;
  background:linear-gradient(160deg,var(--panel),var(--canvas-2));
  min-height:340px;display:grid;place-items:center;padding:30px;text-align:center;
}
.map-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-box .ask p{color:var(--text-2);max-width:40ch;margin:12px auto 20px}

/* noga */
footer.site{border-top:1px solid var(--line);background:rgba(11,21,27,.72);margin-top:0}
.foot-grid{display:grid;gap:32px;grid-template-columns:1fr;padding:56px 0 34px}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-grid h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);font-weight:500;margin-bottom:15px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-grid a{color:var(--text-2);text-decoration:none;font-size:.95rem;transition:color var(--t-fast) var(--ease)}
.foot-grid a:hover{color:var(--accent-hover)}
.foot-grid address{font-style:normal;color:var(--text-2);font-size:.95rem;line-height:1.75;margin-top:14px}
.foot-legal{
  border-top:1px solid var(--line);padding:20px 0 30px;
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:.82rem;color:var(--text-3);
}
.foot-legal a{color:var(--text-3);text-decoration:none}
.foot-legal a:hover{color:var(--text-2)}

/* lepljiv gumb na telefonu */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  gap:9px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(10,19,25,.96);border-top:1px solid var(--line);
  backdrop-filter:blur(14px);
}
.sticky-cta .btn{flex:1;padding:14px 10px}
@media (max-width:860px){
  .sticky-cta{display:flex}
  body{padding-bottom:74px}
}

/* piškotki */
.consent-bar{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:95;
  background:rgba(13,24,31,.985);border:1px solid var(--line-strong);border-radius:15px;
  padding:20px 22px;max-width:520px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
  transform:translateY(18px);opacity:0;pointer-events:none;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);
}
.consent-bar.show{transform:none;opacity:1;pointer-events:auto}
.consent-bar p{font-size:.9rem;color:var(--text-2)}
.consent-bar a{color:var(--accent-hover)}
.consent-bar .row{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.consent-bar .btn{flex:1;min-width:130px}
@media (max-width:860px){.consent-bar{bottom:84px}}

/* hvala */
.thanks{min-height:calc(100vh - var(--nav-h));display:grid;place-items:center;padding:calc(var(--nav-h) + 40px) 0 70px;text-align:center}
.thanks .mark{
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin:0 auto 26px;
  background:var(--accent-soft);border:1px solid rgba(200,113,55,.4);color:var(--accent);
}
.thanks .mark svg{width:34px;height:34px}
.thanks h1{font-size:clamp(2.2rem,5.4vw,3.6rem)}
.thanks .lede{margin-inline:auto;text-align:center}
.thanks .actions{margin-top:32px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* pravno besedilo */
.legal{max-width:760px}
.legal h2{font-size:clamp(1.3rem,2.3vw,1.72rem);margin-top:44px}
.legal h3{margin-top:26px}
.legal p,.legal li{color:var(--text-2);margin-top:13px}
.legal ul{padding-left:20px}
.legal a{color:var(--accent-hover)}

/* cenik */
.pricetable{width:100%;border-collapse:collapse;margin-top:26px;font-size:.96rem}
.pricetable th,.pricetable td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
.pricetable th{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);font-weight:500}
.pricetable td:last-child{color:var(--text);font-weight:600;white-space:nowrap}
.pricetable td{color:var(--text-2)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* povezava naprej */
.next-links{display:grid;gap:14px;grid-template-columns:1fr;margin-top:42px}
@media (min-width:700px){.next-links{grid-template-columns:1fr 1fr}}
.next-link{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:24px 26px;border:1px solid var(--line);border-radius:15px;
  text-decoration:none;background:var(--panel);
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease),background var(--t) var(--ease);
}
.next-link:hover{border-color:var(--accent);transform:translateY(-3px);background:var(--panel-2)}
.next-link b{display:block;font-family:var(--display);font-size:1.16rem;font-weight:700;letter-spacing:-.012em}
.next-link span{display:block;color:var(--text-3);font-size:.9rem;margin-top:4px}
.next-link svg{width:20px;height:20px;color:var(--accent);flex:0 0 auto;transition:transform var(--t) var(--ease)}
.next-link:hover svg{transform:translateX(5px)}

/* dotik */
@media (pointer:coarse){
  .btn{min-height:46px}
  .nav-links a{padding:12px 13px}
  .faq summary{padding-top:24px;padding-bottom:24px}
}

/* kratki zasloni */
@media (max-height:560px){.cue{display:none}}

@media (max-width:1080px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .burger{display:flex}
}
@media (min-width:1081px){.mobile-menu{display:none}}

/* ---------------------------------------------------------
   Zmanjšano gibanje
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  .rev,.stag>*{opacity:1 !important;transform:none !important}
  .band{opacity:1}
  .hold-out li{opacity:1 !important;transform:none !important}
}

/* pavza, ko je zavihek skrit */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ---------------------------------------------------------
   Mirni uvod: petero vrat, enaka kot v JavaScriptu
   1 telefoni  2 pokončni tablični  3 pokončni na dotik
   4 telefon po strani  5 zmanjšano gibanje
   --------------------------------------------------------- */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .hero-stage{
    position:relative;height:auto;min-height:100vh;min-height:100svh;
    padding:calc(var(--nav-h) + 54px) 0 78px;align-content:center;
  }
  .hero-media{transform:none}
  .hero-warm{opacity:.5}
  .bands{position:relative;display:block;padding-inline:22px;width:100%}
  .band{opacity:1;pointer-events:auto;width:100%}
  .band:not([data-settle]){display:none}
  .band .band-sub,.band .band-actions{opacity:1;transform:none}
  .e-drift .w,.e-align .c,.e-rise .w{opacity:1;transform:none}
  .cue{display:none}
}

body.static-hero .hero{height:auto}
body.static-hero .hero-stage{
  position:relative;height:auto;min-height:100vh;min-height:100svh;
  padding:calc(var(--nav-h) + 54px) 0 78px;align-content:center;
}
body.static-hero .hero-media{transform:none}
body.static-hero .bands{position:relative;display:block;padding-inline:22px;width:100%}
body.static-hero .band{pointer-events:auto;width:100%}
body.static-hero .band:not([data-settle]){display:none}
body.static-hero .e-drift .w,
body.static-hero .e-align .c,
body.static-hero .e-rise .w{opacity:1;transform:none}
body.static-hero .cue{display:none}

/* Telefonska številka v navigaciji mora biti na prvi pogled berljiva.
   Pri 14 pikslih se presledek med skupinama stisne, zato ga razširimo. */
.tel{word-spacing:.34em;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------
   Besedilo se umakne svetlemu ustju cevi.
   Izmerjeno: sredina slike ima svetlost 0,66, kar pod belim
   besedilom pade pod prag berljivosti. Zato pasova 1 in 2
   sedita nad in pod njo, pas prihoda pa dobi širši zastor.
   Uporabljena je margina in ne notranji rob, da zastor ostane
   sredinjen na besedilu in ne na prazni višini pasu.
   --------------------------------------------------------- */
.band.pos-top{align-self:start;margin-top:16vh}
.band.pos-bottom{align-self:end;margin-bottom:18vh}
.band.pos-top::before,.band.pos-bottom::before{inset:-170% -14%}
.band[data-settle]::before{
  inset:-40% -34%;
  /* dve plasti: elipsa poglobi sredino, vodoravni pas pokrije celotno sirino,
     maska levo in desno pa poskrbi, da se rob nikjer ne vidi */
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%,
      rgba(4,9,13,.78) 0%,rgba(4,9,13,.6) 45%,rgba(4,9,13,.3) 75%,rgba(4,9,13,0) 100%),
    linear-gradient(to bottom,
      rgba(4,9,13,0) 0%,rgba(4,9,13,.56) 22%,rgba(4,9,13,.56) 78%,rgba(4,9,13,0) 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 15%,#000 85%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 15%,#000 85%,transparent 100%);
}

/* ---------------------------------------------------------
   Oddaj oceno: zvezdice peljejo na Googlov profil
   --------------------------------------------------------- */
.rate{
  margin-top:22px;display:grid;gap:28px;grid-template-columns:1fr;
  border:1px solid var(--line);border-radius:18px;
  padding:clamp(24px,3.4vw,42px);
  background:linear-gradient(150deg,var(--panel),var(--canvas-2));
  position:relative;overflow:hidden;
}
@media (min-width:900px){
  .rate{grid-template-columns:1.08fr .92fr;align-items:center;gap:clamp(32px,5vw,64px)}
}
.rate::before{
  content:"";position:absolute;right:-90px;bottom:-140px;
  width:340px;height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(200,113,55,.17),transparent 68%);
}
.rate>*{position:relative}
.rate-h{font-size:clamp(1.32rem,2.2vw,1.8rem);margin-bottom:12px}
.rate p{color:var(--text-2);font-size:1rem}

.stars-pick{display:flex;gap:5px;margin-bottom:20px}
.stars-pick .s{
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  color:var(--line-strong);
  transition:transform var(--t-fast) var(--ease);
}
.stars-pick .s:hover{transform:translateY(-4px) scale(1.09)}
.stars-pick .s:active{transform:translateY(-1px) scale(1.02)}
.stars-pick svg{width:34px;height:34px;overflow:visible}
.stars-pick .fill{
  fill:var(--accent);
  /* prižgane so vse zvezdice pred trenutno: on minus indeks, omejeno na 0 do 1 */
  opacity:clamp(0,calc(var(--on,0) - var(--i)),1);
  transition:opacity .18s var(--ease);
  filter:drop-shadow(0 0 6px var(--accent-glow));
}
.rate-go{width:100%}
.rate-note{margin-top:14px;font-size:.85rem;color:var(--text-3)}

@media (max-width:520px){
  .stars-pick .s{width:38px;height:38px}
  .stars-pick svg{width:30px;height:30px}
}
@media (prefers-reduced-motion:reduce){
  .stars-pick .s:hover{transform:none}
}