/* ==========================================================
   GALLOP DESIGN HOMEPAGE
   APPROVED BLACK / GOLD / WHITE THEME
   HOMEPAGE ONLY
   ========================================================== */

/*
   This stylesheet is intentionally loaded only by index.php.
   It must never be loaded globally.
*/

/* ---------- GOLD PAGE CANVAS ---------- */

body {
    background:
        linear-gradient(
            135deg,
            #D4A017 0%,
            #E5B62F 35%,
            #F3DB8B 68%,
            #D9AD38 100%
        );
}

/* ---------- HERO ---------- */

.hero {
    padding-top: 72px;
    padding-bottom: 48px;
}

.hero .hero-box {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #0B0B0B 0%,
            #151515 72%,
            #0B0B0B 100%
        );

    border: 1px solid #E5B62F;
    border-radius: 22px;

    padding: 52px;

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hero .hero-box::before {
    content: "";
    position: absolute;

    width: 320px;
    height: 320px;

    right: -100px;
    top: -150px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(229, 182, 47, 0.22) 0%,
            rgba(229, 182, 47, 0) 70%
        );

    pointer-events: none;
}

.hero .eyebrow {
    position: relative;
    z-index: 1;

    color: #EBCB68;
    letter-spacing: 0.12em;
}

.hero h1 {
    position: relative;
    z-index: 1;

    color: #FFFFFF;
}

.hero .lead {
    position: relative;
    z-index: 1;

    color: #FFF8E7;
    max-width: 820px;
}

/* ---------- TOOLS AREA ---------- */

.tools-section {
    padding-top: 16px;
    padding-bottom: 80px;
}

/* ---------- TOOL CARDS ---------- */

.tools-grid .tool-card {
    position: relative;
    overflow: hidden;

    background: #FFFFFF;

    border:
        1px solid
        rgba(11, 11, 11, 0.18);

    border-top:
        5px solid
        #0B0B0B;

    border-radius: 18px;

    padding: 30px;

    box-shadow:
        0 15px 34px
        rgba(11, 11, 11, 0.16);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.tools-grid .tool-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 92px;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            #D4A017,
            #E5B62F,
            #F3DB8B
        );
}

.tools-grid .tool-card:hover {
    transform: translateY(-4px);

    border-color: #D4A017;

    box-shadow:
        0 20px 42px
        rgba(11, 11, 11, 0.22);
}

/* ---------- CARD EYEBROW ---------- */

.tools-grid .tool-card .eyebrow {
    color: #C9961E;

    font-weight: 800;
    letter-spacing: 0.08em;
}

/* ---------- CARD HEADINGS ---------- */

.tools-grid .tool-card h2,
.tools-grid .tool-card h3 {
    color: #0B0B0B;
}

/* ---------- CARD COPY ---------- */

.tools-grid .tool-card p {
    color: #151515;
}

/* ---------- BUTTONS ---------- */

.tools-grid .tool-card .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #0B0B0B,
            #151515
        );

    color: #FFFFFF;

    border: 1px solid #0B0B0B;
    border-radius: 10px;

    font-weight: 800;

    box-shadow:
        0 8px 18px
        rgba(11, 11, 11, 0.15);

    transition:
        background 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.tools-grid .tool-card .button:hover,
.tools-grid .tool-card .button:focus-visible {
    background:
        linear-gradient(
            135deg,
            #D4A017,
            #E5B62F
        );

    color: #0B0B0B;

    border-color: #0B0B0B;

    transform: translateY(-1px);
}

/* ---------- FOCUS ACCESSIBILITY ---------- */

.tools-grid .tool-card .button:focus-visible {
    outline:
        3px solid
        #FFF8E7;

    outline-offset: 3px;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 760px) {

    .hero {
        padding-top: 36px;
        padding-bottom: 30px;
    }

    .hero .hero-box {
        padding: 30px 24px;
        border-radius: 16px;
    }

    .tools-grid .tool-card {
        padding: 24px;
        border-radius: 15px;
    }

}

/* ==========================================================
   END HOMEPAGE BLACK / GOLD THEME
   ========================================================== */