:root { color-scheme: dark; --bg:#a9bdce; --bg-soft:#b4cadb; --card:#c0d1df; --card-2:#bcd0df; --card-3:#d3e6ed; --line:rgb(16 38 56 / .17); --line-2:rgb(16 38 56 / .28); --text:#102638; --text-hi:#102638; --muted:#15222c; --faint:#293d4d; --prose:#15222c; --violet:#0e3f45; --violet-2:#123f47; --violet-ink:#fff; --violet-soft: rgb(var(--acc-rgb) / 0.13); --blue:#155c65; --mint: #3ccf95; --amber: #ffc98b; --todo: #ffd166; --acc-rgb:14 63 69; --blue-rgb:21 92 101; --glass-rgb:192 209 223; --bg-rgb:169 189 206; --fg-rgb:16 38 56; --shade-rgb:16 38 56; --shade-k:.45; --glow-k:0; --head-bg:rgb(180 202 219 / .98); --backdrop: rgb(5 4 9 / 0.7); --dot:#0e3f45; --dot-rgb:14 63 69; --connector: rgb(255 255 255 / 0.45); --store-hover: #fff; --error-bg: rgb(255 100 100 / 0.08); --error-line: rgb(255 120 120 / 0.4); --tick-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7ADFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --plus-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7ADFF' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E"); --yes-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0614' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --grad:linear-gradient(105deg,#0e3f45 0%,#155c65 100%); --lv-app:#a9bdce; --lv-input:#bcd0df; --lv-card:#c0d1df; --lv-t1:#102638; --lv-t2:#15222c; --lv-t3:#293d4d; --lv-acc:#0e3f45; --lv-acc2:#123f47; --lv-acc-bg:rgb(21 92 101 / .12); --lv-on-acc: #0b0614; --lv-ok: #2bdc9b; --lv-on-ok: #04281c; --lv-info: #6abce6; --lv-over: #e69f00; --lv-lime: #d5f06a; --lv-teal: #5ee6da; --lv-coral: #f07a4a; --lv-amber: #f2b233; --lv-hip: #8fe9c4; --lv-under: #9163d5; --lv-body:#7c90a7; --lv-edge:#566c85; --lv-zone: #2f2d33; --lv-faded: rgb(255 255 255 / 0.24); --lv-gold: #e0b84f; --lv-gold-2: #f3d98a; --vol-0: #7347af; --vol-1: #ae3ea8; --vol-2: #de4181; --vol-3: #f66754; --vol-4: #fe973b; --rec-0: #3346d6; --rec-1: #1c82e0; --rec-2: #12b5b5; --rec-3: #45da85; --rec-4: #c6f46e; --rng-below: #f2cb45; --rng-in: #2bdc9b; --rng-above: #ff8a3d; --rng-plan: #8b95ab; --lv-medal: #e6be55; } :root[data-theme="light"] { color-scheme: light; --bg: #eef3f9; --bg-soft: #e5ecf5; --card: #f8fafd; --card-2: #ebf1f9; --card-3: #d9e4f2; --text: #131a29; --text-hi: #070b14; --muted: #36425c; --faint: #4c5870; --prose: #242f45; --violet: #7100d4; --violet-2: #610bb1; --violet-ink: #fff; --violet-soft: rgb(var(--acc-rgb) / 0.09); --blue: #1053a1; --mint: #006146; --amber: #e0a43c; --todo: #8a5a00; --acc-rgb: 113 0 212; --blue-rgb: 16 83 161; --glass-rgb: 255 255 255; --bg-rgb: 238 243 249; --fg-rgb: 19 26 41; --shade-rgb: 34 44 78; --shade-k: 0.28; --glow-k: 0.55; --head-bg: rgb(var(--bg-rgb) / 0.82); --backdrop: rgb(11 18 34 / 0.36); --dot: #7100d4; --dot-rgb: 113 0 212; --connector: rgb(19 26 41 / 0.34); --store-hover: #000; --error-bg: rgb(139 0 1 / 0.06); --error-line: rgb(139 0 1 / 0.35); --tick-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23610BB1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --plus-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23610BB1' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E"); --yes-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --grad: linear-gradient(115deg, #1053a1 0%, #7100d4 60%, #610bb1 100%); --lv-app: #d9e4f2; --lv-input: #d0dcec; --lv-card: #ebf1f9; --lv-t1: #131a29; --lv-t2: #36425c; --lv-t3: #48546b; --lv-acc: #7100d4; --lv-acc2: #610bb1; --lv-acc-bg: rgb(113 0 212 / 0.11); --lv-on-acc: #fff; --lv-ok: #006146; --lv-on-ok: #fff; --lv-info: #1053a1; --lv-over: #824500; --lv-lime: #495c00; --lv-teal: #005e65; --lv-coral: #a02100; --lv-amber: #6e4b00; --lv-hip: #2e9e76; --lv-under: #8254c4; --lv-body: #b3c2d7; --lv-edge: #93a4bd; --lv-zone: #c7d1e0; --lv-faded: rgb(19 26 41 / 0.2); --lv-gold: #8a6512; --lv-gold-2: #6b4c12; --vol-0: #8254c4; --vol-1: #b139ab; --vol-2: #d72e78; --vol-3: #e54f36; --vol-4: #ea7e00; --rec-0: #161f72; --rec-1: #1552ae; --rec-2: #007f90; --rec-3: #249a4c; --rec-4: #6cc23a; --rng-below: #e0a800; --rng-in: #17865b; --rng-above: #e8640f; --rng-plan: #7c8aa0; --lv-medal: #d4a12e; } :root { --r-sm: 12px; --r: 20px; --r-lg: 28px; --wrap: 1180px; --gutter: clamp(20px, 5vw, 32px); --font: ui-sans-serif, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: ui-sans-serif, "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "SF Pro Display", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; --shadow: 0 30px 80px -30px rgb(var(--shade-rgb) / calc(0.8 * var(--shade-k))); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; } html.kg-wait main, html.kg-wait .site-foot { opacity: 0; animation: kg-show 0s 3s forwards; } @keyframes kg-show { to { opacity: 1; } } img, svg, video, iframe { display: block; max-width: 100%; } a { color: var(--violet-2); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--text-hi); } h1, h2, h3, h4 { font-family: var(--font-display); margin: 0 0 0.5em; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; } h1 { font-size: clamp(2.35rem, 5.4vw, 4.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; } h2 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); font-weight: 780; letter-spacing: -0.035em; } h3 { font-size: 1.25rem; font-weight: 700; } p { margin: 0 0 1em; text-wrap: pretty; } ::selection { background: var(--violet); color: var(--violet-ink); } :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; } .wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); } .wrap-narrow { max-width: calc(780px + 2 * var(--gutter)); } .site-head > .wrap, .site-head .drawer > .wrap, .site-foot > .wrap { max-width: none; padding: 0 max(var(--gutter), clamp(16px, 3.5vw, 64px)); } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--violet); color: var(--violet-ink); padding: 8px 14px; border-radius: 10px; } .todo { background: rgba(255, 209, 102, 0.14); color: var(--todo); border: 1px dashed rgba(255, 209, 102, 0.6); border-radius: 6px; padding: 0 6px; font-family: var(--font-mono); font-size: 0.88em; } .btn { --h: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h); padding: 0 22px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: 650 16px/1 var(--font); text-decoration: none; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; white-space: nowrap; } .btn:hover { color: var(--text-hi); border-color: rgb(var(--fg-rgb) / 0.3); background: var(--card-3); transform: translateY(-1px); } .btn svg { width: 20px; height: 20px; flex: none; } .btn-primary { background: var(--violet); border-color: var(--violet); color: var(--violet-ink); } .btn-primary:hover { background: var(--violet-2); border-color: var(--violet-2); color: var(--violet-ink); } .btn-ghost { background: transparent; } .btn-sm { --h: 40px; padding: 0 16px; font-size: 15px; } .btn[disabled], .btn.is-off { opacity: 0.55; pointer-events: none; } .store { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 20px 8px 16px; border-radius: 16px; background: var(--text); color: var(--violet-ink); text-decoration: none; border: 1px solid var(--text); transition: transform 0.15s ease, background 0.15s ease; } .store:hover { color: var(--violet-ink); background: var(--store-hover); transform: translateY(-1px); } .store svg { width: 26px; height: 26px; flex: none; } .store small { display: block; font-size: 12px; line-height: 1.2; opacity: 0.75; font-weight: 550; } .store b { display: block; font-size: 17px; line-height: 1.2; font-weight: 750; letter-spacing: -0.01em; } .store.is-soon { background: transparent; color: var(--muted); border: 1px dashed var(--line-2); pointer-events: none; } .store-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .site-head { position: sticky; top: 0; z-index: 50; background: var(--head-bg); backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px); border-bottom: 1px solid var(--line); } .head-bar { display: flex; align-items: center; gap: 28px; height: 72px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 800 20px/1 var(--font-display); letter-spacing: -0.03em; } .brand img { width: 34px; height: 34px; border-radius: 9px; } .brand:hover { color: var(--text-hi); } .main-nav { display: flex; gap: 2px; margin-left: auto; min-width: 0; } .main-nav a { color: var(--muted); text-decoration: none; white-space: nowrap; font-weight: 550; font-size: 15.5px; padding: 8px 12px; border-radius: 10px; } .main-nav a:hover { color: var(--text); background: var(--card); } .main-nav a[aria-current="page"] { color: var(--text); background: var(--card-2); } .head-tools { flex: none; margin-left: auto; display: flex; align-items: center; gap: 10px; } @media (min-width: 961px) { .main-nav + .head-tools { margin-left: 0; } } .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; min-width: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text); font: 600 14px/1 var(--font); cursor: pointer; } .icon-btn:hover { background: var(--card); } .icon-btn svg { width: 18px; height: 18px; } .burger { display: none; } .theme-btn { width: 40px; padding: 0; } .theme-btn .ico-light, :root[data-theme="light"] .theme-btn .ico-dark { display: none; } :root[data-theme="light"] .theme-btn .ico-light { display: block; } html:not([data-theme]) .theme-btn { display: none; } @media (max-width: 1120px) { .head-bar { gap: 18px; } .main-nav a { padding: 8px 8px; font-size: 15px; } } .head-dl { background: transparent; border-color: rgb(var(--acc-rgb) / 0.55); color: var(--violet-2); } .head-dl:hover { background: var(--violet-soft); border-color: var(--violet); color: var(--text-hi); } #lang-open { gap: 7px; } @media (max-width: 960px) { .main-nav { display: none; } .burger { display: inline-flex; } .head-dl { display: none; } } .drawer { display: none; border-top: 1px solid var(--line); padding: 10px 0 18px; } .drawer.is-open { display: block; } .drawer a { display: block; padding: 12px 0; color: var(--text); text-decoration: none; font-weight: 600; font-size: 18px; border-bottom: 1px solid var(--line); } .drawer .btn { margin-top: 16px; width: 100%; } @media (min-width: 961px) { .drawer { display: none !important; } } .lang-dialog { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--card); color: var(--text); padding: 0; width: min(760px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 48px)); box-shadow: var(--shadow); } .lang-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(4px); } .lang-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 8px; } .lang-dialog h2 { font-size: 20px; margin: 0; } .lang-grid { list-style: none; margin: 0; padding: 10px 14px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); grid-auto-rows: 1fr; gap: 4px; } .lang-grid li { display: flex; } .lang-grid button, .lang-grid a { width: 100%; min-height: calc(2 * 1.2em + 24px); display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text); font: 550 15px/1.2 var(--font); cursor: pointer; text-align: left; text-decoration: none; } .lang-grid button:hover, .lang-grid a:hover { background: var(--card-2); } .lang-grid button[aria-current="true"], .lang-grid a[aria-current="true"] { border-color: var(--violet); background: var(--violet-soft); } .lang-grid .code { font: 600 11px/1 var(--font-mono); color: var(--faint); text-transform: uppercase; } .section { padding: clamp(64px, 9vw, 120px) 0; } .section-tight { padding: clamp(40px, 6vw, 72px) 0; } .section-soft { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 650 13px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet-2); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 22px; height: 6px; border-radius: 3px; background: var(--grad); } .lead { font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 62ch; } .section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head.center .lead { margin-left: auto; margin-right: auto; } .center { text-align: center; } .weekstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: 168px; } .weekstrip i { height: 8px; border-radius: 4px; background: var(--card-3); } .weekstrip i.on { background: var(--amber); } .hm { position: relative; isolation: isolate; overflow: hidden; padding: clamp(24px, 4vw, 56px) 0 clamp(56px, 7vw, 96px); } .hm-grid { --hm-fig: clamp(214px, 60vw, 300px); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(5, auto); } .hm-h1 { grid-column: 1 / -1; grid-row: 1 / 4; display: grid; grid-template-rows: subgrid; align-items: start; --hm-h1: clamp(2.5rem, 10.5vw, 4.4rem); margin: 0; font-size: var(--hm-h1); line-height: 0.98; letter-spacing: -0.05em; -webkit-hyphens: auto; hyphens: auto; } .hm-h1:lang(de), .hm-h1:lang(el) { font-size: calc(var(--hm-h1) * 0.9); } .hm-h1:lang(hu) { font-size: calc(var(--hm-h1) * 0.82); } .hm-h1 .grad-text { grid-row: 3; justify-self: end; text-align: right; background: none; color: var(--violet-2); } .hm-fig { grid-column: 1 / -1; grid-row: 2; justify-self: center; position: relative; width: var(--hm-fig); margin: 22px 0 18px; } .hm-fig::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 44%; width: 290%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--korrel), var(--gloed), var(--ringen); -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); pointer-events: none; } .hm-body { position: relative; } .hm-body::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -3%; width: 90%; height: 7%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--acc-rgb) / 0.4), transparent); } .hm-img { width: 100%; height: auto; } .hm-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .hm-lines line { stroke: var(--connector); stroke-width: 1; vector-effect: non-scaling-stroke; } .hm-dot { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 4px rgb(var(--dot-rgb) / 0.18), 0 0 16px 3px rgb(var(--dot-rgb) / 0.35); } .hm-chip { position: absolute; z-index: 2; left: var(--x); top: var(--y); transform: translateY(-50%); display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 7px; margin: 0; padding: 6px 10px 6px 8px; border: 1px solid var(--line-2); border-radius: 12px; background: rgb(var(--glass-rgb) / 0.78); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); font-size: 12px; line-height: 1.25; white-space: nowrap; } .hm-chip.is-l { left: auto; right: calc(100% - var(--x)); } .hm-chip i { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 3px; } .hm-chip b { font-weight: 700; } .hm-chip span { grid-column: 2; color: var(--muted); font-weight: 550; } @media (max-width: 699px) { .hm-chip { width: max-content; max-width: calc(100% - var(--x) + (100vw - var(--hm-fig)) / 2 - 12px); white-space: normal; } .hm-chip.is-l { max-width: calc(var(--x) + (100vw - var(--hm-fig)) / 2 - 12px); } } .hm-note { margin-top: 16px; text-align: center; font-size: 13px; color: var(--faint); } .hm-left { grid-column: 1; grid-row: 4; margin-top: 30px; } .hm-left .lead { margin: 0 0 24px; font-size: clamp(1.05rem, 1.4vw, 1.15rem); } .hm-left .lead:last-child { margin-bottom: 0; } .hm-right { grid-column: 1; grid-row: 5; margin-top: 30px; } .hm-week { padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 18px; background: rgb(var(--glass-rgb) / 0.62); } .hm-week-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; font-size: 14px; } .hm-week-top span { color: var(--faint); font-size: 13px; font-weight: 600; } .hm-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; text-align: center; color: var(--faint); font-size: 11.5px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; } .hm-days li::before { content: ""; display: block; height: 30px; margin-bottom: 7px; border-radius: 7px; background: var(--card-3); } .hm-days li:nth-child(2)::before, .hm-days li:nth-child(3)::before { background: var(--amber); } .hm-days li:nth-child(3) { color: var(--text); } .hm-days li:nth-child(3)::before { box-shadow: inset 0 0 0 2.5px var(--violet); } .hm-days li:nth-child(5)::before, .hm-days li:nth-child(6)::before { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--amber) 70%, transparent); } .hm-sum { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .hm-sum p { margin: 0; color: var(--faint); font-size: 12.5px; line-height: 1.3; } .hm-sum b { display: block; color: var(--text); font: 800 22px/1.1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: no-preference) { .hm-dot::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgb(var(--dot-rgb) / 0.55); border-radius: 50%; animation: hm-puls 2.6s ease-out infinite; } @keyframes hm-puls { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(2.3); opacity: 0; } } } @media (min-width: 700px) { .hm-grid { --hm-fig: 300px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } .hm-h1 { --hm-h1: clamp(3.2rem, 8vw, 4.6rem); } .hm-left { grid-row: 4; } .hm-right { grid-column: 2; grid-row: 4; } .hm-chip { font-size: 12.5px; } } @media (min-width: 1080px) { .hm-grid { --hm-fig: clamp(290px, 25vw, 320px); --hm-half: clamp(225px, 18vw, 245px); grid-template-columns: minmax(0, 1fr) minmax(0, var(--hm-half)) minmax(0, var(--hm-half)) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 20px; } .hm-h1 { grid-row: 1; grid-template-rows: none; grid-template-columns: subgrid; --hm-h1: clamp(3.3rem, 4.7vw, 4.4rem); padding-top: 28px; } .hm-h1 .grad-text { grid-row: 1; grid-column: 4; } .hm-fig { grid-column: 2 / 4; grid-row: 1 / 3; margin: 0; } .hm-left { grid-column: 1; grid-row: 2; max-width: 380px; } .hm-right { grid-column: 4; grid-row: 2; justify-self: end; width: 100%; max-width: 320px; } .hm-chip { width: max-content; max-width: calc(100% - var(--x) + (2 * var(--hm-half) + 20px - var(--hm-fig)) / 2); padding: 7px 12px 7px 9px; font-size: 13px; white-space: normal; } .hm-chip.is-l { max-width: calc(var(--x) + (2 * var(--hm-half) + 20px - var(--hm-fig)) / 2); } } .hero-note { margin-top: 16px; font-size: 14.5px; color: var(--faint); } .hero-note a { color: var(--muted); } .phone { position: relative; border-radius: 38px; padding: 9px; background: linear-gradient(160deg, #2a2633, #121017 60%); box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.07); } .phone img, .phone .phone-screen { width: 100%; height: auto; aspect-ratio: 412 / 915; object-fit: cover; object-position: top; border-radius: 30px; background: #0a0a0c; } .phone-screen { overflow: hidden; position: relative; } .strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft); } .strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .strip-grid > div { padding: 28px 24px; border-left: 1px solid var(--line); } .strip-grid > div:first-child { border-left: 0; } .strip b { display: block; font: 800 clamp(1.7rem, 3vw, 2.3rem) / 1 var(--font-display); letter-spacing: -0.03em; margin-bottom: 6px; font-variant-numeric: tabular-nums; } .strip span { color: var(--muted); font-size: 15px; } @media (max-width: 760px) { .strip-grid { grid-template-columns: 1fr 1fr; } .strip-grid > div:nth-child(3) { border-left: 0; } .strip-grid > div:nth-child(n + 3) { border-top: 1px solid var(--line); } } .cnt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; margin-top: clamp(72px, 10vw, 140px); } .cnt h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); } .cnt + .showcase { margin-top: clamp(72px, 10vw, 140px); } .cnt .lead + .lead { margin-top: 14px; } .cnt-src { margin: 20px 0 0; max-width: 62ch; font-size: 0.875rem; line-height: 1.55; color: var(--faint); } .cnt-src a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .cnt-src a:hover { color: var(--text); } .cnt-ex { display: grid; gap: 16px; padding: 26px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); } .cnt-from { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; } .cnt-from b { font-size: 1.15rem; font-weight: 700; } .cnt-from span { color: var(--muted); font-weight: 600; } .cnt-arrow { color: var(--faint); font-size: 1.3rem; line-height: 1; } .cnt-to { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .cnt-to li { display: grid; grid-template-columns: minmax(5.5em, max-content) 1fr 2ch; align-items: center; gap: 14px; } .cnt-to b { font-weight: 600; } .cnt-to .bar { height: 10px; border-radius: 6px; background: rgb(var(--fg-rgb) / 0.08); overflow: hidden; } .cnt-to .bar i { display: block; height: 100%; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, var(--vol-0), var(--vol-1)); } .cnt-to .n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; } .cnt.cnt-in { display: block; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); } .cnt-in h4 { margin: 0 0 10px; font-size: 1.15rem; } .cnt-in p { margin: 0 0 12px; color: var(--muted); } .cnt-in .cnt-src { margin-top: 0; } .cnt-in .cnt-ex { margin-top: 20px; padding: 20px; } @media (max-width: 860px) { .cnt { grid-template-columns: 1fr; } } .showcase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; } .showcase + .showcase { margin-top: clamp(72px, 10vw, 140px); } .showcase.flip > .lv-podium { order: 2; } .showcase > .lv-podium { grid-area: auto; max-width: 470px; } .fx-chapter, .section:has(.lv-podium), .section-tight:has(.lv-podium) { overflow-x: clip; } .showcase h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); } @media (max-width: 860px) { .showcase { grid-template-columns: 1fr; } .showcase.flip > .lv-podium { order: 0; } } .ticks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; } .ticks li { position: relative; padding-left: 36px; color: var(--muted); } .ticks li b { color: var(--text); font-weight: 650; } .ticks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; margin-top: 2px; border-radius: 7px; background: var(--violet-soft) var(--tick-ico) center / 14px no-repeat; } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .cards.two { grid-template-columns: repeat(2, 1fr); } .cards.four { grid-template-columns: repeat(4, 1fr); } @media (max-width: 960px) { .cards, .cards.four { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .cards, .cards.two, .cards.four { grid-template-columns: 1fr; } } .card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; } .card h3 { margin-bottom: 8px; } .card p { color: var(--muted); margin: 0; } .card p + p { margin-top: 10px; } a.card { display: block; color: inherit; text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; } a.card:hover { border-color: var(--line-2); transform: translateY(-2px); } .card .more { display: inline-block; margin-top: 14px; color: var(--violet-2); font-weight: 600; font-size: 15px; } .icon-tile { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--violet-soft); color: var(--violet-2); margin-bottom: 18px; } .icon-tile svg { width: 24px; height: 24px; } .card .num { font: 800 15px/1 var(--font-mono); color: var(--violet-2); margin-bottom: 14px; display: block; } .steps { counter-reset: stap; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; } .steps li { counter-increment: stap; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; } .steps li::before { content: counter(stap, decimal-leading-zero); display: block; font: 800 14px/1 var(--font-mono); color: var(--violet-2); margin-bottom: 18px; } .steps h3 { margin-bottom: 8px; } .steps p { color: var(--muted); margin: 0; } @media (max-width: 860px) { .steps { grid-template-columns: 1fr; } } .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; } @media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } } .plan { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px; } .plan.is-best { border-color: var(--violet); background: linear-gradient(180deg, rgb(var(--acc-rgb) / 0.12), transparent 55%), var(--card); } .plan-tag { align-self: flex-start; font: 700 12px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--violet-ink); background: var(--violet); border-radius: 999px; padding: 7px 10px; margin-bottom: 18px; } .plan-tag.muted { background: var(--card-3); color: var(--muted); } .plan h3 { font-size: 1.1rem; color: var(--muted); font-weight: 650; margin-bottom: 12px; } .price { font: 800 clamp(2.2rem, 4vw, 2.8rem) / 1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .price small { font-size: 16px; font-weight: 600; color: var(--muted); letter-spacing: 0; } .per-month { color: var(--violet-2); font-weight: 600; margin-top: 10px; } .plan p { color: var(--muted); margin: 16px 0 0; font-size: 15.5px; } .plan .ticks { margin-top: 22px; font-size: 15.5px; } .notice { display: flex; gap: 14px; align-items: flex-start; background: var(--violet-soft); border: 1px solid rgb(var(--acc-rgb) / 0.35); border-radius: var(--r); padding: 18px 20px; color: var(--text); } .notice svg { width: 22px; height: 22px; flex: none; color: var(--violet-2); margin-top: 2px; } .notice p { margin: 0; } .compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-size: 16px; } .compare th, .compare td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line); } .compare tr:last-child td { border-bottom: 0; } .compare thead th { font: 700 13px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--card-2); } .compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; width: 120px; } .compare .group td { background: var(--bg-soft); font-weight: 700; color: var(--violet-2); font-size: 14px; } .yes, .no { display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; } .yes { background: var(--violet) var(--yes-ico) center / 14px no-repeat; } .no { background: var(--card-3); width: 12px; height: 3px; border-radius: 2px; } @media (max-width: 560px) { .compare th, .compare td { padding: 13px 12px; font-size: 15px; } .compare td:not(:first-child), .compare th:not(:first-child) { width: 72px; } } .qa { border-top: 1px solid var(--line); } .qa details { border-bottom: 1px solid var(--line); } .qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 2px; font-weight: 650; font-size: 17.5px; } .qa summary::-webkit-details-marker { display: none; } .qa summary::after { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--card-2) var(--plus-ico) center / 13px no-repeat; transition: transform 0.2s ease; } .qa details[open] summary::after { transform: rotate(45deg); } .qa .answer { padding: 0 2px 22px; color: var(--muted); max-width: 70ch; } .qa .answer p:last-child, .qa .answer ol:last-child, .qa .answer ul:last-child { margin-bottom: 0; } .qa .answer ol, .qa .answer ul { padding-left: 1.25em; margin: 0 0 1em; } .qa .answer li { margin-bottom: 6px; } .qa .answer b, .qa .answer strong { color: var(--text); } .help-search { position: relative; max-width: 620px; margin: 28px 0 0; } .help-search svg { position: absolute; left: 18px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--faint); } .help-search input { width: 100%; height: 58px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); font: 500 17px/1 var(--font); padding: 0 20px 0 52px; } .help-search input:focus { outline: none; border-color: var(--violet); } .help-layout { display: grid; grid-template-columns: 250px 1fr; gap: 48px; align-items: start; } .help-toc { position: sticky; top: 96px; display: grid; gap: 2px; } .help-toc a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--muted); text-decoration: none; font-weight: 550; font-size: 15.5px; } .help-toc a:hover { background: var(--card); color: var(--text); } .help-toc a[aria-current="true"] { background: var(--violet-soft); color: var(--text); box-shadow: inset 3px 0 0 var(--violet); } .help-toc svg { width: 18px; height: 18px; color: var(--violet-2); } .help-cat + .help-cat { margin-top: 56px; } .help-cat h2 { font-size: 1.6rem; display: flex; align-items: center; gap: 12px; } .help-cat h2 .icon-tile { margin: 0; width: 40px; height: 40px; border-radius: 12px; } .help-empty { color: var(--muted); padding: 30px 0; } @media (max-width: 900px) { .help-layout { grid-template-columns: 1fr; } .help-toc { position: static; grid-template-columns: 1fr 1fr; } } mark { background: rgb(var(--acc-rgb) / 0.3); color: inherit; border-radius: 3px; } .page-hero { position: relative; padding: clamp(48px, 7vw, 96px) 0 clamp(28px, 4vw, 48px); overflow: hidden; } .page-hero::before { content: ""; position: absolute; right: -10%; top: -60%; width: 70%; height: 700px; background: radial-gradient( closest-side, rgb(var(--acc-rgb) / 0.18), transparent 70% ); pointer-events: none; } .page-hero .wrap { position: relative; } .page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); max-width: 18ch; } .page-hero .lead { margin-top: 6px; } .prose { max-width: 760px; } .prose h2 { font-size: 1.45rem; margin-top: 2.2em; scroll-margin-top: 96px; } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: 1.1rem; margin-top: 1.6em; } .prose p, .prose li { color: var(--prose); } .prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.1em; } .prose li { margin-bottom: 7px; } .prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 15.5px; } .prose th, .prose td { text-align: left; vertical-align: top; padding: 11px 12px; border-bottom: 1px solid var(--line); } .prose th { color: var(--muted); font-weight: 650; } .legal-meta { color: var(--faint); font-size: 15px; margin-bottom: 30px; } .legal-layout { display: grid; grid-template-columns: 1fr 240px; gap: 56px; align-items: start; } .legal-toc { position: sticky; top: 96px; font-size: 14.5px; border-left: 1px solid var(--line); padding-left: 18px; } .legal-toc b { display: block; font: 700 12px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; } .legal-toc a { display: block; color: var(--muted); text-decoration: none; padding: 5px 0; } .legal-toc a:hover { color: var(--text); } .legal-toc a[aria-current="true"] { color: var(--violet-2); font-weight: 600; margin-left: -19px; padding-left: 17px; border-left: 2px solid var(--violet); } @media (max-width: 960px) { .legal-layout { grid-template-columns: 1fr; } .legal-toc { display: none; } } .timeline { position: relative; max-width: 820px; } .release { display: grid; grid-template-columns: 170px 1fr; gap: 32px; padding: 34px 0; border-top: 1px solid var(--line); } .release-date { font: 650 14px/1.4 var(--font-mono); color: var(--violet-2); text-transform: uppercase; letter-spacing: 0.04em; } .release h2 { font-size: 1.45rem; } .release ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; } .release li b { display: block; color: var(--text); margin-bottom: 2px; } .release li span { color: var(--muted); } @media (max-width: 700px) { .release { grid-template-columns: 1fr; gap: 10px; } } .form { display: grid; gap: 18px; } .field label { display: block; font-weight: 650; font-size: 15px; margin-bottom: 8px; } .field .hint { display: block; color: var(--faint); font-size: 14px; margin-top: 6px; } .field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line-2); background: var(--bg-soft); color: var(--text); font: 500 16px/1.4 var(--font); border-radius: 14px; padding: 14px 16px; } .field textarea { min-height: 170px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--violet); } .check { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: 15px; } .check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--violet); flex: none; } .form-status { display: none; border-radius: var(--r); padding: 20px; background: var(--violet-soft); border: 1px solid rgb(var(--acc-rgb) / 0.35); } .form-status.is-on { display: block; } .form-status.is-error { background: var(--error-bg); border-color: var(--error-line); } .contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: start; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } .side-list { display: grid; gap: 14px; } .cta-band { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: clamp(40px, 6vw, 72px); background: radial-gradient( 120% 140% at 100% 0%, rgb(var(--acc-rgb) / 0.35), transparent 60% ), radial-gradient(90% 120% at 0% 100%, rgb(var(--blue-rgb) / 0.18), transparent 60%), var(--card); border: 1px solid var(--line-2); display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; } .cta-band h2 { margin-bottom: 12px; } .cta-band p { color: var(--muted); margin: 0; } .cta-band .store-row { justify-content: flex-end; } @media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; } .cta-band .store-row { justify-content: flex-start; } } .chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; } .chips li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 15px; } .asset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .asset-grid figure { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; } .asset-grid img { border-radius: 12px; width: 100%; height: auto; } .asset-grid figcaption { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 12px; font-size: 14px; color: var(--muted); } @media (max-width: 860px) { .asset-grid { grid-template-columns: 1fr 1fr; } } .facts-table { width: 100%; border-collapse: collapse; } .facts-table th, .facts-table td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .facts-table th { width: 38%; color: var(--muted); font-weight: 550; padding-right: 20px; } .quote-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; color: var(--prose); } .site-foot { border-top: 1px solid var(--line); background: var(--bg-soft); padding: 64px 0 30px; margin-top: clamp(40px, 6vw, 80px); font-size: 15px; } .foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; } .foot-grid h2 { font: 700 12px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; } .foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .foot-grid a { color: var(--muted); text-decoration: none; } .foot-grid a:hover { color: var(--text); } .foot-about p { color: var(--muted); max-width: 32ch; margin-top: 14px; } .foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--faint); font-size: 14px; } .foot-bottom p { margin: 0; } .foot-bottom .foot-credits { flex-basis: 100%; } .foot-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .foot-bottom a:hover { color: var(--text); } @media (max-width: 960px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-about { grid-column: 1 / -1; } } .nf { min-height: 60vh; display: grid; place-items: center; text-align: center; } .nf .big { font: 800 clamp(5rem, 16vw, 9rem) / 1 var(--font-display); letter-spacing: -0.06em; } .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .btn, .store, a.card { transition: none; } } .demo-cover { z-index: 1; isolation: isolate; } @media (max-width: 620px) { .prose table { display: block; overflow-x: auto; white-space: nowrap; } .prose td { white-space: normal; min-width: 160px; overflow-wrap: normal; } } .legal-layout > *, .help-layout > *, .contact-grid > *, .showcase > * { min-width: 0; } .flag { width: 22px; height: 15px; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgb(var(--fg-rgb) / 0.22); overflow: hidden; } .lang-grid button, .lang-grid a { justify-content: flex-start; } .lang-grid .name { flex: 1; } .chips li { display: inline-flex; align-items: center; gap: 8px; } .chips .flag { width: 18px; height: 12px; } .help-cat { scroll-margin-top: 110px; } @media (max-width: 900px) { .help-layout { gap: 20px; } .help-toc { position: sticky; top: 72px; z-index: 20; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter); background: var(--bg); border-bottom: 1px solid var(--line); } .help-toc::-webkit-scrollbar { display: none; } .help-toc a { flex: none; white-space: nowrap; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14.5px; } .help-toc a[aria-current="true"] { box-shadow: none; border-color: var(--violet); } .help-cat { scroll-margin-top: 140px; } } @media (max-width: 560px) { .store-row { flex-direction: column; align-items: stretch; } .store-row .store { width: 100%; } .foot-grid ul { gap: 2px; } .foot-grid a { display: inline-block; padding: 8px 0; } .asset-grid figcaption a { padding: 10px 0 10px 8px; } } .fan-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(40px, 6vw, 80px) 0 0; text-align: center; } .fan-hero::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -140px; width: min(1400px, 160%); height: 680px; transform: translateX(-50%); background: radial-gradient( 50% 50% at 50% 50%, rgb(var(--acc-rgb) / 0.28), rgb(var(--blue-rgb) / 0.08) 50%, transparent 72% ); pointer-events: none; } .fan-head h1 { max-width: 17ch; margin: 0 auto 22px; font-size: clamp(2.3rem, 5.4vw, 4.2rem); } .uline { padding-bottom: 0.14em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 18' preserveAspectRatio='none'%3E%3Cpath d='M4 12C90 4 190 3 396 9' fill='none' stroke='%23ad81fe' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 100% / 100% 0.26em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; } :root[data-theme="light"] .uline { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 18' preserveAspectRatio='none'%3E%3Cpath d='M4 12C90 4 190 3 396 9' fill='none' stroke='%237100d4' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); } .fan-head .lead { margin: 0 auto; } .fan-ctas { justify-content: center; margin: 28px 0 0; } .btn[hidden] { display: none; } .fan-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 22px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 14.5px; line-height: 1.4; } .fan-trust li:not(:last-child)::after { content: "\00b7"; margin: 0 0.65em; color: var(--faint); } .fan { --u: clamp(150px, 18.5vw, 232px); position: relative; display: flex; justify-content: center; align-items: flex-start; height: calc(var(--u) * 1.6); margin: clamp(40px, 5vw, 64px) 0 0; padding: 22px 0 0; list-style: none; overflow: hidden; text-align: left; } .fan::after { content: ""; position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(rgb(var(--bg-rgb) / 0), var(--bg)); pointer-events: none; } .fan li { position: relative; z-index: var(--z, 3); flex: none; width: calc(var(--u) * var(--s, 1)); margin: 0 calc(var(--u) * -0.05); transform: translateY(var(--dy, 0)) rotate(var(--r, 0deg)); transform-origin: 50% 100%; } .fan li:nth-child(1) { --s: 0.81; --r: -10deg; --dy: calc(var(--u) * 0.2); --z: 1; } .fan li:nth-child(2) { --s: 0.9; --r: -5deg; --dy: calc(var(--u) * 0.08); --z: 2; } .fan li:nth-child(3) { --s: 1.07; --z: 4; } .fan li:nth-child(4) { --s: 0.9; --r: 5deg; --dy: calc(var(--u) * 0.08); --z: 2; } .fan li:nth-child(5) { --s: 0.81; --r: 10deg; --dy: calc(var(--u) * 0.2); --z: 1; } .fan a { display: block; position: relative; border-radius: 30px; color: var(--text); text-decoration: none; transition: transform 0.2s ease, filter 0.2s ease; filter: brightness(0.72) saturate(0.9); } .fan li:nth-child(3) a { filter: brightness(1.06); } .fan a:hover, .fan a:focus-visible { filter: none; } .fan a:hover { transform: translateY(-6px); } .fan a:focus-visible { outline-offset: 4px; border-radius: 30px; } .fan-tag { position: absolute; z-index: 2; left: 50%; top: -13px; transform: translateX(-50%); display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 999px; background: rgb(var(--glass-rgb) / 0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 650 12.5px/1 var(--font); white-space: nowrap; } .fan li:nth-child(3) .fan-tag { border-color: var(--violet); background: var(--violet); color: var(--violet-ink); } @media (max-width: 639px) { .fan { --u: 46vw; height: calc(var(--u) * 1.55); } .fan li:nth-child(1), .fan li:nth-child(5) { display: none; } .fan-tag { height: 23px; padding: 0 9px; font-size: 11.5px; } } @media (prefers-reduced-motion: reduce) { .fan a { transition: none; } .fan a:hover { transform: none; } } .fx-nav { position: sticky; top: 72px; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); } .fx-nav .wrap { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; padding-bottom: 10px; } .fx-nav .wrap::-webkit-scrollbar { display: none; } .fx-nav a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; } .fx-nav a:hover { color: var(--text); background: var(--card); } .fx-nav a[aria-current="true"] { color: var(--text); background: var(--violet-soft); border-color: var(--violet); } .fx-num { font: 700 13px/1 var(--font-mono); color: var(--violet-2); } .fx-chapter { scroll-margin-top: 130px; } .fx-chapter + .fx-chapter { border-top: 1px solid var(--line); } .fx-chapter-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(40px, 6vw, 80px); } .fx-chapter-head .fx-num { font-size: 15px; } .fx-chapter-title { margin: 0; font: 800 clamp(2rem, 4.4vw, 3.4rem)/1.05 var(--font-display); letter-spacing: -0.035em; } .fx-chapter .showcase { scroll-margin-top: 130px; } .tab-ico { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .fx-nav a .tab-ico { color: var(--violet-2); } .fx-chapter-head { align-items: center; gap: 20px; } .fx-chapter-head .lead { margin: 10px 0 0; max-width: 62ch; } .fx-tab { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 18px; background: var(--violet-soft); border: 1px solid rgb(var(--acc-rgb) / 0.35); color: var(--violet-2); } .fx-tab .tab-ico { width: 32px; height: 32px; } .fx-title { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0; } .prem { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: var(--violet-soft); color: var(--violet-2); font: 700 11.5px/1.5 var(--font-mono); letter-spacing: 0.04em; vertical-align: 1px; } .fx-prem-note { color: var(--muted); font-size: 14.5px; margin-top: -20px; margin-bottom: 40px; } @media (max-width: 560px) { .fx-chapter-head { align-items: flex-start; gap: 14px; } .fx-tab { width: 48px; height: 48px; border-radius: 14px; } .fx-tab .tab-ico { width: 24px; height: 24px; } } .demo-phone .phone-screen { background: #0b0a10; } .demo-cover { transition: opacity 0.4s ease; } .demo-cover.is-gone { opacity: 0; pointer-events: none; } .demo-cover.is-loading .btn { cursor: progress; opacity: 1; } .demo-cover.is-loading .btn svg { display: none; } .demo-cover.is-loading .btn::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: kg-spin 0.8s linear infinite; } .demo-cover.is-loading p { visibility: hidden; } @keyframes kg-spin { to { transform: rotate(360deg); } } .demo-cover.is-loading.is-slow p { visibility: visible; } .asset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 860px) { .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .asset-grid figcaption { flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; } .demo-stage > * { min-width: 0; } @media (max-width: 420px) { h1, h2, h3, label, td, th, .facts-table td { overflow-wrap: anywhere; } .prose { min-width: 0; } .prose table { max-width: 100%; } } .demo-phone { width: min(360px, 100%); } @media (max-width: 900px) { .demo-stage { grid-template-columns: minmax(0, 1fr); } } .form { grid-template-columns: minmax(0, 1fr); } @media (max-width: 420px) { p, li, .hint { overflow-wrap: anywhere; } } @media (max-width: 420px) { .btn { white-space: normal; text-align: center; line-height: 1.25; padding-top: 10px; padding-bottom: 10px; } } @media (max-width: 700px), (pointer: coarse) and (max-height: 500px) { .alleen-groot { display: none !important; } } .lang-hint { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 32px); padding: 6px 6px 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font: 550 15px/1.2 var(--font); } .lang-hint a { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; } .lang-hint a:hover span { text-decoration: underline; } .lang-hint a > svg:last-child { width: 18px; height: 18px; color: var(--violet-2); } .lang-hint .icon-btn { height: 36px; min-width: 36px; padding: 0; border-color: transparent; } .lokveld { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } :root { --gold: #e0b84f; --gold-2: #f3d98a; --gold-text: #f6f1e7; --gold-muted: #bdb3a1; } .pm-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(36px, 5vw, 72px) 0 clamp(48px, 6vw, 88px); } .pm-hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -160px; width: min(1100px, 150%); height: 700px; transform: translateX(-50%); background: radial-gradient( 50% 50% at 50% 50%, rgba(224, 184, 79, 0.15), rgb(var(--acc-rgb) / 0.06) 55%, transparent 75% ); pointer-events: none; } .pm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } .pm-center { text-align: center; padding-bottom: 12px; } .pm-icon { width: 88px; height: 88px; margin: 0 auto 22px; border-radius: 21px; box-shadow: 0 0 0 1px rgba(224, 184, 79, 0.3), 0 0 60px rgba(224, 184, 79, 0.35); } .pm-center h1 { font-size: clamp(2.2rem, 5.2vw, 3.4rem); max-width: 17ch; margin: 0 auto 18px; } .pm-center .lead { margin: 0 auto; } .pm-pane { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--r-lg); padding: 24px 22px 0; } .pm-pane h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.45rem; letter-spacing: -0.02em; } .pm-pane h2 img { border-radius: 8px; } .pm-sub { margin: 6px 0 14px; color: var(--faint); font-size: 14.5px; } .pm-list { list-style: none; margin: 0 0 22px; padding: 0; } .pm-list li { position: relative; padding: 9px 0 9px 28px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.4; } .pm-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 18px; height: 18px; background: var(--violet); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; } .pm-free { background: var(--card); border: 1px solid var(--line); } .pm-gold { background: linear-gradient(170deg, #16141a, #0a0a0c 60%); border: 1px solid rgba(224, 184, 79, 0.45); box-shadow: 0 0 60px -16px rgba(224, 184, 79, 0.3); color: var(--gold-text); } .pm-gold .pm-sub { color: var(--gold-muted); } .pm-gold .pm-list li { border-color: rgba(224, 184, 79, 0.16); } .pm-gold .pm-list li::before { background: var(--gold); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); } .pm-note { margin: -8px 0 22px; color: var(--gold-2); font-size: 14.5px; line-height: 1.45; } .pm-peek { margin-top: auto; height: clamp(230px, 24vw, 300px); overflow: hidden; border: 1px solid var(--line-2); border-bottom: 0; border-radius: 18px 18px 0 0; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); } .pm-gold .pm-peek { border-color: rgba(224, 184, 79, 0.3); } @media (min-width: 700px) { .pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pm-center { grid-column: 1 / -1; } } @media (min-width: 1100px) { .pm-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: stretch; } .pm-center { grid-column: 2; grid-row: 1; align-self: center; } .pm-free { grid-column: 1; grid-row: 1; } .pm-gold { grid-column: 3; grid-row: 1; } .pm-center h1 { font-size: clamp(2.3rem, 3.4vw, 3.2rem); } } @media (max-width: 699px) { .pm-icon { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 18px; } .pm-gold { order: 1; } .pm-free { order: 2; } .pm-pane { padding: 20px 18px 0; } } .hc-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(44px, 6vw, 88px) 0 clamp(28px, 4vw, 48px); text-align: center; } .hc-hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 30%; width: min(1100px, 170%); height: 560px; transform: translateX(-50%); background: radial-gradient( closest-side, rgb(var(--acc-rgb) / 0.22), rgb(var(--blue-rgb) / 0.05) 55%, transparent 75% ); pointer-events: none; } .hc-hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); max-width: 20ch; margin: 0 auto 16px; } .hc-hero .lead { margin: 0 auto; } .hc-hero .help-search { max-width: 700px; margin: 32px auto 0; text-align: left; } .hc-hero .help-search svg { left: 22px; width: 22px; height: 22px; color: var(--violet-2); } .hc-hero .help-search input { height: 66px; padding: 0 20px 0 58px; font-size: 18px; border-color: rgb(var(--acc-rgb) / 0.55); box-shadow: 0 0 0 5px rgb(var(--acc-rgb) / 0.1), 0 24px 60px -24px rgb(var(--shade-rgb) / calc(0.9 * var(--shade-k))); } .hc-hero .help-search input:focus { border-color: var(--violet); box-shadow: 0 0 0 5px rgb(var(--acc-rgb) / 0.3), 0 24px 60px -24px rgb(var(--shade-rgb) / calc(0.9 * var(--shade-k))); } .help-count { display: none; } @media (min-width: 560px) { .hc-hero .help-search input { padding-right: 190px; } .help-count { position: absolute; right: 11px; top: 50%; translate: 0 -50%; display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--card-2); color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; pointer-events: none; } .help-search input:not(:placeholder-shown) ~ .help-count { display: none; } .hc-hero .help-search input:not(:placeholder-shown) { padding-right: 20px; } } .hc-quick-label { margin: 28px 0 12px; color: var(--faint); font-size: 14px; font-weight: 600; } .hc-quick { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 980px; margin: 0 auto; padding: 0; } .hc-quick a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 16px 8px 13px; border: 1px solid var(--line-2); border-radius: 999px; background: rgb(var(--glass-rgb) / 0.8); color: var(--text); font-size: 15px; font-weight: 550; line-height: 1.3; text-align: left; text-decoration: none; } .hc-quick a:hover { border-color: var(--violet); background: var(--card-2); } .hc-quick svg { width: 18px; height: 18px; flex: none; color: var(--violet); } @media (max-width: 640px) { .hc-quick-label { text-align: left; margin-top: 24px; } .hc-quick { display: block; overflow: hidden; border: 1px solid var(--line-2); border-radius: 18px; background: rgb(var(--glass-rgb) / 0.85); } .hc-quick li + li { border-top: 1px solid var(--line); } .hc-quick a { display: flex; min-height: 50px; padding: 12px 14px 12px 16px; border: 0; border-radius: 0; background: none; } .hc-quick a span { flex: 1; } .hc-quick a::after { content: ""; flex: none; width: 16px; height: 16px; background: var(--faint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5l6.5 6.5L9 18.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5l6.5 6.5L9 18.5'/%3E%3C/svg%3E") center / contain no-repeat; } .hc-quick a:focus-visible { outline-offset: -3px; } } .cl-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 5vw, 72px); } .cl-hero::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -80px; width: min(760px, 120%); height: 760px; background: radial-gradient( closest-side, rgb(var(--acc-rgb) / 0.24), rgb(var(--blue-rgb) / 0.06) 55%, transparent 75% ); pointer-events: none; } .cl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; } .cl-text h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); max-width: 15ch; } .cl-tl { position: relative; list-style: none; max-width: 640px; margin: 30px 0 0; padding: 0 0 0 30px; } .cl-tl::before { content: ""; position: absolute; left: 8px; top: 14px; bottom: 8px; width: 2px; background: linear-gradient(var(--violet), var(--line-2) 45%, transparent); } .cl-tl li { position: relative; } .cl-tl li::before { content: ""; position: absolute; left: -28px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--card-3); border: 2px solid var(--line-2); } .cl-tl li.cl-now::before { left: -30px; top: 20px; width: 16px; height: 16px; border: 0; background: var(--violet); box-shadow: 0 0 0 6px rgb(var(--acc-rgb) / 0.2), 0 0 24px rgb(var(--acc-rgb) / 0.7); } .cl-tl a { display: block; color: inherit; text-decoration: none; } .cl-now a { padding: 16px 18px 18px; border: 1px solid rgb(var(--acc-rgb) / 0.5); border-radius: 18px; background: linear-gradient(160deg, rgb(var(--acc-rgb) / 0.15), rgb(var(--acc-rgb) / 0.03)); } .cl-now a:hover { border-color: var(--violet); } .cl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 14px; font-weight: 600; } .cl-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--violet); color: var(--violet-ink); font-size: 12.5px; font-weight: 750; white-space: nowrap; } .cl-now .cl-title { display: block; margin-top: 6px; font: 720 1.25rem/1.25 var(--font-display); letter-spacing: -0.015em; } .cl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .cl-chips span { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: rgb(var(--bg-rgb) / 0.6); font-size: 13.5px; line-height: 1.3; } .cl-chips .cl-more { color: var(--muted); } .cl-old { margin-top: 12px; } .cl-old a { display: flex; align-items: baseline; gap: 4px 14px; padding: 4px 0; } .cl-date { flex: none; min-width: 160px; color: var(--faint); font-size: 14px; font-weight: 600; } .cl-old .cl-title { color: var(--muted); font-weight: 600; } .cl-old a:hover .cl-title { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .cl-n { margin-left: auto; padding-left: 8px; color: var(--faint); font-size: 13.5px; white-space: nowrap; } .cl-fig { position: relative; justify-self: center; width: min(420px, 100%); margin: 0; } .cl-callout { max-width: 420px; margin: 18px auto 0; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 16px; background: rgb(var(--glass-rgb) / 0.94); box-shadow: 0 20px 50px -18px rgb(var(--shade-rgb) / calc(0.9 * var(--shade-k))); } .cl-callout b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 720 15.5px/1.25 var(--font-display); } .cl-callout > span { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.45; } @media (min-width: 1000px) { .cl-grid { grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(48px, 6vw, 96px); align-items: start; } .cl-fig { width: 100%; margin-top: 8px; } } @media (max-width: 640px) { .cl-tl { padding-left: 26px; } .cl-tl li::before { left: -24px; } .cl-tl li.cl-now::before { left: -26px; } .cl-now a { padding: 13px 14px 15px; } .cl-now .cl-title { font-size: 1.1rem; } .cl-old a { display: block; } .cl-date { display: block; min-width: 0; font-size: 13.5px; } .cl-n { display: none; } } .release { scroll-margin-top: 96px; } .pk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; } .pk-lang { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; font-size: 15px; } .pk-lang svg { width: 18px; height: 18px; flex: none; } #pk-lang { border: 1px solid var(--line-2); background: var(--bg-soft); color: var(--text); font: 600 15px/1.2 var(--font); border-radius: 999px; padding: 11px 16px; min-width: 0; max-width: 100%; } #pk-lang:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } .pk-bar .btn { margin-left: auto; } .pk-note { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; } .pk-h { margin: 40px 0 14px; font-size: 1.25rem; } .presskit .asset-grid figcaption { font-size: 13.5px; align-items: flex-start; } .pk-links { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-weight: 600; } .pk-links a { white-space: nowrap; } .presskit .pk-brand { grid-template-columns: 1fr 1fr 2fr 2fr; } .pk-brand .pk-wide { display: flex; flex-direction: column; } @media (max-width: 860px) { .presskit .pk-brand { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pk-brand .pk-wide { grid-column: span 2; } } .pk-brand .pk-wide img { margin: auto 0; } .pk-brand .pk-icon { background: #121212; } @media (max-width: 560px) { .pk-bar { padding: 16px; } .pk-bar .btn { margin-left: 0; width: 100%; } #pk-lang { flex: 1 1 160px; } } .fan-feedback { margin: 18px 0 0; } .fan-feedback a { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--violet-soft); border: 1px solid rgb(var(--acc-rgb) / 0.45); color: var(--violet-2); font-weight: 650; font-size: 15.5px; line-height: 1.35; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .fan-feedback a:hover { background: rgb(var(--acc-rgb) / 0.22); border-color: var(--violet); color: var(--text-hi); } .intro-more { margin: 32px 0 0; text-align: center; } .tst-hero { padding-bottom: clamp(24px, 4vw, 48px); } .tst-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 6vw, 96px); align-items: center; } .tst-hero-text .lead { max-width: 34em; } .tst-hero-stores { margin-top: 26px; } .tst-pill-wrap { margin: 18px 0 0; } .tst-pill { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--violet-soft); border: 1px solid rgb(var(--acc-rgb) / 0.45); color: var(--violet-2); font-weight: 650; font-size: 15.5px; line-height: 1.35; } .tst-hero-shot { display: flex; justify-content: center; } .tst-steps { --tst-gap: 22px; --tst-pad: 24px; --tst-node: 56px; list-style: none; margin: 0 auto; padding: 0; max-width: 1120px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tst-gap); } .tst-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--tst-pad) 20px 22px; } .tst-step:nth-child(1) { --tst-a: #b69cff; --tst-b: #a9a4ff; } .tst-step:nth-child(2) { --tst-a: #a9a4ff; --tst-b: #86b8ff; } .tst-step:nth-child(3) { --tst-a: #86b8ff; --tst-b: #63dcf0; } .tst-step:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: calc(var(--tst-pad) + var(--tst-node) / 2 - 1px); left: 50%; width: calc(100% + var(--tst-gap)); height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--tst-a), var(--tst-b)); box-shadow: 0 0 10px rgba(150, 160, 255, 0.55), 0 0 22px rgba(150, 160, 255, 0.25); pointer-events: none; } .tst-node { position: relative; z-index: 2; flex: none; display: grid; place-items: center; width: var(--tst-node); height: var(--tst-node); margin-bottom: 16px; border-radius: 18px; background: linear-gradient(160deg, #2a2340, #17141f); border: 1px solid rgb(var(--acc-rgb) / 0.5); box-shadow: 0 0 0 4px var(--card), 0 0 26px rgb(var(--acc-rgb) / 0.28); color: var(--violet-2); } :root[data-theme="light"] .tst-node { background: linear-gradient(160deg, #f8fafd, #e3e9f5); } .tst-node svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .tst-num { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--violet); color: var(--violet-ink); font: 800 12px/1 var(--font-mono); box-shadow: 0 0 0 3px var(--card); } .tst-step h2 { font-size: 1.12rem; font-weight: 720; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 6px; } .tst-step p { color: var(--muted); margin: 0; font-size: 15px; line-height: 1.5; max-width: 24em; } .tst-demo { padding-top: 0; } .tst-demo-head { margin-bottom: clamp(28px, 4vw, 44px); } .tst-demo-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0; } .tst-demo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(40px, 8vw, 120px); } @media (prefers-reduced-motion: no-preference) { .tst-steps.is-in .tst-step:not(:last-child)::after { background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent), linear-gradient(90deg, var(--tst-a), var(--tst-b)); background-size: 48px 100%, 100% 100%; background-repeat: no-repeat; animation: tst-licht 6s ease-in-out infinite; } .tst-steps .tst-step:nth-child(2)::after { animation-delay: 0.9s; } .tst-steps .tst-step:nth-child(3)::after { animation-delay: 1.8s; } } @keyframes tst-licht { 0% { background-position: -48px 0, 0 0; } 15%, 100% { background-position: calc(100% + 48px) 0, 0 0; } } .tst-terms { max-width: 860px; margin: 28px auto 0; padding: 22px 26px; } .tst-terms h3 { margin-bottom: 12px; } .tst-terms .ticks { margin: 0; } .tst-form { max-width: 600px; margin: 0 auto; padding: clamp(24px, 4vw, 36px); } .tst-form-head { text-align: center; margin-bottom: 24px; } .tst-form-head h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); } .tst-form-head .lead { margin: 8px auto 0; font-size: 1rem; } @media (max-width: 1060px) { .tst-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } .tst-step:nth-child(2)::after { display: none; } } @media (max-width: 860px) { .tst-hero-grid { grid-template-columns: minmax(0, 1fr); } .tst-hero-shot { justify-content: flex-start; } } @media (max-width: 600px) { .tst-steps { --tst-gap: 14px; --tst-pad: 18px; --tst-node: 52px; grid-template-columns: minmax(0, 1fr); } .tst-step { display: grid; grid-template-columns: var(--tst-node) minmax(0, 1fr); column-gap: 18px; align-items: start; text-align: left; padding: var(--tst-pad) 18px var(--tst-pad) 16px; } .tst-node { grid-row: 1 / span 2; margin: 0; border-radius: 16px; } .tst-step h2 { margin-top: 3px; } .tst-step:nth-child(2)::after { display: block; } .tst-step:not(:last-child)::after { top: calc(var(--tst-pad) + var(--tst-node) / 2); left: calc(16px + var(--tst-node) / 2 - 1px); width: 2px; height: calc(100% + var(--tst-gap)); background: linear-gradient(180deg, var(--tst-a), var(--tst-b)); } } @media (max-width: 600px) and (prefers-reduced-motion: no-preference) { .tst-steps.is-in .tst-step:not(:last-child)::after { background-image: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.95), transparent), linear-gradient(180deg, var(--tst-a), var(--tst-b)); background-size: 100% 48px, 100% 100%; animation-name: tst-licht-v; } } .wear-announcement { padding: 28px 0 0; } .wear-announcement-card { display: flex; align-items: center; gap: 32px; padding: 26px 30px; border: 1px solid rgba(153, 112, 255, .3); border-radius: 20px; background: linear-gradient(115deg, rgba(139, 83, 255, .12), rgba(0, 196, 225, .06)); } .wear-announcement-card h2 { margin: 6px 0 0; font-size: clamp(1.4rem, 3vw, 1.85rem); } .wear-announcement-card p { margin: 0; max-width: 680px; line-height: 1.65; } .wear-announcement-card > div { flex-shrink: 0; } @media (max-width: 640px) { .wear-announcement-card { align-items: flex-start; flex-direction: column; gap: 14px; padding: 22px; } } @keyframes tst-licht-v { 0% { background-position: 0 -48px, 0 0; } 15%, 100% { background-position: 0 calc(100% + 48px), 0 0; } } @media(max-width:360px){ .site-head .brand{font-size:17px;gap:0;white-space:nowrap} .site-head .brand img{display:none} .site-head .head-bar{gap:6px} .site-head .head-tools{gap:4px} .site-head .head-tools .icon-btn{min-width:44px;min-height:44px;height:44px;padding-inline:6px} .site-head .head-tools .theme-btn{width:44px;padding:0} } @media(max-width:360px){#lang-open svg{display:none}} @font-face{font-family:Kilogain;src:url('../fonts/Roboto-Regular.ttf') format('truetype');font-weight:400;font-display:swap} @font-face{font-family:Kilogain;src:url('../fonts/Roboto-Bold.ttf') format('truetype');font-weight:700;font-display:swap} @font-face{font-family:Kilogain;src:url('../fonts/Roboto-Black.ttf') format('truetype');font-weight:900;font-display:swap} :root{ --bg:#050509;--bg-soft:#0b0d16;--card:#121522;--card-2:#1a2031;--card-3:#232b40; --text:#f3f5fb;--text-hi:#fff;--muted:#aeb7ca;--faint:#8994aa;--prose:#d0d7e5; --violet:#d77cff;--violet-2:#e7afff;--violet-ink:#fff;--blue:#00dfff; --acc-rgb:160 32 240;--blue-rgb:0 223 255;--bg-rgb:5 5 9;--fg-rgb:243 245 251;--glass-rgb:18 21 34; --line:rgb(148 174 220 / .14);--line-2:rgb(148 174 220 / .3);--head-bg:rgb(5 5 9 / .92); --grad:linear-gradient(105deg,#b222ed 0%,#8055f5 48%,#00dfff 100%); --font:Kilogain,'Segoe UI',sans-serif;--font-display:Kilogain,'Segoe UI',sans-serif; --radius-card:16px;--section-space:clamp(56px,7vw,96px);--wrap:1180px; } :root[data-theme="light"]{ --bg:#a9bdce;--bg-soft:#b4cadb;--card:#c0d1df;--card-2:#bcd0df;--card-3:#d3e6ed; --text:#102638;--text-hi:#102638;--muted:#15222c;--faint:#293d4d;--prose:#15222c; --violet:#0e3f45;--violet-2:#123f47;--blue:#155c65;--bg-rgb:169 189 206;--fg-rgb:16 38 56;--glass-rgb:192 209 223; --line:rgb(16 38 56 / .17);--line-2:rgb(16 38 56 / .28);--head-bg:rgb(180 202 219 / .98); } body{font-weight:400;background:var(--bg);overflow-wrap:break-word} h1,h2,h3{font-weight:900;letter-spacing:-.035em} h2{font-size:clamp(1.8rem,3.3vw,2.7rem);line-height:1.1} .lead{line-height:1.65;font-size:clamp(1rem,1.5vw,1.15rem)} .site-head{border-bottom:1px solid var(--line);background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none} .head-bar{height:82px;gap:20px} .brand{font-size:25px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;gap:0} .brand img{display:none} .brand .brand-accent{background:var(--grad);background-clip:text;-webkit-background-clip:text;color:transparent} .main-nav a{font-size:12px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;padding:12px 10px;border-radius:0} .main-nav a[aria-current="page"]{color:var(--violet);background:transparent;box-shadow:0 2px 0 var(--violet)} .head-dl{border:1px solid #ba4cf2!important;box-shadow:0 0 15px #a020f01c} .btn,.store{transition:transform .2s,background .2s,box-shadow .2s,border-color .2s} .btn{border-radius:999px;font-weight:700} .btn-primary{color:#fff;background:var(--grad);border:0;box-shadow:0 6px 25px #a020f01c} .btn:hover,.store:hover{transform:translateY(-2px);box-shadow:0 8px 25px #a020f028} .btn-primary:hover{color:#fff} .store{border:1px solid var(--line-2);background:var(--card);color:var(--text);border-radius:10px;padding:11px 18px} .store:hover{background:var(--card-2);color:var(--text);border-color:var(--violet)} .store.is-soon{opacity:1;color:var(--muted);border-style:dashed;background:transparent} .eyebrow{font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.15em;color:var(--muted);text-transform:uppercase} .eyebrow::before{height:3px;background:var(--grad)} .gradient-text,.grad-text{background:var(--grad);background-clip:text;-webkit-background-clip:text;color:transparent} .uline,:root[data-theme="light"] .uline{background:none;padding-bottom:0} .section{padding-block:var(--section-space);border-bottom:1px solid var(--line)} .section-soft{background:var(--bg-soft)} .section-tight{padding-block:40px} .card,.plan,.help-card,.cta-band,.pm-pane{border-radius:var(--radius-card);border-color:var(--line-2);background:var(--card)} .card{box-shadow:none} a.card:hover{border-color:var(--violet);box-shadow:0 12px 35px #0002} .page-hero{padding-block:clamp(48px,7vw,88px)} .page-hero::before,.hc-hero::before,.pm-hero::before,.fan-hero::before{opacity:.35} .page-hero h1{max-width:21ch} .campaign-hero{position:relative;isolation:isolate;color:#f4f6ff;background:#050509;overflow:hidden;border-bottom:1px solid #763394} .campaign-hero::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#05050966 0%,#05050988 33%,#05050918 65%,#05050933 100%),url('../img/neon-gym.webp') 62% 42% / cover no-repeat} .campaign-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:center;min-height:670px;padding-block:54px} .campaign-copy{max-width:680px;position:relative;z-index:1} .campaign-copy .eyebrow{color:#aebfda} .campaign-copy h1{font-size:clamp(2.6rem,5.15vw,4.65rem);line-height:1.04;margin:22px 0 24px;letter-spacing:-.035em;text-wrap:balance;text-transform:uppercase} .campaign-copy .lead{max-width:40ch;color:#dce3ee;font-size:18px} .campaign-copy .store-row{margin-top:28px;gap:12px} .campaign-copy .store{color:#f4f6ff;background:#070c16c9;border-color:#70829d} .campaign-copy .store.is-soon{color:#b5bed1;border-color:#465168} .availability{display:flex;align-items:center;gap:8px;color:#b7c6da;font-size:12px;margin-top:14px} .status-dot{width:6px;height:6px;flex:none;border-radius:50%;background:#39ff88;box-shadow:0 0 10px #39ff8840} .hero-proof{display:flex;flex-wrap:wrap;gap:12px 20px;list-style:none;padding:0;margin:36px 0 0;color:#b4c2d7;font-size:12px} .hero-proof li{border-left:2px solid #00dfff80;padding-left:10px} .campaign-product{justify-self:end;padding:10px 16px 0 0} .app-shot{margin:0;min-width:0;justify-self:center;width:min(100%,258px);position:relative} .device{padding:7px;background:#04060c;border:1px solid #74839d;border-radius:33px;box-shadow:0 24px 45px #0004,7px 5px 0 -3px #283146;overflow:hidden} .device img{display:block;width:100%;height:auto;border-radius:26px;background:#131a29} .app-shot figcaption{font-size:10px;text-align:center;color:var(--muted);line-height:1.5;margin:17px 0 0} .hero-device{width:260px;transform:rotate(5deg)} .hero-device .device{box-shadow:0 0 35px #b832f525,0 35px 55px #0008} .hero-device figcaption{color:#aabbcf;transform:rotate(-5deg);font-size:10px} .benefits-section{padding-block:52px 60px} .benefits-heading{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:30px} .benefits-heading h2{max-width:19ch;margin:10px 0 0} .text-link{display:inline-block;font-size:14px;color:var(--violet);text-underline-offset:5px;font-weight:700} .benefits-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .benefit-card{display:block;position:relative;text-decoration:none;color:var(--text);border:1px solid var(--line-2);border-radius:13px;background:linear-gradient(145deg,var(--card),var(--bg));padding:25px 22px 35px;transition:border-color .2s,transform .2s,box-shadow .2s} .benefit-card:hover{color:var(--text);transform:translateY(-5px);border-color:var(--violet);box-shadow:0 12px 40px #a020f015} .benefit-icon{display:block;width:30px;height:30px;color:#c958f5;margin-bottom:24px} .benefit-icon svg{width:100%;height:100%} .benefit-icon-1{color:#00dfff}.benefit-icon-2{color:#39eab6}.benefit-icon-3{color:#ffaa33} .benefit-card h3{font-size:18px;margin-bottom:12px;letter-spacing:-.015em} .benefit-card p{font-size:13px;line-height:1.65;color:var(--muted);margin:0} .card-arrow{position:absolute;right:18px;bottom:12px;color:var(--muted)} .product-showcase{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(35px,7vw,100px);align-items:center} .phone-pair{display:flex;gap:24px;align-items:center;justify-content:center} .phone-pair .app-shot{width:210px} .phone-pair .app-shot:nth-child(2){margin-top:40px} .showcase-copy{max-width:490px} .showcase-copy h2{margin-top:15px} .value-list{list-style:none;padding:0;margin:24px 0 30px;display:grid;gap:14px;font-size:14px;color:var(--prose)} .value-list li{position:relative;padding-left:26px;line-height:1.6} .value-list li::before{content:'✓';position:absolute;left:0;color:#39dcb3;font-weight:900} .muscle-showcase{grid-template-columns:1fr 1fr} .muscle-showcase .app-shot{width:250px} .goal-legend{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:18px;margin:26px 0;font-size:13px;color:var(--muted)} .goal-legend li::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:#39ff88} .goal-legend .goal-under::before{background:#f4e83d}.goal-legend .goal-over::before{background:#ffaa33} .ownership{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center} .ownership h2{max-width:18ch;margin-top:14px} .ownership-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .ownership-grid article{border:1px solid var(--line);padding:25px;border-radius:12px;background:var(--card)} .ownership-grid span{color:var(--blue);font-size:11px;letter-spacing:.13em} .ownership-grid h3{font-size:16px;margin:14px 0 0;font-weight:700} .download-section{position:relative;isolation:isolate;overflow:hidden;padding:60px 0;background:#050509;color:#f4f6ff;border-block:1px solid #473256} .download-section::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#050509b3,#0b061788 45%,#05050944),url('../img/home-download.webp') center 30% / cover} .download-copy{max-width:610px}.download-copy .eyebrow{color:#aebbd0}.download-copy h2{margin-top:13px}.download-copy p{font-size:14px;color:#c6cfe0}.download-copy .store-row{margin-top:24px}.download-copy .store{background:#101423;color:white} .site-foot{background:var(--bg);padding-top:45px}.foot-about p{font-size:13px;max-width:28ch}.site-foot .brand{font-size:21px}.foot-grid h2{font-size:11px;letter-spacing:.09em}.foot-grid li a{font-size:13px}.foot-bottom{font-size:11px} .foot-bottom a.company-link{color:var(--violet);font-weight:650} .foot-bottom a.company-link:hover{color:var(--text)} .foot-bottom a.company-link:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:2px} .ms-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;padding-bottom:45px;text-align:left} .ms-hero-tekst h1,.ms-hero-tekst .lead{margin-left:0;text-align:left}.ms-hero-tekst h1{max-width:15ch} .fx-hero{padding-top:55px}.fx-hero .app-shot{width:210px} .showcase.screenshot-row,.lv-rij.screenshot-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,7vw,100px)} .showcase.flip>.app-shot{order:2} .showcase+.showcase{margin-top:90px} .fx-chapter .showcase{padding-block:24px} .fx-nav{background:var(--bg);border-color:var(--line);backdrop-filter:none;-webkit-backdrop-filter:none} .fx-nav a{font-size:12px} .pm-hero{padding-block:60px 40px}.pm-pane{padding:26px}.premium-preview{width:150px;margin:24px auto 0} .screenshot-row+.screenshot-row{margin-top:65px} .pm-icon{box-shadow:0 0 30px #b3893c25} .premium-availability{margin-top:24px;padding:16px;border:1px solid var(--line-2);border-radius:12px;color:var(--muted);font-size:13px;line-height:1.65;text-align:left;background:var(--card)} .premium-availability p{margin:0}.premium-availability b{color:var(--text)} .ms-functies{list-style:none;padding:0;display:grid;gap:12px;color:var(--prose);font-size:14px} .ms-functies li{padding-left:20px;position:relative;line-height:1.6}.ms-functies li::before{content:'✓';position:absolute;left:0;color:var(--blue)} .ms-bronnen{font-size:13px;line-height:1.7;color:var(--muted)} .cl-grid>.app-shot{width:220px}.cl-grid{align-items:start} .tst-hero-grid{align-items:center}.tst-hero-grid>.app-shot{width:220px} .cta-band{background:linear-gradient(115deg,var(--card),var(--bg-soft));border:1px solid var(--line-2);box-shadow:none} @media(min-width:1500px){.campaign-grid{min-height:700px}.campaign-hero::before{background-position:65% 42%}} @media(max-width:1100px){.head-bar{gap:10px}.brand{font-size:21px}.main-nav a{padding-inline:7px;font-size:11px}.campaign-grid{min-height:610px;gap:24px}.hero-device{width:230px}.campaign-copy h1{font-size:clamp(2.4rem,5vw,4rem)}.phone-pair{gap:15px}.phone-pair .app-shot{width:180px}.ownership{gap:35px}} @media(max-width:860px){ .campaign-grid{grid-template-columns:1.4fr .6fr;min-height:580px}.hero-device{width:195px}.campaign-product{padding-right:0}.campaign-copy h1{font-size:clamp(2.2rem,5.4vw,3.2rem)}.campaign-copy .lead{font-size:16px}.campaign-copy .store-row{flex-direction:column;align-items:start}.hero-proof{margin-top:24px;gap:12px} .benefits-grid{grid-template-columns:1fr 1fr}.benefits-heading{align-items:start}.product-showcase,.ownership{grid-template-columns:1fr;gap:38px}.phone-pair{order:2}.showcase-copy{max-width:600px}.muscle-showcase>.app-shot{order:2}.phone-pair .app-shot{width:220px}.ownership-grid{max-width:600px} .showcase.screenshot-row,.lv-rij.screenshot-row,.ms-hero-grid{grid-template-columns:1fr;gap:30px}.showcase.flip>.app-shot{order:0}.showcase.screenshot-row>.app-shot{order:2}.ms-hero-grid .app-shot{order:2}.ms-hero-tekst h1{max-width:18ch}.showcase+.showcase{margin-top:65px}.fx-nav{top:72px} } @media(max-width:580px){ .head-bar{height:68px}.brand{font-size:20px;letter-spacing:.1em}.head-tools{gap:6px}.head-tools .icon-btn{min-width:34px;height:34px;padding-inline:8px}.head-tools .theme-btn{display:inline-flex;width:34px;padding:0}.head-dl{display:none} .campaign-grid{grid-template-columns:1fr;gap:34px;padding-top:42px;padding-bottom:35px}.campaign-copy h1{font-size:clamp(2rem,8.9vw,3.2rem);margin:18px 0 22px}.campaign-copy .lead{max-width:32ch;font-size:16px}.campaign-hero::before{background:linear-gradient(180deg,#050509a8,#050509b8 45%,#050509ef),url('../img/neon-gym.webp') 65% top / cover no-repeat}.campaign-copy .store-row{flex-direction:row;align-items:stretch}.campaign-copy .store{padding:10px 12px;min-width:0}.store b{font-size:15px}.store small{font-size:10px}.store svg{width:22px}.campaign-product{justify-self:center}.hero-device{width:205px;transform:rotate(3deg)}.hero-device figcaption{transform:rotate(-3deg)}.hero-proof{font-size:11px;gap:12px} .benefits-heading{display:block}.benefits-heading .text-link{margin-top:20px}.benefits-grid{gap:10px}.benefit-card{padding:20px 15px 32px}.benefit-icon{margin-bottom:18px}.benefit-card h3{font-size:16px}.benefit-card p{font-size:12px}.phone-pair{gap:14px}.phone-pair .app-shot{width:46%;max-width:200px}.device{padding:5px;border-radius:25px}.device img{border-radius:20px}.app-shot figcaption{font-size:9px}.ownership-grid{gap:10px}.ownership-grid article{padding:18px}.ownership-grid h3{font-size:14px}.download-section{padding-block:45px}.goal-legend{gap:14px;font-size:12px}.section-head h2{max-width:20ch}.fx-nav{top:68px}.ms-hero-tekst h1{font-size:2.3rem}.site-foot .brand{font-size:20px} } @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.store,.benefit-card{transition:none}.btn:hover,.store:hover,.benefit-card:hover{transform:none}.hero-device,.hero-device figcaption{transform:none}.reveal{opacity:1;transform:none}} .features-editorial .feature-cover{position:relative;isolation:isolate;min-height:590px;display:flex;align-items:center;border-bottom:1px solid var(--line);background:#050509;color:#f4f6ff} .feature-cover::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#050509f5 0%,#050509c9 35%,#05050918 75%),url('../img/features-training.webp') center 40%/cover no-repeat} .feature-cover-content{padding-block:85px}.feature-cover h1{max-width:12ch;font-size:clamp(42px,5vw,72px);line-height:1.04;letter-spacing:-.045em;margin:22px 0}.feature-cover .lead{max-width:39ch;color:#c0cada;margin-bottom:28px;font-size:18px} .features-editorial .fx-chapter{padding-block:65px;border-bottom:1px solid var(--line)} .features-editorial .fx-chapter-head{margin-bottom:25px}.features-editorial .fx-chapter-title{font-size:clamp(26px,3vw,40px)} .feature-photo{height:360px;border-radius:20px;overflow:hidden;margin-bottom:36px;border:1px solid var(--line)}.feature-photo img{width:100%;height:100%;object-fit:cover;object-position:center 40%} .feature-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start} .feature-detail{background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:0 24px;scroll-margin-top:150px} .feature-detail summary{display:flex;align-items:center;justify-content:space-between;gap:24px;cursor:pointer;list-style:none;padding:24px 0;line-height:1.35}.feature-detail summary::-webkit-details-marker{display:none}.feature-detail summary::after{content:'+';font-size:25px;font-weight:400;color:var(--blue)}.feature-detail[open] summary::after{content:'−'}.feature-detail-title{font-size:18px;font-weight:700}.feature-detail>div{padding-bottom:22px}.feature-detail .lead{font-size:15px;line-height:1.75;margin:0 0 18px}.feature-detail .ms-functies{font-size:13px}.feature-detail summary:focus-visible{outline:2px solid var(--blue);outline-offset:5px}.feature-detail[open]{border-color:var(--blue)} .features-editorial .cnt{margin-top:25px}.features-editorial .fx-prem-note{margin-block:30px}.features-editorial #bewust-niet{max-width:800px;margin-inline:auto} @media(max-width:700px){.features-editorial .feature-cover{min-height:570px}.feature-cover-content{padding-block:60px}.feature-cover::before{background:linear-gradient(90deg,#050509de,#05050988),url('../img/features-training.webp') 62% center/cover no-repeat}.feature-cover h1{font-size:44px}.feature-cover .lead{font-size:16px;max-width:30ch}.feature-detail-grid{grid-template-columns:1fr}.feature-photo{height:260px;border-radius:14px}.features-editorial .fx-chapter{padding-block:40px}.feature-detail{padding-inline:20px}.feature-detail summary{padding-block:21px}.feature-detail-title{font-size:17px}} .features-editorial .fx-chapter>.wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.features-editorial .fx-chapter-head,.features-editorial .feature-photo,.features-editorial .ms-bronnen{grid-column:1/-1}.features-editorial .feature-photo{margin-bottom:18px}.features-editorial .feature-detail summary span{font-size:18px;font-weight:700}.features-editorial .feature-detail+.feature-detail{margin-top:0} @media(max-width:700px){.features-editorial .fx-chapter>.wrap{grid-template-columns:1fr}} .features-editorial .feature-photo img{object-position:center 20%} .feature-cover::before{background-position:center top} @media(max-width:700px){.feature-cover::before{background-position:62% top}} @media(max-width:360px){.head-bar{gap:6px}.brand{font-size:17px}.head-tools{gap:4px}.head-tools .icon-btn{min-width:32px;padding-inline:6px}.head-tools .theme-btn{width:32px;padding:0}} .editorial-cover{--editorial-photo:none;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:530px;background:#050509;color:#f4f6ff;border-bottom:1px solid #763394} .editorial-cover::before,.editorial-cover::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}.editorial-cover::before{background-image:var(--editorial-photo);background-size:cover;background-position:center 25%}.editorial-cover::after{background:linear-gradient(90deg,#050509bd 0%,#050509b3 38%,#05050918 75%,#05050933)} .editorial-copy{padding-block:70px;text-align:left}.editorial-copy h1{font-size:clamp(40px,5vw,68px);line-height:1.06;letter-spacing:-.04em;max-width:15ch;margin:18px 0 22px}.editorial-copy .lead{max-width:46ch;color:#d0d7e5;font-size:18px;margin:0 0 26px}.editorial-copy .eyebrow{color:#c3cee0}.editorial-copy>.btn,.editorial-copy .cl-text>.btn{margin-top:6px}.editorial-cover .store{background:#101423;color:#f4f6ff;border-color:#70829d}.editorial-cover .store.is-soon{color:#b5bed1;background:#101423b3}.editorial-cover .grad-text{background-image:linear-gradient(105deg,#dc57ff,#8c79ff,#00dfff)} .editorial-premium .editorial-cover{--editorial-photo:url('../img/premium-hero.webp')}.editorial-premium .pm-icon{margin:0 0 20px;width:64px;height:64px;border-radius:16px}.editorial-premium .premium-availability{max-width:570px;background:#101423e6;color:#d0d7e5;border-color:#727e96}.editorial-premium .premium-availability b{color:#fff}.editorial-premium .pm-hero::before{display:none}.editorial-premium .pm-grid{grid-template-columns:1fr 1fr;gap:24px}.editorial-premium .pm-pane{order:initial;padding:30px;border:1px solid var(--line-2);background:var(--card);border-radius:16px}.editorial-premium .pm-gold{border-color:#a7803b;background:linear-gradient(135deg,var(--card),#a7803b12)}.editorial-premium .plans{gap:18px}.editorial-premium .plan{border-radius:16px}.editorial-premium .lv{display:grid;gap:35px}.editorial-premium .lv-rij{margin:0;padding:0}.editorial-premium .lv-rij:nth-child(2)>.editorial-photo{order:2}.editorial-premium .lv-tekst h3{font-size:clamp(25px,3vw,36px);line-height:1.15}.editorial-premium .lv-tekst p{color:var(--prose);line-height:1.75}.editorial-subscription{max-width:760px;border-left:3px solid var(--violet);padding:10px 0 10px 28px} .editorial-help .editorial-cover{--editorial-photo:url('../img/features-progress.webp')}.editorial-press .editorial-cover{--editorial-photo:url('../img/press-hero.webp')}.editorial-help .editorial-cover::before{transform:scaleX(-1);background-position:center 20%}.editorial-help-cover{min-height:600px}.editorial-help .help-search{max-width:560px;margin:26px 0}.editorial-help .help-search input{height:60px;padding-left:48px;background:#101423ed;color:#f4f6ff;border-color:#70829d;border-radius:12px;font-size:16px}.editorial-help .help-search input::placeholder{color:#b5bed1}.editorial-help .help-search svg{color:#b5bed1}.editorial-help .help-count{color:#b5bed1}.editorial-help .hc-quick-label{color:#c3cee0;text-align:left;margin:22px 0 12px}.editorial-help .hc-quick{max-width:620px;margin:0;justify-content:flex-start;gap:8px}.editorial-help .hc-quick a{color:#f4f6ff;background:#101423db;border:1px solid #70829d;font-size:12px;border-radius:999px;padding:9px 13px}.editorial-help .hc-quick a:hover{background:#242a3e}.editorial-help .hc-quick svg{color:#c692ff}.editorial-help .help-toc{background:var(--card);padding:14px;border:1px solid var(--line);border-radius:14px} .editorial-testers .editorial-cover{--editorial-photo:url('../img/testers-hero.webp')}.editorial-testers .tst-hero-text{max-width:620px}.editorial-testers .tst-pill{background:#101423df;border-color:#70829d;color:#d0d7e5}.editorial-testers .tst-terms,.editorial-testers .tst-form{border-radius:16px}.editorial-testers .tst-terms{border-color:var(--line-2)} .editorial-photo{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line-2);height:360px}.editorial-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%}.editorial-changelog .timeline{max-width:900px}.editorial-changelog .timeline>article{border-radius:16px}.editorial-changelog #updates,.editorial-press #persmateriaal{scroll-margin-top:110px}.editorial-press .facts-table{font-size:14px}.editorial-press .quote-box{border:1px solid var(--line-2);border-radius:14px;background:var(--card);padding:24px}.editorial-press .asset-grid figure{border-radius:16px;overflow:hidden} @media(max-width:860px){.editorial-premium .pm-grid{grid-template-columns:1fr 1fr}.editorial-copy{padding-block:55px}.editorial-cover{min-height:510px}.editorial-premium .lv-rij:nth-child(2)>.editorial-photo{order:initial}.editorial-photo{height:310px}} @media(max-width:580px){.editorial-cover{min-height:520px}.editorial-cover::after{background:linear-gradient(90deg,#050509d9,#0505098c)}.editorial-cover::before{background-position:65% top}.editorial-copy{padding-block:48px}.editorial-copy h1{font-size:clamp(34px,9vw,46px);max-width:16ch}.editorial-copy .lead{font-size:16px;max-width:33ch}.editorial-premium .pm-grid{grid-template-columns:1fr}.editorial-premium .pm-pane{padding:24px}.editorial-premium .pm-icon{width:52px;height:52px;border-radius:12px}.editorial-premium .premium-availability{font-size:12px}.editorial-help-cover{min-height:620px}.editorial-help .hc-quick{display:flex;flex-wrap:wrap;max-width:100%;padding:0;list-style:none}.editorial-help .hc-quick li+li{border:0}.editorial-help .hc-quick a::after{display:none}.editorial-help .hc-quick a{font-size:11px;padding:8px 10px}.editorial-help .hc-quick a span{white-space:normal}.editorial-help .help-toc{padding:8px}.editorial-photo{height:270px}.editorial-subscription{padding-left:20px}.editorial-press .quote-box{padding:18px}} .editorial-premium .pm-pane{grid-column:auto;grid-row:auto} .editorial-help .help-count{background:#252b3d;color:#d0d7e5} .editorial-changelog .editorial-cover{--editorial-photo:url('../img/changelog-hero.webp')} .app-preview-page{padding-top:36px}.app-preview-page h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;margin:0 0 16px;letter-spacing:-.035em}.app-preview-page .section-head{margin-bottom:20px}.app-preview-page .gallery-theme-control{margin:20px 0 24px}.app-preview-more{padding-top:0}.feature-cover .app-preview-link{display:inline-flex;margin:0 0 24px} .homepage-photo{width:100%;height:440px;margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line-2)}.homepage-photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%}.product-showcase>.homepage-photo{align-self:stretch}.gallery-example{color:var(--muted);font-size:12px;margin-top:12px}.app-gallery-section{scroll-margin-top:150px}.app-gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}.screen-tile{display:flex;flex-direction:column;align-items:stretch;padding:0;background:transparent;color:var(--text);font:inherit;text-align:left;border:0;cursor:zoom-in;min-width:0}.screen-tile img{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:6px;transition:transform .2s,box-shadow .2s}.screen-tile:hover img{transform:translateY(-4px);box-shadow:0 12px 35px #0004}.screen-tile-name{font-size:14px;font-weight:700;line-height:1.4;margin-top:16px}.screen-tile-action{font-size:12px;color:var(--violet);margin-top:6px}.screen-tile:focus-visible{outline:2px solid var(--blue);outline-offset:7px;border-radius:6px}.screen-dialog{background:var(--bg);color:var(--text);border:1px solid var(--line-2);border-radius:14px;padding:18px;max-width:min(96vw,540px);max-height:94dvh;overflow:auto;overscroll-behavior:contain}.screen-dialog::backdrop{background:#000c;backdrop-filter:blur(7px)}.screen-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:15px}.screen-dialog-bar h2{font-size:18px;font-weight:700;margin:0;letter-spacing:0}.screen-dialog-bar button{flex:none;font-size:24px}.screen-dialog [data-gallery-stage] img{display:block;margin:auto;max-width:100%;width:auto;height:auto;max-height:calc(94dvh - 100px);border-radius:3px}.gallery-open{overflow:hidden} @media(max-width:1000px){.app-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 20px}.screen-tile img{max-height:430px;width:auto;max-width:100%;object-fit:contain;object-position:left}} @media(max-width:860px){.homepage-photo{height:380px}.product-showcase>.homepage-photo{order:2}} @media(max-width:580px){.homepage-photo{height:320px}.app-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}.screen-tile-name{font-size:13px}.screen-dialog{padding:12px;max-width:96vw}.screen-dialog-bar h2{font-size:16px}} @media(prefers-reduced-motion:reduce){.screen-tile img{transition:none}.screen-tile:hover img{transform:none}} .feature-cover .gallery-jump{color:#dda4ff;margin-top:22px;display:inline-block}.pk-files{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pk-file{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:18px 20px;border:1px solid var(--line-2);border-radius:10px;background:var(--card);text-decoration:none;color:var(--text);font-size:14px}.pk-file>span:last-child{flex:none;color:var(--violet);font-size:12px}.pk-file:hover{border-color:var(--violet);background:var(--card-2)} @media(max-width:580px){.pk-files{grid-template-columns:1fr}} .campaign-copy .grad-text{background-image:linear-gradient(105deg,#dc57ff,#8c79ff,#00dfff)} .editorial-premium .editorial-cover::before,.editorial-testers .editorial-cover::before,.editorial-changelog .editorial-cover::before{background-position:center top}@media(max-width:580px){.editorial-premium .editorial-cover::before,.editorial-testers .editorial-cover::before,.editorial-changelog .editorial-cover::before{background-position:65% top}} .app-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px} .screen-device-stage{display:flex;justify-content:center;align-items:center;padding:28px 20px 34px;perspective:1100px;position:relative;isolation:isolate;border-radius:24px;background:radial-gradient(ellipse at 50% 45%,#a661ec19,transparent 68%)} .screen-device-stage::after{content:"";position:absolute;bottom:12px;left:15%;right:15%;height:22px;background:radial-gradient(ellipse,#0009,transparent 70%);border-radius:50%;z-index:-1} .screen-device{display:block;position:relative;width:min(100%,228px);padding:7px;border-radius:31px;background:linear-gradient(115deg,#717685,#171a22 18%,#080a0f 80%,#606777);border:1px solid #747a88;box-shadow:5px 4px 0 #262a35,8px 6px 0 #090b10,18px 24px 32px #0006,inset 0 0 0 2px #ffffff12;transform:none;transition:transform .25s} .screen-tile:nth-child(3n+2) .screen-device{transform:none} .screen-tile:nth-child(3n) .screen-device{transform:none} .screen-tile .screen-device img{width:100%;height:auto;max-height:none;max-width:none;border:1px solid #000;border-radius:24px;transform:none;box-shadow:none;object-fit:contain} .screen-device::before{content:"";position:absolute;right:-5px;top:23%;width:3px;height:42px;border-radius:3px;background:linear-gradient(#8a8e9a,#252934);box-shadow:0 53px 0 #363b48} .screen-tile:hover .screen-device,.screen-tile:focus-visible .screen-device{transform:none;box-shadow:4px 3px 0 #262a35,7px 5px 0 #090b10,12px 30px 45px #0008} .screen-tile-name,.screen-tile-action{text-align:center} @media(max-width:1000px){.app-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 18px}.screen-device-stage{padding:20px 12px 28px}} @media(max-width:700px){.app-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}.screen-device{padding:5px;border-radius:24px}.screen-tile .screen-device img{border-radius:18px}.screen-device-stage{padding:18px 10px 24px}} @media(prefers-reduced-motion:reduce){.screen-device{transition:none}.screen-tile:hover .screen-device,.screen-tile:focus-visible .screen-device{transform:none}} .feature-exclusions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;padding:0;margin:22px 0 0;list-style:none}.feature-exclusions li{position:relative;padding:14px 16px 14px 38px;border:1px solid var(--line-2);border-radius:12px;color:var(--muted);line-height:1.6;background:var(--bg-soft)}.feature-exclusions li::before{content:"✓";position:absolute;left:15px;color:var(--blue);font-weight:700}.feature-exclusions b{color:var(--text)} @media(max-width:700px){.feature-exclusions{grid-template-columns:1fr}} .screen-dialog{width:min(94vw,620px);max-width:94vw;max-height:96dvh;padding:18px 24px 24px;border-radius:26px;background:var(--bg-soft);overflow:hidden;box-shadow:0 28px 100px #0009} .screen-dialog::backdrop{background:#000d;backdrop-filter:none} .screen-dialog-bar{margin-bottom:10px} .screen-dialog [data-gallery-stage]{display:flex;justify-content:center;padding:14px 18px 20px;position:relative;background:radial-gradient(ellipse at 25% 45%,#ac54ed20,transparent 65%),radial-gradient(ellipse at 85% 75%,#00cddd14,transparent 65%);border-radius:20px} .screen-dialog-device{position:relative;flex:none;width:min(100%,calc((96dvh - 154px)*.45),370px);padding:14px 7px 8px;border:1px solid #838894;border-radius:38px;background:linear-gradient(115deg,#9297a1,#353943 12%,#101218 45%,#3d424d 93%,#9297a1);box-shadow:3px 2px 0 #525763,6px 4px 0 #1a1d24,14px 20px 28px #0006,inset 0 0 0 2px #ffffff12} .screen-dialog-device::before{content:"";position:absolute;right:-5px;top:22%;height:42px;width:3px;border-radius:3px;background:linear-gradient(#9298a4,#353944);box-shadow:0 54px 0 #555b67} .screen-dialog-device::after{content:"";position:absolute;top:4px;left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#040508;box-shadow:inset 0 0 0 1px #313641} .screen-dialog [data-gallery-stage] .screen-dialog-device img{display:block;width:100%;height:auto;max-height:none;max-width:none;border:1px solid #020306;border-radius:29px;background:#080c12} @media(max-width:580px){.screen-dialog{padding:14px 14px 18px;border-radius:22px}.screen-dialog [data-gallery-stage]{padding:12px 12px 16px}.screen-dialog-device{width:min(100%,calc((96dvh - 142px)*.45));border-radius:31px}.screen-dialog [data-gallery-stage] .screen-dialog-device img{border-radius:23px}} :root[data-theme="light"] .site-head{background:#b4cadb} :root[data-theme="light"] :is(.benefit-card,.pm-pane,.plan,.cta-band,.help-toc,.pk-file){ background:linear-gradient(145deg,#c0d3e1,#a9bdce); border-color:#dceaf3; box-shadow:0 8px 16px -6px rgb(16 38 56 / .18); } :root[data-theme="light"] .btn-primary{background:var(--grad);box-shadow:0 5px 14px rgb(16 38 56 / .17);color:#fff} :root[data-theme="light"] .btn-primary:hover{background:#0e3f45;color:#fff} :root[data-theme="light"] .benefit-icon-1{color:#155c65} :root[data-theme="light"] .benefit-icon-2{color:#006146} :root[data-theme="light"] .benefit-icon-3{color:#824500} :root[data-theme="light"] .campaign-hero .grad-text, :root[data-theme="light"] .download-section .grad-text{background-image:linear-gradient(105deg,#dc57ff,#8c79ff,#00dfff)} :root[data-theme="light"] :is(input,textarea,select){accent-color:#155c65} :root[data-theme="light"] :is(input,textarea,select):focus-visible{outline-color:#155c65} :root[data-theme="light"] .campaign-hero .gradient-text{background-image:linear-gradient(105deg,#dc57ff,#8c79ff,#00dfff)} :root[data-theme="light"] :is(.feature-cover,.editorial-cover){ --text:#f4f6ff;--text-hi:#fff;--muted:#b5bed1;--violet:#dda4ff; --grad:linear-gradient(105deg,#dc57ff,#8c79ff,#00dfff); } :root[data-theme="light"] .feature-cover .store{background:#101423;color:#f4f6ff;border-color:#70829d} :root[data-theme="light"] .feature-cover .store.is-soon{color:#b5bed1;background:#101423b3} .feature-tier{display:inline-block;flex:none;font-size:11px;font-weight:700;line-height:1.5;padding:3px 9px;border-radius:999px;margin-left:12px;vertical-align:middle} .feature-tier-free{color:var(--blue);background:rgb(var(--blue-rgb) / .10);border:1px solid rgb(var(--blue-rgb) / .25)} .feature-detail summary .fx-title{flex:1;min-width:0} .feature-cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start} .feature-column{display:flex;flex-direction:column;gap:14px;min-width:0} .feature-column .feature-detail{margin:0} @media(max-width:700px){ .feature-cards{grid-template-columns:1fr}.feature-column{display:contents} .feature-cards .feature-detail{order:var(--feature-order)} } .progress-cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start} .progress-column{display:flex;flex-direction:column;gap:16px;min-width:0} .progress-column .feature-detail{margin:0} @media(max-width:700px){ .progress-cards{grid-template-columns:1fr}.progress-column{display:contents} .progress-cards #overzicht{order:1}.progress-cards #jetrends{order:2}.progress-cards #records{order:3}.progress-cards #verdieping{order:4}.progress-cards #langetermijn{order:5}.progress-cards #maandrapport{order:6} } :root[data-theme="light"]{--gold:#714b09;--gold-2:#5c3c08;--gold-text:#102638;--gold-muted:#293d4d} :root[data-theme="light"] .pm-gold .pm-list li{border-color:rgb(105 70 11 / .20)} .progress-cards .ms-functies li{display:block;position:relative;padding-left:24px} .progress-cards .ms-functies li::before{position:absolute;left:0;top:0} .progress-cards .ms-functies small{display:block;color:var(--muted);font-size:.88em;line-height:1.6;margin-top:5px} :root[data-theme="light"] .editorial-premium .pm-pane.pm-gold{border-color:#a7803b;box-shadow:0 8px 16px -6px rgb(16 38 56 / .18),inset 0 0 0 1px rgb(167 128 59 / .22)} @media(max-width:700px){.app-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 8px}.screen-device-stage{padding:12px 3px 18px}.screen-tile-name{font-size:12px}.screen-tile-action{font-size:11px}} .gallery-theme-control{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:24px 0 28px;color:var(--muted);font-size:14px} .gallery-theme-options{display:flex;flex-wrap:wrap;gap:6px;padding:5px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-soft)} .gallery-theme-options button{border:1px solid transparent;border-radius:999px;background:transparent;color:var(--text);font:inherit;font-weight:700;padding:10px 18px;cursor:pointer;min-height:44px} .gallery-theme-options button[aria-pressed=true]{background:var(--card);border-color:var(--blue);color:var(--blue)} .gallery-theme-options button[data-gallery-theme=gold][aria-pressed=true]{background:#211a0c;color:#f1d179;border-color:#c9a74b} .gallery-theme-options button:focus-visible{outline:2px solid var(--blue);outline-offset:3px} @media(max-width:450px){.gallery-theme-control{gap:10px}.gallery-theme-options button{padding:9px 13px}} @media(max-width:700px){ .head-tools .icon-btn{min-width:44px;min-height:44px;height:44px;padding-inline:8px} .head-tools .theme-btn{width:44px;padding:0} .head-tools{gap:4px}.head-bar{gap:6px} .prose a,.ms-bronnen a,.legal a{overflow-wrap:anywhere} .campaign-copy,.showcase-copy,.editorial-copy,.wear-copy{min-width:0;overflow-wrap:break-word} .hero-platform-links a,.text-link{min-height:44px;display:inline-flex;align-items:center} .watch-theme-switch button,.watch-close,.screen-dialog-close{min-width:44px;min-height:44px} input,select,textarea{font-size:16px} } @media(max-width:360px){.brand{font-size:17px;letter-spacing:.08em}.head-tools .icon-btn{padding-inline:6px}} body[data-page="home"] .campaign-grid{grid-template-columns:1fr} body[data-page="home"] .campaign-copy{width:min(100%,680px)} .release-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.release-feature-grid .card{min-width:0}.release-summary .lead{max-width:68ch}@media(max-width:800px){.release-feature-grid{grid-template-columns:1fr}} .campaign-copy .hero-origin{color:#dce3ee;font-size:14px;line-height:1.6;max-width:56ch;margin-top:16px} .watch-feature{padding:72px 0;scroll-margin-top:100px} .watch-feature h2,.wear-install h2{font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.15} .watch-theme-switch{display:flex;flex-wrap:wrap;gap:6px;padding:5px;border:1px solid #8990a544;border-radius:99px;width:fit-content;margin:28px 0 38px} .watch-theme-switch button{border:0;background:transparent;color:inherit;font:inherit;padding:10px 20px;border-radius:99px;cursor:pointer} .watch-theme-switch button[aria-pressed=true]{background:#ad81fe;color:#0b0614} .watch-theme-switch button:focus-visible,.watch-open:focus-visible,.hero-watch-link:focus-visible{outline:3px solid #28cad8;outline-offset:4px} .watch-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 28px} .watch-figure{margin:0;min-width:0;border:1px solid #8990a52c;border-radius:26px;padding:22px 12px 25px;background:linear-gradient(145deg,#ad81fe09,#25cbd405)} .watch-open{display:block;border:0;padding:0;background:transparent;color:inherit;width:100%;cursor:zoom-in;border-radius:28px} .watch-product{position:relative;display:block;width:min(100%,390px);aspect-ratio:850/1328;margin:auto;overflow:hidden} .watch-figure .watch-product{width:min(100%,190px)} .watch-product-frame{display:block;position:absolute;left:-17.647%;top:0;width:139.294%;height:100%;max-width:none;object-fit:contain} .watch-native{position:absolute;left:8.1%;top:21.45%;width:79.1%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#080b12} .watch-native img{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%} .watch-figure figcaption{padding:16px 12px 0;text-align:left} .watch-figure h3{margin:0 0 10px;font-size:1.2rem;line-height:1.3} .watch-figure figcaption p{font-weight:400;font-size:.98rem;line-height:1.65;margin:0;color:var(--muted,#aeb7c8)} .watch-dialog{border:1px solid #8c829a55;border-radius:28px;padding:35px 22px 18px;background:#10131b;color:#eef1f8;max-width:94vw;max-height:95dvh;overflow:auto;text-align:center} .watch-dialog::backdrop{background:#02040bea;backdrop-filter:blur(7px)} .watch-dialog .watch-product{width:min(410px,70vw,calc(61dvh - 65px))} .watch-close{position:absolute;z-index:2;right:8px;top:4px;border:0;background:transparent;color:inherit;font-size:32px;cursor:pointer;padding:2px 12px} .watch-dialog p{margin:10px auto 0} .hero-watch-link{display:block;color:inherit;text-decoration:none;text-align:center} .hero-watch-label{display:inline-flex;align-items:center;gap:15px;font-size:14px;font-weight:750;letter-spacing:.04em;margin-top:12px} .campaign-grid{grid-template-columns:minmax(0,680px) 250px;justify-content:start} .campaign-copy{min-width:0} .campaign-copy h1{overflow-wrap:anywhere} .campaign-watch{align-self:end;justify-self:start;width:250px;margin:0;position:relative;z-index:1;color:#fff;filter:drop-shadow(0 14px 24px #000b)} .campaign-watch .watch-product{transform:none} .campaign-watch .hero-watch-label{display:none} .wear-cover{padding:70px 0 60px;background:radial-gradient(ellipse at 75% 40%,#7540ca25,transparent 60%)} .wear-cover-grid{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:65px} .wear-wordmark{font-weight:800;font-size:1.2rem;letter-spacing:.04em;margin:22px 0 8px} .wear-cover h1{font-size:clamp(2.5rem,5.3vw,4.6rem);letter-spacing:-.035em;line-height:1.05;max-width:12ch;margin:0 0 26px} .wear-cover .lead{max-width:43ch;margin-bottom:28px} .wear-hero-device .watch-product{width:min(100%,340px)} .wear-hero-device .hero-watch-label{display:none} .wear-screen-link{display:block;margin-top:20px} .wear-install{padding:70px 0} .wear-install-inner{max-width:900px} .wear-install .lead{line-height:1.85;margin:25px 0 30px} .wear-teaser{padding:34px 0;border-bottom:1px solid #8990a52c} .wear-teaser .wrap{display:flex;align-items:center;justify-content:space-between;gap:35px} .wear-teaser h2{font-size:1.6rem;margin:10px 0} .wear-teaser p{max-width:68ch;margin:0;line-height:1.6} .wear-teaser .btn{flex-shrink:0} @media(max-width:1100px){.campaign-grid{grid-template-columns:minmax(0,1fr) 220px}.campaign-watch{width:220px}.wear-cover-grid{gap:30px}.watch-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:860px) and (min-width:701px){.campaign-grid{grid-template-columns:minmax(0,1fr) 190px}.campaign-watch{width:190px}} @media(max-width:700px){.campaign-grid{grid-template-columns:1fr}.wear-cover-grid{grid-template-columns:1fr;gap:28px}.wear-cover{padding:45px 0 30px}.wear-cover h1{max-width:14ch}.wear-hero-device{max-width:350px;justify-self:center}.wear-teaser .wrap{flex-direction:column;align-items:flex-start}.wear-teaser .btn{flex-shrink:1}.campaign-watch{display:none}.watch-feature{padding:45px 0}.wear-install{padding:45px 0}} @media(max-width:520px){.watch-gallery-grid{grid-template-columns:1fr;gap:28px}.watch-figure{padding:20px}.watch-product{max-width:340px}.watch-theme-switch button{padding:9px 15px}.wear-hero-device{max-width:310px}} .wear-steps{list-style:none;padding:0;margin:30px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .wear-steps li{padding:22px;border:1px solid #8990a53c;border-radius:20px} .wear-step-number{display:block;font-size:1.7rem;font-weight:800;color:var(--violet,#ad81fe);margin-bottom:14px} .wear-steps p{line-height:1.75;margin:0} @media(max-width:600px){.wear-steps{grid-template-columns:1fr}} .hero-platform-links{display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px;margin:18px 0 0;font-size:14px;font-weight:650;color:#dce3ee} .hero-platform-links a{display:inline-flex;align-items:center;gap:9px;color:inherit;text-decoration:none;text-underline-offset:5px} .hero-platform-links svg{width:23px;height:23px;flex-shrink:0;color:#b48bff} .hero-platform-links a:hover{text-decoration:underline} .hero-platform-links a:focus-visible{outline:2px solid #28cad8;outline-offset:5px;border-radius:3px} @media(max-width:700px){.hero-platform-links{font-size:13px;gap:12px 20px}.hero-platform-links svg{width:21px;height:21px}} @media(min-width:701px){.wear-hero-device{transform:translateY(32px)}} body main > .visual-cover { --cover-dark: url('../img/covers/phone-dark-1536.webp'); --cover-image: var(--cover-dark); --cover-veil: linear-gradient(90deg,#050509f2 0%,#050509d6 34%,#05050930 74%,#05050910); --cover-ink: #f4f6ff; --cover-muted: #d0d7e5; --cover-accent: #d7b1ff; position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 460px; padding: 0; background: #050509; color: var(--cover-ink); border-bottom: 1px solid var(--line); text-align: left; } body main > .visual-cover::before { content: ''; position: absolute; inset: 0; z-index: -1; width: auto; height: auto; transform: none; opacity: 1; background: var(--cover-image) center 18% / cover no-repeat; pointer-events: none; } body main > .visual-cover::after { content:''; display:block; position:absolute; inset:0; z-index:-1; background:var(--cover-veil); pointer-events:none; } body main > .visual-cover > .wrap { width:100%; padding-block:60px; position:relative; min-width:0; } body main > .visual-cover h1 { font-size: clamp(2.5rem,5vw,4.5rem); font-weight: 900; line-height: 1.06; letter-spacing: -.045em; text-transform: uppercase; max-width: 16ch; margin: 18px 0 24px; color: var(--cover-ink); overflow-wrap: anywhere; } body main > .visual-cover :is(.lead,.legal-meta) { color:var(--cover-muted); max-width:48ch; } body main > .visual-cover .lead { font-size:18px; line-height:1.7; margin:0 0 26px; } body main > .visual-cover .eyebrow { color:var(--cover-muted); } body main > .visual-cover :is(.grad-text,.uline) { background: linear-gradient(105deg,#b222ed 0%,#8055f5 48%,#00dfff 100%); background-clip:text; -webkit-background-clip:text; color:transparent; padding:0; } body main > .visual-cover :is(.store,.btn:not(.btn-primary)) { background:#101423e8; color:#f4f6ff; border-color:#70829d; } body main > .visual-cover .btn-primary { color:#fff; } body main > .visual-cover .btn { max-width:100%; white-space:normal; text-align:center; } body main > .visual-cover .legal-meta { margin-bottom:0; } body main > .visual-cover-compact { min-height:320px; margin-bottom:38px; } body main > .visual-cover-compact h1 { font-size:clamp(2rem,4.4vw,3.7rem); max-width:22ch; } body main > .cover-app { min-height:360px; } body main > .cover-wear { --cover-dark:url('../img/covers/wear-dark-1536.webp'); } body main > .cover-wear::before { background-position:center 70%; } body main > .cover-features { --cover-dark:url('../img/features-training.webp'); } body main > .cover-premium { --cover-dark:url('../img/premium-hero.webp'); } body main > .cover-testers { --cover-dark:url('../img/testers-hero.webp'); } body main > .cover-changelog { --cover-dark:url('../img/changelog-hero.webp'); } body main > .cover-press { --cover-dark:url('../img/press-hero.webp'); } body main > .cover-help { --cover-dark:url('../img/features-progress.webp'); } body main > .cover-wear .wear-cover-grid { grid-template-columns:1fr; justify-content:start; } body main > .cover-wear .wear-cover-grid > div { max-width:640px; } body main > .cover-wear .wear-screen-link { display:inline-flex; margin-top:24px; } body main > .cover-404 .big { font-size:1.5rem; margin:0; } body main > .cover-404 .store-row { justify-content:flex-start !important; } body main > .cover-404 h1 { font-size:clamp(2rem,4.4vw,3.7rem) !important; } body main > .cover-404 .lead { margin:0 0 26px !important; } :root[data-theme=light] body main > .visual-cover :is(.grad-text,.uline) { background:linear-gradient(105deg,#b222ed 0%,#8055f5 48%,#00dfff 100%); background-clip:text; -webkit-background-clip:text; color:transparent; } @media(max-width:700px) { body main > .visual-cover { --cover-veil:linear-gradient(90deg,#050509eb,#050509b3); min-height:360px; } body main > .visual-cover::before { background-position:65% center; } body main > .visual-cover > .wrap { padding-block:42px; } body main > .visual-cover h1 { font-size:clamp(2rem,8.5vw,3rem); max-width:18ch; margin:16px 0 22px; } body main > .visual-cover .lead { font-size:16px; max-width:39ch; } body main > .visual-cover-compact { min-height:260px; margin-bottom:26px; } body main > .visual-cover-compact h1 { font-size:clamp(1.8rem,7.4vw,2.8rem); } body main > .cover-app { min-height:300px; } body main > :is(.cover-app,.cover-contact,.cover-cookies,.cover-delete-account,.cover-health-data,.cover-legal,.cover-privacy,.cover-terms,.cover-404) { --cover-dark:url('../img/covers/phone-dark-800.webp'); } body main > .cover-wear { --cover-dark:url('../img/covers/wear-dark-800.webp'); } body main > .cover-wear::before { background-position:right center; } }