/* =========================================================
   Base
   ========================================================= */

:root {
    --bg-dark: #070b14;
    --bg-hero: #09111f;
    --panel-dark: #0d1424;
    --panel-dark-2: #101a2e;
    --text-main: #111827;
    --text-body: #1f2937;
    --text-muted: #4b5563;
    --text-light: #e5edf7;
    --text-light-muted: #cbd5e1;
    --primary: #38bdf8;
    --primary-dark: #2563eb;
    --link: #0070cc;
    --border: #d1d5db;
    --border-light: #e5e7eb;
    --border-dark: rgba(148, 163, 184, 0.18);
    --card-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    --radius-card: 16px;
    --brand-blue: #1f5f86;
    --brand-blue-dark: #0b2b44;
    --brand-blue-deep: #071827;
    --brand-sky: #38bdf8;
    --brand-bg: #f5f8fc;
    --brand-bg-2: #edf5fb;
    --brand-card: #ffffff;
    --brand-border: rgba(31, 95, 134, 0.16);
    --brand-border-strong: rgba(31, 95, 134, 0.28);
    --brand-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
    --brand-shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.07);
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--text-main);
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

.site-main {
    flex: 1 0 auto;
    background: radial-gradient(circle at 12% 0%, rgba(56, 189, 248, 0.10), transparent 28rem), radial-gradient(circle at 90% 8%, rgba(31, 95, 134, 0.08), transparent 24rem), linear-gradient(180deg, #ffffff 0%, var(--brand-bg) 38%, #ffffff 100%);
}

a {
    color: var(--link);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

.container {
    width: min(1180px, calc(100% - 32px));
    max-width: 1180px;
    margin: 0 auto;
}

.section {
    padding: 56px 0;
}

img {
    max-width: 100%;
}

h1 {
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.05;
    margin: 14px 0;
}

.lead {
    max-width: 780px;
    color: var(--text-light-muted);
    font-size: 18px;
    line-height: 1.7;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(37, 140, 251, 0.65);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}
.form-help {
    margin-top: 0.45rem;
    margin-bottom: 0;
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.45;
}
.dark-section .form-help,
.hero-section .form-help {
    color: rgba(226, 232, 240, 0.82);
}


/* =========================================================
   Header / Navbar
   ========================================================= */

.site-header {
    position: relative;
    z-index: 20;
}

    .site-header .navbar {
        background: rgba(255, 255, 255, 0.94) !important;
        backdrop-filter: blur(10px);
        border-bottom-color: rgba(31, 95, 134, 0.14) !important;
    }

.site-brand {
    color: var(--brand-blue-dark) !important;
    font-weight: 900;
    letter-spacing: -0.03em;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

.navbar .nav-link {
    color: #334155;
    font-weight: 650;
}

    .navbar .nav-link:hover,
    .navbar .nav-link:focus {
        color: var(--brand-blue);
    }

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
.site-brand {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
}

.site-brand-company {
    margin-top: 0.15rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.02em;
}
@media (max-width: 575.98px) {
    .site-brand-company {
        display: none;
    }
}


/* =========================================================
   Common buttons / forms / alerts
   ========================================================= */

.button-secondary {
    display: inline-block;
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    padding: 12px 18px;
    background: var(--panel-dark-2);
    color: var(--text-light);
    cursor: pointer;
    font-weight: 700;
}

    .button-secondary:hover {
        color: #ffffff;
    }

.btn-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--brand-blue), #2563eb) !important;
    border-color: var(--brand-blue) !important;
    box-shadow: 0 10px 22px rgba(31, 95, 134, 0.22);
}

    .btn-primary:hover,
    .btn-primary:focus {
        background: linear-gradient(135deg, #174d6d, #1d4ed8) !important;
        border-color: #174d6d !important;
        color: #ffffff !important;
    }

.btn-success {
    color: #ffffff !important;
    background: linear-gradient(135deg, #047857, #10b981) !important;
    border-color: #047857 !important;
}

.btn-secondary,
.btn-send-code {
    color: #ffffff !important;
}

.btn-send-code {
    background: #475569 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
    font-weight: 700;
}

    .btn-send-code:hover,
    .btn-send-code:focus {
        background: #334155 !important;
        border-color: #334155 !important;
        color: #ffffff !important;
    }

    .btn-send-code:disabled,
    .btn-send-code.disabled {
        background: #94a3b8 !important;
        border-color: #94a3b8 !important;
        color: #ffffff !important;
        opacity: 1;
        cursor: not-allowed;
    }

.form-control,
.form-select,
input.form-control,
select.form-control,
textarea.form-control {
    color: #0f172a;
    background-color: #ffffff;
    border: 1px solid #b8c5d6;
    border-radius: 11px;
    min-height: 42px;
}

textarea.form-control {
    min-height: auto;
}

.form-control:hover,
.form-select:hover {
    border-color: #8ea4bd;
}

.form-control:focus,
.form-select:focus {
    color: #0f172a;
    background-color: #ffffff;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 0.18rem rgba(31, 95, 134, 0.18);
}

.form-control::placeholder,
textarea.form-control::placeholder {
    color: #64748b;
}

.alert {
    border-radius: 14px;
    line-height: 1.6;
}

.alert-info {
    color: #075985;
    background: #eaf7ff;
    border-color: #bae6fd;
}

.alert-warning {
    color: #8a4b0f;
    background: #fff8e6;
    border-color: #f5d48a;
}

.alert-danger {
    color: #991b1b;
    background: #fff1f2;
    border-color: #fecdd3;
}

.alert-success {
    color: #065f46;
    background: #ecfdf5;
    border-color: #a7f3d0;
}


/* =========================================================
   Page Hero
   ========================================================= */

.page-hero {
    padding: 80px 0 56px;
    color: #f8fafc;
    background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.20), transparent 34%), radial-gradient(circle at top right, rgba(37, 99, 235, 0.18), transparent 30%), linear-gradient(180deg, #09111f 0%, #070b14 100%);
    border-bottom: 1px solid var(--border-dark);
}

    .page-hero h1 {
        color: #f8fafc;
    }

.eyebrow {
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 13px;
    font-weight: 700;
}


/* =========================================================
   Notices list
   ========================================================= */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

    .filter-bar input,
    .filter-bar select {
        background: var(--panel-dark);
        color: var(--text-light);
        border: 1px solid var(--border-dark);
        border-radius: 10px;
        padding: 12px 14px;
    }

        .filter-bar input::placeholder {
            color: #94a3b8;
        }

    .filter-bar button {
        border: 1px solid var(--border-dark);
        border-radius: 10px;
        padding: 12px 18px;
        background: linear-gradient(135deg, var(--primary-dark), var(--primary));
        color: #ffffff;
        cursor: pointer;
        font-weight: 700;
    }

.notice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.notice-card {
    background: linear-gradient(180deg, var(--panel-dark), var(--panel-dark-2));
    border: 1px solid var(--border-dark);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

    .notice-card h2 {
        font-size: 22px;
        line-height: 1.25;
    }

        .notice-card h2 a {
            color: #e0f2fe;
        }

    .notice-card p {
        color: #9aa8bd;
        line-height: 1.6;
    }

.notice-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #9aa8bd;
    font-size: 13px;
}

    .notice-meta span {
        border: 1px solid var(--border-dark);
        border-radius: 999px;
        padding: 4px 9px;
        background: rgba(255, 255, 255, 0.03);
    }

    .notice-meta.large {
        margin-top: 20px;
    }

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
}

    .tag-row a {
        border: 1px solid rgba(56, 189, 248, 0.25);
        border-radius: 999px;
        padding: 5px 10px;
        color: #0369a1;
        background: #eff6ff;
    }

.notice-card .tag-row a {
    color: #bae6fd;
    background: rgba(56, 189, 248, 0.08);
}

.read-more {
    display: inline-block;
    margin-top: 12px;
    font-weight: 700;
}

.empty-box {
    border: 1px dashed var(--border);
    border-radius: 18px;
    padding: 32px;
    color: var(--text-muted);
    text-align: center;
}


/* =========================================================
   Article content / Legal pages / Notice detail
   ========================================================= */

.article-content {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    padding: 32px;
    color: var(--text-body);
    background: #ffffff;
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    line-height: 1.75;
}

    .article-content h1,
    .article-content h2,
    .article-content h3,
    .article-content h4,
    .article-content h5,
    .article-content h6 {
        color: var(--text-main);
    }

    .article-content h2 {
        margin-top: 2rem;
        margin-bottom: 0.8rem;
    }

        .article-content h2:first-child {
            margin-top: 0;
        }

    .article-content p,
    .article-content li,
    .article-content label,
    .article-content small {
        color: #374151;
    }

    .article-content p {
        margin-bottom: 1rem;
    }

    .article-content strong {
        color: var(--text-main);
    }

    .article-content ul,
    .article-content ol {
        padding-left: 1.4rem;
        margin-bottom: 1.25rem;
    }

    .article-content li {
        margin-bottom: 0.5rem;
    }

    .article-content a {
        color: var(--link);
    }

    .article-content img {
        max-width: 100%;
        height: auto;
        display: block;
        border-radius: 14px;
    }

    .article-content iframe {
        width: 100%;
        max-width: 920px;
        border-radius: 16px;
        border: 1px solid var(--border);
        background: #000000;
    }

.back-link {
    margin-top: 36px;
}


/* =========================================================
   Notice video template
   ========================================================= */

.notice-video-article {
    max-width: 920px;
    margin: 0 auto;
}

.notice-video-intro {
    color: #374151;
    font-size: 17px;
    line-height: 1.85;
    margin-bottom: 28px;
}

    .notice-video-intro p {
        margin: 0 0 14px;
    }

.notice-video-box {
    padding: 10px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    margin: 30px 0;
}

.notice-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    background: #0f172a;
}

    .notice-video-frame iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.notice-video-text {
    color: #374151;
    font-size: 16px;
    line-height: 1.85;
    margin-top: 30px;
}

    .notice-video-text h2 {
        color: var(--text-main);
        font-size: 24px;
        margin: 0 0 16px;
    }

    .notice-video-text ol {
        padding-left: 22px;
        margin: 0 0 24px;
    }

    .notice-video-text li {
        margin-bottom: 8px;
    }

.notice-tip {
    margin-top: 24px;
    padding: 16px 18px;
    border-left: 4px solid #0070cc;
    border-radius: 12px;
    background: #f3f8ff;
    color: var(--text-body);
}


/* =========================================================
   IMC Notice template
   ========================================================= */

.article-content .imc-notice {
    max-width: 1100px;
    margin: 0 auto;
    color: var(--text-body);
    line-height: 1.7;
    font-family: Arial, sans-serif;
}

.article-content .imc-hero {
    text-align: center;
    margin-bottom: 32px;
    padding: 28px 20px;
    background: linear-gradient(135deg, #eff6ff, #f8fafc);
    border-radius: 16px;
    border: 1px solid #dbeafe;
}

    .article-content .imc-hero h1 {
        margin-top: 0;
        margin-bottom: 12px;
        color: var(--text-main);
        font-size: 34px;
    }

    .article-content .imc-hero p {
        max-width: 850px;
        margin: 0 auto;
        color: var(--text-muted);
        font-size: 18px;
    }

.article-content .imc-card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 26px;
    margin-bottom: 28px;
}

    .article-content .imc-card h2 {
        margin-top: 0;
        color: var(--text-main);
        font-size: 24px;
    }

    .article-content .imc-card ol,
    .article-content .imc-card ul {
        padding-left: 22px;
    }

    .article-content .imc-card li {
        margin-bottom: 12px;
    }

.article-content .imc-highlight {
    margin-top: 12px;
    padding: 14px 16px;
    background: #eff6ff;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
    color: #1e3a8a;
}

.article-content .imc-warning {
    margin-top: 14px;
    padding: 14px 16px;
    background: #fff7ed;
    border-left: 4px solid #f97316;
    border-radius: 8px;
    color: #9a3412;
}

.article-content .imc-success {
    margin-top: 14px;
    padding: 14px 16px;
    background: #ecfdf5;
    border-left: 4px solid #10b981;
    border-radius: 8px;
    color: #065f46;
}

.article-content .imc-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.article-content .imc-figure {
    margin: 0;
    background: #f9fafb;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
}

    .article-content .imc-figure img {
        width: 100%;
        height: auto;
        display: block;
    }

    .article-content .imc-figure figcaption {
        padding: 12px 14px;
        color: var(--text-muted);
        font-size: 14px;
        line-height: 1.5;
    }

.article-content .imc-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 18px 0;
}

    .article-content .imc-contact a,
    .article-content .imc-contact span {
        display: inline-flex;
        align-items: center;
        padding: 10px 14px;
        border-radius: 999px;
        background: #eff6ff;
        color: #1d4ed8;
        text-decoration: none;
        font-weight: 600;
    }


/* =========================================================
   Renewal / Buy pages
   ========================================================= */

.renewal-page {
    width: min(980px, calc(100% - 32px));
    max-width: 980px;
    margin: 0 auto;
    padding: 56px 0;
    color: var(--text-main);
}

.buy-page {
    width: min(1080px, calc(100% - 32px));
    max-width: 1080px;
}

.renewal-page h1 {
    color: #0f172a;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.12;
    margin-top: 0;
    margin-bottom: 14px;
    letter-spacing: -0.035em;
}

.renewal-page > h1::after {
    content: "";
    display: block;
    width: 74px;
    height: 4px;
    margin-top: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-sky));
}

.renewal-page p,
.renewal-page li,
.renewal-page label {
    color: var(--text-body);
}

.renewal-page .text-muted {
    color: var(--text-muted) !important;
}

.renewal-notice,
.renewal-form,
.renewal-result,
.renewal-help-box {
    color: var(--text-body);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--brand-border);
    border-radius: 20px;
    box-shadow: var(--brand-shadow);
}

.renewal-notice {
    margin-top: 1rem;
    margin-bottom: 1.75rem;
    padding: 22px 24px;
    border-left: 5px solid var(--brand-blue);
}

    .renewal-notice h2 {
        margin-top: 0;
        margin-bottom: 0.75rem;
        font-size: 1.25rem;
        color: #0f172a;
    }

    .renewal-notice ul {
        margin-bottom: 0;
        padding-left: 1.25rem;
    }

    .renewal-notice li {
        margin-bottom: 0.45rem;
        line-height: 1.55;
        color: #334155;
    }

    .renewal-notice strong,
    .renewal-result strong {
        color: var(--text-main);
    }

.renewal-form {
    margin-top: 1.5rem;
    padding: 26px 28px;
}

.renewal-form-row {
    margin-top: 1.45rem;
    margin-bottom: 1.45rem;
}

.renewal-label {
    display: block;
    margin-bottom: 0.45rem;
    font-weight: 800;
    color: #0f172a;
}

.renewal-choice-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.5rem;
}

    .renewal-choice-list label {
        color: var(--text-body);
        line-height: 1.45;
        padding: 9px 12px;
        border-radius: 12px;
        background: #f8fbfd;
        border: 1px solid rgba(31, 95, 134, 0.10);
    }

    .renewal-choice-list input[type="radio"],
    .renewal-choice-list input[type="checkbox"] {
        accent-color: var(--brand-blue);
    }

.renewal-help {
    margin-top: 0.65rem;
    color: #334155 !important;
    background: #f3f8fc !important;
    border-left: 4px solid var(--brand-blue);
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
}

.renewal-action-row {
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
}

.renewal-turnstile {
    margin-top: 2rem;
    margin-bottom: 2rem;
    min-height: 80px;
    clear: both;
}

.renewal-countdown {
    display: inline-block;
    margin-left: 0.85rem;
    color: #374151 !important;
}

.renewal-result {
    margin-top: 2.25rem;
    padding: 24px 26px;
}

    .renewal-result h2 {
        margin-top: 0;
        color: #0f172a;
    }

    .renewal-result p,
    .renewal-result label,
    .renewal-result option {
        color: var(--text-body);
    }

    .renewal-result .text-muted {
        color: var(--text-muted) !important;
    }

    .renewal-result .text-danger {
        color: #b91c1c !important;
    }

.renewal-jump-hint {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    color: #064e3b;
    background-color: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
}

    .renewal-jump-hint a {
        color: #047857;
        font-weight: 600;
        text-decoration: underline;
    }

.renewal-form input,
.renewal-form select,
.renewal-form textarea,
.renewal-form .form-control,
.renewal-form .form-select {
    color: var(--text-main);
    background-color: #ffffff;
    border-color: #b8c5d6;
}

    .renewal-form input::placeholder,
    .renewal-form textarea::placeholder {
        color: #64748b;
    }

/* Buy */
.buy-page .buy-products {
    margin-top: 1.5rem;
}

.buy-page .buy-product-row {
    align-items: flex-start;
    border-bottom: 1px solid rgba(31, 95, 134, 0.14);
    padding-bottom: 1.25rem;
}

    .buy-page .buy-product-row:last-child {
        border-bottom: none;
    }

.buy-page .buy-product-content {
    flex: 1;
    color: #334155;
}

    .buy-page .buy-product-content p {
        margin-bottom: 0.65rem;
    }

    .buy-page .buy-product-content strong {
        color: #0f172a;
    }

.buy-page .buy-quantity-input {
    max-width: 180px;
    font-weight: 800;
    text-align: center;
}

.buy-page .buy-sub-field {
    margin-top: 0.9rem;
}

    .buy-page .buy-sub-field label {
        display: block;
        margin-bottom: 0.35rem;
        font-weight: 600;
    }

.buy-page .buy-confirm-list label {
    display: block;
    margin-bottom: 0.55rem;
}

.buy-page .buy-confirm-list input[type="checkbox"] {
    margin-right: 0.35rem;
}

.buy-page #totalAmount {
    color: var(--brand-blue);
    font-size: 1.18em;
}

.buy-validation-summary.validation-summary-errors {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: #fff5f5;
    border-left: 5px solid #dc3545;
    border-radius: 10px;
    color: #842029;
    line-height: 1.5;
}

    .buy-validation-summary.validation-summary-errors ul {
        margin: 0;
        padding-left: 20px;
    }

    .buy-validation-summary.validation-summary-errors li {
        margin: 4px 0;
    }

.buy-validation-summary.validation-summary-valid {
    display: none;
}

.buy-phone-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.buy-phone-code {
    flex: 0 0 260px;
    max-width: 260px;
}

.buy-phone-number {
    flex: 1 1 260px;
}

.buy-phone-row .text-danger,
.buy-phone-row .renewal-help {
    flex-basis: 100%;
}
.buy-product-image-link {
    margin-top: 0.35rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

    .buy-product-image-link a {
        font-weight: 600;
    }


/* =========================================================
   Download page
   ========================================================= */

.download-page {
    width: min(920px, calc(100% - 32px));
    max-width: 920px;
    margin: 0 auto;
    padding: 56px 0;
    color: var(--text-main);
}

    .download-page h1 {
        color: #0f172a;
        font-size: clamp(34px, 4vw, 52px);
        line-height: 1.12;
        margin-top: 0;
        margin-bottom: 14px;
        letter-spacing: -0.035em;
    }

        .download-page h1::after {
            content: "";
            display: block;
            width: 74px;
            height: 4px;
            margin-top: 16px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--brand-blue), var(--brand-sky));
        }

    .download-page h2,
    .download-page h3,
    .download-page h4,
    .download-page h5,
    .download-page h6,
    .download-page label,
    .download-page .download-label {
        color: var(--text-main);
    }

    .download-page p,
    .download-page .text-muted,
    .download-page .download-description,
    .download-page .download-countdown {
        color: var(--text-muted) !important;
        opacity: 1;
    }

.download-description {
    max-width: 720px;
    margin-bottom: 1.5rem;
    color: #475569 !important;
    font-size: 17px;
    line-height: 1.7;
}

.download-form {
    margin-top: 1.5rem;
    padding: 26px 28px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--brand-border);
    border-radius: 20px;
    box-shadow: var(--brand-shadow);
}

.download-form-row {
    margin-top: 1.35rem;
    margin-bottom: 1.35rem;
}

.download-label {
    display: block;
    margin-bottom: 0.45rem;
    font-weight: 800;
}

.download-file-list {
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(31, 95, 134, 0.18);
    border-radius: 16px;
    background: #f8fbfd;
    color: var(--text-main);
}

.download-file-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 12px 10px;
    border-radius: 12px;
    background-color: transparent;
    color: var(--text-main);
}

    .download-file-item:hover {
        background: #eef7fc;
    }

    .download-file-item + .download-file-item {
        border-top: 1px solid rgba(31, 95, 134, 0.12);
    }

.download-file-label {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    cursor: pointer;
    color: var(--text-main) !important;
}

.download-file-name {
    color: var(--text-main) !important;
    opacity: 1;
    font-weight: 800;
}

.download-file-size {
    color: var(--text-muted) !important;
    opacity: 1;
}

.download-file-radio {
    accent-color: var(--brand-blue);
}

.download-action-row {
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
}

.download-turnstile {
    margin-top: 2rem;
    margin-bottom: 2rem;
    min-height: 80px;
    clear: both;
}

.download-countdown {
    display: inline-block;
    margin-left: 0.85rem;
}

.download-result {
    margin-top: 2.25rem;
    padding: 24px 26px;
    border-top: none;
    border-left: 5px solid #10b981;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 20px;
    box-shadow: var(--brand-shadow);
}

.download-page input,
.download-page select,
.download-page textarea,
.download-page .form-control,
.download-page .form-select {
    background-color: #ffffff;
    color: var(--text-main);
    border-color: #b8c5d6;
}

    .download-page input::placeholder,
    .download-page textarea::placeholder {
        color: #64748b;
    }


/* =========================================================
   Support page
   ========================================================= */

.support-page {
    width: min(940px, calc(100% - 32px));
    max-width: 940px;
    margin: 0 auto;
    padding: 56px 0;
    color: var(--text-main);
}

    .support-page .row {
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
    }

    .support-page .col-lg-8 {
        width: 100%;
        max-width: 820px;
    }

    .support-page h1 {
        color: #0f172a;
        font-size: clamp(34px, 4vw, 52px);
        line-height: 1.12;
        margin-top: 0;
        margin-bottom: 14px;
        letter-spacing: -0.035em;
    }

        .support-page h1::after {
            content: "";
            display: block;
            width: 74px;
            height: 4px;
            margin-top: 16px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--brand-blue), var(--brand-sky));
        }

    .support-page h2,
    .support-page h3,
    .support-page h4,
    .support-page h5,
    .support-page h6,
    .support-page label,
    .support-page .form-label {
        color: var(--text-main);
    }

    .support-page p,
    .support-page .text-muted,
    .support-page .form-text,
    .support-page small {
        color: var(--text-muted) !important;
        opacity: 1;
    }

    .support-page form {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid var(--brand-border);
        border-radius: 20px;
        padding: 28px 30px;
        box-shadow: var(--brand-shadow);
    }

    .support-page .form-label {
        font-weight: 800;
        color: #0f172a;
    }

    .support-page input,
    .support-page select,
    .support-page textarea,
    .support-page .form-control,
    .support-page .form-select {
        background-color: #ffffff;
        color: var(--text-main);
        border-color: #b8c5d6;
    }

        .support-page input::placeholder,
        .support-page textarea::placeholder {
            color: #64748b;
        }

    .support-page .input-group .form-control {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .support-page .input-group .btn-send-code {
        min-width: 132px;
        white-space: nowrap;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }


/* =========================================================
   CCF Tools
   ========================================================= */

.ccf-hero {
    background: radial-gradient(circle at top left, rgba(46, 115, 255, 0.28), transparent 34rem), linear-gradient(135deg, #08111f 0%, #101b2d 45%, #12243d 100%);
}

.ccf-tool-page {
    padding: 48px 0 72px;
}

.ccf-tool-shell {
    display: grid;
    gap: 24px;
}

.ccf-tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.ccf-tool-card {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    color: #172033;
}

    .ccf-tool-card h2 {
        margin: 0 0 12px;
        color: #0f172a;
        font-size: 1.55rem;
        font-weight: 700;
    }

    .ccf-tool-card p {
        color: #526070;
        line-height: 1.65;
    }

.ccf-tool-card-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    margin-bottom: 14px;
    background: #e8f2ff;
    color: #0b63ce;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ccf-tool-card-badge-muted {
    background: #edf0f5;
    color: #667085;
}

.ccf-tool-list {
    margin: 18px 0 24px;
    padding-left: 20px;
    color: #475569;
}

    .ccf-tool-list li {
        margin-bottom: 7px;
    }

.ccf-btn {
    border-radius: 999px;
    padding: 10px 20px;
    font-weight: 700;
}

.ccf-tool-notice {
    padding: 16px 18px;
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 14px;
    background: #eff6ff;
    color: #1e3a8a;
    line-height: 1.6;
}

.ccf-warning-notice {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
}

.ccf-gate-card {
    max-width: 720px;
}

.ccf-turnstile-wrap {
    margin: 18px 0;
}

.ccf-dev-captcha-note {
    margin: 18px 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
}

.ccf-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.ccf-session-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 0.85rem;
    font-weight: 700;
}

.ccf-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
}

.ccf-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.ccf-upload-box label,
.ccf-keyword label {
    display: block;
    margin-bottom: 8px;
    color: #1e293b;
    font-weight: 700;
}

.ccf-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-top: 20px;
}

.ccf-keyword {
    flex: 1;
}

.ccf-message {
    margin-top: 18px;
    padding: 13px 15px;
    border-radius: 12px;
    line-height: 1.5;
}

    .ccf-message.error {
        color: #991b1b;
        background: #fef2f2;
        border: 1px solid #fecaca;
    }

    .ccf-message.success {
        color: #166534;
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
    }

.ccf-result-summary {
    margin-top: 22px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-weight: 700;
}

.ccf-table-wrap {
    margin-top: 18px;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.ccf-result-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: collapse;
    background: #ffffff;
}

    .ccf-result-table th,
    .ccf-result-table td {
        padding: 10px 12px;
        border-bottom: 1px solid #e2e8f0;
        text-align: left;
        vertical-align: top;
        font-size: 0.88rem;
    }

    .ccf-result-table th {
        position: sticky;
        top: 0;
        background: #f8fafc;
        color: #0f172a;
        font-weight: 800;
        z-index: 1;
    }

    .ccf-result-table td {
        color: #334155;
    }

    .ccf-result-table tbody tr:nth-child(even) {
        background: #fbfdff;
    }

    .ccf-result-table tbody tr:hover {
        background: #eff6ff;
    }

.ccf-editor {
    margin-top: 24px;
}

.ccf-edit-bar {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr auto;
    gap: 18px;
    align-items: end;
    margin-bottom: 18px;
    padding: 18px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.ccf-edit-field label {
    display: block;
    margin-bottom: 8px;
    color: #1e293b;
    font-weight: 700;
}

.ccf-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding-bottom: 9px;
}

.ccf-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #334155;
    font-weight: 700;
}

    .ccf-check input {
        width: 16px;
        height: 16px;
    }

.ccf-selected-editor {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 420px);
    gap: 18px;
    align-items: end;
    margin-bottom: 18px;
    padding: 18px;
    border-radius: 14px;
    background: #eef6ff;
    border: 1px solid #bfdbfe;
}

    .ccf-selected-editor strong {
        display: block;
        color: #0f172a;
        margin-bottom: 6px;
    }

    .ccf-selected-editor p {
        margin: 0;
        color: #475569;
    }

.ccf-setvalue-wrap {
    display: flex;
    gap: 10px;
}

    .ccf-setvalue-wrap .form-control {
        min-width: 0;
    }

.ccf-modify-table tbody tr {
    cursor: pointer;
}

    .ccf-result-table tbody tr.ccf-row-selected,
    .ccf-modify-table tbody tr.ccf-row-selected {
        background: #fef3c7 !important;
        box-shadow: inset 4px 0 0 #f59e0b;
    }

.ccf-result-table tbody tr.ccf-row-diff {
    background: #fff7ed;
}

    .ccf-result-table tbody tr.ccf-row-diff:hover {
        background: #ffedd5;
    }

.ccf-modify-table tbody tr.ccf-row-alert {
    background: #fff1f2;
    box-shadow: inset 4px 0 0 #fb7185;
}

.ccf-modify-table tbody tr.ccf-row-updated {
    background: #ecfdf5;
    box-shadow: inset 4px 0 0 #22c55e;
}

.ccf-modify-table tbody tr.ccf-row-alert:hover {
    background: #ffe4e6;
}

.ccf-modify-table tbody tr.ccf-row-updated:hover {
    background: #d1fae5;
}


/* =========================================================
   Home page
   ========================================================= */

.home-hero {
    position: relative;
    overflow: hidden;
    padding: 82px 0 76px;
    background: radial-gradient(circle at 16% 18%, rgba(56, 189, 248, 0.13), transparent 30rem), radial-gradient(circle at 82% 4%, rgba(31, 95, 134, 0.10), transparent 26rem), linear-gradient(135deg, #ffffff 0%, #f3f8fc 48%, #ffffff 100%);
}

    .home-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(31, 95, 134, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 95, 134, 0.045) 1px, transparent 1px);
        background-size: 44px 44px;
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 82%);
        pointer-events: none;
    }

.home-hero-inner {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 32px));
    max-width: 1280px;
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(600px, 680px);
    gap: 44px;
    align-items: center;
}

.home-eyebrow {
    margin: 0 0 12px;
    color: var(--brand-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-hero-copy h1 {
    max-width: 720px;
    margin: 0;
    color: #0f172a;
    font-size: clamp(40px, 5vw, 66px);
    line-height: 1.03;
    letter-spacing: -0.055em;
}

.home-hero-lead {
    max-width: 660px;
    margin: 24px 0 0;
    color: #475569;
    font-size: 18px;
    line-height: 1.85;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 32px;
}

.home-button-primary,
.home-button-secondary,
.home-button-secondary-dark,
.home-button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.home-button-primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand-blue), #2563eb);
    box-shadow: 0 16px 34px rgba(31, 95, 134, 0.24);
}

    .home-button-primary:hover {
        color: #ffffff;
        transform: translateY(-2px);
        background: linear-gradient(135deg, #174d6d, #1d4ed8);
        box-shadow: 0 20px 40px rgba(31, 95, 134, 0.30);
    }

.home-button-secondary {
    color: var(--brand-blue-dark);
    background: #ffffff;
    border: 1px solid rgba(31, 95, 134, 0.22);
    box-shadow: var(--brand-shadow-soft);
}

    .home-button-secondary:hover {
        color: var(--brand-blue);
        transform: translateY(-2px);
        box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
    }

.home-button-secondary-dark {
    color: #e0f2fe;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

    .home-button-secondary-dark:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.14);
        transform: translateY(-2px);
    }

.home-button-link {
    color: var(--brand-blue);
    padding-inline: 8px;
}

    .home-button-link:hover {
        color: #174d6d;
    }

.home-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

    .home-hero-tags span {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 13px;
        border-radius: 999px;
        color: var(--brand-blue-dark);
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(31, 95, 134, 0.18);
        font-size: 13px;
        font-weight: 750;
    }

.home-hero-copy,
.home-hero-visual {
    min-width: 0;
}

.home-hero-visual {
    width: 100%;
    max-width: 680px;
    justify-self: end;
}

    .home-visual-topbar span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

        .home-visual-topbar span:nth-child(1) {
            background: #ef4444;
        }

        .home-visual-topbar span:nth-child(2) {
            background: #f59e0b;
        }

        .home-visual-topbar span:nth-child(3) {
            background: #22c55e;
        }

    .home-visual-topbar strong {
        margin-left: 8px;
        font-size: 13px;
        letter-spacing: 0.04em;
    }

.home-section {
    padding: 76px 0;
    background: #ffffff;
}

.home-section-heading {
    max-width: 760px;
    margin: 0 auto 38px;
    text-align: center;
}

    .home-section-heading h2 {
        margin: 0;
        color: var(--text-main, #111827);
        font-size: clamp(30px, 3.2vw, 44px);
        line-height: 1.12;
        letter-spacing: -0.035em;
    }

    .home-section-heading p:not(.home-eyebrow) {
        margin: 16px 0 0;
        color: #4b5563;
        font-size: 17px;
        line-height: 1.75;
    }

.home-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.home-product-card {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    padding: 34px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(31, 95, 134, 0.14);
    box-shadow: var(--brand-shadow);
}

    .home-product-card::before {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        right: -80px;
        top: -90px;
        border-radius: 50%;
        opacity: 1;
        background: radial-gradient(circle, rgba(31, 95, 134, 0.22), transparent 68%);
    }

.home-product-card-comet::before {
    background: radial-gradient(circle, rgba(56, 189, 248, 0.20), transparent 68%);
}

.home-product-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--brand-blue-dark);
    background: #e8f4fb;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-product-card h3 {
    position: relative;
    margin: 22px 0 14px;
    color: var(--text-main, #111827);
    font-size: 28px;
    line-height: 1.18;
    letter-spacing: -0.025em;
}

.home-product-card p {
    position: relative;
    margin: 0;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.75;
}

.home-product-card ul {
    position: relative;
    display: grid;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.home-product-card li {
    position: relative;
    padding-left: 24px;
    color: #374151;
    line-height: 1.6;
}

    .home-product-card li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.65em;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--brand-blue);
        box-shadow: 0 0 0 4px rgba(31, 95, 134, 0.12);
    }

.home-product-card-comet li::before {
    background: var(--brand-sky);
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.14);
}

.home-card-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

    .home-card-actions a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 15px;
        border-radius: 999px;
        color: var(--brand-blue-dark);
        background: #f1f8fc;
        border: 1px solid rgba(31, 95, 134, 0.16);
        font-weight: 800;
        text-decoration: none;
    }

        .home-card-actions a:hover {
            color: var(--brand-blue);
            background: #e8f4fb;
        }


/* =========================================================
   Home Workflow - light version
   ========================================================= */

.home-workflow-section {
    position: relative;
    overflow: hidden;
    padding: 82px 0;
    background: radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.12), transparent 26rem), radial-gradient(circle at 86% 18%, rgba(31, 95, 134, 0.08), transparent 24rem), linear-gradient(180deg, #ffffff 0%, #f4f8fc 48%, #ffffff 100%);
    border-top: 1px solid rgba(31, 95, 134, 0.08);
    border-bottom: 1px solid rgba(31, 95, 134, 0.08);
}

.home-section-heading-light h2 {
    color: #0f172a;
}

.home-section-heading-light p:not(.home-eyebrow) {
    color: #475569;
}

.home-workflow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.home-workflow-line {
    position: absolute;
    left: 9%;
    right: 9%;
    top: 36px;
    height: 2px;
    overflow: hidden;
    background: rgba(31, 95, 134, 0.16);
}

.home-workflow-light {
    position: absolute;
    top: -3px;
    left: -40px;
    width: 38px;
    height: 8px;
    border-radius: 999px;
    background: #38bdf8;
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.85);
    animation: homeWorkflowLight 4s linear infinite;
}

.home-workflow article {
    position: relative;
    z-index: 1;
    padding: 24px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(31, 95, 134, 0.14);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

    .home-workflow article:hover {
        transform: translateY(-4px);
        border-color: rgba(31, 95, 134, 0.24);
        box-shadow: 0 22px 44px rgba(15, 23, 42, 0.11);
    }

    .home-workflow article span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        color: #ffffff;
        background: linear-gradient(135deg, #1f5f86, #38bdf8);
        box-shadow: 0 10px 22px rgba(31, 95, 134, 0.22);
        font-weight: 900;
    }

    .home-workflow article h3 {
        margin: 18px 0 8px;
        color: #0f172a;
        font-size: 20px;
    }

    .home-workflow article p {
        margin: 0;
        color: #475569;
        line-height: 1.65;
    }


/* =========================================================
   Home Capabilities / Notices
   ========================================================= */

.home-capability-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

    .home-capability-grid article {
        padding: 26px;
        border-radius: 24px;
        background: #f8fafc;
        border: 1px solid rgba(148, 163, 184, 0.18);
        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

        .home-capability-grid article:hover {
            transform: translateY(-4px);
            background: #ffffff;
            box-shadow: 0 18px 38px rgba(15, 23, 42, 0.09);
        }

    .home-capability-grid span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 48px;
        height: 34px;
        padding: 0 10px;
        border-radius: 12px;
        color: #075985;
        background: #e0f2fe;
        font-size: 13px;
        font-weight: 900;
    }

    .home-capability-grid h3 {
        margin: 18px 0 8px;
        color: var(--text-main, #111827);
        font-size: 21px;
    }

    .home-capability-grid p {
        margin: 0;
        color: #4b5563;
        line-height: 1.7;
    }

.home-notices-section {
    padding-bottom: 88px;
    background: radial-gradient(circle at 12% 0%, rgba(56, 189, 248, 0.08), transparent 24rem), linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.home-notice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.home-notice-card {
    display: flex;
    flex-direction: column;
    min-height: 260px;
    padding: 26px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
}

.home-notice-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

    .home-notice-meta span {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        color: #075985;
        background: #e0f2fe;
        font-size: 12px;
        font-weight: 800;
    }

.home-notice-card h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.35;
}

    .home-notice-card h3 a {
        color: var(--text-main, #111827);
        text-decoration: none;
    }

        .home-notice-card h3 a:hover {
            color: #0070cc;
        }

.home-notice-card p {
    margin: 14px 0 0;
    color: #4b5563;
    line-height: 1.7;
}

.home-read-more {
    margin-top: auto;
    padding-top: 22px;
    color: #0070cc;
    font-weight: 900;
    text-decoration: none;
}

    .home-read-more:hover {
        color: #004f91;
    }

.home-empty-notice {
    padding: 28px;
    border-radius: 20px;
    text-align: center;
    color: #4b5563;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.home-center-action {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.home-final-cta,
.home-final-cta-inner,
.home-final-actions {
    display: none !important;
}


/* =========================================================
   Discovery V8
   Front-right three-quarter vehicle / physical ECU locations
   ========================================================= */

.discovery-v8 {
    --d8-text: #e6f3ff;
    --d8-muted: #91aec3;
    --d8-ok: #55dfb3;
    --d8-fault: #ff7f8b;
    --d8-warn: #f7c56c;
    --d8-cyan: #65d9ff;
    width: 100%;
    min-width: 0;
}

    .discovery-v8,
    .discovery-v8 * {
        box-sizing: border-box;
    }

        /* 卡片 */

        .discovery-v8 .d8-card {
            width: 100%;
            overflow: hidden;
            border-radius: 25px;
            background: radial-gradient( ellipse at 42% 30%, rgba(37, 98, 132, .28), transparent 62% ), linear-gradient( 145deg, #10283d 0%, #0b1d30 52%, #071320 100% );
            border: 1px solid rgba(164, 209, 235, .18);
            box-shadow: 0 28px 65px rgba(5, 15, 29, .24), inset 0 1px 0 rgba(224, 244, 255, .04);
        }

        /* 顶栏 */

        .discovery-v8 .d8-topbar {
            display: flex;
            align-items: center;
            gap: 16px;
            min-height: 61px;
            padding: 15px 22px;
            background: rgba(6, 16, 29, .87);
            border-bottom: 1px solid rgba(143, 198, 228, .13);
            color: var(--d8-text);
            font-family: Inter, "Segoe UI", Arial, sans-serif;
        }

            .discovery-v8 .d8-topbar strong {
                min-width: 0;
                font-size: 14px;
                font-weight: 650;
                letter-spacing: .2px;
            }

        .discovery-v8 .d8-window-dots {
            display: flex;
            gap: 7px;
            flex-shrink: 0;
        }

            .discovery-v8 .d8-window-dots i {
                display: block;
                width: 10px;
                height: 10px;
                border-radius: 50%;
            }

                .discovery-v8 .d8-window-dots i:nth-child(1) {
                    background: #fb6271;
                }

                .discovery-v8 .d8-window-dots i:nth-child(2) {
                    background: #f5bc56;
                }

                .discovery-v8 .d8-window-dots i:nth-child(3) {
                    background: #3edda7;
                }

        .discovery-v8 .d8-demo-badge {
            margin-left: auto;
            flex-shrink: 0;
            padding: 4px 7px;
            border-radius: 5px;
            color: #a6bdd0;
            border: 1px solid rgba(166, 189, 208, .22);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 1px;
        }

        /* SVG 展示区 */

        .discovery-v8 .d8-stage {
            position: relative;
            width: 100%;
            padding: 12px 8px 0;
            overflow-x: hidden;
        }

        .discovery-v8 .d8-svg {
            display: block;
            width: 100%;
            min-width: 0;
            height: auto;
            max-width: none;
            min-height: 0;
            overflow: hidden;
            font-family: Inter, "Segoe UI", Arial, sans-serif;
        }



        .discovery-v8 .d8-view-caption {
            fill: #94b2c7;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 1.4px;
        }

        .discovery-v8 .d8-summary rect {
            fill: #081726;
            fill-opacity: .9;
            stroke: #668da7;
            stroke-opacity: .3;
        }

        .discovery-v8 .d8-summary text {
            fill: #cfe1ee;
            font-size: 12px;
            font-weight: 600;
        }

        .discovery-v8 .d8-fill-ok {
            fill: var(--d8-ok);
        }

        .discovery-v8 .d8-fill-fault {
            fill: var(--d8-fault);
        }

        .discovery-v8 .d8-fill-warn {
            fill: var(--d8-warn);
        }

        /* 车辆 */

        /*
   不对整个车身添加强光晕：
   保留车顶、C柱、灯组、轮毂的边缘辨识度。
*/
        .discovery-v8 .d8-vehicle {
            stroke-linejoin: round;
            stroke-linecap: round;
        }

        .discovery-v8 .d8-headlight {
            fill: none;
            stroke: #e2f9ff;
            stroke-width: 6;
            stroke-linecap: round;
            stroke-linejoin: round;
            filter: url(#d8-glow);
        }

        .discovery-v8 .d8-scan-band {
            animation: d8ScanSweep 7s linear infinite;
        }

        /* 示意网络：
   线路只聚集在相关物理区域，不再从车身中心发散到四周。
*/

        .discovery-v8 .d8-network {
            fill: none;
            stroke: #64d6ff;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round;
            opacity: .66;
            pointer-events: none;
        }

            .discovery-v8 .d8-network use {
                stroke-dasharray: 5 8;
                animation: d8NetworkFlow 2.4s linear infinite;
            }

            .discovery-v8 .d8-network .d8-hidden-route {
                opacity: .5;
                stroke-dasharray: 3 9;
            }

        .discovery-v8 .d8-packets {
            fill: #c2f5ff;
            filter: url(#d8-glow);
            pointer-events: none;
        }

        /* 标签引线 */

        .discovery-v8 .d8-leaders {
            fill: none;
            stroke: #9bbdd0;
            stroke-width: 1.25;
            stroke-opacity: .72;
            stroke-linecap: round;
            stroke-linejoin: round;
            pointer-events: none;
        }

        .discovery-v8 .d8-hidden-leader {
            stroke-dasharray: 5 5;
        }

        /* 状态颜色：同一状态变量供标签和车内芯片使用 */

        .discovery-v8 .d8-ok {
            --d8-state: var(--d8-ok);
            --d8-state-bg: #0e2a2c;
        }

        .discovery-v8 .d8-fault {
            --d8-state: var(--d8-fault);
            --d8-state-bg: #302030;
        }

        .discovery-v8 .d8-warn {
            --d8-state: var(--d8-warn);
            --d8-state-bg: #302a22;
        }

        /* 车内位置锚点 */

        .discovery-v8 .d8-anchor rect {
            fill: var(--d8-state-bg);
            stroke: var(--d8-state);
            stroke-width: 1.6;
        }

        .discovery-v8 .d8-anchor circle {
            fill: var(--d8-state);
        }

        .discovery-v8 .d8-hidden-anchor rect {
            stroke-dasharray: 3 2;
        }

        .discovery-v8 .d8-integrated-shell {
            fill: #0b1c2a;
            stroke: #b0d8e9;
            stroke-width: 1.5;
        }

        .discovery-v8 .d8-integrated-anchor text {
            fill: #ecf8ff;
            text-anchor: middle;
            font-size: 8px;
            font-weight: 700;
        }

        /* 外部标签：
   标签不压在车灯、C柱、中网或轮毂上。
*/

        .discovery-v8 .d8-label > rect {
            fill: var(--d8-state-bg);
            fill-opacity: .96;
            stroke: var(--d8-state);
            stroke-width: 1.2;
            stroke-opacity: .7;
        }

        .discovery-v8 .d8-status {
            fill: var(--d8-state);
        }

        .discovery-v8 .d8-label-name {
            fill: #f0f7ff;
            font-size: 17px;
            font-weight: 750;
            letter-spacing: .6px;
        }

        .discovery-v8 .d8-label-sub {
            fill: #abc2d3;
            font-size: 10.5px;
            font-weight: 400;
            letter-spacing: 0;
        }

        .discovery-v8 .d8-combined-box {
            fill: #0b2132;
            fill-opacity: .97;
            stroke: #8cbdd4;
            stroke-width: 1.3;
            stroke-opacity: .85;
        }

        /* 故障只让小状态灯呼吸，不让整个标签闪烁 */

        .discovery-v8 .d8-fault .d8-status {
            animation: d8StatusPulse 1.8s ease-in-out infinite;
        }

        .discovery-v8 .d8-warn .d8-status {
            animation: d8StatusPulse 2.7s ease-in-out infinite;
        }

        /* 图例 */

        .discovery-v8 .d8-footer-legend path {
            fill: none;
            stroke: #9bbdd0;
            stroke-width: 1.25;
        }

        .discovery-v8 .d8-footer-legend text {
            fill: #98b3c7;
            font-size: 10.5px;
        }

        .discovery-v8 .d8-disclaimer {
            fill: #7f9db2;
            font-size: 10px;
            letter-spacing: .35px;
        }

        /* 日志：正常文档流，不使用 position:absolute */

        .discovery-v8 .d8-log {
            position: relative;
            margin: 0 22px 20px;
            padding: 14px 16px;
            background: rgba(4, 14, 24, .67);
            border: 1px solid rgba(126, 180, 210, .15);
            border-radius: 12px;
            color: #bbd1e1;
            font-family: "Cascadia Code", Consolas, monospace;
            font-size: 11px;
        }

        .discovery-v8 .d8-log-heading {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 11px;
        }

            .discovery-v8 .d8-log-heading strong {
                color: #d7e8f4;
                font-size: 11px;
                font-weight: 600;
            }

        .discovery-v8 .d8-live-dot {
            width: 6px;
            height: 6px;
            flex-shrink: 0;
            border-radius: 50%;
            background: var(--d8-cyan);
            box-shadow: 0 0 9px rgba(101, 217, 255, .45);
            animation: d8StatusPulse 2s ease-in-out infinite;
        }

        .discovery-v8 .d8-log-caption {
            margin-left: auto;
            color: #7694aa;
            font-size: 10px;
        }

        .discovery-v8 .d8-log-lines {
            display: grid;
            gap: 7px;
        }

            .discovery-v8 .d8-log-lines > div {
                display: grid;
                grid-template-columns: 44px minmax(0, 1fr) 44px;
                align-items: start;
                gap: 10px;
                line-height: 1.5;
            }

        .discovery-v8 .d8-log-time {
            color: #66869f;
        }

        .discovery-v8 .d8-log-lines b {
            justify-self: end;
            font-size: 10px;
            font-weight: 600;
        }

        .discovery-v8 .d8-log-ok {
            color: var(--d8-ok);
        }

        .discovery-v8 .d8-log-fault {
            color: var(--d8-fault);
        }

/* 动画 */

@keyframes d8NetworkFlow {
    from {
        stroke-dashoffset: 26;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes d8StatusPulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .42;
    }
}

@keyframes d8ScanSweep {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    8% {
        opacity: .08;
    }

    82% {
        opacity: .08;
    }

    95%, 100% {
        transform: translateX(1250px);
        opacity: 0;
    }
}

/* 小屏：
   保留最小绘图宽度，允许横向查看，
   避免把所有模块说明压缩成不可读的小字。
*/

@media (max-width: 600px) {
    .discovery-v8 .d8-card {
        border-radius: 18px;
    }

    .discovery-v8 .d8-topbar {
        min-height: 54px;
        padding: 13px 14px;
        gap: 10px;
    }

        .discovery-v8 .d8-topbar strong {
            font-size: 11px;
        }

    .discovery-v8 .d8-window-dots {
        gap: 5px;
    }

        .discovery-v8 .d8-window-dots i {
            width: 7px;
            height: 7px;
        }

    .discovery-v8 .d8-log {
        margin: 8px 12px 14px;
        padding: 12px;
        font-size: 10px;
    }

    .discovery-v8 .d8-log-lines > div {
        grid-template-columns: 35px minmax(0, 1fr) 38px;
        gap: 6px;
    }
}


/* 尊重减少动态效果设置：
   CSS 动画关闭；SMIL 数据包隐藏。
*/

@media (prefers-reduced-motion: reduce) {
    .discovery-v8 .d8-network use,
    .discovery-v8 .d8-status,
    .discovery-v8 .d8-live-dot,
    .discovery-v8 .d8-scan-band {
        animation: none !important;
    }

    .discovery-v8 .d8-packets,
    .discovery-v8 .d8-scan-band {
        display: none;
    }
}


/* =========================================================
   Footer
   ========================================================= */

.site-footer {
    flex-shrink: 0;
    margin-top: 0;
    padding: 48px 0 28px;
    color: #cbd5e1;
    border-top: 1px solid rgba(186, 230, 253, 0.12);
    background: radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.10), transparent 24rem), linear-gradient(135deg, #0b1626 0%, #07111f 100%);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr;
    gap: 36px;
}

.footer-column h2,
.footer-column h3 {
    margin: 0 0 16px;
    color: #ffffff;
}

.footer-column h2 {
    font-size: 24px;
    font-weight: 800;
}

.footer-column h3 {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.footer-column p {
    margin: 0;
    color: #cbd5e1;
    line-height: 1.7;
}

.footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-column li {
    margin-bottom: 10px;
}

.footer-column a {
    color: #cbd5e1;
    text-decoration: none;
}

    .footer-column a:hover {
        color: #ffffff;
        text-decoration: underline;
    }

.footer-bottom {
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.7;
}

    .footer-bottom p {
        margin: 0 0 8px;
    }


/* =========================================================
   Animations
   ========================================================= */

@keyframes homeWorkflowLight {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(1200px);
    }
}



/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1280px) {
    .home-hero-inner {
        width: min(1180px, calc(100% - 32px));
        max-width: 1180px;
        grid-template-columns: minmax(390px, 1fr) minmax(560px, 640px);
        gap: 36px;
    }

    .home-hero-visual {
        max-width: 640px;
    }
}

@media (max-width: 1100px) {
    .home-hero-inner {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .home-hero-copy {
        max-width: 820px;
    }

        .home-hero-copy h1 {
            max-width: 820px;
            font-size: clamp(38px, 6vw, 56px);
        }

    .home-hero-lead {
        max-width: 760px;
    }

    .home-hero-visual {
        width: 100%;
        max-width: 760px;
        justify-self: center;
    }

    .discovery-v8 .d8-stage {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scrollbar-color: #35566d #091827;
    }

    .discovery-v8 .d8-svg {
        min-width: 720px;
    }

    .home-workflow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-workflow-line {
        display: none;
    }

}

@media (max-width: 992px) {
    .notice-grid {
        grid-template-columns: 1fr 1fr;
    }

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

    .ccf-tool-grid,
    .ccf-upload-grid {
        grid-template-columns: 1fr;
    }

    .ccf-panel-header,
    .ccf-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .ccf-session-status {
        width: fit-content;
    }

    .ccf-edit-bar,
    .ccf-selected-editor {
        grid-template-columns: 1fr;
    }

    .ccf-setvalue-wrap {
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .notice-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .home-hero {
        padding: 58px 0 56px;
    }

    .home-product-grid,
    .home-capability-grid,
    .home-notice-grid {
        grid-template-columns: 1fr;
    }

    .home-product-card {
        min-height: auto;
        padding: 26px;
    }

    .home-workflow {
        grid-template-columns: 1fr;
    }

    .home-workflow-section {
        padding: 62px 0;
    }

    .home-notices-section {
        padding-bottom: 68px;
    }

}

@media (max-width: 768px) {
    .renewal-page,
    .buy-page,
    .download-page,
    .support-page {
        width: calc(100% - 24px);
        padding-top: 38px;
        padding-bottom: 38px;
    }

        .renewal-form,
        .renewal-notice,
        .renewal-result,
        .download-form,
        .download-result,
        .support-page form {
            padding: 20px;
            border-radius: 16px;
        }

        .buy-page .buy-quantity-input {
            max-width: 100%;
        }

        .support-page .input-group {
            display: block;
        }

            .support-page .input-group .form-control {
                width: 100%;
                border-radius: 11px;
                margin-bottom: 10px;
            }

            .support-page .input-group .btn-send-code {
                width: 100%;
                border-radius: 11px;
            }
}

@media (max-width: 640px) {
    .container {
        width: calc(100% - 24px);
    }

    .home-hero-inner {
        width: calc(100% - 24px);
        gap: 32px;
    }

    .discovery-v8 .d8-svg {
        min-width: 700px;
    }

    .section {
        padding: 40px 0;
    }

    .page-hero {
        padding: 56px 0 40px;
    }

    h1 {
        font-size: clamp(32px, 9vw, 44px);
    }

    .lead {
        font-size: 16px;
    }

    .article-content {
        padding: 20px;
    }

        .article-content .imc-hero h1 {
            font-size: 28px;
        }

        .article-content .imc-card {
            padding: 20px;
        }

    .notice-video-intro {
        font-size: 15px;
    }

    .notice-video-box {
        padding: 6px;
        border-radius: 16px;
        margin: 24px 0;
    }

    .notice-video-frame {
        border-radius: 12px;
    }

    .notice-video-text {
        font-size: 15px;
    }

        .notice-video-text h2 {
            font-size: 21px;
        }

    .renewal-countdown,
    .download-countdown {
        display: block;
        margin-left: 0;
        margin-top: 0.6rem;
    }

    .download-file-label {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }

    .site-footer {
        padding: 38px 0 24px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 560px) {
    .home-hero-copy h1 {
        font-size: 38px;
    }

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

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

    .home-button-primary,
    .home-button-secondary,
    .home-button-secondary-dark,
    .home-button-link {
        width: 100%;
    }

    .home-section {
        padding: 58px 0;
    }

    .home-visual-topbar strong {
        font-size: 12px;
    }

}
.payment-result-actions {
    margin-top: 24px;
}
.payment-result-actions {
    margin-top: 24px;
}

.payment-result-actions .home-button-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
}