/* ===========================================================
   Prenovistran.si — components
   =========================================================== */

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding:22px 0;
}
.nav.scrolled{
  background:rgba(251,251,253,.82);
  backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 1px 0 var(--line);
  padding:14px 0;
}
.nav .wrap{ display:flex; align-items:center; gap:28px; }
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--f-head); font-weight:700; font-size:20px; letter-spacing:-.02em; }
.brand .logo{ width:34px; height:34px; border-radius:10px; background:var(--grad); position:relative; flex:none; box-shadow:0 4px 14px -3px rgba(45,91,255,.5); }
.brand .logo::after{ content:""; position:absolute; inset:9px 9px auto 9px; height:3px; border-radius:2px; background:rgba(255,255,255,.92);
  box-shadow:0 6px 0 rgba(255,255,255,.55), 0 12px 0 rgba(255,255,255,.3); }
.brand b{ color:var(--accent); }
.nav-links{ display:flex; gap:30px; margin-left:auto; }
.nav-links a{ font-size:15.5px; color:var(--ink-2); font-weight:500; transition:color .25s; position:relative; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-5px; width:0; height:2px; background:var(--accent); transition:width .3s var(--ease); border-radius:2px; }
.nav-links a:hover::after{ width:100%; }
.nav-right{ display:flex; align-items:center; gap:16px; }

.lang{ display:flex; align-items:center; background:var(--bg-2); border-radius:999px; padding:3px; font-family:var(--f-mono); font-size:12px; font-weight:700; }
.lang button{ padding:6px 11px; border-radius:999px; color:var(--ink-3); letter-spacing:.06em; transition:all .25s; }
.lang button.on{ background:var(--card); color:var(--accent); box-shadow:var(--shadow); }
.nav .btn{ padding:11px 20px; font-size:14.5px; }

@media(max-width:880px){ .nav-links{ display:none; } }
@media(max-width:680px){
  .nav .btn{ display:none; }
  .nav .wrap{ gap:12px; }
}
@media(max-width:400px){
  .brand .wm{ font-size:16px; }
  .brand .logo{ width:28px; height:28px; border-radius:8px; }
  .brand{ gap:8px; font-size:17px; }
}

/* ---------- HERO ---------- */
.hero{ position:relative; padding:170px 0 90px; overflow:hidden; }
.hero-canvas{ position:absolute; inset:0; z-index:0; }
.hero .wrap{ position:relative; z-index:2; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero h1{ font-size:clamp(42px,6.3vw,82px); letter-spacing:-.035em; margin:22px 0 24px; }
.hero h1 .b{ position:relative; display:inline-block; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% 100%; }
.hero p.lead{ font-size:clamp(18px,2vw,21px); color:var(--ink-2); max-width:540px; text-wrap:pretty; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.hero-hint{ display:flex; align-items:center; gap:9px; margin-top:30px; font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; color:var(--ink-3); text-transform:uppercase; }
.hero-hint .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1.8s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ opacity:.3; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.3); } }

/* hero visual card stack — reacts to mouse via JS transform vars */
.hero-visual{ position:relative; perspective:1400px; height:480px; }
.hv-card{
  position:absolute; border-radius:var(--r-lg); background:var(--card);
  box-shadow:var(--shadow-lg); overflow:hidden; will-change:transform;
  transition:transform .25s var(--ease);
  transform:translate3d(calc(var(--mx,0)*var(--d,1)*1px), calc(var(--my,0)*var(--d,1)*1px), 0) rotateX(calc(var(--my,0)*-.05deg)) rotateY(calc(var(--mx,0)*.05deg));
}
.hv-after{ inset:0 0 60px 90px; z-index:3; }
.hv-before{ inset:80px 120px 0 0; z-index:2; filter:saturate(.6); }
.hv-badge{ position:absolute; z-index:5; font-family:var(--f-mono); font-size:11px; font-weight:700; letter-spacing:.14em; padding:7px 13px; border-radius:999px; }
.hv-badge.before{ top:96px; left:14px; background:#fff; color:var(--ink-3); border:1px solid var(--line); }
.hv-badge.after{ bottom:24px; right:18px; background:var(--grad); color:#fff; box-shadow:0 8px 22px -6px rgba(45,91,255,.6); }
.hv-float{ position:absolute; z-index:6; background:var(--card); border-radius:14px; box-shadow:var(--shadow-lg); padding:13px 16px; display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:600; will-change:transform;
  transform:translate3d(calc(var(--mx,0)*var(--d,1)*1.4px), calc(var(--my,0)*var(--d,1)*1.4px),0); }
.hv-float .pi{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:rgba(0,208,192,.14); color:var(--accent-3); font-family:var(--f-mono); }
.hv-float.fa{ top:-16px; right:40px; --d:2.4; }
.hv-float.fb{ bottom:42px; left:-22px; --d:2.8; }

@media(max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .hero-visual{ height:380px; }
}
@media(max-width:680px){
  .hero{ padding:108px 0 52px; }
}
@media(max-width:560px){
  .hero-visual{ height:300px; }
  .hv-after{ inset:0 0 40px 40px; } .hv-before{ inset:50px 60px 0 0; }
}
@media(max-width:460px){
  .hv-float{ display:none; }
  .hero-visual{ height:260px; }
  .hv-after{ inset:0 0 30px 30px; } .hv-before{ inset:40px 50px 0 0; }
}

/* tiny mock browser used in hero cards */
.mini{ width:100%; height:100%; display:flex; flex-direction:column; background:#fff; }
.mini-bar{ display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--line); flex:none; }
.mini-bar i{ width:9px; height:9px; border-radius:50%; background:#dfe2ea; display:block; }
.mini-bar .u{ margin-left:8px; font-family:var(--f-mono); font-size:10px; color:var(--ink-3); background:var(--bg-2); padding:3px 9px; border-radius:6px; }
.mini-body{ flex:1; padding:16px; overflow:hidden; }

/* old mini look */
.mini.old .mini-body{ background:#eee; font-family:"Times New Roman",serif; }
.mini.old .o-band{ background:#1c3a8b; color:#fff; padding:7px; text-align:center; font-weight:700; font-size:13px; }
.mini.old .o-h{ color:#b00; font-size:13px; text-decoration:underline; margin:8px 0 5px; }
.mini.old .o-row{ height:7px; background:#cfcfcf; margin:5px 0; border-radius:1px; }
.mini.old .o-row.s{ width:70%; } .mini.old .o-row.m{ width:88%; }

/* new mini look */
.mini.new .mini-body{ background:linear-gradient(160deg,#fff,#f3f5ff); padding:0; }
.mini.new .n-hero{ background:var(--grad); height:54%; padding:18px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; }
.mini.new .n-hero .t{ font-family:var(--f-head); font-weight:700; font-size:15px; line-height:1.1; }
.mini.new .n-hero .p{ width:64px; height:9px; border-radius:5px; background:rgba(255,255,255,.85); margin-top:9px; }
.mini.new .n-cards{ display:flex; gap:8px; padding:14px; }
.mini.new .n-cards .c{ flex:1; height:46px; border-radius:9px; background:#fff; box-shadow:0 4px 12px rgba(45,91,255,.1); border:1px solid var(--line); }