/* ==========================================================================
   WEBNITE - dizajn sistem
   Tipografija: Comfortaa (display) + DM Sans (besedilo)
   ========================================================================== */

:root{
  /* ploskve */
  --bg:            0 0% 100%;
  --soft:          240 6% 97%;
  --soft-2:        0 0% 98%;
  --ink:           0 0% 1%;

  /* besedilo */
  --fg:            260 12% 18%;
  --fg-muted:      260 6% 45%;
  --border:        260 8% 88%;

  /* znamka */
  --primary:       266 84% 46%;
  --primary-deep:  266 94% 31%;
  --teal:          168 96% 33%;
  --gold:          38 89% 63%;

  --nav-footer-bg: 262 22% 12%;

  --radius:        1.25rem;
  --shell:         min(99vw, 1800px);
  --card-shadow:   0 8px 30px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.1);

  --ease:          cubic-bezier(.22,1,.36,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:hsl(var(--bg));
  color:hsl(var(--fg));
  font-family:"DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:hsl(var(--primary)/.18); }

/* --------------------------------------------------------------- tipografija */
.font-display{ font-family:Comfortaa, ui-sans-serif, system-ui, sans-serif; }

.eyebrow{
  font-size:12px; font-weight:500; letter-spacing:2.5px;
  text-transform:uppercase; color:hsl(var(--fg)/.75); margin:0;
}

h1,h2,h3{ font-family:Comfortaa, ui-sans-serif, system-ui, sans-serif; margin:0; }

.h2{
  font-size:clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
  font-weight:700; line-height:1.02; letter-spacing:-.025em;
  color:hsl(var(--fg)); margin:1.25rem 0 0;
  text-wrap:balance;
}

.lead{
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);
  line-height:1.7; color:hsl(var(--fg)/.75);
  margin:1.25rem auto 0; max-width:42rem;
}

/* --------------------------------------------------------------- postavitev */
.wrap{ margin-inline:auto; padding-inline:1.5rem; }
.wrap-4{ max-width:56rem; }
.wrap-5{ max-width:64rem; }
.wrap-6{ max-width:72rem; }
.wrap-wide{ max-width:88rem; }
.center{ text-align:center; }

/* levo poravnana glava sekcije (ne sredinsko) */
.sec-head{ max-width:46rem; }
.lead--left{ margin-left:0; margin-right:0; text-align:left; }
.divider.divider--left{ text-align:left; }

section{ position:relative; }
.sec-soft{ background:hsl(var(--soft)); }
.sec-soft-2{ background:hsl(var(--soft-2)); }
.pad{ padding-block:clamp(4.5rem,3rem + 7vw,8rem); }

/* ------------------------------------------------------------------ navigacija
   Svetla vrstica na vrhu, fiksna cez celotno sirino.
   -------------------------------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:transparent; border:0; box-shadow:none;
}
/* plavajoč zaobljen stekleni bar (liquid glass) */
.nav__bar{
  width:min(100% - 2rem, 86rem);
  margin:.7rem auto 0;
  display:flex; align-items:center; gap:1.5rem;
  padding:.7rem clamp(1rem,2.5vw,1.9rem);
  background:hsl(var(--bg)/.55);
  backdrop-filter:blur(22px) saturate(1.8); -webkit-backdrop-filter:blur(22px) saturate(1.8);
  border:1px solid hsl(0 0% 100% / .5);
  border-radius:1.5rem;
  box-shadow:inset 0 1px 0 hsl(0 0% 100% / .55), 0 12px 32px -20px rgba(22,16,44,.45);
  transition:box-shadow .35s var(--ease), border-color .35s, background .35s, margin .35s;
}
.nav.is-stuck .nav__bar{
  background:hsl(var(--bg)/.62);
  border-color:hsl(0 0% 100% / .55);
  box-shadow:inset 0 1px 0 hsl(0 0% 100% / .6), 0 18px 44px -24px rgba(22,16,44,.5);
}

/* znamka */
.nav__brand{ display:flex; align-items:center; gap:.6rem; flex:0 0 auto; }
.nav__brand img{ height:36px; width:auto; }
.nav__brand-tx{ display:flex; flex-direction:column; line-height:1; }
.nav__brand-tx b{ font-family:Comfortaa,sans-serif; font-size:1.3rem; font-weight:700; letter-spacing:-.01em; color:hsl(var(--fg)); }
.nav__brand-tx small{ font-size:.55rem; font-weight:600; letter-spacing:.22em; color:hsl(var(--fg)/.5); margin-top:.28rem; }

/* meni */
.nav__menu{ display:none; flex:1 1 auto; justify-content:center; align-items:center; gap:clamp(1.25rem,2.4vw,2.5rem); }
.nav__menu a{
  font-size:.925rem; font-weight:600; color:hsl(var(--fg)/.82); white-space:nowrap;
  position:relative; padding-block:.4rem; transition:color .25s;
}
.nav__menu a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; border-radius:2px;
  background:hsl(var(--primary)); transition:right .3s var(--ease);
}
.nav__menu a:hover{ color:hsl(var(--primary)); }
.nav__menu a:hover::after{ right:0; }

/* desna stran */
.nav__right{ display:flex; align-items:center; gap:.6rem; flex:0 0 auto; margin-left:auto; }
.nav__circle{
  width:44px; height:44px; border-radius:999px; flex:0 0 auto;
  display:none; align-items:center; justify-content:center;
  border:1px solid hsl(var(--border)); color:hsl(var(--fg)); background:hsl(var(--bg));
  transition:border-color .25s, color .25s, transform .25s var(--ease);
}
.nav__circle:hover{ border-color:hsl(var(--primary)); color:hsl(var(--primary)); transform:translateY(-1px); }
.nav__circle svg{ width:18px; height:18px; }
.nav__cta{
  display:none; align-items:center; gap:.5rem;
  padding:.75rem 1.35rem; border-radius:999px; white-space:nowrap;
  background:hsl(var(--nav-footer-bg)); color:#fff;
  font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  transition:background .25s, transform .25s var(--ease);
}
.nav__cta:hover{ background:hsl(var(--primary)); transform:translateY(-1px); }
.nav__cta svg{ width:15px; height:15px; }
.nav__burger{
  width:44px; height:44px; border-radius:999px; flex:0 0 auto;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border:1px solid hsl(var(--border)); background:hsl(var(--bg)); color:hsl(var(--fg));
}
.nav__burger i{ display:block; width:18px; height:2px; border-radius:2px; background:currentColor; }

@media (min-width:920px){
  .nav__bar{ position:relative; }
  .nav__menu{ display:flex; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); flex:0 0 auto; }
  .nav__circle{ display:inline-flex; }
  .nav__cta{ display:inline-flex; }
  .nav__burger{ display:none; }
}

/* združena sekcija: Zakaj Webnite (levo) + obrazec (desno) */
.whyform__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,1rem + 3vw,3.75rem);align-items:start}
@media (max-width:880px){.whyform__grid{grid-template-columns:1fr;gap:2rem}}
.whyform__intro .eyebrow{margin-left:0}
.whylist{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:1.15rem}
.whylist li{display:flex;gap:.9rem;align-items:flex-start}
.whylist__ic{flex:0 0 auto;width:2.5rem;height:2.5rem;border-radius:.75rem;display:inline-flex;align-items:center;justify-content:center;background:hsl(var(--primary)/.1);color:hsl(var(--primary))}
.whylist__ic svg{width:1.2rem;height:1.2rem}
.whylist b{font-family:Comfortaa,sans-serif;font-size:1rem;font-weight:700;letter-spacing:-.01em;color:hsl(var(--fg));display:block}
.whylist p{margin:.2rem 0 0;font-size:.9rem;line-height:1.5;color:hsl(var(--fg)/.68)}
.formcard{position:sticky;top:5.5rem;background:hsl(var(--bg));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:clamp(1.5rem,1.1rem + 2vw,2.4rem);box-shadow:var(--card-shadow)}
@media (max-width:880px){.formcard{position:static}}
.formcard h3{font-family:Comfortaa,sans-serif;font-size:clamp(1.3rem,1.1rem + 1vw,1.6rem);letter-spacing:-.02em;margin:0 0 .35rem}
.formcard .sub{color:hsl(var(--fg-muted));font-size:.95rem;margin:0 0 1.4rem}
.formcard .form{max-width:none;margin:0}
.formcard .form .btn{align-self:stretch;justify-content:center}
/* proces v levem stolpcu whyform: navpično zložen */
.whyform__intro .steps{ grid-template-columns:1fr; margin-top:1.75rem; }
.whyform__intro .incl{ margin-top:1.5rem; }
.whyform__intro .incl ul{ grid-template-columns:1fr; }

/* preklop jezika (SL/EN) — rahlo liquid glass */
.lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:hsl(0 0% 100%/.5);border:1px solid hsl(0 0% 100%/.55);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:inset 0 1px 0 hsl(0 0% 100%/.55);flex:0 0 auto}
.lang__btn{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:hsl(var(--fg)/.55);
  padding:.32rem .58rem;border-radius:999px;text-decoration:none;line-height:1;cursor:pointer;
  transition:color .2s,background .2s,box-shadow .2s}
.lang__btn.is-active{color:hsl(var(--fg));background:hsl(0 0% 100%/.92);box-shadow:0 2px 8px -3px rgba(0,0,0,.28)}
.lang__btn:not(.is-active):hover{color:hsl(var(--fg)/.9)}

/* na telefonu: ožji robovi in rahlo večji radij */
@media (max-width:640px){
  .nav__bar{
    width:auto; margin:.6rem .8rem 0;
    padding:.5rem .7rem .5rem 1.1rem;
    border-radius:1.6rem;
  }
}

/* ------------------------------------------------- svetel deljen hero (lhero) */
.lhero{
  position:relative; overflow:hidden;
  padding-top:clamp(6rem,5rem + 4vw,8rem);
  padding-bottom:clamp(2.5rem,2rem + 3vw,4rem);
  background:
    radial-gradient(60% 60% at 85% 0%, hsl(var(--primary)/.06), transparent 70%),
    hsl(var(--bg));
}
.lhero__grid{
  width:100%; max-width:88rem; margin-inline:auto; padding-inline:clamp(1rem,3vw,2.5rem);
  display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,4vw,4rem); align-items:center;
}
@media (min-width:1000px){ .lhero__grid{ grid-template-columns:1.02fr 1fr; } }

.lhero__eyebrow{
  margin:0; font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:hsl(var(--primary));
}
.lhero h1{
  margin:1.25rem 0 0;
  font-family:Comfortaa,sans-serif; font-weight:700;
  font-size:clamp(2.3rem,1.3rem + 4vw,4rem); line-height:1.04; letter-spacing:-.03em;
  color:hsl(var(--fg)); text-wrap:balance;
}
.lhero h1 .grad-ink{ color:hsl(var(--primary)); }
.lhero__sub{
  margin:1.5rem 0 0; max-width:34rem;
  font-size:clamp(1rem,.95rem + .3vw,1.15rem); line-height:1.65; color:hsl(var(--fg)/.72);
}
.lhero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }
.btn--outline{ border:1.5px solid hsl(var(--border)); color:hsl(var(--fg)); background:hsl(var(--bg)); }
.btn--outline:hover{ border-color:hsl(var(--primary)); color:hsl(var(--primary)); }

/* zaupanja vredni / logotipi strank */
.trust{ margin-top:clamp(2.5rem,3vw,3.5rem); }
.trust__label{ margin:0 0 1.1rem; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:hsl(var(--fg)/.45); }
.trust__row{ display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2rem; }
.trust__ph{
  height:2rem; min-width:5.5rem; border-radius:.5rem;
  display:flex; align-items:center; justify-content:center;
  background:hsl(var(--soft)); border:1px dashed hsl(var(--border));
  font-size:.7rem; font-weight:600; letter-spacing:.05em; color:hsl(var(--fg)/.4); padding-inline:.75rem;
}

/* medij: slika + statisticna kartica */
.lhero__media{ position:relative; }
.lhero__img{
  position:relative; z-index:1; overflow:hidden;
  aspect-ratio:16/12; width:100%;
  border-radius:220px 24px 24px 220px;
  box-shadow:0 30px 70px -40px rgba(30,10,60,.5);
}
@media (max-width:640px){ .lhero__img{ border-radius:32px; aspect-ratio:16/11; } }
.lhero__img img{ width:100%; height:100%; object-fit:cover; }

/* pikčasti okras */
.lhero__dots{
  position:absolute; z-index:0; left:-1.5rem; bottom:2rem; width:9rem; height:6rem;
  background-image:radial-gradient(hsl(var(--primary)/.28) 1.6px, transparent 1.6px);
  background-size:16px 16px;
}
/* mehka lisa */
.lhero__blob{
  position:absolute; z-index:0; left:-2rem; top:30%; width:12rem; height:12rem;
  border-radius:50%; background:radial-gradient(circle, hsl(var(--primary)/.14), transparent 70%);
  filter:blur(6px);
}

.lhero__stats{
  position:absolute; z-index:2; right:clamp(-.5rem,-1vw,.5rem); bottom:clamp(1rem,3vw,2.5rem);
  width:min(24rem,88%);
  background:hsl(var(--bg)); border:1px solid hsl(var(--border)/.8);
  border-radius:1.25rem; box-shadow:0 24px 60px -30px rgba(30,10,60,.55);
  padding:1.5rem 1.6rem;
  display:grid; grid-template-columns:1fr 1fr; gap:1.25rem 1.5rem;
}
@media (max-width:640px){ .lhero__stats{ position:static; width:auto; margin-top:1.25rem; } }
.lstat{ display:flex; flex-direction:column; gap:.15rem; }
.lstat__ic{
  width:2rem; height:2rem; border-radius:.6rem; margin-bottom:.35rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:hsl(var(--primary)/.1); color:hsl(var(--primary));
}
.lstat__ic svg{ width:1.1rem; height:1.1rem; }
.lstat b{ font-family:Comfortaa,sans-serif; font-size:1.5rem; font-weight:700; letter-spacing:-.02em; color:hsl(var(--fg)); }
.lstat span{ font-size:.8rem; color:hsl(var(--fg)/.6); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:999px; padding:.7rem 1.4rem;
  font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  transition:transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn--solid{ background:hsl(var(--primary)); color:#fff; box-shadow:0 10px 24px -12px hsl(var(--primary)/.9); }
.btn--solid:hover{ background:hsl(var(--primary-deep)); }
.btn--ghost{ border:1px solid rgba(255,255,255,.45); color:#fff; backdrop-filter:blur(6px); background:rgba(255,255,255,.08); }
.btn--ghost:hover{ background:rgba(255,255,255,.18); }

/* mobilni meni */
.mobmenu{
  position:fixed; inset:0; z-index:70; background:hsl(var(--nav-footer-bg));
  display:flex; flex-direction:column; padding:1.5rem;
  transform:translateY(-100%); transition:transform .45s var(--ease); color:#fff;
}
.mobmenu.is-open{ transform:none; }
.mobmenu__top{ display:flex; align-items:center; justify-content:space-between; }
.mobmenu__top img{ height:26px; filter:brightness(0) invert(1); }
.mobmenu nav{ display:flex; flex-direction:column; gap:.25rem; margin-top:2.5rem; }
.mobmenu nav a{
  font-family:Comfortaa, sans-serif; font-size:1.6rem; font-weight:700;
  letter-spacing:-.02em; padding-block:.5rem; border-bottom:1px solid rgba(255,255,255,.08);
}

/* ----------------------------------------------------------------------- hero */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  background:hsl(var(--soft)/.35); padding:.75rem;
}
.hero__frame{
  position:relative; flex:1 1 auto; width:100%; max-width:var(--shell);
  margin-inline:auto; border-radius:20px; overflow:hidden; background:#000;
  box-shadow:var(--card-shadow); display:flex; align-items:center;
}
.hero__frame img.hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:right center; z-index:0;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to right, rgba(0,0,0,.66) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.05) 100%);
}
.hero__scrim--top{
  background:linear-gradient(to bottom, rgba(0,0,0,.45) 0%, transparent 28%, transparent 70%, rgba(0,0,0,.35) 100%);
}
.hero__inner{
  position:relative; z-index:10; width:100%;
  padding:4.5rem clamp(1.5rem,5vw,5rem);
  color:#fff;
}
.hero__content{ max-width:48rem; }

.hero h1{
  font-size:clamp(2rem, 1.1rem + 4.2vw, 3.9rem);
  font-weight:800; line-height:1.02; letter-spacing:-.025em; color:#fff;
  text-wrap:balance;
}
.hero p.hero__sub{
  margin:1.5rem 0 0; max-width:36rem;
  font-size:clamp(1rem,.95rem + .3vw,1.15rem); line-height:1.65; color:rgba(255,255,255,.85);
}
.hero__tag{
  margin:2.25rem 0 0; font-size:.68rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.62);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }

.hero__kicker{
  margin:0 0 1.25rem; font-size:.72rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.6);
}

/* ------------------------------------------------------ animiran FX hero */
.hero--fx{
  background:radial-gradient(130% 120% at 72% 8%, #1c0b33 0%, #0b0616 58%, #070410 100%);
}
.fx__aurora{ position:absolute; inset:0; z-index:0; overflow:hidden; }

.orb{
  position:absolute; border-radius:50%; filter:blur(70px);
  opacity:.6; mix-blend-mode:screen; will-change:transform; pointer-events:none;
}
.orb--1{
  width:46vw; height:46vw; max-width:680px; max-height:680px; left:-8%; top:-14%;
  background:radial-gradient(circle at 50% 50%, hsl(266 92% 58%), transparent 66%);
  animation:drift1 24s var(--ease) infinite;
}
.orb--2{
  width:40vw; height:40vw; max-width:560px; max-height:560px; right:-10%; top:14%;
  background:radial-gradient(circle at 50% 50%, hsl(168 90% 45%), transparent 66%);
  animation:drift2 28s var(--ease) infinite;
}
.orb--3{
  width:36vw; height:36vw; max-width:520px; max-height:520px; left:28%; bottom:-22%;
  background:radial-gradient(circle at 50% 50%, hsl(38 92% 60%), transparent 68%);
  opacity:.42; animation:drift3 32s var(--ease) infinite;
}
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(14%,10%) scale(1.12); } }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-12%,8%) scale(1.08); } }
@keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(8%,-12%) scale(1.15); } }

.fx__net{ position:absolute; inset:0; z-index:1; width:100%; height:100%; }

.fx__grain{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.06;
  mix-blend-mode:overlay;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero--fx .hero__scrim{
  z-index:3;
  background:linear-gradient(to top right, rgba(5,3,12,.72) 0%, rgba(5,3,12,.30) 42%, transparent 72%);
}
.hero--fx .hero__inner{ z-index:4; }

/* gradientni poudarek v naslovih */
.grad{
  background:linear-gradient(100deg, hsl(266 92% 68%), hsl(168 90% 52%), hsl(38 92% 64%));
  background-size:220% 220%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 7s ease infinite;
}
@keyframes gradShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

/* --------------------------------------------------------------- storitve rail */
.rail-shell{ position:relative; margin-top:4rem; }
.rail-nav{
  position:absolute; right:1.5rem; top:-3.25rem; z-index:20;
  display:none; align-items:center; gap:.5rem;
}
.rail-nav button{
  width:2.5rem; height:2.5rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.8); background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px); display:inline-flex; align-items:center; justify-content:center;
  color:hsl(var(--fg)); transition:background .25s, transform .25s var(--ease), opacity .25s;
  box-shadow:0 6px 18px -10px rgba(0,0,0,.4);
}
.rail-nav button:hover{ background:#fff; transform:translateY(-2px); }
.rail-nav button[disabled]{ opacity:.35; pointer-events:none; }
@media (min-width:1024px){ .rail-nav{ display:flex; } }

.rail{
  display:flex; gap:1.25rem; overflow-x:auto; scroll-behavior:smooth;
  padding:1rem clamp(1rem,4vw,3rem) 2.5rem;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }

.svc{
  flex:0 0 auto; width:min(calc(100vw - 3rem), 360px);
  scroll-snap-align:center; cursor:pointer;
  border-radius:22px; overflow:hidden; background:#fff;
  border:1px solid hsl(var(--border)/.7);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.45);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  display:flex; flex-direction:column;
}
.svc:hover{ transform:translateY(-8px); box-shadow:0 26px 50px -28px rgba(0,0,0,.5); }
.svc__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:hsl(var(--soft)); }
.svc__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.svc:hover .svc__media img{ transform:scale(1.06); }
.svc__count{
  position:absolute; left:1rem; top:1rem; z-index:2;
  font-family:"Space Grotesk", ui-monospace, monospace;
  font-size:.7rem; letter-spacing:.14em; color:#fff;
  background:rgba(0,0,0,.42); backdrop-filter:blur(6px);
  padding:.3rem .6rem; border-radius:999px;
}
.svc__body{ padding:1.4rem 1.4rem 1.6rem; flex:1 1 auto; display:flex; flex-direction:column; }
.svc__kicker{
  font-size:.65rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:hsl(var(--primary));
}
.svc__title{ font-size:1.35rem; font-weight:700; letter-spacing:-.02em; margin:.55rem 0 0; }
.svc__desc{ font-size:.925rem; line-height:1.6; color:hsl(var(--fg)/.72); margin:.7rem 0 0; }
.svc__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:1.25rem; padding-top:1rem; border-top:1px dashed hsl(var(--border));
}
.svc__price{ font-size:.85rem; font-weight:700; color:hsl(var(--fg)); }
.svc__more{ font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:hsl(var(--primary)); display:inline-flex; align-items:center; gap:.35rem; }
.svc:hover .svc__more svg{ transform:translateX(3px); }
.svc__more svg{ width:14px; height:14px; transition:transform .3s var(--ease); }

/* večje kartice v railu (stran Storitve) */
.rail--lg .svc{ width:min(calc(100vw - 2.5rem), 432px); border-radius:26px; }
.rail--lg .svc__media{ aspect-ratio:16/11; }
.rail--lg .svc__body{ padding:1.7rem 1.7rem 1.9rem; }
.rail--lg .svc__title{ font-size:1.55rem; margin-top:.6rem; }
.rail--lg .svc__desc{ font-size:.98rem; margin-top:.8rem; }
.rail--lg .svc__price{ font-size:.92rem; }

/* --------------------------------------------------------------- citat + stevci */
.quote{
  font-family:Comfortaa, sans-serif;
  font-size:clamp(1.2rem,.9rem + 1.5vw,2.2rem);
  font-weight:500; line-height:1.25; letter-spacing:-.02em;
  color:hsl(var(--fg)/.9); margin:0; text-wrap:balance;
}
.quote-src{ display:flex; align-items:center; justify-content:center; gap:.75rem; margin-top:2rem; }
.quote-src span{ font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:hsl(var(--fg)/.6); }
.quote-src i{ display:block; width:2rem; height:1px; background:hsl(var(--border)); }

.stats{ display:grid; gap:1.25rem; grid-template-columns:1fr; margin-top:3.5rem; }
@media (min-width:640px){ .stats{ grid-template-columns:repeat(3,1fr); } }
.stat{
  background:#fff; border:1px solid hsl(var(--border)/.7); border-radius:var(--radius);
  padding:1.75rem 1.5rem; text-align:center;
  box-shadow:0 10px 30px -26px rgba(0,0,0,.5);
}
.stat b{
  display:block; font-family:Comfortaa, sans-serif; font-size:2.6rem; font-weight:800;
  letter-spacing:-.03em; line-height:1;
  background:linear-gradient(120deg, hsl(var(--primary)), hsl(var(--teal)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat small{ display:block; margin-top:.7rem; font-size:.85rem; line-height:1.5; color:hsl(var(--fg)/.7); }

/* ------------------------------------------------------------------- marquee */
.marquee{
  position:relative; overflow:hidden; margin-top:3.5rem;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
}
.marquee__track{ display:flex; width:max-content; gap:2.5rem; animation:marquee 42s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.marquee__item{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.95rem; font-weight:600; color:hsl(var(--fg)/.7); white-space:nowrap;
}
.marquee__item img{ height:20px; width:auto; opacity:.75; }

.divider{
  margin-top:4rem; padding-top:2.5rem; position:relative; text-align:center;
}
.divider::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  border-top:1px dashed hsl(var(--border));
}

/* -------------------------------------------------------------- temna izjava */
.band{
  width:100%; height:clamp(22rem,72vh,50rem); overflow:hidden; background:#030303;
  position:relative;
}
.band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; }
.band__cap{
  position:absolute; right:clamp(1.25rem,5vw,4rem); bottom:clamp(1.5rem,5vw,4rem);
  max-width:14rem; z-index:2;
  font-size:.625rem; font-weight:500; line-height:1.7; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.72);
}
.band__cap span{ display:block; }
.band--left .band__cap{ right:auto; left:clamp(1.25rem,5vw,4rem); }

/* ---------------------------------------------------------------- bento zakaj */
.bento{ display:grid; gap:1rem; grid-template-columns:1fr; margin-top:4rem; }
@media (min-width:768px){ .bento{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){
  .bento{ grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,minmax(0,1fr)); gap:1.25rem; }
  .bento > :nth-child(1){ grid-column:1/3; grid-row:1/3; }
  .bento > :nth-child(2){ grid-column:3/5; grid-row:1/2; }
  .bento > :nth-child(3){ grid-column:3/5; grid-row:2/3; }
  .bento > :nth-child(4){ grid-column:1/5; grid-row:3/4; }
}
.bcard{
  position:relative; height:100%; min-height:13rem; overflow:hidden;
  border-radius:1rem; background:#030303; color:#fff;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 12px 34px -24px rgba(0,0,0,.9);
  display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.bcard:hover{ transform:translateY(-4px); box-shadow:0 28px 50px -28px rgba(0,0,0,.9); }

/* besedilni del */
.bcard__txt{
  position:relative; z-index:2; flex:1 1 auto;
  display:flex; flex-direction:column; justify-content:center;
  padding:1.5rem;
}
.bcard__txt::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:radial-gradient(120% 100% at 100% 0%, hsl(var(--primary)/.32), transparent 62%);
}
.bcard--lg .bcard__txt{ flex:0 0 auto; justify-content:flex-start; }
@media (min-width:768px){ .bcard--lg .bcard__txt{ padding:2rem; } }

.bcard__i{
  position:relative; z-index:2; width:2.4rem; height:2.4rem; border-radius:.75rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:hsl(var(--gold));
}
.bcard__i svg{ width:1.15rem; height:1.15rem; }
.bcard h3{ position:relative; z-index:2; font-size:1.2rem; font-weight:700; letter-spacing:-.02em; margin:1.1rem 0 0; }
.bcard p{ position:relative; z-index:2; margin:.7rem 0 0; font-size:.9rem; line-height:1.65; color:rgba(255,255,255,.72); }

/* medijski panel z lastnim video oglasom */
.bcard__media{
  position:relative; flex:0 0 auto; min-height:10rem; overflow:hidden; background:#000;
}
.bcard--lg .bcard__media{ flex:1 1 auto; min-height:12rem; }
.bcard__media video,
.bcard__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
@media (min-width:1024px){
  .bcard--wide{ flex-direction:row; }
  .bcard--wide .bcard__media{ width:38%; max-width:20rem; min-height:11rem; }
  .bcard--wide .bcard__txt{ padding:2rem; justify-content:center; }
}

/* ------------------------------------------------------------------- panoge */
.inds{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; margin-top:3.5rem; }
@media (min-width:640px){ .inds{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .inds{ grid-template-columns:repeat(3,1fr); gap:1.25rem; } }
.ind{
  position:relative; border-radius:1rem; overflow:hidden; background:#fff;
  border:1px solid rgba(0,0,0,.06); box-shadow:0 14px 34px -26px rgba(0,0,0,.7);
  aspect-ratio:4/3; display:block;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.ind:hover{ transform:translateY(-6px) rotate(-.6deg); box-shadow:0 26px 46px -28px rgba(0,0,0,.75); }
.ind img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.ind:hover img{ transform:scale(1.07); }
.ind__lab{
  position:absolute; inset:auto 0 0 0; padding:1rem;
  background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.15) 70%, transparent);
  color:#fff;
}
.ind__lab b{ display:block; font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:hsl(var(--gold)); }
.ind__lab span{ display:block; font-size:.9rem; font-weight:600; margin-top:.2rem; }

/* ------------------------------------------------------ tipografski pas */
.statement{
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:clamp(5rem,4rem + 8vw,9rem);
  background:radial-gradient(120% 130% at 50% 0%, #1b0b31 0%, #0b0616 62%, #080411 100%);
  color:#fff;
}
.statement__fx{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.statement__fx .orb{ opacity:.5; }
.statement__fx .orb--1{ left:-14%; top:-30%; }
.statement__fx .orb--2{ right:-14%; top:-10%; }
.statement__fx .orb--3{ left:36%; bottom:-40%; }
.statement__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%, #000, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 40%, #000, transparent 78%);
}
.statement__in{ position:relative; z-index:2; }
.statement__eyebrow{
  margin:0; font-size:.72rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}
.statement__h{
  margin:1.25rem auto 0; max-width:20ch;
  font-family:Comfortaa,sans-serif; font-weight:700;
  font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem); line-height:1.06; letter-spacing:-.025em;
  color:#fff; text-wrap:balance;
}
.statement__p{
  margin:1.5rem auto 0; max-width:44rem;
  font-size:clamp(1rem,.95rem + .3vw,1.15rem); line-height:1.7; color:rgba(255,255,255,.75);
}

/* ---------------------------------------------------------------- reference */
.works{ display:grid; gap:1.25rem; grid-template-columns:1fr; margin-top:3.5rem; }
@media (min-width:700px){ .works{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .works{ grid-template-columns:repeat(3,1fr); } }
.work{
  position:relative; border-radius:1rem; overflow:hidden; background:#030303;
  border:1px solid hsl(var(--border)/.6);
  box-shadow:0 14px 36px -28px rgba(0,0,0,.8);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  display:block;
}
.work:hover{ transform:translateY(-6px); box-shadow:0 28px 52px -30px rgba(0,0,0,.85); }
.work__img{ aspect-ratio:16/11; overflow:hidden; }
.work__img img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform 1.1s var(--ease); }
.work:hover .work__img img{ transform:scale(1.05); }
.work__meta{ padding:1.1rem 1.25rem 1.35rem; background:#fff; }
.work__meta b{ display:block; font-family:Comfortaa,sans-serif; font-size:1.05rem; font-weight:700; letter-spacing:-.01em; }
.work__meta small{ display:block; margin-top:.3rem; font-size:.82rem; color:hsl(var(--fg)/.65); }
.work__tag{
  display:inline-block; margin-top:.75rem; font-size:.62rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:hsl(var(--primary));
  background:hsl(var(--primary)/.08); border-radius:999px; padding:.25rem .6rem;
}

/* ------------------------------------------------------------------- kontakt */
.cta-h2{
  font-family:Comfortaa,sans-serif; font-weight:800;
  font-size:clamp(2rem,1.2rem + 3.6vw,3.75rem); line-height:1.02; letter-spacing:-.025em;
  display:flex; flex-wrap:wrap; justify-content:center; gap:0 .3em; margin:0;
}
.ring{
  display:inline-block; border-radius:999px; padding:2px;
  background:linear-gradient(90deg, hsl(var(--primary)), hsl(var(--gold)), hsl(var(--teal)), hsl(var(--primary)));
  background-size:300% 300%; animation:meshflow 5s ease infinite;
}
@keyframes meshflow{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.ring > a{
  display:inline-block; border-radius:999px; background:#fff;
  padding:1rem 2.5rem; font-size:.8rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:hsl(var(--fg));
  transition:background .3s, color .3s;
}
.ring > a:hover{ background:hsl(var(--fg)); color:#fff; }

.contact-links{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  margin-top:3.5rem;
}
@media (min-width:640px){ .contact-links{ flex-direction:row; justify-content:center; gap:2rem; } }
.contact-links a{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.875rem; font-weight:600; color:hsl(var(--fg)/.75); transition:color .25s;
}
.contact-links a:hover{ color:hsl(var(--primary)); }
.contact-links svg{ width:1rem; height:1rem; }
.addr{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:1.5rem; font-size:.75rem; color:hsl(var(--fg)/.7);
}
.addr svg{ width:.9rem; height:.9rem; flex:0 0 auto; }

/* -------------------------------------------------------------------- noga
   Full-width, temna, sega do dna strani; barven logotip (vijolična ikona).
   -------------------------------------------------------------------------- */
.foot{ background:hsl(var(--nav-footer-bg)); padding:0; }
.foot__frame{
  width:100%; max-width:none; margin:0;
  border-radius:0; overflow:hidden; box-shadow:none;
  background:transparent; color:rgba(255,255,255,.72); position:relative;
}
.foot__frame::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 90% at 12% 0%, hsl(var(--primary)/.22), transparent 55%);
}
.foot__in{
  position:relative; z-index:2;
  width:100%; max-width:82rem; margin-inline:auto;
  display:flex; flex-direction:column;
  padding:clamp(3rem,4vw,4.5rem) 1.5rem 2rem;
}
.foot__top{ display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media (min-width:820px){ .foot__top{ grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; } }
/* barven logotip: brez invert filtra -> vijolična ikona + belo besedilo na temnem */
.foot__brand img{ height:34px; width:auto; max-width:none; filter:none; }
.foot__brand p{
  margin:1.25rem 0 0; max-width:26rem;
  font-family:Comfortaa,sans-serif; font-size:1rem; font-weight:600;
  line-height:1.5; letter-spacing:-.01em; color:#fff;
}
.foot h4{
  font-family:Comfortaa,sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:0 0 1rem;
}
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.foot ul a{ font-size:.875rem; color:rgba(255,255,255,.72); transition:color .25s, transform .25s var(--ease); display:inline-block; }
.foot ul a:hover{ color:#fff; transform:translateX(3px); }
.foot__bot{
  margin-top:3rem; padding-top:1.75rem; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:1rem;
  font-size:.75rem; color:rgba(255,255,255,.5);
  border-top:1px solid rgba(255,255,255,.1);
}
/* e-poštni gumb z malimi črkami */
.btn[href^="mailto"]{ text-transform:none; letter-spacing:normal; }

/* === sekcija mobilna optimizacija (telefon, temno) === */
.mobsec{ position:relative; background:#0a0a0f; color:#fff; text-align:center; height:300vh; }
.mobsec__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column;
  align-items:center; padding:clamp(3rem,2.4rem + 2vw,4.25rem) 0 1rem; }
.mobsec__lead{ margin-top:.9rem; }
.mobsec .eyebrow{ color:#fff; justify-content:center; }
.mobsec .eyebrow::before,.mobsec .eyebrow::after{ background:hsl(var(--primary)); opacity:.9; }
.mobsec h2{ color:#fff; }
.mobsec__lead{ color:rgba(255,255,255,.62); max-width:42rem; margin:1.25rem auto 0;
  font-size:clamp(1rem,.95rem + .25vw,1.15rem); line-height:1.65; }
.mobsec__cta{ margin-top:2rem; }
.mobsec .btn--light{ background:#fff; color:#0a0a0f; border:0; }
.mobsec .btn--light:hover{ background:#ececf1; }
.mobsec__stage{ position:relative; flex:1 1 auto; min-height:0; width:100%; display:flex;
  justify-content:center; align-items:center; margin-top:clamp(.5rem,.3rem + 1vw,1.25rem); }
.mobsec__glow{ position:absolute; left:50%; top:0; transform:translateX(-50%); width:min(120vw,640px); height:100%;
  background:radial-gradient(ellipse at 50% 40%, hsl(var(--primary)/.5), transparent 66%); filter:blur(38px); z-index:0; }
/* pravi iPhone 15 Pro okvir (PNG) + zaslon na točni poziciji izreza */
.phone{ position:relative; z-index:1; height:min(58vh,540px); width:auto; aspect-ratio:365 / 750;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
@media (min-width:900px){ .phone{ height:min(72vh,710px); } }
.phone__frame{ position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; display:block; }
.phone__screen{ position:absolute; left:4.11%; top:1.73%; width:91.51%; height:96.67%; z-index:1;
  overflow:hidden; background:#fff; border-radius:12% / 5.6%; }
.phone__screen img{ width:100%; display:block; }
/* clean mobilno optimizirana trgovina v telefonu */
.pui{ position:absolute; inset:0; background:#fff; color:#111; text-align:left;
  font-family:"DM Sans",sans-serif; overflow:hidden; }
.pui__top{ position:relative; z-index:2; background:#fff; }
.pui__body{ position:relative; z-index:1; padding-bottom:1.2rem; will-change:transform; }
.shop__section{ font-family:Comfortaa,sans-serif; font-weight:700; font-size:.95rem; margin:1.1rem 1.15rem .1rem; }
.shop__status{ display:flex; justify-content:space-between; align-items:center; padding:.95rem 1.5rem .2rem;
  font-size:.82rem; font-weight:700; color:#111; }
.shop__time{ letter-spacing:.01em; }
.shop__sys{ display:inline-flex; align-items:center; gap:5px; }
.shop__sys svg{ height:11px; width:auto; color:#111; display:block; }
.shop__batt{ position:relative; width:23px; height:11px; border:1px solid rgba(17,17,17,.4); border-radius:3px; }
.shop__batt::before{ content:""; position:absolute; inset:1.5px; right:30%; background:#111; border-radius:1px; }
.shop__batt::after{ content:""; position:absolute; right:-2.5px; top:3px; width:2px; height:5px;
  background:rgba(17,17,17,.4); border-radius:0 2px 2px 0; }
.shop__bar{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.15rem .6rem; }
.shop__brand{ font-family:Comfortaa,sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:-.01em; }
.shop__icons{ display:flex; gap:.5rem; }
.shop__ic{ position:relative; width:36px; height:36px; border-radius:50%; background:#f1f1f4; border:0;
  display:inline-flex; align-items:center; justify-content:center; color:#111; }
.shop__ic svg{ width:17px; height:17px; }
.shop__badge{ position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; border-radius:999px;
  background:hsl(var(--primary)); color:#fff; font-size:.6rem; font-weight:700; display:flex; align-items:center;
  justify-content:center; padding:0 3px; }
.shop__hero{ position:relative; margin:.4rem 1.15rem 0; border-radius:20px; overflow:hidden; aspect-ratio:1/1; }
.shop__hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.shop__chip{ position:absolute; top:.7rem; left:.7rem; background:rgba(255,255,255,.9); color:#111;
  font-size:.66rem; font-weight:700; padding:.25rem .6rem; border-radius:999px; }
.shop__heroInfo{ position:absolute; left:.7rem; right:.7rem; bottom:.7rem; display:flex; align-items:flex-end;
  justify-content:space-between; gap:.5rem; background:rgba(255,255,255,.92); border-radius:14px; padding:.6rem .8rem;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.shop__name{ margin:0; font-weight:700; font-size:.9rem; }
.shop__price{ margin:.1rem 0 0; font-size:.82rem; color:#555; }
.shop__add{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:hsl(var(--primary)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:600; line-height:1; }
.shop__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; padding:.9rem 1.15rem 0; }
.shop__p img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px; display:block; }
.shop__p p{ margin:.4rem 0 0; font-size:.78rem; font-weight:600; }
.shop__p b{ font-size:.78rem; color:#555; font-weight:700; }
/* navadna spletna stran v telefonu */
.web__bar{ display:flex; align-items:center; justify-content:space-between; padding:.85rem 1.15rem .6rem; }
.web__brand{ font-family:Comfortaa,sans-serif; font-weight:700; font-size:1.1rem; letter-spacing:-.01em; }
.web__burger{ display:inline-flex; flex-direction:column; gap:3.5px; }
.web__burger i{ display:block; width:18px; height:2px; border-radius:2px; background:#111; }
.web__hero{ position:relative; margin:0; aspect-ratio:4/3.4; overflow:hidden; }
.web__hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.web__hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.05) 60%); }
.web__heroTxt{ position:absolute; left:1.1rem; right:1.1rem; bottom:1rem; z-index:1; color:#fff; }
.web__eyebrow{ font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:hsl(var(--gold)); margin:0; }
.web__h1{ font-family:Comfortaa,sans-serif; font-weight:700; font-size:1.3rem; line-height:1.15; letter-spacing:-.02em; margin:.4rem 0 0; color:#fff; }
.web__btn{ display:inline-block; margin-top:.8rem; background:#fff; color:#111; font-weight:700; font-size:.8rem;
  padding:.5rem 1.1rem; border-radius:999px; }
.web__sec{ padding:1.2rem 1.15rem 0; }
.web__secH{ font-family:Comfortaa,sans-serif; font-weight:700; font-size:1.02rem; margin:0 0 .2rem; }
.web__row{ display:flex; gap:.75rem; align-items:flex-start; margin-top:.9rem; }
.web__ic{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; background:hsl(var(--primary)/.1); color:hsl(var(--primary));
  display:inline-flex; align-items:center; justify-content:center; }
.web__ic svg{ width:18px; height:18px; }
.web__row b{ font-size:.86rem; font-weight:700; display:block; }
.web__row p{ margin:.15rem 0 0; font-size:.74rem; line-height:1.5; color:#666; }
/* === MacBook + iPhone skupaj === */
.devices{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(.1rem,1vw,1.5rem); width:100%; }
.devices .phone{ flex:0 0 auto; height:clamp(340px,50vh,470px); }
@media (min-width:900px){ .devices .phone{ height:clamp(380px,56vh,510px); } }
.mac{ position:relative; z-index:1; flex:0 0 auto; width:clamp(320px,50vw,640px); aspect-ratio:800/489;
  filter:drop-shadow(0 28px 56px rgba(0,0,0,.5)); }
.mac__frame{ position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; display:block; }
.mac__screen{ position:absolute; left:9.38%; top:3.89%; width:81.25%; height:85.89%; z-index:1; overflow:hidden; background:#fff; }
/* desktop UI v Macu */
.dsk{ position:absolute; inset:0; background:#fff; color:#111; font-family:"DM Sans",sans-serif; overflow:hidden; text-align:left; }
.dsk__bar{ display:flex; align-items:center; justify-content:space-between; padding:.55rem 1.1rem; border-bottom:1px solid #eee;
  position:relative; z-index:2; background:#fff; }
.dsk__body{ position:relative; z-index:1; will-change:transform; }
.dsk__brand{ font-family:Comfortaa,sans-serif; font-weight:700; font-size:.86rem; }
.dsk__nav{ display:flex; gap:1rem; }
.dsk__nav span{ font-size:.62rem; font-weight:600; color:#555; }
.dsk__cta{ font-size:.6rem; font-weight:700; background:hsl(var(--primary)); color:#fff; padding:.3rem .65rem; border-radius:999px; }
.dsk__hero{ position:relative; height:15rem; overflow:hidden; }
.dsk__feat{ padding:1.1rem 1.15rem .3rem; }
.dsk__featH{ font-family:Comfortaa,sans-serif; font-weight:700; font-size:.95rem; margin:0 0 .6rem; }
.dsk__featgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
.dsk__featgrid > div b{ font-size:.72rem; font-weight:700; display:block; }
.dsk__featgrid > div p{ margin:.2rem 0 0; font-size:.58rem; line-height:1.45; color:#666; }
.dsk__featic{ width:30px; height:30px; border-radius:9px; background:hsl(var(--primary)/.1); color:hsl(var(--primary));
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:.4rem; }
.dsk__featic svg{ width:15px; height:15px; }
.dsk__hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.dsk__hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.05) 62%); }
.dsk__heroTxt{ position:absolute; left:6%; top:50%; transform:translateY(-50%); z-index:1; color:#fff; max-width:54%; }
.dsk__eyebrow{ font-size:.58rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:hsl(var(--gold)); margin:0; }
.dsk__h1{ font-family:Comfortaa,sans-serif; font-weight:700; font-size:clamp(1rem,2.1vw,1.5rem); line-height:1.1; margin:.35rem 0 0; color:#fff; }
.dsk__sub{ font-size:.66rem; color:rgba(255,255,255,.85); margin:.35rem 0 0; line-height:1.4; }
.dsk__btn{ display:inline-block; margin-top:.6rem; background:#fff; color:#111; font-weight:700; font-size:.62rem; padding:.4rem .9rem; border-radius:999px; }
/* desktop trgovina */
.dsk--shop .dsk__strip{ position:relative; height:9.5rem; overflow:hidden; }
.dsk--shop .dsk__strip img{ width:100%; height:100%; object-fit:cover; }
.dsk--shop .dsk__strip .dsk__heroTxt{ max-width:50%; }
.dsk__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; padding:.7rem 1.1rem; }
.dsk__p img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:9px; display:block; }
.dsk__p p{ margin:.3rem 0 0; font-size:.6rem; font-weight:600; }
.dsk__p b{ font-size:.58rem; color:#555; font-weight:700; }
/* mobilna optimizacija sekcije naprav: Mac zadaj, iPhone spredaj (prekrivanje) */
@media (max-width:760px){
  .mobsec{ height:230vh; }
  .devices{ display:block; position:relative; width:min(94vw,460px); margin-inline:auto; }
  .devices .mac{ width:100%; }
  .devices .phone{ position:absolute; right:-4%; bottom:-16%; width:43%; height:auto; z-index:5;
    filter:drop-shadow(0 16px 30px rgba(0,0,0,.6)); }
}
/* enoten črn Dynamic Island (prekrije prazen izrez med pillom in kamero) */
.phone__island{ position:absolute; z-index:3; left:49.7%; transform:translateX(-50%); top:2.65%; width:27.4%; height:4.1%;
  background:#000; border-radius:999px; }
/* e-novice — kompaktno v stolpcu Kontakt (noga ne naraste) */
.foot__sub{ margin-top:1.1rem; max-width:none; gap:.5rem; }
.foot__sub-h{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:700; display:block; }
.foot__sub-row{ display:flex; gap:.4rem; }
.foot__sub input[type=email]{ flex:1 1 auto; min-width:0; padding:.58rem .85rem; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:.85rem; }
.foot__sub input[type=email]::placeholder{ color:rgba(255,255,255,.45); }
.foot__sub input[type=email]:focus{ outline:none; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.12); }
.foot__sub .btn{ flex:0 0 auto; margin:0; padding:.58rem .7rem; }
.foot__sub .btn svg{ width:16px; height:16px; }
.foot__sub .form-msg{ margin:.15rem 0 0; font-size:.78rem; color:rgba(255,255,255,.7); }
.foot__sub .form-msg.ok{ color:hsl(var(--teal)); }
.foot__bot nav{ display:flex; flex-wrap:wrap; gap:1.25rem; }
.foot__bot nav a{ color:rgba(255,255,255,.6); transition:color .25s; }
.foot__bot nav a:hover{ color:#fff; }

/* ==========================================================================
   PODSTRANI — komponente storitvenih strani
   ========================================================================== */

/* ---- temni aurora hero (brez canvasa) --------------------------------- */
.subhero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:9rem 0 clamp(3.5rem,3rem + 5vw,6rem);
  background:radial-gradient(130% 120% at 74% 6%, #1c0b33 0%, #0b0616 60%, #070410 100%);
  color:#fff;
}
.subhero__fx{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.subhero__fx .orb{ opacity:.5; }
.subhero__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 60% 20%, #000, transparent 80%);
          mask-image:radial-gradient(120% 90% at 60% 20%, #000, transparent 80%);
}
.subhero__in{ position:relative; z-index:2; }
.subhero .eyebrow{ color:rgba(255,255,255,.62); }
.subhero h1{
  margin:1rem 0 0; max-width:18ch;
  font-family:Comfortaa,sans-serif; font-weight:700;
  font-size:clamp(2.1rem,1.3rem + 3.6vw,3.9rem); line-height:1.03; letter-spacing:-.025em;
  color:#fff; text-wrap:balance;
}
.subhero__lead{
  margin:1.5rem 0 0; max-width:44rem;
  font-size:clamp(1rem,.95rem + .3vw,1.15rem); line-height:1.7; color:rgba(255,255,255,.8);
}

.backlink{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.8rem; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.7);
  transition:color .25s, transform .25s var(--ease);
}
.backlink:hover{ color:#fff; transform:translateX(-3px); }
.backlink svg{ width:1rem; height:1rem; }

.badges{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.75rem; }
.badge{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .85rem; border-radius:999px;
  font-size:.72rem; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
}
.badge svg{ width:.9rem; height:.9rem; color:hsl(var(--teal)); }

.subhero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }

/* ---- hero highlights (3 tocke) ---------------------------------------- */
.hl-list{ display:grid; gap:1rem; grid-template-columns:1fr; margin-top:2.5rem; }
@media (min-width:720px){ .hl-list{ grid-template-columns:repeat(3,1fr); } }
.hl{
  padding:1.1rem 1.25rem; border-radius:1rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}
.hl b{ display:block; font-family:Comfortaa,sans-serif; font-size:.98rem; font-weight:700; color:#fff; }
.hl span{ display:block; margin-top:.4rem; font-size:.85rem; line-height:1.55; color:rgba(255,255,255,.68); }

/* ---- feature grid (kartice) ------------------------------------------- */
.features{ display:grid; gap:1.1rem; grid-template-columns:1fr; margin-top:3.5rem; }
@media (min-width:640px){ .features{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .features{ grid-template-columns:repeat(3,1fr); } }
/* 4 kartice v eni vrsti (brez osamljene spodaj) */
@media (min-width:960px){ .features--4{ grid-template-columns:repeat(4,1fr); } }
.fcard{
  padding:1.6rem; border-radius:1.1rem; background:#fff;
  border:1px solid hsl(var(--border)/.8); box-shadow:0 12px 32px -26px rgba(0,0,0,.5);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.fcard:hover{ transform:translateY(-5px); box-shadow:0 26px 46px -30px rgba(0,0,0,.55); border-color:hsl(var(--primary)/.35); }
.fcard__i{
  width:2.6rem; height:2.6rem; border-radius:.8rem; display:inline-flex; align-items:center; justify-content:center;
  background:hsl(var(--primary)/.1); color:hsl(var(--primary));
}
.fcard__i svg{ width:1.3rem; height:1.3rem; }
/* varovalka: surov <svg> neposredno v .fcard dobi enak videz kot .fcard__i */
.fcard > svg{
  display:block; width:1.3rem; height:1.3rem; box-sizing:content-box; padding:.65rem;
  border-radius:.8rem; background:hsl(var(--primary)/.1); color:hsl(var(--primary));
}
.fcard h3{ font-size:1.15rem; font-weight:700; letter-spacing:-.01em; margin:1.1rem 0 0; }
.fcard p{ margin:.6rem 0 0; font-size:.92rem; line-height:1.6; color:hsl(var(--fg)/.72); }
.fcard .chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.fcard .chips span{
  font-size:.7rem; font-weight:500; color:hsl(var(--fg)/.7);
  background:hsl(var(--soft)); border:1px solid hsl(var(--border)); border-radius:999px; padding:.25rem .6rem;
}
.fcard__link{ display:inline-flex; align-items:center; gap:.35rem; margin-top:1.1rem; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:hsl(var(--primary)); }
.fcard__link svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.fcard:hover .fcard__link svg{ transform:translateX(3px); }
/* ---- fcard s sliko (naslovna slika storitve) ---- */
.fcard--img{ padding-top:0; overflow:hidden; }
.fcard__cover{ position:relative; margin:0 -1.6rem 0; aspect-ratio:16/10; overflow:hidden; border-radius:1.1rem 1.1rem 0 0; background:hsl(var(--soft)); }
.fcard__cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.fcard--img:hover .fcard__cover img{ transform:scale(1.05); }
.fcard__cover .fcard__i{ position:absolute; left:1.6rem; bottom:-1.3rem; z-index:2; background:#fff; box-shadow:0 10px 24px -10px rgba(0,0,0,.35); }
.fcard__cover + h3{ margin-top:2.1rem; }

/* ---- cenik ------------------------------------------------------------ */
.tabs{ display:inline-flex; gap:.3rem; padding:.3rem; margin-top:2.5rem; border-radius:999px; background:hsl(var(--soft)); border:1px solid hsl(var(--border)); }
.tabs button{
  padding:.55rem 1.2rem; border-radius:999px; font-size:.85rem; font-weight:600; color:hsl(var(--fg)/.7);
  transition:background .25s, color .25s;
}
.tabs button[aria-selected="true"]{ background:hsl(var(--primary)); color:#fff; }

.tiers{ display:grid; gap:1.25rem; grid-template-columns:1fr; margin-top:2.5rem; align-items:stretch; }
@media (min-width:820px){ .tiers{ grid-template-columns:repeat(3,1fr); } }
/* 4 paketi v eni vrsti (oglaševanje) */
@media (min-width:640px){ .tiers--4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .tiers--4{ grid-template-columns:repeat(4,1fr); gap:1rem; } }
.tier{
  position:relative; display:flex; flex-direction:column;
  padding:1.9rem 1.6rem; border-radius:1.25rem; background:#fff;
  border:1px solid hsl(var(--border)/.9); box-shadow:0 14px 36px -30px rgba(0,0,0,.5);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tier:hover{ transform:translateY(-5px); box-shadow:0 28px 50px -32px rgba(0,0,0,.55); }
.tier--pop{ border-color:hsl(var(--primary)/.55); box-shadow:0 22px 50px -28px hsl(var(--primary)/.5); }
.tier__pop{
  position:absolute; top:-.8rem; left:50%; transform:translateX(-50%);
  font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff;
  background:hsl(var(--primary)); padding:.3rem .8rem; border-radius:999px; white-space:nowrap;
}
.tier__name{ font-family:Comfortaa,sans-serif; font-size:1.05rem; font-weight:700; }
.tier__price{ margin-top:.6rem; font-family:Comfortaa,sans-serif; font-size:1.9rem; font-weight:700; letter-spacing:-.02em; color:hsl(var(--primary)); }
.tier__price small{ font-size:.85rem; font-weight:500; color:hsl(var(--fg)/.55); }
.tier__desc{ margin:.6rem 0 0; font-size:.9rem; line-height:1.55; color:hsl(var(--fg)/.7); }
.tier ul{ list-style:none; margin:1.25rem 0 0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.tier li{ position:relative; padding-left:1.6rem; font-size:.88rem; line-height:1.5; color:hsl(var(--fg)/.82); }
.tier li::before{
  content:""; position:absolute; left:0; top:.15rem; width:1.05rem; height:1.05rem; border-radius:999px;
  background:hsl(var(--teal)/.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b78f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.7rem no-repeat;
}
.tier .btn{ margin-top:1.5rem; }
.tier--pop .btn{ background:hsl(var(--primary)); }
.tier .btn--tier{ align-self:stretch; background:hsl(var(--fg)); color:#fff; margin-top:auto; padding-top:.8rem; padding-bottom:.8rem; }
.tier .btn--tier:hover{ background:hsl(var(--primary)); }
.tiers > .tier .btn--tier{ margin-top:1.5rem; }

.price-note{ margin:2rem auto 0; max-width:46rem; font-size:.82rem; line-height:1.6; color:hsl(var(--fg)/.6); text-align:center; }

/* ---- proces (koraki) -------------------------------------------------- */
.steps{ display:grid; gap:1.1rem; grid-template-columns:1fr; margin-top:3.5rem; counter-reset:s; }
@media (min-width:680px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .steps{ grid-template-columns:repeat(3,1fr); } }
/* 4 koraki v eni vrsti (oglaševanje) */
@media (min-width:1000px){ .steps--4{ grid-template-columns:repeat(4,1fr); } }
.step{
  position:relative; padding:1.6rem; border-radius:1.1rem; background:hsl(var(--soft));
  border:1px solid hsl(var(--border)/.7); counter-increment:s;
}
.step::before{
  content:"0" counter(s); display:block;
  font-family:"Space Grotesk",monospace; font-size:1.1rem; font-weight:600;
  color:hsl(var(--primary)); letter-spacing:.06em; margin-bottom:.7rem;
}
.step h3{ font-size:1.05rem; font-weight:700; }
.step p{ margin:.5rem 0 0; font-size:.9rem; line-height:1.6; color:hsl(var(--fg)/.72); }

/* ---- benefit box + checklist ------------------------------------------ */
.benefit{
  display:grid; gap:2rem; grid-template-columns:1fr; align-items:center;
  margin-top:3.5rem; padding:2.25rem; border-radius:1.5rem;
  background:linear-gradient(135deg, hsl(var(--primary)/.06), hsl(var(--teal)/.06));
  border:1px solid hsl(var(--border)/.8);
}
@media (min-width:820px){ .benefit{ grid-template-columns:1fr 1fr; padding:3rem; } }
.benefit h3{ font-size:clamp(1.3rem,1rem + 1.2vw,1.9rem); font-weight:700; letter-spacing:-.02em; }
.benefit p{ margin:.8rem 0 0; font-size:1rem; line-height:1.6; color:hsl(var(--fg)/.75); }
.checklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75rem; }
.checklist li{ position:relative; padding-left:1.9rem; font-size:.95rem; color:hsl(var(--fg)/.85); }
.checklist li::before{
  content:""; position:absolute; left:0; top:0; width:1.3rem; height:1.3rem; border-radius:999px;
  background:hsl(var(--primary)/.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.8rem no-repeat;
}

/* ---- vkljuceno v projekt (band) --------------------------------------- */
.incl{
  margin-top:3.5rem; padding:2.25rem; border-radius:1.5rem; color:#fff;
  background:radial-gradient(120% 120% at 15% 0%, #1c0b33, #0b0616 70%);
  position:relative; overflow:hidden;
}
.incl h3{ font-family:Comfortaa,sans-serif; font-size:1.3rem; font-weight:700; }
.incl ul{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.85rem; grid-template-columns:1fr; }
@media (min-width:720px){ .incl ul{ grid-template-columns:repeat(2,1fr); } }
.incl li{ position:relative; padding-left:1.9rem; font-size:.95rem; color:rgba(255,255,255,.85); }
.incl li::before{
  content:""; position:absolute; left:0; top:.05rem; width:1.3rem; height:1.3rem; border-radius:999px;
  background:rgba(255,255,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b78f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.8rem no-repeat;
}

/* ---- FAQ (harmonika) -------------------------------------------------- */
.faq{ max-width:52rem; margin:3rem auto 0; display:flex; flex-direction:column; gap:.75rem; }
.faq-item{ border:1px solid hsl(var(--border)); border-radius:1rem; background:#fff; overflow:hidden; }
.faq-item summary{
  list-style:none; cursor:pointer; padding:1.15rem 1.35rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:Comfortaa,sans-serif; font-size:1rem; font-weight:600; color:hsl(var(--fg));
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .ic{ flex:0 0 auto; width:1.4rem; height:1.4rem; position:relative; transition:transform .3s var(--ease); }
.faq-item summary .ic::before,.faq-item summary .ic::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:hsl(var(--primary)); border-radius:2px;
}
.faq-item summary .ic::before{ width:.9rem; height:2px; }
.faq-item summary .ic::after{ width:2px; height:.9rem; transition:transform .3s var(--ease); }
.faq-item[open] summary .ic::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq-item .faq-a{ padding:0 1.35rem 1.25rem; font-size:.94rem; line-height:1.65; color:hsl(var(--fg)/.75); }

/* ---- obrazec ---------------------------------------------------------- */
.form{ max-width:38rem; margin:0 auto; display:flex; flex-direction:column; gap:1rem; }
.form .field{ display:flex; flex-direction:column; gap:.4rem; text-align:left; }
.form label{ font-size:.78rem; font-weight:600; letter-spacing:.02em; color:hsl(var(--fg)/.7); }
.form input,.form select,.form textarea{
  font:inherit; font-size:.95rem; color:hsl(var(--fg));
  padding:.8rem 1rem; border-radius:.8rem; background:#fff;
  border:1px solid hsl(var(--border)); transition:border-color .25s, box-shadow .25s;
}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none; border-color:hsl(var(--primary)); box-shadow:0 0 0 3px hsl(var(--primary)/.14);
}
.form textarea{ min-height:8rem; resize:vertical; }
.form input[readonly]{ background:hsl(var(--soft)); color:hsl(var(--fg)/.6); }
.form .btn{ margin-top:.5rem; align-self:flex-start; }
.form-msg{ font-size:.9rem; margin-top:.25rem; min-height:1.2em; }
.form-msg.ok{ color:hsl(var(--teal)); }
.form-msg.err{ color:hsl(0 70% 55%); }
.form-fine{ font-size:.78rem; color:hsl(var(--fg)/.55); text-align:center; margin:.25rem 0 0; }

/* ---- temni CTA pas ---------------------------------------------------- */
.cta-band{
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:clamp(3.5rem,3rem + 4vw,5.5rem); color:#fff; text-align:center;
  background:radial-gradient(120% 130% at 50% 0%, #1b0b31, #0b0616 66%);
}
.cta-band .orb{ opacity:.4; }
.cta-band__in{ position:relative; z-index:2; }
.cta-band h2{ font-family:Comfortaa,sans-serif; font-size:clamp(1.8rem,1.2rem + 2.6vw,3rem); font-weight:700; letter-spacing:-.02em; }
.cta-band p{ margin:1rem auto 0; max-width:34rem; font-size:1.05rem; color:rgba(255,255,255,.78); }
.cta-band .actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:2rem; }

/* platforme (oglasevanje) */
.plats{ display:grid; gap:1rem; grid-template-columns:1fr; margin-top:3rem; }
@media (min-width:640px){ .plats{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .plats{ grid-template-columns:repeat(3,1fr); } }
/* 5 platform v eni vrsti (oglaševanje) */
@media (min-width:1040px){ .plats--5{ grid-template-columns:repeat(5,1fr); gap:.85rem; } }
.plat{ padding:1.5rem; border-radius:1.1rem; background:#fff; border:1px solid hsl(var(--border)/.8); box-shadow:0 12px 30px -26px rgba(0,0,0,.5); }
.plat b{ display:block; font-family:Comfortaa,sans-serif; font-size:1.05rem; font-weight:700; }
.plat p{ margin:.5rem 0 .8rem; font-size:.88rem; line-height:1.55; color:hsl(var(--fg)/.72); }
.plat span{ font-size:.72rem; font-weight:600; color:hsl(var(--primary)); background:hsl(var(--primary)/.08); border-radius:999px; padding:.25rem .6rem; }
.plat__logo{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; background:hsl(var(--border)/.35); margin-bottom:1rem; }
.plat__logo svg{ width:26px; height:26px; display:block; }

/* dve-kolonski primerjalni blok (woo/shopify) */
.compare{ display:grid; gap:1.25rem; grid-template-columns:1fr; margin-top:3rem; }
@media (min-width:820px){ .compare{ grid-template-columns:repeat(2,1fr); } }
.compare .col{ padding:2rem; border-radius:1.25rem; background:#fff; border:1px solid hsl(var(--border)/.85); box-shadow:0 14px 34px -30px rgba(0,0,0,.5); }
.compare h3{ font-family:Comfortaa,sans-serif; font-size:1.3rem; font-weight:700; }
.compare > .col > p{ margin:.8rem 0 0; font-size:.95rem; line-height:1.6; color:hsl(var(--fg)/.75); }
.compare ul{ list-style:none; margin:1.25rem 0 0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.compare li{ position:relative; padding-left:1.6rem; font-size:.9rem; color:hsl(var(--fg)/.82); }
.compare li::before{ content:""; position:absolute; left:0; top:.15rem; width:1.05rem; height:1.05rem; border-radius:999px; background:hsl(var(--primary)/.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.7rem no-repeat; }

/* galerija vizualov */
.vgrid{ display:grid; gap:1rem; grid-template-columns:repeat(2,1fr); margin-top:3rem; }
@media (min-width:820px){ .vgrid{ grid-template-columns:repeat(3,1fr); } }
/* večje slike: 2 stolpca */
@media (min-width:700px){ .vgrid--2{ grid-template-columns:repeat(2,1fr); } }
.vitem{ position:relative; border-radius:1rem; overflow:hidden; aspect-ratio:1/1; background:hsl(var(--soft)); border:1px solid hsl(var(--border)/.6); box-shadow:0 14px 34px -28px rgba(0,0,0,.6); }
.vitem img,.vitem video{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.vitem:hover img,.vitem:hover video{ transform:scale(1.05); }
.vitem figcaption{ position:absolute; inset:auto 0 0 0; padding:1rem; background:linear-gradient(to top, rgba(0,0,0,.8), transparent); color:#fff; }
.vitem figcaption b{ display:block; font-size:.9rem; font-weight:700; }
.vitem figcaption span{ display:block; font-size:.72rem; color:rgba(255,255,255,.75); margin-top:.15rem; }

/* --------------------------------------------------------------- animacije */
.reveal-word{ display:inline-block; }
/* skrijemo SAMO ce tece JS (.js na <html>); brez JS ostane vidno */
.js [data-reveal] .reveal-word{
  opacity:0; transform:translateY(.55em) rotate(1.5deg);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in .reveal-word{ opacity:1; transform:none; }

.js [data-fade]{ opacity:0; transform:translateY(1.5rem); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-fade].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal] .reveal-word,[data-fade]{ opacity:1 !important; transform:none !important; }
}

/* dostopnost */
:focus-visible{ outline:2px solid hsl(var(--primary)); outline-offset:3px; border-radius:6px; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:#fff; padding:.75rem 1.25rem; border-radius:0 0 .5rem 0; font-weight:600;
}
.skip:focus{ left:0; }

/* ===================================================== cinematic sekcija */
.cine{ position:relative; width:100%; min-height:100svh; display:flex; overflow:hidden;
  color:#fff; isolation:isolate; }
.cine__bg{ position:absolute; inset:0; z-index:0;
  background:url(../images/cine-person.jpg) center 42%/cover no-repeat;
  transform:scale(1.06); animation:cineZoom 24s ease-in-out infinite alternate; }
.cine__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,10,20,.62) 0%, rgba(8,10,20,.3) 26%, rgba(8,10,20,.08) 48%, rgba(8,10,20,.2) 72%, rgba(8,10,20,.62) 100%); }
.cine__in{ position:relative; z-index:2; width:100%; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  text-align:center; gap:2rem;
  padding:clamp(4rem,3rem + 5vw,7.5rem) 1.25rem clamp(2.75rem,2rem + 3vw,4.5rem); }
.cine__top{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; max-width:48rem; }
.cine__h{ margin:0; font-weight:800; line-height:1.02; letter-spacing:-.02em;
  font-size:clamp(2.9rem,1.6rem + 6.4vw,6rem); text-shadow:0 2px 30px rgba(0,0,0,.35); }
.cine__sub{ margin:0; max-width:38rem; font-size:clamp(1.02rem,.95rem + .4vw,1.3rem);
  line-height:1.5; color:rgba(255,255,255,.92); text-shadow:0 1px 16px rgba(0,0,0,.4); }
.cine__cta{ margin-top:.5rem; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:#111; font-weight:700; font-size:1rem; text-decoration:none;
  padding:.9rem 1.9rem; border-radius:999px; box-shadow:0 12px 34px rgba(0,0,0,.28);
  transition:transform .25s ease, box-shadow .25s ease; }
.cine__cta:hover{ transform:translateY(-2px); box-shadow:0 18px 44px rgba(0,0,0,.34); }

.cine__card{ width:min(300px,80vw); display:flex; flex-direction:column; align-items:center;
  gap:.55rem; padding:1.4rem 1.25rem 1.2rem; border-radius:26px;
  background:rgba(18,18,26,.26); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 24px 70px rgba(0,0,0,.4); }
.cine__card-label{ font-size:.72rem; letter-spacing:.04em; color:rgba(255,255,255,.72); }
.cine__card-num{ font-size:2rem; font-weight:800; letter-spacing:-.01em; line-height:1; }
.cine__card-pill{ font-size:.74rem; font-weight:600; color:#111; background:#fff;
  padding:.3rem .85rem; border-radius:999px; }
.cine__card-icons{ display:flex; gap:.6rem; margin-top:.65rem; }
.cine__ic{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18);
  color:#fff; }
.cine__ic svg{ width:16px; height:16px; }

.cine__pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; }
.cine__pill{ display:inline-flex; align-items:center; font-family:inherit; font-size:.95rem; font-weight:600;
  line-height:1; color:#fff; text-decoration:none; padding:.72rem 1.5rem;
  border-radius:999px; border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.08); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
  cursor:pointer; }
.cine__pill:hover,
.cine__pill:focus-visible{ background:rgba(255,255,255,.22); border-color:#fff; transform:translateY(-2px); }
.cine__pill.is-on{ background:#fff; color:#111; border-color:#fff; }

/* lebdeče slike (samo vizuali) */
.cine__float{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.cine__fset{ position:absolute; inset:0; }
.cine__fc{ position:absolute; display:block; width:clamp(96px,10.5vw,164px); aspect-ratio:4/3;
  border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.4);
  box-shadow:0 22px 46px -14px rgba(0,0,0,.65);
  opacity:0; transform:scale(.2); will-change:transform, opacity; }
.cine__fc img{ width:100%; height:100%; object-fit:cover; display:block; }
/* razpršitev čez cel ekran (sredina ostane dovolj prosta za besedilo in kartico) */
.cine__fc.p1{ top:13%; left:6%;  --r:-9deg; }
.cine__fc.p2{ top:33%; left:15%; --r:7deg;  }
.cine__fc.p3{ top:66%; left:5%;  --r:-6deg; }
.cine__fc.p4{ top:15%; right:7%; --r:8deg;  }
.cine__fc.p5{ top:37%; right:14%; --r:-7deg; }
.cine__fc.p6{ top:68%; right:6%; --r:6deg;  }
/* aktivni set — slike POPAJO (burst z overshoot in zasukom), nato nežno lebdijo */
.cine__fset.is-on .cine__fc{
  animation:cinePop .6s cubic-bezier(.3,1.5,.5,1) both,
            cineFloat 5.5s ease-in-out infinite alternate;
}
.cine__fset.is-on .cine__fc.p1{ animation-delay:.02s, .65s; }
.cine__fset.is-on .cine__fc.p2{ animation-delay:.10s, .9s; }
.cine__fset.is-on .cine__fc.p3{ animation-delay:.18s, 1.2s; }
.cine__fset.is-on .cine__fc.p4{ animation-delay:.06s, .8s; }
.cine__fset.is-on .cine__fc.p5{ animation-delay:.14s, 1.0s; }
.cine__fset.is-on .cine__fc.p6{ animation-delay:.22s, .5s; }
@keyframes cinePop{
  0%{   opacity:0; transform:scale(.2) rotate(calc(var(--r,0deg) * 2.5)); }
  55%{  opacity:1; transform:scale(1.16) rotate(calc(var(--r,0deg) * .6)); }
  100%{ opacity:1; transform:scale(1) rotate(var(--r,0deg)); }
}
@keyframes cineFloat{
  from{ translate:0 0; }
  to{   translate:0 -14px; }
}
@media (prefers-reduced-motion: reduce){
  .cine__fset.is-on .cine__fc{ animation:none; opacity:1; transform:scale(1) rotate(var(--r,0deg)); }
}

@keyframes cineZoom{ from{ transform:scale(1.06); } to{ transform:scale(1.16); } }
@media (prefers-reduced-motion: reduce){ .cine__bg{ animation:none; transform:none; } }

@media (max-width:760px){
  .cine{ min-height:92svh; }
  .cine__in{ min-height:92svh; gap:1.5rem; }
  .cine__card{ width:min(280px,82vw); padding:1.2rem 1rem 1rem; }
  .cine__card-num{ font-size:1.7rem; }
  .cine__pills{ gap:.5rem; }
  .cine__pill{ font-size:.85rem; padding:.6rem 1.15rem; }
  /* na telefonu le vogalne slike, manjše, da ne prekrivajo besedila */
  /* na telefonu razpršene po spodnjih 2/3 (vidne, s pop efektom), ne čez naslov */
  .cine__fc{ width:clamp(66px,23vw,92px); border-radius:11px; }
  .cine__fc.p1{ top:30%; left:1%;  }
  .cine__fc.p4{ top:30%; right:1%; }
  .cine__fc.p2{ top:auto; bottom:30%; left:4%;  }
  .cine__fc.p5{ top:auto; bottom:33%; right:4%; }
  .cine__fc.p3{ top:auto; bottom:7%;  left:16%; }
  .cine__fc.p6{ top:auto; bottom:4%;  right:18%; }
}

/* ===================================================== nav dropdown (storitve) */
.nav__has{ position:relative; display:flex; align-items:center; }
.nav__has-trigger{ display:inline-flex !important; align-items:center; gap:.28rem; }
.nav__chev{ width:13px; height:13px; transition:transform .28s var(--ease); opacity:.8; }
.nav__has:hover .nav__chev,
.nav__has:focus-within .nav__chev{ transform:rotate(180deg); }
.nav__drop{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(10px);
  min-width:16.5rem; padding:.5rem; margin-top:.55rem;
  display:flex; flex-direction:column; gap:.08rem;
  background:hsl(var(--bg)/.92);
  -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid hsl(var(--border)/.8); border-radius:1rem;
  box-shadow:inset 0 1px 0 hsl(0 0% 100% / .8), 0 24px 54px -22px rgba(22,16,44,.4);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav__drop::before{ content:""; position:absolute; left:0; right:0; top:-.75rem; height:.85rem; }
.nav__has:hover .nav__drop,
.nav__has:focus-within .nav__drop{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav__drop a{
  padding:.62rem .85rem; border-radius:.65rem; font-size:.9rem; font-weight:600;
  color:hsl(var(--fg)/.95); white-space:nowrap;
  transition:background .2s, color .2s;
}
.nav__drop a::after{ display:none !important; }
.nav__drop a:hover{ background:hsl(var(--primary)/.12); color:hsl(var(--primary)); }
.nav__drop-all{
  margin-top:.25rem; padding-top:.7rem;
  border-top:1px solid hsl(var(--border)/.7);
  color:hsl(var(--primary)) !important;
}

/* mobilni podmeni storitev */
.mobmenu__sub{ padding-left:1.4rem !important; font-size:.95rem !important; opacity:.8; }
.mobmenu__sub::before{ content:"– "; opacity:.5; }

/* ======================= nav: bel nad temnim (vijoličnim) herojem, nato liquid */
.nav--dark:not(.nav--glass) .nav__bar{
  background:#fff;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-color:hsl(var(--border));
  box-shadow:0 12px 30px -20px rgba(22,16,44,.35);
}

/* ===================================================== video produkcija (domov) */
.vshow{ position:relative; overflow:hidden; background:#07070c; color:#fff;
  padding:clamp(4.5rem,3rem + 6vw,8rem) 0; isolation:isolate; }
.vshow__fx{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.vshow__glow{ position:absolute; top:-25%; left:50%; transform:translateX(-50%);
  width:80vw; height:80vw; max-width:960px; max-height:960px; border-radius:50%;
  background:radial-gradient(circle, hsl(var(--primary)/.22), transparent 62%); filter:blur(40px); }
.vshow__mesh{ position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 35%, transparent 78%);
  mask-image:radial-gradient(ellipse at 50% 0%, #000 35%, transparent 78%); }
.vshow__in{ position:relative; z-index:1; max-width:110rem; }
.vshow__head{ max-width:46rem; margin:0 auto clamp(2.25rem,1.5rem + 2vw,3.25rem); text-align:center; }
.vshow__head .eyebrow{ color:hsl(var(--primary-2, 266 85% 72%)); }
.vshow__h{ font-family:Comfortaa,sans-serif; font-size:clamp(2rem,1.4rem + 3vw,3.4rem);
  font-weight:800; line-height:1.05; letter-spacing:-.02em; margin:.6rem 0 1rem; }
.vshow__lead{ color:rgba(255,255,255,.72); font-size:clamp(1rem,.95rem + .3vw,1.15rem);
  line-height:1.6; margin:0; }
.vshow__grid{ display:grid; gap:1.2rem; grid-template-columns:1fr; }
@media (min-width:760px){ .vshow__grid{ grid-template-columns:repeat(3,1fr); } }
.vshow__item{ position:relative; margin:0; border-radius:1.1rem; overflow:hidden; aspect-ratio:16/9;
  border:1px solid rgba(255,255,255,.14); background:#111;
  box-shadow:0 34px 64px -34px rgba(0,0,0,.85); }
.vshow__item video{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.vshow__item:hover video{ transform:scale(1.05); }
.vshow__item figcaption{ position:absolute; inset:auto 0 0 0; padding:1rem 1.1rem;
  background:linear-gradient(to top, rgba(0,0,0,.82), transparent); }
.vshow__item figcaption b{ display:block; font-size:.9rem; font-weight:700; }
.vshow__item figcaption span{ display:block; font-size:.74rem; color:rgba(255,255,255,.72); margin-top:.15rem; }
.vshow__cta{ text-align:center; margin-top:clamp(2rem,1.5rem + 1.5vw,3rem); }

/* ===================================================== pravne strani (legal) */
.legal{ max-width:46rem; margin-inline:auto; }
.legal > h2:first-child{ margin-top:0; }
.legal h2{ font-family:Comfortaa,sans-serif; font-size:clamp(1.15rem,1rem + .5vw,1.4rem);
  font-weight:700; letter-spacing:-.01em; margin:2.25rem 0 .6rem; }
.legal h3{ font-family:Comfortaa,sans-serif; font-size:1.05rem; font-weight:700; margin:1.5rem 0 .4rem; }
.legal p{ margin:.55rem 0; line-height:1.72; color:hsl(var(--fg)/.8); }
.legal ul,.legal ol{ margin:.55rem 0 .55rem 1.2rem; padding:0; }
.legal li{ margin:.35rem 0; line-height:1.7; color:hsl(var(--fg)/.8); }
.legal a{ color:hsl(var(--primary)); text-decoration:underline; text-underline-offset:2px; }
.legal a:hover{ color:hsl(var(--primary)/.78); }
.legal strong{ color:hsl(var(--fg)); font-weight:700; }
.legal code{ font-family:"Space Mono",ui-monospace,monospace; font-size:.86em;
  background:hsl(var(--border)/.45); padding:.12em .42em; border-radius:6px; }
.legal .updated{ color:hsl(var(--fg)/.55); font-size:.9rem; margin:0 0 1.75rem; }
.legal .data-box{ margin-top:1.1rem; padding:1.2rem 1.4rem; border:1px solid hsl(var(--border));
  border-radius:1rem; background:hsl(var(--border)/.18); }
.legal .data-box p{ margin:.22rem 0; color:hsl(var(--fg)/.85); }