/* =====================================================================
   ChemFlow BPS — Landing / Home  ("Emerald Glass")
   A centered frosted-glass hero. Colors & glass from design_tokens.css.
   ===================================================================== */

main.container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
}

.home-panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    text-align: center;
    padding: 3rem 2.5rem 2.75rem;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: homeRise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Soft emerald glow accent in the corner */
.home-panel::before {
    content: '';
    position: absolute;
    inset-block-start: -40%;
    inset-inline-end: -30%;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(14, 163, 113, 0.20), transparent 70%);
    pointer-events: none;
}

/* Thin gold hairline along the top — the rare pop */
.home-panel::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 18%;
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--gradient-gold);
    opacity: 0.85;
}

.home-emblem {
    width: 84px;
    height: 84px;
    margin: 0 auto 1.25rem;
    display: grid;
    place-items: center;
    border-radius: 26px;
    background: var(--gradient-primary);
    box-shadow: var(--shadow-primary);
    position: relative;
    z-index: 1;
}

.home-emblem img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.home-panel h3 {
    position: relative;
    z-index: 1;
    font-weight: 800;
    font-size: 1.7rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
    background: var(--gradient-heading);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-tagline {
    position: relative;
    z-index: 1;
    color: var(--color-muted);
    font-size: 0.98rem;
    margin-bottom: 2rem;
}

.home-panel .d-grid {
    position: relative;
    z-index: 1;
}

.home-panel .btn {
    padding: 0.8rem 1.5rem;
    font-size: 1.02rem;
}

/* Button hierarchy: filled → outline → ghost */
.home-panel .btn-success {
    background: transparent;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary-strong);
    box-shadow: none;
}

.home-panel .btn-success:hover,
.home-panel .btn-success:focus {
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-primary);
}

@keyframes homeRise {
    from { opacity: 0; transform: translateY(22px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
    .home-panel { padding: 2.25rem 1.5rem; }
    .home-panel h3 { font-size: 1.45rem; }
}