@charset "UTF-8";

/* ===========================================
   JPRiDE QUEST — Product Page Design System
   Linear-app Inspired / Pure CSS
   =========================================== */

/* --- 0. Quote container fix: prevent layout shift on mobile --- */
/* <p> を2行固定高 + 縦センタリング。溢れは span 側で「…」省略 */
[id^="randomQuote"] > p:first-child {
    height: 2lh;         /* 正確に2行分（line-height に依存） */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
[id^="randomQuote"] > p:first-child > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 0b. 引用コピー末尾ピリオド点滅 --- */
.fade-period {
    font-weight: 900;
    animation: fade-period-blink 0.5s step-end infinite;
}
.fade-period--green { color: #00ff00; }
@keyframes fade-period-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* --- 1. Design Tokens --- */
:root {
    /* Backgrounds */
    --bg-color: #0B0C0E;
    --card-bg: #131517;
    --border-color: rgba(255, 255, 255, 0.08);

    /* Text */
    --text-main: #F7F8F8;
    --text-muted: #8A8F98;

    /* Accents */
    --accent-color: #5E6AD2;/* 5E6AD2 */ 
    --accent-glow: rgba(94, 106, 210, 0.2);
    --accent2-color: #2b6cee;/* 5E6AD2 */ 
    --accent2-glow: rgba(94, 106, 210, 0.2);
    --neon-green: #00ff00;
    --neon-green-glow: rgba(0, 255, 0, 0.4);

    /* Font */
    --font-stack: 'Inter', 'Noto Sans JP', sans-serif;

    /* Spacing — clamp(mobile-min, viewport-scale, desktop-max) */
    --space-xs:  clamp(0.25rem, 0.5vw, 0.5rem);
    --space-sm:  clamp(0.5rem, 1.2vw, 1rem);
    --space-md:  clamp(0.75rem, 2vw, 1.5rem);
    --space-lg:  clamp(1rem, 2.5vw, 2rem);
    --space-xl:  clamp(1.5rem, 4vw, 3rem);
    --space-2xl: clamp(2rem, 5vw, 4rem);
    --space-3xl: clamp(2.5rem, 7vw, 6rem);
    --space-4xl: clamp(3rem, 9vw, 8rem);
}


/* --- 2. Reset & Base --- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- 2a. Shopify .rte wrapper neutralizer ---
   Shopify wraps custom HTML in <div class="rte">, which applies
   theme margins/borders to headings, paragraphs, images, links, tables.
   These rules reset those overrides so our custom styles take effect.
   On local (all.html), these selectors match nothing → zero impact. */
.rte {
    margin: 0; padding: 0;
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-stack);
}
.rte:after { display: none; }
.rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
}
.rte p, .rte ol, .rte ul, .rte table {
    margin-bottom: 0;
}
.rte img {
    display: inline-block;
}
.rte a {
    border-bottom: none !important;
    text-decoration: none !important;
    color: inherit !important;
}
.rte table {
    width: auto;
    background: none;
    border-spacing: 0;
}

/* --- 2b. Shopify layout wrapper neutralizer ---
   .custom__item adds 30px padding; .custom-content uses negative margins.
   .index-section adds 34px vertical margin. Reset all for full-width design. */
.custom__item { padding-left: 0 !important; margin-bottom: 0 !important; }
.custom-content { margin-left: 0 !important; margin-bottom: 0 !important; }
.index-section { margin: 0 !important; }

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-stack);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    line-height: 1.5;
    background-image:
        radial-gradient(ellipse 100% 50% at 50% 50%, rgba(94, 106, 210, 0.15) 0%, transparent 70%),
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 800px, 40px 40px, 40px 40px;
}

::selection {
    background-color: var(--accent-color);
    color: white;
}

img, video {
    display: block;
    max-width: 100%;
}


/* =============================================
   QUEST Typography Token System (q-* prefix)
   — Shopify theme CSS と衝突しないユニーク名
   — 全テキスト定義をここに集約
   ============================================= */

/* --- Size --- */
.q .q-text-xl   { font-size: clamp(6rem, 10vw, 10rem) !important; }
.q .q-text-lg   { font-size: clamp(1.7rem, 5vw, 4.5rem) !important; }
.q .q-text-md   { font-size: clamp(1.5rem, 4vw, 3rem) !important; }
.q .q-text-base { font-size: clamp(0.95rem, 1.6vw, 1.75rem) !important; }
.q .q-text-sm   { font-size: clamp(0.875rem, 1.5vw, 1.125rem) !important; }
.q .q-text-xs   { font-size: clamp(0.625rem, 1vw, 0.875rem) !important; }
.q .q-lead      { font-size: clamp(0.95rem, 3.5vw, 1.25rem) !important; }

/* --- Color --- */
.q .q-c-main   { color: #F7F8F8 !important; }
.q .q-c-muted  { color: #8A8F98 !important; }
.q .q-c-accent { color: #5E6AD2 !important; }
.q .q-c-green  { color: #00ff00 !important; }
.q .q-c-gold   { color: #c8a45d !important; }
.q .q-c-w80    { color: rgba(255,255,255,0.8) !important; }

/* --- Weight --- */
.q .q-w-light  { font-weight: 300 !important; }
.q .q-w-normal { font-weight: 400 !important; }
.q .q-w-bold   { font-weight: 700 !important; }
.q .q-w-black  { font-weight: 900 !important; }

/* --- Effect --- */
.q .q-glow-green  { text-shadow: 0 0 20px rgba(0,255,0,0.4) !important; }
.q .q-glow-accent { text-shadow: 0 0 20px rgba(94,106,210,0.2) !important; }
.q .q-gradient-hero {
    color: transparent !important;
    background-image: linear-gradient(to bottom, #ffffff 30%, rgba(255,255,255,0.75) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* --- Layout Utility --- */
.q .q-text-center { text-align: center !important; }
.q .q-text-italic { font-style: italic !important; }
.q .q-uppercase   { text-transform: uppercase !important; letter-spacing: 0.3em !important; }


/* --- 3. Typography (Legacy — local all.html compatibility) --- */

.heading-hero {
    font-size: clamp(1.7rem, 5vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(to bottom, #ffffff 30%, rgba(255, 255, 255, 0.5) 100%);
    word-break: keep-all;
    max-width: 90vw;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.heading-section {
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-main);
}

.heading-subtitle {
    font-size: clamp(0.95rem, 2.5vw, 2rem);
    font-weight: 300;
    letter-spacing: -0.025em;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.9);
    word-break: keep-all;
}

.text-body-lg {
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

.text-summary {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 300;
    line-height: 1.6;
    color: var(--text-main);
}

.text-quote {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 400;
    font-style: italic;
    line-height: 2.2;
    color: var(--text-main);
}

.text-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.text-overline {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    display: block;
}

.text-overline--wide {
    letter-spacing: 0.5em;
}


/* --- 4. Color Utilities --- */
.text-accent   { color: var(--accent-color); }
.text-muted    { color: var(--text-muted); }
.text-green    { color: var(--neon-green); }
.text-white-90 { color: rgba(255, 255, 255, 0.9); }
.text-white-80 { color: rgba(255, 255, 255, 0.8); }
.text-white-50 { color: rgba(255, 255, 255, 0.5); }

.text-glow {
    text-shadow: 0 0 20px var(--neon-green-glow);
}

.text-glow-accent {
    text-shadow: 0 0 20px var(--accent-glow);
}


/* --- 5. Layout --- */

.container {
    width: 100%;
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
}

.container--wide   { max-width: 80rem; }
.container--narrow { max-width: 56rem; }
.container--medium { max-width: 64rem; }

.section {
    position: relative;
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
    overflow: hidden;
    background-color: var(--bg-color);
}

.section--bordered {
    border-top: none;
}

/* Section background video/image (reusable) */
.section-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.section-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at center, black 40%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 80% at center, black 40%, transparent 75%);
}

.section-bg-video-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1;
}


/* --- 6. Hero Section --- */

.hero {
    position: relative;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--bg-color);
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__bg-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.hero__bg-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(11, 12, 14, 0.1) 0%,
        rgba(11, 12, 14, 0.7) 60%,
        rgba(11, 12, 14, 1) 100%
    );
    z-index: 2;
}

.hero__bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0%) brightness(1);
}

.hero__content {
    position: relative;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 80rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.25rem;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .hero__content { padding: 0 3rem; }
}

.hero__badge-area {
    margin-bottom: var(--space-lg);
    max-width: 56rem;
}

.hero__subtitle-accent {
    font-weight: 700;
    color: var(--accent-color);
    text-shadow: 0 0 20px var(--accent-glow);
    margin-top: 0.75rem;
    display: block;
}

.hero__headline {
    margin-bottom: var(--space-xl);
}

.hero__play-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 64rem;
    padding: 2.5rem 0;
}

/* Video layer (below text) */
.hero__video-layer {
    position: relative;
    width: 100%;
    max-width: 64rem;
    min-height: 180px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.hero__video-layer-bg {
    display: none;
}

.hero__video-layer-overlay {
    display: none;
}

.hero__play-overlay-text {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: clamp(1.25rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.5;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.8));
    padding: 2rem 1.5rem;
}

.hero__play-overlay-text span {
    max-width: 56rem;
}

@media (max-width: 767px) {
    .hero__content { padding: 0 1rem; }
    .heading-hero { max-width: 88vw; word-break: keep-all; }
    .hero__video-layer { min-height: 140px; }
    .hero__play-overlay-text { padding: 1.5rem 1rem; }
    .hero__badge-area { padding: 0 0.5rem; }
}


/* --- 7. Play Button --- */

.play-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    position: relative;
    z-index: 3;
}

.play-button__circle {
    width: 5rem;
    height: 5rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.55);
    transition: background-color 0.32s cubic-bezier(0.16, 1, 0.3, 1), color 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
    .play-button__circle { width: 7rem; height: 7rem; }
}

.play-button__circle:hover {
    background-color: white;
    color: black;
    border-color: white;
}

.play-button__icon {
    font-size: 2.25rem;
    transition: transform 0.24s ease;
}

@media (min-width: 768px) {
    .play-button__icon { font-size: 3rem; }
}

.play-button__circle:hover .play-button__icon {
    transform: scale(1.1);
}

.play-button__label {
    opacity: 0.4;
    transition: opacity 0.24s ease;
}

.play-button:hover .play-button__label {
    opacity: 1;
}


/* --- 8. Scroll Indicator --- */

.scroll-indicator {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.2;
}

.scroll-indicator__line {
    width: 1px;
    height: 4rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), transparent);
}


/* --- 9. Comparison Grid --- */

.comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5);
}

.comparison__card {
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(19, 21, 23, 0.55);
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .comparison__card { padding: var(--space-2xl); }
}

.comparison__card--past {
    border-right: 1px solid var(--border-color);
}

.comparison__card--future {
    background-color: rgba(19, 21, 23, 0.5);
}

.comparison__card-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(94, 106, 210, 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.48s ease;
    pointer-events: none;
}

.comparison__card--future:hover .comparison__card-glow {
    opacity: 1;
}

.comparison__label {
    margin-bottom: var(--space-md);
}

.comparison__title {
    font-size: clamp(1.1rem, 3vw, 1.75rem);
    font-weight: 700;
    margin-bottom: var(--space-lg);
}


/* --- 10. Quote Card --- */

.quote-card {
    max-width: 72rem;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding: var(--space-md) var(--space-md) var(--space-xl);
    border-radius: 12px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

.quote-card__line {
    width: 1px;
    height: 2rem;
    margin: 0 auto var(--space-md);
    background: linear-gradient(to bottom, transparent, rgba(94, 106, 210, 0.4), transparent);
}

.quote-card blockquote {
    margin-bottom: var(--space-lg);
}

.quote-card__attribution {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.quote-card__divider {
    width: 3rem;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
}

.quote-first-line {
    white-space: nowrap;
}
@media (max-width: 767px) {
    .quote-first-line {
        white-space: normal;
    }
}


/* --- 11. Buttons --- */

.btn-linear {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    border: 1px solid var(--border-color);
    background-color: rgba(255, 255, 255, 0.05);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    transition: background-color 0.16s ease, border-color 0.16s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    text-decoration: none;
}

.btn-linear:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-icon-bg {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background-color: var(--accent-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.16s ease;
}

.btn-linear:hover .btn-icon-bg {
    background-color: var(--accent-color);
}


/* --- 12. Badge --- */

.badge-linear {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(94, 106, 210, 0.3);
    background-color: rgba(94, 106, 210, 0.1);
    color: var(--accent-color);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    box-shadow: 0 0 20px var(--accent-glow);
}


/* --- 13. Decorative --- */

.accent-line {
    width: 3rem;
    height: 3px;
    margin: 0 auto;
    background-color: var(--accent-color);
    box-shadow: 0 0 15px var(--accent-glow);
    border-radius: 2px;
}


/* --- 14. Animations --- */

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.64s cubic-bezier(0.16, 1, 0.3, 1), transform 0.64s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: none;
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }


/* --- 15. Utilities --- */

.text-center { text-align: center; }
.mx-auto     { margin-left: auto; margin-right: auto; }
.block        { display: block; }
.relative     { position: relative; }

.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }
.mb-4xl { margin-bottom: var(--space-4xl); }

/* Responsive visibility */
.hide-mobile  { display: none; }
.show-mobile  { display: block; }

@media (min-width: 640px) {
    .hide-mobile { display: block; }
}

@media (min-width: 768px) {
    .show-mobile { display: none; }
}


/* --- 16. Section Labels (DEV ONLY) --- */
.section-label {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    padding: 6px 16px;
    background-color: rgba(94, 106, 210, 0.9);
    color: #fff;
    font-family: 'Inter', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-bottom-right-radius: 8px;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.section-separator {
    display: none;
}
/* --- end DEV ONLY section --- */


/* --- 17. Impact Hero (Full-screen statement) --- */

.impact-hero {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--bg-color);
    background-size: cover;
    background-position: center;
}

.impact-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.impact-hero__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.impact-hero__content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1.5rem;
}

.heading-impact {
    font-size: clamp(6rem, 10vw, 10rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(to bottom, #ffffff 30%, rgba(255, 255, 255, 0.5) 100%);
    text-shadow: none;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8));
    margin-bottom: var(--space-lg);
}

.accent-line--green {
    width: 8rem;
    height: 4px;
    background-color: var(--neon-green);
    box-shadow: 0 0 20px var(--neon-green-glow);
    border-radius: 2px;
    margin-top: var(--space-lg);
}


/* --- 18. Review Cards --- */

.review-header {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
    .review-header {
        flex-direction: row;
        align-items: baseline;
    }
}

.review-rating-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background-color: rgba(19, 21, 23, 0.85);
    border-radius: 9999px;
    border: 1px solid var(--border-color);
}

.review-rating-badge__score {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
}

.review-rating-badge .star-filled {
    font-variation-settings: 'FILL' 1;
    color: var(--accent-color);
    font-size: 1rem;
}

.review-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .review-grid {
        grid-template-columns: 1fr 1fr;
        justify-items: center;
    }
    .review-grid > .review-card {
        width: 100%;
    }
    .review-grid > .review-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 50%;
    }
}

.review-card {
    background-color: #ffffff;
    border: 2px solid #111;
    border-radius: 12px;
    padding: var(--space-md);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    transition: box-shadow 0.24s ease, transform 0.24s ease, border-color 0.24s ease;
}

.review-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    border-color: #111;
}

.review-card__quote-icon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1.5rem;
    color: rgba(0, 0, 0, 0.04);
    transition: color 0.24s ease;
}

.review-card:hover .review-card__quote-icon {
    color: rgba(0, 0, 0, 0.08);
}

.review-card__quote-icon .material-symbols-outlined {
    font-size: 5rem;
}

.review-card__stars {
    display: flex;
    gap: 0.25rem;
    color: #FFB400;
}

.review-card__stars .material-symbols-outlined {
    font-size: 1.5rem;
    font-variation-settings: 'FILL' 1;
}

.review-card__text {
    font-size: clamp(0.95rem, 2vw, 1.3rem);
    font-weight: 700;
    line-height: 1.7;
    color: #333;
    font-style: normal;
    position: relative;
    z-index: 1;
}

.review-card__date {
    font-size: 0.9rem;
    font-weight: 400;
    color: #999;
    margin-top: auto;
}
.review-card__source {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.75rem;
    color: var(--accent-color, #5E6AD2);
    text-decoration: none;
    z-index: 2;
}
.review-card__source:hover {
    text-decoration: underline;
}


/* --- 19. Award Section --- */

.award-section {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 0;
    background-color: var(--bg-color);
}

.award-section__bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    z-index: 0;
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%),
        linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-image:
        linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%),
        linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-composite: intersect;
}

.award-section__bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.award-section__bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.92));
    z-index: 1;
}

.award-section__content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 42rem;
    padding: 10% 1.5rem;
    margin: 0 auto;
    text-align: center;
}

.award-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
}

.award-list__item {
    font-size: 11px;
    letter-spacing: 0.15em;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 768px) {
    .award-list__item { font-size: 0.75rem; }
}


/* --- 20. Technical Table --- */

.tech-table-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
}

.tech-table-wrapper__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.56s ease;
}

.tech-table-wrapper:hover .tech-table-wrapper__bg {
    transform: scale(1.05);
}

.tech-table-wrapper__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 0;
}

.tech-table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    position: relative;
    z-index: 1;
}

.tech-table th {
    padding: 1.25rem 0.75rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent-color);
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(11, 12, 14, 0.95);
    position: sticky;
    top: 0;
}

.tech-table td {
    padding: var(--space-lg) 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--border-color);
    vertical-align: top;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
}

.tech-table td:first-child {
    font-weight: 700;
    color: var(--text-main);
}

.tech-table tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.tech-table .accent-row {
    border-left: 2px solid var(--accent-color);
    background-color: rgba(94, 106, 210, 0.08);
}

.tech-table .accent-row td:first-child {
    color: var(--accent-color);
}

.tech-table .accent-row--green {
    border-left: 2px solid var(--neon-green);
    background-color: rgba(0, 255, 0, 0.05);
}

.tech-table .accent-row--green td:first-child {
    color: var(--neon-green);
}

.tech-table td .note {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-style: normal;
}


/* --- 20b. QUEST Features (flex-based 2-col, no scroll) --- */

.quest-features {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
}

.quest-features__header {
    display: flex;
    background: rgba(19, 21, 23, 0.95);
    border-bottom: 1px solid var(--border-color);
}

.quest-features__th {
    padding: 1.25rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.quest-features__th:first-child {
    border-right: 1px solid var(--border-color);
}

.quest-features__row {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.16s ease;
}

.quest-features__row:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.quest-features__row--accent {
    border-left: 2px solid var(--accent-color);
    background-color: rgba(94, 106, 210, 0.08);
}

.quest-features__row--accent .quest-features__label {
    color: var(--accent-color);
}

.quest-features__label {
    width: 30%;
    min-width: 0;
    flex-shrink: 0;
    padding: 1rem;
    font-size: 0.875rem;
    border-right: 1px solid var(--border-color);
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.6;
    word-break: break-word;
}

.quest-features__value {
    width: 70%;
    min-width: 0;
    padding: 1rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    word-break: break-word;
}

@media (max-width: 640px) {
    .quest-features__th {
        padding: 1rem 0.75rem;
        font-size: 0.75rem;
    }
    .quest-features__label {
        padding: 0.75rem;
        font-size: 0.8rem;
    }
    .quest-features__value {
        padding: 0.75rem;
        font-size: 0.8rem;
    }
}


/* --- 22. Glass Panel --- */

.glass-panel {
    background: rgba(19, 21, 23, 0.92);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: var(--space-lg);
}

@media (min-width: 768px) {
    .glass-panel { padding: var(--space-xl); }
}


/* --- 23. Accordion (Details/Summary) --- */

.accordion {
    background-color: #0B0C0E;
    border: 1px solid #555;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.24s ease;
    color: #fff;
}

.accordion:hover {
    border-color: #888;
}

.accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    cursor: pointer;
    list-style: none;
    transition: background-color 0.16s ease;
}

.accordion summary:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.accordion summary .expand-icon {
    transition: transform 0.24s ease;
    color: var(--accent-color);
    font-size: 2rem;
}

.accordion[open] summary .expand-icon {
    transform: rotate(180deg);
}

.accordion__body {
    padding: var(--space-lg);
    border-top: 1px solid var(--border-color);
    background-color: rgba(255, 255, 255, 0.01);
}

.accordion__author {
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
    border-radius: 9999px;
    border: 1px solid rgba(94, 106, 210, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(94, 106, 210, 0.05);
}


/* --- 24. Collection Table --- */

.collection-table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.collection-table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    min-width: 600px;
}

.collection-table thead {
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border-color);
}

.collection-table th {
    padding: 1.5rem 2rem;
    color: var(--accent-color);
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    text-transform: uppercase;
    border: 1px solid var(--border-color);
}

.collection-table td {
    padding: 2rem;
    vertical-align: top;
    border: 1px solid var(--border-color);
}

.collection-table tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.collection-table__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.2);
    transition: background-color 0.24s ease;
}

.collection-table tr:hover .collection-table__dot {
    background-color: var(--accent-color);
}

.collection-table__dot--active {
    background-color: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-glow);
}

.collection-table__album-cell {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.collection-table__album-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(11, 12, 14, 0.85);
}

.collection-table__tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: rgba(94, 106, 210, 0.1);
    border: 1px solid rgba(94, 106, 210, 0.2);
    color: var(--accent-color);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 4px;
}

.collection-table__preset {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.collection-table__preset-num {
    color: var(--accent-color);
    font-family: monospace;
}

.collection-table__preset-name {
    color: rgba(255, 255, 255, 0.8);
}


/* --- 25. Feature Highlight --- */

.feature-highlight {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 767px) {
    .feature-highlight {
        flex-direction: column;
        align-items: flex-start;
    }
}

.feature-highlight__icon {
    color: var(--neon-green);
}

.feature-highlight__body {
    padding-left: 2.5rem;
    border-left: 1px solid var(--border-color);
}

.feature-highlight__body p {
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(0.85rem, 1.8vw, 1.125rem);
    font-weight: 300;
    line-height: 1.8;
}

.feature-highlight__body .highlight-label {
    color: var(--text-main);
    font-weight: 500;
}


/* --- 26. CTA Link --- */

.cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 2.5rem;
    background-color: var(--accent-color);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    transition: background-color 0.16s ease, transform 0.16s ease;
    box-shadow: 0 8px 24px rgba(94, 106, 210, 0.3);
}

.cta-link:hover {
    background-color: #4e5abc;
    transform: scale(1.02);
}


/* --- 27. Statement Section --- */

.statement {
    padding: var(--space-4xl) 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--card-bg);
}

.heading-statement {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--text-main);
}


/* --- 27b. Factor Accordion --- */

.factor-accordion {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: var(--card-bg);
}

.factor-accordion__trigger {
    cursor: pointer;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-lg) var(--space-xl);
    transition: background-color 0.16s ease;
}

.factor-accordion__trigger::-webkit-details-marker {
    display: none;
}

.factor-accordion__trigger:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.factor-accordion[open] .factor-accordion__trigger {
    border-bottom: 1px solid var(--border-color);
}

.factor-accordion__body {
    animation: accordion-open 0.24s ease;
}

@keyframes accordion-open {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 2000px; }
}


/* --- 28. Scroll Hint --- */

.scroll-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-radius: 8px;
    color: #ef4444;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    animation: scroll-hint-pulse 1.6s ease-in-out infinite;
    pointer-events: none;
}

.scroll-hint.visible {
    display: inline-flex;
}

.scroll-hint .material-symbols-outlined {
    font-size: 1.35rem;
    color: #ef4444;
}

@keyframes scroll-hint-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}


/* --- 29. HW-Update Hero (Full-screen with background image) --- */

.hw-hero {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-color);
}

.hw-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%),
        linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-image:
        linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%),
        linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-composite: intersect;
}

.hw-hero__bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.hw-hero__bg-img-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 2;
}

.hw-hero__bg-video-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1;
}

.hw-hero__bg-img-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 3;
}

.hw-hero__header {
    position: relative;
    z-index: 10;
    padding-top: 3rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}

@media (min-width: 768px) {
    .hw-hero__header { padding-top: 4rem; }
}

.hw-hero__meta {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 768px) {
    .hw-hero__meta { font-size: 0.75rem; }
}

.hw-hero__release {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--text-main);
    margin-bottom: var(--space-sm);
}

@media (min-width: 768px) {
    .hw-hero__release { font-size: 1rem; }
}

.hw-hero__title {
    font-size: clamp(1.25rem, 3vw, 1.875rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--text-main);
}

.hw-hero__main {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
}

.hw-hero__copy {
    font-size: clamp(6rem, 12vw, 10rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.04em;
    text-align: center;
    color: var(--text-main);
    text-shadow: 0 0 50px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.4);
}

.hw-hero__spacer {
    height: 120px;
    flex-shrink: 0;
    pointer-events: none;
}

@media (min-width: 768px) {
    .hw-hero__spacer { height: 160px; }
}


/* --- 30. HW Feature Section --- */

.hw-feature {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4xl) 1.5rem;
    overflow: hidden;
    background-color: var(--bg-color);
}

.hw-feature__inner {
    max-width: 64rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hw-feature__text-block {
    text-align: center;
    margin-bottom: var(--space-3xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.hw-feature__subcopy {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 500;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.9);
}

.hw-feature__headline {
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text-main);
}

.hw-feature__sub-headline {
    font-size: clamp(1.125rem, 3vw, 1.875rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #c8a45d;
}

.hw-feature__image-area {
    position: relative;
    width: 100%;
    max-width: 56rem;
    margin: 0 auto var(--space-3xl);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at center, black 40%, transparent 70%);
    mask-image: radial-gradient(ellipse 80% 80% at center, black 40%, transparent 70%);
}

.hw-feature__image-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle, rgba(200, 164, 93, 0.06) 0%, transparent 55%);
    border-radius: 9999px;
    pointer-events: none;
}

.hw-feature__image-area img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5));
    transition: transform 0.56s ease;
}

.hw-feature__image-area:hover img {
    transform: scale(1.02);
}

.hw-feature__body {
    max-width: 40rem;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .hw-feature__body { text-align: left; }
}

.hw-feature__body-title {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 700;
    color: var(--text-main);
    padding-left: 1rem;
    border-left: 4px solid #c8a45d;
}

.hw-feature__body p {
    font-size: clamp(0.875rem, 1.5vw, 1.125rem);
    font-weight: 300;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
}

.hw-feature__body .text-bold {
    color: var(--text-main);
    font-weight: 500;
}


/* --- 31. Update Badge List --- */

.update-list {
    max-width: 40rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    text-align: left;
    padding: 0 1rem;
}

.update-list__item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.update-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 30px;
    padding: 4px 12px;
    border-radius: 9999px;
    border: 1px solid #00AEEF;
    color: #00AEEF;
    font-size: 0.8rem;
    font-weight: 700;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.update-list__item:hover .update-badge {
    background-color: #00AEEF;
    color: black;
}

.update-list__item p {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    font-weight: 500;
    letter-spacing: 0.05em;
}

.gold-text {
    background: linear-gradient(135deg, #e3c48a 0%, #a68b4d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* --- 32. Section Divider Line --- */

.divider-gradient {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    border: none;
    margin: 0;
}


/* --- 33. HW-SPEC Section --- */

.specs-container {
    position: relative;
    width: 100%;
    min-height: 1000px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 80px 1.5rem;
    overflow: visible;
    background-color: var(--bg-color);
}

.specs-inner {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.specs-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: auto;
}

.specs-header__overline {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8em;
    text-transform: uppercase;
    color: #D4AF37;
    opacity: 0.9;
    margin-bottom: var(--space-sm);
}

.specs-header__title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.4em;
    background: linear-gradient(to bottom, #ffffff 0%, #a1a1a1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.specs-header__line {
    width: 8rem;
    height: 1px;
    margin-top: var(--space-lg);
    background: linear-gradient(to right, transparent, #D4AF37, transparent);
    opacity: 0.4;
}

.specs-grid {
    margin: auto 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 4rem;
}

@media (min-width: 768px) {
    .specs-grid { grid-template-columns: 1fr 1fr; }
}

.spec-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.spec-row:last-child {
    border-bottom: none;
}

@media (min-width: 768px) {
    .spec-row:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

.spec-row__icon {
    flex-shrink: 0;
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.3));
}

.spec-row__icon .material-symbols-outlined {
    font-size: 3.5rem;
    background: linear-gradient(135deg, #F9F295 0%, #E0AA3E 25%, #B88A44 50%, #E0AA3E 75%, #F9F295 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48;
}

.spec-row__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.spec-row__title {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-main);
}

.spec-row__subtitle {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

.spec-row__value {
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--text-main);
    margin-top: 0.5rem;
}

.spec-row__note {
    font-size: 11px;
    font-weight: 300;
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.125rem;
}

.spec-row__detail {
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0.9;
}

.spec-row__codec {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    margin-top: 0.5rem;
}

/* --- HW-SPEC: white base for both modes --- */
[data-section-name="HW-SPEC"] {
    background-color: #fff !important;
    color: #1a1a1a;
}
[data-section-name="HW-SPEC"] .specs-container {
    background-color: transparent;
}
[data-section-name="HW-SPEC"] .specs-header__overline {
    color: #4F6AFF;
}
[data-section-name="HW-SPEC"] .specs-header__title {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #1a1a1a !important;
    color: #1a1a1a !important;
}
[data-section-name="HW-SPEC"] .specs-header__line {
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.15), transparent);
}
[data-section-name="HW-SPEC"] .spec-row {
    border-color: rgba(0,0,0,0.08);
}
[data-section-name="HW-SPEC"] .spec-row__icon .material-symbols-outlined {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #4F6AFF;
    color: #4F6AFF;
    filter: none;
}
[data-section-name="HW-SPEC"] .spec-row__icon {
    filter: none;
}
[data-section-name="HW-SPEC"] .spec-row__title {
    color: #1a1a1a;
}
[data-section-name="HW-SPEC"] .spec-row__subtitle {
    color: #888;
}
[data-section-name="HW-SPEC"] .spec-row__value {
    color: #1a1a1a;
}
[data-section-name="HW-SPEC"] .spec-row__note {
    color: #888;
}
[data-section-name="HW-SPEC"] .spec-row__detail {
    color: #1a1a1a;
}
[data-section-name="HW-SPEC"] .q-c-main {
    color: #1a1a1a !important;
}
[data-section-name="HW-SPEC"] .accordion {
    background-color: #fff;
    border-color: #ddd;
    color: #1a1a1a;
}
[data-section-name="HW-SPEC"] .accordion:hover {
    border-color: #bbb;
}
[data-section-name="HW-SPEC"] .accordion summary:hover {
    background-color: rgba(0, 0, 0, 0.03);
}
[data-section-name="HW-SPEC"] .accordion summary span {
    color: #1a1a1a;
}
[data-section-name="HW-SPEC"] .accordion .expand-icon {
    color: #4F6AFF;
}
[data-section-name="HW-SPEC"] .accordion__body {
    border-top-color: #ddd;
    background-color: rgba(0, 0, 0, 0.01);
}
[data-section-name="HW-SPEC"] .accordion__body td {
    color: #444;
    border-color: #ddd;
}
[data-section-name="HW-SPEC"] .accordion__body td:first-child {
    color: #1a1a1a;
}
[data-section-name="HW-SPEC"] .accordion__body p {
    color: #888;
}
[data-section-name="HW-SPEC"] .collection-table-wrapper {
    border-color: #ddd;
}
[data-section-name="HW-SPEC"] .collection-table {
    border-color: #ddd;
}

.specs-footer {
    margin-top: auto;
    display: flex;
    justify-content: center;
    opacity: 0.2;
}

.specs-footer__line {
    width: 100%;
    max-width: 40rem;
    height: 1px;
    background: linear-gradient(to right, transparent, #D4AF37, transparent);
}


/* --- 33b. Make Section --- */

.make-checklist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

@media (max-width: 767px) {
    .make-checklist-grid {
        grid-template-columns: 1fr;
    }
}

.make-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.make-checklist__item {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.make-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

@media (max-width: 1023px) {
    .make-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .make-feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
}

.make-feature-card {
    background: rgba(19, 21, 23, 0.92);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    transition: border-color 0.24s ease, transform 0.24s ease;
}

.make-feature-card:hover {
    border-color: rgba(0, 255, 0, 0.3);
    transform: translateY(-2px);
}

.make-feature-card__title {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.5;
    text-align: center;
}
@media (max-width: 767px) {
    .make-feature-card {
        padding: var(--space-sm);
    }
    .make-feature-card__title {
        font-size: clamp(0.75rem, 1.8vw, 0.9rem);
    }
}

.make-feature-card__img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}


/* --- 34. Noise Control Section --- */

.nc-section {
    background-color: var(--bg-color);
    color: var(--text-main);
}

/* Wave visualization */
.nc-wave-chaotic {
    filter: blur(1px);
    opacity: 0.8;
}

.nc-anti-wave {
    filter: drop-shadow(0 0 8px var(--accent-color));
}

/* Top copy */
.nc-top-overline {
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    line-height: 1.8;
}

.nc-top-title {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.mt-lg {
    margin-top: var(--space-lg);
}

/* Carousel container */
.nc-carousel {
    position: relative;
    max-width: 48rem;
    margin: 0 auto;
}

/* Navigation tabs */
.nc-carousel__nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.nc-carousel__dot {
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-stack);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: border-color 0.24s ease, color 0.24s ease, background 0.24s ease;
}

.nc-carousel__dot:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-main);
}

.nc-carousel__dot.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

/* Viewport & track */
.nc-carousel__viewport {
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
}

.nc-carousel__track {
    display: flex;
    transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Individual card */
.nc-card {
    min-width: 100%;
    flex-shrink: 0;
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 768px) {
    .nc-card {
        padding: var(--space-md) var(--space-xl);
    }
}

.nc-card__heading {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
    line-height: 1.4;
}

.nc-card__image {
    width: 100%;
    max-width: 680px;
    margin: 0 auto var(--space-md);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nc-card__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Items 1 & 2: enlarged display */
.nc-card:nth-child(1) .nc-card__image img,
.nc-card:nth-child(2) .nc-card__image img {
    transform: scale(1.15);
}

.nc-card__body {
    text-align: center;
}

.nc-card__main-text {
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.nc-card__sub-text {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.25rem;
}

.nc-card__detail {
    font-size: clamp(0.8rem, 1.5vw, 0.95rem);
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Arrow buttons */
.nc-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: rgba(11, 12, 14, 0.8);
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.16s ease, border-color 0.16s ease;
    z-index: 2;
}

.nc-carousel__arrow:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.nc-carousel__arrow--prev {
    left: -1.5rem;
}

.nc-carousel__arrow--next {
    right: -1.5rem;
}

@media (max-width: 767px) {
    .nc-carousel__arrow--prev {
        left: 0.5rem;
    }
    .nc-carousel__arrow--next {
        right: 0.5rem;
    }
    .nc-carousel__arrow {
        width: 36px;
        height: 36px;
        background: rgba(11, 12, 14, 0.9);
    }
}


/* --- 35. Preset Carousel (horizontal scroll) --- */

.preset-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
    padding-bottom: var(--space-sm);
}

.preset-carousel::-webkit-scrollbar {
    height: 4px;
}

.preset-carousel::-webkit-scrollbar-track {
    background: transparent;
}

.preset-carousel::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
}

.preset-carousel__track {
    display: flex;
    gap: var(--space-lg);
    padding: 0.25rem;
}

.preset-card {
    flex: 0 0 220px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: var(--card-bg);
    transition: border-color 0.24s ease, transform 0.24s ease;
}

.preset-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.preset-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--card-bg);
}

.preset-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.4s ease;
}

.preset-card:hover .preset-card__image img {
    transform: scale(1.05);
}

.preset-card__body {
    padding: var(--space-md);
}

.preset-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}

.preset-card__desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.preset-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.preset-carousel__arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: rgba(19, 21, 23, 0.85);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
    z-index: 2;
}

.preset-carousel__arrow:hover {
    background: rgba(255,255,255,0.12);
    color: var(--text-main);
    border-color: rgba(255,255,255,0.25);
}

.preset-carousel__arrow .material-symbols-outlined {
    font-size: 1.5rem;
}

/* Mobile: compact arrows */
@media (max-width: 767px) {
    .preset-carousel__arrow {
        width: 32px;
        height: 32px;
    }
    .preset-carousel__arrow .material-symbols-outlined {
        font-size: 1.2rem;
    }
    .preset-carousel-wrapper {
        gap: 0.25rem;
    }
}

@media (min-width: 768px) {
    .preset-card {
        flex: 0 0 280px;
    }
}


/* --- 36. Engineer Carousel --- */

.engineer-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.engineer-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
    padding-bottom: var(--space-sm);
}

.engineer-carousel::-webkit-scrollbar { height: 4px; }
.engineer-carousel::-webkit-scrollbar-track { background: transparent; }
.engineer-carousel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.engineer-carousel__track {
    display: flex;
    gap: var(--space-lg);
    padding: 0.25rem;
}

.engineer-card {
    flex: 0 0 240px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-color);
    transition: border-color 0.24s ease, transform 0.24s ease;
}

.engineer-card:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

.engineer-card__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

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

.engineer-card__body {
    padding: var(--space-md);
}

.engineer-card__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.375rem;
}

.engineer-card__profile {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.engineer-carousel__arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: rgba(19, 21, 23, 0.85);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.engineer-carousel__arrow:hover {
    background: rgba(255,255,255,0.12);
    color: var(--text-main);
    border-color: rgba(255,255,255,0.25);
}

.engineer-carousel__arrow .material-symbols-outlined {
    font-size: 1.5rem;
}

@media (max-width: 767px) {
    .engineer-carousel__arrow { display: none; }
    .engineer-carousel-wrapper { gap: 0; }
    .engineer-card { flex: 0 0 200px; }
}


/* --- 37. Material Icons --- */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.star-filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}


/* --- 38. FAQ Background Paths --- */

.faq-bg-paths {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.7;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, black 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 70% at center, black 40%, transparent 100%);
}

.faq-path {
    fill: none;
}

/* Path 1 */
.faq-path--1 {
    stroke-dasharray: 1800;
    stroke-dashoffset: 1800;
    animation:
        faq-path-draw 6.4s ease-in-out infinite alternate,
        faq-path-drift-1 9.6s ease-in-out infinite;
}

/* Path 2 */
.faq-path--2 {
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    animation:
        faq-path-draw-2 8s ease-in-out infinite alternate,
        faq-path-drift-2 12s ease-in-out infinite;
    animation-delay: 1s, 0.5s;
}

/* Path 3 */
.faq-path--3 {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation:
        faq-path-draw-3 5.6s ease-in-out infinite alternate,
        faq-path-drift-3 14.4s ease-in-out infinite;
    animation-delay: 2s, 1s;
}

/* Path 4 */
.faq-path--4 {
    stroke-dasharray: 1700;
    stroke-dashoffset: 1700;
    animation:
        faq-path-draw-4 7.2s ease-in-out infinite alternate,
        faq-path-drift-4 11.2s ease-in-out infinite;
    animation-delay: 0.5s, 2s;
}

/* Path 5 */
.faq-path--5 {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation:
        faq-path-draw-5 8.8s ease-in-out infinite alternate,
        faq-path-drift-5 12.8s ease-in-out infinite;
    animation-delay: 3s, 1.5s;
}

/* Path 6 */
.faq-path--6 {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation:
        faq-path-draw-6 10.4s ease-in-out infinite alternate,
        faq-path-drift-6 16s ease-in-out infinite;
    animation-delay: 1.5s, 3s;
}

/* Path 7 */
.faq-path--7 {
    stroke-dasharray: 1750;
    stroke-dashoffset: 1750;
    animation:
        faq-path-draw-7 7.2s ease-in-out infinite alternate,
        faq-path-drift-7 10.4s ease-in-out infinite;
    animation-delay: 0.8s, 1.2s;
}

/* Path 8 */
.faq-path--8 {
    stroke-dasharray: 1850;
    stroke-dashoffset: 1850;
    animation:
        faq-path-draw-8 8.8s ease-in-out infinite alternate,
        faq-path-drift-8 13.6s ease-in-out infinite;
    animation-delay: 2.5s, 0.8s;
}

/* Path 9 */
.faq-path--9 {
    stroke-dasharray: 1550;
    stroke-dashoffset: 1550;
    animation:
        faq-path-draw-9 9.6s ease-in-out infinite alternate,
        faq-path-drift-9 15.2s ease-in-out infinite;
    animation-delay: 1.2s, 2.5s;
}

/* Path 10 */
.faq-path--10 {
    stroke-dasharray: 1900;
    stroke-dashoffset: 1900;
    animation:
        faq-path-draw-10 5.6s ease-in-out infinite alternate,
        faq-path-drift-10 8.8s ease-in-out infinite;
    animation-delay: 3.5s, 1.8s;
}

/* Path 11 */
.faq-path--11 {
    stroke-dasharray: 1450;
    stroke-dashoffset: 1450;
    animation:
        faq-path-draw-11 11.2s ease-in-out infinite alternate,
        faq-path-drift-11 16.8s ease-in-out infinite;
    animation-delay: 0.3s, 3.2s;
}

/* Path 12 */
.faq-path--12 {
    stroke-dasharray: 1350;
    stroke-dashoffset: 1350;
    animation:
        faq-path-draw-12 8s ease-in-out infinite alternate,
        faq-path-drift-12 12.8s ease-in-out infinite;
    animation-delay: 2.2s, 0.6s;
}

/* Stroke-dashoffset keyframes (path drawing/flowing) */
@keyframes faq-path-draw {
    from { stroke-dashoffset: 1800; }
    to   { stroke-dashoffset: 0; }
}

@keyframes faq-path-draw-2 {
    from { stroke-dashoffset: 1600; }
    to   { stroke-dashoffset: -200; }
}

@keyframes faq-path-draw-3 {
    from { stroke-dashoffset: 2000; }
    to   { stroke-dashoffset: 100; }
}

@keyframes faq-path-draw-4 {
    from { stroke-dashoffset: 1700; }
    to   { stroke-dashoffset: -100; }
}

@keyframes faq-path-draw-5 {
    from { stroke-dashoffset: 1500; }
    to   { stroke-dashoffset: 0; }
}

@keyframes faq-path-draw-6 {
    from { stroke-dashoffset: 1200; }
    to   { stroke-dashoffset: -150; }
}

@keyframes faq-path-draw-7 {
    from { stroke-dashoffset: 1750; }
    to   { stroke-dashoffset: -80; }
}

@keyframes faq-path-draw-8 {
    from { stroke-dashoffset: 1850; }
    to   { stroke-dashoffset: 50; }
}

@keyframes faq-path-draw-9 {
    from { stroke-dashoffset: 1550; }
    to   { stroke-dashoffset: -120; }
}

@keyframes faq-path-draw-10 {
    from { stroke-dashoffset: 1900; }
    to   { stroke-dashoffset: 0; }
}

@keyframes faq-path-draw-11 {
    from { stroke-dashoffset: 1450; }
    to   { stroke-dashoffset: -60; }
}

@keyframes faq-path-draw-12 {
    from { stroke-dashoffset: 1350; }
    to   { stroke-dashoffset: 0; }
}

/* Vertical drift keyframes (gentle breathing movement) */
@keyframes faq-path-drift-1 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-15px); }
}

@keyframes faq-path-drift-2 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(20px); }
}

@keyframes faq-path-drift-3 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-25px); }
}

@keyframes faq-path-drift-4 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(18px); }
}

@keyframes faq-path-drift-5 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

@keyframes faq-path-drift-6 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(12px); }
}

@keyframes faq-path-drift-7 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(14px); }
}

@keyframes faq-path-drift-8 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-18px); }
}

@keyframes faq-path-drift-9 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(11px); }
}

@keyframes faq-path-drift-10 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-22px); }
}

@keyframes faq-path-drift-11 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

@keyframes faq-path-drift-12 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-13px); }
}



/* --- 39. Wavy Background Canvas --- */

.wavy-bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
}

/* --- #01 PROMIX-INTRO: UPDATE text glow breathing --- */
.update-glow {
    text-shadow: 0 0 20px rgba(0, 255, 0, 0.4), 0 0 40px rgba(0, 255, 0, 0.2), 0 0 80px rgba(0, 255, 0, 0.1);
    animation: update-glow-breathe 4s ease-in-out infinite !important;
}

@keyframes update-glow-breathe {
    0%, 100% {
        text-shadow: 0 0 20px rgba(0, 255, 0, 0.4), 0 0 40px rgba(0, 255, 0, 0.2), 0 0 80px rgba(0, 255, 0, 0.1);
    }
    50% {
        text-shadow: 0 0 30px rgba(0, 255, 0, 0.7), 0 0 60px rgba(0, 255, 0, 0.4), 0 0 120px rgba(0, 255, 0, 0.2);
    }
}

/* --- #01 PROMIX-INTRO: neon green glow border (top & bottom only) --- */
[data-section-name="PROMIX-INTRO"]::before,
[data-section-name="PROMIX-INTRO"]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(0, 255, 0, 0.56);
    z-index: 10;
    box-shadow:
        0 0 24px 6px rgba(0, 255, 0, 0.35),
        0 0 60px 12px rgba(0, 255, 0, 0.21),
        0 0 120px 24px rgba(0, 255, 0, 0.1);
    animation: green-glow-pulse 3s ease-in-out infinite;
}
[data-section-name="PROMIX-INTRO"]::before { top: 0; }
[data-section-name="PROMIX-INTRO"]::after { bottom: 0; }

@keyframes green-glow-pulse {
    0%, 100% {
        box-shadow:
            0 0 9px 2px rgba(0, 255, 0, 0.1),
            0 0 24px 5px rgba(0, 255, 0, 0.04),
            0 0 48px 10px rgba(0, 255, 0, 0.014);
        background: rgba(0, 255, 0, 0.21);
    }
    50% {
        box-shadow:
            0 0 36px 9px rgba(0, 255, 0, 0.49),
            0 0 90px 18px rgba(0, 255, 0, 0.315),
            0 0 180px 36px rgba(0, 255, 0, 0.14);
        background: rgba(0, 255, 0, 0.665);
    }
}

/* --- Text Shake Animation (1s shake, 3s pause, repeat) --- */
@keyframes text-shake {
    0%     { transform: translate(0, 0); }
    0.6%   { transform: translate(-0.1px, 0); }
    1.2%   { transform: translate(0.1px, -0.1px); }
    1.8%   { transform: translate(-0.1px, 0.1px); }
    2.5%   { transform: translate(0.1px, 0); }
    3.1%   { transform: translate(0, -0.1px); }
    3.7%   { transform: translate(-0.1px, 0.1px); }
    4.3%   { transform: translate(0.1px, -0.1px); }
    5%     { transform: translate(-0.1px, 0); }
    5.6%   { transform: translate(0.1px, 0.1px); }
    6.2%   { transform: translate(0, -0.1px); }
    6.8%   { transform: translate(-0.1px, 0); }
    7.5%   { transform: translate(0.1px, -0.1px); }
    8.1%   { transform: translate(-0.1px, 0.1px); }
    8.7%   { transform: translate(0.1px, 0); }
    9.3%   { transform: translate(0, -0.1px); }
    10%    { transform: translate(-0.1px, 0.1px); }
    10.6%  { transform: translate(0.1px, -0.1px); }
    11.2%  { transform: translate(-0.1px, 0); }
    11.8%  { transform: translate(0.1px, 0.1px); }
    12.5%  { transform: translate(0, -0.1px); }
    13.1%  { transform: translate(-0.1px, 0); }
    13.7%  { transform: translate(0.1px, -0.1px); }
    14.3%  { transform: translate(-0.1px, 0.1px); }
    15%    { transform: translate(0.1px, 0); }
    15.6%  { transform: translate(0, -0.1px); }
    16.2%  { transform: translate(-0.1px, 0.1px); }
    16.8%  { transform: translate(0.1px, -0.1px); }
    17.5%  { transform: translate(-0.1px, 0); }
    18.1%  { transform: translate(0.1px, 0.1px); }
    18.7%  { transform: translate(0, -0.1px); }
    19.3%  { transform: translate(-0.1px, 0); }
    20%    { transform: translate(0.1px, -0.1px); }
    20.6%  { transform: translate(-0.1px, 0.1px); }
    21.2%  { transform: translate(0.1px, 0); }
    21.8%  { transform: translate(0, -0.1px); }
    22.5%  { transform: translate(-0.1px, 0.1px); }
    23.1%  { transform: translate(0.1px, -0.1px); }
    23.7%  { transform: translate(-0.1px, 0); }
    24.3%  { transform: translate(0, 0); }
    25%    { transform: translate(0, 0); }
    100%   { transform: translate(0, 0); }
}
.text-shake {
    display: inline-block;
    animation: text-shake 4s ease-in-out infinite;
}


/* ============================================
 * LIGHT THEME — Toggle via body.light-theme
 * ============================================ */

/* --- Global Token Overrides --- */
body.light-theme {
    --bg-color: #fff;
    --card-bg: #f7f7f8;
    --border-color: #ddd;
    --text-main: #1a1a1a;
    --text-muted: #888;
    --neon-green: #4F6AFF;
    --neon-green-glow: rgba(0,0,0,0);
    --accent-glow: rgba(0,0,0,0);
    background-color: #fff !important;
    background-image:
        radial-gradient(ellipse 100% 50% at 50% 50%, rgba(94, 106, 210, 0.08) 0%, transparent 70%),
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px) !important;
}

/* --- Global Class Overrides --- */
body.light-theme .q-gradient-hero {
    background: none !important;
    -webkit-text-fill-color: #1a1a1a !important;
    color: #1a1a1a !important;
}
body.light-theme .gold-text {
    background: linear-gradient(135deg, #8B9FFF 0%, #4F6AFF 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 700;
}
body.light-theme .q-c-green {
    color: #4F6AFF !important;
    font-weight: 700;
}
body.light-theme .q-c-main { color: #1a1a1a !important; }
body.light-theme .q-c-muted { color: #888 !important; }
body.light-theme .q-glow-accent { text-shadow: none !important; }
body.light-theme .divider-gradient {
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.1), transparent) !important;
}
/* --- White theme: all buttons (btn-linear + cta-link) --- */
body.light-theme .btn-linear,
body.light-theme .cta-link {
    background-color: #fff !important;
    border: 1px solid #1a1a1a !important;
    color: #1a1a1a !important;
}
body.light-theme .btn-linear:hover,
body.light-theme .cta-link:hover {
    background-color: #f0f0f0 !important;
    border-color: #1a1a1a !important;
}
body.light-theme .btn-linear .btn-icon-bg {
    background-color: rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .btn-linear .btn-icon-bg .material-symbols-outlined,
body.light-theme .cta-link .material-symbols-outlined {
    color: #1a1a1a !important;
}

/* --- PROMIX-INTRO: keep dark in light mode --- */
body.light-theme [data-section-name="PROMIX-INTRO"] {
    --bg-color: #0B0C0E;
    --card-bg: #131517;
    --border-color: rgba(255, 255, 255, 0.08);
    --text-main: #F7F8F8;
    --text-muted: #8A8F98;
    --accent-color: #5E6AD2;
    --neon-green: #00ff00;
    --neon-green-glow: rgba(0, 255, 0, 0.4);
    --accent-glow: rgba(94, 106, 210, 0.2);
    background-color: #0B0C0E !important;
    color: #F7F8F8;
}
body.light-theme [data-section-name="PROMIX-INTRO"] .q-gradient-hero {
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 50%, #ffffff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
body.light-theme [data-section-name="PROMIX-INTRO"] .q-c-green {
    color: #00ff00 !important;
}
body.light-theme [data-section-name="PROMIX-INTRO"] .q-c-main {
    color: #F7F8F8 !important;
}
body.light-theme [data-section-name="PROMIX-INTRO"] .q-glow-accent {
    text-shadow: 0 0 30px rgba(94,106,210,0.4), 0 0 60px rgba(94,106,210,0.2) !important;
}
body.light-theme [data-section-name="PROMIX-INTRO"] .hero__bg-overlay {
    background: linear-gradient(to bottom, rgba(11,12,14,0.6), rgba(11,12,14,0.8), #0B0C0E) !important;
}

/* --- TOP-ONCE-BEFORE: white bg, black text, gold accent --- */
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] {
    background-color: transparent !important;
}
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] .heading-subtitle {
    color: #444 !important;
}
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] .comparison {
    --border-color: #ddd;
    --text-main: #1a1a1a;
    --text-muted: #888;
    --neon-green: #4F6AFF;
    background-color: #fff;
    color: #1a1a1a;
    border-color: #ddd;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.12);
}
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] .comparison__card {
    background-color: #fff !important;
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] .comparison__card--past {
    border-right-color: #ddd;
}
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] .comparison__card--future {
    background-color: #fff !important;
}
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] .comparison__title {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] .comparison__card--future .comparison__title {
    color: #4F6AFF !important;
    -webkit-text-fill-color: #4F6AFF !important;
}
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] .comparison__card--future .comparison__card-glow {
    display: none;
}
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] .comparison .q-c-green {
    color: #4F6AFF !important;
    -webkit-text-fill-color: #4F6AFF !important;
}
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] .comparison .q-c-muted {
    color: #888 !important;
}
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] .comparison .q-c-w80 {
    color: #444 !important;
}
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] .quote-card {
    --text-main: #1a1a1a;
    --neon-green: #4F6AFF;
    background-color: #fff;
    border-color: #ddd;
    color: #1a1a1a;
}
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] .quote-card .q-c-green {
    color: #4F6AFF !important;
}
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] .quote-card .q-c-main {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] .quote-card .q-glow-accent,
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] .quote-card .q-glow-green {
    text-shadow: none !important;
}
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] .quote-card__divider {
    background-color: rgba(0, 0, 0, 0.12);
}
body.light-theme [data-section-name="TOP-ONCE-BEFORE"] .quote-card__line {
    background: linear-gradient(to bottom, transparent, rgba(37, 99, 235, 0.3), transparent);
}

/* --- YORISOU: white mode overrides --- */
body.light-theme [data-section-name="YORISOU"] {
    background-color: #fff !important;
}
body.light-theme [data-section-name="YORISOU"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('https://cdn.shopify.com/s/files/1/0500/7858/0900/files/i2.png?v=1758271951') center / contain no-repeat;
    opacity: var(--yorisou-bg-opacity, 0.1);
    z-index: 0;
    pointer-events: none;
}
/* Background: replace dark mesh with warm light radial */
body.light-theme [data-section-name="YORISOU"] .yorisou-mesh {
    background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.08) 0%, rgba(255, 255, 255, 1) 70%) !important;
}
/* Vignette: soft warm edge fade */
body.light-theme [data-section-name="YORISOU"] .bg-gradient-to-t {
    background: linear-gradient(to top, rgba(255,255,255,0.9), transparent, rgba(255,255,255,0.9)) !important;
}
/* Grain: slightly stronger on white */
body.light-theme [data-section-name="YORISOU"] .yorisou-grain {
    opacity: 0.05;
    mix-blend-mode: multiply;
}
/* Text colors: apply white mode base (black text) */
body.light-theme [data-section-name="YORISOU"] .text-white\/60 {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="YORISOU"] .text-white\/90 {
    color: #1a1a1a !important;
}
/* Accent: green → gold */
body.light-theme [data-section-name="YORISOU"] .text-primary {
    color: #4F6AFF !important;
}
/* Divider: gold tint */
body.light-theme [data-section-name="YORISOU"] .via-primary\/50 {
    --tw-gradient-via: rgba(37, 99, 235, 0.5);
}
/* Scroll indicator */
body.light-theme [data-section-name="YORISOU"] .text-white.animate-bounce {
    color: rgba(26, 26, 26, 0.4) !important;
}
/* Glow text: warm gold glow instead of green */
body.light-theme [data-section-name="YORISOU"] .yorisou-glow-text {
    text-shadow: none !important;
}
[data-section-name="YORISOU"] .text-white\/90.leading-relaxed {
    line-height: 2.4 !important;
}

/* --- TOP-1 hero: keep dark in light mode --- */
body.light-theme [data-section-name="TOP-1"] {
    --bg-color: #0B0C0E;
    --card-bg: #131517;
    --border-color: rgba(255, 255, 255, 0.08);
    --text-main: #F7F8F8;
    --text-muted: #8A8F98;
    --accent-color: #5E6AD2;
    --neon-green: #00ff00;
    --neon-green-glow: rgba(0, 255, 0, 0.4);
    --accent-glow: rgba(94, 106, 210, 0.2);
    background-color: #0B0C0E !important;
    color: #F7F8F8;
}
body.light-theme [data-section-name="TOP-1"] .q-gradient-hero {
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 50%, #ffffff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
body.light-theme [data-section-name="TOP-1"] .q-c-green {
    color: #00ff00 !important;
    -webkit-text-fill-color: #00ff00 !important;
}
body.light-theme [data-section-name="TOP-1"] .q-glow-green {
    text-shadow: 0 0 20px rgba(0,255,0,0.4) !important;
    -webkit-text-fill-color: #00ff00 !important;
}
body.light-theme [data-section-name="TOP-1"] .q-c-w80 {
    color: rgba(255,255,255,0.8) !important;
}
body.light-theme [data-section-name="TOP-1"] .q-c-accent {
    color: #5E6AD2 !important;
}

/* --- TOP-FLY impact hero: keep dark in light mode --- */
body.light-theme .impact-hero[data-section-name="TOP-FLY"] {
    --bg-color: #0B0C0E;
    --text-main: #F7F8F8;
    --text-muted: #8A8F98;
    --neon-green: #00ff00;
    --neon-green-glow: rgba(0, 255, 0, 0.4);
    --accent-color: #5E6AD2;
    --accent-glow: rgba(94, 106, 210, 0.2);
    background-color: #0B0C0E !important;
    color: #F7F8F8;
}
body.light-theme .impact-hero[data-section-name="TOP-FLY"] .q-gradient-hero {
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 50%, #ffffff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
body.light-theme .impact-hero[data-section-name="TOP-FLY"] .q-c-green {
    color: #00ff00 !important;
}
body.light-theme .impact-hero[data-section-name="TOP-FLY"] .impact-hero__overlay {
    background-color: rgba(0, 0, 0, 0.4) !important;
}
/* --- TOP-FLY Reviews (#06): accordion white base (both modes) --- */
[data-section-name="TOP-FLY"] .accordion {
    background-color: #fff !important;
    border-color: #1a1a1a !important;
    color: #1a1a1a !important;
}
[data-section-name="TOP-FLY"] .accordion:hover {
    border-color: #000 !important;
}
[data-section-name="TOP-FLY"] .accordion summary:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
}
[data-section-name="TOP-FLY"] .accordion summary span {
    color: #1a1a1a !important;
}
[data-section-name="TOP-FLY"] .accordion .gold-text {
    color: #4F6AFF !important;
}
[data-section-name="TOP-FLY"] .accordion .expand-icon {
    color: #4F6AFF !important;
}
[data-section-name="TOP-FLY"] .accordion__body {
    border-top-color: #ddd !important;
    background-color: rgba(0, 0, 0, 0.01) !important;
}
[data-section-name="TOP-FLY"] .accordion__body p {
    color: #444 !important;
}
[data-section-name="TOP-FLY"] .accordion__body p[style*="color: var(--text-main)"] {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="TOP-FLY"] .accordion__body p[style*="color: var(--text-muted)"] {
    color: #888 !important;
}
body.light-theme [data-section-name="TOP-FLY"] .accordion__body img {
    border-color: rgba(0,0,0,0.1) !important;
}

/* --- TOP-CLOSING: keep dark in light mode --- */
body.light-theme [data-section-name="TOP-CLOSING"] {
    --bg-color: #0B0C0E;
    --card-bg: #131517;
    --border-color: rgba(255, 255, 255, 0.08);
    --text-main: #F7F8F8;
    --text-muted: #8A8F98;
    --neon-green: #00ff00;
    --neon-green-glow: rgba(0, 255, 0, 0.4);
    --accent-glow: rgba(94, 106, 210, 0.2);
    background-color: #0B0C0E !important;
    color: #F7F8F8;
}
body.light-theme [data-section-name="TOP-CLOSING"] .q-gradient-hero {
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 50%, #ffffff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
body.light-theme [data-section-name="TOP-CLOSING"] .q-c-main {
    color: #F7F8F8 !important;
}
body.light-theme [data-section-name="TOP-CLOSING"] .q-c-muted,
body.light-theme [data-section-name="TOP-CLOSING"] .text-muted {
    color: #8A8F98 !important;
}

/* --- PROMIX hero: keep dark in light mode --- */
body.light-theme .impact-hero[data-section-name="PROMIX"] {
    --bg-color: #0B0C0E;
    --card-bg: #131517;
    --border-color: rgba(255, 255, 255, 0.08);
    --text-main: #F7F8F8;
    --text-muted: #8A8F98;
    --accent-color: #5E6AD2;
    --neon-green: #00ff00;
    --neon-green-glow: rgba(0, 255, 0, 0.4);
    --accent-glow: rgba(94, 106, 210, 0.2);
    background-color: #0B0C0E !important;
    color: #F7F8F8;
}
body.light-theme .impact-hero[data-section-name="PROMIX"] .q-gradient-hero {
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 50%, #ffffff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
body.light-theme .impact-hero[data-section-name="PROMIX"] .q-c-green {
    color: #00ff00 !important;
}
body.light-theme .impact-hero[data-section-name="PROMIX"] .hero__bg-overlay {
    background: linear-gradient(to bottom, rgba(11,12,14,0.6), rgba(11,12,14,0.8), #0B0C0E) !important;
}
body.light-theme .impact-hero[data-section-name="PROMIX"] .glass-panel {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

/* --- PROMIX preset & engineers: both modes --- */
[data-section-name="PROMIX"] .feature-highlight h3 {
    color: #4F6AFF !important;
}
[data-section-name="PROMIX"] .feature-highlight__icon {
    color: #4F6AFF !important;
}
[data-section-name="PROMIX"] .feature-highlight__body p {
    color: #1a1a1a !important;
}

/* --- PROMIX carousels: bg image visible (both modes) --- */
[data-section-name="PROMIX"] .reveal [style*="mask-image"] {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    filter: brightness(1) !important;
    opacity: 1;
}
.section[data-section-name="PROMIX"] .reveal[style*="overflow"] h3 {
    color: #fff !important;
}

/* --- PROMIX (#08 glass excluded, #09,#10,#12): white base (both modes) --- */
.section[data-section-name="PROMIX"] {
    --bg-color: rgba(255, 255, 255, 0.92);
    --card-bg: rgba(255, 255, 255, 0.7);
    --border-color: rgba(0, 0, 0, 0.08);
    --text-main: #1a1a1a;
    --text-muted: #888;
    --accent-color: #5E6AD2;
    color: #1a1a1a;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.section[data-section-name="PROMIX"] h3 {
    color: #1a1a1a;
}
.section[data-section-name="PROMIX"] .q-c-main {
    color: #1a1a1a !important;
}
.section[data-section-name="PROMIX"] .q-c-muted {
    color: #888 !important;
}
.section[data-section-name="PROMIX"] .q-c-green {
    color: #4F6AFF !important;
    font-weight: 700;
}
.section[data-section-name="PROMIX"] .text-green {
    color: #4F6AFF !important;
}
.section[data-section-name="PROMIX"] .q-glow-green {
    text-shadow: none !important;
}
.section[data-section-name="PROMIX"] .preset-card__title {
    color: #1a1a1a;
}
.section[data-section-name="PROMIX"] .preset-card__desc {
    color: #888;
}
.section[data-section-name="PROMIX"] .preset-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
}
.section[data-section-name="PROMIX"] .preset-card:hover {
    border-color: rgba(0, 0, 0, 0.15);
}
.section[data-section-name="PROMIX"] .engineer-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
}
.section[data-section-name="PROMIX"] .engineer-card:hover {
    border-color: rgba(0, 0, 0, 0.15);
}
.section[data-section-name="PROMIX"] .engineer-card__name {
    color: #1a1a1a;
}
.section[data-section-name="PROMIX"] .engineer-card__profile {
    color: #888;
}
.section[data-section-name="PROMIX"] .highlight-label {
    color: #1a1a1a;
}
.section[data-section-name="PROMIX"] .q-c-w80 {
    color: #1a1a1a !important;
}
.section[data-section-name="PROMIX"] .heading-subtitle {
    color: #444 !important;
}
.section[data-section-name="PROMIX"] .q-glow-accent {
    text-shadow: none !important;
}
/* PROMIX: CTA link (white base) */
.section[data-section-name="PROMIX"] .cta-link {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #1a1a1a !important;
    color: #1a1a1a !important;
    box-shadow: none;
}
.section[data-section-name="PROMIX"] .cta-link:hover {
    background-color: #f0f0f0 !important;
}
.section[data-section-name="PROMIX"] .cta-link .material-symbols-outlined {
    color: #1a1a1a !important;
}
/* PROMIX: collection table borders */
.section[data-section-name="PROMIX"] .collection-table-wrapper {
    border-color: #ddd;
}
.section[data-section-name="PROMIX"] .collection-table {
    border-color: #ddd;
}
.section[data-section-name="PROMIX"] .collection-table th {
    border-color: #ddd;
}
.section[data-section-name="PROMIX"] .collection-table td {
    border-color: #ddd;
}
/* PROMIX: carousel arrow buttons */
.section[data-section-name="PROMIX"] .preset-carousel__arrow {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #1a1a1a !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
.section[data-section-name="PROMIX"] .preset-carousel__arrow:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* --- PROMIX Collection (#09): hover removal (black & white) --- */
[data-section-name="PROMIX"] .collection-table tr:hover {
    background-color: transparent !important;
}
[data-section-name="PROMIX"] .collection-table__dot {
    display: none !important;
}
/* --- PROMIX Collection (#09): white base table (both modes) --- */
.section[data-section-name="PROMIX"] .collection-table__album-cell {
    background-image: none !important;
    background-color: rgba(255, 255, 255, 0.95);
}
.section[data-section-name="PROMIX"] .collection-table__album-cell::before {
    display: none;
}
.section[data-section-name="PROMIX"] .collection-table td {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #ddd !important;
}
.section[data-section-name="PROMIX"] .collection-table thead {
    background-color: rgba(255, 255, 255, 0.95);
    border-color: #ddd;
}
.section[data-section-name="PROMIX"] .collection-table__album-cell span {
    color: #1a1a1a;
}

/* (Removed: #11 PROMIX Details rules — #11 now uses data-section-name="PROMIX-STORY") */
.section[data-section-name="PROMIX"] .text-muted {
    color: #888 !important;
}

/* --- PROMIX: white mode border adjustment --- */
body.light-theme .section[data-section-name="PROMIX"] {
    border-color: rgba(0, 0, 0, 0.06);
}

/* --- PROMIX-STORY (#98): white mode overrides --- */
body.light-theme .section[data-section-name="PROMIX-STORY"] {
    --bg-color: #ffffff;
    color: #1a1a1a;
}
body.light-theme .section[data-section-name="PROMIX-STORY"] .q-c-main {
    color: #1a1a1a !important;
}
body.light-theme .section[data-section-name="PROMIX-STORY"] .q-c-muted {
    color: #888 !important;
}
body.light-theme .section[data-section-name="PROMIX-STORY"] .q-c-w80 {
    color: #444 !important;
}
body.light-theme .section[data-section-name="PROMIX-STORY"] .text-muted {
    color: #888 !important;
}
body.light-theme .section[data-section-name="PROMIX-STORY"] > div[style*="position: absolute"] img {
    opacity: 0.2 !important;
}
body.light-theme .section[data-section-name="PROMIX-STORY"] .accordion {
    background-color: #fff !important;
    border-color: #ddd !important;
    color: #1a1a1a !important;
}
body.light-theme .section[data-section-name="PROMIX-STORY"] .accordion:hover {
    border-color: #bbb !important;
}
body.light-theme .section[data-section-name="PROMIX-STORY"] .accordion summary:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
}
body.light-theme .section[data-section-name="PROMIX-STORY"] .accordion summary span {
    color: #1a1a1a !important;
}
body.light-theme .section[data-section-name="PROMIX-STORY"] .accordion .expand-icon {
    color: #4F6AFF !important;
}
body.light-theme .section[data-section-name="PROMIX-STORY"] .accordion__body {
    border-top-color: #ddd !important;
    background-color: rgba(0, 0, 0, 0.01) !important;
}
body.light-theme .section[data-section-name="PROMIX-STORY"] .accordion__body p {
    color: #444 !important;
}
body.light-theme .section[data-section-name="PROMIX-STORY"] .accordion__author .q-c-accent {
    color: #4F6AFF !important;
}
body.light-theme .section[data-section-name="PROMIX-STORY"] .cta-link {
    background-color: #fff !important;
    border: 1px solid #1a1a1a !important;
    color: #1a1a1a !important;
    box-shadow: none;
}
body.light-theme .section[data-section-name="PROMIX-STORY"] .cta-link:hover {
    background-color: #f0f0f0 !important;
}
body.light-theme .section[data-section-name="PROMIX-STORY"] .cta-link .material-symbols-outlined {
    color: #1a1a1a !important;
}

/* --- REASON intro: keep dark in light mode --- */
body.light-theme [data-section-name="REASON"] {
    --bg-color: #0B0C0E;
    --card-bg: #131517;
    --border-color: rgba(255, 255, 255, 0.08);
    --text-main: #F7F8F8;
    --text-muted: #8A8F98;
    --accent-color: #5E6AD2;
    --neon-green: #00ff00;
    --neon-green-glow: rgba(0, 255, 0, 0.4);
    --accent-glow: rgba(94, 106, 210, 0.2);
    background-color: #0B0C0E !important;
    color: #F7F8F8;
}
body.light-theme [data-section-name="REASON"] .q-gradient-hero {
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 50%, #ffffff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
body.light-theme [data-section-name="REASON"] .q-c-green {
    color: #00ff00 !important;
}
body.light-theme [data-section-name="REASON"] .q-c-main {
    color: #F7F8F8 !important;
}
body.light-theme [data-section-name="REASON"] .q-glow-accent {
    text-shadow: 0 0 30px rgba(94,106,210,0.4), 0 0 60px rgba(94,106,210,0.2) !important;
}

/* --- REASON-FULL-OPEN: comparison table white bg, black text --- */
body.light-theme [data-section-name="REASON-FULL-OPEN"] {
    background-color: transparent !important;
}
body.light-theme [data-section-name="REASON-FULL-OPEN"] .comparison {
    --text-muted: #888;
    border-color: #ddd;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}
body.light-theme [data-section-name="REASON-FULL-OPEN"] .comparison__card {
    background-color: #fff;
    color: #1a1a1a;
}
body.light-theme [data-section-name="REASON-FULL-OPEN"] .comparison__card rt {
    color: #888 !important;
}
body.light-theme [data-section-name="REASON-FULL-OPEN"] .comparison__card .text-muted {
    color: #888 !important;
}
body.light-theme [data-section-name="REASON-FULL-OPEN"] .comparison__card--past {
    border-right-color: #ddd;
}
body.light-theme [data-section-name="REASON-FULL-OPEN"] .comparison__card--past .comparison__label {
    color: #888 !important;
}
body.light-theme [data-section-name="REASON-FULL-OPEN"] .comparison__card--past .comparison__title {
    color: #1a1a1a;
}
body.light-theme [data-section-name="REASON-FULL-OPEN"] .comparison__card--past .q-c-muted {
    color: #888 !important;
}
body.light-theme [data-section-name="REASON-FULL-OPEN"] .comparison__card--future {
    background-color: #fff;
}
body.light-theme [data-section-name="REASON-FULL-OPEN"] .comparison__card--future .comparison__label {
    color: #4F6AFF !important;
}
body.light-theme [data-section-name="REASON-FULL-OPEN"] .comparison__card--future .comparison__title {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="REASON-FULL-OPEN"] .comparison__card--future .q-c-muted {
    color: #888 !important;
}
body.light-theme [data-section-name="REASON-FULL-OPEN"] .comparison__card--future .q-glow-accent {
    text-shadow: none !important;
}
body.light-theme [data-section-name="REASON-FULL-OPEN"] .comparison__card-glow {
    background: linear-gradient(135deg, rgba(94, 106, 210, 0.05), transparent 60%);
}
@media (max-width: 480px) {
    [data-section-name="REASON-FULL-OPEN"] .comparison__card {
        padding: var(--space-md) var(--space-xs) !important;
    }
}

/* --- MAKE-INTRO: white mode --- */
body.light-theme [data-section-name="MAKE-INTRO"] {
    background-color: transparent !important;
    color: #1a1a1a;
}
body.light-theme [data-section-name="MAKE-INTRO"] .q-gradient-hero {
    background: linear-gradient(135deg, #1a1a1a 0%, #333 50%, #1a1a1a 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
body.light-theme [data-section-name="MAKE-INTRO"] .q-c-main {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="MAKE-INTRO"] .q-c-w80 {
    color: #444 !important;
}
body.light-theme [data-section-name="MAKE-INTRO"] .make-checklist__item {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="MAKE-INTRO"] > div[style*="position: absolute"] {
    opacity: 0.1 !important;
}

/* --- MAKE-FEATURES: keep cards dark in light mode --- */
body.light-theme [data-section-name="MAKE-FEATURES"] .make-feature-card {
    background: #0B0C0E;
    border-color: rgba(255, 255, 255, 0.08);
}
body.light-theme [data-section-name="MAKE-FEATURES"] .make-feature-card:hover {
    border-color: rgba(0, 255, 0, 0.3);
}
body.light-theme [data-section-name="MAKE-FEATURES"] .make-feature-card__title {
    color: #F7F8F8 !important;
}

/* --- MAKE-COMPARISON: table white text → black --- */
body.light-theme [data-section-name="MAKE-COMPARISON"] .tech-table th,
body.light-theme [data-section-name="MAKE-COMPARISON"] .tech-table td {
    color: #1a1a1a;
}
body.light-theme [data-section-name="MAKE-COMPARISON"] .tech-table td[style*="background-color"] {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* --- MAKE-DYNAMICS: keep dark in light mode --- */
body.light-theme [data-section-name="MAKE-DYNAMICS"] {
    --bg-color: #0B0C0E;
    --card-bg: #131517;
    --border-color: rgba(255, 255, 255, 0.08);
    --text-main: #F7F8F8;
    --text-muted: #8A8F98;
    --accent-color: #5E6AD2;
    --neon-green: #00ff00;
    --neon-green-glow: rgba(0, 255, 0, 0.4);
    --accent-glow: rgba(94, 106, 210, 0.2);
    background-color: #0B0C0E !important;
    color: #F7F8F8;
}
body.light-theme [data-section-name="MAKE-DYNAMICS"] .q-gradient-hero {
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 50%, #ffffff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* --- MAKE-CLOSING: keep dark in light mode --- */
body.light-theme [data-section-name="MAKE-CLOSING"] {
    --bg-color: #0B0C0E;
    --card-bg: #131517;
    --border-color: rgba(255, 255, 255, 0.08);
    --text-main: #F7F8F8;
    --text-muted: #8A8F98;
    --neon-green: #00ff00;
    --neon-green-glow: rgba(0, 255, 0, 0.4);
    background-color: #0B0C0E !important;
    color: #F7F8F8;
}
body.light-theme [data-section-name="MAKE-CLOSING"] .q-gradient-hero {
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 50%, #ffffff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* --- AWARD: keep dark in light mode --- */
body.light-theme [data-section-name="AWARD"] {
    --bg-color: #0B0C0E;
    --text-main: #F7F8F8;
    --text-muted: #8A8F98;
    --border-color: rgba(255, 255, 255, 0.08);
    background-color: #0B0C0E !important;
    color: #F7F8F8;
}
body.light-theme [data-section-name="AWARD"] .q-c-main {
    color: #F7F8F8 !important;
}
body.light-theme [data-section-name="AWARD"] .q-c-muted {
    color: #8A8F98 !important;
}
body.light-theme [data-section-name="AWARD"] .award-list__item {
    color: #F7F8F8;
}
[data-section-name="AWARD"] .text-overline {
    font-size: clamp(0.85rem, 2.5vw, 1.6rem) !important;
}

/* --- AWARD-VIDEO --- */
body.light-theme [data-section-name="AWARD-VIDEO"] {
    background-color: #fff;
    color: #1a1a1a;
}

/* --- HW-Update-1: keep dark in light mode --- */
body.light-theme [data-section-name="HW-Update-1"] {
    --bg-color: #0B0C0E;
    --card-bg: #131517;
    --border-color: rgba(255, 255, 255, 0.08);
    --text-main: #F7F8F8;
    --text-muted: #8A8F98;
    --neon-green: #00ff00;
    --neon-green-glow: rgba(0, 255, 0, 0.4);
    --accent-glow: rgba(94, 106, 210, 0.2);
    background-color: #0B0C0E !important;
    color: #F7F8F8;
}
body.light-theme [data-section-name="HW-Update-1"] .q-gradient-hero {
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 50%, #ffffff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
body.light-theme [data-section-name="HW-Update-1"] .q-c-main {
    color: #F7F8F8 !important;
}

/* --- HW-Update-Driver: keep dark in light mode --- */
body.light-theme [data-section-name="HW-Update-Driver"] {
    --bg-color: #0B0C0E;
    --card-bg: #131517;
    --border-color: rgba(255, 255, 255, 0.08);
    --text-main: #F7F8F8;
    --text-muted: #8A8F98;
    --neon-green: #00ff00;
    --neon-green-glow: rgba(0, 255, 0, 0.4);
    --accent-color: #5E6AD2;
    --accent-glow: rgba(94, 106, 210, 0.2);
    background-color: #0B0C0E !important;
    color: #F7F8F8;
}
body.light-theme [data-section-name="HW-Update-Driver"] .q-c-main {
    color: #F7F8F8 !important;
}
body.light-theme [data-section-name="HW-Update-Driver"] .q-c-green {
    color: #00ff00 !important;
}
body.light-theme [data-section-name="HW-Update-Driver"] .q-c-w80 {
    color: rgba(255, 255, 255, 0.8) !important;
}
body.light-theme [data-section-name="HW-Update-Driver"] .q-c-muted {
    color: #8A8F98 !important;
}
body.light-theme [data-section-name="HW-Update-Driver"] .q-gradient-hero {
    background-image: linear-gradient(to bottom, #ffffff 30%, rgba(255,255,255,0.75) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
body.light-theme [data-section-name="HW-Update-Driver"] .gold-text {
    background: linear-gradient(135deg, #e3c48a 0%, #a68b4d 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* --- HW-Update-Preset: keep dark in light mode --- */
body.light-theme [data-section-name="HW-Update-Preset"] {
    --bg-color: #0B0C0E;
    --card-bg: #131517;
    --border-color: rgba(255, 255, 255, 0.08);
    --text-main: #F7F8F8;
    --text-muted: #8A8F98;
    --neon-green: #00ff00;
    --neon-green-glow: rgba(0, 255, 0, 0.4);
    --accent-color: #5E6AD2;
    --accent-glow: rgba(94, 106, 210, 0.2);
    background-color: #0B0C0E !important;
    color: #F7F8F8;
}
body.light-theme [data-section-name="HW-Update-Preset"] .q-c-main {
    color: #F7F8F8 !important;
}
body.light-theme [data-section-name="HW-Update-Preset"] .q-c-green {
    color: #00ff00 !important;
}
body.light-theme [data-section-name="HW-Update-Preset"] .q-c-w80 {
    color: rgba(255, 255, 255, 0.8) !important;
}
body.light-theme [data-section-name="HW-Update-Preset"] .q-c-muted {
    color: #8A8F98 !important;
}
body.light-theme [data-section-name="HW-Update-Preset"] .q-gradient-hero {
    background-image: linear-gradient(to bottom, #ffffff 30%, rgba(255,255,255,0.75) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
body.light-theme [data-section-name="HW-Update-Preset"] .gold-text {
    background: linear-gradient(135deg, #e3c48a 0%, #a68b4d 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* --- HW-Update-Others: hide white gap between dark sections --- */
body.light-theme [data-section-name="HW-Update-Others"] + .divider-gradient {
    background: none !important;
    height: 0 !important;
    margin: 0 !important;
}

/* --- HW-Update-Others: keep dark in light mode --- */
body.light-theme [data-section-name="HW-Update-Others"] {
    --bg-color: #0B0C0E;
    --card-bg: #131517;
    --border-color: rgba(255, 255, 255, 0.08);
    --text-main: #F7F8F8;
    --text-muted: #8A8F98;
    --neon-green: #00ff00;
    --neon-green-glow: rgba(0, 255, 0, 0.4);
    --accent-color: #5E6AD2;
    --accent-glow: rgba(94, 106, 210, 0.2);
    background-color: #0B0C0E !important;
    color: #F7F8F8;
}
body.light-theme [data-section-name="HW-Update-Others"] .q-c-main {
    color: #F7F8F8 !important;
}
body.light-theme [data-section-name="HW-Update-Others"] .q-c-green {
    color: #00ff00 !important;
}
body.light-theme [data-section-name="HW-Update-Others"] .q-c-w80 {
    color: rgba(255, 255, 255, 0.8) !important;
}
body.light-theme [data-section-name="HW-Update-Others"] .q-c-muted {
    color: #8A8F98 !important;
}
body.light-theme [data-section-name="HW-Update-Others"] .q-gradient-hero {
    background-image: linear-gradient(to bottom, #ffffff 30%, rgba(255,255,255,0.75) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
body.light-theme [data-section-name="HW-Update-Others"] .gold-text {
    background: linear-gradient(135deg, #e3c48a 0%, #a68b4d 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* --- HW-SPEC: white bg, black font --- */
body.light-theme [data-section-name="HW-SPEC"] {
    background-color: #fff !important;
    color: #1a1a1a;
}
body.light-theme [data-section-name="HW-SPEC"] .q-c-main {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="HW-SPEC"] .specs-header__overline {
    color: #4F6AFF;
}
body.light-theme [data-section-name="HW-SPEC"] .spec-row__subtitle {
    color: #888;
}
body.light-theme [data-section-name="HW-SPEC"] .spec-row__icon .material-symbols-outlined {
    color: #4F6AFF;
}
body.light-theme [data-section-name="HW-SPEC"] .specs-header__line {
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.15), transparent);
}
body.light-theme [data-section-name="HW-SPEC"] .spec-row {
    border-color: rgba(0,0,0,0.08);
}
body.light-theme [data-section-name="HW-SPEC"] .spec-row__detail {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="HW-SPEC"] .specs-header__title {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #1a1a1a !important;
    color: #1a1a1a !important;
}

/* --- #30 HW-SPEC Spec Details: accordion white base --- */
body.light-theme [data-section-name="HW-SPEC"] .accordion {
    background-color: #fff !important;
    border-color: #ddd !important;
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="HW-SPEC"] .accordion:hover {
    border-color: #bbb !important;
}
body.light-theme [data-section-name="HW-SPEC"] .accordion summary:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
}
body.light-theme [data-section-name="HW-SPEC"] .accordion summary span {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="HW-SPEC"] .accordion .expand-icon {
    color: #4F6AFF !important;
}
body.light-theme [data-section-name="HW-SPEC"] .accordion__body {
    border-top-color: #ddd !important;
    background-color: rgba(0, 0, 0, 0.01) !important;
}
body.light-theme [data-section-name="HW-SPEC"] .accordion__body td {
    color: #444 !important;
    border-color: #ddd !important;
}
body.light-theme [data-section-name="HW-SPEC"] .accordion__body td:first-child {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="HW-SPEC"] .accordion__body p {
    color: #888 !important;
}
body.light-theme [data-section-name="HW-SPEC"] .collection-table-wrapper {
    border-color: #ddd !important;
}
body.light-theme [data-section-name="HW-SPEC"] .collection-table {
    border-color: #ddd !important;
}

/* --- Particle override for AWARD-VIDEO --- */
body.light-theme .award-particle {
    background: rgba(0, 0, 0, 0.03) !important;
}

/* --- CONCEPTS: white mode base, accordion body stays dark --- */
body.light-theme [data-section-name="CONCEPTS"] {
    color: #1a1a1a;
}
body.light-theme [data-section-name="CONCEPTS"] > div[style*="rgba(0,0,0,0.92)"] {
    background: rgba(255,255,255,0.9) !important;
}
body.light-theme [data-section-name="CONCEPTS"] .q-c-main {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="CONCEPTS"] .q-c-green {
    color: #4F6AFF !important;
}
body.light-theme [data-section-name="CONCEPTS"] summary span {
    color: #1a1a1a;
}
body.light-theme [data-section-name="CONCEPTS"] .expand-icon {
    color: #4F6AFF !important;
}
body.light-theme [data-section-name="CONCEPTS"] .accordion {
    background-color: #fff !important;
    border-color: #333 !important;
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="CONCEPTS"] .accordion:hover {
    border-color: #333 !important;
}
body.light-theme [data-section-name="CONCEPTS"] .accordion summary:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
}
body.light-theme [data-section-name="CONCEPTS"] .accordion__body {
    border-top-color: #333 !important;
    background-color: rgba(0, 0, 0, 0.01) !important;
}
body.light-theme [data-section-name="CONCEPTS"] .accordion__body div[style*="color: rgba(255,255,255"] {
    color: #444 !important;
}
body.light-theme [data-section-name="CONCEPTS"] .accordion__body p {
    color: #444 !important;
}
body.light-theme [data-section-name="CONCEPTS"] .accordion__body p[style*="color: var(--text-main)"] {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="CONCEPTS"] .accordion__body p[style*="color: var(--accent-color)"] {
    color: #4F6AFF !important;
}
body.light-theme [data-section-name="CONCEPTS"] .accordion__body p[style*="color: var(--text-muted)"] {
    color: #888 !important;
}
body.light-theme [data-section-name="CONCEPTS"] .accordion__body p[style*="color: rgba(255,255,255"] {
    color: #444 !important;
}
body.light-theme [data-section-name="CONCEPTS"] .accordion__body h3 {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="CONCEPTS"] .accordion__body h3 span[style*="-webkit-text-fill-color"] {
    -webkit-text-fill-color: #4F6AFF !important;
    background-image: none !important;
    color: #4F6AFF !important;
}
body.light-theme [data-section-name="CONCEPTS"] .accordion__body .q-c-green {
    color: #4F6AFF !important;
}
body.light-theme [data-section-name="CONCEPTS"] .accordion__body strong {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="CONCEPTS"] .accordion summary span[style*="color: var(--text-muted)"] {
    color: #888 !important;
}
body.light-theme [data-section-name="CONCEPTS"] .accordion summary span[style*="color: var(--text-main)"] {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="CONCEPTS"] .accordion summary span[style*="color: #fff"] {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="CONCEPTS"] .accordion__body img {
    border-color: rgba(0,0,0,0.1) !important;
}

/* --- #36 CONCEPTS-MUSIC: video playing red glow + breathing --- */
.video-playing-glow {
    outline: 3px solid #ff0000 !important;
    outline-offset: -3px;
    box-shadow:
        0 0 15px 4px rgba(255, 0, 0, 0.35),
        0 0 40px 8px rgba(255, 0, 0, 0.2),
        0 0 80px 16px rgba(255, 0, 0, 0.1);
    animation: video-red-glow-breathe 3s ease-in-out infinite !important;
}

@keyframes video-red-glow-breathe {
    0%, 100% {
        box-shadow:
            0 0 8px 2px rgba(255, 0, 0, 0.15),
            0 0 20px 4px rgba(255, 0, 0, 0.08),
            0 0 40px 8px rgba(255, 0, 0, 0.03);
        outline-color: rgba(255, 0, 0, 0.5);
    }
    50% {
        box-shadow:
            0 0 20px 6px rgba(255, 0, 0, 0.5),
            0 0 50px 12px rgba(255, 0, 0, 0.3),
            0 0 100px 24px rgba(255, 0, 0, 0.15);
        outline-color: rgba(255, 0, 0, 1);
    }
}

/* --- CONCEPTS-MUSIC: white mode base --- */
body.light-theme [data-section-name="CONCEPTS-MUSIC"] {
    color: #1a1a1a;
}
body.light-theme [data-section-name="CONCEPTS-MUSIC"] > div[style*="rgba(0,0,0,0.95)"] {
    background: rgba(255,255,255,0.9) !important;
}
body.light-theme [data-section-name="CONCEPTS-MUSIC"] .q-c-main {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="CONCEPTS-MUSIC"] .q-c-w80 {
    color: #444 !important;
}
body.light-theme [data-section-name="CONCEPTS-MUSIC"] .preset-card__title {
    color: #1a1a1a;
}
body.light-theme [data-section-name="CONCEPTS-MUSIC"] .btn-linear {
    background-color: #0B0C0E !important;
    border-color: #0B0C0E !important;
    color: #00ff00 !important;
}
body.light-theme [data-section-name="CONCEPTS-MUSIC"] .btn-linear:hover {
    background-color: #1a1a1a !important;
}

/* --- SOUND-DEMO: white mode accordion --- */
body.light-theme [data-section-name="SOUND-DEMO"] {
    color: #1a1a1a;
}
body.light-theme [data-section-name="SOUND-DEMO"] .q-c-main {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="SOUND-DEMO"] .q-c-accent {
    color: #4F6AFF !important;
}
body.light-theme [data-section-name="SOUND-DEMO"] .accordion {
    background-color: #fff !important;
    border-color: #ddd !important;
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="SOUND-DEMO"] .accordion:hover {
    border-color: #bbb !important;
}
body.light-theme [data-section-name="SOUND-DEMO"] .accordion summary:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
}
body.light-theme [data-section-name="SOUND-DEMO"] .accordion summary span {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="SOUND-DEMO"] .accordion summary span[style*="color: var(--text-muted)"] {
    color: #888 !important;
}
body.light-theme [data-section-name="SOUND-DEMO"] .expand-icon {
    color: #4F6AFF !important;
}
body.light-theme [data-section-name="SOUND-DEMO"] .accordion__body {
    border-top-color: #ddd !important;
    background-color: rgba(0, 0, 0, 0.01) !important;
}
body.light-theme [data-section-name="SOUND-DEMO"] .accordion__body div[style*="color: rgba(255,255,255"] {
    color: #444 !important;
}
body.light-theme [data-section-name="SOUND-DEMO"] .accordion__body p {
    color: #444 !important;
}
body.light-theme [data-section-name="SOUND-DEMO"] .accordion__body strong[style*="color: var(--text-main)"] {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="SOUND-DEMO"] .accordion__body a[style*="color: var(--accent-color)"] {
    color: #4F6AFF !important;
}
body.light-theme [data-section-name="SOUND-DEMO"] .accordion__body h4 {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="SOUND-DEMO"] .preset-card__title {
    color: #1a1a1a !important;
}

/* --- LAST-MESSAGE: white mode --- */
body.light-theme [data-section-name="LAST-MESSAGE"] {
    background-color: transparent !important;
    color: #1a1a1a;
}
body.light-theme [data-section-name="LAST-MESSAGE"] .q-c-main {
    color: #1a1a1a !important;
}
body.light-theme [data-section-name="LAST-MESSAGE"] .q-c-w80 {
    color: #444 !important;
}
/* YOU ROCK overlay + closing image: keep same as dark mode */
body.light-theme [data-section-name="LAST-MESSAGE"] #youRockOverlay .q-c-main {
    color: #fff !important;
}
body.light-theme [data-section-name="LAST-MESSAGE"] div[style*="border-radius"] {
    background-color: #000 !important;
}
body.light-theme [data-section-name="LAST-MESSAGE"] div[style*="border-radius"] .q-c-main {
    color: #fff !important;
}
body.light-theme [data-section-name="LAST-MESSAGE"] div[style*="box-shadow"] {
    box-shadow: none !important;
}