:root{
  --cpi-blue:#005ca9;
  --cpi-blue-2:#0072bc;
  --cpi-dark:#263746;
  --cpi-dark-2:#1f2f3d;
  --cpi-orange:#f28c00;
  --cpi-green:#5c8f22;
  --cpi-red:#c84c3a;
  --cpi-bg:#f4f7fa;
  --cpi-soft:#e8f2fb;
  --cpi-border:#d9e2ec;
  --cpi-text:#263746;
  --cpi-muted:#6b7c8f;
  --white:#ffffff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--cpi-text);
  background:var(--cpi-bg);
  line-height:1.6;
}
a{color:var(--cpi-blue);}
a:hover{color:var(--cpi-blue-2);}

.btn-main{
  border:0;
  border-radius:4px;
  color:#fff;
  font-weight:700;
  padding:14px 24px;
  box-shadow:0 8px 20px rgba(38,55,70,.14);
  text-decoration:none;
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  transition:.2s ease;
}
.btn-main:hover{transform:translateY(-2px);color:#fff;filter:brightness(1.04)}
.btn-green{background:var(--cpi-green)}
.btn-red{background:var(--cpi-red)}
.btn-blue,.btn-blue-custom{background:var(--cpi-blue);color:#fff}
.btn-blue:hover,.btn-blue-custom:hover{background:var(--cpi-blue-2);color:#fff}
.btn-orange{background:var(--cpi-orange);color:#fff}
.btn-orange:hover{background:#dc7f00;color:#fff}

/* HERO */
.hero{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(0,92,169,.06) 0 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,92,169,.05) 0 1px, transparent 1px),
    radial-gradient(circle at 82% 22%, rgba(0,92,169,.15), transparent 28%),
    radial-gradient(circle at 12% 92%, rgba(242,140,0,.12), transparent 34%),
    linear-gradient(135deg,#ffffff 0%,#f6f9fc 52%,#e8f2fb 100%);
  background-size:32px 32px,32px 32px,auto,auto,auto;
}
.hero:before{
  content:"";
  position:absolute;
  right:-12%;
  bottom:-28%;
  width:72vw;
  height:72vw;
  border-radius:50%;
  border:58px solid rgba(0,92,169,.10);
  pointer-events:none;
}
.hero:after{
  content:"";
  position:absolute;
  left:-6%;
  top:-16%;
  width:24vw;
  height:24vw;
  border-radius:50%;
  border:10px solid rgba(242,140,0,.14);
  pointer-events:none;
}
.navbar{
  padding:22px 0;
  position:relative;
  z-index:4;
  background:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(217,226,236,.9);
  backdrop-filter:blur(6px);
}
.brand{
  font-size:34px;
  font-weight:900;
  color:var(--cpi-dark);
  text-decoration:none;
  letter-spacing:-1px;
}
.brand img{max-height:74px;width:auto;display:block}
.header-contact{
  display:flex;
  align-items:center;
  gap:30px;
  font-weight:700;
}
.header-contact a{
  color:var(--cpi-dark);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px;
  transition:.2s;
}
.header-contact a:hover{color:var(--cpi-blue)}
.header-contact i{color:var(--cpi-blue);font-size:18px}

.hero-content{
  min-height:calc(100vh - 100px);
  display:flex;
  align-items:center;
  position:relative;
  z-index:3;
  padding:30px 0 80px;
}
.badge-soft{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--cpi-soft);
  color:var(--cpi-blue);
  border:1px solid rgba(0,92,169,.14);
  border-radius:999px;
  padding:9px 15px;
  font-weight:800;
  margin-bottom:24px;
}
.badge-dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--cpi-orange);
  box-shadow:0 0 0 6px rgba(242,140,0,.16);
}
.hero h1{
  font-size:clamp(54px,8vw,112px);
  line-height:.9;
  letter-spacing:-5px;
  font-weight:900;
  margin:0 0 16px;
  color:var(--cpi-dark);
}
.brand-accent,.text-accent{color:var(--cpi-orange)}
.brand-main{color:var(--cpi-blue)}
.hero h2{
  font-size:clamp(28px,3.5vw,48px);
  line-height:1.14;
  font-weight:900;
  color:var(--cpi-blue);
  margin-bottom:24px;
  letter-spacing:-1px;
}
.hero p{
  font-size:18px;
  line-height:1.75;
  color:#415367;
  max-width:580px;
  margin-bottom:28px;
  font-weight:600;
}
.visual{position:relative;min-height:520px}
.photo-card{
  position:absolute;
  right:7%;
  top:50%;
  transform:translateY(-50%);
  width:min(430px,84vw);
  aspect-ratio:1/1;
  border-radius:50%;
  background:#dcecff;
  box-shadow:0 30px 80px rgba(38,55,70,.18);
  overflow:hidden;
  border:14px solid #fff;
}
.photo-card img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.circle-line{
  position:absolute;
  right:2%;top:50%;transform:translateY(-50%);
  width:min(500px,92vw);aspect-ratio:1/1;border-radius:50%;
  border:3px dashed rgba(0,92,169,.52);pointer-events:none;
}
.float-card{
  position:absolute;z-index:4;width:118px;height:118px;background:#fff;border-radius:50%;
  border:1px solid var(--cpi-border);
  box-shadow:0 18px 45px rgba(38,55,70,.13);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;
  font-weight:900;color:var(--cpi-dark);
}
.float-card i{font-size:34px;color:var(--cpi-blue)}
.float-card span{font-size:14px}
.f1{right:41%;top:11%}.f2{right:52%;top:53%}.f3{right:3%;top:44%}.f4{right:26%;bottom:6%}
.dots{
  position:absolute;top:7%;left:12%;width:110px;height:110px;
  background-image:radial-gradient(var(--cpi-blue) 2px, transparent 2px);
  background-size:15px 15px;opacity:.36;
}
.wave{
  position:absolute;right:-120px;bottom:20px;width:55%;height:210px;opacity:.25;
  background:repeating-linear-gradient(155deg, transparent 0 17px, rgba(0,92,169,.25) 18px 20px);
  border-radius:50%;transform:rotate(-10deg);
}
.scroll-down{
  position:absolute;bottom:35px;left:50%;transform:translateX(-50%);width:60px;height:60px;
  background:#fff;border:1px solid var(--cpi-border);border-radius:50%;display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:var(--cpi-blue);box-shadow:0 10px 30px rgba(38,55,70,.15);animation:bounce 2s infinite;z-index:20;
}
.scroll-down:hover{color:var(--cpi-blue-2)}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-10px)}60%{transform:translateX(-50%) translateY(-5px)}}

/* SECTIONS */
.section-padding{padding:90px 0}
.section-title{
  font-weight:900;color:var(--cpi-dark);letter-spacing:-1px;text-align:center;margin-bottom:12px;
}
.section-line{width:58px;height:4px;background:var(--cpi-blue);border-radius:999px;margin:0 auto 34px}
.faq-section{background:#fff}
.accordion-item{
  border:1px solid var(--cpi-border);
  border-radius:4px !important;
  box-shadow:0 8px 24px rgba(38,55,70,.06);
  margin-bottom:14px;overflow:hidden;
}
.accordion-button{font-weight:800;color:var(--cpi-dark);padding:20px 24px;background:#fff}
.accordion-button:not(.collapsed){background:var(--cpi-soft);color:var(--cpi-dark);box-shadow:none}
.accordion-button:focus{box-shadow:0 0 0 .2rem rgba(0,92,169,.14)}
.q-icon{
  width:34px;height:34px;border-radius:50%;background:var(--cpi-blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-right:14px;flex:0 0 auto;
}
.steps-section{background:linear-gradient(180deg,#f4f7fa 0%,#ffffff 100%)}
.step-box{
  text-align:center;padding:28px 22px;height:100%;background:#fff;border:1px solid var(--cpi-border);border-radius:4px;box-shadow:0 8px 22px rgba(38,55,70,.06);
}
.step-icon{
  width:78px;height:78px;border-radius:50%;background:var(--cpi-soft);color:var(--cpi-blue);font-size:34px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.step-box h5{font-weight:900;color:var(--cpi-dark)}
.step-box p{color:var(--cpi-muted);line-height:1.7;margin:0}

.contact-section{
  background:
    radial-gradient(circle at 0% 100%, rgba(242,140,0,.16), transparent 25%),
    linear-gradient(135deg,var(--cpi-dark) 0%,#1f496d 100%);
  color:#fff;position:relative;overflow:hidden;
}
.contact-section:after{
  content:"";position:absolute;right:50px;bottom:20px;width:115px;height:115px;
  background-image:radial-gradient(rgba(255,255,255,.55) 2px, transparent 2px);background-size:15px 15px;opacity:.45;
}
.contact-title{font-weight:900;margin-bottom:10px}
.contact-line{width:50px;height:3px;background:var(--cpi-orange);border-radius:99px;margin-bottom:28px}
.form-control{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.24);color:#fff;border-radius:4px;padding:14px 16px;
}
.form-control::placeholder{color:rgba(255,255,255,.72)}
.form-control:focus{background:rgba(255,255,255,.08);color:#fff;border-color:var(--cpi-orange);box-shadow:0 0 0 .25rem rgba(242,140,0,.18)}
.contact-item{display:flex;gap:18px;margin-bottom:30px;align-items:flex-start}
.contact-icon{width:58px;height:58px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;flex:0 0 auto}
.contact-item strong{display:block;margin-bottom:5px}.contact-item a{color:#fff;text-decoration:none}.contact-item a:hover{text-decoration:underline}

footer{background:#ffffff;padding:0}
.footer-partners{width:100%;background:#ffffff;border-top:1px solid var(--cpi-border);border-bottom:1px solid var(--cpi-border);text-align:center;padding:15px}
.footer-partners img{max-width:100%;height:auto;display:block;margin:0 auto}
.footer-copy{background:var(--cpi-dark);color:#fff;text-align:center;padding:20px;font-weight:700}
.eu-project{background:#fff;padding:20px 0;border-top:1px solid var(--cpi-border)}
.eu-logos{display:block;width:100%;max-width:1400px;height:auto;margin:0 auto}

.scroll-indicator{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);text-align:center;z-index:20}
.scroll-indicator span{display:block;font-size:13px;font-weight:700;color:#6c7a8d;margin-bottom:10px;letter-spacing:1px;text-transform:uppercase}
.mouse{width:34px;height:56px;border:2px solid var(--cpi-blue);border-radius:20px;position:relative;margin:0 auto}
.wheel{width:6px;height:10px;background:var(--cpi-blue);border-radius:3px;position:absolute;top:10px;left:50%;transform:translateX(-50%);animation:scroll-wheel 1.8s infinite}
@keyframes scroll-wheel{0%{opacity:1;top:10px}100%{opacity:0;top:28px}}

#cookie-banner{
  position:fixed;bottom:0;left:0;width:100%;background:var(--cpi-dark);color:#fff;padding:15px 20px;text-align:center;z-index:99999;font-size:14px;box-shadow:0 -2px 10px rgba(0,0,0,.3)
}
#cookie-banner a{color:#fff;text-decoration:underline;font-weight:700}
#cookie-banner button{background:var(--cpi-orange);color:#fff;border:0;padding:8px 20px;margin-left:15px;border-radius:4px;cursor:pointer;font-weight:700}
#cookie-banner button:hover{opacity:.92}

@media(max-width:991px){
  .hero-content{padding-top:10px;text-align:center}
  .hero p{margin-left:auto;margin-right:auto}
  .visual{min-height:440px;margin-top:20px}
  .photo-card{left:50%;right:auto;transform:translate(-50%,-50%);width:min(390px,78vw)}
  .circle-line{left:50%;right:auto;transform:translate(-50%,-50%);width:min(455px,90vw)}
  .f1{left:11%;right:auto;top:6%}.f2{left:4%;right:auto;top:52%}.f3{right:4%;top:47%}.f4{right:22%;bottom:0}
  .navbar .d-flex{width:100%;justify-content:center;margin-top:16px}
  .brand{display:block;width:100%;text-align:center}
  .header-contact{width:100%;justify-content:center;margin-top:15px;gap:20px;flex-wrap:wrap}
  .header-contact a{font-size:14px}
}
@media(max-width:768px){
  .footer-partners{padding:10px}.footer-partners img{width:100%;max-width:1200px}.eu-project{padding:10px 0}.eu-logos{width:100%;max-width:100%}
}
@media(max-width:575px){
  .navbar{padding:18px 0}.navbar .d-flex{gap:8px!important}.btn-main{padding:12px 14px;font-size:14px}.hero h1{letter-spacing:-3px}.visual{min-height:365px}.float-card{width:88px;height:88px}.float-card i{font-size:24px}.float-card span{font-size:11px}.section-padding{padding:64px 0}
}
.navodila-dropdown{
    position:relative;
    display:inline-block;
}

.navodila-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:320px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    padding:10px 0;
    z-index:9999;

    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:all .25s ease;
}

.navodila-dropdown:hover .navodila-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.navodila-menu a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 18px;
    color:#364150;
    text-decoration:none;
    font-size:15px;
    white-space:nowrap;
}

.navodila-menu a:hover{
    background:#f5f7fa;
    color:#3AA0F6;
}

.navodila-menu i{
    width:20px;
    text-align:center;
}