/* Redful visual polish v5. Loaded last so the legacy theme stays rollback-safe. */
:root {
    --rf5-red: #ff3548;
    --rf5-red-deep: #bd1728;
    --rf5-bg: #070a10;
    --rf5-panel: rgba(13, 19, 28, .9);
    --rf5-panel-solid: #0e151f;
    --rf5-line: rgba(161, 178, 201, .16);
    --rf5-text: #f7f9fc;
    --rf5-muted: #aab5c5;
    --rf5-radius: 24px;
    --rf5-shadow: 0 26px 80px rgba(0, 0, 0, .34);
}

html,
body,
.pusher,
#wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

body.dark {
    background:
        radial-gradient(circle at 14% 8%, rgba(255, 53, 72, .08), transparent 26rem),
        radial-gradient(circle at 88% 38%, rgba(48, 106, 181, .07), transparent 32rem),
        var(--rf5-bg) !important;
}

body:has(.redful-landing) #redful-main-content.ui.container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.redful-site-header {
    border-bottom-color: rgba(255, 255, 255, .075);
    background: rgba(7, 10, 16, .88);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .18);
}

.redful-header-inner.ui.container {
    width: min(1440px, calc(100% - 32px)) !important;
    min-height: 72px;
}

.redful-wordmark-mark {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #ff4052, #b81426);
    box-shadow: inset 0 1px rgba(255, 255, 255, .25), 0 8px 24px rgba(226, 37, 55, .25);
}

.redful-wordmark-mark::after {
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: inherit;
    content: '';
}

.redful-primary-links { gap: 2px; }
.redful-nav-link,
.redful-nav-group > summary { border-radius: 9px; }
.redful-nav-link:not(.redful-nav-cta):hover,
.redful-nav-group > summary:hover { background: rgba(255, 255, 255, .055); }
.redful-nav-cta { box-shadow: 0 10px 28px rgba(225, 35, 53, .25); }

.redful-landing { padding-bottom: clamp(48px, 8vw, 96px); }

.redful-hero {
    isolation: isolate;
    width: min(1440px, calc(100% - 32px)) !important;
    min-height: 650px;
    margin: 18px auto 0 !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 30px;
    background-position: center;
    box-shadow: var(--rf5-shadow);
}

.redful-hero::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(90deg, #000, transparent 72%);
    content: '';
    pointer-events: none;
}

.redful-hero-shade {
    background:
        linear-gradient(90deg, rgba(4, 7, 12, .98) 0%, rgba(4, 7, 12, .87) 44%, rgba(4, 7, 12, .34) 100%),
        linear-gradient(0deg, rgba(4, 7, 12, .66), transparent 55%),
        radial-gradient(circle at 16% 28%, rgba(255, 53, 72, .2), transparent 36%);
}

.redful-hero-stage {
    width: min(1280px, calc(100% - 64px)) !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr) !important;
    gap: clamp(36px, 6vw, 92px) !important;
    padding: clamp(72px, 8vw, 112px) 0 !important;
}

.redful-hero-content { min-width: 0; }
.redful-hero .redful-kicker { color: #ff5969; letter-spacing: .15em; }
.redful-hero-stage .redful-hero-content h1 {
    max-width: 690px;
    margin: 12px 0 20px;
    color: var(--rf5-text);
    font-size: clamp(3.7rem, 6.2vw, 6rem);
    line-height: .9;
    letter-spacing: -.064em;
    text-wrap: balance;
}
.redful-hero-stage .redful-hero-content p {
    max-width: 620px;
    color: rgba(235, 240, 247, .76);
    font-size: clamp(1.03rem, 1.45vw, 1.22rem);
    line-height: 1.65;
}

.redful-hero .redful-actions { gap: 12px; margin-top: 30px; }
.redful-hero .ui.button {
    min-height: 52px;
    margin: 0;
    padding-inline: 22px;
    border-radius: 12px;
    font-size: .95rem;
}
.redful-hero .redful-primary.button {
    background: linear-gradient(135deg, var(--rf5-red), var(--rf5-red-deep)) !important;
    box-shadow: 0 14px 36px rgba(228, 34, 54, .3) !important;
}
.redful-hero .redful-primary.button:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(228, 34, 54, .38) !important; }

.redful-hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 24px;
    color: rgba(225, 232, 241, .62);
    font-size: .78rem;
    font-weight: 750;
}
.redful-hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.redful-hero-proof i.icon { margin: 0; color: #50dc84; font-size: .82rem; }

body .redful-landing .redful-hero-servers {
    display: block !important;
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 20px;
    background: linear-gradient(155deg, rgba(16, 23, 34, .9), rgba(7, 11, 18, .82));
    box-shadow: 0 24px 64px rgba(0, 0, 0, .32);
}
.redful-hero-servers-head { margin-bottom: 13px; }
.redful-hero-servers-head strong { color: #fff; font-size: .78rem; letter-spacing: .14em; }
.redful-hero-servers-head a { color: #d5dce6; }
.redful-hero-server-grid { grid-template-columns: 1fr !important; gap: 10px; }
.redful-hero-server {
    position: relative;
    display: grid;
    min-height: 112px;
    grid-template-columns: 120px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 13px;
    background: rgba(10, 15, 23, .92);
}
.redful-hero-server::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: var(--build-accent, var(--rf5-red));
    content: '';
}
.redful-hero-server-image { min-height: 112px !important; }
.redful-hero-server-body { padding: 13px 14px; }
.redful-hero-server-body > strong { font-size: 1rem; }
.redful-hero-server-body > small { min-height: 0; font-size: .76rem; }
.redful-hero-server-meta { padding-top: 8px; font-size: .72rem; }

body .redful-landing > .redful-benefits {
    display: grid !important;
    width: min(1240px, calc(100% - 64px));
    margin: -38px auto clamp(64px, 8vw, 112px);
    gap: 10px;
}
.redful-benefits article {
    min-height: 84px;
    padding: 16px 18px;
    border-color: var(--rf5-line);
    border-radius: 15px;
    background: rgba(12, 18, 27, .94);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .25);
}
.redful-benefits article > i.icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: rgba(255, 53, 72, .1);
}
.redful-benefits article span { white-space: normal; }

.redful-project-signature,
.redful-section,
.redful-community,
.redful-final-cta {
    width: min(1240px, calc(100% - 48px));
}

.redful-section { margin-bottom: clamp(68px, 8vw, 112px); }
.redful-section-heading { margin-bottom: 30px; }
.redful-section-heading h2,
.redful-community h2,
.redful-final-cta h2 {
    color: var(--rf5-text);
    font-size: clamp(2.25rem, 4vw, 3.75rem);
    line-height: 1;
    letter-spacing: -.045em;
    text-wrap: balance;
}
.redful-section-heading p { color: var(--rf5-muted); line-height: 1.65; }
.redful-text-link { display: inline-flex; min-height: 44px; align-items: center; gap: 7px; color: #ff6271 !important; white-space: nowrap; }

.redful-build-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
    gap: 18px;
}
.redful-build-card {
    min-height: 480px;
    border-color: var(--rf5-line);
    border-radius: var(--rf5-radius);
    background: linear-gradient(155deg, rgba(18, 26, 37, .98), rgba(9, 14, 21, .98));
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}
.redful-build-card::before { height: 3px; }
.redful-build-card:hover { transform: translateY(-6px); box-shadow: 0 28px 70px rgba(0, 0, 0, .32); }
.redful-build-image { min-height: 245px; }
.redful-build-body { padding: 24px 25px 25px; }
.redful-build-body h3 { margin-block: 9px 11px; font-size: 1.65rem; letter-spacing: -.025em; }
.redful-build-body p { max-width: 58ch; color: var(--rf5-muted); line-height: 1.62; }
.redful-build-meta { margin-top: auto; padding-top: 20px; }
.redful-card-action { color: #ff6574; }

.redful-news-grid { gap: 18px; }
.redful-news-card {
    border-color: var(--rf5-line);
    border-radius: 20px;
    background: var(--rf5-panel-solid);
}
.redful-news-body { padding: 21px; }

.redful-community,
.redful-final-cta {
    padding: clamp(30px, 5vw, 58px);
    border-radius: var(--rf5-radius);
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 53, 72, .16), transparent 34%),
        linear-gradient(135deg, #121a25, #0b111a);
    box-shadow: var(--rf5-shadow);
}

/* Skip layout and paint work until below-the-fold sections approach the viewport. */
.redful-landing > .redful-section,
.redful-landing > .redful-project-signature,
.redful-landing > .redful-community,
.redful-landing > .redful-final-cta {
    content-visibility: auto;
    contain-intrinsic-size: auto 620px;
}

@media (max-width: 1180px) {
    .redful-hero-stage { grid-template-columns: minmax(0, 1fr) 360px !important; gap: 32px !important; }
    .redful-hero-stage .redful-hero-content h1 { font-size: clamp(3.3rem, 7vw, 4.8rem); }
}

@media (max-width: 900px) {
    .redful-header-inner.ui.container { min-height: 64px; }
    .redful-hero { min-height: auto; }
    .redful-hero-stage { grid-template-columns: minmax(0, 1fr) !important; padding: 70px 0 90px !important; }
    .redful-hero-server-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .redful-hero-server { grid-template-columns: 1fr; }
    .redful-hero-server-image { min-height: 120px !important; }
    .redful-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -44px; }
}

@media (max-width: 640px) {
    html,
    body,
    .pusher,
    #wrapper,
    .redful-landing { width: 100% !important; max-width: 100% !important; overflow-x: clip !important; }

    body:has(.redful-landing) #redful-main-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    .redful-header-inner.ui.container {
        width: 100% !important;
        min-height: 62px;
        margin: 0 !important;
        padding: 0 14px !important;
        box-sizing: border-box;
    }
    .redful-wordmark { display: inline-flex !important; }
    .redful-nav-toggle { display: inline-flex !important; }

    .redful-hero {
        width: 100% !important;
        margin: 0 !important;
        border-width: 0 0 1px;
        border-radius: 0 0 24px 24px;
        background-position: 61% center;
    }
    .redful-hero-shade {
        background:
            linear-gradient(90deg, rgba(4, 7, 12, .97), rgba(4, 7, 12, .67)),
            linear-gradient(0deg, rgba(4, 7, 12, .82), transparent 60%);
    }
    .redful-hero-stage {
        width: 100% !important;
        max-width: 100% !important;
        gap: 28px !important;
        padding: 64px 20px 76px !important;
        box-sizing: border-box;
    }
    .redful-hero-stage > *,
    .redful-hero-content,
    .redful-hero-servers,
    .redful-hero-server-grid,
    .redful-hero-server { min-width: 0 !important; max-width: 100% !important; }
    .redful-hero-stage .redful-hero-content h1 {
        max-width: 10ch;
        margin-top: 10px;
        font-size: clamp(3rem, 15vw, 4.2rem);
        line-height: .9;
        overflow-wrap: normal;
    }
    .redful-hero-stage .redful-hero-content p { font-size: 1rem; overflow-wrap: anywhere; }
    .redful-hero .redful-actions { display: grid; grid-template-columns: 1fr; }
    .redful-hero .ui.button { width: 100%; min-width: 0; justify-content: center; }
    .redful-hero-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .redful-hero-proof span:last-child { grid-column: 1 / -1; }

    .redful-hero-servers { padding: 13px; border-radius: 16px; }
    .redful-hero-server-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .redful-hero-server { grid-template-columns: 104px minmax(0, 1fr); min-height: 104px; }
    .redful-hero-server-image { min-height: 104px !important; }
    .redful-hero-server-body > small { display: none; }

    .redful-benefits {
        width: calc(100% - 28px);
        margin: -38px 14px 68px;
        grid-template-columns: 1fr 1fr;
    }
    .redful-benefits article { min-height: 104px; align-items: flex-start; flex-direction: column; padding: 14px; }
    .redful-benefits article:nth-child(n+3) { display: flex !important; }
    .redful-benefits article span { font-size: .72rem; line-height: 1.4; }

    .redful-project-signature,
    .redful-section,
    .redful-community,
    .redful-final-cta { width: calc(100% - 32px); margin-right: 16px; margin-left: 16px; }
    .redful-section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
    .redful-section-heading h2,
    .redful-community h2,
    .redful-final-cta h2 { font-size: clamp(2.2rem, 11vw, 3.15rem); }
    .redful-build-grid,
    .redful-news-grid { grid-template-columns: minmax(0, 1fr); }
    .redful-build-card { min-height: 0; }
    .redful-build-image { min-height: 205px; }
    .redful-build-body { padding: 20px; }
    .redful-news-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 390px) {
    .redful-hero-stage { padding-inline: 16px !important; }
    .redful-hero-stage .redful-hero-content h1 { font-size: 2.9rem; }
    .redful-hero-proof { grid-template-columns: 1fr; }
    .redful-hero-proof span:last-child { grid-column: auto; }
    .redful-benefits { grid-template-columns: 1fr; }
}

@media (hover: none) {
    .redful-build-card:hover,
    .redful-hero-server:hover,
    .redful-hero .redful-primary.button:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .redful-build-card,
    .redful-hero-server,
    .redful-hero .ui.button { transition: none !important; }
}
