html[data-lang="pt"]{--font-sans:'Host Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;--font-mono:'Fragment Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;--mono-case:uppercase;--mono-track:.12em;--mono-track-2:.1em;--proof-track:.02em;--fac:1;--tr-ui:-0.01em;--tr-body:-0.005em;--tr-h2:-0.04em;--tr-man:-0.03em;--tr-h3:-0.02em;--tr-h3b:-0.03em;--tr-pr:-0.025em;--tr-xl:-0.045em;--tr-display:-0.04em;--tr-num:-0.05em;--lh-h2:0.98;--lh-man:1.12;--lh-h3:1.15;--lh-h3b:1.05;--lh-pr:1.1;--lh-c:1.02;--lh-l1:0.96;--lh-l2:0.94;--lh-ml1:1.02;--lh-ml2:1;--lh-body:1.56;--lh-small:1.6;--lh-mono:1.5;--h1-k:0.1316;--h2-k:0.1528;--h1-hr:0.4876;--h2-hr:0.5659;--h1-ws:nowrap;--h2-ws:nowrap;--h1-km:0.1257;--h2-km:0.1486;--h1-cap:90px;--h2-cap:104px;--h1-mws:nowrap;--h2-mws:nowrap}
html[data-lang="en"]{--font-sans:'Host Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;--font-mono:'Fragment Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;--mono-case:uppercase;--mono-track:.12em;--mono-track-2:.1em;--proof-track:.02em;--fac:1;--tr-ui:-0.01em;--tr-body:-0.005em;--tr-h2:-0.04em;--tr-man:-0.03em;--tr-h3:-0.02em;--tr-h3b:-0.03em;--tr-pr:-0.025em;--tr-xl:-0.045em;--tr-display:-0.04em;--tr-num:-0.05em;--lh-h2:0.98;--lh-man:1.12;--lh-h3:1.15;--lh-h3b:1.05;--lh-pr:1.1;--lh-c:1.02;--lh-l1:0.96;--lh-l2:0.94;--lh-ml1:1.02;--lh-ml2:1;--lh-body:1.56;--lh-small:1.6;--lh-mono:1.5;--h1-k:0.1316;--h2-k:0.1598;--h1-hr:0.4759;--h2-hr:0.5778;--h1-ws:nowrap;--h2-ws:nowrap;--h1-km:0.1314;--h2-km:0.1714;--h1-cap:90px;--h2-cap:109px;--h1-mws:nowrap;--h2-mws:nowrap}
html[data-lang="es"]{--font-sans:'Host Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;--font-mono:'Fragment Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;--mono-case:uppercase;--mono-track:.12em;--mono-track-2:.1em;--proof-track:.02em;--fac:1;--tr-ui:-0.01em;--tr-body:-0.005em;--tr-h2:-0.04em;--tr-man:-0.03em;--tr-h3:-0.02em;--tr-h3b:-0.03em;--tr-pr:-0.025em;--tr-xl:-0.045em;--tr-display:-0.04em;--tr-num:-0.05em;--lh-h2:0.98;--lh-man:1.12;--lh-h3:1.15;--lh-h3b:1.05;--lh-pr:1.1;--lh-c:1.02;--lh-l1:0.96;--lh-l2:0.94;--lh-ml1:1.02;--lh-ml2:1;--lh-body:1.56;--lh-small:1.6;--lh-mono:1.5;--h1-k:0.1316;--h2-k:0.1598;--h1-hr:0.4759;--h2-hr:0.5778;--h1-ws:nowrap;--h2-ws:nowrap;--h1-km:0.1314;--h2-km:0.1714;--h1-cap:90px;--h2-cap:109px;--h1-mws:nowrap;--h2-mws:nowrap}
html[data-lang="fr"]{--font-sans:'Host Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;--font-mono:'Fragment Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;--mono-case:uppercase;--mono-track:.12em;--mono-track-2:.1em;--proof-track:.02em;--fac:1;--tr-ui:-0.01em;--tr-body:-0.005em;--tr-h2:-0.04em;--tr-man:-0.03em;--tr-h3:-0.02em;--tr-h3b:-0.03em;--tr-pr:-0.025em;--tr-xl:-0.045em;--tr-display:-0.04em;--tr-num:-0.05em;--lh-h2:0.98;--lh-man:1.12;--lh-h3:1.15;--lh-h3b:1.05;--lh-pr:1.1;--lh-c:1.02;--lh-l1:0.96;--lh-l2:0.94;--lh-ml1:1.02;--lh-ml2:1;--lh-body:1.56;--lh-small:1.6;--lh-mono:1.5;--h1-k:0.1316;--h2-k:0.1598;--h1-hr:0.4759;--h2-hr:0.5778;--h1-ws:nowrap;--h2-ws:nowrap;--h1-km:0.1314;--h2-km:0.1686;--h1-cap:90px;--h2-cap:109px;--h1-mws:nowrap;--h2-mws:nowrap}
html[data-lang="de"]{--font-sans:'Host Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;--font-mono:'Fragment Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;--mono-case:uppercase;--mono-track:.12em;--mono-track-2:.1em;--proof-track:.02em;--fac:1;--tr-ui:-0.01em;--tr-body:-0.005em;--tr-h2:-0.04em;--tr-man:-0.03em;--tr-h3:-0.02em;--tr-h3b:-0.03em;--tr-pr:-0.025em;--tr-xl:-0.045em;--tr-display:-0.04em;--tr-num:-0.05em;--lh-h2:0.98;--lh-man:1.12;--lh-h3:1.15;--lh-h3b:1.05;--lh-pr:1.1;--lh-c:1.02;--lh-l1:0.96;--lh-l2:0.94;--lh-ml1:1.02;--lh-ml2:1;--lh-body:1.56;--lh-small:1.6;--lh-mono:1.5;--h1-k:0.1316;--h2-k:0.1598;--h1-hr:0.4759;--h2-hr:0.5778;--h1-ws:nowrap;--h2-ws:nowrap;--h1-km:0.1314;--h2-km:0.1714;--h1-cap:90px;--h2-cap:109px;--h1-mws:nowrap;--h2-mws:nowrap}
html[data-lang="it"]{--font-sans:'Host Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;--font-mono:'Fragment Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;--mono-case:uppercase;--mono-track:.12em;--mono-track-2:.1em;--proof-track:.02em;--fac:1;--tr-ui:-0.01em;--tr-body:-0.005em;--tr-h2:-0.04em;--tr-man:-0.03em;--tr-h3:-0.02em;--tr-h3b:-0.03em;--tr-pr:-0.025em;--tr-xl:-0.045em;--tr-display:-0.04em;--tr-num:-0.05em;--lh-h2:0.98;--lh-man:1.12;--lh-h3:1.15;--lh-h3b:1.05;--lh-pr:1.1;--lh-c:1.02;--lh-l1:0.96;--lh-l2:0.94;--lh-ml1:1.02;--lh-ml2:1;--lh-body:1.56;--lh-small:1.6;--lh-mono:1.5;--h1-k:0.1316;--h2-k:0.1598;--h1-hr:0.4759;--h2-hr:0.5778;--h1-ws:nowrap;--h2-ws:nowrap;--h1-km:0.1314;--h2-km:0.1714;--h1-cap:90px;--h2-cap:109px;--h1-mws:nowrap;--h2-mws:nowrap}
html[data-lang="nl"]{--font-sans:'Host Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;--font-mono:'Fragment Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;--mono-case:uppercase;--mono-track:.12em;--mono-track-2:.1em;--proof-track:.02em;--fac:1;--tr-ui:-0.01em;--tr-body:-0.005em;--tr-h2:-0.04em;--tr-man:-0.03em;--tr-h3:-0.02em;--tr-h3b:-0.03em;--tr-pr:-0.025em;--tr-xl:-0.045em;--tr-display:-0.04em;--tr-num:-0.05em;--lh-h2:0.98;--lh-man:1.12;--lh-h3:1.15;--lh-h3b:1.05;--lh-pr:1.1;--lh-c:1.02;--lh-l1:0.96;--lh-l2:0.94;--lh-ml1:1.02;--lh-ml2:1;--lh-body:1.56;--lh-small:1.6;--lh-mono:1.5;--h1-k:0.1316;--h2-k:0.1598;--h1-hr:0.4759;--h2-hr:0.5778;--h1-ws:nowrap;--h2-ws:nowrap;--h1-km:0.1314;--h2-km:0.1714;--h1-cap:90px;--h2-cap:109px;--h1-mws:nowrap;--h2-mws:nowrap}
html[data-lang="pl"]{--font-sans:'Host Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;--font-mono:'Fragment Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;--mono-case:uppercase;--mono-track:.12em;--mono-track-2:.1em;--proof-track:.02em;--fac:1;--tr-ui:-0.01em;--tr-body:-0.005em;--tr-h2:-0.04em;--tr-man:-0.03em;--tr-h3:-0.02em;--tr-h3b:-0.03em;--tr-pr:-0.025em;--tr-xl:-0.045em;--tr-display:-0.04em;--tr-num:-0.05em;--lh-h2:0.98;--lh-man:1.12;--lh-h3:1.15;--lh-h3b:1.05;--lh-pr:1.1;--lh-c:1.02;--lh-l1:0.96;--lh-l2:0.94;--lh-ml1:1.02;--lh-ml2:1;--lh-body:1.56;--lh-small:1.6;--lh-mono:1.5;--h1-k:0.1316;--h2-k:0.1598;--h1-hr:0.4759;--h2-hr:0.5778;--h1-ws:nowrap;--h2-ws:nowrap;--h1-km:0.1314;--h2-km:0.1571;--h1-cap:90px;--h2-cap:109px;--h1-mws:nowrap;--h2-mws:nowrap}
html[data-lang="ru"]{--font-sans:'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;--font-mono:'Fragment Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;--mono-case:uppercase;--mono-track:.12em;--mono-track-2:.1em;--proof-track:.02em;--fac:0.96;--tr-ui:-0.01em;--tr-body:-0.005em;--tr-h2:-0.04em;--tr-man:-0.03em;--tr-h3:-0.02em;--tr-h3b:-0.03em;--tr-pr:-0.025em;--tr-xl:-0.035em;--tr-display:-0.03em;--tr-num:-0.05em;--lh-h2:1.02;--lh-man:1.16;--lh-h3:1.18;--lh-h3b:1.08;--lh-pr:1.12;--lh-c:1.06;--lh-l1:1;--lh-l2:1;--lh-ml1:1.04;--lh-ml2:1.02;--lh-body:1.56;--lh-small:1.6;--lh-mono:1.5;--h1-k:0.1257;--h2-k:0.1528;--h1-hr:0.4515;--h2-hr:0.5485;--h1-ws:nowrap;--h2-ws:nowrap;--h1-km:0.12;--h2-km:0.1543;--h1-cap:86px;--h2-cap:104px;--h1-mws:nowrap;--h2-mws:nowrap}
html[data-lang="tr"]{--font-sans:'Host Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;--font-mono:'Fragment Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;--mono-case:uppercase;--mono-track:.12em;--mono-track-2:.1em;--proof-track:.02em;--fac:1;--tr-ui:-0.01em;--tr-body:-0.005em;--tr-h2:-0.04em;--tr-man:-0.03em;--tr-h3:-0.02em;--tr-h3b:-0.03em;--tr-pr:-0.025em;--tr-xl:-0.045em;--tr-display:-0.04em;--tr-num:-0.05em;--lh-h2:0.98;--lh-man:1.12;--lh-h3:1.15;--lh-h3b:1.05;--lh-pr:1.1;--lh-c:1.02;--lh-l1:0.96;--lh-l2:0.94;--lh-ml1:1.02;--lh-ml2:1;--lh-body:1.56;--lh-small:1.6;--lh-mono:1.5;--h1-k:0.1316;--h2-k:0.1598;--h1-hr:0.4759;--h2-hr:0.5778;--h1-ws:nowrap;--h2-ws:nowrap;--h1-km:0.1314;--h2-km:0.1714;--h1-cap:90px;--h2-cap:109px;--h1-mws:nowrap;--h2-mws:nowrap}
html[data-lang="ar"]{--font-sans:'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;--font-mono:'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;--mono-case:none;--mono-track:0em;--mono-track-2:0em;--proof-track:0em;--fac:0.9;--tr-ui:0em;--tr-body:0em;--tr-h2:0em;--tr-man:0em;--tr-h3:0em;--tr-h3b:0em;--tr-pr:0em;--tr-xl:0em;--tr-display:0em;--tr-num:0em;--lh-h2:1.3;--lh-man:1.55;--lh-h3:1.35;--lh-h3b:1.3;--lh-pr:1.3;--lh-c:1.3;--lh-l1:1.3;--lh-l2:1.32;--lh-ml1:1.32;--lh-ml2:1.4;--lh-body:1.75;--lh-small:1.75;--lh-mono:1.6;--h1-k:0.1175;--h2-k:0.1434;--h1-hr:0.3436;--h2-hr:0.4192;--h1-ws:nowrap;--h2-ws:nowrap;--h1-km:0.1143;--h2-km:0.1429;--h1-cap:80px;--h2-cap:98px;--h1-mws:nowrap;--h2-mws:nowrap}
html[data-lang="hi"]{--font-sans:'Noto Sans Devanagari', 'Nirmala UI', system-ui, sans-serif;--font-mono:'Noto Sans Devanagari', 'Nirmala UI', system-ui, sans-serif;--mono-case:none;--mono-track:0em;--mono-track-2:0em;--proof-track:0em;--fac:0.84;--tr-ui:0em;--tr-body:0em;--tr-h2:0em;--tr-man:0em;--tr-h3:0em;--tr-h3b:0em;--tr-pr:0em;--tr-xl:0em;--tr-display:0em;--tr-num:0em;--lh-h2:1.3;--lh-man:1.55;--lh-h3:1.35;--lh-h3b:1.3;--lh-pr:1.3;--lh-c:1.35;--lh-l1:1.3;--lh-l2:1.35;--lh-ml1:1.3;--lh-ml2:1.35;--lh-body:1.75;--lh-small:1.75;--lh-mono:1.6;--h1-k:0.1105;--h2-k:0.134;--h1-hr:0.3405;--h2-hr:0.4129;--h1-ws:nowrap;--h2-ws:nowrap;--h1-km:0.1086;--h2-km:0.1371;--h1-cap:75px;--h2-cap:91px;--h1-mws:nowrap;--h2-mws:nowrap}
html[data-lang="zh"]{--font-sans:'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;--font-mono:'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;--mono-case:none;--mono-track:0em;--mono-track-2:0em;--proof-track:0em;--fac:0.8;--tr-ui:0em;--tr-body:0em;--tr-h2:0em;--tr-man:0em;--tr-h3:0em;--tr-h3b:0em;--tr-pr:0em;--tr-xl:0em;--tr-display:0em;--tr-num:0em;--lh-h2:1.18;--lh-man:1.45;--lh-h3:1.3;--lh-h3b:1.2;--lh-pr:1.25;--lh-c:1.2;--lh-l1:1.14;--lh-l2:1.14;--lh-ml1:1.2;--lh-ml2:1.18;--lh-body:1.7;--lh-small:1.7;--lh-mono:1.55;--h1-k:0.1046;--h2-k:0.1269;--h1-hr:0.3963;--h2-hr:0.4809;--h1-ws:nowrap;--h2-ws:nowrap;--h1-km:0.1143;--h2-km:0.1429;--h1-cap:71px;--h2-cap:86px;--h1-mws:nowrap;--h2-mws:nowrap}
html[data-lang="ja"]{--font-sans:'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', system-ui, sans-serif;--font-mono:'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', system-ui, sans-serif;--mono-case:none;--mono-track:0em;--mono-track-2:0em;--proof-track:0em;--fac:0.8;--tr-ui:0em;--tr-body:0em;--tr-h2:0em;--tr-man:0em;--tr-h3:0em;--tr-h3b:0em;--tr-pr:0em;--tr-xl:0em;--tr-display:0em;--tr-num:0em;--lh-h2:1.18;--lh-man:1.45;--lh-h3:1.3;--lh-h3b:1.2;--lh-pr:1.25;--lh-c:1.2;--lh-l1:1.14;--lh-l2:1.14;--lh-ml1:1.2;--lh-ml2:1.18;--lh-body:1.7;--lh-small:1.7;--lh-mono:1.55;--h1-k:0.1046;--h2-k:0.1269;--h1-hr:0.3963;--h2-hr:0.4809;--h1-ws:nowrap;--h2-ws:nowrap;--h1-km:0.1143;--h2-km:0.1429;--h1-cap:71px;--h2-cap:86px;--h1-mws:nowrap;--h2-mws:nowrap}
html[data-lang="ko"]{--font-sans:'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;--font-mono:'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;--mono-case:none;--mono-track:0em;--mono-track-2:0em;--proof-track:0em;--fac:0.8;--tr-ui:0em;--tr-body:0em;--tr-h2:0em;--tr-man:0em;--tr-h3:0em;--tr-h3b:0em;--tr-pr:0em;--tr-xl:0em;--tr-display:0em;--tr-num:0em;--lh-h2:1.18;--lh-man:1.45;--lh-h3:1.3;--lh-h3b:1.2;--lh-pr:1.25;--lh-c:1.2;--lh-l1:1.14;--lh-l2:1.14;--lh-ml1:1.2;--lh-ml2:1.18;--lh-body:1.7;--lh-small:1.7;--lh-mono:1.55;--h1-k:0.1046;--h2-k:0.1269;--h1-hr:0.3963;--h2-hr:0.4809;--h1-ws:nowrap;--h2-ws:nowrap;--h1-km:0.1143;--h2-km:0.1429;--h1-cap:71px;--h2-cap:86px;--h1-mws:nowrap;--h2-mws:nowrap}
:root {
--bg: #05070C;
--surface: #0A0E17;
--hair: rgba(240, 246, 250, .10);
--hair-strong: rgba(240, 246, 250, .18);
--text: #F2F6FA;
--white: #FFFFFF;
--body: #AEB8C8;
--muted: #97A1B3;
--label: #8A94A6;
--soft: #C3CBD6;
--accent: #00E5FF;
--accent-rgb: 0, 229, 255;
--deep-rgb: 0, 110, 220;
--sos: #FF3B30;
--gold: #FFD166;
--container: 1440px;
--content: 1312px;
--gutter: 16px;
--gap: 24px;
--cols: 4;
--nav-top: 0px;
--nav-h: 62px;
--logo-pull: 7px;
--scroll-offset: 76px;
--section-space: 96px;
--radius-card: 20px;
--radius-chip: 999px;
--t-h2: 40px; --t-man: 28px; --t-h3: 22px; --t-h3b: 30px; --t-pr: 26px;
--t-body: 16px; --t-body-lh: 25px; --t-small: 14px; --t-small-lh: 21px; --t-mono: 12px;
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-spring: cubic-bezier(.2, 1.4, .3, 1);
--ease-io: cubic-bezier(.45, 0, .25, 1);
--cycle: 5s;
--start: 1.6s;
--glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), inset 0 -1px 0 rgba(255, 255, 255, .08), inset 0 0 18px rgba(255, 255, 255, .05), 0 12px 32px -12px rgba(0, 0, 0, .65), 0 2px 6px -2px rgba(0, 0, 0, .35);
--cta-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(255, 255, 255, .1), inset 0 0 22px rgba(var(--accent-rgb), .22), 0 18px 50px -18px rgba(var(--accent-rgb), .7), 0 2px 6px -2px rgba(0, 0, 0, .4);
--cta-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(255, 255, 255, .08), inset 0 0 16px rgba(var(--accent-rgb), .2), 0 10px 28px -12px rgba(var(--accent-rgb), .6);
--tint: linear-gradient(180deg, rgba(var(--accent-rgb), .30) 0%, rgba(var(--accent-rgb), .11) 56%, rgba(var(--accent-rgb), .18) 100%);
--font-sans: 'Host Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'Fragment Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
--font-num: 'Fragment Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
--mono-case: uppercase; --mono-track: .12em; --mono-track-2: .1em; --proof-track: .02em;
--fac: 1;
}
@media (min-width: 768px) { :root { --gutter: 40px; --cols: 8; } }
@media (min-width: 1024px) {
:root {
--gutter: 64px; --cols: 12;
--nav-h: 76px; --scroll-offset: 96px; --section-space: 160px;
--radius-card: 28px;
--t-h2: 72px; --t-man: 52px; --t-h3: 30px; --t-h3b: 44px; --t-pr: 40px;
--t-body: 18px; --t-body-lh: 28px; --t-small: 15px; --t-small-lh: 24px;
}
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
scroll-behavior: smooth;
background-color: var(--bg);
color-scheme: dark;
}
body {
margin: 0;
min-height: 100vh;
background-color: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
em { font-style: normal; }
[id] { scroll-margin-top: var(--scroll-offset); }
#inicio { scroll-margin-top: 0; }
.site-main { position: relative; z-index: 1; display: block; outline: none; }
.sr-only {
position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.fv:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fv:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; }
::selection { background: rgba(var(--accent-rgb), .32); color: var(--white); }
.skip-link {
position: fixed; top: 12px; inset-inline-start: 16px; z-index: 300;
display: inline-flex; align-items: center; height: 44px; padding: 0 18px;
border-radius: 999px; background: var(--text); color: var(--bg);
font-size: 14px; font-weight: 500;
transform: translateY(-160%); transition: transform .3s var(--ease-out);
}
.skip-link:focus { transform: none; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); }
.grid > * { grid-column: 1 / -1; min-width: 0; }
@media (max-width: 767.98px) {
.m-span-1 { grid-column: span 1; } .m-span-2 { grid-column: span 2; } .m-span-3 { grid-column: span 3; } .m-span-4 { grid-column: span 4; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.t-span-1 { grid-column: span 1; } .t-span-2 { grid-column: span 2; } .t-span-3 { grid-column: span 3; } .t-span-4 { grid-column: span 4; }
.t-span-5 { grid-column: span 5; } .t-span-6 { grid-column: span 6; } .t-span-7 { grid-column: span 7; } .t-span-8 { grid-column: span 8; }
}
@media (min-width: 1024px) {
.span-1 { grid-column: span 1; } .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; } .span-10 { grid-column: span 10; } .span-11 { grid-column: span 11; } .span-12 { grid-column: span 12; }
}
.section { position: relative; padding-block: var(--section-space); }
.t-label {
font-family: var(--font-mono);
font-size: 12px; line-height: 20px; font-weight: 400;
letter-spacing: var(--mono-track);
text-transform: var(--mono-case);
color: var(--label);
}
.t-index {
font-family: var(--font-num);
font-size: 12px; line-height: 20px;
letter-spacing: .08em;
font-variant-numeric: tabular-nums;
color: var(--accent);
}
.t-h2 { font-size: calc(var(--t-h2) * var(--fac)); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-weight: 500; color: var(--text); text-wrap: balance; }
.t-man { font-size: calc(var(--t-man) * var(--fac)); line-height: var(--lh-man); letter-spacing: var(--tr-man); font-weight: 500; text-wrap: balance; }
.t-h3 { font-size: calc(var(--t-h3) * var(--fac)); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: 500; text-wrap: balance; }
.t-h3b { font-size: calc(var(--t-h3b) * var(--fac)); line-height: var(--lh-h3b); letter-spacing: var(--tr-h3b); font-weight: 500; text-wrap: balance; }
.t-lede { font-size: var(--t-body); line-height: var(--t-body-lh); letter-spacing: var(--tr-body); color: var(--body); max-width: 640px; text-wrap: pretty; }
.t-body { font-size: var(--t-body); line-height: var(--t-body-lh); letter-spacing: var(--tr-body); color: var(--body); text-wrap: pretty; }
.t-small { font-size: var(--t-small); line-height: var(--t-small-lh); color: var(--body); text-wrap: pretty; }
.t-strong { color: var(--text); }
.t-h2, .t-man, .t-h3, .t-h3b, .t-lede, .t-body { overflow-wrap: break-word; hyphens: auto; }
html[data-script="ar"] .t-body, html[data-script="hi"] .t-body, html[data-script="cjk"] .t-body,
html[data-script="ar"] .t-lede, html[data-script="hi"] .t-lede, html[data-script="cjk"] .t-lede { line-height: var(--lh-body); }
.lg {
position: relative; isolation: isolate;
background: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .05) 52%, rgba(255, 255, 255, .09) 100%);
-webkit-backdrop-filter: blur(22px) saturate(185%) brightness(1.08);
backdrop-filter: blur(22px) saturate(185%) brightness(1.08);
box-shadow: var(--glass-shadow);
}
.lg::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
background: linear-gradient(135deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .10) 28%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .08) 72%, rgba(255, 255, 255, .40) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.lg::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0;
background: radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 60%);
transition: opacity .45s ease;
}
.lg-tint { background: var(--tint); }
.lg-dark { background: linear-gradient(180deg, rgba(24, 30, 43, .58) 0%, rgba(10, 14, 22, .46) 100%); }
.lg-chip {
background: linear-gradient(180deg, rgba(24, 30, 43, .62) 0%, rgba(10, 14, 22, .5) 100%);
-webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%);
}
.glass-panel {
background: linear-gradient(180deg, rgba(20, 24, 35, .74) 0%, rgba(10, 13, 20, .66) 100%);
-webkit-backdrop-filter: blur(40px) saturate(190%) brightness(1.04);
backdrop-filter: blur(40px) saturate(190%) brightness(1.04);
box-shadow: inset 0 18px 30px -24px rgba(255, 255, 255, .28), inset 0 0 40px rgba(255, 255, 255, .03), 0 28px 60px -20px rgba(0, 0, 0, .75), 0 4px 14px -6px rgba(0, 0, 0, .5);
}
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
height: 52px; padding: 0 22px; border-radius: 999px;
color: var(--text); font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: var(--tr-ui);
white-space: nowrap; text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
cursor: pointer;
transition: transform .55s var(--ease-spring), box-shadow .4s ease;
}
.btn-primary { padding-inline: 10px 20px; box-shadow: var(--cta-shadow); }
.btn--block { display: flex; width: 100%; height: 54px; padding-inline: 16px; }
.btn .i-ext, .btn .i-back, .btn .i-down, .btn .i-mail { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn:active { transform: scale(.985); transition-duration: .16s; }
.btn:active::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
.btn:hover { transform: translateY(-1px) scale(1.015); }
.btn:hover::after { opacity: 1; }
.btn:hover .i-down { transform: translateY(2px); }
}
.i-down { transition: transform .5s var(--ease-spring); }
.sphere {
--s: 32px;
position: relative; display: block; flex: none;
width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden;
background: #04122A;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 0 18px -3px rgba(var(--accent-rgb), .75);
}
.sphere img { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; max-width: none; }
.sphere::after {
content: ""; position: absolute; inset: 0; border-radius: 50%;
background: radial-gradient(90% 60% at 32% 6%, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 62%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 1px 2px rgba(255, 255, 255, .45), inset 0 -5px 8px rgba(0, 0, 0, .28);
}
.sphere--28 { --s: 28px; } .sphere--32 { --s: 32px; } .sphere--34 { --s: 34px; } .sphere--64 { --s: 64px; } .sphere--72 { --s: 72px; }
.store-badges { --bh: 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.store-badges--44 { --bh: 44px; }
.store-badges--40 { --bh: 40px; }
.store-badges--center { justify-content: center; }
.store-badge { position: relative; display: block; flex: none; border-radius: calc(var(--bh) * .2); transition: transform .5s var(--ease-spring), filter .3s ease; }
.store-badge img { display: block; height: var(--bh); width: auto; }
.store-badge--ios img { width: calc(var(--bh) * 2.99166); }
.store-badge--gp img { width: calc(var(--bh) * 3.35714); }
@media (hover: hover) and (pointer: fine) { a.store-badge:hover { transform: translateY(-1px); filter: brightness(1.12); } }
.store-badge--soon { cursor: default; }
.store-badge--soon img { opacity: .42; filter: grayscale(.4); }
.soon-tag {
position: absolute; left: 50%; top: 50%; translate: -50% -50%;
display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px;
background: rgba(var(--accent-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55), 0 4px 14px -6px rgba(0, 0, 0, .8);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
font-family: var(--font-mono); font-size: 11px; line-height: 22px; letter-spacing: var(--mono-track-2); text-transform: var(--mono-case);
color: var(--accent); white-space: nowrap;
}
.i-ext, .i-back, .i-next, .i-chev, .i-globe, .i-pin, .i-lock, .i-down, .i-mail, .i-pause, .i-play { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.i-ext { stroke-width: 1.6; }
.i-globe { stroke-width: 1.3; }
.i-chev { stroke-width: 1.4; color: var(--soft); transition: transform .35s var(--ease-spring); }
.i-next, .i-back { stroke-width: 1.4; }
[dir="rtl"] .i-next, [dir="rtl"] .i-back { transform: scaleX(-1); }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; pointer-events: none; }
.site-header::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-color: rgba(6, 9, 15, .58);
background-image: linear-gradient(180deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .025) 58%, rgba(255, 255, 255, .045) 100%);
-webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.04);
backdrop-filter: blur(24px) saturate(180%) brightness(1.04);
box-shadow: inset 0 -16px 22px -20px rgba(255, 255, 255, .10), 0 14px 32px -18px rgba(0, 0, 0, .7);
opacity: 0;
transition: opacity .3s ease;
}
.site-header.is-stuck { pointer-events: auto; }
.site-header.is-stuck::before, html.no-js .site-header::before { opacity: 1; }
.site-header-inner { position: relative; z-index: 1; }
.bar {
--lang-w: 72px; --g-now: 8px; --g-menu: 8px;
position: relative; display: flex; align-items: center;
height: var(--nav-h); pointer-events: auto;
animation: nav-in 1s ease .1s backwards;
}
.bar-logo {
position: relative; display: flex; flex: none; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%;
margin-inline-start: calc(-1 * var(--logo-pull));
}
.bar-logo img { position: relative; width: 30px; height: 30px; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .55)) drop-shadow(0 0 16px rgba(var(--accent-rgb), .25)); }
.bar-logo-halo {
position: absolute; left: 6px; top: 6px; width: 32px; height: 32px; border-radius: 50%;
background: radial-gradient(closest-side, rgba(var(--accent-rgb), .42) 0%, rgba(var(--accent-rgb), .12) 55%, rgba(var(--accent-rgb), 0) 100%);
opacity: .55;
animation: sym var(--cycle) ease-out var(--start) infinite;
}
.bar-nav { display: none; }
.bar-links { display: flex; align-items: center; }
.nav-link {
position: relative; isolation: isolate;
display: inline-flex; align-items: center; height: 44px; padding: 0 var(--nav-pad, 14px);
border-radius: 999px; color: var(--soft);
font-size: 14px; line-height: 20px; font-weight: 450; letter-spacing: var(--tr-ui);
white-space: nowrap;
text-shadow: 0 1px 2px rgba(5, 7, 12, .55), 0 0 12px rgba(5, 7, 12, .35);
transition: color .3s ease;
}
.nav-text { position: relative; }
.nav-pill {
position: absolute; inset: 4px 0; z-index: -1; border-radius: 999px; overflow: hidden; pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .04) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .05);
opacity: 0; transform: scale(.94);
transition: opacity .35s ease, transform .5s var(--ease-spring);
}
.nav-fill {
position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(90deg, rgba(var(--accent-rgb), .10) 0%, rgba(var(--accent-rgb), .34) 100%);
transform-origin: 0 50%; transform: scaleX(0);
transition: transform .45s var(--ease-out);
}
[dir="rtl"] .nav-fill { transform-origin: 100% 50%; background: linear-gradient(270deg, rgba(var(--accent-rgb), .10) 0%, rgba(var(--accent-rgb), .34) 100%); }
.nav-prog {
--np: 12px;
position: absolute; inset-inline: var(--np); bottom: 3px; height: 2px; border-radius: 1px; pointer-events: none;
background: rgba(var(--accent-rgb), .95);
box-shadow: 0 0 6px rgba(var(--accent-rgb), .55);
transform-origin: 0 50%; transform: scaleX(0);
}
[dir="rtl"] .nav-prog { transform-origin: 100% 50%; }
.nav-link .nav-prog { --np: var(--nav-pad, 14px); }
.nav-link.is-active { color: var(--white); }
.nav-link.is-active .nav-pill { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
.nav-link:hover { color: var(--white); }
.nav-link:not(.is-active):hover .nav-pill { opacity: .6; transform: none; }
.nav-link:not(.is-active) .nav-fill { opacity: 0; }
}
.lang { display: flex; flex: none; }
.lang-btn {
appearance: none; margin: 0; border: 0; cursor: pointer;
display: inline-flex; align-items: center; gap: 7px;
height: 44px; padding: 0 10px 0 12px; border-radius: 999px;
background: linear-gradient(180deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .07) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(255, 255, 255, .06);
color: var(--text);
font-family: var(--font-num); font-size: 12.5px; line-height: 16px; font-weight: 400; letter-spacing: .06em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
transition: background-color .25s ease, transform .45s var(--ease-spring);
}
.lang-btn .i-globe { stroke: var(--text); }
.lang.is-open .lang-btn { background: linear-gradient(180deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .09) 100%); }
.lang.is-open .i-chev { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .lang-btn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .07) 55%, rgba(255, 255, 255, .10) 100%); } }
.lang-btn:active { transform: scale(.96); }
.lang-panel {
position: absolute; top: calc(100% + 10px); inset-inline: 0; z-index: 3;
padding: 16px 10px 10px; border-radius: 28px;
visibility: hidden; opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: 50% 0;
transition: opacity .2s ease, transform .3s var(--ease-out), visibility 0s linear .3s;
pointer-events: auto;
}
.lang.is-open .lang-panel { visibility: visible; opacity: 1; transform: none; transition: opacity .25s ease, transform .4s var(--ease-out), visibility 0s; }
.lang-title { padding: 0 14px 10px; font-family: var(--font-mono); font-size: 12px; line-height: 20px; letter-spacing: var(--mono-track); text-transform: var(--mono-case); color: var(--body); }
.lang-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.lang-item {
display: flex; align-items: center; gap: 10px;
min-height: 46px; padding: 0 14px; border-radius: 16px;
color: var(--soft);
font-family: var(--lf, var(--font-sans)); font-size: 15px; line-height: 20px;
transition: background-color .2s ease, color .2s ease;
}
.lang-item-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgba(240, 246, 250, .18); }
.lang-item-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
html[dir="rtl"] .lang-item-name { text-align: right; }
.lang-item-code { flex: none; font-family: var(--font-num); font-size: 12px; line-height: 16px; color: var(--label); }
.lang-item.is-current { background: rgba(255, 255, 255, .09); color: var(--white); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20), inset 0 -1px 0 rgba(255, 255, 255, .05); }
.lang-item.is-current .lang-item-dot { background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), .8); }
.lang-item:active { background: rgba(255, 255, 255, .10); }
@media (hover: hover) and (pointer: fine) { .lang-item:hover { background: rgba(255, 255, 255, .08); color: var(--white); } }
.bar-cta { display: none; }
@media (max-width: 1023.98px) { .lang-btn { width: var(--lang-w); justify-content: center; gap: 5px; padding: 0; padding-inline-start: 2px; } }
@media (max-width: 399.98px) {
.bar { --lang-w: 44px; }
.lang-btn { padding: 0; }
.lang-btn-code, .lang-btn .i-chev { display: none; }
}
.bar-now { flex: 1 1 0; min-width: 0; display: flex; align-items: center; padding-inline: var(--g-now); opacity: 0; transition: opacity .35s ease; }
.bar-now::before { content: ""; flex: 0 1 calc(var(--lang-w) + var(--g-menu) + var(--logo-pull)); min-width: 0; }
.bar-now.is-on { opacity: 1; }
.bar-now-box {
position: relative; display: grid; align-items: center; flex: 0 0 auto; min-width: 0; max-width: 100%; margin-inline: auto;
height: 32px; padding: 0 14px; border-radius: 999px; overflow: hidden;
background: rgba(255, 255, 255, .06);
}
.bar-now-box .nav-prog { --np: 14px; bottom: 3px; }
.bar-now-box > span[data-now] {
grid-area: 1 / 1; position: relative; min-width: 0;
font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: var(--tr-ui); color: var(--text);
text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
opacity: 0; transform: translateY(6px);
transition: opacity .35s ease, transform .5s var(--ease-out);
}
.bar-now-box > span[data-now].is-on { opacity: 1; transform: none; }
@media (max-width: 399.98px) { .bar-now-box { padding: 0 12px; } .bar-now-box .nav-prog { --np: 12px; } }
@media (max-width: 359.98px) {
.bar { --g-now: 4px; --g-menu: 6px; }
.bar-now-box { padding: 0 8px; }
.bar-now-box .nav-prog { --np: 8px; }
.bar-now-box > span[data-now] { font-size: 12px; }
}
@media (max-width: 339.98px) { .bar { --g-menu: 4px; } }
.menu-btn {
appearance: none; position: relative; display: block; flex: none;
width: 44px; height: 44px; margin: 0; margin-inline-start: var(--g-menu); padding: 0; border: 0; border-radius: 50%; cursor: pointer;
background: rgba(255, 255, 255, .06);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
transition: background-color .25s ease, transform .45s var(--ease-spring);
}
.menu-btn:active { transform: scale(.94); }
.menu-bars > span { position: absolute; left: 14px; width: 16px; height: 1.5px; border-radius: 1px; background: var(--text); transition: transform .45s var(--ease-spring), opacity .25s ease; }
.menu-bars > span:nth-child(1) { top: 16.25px; }
.menu-bars > span:nth-child(2) { top: 21.25px; }
.menu-bars > span:nth-child(3) { top: 26.25px; }
.menu-open .menu-bars > span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-open .menu-bars > span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.menu-open .menu-bars > span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.menu-open .menu-btn { background: rgba(255, 255, 255, .14); }
.sheet {
position: absolute; top: calc(var(--nav-h) + 10px); inset-inline: var(--gutter); z-index: 2;
padding: 10px; border-radius: 28px; pointer-events: auto;
visibility: hidden; opacity: 0; transform: translateY(-10px) scale(.97); transform-origin: 50% 0;
transition: opacity .2s ease, transform .3s var(--ease-out), visibility 0s linear .3s;
}
.menu-open .sheet { visibility: visible; opacity: 1; transform: none; transition: opacity .25s ease, transform .45s var(--ease-out), visibility 0s; }
.sheet-links { display: flex; flex-direction: column; gap: 2px; }
.sheet-link {
position: relative; isolation: isolate;
display: flex; align-items: center; gap: 14px;
min-height: 56px; padding: 8px 14px; border-radius: 18px;
color: var(--text); transition: background-color .2s ease;
}
.sheet-link .nav-pill { inset: 0; border-radius: 18px; }
.sheet-link .nav-prog { inset-inline: 50px 14px; bottom: 6px; }
.sheet-link.is-active .nav-pill { opacity: 1; transform: none; }
.sheet-link:active { background: rgba(255, 255, 255, .08); }
.sheet-idx { flex: none; width: 22px; font-family: var(--font-num); font-size: 12px; line-height: 18px; color: var(--accent); font-variant-numeric: tabular-nums; }
.sheet-text { flex: 1 1 auto; min-width: 0; font-size: 17px; line-height: 1.25; font-weight: 500; letter-spacing: var(--tr-h3); }
.sheet-link .i-next { color: var(--label); }
.sheet-foot { margin-top: 8px; padding: 14px 4px 4px; border-top: 1px solid var(--hair); }
.sheet-foot .store-badges { margin-top: 12px; }
@media (min-width: 1024px) {
.bar {
--nav-gap: clamp(32px, calc(32px + (100vw - 1024px) / 52), 40px);
--nav-pad: calc(var(--nav-gap) * .4);
--pair-gap: clamp(14px, 1.4vw, 20px);
}
.bar-logo { margin-inline-end: calc(-1 * var(--logo-pull)); }
.bar-nav { display: flex; flex: 1 1 auto; justify-content: center; padding-inline: var(--nav-gap); }
.bar-links { gap: calc(var(--nav-gap) - 2 * var(--nav-pad)); }
.bar-now, .menu-btn, .sheet { display: none; }
.lang-btn { height: 44px; padding: 0 12px 0 14px; gap: 8px; }
.bar-cta {
display: inline-flex; flex: none; align-items: center; gap: 10px;
height: 44px; margin-inline-start: var(--pair-gap); padding: 0 16px 0 8px; border-radius: 999px;
background: var(--tint); box-shadow: var(--cta-shadow-sm);
-webkit-backdrop-filter: none; backdrop-filter: none;
color: var(--text); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: var(--tr-ui);
white-space: nowrap; text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
transition: transform .55s var(--ease-spring), box-shadow .4s ease;
}
.lang-panel { inset-inline: auto 0; width: min(600px, calc(100vw - 2 * var(--gutter))); padding: 20px 20px 16px; }
.lang-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lang-item { min-height: 44px; border-radius: 14px; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
.bar-cta:hover { transform: translateY(-1px) scale(1.015); }
.bar-cta:hover::after { opacity: 1; }
}
html.nav-tight .bar-cta-text { display: none; }
html.nav-tight .bar-cta { padding-inline: 8px 12px; }
.hero {
position: relative; isolation: isolate; overflow: clip;
display: flex; flex-direction: column; justify-content: flex-end;
height: 100vh; height: 100svh; min-height: 680px; max-height: 1000px;
background-color: var(--bg);
z-index: 1;
}
@media (min-width: 1024px) { .hero { min-height: 640px; max-height: 1600px; } }
@media (max-width: 1023.98px) and (orientation: landscape) and (max-height: 540px) { .hero { min-height: 560px; } }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: clip; pointer-events: none; background: var(--bg); }
.hero-sky {
position: absolute; inset: 0;
background:
radial-gradient(60% 46% at 50% 36%, rgba(var(--accent-rgb), .13) 0%, rgba(var(--accent-rgb), 0) 100%),
radial-gradient(90% 70% at 20% 80%, rgba(var(--deep-rgb), .16) 0%, rgba(var(--deep-rgb), 0) 100%),
radial-gradient(70% 60% at 88% 20%, rgba(var(--deep-rgb), .12) 0%, rgba(var(--deep-rgb), 0) 100%),
linear-gradient(180deg, #05070C 0%, #070B14 50%, #05070C 100%);
}
.hero-zoom { position: absolute; inset: 0; transform-origin: 50% 40%; }
.hero-film { position: absolute; inset: 0; animation: film-in 2.4s var(--ease-out) both; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; background: transparent; }
.hero-city { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: .5; }
.city-street { fill: none; stroke: rgba(240, 246, 250, .075); stroke-width: 1; }
.city-block { fill: rgba(240, 246, 250, .022); }
.city-avenue { fill: none; stroke: rgba(var(--accent-rgb), .14); stroke-width: 1.2; }
.city-lights circle { fill: var(--accent); opacity: .5; animation: sym var(--cycle) ease-in-out infinite; }
.city-lights circle:nth-child(2n) { animation-delay: 1.3s; opacity: .35; }
.city-lights circle:nth-child(3n) { animation-delay: 2.6s; fill: #FFFFFF; opacity: .45; }
.hero-veil { position: absolute; inset: 0; }
.hero-veil--tone { background: rgba(5, 7, 12, .30); }
.hero-veil--head, .hero-veil--side { display: none; }
.hero-veil--top { background: linear-gradient(180deg, rgba(5, 7, 12, .7) 0px, rgba(5, 7, 12, .22) 104px, rgba(5, 7, 12, 0) 180px); }
.hero-veil--bottom { background: linear-gradient(0deg, rgba(5, 7, 12, .98) 0px, rgba(5, 7, 12, .92) 220px, rgba(5, 7, 12, .78) 400px, rgba(5, 7, 12, .3) 520px, rgba(5, 7, 12, 0) 640px); }
.hero-veil--edges { background: linear-gradient(90deg, rgba(5, 7, 12, .35) 0%, rgba(5, 7, 12, 0) 26%, rgba(5, 7, 12, 0) 74%, rgba(5, 7, 12, .35) 100%); }
.hero-dim { position: absolute; inset: 0; background: rgba(5, 7, 12, .82); opacity: 0; }
@media (min-width: 1024px) {
.hero-veil--tone { background: rgba(5, 7, 12, .2); }
.hero-veil--head { display: block; background: radial-gradient(1100px 560px at calc(50% - 340px) calc(100% - 250px), rgba(5, 7, 12, .72) 0%, rgba(5, 7, 12, .44) 45%, rgba(5, 7, 12, 0) 75%); }
.hero-veil--side { display: block; background: radial-gradient(760px 460px at calc(50% + 460px) calc(100% - 240px), rgba(5, 7, 12, .72) 0%, rgba(5, 7, 12, 0) 72%); }
[dir="rtl"] .hero-veil--head { background: radial-gradient(1100px 560px at calc(50% + 340px) calc(100% - 250px), rgba(5, 7, 12, .72) 0%, rgba(5, 7, 12, .44) 45%, rgba(5, 7, 12, 0) 75%); }
[dir="rtl"] .hero-veil--side { background: radial-gradient(760px 460px at calc(50% - 460px) calc(100% - 240px), rgba(5, 7, 12, .72) 0%, rgba(5, 7, 12, 0) 72%); }
.hero-veil--top { background: linear-gradient(180deg, rgba(5, 7, 12, .78) 0px, rgba(5, 7, 12, .3) 130px, rgba(5, 7, 12, 0) 260px); }
.hero-veil--bottom { background: linear-gradient(0deg, rgba(5, 7, 12, 1) 0px, rgba(5, 7, 12, .94) 150px, rgba(5, 7, 12, .72) 330px, rgba(5, 7, 12, .26) 490px, rgba(5, 7, 12, 0) 620px); }
.hero-veil--edges { background: linear-gradient(90deg, rgba(5, 7, 12, .55) 0%, rgba(5, 7, 12, 0) 20%, rgba(5, 7, 12, 0) 80%, rgba(5, 7, 12, .55) 100%); }
}
.radar {
--ping-r: 680px; --av: 40px; --hz: -300px;
position: absolute; left: 50%; top: 50%; width: 0; height: 0;
visibility: visible; pointer-events: none;
font-family: var(--font-sans); font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.2; letter-spacing: 0;
white-space: nowrap; color: var(--text); text-wrap: nowrap;
}
html.js .radar:not(.is-ready) { visibility: hidden; }
.radar.is-paused * { animation-play-state: paused !important; }
.radar.is-compact { --av: 36px; }
.radar.is-roomy { --av: 42px; }
@media (min-width: 1024px) { .radar { --ping-r: 1000px; --av: 42px; --hz: -340px; } }
.radar-exit, .radar-fade { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.radar-exit { transform-origin: 0 0; }
.radar-rings {
position: absolute; left: -800px; top: -800px; width: 1600px; height: 1600px;
-webkit-mask-image: linear-gradient(180deg, #000 0px, #000 calc(800px + var(--hz) - 56px), rgba(0, 0, 0, 0) calc(800px + var(--hz)));
mask-image: linear-gradient(180deg, #000 0px, #000 calc(800px + var(--hz) - 56px), rgba(0, 0, 0, 0) calc(800px + var(--hz)));
animation: fade 1.6s ease 1.2s both;
}
.radar-rings-svg { position: absolute; inset: 0; width: 1600px; height: 1600px; max-width: none; overflow: visible; }
.ring { fill: none; stroke: #F2F6FA; stroke-width: 1px; }
.ring--accent { stroke: var(--accent); stroke-opacity: .9; stroke-width: 1.25px; stroke-dasharray: 2 4; stroke-linecap: round; }
.ring--d-far { stroke-opacity: .08; display: none; }
.ring--d-mid { display: none; }
.ring--m-near { stroke-opacity: .16; }
.ring--m-far { stroke-opacity: .1; }
@media (min-width: 1024px) {
.ring--d-far, .ring--d-mid { display: inline; }
.ring--m-near, .ring--m-mid, .ring--m-far { display: none; }
}
.radar-pings {
position: absolute; left: calc(-1 * var(--ping-r)); top: calc(-1 * var(--ping-r));
width: calc(2 * var(--ping-r)); height: calc(2 * var(--ping-r));
-webkit-mask-image: linear-gradient(180deg, #000 0px, #000 calc(var(--ping-r) + var(--hz) - 56px), rgba(0, 0, 0, .55) calc(var(--ping-r) + var(--hz)), rgba(0, 0, 0, .55) 100%);
mask-image: linear-gradient(180deg, #000 0px, #000 calc(var(--ping-r) + var(--hz) - 56px), rgba(0, 0, 0, .55) calc(var(--ping-r) + var(--hz)), rgba(0, 0, 0, .55) 100%);
}
.ping {
position: absolute; inset: 0; border-radius: 50%;
border: 2px solid var(--accent);
box-shadow: 0 0 24px 2px rgba(var(--accent-rgb), .14), inset 0 0 24px 2px rgba(var(--accent-rgb), .14);
opacity: 0; transform: scale(.02);
will-change: transform, opacity;
animation: ping var(--cycle) linear var(--start) infinite;
}
.ping--echo { border: 1px solid rgba(var(--accent-rgb), .45); box-shadow: none; animation-delay: calc(var(--start) + .3s); }
@media (min-width: 1024px) {
.ping { border: 3px solid rgba(var(--accent-rgb), .85); box-shadow: 0 0 40px 4px rgba(var(--accent-rgb), .14), inset 0 0 40px 4px rgba(var(--accent-rgb), .14); transform: scale(.012); }
.ping--echo { border: 2px solid rgba(var(--accent-rgb), .4); box-shadow: none; }
}
.radar-link { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; animation: fade .9s ease var(--t-link, 4s) both; }
.radar-link.is-off { display: none; }
.radar-link-line { fill: none; stroke: var(--accent); stroke-opacity: .4; stroke-width: 1px; }
.radar-link-dots { fill: none; stroke: var(--accent); stroke-opacity: .9; stroke-width: 1.6px; stroke-linecap: round; stroke-dasharray: .1 8; }
.radar-link-packet {
fill: none; stroke: #FFFFFF; stroke-width: 2.25px; stroke-linecap: round;
stroke-dasharray: 3 200; stroke-dashoffset: 3;
filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .9));
opacity: 0;
animation: packet var(--cycle) linear var(--t-packet, 4.2s) infinite;
}
@media (min-width: 1024px) { .radar-link-dots { display: none; } .radar-link-line { stroke-opacity: .42; } }
.pin { position: absolute; width: 0; height: 0; animation: av-in .9s var(--ease-out) var(--t, 3s) both; }
.pin.is-off, .chip.is-off, .radar-label.is-off { display: none; }
.pin-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.pin-avatar {
position: absolute; left: calc(var(--av) / -2); top: calc(var(--av) / -2);
width: var(--av); height: var(--av); border-radius: 50%; overflow: hidden;
background: #0B1220;
box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px rgba(var(--accent-rgb), .16), 0 0 22px 3px rgba(var(--accent-rgb), .45), 0 6px 16px -4px rgba(0, 0, 0, .6);
animation: av-beat var(--cycle) var(--ease-out) var(--t, 3s) infinite;
}
.pin-avatar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pin-blip {
position: absolute; left: calc(var(--av) / -2 - 7px); top: calc(var(--av) / -2 - 7px);
width: calc(var(--av) + 14px); height: calc(var(--av) + 14px);
border-radius: 50%; border: 1.5px solid rgba(var(--accent-rgb), .8);
opacity: 0;
animation: blip var(--cycle) cubic-bezier(.2, .6, .3, 1) var(--t, 3s) infinite;
}
.pin--place { animation-name: dot-in; animation-duration: .8s; }
.pin-diamond {
position: absolute; left: -7px; top: -7px; width: 14px; height: 14px;
border-radius: 3px; background: rgba(5, 7, 12, .78); border: 1.5px solid #F2F6FA;
box-shadow: 0 0 12px rgba(242, 246, 250, .35);
transform: rotate(45deg);
}
.pin-diamond::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--accent); }
.chip {
position: absolute; display: flex; align-items: center; gap: 7px;
width: max-content; max-width: none;
height: 30px; padding: 0 14px; border-radius: 999px;
font-size: 13px; line-height: 1; font-weight: 500; letter-spacing: var(--tr-ui);
color: #F2F6FA; text-shadow: 0 1px 1px rgba(0, 0, 0, .4); white-space: nowrap;
animation: chip-in .7s var(--ease-out) var(--t, 4s) both;
}
.chip-text { display: block; flex: none; min-width: max-content; overflow: visible; text-overflow: clip; }
.chip .i-lock, .chip .i-pin, .chip .i-bolt { flex: none; width: 12px; height: 12px; stroke: var(--accent); stroke-width: 1.2; stroke-linejoin: round; fill: none; }
.chip .i-pin circle { fill: var(--accent); stroke: none; }
.chip .i-route { fill: var(--accent); stroke: none; }
.radar-label {
position: absolute; translate: -50% -50%;
height: 22px; padding: 0 22px;
background-image: radial-gradient(closest-side, rgba(5, 7, 12, .82), rgba(5, 7, 12, 0));
font-family: var(--font-mono); font-size: 12px; line-height: 22px; letter-spacing: var(--mono-track-2); text-transform: var(--mono-case);
color: var(--accent); white-space: nowrap;
animation: fade .8s ease var(--t, 3.5s) both;
}
@media (max-width: 1023.98px) {
.chip { font-size: 12px; height: 28px; padding: 0 11px; }
}
@media (min-width: 1024px) {
.chip { gap: 8px; padding: 0 12px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: var(--mono-track-2); text-transform: var(--mono-case); color: #EEF3F8; }
.chip--chat { padding-inline: 10px 12px; }
.pin-diamond { left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 4px; }
.radar-label { height: 24px; line-height: 24px; }
}
.hero-content { position: relative; z-index: 1; container-type: inline-size; padding-bottom: 28px; }
.hero-row { display: flex; flex-direction: column; }
.hero-head { position: relative; min-width: 0; }
.hero-eyebrow { display: flex; align-items: center; gap: 6px; }
.city-chip { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; height: 32px; padding: 0 14px 0 11px; border-radius: 999px; min-width: 0; }
.city-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .7); animation: sym var(--cycle) ease-out var(--start) infinite; }
.city {
min-width: 0;
font-family: var(--font-mono); font-size: 12px; line-height: 18px;
letter-spacing: var(--mono-track-2); text-transform: var(--mono-case);
color: #E4E9F1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}
.video-toggle {
appearance: none; flex: none; margin: -6px 0; padding: 0; border: 0; background: transparent; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 999px;
}
.video-toggle-glass { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; color: #E4E9F1; transition: transform .45s var(--ease-spring); }
.video-toggle .i-pause { stroke-width: 1.6; }
.video-toggle .i-play { stroke-width: 1.6; display: none; }
.video-toggle[data-state="paused"] .i-pause { display: none; }
.video-toggle[data-state="paused"] .i-play { display: block; }
.video-toggle:active .video-toggle-glass { transform: scale(.92); }
.hero-title-wrap { --h-scale: .9; position: relative; z-index: 0; isolation: isolate; margin-top: 16px; }
.hero-radar-layer {
position: absolute; inset: 0; z-index: -1; visibility: hidden; pointer-events: none;
margin: 0; font-weight: 500; color: var(--text); text-wrap: balance;
}
.hero-radar-layer .hero-l1, .hero-radar-layer .hero-l2 { text-shadow: none; }
.hero-title { position: relative; margin: 0; font-weight: 500; color: var(--text); text-wrap: balance; }
.hero-l1 {
display: block;
font-weight: 500;
font-size: calc(var(--h-scale) * min(calc(var(--h1-km) * 100cqi), var(--h1-cap)));
line-height: var(--lh-ml1); letter-spacing: var(--tr-xl);
white-space: var(--h1-mws);
text-shadow: 0 2px 30px rgba(5, 7, 12, .45);
}
.hero-l2 {
position: relative; display: block;
font-weight: 600;
font-size: calc(var(--h-scale) * min(calc(var(--h2-km) * 100cqi), var(--h2-cap)));
line-height: var(--lh-ml2); letter-spacing: var(--tr-display);
color: var(--white); white-space: nowrap;
}
.hero-l2-text {
display: inline-block; white-space: var(--h2-mws); max-width: calc(100% - .2em); vertical-align: baseline;
padding-block: .28em; margin-block: -.28em;
background: linear-gradient(92deg, #FFFFFF 0%, #FFFFFF 55%, rgba(var(--accent-rgb), .95) 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
text-shadow: none;
}
.hero-dot { position: relative; display: inline-block; width: .13em; height: .13em; margin-inline-start: .06em; vertical-align: baseline; }
.hero-dot-ignite { position: absolute; inset: 0; animation: ignite .6s cubic-bezier(.3, 1.5, .5, 1) 1.2s both; }
.hero-dot-core {
display: block; width: 100%; height: 100%; border-radius: 50%;
background: var(--accent) radial-gradient(circle at 50% 50%, #FFFFFF 0%, #FFFFFF 22%, rgba(var(--accent-rgb), 1) 64%);
box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .12), 0 0 24px 4px rgba(var(--accent-rgb), .6), 0 0 90px 24px rgba(var(--accent-rgb), .22);
animation: beat var(--cycle) var(--ease-out) var(--start) infinite;
}
.hero-side { min-width: 0; }
.hero-sub { margin-top: 20px; font-size: 16px; line-height: 25px; letter-spacing: var(--tr-body); color: var(--body); text-wrap: pretty; max-width: 560px; }
.hero-sub em { color: var(--text); }
.hero-actions { display: flex; flex-direction: column; align-items: stretch; margin-top: 26px; }
.hero-cta { width: 100%; height: 54px; padding-inline: 16px; }
.hero-badges { --bh: 44px; justify-content: center; margin-top: 14px; gap: 14px; }
.hero-proof { display: none; }
@media (max-width: 1023.98px) and (min-height: 920px) { .hero-proof { display: block; } .hero-content { padding-bottom: 0; } }
.proof-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 24px 0 0; padding: 16px 0 20px; border-top: 1px solid var(--hair); }
.proof-list li { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: var(--proof-track); color: var(--label); overflow-wrap: break-word; }
.proof-idx { flex: none; width: 18px; font-family: var(--font-num); color: var(--accent); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
@media (max-width: 1023.98px) and (max-height: 759.98px) {
.hero-actions { margin-top: 18px; }
.hero-badges { margin-top: 10px; }
.hero-content { padding-bottom: 20px; }
}
@media (min-width: 700px) and (max-width: 1023.98px) {
.hero-actions { flex-direction: row; align-items: center; gap: 12px; }
.hero-cta { width: auto; height: 52px; padding-inline: 10px 20px; }
.hero-badges { --bh: 52px; margin-top: 0; gap: 12px; justify-content: flex-start; }
.hero-sub { font-size: 17px; line-height: 27px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) { .proof-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
.hero-content { padding-bottom: 72px; }
.hero-row { flex-direction: row; align-items: flex-end; align-items: last baseline; justify-content: space-between; gap: 40px; }
.hero-head { flex: 1 1 auto; }
.hero-side { flex: none; width: clamp(340px, 32.09cqi, 421px); }
.hero-title-wrap { margin-top: 24px; }
.hero-l1 {
font-size: calc(var(--h-scale) * min(calc(var(--h1-k) * (100cqi - clamp(340px, 32.09cqi, 421px) - 40px)), calc((max(100svh, 640px) - 376px) * var(--h1-hr))));
line-height: var(--lh-l1); white-space: var(--h1-ws);
}
.hero-l2 {
font-size: calc(var(--h-scale) * min(calc(var(--h2-k) * (100cqi - clamp(340px, 32.09cqi, 421px) - 40px)), calc((max(100svh, 640px) - 376px) * var(--h2-hr))));
line-height: var(--lh-l2);
}
.hero-l2-text { white-space: var(--h2-ws); }
.hero-dot { width: .115em; height: .115em; margin-inline-start: .04em; }
.hero-sub { margin-top: 0; max-width: none; font-size: 18px; line-height: 28px; color: #B8C0CF; text-shadow: 0 1px 16px rgba(5, 7, 12, .8); }
.hero-actions { flex-direction: row; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 32px; }
.hero-cta { width: auto; height: 52px; padding-inline: 10px 20px; }
.hero-badges { --bh: 52px; margin-top: 0; gap: 12px; }
.hero-proof { display: block; position: relative; z-index: 1; border-top: 1px solid var(--hair); background-image: linear-gradient(180deg, rgba(5, 7, 12, .30) 0%, rgba(5, 7, 12, .62) 100%); }
.proof-list { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 24px; height: 64px; margin: 0; padding: 0; border: 0; }
.proof-list li { align-items: center; gap: 12px; line-height: 16px; }
.proof-idx { width: auto; }
}
.site-footer { position: relative; z-index: 1; border-top: 1px solid var(--hair); padding: 32px 0 32px; }
.foot-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 14px; }
.foot-brand { grid-column: 1 / -1; min-width: 0; }
.foot-logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; border-radius: 12px; color: var(--text); }
.foot-logo img { width: 34px; height: 34px; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .55)) drop-shadow(0 0 16px rgba(var(--accent-rgb), .25)); }
.foot-wordmark { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; }
.foot-company { margin-top: 16px; font-size: 13px; line-height: 20px; color: var(--muted); text-wrap: pretty; }
.foot-contacts { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; margin-top: 4px; }
.foot-contacts a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; line-height: 20px; border-radius: 8px; }
.foot-mail { color: var(--text); }
.foot-site { color: var(--soft); }
.foot-badges { margin-top: 12px; }
.foot-badges .store-badge { padding-block: 2px; margin-block: -2px; }
.foot-col { min-width: 0; }
.foot-title { margin: 0 0 4px; font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-weight: 400; letter-spacing: var(--mono-track); text-transform: var(--mono-case); color: var(--label); }
.foot-title--icon { display: flex; align-items: center; gap: 8px; }
.foot-title .i-globe { stroke: var(--accent); stroke-width: 1.2; }
.foot-col ul { margin: 0; padding: 0; list-style: none; }
.foot-col a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; line-height: 18px; color: var(--soft); border-radius: 6px; overflow-wrap: anywhere; }
.foot-col .i-ext { color: var(--label); }
.lk { transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .lk:hover { color: var(--white); } }
.foot-langs { margin-top: 24px; }
.foot-langs-note { margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--label); text-wrap: pretty; }
.foot-lang-list { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 4px 0 0; padding: 0; list-style: none; }
.foot-lang { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; padding: 0 2px; border-radius: 999px; font-family: var(--lf, var(--font-sans)); font-size: 14px; line-height: 20px; color: var(--muted); transition: color .2s ease; }
.foot-lang-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: rgba(240, 246, 250, .18); }
.foot-lang.is-current { color: var(--text); }
.foot-lang.is-current .foot-lang-dot { background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), .8); }
@media (hover: hover) and (pointer: fine) { .foot-lang:hover { color: var(--white); } }
.foot-bottom { display: flex; flex-direction: column; gap: 8px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hair); font-size: 13px; line-height: 20px; color: var(--muted); }
.foot-made a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.foot-made .i-ext { color: var(--label); }
.foot-credits { margin-top: 12px; max-width: 980px; font-size: 12px; line-height: 18px; color: var(--label); text-wrap: pretty; }
@media (max-width: 399.98px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; } }
@media (min-width: 768px) {
.site-footer { padding: 64px 0 40px; }
.foot-top { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 32px 24px; }
.foot-brand { grid-column: 1 / -1; }
.foot-col--nav, .foot-col--legal { grid-column: span 2; }
.foot-col--help { grid-column: span 3; }
.foot-company { font-size: 15px; line-height: 24px; }
.foot-col a, .foot-contacts a { font-size: 15px; line-height: 24px; }
.foot-title { margin-bottom: 12px; line-height: 20px; }
.foot-langs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 24px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--hair); }
.foot-langs-head { grid-column: 1 / -1; }
.foot-lang-list { grid-column: 1 / -1; gap: 4px 20px; }
.foot-lang { font-size: 15px; }
.foot-bottom { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; margin-top: 48px; padding-top: 24px; }
.foot-credits { margin-top: 16px; }
}
@media (min-width: 1024px) {
.site-footer { padding: 88px 0 48px; }
.foot-top { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.foot-brand { grid-column: span 5; }
.foot-col--nav { grid-column: span 2; }
.foot-col--help { grid-column: span 3; }
.foot-col--legal { grid-column: span 2; }
.foot-company { margin-top: 24px; }
.foot-contacts { margin-top: 8px; }
.foot-badges { margin-top: 20px; }
.foot-langs { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 72px; align-items: start; }
.foot-langs-head { grid-column: span 4; }
.foot-langs-note { margin-top: 12px; max-width: 340px; font-size: 15px; line-height: 24px; color: var(--muted); }
.foot-lang-list { grid-column: span 8; margin-top: -10px; }
.foot-lang.is-current { padding: 0 16px 0 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .08) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(255, 255, 255, .06); text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.foot-bottom { margin-top: 56px; }
}
.legal { padding: calc(var(--nav-top) + var(--nav-h) + 56px) 0 96px; min-height: 70vh; }
.legal-inner { max-width: var(--container); }
.legal-kicker { display: block; }
.legal-title { margin-top: 16px; max-width: 900px; font-size: calc(36px * var(--fac)); line-height: 1.06; letter-spacing: var(--tr-h2); font-weight: 500; text-wrap: balance; overflow-wrap: break-word; }
.legal-meta { margin-top: 14px; font-family: var(--font-mono); font-size: 12px; line-height: 20px; letter-spacing: var(--proof-track); color: var(--label); }
.legal-note {
margin-top: 24px; max-width: 680px; padding: 14px 16px; border-radius: 16px;
background: rgba(var(--accent-rgb), .06); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .22);
font-size: var(--t-small); line-height: var(--t-small-lh); color: var(--soft); text-wrap: pretty;
}
.legal-grid { margin-top: 32px; }
.legal-toc { margin-bottom: 32px; padding: 16px 18px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); }
.legal-toc-title { margin-bottom: 8px; }
.legal-toc-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.legal-toc-link { display: flex; align-items: center; min-height: 36px; padding: 0 4px; border-radius: 8px; font-size: 14px; line-height: 20px; color: var(--soft); transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .legal-toc-link:hover { color: var(--white); } }
.legal-body { max-width: 720px; }
.legal-body p, .legal-body li, .legal-body dd { font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--body); text-wrap: pretty; overflow-wrap: break-word; }
.legal-body p + p, .legal-body ul + p, .legal-body p + ul { margin-top: 16px; }
.legal-intro, .legal-lede { color: var(--soft) !important; }
.legal-lede { font-size: 18px !important; line-height: 28px !important; }
.legal-h2 { margin-top: 40px; font-size: calc(22px * var(--fac)); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: 500; color: var(--text); text-wrap: balance; }
.legal-h2 + p, .legal-h2 + ul, .legal-h2 + dl, .legal-h2 + .help-card { margin-top: 12px; }
.legal-list { margin: 12px 0 0; padding-inline-start: 22px; }
.legal-list li + li { margin-top: 8px; }
.legal-link { color: var(--text); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .6); text-underline-offset: 3px; border-radius: 4px; }
.legal-link[href^="mailto:"] { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.legal-back { margin-top: 48px; }
.btn-ghost { height: 52px; padding: 0 22px 0 16px; gap: 10px; }
.legal--center .legal-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.legal--center .legal-title, .legal--center .legal-body { margin-inline: auto; }
.help-card { margin-top: 24px; padding: 22px 20px 24px; border-radius: 24px; }
.help-card + .help-card { margin-top: 16px; }
.help-h2 { display: flex; align-items: center; gap: 12px; font-size: calc(20px * var(--fac)); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: 500; color: var(--text); text-wrap: balance; }
.help-num { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--accent-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .5); font-family: var(--font-num); font-size: 13px; color: var(--accent); }
.help-ico { flex: none; fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.help-card > p { margin-top: 12px; }
.help-steps { margin: 14px 0 0; padding-inline-start: 22px; }
.help-steps li + li { margin-top: 8px; }
.help-steps li::marker { color: var(--accent); font-family: var(--font-num); }
.help-path { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.help-path-text { font-size: 15px !important; color: var(--text) !important; }
.help-mail { margin-top: 18px !important; }
.help-mail .btn { max-width: 100%; white-space: normal; text-align: center; height: auto; min-height: 52px; padding-block: 10px; }
.help-small { font-size: var(--t-small) !important; line-height: var(--t-small-lh) !important; color: var(--muted) !important; }
.help-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.help-grid .help-card { margin-top: 0; }
.help-faq { margin-top: 12px; }
.help-faq dt { margin-top: 20px; font-size: var(--t-body); line-height: var(--t-body-lh); font-weight: 500; color: var(--text); text-wrap: balance; }
.help-faq dd { margin-top: 6px; }
.help-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; padding: 0; list-style: none; }
.help-links li { display: flex; }
.help-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-small); }
@media (min-width: 768px) {
.legal-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.legal-toc { position: sticky; top: calc(var(--scroll-offset) + 16px); margin-bottom: 0; max-height: calc(100vh - var(--scroll-offset) - 32px); overflow: auto; }
.help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.help-card { padding: 26px 24px 28px; }
}
@media (min-width: 1024px) {
.legal { padding: calc(var(--nav-top) + var(--nav-h) + 96px) 0 160px; }
.legal-title { margin-top: 24px; font-size: calc(64px * var(--fac)); line-height: 1; }
.legal-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 64px; margin-top: 48px; }
.legal-body { max-width: 760px; }
.legal-h2 { margin-top: 48px; font-size: calc(26px * var(--fac)); }
.page-delete .legal-grid, .page-support .legal-grid { display: block; }
.page-delete .legal-body, .page-support .legal-body { margin-top: 40px; }
}
.ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ambient-field { position: absolute; left: 50%; top: 50%; border-radius: 50%; will-change: transform, opacity; }
.ambient-field--1 { width: 1100px; height: 1100px; margin: -550px 0 0 -550px; translate: -18vw 4vh; opacity: .9; background: radial-gradient(closest-side, rgba(var(--accent-rgb), .12) 0%, rgba(var(--accent-rgb), .05) 45%, rgba(var(--accent-rgb), 0) 100%); }
.ambient-field--2 { width: 1300px; height: 1300px; margin: -650px 0 0 -650px; translate: 28vw 16vh; opacity: .8; background: radial-gradient(closest-side, rgba(var(--deep-rgb), .16) 0%, rgba(var(--deep-rgb), .07) 45%, rgba(var(--deep-rgb), 0) 100%); }
.ambient-field--3 { width: 800px; height: 800px; margin: -400px 0 0 -400px; translate: -6vw -18vh; opacity: .8; background: radial-gradient(closest-side, rgba(var(--accent-rgb), .09) 0%, rgba(var(--accent-rgb), .04) 45%, rgba(var(--accent-rgb), 0) 100%); }
.page-legal .ambient-field { animation: none !important; }
.a-rise { animation: rise .9s var(--ease-out) both; }
.a-riseb { animation: riseb .9s var(--ease-out) both; }
.a-riseg { animation: rise-g .9s var(--ease-out) both; }
.a-fade { animation: fade 1.2s ease both; }
.a-d0 { animation-delay: .05s; } .a-d1 { animation-delay: .15s; } .a-d2 { animation-delay: .3s; } .a-d3 { animation-delay: .6s; }
.a-d4 { animation-delay: .75s; } .a-d5 { animation-delay: .9s; } .a-d6 { animation-delay: 1.3s; }
@keyframes nav-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes rise-g { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes chip-in { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
@keyframes riseb { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes film-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes ignite { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes beat { 0% { transform: scale(1.5); } 14% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes sym { 0% { opacity: .55; } 7% { opacity: 1; } 45% { opacity: .55; } 100% { opacity: .55; } }
@keyframes ping { 0% { opacity: 0; transform: scale(.012); } 3% { opacity: 1; } 40% { opacity: .55; } 100% { opacity: 0; transform: scale(1); } }
@keyframes av-in { 0% { opacity: 0; transform: scale(.4); filter: brightness(2.2) saturate(0); } 60% { opacity: 1; transform: scale(1.12); filter: brightness(1.4) saturate(.6); } 100% { opacity: 1; transform: scale(1); filter: none; } }
@keyframes dot-in { 0% { opacity: 0; transform: scale(.2); } 55% { opacity: 1; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes av-beat { 0% { scale: 1; } 4% { scale: 1.1; } 16% { scale: 1; } 100% { scale: 1; } }
@keyframes blip { 0% { opacity: 0; transform: scale(.9); } 5% { opacity: .85; } 50% { opacity: 0; transform: scale(1.9); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes packet { 0% { stroke-dashoffset: 3; opacity: 1; } 26% { stroke-dashoffset: -100; opacity: 1; } 27% { stroke-dashoffset: -100; opacity: 0; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes x-zoom { from { scale: 1; } to { scale: 1.16; } }
@keyframes x-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes x-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes x-head { 0% { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(.4, 0, .7, .4); } 100% { opacity: 0; translate: 0 -140px; } }
@keyframes x-col { from { translate: 0 0; } to { translate: 0 -220px; } }
@keyframes x-radar { 0% { scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .8, .5); } 100% { scale: 2.2; opacity: 0; } }
@keyframes x-proof { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 48px; } }
@keyframes u-in { 0% { opacity: 0; translate: 0 40px; filter: blur(6px); animation-timing-function: cubic-bezier(.2, .7, .2, 1); } 100% { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes u-rise { 0% { opacity: 0; translate: 0 56px; scale: .97; filter: blur(6px); animation-timing-function: cubic-bezier(.2, .7, .2, 1); } 28% { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); } 72% { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); animation-timing-function: cubic-bezier(.5, 0, .75, .4); } 100% { opacity: 0; translate: 0 -40px; scale: 1; filter: blur(0); } }
@keyframes u-grow { 0% { clip-path: inset(18% 12% round var(--radius-card)); scale: 1.12; animation-timing-function: cubic-bezier(.3, .1, .2, 1); } 100% { clip-path: inset(0 0 round var(--radius-card)); scale: 1; } }
@keyframes u-draw { 0% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.3, .1, .2, 1); } 100% { stroke-dashoffset: 0; } }
@keyframes u-lit { from { color: #3A4150; } to { color: var(--text); } }
@keyframes u-bg1 { 0% { translate: -22vw -12vh; scale: .8; opacity: 0; } 6% { translate: -18vw 4vh; scale: 1; opacity: .9; } 18% { translate: 18vw 8vh; scale: 1.2; opacity: .7; } 30% { translate: 26vw 0vh; scale: 1; opacity: 1; } 48% { translate: 20vw -10vh; scale: 1.1; opacity: .75; } 66% { translate: -24vw 14vh; scale: 1.3; opacity: .45; } 82% { translate: -28vw 0vh; scale: 1; opacity: .85; } 92% { translate: 6vw 18vh; scale: 1.15; opacity: .5; } 100% { translate: 0vw 4vh; scale: 1.4; opacity: .95; } }
@keyframes u-bg2 { 0% { translate: 24vw 20vh; scale: .9; opacity: 0; } 8% { translate: 28vw 16vh; scale: 1; opacity: .8; } 20% { translate: -20vw -6vh; scale: 1.2; opacity: 1; } 36% { translate: -26vw 18vh; scale: 1; opacity: .6; } 56% { translate: -12vw -14vh; scale: 1.25; opacity: .9; } 70% { translate: 18vw 8vh; scale: 1.1; opacity: .7; } 86% { translate: 24vw -12vh; scale: .95; opacity: 1; } 100% { translate: -6vw -20vh; scale: 1.2; opacity: .6; } }
@keyframes u-bg3 { 0% { translate: 0vw 30vh; scale: .6; opacity: 0; } 14% { translate: -6vw -18vh; scale: .9; opacity: .8; } 28% { translate: 10vw 24vh; scale: .8; opacity: .4; } 44% { translate: 30vw 20vh; scale: 1; opacity: .85; } 62% { translate: 0vw -22vh; scale: 1.2; opacity: .5; } 78% { translate: -18vw 22vh; scale: .9; opacity: .8; } 100% { translate: 0vw -12vh; scale: 1; opacity: .7; } }
@supports (animation-timeline: view()) {
.hero { view-timeline-name: --hero; view-timeline-axis: block; }
.x-zoom, .x-dim, .x-head, .x-col, .x-fade, .x-radar, .x-radar-fade, .x-proof { animation-timing-function: linear; animation-fill-mode: both; animation-duration: auto; animation-timeline: --hero; }
.x-zoom { animation-name: x-zoom; animation-range: exit 0% exit 100%; }
.x-dim { animation-name: x-in; animation-range: exit 0% exit 75%; }
.x-head { animation-name: x-head; animation-range: exit 0% exit 55%; }
.x-col { animation-name: x-col; animation-range: exit 0% exit 100%; }
.x-fade { animation-name: x-out; animation-range: exit 0% exit 40%; }
.x-radar { animation-name: x-radar; animation-range: exit 0% exit 70%; }
.x-radar-fade { animation-name: x-out; animation-range: exit 0% exit 40%; }
.x-proof { animation-name: x-proof; animation-range: exit 0% exit 28%; }
.u-in, .u-rise, .u-grow, .u-draw, .u-lit { animation-timing-function: linear; animation-fill-mode: both; animation-duration: auto; animation-timeline: view(); }
.u-in { animation-name: u-in; animation-range: entry calc(var(--u-i, 0) * 6%) cover calc(30% + var(--u-i, 0) * 6%); }
.u-rise { animation-name: u-rise; animation-range: cover 0% cover 100%; }
.u-grow { animation-name: u-grow; animation-range: entry 0% cover 50%; }
.u-draw { animation-name: u-draw; animation-range: entry 10% cover 55%; }
.u-lit { animation-name: u-lit; animation-range: cover 20% cover 50%; }
.u-range { animation-range: var(--u-range) !important; }
.ambient-field { animation-timing-function: linear; animation-fill-mode: both; animation-duration: auto; animation-timeline: scroll(root block); }
.ambient-field--1 { animation-name: u-bg1; }
.ambient-field--2 { animation-name: u-bg2; }
.ambient-field--3 { animation-name: u-bg3; }
}
@media (prefers-reduced-motion: no-preference) {
.chip .i-lock { animation: ic-lock 3.2s ease-in-out infinite; }
.chip .i-bolt { animation: ic-pop 2.4s ease-in-out infinite; }
.chip .i-pin { animation: ic-pin 2.6s ease-out infinite; }
.lang-btn .i-globe { animation: ic-glow 4.2s ease-in-out infinite; }
.help-ico { animation: ic-float 3s ease-in-out infinite; }
.hero-cta .i-down { animation: ic-pin 2.2s ease-out infinite; }
html.no-sda .u-in:not(.is-in), html.no-sda .u-rise:not(.is-in) { opacity: 0; transform: translate3d(0, 32px, 0); }
html.no-sda .u-grow:not(.is-in) { clip-path: inset(10% 8% round var(--radius-card)); transform: scale(1.06); }
html.no-sda .u-draw:not(.is-in) { stroke-dashoffset: 1; }
html.no-sda .u-lit:not(.is-in) { color: #3A4150; }
html.no-sda .u-in, html.no-sda .u-rise, html.no-sda .u-grow, html.no-sda .u-draw, html.no-sda .u-lit {
transition: opacity .9s ease, transform 1s var(--ease-out), clip-path 1.2s var(--ease-out), stroke-dashoffset 1.4s var(--ease-out), color .8s ease;
transition-delay: calc(var(--u-i, 0) * 90ms);
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
html { scroll-behavior: auto; }
}
.man { position: relative; padding-block: var(--section-space); overflow-x: clip; }
.man-stage { position: relative; isolation: isolate; }
.man-body { position: relative; }
.man-orb {
position: absolute; left: 50%; top: 50%; z-index: -1;
width: 520px; height: 520px; margin: -260px 0 0 -260px;
border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, rgba(var(--accent-rgb), .15) 0%, rgba(var(--deep-rgb), .09) 46%, rgba(var(--accent-rgb), 0) 100%);
opacity: .6;
}
.man-label { display: flex; align-items: center; gap: 10px; margin: 0; }
.man-dot { display: block; flex: none; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--accent); }
.man-text {
margin-top: 24px; max-width: 1120px;
font-size: calc(var(--t-man) * var(--fac)); line-height: var(--lh-man); letter-spacing: var(--tr-man);
font-weight: 500; color: var(--text); text-wrap: pretty; overflow-wrap: break-word;
}
.man-sign { display: flex; align-items: flex-start; gap: 12px; margin-top: 28px; }
.man-sign > span:last-child { min-width: 0; text-wrap: balance; }
.man-rule { display: block; flex: none; width: 28px; height: 1px; margin-top: 9.5px; background: rgba(240, 246, 250, .22); }
@media (min-width: 1024px) {
.man-orb { width: 1200px; height: 1200px; margin: -600px 0 0 -600px; }
.man-label { gap: 12px; }
.man-dot { border: 0; background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .7); }
.man-text { margin-top: 40px; }
.man-sign { gap: 14px; margin-top: 48px; }
}
.man-w { color: inherit; }
@media (prefers-reduced-motion: no-preference) {
html.no-sda .man-text.is-split .man-w { transition: color .7s ease; transition-delay: calc(var(--i, 0) * 38ms); }
html.no-sda .man-text.is-split:not(.is-lit) .man-w { color: #3A4150; }
}
@keyframes man-orb { 0% { opacity: 0; scale: .3; } 35% { opacity: .75; } 70% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.35; } }
@keyframes man-out { 0% { opacity: 1; translate: 0 0; filter: blur(0); animation-timing-function: cubic-bezier(.5, 0, .75, .4); } 100% { opacity: 0; translate: 0 -80px; filter: blur(6px); } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.js .man { height: 240svh; padding: 0; view-timeline-name: --man; view-timeline-axis: block; }
.js .man-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 62px 0 24px; will-change: transform; }
.js .man-orb { top: 56%; }
.js .man-text { font-size: min(calc(var(--t-man) * var(--fac)), 4.6svh); }
.js .man-orb, .js .man-in, .js .man-out, .js .man-sign, .js .man-w { animation-timing-function: linear; animation-fill-mode: both; animation-duration: auto; animation-timeline: --man; }
.js .man-orb { animation-name: man-orb; animation-range: cover 0% cover 100%; }
.js .man-in { animation-name: u-in; animation-range: entry 30% entry 100%; }
.js .man-out { animation-name: man-out; animation-range: exit 0% exit 45%; }
.js .man-sign { animation-name: u-in; animation-range: contain 80% contain 96%; }
.js .man-w { animation-name: u-lit; animation-range: contain var(--m0, 0%) contain var(--m1, 10%); }
@media (min-width: 1024px) {
.js .man { height: 260svh; }
.js .man-stage { height: 100svh; padding: 96px 0 64px; }
.js .man-orb { top: 50%; }
.js .man-text { font-size: min(calc(var(--t-man) * var(--fac)), 6.4svh); }
.js .man-sign { animation-range: contain 72% contain 90%; }
.js .man-w { animation-range: contain var(--r0, 0%) contain var(--r1, 10%); }
}
}
}
.sx-label { display: flex; align-items: center; gap: 10px; }
.sx-label::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--accent); }
.sx-title { margin-top: 16px; max-width: 1060px; hyphens: manual; }
.sx-lede { margin-top: 14px; hyphens: manual; }
.sx-body { margin-top: 20px; }
.sx-car {
display: flex; gap: 12px;
margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 12px;
list-style: none;
overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
scrollbar-width: none;
}
.sx-car::-webkit-scrollbar { display: none; }
.sx-car > li { flex: none; min-width: 0; scroll-snap-align: start; }
.sx-car.fv:focus-visible { outline-offset: -2px; border-radius: 12px; }
.sx-card {
position: relative; display: flex; flex-direction: column;
border-radius: 24px; background-color: var(--surface);
box-shadow: inset 0 0 0 1px var(--hair), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.sx-bar { position: relative; height: 2px; margin-top: 4px; border-radius: 1px; overflow: hidden; background-color: var(--hair); }
.sx-bar-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--accent-rgb), .5) 0%, var(--accent) 100%); transform-origin: 0 50%; transform: scaleX(.3); }
[dir="rtl"] .sx-bar-fill { transform-origin: 100% 50%; background: linear-gradient(270deg, rgba(var(--accent-rgb), .5) 0%, var(--accent) 100%); }
[data-sx-loop].is-paused, [data-sx-loop].is-paused * { animation-play-state: paused !important; }
.sx-icon { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sx-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (min-width: 768px) and (max-width: 1023.98px) {
.sx-title { margin-top: 20px; }
.sx-lede { margin-top: 20px; }
.sx-body { margin-top: 28px; }
.sx-car { gap: 16px; }
}
@media (min-width: 1024px) {
.sx-label { gap: 12px; }
.sx-label::before { background-color: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .7); }
.sx-title { margin-top: 24px; }
.sx-lede { margin-top: 32px; }
.sx-car { display: grid; gap: 0; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
.sx-car > li { scroll-snap-align: none; }
.sx-card { border-radius: 0; background: none; box-shadow: none; }
.sx-bar { display: none; }
.sx-icon { stroke-width: 1.5; }
}
.ft-icon--vip { stroke: #ffd166; }
@media (prefers-reduced-motion: no-preference) {
.ft-icon--pin, .ft-icon--route, .hw-icon--route { animation: ic-pin 1.8s ease-out infinite; }
.ft-icon--bolt, .hw-icon--bolt, .ft-icon--compass, .pv-icon--badge, .hw-icon--chat { animation: ic-pop 2.2s ease-in-out infinite; }
.pv-icon--lock { animation: ic-lock 2.4s ease-in-out infinite; }
.ft-icon--cam .ft-cam-lens { transform-origin: 12px 12px; transform-box: view-box; animation: ic-blink 2.6s ease-in-out infinite; }
.ft-icon--sos .ft-sos-ring { transform-origin: 12px 12px; transform-box: view-box; animation: ic-sos 1.8s ease-out infinite; }
.hw-icon--radar .hw-sweep, .pv-icon--radar .pv-sweep {
transform-origin: 12px 12px; transform-box: view-box; animation: ic-sweep 3.2s linear infinite;
}
.pv-icon--toggle .pv-knob { animation: ic-knob 2.8s ease-in-out infinite; }
}
@keyframes ic-blink { 0%, 70%, 100% { opacity: 1; } 78% { opacity: 0; } 86% { opacity: 1; } }
@keyframes ic-pin { 0%, 62%, 100% { translate: 0 0; } 14% { translate: 0 -7px; } 30% { translate: 0 0; } }
@keyframes ic-sos { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .15; scale: 1.2; } }
@keyframes ic-sweep { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes ic-pop { 0%, 70%, 100% { scale: 1; } 16% { scale: 1.16; } }
@keyframes ic-lock { 0%, 74%, 100% { translate: 0 0; rotate: 0deg; } 10% { translate: 0 -3px; rotate: -8deg; } 20% { translate: 0 0; rotate: 6deg; } 30% { rotate: 0deg; } }
@keyframes ic-knob { 0%, 100% { translate: 0 0; } 46% { translate: -6px 0; } }
@keyframes sx-out { 0% { opacity: 1; translate: 0 0; filter: blur(0); animation-timing-function: cubic-bezier(.5, 0, .75, .4); } 100% { opacity: 0; translate: 0 -80px; filter: blur(6px); } }
@keyframes sx-pop { 0% { opacity: 0; scale: .6; animation-timing-function: cubic-bezier(.2, .9, .3, 1.25); } 100% { opacity: 1; scale: 1; } }
@keyframes sx-grow-x { 0% { scale: 0 1; animation-timing-function: cubic-bezier(.3, .1, .2, 1); } 100% { scale: 1 1; } }
@keyframes sx-grow-y { 0% { scale: 1 0; animation-timing-function: cubic-bezier(.3, .1, .2, 1); } 100% { scale: 1 1; } }
@keyframes sx-idx { 0% { opacity: .2; scale: .7; animation-timing-function: cubic-bezier(.2, .9, .3, 1.2); } 100% { opacity: 1; scale: 1; } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) and (max-width: 1023.98px) {
.sx-body { animation: u-rise linear both; animation-duration: auto; animation-timeline: view(); animation-range: cover 0% cover 100%; }
}
}
.section.hw { padding-block: 96px 0; }
.hw-item { width: min(276px, calc(100vw - 2 * var(--gutter) - 24px)); padding: 22px 22px 24px; }
.hw-mark { display: flex; align-items: center; gap: 10px; }
.hw-idx { flex: none; line-height: 18px; transform-origin: 0 50%; }
[dir="rtl"] .hw-idx { transform-origin: 100% 50%; }
.hw-rule { display: block; flex: 1 1 auto; height: 1px; background-image: linear-gradient(90deg, rgba(var(--accent-rgb), .5) 0%, rgba(var(--accent-rgb), 0) 100%); }
[dir="rtl"] .hw-rule { background-image: linear-gradient(270deg, rgba(var(--accent-rgb), .5) 0%, rgba(var(--accent-rgb), 0) 100%); }
.hw-icon { margin-top: 18px; }
.hw-title { margin-top: 14px; font-size: calc(22px * var(--fac)); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: 500; color: var(--text); text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
.hw-text { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--body); text-wrap: pretty; }
html[data-script="ar"] .hw-text, html[data-script="hi"] .hw-text, html[data-script="cjk"] .hw-text { line-height: var(--lh-body); }
@media (min-width: 768px) and (max-width: 1023.98px) {
.hw-item { width: 300px; padding: 26px 26px 28px; }
.hw-title { font-size: calc(24px * var(--fac)); }
.hw-text { font-size: 16px; line-height: 25px; }
}
@media (min-width: 1024px) {
.section.hw { padding-block: 192px 0; }
.hw-body { margin-top: 72px; }
.hw-list.sx-car { display: block; border-bottom: 1px solid var(--hair); }
.hw-item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; width: auto; padding: 40px 0; border-top: 1px solid var(--hair); }
.hw-mark { grid-column: span 1; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 6px; }
.hw-idx { font-size: 13px; line-height: 20px; }
.hw-rule { flex: none; width: 40px; background-image: none; background-color: var(--accent); opacity: .7; transform-origin: 0 50%; }
[dir="rtl"] .hw-rule { background-image: none; transform-origin: 100% 50%; }
.hw-icon { grid-column: span 1; margin-top: 8px; width: 28px; height: 28px; }
.hw-title { grid-column: span 5; margin-top: 0; font-size: calc(36px * var(--fac)); line-height: var(--lh-pr); letter-spacing: var(--tr-pr); }
.hw-text { grid-column: span 5; margin-top: 6px; max-width: 520px; font-size: 18px; line-height: 28px; }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
.hw-item, .hw-idx, .hw-rule, .hw-icon .sx-draw { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); }
.hw-item { animation-name: u-rise; animation-range: cover 0% cover 100%; }
.hw-idx { animation-name: sx-idx; animation-range: entry 30% cover 40%; }
.hw-rule { animation-name: sx-grow-x; animation-range: entry 40% cover 46%; }
.hw-icon .sx-draw { animation-name: u-draw; animation-range: entry 40% cover 50%; }
}
}
.section.ft { padding-block: 96px 0; --ft-bg: #080C14; }
.ft-wrap { position: relative; }
.ft-frame, .ft-line { display: none; }
.ft-cell { display: flex; flex-direction: column; width: 220px; padding: 18px 18px 20px; border-radius: 20px; background-color: var(--ft-bg); box-shadow: inset 0 0 0 1px var(--hair); }
.ft-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 24px; }
.ft-top .t-index { line-height: 18px; }
.ft-icon { width: 22px; height: 22px; }
.ft-icon--sos { stroke: var(--sos); }
.ft-title { margin-top: 14px; font-size: 17px; line-height: max(1.32, var(--lh-h3)); font-weight: 500; letter-spacing: var(--tr-ui); color: var(--text); overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }
.ft-text { margin-top: 6px; font-size: 14px; line-height: 21px; color: var(--body); text-wrap: pretty; overflow-wrap: break-word; }
html[data-script="ar"] .ft-text, html[data-script="hi"] .ft-text, html[data-script="cjk"] .ft-text { line-height: var(--lh-small); }
.ft-e2e { position: relative; display: block; flex: none; width: 92px; height: 20px; }
[dir="rtl"] .ft-e2e { transform: scaleX(-1); }
.ft-e2e-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ft-node, .ft-lock { fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ft-flow {
position: absolute; left: 9.1%; right: 9.1%; top: 50%; height: 3px; margin-top: -1.5px; overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38.5%, transparent 38.5%, transparent 61.5%, #000 61.5%, #000 100%);
mask-image: linear-gradient(90deg, #000 0%, #000 38.5%, transparent 38.5%, transparent 61.5%, #000 61.5%, #000 100%);
}
.ft-flow-dots {
position: absolute; top: 0; bottom: 0; left: -7px; right: 0;
background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), .8) 0, rgba(var(--accent-rgb), .8) .75px, rgba(var(--accent-rgb), 0) 1.25px) 0 50% / 7px 3px repeat-x;
animation: ft-flow 1.4s linear infinite;
}
@keyframes ft-flow { from { translate: 0 0; } to { translate: 7px 0; } }
@media (min-width: 768px) and (max-width: 1023.98px) {
.ft-cell { width: 248px; padding: 22px 22px 24px; }
.ft-title { margin-top: 18px; font-size: 18px; }
.ft-text { margin-top: 8px; font-size: 15px; line-height: 23px; }
}
@media (min-width: 1024px) {
.section.ft { padding-block: 192px 0; --ft-bg: var(--bg); }
.ft-body { margin-top: 72px; }
.ft-frame { display: block; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(240, 246, 250, .12); border-radius: var(--radius-card); }
.ft-line { display: block; position: absolute; background-color: var(--hair); pointer-events: none; }
.ft-line--v { top: 0; bottom: 0; width: 1px; transform-origin: 50% 0; }
.ft-line--v1 { inset-inline-start: 33.3333%; }
.ft-line--v2 { inset-inline-start: 66.6667%; }
.ft-line--h { inset-inline: 0; top: 50%; height: 1px; transform-origin: 0 50%; }
[dir="rtl"] .ft-line--h { transform-origin: 100% 50%; }
.ft-grid { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.ft-cell { width: auto; min-height: 260px; padding: 32px; border-radius: 0; background: none; box-shadow: none; }
.ft-cell--e2e { background-image: radial-gradient(300px 200px at 80% 0%, rgba(var(--accent-rgb), .07) 0%, rgba(var(--accent-rgb), 0) 70%); }
[dir="rtl"] .ft-cell--e2e { background-image: radial-gradient(300px 200px at 20% 0%, rgba(var(--accent-rgb), .07) 0%, rgba(var(--accent-rgb), 0) 70%); }
.ft-cell--vip { background-image: radial-gradient(300px 200px at 80% 0%, rgba(255, 209, 102, .09) 0%, rgba(255, 209, 102, 0) 70%); }
[dir="rtl"] .ft-cell--vip { background-image: radial-gradient(300px 200px at 20% 0%, rgba(255, 209, 102, .09) 0%, rgba(255, 209, 102, 0) 70%); }
.ft-top { height: 28px; }
.ft-top .t-index { line-height: 28px; }
.ft-icon { width: 26px; height: 26px; }
.ft-e2e { width: 132px; height: 28px; }
.ft-node, .ft-lock { stroke-width: 1.25; }
.ft-title { margin-top: auto; padding-top: 40px; font-size: 22px; line-height: 28px; }
.ft-text { margin-top: 8px; font-size: 15px; line-height: 24px; }
html[data-script="ar"] .ft-title, html[data-script="hi"] .ft-title, html[data-script="cjk"] .ft-title { line-height: var(--lh-h3); }
}
@keyframes ft-frame { 0% { clip-path: inset(0 0 100% 0 round var(--radius-card)); animation-timing-function: cubic-bezier(.3, .1, .2, 1); } 100% { clip-path: inset(0 0 0 0 round var(--radius-card)); } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
.ft-wrap, .ft-frame, .ft-line, .ft-cell { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); }
.ft-wrap { animation-name: sx-out; animation-range: exit 40% exit 100%; }
.ft-frame { animation-name: ft-frame; animation-range: entry 0% cover 36%; }
.ft-line--v { animation-name: sx-grow-y; }
.ft-line--v1 { animation-range: entry 10% cover 38%; }
.ft-line--v2 { animation-range: entry 25% cover 41%; }
.ft-line--h { animation-name: sx-grow-x; animation-range: entry 30% cover 44%; }
.ft-cell { animation-name: u-in; }
.ft-cell:nth-child(1) { animation-range: entry 20% cover 30%; }
.ft-cell:nth-child(2) { animation-range: entry 38% cover 34%; }
.ft-cell:nth-child(3) { animation-range: entry 56% cover 38%; }
.ft-cell:nth-child(4) { animation-range: entry 20% cover 35%; }
.ft-cell:nth-child(5) { animation-range: entry 38% cover 39%; }
.ft-cell:nth-child(6) { animation-range: entry 56% cover 43%; }
}
}
.section.bz { padding-block: 96px 0; }
.bz-item { width: min(290px, calc(100vw - 2 * var(--gutter) - 24px)); padding: 22px 22px 24px; background-image: radial-gradient(120% 70% at 100% 0%, rgba(var(--accent-rgb), .08) 0%, rgba(var(--accent-rgb), 0) 60%); }
[dir="rtl"] .bz-item { background-image: radial-gradient(120% 70% at 0% 0%, rgba(var(--accent-rgb), .08) 0%, rgba(var(--accent-rgb), 0) 60%); }
.bz-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 24px; }
.bz-title { margin-top: 18px; font-size: calc(22px * var(--fac)); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: 500; color: var(--text); text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
.bz-text { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--body); text-wrap: pretty; overflow-wrap: break-word; }
.bz-points { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid rgba(240, 246, 250, .08); }
.bz-points > li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; line-height: 21px; color: var(--muted); }
.bz-points > li::before { content: ""; flex: none; width: 10px; height: 1px; background-color: var(--accent); transform: translateY(-4px); }
html[data-script="ar"] :is(.bz-text, .bz-points > li), html[data-script="hi"] :is(.bz-text, .bz-points > li), html[data-script="cjk"] :is(.bz-text, .bz-points > li) { line-height: var(--lh-body); }
.bz-note { margin-top: 20px; max-width: 720px; color: var(--muted); }
.bz-item--premium .bz-idx { color: var(--gold); }
.bz-item--premium .sx-icon { stroke: var(--gold); }
.bz-item--premium .bz-points > li::before { background-color: var(--gold); }
@media (min-width: 768px) and (max-width: 1023.98px) {
.bz-item { width: 320px; padding: 26px 26px 28px; }
.bz-title { font-size: calc(24px * var(--fac)); }
.bz-text { font-size: 16px; line-height: 25px; }
}
@media (min-width: 1024px) {
.section.bz { padding-block: 192px 0; }
.bz-body { margin-top: 80px; }
.bz-list { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: var(--gap); }
.bz-item { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; width: auto; padding: 32px 0 0; padding-inline-end: 24px; border-top: 1px solid rgba(240, 246, 250, .14); background-image: none; }
[dir="rtl"] .bz-item { background-image: none; }
.bz-item--premium { border-top-color: rgba(255, 209, 102, .45); }
.bz-title { margin-top: 40px; font-size: calc(32px * var(--fac)); hyphens: manual; }
.bz-text { margin-top: 16px; font-size: 18px; line-height: 28px; }
.bz-points { margin-top: 32px; padding-top: 0; border-top: 0; gap: 12px; }
.bz-points > li { gap: 12px; font-size: 15px; line-height: 24px; color: var(--soft); }
.bz-points > li::before { width: 12px; }
.bz-note { margin-top: 48px; }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
.bz-list, .bz-item, .sx-draw.bz-d1, .sx-draw.bz-d2 { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); }
.bz-list { animation-name: sx-out; animation-range: exit 35% exit 100%; }
.bz-item { animation-name: u-in; }
.bz-item:nth-child(1) { animation-range: entry 0% cover 32%; }
.bz-item:nth-child(2) { animation-range: entry 20% cover 38%; }
.bz-item:nth-child(3) { animation-range: entry 40% cover 44%; }
.sx-draw.bz-d1, .sx-draw.bz-d2 { animation-name: u-draw; }
.bz-item:nth-child(1) .bz-d1 { animation-range: entry 40% cover 42%; }
.bz-item:nth-child(1) .bz-d2 { animation-range: cover 30% cover 44%; }
.bz-item:nth-child(2) .bz-d1 { animation-range: entry 50% cover 46%; }
.bz-item:nth-child(2) .bz-d2 { animation-range: cover 36% cover 48%; }
.bz-item:nth-child(3) .bz-d1 { animation-range: entry 60% cover 46%; }
.bz-item:nth-child(3) .bz-d2 { animation-range: cover 34% cover 48%; }
}
}
.section.pl { position: relative; padding-block: 96px 0; overflow-x: clip; }
.pl-glow { position: absolute; left: 50%; top: 40%; width: min(1200px, 160vw); height: 520px; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgba(var(--accent-rgb), .10) 0%, rgba(var(--deep-rgb), .06) 50%, rgba(var(--accent-rgb), 0) 100%); }
.pl-body { position: relative; }
.pl-card { position: relative; display: flex; flex-direction: column; width: min(268px, calc(100vw - 2 * var(--gutter) - 24px)); padding: 22px 22px 24px; border-radius: 24px; }
.pl-name { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.pl-radius { display: flex; align-items: baseline; gap: 4px; margin-top: 18px; font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: var(--tr-num); }
.pl-radius-num { font-size: 44px; line-height: 44px; font-weight: 400; }
.pl-radius-unit { font-size: 16px; line-height: 20px; color: var(--accent); }
.pl-radius-label { margin-top: 4px; }
.pl-ring { position: absolute; inset-inline-end: 18px; top: 18px; width: 64px; height: 64px; }
.pl-ring-bg { fill: none; stroke: rgba(240, 246, 250, .10); stroke-width: 2; }
.pl-ring-fg { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: var(--p, 1) 1; transform: rotate(-90deg); transform-origin: 50% 50%; filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .7)); }
.pl-ring-dot { fill: var(--accent); }
.pl-points { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--hair); }
.pl-points > li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 21px; }
.pl-k { color: var(--muted); min-width: 0; }
.pl-v { flex: none; font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.pl-v small { font-family: var(--font-sans); font-size: 12px; color: var(--label); }
.pl-v--yes { color: var(--accent); font-family: var(--font-sans); }
.pl-card--black { box-shadow: inset 0 0 0 1px rgba(240, 246, 250, .14), inset 0 18px 30px -24px rgba(255, 255, 255, .28), 0 28px 60px -20px rgba(0, 0, 0, .75); }
.pl-card--diamond .pl-ring-fg, .pl-card--diamond .pl-radius-unit { color: #BFE9FF; stroke: #BFE9FF; }
.pl-card--diamond { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .35), inset 0 18px 30px -24px rgba(255, 255, 255, .28), 0 28px 60px -20px rgba(0, 0, 0, .75), 0 18px 50px -20px rgba(var(--accent-rgb), .45); }
.pl-note { margin-top: 20px; max-width: 720px; color: var(--muted); }
html[data-script="ar"] .pl-points > li, html[data-script="hi"] .pl-points > li, html[data-script="cjk"] .pl-points > li { line-height: var(--lh-body); }
@media (min-width: 768px) and (max-width: 1023.98px) {
.pl-card { width: 290px; padding: 26px 26px 28px; }
}
@media (min-width: 1024px) {
.section.pl { padding-block: 192px 0; }
.pl-body { margin-top: 72px; }
.pl-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.pl-card { width: auto; padding: 28px 28px 30px; border-radius: 28px; }
.pl-radius-num { font-size: 56px; line-height: 56px; }
.pl-ring { width: 72px; height: 72px; inset-inline-end: 22px; top: 22px; }
.pl-note { margin-top: 40px; }
}
@keyframes pl-ring { from { stroke-dasharray: 0 1; } to { stroke-dasharray: var(--p, 1) 1; } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
.pl-card, .pl-ring-fg { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); }
.pl-card { animation-name: u-in; }
.pl-card:nth-child(1) { animation-range: entry 0% cover 30%; }
.pl-card:nth-child(2) { animation-range: entry 15% cover 34%; }
.pl-card:nth-child(3) { animation-range: entry 30% cover 38%; }
.pl-card:nth-child(4) { animation-range: entry 45% cover 42%; }
.pl-ring-fg { animation-name: pl-ring; animation-range: entry 30% cover 55%; }
}
}
.section.pv { padding-block: 96px 0; }
.pv-item { width: min(276px, calc(100vw - 2 * var(--gutter) - 24px)); padding: 22px 22px 24px; }
.pv-mark { display: flex; align-items: center; gap: 10px; }
.pv-idx { flex: none; line-height: 18px; transform-origin: 0 50%; }
[dir="rtl"] .pv-idx { transform-origin: 100% 50%; }
.pv-rule { display: block; flex: 1 1 auto; height: 1px; background-image: linear-gradient(90deg, rgba(var(--accent-rgb), .5) 0%, rgba(var(--accent-rgb), 0) 100%); }
[dir="rtl"] .pv-rule { background-image: linear-gradient(270deg, rgba(var(--accent-rgb), .5) 0%, rgba(var(--accent-rgb), 0) 100%); }
.pv-icon { margin-top: 18px; }
.pv-title { margin-top: 16px; font-size: calc(22px * var(--fac)); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: 500; color: var(--text); text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
.pv-text { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--body); text-wrap: pretty; }
html[data-script="ar"] .pv-text, html[data-script="hi"] .pv-text, html[data-script="cjk"] .pv-text { line-height: var(--lh-body); }
.pv-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.pv-links .btn { padding-inline: 20px 16px; }
.pv-links .i-next { stroke-width: 1.6; }
@media (min-width: 768px) and (max-width: 1023.98px) {
.pv-item { width: 300px; padding: 26px 26px 28px; }
.pv-title { font-size: calc(24px * var(--fac)); }
.pv-text { font-size: 16px; line-height: 25px; }
}
@media (min-width: 1024px) {
.section.pv { padding-block: 192px 0; }
.pv-body { margin-top: 72px; }
.pv-list.sx-car { display: block; border-bottom: 1px solid var(--hair); }
.pv-item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; width: auto; padding: 40px 0; border-top: 1px solid var(--hair); }
.pv-mark { grid-column: span 1; flex-direction: column; align-items: flex-start; gap: 14px; }
.pv-idx { font-size: 13px; line-height: 20px; }
.pv-rule { flex: none; width: 40px; background-image: none; background-color: var(--accent); opacity: .7; transform-origin: 0 50%; }
[dir="rtl"] .pv-rule { background-image: none; transform-origin: 100% 50%; }
.pv-icon { grid-column: span 1; margin-top: 8px; width: 28px; height: 28px; }
.pv-title { grid-column: span 5; margin-top: 0; font-size: calc(36px * var(--fac)); line-height: var(--lh-pr); letter-spacing: var(--tr-pr); }
.pv-text { grid-column: span 5; margin-top: 0; max-width: 520px; font-size: 18px; line-height: 28px; }
.pv-links { margin-top: 48px; gap: 16px; }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
.pv-item, .pv-idx, .pv-rule { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); }
.pv-item { animation-name: u-rise; animation-range: cover 0% cover 100%; }
.pv-idx { animation-name: sx-idx; animation-range: entry 30% cover 40%; }
.pv-rule { animation-name: sx-grow-x; animation-range: entry 40% cover 46%; }
}
}
.section.fq { padding-block: 96px 0; }
.fq-list { display: grid; gap: 12px; margin: 0; }
.fq-item {
padding: 22px 22px 24px; border-radius: 24px;
background-color: var(--surface);
box-shadow: inset 0 0 0 1px var(--hair), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.fq-q { font-size: calc(18px * var(--fac)); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: 500; color: var(--text); text-wrap: balance; }
.fq-a { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--body); text-wrap: pretty; }
html[data-script="ar"] .fq-a, html[data-script="hi"] .fq-a, html[data-script="cjk"] .fq-a { line-height: var(--lh-body); }
@media (min-width: 768px) and (max-width: 1023.98px) {
.fq-item { padding: 26px 26px 28px; }
.fq-q { font-size: calc(20px * var(--fac)); }
.fq-a { font-size: 16px; line-height: 25px; }
}
@media (min-width: 1024px) {
.section.fq { padding-block: 192px 0; }
.fq-body { margin-top: 72px; }
.fq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid rgba(240, 246, 250, .12); border-radius: var(--radius-card); overflow: hidden; }
.fq-item { padding: 32px; border-radius: 0; background: none; box-shadow: inset -1px -1px 0 var(--hair); }
.fq-item:nth-child(2n) { box-shadow: inset 0 -1px 0 var(--hair); }
.fq-item:nth-last-child(-n+2) { box-shadow: none; }
.fq-item:nth-last-child(2) { box-shadow: inset -1px 0 0 var(--hair); }
[dir="rtl"] .fq-item { box-shadow: inset 1px -1px 0 var(--hair); }
[dir="rtl"] .fq-item:nth-child(2n) { box-shadow: inset 0 -1px 0 var(--hair); }
[dir="rtl"] .fq-item:nth-last-child(-n+2) { box-shadow: none; }
[dir="rtl"] .fq-item:nth-last-child(2) { box-shadow: inset 1px 0 0 var(--hair); }
.fq-q { font-size: calc(22px * var(--fac)); }
.fq-a { margin-top: 10px; font-size: 16px; line-height: 26px; }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
.fq-item { animation: u-in linear both; animation-duration: auto; animation-timeline: view(); }
.fq-item:nth-child(1) { animation-range: entry 0% cover 28%; }
.fq-item:nth-child(2) { animation-range: entry 12% cover 32%; }
.fq-item:nth-child(3) { animation-range: entry 8% cover 34%; }
.fq-item:nth-child(4) { animation-range: entry 20% cover 38%; }
.fq-item:nth-child(5) { animation-range: entry 16% cover 40%; }
.fq-item:nth-child(6) { animation-range: entry 28% cover 44%; }
}
}
.dl { position: relative; overflow-x: clip; padding-block: 128px 96px; }
.dl-glow { position: absolute; left: 50%; top: 24px; width: min(1200px, 160vw); height: 480px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(closest-side, rgba(var(--accent-rgb), .13) 0%, rgba(var(--deep-rgb), .07) 50%, rgba(var(--accent-rgb), 0) 100%); }
.dl-ringbox { position: absolute; left: 50%; top: 128px; width: 0; height: 0; pointer-events: none; }
.dl-ring { position: absolute; left: 50%; top: 36px; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), .35); translate: -50% -50%; opacity: 0; animation: dl-ring var(--cycle) linear var(--start) infinite; }
.dl-ring--1 { width: 160px; height: 160px; }
.dl-ring--2 { width: 160px; height: 160px; animation-delay: calc(var(--start) + 1.6s); }
.dl-ring--3 { width: 160px; height: 160px; animation-delay: calc(var(--start) + 3.2s); border-color: rgba(240, 246, 250, .25); }
@keyframes dl-ring { 0% { opacity: 0; scale: .4; } 8% { opacity: .9; } 100% { opacity: 0; scale: 3.6; } }
.dl-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.dl-sphere { border-radius: 22%; box-shadow: 0 0 0 10px rgba(var(--accent-rgb), .08), 0 18px 50px -12px rgba(var(--accent-rgb), .8); }
.dl-sphere img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.dl-sphere::after { content: none; }
.dl-label { margin-top: 26px; }
.dl-title { margin-top: 12px; max-width: 1180px; font-size: calc(36px * var(--fac)); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-weight: 500; color: var(--text); text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.dl-text { margin-top: 12px; max-width: 640px; font-size: 16px; line-height: var(--lh-body); letter-spacing: var(--tr-body); color: var(--body); text-wrap: balance; }
.dl-boxes { --bh: min(42px, calc(((100vw - 2 * var(--gutter) - 12px) / 2 - 24px) / 3.36)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 520px; margin: 26px 0 0; padding: 0; list-style: none; }
.dl-item { display: flex; min-width: 0; }
.dl-box {
position: relative; display: flex; align-items: center; justify-content: center;
width: 100%; height: 74px; padding: 0 12px; border-radius: 20px;
background: linear-gradient(180deg, rgba(22, 27, 39, .66) 0%, rgba(10, 13, 20, .56) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(255, 255, 255, .06), inset 0 0 24px rgba(255, 255, 255, .04), 0 24px 50px -24px rgba(0, 0, 0, .8), 0 16px 44px -22px rgba(var(--accent-rgb), .45);
transition: transform .55s var(--ease-spring), box-shadow .4s ease;
}
.dl-box img { position: relative; }
.dl-box .soon-tag { height: 24px; line-height: 24px; font-size: 12px; }
.dl-note { margin-top: 18px; max-width: 520px; color: var(--muted); }
.dl-contact { margin-top: 18px; }
.dl-contact .btn { padding-inline: 20px 16px; }
@media (min-width: 768px) {
.dl-boxes { --bh: 52px; display: flex; justify-content: center; gap: 20px; max-width: none; margin-top: 40px; }
.dl-item { flex: none; }
.dl-box { width: 244px; height: 100px; }
}
@media (min-width: 1024px) {
.dl { padding-block: 192px 160px; }
.dl-ringbox { top: 192px; }
.dl-glow { top: 40px; height: 640px; }
.dl-label { margin-top: 36px; }
.dl-title { margin-top: 16px; font-size: calc(72px * var(--fac)); }
.dl-text { margin-top: 20px; font-size: 20px; }
.dl-boxes { margin-top: 48px; }
.dl-note { margin-top: 24px; }
}
@keyframes dl-pop { 0% { opacity: 0; scale: .6; animation-timing-function: cubic-bezier(.2, .9, .3, 1.25); } 100% { opacity: 1; scale: 1; } }
@keyframes dl-in { 0% { opacity: 0; translate: 0 40px; animation-timing-function: cubic-bezier(.2, .7, .2, 1); } 100% { opacity: 1; translate: 0 0; } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.dl-sphere, .dl-item { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); }
.dl-sphere { animation-name: dl-pop; animation-range: entry 20% cover 32%; }
.dl-item { animation-name: dl-in; animation-range: entry 30% cover 38%; }
.dl-item + .dl-item { animation-range: entry 36% cover 40%; }
}
}