/* ============================================================
QUANTIUM — Premium Design System
Vibe: Ethereal Glass (SaaS/AI) + Warm Gold from brand
Fonts: Geist (body) + Clash Display (heading) + JetBrains Mono
============================================================ */
/* Fonts loaded via in HTML (non-blocking, preconnected).
Previously: @import — synchronous and render-blocking — now removed. */
:root {
/* Surface */
--bg: #050505;
--bg-elevated: #0a0a0a;
--bg-card: #0d0d0f;
--bg-card-hover: #111114;
--bg-glass: rgba(13,13,15,.65);
/* Borders */
--border: rgba(255,255,255,.06);
--border-strong: rgba(255,255,255,.12);
--border-gold: rgba(245,201,123,.18);
/* Text — tuned for WCAG AA contrast on OLED black */
--text: #ece8e0; /* body base — 13.8:1 on --bg */
--text-bright: #fcf8f0; /* headings/bright — 16.2:1 */
--text-muted: #a39a8a; /* secondary/body paragraph — 7.1:1 (AA) */
--text-subtle: #80776a; /* meta/mono/labels — 4.8:1 (AA large) */
/* Brand Gold (from logo) */
--gold: #f5c97b;
--gold-deep: #d4a054;
--gold-hot: #ffe5a8;
--gold-glow: rgba(245,201,123,.15);
--gold-glow-strong: rgba(245,201,123,.25);
/* Radii — exaggerated squircle */
--r-2xl: 2rem;
--r-xl: 1.25rem;
--r-lg: 1rem;
--r-md: .75rem;
--r-pill: 100px;
/* Type */
--font: 'Geist', system-ui, -apple-system, sans-serif;
--font-display: 'Clash Display', 'Geist', sans-serif;
--mono: 'JetBrains Mono', monospace;
/* Motion — custom spring-like bezier */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
--duration: 700ms;
--duration-fast: 400ms;
}
/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none }
img { display: block; max-width: 100% }
ul, ol { list-style: none }
button, input, textarea, select { font-family: inherit; border: 0; outline: 0 }
/* === Layout === */
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px }
.section { padding: 72px 0; position: relative }
@media (max-width: 768px) { .section { padding: 48px 0 } .container { padding: 0 18px } }
/* === Typography (Clash Display for headings) === */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; color: var(--text-bright) }
h1 { font-size: clamp(48px, 7vw, 84px); line-height: 1.02 }
h2 { font-size: clamp(36px, 4.5vw, 56px); line-height: 1.06 }
h3 { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.15 }
h4 { font-size: 18px; line-height: 1.3 }
p { color: var(--text-muted); line-height: 1.7 }
.text-gold { color: var(--gold) }
.text-bright { color: var(--text-bright) }
/* === Eyebrow badge (pill) === */
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--mono); font-size: 10px; font-weight: 500;
letter-spacing: .2em; text-transform: uppercase;
color: var(--gold); padding: 6px 16px;
border-radius: var(--r-pill);
border: 1px solid rgba(245,201,123,.2);
background: rgba(245,201,123,.04);
}
/* === Section head === */
.section-head { margin-bottom: 56px }
.section-head p { max-width: 560px; font-size: 17px; margin-top: 16px }
.section-head-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap }
/* ============================================================
DOUBLE-BEZEL CARD SYSTEM (Doppelrand)
Outer shell + inner core = haptic depth
============================================================ */
.bezel {
background: rgba(255,255,255,.02);
border: 1px solid var(--border);
border-radius: var(--r-2xl);
padding: 6px;
transition: border-color var(--duration-fast) var(--ease-spring);
}
.bezel:hover { border-color: var(--border-strong) }
.bezel-inner {
background: var(--bg-card);
border-radius: calc(2rem - 6px);
padding: 32px;
box-shadow: inset 0 1px 1px rgba(255,255,255,.06);
position: relative; overflow: hidden;
}
/* Simple card (non-bezel) */
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-xl);
transition: all var(--duration-fast) var(--ease-spring);
overflow: hidden;
}
.card:hover { border-color: var(--border-strong); background: var(--bg-card-hover) }
/* ============================================================
BUTTONS — Island Architecture
============================================================ */
.btn {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font); font-weight: 600; font-size: 15px;
padding: 14px 24px; border-radius: var(--r-pill);
cursor: pointer; position: relative;
transition: all var(--duration-fast) var(--ease-spring);
transform: translateZ(0);
}
.btn:active { transform: scale(.98) }
.btn-gold {
background: var(--gold); color: #050505;
}
.btn-gold:hover { background: var(--gold-hot); box-shadow: 0 0 40px var(--gold-glow) }
.btn-outline {
background: transparent; color: var(--text);
border: 1px solid var(--border-strong);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold) }
.btn-sm { padding: 10px 18px; font-size: 13px }
.btn-lg { padding: 18px 32px; font-size: 16px }
/* Button trailing icon circle */
.btn .icon-circle {
width: 28px; height: 28px; border-radius: 50%;
background: rgba(0,0,0,.12);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
transition: transform var(--duration-fast) var(--ease-spring);
}
.btn:hover .icon-circle { transform: translate(2px, -1px) scale(1.05) }
/* ============================================================
NAVIGATION — Floating Glass Pill
============================================================ */
.nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 14px 24px }
.nav {
max-width: 1240px; margin: 0 auto;
background: var(--bg-glass); backdrop-filter: blur(20px) saturate(1.6);
border: 1px solid var(--border);
border-radius: var(--r-pill);
padding: 8px 8px 8px 24px;
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.nav > .container {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; width: 100%;
}
.nav-logo {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-display); font-size: 18px; font-weight: 600;
color: var(--text-bright); white-space: nowrap; flex-shrink: 0;
}
.nav-logo svg { width: 26px; height: 26px; flex-shrink: 0 }
.nav-links {
display: flex; gap: 2px;
flex: 1; justify-content: center;
min-width: 0;
}
.nav-links a {
font-size: 13px; font-weight: 500; color: rgba(245,245,244,.92);
padding: 8px 12px; border-radius: var(--r-pill);
white-space: nowrap;
transition: all var(--duration-fast) var(--ease-spring);
}
.nav-links a:hover, .nav-links a.active { color: var(--gold); background: rgba(255,255,255,.08) }
.nav-cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0 }
.nav-cta .btn { white-space: nowrap }
.nav .btn-sm { padding: 10px 18px; font-size: 13px }
/* Language switcher in nav — minimal, matches nav-link weight */
.lang-switch{position:relative;display:inline-flex;margin-right:4px}
.lang-switch-trigger{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:0;background:transparent;color:rgba(245,245,244,.78);font-family:var(--font);font-size:13px;font-weight:500;line-height:1;cursor:pointer;border-radius:var(--r-pill);transition:color .15s,background .15s;white-space:nowrap;letter-spacing:.02em}
.lang-switch-trigger:hover{color:var(--gold);background:rgba(255,255,255,.06)}
.lang-switch.open .lang-switch-trigger{color:var(--gold);background:rgba(255,255,255,.08)}
.lang-switch .lang-globe-svg{display:inline-block;opacity:.7;flex-shrink:0}
.lang-switch-trigger:hover .lang-globe-svg,.lang-switch.open .lang-globe-svg{opacity:1}
.lang-switch .lang-chevron{transition:transform .2s var(--ease-spring);opacity:.55;margin-left:1px;flex-shrink:0}
.lang-switch-trigger:hover .lang-chevron{opacity:.85}
.lang-switch.open .lang-chevron{transform:rotate(180deg);opacity:1}
.lang-switch-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:170px;background:rgba(13,13,15,.96);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:5px;box-shadow:0 12px 32px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(-4px) scale(.97);transform-origin:top right;transition:opacity .18s var(--ease-spring),transform .2s var(--ease-spring),visibility .2s;z-index:50;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.lang-switch.open .lang-switch-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.lang-switch-menu a,.lang-switch-current{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:rgba(245,245,244,.88);font-family:var(--font);font-size:13px;font-weight:500;text-decoration:none;transition:background .15s,color .15s;cursor:pointer}
.lang-switch-menu a:hover{background:rgba(255,255,255,.06);color:var(--gold)}
.lang-switch-current{color:rgba(245,245,244,.5);cursor:default;background:transparent}
.lang-switch-current:hover{background:transparent;color:rgba(245,245,244,.5)}
.lang-switch-menu .lang-code{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--gold);min-width:22px;opacity:.85}
.lang-switch-menu .lang-name{flex:1}
.lang-switch-menu .lang-tick{color:var(--gold);margin-left:auto;opacity:.65}
.lang-switch-current .lang-code{color:rgba(245,201,123,.5)}
@media (max-width: 760px){
.lang-switch{margin-right:0}
.lang-switch-trigger{padding:7px 8px;gap:4px}
.lang-switch-trigger .lang-label{display:none}
.lang-switch-trigger .lang-chevron{display:none}
.lang-switch-menu{min-width:160px}
}
/* Language switcher in footer (compact text links) */
.lang-switch-foot{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.lang-switch-foot a{color:var(--text-subtle);text-decoration:none;padding:2px 4px;border-radius:4px;transition:color .15s}
.lang-switch-foot a:hover{color:var(--gold)}
.lang-switch-foot a.active{color:var(--text);font-weight:600}
.lang-switch-foot .sep{color:var(--text-subtle);opacity:.5}
@media (max-width: 1100px) {
.nav-links a { font-size: 12px; padding: 7px 10px }
}
@media (max-width: 960px) {
.nav-links { display: none }
.nav-wrap { padding: 10px 14px }
.nav { padding: 8px 8px 8px 20px }
}
/* Atom logo SVG */
.atom-logo .orbit { stroke: var(--gold); stroke-width: .7; fill: none; opacity: .6 }
.atom-logo .dot { fill: var(--gold-hot) }
.atom-logo .letter { fill: var(--gold-hot); font-family: var(--font); font-weight: 800; font-size: 28px }
/* ============================================================
HERO
============================================================ */
.hero {
min-height: 100dvh; display: flex; align-items: center;
padding: 140px 0 100px; position: relative; overflow: hidden;
}
.hero-bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 900px 600px at 55% 20%, rgba(245,201,123,.10), transparent 60%),
radial-gradient(ellipse 700px 500px at 25% 70%, rgba(212,160,84,.05), transparent 50%),
radial-gradient(ellipse 400px 400px at 80% 80%, rgba(100,80,50,.04), transparent 50%);
}
.hero .container { position: relative; z-index: 2; text-align: center }
.hero-sub { font-size: 18px; max-width: 620px; margin: 24px auto 40px; color: var(--text-muted) }
/* ============================================================
CHIPS / FILTERS
============================================================ */
.chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 12px; border-radius: var(--r-pill);
font-size: 12.5px; font-weight: 500; color: var(--text-muted);
border: 1px solid var(--border);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-spring);
white-space: nowrap;
}
.chip:hover { border-color: var(--border-strong); color: var(--text) }
.chip.active { background: var(--text-bright); color: var(--bg); border-color: var(--text-bright) }
.chips { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 0 }
.chips::-webkit-scrollbar { display: none }
/* Sticky filter bar — used on gallery, blog and other listing pages
so the filter chips remain accessible while scrolling through the feed */
.sticky-filter-bar {
position: sticky;
top: 88px;
z-index: 30;
padding: 8px 0 9px;
/* Centered pill: fit-content + auto margins so the bar wraps tight around chips */
width: fit-content;
max-width: calc(100% - 32px);
margin: 0 auto 12px;
background: rgba(8, 7, 5, 0.78);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--r-pill);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.sticky-filter-bar > .container { padding: 0 16px }
.sticky-filter-bar .chips { justify-content: center }
@media (max-width: 768px) {
.sticky-filter-bar { top: 76px; padding: 10px 0 12px }
.sticky-filter-bar .chips { flex-wrap: nowrap; overflow-x: auto; padding: 0 16px; scrollbar-width: none }
.sticky-filter-bar .chips::-webkit-scrollbar { display: none }
.sticky-filter-bar .chip { flex-shrink: 0 }
}
/* Inline single-row filter layout for gallery: Категория [chips] | Модель [chips] */
.filters-inline {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 8px;
justify-content: center;
}
.filter-cat-group, .filter-model-group {
display: inline-flex; align-items: center;
gap: 6px; flex-wrap: wrap;
}
.filter-model-group::before {
content: ""; display: inline-block; width: 1px; height: 18px;
background: rgba(255,255,255,.12); margin: 0 6px;
}
.filter-label {
font-family: var(--mono); font-size: 10px;
letter-spacing: .18em; text-transform: uppercase;
color: var(--text-subtle); margin-right: 4px;
}
.filter-model-group .chip.hidden { display: none }
@media (max-width: 820px) {
.filters-inline { gap: 4px 6px }
.filter-model-group::before { display: none }
.filter-cat-group, .filter-model-group { width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 4px 4px }
}
/* ============================================================
FEATURE-ALT — split layout: header row (text+image) then full-width examples
used on homepage CAPABILITIES section
============================================================ */
.feat-block { padding: 64px 0; border-top: 1px solid var(--border) }
.feat-block:first-of-type { border-top: none; padding-top: 32px }
.feat-alt-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.feat-alt-row.reverse .feat-alt-media { order: 2 }
.feat-alt-row.reverse .feat-alt-body { order: 1 }
.feat-alt-media {
position: relative;
border-radius: 24px;
overflow: hidden;
background: linear-gradient(135deg, rgba(245,201,123,.08), rgba(245,201,123,.02));
border: 1px solid rgba(245,201,123,.14);
aspect-ratio: 4 / 3;
}
.feat-alt-media > img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
}
.feat-alt-num {
display: inline-block;
font-family: var(--font-display);
font-size: 64px; font-weight: 700;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px var(--gold);
letter-spacing: -0.02em;
margin-bottom: 18px;
}
.feat-alt-body h3 {
font-family: var(--font-display);
font-size: 36px; font-weight: 600;
line-height: 1.1;
color: var(--text-bright);
margin-bottom: 14px;
}
.feat-alt-providers {
font-size: 13px;
color: var(--gold);
font-weight: 500;
letter-spacing: 0.02em;
margin-bottom: 18px;
}
.feat-alt-body p {
font-size: 16px;
line-height: 1.6;
color: var(--text-muted);
}
/* Examples row — full width below the header row */
.feat-alt-examples-row { margin-top: 32px }
.feat-alt-examples-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 14px;
}
.feat-alt-examples-title {
font-family: var(--mono); font-size: 10px;
letter-spacing: .2em; text-transform: uppercase;
color: var(--text-subtle);
}
.feat-alt-examples-link {
font-size: 13px; color: var(--gold);
display: inline-flex; align-items: center; gap: 4px;
}
.feat-alt-examples {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.feat-alt-example {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border);
background: var(--bg-card);
transition: transform .25s var(--ease-spring), border-color .2s;
}
.feat-alt-example:hover {
transform: translateY(-3px);
border-color: rgba(245,201,123,.4);
}
.feat-alt-example img,
.feat-alt-example video {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.feat-alt-example video { pointer-events: none; background: #050505; }
.feat-alt-example-label {
position: absolute;
left: 8px; bottom: 8px;
font-family: var(--mono);
font-size: 10px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
padding: 4px 9px; border-radius: 6px;
background: rgba(8,7,5,.78);
color: #fff;
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.1);
}
/* AI-chat examples — speech bubbles, not images */
.chat-examples {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.chat-mock {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 20px;
display: flex; flex-direction: column; gap: 12px;
transition: border-color .2s, transform .25s var(--ease-spring);
}
.chat-mock:hover { border-color: rgba(245,201,123,.3); transform: translateY(-2px) }
.chat-mock-head {
display: flex; align-items: center; gap: 8px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
margin-bottom: 4px;
}
.chat-mock-head .dot {
width: 8px; height: 8px; border-radius: 50%;
background: #4ade80; flex-shrink: 0;
box-shadow: 0 0 8px rgba(74,222,128,.6);
}
.chat-mock-head .label {
font-family: var(--mono); font-size: 10px;
letter-spacing: .12em; text-transform: uppercase;
color: var(--gold); font-weight: 600;
}
.chat-bubble {
font-size: 13px; line-height: 1.55;
padding: 10px 14px; border-radius: 12px;
max-width: 92%;
}
.chat-bubble.user {
align-self: flex-end;
background: rgba(245,201,123,.14);
color: var(--text-bright);
border-bottom-right-radius: 4px;
}
.chat-bubble.bot {
align-self: flex-start;
background: rgba(255,255,255,.04);
color: var(--text);
border: 1px solid rgba(255,255,255,.06);
border-bottom-left-radius: 4px;
}
.chat-bubble.bot strong { color: var(--text-bright); font-weight: 600 }
@media (max-width: 900px) {
.feat-block { padding: 48px 0 }
.feat-alt-row {
grid-template-columns: 1fr;
gap: 28px;
}
.feat-alt-row.reverse .feat-alt-media { order: 0 }
.feat-alt-row.reverse .feat-alt-body { order: 1 }
.feat-alt-num { font-size: 48px; margin-bottom: 12px }
.feat-alt-body h3 { font-size: 28px }
.feat-alt-examples { grid-template-columns: repeat(2, 1fr) }
.chat-examples { grid-template-columns: 1fr }
}
/* ============================================================
Q-POPUP — universal popup/lightbox for example tiles
chat / image / video / audio / text
============================================================ */
.q-popup{position:fixed;inset:0;background:rgba(2,1,0,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;z-index:100;padding:24px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.q-popup.open{display:flex}
.q-popup-shell{position:relative;width:min(820px,100%);max-height:88vh;background:#0d0c0a;border:1px solid var(--border);border-radius:24px;box-shadow:0 32px 80px rgba(0,0,0,.6);overflow:hidden;display:flex;flex-direction:column}
.q-popup-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:32px 32px 28px;overscroll-behavior:contain}
.q-popup-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:2}
.q-popup-close:hover{background:rgba(255,255,255,.18)}
.q-popup-head{margin-bottom:18px}
.q-popup-tag{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:var(--r-pill);background:rgba(245,201,123,.12);color:var(--gold);border:1px solid rgba(245,201,123,.3);font-weight:600}
.q-popup-chat{display:flex;flex-direction:column;gap:14px}
.q-popup-chat .chat-bubble{font-size:15px;line-height:1.7;padding:14px 18px;border-radius:14px;max-width:88%}
.q-popup-chat .chat-bubble.user{align-self:flex-end;background:rgba(245,201,123,.16);color:var(--text-bright);border-bottom-right-radius:6px}
.q-popup-chat .chat-bubble.bot{align-self:flex-start;background:rgba(255,255,255,.04);color:var(--text);border:1px solid rgba(255,255,255,.07);border-bottom-left-radius:6px}
.q-popup-figure{display:flex;flex-direction:column;gap:14px}
.q-popup-figure img{display:block;width:100%;max-height:60vh;object-fit:contain;border-radius:12px}
.q-popup-figure video{display:block;width:100%;max-height:60vh;border-radius:12px;background:#000}
.q-popup-figure figcaption{font-family:var(--mono);font-size:12px;color:var(--text-subtle);letter-spacing:.06em;text-align:center}
.q-popup-prompt{margin-top:4px;padding:14px 18px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px}
.q-popup-prompt-label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-subtle);margin-bottom:6px}
.q-popup-prompt p{font-family:var(--mono);font-size:13px;line-height:1.65;color:var(--text-bright);margin:0;white-space:pre-wrap}
.q-popup-audio{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 0}
.q-popup-audio-wave{width:100%;max-width:480px;aspect-ratio:5/1;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center}
.q-popup-audio-wave img{max-width:100%;max-height:100%;object-fit:contain;opacity:.85}
.q-popup-audio audio{width:100%;max-width:480px}
.q-popup-audio-stub{font-family:var(--mono);font-size:12px;color:var(--text-subtle);text-align:center;padding:14px 16px;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.12);border-radius:10px;max-width:480px;width:100%;line-height:1.5}
.q-popup-caption{font-size:14px;color:var(--text-muted);line-height:1.6;text-align:center;max-width:480px;margin:0}
.q-popup-text{font-size:15px;line-height:1.75;color:var(--text)}
.q-popup-video-placeholder{position:relative;width:100%;display:flex;align-items:center;justify-content:center;background:#000;border-radius:12px;overflow:hidden}
.q-popup-video-placeholder img{position:relative;z-index:1;opacity:.85;width:100%;max-height:60vh;object-fit:cover}
.q-popup-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;font-size:48px;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.7);pointer-events:none}
@media(max-width:640px){
/* QA-FIX (Issue 1): popup must be scrollable on mobile when content
exceeds viewport. Allow popup container to scroll, give shell a max-height
based on dvh (dynamic viewport — accounts for mobile browser chrome). */
.q-popup{padding:0;align-items:flex-start}
.q-popup-shell{max-height:100dvh;min-height:100dvh;width:100%;border-radius:0;border-left:0;border-right:0}
.q-popup-body{padding:64px 20px 32px;max-height:100dvh;-webkit-overflow-scrolling:touch}
.q-popup-close{position:fixed;top:12px;right:12px;width:44px;height:44px;font-size:24px;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10}
.q-popup-chat .chat-bubble{font-size:14px}
.q-popup-figure img,.q-popup-figure video,.q-popup-video-placeholder img{max-height:70vh}
}
@supports not (height: 100dvh){
@media(max-width:640px){
.q-popup-shell{max-height:100vh;min-height:100vh}
.q-popup-body{max-height:100vh}
}
}
/* Chat-mock button styling — these are now