/* ======================================
   SHARON AUDIO - LANDING PAGE
   ====================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    background: #090909;
    color: #f4f2ee;
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
    line-height: 1.7;
}

/* ---------- Background Glow ---------- */

.bg-glow {
    position: fixed;
    inset: 0;
    z-index: -2;

    background:
        radial-gradient(circle at top,
            rgba(200,155,60,.22),
            transparent 45%),

        radial-gradient(circle at bottom,
            rgba(255,170,60,.08),
            transparent 35%),

        #090909;
}

/* ---------- Navigation ---------- */

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;

    z-index: 1000;

    backdrop-filter: blur(18px);

    background: rgba(8,8,8,.72);

    border-bottom: 1px solid rgba(255,255,255,.06);
}

nav {

    max-width: 1200px;

    margin: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 30px;

}

.logo-small img {

    width: 70px;

}

nav ul {

    display: flex;

    list-style: none;

    gap: 35px;

}

nav a {

    color: #ddd;

    text-decoration: none;

    font-size: 15px;

    transition: .35s;

}

nav a:hover {

    color: #C89B3C;

}

/* ---------- Hero ---------- */

.hero {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 120px 30px 80px;

}

.hero-logo {

    width: 240px;

    margin-bottom: 35px;

    animation: fadeUp 1.4s ease;

}

.hero h1 {

    font-family: "Cormorant Garamond", serif;

    font-size: 78px;

    letter-spacing: 7px;

    font-weight: 600;

}

.hero h2 {

    font-family: "Cormorant Garamond", serif;

    font-size: 42px;

    margin-top: 12px;

    color: #C89B3C;

    font-weight: 500;

}

.hero p {

    max-width: 720px;

    margin-top: 40px;

    color: #b9b9b9;

    font-size: 18px;

}

/* ---------- Button ---------- */

.button {

    display: inline-block;

    margin-top: 45px;

    padding: 18px 46px;

    border-radius: 60px;

    background: #C89B3C;

    color: #111;

    text-decoration: none;

    font-weight: 600;

    transition: .35s;

}

.button:hover {

    transform: translateY(-4px);

    background: #ddb04c;

    box-shadow: 0 0 30px rgba(200,155,60,.45);

}

/* ---------- Sections ---------- */

.section {

    padding: 120px 10%;

    text-align: center;

}

.dark {

    background: rgba(255,255,255,.02);

}

.section h3 {

    font-family: "Cormorant Garamond", serif;

    font-size: 52px;

    margin-bottom: 35px;

    color: #f4f2ee;

}

.section p {

    max-width: 900px;

    margin: auto;

    color: #b6b6b6;

    font-size: 18px;

}

/* ---------- Coming Soon ---------- */

.coming {

    padding: 100px 20px;

    display: flex;

    justify-content: center;

}

.card {

    max-width: 760px;

    background: rgba(255,255,255,.03);

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 20px;

    padding: 60px;

    text-align: center;

}

.card h3 {

    font-family: "Cormorant Garamond", serif;

    font-size: 42px;

    color: #C89B3C;

    margin-bottom: 25px;

}

.card p {

    color: #bbb;

}

/* ---------- Contact ---------- */

.contact {

    padding: 120px 10%;

    text-align: center;

}

.contact h3 {

    font-family: "Cormorant Garamond", serif;

    font-size: 50px;

    margin-bottom: 20px;

}

.contact p {

    color: #b7b7b7;

    margin-bottom: 35px;

    font-size: 18px;

}

/* ---------- Footer ---------- */

footer {

    padding: 70px 20px;

    text-align: center;

    border-top: 1px solid rgba(255,255,255,.08);

}

.footer-logo img {

    width: 90px;

    margin-bottom: 25px;

}

footer p {

    color: #7f7f7f;

    margin: 8px 0;

}

/* ---------- Animation ---------- */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* ---------- Responsive ---------- */

@media(max-width:900px){

.hero h1{

font-size:54px;

letter-spacing:4px;

}

.hero h2{

font-size:32px;

}

.hero-logo{

width:170px;

}

.section h3{

font-size:40px;

}

.card{

padding:40px;

}

}

@media(max-width:600px){

nav{

flex-direction:column;

gap:20px;

}

nav ul{

gap:18px;

flex-wrap:wrap;

justify-content:center;

}

.hero{

padding-top:170px;

}

.hero h1{

font-size:42px;

}

.hero h2{

font-size:26px;

}

.hero p{

font-size:16px;

}

.section{

padding:90px 25px;

}

.section h3{

font-size:34px;

}

.button{

padding:15px 32px;

font-size:15px;

}

.card{

padding:30px;

}

}

/* Scroll Animation */

.hidden{
    opacity:0;
    transform:translateY(50px);
    transition:all .8s ease;
}

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

/* Active Navigation */

nav ul li a.active{
    color:#C89B3C;
}

/* Ripple Button */

.button{
    position:relative;
    overflow:hidden;
}

.ripple{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.35);
    transform:scale(0);
    animation:ripple .6s linear;
    pointer-events:none;
}

@keyframes ripple{

    to{

        transform:scale(4);
        opacity:0;

    }

}