:root { color-scheme: dark; --bg: #080b10; --bg-soft: #0c1016; --ink: #f5f6f8; --muted: #9ca5b2; --line: rgba(255,255,255,.12); --line-strong: rgba(255,255,255,.2); --accent: #ff6a26; --light-surface: #e2e3e4; --light-surface-alt: #d5d7d9; --light-ink: #13161b; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
.products-experience { position: relative; margin: 0; color: var(--ink); background: var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; line-height: 1.5; }
.products-experience a { color: inherit; }
.partners-under-hero { padding: 18px 0 20px; background: var(--bg-soft); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.partners-under-hero .partners-slider { width: min(1240px, calc(100% - 48px)); margin: auto; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.partners-under-hero .partners-slider::before { left: 0; background: linear-gradient(to right, #080b10, rgba(8,11,16,0)); }
.partners-under-hero .partners-slider::after { right: 0; background: linear-gradient(to left, #080b10, rgba(8,11,16,0)); }
.partners-under-hero .partners-track { width: calc(170px * 18); animation-duration: 44s; }
.partners-under-hero .partner-logo { height: 46px; flex-basis: 170px; padding: 0 18px; }
.partners-under-hero .partner-img { max-height: 32px; filter: grayscale(100%) invert(1) opacity(.58); mix-blend-mode: screen; }
.partners-under-hero .partner-logo:hover .partner-img { filter: grayscale(100%) invert(1) opacity(.72); transform: none; }
.partners-under-hero .partner-img-featured { max-width: 150px; max-height: 40px; }
.products-header { font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
.products-header { position: fixed; inset: 0 0 auto; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(8,11,16,.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.header-shell { position: relative; display: flex; align-items: center; justify-content: space-between; width: min(1240px, calc(100% - 48px)); min-height: 84px; margin: auto; }
.brand { display: inline-flex; height: 44px; align-items: center; color: var(--ink); font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-decoration: none; }
.brand span::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: .38em; }
.products-header nav { display: flex; align-items: center; gap: 24px; color: var(--muted); font-size: .84rem; font-weight: 700; }
.products-header nav a { color: inherit; text-decoration: none; }
.products-header nav a:hover { color: var(--ink); }
.products-header .nav-product-context { position: static; display: none; min-height: 26px; padding-left: 16px; border-left: 1px solid var(--line); color: var(--muted); font-size: .64rem; letter-spacing: .13em; transform: none; }
.products-header .nav-product-context.is-visible { display: inline-flex; opacity: 1; visibility: visible; }
.header-cta { padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink) !important; }
.language-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 34px; margin-left: 18px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: .68rem; font-weight: 800; letter-spacing: .12em; line-height: 1; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.language-toggle:hover, .language-toggle:focus-visible { border-color: var(--line-strong); background: rgba(255,255,255,.06); color: var(--ink); outline: none; }
.products-header .language-toggle { flex: 0 0 auto; }
.products-hero, .products-cta, .products-experience footer { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.products-hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); align-items: center; gap: clamp(1rem, 3vw, 3rem); padding: 140px 0 112px; overflow: clip; }
.hero-shell { width: 100%; }
.eyebrow { margin: 0 0 20px; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.products-hero h1, .products-hero h2 { max-width: 860px; margin: 0; font-size: clamp(4rem, 5.8vw, 6.5rem); font-weight: 760; line-height: .99; letter-spacing: -.062em; text-wrap: balance; }
.hero-lead { margin: 30px 0 42px; color: var(--muted); font-size: 1.12rem; }
.hero-links { display: flex; gap: 24px; }
.hero-links a { display: inline-flex; gap: 14px; color: var(--muted); font-weight: 700; text-decoration: none; }
.hero-links span { color: var(--accent); }
.hero-acoustic-media { position: relative; width: calc(100% + clamp(72px, 8vw, 140px)); aspect-ratio: 16 / 9; margin-left: clamp(-140px, -8vw, -72px); align-self: center; overflow: hidden; isolation: isolate; background: var(--bg); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 16%, #000 38%, #000 90%, rgba(0,0,0,.7) 97%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 16%, #000 38%, #000 90%, rgba(0,0,0,.7) 97%, transparent 100%); }
.hero-acoustic-media::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, var(--bg) 0%, rgba(8,11,16,.62) 17%, transparent 49%), linear-gradient(0deg, var(--bg) 0%, transparent 19%, transparent 81%, var(--bg) 100%); }
.hero-acoustic-poster, .hero-acoustic-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right center; mix-blend-mode: lighten; transform: scale(1.06); transform-origin: right center; }
.hero-acoustic-poster { z-index: 1; }
.hero-acoustic-video { z-index: 2; opacity: 1; transition: opacity .42s ease; }
.hero-acoustic-video.is-loop-fade { opacity: 0; }
.scroll-cue { position: absolute; left: 50%; bottom: 24px; z-index: 5; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .2em; text-decoration: none; transform: translateX(-50%); animation: scroll-cue-float 2.4s ease-in-out infinite; }
.scroll-cue-mouse { position: relative; display: block; width: 24px; height: 38px; border: 2px solid currentColor; border-radius: 14px; }
.scroll-cue-mouse span { position: absolute; top: 7px; left: 50%; width: 4px; height: 8px; border-radius: 999px; background: currentColor; transform: translateX(-50%); animation: scroll-cue-wheel 1.7s ease-in-out infinite; }
@keyframes scroll-cue-float { 0%, 100% { opacity: .55; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, 6px); } }
@keyframes scroll-cue-wheel { 0%, 100% { opacity: .35; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, 7px); } }
.sequence-section { position: relative; height: 780vh; background: var(--light-surface); color: var(--light-ink); }
.bitrack-sequence { background: radial-gradient(ellipse at 50% 38%, rgba(255,255,255,.08), transparent 56%), linear-gradient(180deg, #c6c4c5 0%, #c3c0c1 54%, #bbb9ba 100%); }
.bidetect-sequence { background: radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.1), transparent 58%), linear-gradient(180deg, #d9d8d8 0%, #d3d2d2 56%, #c0c0c0 100%); }
.sequence-sticky { position: sticky; top: 0; height: 100svh; min-height: 650px; overflow: hidden; }
.sequence-shell { position: relative; width: 100%; height: 100%; margin: auto; }
.sequence-copy { position: absolute; left: max(24px, calc((100% - 1240px) / 2)); bottom: clamp(92px, 12%, 140px); z-index: 3; max-width: 280px; color: #13161b; text-shadow: 0 2px 18px rgba(226,227,228,.9); }
.sequence-copy .eyebrow { color: #4f5862; }
.sequence-copy h2 { margin: 0; font-size: clamp(1.9rem, 2.5vw, 2.8rem); line-height: 1; letter-spacing: -.055em; }
.sequence-visual { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.sequence-poster, .sequence-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sequence-poster { filter: drop-shadow(0 30px 28px rgba(0,0,0,.18)); }
.sequence-canvas { opacity: 0; transition: opacity .2s ease; }
.sequence-visual.is-ready .sequence-canvas { opacity: 1; }
.sequence-visual.is-ready .sequence-poster { opacity: 0; }
.sequence-loading { position: absolute; left: 50%; top: 50%; z-index: 3; display: inline-flex; gap: 9px; align-items: center; padding: 9px 13px; border: 1px solid rgba(19,22,27,.14); border-radius: 999px; background: rgba(226,227,228,.72); color: #313942; font-size: .72rem; font-weight: 750; opacity: 0; transform: translate(-50%, -50%); transition: opacity .2s ease; pointer-events: none; }
.sequence-section.is-loading .sequence-loading { opacity: 1; }
.sequence-loading-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: sequence-pulse 1s ease-in-out infinite; }
.bidetect-sequence .sequence-loading { display: none; }
@keyframes sequence-pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.sequence-caption { position: absolute; inset: 0; z-index: 3; color: #13161b; font-size: clamp(1.05rem, 1.45vw, 1.65rem); font-weight: 650; line-height: 1.08; letter-spacing: -.035em; pointer-events: none; }
.sequence-caption span { position: absolute; display: block; width: min(280px, 20vw); margin: 0; opacity: 0; transform: var(--caption-from, translateY(18px)); transition: opacity .32s ease, transform .48s cubic-bezier(.22,.8,.3,1); }
.sequence-caption span:nth-child(1) { right: max(24px, calc((100% - 1240px) / 2)); top: clamp(112px, 16%, 164px); --caption-from: translateY(-24px); text-align: right; }
.sequence-caption span:nth-child(2) { right: max(24px, calc((100% - 1240px) / 2)); bottom: 10%; --caption-from: translateX(28px); text-align: right; }
.sequence-caption span:nth-child(3) { right: max(24px, calc((100% - 1240px) / 2)); top: clamp(112px, 16%, 164px); --caption-from: translateY(-24px); text-align: right; }
.sequence-caption span:nth-child(4) { left: max(24px, calc((100% - 1240px) / 2)); top: 16%; bottom: auto; --caption-from: translateX(-28px); text-align: left; }
.sequence-caption span:nth-child(5) { right: max(24px, calc((100% - 1240px) / 2)); bottom: 10%; --caption-from: translateY(28px); text-align: right; }
.sequence-caption span.is-visible { opacity: 1; transform: translate(0, 0); }
.sequence-caption strong { font-weight: 850; }
.sequence-progress { position: absolute; right: 24px; top: 50%; z-index: 4; width: 2px; height: 110px; background: rgba(19,22,27,.22); transform: translateY(-50%); }
.sequence-progress span { display: block; width: 100%; height: 0; background: var(--accent); }
.products-cta { padding: 150px 0; }
.products-cta h2 { max-width: 820px; margin: 0 0 38px; font-size: clamp(3.5rem, 6.5vw, 7rem); line-height: .98; letter-spacing: -.065em; text-wrap: balance; }
.cta-button { display: inline-flex; gap: 14px; align-items: center; padding: 15px 20px; border: 1px solid var(--line); border-radius: 999px; font-weight: 750; text-decoration: none; }
.cta-button span { color: var(--accent); }
.products-experience footer { display: flex; justify-content: space-between; padding: 28px 0 38px; color: var(--muted); font-size: .84rem; }
footer a { text-decoration: none; }
body > footer { width: min(1240px, calc(100% - 48px)); display: flex; justify-content: space-between; margin-inline: auto; padding: 28px 0 38px; border-top: 1px solid var(--line); color: var(--muted); font-size: .84rem; }
body > footer a:hover { color: var(--ink); }
@media (max-width: 1180px) {
    .products-hero { grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); }
    .products-hero h1, .products-hero h2 { font-size: clamp(3.7rem, 5.8vw, 5.35rem); }
    .hero-acoustic-media { margin-left: -88px; }
}
@media (max-width: 900px) {
    .header-shell, .products-hero, .products-cta, .products-experience footer, .sequence-shell { width: min(100% - 32px, 1240px); }
    .products-header nav { gap: 12px; font-size: .72rem; }
    .products-header nav a:not(.header-cta) { display: none; }
    .products-header .language-toggle { margin-left: 10px; }
    .navbar .language-toggle { position: absolute; right: 52px; margin-left: 0; }
    .products-hero { min-height: 82svh; grid-template-columns: 1fr; align-items: end; gap: 1rem; padding: 120px 0 72px; }
    .products-hero h1, .products-hero h2 { max-width: 760px; font-size: clamp(3.2rem, 12vw, 5.8rem); line-height: 1; }
    .hero-acoustic-media { order: 2; width: calc(100% + 24px); height: auto; min-height: 210px; margin: -12px -12px 0 auto; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 10%, #000 27%, #000 84%, rgba(0,0,0,.72) 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 10%, #000 27%, #000 84%, rgba(0,0,0,.72) 96%, transparent 100%); }
    .hero-acoustic-media::after { background: linear-gradient(90deg, var(--bg) 0%, rgba(8,11,16,.58) 12%, transparent 27%, transparent 76%, rgba(8,11,16,.38) 94%, var(--bg) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 26%, transparent 82%, var(--bg) 100%); }
    .hero-acoustic-poster, .hero-acoustic-video { transform: scale(1.1); }
    .hero-acoustic-video { display: none; }
    html[lang="en"] .bidetect-sequence .sequence-copy { top: clamp(120px, 18vh, 160px); }
    .scroll-cue { bottom: 12px; }
    .sequence-section { height: 540vh; }
    .sequence-sticky { min-height: 600px; }
    .sequence-copy { left: 16px; right: 16px; top: 92px; bottom: auto; max-width: 230px; }
    .sequence-copy h2 { font-size: clamp(1.85rem, 7vw, 2.6rem); }
    .sequence-visual { transform: none; }
    .partners-under-hero { padding: 14px 0 16px; }
    .partners-under-hero .partners-slider { width: calc(100% - 32px); }
    .partners-under-hero .partners-track { width: calc(142px * 18); }
    .partners-under-hero .partner-logo { flex-basis: 142px; height: 38px; padding: 0 12px; }
    .partners-under-hero .partner-img { max-height: 27px; filter: grayscale(100%) invert(1) opacity(.58); mix-blend-mode: screen; }
    .partners-under-hero .partner-img-featured { max-width: 132px; max-height: 32px; }
    .sequence-caption { font-size: 1.15rem; line-height: 1.08; }
    .sequence-caption span { width: min(190px, 44vw); }
    .sequence-caption span:nth-child(1) { left: auto; right: 16px; top: auto; bottom: 18%; }
    .sequence-caption span:nth-child(2) { left: auto; right: 16px; top: auto; bottom: 18%; }
    .sequence-caption span:nth-child(3) { left: auto; right: 16px; top: auto; bottom: 18%; text-align: right; }
    .sequence-caption span:nth-child(4) { left: 16px; right: auto; top: auto; bottom: 18%; text-align: left; }
    .sequence-caption span:nth-child(5) { left: auto; right: 16px; top: auto; bottom: 18%; text-align: right; }
    .sequence-progress { right: 10px; height: 82px; }
    .products-cta { padding: 100px 0; }
}
@media (max-width: 520px) {
    .brand { height: 42px; font-size: .72rem; }
    .sequence-section { height: 500vh; }
    .sequence-visual { transform: none; }
    .products-experience footer { flex-direction: column; gap: 10px; }
    body > footer { width: calc(100% - 32px); flex-direction: column; gap: 10px; }
    .products-hero h1, .products-hero h2 { font-size: clamp(2.9rem, 13.5vw, 4.4rem); letter-spacing: -.055em; }
    .hero-lead { margin: 24px 0 30px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sequence-section { height: auto; }
    .sequence-sticky { position: relative; height: auto; min-height: 0; padding: 72px 0; }
    .sequence-shell { min-height: 100svh; }
    .sequence-caption span { position: relative; opacity: 1; transform: none; margin-top: 12px; }
    .sequence-progress { display: none; }
    .sequence-loading { display: none; }
    .hero-acoustic-video { display: none; }
}