@import url('form-styles.css');

/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:"DM Sans", sans-serif;
  scroll-behavior:smooth;
}

body{
  background:#f5f3ff;
  color:#1a1730;
}


/* ================= NAVBAR ================= */

.navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 60px;
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(12px);
  z-index:1000;
}

.logo{
  height:40px;
}

.navbar nav a{
  margin-left:28px;
  text-decoration:none;
  color:#2e2a4a;
  font-weight:600;
  transition:0.3s;
}

.navbar nav a:hover{
  color:#6c5cff;
}

.nav-cta{
  background:#6c5cff;
  color:#fff !important;
  padding:10px 18px;
  border-radius:10px;
}


/* ================= HERO ================= */

.hero{
  position: relative;
  height: 100vh;
  min-height: 720px;
  display: grid;
  place-items: center;
  padding: 0 20px;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
}


/* background slideshow */
.hero-bg{
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-bg .bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* cinematic zoom */
  transform: scale(1.35);

  opacity: 0;
  transition:
    opacity 1.6s ease-in-out,
    transform 8s ease-out;
}

.hero-bg .bg.active{
  opacity: 1;

  /* lagani slow zoom dok je aktivna */
  transform: scale(1.12);
}



.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;

  /* tamniji rubovi → svjetliji centar */
  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,0.04) 0%,
      rgba(60,40,160,0.25) 55%,
      rgba(10,8,40,0.65) 100%
    );
}



/* ================= GLASS CONTAINER ================= */

.hero-content{
  max-width: 860px;
  padding: 44px 52px;
  position: relative;

  /* glass efekt */
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(7px);

  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.14);

  box-shadow: 0 40px 90px rgba(0,0,0,0.45);
}


/* suptilni glow iza */
.hero-content::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  background:radial-gradient(circle, rgba(108,92,255,0.35), transparent 70%);
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  filter:blur(70px);
  z-index:-1;
}


/* ================= TYPOGRAPHY ================= */

.hero-content h1{
  font-size: 45px;
  line-height: 1.15;
  margin-bottom: 24px;

  text-shadow:
    0 10px 40px rgba(0,0,0,0.55),
    0 4px 12px rgba(0,0,0,0.45);
}

.hero-content p{
  font-size: 18px;
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto 42px;
  opacity: 0.96;
}


/* ================= CTA ================= */

.cta-btn{
  display:inline-block;
  background: linear-gradient(135deg,#6c5cff,#8f84ff);
  color:#fff;
  padding:16px 30px;
  border-radius:14px;
  text-decoration:none;
  font-weight:600;
  font-size:16px;

  transition: all .25s ease;
}

.cta-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(108,92,255,0.35);
}



/* ================= GLOBAL SECTIONS ================= */

.section{
  padding:120px 20px;
}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 40px;
}


/* ================= MODERN ABOUT FLOW ================= */

.about{
  position: relative;

  background:
    linear-gradient(
      rgba(255,255,255,0.65),
      rgba(255,255,255,0.79)
    ),
    url("images/image2.png") center/cover no-repeat;

  color: #1a1733;
  padding: 140px 20px 120px;
}

/* hard white cut između sekcija */
.about::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:80px;
  background:#ffffff;
}

.about-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:100px;
  align-items:center;
}

/* LIJEVA FLOW STRANA */
.about-flow{
  display:flex;
  flex-direction:column;
  gap:80px;
}

.about-step h2{
  font-size:40px;
  line-height:1.2;
  margin-bottom:16px;
  color:#1b1740;
}

.about-step p{
  font-size:18px;
  line-height:1.7;
  color:#4b4875;
  max-width:520px;
}

/* ================= DESNA STRANA ================= */

/* wrapper */
.about-visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
}

/* zajednička širina za sliku i card */
.about-person img,
.about-card{
  width:280px;
  max-width:90vw;
}

/* slika osobe */
.about-person{
  position:relative;
}

.about-person img{
  border-radius:22px;
  box-shadow:0 25px 60px rgba(0,0,0,0.25);
  position:relative;
  z-index:2;
  display:block;
}

/* glow iza slike */
.about-person::before{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(108,92,255,0.35), transparent 70%);
  filter:blur(45px);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:1;
}

/* ljubičasti card */
.about-card{
  background: linear-gradient(135deg, #6c5cff, #8f84ff);
  color:#fff;

  padding:28px 26px;          /* smanjeno da prati širinu slike */
  border-radius:24px;

  display:flex;
  flex-direction:column;
  gap:14px;

  font-size:17px;
  font-weight:500;

  box-shadow:0 40px 80px rgba(80,70,200,0.25);

  transform: translateY(60px) scale(0.95);
  opacity:0;
  transition: all 0.9s cubic-bezier(.2,.65,.3,1);
}

/* ================= ABOUT RIGHT SIDE ANIMATION ================= */

/* početno stanje – izvan ekrana desno */
.about-person,
.about-card{
  opacity:0;
  transform: translateX(120px);
  transition:
    transform 1s cubic-bezier(.2,.65,.3,1),
    opacity 1s cubic-bezier(.2,.65,.3,1);
}

/* kad sekcija uđe u viewport */
.about-visual.show .about-person{
  opacity:1;
  transform: translateX(0);
}

/* card dolazi MALO kasnije */
.about-visual.show .about-card{
  opacity:1;
  transform: translateX(0);
  transition-delay: .25s;
}


/* ================= REVEAL ANIMACIJE ================= */

.reveal{
  opacity:0;
  transform: translateY(70px);
  transition: all 1s cubic-bezier(.2,.65,.3,1);
}

.reveal.show{
  opacity:1;
  transform: translateY(0);
}

.delay-1{ transition-delay: .15s; }
.delay-2{ transition-delay: .3s; }

.reveal.show .about-card{
  transform: translateY(0) scale(1);
  opacity:1;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 900px){
  .about-grid{
    grid-template-columns:1fr;
    gap:70px;
    text-align:center;
  }

  .about-step p{
    margin:0 auto;
  }
}


/* ================= SERVICES BACKGROUND – FIX ================= */

.services{
  position: relative;
  overflow: hidden;

  /* KOMBINIRANI background (kao About) */
  background:
    linear-gradient(
      rgba(255,255,255,0.42),
      rgba(255,255,255,0.52)
    ),
    url("images/image4.png") center/cover no-repeat;
}






.services-header{
  text-align:center;
  max-width:700px;
  margin:0 auto 70px;
}

.services-header h2{
  font-size:42px;
  margin-bottom:16px;
  color:#1b1740;
}

.services-header p{
  font-size:18px;
  line-height:1.7;
  color:#4b4875;
}

/* GRID */
.services-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px;
}

/* KARTICE */
.service-card{
  position:relative;
  background:#ffffff;
  padding:34px;
  border-radius:20px;

  border:1px solid rgba(108,92,255,0.08);

  box-shadow:0 10px 30px rgba(0,0,0,0.05);

  transition:all 0.35s cubic-bezier(.2,.65,.3,1);
  overflow:hidden;
}

/* glow efekt */
.service-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(108,92,255,0.18), transparent 60%);
  opacity:0;
  transition:opacity .35s ease;
}

/* hover animacija */
.service-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 60px rgba(80,70,200,0.18);
}

.service-card:hover::before{
  opacity:1;
}

.service-card h3{
  font-size:20px;
  margin-bottom:12px;
  color:#1b1740;
}

.service-card p{
  font-size:16px;
  line-height:1.7;
  color:#5a5685;
}

/* delay za stagger */
.delay-1{ transition-delay:.1s; }
.delay-2{ transition-delay:.2s; }
.delay-3{ transition-delay:.3s; }



/* ================= KONTAKT ================= */

.section.light{
  background:#ffffff;
  text-align:center;
}

.section.light h2{
  font-size:40px;
  margin-bottom:16px;
}


/* ================= RESPONSIVE ================= */

@media (max-width:900px){

  .navbar{
    padding:16px 24px;
  }

  .hero-content h1{
    font-size:40px;
  }

  .about-grid{
    grid-template-columns:1fr;
    gap:60px;
    text-align:center;
  }

  .about-text{
    margin:0 auto;
    max-width:100%;
  }

  .about-text h2{
    font-size:34px;
  }
}

/* ================= PROCESS TIMELINE ================= */

.process{
  background:#f7f6ff;
}

/* header */
.process-header{
  text-align:center;
  max-width:680px;
  margin:0 auto 80px;
}

.process-header h2{
  font-size:42px;
  margin-bottom:16px;
  color:#1b1740;
}

.process-header p{
  font-size:18px;
  line-height:1.7;
  color:#5a5685;
}

/* timeline wrapper */
.process-timeline{
  position:relative;
  max-width:900px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:60px;
}

/* vertikalna linija */
.process-timeline::before{
  content:"";
  position:absolute;
  left:28px;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(#6c5cff, transparent);
}

/* step */
.process-step{
  display:flex;
  gap:30px;
  align-items:flex-start;
}

/* broj */
.step-number{
  min-width:56px;
  height:56px;
  border-radius:16px;
  background:linear-gradient(135deg,#6c5cff,#8f84ff);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:18px;
  box-shadow:0 10px 25px rgba(108,92,255,0.35);
}

/* tekst */
.step-content h3{
  font-size:22px;
  margin-bottom:8px;
  color:#1b1740;
}

.step-content p{
  font-size:16px;
  line-height:1.7;
  color:#5a5685;
  max-width:520px;
}

/* responsive */
@media (max-width:768px){

  .process-timeline::before{
    left:20px;
  }

  .process-step{
    gap:18px;
  }

  .step-number{
    min-width:46px;
    height:46px;
    font-size:16px;
  }
}

/* ================= CONTACT PREMIUM ================= */

.contact{
  padding:140px 20px;
  background:linear-gradient(135deg,#1b1740,#2a2466);
  color:#fff;
}

.contact-box{
  max-width:1100px;
  margin:0 auto;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(18px);
  border-radius:28px;
  padding:60px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  box-shadow:0 40px 80px rgba(0,0,0,0.25);
}

/* LEFT */
.contact-info h2{
  font-size:42px;
  line-height:1.2;
  margin-bottom:20px;
}

.contact-info p{
  font-size:18px;
  line-height:1.7;
  opacity:0.9;
  margin-bottom:30px;
}

.contact-details{
  display:flex;
  flex-direction:column;
  gap:10px;
  font-weight:500;
  opacity:0.9;
}

/* FORM */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:none;
  font-family:"DM Sans",sans-serif;
  font-size:15px;
}

.contact-form textarea{
  resize:none;
}

.contact-form button{
  margin-top:10px;
  padding:16px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,#6c5cff,#8f84ff);
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.contact-form button:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 35px rgba(108,92,255,0.4);
}

/* RESPONSIVE */
@media (max-width:900px){

  .contact-box{
    grid-template-columns:1fr;
    padding:40px 28px;
    gap:40px;
    text-align:center;
  }

  .contact-info h2{
    font-size:32px;
  }
}


/* ================= FOOTER ================= */

.footer{
  background: linear-gradient(
    180deg,
    #211c52 0%,
    #2f2a6d 100%
  );
  color:#ffffff;
  padding-top:80px;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:40px;
  padding-bottom:50px;
}

/* brand */
.footer-brand img{
  height:40px;
  margin-bottom:16px;
}

.footer-brand p{
  font-size:14px;
  line-height:1.6;
  opacity:0.9;
}

/* link sekcije */
.footer-links h4,
.footer-contact h4,
.footer-legal h4{
  margin-bottom:14px;
  font-size:16px;
}

/* linkovi svjetliji */
.footer a{
  display:block;
  text-decoration:none;
  color:#f1efff;
  font-size:14px;
  margin-bottom:8px;
  transition:0.25s;
}

.footer a:hover{
  color:#ffffff;
}

.footer-contact span{
  display:block;
  font-size:14px;
  opacity:0.95;
  margin-bottom:6px;
}

/* bottom */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.18);
  text-align:center;
  padding:18px 10px;
  font-size:13px;
  opacity:0.8;
}

/* ================= FOOTER COVER ================= */


/* ================= FOOTER BOTTOM ================= */

.footer-bottom{
  /* 🔥 ista pozadina kao cover → nema više 3 nijanse */
  background: linear-gradient(
    180deg,
    #2f2a6d 0%,
    #3a3490 100%
  );

  border-top:1px solid rgba(255,255,255,0.18);

  text-align:center;
  padding:20px 10px;

  font-size:13px;
  opacity:0.9;
}




/* ================= HERO GLOW EFFECT ================= */

.hero::before{
  content:"";
  position:absolute;
  width:600px;
  height:600px;
  background:radial-gradient(circle, rgba(108,92,255,0.35), transparent 70%);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  filter:blur(80px);
  opacity:0.6;
  animation:floatGlow 8s ease-in-out infinite alternate;
  z-index:-1;
}

@keyframes floatGlow{
  from{
    transform:translate(-50%,-55%) scale(1);
  }
  to{
    transform:translate(-50%,-45%) scale(1.1);
  }
}

/* ================= LEGAL PAGES ================= */

.legal{
  background:#f7f6ff;
  color:#1a1730;
  font-family:"DM Sans", sans-serif;
}

.legal-container{
  max-width:800px;
  margin:120px auto;
  padding:40px;
  background:#ffffff;
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.legal h1{
  margin-bottom:20px;
}

.legal h2{
  margin-top:30px;
  margin-bottom:10px;
}

.legal a{
  display:inline-block;
  margin-top:30px;
  color:#6c5cff;
  text-decoration:none;
  font-weight:600;
}

/* ================= COOKIE BANNER ================= */

.cookie-banner{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(40px);

  width:calc(100% - 40px);
  max-width:900px;

  background:rgba(27,23,64,0.95);
  backdrop-filter:blur(16px);

  color:#ffffff;
  padding:22px 26px;
  border-radius:18px;

  box-shadow:0 25px 60px rgba(0,0,0,0.35);

  opacity:0;
  pointer-events:none;
  transition:all .45s cubic-bezier(.2,.65,.3,1);

  z-index:9999;
}

.cookie-banner.show{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.cookie-content{
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
}

.cookie-content p{
  font-size:14px;
  line-height:1.6;
  opacity:0.95;
}

.cookie-content a{
  color:#a79bff;
  text-decoration:none;
  font-weight:600;
}

.cookie-buttons{
  display:flex;
  gap:10px;
}

/* buttons */
.btn-primary{
  background:linear-gradient(135deg,#6c5cff,#8f84ff);
  border:none;
  color:#fff;
  padding:10px 18px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  transition:.25s;
}

.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(108,92,255,0.4);
}

.btn-secondary{
  background:transparent;
  border:1px solid rgba(255,255,255,0.35);
  color:#fff;
  padding:10px 18px;
  border-radius:10px;
  font-weight:500;
  cursor:pointer;
  transition:.25s;
}

.btn-secondary:hover{
  background:rgba(255,255,255,0.08);
}

/* mobile cookie */
@media (max-width:600px){
  .cookie-content{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }

  .cookie-buttons{
    width:100%;
  }

  .cookie-buttons button{
    flex:1;
  }
}


/* ================= NEW MOBILE NAV ================= */

/* hamburger hidden desktop */
.hamburger{
  display:none;
  background:none;
  border:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  z-index:1200;
}

.hamburger span{
  width:26px;
  height:3px;
  background:#2e2a4a;
  border-radius:2px;
  transition:.3s;
}

/* X animacija */
.hamburger.active span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}
.hamburger.active span:nth-child(2){
  opacity:0;
}
.hamburger.active span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}


/* ================= MOBILE ================= */

@media (max-width: 900px){

  /* pokaži hamburger */
  .hamburger{
    display:flex;
  }

  /* sakrij desktop nav layout */
  .nav{
    position:fixed;
    top:0;
    right:-100%;
    width:100%;
    height:100vh;

    background:#0f0c2e;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:28px;

    transition:right .4s ease;
    z-index:1100;
  }

  /* otvoreno stanje */
  .nav.open{
    right:0;
  }

  /* linkovi */
  .nav a{
    color:#fff;
    font-size:22px;
    margin:0;
  }

  /* CTA */
  .nav .nav-cta{
    margin-top:12px;
    padding:16px 34px;
    border-radius:16px;
    background:linear-gradient(135deg,#6c5cff,#8f84ff);
  }

  /* stop scroll */
  body.menu-open{
    overflow:hidden;
  }
}




/* ================= MOBILE TYPOGRAPHY ================= */

@media (max-width: 900px){

  body{
    font-size:15px;
  }

  h1{
    font-size:34px !important;
    line-height:1.2;
  }

  h2{
    font-size:28px !important;
  }

  h3{
    font-size:20px !important;
  }

  p{
    font-size:15px !important;
    line-height:1.6;
  }

  .section{
    padding:90px 18px;
  }

  .container{
    padding:0 18px;
  }

  .hero{
    min-height:680px;
    padding-top:100px;
  }

  .hero-content p{
    max-width:100%;
  }

  .cta-btn{
    width:100%;
    text-align:center;
    padding:16px;
    font-size:16px;
  }
}

/* ================= FORM MESSAGE ================= */

.form-message{
  margin-top:14px;
  font-size:14px;
  font-weight:500;
  display:none;
}

.form-message.success{
  color:#22c55e;
}

.form-message.error{
  color:#ef4444;
}

/* ================= MOBILE GLOBAL SCALE ================= */

@media (max-width: 768px){

  /* manji osnovni font */
  html{
    font-size: 15px;
  }

  body{
    font-size: 15px;
  }

  /* NASLOVI */
  h1{
    font-size: 32px !important;
    line-height: 1.2;
  }

  h2{
    font-size: 26px !important;
  }

  h3{
    font-size: 18px !important;
  }

  p{
    font-size: 15px !important;
    line-height: 1.6;
  }

  /* SEKCIJE – manje praznog prostora */
  .section{
    padding: 80px 16px;
  }

  .container{
    padding: 0 16px;
  }

  /* HERO */
  .hero{
    min-height: 640px;
    padding-top: 90px;
  }

  .cta-btn{
    width: 100%;
    padding: 14px;
    font-size: 15px;
  }

  /* SERVICES kartice – jedno ispod drugog na mobitelu */
  .services-grid{
    grid-template-columns: 1fr;
  }

  .service-card{
    padding: 26px;
    border-radius: 18px;
  }

  /* ABOUT razmak manji */
  .about-flow{
    gap: 50px;
  }

  /* PROCESS timeline kompaktniji */
  .process-timeline{
    gap: 40px;
  }

  .step-number{
    min-width: 42px;
    height: 42px;
    font-size: 14px;
    border-radius: 12px;
  }

  /* CONTACT box */
  .contact-box{
    padding: 32px 20px;
    border-radius: 22px;
  }
}

/* ================= MOBILE MENU VISIBILITY FIX ================= */

@media (max-width: 900px){

  #nav-menu a{
    color: rgba(255,255,255,0.42);   /* svjetlije nego prije */
    font-size: 22px;                 /* malo veće → premium */
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: 0.25s ease;
  }

  /* hover ostaje ljubičasti glow koji voliš */
  #nav-menu a:hover{
    color: #a79bff;
    transform: translateY(-1px);
  }

  /* CTA gumb u meniju */
  #nav-menu .nav-cta{
    background: linear-gradient(135deg,#6c5cff,#8f84ff);
    color: #fff !important;
    padding: 16px 34px;
    border-radius: 18px;
    font-size: 18px;
    box-shadow: 0 12px 30px rgba(108,92,255,0.35);
  }

  #nav-menu .nav-cta:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(108,92,255,0.45);
  }
}
/* ===== MOBILE NAV FINAL FIX ===== */
@media (max-width: 900px){

  #nav-menu a{
    color:#ffffff !important;
    font-size:22px;
    font-weight:600;
    letter-spacing:0.3px;
  }

  #nav-menu a:hover{
    color:#a79bff !important;
  }

}

/* ===== MOBILE STICKY CTA ===== */
.mobile-cta{
  display:none;
}

@media (max-width:900px){

  .mobile-cta{
    display:block;
    position:fixed;
    bottom:16px;
    left:50%;
    transform:translateX(-50%);
    width:calc(100% - 32px);
    max-width:270px;

    text-align:center;
    padding:16px;

    background:linear-gradient(135deg,#6c5cff,#8f84ff);
    color:#fff;
    font-weight:700;
    font-size:16px;
    text-decoration:none;

    border-radius:16px;
    box-shadow:0 20px 40px rgba(108,92,255,0.45);

    z-index:9998;
  }

}

.mobile-cta{
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(20px);
  transition:all .35s ease;
}

/* ================= HERO MOBILE FIX (PRO) ================= */
@media (max-width: 768px){

  .hero{
    height: 92vh;        /* manje od full ekrana → nema brutalnog zooma */
    min-height: 560px;   /* kontrolirana visina */
    padding-top: 80px;   /* da navbar ne gura sadržaj */
  }

  .hero-bg .bg{
    object-fit: cover;        /* ostaje cinematic */
    object-position: center;  /* normalan crop */
  }

  .hero::after{
    background: radial-gradient(
      circle at 50% 40%,
      rgba(108,92,255,0.18),
      rgba(16,8,64,0.65) 70%,
      rgba(16,8,64,0.85)
    );
  }

  .hero-content{
    transform: translateY(-10px); /* optičko centriranje */
  }
}

/* ================= PREMIUM MOBILE HERO ================= */
@media (max-width: 768px){

  .hero{
    height: auto;
    min-height: 100vh;
    padding: 120px 20px 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-bg .bg{
    object-fit: cover;
    object-position: center top;
  }

  /* ✨ isti stil kao desktop — samo malo blaži */
  .hero::after{
    background:
      radial-gradient(
        circle at center,
        rgba(255,255,255,0.05) 0%,
        rgba(60,40,160,0.22) 55%,
        rgba(10,8,40,0.55) 100%
      );
  }

  .hero-content{
    max-width: 420px;
    transform: translateY(-6px);
    padding: 34px 28px;

    /* glass ostaje ali je suptilniji */
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.18);
  }

  .hero-content h1{
    font-size: 32px !important;
    line-height: 1.2;
    margin-bottom: 16px;
  }

  .hero-content p{
    font-size: 15px !important;
    opacity: 0.95;
    margin-bottom: 24px;
  }

  .cta-btn{
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    display: block;
    padding: 15px;
    font-size: 15px;
    border-radius: 14px;

    box-shadow: 0 12px 30px rgba(108,92,255,0.35);
  }
}


.reveal{
  opacity:0;
  transform: translateY(60px);
  filter: blur(8px);
  transition: 
    opacity 0.9s cubic-bezier(.2,.65,.3,1),
    transform 0.9s cubic-bezier(.2,.65,.3,1),
    filter 0.9s cubic-bezier(.2,.65,.3,1);
}

.reveal.show{
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
}

.glow-orb{
  position:fixed;
  width:300px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(108,92,255,0.35), transparent 70%);
  filter:blur(60px);
  pointer-events:none;
  z-index:-1;
  transition:transform .2s linear;
}


.contact-linkedin{
  color:#a79bff;
  text-decoration:none;
  font-weight:500;
  font-size:14px;

  display:inline-block;   /* ← KLJUČNO: ne dira grid/layout */
  margin-top:2px;

  transition:.25s ease;
}

.contact-linkedin:hover{
  color:#ffffff;
}


/* ===== FOOTER LINK HOVER FIX ===== */

.footer a{
  color:#d6d2ff;
  transition: all .25s ease;
  position:relative;
}

.footer a:hover{
  color:#ffffff;
  transform:translateX(2px);
}