/* site palette */
html:root {
    --bg: #FCFCFC;
    --surface: #FCFCFC;
    --surface-alt: #EAECF6;
    --text: #2B2519;
    --text-muted: #6D6555;
    --border: #E4E0D8;
    --primary: #191B20;
    --primary-hover: #090A0C;
    --on-primary: #FFFFFF;
    --primary-text: #191B20;
    --accent: #BFAEEE;
    --on-accent: #111111;
    --accent-text: #7C5ADC;
    --dark-band: #1F1B13;
    --on-dark: #FFFFFF;
    --on-dark-muted: #C3BFB6;
    --brand-btn-bg: #FFFFFF;
    --brand-btn-text: #191B20;
    --section-alt-bg: linear-gradient(160deg, #EAECF6 0%, #F5F6FA 100%);
    --dark-band-bg: linear-gradient(132deg, #1F1B13 0%, #212845 100%);
    --brand-band-bg: #191B20;
    --hero-bg: linear-gradient(132deg, #1F1B13 0%, #212845 100%);
}

/* /site palette */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans SC', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.65;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

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

.wb-section {
    background-color: var(--bg);
    padding: 56px 0;
}

@media (min-width: 768px) {
    .wb-section {
        padding: 96px 0;
    }
}

.wb-section-alt {
    background: var(--section-alt-bg, var(--surface-alt));
    padding: 56px 0;
}

@media (min-width: 768px) {
    .wb-section-alt {
        padding: 96px 0;
    }
}

.wb-section-dark {
    background: var(--dark-band-bg, var(--dark-band));
    color: var(--on-dark);
    padding: 56px 0;
}

@media (min-width: 768px) {
    .wb-section-dark {
        padding: 96px 0;
    }
}

.wb-section-brand {
    background: var(--brand-band-bg, var(--primary));
    color: var(--on-primary);
    padding: 56px 0;
}

@media (min-width: 768px) {
    .wb-section-brand {
        padding: 96px 0;
    }
}

.wb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary-text);
}

.wb-eyebrow::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background-color: var(--primary);
    flex-shrink: 0;
}

.wb-title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    margin: 0;
}

.wb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1.5px solid var(--primary);
    color: var(--primary-text);
    border-radius: 0px;
    padding: 12px 28px;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}

.wb-btn:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.wb-btn-alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1.5px solid var(--primary);
    color: var(--primary-text);
    border-radius: 0px;
    padding: 12px 28px;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}

.wb-btn-alt:hover {
    background-color: var(--primary);
    color: var(--on-primary);
}

.wb-card {
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0px;
    padding: 24px;
    transition: border-color 0.25s ease-in-out;
}

.wb-card:hover {
    border-color: var(--primary);
}

.wb-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.wb-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wb-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 0px;
    background-color: var(--surface-alt);
    color: var(--primary-text);
}

.wb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary);
    color: var(--on-primary);
    flex-shrink: 0;
}

.wb-card-icon-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.wb-card-icon-top::before {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--primary);
}

.wb-photo-offset {
    position: relative;
}

.wb-photo-offset::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: translate(16px, 16px);
    background-color: var(--primary);
    z-index: 0;
}

.wb-photo-offset>* {
    position: relative;
    z-index: 1;
}

.wb-on-dark {
    color: var(--on-dark);
}

.wb-section-dark,
.wb-on-dark {
    color: var(--on-dark);
}

.wb-section-dark h1,
.wb-section-dark h2,
.wb-section-dark h3,
.wb-section-dark .wb-title,
.wb-on-dark h1,
.wb-on-dark h2,
.wb-on-dark h3,
.wb-on-dark .wb-title {
    color: var(--on-dark);
}

.wb-section-dark p,
.wb-on-dark p {
    color: var(--on-dark-muted);
}

.wb-section-dark .wb-eyebrow,
.wb-on-dark .wb-eyebrow {
    color: var(--on-dark);
}

.wb-section-dark .wb-eyebrow::before,
.wb-on-dark .wb-eyebrow::before {
    background-color: var(--on-dark);
}

.wb-section-dark .wb-btn-alt,
.wb-on-dark .wb-btn-alt {
    border-color: var(--on-dark);
    color: var(--on-dark);
}

.wb-section-dark .wb-btn-alt:hover,
.wb-on-dark .wb-btn-alt:hover {
    background-color: var(--on-dark);
    color: var(--primary);
}

.wb-section-dark .wb-btn,
.wb-on-dark .wb-btn {
    border-color: var(--on-dark);
    color: var(--on-dark);
}

.wb-section-dark .wb-btn:hover,
.wb-on-dark .wb-btn:hover {
    background-color: var(--on-dark);
    color: var(--primary);
}

.wb-section-brand .wb-btn {
    background-color: var(--brand-btn-bg);
    color: var(--brand-btn-text);
    border: none;
}

.wb-section-brand .wb-btn:hover {
    background-color: var(--primary-hover);
    color: var(--on-primary);
}

.wb-section-brand .wb-btn-alt {
    border-color: var(--on-primary);
    color: var(--on-primary);
}

.wb-section-dark .wb-card,
.wb-on-dark .wb-card {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

.wb-section-dark .wb-card h3,
.wb-section-dark .wb-card .wb-title,
.wb-on-dark .wb-card h3,
.wb-on-dark .wb-card .wb-title {
    color: var(--text);
}

.wb-section-dark .wb-card p,
.wb-on-dark .wb-card p {
    color: var(--text-muted);
}

.wb-section-dark .text-muted,
.wb-on-dark .text-muted {
    color: var(--on-dark-muted) !important;
}

/* ===== header ===== */
.viewglobe-header {
    box-sizing: border-box;
}

.viewglobe-header a {
    text-decoration: none;
}

.viewglobe-header .js-dropdown-menu.is-open {
    display: block;
}

.viewglobe-header .js-dropdown-toggle[aria-expanded="true"] .js-dropdown-caret {
    transform: rotate(180deg);
}

.viewglobe-header .js-mobile-menu.is-open {
    display: block;
}

/* ===== hero ===== */
.hero-section {
    position: relative;
    background: linear-gradient(132deg, #1F1B13 0%, #212845 100%);
    min-height: 520px;
    display: flex;
    align-items: center;
}

.hero-section .hero-bg-media {
    filter: brightness(0.38) contrast(1.15);
}

.hero-section .hero-overlay {
    background: linear-gradient(90deg, rgba(31, 27, 19, 0.94) 0%, rgba(33, 40, 69, 0.82) 55%, rgba(17, 24, 39, 0.6) 100%);
}

.hero-section .hero-accent-shape {
    width: 340px;
    height: 340px;
    background: radial-gradient(circle at top right, rgba(191, 174, 238, 0.28) 0%, rgba(33, 40, 69, 0) 70%);
}

@media (max-width: 767px) {
    .hero-section .hero-accent-shape {
        width: 180px;
        height: 180px;
    }
}

.hero-section .hero-eyebrow-line {
    display: inline-block;
    width: 24px;
    height: 2px;
    background-color: #BFAEEE;
}

.hero-section .hero-btn-outlined {
    border-radius: 0;
    background: transparent;
    text-decoration: none;
}

.hero-section .hero-btn-outlined:hover {
    background-color: #FFFFFF;
    color: #191B20;
    border-color: #FFFFFF;
}

/* ===== featured_article ===== */
.featured-article-block .featured-article-media-wrapper {
    width: 100%;
    max-width: 100%;
}

.featured-article-block .featured-article-backdrop {
    z-index: 1;
}

.featured-article-block .wb-media {
    border-radius: 0;
}

.featured-article-block .wb-btn {
    border: 1.5px solid var(--primary);
    color: var(--primary);
    background: transparent;
    border-radius: 0;
}

.featured-article-block .wb-btn:hover {
    background: var(--primary);
    color: var(--on-primary);
}

@media (max-width: 767px) {
    .featured-article-block .grid {
        grid-template-columns: 1fr;
    }
}

/* ===== gpu_reviews_grid ===== */
#gpu-reviews-section .js-card-item {
    transition: transform 0.25s ease, border-color 0.25s ease;
}

#gpu-reviews-section .js-card-item:hover {
    transform: translateY(-3px);
}

#gpu-reviews-section .js-card-item.is-hidden {
    display: none;
}

#gpu-reviews-section .js-filter-control.active {
    background-color: #191B20;
    color: #FFFFFF;
    border-color: #191B20;
}

/* ===== pc_technologies_grid ===== */
.tech-grid-section .tech-card {
    border-radius: 0px;
    box-shadow: none;
}

.tech-grid-section .tech-card img {
    border-radius: 0px;
}

.tech-grid-section .tech-card a:focus-visible {
    outline: 2px solid #191B20;
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .tech-grid-section h2 {
        hyphens: auto;
    }
}

/* ===== blog_stats ===== */
.vg-stats-section {
    word-break: break-word;
    hyphens: auto;
}

.vg-stats-section .vg-stat-card {
    border-radius: 0;
    transition: transform 0.25s ease-in-out, border-color 0.25s ease-in-out;
}

.vg-stats-section .vg-stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
}

.vg-stats-section .vg-card-top {
    width: 100%;
}

@media (max-width: 767px) {
    .vg-stats-section .grid {
        grid-template-columns: 1fr;
    }
}

/* ===== case_studies ===== */
.case-studies-block .case-photo-offset-block {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    z-index: 0;
}

.case-studies-block .case-filter-btn {
    border-radius: 9999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    background-color: var(--surface-alt);
    color: var(--text);
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.case-studies-block .case-filter-btn:hover {
    border-color: var(--border);
    color: var(--primary-text);
}

.case-studies-block .case-filter-btn.is-active {
    background-color: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}

/* ===== updated_articles ===== */
.updated-articles-block {
    position: relative;
}

.updated-articles-block .photo-offset-decor {
    z-index: 1;
}

.updated-articles-block .js-tab-btn.active {
    background-color: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}

/* ===== footer ===== */
.footer-block {
    background: linear-gradient(132deg, #1F1B13 0%, #212845 100%);
    color: #FFFFFF;
    position: relative;
    overflow-wrap: anywhere;
}

.footer-block .footer-block__link:hover {
    transform: translateX(2px);
}

.footer-block .footer-block__link {
    transition: transform 0.2s ease, color 0.2s ease;
}

@media (max-width: 767px) {
    .footer-block .footer-block__grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
}

.viewglobe-header {
    box-sizing: border-box;
}

.viewglobe-header a {
    text-decoration: none;
}

.viewglobe-header .js-dropdown-menu.is-open {
    display: block;
}

.viewglobe-header .js-dropdown-toggle[aria-expanded="true"] .js-dropdown-caret {
    transform: rotate(180deg);
}

.viewglobe-header .js-mobile-menu.is-open {
    display: block;
}

.hero-section {
    position: relative;
    background: linear-gradient(132deg, #1F1B13 0%, #212845 100%);
    min-height: 420px;
    display: flex;
    align-items: center;
}

.hero-section .hero-bg-media {
    filter: brightness(0.35) contrast(1.15);
}

.hero-section .hero-overlay {
    background: linear-gradient(90deg, rgba(31, 27, 19, 0.94) 0%, rgba(33, 40, 69, 0.82) 55%, rgba(17, 24, 39, 0.6) 100%);
}

.hero-section .hero-accent-shape {
    width: 340px;
    height: 340px;
    background: radial-gradient(circle at top right, rgba(191, 174, 238, 0.28) 0%, rgba(33, 40, 69, 0) 70%);
}

@media (max-width: 767px) {
    .hero-section .hero-accent-shape {
        width: 180px;
        height: 180px;
    }
}

.hero-section .hero-eyebrow-line {
    display: inline-block;
    width: 24px;
    height: 2px;
    background-color: #BFAEEE;
}

.category-archive-section__eyebrow-line {
    display: inline-block;
    width: 24px;
    height: 2px;
    background-color: #191B20;
}

.category-archive-section__card-icon-line {
    display: block;
    width: 20px;
    height: 2px;
    background-color: #191B20;
    margin-bottom: 8px;
}

.category-archive-section__card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.category-archive-section__card:hover {
    border-color: #191B20;
    transform: translateY(-2px);
}

.category-archive-section__link:hover {
    color: #7C5ADC;
}

.category-archive-section__offset-wrapper {
    position: relative;
}

.category-archive-section__offset-bg {
    position: absolute;
    right: -12px;
    bottom: -12px;
    width: 100%;
    height: 100%;
    background-color: #191B20;
    z-index: 0;
}

.footer-block {
    background: linear-gradient(132deg, #1F1B13 0%, #212845 100%);
    color: #FFFFFF;
    position: relative;
    overflow-wrap: anywhere;
}

.footer-block .footer-block__link:hover {
    transform: translateX(2px);
}

.footer-block .footer-block__link {
    transition: transform 0.2s ease, color 0.2s ease;
}

@media (max-width: 767px) {
    .category-archive-section__list {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .category-archive-section__card {
        flex-direction: column;
        align-items: stretch;
    }

    .category-archive-section__media {
        width: 100%;
    }

    .category-archive-section__offset-bg {
        right: -6px;
        bottom: -6px;
    }

    .footer-block .footer-block__grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
}


/* ===== PAGE: about ===== */
.vg-about-section { overflow-wrap: anywhere; word-break: normal; } .vg-about-section h2, .vg-about-section h3 { overflow-wrap: anywhere; } .vg-about-section .wb-card { min-height: 100%; } @media (max-width: 767px) { .vg-about-section .grid { grid-template-columns: 1fr; } }

/* ===== PAGE: beginner-guide ===== */
.vg-guide-section { background-color: var(--bg); color: var(--text); }
.vg-guide-section .wb-card { transition: border-color 0.2s ease, transform 0.2s ease; }
.vg-guide-section .wb-card:hover { border-color: var(--primary); }
.vg-guide-section .js-checklist-row.is-checked { background-color: var(--surface_alt); border-color: var(--primary); }
.vg-guide-section .js-checklist-row.is-checked .js-checkbox-icon { background-color: var(--primary); text-color: var(--on-primary); color: #ffffff; }
.vg-guide-section .js-checklist-row.is-checked h3, .vg-guide-section .js-checklist-row.is-checked span.font-bold { text-decoration: line-through; opacity: 0.85; }
@media (max-width: 767px) {
  .vg-guide-section .grid { grid-template-columns: 1fr; }
  .vg-guide-section .js-checklist-list { display: flex; flex-direction: column; }
}

/* ===== PAGE: privacy ===== */
.privacy-content-section {
  overflow-wrap: anywhere;
}
.privacy-content-section .wb-card {
  min-height: 100%;
}
@media (max-width: 767px) {
  .privacy-content-section .wb-card {
    margin-bottom: 0;
  }
}

/* ===== PAGE: terms ===== */
.vg-terms .js-nav-btn { outline: none; } .vg-terms .js-nav-btn.is-active { border-color: var(--primary); background-color: var(--surface-alt); color: var(--primary); font-weight: 700; } .vg-terms .js-nav-btn:not(.is-active) { border-color: transparent; color: var(--text-muted); background-color: transparent; } .vg-terms .js-nav-btn:not(.is-active):hover { color: var(--text); background-color: rgba(234, 236, 246, 0.4); } @media (max-width: 767px) { .vg-terms .wb-card { padding: 18px; } }

/* ===== PAGE: disclaimer ===== */
.vg-disclaimer { word-break: break-word; overflow-wrap: anywhere; } .vg-disclaimer .wb-card { transition: border-color 0.2s ease, transform 0.2s ease; border-radius: 0px; } .vg-disclaimer .wb-card:hover { border-color: var(--primary); } @media (max-width: 767px) { .vg-disclaimer { padding-top: 48px; padding-bottom: 48px; } }

.comment-item {
    background-color: #FCFCFC;
    border: 1px solid #E4E0D8;
    border-radius: 0px
}

.comment-avatar {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 0px;
    border: 1px solid #E4E0D8;
    flex-shrink: 0;
    background-color: #EAECF6
}

.comment-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: #191B20;
    background-color: #EAECF6;
    border-radius: 0px
}

.comment-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 4px 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6D6555;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease
}

.comment-action-btn:hover {
    color: #191B20;
    background-color: #EAECF6
}

.reply-item {
    background-color: rgba(234, 236, 246, 0.4);
    border-left: 2px solid #191B20;
    border-top: 1px solid #E4E0D8;
    border-right: 1px solid #E4E0D8;
    border-bottom: 1px solid #E4E0D8;
    border-radius: 0px
}

.reply-avatar {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 0px;
    border: 1px solid #E4E0D8;
    flex-shrink: 0;
    background-color: #EAECF6
}

.reply-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    color: #FFFFFF;
    background-color: #191B20;
    border-radius: 0px
}

.comment-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 4px 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6D6555;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease
}

.comment-action-btn:hover {
    color: #191B20;
    background-color: #EAECF6
}


/* ===== PAGE TEMPLATE: gpu-reviews, hardware-tech ===== */
.viewglobe-header {
    box-sizing: border-box;
}

.viewglobe-header a {
    text-decoration: none;
}

.viewglobe-header .js-dropdown-menu.is-open {
    display: block;
}

.viewglobe-header .js-dropdown-toggle[aria-expanded="true"] .js-dropdown-caret {
    transform: rotate(180deg);
}

.viewglobe-header .js-mobile-menu.is-open {
    display: block;
}

.hero-section {
    position: relative;
    background: linear-gradient(132deg, #1F1B13 0%, #212845 100%);
    min-height: 420px;
    display: flex;
    align-items: center;
}

.hero-section .hero-bg-media {
    filter: brightness(0.35) contrast(1.15);
}

.hero-section .hero-overlay {
    background: linear-gradient(90deg, rgba(31, 27, 19, 0.94) 0%, rgba(33, 40, 69, 0.85) 55%, rgba(17, 24, 39, 0.65) 100%);
}

.hero-section .hero-accent-shape {
    width: 340px;
    height: 340px;
    background: radial-gradient(circle at top right, rgba(191, 174, 238, 0.28) 0%, rgba(33, 40, 69, 0) 70%);
}

@media (max-width: 767px) {
    .hero-section .hero-accent-shape {
        width: 180px;
        height: 180px;
    }
}

.hero-section .hero-eyebrow-line {
    display: inline-block;
    width: 24px;
    height: 2px;
    background-color: #BFAEEE;
}

.footer-block {
    background: linear-gradient(132deg, #1F1B13 0%, #212845 100%);
    color: #FFFFFF;
    position: relative;
    overflow-wrap: anywhere;
}

.footer-block .footer-block__link:hover {
    transform: translateX(2px);
}

.footer-block .footer-block__link {
    transition: transform 0.2s ease, color 0.2s ease;
}

@media (max-width: 767px) {
    .footer-block .footer-block__grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
}

.article-template .article-media-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 520px;
}

.article-template .article-heading-accent-line {
    width: 36px;
    height: 3px;
    background-color: #191B20;
}

.article-template .article-prose {
    overflow-wrap: anywhere;
}

.article-template .article-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

@media (max-width: 767px) {
    .article-template .article-data-table thead {
        display: none;
    }

    .article-template .article-data-table,
    .article-template .article-data-table tbody,
    .article-template .article-data-table tr,
    .article-template .article-data-table td {
        display: block;
        width: 100%;
    }

    .article-template .article-data-table td {
        border-bottom: 1px solid #E4E0D8;
        padding: 10px 14px;
    }

    .article-template .article-data-table tr {
        margin-bottom: 12px;
        border: 1px solid #E4E0D8;
        background: #FCFCFC;
    }
}

.article-template .js-faq-item.is-active .js-faq-caret {
    transform: rotate(180deg);
}

/* mobile-text-guard */
@media (max-width: 767px) {
  h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, td, th, label {
    overflow-wrap: anywhere;
  }
  a, button, .btn {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  img, video, iframe {
    max-width: 100%;
  }
}

/* footer dead-space fix: footer carries .wb-section-dark which adds 56/96px section padding under the bottom bar */
footer.footer-block {
    padding-top: 0;
    padding-bottom: 0;
}