/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); */



body {
  font-family: 'Poppins', 'DM Serif Display', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}

html, body {
    background-color: transparent;
    min-height: 100vh;
    /* font-family: 'Inter', sans-serif; */
    overflow-x: hidden;
    scroll-behavior: smooth;
    
  }
  
 

.hero-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }
  
  .video-bg {
    position: absolute; 
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
  }
  

.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.overlay{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.263);
  backdrop-filter: blur(10px) saturate(115%) brightness(0.9);
  -webkit-backdrop-filter: blur(10px) saturate(115%) brightness(0.9);
  z-index: 1;            
  pointer-events: none;  
}

.navbar {
  width: min(95vw, 1200px);
  height: 56px;                    
  border-radius: 16px;
  padding: 0 16px; 

  position: fixed;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.1); 
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  
  
  transition: background 0.4s ease, backdrop-filter 0.4s ease, opacity 0.3s ease, transform 0.3s ease;
  z-index: 10;

  background: rgba(255,255,255,0.22);
  
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}



.menu-lang-switch {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0 1rem;
}

.lang-btn {
  background: none;
  border: 1px solid #fff;
  color: #fff;
  /* font-family: inherit; */
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.lang-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}




.navbar.hidden {
  transform: translate(-50%, -100%);
  opacity: 0;
}


.logo {
  position: relative;
}






.logo img{ height: 36px; }
@media (max-width: 768px){
  .navbar{
    width: calc(100% - 16px);
    left: 8px;                       
    transform: none;
  }
  .logo img{ height: 36px; }
}


.cta-button {
  display: flex;
  align-items: center;
  padding: 3px 8px;
  background: #042b57;
  color: white;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: transform 0.2s ease;
  text-decoration: none;

}

.cta-button:hover {
  transform: scale(1.08);
}

.cta-button .arrow {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.cta-button:hover .arrow {
  transform: translateX(5px);
}



.menu-toggle{
  --size: 28px;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  width: var(--size); height: var(--size);
  cursor:pointer; -webkit-tap-highlight-color: transparent;
}
.menu-toggle .bar{
  height:2px; width:100%;
  background: rgba(10,35,60,.95);
  border-radius:2px;
  transition: transform .35s ease, opacity .25s ease, width .25s ease;
}
.menu-toggle .bar:nth-child(2){ width: 80%; align-self:flex-end; }
.menu-toggle.active .bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.menu-toggle.active .bar:nth-child(2){ opacity:0; }
.menu-toggle.active .bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }


.menu{
  position: fixed; inset: 0;       
  display:none; z-index: 9;
}
.menu.shown{ display:block; }

.menu-sheet{
  position: absolute;
  top: 80px; left: 50%; transform: translateX(-50%);
  width: min(92vw, 920px);
  border-radius: 16px;
  padding: clamp(14px,2vw,18px);
  
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
  animation: menu-pop .25s ease;
}
@keyframes menu-pop{
  from{ transform: translateX(-50%) translateY(-6px); opacity: 0 }
  to  { transform: translateX(-50%) translateY(0);   opacity: 1 }
}


.menu-row{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: clamp(8px, 2vw, 18px);
  align-items:start;
  padding: clamp(6px,1vw,10px) 0;
}
.menu-h{
  margin:0;
  font-size: 14px; letter-spacing:.08em; text-transform: uppercase;
  color: whitesmoke;
}
.menu-a{
  display:inline-block;
  padding: 10px 12px;
  margin-right: 8px;
  text-decoration:none;
  color:whitesmoke;
  border-radius: 10px;
  transition: transform .2s ease, background .2s ease;
}
.menu-a:hover{
  background: rgba(255,255,255,.35);
  transform: translateY(-1px);
}


.menu-sep{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  margin: 10px 0;
}


@media (max-width: 700px){
  .menu-sheet{ width:min(94vw, 560px); }
  .menu-row{ grid-template-columns: 1fr; }
  .menu-h{ opacity:.75; }
  .menu-a{ display:block; margin: 2px 0; }
}


@media (prefers-reduced-motion: reduce){
  .menu-toggle .bar,
  .menu-sheet{ transition:none; animation:none; }
}

  


.content1 {
  position: relative;
  top:30vh;
  padding: 40px 140px;
  max-width: auto;
  margin: 0 auto;
  color: white;
  text-align: left;
}


.content1 h1{
  font-size: clamp(24px, 5.5vw, 48px);
  line-height: 1.15;
  margin: 0 0 12px 3vw;
}
.content1 p{
  font-size: clamp(14px, 3.5vw, 18px);
}
@media (max-width: 768px){
  .content1{
    left: auto;         
    top: 34vh;
    padding: 0 20px;
  }
  .content1 h1{ margin-left: 0; }
  .content1 p{ margin-left: 0; }
}


@media (max-width: 768px) {
    .content1 h1 {
        font-size: 2rem;
        line-height: 1.2;
        font-weight: 700;
        margin-top: -15vw;
        margin-left: 3vw;
      }

      .content1 {
        position: relative;
        top: 30vh;
        padding: 0 40px;
        max-width: auto;
        margin: 0 auto;
        color: white;
        text-align: left;
      }
  }
  

.content1 h1 em {
  font-style: italic;
  font-weight: 400;
}

.content1 p {
  margin: 20px 0;
  font-size: 18px;
  max-width: auto;
  margin-left: auto;
  margin-right: auto;
  margin-left: 3vw;
}

.book-demo-main {
  margin-left: 3vw;
  display: inline-block;
  margin-top: 10px;
  background: white;
  color: black;
  padding: 14px 24px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}

.book-demo-main:hover {
  background: #ddd;
}


@media (max-width: 768px) {
  .menu {
    flex-direction: column;
    top: 70px;
  }

  .menu-column {
    margin: 10px 0;
  }

  .cta-button {
    font-size: 12px;
    padding: 6px 12px;
  }

  .logo img {
    height: 28px;
  }

  .navbar {
    padding: 0 20px;
  }
  .content1{
    top: 35vh;
  }

  .content1 p {
    line-height: 2;
  }
}




.hiw-section {
  --fg:#e9f0ec;
  --muted:rgba(233,240,236,.78);
  --rule:#001f3f;
  --maxw:1100px;

  background:
    radial-gradient(1200px 600px at 50% 100%, #001f3f 0%, rgb(8, 9, 17) 122%),
    #001f3f;
  color:var(--fg);
    padding: 96px 24px;
  }
  
  .hiw2.container { 
    max-width: 100vw; 
    margin: 0 auto; 
    position: relative;
    padding-left: 64px; 
  }
  
  
  .hiw2-head h2 {
    /* font-family: 'Poppins', sans-serif; */
    font-weight: 700;
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: 12px;
    display: grid; place-items: center
    
  }
  .hiw2-head p {
    font-size: 18px;
    opacity: .9;
    max-width: 900px;
    margin: 0 auto 48px auto;
    text-align: center; 
  }
  
  
  
  .hiw2-timeline {
    position: absolute;
    left: 20px;              
    top: 0;
    bottom: 0;
    width: 24px;             
    pointer-events: none;
  }
  .hiw2-line {
    position: absolute;
    left: 11px;              
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255,255,255,.25);
  }
  .hiw2-progress {
    position: absolute;
    left: 11px;
    top: 0;
    width: 2px;
    height: var(--hiw2-progress, 0px);  
    background: linear-gradient(180deg,#fff,#7aa7ff);
    box-shadow: 0 0 10px rgba(20, 30, 49, 0.6);
    transition: height .18s ease;       
  }
  
  
  .hiw2-steps {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 0;
    list-style: none;  
    margin: 0;         
    padding: 0;        
  }
  
  
  

  .hiw2-step {
    height: auto !important;       
    width: auto !important;
    min-width: 80vw;
    transform: scale(1.02);
    background: transparent; 
    outline: none;
    display: flex;
    flex-direction: column;  
    align-items: center;
    justify-content: flex-start;
    gap: 14px 20px;
    border-radius: 16px;
    padding: 16px;
    will-change: transform, filter, opacity;
    backface-visibility: hidden;
    opacity: 0.6;         
    filter: blur(4px);   
    transform: translateY(8px) scale(.985);
    transition:
      transform .7s cubic-bezier(.22,.61,.36,1),
      filter    .7s cubic-bezier(.22,.61,.36,1),
      opacity   .7s cubic-bezier(.22,.61,.36,1);
  }

.hiw2-step.is-active {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}


.hiw2-step .hiw2-media { opacity: .9; transition: opacity .45s ease; }
.hiw2-step.is-active .hiw2-media { opacity: 1; }


@media (prefers-reduced-motion: reduce) {
  .hiw2-step {
    transition: opacity .25s linear;
    transform: none;
  }
}
  
  
 
  
 
  
  
  
  .hiw2-media {
    order: 2; 
    height: 22vw;                  
    width: 80%;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.12);
  }
  .hiw2-video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: contrast(1.02) saturate(1.05);
    opacity: .98;
    outline: 2px solid #79b6ff;
  }
  

  .hiw2-copy h3 {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: start;
  }
  .hiw2-copy p {
    font-size: 1rem;
    line-height: 1.5;
    opacity: .92;
    text-align: start;
  }
  
  
  .hiw2-step.is-active {
    height: auto !important;       
   
    width: auto !important;
    min-width: 80vw;
    filter: blur(0);
    transform: scale(1.02);
    background: transparent; 
    outline: none;
}


.hiw2-copy {
  order: 1; 
}
.hiw2-step.is-active .hiw2-copy {
    
    outline-offset: 4px;
    border-radius: 8px;
    
    padding: 8px;
}


.hiw2.container { --axis-left: 31px; }


.hiw2-num{
  align-self: center;                 
  justify-self: start;
  margin-left: calc(var(--axis-left) - 18px); 
  position: relative;
  background: conic-gradient(transparent calc(var(--fill,0) * 360deg),transparent 0);
  transition: background .2s linear, transform .2s ease;
  color:transparent;
}



  
  
  @media (max-width: 1024px) {
    .hiw2.container { padding-left: 52px; }
    .hiw2-step {
      grid-template-columns: 56px 1fr;
    }
    .hiw2-num { width: 48px; height: 48px; font-size: 18px; }
  }
  
  @media (max-width: 640px) {
    .hiw2.container { padding-left: 44px; }
    .hiw2-step {
      gap: 10px 14px;
      padding: 14px;
    }
    .hiw2-copy h3 { font-size: 18px; }
    .hiw2-copy p { font-size: 14px; }
  }
  
  



.faqs-section{
  --fg:#e9f0ec;
  --muted:rgba(233,240,236,.78);
  --rule:#001f3f;
  --maxw:1100px;

  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(8,17,15,1) 0%, rgba(8,17,15,1) 122%),
    #001f3f;
  color:var(--fg);
  padding: clamp(60px,8vw,120px) clamp(16px,5vw,40px);
  position: relative;
  isolation: isolate;   /* nowy stacking context */
  z-index: 0;
}

.faqs-header{
  position: relative;
  z-index: 1;
  max-width:var(--maxw);
  margin:0 auto clamp(28px,4vw,56px);
  text-align:center;

}
.faqs-header h1{
  /* font-family:'Inter',system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; */
  font-weight:600;
  letter-spacing:-0.01em;
  font-size: clamp(32px,6vw,64px);
  line-height:1.05;
}
.faqs-header .faqs-subtitle{
  margin-top:12px;
  color:var(--muted);
  font-size: clamp(14px,1.5vw,18px);
}

.faq-list{
  max-width:var(--maxw);
  margin:0 auto;
  list-style:none;
  padding:0;
}

.faq-item{ border-bottom:1px solid var(--rule); }

.faq-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:transparent;
  border:0;
  padding: clamp(18px,2.4vw,24px) 0;
  cursor:pointer;
  text-align:left;
  color:inherit;
}

.faq-q{
  font-size: clamp(16px,2.2vw,22px);
  font-weight:600;
}


.faq-icon{
  position:relative;
  width:18px; height:18px;
  flex:0 0 18px;
  color:var(--fg);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.faq-icon::before,
.faq-icon::after{
  content:"";
  position:absolute; inset:0;
  margin:auto;
  width:100%; height:2px;
  background:currentColor;
  border-radius:2px;
  transform-origin:50% 50%;
}
.faq-icon::after{ transform: rotate(90deg); }       

.faq-item.is-open .faq-icon{ transform: rotate(225deg); }


.faq-answer{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition: max-height .45s ease, opacity .35s ease;
  will-change:max-height,opacity;
}
.faq-answer p{
  color:var(--muted);
  font-size: clamp(14px,1.6vw,18px);
  line-height:1.7;
  padding: 0 0 clamp(18px,2.4vw,24px) 0;
}

.faq-item.is-open .faq-answer{
  opacity:1;
  max-height: 500px; 
}


  
  
  #contact{
  
    
    padding-block: clamp(40px, 6vw, 80px) 0;
    padding-inline: 0;
    overflow: visible; 
    min-height: auto;                                 
   
    margin: 0;
    box-sizing: border-box;
    /* font-family: 'Poppins', sans-serif; */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    

    --fg:#e9f0ec;
    --muted:rgba(233,240,236,.78);
    --rule:#001f3f;
    --maxw:1100px;

    background:
    radial-gradient(1200px 600px at 50% 100%, #001f3f 0%, rgba(8,17,15,1) 122%),
    #001f3f;
    color:var(--fg);
  

}

.content2{
    max-width: 100vw;
    text-align: center;
}

.content2 h2 {
    font-size: 3em;
    font-weight: 500;
    margin-top: -2vw;
    margin-bottom: 1vw; 
    padding-bottom: 0;
    color: whitesmoke;
}

.content2 p {
    color:whitesmoke;
    font-size: 1.1em;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 0; 
    padding-bottom: 1vw; 
}




.container-contact {


  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 40px);
  padding-bottom: clamp(24px, 5vw, 56px);
  box-sizing: border-box;
  
    width: 100%;
    display: flex;
    justify-content: center; 
    align-items: center; 
    gap: 20px; 
    margin-top: 10px;
}

.contactInfo {
    width: 45%; 
    display: flex;
    flex-direction: column;
    gap: 15px; 
    color:whitesmoke;
}

.contactInfo .box {
    position: relative;
    padding: 5px 0; 
    display: flex;
    cursor: pointer;
    margin-bottom: 3vw;
}

.contactInfo .box .icon-contact {
    position: relative;
    min-width: 54px; 
    height: 54px; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.contactInfo .box .icon-contact::before,
.contactInfo .box .icon-contact::after {
    content: '';
    position: absolute;
    width: 9px; 
    height: 9px; 
    border: 2px solid #042b57;
}

.contactInfo .box .icon-contact b {
    position: absolute;
    inset: 7px; 
    background: #042b57;
}

.contactInfo .box .icon-contact i {
    position: relative;
    z-index: 1000;
    font-size: 1.1em; 
}

.contactInfo .box .text-contact {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-left: 18px; 
    font-size: 1em; 
    font-weight: 300;
}

.contactInfo .box .text-contact h3 {
    font-weight: 500;
    color: whitesmoke;
    font-size: 1.1em; 
    margin-bottom: 0px;
}

.contactInfo .txt {
    margin-top: 5px; 
    font-weight: 500;
    border-left: 45px solid #042b57;
    padding-left: 9px; 
    line-height: 1em;
    margin-bottom: 0px;
}

.contactInfo .sci {
    position: relative;
    display: flex;
    gap: 27px; 
    margin: 18px 0; 
}

.contactInfo .sci li a {
    font-size: 1.35em; 
    transition: 0.25s;
    color: whitesmoke;
}

.contactInfo .sci li a:hover {
    color: #042b57;
    filter: drop-shadow(0 0 5px #042b57);
}


.form-container {
    height: 30%;
    width: 40%;
    max-width: 700px;
    margin: 0 auto;
    padding: 40px 32px; 
    overflow: hidden; 
    position: relative;
    border-radius: 8px;
    background: repeating-conic-gradient(
        from var(--a),
        #042b57 0%,
        #042b57 5%,
        transparent 90%,
        transparent 50%
    );
    animation: animate 6s linear infinite;
   
}

@property --a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes animate {
    0% {
        --a: 0deg;
    }
    100% {
        --a: 360deg;
    }
}

.form-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-conic-gradient(
        from var(--a),
        #ffffff 0%,
        #ffffff 10%,
        transparent 10%,
        transparent 50%
    );
    animation: animate 20s linear infinite;
    animation-delay: -2s;
}

.form-container::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 20px solid transparent;
    background: #001f3f;
}

.uiform {
    position: relative;
    z-index: 5; 
    padding: 0px;
    background: transparent;
}

form h2 {
    text-align: center;
    font-size: 2em;
    font-weight: 500;
}

.field {
    position: relative;
    width: 100%;
    margin-top: 20px;
}
.field.consent-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem; 
    line-height: 1.2;  
    margin-top: 10px;
  }
  
  .field.consent-field label {
    line-height: 1.2 !important;
    margin: 0;                   
    padding: 0;
    font-size: 0.8rem;
    color: whitesmoke;
  }
  

input, textarea {
    width: 100% !important;
    padding: 5px 0;
    font-size: 1.1em;
    margin: 10px 0;
    border: none;
    background: transparent;
    border-bottom: 2px solid #042b57;
    outline: none;
    resize: none;
}

.uibutton {
    margin-left: 37%;
    background: #042b57;
    border: none;
    color: white;
    padding: 12px 25px;
    font-size: 1em;
    font-weight: bold;
    border-radius: 50px; 
    cursor: pointer;
    transition: background 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.uibutton:hover {
    background: #002138;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}





.field span {
    position: absolute;
    left: 0;
    pointer-events: none;
    padding: 5px 0;
    margin: 10px 0;
    font-size: 1.1em;
    transition: 0.5s;
    color: whitesmoke;
}

.field input:focus ~ span,
.field textarea:focus ~ span,
.field input:valid ~ span,
.field textarea:valid ~ span {
    color: whitesmoke;
    font-size: 0.9em;
    transform: translateY(-24px);
}

.field input[type="submit"] {
    width: 100%;
    background: #042b57;
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    font-size: 1.1em;
    font-weight: 500;
}

.field label{
    font-size: 0.5rem;
    
}

@media (max-width: 991px) {
    .container-contact{
        flex-direction: column;
    }

    .contactInfo{
        width: 100%;
    }
    
    .form-container {
        width: 100%;
        padding: 40px;
    }

   
}

@media (max-width: 477px) {

    .container-contact{
        flex-direction: column;
    }

    .contactInfo{
        width: 100%;
    }
    
    .form-container {
        width: 150%;
        padding: 40px;
        left: -10vw;
    }

    .content2 p{
        display: none;
    }
    
    input, textarea {
        width: 100% !important;
        padding: 5px 0;
        font-size: 2.5em;
        margin: 10px 0;
        border: none;
        background: transparent;
        border-bottom: 2px solid #042b57;
        outline: none;
        resize: none;

        
    }

    form h2{
      margin-left: -22vw;
    }

    .field.consent-field {
      margin-left: -22vw;
    }
    
    #consent{
      margin-right: -10vw;
    }

    .field.consent-field label {
      font-size: 0.5rem;
      max-width: 79vw;
    }

}

    @media (max-width: 391px) {
        .container-contact{
            flex-direction: column;
        }
    
        .contactInfo{
            width: 100%;
        }
        
        .form-container {
            width: 150%;
            padding: 40px;
            left: -10vw;
        }
        
        input, textarea {
            width: 100% !important;
            padding: 5px 0;
            font-size: 2.5em;
            margin: 10px 0;
            border: none;
            background: transparent;
            border-bottom: 2px solid #042b57;
            outline: none;
            resize: none;
        }

        .uibutton{
            display: flex;
            justify-content: center;
            text-align: center;
            margin-left: 15vw;
        }

        .content2 p{
            display: none;
        }
}

@media (max-width: 1030px) {
    .uibutton {
        margin-left: 30%;
        background: #042b57;
        border: none;
        color: white;
        padding: 12px 25px;
        font-size: 1em;
        font-weight: bold;
        border-radius: 50px;
        cursor: pointer;
        transition: background 0.3s, box-shadow 0.3s;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

}

@media (max-width:991px){
    .uibutton{
        display: flex;
        justify-content: center;
        text-align: center;
        margin-left: 40%;
    }
}

@media (max-width:450px){
    .uibutton{
        display: flex;
        justify-content: center;
        text-align: center;
        margin-left: 32%;
    }
}

@media (max-width:400px){
    .uibutton{
        display: flex;
        justify-content: center;
        text-align: center;
        margin-left: 25%;
    }
}

.contactInfo .sci {
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
}

.contactInfo .icon-contact i.fa-solid {
    color: white; 
}


.footer{

    position: static;         
    width: 100%;              
    
    box-sizing: border-box;

  
  background-color:transparent;
  padding: 24px clamp(16px, 5vw, 40px);
  color: #fff;
  /* font-family: 'Inter', sans-serif; */
  font-size: 0.9rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 2vw;
  margin-left: 0;
  margin-right: 0;
}




.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}


.footer-socials {
  display: flex;
  gap: 20px;
  margin-left: 0;
}

.footer-socials a {
  color: #fff;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.footer-socials a:hover {
  color: #60c7ff;
}


@media (max-width: 640px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
}


/* ===== SEKCJA / TŁO / TYPOGRAFIA ===== */
.radial-menu-section{
  width: 100vw;
  height: 110vh;
  background: radial-gradient(1200px 600px at 50% 0%, #001f3f 0%, rgba(8, 17, 15, 1) 122%), #001f3f;
  color: whitesmoke;
  display: grid;
  place-items: stretch;
}

.radial-menu-wrap{
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: clamp(10px, 2.5vmin, 18px);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(16px, 3vmin, 28px) clamp(16px, 4vw, 28px);
}

.radial-menu-title{
  text-align: center;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.2;
  margin-bottom: 12px;
  display: grid;
  place-items: center;
}
.radial-menu-subtitle{
  margin: 0;
  text-align: center;
  color: rgba(255,255,255,.9);
  font-size: clamp(14px, 1.9vmin, 18px);
}

/* ===== SCENA ===== */
.radial-scene{
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* ===== CENTRUM ===== */
.radial-center{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.radial-center__dot{
  --size: clamp(90px, 12vmin, 140px);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: whitesmoke;
  background: radial-gradient(120% 120% at 30% 30%, #1c2c63 0%, #14224d 65%, #0b1530 100%);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 30px rgba(255,255,255,.10),
    0 0 0 1px rgba(255,255,255,.15) inset;
  animation: pulse-heart 1.8s ease-in-out infinite;
}
.radial-center__logo{
  width: 62%;
  height: 62%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* ===== KAFELKI ===== */
.rm-cards{
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-card{
  position: absolute;
  transform: translate(-50%, -50%) translateY(14px) scale(.94);
  opacity: 0;
  filter: blur(6px);
  will-change: transform, opacity, filter;
  transition:
    transform .85s cubic-bezier(.2,.8,.2,1),
    opacity   .85s cubic-bezier(.2,.8,.2,1),
    filter    .85s cubic-bezier(.2,.8,.2,1),
    box-shadow .25s ease, background .25s ease;
  transition-delay: var(--d, 0ms);
}

.rm-card__btn{
  -webkit-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: whitesmoke;
  text-align: center;

  /* zaokrąglony prostokąt */
  min-width: clamp(220px, 30vmin, 460px);
  max-width: min(90vw, 520px);
  padding: clamp(14px, 2.4vmin, 18px) clamp(18px, 3vmin, 24px);
  border-radius: 24px;
  background: linear-gradient(180deg, #1a2a5a, #0f1b3d);
 
  display: block;
  position: relative;
  overflow: hidden;
}

.rm-card__btn::after{
  content:"";
  position: absolute;
  inset: -40%;
  background: radial-gradient(220px 220px at var(--hx,50%) var(--hy,50%),
              rgba(91,214,255,.22), rgba(91,214,255,0) 60%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

/* pokazuje delikatny glow na hover/focus */
.rm-card__btn:hover::after,
.rm-card__btn:focus-visible::after{
  opacity: 1;
}

.rm-card__btn:hover,
.rm-card__btn:focus-visible{
  outline: none;
  background: linear-gradient(180deg, #20316b, #132151);
}
.rm-card__title{ font-weight:700; }

/* Po wejściu sekcji do viewportu – odsłonięcie */
.radial-menu-section.rm-active .rm-card{
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%) translateY(0) scale(1);
}

/* Ustawienie pozycji kafelków (responsywne w % sceny) */
.pos-tl{ top: 18%; left: 18%; }
.pos-tc{ top: 10%; left: 50%; }
.pos-tr{ top: 18%; left: 82%; }

.pos-bl{ top: 82%; left: 18%; }
.pos-bc{ top: 90%; left: 50%; }
.pos-br{ top: 82%; left: 82%; }

/* ===== LINIE ===== */
.rm-lines{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.rm-lines line{
  stroke: rgba(255,255,255,.45);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.15));
}

/* ===== ANIMACJE ===== */
@keyframes pulse-heart {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(91,214,255,0.4),
      0 0 15px rgba(91,214,255,0.3),
      0 0 30px rgba(91,214,255,0.15);
  }
  50% {
    transform: scale(1.1);
    box-shadow:
      0 0 0 12px rgba(91,214,255,0),
      0 0 25px rgba(91,214,255,0.6),
      0 0 40px rgba(91,214,255,0.25);
  }
}

/* ===== MODAL — smooth open/close ===== */

/* zawsze display:block; widoczność sterowana klasami */
.rm-modal,
.rm-modal[hidden] { 
  display: block;
}

.rm-modal {
  text-align: center; 
  position: fixed;
  inset: 0;
  z-index: 9999;
  visibility: hidden;
  pointer-events: none;
}

/* 1) Nagłówek modala centralnie */
.rm-modal__title{
  text-align: center;         /* już masz, ale zostawiam dla pewności */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2vw;
  margin-top: -2vw;
}

/* 2) Treść modala centralnie + elementy w środku też */
.rm-modal__body{
  text-align: center;         /* wyrównanie tekstu */
  display: grid;              /* łatwe centrowanie zawartości */
  justify-items: center;      /* wyśrodkowanie elementów blokowych */
  gap: 0.6rem;                /* delikatne odstępy między akapitami/elementami */
}

/* 3) Opcjonalnie ogranicz szerokość akapitów, żeby było czytelniej */
.rm-modal__body p,
.rm-modal__body ul,
.rm-modal__body ol,
.rm-modal__body blockquote{
  max-width: 64ch;            /* komfortowa szerokość tekstu */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* 4) Jeżeli w treści masz obrazki lub figury – też je wyśrodkuj */
.rm-modal__body img,
.rm-modal__body figure{
  display: block;
  margin-left: auto;
  margin-right: auto;
}





.rm-modal__overlay,
.rm-modal__dialog {
  will-change: opacity, transform;
  transition:
    opacity .38s ease,
    transform .45s cubic-bezier(.2,.8,.2,1);
}

/* overlay: fade */
.rm-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 25, 0.8);
  backdrop-filter: blur(6px);
  opacity: 0;
}

/* dialog: slide + scale + fade */
.rm-modal__dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(720px, 86vw);
  max-height: min(80vh, 720px);
  overflow-y: auto;
  padding: clamp(24px, 3vmin, 36px);
  border-radius: 20px;
  background: rgba(20, 25, 50, 0.65);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  color: whitesmoke;
  backdrop-filter: blur(14px) saturate(140%);

  transform: translate(-50%, calc(-50% + 10px)) scale(.985);
  opacity: 0;
}

/* OTWARTY */
.rm-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}
.rm-modal.is-open .rm-modal__overlay { opacity: 1; }
.rm-modal.is-open .rm-modal__dialog {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* ZAMYKANIE */
.rm-modal.is-closing {
  visibility: visible;
  pointer-events: none;
}
.rm-modal.is-closing .rm-modal__overlay { opacity: 0; }
.rm-modal.is-closing .rm-modal__dialog {
  transform: translate(-50%, calc(-50% + 10px)) scale(.985);
  opacity: 0;
}

/* close button (możesz zostawić swój) */
.rm-modal__close{
  position: sticky;
  top: 0;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  transform: translate(8px, -8px);
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: whitesmoke;
  font-size: 22px;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.rm-modal__close:hover{
  background: rgba(255,255,255,.25);
  transform: translate(8px,-8px) scale(1.05);
}

/* redukcja ruchu */
@media (prefers-reduced-motion: reduce) {
  .rm-modal__overlay,
  .rm-modal__dialog { transition: none; }
}


/* Pauza animacji podczas modala */
.rm-paused .radial-center__dot{ animation-play-state: paused !important; }

/* warstwa na impulsy */
.rm-pulses{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* pojedynczy impuls (iskra) */
.rm-pulses .pulse{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  /* delikatny niebieski jak w pulsującym centrum */
  background: radial-gradient(14px 14px at 50% 50%,
              rgba(91,214,255,0.75),
              rgba(91,214,255,0.15) 55%,
              rgba(91,214,255,0) 70%);
  filter: drop-shadow(0 0 6px rgba(91,214,255,.45));
  /* ruch po ścieżce ustawionej w JS: offset-path: path("M ... L ...") */
  offset-distance: 0%;
  animation: pulse-travel var(--dur,1.6s) linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
  offset-anchor: 50% 50%;  /* środek kropki na ścieżce */
  offset-rotate: 0deg;     /* bez obracania wzdłuż path */
  will-change: offset-distance, offset-path;
  transform: translateZ(0); /* lepsze przyleganie subpikselowe */
}


  @keyframes pulse-travel {
    0%   { offset-distance: 0%;   opacity: 0; }
    10%  { opacity: 1; }      /* szybciej zapala */
    72%  { opacity: 1; }      /* wcześniej zaczyna gasnąć */
    85%  { opacity: .25; }    /* szybkie wygaszanie końcówki */
    100% { offset-distance: 100%; opacity: 0; }
  }

/* jeśli chcesz całkiem schować stare linie */
.rm-lines{ display:none; }

/* pauza razem z modalem */
.rm-paused .rm-pulses .pulse{ animation-play-state: paused !important; }

/* mobile – i tak układ kolumnowy, więc impulsy wyłączamy */
@media (max-width: 768px){
  .rm-pulses{ display: none; }
}



@media (max-width: 768px){

  /* linie na mobile wyłączamy, bo układ kolumnowy */
  .rm-lines{ display: none; }

  /* centrum nad listą, „w przepływie” */
  .radial-scene{
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: start;

  }
  .radial-center{
    position: relative;
    top: auto; left: auto;
    transform: none;
    margin-top: 40px ;
    margin-bottom: 40px;
    justify-self: center;
    z-index: 1;
  }

  /* lista kafelków jako kolumna */
  .rm-cards{
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    width: min(680px, 92vw);
    padding: 8px 0 16px;
    justify-items: stretch;
  }

  /* każdy kafelek zachowuje animację wejścia,
     ale teraz jest w normalnym flow */
  .rm-card{
    position: relative;
    left: auto; top: auto;
    transform: translateY(14px) scale(.98); /* start */
  }
  .radial-menu-section.rm-active .rm-card{
    transform: translateY(0) scale(1);
  }

  /* stała szerokość kafelka na mobile */
  .rm-card__btn{
    width: 100%;
    min-width: 0;
  }
}


@media (max-width: 400px){
  .radial-menu-title {
    text-align: center;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 12px;
    display: grid
;
    place-items: center;
}
}