/* =========================================================
TEKNOVA MUSIC - STYLE.CSS 
========================================================= */

/* =========================
RESET
========================= */

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

html {
scroll-behavior: smooth;
}

body {
background:
radial-gradient(circle at top right, rgba(29, 185, 84, 0.12), transparent 25%),
radial-gradient(circle at bottom left, rgba(0, 194, 255, 0.10), transparent 30%),
#050807;
color: #f5f5f5;
font-family: "Inter", sans-serif;
overflow-x: hidden;
}

body::selection {
background: #1DB954;
color: #ffffff;
}

a {
text-decoration: none;
color: inherit;
}

ul {
list-style: none;
}

img {
max-width: 100%;
display: block;
}

.container {
width: 90%;
max-width: 1300px;
margin: auto;
}

section {
padding: 105px 0;
}

h1,
h2,
h3 {
font-family: "Montserrat", sans-serif;
}

/* =========================
CURSOR GLOW
========================= */

.cursor-glow {
position: fixed;
width: 280px;
height: 280px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(29, 185, 84, 0.13), transparent 65%);
transform: translate(-50%, -50%);
z-index: 1;
}

/* =========================
BUTTONS
========================= */

.btn-primary,
.btn-secondary {
min-height: 52px;
padding: 0 30px;
border-radius: 14px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
transition: 0.3s ease;
cursor: pointer;
border: none;
}

.btn-primary {
background: #1DB954;
color: #ffffff;
box-shadow: 0 0 30px rgba(29, 185, 84, 0.25);
}

.btn-primary:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(29, 185, 84, 0.40);
}

.btn-secondary {
color: #ffffff;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}

.btn-secondary:hover {
color: #1DB954;
border-color: #1DB954;
}

/* =========================
NAVBAR
========================= */

.navbar {
position: fixed;
width: 100%;
top: 0;
z-index: 999;
padding: 18px 0;
background: rgba(5, 8, 7, 0.86);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
transition: 0.3s ease;
}

.navbar.scrolled {
padding: 13px 0;
background: rgba(5, 8, 7, 0.96);
}

.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}

.logo {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}

.logo-img {
width: 58px;
height: 58px;
object-fit: cover;
border-radius: 50%;
box-shadow: 0 0 28px rgba(29, 185, 84, 0.30);
}

.logo-text {
display: flex;
flex-direction: column;
justify-content: center;
}

.brand-title {
display: flex;
align-items: center;
gap: 8px;
font-family: "Montserrat", sans-serif;
font-size: 26px;
font-weight: 900;
line-height: 1;
margin: 0;
}

.logo .brand-title span {
font-size: 26px !important;
font-weight: 900 !important;
}

.brand-gradient {
background: linear-gradient(90deg, #1a5cff 0%, #00c2ff 45%, #1DB954 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent !important;
}

.brand-white {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}

.navbar .logo .brand-subtitle {
display: block !important;
margin-top: 4px !important;
color: rgba(255, 255, 255, 0.58) !important;
font-size: 9px !important;
font-weight: 500 !important;
line-height: 1.1 !important;
letter-spacing: 0.2px !important;
}

.nav-links {
display: flex;
gap: 34px;
}

.nav-links a {
color: rgba(255, 255, 255, 0.78);
transition: 0.3s;
font-weight: 700;
}

.nav-links a:hover {
color: #1DB954;
}

.nav-buttons {
display: flex;
align-items: center;
gap: 14px;
}

.language-btn {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #ffffff;
padding: 13px 18px;
border-radius: 13px;
cursor: pointer;
font-weight: 700;
}

.menu-toggle {
display: none;
color: #ffffff;
font-size: 24px;
cursor: pointer;
}

.mobile-menu {
display: none;
}

/* =========================
HERO
========================= */

.hero-background {
position: relative;
min-height: 100vh;
padding: 155px 0 95px;
background-image: url("../images/fondo.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: center;
overflow: hidden;
}

.hero-background::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 45%, rgba(29, 185, 84, 0.18), transparent 36%),
radial-gradient(circle at 80% 50%, rgba(0, 194, 255, 0.14), transparent 38%),
linear-gradient(90deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.78));
z-index: 1;
}

.hero-background::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 70px 70px;
opacity: 0.22;
z-index: 2;
}

.hero-overlay {
position: absolute;
inset: 0;
background: rgba(3, 8, 12, 0.18);
z-index: 3;
}

.hero-content {
position: relative;
z-index: 4;
}

.hero-content-right {
display: flex;
justify-content: flex-end;
align-items: center;
}

.hero-text {
width: 100%;
}

.hero-glass {
max-width: 650px;
padding: 46px;
border-radius: 30px;
background: rgba(5, 10, 15, 0.68);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow:
0 28px 90px rgba(0, 0, 0, 0.55),
0 0 70px rgba(29, 185, 84, 0.12);
}

.hero-tag {
background: rgba(29, 185, 84, 0.13);
color: #1DB954;
padding: 11px 20px;
border-radius: 50px;
display: inline-block;
margin-bottom: 25px;
font-size: 14px;
font-weight: 700;
border: 1px solid rgba(29, 185, 84, 0.25);
}

.hero h1 {
font-size: clamp(44px, 5vw, 72px);
line-height: 1.05;
margin-bottom: 25px;
letter-spacing: -1.5px;
color: #ffffff;
}

.hero h1 span:first-child {
color: #ffffff;
}

.hero h1 span:last-child {
display: block;
color: #1DB954;
text-shadow: 0 0 32px rgba(29, 185, 84, 0.45);
}

.hero p {
font-size: 18px;
color: rgba(255, 255, 255, 0.78);
line-height: 1.8;
margin-bottom: 32px;
max-width: 600px;
}

.hero-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 30px;
}

.hero-badges {
display: flex;
gap: 14px;
flex-wrap: wrap;
}

.badge {
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.13);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 16px;
padding: 13px 17px;
display: flex;
gap: 9px;
align-items: center;
color: rgba(255, 255, 255, 0.86);
font-weight: 600;
}

.badge i {
color: #1DB954;
}

/* =========================
TRUST
========================= */

.trust {
padding: 34px 0;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.025);
}

.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}

.trust-grid div {
text-align: center;
background: rgba(255, 255, 255, 0.045);
padding: 25px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.78);
font-weight: 700;
}

.trust-grid i {
color: #1DB954;
margin-right: 10px;
}

/* =========================
SECTION TITLES
========================= */

.section-title {
text-align: center;
margin-bottom: 60px;
}

.section-title span {
color: #1DB954;
font-weight: 800;
display: inline-block;
margin-bottom: 12px;
}

.section-title h2 {
font-size: clamp(34px, 4vw, 48px);
line-height: 1.15;
margin-top: 8px;
}

.section-title p {
margin-top: 16px;
color: rgba(255, 255, 255, 0.68);
font-size: 18px;
}

/* =========================
HOW IT WORKS
========================= */

.steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}

.step-card {
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 28px;
padding: 34px;
transition: 0.3s;
min-height: 250px;
}

.step-card:hover {
transform: translateY(-10px);
border-color: rgba(29, 185, 84, 0.55);
box-shadow: 0 22px 60px rgba(29, 185, 84, 0.10);
}

.step-card span {
color: #1DB954;
font-size: 40px;
font-weight: 900;
}

.step-card h3 {
margin: 20px 0 12px;
font-size: 22px;
}

.step-card p {
color: rgba(255, 255, 255, 0.68);
line-height: 1.65;
}

/* =========================
SERVICES
========================= */

.service-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}

.service-card {
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 30px;
padding: 38px 28px;
text-align: center;
transition: 0.3s;
min-height: 255px;
}

.service-card:hover {
transform: translateY(-10px);
border-color: rgba(29, 185, 84, 0.55);
box-shadow: 0 22px 60px rgba(29, 185, 84, 0.10);
}

.service-card i {
font-size: 40px;
color: #1DB954;
margin-bottom: 22px;
}

.service-card h3 {
margin-bottom: 14px;
font-size: 21px;
}

.service-card p {
color: rgba(255, 255, 255, 0.68);
line-height: 1.65;
}

/* =========================
ARTISTS SLIDER
========================= */

.artists {
background:
radial-gradient(circle at 20% 40%, rgba(29, 185, 84, 0.10), transparent 35%),
radial-gradient(circle at 80% 60%, rgba(0, 194, 255, 0.08), transparent 35%);
}

.artists-slider {
position: relative;
}

.artists-viewport {
overflow: hidden;
width: 100%;
}

.artists-track {
display: flex;
gap: 28px;
transition: transform 0.45s ease;
will-change: transform;
}

.artist-profile-card {
flex: 0 0 calc((100% - 56px) / 3);
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 30px;
overflow: hidden;
transition: 0.3s ease;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
}

.artist-profile-card:hover {
transform: translateY(-10px);
border-color: rgba(29, 185, 84, 0.55);
box-shadow: 0 30px 90px rgba(29, 185, 84, 0.14);
}

.artist-cover {
position: relative;
height: 300px;
overflow: hidden;
}

.artist-cover::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.80)),
radial-gradient(circle at 50% 30%, rgba(29, 185, 84, 0.18), transparent 40%);
}

.artist-cover img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.4s ease;
}

.artist-profile-card:hover .artist-cover img {
transform: scale(1.08);
}

.artist-info {
padding: 28px;
}

.artist-info span {
color: #1DB954;
font-size: 14px;
font-weight: 800;
}

.artist-info h3 {
font-size: 24px;
margin: 10px 0 10px;
}

.artist-info p {
color: rgba(255, 255, 255, 0.68);
margin-bottom: 22px;
}

.spotify-link {
width: 100%;
min-height: 50px;
border-radius: 14px;
background: rgba(29, 185, 84, 0.13);
border: 1px solid rgba(29, 185, 84, 0.35);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-weight: 800;
transition: 0.3s ease;
}

.spotify-link i {
color: #1DB954;
font-size: 20px;
}

.spotify-link:hover {
background: #1DB954;
color: #ffffff;
transform: translateY(-3px);
}

.spotify-link:hover i {
color: #ffffff;
}

.artists-controls {
margin-top: 34px;
display: grid;
grid-template-columns: 52px 1fr 52px;
gap: 18px;
align-items: center;
}

.artist-slider-btn {
width: 52px;
height: 52px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
color: #ffffff;
cursor: pointer;
transition: 0.3s ease;
}

.artist-slider-btn:hover {
background: #1DB954;
transform: translateY(-3px);
}

.artist-slider-btn:disabled {
cursor: not-allowed;
}

.artists-progress {
width: 100%;
height: 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}

.artists-progress-bar {
height: 100%;
width: 0%;
border-radius: 999px;
background: linear-gradient(90deg, #1DB954, #00C2FF);
transition: width 0.4s ease;
}

/* =========================
PLANS
========================= */

.plans {
background:
radial-gradient(circle at center, rgba(29, 185, 84, 0.08), transparent 35%),
rgba(255, 255, 255, 0.01);
}

.plans-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
align-items: stretch;
}

.plan-card {
position: relative;
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 30px;
padding: 34px;
display: flex;
flex-direction: column;
min-height: 500px;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
}

.plan-card.featured {
border-color: rgba(29, 185, 84, 0.65);
transform: translateY(-16px);
box-shadow: 0 30px 90px rgba(29, 185, 84, 0.16);
}

.plan-tag {
width: fit-content;
display: inline-flex;
padding: 8px 15px;
border-radius: 999px;
background: rgba(29, 185, 84, 0.13);
color: #1DB954;
font-weight: 800;
margin-bottom: 18px;
}

.recommended {
position: absolute;
top: -18px;
right: 24px;
background: #1DB954;
color: #ffffff;
padding: 8px 15px;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
}

.plan-card h3 {
font-size: 25px;
margin-bottom: 14px;
}

.price {
font-size: 46px;
color: #ffffff;
font-weight: 900;
margin: 12px 0 26px;
}

.price span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.58);
font-weight: 500;
margin-top: 5px;
}

.plan-card ul {
display: grid;
gap: 15px;
margin-bottom: 28px;
}

.plan-card li {
display: flex;
gap: 10px;
align-items: center;
color: rgba(255, 255, 255, 0.74);
line-height: 1.4;
}

.plan-card li i {
color: #1DB954;
}

.plan-card .btn-primary {
margin-top: auto;
}

/* =========================
CONTACT
========================= */

.contact-wrapper {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 34px;
align-items: stretch;
}

.contact-info {
display: grid;
gap: 20px;
}

.contact-card {
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 24px;
padding: 28px;
display: flex;
gap: 18px;
align-items: center;
}

.contact-card i {
width: 54px;
height: 54px;
border-radius: 17px;
background: rgba(29, 185, 84, 0.13);
color: #1DB954;
display: grid;
place-items: center;
font-size: 25px;
flex-shrink: 0;
}

.contact-card h3 {
font-size: 21px;
margin-bottom: 8px;
}

.contact-card p {
color: rgba(255, 255, 255, 0.68);
line-height: 1.55;
}

.contact-form {
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 28px;
padding: 32px;
}

.input-group {
margin-bottom: 18px;
}

.input-group input,
.input-group textarea {
width: 100%;
background: rgba(255, 255, 255, 0.075);
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 15px;
padding: 17px 18px;
color: #ffffff;
outline: none;
font-family: "Inter", sans-serif;
font-size: 15px;
}

.input-group textarea {
resize: vertical;
}

.input-group input::placeholder,
.input-group textarea::placeholder {
color: rgba(255, 255, 255, 0.48);
}

.input-group input:focus,
.input-group textarea:focus {
border-color: #1DB954;
box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.10);
}

/* =========================
FAQ
========================= */

.faq-container {
max-width: 900px;
margin: auto;
display: grid;
gap: 16px;
}

.faq-item {
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 22px;
padding: 24px 26px;
}

.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
cursor: pointer;
font-weight: 800;
color: #ffffff;
}

.faq-question i {
color: #1DB954;
flex-shrink: 0;
}

.faq-answer {
display: none;
padding-top: 16px;
color: rgba(255, 255, 255, 0.68);
line-height: 1.7;
}

.faq-item.active .faq-answer {
display: block;
}

/* =========================
CTA
========================= */

.cta-box {
text-align: center;
padding: 75px;
border-radius: 40px;
background:
radial-gradient(circle at 50% 0%, rgba(29, 185, 84, 0.23), transparent 42%),
linear-gradient(135deg, rgba(29, 185, 84, 0.13), rgba(0, 194, 255, 0.08));
border: 1px solid rgba(255, 255, 255, 0.09);
}

.cta-box h2 {
font-size: clamp(34px, 4vw, 52px);
margin-bottom: 18px;
}

.cta-box p {
color: rgba(255, 255, 255, 0.70);
margin-bottom: 30px;
}

/* =========================
FOOTER
========================= */

footer {
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding: 40px 0;
background: rgba(0, 0, 0, 0.25);
}

.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 28px;
}

.footer-brand-wrap {
display: flex;
align-items: center;
gap: 16px;
}

.footer-logo {
width: 58px;
height: 58px;
object-fit: cover;
border-radius: 50%;
box-shadow: 0 0 25px rgba(29, 185, 84, 0.25);
}

.footer-brand-text h3 {
font-size: 24px;
margin-bottom: 6px;
}

.developer-credit {
margin-top: 6px;
color: rgba(255, 255, 255, 0.65);
font-size: 13px;
font-weight: 500;
}

.developer-credit a {
color: #1DB954;
font-weight: 800;
transition: 0.3s ease;
}

.developer-credit a:hover {
color: #00C2FF;
}

.socials {
display: flex;
gap: 18px;
}

.socials a {
color: #ffffff;
}

.socials i {
width: 50px;
height: 50px;
border-radius: 15px;
background: rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
cursor: pointer;
color: #ffffff;
font-size: 20px;
}

.socials i:hover {
background: #1DB954;
transform: translateY(-4px);
}

/* =========================
WHATSAPP FLOAT
========================= */

.whatsapp-float {
position: fixed;
right: 26px;
bottom: 26px;
width: 68px;
height: 68px;
border-radius: 50%;
background: #1DB954;
color: #ffffff;
display: grid;
place-items: center;
font-size: 32px;
z-index: 999;
box-shadow: 0 0 42px rgba(29, 185, 84, 0.50);
transition: 0.3s ease;
}

.whatsapp-float:hover {
transform: scale(1.08);
}

/* =========================
OLD HERO HIDE
========================= */

.hero-image,
.artist-card,
.spotify-card {
display: none !important;
}

/* =========================
   DISTROKID EXISTING ACCOUNT
========================= */

.distrokid-section {
    background:
        radial-gradient(circle at 15% 25%, rgba(29, 185, 84, 0.12), transparent 34%),
        radial-gradient(circle at 85% 70%, rgba(0, 194, 255, 0.08), transparent 36%),
        rgba(255, 255, 255, 0.01);
}

.distrokid-wrapper {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 38px;
    align-items: center;
}

.distrokid-content {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 34px;
    padding: 42px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.section-pill {
    display: inline-flex;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(29, 185, 84, 0.13);
    border: 1px solid rgba(29, 185, 84, 0.28);
    color: #1DB954;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 22px;
}

.distrokid-content h2 {
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.08;
    margin-bottom: 22px;
}

.distrokid-content p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 26px;
}

.distrokid-trust {
    display: grid;
    gap: 14px;
    margin-bottom: 30px;
}

.distrokid-trust div {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.86);
    font-weight: 700;
}

.distrokid-trust i {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(29, 185, 84, 0.13);
    color: #1DB954;
}

.distrokid-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.distrokid-card {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 26px;
    padding: 30px;
    min-height: 245px;
    transition: 0.3s ease;
}

.distrokid-card:hover {
    transform: translateY(-8px);
    border-color: rgba(29, 185, 84, 0.55);
    box-shadow: 0 22px 60px rgba(29, 185, 84, 0.10);
}

.distrokid-card i {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(29, 185, 84, 0.13);
    color: #1DB954;
    font-size: 26px;
    margin-bottom: 22px;
}

.distrokid-card h3 {
    font-size: 22px;
    margin-bottom: 12px;
}

.distrokid-card p {
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.65;
}