/* ============================
   GLOBAL RESET & BASE
   ============================ */

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

html, body {
    height:100%;
    background:#000;
    color:#fff;
    font-family: Inter, -apple-system, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

/* ============================
   NAV
   ============================ */

nav {
    width:100%;
    padding:24px 40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    background:rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    z-index:10;
}

.nav-links a {
    margin-left:32px;
    opacity:0.7;
    font-weight:600;
}

.nav-links a:hover {
    opacity:1;
}

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

.hero {
    width:100%;
    height:100vh;
    display:flex;
    align-items:center;
    padding:0 5vw;
}

.hero-large-title {
    font-size:min(18vw, 200px);
    font-weight:900;
    letter-spacing:-0.04em;
    line-height:0.85;
}

.hero-subtitle {
    font-size:min(3vw, 36px);
    max-width:900px;
    margin-top:24px;
    opacity:0.75;
    font-weight:400;
}

/* ============================
   PRODUCT SECTIONS
   ============================ */

.section {
    width:100%;
    padding:120px 5vw;
}

.section h1 {
    font-size:min(10vw, 120px);
    font-weight:900;
    letter-spacing:-0.03em;
}

.section p {
    margin-top:24px;
    opacity:0.8;
    max-width:900px;
    font-size:24px;
    line-height:1.4;
}

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

.btn {
    display:inline-block;
    padding:18px 32px;
    margin-top:40px;
    border:2px solid rgba(255,255,255,0.2);
    font-weight:800;
    font-size:20px;
}

.btn:hover {
    background:#fff;
    color:#000;
}

/* ============================
   GRADIENT BACKGROUNDS
   ============================ */

.bg-yellow {
    background: linear-gradient(
        135deg,
        #000000 0%,
        #FFD645 100%
    );
}

.bg-red {
    background: linear-gradient(
        135deg,
        #000000 0%,
        #FF3A3C 100%
    );
}

.bg-black {
    background:#000;
}

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

footer {
    padding:40px 5vw;
    border-top:1px solid rgba(255,255,255,0.1);
    margin-top:80px;
    opacity:0.8;
}