@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-ext.3911b66d9f.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin.a30ddcd349.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/courier-prime-latin-ext.efbea074e3.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/courier-prime-latin.f09844e1f4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {

  --slate-25: #FBFCFD;
  --slate-50: #F4F6F8;
  --slate-100: #ECEEF1;
  --slate-200: #DDE0E4;
  --slate-300: #C8CCD2;
  --slate-400: #9FA3AA;
  --slate-500: #696E74;
  --slate-600: #52565D;
  --slate-700: #3B3F44;
  --slate-800: #272A2F;
  --slate-900: #1B1E21;
  --slate-950: #0E0F12;

  --ink-500: #424E60;
  --ink-600: #2E3B4E;
  --ink-700: #212E41;
  --ink-800: #1A273A;
  --ink-850: #142032;
  --ink-900: #101A29;
  --ink-950: #070F19;
  --ink-1000: #03060D;

  --blue-50: #E9F7FF;
  --blue-100: #D3EEFF;
  --blue-200: #ACE0FE;
  --blue-300: #7BCAF6;
  --blue-400: #4EB5EA;
  --blue-500: #1AA0DA;
  --blue-600: #0088BC;
  --blue-700: #006D98;
  --blue-800: #005476;
  --blue-900: #003A54;

  --sand-50: #FBF6F0;
  --sand-100: #F7ECE0;
  --sand-200: #EDDBC6;
  --sand-300: #E0C8AB;
  --sand-400: #D0B28E;
  --sand-500: #C19E72;
  --sand-700: #82623A;

  --ok-500: #3DA454;
  --ok-600: #1D8139;
  --ok-300: #86D391;
  --warn-500: #E6A231;
  --warn-600: #AA5C08;
  --warn-300: #F5C984;
  --danger-500: #E24947;
  --danger-600: #C3222A;
  --danger-300: #FF9592;

  --eq-ink-0: #B3A0FF;
  --eq-ink-1: #A8A5FF;
  --eq-ink-2: #9DA9FF;
  --eq-ink-3: #92ADFF;
  --eq-ink-4: #86B1FF;
  --eq-ink-5: #78B4FF;
  --eq-ink-6: #67B8FF;
  --eq-ink-7: #4FBCFF;
  --eq-ink-8: #37BFFA;
  --eq-ink-9: #18C3F3;
  --eq-ink-10: #00C5E9;
  --eq-ink-11: #00C7DE;
  --eq-ink-12: #00C9D4;
  --eq-light-0: #8871D6;
  --eq-light-1: #7C75DA;
  --eq-light-2: #6F79DD;
  --eq-light-3: #617DDE;
  --eq-light-4: #5181DE;
  --eq-light-5: #3D86DC;
  --eq-light-6: #1F8AD9;
  --eq-light-7: #008ECF;
  --eq-light-8: #0090C3;
  --eq-light-9: #0092B8;
  --eq-light-10: #0094AF;
  --eq-light-11: #0096A7;
  --eq-light-12: #00979F;
  --eq-ink-sweep: linear-gradient(90deg, #B3A0FF, #A8A5FF, #9DA9FF, #92ADFF, #86B1FF, #78B4FF, #67B8FF, #4FBCFF, #37BFFA, #18C3F3, #00C5E9, #00C7DE, #00C9D4);
  --eq-light-sweep: linear-gradient(90deg, #8871D6, #7C75DA, #6F79DD, #617DDE, #5181DE, #3D86DC, #1F8AD9, #008ECF, #0090C3, #0092B8, #0094AF, #0096A7, #00979F);
}

:root {

  --w-bg: var(--slate-50);
  --w-surface: #fff;
  --w-surface-sunken: var(--slate-100);
  --w-surface-raised: #fff;

  --w-hairline: color-mix(in srgb, var(--ink-900) 6%, transparent);
  --w-line: color-mix(in srgb, var(--ink-900) 11%, transparent);
  --w-line-strong: color-mix(in srgb, var(--ink-900) 22%, transparent);

  --w-text: var(--slate-900);
  --w-text-dim: var(--slate-500);
  --w-text-faint: var(--slate-400);
  --w-text-inverse: var(--slate-25);

  --w-text-heading: var(--w-text);

  --w-accent: var(--blue-500);
  --w-accent-ink: var(--blue-700);
  --w-accent-solid: var(--blue-700);
  --w-accent-soft: color-mix(in srgb, var(--blue-500) 12%, transparent);
  --w-accent-soft-hover: color-mix(in srgb, var(--blue-500) 19%, transparent);
  --w-accent-line: color-mix(in srgb, var(--blue-500) 34%, transparent);

  --w-primary-bg: var(--ink-950);
  --w-primary-bg-hover: var(--ink-900);
  --w-primary-fg: #fff;

  --w-hover: color-mix(in srgb, var(--ink-900) 5%, transparent);
  --w-hover-strong: color-mix(in srgb, var(--ink-900) 9%, transparent);
  --w-pressed: color-mix(in srgb, var(--ink-900) 13%, transparent);
  --w-focus-ring: color-mix(in srgb, var(--blue-500) 45%, transparent);
  --w-selection: color-mix(in srgb, var(--blue-500) 22%, transparent);

  --w-ok: var(--ok-600);
  --w-ok-dot: var(--ok-500);
  --w-ok-soft: color-mix(in srgb, var(--ok-500) 13%, transparent);
  --w-warn: var(--warn-600);
  --w-warn-dot: var(--warn-500);
  --w-warn-soft: color-mix(in srgb, var(--warn-500) 16%, transparent);
  --w-danger: var(--danger-600);
  --w-danger-dot: var(--danger-500);
  --w-danger-soft: color-mix(in srgb, var(--danger-500) 12%, transparent);
  --w-danger-fg-on-solid: #fff;

  --w-pro-bg: var(--sand-100);
  --w-pro-line: var(--sand-300);
  --w-pro-ink: var(--sand-700);

  --w-eq-sweep: var(--eq-light-sweep);
  --w-eq-0: var(--eq-light-0);
  --w-eq-6: var(--eq-light-6);
  --w-eq-12: var(--eq-light-12);

  --w-shadow-color: 16 26 41;
  --w-e1: 0 1px 2px rgb(var(--w-shadow-color) / .05),
          0 1px 3px rgb(var(--w-shadow-color) / .04);
  --w-e2: 0 1px 3px rgb(var(--w-shadow-color) / .06),
          0 4px 12px rgb(var(--w-shadow-color) / .05);
  --w-e3: 0 2px 6px rgb(var(--w-shadow-color) / .07),
          0 12px 28px rgb(var(--w-shadow-color) / .08);
  --w-e4: 0 8px 24px rgb(var(--w-shadow-color) / .10),
          0 24px 60px rgb(var(--w-shadow-color) / .13);

  --w-sheen: inset 0 1px 0 rgb(255 255 255 / .9);
}

[data-surface="ink"] {
  --w-bg: var(--ink-950);
  --w-surface: var(--ink-900);
  --w-surface-sunken: var(--ink-1000);
  --w-surface-raised: var(--ink-850);

  --w-hairline: rgb(255 255 255 / .06);
  --w-line: rgb(255 255 255 / .10);
  --w-line-strong: rgb(255 255 255 / .22);

  --w-text: var(--slate-25);
  --w-text-dim: var(--slate-400);
  --w-text-faint: var(--slate-500);
  --w-text-inverse: var(--ink-950);

  --w-accent: var(--blue-400);
  --w-accent-ink: var(--blue-300);
  --w-accent-solid: var(--blue-500);
  --w-accent-soft: color-mix(in srgb, var(--blue-400) 22%, transparent);
  --w-accent-soft-hover: color-mix(in srgb, var(--blue-400) 30%, transparent);
  --w-accent-line: color-mix(in srgb, var(--blue-400) 40%, transparent);

  --w-primary-bg: var(--slate-25);
  --w-primary-bg-hover: #fff;
  --w-primary-fg: var(--ink-950);

  --w-hover: rgb(255 255 255 / .07);
  --w-hover-strong: rgb(255 255 255 / .12);
  --w-pressed: rgb(255 255 255 / .16);
  --w-focus-ring: color-mix(in srgb, var(--blue-400) 55%, transparent);
  --w-selection: color-mix(in srgb, var(--blue-400) 28%, transparent);

  --w-ok: var(--ok-300);
  --w-ok-dot: var(--ok-500);
  --w-ok-soft: color-mix(in srgb, var(--ok-500) 20%, transparent);
  --w-warn: var(--warn-300);
  --w-warn-dot: var(--warn-500);
  --w-warn-soft: color-mix(in srgb, var(--warn-500) 22%, transparent);
  --w-danger: var(--danger-300);
  --w-danger-dot: var(--danger-500);
  --w-danger-soft: color-mix(in srgb, var(--danger-500) 20%, transparent);
  --w-danger-fg-on-solid: var(--ink-1000);

  --w-pro-bg: color-mix(in srgb, var(--sand-300) 16%, transparent);
  --w-pro-line: color-mix(in srgb, var(--sand-300) 40%, transparent);
  --w-pro-ink: var(--sand-200);

  --w-eq-sweep: var(--eq-ink-sweep);
  --w-eq-0: var(--eq-ink-0);
  --w-eq-6: var(--eq-ink-6);
  --w-eq-12: var(--eq-ink-12);

  --w-e1: 0 1px 2px rgb(0 0 0 / .30);
  --w-e2: 0 2px 8px rgb(0 0 0 / .35);
  --w-e3: 0 6px 20px rgb(0 0 0 / .42);
  --w-e4: 0 14px 44px rgb(0 0 0 / .50);
  --w-sheen: inset 0 1px 0 rgb(255 255 255 / .08);
}

[data-surface="paper"] {
  --w-bg: var(--sand-50);
  --w-surface: color-mix(in srgb, var(--sand-50) 38%, #fff);
  --w-surface-sunken: var(--sand-100);
  --w-surface-raised: #fff;

  --w-hairline: color-mix(in srgb, #3B2A16 8%, transparent);
  --w-line: color-mix(in srgb, #3B2A16 14%, transparent);
  --w-line-strong: color-mix(in srgb, #3B2A16 26%, transparent);
  --w-hover: color-mix(in srgb, #3B2A16 5%, transparent);
  --w-hover-strong: color-mix(in srgb, #3B2A16 9%, transparent);
  --w-pressed: color-mix(in srgb, #3B2A16 13%, transparent);
  --w-shadow-color: 59 42 22;

  --w-text-heading: var(--w-glass-top);
}

:root {

  --w-glass-top: var(--ink-800);
  --w-glass-bottom: var(--ink-900);
  --w-glass-edge: rgb(255 255 255 / .09);
  --w-glass-fill: linear-gradient(180deg, var(--w-glass-top), var(--w-glass-bottom));

  --w-glass-shadow:
    inset 0 1px 0 rgb(255 255 255 / .10),
    0 1px 2px rgb(0 0 0 / .28),
    0 8px 24px rgb(0 0 0 / .28);
  --w-glass-radius: 999px;

  --w-cta-fill: var(--w-glass-fill);
  --w-cta-fill-hover: linear-gradient(180deg, var(--ink-700), var(--ink-850));
  --w-cta-fg: var(--sand-50);
  --w-cta-shadow: 0 2px 6px rgb(16 26 41 / .30), 0 10px 26px rgb(16 26 41 / .26);
  --w-cta-shadow-hover: 0 3px 10px rgb(16 26 41 / .34), 0 16px 36px rgb(16 26 41 / .30);
}

:root {

  --w-font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --w-font-display: "Manrope", system-ui, -apple-system, sans-serif;
  --w-font-mono: "Courier Prime", ui-monospace, "SF Mono", Consolas, monospace;

  --w-d1-size: clamp(2.75rem, 6.2vw, 4.5rem);
  --w-d1-line: 1.06;
  --w-d1-track: -0.042em;
  --w-d2-size: clamp(2rem, 4vw, 2.875rem);
  --w-d2-line: 1.12;
  --w-d2-track: -0.035em;
  --w-d3-size: clamp(1.375rem, 2.4vw, 1.75rem);
  --w-d3-line: 1.22;
  --w-d3-track: -0.028em;
  --w-display-weight: 800;

  --w-t-xl: 20px;
  --w-t-lg: 17px;
  --w-t-md: 14px;
  --w-t-sm: 13px;
  --w-t-xs: 12px;
  --w-t-2xs: 11px;
  --w-leading-tight: 1.25;
  --w-leading: 1.45;
  --w-leading-loose: 1.65;

  --w-label-track: 0.06em;
}

:root {

  --w-s1: 4px;   --w-s2: 8px;   --w-s3: 12px;  --w-s4: 16px;
  --w-s5: 20px;  --w-s6: 24px;  --w-s7: 32px;  --w-s8: 40px;
  --w-s9: 56px;  --w-s10: 72px; --w-s11: 96px; --w-s12: 128px;

  --w-r1: 6px;
  --w-r2: 8px;
  --w-r3: 10px;
  --w-r4: 14px;
  --w-r5: 18px;
  --w-r6: 24px;
  --w-r-full: 999px;

  --w-ease: cubic-bezier(.2, .7, .2, 1);
  --w-ease-out: cubic-bezier(.16, 1, .3, 1);
  --w-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --w-dur-1: 120ms;
  --w-dur-2: 180ms;
  --w-dur-3: 240ms;
  --w-dur-4: 320ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --w-dur-1: 1ms; --w-dur-2: 1ms; --w-dur-3: 1ms; --w-dur-4: 1ms;
  }
}

:root {
  --w-font-ui: "Manrope", "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  --w-font-display: "Manrope", "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
    system-ui, -apple-system, sans-serif;
  --w-font-mono: "Courier Prime", ui-monospace, "SF Mono", Consolas,
    "PingFang SC", "Microsoft YaHei", "Noto Sans SC", monospace;
}

@font-face {
  font-family: "Whisay CJK Punctuation";
  src: local("PingFang SC"), local("PingFangSC-Regular"), local("Microsoft YaHei"),
    local("Microsoft YaHei UI"), local("Noto Sans SC"), local("Noto Sans CJK SC"),
    local("NotoSansCJKsc-Regular"), local("Source Han Sans SC");
  unicode-range: U+2018-2019, U+201C-201D, U+2026, U+3000-303F, U+FF01-FF60;
}
:lang(zh) {
  --w-font-ui: "Whisay CJK Punctuation", "Manrope", "PingFang SC", "Microsoft YaHei",
    "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --w-font-display: "Whisay CJK Punctuation", "Manrope", "PingFang SC", "Microsoft YaHei",
    "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --w-font-mono: "Whisay CJK Punctuation", "Courier Prime", ui-monospace, "SF Mono", Consolas,
    "PingFang SC", "Microsoft YaHei", "Noto Sans SC", monospace;
}

:lang(zh) [lang]:not(:lang(zh)) {
  --w-font-ui: "Manrope", "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  --w-font-display: "Manrope", "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
    system-ui, -apple-system, sans-serif;
  --w-font-mono: "Courier Prime", ui-monospace, "SF Mono", Consolas,
    "PingFang SC", "Microsoft YaHei", "Noto Sans SC", monospace;
  font-family: var(--w-font-ui);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body { margin: 0; background: var(--w-bg); color: var(--w-text);
       font-family: var(--w-font-ui); font-size: 16px; line-height: 1.6;
       -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

@media (max-width: 360px) { .wrap { padding: 0 16px; } }
section { padding: 100px 0; }

h1, h2, h3 { font-family: var(--w-font-display); font-weight: 800;
     letter-spacing: -0.035em; margin: 0; color: var(--w-text-heading); }
h1 { font-size: clamp(2.6rem, 5.4vw, 4.1rem); line-height: 1.05;
     letter-spacing: -0.042em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.14; }
h3 { font-size: 1.35rem; line-height: 1.3; letter-spacing: -0.008em; }

:lang(zh) h1, :lang(zh) h2, :lang(zh) h3 { letter-spacing: 0; }
.center { text-align: center; }

h1, h2, h3, p, li, dd, dt { overflow-wrap: break-word; }

:lang(de) h1, :lang(de) h2, :lang(de) h3 {
  -webkit-hyphens: auto; hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4;
}

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0;
     margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
     font-weight: 700; font-size: 16px; padding: 15px 26px; border-radius: 12px;
     border: 0; cursor: pointer; white-space: nowrap; max-width: 100%;
     font-family: inherit;
     transition: transform .12s var(--w-ease), box-shadow .2s var(--w-ease),
                 background .2s var(--w-ease); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor;
     stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.btn.primary { background: var(--w-cta-fill); color: var(--w-cta-fg);
     box-shadow: var(--w-cta-shadow); }
.btn.primary:hover { background: var(--w-cta-fill-hover);
     box-shadow: var(--w-cta-shadow-hover); }
.btn.ghost { background: var(--w-surface-raised); color: var(--w-text);
     box-shadow: inset 0 0 0 1.5px var(--w-line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--w-line-strong); }
.btn.sm { font-size: 14.5px; padding: 11px 18px; border-radius: 10px; }
.btn.big { font-size: 17px; padding: 18px 32px; }

.btn svg.os-logo { fill: currentColor; stroke: none; }

@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; }
  .btn.big { padding-left: 22px; padding-right: 22px; }
}

:focus-visible { outline: 2.5px solid var(--w-accent); outline-offset: 2px; border-radius: 6px; }

header { position: sticky; top: 0; z-index: 50;
     background: color-mix(in srgb, var(--w-bg) 86%, transparent);
     -webkit-backdrop-filter: saturate(150%) blur(12px);
     backdrop-filter: saturate(150%) blur(12px);
     border-bottom: 1px solid var(--w-hairline); }
.nav { display: flex; align-items: center; gap: 26px; height: 70px; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand span { font-family: var(--w-font-display); font-weight: 800; font-size: 20px;
     letter-spacing: -0.035em; }
.nav .links { display: flex; gap: 24px; margin-left: auto; font-size: 15px;
     font-weight: 500; color: var(--w-text-dim); white-space: nowrap; }
.nav .links a:hover { color: var(--w-text); }

.nav-end { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.nav .links + .nav-end { margin-left: 0; }

@media (max-width: 1100px) {
  .nav .links { display: none; }
  .nav .links + .nav-end { margin-left: auto; }
}
.nav .btn .sh { display: none; }
@media (max-width: 560px) {
  .nav { gap: 12px; }
  .nav-end { gap: 10px; }
  .nav .btn .lg { display: none; }
  .nav .btn .sh { display: inline; }
  .nav .btn.sm { padding: 10px 14px; gap: 8px; }
}

@media (max-width: 360px) {
  .nav .btn svg { display: none; }
  .nav { gap: 8px; }
  .nav-end { gap: 2px; }
  .nav .btn.sm { padding: 10px 12px; }
  .signin { padding: 8px 6px; }
  .langsw summary { padding: 8px 4px; }
}

@media (max-width: 440px) {
  .nav .btn.cta-long .sh { position: absolute; width: 1px; height: 1px; overflow: hidden;
       clip: rect(0 0 0 0); white-space: nowrap; }
  .nav .btn.cta-long svg { display: block; }
  .nav .btn.cta-long.sm { padding: 10px 12px; }
}

.signin { display: inline-flex; align-items: center; gap: 7px; font-size: 15px;
     font-weight: 600; color: var(--w-text); white-space: nowrap;
     padding: 8px 2px; border-radius: 8px; }
.signin:hover { color: var(--w-text-heading); text-decoration: underline;
     text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.signin svg { display: none; width: 20px; height: 20px; fill: none; stroke: currentColor;
     stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .signin { padding: 8px; }
  .signin svg { display: block; }
  .signin span { position: absolute; width: 1px; height: 1px; overflow: hidden;
       clip: rect(0 0 0 0); white-space: nowrap; }
}

.langsw { position: relative; }
.langsw summary { display: inline-flex; align-items: center; gap: 6px; list-style: none;
     cursor: pointer; padding: 8px 9px; border-radius: 9px; font-size: 14px;
     font-weight: 700; letter-spacing: .04em; color: var(--w-text-dim);
     -webkit-user-select: none; user-select: none; }
.langsw summary::-webkit-details-marker { display: none; }
.langsw summary:hover, .langsw[open] summary { color: var(--w-text); background: var(--w-hover); }
.langsw summary svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
     stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.langsw summary .chev { width: 12px; height: 12px; stroke-width: 2.4;
     transition: transform .18s var(--w-ease); }
.langsw[open] summary .chev { transform: rotate(180deg); }
.langsw-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
     min-width: 176px; margin: 0; padding: 6px; list-style: none;
     background: var(--w-surface-raised); border-radius: 13px;
     box-shadow: inset 0 0 0 1px var(--w-hairline),
                 0 2px 6px rgb(59 42 22 / .08), 0 18px 40px rgb(59 42 22 / .16); }
.langsw-list a { display: flex; align-items: center; justify-content: space-between;
     gap: 14px; padding: 9px 12px; border-radius: 8px; font-size: 15px;
     font-weight: 500; color: var(--w-text); }
.langsw-list a:hover { background: var(--w-hover); }
.langsw-list a[aria-current] { font-weight: 700; color: var(--w-text-heading); }
.langsw-list a svg { width: 15px; height: 15px; fill: none; stroke: var(--w-accent-ink);
     stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) {
  .langsw summary { padding: 8px 6px; gap: 4px; }
  .langsw summary .globe { display: none; }
}

.langbar { position: fixed; left: 50%; bottom: 18px; z-index: 70;
     transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
     display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
     padding: 10px 10px 10px 18px; border-radius: 14px;
     background: var(--w-cta-fill); color: var(--w-cta-fg);
     box-shadow: var(--w-cta-shadow), 0 18px 40px rgb(7 15 25 / .28);
     font-size: 15px; line-height: 1.4; }
.langbar[hidden] { display: none; }
.langbar p { margin: 0; font-weight: 600; }
.langbar-go { font-weight: 700; padding: 8px 14px; border-radius: 9px;
     background: rgb(255 255 255 / .14); white-space: nowrap; }
.langbar-go:hover { background: rgb(255 255 255 / .22); }
.langbar-x { display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
     border: 0; border-radius: 9px; background: transparent; color: inherit; cursor: pointer; }
.langbar-x:hover { background: rgb(255 255 255 / .12); }
.langbar-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
     stroke-width: 2.2; stroke-linecap: round; }
@media (max-width: 480px) {
  .langbar { left: 16px; right: 16px; transform: none; width: auto; max-width: none;
       bottom: 12px; padding: 10px 8px 10px 14px; gap: 8px 10px; }
  .langbar p { flex: 1 1 100%; }
}

footer { padding: 60px 0 40px; border-top: 1px solid var(--w-hairline);
     font-size: 14px; color: var(--w-text-dim); }
.fcols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px;
     margin-bottom: 40px; }
@media (max-width: 780px) { .fcols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .fcols { grid-template-columns: 1fr; } }
.fcols h4 { font-size: 12px; font-weight: 700; letter-spacing: .08em;
     text-transform: uppercase; color: var(--w-text); margin: 0 0 14px; }
.fcols a { display: block; padding: 5px 0; }
.fcols a:hover { color: var(--w-text); }
.fcols .brand { margin-bottom: 12px; }
.fcols .brand span { font-size: 17px; }
.ftag { font-size: 13.5px; max-width: 34ch; }
.fbot { display: flex; gap: 12px 20px; flex-wrap: wrap; justify-content: space-between;
     padding-top: 24px; border-top: 1px solid var(--w-hairline); font-size: 13px; }

.flangs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0;
     list-style: none; }
.flangs a:hover { color: var(--w-text); }
.flangs a[aria-current] { color: var(--w-text); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .langsw summary .chev { transition: none; }
}

  .sub { font-size: 19px; color: var(--slate-700); line-height: 1.5;
       letter-spacing: -0.006em; margin: 20px 0 0; }
  .sub.narrow { max-width: 46ch; }
  .center .sub.narrow { margin-left: auto; margin-right: auto; }

  .hero .sub { max-width: 44ch; margin: 24px auto 0; font-size: 20.5px;
       font-weight: 700; letter-spacing: -.014em; line-height: 1.45; }

  .under { font-size: 14px; color: var(--slate-700); margin-top: 16px;
       display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .center .under { justify-content: center; }

  .under.nad { margin: 0 0 18px; }

  @media (max-width: 560px) {
    .under.nad .sep-trial { display: none; }
    .under.nad .trial { flex-basis: 100%; text-align: center; }
  }
  .os { display: inline-flex; align-items: center; gap: 7px; color: var(--w-text-dim);
       font-size: 14px; font-weight: 600; }
  .os svg { width: 15px; height: 15px; }

  .hero { padding: 44px 0 30px; background:
       radial-gradient(1100px 520px at 50% -6%, color-mix(in srgb, var(--blue-100) 55%, transparent), transparent 64%),
       radial-gradient(1560px 560px at 50% 78%, color-mix(in srgb, var(--ink-800) 15%, transparent), transparent 66%),
       linear-gradient(180deg, color-mix(in srgb, var(--sand-50) 35%, #fff), var(--sand-50)); }

  .demo { position: relative; max-width: 900px; margin: 54px auto 0; }

  .demo .screen { position: relative; border-radius: 22px; padding: 30px 30px 150px;
       background: linear-gradient(158deg,
         color-mix(in srgb, var(--ink-800) 66%, transparent),
         color-mix(in srgb, var(--ink-950) 74%, transparent));
       -webkit-backdrop-filter: blur(10px) saturate(130%);
       backdrop-filter: blur(10px) saturate(130%);
       box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09),
                   0 30px 70px rgb(7 15 25 / .26); }

  .demo .win { text-align: left; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08),
       0 20px 50px rgb(0 0 0 / .35); }
  .demo .win .cnt { min-height: 178px; padding: 22px 24px 26px; }
  .demo .to { font-size: 13px; color: var(--w-text-faint); padding-bottom: 13px;
       margin-bottom: 15px; border-bottom: 1px solid var(--w-hairline); }
  .demo .text { font-size: 16px; line-height: 1.75; color: var(--slate-800); }
  .demo .text .g { opacity: 0; transition: opacity .16s var(--w-ease); }
  .demo .text .g.in { opacity: 1; }
  .demo .caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px;
       background: var(--w-accent); vertical-align: -.16em;
       animation: caret 1.05s step-end infinite; }
  @keyframes caret { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }

  .demo .win.term { background: var(--ink-950); }
  .demo .win.term .tb { background: var(--ink-900); border-bottom-color: rgb(255 255 255 / .08); }
  .demo .win.term .tb i { background: rgb(255 255 255 / .20); }
  .demo .win.term .tb span { color: var(--slate-500); }
  .demo .win.term .to { font-family: var(--w-font-mono); font-size: 12.5px; line-height: 1.75;
       color: var(--slate-400); border-bottom-color: rgb(255 255 255 / .08); }
  .demo .win.term .to .p { color: var(--eq-ink-8); }
  .demo .win.term .to .ok { color: var(--ok-300); }
  .demo .win.term .to .bad { color: var(--danger-300); }
  .demo .win.term .text { font-family: var(--w-font-mono); font-size: 13.5px;
       color: var(--slate-25); line-height: 1.7; }
  .demo .win.term .text::before { content: "> "; color: var(--eq-ink-8); font-weight: 700; }

  .demo .taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
       display: flex; align-items: center; justify-content: center; gap: 16px;
       padding: 0 18px; border-radius: 0 0 22px 22px;
       background: rgb(255 255 255 / .07);
       -webkit-backdrop-filter: saturate(140%) blur(10px);
       backdrop-filter: saturate(140%) blur(10px);
       border-top: 1px solid rgb(255 255 255 / .10); }
  .demo .taskbar .ti { width: 22px; height: 22px; display: block; opacity: .55;
       object-fit: contain;
       transition: opacity var(--w-dur-2) var(--w-ease); }

  .demo .taskbar .tapp { position: relative; display: grid; place-items: center;
       width: 30px; height: 30px; border-radius: 8px;
       transition: background var(--w-dur-2) var(--w-ease); }
  .demo .taskbar .tapp.on { background: rgb(255 255 255 / .13); }
  .demo .taskbar .tapp.on .ti { opacity: 1; }
  .demo .taskbar .tapp::after { content: ""; position: absolute; bottom: 1px;
       left: 50%; width: 14px; height: 2px; border-radius: 999px;
       background: var(--w-accent); opacity: 0;
       transform: translateX(-50%) scaleX(.25);
       transition: opacity var(--w-dur-2) var(--w-ease), transform var(--w-dur-2) var(--w-ease); }
  .demo .taskbar .tapp.on::after { opacity: 1; transform: translateX(-50%); }
  .demo .taskbar .clock { position: absolute; right: 18px;
       font-family: var(--w-font-mono); font-size: 11.5px; color: rgb(255 255 255 / .55); }

  .demo .tray { position: absolute; right: 62px; top: 50%;
       transform: translateY(-50%); display: grid; place-items: center;
       width: 24px; height: 24px; border-radius: 6px;
       transition: background var(--w-dur-2) var(--w-ease); }
  .demo .tray svg { width: 15px; height: 15px; opacity: .5;
       transition: opacity var(--w-dur-2) var(--w-ease); }
  .demo[data-state="listen"] .tray, .demo[data-state="work"] .tray {
       background: var(--w-accent-soft); }
  .demo[data-state="listen"] .tray svg, .demo[data-state="work"] .tray svg { opacity: 1; }

  .demo .tray::after { content: ""; position: absolute; top: 1px; right: 1px;
       width: 5px; height: 5px; border-radius: 50%; background: var(--danger-500);
       opacity: 0; transform: scale(.4);
       transition: opacity var(--w-dur-2) var(--w-ease), transform var(--w-dur-2) var(--w-ease); }
  .demo[data-state="listen"] .tray::after { opacity: 1; transform: none; }

  .demo .dockrow { position: absolute; left: 0; right: 0; bottom: 62px;
       display: flex; flex-direction: column; align-items: center; gap: 10px; }

  .demo .pillrow { position: relative; display: flex; align-items: center; }
  .demo .mowca { position: absolute; right: 100%; top: 50%; margin-right: 18px;
       transform: translateY(-50%) translateX(6px); color: rgb(255 255 255 / .92);
       opacity: 0;
       transition: opacity .28s var(--w-ease), transform .28s var(--w-ease); }
  .demo .mowca svg { width: 54px; height: 33px; display: block; }

  .demo .mowca .f1, .demo .mowca .f2, .demo .mowca .f3 { opacity: .22; }
  .demo[data-state="listen"] .mowca { opacity: 1; transform: translateY(-50%); }

  .demo[data-state="listen"][data-mowa] .mowca .f1 { animation: fala 1.5s ease-in-out infinite; }
  .demo[data-state="listen"][data-mowa] .mowca .f2 { animation: fala 1.5s ease-in-out .18s infinite; }
  .demo[data-state="listen"][data-mowa] .mowca .f3 { animation: fala 1.5s ease-in-out .36s infinite; }
  @keyframes fala { 0%, 62%, 100% { opacity: .22 } 26% { opacity: 1 } }
  @media (max-width: 940px) {

    .demo .mowca { display: none; }
  }
  .demo .keys { display: flex; align-items: center; gap: 6px; opacity: 0; height: 0;
       transition: opacity .2s var(--w-ease); }
  .demo[data-state="idle"] .keys { opacity: 1; height: auto; }
  .demo .keys kbd { font-family: var(--w-font-mono); font-size: 12.5px; font-weight: 700; padding: 5px 10px;
       border-radius: 7px; background: var(--w-surface-raised); color: var(--w-text);
       box-shadow: inset 0 0 0 1px var(--w-line), 0 2px 0 var(--slate-200);
       transition: transform .09s var(--w-ease), box-shadow .09s var(--w-ease); }
  .demo .keys.press kbd { transform: translateY(2px);
       box-shadow: inset 0 0 0 1px var(--w-line); }
  .demo .keys .plus { color: var(--w-text-faint); font-size: 12px; }

  .demo .glass { overflow: hidden; position: relative; justify-content: center;
       box-sizing: border-box;
       transition: width .3s var(--w-ease), height .3s var(--w-ease),
                   padding .3s var(--w-ease); }
  .demo .glass .inner { display: flex; align-items: center; gap: 11px;
       transition: opacity .18s .1s var(--w-ease); }

  .demo .handle { position: absolute; width: 34px; height: 5px; border-radius: 999px;
       background: rgb(60 60 67 / .45); opacity: 0;
       transition: opacity .18s .1s var(--w-ease); }
  .demo[data-state="idle"] .glass { width: 47px; height: 13px; padding: 0; }
  .demo[data-state="idle"] .glass .inner { opacity: 0; transition: opacity .1s; }
  .demo[data-state="idle"] .handle { opacity: 1; }

  .demo[data-state="work"] .cb { visibility: hidden; }

  .kroki { position: absolute; top: -18px; right: -8px; z-index: 3;
       display: flex; flex-direction: column; align-items: flex-end; gap: 9px;
       list-style: none; margin: 0; padding: 0; }

  @media (min-width: 1040px) { .kroki { right: -40px; } }
  .kroki[hidden] { display: none; }

  .krok[data-krok="1"] { --obrot: 2.4deg; margin-right: 30px; }
  .krok[data-krok="2"] { --obrot: -2.4deg; }

  .krok { display: flex; align-items: center; gap: 11px; text-align: left;
       max-width: 300px; padding: 10px 15px 10px 11px; border-radius: 14px;
       background: color-mix(in srgb, #fff 55%, var(--sand-100));
       box-shadow: inset 0 0 0 1px var(--w-hairline), 0 2px 6px rgb(16 26 41 / .05);
       transform: rotate(var(--obrot)) scale(.965);
       transition: background var(--w-dur-2) var(--w-ease),
                   box-shadow var(--w-dur-2) var(--w-ease),
                   transform var(--w-dur-2) var(--w-ease); }
  .krok.on { background: color-mix(in srgb, #fff 92%, var(--sand-50));
       box-shadow: inset 0 0 0 1px var(--w-hairline),
                   0 2px 4px rgb(16 26 41 / .07), 0 16px 34px rgb(16 26 41 / .16);
       transform: rotate(var(--obrot)) scale(1); }
  .krok-n { flex-shrink: 0; display: grid; place-items: center;
       width: 26px; height: 26px; border-radius: 50%;
       background: var(--slate-400); color: #fff;
       font-family: var(--w-font-mono); font-size: 13px; font-weight: 700;
       transition: background var(--w-dur-2) var(--w-ease); }
  .krok.on .krok-n { background: var(--ink-900); }
  .krok-t { font-size: 13.5px; font-weight: 600; line-height: 1.45;
       color: var(--w-text-faint);
       transition: color var(--w-dur-2) var(--w-ease); }
  .krok.on .krok-t { color: var(--w-text); }
  @media (max-width: 940px) {

    .kroki { position: static; align-items: center; margin: 16px auto 0; }

    .krok[data-krok="1"] { --obrot: 0deg; margin-right: 0; }
    .krok[data-krok="2"] { --obrot: 0deg; }
    .krok { max-width: 520px;
         box-shadow: inset 0 0 0 1px var(--w-hairline), 0 2px 4px rgb(16 26 41 / .05); }
    .krok.on { box-shadow: inset 0 0 0 1px var(--w-hairline), 0 2px 4px rgb(16 26 41 / .07); }
  }

  .transform { margin-top: 44px; display: grid; align-items: center;
       grid-template-columns: 1fr 76px 1.12fr; }
  @media (max-width: 940px) {
    .transform { grid-template-columns: 1fr; gap: 0; }
  }
  .card { background: var(--w-surface-raised); border-radius: 20px; padding: 26px 28px 28px;
       box-shadow: 0 1px 3px rgb(16 26 41 / .06), 0 18px 46px rgb(16 26 41 / .10);
       text-align: left; }
  .card .k { font-family: var(--w-font-mono); font-size: 12px; font-weight: 700; letter-spacing: .06em;
       text-transform: uppercase; color: var(--w-text-faint); margin-bottom: 14px;
       display: flex; align-items: center; gap: 8px; }
  .card .k i { width: 7px; height: 7px; border-radius: 50%; display: block; }
  .card.raw { background: var(--sand-100); box-shadow: none;
       outline: 1px solid var(--w-hairline); outline-offset: -1px;
       transform: rotate(-1.1deg); }
  .card.raw p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--slate-500); }
  .card.out { transform: rotate(.7deg); }
  .card.out .mail { font-size: 16px; line-height: 1.7; color: var(--slate-800); }
  .card.out .mail b { display: block; margin-bottom: 10px; }
  .card.out .mail ul { margin: 12px 0 0; padding-left: 20px; }
  .card.out .mail li { margin-bottom: 6px; }
  @media (max-width: 940px) {
    .card.raw, .card.out { transform: none; }
    .card.out { margin-top: 0; }
  }

  .arrow { display: grid; place-items: center; }
  .arrow .ln { display: none; }
  .arrow .bubble { width: 46px; height: 46px; border-radius: 50%;
       background: var(--ink-900); display: grid; place-items: center;
       box-shadow: 0 6px 18px rgb(16 26 41 / .30); flex-shrink: 0; }
  .arrow .bubble svg { width: 21px; height: 21px; }
  @media (max-width: 940px) {
    .arrow { padding: 22px 0; }
    .arrow .ln { display: none; }
  }

  .plnote { margin-top: 46px; border-radius: 20px; padding: 30px 34px;
       background: linear-gradient(150deg,
         color-mix(in srgb, var(--blue-100) 42%, var(--w-surface-raised)),
         var(--w-surface-raised) 62%);
       box-shadow: inset 0 0 0 1px var(--w-accent-line),
                   0 1px 3px rgb(59 42 22 / .06), 0 14px 34px rgb(59 42 22 / .09);
       text-align: left; }
  .plnote-in { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
  .plnote-txt { flex: 1; min-width: 260px; }
  .plnote h3 { font-size: 1.3rem; margin-bottom: 8px; }
  .plnote p { margin: 0; font-size: 15px; color: var(--w-text-dim); line-height: 1.62;
       max-width: 56ch; }

  .plflag { width: 30px; height: 19px; margin-right: 12px; vertical-align: -1px;
       transform: rotate(-7deg); transform-origin: 60% 90%;
       filter: drop-shadow(0 2px 5px rgb(59 42 22 / .22)); }
  .plnote[hidden] { display: none; }

  @media (max-width: 480px) {
    .plnote { padding: 26px 16px; }
    .plnote-txt { flex-basis: 100%; min-width: 0; }
    .plnote .btn { padding-left: 14px; padding-right: 14px; gap: 8px;
         white-space: normal; text-align: center; }
  }

  .strip { padding: 22px 0 60px; border-bottom: 1px solid var(--w-hairline); }

  .strip .lbl { text-align: center; margin: 0 auto 26px; max-width: 40ch;
       font-size: 18px; font-weight: 600; letter-spacing: -.01em;
       color: var(--w-text-heading); }
  .apps { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
       list-style: none; margin: 0; padding: 0; }
  .app { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px;
       border-radius: 11px; background: var(--w-surface-raised); font-size: 15px; font-weight: 600;
       color: var(--slate-700); box-shadow: inset 0 0 0 1px var(--w-line),
       0 1px 2px rgb(16 26 41 / .04); }
  .app svg, .app img { width: 20px; height: 20px; display: block;
       flex-shrink: 0; object-fit: contain; }

  .speed { background: var(--sand-100); }
  .bars { margin-top: 52px; display: flex; flex-direction: column; gap: 26px;
       max-width: 780px; margin-left: auto; margin-right: auto; }
  .bar .top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
  .bar .who { font-size: 16px; font-weight: 600; }
  .bar .num { margin-left: auto; font-family: var(--w-font-display); font-weight: 800;
       font-size: 32px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .bar .num s { text-decoration: none; font-family: var(--w-font-mono); font-size: 13px; font-weight: 400;
       color: var(--w-text-dim); margin-left: 5px; letter-spacing: 0; }
  .bar .track { height: 18px; border-radius: 999px; background: var(--sand-200);
       overflow: hidden; }
  .bar .track i { display: block; height: 100%; border-radius: 999px;
       width: 0; transition: width 1.1s var(--w-ease); }
  .bar.on .track i.k { width: 25%; background: var(--slate-400); }
  .bar.on .track i.w { width: 100%; background: var(--w-eq-sweep); }

  .row { display: grid; grid-template-columns: 1fr 1.15fr; gap: 68px;
       align-items: center; padding: 70px 0; }
  .row.flip > .shotwrap { order: -1; }
  @media (max-width: 940px) {

    .row, .row.flip { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .row.flip > .shotwrap { order: 0; }
  }
  .row .tag { display: inline-block; font-size: 12px; font-weight: 700;
       letter-spacing: .08em; text-transform: uppercase; color: var(--w-accent-ink);
       background: var(--w-accent-soft); padding: 5px 11px; border-radius: 7px;
       margin-bottom: 18px; }
  .row p { font-size: 17px; color: var(--w-text-dim); line-height: 1.68; margin: 16px 0 0; }
  .shotwrap { border-radius: 18px; padding: 34px 30px;
       background: linear-gradient(160deg, var(--blue-50), var(--sand-100));
       box-shadow: inset 0 0 0 1px var(--w-hairline); }

  @media (max-width: 480px) { .shotwrap { padding: 24px 16px; } }

  .win { background: var(--w-surface-raised); border-radius: 12px; overflow: hidden;
       box-shadow: 0 2px 6px rgb(16 26 41 / .07), 0 20px 44px rgb(16 26 41 / .13); }
  .win .tb { height: 34px; display: flex; align-items: center; gap: 6px;
       padding: 0 13px; background: var(--sand-100);
       border-bottom: 1px solid var(--w-hairline); }
  .win .tb i { width: 8px; height: 8px; border-radius: 50%;
       background: var(--slate-300); display: block; }
  .win .tb span { font-family: var(--w-font-mono); font-size: 11.5px;
       color: var(--w-text-faint); }

  .win .tb .ic, .win .tb .ic-term { width: 14px; height: 14px; margin-left: 8px;
       display: block; flex-shrink: 0; object-fit: contain; border-radius: 3px; }

  .win .tb .ic-term { display: none; }
  .win.term .tb .ic { display: none; }
  .win.term .tb .ic-term { display: block; }
  .win .cnt { padding: 20px 22px 26px; font-size: 14.5px; line-height: 1.7;
       color: var(--slate-700); }

  .win.panel .panel-h { font-family: var(--w-font-display); font-weight: 700;
       font-size: 16.5px; line-height: 1.25; letter-spacing: -.02em;
       color: var(--w-text-heading); margin: 0 0 9px; }
  .win.panel .panel-p { font-size: 11px; line-height: 1.45;
       color: var(--w-text-dim); margin: 0 0 11px; }

  .win.panel .tb { background: var(--slate-100); }
  .win.panel .cnt { background: var(--slate-50); padding: 17px 17px 19px; }
  .wpisy { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
  .wpisy li { display: flex; align-items: flex-start; gap: 9px;
       background: var(--w-surface-raised); border-radius: 9px;
       padding: 10px 13px; font-size: 13.5px; line-height: 1.5; }
  .wpisy .mocny { font-weight: 700; color: var(--w-text-heading); }

  .wpisy .slaby { color: var(--w-text-dim); white-space: pre-line;
       overflow-wrap: anywhere; }
  .wpisy .strz { color: var(--slate-300); }
  .wpisy .akcja { margin-left: auto; padding-left: 10px; color: var(--w-text-faint);
       font-size: 12.5px; white-space: nowrap; }

  @media (max-width: 480px) {
    .win.panel .cnt { padding: 15px 13px 17px; }
    .wpisy li { padding: 10px 12px; }
    .wpisy.snippety li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
         gap: 2px 7px; align-items: baseline; }
    .wpisy.snippety li > :first-child { grid-column: 1 / 3; grid-row: 1; }
    .wpisy.snippety .akcja { grid-column: 3; grid-row: 1; }
    .wpisy.snippety .strz { grid-column: 1; grid-row: 2; }
    .wpisy.snippety li > :nth-child(3) { grid-column: 2 / 4; grid-row: 2; }
  }
  @media (max-width: 360px) {
    .wpisy li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
         gap: 2px 7px; align-items: baseline; }
    .wpisy li > :first-child { grid-column: 1 / 3; grid-row: 1; }
    .wpisy .akcja { grid-column: 3; grid-row: 1; }
    .wpisy .strz { grid-column: 1; grid-row: 2; }
    .wpisy li > :nth-child(3) { grid-column: 2 / 4; grid-row: 2; }
  }

  .glass { display: inline-flex; align-items: center; gap: 11px; height: 52px;
       padding: 0 9px; border-radius: 999px;
       background: linear-gradient(180deg, #FDFDFE, #F4F4F7);
       border: 1px solid rgb(0 0 0 / .08);
       box-shadow: inset 0 1px 0 rgb(255 255 255 / .85),
                   0 2px 6px rgb(0 0 0 / .10),
                   0 10px 28px rgb(0 0 0 / .24); }

  .glass .cb { width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0;
       background: transparent; color: #6e6e73; display: grid;
       place-items: center; }
  .glass .cb svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
       stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

  .glass .cb.ok { background: #141414; color: #fff;
       box-shadow: 0 4px 12px rgb(0 0 0 / .22), inset 0 1px 0 rgb(255 255 255 / .12); }
  .glass .cb.ok svg { stroke-width: 2.8; }

  .eq { position: relative; flex: none; display: block; width: 62px; height: 28px;
       overflow: hidden;
       -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 10%, #000 74%, transparent 100%);
               mask-image: linear-gradient(270deg, transparent 0, #000 10%, #000 74%, transparent 100%); }
  .eq i { position: absolute; left: 0; top: 0; display: block; width: 2px; height: 2px;
       border-radius: 999px; background: oklch(0.62 0.15 228); will-change: transform; }

  .glass .word { display: flex; flex-direction: column; align-items: flex-start;
       text-align: left; line-height: 1; }
  .glass .word b { font-size: 11px; font-weight: 600; letter-spacing: .08em;
       text-transform: uppercase; color: #1d1d1f; white-space: nowrap;
       line-height: 1; }

  .glass .word s { font-size: 16px; line-height: 1; margin-top: -2px;
       text-decoration: none; white-space: nowrap; }
  .glass .word s span { font-size: 8px; font-weight: 600; letter-spacing: .12em;
       text-transform: uppercase;
       color: color-mix(in srgb, var(--blue-500) 75%, black); }

  .dark { background: var(--ink-950); color: var(--slate-25); }
  .dark h2 { color: var(--slate-25); }
  .dark .sub { color: var(--slate-300); }
  .modes { margin-top: 46px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
       max-width: 880px; margin-left: auto; margin-right: auto; }
  @media (max-width: 780px) { .modes { grid-template-columns: 1fr; } }
  .mode { border-radius: 16px; padding: 26px 28px; background: rgb(255 255 255 / .04);
       box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); text-align: left; }
  .mode.pick { background: rgb(30 160 218 / .10);
       box-shadow: inset 0 0 0 1.5px var(--w-accent-line); }
  .mode .h { display: flex; align-items: center; gap: 10px; font-weight: 700;
       font-size: 17px; margin-bottom: 10px; }
  .mode .h svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
       stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mode.pick .h { color: var(--blue-300); }
  .mode p { margin: 0; font-size: 14.5px; color: var(--slate-400); line-height: 1.65; }

  .pricing { background: var(--sand-100); }
  .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
       max-width: 1080px; margin: 50px auto 0; }
  @media (max-width: 900px) {
    .plans { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
  }
  .plan { display: flex; flex-direction: column; border-radius: 20px;
       padding: 32px 30px 34px; background: var(--w-surface-raised);
       box-shadow: inset 0 0 0 1px var(--w-line); text-align: left; }
  @media (max-width: 380px) { .plan { padding: 28px 22px 30px; } }
  .plan.pro { background: var(--ink-950); color: var(--slate-25); box-shadow: none; }
  .plan .nm { font-family: var(--w-font-mono); font-size: 13px; font-weight: 700; letter-spacing: .06em;
       line-height: 1.6; text-transform: uppercase; color: var(--w-text-faint); }
  .plan.pro .nm { color: var(--blue-300); }
  .plan .pr { font-family: var(--w-font-display); font-weight: 800; font-size: 44px;
       letter-spacing: -.04em; margin: 12px 0 2px; white-space: nowrap; }
  .plan .per { font-size: 14px; color: var(--w-text-dim); }
  .plan.pro .per { color: var(--slate-400); }
  .plan ul { list-style: none; margin: 26px 0 28px; padding: 0; font-size: 15px; flex: 1; }
  .plan li { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0; }
  .plan li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px;
       fill: none; stroke: var(--w-accent-ink); stroke-width: 2.5;
       stroke-linecap: round; stroke-linejoin: round; }
  .plan.pro li svg { stroke: var(--blue-300); }

  .plan li small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5;
       color: var(--w-text-dim); }
  .plan.pro li small { color: var(--slate-400); }
  .plan .fn { margin-left: 1px; }
  .plan .btn { width: 100%; }
  .plan.pro .btn.ghost { background: var(--slate-25); color: var(--ink-950);
       box-shadow: none; }

  .plans-note { max-width: 1080px; margin: 24px auto 0; text-align: left;
       font-size: 13.5px; line-height: 1.6; color: var(--w-text-dim); }
  @media (max-width: 900px) { .plans-note { max-width: 480px; } }
  .plans-note p { margin: 0 0 4px; }
  .plans-note a { color: var(--w-text); text-decoration: underline;
       text-underline-offset: 3px; text-decoration-thickness: 1px; }

  .faq-list { max-width: 820px; margin: 46px auto 0; display: grid; gap: 10px;
       text-align: left; }
  .faq-list details { background: var(--w-surface-raised); border-radius: 16px;
       box-shadow: inset 0 0 0 1px var(--w-line); }
  .faq-list summary { display: flex; align-items: center; justify-content: space-between;
       gap: 18px; padding: 19px 22px; cursor: pointer; list-style: none;
       font-weight: 700; font-size: 16.5px; line-height: 1.4;
       color: var(--w-text-heading); border-radius: 16px; }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary svg { width: 18px; height: 18px; flex-shrink: 0; fill: none;
       stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
       transition: transform .2s var(--w-ease); }
  .faq-list details[open] summary svg { transform: rotate(45deg); }
  .faq-list .a { padding: 0 22px 21px; font-size: 15.5px; line-height: 1.65;
       color: var(--w-text-dim); max-width: 68ch; }
  .faq-list .a p { margin: 0; }
  .faq-list .a a { color: var(--w-accent-ink); text-decoration: underline;
       text-underline-offset: 3px; }

  .under.cta-row { margin-top: 32px; gap: 14px; justify-content: center; }
  .under.more-row { margin-top: 36px; justify-content: center; }
  .under.speed-row { margin-top: 44px; justify-content: center; }
  .under.final-row { margin-top: 34px; gap: 14px; justify-content: center; }
  .tag.solo { display: inline-block; font-size: 12px; font-weight: 700;
       letter-spacing: .08em; text-transform: uppercase; color: var(--w-accent-ink);
       background: var(--w-accent-soft); padding: 5px 11px; border-radius: 7px;
       margin-bottom: 18px; }
  .card .k i.dot-raw { background: var(--slate-400); }
  .card .k i.dot-out { background: var(--w-accent); }
  .tcaret { color: var(--w-accent); }
  .tile-pill { display: flex; justify-content: center; margin-top: -26px; }

  .final { background: var(--sand-50); position: relative; overflow: hidden; }
  .final > .wrap { position: relative; z-index: 1; }
  .aurora.fin { top: auto; bottom: 0; height: 100%; opacity: .8;
       -webkit-mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / .4) 30%, #000 60%, rgb(0 0 0 / .5) 86%, transparent 100%);
       mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / .4) 30%, #000 60%, rgb(0 0 0 / .5) 86%, transparent 100%); }

  body { position: relative; }

  .aurora { position: absolute; top: 0; left: 0; right: 0;
       height: calc(100vh + 200px); height: calc(100dvh + 200px);
       height: var(--aurora-h, calc(100dvh + 200px));
       overflow: hidden; pointer-events: none; z-index: 0; opacity: .95;
       -webkit-mask-image: linear-gradient(180deg, #000 42%, rgb(0 0 0 / .72) 64%, rgb(0 0 0 / .28) 84%, transparent 100%);
       mask-image: linear-gradient(180deg, #000 42%, rgb(0 0 0 / .72) 64%, rgb(0 0 0 / .28) 84%, transparent 100%); }
  .aurora-in { position: absolute; inset: 0; }

  .aurora { --zorza-slupek: 4px; --zorza-podzialka: 5px; --zorza-mieksz: .45px; }
  .aurora img {
       -webkit-mask-image: repeating-linear-gradient(90deg,
           transparent 0, #000 var(--zorza-mieksz),
           #000 calc(var(--zorza-slupek) - var(--zorza-mieksz)),
           transparent var(--zorza-slupek), transparent var(--zorza-podzialka));
       mask-image: repeating-linear-gradient(90deg,
           transparent 0, #000 var(--zorza-mieksz),
           #000 calc(var(--zorza-slupek) - var(--zorza-mieksz)),
           transparent var(--zorza-slupek), transparent var(--zorza-podzialka)); }

  .aurora img { display: block; width: 100%; height: 100%; object-fit: fill; }
  .hero { position: relative; }
  .hero > .wrap { position: relative; z-index: 1; }

  .hero { background:
       radial-gradient(1560px 560px at 50% 78%, color-mix(in srgb, var(--ink-800) 15%, transparent), transparent 66%); }

  .hero .sub, .final .sub, .drobne { color: var(--w-text-heading); }
  .hero .drobne .os, .final .drobne .os { color: inherit; }

  .drobne .sep { color: color-mix(in srgb, currentColor 42%, transparent); }

  header { background: transparent; border-bottom-color: transparent;
       -webkit-backdrop-filter: none; backdrop-filter: none;

       transition: background .25s var(--w-ease), border-color .25s var(--w-ease); }
  header.stuck { background: color-mix(in srgb, var(--w-bg) 86%, transparent);
       border-bottom-color: var(--w-hairline);
       -webkit-backdrop-filter: saturate(150%) blur(12px);
       backdrop-filter: saturate(150%) blur(12px); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .bar .track i { transition: none; }
  }