/* ===== HERO SECTION (DigitalOcean Style) ===== */

.hero {
    min-height: calc(100vh - var(--topnav-height));
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    padding: 120px var(--content-padding-x) var(--space-20);
    max-width: var(--container-width);
    margin: 0 auto;
    gap: var(--space-16);
}

.hero-content { max-width: 560px; }
.hero-badge { display: none; }

.hero-title {
    font-family: var(--font-sans);
    font-size: clamp(2.2rem, 5vw, var(--text-3xl));
    font-weight: var(--font-bold);
    line-height: 1.15;
    margin-bottom: var(--space-4);
    letter-spacing: -0.5px;
    color: var(--text-primary);
    animation: do-fade-in var(--duration-page) var(--ease-default);
}
.hero-title .accent-text { color: var(--color-blue-400); }

.hero-subtitle {
    font-size: var(--text-md);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-6);
    animation: do-slide-up var(--duration-page) var(--ease-default) 50ms both;
    max-width: 440px;
}
.hero-subtitle strong { color: var(--text-primary); }

.hero-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
    animation: do-slide-up var(--duration-page) var(--ease-default) 100ms both;
}

/* Command snippet */
.hero-command {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-gray-700);
    color: rgba(255,255,255,0.7);
    padding: 10px var(--space-4);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    margin-top: var(--space-4);
    animation: do-slide-up var(--duration-page) var(--ease-default) 150ms both;
}
.hero-command .cmd-prefix { color: rgba(255,255,255,0.4); }

/* Hero mini stats */
.hero-stats-mini {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-8);
    animation: do-slide-up var(--duration-page) var(--ease-default) 200ms both;
}

.hero-stat { display: flex; flex-direction: column; gap: 2px; }
.hero-stat-value {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}
.hero-stat-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.hero-stat-divider {
    width: 1px;
    height: var(--space-8);
    background: var(--color-border);
}

/* Hero Visual */
.hero-visual {
    position: relative;
    animation: do-slide-up var(--duration-page) var(--ease-default) 100ms both;
}
.coin-stack {
    position: relative;
    width: 320px;
    height: 260px;
}
.coin {
    position: absolute;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-weight: var(--font-bold);
    font-size: var(--text-xl);
    color: var(--text-on-dark);
    border: 1px solid rgba(255,255,255,0.15);
}
.coin-1 {
    background: var(--color-blue-400);
    top: 20px; left: 40px; z-index: 3;
    animation: coinFloat 6s ease-in-out infinite;
    box-shadow: var(--shadow-lg);
    width: 200px; height: 130px;
}
.coin-2 {
    background: var(--color-blue-500);
    top: 60px; left: 120px; z-index: 2;
    animation: coinFloat 6s ease-in-out 1s infinite;
    box-shadow: var(--shadow-md);
    width: 180px; height: 120px;
}
.coin-3 {
    background: var(--color-blue-600);
    top: 100px; left: 20px; z-index: 1;
    animation: coinFloat 6s ease-in-out 2s infinite;
    box-shadow: var(--shadow-sm);
    width: 160px; height: 110px;
}

@keyframes coinFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Trusted bar */
.trusted-bar {
    text-align: center;
    padding: var(--space-12) 0 var(--space-16);
    border-top: 1px solid var(--color-border);
}
.trusted-bar p {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-6);
}