:root {
    --bg: #07090f;
    --bg-soft: #0b0e16;
    --panel: rgba(15, 19, 30, 0.76);
    --panel-solid: #101521;
    --text: #f4f7ff;
    --muted: #9098aa;
    --line: rgba(255, 255, 255, 0.095);
    --line-strong: rgba(255, 255, 255, 0.18);
    --accent: #e58236;
    --accent-2: #ffb25b;
    --accent-soft: rgba(229, 130, 54, 0.16);
    --success: #ffd08a;
    --warning: #f5c96a;
    --future: #ffbc75;
    --max-width: 1240px;
    --radius: 22px;
    --ease: cubic-bezier(.2, .75, .25, 1);
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--text); background: var(--bg); font-family: "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body.dialog-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
img { display: block; width: 100%; }
::selection { color: white; background: rgba(239, 127, 45, .68); }

.page-noise { display: none; }
.cursor-glow { position: fixed; left: 0; top: 0; z-index: -1; width: 380px; height: 380px; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(229, 130, 54, .08), transparent 70%); opacity: 0; transition: opacity .3s ease; }

.section-shell { width: min(calc(100% - 48px), var(--max-width)); margin-inline: auto; }
.section-space { padding-top: 130px; padding-bottom: 130px; }

.site-header { position: fixed; top: 0; left: 50%; z-index: 80; display: flex; align-items: center; justify-content: space-between; width: min(calc(100% - 48px), var(--max-width)); height: 82px; transform: translateX(-50%); transition: height .25s ease, background .25s ease, border .25s ease, padding .25s ease; }
.site-header.scrolled { top: 12px; height: 64px; padding: 0 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(7, 9, 15, .78); backdrop-filter: blur(20px); box-shadow: 0 16px 50px rgba(0, 0, 0, .3); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 32px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 9px; font-size: 13px; font-weight: 700; background: linear-gradient(135deg, rgba(239, 127, 45, .28), rgba(255, 178, 82, .05)); box-shadow: inset 0 0 20px rgba(239, 127, 45, .12); }
.brand-name { font-size: 14px; font-weight: 700; letter-spacing: .19em; }
.main-nav { display: flex; align-items: center; gap: 31px; }
.main-nav a { position: relative; color: #bdc3d0; font-size: 13px; font-weight: 500; transition: color .2s ease; }
.main-nav a:not(.nav-contact)::after { position: absolute; right: 0; bottom: -7px; left: 0; height: 1px; content: ""; transform: scaleX(0); transform-origin: right; background: white; transition: transform .25s var(--ease); }
.main-nav a:hover { color: white; }
.main-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-contact { padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 10px; color: white !important; background: rgba(255, 255, 255, .035); }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 1px; margin: 6px auto; background: white; transition: transform .2s ease; }

.hero { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); align-items: center; min-height: 100vh; gap: 72px; padding-top: 130px; padding-bottom: 82px; }
.hero-grid { position: absolute; top: 0; right: -12vw; bottom: 0; width: 68vw; z-index: -3; opacity: .12; mask-image: linear-gradient(to left, #000 55%, transparent 100%); background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 72px 72px; transform: perspective(900px) rotateY(-8deg) rotateX(2deg) scale(1.05); }
.hero-orb { position: absolute; z-index: -2; border-radius: 50%; filter: blur(30px); }
.hero-orb-one { display: none; }
.hero-orb-two { display: none; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: #aeb5c5; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow span { width: 26px; height: 1px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.hero h1, .section-heading h2, .about h2, .contact h2, .version-dialog h2 { margin: 0; font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-weight: 600; letter-spacing: -.055em; }
.hero h1 { max-width: 690px; font-size: clamp(55px, 6vw, 92px); line-height: .94; }
.hero h1 em { color: transparent; font-style: normal; background: linear-gradient(90deg, #ff9a47, #ffd18c 75%); -webkit-background-clip: text; background-clip: text; }
.hero-copy { max-width: 650px; margin: 31px 0 0; color: #a6adbc; font-size: 17px; line-height: 1.75; }
.hero-actions, .contact-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 36px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; gap: 16px; padding: 0 22px; border: 1px solid transparent; border-radius: 12px; font-size: 13px; font-weight: 600; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: linear-gradient(135deg, #dd6822, #f18b37 58%, #f5a94d); box-shadow: 0 15px 34px rgba(164, 72, 24, .25), inset 0 1px rgba(255, 255, 255, .20); }
.button-primary:hover { box-shadow: 0 18px 44px rgba(164, 72, 24, .36), inset 0 1px rgba(255, 255, 255, .20); }
.button-ghost { border-color: var(--line-strong); color: #d6dae4; background: rgba(255, 255, 255, .025); }
.button-ghost:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .055); }
.hero-proof { display: flex; gap: 45px; margin-top: 64px; }
.hero-proof div { display: grid; gap: 5px; }
.hero-proof strong { font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-size: 25px; }
.hero-proof span { color: #778092; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.hero-visual { position: relative; }
.visual-frame { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); border-radius: 24px; transform: perspective(1100px) rotateY(-3deg) rotateX(1deg); background: #0d1120; box-shadow: 0 34px 90px rgba(0, 0, 0, .42); }
.visual-frame::before { position: absolute; inset: 0; z-index: 3; content: ""; border: 1px solid rgba(255, 255, 255, .07); border-radius: inherit; pointer-events: none; }
.visual-frame img { aspect-ratio: 1.2 / 1; object-fit: cover; }
.visual-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 6, 12, .56), transparent 45%), linear-gradient(120deg, rgba(229, 130, 54, .09), transparent 42%); }
.visual-label { position: absolute; bottom: 20px; left: 22px; display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 9px; color: #dfe3ed; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; background: rgba(5, 7, 12, .58); backdrop-filter: blur(10px); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); }
.visual-badge { position: absolute; top: 22px; right: 22px; display: grid; place-content: center; width: 68px; height: 68px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; color: #c9cfdb; font-size: 9px; line-height: 1.1; text-align: center; letter-spacing: .18em; background: rgba(7, 9, 15, .5); backdrop-filter: blur(10px); }
.visual-badge strong { font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; color: white; font-size: 20px; letter-spacing: -.04em; }
.replace-note { margin: 14px 0 0; color: #636c7c; font-size: 10px; text-align: center; text-transform: uppercase; letter-spacing: .1em; }
.scroll-cue { position: absolute; bottom: 27px; left: 0; display: flex; align-items: center; gap: 15px; color: #686f7f; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.scroll-cue i { position: relative; width: 42px; height: 1px; overflow: hidden; background: rgba(255, 255, 255, .12); }
.scroll-cue i::after { position: absolute; inset: 0; content: ""; transform: translateX(-100%); background: white; animation: scrollLine 2.2s ease infinite; }
@keyframes scrollLine { 50%, 100% { transform: translateX(100%); } }

.intro-strip { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #090c13; }
.marquee-track { display: flex; align-items: center; width: max-content; gap: 32px; padding: 19px 0; animation: marquee 28s linear infinite; }
.marquee-track span { color: #8f97a7; font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.marquee-track i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }

.section-heading { display: grid; grid-template-columns: 1fr minmax(300px, .65fr); align-items: end; gap: 70px; margin-bottom: 62px; }
.section-heading h2, .about h2, .contact h2 { font-size: clamp(40px, 5vw, 68px); line-height: .98; }
.section-heading > p { max-width: 490px; margin: 0 0 4px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.version-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter-button { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; color: #8e96a6; font-size: 11px; background: rgba(255, 255, 255, .02); cursor: pointer; transition: all .2s ease; }
.filter-button:hover, .filter-button.active { border-color: rgba(239, 127, 45, .50); color: white; background: rgba(239, 127, 45, .12); }
.version-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.version-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(13, 16, 25, .68); transition: transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease, opacity .25s ease; }
.version-card:hover { z-index: 2; border-color: rgba(239, 127, 45, .34); transform: translateY(-8px); box-shadow: 0 28px 70px rgba(0, 0, 0, .28); }
.version-card.hidden { display: none; }
.version-card-featured { border-color: rgba(229, 130, 54, .34); background: linear-gradient(160deg, rgba(28, 33, 49, .82), rgba(13, 16, 25, .86) 55%); }
.version-media { position: relative; overflow: hidden; margin: 8px; border-radius: 16px; background: #0d1019; }
.version-media img { aspect-ratio: 1.5 / 1; object-fit: cover; transition: transform .6s var(--ease), filter .4s ease; }
.version-card:hover .version-media img { transform: scale(1.045); filter: brightness(1.08); }
.status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border: 1px solid currentColor; border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.version-media .status { position: absolute; top: 13px; left: 13px; backdrop-filter: blur(8px); }
.status-legacy { color: #a9b0bd; background: rgba(12, 15, 22, .62); }
.status-current { color: var(--success); background: rgba(15, 37, 29, .66); }
.status-future { color: #b9c6dc; background: rgba(24, 31, 44, .76); }
.featured-tag { position: absolute; right: 13px; bottom: 11px; color: rgba(255, 255, 255, .82); font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .2em; }
.version-body { padding: 18px 22px 23px; }
.version-number { margin-bottom: 12px; color: var(--accent-2); font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.version-body h3 { margin: 0 0 10px; font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-size: 22px; letter-spacing: -.035em; }
.version-body p { min-height: 66px; margin: 0 0 20px; color: #8e96a7; font-size: 13px; line-height: 1.65; }
.text-button { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; color: #dce0e9; font-size: 11px; font-weight: 600; background: transparent; cursor: pointer; }
.text-button span { transition: transform .2s ease; }
.text-button:hover span { transform: translate(3px, -3px); }

.systems { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #090c13, #07090f); }
.systems-list { border-top: 1px solid var(--line); }
.system-row { display: grid; grid-template-columns: 70px 1fr 80px; align-items: center; min-height: 150px; border-bottom: 1px solid var(--line); transition: background .25s ease, padding .25s ease; }
.system-row:hover { padding-inline: 18px; background: linear-gradient(90deg, rgba(229, 130, 54, .08), transparent 70%); }
.system-index { align-self: start; padding-top: 37px; color: #5f6879; font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-size: 11px; }
.system-row h3 { margin: 0 0 10px; font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.04em; }
.system-row p { max-width: 630px; margin: 0; color: #848d9e; font-size: 13px; line-height: 1.7; }
.system-icon { justify-self: end; color: var(--accent); font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-size: 27px; }

.showcase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.showcase-item { position: relative; overflow: hidden; min-height: 380px; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #0c1019; }
.showcase-wide { grid-column: 1 / -1; min-height: 540px; }
.showcase-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s ease; }
.showcase-item:hover img { transform: scale(1.035); filter: brightness(1.08); }
.showcase-item::after { position: absolute; inset: 0; content: ""; background: linear-gradient(to top, rgba(4, 6, 11, .88), transparent 47%); }
.showcase-item figcaption { position: absolute; right: 28px; bottom: 25px; left: 28px; z-index: 2; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.showcase-item figcaption span { font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -.035em; }
.showcase-item figcaption small { color: #a3aab8; font-size: 10px; letter-spacing: .08em; text-align: right; text-transform: uppercase; }

.about { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #090c13; }
.about::before { display: none; }
.about-layout { display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 100px; }
.about-copy h2 { max-width: 700px; }
.about-copy > p:not(.eyebrow) { max-width: 670px; margin: 28px 0 0; color: #969eae; font-size: 15px; line-height: 1.85; }
.about-card { position: relative; overflow: hidden; min-height: 410px; padding: 36px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 28px; background: linear-gradient(150deg, rgba(23, 28, 40, .74), rgba(10, 14, 23, .92) 58%); box-shadow: 0 30px 80px rgba(0, 0, 0, .28); }
.about-symbol { color: rgba(255, 255, 255, .045); font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-size: 150px; font-weight: 700; line-height: .8; letter-spacing: -.09em; }
.about-card blockquote { position: absolute; right: 36px; bottom: 76px; left: 36px; margin: 0; color: #b7bdca; font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-size: clamp(25px, 3vw, 38px); line-height: 1.22; letter-spacing: -.045em; }
.about-card blockquote strong { color: white; font-weight: 600; }
.about-meta { position: absolute; right: 36px; bottom: 27px; left: 36px; display: flex; justify-content: space-between; color: #646d7e; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }

.contact-card { position: relative; overflow: hidden; padding: 92px 70px; border: 1px solid rgba(229, 130, 54, .22); border-radius: 30px; text-align: center; background: linear-gradient(145deg, rgba(18, 22, 33, .92), rgba(10, 13, 22, .98) 65%); box-shadow: 0 35px 100px rgba(0, 0, 0, .32); }
.contact-glow { position: absolute; top: -220px; left: 50%; width: 640px; height: 420px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(229, 130, 54, .14), transparent 67%); }
.contact-card > *:not(.contact-glow) { position: relative; z-index: 1; }
.contact-card .eyebrow { justify-content: center; }
.contact-card h2 { font-size: clamp(48px, 6vw, 82px); }
.contact-card > p:not(.eyebrow) { max-width: 590px; margin: 25px auto 0; color: #a0a8b8; font-size: 15px; line-height: 1.75; }
.contact-actions { justify-content: center; }
.contact-hint { display: block; margin-top: 24px; color: #626b7c; font-size: 10px; }
.contact-hint code { color: #8d95a7; }
.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; min-height: 130px; border-top: 1px solid var(--line); color: #666f80; font-size: 10px; }
.site-footer p { margin: 0; text-align: center; }
.site-footer > span { justify-self: end; }
.site-footer .brand-name { color: #9ea5b3; }

.version-dialog { width: min(980px, calc(100% - 30px)); max-height: min(86vh, 820px); padding: 0; overflow: auto; border: 1px solid rgba(255, 255, 255, .15); border-radius: 26px; color: var(--text); background: #0c1019; box-shadow: 0 40px 140px rgba(0, 0, 0, .68); }
.version-dialog::backdrop { background: rgba(2, 4, 8, .78); backdrop-filter: blur(14px); }
.version-dialog[open] { display: grid; grid-template-columns: .9fr 1.1fr; animation: dialogIn .3s var(--ease); }
@keyframes dialogIn { from { opacity: 0; transform: translateY(15px) scale(.985); } }
.dialog-close { position: fixed; z-index: 4; top: max(calc(7vh + 16px), 22px); right: max(calc((100vw - min(980px, calc(100vw - 30px))) / 2 + 16px), 22px); display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 50%; color: white; font-size: 24px; line-height: 1; background: rgba(7, 9, 15, .64); backdrop-filter: blur(12px); cursor: pointer; }
.dialog-media { min-height: 560px; background: #0a0d14; }
.dialog-media img { width: 100%; height: 100%; object-fit: cover; }
.dialog-content { padding: 56px 48px 46px; }
.dialog-title-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.version-dialog h2 { font-size: 50px; }
.dialog-description { margin: 22px 0 30px; color: #9da5b5; font-size: 14px; line-height: 1.8; }
.dialog-content h3 { margin: 0 0 15px; font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-size: 14px; letter-spacing: .02em; }
.dialog-content ul { display: grid; gap: 12px; padding: 0; margin: 0 0 36px; list-style: none; }
.dialog-content li { position: relative; padding-left: 20px; color: #b5bbc7; font-size: 13px; }
.dialog-content li::before { position: absolute; top: 6px; left: 0; width: 6px; height: 6px; border-radius: 50%; content: ""; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 8px rgba(239, 127, 45, .55); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--delay, 0ms); }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1050px) {
    .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 160px; }
    .hero-content { max-width: 760px; }
    .hero-visual { max-width: 780px; }
    .visual-frame { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); border-radius: 24px; transform: perspective(1100px) rotateY(-3deg) rotateX(1deg); background: #0d1120; box-shadow: 0 34px 90px rgba(0, 0, 0, .42); }
    .scroll-cue { display: none; }
    .version-grid { grid-template-columns: repeat(2, 1fr); }
    .about-layout { gap: 60px; }
}

@media (max-width: 820px) {
    .section-shell { width: min(calc(100% - 32px), var(--max-width)); }
    .section-space { padding-top: 92px; padding-bottom: 92px; }
    .site-header { width: calc(100% - 32px); }
    .nav-toggle { display: block; z-index: 2; }
    .main-nav { position: fixed; top: 12px; right: 0; left: 0; display: grid; align-content: center; justify-items: center; height: calc(100vh - 24px); gap: 29px; border: 1px solid var(--line); border-radius: 22px; opacity: 0; visibility: hidden; transform: translateY(-10px); background: rgba(7, 9, 15, .96); backdrop-filter: blur(22px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; }
    .main-nav.open { opacity: 1; visibility: visible; transform: none; }
    .main-nav a { font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-size: 24px; }
    .nav-contact { padding: 12px 22px; }
    .nav-toggle.active span:first-child { transform: translateY(3.5px) rotate(45deg); }
    .nav-toggle.active span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
    .section-heading { grid-template-columns: 1fr; align-items: start; gap: 26px; margin-bottom: 42px; }
    .section-heading > p { max-width: 620px; }
    .about-layout { grid-template-columns: 1fr; }
    .contact-card { position: relative; overflow: hidden; padding: 92px 70px; border: 1px solid rgba(229, 130, 54, .22); border-radius: 30px; text-align: center; background: linear-gradient(145deg, rgba(18, 22, 33, .92), rgba(10, 13, 22, .98) 65%); box-shadow: 0 35px 100px rgba(0, 0, 0, .32); }
    .version-dialog[open] { grid-template-columns: 1fr; }
    .dialog-media { min-height: 270px; max-height: 340px; }
    .dialog-content { padding: 42px 30px 36px; }
    .dialog-close { position: fixed; }
}

@media (max-width: 620px) {
    .hero { gap: 48px; padding-top: 130px; padding-bottom: 60px; }
    .hero h1 { font-size: clamp(48px, 15vw, 68px); }
    .hero-copy { font-size: 15px; }
    .hero-actions, .contact-actions { align-items: stretch; flex-direction: column; }
    .button { width: 100%; }
    .hero-proof { justify-content: space-between; gap: 12px; }
    .hero-proof strong { font-size: 21px; }
    .hero-proof span { font-size: 8px; }
    .version-grid { grid-template-columns: 1fr; }
    .version-body p { min-height: auto; }
    .systems-list { border-top: 0; }
    .system-row { grid-template-columns: 42px 1fr; min-height: 155px; }
    .system-icon { justify-self: end; color: var(--accent); font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-size: 27px; }
    .showcase-grid { grid-template-columns: 1fr; }
    .showcase-wide { grid-column: auto; min-height: 370px; }
    .showcase-item { min-height: 340px; }
    .showcase-item figcaption { align-items: start; flex-direction: column; gap: 8px; }
    .showcase-item figcaption small { text-align: left; }
    .about-card { position: relative; overflow: hidden; min-height: 410px; padding: 36px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 28px; background: linear-gradient(150deg, rgba(23, 28, 40, .74), rgba(10, 14, 23, .92) 58%); box-shadow: 0 30px 80px rgba(0, 0, 0, .28); }
    .about-symbol { font-size: 105px; }
    .site-footer { grid-template-columns: 1fr; justify-items: start; padding-top: 34px; padding-bottom: 34px; }
    .site-footer p { text-align: left; }
    .site-footer > span { justify-self: start; }
    .version-dialog h2 { font-size: 40px; }
    .dialog-title-row { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}


.feedback { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #090c13 0%, #07090f 100%); }
.feedback::before { display: none; }
.feedback::after {
    position: absolute;
    top: -260px;
    left: -180px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, rgba(239, 127, 45, .13), transparent 67%);
}
.feedback .section-shell { position: relative; z-index: 1; }
.feedback-controls { display: flex; align-items: center; justify-content: flex-end; gap: 15px; margin: -28px 0 28px; }
.feedback-arrow { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: 10px; color: #dfe3ed; font-size: 20px; background: rgba(255, 255, 255, .025); cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.feedback-arrow:hover { transform: translateY(-2px); border-color: rgba(239, 127, 45, .48); background: rgba(239, 127, 45, .09); }
.feedback-arrow:disabled { opacity: .35; cursor: default; transform: none; }
.feedback-progress { display: flex; align-items: center; min-width: 98px; gap: 10px; color: #8790a1; font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-size: 12px; }
.feedback-progress i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--accent), rgba(255, 255, 255, .10)); }
.feedback-viewport { overflow: hidden; }
.feedback-track { display: flex; transition: transform .55s var(--ease); will-change: transform; }
.feedback-slide { flex: 0 0 100%; padding: 2px; }
.feedback-card { position: relative; min-height: 500px; padding: 42px 42px 38px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .11); border-radius: 22px; background: linear-gradient(145deg, rgba(22, 28, 41, .96), rgba(10, 13, 21, .98) 64%); box-shadow: 0 28px 80px rgba(0, 0, 0, .25); }
.feedback-card::before { position: absolute; top: 18px; right: 30px; content: "“"; color: rgba(239, 127, 45, .13); font-family: Georgia, "Times New Roman", serif; font-size: 150px; line-height: 1; }
.feedback-card::after { position: absolute; top: 0; right: 0; left: 0; height: 2px; content: ""; background: linear-gradient(90deg, transparent, rgba(239, 127, 45, .72), transparent); }
.feedback-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.feedback-author { display: flex; align-items: center; gap: 14px; }
.feedback-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border: 1px solid rgba(239, 127, 45, .32); border-radius: 50%; color: #fff4e9; font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-size: 16px; font-weight: 700; background: radial-gradient(circle at 35% 30%, #d77831, #252d3b 72%); box-shadow: inset 0 0 18px rgba(255, 208, 135, .08), 0 0 24px rgba(239, 127, 45, .08); }
.feedback-author strong { display: block; margin-bottom: 4px; color: #f3f6fb; font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-size: 21px; }
.feedback-author span { color: #7f899b; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.feedback-quote { position: relative; z-index: 1; max-width: 1020px; margin: 30px 0 0; color: #b5bdcb; font-size: 15px; line-height: 1.9; white-space: pre-line; }
.feedback-read { display: none; margin-top: 18px; padding: 0; border: 0; color: #f39a50; font-size: 11px; font-weight: 700; background: transparent; cursor: pointer; }
.feedback-card.long .feedback-quote { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 10; -webkit-box-orient: vertical; }
.feedback-card.long.expanded .feedback-quote { display: block; overflow: visible; }
.feedback-card.long .feedback-read { display: inline-flex; }

@media (max-width: 820px) {
    .feedback-controls { justify-content: flex-start; margin: -12px 0 24px; }
    .feedback-card { min-height: 540px; padding: 34px 28px 30px; }
    .feedback-head { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 620px) {
    .feedback-card { min-height: 610px; padding: 30px 22px 26px; }
    .feedback-author strong { font-size: 19px; }
    .feedback-quote { font-size: 14px; line-height: 1.82; }
    .feedback-card.long .feedback-quote { -webkit-line-clamp: 14; }
}


body::before {
    position: fixed;
    inset: 0;
    z-index: -4;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle at 12% 3%, rgba(239, 127, 45, .055), transparent 25%), radial-gradient(circle at 88% 10%, rgba(83, 108, 145, .055), transparent 24%);
}
.version-card-featured::after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
}
.contact-card::before {
    position: absolute;
    top: 0;
    right: 12%;
    left: 12%;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(239, 127, 45, .9), transparent);
}


body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 78% 12%, rgba(229,130,54,.05), transparent 18%), radial-gradient(circle at 18% 82%, rgba(229,130,54,.04), transparent 18%);
}
.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 180px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(7,9,15,.42));
}


/* Graphics Add-Ons */
.addons {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #080b12 0%, #0a0d15 50%, #07090f 100%);
}
.addons::before {
    position: absolute;
    top: -180px;
    right: -170px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, rgba(229, 130, 54, .09), transparent 68%);
}
.addons .section-shell { position: relative; z-index: 1; }
.addons-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.addon-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 370px;
    padding: 25px 24px 23px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(18, 23, 35, .92), rgba(10, 13, 21, .96));
    transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
}
.addon-card::before {
    position: absolute;
    top: 0;
    right: 20%;
    left: 20%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(229, 130, 54, .65), transparent);
}
.addon-card:hover {
    transform: translateY(-6px);
    border-color: rgba(229, 130, 54, .30);
    box-shadow: 0 24px 65px rgba(0, 0, 0, .27);
}

.addon-preview {
    position: relative;
    overflow: hidden;
    margin: 0 0 20px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: #0c1019;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}
.addon-preview img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform .45s var(--ease), filter .3s ease;
}
.addon-card:hover .addon-preview img {
    transform: scale(1.04);
    filter: brightness(1.05);
}

.addon-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}
.addon-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(229, 130, 54, .28);
    border-radius: 12px;
    color: #ffd2a5;
    font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    background: linear-gradient(145deg, rgba(229, 130, 54, .17), rgba(255, 255, 255, .025));
}
.addon-type {
    color: #727c8e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-align: right;
    text-transform: uppercase;
}
.addon-card h3 {
    margin: 0 0 11px;
    font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif;
    font-size: 23px;
    letter-spacing: -.035em;
}
.addon-card p {
    margin: 0 0 24px;
    color: #929bab;
    font-size: 13px;
    line-height: 1.72;
}
.compatibility {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 28px;
    margin-top: auto;
    padding: 0 10px;
    border: 1px solid rgba(229, 130, 54, .22);
    border-radius: 999px;
    color: #e8b27e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .065em;
    text-transform: uppercase;
    background: rgba(229, 130, 54, .07);
}
.addons-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 24px;
    padding: 25px 27px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 18px;
    background: rgba(255, 255, 255, .025);
}
.addons-note div { display: grid; gap: 7px; }
.addons-note strong {
    font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif;
    font-size: 18px;
}
.addons-note div span {
    color: #8992a2;
    font-size: 12px;
    line-height: 1.55;
}
.addons-note .button { flex: 0 0 auto; }

@media (max-width: 1050px) {
    .main-nav { gap: 22px; }
    .addons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .addons-note { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 620px) {
    .addons-grid { grid-template-columns: 1fr; }
    .addon-card { min-height: 330px; }
    .addons-note .button { width: 100%; }
}


/* Clients */
.clients {
    position: relative;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #090c13 0%, #07090f 100%);
}
.clients-summary {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 28px;
    margin: -20px 0 30px;
    padding: 21px 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .022);
}
.clients-summary div { display: grid; gap: 3px; min-width: 110px; }
.clients-summary strong { font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif; font-size: 24px; }
.clients-summary span { color: #778092; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.clients-summary p { justify-self: end; margin: 0; color: #7f899a; font-size: 11px; }
.clients-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.client-group {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(18, 23, 35, .92), rgba(10, 13, 21, .97));
    transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
}
.client-group::before {
    position: absolute;
    top: 0;
    right: 22%;
    left: 22%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(229, 130, 54, .52), transparent);
}
.client-group:hover {
    transform: translateY(-5px);
    border-color: rgba(229, 130, 54, .27);
    box-shadow: 0 24px 65px rgba(0, 0, 0, .25);
}
.client-group.latest { border-color: rgba(229, 130, 54, .24); }
.client-group.classic { background: linear-gradient(145deg, rgba(22, 26, 37, .94), rgba(11, 14, 21, .98)); }
.client-group-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--line);
}
.client-version {
    display: inline-flex;
    margin-bottom: 7px;
    color: var(--accent-2);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.client-group h3 {
    margin: 0;
    font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif;
    font-size: 22px;
    letter-spacing: -.035em;
}
.client-count {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(229, 130, 54, .22);
    border-radius: 10px;
    color: #d9a979;
    font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    background: rgba(229, 130, 54, .06);
}
.client-list {
    display: grid;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}
.client-list li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    gap: 16px;
    padding: 9px 0 9px 17px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    color: #c6ccd7;
    font-size: 13px;
}
.client-list li:last-child { border-bottom: 0; }
.client-list li::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    content: "";
    transform: translateY(-50%);
    background: var(--accent);
    box-shadow: 0 0 8px rgba(229, 130, 54, .35);
}
.client-list small {
    max-width: 130px;
    color: #727c8d;
    font-size: 9px;
    line-height: 1.35;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: .055em;
}

/* Click-to-enlarge image viewer */
.visual-frame img,
.version-media img,
.showcase-item img,
.dialog-media img {
    cursor: zoom-in;
}
.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: grid;
    place-items: center;
    padding: 26px;
    opacity: 0;
    visibility: hidden;
    background: rgba(3, 5, 9, .97);
    transition: opacity .22s ease, visibility .22s ease;
}
.image-lightbox.open { opacity: 1; visibility: visible; }
.lightbox-stage {
    display: grid;
    justify-items: center;
    width: 100%;
    max-width: 1600px;
    max-height: calc(100vh - 52px);
}
.lightbox-stage img {
    width: auto;
    max-width: 96vw;
    max-height: 88vh;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 12px;
    background: #080b12;
    box-shadow: 0 32px 100px rgba(0, 0, 0, .62);
}
.lightbox-stage p {
    margin: 13px 0 0;
    color: #9ba4b4;
    font-size: 11px;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}
.lightbox-close {
    position: fixed;
    top: 20px;
    right: 22px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    color: white;
    font-size: 27px;
    line-height: 1;
    background: rgba(12, 15, 22, .88);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.lightbox-close:hover {
    transform: scale(1.05);
    border-color: rgba(229, 130, 54, .55);
    background: rgba(229, 130, 54, .12);
}
body.lightbox-open { overflow: hidden; }

@media (max-width: 1050px) {
    .clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .clients-summary { grid-template-columns: repeat(2, 1fr); }
    .clients-summary p { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 620px) {
    .clients-grid { grid-template-columns: 1fr; }
    .clients-summary { grid-template-columns: 1fr 1fr; gap: 18px; margin-top: -10px; padding: 19px; }
    .client-group { padding: 21px; }
    .client-list li { align-items: flex-start; }
    .image-lightbox { padding: 14px; }
    .lightbox-stage img { max-width: 98vw; max-height: 84vh; border-radius: 8px; }
    .lightbox-close { top: 12px; right: 12px; }
}


.hero-custom-note {
    max-width: 760px;
    margin: 22px 0 0;
    color: #d2d8e4;
    font-size: 14px;
    line-height: 1.75;
}

.worldwide {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #0a0d15 0%, #080b12 100%);
}
.worldwide-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    gap: 36px;
    align-items: start;
}
.worldwide-copy > p:not(.eyebrow) {
    margin: 0 0 18px;
    color: #a8b0bf;
    font-size: 15px;
    line-height: 1.82;
}
.worldwide-copy strong { color: #f5f7fb; }
.worldwide-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0 28px;
}
.worldwide-stats article {
    border: 1px solid var(--line);
    background: rgba(255,255,255,.025);
}
.worldwide-stats article {
    padding: 22px 20px;
    border-radius: 16px;
}
.worldwide-stats strong {
    display: block;
    margin-bottom: 8px;
    color: #fff4e8;
    font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif;
    font-size: 28px;
    letter-spacing: -.04em;
}
.worldwide-stats span {
    color: #8e96a7;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.worldwide-panel {
    padding: 28px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(20, 25, 37, .96), rgba(9, 12, 19, .98));
    box-shadow: 0 24px 70px rgba(0,0,0,.22);
}
.worldwide-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.worldwide-kicker,
.worldwide-count {
    color: #dfe4ec;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.worldwide-count { color: #f0a25d; }
.country-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.country-grid span {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    color: #c7cfdb;
    font-size: 14px;
}

@media (max-width: 980px) {
    .worldwide-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .worldwide-stats, .country-grid { grid-template-columns: 1fr; }
    .worldwide-panel { padding: 22px; }
    .hero-custom-note { font-size: 13px; }
}


.hero {
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    background-image: linear-gradient(90deg, rgba(7, 9, 15, .88) 0%, rgba(7, 9, 15, .68) 30%, rgba(7, 9, 15, .45) 55%, rgba(7, 9, 15, .72) 100%), linear-gradient(180deg, rgba(7,9,15,.18), rgba(7,9,15,.55)), url("assets/images/hero-forest-godrays.webp");
    background-size: cover;
    background-position: center center;
    opacity: .96;
}
.hero .visual-frame img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.country-chip {
    display: flex !important;
    align-items: center;
    gap: 12px;
}
.country-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    min-width: 26px;
    font-size: 20px;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.country-name {
    display: inline-block;
}

@media (max-width: 640px) {
    .country-chip {
        min-height: 52px;
    }
}


.country-chip {
    display: flex !important;
    align-items: center;
    gap: 12px;
}
.country-flag {
    display: block;
    width: 26px;
    min-width: 26px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 6px 14px rgba(0,0,0,.18);
    background: rgba(255,255,255,.06);
}
.country-name {
    display: inline-block;
}


/* v13 full background overrides */
html, body {
    background: #07090f;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -20;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(5,7,12,.78) 0%, rgba(5,7,12,.68) 30%, rgba(5,7,12,.76) 100%), url("assets/images/hero-forest-godrays.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 1;
    transform: scale(1.02);
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -19;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(7,9,15,.24), rgba(7,9,15,.08) 28%, rgba(7,9,15,.18) 55%, rgba(7,9,15,.32));
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    background: linear-gradient(90deg, rgba(7, 9, 15, .82) 0%, rgba(7, 9, 15, .58) 30%, rgba(7, 9, 15, .22) 60%, rgba(7, 9, 15, .46) 100%);
}
.intro-strip,
.systems,
.about,
.feedback,
.worldwide,
.clients {
    background: rgba(8, 11, 18, .62) !important;
    backdrop-filter: blur(6px);
}
.visual-frame {
    background: rgba(12, 16, 25, .82);
}
.showcase-item,
.version-card,
.client-group,
.addon-card,
.feedback-card,
.about-card,
.contact-card,
.worldwide-panel {
    backdrop-filter: blur(8px);
}
.worldwide-panel,
.client-group,
.feedback-card,
.contact-card,
.about-card {
    background-color: rgba(10, 13, 21, .84);
}


/* v14 country list cleanup */
.country-grid .country-chip {
    min-height: 36px;
    padding: 3px 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
}
.country-grid .country-chip:hover {
    background: transparent !important;
}
.country-name {
    color: #d2d8e3;
}


/* v15 fixes */
.country-grid .country-chip {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 3px 0 !important;
}
.country-grid .country-chip:hover {
    background: transparent !important;
}
.country-grid .country-name {
    color: #d2d8e3;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -20;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(5,7,12,.78) 0%, rgba(5,7,12,.68) 30%, rgba(5,7,12,.76) 100%), url("assets/images/hero-forest-godrays.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 1;
    transform: scale(1.02);
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -19;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(7,9,15,.24), rgba(7,9,15,.08) 28%, rgba(7,9,15,.18) 55%, rgba(7,9,15,.32));
}


/* v16 feedback cleanup */
.feedback-head { justify-content: flex-start; }


/* v17 hard full-website background fix */
html {
    background: #07090f !important;
}
body {
    background-color: #07090f !important;
    background-image: linear-gradient(180deg, rgba(5,7,12,.78) 0%, rgba(5,7,12,.68) 30%, rgba(5,7,12,.76) 100%), url("assets/images/hero-forest-godrays.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}
body::before {
    content: none !important;
    background: none !important;
}
body::after {
    content: none !important;
    background: none !important;
}
.site-header,
.intro-strip,
.worldwide,
.clients,
.versions,
.feedback,
.systems,
.addons,
.showcase,
.about,
.contact,
.site-footer {
    background-color: transparent !important;
}
.section-shell,
.worldwide-panel,
.client-group,
.feedback-card,
.version-card,
.addon-card,
.showcase-item,
.about-card,
.contact-card,
.visual-frame,
.version-dialog-shell {
    background-color: rgba(10, 13, 21, .78) !important;
    backdrop-filter: blur(8px);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    background: linear-gradient(90deg, rgba(7, 9, 15, .82) 0%, rgba(7, 9, 15, .58) 30%, rgba(7, 9, 15, .22) 60%, rgba(7, 9, 15, .46) 100%) !important;
}


/* v18 top-right label badges */
.version-card,
.addon-card {
    position: relative;
}
.card-corner-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(9, 12, 19, .84);
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
    backdrop-filter: blur(10px);
    color: #fff4e8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    max-width: calc(100% - 28px);
    text-align: center;
}
.version-corner-badge {
    background: rgba(229, 130, 54, .16);
    border-color: rgba(229, 130, 54, .34);
    color: #ffd9b0;
}
.addon-corner-badge {
    font-size: 10px;
    line-height: 1.3;
    white-space: normal;
    padding: 8px 12px;
    min-height: 0;
    max-width: 200px;
    color: #ffe6c6;
}
.version-body {
    padding-top: 4px;
}
.version-state {
    display: inline-flex;
    margin: 6px 0 14px;
    color: #9aa3b5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.version-number,
.compatibility,
.version-media .status,
.featured-tag {
    display: none !important;
}
.addon-card {
    padding-top: 56px;
}
.addon-top {
    padding-right: 128px;
}
@media (max-width: 760px) {
    .card-corner-badge {
        top: 12px;
        right: 12px;
        max-width: calc(100% - 24px);
    }
    .addon-card {
        padding-top: 64px;
    }
    .addon-top {
        padding-right: 0;
        margin-top: 8px;
    }
    .addon-corner-badge {
        max-width: calc(100% - 24px);
    }
}


/* v19 full-bleed layout fix: remove harsh central cut */
:root {
    --content-width: 1500px;
}

html {
    background: #07090f !important;
}
body {
    background-color: #07090f !important;
    background-image:
        radial-gradient(circle at 18% 14%, rgba(255, 212, 151, .16), transparent 26%),
        linear-gradient(180deg, rgba(4, 6, 10, .68) 0%, rgba(4, 6, 10, .74) 28%, rgba(4, 6, 10, .82) 100%),
        url("assets/images/hero-forest-godrays.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}
body::before,
body::after {
    content: none !important;
    background: none !important;
}

.section-shell {
    width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: max(28px, calc((100vw - var(--content-width)) / 2)) !important;
}

.site-header {
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    padding-inline: max(28px, calc((100vw - var(--content-width)) / 2)) !important;
}
.site-header.scrolled {
    top: 0 !important;
    padding-inline: max(28px, calc((100vw - var(--content-width)) / 2)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(6, 9, 14, .72) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .20) !important;
}

main {
    position: relative;
    overflow: hidden;
}
main::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(7, 9, 15, .34), rgba(7, 9, 15, .14) 18%, rgba(7, 9, 15, .10) 50%, rgba(7, 9, 15, .18) 82%, rgba(7, 9, 15, .34));
    z-index: -1;
}

.hero.section-shell {
    position: relative;
    min-height: calc(100vh - 24px);
    padding-top: 124px !important;
    padding-bottom: 90px !important;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(6, 9, 14, .92) 0%, rgba(6, 9, 14, .86) 19%, rgba(6, 9, 14, .58) 42%, rgba(6, 9, 14, .20) 66%, rgba(6, 9, 14, .06) 100%),
        radial-gradient(circle at 12% 22%, rgba(255, 180, 90, .11), transparent 28%);
}
.hero-grid,
.hero-orb,
.page-noise,
.cursor-glow {
    opacity: .55;
}

.hero-content,
.hero-visual,
.worldwide-panel,
.client-group,
.version-card,
.feedback-card,
.addon-card,
.showcase-item,
.about-card,
.contact-card,
.visual-frame,
.version-dialog-shell {
    background-color: rgba(9, 12, 19, .72) !important;
    backdrop-filter: blur(10px);
}
.visual-frame {
    box-shadow: 0 28px 80px rgba(0, 0, 0, .36) !important;
}

.worldwide,
.clients,
.versions,
.feedback,
.systems,
.addons,
.about,
.contact,
.site-footer {
    background: transparent !important;
}
.intro-strip {
    background: rgba(8, 11, 18, .52) !important;
    backdrop-filter: blur(6px);
}

@media (max-width: 980px) {
    :root { --content-width: 100%; }
    .site-header,
    .section-shell {
        padding-inline: 20px !important;
    }
    .hero.section-shell {
        min-height: auto;
        padding-top: 108px !important;
    }
}


/* v20 country pills */
.country-grid {
    gap: 12px !important;
}
.country-grid .country-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 14px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.035) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.country-grid .country-chip:hover {
    border-color: rgba(229,130,54,.24) !important;
    background: rgba(229,130,54,.08) !important;
    transform: translateY(-1px);
}
.country-grid .country-name {
    color: #d9deea !important;
    font-size: 14px;
}
.country-grid .country-flag {
    width: 28px;
    min-width: 28px;
    height: 19px;
    border-radius: 5px;
}
@media (max-width: 640px) {
    .country-grid .country-chip {
        min-height: 46px;
        padding: 8px 13px !important;
    }
}


/* v21 softer hero panel + more visible full background */
body {
    background-image:
        radial-gradient(circle at 16% 14%, rgba(255, 211, 146, .20), transparent 26%),
        linear-gradient(180deg, rgba(4, 6, 10, .44) 0%, rgba(4, 6, 10, .52) 30%, rgba(4, 6, 10, .62) 100%),
        url("assets/images/hero-forest-godrays.webp") !important;
}

main::before {
    background: linear-gradient(90deg, rgba(7, 9, 15, .18), rgba(7, 9, 15, .07) 18%, rgba(7, 9, 15, .04) 50%, rgba(7, 9, 15, .09) 82%, rgba(7, 9, 15, .18)) !important;
}

.hero::before {
    background:
        linear-gradient(90deg, rgba(6, 9, 14, .78) 0%, rgba(6, 9, 14, .68) 20%, rgba(6, 9, 14, .38) 44%, rgba(6, 9, 14, .12) 68%, rgba(6, 9, 14, .04) 100%),
        radial-gradient(circle at 12% 22%, rgba(255, 180, 90, .12), transparent 28%) !important;
}

.hero-content {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 34px;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .20);
    padding: 34px 38px 26px !important;
}
.hero-content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(circle at top left, rgba(255, 176, 88, .08), transparent 24%),
        linear-gradient(90deg, rgba(5, 7, 12, .70) 0%, rgba(5, 7, 12, .66) 58%, rgba(5, 7, 12, .44) 78%, rgba(5, 7, 12, .14) 100%);
    backdrop-filter: blur(7px);
}
.hero-content::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.028), transparent 18%, transparent 82%, rgba(255,255,255,.02));
    mask-image: radial-gradient(circle at center, black 72%, transparent 100%);
}
.hero-copy {
    color: #b9c0cf !important;
}
.hero-custom-note {
    color: #c6ccd8 !important;
}
.hero-proof {
    margin-top: 22px;
}
.hero-proof div {
    border-radius: 18px;
    background: rgba(255, 255, 255, .025);
    padding: 14px 16px;
}
.hero-visual {
    background: transparent !important;
}
.visual-frame {
    background-color: rgba(12, 16, 25, .54) !important;
    border-color: rgba(255,255,255,.12) !important;
}

@media (max-width: 980px) {
    .hero-content {
        padding: 28px 24px 24px !important;
        border-radius: 28px;
    }
}


/* v22 marquee edge fade fix */
.intro-strip {
    position: relative;
    overflow: hidden;
}
.intro-strip::before,
.intro-strip::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 140px;
    z-index: 2;
    pointer-events: none;
}
.intro-strip::before {
    left: 0;
    background: linear-gradient(90deg, rgba(8, 11, 18, .96) 0%, rgba(8, 11, 18, .82) 38%, rgba(8, 11, 18, 0) 100%);
}
.intro-strip::after {
    right: 0;
    background: linear-gradient(270deg, rgba(8, 11, 18, .96) 0%, rgba(8, 11, 18, .82) 38%, rgba(8, 11, 18, 0) 100%);
}
.marquee-track {
    width: max-content;
    min-width: 200%;
    padding: 19px 38px;
    gap: 40px;
    white-space: nowrap;
}
@media (max-width: 700px) {
    .intro-strip::before,
    .intro-strip::after {
        width: 72px;
    }
    .marquee-track {
        padding-inline: 20px;
        gap: 28px;
    }
}


/* v23 section edge fade + gentler starts */
.section-space {
    padding-top: 148px !important;
    padding-bottom: 148px !important;
}

.intro-strip,
.worldwide,
.clients,
.versions,
.feedback,
.systems,
.addons,
.showcase,
.about,
.contact {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 54px, black calc(100% - 54px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black 54px, black calc(100% - 54px), transparent 100%);
}

.intro-strip {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
}

.worldwide .section-shell,
.clients .section-shell,
.versions .section-shell,
.feedback .section-shell,
.systems .section-shell,
.addons .section-shell,
.showcase.section-shell,
.about .section-shell,
.contact .section-shell {
    position: relative;
    z-index: 1;
}

.worldwide::before,
.clients::before,
.versions::before,
.feedback::before,
.systems::before,
.addons::before,
.showcase::before,
.about::before,
.contact::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 15%, transparent 85%, rgba(255,255,255,.02));
}

@media (max-width: 980px) {
    .section-space {
        padding-top: 118px !important;
        padding-bottom: 118px !important;
    }
    .intro-strip,
    .worldwide,
    .clients,
    .versions,
    .feedback,
    .systems,
    .addons,
    .showcase,
    .about,
    .contact {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 34px, black calc(100% - 34px), transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0, black 34px, black calc(100% - 34px), transparent 100%);
    }
}


/* v24 fixed four-line hero title */
.hero h1 {
    max-width: 720px !important;
    font-size: clamp(62px, 5.6vw, 96px) !important;
    line-height: .90 !important;
}
.hero-title-line {
    display: block;
    white-space: nowrap;
}
.hero-title-accent {
    width: fit-content;
    color: transparent;
    background: linear-gradient(90deg, #ff9a47, #ffd18c 75%);
    -webkit-background-clip: text;
    background-clip: text;
}
@media (max-width: 980px) {
    .hero h1 {
        font-size: clamp(50px, 10vw, 76px) !important;
    }
}
@media (max-width: 560px) {
    .hero h1 {
        font-size: clamp(42px, 12.5vw, 64px) !important;
        line-height: .92 !important;
    }
}


/* v25 remove hard rectangular section cuts and add soft fades */
.section-space {
    padding-top: 148px !important;
    padding-bottom: 148px !important;
}

.section-shell,
.showcase.section-shell,
.hero.section-shell,
.worldwide .section-shell,
.clients .section-shell,
.versions .section-shell,
.feedback .section-shell,
.systems .section-shell,
.addons .section-shell,
.about .section-shell,
.contact .section-shell {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

.hero-visual {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.hero,
.worldwide,
.clients,
.versions,
.feedback,
.systems,
.addons,
.showcase,
.about,
.contact {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.hero > *,
.worldwide > *,
.clients > *,
.versions > *,
.feedback > *,
.systems > *,
.addons > *,
.showcase > *,
.about > *,
.contact > * {
    position: relative;
    z-index: 1;
}

.hero::after,
.worldwide::after,
.clients::after,
.versions::after,
.feedback::after,
.systems::after,
.addons::after,
.showcase::after,
.about::after,
.contact::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 11, 18, 0) 0px, rgba(8, 11, 18, .44) 72px, rgba(8, 11, 18, .52) calc(100% - 72px), rgba(8, 11, 18, 0) 100%);
}

.hero::before {
    background:
        linear-gradient(90deg, rgba(6, 9, 14, .78) 0%, rgba(6, 9, 14, .66) 19%, rgba(6, 9, 14, .38) 44%, rgba(6, 9, 14, .14) 68%, rgba(6, 9, 14, .05) 100%),
        radial-gradient(circle at 12% 22%, rgba(255, 180, 90, .11), transparent 28%) !important;
}

.hero::after {
    background: linear-gradient(180deg, rgba(8, 11, 18, 0) 0px, rgba(8, 11, 18, .30) 74px, rgba(8, 11, 18, .36) calc(100% - 74px), rgba(8, 11, 18, 0) 100%);
}

.hero-content {
    margin-top: 16px;
}

.hero-content::before {
    background:
        radial-gradient(circle at top left, rgba(255, 176, 88, .06), transparent 24%),
        linear-gradient(90deg, rgba(5, 7, 12, .62) 0%, rgba(5, 7, 12, .58) 58%, rgba(5, 7, 12, .34) 78%, rgba(5, 7, 12, .08) 100%) !important;
}

.clients-overview,
.worldwide-panel,
.client-group,
.version-card,
.feedback-card,
.addon-card,
.showcase-item,
.about-card,
.contact-card,
.visual-frame,
.version-dialog-shell {
    background-color: rgba(9, 12, 19, .64) !important;
    backdrop-filter: blur(10px) !important;
}

.visual-frame {
    position: relative;
    overflow: hidden;
}
.visual-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 18%, transparent 82%, rgba(255,255,255,.02));
}

@media (max-width: 980px) {
    .section-space {
        padding-top: 120px !important;
        padding-bottom: 120px !important;
    }
    .hero-content {
        margin-top: 8px;
    }
    .hero::after,
    .worldwide::after,
    .clients::after,
    .versions::after,
    .feedback::after,
    .systems::after,
    .addons::after,
    .showcase::after,
    .about::after,
    .contact::after {
        background: linear-gradient(180deg, rgba(8, 11, 18, 0) 0px, rgba(8, 11, 18, .38) 42px, rgba(8, 11, 18, .44) calc(100% - 42px), rgba(8, 11, 18, 0) 100%);
    }
}


/* v26 enforce hero text left + image right and remove misplaced feedback circle */
.hero {
    grid-template-columns: minmax(0, 1.03fr) minmax(520px, .97fr) !important;
    align-items: center !important;
    gap: clamp(38px, 4vw, 72px) !important;
}
.hero-content {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    max-width: 720px !important;
    margin-top: 0 !important;
}
.hero-visual {
    grid-column: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    width: min(100%, 690px);
    margin: 0 0 0 auto !important;
}
.hero-visual .visual-frame {
    transform: none !important;
}
.replace-note {
    max-width: 620px;
    margin-inline: auto;
}

.feedback::before,
.feedback::after {
    display: none !important;
    content: none !important;
}

@media (max-width: 1180px) {
    .hero {
        grid-template-columns: minmax(0, 1fr) minmax(380px, .92fr) !important;
        gap: 34px !important;
    }
    .hero-visual {
        width: min(100%, 580px);
    }
}

@media (max-width: 980px) {
    .hero {
        grid-template-columns: 1fr !important;
    }
    .hero-content,
    .hero-visual {
        grid-column: auto !important;
        justify-self: stretch !important;
        width: 100%;
        max-width: none !important;
        margin: 0 !important;
    }
    .hero-visual {
        margin-top: 12px !important;
    }
}


/* v27 round blurred helper surfaces + softer first-section fade */
.hero {
    padding-bottom: 118px !important;
}
.hero::after {
    background:
        linear-gradient(180deg, rgba(8, 11, 18, 0) 0px, rgba(8, 11, 18, .18) 82px, rgba(8, 11, 18, .20) 62%, rgba(8, 11, 18, .10) 76%, rgba(8, 11, 18, .48) 90%, rgba(8, 11, 18, 0) 100%) !important;
}
.hero-content {
    border-radius: 34px !important;
    overflow: hidden;
}
.hero-content::before,
.hero-content::after {
    border-radius: inherit !important;
}
.replace-note {
    display: inline-block;
    max-width: min(100%, 620px);
    padding: 12px 18px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(9, 12, 19, .40);
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 36px rgba(0,0,0,.14);
}

.intro-strip {
    position: relative;
    z-index: 2;
    margin: -26px max(28px, calc((100vw - var(--content-width)) / 2)) 0 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 22px;
    background: rgba(8, 11, 18, .46) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 46px rgba(0, 0, 0, .18);
    overflow: hidden;
}
.intro-strip::before {
    left: 0;
    background: linear-gradient(90deg, rgba(8, 11, 18, .88) 0%, rgba(8, 11, 18, .70) 38%, rgba(8, 11, 18, 0) 100%) !important;
}
.intro-strip::after {
    right: 0;
    background: linear-gradient(270deg, rgba(8, 11, 18, .88) 0%, rgba(8, 11, 18, .70) 38%, rgba(8, 11, 18, 0) 100%) !important;
}
.marquee-track {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

@media (max-width: 980px) {
    .hero {
        padding-bottom: 102px !important;
    }
    .intro-strip {
        margin: -18px 20px 0 !important;
        border-radius: 18px;
    }
}


/* v28 remove top custom-work eyebrow in hero */
.hero-content {
    padding-top: 42px !important;
}
.hero-title-line:first-child {
    margin-top: 0;
}
@media (max-width: 980px) {
    .hero-content {
        padding-top: 34px !important;
    }
}


/* v29 remove extra blur from note under hero image; keep only rounded margins */
.replace-note {
    display: inline-block !important;
    max-width: min(100%, 620px) !important;
    margin: 14px auto 0 !important;
    padding: 12px 18px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: rgba(9, 12, 19, .10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}


/* v30 restore clean full-width marquee and remove the floating-pill gap */
.hero {
    padding-bottom: 88px !important;
}

.intro-strip {
    position: relative;
    z-index: 2;
    width: 100% !important;
    margin: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: rgba(8, 11, 18, .48) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
    box-shadow: none !important;
    overflow: hidden;
}
.intro-strip::before,
.intro-strip::after {
    width: 120px !important;
}
.intro-strip::before {
    background: linear-gradient(90deg, rgba(8, 11, 18, .96) 0%, rgba(8, 11, 18, .70) 42%, rgba(8, 11, 18, 0) 100%) !important;
}
.intro-strip::after {
    background: linear-gradient(270deg, rgba(8, 11, 18, .96) 0%, rgba(8, 11, 18, .70) 42%, rgba(8, 11, 18, 0) 100%) !important;
}
.marquee-track {
    min-width: 200%;
    padding: 17px 28px !important;
    gap: 38px !important;
}

.worldwide {
    padding-top: 108px !important;
}

@media (max-width: 980px) {
    .hero {
        padding-bottom: 72px !important;
    }
    .intro-strip {
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .intro-strip::before,
    .intro-strip::after {
        width: 66px !important;
    }
    .marquee-track {
        padding: 16px 18px !important;
        gap: 28px !important;
    }
    .worldwide {
        padding-top: 86px !important;
    }
}


/* v31 fix hero image note rounding without adding extra blur */
.hero-visual {
    align-items: center;
}
.replace-note {
    position: relative !important;
    display: block !important;
    width: fit-content;
    max-width: min(100%, 640px) !important;
    margin: 14px auto 0 !important;
    padding: 12px 18px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: rgba(9, 12, 19, .20) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.replace-note::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.replace-note {
    text-wrap: balance;
}


/* v32 seamless marquee loop */
.intro-strip {
    overflow: hidden;
}
.marquee-track {
    display: flex !important;
    align-items: center;
    width: max-content;
    gap: 0 !important;
    padding: 17px 0 !important;
    animation: marquee-seamless 24s linear infinite !important;
    will-change: transform;
}
.marquee-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 38px;
    padding-right: 38px;
}
.marquee-group span {
    white-space: nowrap;
}
.marquee-group i {
    flex: 0 0 auto;
}
@keyframes marquee-seamless {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (max-width: 980px) {
    .marquee-track {
        padding: 15px 0 !important;
        animation-duration: 20s !important;
    }
    .marquee-group {
        gap: 28px;
        padding-right: 28px;
    }
}


/* v33 remove dark full-width navigation lane */
.site-header,
.site-header.scrolled {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
}
.site-header.scrolled {
    top: 0 !important;
    height: 72px !important;
}
.brand,
.main-nav a {
    text-shadow: 0 2px 12px rgba(0,0,0,.65);
}
.nav-contact {
    background: rgba(7, 9, 15, .28) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


/* v34 remove hero top lane and make marquee truly seamless on wide screens */
.site-header::before,
.site-header::after {
    content: none !important;
    display: none !important;
}

.hero::after {
    display: block !important;
    content: "" !important;
    background: linear-gradient(
        180deg,
        rgba(8, 11, 18, 0) 0%,
        rgba(8, 11, 18, 0) 72%,
        rgba(8, 11, 18, .10) 82%,
        rgba(8, 11, 18, .40) 92%,
        rgba(8, 11, 18, 0) 100%
    ) !important;
}

.marquee-track {
    display: flex !important;
    align-items: center;
    width: max-content;
    min-width: 0 !important;
    gap: 0 !important;
    padding: 17px 0 !important;
    animation: marquee-v34 28s linear infinite !important;
    will-change: transform;
}
.marquee-group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 38px;
    padding-right: 38px;
}
.marquee-group span {
    white-space: nowrap;
}
@keyframes marquee-v34 {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-25%, 0, 0); }
}

@media (max-width: 980px) {
    .marquee-track {
        animation-duration: 22s !important;
    }
    .marquee-group {
        gap: 28px;
        padding-right: 28px;
    }
}


/* v35 restore dark scrolled header only; keep hero line removed */
.site-header {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
}
.site-header.scrolled {
    top: 0 !important;
    height: 72px !important;
    padding-inline: max(28px, calc((100vw - var(--content-width)) / 2)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(6, 9, 14, .74) !important;
    background-color: rgba(6, 9, 14, .74) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .22) !important;
}
.hero::after {
    display: block !important;
    content: "" !important;
    background: linear-gradient(180deg, rgba(8,11,18,0) 0%, rgba(8,11,18,0) 74%, rgba(8,11,18,.10) 84%, rgba(8,11,18,.38) 93%, rgba(8,11,18,0) 100%) !important;
}


/* v36 soften/remove the heavy black marquee lane while keeping seamless loop */
.intro-strip {
    position: relative;
    z-index: 2;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.04) !important;
    border-bottom: 1px solid rgba(255,255,255,.04) !important;
    border-radius: 0 !important;
    background: rgba(8, 11, 18, .18) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    box-shadow: none !important;
    overflow: hidden;
}
.intro-strip::before,
.intro-strip::after {
    width: 90px !important;
}
.intro-strip::before {
    background: linear-gradient(90deg, rgba(8, 11, 18, .42) 0%, rgba(8, 11, 18, .18) 45%, rgba(8, 11, 18, 0) 100%) !important;
}
.intro-strip::after {
    background: linear-gradient(270deg, rgba(8, 11, 18, .42) 0%, rgba(8, 11, 18, .18) 45%, rgba(8, 11, 18, 0) 100%) !important;
}
.marquee-track {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}
.marquee-group span {
    opacity: .92;
}
@media (max-width: 980px) {
    .intro-strip::before,
    .intro-strip::after { width: 54px !important; }
    .marquee-track { padding-top: 13px !important; padding-bottom: 13px !important; }
}


/* v37 keep dark scrolled header, remove hard black line */
.site-header {
    isolation: isolate;
}
.site-header.scrolled {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
}
.site-header.scrolled::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: 0;
    right: 0;
    bottom: -34px;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(6,9,14,.78) 0%, rgba(6,9,14,.68) 58%, rgba(6,9,14,.28) 82%, rgba(6,9,14,0) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.site-header.scrolled::after {
    content: none !important;
    display: none !important;
}


/* v38 fix: keep dark scrolled header only inside header, remove line below it */
.site-header.scrolled {
    top: 12px !important;
    height: 64px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 18px !important;
    background: rgba(7, 9, 15, .76) !important;
    background-color: rgba(7, 9, 15, .76) !important;
    backdrop-filter: blur(18px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(115%) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.24) !important;
}
.site-header.scrolled::before,
.site-header.scrolled::after {
    content: none !important;
    display: none !important;
}

/* ambient moving rays + dust */
.ambient-rays,
.ambient-dust {
    position: fixed;
    inset: 0;
    pointer-events: none;
}
.ambient-rays {
    z-index: 1;
    opacity: .20;
    mix-blend-mode: screen;
    background:
        linear-gradient(102deg, rgba(255, 219, 165, .00) 37%, rgba(255, 219, 165, .18) 48%, rgba(255, 219, 165, .00) 61%),
        linear-gradient(96deg, rgba(255, 201, 128, .00) 34%, rgba(255, 201, 128, .10) 45%, rgba(255, 201, 128, .00) 56%),
        linear-gradient(108deg, rgba(255, 232, 197, .00) 45%, rgba(255, 232, 197, .08) 53%, rgba(255, 232, 197, .00) 61%);
    transform-origin: top left;
    animation: ambientRaysShift 18s ease-in-out infinite alternate;
}
.ambient-rays::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 16% 13%, rgba(255, 216, 156, .22), rgba(255, 216, 156, .06) 18%, transparent 34%);
    opacity: .7;
    animation: ambientGlowPulse 10s ease-in-out infinite;
}

.ambient-dust {
    z-index: 2;
    opacity: .16;
    background-repeat: repeat;
    background-size: 420px 420px;
    mix-blend-mode: screen;
}
.ambient-dust-one {
    background-image:
        radial-gradient(circle, rgba(255, 234, 204, .85) 0 1.2px, transparent 1.6px),
        radial-gradient(circle, rgba(255, 218, 174, .7) 0 1px, transparent 1.45px),
        radial-gradient(circle, rgba(255,255,255,.6) 0 .9px, transparent 1.3px);
    background-position: 0 0, 120px 60px, 240px 180px;
    animation: ambientDustFloatOne 36s linear infinite;
}
.ambient-dust-two {
    opacity: .10;
    background-size: 520px 520px;
    background-image:
        radial-gradient(circle, rgba(255, 231, 198, .65) 0 1.4px, transparent 1.8px),
        radial-gradient(circle, rgba(255,255,255,.45) 0 1px, transparent 1.5px);
    background-position: 80px 40px, 260px 220px;
    animation: ambientDustFloatTwo 54s linear infinite;
}

@keyframes ambientRaysShift {
    0% { transform: translate3d(-2%, -1%, 0) scale(1.02); opacity: .16; }
    50% { opacity: .24; }
    100% { transform: translate3d(2%, 1%, 0) scale(1.06); opacity: .18; }
}
@keyframes ambientGlowPulse {
    0%, 100% { opacity: .48; }
    50% { opacity: .84; }
}
@keyframes ambientDustFloatOne {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(-120px, 70px, 0); }
}
@keyframes ambientDustFloatTwo {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(-80px, 110px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-rays, .ambient-rays::before, .ambient-dust { animation: none !important; }
}


/* v39 restore the old compact scrolled header */
.site-header {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(calc(100% - 48px), var(--max-width)) !important;
    height: 82px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}
.site-header.scrolled {
    top: 12px !important;
    height: 64px !important;
    width: min(calc(100% - 48px), var(--max-width)) !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 18px !important;
    background: rgba(7, 9, 15, .78) !important;
    background-color: rgba(7, 9, 15, .78) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .30) !important;
}
.site-header::before,
.site-header::after,
.site-header.scrolled::before,
.site-header.scrolled::after {
    content: none !important;
    display: none !important;
}

/* remove the visible dark lane: make the marquee strip blend into the page */
.intro-strip {
    position: relative !important;
    z-index: 2;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.02) !important;
    border-bottom: 1px solid rgba(255,255,255,.02) !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(8, 11, 18, .04) 0%, rgba(8, 11, 18, .10) 50%, rgba(8, 11, 18, .04) 100%) !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
    box-shadow: none !important;
    overflow: hidden;
}
.intro-strip::before,
.intro-strip::after {
    width: 74px !important;
}
.intro-strip::before {
    background: linear-gradient(90deg, rgba(8,11,18,.22) 0%, rgba(8,11,18,.10) 36%, rgba(8,11,18,0) 100%) !important;
}
.intro-strip::after {
    background: linear-gradient(270deg, rgba(8,11,18,.22) 0%, rgba(8,11,18,.10) 36%, rgba(8,11,18,0) 100%) !important;
}
.marquee-track {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}
.marquee-group span {
    color: rgba(203, 209, 221, .86) !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.24);
}

/* stronger moving dust and angled sun god rays */
.ambient-rays {
    z-index: 1;
    opacity: .34 !important;
    mix-blend-mode: screen;
    background:
        linear-gradient(112deg, rgba(255, 222, 171, 0) 30%, rgba(255, 222, 171, .26) 43%, rgba(255, 222, 171, 0) 56%),
        linear-gradient(106deg, rgba(255, 198, 123, 0) 34%, rgba(255, 198, 123, .18) 46%, rgba(255, 198, 123, 0) 58%),
        linear-gradient(118deg, rgba(255, 238, 209, 0) 40%, rgba(255, 238, 209, .12) 49%, rgba(255, 238, 209, 0) 58%);
    animation: ambientRaysShiftV39 16s ease-in-out infinite alternate;
}
.ambient-rays::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 13% 10%, rgba(255, 220, 153, .36), rgba(255, 220, 153, .12) 15%, transparent 30%),
        radial-gradient(circle at 16% 14%, rgba(255, 238, 210, .20), transparent 22%);
    opacity: .95;
    animation: ambientGlowPulseV39 8s ease-in-out infinite;
}
.ambient-dust {
    z-index: 2;
    mix-blend-mode: screen;
}
.ambient-dust-one {
    opacity: .28 !important;
    background-size: 360px 360px !important;
    background-image:
        radial-gradient(circle, rgba(255, 236, 208, .95) 0 1.35px, transparent 1.9px),
        radial-gradient(circle, rgba(255, 219, 170, .82) 0 1.15px, transparent 1.65px),
        radial-gradient(circle, rgba(255,255,255,.74) 0 1px, transparent 1.45px);
    animation: ambientDustFloatOneV39 28s linear infinite;
}
.ambient-dust-two {
    opacity: .18 !important;
    background-size: 480px 480px !important;
    background-image:
        radial-gradient(circle, rgba(255, 232, 197, .82) 0 1.6px, transparent 2.1px),
        radial-gradient(circle, rgba(255,255,255,.52) 0 1.15px, transparent 1.6px);
    animation: ambientDustFloatTwoV39 40s linear infinite;
}
@keyframes ambientRaysShiftV39 {
    0% { transform: translate3d(-3%, -2%, 0) scale(1.03) rotate(-1deg); opacity: .28; }
    50% { opacity: .38; }
    100% { transform: translate3d(2%, 2%, 0) scale(1.08) rotate(1deg); opacity: .32; }
}
@keyframes ambientGlowPulseV39 {
    0%, 100% { opacity: .74; }
    50% { opacity: 1; }
}
@keyframes ambientDustFloatOneV39 {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-140px, 92px, 0); }
}
@keyframes ambientDustFloatTwoV39 {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-96px, 132px, 0); }
}
@media (max-width: 980px) {
    .site-header { width: calc(100% - 32px) !important; }
    .site-header.scrolled { width: calc(100% - 32px) !important; }
    .intro-strip::before, .intro-strip::after { width: 48px !important; }
    .marquee-track { padding-top: 10px !important; padding-bottom: 10px !important; }
    .ambient-rays { opacity: .28 !important; }
    .ambient-dust-one { opacity: .22 !important; }
    .ambient-dust-two { opacity: .14 !important; }
}


/* v40 restore the old full-width header and remove only the dark line below it */
.site-header {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 82px !important;
    padding-inline: max(28px, calc((100vw - var(--content-width)) / 2)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}
.site-header.scrolled {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 72px !important;
    padding-inline: max(28px, calc((100vw - var(--content-width)) / 2)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(6, 9, 14, .72) !important;
    background-color: rgba(6, 9, 14, .72) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    box-shadow: none !important;
}
.site-header::before,
.site-header::after,
.site-header.scrolled::before,
.site-header.scrolled::after {
    content: none !important;
    display: none !important;
}

/* remove other possible horizontal helper lines near the top */
.hero-grid {
    display: none !important;
}
.hero::after {
    background: linear-gradient(180deg, rgba(8,11,18,0) 0%, rgba(8,11,18,0) 78%, rgba(8,11,18,.10) 87%, rgba(8,11,18,.34) 95%, rgba(8,11,18,0) 100%) !important;
}

/* oversized angled rays: no visible moving layer edges */
.ambient-rays {
    position: fixed !important;
    top: -35vh !important;
    right: -35vw !important;
    bottom: -35vh !important;
    left: -35vw !important;
    width: auto !important;
    height: auto !important;
    z-index: 1;
    opacity: .34 !important;
    overflow: hidden;
    mix-blend-mode: screen;
    transform-origin: 15% 8%;
    background:
        linear-gradient(116deg, transparent 33%, rgba(255, 225, 178, .25) 43%, transparent 53%),
        linear-gradient(110deg, transparent 38%, rgba(255, 196, 112, .17) 47%, transparent 57%),
        linear-gradient(122deg, transparent 42%, rgba(255, 240, 213, .11) 50%, transparent 58%);
    mask-image: radial-gradient(ellipse at 22% 15%, black 0%, rgba(0,0,0,.92) 28%, rgba(0,0,0,.55) 52%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at 22% 15%, black 0%, rgba(0,0,0,.92) 28%, rgba(0,0,0,.55) 52%, transparent 78%);
    animation: ambientRaysShiftV40 18s ease-in-out infinite alternate !important;
}
.ambient-rays::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 17% 13%, rgba(255, 223, 162, .36), rgba(255, 223, 162, .12) 16%, transparent 34%),
        radial-gradient(circle at 21% 18%, rgba(255, 240, 216, .18), transparent 25%);
    opacity: .9;
    animation: ambientGlowPulseV40 9s ease-in-out infinite;
}
@keyframes ambientRaysShiftV40 {
    0% { transform: translate3d(-1.5%, -1%, 0) rotate(-1.2deg) scale(1.03); opacity: .28; }
    50% { opacity: .38; }
    100% { transform: translate3d(1.5%, 1%, 0) rotate(1.2deg) scale(1.07); opacity: .34; }
}
@keyframes ambientGlowPulseV40 {
    0%, 100% { opacity: .68; }
    50% { opacity: 1; }
}

/* dust stays clearly visible but subtle */
.ambient-dust-one { opacity: .25 !important; }
.ambient-dust-two { opacity: .16 !important; }

@media (max-width: 980px) {
    .site-header,
    .site-header.scrolled {
        padding-inline: 20px !important;
    }
    .ambient-rays {
        top: -45vh !important;
        right: -55vw !important;
        bottom: -45vh !important;
        left: -55vw !important;
        opacity: .28 !important;
    }
}


/* v41: original compact header + stable atmosphere without compositing flicker */
.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(calc(100% - 48px), var(--max-width)) !important;
    height: 82px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}
.site-header.scrolled {
    top: 12px !important;
    height: 64px !important;
    width: min(calc(100% - 48px), var(--max-width)) !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 18px !important;
    background: rgba(7, 9, 15, .78) !important;
    background-color: rgba(7, 9, 15, .78) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .30) !important;
}
.site-header::before,
.site-header::after,
.site-header.scrolled::before,
.site-header.scrolled::after {
    content: none !important;
    display: none !important;
}

/* The old animated ray transform/mask caused the flashing and horizontal edge. */
.ambient-rays {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    opacity: .20 !important;
    transform: none !important;
    animation: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    mix-blend-mode: screen !important;
    background:
        linear-gradient(116deg, transparent 25%, rgba(255, 225, 177, .18) 40%, transparent 55%),
        linear-gradient(109deg, transparent 34%, rgba(255, 194, 109, .11) 47%, transparent 60%),
        linear-gradient(123deg, transparent 42%, rgba(255, 239, 209, .075) 52%, transparent 62%) !important;
}
.ambient-rays::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    opacity: .72 !important;
    animation: none !important;
    background:
        radial-gradient(circle at 13% 9%, rgba(255, 222, 163, .28), rgba(255, 222, 163, .08) 17%, transparent 33%),
        radial-gradient(circle at 18% 15%, rgba(255, 241, 216, .10), transparent 27%) !important;
}

/* Move repeated dust through background-position instead of moving the whole layer. */
.ambient-dust {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
    overflow: hidden !important;
    pointer-events: none !important;
    will-change: background-position;
}
.ambient-dust-one {
    opacity: .24 !important;
    animation: dustPositionOneV41 34s linear infinite !important;
}
.ambient-dust-two {
    opacity: .15 !important;
    animation: dustPositionTwoV41 52s linear infinite !important;
}
@keyframes dustPositionOneV41 {
    from { background-position: 0 0, 120px 60px, 240px 180px; }
    to { background-position: -180px 110px, -60px 170px, 60px 290px; }
}
@keyframes dustPositionTwoV41 {
    from { background-position: 80px 40px, 260px 220px; }
    to { background-position: -80px 170px, 100px 350px; }
}

/* No top helper overlay or full-width horizontal edge inside the hero. */
.hero-grid {
    display: none !important;
}
.hero::before {
    background:
        linear-gradient(90deg, rgba(6,9,14,.72) 0%, rgba(6,9,14,.56) 26%, rgba(6,9,14,.28) 53%, rgba(6,9,14,.08) 78%, rgba(6,9,14,0) 100%),
        radial-gradient(circle at 12% 18%, rgba(255,180,90,.08), transparent 30%) !important;
}
.hero::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: auto 0 0 0 !important;
    height: 170px !important;
    background: linear-gradient(to bottom, transparent, rgba(7,9,15,.28)) !important;
}

@media (max-width: 980px) {
    .site-header,
    .site-header.scrolled {
        width: calc(100% - 32px) !important;
    }
    .ambient-rays { opacity: .15 !important; }
    .ambient-dust-one { opacity: .19 !important; }
    .ambient-dust-two { opacity: .11 !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-dust-one,
    .ambient-dust-two {
        animation: none !important;
    }
}


/* v42 prevent header horizontal jump when scrolling */
.site-header,
.site-header.scrolled {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
}
.site-header {
    width: min(calc(100% - 48px), var(--max-width)) !important;
}
.site-header.scrolled {
    width: min(calc(100% - 48px), var(--max-width)) !important;
}
@media (max-width: 980px) {
    .site-header,
    .site-header.scrolled {
        width: calc(100% - 32px) !important;
    }
}


/* v44 image + MP4 media support */
.visual-frame video,
.version-media video,
.showcase-item video,
.dialog-media video,
.addon-preview video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.visual-frame video { aspect-ratio: 16 / 9; }
.version-media video { aspect-ratio: 1.5 / 1; }
.addon-preview video { aspect-ratio: 16 / 9; }
.dialog-media video { min-height: 100%; }

.has-video {
    position: relative;
    cursor: pointer;
}
.video-play-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    width: 100%;
    padding: 0;
    border: 0;
    color: white;
    background: linear-gradient(180deg, rgba(5,7,12,.04), rgba(5,7,12,.18));
    cursor: pointer;
    transition: background .25s ease;
}
.video-play-overlay:hover,
.has-video:hover .video-play-overlay {
    background: linear-gradient(180deg, rgba(5,7,12,.02), rgba(5,7,12,.28));
}
.video-play-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 50%;
    background: rgba(7,9,15,.68);
    backdrop-filter: blur(12px);
    box-shadow: 0 16px 48px rgba(0,0,0,.34), 0 0 0 8px rgba(255,255,255,.035);
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.video-play-icon::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 5px;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 17px solid #ffad62;
}
.video-play-overlay:hover .video-play-icon {
    transform: scale(1.08);
    border-color: rgba(255,173,98,.55);
    background: rgba(7,9,15,.82);
}
.video-play-text {
    padding: 7px 11px;
    border-radius: 999px;
    color: #f6f7fb;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    background: rgba(7,9,15,.58);
    backdrop-filter: blur(8px);
}

.lightbox-stage video {
    display: block;
    max-width: 94vw;
    max-height: 84vh;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    background: #000;
    box-shadow: 0 32px 110px rgba(0,0,0,.58);
}
.lightbox-stage img[hidden],
.lightbox-stage video[hidden] {
    display: none !important;
}
.dialog-media.has-video .video-play-overlay {
    border-radius: inherit;
}

@media (max-width: 760px) {
    .video-play-icon {
        width: 58px;
        height: 58px;
    }
    .video-play-icon::before {
        border-top-width: 9px;
        border-bottom-width: 9px;
        border-left-width: 14px;
    }
    .lightbox-stage video {
        max-width: 98vw;
        max-height: 78vh;
        border-radius: 9px;
    }
}


/* v45 consistent centered lightbox media */
.image-lightbox {
    box-sizing: border-box;
    display: grid !important;
    place-items: center !important;
    padding: 24px !important;
    overflow: hidden !important;
}

.lightbox-stage {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto;
    justify-items: center;
    align-items: center;
    width: min(92vw, 1380px) !important;
    height: min(88vh, 900px) !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0;
    min-height: 0;
    margin: auto;
}

.lightbox-media-frame {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16px;
    background: rgba(5, 7, 11, .94);
    box-shadow: 0 32px 100px rgba(0, 0, 0, .62);
}

.lightbox-media-frame img,
.lightbox-media-frame video {
    grid-area: 1 / 1;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0;
    min-height: 0;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lightbox-media-frame img[hidden],
.lightbox-media-frame video[hidden] {
    display: none !important;
}

.lightbox-stage p {
    width: min(100%, 1000px);
    min-height: 18px;
    margin: 12px auto 0 !important;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lightbox-close {
    top: 18px !important;
    right: 18px !important;
}

@media (max-width: 760px) {
    .image-lightbox {
        padding: 14px !important;
    }
    .lightbox-stage {
        width: 96vw !important;
        height: 84vh !important;
    }
    .lightbox-media-frame {
        border-radius: 11px;
    }
    .lightbox-stage p {
        width: 92vw;
        font-size: 9px;
    }
    .lightbox-close {
        top: 10px !important;
        right: 10px !important;
    }
}

@media (max-height: 700px) and (min-width: 761px) {
    .lightbox-stage {
        width: min(88vw, 1240px) !important;
        height: 82vh !important;
    }
}


/* v46 strict image/video detection */
.addon-preview:not(.has-video) .video-play-overlay,
.version-media:not(.has-video) .video-play-overlay,
.showcase-item:not(.has-video) .video-play-overlay,
.visual-frame:not(.has-video) .video-play-overlay,
.dialog-media:not(.has-video) .video-play-overlay {
    display: none !important;
}
.addon-preview.has-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* v47 reliable media click targets */
.visual-overlay,
.showcase-item::after,
.version-media::before,
.version-media::after,
.addon-preview::before,
.addon-preview::after {
    pointer-events: none !important;
}
.version-media,
.showcase-item,
.addon-preview,
.visual-frame,
.dialog-media {
    cursor: zoom-in;
}
.version-media img,
.showcase-item img,
.addon-preview img,
.visual-frame img,
.dialog-media img,
.version-media video,
.showcase-item video,
.addon-preview video,
.visual-frame video,
.dialog-media video {
    pointer-events: auto;
}


/* v50 structured release details */
.dialog-feature-groups { display: grid !important; gap: 24px !important; margin: 0 0 36px !important; }
.dialog-feature-groups > .dialog-feature-section { padding: 0 !important; }
.dialog-feature-groups > .dialog-feature-section::before { display: none !important; }
.dialog-feature-section h3 { margin: 0 0 13px !important; color: #f3f5f8; font-size: 14px !important; letter-spacing: .02em; }
.dialog-feature-section > ul { display: grid; gap: 11px; margin: 0 !important; padding: 0 !important; list-style: none; }
.dialog-feature-section > ul > li { position: relative; padding-left: 20px; color: #b5bbc7; font-size: 13px; line-height: 1.55; }
.dialog-feature-section > ul > li::before { position: absolute; top: .56em; left: 0; width: 6px; height: 6px; border-radius: 50%; content: ""; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 8px rgba(239, 127, 45, .55); }


/* v51 visible release-notes action and synchronized card media */
.version-body { display: flex !important; flex-direction: column !important; }
.version-body .version-open {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 44px !important;
    margin-top: auto !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(255, 153, 74, .72) !important;
    border-radius: 11px !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .075em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    background: linear-gradient(135deg, rgba(239, 127, 45, .96), rgba(200, 78, 25, .96)) !important;
    box-shadow: 0 10px 26px rgba(217, 94, 28, .20), inset 0 1px 0 rgba(255,255,255,.20) !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.version-body .version-open:hover,
.version-body .version-open:focus-visible {
    border-color: rgba(255, 187, 128, .95) !important;
    background: linear-gradient(135deg, #ff984d, #dd5d23) !important;
    box-shadow: 0 14px 34px rgba(217, 94, 28, .32), inset 0 1px 0 rgba(255,255,255,.24) !important;
    transform: translateY(-1px) !important;
}
.version-body .version-open span { font-size: 15px !important; }
.version-body p { flex: 1 1 auto !important; }
@media (max-width: 760px) {
    .version-body .version-open { min-height: 46px !important; font-size: 10px !important; }
}


/* v52 — Highlights (DX11 Native + JTX Prime), old graphics line, per-product contact */

/* Highlights section */
.highlight-grid { display: grid; gap: 22px; }
.highlight-card {
    position: relative;
    overflow: hidden;
    padding: 36px 34px 32px;
    border: 1px solid rgba(229, 130, 54, .30);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 88% 0%, rgba(229, 130, 54, .16), transparent 42%),
        linear-gradient(150deg, rgba(26, 22, 17, .92), rgba(10, 13, 21, .95) 58%);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .30);
}
.highlight-card::before {
    position: absolute;
    top: 0;
    right: 14%;
    left: 14%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 178, 91, .75), transparent);
}
.highlight-corner-badge {
    background: rgba(229, 130, 54, .20);
    border-color: rgba(255, 178, 91, .48);
    color: #ffe0bd;
}
.highlight-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 20px;
    padding-right: 210px;
}
.highlight-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border: 1px solid rgba(229, 130, 54, .38);
    border-radius: 16px;
    color: #ffd2a5;
    font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    background: linear-gradient(145deg, rgba(229, 130, 54, .22), rgba(255, 255, 255, .03));
    box-shadow: inset 0 0 22px rgba(239, 127, 45, .14);
}
.highlight-card h3 {
    margin: 0 0 7px;
    font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif;
    font-size: clamp(24px, 2.6vw, 33px);
    letter-spacing: -.04em;
    line-height: 1.04;
}
.highlight-sub {
    margin: 0;
    color: #8992a2;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.highlight-copy {
    max-width: 860px;
    margin: 0 0 24px;
    color: #a9b0bf;
    font-size: 14px;
    line-height: 1.78;
}
.highlight-copy strong { color: #e9edf5; }
.highlight-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}
.highlight-points li {
    position: relative;
    padding-left: 20px;
    color: #b7bdc9;
    font-size: 13px;
    line-height: 1.6;
}
.highlight-points li::before {
    position: absolute;
    top: .52em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    content: "";
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 8px rgba(239, 127, 45, .55);
}
.highlight-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* JTX Prime editions */
.prime-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 2px 0 28px;
}
.prime-tier {
    display: flex;
    flex-direction: column;
    padding: 23px 21px 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
}
.prime-tier:hover {
    transform: translateY(-4px);
    border-color: rgba(229, 130, 54, .38);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .26);
}
.prime-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid rgba(229, 130, 54, .30);
    border-radius: 999px;
    color: #eab183;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    background: rgba(229, 130, 54, .08);
}
.prime-tier h4 {
    margin: 0 0 10px;
    font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif;
    font-size: 18px;
    letter-spacing: -.025em;
}
.prime-tier p {
    flex: 1 1 auto;
    margin: 0 0 18px;
    color: #939cac;
    font-size: 12.5px;
    line-height: 1.7;
}

/* Per-product contact link */
.card-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffc48d;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    transition: color .2s ease;
}
.card-contact-link span { transition: transform .2s ease; }
.card-contact-link:hover { color: #ffdfbc; }
.card-contact-link:hover span { transform: translate(3px, -3px); }
.version-body .card-contact-link { justify-content: center; margin-top: 11px; }
.prime-tier .card-contact-link { margin-top: auto; }
.addon-contact { margin-top: auto; align-self: flex-start; }

/* Old graphics archive — compact version grid */
.versions-old .version-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; }
.versions-old .version-media { margin: 6px; border-radius: 13px; }
.versions-old .version-media img { aspect-ratio: 1.6 / 1; }
.versions-old .version-body { padding: 12px 15px 17px !important; }
.versions-old .version-body h3 { margin-bottom: 6px; font-size: 16.5px; }
.versions-old .version-state { margin: 2px 0 9px; color: #8a93a6; font-size: 9.5px; }
.versions-old .version-body p { min-height: 0; margin: 0 0 14px; font-size: 12px; line-height: 1.55; }
.versions-old .card-corner-badge { top: 12px; right: 12px; min-height: 27px; padding: 0 10px; font-size: 10px; }
.versions-old .version-body .version-open { min-height: 38px !important; padding: 9px 12px !important; font-size: 9.5px !important; }
.versions-old .version-body .version-open span { font-size: 13px !important; }
.versions-old .version-body .card-contact-link { font-size: 9.5px; }
.versions-note { margin-top: 26px; }

/* Old tag on Add-On cards */
.addon-top { justify-content: flex-start; gap: 12px; }
.addon-top .addon-type { margin-left: auto; }
.addon-old-tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    color: #aab2c2;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(255, 255, 255, .045);
}

/* Obsolete note inside the release dialog */
.dialog-availability {
    margin: -10px 0 28px;
    padding: 13px 15px;
    border: 1px solid rgba(229, 130, 54, .32);
    border-radius: 12px;
    color: #ffd9ae;
    font-size: 12.5px;
    line-height: 1.65;
    background: rgba(229, 130, 54, .08);
}
.dialog-availability[hidden] { display: none; }

@media (max-width: 1180px) {
    .versions-old .version-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 980px) {
    .versions-old .version-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .prime-grid { grid-template-columns: 1fr; }
    .highlight-points { grid-template-columns: 1fr; }
    .highlight-head { padding-right: 0; }
    .highlight-card { padding-top: 72px; }
}
@media (max-width: 560px) {
    .versions-old .version-grid { grid-template-columns: 1fr !important; }
    .highlight-card { padding: 66px 22px 26px; }
    .highlight-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .highlight-actions .button { width: 100%; }
    .addon-top { flex-wrap: wrap; }
    .addon-top .addon-type { margin-left: 0; }
}


/* v53 — Prime mystery categories, v3 DX12 highlight, new DX11 add-on card */
.prime-mystery {
    font-style: italic;
    color: #7f8899 !important;
    letter-spacing: .02em;
}
.addon-new-tag {
    border-color: rgba(229, 130, 54, .42);
    color: #ffca92;
    background: rgba(229, 130, 54, .12);
}
.addon-card-new {
    border-color: rgba(229, 130, 54, .30);
}
.addon-card-new::before {
    background: linear-gradient(90deg, transparent, rgba(255, 178, 91, .85), transparent);
}


/* v71 — preview videos on highlight cards */
.highlight-media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 26px;
}
.highlight-media .addon-preview { margin: 0; }
.highlight-media .addon-preview img,
.highlight-media .addon-preview video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.highlight-media-single { grid-template-columns: 1fr; max-width: 760px; }
.highlight-media-triple { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) {
    .highlight-media-triple { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .highlight-media { grid-template-columns: 1fr; }
}


/* v76 — Add-Ons split: current vs old groups */
.addons-subhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin: 38px 0 16px;
}
.addons-subhead:first-of-type { margin-top: 0; }
.addons-subhead h3 {
    margin: 0;
    font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif;
    font-size: 24px;
    letter-spacing: -.03em;
}
.addons-subhead span {
    color: #8992a2;
    font-size: 12px;
}
@media (max-width: 620px) {
    .addons-subhead { flex-direction: column; gap: 4px; }
}


/* v75 — lightbox wraps the media exactly: no crop, no black bars, moderate size */
.lightbox-stage {
    grid-template-rows: auto auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 88vw !important;
    max-height: 88vh !important;
}
.lightbox-media-frame {
    width: auto !important;
    height: auto !important;
    background: #000 !important;
}
.lightbox-media-frame img,
.lightbox-media-frame video {
    width: auto !important;
    height: auto !important;
    max-width: min(1180px, 84vw) !important;
    max-height: 74vh !important;
    object-fit: contain !important;
}
@media (max-width: 760px) {
    .lightbox-media-frame img,
    .lightbox-media-frame video {
        max-width: 94vw !important;
        max-height: 66vh !important;
    }
}


/* v107 — the 11-link menu must fit between 1050 and 1366 px */
@media (max-width: 1366px) {
    .main-nav { gap: 19px; }
    .main-nav a { font-size: 12.5px; }
}
@media (max-width: 1120px) {
    .main-nav { gap: 13px; }
    .main-nav a { font-size: 12px; }
}


/* v106 — Road Map section (3 columns) + dedicated contact page */
.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}
.road-col {
    display: flex;
    flex-direction: column;
    padding: 22px 21px 19px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(13, 16, 25, .68);
}
.road-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.road-col-head h3 {
    margin: 0;
    font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif;
    font-size: 21px;
    letter-spacing: -.03em;
}
.road-status-old {
    color: #aab2c2;
    background: rgba(255, 255, 255, .05);
}
.road-col ul {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
.road-col li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .022);
}
.road-col li span {
    color: #e2e6f0;
    font-size: 12.5px;
    font-weight: 600;
}
.road-col li small {
    color: #7d8798;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-align: right;
    text-transform: uppercase;
    white-space: nowrap;
}
.road-col .card-contact-link { margin-top: auto; align-self: flex-start; }
@media (max-width: 1050px) {
    .roadmap-grid { grid-template-columns: 1fr; }
}

.contact-page main {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 160px);
    padding: 130px 0 60px;
}
.contact-page .contact-card {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
}
.contact-back { min-height: 44px; padding: 0 16px; font-size: 12px; }


/* v96 — performance: composited static background, no heavy backdrop blurs, lazy section rendering */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: -6;
    pointer-events: none;
    background-color: #07090f;
    background-image:
        radial-gradient(circle at 18% 14%, rgba(255, 212, 151, .16), transparent 26%),
        linear-gradient(180deg, rgba(4, 6, 10, .68) 0%, rgba(4, 6, 10, .74) 28%, rgba(4, 6, 10, .82) 100%),
        url("assets/images/hero-forest-godrays.webp");
    background-size: cover;
    background-position: center center;
    transform: translateZ(0);
}
html, body {
    background-image: none !important;
    background-attachment: scroll !important;
}
body { background-color: transparent !important; }
.section-shell,
.worldwide-panel,
.client-group,
.feedback-card,
.version-card,
.addon-card,
.showcase-item,
.about-card,
.contact-card,
.visual-frame,
.version-dialog-shell,
.highlight-card,
.card-corner-badge,
.version-media .status {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.clients,
.versions,
.feedback,
.systems,
.addons,
.about,
.contact {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}
@media (max-width: 900px) {
    .site-header.scrolled,
    .main-nav,
    .dialog-close,
    .version-dialog::backdrop,
    .visual-label,
    .visual-badge {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .ambient-rays,
    .ambient-dust,
    .cursor-glow,
    .hero-grid {
        display: none !important;
    }
}


/* v92 — tidy add-on card header: icon + type left, status right, compat under title */
.addon-card { padding-top: 25px; }
.addon-top {
    padding-right: 0;
    margin-top: 0;
    margin-bottom: 20px;
}
.addon-top .addon-type { order: 2; margin-left: 0; }
.addon-top .highlight-status { order: 3; margin-left: auto; }
.addon-card > h3 { margin-bottom: 5px; }
.addon-compat {
    margin: 0 0 12px;
    color: #8a93a5;
    font-size: 11px;
    letter-spacing: .02em;
}
@media (max-width: 620px) {
    .addon-top { flex-wrap: nowrap; }
}


/* v88 — availability status pills on highlight cards */
.highlight-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 27px;
    margin-top: 11px;
    padding: 0 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.highlight-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 9px currentColor;
}
.highlight-status-available {
    color: #72e2a4;
    background: rgba(52, 199, 123, .12);
}
.highlight-status-dev {
    color: #ffb25b;
    background: rgba(229, 130, 54, .13);
}
.highlight-status-locked {
    color: #ff9090;
    background: rgba(239, 68, 68, .12);
}
.card-status {
    min-height: 23px;
    margin-top: 0;
    padding: 0 9px;
    gap: 6px;
    font-size: 8.5px;
    white-space: nowrap;
}
.card-status::before { width: 6px; height: 6px; }
.version-status-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 2px 0 10px;
}
.version-status-row .version-state { margin: 0; }


/* v84 — official wolf logo across the site */
.brand-mark-logo {
    width: 38px;
    height: 38px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid rgba(229, 130, 54, .45);
    background: #0c1019;
    box-shadow: 0 0 16px rgba(239, 127, 45, .18);
}
.brand-mark-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-symbol-logo {
    font-size: 0 !important;
}
.about-symbol-logo img {
    display: block;
    height: 168px;
    width: auto;
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .5));
}
.about .about-card blockquote,
.about .about-meta { padding-right: 200px; }
.contact-logo {
    display: block;
    width: 86px;
    height: 86px;
    margin: 0 0 20px;
    overflow: hidden;
    border: 1px solid rgba(229, 130, 54, .4);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 28px rgba(239, 127, 45, .22);
}
@media (max-width: 760px) {
    .about-symbol-logo img { height: 108px; }
    .contact-logo { width: 70px; height: 70px; }
    .about .about-card blockquote,
    .about .about-meta { padding-right: 118px; }
}


/* v83 — JTX Prime logos on the Prime highlight card */
.highlight-icon-logo {
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    border-color: rgba(229, 130, 54, .45);
    background: #0c1019;
}
.highlight-icon-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.prime-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 34px;
    align-items: center;
}
.prime-main { min-width: 0; }
.prime-logo-figure { margin: 0; }
.prime-logo-figure img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 44px rgba(0, 0, 0, .5));
}
@media (max-width: 1120px) {
    .prime-layout { grid-template-columns: 1fr; gap: 10px; }
    .prime-logo-figure { order: -1; width: min(280px, 64vw); margin: 0 auto 8px; }
}


/* v81 — bigger lightbox media + zoom support */
.lightbox-stage {
    max-width: 96vw !important;
    max-height: 94vh !important;
}
.lightbox-media-frame img,
.lightbox-media-frame video {
    max-width: 92vw !important;
    max-height: 84vh !important;
}
.lightbox-media-frame img {
    touch-action: none;
    user-select: none;
    will-change: transform;
}
.lightbox-zoom-hint {
    margin: 5px 0 0;
    color: #6a7385;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-align: center;
    text-transform: uppercase;
}
.lightbox-zoom-hint[hidden] { display: none; }
@media (max-width: 760px) {
    .lightbox-zoom-hint { display: none; }
}


/* v57 — hero story text (multi-paragraph owner copy) */
.hero-story {
    display: grid;
    gap: 13px;
    max-width: 650px;
    margin: 28px 0 0;
}
.hero-story p {
    margin: 0;
    color: #a6adbc;
    font-size: 15px;
    line-height: 1.7;
}
.hero-story strong { color: #eef1f8; }
.hero-trust strong {
    color: var(--accent-2);
    letter-spacing: .02em;
}
.hero .hero-actions { margin-top: 30px; }
@media (max-width: 620px) {
    .hero-story p { font-size: 14px; line-height: 1.65; }
}


/* v58/v60 — full JTX story in About: one wide reading column, quote card as closing banner */
.about-layout { grid-template-columns: 1fr; gap: 44px; align-items: stretch; }
.about-copy { width: 100%; max-width: 840px; margin-inline: auto; }
.about-copy h2 { margin-bottom: 10px; max-width: none; }
.about-copy p:not(.eyebrow) { max-width: none; margin: 14px 0 0; font-size: 15.5px; }
.about-copy h3 {
    margin: 38px 0 2px;
    font-family: "Bahnschrift", "Segoe UI", Arial, sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.03em;
    color: #f2f5fb;
}
.about-copy strong { color: #eaeef7; }
.about-goal { margin-top: 16px !important; }
.about-goal strong { color: var(--accent-2); font-size: 17px; }
.hero-story-link { margin-top: 4px; }
.hero-story .hero-motto {
    color: #e9edf5;
    font-weight: 600;
}
.about .about-card {
    width: 100%;
    max-width: 840px;
    min-height: 0;
    margin-inline: auto;
    padding: 34px 38px;
}
.about .about-symbol {
    position: absolute;
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
    font-size: 112px;
    pointer-events: none;
}
.about .about-card blockquote {
    position: static;
    max-width: 600px;
    margin: 0 0 22px;
    font-size: clamp(22px, 2.7vw, 31px);
}
.about .about-meta { position: static; }
@media (max-width: 760px) {
    .about .about-symbol { right: 16px; font-size: 74px; }
    .about .about-card { padding: 26px 24px; }
    .about .about-card blockquote { max-width: 100%; }
}


/* v116 — compact, deliberately organized mobile experience */
.mobile-detail-toggle,
.mobile-about-toggle {
    display: none;
}

@media (max-width: 760px) {
    html { scroll-padding-top: 82px; }
    body { overflow-x: hidden; }
    .section-shell { width: calc(100% - 32px); }
    .section-space { padding-top: 68px !important; padding-bottom: 68px !important; }
    .site-header, .site-header.scrolled { width: calc(100% - 24px) !important; height: 58px !important; padding: 0 13px !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 16px !important; background: rgba(7,9,15,.90) !important; box-shadow: 0 12px 34px rgba(0,0,0,.28) !important; }
    .site-header { top: 10px !important; }
    .brand-mark-logo { width: 34px; height: 34px; }
    .brand-name { font-size: 12px; letter-spacing: .12em; }
    .main-nav { top: 76px; right: 0; left: 0; align-content: start; height: auto; max-height: calc(100dvh - 88px); gap: 2px; padding: 14px; overflow-y: auto; border-radius: 16px; background: rgba(7,9,15,.98); }
    .main-nav a { width: 100%; min-height: 42px; padding: 0 12px; border-radius: 9px; font-size: 12px; }
    .main-nav a:hover, .main-nav a:focus-visible { background: rgba(255,255,255,.055); }
    .nav-contact { justify-content: center; margin-top: 7px; }
    .hero { gap: 22px !important; padding-top: 88px !important; padding-bottom: 48px !important; }
    .hero-content { margin-top: 0 !important; padding: 24px 19px 20px !important; border-radius: 22px !important; }
    .hero h1 { max-width: 360px; font-size: clamp(43px,13.2vw,58px); line-height: .91; }
    .hero-story { gap: 10px; margin-top: 20px; }
    .hero-story p { font-size: 13.5px; line-height: 1.6; }
    .hero-story p:nth-child(2) { display: none; }
    .hero-story-link { min-height: 38px; margin-top: 1px; }
    .hero .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }
    .hero .button { min-height: 46px; padding-inline: 12px; font-size: 10px; }
    .hero-custom-note { margin-top: 14px; font-size: 11.5px; line-height: 1.55; }
    .hero-proof { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 17px; }
    .hero-proof div { gap: 3px; min-width: 0; padding: 10px 7px; border-radius: 12px; text-align: center; }
    .hero-proof strong { font-size: 19px; }
    .hero-proof span { font-size: 7px; line-height: 1.35; }
    .hero-visual { margin-top: 0 !important; }
    .visual-frame { border-radius: 16px; }
    .visual-frame img, .visual-frame video { aspect-ratio: 16 / 10; }
    .replace-note { margin: 8px auto 0; padding: 7px 12px; font-size: 9px; }
    .intro-strip { display: none; }
    .eyebrow { margin-bottom: 15px; font-size: 9px; }
    .section-heading { gap: 16px; margin-bottom: 28px; }
    .section-heading h2, .about h2, .contact h2, .worldwide h2 { font-size: clamp(32px,10.5vw,44px); line-height: 1; }
    .section-heading > p, .worldwide-copy > p:not(.eyebrow) { font-size: 13px; line-height: 1.65; }
    .highlight-grid, .roadmap-grid, .clients-grid, .versions-old .version-grid, .systems-list, .addons-grid, .showcase-grid { display: grid !important; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(82vw,1fr); align-items: start; gap: 12px !important; margin-right: -16px; padding-right: 16px; padding-bottom: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scroll-padding-inline: 1px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .highlight-grid::-webkit-scrollbar, .roadmap-grid::-webkit-scrollbar, .clients-grid::-webkit-scrollbar, .versions-old .version-grid::-webkit-scrollbar, .systems-list::-webkit-scrollbar, .addons-grid::-webkit-scrollbar, .showcase-grid::-webkit-scrollbar { display: none; }
    .highlight-card, .road-col, .client-group, .version-card, .system-row, .addon-card, .showcase-item { width: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
    .highlight-card { padding: 58px 19px 22px; border-radius: 18px; }
    .highlight-head { flex-direction: row; align-items: center; gap: 12px; margin-bottom: 16px; }
    .highlight-icon { width: 48px; height: 48px; border-radius: 13px; font-size: 12px; }
    .highlight-card h3 { font-size: 21px; }
    .highlight-sub { font-size: 8.5px; line-height: 1.45; }
    .highlight-status { min-height: 23px; padding-inline: 9px; font-size: 8px; }
    .highlight-copy { margin-bottom: 17px; font-size: 12.5px; line-height: 1.65; }
    .mobile-enhanced .highlight-card:not(.mobile-expanded) .highlight-copy { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
    .mobile-enhanced .highlight-card:not(.mobile-expanded) .highlight-points, .mobile-enhanced .highlight-card:not(.mobile-expanded) .prime-grid { display: none; }
    .highlight-points { gap: 8px; margin-bottom: 18px; }
    .highlight-points li { font-size: 12px; line-height: 1.5; }
    .prime-logo-figure { order: -1; width: 128px; margin: -8px auto 2px; }
    .prime-grid { gap: 8px; margin-bottom: 18px; }
    .prime-tier { padding: 15px; }
    .prime-tier h4 { font-size: 15px; }
    .highlight-media { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-bottom: 16px; }
    .highlight-media-single { grid-template-columns: 1fr; }
    .highlight-media-triple { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .highlight-media .addon-preview { min-width: 0; border-radius: 9px; }
    .highlight-media .video-play-icon { width: 42px; height: 42px; }
    .highlight-media .video-play-icon::before { border-top-width: 7px; border-bottom-width: 7px; border-left-width: 11px; }
    .highlight-media .video-play-text { display: none; }
    .mobile-detail-toggle, .mobile-about-toggle { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; min-height: 42px; margin: 0 0 12px; padding: 0 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; color: #dce1ea; font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.035); }
    .mobile-detail-toggle::after, .mobile-about-toggle::after { content: "+"; color: var(--accent-2); font-size: 17px; line-height: 1; }
    .mobile-expanded > .mobile-detail-toggle::after, .about-copy.mobile-expanded > .mobile-about-toggle::after { content: "−"; }
    .highlight-actions { margin-top: 0; }
    .highlight-actions .button { min-height: 44px; font-size: 9.5px; }
    .road-col { padding: 18px 16px; border-radius: 16px; }
    .road-col-head { margin-bottom: 12px; }
    .road-col-head h3 { font-size: 18px; }
    .road-col li { padding: 8px 10px; }
    .road-col li span { font-size: 11.5px; }
    .worldwide-layout { gap: 24px; }
    .worldwide-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 20px 0; }
    .worldwide-stats article { padding: 15px 13px; border-radius: 12px; }
    .worldwide-stats strong { margin-bottom: 4px; font-size: 22px; }
    .worldwide-stats span { font-size: 8.5px; line-height: 1.35; }
    .worldwide-panel { padding: 17px; border-radius: 17px; }
    .worldwide-panel-top { margin-bottom: 14px; padding-bottom: 13px; }
    .worldwide-kicker, .worldwide-count { font-size: 8.5px; }
    .country-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
    .country-grid span { min-height: 39px; padding: 6px 8px; font-size: 10.5px; line-height: 1.25; }
    .clients-summary { gap: 10px; margin: -4px 0 20px; padding: 14px; border-radius: 13px; }
    .clients-summary strong { font-size: 20px; }
    .clients-summary p { font-size: 9.5px; }
    .client-group { padding: 17px; border-radius: 15px; }
    .client-group-head { margin-bottom: 11px; padding-bottom: 11px; }
    .client-group h3 { font-size: 19px; }
    .client-list li { min-height: 34px; padding-block: 7px; font-size: 11.5px; }
    .versions-note { margin-top: 14px; font-size: 11px; }
    .versions-old .version-media img, .versions-old .version-media video { aspect-ratio: 16 / 9; }
    .feedback-card { min-height: 0; padding: 24px 19px 22px; }
    .feedback-head { gap: 12px; padding-bottom: 16px; }
    .feedback-author strong { font-size: 17px; }
    .feedback-quote { margin-top: 20px; font-size: 13px; line-height: 1.65; }
    .feedback-card.long .feedback-quote { -webkit-line-clamp: 7; }
    .system-row { position: relative; display: grid; grid-template-columns: 34px 1fr !important; align-content: start; min-height: 185px; padding: 18px 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(13,16,25,.70); }
    .system-row h3 { font-size: 17px; }
    .system-row p { font-size: 11.5px; line-height: 1.55; }
    .system-icon { position: absolute; right: 16px; bottom: 14px; font-size: 22px; }
    .addons-subhead { gap: 3px; margin: 26px 0 12px; }
    .addons-subhead h3 { font-size: 20px; }
    .addons-grid { grid-auto-columns: minmax(84vw,1fr); }
    .addon-card { min-height: 0; padding: 18px 16px; border-radius: 15px; }
    .addon-top { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
    .addon-top .highlight-status { margin-left: auto; }
    .addon-top .addon-type { flex-basis: 100%; text-align: left; }
    .addon-preview { margin-bottom: 14px; }
    .addon-card h3 { font-size: 20px; }
    .addon-card p { margin-bottom: 16px; font-size: 11.5px; line-height: 1.55; }
    .addon-card p:not(.addon-compat) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .addons-note { gap: 16px; margin-top: 16px; padding: 17px; border-radius: 14px; }
    .addons-note strong { font-size: 15px; }
    .showcase-grid { grid-auto-columns: minmax(86vw,1fr); }
    .showcase-item, .showcase-wide { grid-column: auto; min-height: 0; aspect-ratio: 16 / 10; border-radius: 15px; }
    .about-layout { gap: 24px; }
    .about-copy > p:not(.eyebrow) { margin-top: 13px; font-size: 13px; line-height: 1.68; }
    .about-copy > h3 { margin-top: 25px; font-size: 19px; }
    .mobile-enhanced .about-copy:not(.mobile-expanded) > h3, .mobile-enhanced .about-copy:not(.mobile-expanded) > h3 ~ p { display: none; }
    .about-copy .mobile-about-toggle { margin: 17px 0 0; }
    .about .about-card { padding: 22px 18px; border-radius: 18px; }
    .about .about-symbol { position: static; display: flex; justify-content: center; transform: none; margin-bottom: 6px; }
    .about-symbol-logo img { height: 92px; }
    .about .about-card blockquote, .about .about-meta { padding-right: 0; }
    .about .about-card blockquote { margin-bottom: 18px; font-size: 20px; text-align: center; }
    .about .about-meta { gap: 12px; font-size: 7.5px; }
    .contact-card { padding: 36px 19px; border-radius: 20px; }
    .contact-logo { width: 58px; height: 58px; margin: 0 auto 14px; }
    .contact-card > p:not(.eyebrow) { margin-top: 18px; font-size: 13px; line-height: 1.6; }
    .contact-actions { margin-top: 22px; }
    .site-footer { grid-template-columns: 1fr auto; gap: 12px; min-height: 0; padding-top: 24px; padding-bottom: 24px; }
    .site-footer p { display: none; }
    .site-footer > span { justify-self: end; }
}

@media (max-width: 380px) {
    .hero .hero-actions { grid-template-columns: 1fr; }
    .highlight-grid, .roadmap-grid, .clients-grid, .versions-old .version-grid, .systems-list, .addons-grid, .showcase-grid { grid-auto-columns: minmax(87vw,1fr); }
    .country-grid { grid-template-columns: 1fr; }
}


/* v120 — vertical mobile content + persistent section navigator */
.mobile-section-nav, .mobile-collection-toggle { display: none; }
@media (max-width: 760px) {
    .section-shell { width: auto; margin-left: 16px; margin-right: 46px; }
    .highlight-grid, .roadmap-grid, .clients-grid, .versions-old .version-grid, .systems-list, .addons-grid, .showcase-grid { display: grid !important; grid-template-columns: 1fr !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; align-items: stretch; gap: 12px !important; margin-right: 0; padding-right: 0; padding-bottom: 0; overflow: visible; scroll-snap-type: none; }
    .highlight-card, .road-col, .client-group, .version-card, .system-row, .addon-card, .showcase-item { width: auto; scroll-snap-align: none; scroll-snap-stop: normal; }
    .mobile-enhanced .mobile-collection.mobile-limit-2:not(.mobile-expanded-list) > :nth-child(n + 3), .mobile-enhanced .mobile-collection.mobile-limit-3:not(.mobile-expanded-list) > :nth-child(n + 4), .mobile-enhanced .mobile-collection.mobile-limit-4:not(.mobile-expanded-list) > :nth-child(n + 5) { display: none !important; }
    .mobile-collection-toggle { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; margin-top: 12px; padding: 0 15px; border: 1px solid rgba(229,130,54,.32); border-radius: 12px; color: #f2d2b2; font: inherit; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(135deg,rgba(229,130,54,.14),rgba(255,255,255,.025)); touch-action: manipulation; cursor: pointer; }
    .mobile-collection-toggle::after { content: "+"; color: var(--accent-2); font-size: 19px; line-height: 1; }
    .mobile-collection.mobile-expanded-list + .mobile-collection-toggle::after { content: "−"; }
    .mobile-detail-toggle, .mobile-about-toggle { position: relative; z-index: 5; pointer-events: auto; touch-action: manipulation; cursor: pointer; }
    .mobile-expanded .mobile-detail-toggle::after, .about-copy.mobile-expanded > .mobile-about-toggle::after { content: "−"; }
    .mobile-section-nav { position: fixed; top: 50%; right: 6px; z-index: 110; display: grid; gap: 3px; width: 38px; padding: 5px; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(7,9,15,.28); box-shadow: 0 14px 42px rgba(0,0,0,.20); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
    .mobile-section-nav a { position: relative; display: grid; place-items: center; width: 28px; height: 31px; border: 1px solid transparent; border-radius: 9px; color: rgba(213,219,230,.62); font-family: "Bahnschrift","Segoe UI",Arial,sans-serif; font-size: 12px; font-weight: 700; line-height: 1; background: rgba(255,255,255,.018); transition: color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease; }
    .mobile-section-nav a.active { color: #fff4e8; border-color: rgba(255,172,96,.55); background: linear-gradient(135deg,rgba(239,127,45,.74),rgba(172,67,26,.62)); box-shadow: 0 0 18px rgba(239,127,45,.24); transform: scale(1.07); }
    .mobile-section-nav a.active::before { position: absolute; top: 50%; right: 37px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.10); border-radius: 8px; content: attr(data-label); transform: translateY(-50%); color: #f1f3f7; font-family: "Segoe UI",Arial,sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .06em; line-height: 1; text-transform: uppercase; white-space: nowrap; background: rgba(7,9,15,.82); pointer-events: none; }
}
@media (max-width: 380px) {
    .section-shell { margin-left: 14px; margin-right: 39px; }
    .mobile-section-nav { right: 4px; width: 34px; padding: 4px; border-radius: 14px; }
    .mobile-section-nav a { width: 26px; height: 29px; font-size: 11px; }
    .mobile-section-nav a.active::before { right: 33px; }
}
@media (max-width: 760px) and (max-height: 520px) {
    .mobile-section-nav { gap: 1px; width: 34px; padding: 4px; }
    .mobile-section-nav a { width: 26px; height: 25px; font-size: 10px; }
    .mobile-section-nav a.active::before { right: 33px; }
}
@media (min-width: 761px) {
    .mobile-section-nav { position: fixed; top: 50%; right: 10px; z-index: 110; display: grid; gap: 4px; width: 42px; padding: 6px; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.09); border-radius: 17px; background: rgba(7,9,15,.24); box-shadow: 0 16px 46px rgba(0,0,0,.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .mobile-section-nav a { position: relative; display: grid; place-items: center; width: 30px; height: 32px; border: 1px solid transparent; border-radius: 9px; color: rgba(213,219,230,.58); font-family: "Bahnschrift","Segoe UI",Arial,sans-serif; font-size: 12px; font-weight: 700; line-height: 1; background: rgba(255,255,255,.018); transition: color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease; }
    .mobile-section-nav a:hover, .mobile-section-nav a:focus-visible { color: #fff; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
    .mobile-section-nav a.active { color: #fff4e8; border-color: rgba(255,172,96,.58); background: linear-gradient(135deg,rgba(239,127,45,.78),rgba(172,67,26,.66)); box-shadow: 0 0 20px rgba(239,127,45,.27); transform: scale(1.08); }
    .mobile-section-nav a::before { position: absolute; top: 50%; right: 40px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.10); border-radius: 8px; content: attr(data-label); opacity: 0; visibility: hidden; transform: translate(5px,-50%); color: #f1f3f7; font-family: "Segoe UI",Arial,sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .07em; line-height: 1; text-transform: uppercase; white-space: nowrap; background: rgba(7,9,15,.88); box-shadow: 0 10px 30px rgba(0,0,0,.24); pointer-events: none; transition: opacity .18s ease,visibility .18s ease,transform .18s ease; }
    .mobile-section-nav a:hover::before, .mobile-section-nav a:focus-visible::before, .mobile-section-nav a.active::before { opacity: 1; visibility: visible; transform: translate(0,-50%); }
}

/* v124 — compact collapsible navigator on phones */
.mobile-section-nav-toggle { display: none; }
@media (max-width: 760px) {
    .section-shell { width: auto; margin-left: 16px; margin-right: 16px; }
    .mobile-section-nav { top: auto; right: 8px; bottom: 18px; gap: 3px; width: 38px; max-height: calc(100dvh - 100px); padding: 5px; transform: none; overflow-y: auto; background: rgba(7,9,15,.42); scrollbar-width: none; transition: background .2s ease,box-shadow .2s ease; }
    .mobile-section-nav::-webkit-scrollbar { display: none; }
    .mobile-section-nav.open { background: rgba(7,9,15,.88); box-shadow: 0 18px 54px rgba(0,0,0,.38); }
    .mobile-section-nav:not(.open) a:not(.active) { display: none; }
    .mobile-section-nav a.active::before { display: none; }
    .mobile-section-nav-toggle { display: grid; place-items: center; width: 28px; height: 31px; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: #f1f3f7; font-size: 17px; line-height: 1; background: rgba(255,255,255,.055); cursor: pointer; touch-action: manipulation; }
    .mobile-section-nav-toggle span { transition: transform .2s ease; }
    .mobile-section-nav-toggle[aria-expanded="true"] span { transform: rotate(90deg); }
}
@media (max-width: 380px) {
    .section-shell { margin-left: 14px; margin-right: 14px; }
    .mobile-section-nav { right: 6px; bottom: 14px; }
}

/* v126 — DirectX 11 + Prime Performance package callout */
.highlight-bundle { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; margin: 0 0 24px; padding: 15px 17px; border: 1px solid rgba(229,130,54,.30); border-radius: 13px; background: linear-gradient(135deg,rgba(229,130,54,.12),rgba(255,255,255,.025)); }
.highlight-bundle > span { color: #ffc487; font-size: 9px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; white-space: nowrap; }
.highlight-bundle > strong { color: #f3f5f9; font-size: 13px; line-height: 1.4; }
.highlight-bundle > small { color: #929aaa; font-size: 10.5px; line-height: 1.4; text-align: right; }
@media (max-width: 760px) {
    .highlight-bundle { grid-template-columns: 1fr; gap: 6px; margin-bottom: 17px; padding: 13px; }
    .highlight-bundle > strong { font-size: 12px; }
    .highlight-bundle > small { font-size: 10px; text-align: left; }
}

.performance-video-note { display: flex; align-items: center; gap: 10px; margin: -10px 0 22px; color: #aab2c1; font-size: 11px; line-height: 1.5; }
.performance-video-note > span { flex: 0 0 auto; padding: 5px 8px; border: 1px solid rgba(229,130,54,.30); border-radius: 999px; color: #ffc487; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(229,130,54,.08); }
@media (max-width: 760px) {
    .performance-video-note { align-items: flex-start; flex-direction: column; gap: 7px; margin: -5px 0 17px; font-size: 10.5px; }
}