:root {
  color-scheme: dark;
  --bg: #0b0e13;
  --panel: #111720;
  --ink: #edf4f8;
  --muted: #a0afbe;
  --line: #293644;
  --ice: #a9f4ff;
  --dark-ice: #09282d;
  --radius: 20px;
  font-family: Inter, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 0; background: var(--bg); color: var(--ink); line-height: 1.55; }
img, canvas { display: block; max-width: 100%; }
a { color: var(--ice); text-underline-offset: .2em; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.035em; }
.wrap { width: min(calc(100% - 72px), 1220px); margin-inline: auto; }
.bar { background: #0b0e13; border-bottom: 1px solid var(--line); }
.bar .wrap, .bar nav, .brand { display: flex; align-items: center; }
.bar .wrap { min-height: 76px; justify-content: space-between; gap: 16px; }
.bar nav { gap: clamp(14px, 3vw, 34px); }
.bar a, .foot a { text-decoration: none; }
.brand { gap: 11px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.brand img { border-radius: 50%; }
.brand strong { color: var(--ice); }
.bar nav a { color: var(--ink); font-size: .9rem; }
.bar nav a:hover { color: var(--ice); }
.nav-support { padding: 8px 13px; border: 1px solid var(--line); border-radius: 8px; }
.nav-support span { margin-left: 4px; color: var(--ice); }
.hero { overflow: clip; }
.hero-inner { display: grid; grid-template-columns: 1.03fr 1fr; align-items: center; min-height: clamp(440px, 37vw, 535px); }
.hero-copy { position: relative; z-index: 1; padding-block: 56px; }
.eyebrow { color: var(--ice); font-size: .81rem; font-weight: 650; letter-spacing: .105em; text-transform: uppercase; }
.hero h1 { font-size: clamp(3.6rem, 7.4vw, 7.4rem); font-weight: 750; letter-spacing: -.036em; white-space: nowrap; margin: 10px 0 17px; }
.hero h1 span { color: var(--ice); }
.intro { color: var(--muted); max-width: 36ch; font-size: clamp(1rem, 1.7vw, 1.26rem); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 23px; margin-top: 29px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 47px; border: 1px solid transparent; border-radius: 9px; padding: 10px 16px; background: var(--ice); color: var(--dark-ice); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s; }
.button:hover { background: #e0fbff; color: #071c22; transform: translateY(-2px); }
.text-link { color: var(--muted); font-size: .93rem; }
.hero-art { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; aspect-ratio: 1.12; background: radial-gradient(ellipse at center, #172e43 0, #0d151f 42%, transparent 73%); }
.hero-art::before { position: absolute; inset: 7% 0; content: ""; background: repeating-linear-gradient(90deg, #577c9b24 0 1px, transparent 1px 34px), repeating-linear-gradient(0deg, #577c9b24 0 1px, transparent 1px 34px); mask-image: radial-gradient(ellipse, #000 4%, transparent 74%); }
.hero-shader { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-mark { position: relative; width: 47%; max-width: 292px; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 22px 60px #000a, 0 0 38px #55c9fb38; animation: hover-mark 7s ease-in-out infinite; }
.hero-mark img { width: 100%; height: auto; border-radius: inherit; }
@keyframes hover-mark { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.hero-copy > * { animation: arrive .55s both cubic-bezier(.22,.72,.32,1); }
.hero-copy > :nth-child(2) { animation-delay: .06s; }
.hero-copy > :nth-child(3) { animation-delay: .12s; }
.hero-copy > :nth-child(4) { animation-delay: .18s; }
@keyframes arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.platform-strip { display: grid; grid-template-columns: 2fr 1fr; border: 1px solid var(--line); border-radius: 12px; background: #0f141c; }
.platform-strip > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 15px; padding: 16px 22px; }
.platform-strip > div + div { border-left: 1px solid var(--line); }
.platform-strip strong { font-size: .93rem; }
.platform-strip span, .muted, .field-note, .duration { color: var(--muted); }
.platform-strip span, .field-note, .duration { font-size: .9rem; }
.catalogue { padding-block: clamp(50px, 6vw, 82px); scroll-margin-top: 18px; }
.section-head { display: flex; justify-content: space-between; gap: 10px 24px; align-items: baseline; flex-wrap: wrap; margin-bottom: 24px; }
.section-head h2, .details h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
.section-head p { color: var(--muted); }
.tariffs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tariff { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 2.5vw, 32px); transition: border-color .23s, transform .23s; }
.tariff.featured { border-color: #5597a3; background: linear-gradient(150deg, #1b3039, var(--panel) 72%); }
.tariff:hover, .tariff:focus-within { border-color: var(--ice); transform: translateY(-3px); }
.tariff h3 { font-size: 1.3rem; }
.price { font-size: clamp(2.5rem, 4.2vw, 3.75rem); font-weight: 750; letter-spacing: -.065em; line-height: 1.15; margin: 15px 0 7px; font-variant-numeric: tabular-nums; }
.price span { color: var(--ice); font-size: .53em; }
.tariff .button { width: 100%; justify-content: space-between; margin-top: 26px; }
.button.secondary { color: var(--ink); background: #1c2733; border-color: #354654; }
.button.secondary:hover { background: #2c4050; }
.featured .button { color: var(--dark-ice); background: var(--ice); border-color: transparent; }
.featured .button:hover { background: #e0fbff; }
.notice { background: #17222b; padding: 13px 15px; border-left: 2px solid #78bbc7; border-radius: 4px; margin-top: 17px; }
.notice.error { border-left-color: #ff9c9c; }
.details { display: grid; grid-template-columns: 1fr 1.5fr; gap: 22px; padding-bottom: clamp(55px, 8vw, 110px); }
.questions { border-top: 1px solid var(--line); }
.questions details { border-bottom: 1px solid var(--line); }
.questions summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; cursor: pointer; padding: 16px 3px; list-style: none; font-weight: 650; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; color: var(--ice); font-size: 1.2rem; line-height: 1; }
.questions details[open] summary::after { content: "−"; }
.questions details[open] p { padding: 0 3px 17px; color: var(--muted); animation: arrive .25s both; }
.foot { display: flex; flex-wrap: wrap; gap: 12px 22px; justify-content: space-between; align-items: baseline; padding-block: 25px 35px; border-top: 1px solid var(--line); font-size: .88rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 7px 19px; }
.foot nav a, .foot small { color: var(--muted); }
.foot nav a:hover { color: var(--ice); }
.narrow { max-width: 1040px; min-height: 54vh; padding-block: clamp(30px, 5.5vw, 70px); }
.back { display: inline-block; color: var(--muted); margin-bottom: 18px; font-size: .92rem; }
.narrow > h1 { font-size: clamp(2rem, 5.5vw, 4.25rem); overflow-wrap: anywhere; margin-bottom: 24px; }
.checkout-layout, .document-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.checkout, .checkout-summary, .document, .outline { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(16px, 3vw, 32px); min-width: 0; }
.checkout-summary { background: linear-gradient(145deg, #1b3039, var(--panel) 70%); border-color: #466772; }
.checkout-summary h2 { margin-top: 10px; }
.checkout-summary .field-note { margin-block: 12px; }
.checkout .notice { margin: 0 0 18px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
label { font-weight: 600; }
input[type=email] { width: 100%; display: block; background: #0a1018; color: var(--ink); border: 1px solid #455669; border-radius: 8px; padding: 12px; margin: 7px 0; font: inherit; }
.check { display: flex; align-items: flex-start; gap: 9px; margin-block: 18px; font-size: .91rem; font-weight: 400; }
.check input { flex: none; margin-top: .32em; accent-color: var(--ice); }
fieldset:disabled .button { background: #263444; color: #b2bdc8; cursor: default; transform: none; }
.outline { position: sticky; top: 14px; font-size: .9rem; }
.outline ul { margin: 10px 0 0; padding-left: 16px; }
.outline li + li { margin-top: 6px; }
.outline a { color: var(--muted); }
.outline a:hover { color: var(--ice); }
.document { overflow-wrap: anywhere; }
.document h2 { font-size: 1.2rem; margin-bottom: 9px; }
.document p + p { margin-top: 9px; }
.document section { border-top: 1px solid var(--line); padding-top: 17px; margin-top: 17px; scroll-margin-top: 14px; }
.document section:target h2 { color: var(--ice); }
.document .button { margin-top: 12px; }
@media (max-width: 920px) {
  .hero h1 { font-size: clamp(3rem, 7.4vw, 5.1rem); }
  .wrap { width: min(calc(100% - 48px), 1220px); }
}
@media (max-width: 680px) {
  .wrap { width: calc(100% - 32px); }
  .bar .wrap { min-height: 62px; }
  .bar nav { gap: 12px; }
  .nav-support { padding: 5px 8px; }
  .hero-inner { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { padding: 46px 0 0; }
  .hero h1 { font-size: clamp(2.95rem, 12.5vw, 5.7rem); }
  .hero-art { width: min(100%, 420px); margin: 0 auto; aspect-ratio: 1.55; }
  .hero-mark { width: 42%; }
  .platform-strip, .details, .checkout-layout, .document-layout { grid-template-columns: 1fr; }
  .platform-strip > div { padding: 11px 14px; }
  .platform-strip > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .tariffs { grid-template-columns: 1fr; }
  .tariff .button { margin-top: 16px; }
  .outline { position: static; }
}
@media (max-width: 370px) {
  .bar .wrap, .bar nav { gap: 8px; }
  .brand { gap: 6px; font-size: .86rem; }
  .brand img { width: 27px; height: 27px; }
  .bar nav a { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}