:root{
  --blurple:#5865F2;
  --bg:#0f1115;
  --bg-dark:#181a1f;
  --bg-darker:#1e2026;
  --text:#ffffff;
  --muted:#b5bac1;
}

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

body{
  font-family:"gg sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* CONTAINER */
.container{
  max-width:1000px;
  margin:auto;
  padding:0 20px;
}

.center{text-align:center}

/* ================= HERO ================= */
.hero{
  position:relative;
  z-index:3;
  background:linear-gradient(135deg,#404eed,#5865F2);
  padding:170px 0 260px;
  overflow:hidden;
}

.hero h1{
  font-size:72px;
  font-weight:900;
  letter-spacing:-1px;
}

.hero p{
  margin-top:24px;
  font-size:20px;
  max-width:760px;
  margin-inline:auto;
  color:#e3e5ff;
}

/* ================= BUTTONS ================= */
.actions{
  margin-top:44px;
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  align-items:center;
}

.btn{
  padding:16px 34px;
  border-radius:28px;
  font-weight:700;
  font-size:16px;
  border:none;
  cursor:pointer;
  transition:.2s ease;
}

.btn.primary{
  background:#fff;
  color:#000;
}

.btn.secondary{
  background:#23272A;
  color:#fff;
}

.btn.big{
  padding:18px 44px;
  font-size:18px;
}

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

/* ================= BASIC GEOMETRY ================= */
.geo{
  position:absolute;
  background:#fff;
  opacity:.18;
}

.g1{
  width:320px;height:320px;
  top:-140px;left:-140px;
  transform:rotate(25deg);
}

.g2{
  width:220px;height:220px;
  bottom:60px;right:-100px;
  transform:rotate(-18deg);
}

/* ================= ADVANCED SHAPES ================= */
.shape{
  position:absolute;
  background:#fff;
  opacity:.15;
  pointer-events:none;
}

/* трапеция */
.s1{
  width:420px;height:260px;
  top:120px;left:-160px;
  clip-path:polygon(0 0,100% 12%,85% 100%,0 88%);
  transform:rotate(-12deg);
}

/* многоугольник */
.s2{
  width:300px;height:300px;
  bottom:40px;right:-140px;
  clip-path:polygon(20% 0,80% 10%,100% 50%,80% 90%,20% 100%,0 50%);
  transform:rotate(18deg);
}

/* длинная диагональ */
.s3{
  width:600px;height:120px;
  top:30px;right:-240px;
  clip-path:polygon(0 0,100% 28%,92% 100%,0 72%);
  transform:rotate(-8deg);
  opacity:.12;
}

/* CTA shape */
.s4{
  width:500px;height:200px;
  top:-100px;right:-200px;
  clip-path:polygon(0 20%,100% 0,100% 80%,0 100%);
  transform:rotate(6deg);
  opacity:.18;
}

/* ================= SLICE BETWEEN SECTIONS ================= */
.slice{
  position:relative;
  z-index:2;
  height:180px;
  margin-top:-140px;
  background:var(--bg-dark);
  clip-path:polygon(0 20%,100% 0,100% 80%,0 100%);
}

.slice.darker{
  background:var(--bg-darker);
}

/* ================= SECTIONS ================= */
.section{
  position:relative;
  padding:160px 0;
}

.section.dark{
  background:var(--bg-dark);
  margin-top:-140px;
  padding-top:260px;
}

.section.darker{
  background:var(--bg-darker);
}

.text{
  text-align:center;
}

.text h2{
  font-size:48px;
  margin-bottom:24px;
}

.text p{
  font-size:20px;
  color:var(--muted);
  max-width:720px;
  margin:auto;
}

/* ================= SKEW ================= */
.skew-left{
  transform:skewY(-2deg);
}
.skew-left .container{
  transform:skewY(2deg);
}

.skew-right{
  transform:skewY(2deg);
}
.skew-right .container{
  transform:skewY(-2deg);
}

/* ================= PATTERNS ================= */
.geo-pattern{
  background:
    linear-gradient(var(--bg-dark),var(--bg-dark)),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.04) 2px,
      transparent 2px,
      transparent 22px
    );
}

.grid-bg{
  background:
    linear-gradient(var(--bg-dark),var(--bg-dark)),
    linear-gradient(#23272A 1px,transparent 1px),
    linear-gradient(90deg,#23272A 1px,transparent 1px);
  background-size:100% 100%,60px 60px,60px 60px;
}

/* ================= CTA ================= */
.cta{
  position:relative;
  background:linear-gradient(135deg,#404eed,#5865F2);
  text-align:center;
  padding:180px 24px;
  overflow:hidden;
}

.cta h2{
  font-size:56px;
  margin-bottom:40px;
}




.email-copy{
  display:inline-block;
  margin-top:32px;
  font-size:18px;
  font-weight:700;
  color:#ffffff;
  cursor:pointer;
  user-select:none;
  outline:none;
  -webkit-tap-highlight-color: transparent;
}

.email-copy:hover{
  opacity:.85;
}

.email-copy:focus,
.email-copy:active{
  outline:none;
  box-shadow:none;
}

.toast{
  margin-top:12px;
  font-size:14px;
  color:#b5bac1;
  opacity:0;
  transform:translateY(6px);
  transition:.3s ease;
}

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

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

  /* HERO */
  .hero{
    padding:120px 0 180px;
  }

  .hero h1{
    font-size:40px;
    line-height:1.1;
  }

  .hero p{
    font-size:16px;
    padding:0 10px;
  }

  .actions{
    flex-direction:column;
    gap:14px;
  }

  .btn{
    width:100%;
    max-width:320px;
  }

  /* GEOMETRY — уменьшаем */
  .g1{
    width:200px;
    height:200px;
    top:-100px;
    left:-100px;
  }

  .g2{
    width:160px;
    height:160px;
    bottom:40px;
    right:-80px;
  }

  .s1{
    width:260px;
    height:160px;
    top:160px;
    left:-120px;
  }

  .s2{
    width:200px;
    height:200px;
    right:-100px;
  }

  .s3{
    display:none; /* лишняя на мобиле */
  }

  /* SLICE */
  .slice{
    height:120px;
    margin-top:-100px;
  }

  /* SECTIONS */
  .section{
    padding:100px 0;
  }

  .section.dark{
    margin-top:-100px;
    padding-top:180px;
  }

  .text h2{
    font-size:28px;
    line-height:1.2;
  }

  .text p{
    font-size:16px;
    padding:0 10px;
  }

  /* SKEW — уменьшаем перекос */
  .skew-left{
    transform:skewY(-1deg);
  }

  .skew-right{
    transform:skewY(1deg);
  }

  /* EMAIL */
  .email-copy{
    font-size:16px;
    margin-top:24px;
  }

  .toast{
    font-size:13px;
  }

  /* CTA */
  .cta{
    padding:120px 24px;
  }

  .cta h2{
    font-size:34px;
  }

  .cta .btn{
    max-width:280px;
  }
}

/* ================= SMALL PHONES ================= */
@media (max-width: 420px){

  .hero h1{
    font-size:34px;
  }

  .text h2{
    font-size:24px;
  }

  .hero p,
  .text p{
    font-size:15px;
  }

  .email-copy{
    font-size:15px;
  }
}