:root {
  color-scheme: dark;
  --bg: #080f18;
  --text: #e9edf3;
  --muted: #a4b3c3;
  --cyan: #75e5ff;
  --line: #293b4b;
  --amber: #e9b75b;
  --button-line: rgba(173, 195, 220, .2);
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; overflow-x: clip; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 1px solid rgba(117, 229, 255, .55); outline-offset: 2px; }
[hidden] { display: none !important; }
.wrap { width: min(1160px, calc(100% - 72px)); margin-inline: auto; }
.skip { position: fixed; top: -100px; padding: 14px; background: var(--bg); z-index: 5; }
.skip:focus { top: 8px; }

.header { height: 112px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { display: block; object-fit: contain; width: 46px; height: 46px; margin-left: -7px; }
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-name { color: var(--text); font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.brand-tagline { color: var(--muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.languages { display: flex; gap: 4px; padding: 4px; }
.languages button, .button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--button-line);
  border-radius: 8px;
  color: #dfe6ee;
  background-color: #1c2129;
  background-image: linear-gradient(rgba(13, 20, 29, .76), rgba(13, 20, 29, .76)), url("assets/surface.webp");
  background-position: center;
  background-size: cover;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.languages button { padding: 9px 12px; font-size: 12px; font-weight: 700; }
.languages button:hover, .button:hover { background-color: #272e38; border-color: rgba(173, 195, 220, .28); }
.languages button[aria-pressed="true"] { color: var(--cyan); background-color: #23303c; border-color: rgba(117, 229, 255, .32); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 14px 20px; font-size: 15px; font-weight: 700; }
.actions .button::after { content: "↗"; color: var(--cyan); font-size: 18px; line-height: 1; transition: transform .18s ease; }
.actions .button:hover::after { transform: translate(2px, -2px); }
.button-sweep { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.button-sweep .sweep-piece { fill: none; stroke: var(--cyan); stroke-width: 1.5; stroke-linecap: round; opacity: 0; vector-effect: non-scaling-stroke; }

.hero { position: relative; padding-top: 70px; padding-bottom: 16px; }
.hero:before { content: ""; position: absolute; z-index: -1; top: -112px; bottom: 0; left: calc((1160px - 100vw)/2); right: calc((1160px - 100vw)/2); background: linear-gradient(180deg, #080f1860, transparent 65%, var(--bg)), url("assets/background.webp") center bottom/cover no-repeat; }
.eyebrow { font-size: 11px !important; letter-spacing: .2em; font-weight: 700; text-transform: uppercase; color: var(--cyan) !important; margin: 0 0 23px; }
h1 { font-size: clamp(42px, 5.3vw, 72px); letter-spacing: -.045em; line-height: 1.06; max-width: 1000px; margin: 0 0 30px; font-weight: 750; }
h1 em { font-style: normal; color: var(--cyan); }
.intro { max-width: 605px; font-size: 18px; line-height: 1.75; color: #bac6d2; }
.actions { display: flex; align-items: center; gap: 25px; margin-top: 34px; }
.platform { font-size: 10px; letter-spacing: .12em; color: #b8c6d1; }

.strategy { padding-block: 40px 80px; }
.section-intro { display: grid; grid-template-columns: 1fr 1fr; column-gap: 95px; margin-bottom: 55px; }
.section-intro .eyebrow { grid-column: 1/-1; }
.section-intro h2 { margin: 0; }
h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.14; letter-spacing: -.035em; }
.section-intro > p:last-child { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.features { padding: 0; margin: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.features li { padding: 30px 28px 35px 0; border-bottom: 1px solid var(--line); }
.features li:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--line); }
.number { font: 12px Consolas, monospace; color: var(--amber); }
h3 { font-size: 20px; letter-spacing: -.02em; margin: 22px 0 10px; }
.features p { color: var(--muted); line-height: 1.7; font-size: 15px; margin: 0; }
.download { border: 1px solid var(--line); padding: 48px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; background: linear-gradient(110deg, #132535e8, #0b1621eb), url("assets/surface.webp") center/cover; }
.download h2 { margin: 0 0 22px; }
.download p:not(.eyebrow) { color: var(--muted); line-height: 1.75; font-size: 15px; }
.download-action { align-self: center; text-align: center; }
.availability { border: 1px solid #75603d; background: #e9b75b0b; color: var(--amber) !important; padding: 17px 20px; }
.small { font-size: 12px !important; }
@media (max-width: 1232px) { .hero:before { left: -36px; right: -36px; } }
@media (max-width: 700px) {
  .wrap { width: calc(100% - 40px); }
  .header { height: 90px; }
  .brand img { width: 46px; height: 46px; margin-left: -7px; }
  .hero { padding-top: 48px; padding-bottom: 12px; }
  .hero:before { left: -20px; right: -20px; }
  .intro { font-size: 16px; }
  .actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .strategy { padding-block: 24px 65px; }
  .section-intro { grid-template-columns: 1fr; gap: 18px; }
  .section-intro .eyebrow { margin-bottom: 0; }
  .features { grid-template-columns: 1fr 1fr; }
  .features li, .features li:not(:nth-child(3n+1)) { padding: 24px 18px 28px 0; border-left: 0; }
  .features li:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
  h3 { font-size: 18px; }
  .download { padding: 28px; grid-template-columns: 1fr; gap: 20px; }
  .download-action { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .languages button, .actions .button::after { transition: none; }
}
main { padding-bottom: 80px; }