:root {
    color-scheme: dark;

    --bg: #0b1016;
    --bg-soft: #0f161e;
    --surface: #141d27;
    --surface-2: #18232f;
    --surface-3: #1e2a38;

    --line: #293746;
    --line-light: #354759;

    --text: #f3f6f8;
    --muted: #9aabba;
    --muted-2: #708293;

    --red: #df1743;
    --red-soft: #f04468;
    --red-dark: #9f0e2d;

    --green: #52d894;
    --yellow: #e7bd5a;
    --blue: #5ebbd5;

    --radius: 16px;
    --radius-lg: 22px;

    --shadow:
        0 28px 80px
        rgba(0, 0, 0, .28);

    --max: 1240px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 85% 0,
            rgba(223, 23, 67, .14),
            transparent 33rem
        ),
        radial-gradient(
            circle at 5% 45%,
            rgba(94, 187, 213, .055),
            transparent 28rem
        ),
        linear-gradient(
            180deg,
            #0b1016 0%,
            #080c11 50%,
            #0b1016 100%
        );
    color: var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .24;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, .022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px
        );
    background-size: 38px 38px;
}

a {
    color: inherit;
}

img,
svg {
    max-width: 100%;
}

.shell {
    width: min(var(--max), 92vw);
    margin-inline: auto;
}

.topbar {
    position: sticky;
    z-index: 100;
    top: 0;
    border-bottom:
        1px solid
        rgba(255, 255, 255, .065);
    background:
        rgba(8, 12, 17, .91);
    backdrop-filter:
        blur(18px)
        saturate(150%);
}

.topbar-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
}

.brand-icon {
    width: 47px;
    height: 47px;
    display: grid;
    place-items: center;
    border:
        1px solid
        rgba(255, 255, 255, .09);
    border-radius: 13px;
    background:
        linear-gradient(
            145deg,
            #ef1749,
            #a80c30
        );
    box-shadow:
        0 13px 35px
        rgba(223, 23, 67, .22);
    font-size: 14px;
    font-weight: 950;
    letter-spacing: -.04em;
}

.brand-copy {
    display: grid;
    gap: 2px;
}

.brand-copy strong {
    font-size: 14px;
}

.brand-copy small {
    color: #718497;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.nav {
    display: flex;
    align-items: center;
    gap: 3px;
}

.nav a {
    padding: 9px 10px;
    border-radius: 8px;
    color: #9aacbc;
    text-decoration: none;
    font-size: 11px;
    font-weight: 750;
}

.nav a:hover,
.nav a.active {
    background: #17222d;
    color: #fff;
}

.nav .east4serv-link {
    margin-left: 8px;
    border:
        1px solid
        #344558;
    background: #131d27;
    color: #dce5ec;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border:
        1px solid
        #29513c;
    border-radius: 999px;
    background:
        rgba(82, 216, 148, .055);
    color: #a7ecc9;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.status-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow:
        0 0 13px
        var(--green);
}

.hero {
    min-height: 610px;
    display: grid;
    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(320px, .82fr);
    gap: 48px;
    align-items: center;
    padding: 72px 0 58px;
}

.hero.compact {
    min-height: 390px;
    grid-template-columns: 1fr;
    padding-top: 60px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border:
        1px solid
        rgba(223, 23, 67, .32);
    border-radius: 999px;
    background:
        rgba(223, 23, 67, .055);
    color: #fc7794;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.hero h1 {
    max-width: 870px;
    margin: 20px 0 21px;
    font-size:
        clamp(
            48px,
            6.8vw,
            88px
        );
    line-height: .94;
    letter-spacing: -.055em;
}

.hero.compact h1 {
    max-width: 960px;
    font-size:
        clamp(
            42px,
            5.2vw,
            68px
        );
}

.hero h1 em {
    display: block;
    color: var(--red-soft);
    font-style: normal;
}

.hero-lead {
    max-width: 790px;
    margin: 0;
    color: #9cadbb;
    font-size: 16px;
    line-height: 1.78;
}

.hero-actions,
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 27px;
}

.button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border:
        1px solid
        #34465a;
    border-radius: 10px;
    background: #151f2a;
    color: #edf2f6;
    text-decoration: none;
    font: inherit;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}

.button:hover {
    border-color: #526a82;
    background: #1b2836;
}

.button.primary {
    border-color: #e51d4b;
    background:
        linear-gradient(
            145deg,
            #e91c4b,
            #b70d35
        );
    box-shadow:
        0 14px 34px
        rgba(223, 23, 67, .2);
}

.button.ghost {
    background: transparent;
}

.trust {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 30px;
}

.trust span {
    padding: 7px 9px;
    border:
        1px solid
        #253342;
    border-radius: 7px;
    color: #788b9d;
    font-size: 9px;
    font-weight: 700;
}

.terminal {
    overflow: hidden;
    border:
        1px solid
        #2b3a49;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(
            145deg,
            #111a24,
            #080c11
        );
    box-shadow: var(--shadow);
}

.terminal-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 16px;
    border-bottom:
        1px solid
        #23303d;
    color: #728598;
    font-size: 9px;
}

.terminal-head i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #526170;
}

.terminal-head i:first-child {
    background: var(--red);
}

.terminal-head i:nth-child(2) {
    background: var(--yellow);
}

.terminal-head i:nth-child(3) {
    background: var(--green);
}

.terminal-head b {
    margin-left: 7px;
}

pre {
    overflow: auto;
    margin: 0;
    padding: 20px;
    color: #b6c5d2;
    font:
        11px/1.8
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

code {
    color: #c0d1dd;
}

.prompt {
    color: #63dda0;
}

.section {
    padding: 64px 0;
    border-top:
        1px solid
        rgba(255, 255, 255, .065);
}

.section-title {
    max-width: 850px;
}

.section h2 {
    margin: 11px 0 12px;
    font-size:
        clamp(
            32px,
            4vw,
            48px
        );
    letter-spacing: -.04em;
}

.section-lead {
    max-width: 820px;
    margin: 0;
    color: #92a4b4;
    font-size: 13px;
    line-height: 1.75;
}

.stats {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
    gap: 10px;
    margin: 0 0 62px;
}

.stats article {
    padding: 17px;
    border:
        1px solid
        var(--line);
    border-radius: 13px;
    background:
        rgba(19, 28, 38, .8);
}

.stats small {
    display: block;
    color: #697d90;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .12em;
}

.stats strong {
    display: block;
    overflow: hidden;
    margin: 8px 0 4px;
    color: #fff;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats span {
    color: #778a9b;
    font-size: 9px;
}

.cards {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.card {
    min-width: 0;
    padding: 21px;
    border:
        1px solid
        var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(
            145deg,
            rgba(20, 29, 39, .93),
            rgba(13, 19, 26, .94)
        );
}

.card h3 {
    margin: 0 0 9px;
    font-size: 15px;
}

.card p {
    margin: 0;
    color: #879aaa;
    font-size: 11px;
    line-height: 1.68;
}

.card a.text-link {
    display: inline-block;
    margin-top: 14px;
    color: #f16d8b;
    font-size: 10px;
    font-weight: 850;
    text-decoration: none;
}

.card a.text-link:hover {
    text-decoration: underline;
}

.steps {
    display: grid;
    gap: 10px;
    margin-top: 25px;
}

.step {
    display: grid;
    grid-template-columns:
        43px
        minmax(0, 1fr);
    gap: 15px;
    padding: 17px;
    border:
        1px solid
        var(--line);
    border-radius: 13px;
    background:
        rgba(17, 25, 34, .8);
}

.step-number {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background:
        rgba(223, 23, 67, .1);
    color: #fb6e8e;
    font-size: 12px;
    font-weight: 950;
}

.step h3 {
    margin: 0 0 6px;
    font-size: 14px;
}

.step p {
    margin: 0;
    color: #879aaa;
    font-size: 11px;
    line-height: 1.66;
}

.callout {
    margin-top: 20px;
    padding: 17px;
    border:
        1px solid
        #3c3340;
    border-left:
        3px solid
        var(--red);
    border-radius: 11px;
    background:
        rgba(223, 23, 67, .04);
    color: #9cadbb;
    font-size: 11px;
    line-height: 1.7;
}

.callout.green {
    border-color: #294a3a;
    border-left-color: var(--green);
    background:
        rgba(82, 216, 148, .035);
}

.table-wrap {
    overflow-x: auto;
    margin-top: 24px;
    border:
        1px solid
        var(--line);
    border-radius: 14px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #101821;
}

th,
td {
    padding: 13px 14px;
    border-bottom:
        1px solid
        #22303d;
    text-align: left;
    font-size: 10px;
}

th {
    color: #75899b;
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

td {
    color: #b2c0cb;
}

tr:last-child td {
    border-bottom: 0;
}

.command {
    margin-top: 20px;
    overflow: hidden;
    border:
        1px solid
        #293847;
    border-radius: 13px;
    background: #070b0f;
}

.command-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom:
        1px solid
        #202c38;
    color: #718497;
    font-size: 9px;
    font-weight: 850;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 24px;
    color: #6f8294;
    font-size: 9px;
}

.breadcrumbs a {
    color: #8ea1b1;
    text-decoration: none;
}

.download-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-top: 24px;
}

.channels {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border:
        1px solid
        var(--line);
    border-radius: 10px;
    background: #0d141b;
}

.channels button {
    border: 0;
    border-radius: 7px;
    padding: 8px 12px;
    background: transparent;
    color: #718497;
    font: inherit;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
}

.channels button.active {
    background: #253447;
    color: #fff;
}

.channels button:disabled {
    opacity: .35;
    cursor: default;
}

.release-grid {
    display: grid;
    gap: 13px;
    margin-top: 20px;
}

.release {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        290px;
    gap: 24px;
    padding: 22px;
    border:
        1px solid
        #344658;
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            #16212d,
            #0c1219
        );
}

.release-tag {
    display: inline-flex;
    width: fit-content;
    padding: 6px 8px;
    border:
        1px solid
        #3d4d5d;
    border-radius: 7px;
    color: #92a5b7;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
}

.release h3 {
    margin: 10px 0 8px;
    font-size: 21px;
}

.release p {
    margin: 0;
    color: #8fa1b0;
    font-size: 11px;
    line-height: 1.65;
}

.release-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
}

.release-meta span {
    padding: 6px 8px;
    border:
        1px solid
        #29394a;
    border-radius: 7px;
    color: #788b9d;
    font-size: 8px;
}

.release-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.release-actions .button {
    width: 100%;
}

.hash {
    margin-top: 12px;
    color: #6e8295;
    font:
        8px/1.55
        Consolas,
        monospace;
    overflow-wrap: anywhere;
}

.empty-state {
    margin-top: 22px;
    padding: 28px;
    border:
        1px dashed
        #35485a;
    border-radius: 15px;
    background:
        rgba(15, 23, 31, .65);
}

.empty-state strong {
    display: block;
    margin-bottom: 7px;
    font-size: 15px;
}

.empty-state p {
    margin: 0;
    color: #8194a6;
    font-size: 11px;
    line-height: 1.68;
}

.east4serv-panel {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    gap: 25px;
    align-items: center;
    margin-top: 24px;
    padding: 24px;
    border:
        1px solid
        #344658;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(
            135deg,
            rgba(223, 23, 67, .08),
            rgba(20, 30, 41, .92)
        );
}

.east4serv-panel h3 {
    margin: 0 0 8px;
    font-size: 20px;
}

.east4serv-panel p {
    max-width: 780px;
    margin: 0;
    color: #91a3b2;
    font-size: 11px;
    line-height: 1.7;
}

.footer {
    margin-top: 20px;
    border-top:
        1px solid
        rgba(255, 255, 255, .07);
}

.footer-inner {
    display: grid;
    grid-template-columns:
        1.2fr
        1fr
        1fr;
    gap: 30px;
    padding: 42px 0;
}

.footer h4 {
    margin: 0 0 11px;
    font-size: 11px;
}

.footer p,
.footer a {
    color: #74889a;
    font-size: 9px;
    line-height: 1.7;
}

.footer a {
    display: block;
    width: fit-content;
    text-decoration: none;
}

.footer a:hover {
    color: #fff;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 0 27px;
    border-top:
        1px solid
        rgba(255, 255, 255, .05);
    color: #66798b;
    font-size: 8px;
}

@media (max-width: 1020px) {
    .nav {
        display: none;
    }

    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: 55px;
    }

    .stats {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .cards {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .release {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .shell {
        width: min(94vw, var(--max));
    }

    .topbar-inner {
        min-height: 68px;
    }

    .status-badge {
        display: none;
    }

    .hero h1 {
        font-size: 48px;
    }

    .hero.compact h1 {
        font-size: 43px;
    }

    .stats,
    .cards,
    .footer-inner {
        grid-template-columns: 1fr;
    }

    .download-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .east4serv-panel {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
    }
}


/* ==========================================================
   E4S LAYER1 V6
   FIRE INFRASTRUCTURE VISUAL SYSTEM
   ========================================================== */

:root {
    --bg: #090909;
    --bg-soft: #11100f;

    --surface: #171513;
    --surface-2: #211b17;
    --surface-3: #2a201a;

    --line: #3b2d24;
    --line-light: #644231;

    --text: #fffaf5;
    --muted: #d0c2b8;
    --muted-2: #9f8d82;

    --red: #e51635;
    --red-soft: #ff3851;
    --red-dark: #9c0a20;

    --orange: #ff6a00;
    --orange-2: #ff8c22;
    --orange-soft: #ffad5c;

    --white: #fffaf5;

    --green: #25d366;

    --shadow:
        0 30px 90px
        rgba(0, 0, 0, .44);
}

html {
    font-size: 17px;
}

body {
    background:
        radial-gradient(
            circle at 84% 8%,
            rgba(255, 90, 0, .19),
            transparent 30rem
        ),
        radial-gradient(
            circle at 72% 22%,
            rgba(229, 22, 53, .17),
            transparent 34rem
        ),
        radial-gradient(
            circle at 8% 55%,
            rgba(255, 106, 0, .08),
            transparent 32rem
        ),
        linear-gradient(
            180deg,
            #090909 0%,
            #100d0b 40%,
            #090909 100%
        );

    color: var(--text);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-weight: 520;

    line-height: 1.62;
}

body::before {
    opacity: .34;

    background-image:
        linear-gradient(
            rgba(255, 104, 0, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(229, 22, 53, .032) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;
}

body::after {
    content: "";

    position: fixed;
    z-index: -2;
    inset: 0;

    pointer-events: none;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1500' height='900' viewBox='0 0 1500 900'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg opacity='.15' stroke='%23ff6a00'%3E%3Crect x='970' y='120' width='175' height='410' rx='12' stroke-width='3'/%3E%3Crect x='1175' y='175' width='175' height='355' rx='12' stroke-width='3'/%3E%3Cpath d='M995 165h125M995 210h125M995 255h125M995 300h125M995 345h125M995 390h125M995 435h125M995 480h125' stroke-width='2'/%3E%3Cpath d='M1200 220h125M1200 265h125M1200 310h125M1200 355h125M1200 400h125M1200 445h125M1200 490h125' stroke-width='2'/%3E%3Ccircle cx='1015' cy='187' r='4' fill='%23ff6a00'/%3E%3Ccircle cx='1015' cy='232' r='4' fill='%23ff6a00'/%3E%3Ccircle cx='1220' cy='242' r='4' fill='%23ff6a00'/%3E%3Ccircle cx='1220' cy='287' r='4' fill='%23ff6a00'/%3E%3C/g%3E%3Cg opacity='.13' stroke='%23ff2a47'%3E%3Cpath d='M220 170l90-42 90 42v86c0 100-73 154-90 164-17-10-90-64-90-164z' stroke-width='4'/%3E%3Cpath d='M250 215h120M250 252h120M250 289h120M250 326h120' stroke-width='3'/%3E%3Cpath d='M220 245H95M400 245h130M310 128V62M310 420v80' stroke-width='2' stroke-dasharray='8 9'/%3E%3Ccircle cx='95' cy='245' r='8' fill='%23ff2a47'/%3E%3Ccircle cx='530' cy='245' r='8' fill='%23ff6a00'/%3E%3C/g%3E%3Cg opacity='.07' stroke='%23ffffff'%3E%3Cpath d='M0 640h180l65-90h130l80 65h200l70-95h180l90 80h200l60-70h230' stroke-width='2'/%3E%3Cpath d='M0 710h280l65-55h180l90 65h260l80-80h220l70 50h280' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

    background-size:
        cover;

    background-position:
        center top;

    background-repeat:
        no-repeat;
}

.topbar {
    border-bottom:
        1px solid
        rgba(255, 106, 0, .24);

    background:
        linear-gradient(
            90deg,
            rgba(11, 9, 8, .96),
            rgba(30, 14, 8, .94),
            rgba(28, 6, 10, .94)
        );

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, .28);
}

.brand-icon {
    width: 52px;
    height: 52px;

    border:
        1px solid
        rgba(255, 255, 255, .18);

    background:
        linear-gradient(
            145deg,
            #ff7300 0%,
            #ef2c20 45%,
            #c80927 100%
        );

    box-shadow:
        0 0 0 1px
        rgba(255, 106, 0, .12),
        0 15px 38px
        rgba(229, 22, 53, .31);

    font-size: 16px;
}

.brand-copy strong {
    color: #fff;

    font-size: 16px;
    font-weight: 900;
}

.brand-copy small {
    color: #ff9b52;

    font-size: 10px;
    font-weight: 900;
}

.nav a {
    color: #e2d5cc;

    font-size: 13px;
    font-weight: 780;
}

.nav a:hover,
.nav a.active {
    background:
        linear-gradient(
            145deg,
            rgba(255, 106, 0, .15),
            rgba(229, 22, 53, .12)
        );

    color: #fff;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 120, 45, .13);
}

.nav .east4serv-link {
    border-color:
        rgba(255, 106, 0, .48);

    background:
        linear-gradient(
            145deg,
            rgba(255, 106, 0, .17),
            rgba(229, 22, 53, .12)
        );

    color: #fff;
}

.status-badge {
    border-color:
        rgba(255, 120, 45, .4);

    background:
        rgba(255, 106, 0, .08);

    color: #ffd2af;
}

.status-badge i {
    background: #ff7a16;

    box-shadow:
        0 0 16px
        #ff6a00;
}

.hero {
    position: relative;

    isolation: isolate;

    min-height: 660px;

    padding-top: 82px;
}

.hero::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 8%;
    right: -8%;

    width: 620px;
    height: 620px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 106, 0, .13),
            rgba(229, 22, 53, .05) 45%,
            transparent 68%
        );

    filter:
        blur(4px);

    animation:
        e4s-fire-pulse
        5.8s ease-in-out
        infinite alternate;
}

@keyframes e4s-fire-pulse {
    from {
        opacity: .65;
        transform:
            scale(.96);
    }

    to {
        opacity: 1;
        transform:
            scale(1.05);
    }
}

.eyebrow {
    padding:
        8px 12px;

    border-color:
        rgba(255, 106, 0, .48);

    background:
        linear-gradient(
            90deg,
            rgba(255, 106, 0, .11),
            rgba(229, 22, 53, .09)
        );

    color: #ffb273;

    font-size: 11px;
    font-weight: 950;
}

.hero h1 {
    max-width: 900px;

    margin-top: 24px;

    color: #fff;

    font-size:
        clamp(
            54px,
            6.5vw,
            92px
        );

    font-weight: 950;

    line-height: .96;

    text-shadow:
        0 4px 24px
        rgba(0, 0, 0, .28);
}

.hero.compact h1 {
    font-size:
        clamp(
            46px,
            5.3vw,
            72px
        );
}

.hero h1 em {
    background:
        linear-gradient(
            90deg,
            #ff8526,
            #ff4b27 45%,
            #ff304d
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color: transparent;

    text-shadow: none;
}

.hero-lead {
    color: #e0d4ca;

    font-size: 18px;
    font-weight: 560;

    line-height: 1.75;
}

.button {
    min-height: 48px;

    padding:
        0 19px;

    border-color:
        #604233;

    background:
        linear-gradient(
            145deg,
            #211b17,
            #171311
        );

    color: #fff;

    font-size: 13px;
    font-weight: 850;
}

.button:hover {
    border-color:
        #ff8535;

    background:
        linear-gradient(
            145deg,
            #30231a,
            #231511
        );

    transform:
        translateY(-1px);
}

.button.primary {
    border-color:
        #ff7422;

    background:
        linear-gradient(
            125deg,
            #ff7a16 0%,
            #ee2d24 48%,
            #c50b2b 100%
        );

    box-shadow:
        0 16px 42px
        rgba(232, 44, 32, .28);
}

.trust span {
    padding:
        8px 11px;

    border-color:
        #413126;

    background:
        rgba(255, 106, 0, .035);

    color: #cbb9ac;

    font-size: 11px;
    font-weight: 720;
}

.terminal {
    border-color:
        #65412c;

    background:
        linear-gradient(
            145deg,
            rgba(37, 24, 18, .97),
            rgba(8, 8, 8, .98)
        );

    box-shadow:
        0 34px 90px
        rgba(0, 0, 0, .45),
        0 0 70px
        rgba(255, 74, 22, .07);
}

.terminal-head {
    border-bottom-color:
        #432d22;

    background:
        rgba(255, 106, 0, .035);

    color: #c99e80;

    font-size: 11px;
}

pre {
    color: #f0dfd3;

    font-size: 13px;

    line-height: 1.72;
}

.prompt {
    color: #ff8d32;
}

.section {
    padding:
        76px 0;

    border-top-color:
        rgba(255, 106, 0, .1);
}

.section h2 {
    color: #fff;

    font-size:
        clamp(
            36px,
            4.4vw,
            54px
        );

    font-weight: 930;
}

.section-lead {
    color: #d1c1b6;

    font-size: 15px;
    font-weight: 540;

    line-height: 1.78;
}

.stats {
    gap: 13px;
}

.stats article {
    padding: 21px;

    border-color:
        #443125;

    background:
        linear-gradient(
            145deg,
            rgba(34, 25, 20, .93),
            rgba(16, 14, 13, .95)
        );

    box-shadow:
        0 16px 40px
        rgba(0, 0, 0, .19);
}

.stats small {
    color: #ff9950;

    font-size: 10px;
}

.stats strong {
    color: #fff;

    font-size: 21px;
    font-weight: 900;
}

.stats span {
    color: #b9a69a;

    font-size: 11px;
}

.cards {
    gap: 15px;
}

.card {
    position: relative;
    overflow: hidden;

    padding: 25px;

    border-color:
        #493328;

    background:
        linear-gradient(
            145deg,
            rgba(39, 27, 21, .94),
            rgba(15, 14, 13, .96)
        );

    box-shadow:
        0 18px 44px
        rgba(0, 0, 0, .18);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #ff7a16,
            #e51635,
            transparent
        );
}

.card:hover {
    transform:
        translateY(-3px);

    border-color:
        #8c4a29;

    box-shadow:
        0 24px 60px
        rgba(0, 0, 0, .27);
}

.card h3 {
    color: #fff;

    font-size: 18px;
    font-weight: 900;
}

.card p {
    color: #cab9ae;

    font-size: 14px;
    font-weight: 530;

    line-height: 1.72;
}

.card a.text-link {
    color: #ff9041;

    font-size: 12px;
    font-weight: 900;
}

.step {
    padding: 21px;

    border-color:
        #463226;

    background:
        linear-gradient(
            145deg,
            rgba(32, 24, 20, .92),
            rgba(13, 12, 12, .95)
        );
}

.step-number {
    width: 42px;
    height: 42px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 106, 0, .17),
            rgba(229, 22, 53, .15)
        );

    color: #ff9b51;

    font-size: 14px;
}

.step h3 {
    color: #fff;

    font-size: 17px;
    font-weight: 900;
}

.step p {
    color: #c5b5aa;

    font-size: 14px;
}

.callout {
    padding: 20px;

    border-color:
        #68402c;

    border-left-color:
        #ff6a00;

    background:
        linear-gradient(
            90deg,
            rgba(255, 106, 0, .08),
            rgba(229, 22, 53, .035)
        );

    color: #dbc9bd;

    font-size: 14px;
}

.callout.green {
    border-color:
        #355941;

    border-left-color:
        #25d366;

    background:
        rgba(37, 211, 102, .045);
}

table {
    background:
        #161311;
}

th,
td {
    padding:
        16px 17px;

    border-bottom-color:
        #3a2b22;
}

th {
    color: #ff9951;

    font-size: 11px;
}

td {
    color: #e1d4ca;

    font-size: 13px;
}

.command {
    border-color:
        #573723;

    background:
        #090807;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, .19);
}

.command-title {
    padding:
        12px 16px;

    border-bottom-color:
        #3d291d;

    background:
        rgba(255, 106, 0, .035);

    color: #d8a17a;

    font-size: 11px;
}

.breadcrumbs {
    color: #b59f91;

    font-size: 11px;
}

.breadcrumbs a {
    color: #ff9144;
}

.channels {
    border-color:
        #513728;

    background:
        #120f0d;
}

.channels button {
    color: #c2aa99;

    font-size: 11px;
}

.channels button.active {
    background:
        linear-gradient(
            145deg,
            #ff7217,
            #d61b2d
        );

    color: #fff;
}

.release {
    border-color:
        #67432e;

    background:
        linear-gradient(
            145deg,
            rgba(44, 28, 20, .97),
            rgba(12, 11, 10, .98)
        );

    box-shadow:
        0 26px 65px
        rgba(0, 0, 0, .27);
}

.release-tag {
    border-color:
        #795037;

    background:
        rgba(255, 106, 0, .065);

    color: #ffb378;

    font-size: 10px;
}

.release h3 {
    color: #fff;

    font-size: 24px;
    font-weight: 920;
}

.release p {
    color: #ccb9ad;

    font-size: 14px;
}

.release-meta span {
    border-color:
        #493329;

    color: #c5ad9c;

    font-size: 10px;
}

.hash {
    color: #a88e7e;

    font-size: 10px;
}

.empty-state {
    border-color:
        #68452e;

    background:
        linear-gradient(
            145deg,
            rgba(39, 25, 18, .75),
            rgba(15, 13, 12, .88)
        );
}

.empty-state strong {
    color: #fff;

    font-size: 18px;
}

.empty-state p {
    color: #c4b2a7;

    font-size: 14px;
}

.east4serv-panel {
    padding: 29px;

    border-color:
        #79442b;

    background:
        linear-gradient(
            120deg,
            rgba(255, 106, 0, .12),
            rgba(229, 22, 53, .085),
            rgba(20, 17, 15, .96)
        );

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, .24);
}

.east4serv-panel h3 {
    color: #fff;

    font-size: 24px;
    font-weight: 930;
}

.east4serv-panel p {
    color: #d2c0b4;

    font-size: 14px;
}

.footer {
    border-top-color:
        rgba(255, 106, 0, .18);

    background:
        linear-gradient(
            180deg,
            rgba(15, 12, 10, .2),
            rgba(8, 7, 7, .72)
        );
}

.footer h4 {
    color: #fff;

    font-size: 14px;
    font-weight: 900;
}

.footer p,
.footer a {
    color: #b7a499;

    font-size: 12px;
}

.footer a:hover {
    color: #ff9143;
}

.footer-bottom {
    color: #957f71;

    font-size: 10px;
}


/* WhatsApp support */

.e4s-whatsapp {
    position: fixed;
    z-index: 9999;

    right: 24px;
    bottom: 24px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding:
        10px 14px 10px 10px;

    border:
        1px solid
        rgba(255, 255, 255, .19);

    border-radius:
        999px;

    background:
        linear-gradient(
            145deg,
            #2ad46d,
            #17a94e
        );

    color: #fff;

    text-decoration: none;

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, .35),
        0 0 30px
        rgba(37, 211, 102, .17);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.e4s-whatsapp:hover {
    transform:
        translateY(-3px)
        scale(1.02);

    box-shadow:
        0 22px 60px
        rgba(0, 0, 0, .42),
        0 0 36px
        rgba(37, 211, 102, .25);
}

.e4s-whatsapp-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .16);

    font-size: 23px;
    font-weight: 950;
}

.e4s-whatsapp-copy {
    display: grid;

    line-height: 1.15;
}

.e4s-whatsapp-copy strong {
    font-size: 13px;
    font-weight: 900;
}

.e4s-whatsapp-copy small {
    margin-top: 4px;

    color:
        rgba(255, 255, 255, .88);

    font-size: 10px;
    font-weight: 650;
}

@media (max-width: 680px) {
    html {
        font-size: 16px;
    }

    .hero h1 {
        font-size: 50px;
    }

    .hero-lead {
        font-size: 16px;
    }

    .card p,
    .step p,
    .section-lead {
        font-size: 13px;
    }

    .e4s-whatsapp {
        right: 14px;
        bottom: 14px;

        padding: 8px;
    }

    .e4s-whatsapp-copy {
        display: none;
    }

    .e4s-whatsapp-icon {
        width: 46px;
        height: 46px;
    }
}


/* E4S_LAYER1_VISUAL_V6 */