.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--text); font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.button--primary { --cta-x: 50%; --cta-y: 50%; border-color: rgb(216 255 79 / 0.72); background: radial-gradient(circle at var(--cta-x) var(--cta-y), #f6ffd0 0, var(--accent) 34%, #9cf7e7 100%); color: var(--accent-ink); box-shadow: 0 12px 34px rgb(216 255 79 / 0.14); }
.button--secondary { background: rgb(0 0 0 / 0.18); backdrop-filter: blur(12px); }
.button--quiet { border-color: transparent; color: var(--text-muted); }
.button--outline { min-height: 36px; padding: 0 14px; border-color: rgb(255 255 255 / 0.28); background: transparent; color: var(--text); font-size: var(--text-xs); box-shadow: none; }
.button--outline:hover { border-color: rgb(216 255 79 / 0.5); color: var(--accent); }
.nav-link { height: 100%; padding: 0 15px; border: 0; background: transparent; color: var(--text-soft); font-size: var(--text-sm); cursor: pointer; }
.nav-link:hover, .nav-link[aria-current="page"], .nav-link[aria-expanded="true"] { color: var(--text); }
.icon-pill, .menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: rgb(0 0 0 / 0.28); color: var(--text); font-size: var(--text-xs); font-weight: 700; cursor: pointer; }
.menu-toggle { display: none; width: 44px; padding: 0; }
.mega-menu { position: fixed; z-index: var(--z-menu); top: var(--header-height); right: 0; left: 0; display: grid; grid-template-columns: minmax(220px, 0.75fr) minmax(0, 2fr); gap: 64px; visibility: hidden; width: 100%; min-height: 260px; padding: 42px max(32px, calc((100vw - 1280px) / 2)); transform: translateY(-10px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgb(0 0 0 / 0.96); opacity: 0; pointer-events: none; }
.mega-menu[data-open="true"] { visibility: visible; transform: translateY(0); opacity: 1; pointer-events: auto; }
.mega-menu__intro span, .mega-menu__intro strong { display: block; }
.mega-menu__intro span { margin-bottom: 18px; color: var(--accent); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; }
.mega-menu__intro strong { max-width: 300px; font-size: var(--text-2xl); line-height: 1.18; }
.mega-menu__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mega-menu__links a { min-height: 88px; padding: 14px; border-bottom: 1px solid var(--line); }
.mega-menu__links strong, .mega-menu__links span { display: block; }
.mega-menu__links strong { margin-bottom: 5px; font-size: var(--text-sm); }
.mega-menu__links span { color: var(--text-muted); font-size: var(--text-xs); }
.language-control { position: relative; }
.language-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 2px; border: 0; background: transparent; color: var(--text-soft); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0; cursor: pointer; }
.language-trigger:hover, .language-trigger[aria-expanded="true"] { color: var(--text); }
.language-trigger__icon { display: inline-grid; place-items: center; width: 21px; height: 24px; color: var(--text-muted); font-size: 0.66rem; }
.language-trigger__current { min-width: 2.4ch; color: var(--text); font-family: var(--font-mono); font-size: var(--text-xs); }
.language-menu { position: absolute; top: calc(100% + 10px); right: -10px; width: 158px; padding: 9px 0; border: 0; border-radius: var(--radius-sm); background: rgb(5 6 7 / 0.94); box-shadow: 0 20px 60px rgb(0 0 0 / 0.42); }
.language-menu button { position: relative; width: 100%; min-height: 34px; padding: 0 16px 0 28px; border: 0; background: transparent; color: var(--text-muted); font-size: var(--text-xs); text-align: left; cursor: pointer; }
.language-menu button::before { content: ""; position: absolute; top: 50%; left: 13px; width: 4px; height: 4px; transform: translateY(-50%); border-radius: 50%; background: transparent; }
.language-menu button:hover { color: var(--text); }
.language-menu button[aria-checked="true"] { color: var(--text); }
.language-menu button[aria-checked="true"]::before { background: var(--accent); }
.mobile-menu { position: fixed; z-index: 80; inset: 0; display: none; overflow-y: auto; padding: 20px; background: var(--ink-1000); }
.mobile-menu.is-open { display: block; }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__head button { width: 44px; height: 44px; border: 0; background: transparent; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; padding-top: 48px; }
.mobile-menu nav > * { display: flex; align-items: center; min-height: 52px; padding: 0 8px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font-size: var(--text-xl); text-align: left; }
.mobile-menu nav > .mobile-language-control { display: block; padding: 0; border-bottom: 0; }
.mobile-language-control > button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0 8px; border: 0; background: transparent; color: var(--text); font-size: var(--text-xl); text-align: left; }
.mobile-language-control > button strong { color: var(--accent); font-family: var(--font-mono); font-size: var(--text-sm); }
.mobile-language-control > div { display: grid; gap: 2px; padding: 8px 0 14px; }
.mobile-language-control > div button { position: relative; min-height: 44px; padding: 0 8px 0 24px; border: 0; background: transparent; color: var(--text-soft); text-align: left; }
.mobile-language-control > div button::before { content: ""; position: absolute; top: 50%; left: 8px; width: 4px; height: 4px; transform: translateY(-50%); border-radius: 50%; background: transparent; }
.mobile-language-control > div button[aria-checked="true"] { color: var(--text); }
.mobile-language-control > div button[aria-checked="true"]::before { background: var(--accent); }
.footer-languages button { position: relative; min-width: auto; min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--text-muted); font-size: var(--text-xs); cursor: pointer; }
.footer-languages button:hover, .footer-languages button[aria-checked="true"] { color: var(--text); }
.footer-languages button[aria-checked="true"]::after { content: ""; position: absolute; right: 0; bottom: 3px; left: 0; height: 1px; background: var(--accent); opacity: 0.7; }
.segmented { display: inline-flex; gap: 4px; margin-bottom: 24px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.04); }
.segmented button, .enterprise-tabs button, .showcase-filters button { min-height: 44px; padding: 0 17px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); cursor: pointer; }
.segmented button[aria-selected="true"], .enterprise-tabs button[aria-selected="true"], .showcase-filters button[aria-pressed="true"] { background: var(--text); color: var(--ink-1000); }
[data-media-id] { position: relative; overflow: hidden; background-color: var(--ink-800); color: var(--text-muted); }
[data-media-state="planned"], [data-media-state="missing"], [data-media-state="failed"] { border: 1px solid rgb(255 255 255 / 0.1); background-image: radial-gradient(circle at 24% 22%, rgb(216 255 79 / 0.12), transparent 24%), radial-gradient(circle at 78% 72%, rgb(107 216 228 / 0.11), transparent 26%), linear-gradient(135deg, rgb(255 255 255 / 0.04), transparent 42%); background-size: cover; }
[data-media-state="planned"]::before, [data-media-state="missing"]::before, [data-media-state="failed"]::before { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 38%, rgb(0 0 0 / 0.16)); pointer-events: none; }
[data-media-state="missing"]::after, [data-media-state="failed"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 0 46%, rgb(255 255 255 / 0.08) 46% 47%, transparent 47%); pointer-events: none; }
[data-media-state="failed"] { border-color: rgb(255 111 120 / 0.38); }
[data-media-visual="poster"] { background-image: radial-gradient(circle at 50% 36%, rgb(255 211 106 / 0.15), transparent 22%), linear-gradient(180deg, rgb(255 255 255 / 0.055), rgb(0 0 0 / 0.32)), linear-gradient(125deg, #15100e, #10161b 48%, #070809); }
[data-media-visual="stage"] { background-image: radial-gradient(ellipse at 50% 84%, rgb(216 255 79 / 0.16), transparent 30%), linear-gradient(180deg, #171a1f, #08090b); }
[data-media-visual="film-frame"] { background-image: linear-gradient(90deg, rgb(0 0 0 / 0.38) 0 7%, transparent 7% 93%, rgb(0 0 0 / 0.38) 93%), radial-gradient(circle at 62% 40%, rgb(107 216 228 / 0.13), transparent 28%), linear-gradient(135deg, #151719, #08090b); }
[data-media-visual="material-card"] { background-image: linear-gradient(145deg, rgb(255 255 255 / 0.07), transparent 38%), radial-gradient(circle at 28% 22%, rgb(255 129 117 / 0.14), transparent 24%), linear-gradient(135deg, #17191b, #0b0c0e); }
[data-media-visual="gallery-card"] { background-image: radial-gradient(circle at 50% 40%, rgb(247 247 244 / 0.12), transparent 28%), linear-gradient(160deg, #191b20, #090a0c); }
[data-media-visual="console"] { background-image: linear-gradient(rgb(107 216 228 / 0.08) 1px, transparent 1px), linear-gradient(90deg, rgb(107 216 228 / 0.07) 1px, transparent 1px), linear-gradient(145deg, #101820, #08090b); background-size: 36px 36px, 36px 36px, cover; }
[data-media-state="ready"] { border-color: transparent; background: transparent !important; background-image: none !important; }
[data-media-state="ready"]::before, [data-media-state="ready"]::after { display: none !important; content: none !important; }
.modal { position: fixed; z-index: var(--z-modal); inset: 0; display: grid; place-items: center; overflow-y: auto; padding: 24px; background: rgb(0 0 0 / 0.72); backdrop-filter: blur(8px); }
.modal__panel { position: relative; width: min(100%, 960px); padding: 42px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(0 0 0 / 0.9); box-shadow: 0 30px 100px rgb(0 0 0 / 0.65); }
.modal__panel > span, .app-copy > span { color: var(--accent); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; }
.modal__panel h2 { margin: 12px 0 18px; }
.modal__close { position: absolute; z-index: 2; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: rgb(0 0 0 / 0.3); cursor: pointer; }
.modal__panel--compact { max-width: 620px; }
.modal__panel--story ol { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; padding: 0; list-style: none; }
.modal__panel--story li { padding: 14px 8px; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.modal__panel--app { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(260px, 0.95fr); align-items: center; gap: 36px; width: min(100%, 820px); min-height: 500px; }
.app-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.app-platform-action { min-height: 44px; padding: 0 16px; border: 1px solid rgb(216 255 79 / 0.36); border-radius: var(--radius-pill); background: rgb(216 255 79 / 0.07); color: var(--text); font-size: var(--text-sm); font-weight: 700; cursor: pointer; box-shadow: inset 0 0 24px rgb(216 255 79 / 0.025); }
.app-platform-action:hover, .app-platform-action:focus-visible { border-color: rgb(216 255 79 / 0.66); background: rgb(216 255 79 / 0.11); }
.app-platform-action[aria-pressed="true"] { border-color: rgb(216 255 79 / 0.72); background: rgb(216 255 79 / 0.13); box-shadow: inset 0 0 28px rgb(216 255 79 / 0.06), 0 8px 28px rgb(216 255 79 / 0.08); }
.app-qr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.app-qr { display: grid; place-items: end start; aspect-ratio: 1; padding: 14px; border-radius: var(--radius-md); }
.app-platform-card { opacity: 0.94; filter: saturate(0.95); }
.app-platform-card.is-focused { border-color: rgb(216 255 79 / 0.46); opacity: 1; filter: none; box-shadow: 0 14px 34px rgb(0 0 0 / 0.3), inset 0 0 24px rgb(216 255 79 / 0.045); }
.app-qr span { position: relative; z-index: 3; color: var(--text); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; }
.modal__panel--contact { width: min(100%, 720px); }
.modal__panel--contact form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 26px; }
.modal__panel--contact label, .modal__panel--contact input, .modal__panel--contact select, .modal__panel--contact textarea { grid-column: span 1; }
.modal__panel--contact label[for="modal-message"], .modal__panel--contact textarea, .modal__panel--contact .button, .field-error { grid-column: 1 / -1; }
.field-error { color: var(--danger); font-size: var(--text-xs); }