/* ═══════════ HERO ═══════════ */
.hero {
min-height: calc(100vh - 58px);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
padding: 40px 20px 80px;
position: relative;
}
.hero .suit-watermark {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -55%);
font-size: 320px; opacity: 0.02;
color: var(--antique-gold);
pointer-events: none; user-select: none;
line-height: 1;
}
.hero-content { position: relative; z-index: 1; max-width: 700px; }

/* Logo mark */
.hero-logo{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.hero-logo img{
    width: min(450px, 92vw);
    height: auto;
    display: block;
    object-fit: contain;
}

.hero-brand {
font-family: 'Cinzel', serif;
font-size: 48px; font-weight: 900;
color: var(--ivory);
letter-spacing: 8px;
margin-bottom: 4px;
line-height: 1.1;
}
.hero-brand-sub {
font-family: 'Cinzel', serif;
font-size: 16px; font-weight: 700;
color: var(--burgundy-bright);
letter-spacing: 8px;
margin-bottom: 36px;
}

/* Tagline */
.hero-tagline {
font-family: 'Cinzel', serif;
font-size: 22px; font-weight: 600;
color: var(--antique-gold);
letter-spacing: 3px;
margin-bottom: 12px;
text-shadow: 0 2px 12px rgba(201,168,76,0.15);
}
.hero-divider {
width: 80px; height: 1px;
background: linear-gradient(90deg, transparent, var(--antique-gold), transparent);
margin: 0 auto 28px;
}
.hero-desc {
color: var(--ivory-dim);
font-size: 15px; line-height: 1.7;
max-width: 480px; margin: 0 auto 44px;
}

/* ═══════════ FEATURE CARDS ═══════════ */
.features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
max-width: 820px;
width: 100%;
}
.feature-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 16px;
padding: 28px 22px;
text-align: center;
text-decoration: none;
color: var(--ivory);
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
position: relative;
overflow: hidden;
}
.feature-card:hover {
border-color: var(--card-border-hover);
box-shadow: var(--shadow-gold);
transform: translateY(-4px);
}
.feature-card::before {
content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--antique-gold), transparent);
opacity: 0; transition: opacity 0.3s;
}
.feature-card:hover::before { opacity: 0.5; }

.feature-icon {
font-size: 36px; margin-bottom: 14px;
display: block;
}
.feature-title {
font-family: 'Cinzel', serif;
font-size: 14px; font-weight: 700;
color: var(--antique-gold);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 8px;
}
.feature-desc {
font-size: 13px; color: var(--ivory-dim);
line-height: 1.5;
}
.feature-card.coming {
opacity: 0.35; pointer-events: none;
}
.feature-card.coming .feature-title::after {
content: " · SOON";
font-size: 8px; color: var(--burgundy-bright);
letter-spacing: 0.5px;
}

/* ═══════════ ANIMATIONS ═══════════ */
@keyframes heroFadeIn {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-anim { animation: heroFadeIn 0.7s ease-out both; }
.hero-anim-d1 { animation-delay: 0.1s; }
.hero-anim-d2 { animation-delay: 0.2s; }
.hero-anim-d3 { animation-delay: 0.35s; }
.hero-anim-d4 { animation-delay: 0.5s; }
.hero-anim-d5 { animation-delay: 0.65s; }

.feat-anim { animation: heroFadeIn 0.5s ease-out both; }
.feat-d1 { animation-delay: 0.7s; }
.feat-d2 { animation-delay: 0.8s; }
.feat-d3 { animation-delay: 0.9s; }

/* ═══════════ MOBILE ═══════════ */
.desktop-break{
    display:block;
}

.desktop-only{
    display:inline;
}
@media (max-width: 800px) {
.hero { padding: 40px 16px 50px; min-height: auto; }
.hero-brand { font-size: 32px; letter-spacing: 4px; }
.hero-brand-sub { font-size: 12px; letter-spacing: 5px; margin-bottom: 28px; }
.hero-tagline { font-size: 17px; letter-spacing: 2px; }
.hero-desc { font-size: 14px; margin-bottom: 32px; }
.hero-logo{ margin-bottom: 1.5rem; padding: 0 1rem; }
.hero-logo img{ width: 95vw; max-width: 325px; }
.features { grid-template-columns: 1fr; max-width: 400px; gap: 14px; }

.desktop-only{
    display:none;
}

.desktop-break{
    display:none;
}

.hero-tagline{
    font-size:16px;
    line-height:1.6;
    letter-spacing:3px;
}

.hero-tagline::after{
    content:"";
}

.hero-tagline span{
    display:block;
}

.hero-tagline .desktop-only{
    display:none;
}

}