/* =========================================================
   FORUMCE
   COMPLETE WEBSITE STYLESHEET
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {

    --background: #080d14;
    --background-light: #0d141e;

    --panel: #111a26;
    --panel-light: #172231;

    --blue: #3185ff;
    --blue-light: #5da0ff;

    --text: #f4f7fb;
    --muted: #8996a8;

    --border: #223044;

    --max-width: 1180px;
}


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 70% 15%,
            rgba(49, 133, 255, 0.10),
            transparent 28%
        ),
        var(--background);

    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.6;
}


.hidden {
    display: none !important;
}



/* =========================================================
   NAVIGATION
   ========================================================= */

.navbar {

    height: 74px;

    display: flex;
    align-items: center;

    position: sticky;

    top: 0;

    z-index: 100;

    border-bottom:
        1px solid var(--border);

    background:
        rgba(8, 13, 20, 0.92);

    backdrop-filter: blur(12px);
}


.nav-container {

    width:
        min(92%, var(--max-width));

    margin: auto;

    display: flex;

    justify-content:
        space-between;

    align-items: center;
}


.logo,
.footer-logo {

    color: white;

    text-decoration: none;

    font-size: 24px;

    font-weight: 800;

    letter-spacing: -1px;
}


.logo span,
.footer-logo span {

    color: var(--blue);
}


.nav-links {

    display: flex;

    align-items: center;

    gap: 28px;
}


.nav-links a {

    color: var(--muted);

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: 0.2s;
}


.nav-links a:hover {

    color: white;
}


.nav-links .nav-button {

    color: white;

    padding:
        9px 16px;

    background:
        var(--blue);

    border-radius: 7px;
}


.nav-links .nav-button:hover {

    color: white;

    background:
        var(--blue-light);
}


.nav-auth-group {

    display: flex;

    align-items: center;

    gap: 20px;
}


.signed-in-as {

    color: var(--muted);

    font-size: 12px;
}


.signed-in-as strong {

    color: white;

    font-weight: 700;
}


.auth-nav-text {

    color: var(--muted);

    font-size: 13px;
}


.nav-logout {

    color: var(--muted);

    background: transparent;

    border: 0;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;
}


.nav-logout:hover {

    color: white;
}



/* =========================================================
   BUTTONS
   ========================================================= */

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding:
        0 22px;

    border:
        1px solid transparent;

    border-radius: 7px;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.2s,
        border-color 0.2s,
        transform 0.2s,
        opacity 0.2s;
}


.button.primary {

    color: white;

    background:
        var(--blue);
}


.button.primary:hover {

    background:
        var(--blue-light);

    transform:
        translateY(-1px);
}


.button.secondary {

    color: white;

    background:
        var(--panel);

    border-color:
        var(--border);
}


.button.secondary:hover {

    background:
        var(--panel-light);
}


.button.disabled {

    color: var(--muted);

    background:
        var(--panel);

    border-color:
        var(--border);

    cursor: default;
}



/* =========================================================
   HERO
   ========================================================= */

.hero {

    width:
        min(92%, var(--max-width));

    min-height: 660px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1.05fr 0.95fr;

    align-items: center;

    gap: 60px;

    padding:
        70px 0 90px;
}


.version-badge {

    display: inline-block;

    color:
        var(--blue-light);

    background:
        rgba(49, 133, 255, 0.10);

    border:
        1px solid
        rgba(49, 133, 255, 0.25);

    border-radius: 100px;

    padding:
        6px 12px;

    margin-bottom: 22px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.hero h1 {

    max-width: 650px;

    margin-bottom: 25px;

    font-size:
        clamp(48px, 6vw, 76px);

    line-height: 1.02;

    letter-spacing: -4px;
}


.hero h1 span {

    color:
        var(--blue);
}


.hero-description {

    max-width: 580px;

    margin-bottom: 34px;

    color:
        var(--muted);

    font-size: 19px;
}


.hero-buttons {

    display: flex;

    gap: 12px;

    margin-bottom: 17px;
}


.hero-note {

    color: #637083;

    font-size: 12px;
}



/* =========================================================
   REAL CALCULATOR IMAGE
   ========================================================= */

.calculator-preview {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}


.calculator-image-wrap {

    position: relative;

    width: 100%;

    max-width: 540px;

    display: flex;

    justify-content: center;
}


.calculator-image {

    position: relative;

    z-index: 2;

    display: block;

    width: 100%;

    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 35px 35px
            rgba(0, 0, 0, 0.48)
        );

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


.calculator-image:hover {

    transform:
        translateY(-4px);

    filter:
        drop-shadow(
            0 42px 42px
            rgba(0, 0, 0, 0.55)
        );
}


.calculator-glow {

    position: absolute;

    z-index: 1;

    width: 75%;

    height: 65%;

    left: 12.5%;

    top: 17%;

    background:
        radial-gradient(
            circle,
            rgba(49, 133, 255, 0.20),
            rgba(49, 133, 255, 0.05)
            45%,
            transparent 72%
        );

    filter: blur(40px);

    pointer-events: none;
}



/* =========================================================
   FEATURES
   ========================================================= */

.features {

    width:
        min(92%, var(--max-width));

    margin: auto;

    padding:
        120px 0;
}


.section-heading {

    max-width: 650px;

    margin-bottom: 45px;
}


.section-heading p,
.section-label {

    color:
        var(--blue);

    margin-bottom: 10px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.6px;
}


.section-heading h2,
.about h2,
.download h2 {

    font-size: 38px;

    line-height: 1.15;

    letter-spacing: -1.5px;
}


.feature-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;
}


.feature-card {

    min-height: 240px;

    padding: 25px;

    background:
        var(--panel);

    border:
        1px solid var(--border);

    border-radius: 10px;

    transition:
        transform 0.2s,
        border-color 0.2s;
}


.feature-card:hover {

    transform:
        translateY(-3px);

    border-color: #30445e;
}


.feature-number {

    color: #506078;

    margin-bottom: 55px;

    font-size: 11px;

    font-weight: 800;
}


.feature-card h3 {

    margin-bottom: 9px;

    font-size: 19px;
}


.feature-card p {

    color:
        var(--muted);

    font-size: 14px;
}



/* =========================================================
   ABOUT
   ========================================================= */

.about {

    border-top:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

    background:
        var(--background-light);
}


.about-content {

    width:
        min(92%, 760px);

    margin: auto;

    padding:
        110px 0;
}


.about h2 {

    margin-bottom: 27px;

    font-size: 46px;
}


.about h2 span {

    color:
        var(--blue);
}


.about-content >
p:not(.section-label) {

    color:
        var(--muted);

    margin-bottom: 17px;

    font-size: 17px;
}



/* =========================================================
   DOWNLOAD
   ========================================================= */

.download {

    width:
        min(92%, var(--max-width));

    margin: auto;

    padding:
        110px 0;
}


.download-box {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 30px;

    padding: 45px;

    border:
        1px solid var(--border);

    border-radius: 12px;

    background:
        linear-gradient(
            120deg,
            rgba(49, 133, 255, 0.10),
            transparent 45%
        ),
        var(--panel);
}


.download-box h2 {

    margin-bottom: 8px;
}


.download-box
p:not(.section-label) {

    color:
        var(--muted);
}



/* =========================================================
   FOOTER
   ========================================================= */

footer {

    padding:
        50px 0;

    border-top:
        1px solid var(--border);
}


.footer-content {

    width:
        min(92%, var(--max-width));

    margin: auto;

    display: flex;

    justify-content:
        space-between;

    color:
        var(--muted);

    font-size: 12px;
}


.footer-logo {

    margin-bottom: 7px;
}


.footer-right {

    text-align: right;
}



/* =========================================================
   AUTH PAGES
   ========================================================= */

.auth-page {

    min-height: 100vh;
}


.auth-main {

    min-height:
        calc(100vh - 74px);

    display: flex;

    justify-content: center;

    align-items: center;

    padding:
        60px 20px;
}


.auth-card {

    width: 100%;

    max-width: 480px;

    padding: 40px;

    background:
        var(--panel);

    border:
        1px solid var(--border);

    border-radius: 12px;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.35);
}


.auth-heading {

    margin-bottom: 32px;
}


.auth-heading
.version-badge {

    margin-bottom: 17px;
}


.auth-heading h1 {

    margin-bottom: 12px;

    font-size: 36px;

    line-height: 1.1;

    letter-spacing: -1.5px;
}


.auth-heading p {

    color:
        var(--muted);

    font-size: 14px;
}



/* =========================================================
   FORMS
   ========================================================= */

.form-group {

    margin-bottom: 21px;
}


.form-group label {

    display: block;

    margin-bottom: 8px;

    color: #dce3ec;

    font-size: 13px;

    font-weight: 700;
}


.form-group input {

    width: 100%;

    height: 49px;

    padding:
        0 14px;

    color: white;

    background: #0b121c;

    border:
        1px solid var(--border);

    border-radius: 7px;

    outline: none;

    font-family: inherit;

    font-size: 14px;
}


.form-group input:focus {

    border-color:
        var(--blue);

    box-shadow:
        0 0 0 3px
        rgba(49, 133, 255, 0.10);
}


.form-group
input::placeholder {

    color: #536173;
}


.field-info {

    display: flex;

    justify-content:
        space-between;

    margin-top: 7px;

    color: #647286;

    font-size: 11px;
}


.field-hint {

    display: block;

    margin-top: 7px;

    color: #647286;

    font-size: 11px;
}


.auth-submit {

    width: 100%;

    margin-top: 5px;
}


.form-message {

    display: none;

    margin-bottom: 16px;

    padding:
        11px 13px;

    border-radius: 6px;

    font-size: 12px;
}


.form-message.error {

    display: block;

    color: #ff9b9b;

    background:
        rgba(255, 76, 76, 0.08);

    border:
        1px solid
        rgba(255, 76, 76, 0.20);
}


.form-message.success {

    display: block;

    color: #8ddba5;

    background:
        rgba(65, 190, 105, 0.08);

    border:
        1px solid
        rgba(65, 190, 105, 0.20);
}


.auth-footer {

    margin-top: 27px;

    padding-top: 23px;

    border-top:
        1px solid var(--border);

    text-align: center;

    color:
        var(--muted);

    font-size: 12px;
}


.auth-footer a {

    color:
        var(--blue-light);

    text-decoration: none;
}


.back-home {

    display: inline-block;

    margin-top: 13px;
}



/* =========================================================
   ACCOUNT DASHBOARD
   ========================================================= */

.account-main {

    min-height:
        calc(100vh - 74px);

    padding:
        70px 20px 100px;
}


.account-container {

    width:
        min(100%, 900px);

    margin: auto;
}


.account-loading {

    padding-top: 100px;

    color:
        var(--muted);

    text-align: center;
}


.account-header {

    display: flex;

    align-items: center;

    gap: 22px;

    margin-bottom: 30px;
}


.account-avatar {

    width: 74px;

    height: 74px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #172a41;

    border:
        1px solid #31527c;

    border-radius: 14px;

    color:
        var(--blue-light);

    font-size: 30px;

    font-weight: 800;
}


.account-label {

    margin-bottom: 3px;

    color:
        var(--blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.account-identity h1 {

    font-size: 35px;

    line-height: 1.1;

    letter-spacing: -1px;
}


.account-identity p {

    margin-top: 5px;

    color:
        var(--muted);

    font-size: 12px;
}


.account-stats {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-bottom: 55px;
}


.stat-card {

    padding: 20px;

    background:
        var(--panel);

    border:
        1px solid var(--border);

    border-radius: 9px;
}


.stat-card strong {

    display: block;

    font-size: 24px;
}


.stat-card span {

    color:
        var(--muted);

    font-size: 11px;
}


.account-section {

    margin-bottom: 42px;
}


.account-section-heading {

    margin-bottom: 12px;
}


.account-section-heading span {

    color:
        var(--blue);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.account-section-heading h2 {

    margin-top: 2px;

    font-size: 20px;
}


.account-panel,
.connection-panel {

    background:
        var(--panel);

    border:
        1px solid var(--border);

    border-radius: 9px;
}


.account-field {

    min-height: 83px;

    padding:
        18px 20px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 25px;

    border-bottom:
        1px solid var(--border);
}


.account-field:last-child {

    border-bottom: 0;
}


.account-field label,
.bio-editor label {

    display: block;

    margin-bottom: 4px;

    color:
        var(--muted);

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.8px;
}


.account-field p {

    color: #e5eaf0;

    font-size: 13px;
}


.small-button {

    flex-shrink: 0;

    padding:
        7px 12px;

    color: #d8e0ea;

    background: #162130;

    border:
        1px solid #2a3a4e;

    border-radius: 6px;

    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;
}


.small-button:disabled {

    color: #596779;

    cursor: default;
}


.primary-small {

    color: white;

    background:
        var(--blue);

    border-color:
        var(--blue);
}


.bio-editor {

    padding: 20px;

    border-top:
        1px solid var(--border);
}


.bio-editor textarea {

    width: 100%;

    min-height: 100px;

    resize: vertical;

    padding: 12px;

    color: white;

    background: #0b121c;

    border:
        1px solid var(--border);

    border-radius: 7px;

    outline: none;

    font-family: inherit;

    font-size: 13px;
}


.bio-editor textarea:focus {

    border-color:
        var(--blue);
}


.bio-editor-footer {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    margin-top: 9px;
}


.bio-actions {

    display: flex;

    gap: 7px;
}


.account-message {

    margin-top: 10px;

    font-size: 11px;
}


.account-message.error {

    color: #ff9b9b;
}


.account-message.success {

    color: #8ddba5;
}


.connection-panel {

    padding: 22px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 25px;
}


.connection-status {

    display: flex;

    align-items: center;

    gap: 13px;
}


.connection-dot {

    width: 9px;

    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;
}


.connection-dot.offline {

    background: #647286;
}


.connection-dot.online {

    background: #5fd47d;

    box-shadow:
        0 0 10px
        rgba(95, 212, 125, 0.35);
}


.connection-status strong {

    font-size: 13px;
}


.connection-status p {

    margin-top: 2px;

    color:
        var(--muted);

    font-size: 11px;
}


.account-version {

    padding-top: 30px;

    border-top:
        1px solid var(--border);

    text-align: center;
}


.account-version span {

    color: #637083;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.account-version p {

    margin-top: 5px;

    color: #4f5c6d;

    font-size: 10px;
}



/* =========================================================
   TABLET
   ========================================================= */

@media
(max-width: 850px) {

    .nav-links >
    a:not(.nav-button) {

        display: none;
    }


    .signed-in-as {

        display: none;
    }


    .nav-auth-group {

        gap: 10px;
    }


    .hero {

        grid-template-columns:
            1fr;

        text-align: center;
    }


    .hero-description {

        margin-left: auto;

        margin-right: auto;
    }


    .hero-buttons {

        justify-content:
            center;
    }


    .calculator-image-wrap {

        max-width: 500px;
    }


    .feature-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .download-box {

        flex-direction: column;

        align-items: flex-start;
    }
}



/* =========================================================
   MOBILE
   ========================================================= */

@media
(max-width: 600px) {

    .account-main {

        padding-top: 40px;
    }


    .connection-panel {

        flex-direction: column;

        align-items: flex-start;
    }


    .account-field {

        align-items: flex-start;
    }


    .bio-editor-footer {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }
}


@media
(max-width: 520px) {

    .navbar {

        height: 66px;
    }


    .nav-links {

        gap: 10px;
    }


    .nav-auth-group {

        gap: 8px;
    }


    .nav-links .nav-button {

        padding:
            8px 11px;

        font-size: 12px;
    }


    .hero {

        padding-top: 55px;
    }


    .hero h1 {

        letter-spacing: -2px;
    }


    .hero-buttons {

        flex-direction: column;
    }


    .hero-buttons .button {

        width: 100%;
    }


    .calculator-image-wrap {

        max-width: 390px;
    }


    .feature-grid {

        grid-template-columns:
            1fr;
    }


    .auth-main {

        min-height:
            calc(100vh - 66px);

        padding:
            30px 15px;
    }


    .auth-card {

        padding:
            27px 22px;
    }


    .auth-heading h1 {

        font-size: 31px;
    }


    .account-avatar {

        width: 62px;

        height: 62px;

        font-size: 25px;
    }


    .account-identity h1 {

        font-size: 29px;
    }


    .footer-content {

        flex-direction: column;

        gap: 25px;
    }


    .footer-right {

        text-align: left;
    }
}
/* =========================================================
   FORUMCE WEB APP PAGES
   ========================================================= */
.webapp-main{width:min(92%,1000px);margin:auto;padding:64px 0 100px}.webapp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}.webapp-head h1{font-size:clamp(34px,5vw,52px);line-height:1.05;letter-spacing:-2px}.webapp-head p{color:var(--muted);margin-top:8px}.eyebrow{display:block;color:var(--blue);font-size:10px;font-weight:800;letter-spacing:1.5px;margin-bottom:6px}.user-chip{padding:8px 12px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:12px}.tool-panel{padding:18px;background:var(--panel);border:1px solid var(--border);border-radius:10px;margin-bottom:18px}.search-row{display:flex;gap:10px}.search-row input{flex:1;min-width:0;height:48px;padding:0 14px;color:white;background:#0b121c;border:1px solid var(--border);border-radius:7px;outline:none;font:inherit}.search-row input:focus{border-color:var(--blue)}.search-row.compact{padding:12px;border-bottom:1px solid var(--border)}.search-row.compact input{height:40px}.inline-status{color:var(--muted);font-size:12px;margin-top:10px}.list-stack{display:grid;gap:10px}.person-card,.notification-card{display:flex;align-items:center;gap:14px;padding:17px 18px;background:var(--panel);border:1px solid var(--border);border-radius:9px}.mini-avatar{width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto;background:#172a41;border:1px solid #31527c;border-radius:10px;color:var(--blue-light);font-weight:800}.person-main{min-width:0;flex:1}.person-name{color:white;text-decoration:none;font-weight:800}.person-name:hover{color:var(--blue-light)}.person-main p{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.person-main small{color:#647286;font-size:10px}.profile-hero{display:flex;gap:24px;padding:32px;background:var(--panel);border:1px solid var(--border);border-radius:14px}.profile-avatar{width:88px;height:88px;display:grid;place-items:center;flex:0 0 auto;border:1px solid #31527c;border-radius:18px;background:#172a41;color:var(--blue-light);font-size:36px;font-weight:800}.profile-copy h1{font-size:40px;line-height:1.1}.profile-copy>p{color:var(--muted);margin:8px 0 16px}.profile-stats{display:flex;flex-wrap:wrap;gap:16px;color:var(--muted);font-size:12px}.profile-stats b{color:white}.profile-actions{display:flex;gap:10px;margin-top:22px}.notification-card.unread{border-color:#31527c;background:#111e2d}.notification-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:#172a41;color:var(--blue-light);font-weight:800}.notification-card strong{font-size:13px}.notification-card p{color:var(--muted);font-size:10px;margin-top:2px}.empty-state{padding:34px;color:var(--muted);text-align:center}.empty-state.small{padding:20px;font-size:12px}.dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.dashboard-link{padding:18px;background:var(--panel);border:1px solid var(--border);border-radius:9px;text-decoration:none}.dashboard-link strong{display:block;color:white;font-size:13px}.dashboard-link span{display:block;color:var(--muted);font-size:11px;margin-top:4px}.dashboard-link:hover{border-color:#31527c;background:#132033}.messages-layout{display:grid;grid-template-columns:310px 1fr;min-height:560px;background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}.conversation-panel{border-right:1px solid var(--border)}.conversation-item{position:relative;width:100%;display:block;padding:14px 40px 14px 15px;text-align:left;color:white;background:transparent;border:0;border-bottom:1px solid var(--border);cursor:pointer}.conversation-item:hover,.conversation-item.active{background:#152233}.conversation-item strong,.conversation-item span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-item strong{font-size:12px}.conversation-item span{color:var(--muted);font-size:10px;margin-top:3px}.conversation-item b{position:absolute;right:13px;top:18px;min-width:20px;padding:2px 5px;border-radius:999px;background:var(--blue);font-size:9px;text-align:center}.chat-panel{min-width:0;display:flex;flex-direction:column}.chat-title{padding:15px 18px;border-bottom:1px solid var(--border);font-weight:800}.chat-title a{color:white;text-decoration:none}.message-list{height:440px;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}.message-bubble{max-width:78%;padding:10px 12px;border-radius:10px;background:#1b2838}.message-bubble.mine{align-self:flex-end;background:#18345a}.message-bubble.theirs{align-self:flex-start}.message-bubble span{display:block;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}.message-bubble small{display:block;color:#7f8da0;font-size:9px;margin-top:5px}.message-compose{display:flex;gap:10px;padding:12px;border-top:1px solid var(--border)}.message-compose textarea{flex:1;min-height:48px;max-height:110px;resize:vertical;padding:10px;color:white;background:#0b121c;border:1px solid var(--border);border-radius:7px;font:inherit}.message-compose .button{align-self:flex-end}.nav-links button{white-space:nowrap}
@media(max-width:760px){.webapp-head{align-items:flex-start;flex-direction:column}.dashboard-grid{grid-template-columns:1fr}.messages-layout{grid-template-columns:1fr}.conversation-panel{border-right:0;border-bottom:1px solid var(--border);max-height:260px;overflow:auto}.profile-hero{flex-direction:column}.search-row{flex-direction:column}.search-row.compact{flex-direction:row}.person-card{align-items:flex-start}.message-list{height:380px}}

/* =========================================================
   SUPPORT PAGE
   ========================================================= */

.support-main {
    width: min(92%, 980px);
    margin: auto;
    padding: 100px 0 120px;
}


.support-hero {
    max-width: 720px;
    margin-bottom: 70px;
}


.support-hero h1 {
    max-width: 650px;
    margin-bottom: 25px;

    font-size: clamp(45px, 6vw, 70px);
    line-height: 1.02;
    letter-spacing: -3px;
}


.support-hero h1 span {
    color: var(--blue);
}


.support-description {
    max-width: 650px;

    margin-bottom: 15px;

    color: var(--muted);

    font-size: 17px;
}


.support-promise {
    margin-top: 35px;

    padding: 20px 22px;

    background:
        rgba(49, 133, 255, 0.06);

    border:
        1px solid
        rgba(49, 133, 255, 0.20);

    border-radius: 9px;
}


.support-promise span {
    color: var(--blue-light);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;
}


.support-promise p {
    margin-top: 5px;

    color: #c6cfda;

    font-size: 13px;
}



/* =========================================================
   SUPPORT CARDS
   ========================================================= */

.support-options {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

    margin-bottom: 90px;
}


.support-card {
    min-height: 330px;

    padding: 28px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 11px;
}


.support-icon {
    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 35px;

    background:
        rgba(49, 133, 255, 0.10);

    border:
        1px solid
        rgba(49, 133, 255, 0.20);

    border-radius: 8px;

    color: var(--blue-light);

    font-size: 15px;

    font-weight: 800;
}


.support-label {
    margin-bottom: 5px;

    color: var(--blue);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.support-card h2 {
    margin-bottom: 9px;

    font-size: 21px;
}


.support-card div p:not(.support-label) {
    color: var(--muted);

    font-size: 13px;
}


.support-card > .button {
    margin-top: auto;
}



/* =========================================================
   OTHER SUPPORT OPTIONS
   ========================================================= */

.support-other {
    padding-top: 65px;

    border-top: 1px solid var(--border);
}


.support-other > h2 {
    margin-bottom: 30px;

    font-size: 30px;

    letter-spacing: -1px;
}


.support-help-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;
}


.support-help-grid > div {
    padding: 20px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 8px;
}


.support-help-grid strong {
    display: block;

    margin-bottom: 5px;

    font-size: 13px;
}


.support-help-grid p {
    color: var(--muted);

    font-size: 12px;
}



/* =========================================================
   HOMEPAGE SUPPORT
   ========================================================= */

.home-support {
    padding: 20px 0 100px;
}


.home-support-inner {
    width: min(92%, var(--max-width));

    margin: auto;

    padding: 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    background:
        linear-gradient(
            120deg,
            rgba(49, 133, 255, 0.08),
            transparent 55%
        ),
        var(--panel);

    border: 1px solid var(--border);

    border-radius: 11px;
}


.home-support-inner h2 {
    margin-bottom: 6px;

    font-size: 26px;

    letter-spacing: -1px;
}


.home-support-inner p:not(.section-label) {
    color: var(--muted);

    font-size: 13px;
}



/* =========================================================
   SUPPORT MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .support-options {
        grid-template-columns: 1fr;
    }


    .support-help-grid {
        grid-template-columns: 1fr;
    }


    .home-support-inner {
        flex-direction: column;

        align-items: flex-start;
    }
}

/* ForumCE contact email */
.footer-right a {
    color: var(--muted);
    text-decoration: none;
}

.footer-right a:hover {
    color: var(--blue-light);
}


/* =========================================================
   OFFICIAL v1.1 DOWNLOAD
   ========================================================= */

.download-release {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 18px;
}

.download-release-copy,
.download-requirements {
    padding: 38px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background:
        linear-gradient(
            120deg,
            rgba(49, 133, 255, 0.10),
            transparent 50%
        ),
        var(--panel);
}

.download-release-copy h2 {
    max-width: 680px;
    margin-bottom: 14px;
}

.download-lead,
.download-requirements > p:not(.section-label) {
    color: var(--muted);
    font-size: 15px;
}

.download-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 12px;
}

.download-small {
    color: #637083;
    font-size: 11px;
}

.download-requirements h3 {
    margin-bottom: 10px;
    font-size: 21px;
}

.install-steps {
    margin: 18px 0 20px 20px;
    color: var(--muted);
    font-size: 13px;
}

.install-steps li {
    margin-bottom: 7px;
    padding-left: 4px;
}

.text-link {
    color: var(--blue-light);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.text-link:hover {
    color: white;
}

@media (max-width: 850px) {
    .download-release {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .download-release-copy,
    .download-requirements {
        padding: 26px;
    }

    .download-actions {
        flex-direction: column;
        align-items: stretch;
    }
}