/* ==========================================================================
   home.css – Styles for the WDBP home/landing page
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero / Jumbotron
   -------------------------------------------------------------------------- */
.home-hero {
    position: relative;
    overflow: hidden;
    background: #0d1117;
    background: rgb(32 35 44);
    border-bottom: 1px solid var(--bs-border-color);
}

.home-hero::before {
    /* Grid removed in favour of canvas network effect */
    content: '';
    position: absolute;
    inset: 0;
    background-image: none;
    pointer-events: none;
}

.home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 55% at 50% -10%, rgba(190, 176, 49, 0.14) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 100% 110%, rgba(193, 176, 66, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.home-hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.home-hero__content {
    position: relative;
    z-index: 1;
}

.home-hero__eyebrow {
    color: rgba(255, 211, 0, 0.8);
    letter-spacing: 0.12em;
}

.home-hero__headline {
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

.home-hero__lead {
    color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   Service cards
   -------------------------------------------------------------------------- */
.home-service.card {
    background-color: rgba(255, 255, 255, 0.04);
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.home-service.card:hover {
    background-color: rgba(255, 211, 0, 0.07);
    transform: translateY(-4px);
}

/* Also good for panel */
.home-also-good.card {
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 0.75rem;
}

/* --------------------------------------------------------------------------
   How it works – process steps
   -------------------------------------------------------------------------- */
.home-process {
    background-color: rgba(255, 255, 255, 0.025);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.home-process__step {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-process__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: rgba(255, 211, 0, 0.15);
    border: 2px solid rgba(255, 211, 0, 0.4);
    color: #ffd300;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Contact form card
   -------------------------------------------------------------------------- */
.home-contact.card {
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 1rem;
}

.home-contact__feedback:empty {
    display: none;
}