@font-face {
  font-family: "Su Bricolage Latin";
  src: url("/assets/fonts/bricolage-grotesque-700-tr.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Su Bricolage Latin";
  src: url("/assets/fonts/bricolage-grotesque-800-tr.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Su Inter Latin";
  src: url("/assets/fonts/inter-400-tr.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Su Inter Latin";
  src: url("/assets/fonts/inter-500-tr.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Su Inter Latin";
  src: url("/assets/fonts/inter-600-tr.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Su Inter Cyrillic";
  src: url("/assets/fonts/inter-400-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-024F, U+0400-052F, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: "Su Inter Cyrillic";
  src: url("/assets/fonts/inter-600-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-024F, U+0400-052F, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: "Su Inter Cyrillic";
  src: url("/assets/fonts/inter-700-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-024F, U+0400-052F, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2DE0-2DFF, U+A640-A69F;
}

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #04121d;
  --ground-2: #082032;
  --panel: rgb(255 255 255 / 5%);
  --panel-strong: #0a2032;
  --claim-ground: #08212f;
  --stroke: rgb(255 255 255 / 11%);
  --ink: #eaf7ff;
  --ink-dim: #b6cfdd;
  --ink-faint: #9bbdd1;
  --crest: #57e3e8;
  --water: #17a6d4;
  --surface-translucent: rgb(4 18 29 / 78%);
  --surface-translucent-strong: rgb(4 18 29 / 88%);
  --main-surface: rgb(4 18 29 / 50%);
  --shadow: rgb(0 0 0 / 28%);
  --dialog-backdrop: rgb(0 5 10 / 82%);
  --wave-background-start: #04121d;
  --wave-background-end: #082032;
  --wave-layer-start: 20 135 184;
  --wave-layer-end: 10 66 101;
  --wave-shade: 0 6 14;
  --wave-crest: 87 227 232;
  --wave-bubble: 255 255 255;
  --max: 68rem;
  --font-body: "Su Inter Latin", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Su Bricolage Latin", "Su Inter Latin", ui-sans-serif, system-ui, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ground: #f4fafe;
  --ground-2: #ffffff;
  --panel: rgb(255 255 255 / 74%);
  --panel-strong: #ffffff;
  --claim-ground: #e8f6fb;
  --stroke: #c9dfe9;
  --ink: #06263a;
  --ink-dim: #315d73;
  --ink-faint: #466d80;
  --crest: #08779d;
  --water: #109bc6;
  --surface-translucent: rgb(255 255 255 / 82%);
  --surface-translucent-strong: rgb(255 255 255 / 92%);
  --main-surface: rgb(244 250 254 / 86%);
  --shadow: rgb(6 38 58 / 16%);
  --dialog-backdrop: rgb(6 30 44 / 58%);
  --wave-background-start: #f4fbff;
  --wave-background-end: #d9f2fb;
  --wave-layer-start: 104 207 226;
  --wave-layer-end: 33 145 187;
  --wave-shade: 42 104 132;
  --wave-crest: 9 118 156;
  --wave-bubble: 255 255 255;
}

:lang(ru) {
  --font-body: "Su Inter Cyrillic", "Segoe UI", Arial, sans-serif;
  --font-display: "Su Inter Cyrillic", "Segoe UI", Arial, sans-serif;
}
:lang(ru) h1, :lang(ru) h2, :lang(ru) h3 { font-weight: 700; }
:lang(ar) {
  --font-body: system-ui, -apple-system, "SF Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-display: system-ui, -apple-system, "SF Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}
:lang(zh-Hans) {
  --font-body: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-display: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 1rem/1.6 var(--font-body); -webkit-font-smoothing: antialiased; transition: background-color 160ms ease-out, color 160ms ease-out; }
a { color: var(--crest); text-underline-offset: 3px; }
bdi[dir="ltr"] { direction: ltr; unicode-bidi: isolate; }
h1, h2, h3, p, figcaption, bdi { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--crest); outline-offset: 3px; border-radius: 4px; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); contain: strict; white-space: nowrap; border: 0; }
.shell { inline-size: 100%; max-inline-size: var(--max); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); text-wrap: balance; letter-spacing: -0.03em; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(zh-Hans) h1, :lang(zh-Hans) h2, :lang(zh-Hans) h3 { letter-spacing: 0; }
.eyebrow { display: block; min-inline-size: 0; max-inline-size: 100%; color: var(--crest); overflow-wrap: anywhere; word-break: break-word; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
:lang(ar) .eyebrow, :lang(zh-Hans) .eyebrow { letter-spacing: 0; text-transform: none; }
.hero { position: relative; min-block-size: 100vh; min-block-size: 100svh; display: flex; flex-direction: column; overflow: hidden; }
#wave { position: fixed; inset: 0 0 auto; z-index: 0; inline-size: 100%; block-size: 100vh; block-size: 100lvh; display: block; pointer-events: none; }
body > header, body > main, body > footer { position: relative; z-index: 1; }
.topbar { display: flex; align-items: center; gap: .75rem; padding-block-start: 1.25rem; }
.brand { display: inline-flex; align-items: center; min-block-size: 44px; gap: .65rem; color: var(--ink); font-family: var(--font-display); font-weight: 700; text-decoration: none; }
.brand img { border-radius: 9px; }
.topbar-actions { margin-inline-start: auto; display: flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; justify-content: flex-end; inline-size: max-content; max-inline-size: 100%; gap: .4rem .7rem; }
.page-nav { display: flex; align-items: center; gap: .8rem; }
.page-nav a { display: inline-flex; align-items: center; min-inline-size: 0; max-inline-size: 100%; min-block-size: 44px; color: var(--ink-dim); text-decoration: none; overflow-wrap: normal; white-space: nowrap; font-size: .9rem; font-weight: 500; }
.page-nav a:hover { color: var(--ink); }
.display-controls { display: flex; flex: 0 0 auto; align-items: center; gap: .4rem; }
.theme-cycle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; inline-size: 44px; block-size: 44px; margin: 0; padding: 0; border: 1px solid var(--stroke); border-radius: 12px; background: var(--panel); color: var(--ink-dim); cursor: pointer; }
.theme-cycle:hover { color: var(--ink); border-color: var(--crest); background: var(--panel-strong); }
.theme-icon { display: none; inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon[data-theme-icon="auto"] path { fill: currentColor; stroke: none; opacity: .35; }
html[data-theme-preference="auto"] .theme-cycle [data-theme-icon="auto"], html[data-theme-preference="light"] .theme-cycle [data-theme-icon="light"], html[data-theme-preference="dark"] .theme-cycle [data-theme-icon="dark"] { display: block; }
.language-switcher { position: relative; z-index: 20; flex: 0 0 auto; align-self: center; inline-size: 4.65rem; max-inline-size: 100%; margin: 0; }
.language-switcher details { position: relative; inline-size: 100%; max-inline-size: 100%; }
.language-switcher summary { display: inline-flex; align-items: center; justify-content: center; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; min-block-size: 44px; gap: .32rem; padding: .4rem .45rem; border: 1px solid var(--stroke); border-radius: 11px; background: var(--panel); color: var(--ink); cursor: pointer; font-family: var(--font-body); font-size: .72rem; font-weight: 700; line-height: 1; list-style: none; }
.language-switcher summary::-webkit-details-marker { display: none; }
.language-switcher summary::after { content: ""; inline-size: .34rem; block-size: .34rem; flex: 0 0 auto; border-inline-end: 1.5px solid var(--crest); border-block-end: 1.5px solid var(--crest); transform: translateY(-.08rem) rotate(45deg); transition: transform 120ms ease-out; }
.language-switcher details[open] summary::after { transform: translateY(.08rem) rotate(225deg); }
.language-icon { inline-size: 15px; block-size: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }
.language-code { letter-spacing: .04em; }
.language-switcher ul { position: absolute; inset-block-start: calc(100% + .4rem); inset-inline-end: 0; z-index: 30; display: grid; inline-size: 9.5rem; max-inline-size: calc(100vw - 2.5rem); gap: .15rem; margin: 0; padding: .4rem; border: 1px solid var(--stroke); border-radius: 14px; background: var(--ground-2); box-shadow: 0 14px 36px var(--shadow); list-style: none; }
.language-switcher li { min-inline-size: 0; margin: 0; padding: 0; }
.language-switcher a { display: flex; align-items: center; justify-content: space-between; min-inline-size: 0; max-inline-size: 100%; min-block-size: 44px; gap: .75rem; padding: .55rem .7rem; border: 1px solid transparent; border-radius: 9px; color: var(--ink-dim); text-align: start; text-decoration: none; overflow-wrap: anywhere; font-family: var(--font-body); font-size: .88rem; }
.language-switcher a:lang(en), .language-switcher a:lang(tr), .language-switcher a:lang(de) { font-family: "Su Inter Latin", ui-sans-serif, system-ui, -apple-system, sans-serif; }
.language-switcher a:lang(ru) { font-family: "Su Inter Cyrillic", "Segoe UI", Arial, sans-serif; }
.language-switcher a:lang(ar) { font-family: system-ui, -apple-system, "SF Arabic", "Segoe UI", Tahoma, Arial, sans-serif; }
.language-switcher a:lang(zh-Hans) { font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
.language-switcher a:hover { color: var(--ink); border-color: var(--stroke); }
.language-switcher a[aria-current="page"] { color: var(--ink); background: var(--panel); border-color: var(--crest); }
.language-switcher a[aria-current="page"]::after { content: "✓"; flex: 0 0 auto; color: var(--crest); font-family: var(--font-body); font-weight: 700; }
.hero-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-inline-size: 0; max-inline-size: var(--max); gap: 1.15rem; padding-block: clamp(3rem, 10vh, 6rem); }
h1 { max-inline-size: min(14ch, 100%); font-size: clamp(2.6rem, 8vw, 4.4rem); font-weight: 800; line-height: .98; overflow-wrap: break-word; }
.lede { max-inline-size: 32rem; margin: 0; color: var(--ink-dim); font-size: clamp(1.05rem, 2.4vw, 1.25rem); }
.trust-line { margin: -.2rem 0 0; color: var(--ink-dim); font-size: .9rem; font-weight: 500; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem; margin-block-start: .4rem; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 0; max-inline-size: 100%; min-block-size: 52px; padding-inline: 1.1rem; border: 1px solid var(--stroke); border-radius: 14px; background: var(--surface-translucent); color: var(--ink); text-align: center; text-decoration: none; overflow-wrap: anywhere; font-weight: 600; }
.store-badge-link { display: inline-flex; max-inline-size: 100%; min-block-size: 52px; border-radius: 10px; }
.store-badge-link img { display: block; max-inline-size: 100%; block-size: 52px; inline-size: auto; }
.badge { gap: .55rem; }
.badge span { min-inline-size: 0; color: var(--ink-dim); overflow-wrap: anywhere; font-size: .8rem; font-weight: 500; }
.badge:hover { border-color: var(--crest); }
.screen-link { display: inline-flex; align-items: center; min-inline-size: 0; max-inline-size: 100%; min-block-size: 44px; padding-inline: .55rem; border-radius: 8px; background: var(--surface-translucent-strong); color: var(--ink-dim); overflow-wrap: anywhere; font-size: .92rem; font-weight: 500; }
.test-note { max-inline-size: 40rem; margin: -.2rem 0 0; padding: .55rem .75rem; border: 1px solid var(--stroke); border-radius: 10px; background: var(--surface-translucent); color: var(--ink-dim); font-size: .85rem; overflow-wrap: anywhere; }
main, footer { background: var(--main-surface); }
.band { padding-block: clamp(4rem, 10vw, 7rem); }
.band + .band { border-block-start: 1px solid var(--stroke); }
h2 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); font-weight: 700; line-height: 1.15; }
.section-head { display: flex; flex-direction: column; min-inline-size: 0; max-inline-size: 39rem; gap: .5rem; margin-block-end: 2.5rem; }
.section-head p { margin: 0; color: var(--ink-dim); }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: clamp(1.25rem, 4vw, 2.5rem); align-items: start; }
.shot { display: flex; flex-direction: column; gap: .85rem; margin: 0; }
.shot-trigger { position: relative; display: block; border-radius: 22px; line-height: 0; text-decoration: none; cursor: zoom-in; }
.shot picture { display: block; line-height: 0; }
.shot img { display: block; inline-size: 100%; block-size: auto; border: 1px solid var(--stroke); border-radius: 22px; background: var(--panel); transition: transform 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out; }
.shot-trigger:hover img { transform: translateY(-3px) scale(1.008); border-color: var(--crest); box-shadow: 0 16px 38px var(--shadow); }
.shot-trigger:focus-visible { outline: none; }
.shot-trigger:focus-visible img { outline: 3px solid var(--crest); outline-offset: 4px; }
.shot figcaption { min-inline-size: 0; color: var(--ink-dim); overflow-wrap: anywhere; font-size: .92rem; }
.shot strong { display: block; color: var(--ink); font-weight: 600; }
.shot figcaption span { display: block; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 1.5rem; }
.feature { display: flex; flex-direction: column; min-inline-size: 0; gap: .4rem; padding-block-start: 1.1rem; border-block-start: 2px solid var(--water); }
.feature h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
.feature p { margin: 0; color: var(--ink-dim); font-size: .95rem; }
.table-wrap { min-inline-size: 0; max-inline-size: 100%; overflow-x: auto; }
.coef { inline-size: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.coef caption { padding-block-end: 1rem; color: var(--ink-dim); text-align: start; overflow-wrap: anywhere; }
.coef th, .coef td { min-inline-size: 0; padding: .7rem .5rem; border-block-end: 1px solid var(--stroke); text-align: start; overflow-wrap: anywhere; }
.coef th { color: var(--ink-faint); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
:lang(ar) .coef th, :lang(zh-Hans) .coef th { letter-spacing: 0; text-transform: none; }
.coef td:last-child, .coef th:last-child { color: var(--crest); font-weight: 600; text-align: end; }
.privacy-note { display: flex; flex-direction: column; min-inline-size: 0; max-inline-size: 44rem; gap: .6rem; padding: 1.5rem 1.6rem; border: 1px solid var(--stroke); border-inline-start: 4px solid var(--crest); border-radius: 16px; background: var(--panel); overflow-wrap: anywhere; }
.privacy-note p { margin: 0; color: var(--ink-dim); }
.privacy-note strong { color: var(--ink); }
footer.shell { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-block: 2.5rem 3.5rem; border-block-start: 1px solid var(--stroke); color: var(--ink-faint); font-size: .88rem; }
footer .spacer { flex: 1; }
footer a { display: inline-flex; align-items: center; min-inline-size: 0; max-inline-size: 100%; min-block-size: 44px; color: var(--ink-dim); text-decoration: none; overflow-wrap: anywhere; }

.gallery-open { overflow: hidden; }
.gallery-dialog { inline-size: min(76rem, calc(100vw - 2rem)); max-inline-size: none; max-block-size: calc(100dvh - 2rem); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--stroke); border-radius: 24px; background: var(--ground-2); color: var(--ink); box-shadow: 0 30px 90px var(--shadow); }
.gallery-dialog::backdrop { background: var(--dialog-backdrop); backdrop-filter: blur(6px); }
.gallery-shell { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .85fr); max-block-size: calc(100dvh - 2rem); }
.gallery-close { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; z-index: 3; display: grid; inline-size: 48px; block-size: 48px; place-items: center; padding: 0; border: 1px solid var(--stroke); border-radius: 50%; background: var(--panel-strong); color: var(--ink); cursor: pointer; font: 400 1.8rem/1 var(--font-body); box-shadow: 0 8px 20px var(--shadow); }
.gallery-media { display: flex; min-inline-size: 0; min-block-size: 26rem; max-block-size: calc(100dvh - 2rem); align-items: center; justify-content: center; padding: clamp(1rem, 3vw, 2rem); overflow: auto; background: var(--panel); touch-action: pan-y; }
.gallery-media picture { display: flex; inline-size: 100%; block-size: 100%; align-items: center; justify-content: center; }
.gallery-media img { display: block; inline-size: auto; max-inline-size: 100%; block-size: auto; max-block-size: calc(100dvh - 6rem); border: 1px solid var(--stroke); border-radius: 20px; object-fit: contain; box-shadow: 0 16px 50px var(--shadow); }
.gallery-copy { display: flex; min-inline-size: 0; max-block-size: calc(100dvh - 2rem); flex-direction: column; gap: 1rem; padding: 5rem 2rem 2rem; overflow-y: auto; }
.gallery-copy h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); }
.gallery-copy p { margin: 0; color: var(--ink-dim); }
.gallery-position { color: var(--crest) !important; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
:lang(ar) .gallery-position, :lang(zh-Hans) .gallery-position { letter-spacing: 0; text-transform: none; }
.gallery-copy ul { display: grid; gap: .6rem; margin: 0; padding-inline-start: 1.2rem; color: var(--ink-dim); }
.gallery-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-block-start: auto; padding-block-start: 1rem; }
.gallery-navigation button { display: inline-flex; min-inline-size: 0; min-block-size: 48px; align-items: center; justify-content: center; gap: .55rem; padding: .65rem .75rem; border: 1px solid var(--stroke); border-radius: 12px; background: var(--panel); color: var(--ink); cursor: pointer; font: 600 .82rem/1.2 var(--font-body); }
.gallery-navigation button:hover { border-color: var(--crest); }
[dir="rtl"] .gallery-navigation span[aria-hidden="true"] { transform: scaleX(-1); }

@media (max-width: 42rem) {
  .topbar { flex-wrap: wrap; align-items: flex-start; }
  .topbar-actions { flex: 1 1 100%; flex-wrap: wrap; inline-size: 100%; margin-inline-start: 0; justify-content: flex-start; }
  .page-nav { flex: 0 1 auto; flex-wrap: wrap; gap: .35rem; }
  .page-nav a { padding-inline: .25rem; }
  .display-controls { margin-inline-start: auto; }
  .language-switcher { max-inline-size: 100%; }
}
@media (max-width: 56rem) {
  .gallery-dialog { inline-size: calc(100vw - 1rem); max-block-size: calc(100dvh - 1rem); border-radius: 18px; }
  .gallery-shell { display: block; max-block-size: calc(100dvh - 1rem); overflow-y: auto; }
  .gallery-media { min-block-size: min(58dvh, 34rem); max-block-size: none; padding: 1rem; overflow: hidden; }
  .gallery-media img { max-block-size: min(54dvh, 31rem); }
  .gallery-copy { max-block-size: none; padding: 1.5rem 1.25rem 1.25rem; overflow: visible; }
  .gallery-close { position: sticky; inset-block-start: .75rem; float: inline-end; margin: .75rem .75rem -4rem 0; }
  [dir="rtl"] .gallery-close { margin-inline: .75rem 0; }
}
@media (orientation: landscape) and (max-height: 31.25rem) and (min-width: 35rem) and (max-width: 59.375rem) {
  .topbar { padding-block-start: .25rem; }
  .hero-body { justify-content: flex-start; gap: .4rem; padding-block: .3rem .75rem; }
  h1 { max-inline-size: 100%; font-size: clamp(2.5rem, 6vw, 3.2rem); }
  .lede { max-inline-size: 48rem; font-size: .95rem; line-height: 1.4; }
  .test-note { padding: .3rem .5rem; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body, .language-switcher summary::after, .shot img { transition: none; }
  .shot-trigger:hover img { transform: none; }
  .gallery-dialog::backdrop { backdrop-filter: none; }
}