/* =============================================
   YANMAR KANCHANABURI — style.css
   CI: Red #E60012 · Black #0A0A0A · White
   ============================================= */

/* ── Variables ── */
:root {
    --red: #E60012;
    --red-dark: #B8000E;
    --red-light: #FF1A2E;
    --red-glow: rgba(230, 0, 18, 0.35);
    --red-glow-lg: rgba(230, 0, 18, 0.12);

    --bg: #0A0A0A;
    --bg-alt: #111111;
    --bg-card: #161616;
    --bg-card-hover: #1c1c1c;
    --border: rgba(255,255,255,0.08);
    --border-hover: rgba(255,255,255,0.15);

    --txt: rgba(255,255,255,0.92);
    --txt-sub: rgba(255,255,255,0.55);
    --txt-muted: rgba(255,255,255,0.3);

    --white: #FFFFFF;

    --ff: 'Noto Sans Thai', sans-serif;
    --ff-en: 'Oswald', sans-serif;
    --ff-display: 'Bebas Neue', sans-serif;

    --nav-h: 68px;
    --r: 12px;
    --r-sm: 8px;
    --r-lg: 20px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 0.3s;
    --dur-slow: 0.6s;
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
    font-family: var(--ff);
    background: var(--bg);
    color: var(--txt);
    line-height: 1.7;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: 1rem; outline: none; border: none; background: none; color: var(--white); }
ul { list-style: none; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.hide-mobile { display: inline; }

/* ── Loader ── */
/* Enter: logo is wiped in by a red sweep, progress counts 0→100.
   Exit (.is-leaving): content lifts away, the panel slides up, then the
   red curtain behind it follows — revealing the page. */
.loader {
    position: fixed; inset: 0; z-index: 9999; overflow: hidden;
    --ld-bg: #0A0A0A; --ld-bg2: #1a1a1a;
    --ld-line: rgba(255,255,255,0.045);
    --ld-ink: rgba(255,255,255,0.92); --ld-sub: rgba(255,255,255,0.45);
    --ld-track: rgba(255,255,255,0.1);
    --ld-ease: cubic-bezier(0.76, 0, 0.24, 1);
}
.loader.done { visibility: hidden; pointer-events: none; }

.loader-curtain, .loader-panel { position: absolute; inset: 0; will-change: transform; }
.loader-curtain { background: var(--red); }
.loader-panel {
    background: radial-gradient(ellipse 70% 60% at 50% 45%, var(--ld-bg2) 0%, var(--ld-bg) 70%);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.loader.is-leaving .loader-panel   { transform: translateY(-100%); transition: transform 0.9s var(--ld-ease) 0.2s; }
.loader.is-leaving .loader-curtain { transform: translateY(-100%); transition: transform 0.9s var(--ld-ease) 0.38s; }

/* Plowed-field furrows drifting diagonally */
.loader-furrows {
    position: absolute; inset: -50%;
    background-image: repeating-linear-gradient(-35deg, var(--ld-line) 0 1px, transparent 1px 28px);
    mask-image: radial-gradient(ellipse 45% 40% at 50% 50%, #000 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 45% 40% at 50% 50%, #000 0%, transparent 100%);
    animation: ldFurrow 2.4s linear infinite;
}
@keyframes ldFurrow { to { transform: translate3d(-16.06px, -22.94px, 0); } }

.loader-glow {
    position: absolute; width: min(75vw, 760px); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(230,0,18,0.16) 0%, transparent 62%);
    animation: ldGlow 3.2s ease-in-out infinite;
}
@keyframes ldGlow { 0%, 100% { opacity: 0.55; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.08); } }

.loader-corner {
    position: absolute; width: 22px; height: 22px;
    border: 0 solid var(--red); opacity: 0;
    animation: ldCorner 0.7s var(--ease-out) 0.15s forwards;
}
.loader-corner--tl { top: clamp(16px, 3vw, 32px); left: clamp(16px, 3vw, 32px); border-top-width: 2px; border-left-width: 2px; }
.loader-corner--tr { top: clamp(16px, 3vw, 32px); right: clamp(16px, 3vw, 32px); border-top-width: 2px; border-right-width: 2px; }
.loader-corner--bl { bottom: clamp(16px, 3vw, 32px); left: clamp(16px, 3vw, 32px); border-bottom-width: 2px; border-left-width: 2px; }
.loader-corner--br { bottom: clamp(16px, 3vw, 32px); right: clamp(16px, 3vw, 32px); border-bottom-width: 2px; border-right-width: 2px; }
@keyframes ldCorner { from { opacity: 0; transform: scale(1.8); } to { opacity: 1; transform: scale(1); } }

.loader-inner, .loader-meta { transition: opacity 0.4s var(--ease), transform 0.7s var(--ld-ease); }
.loader.is-leaving .loader-inner { opacity: 0; transform: translateY(-40px) scale(0.97); }
.loader.is-leaving .loader-meta  { opacity: 0; transform: translateY(-20px); }

.loader-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.loader-logo-wrap { position: relative; width: clamp(200px, 46vw, 300px); }
.loader-logo {
    width: 100%; height: auto;
    clip-path: inset(0 100% 0 0);
    animation: ldLogoIn 1.05s var(--ease-out) 0.2s forwards, ldBreath 2.6s ease-in-out 1.4s infinite;
}
@keyframes ldLogoIn { to { clip-path: inset(0 0 0 0); } }
@keyframes ldBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.loader-sweep {
    position: absolute; top: -10%; bottom: -10%; left: 0; width: 3px; border-radius: 2px;
    background: var(--red); box-shadow: 0 0 22px 3px var(--red-glow); opacity: 0;
    animation: ldSweep 1.05s var(--ease-out) 0.2s forwards;
}
@keyframes ldSweep { 0% { left: 0; opacity: 1; } 80% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.loader-track {
    width: clamp(160px, 30vw, 220px); height: 2px; border-radius: 2px;
    background: var(--ld-track); overflow: hidden;
    opacity: 0; animation: ldFadeUp 0.6s var(--ease-out) 0.55s forwards;
}
.loader-track-fill {
    width: 100%; height: 100%;
    background: linear-gradient(90deg, var(--red-dark), var(--red-light));
    transform: scaleX(0); transform-origin: left;
}
.loader-tagline {
    font-family: var(--ff-en); font-size: 0.7rem; font-weight: 500;
    letter-spacing: 0.38em; text-transform: uppercase; color: var(--ld-sub);
    opacity: 0; animation: ldFadeUp 0.6s var(--ease-out) 0.7s forwards;
}

.loader-meta {
    position: absolute; left: 0; right: 0; bottom: clamp(44px, 7vh, 72px); z-index: 2;
    padding: 0 clamp(28px, 5vw, 64px);
    display: flex; justify-content: space-between; align-items: flex-end;
}
.loader-meta > * { opacity: 0; animation: ldFadeUp 0.6s var(--ease-out) 0.5s forwards; }
.loader-meta-label { font-family: var(--ff-en); font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ld-sub); }
.loader-count {
    font-family: var(--ff-display); font-size: clamp(2.8rem, 7vw, 4.5rem);
    line-height: 0.8; color: var(--ld-ink); font-variant-numeric: tabular-nums;
}
.loader-count i { font-style: normal; font-size: 0.45em; color: var(--red); margin-left: 2px; }
@keyframes ldFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Page entrance — hero settles in as the curtain lifts */
.hero-bg { transition: transform 1.8s var(--ease-out); }
html.is-loading .hero-bg { transform: scale(1.12); }

/* ── Navigation ── */
.nav {
    position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
    z-index: 1000;
    transition: background var(--dur) var(--ease), box-shadow var(--dur);
}
.nav.scrolled {
    background: rgba(10,10,10,0.94);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 1px 0 var(--border);
}
.nav-inner {
    max-width: 1200px; margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2rem);
    height: 100%; display: flex; align-items: center; gap: 2rem;
}
.nav-logo-img { height: clamp(26px, 3.8vw, 36px); width: auto; }
.nav-links { display: flex; gap: clamp(1rem, 2.2vw, 1.8rem); margin-left: auto; }
.nav-link {
    font-size: 0.88rem; font-weight: 500; color: var(--txt-sub);
    transition: color var(--dur); position: relative; padding: 4px 0;
}
.nav-link::after {
    content: ''; position: absolute; bottom: -2px; left: 0;
    width: 0; height: 2px; background: var(--red);
    transition: width var(--dur) var(--ease);
}
.nav-link:hover, .nav-link.active { color: var(--white); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.nav-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 20px; background: var(--red); color: var(--white);
    font-size: 0.82rem; font-weight: 600; border-radius: 100px;
    transition: all var(--dur);
    margin-left: 0.5rem;
    white-space: nowrap;
}
.nav-cta:hover { background: var(--red-light); box-shadow: 0 4px 20px var(--red-glow); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; z-index: 1001; }
.nav-toggle span { width: 22px; height: 2px; background: var(--white); transition: var(--dur) var(--ease); transform-origin: center; }
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Mobile Menu */
.mobile-menu {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(10,10,10,0.98); backdrop-filter: blur(30px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: var(--dur-slow) var(--ease);
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu-inner { text-align: center; }
/* width:auto is required — the img carries a width attribute for layout
   stability, and without this the logo stretches to that attribute's value. */
.mobile-menu-logo { height: 32px; width: auto; margin: 0 auto 2.5rem; }
.mobile-menu-links { display: flex; flex-direction: column; gap: 1.6rem; margin-bottom: 2.5rem; }
.mobile-menu-links a {
    font-size: clamp(1.3rem, 4.5vw, 1.8rem); font-weight: 700;
    color: var(--white); transition: color var(--dur);
}
.mobile-menu-links a:hover { color: var(--red); }
.mobile-menu-cta { max-width: 260px; margin: 0 auto; }

/* ── Hero ── */
.hero {
    position: relative; min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column;
    overflow: hidden;
    padding-top: var(--nav-h);
}
/* Hero text sits on the video in both themes — always white.
   Also covers the transparent nav while it overlays the hero. */
.hero,
body:has(.hero) .nav:not(.scrolled) {
    --txt: rgba(255,255,255,0.95);
    --txt-sub: rgba(255,255,255,0.85);
    --txt-muted: rgba(255,255,255,0.7);
    --border: rgba(255,255,255,0.3);
    --border-hover: rgba(255,255,255,0.5);
    color: var(--txt);
}
.hero-content, .hero-stats, body:has(.hero) .nav:not(.scrolled) .nav-link {
    text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg-video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-grid-pattern {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, black 10%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, black 10%, transparent 70%);
}
.hero-radial {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 55% 45% at 30% 40%, var(--red-glow-lg) 0%, transparent 70%);
}
.hero-diagonal {
    position: absolute; right: -15%; top: 10%; width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(230,0,18,0.05) 0%, transparent 60%);
    transform: rotate(20deg);
}
.hero-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.particle {
    position: absolute; border-radius: 50%; background: var(--red); opacity: 0;
    animation: pFloat linear infinite;
}
@keyframes pFloat {
    0%{opacity:0;transform:translateY(0) scale(0)} 8%{opacity:.5;transform:scale(1)}
    85%{opacity:.15} 100%{opacity:0;transform:translateY(-100vh) scale(0)}
}

.hero-container {
    flex: 1; display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center; gap: clamp(2rem, 4vw, 4rem);
    position: relative; z-index: 2;
    padding-top: 2rem; padding-bottom: 2rem;
}
.hero-content { max-width: 540px; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 18px; border: 1px solid var(--border);
    border-radius: 100px; font-size: 0.78rem; font-weight: 500;
    color: var(--txt-sub); letter-spacing: 0.04em; margin-bottom: 1.5rem;
}
.hero-badge-pulse {
    width: 6px; height: 6px; background: var(--red); border-radius: 50%;
    animation: bPulse 2s ease-in-out infinite;
}
@keyframes bPulse { 0%,100%{box-shadow:0 0 0 0 var(--red-glow)} 50%{box-shadow:0 0 0 7px transparent} }

.hero-title { display: flex; flex-direction: column; margin-bottom: 1.2rem; }
.hero-line {
    font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 900;
    line-height: 1.1; letter-spacing: -0.02em;
}
.hero-line--red { color: var(--red); text-shadow: 0 0 80px var(--red-glow); }
.hero-desc {
    font-size: clamp(0.95rem, 2vw, 1.08rem); color: var(--txt-sub);
    line-height: 1.85; margin-bottom: 2rem;
}
.hero-btns { display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* Hero Visual (Tractor SVG) */
.hero-visual { display: flex; align-items: center; justify-content: center; }
.hero-visual-frame { position: relative; width: 100%; max-width: 480px; }
.hero-tractor {
    width: 100%; height: auto;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
    animation: tractorFloat 5s ease-in-out infinite;
}
@keyframes tractorFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.hero-visual-glow {
    position: absolute; bottom: -20%; left: 10%; right: 10%; height: 60%;
    background: radial-gradient(ellipse, var(--red-glow-lg) 0%, transparent 70%);
    pointer-events: none;
}

/* Hero Stats */
.hero-stats {
    position: relative; z-index: 2;
    padding: 1.5rem 0;
    border-top: 1px solid var(--border);
    margin-top: auto;
}
.hero-stats-row {
    display: flex; align-items: center; justify-content: center;
    gap: clamp(1.2rem, 3vw, 2.5rem); flex-wrap: wrap;
}
.stat { text-align: center; }
.stat-number {
    font-family: var(--ff-display); font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    color: var(--white); line-height: 1;
}
.stat-plus { font-family: var(--ff-display); font-size: clamp(1rem, 2vw, 1.4rem); color: var(--red); }
.stat-label { display: block; font-size: 0.72rem; color: var(--txt-muted); margin-top: 3px; }
.stat-sep { width: 1px; height: 36px; background: var(--border); }

/* Scroll Hint */
.hero-scroll-hint {
    position: absolute; bottom: 5rem; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 3;
}
.hero-scroll-hint span { font-size: 0.65rem; color: var(--txt-muted); letter-spacing: 0.18em; font-family: var(--ff-en); }
.scroll-line {
    width: 1px; height: 36px;
    background: linear-gradient(to bottom, var(--red), transparent);
    animation: sLine 2s ease-in-out infinite;
}
@keyframes sLine { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; font-size: 0.92rem; font-weight: 600;
    border-radius: var(--r-sm); transition: all var(--dur) var(--ease);
    position: relative; overflow: hidden; white-space: nowrap;
}
.btn-primary { background: var(--red); color: var(--white); }
.btn-primary::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: translateX(-100%); transition: transform 0.5s;
}
.btn-primary:hover::before { transform: translateX(100%); }
.btn-primary:hover { background: var(--red-light); box-shadow: 0 8px 28px var(--red-glow); transform: translateY(-2px); }

.btn-ghost { border: 1px solid var(--border); color: var(--white); }
.btn-ghost:hover { border-color: var(--border-hover); background: rgba(255,255,255,0.05); }

.btn-white { background: var(--white); color: var(--bg); }
.btn-white:hover { background: rgba(255,255,255,0.9); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }

.btn-outline-white { border: 1px solid rgba(255,255,255,0.3); color: var(--white); }
.btn-outline-white:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }

.btn-card {
    width: 100%; justify-content: center; padding: 11px 20px;
    background: rgba(255,255,255,0.06); color: var(--white);
    border: 1px solid var(--border); font-size: 0.88rem;
}
.btn-card:hover { background: var(--red); border-color: var(--red); }

.btn-lg { padding: 15px 36px; font-size: 0.98rem; }
.btn-full { width: 100%; justify-content: center; }

/* ── Section ── */
.section { padding: clamp(4rem, 10vw, 7rem) 0; position: relative; }
.section--dark { background: var(--bg); }
.section--alt { background: var(--bg-alt); }

.section-head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-tag {
    font-family: var(--ff-en); font-size: 0.82rem; font-weight: 600;
    color: var(--red); letter-spacing: 0.22em; display: block; margin-bottom: 0.6rem;
}
.section-title { font-size: clamp(1.7rem, 4.5vw, 2.6rem); font-weight: 800; line-height: 1.25; margin-bottom: 0.8rem; }
.section-desc { font-size: clamp(0.92rem, 2vw, 1.02rem); color: var(--txt-sub); max-width: 520px; margin: 0 auto; }

/* ── Products ── */
.filter-bar { display: flex; justify-content: center; gap: 0.4rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.filter-btn {
    padding: 7px 22px; font-size: 0.82rem; font-weight: 500;
    color: var(--txt-sub); border: 1px solid var(--border);
    border-radius: 100px; transition: all var(--dur);
}
.filter-btn:hover { color: var(--white); border-color: var(--border-hover); }
.filter-btn.active { background: var(--red); color: var(--white); border-color: var(--red); }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
    gap: 1.4rem;
}
.product-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r); overflow: hidden;
    transition: all var(--dur-slow) var(--ease);
}
.product-card:hover { transform: translateY(-6px); border-color: var(--red); box-shadow: 0 16px 50px rgba(0,0,0,0.4), 0 0 0 1px var(--red); }
.product-card.hidden { display: none; }

.product-img {
    position: relative; height: 190px;
    background: linear-gradient(160deg, var(--bg-card), #1f1f1f);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; padding: 0.9rem;
}
.product-image { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-slow); }
/* Most product shots are cut-outs on a transparent background, so they are
   letterboxed inside the frame. A shot that carries its own backdrop looks
   wrong floating in the middle — let that kind bleed to the edges instead. */
.product-img--full { padding: 0; }
.product-img--full .product-image { object-fit: cover; }
.product-card:hover .product-image { transform: scale(1.06); }

.product-tag {
    position: absolute; top: 10px; right: 10px;
    padding: 3px 12px; background: var(--red); color: var(--white);
    font-size: 0.72rem; font-weight: 600; border-radius: 100px;
}
.product-tag--green { background: #00B74A; }
.product-tag--gold { background: #C98E00; }

.product-body { padding: 1.3rem 1.4rem 1.5rem; }
.product-series { font-family: var(--ff-en); font-size: 0.72rem; font-weight: 600; color: var(--red); letter-spacing: 0.08em; }
.product-name { font-family: var(--ff-en); font-size: 1.2rem; font-weight: 600; margin: 0.25rem 0 0.5rem; }
.product-desc { font-size: 0.85rem; color: var(--txt-sub); margin-bottom: 1rem; line-height: 1.6; }

.product-specs { display: flex; gap: 0.8rem; margin-bottom: 1.2rem; padding: 0.8rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pspec { flex: 1; text-align: center; }
.pspec-val { display: block; font-family: var(--ff-display); font-size: 1.3rem; color: var(--white); line-height: 1; }
.pspec-lbl { font-size: 0.68rem; color: var(--txt-muted); margin-top: 2px; display: block; }

/* ── Why Yanmar ── */
.why-accent {
    position: absolute; top: 0; right: -8%; width: 400px; height: 400px;
    background: radial-gradient(circle, var(--red-glow-lg) 0%, transparent 65%);
    pointer-events: none;
}
/* Red band across the top of the WHY YANMAR section */
.why-topband {
    position: absolute; top: 0; left: 0; right: 0; height: 200px;
    pointer-events: none;
    background: linear-gradient(180deg, var(--red-glow-lg) 0%, transparent 100%);
}
.why-topband::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--red) 50%, transparent 100%);
}
.why-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px,100%),1fr)); gap: 1.4rem; }
.why-card {
    padding: clamp(1.4rem, 3vw, 2rem);
    background: rgba(255,255,255,0.025); border: 1px solid var(--border);
    border-radius: var(--r); transition: all var(--dur);
    position: relative; overflow: hidden;
}
.why-card::before {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 0; height: 3px; background: var(--red); transition: width var(--dur-slow);
}
.why-card:hover::before { width: 100%; }
.why-card:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); transform: translateY(-4px); }
.why-num { position: absolute; top: 1.2rem; right: 1.2rem; font-family: var(--ff-display); font-size: 1.8rem; color: rgba(255,255,255,0.04); line-height: 1; }
.why-icon { margin-bottom: 1rem; }
.why-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem; }
.why-card p { font-size: 0.88rem; color: var(--txt-sub); line-height: 1.7; }

/* -- Gallery Carousel -- */
.gallery-section {
    position: relative; overflow: hidden;
    padding: clamp(4rem, 8vw, 6rem) 0;
}
.gallery-header { margin-bottom: 2.5rem; text-align: center; padding: 0 1rem; }
.gallery-title {
    font-size: clamp(1.8rem, 4.5vw, 2.8rem); font-weight: 800;
    line-height: 1.15; color: var(--white); letter-spacing: -0.02em;
}

/* Track wrapper
   overflow:hidden clips the very wide scrolling row on both axes; the generous
   vertical padding gives the scaled centre item's drop-shadow enough room so it
   sits inside the clip box and isn't cut off by a hard edge. */
.gallery-track-wrap {
    overflow: hidden;
    width: 100%;
    /* Enough for the centred card's lift and glow, no more. The old 6.5/8rem
       was sized for circles that grew to 1.42x; the cards top out at 1.24x. */
    padding: 3.2rem 0 4rem;
    position: relative;
}
/* Fade edges */
.gallery-track-wrap::before,
.gallery-track-wrap::after {
    content: '';
    position: absolute; top: 0; bottom: 0; width: 18%;
    z-index: 2; pointer-events: none;
}
.gallery-track-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--bg) 0%, transparent 100%);
}
.gallery-track-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
}

/* Scrolling row — JS drives translateX */
.gallery-track {
    display: flex;
    align-items: center;
    gap: 2rem;
    will-change: transform;
}

/* Item wrapper */
.gallery-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Portrait card — NO CSS transition: JS sets transform/opacity every frame.
   These are photos of people standing next to tractors; a circular crop cut
   heads and feet off every one of them. A 3:4 frame keeps the subject whole
   and matches the source images, which are mostly portrait. */
.gallery-circ {
    position: relative;
    width: clamp(168px, 21vw, 272px);
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    overflow: hidden;
    /* A hairline of light, not a red ring — the emphasis comes from the glow
       JS puts on whichever card is centred. */
    border: 1px solid rgba(255,255,255,0.10);
    background: #0f0f0f;
    will-change: transform, opacity;
    backface-visibility: hidden;
}
.gallery-circ img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
    pointer-events: none;
}
/* Depth: the image sinks into shadow at the bottom edge so the cards read as
   objects with weight rather than flat rectangles. */
.gallery-circ::after {
    content: '';
    position: absolute; inset: auto 0 0 0; height: 42%;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.12) 55%, transparent 100%);
    pointer-events: none;
}

[data-theme="light"] .gallery-circ { border-color: rgba(0,0,0,0.08); }

/* Dots hidden */
.gallery-dots { display: none; }
/* ── Services ── */
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px,100%),1fr)); gap: 1.4rem; }
.svc-card {
    padding: clamp(1.4rem, 3vw, 2rem);
    border: 1px solid var(--border); border-radius: var(--r);
    transition: all var(--dur); position: relative; overflow: hidden;
}
.svc-card::after {
    content: ''; position: absolute; top: 0; left: 0;
    width: 3px; height: 0; background: var(--red); transition: height var(--dur-slow);
}
.svc-card:hover::after { height: 100%; }
.svc-card:hover { border-color: var(--border-hover); background: rgba(255,255,255,0.025); }
.svc-icon {
    width: 52px; height: 52px; border-radius: var(--r-sm);
    background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem; color: var(--red); transition: all var(--dur);
}
.svc-card:hover .svc-icon { background: var(--red); color: var(--white); }
.svc-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; }
.svc-card p { font-size: 0.85rem; color: var(--txt-sub); line-height: 1.7; }

/* ── CTA ── */
.cta { position: relative; padding: clamp(4rem, 8vw, 6rem) 0; overflow: hidden; }
.cta-bg-layer { position: absolute; inset: 0; background: linear-gradient(135deg, var(--red-dark), var(--red), #ff2d3b); }
.cta-pattern {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,0.03) 40px, rgba(255,255,255,0.03) 80px);
}
.cta-inner { position: relative; z-index: 1; text-align: center; }

/* Moving logo marquee behind the CTA text */
.cta-logos {
    position: absolute; inset: 0; z-index: 0;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 1.4rem 0; overflow: hidden; pointer-events: none;
}
.cta-logo-def { position: absolute; width: 0; height: 0; }
.cta-logos-row { display: flex; overflow: hidden; width: 100%; }
.cta-logos-track { display: flex; align-items: center; flex-shrink: 0; }
.cta-logo { width: 54px; height: 42px; margin-right: 2.4rem; color: #fff; opacity: 0.16; flex-shrink: 0; }
.cta-logos-row--left  .cta-logos-track { animation: ctaScrollLeft  45s linear infinite; }
.cta-logos-row--right .cta-logos-track { animation: ctaScrollRight 45s linear infinite; }
@keyframes ctaScrollLeft  { from { transform: translate3d(0,0,0); }    to { transform: translate3d(-50%,0,0); } }
@keyframes ctaScrollRight { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
@media (prefers-reduced-motion: reduce) {
    /* Has to carry the row selector too: a bare ".cta-logos-track" scores
       lower than ".cta-logos-row--left .cta-logos-track" above and lost,
       so the marquee kept scrolling. Matching specificity + coming later
       wins. See the global reduced-motion block at the end of the file. */
    .cta-logos-row .cta-logos-track { animation: none; }
}
.cta-inner h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); font-weight: 800; margin-bottom: 0.8rem; }
.cta-inner p { font-size: clamp(0.92rem, 2vw, 1.05rem); color: rgba(255,255,255,0.85); margin-bottom: 2rem; max-width: 460px; margin-left: auto; margin-right: auto; }
.cta-btns { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

/* ── Contact ── */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 1.8rem; }
.c-item { display: flex; gap: 1rem; align-items: flex-start; }
.c-item-icon {
    width: 46px; height: 46px; min-width: 46px;
    border-radius: var(--r-sm); background: rgba(255,255,255,0.04);
    border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
    color: var(--red);
}
.c-item h4 { font-size: 0.92rem; font-weight: 600; margin-bottom: 0.2rem; }
.c-item p { font-size: 0.88rem; color: var(--txt-sub); line-height: 1.6; }
.c-item a { color: var(--txt-sub); transition: color var(--dur); }
.c-item a:hover { color: var(--red); }

.contact-map { border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); }

.contact-form-box {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r); padding: clamp(1.5rem, 3vw, 2rem);
}
.contact-form-box h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.2rem; }
.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.field label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--txt-sub); margin-bottom: 0.3rem; }
.field input, .field select, .field textarea {
    width: 100%; padding: 12px 14px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: var(--r-sm); color: var(--white); transition: border-color var(--dur);
}
.field input::placeholder, .field textarea::placeholder { color: var(--txt-muted); }
.field select { color: var(--txt-muted); }
.field select option { background: var(--bg-card); color: var(--white); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-glow); }
.field textarea { resize: vertical; min-height: 90px; }

/* ── Footer ── */
.footer { background: var(--bg); border-top: 1px solid var(--border); padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
/* width:auto is required — see .mobile-menu-logo. */
.footer-logo-img { height: 34px; width: auto; margin-bottom: 0.8rem; }
.footer-brand p { font-size: 0.85rem; color: var(--txt-sub); max-width: 280px; line-height: 1.7; }
.footer-col { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.4rem; }
.footer-col a { font-size: 0.82rem; color: var(--txt-sub); transition: color var(--dur); }
.footer-col a:hover { color: var(--red); }
.footer-bottom { border-top: 1px solid var(--border); padding: 1.2rem 0; text-align: center; }
.footer-bottom p { font-size: 0.78rem; color: var(--txt-muted); }

/* ── Back to Top ── */
/* The three floating buttons sit in one row; their offsets are in px so the
   spacing can't drift against their px widths when the root font size grows. */
.btt {
    position: fixed; bottom: 1.5rem; right: 24px;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--red); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    z-index: 100; opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: all var(--dur); box-shadow: 0 4px 16px var(--red-glow);
}
.btt.show { opacity: 1; visibility: visible; transform: translateY(0); }
.btt:hover { transform: translateY(-3px); box-shadow: 0 8px 28px var(--red-glow); }

/* ── Floating Call Button ── */
.floating-call {
    /* 24px (.btt right) + 42px (.btt width) + 12px gap */
    position: fixed; bottom: 1.5rem; right: 78px;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--red); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    z-index: 100; box-shadow: 0 4px 16px var(--red-glow);
    transition: all var(--dur);
    animation: fcPulse 2.4s ease-in-out infinite;
}
.floating-call:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 28px var(--red-glow); }
@keyframes fcPulse {
    0%, 100% { box-shadow: 0 4px 16px var(--red-glow), 0 0 0 0 var(--red-glow); }
    50% { box-shadow: 0 4px 16px var(--red-glow), 0 0 0 8px transparent; }
}

/* ── Floating LINE Button ── */
.floating-line {
    /* 78px (.floating-call right) + 42px (its width) + 12px gap */
    position: fixed; bottom: 1.5rem; right: 132px;
    height: 42px; display: inline-flex; align-items: center; gap: 7px;
    padding: 0 16px; border-radius: 100px;
    background: #06C755; color: #fff;
    font-size: 0.85rem; font-weight: 600; white-space: nowrap;
    z-index: 100; box-shadow: 0 4px 16px rgba(6,199,85,0.4);
    transition: transform var(--dur), box-shadow var(--dur), background var(--dur);
}
.floating-line svg { flex-shrink: 0; }
.floating-line:hover { background: #05b64d; transform: translateY(-3px); box-shadow: 0 8px 28px rgba(6,199,85,0.5); }

@media (max-width: 480px) {
    /* Icon-only capsule on small screens to save space */
    .floating-line { padding: 0 12px; }
    .floating-line span { display: none; }
}

/* ── Reveal Animation ── */
.reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Selection / Scrollbar ── */
::selection { background: var(--red); color: var(--white); }
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* ── Solis Products Enhanced ── */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 1.6rem;
}

.product-hp-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    align-items: baseline;
    gap: 2px;
    padding: 6px 14px;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 100px;
}
.product-hp-val {
    font-family: var(--ff-display);
    font-size: 1.4rem;
    color: var(--red);
    line-height: 1;
}
.product-hp-unit {
    font-family: var(--ff-en);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--txt-sub);
    letter-spacing: 0.05em;
}

.product-actions {
    display: flex;
    gap: 0.5rem;
}
.product-actions .btn {
    flex: 1;
}
.btn-card-outline {
    justify-content: center;
    padding: 11px 20px;
    color: var(--txt-sub);
    border: 1px solid var(--border);
    font-size: 0.88rem;
    background: transparent;
}
.btn-card-outline:hover {
    color: var(--white);
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.05);
}

/* ── Model Detail Page ── */
.detail-hero { position: relative; padding: calc(var(--nav-h) + 2.5rem) 0 3rem; overflow: hidden; }
.detail-hero-glow {
    position: absolute; top: -10%; right: -10%; width: 55%; aspect-ratio: 1;
    background: radial-gradient(circle, var(--red-glow-lg) 0%, transparent 70%);
    pointer-events: none;
}
.detail-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.85rem; color: var(--txt-sub); margin-bottom: 1.4rem;
    transition: color var(--dur);
}
.detail-back:hover { color: var(--white); }
.detail-hero-inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.detail-hero-img {
    position: relative; border-radius: var(--r-lg);
    background: linear-gradient(160deg, var(--bg-card), #1a1a1a);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem); min-height: 280px;
}
.detail-hero-img img { max-width: 100%; max-height: 360px; object-fit: contain; }
/* A shot that brings its own backdrop makes the padded frame around it read as
   dead space, so the frame just hugs the photo instead — height follows the
   image's own ratio, which keeps working if the artwork is swapped again. */
.detail-hero-img--full { padding: 0; min-height: 0; overflow: hidden; }
.detail-hero-img--full img {
    width: 100%; height: auto; max-height: none; display: block;
}
.detail-hero-info .product-series { display: block; margin-bottom: 0.4rem; }
.detail-hero-title {
    font-family: var(--ff-en); font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700; margin-bottom: 0.9rem; line-height: 1.1;
}
.detail-hero-info .product-hp-badge { position: static; display: inline-flex; margin-bottom: 1rem; }
.detail-hero-desc { font-size: 0.98rem; color: var(--txt-sub); line-height: 1.85; margin-bottom: 1.6rem; }

/* ── Specification table ──
   Laid out like the printed Yanmar leaflet: a group heading spanning its rows
   on the left, the spec name next to it, the value on the right. Below 720px
   three columns of Thai text stop being readable, so the table keeps its shape
   and the wrapper scrolls sideways instead of squeezing the words. */
.spec-table-wrap {
    border: 1px solid var(--border); border-radius: var(--r);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.spec-table {
    width: 100%; min-width: 560px;
    border-collapse: collapse;
    background: var(--bg-card);
    font-size: 0.9rem;
}
.spec-table caption {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;   /* for screen readers only */
}
.spec-table th, .spec-table td {
    border-bottom: 1px solid var(--border);
    padding: 0.85rem 1.1rem; text-align: left; vertical-align: middle;
}
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-group {
    width: 168px; border-right: 1px solid var(--border);
    background: rgba(230,0,18,0.06);
    /* Brand red only reaches 3.8:1 on the dark card, so the dark theme uses
       the lighter red (4.7:1). On white the brand red is fine at 4.8:1. */
    font-size: 0.82rem; font-weight: 700; color: var(--red-light);
    vertical-align: top; line-height: 1.5;
}
.spec-name {
    width: 210px; border-right: 1px solid var(--border);
    /* --txt-muted only clears 2.7:1 on the card background. The spec name is
       real content, not a caption, so it uses the readable token. */
    font-size: 0.84rem; font-weight: 400; color: var(--txt-sub);
}
.spec-value { font-weight: 600; color: var(--white); }

[data-theme="light"] .spec-table { background: #fff; }
/* Brand red on its own pink tint only reaches 4.4:1 — a slightly deeper red
   clears AA while still reading as the same brand colour. Shared with the
   comparison table's group rows further down. */
[data-theme="light"] .spec-group { background: rgba(230,0,18,0.05); color: #C4000E; }

@media (max-width: 600px) {
    .spec-table { font-size: 0.84rem; }
    .spec-table th, .spec-table td { padding: 0.7rem 0.85rem; }
    .spec-group { width: 130px; }
    .spec-name { width: 170px; }
}

.detail-related .product-series { display: block; }

/* ── Brochure download ── */
.detail-brochure { margin-top: 2rem; text-align: center; }
.brochure-btn {
    display: inline-flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    justify-content: center;
    padding: 0.95rem 1.8rem; border-radius: var(--r-sm);
    border: 1px solid var(--red); color: var(--red);
    font-size: 0.95rem; font-weight: 600;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.brochure-btn svg { flex-shrink: 0; }
.brochure-btn:hover {
    background: var(--red); color: var(--white);
    transform: translateY(-2px); box-shadow: 0 10px 26px var(--red-glow);
}
.brochure-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
/* Size stays legible against both the outlined and the filled hover state. */
.brochure-size {
    font-family: var(--ff-en); font-size: 0.78rem; font-weight: 500;
    padding: 2px 8px; border-radius: 100px;
    background: var(--red-glow); color: inherit;
}
.detail-brochure-note {
    font-size: 0.78rem; color: var(--txt-muted); margin-top: 0.7rem;
}
.brochure-btn:hover .brochure-size { background: rgba(255,255,255,0.22); }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .hero-container { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .hero-content { max-width: 600px; }
    .hero-btns { justify-content: center; }
    .hero-visual-frame { max-width: 360px; }
    .contact-layout { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .detail-hero-inner { grid-template-columns: 1fr; text-align: center; }
    .detail-hero-info .hero-btns { justify-content: center; }
}

@media (max-width: 768px) {
    .nav-links, .nav-cta { display: none; }
    .nav-toggle { display: flex; }
    .theme-toggle { margin-left: auto; }
    .hide-mobile { display: none; }
    .hero-scroll-hint { display: none; }
    .hero-visual-frame { max-width: 280px; }
    .stat-sep { display: none; }
    /* Four stats in a balanced 2x2 grid — flex-wrap left the last one
       stranded on a line of its own, on top of the background video. */
    .hero-stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1rem; }
    .product-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    :root { --nav-h: 58px; }
    .hero-btns, .cta-btns { flex-direction: column; align-items: center; }
    .hero-btns .btn, .cta-btns .btn { width: 100%; max-width: 280px; justify-content: center; }
}

/* ── Theme Toggle Button ── */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    color: var(--txt-sub); border: 1px solid var(--border);
    background: transparent; transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.theme-toggle:hover { color: var(--txt); border-color: var(--border-hover); background: rgba(255,255,255,0.05); }
.theme-toggle svg { display: block; }
.theme-toggle .ic-moon { display: none; }
.theme-toggle .ic-sun { display: block; }
:root[data-theme="light"] .theme-toggle .ic-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ic-moon { display: block; }
:root[data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,0.04); }

/* =============================================
   LIGHT THEME
   ============================================= */
:root[data-theme="light"] {
    --bg: #FFFFFF;
    --bg-alt: #F3F4F6;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F7F8FA;
    --border: rgba(0,0,0,0.1);
    --border-hover: rgba(0,0,0,0.2);

    --txt: rgba(17,17,17,0.92);
    --txt-sub: rgba(17,17,17,0.58);
    --txt-muted: rgba(17,17,17,0.4);

    --red-glow-lg: rgba(230,0,18,0.07);
}

/* Foreground that was pure white on dark → dark on light */
[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active,
[data-theme="light"] .mobile-menu-links a,
[data-theme="light"] .stat-number,
[data-theme="light"] .pspec-val,
[data-theme="light"] .gallery-title,
[data-theme="light"] .spec-value,
[data-theme="light"] .filter-btn:hover,
[data-theme="light"] .detail-back:hover,
[data-theme="light"] .btn-ghost,
[data-theme="light"] .btn-card { color: var(--txt); }

[data-theme="light"] .nav-toggle span { background: var(--txt); }

/* White button sits on the red CTA banner — keep its label dark & readable */
[data-theme="light"] .btn-white { color: #0A0A0A; }

/* CTA heading always sits on the red banner — keep it white for contrast */
[data-theme="light"] .cta-inner h2 { color: #fff; }

/* Subtle white-tint fills → subtle dark-tint fills */
[data-theme="light"] .btn-ghost:hover,
[data-theme="light"] .btn-card-outline:hover,
[data-theme="light"] .svc-card:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .btn-card { background: rgba(0,0,0,0.05); }
[data-theme="light"] .why-card { background: rgba(0,0,0,0.02); }
[data-theme="light"] .why-card:hover { background: rgba(0,0,0,0.035); border-color: rgba(0,0,0,0.14); }
[data-theme="light"] .why-num { color: rgba(0,0,0,0.05); }
[data-theme="light"] .svc-icon,
[data-theme="light"] .c-item-icon { background: rgba(0,0,0,0.03); }
[data-theme="light"] .field input,
[data-theme="light"] .field select,
[data-theme="light"] .field textarea { background: rgba(0,0,0,0.03); color: var(--txt); }

/* Cards get a soft shadow so they separate from the white background */
[data-theme="light"] .product-card { box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* Hardcoded dark backgrounds → light equivalents */
[data-theme="light"] .nav.scrolled { background: rgba(255,255,255,0.9); box-shadow: 0 1px 0 var(--border), 0 4px 24px rgba(0,0,0,0.06); }
[data-theme="light"] .mobile-menu { background: rgba(255,255,255,0.98); }
[data-theme="light"] .product-img { background: linear-gradient(160deg, #ffffff, #eef0f3); }
[data-theme="light"] .detail-hero-img { background: linear-gradient(160deg, #ffffff, #eef0f3); }
[data-theme="light"] .product-hp-badge { background: rgba(255,255,255,0.85); }
[data-theme="light"] .gallery-circ { background: #ededed; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cccccc; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #aaaaaa; }

/* Loader / splash screen */
[data-theme="light"] .loader {
    --ld-bg: #EEF0F3; --ld-bg2: #FFFFFF;
    --ld-line: rgba(0,0,0,0.05);
    --ld-ink: rgba(17,17,17,0.92); --ld-sub: rgba(17,17,17,0.45);
    --ld-track: rgba(0,0,0,0.08);
}

/* ── TikTok latest clip ── */
.tiktok-section { overflow: hidden; }

.tiktok-embed-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
}

.tiktok-embed-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 400px));
    gap: 1.75rem;
    justify-content: center;
    width: 100%;
}

.tiktok-embed-grid:has(.tiktok-embed-status) {
    grid-template-columns: minmax(0, 400px);
}

.tiktok-embed-frame {
    width: 100%;
    max-width: 400px;
    min-height: 560px;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(0,0,0,0.4);
    display: flex;
}

@media (max-width: 860px) {
    .tiktok-embed-grid { grid-template-columns: minmax(0, 400px); }
}

.tiktok-embed-iframe {
    width: 100%;
    height: 760px;
    border: 0;
    display: block;
}

.tiktok-embed-status {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    /* Must match .tiktok-embed-iframe: the placeholder is swapped for the
       iframe once the clip loads, and a shorter one made everything below
       jump 200px down the page. */
    min-height: 760px;
    padding: 2rem;
    color: var(--txt-sub);
    font-weight: 300;
}

.tiktok-embed-status a { color: var(--red-light); text-decoration: underline; }

.tiktok-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--ff-en);
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    font-weight: 600;
    padding: 0.8rem 1.9rem;
    color: var(--white);
    background: linear-gradient(135deg, #fe2c55, #25f4ee);
    border-radius: 50px;
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.tiktok-follow-btn svg { width: 18px; height: 18px; }

.tiktok-follow-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(254,44,85,0.35);
}

@media (max-width: 480px) {
    .tiktok-embed-iframe,
    .tiktok-embed-status { height: 720px; min-height: 720px; }
}

[data-theme="light"] .tiktok-embed-frame { background: #f4f5f7; box-shadow: 0 18px 44px rgba(0,0,0,0.12); }
[data-theme="light"] .tiktok-embed-status { color: rgba(0,0,0,0.55); }

/* ── Quote request form ── */
.quote-block {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    display: grid; grid-template-columns: 1fr 1.4fr;
    gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r); padding: clamp(1.4rem, 4vw, 2.6rem);
}
.quote-intro h3 { font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 800; margin-bottom: 0.7rem; }
.quote-intro p { font-size: 0.92rem; color: var(--txt-sub); line-height: 1.9; }
.quote-intro a { color: var(--red-light); font-weight: 600; }

.q-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.q-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.q-field label { font-size: 0.83rem; color: var(--txt-sub); }
.q-req { color: var(--red); }
.q-field input, .q-field select, .q-field textarea {
    width: 100%; padding: 0.7rem 0.9rem;
    border-radius: var(--r-sm); border: 1px solid var(--border);
    background: var(--bg); color: var(--txt);
    font-family: inherit; font-size: 0.92rem;
    transition: border-color var(--dur);
}
.q-field textarea { resize: vertical; min-height: 84px; }
.q-field input:focus, .q-field select:focus, .q-field textarea:focus { border-color: var(--red); }
.q-field.has-error input, .q-field.has-error textarea { border-color: var(--red); }
.q-error { font-size: 0.78rem; color: var(--red-light); min-height: 1em; }

.q-check { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; cursor: pointer; }
.q-check input { width: 16px; height: 16px; accent-color: var(--red); }

/* Off-screen rather than display:none — a bot reading the DOM still sees a
   normal field, while nobody using the page ever meets it. */
.q-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.q-submit { width: 100%; justify-content: center; margin-top: 1.2rem; }
.q-submit:disabled { opacity: 0.65; cursor: progress; }
.q-status { font-size: 0.86rem; line-height: 1.7; margin-top: 0.8rem; }
.q-status.is-ok { color: #22C55E; }
.q-status.is-error { color: var(--red-light); }
.q-consent { font-size: 0.75rem; color: var(--txt-muted); line-height: 1.7; margin-top: 0.9rem; }

[data-theme="light"] .quote-block { background: #fff; }
[data-theme="light"] .q-field input,
[data-theme="light"] .q-field select,
[data-theme="light"] .q-field textarea { background: #F7F8FA; color: var(--txt); }
[data-theme="light"] .quote-intro a,
[data-theme="light"] .q-error,
[data-theme="light"] .q-status.is-error { color: #C4000E; }
[data-theme="light"] .q-status.is-ok { color: #15803D; }

@media (max-width: 860px) {
    .quote-block { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .q-row { grid-template-columns: 1fr; gap: 0; }
}

/* Sits in the filter bar but is a link, not a filter — the outline keeps it
   visually apart from the three filter buttons next to it. */
.filter-compare {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 1.2rem; border-radius: 100px;
    border: 1px dashed var(--red); color: var(--red);
    font-size: 0.85rem; font-weight: 600;
    transition: background var(--dur), color var(--dur);
}
.filter-compare:hover { background: var(--red); color: var(--white); border-style: solid; }
.filter-compare svg { flex-shrink: 0; }

/* ── Compare page ── */
.cmp-picker {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r); padding: clamp(1.2rem, 3vw, 1.8rem);
}
.cmp-picker-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.cmp-picker-head h2 { font-size: 1.05rem; font-weight: 700; }
.cmp-count { font-family: var(--ff-en); font-size: 0.85rem; color: var(--txt-sub); }

.cmp-pick-grid {
    display: grid; gap: 0.6rem;
    grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
}
.cmp-pick {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 0.9rem; border-radius: var(--r-sm);
    border: 1px solid var(--border); cursor: pointer;
    transition: border-color var(--dur), background var(--dur);
}
.cmp-pick:hover { border-color: var(--red); }
.cmp-pick.is-on { border-color: var(--red); background: var(--red-glow-lg); }
/* Already at three picks: show it rather than swallowing the click. */
.cmp-pick.is-disabled { opacity: 0.4; cursor: not-allowed; }
.cmp-pick.is-disabled:hover { border-color: var(--border); }
.cmp-pick input { width: 16px; height: 16px; accent-color: var(--red); flex-shrink: 0; }
.cmp-pick-name { font-weight: 600; font-size: 0.9rem; }
.cmp-pick-hp {
    margin-left: auto; font-family: var(--ff-en);
    font-size: 0.78rem; color: var(--txt-sub);
}

.cmp-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-top: 1.1rem;
    padding-top: 1.1rem; border-top: 1px solid var(--border);
}
.cmp-diff-toggle {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-size: 0.88rem; cursor: pointer;
}
.cmp-diff-toggle input { width: 16px; height: 16px; accent-color: var(--red); }
.cmp-clear {
    font-size: 0.85rem; color: var(--txt-sub); cursor: pointer;
    background: none; border: 0; padding: 0.3rem 0; text-decoration: underline;
}
.cmp-clear:hover { color: var(--red); }

.cmp-empty {
    text-align: center; color: var(--txt-sub);
    padding: 3rem 1rem; font-size: 0.95rem;
}

.cmp-table-wrap {
    margin-top: 2rem;
    border: 1px solid var(--border); border-radius: var(--r);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.cmp-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--bg-card); font-size: 0.9rem;
}
.cmp-table caption {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.cmp-table th, .cmp-table td {
    border-bottom: 1px solid var(--border);
    padding: 0.8rem 1rem; text-align: left; vertical-align: middle;
}
/* The spec name stays put while the model columns scroll under it. */
.cmp-label, .cmp-corner {
    position: sticky; left: 0; z-index: 2;
    background: var(--bg-card); border-right: 1px solid var(--border);
    min-width: 165px; width: 165px;
    font-size: 0.84rem; font-weight: 400; color: var(--txt-sub);
}
.cmp-cell { min-width: 165px; font-weight: 600; color: var(--white); }
.cmp-na { color: var(--txt-sub); font-weight: 400; }

.cmp-head { min-width: 165px; text-align: center; padding: 1rem 0.8rem; vertical-align: bottom; }
.cmp-head-link { display: block; }
.cmp-head-img {
    display: block; margin: 0 auto 0.6rem; max-width: 150px;
    border-radius: var(--r-sm); overflow: hidden; background: var(--bg);
}
.cmp-head-img img { width: 100%; height: auto; display: block; }
.cmp-head-name {
    display: block; font-family: var(--ff-en);
    font-size: 1.05rem; font-weight: 700; color: var(--white);
}
.cmp-head-hp { display: block; font-family: var(--ff-en); font-size: 0.8rem; color: var(--red); }
.cmp-head-link:hover .cmp-head-name { color: var(--red); }

.cmp-group-row th {
    background: rgba(230,0,18,0.08); position: sticky; left: 0;
    font-size: 0.82rem; font-weight: 700; color: var(--red-light);
    letter-spacing: 0.02em;
}
/* A row where the models actually differ is the reason to be on this page. */
.cmp-diff .cmp-cell { box-shadow: inset 3px 0 0 var(--red); }

.cmp-foot {
    display: flex; gap: 0.7rem; flex-wrap: wrap;
    justify-content: center; margin-top: 1.5rem;
}
.cmp-note {
    margin-top: 1rem; text-align: center;
    font-size: 0.78rem; color: var(--txt-muted); line-height: 1.7;
}
.cmp-note a { color: var(--red-light); }

[data-theme="light"] .cmp-picker,
[data-theme="light"] .cmp-table { background: #fff; }
[data-theme="light"] .cmp-label,
[data-theme="light"] .cmp-corner { background: #fff; }
[data-theme="light"] .cmp-cell,
[data-theme="light"] .cmp-head-name { color: var(--txt); }
[data-theme="light"] .cmp-group-row th { color: #C4000E; }   /* see .spec-group */
[data-theme="light"] .cmp-note a { color: var(--red); }

@media (max-width: 600px) {
    .cmp-table { font-size: 0.84rem; }
    .cmp-table th, .cmp-table td { padding: 0.65rem 0.75rem; }
    .cmp-label, .cmp-corner { min-width: 128px; width: 128px; }
    .cmp-cell, .cmp-head { min-width: 140px; }
    .cmp-foot .btn { width: 100%; justify-content: center; }
}

/* ── Reduced motion ────────────────────────────────────────────────
   Nothing should move on its own for visitors who asked their OS to
   limit animation (motion sensitivity / vestibular disorders).

   Animations are collapsed rather than removed so each one lands on
   its final keyframe instead of freezing mid-way, and transitions
   are kept alive at ~0ms so state changes (mobile menu, theme swap,
   .reveal appearing) still happen — just instantly, with no travel.

   Last block in the file so it wins on order; the gallery carousel
   and the hero background video check the same preference in
   js/main.js, and .cta-logos-track is switched off further up.
   ────────────────────────────────────────────────────────────────── */
/* ── Promotion popup ──────────────────────────────────────────
   js/main.js builds this from data/promo.json. None of it is in the
   HTML, so a site with no campaign running ships no popup markup at
   all. Colours come from the theme tokens, so it follows the visitor's
   light / dark choice without a second set of rules. */
.promo-backdrop {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(1rem, 4vw, 2rem);
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
}
.promo-backdrop.in { opacity: 1; }

.promo-card {
    position: relative;
    width: min(420px, 100%);
    max-height: min(88vh, 780px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7),
                0 0 70px -24px var(--red-glow);
    transform: translateY(16px) scale(0.97);
    transition: transform var(--dur-slow) var(--ease-out);
}
.promo-backdrop.in .promo-card { transform: none; }
.promo-card:focus { outline: none; }

.promo-close {
    position: absolute; top: 0.65rem; right: 0.65rem; z-index: 2;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(0, 0, 0, 0.55); color: #fff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background var(--dur) var(--ease);
}
.promo-close:hover, .promo-close:focus-visible { background: var(--red); }
.promo-close svg { width: 17px; height: 17px; }

/* Posters are usually portrait, and at full height one would push the
   button off the bottom of the card. Capping the height keeps the call to
   action on screen; contain rather than cover, because a promotion poster
   has wording on it that must not be cropped away. */
.promo-img {
    width: 100%; height: auto;
    max-height: min(42vh, 340px);
    object-fit: contain;
    background: rgba(0, 0, 0, 0.22);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.promo-body { padding: 1.5rem 1.5rem 1.5rem; text-align: center; }
.promo-tag {
    display: inline-block; margin-bottom: 0.7rem;
    padding: 0.28rem 0.8rem; border-radius: 999px;
    background: var(--red-glow-lg); color: var(--red);
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em;
}
.promo-title {
    font-size: clamp(1.15rem, 4vw, 1.42rem);
    font-weight: 700; line-height: 1.5; color: var(--txt);
}
.promo-text {
    margin-top: 0.6rem; color: var(--txt-sub);
    font-size: 0.93rem; white-space: pre-line;
}
.promo-cta {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 1.25rem; padding: 0.8rem 1.9rem;
    background: var(--red); color: var(--white);
    border-radius: 999px; font-weight: 700; font-size: 0.95rem;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.promo-cta:hover { background: var(--red-dark); transform: translateY(-2px); }
.promo-later {
    display: block; width: 100%; margin-top: 0.85rem;
    color: var(--txt-muted); font-size: 0.83rem;
    transition: color var(--dur) var(--ease);
}
.promo-later:hover { color: var(--txt-sub); }

/* The page behind must not scroll away under the dialog. */
body.promo-open { overflow: hidden; }

@media (max-width: 480px) {
    .promo-body { padding: 1.2rem 1.1rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    /* These exist only to drift up the screen — with no animation left
       to run there is nothing worth rendering. */
    .hero-particles,
    .loader-furrows { display: none; }
}