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



:root{
      --bg:#0a0b0f;
      --panel:#0f1116;
      --text:#e9ecf1;
      --muted:#a9b0bd;
      --violet:#a66bff;
      --cyan:#35e8ff;
      --glow: 0 0 18px rgba(53,232,255,.25), 0 0 36px rgba(166,107,255,.18);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;background:#000;color:var(--text);
      font-family: 'Satoshi', 'Inter', sans-serif;
      line-height:1.55;
    }
    .container{max-width:980px;margin:0 auto;padding:0 20px}
    section{padding:132px 0}
    @media (max-width:640px){ section{padding:96px 0} }

    /* Header */
header{
  padding:84px 0 92px;
  
  background: radial-gradient(
  800px 500px at 30% 40%,
  rgba(123, 63, 228, 0.15) 0%,
  rgba(123, 63, 228, 0.08) 30%,
  rgba(123, 63, 228, 0.03) 55%,
  transparent 75%
),
radial-gradient(
  800px 500px at 60% 35%,
  rgba(47, 128, 237, 0.12) 0%,
  rgba(47, 128, 237, 0.06) 30%,
  rgba(47, 128, 237, 0.02) 55%,
  transparent 75%
),
#05070A;

  border-bottom:1px solid rgba(255,255,255,.06);
 /* background-image: url(../img/747.webp);*/

}


header{
  background-size: cover;                 
  background-repeat: no-repeat;
  min-height: clamp(520px, 70vh, 760px);  
  display:flex; align-items:center;       
}




header .container{
  text-align: center;
}

    .brand{
      display:inline-block;
      padding:18px 28px;border-radius:16px;
      background:rgba(255,255,255,.02);
      border:1px solid rgba(255,255,255,.08);
      backdrop-filter: blur(6px);
      box-shadow: var(--glow);
    }

  .cta {
  background-color: #8a00e6; 
  color: white;
  font-weight: 600;
  font-size: 1.1em;
  padding: 14px 28px;
  border: none;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.cta:hover {
  background-color: #a84bff;
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(138, 0, 230, 0.4);
}





.about-text {
  text-align: center;
  margin: 0 auto;
  font-size: 24px;
  /*font-size: clamp(16px, 2vw, 19px);*/
  line-height: 1.7;
  color: #ddd;
  word-break: keep-all;
  padding: 0 16px;
}



    /* Section titles */
    section h2{
      margin:0 0 24px; text-align:center;
      font-size: clamp(28px,3vw,36px); 
      letter-spacing:.4px;
      color:#fff;
      text-shadow: 0 0 12px rgba(166,107,255,.23);
    }



 .how {
  position: relative;
  background: linear-gradient(180deg, rgba(166,107,255,0.05), rgba(53,232,255,0.05));
  z-index: 1;
}
.how::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(166,107,255,0.08), transparent 60%);
  z-index: -1;
}

    


    .steps{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
    @media (max-width:840px){ .steps{grid-template-columns:1fr} }
    .step{
      background: var(--panel);
      border:1px solid rgba(255,255,255,.06);
      border-radius:14px; padding:16px 18px;
      box-shadow: 0 6px 26px rgba(0,0,0,.35);
      text-align:center;
    }
    .step b{ display:block; margin-bottom:6px; color:#fff }
    .step span{ color:var(--muted) }

    /* FAQ */
    .faq{max-width:900px;margin:0 auto}
    details{
      background: rgba(255,255,255,.02);
      border:1px solid rgba(255,255,255,.08);
      border-radius:12px; padding:14px 18px; margin:12px 0;
      transition: border-color .2s ease, background .2s ease;
    }
    details[open]{ background: rgba(255,255,255,.035); border-color: rgba(166,107,255,.25) }
    summary{
      cursor:pointer; list-style:none; position:relative; padding-right:30px;
      color:#d8def2; 
      font-weight:600;
    }
    summary::-webkit-details-marker{display:none}
    summary:after{
      content:"▸"; position:absolute; right:0; top:0; transform:translateY(2px);
      color:var(--cyan); transition: transform .2s ease;
    }
    details[open] summary:after{ transform: rotate(90deg) translateY(-2px) }
    details p{ margin:10px 0 0; color:var(--muted) }

    /* Lang switcher */
    .langbar{
      position:fixed; top:16px; right:16px; z-index:20;
      display:flex; gap:6px; padding:6px; border-radius:999px;
      background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
      box-shadow: var(--glow);
    }
    .langbar a{
      color:#cbd3e4; text-decoration:none; font-weight:700; font-size:12px;
      padding:6px 10px; border-radius:999px;
    }
    .langbar a.active{ background: rgba(255,255,255,.08); color:#fff }

    /* Footer */
    footer{
      border-top:1px solid rgba(255,255,255,.06);
      padding:36px 0 46px; color:var(--muted); text-align:center;
    }
    footer .badges{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:10px}
    footer .badge{border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:6px 10px; font-size:12px}

    /* Decorative wrapper */
    .neon-border{
      box-shadow:
        0 0 0 1px rgba(255,255,255,.06) inset,
        0 0 30px rgba(53,232,255,.18),
        0 0 60px rgba(166,107,255,.14);
      border-radius:22px;
    }


    @media (prefers-reduced-motion: reduce){
      *{animation:none !important; transition:none !important}
    }


.cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(53,232,255,.35);
}


footer {
  background: #0b0d12;
  border-top: 1px solid #333;
  padding: 24px 16px;
  text-align: center;
  font-size: 0.9em;
  color: #aaa;
}

footer .badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}
footer a{
  color: #0077ff;
  text-decoration: none;
}
footer .badge a {
  text-decoration: none;
  color: #aaa;
  font-weight: 500;
}

footer .badge a:hover {
  color: #fff;
}


.about-text.enhanced {
  font-size: clamp(20px, 3vw, 24px);
  color: #e9ecf1;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 0 12px rgba(166, 107, 255, 0.12);
  line-height: 1.6;
}

.step-number {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: transparent;
  background: linear-gradient(90deg, #a56eff, #00e0ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.logo {
  font-size: 72px;
  letter-spacing: 8px;
  display: flex;
  justify-content: center;
  font-weight: 200;
-webkit-font-smoothing: antialiased;
    margin-block-end:0em;
    line-height: 1.1;
    margin-bottom: 20px;
    mix-blend-mode: screen;
}
.logo {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; 
}


.letter {
  text-transform: uppercase;
}


.pink {
  color: #e6bfff;
  text-shadow:
    0 0 1px #e6bfff,
    0 0 3px #c47dff,
    0 0 12px #0077ff;
}

.blue {
  color: #9aefff;
  text-shadow:
    0 0 1px #9aefff,
    0 0 3px #4dd0ff,
    0 0 12px #0077ff;
}





body {
 font-family: 'Outfit', sans-serif;
  font-weight: 300;
}

h2, h3 {
  font-weight: 500;
  letter-spacing: 0.5px;
}



.cta{
  font-size: 22px;
  font-weight: 400;
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(90deg, #a500ff, #4400ff);
  box-shadow: 0 0 10px rgba(140, 0, 255, 0.4);
  cursor: pointer;
  transition: 0.3s ease;
  text-decoration: none;
  letter-spacing: 1.1px;
}

.cta:hover {
   transform: scale(1.04);
  box-shadow: 0 0 18px rgba(140, 0, 255, 0.6);
}

.slogan{
  font-size: 24px;
  color: #ffffff;
  margin-top: 16px;
  margin-bottom: 39px;
  text-align: center;
  font-weight: 300;
}

span.ste{
  font-weight: 600;
  display: block;
  color: #fff;
}



}



.logo{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 0;
  font-family:'Outfit', sans-serif;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;   
  margin: 0 0 20px;
  mix-blend-mode: normal;    

}

.logo .letter{ color:#E9D6FF; }
.logo .letter.blue{ color:#B9E9FF; }

@supports (-webkit-background-clip: text) {
  .logo .letter{
    background: linear-gradient(
      90deg,
      #C084FC 0%,    
      #A855F7 25%,
      #6366F1 50%,   
      #38BDF8 75%,   
      #22D3EE 100%  
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.pink, .blue{
  text-shadow: none !important;
}

.logo{
  filter:
    drop-shadow(0 0 10px rgba(99,102,241,0.25))
    drop-shadow(0 0 20px rgba(168,85,247,0.18));
}



.cta {
  background: linear-gradient(
    135deg,
    #3B82F6 0%,
    #6366F1 100%
  );

  color: #ffffff;
  border: none;
  border-radius: 14px;
  padding: 18px 36px;

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

  box-shadow:
    0 0 10px rgba(59,130,246,0.35),
    0 0 20px rgba(99,102,241,0.25);

  transition: all 0.2s ease;
}

.cta:hover {
  background: linear-gradient(
    135deg,
    #2563EB 0%,
    #4F46E5 100%
  );

  box-shadow:
    0 0 14px rgba(59,130,246,0.45),
    0 0 28px rgba(99,102,241,0.35);
}