/* Spletna koda — shared styles (SL + EN) */

:root{
  --bg:#0a0e16; --panel:#101726; --panel2:#0e1422;
  --line:#1d2740; --text:#dfe6f5; --muted:#8d9bb8; --soft:#aab6d0;
  --brand:#6ea8fe; --brand2:#7c5cff; --accent:#22d3ee;
  --nav-h:62px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
a{color:inherit;text-decoration:none}

.wrap{max-width:980px;margin:0 auto;padding:0 22px}
section{padding:28px 0 72px;scroll-margin-top:calc(var(--nav-h) + 10px)}

/* Header / navigation */
header{
  position:sticky;top:0;z-index:20;
  background:rgba(10,14,22,.7);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav{display:flex;justify-content:space-between;align-items:center;height:var(--nav-h)}
.brand{font-weight:800;font-size:17px;letter-spacing:.3px}
.brand .tag{color:#ff5d5d}
.brand .name{color:var(--brand);white-space:nowrap}
.nav-right{display:flex;align-items:center;gap:18px}
.links a{color:var(--muted);font-size:14px;margin-left:22px;transition:color .15s}
.links a:hover{color:var(--text)}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.lang a{color:var(--muted);font-size:13px;font-weight:700;padding:6px 11px;transition:background .15s,color .15s}
.lang a:hover{color:var(--text)}
.lang a.active{background:var(--brand);color:#fff}

/* Hero */
.hero{position:relative;text-align:center;padding:96px 0 78px;overflow:hidden;scroll-margin-top:calc(var(--nav-h) + 10px)}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;animation:float 14s ease-in-out infinite}
.b1{width:420px;height:420px;background:var(--brand2);top:-160px;left:-120px}
.b2{width:380px;height:380px;background:var(--brand);top:-120px;right:-120px;animation-delay:-5s}
.b3{width:300px;height:300px;background:var(--accent);bottom:-180px;left:40%;opacity:.25;animation-delay:-9s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(28px)}}
@media(prefers-reduced-motion:reduce){.blob{animation:none}}
.hero>*{position:relative;z-index:1}
.hero .logo{font-size:clamp(34px,7vw,60px);font-weight:800;letter-spacing:1px;white-space:nowrap}
.hero .logo .tag{color:#ff5d5d}
.hero .logo .name{white-space:nowrap;background:linear-gradient(90deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1{font-size:clamp(20px,3.4vw,30px);margin-top:18px;font-weight:700}
.hero p{color:var(--soft);max-width:600px;margin:14px auto 0;font-size:16px}

.btns{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{padding:12px 24px;border-radius:10px;font-weight:600;font-size:15px;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;box-shadow:0 8px 24px rgba(110,168,254,.3)}
.btn.ghost{border:1px solid var(--line);color:var(--soft)}

/* Section headings */
.label{text-align:center;color:var(--brand);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
h2.title{text-align:center;font-size:28px;margin-top:8px}
.sub{text-align:center;color:var(--muted);max-width:560px;margin:8px auto 0}

/* Service cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:16px;padding:24px;transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-4px);border-color:var(--brand)}
.card .ico{width:46px;height:46px;margin-bottom:14px;border-radius:12px;background:rgba(110,168,254,.12);display:flex;align-items:center;justify-content:center;color:var(--brand)}
.card .ico svg{width:24px;height:24px}
.card h3{font-size:17px;margin-bottom:6px}
.card p{color:var(--muted);font-size:14px}

/* Tech chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px}
.chip{background:var(--panel);border:1px solid var(--line);color:var(--soft);padding:9px 16px;border-radius:30px;font-size:14px;transition:border-color .15s,color .15s}
.chip:hover{border-color:var(--accent);color:var(--text)}

/* About */
.about{display:grid;grid-template-columns:140px 1fr;gap:30px;align-items:center;margin-top:34px;padding:34px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--panel),var(--panel2))}
.about .big{font-size:54px;font-weight:800;line-height:1;background:linear-gradient(90deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.about .big small{display:block;margin-top:6px;font-size:14px;font-weight:500;color:var(--muted)}
.about p{color:var(--soft)}

/* Contact */
.fill{min-height:calc(100vh - var(--nav-h) - 1px)}   /* lets the last section's title align like the others */
.contact{text-align:center}
.contact .email{display:inline-block;margin-top:20px;font-size:clamp(18px,4vw,24px);font-weight:700;background:linear-gradient(90deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}

footer{border-top:1px solid var(--line);padding:26px 0;text-align:center;color:var(--muted);font-size:13px}

/* Mobile: no menu, so the anchor-offset tricks aren't needed — even spacing, no empty tail */
@media(max-width:720px){
  .cards{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;text-align:center}
  .links{display:none}
  section{padding:44px 0}
  .hero{padding:80px 0 44px}
  .fill{min-height:auto}
}

/* Keep the wordmark intact: one line when it fits, else cleanly stacked into 3 lines */
@media(max-width:480px){
  .hero .logo{white-space:normal}
  .hero .logo .tag,.hero .logo .name{display:block}
}