/* === site.css === */
:root {
    --bg: #030405;
    --bg-soft: #080a0d;
    --panel: #0c0f14;
    --panel-2: #11151b;
    --text: #f4f3ef;
    --muted: #a5a8ad;
    --line: rgba(255,255,255,.12);
    --line-strong: rgba(255,255,255,.22);
    --gold: #ba9852;
    --gold-light: #d7bd82;
    --blue: #235fd6;
    --max: 1440px;
    --header-h: 92px;
    --ease: cubic-bezier(.2,.75,.25,1);
    --font-cn: "HarmonyOS Sans SC","Microsoft YaHei UI","PingFang SC","Noto Sans CJK SC",Arial,sans-serif;
    --font-en: "Bebas Neue","Arial Narrow","Roboto Condensed",Arial,sans-serif;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    background: var(--bg);
    color-scheme: dark
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-cn);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden
}

body.menu-open,body.search-open {
    overflow: hidden
}

a {
    color: inherit;
    text-decoration: none
}

button,input,textarea,select {
    font: inherit
}

button {
    color: inherit
}

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

::selection {
    background: var(--gold);
    color: #050505
}

.container {
    width: min(calc(100% - 64px),var(--max));
    margin-inline:auto}

.section {
    position: relative;
    padding: 130px 0
}

.section-tight {
    padding: 88px 0
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: var(--gold-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase
}

.eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor
}

.display {
    margin: 0;
    font-size: clamp(52px,7.1vw,118px);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .92
}

.title {
    margin: 0;
    font-size: clamp(38px,4.8vw,76px);
    font-weight: 780;
    letter-spacing: -.045em;
    line-height: 1.04
}

.title-sm {
    margin: 0;
    font-size: clamp(30px,3.5vw,54px);
    font-weight: 760;
    letter-spacing: -.035em;
    line-height: 1.12
}

.lead {
    max-width: 720px;
    margin: 24px 0 0;
    color: #c7c9cc;
    font-size: clamp(17px,1.45vw,22px);
    line-height: 1.8
}

.gold {
    color: var(--gold-light)
}

.muted {
    color: var(--muted)
}

.kicker {
    font-family: var(--font-en);
    letter-spacing: .12em;
    text-transform: uppercase
}

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 24px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(8,9,11,.34);
    color: #fff;
    font-weight: 700;
    letter-spacing: .04em;
    overflow: hidden;
    transition: border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease)
}

.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gold);
    transform: translateY(102%);
    transition: transform .38s var(--ease);
    z-index: -1
}

.btn:hover {
    color: #080706;
    border-color: var(--gold);
    transform: translateY(-2px)
}

.btn:hover::before {
    transform: translateY(0)
}

.btn.primary {
    border-color: var(--gold);
    background: var(--gold);
    color: #080706
}

.btn.primary::before {
    background: #f2ede2
}

.btn.ghost {
    border-color: transparent;
    background: transparent;
    padding-inline:0;border-radius: 0
}

.btn.ghost::after {
    content: "↗";
    font-size: 18px;
    transition: transform .3s var(--ease)
}

.btn.ghost:hover {
    color: var(--gold-light);
    transform: none
}

.btn.ghost:hover::before {
    display: none
}

.btn.ghost:hover::after {
    transform: translate(4px,-4px)
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #fff;
    transition: color .3s var(--ease),transform .3s var(--ease)
}

.icon-btn:hover {
    color: var(--gold);
    transform: translateY(-1px)
}

.icon-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8
}

/* Header */
.site-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-h);
    transition: background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)
}

.site-header::after {
    content: "";
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
    opacity: 0;
    transition: opacity .4s
}

.site-header.scrolled {
    background: rgba(3,4,5,.79);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px)
}

.site-header.scrolled::after {
    opacity: 1
}

.header-inner {
    height: 100%;
    width: min(calc(100% - 70px),1500px);
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 82px 1fr;
    align-items: center;
    gap: 30px
}

.nav-group {
    display: flex;
    align-items: center;
    gap: clamp(22px,3vw,56px);
    min-width: 0
}

.nav-group.right {
    justify-content: flex-end;
    gap: clamp(18px,2.2vw,40px)
}

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    color: #fff;
    font-size: 14px;
    font-weight: 690;
    letter-spacing: .025em;
    transition: color .3s var(--ease)
}

.nav-link::before {
    content: "";
    width: 10px;
    height: 10px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg) skew(-7deg);
    opacity: .48;
    transition: transform .3s var(--ease),opacity .3s var(--ease)
}

.nav-link:hover,.nav-link.active {
    color: var(--gold-light)
}

.nav-link:hover::before {
    opacity: 1;
    transform: rotate(45deg) skew(-7deg) translate(2px,-2px)
}

.nav-link.simple::before {
    display: none
}

.header-logo {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 64px;
    margin: auto;
    cursor: pointer
}

.logo-mask {
    display: block;
    background: currentColor;
    transition: color .35s var(--ease),transform .35s var(--ease);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain
}

.logo-mark {
    width: 56px;
    height: 42px;
    color: #fff;
    -webkit-mask-image: url('../images/brand-v7/brand-mark-v7-white.svg');
    mask-image: url('../images/brand-v7/brand-mark-v7-white.svg')
}

.header-logo:hover .logo-mark {
    color: var(--gold);
    transform: scale(1.06)
}

.header-utility {
    display: flex;
    align-items: center;
    gap: 5px
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: color .3s
}

.lang-btn:hover {
    color: var(--gold-light)
}

.lang-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6
}

.mobile-toggle {
    display: none
}

/* intro */
.intro-screen {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: grid;
    place-items: center;
    background: #000;
    transition: opacity .8s var(--ease),visibility .8s
}

.intro-screen.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.intro-center {
    position: relative;
    width: min(76vw,720px);
    height: 180px;
    display: grid;
    place-items: center
}

.intro-wordmark {
    width: min(74vw,650px);
    height: 112px;
    color: var(--gold);
    -webkit-mask-image: url('../images/brand-v7/brand-wordmark-v7-gold.svg');
    mask-image: url('../images/brand-v7/brand-wordmark-v7-gold.svg');
    clip-path: inset(0 100% 0 0);
    animation: introReveal 1.35s .32s var(--ease) forwards
}

.intro-line {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 16px;
    height: 1px;
    background: linear-gradient(90deg,transparent,var(--gold),transparent);
    transform: scaleX(0);
    animation: introLine 1.15s .45s var(--ease) forwards
}

.intro-sub {
    position: absolute;
    bottom: -20px;
    color: rgba(255,255,255,.62);
    font-size: 10px;
    letter-spacing: .42em;
    text-transform: uppercase;
    opacity: 0;
    animation: introSub .8s 1.15s forwards
}

@keyframes introReveal {
    to {
        clip-path: inset(0 0 0 0)
    }
}

@keyframes introLine {
    to {
        transform: scaleX(1)
    }
}

@keyframes introSub {
    to {
        opacity: 1
    }
}

/* Hero */
.hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    background: #020203
}

.hero-media {
    position: absolute;
    inset: 0
}

.hero-media video,.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.hero-media video {
    filter: saturate(.78) contrast(1.08) brightness(.72);
    transform: scale(1.015)
}

.hero-media::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.18) 47%,rgba(0,0,0,.48) 100%),linear-gradient(0deg,rgba(0,0,0,.7) 0%,transparent 42%,rgba(0,0,0,.2) 100%)
}

.hero-media::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size: 90px 90px;
    mask-image: linear-gradient(to bottom,transparent 10%,#000 70%,transparent)
}

.hero-inner {
    position: relative;
    z-index: 3;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    padding-top: var(--header-h);
    padding-bottom: 72px
}

.hero-copy {
    width: min(760px,75vw)
}

.hero-copy h1 {
    margin: 0;
    font-size: clamp(46px,6.2vw,94px);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1.02;
    text-wrap: balance
}

.hero-copy h1 span {
    display: block;
    color: var(--gold-light)
}

.hero-copy p {
    max-width: 620px;
    margin: 24px 0 0;
    color: rgba(255,255,255,.74);
    font-size: 17px;
    line-height: 1.8
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 34px;
    flex-wrap: wrap
}

.hero-meta {
    position: absolute;
    z-index: 3;
    right: max(32px,calc((100vw - var(--max))/2));
    bottom: 78px;
    text-align: right
}

.hero-meta strong {
    display: block;
    font-family: var(--font-en);
    font-size: 34px;
    letter-spacing: .1em;
    line-height: 1;
    color: #fff
}

.hero-meta span {
    display: block;
    margin-top: 10px;
    color: var(--gold-light);
    font-size: 11px;
    letter-spacing: .32em;
    text-transform: uppercase
}

.scroll-cue {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(-50%);
    color: rgba(255,255,255,.55);
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase
}

.scroll-cue::after {
    content: "";
    width: 64px;
    height: 1px;
    background: linear-gradient(90deg,var(--gold),transparent);
    animation: scrollPulse 1.7s infinite
}

@keyframes scrollPulse {
    0%,100% {
        opacity: .3;
        transform: scaleX(.45);
        transform-origin: left
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
        transform-origin: left
    }
}

/* home blocks */
.manifesto {
    background: radial-gradient(circle at 75% 50%,rgba(32,67,138,.15),transparent 34%),#050607;
    overflow: hidden
}

.manifesto::before {
    content: "WEKYPSYR";
    position: absolute;
    right: -2vw;
    bottom: -.2em;
    color: rgba(255,255,255,.022);
    font-family: var(--font-en);
    font-size: 23vw;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.05em;
    white-space: nowrap
}

.manifesto-grid {
    display: grid;
    grid-template-columns: .65fr 1.35fr;
    gap: 8vw;
    align-items: start
}

.manifesto-index {
    color: var(--gold);
    font-family: var(--font-en);
    font-size: 14px;
    letter-spacing: .25em
}

.manifesto-copy p {
    margin: 0;
    font-size: clamp(36px,5.4vw,80px);
    font-weight: 700;
    line-height: 1.17;
    letter-spacing: -.04em;
    text-wrap: balance
}

.manifesto-copy p span {
    color: #64676c
}

.manifesto-note {
    max-width: 630px;
    margin: 48px 0 0;
    color: #a9adb2;
    font-size: 17px
}

.feature-product {
    overflow: hidden;
    background: linear-gradient(180deg,#050607,#090b0e)
}

.feature-product::after {
    content: "S—01";
    position: absolute;
    right: -.03em;
    top: 42%;
    transform: translateY(-50%);
    font-family: var(--font-en);
    font-size: 24vw;
    font-weight: 900;
    line-height: .8;
    color: rgba(255,255,255,.025);
    letter-spacing: -.06em
}

.feature-grid {
    display: grid;
    grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
    gap: 5vw;
    align-items: center
}

.feature-copy {
    position: relative;
    z-index: 2
}

.feature-specs {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 1px;
    margin-top: 42px;
    background: var(--line)
}

.mini-spec {
    padding: 21px;
    background: #07090c
}

.mini-spec strong {
    display: block;
    font-family: var(--font-en);
    font-size: clamp(29px,3vw,46px);
    line-height: 1;
    color: #fff;
    letter-spacing: .01em
}

.mini-spec span {
    display: block;
    margin-top: 8px;
    color: #858a90;
    font-size: 12px;
    letter-spacing: .08em
}

.product-stage {
    position: relative;
    z-index: 1;
    min-height: 650px;
    display: grid;
    place-items: center
}

.product-stage::before {
    content: "";
    position: absolute;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(58,91,160,.22),transparent 66%);
    filter: blur(20px)
}

.product-stage::after {
    content: "";
    position: absolute;
    bottom: 8%;
    width: 76%;
    height: 8%;
    border-radius: 50%;
    background: rgba(0,0,0,.75);
    filter: blur(28px)
}

.product-stage img {
    position: relative;
    z-index: 2;
    width: min(93%,760px);
    filter: drop-shadow(0 35px 34px rgba(0,0,0,.55));
    transition: transform .8s var(--ease)
}

.feature-product:hover .product-stage img {
    transform: translateY(-10px) rotate(-1deg)
}

.gold-ring {
    position: absolute;
    width: 62%;
    aspect-ratio: 1;
    border: 1px solid rgba(186,152,82,.3);
    border-radius: 50%;
    animation: ringSpin 18s linear infinite
}

.gold-ring::before,.gold-ring::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    inset: 9%;
    border: 1px dashed rgba(186,152,82,.12)
}

.gold-ring::after {
    inset: 24%;
    border-style: solid
}

@keyframes ringSpin {
    to {
        transform: rotate(360deg)
    }
}

.products-showcase {
    background: #050607
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 56px
}

.product-card-grid {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    gap: 18px
}

.product-card {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: radial-gradient(circle at 75% 25%,rgba(43,75,139,.18),transparent 38%),linear-gradient(145deg,#0b0d11,#050607);
    transition: border-color .4s var(--ease),transform .4s var(--ease)
}

.product-card:nth-child(1) {
    grid-column: span 7
}

.product-card:nth-child(2) {
    grid-column: span 5
}

.product-card:nth-child(3) {
    grid-column: span 5;
    min-height: 480px
}

.product-card:nth-child(4) {
    grid-column: span 7;
    min-height: 480px
}

.product-card:hover {
    transform: translateY(-5px);
    border-color: rgba(186,152,82,.55)
}

.product-card-content {
    position: absolute;
    z-index: 2;
    left: 34px;
    top: 32px
}

.product-card-content h3 {
    margin: 0;
    font-size: clamp(27px,2.5vw,42px);
    line-height: 1.1
}

.product-card-content p {
    margin: 10px 0 0;
    color: #90949a
}

.product-card-image {
    position: absolute;
    inset: 14% 0 -2% 22%;
    display: grid;
    place-items: center
}

.product-card-image img {
    width: 88%;
    max-height: 86%;
    object-fit: contain;
    filter: drop-shadow(0 24px 32px rgba(0,0,0,.45));
    transition: transform .6s var(--ease)
}

.product-card:hover .product-card-image img {
    transform: scale(1.04) translateY(-5px)
}

.product-card .card-arrow {
    position: absolute;
    z-index: 3;
    right: 28px;
    bottom: 28px;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    font-size: 24px;
    transition: .35s var(--ease)
}

.product-card:hover .card-arrow {
    background: var(--gold);
    border-color: var(--gold);
    color: #080706;
    transform: rotate(45deg)
}

.product-card .edition {
    position: absolute;
    left: 34px;
    bottom: 32px;
    color: var(--gold-light);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase
}

.product-card.light {
    background: radial-gradient(circle at 60% 30%,rgba(255,255,255,.12),transparent 38%),linear-gradient(145deg,#111318,#08090c)
}

.tech-banner {
    position: relative;
    min-height: 780px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #020305
}

.tech-banner-media {
    position: absolute;
    inset: 0
}

.tech-banner-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .76
}

.tech-banner-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(0,0,0,.93),rgba(0,0,0,.48) 50%,rgba(0,0,0,.58))
}

.tech-banner-copy {
    position: relative;
    z-index: 2;
    max-width: 620px
}

.tech-banner-copy .metric {
    display: flex;
    align-items: end;
    gap: 12px;
    margin-top: 45px
}

.metric strong {
    font-family: var(--font-en);
    font-size: clamp(70px,9vw,140px);
    line-height: .75;
    color: var(--gold-light)
}

.metric span {
    font-size: 20px;
    color: #d5d6d8
}

.media-wall {
    background: #06070a
}

.media-wall-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 20px
}

.media-tile {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid var(--line);
    min-height: 500px;
    background: #080a0d
}

.media-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease)
}

.media-tile:hover img {
    transform: scale(1.025)
}

.media-tile.small {
    min-height: 240px
}

.media-stack {
    display: grid;
    gap: 20px
}

.media-caption {
    position: absolute;
    z-index: 2;
    left: 26px;
    bottom: 24px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(10px);
    font-size: 12px;
    letter-spacing: .08em
}

.brand-cta {
    overflow: hidden;
    background: linear-gradient(140deg,#0a0b0e,#020304)
}

.brand-cta::after {
    content: "";
    position: absolute;
    right: -10%;
    top: -30%;
    width: 58%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(186,152,82,.16),transparent 60%);
    filter: blur(20px)
}

.brand-cta-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 8vw;
    align-items: center
}

.brand-cta-mark {
    width: min(100%,420px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin-left: auto;
    border: 1px solid rgba(186,152,82,.25);
    border-radius: 50%;
    position: relative
}

.brand-cta-mark::before,.brand-cta-mark::after {
    content: "";
    position: absolute;
    inset: 11%;
    border: 1px dashed rgba(186,152,82,.18);
    border-radius: 50%;
    animation: ringSpin 28s linear infinite reverse
}

.brand-cta-mark::after {
    inset: 25%;
    animation-direction: normal
}

.brand-cta-mark .logo-mark {
    width: 48%;
    height: 40%;
    color: var(--gold)
}

/* General page hero */
.page-hero {
    position: relative;
    min-height: 72svh;
    padding-top: var(--header-h);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: radial-gradient(circle at 75% 40%,rgba(38,68,128,.22),transparent 38%),#050607
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size: 92px 92px;
    mask-image: linear-gradient(to bottom,transparent,#000)
}

.page-hero .container {
    position: relative;
    z-index: 2;
    padding-bottom: 76px
}

.page-hero-watermark {
    position: absolute;
    right: -.02em;
    bottom: -.12em;
    font-family: var(--font-en);
    font-size: 24vw;
    font-weight: 900;
    line-height: .8;
    letter-spacing: -.07em;
    color: rgba(255,255,255,.028);
    white-space: nowrap
}

.breadcrumb {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-bottom: 22px;
    color: #90949a;
    font-size: 12px;
    letter-spacing: .08em
}

.breadcrumb a:hover {
    color: var(--gold-light)
}

.breadcrumb span {
    color: #555a60
}

/* products page */
.product-filter {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 44px
}

.filter-btn {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 18px;
    background: transparent;
    color: #a9adb2;
    cursor: pointer;
    transition: .3s
}

.filter-btn:hover,.filter-btn.active {
    color: #080706;
    border-color: var(--gold);
    background: var(--gold)
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px
}

.catalog-card {
    position: relative;
    min-height: 620px;
    border: 1px solid var(--line);
    border-radius: 25px;
    overflow: hidden;
    background: linear-gradient(145deg,#0c0f13,#060709);
    transition: .4s var(--ease)
}

.catalog-card:hover {
    border-color: rgba(186,152,82,.52);
    transform: translateY(-4px)
}

.catalog-card.is-hidden {
    display: none
}

.catalog-meta {
    position: absolute;
    z-index: 2;
    left: 32px;
    top: 30px
}

.catalog-meta .series {
    color: var(--gold-light);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase
}

.catalog-meta h2 {
    margin: 8px 0 0;
    font-size: 38px;
    letter-spacing: -.035em
}

.catalog-meta p {
    margin: 8px 0 0;
    color: #94989d
}

.catalog-image {
    position: absolute;
    inset: 14% 3% 6%;
    display: grid;
    place-items: center
}

.catalog-image img {
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 30px 32px rgba(0,0,0,.55));
    transition: transform .6s var(--ease)
}

.catalog-card:hover .catalog-image img {
    transform: scale(1.035)
}

.catalog-footer {
    position: absolute;
    z-index: 2;
    left: 32px;
    right: 32px;
    bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #aeb1b6
}

.catalog-footer strong {
    color: #fff;
    font-size: 13px
}

.catalog-footer span {
    font-size: 22px;
    color: var(--gold-light)
}

/* product detail */
.product-detail-hero {
    position: relative;
    min-height: 100svh;
    padding-top: var(--header-h);
    overflow: hidden;
    background: radial-gradient(circle at 65% 40%,rgba(45,77,142,.19),transparent 36%),#040506
}

.product-detail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
    background-size: 110px 110px;
    mask-image: linear-gradient(to bottom,transparent 5%,#000 80%)
}

.product-detail-grid {
    position: relative;
    z-index: 2;
    min-height: calc(100svh - var(--header-h));
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    align-items: center;
    gap: 4vw;
    padding: 80px 0 70px
}

.product-detail-copy h1 {
    margin: 0;
    font-size: clamp(58px,8vw,126px);
    font-family: var(--font-en);
    line-height: .8;
    letter-spacing: .035em
}

.product-detail-copy .cn-name {
    margin-top: 24px;
    font-size: clamp(24px,2.5vw,38px);
    font-weight: 750
}

.product-detail-copy p {
    max-width: 520px;
    margin: 20px 0 0;
    color: #aeb1b5;
    font-size: 17px
}

.product-detail-stage {
    position: relative;
    min-height: 680px;
    display: grid;
    place-items: center
}

.product-detail-stage::before {
    content: "";
    position: absolute;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(186,152,82,.2);
    box-shadow: 0 0 120px rgba(25,55,115,.18) inset
}

.product-detail-stage img {
    position: relative;
    z-index: 2;
    width: min(95%,820px);
    max-height: 760px;
    object-fit: contain;
    filter: drop-shadow(0 48px 46px rgba(0,0,0,.68));
    transition: opacity .35s,transform .6s var(--ease)
}

.product-detail-stage img.switching {
    opacity: 0;
    transform: scale(.97)
}

.color-switch {
    display: flex;
    gap: 12px;
    margin-top: 32px
}

.swatch {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: #a8abb0;
    cursor: pointer;
    transition: .3s
}

.swatch.active,.swatch:hover {
    border-color: var(--gold);
    color: #fff
}

.swatch i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.3);
    background: #0c0c0c
}

.swatch[data-color="white"] i {
    background: #e7e7e5
}

.product-floating-specs {
    position: absolute;
    right: 0;
    bottom: 52px;
    display: flex;
    gap: 30px
}

.float-spec strong {
    display: block;
    font-family: var(--font-en);
    font-size: 34px;
    color: #fff;
    line-height: 1
}

.float-spec span {
    display: block;
    margin-top: 8px;
    color: #777c82;
    font-size: 10px;
    letter-spacing: .12em
}

.product-intro-band {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 6vw;
    align-items: start
}

.product-intro-band .copy {
    position: sticky;
    top: 130px
}

.product-intro-band .copy p {
    color: #a6aab0;
    font-size: 17px
}

.feature-image-stack {
    display: grid;
    gap: 24px
}

.feature-shot {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #080a0d
}

.feature-shot img {
    width: 100%;
    height: auto
}

.feature-shot-caption {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    color: #9da1a6;
    font-size: 12px
}

.feature-shot-caption strong {
    color: #fff
}

.detail-media-full {
    position: relative;
    min-height: 780px;
    overflow: hidden;
    background: #020305
}

.detail-media-full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0
}

.detail-media-full::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(0,0,0,.72),transparent 50%,rgba(0,0,0,.1))
}

.detail-media-copy {
    position: relative;
    z-index: 2;
    min-height: 780px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(620px,46vw)
}

.detail-media-copy p {
    color: #d0d2d5;
    font-size: 18px;
    line-height: 1.8
}

.spec-section {
    background: #060709
}

.spec-layout {
    display: grid;
    grid-template-columns: .52fr 1.48fr;
    gap: 6vw;
    align-items: start
}

.spec-sticky {
    position: sticky;
    top: 130px
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--line-strong)
}

.spec-table tr {
    border-bottom: 1px solid var(--line)
}

.spec-table th,.spec-table td {
    padding: 17px 14px;
    text-align: left;
    vertical-align: top
}

.spec-table th {
    width: 34%;
    color: #7f848a;
    font-size: 13px;
    font-weight: 550
}

.spec-table td {
    color: #e4e5e6
}

.spec-group td {
    padding-top: 34px;
    color: var(--gold-light);
    font-weight: 750;
    letter-spacing: .08em
}

/* support/about/contact */
.support-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px
}

.support-card {
    min-height: 330px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: linear-gradient(145deg,#0d1014,#07080a);
    display: flex;
    flex-direction: column;
    transition: .4s var(--ease)
}

.support-card:hover {
    border-color: rgba(186,152,82,.5);
    transform: translateY(-4px)
}

.support-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(186,152,82,.36);
    border-radius: 16px;
    color: var(--gold-light)
}

.support-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6
}

.support-card h3 {
    margin: 28px 0 0;
    font-size: 26px
}

.support-card p {
    margin: 12px 0 25px;
    color: #93979c
}

.support-card .btn {
    margin-top: auto;
    align-self: flex-start
}

.download-list {
    border-top: 1px solid var(--line)
}

.download-row {
    display: grid;
    grid-template-columns: 1.1fr .7fr .7fr auto;
    gap: 20px;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--line)
}

.download-row strong {
    font-size: 18px
}

.download-row span {
    color: #858a90;
    font-size: 13px
}

.download-btn {
    color: var(--gold-light);
    font-weight: 700
}

.download-btn:hover {
    color: #fff
}

.faq-list {
    max-width: 980px
}

.faq-item {
    border-bottom: 1px solid var(--line)
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 23px 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-weight: 700;
    cursor: pointer
}

.faq-question span:last-child {
    color: var(--gold-light);
    font-size: 20px;
    transition: transform .3s
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s var(--ease)
}

.faq-answer>div {
    overflow: hidden;
    color: #969ba0
}

.faq-answer p {
    margin: 0;
    padding: 0 0 24px;
    max-width: 760px
}

.faq-item.open .faq-answer {
    grid-template-rows: 1fr
}

.faq-item.open .faq-question span:last-child {
    transform: rotate(45deg)
}

.about-statement {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 7vw
}

.about-statement blockquote {
    margin: 0;
    font-size: clamp(39px,5.5vw,82px);
    font-weight: 780;
    line-height: 1.13;
    letter-spacing: -.045em
}

.about-statement blockquote em {
    font-style: normal;
    color: var(--gold-light)
}

.about-copy {
    padding-top: 12px;
    color: #a9adb2;
    font-size: 17px
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.value-card {
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #080a0d
}

.value-card .num {
    color: var(--gold);
    font-family: var(--font-en);
    font-size: 13px;
    letter-spacing: .2em
}

.value-card h3 {
    margin: 70px 0 0;
    font-size: 30px
}

.value-card p {
    color: #92979c
}

.contact-grid {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 8vw
}

.contact-channels {
    display: grid;
    gap: 1px;
    background: var(--line)
}

.contact-channel {
    padding: 24px;
    background: #07090b
}

.contact-channel span {
    display: block;
    color: #73787e;
    font-size: 11px;
    letter-spacing: .14em
}

.contact-channel strong {
    display: block;
    margin-top: 7px;
    font-size: 18px
}

.contact-form {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px
}

.field {
    display: grid;
    gap: 8px
}

.field.full {
    grid-column: 1/-1
}

.field label {
    color: #8e9398;
    font-size: 12px
}

.field input,.field textarea,.field select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #080a0d;
    color: #fff;
    padding: 14px 16px;
    outline: none;
    transition: border-color .3s
}

.field textarea {
    min-height: 150px;
    resize: vertical
}

.field input:focus,.field textarea:focus,.field select:focus {
    border-color: var(--gold)
}

.form-note {
    grid-column: 1/-1;
    color: #757a80;
    font-size: 12px
}

.form-message {
    grid-column: 1/-1;
    color: var(--gold-light);
    display: none
}

.form-message.show {
    display: block
}

/* search + mobile */
.search-overlay {
    position: fixed;
    z-index: 4000;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16vh 30px 40px;
    background: rgba(0,0,0,.91);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transition: .4s var(--ease)
}

.search-open .search-overlay {
    opacity: 1;
    visibility: visible
}

.search-box {
    width: min(900px,100%)
}

.search-top {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--line-strong)
}

.search-top input {
    flex: 1;
    border: 0;
    background: transparent;
    color: #fff;
    padding: 20px 0;
    font-size: clamp(28px,4vw,54px);
    outline: none;
    font-weight: 720
}

.search-results {
    display: grid;
    gap: 1px;
    margin-top: 24px;
    background: var(--line)
}

.search-result {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    background: #060709;
    transition: .3s
}

.search-result:hover {
    background: #101318;
    color: var(--gold-light)
}

.search-result small {
    color: #777c82
}

.search-empty {
    padding: 20px;
    color: #7e8389
}

.mobile-menu {
    position: fixed;
    z-index: 3500;
    inset: 0;
    background: #030405;
    display: grid;
    align-content: center;
    padding: 110px 30px 50px;
    transform: translateX(100%);
    transition: transform .55s var(--ease)
}

.menu-open .mobile-menu {
    transform: translateX(0)
}

.mobile-menu nav {
    display: grid;
    gap: 9px
}

.mobile-menu a {
    font-size: clamp(32px,9vw,54px);
    font-weight: 760;
    letter-spacing: -.04em;
    line-height: 1.25;
    transition: color .3s
}

.mobile-menu a:hover {
    color: var(--gold-light)
}

.mobile-menu-footer {
    margin-top: 42px;
    color: #777b80;
    font-size: 12px;
    letter-spacing: .1em
}

/* footer */
.site-footer {
    background: #020304;
    border-top: 1px solid var(--line)
}

.footer-main {
    padding: 78px 0 54px;
    display: grid;
    grid-template-columns: 1.35fr repeat(3,.65fr);
    gap: 6vw
}

.footer-brand .logo-mask {
    width: 220px;
    height: 58px;
    color: var(--gold);
    -webkit-mask-image: url('../images/brand-v7/brand-wordmark-v7-gold.svg');
    mask-image: url('../images/brand-v7/brand-wordmark-v7-gold.svg')
}

.footer-brand p {
    max-width: 400px;
    margin: 26px 0 0;
    color: #858a90
}

.footer-column h4 {
    margin: 0 0 20px;
    color: #fff;
    font-size: 13px;
    letter-spacing: .08em
}

.footer-column a {
    display: block;
    margin: 11px 0;
    color: #858a90;
    font-size: 14px;
    transition: color .3s
}

.footer-column a:hover {
    color: var(--gold-light)
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    border-top: 1px solid var(--line);
    color: #656a70;
    font-size: 11px;
    letter-spacing: .05em
}

/* reveals */
.reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .85s var(--ease),transform .85s var(--ease)
}

.reveal.is-visible {
    opacity: 1;
    transform: none
}

.reveal-delay-1 {
    transition-delay: .12s
}

.reveal-delay-2 {
    transition-delay: .22s
}

.reveal-delay-3 {
    transition-delay: .32s
}

.cursor-glow {
    position: fixed;
    z-index: 20;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle,rgba(186,152,82,.07),transparent 68%);
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: opacity .25s;
    mix-blend-mode: screen
}

body:hover .cursor-glow {
    opacity: 1
}

@media (max-width: 1100px) {
    :root {
        --header-h:78px
    }

    .header-inner {
        width: calc(100% - 34px);
        grid-template-columns: 1fr auto 1fr
    }

    .nav-group {
        gap: 20px
    }

    .nav-link {
        font-size: 12px
    }

    .nav-link:nth-child(2) {
        display: none
    }

    .feature-grid,.product-detail-grid {
        grid-template-columns: 1fr
    }

    .feature-copy {
        max-width: 720px
    }

    .product-stage {
        min-height: 560px
    }

    .product-detail-copy {
        padding-top: 35px
    }

    .product-detail-stage {
        min-height: 580px
    }

    .product-floating-specs {
        position: static;
        margin-top: 24px
    }

    .support-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .spec-layout,.contact-grid {
        grid-template-columns: 1fr
    }

    .spec-sticky {
        position: static
    }

    .contact-grid {
        gap: 54px
    }
}

@media (max-width: 820px) {
    .container {
        width:min(calc(100% - 36px),var(--max))
    }

    .section {
        padding: 92px 0
    }

    .section-tight {
        padding: 70px 0
    }

    .desktop-only {
        display: none!important
    }

    .site-header .nav-group {
        display: none
    }

    .header-inner {
        grid-template-columns: 1fr auto 1fr
    }

    .header-logo {
        grid-column: 2
    }

    .mobile-toggle {
        display: grid;
        grid-column: 3;
        justify-self: end
    }

    .mobile-toggle span {
        display: block;
        width: 22px;
        height: 1px;
        background: currentColor;
        margin: 3px 0;
        transition: .3s
    }

    .menu-open .mobile-toggle span:first-child {
        transform: translateY(4px) rotate(45deg)
    }

    .menu-open .mobile-toggle span:last-child {
        transform: translateY(-3px) rotate(-45deg)
    }

    .hero-inner {
        padding-bottom: 95px
    }

    .hero-copy {
        width: 100%
    }

    .hero-meta {
        display: none
    }

    .hero-copy h1 {
        font-size: clamp(43px,12.4vw,75px)
    }

    .manifesto-grid,.brand-cta-grid,.about-statement,.product-intro-band {
        grid-template-columns: 1fr;
        gap: 50px
    }

    .manifesto-copy p {
        font-size: clamp(38px,9.7vw,65px)
    }

    .product-card-grid {
        display: grid;
        grid-template-columns: 1fr
    }

    .product-card {
        grid-column: auto!important;
        min-height: 540px!important
    }

    .section-head {
        align-items: flex-start;
        flex-direction: column
    }

    .media-wall-grid {
        grid-template-columns: 1fr
    }

    .media-tile {
        min-height: 400px
    }

    .catalog-grid {
        grid-template-columns: 1fr
    }

    .catalog-card {
        min-height: 540px
    }

    .product-detail-grid {
        padding-top: 44px
    }

    .product-detail-stage {
        min-height: 500px
    }

    .product-intro-band .copy {
        position: static
    }

    .detail-media-full,.detail-media-copy {
        min-height: 650px
    }

    .detail-media-copy {
        width: 90%
    }

    .support-grid,.values-grid {
        grid-template-columns: 1fr
    }

    .download-row {
        grid-template-columns: 1fr auto
    }

    .download-row span {
        display: none
    }

    .footer-main {
        grid-template-columns: 1fr 1fr
    }

    .footer-brand {
        grid-column: 1/-1
    }
}

@media (max-width: 560px) {
    .container {
        width:calc(100% - 28px)
    }

    .hero-copy p {
        font-size: 15px
    }

    .hero-actions {
        gap: 14px
    }

    .btn {
        min-height: 48px;
        padding-inline:19px}

    .feature-specs {
        grid-template-columns: 1fr 1fr
    }

    .mini-spec {
        padding: 18px 14px
    }

    .product-stage {
        min-height: 430px
    }

    .gold-ring {
        width: 80%
    }

    .product-card {
        min-height: 470px!important;
        border-radius: 18px
    }

    .product-card-content {
        left: 22px;
        top: 23px
    }

    .product-card-image {
        inset: 18% -8% 5% 8%
    }

    .product-card .edition {
        left: 22px;
        bottom: 22px
    }

    .product-card .card-arrow {
        right: 20px;
        bottom: 18px;
        width: 48px;
        height: 48px
    }

    .page-hero {
        min-height: 64svh
    }

    .page-hero .container {
        padding-bottom: 50px
    }

    .catalog-card {
        min-height: 480px;
        border-radius: 18px
    }

    .catalog-meta {
        left: 22px;
        top: 22px
    }

    .catalog-footer {
        left: 22px;
        right: 22px;
        bottom: 20px
    }

    .product-detail-copy h1 {
        font-size: 72px
    }

    .product-detail-stage {
        min-height: 420px
    }

    .product-floating-specs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px
    }

    .detail-media-full,.detail-media-copy {
        min-height: 570px
    }

    .detail-media-copy {
        width: 100%
    }

    .spec-table th,.spec-table td {
        display: block;
        width: 100%;
        padding: 10px 6px
    }

    .spec-table th {
        padding-top: 17px;
        padding-bottom: 0
    }

    .spec-table td {
        padding-top: 4px;
        padding-bottom: 17px
    }

    .support-grid {
        grid-template-columns: 1fr
    }

    .contact-form {
        grid-template-columns: 1fr
    }

    .field.full {
        grid-column: auto
    }

    .form-note,.form-message {
        grid-column: auto
    }

    .footer-main {
        grid-template-columns: 1fr
    }

    .footer-brand {
        grid-column: auto
    }

    .footer-bottom {
        flex-direction: column
    }

    .cursor-glow {
        display: none
    }
}

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

    .intro-screen {
        display: none
    }

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

/* ===== V3 HEADER / LOGO / DROPDOWN FIXES ===== */
@font-face {
    font-family: "HarmonyOS Sans SC Local";
    src: local("HarmonyOS Sans SC");
    font-display: swap
}

@font-face {
    font-family: "Bebas Local";
    src: local("Bebas"),local("Bebas Regular");
    font-display: swap
}

:root {
    --font-cn: "HarmonyOS Sans SC Local","HarmonyOS Sans SC","Microsoft YaHei UI","PingFang SC","Noto Sans CJK SC",Arial,sans-serif;
    --font-en: "Bebas Local","Bebas Neue","Arial Narrow","Roboto Condensed",Arial,sans-serif;
    --header-h: 94px
}

.site-header {
    z-index: 3000;
    background: linear-gradient(180deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.22) 72%,transparent 100%);
    isolation: isolate
}

.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg,rgba(0,0,0,.16),transparent 34%,transparent 66%,rgba(0,0,0,.16))
}

.site-header.scrolled {
    background: rgba(2,3,4,.88);
    box-shadow: 0 12px 40px rgba(0,0,0,.18)
}

.header-inner {
    width: min(calc(100% - 72px),1530px);
    grid-template-columns: minmax(0,1fr) 88px minmax(0,1fr);
    gap: 30px
}

.nav-group {
    height: 100%;
    gap: clamp(22px,2.6vw,50px)
}

.nav-group.right {
    gap: clamp(18px,2vw,36px)
}

.nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center
}

.nav-link {
    border: 0;
    background: transparent;
    padding: 0;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0,0,0,.65);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700
}

.nav-item.active>.nav-link,.nav-link:hover,.nav-item:hover>.nav-link,.nav-item:focus-within>.nav-link,.nav-item.is-open>.nav-link {
    color: var(--gold-light)
}

.nav-item.active>.nav-link::before,.nav-item:hover>.nav-link::before,.nav-item:focus-within>.nav-link::before,.nav-item.is-open>.nav-link::before {
    opacity: 1
}

.header-logo {
    width: 76px;
    height: 68px;
    z-index: 2
}

.header-logo-stack {
    position: relative;
    display: block;
    width: 61px;
    height: 45px;
    filter: drop-shadow(0 3px 15px rgba(0,0,0,.8))
}

.header-logo-stack img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity .34s var(--ease),transform .34s var(--ease)
}

.header-logo-white {
    opacity: 1
}

.header-logo-gold {
    opacity: 0
}

.header-logo:hover .header-logo-white,.header-logo:focus-visible .header-logo-white {
    opacity: 0
}

.header-logo:hover .header-logo-gold,.header-logo:focus-visible .header-logo-gold {
    opacity: 1;
    transform: scale(1.055)
}

.icon-btn,.lang-btn {
    color: #fff;
    text-shadow: 0 1px 12px rgba(0,0,0,.7)
}

.icon-btn:hover,.lang-btn:hover,.language-menu:hover>.lang-btn,.language-menu.is-open>.lang-btn {
    color: var(--gold-light)
}

.lang-caret {
    font-size: 13px;
    transition: transform .3s var(--ease)
}

.language-menu:hover .lang-caret,.language-menu.is-open .lang-caret {
    transform: rotate(180deg)
}

.submenu {
    position: absolute;
    top: calc(100% - 8px);
    left: -26px;
    width: 350px;
    padding: 18px;
    border: 1px solid rgba(215,189,130,.22);
    border-radius: 4px;
    background: linear-gradient(145deg,rgba(14,16,19,.97),rgba(4,5,7,.96));
    box-shadow: 0 28px 70px rgba(0,0,0,.52);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px);
    transition: opacity .28s var(--ease),visibility .28s,transform .34s var(--ease)
}

.submenu::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(90deg,transparent,var(--gold),transparent)
}

.nav-item:hover>.submenu,.nav-item:focus-within>.submenu,.nav-item.is-open>.submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0)
}

.submenu-right {
    left: auto;
    right: -28px
}

.submenu-products {
    width: 390px
}

.submenu-buy {
    width: 330px
}

.submenu-language {
    width: 235px;
    right: -12px;
    padding: 12px
}

.submenu-label {
    padding: 4px 12px 12px;
    color: var(--gold-light);
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: .19em;
    border-bottom: 1px solid rgba(255,255,255,.09)
}

.submenu>a {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 9px;
    align-items: center;
    padding: 13px 11px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: #fff;
    transition: background .25s,color .25s,transform .25s
}

.submenu>a:last-child {
    border-bottom: 0
}

.submenu>a:hover,.submenu>a:focus-visible {
    background: rgba(190,156,87,.09);
    color: var(--gold-light);
    transform: translateX(3px);
    outline: none
}

.submenu-no {
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: .14em;
    color: rgba(215,189,130,.67)
}

.submenu strong {
    display: block;
    font-size: 14px;
    line-height: 1.3
}

.submenu small {
    display: block;
    margin-top: 4px;
    color: #8f949b;
    font-size: 11px;
    line-height: 1.45;
    font-weight: 400
}

.submenu-language>a {
    grid-template-columns: 1fr auto
}

.submenu-language b {
    font-weight: 400;
    color: var(--gold-light)
}

/* Actual image intro, avoids browser mask failures */
.intro-screen {
    background: radial-gradient(circle at 50% 50%,#0a0a0a 0%,#020202 54%,#000 100%)
}

.intro-center {
    width: min(82vw,760px);
    height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.intro-mark {
    width: 76px;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transform: translateY(12px) scale(.9);
    animation: introMarkV3 .75s .12s var(--ease) forwards;
    filter: drop-shadow(0 0 22px rgba(190,156,87,.16))
}

.intro-wordmark-window {
    width: min(72vw,650px);
    height: 92px;
    margin-top: 25px;
    overflow: hidden;
    clip-path: inset(0 100% 0 0);
    animation: introReveal 1.25s .55s var(--ease) forwards
}

.intro-wordmark-image {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.intro-line {
    left: 12%;
    right: 12%;
    bottom: 36px
}

.intro-sub {
    bottom: 2px
}

@keyframes introMarkV3 {
    to {
        opacity: 1;
        transform: none
    }
}

.brand-cta-mark img {
    width: min(45vw,430px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 24px 80px rgba(190,156,87,.12))
}

.footer-brand>img {
    width: 220px;
    height: auto;
    object-fit: contain
}

/* News */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px
}

.news-card {
    background: #090b0e;
    border: 1px solid var(--line);
    overflow: hidden;
    transition: transform .4s var(--ease),border-color .4s
}

.news-card:hover {
    transform: translateY(-7px);
    border-color: rgba(215,189,130,.44)
}

.news-media {
    display: block;
    aspect-ratio: 1.35;
    overflow: hidden;
    background: #050608
}

.news-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease),filter .7s
}

.news-card:hover .news-media img {
    transform: scale(1.035);
    filter: brightness(1.08)
}

.news-copy {
    padding: 28px
}

.news-copy>span {
    color: var(--gold-light);
    font-size: 10px;
    letter-spacing: .18em
}

.news-copy h2 {
    margin: 13px 0 12px;
    font-size: 25px;
    line-height: 1.25
}

.news-copy p {
    margin: 0;
    color: #9ca0a6
}

.news-link {
    display: inline-block;
    margin-top: 22px;
    color: #fff;
    font-weight: 700;
    transition: color .3s
}

.news-link:hover {
    color: var(--gold-light)
}

.news-placeholder {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 34px;
    padding: 28px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.news-placeholder span {
    color: var(--gold-light);
    font-family: var(--font-en);
    letter-spacing: .16em
}

.news-placeholder strong {
    font-weight: 500;
    color: #aaaeb4
}

/* Mobile navigation corrected */
.mobile-menu {
    z-index: 3500;
    overflow-y: auto;
    align-content: start;
    padding-top: 96px
}

.mobile-menu-head {
    width: 190px;
    margin: 0 0 30px
}

.mobile-menu-head img {
    width: 100%;
    height: auto
}

.mobile-menu nav {
    gap: 0
}

.mobile-menu details {
    border-bottom: 1px solid rgba(255,255,255,.11)
}

.mobile-menu summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    font-size: clamp(28px,8vw,48px);
    font-weight: 760;
    letter-spacing: -.04em;
    cursor: pointer
}

.mobile-menu summary::-webkit-details-marker {
    display: none
}

.mobile-menu summary::after {
    content: "＋";
    font-size: .65em;
    font-weight: 300;
    color: var(--gold-light)
}

.mobile-menu details[open] summary::after {
    content: "－"
}

.mobile-menu details>div {
    display: grid;
    gap: 0;
    padding: 0 0 16px 18px
}

.mobile-menu details a {
    padding: 8px 0;
    color: #a7abb0;
    font-size: 16px;
    letter-spacing: 0;
    font-weight: 500
}

.mobile-menu details a:hover {
    color: var(--gold-light)
}

@media(max-width: 1120px) {
    .header-inner {
        width:min(calc(100% - 44px),1530px)
    }

    .nav-group {
        gap: 20px
    }

    .nav-link {
        font-size: 13px
    }

    .submenu {
        width: 320px
    }

    .submenu-products {
        width: 360px
    }
}

@media(max-width: 900px) {
    .nav-group {
        display:none
    }

    .header-inner {
        grid-template-columns: 1fr 70px 1fr
    }

    .header-logo {
        grid-column: 2
    }

    .mobile-toggle {
        display: flex;
        grid-column: 3;
        justify-self: end
    }

    .site-header {
        background: linear-gradient(180deg,rgba(0,0,0,.72),transparent)
    }

    .news-grid {
        grid-template-columns: 1fr
    }

    .news-card {
        display: grid;
        grid-template-columns: .8fr 1fr
    }

    .news-media {
        aspect-ratio: auto;
        min-height: 270px
    }
}

@media(max-width: 620px) {
    .header-inner {
        width:calc(100% - 34px)
    }

    .header-logo-stack {
        width: 52px;
        height: 39px
    }

    .intro-mark {
        width: 61px
    }

    .intro-wordmark-window {
        height: 62px;
        margin-top: 20px
    }

    .intro-line {
        bottom: 46px
    }

    .intro-sub {
        font-size: 8px;
        letter-spacing: .26em
    }

    .news-card {
        display: block
    }

    .news-media {
        aspect-ratio: 1.3;
        min-height: 0
    }

    .news-placeholder {
        flex-direction: column
    }

    .brand-cta-mark img {
        width: min(74vw,330px)
    }
}

/* ===== V4 INTERACTION / LOGO REFINEMENT ===== */
:root {
    --gold: #c4a168;
    --gold-light: #e8d09b;
    --gold-soft: #f3e6c9;
    --ivory: #f4f0e7;
    --panel: rgba(10,12,16,.78);
}

body {
    background: #030405
}

.site-header {
    height: 80px;
    background: linear-gradient(180deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.22) 70%,transparent 100%)
}

.header-inner {
    width: min(calc(100% - 56px),1540px);
    grid-template-columns: minmax(0,1fr) 90px minmax(0,1fr)
}

.nav-group {
    gap: 28px;
    align-items: center
}

.nav-item {
    position: relative
}

.nav-link {
    padding: 10px 0;
    font-weight: 720;
    font-size: 14px;
    letter-spacing: .03em
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: linear-gradient(90deg,transparent,var(--gold),transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s var(--ease),opacity .3s;
    opacity: 0
}

.nav-link:hover::after,.nav-item:hover>.nav-link::after,.nav-item.is-open>.nav-link::after,.nav-item:focus-within>.nav-link::after {
    transform: scaleX(1);
    opacity: 1
}

.header-logo {
    width: 84px;
    height: 70px
}

.header-logo-stack {
    width: 70px;
    height: 52px;
    filter: drop-shadow(0 4px 18px rgba(0,0,0,.82))
}

.header-logo:hover .header-logo-gold,.header-logo:focus-visible .header-logo-gold {
    transform: translateY(-1px) scale(1.08)
}

.header-utility,.icon-btn,.lang-btn {
    color: var(--ivory)
}

.icon-btn svg,.lang-btn svg {
    stroke: currentColor
}

.icon-btn:hover,.lang-btn:hover,.lang-btn:focus-visible,.icon-btn:focus-visible {
    color: var(--gold-light)
}

/* mega menus */
.submenu {
    position: fixed;
    top: 76px;
    left: 50%;
    right: auto;
    width: min(92vw,1260px);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 22px 22px;
    border: 1px solid rgba(216,187,128,.20);
    border-radius: 28px;
    background: linear-gradient(180deg,rgba(12,14,18,.96),rgba(4,6,8,.96));
    box-shadow: 0 38px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transform: translate(-50%,14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s var(--ease),visibility .28s,transform .34s var(--ease)
}

.submenu::before {
    display: none
}

.nav-item:hover>.submenu,.nav-item:focus-within>.submenu,.nav-item.is-open>.submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%,0)
}

.submenu-label {
    flex: 0 0 100%;
    padding: 0 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: var(--gold-light);
    font-size: 12px;
    letter-spacing: .24em
}

.submenu>a {
    position: relative;
    flex: 1 1 236px;
    min-height: 132px;
    padding: 18px 18px 16px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 22px;
    background: radial-gradient(circle at 120% -10%,rgba(89,113,199,.16),transparent 34%),radial-gradient(circle at -10% 120%,rgba(196,161,104,.16),transparent 33%),rgba(255,255,255,.025);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden
}

.submenu>a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(255,255,255,.04),transparent 36%);
    opacity: .5
}

.submenu>a::after {
    content: "";
    position: absolute;
    right: -14px;
    top: -8px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(255,255,255,.1),transparent 68%);
    opacity: .55;
    transition: transform .35s var(--ease),opacity .35s var(--ease)
}

.submenu>a:hover::after,.submenu>a:focus-visible::after {
    transform: scale(1.16);
    opacity: .78
}

.submenu>a:hover,.submenu>a:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(216,187,128,.28);
    background: radial-gradient(circle at 120% -10%,rgba(89,113,199,.24),transparent 34%),radial-gradient(circle at -10% 120%,rgba(196,161,104,.2),transparent 33%),rgba(255,255,255,.04)
}

.submenu-no {
    margin-bottom: auto;
    font-size: 11px;
    letter-spacing: .16em;
    color: rgba(232,208,155,.75)
}

.submenu strong {
    font-size: 18px;
    font-weight: 760;
    letter-spacing: -.02em
}

.submenu small {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.55;
    color: #98a0a9;
    max-width: 26ch
}

.submenu-products a:nth-of-type(2)::after {
    background: url('../images/product-s01-black.webp') center/contain no-repeat;
    right: -2px;
    top: 6px;
    width: 128px;
    height: 128px;
    border-radius: 0
}

.submenu-products a:nth-of-type(3)::after {
    background: url('../images/product-c01-black.webp') center/contain no-repeat;
    right: -8px;
    top: 4px;
    width: 118px;
    height: 118px;
    border-radius: 0
}

.submenu-products a:nth-of-type(4)::after {
    background: url('../images/product-r484-white.webp') center/contain no-repeat;
    right: -8px;
    top: 8px;
    width: 118px;
    height: 118px;
    border-radius: 0;
    opacity: .22
}

.submenu-right,.submenu-buy {
    left: 50%;
    right: auto
}

.language-menu .submenu,.submenu-language {
    position: absolute;
    left: auto;
    right: -8px;
    top: calc(100% + 12px);
    width: 250px;
    padding: 12px 12px 10px;
    border-radius: 20px;
    transform: translateY(12px);
    display: flex;
    flex-direction: column
}

.language-menu .submenu-label {
    padding: 2px 10px 10px
}

.language-menu .submenu>a {
    min-height: unset;
    flex: 0 0 auto;
    border-radius: 14px;
    padding: 13px 14px
}

.language-menu .submenu>a::after {
    display: none
}

.language-menu:hover>.submenu,.language-menu:focus-within>.submenu,.language-menu.is-open>.submenu {
    transform: translateY(0)
}

/* hero / intro refinement */
.intro-screen {
    background: radial-gradient(circle at 50% 40%,rgba(31,33,37,.98) 0%,#050607 44%,#000 100%)
}

.intro-center {
    height: 300px
}

.intro-mark {
    width: 88px;
    filter: drop-shadow(0 0 32px rgba(232,208,155,.14))
}

.intro-wordmark-window {
    height: 100px;
    margin-top: 28px
}

.intro-sub {
    color: rgba(255,255,255,.56);
    font-size: 11px;
    letter-spacing: .48em
}

.hero-copy h1 {
    max-width: 10ch;
    text-wrap: balance
}

.hero-copy p {
    font-size: 18px;
    color: rgba(255,255,255,.8)
}

.hero-meta strong {
    font-size: 28px;
    letter-spacing: .16em;
    color: rgba(255,255,255,.86)
}

.hero-meta span {
    letter-spacing: .3em
}

.scroll-cue {
    bottom: 30px
}

.scroll-cue::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--gold-light);
    border-bottom: 1px solid var(--gold-light);
    transform: rotate(45deg)
}

/* Scroll-interactive showcase */
.story-showcase {
    position: relative;
    background: linear-gradient(180deg,#030405 0%,#05080c 45%,#030405 100%)
}

.story-pin {
    position: sticky;
    top: 80px;
    min-height: calc(100vh - 80px);
    display: grid;
    grid-template-columns: minmax(320px,.72fr) minmax(0,1.28fr);
    gap: 44px;
    align-items: center;
    padding-block:36px}

.story-ui {
    align-self: center;
    max-width: 530px
}

.story-counter {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 18px 0 22px;
    font-family: var(--font-en);
    line-height: 1
}

.story-counter span {
    font-size: 78px;
    font-weight: 900;
    letter-spacing: -.06em;
    color: var(--ivory)
}

.story-counter em {
    font-style: normal;
    font-size: 18px;
    color: #6f7780;
    letter-spacing: .16em
}

.story-copies {
    position: relative;
    min-height: 350px
}

.story-copy {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s var(--ease),transform .55s var(--ease);
    pointer-events: none
}

.story-copy.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto
}

.story-copy h2 {
    margin: 0 0 18px;
    font-size: clamp(34px,3.2vw,54px);
    line-height: 1.05;
    letter-spacing: -.05em;
    text-wrap: balance
}

.story-copy p {
    margin: 0;
    color: #b7bcc3;
    font-size: 17px;
    line-height: 1.85;
    max-width: 32ch
}

.story-copy ul {
    display: grid;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 28px 0 0
}

.story-copy li {
    position: relative;
    padding-left: 18px;
    color: var(--ivory);
    font-size: 14px;
    letter-spacing: .02em
}

.story-copy li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--gold-light),#4f83ff)
}

.story-nav {
    display: flex;
    gap: 12px;
    margin-top: 10px
}

.story-dot {
    width: 56px;
    height: 4px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    cursor: pointer;
    transition: background .3s var(--ease),transform .3s var(--ease)
}

.story-dot.active {
    background: linear-gradient(90deg,var(--gold-light),#5f88ff);
    transform: scaleX(1.08)
}

.story-stage {
    position: relative;
    min-height: 640px;
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
    background: radial-gradient(circle at 70% 20%,rgba(54,81,152,.22),transparent 36%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
    box-shadow: 0 28px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.04)
}

.story-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size: 86px 86px;
    mask-image: linear-gradient(to bottom,transparent 2%,#000 18%,#000 82%,transparent 100%)
}

.story-media {
    position: absolute;
    inset: 0;
    padding: 30px;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity .58s var(--ease),transform .58s var(--ease)
}

.story-media.active {
    opacity: 1;
    transform: scale(1)
}

.story-media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 45px rgba(0,0,0,.34))
}

.story-sentinels {
    position: relative;
    z-index: 0;
    margin-top: calc(-100vh + 80px)
}

.story-step {
    height: 92vh
}

/* subtle section polish */
.section {
    position: relative
}

.section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)
}

.feature-product,.products-showcase,.manifesto {
    background: radial-gradient(circle at 85% 12%,rgba(66,93,158,.12),transparent 22%)
}

@media(max-width: 1200px) {
    .submenu {
        width:min(94vw,1100px)
    }

    .story-pin {
        grid-template-columns: 1fr;
        gap: 26px;
        padding-block:20px}

    .story-ui {
        max-width: none
    }

    .story-stage {
        min-height: 540px
    }

    .story-copies {
        min-height: 280px
    }
}

@media(max-width: 900px) {
    .site-header {
        height:74px
    }

    .story-pin {
        top: 74px;
        min-height: calc(100vh - 74px)
    }

    .story-sentinels {
        margin-top: calc(-100vh + 74px)
    }

    .story-stage {
        min-height: 460px
    }

    .story-counter span {
        font-size: 58px
    }
}

@media(max-width: 620px) {
    .header-inner {
        width:calc(100% - 28px);
        grid-template-columns: 1fr 64px 1fr
    }

    .header-logo-stack {
        width: 58px;
        height: 42px
    }

    .hero-copy p {
        font-size: 16px
    }

    .story-copy h2 {
        font-size: clamp(29px,9vw,42px)
    }

    .story-copy p {
        font-size: 15px
    }

    .story-counter {
        margin: 10px 0 16px
    }

    .story-counter span {
        font-size: 48px
    }

    .story-nav {
        gap: 8px
    }

    .story-dot {
        width: 42px
    }

    .story-stage {
        min-height: 340px;
        border-radius: 26px
    }
}

/* =========================================================
   WEKYPSYR V4 — full-width interaction & refined brand system
   ========================================================= */
:root {
    --bg: #020304;
    --bg-soft: #07090d;
    --panel: #0b0d11;
    --text: #f8f6f0;
    --gold: #caa45e;
    --gold-light: #ead39d;
    --gold-deep: #8e6425;
    --platinum: #f7f3e9;
    --indigo: #6b7cff;
    --header-h: 88px;
}

body::after {
    content: "";
    position: fixed;
    z-index: 2850;
    inset: 0;
    background: rgba(0,0,0,.46);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s var(--ease),visibility .35s
}

body.mega-open::after {
    opacity: 1;
    visibility: visible
}

.page-progress {
    position: fixed;
    z-index: 5200;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    pointer-events: none;
    background: rgba(255,255,255,.04)
}

.page-progress span {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg,#fff0c7,var(--gold),var(--indigo));
    box-shadow: 0 0 18px rgba(222,190,117,.55);
    will-change: transform
}

/* refined fixed header */
.site-header {
    height: var(--header-h);
    z-index: 3000;
    background: linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.16) 72%,transparent);
    border-bottom: 1px solid transparent
}

.site-header.mega-active,.site-header.scrolled {
    background: rgba(3,4,6,.92);
    backdrop-filter: blur(24px) saturate(1.25);
    -webkit-backdrop-filter: blur(24px) saturate(1.25);
    border-bottom-color: rgba(255,255,255,.08)
}

.site-header.mega-active::after,.site-header.scrolled::after {
    opacity: 1
}

.header-inner {
    width: min(calc(100% - 72px),1540px);
    grid-template-columns: 1fr 92px 1fr;
    gap: 28px
}

.nav-group {
    gap: clamp(26px,3.1vw,62px)
}

.nav-group.right {
    gap: clamp(22px,2.5vw,46px)
}

.nav-item {
    position: static
}

.nav-link {
    height: var(--header-h);
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .075em;
    text-transform: uppercase;
    text-shadow: 0 2px 18px rgba(0,0,0,.65)
}

.nav-link::before {
    width: 7px;
    height: 7px;
    opacity: .42
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 19px;
    right: 0;
    bottom: 17px;
    height: 1px;
    background: linear-gradient(90deg,var(--gold-light),transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .34s var(--ease)
}

.nav-item:hover>.nav-link::after,.nav-item:focus-within>.nav-link::after,.nav-item.is-open>.nav-link::after {
    transform: scaleX(1)
}

.header-logo {
    width: 82px;
    height: 70px
}

.header-logo-stack {
    width: 62px;
    height: 47px
}

.header-logo-stack img {
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.6))
}

.header-logo-gold {
    filter: drop-shadow(0 0 16px rgba(222,190,117,.26))
}

/* full-width horizontal mega menu */
.site-header .submenu:not(.submenu-language) {
    position: fixed;
    z-index: 3001;
    top: var(--header-h);
    left: 0!important;
    right: 0!important;
    width: 100vw!important;
    min-height: 230px;
    padding: 28px max(36px,calc((100vw - 1540px)/2 + 36px)) 32px;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(224,195,127,.18);
    border-radius: 0;
    background: linear-gradient(180deg,rgba(9,11,15,.99),rgba(3,4,6,.985));
    box-shadow: 0 34px 80px rgba(0,0,0,.52);
    display: flex;
    gap: 12px;
    align-items: stretch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-18px);
    transition: opacity .3s var(--ease),visibility .3s,transform .42s var(--ease)
}

.site-header .submenu:not(.submenu-language)::before {
    left: max(36px,calc((100vw - 1540px)/2 + 36px));
    right: max(36px,calc((100vw - 1540px)/2 + 36px));
    background: linear-gradient(90deg,transparent,var(--gold),rgba(106,124,255,.7),transparent)
}

.nav-item:hover>.submenu:not(.submenu-language),.nav-item:focus-within>.submenu:not(.submenu-language),.nav-item.is-open>.submenu:not(.submenu-language) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0)
}

.site-header .submenu:not(.submenu-language)>.submenu-label {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 28px 18px 0;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.09);
    font-size: 13px;
    line-height: 1.5;
    color: var(--gold-light)
}

.site-header .submenu:not(.submenu-language)>.submenu-label::after {
    content: "WEKYPSYR / 2026";
    font-family: var(--font-en);
    font-size: 10px;
    letter-spacing: .22em;
    color: #676d76
}

.site-header .submenu:not(.submenu-language)>a {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 170px;
    padding: 24px 22px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 2px;
    background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
    display: flex;
    gap: 12px;
    align-items: flex-end;
    overflow: hidden;
    color: #f8f6f0;
    transition: transform .36s var(--ease),border-color .36s var(--ease),background .36s var(--ease),color .36s var(--ease)
}

.site-header .submenu:not(.submenu-language)>a::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 55%;
    background: linear-gradient(0deg,rgba(202,164,94,.13),transparent);
    opacity: 0;
    transition: opacity .35s
}

.site-header .submenu:not(.submenu-language)>a::after {
    content: "↗";
    position: absolute;
    right: 18px;
    top: 16px;
    color: rgba(255,255,255,.42);
    font-size: 18px;
    transition: transform .35s,color .35s
}

.site-header .submenu:not(.submenu-language)>a:hover,.site-header .submenu:not(.submenu-language)>a:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(234,211,157,.42);
    background: rgba(255,255,255,.045);
    color: var(--gold-light);
    outline: none
}

.site-header .submenu:not(.submenu-language)>a:hover::before {
    opacity: 1
}

.site-header .submenu:not(.submenu-language)>a:hover::after {
    transform: translate(3px,-3px);
    color: var(--gold-light)
}

.site-header .submenu:not(.submenu-language) .submenu-no {
    align-self: flex-start;
    font-size: 12px;
    color: rgba(234,211,157,.64)
}

.site-header .submenu:not(.submenu-language) strong {
    font-size: 17px;
    letter-spacing: .02em
}

.site-header .submenu:not(.submenu-language) small {
    max-width: 22ch;
    color: #8f969f;
    font-size: 12px
}

/* product mega panel has real product visuals */
.site-header .submenu-products {
    min-height: 300px!important
}

.site-header .submenu-products>a {
    padding-top: 138px!important;
    background-repeat: no-repeat!important;
    background-position: center 12px!important;
    background-size: auto 132px!important
}

.site-header .submenu-products>a:nth-of-type(1) {
    background-image: radial-gradient(circle at 50% 35%,rgba(76,94,155,.23),transparent 43%),url('../images/product-s01-black.webp')!important
}

.site-header .submenu-products>a:nth-of-type(2) {
    background-image: radial-gradient(circle at 50% 35%,rgba(76,94,155,.23),transparent 43%),url('../images/product-s01-black.webp')!important
}

.site-header .submenu-products>a:nth-of-type(3) {
    background-image: radial-gradient(circle at 50% 35%,rgba(76,94,155,.18),transparent 43%),url('../images/product-c01-black.webp')!important
}

.site-header .submenu-products>a:nth-of-type(4) {
    background-image: radial-gradient(circle at 50% 35%,rgba(220,220,220,.14),transparent 43%),url('../images/product-r484-white.webp')!important
}

.site-header .submenu-language {
    top: calc(100% - 8px)
}

/* redesigned intro */
.intro-screen {
    background: #020304;
    overflow: hidden
}

.intro-screen::before {
    content: "";
    position: absolute;
    inset: -30%;
    background: conic-gradient(from 180deg at 50% 50%,transparent 0 35%,rgba(201,164,94,.12) 42%,rgba(104,124,255,.11) 48%,transparent 56% 100%);
    filter: blur(34px);
    animation: introAurora 5s linear infinite
}

.intro-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size: 74px 74px;
    mask-image: radial-gradient(circle,#000 0,transparent 68%);
    opacity: .52
}

.intro-ambient {
    position: absolute;
    width: 42vw;
    height: 42vw;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(216,183,111,.13),rgba(72,89,156,.065) 36%,transparent 68%);
    filter: blur(12px);
    animation: introBreath 3.2s ease-in-out infinite
}

.intro-center {
    z-index: 2;
    width: min(84vw,820px);
    height: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.intro-symbol {
    position: relative;
    width: 104px;
    height: 74px;
    margin-bottom: 28px
}

.intro-symbol img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.intro-mark-outline {
    opacity: 0;
    transform: scale(.82);
    animation: introOutline .85s .12s var(--ease) forwards;
    filter: drop-shadow(0 0 20px rgba(234,211,157,.2))
}

.intro-mark-fill {
    opacity: 0;
    transform: scale(.92);
    animation: introFill .8s .72s var(--ease) forwards;
    filter: drop-shadow(0 12px 38px rgba(202,164,94,.23))
}

.intro-wordmark-window {
    width: min(76vw,690px);
    height: 116px;
    margin: 0;
    clip-path: inset(0 100% 0 0);
    animation: introReveal 1.18s .86s var(--ease) forwards
}

.intro-wordmark-image {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.intro-cn {
    margin-top: -5px;
    color: rgba(248,246,240,.62);
    font-size: 11px;
    letter-spacing: .28em;
    opacity: 0;
    transform: translateY(8px);
    animation: introSub .7s 1.55s forwards
}

.intro-line {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: min(68vw,560px);
    margin-top: 25px;
    background: linear-gradient(90deg,transparent,#f2deb0 38%,#6b7cff 62%,transparent);
    animation: introLine 1.1s 1.25s var(--ease) forwards
}

.intro-sub {
    position: relative;
    bottom: auto;
    margin-top: 15px;
    font-size: 9px;
    letter-spacing: .42em;
    color: rgba(255,255,255,.46);
    animation: introSub .8s 1.72s forwards
}

@keyframes introOutline {
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes introFill {
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes introAurora {
    to {
        transform: rotate(360deg)
    }
}

@keyframes introBreath {
    50% {
        transform: scale(1.08);
        opacity: .7
    }
}

/* hero gains subtle scroll-responsive depth */
.hero-media video {
    will-change: transform,filter,opacity;
    transition: filter .15s linear
}

.hero-copy,.hero-meta,.scroll-cue {
    will-change: transform,opacity
}

.hero::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    height: 28%;
    background: linear-gradient(0deg,#030405,transparent);
    pointer-events: none
}

/* richer sticky story */
.story-showcase {
    isolation: isolate
}

.story-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--story-x,72%) var(--story-y,42%),rgba(92,111,198,.13),transparent 30%);
    pointer-events: none;
    transition: background .3s
}

.story-stage {
    transform: perspective(1200px) rotateX(var(--story-rx,0deg)) rotateY(var(--story-ry,0deg));
    transition: transform .18s linear;
    border-color: rgba(234,211,157,.14)
}

.story-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    border-image: linear-gradient(135deg,rgba(246,226,180,.35),transparent 28%,rgba(107,124,255,.28)) 1;
    pointer-events: none
}

.story-media.active img {
    animation: storyMediaIn .82s var(--ease)
}

@keyframes storyMediaIn {
    from {
        opacity: .3;
        transform: translate3d(36px,0,0) scale(1.045);
        filter: blur(4px)
    }

    to {
        opacity: 1;
        transform: none;
        filter: drop-shadow(0 20px 45px rgba(0,0,0,.34))
    }
}

/* natural product grid replaces the previous horizontal runway */
@media(max-width: 1120px) {
    .site-header .submenu:not(.submenu-language) {
        padding-inline:30px;
        gap: 8px
    }

    .site-header .submenu:not(.submenu-language)>.submenu-label {
        flex-basis: 170px
    }

    .site-header .submenu:not(.submenu-language)>a {
        padding-inline:16px}
}

@media(max-width: 900px) {
    body.mega-open::after {
        display:none
    }

    .page-progress {
        z-index: 6000
    }

    .site-header .submenu:not(.submenu-language) {
        display: none
    }

    .intro-center {
        height: 320px
    }

    .intro-symbol {
        width: 80px;
        height: 58px
    }

    .intro-wordmark-window {
        height: 84px
    }

    .intro-cn {
        font-size: 9px;
        letter-spacing: .18em
    }
}

@media(max-width: 620px) {
    .intro-wordmark-window {
        width:84vw;
        height: 68px
    }

    .intro-line {
        width: 72vw
    }

    .intro-sub {
        font-size: 7px;
        letter-spacing: .28em
    }
}

@media(prefers-reduced-motion:reduce) {
    .intro-screen::before,.intro-ambient,.story-media.active img {
        animation: none!important
    }
}

/* ===== V5 PROPORTION / TYPOGRAPHY / IMAGE COMPOSITION REFINEMENT ===== */
:root {
    --max: 1360px;
    --header-h: 86px;
    --space-section: 104px;
    --space-section-tight: 72px;
}

body {
    font-size: 15.5px;
    line-height: 1.68;
    letter-spacing: .002em
}

.container {
    width: min(calc(100% - 80px),var(--max))
}

.section {
    padding: var(--space-section) 0
}

.section-tight {
    padding: var(--space-section-tight) 0
}

.eyebrow {
    gap: 10px;
    margin-bottom: 15px;
    font-size: 10.5px;
    letter-spacing: .24em
}

.eyebrow::before {
    width: 22px
}

.display {
    font-size: clamp(44px,5.5vw,84px);
    line-height: .98;
    letter-spacing: -.045em
}

.title {
    font-size: clamp(33px,3.65vw,58px);
    line-height: 1.08;
    letter-spacing: -.038em
}

.title-sm {
    font-size: clamp(27px,2.8vw,42px);
    line-height: 1.16;
    letter-spacing: -.028em
}

.lead {
    max-width: 660px;
    margin-top: 20px;
    font-size: clamp(15.5px,1.18vw,18.5px);
    line-height: 1.78
}

.btn {
    min-height: 48px;
    padding-inline:21px;font-size: 13.5px
}

.btn.ghost::after {
    font-size: 16px
}

/* header and mega menu: denser, more balanced */
.header-inner {
    width: min(calc(100% - 76px),1480px);
    grid-template-columns: 1fr 80px 1fr;
    gap: 24px
}

.nav-group {
    gap: clamp(20px,2.15vw,40px)
}

.nav-group.right {
    gap: clamp(16px,1.7vw,30px)
}

.nav-link {
    font-size: 12px;
    letter-spacing: .065em;
    font-weight: 650
}

.header-logo {
    width: 68px;
    height: 60px
}

.header-logo-stack {
    width: 54px;
    height: 40px
}

.lang-btn {
    font-size: 11.5px
}

.icon-btn {
    width: 38px;
    height: 38px
}

.site-header .submenu:not(.submenu-language) {
    min-height: 214px;
    padding-top: 24px;
    padding-bottom: 28px
}

.site-header .submenu-products {
    min-height: 274px!important
}

.site-header .submenu:not(.submenu-language)>.submenu-label {
    flex-basis: 188px;
    padding-right: 23px;
    font-size: 11.5px
}

.site-header .submenu:not(.submenu-language)>a {
    min-height: 150px;
    padding: 20px 18px
}

.site-header .submenu-products>a {
    padding-top: 126px!important;
    background-position: center 10px!important;
    background-size: auto 116px!important
}

.site-header .submenu:not(.submenu-language) strong {
    font-size: 15px
}

.site-header .submenu:not(.submenu-language) small {
    font-size: 11px;
    line-height: 1.5
}

.site-header .submenu:not(.submenu-language)>a::after {
    font-size: 15px
}

/* opening scene: tighter optical scale */
.intro-center {
    height: 340px;
    width: min(82vw,760px)
}

.intro-symbol {
    width: 88px;
    height: 63px;
    margin-bottom: 22px
}

.intro-wordmark-window {
    width: min(69vw,610px);
    height: 91px
}

.intro-cn {
    font-size: 9.5px;
    letter-spacing: .25em
}

.intro-line {
    width: min(62vw,500px);
    margin-top: 20px
}

.intro-sub {
    margin-top: 12px;
    font-size: 8px;
    letter-spacing: .37em
}

/* home hero */
.hero-inner {
    padding-bottom: 66px
}

.hero-copy {
    width: min(650px,68vw)
}

.hero-copy h1 {
    max-width: 9.2ch;
    font-size: clamp(42px,5vw,78px);
    line-height: 1.035;
    letter-spacing: -.047em
}

.hero-copy p {
    max-width: 560px;
    margin-top: 19px;
    font-size: 15.5px;
    line-height: 1.75
}

.hero-actions {
    margin-top: 28px;
    gap: 18px
}

.hero-meta {
    bottom: 72px
}

.hero-meta strong {
    font-size: 23px;
    letter-spacing: .15em
}

.hero-meta span {
    font-size: 9px;
    letter-spacing: .28em
}

.scroll-cue {
    bottom: 22px;
    font-size: 8.5px
}

/* sticky story */
.story-pin {
    grid-template-columns: minmax(285px,.64fr) minmax(0,1.36fr);
    gap: 38px;
    padding-block:28px}

.story-ui {
    max-width: 460px
}

.story-counter {
    margin: 12px 0 17px
}

.story-counter span {
    font-size: 62px
}

.story-counter em {
    font-size: 14px
}

.story-copies {
    min-height: 308px
}

.story-copy h2 {
    margin-bottom: 15px;
    font-size: clamp(30px,2.85vw,45px);
    line-height: 1.1;
    letter-spacing: -.038em
}

.story-copy p {
    font-size: 15px;
    line-height: 1.78;
    max-width: 34ch
}

.story-copy ul {
    gap: 9px;
    margin-top: 22px
}

.story-copy li {
    font-size: 12.5px
}

.story-nav {
    gap: 9px;
    margin-top: 8px
}

.story-dot {
    width: 46px;
    height: 3px
}

.story-stage {
    min-height: 548px;
    border-radius: 26px
}

.story-media {
    padding: 34px 38px
}

.story-media img {
    max-width: 91%;
    max-height: 88%
}

.story-media[data-story-media="display"] img,.story-media[data-story-media="warranty"] img {
    max-width: 88%;
    max-height: 84%
}

.story-step {
    height: 84vh
}

/* manifesto and feature content */
.manifesto-grid {
    grid-template-columns: .55fr 1.45fr;
    gap: 7vw
}

.manifesto-copy p {
    max-width: 980px;
    font-size: clamp(31px,4.1vw,60px);
    line-height: 1.18;
    letter-spacing: -.035em
}

.manifesto-note {
    max-width: 590px;
    margin-top: 35px;
    font-size: 15px;
    line-height: 1.8
}

.feature-grid {
    grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr);
    gap: 4.5vw
}

.feature-specs {
    margin-top: 34px
}

.mini-spec {
    padding: 17px 18px
}

.mini-spec strong {
    font-size: clamp(25px,2.45vw,38px)
}

.mini-spec span {
    margin-top: 7px;
    font-size: 10.5px
}

.product-stage {
    min-height: 560px
}

.product-stage img {
    width: min(87%,680px);
    max-height: 565px;
    object-fit: contain
}

.gold-ring {
    width: 58%
}

/* product rail/card composition */
.section-head {
    gap: 28px;
    margin-bottom: 42px
}

.product-card {
    min-height: 540px;
    border-radius: 20px
}

.product-card:nth-child(3),.product-card:nth-child(4) {
    min-height: 430px
}

.product-card-content {
    left: 28px;
    top: 26px
}

.product-card-content h3 {
    font-size: clamp(24px,2vw,34px)
}

.product-card-content p {
    margin-top: 7px;
    font-size: 13px
}

.product-card-image {
    inset: 16% 2% 4% 18%
}

.product-card-image img {
    width: 82%;
    max-height: 82%
}

.product-card .card-arrow {
    right: 23px;
    bottom: 22px;
    width: 47px;
    height: 47px;
    font-size: 20px
}

.product-card .edition {
    left: 28px;
    bottom: 25px;
    font-size: 9.5px
}

.tech-banner {
    min-height: 640px
}

.tech-banner-copy {
    max-width: 540px
}

.tech-banner-copy .metric {
    margin-top: 34px
}

.metric strong {
    font-size: clamp(58px,7vw,104px)
}

.metric span {
    font-size: 16px
}

.media-wall-grid {
    grid-template-columns: 1.08fr .92fr;
    gap: 16px
}

.media-tile {
    min-height: 430px;
    border-radius: 20px
}

.media-tile.small {
    min-height: 207px
}

.media-stack {
    gap: 16px
}

.media-caption {
    left: 20px;
    bottom: 18px;
    padding: 8px 11px;
    font-size: 10px
}

.brand-cta-grid {
    grid-template-columns: 1.12fr .88fr;
    gap: 6vw
}

.brand-cta-mark {
    width: min(100%,350px)
}

.brand-cta-mark img {
    width: min(40vw,350px)
}

/* inner page hero and catalog */
.page-hero {
    min-height: 59svh
}

.page-hero .container {
    padding-bottom: 56px
}

.page-hero-watermark {
    font-size: 20vw
}

.breadcrumb {
    font-size: 11px
}

.product-filter {
    margin-bottom: 30px
}

.filter-btn {
    min-height: 39px;
    padding-inline:16px;font-size: 12px
}

.catalog-grid {
    gap: 16px
}

.catalog-card {
    min-height: 520px;
    border-radius: 20px
}

.catalog-meta {
    left: 27px;
    top: 25px
}

.catalog-meta .series {
    font-size: 9.5px
}

.catalog-meta h2 {
    margin-top: 6px;
    font-size: 31px
}

.catalog-meta p {
    margin-top: 6px;
    font-size: 13px
}

.catalog-image {
    inset: 17% 6% 8%
}

.catalog-image img {
    max-width: 80%;
    max-height: 80%
}

.catalog-card[data-category="liquid"] .catalog-image img {
    max-width: 76%;
    max-height: 78%
}

.catalog-card[data-category="air"] .catalog-image img {
    max-width: 70%;
    max-height: 74%
}

.catalog-footer {
    left: 27px;
    right: 27px;
    bottom: 23px
}

.catalog-footer strong {
    font-size: 11px
}

.catalog-footer span {
    font-size: 18px
}

/* product detail pages */
.product-detail-hero {
    min-height: 86svh
}

.product-detail-grid {
    min-height: calc(86svh - var(--header-h));
    grid-template-columns: .9fr 1.1fr;
    gap: 3.5vw;
    padding: 52px 0 46px
}

.product-detail-copy h1 {
    font-size: clamp(52px,6.5vw,94px);
    line-height: .86;
    letter-spacing: .045em
}

.product-detail-copy .cn-name {
    margin-top: 18px;
    font-size: clamp(21px,2vw,30px)
}

.product-detail-copy p {
    max-width: 470px;
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.78
}

.color-switch {
    margin-top: 25px
}

.swatch {
    padding: 7px 11px;
    font-size: 12px
}

.product-detail-stage {
    min-height: 555px
}

.product-detail-stage::before {
    width: 70%
}

.product-detail-stage img {
    width: min(88%,680px);
    max-height: 610px
}

.product-floating-specs {
    bottom: 32px;
    gap: 24px
}

.float-spec strong {
    font-size: 28px
}

.float-spec span {
    margin-top: 6px;
    font-size: 8.5px
}

.product-intro-band {
    grid-template-columns: .68fr 1.32fr;
    gap: 5vw
}

.product-intro-band .copy {
    top: 112px;
    max-width: 390px
}

.product-intro-band .copy p {
    font-size: 15px;
    line-height: 1.8
}

.feature-image-stack {
    gap: 18px
}

.feature-shot {
    border-radius: 18px
}

.feature-shot-caption {
    padding: 14px 16px;
    font-size: 10.5px
}

.detail-media-full,.detail-media-copy {
    min-height: 650px
}

.detail-media-copy {
    width: min(520px,43vw)
}

.detail-media-copy p {
    font-size: 15.5px;
    line-height: 1.8
}

.spec-layout {
    grid-template-columns: .46fr 1.54fr;
    gap: 5vw
}

.spec-sticky {
    top: 112px
}

.spec-table th,.spec-table td {
    padding: 14px 12px;
    font-size: 13px
}

.spec-group td {
    padding-top: 27px
}

/* support / about / news / contact */
.support-grid {
    gap: 15px
}

.support-card {
    min-height: 285px;
    padding: 25px;
    border-radius: 18px
}

.support-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px
}

.support-card h3 {
    margin-top: 22px;
    font-size: 22px
}

.support-card p {
    margin: 9px 0 21px;
    font-size: 13.5px
}

.download-row {
    padding: 20px 0
}

.download-row strong {
    font-size: 16px
}

.faq-question {
    padding: 19px 0;
    font-size: 14px
}

.about-statement {
    grid-template-columns: .62fr 1.38fr;
    gap: 6vw
}

.about-statement blockquote {
    font-size: clamp(34px,4.4vw,64px);
    line-height: 1.16
}

.about-copy {
    font-size: 15px;
    line-height: 1.85
}

.values-grid {
    gap: 15px
}

.value-card {
    padding: 27px;
    border-radius: 18px
}

.value-card h3 {
    margin-top: 50px;
    font-size: 25px
}

.value-card p {
    font-size: 13.5px
}

.news-grid {
    gap: 18px
}

.news-copy {
    padding: 22px
}

.news-copy h2 {
    margin: 10px 0 9px;
    font-size: 21px
}

.news-copy p {
    font-size: 13.5px
}

.news-link {
    margin-top: 17px;
    font-size: 13px
}

.contact-grid {
    grid-template-columns: .62fr 1.38fr;
    gap: 6vw
}

.contact-channel {
    padding: 20px
}

.contact-channel strong {
    font-size: 16px
}

.contact-form {
    gap: 14px
}

.field label {
    font-size: 11px
}

.field input,.field textarea,.field select {
    min-height: 48px;
    font-size: 13.5px
}

.site-footer .footer-main {
    padding-top: 68px;
    padding-bottom: 58px
}

.footer-brand>img {
    width: 190px
}

.footer-brand p {
    max-width: 390px;
    font-size: 13px
}

.footer-column h4 {
    font-size: 12px
}

.footer-column a {
    font-size: 13px
}

@media(max-width: 1180px) {
    .container {
        width:min(calc(100% - 54px),var(--max))
    }

    .story-pin {
        grid-template-columns: minmax(260px,.7fr) 1.3fr;
        gap: 28px
    }

    .story-stage {
        min-height: 500px
    }

    .product-stage {
        min-height: 510px
    }

    .catalog-card {
        min-height: 480px
    }
}

@media(max-width: 900px) {
    :root {
        --header-h:74px;
        --space-section: 82px;
        --space-section-tight: 58px
    }

    .container {
        width: calc(100% - 38px)
    }

    .display {
        font-size: clamp(40px,10vw,66px)
    }

    .title {
        font-size: clamp(31px,7.8vw,49px)
    }

    .title-sm {
        font-size: clamp(26px,6.3vw,38px)
    }

    .story-pin {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-block:18px}

    .story-ui {
        max-width: none
    }

    .story-copies {
        min-height: 250px
    }

    .story-stage {
        min-height: 440px
    }

    .story-media {
        padding: 20px
    }

    .story-step {
        height: 78vh
    }

    .manifesto-grid,.feature-grid,.brand-cta-grid {
        gap: 48px
    }

    .product-stage {
        min-height: 470px
    }

    .catalog-card {
        min-height: 450px
    }

    .product-detail-grid {
        min-height: auto;
        grid-template-columns: 1fr;
        padding: 52px 0 44px
    }

    .product-detail-copy {
        max-width: 600px
    }

    .product-detail-stage {
        min-height: 490px
    }

    .product-floating-specs {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: -6px;
        justify-content: flex-start
    }

    .product-intro-band,.spec-layout {
        gap: 38px
    }

    .detail-media-copy {
        width: min(560px,88vw)
    }
}

@media(max-width: 620px) {
    :root {
        --space-section:68px;
        --space-section-tight: 48px
    }

    .container {
        width: calc(100% - 30px)
    }

    .intro-center {
        height: 290px
    }

    .intro-symbol {
        width: 68px;
        height: 49px
    }

    .intro-wordmark-window {
        height: 58px
    }

    .intro-cn {
        font-size: 7.5px
    }

    .intro-sub {
        font-size: 6.5px
    }

    .hero-inner {
        padding-bottom: 84px
    }

    .hero-copy {
        width: 100%
    }

    .hero-copy h1 {
        font-size: clamp(39px,11.4vw,58px);
        max-width: 9ch
    }

    .hero-copy p {
        font-size: 14px;
        line-height: 1.7
    }

    .story-counter span {
        font-size: 44px
    }

    .story-copy h2 {
        font-size: clamp(27px,8vw,36px)
    }

    .story-copy p {
        font-size: 14px
    }

    .story-stage {
        min-height: 315px;
        border-radius: 20px
    }

    .manifesto-copy p {
        font-size: clamp(29px,8vw,40px)
    }

    .manifesto-note {
        font-size: 14px
    }

    .product-stage {
        min-height: 390px
    }

    .product-stage img {
        max-height: 400px
    }

    .product-card {
        min-height: 430px!important
    }

    .product-card-content h3 {
        font-size: 25px
    }

    .product-card-image {
        inset: 20% -2% 8% 7%
    }

    .tech-banner {
        min-height: 570px
    }

    .media-tile {
        min-height: 340px
    }

    .media-tile.small {
        min-height: 185px
    }

    .page-hero {
        min-height: 54svh
    }

    .page-hero .container {
        padding-bottom: 42px
    }

    .catalog-card {
        min-height: 430px
    }

    .catalog-meta h2 {
        font-size: 27px
    }

    .catalog-image {
        inset: 20% 3% 10%
    }

    .product-detail-copy h1 {
        font-size: 64px
    }

    .product-detail-stage {
        min-height: 390px
    }

    .product-detail-stage img {
        max-height: 430px
    }

    .product-floating-specs {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        width: 100%;
        gap: 12px
    }

    .float-spec strong {
        font-size: 22px
    }

    .detail-media-full,.detail-media-copy {
        min-height: 520px
    }

    .support-card {
        min-height: 250px
    }

    .value-card h3 {
        margin-top: 38px
    }
}

/* ========================================================================== 
   WEKYPSYR V7 — unified lockup intro + refined luxury-tech palette
   ========================================================================== */
:root {
    --gold: #c99d54;
    --gold-light: #ead39d;
    --blue: #788cff;
    --ivory: #f7f4ed;
}

.intro-screen {
    background: #020304;
    overflow: hidden
}

.intro-ambient {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 50% 46%,rgba(201,157,84,.13),transparent 24%),radial-gradient(circle at 51% 48%,rgba(120,140,255,.08),transparent 42%);
    filter: blur(12px);
    animation: introAmbientV7 4.4s ease both
}

.intro-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size: 96px 96px;
    mask-image: radial-gradient(circle at center,#000 0%,transparent 68%);
    opacity: .7
}

.intro-center {
    position: relative;
    width: 100%;
    height: 340px;
    display: flex;
    align-items: center;
    justify-content: center
}

.intro-lockup-shell {
    --lockup-full: min(82vw,980px);
    position: absolute;
    left: 50%;
    top: 50%;
    width: 192px;
    height: 190px;
    transform: translate(-50%,-58%);
    overflow: hidden;
    animation: introLockupExpand 1.55s .88s cubic-bezier(.2,.78,.18,1) forwards;
    filter: drop-shadow(0 20px 54px rgba(0,0,0,.38))
}

.intro-lockup-image {
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--lockup-full);
    max-width: none;
    height: auto;
    transform: translateY(-50%);
    object-fit: contain;
    object-position: left center;
    opacity: 0;
    animation: introLockupOn .55s .15s ease forwards
}

.intro-scan {
    position: absolute;
    z-index: 2;
    top: 17%;
    bottom: 17%;
    left: 176px;
    width: 1px;
    background: linear-gradient(180deg,transparent,#d7e0ff 20%,#ead39d 75%,transparent);
    box-shadow: 0 0 18px rgba(151,171,255,.8);
    opacity: 0;
    animation: introScanV7 1.45s .93s cubic-bezier(.2,.78,.18,1) forwards
}

.intro-cn {
    position: absolute;
    top: 73%;
    margin: 0;
    color: var(--ivory);
    font-size: clamp(15px,1.35vw,20px);
    font-weight: 720;
    letter-spacing: .22em;
    opacity: 0;
    transform: translateY(12px);
    animation: introTextV7 .7s 2.15s ease forwards
}

.intro-sub {
    position: absolute;
    top: 86%;
    bottom: auto;
    margin: 0;
    color: rgba(234,211,157,.86);
    font-family: var(--font-en);
    font-size: clamp(11px,.88vw,14px);
    font-weight: 700;
    letter-spacing: .36em;
    opacity: 0;
    animation: introTextV7 .7s 2.42s ease forwards
}

.intro-line {
    display: none
}

@keyframes introLockupOn {
    to {
        opacity: 1
    }
}

@keyframes introLockupExpand {
    0%,18% {
        width: 192px
    }

    100% {
        width: var(--lockup-full)
    }
}

@keyframes introScanV7 {
    0% {
        opacity: 0;
        left: 176px
    }

    16% {
        opacity: 1
    }

    85% {
        opacity: .85
    }

    100% {
        opacity: 0;
        left: calc(var(--lockup-full) - 18px)
    }
}

@keyframes introTextV7 {
    to {
        opacity: 1;
        transform: none
    }
}

@keyframes introAmbientV7 {
    0% {
        opacity: .4;
        transform: scale(.92)
    }

    45% {
        opacity: 1
    }

    100% {
        opacity: .65;
        transform: scale(1.06)
    }
}

.header-logo-stack {
    width: 66px;
    height: 54px
}

.header-logo-stack img {
    filter: drop-shadow(0 4px 18px rgba(0,0,0,.82))
}

.site-header.mega-active .header-logo-stack {
    transform: translateY(-1px)
}

.nav-link:hover,.nav-item:hover>.nav-link,.nav-item:focus-within>.nav-link,.nav-item.is-open>.nav-link {
    color: var(--gold-light)
}

.page-progress span {
    background: linear-gradient(90deg,#778cff,var(--gold-light),#fff1d1)
}

.story-copy li::before,.story-dot.active {
    background: linear-gradient(90deg,#788cff,var(--gold-light))
}

@media(max-width: 700px) {
    .intro-center {
        height:260px
    }

    .intro-lockup-shell {
        --lockup-full: min(90vw,620px);
        width: 122px;
        height: 130px;
        transform: translate(-50%,-62%)
    }

    .intro-scan {
        left: 112px
    }

    @keyframes introLockupExpand {
        0%,18% {
            width: 122px
        }

        100% {
            width: var(--lockup-full)
        }
    }

    @keyframes introScanV7 {
        0% {
            opacity: 0;
            left: 112px
        }

        16% {
            opacity: 1
        }

        85% {
            opacity: .85
        }

        100% {
            opacity: 0;
            left: calc(var(--lockup-full) - 12px)
        }
    }

    .intro-cn {
        top: 70%;
        font-size: 12px;
        letter-spacing: .16em
    }

    .intro-sub {
        top: 83%;
        font-size: 8px;
        letter-spacing: .22em
    }
}

@media(prefers-reduced-motion:reduce) {
    .intro-lockup-shell {
        width: var(--lockup-full);
        animation: none
    }

    .intro-lockup-image,.intro-cn,.intro-sub {
        opacity: 1;
        animation: none;
        transform: none
    }

    .intro-scan {
        display: none
    }
}

/* ========================================================================== 
   WEKYPSYR V7 — natural document scroll, V5-derived mark, restrained editorial type
   References: immersive navigation rhythm + concise product-led editorial layout.
   ========================================================================== */
:root {
    --gold: #d4ae68;
    --gold-light: #f0d8a2;
    --blue: #758bff;
    --ivory: #f7f4ed;
    --max: 1440px;
    --font-cn: "HarmonyOS Sans SC","PingFang SC","Noto Sans CJK SC","Microsoft YaHei",Arial,sans-serif;
    --font-en: "Helvetica Neue","Arial Narrow",Arial,sans-serif;
    --space-section: 112px;
    --space-section-tight: 78px;
}

body {
    font-size: 15px;
    line-height: 1.72;
    font-weight: 400;
    letter-spacing: 0
}

.container {
    width: min(calc(100% - 88px),var(--max))
}

.section {
    padding-block:var(--space-section)}

.eyebrow {
    font-size: 10px;
    letter-spacing: .2em;
    font-weight: 650;
    margin-bottom: 14px
}

.display {
    font-size: clamp(42px,5vw,78px);
    line-height: 1.02;
    letter-spacing: -.04em
}

.title {
    font-size: clamp(31px,3.35vw,52px);
    line-height: 1.1;
    letter-spacing: -.035em;
    text-wrap: balance
}

.title-sm {
    font-size: clamp(25px,2.55vw,39px);
    line-height: 1.16;
    letter-spacing: -.025em;
    text-wrap: balance
}

.lead {
    max-width: 610px;
    margin-top: 18px;
    font-size: clamp(15px,1.05vw,17px);
    line-height: 1.8;
    color: #b8bcc2
}

.btn {
    min-height: 45px;
    padding: 0 18px;
    font-size: 12.5px;
    letter-spacing: .02em
}

/* One V5-derived logo file: the W is the first frame, the same lockup reveals rightward. */
.intro-screen {
    background: #020304
}

.intro-grid {
    background-size: 112px 112px;
    opacity: .42
}

.intro-center {
    height: 300px
}

.intro-lockup-shell {
    --lockup-full: min(77vw,880px);
    left: 50%;
    top: 47%;
    width: 150px;
    height: 168px;
    transform: translate(-50%,-50%);
    animation: introLockupExpandV7 1.35s .78s cubic-bezier(.16,.82,.18,1) forwards;
    filter: drop-shadow(0 18px 48px rgba(0,0,0,.48))
}

.intro-lockup-image {
    width: var(--lockup-full);
    animation: introLockupOn .45s .14s ease forwards
}

.intro-scan {
    left: 138px;
    top: 18%;
    bottom: 18%;
    animation: introScanV7 1.28s .82s cubic-bezier(.16,.82,.18,1) forwards;
    background: linear-gradient(180deg,transparent,#fff4d7 25%,#758bff 72%,transparent)
}

.intro-cn {
    top: 70%;
    font-size: clamp(13px,1vw,16px);
    font-weight: 650;
    letter-spacing: .14em
}

.intro-sub {
    top: 82%;
    font-size: clamp(9px,.72vw,11px);
    font-weight: 650;
    letter-spacing: .27em;
    color: rgba(240,216,162,.78)
}

@keyframes introLockupExpandV7 {
    0%,18% {
        width: 150px
    }

    100% {
        width: var(--lockup-full)
    }
}

@keyframes introScanV7 {
    0% {
        opacity: 0;
        left: 138px
    }

    16% {
        opacity: 1
    }

    82% {
        opacity: .75
    }

    100% {
        opacity: 0;
        left: calc(var(--lockup-full) - 14px)
    }
}

.header-logo-stack {
    width: 58px;
    height: 43px
}

.header-inner {
    width: min(calc(100% - 72px),1510px)
}

.nav-group {
    gap: 34px
}

.nav-link {
    font-size: 11.5px;
    letter-spacing: .05em;
    font-weight: 600
}

.site-header .submenu:not(.submenu-language) {
    padding: 26px max(40px,calc((100vw - 1440px)/2));
    gap: 18px
}

.site-header .submenu:not(.submenu-language)>.submenu-label {
    flex-basis: 170px;
    font-size: 10.5px
}

.site-header .submenu:not(.submenu-language)>a {
    min-height: 156px;
    padding: 18px 18px 16px
}

.site-header .submenu:not(.submenu-language) strong {
    font-size: 14px
}

.site-header .submenu:not(.submenu-language) small {
    font-size: 10.5px;
    max-width: 22ch
}

.site-header .submenu-products>a img {
    max-height: 74px
}

.hero-copy {
    width: min(720px,67vw)
}

.hero-copy h1 {
    max-width: 13ch;
    font-size: clamp(43px,4.75vw,72px);
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 720
}

.hero-copy h1 span {
    display: inline
}

.hero-copy h1 .hero-accent {
    color: var(--gold-light)
}

.hero-copy h1 .hero-accent::before {
    content: ""
}

.hero-copy p {
    max-width: 520px;
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.75
}

.hero-meta strong {
    font-size: 20px;
    letter-spacing: .15em
}

.hero-meta span {
    font-size: 8.5px
}

/* The technical story remains a normal vertical page experience: no wheel capture. */
.story-showcase {
    height: 360vh
}

.story-pin {
    grid-template-columns: minmax(300px,.67fr) minmax(0,1.33fr);
    gap: 46px
}

.story-ui {
    max-width: 440px
}

.story-counter span {
    font-size: 50px
}

.story-counter em {
    font-size: 12px
}

.story-copies {
    min-height: 230px
}

.story-copy h2 {
    font-size: clamp(27px,2.5vw,39px);
    line-height: 1.14;
    letter-spacing: -.032em;
    font-weight: 680;
    max-width: 14ch
}

.story-copy p {
    font-size: 14px;
    line-height: 1.78;
    max-width: 31ch
}

.story-copy ul {
    margin-top: 18px;
    gap: 8px
}

.story-copy li {
    font-size: 11.5px
}

.story-stage {
    min-height: 520px;
    border-radius: 22px
}

.story-media {
    padding: 32px 34px
}

.story-media img {
    max-width: 90%;
    max-height: 86%
}

.story-step {
    height: 76vh
}

.manifesto-grid {
    grid-template-columns: .45fr 1.55fr;
    gap: 6vw
}

.manifesto-copy p {
    max-width: 850px;
    font-size: clamp(30px,3.55vw,52px);
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: -.03em
}

.manifesto-note {
    max-width: 550px;
    margin-top: 28px;
    font-size: 14px;
    line-height: 1.85
}

.feature-grid {
    grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr);
    gap: 5vw
}

.feature-copy {
    max-width: 570px
}

.feature-specs {
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    margin-top: 30px
}

.mini-spec {
    padding: 15px 14px
}

.mini-spec strong {
    font-size: clamp(23px,2vw,32px)
}

.product-stage {
    min-height: 520px
}

.product-stage img {
    width: min(88%,620px);
    max-height: 520px
}

/* Product family returns to natural document flow, inspired by concise product-led homepages. */
.page-home .products-showcase {
    height: auto!important;
    min-height: 0!important;
    padding-block:var(--space-section)!important;overflow: visible!important
}

.page-home .products-showcase>.container {
    position: relative!important;
    top: auto!important;
    width: min(calc(100% - 88px),var(--max))!important;
    max-width: var(--max)!important;
    height: auto!important;
    display: block!important;
    overflow: visible!important
}

.page-home .products-showcase::after {
    display: none!important
}

.page-home .product-card-grid {
    display: grid!important;
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 18px!important;
    width: auto!important;
    transform: none!important;
    transition: none!important;
    will-change: auto!important
}

.page-home .product-card {
    flex: none!important;
    min-height: 440px!important;
    max-height: none!important;
    border-radius: 18px
}

.page-home .product-card:nth-child(1) {
    grid-column: span 2;
    min-height: 570px!important
}

.page-home .product-card:nth-child(1) .product-card-image {
    inset: 12% 4% 3% 40%
}

.page-home .product-card:nth-child(1) .product-card-image img {
    width: 92%;
    max-height: 510px
}

.page-home .product-card:nth-child(n+2) {
    min-height: 420px!important
}

.product-card-content {
    left: 25px;
    top: 24px
}

.product-card-content h3 {
    font-size: clamp(23px,1.8vw,30px)
}

.product-card-content p {
    font-size: 12px
}

.product-card-image {
    inset: 17% 2% 5% 14%
}

.product-card-image img {
    width: 82%;
    max-height: 82%
}

.product-card .edition {
    left: 25px;
    bottom: 23px;
    font-size: 9px
}

.product-card .card-arrow {
    right: 21px;
    bottom: 20px;
    width: 44px;
    height: 44px;
    font-size: 18px
}

.tech-banner {
    min-height: 600px
}

.tech-banner-copy {
    max-width: 500px
}

.metric strong {
    font-size: clamp(52px,6.2vw,90px)
}

.metric span {
    font-size: 14px
}

.media-wall-grid {
    gap: 14px
}

.media-tile {
    min-height: 390px;
    border-radius: 17px
}

.media-tile.small {
    min-height: 188px
}

.brand-cta-grid {
    grid-template-columns: 1.2fr .8fr
}

.brand-cta-mark img {
    width: min(34vw,300px)
}

/* Inner pages: fewer oversized stacks and a calmer editorial hierarchy. */
.page-hero {
    min-height: 55svh
}

.page-hero .display {
    max-width: 13ch
}

.page-hero-watermark {
    font-size: 17vw
}

.catalog-grid {
    gap: 18px
}

.catalog-card {
    min-height: 470px
}

.catalog-meta h2 {
    font-size: 28px
}

.product-detail-hero {
    min-height: 80svh
}

.product-detail-grid {
    min-height: calc(80svh - var(--header-h));
    grid-template-columns: .82fr 1.18fr
}

.product-detail-copy h1 {
    font-size: clamp(48px,5.5vw,82px);
    line-height: .92
}

.product-detail-copy .cn-name {
    font-size: clamp(20px,1.7vw,27px)
}

.product-detail-copy p {
    font-size: 14px;
    max-width: 440px
}

.product-detail-stage {
    min-height: 520px
}

.product-detail-stage img {
    max-height: 550px
}

.product-intro-band .copy p,.detail-media-copy p,.about-copy {
    font-size: 14px
}

.about-statement blockquote {
    font-size: clamp(31px,3.8vw,54px);
    max-width: 13ch
}

.value-card h3 {
    font-size: 22px
}

.support-card h3 {
    font-size: 20px
}

.news-copy h2 {
    font-size: 19px
}

@media(max-width: 1100px) {
    .container {
        width:min(calc(100% - 54px),var(--max))
    }

    .page-home .products-showcase>.container {
        width: min(calc(100% - 54px),var(--max))!important
    }

    .nav-group {
        gap: 22px
    }

    .story-pin {
        gap: 30px
    }
}

@media(max-width: 900px) {
    :root {
        --space-section:80px;
        --space-section-tight: 58px
    }

    .container {
        width: calc(100% - 38px)
    }

    .page-home .products-showcase>.container {
        width: calc(100% - 38px)!important
    }

    .hero-copy {
        width: 100%
    }

    .hero-copy h1 {
        font-size: clamp(39px,10vw,59px);
        max-width: 10ch
    }

    .story-showcase {
        height: auto;
        padding: 70px 0
    }

    .story-pin {
        position: relative;
        top: auto;
        height: auto;
        grid-template-columns: 1fr;
        gap: 24px
    }

    .story-sentinels {
        display: none
    }

    .story-copies {
        min-height: 225px
    }

    .story-stage {
        min-height: 410px
    }

    .page-home .product-card-grid {
        grid-template-columns: 1fr!important
    }

    .page-home .product-card:nth-child(1) {
        grid-column: auto;
        min-height: 470px!important
    }

    .page-home .product-card:nth-child(1) .product-card-image {
        inset: 18% -2% 6% 7%
    }

    .page-home .product-card:nth-child(1) .product-card-image img {
        width: 86%;
        max-height: 410px
    }

    .page-home .product-card:nth-child(n+2) {
        min-height: 410px!important
    }

    .feature-specs {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width: 620px) {
    :root {
        --space-section:64px;
        --space-section-tight: 46px
    }

    .container {
        width: calc(100% - 30px)
    }

    .page-home .products-showcase>.container {
        width: calc(100% - 30px)!important
    }

    .intro-lockup-shell {
        --lockup-full: min(88vw,600px);
        width: 96px;
        height: 112px
    }

    .intro-scan {
        left: 88px
    }

    @keyframes introLockupExpandV7 {
        0%,18% {
            width: 96px
        }

        100% {
            width: var(--lockup-full)
        }
    }

    @keyframes introScanV7 {
        0% {
            opacity: 0;
            left: 88px
        }

        16% {
            opacity: 1
        }

        82% {
            opacity: .75
        }

        100% {
            opacity: 0;
            left: calc(var(--lockup-full) - 10px)
        }
    }

    .intro-cn {
        top: 69%;
        font-size: 10px;
        letter-spacing: .11em
    }

    .intro-sub {
        top: 81%;
        font-size: 7px;
        letter-spacing: .2em
    }

    .hero-copy h1 {
        font-size: clamp(36px,10.8vw,50px);
        max-width: 9ch
    }

    .hero-copy p {
        font-size: 13.5px
    }

    .story-copy h2 {
        font-size: clamp(25px,7.4vw,32px);
        max-width: 12ch
    }

    .story-stage {
        min-height: 300px;
        border-radius: 17px
    }

    .manifesto-copy p {
        font-size: clamp(27px,7.7vw,37px)
    }

    .page-home .product-card:nth-child(1),.page-home .product-card:nth-child(n+2) {
        min-height: 390px!important
    }

    .product-card-image {
        inset: 20% -4% 7% 4%
    }

    .page-home .product-card:nth-child(1) .product-card-image {
        inset: 20% -4% 7% 4%
    }

    .page-home .product-card:nth-child(1) .product-card-image img {
        width: 82%;
        max-height: 340px
    }

    .page-hero {
        min-height: 50svh
    }

    .product-detail-copy h1 {
        font-size: 56px
    }
}

@media(prefers-reduced-motion:reduce) {
    .intro-lockup-shell {
        width: var(--lockup-full);
        animation: none
    }
}

/* V7.1 integrated lockup and non-stacked hero title */
.intro-lockup-shell {
    --lockup-full: min(72vw,820px);
    width: 174px
}

.intro-scan {
    left: 160px
}

@keyframes introLockupExpandV7 {
    0%,18% {
        width: 174px
    }

    100% {
        width: var(--lockup-full)
    }
}

@keyframes introScanV7 {
    0% {
        opacity: 0;
        left: 160px
    }

    16% {
        opacity: 1
    }

    82% {
        opacity: .75
    }

    100% {
        opacity: 0;
        left: calc(var(--lockup-full) - 14px)
    }
}

.hero-copy {
    width: min(780px,72vw)
}

.hero-copy h1 {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(42px,4.45vw,68px)
}

@media(max-width: 900px) {
    .hero-copy h1 {
        max-width:none;
        white-space: nowrap;
        font-size: clamp(38px,9.2vw,48px)
    }
}

@media(max-width: 620px) {
    .hero-copy h1 {
        font-size:clamp(36px,9.5vw,41px);
        letter-spacing: -.06em
    }

    .intro-lockup-shell {
        --lockup-full: min(86vw,560px);
        width: 112px
    }

    .intro-scan {
        left: 102px
    }

    @keyframes introLockupExpandV7 {
        0%,18% {
            width: 112px
        }

        100% {
            width: var(--lockup-full)
        }
    }

    @keyframes introScanV7 {
        0% {
            opacity: 0;
            left: 102px
        }

        16% {
            opacity: 1
        }

        82% {
            opacity: .75
        }

        100% {
            opacity: 0;
            left: calc(var(--lockup-full) - 10px)
        }
    }
}

/* === v8.css === */
/* WEKYPSYR V8 — natural document scroll, consistent logo baseline, business-ready public services */
:root {
    --v8-gold: #c99945;
    --v8-gold-light: #ead39d;
    --v8-gold-deep: #8e6425;
    --v8-ivory: #f7f4ed;
    --v8-blue: #758bff;
    --v8-bg: #020304;
    --v8-panel: #080a0d;
    --v8-line: rgba(255,255,255,.10);
    --v8-muted: #9a9ea5;
    --v8-ease: cubic-bezier(.2,.75,.2,1);
}

html {
    scroll-behavior: smooth
}

body {
    font-family: "Noto Sans CJK SC","Microsoft YaHei","PingFang SC",Arial,sans-serif;
    font-size: 15px;
    line-height: 1.7;
    background: var(--v8-bg)
}

button,input,textarea,select {
    font: inherit
}

.container {
    width: min(calc(100% - 88px),1380px)
}

@media(max-width: 760px) {
    .container {
        width:calc(100% - 36px)
    }
}

/* Header and full-width interaction */
.v8-header {
    --header-h: 78px;
    height: var(--header-h);
    background: linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,.18) 72%,transparent);
    z-index: 3600
}

.v8-header .header-inner {
    height: 100%;
    width: min(calc(100% - 70px),1540px);
    grid-template-columns: 1fr 78px 1fr;
    gap: 24px
}

.v8-header .nav-group {
    gap: 30px;
    height: 100%;
    align-items: center
}

.v8-header .nav-group.right {
    justify-content: flex-end
}

.v8-header .nav-link {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .045em;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0,0,0,.7)
}

.v8-header .nav-link::before {
    width: 7px;
    height: 7px;
    opacity: .38
}

.v8-header .nav-link.simple::before {
    display: none
}

.v8-header .nav-link:hover,.v8-header .nav-item:hover>.nav-link,.v8-header .nav-item.is-open>.nav-link,.v8-header .nav-link:focus-visible {
    color: var(--v8-gold-light)
}

.v8-header .header-logo {
    width: 70px;
    height: 70px
}

.v8-header .header-logo-stack {
    width: 55px;
    height: 40px;
    display: block;
    position: relative
}

.v8-header .header-logo-stack img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity .3s var(--v8-ease),transform .3s var(--v8-ease)
}

.v8-header .header-logo-white {
    opacity: 1
}

.v8-header .header-logo-gold {
    opacity: 0
}

.v8-header .header-logo:hover .header-logo-white {
    opacity: 0
}

.v8-header .header-logo:hover .header-logo-gold {
    opacity: 1;
    transform: scale(1.04)
}

.v8-header .header-utility {
    gap: 7px
}

.v8-header .icon-btn {
    width: 38px;
    height: 38px;
    color: #fff
}

.v8-header .icon-btn:hover {
    color: var(--v8-gold-light)
}

.cart-link {
    position: relative
}

.cart-count,.cart-count2 {
    position: absolute;
    right: 1px;
    top: 1px;
    display: grid;
    place-items: center;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--v8-gold);
    color: #0a0804;
    font-size: 8px;
    font-weight: 800
}

.v8-header.scrolled {
    background: rgba(2,3,4,.90);
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
    backdrop-filter: blur(18px)
}

.v8-header .mega-panel {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    width: 100%;
    padding: 0;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
    background: rgba(3,4,6,.975);
    box-shadow: 0 32px 80px rgba(0,0,0,.48);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s var(--v8-ease),transform .32s var(--v8-ease),visibility .25s
}

.v8-header .nav-item:hover>.mega-panel,.v8-header .nav-item.is-open>.mega-panel,.v8-header .nav-item:focus-within>.mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none
}

.mega-wrap {
    width: min(calc(100% - 96px),1420px);
    margin: auto;
    display: grid;
    grid-template-columns: 270px minmax(0,1fr);
    gap: 48px;
    padding: 38px 0 42px
}

.mega-intro {
    padding-right: 20px
}

.mega-intro>span {
    display: block;
    color: var(--v8-gold-light);
    font-size: 10px;
    letter-spacing: .24em;
    font-weight: 700
}

.mega-intro h2 {
    margin: 12px 0 10px;
    font-size: 29px;
    line-height: 1.15;
    letter-spacing: -.04em
}

.mega-intro p {
    margin: 0;
    color: #8f949b;
    font-size: 13px;
    line-height: 1.8
}

.mega-intro>a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    color: #fff;
    font-size: 12px;
    font-weight: 700
}

.mega-intro>a:hover {
    color: var(--v8-gold-light)
}

.mega-product-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
    color: #f2f0ea;
}

.mega-product-card {
    display: block;
    min-width: 0;
    padding: 14px 14px 18px;
    border: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
    transition: .34s var(--v8-ease)
}

.mega-product-card:hover {
    border-color: rgba(234,211,157,.38);
    background: rgba(201,153,69,.06);
    transform: translateY(-3px)
}

.mega-product-media {
    height: 178px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 45%,rgba(67,91,155,.16),transparent 50%)
}

.mega-product-media img {
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 20px 28px rgba(0,0,0,.5))
}

.mega-product-media.air img {
    max-height: 78%
}

.mega-product-media.white {
    background: radial-gradient(circle at 50% 45%,rgba(255,255,255,.08),transparent 50%)
}

.mega-product-card>span {
    display: block;
    margin-top: 13px;
    color: var(--v8-gold-light);
    font-size: 9px;
    letter-spacing: .19em
}

.mega-product-card>strong {
    display: block;
    margin-top: 5px;
    font-size: 18px;
    color: #f2f0ea;
}

.mega-product-card>small {
    display: block;
    margin-top: 4px;
    color: #8e939a;
    font-size: 11px
}

.mega-simple {
    grid-template-columns: 290px 1fr
}

.mega-link-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px
}

.mega-link-grid.support-links {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

.mega-link-grid>a {
    display: grid;
    grid-template-columns: 35px 1fr;
    align-items: start;
    gap: 10px;
    min-height: 132px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.018);
    transition: .3s var(--v8-ease)
}

.mega-link-grid>a:hover {
    border-color: rgba(234,211,157,.36);
    background: rgba(201,153,69,.055);
    transform: translateY(-2px)
}

.mega-link-grid>a>b {
    color: var(--v8-gold-light);
    font-size: 10px;
    letter-spacing: .13em
}

.mega-link-grid strong {
    display: block;
    font-size: 15px
}

.mega-link-grid small {
    display: block;
    margin-top: 7px;
    color: #8d9299;
    font-size: 11px;
    line-height: 1.55
}

.v8-header .submenu-language {
    position: absolute;
    top: calc(100% - 6px);
    left: auto;
    right: -8px;
    width: 220px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: #080a0d;
    border-radius: 6px
}

.v8-header .submenu-language>a {
    display: flex;
    justify-content: space-between;
    padding: 12px 13px;
    color: #fff
}

.v8-header .submenu-language strong {
    font-size: 13px
}

.v8-header .submenu-language small {
    display: block;
    color: #868b92;
    font-size: 9px
}

/* Single aligned metallic lockup intro */
.v8-intro {
    background: #020304!important;
    overflow: hidden!important
}

.v8-intro .intro-ambient {
    position: absolute;
    inset: -15%;
    background: radial-gradient(circle at 50% 48%,rgba(201,153,69,.16),transparent 25%),radial-gradient(circle at 50% 50%,rgba(117,139,255,.07),transparent 48%);
    filter: blur(16px)
}

.v8-intro .intro-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
    background-size: 108px 108px;
    mask-image: radial-gradient(circle,#000,transparent 68%);
    opacity: .48
}

.v8-intro-center {
    position: relative;
    width: 100%;
    height: 330px;
    display: flex;
    align-items: center;
    justify-content: center
}

.v8-intro-shell {
    --full-width: min(76vw,900px);
    position: absolute;
    left: 50%;
    top: 44%;
    width: 166px;
    height: 170px;
    overflow: hidden;
    transform: translate(-50%,-50%);
    animation: v8IntroExpand 1.42s .72s var(--v8-ease) forwards;
    filter: drop-shadow(0 22px 54px rgba(0,0,0,.45))
}

.v8-intro-shell img {
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--full-width);
    max-width: none;
    height: auto;
    transform: translateY(-50%);
    object-position: left center
}

.v8-intro-scan {
    position: absolute;
    z-index: 2;
    left: 152px;
    top: 24%;
    bottom: 24%;
    width: 1px;
    background: linear-gradient(180deg,transparent,#fff4d8 22%,#d1a553 62%,transparent);
    box-shadow: 0 0 17px rgba(234,211,157,.8);
    opacity: 0;
    animation: v8IntroScan 1.3s .78s var(--v8-ease) forwards
}

.v8-intro-cn {
    position: absolute;
    top: 70%;
    margin: 0;
    color: var(--v8-ivory);
    font-size: clamp(16px,1.35vw,21px);
    font-weight: 680;
    letter-spacing: .16em;
    opacity: 0;
    transform: translateY(10px);
    animation: v8IntroText .65s 2.12s ease forwards
}

.v8-intro-en {
    position: absolute;
    top: 82%;
    margin: 0;
    color: rgba(234,211,157,.82);
    font-family: "Inter Display","Arial Narrow",Arial,sans-serif;
    font-size: clamp(10px,.78vw,13px);
    font-weight: 650;
    letter-spacing: .3em;
    opacity: 0;
    animation: v8IntroText .65s 2.32s ease forwards
}

@keyframes v8IntroExpand {
    0%,18% {
        width: 166px
    }

    100% {
        width: var(--full-width)
    }
}

@keyframes v8IntroScan {
    0% {
        opacity: 0;
        left: 152px
    }

    16% {
        opacity: 1
    }

    84% {
        opacity: .8
    }

    100% {
        opacity: 0;
        left: calc(var(--full-width) - 12px)
    }
}

@keyframes v8IntroText {
    to {
        opacity: 1;
        transform: none
    }
}

/* Type scale refinement */
.hero-copy h1 {
    font-size: clamp(43px,5.1vw,76px);
    line-height: 1.02;
    letter-spacing: -.055em
}

.hero-copy p {
    font-size: 15px;
    max-width: 560px
}

.hero-meta strong {
    font-size: 28px
}

.display {
    font-size: clamp(46px,6.5vw,92px)!important;
    line-height: .98!important
}

.title {
    font-size: clamp(34px,4.6vw,64px)!important
}

.title-sm {
    font-size: clamp(28px,3vw,46px)!important
}

.lead {
    font-size: 15px!important;
    line-height: 1.82
}

.eyebrow {
    font-size: 9px!important;
    letter-spacing: .23em!important
}

.section {
    padding-block:clamp(84px,9vw,140px)}

/* Natural vertical technical feature sequence — no sticky, no wheel capture */
.v8-tech-flow {
    background: linear-gradient(180deg,#030405,#05070a 45%,#030405);
    padding-top: 120px
}

.v8-section-heading {
    max-width: 720px;
    margin-bottom: 64px
}

.v8-section-heading h2 {
    margin: 10px 0 18px;
    font-size: clamp(34px,4vw,58px);
    line-height: 1.12;
    letter-spacing: -.045em
}

.v8-section-heading>p:last-child {
    margin: 0;
    color: #8f949b;
    font-size: 14px
}

.v8-tech-list {
    display: grid;
    gap: 26px
}

.v8-tech-panel {
    display: grid;
    grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr);
    min-height: 560px;
    border: 1px solid var(--v8-line);
    background: linear-gradient(145deg,#090b0f,#050608);
    overflow: hidden
}

.v8-tech-panel.reverse {
    grid-template-columns: minmax(0,1.28fr) minmax(300px,.72fr)
}

.v8-tech-panel.reverse .v8-tech-copy {
    order: 2
}

.v8-tech-panel.reverse .v8-tech-media {
    order: 1
}

.v8-tech-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 58px clamp(36px,5vw,72px)
}

.v8-tech-copy>span {
    color: var(--v8-gold-light);
    font-size: 9px;
    letter-spacing: .23em
}

.v8-tech-copy h3 {
    margin: 14px 0 16px;
    font-size: clamp(29px,3vw,45px);
    line-height: 1.16;
    letter-spacing: -.04em
}

.v8-tech-copy>p {
    margin: 0;
    color: #9ba0a6;
    font-size: 14px;
    max-width: 520px
}

.v8-tech-copy dl {
    display: flex;
    gap: 38px;
    margin: 34px 0 0
}

.v8-tech-copy dl div {
    border-left: 1px solid rgba(234,211,157,.35);
    padding-left: 14px
}

.v8-tech-copy dt {
    color: #fff;
    font-family: "Inter Display",Arial,sans-serif;
    font-size: 18px;
    font-weight: 700
}

.v8-tech-copy dd {
    margin: 4px 0 0;
    color: #81868d;
    font-size: 11px
}

.v8-tech-copy .text-link {
    margin-top: 28px;
    color: var(--v8-gold-light);
    font-size: 12px
}

.v8-tech-media {
    min-width: 0;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 45%,rgba(58,82,147,.19),transparent 54%),#050609
}

.v8-tech-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(5,6,9,.35),transparent 28%);
    pointer-events: none
}

.v8-tech-panel.reverse .v8-tech-media::after {
    background: linear-gradient(-90deg,rgba(5,6,9,.35),transparent 28%)
}

.v8-tech-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--v8-ease)
}

.v8-tech-panel:hover .v8-tech-media img {
    transform: scale(1.018)
}

/* Stable product grids with explicit actions */
.v8-products-showcase {
    background: #030405
}

.v8-products-showcase .section-head {
    align-items: end;
    margin-bottom: 34px
}

.v8-products-showcase .section-head .lead {
    margin-top: 12px;
    color: #858a91
}

.v8-product-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px
}

.v8-product-card {
    position: relative;
    min-width: 0;
    min-height: 480px;
    overflow: hidden;
    border: 1px solid var(--v8-line);
    background: radial-gradient(circle at 65% 42%,rgba(59,84,150,.16),transparent 42%),linear-gradient(145deg,#0b0d10,#050607)
}

.v8-product-card.flagship {
    grid-column: 1/-1;
    min-height: 610px
}

.v8-product-copy {
    position: absolute;
    z-index: 3;
    left: 32px;
    top: 30px;
    max-width: 330px
}

.v8-product-copy>span {
    color: var(--v8-gold-light);
    font-size: 9px;
    letter-spacing: .2em
}

.v8-product-copy h3 {
    margin: 9px 0 5px;
    font-size: clamp(26px,2.4vw,39px);
    letter-spacing: -.04em
}

.v8-product-copy p {
    margin: 0;
    color: #94999f;
    font-size: 13px
}

.v8-product-image {
    position: absolute;
    inset: 17% 3% 6%;
    display: grid;
    place-items: center
}

.v8-product-image img {
    max-width: 86%;
    max-height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 28px 38px rgba(0,0,0,.5));
    transition: transform .55s var(--v8-ease)
}

.v8-product-image.air img {
    max-height: 78%;
    max-width: 74%
}

.v8-product-card.flagship .v8-product-image {
    inset: 8% 4% 2% 36%
}

.v8-product-card.flagship .v8-product-image img {
    max-width: 95%;
    max-height: 94%
}

.v8-product-card:hover .v8-product-image img {
    transform: scale(1.025) translateY(-3px)
}

.v8-card-actions {
    position: absolute;
    z-index: 4;
    left: 32px;
    bottom: 28px;
    display: flex;
    gap: 10px
}

.v8-card-actions a,.v8-card-actions button {
    min-height: 39px;
    padding: 0 15px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(4,5,7,.55);
    color: #fff;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer
}

.v8-card-actions a:hover,.v8-card-actions button:hover {
    border-color: var(--v8-gold);
    color: var(--v8-gold-light)
}

.v8-service-grid-section {
    padding-top: 0
}

.v8-service-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    border-top: 1px solid var(--v8-line);
    border-bottom: 1px solid var(--v8-line)
}

.v8-service-grid>a {
    position: relative;
    display: grid;
    min-height: 220px;
    padding: 36px 34px;
    border-right: 1px solid var(--v8-line);
    transition: background .3s
}

.v8-service-grid>a:last-child {
    border-right: 0
}

.v8-service-grid>a:hover {
    background: rgba(201,153,69,.05)
}

.v8-service-grid span {
    color: var(--v8-gold-light);
    font-size: 9px;
    letter-spacing: .2em
}

.v8-service-grid strong {
    align-self: end;
    font-size: 21px
}

.v8-service-grid small {
    margin-top: 6px;
    color: #878c93
}

.v8-service-grid b {
    position: absolute;
    right: 24px;
    top: 25px;
    color: #858a91;
    font-size: 18px
}

.v8-catalog-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px
}

.v8-catalog-card {
    min-width: 0;
    border: 1px solid var(--v8-line);
    background: #07090c
}

.v8-catalog-media {
    aspect-ratio: 16/10;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%,rgba(64,89,157,.17),transparent 53%)
}

.v8-catalog-media img {
    max-width: 84%;
    max-height: 84%;
    object-fit: contain;
    filter: drop-shadow(0 25px 34px rgba(0,0,0,.5));
    transition: transform .5s var(--v8-ease)
}

.v8-catalog-media.air img {
    max-height: 76%;
    max-width: 70%
}

.v8-catalog-card:hover img {
    transform: scale(1.025)
}

.v8-catalog-info {
    padding: 25px 27px 27px
}

.v8-catalog-info>span {
    color: var(--v8-gold-light);
    font-size: 9px;
    letter-spacing: .19em
}

.v8-catalog-info h2 {
    margin: 7px 0 3px;
    font-size: 29px;
    letter-spacing: -.04em
}

.v8-catalog-info p {
    margin: 0;
    color: #8f949b;
    font-size: 12px
}

.v8-catalog-info>div {
    display: flex;
    gap: 10px;
    margin-top: 20px
}

.v8-catalog-info a,.v8-catalog-info button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: transparent;
    color: #fff;
    font-size: 11px;
    cursor: pointer
}

.v8-catalog-info a:hover,.v8-catalog-info button:hover {
    border-color: var(--v8-gold);
    color: var(--v8-gold-light)
}

/* Public business functions */
.v8-page-hero {
    min-height: 64svh
}

.v8-query-layout {
    display: grid;
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
    gap: 22px
}

.v8-query-card,.v8-query-result {
    min-height: 480px;
    padding: 42px;
    border: 1px solid var(--v8-line);
    background: linear-gradient(145deg,#0a0c10,#050607)
}

.v8-query-head>span {
    color: var(--v8-gold-light);
    font-size: 9px;
    letter-spacing: .2em
}

.v8-query-head h2 {
    margin: 10px 0 8px;
    font-size: 31px
}

.v8-query-head p {
    margin: 0;
    color: #8f949b
}

.v8-query-form {
    margin-top: 42px
}

.v8-query-form label {
    display: block;
    color: #d8d9dc;
    font-size: 12px
}

.v8-query-form label>div {
    display: flex;
    margin-top: 10px
}

.v8-query-form input[type=text],.v8-query-form input:not([type]) {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,.14);
    border-right: 0;
    background: #030405;
    color: #fff;
    outline: none
}

.v8-query-form input:focus {
    border-color: rgba(234,211,157,.55)
}

.v8-query-form button {
    height: 52px;
    padding: 0 24px;
    border: 1px solid var(--v8-gold);
    background: var(--v8-gold);
    color: #0b0804;
    font-weight: 750;
    cursor: pointer
}

.v8-consent {
    display: flex!important;
    gap: 9px;
    align-items: flex-start;
    margin-top: 15px;
    color: #7f858c!important;
    font-size: 10px!important
}

.v8-consent input {
    margin-top: 4px
}

.v8-query-demo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
    color: #72777e;
    font-size: 10px
}

.v8-query-demo button {
    border: 0;
    background: rgba(255,255,255,.04);
    color: #aeb2b8;
    padding: 5px 8px;
    cursor: pointer
}

.v8-query-result {
    display: grid;
    align-content: center
}

.empty-state {
    text-align: center
}

.empty-state>span {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin: auto;
    border: 1px solid rgba(234,211,157,.3);
    border-radius: 50%;
    color: var(--v8-gold-light);
    font-family: "Inter Display",Arial
}

.empty-state h2 {
    margin: 17px 0 5px
}

.empty-state p {
    margin: 0;
    color: #80858c
}

.warranty-result-card>span {
    color: var(--v8-gold-light);
    font-size: 9px;
    letter-spacing: .18em
}

.warranty-result-card h2 {
    margin: 9px 0 4px;
    font-size: 30px
}

.warranty-result-card .status {
    display: inline-flex;
    margin: 12px 0 25px;
    padding: 5px 10px;
    border: 1px solid rgba(110,218,151,.35);
    color: #9be5b8;
    font-size: 10px
}

.warranty-result-card .status.expired {
    border-color: rgba(255,120,120,.35);
    color: #ff9a9a
}

.warranty-details {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    border-top: 1px solid var(--v8-line);
    border-left: 1px solid var(--v8-line)
}

.warranty-details div {
    padding: 15px;
    border-right: 1px solid var(--v8-line);
    border-bottom: 1px solid var(--v8-line)
}

.warranty-details dt {
    color: #777d84;
    font-size: 10px
}

.warranty-details dd {
    margin: 3px 0 0;
    color: #fff;
    font-size: 13px
}

.repair-list {
    margin-top: 25px
}

.repair-list h3 {
    font-size: 14px
}

.repair-list article {
    padding: 13px 0;
    border-top: 1px solid var(--v8-line)
}

.repair-list article strong {
    font-size: 12px
}

.repair-list article p {
    margin: 4px 0 0;
    color: #858a91;
    font-size: 11px
}

.v8-support-strip {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid var(--v8-line);
    border-bottom: 1px solid var(--v8-line)
}

.v8-support-strip a {
    display: grid;
    gap: 6px;
    padding: 28px;
    border-right: 1px solid var(--v8-line)
}

.v8-support-strip a:last-child {
    border-right: 0
}

.v8-support-strip strong {
    font-size: 16px
}

.v8-support-strip span {
    color: #858a91;
    font-size: 11px
}

.v8-software-grid {
    display: grid;
    gap: 20px
}

.v8-software-grid article {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    min-height: 520px;
    border: 1px solid var(--v8-line);
    background: #06080b;
    overflow: hidden
}

.v8-software-grid article:nth-child(even) {
    grid-template-columns: .85fr 1.15fr
}

.v8-software-grid article:nth-child(even) img {
    order: 2
}

.v8-software-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.v8-software-grid article>div {
    align-self: center;
    padding: 55px
}

.v8-software-grid span {
    color: var(--v8-gold-light);
    font-size: 9px;
    letter-spacing: .2em
}

.v8-software-grid h2 {
    margin: 12px 0;
    font-size: 37px
}

.v8-software-grid p {
    color: #94999f
}

.v8-download-section {
    background: #05070a
}

.v8-download-list {
    display: grid;
    gap: 10px
}

.v8-download-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 27px;
    border: 1px solid var(--v8-line);
    background: rgba(255,255,255,.012)
}

.v8-download-list span {
    color: var(--v8-gold-light);
    font-size: 9px;
    letter-spacing: .18em
}

.v8-download-list h3 {
    margin: 6px 0 2px;
    font-size: 20px
}

.v8-download-list p {
    margin: 0;
    color: #848990;
    font-size: 11px
}

.v8-download-list a {
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,.15);
    font-size: 11px
}

.v8-download-list a:hover {
    border-color: var(--v8-gold);
    color: var(--v8-gold-light)
}

.v8-support-hub {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px
}

.v8-support-hub>a {
    min-height: 300px;
    padding: 36px;
    border: 1px solid var(--v8-line);
    background: linear-gradient(145deg,#0a0c10,#050607);
    transition: .32s
}

.v8-support-hub>a:hover {
    border-color: rgba(234,211,157,.38);
    transform: translateY(-3px)
}

.v8-support-hub span {
    color: var(--v8-gold-light);
    font-size: 9px;
    letter-spacing: .2em
}

.v8-support-hub h2 {
    margin: 62px 0 9px;
    font-size: 28px
}

.v8-support-hub p {
    max-width: 440px;
    color: #8d9299
}

.v8-support-hub b {
    display: block;
    margin-top: 28px;
    color: #fff;
    font-size: 11px
}

.v8-warranty-policy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center
}

.v8-warranty-policy h2 {
    font-size: 42px
}

.v8-warranty-policy p {
    color: #959aa1
}

.v8-warranty-policy dl {
    border-top: 1px solid var(--v8-line)
}

.v8-warranty-policy dl div {
    display: flex;
    justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid var(--v8-line)
}

.v8-warranty-policy dt {
    color: #8f949b
}

.v8-warranty-policy dd {
    margin: 0;
    color: #fff
}

.v8-account-layout {
    display: grid;
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
    gap: 22px
}

.v8-account-card,.v8-portal-card {
    padding: 42px;
    border: 1px solid var(--v8-line);
    background: linear-gradient(145deg,#0a0c10,#050607)
}

.v8-account-tabs {
    display: flex;
    border-bottom: 1px solid var(--v8-line)
}

.v8-account-tabs button {
    padding: 0 20px 15px;
    border: 0;
    background: none;
    color: #777d84;
    cursor: pointer
}

.v8-account-tabs button.active {
    color: var(--v8-gold-light);
    border-bottom: 1px solid var(--v8-gold)
}

.v8-account-form {
    display: none;
    margin-top: 30px
}

.v8-account-form.active {
    display: grid;
    gap: 15px
}

.v8-account-form label {
    display: grid;
    gap: 7px;
    color: #b9bcc1;
    font-size: 11px
}

.v8-account-form input {
    height: 46px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.13);
    background: #030405;
    color: #fff;
    outline: none
}

.v8-account-form>button {
    height: 48px;
    border: 1px solid var(--v8-gold);
    background: var(--v8-gold);
    color: #0b0804;
    font-weight: 750;
    cursor: pointer
}

.v8-account-form .form-message {
    min-height: 20px;
    margin: 0;
    color: #8fe3b0;
    font-size: 11px
}

.v8-portal-card>span {
    color: var(--v8-gold-light);
    font-size: 9px;
    letter-spacing: .2em
}

.v8-portal-card h2 {
    margin: 12px 0;
    font-size: 34px
}

.v8-portal-card>p {
    color: #94999f
}

.v8-portal-card ul {
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--v8-line)
}

.v8-portal-card li {
    padding: 13px 0;
    border-bottom: 1px solid var(--v8-line);
    color: #858a91;
    font-size: 11px
}

.v8-cart-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    gap: 22px
}

.v8-cart-items {
    display: grid;
    gap: 12px
}

.v8-cart-empty {
    min-height: 330px;
    display: grid;
    place-items: center;
    text-align: center;
    border: 1px solid var(--v8-line);
    background: #06080b
}

.v8-cart-item {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 20px;
    border: 1px solid var(--v8-line);
    background: #07090c
}

.v8-cart-item img {
    width: 180px;
    height: 130px;
    object-fit: contain
}

.v8-cart-item span {
    color: var(--v8-gold-light);
    font-size: 9px
}

.v8-cart-item h3 {
    margin: 5px 0;
    font-size: 21px
}

.v8-cart-item p {
    margin: 0;
    color: #858a91
}

.v8-cart-item button {
    border: 0;
    background: none;
    color: #8f949b;
    cursor: pointer
}

.v8-cart-summary {
    position: sticky;
    top: 110px;
    align-self: start;
    padding: 30px;
    border: 1px solid var(--v8-line);
    background: #07090c
}

.v8-cart-summary>span {
    color: var(--v8-gold-light);
    font-size: 9px;
    letter-spacing: .2em
}

.v8-cart-summary h2 {
    margin: 8px 0 22px
}

.v8-cart-summary dl {
    border-top: 1px solid var(--v8-line)
}

.v8-cart-summary dl div {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--v8-line)
}

.v8-cart-summary dd {
    margin: 0
}

.v8-cart-summary .btn {
    width: 100%;
    margin-top: 12px
}

.v8-cart-summary button.text-link {
    margin-top: 20px;
    border: 0;
    background: none;
    color: #7f858c;
    cursor: pointer
}

.v8-policy {
    max-width: 850px
}

.v8-policy article {
    padding: 48px;
    border: 1px solid var(--v8-line);
    background: #06080b
}

.v8-policy h2 {
    margin: 40px 0 10px;
    font-size: 23px
}

.v8-policy h2:first-child {
    margin-top: 0
}

.v8-policy p {
    color: #9a9fa5
}

/* Product detail image correction */
.product-detail-hero .product-visual img {
    max-width: min(90%,820px);
    max-height: 72vh;
    object-fit: contain
}

.product-intro-band,.detail-media-grid {
    min-width: 0
}

.feature-shot img,.detail-media-full img {
    width: 100%;
    height: auto;
    object-fit: cover
}

.spec-table {
    font-size: 12px
}

/* Mobile menu generated by JS */
.mobile-menu.v8-mobile-menu {
    padding: 88px 24px 40px;
    align-content: start;
    overflow: auto
}

.v8-mobile-menu details {
    border-bottom: 1px solid var(--v8-line)
}

.v8-mobile-menu summary {
    padding: 17px 0;
    font-size: 26px;
    font-weight: 700;
    list-style: none;
    cursor: pointer
}

.v8-mobile-menu summary::-webkit-details-marker {
    display: none
}

.v8-mobile-menu details div {
    display: grid;
    padding: 0 0 15px
}

.v8-mobile-menu details a {
    padding: 8px 0;
    color: #9da2a8;
    font-size: 14px
}

.v8-mobile-menu .mobile-direct {
    display: block;
    padding: 17px 0;
    border-bottom: 1px solid var(--v8-line);
    font-size: 26px;
    font-weight: 700
}

.v8-mobile-actions {
    display: flex;
    gap: 10px;
    margin-top: 25px
}

.v8-mobile-actions a {
    font-size: 12px!important;
    padding: 10px 13px!important;
    border: 1px solid var(--v8-line)!important
}

@media(max-width: 1180px) {
    .v8-header .header-inner {
        width:calc(100% - 42px)
    }

    .v8-header .nav-group {
        gap: 18px
    }

    .v8-header .nav-link {
        font-size: 12px
    }

    .mega-wrap {
        width: calc(100% - 56px);
        grid-template-columns: 230px 1fr;
        gap: 28px
    }

    .mega-product-media {
        height: 150px
    }

    .mega-link-grid.support-links {
        grid-template-columns: repeat(2,1fr)
    }

    .v8-tech-panel {
        grid-template-columns: .8fr 1.2fr
    }

    .v8-tech-panel.reverse {
        grid-template-columns: 1.2fr .8fr
    }

    .v8-product-card.flagship {
        min-height: 550px
    }
}

@media(max-width: 900px) {
    .v8-header .nav-group {
        display:none
    }

    .v8-header .header-inner {
        grid-template-columns: 1fr 70px 1fr
    }

    .v8-header .header-logo {
        grid-column: 2
    }

    .v8-header .mobile-toggle {
        display: flex;
        grid-column: 3;
        justify-self: end
    }

    .v8-intro-shell {
        --full-width: min(86vw,650px);
        width: 110px;
        height: 126px
    }

    .v8-intro-scan {
        left: 100px
    }

    @keyframes v8IntroExpand {
        0%,18% {
            width: 110px
        }

        100% {
            width: var(--full-width)
        }
    }

    @keyframes v8IntroScan {
        0% {
            opacity: 0;
            left: 100px
        }

        16% {
            opacity: 1
        }

        84% {
            opacity: .8
        }

        100% {
            opacity: 0;
            left: calc(var(--full-width) - 9px)
        }
    }

    .v8-intro-cn {
        top: 68%;
        font-size: 13px
    }

    .v8-intro-en {
        top: 80%;
        font-size: 8px;
        letter-spacing: .22em
    }

    .v8-tech-panel,.v8-tech-panel.reverse {
        grid-template-columns: 1fr;
        min-height: 0
    }

    .v8-tech-panel.reverse .v8-tech-copy,.v8-tech-panel.reverse .v8-tech-media {
        order: initial
    }

    .v8-tech-copy {
        padding: 42px 34px
    }

    .v8-tech-media {
        aspect-ratio: 16/10
    }

    .v8-tech-media::after {
        display: none
    }

    .v8-product-grid,.v8-catalog-grid {
        grid-template-columns: 1fr
    }

    .v8-product-card.flagship {
        grid-column: auto;
        min-height: 500px
    }

    .v8-product-card {
        min-height: 450px
    }

    .v8-product-card.flagship .v8-product-image {
        inset: 18% 0 5%
    }

    .v8-product-card.flagship .v8-product-image img {
        max-width: 88%;
        max-height: 80%
    }

    .v8-service-grid,.v8-support-strip {
        grid-template-columns: 1fr
    }

    .v8-service-grid>a,.v8-support-strip a {
        border-right: 0;
        border-bottom: 1px solid var(--v8-line)
    }

    .v8-query-layout,.v8-account-layout,.v8-cart-layout,.v8-warranty-policy {
        grid-template-columns: 1fr
    }

    .v8-cart-summary {
        position: static
    }

    .v8-software-grid article,.v8-software-grid article:nth-child(even) {
        grid-template-columns: 1fr
    }

    .v8-software-grid article:nth-child(even) img {
        order: initial
    }

    .v8-software-grid img {
        aspect-ratio: 16/10
    }

    .v8-support-hub {
        grid-template-columns: 1fr
    }
}

@media(max-width: 620px) {
    .container {
        width:calc(100% - 30px)
    }

    .section {
        padding-block:74px}

    .hero-copy h1 {
        font-size: 38px
    }

    .display {
        font-size: 48px!important
    }

    .title {
        font-size: 35px!important
    }

    .page-hero {
        min-height: 58svh
    }

    .v8-section-heading h2 {
        font-size: 34px
    }

    .v8-tech-panel {
        border-radius: 0
    }

    .v8-tech-copy {
        padding: 31px 24px
    }

    .v8-tech-copy h3 {
        font-size: 29px
    }

    .v8-tech-copy dl {
        gap: 20px;
        flex-wrap: wrap
    }

    .v8-tech-media {
        aspect-ratio: 4/3
    }

    .v8-product-card,.v8-product-card.flagship {
        min-height: 420px
    }

    .v8-product-copy {
        left: 22px;
        top: 21px
    }

    .v8-product-copy h3 {
        font-size: 27px
    }

    .v8-product-image,.v8-product-card.flagship .v8-product-image {
        inset: 19% -5% 11%
    }

    .v8-product-image img,.v8-product-card.flagship .v8-product-image img {
        max-width: 83%;
        max-height: 76%
    }

    .v8-product-image.air img {
        max-width: 68%;
        max-height: 68%
    }

    .v8-card-actions {
        left: 22px;
        bottom: 18px;
        right: 22px
    }

    .v8-card-actions a,.v8-card-actions button {
        padding: 0 10px;
        font-size: 10px
    }

    .v8-catalog-media {
        aspect-ratio: 4/3
    }

    .v8-query-card,.v8-query-result,.v8-account-card,.v8-portal-card {
        padding: 26px
    }

    .v8-query-form label>div {
        display: grid
    }

    .v8-query-form input[type=text],.v8-query-form input:not([type]) {
        border-right: 1px solid rgba(255,255,255,.14)
    }

    .v8-query-form button {
        width: 100%
    }

    .warranty-details {
        grid-template-columns: 1fr
    }

    .v8-download-list article {
        display: grid
    }

    .v8-support-hub>a {
        min-height: 260px;
        padding: 28px
    }

    .v8-support-hub h2 {
        margin-top: 45px
    }

    .v8-cart-item {
        grid-template-columns: 100px 1fr;
        gap: 15px
    }

    .v8-cart-item img {
        width: 100px;
        height: 90px
    }

    .v8-cart-item>button {
        grid-column: 2;
        justify-self: start
    }

    .v8-policy article {
        padding: 28px
    }

    .v8-intro-center {
        height: 260px
    }
}

@media(prefers-reduced-motion:reduce) {
    .v8-intro-shell {
        width: var(--full-width);
        animation: none
    }

    .v8-intro-scan {
        display: none
    }

    .v8-intro-cn,.v8-intro-en {
        opacity: 1;
        transform: none;
        animation: none
    }

    .v8-tech-panel,.v8-product-card,.v8-catalog-card {
        transition: none
    }
}

.v8-footer .footer-brand img {
    width: min(260px,100%);
    height: auto
}

.footer-contact {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 20px
}

.footer-contact a {
    color: #d6d8dc;
    font-size: 12px
}

.footer-address {
    padding: 22px 0;
    border-top: 1px solid var(--v8-line);
    color: #777d84;
    font-size: 11px
}

.v8-footer .footer-bottom a {
    color: inherit
}

.toast {
    position: fixed;
    z-index: 6000;
    left: 50%;
    bottom: 35px;
    transform: translate(-50%,20px);
    padding: 11px 18px;
    border: 1px solid rgba(234,211,157,.35);
    background: rgba(6,7,9,.94);
    color: #f7f4ed;
    font-size: 11px;
    opacity: 0;
    visibility: hidden;
    transition: .25s
}

.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%,0)
}

/* === v9.css === */
/* WEKYPSYR V9 — aligned single wordmark intro, arrow product carousel, clean product-detail typography */
:root {
    --v9-gold: #c99a49;
    --v9-gold-hi: #f0d7a1;
    --v9-gold-deep: #8d6224;
    --v9-ivory: #f6f3ec;
    --v9-line: rgba(255,255,255,.105);
    --v9-ease: cubic-bezier(.2,.78,.2,1);
}

/* 1. One typographic logo: W and remaining letters share one font, cap height and baseline. */
.v9-intro {
    background: #020304!important;
    overflow: hidden!important
}

.v9-intro-ambient {
    position: absolute;
    inset: -18%;
    background: radial-gradient(circle at 50% 47%,rgba(201,154,73,.18),transparent 25%),radial-gradient(circle at 50% 52%,rgba(92,111,205,.075),transparent 48%);
    filter: blur(18px)
}

.v9-intro-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size: 112px 112px;
    mask-image: radial-gradient(circle,#000 8%,transparent 69%);
    opacity: .55
}

.v9-intro-center {
    position: relative;
    width: 100%;
    height: 390px;
    display: flex;
    align-items: center;
    justify-content: center
}

.v9-intro-shell {
    --v9-full-width: min(78vw,830px);
    --v9-first-width: calc(var(--v9-full-width) * .159);
    position: absolute;
    left: 50%;
    top: 46%;
    width: var(--v9-first-width);
    height: clamp(92px,9vw,136px);
    overflow: hidden;
    transform: translate(-50%,-50%);
    animation: v9WordExpand 1.45s .72s var(--v9-ease) forwards;
    filter: drop-shadow(0 24px 52px rgba(0,0,0,.48));
}

.v9-intro-word {
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--v9-full-width);
    height: auto;
    max-width: none;
    transform: translateY(-50%);
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 0 18px rgba(234,211,157,.12));
    animation: v9MetalSweep 2.15s .48s ease forwards;
}

.v9-intro-scan {
    position: absolute;
    z-index: 2;
    left: calc(var(--v9-first-width) - 3px);
    top: 15%;
    bottom: 17%;
    width: 1px;
    background: linear-gradient(180deg,transparent,#fff5d9 22%,#d6a955 65%,transparent);
    box-shadow: 0 0 18px rgba(240,215,161,.85);
    opacity: 0;
    animation: v9Scan 1.32s .78s var(--v9-ease) forwards
}

.v9-intro-cn {
    position: absolute;
    top: 69%;
    margin: 0;
    color: var(--v9-ivory);
    font-size: clamp(15px,1.15vw,19px);
    font-weight: 650;
    letter-spacing: .2em;
    opacity: 0;
    transform: translateY(8px);
    animation: v9IntroText .58s 2.16s ease forwards
}

.v9-intro-en {
    position: absolute;
    top: 79%;
    margin: 0;
    color: rgba(240,215,161,.76);
    font-family: Arial,sans-serif;
    font-size: clamp(9px,.68vw,11px);
    font-weight: 700;
    letter-spacing: .34em;
    opacity: 0;
    transform: translateY(6px);
    animation: v9IntroText .58s 2.32s ease forwards
}

@keyframes v9WordExpand {
    0%,17% {
        width: var(--v9-first-width)
    }

    100% {
        width: var(--v9-full-width)
    }
}

@keyframes v9Scan {
    0% {
        opacity: 0;
        left: calc(var(--v9-first-width) - 3px)
    }

    15% {
        opacity: 1
    }

    85% {
        opacity: .85
    }

    100% {
        opacity: 0;
        left: calc(var(--v9-full-width) - 5px)
    }
}

@keyframes v9MetalSweep {
    0% {
        filter: drop-shadow(0 0 8px rgba(234,211,157,.05));
        opacity: .82
    }

    55% {
        opacity: 1
    }

    100% {
        filter: drop-shadow(0 0 20px rgba(234,211,157,.15));
        opacity: 1
    }
}

@keyframes v9IntroText {
    to {
        opacity: 1;
        transform: none
    }
}

/* 2. Product cards stay visible, but wheel never controls them. Arrow click moves exactly one card. */
.v9-product-carousel {
    position: relative;
    isolation: isolate
}

.v9-carousel-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    scrollbar-width: none
}

.v9-carousel-viewport::-webkit-scrollbar {
    display: none
}

.v9-product-track {
    display: flex;
    gap: 18px;
    padding: 1px 1px 6px
}

.v9-product-card {
    flex: 0 0 calc((100% - 18px)/2);
    scroll-snap-align: start;
    position: relative;
    min-height: 520px;
    border-radius: 20px
}

.v9-product-carousel[data-visible="1"] .v9-product-card {
    flex-basis: 100%
}

.v9-product-carousel[data-visible="3"] .v9-product-card {
    flex-basis: calc((100% - 36px)/3)
}

.v9-product-card .v8-product-copy {
    left: 30px;
    top: 29px;
    max-width: 340px
}

.v9-product-card .v8-product-copy h3 {
    font-size: clamp(27px,2vw,36px)
}

.v9-product-card .v8-product-image {
    inset: 17% 1% 8% 11%
}

.v9-product-card .v8-product-image img {
    max-width: 84%;
    max-height: 82%
}

.v9-product-card .v8-product-image.air img {
    max-width: 68%;
    max-height: 72%
}

.v9-carousel-arrow {
    position: absolute;
    z-index: 7;
    top: 50%;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.21);
    border-radius: 50%;
    background: rgba(4,5,7,.82);
    backdrop-filter: blur(14px);
    color: #fff;
    font-family: Arial,sans-serif;
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(.92);
    transition: opacity .25s,transform .3s var(--v9-ease),border-color .25s,color .25s;
    cursor: pointer
}

.v9-carousel-arrow.prev {
    left: 18px
}

.v9-carousel-arrow.next {
    right: 18px
}

.v9-product-carousel:hover .v9-carousel-arrow,.v9-product-carousel:focus-within .v9-carousel-arrow {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1)
}

.v9-carousel-arrow:hover {
    border-color: var(--v9-gold-hi);
    color: var(--v9-gold-hi)
}

.v9-carousel-arrow:disabled {
    opacity: .22!important;
    cursor: default;
    pointer-events: none!important
}

.v9-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px
}

.v9-carousel-dot {
    width: 24px;
    height: 2px;
    padding: 0;
    border: 0;
    background: rgba(255,255,255,.2);
    transition: width .3s,background .3s;
    cursor: pointer
}

.v9-carousel-dot.active {
    width: 44px;
    background: var(--v9-gold-hi)
}

/* 3. Product detail pages: one typographic layer only, no duplicate text over artwork. */
.v9-product-page .product-detail-grid {
    grid-template-columns: minmax(310px,.78fr) minmax(0,1.22fr);
    gap: 4.5vw;
    padding-block:58px 48px}

.v9-product-page .product-detail-copy {
    position: relative;
    z-index: 4;
    max-width: 500px
}

.v9-product-page .product-detail-copy h1 {
    font-size: clamp(52px,5.1vw,80px);
    line-height: .96;
    letter-spacing: .015em
}

.v9-product-page .product-detail-copy .cn-name {
    margin-top: 15px;
    font-size: clamp(20px,1.65vw,27px);
    line-height: 1.25
}

.v9-product-page .product-detail-copy>p:not(.eyebrow) {
    max-width: 460px;
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.8
}

.v9-product-page .product-detail-stage {
    min-height: 520px
}

.v9-product-page .product-detail-stage img {
    width: min(90%,690px);
    max-height: 590px
}

.v9-product-page .product-floating-specs {
    gap: 9px
}

.v9-product-page .float-spec {
    min-width: 124px;
    padding: 12px 14px
}

.v9-product-page .float-spec strong {
    font-size: 14px
}

.v9-product-page .float-spec span {
    font-size: 8px
}

.v9-product-page .product-intro-band {
    grid-template-columns: minmax(260px,.58fr) minmax(0,1.42fr);
    gap: 52px
}

.v9-product-page .product-intro-band .copy {
    top: 108px;
    max-width: 360px
}

.v9-product-page .product-intro-band .copy .title-sm {
    font-size: clamp(25px,2.2vw,36px)!important;
    line-height: 1.2
}

.v9-product-page .product-intro-band .copy p:not(.eyebrow) {
    margin-top: 17px;
    font-size: 14px;
    line-height: 1.82
}

.v9-product-page .feature-image-stack {
    gap: 16px
}

.v9-product-page .feature-shot {
    border-radius: 16px
}

.v9-product-page .feature-shot img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain
}

.v9-product-page .feature-shot-caption {
    justify-content: flex-end;
    padding: 10px 14px;
    color: #8b9097;
    font-size: 9px;
    letter-spacing: .12em
}

.v9-product-page .v9-artwork-section {
    min-height: 0;
    height: auto;
    overflow: hidden;
    background: #030405
}

.v9-product-page .v9-artwork-section::after {
    display: none
}

.v9-product-page .v9-artwork-section>img {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain
}

.v9-product-page .media-wall .section-head {
    margin-bottom: 28px
}

.v9-product-page .media-wall-grid {
    align-items: start
}

.v9-product-page .media-tile {
    min-height: 0;
    aspect-ratio: auto;
    background: #030405
}

.v9-product-page .media-tile.small {
    min-height: 0
}

.v9-product-page .media-tile img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: none!important
}

.v9-product-page .spec-layout {
    grid-template-columns: minmax(220px,.42fr) minmax(0,1.58fr);
    gap: 48px
}

.v9-product-page .spec-sticky .title-sm {
    font-size: clamp(25px,2.2vw,35px)!important
}

.v9-product-page .spec-sticky .lead {
    font-size: 13px!important;
    line-height: 1.75
}

.v9-product-page .spec-table {
    table-layout: fixed
}

.v9-product-page .spec-table th {
    width: 30%
}

.v9-product-page .spec-table th,.v9-product-page .spec-table td {
    padding: 13px 12px;
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere
}

.v9-product-page .spec-group td {
    padding-top: 24px;
    font-size: 11px;
    letter-spacing: .1em
}

/* Slightly calmer detail headings across all widths. */
.v9-product-page .title {
    font-size: clamp(30px,3vw,48px)!important;
    line-height: 1.13!important
}

.v9-product-page .title-sm {
    font-size: clamp(25px,2.35vw,38px)!important;
    line-height: 1.18!important
}

@media(max-width: 900px) {
    .v9-intro-shell {
        --v9-full-width:min(86vw,660px);
        --v9-first-width: calc(var(--v9-full-width) * .159);
        height: 104px
    }

    .v9-intro-word {
        width: var(--v9-full-width)
    }

    .v9-intro-cn {
        top: 67%;
        font-size: 13px
    }

    .v9-intro-en {
        top: 78%;
        font-size: 8px;
        letter-spacing: .24em
    }

    .v9-product-card {
        flex-basis: calc((100% - 14px)/1.45);
        min-height: 470px
    }

    .v9-product-track {
        gap: 14px
    }

    .v9-carousel-arrow {
        opacity: 1;
        pointer-events: auto;
        width: 46px;
        height: 46px;
        font-size: 30px
    }

    .v9-product-page .product-detail-grid,.v9-product-page .product-intro-band,.v9-product-page .spec-layout {
        grid-template-columns: 1fr
    }

    .v9-product-page .product-intro-band .copy,.v9-product-page .spec-sticky {
        position: static;
        max-width: 600px
    }

    .v9-product-page .product-detail-stage {
        min-height: 430px
    }

    .v9-product-page .product-floating-specs {
        position: static;
        display: flex;
        flex-wrap: wrap;
        margin-top: 8px
    }
}

@media(max-width: 620px) {
    .v9-intro-center {
        height:280px
    }

    .v9-intro-shell {
        --v9-full-width: 88vw;
        --v9-first-width: calc(var(--v9-full-width) * .159);
        height: 78px;
        top: 43%
    }

    .v9-intro-word {
        width: var(--v9-full-width)
    }

    .v9-intro-cn {
        top: 64%;
        font-size: 11px;
        letter-spacing: .14em
    }

    .v9-intro-en {
        top: 75%;
        font-size: 6.8px;
        letter-spacing: .18em
    }

    .v9-product-card {
        flex-basis: 100%;
        min-height: 430px;
        border-radius: 16px
    }

    .v9-product-carousel[data-visible="1"] .v9-product-card {
        flex-basis: 100%
    }

    .v9-product-carousel[data-visible="3"] .v9-product-card {
        flex-basis: calc((100% - 36px)/3)
    }

    .v9-product-card .v8-product-copy {
        left: 22px;
        top: 22px
    }

    .v9-product-card .v8-product-image {
        inset: 19% -5% 12%
    }

    .v9-product-card .v8-product-image.air img {
        max-width: 67%;
        max-height: 68%
    }

    .v9-carousel-arrow {
        top: auto;
        bottom: -4px;
        transform: none!important;
        width: 40px;
        height: 40px;
        font-size: 27px
    }

    .v9-carousel-arrow.prev {
        left: 0
    }

    .v9-carousel-arrow.next {
        right: 0
    }

    .v9-carousel-dots {
        margin-top: 28px;
        padding-inline:52px}

    .v9-product-page .product-detail-grid {
        padding-top: 34px
    }

    .v9-product-page .product-detail-copy h1 {
        font-size: 52px
    }

    .v9-product-page .product-detail-stage {
        min-height: 350px
    }

    .v9-product-page .product-detail-stage img {
        max-height: 390px
    }

    .v9-product-page .product-intro-band {
        gap: 30px
    }

    .v9-product-page .spec-table th,.v9-product-page .spec-table td {
        font-size: 11px;
        padding: 11px 8px
    }
}

@media(prefers-reduced-motion:reduce) {
    .v9-intro-shell {
        width: var(--v9-full-width);
        animation: none
    }

    .v9-intro-word {
        animation: none
    }

    .v9-intro-scan {
        display: none
    }

    .v9-intro-cn,.v9-intro-en {
        opacity: 1;
        transform: none;
        animation: none
    }

    .v9-carousel-viewport {
        scroll-behavior: auto
    }
}

/* === v11.css === */
/* WEKYPSYR V11 — full-bleed homepage, V5-derived identity and balanced content density */
:root {
    --v11-carbon: #020304;
    --v11-ivory: #F8F6F0;
    --v11-gold: #D8B875;
    --v11-gold-light: #F2DEB0;
    --v11-bronze: #8E6425;
    --v11-blue: #6B7CFF;
    --v11-line: rgba(255,255,255,.12);
    --v11-ease: cubic-bezier(.22,1,.36,1);
}

.v11-home-main {
    background: var(--v11-carbon);
    overflow: hidden
}

/* V5-inspired opening: outline W -> metal fill -> same lockup expands right. */
.v11-intro {
    background: #000!important;
    overflow: hidden!important
}

.v11-intro::before {
    content: "";
    position: absolute;
    inset: -24%;
    background: conic-gradient(from 210deg at 50% 48%,transparent 0 24%,rgba(107,124,255,.08) 31%,rgba(216,184,117,.14) 43%,transparent 57% 100%);
    filter: blur(52px);
    animation: v11Aura 9s linear infinite
}

.v11-intro-ambient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 48%,rgba(216,184,117,.14),transparent 23%),radial-gradient(circle at 52% 54%,rgba(107,124,255,.055),transparent 48%)
}

.v11-intro-center {
    position: relative;
    width: 100%;
    height: 390px;
    display: grid;
    place-items: center
}

.v11-intro-outline {
    position: absolute;
    top: 43%;
    left: 50%;
    width: 150px;
    height: 106px;
    transform: translate(-50%,-50%) scale(.88);
    opacity: 0;
    filter: drop-shadow(0 0 24px rgba(216,184,117,.16));
    animation: v11Outline .58s .12s var(--v11-ease) forwards,v11OutlineOut .35s 1.02s ease forwards
}

.v11-intro-lockup {
    --full: min(78vw,760px);
    position: absolute;
    top: 43%;
    left: 50%;
    width: var(--full);
    height: 118px;
    transform: translate(-11.4%,-50%);
    clip-path: inset(0 76.5% 0 0);
    opacity: 0;
    animation: v11LockupIn .28s .66s forwards,v11LockupExpand 1.28s .88s var(--v11-ease) forwards
}

.v11-intro-lockup img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 12px 34px rgba(202,164,94,.22))
}

.v11-intro-title {
    position: absolute;
    top: 65%;
    margin: 0;
    color: rgba(248,246,240,.75);
    font-size: clamp(10px,.78vw,13px);
    font-weight: 650;
    letter-spacing: .24em;
    opacity: 0;
    transform: translateY(8px);
    animation: v11Text .55s 2.05s forwards
}

.v11-spectrum {
    position: absolute;
    top: 73%;
    width: min(64vw,580px);
    height: 3px;
    transform: scaleX(0);
    opacity: 0;
    background: linear-gradient(90deg,transparent 0%,#F2DEB0 17%,#D8B875 34%,#8A74FF 49%,#5ABEFF 62%,#D95CBE 76%,#F2DEB0 88%,transparent 100%);
    box-shadow: 0 0 28px rgba(107,124,255,.28),0 0 16px rgba(216,184,117,.18);
    animation: v11Spectrum 1s 1.62s var(--v11-ease) forwards
}

.v11-intro-tagline {
    position: absolute;
    top: 78%;
    margin: 0;
    color: rgba(255,255,255,.43);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .38em;
    opacity: 0;
    animation: v11Text .55s 2.18s forwards
}

@keyframes v11Aura {
    to {
        transform: rotate(360deg)
    }
}

@keyframes v11Outline {
    to {
        opacity: 1;
        transform: translate(-50%,-50%) scale(1)
    }
}

@keyframes v11OutlineOut {
    to {
        opacity: 0
    }
}

@keyframes v11LockupIn {
    to {
        opacity: 1
    }
}

@keyframes v11LockupExpand {
    to {
        clip-path: inset(0 0 0 0);
        transform: translate(-50%,-50%)
    }
}

@keyframes v11Spectrum {
    to {
        transform: scaleX(1);
        opacity: 1
    }
}

@keyframes v11Text {
    to {
        opacity: 1;
        transform: none
    }
}

/* Hero remains visually quiet. */
.v11-hero {
    min-height: 100svh
}

.v11-hero .hero-media::before {
    background: linear-gradient(90deg,rgba(0,0,0,.66),rgba(0,0,0,.12) 56%,rgba(0,0,0,.34)),linear-gradient(0deg,rgba(0,0,0,.55),transparent 48%,rgba(0,0,0,.27))
}

.v11-hero-inner {
    align-items: center;
    padding-bottom: 0
}

.v11-hero-copy {
    width: min(620px,68vw);
    margin-top: 6vh
}

.v11-hero-copy h1 {
    font-size: clamp(44px,5.1vw,78px);
    line-height: 1.04;
    letter-spacing: -.05em
}

.v11-hero-copy>p:not(.eyebrow) {
    max-width: 500px;
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.78;
    color: rgba(255,255,255,.72)
}

.v11-scroll-cue {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transform: translateX(-50%);
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.53);
    font-size: 8.5px;
    letter-spacing: .28em;
    cursor: pointer
}

.v11-scroll-cue i {
    display: block;
    width: 1px;
    height: 44px;
    background: linear-gradient(var(--v11-gold-light),transparent);
    animation: v11Cue 1.8s infinite
}

@keyframes v11Cue {
    0%,100% {
        transform: scaleY(.45);
        transform-origin: top;
        opacity: .4
    }

    50% {
        transform: scaleY(1);
        opacity: 1
    }
}

/* Full-bleed featured product stage: no card frame, no inset container. */
.v11-featured {
    position: relative;
    background: linear-gradient(180deg,#050608 0%,#020304 100%);
    border-top: 1px solid rgba(255,255,255,.08);
    overflow: hidden
}

.v11-featured-head {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding-top: 84px;
    padding-bottom: 28px
}

.v11-featured-head h2 {
    margin: 5px 0 0;
    font-size: clamp(31px,3vw,46px);
    font-weight: 720;
    letter-spacing: -.045em
}

.v11-all-products {
    color: #d7d9dd;
    font-size: 13px;
    transition: color .25s
}

.v11-all-products:hover {
    color: var(--v11-gold-light)
}

.v11-product-slider {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 760px;
    background: radial-gradient(circle at 70% 46%,rgba(65,83,147,.13),transparent 35%),linear-gradient(145deg,#0b0d11,#030405);
    border-top: 1px solid rgba(255,255,255,.085);
    border-bottom: 1px solid rgba(255,255,255,.085);
    overflow: hidden
}

.v11-slides {
    position: relative;
    min-height: 760px
}

.v11-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(18px);
    transition: opacity .55s var(--v11-ease),transform .65s var(--v11-ease),visibility .55s
}

.v11-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none
}

.v11-slide-inner {
    width: min(calc(100% - 96px),1480px);
    min-height: 760px;
    margin: auto;
    display: grid;
    grid-template-columns: minmax(300px,.78fr) minmax(0,1.22fr);
    align-items: center;
    gap: 4vw;
    padding: 54px 4% 76px
}

.v11-slide-copy {
    position: relative;
    z-index: 2;
    max-width: 420px
}

.v11-slide-copy>span {
    display: block;
    color: var(--v11-gold-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .19em
}

.v11-slide-copy h3 {
    margin: 15px 0 12px;
    font-size: clamp(40px,4.7vw,70px);
    line-height: 1;
    letter-spacing: -.055em
}

.v11-slide-copy p {
    max-width: 370px;
    margin: 0;
    color: #a7abb2;
    font-size: 14px;
    line-height: 1.75
}

.v11-slide-copy>div {
    display: flex;
    gap: 18px;
    margin-top: 28px;
    align-items: center
}

.v11-slide-copy a,.v11-slide-copy button {
    border: 0;
    background: none;
    padding: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .04em;
    cursor: pointer;
    transition: color .25s
}

.v11-slide-copy a:hover,.v11-slide-copy button:hover {
    color: var(--v11-gold-light)
}

.v11-slide-copy button {
    color: #8e939a
}

.v11-slide-media {
    position: relative;
    height: 590px;
    display: grid;
    place-items: center
}

.v11-slide-media::before {
    content: "";
    position: absolute;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(88,104,174,.2),transparent 66%);
    filter: blur(18px)
}

.v11-slide-media img {
    position: relative;
    z-index: 1;
    width: min(100%,820px);
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 30px 42px rgba(0,0,0,.46));
    transition: transform .7s var(--v11-ease)
}

.v11-slide.is-active .v11-slide-media img {
    transform: translateY(-4px)
}

.v11-slide-media.air img {
    max-width: 72%;
    max-height: 83%
}

.v11-slide-media.white::before {
    background: radial-gradient(circle,rgba(196,204,224,.17),transparent 66%)
}

.v11-slider-arrow {
    position: absolute;
    z-index: 5;
    top: 50%;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: rgba(4,5,7,.48);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(.92);
    transition: opacity .25s,transform .25s,border-color .25s,color .25s;
    cursor: pointer;
    backdrop-filter: blur(10px)
}

.v11-product-slider:hover .v11-slider-arrow,.v11-product-slider:focus-within .v11-slider-arrow {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1)
}

.v11-slider-arrow:hover {
    border-color: rgba(242,222,176,.66);
    color: var(--v11-gold-light)
}

.v11-slider-arrow span {
    font-size: 34px;
    line-height: 1;
    margin-top: -4px
}

.v11-slider-arrow.prev {
    left: 3.5vw
}

.v11-slider-arrow.next {
    right: 3.5vw
}

.v11-slider-footer {
    position: absolute;
    z-index: 4;
    left: max(48px,calc((100vw - 1384px)/2 + 4%));
    right: max(48px,calc((100vw - 1384px)/2 + 4%));
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.v11-slider-index {
    display: flex;
    gap: 8px;
    align-items: baseline;
    color: #686d75;
    font-size: 10px
}

.v11-slider-index b {
    color: #fff;
    font-size: 14px
}

.v11-slider-index em {
    font-style: normal
}

.v11-slider-dots {
    display: flex;
    gap: 8px
}

.v11-slider-dots button {
    width: 24px;
    height: 2px;
    border: 0;
    background: rgba(255,255,255,.2);
    padding: 0;
    cursor: pointer;
    transition: width .3s,background .3s
}

.v11-slider-dots button.is-active {
    width: 44px;
    background: var(--v11-gold-light)
}

/* Enough homepage substance without returning to the crowded V8/V9 structure. */
.v11-editorial {
    background: #020304
}

.v11-editorial-row {
    min-height: 68vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid rgba(255,255,255,.08)
}

.v11-editorial-row.reverse .v11-editorial-media {
    order: 2
}

.v11-editorial-row.reverse .v11-editorial-copy {
    order: 1
}

.v11-editorial-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8vw;
    max-width: 760px
}

.v11-editorial-copy .eyebrow {
    margin-bottom: 16px
}

.v11-editorial-copy h2 {
    max-width: 10ch;
    margin: 0;
    font-size: clamp(34px,4.2vw,64px);
    line-height: 1.08;
    letter-spacing: -.045em
}

.v11-editorial-copy p {
    max-width: 480px;
    margin: 22px 0 0;
    color: #989da5;
    font-size: 15px;
    line-height: 1.82
}

.v11-editorial-copy a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: max-content;
    margin-top: 30px;
    color: #fff;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .04em
}

.v11-editorial-copy a:hover {
    color: var(--v11-gold-light)
}

.v11-editorial-media {
    position: relative;
    min-height: 560px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%,rgba(55,76,142,.15),transparent 38%),#06080b
}

.v11-editorial-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size: 86px 86px;
    mask-image: linear-gradient(to bottom,transparent,#000,transparent)
}

.v11-editorial-media img {
    position: relative;
    z-index: 1;
    width: min(82%,760px);
    height: 76%;
    object-fit: contain;
    filter: drop-shadow(0 28px 40px rgba(0,0,0,.44))
}

.v11-editorial-media.air img {
    width: min(58%,520px);
    height: 72%
}

.v11-quick-access {
    padding: 78px 0 96px;
    background: #020304
}

.v11-quick-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid var(--v11-line);
    border-bottom: 1px solid var(--v11-line)
}

.v11-quick-grid a {
    position: relative;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    grid-template-rows: auto auto;
    gap: 5px 10px;
    padding: 30px 26px;
    border-right: 1px solid var(--v11-line);
    transition: background .3s,color .3s
}

.v11-quick-grid a:last-child {
    border-right: 0
}

.v11-quick-grid a:hover {
    background: rgba(216,184,117,.055)
}

.v11-quick-grid span {
    grid-row: 1/3;
    color: #666b72;
    font-size: 10px;
    letter-spacing: .1em
}

.v11-quick-grid strong {
    font-size: 15px
}

.v11-quick-grid small {
    color: #858a91;
    font-size: 11px
}

.v11-quick-grid b {
    grid-row: 1/3;
    grid-column: 3;
    align-self: center;
    color: #747980;
    font-size: 15px;
    font-weight: 400;
    transition: transform .25s,color .25s
}

.v11-quick-grid a:hover b {
    color: var(--v11-gold-light);
    transform: translate(3px,-3px)
}

/* One unified footer lockup, not a mark plus unrelated letters. */
.v8-footer .footer-brand img {
    width: min(430px,100%)!important;
    max-height: 90px;
    object-fit: contain;
    object-position: left center
}

.v8-footer .footer-brand p {
    max-width: 520px;
    margin-top: 24px
}

@media(max-width: 900px) {
    .v11-intro-lockup {
        --full:min(88vw,720px);
        height: 96px
    }

    .v11-intro-outline {
        width: 112px;
        height: 80px
    }

    .v11-intro-title {
        top: 64%;
        font-size: 10px
    }

    .v11-spectrum {
        top: 72%;
        width: 70vw
    }

    .v11-intro-tagline {
        top: 77%;
        font-size: 7px;
        letter-spacing: .26em
    }

    .v11-hero-copy {
        width: 100%
    }

    .v11-featured-head {
        padding-top: 68px
    }

    .v11-product-slider,.v11-slides {
        min-height: 700px
    }

    .v11-slide-inner {
        width: calc(100% - 44px);
        min-height: 700px;
        grid-template-columns: 1fr;
        padding: 42px 6% 78px
    }

    .v11-slide-copy {
        max-width: 540px
    }

    .v11-slide-media {
        height: 390px
    }

    .v11-slide-media img {
        max-width: 82%
    }

    .v11-slide-media.air img {
        max-width: 52%;
        max-height: 84%
    }

    .v11-slider-arrow {
        opacity: 1;
        pointer-events: auto
    }

    .v11-slider-footer {
        left: 70px;
        right: 70px
    }

    .v11-editorial-row {
        grid-template-columns: 1fr;
        min-height: auto
    }

    .v11-editorial-row.reverse .v11-editorial-media,.v11-editorial-row.reverse .v11-editorial-copy {
        order: initial
    }

    .v11-editorial-copy {
        padding: 76px 9vw
    }

    .v11-editorial-media {
        min-height: 520px
    }

    .v11-quick-grid {
        grid-template-columns: 1fr
    }

    .v11-quick-grid a {
        border-right: 0;
        border-bottom: 1px solid var(--v11-line)
    }

    .v11-quick-grid a:last-child {
        border-bottom: 0
    }
}

@media(max-width: 620px) {
    .v11-intro-center {
        height:300px
    }

    .v11-intro-lockup {
        --full: 90vw;
        height: 72px;
        top: 42%
    }

    .v11-intro-outline {
        width: 82px;
        height: 58px;
        top: 42%
    }

    .v11-intro-title {
        top: 61%;
        font-size: 8.5px;
        letter-spacing: .15em
    }

    .v11-spectrum {
        top: 69%;
        width: 74vw
    }

    .v11-intro-tagline {
        top: 74%;
        font-size: 6px;
        letter-spacing: .18em
    }

    .v11-hero-copy h1 {
        font-size: clamp(42px,12vw,62px)
    }

    .v11-featured-head {
        align-items: flex-start;
        padding-top: 58px
    }

    .v11-featured-head h2 {
        font-size: 30px
    }

    .v11-all-products {
        margin-top: 14px
    }

    .v11-product-slider,.v11-slides {
        min-height: 630px
    }

    .v11-slide-inner {
        width: 100%;
        min-height: 630px;
        padding: 34px 24px 74px
    }

    .v11-slide-copy h3 {
        font-size: 42px
    }

    .v11-slide-media {
        height: 310px
    }

    .v11-slide-media img {
        max-width: 104%
    }

    .v11-slide-media.air img {
        max-width: 64%
    }

    .v11-slider-arrow {
        top: auto;
        bottom: 18px;
        transform: none!important;
        width: 40px;
        height: 40px
    }

    .v11-slider-arrow.prev {
        left: 20px
    }

    .v11-slider-arrow.next {
        right: 20px
    }

    .v11-slider-footer {
        left: 78px;
        right: 78px;
        bottom: 30px
    }

    .v11-slider-index {
        display: none
    }

    .v11-slider-dots {
        width: 100%;
        justify-content: center
    }

    .v11-slider-dots button {
        width: 17px
    }

    .v11-slider-dots button.is-active {
        width: 30px
    }

    .v11-editorial-copy {
        padding: 58px 24px
    }

    .v11-editorial-copy h2 {
        font-size: 38px
    }

    .v11-editorial-media {
        min-height: 390px
    }

    .v11-editorial-media img {
        width: 92%;
        height: 78%
    }

    .v11-editorial-media.air img {
        width: 68%
    }

    .v11-quick-grid a {
        padding: 24px 18px
    }

    .v8-footer .footer-brand img {
        width: min(86vw,360px)!important
    }
}

@media(prefers-reduced-motion:reduce) {
    .v11-intro-outline,.v11-intro-lockup,.v11-intro-title,.v11-spectrum,.v11-intro-tagline {
        animation: none!important;
        opacity: 1;
        transform: none
    }

    .v11-intro-lockup {
        clip-path: none;
        left: 50%;
        transform: translate(-50%,-50%)
    }

    .v11-slide {
        transition: none
    }

    .v11-scroll-cue i {
        animation: none
    }
}

/* === v12.css === */
:root {
    --v12-gold: #D8B875;
    --v12-gold-light: #F2DEB0;
    --v12-copper: #8E6425;
    --v12-blue: #6B7CFF;
    --v12-bg: #020304;
    --v12-line: rgba(255,255,255,.09)
}

/* V12 intro: one W only, V5 outline-to-metal effect, spectrum retained. */
.v12-intro {
    background: #020304;
    overflow: hidden
}

.v12-intro::before {
    content: "";
    position: absolute;
    inset: -28%;
    background: conic-gradient(from 195deg at 50% 50%,transparent 0 35%,rgba(216,184,117,.11) 42%,rgba(107,124,255,.10) 49%,transparent 58% 100%);
    filter: blur(38px);
    animation: v12Aurora 6s linear infinite
}

.v12-intro::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);
    background-size: 76px 76px;
    mask-image: radial-gradient(circle,#000 0,transparent 69%);
    opacity: .48
}

.v12-intro-ambient {
    position: absolute;
    width: min(48vw,720px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(216,184,117,.14),rgba(107,124,255,.055) 40%,transparent 70%);
    filter: blur(18px);
    animation: v12Breath 3.2s ease-in-out infinite
}

.v12-intro-center {
    position: relative;
    z-index: 2;
    width: min(84vw,780px);
    height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.v12-intro-symbol {
    position: relative;
    width: 112px;
    height: 80px
}

.v12-intro-symbol img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.v12-intro-outline {
    opacity: 0;
    transform: scale(.80);
    animation: v12Outline .82s .10s cubic-bezier(.16,1,.3,1) forwards;
    filter: drop-shadow(0 0 22px rgba(242,222,176,.22))
}

.v12-intro-fill {
    opacity: 0;
    transform: scale(.92);
    animation: v12Fill .76s .68s cubic-bezier(.16,1,.3,1) forwards;
    filter: drop-shadow(0 14px 36px rgba(216,184,117,.25))
}

.v12-spectrum {
    position: relative;
    width: min(62vw,520px);
    height: 2px;
    margin-top: 42px;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    background: linear-gradient(90deg,transparent 0%,#f2deb0 18%,#d8b875 35%,#6b7cff 58%,#32b8ff 74%,#db5b9d 88%,transparent 100%);
    box-shadow: 0 0 20px rgba(107,124,255,.16);
    animation: v12Spectrum 1.08s 1.16s cubic-bezier(.16,1,.3,1) forwards
}

@keyframes v12Outline {
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes v12Fill {
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes v12Spectrum {
    to {
        opacity: 1;
        transform: scaleX(1)
    }
}

@keyframes v12Aurora {
    to {
        transform: rotate(360deg)
    }
}

@keyframes v12Breath {
    50% {
        transform: scale(1.07);
        opacity: .72
    }
}

/* Footer uses the user's original full-name logo as one image. */
.v8-footer .footer-brand img {
    width: min(460px,100%)!important;
    height: auto!important;
    max-height: none!important;
    object-fit: contain!important;
    object-position: left center!important;
    filter: drop-shadow(0 10px 26px rgba(216,184,117,.08))
}

.v8-footer .footer-brand {
    max-width: 600px
}

.v8-footer .footer-brand p {
    max-width: 580px;
    margin-top: 26px
}

/* Reintroduce selected V5 depth without returning to page clutter. */
.v12-philosophy {
    position: relative;
    overflow: hidden;
    padding: 130px 0 142px;
    background: radial-gradient(circle at 82% 48%,rgba(58,82,150,.13),transparent 31%),#040506;
    border-bottom: 1px solid var(--v12-line)
}

.v12-philosophy::after {
    content: "WEKYPSYR";
    position: absolute;
    right: -1vw;
    bottom: -.16em;
    font-size: 20vw;
    font-weight: 900;
    letter-spacing: -.065em;
    line-height: .8;
    color: rgba(255,255,255,.018);
    pointer-events: none
}

.v12-philosophy-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .42fr 1.58fr;
    gap: 8vw;
    align-items: start
}

.v12-philosophy-index {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--v12-gold);
    padding-top: 10px
}

.v12-philosophy-index span {
    font-size: 13px;
    font-weight: 700
}

.v12-philosophy-index small {
    font-size: 10px;
    letter-spacing: .2em;
    color: #777d86
}

.v12-philosophy-copy h2 {
    max-width: 1000px;
    margin: 12px 0 0;
    font-size: clamp(36px,4.7vw,70px);
    line-height: 1.12;
    letter-spacing: -.045em
}

.v12-philosophy-copy h2 .muted {
    color: #666b72
}

.v12-philosophy-copy h2>span:first-child {
    color: #fff
}

.v12-philosophy-copy>p:last-child {
    max-width: 650px;
    margin: 35px 0 0;
    color: #9da2aa;
    font-size: 16px;
    line-height: 1.82
}

.v12-tech {
    padding: 110px 0 126px;
    background: #030405;
    border-bottom: 1px solid var(--v12-line)
}

.v12-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 42px
}

.v12-section-head h2 {
    margin: 8px 0 0;
    font-size: clamp(34px,4vw,58px);
    line-height: 1.05;
    letter-spacing: -.045em
}

.v12-section-head>p {
    max-width: 500px;
    margin: 0;
    color: #898f98;
    font-size: 14px;
    line-height: 1.75
}

.v12-section-head>a {
    color: #fff;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap
}

.v12-section-head>a:hover {
    color: var(--v12-gold-light)
}

.v12-tech-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    grid-template-rows: repeat(2,minmax(280px,34vw));
    gap: 14px
}

.v12-tech-card {
    position: relative;
    overflow: hidden;
    min-height: 0;
    background: #080a0e;
    border: 1px solid rgba(255,255,255,.08);
    color: #fff
}

.v12-tech-card.wide {
    grid-row: 1/3
}

.v12-tech-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 40%,rgba(0,0,0,.78) 100%)
}

.v12-tech-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.16,1,.3,1),filter .6s;
    filter: saturate(.88) brightness(.82)
}

.v12-tech-card:hover img {
    transform: scale(1.025);
    filter: saturate(1) brightness(.92)
}

.v12-tech-card span,.v12-tech-card strong,.v12-tech-card small {
    position: absolute;
    z-index: 2;
    left: 28px;
    right: 28px
}

.v12-tech-card span {
    bottom: 94px;
    color: var(--v12-gold-light);
    font-size: 9px;
    letter-spacing: .2em
}

.v12-tech-card strong {
    bottom: 54px;
    font-size: clamp(18px,2vw,30px);
    line-height: 1.2
}

.v12-tech-card small {
    bottom: 27px;
    color: #adb2ba;
    font-size: 12px
}

.v12-news {
    padding: 112px 0 128px;
    background: #020304;
    border-bottom: 1px solid var(--v12-line)
}

.v12-news-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px
}

.v12-news-card a {
    display: block;
    color: #fff
}

.v12-news-media {
    aspect-ratio: 1.52;
    overflow: hidden;
    background: #090b0e
}

.v12-news-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.16,1,.3,1),filter .5s;
    filter: saturate(.82) brightness(.86)
}

.v12-news-card:hover img {
    transform: scale(1.03);
    filter: saturate(1) brightness(.96)
}

.v12-news-meta {
    display: flex;
    gap: 16px;
    margin-top: 20px;
    font-size: 11px
}

.v12-news-meta span {
    color: var(--v12-gold-light);
    font-weight: 700
}

.v12-news-meta time {
    color: #8c929b
}

.v12-news-card h3 {
    margin: 14px 0 0;
    font-size: clamp(18px,1.55vw,25px);
    line-height: 1.38;
    letter-spacing: -.02em
}

@media(max-width: 900px) {
    .v12-intro-symbol {
        width:92px;
        height: 66px
    }

    .v12-spectrum {
        width: min(72vw,480px);
        margin-top: 34px
    }

    .v12-philosophy {
        padding: 94px 0 104px
    }

    .v12-philosophy-grid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .v12-philosophy-copy h2 {
        font-size: clamp(34px,7vw,54px)
    }

    .v12-tech-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto
    }

    .v12-tech-card,.v12-tech-card.wide {
        grid-row: auto;
        min-height: 480px
    }

    .v12-news-grid {
        grid-template-columns: 1fr 1fr
    }

    .v12-news-card:last-child {
        grid-column: 1/-1;
        max-width: calc(50% - 12px)
    }

    .v8-footer .footer-brand img {
        width: min(72vw,430px)!important
    }
}

@media(max-width: 620px) {
    .v12-intro-center {
        height:300px
    }

    .v12-intro-symbol {
        width: 76px;
        height: 54px
    }

    .v12-spectrum {
        width: 74vw;
        margin-top: 28px
    }

    .v12-philosophy {
        padding: 74px 0 82px
    }

    .v12-philosophy-copy h2 {
        font-size: 36px
    }

    .v12-philosophy-copy>p:last-child {
        font-size: 14px;
        margin-top: 26px
    }

    .v12-tech,.v12-news {
        padding: 76px 0 86px
    }

    .v12-section-head {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 28px
    }

    .v12-section-head>p {
        font-size: 13px
    }

    .v12-tech-card,.v12-tech-card.wide {
        min-height: 350px
    }

    .v12-tech-card span,.v12-tech-card strong,.v12-tech-card small {
        left: 20px;
        right: 20px
    }

    .v12-tech-card span {
        bottom: 83px
    }

    .v12-tech-card strong {
        bottom: 47px;
        font-size: 21px
    }

    .v12-tech-card small {
        bottom: 22px
    }

    .v12-news-grid {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .v12-news-card:last-child {
        grid-column: auto;
        max-width: none
    }

    .v12-news-card h3 {
        font-size: 20px
    }

    .v8-footer .footer-brand img {
        width: min(84vw,330px)!important
    }
}

@media(prefers-reduced-motion:reduce) {
    .v12-intro::before,.v12-intro-ambient,.v12-intro-outline,.v12-intro-fill,.v12-spectrum {
        animation: none!important
    }

    .v12-intro-outline {
        opacity: 0
    }

    .v12-intro-fill,.v12-spectrum {
        opacity: 1;
        transform: none
    }
}

/* === v13.css === */
:root {
    --v13-gold: #D8B875;
    --v13-gold-light: #F2DEB0;
    --v13-copper: #8E6425;
    --v13-blue: #6B7CFF;
    --v13-cyan: #32B8FF;
    --v13-pink: #DB5B9D;
    --v13-bg: #020304;
    --v13-panel: #090b0f;
    --v13-line: rgba(255,255,255,.09);
}

/* V13 INTRO — one W, V5 outline-to-metal motion and both text lines restored. */
.v13-intro {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: grid;
    place-items: center;
    background: #020304;
    overflow: hidden;
    transition: opacity .8s cubic-bezier(.16,1,.3,1),visibility .8s
}

.v13-intro.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.v13-intro::before {
    content: "";
    position: absolute;
    inset: -30%;
    background: conic-gradient(from 190deg at 50% 50%,transparent 0 34%,rgba(216,184,117,.12) 42%,rgba(107,124,255,.10) 49%,transparent 58% 100%);
    filter: blur(40px);
    animation: v13Aurora 6.5s linear infinite
}

.v13-intro::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);
    background-size: 76px 76px;
    mask-image: radial-gradient(circle,#000 0,transparent 69%);
    opacity: .5
}

.v13-intro-ambient {
    position: absolute;
    width: min(49vw,720px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(216,184,117,.14),rgba(107,124,255,.06) 40%,transparent 70%);
    filter: blur(18px);
    animation: v13Breath 3.2s ease-in-out infinite
}

.v13-intro-center {
    position: relative;
    z-index: 2;
    width: min(88vw,820px);
    min-height: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

.v13-intro-symbol {
    position: relative;
    width: 112px;
    height: 80px
}

.v13-intro-symbol img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.v13-intro-outline {
    opacity: 0;
    transform: scale(.80);
    animation: v13Outline .82s .10s cubic-bezier(.16,1,.3,1) forwards;
    filter: drop-shadow(0 0 22px rgba(242,222,176,.22))
}

.v13-intro-fill {
    opacity: 0;
    transform: scale(.92);
    animation: v13Fill .76s .68s cubic-bezier(.16,1,.3,1) forwards;
    filter: drop-shadow(0 14px 36px rgba(216,184,117,.25))
}

.v13-intro-cn {
    display: block;
    margin-top: 35px;
    color: rgba(248,246,240,.68);
    font-size: 11px;
    font-weight: 620;
    letter-spacing: .24em;
    opacity: 0;
    transform: translateY(8px);
    animation: v13Text .72s 1.06s forwards
}

.v13-spectrum {
    display: block;
    width: min(64vw,540px);
    height: 2px;
    margin-top: 20px;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    background: linear-gradient(90deg,transparent 0%,#f2deb0 16%,#d8b875 34%,#6b7cff 58%,#32b8ff 74%,#db5b9d 88%,transparent 100%);
    box-shadow: 0 0 22px rgba(107,124,255,.18);
    animation: v13Spectrum 1.08s 1.28s cubic-bezier(.16,1,.3,1) forwards
}

.v13-intro-sub {
    display: block;
    margin-top: 17px;
    color: rgba(255,255,255,.48);
    font-size: 9px;
    font-weight: 560;
    letter-spacing: .42em;
    opacity: 0;
    transform: translateY(7px);
    animation: v13Text .72s 1.62s forwards
}

@keyframes v13Outline {
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes v13Fill {
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes v13Text {
    to {
        opacity: 1;
        transform: none
    }
}

@keyframes v13Spectrum {
    to {
        opacity: 1;
        transform: scaleX(1)
    }
}

@keyframes v13Aurora {
    to {
        transform: rotate(360deg)
    }
}

@keyframes v13Breath {
    50% {
        transform: scale(1.07);
        opacity: .72
    }
}

/* Footer full-name logo remains the user's original asset, with a restrained scale. */
.v8-footer .footer-brand {
    max-width: 430px!important
}

.v8-footer .footer-brand img {
    width: min(280px,100%)!important;
    height: auto!important;
    max-height: none!important;
    object-fit: contain!important;
    object-position: left center!important;
    filter: drop-shadow(0 8px 22px rgba(216,184,117,.08))
}

.v8-footer .footer-brand p {
    max-width: 420px!important;
    margin-top: 22px!important;
    font-size: 14px!important;
    line-height: 1.72
}

.v8-footer .footer-contact {
    margin-top: 23px!important;
    gap: 24px!important
}

/* Compact visual feature cards replace long parameter-heavy sections. */
.v13-experience {
    padding: 118px 0 126px;
    background: radial-gradient(circle at 82% 16%,rgba(65,84,151,.12),transparent 28%),#030405;
    border-bottom: 1px solid var(--v13-line)
}

.v13-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 44px
}

.v13-section-head h2 {
    margin: 8px 0 0;
    font-size: clamp(36px,4.35vw,64px);
    line-height: 1.06;
    letter-spacing: -.05em
}

.v13-section-head h2 span {
    color: #6d727a
}

.v13-section-head>p {
    max-width: 510px;
    margin: 0;
    color: #9298a1;
    font-size: 14px;
    line-height: 1.78
}

.v13-bento-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr .92fr;
    grid-template-rows: 360px 300px;
    gap: 14px
}

.v13-bento-card {
    position: relative;
    display: block;
    overflow: hidden;
    min-width: 0;
    background: linear-gradient(145deg,#0a0c10,#050608);
    border: 1px solid rgba(255,255,255,.085);
    color: #fff;
    isolation: isolate;
    transition: border-color .35s,transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s
}

.v13-bento-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 72% 40%,rgba(71,93,170,.16),transparent 42%);
    opacity: .7
}

.v13-bento-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(0,0,0,.82) 100%);
    pointer-events: none
}

.v13-bento-card:hover {
    transform: translateY(-4px);
    border-color: rgba(242,222,176,.26);
    box-shadow: 0 28px 58px rgba(0,0,0,.24)
}

.v13-bento-card img {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.88) brightness(.82);
    transition: transform .8s cubic-bezier(.16,1,.3,1),filter .6s
}

.v13-bento-card:hover img {
    transform: scale(1.025);
    filter: saturate(1) brightness(.92)
}

.v13-bento-copy {
    position: absolute;
    z-index: 2;
    left: 28px;
    right: 28px;
    top: 26px;
    max-width: 410px
}

.v13-bento-copy span {
    display: block;
    margin-bottom: 12px;
    color: var(--v13-gold-light);
    font-size: 9px;
    font-weight: 720;
    letter-spacing: .21em
}

.v13-bento-copy h3 {
    margin: 0;
    font-size: clamp(22px,2vw,31px);
    line-height: 1.14;
    letter-spacing: -.035em
}

.v13-bento-copy p {
    max-width: 34ch;
    margin: 11px 0 0;
    color: #a7adb6;
    font-size: 13px;
    line-height: 1.66
}

.v13-bento-card>b {
    position: absolute;
    z-index: 2;
    right: 22px;
    bottom: 18px;
    color: rgba(255,255,255,.24);
    font-size: 11px;
    letter-spacing: .18em
}

.v13-bento-display {
    grid-row: 1/3
}

.v13-bento-display img {
    object-position: center 58%;
    filter: saturate(.82) brightness(.68)
}

.v13-bento-flow img {
    object-position: center 55%
}

.v13-bento-warranty::before {
    background: radial-gradient(circle at 66% 52%,rgba(216,184,117,.16),transparent 45%)
}

.v13-bento-warranty::after {
    background: linear-gradient(180deg,transparent 40%,rgba(0,0,0,.78))
}

.v13-warranty-mark {
    position: absolute;
    right: 10%;
    bottom: 10%;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--v13-gold-light);
    filter: drop-shadow(0 18px 35px rgba(0,0,0,.35))
}

.v13-warranty-mark strong {
    font-family: Arial,sans-serif;
    font-size: 112px;
    line-height: .8;
    letter-spacing: -.08em
}

.v13-warranty-mark small {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .12em
}

.v13-bento-motor {
    grid-column: 2/3
}

.v13-bento-material {
    grid-column: 3/4
}

.v13-bento-motor img,.v13-bento-material img {
    object-position: center 58%
}

/* Two editorial product moments keep the home page substantial without parameter overload. */
.v13-product-focus {
    background: #020304;
    border-bottom: 1px solid var(--v13-line)
}

.v13-focus-row {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    min-height: 620px;
    border-bottom: 1px solid var(--v13-line);
    overflow: hidden
}

.v13-focus-row:last-child {
    border-bottom: 0;
    grid-template-columns: .75fr 1.25fr
}

.v13-focus-media {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    overflow: hidden;
    background: radial-gradient(circle at 50% 48%,rgba(70,94,171,.16),transparent 45%),#06080b
}

.v13-focus-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
    background-size: 84px 84px;
    mask-image: radial-gradient(circle,#000,transparent 72%)
}

.v13-focus-media img {
    position: relative;
    z-index: 1;
    width: min(78%,760px);
    height: 78%;
    object-fit: contain;
    filter: drop-shadow(0 34px 60px rgba(0,0,0,.35));
    transition: transform .75s cubic-bezier(.16,1,.3,1)
}

.v13-focus-row:hover .v13-focus-media img {
    transform: scale(1.025)
}

.v13-focus-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px clamp(45px,7vw,110px);
    background: #050607
}

.v13-focus-copy h2 {
    margin: 12px 0 18px;
    font-size: clamp(42px,5vw,76px);
    line-height: 1;
    letter-spacing: -.055em
}

.v13-focus-copy>p:not(.eyebrow) {
    max-width: 470px;
    margin: 0;
    color: #9ea4ad;
    font-size: 15px;
    line-height: 1.8
}

.v13-focus-copy a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    margin-top: 30px;
    color: #fff;
    font-size: 13px;
    font-weight: 700
}

.v13-focus-copy a span {
    color: var(--v13-gold-light);
    transition: transform .25s
}

.v13-focus-copy a:hover {
    color: var(--v13-gold-light)
}

.v13-focus-copy a:hover span {
    transform: translate(3px,-3px)
}

/* News remains visual and compact. */
.v12-news {
    padding-top: 104px!important
}

@media(max-width: 1080px) {
    .v13-bento-grid {
        grid-template-columns:1fr 1fr;
        grid-template-rows: 360px 300px 300px
    }

    .v13-bento-display {
        grid-row: 1/3
    }

    .v13-bento-warranty {
        grid-column: 2/3
    }

    .v13-bento-motor {
        grid-column: 1/2;
        grid-row: 3/4
    }

    .v13-bento-material {
        grid-column: 2/3;
        grid-row: 3/4
    }

    .v13-focus-row,.v13-focus-row:last-child {
        grid-template-columns: 1fr 1fr;
        min-height: 560px
    }
}

@media(max-width: 760px) {
    .v13-intro-center {
        min-height:320px
    }

    .v13-intro-symbol {
        width: 88px;
        height: 63px
    }

    .v13-intro-cn {
        margin-top: 28px;
        font-size: 8.5px;
        letter-spacing: .17em
    }

    .v13-spectrum {
        width: 74vw;
        margin-top: 17px
    }

    .v13-intro-sub {
        font-size: 7px;
        letter-spacing: .28em
    }

    .v13-experience {
        padding: 84px 0 92px
    }

    .v13-section-head {
        display: block;
        margin-bottom: 30px
    }

    .v13-section-head h2 {
        font-size: clamp(34px,10vw,48px)
    }

    .v13-section-head>p {
        margin-top: 18px
    }

    .v13-bento-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 12px
    }

    .v13-bento-card,.v13-bento-display,.v13-bento-warranty,.v13-bento-motor,.v13-bento-material {
        grid-column: auto;
        grid-row: auto;
        min-height: 340px
    }

    .v13-bento-display {
        min-height: 500px
    }

    .v13-bento-copy {
        left: 22px;
        right: 22px;
        top: 22px
    }

    .v13-bento-copy h3 {
        font-size: 26px
    }

    .v13-bento-copy p {
        font-size: 12.5px
    }

    .v13-warranty-mark {
        right: 12%;
        bottom: 12%
    }

    .v13-warranty-mark strong {
        font-size: 92px
    }

    .v13-focus-row,.v13-focus-row:last-child {
        display: flex;
        flex-direction: column;
        min-height: 0
    }

    .v13-focus-row:last-child .v13-focus-copy {
        order: 2
    }

    .v13-focus-row:last-child .v13-focus-media {
        order: 1
    }

    .v13-focus-media {
        min-height: 430px
    }

    .v13-focus-media img {
        width: 88%;
        height: 82%
    }

    .v13-focus-copy {
        padding: 55px 24px 62px
    }

    .v13-focus-copy h2 {
        font-size: 48px
    }

    .v8-footer .footer-brand img {
        width: min(220px,72vw)!important
    }

    .v8-footer .footer-brand {
        max-width: none!important
    }
}

@media(prefers-reduced-motion:reduce) {
    .v13-intro::before,.v13-intro-ambient,.v13-intro-outline,.v13-intro-fill,.v13-intro-cn,.v13-spectrum,.v13-intro-sub {
        animation: none!important;
        opacity: 1!important;
        transform: none!important
    }
}

/* === v14.css === */
/* WEKYPSYR V14 — automatic featured-product carousel */
.v11-product-slider {
    --v14-autoplay-ms: 5200ms
}

.v11-slider-dots button {
    position: relative;
    overflow: hidden
}

.v11-slider-dots button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,var(--v11-gold-light),#6b7cff,#dc5fa5);
    transform: scaleX(0);
    transform-origin: left center
}

.v11-slider-dots button.is-active {
    background: rgba(255,255,255,.22)
}

.v11-product-slider.v14-progress-running .v11-slider-dots button.is-active::after {
    animation: v14CarouselProgress var(--v14-autoplay-ms) linear forwards
}

.v11-product-slider:focus-within .v11-slider-dots button.is-active::after {
    animation-play-state: paused
}

.v11-slide.is-active .v11-slide-copy {
    animation: v14CopyIn .72s cubic-bezier(.2,.75,.2,1) both
}

.v11-slide.is-active .v11-slide-media {
    animation: v14MediaIn .86s cubic-bezier(.2,.75,.2,1) both
}

@keyframes v14CarouselProgress {
    from {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

@keyframes v14CopyIn {
    from {
        opacity: 0;
        transform: translateX(-18px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes v14MediaIn {
    from {
        opacity: .2;
        transform: translateX(24px) scale(.985)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media(prefers-reduced-motion:reduce) {
    .v11-product-slider.v14-progress-running .v11-slider-dots button.is-active::after,.v11-slide.is-active .v11-slide-copy,.v11-slide.is-active .v11-slide-media {
        animation: none!important
    }

    .v11-slider-dots button.is-active::after {
        transform: scaleX(1)
    }
}

/* === v15.css === */
/* WEKYPSYR V15 — typography audit, clean visual cards, deterministic mega navigation */
:root {
    --v15-gold: #d8b875;
    --v15-gold-hi: #f2deb0;
    --v15-ink: #f7f5ef;
    --v15-muted: #9da3ad;
    --v15-line: rgba(255,255,255,.10);
    --v15-ease: cubic-bezier(.16,1,.3,1);
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility
}

body {
    font-family: "Noto Sans CJK SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
    font-weight: 400;
    letter-spacing: 0
}

h1,h2,h3,h4,strong {
    font-weight: 700;
    text-wrap: balance
}

p {
    overflow-wrap: anywhere
}

/* 1. Header navigation: one panel only; click again closes; hover switches cleanly via V15 JS. */
.v8-header .nav-item:hover>.mega-panel, .v8-header .nav-item:focus-within>.mega-panel {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px)
}

.v8-header .nav-item.is-open>.mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none
}

.v8-header .mega-panel {
    z-index: 3700;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(3,4,6,.992);
    box-shadow: 0 34px 90px rgba(0,0,0,.62)
}

body.v15-mega-open::after {
    content: "";
    position: fixed;
    z-index: 3500;
    inset: var(--header-h,78px) 0 0;
    background: rgba(0,0,0,.30);
    pointer-events: none;
    backdrop-filter: blur(2px)
}

.v8-header .mega-wrap {
    width: min(calc(100% - 112px),1380px);
    grid-template-columns: 250px minmax(0,1fr);
    gap: 42px;
    padding: 32px 0 36px
}

.v8-header .mega-intro h2 {
    font-size: clamp(24px,2vw,30px);
    line-height: 1.16;
    margin: 10px 0 9px;
    color: #f2f0ea;
}

.v8-header .mega-intro p {
    max-width: 29ch;
    font-size: 12.5px;
    line-height: 1.72
}

.v8-header .mega-link-grid>a {
    min-height: 118px;
    padding: 18px
}

.v8-header .mega-link-grid strong {
    font-size: 14px;
    line-height: 1.35
}

.v8-header .mega-link-grid small {
    font-size: 10.5px;
    line-height: 1.55
}

.v8-header .mega-product-media {
    height: 154px
}

.v8-header .mega-product-card>strong {
    font-size: 16px
}

/* 2. Coherent type scale across public pages. */
.display {
    font-size: clamp(44px,5.6vw,78px)!important;
    line-height: 1.01!important;
    letter-spacing: -.055em!important
}

.title {
    font-size: clamp(34px,4vw,56px)!important;
    line-height: 1.08!important
}

.title-sm {
    font-size: clamp(27px,2.75vw,40px)!important;
    line-height: 1.16!important;
    letter-spacing: -.035em!important
}

.lead {
    max-width: 650px;
    font-size: 14.5px!important;
    line-height: 1.82!important;
    color: #a2a7af
}

.eyebrow {
    font-size: 9px!important;
    line-height: 1.3!important;
    letter-spacing: .19em!important
}

.page-hero .container {
    padding-bottom: 68px
}

.page-hero .lead {
    max-width: 570px
}

/* Product details: prevent oversized headings and text collisions. */
.product-detail-grid {
    grid-template-columns: minmax(280px,.70fr) minmax(0,1.30fr);
    gap: clamp(30px,5vw,78px);
    align-items: center
}

.product-detail-copy {
    max-width: 470px
}

.product-detail-copy h1 {
    font-size: clamp(58px,7vw,94px)!important;
    line-height: .92!important;
    letter-spacing: -.065em!important
}

.product-detail-copy .cn-name {
    margin-top: 13px;
    font-size: clamp(16px,1.35vw,20px)!important;
    line-height: 1.42!important
}

.product-detail-copy>p {
    max-width: 43ch;
    margin-top: 18px!important;
    font-size: 14px!important;
    line-height: 1.82!important;
    color: #a2a7af
}

.product-detail-stage {
    min-height: 540px
}

.product-detail-stage img {
    max-width: 92%;
    max-height: 82%;
    object-fit: contain
}

.product-intro-band {
    grid-template-columns: minmax(250px,.60fr) minmax(0,1.40fr);
    gap: clamp(34px,5vw,70px)
}

.product-intro-band .copy {
    max-width: 390px
}

.product-intro-band .copy .title-sm {
    max-width: 12em
}

.product-intro-band .copy p:not(.eyebrow) {
    font-size: 14px!important;
    line-height: 1.82!important
}

.section-head .title-sm {
    max-width: 15em
}

.spec-sticky .title-sm {
    font-size: clamp(28px,2.7vw,40px)!important
}

.spec-table {
    font-size: 13px
}

.spec-table th,.spec-table td {
    line-height: 1.55;
    overflow-wrap: anywhere
}

.v9-artwork-section img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain
}

/* 3. Home experience cards: clean visuals, no baked poster text beneath HTML copy. */
.v13-experience {
    padding: 104px 0 112px
}

.v13-section-head {
    margin-bottom: 36px;
    gap: 44px
}

.v13-section-head h2 {
    font-size: clamp(34px,3.8vw,54px);
    line-height: 1.08
}

.v13-section-head>p {
    max-width: 460px;
    font-size: 13.5px;
    line-height: 1.72
}

.v13-bento-grid {
    grid-template-columns: 1.06fr .97fr .97fr;
    grid-template-rows: 330px 282px;
    gap: 14px
}

.v13-bento-card {
    background: radial-gradient(circle at 76% 62%,rgba(74,96,166,.13),transparent 44%),linear-gradient(145deg,#0a0c10,#040507);
    border-color: rgba(255,255,255,.095)
}

.v13-bento-card::after {
    background: linear-gradient(90deg,rgba(3,4,6,.94) 0%,rgba(3,4,6,.72) 43%,rgba(3,4,6,.14) 72%,rgba(3,4,6,.04) 100%)
}

.v13-bento-copy {
    left: 26px;
    right: auto;
    top: 24px;
    width: min(48%,360px);
    max-width: none
}

.v13-bento-copy span {
    margin-bottom: 10px;
    font-size: 8.5px;
    letter-spacing: .19em
}

.v13-bento-copy h3 {
    font-size: clamp(21px,1.75vw,27px);
    line-height: 1.22;
    letter-spacing: -.025em
}

.v13-bento-copy p {
    max-width: 29ch;
    margin-top: 9px;
    font-size: 12px;
    line-height: 1.62;
    color: #9ea4ad
}

.v13-bento-card img {
    left: auto;
    top: auto;
    right: -5%;
    bottom: -8%;
    width: 66%;
    height: 88%;
    object-fit: contain;
    object-position: center;
    filter: saturate(.92) brightness(.92);
    transform: none
}

.v13-bento-card:hover img {
    transform: translateY(-3px) scale(1.018);
    filter: saturate(1) brightness(1)
}

.v13-bento-display::after {
    background: linear-gradient(180deg,rgba(3,4,6,.92) 0%,rgba(3,4,6,.48) 34%,rgba(3,4,6,.04) 62%)
}

.v13-bento-display .v13-bento-copy {
    width: calc(100% - 52px);
    max-width: 390px
}

.v13-bento-display img {
    right: -9%;
    bottom: -6%;
    width: 112%;
    height: 78%;
    object-fit: contain
}

.v13-bento-flow img {
    right: -11%;
    bottom: -12%;
    width: 78%;
    height: 104%
}

.v13-bento-motor img {
    right: -5%;
    bottom: -10%;
    width: 72%;
    height: 100%
}

.v13-bento-material img {
    right: -8%;
    bottom: -12%;
    width: 80%;
    height: 106%
}

.v13-bento-warranty::after {
    background: linear-gradient(180deg,rgba(3,4,6,.78),transparent 58%)
}

.v13-warranty-mark {
    right: 10%;
    bottom: 12%
}

.v13-warranty-mark strong {
    font-size: 96px
}

/* 4. Editorial product rows: no giant broken Chinese columns. */
.v13-focus-row,.v13-focus-row:last-child {
    grid-template-columns: minmax(0,1.16fr) minmax(360px,.84fr);
    min-height: 560px
}

.v13-focus-row:last-child {
    grid-template-columns: minmax(360px,.84fr) minmax(0,1.16fr)
}

.v13-focus-copy {
    padding: 68px clamp(42px,5.2vw,78px)
}

.v13-focus-copy h2 {
    max-width: 9.5em;
    margin: 12px 0 17px;
    font-size: clamp(36px,3.7vw,54px);
    line-height: 1.08;
    letter-spacing: -.045em
}

.v13-focus-copy>p:not(.eyebrow) {
    max-width: 36em;
    font-size: 14px;
    line-height: 1.78
}

.v13-focus-media {
    min-height: 520px
}

.v13-focus-media img {
    width: min(72%,680px);
    height: 76%
}

.v13-focus-row:last-child .v13-focus-media img {
    width: min(55%,520px);
    height: 74%
}

/* 5. News, quick links, software and catalog rhythm. */
.v12-news {
    padding: 92px 0 100px!important
}

.v12-section-head h2 {
    font-size: clamp(34px,3.7vw,52px)!important
}

.v12-news-card h3 {
    font-size: clamp(17px,1.35vw,21px)!important;
    line-height: 1.38!important
}

.v11-quick-grid a {
    min-height: 142px;
    padding: 28px 26px
}

.v11-quick-grid strong {
    font-size: 17px
}

.v8-software-grid article>div h2 {
    font-size: clamp(25px,2.4vw,36px);
    line-height: 1.18
}

.v8-catalog-info h2 {
    font-size: clamp(26px,2.6vw,38px)
}

.v8-catalog-info p {
    font-size: 13px
}

/* Responsive typography and layout. */
@media(max-width: 1180px) {
    .v8-header .mega-wrap {
        width:min(calc(100% - 64px),1320px);
        grid-template-columns: 220px minmax(0,1fr);
        gap: 30px
    }

    .v13-bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 330px 280px 280px
    }

    .v13-bento-display {
        grid-row: 1/3
    }

    .v13-bento-warranty {
        grid-column: 2
    }

    .v13-bento-motor {
        grid-column: 1;
        grid-row: 3
    }

    .v13-bento-material {
        grid-column: 2;
        grid-row: 3
    }

    .v13-focus-row,.v13-focus-row:last-child {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width: 900px) {
    .product-detail-grid,.product-intro-band {
        grid-template-columns:1fr
    }

    .product-detail-copy {
        max-width: 620px
    }

    .product-detail-stage {
        min-height: 460px
    }

    .v13-focus-row,.v13-focus-row:last-child {
        display: flex;
        flex-direction: column
    }

    .v13-focus-row:last-child .v13-focus-copy {
        order: 2
    }

    .v13-focus-row:last-child .v13-focus-media {
        order: 1
    }

    .v13-focus-media {
        min-height: 420px
    }

    .v13-focus-copy {
        padding: 48px 32px 56px
    }

    .v13-focus-copy h2 {
        font-size: clamp(34px,7vw,48px)
    }
}

@media(max-width: 760px) {
    .display {
        font-size:clamp(38px,11vw,54px)!important
    }

    .title-sm {
        font-size: clamp(26px,7.7vw,36px)!important
    }

    .product-detail-copy h1 {
        font-size: clamp(56px,18vw,78px)!important
    }

    .product-detail-stage {
        min-height: 390px
    }

    .v13-experience {
        padding: 76px 0 84px
    }

    .v13-section-head {
        display: block
    }

    .v13-section-head>p {
        margin-top: 15px
    }

    .v13-bento-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none
    }

    .v13-bento-card,.v13-bento-display,.v13-bento-warranty,.v13-bento-motor,.v13-bento-material {
        grid-column: auto;
        grid-row: auto;
        min-height: 330px
    }

    .v13-bento-display {
        min-height: 450px
    }

    .v13-bento-copy {
        width: min(58%,330px);
        left: 21px;
        top: 21px
    }

    .v13-bento-display .v13-bento-copy {
        width: calc(100% - 42px)
    }

    .v13-bento-copy h3 {
        font-size: 24px
    }

    .v13-bento-copy p {
        font-size: 11.5px
    }

    .v13-warranty-mark strong {
        font-size: 82px
    }

    .v13-focus-media {
        min-height: 370px
    }

    .v13-focus-media img {
        width: 84%;
        height: 78%
    }

    .v13-focus-row:last-child .v13-focus-media img {
        width: 62%
    }

    .v13-focus-copy {
        padding: 44px 22px 52px
    }

    .v13-focus-copy h2 {
        font-size: 38px;
        max-width: 10em
    }
}

@media(max-width: 480px) {
    .v13-bento-card {
        min-height:310px
    }

    .v13-bento-display {
        min-height: 410px
    }

    .v13-bento-copy {
        width: 66%
    }

    .v13-bento-copy h3 {
        font-size: 21px
    }

    .v13-bento-copy p {
        display: none
    }

    .v13-bento-display .v13-bento-copy p {
        display: block
    }

    .v13-focus-copy h2 {
        font-size: 34px
    }
}

/* === v16.css === */
/* WEKYPSYR V16 — final proportion, spacing and subtle tech-luxury polish */
:root {
    --v16-gold: #d8b875;
    --v16-gold-hi: #f2deb0;
    --v16-blue: #6b7cff;
    --v16-ink: #f7f5ef;
    --v16-muted: #969da7;
    --v16-line: rgba(255,255,255,.085);
}

/* Keep typography disciplined and prevent awkward single-character wraps. */
h1,h2,h3,blockquote {
    word-break: keep-all;
    overflow-wrap: normal
}

body {
    background: #030405
}

/* Small premium/tech accents, deliberately subtle. */
body::before {
    content: "";
    position: fixed;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 72% 18%,rgba(107,124,255,.045),transparent 30%), radial-gradient(circle at 19% 70%,rgba(216,184,117,.035),transparent 31%),#030405;
}

body::after {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .12;
    background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size: 96px 96px;
    mask-image: linear-gradient(to bottom,rgba(0,0,0,.35),transparent 88%);
}

.site-header::after {
    background: linear-gradient(90deg,transparent,rgba(216,184,117,.26),rgba(107,124,255,.13),transparent)!important
}

/* About hero: remove the visually empty middle band and rebalance scale. */
body[data-page="about"] .page-hero {
    min-height: clamp(390px,42svh,460px)!important;
    align-items: flex-end;
    background: radial-gradient(circle at 74% 44%,rgba(47,63,108,.14),transparent 35%),#050607;
}

body[data-page="about"] .page-hero .container {
    padding-bottom: 52px!important
}

body[data-page="about"] .page-hero .display {
    max-width: 760px;
    font-size: clamp(48px,4.7vw,72px)!important;
    line-height: 1.02!important;
}

body[data-page="about"] .page-hero .lead {
    max-width: 720px;
    font-size: 14px!important;
    line-height: 1.72!important
}

body[data-page="about"] .page-hero-watermark {
    font-size: 20vw;
    bottom: -.07em;
    color: rgba(255,255,255,.022)
}

/* Brand statement: one coherent headline instead of a stray second line. */
body[data-page="about"] #brand-story {
    padding-top: 84px;
    padding-bottom: 94px
}

body[data-page="about"] .about-statement {
    grid-template-columns: 220px minmax(0,1fr);
    gap: clamp(34px,5vw,82px);
    align-items: start;
}

body[data-page="about"] .about-statement blockquote {
    max-width: 100%;
    margin: 0 0 28px;
    font-size: clamp(38px,4.25vw,62px);
    line-height: 1.13;
    letter-spacing: -.045em;
    white-space: nowrap;
    text-wrap: nowrap;
}

body[data-page="about"] .about-statement blockquote em {
    display: inline;
    color: var(--v16-gold-hi);
    font-style: normal
}

body[data-page="about"] .about-copy {
    max-width: 850px
}

body[data-page="about"] .about-copy p {
    font-size: 14px;
    line-height: 1.9;
    color: #a2a7af;
    margin: 0 0 18px
}

/* The name section: compact and balanced. */
body[data-page="about"] .brand-cta {
    padding-block:92px}

body[data-page="about"] .brand-cta-grid {
    grid-template-columns: minmax(0,1fr) 260px;
    gap: 80px;
    align-items: center
}

body[data-page="about"] .brand-cta .title {
    font-size: clamp(34px,3.55vw,52px)!important;
    max-width: 9.5em
}

body[data-page="about"] .brand-cta-mark {
    display: grid;
    place-items: center;
    min-height: 230px
}

body[data-page="about"] .brand-cta-mark img {
    width: min(180px,70%);
    max-height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 0 28px rgba(216,184,117,.12))
}

/* Principles: slightly denser cards. */
body[data-page="about"] #principles {
    padding-block:88px}

body[data-page="about"] .values-grid {
    gap: 12px
}

body[data-page="about"] .value-card {
    min-height: 230px;
    padding: 30px
}

body[data-page="about"] .value-card h3 {
    font-size: 25px
}

body[data-page="about"] .value-card p {
    font-size: 13px;
    line-height: 1.75
}

/* About media wall: preserve every source image's natural composition. */
body[data-page="about"] .media-wall {
    padding-top: 72px;
    padding-bottom: 98px
}

body[data-page="about"] .media-wall-grid {
    grid-template-columns: minmax(0,1.22fr) minmax(360px,.78fr);
    gap: 14px;
    align-items: stretch
}

body[data-page="about"] .media-tile {
    min-height: 0;
    border: 1px solid rgba(255,255,255,.09);
    background: linear-gradient(145deg,#080a0d,#040506);
    overflow: hidden
}

body[data-page="about"] .media-wall-grid>.media-tile {
    aspect-ratio: 16/10
}

body[data-page="about"] .media-stack {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 14px
}

body[data-page="about"] .media-stack .media-tile {
    aspect-ratio: auto;
    min-height: 0
}

body[data-page="about"] .media-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain!important;
    object-position: center!important;
    padding: 18px;
    transform: none!important;
}

body[data-page="about"] .media-caption {
    font-size: 9px;
    letter-spacing: .13em;
    padding: 9px 14px;
    background: rgba(3,4,5,.72);
    backdrop-filter: blur(8px)
}

/* Footer: original full logo, but scaled as a brand signature rather than a hero. */
.v8-footer .footer-main {
    grid-template-columns: minmax(260px,.85fr) repeat(3,minmax(150px,.55fr));
    gap: clamp(44px,6vw,108px);
    align-items: start
}

.v8-footer .footer-brand {
    max-width: 360px!important
}

.v8-footer .footer-brand img {
    width: 210px!important;
    max-width: 72%!important;
    height: auto!important;
    max-height: 58px!important;
    object-fit: contain!important;
    object-position: left center!important;
    filter: drop-shadow(0 8px 20px rgba(216,184,117,.06))!important;
}

.v8-footer .footer-brand p {
    max-width: 350px!important;
    margin-top: 18px!important;
    font-size: 12.5px!important;
    line-height: 1.72!important
}

.v8-footer .footer-contact {
    margin-top: 18px;
    gap: 22px
}

.v8-footer .footer-contact a {
    font-size: 11px
}

.v8-footer .footer-column h4 {
    font-size: 12px;
    margin-bottom: 19px
}

.v8-footer .footer-column a {
    font-size: 12px;
    line-height: 1.6;
    margin: 0 0 11px
}

.v8-footer .footer-address {
    font-size: 10.5px;
    padding-block:19px}

.v8-footer .footer-bottom {
    font-size: 9.5px;
    padding-block:20px}

/* Small corner accents make empty areas intentional without becoming decorative noise. */
body[data-page="about"] #brand-story .container, body[data-page="about"] .brand-cta .container, body[data-page="about"] #principles .container {
    position: relative
}

body[data-page="about"] #brand-story .container::after, body[data-page="about"] .brand-cta .container::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 42px;
    height: 42px;
    border-top: 1px solid rgba(216,184,117,.24);
    border-right: 1px solid rgba(107,124,255,.14);
    pointer-events: none;
}

@media(max-width: 1100px) {
    body[data-page="about"] .about-statement {
        grid-template-columns:170px minmax(0,1fr)
    }

    body[data-page="about"] .about-statement blockquote {
        font-size: clamp(36px,4.4vw,52px)
    }

    body[data-page="about"] .media-wall-grid {
        grid-template-columns: 1fr
    }

    .media-stack {
        grid-template-columns: 1fr 1fr!important;
        grid-template-rows: none!important
    }

    .media-stack .media-tile {
        aspect-ratio: 16/10!important
    }

    .v8-footer .footer-main {
        gap: 48px;
        grid-template-columns: 1.1fr repeat(3,.7fr)
    }
}

@media(max-width: 900px) {
    body[data-page="about"] .page-hero {
        min-height:430px!important
    }

    body[data-page="about"] .about-statement {
        grid-template-columns: 1fr;
        gap: 24px
    }

    body[data-page="about"] .about-statement blockquote {
        white-space: normal;
        text-wrap: balance;
        max-width: 12em;
        font-size: clamp(36px,7vw,50px)
    }

    body[data-page="about"] .brand-cta-grid {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .brand-cta-mark {
        min-height: 150px!important;
        justify-content: start!important
    }

    .brand-cta-mark img {
        width: 120px!important
    }

    .v8-footer .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 42px
    }

    .v8-footer .footer-brand {
        grid-column: 1/-1
    }
}

@media(max-width: 620px) {
    body[data-page="about"] .page-hero {
        min-height:390px!important
    }

    .page-hero .container {
        padding-bottom: 38px!important
    }

    body[data-page="about"] #brand-story {
        padding-top: 64px;
        padding-bottom: 70px
    }

    body[data-page="about"] .about-statement blockquote {
        font-size: 34px;
        line-height: 1.17
    }

    body[data-page="about"] .media-stack {
        grid-template-columns: 1fr!important
    }

    .media-stack .media-tile {
        aspect-ratio: 4/3!important
    }

    .v8-footer .footer-main {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .v8-footer .footer-brand {
        grid-column: auto
    }

    .v8-footer .footer-brand img {
        width: 180px!important;
        max-height: 50px!important
    }
}

/* === v17.css === */
/* WEKYPSYR V17 — compact page rhythm, visible interaction affordances, subtle tech-luxury polish */
:root {
    --v17-gold: #d8b875;
    --v17-gold-hi: #f2deb0;
    --v17-blue: #6b7cff;
    --v17-blue-soft: #98a6ff;
    --v17-ink: #f7f5ef;
    --v17-muted: #9aa1ab;
    --v17-line: rgba(255,255,255,.105);
    --v17-panel: #080a0d;
    --v17-ease: cubic-bezier(.16,1,.3,1);
}

/* Global polish */
html {
    scroll-behavior: smooth
}

body {
    background: #030405;
    overflow-x: hidden
}

body::before {
    content: "";
    position: fixed;
    z-index: -3;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 76% 14%,rgba(107,124,255,.065),transparent 29%), radial-gradient(circle at 18% 72%,rgba(216,184,117,.045),transparent 30%), #030405;
}

body::after {
    content: "";
    position: fixed;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background-image: linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.017) 1px,transparent 1px);
    background-size: 88px 88px;
    mask-image: linear-gradient(to bottom,rgba(0,0,0,.66),transparent 92%);
}

a,button {
    transition: color .25s var(--v17-ease),border-color .25s var(--v17-ease),background .25s var(--v17-ease),transform .25s var(--v17-ease),box-shadow .25s var(--v17-ease)
}

.btn,.text-link,.news-link {
    position: relative
}

.btn::after,.text-link::after,.news-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -5px;
    height: 1px;
    background: linear-gradient(90deg,var(--v17-gold),var(--v17-blue));
    transition: right .32s var(--v17-ease)
}

.btn:hover::after,.text-link:hover::after,.news-link:hover::after {
    right: 0
}

/* Header is slightly more dimensional but stays minimal. */
.v8-header {
    border-bottom: 1px solid rgba(255,255,255,.07)
}

.v8-header.scrolled {
    box-shadow: 0 14px 45px rgba(0,0,0,.34)
}

.v8-header .nav-link {
    position: relative
}

.v8-header .nav-link::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 100%;
    bottom: -14px;
    height: 1px;
    background: linear-gradient(90deg,var(--v17-gold),var(--v17-blue-soft));
    transition: right .28s var(--v17-ease);
    opacity: .85
}

.v8-header .nav-item.is-open>.nav-link::after,.v8-header .nav-link:hover::after {
    right: 0
}

/* Mega menus: cards must be discoverable before hover. */
.v8-header .mega-panel {
    background: radial-gradient(circle at 72% 4%,rgba(107,124,255,.08),transparent 31%), linear-gradient(180deg,rgba(7,9,13,.997),rgba(3,4,6,.997))!important;
    border-top: 1px solid rgba(216,184,117,.22)!important;
}

.v8-header .mega-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .32;
    background-image: linear-gradient(rgba(255,255,255,.019) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.019) 1px,transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom,#000,transparent 85%)
}

.v8-header .mega-wrap {
    position: relative;
    z-index: 1
}

.v8-header .mega-intro {
    padding: 4px 0 0
}

.v8-header .mega-intro::before {
    content: "";
    display: block;
    width: 42px;
    height: 1px;
    margin-bottom: 20px;
    background: linear-gradient(90deg,var(--v17-gold),var(--v17-blue));
    box-shadow: 0 0 18px rgba(107,124,255,.2)
}

.v8-header .mega-product-card, .v8-header .mega-link-grid>a {
    position: relative;
    overflow: hidden;
    border-color: rgba(216,184,117,.16)!important;
    background: linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012))!important;
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.v8-header .mega-product-card::before, .v8-header .mega-link-grid>a::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(280px circle at var(--mx,78%) var(--my,20%),rgba(107,124,255,.12),transparent 52%);
    opacity: .45;
    transition: opacity .3s
}

.v8-header .mega-product-card::after, .v8-header .mega-link-grid>a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    border-left: 1px solid rgba(216,184,117,.32);
    border-top: 1px solid rgba(216,184,117,.32);
    pointer-events: none
}

.v8-header .mega-product-card>* , .v8-header .mega-link-grid>a>* {
    position: relative;
    z-index: 1
}

.v8-header .mega-product-card:hover, .v8-header .mega-link-grid>a:hover {
    border-color: rgba(242,222,176,.5)!important;
    background: linear-gradient(145deg,rgba(216,184,117,.075),rgba(107,124,255,.035))!important;
    box-shadow: 0 18px 48px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.02)
}

.v8-header .mega-product-card:hover::before,.v8-header .mega-link-grid>a:hover::before {
    opacity: 1
}

.v8-header .mega-link-grid>a b {
    font-size: 11px;
    color: var(--v17-gold-hi)
}

/* Universal non-home page hero: remove the huge empty band across support/account/etc. */
body:not(.page-home) .page-hero:not([style*="100svh"]) {
    min-height: clamp(330px,37svh,405px)!important;
    height: auto!important;
    padding-top: var(--header-h)!important;
    align-items: flex-end!important;
    background: linear-gradient(90deg,rgba(216,184,117,.018),transparent 26%,rgba(107,124,255,.04) 76%,transparent), radial-gradient(circle at 78% 45%,rgba(46,62,106,.13),transparent 35%), #050607!important;
    border-bottom: 1px solid rgba(255,255,255,.065);
}

body:not(.page-home) .page-hero:not([style*="100svh"])::before {
    opacity: .65;
    background-size: 84px 84px!important;
    mask-image: linear-gradient(to bottom,transparent 8%,#000 65%,transparent 100%)!important;
}

body:not(.page-home) .page-hero:not([style*="100svh"])::after {
    content: "";
    position: absolute;
    left: max(28px,calc((100vw - 1500px)/2));
    bottom: 0;
    width: min(360px,24vw);
    height: 1px;
    background: linear-gradient(90deg,var(--v17-gold),var(--v17-blue),transparent);
    opacity: .55
}

body:not(.page-home) .page-hero .container {
    padding-bottom: 42px!important
}

body:not(.page-home) .page-hero .breadcrumb {
    margin-bottom: 19px!important;
    font-size: 10.5px!important;
    color: #868d97
}

body:not(.page-home) .page-hero .eyebrow {
    margin-bottom: 13px!important
}

body:not(.page-home) .page-hero .display {
    font-size: clamp(40px,4.15vw,66px)!important;
    line-height: 1.04!important;
    letter-spacing: -.045em!important;
    max-width: 14ch!important
}

body:not(.page-home) .page-hero .lead {
    max-width: 630px!important;
    margin-top: 13px!important;
    font-size: 14px!important;
    line-height: 1.75!important;
    color: #9ea5af!important
}

body:not(.page-home) .page-hero-watermark {
    right: 1.4vw!important;
    bottom: -.08em!important;
    font-size: clamp(88px,12vw,210px)!important;
    line-height: .82!important;
    color: rgba(255,255,255,.022)!important;
    opacity: 1!important;
    mix-blend-mode: normal!important;
    filter: none!important;
    transform: none!important
}

/* About page: compact first screen and correctly proportioned media. */
body[data-page="about"] .page-hero {
    min-height: 390px!important;
    background: radial-gradient(circle at 75% 42%,rgba(69,86,145,.10),transparent 32%),#050607!important
}

body[data-page="about"] #brand-story {
    padding-top: 72px!important;
    padding-bottom: 82px!important
}

body[data-page="about"] .about-statement {
    grid-template-columns: 190px minmax(0,1fr)!important;
    gap: clamp(30px,4vw,64px)!important
}

body[data-page="about"] .about-statement blockquote {
    font-size: clamp(36px,3.8vw,56px)!important;
    line-height: 1.12!important;
    letter-spacing: -.04em!important;
    white-space: normal!important;
    max-width: 16em!important;
    text-wrap: balance!important
}

body[data-page="about"] .about-copy {
    max-width: 760px!important
}

body[data-page="about"] .brand-cta {
    padding-block:78px!important}

body[data-page="about"] .brand-cta-grid {
    grid-template-columns: minmax(0,1fr) 210px!important;
    gap: 58px!important
}

body[data-page="about"] .brand-cta-mark {
    min-height: 170px!important
}

body[data-page="about"] .brand-cta-mark img {
    width: 112px!important;
    max-height: 96px!important
}

body[data-page="about"] #principles {
    padding-block:76px!important}

body[data-page="about"] .media-wall {
    padding-top: 58px!important;
    padding-bottom: 86px!important
}

body[data-page="about"] .media-wall-grid {
    grid-template-columns: minmax(0,1.08fr) minmax(320px,.92fr)!important;
    gap: 14px!important;
    align-items: start!important
}

body[data-page="about"] .media-wall-grid>.media-tile {
    aspect-ratio: 16/9!important;
    min-height: 0!important;
    height: auto!important
}

body[data-page="about"] .media-stack {
    display: grid!important;
    grid-template-rows: auto auto!important;
    gap: 14px!important
}

body[data-page="about"] .media-stack .media-tile {
    aspect-ratio: 16/9!important;
    min-height: 0!important;
    height: auto!important
}

body[data-page="about"] .media-tile {
    border-radius: 12px!important;
    background: radial-gradient(circle at 68% 35%,rgba(107,124,255,.06),transparent 40%),#07090c!important
}

body[data-page="about"] .media-tile img {
    width: 100%!important;
    height: 100%!important;
    object-fit: contain!important;
    object-position: center!important;
    padding: 0!important;
    transform: none!important
}

body[data-page="about"] .media-tile:hover img {
    transform: scale(1.008)!important
}

body[data-page="about"] .media-caption {
    left: 14px!important;
    bottom: 14px!important;
    border: 1px solid rgba(216,184,117,.22);
    border-radius: 999px;
    padding: 7px 11px!important;
    background: rgba(3,4,6,.72)!important;
    color: #dcd7cb!important
}

/* Home bento: give images more breathing room and make content readable at a glance. */
.v13-bento-grid {
    gap: 12px!important
}

.v13-bento-card {
    border-color: rgba(216,184,117,.13)!important;
    box-shadow: inset 0 1px rgba(255,255,255,.02)
}

.v13-bento-card::before {
    background: radial-gradient(360px circle at var(--mx,78%) var(--my,22%),rgba(107,124,255,.14),transparent 55%)!important;
    opacity: .6!important
}

.v13-bento-card::after {
    background: linear-gradient(90deg,rgba(2,3,5,.91) 0%,rgba(2,3,5,.68) 40%,rgba(2,3,5,.13) 75%,transparent 100%)!important
}

.v13-bento-copy {
    width: min(46%,345px)!important
}

.v13-bento-copy h3 {
    font-size: clamp(20px,1.55vw,25px)!important;
    line-height: 1.23!important;
    max-width: 12em!important
}

.v13-bento-copy p {
    font-size: 11.5px!important;
    line-height: 1.58!important;
    max-width: 29ch!important
}

.v13-bento-card img {
    right: 0!important;
    bottom: 0!important;
    width: 60%!important;
    height: 88%!important;
    object-fit: contain!important;
    object-position: center bottom!important
}

.v13-bento-display img {
    right: -2%!important;
    width: 78%!important;
    height: 77%!important
}

.v13-bento-flow img {
    right: -3%!important;
    width: 70%!important;
    height: 96%!important
}

.v13-bento-motor img {
    right: 0!important;
    width: 68%!important;
    height: 94%!important
}

.v13-bento-material img {
    right: 0!important;
    width: 70%!important;
    height: 94%!important
}

/* Content cards gain a visible resting state and gentle hover feedback. */
.v8-support-hub>a,.value-card,.contact-channel,.v8-account-card,.v8-portal-card,.v8-query-card,.v8-query-result,.v8-download-list article,.news-card,.v8-cart-summary {
    position: relative;
    overflow: hidden;
    border-color: rgba(216,184,117,.12)!important;
    background: linear-gradient(145deg,rgba(12,14,18,.96),rgba(5,6,8,.98))!important;
}

.v8-support-hub>a::before,.value-card::before,.contact-channel::before,.v8-account-card::before,.v8-portal-card::before,.v8-query-card::before,.v8-query-result::before,.v8-download-list article::before,.news-card::before,.v8-cart-summary::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(300px circle at var(--mx,70%) var(--my,25%),rgba(107,124,255,.09),transparent 60%);
    opacity: .35;
    transition: opacity .3s
}

.v8-support-hub>a:hover,.value-card:hover,.contact-channel:hover,.v8-download-list article:hover,.news-card:hover {
    border-color: rgba(242,222,176,.32)!important;
    transform: translateY(-2px);
    box-shadow: 0 18px 52px rgba(0,0,0,.24)
}

.v8-support-hub>a:hover::before,.value-card:hover::before,.contact-channel:hover::before,.v8-download-list article:hover::before,.news-card:hover::before {
    opacity: 1
}

/* Section separators make long dark pages intentional instead of empty. */
body:not(.page-home) main>.section {
    position: relative
}

body:not(.page-home) main>.section::before {
    content: "";
    position: absolute;
    left: max(24px,calc((100vw - 1500px)/2));
    right: max(24px,calc((100vw - 1500px)/2));
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,rgba(216,184,117,.12),rgba(107,124,255,.07),transparent 75%)
}

body:not(.page-home) main>.section>.container {
    position: relative
}

body:not(.page-home) main>.section>.container::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-top: 1px solid rgba(216,184,117,.16);
    border-right: 1px solid rgba(107,124,255,.10);
    pointer-events: none
}

/* Product detail typography and media proportions. */
.v9-product-page .product-detail-hero {
    min-height: clamp(590px,78svh,800px)!important
}

.v9-product-page .product-detail-hero h1,.v9-product-page .product-detail-hero .product-name {
    font-size: clamp(44px,5.1vw,78px)!important;
    line-height: 1!important
}

.v9-product-page .title-sm {
    font-size: clamp(28px,2.7vw,42px)!important;
    line-height: 1.17!important;
    max-width: 16em
}

.v9-product-page .copy p,.v9-product-page .lead {
    font-size: 13.5px!important;
    line-height: 1.8!important
}

.v9-product-page .feature-shot img {
    display: block;
    width: 100%;
    height: auto!important;
    object-fit: contain!important
}

.v9-product-page .media-tile img {
    object-fit: contain!important;
    object-position: center!important
}

.v9-product-page .spec-table td,.v9-product-page .spec-table th {
    font-size: 12px!important;
    line-height: 1.55!important
}

/* Footer: clearly a signature, never a hero. */
.v8-footer {
    border-top: 1px solid rgba(216,184,117,.12)!important;
    background: linear-gradient(180deg,#040506,#020304)!important
}

.v8-footer .footer-main {
    padding-top: 58px!important;
    padding-bottom: 46px!important;
    grid-template-columns: minmax(230px,.8fr) repeat(3,minmax(140px,.55fr))!important;
    gap: clamp(34px,5vw,82px)!important
}

.v8-footer .footer-brand {
    max-width: 300px!important
}

.v8-footer .footer-brand img {
    width: 150px!important;
    max-width: 58%!important;
    max-height: 41px!important;
    height: auto!important;
    object-fit: contain!important;
    object-position: left center!important
}

.v8-footer .footer-brand p {
    max-width: 300px!important;
    margin-top: 16px!important;
    font-size: 11.5px!important;
    line-height: 1.7!important
}

.v8-footer .footer-contact {
    margin-top: 16px!important;
    gap: 18px!important
}

.v8-footer .footer-contact a {
    font-size: 10.5px!important
}

.v8-footer .footer-column h4 {
    font-size: 11px!important;
    letter-spacing: .03em;
    margin-bottom: 17px!important
}

.v8-footer .footer-column a {
    font-size: 11px!important;
    margin-bottom: 9px!important;
    color: #868d97!important
}

.v8-footer .footer-column a:hover {
    color: var(--v17-gold-hi)!important;
    transform: translateX(2px)
}

.v8-footer .footer-address {
    font-size: 9.8px!important;
    padding-block:17px!important}

.v8-footer .footer-bottom {
    font-size: 9px!important;
    padding-block:17px!important}

/* Reveal animation becomes slightly more tactile. */
.reveal {
    transition: opacity .7s var(--v17-ease),transform .8s var(--v17-ease),filter .8s var(--v17-ease)!important;
    filter: blur(3px)
}

.reveal.is-visible {
    filter: blur(0)
}

/* Pointer spotlight helper */
.v17-pointer-card {
    --mx: 70%;
    --my: 30%
}

.v17-scanline {
    position: relative;
    isolation: isolate
}

.v17-scanline::after {
    content: "";
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg,transparent,var(--v17-gold),var(--v17-blue),transparent);
    opacity: 0;
    transform: translateY(0);
    pointer-events: none
}

.v17-scanline:hover::after {
    opacity: .55;
    animation: v17Scan 1.35s var(--v17-ease)
}

@keyframes v17Scan {
    0% {
        transform: translateY(0);
        opacity: 0
    }

    20% {
        opacity: .55
    }

    100% {
        transform: translateY(160px);
        opacity: 0
    }
}

/* Responsive audit */
@media(max-width: 1200px) {
    body:not(.page-home) .page-hero:not([style*="100svh"]) {
        min-height:360px!important
    }

    .v13-bento-copy {
        width: min(52%,320px)!important
    }

    .v13-bento-card img {
        width: 64%!important
    }

    .v8-footer .footer-main {
        grid-template-columns: 1fr repeat(3,.7fr)!important;
        gap: 38px!important
    }
}

@media(max-width: 900px) {
    body:not(.page-home) .page-hero:not([style*="100svh"]) {
        min-height:340px!important
    }

    body:not(.page-home) .page-hero .container {
        padding-bottom: 34px!important
    }

    body:not(.page-home) .page-hero-watermark {
        font-size: clamp(78px,19vw,150px)!important
    }

    body[data-page="about"] .about-statement {
        grid-template-columns: 1fr!important;
        gap: 22px!important
    }

    body[data-page="about"] .brand-cta-grid {
        grid-template-columns: 1fr!important;
        gap: 28px!important
    }

    body[data-page="about"] .media-wall-grid {
        grid-template-columns: 1fr!important
    }

    .media-stack {
        grid-template-columns: 1fr 1fr!important;
        grid-template-rows: none!important
    }

    .v8-footer .footer-main {
        grid-template-columns: 1fr 1fr!important
    }

    .v8-footer .footer-brand {
        grid-column: 1/-1!important
    }
}

@media(max-width: 620px) {
    body:not(.page-home) .page-hero:not([style*="100svh"]) {
        min-height:320px!important
    }

    body:not(.page-home) .page-hero .display {
        font-size: clamp(36px,11vw,50px)!important
    }

    body:not(.page-home) .page-hero .lead {
        font-size: 12.8px!important;
        max-width: 32em!important
    }

    body[data-page="about"] .about-statement blockquote {
        font-size: 33px!important;
        line-height: 1.16!important
    }

    body[data-page="about"] .media-stack {
        grid-template-columns: 1fr!important
    }

    .v13-bento-copy {
        width: 70%!important
    }

    .v13-bento-copy h3 {
        font-size: 20px!important
    }

    .v13-bento-copy p {
        display: none!important
    }

    .v13-bento-display .v13-bento-copy p {
        display: block!important
    }

    .v8-footer .footer-main {
        grid-template-columns: 1fr!important;
        gap: 28px!important;
        padding-top: 44px!important
    }

    .v8-footer .footer-brand {
        grid-column: auto!important
    }

    .v8-footer .footer-brand img {
        width: 138px!important;
        max-height: 38px!important
    }
}

@media(prefers-reduced-motion:reduce) {
    .v17-scanline:hover::after {
        animation: none
    }

    .reveal {
        filter: none!important
    }
}

.v17-page-progress {
    position: fixed;
    z-index: 4200;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg,var(--v17-gold) 0,var(--v17-blue) var(--v17-progress,0%),transparent var(--v17-progress,0%));
    opacity: .62;
    filter: drop-shadow(0 0 5px rgba(107,124,255,.18))
}

/* === v18.css === */
/* WEKYPSYR V18 — refinement, footer/social, shop and micro-interactions */
:root {
    --v18-gold: #d8b875;
    --v18-gold2: #f2deb0;
    --v18-blue: #6b7cff;
    --v18-panel: #090b0e;
    --v18-line: rgba(216,184,117,.18)
}

html[data-wekypsyr-version="V18"] {
    scroll-behavior: smooth
}

body::after {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 72% 28%,rgba(107,124,255,.035),transparent 25%),radial-gradient(circle at 18% 76%,rgba(216,184,117,.035),transparent 22%)
}

/* restrained luxury / technology motifs */
.section,.page-hero {
    position: relative
}

.section::after {
    content: "";
    position: absolute;
    right: 2.4vw;
    top: 30px;
    width: 46px;
    height: 46px;
    border-top: 1px solid rgba(216,184,117,.12);
    border-right: 1px solid rgba(107,124,255,.10);
    pointer-events: none;
    opacity: .7
}

.btn,.v11-slide-copy a,.v8-catalog-info a {
    position: relative;
    overflow: hidden
}

.btn::after,.v11-slide-copy a::after,.v8-catalog-info a::after {
    content: "";
    position: absolute;
    inset: -100% auto -100% -45%;
    width: 28%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
    transition: left .7s cubic-bezier(.22,1,.36,1)
}

.btn:hover::after,.v11-slide-copy a:hover::after,.v8-catalog-info a:hover::after {
    left: 125%
}

/* footer rebuilt closer to current public site but in V15 visual language */
.v18-footer {
    border-top: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg,#050607,#020303 70%);
    position: relative;
    overflow: visible
}

.v18-footer::before {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,transparent,var(--v18-gold),var(--v18-blue),transparent);
    opacity: .42
}

.v18-footer-grid {
    display: grid;
    grid-template-columns: 1.05fr .8fr 1.35fr .8fr .9fr;
    gap: clamp(30px,4vw,72px);
    padding: 58px 0 48px;
    align-items: start
}

.v18-footer h4 {
    margin: 0 0 20px;
    color: #fff;
    font-size: 14px;
    letter-spacing: .02em
}

.v18-footer p,.v18-footer a {
    color: #8f959d;
    font-size: 13px;
    line-height: 1.85
}

.v18-footer a {
    display: block;
    margin: 8px 0;
    transition: color .25s,transform .25s
}

.v18-footer a:hover {
    color: var(--v18-gold2);
    transform: translateX(2px)
}

.v18-footer-brand img {
    width: 128px!important;
    max-height: 36px!important;
    object-fit: contain;
    object-position: left center;
    display: block;
    margin: 0 0 18px!important
}

.v18-footer-brand p {
    max-width: 210px;
    margin: 0!important
}

.v18-footer-contact a:first-of-type {
    font-size: 17px;
    color: #f2f2f0;
    letter-spacing: .03em
}

.v18-footer-contact a:last-of-type {
    color: #e0e2e5;
    text-decoration: underline;
    text-underline-offset: 5px
}

.v18-footer-address p {
    max-width: 290px;
    margin: 0 0 28px
}

.social-heading {
    margin-top: 26px!important
}

.v18-socials {
    display: flex;
    gap: 10px;
    position: relative
}

.v18-social {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    background: rgba(255,255,255,.02);
    color: #f4f3ef;
    display: grid;
    place-items: center;
    cursor: pointer;
    position: relative;
    transition: border-color .25s,background .25s,color .25s,transform .25s;
    appearance: none
}

.v18-social:hover,.v18-social:focus-visible {
    border-color: rgba(216,184,117,.65);
    background: rgba(216,184,117,.08);
    color: var(--v18-gold2);
    transform: translateY(-3px);
    outline: none
}

.v18-social .social-icon {
    font-weight: 800;
    font-size: 19px;
    line-height: 1
}

.v18-social .social-name {
    position: absolute;
    left: 50%;
    top: 52px;
    transform: translateX(-50%);
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    color: #9aa0a8;
    transition: opacity .2s
}

.v18-social:hover .social-name {
    opacity: 1
}

.v18-social-popover {
    position: absolute;
    z-index: 20;
    margin-top: 12px;
    width: 220px;
    padding: 16px;
    border: 1px solid rgba(216,184,117,.28);
    background: rgba(7,8,10,.97);
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
    backdrop-filter: blur(18px);
    border-radius: 12px
}

.v18-social-popover strong {
    display: block;
    color: #fff;
    font-size: 13px
}

.v18-social-popover small {
    display: block;
    color: #8d939b;
    margin-top: 5px;
    line-height: 1.5
}

.v18-social-popover img {
    display: block;
    width: 150px;
    height: 150px;
    object-fit: contain;
    margin: 12px auto 4px;
    border-radius: 8px;
    background: #fff;
    padding: 5px
}

.v18-social-popover a {
    color: var(--v18-gold2)!important;
    margin-top: 10px!important
}

.v18-footer .footer-bottom {
    padding: 19px 0!important;
    border-top: 1px solid rgba(255,255,255,.07);
    font-size: 10px!important
}

/* Shop cart */
.page-cart .page-hero .lead {
    max-width: 38em
}

.v8-cart-layout {
    grid-template-columns: minmax(0,1.6fr) minmax(280px,.55fr)!important;
    gap: 38px!important
}

.v18-cart-item {
    display: grid;
    grid-template-columns: 118px minmax(0,1fr) auto 110px auto;
    gap: 24px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255,255,255,.09)
}

.v18-cart-item img {
    width: 118px;
    height: 100px;
    object-fit: contain;
    background: linear-gradient(145deg,#11151b,#060709);
    border: 1px solid rgba(255,255,255,.07)
}

.v18-cart-main span {
    font-size: 9px;
    letter-spacing: .18em;
    color: var(--v18-gold)
}

.v18-cart-main h3 {
    font-size: 20px;
    margin: 5px 0 3px
}

.v18-cart-main strong {
    color: #d9dde2;
    font-size: 13px
}

.v18-qty {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,.12);
    height: 38px
}

.v18-qty button {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer
}

.v18-qty b {
    min-width: 30px;
    text-align: center;
    font-size: 12px
}

.v18-line-total {
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    text-align: right
}

.v18-remove {
    border: 0;
    background: transparent;
    color: #777e87;
    cursor: pointer
}

.v18-remove:hover {
    color: #fff
}

.v18-checkout-btn {
    display: flex!important;
    justify-content: center!important;
    margin-top: 10px!important;
    background: linear-gradient(135deg,var(--v18-gold2),#b78943)!important;
    color: #090909!important;
    border: 0!important;
    padding: 14px 18px!important;
    font-weight: 800!important;
    text-align: center!important
}

/* checkout */
.v18-checkout {
    padding: 64px 0 90px
}

.v18-checkout-grid {
    display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(320px,.65fr);
    gap: 46px;
    align-items: start
}

.v18-checkout-card {
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(145deg,rgba(14,17,22,.82),rgba(5,6,8,.92));
    padding: 30px
}

.v18-checkout-card h2 {
    font-size: 24px;
    margin: 0 0 24px
}

.v18-checkout-card label {
    display: grid;
    gap: 8px;
    color: #a9afb6;
    font-size: 11px;
    margin-bottom: 16px
}

.v18-checkout-card input,.v18-checkout-card textarea,.v18-checkout-card select {
    width: 100%;
    background: #050608;
    border: 1px solid rgba(255,255,255,.13);
    color: #fff;
    padding: 13px 14px;
    outline: none
}

.v18-checkout-card input:focus,.v18-checkout-card textarea:focus,.v18-checkout-card select:focus {
    border-color: rgba(216,184,117,.62);
    box-shadow: 0 0 0 3px rgba(216,184,117,.06)
}

.v18-form-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.v18-payment-options {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin: 12px 0 20px
}

.v18-pay-option {
    border: 1px solid rgba(255,255,255,.12);
    padding: 14px;
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center
}

.v18-pay-option:has(input:checked) {
    border-color: var(--v18-gold);
    background: rgba(216,184,117,.06)
}

.v18-order-items {
    display: grid;
    gap: 14px
}

.v18-order-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    align-items: center
}

.v18-order-row img {
    width: 64px;
    height: 56px;
    object-fit: contain;
    background: #090b0e
}

.v18-order-row strong {
    font-size: 12px
}

.v18-order-row small {
    color: #8a9098;
    display: block;
    margin-top: 4px
}

.v18-order-total {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: 22px;
    padding-top: 20px
}

.v18-order-total strong {
    font-size: 26px;
    color: var(--v18-gold2)
}

.v18-demo-note {
    font-size: 11px!important;
    color: #888f97!important;
    line-height: 1.6
}

.v18-order-success {
    padding: 18px;
    border: 1px solid rgba(122,204,154,.25);
    background: rgba(75,145,96,.07);
    color: #c8e8d2;
    margin-top: 18px
}

/* product shop price & buy */
.v18-price {
    font-size: 17px!important;
    color: var(--v18-gold2)!important;
    font-weight: 800!important;
    margin-right: 16px
}

.v18-buy-now {
    border: 1px solid rgba(216,184,117,.55)!important;
    color: var(--v18-gold2)!important;
    padding: 8px 12px!important;
    cursor: pointer!important;
    background: rgba(216,184,117,.05)!important
}

.v18-buy-now:hover {
    background: rgba(216,184,117,.13)!important
}

.v8-catalog-info>div,.v11-slide-copy>div {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap
}

/* slightly upgraded interaction while preserving the chosen layout */
.mega-product-card,.mega-link-grid>a,.v13-bento-card,.v8-catalog-card {
    transition: transform .38s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s!important
}

.mega-product-card:hover,.mega-link-grid>a:hover,.v13-bento-card:hover,.v8-catalog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 55px rgba(0,0,0,.22),0 0 0 1px rgba(216,184,117,.08) inset
}

.header-logo-stack {
    transition: filter .3s
}

.header-logo:hover .header-logo-stack {
    filter: drop-shadow(0 0 14px rgba(216,184,117,.28))
}

.v18-ambient-node {
    position: fixed;
    z-index: -1;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--v18-gold);
    box-shadow: 0 0 20px var(--v18-gold);
    opacity: .18;
    pointer-events: none
}

/* Admin-friendly preview badges never show publicly unless data-v18-debug */
@media(max-width: 1100px) {
    .v18-footer-grid {
        grid-template-columns:1fr 1fr 1.4fr
    }

    .v18-footer-column {
        grid-column: auto
    }

    .v18-checkout-grid {
        grid-template-columns: 1fr
    }

    .v18-cart-item {
        grid-template-columns: 90px 1fr auto
    }

    .v18-cart-item img {
        width: 90px;
        height: 78px
    }

    .v18-qty,.v18-line-total,.v18-remove {
        grid-column: auto
    }
}

@media(max-width: 700px) {
    .v18-footer-grid {
        grid-template-columns:1fr 1fr;
        gap: 30px;
        padding-top: 46px
    }

    .v18-footer-brand,.v18-footer-address {
        grid-column: 1/-1
    }

    .v18-footer-brand img {
        width: 118px!important
    }

    .v18-social-popover {
        position: fixed;
        left: 50%;
        bottom: 28px;
        transform: translateX(-50%)
    }

    .v8-cart-layout {
        grid-template-columns: 1fr!important
    }

    .v18-cart-item {
        grid-template-columns: 76px 1fr auto;
        gap: 12px
    }

    .v18-cart-item img {
        width: 76px;
        height: 68px
    }

    .v18-qty {
        grid-column: 2
    }

    .v18-line-total {
        grid-column: 3;
        grid-row: 2
    }

    .v18-remove {
        grid-column: 3;
        grid-row: 1
    }

    .v18-form-two,.v18-payment-options {
        grid-template-columns: 1fr
    }

    .v18-checkout-card {
        padding: 22px
    }
}

.v18-social .social-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round
}

/* === v19.css === */
/* WEKYPSYR V19 — final refinement: configurable content, cleaner commerce, subtle luxe-tech motion */
:root {
    --v19-gold: #d8b875;
    --v19-gold2: #f2deb0;
    --v19-blue: #6b7cff;
    --v19-line: rgba(255,255,255,.085)
}

/* subtle site-wide detail without changing the established V15 layout */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(90deg,transparent 0 49.95%,rgba(216,184,117,.022) 50%,transparent 50.05%),radial-gradient(circle at 82% 28%,rgba(107,124,255,.035),transparent 24%);
    opacity: .75
}

main,.site-header,.v18-footer {
    position: relative;
    z-index: 1
}

.section .eyebrow,.page-hero .eyebrow,.v13-focus-copy .eyebrow {
    letter-spacing: .17em!important
}

/* homepage configurable cards */
.v19-featured-desc {
    max-width: 520px;
    margin: 8px 0 0;
    color: #7d858e;
    font-size: 12px;
    line-height: 1.65
}

.v13-bento-card[hidden],.v13-focus-row[hidden] {
    display: none!important
}

.v13-bento-card {
    transition: transform .38s cubic-bezier(.2,.78,.18,1),border-color .3s,box-shadow .35s
}

.v13-bento-card:hover {
    transform: translateY(-4px);
    border-color: rgba(216,184,117,.26)!important;
    box-shadow: 0 22px 70px rgba(0,0,0,.22)
}

.v13-bento-card img {
    object-fit: contain!important
}

.v13-focus-row {
    min-height: 560px!important
}

.v13-focus-media img {
    max-width: 78%!important;
    max-height: 440px!important;
    object-fit: contain!important
}

.v13-focus-copy h2 {
    font-size: clamp(34px,3.7vw,58px)!important;
    line-height: 1.08!important;
    max-width: 10ch!important
}

.v13-focus-copy p {
    max-width: 560px!important
}

/* Product detail purchase controls: stop crowding price, colors and buttons */
.product-detail-copy .variant-row,.product-detail-copy .color-switch {
    margin-top: 24px!important;
    margin-bottom: 0!important;
    gap: 12px!important
}

.v18-detail-shop {
    margin-top: 30px!important;
    display: grid!important;
    grid-template-columns: auto minmax(128px,auto) minmax(116px,auto)!important;
    align-items: center!important;
    justify-content: start!important;
    gap: 12px 14px!important;
    padding-top: 24px!important;
    border-top: 1px solid rgba(255,255,255,.08)!important
}

.v18-detail-shop .v18-price {
    grid-column: 1!important;
    margin: 0 10px 0 0!important;
    font-size: 22px!important;
    line-height: 1!important;
    color: var(--v19-gold2)!important
}

.v18-detail-shop .btn.primary {
    grid-column: 2!important;
    min-width: 138px!important;
    justify-content: center!important;
    margin: 0!important
}

.v18-detail-shop .btn.ghost,.v18-detail-shop a[href="cart.html"] {
    display: none!important
}

.v18-detail-shop .v18-buy-now {
    grid-column: 3!important;
    height: 48px!important;
    min-width: 118px!important;
    padding: 0 18px!important;
    border-radius: 0!important;
    font-size: 13px!important;
    font-weight: 750!important
}

.product-detail-copy>p {
    max-width: 590px!important
}

/* footer social: popovers are anchored and visually clear */
.v18-footer-address {
    position: relative
}

.v18-social-popover {
    left: 0;
    top: 100%;
    margin-top: 12px!important;
    transform: none!important;
    transition: opacity .18s,transform .18s
}

.v18-social-popover[hidden] {
    display: none!important
}

.v18-social-popover.is-leaving {
    opacity: 0;
    transform: translateY(-4px)!important
}

.v18-footer-brand img {
    width: 120px!important;
    max-height: 32px!important
}

.v18-footer-brand p {
    max-width: 190px!important
}

/* cart and checkout readability */
.v18-checkout-card label {
    gap: 8px
}

.v18-checkout-card input,.v18-checkout-card textarea {
    min-height: 48px
}

.v18-payment-options {
    gap: 10px!important
}

.v18-pay-option {
    min-height: 82px!important;
    padding: 18px!important
}

.v18-order-row img {
    object-fit: contain!important
}

/* keep page heroes compact across all secondary pages */
body:not(.page-home) .page-hero:not([style*="100svh"]) {
    min-height: 340px!important;
    max-height: 430px!important
}

.page-hero .container {
    padding-top: 82px!important;
    padding-bottom: 36px!important
}

/* mild interactive edge lines */
.v11-product-slider::after,.v13-experience::after,.v12-news::after {
    content: "";
    position: absolute;
    pointer-events: none;
    width: 72px;
    height: 1px;
    background: linear-gradient(90deg,var(--v19-gold),var(--v19-blue));
    opacity: .42;
    right: 3vw;
    bottom: 22px
}

@media(max-width: 900px) {
    .v13-focus-row {
        min-height:0!important
    }

    .v13-focus-media img {
        max-width: 92%!important
    }

    .v18-detail-shop {
        grid-template-columns: 1fr 1fr!important
    }

    .v18-detail-shop .v18-price {
        grid-column: 1/-1!important
    }

    .v18-detail-shop .btn.primary {
        grid-column: 1!important
    }

    .v18-detail-shop .v18-buy-now {
        grid-column: 2!important
    }
}

@media(max-width: 620px) {
    .v18-detail-shop {
        grid-template-columns:1fr!important
    }

    .v18-detail-shop .v18-price,.v18-detail-shop .btn.primary,.v18-detail-shop .v18-buy-now {
        grid-column: 1!important;
        width: 100%!important
    }

    .v13-focus-copy h2 {
        font-size: clamp(30px,9vw,44px)!important
    }

    .v18-footer-brand img {
        width: 108px!important
    }
}

@media(prefers-reduced-motion:reduce) {
    .v13-bento-card {
        transition: none
    }

    .v13-bento-card:hover {
        transform: none
    }
}

.v19-custom-showcase {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
    padding-bottom: 82px
}

.v19-custom-showcase article {
    min-height: 430px;
    padding: 34px;
    border: 1px solid var(--v19-line);
    background: linear-gradient(145deg,#0e1116,#050607);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end
}

.v19-custom-showcase article::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 76% 28%,rgba(107,124,255,.11),transparent 34%);
    pointer-events: none
}

.v19-custom-showcase article>div {
    position: relative;
    z-index: 2;
    max-width: 72%
}

.v19-custom-showcase span {
    color: var(--v19-gold);
    font-size: 10px;
    letter-spacing: .18em
}

.v19-custom-showcase h3 {
    margin: 12px 0 10px;
    font-size: clamp(26px,2.5vw,40px);
    line-height: 1.05
}

.v19-custom-showcase p {
    color: #9299a2;
    line-height: 1.7
}

.v19-custom-showcase a {
    display: inline-block;
    margin-top: 16px;
    color: var(--v19-gold2)
}

.v19-custom-showcase img {
    position: absolute;
    right: -4%;
    bottom: -2%;
    width: 60%;
    height: 72%;
    object-fit: contain;
    opacity: .72;
    transition: transform .35s
}

.v19-custom-showcase article:hover img {
    transform: translateY(-5px) scale(1.02)
}

@media(max-width: 900px) {
    .v19-custom-showcase {
        grid-template-columns:1fr
    }

    .v19-custom-showcase article {
        min-height: 340px
    }
}

/* V19 final polish — proportions, content density and future-proof product pages */
body:not(.page-home) .page-hero {
    min-height: clamp(300px,36vw,390px)!important;
    max-height: 390px!important
}

body:not(.page-home) .page-hero .container {
    padding-top: 86px!important;
    padding-bottom: 32px!important
}

body:not(.page-home) .page-hero .display {
    font-size: clamp(38px,3.9vw,60px)!important;
    max-width: 12ch!important
}

body:not(.page-home) .page-hero .lead {
    font-size: 13.5px!important;
    max-width: 620px!important
}

body:not(.page-home) .page-hero-watermark {
    font-size: clamp(78px,10.5vw,170px)!important;
    opacity: .72!important
}

.about-statement {
    gap: clamp(36px,5vw,78px)!important;
    align-items: start!important
}

.about-statement blockquote {
    font-size: clamp(34px,3.7vw,56px)!important;
    line-height: 1.08!important;
    max-width: 13ch!important;
    text-wrap: balance!important
}

.about-statement blockquote em {
    display: inline!important
}

.about-copy {
    max-width: 720px!important
}

.about-copy p {
    font-size: 14px!important;
    line-height: 1.85!important
}

.v18-footer-grid {
    grid-template-columns: minmax(150px,.65fr) minmax(170px,.7fr) minmax(250px,1.1fr) minmax(180px,.8fr) minmax(180px,.8fr)!important;
    gap: clamp(28px,3.2vw,62px)!important
}

.v18-footer-brand img {
    width: 108px!important;
    max-height: 29px!important
}

.v18-footer-brand p {
    max-width: 175px!important;
    font-size: 11.5px!important
}

.v18-social-popover {
    z-index: 15!important;
    min-width: 220px!important;
    max-width: 260px!important
}

.product-detail-hero {
    min-height: clamp(680px,78vh,850px)!important
}

.product-detail-grid {
    align-items: center!important
}

.product-detail-copy .display,.product-detail-copy h1 {
    font-size: clamp(52px,5.5vw,84px)!important;
    line-height: .95!important
}

.product-detail-copy .lead,.product-detail-copy>p {
    font-size: 14px!important;
    line-height: 1.85!important;
    max-width: 560px!important
}

.v19-purchase-actions {
    max-width: 560px!important;
    grid-template-columns: auto auto auto!important;
    gap: 12px!important
}

.v19-purchase-actions .v18-price {
    min-width: 96px!important
}

.v19-purchase-actions button {
    white-space: nowrap!important
}

.v19-generic-product {
    padding-top: var(--header-h);
    min-height: 78svh;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at 72% 42%,rgba(107,124,255,.10),transparent 31%),#030405;
    position: relative;
    overflow: hidden
}

.v19-generic-product::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
    background-size: 84px 84px;
    mask-image: linear-gradient(to bottom,transparent,#000 28%,#000 76%,transparent)
}

.v19-generic-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(340px,.78fr) minmax(500px,1.22fr);
    gap: 5vw;
    align-items: center;
    padding-block:70px}

.v19-generic-copy h1 {
    font-size: clamp(58px,7vw,110px);
    line-height: .9;
    margin: 18px 0 12px;
    letter-spacing: -.055em
}

.v19-generic-copy h2 {
    font-size: clamp(24px,2.4vw,38px);
    margin: 0 0 18px
}

.v19-generic-desc {
    color: #9da4ae;
    line-height: 1.85;
    max-width: 560px
}

.v19-generic-price {
    margin-top: 30px;
    color: var(--v19-gold2);
    font-size: 28px;
    font-weight: 800
}

.v19-generic-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px
}

.v19-generic-meta {
    display: flex;
    gap: 36px;
    margin-top: 30px
}

.v19-generic-meta div {
    min-width: 110px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.1)
}

.v19-generic-meta dt {
    color: #666f79;
    font-size: 10px
}

.v19-generic-meta dd {
    margin: 5px 0 0;
    color: #d4d8dd
}

.v19-generic-media {
    position: relative;
    min-height: 570px;
    display: grid;
    place-items: center
}

.v19-generic-media img {
    position: relative;
    z-index: 2;
    max-width: 82%;
    max-height: 540px;
    object-fit: contain;
    filter: drop-shadow(0 35px 70px rgba(0,0,0,.46))
}

.v19-tech-ring {
    position: absolute;
    width: min(36vw,520px);
    aspect-ratio: 1;
    border: 1px solid rgba(216,184,117,.17);
    border-radius: 50%;
    box-shadow: inset 0 0 80px rgba(107,124,255,.035)
}

.v19-generic-note {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 24px
}

.v19-generic-note p {
    color: #7f8791
}

.v19-generic-note a {
    color: var(--v19-gold2)
}

/* keep technology/artwork media in their true aspect ratio */
.v9-artwork-section img,.detail-media-full img,.media-wall img,.about-gallery img {
    object-fit: contain!important;
    height: auto!important;
    max-height: none!important
}

/* make empty-feeling cards readable even before hover */
.mega-link-grid>a,.v8-support-hub>a,.v8-product-card,.v13-bento-card {
    background: linear-gradient(145deg,rgba(16,18,23,.88),rgba(6,7,9,.94))!important;
    border-color: rgba(255,255,255,.095)!important
}

.mega-link-grid>a::after,.v8-support-hub>a::after {
    content: "↗";
    position: absolute;
    right: 18px;
    bottom: 16px;
    color: rgba(216,184,117,.38);
    font-size: 14px;
    transition: transform .25s,color .25s
}

.mega-link-grid>a:hover::after,.v8-support-hub>a:hover::after {
    color: var(--v19-gold2);
    transform: translate(2px,-2px)
}

@media(max-width: 900px) {
    .v19-generic-grid {
        grid-template-columns:1fr
    }

    .v19-generic-media {
        min-height: 420px
    }

    .v19-generic-media img {
        max-height: 400px
    }

    .v18-footer-grid {
        grid-template-columns: 1fr 1fr!important
    }

    .product-detail-hero {
        min-height: auto!important
    }

    .v19-purchase-actions {
        grid-template-columns: 1fr 1fr!important
    }
}

@media(max-width: 620px) {
    body:not(.page-home) .page-hero {
        min-height:285px!important
    }

    .v18-footer-grid {
        grid-template-columns: 1fr!important
    }

    .v18-footer-brand img {
        width: 102px!important
    }

    .v19-generic-grid {
        padding-block:50px}

    .v19-generic-media {
        min-height: 320px
    }

    .v19-generic-copy h1 {
        font-size: 54px
    }

    .v19-generic-actions {
        display: grid
    }

    .v19-generic-meta {
        gap: 18px
    }

    .v19-purchase-actions {
        grid-template-columns: 1fr!important
    }
}

/* === v20.css === */
/* WEKYPSYR V20 — navigation reliability hotfix */
/* Keep mega menus discoverable even when JavaScript is unavailable or a page is opened via file://. */
.v8-header .nav-item[data-mega-item] > .mega-panel {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .24s cubic-bezier(.22,1,.36,1),transform .28s cubic-bezier(.22,1,.36,1),visibility .24s;
}

.v8-header .nav-item[data-mega-item]:hover > .mega-panel, .v8-header .nav-item[data-mega-item]:focus-within > .mega-panel, .v8-header .nav-item[data-mega-item].is-open > .mega-panel {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* When JS marks the item as explicitly suppressed, only that item stays closed. */
.v8-header .nav-item[data-mega-item].v20-suppressed > .mega-panel {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-10px) !important;
}

.v8-header .nav-item[data-mega-item].is-open > .nav-link, .v8-header .nav-item[data-mega-item]:hover > .nav-link, .v8-header .nav-item[data-mega-item]:focus-within > .nav-link {
    color: var(--gold-light,#ead39d)
}

body.v20-mega-open::after {
    content: "";
    position: fixed;
    z-index: 3500;
    inset: var(--header-h,78px) 0 0;
    background: rgba(0,0,0,.28);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
}

.v8-header .mega-panel {
    z-index: 3700!important
}

@media(max-width: 900px) {
    body.v20-mega-open::after {
        display:none
    }
}

/* === v21.css === */
/* WEKYPSYR V21 — final interaction + editable typography layer */
:root {
    --v21-gold: #d8b875;
    --v21-gold2: #f2deb0;
    --v21-blue: #6b7cff;
    --v21-font-cn: system-ui,-apple-system,"Segoe UI","Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif;
    --v21-font-en: "Arial Narrow","Roboto Condensed",Arial,sans-serif;
}

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--v21-font-cn)
}

/* --- NAV: isolated last-layer rules. It must work from CSS hover even if JS is unavailable. --- */
.site-header.v8-header {
    z-index: 10000!important;
    isolation: isolate;
    overflow: visible!important
}

.site-header.v8-header .header-inner {
    position: relative;
    z-index: 10002
}

.site-header.v8-header .nav-group,.site-header.v8-header .nav-item {
    overflow: visible!important
}

.site-header.v8-header .nav-item[data-mega-item] {
    position: static!important
}

.site-header.v8-header .nav-item[data-mega-item]>.mega-panel {
    display: flex!important;
    position: fixed!important;
    z-index: 10001!important;
    top: var(--header-h,88px)!important;
    left: 0!important;
    right: 0!important;
    width: 100vw!important;
    opacity: 0!important;
    visibility: hidden!important;
    pointer-events: none!important;
    transform: translate3d(0,-10px,0)!important;
    transition: opacity .18s ease,transform .22s cubic-bezier(.22,1,.36,1),visibility .18s!important;
}

.site-header.v8-header .nav-item[data-mega-item]:hover>.mega-panel, .site-header.v8-header .nav-item[data-mega-item]:focus-within>.mega-panel, .site-header.v8-header .nav-item[data-mega-item].is-open>.mega-panel, .site-header.v8-header .nav-item[data-mega-item].v21-open>.mega-panel {
    opacity: 1!important;
    visibility: visible!important;
    pointer-events: auto!important;
    transform: translate3d(0,0,0)!important;
}

.site-header.v8-header .language-menu>.submenu-language {
    z-index: 10003!important
}

body.v21-mega-open::before {
    content: "";
    position: fixed;
    z-index: 9998;
    inset: var(--header-h,88px) 0 0;
    background: rgba(0,0,0,.38);
    backdrop-filter: blur(1.5px);
    pointer-events: none
}

.site-header.v8-header.mega-active {
    z-index: 10000!important
}

/* finer light-luxury tech accents without changing the fixed layout */
main::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.017) 1px,transparent 1px);
    background-size: 88px 88px;
    mask-image: radial-gradient(circle at 50% 30%,#000 0,transparent 72%);
    opacity: .55
}

.v13-bento-card,.v13-focus-row,.news-card,.v8-support-hub>a,.v8-catalog-card {
    position: relative;
    overflow: hidden
}

.v13-bento-card::after,.news-card::after,.v8-support-hub>a::after,.v8-catalog-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg,transparent,var(--v21-gold),var(--v21-blue),transparent);
    opacity: .18;
    transition: opacity .3s
}

.v13-bento-card:hover::after,.news-card:hover::after,.v8-support-hub>a:hover::after,.v8-catalog-card:hover::after {
    opacity: .65
}

/* Product purchase block: breathing room and visually clear hierarchy */
.v19-purchase-actions,.v18-detail-shop {
    display: grid!important;
    grid-template-columns: auto minmax(132px,auto) minmax(118px,auto)!important;
    gap: 16px!important;
    align-items: center!important;
    justify-content: start!important;
    padding: 26px 0 0!important;
    margin-top: 30px!important;
    min-height: 110px!important
}

.v19-purchase-actions .v18-price,.v18-detail-shop .v18-price {
    grid-column: 1/-1;
    margin: 0 0 4px!important;
    font-size: 24px!important;
    line-height: 1!important
}

.v19-purchase-actions [data-add-cart],.v19-purchase-actions .v18-buy-now,.v18-detail-shop [data-add-cart],.v18-detail-shop .v18-buy-now {
    min-height: 48px!important;
    padding: 0 22px!important;
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    white-space: nowrap!important
}

/* generic safer typography guardrails */
.page-hero h1 {
    font-size: clamp(44px,5.4vw,82px)!important;
    line-height: .98!important;
    max-width: 11ch!important;
    text-wrap: balance
}

.about-statement blockquote {
    font-size: clamp(38px,4vw,66px)!important;
    line-height: 1.05!important;
    max-width: 16ch!important;
    text-wrap: balance
}

.v13-focus-copy h2 {
    font-size: clamp(34px,4.1vw,66px)!important;
    line-height: 1.03!important;
    max-width: 11ch!important;
    text-wrap: balance
}

.v13-bento-copy h3 {
    font-size: clamp(24px,2.35vw,38px)!important;
    line-height: 1.08!important;
    text-wrap: balance
}

.v18-footer-brand img {
    width: 112px!important;
    max-width: 112px!important;
    height: auto!important
}

/* images: preserve source aspect ratio; do not crop technical artwork */
.about-gallery img,.product-artwork img,.v13-focus-media img,.v13-bento-media img {
    object-fit: contain!important;
    max-width: 100%;
    height: auto
}

.about-gallery figure {
    background: linear-gradient(145deg,#0d0f13,#050607);
    display: grid;
    place-items: center;
    overflow: hidden
}

/* runtime visual-editor selection only when admin explicitly enables it */
html.v21-edit-mode [data-v21-editable],html.v21-edit-mode .v21-edit-candidate {
    cursor: crosshair!important;
    outline: 1px dashed transparent;
    outline-offset: 4px;
    transition: outline-color .16s,box-shadow .16s
}

html.v21-edit-mode [data-v21-editable]:hover,html.v21-edit-mode .v21-edit-candidate:hover {
    outline-color: rgba(242,222,176,.85)!important;
    box-shadow: 0 0 0 6px rgba(216,184,117,.06)!important
}

@media(max-width: 900px) {
    body.v21-mega-open::before {
        display:none
    }

    .site-header.v8-header .nav-group {
        display: none!important
    }

    .page-hero h1 {
        font-size: clamp(38px,11vw,62px)!important
    }

    .about-statement blockquote {
        font-size: clamp(34px,9vw,52px)!important
    }

    .v19-purchase-actions,.v18-detail-shop {
        grid-template-columns: 1fr 1fr!important;
        min-height: 0!important
    }

    .v19-purchase-actions .v18-price,.v18-detail-shop .v18-price {
        grid-column: 1/-1!important
    }
}

/* V21 non-home page rhythm: no dead half-screen hero */
body:not(.page-home) .page-hero:not([style*="100svh"]) {
    min-height: 300px!important;
    max-height: 330px!important;
    align-items: center!important;
    padding-top: var(--header-h,88px)!important
}

body:not(.page-home) .page-hero .container {
    padding-top: 20px!important;
    padding-bottom: 24px!important
}

body:not(.page-home) .page-hero .breadcrumb {
    margin-bottom: 14px!important
}

body:not(.page-home) .page-hero .eyebrow {
    margin-bottom: 10px!important
}

body:not(.page-home) .page-hero .lead {
    margin-top: 10px!important
}

body[data-page="about"] .page-hero {
    min-height: 310px!important;
    max-height: 330px!important
}

@media(max-width: 620px) {
    body:not(.page-home) .page-hero:not([style*="100svh"]) {
        min-height:260px!important;
        max-height: 300px!important
    }

    .v18-footer-brand img {
        width: 96px!important;
        max-width: 96px!important
    }
}

/* V21.1 navigation belt-and-suspenders hotfix: last stylesheet wins over every legacy rule. */
@media (min-width: 901px) {
    .site-header.v8-header .nav-item[data-mega-item] {
        position:static!important;
        display: flex!important;
        align-items: center!important;
        min-height: var(--header-h,88px)!important
    }

    .site-header.v8-header .nav-item[data-mega-item]>.mega-panel, .site-header.v8-header .nav-item[data-mega-item]>.submenu {
        display: block!important;
        position: fixed!important;
        top: var(--header-h,88px)!important;
        left: 0!important;
        right: 0!important;
        width: 100%!important;
        max-width: none!important;
        opacity: 0!important;
        visibility: hidden!important;
        pointer-events: none!important;
        transform: translateY(-8px)!important;
    }

    .site-header.v8-header .nav-item[data-mega-item]:hover>.mega-panel, .site-header.v8-header .nav-item[data-mega-item]:hover>.submenu, .site-header.v8-header .nav-item[data-mega-item]:focus-within>.mega-panel, .site-header.v8-header .nav-item[data-mega-item]:focus-within>.submenu, .site-header.v8-header .nav-item[data-mega-item].is-open>.mega-panel, .site-header.v8-header .nav-item[data-mega-item].is-open>.submenu, .site-header.v8-header .nav-item[data-mega-item].v21-open>.mega-panel, .site-header.v8-header .nav-item[data-mega-item].v21-open>.submenu {
        opacity: 1!important;
        visibility: visible!important;
        pointer-events: auto!important;
        transform: translateY(0)!important;
    }

    .site-header.v8-header .language-menu {
        position: relative!important;
        min-height: auto!important
    }

    .site-header.v8-header .language-menu>.submenu-language {
        display: flex!important;
        position: absolute!important;
        top: calc(100% + 10px)!important;
        left: auto!important;
        right: 0!important;
        width: 250px!important
    }
}

/* === v26.css === */
/* WEKYPSYR V26 — product menu image normalization + dynamic journal */
.mega-product-media {
    height: 220px!important;
    min-height: 220px!important;
    display: grid!important;
    place-items: center!important;
    overflow: hidden!important;
    padding: 18px!important
}

.mega-product-media img {
    width: 100%!important;
    height: 100%!important;
    max-width: 86%!important;
    max-height: 86%!important;
    object-fit: contain!important;
    object-position: center!important;
    transform: none!important;
    margin: auto!important
}

.mega-product-media.liquid img {
    max-width: 82%!important;
    max-height: 82%!important
}

.mega-product-media.air img {
    max-width: 78%!important;
    max-height: 78%!important
}

.mega-product-media.air.white img {
    max-width: 78%!important;
    max-height: 78%!important
}

.v26-news-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 28px
}

.v26-news-card {
    border-top: 1px solid rgba(255,255,255,.11);
    padding-top: 14px
}

.v26-news-card a {
    text-decoration: none;
    color: inherit
}

.v26-news-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background: #0b0d10
}

.v26-news-card .meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #9aa0a8;
    font-size: 11px;
    letter-spacing: .08em;
    margin: 14px 0 9px
}

.v26-news-card h2 {
    font-size: 26px;
    line-height: 1.12;
    margin: 0 0 9px
}

.v26-news-card p {
    color: #a8adb4;
    line-height: 1.7;
    margin: 0
}

.v26-journal-article {
    max-width: 880px;
    margin: 0 auto
}

.v26-journal-article .cover {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    margin: 28px 0 36px;
    background: #0b0d10
}

.v26-journal-article .meta {
    display: flex;
    gap: 14px;
    color: #9aa0a8;
    font-size: 12px;
    letter-spacing: .08em
}

.v26-journal-article h1 {
    font-size: clamp(40px,6vw,72px);
    line-height: 1.02;
    margin: 18px 0
}

.v26-journal-article .summary {
    font-size: 20px;
    line-height: 1.7;
    color: #c4c8ce;
    border-left: 2px solid #d8b875;
    padding-left: 18px;
    margin: 0 0 34px
}

.v26-journal-body p {
    font-size: 17px;
    line-height: 1.95;
    color: #bec3ca;
    margin: 0 0 22px
}

.v26-journal-back {
    display: inline-block;
    margin-bottom: 24px;
    color: #d8b875;
    text-decoration: none
}

@media(max-width: 900px) {
    .mega-product-media {
        height:180px!important;
        min-height: 180px!important
    }

    .v26-news-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width: 620px) {
    .v26-news-grid {
        grid-template-columns:1fr
    }

    .mega-product-media {
        height: 150px!important;
        min-height: 150px!important
    }
}

/* === v27.css === */
/* WEKYPSYR V27 — final visual QA layer: readable typography, stable hero rhythm, no clipping */
:root {
    --v27-copy: #b8bec7;
    --v27-muted: #9098a4;
    --v27-line: rgba(255,255,255,.10);
    --v27-gold: #d8b875
}

body {
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}

/* Header readability */
.site-header.v8-header .nav-link {
    font-size: 14px!important;
    line-height: 1.2!important;
    letter-spacing: .02em!important
}

.site-header.v8-header .mega-intro>span,.site-header.v8-header .mega-product-copy>span {
    font-size: 10.5px!important
}

.site-header.v8-header .mega-intro p,.site-header.v8-header .mega-product-copy p,.site-header.v8-header .mega-link-grid small {
    font-size: 12.5px!important;
    line-height: 1.6!important
}

.site-header.v8-header .mega-link-grid strong {
    font-size: 14px!important;
    color: #f2f0ea;
}

/* Non-home hero: V21's 300/330px cap clipped software buttons and made pages visually cramped. */
body:not(.page-home) .page-hero:not([style*="100svh"]) {
    min-height: clamp(390px,41vw,470px)!important;
    max-height: none!important;
    height: auto!important;
    align-items: center!important;
    padding-top: var(--header-h,88px)!important;
    overflow: hidden!important
}

body:not(.page-home) .page-hero .container {
    position: relative!important;
    z-index: 3!important;
    padding-top: 46px!important;
    padding-bottom: 50px!important
}

body:not(.page-home) .page-hero .breadcrumb {
    font-size: 12px!important;
    line-height: 1.4!important;
    margin-bottom: 18px!important
}

body:not(.page-home) .page-hero .eyebrow {
    font-size: 10.5px!important;
    line-height: 1.3!important;
    margin-bottom: 14px!important
}

body:not(.page-home) .page-hero .display,body:not(.page-home) .page-hero h1 {
    font-size: clamp(48px,4.8vw,76px)!important;
    line-height: 1.01!important;
    letter-spacing: -.045em!important;
    max-width: 15ch!important;
    text-wrap: balance!important
}

body:not(.page-home) .page-hero .lead {
    max-width: 680px!important;
    margin-top: 16px!important;
    font-size: 16px!important;
    line-height: 1.75!important;
    color: var(--v27-copy)!important
}

body:not(.page-home) .page-hero .hero-actions {
    position: relative!important;
    z-index: 4!important;
    margin-top: 28px!important;
    gap: 14px!important;
    padding-bottom: 2px!important
}

body:not(.page-home) .page-hero .btn {
    min-height: 46px!important;
    padding: 0 22px!important;
    font-size: 13.5px!important
}

body:not(.page-home) .page-hero-watermark {
    z-index: 1!important;
    right: 1.5vw!important;
    bottom: .02em!important;
    font-size: clamp(92px,12.5vw,220px)!important;
    line-height: .78!important;
    color: rgba(255,255,255,.022)!important;
    opacity: 1!important;
    pointer-events: none!important
}

/* Software page: keep brand name on one deliberate line on desktop and create a balanced first screen. */
.page-software .software-hero {
    min-height: 440px!important
}

.page-software .software-hero .container {
    max-width: 1500px!important
}

.page-software .software-hero .display {
    max-width: none!important;
    white-space: nowrap!important;
    font-size: clamp(54px,5.1vw,82px)!important
}

.page-software .software-hero .lead {
    max-width: 650px!important
}

.page-software .software-hero .page-hero-watermark {
    right: 2.2vw!important;
    font-size: clamp(110px,13vw,230px)!important
}

/* General page typography: metadata stays compact, user-facing copy does not become 9-11px. */
.section p,.v8-software-grid p,.v8-support-hub p,.v8-policy p,.about-copy p,.contact-channel p {
    font-size: 15px;
    line-height: 1.78
}

.v8-section-heading .eyebrow,.section-head .eyebrow {
    font-size: 10.5px!important
}

.v8-section-heading h2,.section-head h2 {
    line-height: 1.08!important;
    text-wrap: balance
}

.v8-software-grid span {
    font-size: 10.5px!important;
    letter-spacing: .16em!important
}

.v8-software-grid h2 {
    font-size: clamp(30px,2.4vw,40px)!important;
    line-height: 1.12!important
}

.v8-software-grid p {
    color: #aab0b9!important
}

.v8-download-list article {
    padding: 28px 30px!important;
    min-height: 112px!important
}

.v8-download-list span {
    font-size: 10.5px!important
}

.v8-download-list h3 {
    font-size: 22px!important
}

.v8-download-list p {
    font-size: 13.5px!important;
    line-height: 1.6!important;
    color: #9ea5ae!important
}

.v8-download-list a {
    font-size: 13px!important;
    min-height: 42px;
    display: inline-flex;
    align-items: center
}

.v26-news-card .meta {
    font-size: 12px!important
}

.v26-news-card p {
    font-size: 15px!important
}

.v26-news-card h2 {
    line-height: 1.18!important
}

/* Make tiny but meaningful labels readable without turning the site bulky. */
.breadcrumb,.eyebrow {
    font-size: 10.5px!important
}

.text-link,.news-link {
    font-size: 13px
}

/* Avoid section borders/corners touching content. */
.section {
    scroll-margin-top: calc(var(--header-h,88px) + 18px)
}

/* Mobile/tablet */
@media(max-width: 900px) {
    body:not(.page-home) .page-hero:not([style*="100svh"]) {
        min-height:390px!important;
        max-height: none!important
    }

    body:not(.page-home) .page-hero .container {
        padding-top: 36px!important;
        padding-bottom: 42px!important
    }

    .page-software .software-hero .display {
        white-space: normal!important;
        max-width: 12ch!important
    }

    .page-software .software-hero .page-hero-watermark {
        font-size: 24vw!important;
        right: -1vw!important;
        bottom: .12em!important
    }
}

@media(max-width: 620px) {
    body {
        font-size:15px
    }

    body:not(.page-home) .page-hero:not([style*="100svh"]) {
        min-height: 390px!important
    }

    body:not(.page-home) .page-hero .container {
        padding-top: 28px!important;
        padding-bottom: 36px!important
    }

    body:not(.page-home) .page-hero .display,body:not(.page-home) .page-hero h1 {
        font-size: clamp(40px,11vw,56px)!important;
        max-width: 12ch!important
    }

    body:not(.page-home) .page-hero .lead {
        font-size: 15px!important;
        line-height: 1.7!important
    }

    body:not(.page-home) .page-hero-watermark {
        font-size: 26vw!important;
        opacity: .65!important
    }

    .v8-download-list article {
        padding: 23px 22px!important
    }

    .v8-download-list p {
        font-size: 13px!important
    }
}

/* Home and footer readability pass */
.v13-bento-copy>span,.v13-focus-copy .eyebrow,.v8-product-copy>span {
    font-size: 10.5px!important;
    letter-spacing: .16em!important
}

.v13-bento-copy p {
    font-size: 13.5px!important;
    line-height: 1.65!important;
    color: #a7adb6!important
}

.v13-focus-copy p {
    font-size: 15px!important;
    line-height: 1.75!important;
    color: #aeb4bd!important
}

.v8-product-copy p {
    font-size: 14px!important;
    line-height: 1.65!important;
    color: #a5abb4!important
}

.v8-card-actions a,.v8-card-actions button {
    font-size: 12.5px!important;
    min-height: 42px!important
}

.v18-footer h4 {
    font-size: 14px!important
}

.v18-footer p,.v18-footer a {
    font-size: 13.5px!important;
    line-height: 1.78!important
}

.v18-footer-brand p {
    font-size: 13px!important;
    max-width: 230px!important
}

.v18-footer .footer-bottom {
    font-size: 11.5px!important;
    line-height: 1.6!important
}

.mobile-menu-footer {
    font-size: 13px!important
}

/* V27 readable minimums for meaningful legacy UI copy. Decorative eyebrows remain compact by design. */
.v8-account-form label,.v18-checkout-card label {
    font-size: 13px!important
}

.v8-consent,.v18-demo-note {
    font-size: 12.5px!important;
    line-height: 1.6!important
}

.repair-list article p {
    font-size: 13px!important;
    line-height: 1.65!important
}

.v8-support-hub b {
    font-size: 13px!important
}

.v8-catalog-info a,.v8-catalog-info button {
    font-size: 13px!important
}

.v9-product-page .spec-group td,.v9-product-page .spec-table th,.v9-product-page .spec-table td {
    font-size: 12.5px!important;
    line-height: 1.55!important
}

.v19-generic-meta dt {
    font-size: 11.5px!important
}

.contact-channel span {
    font-size: 11.5px!important
}

.media-caption {
    font-size: 11.5px!important;
    line-height: 1.5!important
}

.cart-count,.cart-count2 {
    font-size: 10.5px!important
}

/* === v29.css === */
/* WEKYPSYR V29 — secondary-page rhythm lock
   Purpose: remove oversized dead space caused by legacy page-hero min-height/centering
   while keeping a premium, consistent first-screen hierarchy across content/utility/catalog pages. */
:root {
    --v29-hero-top: clamp(42px,4vw,58px);
    --v29-hero-bottom: clamp(46px,4.4vw,64px);
    --v29-section: clamp(72px,6vw,96px);
    --v29-section-compact: clamp(52px,4.4vw,70px);
}

/* One authoritative layout rule for every normal secondary-page hero.
   Legacy V8/V19/V21/V27 rules may remain for history, but this last layer owns the result. */
.page-secondary .page-hero:not([style*="100svh"]) {
    display: block!important;
    min-height: 0!important;
    max-height: none!important;
    height: auto!important;
    align-items: initial!important;
    padding: calc(var(--header-h,92px) + var(--v29-hero-top)) 0 var(--v29-hero-bottom)!important;
    overflow: hidden!important;
    background: radial-gradient(circle at 78% 42%,rgba(38,68,128,.14),transparent 34%), linear-gradient(180deg,#06080b 0%,#040506 100%)!important;
}

.page-secondary .page-hero::before {
    opacity: .68!important;
    mask-image: linear-gradient(to bottom,transparent 0,#000 34%,#000 100%)!important;
}

.page-secondary .page-hero .container {
    position: relative!important;
    z-index: 3!important;
    padding: 0!important;
    margin-block:0!important; }

.page-secondary .page-hero .breadcrumb {
    margin: 0 0 18px!important;
    font-size: 12px!important;
    line-height: 1.45!important;
    color: #8f959e!important;
}

.page-secondary .page-hero .eyebrow {
    margin: 0 0 13px!important;
    font-size: 10.5px!important;
    line-height: 1.3!important;
    letter-spacing: .18em!important;
}

.page-secondary .page-hero .display, .page-secondary .page-hero h1 {
    margin: 0!important;
    max-width: 15ch!important;
    font-size: clamp(48px,4.35vw,68px)!important;
    line-height: 1.01!important;
    letter-spacing: -.045em!important;
    text-wrap: balance!important;
}

.page-secondary .page-hero .lead {
    max-width: 680px!important;
    margin: 16px 0 0!important;
    font-size: 16px!important;
    line-height: 1.72!important;
    color: #aeb4bd!important;
}

.page-secondary .page-hero .hero-actions {
    position: relative!important;
    z-index: 4!important;
    margin: 24px 0 0!important;
    padding: 0!important;
    gap: 14px!important;
}

.page-secondary .page-hero .btn {
    min-height: 46px!important;
    padding: 0 22px!important;
    font-size: 13.5px!important;
}

.page-secondary .page-hero-watermark {
    z-index: 1!important;
    right: 2.5vw!important;
    bottom: 18px!important;
    font-size: clamp(84px,9.5vw,158px)!important;
    line-height: .8!important;
    color: rgba(255,255,255,.021)!important;
    opacity: 1!important;
    pointer-events: none!important;
}

/* Catalog can carry slightly more visual weight, but never a viewport-sized empty hero. */
.page-secondary.page-catalog .page-hero {
    --v29-hero-top: clamp(48px,4.4vw,64px);
    --v29-hero-bottom: clamp(54px,5vw,72px);
}

.page-secondary.page-catalog .page-hero .display, .page-secondary.page-catalog .page-hero h1 {
    font-size: clamp(52px,4.7vw,72px)!important
}

/* Utility pages should get users to the tool quickly. */
.page-secondary.page-utility .page-hero {
    --v29-hero-top: clamp(36px,3.5vw,50px);
    --v29-hero-bottom: clamp(40px,3.8vw,54px);
}

.page-secondary.page-utility .page-hero .display, .page-secondary.page-utility .page-hero h1 {
    font-size: clamp(44px,4vw,62px)!important
}

.page-secondary.page-utility .page-hero-watermark {
    font-size: clamp(76px,8.3vw,138px)!important
}

/* Software needs room for its two CTAs, but the room comes from content, not min-height. */
.page-secondary.page-software .software-hero {
    min-height: 0!important;
    height: auto!important;
    padding-bottom: clamp(52px,4.7vw,68px)!important;
}

.page-secondary.page-software .software-hero .display {
    max-width: none!important;
    white-space: nowrap!important;
    font-size: clamp(50px,4.65vw,72px)!important;
}

.page-secondary.page-software .software-hero .page-hero-watermark {
    right: 2.5vw!important;
    font-size: clamp(90px,9.8vw,165px)!important;
}

/* Secondary page vertical rhythm: avoid a second oversized gap immediately after the hero. */
.page-secondary main>.section {
    padding-block:var(--v29-section)!important}

.page-secondary main>.section.compact {
    padding-block: var(--v29-section-compact)!important
}

.page-secondary main>.page-hero + .section {
    padding-top: clamp(66px,5.5vw,88px)!important
}

/* Cards/functional panels should not feel vertically inflated just because the page is sparse. */
.page-support .v8-support-hub>a {
    min-height: 260px!important;
    padding: 32px 34px!important
}

.page-support .v8-support-hub h2 {
    margin-top: 48px!important
}

.page-query .v8-query-card,.page-query .v8-query-result {
    min-height: 430px!important
}

.page-account .v8-account-card,.page-account .v8-portal-card {
    padding: 36px!important
}

/* Compact error page without an accidental empty pseudo-landing page. */
.page-secondary.page-error .page-hero {
    min-height: calc(100svh - var(--header-h,92px))!important;
    display: flex!important;
    align-items: center!important;
    padding-top: var(--header-h,92px)!important;
    padding-bottom: 40px!important;
}

@media(max-width: 900px) {
    :root {
        --v29-hero-top:34px;
        --v29-hero-bottom: 42px;
        --v29-section: 74px;
        --v29-section-compact: 54px
    }

    .page-secondary .page-hero:not([style*="100svh"]) {
        padding: calc(var(--header-h,74px) + var(--v29-hero-top)) 0 var(--v29-hero-bottom)!important;
    }

    .page-secondary .page-hero .display,.page-secondary .page-hero h1 {
        font-size: clamp(42px,7.2vw,58px)!important;
        max-width: 13ch!important;
    }

    .page-secondary .page-hero-watermark {
        right: -1vw!important;
        bottom: 12px!important;
        font-size: clamp(80px,17vw,138px)!important
    }

    .page-secondary.page-software .software-hero .display {
        white-space: normal!important;
        max-width: 13ch!important
    }

    .page-secondary main>.page-hero + .section {
        padding-top: 64px!important
    }
}

@media(max-width: 620px) {
    :root {
        --v29-hero-top:26px;
        --v29-hero-bottom: 34px;
        --v29-section: 62px;
        --v29-section-compact: 46px
    }

    .page-secondary .page-hero:not([style*="100svh"]) {
        padding: calc(var(--header-h,74px) + var(--v29-hero-top)) 0 var(--v29-hero-bottom)!important;
    }

    .page-secondary .page-hero .breadcrumb {
        margin-bottom: 14px!important;
        font-size: 11.5px!important
    }

    .page-secondary .page-hero .eyebrow {
        margin-bottom: 10px!important;
        font-size: 10px!important
    }

    .page-secondary .page-hero .display,.page-secondary .page-hero h1 {
        font-size: clamp(38px,10.2vw,50px)!important;
        line-height: 1.04!important;
        max-width: 12ch!important;
    }

    .page-secondary .page-hero .lead {
        margin-top: 13px!important;
        font-size: 15px!important;
        line-height: 1.65!important
    }

    .page-secondary .page-hero .hero-actions {
        margin-top: 20px!important;
        gap: 12px!important
    }

    .page-secondary .page-hero-watermark {
        font-size: 24vw!important;
        right: -2vw!important;
        bottom: 8px!important;
        color: rgba(255,255,255,.017)!important
    }

    .page-secondary main>.page-hero + .section {
        padding-top: 54px!important
    }

    .page-support .v8-support-hub>a {
        min-height: 230px!important;
        padding: 26px!important
    }

    .page-support .v8-support-hub h2 {
        margin-top: 38px!important
    }

    .page-query .v8-query-card,.page-query .v8-query-result {
        min-height: auto!important
    }
}

/* === v30.css === */
/* WEKYPSYR V30 — utility-page density + visual-editor stability layer
   1) Tighten utility/content page heroes so the first screen never feels like an empty black canvas.
   2) Keep normal public pages unchanged except for secondary-page rhythm.
   3) When opened inside the admin visual editor, freeze decorative/interactive chrome and keep desktop layout desktop-sized. */
:root {
    --v30-content-top: clamp(30px,2.5vw,40px);
    --v30-content-bottom: clamp(34px,2.8vw,46px);
    --v30-utility-top: clamp(22px,1.8vw,30px);
    --v30-utility-bottom: clamp(26px,2vw,34px);
    --v30-after-hero: clamp(48px,4vw,64px);
}

/* V30 owns normal secondary page first-screen density. No viewport min-height, no flex bottom anchoring. */
.page-secondary .page-hero:not([style*="100svh"]) {
    min-height: 0!important;
    max-height: none!important;
    height: auto!important;
    display: block!important;
    align-items: initial!important;
    padding: calc(var(--header-h,86px) + var(--v30-content-top)) 0 var(--v30-content-bottom)!important;
}

.page-secondary .page-hero .container {
    padding: 0!important;
    margin-block:0!important; }

.page-secondary .page-hero .breadcrumb {
    margin: 0 0 13px!important;
    font-size: 12px!important;
    line-height: 1.4!important;
}

.page-secondary .page-hero .eyebrow {
    margin: 0 0 10px!important;
    font-size: 10.5px!important;
    line-height: 1.25!important;
}

.page-secondary .page-hero .display, .page-secondary .page-hero h1 {
    margin: 0!important;
    font-size: clamp(44px,3.7vw,60px)!important;
    line-height: 1.02!important;
    max-width: 16ch!important;
}

.page-secondary .page-hero .lead {
    margin: 13px 0 0!important;
    max-width: 820px!important;
    font-size: 15px!important;
    line-height: 1.65!important;
}

.page-secondary .page-hero .hero-actions {
    margin: 20px 0 0!important;
}

.page-secondary .page-hero-watermark {
    right: 2.2vw!important;
    bottom: 10px!important;
    font-size: clamp(72px,7.6vw,126px)!important;
    color: rgba(255,255,255,.016)!important;
}

/* Utility pages are intentionally tighter: query/account/cart/checkout should get users to the tool immediately. */
.page-secondary.page-utility .page-hero {
    padding: calc(var(--header-h,86px) + var(--v30-utility-top)) 0 var(--v30-utility-bottom)!important;
}

.page-secondary.page-utility .page-hero .breadcrumb {
    margin-bottom: 11px!important
}

.page-secondary.page-utility .page-hero .eyebrow {
    margin-bottom: 9px!important
}

.page-secondary.page-utility .page-hero .display, .page-secondary.page-utility .page-hero h1 {
    font-size: clamp(42px,3.45vw,56px)!important;
}

.page-secondary.page-utility .page-hero .lead {
    max-width: 900px!important;
    margin-top: 12px!important;
    font-size: 14.5px!important;
    line-height: 1.6!important;
}

.page-secondary.page-utility .page-hero-watermark {
    font-size: clamp(68px,7vw,116px)!important;
    bottom: 8px!important;
}

/* Content pages still breathe, but no longer resemble a blank landing page. */
.page-secondary.page-content .page-hero {
    padding-top: calc(var(--header-h,86px) + clamp(28px,2.3vw,38px))!important;
    padding-bottom: clamp(32px,2.7vw,44px)!important;
}

.page-secondary.page-content .page-hero .lead {
    max-width: 760px!important
}

/* Product catalog gets a little more theatre than a utility page, without turning into a viewport-sized banner. */
.page-secondary.page-catalog .page-hero {
    padding-top: calc(var(--header-h,86px) + clamp(34px,2.8vw,46px))!important;
    padding-bottom: clamp(38px,3.1vw,50px)!important;
}

/* Software CTAs must remain visible; content determines height, not a fixed hero box. */
.page-secondary.page-software .software-hero {
    min-height: 0!important;
    height: auto!important;
    padding-bottom: clamp(38px,3.1vw,50px)!important;
}

.page-secondary.page-software .software-hero .display {
    font-size: clamp(46px,4vw,62px)!important;
}

/* Prevent a second large empty band immediately after the hero. */
.page-secondary main>.page-hero + .section {
    padding-top: var(--v30-after-hero)!important;
}

.page-secondary main>.page-hero + .v18-checkout, .page-secondary main>.page-hero + .v18-cart {
    padding-top: clamp(46px,3.8vw,60px)!important;
}

/* V30 visual-editor mode: editing should show content, not carousel/navigation chrome. */
html.v22-admin-edit-mode {
    scroll-behavior: auto!important;
}

html.v22-admin-edit-mode *, html.v22-admin-edit-mode *::before, html.v22-admin-edit-mode *::after {
    animation-duration: 0s!important;
    animation-delay: 0s!important;
    transition-duration: 0s!important;
}

html.v22-admin-edit-mode .v11-slider-arrow, html.v22-admin-edit-mode .v11-slider-footer, html.v22-admin-edit-mode .scroll-cue, html.v22-admin-edit-mode [data-search-open], html.v22-admin-edit-mode .cart-count, html.v22-admin-edit-mode .cart-count {
    display: none!important;
}

html.v22-admin-edit-mode .v11-slide {
    transform: none!important;
}

html.v22-admin-edit-mode .v11-slide.is-active {
    opacity: 1!important;
    visibility: visible!important;
    pointer-events: auto!important;
}

html.v22-admin-edit-mode .v11-slide.is-active .v11-slide-copy, html.v22-admin-edit-mode .v11-slide.is-active .v11-slide-media {
    opacity: 1!important;
    transform: none!important;
    animation: none!important;
}

html.v22-admin-edit-mode .v11-product-slider:focus-within .v11-slider-arrow, html.v22-admin-edit-mode .v11-product-slider:hover .v11-slider-arrow {
    display: none!important;
}

/* Desktop visual-editor viewport stays readable even when the admin column makes the iframe physically narrower. */
html.v22-admin-edit-mode .v11-slide-inner {
    width: min(calc(100% - 72px),1380px)!important;
    grid-template-columns: minmax(280px,.82fr) minmax(0,1.18fr)!important;
    gap: 32px!important;
}

@media(max-width: 900px) {
    :root {
        --v30-after-hero:52px
    }

    .page-secondary .page-hero:not([style*="100svh"]) {
        padding-top: calc(var(--header-h,74px) + 24px)!important;
        padding-bottom: 30px!important;
    }

    .page-secondary .page-hero .display,.page-secondary .page-hero h1 {
        font-size: clamp(40px,7vw,54px)!important;
    }

    .page-secondary .page-hero .lead {
        font-size: 15px!important;
        max-width: 720px!important
    }

    .page-secondary .page-hero-watermark {
        font-size: clamp(70px,14vw,112px)!important
    }
}

@media(max-width: 620px) {
    .page-secondary .page-hero:not([style*="100svh"]) {
        padding-top:calc(var(--header-h,74px) + 18px)!important;
        padding-bottom: 26px!important;
    }

    .page-secondary .page-hero .breadcrumb {
        margin-bottom: 10px!important;
        font-size: 11.5px!important
    }

    .page-secondary .page-hero .eyebrow {
        margin-bottom: 8px!important;
        font-size: 10px!important
    }

    .page-secondary .page-hero .display,.page-secondary .page-hero h1 {
        font-size: clamp(36px,9.7vw,46px)!important;
        line-height: 1.04!important;
    }

    .page-secondary .page-hero .lead {
        margin-top: 10px!important;
        font-size: 14px!important;
        line-height: 1.58!important
    }

    .page-secondary .page-hero-watermark {
        font-size: 22vw!important;
        bottom: 5px!important
    }

    .page-secondary main>.page-hero + .section, .page-secondary main>.page-hero + .v18-checkout, .page-secondary main>.page-hero + .v18-cart {
        padding-top: 42px!important
    }
}

/* === v31.css === */
/* WEKYPSYR V31 — secondary hero structural reset
   V31 stops fighting historical V8/V19/V21/V27 hero heights with another override only.
   All normal secondary heroes receive the new .v31-secondary-hero class in HTML and legacy
   v8-page-hero/software-hero classes are removed, so old 64svh/440px rules cannot match. */
:root {
    --v31-fixed-header: 78px;
    --v31-hero-gap-top: 22px;
    --v31-hero-gap-bottom: 28px;
    --v31-after-hero: clamp(42px,3.2vw,54px);
}

/* Authoritative secondary hero box. Content height determines the result. */
body.page-secondary main > section.page-hero.v31-secondary-hero {
    box-sizing: border-box!important;
    display: block!important;
    min-height: 0!important;
    max-height: none!important;
    height: auto!important;
    align-items: initial!important;
    justify-content: initial!important;
    padding: calc(var(--v31-fixed-header) + var(--v31-hero-gap-top)) 0 var(--v31-hero-gap-bottom)!important;
    margin: 0!important;
    overflow: hidden!important;
    background: radial-gradient(circle at 78% 43%,rgba(38,68,128,.115),transparent 31%), linear-gradient(180deg,#06080b 0%,#040506 100%)!important;
}

body.page-secondary main > section.page-hero.v31-secondary-hero > .container {
    position: relative!important;
    z-index: 3!important;
    padding: 0!important;
    margin-block:0!important; min-height: 0!important;
    height: auto!important;
    transform: none!important;
}

body.page-secondary main > section.page-hero.v31-secondary-hero .breadcrumb {
    margin: 0 0 11px!important;
    font-size: 12px!important;
    line-height: 1.4!important;
}

body.page-secondary main > section.page-hero.v31-secondary-hero .eyebrow {
    margin: 0 0 8px!important;
    font-size: 10.5px!important;
    line-height: 1.25!important;
    letter-spacing: .18em!important;
}

body.page-secondary main > section.page-hero.v31-secondary-hero .display, body.page-secondary main > section.page-hero.v31-secondary-hero h1 {
    margin: 0!important;
    max-width: 16ch!important;
    font-size: clamp(42px,3.45vw,56px)!important;
    line-height: 1.02!important;
    letter-spacing: -.042em!important;
    text-wrap: balance!important;
}

body.page-secondary main > section.page-hero.v31-secondary-hero .lead {
    margin: 11px 0 0!important;
    max-width: 760px!important;
    font-size: 15px!important;
    line-height: 1.58!important;
    color: #aeb4bd!important;
}

body.page-secondary main > section.page-hero.v31-secondary-hero .hero-actions {
    position: relative!important;
    z-index: 4!important;
    margin: 16px 0 0!important;
    padding: 0!important;
    gap: 12px!important;
}

body.page-secondary main > section.page-hero.v31-secondary-hero .hero-actions .btn {
    min-height: 42px!important;
    padding: 0 20px!important;
    font-size: 13px!important;
}

body.page-secondary main > section.page-hero.v31-secondary-hero .page-hero-watermark {
    z-index: 1!important;
    right: 2vw!important;
    bottom: 6px!important;
    font-size: clamp(66px,6.8vw,110px)!important;
    line-height: .8!important;
    color: rgba(255,255,255,.014)!important;
    opacity: 1!important;
    pointer-events: none!important;
}

/* Content pages: still premium, but no empty pseudo-landing screen. */
body.page-secondary.page-content main > section.page-hero.v31-secondary-hero {
    --v31-hero-gap-top: 22px;
    --v31-hero-gap-bottom: 28px;
}

/* Software: deliberately compact even with two CTA buttons. */
body.page-secondary.page-software main > section.page-hero.v31-secondary-hero {
    --v31-hero-gap-top: 20px;
    --v31-hero-gap-bottom: 26px;
}

body.page-secondary.page-software main > section.page-hero.v31-secondary-hero .display {
    max-width: none!important;
    white-space: nowrap!important;
    font-size: clamp(44px,3.65vw,58px)!important;
}

body.page-secondary.page-software main > section.page-hero.v31-secondary-hero .lead {
    max-width: 680px!important;
}

/* Utility pages should get users to the actual form/tool even faster. */
body.page-secondary.page-utility main > section.page-hero.v31-secondary-hero {
    --v31-hero-gap-top: 18px;
    --v31-hero-gap-bottom: 22px;
}

body.page-secondary.page-utility main > section.page-hero.v31-secondary-hero .display, body.page-secondary.page-utility main > section.page-hero.v31-secondary-hero h1 {
    font-size: clamp(40px,3.25vw,52px)!important;
}

body.page-secondary.page-utility main > section.page-hero.v31-secondary-hero .lead {
    margin-top: 9px!important;
    max-width: 900px!important;
    font-size: 14.5px!important;
    line-height: 1.55!important;
}

body.page-secondary.page-utility main > section.page-hero.v31-secondary-hero .page-hero-watermark {
    font-size: clamp(62px,6.3vw,102px)!important;
}

/* Catalog can breathe a little more than tools, but remains content-sized. */
body.page-secondary.page-catalog main > section.page-hero.v31-secondary-hero {
    --v31-hero-gap-top: 26px;
    --v31-hero-gap-bottom: 32px;
}

body.page-secondary.page-catalog main > section.page-hero.v31-secondary-hero .display, body.page-secondary.page-catalog main > section.page-hero.v31-secondary-hero h1 {
    font-size: clamp(46px,3.8vw,62px)!important;
}

/* The next section starts quickly; no second dead band under the hero. */
body.page-secondary main > section.page-hero.v31-secondary-hero + .section, body.page-secondary main > section.page-hero.v31-secondary-hero + .v18-checkout, body.page-secondary main > section.page-hero.v31-secondary-hero + .v18-cart {
    padding-top: var(--v31-after-hero)!important;
}

/* 404 remains a deliberate full-page state, not a normal content hero. */
body.page-error main > section.page-hero.v31-secondary-hero {
    min-height: calc(100svh - var(--v31-fixed-header))!important;
    display: flex!important;
    align-items: center!important;
    padding: var(--v31-fixed-header) 0 34px!important;
}

@media(max-width: 900px) {
    :root {
        --v31-fixed-header:78px;
        --v31-after-hero: 46px
    }

    body.page-secondary main > section.page-hero.v31-secondary-hero {
        --v31-hero-gap-top: 18px;
        --v31-hero-gap-bottom: 24px;
    }

    body.page-secondary main > section.page-hero.v31-secondary-hero .display, body.page-secondary main > section.page-hero.v31-secondary-hero h1 {
        font-size: clamp(38px,7vw,50px)!important;
        max-width: 13ch!important;
    }

    body.page-secondary.page-software main > section.page-hero.v31-secondary-hero .display {
        white-space: normal!important;
        max-width: 13ch!important;
    }

    body.page-secondary main > section.page-hero.v31-secondary-hero .page-hero-watermark {
        font-size: clamp(66px,13vw,104px)!important;
        right: -1vw!important;
    }
}

@media(max-width: 620px) {
    :root {
        --v31-after-hero:40px
    }

    body.page-secondary main > section.page-hero.v31-secondary-hero {
        --v31-hero-gap-top: 14px;
        --v31-hero-gap-bottom: 20px;
    }

    body.page-secondary main > section.page-hero.v31-secondary-hero .breadcrumb {
        margin-bottom: 9px!important;
        font-size: 11.5px!important
    }

    body.page-secondary main > section.page-hero.v31-secondary-hero .eyebrow {
        margin-bottom: 7px!important;
        font-size: 10px!important
    }

    body.page-secondary main > section.page-hero.v31-secondary-hero .display, body.page-secondary main > section.page-hero.v31-secondary-hero h1 {
        font-size: clamp(35px,9.4vw,44px)!important;
        line-height: 1.04!important
    }

    body.page-secondary main > section.page-hero.v31-secondary-hero .lead {
        margin-top: 9px!important;
        font-size: 14px!important;
        line-height: 1.55!important
    }

    body.page-secondary main > section.page-hero.v31-secondary-hero .hero-actions {
        margin-top: 14px!important
    }

    body.page-secondary main > section.page-hero.v31-secondary-hero .page-hero-watermark {
        font-size: 20vw!important;
        bottom: 4px!important
    }
}

/* === v32.css === */
/* WEKYPSYR V32 — secondary-page density polish
   Focus: move normal secondary-page content closer to the fixed header without crowding it,
   shorten the transition into the first content section, and make support cards feel intentional
   rather than vertically inflated. This file is the final authority for V32 secondary heroes. */
:root {
    --v32-header-h: 78px;
    --v32-hero-top-gap: 6px;
    --v32-hero-bottom-gap: 20px;
    --v32-after-hero: clamp(32px,2.35vw,42px);
}

body.page-secondary main > section.page-hero.v32-secondary-hero {
    box-sizing: border-box!important;
    display: block!important;
    min-height: 0!important;
    max-height: none!important;
    height: auto!important;
    align-items: initial!important;
    justify-content: initial!important;
    padding: calc(var(--v32-header-h) + var(--v32-hero-top-gap)) 0 var(--v32-hero-bottom-gap)!important;
    margin: 0!important;
    overflow: hidden!important;
    background: radial-gradient(circle at 77% 39%,rgba(38,68,128,.10),transparent 29%), linear-gradient(180deg,#06080b 0%,#040506 100%)!important;
}

body.page-secondary main > section.page-hero.v32-secondary-hero > .container {
    position: relative!important;
    z-index: 3!important;
    min-height: 0!important;
    height: auto!important;
    padding: 0!important;
    margin: 0 auto!important;
    transform: none!important;
}

body.page-secondary main > section.page-hero.v32-secondary-hero .breadcrumb {
    margin: 0 0 9px!important;
    font-size: 12px!important;
    line-height: 1.35!important;
    color: #8f959e!important;
}

body.page-secondary main > section.page-hero.v32-secondary-hero .eyebrow {
    margin: 0 0 6px!important;
    font-size: 10.5px!important;
    line-height: 1.25!important;
    letter-spacing: .18em!important;
}

body.page-secondary main > section.page-hero.v32-secondary-hero .display, body.page-secondary main > section.page-hero.v32-secondary-hero h1 {
    margin: 0!important;
    max-width: 16ch!important;
    font-size: clamp(41px,3.35vw,54px)!important;
    line-height: 1.01!important;
    letter-spacing: -.041em!important;
    text-wrap: balance!important;
}

body.page-secondary main > section.page-hero.v32-secondary-hero .lead {
    margin: 9px 0 0!important;
    max-width: 760px!important;
    font-size: 15px!important;
    line-height: 1.55!important;
    color: #aeb4bd!important;
}

body.page-secondary main > section.page-hero.v32-secondary-hero .hero-actions {
    position: relative!important;
    z-index: 4!important;
    margin: 14px 0 0!important;
    padding: 0!important;
    gap: 12px!important;
}

body.page-secondary main > section.page-hero.v32-secondary-hero .hero-actions .btn {
    min-height: 41px!important;
    padding: 0 19px!important;
    font-size: 13px!important;
}

body.page-secondary main > section.page-hero.v32-secondary-hero .page-hero-watermark {
    z-index: 1!important;
    right: 2vw!important;
    bottom: 5px!important;
    font-size: clamp(62px,6.1vw,98px)!important;
    line-height: .8!important;
    color: rgba(255,255,255,.012)!important;
    opacity: 1!important;
    pointer-events: none!important;
}

/* Content pages: a small breathing gap under the fixed 78px navigation only. */
body.page-secondary.page-content main > section.page-hero.v32-secondary-hero {
    --v32-hero-top-gap: 5px;
    --v32-hero-bottom-gap: 19px;
}

/* Support is deliberately a little tighter because its first cards are the actual navigation. */
body.page-support main > section.page-hero.v32-secondary-hero {
    --v32-hero-top-gap: 3px;
    --v32-hero-bottom-gap: 18px;
}

/* Software keeps enough room for CTAs but no pseudo-landing-screen height. */
body.page-secondary.page-software main > section.page-hero.v32-secondary-hero {
    --v32-hero-top-gap: 4px;
    --v32-hero-bottom-gap: 19px;
}

body.page-secondary.page-software main > section.page-hero.v32-secondary-hero .display {
    max-width: none!important;
    white-space: nowrap!important;
    font-size: clamp(43px,3.55vw,57px)!important;
}

body.page-secondary.page-software main > section.page-hero.v32-secondary-hero .lead {
    max-width: 680px!important
}

/* Utility pages should reveal the actual form or transaction UI almost immediately. */
body.page-secondary.page-utility main > section.page-hero.v32-secondary-hero {
    --v32-hero-top-gap: 2px;
    --v32-hero-bottom-gap: 17px;
}

body.page-secondary.page-utility main > section.page-hero.v32-secondary-hero .display, body.page-secondary.page-utility main > section.page-hero.v32-secondary-hero h1 {
    font-size: clamp(39px,3.15vw,51px)!important;
}

body.page-secondary.page-utility main > section.page-hero.v32-secondary-hero .lead {
    margin-top: 8px!important;
    max-width: 880px!important;
    font-size: 14.5px!important;
}

/* Product catalog keeps slightly more visual authority than a tool page. */
body.page-secondary.page-catalog main > section.page-hero.v32-secondary-hero {
    --v32-hero-top-gap: 8px;
    --v32-hero-bottom-gap: 22px;
}

body.page-secondary.page-catalog main > section.page-hero.v32-secondary-hero .display, body.page-secondary.page-catalog main > section.page-hero.v32-secondary-hero h1 {
    font-size: clamp(44px,3.6vw,59px)!important;
}

/* Shorter bridge between heading and actual page content. */
body.page-secondary main > section.page-hero.v32-secondary-hero + .section, body.page-secondary main > section.page-hero.v32-secondary-hero + .v18-checkout, body.page-secondary main > section.page-hero.v32-secondary-hero + .v18-cart {
    padding-top: var(--v32-after-hero)!important;
}

/* Support hub polish: reduce empty card height and establish a cleaner internal rhythm. */
body.page-support .v8-support-hub {
    gap: 12px!important
}

body.page-support .v8-support-hub>a {
    min-height: 228px!important;
    padding: 27px 31px!important;
    display: flex!important;
    flex-direction: column!important;
    justify-content: flex-start!important;
}

body.page-support .v8-support-hub span {
    font-size: 10px!important;
    letter-spacing: .18em!important
}

body.page-support .v8-support-hub h2 {
    margin: 31px 0 7px!important;
    font-size: clamp(26px,2vw,31px)!important;
    line-height: 1.08!important;
}

body.page-support .v8-support-hub p {
    margin: 0!important;
    max-width: 470px!important;
    font-size: 14.5px!important;
    line-height: 1.65!important;
    color: #969da7!important;
}

body.page-support .v8-support-hub b {
    margin-top: auto!important;
    padding-top: 18px!important;
    font-size: 13px!important;
}

/* 404 remains a deliberately centered full-page state. */
body.page-error main > section.page-hero.v32-secondary-hero {
    min-height: calc(100svh - var(--v32-header-h))!important;
    display: flex!important;
    align-items: center!important;
    padding: var(--v32-header-h) 0 30px!important;
}

@media(max-width: 900px) {
    :root {
        --v32-header-h:78px;
        --v32-hero-top-gap: 8px;
        --v32-hero-bottom-gap: 20px;
        --v32-after-hero: 38px
    }

    body.page-secondary main > section.page-hero.v32-secondary-hero .display, body.page-secondary main > section.page-hero.v32-secondary-hero h1 {
        font-size: clamp(37px,6.7vw,48px)!important;
        max-width: 13ch!important;
    }

    body.page-secondary.page-software main > section.page-hero.v32-secondary-hero .display {
        white-space: normal!important;
        max-width: 13ch!important;
    }

    body.page-support .v8-support-hub>a {
        min-height: 218px!important;
        padding: 25px 27px!important
    }

    body.page-support .v8-support-hub h2 {
        margin-top: 27px!important
    }
}

@media(max-width: 620px) {
    :root {
        --v32-header-h:74px;
        --v32-hero-top-gap: 7px;
        --v32-hero-bottom-gap: 18px;
        --v32-after-hero: 32px
    }

    body.page-secondary main > section.page-hero.v32-secondary-hero .breadcrumb {
        margin-bottom: 8px!important;
        font-size: 11.5px!important
    }

    body.page-secondary main > section.page-hero.v32-secondary-hero .eyebrow {
        margin-bottom: 6px!important;
        font-size: 10px!important
    }

    body.page-secondary main > section.page-hero.v32-secondary-hero .display, body.page-secondary main > section.page-hero.v32-secondary-hero h1 {
        font-size: clamp(34px,9vw,42px)!important;
        line-height: 1.03!important
    }

    body.page-secondary main > section.page-hero.v32-secondary-hero .lead {
        margin-top: 8px!important;
        font-size: 14px!important;
        line-height: 1.52!important
    }

    body.page-secondary main > section.page-hero.v32-secondary-hero .hero-actions {
        margin-top: 12px!important
    }

    body.page-secondary main > section.page-hero.v32-secondary-hero .page-hero-watermark {
        font-size: 18vw!important;
        bottom: 3px!important
    }

    body.page-support .v8-support-hub>a {
        min-height: 205px!important;
        padding: 24px!important
    }

    body.page-support .v8-support-hub h2 {
        margin-top: 24px!important
    }

    body.page-support .v8-support-hub b {
        padding-top: 15px!important
    }
}

/* === v36.css === */
.v36-news-loading,.v36-news-empty {
    grid-column: 1/-1;
    padding: 44px;
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.62);
    text-align: center
}

.v36-news-cover-placeholder,.v36-home-news-placeholder {
    min-height: 260px;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 75% 35%,rgba(69,91,150,.18),transparent 38%),#090a0c;
    border-bottom: 1px solid rgba(255,255,255,.08)
}

.v36-news-cover-placeholder span,.v36-home-news-placeholder span {
    font-size: 12px;
    letter-spacing: .22em;
    color: rgba(216,184,117,.72)
}

.v36-home-news-placeholder {
    min-height: 180px
}

.v36-home-news-empty {
    color: rgba(255,255,255,.55)
}

/* === v37.css === */
/* V37 — information architecture consolidation + purchase channels */
:root {
    --v37-line: rgba(255,255,255,.09);
    --v37-muted: #949ba6;
    --v37-gold: #d8b875;
    --v37-gold-hi: #f2deb0
}

/* Mega menus: fewer, clearer choices. */
.v8-header .v37-compact-links {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    max-width: 820px
}

.v8-header .v37-about-links {
    grid-template-columns: repeat(3,minmax(0,1fr))!important
}

.v37-mega-actions {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap
}

.v37-mega-actions>a {
    display: inline-flex!important;
    align-items: center;
    gap: 6px
}

.v37-mega-actions>a+a {
    color: var(--v37-gold-hi)!important
}

/* About: story + principles become one complete thought instead of two repeated sections. */
.page-about #brand-story {
    padding-bottom: clamp(62px,7vw,104px)
}

.v37-principles-inline {
    grid-column: 1/-1;
    margin-top: clamp(42px,5vw,72px);
    padding-top: clamp(32px,4vw,54px);
    border-top: 1px solid var(--v37-line)
}

.v37-inline-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 28px
}

.v37-inline-head .title-sm {
    margin: 0;
    max-width: 680px
}

.page-about .v37-principles-inline .values-grid {
    margin-top: 0
}

.page-about .v37-principles-inline .value-card {
    min-height: 228px;
    padding: 28px
}

/* Contact channels: purchase / business / after-sales, each has a distinct job. */
.v37-contact-channels {
    background: transparent!important;
    gap: 12px!important
}

.v37-contact-channels .contact-channel {
    border: 1px solid var(--v37-line);
    background: linear-gradient(145deg,rgba(16,18,23,.88),rgba(6,7,9,.96));
    padding: 24px!important
}

.v37-contact-channels .contact-channel strong {
    font-size: 18px!important
}

.v37-channel-details {
    display: grid;
    gap: 7px;
    margin-top: 12px;
    color: var(--v37-muted);
    font-size: 13px;
    line-height: 1.65
}

.v37-channel-details a {
    display: inline-flex!important;
    width: max-content;
    color: #d9dde4!important;
    text-decoration: none
}

.v37-channel-details a:hover {
    color: var(--v37-gold-hi)!important
}

.v37-channel-details .v37-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 5px
}

.v37-channel-details .v37-mini-btn {
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    font-size: 11.5px;
    color: #d9dde4
}

.v37-channel-details .v37-mini-btn:hover {
    border-color: rgba(216,184,117,.45);
    color: var(--v37-gold-hi)
}

/* Purchase channels page */
.page-channels .page-hero {
    padding-bottom: 18px!important
}

.v37-buy-section,.v37-dealer-section {
    padding-top: clamp(34px,4vw,58px)!important;
    padding-bottom: clamp(52px,6vw,82px)!important
}

.v37-section-intro {
    display: grid;
    grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);
    column-gap: 7vw;
    align-items: end;
    margin-bottom: 28px
}

.v37-section-intro .eyebrow {
    grid-column: 1
}

.v37-section-intro .title-sm {
    grid-column: 1;
    margin: 9px 0 0
}

.v37-section-intro>p:last-child {
    grid-column: 2;
    grid-row: 1/3;
    margin: 0;
    max-width: 660px;
    color: var(--v37-muted);
    line-height: 1.75
}

.v37-store-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px
}

.v37-store-card {
    position: relative;
    display: flex;
    min-height: 220px;
    padding: 26px;
    border: 1px solid var(--v37-line);
    background: linear-gradient(145deg,rgba(17,19,24,.94),rgba(6,7,9,.98));
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    overflow: hidden
}

.v37-store-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(320px circle at 85% 0%,rgba(107,124,255,.08),transparent 55%);
    pointer-events: none
}

.v37-store-card.is-live:hover {
    transform: translateY(-3px);
    border-color: rgba(216,184,117,.4)
}

.v37-store-card>* {
    position: relative;
    z-index: 1
}

.v37-store-card .kicker {
    font-size: 10px;
    letter-spacing: .18em;
    color: var(--v37-gold-hi)
}

.v37-store-card h3 {
    margin: 18px 0 8px;
    font-size: 22px;
    color: #fff
}

.v37-store-card p {
    margin: 0;
    color: var(--v37-muted);
    font-size: 13px;
    line-height: 1.65
}

.v37-store-card b {
    margin-top: 22px;
    font-size: 12px;
    color: #fff
}

.v37-store-card.is-pending b {
    color: #757c87
}

.v37-region-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px
}

.v37-region-tabs button {
    border: 1px solid var(--v37-line);
    background: #090b0e;
    color: #aeb4bd;
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 12px;
    cursor: pointer
}

.v37-region-tabs button.active {
    border-color: rgba(216,184,117,.55);
    background: rgba(216,184,117,.09);
    color: var(--v37-gold-hi)
}

.v37-dealer-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px
}

.v37-dealer-card {
    padding: 26px;
    border: 1px solid var(--v37-line);
    background: linear-gradient(145deg,rgba(15,17,21,.9),rgba(6,7,9,.98));
    min-height: 240px
}

.v37-dealer-card .region {
    font-size: 10px;
    letter-spacing: .17em;
    color: var(--v37-gold-hi)
}

.v37-dealer-card h3 {
    font-size: 20px;
    margin: 16px 0
}

.v37-dealer-meta {
    display: grid;
    gap: 8px;
    color: var(--v37-muted);
    font-size: 13px;
    line-height: 1.6
}

.v37-dealer-meta b {
    color: #e7e9ed;
    font-weight: 600
}

.v37-dealer-card .actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px
}

.v37-dealer-card .actions a {
    border: 1px solid rgba(255,255,255,.12);
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 11.5px
}

.v37-dealer-empty {
    padding: 30px;
    border: 1px dashed rgba(255,255,255,.11);
    color: var(--v37-muted);
    text-align: center
}

.v37-channel-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 34px;
    padding: 30px;
    border: 1px solid var(--v37-line);
    background: linear-gradient(115deg,rgba(216,184,117,.045),rgba(107,124,255,.025))
}

.v37-channel-cta h2 {
    margin: 8px 0 6px;
    font-size: clamp(28px,3vw,42px)
}

.v37-channel-cta p {
    margin: 0;
    color: var(--v37-muted);
    max-width: 680px
}

/* Admin additions */
.v37-admin-contact-subcard {
    grid-column: 1/-1;
    margin-top: 10px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    background: rgba(255,255,255,.015)
}

.v37-admin-contact-subcard h3 {
    margin: 0 0 5px;
    font-size: 16px
}

.v37-admin-contact-subcard>p {
    margin: 0 0 14px;
    color: #87909c;
    font-size: 12.5px;
    line-height: 1.6
}

.v37-admin-contact-subcard .v25-contact-grid {
    margin-top: 0
}

@media(max-width: 1100px) {
    .v37-store-grid {
        grid-template-columns:repeat(2,1fr)
    }

    .v37-dealer-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .v8-header .v37-about-links {
        grid-template-columns: repeat(2,1fr)!important
    }
}

@media(max-width: 900px) {
    .v37-section-intro {
        grid-template-columns:1fr;
        gap: 10px
    }

    .v37-section-intro .eyebrow,.v37-section-intro .title-sm,.v37-section-intro>p:last-child {
        grid-column: 1;
        grid-row: auto
    }

    .v37-inline-head {
        display: block
    }

    .v37-channel-cta {
        align-items: flex-start;
        flex-direction: column
    }
}

@media(max-width: 620px) {
    .v37-store-grid,.v37-dealer-grid {
        grid-template-columns:1fr
    }

    .v37-store-card {
        min-height: 185px
    }

    .v37-dealer-card {
        min-height: auto
    }

    .v37-channel-cta {
        padding: 22px
    }

    .page-about .v37-principles-inline .value-card {
        min-height: auto
    }
}

.v37-mini-btn.is-disabled {
    opacity: .52;
    cursor: not-allowed;
    pointer-events: none;
    border-style: dashed
}

/* === v38.css === */
/* V38 — one real linked-product news example for visual review */
.v38-news-meta-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto
}

.v38-news-meta-right em {
    font-style: normal;
    color: #d8b875;
    border: 1px solid rgba(216,184,117,.24);
    padding: 3px 7px;
    font-size: 10px;
    letter-spacing: .06em;
    white-space: nowrap
}

.v38-has-linked-product {
    border-top-color: rgba(216,184,117,.26)!important
}

.v34-linked-product-area {
    margin-top: 52px!important;
    padding-top: 28px!important
}

.v34-linked-title span {
    font-size: 10px;
    letter-spacing: .18em;
    color: #d8b875
}

.v34-linked-title h2 {
    margin: 7px 0 18px;
    font-size: 24px
}

.v34-linked-product-grid .v34-article-product {
    border-color: rgba(216,184,117,.24);
    background: linear-gradient(135deg,rgba(216,184,117,.05),rgba(255,255,255,.012));
    padding: 16px
}

.v34-linked-product-grid .v34-article-product img {
    background: radial-gradient(circle at 50% 50%,rgba(44,56,83,.22),#050607 72%)
}

@media(max-width: 720px) {
    .v38-news-meta-right {
        gap:7px
    }

    .v38-news-meta-right em {
        font-size: 9px;
        padding: 2px 5px
    }

    .v34-linked-product-area {
        margin-top: 40px!important
    }

    .v34-linked-title h2 {
        font-size: 21px
    }
}

/* === v40.css === */
/* V40 — catalog normalization, channel demo preview, compact contact */
.v40-filtered-out {
    display: none!important
}

.v8-catalog-grid {
    gap: 16px!important
}

.v8-catalog-card {
    display: flex;
    flex-direction: column
}

.v8-catalog-media {
    aspect-ratio: 1/1!important;
    min-height: 0;
    background: radial-gradient(circle at 50% 45%,rgba(72,92,150,.14),transparent 50%)
}

.v8-catalog-media img,.v8-catalog-media.air img {
    width: 100%!important;
    height: 100%!important;
    max-width: 78%!important;
    max-height: 78%!important;
    object-fit: contain!important;
    object-position: center!important
}

.v8-catalog-info {
    min-height: 190px;
    display: flex;
    flex-direction: column
}

.v8-catalog-info>div:last-child {
    margin-top: auto
}

.v40-variants {
    display: flex!important;
    align-items: center;
    gap: 8px!important;
    margin: 13px 0 0!important
}

.v40-variant-dot {
    width: 25px;
    height: 25px;
    min-height: 25px!important;
    padding: 0!important;
    border-radius: 50%!important;
    position: relative
}

.v40-variant-dot::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--swatch,#888);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.24)
}

.v40-variant-dot.active {
    border-color: #d8b875!important
}

.v40-stock {
    font-size: 11px;
    color: #858c97;
    margin-left: 4px
}

.product-filter .filter-btn small {
    opacity: .55;
    margin-left: 5px
}

.page-channels .v37-store-grid {
    grid-template-columns: repeat(auto-fit,minmax(260px,360px))!important;
    justify-content: start
}

.v40-demo-card {
    border-style: dashed!important;
    opacity: .72
}

.v40-demo-badge {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 4px 7px;
    border: 1px solid rgba(216,184,117,.3);
    border-radius: 999px;
    font-size: 9px;
    letter-spacing: .12em;
    color: #ecd69e
}

.v40-demo-note {
    margin: 0 0 18px;
    padding: 12px 15px;
    border: 1px dashed rgba(216,184,117,.2);
    color: #8f97a2;
    font-size: 12px;
    line-height: 1.65
}

.v40-demo-note b {
    color: #e4cf9d
}

.v37-dealer-empty {
    min-height: 120px;
    display: grid;
    place-items: center
}

.v37-dealer-card.v40-demo-card {
    position: relative
}

.v37-dealer-card.v40-demo-card::before {
    content: "演示预览";
    position: absolute;
    top: 15px;
    right: 15px;
    color: #d8b875;
    font-size: 9px;
    letter-spacing: .12em
}

.page-contact .contact-grid {
    grid-template-columns: minmax(300px,.76fr) minmax(0,1.35fr)!important;
    gap: 28px!important;
    align-items: start
}

.page-contact .contact-channels {
    display: grid!important;
    grid-template-columns: 1fr 1fr!important;
    gap: 10px!important
}

.page-contact .contact-channel:first-child {
    grid-column: 1/-1
}

.page-contact .contact-channel {
    min-height: 0!important;
    padding: 19px!important
}

.page-contact .contact-form {
    padding: 22px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(6,8,11,.62);
    border-radius: 12px
}

.page-contact .contact-form textarea {
    min-height: 116px!important
}

.page-contact .contact-form .btn {
    min-width: 160px!important
}

.v40-detail-builder-public {
    padding: clamp(42px,6vw,86px) 0
}

.v40-detail-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px,5vw,74px);
    align-items: center;
    padding: clamp(34px,5vw,72px) 0;
    border-bottom: 1px solid rgba(255,255,255,.06)
}

.v40-detail-section.media-left .v40-detail-copy {
    order: 2
}

.v40-detail-section img,.v40-detail-image img,.v40-detail-poster img {
    width: 100%;
    display: block;
    object-fit: contain
}

.v40-detail-copy h2 {
    font-size: clamp(30px,4vw,56px);
    margin: 10px 0 16px
}

.v40-detail-copy p {
    color: #a0a6af;
    line-height: 1.85;
    white-space: pre-line
}

.v40-detail-image,.v40-detail-poster,.v40-detail-video {
    margin: clamp(20px,4vw,54px) 0
}

.v40-detail-video video {
    width: 100%;
    max-height: 80vh;
    background: #000
}

@media(max-width: 900px) {
    .page-contact .contact-grid {
        grid-template-columns:1fr!important
    }

    .page-contact .contact-channels {
        grid-template-columns: 1fr!important
    }

    .page-contact .contact-channel:first-child {
        grid-column: auto
    }

    .v40-detail-section {
        grid-template-columns: 1fr
    }

    .v40-detail-section.media-left .v40-detail-copy {
        order: initial
    }
}

/* === v41.css === */
/* WEKYPSYR V41 — runtime visual-edit safety layer */
html {
    --v41-safe: 1
}

[data-v41-bind] {
    scroll-margin-top: 110px
}

/* === v42.css === */
/* WEKYPSYR V42 — safe maintainable content blocks, fixed-copy carousels, scalable socials */
.v42-fixed-carousel {
    display: grid;
    grid-template-columns: minmax(280px,.78fr) minmax(0,1.42fr);
    min-height: 560px;
    border: 1px solid rgba(255,255,255,.11);
    background: #05070a;
    overflow: hidden;
    margin: 28px 0 42px
}

.v42-fixed-carousel.media-left {
    grid-template-columns: minmax(0,1.42fr) minmax(280px,.78fr)
}

.v42-fixed-carousel.media-left .v42-carousel-copy {
    order: 2
}

.v42-fixed-carousel.media-left .v42-carousel-media {
    order: 1
}

.v42-carousel-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px,4.8vw,72px);
    min-width: 0
}

.v42-carousel-copy .eyebrow {
    color: #e2c98f;
    font-size: 11px;
    letter-spacing: .18em
}

.v42-carousel-copy h2 {
    margin: 14px 0 18px;
    font-size: clamp(32px,3.5vw,56px);
    line-height: 1.08
}

.v42-carousel-copy>p:not(.eyebrow) {
    color: #a4aab2;
    line-height: 1.85;
    font-size: 15px;
    max-width: 48ch
}

.v42-carousel-media {
    position: relative;
    min-width: 0;
    background: radial-gradient(circle at 55% 45%,rgba(45,72,135,.12),transparent 55%),#030406
}

.v42-carousel-stage {
    position: relative;
    height: 100%;
    min-height: 560px
}

.v42-carousel-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .42s ease
}

.v42-carousel-slide.active {
    opacity: 1;
    pointer-events: auto
}

.v42-carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 24px
}

.v42-carousel-slide figcaption {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    color: #9299a3;
    font-size: 11px
}

.v42-carousel-controls {
    position: absolute;
    z-index: 3;
    left: 22px;
    right: 22px;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px
}

.v42-carousel-controls>button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(5,7,10,.76);
    color: #fff;
    font-size: 24px
}

.v42-carousel-dots {
    display: flex;
    gap: 6px
}

.v42-carousel-dots button {
    width: 24px;
    height: 3px;
    border: 0;
    background: rgba(255,255,255,.18);
    padding: 0
}

.v42-carousel-dots button.active {
    background: #d8b875
}

.v42-full-bleed-media {
    width: 100vw;
    max-width: none;
    margin: 34px 0 54px calc(50% - 50vw);
    background: #020304
}

.v42-full-bleed-media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain
}

.v42-full-bleed-media figcaption {
    max-width: 1500px;
    margin: 10px auto 0;
    padding: 0 32px;
    color: #858c95;
    font-size: 12px
}

.v42-detail-builder-public>.container {
    overflow: visible
}

.v42-detail-builder-public .v40-detail-image img {
    object-fit: contain
}

/* Software managed content */
.v42-software-blocks {
    display: grid;
    gap: 24px
}

.v42-software-split {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    min-height: 500px;
    border: 1px solid rgba(255,255,255,.11);
    background: #05070a;
    overflow: hidden
}

.v42-software-split.media-right .v42-software-media {
    order: 2
}

.v42-software-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(34px,4vw,62px)
}

.v42-software-copy span {
    color: #e2c98f;
    font-size: 10px;
    letter-spacing: .18em
}

.v42-software-copy h2 {
    font-size: clamp(30px,3vw,46px);
    margin: 13px 0
}

.v42-software-copy p {
    color: #9ca3ad;
    line-height: 1.8
}

.v42-software-media {
    min-width: 0;
    background: #030406
}

.v42-software-media>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 20px
}

.v42-software-blocks .v42-fixed-carousel {
    margin: 0;
    min-height: 500px
}

.v42-software-blocks .v42-carousel-stage {
    min-height: 500px
}

.v42-software-blocks .v42-full-bleed-media {
    margin-top: 0
}

.v42-software-video {
    margin: 0;
    border: 1px solid rgba(255,255,255,.1);
    background: #030405
}

.v42-software-video video {
    width: 100%;
    max-height: 78vh;
    display: block;
    background: #000
}

.v42-software-video figcaption {
    padding: 10px 14px;
    color: #8d949d;
    font-size: 12px
}

/* Scalable social footer */
.v18-socials.v42-socials {
    display: flex!important;
    gap: 10px!important;
    flex-wrap: wrap!important;
    max-width: 360px
}

.v18-social.v42-social {
    position: relative;
    display: grid!important;
    place-items: center;
    width: 48px!important;
    height: 48px!important;
    min-width: 48px;
    border-radius: 50%;
    text-decoration: none
}

.v42-social .social-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain
}

.v42-social .v42-fallback-icon {
    font-size: 13px;
    font-weight: 800;
    color: #fff
}

.v42-social .social-name {
    position: absolute;
    clip: rect(0,0,0,0);
    width: 1px;
    height: 1px;
    overflow: hidden
}

.v18-social-popover.v42-popover img {
    width: 148px;
    height: 148px;
    object-fit: contain;
    background: #fff;
    padding: 7px;
    border-radius: 8px
}

.v18-social-popover.v42-popover a {
    display: inline-block;
    margin-top: 9px;
    color: #f2deb0
}

.v42-popover .v42-no-qr {
    display: block;
    margin-top: 8px;
    color: #747c86
}

@media(max-width: 900px) {
    .v42-fixed-carousel,.v42-fixed-carousel.media-left,.v42-software-split {
        grid-template-columns:1fr;
        min-height: 0
    }

    .v42-fixed-carousel.media-left .v42-carousel-copy,.v42-fixed-carousel.media-left .v42-carousel-media,.v42-software-split.media-right .v42-software-media {
        order: initial
    }

    .v42-carousel-stage {
        min-height: 58vw
    }

    .v42-software-blocks .v42-carousel-stage {
        min-height: 58vw
    }

    .v42-carousel-copy,.v42-software-copy {
        padding: 28px 22px
    }

    .v42-full-bleed-media figcaption {
        padding-inline:20px}

    .v18-socials.v42-socials {
        max-width: none
    }

    .v18-social.v42-social {
        width: 44px!important;
        height: 44px!important;
        min-width: 44px
    }
}

/* === v46.css === */
/* WEKYPSYR V46 — safe drag + product hero presentation */
.product-detail-stage {
    --v46-ring-size: 70%;
    --v46-ring-color: rgba(186,152,82,.20);
    --v46-glow-color: rgba(25,55,115,.18);
    --v46-glow-blur: 120px;
    --v46-ring-display: block;
}

.product-detail-stage::before {
    display: var(--v46-ring-display,block)!important;
    width: var(--v46-ring-size,70%)!important;
    border-color: var(--v46-ring-color,rgba(186,152,82,.20))!important;
    box-shadow: 0 0 var(--v46-glow-blur,120px) var(--v46-glow-color,rgba(25,55,115,.18)) inset!important;
}

@media(max-width: 900px) {
    .product-detail-stage::before {
        width:min(var(--v46-ring-size,70%),82%)!important
    }
}

html.v46-drag-enabled .v22-edit-selected {
    cursor: grab!important;
    touch-action: none!important
}

html.v46-dragging .v22-edit-selected {
    cursor: grabbing!important;
    user-select: none!important
}

/* === v47.css === */
.v47-custom-text {
    max-width: min(960px,calc(100% - 48px));
    margin: 28px auto;
    padding: 0;
    position: relative;
    z-index: 2
}

.v47-custom-text .eyebrow {
    margin-bottom: 12px
}

.v47-custom-text h2 {
    font-size: clamp(28px,3.2vw,52px);
    margin: 0 0 14px
}

.v47-custom-body {
    white-space: normal;
    line-height: 1.75;
    color: #aeb4bb;
    margin: 0 0 18px
}

.v47-custom-text.is-card,.v47-custom-text.is-note {
    padding: 26px 30px;
    border: 1px solid rgba(216,184,117,.22);
    background: rgba(10,12,16,.74);
    border-radius: 16px
}

.v47-custom-text.is-note {
    border-left: 3px solid #d8b875
}

@media(max-width: 900px) {
    .v47-custom-text {
        max-width:calc(100% - 32px);
        margin: 20px auto
    }

    .v47-custom-text.is-card,.v47-custom-text.is-note {
        padding: 20px
    }

    .v47-custom-text h2 {
        font-size: 32px
    }
}

/* === v50.css === */
/* V50 long-form content + safe visual tooling */
.v50-rich-meta {
    max-width: 1320px;
    margin: 0 auto;
    padding: 18px 32px 0;
    color: #8f949d;
    font-size: 13px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap
}

.v50-rich-section {
    padding: 72px 0;
    border-top: 1px solid rgba(255,255,255,.06)
}

.v50-rich-section:first-of-type {
    border-top: 0
}

.v50-rich-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px
}

.v50-rich-inner.is-narrow {
    max-width: 980px
}

.v50-rich-inner.is-center {
    text-align: center
}

.v50-rich-eyebrow {
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #d8b875;
    margin: 0 0 18px
}

.v50-rich-title {
    font-size: clamp(30px,4vw,56px);
    line-height: 1.05;
    margin: 0 0 24px;
    color: #f5f3ef;
    text-wrap: balance
}

.v50-rich-body {
    max-width: 900px;
    color: #aeb4bb;
    font-size: 16px;
    line-height: 1.9;
    white-space: pre-line
}

.v50-rich-inner.is-center .v50-rich-body {
    margin-left: auto;
    margin-right: auto
}

.v50-rich-note {
    border: 1px solid rgba(216,184,117,.35);
    background: rgba(216,184,117,.05);
    padding: 28px 30px;
    border-radius: 18px
}

.v50-rich-policy {
    max-width: 1050px;
    margin: 0 auto;
    padding: 32px 0;
    border-bottom: 1px solid rgba(255,255,255,.08)
}

.v50-rich-policy:last-child {
    border-bottom: 0
}

.v50-rich-policy .v50-rich-title {
    font-size: 28px
}

.v50-rich-split {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(320px,.85fr);
    gap: 64px;
    align-items: center
}

.v50-rich-split.media-left .v50-rich-media {
    order: -1
}

.v50-rich-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px
}

.v50-rich-figure {
    margin: 0
}

.v50-rich-figure.normal {
    max-width: 980px;
    margin-inline:auto}

.v50-rich-figure.wide {
    max-width: 1320px;
    margin-inline:auto}

.v50-rich-figure.full {
    width: 100%
}

.v50-rich-figure img {
    width: 100%;
    height: auto;
    display: block
}

.v50-rich-caption {
    margin-top: 12px;
    color: #858b94;
    font-size: 13px
}

.v50-rich-quote {
    max-width: 1000px;
    margin: 0 auto;
    font-size: clamp(34px,5vw,68px);
    line-height: 1.02;
    font-weight: 750;
    color: #f4f1ea
}

.v50-rich-quote cite {
    display: block;
    margin-top: 20px;
    font-size: 13px;
    line-height: 1.5;
    font-style: normal;
    color: #d8b875;
    letter-spacing: .08em
}

.v50-rich-cards {
    display: grid;
    gap: 18px
}

.v50-rich-cards.cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.v50-rich-cards.cols-3 {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.v50-rich-cards.cols-4 {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

.v50-rich-card {
    min-height: 210px;
    padding: 30px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(145deg,rgba(16,18,24,.82),rgba(7,8,10,.58));
    display: flex;
    flex-direction: column
}

.v50-rich-card img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    margin-bottom: 22px
}

.v50-rich-card small {
    color: #d8b875;
    letter-spacing: .12em;
    margin-bottom: 20px
}

.v50-rich-card h3 {
    font-size: 28px;
    margin: 0 0 16px
}

.v50-rich-card p {
    color: #9298a1;
    line-height: 1.75;
    margin: 0
}

.v50-rich-divider {
    height: 1px;
    background: rgba(255,255,255,.09);
    max-width: 1320px;
    margin: 0 auto
}

.v50-rich-spacer {
    height: 48px
}

.v50-rich-button {
    display: inline-flex;
    margin-top: 24px;
    padding: 12px 20px;
    border: 1px solid rgba(216,184,117,.5);
    color: #f2dca4;
    text-decoration: none
}

.v50-guide-v,.v50-guide-h {
    position: fixed;
    z-index: 2147483645;
    pointer-events: none;
    background: #d8b875;
    box-shadow: 0 0 10px rgba(216,184,117,.35);
    display: none
}

.v50-guide-v {
    top: 0;
    bottom: 0;
    width: 1px
}

.v50-guide-h {
    left: 0;
    right: 0;
    height: 1px
}

@media(max-width: 900px) {
    .v50-rich-section {
        padding:48px 0
    }

    .v50-rich-inner,.v50-rich-meta {
        padding-left: 20px;
        padding-right: 20px
    }

    .v50-rich-split {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .v50-rich-split.media-left .v50-rich-media {
        order: 0
    }

    .v50-rich-cards.cols-2,.v50-rich-cards.cols-3,.v50-rich-cards.cols-4 {
        grid-template-columns: 1fr
    }

    .v50-rich-card {
        min-height: 0
    }

    .v50-rich-body {
        font-size: 15px;
        line-height: 1.8
    }
}

/* === v51.css === */
/* WEKYPSYR V51 — smoother page rhythm + progressive glass navigation */
:root {
    --v51-featured-top: 30px;
    --v51-experience-top: 48px;
    --v51-experience-bottom: 40px;
    --v51-news-top: 42px;
    --v51-news-bottom: 28px;
    --v51-quick-top: 20px;
    --v51-quick-bottom: 44px;
    --v51-transition-strength: .45;
    --v51-header-alpha: .10;
    --v51-header-blur: 7px;
    --v51-header-border: .018;
    --v51-header-shadow: 0;
}

/* Progressive glass header. V33 previously forced secondary headers permanently opaque. */
.site-header.v8-header, body.page-secondary > header.site-header.v8-header {
    background: rgba(2,3,5,var(--v51-header-alpha))!important;
    -webkit-backdrop-filter: blur(var(--v51-header-blur)) saturate(1.18)!important;
    backdrop-filter: blur(var(--v51-header-blur)) saturate(1.18)!important;
    border-bottom-color: rgba(255,255,255,var(--v51-header-border))!important;
    box-shadow: 0 10px 38px rgba(0,0,0,var(--v51-header-shadow))!important;
    transition: background-color .12s linear,backdrop-filter .12s linear,border-color .12s linear,box-shadow .12s linear!important;
}

.site-header.v8-header.mega-active, .site-header.v8-header:has(.v21-open) {
    background: rgba(2,3,5,.965)!important;
    -webkit-backdrop-filter: blur(24px) saturate(1.24)!important;
    backdrop-filter: blur(24px) saturate(1.24)!important;
    border-bottom-color: rgba(255,255,255,.08)!important;
}

/* Homepage vertical rhythm: remove the large dead bands while keeping premium breathing room. */
.page-home .v11-featured-head {
    padding-top: var(--v51-featured-top)!important;
    padding-bottom: 24px!important
}

.page-home .v13-experience {
    padding: var(--v51-experience-top) 0 var(--v51-experience-bottom)!important
}

.page-home .v13-section-head {
    margin-bottom: 34px!important
}

.page-home .v12-news {
    padding: var(--v51-news-top) 0 var(--v51-news-bottom)!important
}

.page-home .v12-section-head {
    margin-bottom: 34px!important
}

.page-home .v11-quick-access {
    padding: var(--v51-quick-top) 0 var(--v51-quick-bottom)!important
}

/* Avoid a hard visual cut between full-bleed homepage sections. */
.page-home main>section {
    position: relative
}

.page-home main>section[data-v51-transition]::before {
    content: "";
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    top: -32px;
    height: 64px;
    pointer-events: none;
    background: linear-gradient(180deg,transparent 0%,rgba(216,184,117,.018) 42%,rgba(72,94,166,.018) 58%,transparent 100%);
    opacity: 0;
    transform: scaleX(.86);
    transform-origin: center;
    transition: opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1);
}

.page-home main>section[data-v51-transition].v51-transition-in::before {
    opacity: var(--v51-transition-strength);
    transform: scaleX(1)
}

.page-home main>section[data-v51-transition]::after {
    content: "";
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 0;
    width: min(72vw,980px);
    height: 1px;
    pointer-events: none;
    transform: translateX(-50%) scaleX(.72);
    opacity: 0;
    background: linear-gradient(90deg,transparent,rgba(216,184,117,.20),rgba(107,124,255,.16),transparent);
    transition: opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1);
}

.page-home main>section[data-v51-transition].v51-transition-in::after {
    opacity: var(--v51-transition-strength);
    transform: translateX(-50%) scaleX(1)
}

/* Slightly softer content reveal so scrolling feels continuous instead of section-by-section snapping. */
.page-home .reveal {
    transition-duration: .72s!important;
    transition-timing-function: cubic-bezier(.16,1,.3,1)!important
}

@media(max-width: 900px) {
    :root {
        --v51-featured-top:25px;
        --v51-experience-top: 39px;
        --v51-experience-bottom: 33px;
        --v51-news-top: 34px;
        --v51-news-bottom: 24px;
        --v51-quick-top: 18px;
        --v51-quick-bottom: 36px
    }

    .page-home .v13-section-head,.page-home .v12-section-head {
        margin-bottom: 28px!important
    }

    .page-home main>section[data-v51-transition]::before {
        top: -22px;
        height: 44px
    }
}

@media(max-width: 620px) {
    :root {
        --v51-featured-top:20px;
        --v51-experience-top: 33px;
        --v51-experience-bottom: 27px;
        --v51-news-top: 29px;
        --v51-news-bottom: 20px;
        --v51-quick-top: 14px;
        --v51-quick-bottom: 30px
    }
}

@media(prefers-reduced-motion:reduce) {
    .page-home main>section[data-v51-transition]::before,.page-home main>section[data-v51-transition]::after,.page-home .reveal {
        transition: none!important
    }
}

/* User can disable section motion from admin. */
.v51-transitions-off main>section[data-v51-transition]::before, .v51-transitions-off main>section[data-v51-transition]::after {
    display: none!important
}

/* Subtle content continuation: only active after V51 runtime is ready, so no-JS pages stay fully visible. */
.page-home.v51-motion-ready main>section[data-v51-transition]>.container {
    opacity: .965;
    transform: translateY(10px);
    transition: opacity .62s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1)
}

.page-home.v51-motion-ready main>section[data-v51-transition].v51-transition-in>.container {
    opacity: 1;
    transform: none
}

.v51-transitions-off main>section[data-v51-transition]>.container {
    opacity: 1!important;
    transform: none!important;
    transition: none!important
}

@media(prefers-reduced-motion:reduce) {
    .page-home.v51-motion-ready main>section[data-v51-transition]>.container {
        opacity: 1!important;
        transform: none!important;
        transition: none!important
    }
}

/* === v52.css === */
/* WEKYPSYR V52 — verified progressive transparent/fixed header */
:root {
    --v52-header-shade: 0;
    --v52-header-line: 0
}

.site-header.v8-header, body.page-secondary>header.site-header.v8-header {
    position: fixed!important;
    top: 0!important;
    left: 0!important;
    right: 0!important;
    width: 100%!important;
    background-image: none!important;
    background-color: rgba(2,3,5,0)!important;
    -webkit-backdrop-filter: blur(0px) saturate(1.05)!important;
    backdrop-filter: blur(0px) saturate(1.05)!important;
    border-bottom-color: rgba(255,255,255,0)!important;
    box-shadow: none!important;
    transition: background-color .10s linear,backdrop-filter .10s linear,border-color .10s linear,box-shadow .10s linear!important;
}

/* Neutralize the historical dark veil at the top; it grows only while scrolling. */
.site-header.v8-header::before {
    opacity: var(--v52-header-shade)!important;
    transition: opacity .10s linear!important
}

.site-header.v8-header::after {
    opacity: var(--v52-header-line)!important;
    transition: opacity .10s linear!important
}

.site-header.v8-header.scrolled {
    background-image: none!important
}

.site-header.v8-header.mega-active,.site-header.v8-header:has(.v21-open) {
    background-color: rgba(2,3,5,.97)!important;
    -webkit-backdrop-filter: blur(24px) saturate(1.22)!important;
    backdrop-filter: blur(24px) saturate(1.22)!important
}

@media(max-width: 900px) {
    .site-header.v8-header,body.page-secondary>header.site-header.v8-header {
        position:fixed!important
    }
}

/* V54 cross-page correction: clear fixed-header space and remove obsolete motion chrome. */
.breadcrumb {
    display: none!important
}

.v17-scanline::after {
    display: none!important;
    animation: none!important;
    opacity: 0!important
}

/* Keep the closed mobile drawer inside the viewport's paint box at tablet widths. */
.mobile-menu.v8-mobile-menu {
    transform: none!important;
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    pointer-events: none;
    transition: clip-path .55s var(--ease),visibility 0s linear .55s;
}

.menu-open .mobile-menu.v8-mobile-menu {
    clip-path: inset(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

@media(min-width: 901px) {
    body.page-secondary main>section.page-hero.v33-secondary-hero, body.page-secondary.page-content main>section.page-hero.v33-secondary-hero, body.page-secondary.page-support main>section.page-hero.v33-secondary-hero, body.page-support main>section.page-hero.v33-secondary-hero, body.page-secondary.page-software main>section.page-hero.v33-secondary-hero, body.page-secondary.page-utility main>section.page-hero.v33-secondary-hero, body.page-secondary.page-catalog main>section.page-hero.v33-secondary-hero {
        padding:106px 0 28px!important;
    }
}

@media(min-width: 901px) and (max-width:1180px) {
    .v18-footer-grid {
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr)!important;
        gap: 32px!important;
    }
}

/* Privacy is a reading surface: one calm column instead of full-width stage blocks. */
body.page-privacy .v50-rich-mount {
    max-width: 1040px;
    margin: 0 auto;
    padding: 6px 32px 88px
}

body.page-privacy .v50-rich-meta {
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 0 20px;
    border-bottom: 1px solid rgba(143,107,53,.22);
    gap: 22px;
    color: #8f949d;
    font-size: 12px
}

body.page-privacy .v50-rich-section {
    max-width: 880px;
    margin: 0 auto;
    padding: 0;
    border-top: 0
}

body.page-privacy .v50-rich-policy {
    display: grid;
    grid-template-columns: minmax(210px,.38fr) minmax(0,1fr);
    gap: 48px;
    max-width: none;
    padding: 36px 0;
    border-bottom: 1px solid rgba(255,255,255,.075)
}

body.page-privacy .v50-rich-policy .v50-rich-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.28;
    letter-spacing: -.02em
}

body.page-privacy .v50-rich-policy .v50-rich-body {
    max-width: none;
    margin: 0;
    color: #aeb4bb;
    font-size: 15px;
    line-height: 1.85
}

body.page-privacy .v50-rich-section:has(.v50-rich-note) {
    padding-top: 48px
}

body.page-privacy .v50-rich-section:has(.v50-rich-note)>.v50-rich-inner {
    max-width: 880px;
    padding: 0
}

body.page-privacy .v50-rich-note {
    padding: 34px 36px;
    border-color: rgba(143,107,53,.36);
    border-radius: 8px;
    background: rgba(143,107,53,.045)
}

body.page-privacy .v50-rich-note .v50-rich-eyebrow {
    margin-bottom: 12px;
    color: #b89459;
    font-size: 10px
}

body.page-privacy .v50-rich-note .v50-rich-title {
    max-width: 18ch;
    margin-bottom: 16px;
    font-size: clamp(30px,3vw,42px);
    line-height: 1.1
}

body.page-privacy .v50-rich-note .v50-rich-body {
    font-size: 14px;
    line-height: 1.8
}

body.page-privacy [data-v50-rich-fallback="privacy.html"] .v8-policy {
    max-width: 880px;
    margin: 0 auto
}

body.page-privacy [data-v50-rich-fallback="privacy.html"] .v8-policy article {
    max-width: none
}

@media(max-width: 900px) {
    body.page-privacy .v50-rich-mount {
        padding:4px 20px 64px
    }

    body.page-privacy .v50-rich-meta {
        padding: 20px 0 16px;
        gap: 9px 18px
    }

    body.page-privacy .v50-rich-policy {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 28px 0
    }

    body.page-privacy .v50-rich-policy .v50-rich-title {
        font-size: 21px
    }

    body.page-privacy .v50-rich-policy .v50-rich-body {
        font-size: 14.5px;
        line-height: 1.8
    }

    body.page-privacy .v50-rich-section:has(.v50-rich-note) {
        padding-top: 36px
    }

    body.page-privacy .v50-rich-section:has(.v50-rich-note)>.v50-rich-inner {
        padding: 0
    }

    body.page-privacy .v50-rich-note {
        padding: 26px 24px
    }
}

/* === v54-rc.css === */
/* WEKYPSYR V54 RC1 motion, brand and interaction lock. Loaded last. */
:root {
    --gold: #bb9a58;
    --gold-bright: #c7aa6a;
    --gold-deep: #8f7441;
    --ease: cubic-bezier(.16,1,.3,1);
    --motion-fast: 200ms;
    --motion-normal: 320ms;
    --motion-reveal: 620ms;
}

html {
    scroll-padding-top: 80px
}

a,button,input,select,textarea {
    transition-timing-function: var(--ease)
}

:focus-visible {
    outline-color: #c7aa6a!important;
    outline-offset: 3px
}

.reveal {
    transform: translateY(20px);
    transition-duration: var(--motion-reveal);
    transition-timing-function: var(--ease)
}

.reveal-delay-1 {
    transition-delay: 80ms
}

.reveal-delay-2 {
    transition-delay: 160ms
}

.reveal-delay-3 {
    transition-delay: 240ms
}

.v50-rich-title,.v34-journal-article h1,.v34-journal-body {
    overflow-wrap: anywhere;
    word-break: break-word
}

.search-top {
    min-width: 0
}

.search-top input {
    width: 100%;
    min-width: 0
}

/* RC2 restores the V53 Mega Menu visual hierarchy while v21-nav.js exclusively
   owns state. Historical :hover/focus-within selectors are explicitly neutralized. */
@media(min-width: 901px) {
    .site-header.v8-header .nav-item[data-mega-item]:not(.v54-mega-active):hover>.mega-panel, .site-header.v8-header .nav-item[data-mega-item]:not(.v54-mega-active):focus-within>.mega-panel, .site-header.v8-header .nav-item[data-mega-item]:not(.v54-mega-active)>.mega-panel {
        display:block!important;
        opacity: 0!important;
        visibility: hidden!important;
        pointer-events: none!important;
        transform: translateY(-8px)!important
    }

    .site-header.v8-header .nav-item[data-mega-item].v54-mega-active>.mega-panel {
        display: block!important;
        opacity: 1!important;
        visibility: visible!important;
        pointer-events: auto!important;
        transform: translateY(0)!important;
        transition: opacity 260ms cubic-bezier(.16,1,.3,1),transform 300ms cubic-bezier(.16,1,.3,1),visibility 0s!important
    }

    .site-header.v8-header .language-menu:not(.v54-language-active):hover>.submenu-language, .site-header.v8-header .language-menu:not(.v54-language-active):focus-within>.submenu-language, .site-header.v8-header .language-menu:not(.v54-language-active)>.submenu-language {
        opacity: 0!important;
        visibility: hidden!important;
        pointer-events: none!important;
        transform: translateY(8px)!important
    }

    .site-header.v8-header .language-menu.v54-language-active>.submenu-language {
        opacity: 1!important;
        visibility: visible!important;
        pointer-events: auto!important;
        transform: translateY(0)!important
    }

    .site-header.v8-header .submenu-language>.language-current, .site-header.v8-header .submenu-language>button {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 12px 13px;
        border: 0;
        background: transparent;
        color: #fff;
        text-align: left
    }

    .site-header.v8-header .submenu-language>button:disabled {
        cursor: not-allowed;
        color: #73777e
    }
}

.rc-back-to-top {
    position: fixed;
    z-index: 750;
    right: clamp(16px,2vw,28px);
    bottom: clamp(16px,2vw,28px);
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(187,154,88,.34);
    border-radius: 50%;
    background: rgba(8,10,14,.86);
    color: #d0b879;
    box-shadow: 0 12px 34px rgba(0,0,0,.28);
    opacity: 0;
    transform: translateY(12px) scale(.98);
    visibility: hidden;
    pointer-events: none;
    backdrop-filter: blur(10px);
    transition: opacity 280ms var(--ease),transform 280ms var(--ease),visibility 280ms
}

.rc-back-to-top.is-visible {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto
}

.rc-back-to-top:hover {
    border-color: #bb9a58;
    background: #12120f;
    color: #fff;
    transform: translateY(-2px)
}

.rc-back-to-top:active {
    transform: scale(.97)
}

@media(max-width: 767px) {
    .reveal {
        transform:translateY(16px);
        transition-duration: 520ms
    }

    .rc-back-to-top {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px
    }

    .v50-rich-inner {
        padding-inline:20px}
}

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

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

    .reveal {
        opacity: 1!important;
        transform: none!important
    }
}

/* === v54-rc3-preview.css === */
/* WEKYPSYR V54 RC3 ChatGPT preview — selective visual uplift.
   Goal: dark precision industrial + champagne titanium + editorial product storytelling.
   This layer is intentionally loaded LAST and does not replace the V54 nav controller. */
:root {
    --rc3-ink: #050607;
    --rc3-ink-2: #090b0f;
    --rc3-graphite: #11141a;
    --rc3-graphite-2: #161a21;
    --rc3-gold: #bb9a58;
    --rc3-gold-hi: #d4bc84;
    --rc3-gold-dim: rgba(187,154,88,.18);
    --rc3-line: rgba(255,255,255,.09);
    --rc3-line-gold: rgba(187,154,88,.23);
    --rc3-text: #f1f0eb;
    --rc3-muted: #9ca1aa;
    --rc3-ease: cubic-bezier(.16,1,.3,1);
    --rc3-glass: rgba(11,13,17,.74);
}

/* ---------- Brand atmosphere / page continuity ---------- */
body {
    background: var(--rc3-ink);
    color: var(--rc3-text);
    font-family: system-ui,-apple-system,"Segoe UI","Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif;
}

body:not(.page-home)::before {
    content: "";
    position: fixed;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(70% 56% at 88% 8%,rgba(187,154,88,.055),transparent 58%), radial-gradient(55% 42% at 8% 46%,rgba(88,103,125,.045),transparent 66%), linear-gradient(180deg,#050607 0%,#080a0d 45%,#050607 100%);
}

body:not(.page-home)::after {
    content: "";
    position: fixed;
    z-index: -1;
    inset: -15vh -8vw;
    pointer-events: none;
    opacity: .46;
    background: linear-gradient(132deg,transparent 0 23%,rgba(255,255,255,.012) 23.2% 23.8%,transparent 24% 46%,rgba(187,154,88,.016) 46.2% 46.7%,transparent 47%), linear-gradient(48deg,transparent 0 68%,rgba(255,255,255,.01) 68.2% 68.7%,transparent 69%);
    transform: translateZ(0);
}

main>section {
    position: relative;
    isolation: isolate
}

body.page-secondary main>.section::before, body.v9-product-page main>section::before, body.page-product-generic main>section::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: -1px;
    height: clamp(72px,9vw,150px);
    pointer-events: none;
    background: linear-gradient(180deg,rgba(187,154,88,.018),transparent 72%);
    opacity: .72;
}

/* ---------- Typography language ---------- */
.page-hero .eyebrow,.v8-section-heading .eyebrow,.v12-section-head .eyebrow,.v13-section-head .eyebrow, .v13-bento-copy>span,.v13-focus-copy .eyebrow,.mega-intro>span {
    color: var(--rc3-gold-hi)!important;
    font-weight: 760!important;
    letter-spacing: .16em!important;
}

.page-hero h1,.page-hero .display,.v12-section-head h2,.v13-section-head h2,.v8-section-heading h2 {
    text-wrap: balance;
    letter-spacing: -.045em!important;
}

.page-hero .lead {
    max-width: 720px;
    color: #aeb2b8!important
}

/* ---------- Titanium status bar / header ---------- */
@media(min-width: 901px) {
    .site-header.v8-header, body.page-secondary>header.site-header.v8-header {
        background:transparent!important;
        -webkit-backdrop-filter: none!important;
        backdrop-filter: none!important;
        border-bottom-color: transparent!important;
        box-shadow: none!important;
    }

    .site-header.v8-header .header-inner {
        width: min(calc(100% - 48px),1540px)!important;
        height: 64px!important;
        margin: 7px auto 0!important;
        padding-inline:18px!important; border: 1px solid transparent;
        border-radius: 20px;
        background: rgba(5,6,8,0);
        box-shadow: 0 0 0 rgba(0,0,0,0);
        transition: background .32s var(--rc3-ease),border-color .32s var(--rc3-ease),box-shadow .32s var(--rc3-ease),backdrop-filter .32s var(--rc3-ease)!important;
    }

    .site-header.v8-header.scrolled .header-inner, .site-header.v8-header.mega-active .header-inner, .site-header.v8-header:has(.v21-open) .header-inner {
        background: linear-gradient(115deg,rgba(16,19,24,.82),rgba(8,10,13,.72) 58%,rgba(38,31,20,.26));
        border-color: rgba(255,255,255,.10);
        border-bottom-color: rgba(187,154,88,.22);
        -webkit-backdrop-filter: blur(22px) saturate(1.15);
        backdrop-filter: blur(22px) saturate(1.15);
        box-shadow: 0 18px 56px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035);
    }

    .site-header.v8-header .nav-item[data-mega-item] {
        min-height: 64px!important
    }

    .site-header.v8-header .nav-link,.site-header.v8-header .lang-btn {
        font-weight: 680!important;
        letter-spacing: .025em
    }

    .site-header.v8-header .icon-btn {
        border-radius: 12px;
        transition: background .22s,border-color .22s,color .22s,transform .22s
    }

    .site-header.v8-header .icon-btn:hover {
        background: rgba(255,255,255,.045);
        color: var(--rc3-gold-hi);
        transform: translateY(-1px)
    }

    /* Same controller/state, new surface only. */
    .site-header.v8-header .nav-item[data-mega-item]>.mega-panel {
        top: 78px!important;
        padding: 18px 24px 24px!important;
        background: transparent!important;
        border: 0!important;
        box-shadow: none!important;
    }

    .site-header.v8-header .nav-item[data-mega-item].v54-mega-active>.mega-panel, .site-header.v8-header .nav-item[data-mega-item].v21-open>.mega-panel {
        background: transparent!important;
    }

    .site-header.v8-header .mega-panel>.mega-wrap {
        width: min(calc(100% - 48px),1500px)!important;
        margin: 0 auto!important;
        padding: 30px 32px!important;
        border: 1px solid rgba(255,255,255,.10);
        border-top-color: rgba(187,154,88,.26);
        border-radius: 22px;
        background: linear-gradient(125deg,rgba(15,18,23,.92),rgba(7,9,12,.91) 56%,rgba(35,28,18,.38));
        -webkit-backdrop-filter: blur(26px) saturate(1.16);
        backdrop-filter: blur(26px) saturate(1.16);
        box-shadow: 0 30px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.035);
        overflow: hidden;
    }

    .site-header.v8-header .mega-panel>.mega-wrap::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .46;
        background: radial-gradient(55% 90% at 96% 10%,rgba(187,154,88,.10),transparent 62%),linear-gradient(128deg,transparent 56%,rgba(255,255,255,.012) 56.4% 57%,transparent 57.4%);
    }

    .mega-intro,.mega-product-grid,.mega-link-grid {
        position: relative;
        z-index: 1
    }

    .mega-intro h2 {
        font-size: clamp(28px,2.4vw,40px)!important;
        letter-spacing: -.045em!important
    }

    .mega-product-card,.mega-link-grid>a {
        border-color: rgba(255,255,255,.08)!important;
        background: rgba(255,255,255,.018)!important;
        border-radius: 14px!important;
        transition: transform .28s var(--rc3-ease),border-color .28s,background .28s!important;
    }

    .mega-product-card:hover,.mega-link-grid>a:hover {
        transform: translateY(-3px)!important;
        border-color: rgba(187,154,88,.30)!important;
        background: rgba(187,154,88,.035)!important;
    }
}

/* ---------- Product catalog: count-aware, stable CTA system ---------- */
.page-products .v8-catalog-grid {
    grid-template-columns: repeat(3,minmax(0,1fr))!important;
    gap: 18px!important;
}

.page-products .v8-catalog-grid[data-count="1"] {
    grid-template-columns: minmax(0,920px)!important;
    justify-content: center
}

.page-products .v8-catalog-grid[data-count="2"] {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    max-width: 1180px;
    margin-inline:auto}

.page-products .v8-catalog-grid[data-count="3"] {
    grid-template-columns: repeat(3,minmax(0,1fr))!important
}

.page-products .v8-catalog-card {
    border-color: rgba(255,255,255,.085)!important;
    border-radius: 18px!important;
    overflow: hidden;
    background: linear-gradient(145deg,rgba(17,20,26,.84),rgba(7,9,12,.94))!important;
    box-shadow: inset 0 1px rgba(255,255,255,.025);
    transition: transform .34s var(--rc3-ease),border-color .34s,box-shadow .34s!important;
}

.page-products .v8-catalog-card:hover {
    transform: translateY(-5px);
    border-color: rgba(187,154,88,.25)!important;
    box-shadow: 0 26px 70px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.035)
}

.page-products .v8-catalog-media {
    background: radial-gradient(circle at 50% 43%,rgba(187,154,88,.075),rgba(56,72,99,.05) 38%,transparent 66%)!important
}

.page-products .v8-catalog-info {
    padding: 24px 24px 26px!important
}

.page-products .v8-catalog-info>div:last-child {
    display: grid!important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-items: stretch!important;
    gap: 10px!important;
    margin-top: 22px!important;
}

.page-products .v8-catalog-info>div:last-child>a, .page-products .v8-catalog-info>div:last-child>button, .page-products .v8-catalog-info>div:last-child>.v18-buy-now {
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    width: 100%!important;
    min-height: 44px!important;
    height: 44px!important;
    margin: 0!important;
    padding: 0 14px!important;
    border-radius: 10px!important;
    line-height: 1!important;
    font-weight: 680!important;
    box-sizing: border-box!important;
}

.page-products .v8-catalog-info>div:last-child>button {
    border-color: rgba(187,154,88,.34)!important;
    background: rgba(187,154,88,.055)!important;
    color: #e3d2a9!important
}

.page-products .v8-catalog-info>div:last-child>.v18-buy-now {
    grid-column: 1/-1;
    background: var(--rc3-gold)!important;
    border-color: var(--rc3-gold)!important;
    color: #080908!important
}

/* ---------- News: human-confirmed safe padding + complete covers ---------- */
.page-home .v12-news-meta {
    padding-inline:28px!important;box-sizing: border-box
}

.page-home .v12-news-card h3 {
    margin: 0!important;
    padding: 12px 28px 26px!important;
    box-sizing: border-box
}

.page-home .v12-news-media {
    background: #050608!important
}

.page-home .v12-news-media img {
    object-fit: contain!important;
    object-position: center top!important
}

.page-news .v26-news-card img,.page-news .v36-news-cover-placeholder {
    object-fit: contain!important;
    object-position: center top!important;
    background: #050608!important
}

.page-news .v26-news-card .meta {
    padding: 18px 30px 10px!important;
    box-sizing: border-box
}

.page-news .v26-news-card h2 {
    display: flex!important;
    align-items: center!important;
    min-height: 3.2em!important;
    margin: 0!important;
    padding: 8px 30px 24px!important;
    box-sizing: border-box
}

.page-news .v26-news-card p {
    padding: 0 30px 28px!important;
    box-sizing: border-box
}

.page-home .v12-news-card {
    overflow: hidden
}

/* ---------- Homepage quick access: remove decorative numbering and rebalance content ---------- */
.page-home .v11-quick-grid>a {
    position: relative!important;
    display: flex!important;
    flex-direction: column!important;
    align-items: center!important;
    justify-content: center!important;
    gap: 12px!important;
    padding: 30px 68px!important;
    text-align: center!important;
    box-sizing: border-box!important;
}

.page-home .v11-quick-grid>a>span {
    display: none!important
}

.page-home .v11-quick-grid>a>strong {
    font-size: clamp(17px,1.35vw,21px)!important;
    line-height: 1.3!important
}

.page-home .v11-quick-grid>a>small {
    max-width: 28ch!important;
    font-size: 12px!important;
    line-height: 1.65!important
}

.page-home .v11-quick-grid>a>b {
    position: absolute!important;
    right: 32px!important;
    top: 50%!important;
    grid-row: auto!important;
    grid-column: auto!important;
    transform: translateY(-50%)!important
}

.page-home .v11-quick-grid>a:hover>b {
    transform: translate(4px,-50%)!important
}

/* ---------- Selective titanium-glass modules, not full-site glass ---------- */
.v8-support-hub>a, .page-products .product-filter, .page-query .v8-query-card, .page-query .v8-query-result {
    border-color: rgba(255,255,255,.085)!important;
    background: linear-gradient(145deg,rgba(16,19,24,.72),rgba(8,10,13,.86))!important;
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.v8-support-hub>a:hover {
    border-color: rgba(187,154,88,.28)!important;
    background: linear-gradient(145deg,rgba(18,21,27,.82),rgba(24,20,14,.50))!important
}

.page-products .product-filter {
    display: flex!important;
    flex-wrap: wrap!important;
    gap: 8px!important;
    width: max-content;
    max-width: 100%;
    padding: 7px!important;
    border: 1px solid rgba(255,255,255,.075)!important;
    border-radius: 14px!important
}

.page-products .product-filter .filter-btn {
    border-radius: 9px!important
}

/* ---------- Homepage: keep the approved opening, refine hierarchy ---------- */
.page-home .v13-experience {
    background: radial-gradient(70% 58% at 78% 20%,rgba(187,154,88,.045),transparent 66%),linear-gradient(180deg,#050607,#080a0d 54%,#050607)!important;
}

.page-home .v13-bento-card {
    border-color: rgba(255,255,255,.075)!important;
    box-shadow: inset 0 1px rgba(255,255,255,.025)
}

.page-home .v13-bento-card:hover {
    border-color: rgba(187,154,88,.24)!important
}

.page-home .v13-section-head h2,.page-home .v12-section-head h2 {
    letter-spacing: -.055em!important
}

/* ---------- Product detail: editorial chapter feel without rewriting content ---------- */
.v9-product-page .section,.page-product-generic .section {
    border-top-color: rgba(255,255,255,.05)!important
}

.v9-product-page [class*="eyebrow"],.page-product-generic [class*="eyebrow"] {
    letter-spacing: .16em
}

.v9-product-page .v18-detail-shop,.page-product-generic .v18-detail-shop {
    border-top-color: rgba(187,154,88,.18)!important
}

/* ---------- Download empty state looks intentional ---------- */
.v42-empty-download {
    margin: 0;
    padding: 24px 26px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.018);
    color: #9ca2aa;
    line-height: 1.7;
}

/* ---------- Mobile / tablet ---------- */
@media(max-width: 1180px) {
    .page-products .v8-catalog-grid,.page-products .v8-catalog-grid[data-count="3"] {
        grid-template-columns:repeat(2,minmax(0,1fr))!important
    }
}

@media(max-width: 900px) {
    .site-header.v8-header .header-inner {
        width:calc(100% - 28px)!important
    }

    .page-products .v8-catalog-grid,.page-products .v8-catalog-grid[data-count] {
        grid-template-columns: minmax(0,1fr)!important;
        max-width: none!important
    }

    .page-products .v8-catalog-info>div:last-child {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width: 520px) {
    .page-products .v8-catalog-info>div:last-child {
        grid-template-columns:1fr!important
    }

    .page-products .v8-catalog-info>div:last-child>.v18-buy-now {
        grid-column: auto
    }

    .page-home .v12-news-meta {
        padding-inline:12px!important}
}

@media(prefers-reduced-motion:reduce) {
    .site-header.v8-header .header-inner,.mega-product-card,.mega-link-grid>a,.page-products .v8-catalog-card {
        transition: none!important
    }
}

@media(max-width: 900px) {
    .page-home .v11-quick-grid>a {
        min-height:128px!important;
        padding: 26px 58px!important
    }

    .page-home .v11-quick-grid>a>b {
        right: 24px!important
    }
}

@media(max-width: 620px) {
    .page-home .v11-quick-grid>a {
        padding:24px 50px!important
    }

    .page-home .v11-quick-grid>a>b {
        right: 20px!important
    }
}

/* === v54-rc5.css === */
/* WEKYPSYR V54 RC5 — focused repair layer. Loaded last; no Mega Menu controller changes. */
/* --------------------------------------------------------------------------
   HEADER: one desktop geometry + one active/open state across every page.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
    .site-header.v8-header, body.page-secondary > header.site-header.v8-header {
        --header-h:68px!important;
        height: 68px!important;
        min-height: 68px!important;
    }

    .site-header.v8-header .header-inner {
        height: 56px!important;
        min-height: 56px!important;
        margin: 6px auto 0!important;
        padding-top: 0!important;
        padding-bottom: 0!important;
        align-items: center!important;
    }

    .site-header.v8-header .nav-group, .site-header.v8-header .nav-item[data-mega-item], .site-header.v8-header .nav-link {
        height: 56px!important;
        min-height: 56px!important;
    }

    .site-header.v8-header .header-logo {
        width: 58px!important;
        height: 56px!important;
    }

    .site-header.v8-header .nav-link {
        position: relative!important;
        padding-top: 0!important;
        padding-bottom: 0!important;
        align-items: center!important;
    }

    .site-header.v8-header .nav-item[data-mega-item] > .nav-link::after, .site-header.v8-header .nav-link.simple::after {
        content: ""!important;
        position: absolute!important;
        left: 0!important;
        right: 0!important;
        bottom: 8px!important;
        width: auto!important;
        height: 2px!important;
        border-radius: 999px!important;
        background: #bb9a58!important;
        background-image: none!important;
        box-shadow: none!important;
        opacity: 0!important;
        transform: scaleX(0)!important;
        transform-origin: center!important;
        transition: opacity .18s ease,transform .18s ease!important;
    }

    .site-header.v8-header .nav-item[data-mega-item] > .nav-link::after {
        left: 19px!important;
        /* excludes the chevron from the underline width */
    }

    .site-header.v8-header .nav-item[data-mega-item]:hover > .nav-link, .site-header.v8-header .nav-item[data-mega-item]:focus-within > .nav-link, .site-header.v8-header .nav-item[data-mega-item].is-open > .nav-link, .site-header.v8-header .nav-item[data-mega-item].v21-open > .nav-link, .site-header.v8-header .nav-item[data-mega-item].v54-mega-active > .nav-link, .site-header.v8-header .nav-link.simple[aria-current="page"], .site-header.v8-header .nav-link.simple.is-current {
        color: #d4bc84!important;
    }

    .site-header.v8-header .nav-item[data-mega-item]:hover > .nav-link::after, .site-header.v8-header .nav-item[data-mega-item]:focus-within > .nav-link::after, .site-header.v8-header .nav-item[data-mega-item].is-open > .nav-link::after, .site-header.v8-header .nav-item[data-mega-item].v21-open > .nav-link::after, .site-header.v8-header .nav-item[data-mega-item].v54-mega-active > .nav-link::after, .site-header.v8-header .nav-link.simple[aria-current="page"]::after, .site-header.v8-header .nav-link.simple.is-current::after {
        opacity: 1!important;
        transform: scaleX(1)!important;
        background: #bb9a58!important;
        background-image: none!important;
    }

    .site-header.v8-header .nav-item[data-mega-item] > .mega-panel {
        top: 68px!important;
    }
}

/* --------------------------------------------------------------------------
   PRODUCT LIST: one cohesive action module for every card.
   Price / [details + cart] / full-width primary buy action.
   -------------------------------------------------------------------------- */
.page-products .v8-catalog-info > div:last-child {
    display: grid!important;
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    grid-auto-flow: row!important;
    align-items: stretch!important;
    gap: 10px 12px!important;
}

.page-products .v8-catalog-info > div:last-child > .v18-price {
    grid-column: 1 / -1!important;
    order: 1!important;
    width: 100%!important;
    margin: 0!important;
    padding: 0 0 2px!important;
    justify-self: start!important;
    align-self: end!important;
}

.page-products .v8-catalog-info > div:last-child > a {
    grid-column: 1!important;
    order: 2!important;
    width: 100%!important;
    min-width: 0!important;
    margin: 0!important;
    align-self: stretch!important;
}

.page-products .v8-catalog-info > div:last-child > button[data-add-cart] {
    grid-column: 2!important;
    order: 3!important;
    width: 100%!important;
    min-width: 0!important;
    margin: 0!important;
    align-self: stretch!important;
}

.page-products .v8-catalog-info > div:last-child > .v18-buy-now {
    grid-column: 1 / -1!important;
    order: 4!important;
    width: 100%!important;
    margin: 0!important;
    align-self: stretch!important;
}

.page-products .v8-catalog-info > div:last-child > a, .page-products .v8-catalog-info > div:last-child > button {
    min-height: 52px!important;
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    line-height: 1.2!important;
}

@media (max-width: 520px) {
    .page-products .v8-catalog-info > div:last-child {
        grid-template-columns:1fr!important;
    }

    .page-products .v8-catalog-info > div:last-child > .v18-price, .page-products .v8-catalog-info > div:last-child > a, .page-products .v8-catalog-info > div:last-child > button[data-add-cart], .page-products .v8-catalog-info > div:last-child > .v18-buy-now {
        grid-column: 1!important;
    }
}

/* === v54-rc6.css === */
/* WEKYPSYR V54 RC6 — targeted human-acceptance repair layer.
   Loaded after RC5. No media compression, no Mega Menu controller/state changes. */
/* --------------------------------------------------------------------------
   MEGA MENU VERTICAL RHYTHM
   Human review found the floating panel visually too far below the status bar.
   Keep the controller and top anchor intact; only tighten the surface gap.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
    .site-header.v8-header .nav-item[data-mega-item] > .mega-panel {
        top:68px!important;
        padding-top: 6px!important;
        padding-bottom: 18px!important;
    }
}