/* =========================
   基本設定
========================= */

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: #05070d;
    color: #ffffff;
    font-family: Arial, sans-serif;
}


/* =========================
   ヘッダー
========================= */

.header {
    height: 80px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 60px;

    border-bottom: 1px solid #12334a;

    background-color: rgba(5, 7, 13, 0.95);
}


/* ロゴ */

.logo {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 3px;

    color: #ffffff;
}

.logo span {
    color: #00e5ff;
}


/* ナビゲーション */

nav {
    display: flex;
    gap: 35px;
}

nav a {
    color: #8da2b5;

    text-decoration: none;

    font-size: 13px;
    font-weight: bold;

    letter-spacing: 2px;

    transition: 0.3s;
}

nav a:hover {
    color: #00e5ff;

    text-shadow:
        0 0 10px #00e5ff;
}


/* =========================
   メインビジュアル
========================= */

.hero {

    min-height: 700px;

    display: flex;
    align-items: center;

    padding: 80px 10%;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(0, 229, 255, 0.12),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #05070d,
            #08131f
        );
}


/* 背景の光 */

.hero::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -150px;
    top: 100px;

    border: 1px solid #00e5ff;

    transform: rotate(45deg);

    opacity: 0.15;
}


/* Hero文字 */

.hero-content {
    max-width: 800px;

    position: relative;

    z-index: 2;
}


.subtitle {

    color: #00e5ff;

    font-size: 14px;

    letter-spacing: 4px;

    margin-bottom: 25px;
}


.hero h1 {

    font-size: clamp(50px, 8vw, 110px);

    line-height: 0.9;

    letter-spacing: -3px;

    margin-bottom: 35px;

    text-shadow:
        0 0 20px rgba(0, 229, 255, 0.15);
}


.hero h1 span {

    color: #00e5ff;

    text-shadow:
        0 0 15px #00e5ff,
        0 0 40px rgba(0, 229, 255, 0.5);
}


.description {

    max-width: 600px;

    color: #91a5b5;

    line-height: 2;

    margin-bottom: 40px;
}


/* =========================
   ボタン
========================= */

.check-button {

    display: inline-block;

    padding: 18px 30px;

    border: 1px solid #00e5ff;

    color: #00e5ff;

    text-decoration: none;

    font-weight: bold;

    letter-spacing: 2px;

    background-color: rgba(0, 229, 255, 0.05);

    transition: 0.3s;
}


.check-button span {

    margin-left: 20px;

    font-size: 20px;
}


.check-button:hover {

    background-color: #00e5ff;

    color: #05070d;

    box-shadow:
        0 0 15px #00e5ff,
        0 0 40px rgba(0, 229, 255, 0.5);
}


/* =========================
   紹介
========================= */

.introduction {

    max-width: 1000px;

    margin: auto;

    padding: 120px 30px;
}


.section-label {

    color: #00e5ff;

    font-size: 13px;

    letter-spacing: 3px;

    margin-bottom: 25px;
}


.introduction h2 {

    font-size: 60px;

    line-height: 1;

    margin-bottom: 30px;
}


.introduction h2 span {

    color: #00e5ff;
}


.introduction > p:last-child {

    max-width: 650px;

    color: #91a5b5;

    line-height: 2;
}


/* =========================
   特徴カード
========================= */

.features {

    display: grid;

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

    gap: 20px;

    max-width: 1200px;

    margin: auto;

    padding: 0 30px 120px;
}


.feature-card {

    padding: 35px;

    background-color: #080e17;

    border: 1px solid #12334a;

    transition: 0.3s;
}


.feature-card:hover {

    transform: translateY(-8px);

    border-color: #00e5ff;

    box-shadow:
        0 0 20px rgba(0, 229, 255, 0.15);
}


.feature-number {

    color: #00e5ff;

    font-size: 14px;

    letter-spacing: 2px;

    margin-bottom: 30px;
}


.feature-card h3 {

    font-size: 20px;

    letter-spacing: 2px;

    margin-bottom: 20px;
}


.feature-card p {

    color: #718596;

    line-height: 1.8;
}


/* =========================
   フッター
========================= */

footer {

    padding: 30px;

    text-align: center;

    border-top: 1px solid #12334a;

    color: #536675;

    font-size: 12px;

    letter-spacing: 2px;
}


/* =========================
   スマートフォン対応
========================= */

@media (max-width: 800px) {

    .header {

        padding: 0 20px;
    }

    nav {

        gap: 12px;
    }

    nav a {

        font-size: 10px;
    }

    .hero {

        padding: 60px 30px;
    }

    .features {

        grid-template-columns: 1fr;
    }

    .introduction h2 {

        font-size: 45px;
    }

}


/* =========================
   PC CHECK PAGE
========================= */

.check-page {

    max-width: 1100px;

    margin: auto;

    padding: 100px 30px 120px;
}


.check-header {

    margin-bottom: 70px;
}


.check-header h1 {

    font-size: clamp(50px, 8vw, 90px);

    line-height: 1;

    margin-bottom: 25px;

    letter-spacing: -2px;
}


.check-header h1 span {

    color: #00e5ff;

    text-shadow:
        0 0 15px #00e5ff,
        0 0 40px rgba(0, 229, 255, 0.5);
}


.check-header > p:last-child {

    color: #718596;

    line-height: 2;
}


/* =========================
   パーツ選択
========================= */

.parts-selector {

    display: grid;

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

    gap: 20px;
}


.part-item {

    padding: 25px;

    background-color: #080e17;

    border: 1px solid #12334a;

    transition: 0.3s;
}


.part-item:hover {

    border-color: #00e5ff;

    box-shadow:
        0 0 20px rgba(0, 229, 255, 0.1);
}


.part-item label {

    display: block;

    margin-bottom: 15px;

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 2px;
}


.part-item label span {

    color: #00e5ff;

    margin-right: 12px;

    font-size: 12px;
}


/* =========================
   プルダウン
========================= */

.part-item select {

    width: 100%;

    padding: 16px;

    background-color: #05070d;

    border: 1px solid #23445a;

    color: #ffffff;

    font-size: 14px;

    outline: none;

    cursor: pointer;
}


.part-item select:focus {

    border-color: #00e5ff;

    box-shadow:
        0 0 10px rgba(0, 229, 255, 0.2);
}


/* =========================
   チェックボタン
========================= */

.check-action {

    text-align: center;

    margin-top: 60px;
}


#check-button {

    padding: 20px 40px;

    border: 1px solid #00e5ff;

    background-color: rgba(0, 229, 255, 0.05);

    color: #00e5ff;

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 2px;

    cursor: pointer;

    transition: 0.3s;
}


#check-button span {

    margin-left: 20px;

    font-size: 20px;
}


#check-button:hover {

    background-color: #00e5ff;

    color: #05070d;

    box-shadow:
        0 0 15px #00e5ff,
        0 0 40px rgba(0, 229, 255, 0.5);
}


/* =========================
   結果表示
========================= */

.check-result {

    margin-top: 70px;

    padding: 40px;

    background-color: #080e17;

    border: 1px solid #12334a;

    text-align: center;
}


.result-label {

    color: #00e5ff;

    font-size: 12px;

    letter-spacing: 3px;

    margin-bottom: 20px;
}


.check-result h2 {

    font-size: 40px;

    color: #00e5ff;

    text-shadow:
        0 0 15px #00e5ff;

    margin-bottom: 15px;
}


.check-result p:last-child {

    color: #718596;
}


/* =========================
   スマートフォン
========================= */

@media (max-width: 800px) {

    .parts-selector {

        grid-template-columns: 1fr;
    }

}

/* =========================
   Compatibility Result
========================= */

.compatibility-list {

    margin-top: 35px;

    display: grid;

    gap: 15px;

    text-align: left;
}


.compatibility-ok {

    padding: 20px;

    border: 1px solid #00e5ff;

    background-color:
        rgba(0, 229, 255, 0.05);

    color: #00e5ff;

    line-height: 1.8;

}


.compatibility-ng {

    padding: 20px;

    border: 1px solid #ff1744;

    background-color:
        rgba(255, 23, 68, 0.05);

    color: #ff1744;

    line-height: 1.8;

}

/* =========================
   Alternative Parts
========================= */

.alternative-box {

    margin-top: 20px;

    padding: 20px;

    border: 1px solid #00e5ff;

    background:
        rgba(0, 229, 255, 0.04);

}


.alternative-box h3 {

    margin-top: 0;

    color: #00e5ff;

    letter-spacing: 2px;

}


.alternative-item {

    margin-top: 12px;

    padding: 15px;

    border-left: 3px solid #00e5ff;

    background:
        rgba(0, 229, 255, 0.06);

}


.alternative-item strong {

    color: #ffffff;

}

/* =========================
   Priority Selection
========================= */

.priority-section {

    margin-top: 30px;

    padding: 25px;

    border: 1px solid #00e5ff;

    background:
        rgba(0, 229, 255, 0.04);

}


.priority-section h3 {

    margin-top: 0;

    color: #00e5ff;

    letter-spacing: 2px;

}


.priority-section label {

    display: block;

    margin: 12px 0;

    padding: 12px;

    cursor: pointer;

    border: 1px solid
        rgba(0, 229, 255, 0.25);

    transition:
        0.2s;

}


.priority-section label:hover {

    background:
        rgba(0, 229, 255, 0.08);

    border-color:
        #00e5ff;

}


.priority-section input {

    margin-right: 10px;

}

.priority-section {
    margin-top: 30px;
    padding: 25px;
    border: 1px solid rgba(0, 234, 255, 0.35);
    background: rgba(0, 20, 35, 0.65);
}


.priority-section h3 {
    color: #ffffff;
    margin-bottom: 12px;
}


.priority-section > p {
    color: #b8d7e8;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
}


.priority-section label {
    display: block;
    color: #ffffff;
    font-size: 17px;
    margin: 15px 0 5px;
    cursor: pointer;
}


.priority-section label input {
    margin-right: 8px;
}


.priority-section label + p {
    color: #b8d7e8;
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 12px 28px;
}

/* ========================================
   交換パーツ選択
======================================== */

.replacement-issue {
    margin-top: 18px;
    padding: 18px 20px;

    background: #080e17;

    border: 1px solid rgba(0, 229, 255, 0.18);
    border-left: 3px solid #00e5ff;

    border-radius: 6px;
}


/* エラー名 */
.replacement-issue h4 {
    margin: 0 0 14px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 600;

    letter-spacing: 0.04em;
}


/* 選択肢 */
.replacement-issue label {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-top: 8px;
    padding: 9px 12px;

    color: #b9c4d0;

    font-size: 14px;

    cursor: pointer;

    border-radius: 4px;

    transition: 0.2s;
}


/* マウスを乗せた時 */
.replacement-issue label:hover {
    color: #ffffff;

    background: rgba(0, 229, 255, 0.06);
}


/* ラジオボタン */
.replacement-issue input[type="radio"] {
    accent-color: #00e5ff;

    width: 16px;
    height: 16px;

    cursor: pointer;
}


/* 選択されている項目 */
.replacement-issue label:has(
    input[type="radio"]:checked
) {
    color: #00e5ff;

    background: rgba(0, 229, 255, 0.08);
}


/* 次へボタン */
#replacement-next-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 24px;
    padding: 14px 28px;

    background: transparent;

    color: #00e5ff;

    border: 1px solid #00e5ff;

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

    letter-spacing: 0.08em;

    cursor: pointer;

    transition: 0.25s;

    box-shadow:
        0 0 12px rgba(0, 229, 255, 0.08);
}


/* マウスを乗せた時 */
#replacement-next-button:hover {
    background: #00e5ff;

    color: #05070d;

    box-shadow:
        0 0 18px rgba(0, 229, 255, 0.35);
}


/* クリック時 */
#replacement-next-button:active {
    transform: translateY(1px);
}


/* 未選択エラー */
#replacement-error-message {
    margin-top: 12px;

    color: #ff5c73;

    font-size: 13px;
}

/* ========================================
   おすすめ表示エリア
======================================== */

.recommendation-result {
    margin-top: 32px;
    padding: 28px;

    background:
        linear-gradient(
            180deg,
            rgba(0, 229, 255, 0.06),
            rgba(8, 14, 23, 0.96)
        );

    border: 1px solid rgba(0, 229, 255, 0.5);

    box-shadow:
        0 0 25px rgba(0, 229, 255, 0.12),
        inset 0 0 20px rgba(0, 229, 255, 0.03);

    position: relative;
}


/* 上部のネオンライン */
.recommendation-result::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background: #00e5ff;

    box-shadow:
        0 0 12px rgba(0, 229, 255, 0.8);
}


/* ========================================
   おすすめ見出し
======================================== */

.recommendation-header {
    margin-bottom: 26px;
}


.recommendation-header h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 22px;
    font-weight: 700;

    letter-spacing: 0.05em;
}


.recommendation-header h3::after {
    content: "RECOMMENDED";

    display: inline-block;

    margin-left: 12px;
    padding: 4px 8px;

    color: #05070d;
    background: #00e5ff;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.1em;

    vertical-align: middle;
}


.recommendation-header p {
    margin: 0;

    color: #9aa8b6;

    font-size: 14px;
}


/* ========================================
   おすすめグリッド
======================================== */

.recommendation-grid {
    display: grid;

    gap: 20px;
}


/* ========================================
   パーツカテゴリー
======================================== */

.recommendation-result .alternative-box {
    padding: 20px;

    background: rgba(5, 7, 13, 0.85);

    border: 1px solid rgba(0, 229, 255, 0.22);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.22);
}


.recommendation-result .alternative-box > h3 {
    margin: 0 0 16px;

    padding-bottom: 12px;

    color: #00e5ff;

    font-size: 17px;
    font-weight: 600;

    border-bottom:
        1px solid rgba(0, 229, 255, 0.15);
}


/* ========================================
   商品候補カード
======================================== */

.recommendation-result .alternative-item {
    margin-top: 12px;
    padding: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(15, 24, 36, 0.95),
            rgba(8, 14, 23, 0.95)
        );

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-left: 3px solid #00e5ff;

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


/* 商品カード hover */
.recommendation-result .alternative-item:hover {
    transform: translateY(-2px);

    border-color:
        rgba(0, 229, 255, 0.5);

    box-shadow:
        0 8px 22px rgba(0, 229, 255, 0.08);
}


/* 商品名 */
.recommendation-result .alternative-item h4 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 600;

    line-height: 1.5;
}


/* 商品情報 */
.recommendation-result .alternative-item p {
    margin: 6px 0;

    color: #aeb8c4;

    font-size: 13px;

    line-height: 1.6;
}


/* ========================================
   スマートフォン
======================================== */

@media (
    max-width: 768px
) {

    .recommendation-result {
        padding: 20px;
    }


    .recommendation-header h3 {
        font-size: 19px;
    }


    .recommendation-header h3::after {
        display: block;

        width: fit-content;

        margin:
            8px 0 0;
    }


    .recommendation-result .alternative-box {
        padding: 16px;
    }

}

/* ========================================
   購入サイトボタン
======================================== */

.purchase-button {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    margin-top: 18px;
    padding: 13px 18px;

    background: #00e5ff;

    color: #05070d;

    border: 1px solid #00e5ff;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.2s,
        color 0.2s,
        box-shadow 0.2s,
        transform 0.2s;
}


/* hover */
.purchase-button:hover {
    background: transparent;

    color: #00e5ff;

    box-shadow:
        0 0 18px rgba(0, 229, 255, 0.2);

    transform: translateY(-1px);
}


/* クリック時 */
.purchase-button:active {
    transform: translateY(1px);
}

/* ========================================
   Product Master Selector v1
======================================== */

.part-helper {
    margin: 0 0 12px;
    color: #7f93a5;
    font-size: 12px;
    line-height: 1.65;
}

.manufacturer-select {
    margin-bottom: 10px;
}

.product-select:disabled,
.manufacturer-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.compatibility-review {
    padding: 20px;
    border: 1px solid #ffd54f;
    border-left: 3px solid #ffd54f;
    background-color: rgba(255, 213, 79, 0.05);
    color: #ffd54f;
    line-height: 1.8;
}

.compatibility-review a {
    color: #ffd54f;
    text-decoration: underline;
}

.recommendation-guidance {
    margin-top: 12px;
    padding: 16px;
    border-left: 3px solid #ffd54f;
    background: rgba(255, 213, 79, 0.06);
}

.recommendation-guidance p {
    margin: 6px 0;
    color: #d7c785 !important;
}

@media (max-width: 800px) {
    .part-helper {
        font-size: 11px;
    }
}


/* ========================================
   Product search / autocomplete v3.1
======================================== */

.product-select-hidden {
    display: none !important;
}

.product-search-wrap {
    position: relative;
}

.product-search-input {
    width: 100%;
    padding: 16px;
    background-color: #05070d;
    border: 1px solid #23445a;
    color: #ffffff;
    font-size: 14px;
    outline: none;
}

.product-search-input:focus {
    border-color: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}

.product-search-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.product-search-suggestions {
    position: absolute;
    z-index: 2000;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 320px;
    overflow-y: auto;
    background: #080e17;
    border: 1px solid #23445a;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

.product-search-suggestion {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: transparent;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
}

.product-search-suggestion:last-child {
    border-bottom: 0;
}

.product-search-suggestion:hover,
.product-search-suggestion:focus {
    background: rgba(0,229,255,0.08);
    outline: none;
}

.product-search-suggestion strong {
    display: block;
    line-height: 1.45;
}

.product-search-suggestion small {
    display: block;
    margin-top: 4px;
    color: #8da2b5;
    line-height: 1.4;
}

.product-search-suggestion.unknown {
    color: #ffd54f;
}

.review-build-recommendation {
    margin-top: 30px;
    padding: 26px;
    border: 1px solid rgba(0, 229, 255, 0.5);
    background: rgba(0, 229, 255, 0.04);
    text-align: left;
}

.review-build-recommendation h3 {
    margin-bottom: 10px;
    color: #00e5ff;
}

.review-build-note {
    margin-bottom: 20px;
    color: #b8d7e8;
    line-height: 1.7;
}

.review-build-grid {
    display: grid;
    gap: 12px;
}

.review-build-part {
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 3px solid #00e5ff;
    background: rgba(5,7,13,0.8);
}

.review-build-part h4 {
    margin: 0 0 8px;
}

.review-build-part p {
    margin: 5px 0;
    color: #aeb8c4;
    line-height: 1.6;
}

.review-build-part .changed-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    font-size: 11px;
    color: #05070d;
    background: #ffd54f;
}

@media (max-width: 800px) {
    .product-search-suggestions {
        max-height: 260px;
    }
}


/* ========================================
   Compatibility compact summary v3.2
======================================== */

.compatibility-status-message {
    margin-top: 8px;
    line-height: 1.7;
}

.compatibility-summary-box,
.compatibility-fix-summary {
    margin-top: 24px;
    padding: 20px;
    text-align: left;
    border: 1px solid rgba(0, 229, 255, 0.24);
    background: rgba(5, 7, 13, 0.72);
}

.compatibility-summary-box h3,
.compatibility-fix-summary h3 {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 17px;
}

.compatibility-summary-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
    line-height: 1.55;
    color: #c6d1da;
}

.compatibility-summary-item.ok {
    color: #00ff88;
}

.compatibility-summary-item.ng {
    color: #ff5c73;
}

.compatibility-summary-item.review {
    color: #ffd54f;
}

.compatibility-summary-mark {
    width: 18px;
    flex: 0 0 18px;
    font-weight: 700;
}

.compatibility-details {
    margin-top: 20px;
    text-align: left;
}

.compatibility-details > summary {
    display: inline-block;
    cursor: pointer;
    color: #8da2b5;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.compatibility-details[open] > summary {
    margin-bottom: 8px;
}

.compatibility-fix-summary p {
    margin: 0;
    color: #b8d7e8;
    line-height: 1.7;
}


/* ========================================
   Product Request / Phase3-C
======================================== */

.product-request-guide {
    margin-top: 18px;
    padding: 14px 16px;
    border-left: 3px solid #00e5ff;
    background: rgba(0, 229, 255, 0.05);
    color: #aeb8c4 !important;
    line-height: 1.7;
}

.product-request-guide a {
    color: #00e5ff;
    font-weight: 700;
    text-decoration: none;
}

.product-request-guide a:hover {
    text-decoration: underline;
}

.request-page {
    max-width: 900px;
    margin: auto;
    padding: 100px 30px 120px;
}

.request-header {
    margin-bottom: 50px;
}

.request-header h1 {
    font-size: clamp(44px, 7vw, 82px);
    line-height: 1;
    margin-bottom: 25px;
    letter-spacing: -2px;
}

.request-header h1 span {
    color: #00e5ff;
    text-shadow:
        0 0 15px #00e5ff,
        0 0 40px rgba(0, 229, 255, 0.5);
}

.request-header > p:last-child {
    color: #718596;
    line-height: 2;
}

.request-form-card {
    padding: 32px;
    background-color: #080e17;
    border: 1px solid #12334a;
}

.request-field {
    margin-bottom: 22px;
}

.request-field label {
    display: block;
    margin-bottom: 9px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.request-field label span {
    color: #718596;
    font-size: 12px;
    font-weight: 400;
}

.request-field input,
.request-field select,
.request-field textarea {
    width: 100%;
    padding: 14px 15px;
    background: #05070d;
    border: 1px solid #23445a;
    color: #ffffff;
    font: inherit;
    outline: none;
}

.request-field textarea {
    resize: vertical;
    min-height: 120px;
}

.request-field input:focus,
.request-field select:focus,
.request-field textarea:focus {
    border-color: #00e5ff;
    box-shadow:
        0 0 10px rgba(0, 229, 255, 0.18);
}

.request-consent-note {
    margin: 4px 0 22px;
    padding: 14px 16px;
    background: rgba(0, 229, 255, 0.04);
    border: 1px solid rgba(0, 229, 255, 0.16);
}

.request-consent-note p {
    margin: 0;
    color: #91a5b5;
    font-size: 13px;
    line-height: 1.7;
}

.request-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 26px;
    border: 1px solid #00e5ff;
    background: rgba(0, 229, 255, 0.05);
    color: #00e5ff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: 0.2s;
}

.request-submit-button span {
    margin-left: 14px;
}

.request-submit-button:hover {
    background: #00e5ff;
    color: #05070d;
    box-shadow:
        0 0 18px rgba(0, 229, 255, 0.3);
}

.request-status {
    margin-top: 22px;
    padding: 14px 16px;
    line-height: 1.7;
}

.request-status.success {
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.45);
    background: rgba(0, 255, 136, 0.04);
}

.request-status.error {
    color: #ff5c73;
    border: 1px solid rgba(255, 92, 115, 0.45);
    background: rgba(255, 92, 115, 0.04);
}

@media (max-width: 800px) {
    .request-page {
        padding: 70px 20px 90px;
    }

    .request-form-card {
        padding: 22px;
    }

    .header nav {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}


/* ========================================
   Public Pages v1
======================================== */

.required-badge,
.optional-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 7px;
    border-radius: 3px;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1;
    vertical-align: middle;
}

.required-badge {
    color: #05070d !important;
    background: #00e5ff;
}

.optional-badge {
    color: #8da2b5 !important;
    background: rgba(141, 162, 181, 0.12);
    border: 1px solid rgba(141, 162, 181, 0.22);
}

.recommend-page,
.about-page {
    max-width: 1000px;
    margin: auto;
    padding: 100px 30px 120px;
}

.diagnosis-result {
    margin-top: 36px;
    padding: 30px;
    background: #080e17;
    border: 1px solid rgba(0, 229, 255, 0.45);
}

.diagnosis-result h2 {
    margin-bottom: 14px;
    color: #ffffff;
    font-size: 26px;
}

.diagnosis-lead,
.diagnosis-note {
    color: #9eb0bf;
    line-height: 1.8;
}

.diagnosis-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 24px 0;
}

.diagnosis-item {
    padding: 16px;
    border: 1px solid rgba(0, 229, 255, 0.15);
    background: rgba(5, 7, 13, 0.72);
}

.diagnosis-item strong {
    display: block;
    margin-bottom: 8px;
    color: #00e5ff;
}

.diagnosis-item span {
    color: #c4ced7;
    line-height: 1.65;
}

.diagnosis-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.diagnosis-link {
    display: inline-flex;
    padding: 13px 18px;
    border: 1px solid #23445a;
    color: #b8d7e8;
    text-decoration: none;
    font-weight: 700;
}

.diagnosis-link.primary {
    color: #05070d;
    background: #00e5ff;
    border-color: #00e5ff;
}

.diagnosis-link:hover {
    border-color: #00e5ff;
    color: #00e5ff;
}

.diagnosis-link.primary:hover {
    color: #05070d;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.24);
}

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

.about-card,
.about-policy {
    padding: 26px;
    background: #080e17;
    border: 1px solid #12334a;
}

.about-card h2,
.about-policy h2 {
    margin-bottom: 14px;
    color: #00e5ff;
    font-size: 18px;
}

.about-card p,
.about-policy p {
    color: #91a5b5;
    line-height: 1.9;
}

.about-policy {
    margin-top: 20px;
}

.about-policy p + p {
    margin-top: 16px;
}

@media (max-width: 950px) {
    .header {
        height: auto;
        min-height: 80px;
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .header nav {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px 16px;
    }
}

@media (max-width: 800px) {
    .diagnosis-grid,
    .about-grid {
        grid-template-columns: 1fr;
    }

    .recommend-page,
    .about-page {
        padding: 70px 20px 90px;
    }

    .header {
        align-items: flex-start;
    }

    .header nav {
        max-width: 70%;
    }
}


/* ========================================
   Public Pages v2 / Diagnosis Experience
======================================== */

.footer-links {
    margin-top: 9px;
}

.footer-links a {
    color: #718596;
    text-decoration: none;
    font-size: 11px;
}

.footer-links a:hover {
    color: #00e5ff;
}

.consultation-service-note {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(0, 229, 255, 0.12);
    background: rgba(0, 229, 255, 0.025);
}

.consultation-service-note p {
    margin: 0;
    color: #91a5b5;
    font-size: 13px;
    line-height: 1.8;
}

.consultation-service-note a {
    color: #b8d7e8;
}

.diagnosis-body {
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(0, 229, 255, 0.07),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 35%,
            rgba(153, 102, 255, 0.06),
            transparent 32%
        ),
        #05070d;
}

.diagnosis-page {
    max-width: 880px;
    min-height: 760px;
    margin: auto;
    padding: 80px 30px 120px;
}

.diagnosis-intro {
    max-width: 700px;
    margin: 40px auto 0;
    padding: 60px 42px;
    text-align: center;
    border: 1px solid rgba(0, 229, 255, 0.25);
    background:
        linear-gradient(
            145deg,
            rgba(0, 229, 255, 0.055),
            rgba(153, 102, 255, 0.03)
        ),
        #080e17;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.28);
}

.diagnosis-mascot {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    margin: 0 auto 24px;
    border-radius: 22px;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.35);
    color: #00e5ff;
    font-size: 34px;
    box-shadow:
        0 0 32px rgba(0, 229, 255, 0.12);
}

.diagnosis-intro h1 {
    margin-bottom: 22px;
    font-size: clamp(42px, 7vw, 74px);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.diagnosis-intro h1 span {
    color: #00e5ff;
    text-shadow:
        0 0 18px rgba(0, 229, 255, 0.55);
}

.diagnosis-intro > p:not(.section-label) {
    margin-bottom: 28px;
    color: #91a5b5;
    line-height: 1.9;
}

.diagnosis-start-button,
.diagnosis-action-button {
    border: 0;
    cursor: pointer;
    font: inherit;
}

.diagnosis-start-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    padding: 16px 24px;
    border: 1px solid #00e5ff;
    background: #00e5ff;
    color: #05070d;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.diagnosis-start-button span {
    margin-left: 16px;
}

.diagnosis-quiz {
    max-width: 720px;
    margin: 30px auto 0;
}

.diagnosis-progress-wrap {
    margin-bottom: 24px;
}

.diagnosis-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    color: #718596;
    font-size: 11px;
    letter-spacing: 0.12em;
}

.diagnosis-progress-track {
    height: 5px;
    overflow: hidden;
    background: #101a24;
    border-radius: 999px;
}

.diagnosis-progress-bar {
    width: 14.285%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            #00e5ff,
            #8eeeff
        );
    border-radius: 999px;
    transition: width 0.25s ease;
}

.diagnosis-question-card {
    padding: 40px;
    border: 1px solid #16354a;
    background: #080e17;
    box-shadow:
        0 26px 60px rgba(0, 0, 0, 0.22);
}

.diagnosis-question-number {
    margin-bottom: 10px;
    color: #00e5ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.diagnosis-question-card h2 {
    margin-bottom: 8px;
    font-size: clamp(27px, 5vw, 40px);
    line-height: 1.25;
}

.diagnosis-question-subtitle {
    margin-bottom: 26px;
    color: #718596;
}

.diagnosis-options {
    display: grid;
    gap: 10px;
}

.diagnosis-option {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 17px 19px;
    text-align: left;
    border: 1px solid #1b3446;
    background: #05070d;
    color: #ffffff;
    cursor: pointer;
    transition:
        transform 0.18s,
        border-color 0.18s,
        background 0.18s,
        box-shadow 0.18s;
}

.diagnosis-option:hover,
.diagnosis-option.selected {
    transform: translateY(-2px);
    border-color: #00e5ff;
    background: rgba(0, 229, 255, 0.06);
    box-shadow:
        0 8px 24px rgba(0, 229, 255, 0.07);
}

.diagnosis-option strong {
    font-size: 15px;
}

.diagnosis-option span {
    color: #718596;
    font-size: 12px;
    line-height: 1.5;
}

.diagnosis-nav {
    margin-top: 16px;
}

.diagnosis-back-button,
.diagnosis-retry-button {
    border: 0;
    background: transparent;
    color: #718596;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
}

.diagnosis-back-button:hover,
.diagnosis-retry-button:hover {
    color: #00e5ff;
}

.cute-result {
    position: relative;
    overflow: hidden;
    max-width: 760px;
    margin: 30px auto 0;
    padding: 44px;
    text-align: center;
    border: 1px solid rgba(0, 229, 255, 0.45);
    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(0, 229, 255, 0.12),
            transparent 36%
        ),
        radial-gradient(
            circle at 90% 15%,
            rgba(153, 102, 255, 0.1),
            transparent 28%
        ),
        #080e17;
}

.result-sparkles {
    margin-bottom: 14px;
    color: #7af4ff;
    letter-spacing: 0.7em;
    opacity: 0.8;
}

.diagnosis-result-kicker {
    color: #91a5b5;
    font-size: 13px;
}

.diagnosis-result-emoji {
    margin: 18px 0 8px;
    font-size: 58px;
}

.cute-result h2 {
    margin-bottom: 8px;
    color: #ffffff;
    font-size: clamp(30px, 6vw, 48px);
}

.diagnosis-result-tagline {
    margin-bottom: 16px;
    color: #00e5ff;
    font-weight: 700;
}

.diagnosis-result-description {
    max-width: 580px;
    margin: auto;
    color: #91a5b5;
    line-height: 1.8;
}

.result-target-grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 30px 0;
}

.result-target-grid > div {
    padding: 14px 10px;
    border: 1px solid rgba(0, 229, 255, 0.14);
    background: rgba(5, 7, 13, 0.65);
}

.result-target-grid strong {
    display: block;
    margin-bottom: 6px;
    color: #00e5ff;
    font-size: 11px;
}

.result-target-grid span {
    color: #c4ced7;
    font-size: 11px;
    line-height: 1.5;
}

.cute-result .diagnosis-actions {
    justify-content: center;
}

.diagnosis-retry-button {
    margin-top: 20px;
}

.diagnosis-products {
    max-width: 840px;
    margin: 30px auto 0;
    padding: 32px;
    border: 1px solid #12334a;
    background: #080e17;
}

.diagnosis-products-header {
    margin-bottom: 24px;
}

.diagnosis-products-header h2 {
    margin-bottom: 9px;
    font-size: 30px;
}

.diagnosis-products-header p:last-child {
    color: #91a5b5;
    line-height: 1.75;
}

.diagnosis-product-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 26px;
}

.diagnosis-product-section {
    padding: 18px;
    border: 1px solid rgba(0, 229, 255, 0.14);
    background: rgba(5, 7, 13, 0.55);
}

.diagnosis-product-section h3 {
    margin-bottom: 12px;
    color: #00e5ff;
    font-size: 15px;
}

.diagnosis-product-card {
    display: block;
    position: relative;
    margin-top: 9px;
    cursor: pointer;
}

.diagnosis-product-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.diagnosis-product-card > div {
    padding: 15px;
    border: 1px solid #1a3345;
    background: #070b12;
    transition:
        border-color 0.18s,
        background 0.18s;
}

.diagnosis-product-card input:checked + div {
    border-color: #00e5ff;
    background: rgba(0, 229, 255, 0.055);
}

.diagnosis-product-card strong,
.diagnosis-product-card small,
.diagnosis-product-price {
    display: block;
}

.diagnosis-product-card strong {
    margin: 5px 0 6px;
    line-height: 1.55;
}

.diagnosis-product-card small {
    color: #718596;
}

.diagnosis-product-pick {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 999px;
    color: #05070d;
    background: #00e5ff;
    font-size: 9px;
    font-weight: 800;
}

.diagnosis-product-price {
    margin-top: 8px;
    color: #b8d7e8;
    font-size: 12px;
}

.diagnosis-product-price.muted,
.diagnosis-product-empty,
.diagnosis-products-loading,
.diagnosis-products-error {
    color: #718596;
}

.diagnosis-products-loading,
.diagnosis-products-error {
    padding: 30px;
    text-align: center;
    line-height: 1.8;
}

.recommended-preset-notice {
    margin-bottom: 22px;
    padding: 16px 18px;
    border: 1px solid rgba(0, 229, 255, 0.35);
    background: rgba(0, 229, 255, 0.05);
}

.recommended-preset-notice strong,
.recommended-preset-notice span {
    display: block;
}

.recommended-preset-notice strong {
    margin-bottom: 6px;
    color: #00e5ff;
}

.recommended-preset-notice span {
    color: #aeb8c4;
    line-height: 1.6;
    font-size: 13px;
}

@media (max-width: 800px) {

    .diagnosis-page {
        padding: 60px 18px 90px;
    }

    .diagnosis-intro,
    .diagnosis-question-card,
    .cute-result,
    .diagnosis-products {
        padding: 24px 20px;
    }

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

    .diagnosis-progress-meta {
        font-size: 9px;
    }
}


/* ========================================
   Public Pages v3
======================================== */

.result-parts-visual {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin: 30px 0;
    text-align: left;
}

.result-part-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 100px;
    padding: 16px;
    border: 1px solid rgba(0, 229, 255, 0.15);
    background:
        linear-gradient(
            135deg,
            rgba(0, 229, 255, 0.045),
            rgba(5, 7, 13, 0.68)
        );
}

.result-part-card:last-child {
    grid-column: 1 / -1;
}

.result-part-icon {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.09);
    border: 1px solid rgba(0, 229, 255, 0.26);
    font-size: 22px;
}

.result-part-card strong,
.result-part-card span,
.result-part-card small {
    display: block;
}

.result-part-card strong {
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 13px;
}

.result-part-card span {
    color: #00e5ff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
}

.result-part-card small {
    margin-top: 5px;
    color: #718596;
    font-size: 11px;
    line-height: 1.5;
}

.selected-build-purchase-summary {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid rgba(0, 229, 255, 0.2);
    background: rgba(8, 14, 23, 0.74);
}

.selected-build-purchase-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.selected-build-purchase-header h2 {
    margin-top: 4px;
    font-size: 22px;
}

.selected-build-purchase-header > p {
    color: #718596;
    font-size: 12px;
}

.selected-build-purchase-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.selected-build-purchase-card {
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(5, 7, 13, 0.72);
}

.selected-build-purchase-card strong,
.selected-build-purchase-card small {
    display: block;
}

.selected-build-category {
    display: inline-block;
    margin-bottom: 7px;
    color: #00e5ff;
    font-size: 10px;
    font-weight: 800;
}

.selected-build-purchase-card strong {
    line-height: 1.45;
    font-size: 13px;
}

.selected-build-purchase-card small {
    margin-top: 5px;
    color: #718596;
    font-size: 10px;
}

.selected-build-purchase-card p {
    margin: 7px 0 0;
    color: #91a5b5;
    font-size: 11px;
    line-height: 1.55;
}

.selected-build-buy-button {
    display: inline-flex;
    margin-top: 10px;
    padding: 8px 11px;
    border: 1px solid #00e5ff;
    color: #05070d;
    background: #00e5ff;
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
}

.selected-build-buy-button:hover {
    background: transparent;
    color: #00e5ff;
}

.selected-build-no-link {
    color: #718596 !important;
}

.selected-build-purchase-card.unknown {
    opacity: 0.8;
}

@media (max-width: 800px) {
    .result-parts-visual,
    .selected-build-purchase-grid {
        grid-template-columns: 1fr;
    }

    .result-part-card:last-child {
        grid-column: auto;
    }

    .selected-build-purchase-header {
        display: block;
    }

    .selected-build-purchase-header > p {
        margin-top: 8px;
    }
}


/* ========================================
   Public Pages v4
   Compatibility information cleanup
======================================== */

.compatibility-detail-heading {
    margin: 22px 0 12px;
    color: #c5d3dd;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.compatibility-note-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(125, 155, 175, 0.16);
}

.compatibility-note-section h4 {
    margin: 0 0 8px;
    color: #9db1bf;
    font-size: 14px;
}

.compatibility-note-intro {
    margin: 0 0 14px;
    color: #6f8493;
    font-size: 11px;
    line-height: 1.7;
}

.compatibility-notice-list {
    display: grid;
    gap: 9px;
}

.compatibility-notice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid rgba(95, 135, 160, 0.18);
    background: rgba(90, 125, 145, 0.045);
}

.compatibility-notice-mark {
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    color: #8fb2c7;
    border: 1px solid rgba(143, 178, 199, 0.42);
    font-size: 11px;
    font-weight: 800;
}

.compatibility-notice strong {
    display: block;
    margin-bottom: 4px;
    color: #9db1bf;
    font-size: 12px;
}

.compatibility-notice p {
    margin: 0;
    color: #718795;
    font-size: 11px;
    line-height: 1.7;
}

.compatibility-notice a {
    color: #9fc4d8;
}


/* ========================================
   HOME FINAL v1
======================================== */

.home-body {
    background:
        radial-gradient(
            circle at 80% 16%,
            rgba(0, 229, 255, 0.08),
            transparent 30%
        ),
        #05070d;
}

.home-hero {
    display: grid;
    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(320px, 0.82fr);
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    min-height: 690px;
    margin: auto;
    padding: 100px 36px 80px;
}

.home-hero-copy h1 {
    margin: 12px 0 24px;
    color: #ffffff;
    font-size: clamp(46px, 7vw, 82px);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.home-hero-copy h1 span {
    color: #00e5ff;
    text-shadow:
        0 0 24px rgba(0, 229, 255, 0.3);
}

.home-hero-lead {
    max-width: 680px;
    color: #91a5b5;
    font-size: 15px;
    line-height: 2;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.home-primary-button,
.home-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 20px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.home-primary-button {
    border: 1px solid #00e5ff;
    color: #05070d;
    background: #00e5ff;
}

.home-primary-button span {
    margin-left: 16px;
}

.home-primary-button:hover {
    box-shadow:
        0 0 24px rgba(0, 229, 255, 0.2);
}

.home-secondary-button {
    border: 1px solid #28485c;
    color: #b8d7e8;
    background: rgba(5, 7, 13, 0.4);
}

.home-secondary-button:hover {
    color: #00e5ff;
    border-color: #00e5ff;
}

.home-hero-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 390px;
}

.home-build-core {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: min(280px, 70vw);
    aspect-ratio: 1;
    border: 1px solid rgba(0, 229, 255, 0.38);
    background:
        radial-gradient(
            circle,
            rgba(0, 229, 255, 0.12),
            rgba(5, 7, 13, 0.9) 68%
        );
    box-shadow:
        0 0 80px rgba(0, 229, 255, 0.09);
    text-align: center;
}

.home-build-core::before,
.home-build-core::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(0, 229, 255, 0.08);
    transform: rotate(45deg);
}

.home-build-core-label {
    color: #718596;
    font-size: 10px;
    letter-spacing: 0.25em;
}

.home-build-core strong {
    color: #00e5ff;
    font-size: 38px;
    letter-spacing: 0.05em;
}

.home-build-core small {
    max-width: 160px;
    color: #718596;
    font-size: 9px;
    letter-spacing: 0.08em;
    line-height: 1.7;
}

.home-orbit {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(0, 229, 255, 0.23);
    background: #080e17;
    color: #8cc8d8;
    font-size: 9px;
    font-weight: 800;
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.3);
}

.home-orbit-1 {
    top: 12%;
    left: 8%;
}

.home-orbit-2 {
    top: 20%;
    right: 2%;
}

.home-orbit-3 {
    bottom: 12%;
    left: 4%;
}

.home-orbit-4 {
    right: 12%;
    bottom: 7%;
}

.home-start-section,
.home-how-section,
.home-support-section {
    max-width: 1200px;
    margin: auto;
    padding: 90px 36px;
}

.home-section-heading {
    max-width: 700px;
    margin-bottom: 30px;
}

.home-section-heading h2 {
    margin: 7px 0 9px;
    color: #ffffff;
    font-size: clamp(28px, 4vw, 42px);
}

.home-section-heading > p:last-child {
    color: #718596;
    line-height: 1.8;
}

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

.home-start-card {
    position: relative;
    min-height: 330px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid #18354a;
    background: #080e17;
    color: inherit;
    text-decoration: none;
    transition:
        transform 0.2s,
        border-color 0.2s,
        box-shadow 0.2s;
}

.home-start-card::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -80px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background:
        rgba(0, 229, 255, 0.04);
}

.home-start-card:hover {
    transform: translateY(-4px);
    border-color: #00e5ff;
    box-shadow:
        0 18px 40px rgba(0, 229, 255, 0.06);
}

.home-start-card.featured {
    background:
        linear-gradient(
            145deg,
            rgba(0, 229, 255, 0.08),
            #080e17 60%
        );
}

.home-start-number {
    color: #496474;
    font-size: 10px;
    letter-spacing: 0.16em;
}

.home-start-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 32px 0 20px;
    border: 1px solid rgba(0, 229, 255, 0.27);
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.07);
    font-size: 20px;
}

.home-start-card h3 {
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 20px;
}

.home-start-catch {
    margin-bottom: 11px !important;
    color: #b8d7e8 !important;
    font-weight: 700;
}

.home-start-card p {
    color: #718596;
    font-size: 12px;
    line-height: 1.8;
}

.home-card-link {
    display: inline-block;
    margin-top: 22px;
    color: #00e5ff;
    font-size: 11px;
    font-weight: 700;
}

.home-how-section {
    border-top:
        1px solid rgba(61, 101, 123, 0.13);
}

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

.home-how-item {
    display: flex;
    gap: 17px;
    padding: 22px;
    border: 1px solid rgba(52, 86, 105, 0.16);
    background: rgba(8, 14, 23, 0.46);
}

.home-how-item > span {
    flex: 0 0 34px;
    color: #00e5ff;
    font-size: 10px;
    font-weight: 800;
}

.home-how-item h3 {
    margin-bottom: 6px;
    color: #d7e4eb;
    font-size: 15px;
}

.home-how-item p {
    color: #718596;
    font-size: 11px;
    line-height: 1.7;
}

.home-beginner-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1128px;
    margin: 30px auto;
    padding: 36px;
    border: 1px solid rgba(0, 229, 255, 0.24);
    background:
        linear-gradient(
            100deg,
            rgba(0, 229, 255, 0.075),
            rgba(5, 7, 13, 0.86)
        );
}

.home-beginner-banner h2 {
    margin: 6px 0 10px;
    color: #ffffff;
    font-size: 26px;
}

.home-beginner-banner p:last-child {
    max-width: 700px;
    color: #91a5b5;
    font-size: 12px;
    line-height: 1.8;
}

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

.home-support-grid a {
    padding: 22px;
    border: 1px solid rgba(52, 86, 105, 0.22);
    background: #080e17;
    color: inherit;
    text-decoration: none;
}

.home-support-grid a:hover {
    border-color: #00e5ff;
}

.home-support-grid strong,
.home-support-grid span {
    display: block;
}

.home-support-grid strong {
    margin-bottom: 6px;
    color: #ffffff;
    font-size: 13px;
}

.home-support-grid span {
    margin-bottom: 12px;
    color: #00e5ff;
    font-size: 11px;
    font-weight: 700;
}

.home-support-grid p {
    color: #718596;
    font-size: 11px;
    line-height: 1.7;
}

.home-policy-note {
    max-width: 1128px;
    margin: 0 auto 100px;
    padding: 18px 20px;
    border-left: 2px solid rgba(0, 229, 255, 0.4);
    background: rgba(8, 14, 23, 0.5);
}

.home-policy-note p {
    color: #718596;
    font-size: 10px;
    line-height: 1.8;
}

@media (max-width: 980px) {

    .home-hero {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-top: 80px;
    }

    .home-hero-visual {
        min-height: 340px;
    }

    .home-start-grid,
    .home-support-grid {
        grid-template-columns: 1fr;
    }

    .home-start-card {
        min-height: auto;
    }

    .home-beginner-banner {
        margin-left: 24px;
        margin-right: 24px;
    }
}

@media (max-width: 700px) {

    .home-hero,
    .home-start-section,
    .home-how-section,
    .home-support-section {
        padding-left: 20px;
        padding-right: 20px;
    }

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

    .home-beginner-banner {
        display: block;
        margin-left: 20px;
        margin-right: 20px;
        padding: 24px 20px;
    }

    .home-beginner-banner .home-primary-button {
        margin-top: 20px;
    }

    .home-orbit {
        width: 48px;
        height: 48px;
    }
}


/* ========================================
   HOME / NAV / DIAGNOSIS polish v2
======================================== */

/* Logo behaves like a home link without changing its visual identity. */
a.logo {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.logo:hover {
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.24));
}

/* HOME hero title: always break exactly after the comma. */
.home-main-title {
    display: block;
}

.home-main-title-line {
    display: block;
    white-space: nowrap;
}

.home-main-title-line.accent {
    color: #00e5ff;
    text-shadow: 0 0 24px rgba(0, 229, 255, 0.3);
}

/* Diagnosis: cyan + a restrained neon pink accent. */
.diagnosis-body {
    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(255, 61, 182, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 20%,
            rgba(0, 229, 255, 0.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 72% 74%,
            rgba(255, 61, 182, 0.045),
            transparent 34%
        ),
        #05070d;
}

.diagnosis-intro {
    position: relative;
    overflow: hidden;
    border:
        1px solid rgba(0, 229, 255, 0.3);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.28),
        0 0 50px rgba(255, 61, 182, 0.035);
}

.diagnosis-intro::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -90px;
    top: -90px;
    border-radius: 50%;
    background: rgba(255, 61, 182, 0.07);
    filter: blur(2px);
}

.diagnosis-intro::after {
    content: "✦";
    position: absolute;
    right: 34px;
    bottom: 28px;
    color: rgba(255, 61, 182, 0.7);
    font-size: 18px;
}

.diagnosis-mascot {
    position: relative;
    border:
        1px solid rgba(0, 229, 255, 0.38);
    background:
        linear-gradient(
            145deg,
            rgba(0, 229, 255, 0.12),
            rgba(255, 61, 182, 0.09)
        );
}

.diagnosis-mascot > span {
    color: #00e5ff;
    font-size: 32px;
}

.diagnosis-mascot > i {
    position: absolute;
    right: -8px;
    top: -8px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #ff61bd;
    background: #0a0f18;
    border: 1px solid rgba(255, 97, 189, 0.45);
    font-style: normal;
    font-size: 12px;
    box-shadow: 0 0 18px rgba(255, 97, 189, 0.18);
}

.diagnosis-progress-bar {
    background:
        linear-gradient(
            90deg,
            #00e5ff 0%,
            #72edff 45%,
            #ff61bd 100%
        );
    box-shadow: 0 0 10px rgba(255, 97, 189, 0.12);
}

.diagnosis-question-card {
    position: relative;
    overflow: hidden;
    border:
        1px solid rgba(0, 229, 255, 0.26);
    background:
        linear-gradient(
            145deg,
            rgba(0, 229, 255, 0.025),
            rgba(255, 61, 182, 0.025)
        ),
        #080e17;
}

.diagnosis-question-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 150px;
    height: 150px;
    right: -80px;
    bottom: -80px;
    border-radius: 50%;
    background: rgba(255, 61, 182, 0.055);
}

.diagnosis-question-card > * {
    position: relative;
    z-index: 1;
}

.diagnosis-question-top {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.diagnosis-question-art {
    position: relative;
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border-radius: 24px;
    border: 1px solid rgba(0, 229, 255, 0.28);
    background:
        linear-gradient(
            145deg,
            rgba(0, 229, 255, 0.09),
            rgba(255, 61, 182, 0.07)
        );
    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.22);
}

.diagnosis-question-art > span {
    font-size: 36px;
    filter:
        drop-shadow(0 0 10px rgba(255, 97, 189, 0.12));
}

.diagnosis-question-art > i {
    position: absolute;
    width: 13px;
    height: 13px;
    right: -5px;
    bottom: 10px;
    border-radius: 50%;
    background: #ff61bd;
    box-shadow:
        0 0 15px rgba(255, 97, 189, 0.4);
}

.diagnosis-question-number {
    color: #ff79c7;
}

.diagnosis-question-card h2 {
    margin-bottom: 8px;
}

.diagnosis-option {
    position: relative;
    overflow: hidden;
}

.diagnosis-option::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: transparent;
    transition: background 0.18s;
}

.diagnosis-option:hover,
.diagnosis-option.selected {
    border-color: rgba(255, 97, 189, 0.7);
    background:
        linear-gradient(
            90deg,
            rgba(255, 61, 182, 0.055),
            rgba(0, 229, 255, 0.035)
        );
    box-shadow:
        0 8px 24px rgba(255, 61, 182, 0.06);
}

.diagnosis-option:hover::before,
.diagnosis-option.selected::before {
    background: #ff61bd;
}

.diagnosis-question-deco {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    color: rgba(255, 97, 189, 0.62);
    font-size: 13px;
}

.diagnosis-question-deco span:nth-child(2) {
    color: rgba(0, 229, 255, 0.62);
}

.cute-result {
    border:
        1px solid rgba(255, 97, 189, 0.35);
    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(255, 61, 182, 0.12),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 15%,
            rgba(0, 229, 255, 0.1),
            transparent 28%
        ),
        #080e17;
}

.result-sparkles {
    color: #ff79c7;
}

.diagnosis-result-tagline {
    color: #ff79c7;
}

.result-part-icon {
    background:
        linear-gradient(
            145deg,
            rgba(0, 229, 255, 0.1),
            rgba(255, 61, 182, 0.08)
        );
}

.result-part-card:nth-child(even) .result-part-icon {
    color: #ff79c7;
    border-color: rgba(255, 97, 189, 0.3);
}

.diagnosis-start-button {
    background:
        linear-gradient(
            90deg,
            #00e5ff,
            #7af4ff
        );
}

.diagnosis-start-button:hover {
    box-shadow:
        0 0 18px rgba(0, 229, 255, 0.18),
        0 0 26px rgba(255, 97, 189, 0.08);
}

@media (max-width: 800px) {

    .diagnosis-question-top {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .diagnosis-question-art {
        width: 70px;
        height: 70px;
    }

    .diagnosis-question-art > span {
        font-size: 30px;
    }
}

@media (max-width: 560px) {

    .home-main-title-line {
        white-space: normal;
    }
}


/* ========================================
   Diagnosis polish v3
   Remove heart / pink point / pink selection
======================================== */

.diagnosis-mascot > i,
.diagnosis-question-art > i {
    display: none !important;
}

.diagnosis-question-deco {
    color: rgba(0, 229, 255, 0.58);
}

.diagnosis-question-deco span:nth-child(2) {
    color: rgba(126, 239, 255, 0.42);
}

.diagnosis-question-number {
    color: #00e5ff;
}

.diagnosis-option:hover,
.diagnosis-option.selected {
    border-color: #00e5ff;
    background:
        linear-gradient(
            90deg,
            rgba(0, 229, 255, 0.065),
            rgba(0, 229, 255, 0.025)
        );
    box-shadow:
        0 8px 24px rgba(0, 229, 255, 0.07);
}

.diagnosis-option:hover::before,
.diagnosis-option.selected::before {
    background: #00e5ff;
}


/* ========================================
   Direct forms v1
======================================== */

.request-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.request-submit-button:disabled,
.request-submit-button.is-sending {
    cursor: wait;
    opacity: 0.62;
}