/* ===========================================================
   Prenovistran.si — design system
   Techy & modern · light canvas · bold cobalt accent · motion
   =========================================================== */

:root{
  /* palette */
  --bg: #fbfbfd;
  --bg-2: #f1f2f6;
  --ink: #0a0e1a;
  --ink-2: #3a4256;
  --ink-3: #6b7488;
  --line: #e4e6ee;
  --card: #ffffff;

  /* accent — overridable via Tweaks */
  --accent: #2d5bff;
  --accent-2: #7b3bff;
  --accent-3: #00d0c0;
  --accent-ink: #ffffff;
  --grad: linear-gradient(115deg, var(--accent), var(--accent-2) 55%, var(--accent-3));

  /* type */
  --f-head: "Space Grotesk", system-ui, sans-serif;
  --f-body: "Hanken Grotesk", system-ui, sans-serif;
  --f-mono: "Space Mono", ui-monospace, monospace;

  /* metrics */
  --r: 16px;
  --r-lg: 26px;
  --maxw: 1240px;
  --shadow: 0 1px 2px rgba(10,14,26,.04), 0 8px 30px rgba(10,14,26,.06);
  --shadow-lg: 0 30px 80px -20px rgba(45,91,255,.28), 0 12px 40px rgba(10,14,26,.10);
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.eyebrow{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:.22em;
  color:var(--accent);
  font-weight:700;
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--accent); display:inline-block; }
h1,h2,h3{ font-family:var(--f-head); font-weight:700; line-height:1.04; letter-spacing:-.02em; }
.section{ padding:120px 0; position:relative; }
.section-head{ max-width:680px; margin-bottom:64px; }
.section-head h2{ font-size:clamp(32px,4.4vw,52px); margin:18px 0 16px; }
.section-head p{ font-size:19px; color:var(--ink-2); text-wrap:pretty; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:999px; font-family:var(--f-head);
  font-weight:600; font-size:16px; letter-spacing:-.01em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  white-space:nowrap;
}
.btn-primary{ background:var(--grad); color:var(--accent-ink); box-shadow:0 8px 24px -6px rgba(45,91,255,.5); background-size:160% 160%; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -8px rgba(45,91,255,.6); background-position:100% 50%; }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn svg{ width:18px; height:18px; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ---- mobile ---- */
@media(max-width:680px){
  body{ font-size:16px; }
  .section{ padding:72px 0; }
  .section-head{ margin-bottom:44px; }
  .section-head h2{ margin:14px 0 12px; }
  .section-head p{ font-size:17px; }
}
@media(max-width:460px){
  .wrap{ padding:0 18px; }
}