/* FiF Music - Global Styles */

/* CSS Variables */
:root{
--primary: #FFD700;
--primary-dark: #FFC107;
--primary-light: #FFE44D;
--dark: #0a0a0a;
--dark-2: #12111a;
--dark-3: #16132a;
--dark-4: #1a1a2e;
--dark-5: #0f0f18;
--light: #ffffff;
--light-2: #e0e0e0;
--light-3: #bbbbbb;
--light-4: #999999;
--light-5: #777777;
--border: rgba(255,255,255,0.1);
--border-2: rgba(255,255,255,0.2);
--text-light: rgba(255,255,255,0.9);
--text-muted: rgba(255,255,255,0.7);
}

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

html{
scroll-behavior: smooth;
}

body{
font-family:'Inter',sans-serif;
background:var(--dark);
color:var(--light);
line-height:1.6;
overflow-x:hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6{
font-weight:700;
line-height:1.2;
color: var(--light) !important;
}

h1{font-size:64px; letter-spacing:-1px;}
h2{font-size:48px; letter-spacing:-0.5px;}
h3{font-size:32px;}
h4{font-size:24px;}
h5{font-size:20px;}
h6{font-size:16px;}

p{color:var(--text-muted) !important; line-height:1.7;}

a{text-decoration:none; color:inherit; transition:0.3s;}

ul{list-style:none;}

img{max-width:100%; height:auto;}

/* Container */
.container{
max-width:1400px;
margin:0 auto;
padding:0 40px;
}

/* Buttons */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:16px 32px;
border-radius:50px;
font-weight:600;
font-size:16px;
cursor:pointer;
transition:all 0.3s;
border:none;
}

.btn-primary{
background:var(--primary);
color:var(--light);
}

.btn-primary:hover{
background:var(--primary-dark);
transform:translateY(-3px);
box-shadow:0 15px 40px rgba(108,92,231,0.4);
}

.btn-secondary{
background:transparent;
color:var(--light);
border:1px solid var(--border-2);
}

.btn-secondary:hover{
border-color:var(--primary);
color:var(--primary);
}

.btn-outline{
background:transparent;
border:2px solid var(--primary);
color:var(--primary);
}

.btn-outline:hover{
background:var(--primary);
color:var(--light);
}

/* Section Styles */
.section{
padding:120px 0;
}

.section-dark{
background:linear-gradient(180deg,var(--dark) 0%,var(--dark-5) 100%);
}

.section-light{
background:var(--dark-5);
}

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

.section-badge{
display:inline-block;
background:rgba(108,92,231,0.15);
color:var(--primary-light);
padding:8px 16px;
border-radius:50px;
font-size:13px;
font-weight:600;
margin-bottom:20px;
text-transform:uppercase;
letter-spacing:1px;
}

.section-title{
font-size:48px;
font-weight:700;
margin-bottom:16px;
}

.section-description{
font-size:18px;
color:var(--light-4);
max-width:600px;
margin:0 auto;
}

/* Cards */
.card{
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:20px;
padding:40px;
transition:all 0.3s;
}

.card:hover{
transform:translateY(-10px);
border-color:rgba(108,92,231,0.3);
box-shadow:0 20px 40px rgba(0,0,0,0.3);
}

/* Grid */
.grid-2{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
}

.grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

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

/* Page Hero */
.page-hero{
padding:180px 0 100px;
background:linear-gradient(135deg,var(--dark) 0%,var(--dark-2) 50%,var(--dark-3) 100%);
text-align:center;
position:relative;
overflow:hidden;
}

.page-hero::before{
content:'';
position:absolute;
top:-50%;
right:-20%;
width:800px;
height:800px;
background:radial-gradient(circle,rgba(108,92,231,0.15) 0%,transparent 70%);
}

.page-hero h1{
margin-bottom:20px;
}

.page-hero p{
font-size:20px;
max-width:600px;
margin:0 auto;
}

/* Form Elements */
.form-group{
margin-bottom:24px;
}

.form-group label{
display:block;
font-size:14px;
font-weight:500;
margin-bottom:8px;
color:var(--light-2);
}

.form-group input,
.form-group textarea,
.form-group select{
width:100%;
padding:16px 20px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border-2);
border-radius:12px;
color:var(--light);
font-family:'Inter',sans-serif;
font-size:15px;
transition:all 0.3s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
outline:none;
border-color:var(--primary);
background:rgba(108,92,231,0.05);
}

.form-group input::placeholder,
.form-group textarea::placeholder{
color:var(--light-5);
}

.form-row{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

/* Responsive */
@media(max-width:1200px){
.grid-4{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:992px){
h1{font-size:48px;}
h2{font-size:36px;}
.grid-2{grid-template-columns:1fr;}
.container{padding:0 20px;}
}

@media(max-width:768px){
.section{padding:80px 0;}
h1{font-size:36px;}
h2{font-size:28px;}
h3{font-size:24px;}
.grid-3,.grid-4{grid-template-columns:1fr;}
.form-row{grid-template-columns:1fr;}
.page-hero{padding:150px 0 60px;}
}

/* Animations */
@keyframes fadeInUp{
from{opacity:0; transform:translateY(30px);}
to{opacity:1; transform:translateY(0);}
}

@keyframes pulse{
0%,100%{transform:scale(1);}
50%{transform:scale(1.1);}
}

.fade-in{
animation:fadeInUp 0.6s ease forwards;
}

/* Utilities */
.text-center{text-align:center;}
.text-primary{color:var(--primary);}
.mb-20{margin-bottom:20px;}
.mb-40{margin-bottom:40px;}
.mt-20{margin-top:20px;}
.mt-40{margin-top:40px;}
select {
    background-color: #111;
    color: #fff;
}

select option {
    background-color: #111; /* black */
    color: #fff; /* white text */
}

/* Footer Styles */
footer {
    background: var(--dark-5) !important;
    padding: 80px 0 40px;
    border-top: 1px solid var(--border);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
}

.footer-column h4 {
    color: var(--light) !important;
    font-size: 18px;
    margin-bottom: 25px;
    font-weight: 700;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 12px;
}

.footer-column a {
    color: var(--text-muted) !important;
    text-decoration: none;
    transition: all 0.3s;
    font-size: 15px;
}

.footer-column a:hover {
    color: var(--primary) !important;
    padding-left: 5px;
}

.footer-bottom {
    border-top: 1px solid var(--border);
    margin-top: 60px;
    padding-top: 30px;
    text-align: center;
}

.footer-bottom p {
    font-size: 14px;
    color: var(--text-muted) !important;
}

/* Footer Responsive */
@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .footer-brand {
        margin-bottom: 20px;
    }
    
    .footer-brand div {
        justify-content: center;
    }
    
    .footer-brand p {
        justify-content: center;
    }
}