:root {
    --red: #d91f3d;
    --gold: #d4a73b;
    --ink: #16161a;
    --muted: #6d6a68;
    --cream: #f7f1e8;
    --white: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    color: var(--ink);
    background: #0b0b0d;
}
a { color: inherit; text-decoration: none; }

.launch-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
}

.hero-panel {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    background: url("hero.webp") center center / cover no-repeat;
    isolation: isolate;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(7,7,9,.91) 0%, rgba(7,7,9,.76) 48%, rgba(7,7,9,.28) 100%),
        linear-gradient(180deg, rgba(7,7,9,.28), rgba(7,7,9,.55));
    z-index: -1;
}

.hero-content {
    width: min(760px, 88%);
    margin: 0 auto;
    padding: 48px 0;
    color: #fff;
}

.brand img {
    width: 190px;
    max-height: 72px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 34px;
    filter: drop-shadow(0 5px 18px rgba(0,0,0,.3));
}

.status-pill {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(8px);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.status-pill span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 6px rgba(217,31,61,.18);
}

.eyebrow {
    margin: 0 0 12px;
    color: #efc65b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.eyebrow.dark { color: #b88716; }

h1, h2 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 700;
    line-height: .95;
    margin: 0;
}
h1 {
    max-width: 710px;
    font-size: clamp(52px, 6vw, 88px);
    letter-spacing: -.035em;
}
.intro {
    max-width: 680px;
    margin: 24px 0 26px;
    color: rgba(255,255,255,.82);
    font-size: 16px;
    line-height: 1.75;
}

.launch-date {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 24px;
    padding-left: 16px;
    border-left: 3px solid var(--gold);
}
.launch-date small {
    color: rgba(255,255,255,.6);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.launch-date strong { font-size: 21px; }

.countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(80px, 112px));
    gap: 12px;
    margin-bottom: 30px;
}
.countdown div {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 15px;
    background: rgba(12,12,15,.42);
    backdrop-filter: blur(10px);
}
.countdown span {
    font-family: "Cormorant Garamond", serif;
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
}
.countdown small {
    margin-top: 5px;
    color: rgba(255,255,255,.62);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 23px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    transition: .25s ease;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); background: #bd1731; }
.btn-outline { border: 1px solid rgba(255,255,255,.46); color: #fff; }
.btn-outline:hover { background: #fff; color: #111; }

.contact-panel {
    min-height: 100vh;
    display: flex;
    background: var(--cream);
}
.contact-inner {
    width: min(520px, 82%);
    margin: auto;
    padding: 48px 0 30px;
}
h2 {
    max-width: 430px;
    font-size: clamp(45px, 4vw, 64px);
    color: #201f1f;
}
.contact-copy {
    margin: 18px 0 26px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}
.contact-list {
    border-top: 1px solid rgba(24,24,24,.12);
}
.contact-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(24,24,24,.12);
}
.contact-item .icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--red);
    font-size: 17px;
    box-shadow: 0 8px 22px rgba(22,22,26,.08);
}
.contact-item span:last-child { min-width: 0; }
.contact-item small {
    display: block;
    margin-bottom: 3px;
    color: #9b7741;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.contact-item strong {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.contact-item[href]:hover strong { color: var(--red); }

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}
.social-links a {
    padding: 9px 13px;
    border-radius: 999px;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(22,22,26,.06);
}
.social-links a:hover { background: var(--red); color: #fff; }

footer {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 30px;
    color: #817c77;
    font-size: 10px;
    line-height: 1.5;
}
footer a { color: #3c3936; font-weight: 700; }

@media (max-width: 980px) {
    .launch-page { grid-template-columns: 1fr; }
    .hero-panel, .contact-panel { min-height: auto; }
    .hero-panel { min-height: 760px; }
    .contact-inner { width: min(720px, 88%); padding: 70px 0 40px; }
}

@media (max-width: 600px) {
    .hero-panel { min-height: 100vh; background-position: 58% center; }
    .hero-content { width: 88%; padding: 32px 0 42px; }
    .brand img { width: 150px; margin-bottom: 26px; }
    h1 { font-size: 49px; }
    .intro { font-size: 14px; line-height: 1.65; }
    .countdown { grid-template-columns: repeat(4, 1fr); gap: 7px; }
    .countdown div { min-height: 72px; border-radius: 11px; }
    .countdown span { font-size: 29px; }
    .countdown small { font-size: 8px; }
    .hero-actions { flex-direction: column; }
    .btn { width: 100%; }
    .contact-inner { width: 88%; padding: 56px 0 30px; }
    h2 { font-size: 46px; }
}