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

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #031f20;
  color: white;
  line-height: 1.6;
  overflow-x: hidden;
}

.container {
  width: min(1120px, 90%);
  margin: auto;
}


/* NAVBAR */

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;

  background: rgba(2, 30, 31, 0.93);
  backdrop-filter: blur(15px);

  border-bottom: 1px solid rgba(70, 255, 220, 0.12);
}

.nav-content {
  min-height: 72px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;

  color: white;
  text-decoration: none;

  font-size: 20px;
  font-weight: 800;
}

.brand img {
  width: 48px;
  height: 48px;

  object-fit: cover;

  border-radius: 12px;
}

nav {
  display: flex;
  gap: 28px;
}

nav a {
  color: #d6f8f3;
  text-decoration: none;

  font-size: 14px;
  font-weight: 600;

  transition: 0.25s;
}

nav a:hover {
  color: #52f4d3;
}


/* HERO */

.hero {
  position: relative;

  min-height: 680px;

  display: flex;
  align-items: center;

  padding: 90px 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 80% 40%,
      rgba(44, 244, 205, 0.22),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #032526 0%,
      #075a56 55%,
      #08a28b 100%
    );
}

.hero::after {
  content: "";

  position: absolute;
  inset: 0;

  opacity: 0.08;

  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 30px,
      #70ffe3 31px,
      #70ffe3 33px
    );
}

.hero-content {
  position: relative;
  z-index: 5;

  display: grid;

  grid-template-columns: 1.1fr 0.9fr;

  gap: 60px;

  align-items: center;
}

.top-badge {
  display: inline-block;

  padding: 8px 15px;

  border-radius: 50px;

  background: rgba(70, 247, 210, 0.12);

  border: 1px solid rgba(95, 255, 224, 0.3);

  color: #7dffe7;

  font-size: 13px;
  font-weight: 700;

  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(55px, 7vw, 90px);

  line-height: 0.95;

  letter-spacing: -3px;

  margin-bottom: 25px;
}

.hero h1 span {
  display: block;

  color: #56f4d2;

  font-size: 0.53em;

  letter-spacing: -1px;

  margin-top: 15px;
}

.hero-description {
  max-width: 590px;

  color: #d0efeb;

  font-size: 18px;

  margin-bottom: 25px;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 30px;
}

.hero-tags span {
  padding: 8px 13px;

  border-radius: 10px;

  background: rgba(255,255,255,0.08);

  border: 1px solid rgba(255,255,255,0.1);

  font-size: 13px;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;

  gap: 14px;
}


/* BUTTONS */

.btn {
  min-height: 52px;

  padding: 0 25px;

  display: inline-flex;

  justify-content: center;
  align-items: center;

  border-radius: 12px;

  text-decoration: none;

  font-size: 14px;
  font-weight: 900;

  transition: 0.3s;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn-primary {
  color: #003b34;

  background:
    linear-gradient(
      135deg,
      #7effe5,
      #2ddbb9
    );

  box-shadow:
    0 12px 35px rgba(39, 232, 194, 0.25);
}

.btn-telegram {
  color: white;

  background:
    linear-gradient(
      135deg,
      #29a9e8,
      #1687c0
    );

  box-shadow:
    0 12px 35px rgba(31, 157, 219, 0.25);
}


/* HERO LOGO */

.hero-logo-area {
  position: relative;

  min-height: 430px;

  display: flex;

  align-items: center;
  justify-content: center;
}

.logo-glow {
  position: absolute;

  width: 330px;
  height: 330px;

  border-radius: 50%;

  background: #35efd0;

  opacity: 0.22;

  filter: blur(100px);
}

.logo-ring {
  position: absolute;

  width: 400px;
  height: 400px;

  border-radius: 50%;

  border: 1px solid rgba(91, 255, 224, 0.3);

  animation: rotateRing 15s linear infinite;
}

.hero-logo {
  position: relative;

  z-index: 3;

  width: min(360px, 90%);

  border-radius: 70px;

  box-shadow:
    0 30px 80px rgba(0,0,0,0.3);

  animation:
    logoFloat 4s ease-in-out infinite;
}


/* SECTIONS */

.features,
.payments,
.contact-section {
  padding: 100px 0;
}

.section-title {
  max-width: 700px;

  margin: 0 auto 55px;

  text-align: center;
}

.section-title span,
.contact-text span,
.register-content span {
  color: #52f4d3;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 2px;
}

.section-title h2 {
  font-size: clamp(35px, 5vw, 52px);

  margin: 8px 0;
}

.section-title p {
  color: #9fc9c4;
}


/* FEATURES */

.feature-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;
}

.feature-card {
  padding: 35px;

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(10, 100, 93, 0.4),
      rgba(4, 44, 45, 0.8)
    );

  border:
    1px solid rgba(80, 255, 220, 0.12);

  transition: 0.35s;
}

.feature-card:hover {
  transform: translateY(-8px);

  border-color:
    rgba(80, 255, 220, 0.4);
}

.feature-icon {
  width: 60px;
  height: 60px;

  display: grid;

  place-items: center;

  border-radius: 17px;

  background:
    rgba(63, 241, 205, 0.12);

  font-size: 27px;

  margin-bottom: 20px;
}

.feature-card h3 {
  font-size: 22px;

  margin-bottom: 8px;
}

.feature-card p {
  color: #a6ceca;
}


/* PAYMENTS */

.payments {
  background: #04292a;
}

.payment-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;
}

.payment-card {
  padding: 35px 20px;

  text-align: center;

  border-radius: 22px;

  background: #073839;

  border:
    1px solid rgba(91,255,225,0.12);

  transition: 0.3s;
}

.payment-card:hover {
  transform: translateY(-6px);

  border-color:
    rgba(91,255,225,0.4);
}

.payment-icon {
  width: 80px;
  height: 80px;

  display: grid;

  place-items: center;

  margin: 0 auto 18px;

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      #67f8dc,
      #1cc8aa
    );

  color: #03443c;

  font-size: 34px;

  font-weight: 900;
}

.payment-card h3 {
  font-size: 24px;
}

.payment-card p {
  color: #a5cfca;
}


/* 24/7 */

.availability-box {
  max-width: 820px;

  margin: 45px auto 0;

  padding: 28px 35px;

  display: flex;

  align-items: center;

  gap: 25px;

  border-radius: 24px;

  background:
    linear-gradient(
      135deg,
      #087166,
      #054640
    );

  border:
    1px solid rgba(97,255,226,0.24);
}

.availability-circle {
  min-width: 95px;
  height: 95px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #63f5d9;

  color: #03423b;

  font-size: 24px;

  font-weight: 900;

  box-shadow:
    0 0 35px rgba(86,244,211,0.25);
}

.availability-text h3 {
  font-size: 28px;
}

.availability-text p {
  color: #c7ece7;
}


/* REGISTER */

.register-section {
  padding: 85px 0;

  background: #031f20;
}

.register-box {
  padding: 35px 40px;

  display: flex;

  align-items: center;

  gap: 25px;

  border-radius: 28px;

  background:
    linear-gradient(
      135deg,
      #12aa95,
      #07665e
    );

  box-shadow:
    0 25px 70px rgba(0,0,0,0.25);
}

.register-box img {
  width: 90px;
  height: 90px;

  object-fit: cover;

  border-radius: 22px;
}

.register-content {
  flex: 1;
}

.register-content h2 {
  font-size: 31px;

  margin-top: 3px;
}

.register-content p {
  color: #d7f9f4;
}

.btn-light {
  color: #075e54;

  background: white;
}


/* CONTACT */

.contact-section {
  padding-top: 20px;

  background: #031f20;
}

.contact-box {
  max-width: 850px;

  margin: auto;

  padding: 35px;

  display: flex;

  align-items: center;

  gap: 25px;

  border-radius: 25px;

  background:
    linear-gradient(
      145deg,
      #073c3e,
      #052a2b
    );

  border:
    1px solid rgba(76,255,219,0.14);
}

.telegram-icon {
  min-width: 80px;
  height: 80px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #229ed9;

  font-size: 36px;
}

.contact-text {
  flex: 1;
}

.contact-text h2 {
  font-size: 28px;
}

.contact-text p {
  color: #a8cfca;
}


/* FOOTER */

footer {
  padding: 30px 0;

  background: #021819;

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

.footer-content {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}

.footer-brand {
  display: flex;

  align-items: center;

  gap: 10px;

  font-weight: 800;
}

.footer-brand img {
  width: 45px;
  height: 45px;

  object-fit: cover;

  border-radius: 11px;
}

.footer-info {
  text-align: right;

  color: #8db8b3;

  font-size: 13px;
}

.responsible {
  color: #5ee9ce;
}


/* MOBILE ACTION BAR */

.mobile-actions {
  display: none;
}


/* JS REVEAL */

.reveal {
  opacity: 0;

  transform: translateY(25px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal.show {
  opacity: 1;

  transform: translateY(0);
}


/* ANIMATION */

@keyframes logoFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }

}

@keyframes rotateRing {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}


/* TABLET */

@media (max-width: 850px) {

  nav {
    display: none;
  }

  .hero-content {
    grid-template-columns: 1fr;

    text-align: center;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-tags,
  .hero-buttons {
    justify-content: center;
  }

  .hero-logo-area {
    min-height: 340px;
  }

  .logo-ring {
    width: 310px;
    height: 310px;
  }

  .hero-logo {
    width: 275px;

    border-radius: 52px;
  }

  .feature-grid,
  .payment-grid {
    grid-template-columns: 1fr;
  }

  .register-box,
  .contact-box {
    flex-direction: column;

    text-align: center;
  }

}


/* MOBILE */

@media (max-width: 520px) {

  body {
    padding-bottom: 70px;
  }

  .navbar {
    position: relative;
  }

  .nav-content {
    justify-content: center;
  }

  .hero {
    min-height: auto;

    padding: 65px 0 50px;
  }

  .hero h1 {
    font-size: 50px;

    letter-spacing: -2px;
  }

  .hero h1 span {
    font-size: 0.52em;
  }

  .hero-description {
    font-size: 16px;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  .hero-logo-area {
    min-height: 280px;
  }

  .logo-ring {
    width: 245px;
    height: 245px;
  }

  .hero-logo {
    width: 220px;

    border-radius: 42px;
  }

  .features,
  .payments {
    padding: 75px 0;
  }

  .availability-box {
    flex-direction: column;

    text-align: center;
  }

  .availability-text h3 {
    font-size: 24px;
  }

  .register-box {
    padding: 30px 22px;
  }

  .register-box .btn {
    width: 100%;
  }

  .contact-box {
    padding: 30px 22px;
  }

  .contact-box .btn {
    width: 100%;
  }

  .footer-content {
    flex-direction: column;

    text-align: center;
  }

  .footer-info {
    text-align: center;
  }


  /* FIXED MOBILE BUTTONS */

  .mobile-actions {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2000;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

    padding: 9px;

    background:
      rgba(2, 25, 26, 0.96);

    backdrop-filter: blur(15px);

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

  .mobile-actions a {
    min-height: 48px;

    display: flex;

    justify-content: center;
    align-items: center;

    border-radius: 10px;

    color: white;

    text-decoration: none;

    font-size: 13px;

    font-weight: 900;
  }

  .mobile-register {
    background:
      linear-gradient(
        135deg,
        #18cbaa,
        #07977e
      );
  }

  .mobile-telegram {
    background:
      linear-gradient(
        135deg,
        #29a9e8,
        #1687c0
      );
  }

}