:root{
    --bg-main: linear-gradient(135deg,#020617 0%,#0f172a 50%,#020617 100%);
    --card-bg: rgba(15,23,42,.95);
    --border: rgba(148,163,184,.25);
    --accent: #38bdf8;
    --accent-soft: rgba(56,189,248,.25);
    --accent-dark: #0ea5e9;
    --text-main: #f8fafc;
    --text-muted: #cbd5e1;
    --success: #22c55e;
    --glass: rgba(255,255,255,0.05);
}

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

body{
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg-main);
    color:var(--text-main);
    overflow-x:hidden;
}

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

/* ===== HERO ===== */
.hero-about{
    text-align:center;
    padding:100px 0 80px;
    background:linear-gradient(135deg, rgba(56,189,248,.15) 0%, transparent 70%);
    border-radius:28px;
    margin-bottom:80px;
    position:relative;
    overflow:hidden;
}

.hero-about::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--accent), transparent);
}

.hero-about h1{
    font-size:clamp(3rem, 7vw, 5rem);
    font-weight:900;
    margin-bottom:20px;
    background:linear-gradient(135deg, var(--accent), #60a5fa, var(--accent));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    position:relative;
    z-index:2;
}

.hero-about h1::before{
    content:'🎵';
    position:absolute;
    font-size:0.4em;
    top:-20px;
    left:50%;
    transform:translateX(-50%);
    opacity:0.3;
    animation:float 3s ease-in-out infinite;
}

.hero-about p{
    font-size:1.4rem;
    color:var(--text-muted);
    max-width:600px;
    margin:0 auto;
    line-height:1.7;
    font-weight:400;
}

@keyframes float{
    0%,100%{transform:translateX(-50%) translateY(0)}
    50%{transform:translateX(-50%) translateY(-10px)}
}

/* ===== FEATURES GRID ===== */
.features-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:30px;
    margin-bottom:60px;
}

.feature-card{
    background:var(--card-bg);
    backdrop-filter:blur(25px);
    border:1px solid var(--border);
    border-radius:28px;
    padding:50px 35px;
    text-align:center;
    position:relative;
    overflow:hidden;
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
    animation:fadeUp 0.8s ease-out forwards;
}

.feature-card:nth-child(1){animation-delay:0.1s}
.feature-card:nth-child(2){animation-delay:0.2s}
.feature-card:nth-child(3){animation-delay:0.3s}
.feature-card:nth-child(4){animation-delay:0.4s}

.feature-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg, var(--accent), var(--accent-dark), var(--accent));
}

.feature-card:hover{
    transform:translateY(-12px);
    box-shadow:0 40px 80px rgba(56,189,248,.3);
    border-color:var(--accent);
}

.feature-card:hover .feature-icon{
    transform:scale(1.2) rotate(10deg);
    background:linear-gradient(135deg, var(--accent), #60a5fa);
    box-shadow:0 0 30px rgba(56,189,248,.6);
}

.feature-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100px;
    height:100px;
    font-size:3rem;
    background:var(--glass);
    border:2px solid var(--border);
    border-radius:24px;
    margin-bottom:30px;
    transition:all 0.4s ease;
    backdrop-filter:blur(20px);
    box-shadow:0 15px 35px rgba(0,0,0,.2);
}

.feature-card h3{
    font-size:1.6rem;
    font-weight:800;
    margin-bottom:18px;
    background:linear-gradient(135deg, var(--text-main), var(--text-muted));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.feature-card p{
    color:var(--text-muted);
    line-height:1.7;
    font-size:1rem;
    max-width:300px;
    margin:0 auto;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
    .features-grid{
        grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
        gap:25px;
    }
}

@media(max-width:768px){
    .container{padding:20px 15px}
    .hero-about{padding:80px 0 60px; margin-bottom:60px}
    .features-grid{gap:20px}
    .feature-card{padding:40px 25px}
    .feature-icon{width:80px;height:80px;font-size:2.5rem}
}

@media(max-width:480px){
    .hero-about h1{font-size:2.5rem}
    .hero-about p{font-size:1.2rem}
    .feature-card{padding:35px 20px}
    .features-grid{grid-template-columns:1fr}
}