* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
html {
 scroll-behavior: smooth;
}
body {
 font-family: "Open Sans", Arial, sans-serif;
 background: #0a0a0a;
 color: #fff;
 min-height: 100vh;
 overflow-x: hidden;
}
.hero {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 70vh;
 position: relative;
 overflow: hidden;
 margin-top: 5px;
}
.hero-content {
 text-align: center;
 z-index: 1;
}
.hero h1 {
 font-size: 2.5rem;
 margin-bottom: 1rem;
 text-shadow: 0 0 15px rgba(138, 43, 226, 0.5);
}
.hero p {
 font-size: 1.2rem;
 margin-bottom: 2rem;
 color: #ccc;
}
.buttons {
 display: flex;
 justify-content: center;
 gap: 1.5rem;
}
.btn {
 padding: 0.75rem 1.5rem;
 background: #8a2be2;
 color: #fff;
 text-decoration: none;
 border-radius: 5px;
 transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
 box-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
}
.btn:hover {
 background: #7b1fa2;
 transform: translateY(-3px);
 box-shadow: 0 0 20px rgba(138, 43, 226, 0.8);
}
.hero-background {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 0;
}
.circle {
 position: absolute;
 background: radial-gradient(circle, rgba(138, 43, 226, 0.3), transparent 70%);
 border-radius: 50%;
 animation: float 10s infinite ease-in-out;
 filter: blur(20px);
}
.circle:nth-child(1) {
 width: 400px;
 height: 400px;
 top: 10%;
 left: 10%;
 animation-duration: 12s;
}
.circle:nth-child(2) {
 width: 300px;
 height: 300px;
 top: 50%;
 left: 70%;
 animation-duration: 8s;
}
.circle:nth-child(3) {
 width: 200px;
 height: 200px;
 top: 70%;
 left: 30%;
 animation-duration: 10s;
}
@keyframes float {
 0%,
 100% {
  transform: translateY(0);
 }
 50% {
  transform: translateY(-20px);
 }
}
.features {
 padding: 4rem 2rem;
 text-align: center;
 background: #121212;
 border-top: 1px solid rgba(138, 43, 226, 0.3);
 border-bottom: 1px solid rgba(138, 43, 226, 0.3);
}
.features h2 {
 font-size: 2rem;
 margin-bottom: 1rem;
 color: #8a2be2;
}
.features p {
 font-size: 1rem;
 color: #ccc;
}
.feature-desc {
 font-size: 1rem;
 margin-bottom: 1rem;
 color: #ccc;
}
.feature-cards {
 display: flex;
 justify-content: space-around;
 gap: 2rem;
 flex-wrap: wrap;
}
.feature {
 background: rgba(51, 51, 51, 0.6);
 padding: 2rem;
 border-radius: 15px;
 text-align: center;
 width: 30%;
 min-width: 250px;
 backdrop-filter: blur(10px);
 border: 1px solid rgba(138, 43, 226, 0.3);
 transition: transform 0.3s, box-shadow 0.3s;
}
.feature:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(138, 43, 226, 0.3);
}
.feature h3 {
 font-size: 1.5rem;
 margin-bottom: 1rem;
 color: #8a2be2;
}
.feature p {
 font-size: 1rem;
 color: #ccc;
}
.short h2 {
 font-size: 2rem;
 color: #8a2be2;
}
.shorten-form {
 display: flex;
 justify-content: center;
 gap: 1rem;
 padding: 2rem;
 background: rgba(51, 51, 51, 0.6);
 backdrop-filter: blur(10px);
 border-radius: 15px;
 margin: 2rem auto;
 width: 80%;
 max-width: 800px;
 border: 1px solid rgba(138, 43, 226, 0.3);
 transition: transform 0.3s, box-shadow 0.3s;
}
.shorten-form:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(138, 43, 226, 0.3);
}
.shorten-form input {
 padding: 0.75rem;
 width: 70%;
 border-radius: 5px;
 border: none;
 background: rgba(255, 255, 255, 0.1);
 color: #fff;
}
.shorten-form button {
 padding: 0.75rem 1.5rem;
 background: #8a2be2;
 color: #fff;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 transition: background 0.3s;
}
.shorten-form button:hover {
 background: #7b1fa2;
}
.private-links-info {
 text-align: center;
 padding: 2rem;
 background: rgba(51, 51, 51, 0.6);
 backdrop-filter: blur(10px);
 border-radius: 15px;
 margin: 2rem auto;
 width: 80%;
 max-width: 800px;
 border: 1px solid rgba(138, 43, 226, 0.3);
 transition: transform 0.3s, box-shadow 0.3s;
}
.private-links-info:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(138, 43, 226, 0.3);
}
.private-links-info a {
 color: #8a2be2;
 text-decoration: none;
}
.private-links-info a:hover {
 text-decoration: underline;
}
.stats-section {
 padding: 4rem 2rem;
 text-align: center;
 border-top: 1px solid rgba(138, 43, 226, 0.3);
 border-bottom: 1px solid rgba(138, 43, 226, 0.3);
}
.stats-section h2 {
 font-size: 2rem;
 margin-bottom: 1rem;
 color: #8a2be2;
}
.stats-section p {
 font-size: 1rem;
 color: #ccc;
}
.stats-grid {
 display: flex;
 justify-content: center;
 gap: 2rem;
 margin-top: 1.5rem;
 flex-wrap: wrap;
}
.stat-card {
 background: rgba(51, 51, 51, 0.6);
 padding: 2rem;
 border-radius: 15px;
 text-align: center;
 width: 30%;
 min-width: 250px;
 backdrop-filter: blur(10px);
 border: 1px solid rgba(138, 43, 226, 0.3);
 transition: transform 0.3s, box-shadow 0.3s;
}
.stat-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(138, 43, 226, 0.3);
}
.stat-value {
 font-size: 2.5rem;
 font-weight: bold;
 margin-bottom: 0.5rem;
 color: #8a2be2;
}
.stat-label {
 font-size: 1rem;
 color: rgba(255, 255, 255, 0.8);
}
.footer {
 text-align: center;
 padding: 1rem;
 background: rgba(10, 10, 10, 0.9);
 backdrop-filter: blur(10px);
 border-top: 1px solid rgba(138, 43, 226, 0.3);
}
.footer a {
 color: #8a2be2;
 text-decoration: none;
}
.footer a:hover {
 text-decoration: underline;
}
@media (max-width: 768px) {
 .feature {
  width: 100%;
 }
 .shorten-form {
  flex-direction: column;
 }
 .shorten-form input {
  width: 100%;
 }
 .stats-grid {
  flex-direction: column;
  gap: 1rem;
 }
 .stat-card {
  width: 100%;
 }
}
/* Custom scrollbar */
::-webkit-scrollbar {
 width: 10px;
}
::-webkit-scrollbar-track {
 background: #1a1a1a;
 border-radius: 5px;
}
::-webkit-scrollbar-thumb {
 background: #8a2be2;
 border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
 background: #7b1fa2;
}