/* ===== Hero ===== */
        .hero {
            position: relative; width: 100vw; height: 94vh; min-height: 560px;
            overflow: hidden; display: flex; align-items: flex-end;
        }
        .hero-media { position: absolute; inset: 0; }
        .hero-media img { width: 100%; height: 100%; object-fit: cover; }
        .hero-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.65) 100%);
        }
        .hero-content { position: relative; z-index: 2; max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 0 1.25rem 6rem; color: #fff; }
        .hero-eyebrow { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.1rem; }
        .hero-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(3rem, 9vw, 7rem); line-height: 0.98; letter-spacing: -0.02em; margin: 0; }
        .hero-title em { font-style: normal; color: var(--accent); }
        .hero-subtitle { font-family: var(--font-serif); font-size: clamp(1.1rem, 2vw, 1.6rem); color: rgba(255,255,255,0.85); margin-top: 0.8rem; }

        /* ===== Shared section helpers ===== */
        .section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
        .section.alt { background: var(--bg-secondary); }
        .container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
        .section-head { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
        .section-eyebrow { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem; }
        .section-eyebrow:empty { display: none; }
        .section-head h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -0.02em; line-height: 1.08; color: var(--text-primary); }
        .section-head p { font-family: var(--font-sans); font-weight: 300; color: var(--text-secondary); margin-top: 1rem; font-size: 1.02rem; }

        /* ===== Intro ===== */
        .intro-grid { display: grid; grid-template-columns: 680px 1fr; gap: clamp(3rem, 5vw, 5rem); align-items: center; max-width: none; margin: 0; width: 100%; }
        .intro-highlight { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.18; letter-spacing: -0.01em; color: var(--text-primary); white-space: pre-line; }
        .intro-highlight em { font-style: italic; color: var(--accent); }
        .intro-body p { font-family: var(--font-sans); font-weight: 300; color: var(--text-secondary); font-size: 1.15rem; line-height: 2; margin-bottom: 1.8rem; }
        .intro-left { display: flex; flex-direction: column; }
        .intro-highlight { margin-bottom: 2.6rem; }
        .intro-media { background: #000; align-self: stretch; min-height: clamp(440px, 64vh, 820px); margin-right: calc(-1 * max(1.25rem, (100vw - 1600px) / 2 + 1.25rem)); }
        .intro-media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
        /* #intro uses a slightly wider centered .container (1600px); only the image column bleeds right */
        #intro .container { max-width: 1600px; }
        .intro-video { position: relative; width: 100%; margin: clamp(3rem, 6vw, 5rem) auto 0; }
        .intro-video-el { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; display: block; background: #000; }

        /* ===== Swipe (tech + gallery) ===== */
        .swipe-wrap { position: relative; max-width: var(--maxw); margin: 0 auto; }
        .swipe-track {
            display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
            padding: 0.5rem max(calc((100% - var(--maxw)) / 2), 1.25rem) 1.5rem;
            scrollbar-width: none; -ms-overflow-style: none; cursor: grab;
        }
        .swipe-track::-webkit-scrollbar { display: none; }
        .swipe-track.dragging { cursor: grabbing; scroll-behavior: auto; }

        /* ===== Tech feature carousel (horizontal scroll, centered equal 16:9 cards) ===== */
        .tech-feature-wrap { position: relative; width: 100%; margin: 0 auto; padding: 0; --tf-card-w: clamp(520px, 70vw, 1040px); }
        .tech-feature-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); padding-inline: clamp(2rem, 8vw, 9rem); }
        .tech-feature-header .section-head { text-align: left; margin: 0; max-width: 56ch; }
        .tf-nav { display: flex; gap: 0.75rem; }
        .tech-feature {
            display: flex;
            align-items: stretch;
            gap: clamp(16px, 2vw, 26px);
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            scrollbar-width: none;
            padding-bottom: 4px;
            padding-inline: calc((100% - var(--tf-card-w)) / 2);
        }
        .tech-feature::-webkit-scrollbar { display: none; }
        .tech-feature.tf-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
        .tech-feature.tf-dragging .tf-slide { user-select: none; -webkit-user-select: none; }
        .tech-feature.tf-dragging .tf-media img { pointer-events: none; -webkit-user-drag: none; }
        .tf-slide {
            flex: 0 0 auto;
            scroll-snap-align: center;
            width: var(--tf-card-w);
            aspect-ratio: 16 / 9;
            border-radius: 18px;
            overflow: hidden;
            position: relative;
            background: var(--bg-secondary);
            box-shadow: 0 20px 60px rgba(0,0,0,0.10);
            cursor: grab;
        }
        .tf-media { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
        .tf-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
        .tf-caption {
            position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
            width: clamp(240px, 50%, 540px);
            display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
            gap: 0.9rem; text-align: left; pointer-events: none;
            padding: clamp(1.8rem, 3.2vw, 3.4rem);
            background: linear-gradient(to right, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.70) 55%, rgba(0,0,0,0) 100%);
        }
        .tf-cap-title { font-family: var(--font-sans); font-size: clamp(1.5rem, 2.3vw, 2.05rem); font-weight: 600; color: #fff; margin: 0; line-height: 1.25; white-space: pre-line; text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
        .tf-cap-tag { font-family: var(--font-sans); font-weight: 400; font-size: clamp(1.25rem, 1.7vw, 1.65rem); line-height: 1.4; color: rgba(255,255,255,0.85); margin: 0.4rem 0 0; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
        .tf-slide[data-detail="1"] .tf-cap-title { font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.05; margin-bottom: 0; }
        .tf-slide[data-detail="1"] .tf-cap-tag { font-weight: 700; margin-top: 0.04rem; color: #fff; }
        .tf-slide[data-detail="3"] .tf-cap-title { font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.05; margin-bottom: 0; }
        .tf-slide[data-detail="3"] .tf-cap-tag { font-weight: 700; margin-top: 0.04rem; color: #fff; }
        .tf-cap-sub { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.55; color: var(--accent); margin: 0; max-width: 34ch; white-space: pre-line; text-shadow: 0 1px 8px rgba(0,0,0,0.45); }
        .tf-more { font-family: var(--font-sans); font-size: clamp(1rem, 1.2vw, 1.12rem); font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; position: absolute; left: clamp(1.8rem, 3.2vw, 3.4rem); bottom: clamp(1.8rem, 3.2vw, 3.4rem); transition: gap 0.3s ease; pointer-events: auto; }
        .tf-more:hover { gap: 0.85rem; }
        .tf-foot { display: flex; align-items: center; justify-content: center; margin-top: 2rem; }
        .tf-dots { display: flex; gap: 0.6rem; }
        .tf-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(0,0,0,0.18); border: none; padding: 0; cursor: pointer; transition: all 0.35s ease; }
        .tf-dot.active { background: var(--accent); width: 30px; border-radius: 999px; }
        .tf-arrow { position: relative; top: auto; transform: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.18); background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); color: #111; font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s, color 0.3s, border-color 0.3s; }
        .tf-arrow:hover { background: var(--accent); border-color: var(--accent); }
        @media (max-width: 768px) {
            .tech-feature-wrap { --tf-card-w: 88vw; }
            .tech-feature-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
            .tech-feature-header .section-head { text-align: left; }
        }

        /* ===== Tech detail drawer (slides from right, half width) ===== */
        .tech-drawer-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.42); opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; z-index: 1100; }
        .tech-drawer-scrim.active { opacity: 1; visibility: visible; }
        .tech-drawer {
            position: fixed; top: 0; right: 0; height: 100%; width: 50vw; max-width: 780px;
            background: #fff; z-index: 1150; transform: translateX(100%);
            transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
            overflow-y: auto; box-shadow: -30px 0 90px rgba(0,0,0,0.18);
        }
        .tech-drawer.active { transform: translateX(0); }
        .tech-drawer-close {
            position: absolute; top: 1.5rem; right: 1.5rem; z-index: 2;
            width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
            background: #fff; color: #111; font-size: 1.5rem; line-height: 1; cursor: pointer;
            display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }
        .tech-drawer-close:hover { background: var(--accent); border-color: var(--accent); }
        .tech-drawer-inner { padding: clamp(2.4rem, 4vw, 4rem); }
        .tech-drawer-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--bg-secondary); margin-bottom: 2rem; }
        /* Free-form content the user may add later (extra images, sub-headings, quotes). */
        .tech-drawer-content img:not(.tech-drawer-img) { width: 100%; height: auto; border-radius: 12px; margin: 0 0 1.5rem; }
        .tech-drawer-content h2 { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; color: var(--text-primary); margin: 0 0 1rem; line-height: 1.15; }
        .tech-drawer-content blockquote { margin: 0 0 1.2rem; padding: 1rem 1.4rem; border-left: 3px solid var(--accent); background: var(--bg-secondary); border-radius: 0 10px 10px 0; font-style: italic; color: var(--text-secondary); line-height: 1.7; }
        .tech-drawer-tag { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #111; background: var(--accent); padding: 0.34rem 0.8rem; border-radius: 9999px; margin-bottom: 1rem; }
        .tech-drawer-content h3 { font-family: var(--font-serif); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 600; color: var(--text-primary); margin: 0 0 1.3rem; line-height: 1.1; }
        .tech-drawer-content p { font-family: var(--font-sans); font-weight: 300; font-size: 1rem; line-height: 1.85; color: var(--text-secondary); margin: 0 0 1.2rem; }
        .tech-drawer-content ul { list-style: none; padding: 0; margin: 1.6rem 0 0; }
        .tech-drawer-content li { font-family: var(--font-sans); font-size: 0.96rem; line-height: 1.6; color: var(--text-primary); padding: 0.85rem 0 0.85rem 1.5rem; border-bottom: 1px solid var(--line); position: relative; }
        .tech-drawer-content li::before { content: ''; position: absolute; left: 0; top: 1.5rem; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
        @media (max-width: 860px) { .tech-drawer { width: 100vw; max-width: none; } }

        .swipe-arrow {
            position: absolute; top: 42%; transform: translateY(-50%); z-index: 6;
            width: 50px; height: 50px; border-radius: 50%;
            border: 1px solid rgba(0,0,0,0.18); background: rgba(255,255,255,0.9);
            backdrop-filter: blur(6px); color: #111; font-size: 1.2rem; line-height: 1; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }
        .swipe-arrow:hover { background: var(--accent); color: #111; border-color: var(--accent); }
        .swipe-arrow.prev { left: 1.5rem; }
        .swipe-arrow.next { right: 1.5rem; }
        .swipe-arrow:disabled { opacity: 0.25; cursor: default; }

        /* ===== Smart Y visual sections ===== */
        .smarty-image-section { padding: 0; }
        .smarty-image-section img { width: 100%; display: block; height: auto; }

        /* ===== Customization (configurator) ===== */
        .custom-grid {
            display: grid;
            grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
            grid-template-rows: auto auto;
            gap: clamp(1.2rem, 2.5vw, 2.2rem);
            align-items: stretch;
            max-width: 1260px;
            margin: 0 auto;
        }
        .cfg-stage { display: contents; }
        .custom-right { display: contents; }
        .cfg-main {
            position: relative; border-radius: 16px; overflow: hidden;
            background: #fff url('/v2/assets/smart-y.jpg') center / cover no-repeat;
            aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
            grid-column: 1; grid-row: 1;
        }
        .cfg-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.25s ease; }
        .cfg-thumbs {
            display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem;
            grid-column: 1; grid-row: 2;
        }
        .cfg-thumb {
            position: relative; border-radius: 10px; overflow: hidden;
            aspect-ratio: 16 / 9; background: var(--bg-secondary); padding: 0; cursor: pointer;
            border: none;
            transition: transform 0.3s ease;
        }
        .cfg-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .cfg-thumb:hover { transform: translateY(-2px); }
        .cfg-thumb.active { box-shadow: 0 0 0 3px rgba(201,169,110,0.35); }

        .cfg-card {
            background: #fff; border-radius: 18px;
            padding: clamp(1.3rem, 2.2vw, 2rem);
            box-shadow: 0 12px 34px rgba(0,0,0,0.10);
        }
        .cfg-card-options {
            display: flex; flex-direction: column;
            grid-column: 2; grid-row: 1;
        }
        .cfg-options { display: flex; flex-direction: column; gap: clamp(1.8rem, 3vw, 2.6rem); }
        .cfg-opt-group { display: flex; flex-direction: column; gap: 0.75rem; }
        .cfg-opt-group:nth-of-type(2) { margin-top: clamp(0.6rem, 1.5vw, 1.2rem); }
        .cfg-opt-label {
            font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600;
            letter-spacing: 0.04em; color: #111;
        }
        .cfg-color-tabs { display: flex; flex-wrap: wrap; gap: 0.8rem; }
        .cfg-color {
            position: relative;
            width: 72px; height: 72px;
            border-radius: 14px;
            border: none;
            background: var(--c);
            cursor: pointer;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .cfg-color:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
        .cfg-color.active { box-shadow: 0 0 0 3px rgba(201,169,110,0.5); }
        .cfg-color-dot { display: none; }
        .cfg-color-name {
            position: absolute; left: 0; right: 0; bottom: 0;
            padding: 0.5rem 0.35rem 0.4rem;
            font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600;
            color: #fff; text-align: center;
            background: linear-gradient(transparent, rgba(0,0,0,0.55));
            opacity: 0; transform: translateY(6px);
            transition: opacity 0.25s ease, transform 0.25s ease;
            pointer-events: none;
        }
        .cfg-color:hover .cfg-color-name,
        .cfg-color:focus .cfg-color-name {
            opacity: 1; transform: translateY(0);
        }
        .cfg-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; }
        .cfg-tab {
            flex: 1 1 0; min-width: 0; text-align: center;
            font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; color: var(--text-primary);
            padding: 0.6rem 0.5rem; border-radius: 9999px; background: #f4f4f4; cursor: pointer; border: none;
            transition: background 0.3s ease, color 0.3s ease;
        }
        .cfg-tab:hover { background: #ececec; }
        .cfg-tab.active { background: #111; color: #fff; }
        .cfg-card-footer { margin-top: auto; padding-top: 1.6rem; }
        .cfg-link {
            font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; color: var(--accent);
            background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem;
            transition: gap 0.3s ease;
        }
        .cfg-link:hover { gap: 0.8rem; }
        .cfg-enter-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
            margin-top: 1rem; width: 100%;
            font-family: var(--font-sans); font-size: 0.98rem; font-weight: 600; color: #111;
            background: #fff; border: 1px solid rgba(0,0,0,0.18); border-radius: 10px;
            padding: 0.85rem 1.4rem; text-decoration: none; cursor: pointer;
            transition: background 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
        }
        .cfg-enter-btn:hover { background: #f5f5f5; border-color: rgba(0,0,0,0.35); gap: 0.8rem; }
        .cfg-card-note {
            display: flex; align-items: center; gap: 1rem;
            background: #fafafa;
            grid-column: 2; grid-row: 2;
        }
        .cfg-note-icon {
            flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
            background: #fff;
            display: flex; align-items: center; justify-content: center; color: var(--accent);
        }
        .cfg-logo-note { margin: 0; font-size: 0.92rem; color: var(--text-secondary); line-height: 1.55; }

        /* ===== Model differences drawer (spec comparison table) ===== */
        .spec-table-wrap { overflow-x: auto; }
        .spec-table { width: 100%; border-collapse: collapse; margin-top: 1.6rem; font-family: var(--font-sans); font-size: 0.94rem; }
        .spec-table th, .spec-table td { border: 1px solid #e3ddd0; padding: 0.78rem 0.9rem; vertical-align: middle; text-align: center; }
        .spec-table thead th { background: var(--accent); color: #fff; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; white-space: nowrap; }
        .spec-table thead th:first-child { text-align: center; }
        .spec-table tbody td.spec-cat { background: #f4efe4; color: #1a1a1a; font-weight: 600; white-space: nowrap; }
        .spec-table tbody td.spec-param { text-align: left; font-weight: 600; color: var(--text-primary); background: #faf8f3; }
        .spec-table tbody td.spec-val { color: var(--text-secondary); }
        .spec-table .col-sel { background: rgba(201,169,110,0.16); }
        .spec-table thead th.col-sel { color: #111; }

        #modelDiffDrawer { width: 85vw; max-width: 1200px; }
        @media (max-width: 860px) { #modelDiffDrawer { width: 100vw; max-width: none; } }

        .spec-notes { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-family: var(--font-sans); font-size: 0.82rem; line-height: 1.7; color: var(--text-secondary); }
        .spec-note-list { list-style: none; padding: 0; margin: 0 0 1rem; }
        .spec-note-list li { position: relative; margin-bottom: 0.55rem; color: #888; font-style: italic; }
        .spec-note-list li::before { display: none; }
        .spec-note-marker { display: inline-block; width: 2.6em; font-weight: 700; color: #000; font-style: normal; vertical-align: top; }
        .spec-legend { display: flex; flex-wrap: wrap; gap: 1.4rem; }
        .spec-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
        .spec-legend-icon { font-weight: 700; color: var(--accent); }

        @media (max-width: 1024px) {
            .custom-grid { grid-template-columns: 1fr; max-width: 760px; gap: 0.9rem; }
        }

        /* ===== Customize header overrides ===== */
        #customize .section-eyebrow { text-transform: none; letter-spacing: 0.12em; }
        #customize .section-head p { white-space: nowrap; }
        @media (max-width: 768px) { #customize .section-head p { white-space: normal; } }

        /* ===== Consult (CTA card) ===== */
        #consult .container { max-width: 1600px; }
        .consult-card {
            display: flex; align-items: center; justify-content: space-between;
            gap: clamp(1.5rem, 4vw, 3rem);
            aspect-ratio: 4 / 1; min-height: 200px;
            max-width: 1600px; margin: 0 auto;
            padding: clamp(1.6rem, 4vw, 3rem) clamp(2rem, 5vw, 4.5rem);
            border-radius: 0;
            background: #fff;
            color: var(--text-primary); box-shadow: 0 12px 34px rgba(0,0,0,0.10);
        }
        .consult-card-text h2 {
            font-family: var(--font-serif); font-weight: 600;
            font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.25;
            letter-spacing: -0.01em; color: var(--text-primary); margin: 0;
        }
        .consult-card-text h2 span { white-space: nowrap; }
        .consult-card-side { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.6rem); flex-shrink: 0; }
        .consult-hours { display: flex; flex-direction: column; gap: 0.35rem; text-align: right; }
        .consult-hours-label { font-family: var(--font-sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(0,0,0,0.5); }
        .consult-hours-val { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 500; color: var(--text-primary); }
        .consult-hours-tz { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); }
        .consult-btn {
            display: inline-flex; align-items: center; gap: 0.5rem;
            font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: #fff;
            background: #111; border: none; border-radius: 0;
            padding: 0.95rem 2.2rem; text-decoration: none; white-space: nowrap;
            transition: background 0.3s ease;
        }
        .consult-btn:hover { background: #333; }

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

        /* ===== Responsive ===== */
        @media (max-width: 1024px) {
            .nav-center { display: none; }
            .nav-left, .nav-right { width: auto; }
            .custom-grid, .consult-card { grid-template-columns: 1fr; }
            .render-stage { aspect-ratio: 4 / 3; }
        }
        @media (max-width: 768px) {
            .consult-card { flex-direction: column; align-items: flex-start; aspect-ratio: auto; gap: 1.4rem; }
            .consult-card-side { width: 100%; justify-content: space-between; }
            .consult-hours { text-align: left; }
            .consult-card-text h2 span { white-space: normal; }
        }
        @media (max-width: 640px) {
            .nav { padding: 0 20px; }
            .swipe-arrow { display: none; }
            .hero { height: 86vh; }
            .hero-content { padding-bottom: 3.5rem; }
        }
    /* ===== Ultimate Consistency ===== */
    .uc-section { padding: clamp(4rem, 9vw, 8rem) 0; background: #fff; }
    .uc-head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
    .uc-title { font-family: var(--font-serif); font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 600; color: var(--text-primary); margin: 0.6rem 0 0; line-height: 1.05; letter-spacing: -0.01em; }
    .uc-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
    .uc-stat { position: relative; padding: 0 clamp(1.5rem, 3vw, 3rem); text-align: center; }
    .uc-stat + .uc-stat::before {
        content: '';
        position: absolute;
        left: 0;
        top: 15%;
        bottom: 15%;
        width: 1px;
        background: var(--line);
        transform: rotate(16deg);
        transform-origin: center;
    }
    .uc-num {
        font-family: var(--font-sans);
        font-weight: 400;
        font-size: clamp(2.6rem, 7vw, 5.5rem);
        color: var(--accent);
        line-height: 1;
        letter-spacing: -0.03em;
        display: inline-flex;
        align-items: baseline;
        gap: 0.05em;
        font-variant-numeric: tabular-nums;
    }
    .uc-prefix { font-size: 0.45em; font-weight: 500; color: var(--text-secondary); }
    .uc-val {
        display: inline-block;
        vertical-align: bottom;
        height: 1em;
        overflow: hidden;
        position: relative;
    }
    .uc-reel {
        display: block;
        line-height: 1;
        text-align: center;
    }
    .uc-reel span { display: block; height: 1em; }
    .uc-animated .uc-reel { animation: ucRoll 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: var(--delay, 0s); }
    @keyframes ucRoll { from { transform: translateY(0); } to { transform: translateY(-10em); } }
    .uc-unit { font-size: 0.28em; font-weight: 500; color: var(--text-secondary); margin-left: 0.1em; }
    .uc-label { font-family: var(--font-sans); font-weight: 300; font-size: clamp(0.85rem, 1.1vw, 1rem); color: var(--text-secondary); margin-top: 1rem; letter-spacing: 0.02em; }
    .uc-extra { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0.7rem; margin-top: clamp(2rem, 4.5vw, 3.5rem); }
    .uc-extra-label { font-family: var(--font-sans); font-weight: 300; font-size: clamp(1.6rem, 3.4vw, 2.6rem); color: var(--text-secondary); letter-spacing: 0.02em; }
    .uc-extra-val { font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.6rem); color: var(--accent); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
    .btn-outline {
        display: inline-flex; align-items: center; gap: 0.5rem;
        font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600;
        padding: 0.9rem 1.8rem; border-radius: 9999px; cursor: pointer; text-decoration: none;
        color: #111; border: 1px solid rgba(0,0,0,0.35);
        transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
    }
    .btn-outline:hover { transform: translateY(-2px); background: #111; color: #fff; border-color: #111; }
    @media (max-width: 860px) {
        .uc-stats-row { grid-template-columns: 1fr; gap: 2.5rem 0; }
        .uc-stat { padding: 1.5rem 0; }
        .uc-stat + .uc-stat::before {
            left: 15%; right: 15%; top: 0; bottom: auto; width: auto; height: 1px; transform: none;
        }
    }

.hero-title em{font-style:italic;color:var(--accent)}

/* CI mobile refinement: fixed desktop intro tracks must stack instead of clipping. */
@media (max-width: 900px) {
    #intro .container { max-width: 100%; }
    .intro-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .intro-left, .intro-highlight, .intro-body { width: 100%; min-width: 0; max-width: 100%; }
    .intro-highlight { white-space: normal; overflow-wrap: anywhere; }
    .intro-media {
        width: 100%; min-width: 0; min-height: 0; margin-right: 0;
        aspect-ratio: 4 / 3;
    }
}

/* CI mobile refinement: preserve the visual dots while exposing usable touch targets. */
@media (max-width: 768px) {
    .tf-dot { position: relative; width: 44px; height: 44px; background: transparent; }
    .tf-dot.active { width: 44px; background: transparent; }
    .tf-dot::after {
        content: ''; position: absolute; left: 50%; top: 50%;
        width: 9px; height: 9px; border-radius: 999px;
        background: rgba(0,0,0,.18); transform: translate(-50%,-50%);
    }
    .tf-dot.active::after { width: 30px; background: var(--accent); }
    /* The caption is absolutely positioned over a 16/9 card and capped at half
       its width, while .tf-more is anchored to the card's bottom edge with a
       fixed offset that assumes a single-line sub-caption. On a phone the
       sub-caption wraps and the anchored link lands on top of it — 36 collisions
       across the six product pages, and worse in English where the copy is
       longer. Give the card room, let the caption use the full width so it wraps
       less, and put the link back in normal flow. */
    .tf-slide { aspect-ratio: 4 / 5; }
    .tf-caption {
        width: 100%;
        justify-content: flex-end;
        gap: 0.6rem;
        padding: 1.5rem 1.4rem 1.6rem;
        background: linear-gradient(to top,
            rgba(0,0,0,.92) 0%, rgba(0,0,0,.80) 46%,
            rgba(0,0,0,.30) 78%, rgba(0,0,0,.04) 100%);
    }
    .tf-cap-sub { max-width: none; }
    .tf-more {
        position: static; min-height: 44px; align-items: center;
        padding-block: 8px; margin-block: 0;
    }
    .tech-feature-title { white-space: normal !important; font-size: clamp(1.7rem, 7.2vw, 2rem); }
    .tf-arrow { width: 44px; height: 44px; font-size: 1.15rem; }
    /* Safari accepted the unprefixed property only from version 18; iOS 16/17
       needs the prefix or these controls lose their blur entirely. */
    .tf-arrow, .cfg-thumb, .spec-scroll-hint {
        -webkit-backdrop-filter: blur(6px);
    }
    .cfg-tab { min-height: 44px; }
    .cfg-link { min-height: 44px; padding: 10px 0; }
}
@media (max-width: 1024px) {
    .cfg-main, .cfg-thumbs, .cfg-card-options, .cfg-card-note {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .cfg-main, .cfg-thumbs { justify-self: stretch; height: auto; }
    .cfg-thumb { position: relative; min-width: 44px; min-height: 44px; }
}
@media (max-width: 640px) {
    .cfg-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Smart Y poster sections: approved artwork on wide viewports, real text on
   phones. The copy baked into these images renders about four pixels tall at
   390px, which no font rule can rescue — it is pixels, not type. */
.smarty-text-fallback { display: none; }
@media (max-width: 900px) {
    .smarty-image-section img { display: none; }
    /* The artwork carried its own black field; without it the section is white,
       so the panel has to supply the dark ground the copy is designed against. */
    .smarty-text-fallback {
        display: block;
        margin: 0 20px;
        padding: 30px 22px 26px;
        background: #0b0b0b;
        border-radius: 14px;
    }
    .smarty-tf-eyebrow {
        color: var(--accent); font-size: 0.9rem; letter-spacing: .06em;
        margin: 0 0 .5rem; font-weight: 600;
    }
    .smarty-tf-title {
        color: #fff; font-size: clamp(1.6rem, 7vw, 2.1rem); line-height: 1.25;
        margin: 0 0 .9rem; font-weight: 600;
    }
    .smarty-tf-body, .smarty-tf-lede {
        color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.75; margin: 0;
    }
    .smarty-tf-stats {
        list-style: none; margin: 1.5rem 0 0; padding: 0;
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem;
    }
    .smarty-tf-stats li { margin: 0; }
    .smarty-tf-num {
        display: block; color: var(--accent); font-weight: 600;
        font-size: 2rem; line-height: 1.1;
    }
    .smarty-tf-num span { font-size: 1rem; font-weight: 600; }
    .smarty-tf-label {
        display: block; color: rgba(255,255,255,.82);
        font-size: .95rem; margin-top: .3rem;
    }
    .smarty-tf-note {
        color: rgba(255,255,255,.5); font-size: .8rem; line-height: 1.6;
        margin: 1.4rem 0 0;
    }
}

/* 9/3 反馈第 9 条：抽屉正文统一黑色，不要花里胡哨。金色标签已在
   product_tech_bind.py 里整块删除，这里收掉正文里剩下的三处装饰色。
   要退回：删掉这一段即可，原型与基准稿都没有动过。 */
.tech-drawer-content p{color:var(--text-primary)}
.tech-drawer-content blockquote{color:var(--text-primary);border-left-color:var(--line)}
.tech-drawer-content li::before{background:var(--text-primary)}