/* Digitalna Budućnost — Dark mini-landing (sa parallax bg blobs, bez gradijenta na dugmićima) */
:root{
  --bg: #0f0f0f;
  --bg-elev: #121212;
  --text: #f5f5f5;
  --muted: #b8b8b8;
  --card: #141414;
  --card-2: #171717;
  --card-border: #2a2a2a;
  --accent-orange: #f37b1d;
  --accent-blue: #00a9e0;
  --btn-accent: var(--accent-orange); /* zameni u var(--accent-blue) za plava dugmad globalno */
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--text); text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:24px; position:relative; z-index:1}

/* ===== BG BLOBS (iza sadržaja) ===== */
.bg-blobs{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.blob{
  position:absolute; width:60vw; max-width:680px; aspect-ratio:1/1;
  border-radius:50%;
  filter: blur(80px);
  opacity:.35;
  will-change: transform;
  /* mešanje sa tamnom pozadinom */
  mix-blend-mode: screen;
  background:
    radial-gradient(35% 35% at 30% 30%, rgba(243,123,29,.60), transparent 65%),
    radial-gradient(35% 35% at 70% 70%, rgba(0,169,224,.60), transparent 65%);
}
.blob-a{ top:-10vh; left:-10vw; transform: translate3d(0,0,0) rotate(0.001deg); }
.blob-b{ bottom:-15vh; right:-15vw; transform: translate3d(0,0,0) rotate(0.001deg); opacity:.28 }

@media (max-width: 680px){
  .blob{ width:90vw; }
}

/* PRELOADER */
#preloader{
  position:fixed; inset:0; display:grid; place-items:center; background:#0b0b0b; z-index:9999;
  transition:opacity .35s ease, visibility .35s ease;
}
#preloader.hide{opacity:0; visibility:hidden}
.loader-wrap{position:relative; display:grid; place-items:center; gap:12px}
.loader-logo{border-radius:12px}
.loader-text{color:#bbb; font-size:13px}
.ring{
  position:absolute; width:120px; height:120px; border-radius:999px;
  background:conic-gradient(from 0deg,var(--accent-orange),var(--accent-blue),var(--accent-orange));
  -webkit-mask:radial-gradient(circle 52px,#0000 60px,#000 61px);
  mask:radial-gradient(circle 52px,#0000 60px,#000 61px);
  animation:spin 1.2s linear infinite;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.35));
}
@keyframes spin{to{transform:rotate(360deg)}}

/* HEADER */
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:42px;height:42px;border-radius:10px}
.brand-title{font-weight:700;letter-spacing:.2px;font-size:18px}
.brand-sub{font-size:12px;color:#a7a7a7}
.top-actions .badge{margin-left:auto}
.badge{
  display:inline-block;padding:6px 10px;font-size:12px;border-radius:999px;
  background:#151515;border:1px solid #2a2a2a;color:#bdbdbd
}

/* HERO */
.hero{padding:56px 0 28px}
.gradient-title{
  font-size:clamp(28px,4.4vw,48px);line-height:1.12;margin:.2em 0 .35em;
  background:linear-gradient(90deg,var(--accent-orange),var(--accent-blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 20px rgba(0,0,0,.35));
}
.hero .lead{color:#cfcfcf;max-width:760px;margin:0 0 18px}
.hero-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* BUTTONS (bez gradijenta) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 20px;border-radius:999px;cursor:pointer;border:1px solid transparent;
  transition:transform .15s ease,box-shadow .2s ease,background .3s ease,opacity .2s ease;
  font-weight:600;letter-spacing:.2px;
}
.btn-primary{ background:var(--btn-accent); color:#fff; border:1px solid transparent; box-shadow:0 6px 18px rgba(0,0,0,.35) }
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.btn-primary:active{ transform:translateY(0); filter:brightness(0.97) }
.btn-ghost{ border-color:#2e2e2e; background:#141414; color:var(--text) }
.btn-ghost:hover{ border-color:#3a3a3a; transform:translateY(-1px) }
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* SECTIONS */
.section{padding:22px 0}
.section-title{margin:0 0 12px;font-size:22px}

/* SERVICES */
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:860px){.service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{
  border:1px solid var(--card-border);
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border-radius:var(--radius);padding:18px;position:relative;overflow:hidden;
  box-shadow:var(--shadow);
  transition:border-color .2s ease,transform .15s ease,box-shadow .2s ease,background .3s ease, opacity .2s ease, filter .2s ease;
  outline:none;
}
.card:hover{transform:translateY(-2px);border-color:#3a3a3a}
.card:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.5)}
.card .icon{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:10px;
  color:#dfe8ff;background:radial-gradient(120% 120% at 10% 10%,rgba(0,169,224,.25),rgba(243,123,29,.25) 70%);
  border:1px solid #2a2a2a;
}
.card h3{font-size:17px;margin:.4em 0 .25em;letter-spacing:.2px}
.card p{margin:0;color:#c9c9c9;font-size:14px}
.card.active{
  border-color:transparent;
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 12px 34px rgba(0,169,224,.2), 0 18px 40px rgba(243,123,29,.16), var(--shadow);
}
.card.active::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,var(--accent-orange),var(--accent-blue));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.card.active::before{
  content:"✓"; position:absolute; top:10px; right:10px; width:28px; height:28px;
  display:grid; place-items:center; font-weight:800; font-size:16px;
  color:#0b0b0b; background:var(--btn-accent); border-radius:999px;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.card.active .icon{ color:#fff; background:linear-gradient(135deg,var(--accent-orange),var(--accent-blue)); border-color:transparent }
.card.active h3{color:#fff}
.card.active p{color:#e7e7e7}
.has-selection .service-grid .card:not(.active){ opacity:.70; filter:saturate(.8) }

/* FORM */
.form{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:860px){.form.two{grid-template-columns:1fr 1fr}}
.input{ background:#131313;border:1px solid #2a2a2a;color:var(--text); border-radius:12px;padding:12px 14px;width:100% }
.input:focus{ outline:none;border-color:#3a3a3a;box-shadow:0 0 0 2px rgba(255,255,255,.06) }
.textarea{min-height:110px;resize:vertical}
.label{display:block;font-size:13px;color:#c7c7c7;margin-bottom:6px}
.helper{font-size:12px;color:#9c9c9c}
.agree-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* FOOTER */
.footer{padding:36px 0 28px;color:#9c9c9c;border-top:1px solid #1e1e1e;margin-top:32px;font-size:14px}
.footer a{color:#bdbdbd}

/* TOAST */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:#101010;border:1px solid #2a2a2a;padding:14px 18px;border-radius:12px;
  box-shadow:var(--shadow);display:none;z-index:9999
}
.toast.show{display:block}

/* ACCESSIBILITY & motion */
.card:focus-visible,.btn:focus-visible,.input:focus-visible{ outline:2px solid rgba(255,255,255,.08); outline-offset:2px }
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}