/* =========================
   GOOGLE FONTS
========================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* =========================
   ROOT
========================= */

:root{
    --bg:#050505;
    --section:#090909;
    --card:#0c0c0c;
    --gold:#b9953b;
    --gold-light:#d6b55a;
    --text:#e6e6e6;
    --muted:#8d8d8d;
    --border:#2a2110;
}

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

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

html{
    scroll-behavior:smooth;
}

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

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

/* =========================
   REUSABLE
========================= */

.section-tag{
    color:var(--gold);
    font-size:13px;
    font-weight:500;
    letter-spacing:1px;
    display:inline-block;
    margin-bottom:20px;
    position:relative;
}

.section-tag::after{
    content:'';
    width:120px;
    height:1px;
    background:var(--gold);
    display:block;
    margin-top:8px;
}

h2{
    font-family:'Cormorant Garamond',serif;
}

/* =========================
   HEADER
========================= */

.topbar{
    width:100%;
    height:90px;
    background:#242424;
    display:flex;
    align-items:center;
    justify-content:center;
    position:sticky;
    top:0;
    z-index:999;
}

.topbar-logo{
    display:none;
    height:38px;
    width:auto;
}

/* ===== Sticky desktop nav (appears on scroll) ===== */

.sticky-nav{
    display:none;
}

@media (min-width:1025px){

    .sticky-nav{
        display:flex;
        align-items:center;
        justify-content:space-between;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:80px;
        padding:0 60px;
        background:rgba(5,5,5,.88);
        backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);
        border-bottom:1px solid var(--border);
        transform:translateY(-100%);
        transition:transform .35s ease;
        z-index:1000;
    }

    .sticky-nav.is-visible{
        transform:translateY(0);
    }

    .sticky-nav-logo{
        height:36px;
        width:auto;
        border:1px solid var(--border);
        padding:6px;
    }

}

/* ===== Back to top ===== */

.back-to-top{
    position:fixed;
    right:24px;
    bottom:24px;
    width:48px;
    height:48px;
    border:1px solid var(--border);
    background:rgba(10,10,10,.9);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    color:var(--gold);
    font-size:20px;
    line-height:1;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transform:translateY(10px);
    transition:opacity .3s, transform .3s, background .3s, color .3s;
    z-index:1000;
}

.back-to-top.is-visible{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible{
    background:var(--gold);
    color:#000;
    outline:none;
}

.hamburger{
    display:none;
    position:absolute;
    left:30px;
    cursor:pointer;
}

.hamburger span{
    display:block;
    width:28px;
    height:2px;
    background:#d8d8d8;
    margin:6px 0;
    transition:.3s;
}

.mobile-nav{
    display:none;
}

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

.hero{
    padding:40px 60px 80px;
    background:#000;
}

.hero-container{
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
}

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

.logo{
    width:140px;
    border:1px solid var(--border);
    padding:12px;
    margin-bottom:70px;
}

.hero-left h2{
    font-size:68px;
    font-weight:500;
    line-height:1;
    margin-bottom:28px;
}

.hero-description{
    max-width:600px;
    color:#c1c1c1;
    line-height:1.9;
    font-size:15px;
    margin-bottom:40px;
}

.reserve-form{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:40px;
}

.reserve-form-row{
    display:flex;
    gap:12px;
}

.reserve-form input{
    height:58px;
    border:1px solid var(--border);
    background:#0d0d0d;
    color:white;
    padding:0 20px;
    outline:none;
    font-size:15px;
    transition:border-color .25s;
}

.reserve-name-input{
    flex:1;
    min-width:0;
}

.reserve-email-input{
    flex:1.6;
    min-width:0;
}

.reserve-form input:focus{
    border-color:var(--gold);
}

.reserve-form input::placeholder{
    color:#777;
}

.reserve-form button{
    width:140px;
    border:none;
    background:var(--gold);
    color:black;
    font-weight:600;
    cursor:pointer;
}

.reserve-form button:disabled{
    opacity:.6;
    cursor:not-allowed;
}

.hp-field{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.form-message{
    font-size:13px;
    margin-top:-20px;
    margin-bottom:30px;
    min-height:16px;
}

.form-message.success{
    color:#7fd99a;
}

.form-message.error{
    color:#e07a7a;
}

.stats{
    display:flex;
    gap:80px;
}

.stats h3{
    color:var(--gold);
    font-size:40px;
    font-family:'Cormorant Garamond',serif;
    margin-bottom:6px;
}

.stats span{
    font-size:12px;
    color:#aaa;
    letter-spacing:1px;
}

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

.hero-right nav,
.sticky-nav nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:60px;
    margin-bottom:70px;
}

.sticky-nav nav{
    margin-bottom:0;
}

.hero-right nav a,
.sticky-nav nav a{
    color:#8e8e8e;
    font-size:13px;
    font-weight:600;
    letter-spacing:.5px;
    position:relative;
    padding-bottom:4px;
    transition:color .3s;
}

.hero-right nav a::after,
.sticky-nav nav a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:1px;
    background:var(--gold);
    transition:width .3s;
}

.hero-right nav a:hover,
.hero-right nav a:focus-visible,
.sticky-nav nav a:hover,
.sticky-nav nav a:focus-visible{
    color:white;
    outline:none;
}

.hero-right nav a:hover::after,
.hero-right nav a:focus-visible::after,
.sticky-nav nav a:hover::after,
.sticky-nav nav a:focus-visible::after{
    width:100%;
}

.hero-right nav a:active,
.sticky-nav nav a:active{
    color:var(--gold-light);
}

.nav-btn{
    margin-left:auto;
    background:transparent;
    color:var(--gold);
    border:1px solid var(--border);
    width:110px;
    height:44px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-weight:700;
    letter-spacing:.5px;
    transition:background .3s, color .3s, border-color .3s;
}

.nav-btn::after{
    content:none;
}

.nav-btn:hover,
.nav-btn:focus-visible{
    background:var(--gold);
    color:#000;
    border-color:var(--gold);
    outline:none;
}

.nav-btn:active{
    background:var(--gold-light);
    border-color:var(--gold-light);
}

.main-watch{
    width:100%;
    height:560px;
    border:1px solid #111;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#020202;
}

.main-watch img{
    max-height:480px;
    object-fit:contain;
}

.watch-thumbs{
    margin-top:25px;
    display:flex;
    gap:12px;
}

.watch-thumbs img{
    width:75px;
    height:75px;
    border:1px solid var(--border);
    padding:6px;
    cursor:pointer;
    transition:.3s;
}

.watch-thumbs img:hover{
    border-color:var(--gold);
    transform:translateY(-3px);
}

/* ==========================================
   HERITAGE SECTION
========================================== */

.heritage{
    padding:120px 60px;
    background:#050505;
}

.heritage-container{
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:center;
}

.heritage-text h2{
    font-size:64px;
    font-weight:500;
    margin-bottom:50px;
}

.heritage-block{
    margin-bottom:35px;
}

.heritage-block h3{
    font-size:24px;
    font-family:'Cormorant Garamond',serif;
    color:#fff;
    margin-bottom:12px;
}

.heritage-block p{
    color:#9f9f9f;
    line-height:1.9;
    font-size:15px;
    max-width:600px;
}

blockquote{
    margin-top:60px;
    padding-left:25px;
    border-left:2px solid var(--gold);
    font-family:'Cormorant Garamond',serif;
    font-size:28px;
    color:#d9d9d9;
    line-height:1.6;
}

blockquote span{
    display:block;
    margin-top:25px;
    font-size:14px;
    color:var(--gold);
    font-family:'Inter',sans-serif;
    letter-spacing:1px;
}

.heritage-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

.heritage-image img{
    width:100%;
    max-width:620px;
    object-fit:contain;
}

/* ==========================================
   SPECIFICATIONS SECTION
========================================== */

.specifications{
    padding:120px 60px;
    background:#000;
    text-align:center;
}

.specifications h2{
    font-size:72px;
    font-weight:500;
    margin-top:15px;
    margin-bottom:70px;
}

.specifications h2 span{
    color:var(--gold);
}

.spec-grid{
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.spec-card{
    background:#0a0a0a;
    border:1px solid var(--border);
    min-height:340px;
    position:relative;
    overflow:hidden;
    transition:.4s;
}

.spec-card:hover{
    transform:translateY(-6px);
    border-color:var(--gold);
}

.spec-content{
    padding:40px;
    text-align:left;
    position:relative;
    z-index:2;
}

.spec-content h3{
    font-family:'Cormorant Garamond',serif;
    font-size:34px;
    font-weight:500;
    margin-bottom:18px;
    color:white;
}

.spec-content p{
    color:#9f9f9f;
    line-height:1.8;
    font-size:15px;
    max-width:340px;
}

.spec-card img{
    position:absolute;
    bottom:0;
    right:0;
    width:55%;
    max-width:260px;
    opacity:.95;
    object-fit:contain;
}

/* ==========================================
   CARD GLOW EFFECT
========================================== */

.spec-card::before{
    content:'';
    position:absolute;
    width:280px;
    height:280px;
    background:radial-gradient(
        circle,
        rgba(185,149,59,.12),
        transparent 70%
    );
    right:-100px;
    bottom:-100px;
    pointer-events:none;
}

/* ==========================================
   SPECIAL CARD VARIATIONS
========================================== */

.spec-card:nth-child(1){
    background:
    linear-gradient(
        180deg,
        rgba(185,149,59,.04),
        transparent
    );
}

.spec-card:nth-child(2){
    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.02),
        transparent
    );
}

.spec-card:nth-child(3){
    background:
    linear-gradient(
        180deg,
        rgba(185,149,59,.03),
        transparent
    );
}

.spec-card:nth-child(4){
    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.02),
        transparent
    );
}

/* ==========================================
   SECTION DIVIDER
========================================== */

.specifications::after{
    content:'';
    display:block;
    width:100%;
    height:1px;
    background:#111;
    margin-top:100px;
}

/* ==========================================
   GALLERY SECTION
========================================== */

.gallery{
    padding:120px 60px;
    background:#050505;
}

.gallery-grid{
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.gallery-item{
    position:relative;
    overflow:hidden;
    border:1px solid var(--border);
    background:#0a0a0a;
}

.gallery-item img{
    width:100%;
    height:650px;
    object-fit:cover;
    transition:.6s;
}

.gallery-item:hover img{
    transform:scale(1.05);
}

.gallery-item span{
    position:absolute;
    left:30px;
    bottom:30px;
    font-size:32px;
    font-family:'Cormorant Garamond',serif;
    color:white;
}

.gallery-note{
    max-width:900px;
    margin:60px auto 0;
    text-align:center;
    color:#9e9e9e;
    line-height:1.9;
    font-size:15px;
}

/* ==========================================
   WAITLIST SECTION
========================================== */

.waitlist{
    padding:140px 60px;
    background:#000;
    text-align:center;
}

.waitlist h2{
    font-size:72px;
    margin-top:15px;
    margin-bottom:80px;
    font-weight:500;
}

.waitlist h2 span{
    color:var(--gold);
}

.advantage-grid{
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-bottom:50px;
}

.advantage-card{
    background:#0a0a0a;
    border:1px solid var(--border);
    padding:45px;
    text-align:left;
    transition:.3s;
}

.advantage-card:hover{
    transform:translateY(-6px);
    border-color:var(--gold);
}

.advantage-card h3{
    font-size:46px;
    color:var(--gold);
    font-family:'Cormorant Garamond',serif;
    margin-bottom:15px;
}

.advantage-card h4{
    font-size:24px;
    font-family:'Cormorant Garamond',serif;
    margin-bottom:15px;
}

.advantage-card p{
    color:#9f9f9f;
    line-height:1.8;
    font-size:15px;
}

/* ==========================================
   INCLUDED BOX
========================================== */

.included{
    max-width:1400px;
    margin:auto;
    background:#0a0a0a;
    border:1px solid var(--border);
    padding:60px;
    text-align:left;
}

.included h3{
    font-size:36px;
    font-family:'Cormorant Garamond',serif;
    margin-bottom:35px;
}

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

.included-grid li{
    color:#bdbdbd;
    margin-bottom:18px;
    position:relative;
    padding-left:24px;
    line-height:1.7;
}

.included-grid li::before{
    content:'';
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--gold);
    position:absolute;
    left:0;
    top:10px;
}

/* ==========================================
   WAITLIST QUOTE
========================================== */

.waitlist-quote{
    margin-top:60px;
    margin-bottom:35px;
    font-size:30px;
    font-family:'Cormorant Garamond',serif;
    color:#e0e0e0;
}

.reserve-piece{
    background:var(--gold);
    color:black;
    border:none;
    height:60px;
    width:260px;
    font-weight:600;
    letter-spacing:1px;
    cursor:pointer;
    transition:.3s;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
}

.reserve-piece:hover{
    transform:translateY(-4px);
    background:var(--gold-light);
}

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

footer{
    background:#050505;
    border-top:1px solid #111;
    padding:100px 60px 40px;
}

.footer-grid{
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:50px;
}

.footer-brand img{
    width:130px;
    margin-bottom:25px;
}

.footer-brand p{
    max-width:320px;
    color:#8f8f8f;
    line-height:1.9;
    font-size:14px;
}

.footer-grid h4{
    color:white;
    margin-bottom:25px;
    font-size:13px;
    letter-spacing:1px;
}

.footer-grid a{
    display:block;
    color:#8f8f8f;
    margin-bottom:15px;
    transition:.3s;
    font-size:14px;
}

.footer-grid a:hover{
    color:var(--gold);
}

.footer-bottom{
    max-width:1400px;
    margin:70px auto 0;
    padding-top:30px;
    border-top:1px solid #111;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.footer-bottom p{
    color:#707070;
    font-size:13px;
}

.footer-bottom span{
    color:var(--gold);
    font-size:13px;
}

/* ==========================================
   GOLD SELECTION
========================================== */

::selection{
    background:var(--gold);
    color:black;
}

/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#050505;
}

::-webkit-scrollbar-thumb{
    background:var(--gold);
}

/* ==========================================
   DESKTOP — hide the topbar entirely (>1024px)
   The hero section carries its own nav/logo/CTA up top instead.
========================================== */

@media (min-width:1025px){

    .topbar{
        display:none;
    }

}

/* ==========================================
   RESPONSIVE — TABLET / SMALL LAPTOP (<=1024px)
========================================== */

@media (max-width:1024px){

    .hero-container{
        grid-template-columns:1fr;
        gap:40px;
    }

    .heritage-container{
        grid-template-columns:1fr;
        gap:50px;
    }

    .heritage-image{
        order:-1;
    }

    .advantage-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-brand{
        grid-column:1/-1;
    }

    .topbar{
        justify-content:flex-start;
        gap:20px;
        padding:0 20px;
    }

    .hamburger{
        display:block;
        position:relative;
        left:0;
    }

    .topbar-logo{
        display:block;
    }

    .logo{
        display:none;
    }

    .hero-right nav{
        display:none;
    }

    .mobile-nav{
        display:flex;
        flex-direction:column;
        gap:0;
        position:absolute;
        top:70px;
        left:0;
        width:100%;
        background:rgba(8,8,8,.85);
        backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);
        border-bottom:1px solid var(--border);
        max-height:0;
        overflow:hidden;
        transition:max-height .35s ease;
        z-index:998;
    }

    .mobile-nav.is-open{
        max-height:320px;
    }

    .mobile-nav a{
        padding:18px 24px;
        color:#d8d8d8;
        border-bottom:1px solid rgba(255,255,255,.06);
        font-size:14px;
        font-weight:600;
        letter-spacing:.5px;
        transition:color .25s, background .25s, padding-left .25s;
    }

    .mobile-nav a:hover,
    .mobile-nav a:focus-visible{
        color:var(--gold-light);
        background:rgba(185,149,59,.08);
        padding-left:32px;
        outline:none;
    }

    .mobile-nav a:active{
        color:var(--gold);
        background:rgba(185,149,59,.14);
    }

    .mobile-nav .nav-btn{
        width:auto;
        height:auto;
        border:none;
        color:#000;
        background:var(--gold);
        font-weight:700;
        justify-content:flex-start;
    }

    .mobile-nav .nav-btn:hover,
    .mobile-nav .nav-btn:focus-visible{
        color:#000;
        background:var(--gold-light);
        padding-left:24px;
    }

    .mobile-nav .nav-btn:active{
        background:var(--gold);
    }

    .hamburger.is-open span:nth-child(1){
        transform:translateY(8px) rotate(45deg);
    }

    .hamburger.is-open span:nth-child(2){
        opacity:0;
    }

    .hamburger.is-open span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
    }

}

/* ==========================================
   RESPONSIVE — TABLET PORTRAIT / LARGE PHONE (<=768px)
========================================== */

@media (max-width:768px){

    .topbar{
        justify-content:space-between;
        padding:0 20px;
        height:70px;
    }

    .hero{
        padding:30px 24px 50px;
    }

    .hero-left h2{
        font-size:40px;
    }

    .main-watch{
        height:360px;
    }

    .main-watch img{
        max-height:300px;
    }

    .stats{
        gap:40px;
    }

    .heritage{
        padding:70px 24px;
    }

    .heritage-text h2{
        font-size:38px;
        margin-bottom:35px;
    }

    blockquote{
        font-size:20px;
    }

    .specifications{
        padding:70px 24px;
    }

    .specifications h2{
        font-size:38px;
        margin-bottom:45px;
    }

    .spec-grid{
        grid-template-columns:1fr;
    }

    .spec-content{
        padding:28px;
    }

    .spec-content h3{
        font-size:26px;
    }

    .gallery{
        padding:70px 24px;
    }

    .gallery-grid{
        grid-template-columns:1fr;
    }

    .gallery-item img{
        height:380px;
    }

    .gallery-item span{
        font-size:24px;
    }

    .waitlist{
        padding:70px 24px;
    }

    .waitlist h2{
        font-size:38px;
        margin-bottom:45px;
    }

    .advantage-grid{
        grid-template-columns:1fr;
    }

    .included{
        padding:32px;
    }

    .included-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }

    footer{
        padding:60px 24px 30px;
    }

    .footer-bottom{
        flex-direction:column;
        gap:12px;
        text-align:center;
        margin-top:50px;
    }

}

/* ==========================================
   RESPONSIVE — PHONE (<=480px)
========================================== */

@media (max-width:480px){

    .hero-left h2{
        font-size:32px;
    }

    .reserve-form-row{
        flex-direction:column;
    }

    .reserve-form button{
        width:100%;
    }

    .hero-right nav{
        gap:24px;
        flex-wrap:wrap;
    }

    .main-watch{
        height:280px;
    }

    .main-watch img{
        max-height:220px;
    }

    .watch-thumbs img{
        width:60px;
        height:60px;
    }

    .heritage-text h2{
        font-size:30px;
    }

    .specifications h2{
        font-size:30px;
    }

    .spec-content h3{
        font-size:22px;
    }

    .gallery-item img{
        height:280px;
    }

    .waitlist h2{
        font-size:30px;
    }

    .advantage-card{
        padding:32px;
    }

    .advantage-card h3{
        font-size:34px;
    }

    .reserve-piece{
        width:100%;
    }

}