/*! DGR Web — otomatik paket (27 dosya); düzenlemeyin: kaynaklar assets/css/ */
/* css/front/theme.css */

:root,
.band-dark,
.sec-ink {
color-scheme: dark;
--bg: #0a0b0e;
--bg-2: #0e1015;
--surface: #12141a;
--surface-2: #181b22;
--surface-3: #1f232c;
--line: rgb(255 255 255 / 0.08);
--line-2: rgb(255 255 255 / 0.14);
--text: #f4f3ef;
--text-2: #b4b6bd;
--text-3: #80838c;
--brand-fill: var(--brand);
--brand-fill-hover: color-mix(in srgb, var(--brand) 86%, #fff);
--brand-600: color-mix(in srgb, var(--brand) 80%, #fff);
--brand-700: color-mix(in srgb, var(--brand) 62%, #fff);
--brand-ink: #fff;
--brand-soft: color-mix(in oklab, var(--brand) 10%, var(--surface));
--brand-soft-2: color-mix(in oklab, var(--brand) 18%, var(--surface));
--brand-glow: rgb(255 90 31 / 0.35);
--accent: #ffb347;
--accent-soft: color-mix(in oklab, var(--accent) 14%, var(--surface));
--grad-brand: linear-gradient(135deg, var(--brand), var(--accent));
--ok: #34d399;
--warn: var(--accent);
--danger: #fb7185;
--info: #7dd3fc;
--ok-soft: color-mix(in oklab, var(--ok) 14%, var(--surface));
--danger-soft: color-mix(in oklab, var(--danger) 14%, var(--surface));
--code-bg: #0b0c10;
--code-text: #ece9e2;
--code-dim: #8e919a;
--code-line: rgb(255 255 255 / 0.1);
--shadow-sm: 0 1px 0 rgb(0 0 0 / 0.5);
--shadow-md: 0 16px 32px -20px rgb(0 0 0 / 0.8);
--shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 28px 48px -30px rgb(0 0 0 / 0.85);
--shadow-glow: 0 24px 48px -24px var(--brand-glow), 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
--focus: var(--brand);
--selection: color-mix(in oklab, var(--brand) 38%, var(--bg));
--glass: rgb(255 255 255 / 0.06);
--glass-2: rgb(255 255 255 / 0.1);
--header-bg: rgb(10 11 14 / 0.72);
}
:root[data-theme="light"],
.band-light {
color-scheme: light;
--bg: #f6f4ef;
--bg-2: #efede6;
--surface: #ffffff;
--surface-2: #f3f1ec;
--surface-3: #ebe8e1;
--line: rgb(15 17 21 / 0.1);
--line-2: rgb(15 17 21 / 0.18);
--text: #0f1115;
--text-2: #4a4d55;
--text-3: #676b74;
--brand-fill: color-mix(in srgb, var(--brand) 88%, #000);
--brand-fill-hover: color-mix(in srgb, var(--brand) 76%, #000);
--brand-600: color-mix(in srgb, var(--brand) 72%, #000);
--brand-700: color-mix(in srgb, var(--brand) 60%, #000);
--brand-ink: #fff;
--brand-soft: color-mix(in oklab, var(--brand) 8%, var(--surface));
--brand-soft-2: color-mix(in oklab, var(--brand) 16%, var(--surface));
--brand-glow: rgb(255 90 31 / 0.22);
--accent: #b25e00;
--accent-soft: color-mix(in oklab, var(--accent) 12%, var(--surface));
--ok: #0f8a5f;
--danger: #be123c;
--info: #1d4ed8;
--ok-soft: color-mix(in oklab, var(--ok) 10%, var(--surface));
--danger-soft: color-mix(in oklab, var(--danger) 10%, var(--surface));
--shadow-sm: 0 1px 0 rgb(15 17 21 / 0.05);
--shadow-md: 0 16px 32px -22px rgb(15 17 21 / 0.35);
--shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 28px 48px -32px rgb(15 17 21 / 0.35);
--shadow-glow: 0 24px 48px -26px var(--brand-glow), 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
--selection: color-mix(in oklab, var(--brand) 26%, var(--bg));
--glass: rgb(15 17 21 / 0.05);
--glass-2: rgb(15 17 21 / 0.08);
--header-bg: rgb(246 244 239 / 0.78);
}
.band-orange {
color-scheme: dark;
--bg: #0a0b0e;
--bg-2: #0e1015;
--surface: #12141a;
--surface-2: #181b22;
--surface-3: #1f232c;
--line: rgb(255 255 255 / 0.08);
--line-2: rgb(255 255 255 / 0.14);
--text: #f4f3ef;
--text-2: #b4b6bd;
--text-3: #80838c;
--brand-fill: var(--brand);
--brand-fill-hover: color-mix(in srgb, var(--brand) 86%, #fff);
--brand-600: color-mix(in srgb, var(--brand) 80%, #fff);
--brand-700: color-mix(in srgb, var(--brand) 62%, #fff);
--brand-ink: #fff;
--brand-soft: color-mix(in oklab, var(--brand) 10%, var(--surface));
--brand-soft-2: color-mix(in oklab, var(--brand) 18%, var(--surface));
--brand-glow: rgb(255 90 31 / 0.35);
--accent: #ffb347;
--accent-soft: color-mix(in oklab, var(--accent) 14%, var(--surface));
--shadow-sm: 0 1px 0 rgb(0 0 0 / 0.5);
--shadow-md: 0 16px 32px -20px rgb(0 0 0 / 0.8);
--shadow: 0 28px 48px -30px rgb(0 0 0 / 0.85);
--shadow-glow: 0 24px 48px -24px var(--brand-glow), 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
--glass: rgb(255 255 255 / 0.06);
--glass-2: rgb(255 255 255 / 0.1);
}
:root {
--band-from: #181b22;
--band-to: #0a0b0e;
--band-grad: linear-gradient(135deg, var(--band-from), var(--band-to));
--fs-h1: clamp(2.8rem, 1.6rem + 4.2vw, 5.5rem);
--fs-h2: clamp(2rem, 1.3rem + 2.4vw, 3.4rem);
--fs-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
--fs-lead: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
--fs-label: 0.75rem;
--ls-head: -0.03em;
--lh-head: 1.06;
--section-py: clamp(4.5rem, 9vw, 8rem);
--band-py: var(--section-py);
--r-sm: 10px;
--r: 16px;
--r-lg: 24px;
--radius: var(--r);
--radius-sm: var(--r-sm);
--radius-lg: var(--r-lg);
--header-h: 72px;
--container: 76rem;
--container-wide: 88rem;
--container-narrow: 46rem;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
.band {
position: relative;
padding-block: var(--band-py);
color: var(--text);
}
.band-orange,
.band-dark,
.band-light {
background: var(--bg);
color: var(--text);
}
.band-orange {
border-block: 1px solid var(--line);
}
.band-surface {
background: var(--surface);
color: var(--text);
}
.band-surface-2 {
background: var(--bg-2);
color: var(--text);
}
.band-line {
border-block: 1px solid var(--line);
}
.btn--on-band {
color: var(--brand-ink);
background: var(--brand-fill);
}
.btn--outline-band {
color: var(--text);
background: transparent;
border-color: var(--line-2);
}
.btn--outline-band:hover {
background: var(--glass);
border-color: var(--text);
}
.text-1 { color: var(--text); }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.text-brand { color: var(--brand-600); }
.f-brand { fill: var(--brand); }
.f-accent { fill: var(--accent); }
.f-text { fill: var(--text); }
.f-text-2 { fill: var(--text-2); }
.f-surface { fill: var(--surface); }
.f-surface-2 { fill: var(--surface-2); }
.f-bg { fill: var(--bg); }
.f-line { fill: var(--line-2); }
.s-brand { stroke: var(--brand); }
.s-accent { stroke: var(--accent); }
.s-text { stroke: var(--text); }
.s-text-2 { stroke: var(--text-2); }
.s-line { stroke: var(--line-2); }
.s-none { stroke: none; }
.f-none { fill: none; }
:root:not([data-theme="light"]) [data-show-theme="light"],
:root[data-theme="light"] [data-show-theme="dark"] {
display: none !important;
}
html.theme-vt::view-transition-old(root),
html.theme-vt::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
html.theme-vt::view-transition-old(root) {
z-index: 1;
}
html.theme-vt::view-transition-new(root) {
z-index: 2;
}
html.theme-vt .nav__bar,
html.theme-vt .nav {
view-transition-name: none !important;
}
html.theme-fade,
html.theme-fade *,
html.theme-fade *::before,
html.theme-fade *::after {
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, fill 0.25s ease, stroke 0.25s ease !important;
}
@media (prefers-reduced-motion: reduce) {
html.theme-fade,
html.theme-fade *,
html.theme-fade *::before,
html.theme-fade *::after {
transition: none !important;
}
}
html[data-motion="off"].theme-fade,
html[data-motion="off"].theme-fade *,
html[data-motion="off"].theme-fade *::before,
html[data-motion="off"].theme-fade *::after {
transition: none !important;
}

/* css/main.css */

@font-face {
font-family: "Mona Sans";
font-style: normal;
font-display: swap;
font-weight: 200 900;
src: url("../../fonts/mona-sans-latin-ext-wght-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Mona Sans";
font-style: normal;
font-display: swap;
font-weight: 200 900;
src: url("../../fonts/mona-sans-latin-wght-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Geist Mono";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url("../../fonts/geist-mono-latin-ext-wght-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Geist Mono";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url("../../fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--brand: #ff5a1f;
--fs-body: 1rem;
--fs-label: 0.75rem;
--font: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--gutter: clamp(1.25rem, 4vw, 2.5rem);
--container: 76rem;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--ease-io: cubic-bezier(0.45, 0.05, 0.25, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
:where(:root) {
--bg: #0a0b0e;
--bg-2: #0e1015;
--surface: #12141a;
--surface-2: #181b22;
--surface-3: #1f232c;
--line: rgb(255 255 255 / 0.08);
--line-2: rgb(255 255 255 / 0.14);
--text: #f4f3ef;
--text-2: #b4b6bd;
--text-3: #80838c;
--ink: var(--text);
--ink-soft: var(--text);
--muted: var(--text-2);
--faint: var(--text-3);
--bg-soft: var(--surface);
--brand-fill: var(--brand);
--brand-fill-hover: color-mix(in srgb, var(--brand) 86%, #fff);
--brand-ink: #fff;
--brand-600: color-mix(in srgb, var(--brand) 80%, #fff);
--brand-700: color-mix(in srgb, var(--brand) 62%, #fff);
--brand-soft: color-mix(in oklab, var(--brand) 10%, var(--surface));
--brand-soft-2: color-mix(in oklab, var(--brand) 18%, var(--surface));
--brand-50: var(--brand-soft);
--brand-100: var(--brand-soft-2);
--brand-200: color-mix(in oklab, var(--brand) 36%, var(--surface));
--brand-300: color-mix(in oklab, var(--brand) 60%, var(--surface));
--brand-glow: rgb(255 90 31 / 0.35);
--accent: #ffb347;
--grad-brand: linear-gradient(135deg, var(--brand), var(--accent));
--glass: rgb(255 255 255 / 0.06);
--shadow: 0 28px 48px -30px rgb(0 0 0 / 0.85);
--shadow-md: 0 16px 32px -20px rgb(0 0 0 / 0.8);
--shadow-glow: 0 24px 48px -24px var(--brand-glow);
--fs-h1: clamp(2.8rem, 1.6rem + 4.2vw, 5.5rem);
--fs-h2: clamp(2rem, 1.3rem + 2.4vw, 3.4rem);
--fs-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
--fs-lead: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
--ls-head: -0.03em;
--lh-head: 1.06;
--r-sm: 10px;
--r: 16px;
--r-lg: 24px;
--radius: 16px;
--radius-sm: 10px;
--radius-lg: 24px;
--section-py: clamp(4.5rem, 9vw, 8rem);
--header-h: 72px;
--header-bg: rgb(10 11 14 / 0.72);
}
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: vt-out 0.22s var(--ease) both;
}
::view-transition-new(root) {
animation: vt-in 0.3s var(--ease-out) both;
}
@keyframes vt-out {
to { opacity: 0; }
}
@keyframes vt-in {
from { opacity: 0; transform: translateY(6px); }
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 24px);
background: var(--bg);
}
body {
margin: 0;
min-height: 100vh;
font-family: var(--font);
font-size: 1rem;
line-height: 1.6;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure {
margin: 0;
}
h1, h2, h3 {
font-weight: 700;
line-height: var(--lh-head);
letter-spacing: var(--ls-head);
text-wrap: balance;
}
h4 {
font-weight: 650;
letter-spacing: -0.015em;
}
ul[role="list"],
ol {
list-style: none;
padding: 0;
}
img,
svg {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
}
a,
button,
label,
summary {
-webkit-tap-highlight-color: transparent;
}
::selection {
background: var(--selection);
color: var(--text);
}
:focus-visible {
outline: 2px solid var(--focus, var(--brand));
outline-offset: 3px;
}
main:focus {
outline: none;
}
main {
display: block;
}
.icon {
width: 1.15em;
height: 1.15em;
flex: none;
}
.container {
width: min(100% - 2 * var(--gutter), var(--container));
margin-inline: auto;
}
.container--wide {
width: min(100% - 2 * var(--gutter), var(--container-wide, 88rem));
}
.container--narrow {
width: min(100% - 2 * var(--gutter), var(--container-narrow, 46rem));
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: fixed;
top: 0.75rem;
inset-inline-start: 0.75rem;
z-index: 100;
padding: 0.65rem 1rem;
border-radius: 10px;
background: var(--brand-fill);
color: var(--brand-ink);
font-weight: 600;
text-decoration: none;
transform: translateY(calc(-100% - 1.5rem));
transition: transform 0.2s var(--ease);
}
.skip-link:focus {
transform: none;
}
.track-pixel {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.logo {
display: inline-flex;
align-items: center;
color: var(--text);
text-decoration: none;
}
.logo__svg {
display: block;
width: auto;
height: 40px;
overflow: visible;
}
.logo__svg--mark {
height: 22px;
}
.logo-accent {
fill: var(--brand);
}
.logo-accent-stroke {
stroke: var(--brand);
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.65rem;
margin: 0;
font-family: var(--mono);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-600);
}
.eyebrow::before {
content: "";
flex: none;
width: 22px;
height: 1px;
background: currentColor;
opacity: 0.8;
}
.eyebrow--plain::before {
display: none;
}
.eyebrow--dot::before {
width: 7px;
height: 7px;
border-radius: 50%;
opacity: 1;
box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 50%, transparent);
animation: ping-ring 2.6s var(--ease) infinite;
}
.lead {
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--text-2);
text-wrap: pretty;
}
.kbd {
display: inline-block;
padding: 0.05em 0.45em;
border: 1px solid var(--line-2);
border-bottom-width: 2px;
border-radius: 6px;
font-family: var(--mono);
font-size: 0.78em;
line-height: 1.5;
color: var(--text-2);
background: var(--surface-2);
}
.u-mark {
position: relative;
display: inline-block;
font-style: normal;
color: var(--brand-600);
white-space: nowrap;
}
.u-mark::after {
content: "";
position: absolute;
right: -0.02em;
bottom: -0.1em;
left: -0.02em;
height: 0.16em;
background: var(--grad-brand);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9c20-7 36-7 52 0s32 7 48 0 32-7 48 0 32 7 48 0' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9c20-7 36-7 52 0s32 7 48 0 32-7 48 0 32 7 48 0' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
clip-path: inset(-20% 0 -20% 0);
pointer-events: none;
}
.u-mark--plain::after {
display: none;
}
.fx-lvl-full .u-mark::after,
.fx-lvl-calm .u-mark::after {
clip-path: inset(-20% 100% -20% 0);
animation: wave-draw 1.1s var(--ease-io) 0.5s both;
}
.fx-lvl-full [data-reveal] .u-mark::after,
.fx-lvl-calm [data-reveal] .u-mark::after,
.fx-lvl-full [data-lines] .u-mark::after,
.fx-lvl-calm [data-lines] .u-mark::after,
.fx-lvl-full .u-mark[data-reveal]::after,
.fx-lvl-calm .u-mark[data-reveal]::after {
animation: none;
}
.fx-lvl-full .is-in .u-mark::after,
.fx-lvl-calm .is-in .u-mark::after,
.fx-lvl-full .u-mark.is-in::after,
.fx-lvl-calm .u-mark.is-in::after {
animation: wave-draw 1.1s var(--ease-io) 0.35s both;
}
@keyframes wave-draw {
to { clip-path: inset(-20% 0 -20% 0); }
}
.u-wave {
display: block;
width: 100%;
height: 0.18em;
overflow: visible;
}
.u-wave path {
fill: none;
stroke: var(--brand);
stroke-width: 3;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
stroke-dasharray: 1;
stroke-dashoffset: 0;
}
.fx-lvl-full .u-wave path,
.fx-lvl-calm .u-wave path {
stroke-dashoffset: 1;
animation: wave-stroke 1.2s var(--ease-io) 0.5s forwards;
}
.fx-lvl-full [data-reveal] .u-wave path,
.fx-lvl-calm [data-reveal] .u-wave path {
animation: none;
}
.fx-lvl-full .is-in .u-wave path,
.fx-lvl-calm .is-in .u-wave path {
animation: wave-stroke 1.2s var(--ease-io) 0.35s forwards;
}
@keyframes wave-stroke {
to { stroke-dashoffset: 0; }
}
.pill,
.chip {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 30px;
padding: 0 0.8rem;
border: 1px solid var(--line-2);
border-radius: 999px;
background: var(--surface-2);
font-size: 0.8rem;
font-weight: 500;
line-height: 1;
color: var(--text-2);
white-space: nowrap;
}
.pill--sm {
min-height: 24px;
padding: 0 0.6rem;
font-size: 0.72rem;
}
.pill--mono,
.chip--mono {
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pill--brand {
border-color: color-mix(in srgb, var(--brand) 30%, transparent);
background: var(--brand-soft);
color: var(--brand-600);
}
.pill--solid {
border-color: transparent;
background: var(--brand-fill);
color: var(--brand-ink);
}
.pill--glass {
border-color: var(--line-2);
background: var(--glass);
color: var(--text);
}
.pill__dot,
.chip__dot {
position: relative;
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--brand);
}
.pill__dot::after,
.chip__dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--brand);
animation: ping 2.4s var(--ease) infinite;
}
.pill .icon,
.chip .icon {
width: 14px;
height: 14px;
}
.chip__index {
padding-inline-end: 0.55rem;
margin-inline-end: 0.05rem;
border-inline-end: 1px solid var(--line);
font-weight: 600;
color: var(--brand-600);
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 0.2rem 0.4rem;
margin-top: 0.8rem;
}
.tags li {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--text-3);
}
.tags li + li::before {
content: "·";
margin-inline-end: 0.4rem;
color: var(--brand);
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 1rem;
font-weight: 600;
font-size: 0.95rem;
color: var(--text);
text-decoration: none;
transition: color 0.2s;
}
.link-arrow:hover {
color: var(--brand-600);
}
.link-arrow__icon {
width: 1em;
height: 1em;
transition: transform 0.25s var(--ease);
}
.link-arrow:hover .link-arrow__icon {
transform: translate(2px, -2px);
}
.empty {
padding: 4rem 0;
text-align: center;
color: var(--text-2);
}
.divider {
display: block;
height: 1px;
border: 0;
margin: 0;
background: var(--line);
}
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
height: 46px;
padding: 0 1.3rem;
border: 1px solid transparent;
border-radius: 999px;
overflow: hidden;
font-size: 0.94rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: transform 0.3s var(--ease), background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.3s;
}
.btn--lg {
height: 54px;
padding: 0 1.7rem;
font-size: 1rem;
}
.btn--sm {
height: 38px;
padding: 0 0.95rem;
font-size: 0.84rem;
}
.btn--block {
width: 100%;
}
.btn__icon {
width: 1.1em;
height: 1.1em;
transition: transform 0.25s var(--ease);
}
.btn:hover .btn__icon {
transform: translateX(3px);
}
.btn--primary {
font-size: 1.17rem;
font-weight: 700;
color: var(--brand-ink);
background: var(--brand-fill);
box-shadow: 0 10px 24px -14px var(--brand-glow);
}
.btn--primary::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.32) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform 0.7s var(--ease);
pointer-events: none;
}
.btn--primary:hover {
background: var(--brand-fill-hover);
box-shadow: 0 16px 32px -14px var(--brand-glow);
transform: translateY(-1px);
}
.btn--primary:hover::after {
transform: translateX(120%);
}
.btn--primary.btn--sm {
font-size: 0.9rem;
font-weight: 700;
background: color-mix(in srgb, var(--brand) 76%, #000);
}
.btn--primary.btn--sm:hover {
background: color-mix(in srgb, var(--brand) 68%, #000);
}
.btn--ghost {
color: var(--text);
background: transparent;
border-color: var(--line-2);
}
.btn--ghost:hover {
background: var(--glass);
border-color: var(--line-2);
}
.btn--glass {
color: var(--text);
background: var(--glass);
border-color: var(--line);
}
.btn--glass:hover {
background: var(--glass-2, var(--surface-2));
border-color: var(--line-2);
}
.btn--light {
color: var(--text);
background: var(--surface-2);
border-color: var(--line);
}
.btn--light:hover {
color: var(--brand-ink);
background: var(--brand-fill);
border-color: transparent;
}
.btn--text {
height: auto;
padding: 0.3rem 0;
overflow: visible;
color: var(--text);
background: transparent;
}
.btn--text:hover {
color: var(--brand-600);
}
.btn:active {
transform: translateY(1px) scale(0.99);
}
.btn[aria-busy="true"] {
pointer-events: none;
opacity: 0.7;
}
.icon-btn {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--line-2);
border-radius: 50%;
color: var(--text);
background: var(--surface);
transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.25s var(--ease);
}
.icon-btn .icon {
width: 17px;
height: 17px;
}
.icon-btn:hover {
color: var(--brand-ink);
background: var(--brand-fill);
border-color: transparent;
transform: translateY(-2px);
}
.card {
position: relative;
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--surface);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
color: var(--text);
transition: transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.45s var(--ease), background-color 0.3s;
}
:root[data-theme="light"] .card {
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8), var(--shadow-sm);
}
.card--flat {
box-shadow: none;
}
.card--surface-2 {
background: var(--surface-2);
}
.card--pad {
padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.card--pad-lg {
padding: clamp(1.6rem, 3.5vw, 2.5rem);
}
.card--glow {
border-color: transparent;
background-clip: padding-box;
}
.card--glow::before {
content: "";
position: absolute;
inset: -1px;
z-index: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 55%, transparent), color-mix(in srgb, var(--brand) 10%, transparent) 40%, var(--line) 70%, color-mix(in srgb, var(--accent) 30%, transparent));
-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);
opacity: 0.8;
transition: opacity 0.4s;
pointer-events: none;
}
.card--glow > * {
position: relative;
z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
.card--glow:hover,
.card--hover:hover {
transform: translateY(-4px);
}
.card--glow:hover {
box-shadow: var(--shadow-glow), inset 0 1px 0 rgb(255 255 255 / 0.06);
}
.card--glow:hover::before {
opacity: 1;
}
.card--hover:hover {
border-color: var(--line-2);
box-shadow: var(--shadow-md);
}
}
.card--glow:focus-within {
box-shadow: var(--shadow-glow), inset 0 1px 0 rgb(255 255 255 / 0.06);
}
[data-spot] {
--mx: 50%;
--my: 50%;
--spot: 0;
}
.card[data-spot]::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%);
opacity: var(--spot, 0);
transition: opacity 0.5s var(--ease);
pointer-events: none;
}
.card[data-spot] > * {
position: relative;
z-index: 1;
}
.card__icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-bottom: 1.1rem;
border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
border-radius: var(--r-sm);
background: var(--brand-soft);
color: var(--brand-600);
transition: transform 0.4s var(--ease), background-color 0.3s;
}
.card__icon .icon {
width: 20px;
height: 20px;
}
@media (hover: hover) and (pointer: fine) {
.card:hover .card__icon {
transform: translateY(-2px);
background: var(--brand-soft-2);
}
}
.card__title {
font-size: var(--fs-h3);
font-weight: 650;
letter-spacing: -0.02em;
line-height: 1.2;
}
.card__text {
margin-top: 0.6rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-2);
}
.card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid var(--line);
}
.card__link {
color: inherit;
text-decoration: none;
}
.card__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
}
.stat {
display: grid;
gap: 0.2rem;
min-width: 0;
}
.stat__n {
font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.stat__n small {
font-size: 0.6em;
color: var(--brand-600);
}
.stat__l {
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
.nav {
position: fixed;
inset: 0 0 auto;
z-index: 50;
height: var(--header-h);
color: var(--text);
background: transparent;
border-bottom: 1px solid transparent;
transition: border-color 0.35s, background-color 0.35s, top 0.3s var(--ease);
}
.nav::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--header-bg);
opacity: 0;
transition: opacity 0.35s;
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
}
.nav.is-scrolled,
.nav.is-open {
border-bottom-color: var(--line);
}
.nav.is-scrolled::before,
.nav.is-open::before {
opacity: 1;
}
.nav__bar {
view-transition-name: site-nav;
position: relative;
display: flex;
align-items: center;
gap: 0.25rem;
width: min(100% - 2 * var(--gutter), var(--container));
height: 100%;
margin: 0 auto;
}
.nav .logo {
height: var(--header-h);
margin-inline-end: auto;
}
.nav__toggle {
display: inline-grid;
place-content: center;
gap: 5px;
width: 44px;
height: 44px;
margin-inline-end: -0.6rem;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--text);
}
.nav__toggle span {
display: block;
width: 20px;
height: 1.5px;
border-radius: 2px;
background: currentColor;
transition: transform 0.35s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child {
transform: translateY(3.25px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] span:last-child {
transform: translateY(-3.25px) rotate(-45deg);
}
.nav__menu {
position: fixed;
inset: var(--header-h) 0 0;
z-index: 49;
display: grid;
align-content: start;
overflow: auto;
overscroll-behavior: contain;
background: var(--bg);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s;
}
.nav__menu::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(60% 40% at 80% 100%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%);
pointer-events: none;
}
html.menu-open {
overflow: hidden;
}
.nav.is-open .nav__menu {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.3s var(--ease), transform 0.45s var(--ease-out), visibility 0s;
}
.nav__list {
position: relative;
width: min(100% - 2 * var(--gutter), var(--container));
margin: 0 auto;
padding: 1.5rem 0 2rem;
list-style: none;
}
.nav__list > li {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.4s var(--ease), transform 0.5s var(--ease-out);
transition-delay: calc(var(--ni, 0) * 60ms + 80ms);
}
.nav.is-open .nav__list > li {
opacity: 1;
transform: none;
}
.nav__list > li:nth-child(1) { --ni: 0; }
.nav__list > li:nth-child(2) { --ni: 1; }
.nav__list > li:nth-child(3) { --ni: 2; }
.nav__list > li:nth-child(4) { --ni: 3; }
.nav__list > li:nth-child(5) { --ni: 4; }
.nav__list > li:nth-child(6) { --ni: 5; }
.nav__list > li:nth-child(7) { --ni: 6; }
.nav__link {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 0.6rem;
padding: 1.1rem 0;
border-top: 1px solid var(--line);
font-size: clamp(1.6rem, 6vw, 2.2rem);
font-weight: 650;
letter-spacing: -0.03em;
line-height: 1.1;
color: var(--text);
text-decoration: none;
transition: color 0.2s, background-color 0.2s;
}
.nav__link[aria-current="page"] {
color: var(--brand-600);
}
.nav__link[aria-current="page"]::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brand);
}
.nav__num {
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--text-3);
margin-inline-end: 0.3rem;
}
.nav__item-cta {
margin-top: 1.25rem;
}
.nav__link--cta {
justify-content: center;
gap: 0.5rem;
height: 54px;
padding: 0 1.5rem;
border: 0;
border-radius: 999px;
color: var(--brand-ink);
background: var(--brand-fill);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -0.01em;
box-shadow: 0 12px 28px -16px var(--brand-glow);
--flame-color: #ffd36b;
--flame-tip: #fff3c4;
--flame-inset: 14%;
--flame-bottom: 0px;
}
.nav__link--cta[aria-current="page"] {
color: var(--brand-ink);
}
.nav__link--cta[aria-current="page"]::before {
display: none;
}
.nav__cta-icon {
width: 1em;
height: 1em;
}
.nav__foot {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
width: min(100% - 2 * var(--gutter), var(--container));
margin: 0 auto;
padding: 1rem 0 2.5rem;
font-size: 0.9rem;
color: var(--text-2);
opacity: 0;
transition: opacity 0.4s 0.4s;
}
.nav.is-open .nav__foot {
opacity: 1;
}
.nav__foot a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--text-2);
text-decoration: none;
}
.nav__foot a:hover {
color: var(--text);
}
.nav__foot .icon {
width: 16px;
height: 16px;
color: var(--brand-600);
}
.nav__progress {
position: absolute;
right: 0;
bottom: -1px;
left: 0;
height: 2px;
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
}
.nav.is-scrolled .nav__progress {
opacity: 1;
}
.nav.is-open .nav__progress {
opacity: 0;
}
.nav__progress-line {
position: absolute;
inset: 0;
background: var(--grad-brand);
transform: scaleX(var(--progress, 0));
transform-origin: 0 50%;
}
.nav__progress-tip {
display: none;
}
@media (min-width: 900px) {
.nav__toggle,
.nav__foot,
.nav__num {
display: none;
}
.nav__menu {
position: relative;
inset: auto;
z-index: auto;
display: block;
overflow: visible;
background: transparent;
opacity: 1;
visibility: visible;
transform: none;
transition: none;
}
.nav__menu::before {
display: none;
}
.nav__list {
display: flex;
align-items: center;
gap: 0.1rem;
width: auto;
margin: 0;
padding: 0;
}
.nav__list > li {
opacity: 1;
transform: none;
transition: none;
}
.nav__link {
height: 40px;
padding: 0 0.9rem;
border: 0;
border-radius: 999px;
font-size: 0.92rem;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--text-2);
}
.nav__link:hover {
color: var(--text);
}
.nav__link[aria-current="page"] {
color: var(--text);
font-weight: 600;
}
.nav__link[aria-current="page"]::before {
display: none;
}
.nav__item-cta {
margin: 0;
margin-inline-start: 0.6rem;
}
.nav__link--cta,
.nav__link--cta[aria-current="page"] {
color: var(--brand-ink);
height: 40px;
padding: 0 1.1rem;
font-size: 0.92rem;
font-weight: 700;
box-shadow: 0 10px 22px -14px var(--brand-glow);
}
.nav__link--cta:hover {
color: var(--brand-ink);
background: var(--brand-fill-hover);
}
.nav .logo {
margin-inline-end: 1.5rem;
}
.nav__menu {
margin-inline-start: auto;
}
}
.lang {
position: relative;
z-index: 4;
flex: none;
margin-inline-start: 0.35rem;
}
.lang__btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
height: 36px;
padding: 0 0.65rem;
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--text-2);
background: color-mix(in srgb, var(--surface) 55%, transparent);
cursor: pointer;
list-style: none;
user-select: none;
transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.lang__btn::-webkit-details-marker {
display: none;
}
.lang__btn::marker {
content: "";
}
.lang__btn:hover,
.lang[open] .lang__btn {
color: var(--text);
border-color: var(--line-2);
background: var(--surface-2);
}
.lang__btn:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.lang__globe {
width: 15px;
height: 15px;
color: var(--brand-600);
}
.lang__chev {
width: 13px;
height: 13px;
color: var(--text-3);
transition: transform 0.25s var(--ease);
}
.lang[open] .lang__chev {
transform: rotate(180deg);
}
.lang__pop {
position: absolute;
top: calc(100% + 10px);
inset-inline-end: -3.5rem;
width: 15.5rem;
max-height: calc(100dvh - var(--header-h) - 1.5rem);
overflow: auto;
padding: 0.4rem;
border: 1px solid var(--line-2);
border-radius: var(--r);
background: var(--surface);
box-shadow: var(--shadow-md), inset 0 1px 0 rgb(255 255 255 / 0.05);
animation: lang-in 0.22s var(--ease-out);
transform-origin: 85% 0;
}
@keyframes lang-in {
from { opacity: 0; transform: translateY(-6px) scale(0.97); }
}
.lang__head {
margin: 0;
padding: 0.45rem 0.65rem 0.4rem;
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-3);
}
.lang__list {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.lang__item {
display: flex;
align-items: center;
gap: 0.6rem;
min-height: 36px;
padding: 0 0.65rem;
border-radius: var(--r-sm);
font-size: 0.9rem;
color: var(--text-2);
text-decoration: none;
text-align: start;
transition: color 0.15s, background-color 0.15s;
}
.lang__item:hover,
.lang__item:focus-visible {
color: var(--text);
background: var(--surface-2);
}
.lang__item:focus-visible {
outline: 2px solid var(--brand);
outline-offset: -2px;
}
.lang__item[aria-current="true"] {
color: var(--text);
background: var(--brand-soft);
}
.lang__name {
flex: 1;
}
.lang__tag {
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.06em;
color: var(--text-3);
}
.lang__check {
width: 15px;
height: 15px;
color: var(--brand-600);
}
.nav__langs {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
width: min(100% - 2 * var(--gutter), var(--container));
margin: 0 auto;
padding: 0 0 2.5rem;
opacity: 0;
transition: opacity 0.4s 0.45s;
}
.nav.is-open .nav__langs {
opacity: 1;
}
.nav__langs > .icon {
width: 16px;
height: 16px;
margin-inline-end: 0.25rem;
color: var(--brand-600);
}
.nav__langs a {
display: inline-grid;
place-items: center;
min-width: 40px;
height: 32px;
padding: 0 0.5rem;
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 600;
color: var(--text-2);
text-decoration: none;
}
.nav__langs a[aria-current="true"] {
color: var(--brand-600);
border-color: color-mix(in srgb, var(--brand) 45%, transparent);
background: var(--brand-soft);
}
@media (max-width: 899.98px) {
.lang__btn {
height: 34px;
padding: 0 0.55rem;
}
.lang__pop {
position: fixed;
top: calc(var(--header-h) - 4px);
inset-inline: var(--gutter);
width: auto;
}
}
@media (min-width: 900px) {
.nav__langs {
display: none;
}
}
.section {
position: relative;
padding-block: var(--section-py);
}
.section--tight {
padding-block: calc(var(--section-py) * 0.55);
}
.section--flush {
padding-top: 0;
}
.section--line {
border-top: 1px solid var(--line);
}
.section--spot::before,
.section--spot-r::before,
.section--spot-c::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(60% 50% at 20% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%);
pointer-events: none;
}
.section--spot-r::before {
background: radial-gradient(55% 50% at 85% 0%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 70%);
}
.section--spot-c::before {
background: radial-gradient(50% 40% at 50% 100%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%);
}
.section--spot,
.section--spot-r,
.section--spot-c {
isolation: isolate;
}
.section-head {
display: grid;
justify-items: start;
max-width: 46rem;
margin: 0 0 clamp(2.5rem, 5vw, 4rem);
text-align: start;
}
.section-head--center {
justify-items: center;
margin-inline: auto;
text-align: center;
}
.section-head--split {
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 1.5rem;
max-width: none;
}
.section-head--split > :not(.section-head__aside) {
grid-column: 1;
}
.section-head__aside {
grid-column: 2;
grid-row: 1 / span 3;
align-self: end;
}
@media (max-width: 719px) {
.section-head--split {
grid-template-columns: minmax(0, 1fr);
}
.section-head__aside {
grid-column: 1;
grid-row: auto;
margin-top: 0.5rem;
}
}
.section-title {
margin-top: 1rem;
font-size: var(--fs-h2);
font-weight: 700;
line-height: var(--lh-head);
letter-spacing: var(--ls-head);
text-wrap: balance;
}
.section-intro {
max-width: 38rem;
margin-top: 1rem;
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--text-2);
text-wrap: pretty;
}
.section-foot {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.page-head {
position: relative;
isolation: isolate;
padding: calc(var(--header-h) + clamp(3.5rem, 9vw, 7rem)) 0 clamp(2.75rem, 5vw, 4.5rem);
background: var(--bg);
overflow: clip;
}
.page-head::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(55% 60% at 12% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
radial-gradient(40% 50% at 90% 10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%);
-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
mask-image: linear-gradient(to bottom, #000 55%, transparent);
pointer-events: none;
}
.page-head__inner {
position: relative;
display: grid;
justify-items: start;
max-width: 56rem;
}
.page-head__rule {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
}
.page-head__eyebrow {
margin-top: 0.4rem;
}
.page-head__eyebrow::before {
display: none;
}
.page-head__index {
padding-inline-end: 0.7rem;
margin-inline-end: 0.1rem;
border-inline-end: 1px solid var(--line-2);
color: var(--text-3);
}
.page-head__title {
margin-top: 0.9rem;
font-size: var(--fs-h1);
}
.page-head__intro {
max-width: 40rem;
margin-top: 1.25rem;
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--text-2);
text-wrap: pretty;
}
.page-head__meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1.5rem;
}
.crumbs {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-bottom: 1rem;
font-size: 0.86rem;
color: var(--text-2);
}
.crumbs__link {
position: relative;
padding: 0.15rem 0.2rem 0.3rem;
color: var(--text-2);
text-decoration: none;
transition: color 0.2s;
--flame-inset: 0px;
--flame-bottom: 0px;
--flame-h: 8px;
}
.crumbs__link:hover,
.crumbs__link:focus-visible {
color: var(--text);
}
.crumbs__sep {
width: 14px;
height: 14px;
color: var(--text-3);
}
.crumbs__here {
font-weight: 600;
color: var(--text);
}
.rule {
display: block;
height: 1px;
border: 0;
margin: 0;
background: var(--line);
}
.rule--draw {
background: linear-gradient(90deg, var(--brand), var(--line) 40%, var(--line));
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 1.2s var(--ease-io);
}
.rule--draw.is-in,
.is-in > .rule--draw {
transform: none;
}
.u-draw {
position: relative;
text-decoration: none;
}
.u-draw::after {
content: "";
position: absolute;
right: 0;
bottom: -2px;
left: 0;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: 100% 50%;
transition: transform 0.4s var(--ease);
pointer-events: none;
}
.u-draw:hover::after,
.u-draw:focus-visible::after {
transform: scaleX(1);
transform-origin: 0 50%;
}
.details__body a,
.check__text a,
.prose a {
text-decoration: none;
background:
linear-gradient(var(--brand), var(--brand)) 0 100% / 0 1.5px no-repeat,
linear-gradient(var(--line-2), var(--line-2)) 0 100% / 100% 1px no-repeat;
transition: background-size 0.45s var(--ease), color 0.2s;
}
.details__body a:hover,
.details__body a:focus-visible,
.check__text a:hover,
.check__text a:focus-visible,
.prose a:hover,
.prose a:focus-visible {
background-size: 100% 1.5px, 100% 1px;
}
.btn--primary:hover .btn__icon,
.btn--light:hover .btn__icon {
transform: none;
animation: arrow-loop 0.6s var(--ease) both;
}
@property --draw {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.btn--ghost {
overflow: visible;
}
.btn--ghost::before {
content: "";
position: absolute;
inset: -1px;
padding: 1.5px;
border-radius: inherit;
background: conic-gradient(from 0deg, var(--brand) var(--draw), transparent 0);
-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, linear-gradient(#000 0 0);
mask-composite: exclude;
transition: --draw 0.7s var(--ease-io);
pointer-events: none;
}
.btn--ghost:hover::before {
--draw: 360deg;
}
.logo__svg--stack > path[stroke-width="2.2"],
.logo-rule {
transform-box: view-box;
transform-origin: 171px 129.5px;
transition: transform 0.6s var(--ease);
}
.logo:hover .logo__svg--stack > path[stroke-width="2.2"],
.logo:hover .logo-rule,
.logo:focus-visible .logo__svg--stack > path[stroke-width="2.2"],
.logo:focus-visible .logo-rule {
transform: scaleX(1.12);
}
.copy {
position: relative;
display: inline-grid;
place-items: center;
flex: none;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--surface-2);
color: var(--text-2);
transition: color 0.2s, border-color 0.2s, background-color 0.2s, transform 0.25s var(--ease);
}
.copy[hidden] {
display: none;
}
.copy .icon {
grid-area: 1 / 1;
width: 14px;
height: 14px;
transition: opacity 0.2s, transform 0.3s var(--ease);
}
.copy__done {
color: var(--ok);
opacity: 0;
transform: scale(0.4);
}
.copy:hover {
color: var(--text);
border-color: var(--line-2);
}
.copy:active {
transform: scale(0.94);
}
.copy.is-done {
border-color: color-mix(in srgb, var(--ok) 40%, transparent);
background: var(--ok-soft, var(--surface-2));
}
.copy.is-done .copy__icon {
opacity: 0;
transform: scale(0.4);
}
.copy.is-done .copy__done {
opacity: 1;
transform: none;
}
.channels__item {
position: relative;
}
.channels__item > .copy {
position: absolute;
top: 50%;
inset-inline-end: calc(1rem + 16px + 0.6rem);
transform: translateY(-50%);
}
.channels__item > .copy:active {
transform: translateY(-50%) scale(0.94);
}
.channels__item.has-copy .channel__body {
padding-right: 2.6rem;
}
@media (max-width: 479px) {
.channels__item.has-copy .channel__go {
display: none;
}
.channels__item > .copy {
inset-inline-end: 0.85rem;
}
}
.bizcard__lines li {
display: flex;
align-items: center;
gap: 0.4rem;
}
.bizcard__lines .copy {
width: 26px;
height: 26px;
border-color: transparent;
background: transparent;
opacity: 0.75;
}
.bizcard__lines .copy:hover,
.bizcard__lines .copy:focus-visible,
.bizcard__lines .copy.is-done {
opacity: 1;
border-color: var(--line);
background: var(--surface-2);
}
.bizcard__lines .copy .icon {
width: 13px;
height: 13px;
}
.toast {
position: fixed;
left: 50%;
bottom: max(1.25rem, env(safe-area-inset-bottom));
z-index: 70;
display: flex;
align-items: center;
gap: 0.55rem;
max-width: calc(100% - 2rem);
padding: 0.65rem 1.05rem 0.65rem 0.85rem;
border: 1px solid var(--line-2);
border-radius: 999px;
background: var(--surface-3);
box-shadow: var(--shadow-md);
color: var(--text);
font-size: 0.88rem;
line-height: 1.3;
opacity: 0;
transform: translate(-50%, 14px) scale(0.96);
transition: opacity 0.25s, transform 0.4s var(--ease);
pointer-events: none;
}
.toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
.toast .icon {
width: 16px;
height: 16px;
color: var(--ok);
}
.toast__value {
overflow: hidden;
font-family: var(--mono);
font-size: 0.76rem;
color: var(--text-2);
text-overflow: ellipsis;
white-space: nowrap;
}
.to-top {
position: fixed;
inset-inline-end: max(1rem, env(safe-area-inset-right));
bottom: max(1rem, env(safe-area-inset-bottom));
z-index: 45;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--surface-2);
box-shadow: 0 0 0 1px var(--line-2), var(--shadow-md);
color: var(--text);
opacity: 0;
visibility: hidden;
transform: translateY(14px) scale(0.85);
transition: opacity 0.3s, transform 0.45s var(--ease), visibility 0s linear 0.45s, background-color 0.2s;
}
.to-top:hover {
background: var(--surface-3);
}
.to-top.is-visible {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
.to-top__ring {
position: absolute;
inset: 2px;
width: calc(100% - 4px);
height: calc(100% - 4px);
transform: rotate(-90deg);
}
.to-top__track {
stroke: var(--line);
}
.to-top__bar {
stroke: var(--brand);
stroke-linecap: round;
stroke-dashoffset: calc(100 - var(--progress, 0) * 100);
}
.to-top__icon {
position: relative;
width: 18px;
height: 18px;
}
.to-top:hover .to-top__icon {
animation: arrow-up-loop 0.55s var(--ease) both;
}
.cursor-pill {
position: fixed;
top: 0;
left: 0;
z-index: 60;
display: inline-flex;
align-items: center;
gap: 0.3rem;
height: 32px;
padding: 0 0.8rem 0 0.9rem;
border: 1px solid var(--line-2);
border-radius: 999px;
background: var(--surface-3);
box-shadow: var(--shadow-md);
color: var(--text);
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.03em;
white-space: nowrap;
pointer-events: none;
opacity: 0;
scale: 0.6;
transition: opacity 0.2s, scale 0.35s var(--ease);
}
.cursor-pill.is-on {
opacity: 1;
scale: 1;
}
.cursor-pill .icon {
width: 13px;
height: 13px;
color: var(--brand-600);
}
.ln {
display: inline-block;
overflow: hidden;
padding: 0.08em 0.04em 0.2em;
margin: -0.08em -0.04em -0.2em;
vertical-align: top;
}
.ln > span {
display: inline-block;
transition: transform 1s var(--ease);
transition-delay: calc(var(--line, 0) * 90ms);
}
.lines-ready [data-lines]:not(.is-in) .ln > span {
transform: translate3d(0, 108%, 0);
}
[data-reveal] {
transition: opacity 0.8s var(--ease), transform 0.9s var(--ease-out);
transition-delay: var(--reveal-delay, 0ms);
}
.reveal-ready [data-reveal]:not(.is-in) {
opacity: 0;
transform: translate3d(0, 24px, 0);
}
.reveal-ready [data-reveal="fade"]:not(.is-in) {
transform: none;
}
.reveal-ready [data-reveal="scale"]:not(.is-in) {
transform: scale(0.96);
}
.reveal-ready [data-reveal="left"]:not(.is-in) {
transform: translate3d(-28px, 0, 0);
}
.reveal-ready [data-reveal="right"]:not(.is-in) {
transform: translate3d(28px, 0, 0);
}
[dir="rtl"].reveal-ready [data-reveal="left"]:not(.is-in),
.reveal-ready [dir="rtl"] [data-reveal="left"]:not(.is-in) {
transform: translate3d(28px, 0, 0);
}
[dir="rtl"].reveal-ready [data-reveal="right"]:not(.is-in),
.reveal-ready [dir="rtl"] [data-reveal="right"]:not(.is-in) {
transform: translate3d(-28px, 0, 0);
}
.anim-in {
animation: rise 0.9s var(--ease-out) both;
}
.anim-in--2 { animation-delay: 0.08s; }
.anim-in--3 { animation-delay: 0.16s; }
.anim-in--4 { animation-delay: 0.24s; }
@keyframes rise {
from {
opacity: 0;
transform: translate3d(0, 16px, 0);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes arrow-loop {
0% { transform: none; opacity: 1; }
42% { transform: translateX(14px); opacity: 0; }
43% { transform: translateX(-14px); opacity: 0; }
100% { transform: none; opacity: 1; }
}
@keyframes arrow-up-loop {
0% { transform: none; opacity: 1; }
42% { transform: translateY(-12px); opacity: 0; }
43% { transform: translateY(12px); opacity: 0; }
100% { transform: none; opacity: 1; }
}
@keyframes ember-glow {
0%, 100% { opacity: 1; transform: scale(1); }
35% { opacity: 0.75; transform: scale(0.82); }
60% { opacity: 1; transform: scale(1.12); }
}
@keyframes frame-in {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: none; }
}
@keyframes pop {
from { opacity: 0; transform: scale(0.4); }
to { opacity: 1; transform: none; }
}
@keyframes blink {
50% { opacity: 0; }
}
@keyframes ping {
0% { transform: scale(1); opacity: 0.6; }
70%, 100% { transform: scale(2.8); opacity: 0; }
}
@keyframes ping-ring {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 50%, transparent); }
70%, 100% { box-shadow: 0 0 0 9px transparent; }
}
@keyframes marquee {
to { transform: translateX(-50%); }
}
.navpop {
display: none;
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
.navpop:not([hidden]) {
position: absolute;
top: 100%;
right: 0;
left: 0;
display: block;
height: 0;
pointer-events: none;
}
.navpop__box {
position: absolute;
top: 10px;
left: 0;
width: var(--w, 34rem);
height: var(--h, 15rem);
overflow: hidden;
border: 1px solid var(--line-2);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow-md);
opacity: 0;
visibility: hidden;
transform: translate3d(var(--x, 0px), -8px, 0) scale(0.98);
transform-origin: var(--ox, 50%) 0;
transition: opacity 0.18s, transform 0.3s var(--ease), visibility 0s linear 0.3s;
}
.navpop.is-open .navpop__box {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate3d(var(--x, 0px), 0, 0);
transition: opacity 0.22s, transform 0.42s var(--ease), width 0.42s var(--ease), height 0.42s var(--ease), visibility 0s;
}
.navpop.is-snap .navpop__box {
transition: none;
}
.navpop__pane {
position: absolute;
top: 0;
left: 0;
display: grid;
gap: 0.9rem;
width: var(--pw, 34rem);
padding: 1.1rem;
opacity: 0;
visibility: hidden;
transform: translate3d(calc(var(--dir, 1) * 32px), 0, 0);
transition: opacity 0.18s, transform 0.42s var(--ease), visibility 0s linear 0.42s;
}
.navpop__pane.is-before {
--dir: -1;
}
.navpop__pane.is-active {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.3s 0.06s, transform 0.42s var(--ease), visibility 0s;
}
.navpop__pane--projects { --pw: 35rem; }
.navpop__pane--services { --pw: 34rem; --more-x: 0.75rem; }
.navpop__pane--process { --pw: 36rem; }
.navpop__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 0 0.35rem;
}
.navpop__label {
font-family: var(--mono);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--faint);
}
.navpop__count {
font-size: 0.8rem;
color: var(--muted);
}
.navpop__count b {
font-family: var(--mono);
font-weight: 600;
color: var(--brand-600);
}
.navpop__works,
.navpop__services,
.navpop__steps {
margin: 0;
padding: 0;
list-style: none;
}
.navpop__works {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.navpop__work {
display: grid;
gap: 0.15rem;
padding: 0.35rem;
border-radius: 14px;
color: var(--ink);
text-decoration: none;
transition: background-color 0.2s;
}
.navpop__work:hover,
.navpop__work:focus-visible {
background: var(--surface-2);
}
.navpop__thumb {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
margin-bottom: 0.45rem;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface-2);
container-type: inline-size;
}
.navpop__thumb > .mock,
.navpop__thumb > img {
transition: transform 1.6s var(--ease-io);
}
.navpop__thumb > img {
width: 100%;
height: auto;
}
.navpop__work:hover .navpop__thumb > .mock,
.navpop__work:focus-visible .navpop__thumb > .mock {
transform: translateY(-28cqw);
}
.navpop__work-title {
font-size: 0.88rem;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.3;
}
.navpop__work-cat {
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--faint);
}
.navpop__services {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.35rem;
}
.navpop__service {
display: flex;
align-items: flex-start;
gap: 0.75rem;
height: 100%;
padding: 0.75rem;
border-radius: 14px;
color: var(--ink);
text-decoration: none;
transition: background-color 0.2s;
}
.navpop__service:hover,
.navpop__service:focus-visible {
background: var(--surface-2);
}
.navpop__icon {
display: grid;
place-items: center;
flex: none;
width: 36px;
height: 36px;
border: 1px solid var(--brand-100);
border-radius: 11px;
background: var(--brand-50);
color: var(--brand-600);
transition: transform 0.35s var(--ease), background-color 0.2s;
}
.navpop__icon .icon {
width: 17px;
height: 17px;
}
.navpop__service:hover .navpop__icon {
transform: translateY(-2px) rotate(-4deg);
background: var(--bg);
}
.navpop__service-body {
display: grid;
gap: 0.15rem;
min-width: 0;
}
.navpop__service-title {
font-size: 0.9rem;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.3;
}
.navpop__service-text {
font-size: 0.8rem;
line-height: 1.45;
color: var(--muted);
}
.navpop__steps {
position: relative;
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
padding-top: 0.4rem;
}
.navpop__steps::before {
content: "";
position: absolute;
top: calc(0.4rem + 0.35rem + 17px);
right: 12.5%;
left: 12.5%;
height: 1.5px;
background: linear-gradient(90deg, var(--brand), var(--brand-300));
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.2s;
}
.navpop__pane--process.is-active .navpop__steps::before {
transform: scaleX(1);
transition: transform 0.9s 0.12s var(--ease-io);
}
.navpop__step {
position: relative;
display: grid;
justify-items: center;
gap: 0.6rem;
padding: 0.35rem 0.4rem 0.6rem;
border-radius: 14px;
color: var(--ink);
text-align: center;
text-decoration: none;
transition: background-color 0.2s;
}
.navpop__step:hover,
.navpop__step:focus-visible {
background: var(--surface-2);
}
.navpop__dot {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid var(--line-2);
border-radius: 50%;
background: var(--surface);
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 600;
color: var(--muted);
transform: scale(0.6);
opacity: 0;
transition: transform 0.2s, opacity 0.2s, color 0.2s, border-color 0.2s, background-color 0.2s;
}
.navpop__pane--process.is-active .navpop__dot {
transform: none;
opacity: 1;
transition: transform 0.45s var(--ease), opacity 0.3s, color 0.2s, border-color 0.2s, background-color 0.2s;
}
.navpop__pane--process.is-active li:nth-child(2) .navpop__dot { transition-delay: 0.22s, 0.22s, 0s, 0s, 0s; }
.navpop__pane--process.is-active li:nth-child(3) .navpop__dot { transition-delay: 0.44s, 0.44s, 0s, 0s, 0s; }
.navpop__pane--process.is-active li:nth-child(4) .navpop__dot { transition-delay: 0.66s, 0.66s, 0s, 0s, 0s; }
.navpop__pane--process.is-active li:nth-child(n+5) .navpop__dot { transition-delay: 0.8s, 0.8s, 0s, 0s, 0s; }
.navpop__step:hover .navpop__dot,
.navpop__step:focus-visible .navpop__dot {
border-color: var(--brand-600);
background: var(--brand-600);
color: var(--brand-ink);
}
.navpop__step-title {
font-size: 0.86rem;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.3;
}
.navpop__more {
display: inline-flex;
align-items: center;
justify-self: start;
gap: 0.35rem;
margin: 0 0 0 var(--more-x, 0.35rem);
padding: 0.2rem 0;
font-size: 0.84rem;
font-weight: 600;
color: var(--ink);
text-decoration: none;
}
.navpop__more .icon {
width: 1em;
height: 1em;
color: var(--brand-600);
transition: transform 0.3s var(--ease);
}
.navpop__more:hover .icon,
.navpop__more:focus-visible .icon {
transform: translateX(3px);
}
.nav__link[aria-expanded="true"] {
color: var(--ink);
}
}
.kvkk-apply {
display: grid;
gap: 1.25rem;
max-width: 52rem;
margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
padding: clamp(1.25rem, 3vw, 1.75rem);
border: 1px solid var(--line-2);
border-radius: 20px;
background: var(--surface);
box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 6px 10px -8px rgb(0 0 0 / 0.25);
}
.kvkk-apply__title {
margin: 0;
font-size: 1.35rem;
font-weight: 650;
letter-spacing: -0.02em;
}
.kvkk-apply__text {
margin: 0.4rem 0 0;
color: var(--muted);
}
.kvkk-apply__links {
display: grid;
gap: 0.6rem;
}
@media (min-width: 720px) {
.kvkk-apply__links {
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
}
.page-head__title {
max-width: 16ch;
margin-top: 1.1rem;
font-size: var(--fs-h1);
font-weight: 650;
line-height: 1.04;
letter-spacing: -0.035em;
text-wrap: balance;
}
.page-head__intro {
max-width: 38rem;
margin-top: 1.5rem;
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--text-2);
text-wrap: pretty;
}
.page-head + .section {
padding-top: clamp(2.5rem, 5vw, 4rem);
}
.works {
--works-gap: clamp(1.25rem, 2.5vw, 2rem);
display: grid;
gap: clamp(2.75rem, 5vw, 3.5rem) var(--works-gap);
}
.work {
min-width: 0;
}
.work.is-hidden {
display: none;
}
.work.is-shown {
animation: rise 0.6s var(--ease) both;
}
.work__meta {
display: grid;
justify-items: center;
margin-top: 1.4rem;
text-align: center;
}
.work__cat:empty::before {
content: "\a0";
}
.work__cat {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.work__title {
margin-top: 0.35rem;
font-size: 1.28rem;
font-weight: 600;
letter-spacing: -0.03em;
}
.work__summary {
max-width: 34ch;
margin-top: 0.4rem;
font-size: 0.95rem;
color: var(--muted);
}
.window {
--scroll: 92.5;
position: relative;
display: block;
border: 1px solid var(--line-2);
border-radius: 14px;
background: var(--surface);
color: inherit;
text-decoration: none;
box-shadow: var(--shadow);
transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.window--img {
--scroll: 0;
}
.window__bar {
display: flex;
align-items: center;
gap: 0.6rem;
height: 34px;
padding: 0 0.75rem;
border-bottom: 1px solid var(--line);
border-radius: 13px 13px 0 0;
background: var(--surface-2);
}
.window__dots {
display: flex;
gap: 5px;
flex: none;
}
.window__dots i {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--line-2);
transition: background-color 0.3s;
}
.window__url {
display: flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
flex: 1;
min-width: 0;
max-width: 64%;
height: 21px;
margin: 0 auto;
padding: 0 0.6rem;
overflow: hidden;
border-radius: 6px;
background: var(--line);
font-family: var(--mono);
font-size: 0.66rem;
color: var(--muted);
white-space: nowrap;
transform: translateX(-17px);
}
.window__lock {
width: 10px;
height: 10px;
}
.window__screen {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
border-radius: 0 0 13px 13px;
background: #f4f4f4;
container-type: inline-size;
}
.window__page {
display: block;
transition: transform 3s var(--ease-io);
will-change: transform;
}
.window__page img {
width: 100%;
height: auto;
}
.window:focus-visible .window__page,
.window.is-playing .window__page {
transform: translateY(calc(var(--scroll) * -1cqw));
}
.window__select {
position: absolute;
inset: -7px;
border: 1.5px solid var(--brand);
border-radius: 18px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s var(--ease);
}
.window__select .h {
position: absolute;
width: 9px;
height: 9px;
border: 1.5px solid var(--brand);
background: var(--surface);
}
.window__select .h--tl { top: -5px; left: -5px; }
.window__select .h--tr { top: -5px; right: -5px; }
.window__select .h--bl { bottom: -5px; left: -5px; }
.window__select .h--br { bottom: -5px; right: -5px; }
.window__tag {
position: absolute;
left: -1px;
bottom: calc(100% + 6px);
padding: 0.25rem 0.5rem;
border-radius: 5px 5px 5px 0;
font-family: var(--mono);
font-size: 0.68rem;
line-height: 1.2;
color: #fff;
background: var(--brand-600);
white-space: nowrap;
}
.window__tag em {
margin-left: 0.5rem;
font-style: normal;
opacity: 0.75;
}
.window:focus-visible .window__select {
opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
.window:hover .window__dots i:nth-child(1) { background: #ff5f57; }
.window:hover .window__dots i:nth-child(2) { background: #febc2e; }
.window:hover .window__dots i:nth-child(3) { background: #28c840; }
.window:hover .window__page {
transform: translateY(calc(var(--scroll) * -1cqw));
}
.window:hover {
transform: translateY(-4px);
box-shadow: 0 1px 0 rgb(0 0 0 / 0.02), 0 13px 14px -6px rgb(0 0 0 / 0.35);
}
.window:hover .window__select {
opacity: 1;
}
}
.window:focus-visible {
outline: none;
}
.mock {
--mk-bg: #fafafa;
--mk-ink: #141414;
--mk-accent: #ff5a1f;
--mk-on: #fff;
--mk-line: rgb(0 0 0 / 0.08);
--mk-head: var(--font);
--mk-r: 1.2cqw;
--mk-rb: 99px;
--mk-c1: #f1d6c7;
--mk-c2: #e7e2dc;
--mk-c3: #d8d2cc;
display: flex;
flex-direction: column;
height: 155cqw;
font-family: var(--font);
color: var(--mk-ink);
background: var(--mk-bg);
text-align: left;
}
.mk-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 3.2cqw 5cqw;
}
.mk-logo {
font-family: var(--mk-head);
font-size: 3.1cqw;
font-weight: 700;
letter-spacing: -0.02em;
}
.mk-links {
display: flex;
gap: 2.6cqw;
}
.mk-links i {
width: 6.5cqw;
height: 0.9cqw;
border-radius: 1cqw;
background: currentColor;
opacity: 0.22;
}
.mk-btn {
display: inline-block;
width: fit-content;
padding: 1.5cqw 3.2cqw;
border-radius: var(--mk-rb);
font-size: 2.1cqw;
font-weight: 600;
line-height: 1.2;
color: var(--mk-on);
background: var(--mk-accent);
}
.mk-btn--sm {
padding: 1.1cqw 2.4cqw;
font-size: 1.8cqw;
}
.mk-btn--light {
color: var(--mk-accent);
background: var(--surface);
}
.mk-hero {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
align-items: center;
gap: 5cqw;
padding: 6cqw 5cqw 7cqw;
}
.mk-copy {
display: grid;
justify-items: start;
}
.mk-kicker {
font-size: 1.8cqw;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mk-accent);
}
.mk-h {
margin: 1.6cqw 0 2.6cqw;
font-family: var(--mk-head);
font-size: 6cqw;
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.035em;
}
.mk-line {
display: block;
width: 92%;
height: 1.1cqw;
margin-bottom: 1.3cqw;
border-radius: 1cqw;
background: currentColor;
opacity: 0.13;
}
.mk-line--short {
width: 62%;
}
.mk-copy .mk-btn {
margin-top: 2cqw;
}
.mk-art {
position: relative;
aspect-ratio: 1 / 1.08;
overflow: hidden;
border-radius: calc(var(--mk-r) * 2);
background: var(--mk-c1);
}
.mk-art i {
position: absolute;
display: block;
}
.mk-section {
padding: 4cqw 5cqw 6cqw;
}
.mk-h2 {
display: block;
font-family: var(--mk-head);
font-size: 3.8cqw;
font-weight: 600;
letter-spacing: -0.03em;
}
.mk-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3cqw;
margin-top: 3.2cqw;
}
.mk-card {
display: grid;
}
.mk-card__img {
aspect-ratio: 4 / 3;
margin-bottom: 2cqw;
border-radius: var(--mk-r);
background: var(--mk-c1);
}
.mk-card__img--2 { background: var(--mk-c2); }
.mk-card__img--3 { background: var(--mk-c3); }
.mk-card__title {
margin-bottom: 1.4cqw;
font-size: 2.2cqw;
font-weight: 600;
}
.mk-band {
display: grid;
justify-items: center;
margin: 0 5cqw;
padding: 6cqw;
border-radius: calc(var(--mk-r) * 2);
color: var(--mk-on);
background: var(--mk-accent);
}
.mk-band .mk-line {
width: 60%;
opacity: 0.45;
}
.mk-band .mk-line--short {
width: 40%;
}
.mk-band .mk-btn {
margin-top: 2cqw;
}
.mk-foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding: 4.5cqw 5cqw;
border-top: 1px solid var(--mk-line);
}
.mock--cafe {
--mk-bg: #f7f0e6;
--mk-ink: #3a2a1f;
--mk-accent: #9c4f25;
--mk-head: Georgia, "Times New Roman", serif;
--mk-c1: #d9a878;
--mk-c2: #e8cfae;
--mk-c3: #c98a55;
}
.mock--cafe .mk-h { font-weight: 400; font-style: italic; }
.mock--cafe .mk-art i:nth-child(1) { inset: 14%; border-radius: 50%; background: #f4eadf; box-shadow: 0 2cqw 4cqw rgb(58 42 31 / 0.25); }
.mock--cafe .mk-art i:nth-child(2) { inset: 26%; border-radius: 50%; background: var(--surface); }
.mock--cafe .mk-art i:nth-child(3) { inset: 32%; border-radius: 50%; background: radial-gradient(circle at 50% 46%, #f0d9bb 0 16%, transparent 17%), radial-gradient(circle at 44% 40%, #8a5a36, #4a2c18 70%); }
.mock--architecture {
--mk-bg: #f3f2ef;
--mk-ink: #111;
--mk-accent: #111;
--mk-r: 0px;
--mk-rb: 0px;
--mk-c1: #cfcac1;
--mk-c2: #9c968c;
--mk-c3: #e1ddd5;
}
.mock--architecture .mk-h { font-weight: 500; text-transform: uppercase; letter-spacing: -0.01em; font-size: 5.2cqw; }
.mock--architecture .mk-art { background: linear-gradient(180deg, #dfe4e7 0 62%, #cbc5ba 62%); }
.mock--architecture .mk-art i:nth-child(1) { left: 12%; bottom: 38%; width: 34%; height: 50%; background: linear-gradient(90deg, #2a2a2a, #4a4a4a); }
.mock--architecture .mk-art i:nth-child(2) { right: 8%; bottom: 38%; width: 50%; height: 30%; background: repeating-linear-gradient(90deg, #bdb6aa 0 3cqw, #a39c90 3cqw 3.4cqw); }
.mock--architecture .mk-art i:nth-child(3) { left: 30%; bottom: 66%; width: 52%; height: 3%; background: #111; }
.mock--clinic {
--mk-bg: #f2fbfa;
--mk-ink: #0f3b3a;
--mk-accent: #0a7468;
--mk-r: 1.8cqw;
--mk-c1: #c9eee7;
--mk-c2: #e1f4f1;
--mk-c3: #b5e4dc;
}
.mock--clinic .mk-art { background: linear-gradient(160deg, #dff5f1, #bfe9e2); }
.mock--clinic .mk-art i:nth-child(1) { inset: 16% 12% 22% 18%; border-radius: 46% 54% 50% 50% / 52% 44% 56% 48%; background: var(--surface); box-shadow: 0 2cqw 5cqw rgb(15 59 58 / 0.12); }
.mock--clinic .mk-art i:nth-child(2) { top: 34%; left: 38%; width: 22%; aspect-ratio: 1; border-radius: 22%; background: linear-gradient(#fff, #fff) center / 46% 14% no-repeat, linear-gradient(#fff, #fff) center / 14% 46% no-repeat, #12a594; }
.mock--clinic .mk-art i:nth-child(3) { right: 12%; bottom: 14%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: #12a594; opacity: 0.35; }
.mock--hotel {
--mk-bg: #0f1c2a;
--mk-ink: #f1e8d8;
--mk-accent: #c8a76a;
--mk-on: #0f1c2a;
--mk-line: rgb(255 255 255 / 0.1);
--mk-head: Georgia, "Times New Roman", serif;
--mk-r: 0.4cqw;
--mk-rb: 0.4cqw;
--mk-c1: #2b4a6b;
--mk-c2: #6b5b8e;
--mk-c3: #e98b6d;
}
.mock--hotel .mk-h { font-weight: 400; }
.mock--hotel .mk-art { border-radius: 50% 50% 0.4cqw 0.4cqw / 34% 34% 0.4cqw 0.4cqw; background: linear-gradient(180deg, #f5b98a 0%, #e98b6d 38%, #6b5b8e 72%, #1f3550 100%); }
.mock--hotel .mk-art i:nth-child(1) { left: 0; right: 0; bottom: 0; height: 32%; background: linear-gradient(#2b4a6b, #142a40); }
.mock--hotel .mk-art i:nth-child(2) { left: 38%; top: 46%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #ffd9a0; }
.mock--hotel .mk-art i:nth-child(3) { left: 20%; right: 20%; bottom: 26%; height: 1.2%; background: rgb(255 217 160 / 0.7); }
.mock--saas {
--mk-bg: #0b0c10;
--mk-ink: #f5f5f7;
--mk-accent: #355de0;
--mk-line: rgb(255 255 255 / 0.08);
--mk-r: 1.4cqw;
--mk-c1: #15171e;
--mk-c2: #1b2030;
--mk-c3: #232a40;
}
.mock--saas .mk-kicker { color: #8fa8ff; }
.mock--saas .mk-art { border: 1px solid #262a35; background: #15171e; }
.mock--saas .mk-art i:nth-child(1) { left: 8%; right: 8%; bottom: 10%; height: 52%; background: linear-gradient(to top, rgb(79 124 255 / 0.05), rgb(79 124 255 / 0.55)); clip-path: polygon(0 100%, 0 70%, 18% 58%, 34% 66%, 52% 34%, 70% 44%, 86% 16%, 100% 24%, 100% 100%); }
.mock--saas .mk-art i:nth-child(2) { left: 8%; top: 10%; width: 40%; height: 7%; border-radius: 1cqw; background: #262a35; }
.mock--saas .mk-art i:nth-child(3) { right: 8%; top: 10%; width: 18%; height: 7%; border-radius: 1cqw; background: #4f7cff; }
.mock--shop {
--mk-bg: #fff;
--mk-ink: #151515;
--mk-accent: #d63a52;
--mk-r: 1cqw;
--mk-c1: #f3e9e4;
--mk-c2: #f6efe0;
--mk-c3: #e9eef2;
}
.mock--shop .mk-art i:nth-child(1) { left: 37%; bottom: 18%; width: 26%; height: 52%; border-radius: 3cqw 3cqw 1.6cqw 1.6cqw; background: linear-gradient(#f9d7cf, #e7a597); }
.mock--shop .mk-art i:nth-child(2) { left: 43%; bottom: 70%; width: 14%; height: 9%; border-radius: 0.8cqw; background: #2b2b2b; }
.mock--shop .mk-art i:nth-child(3) { left: 28%; bottom: 14%; width: 44%; height: 5%; border-radius: 50%; background: rgb(0 0 0 / 0.12); filter: blur(0.6cqw); }
.mock--portfolio {
--mk-c1: #141414;
--mk-c2: #ffd2c0;
--mk-c3: #e9e9e9;
}
.mock--portfolio .mk-art i:nth-child(1) { left: 18%; top: 18%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: #ff5a1f; }
.mock--portfolio .mk-art i:nth-child(2) { right: 14%; bottom: 16%; width: 34%; aspect-ratio: 1; background: var(--surface); transform: rotate(12deg); }
.mock--portfolio .mk-art i:nth-child(3) { left: 10%; right: 10%; bottom: 46%; height: 1.2%; background: var(--surface); opacity: 0.5; }
.mock--law {
--mk-bg: #f6f3ee;
--mk-ink: #1e2a38;
--mk-accent: #8a6a3d;
--mk-head: Georgia, "Times New Roman", serif;
--mk-r: 0.6cqw;
--mk-rb: 0.6cqw;
--mk-c1: #e8e0d2;
--mk-c2: #d6c9b3;
--mk-c3: #cbd2da;
}
.mock--law .mk-h { font-weight: 400; }
.mock--law .mk-art { background: linear-gradient(160deg, #e8e0d2, #d6c9b3); }
.mock--law .mk-art i:nth-child(1) { left: 16%; right: 16%; bottom: 16%; height: 46%; background: repeating-linear-gradient(90deg, #f6f3ee 0 6cqw, transparent 6cqw 9.5cqw); }
.mock--law .mk-art i:nth-child(2) { left: 12%; right: 12%; top: 18%; height: 18%; background: #f6f3ee; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mock--law .mk-art i:nth-child(3) { left: 12%; right: 12%; bottom: 10%; height: 6%; background: #f6f3ee; }
.filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.filter {
display: inline-flex;
align-items: center;
gap: 0.45rem;
height: 40px;
padding: 0 1rem;
border: 1px solid var(--line-2);
border-radius: 999px;
background: var(--surface);
font-size: 0.9rem;
font-weight: 500;
color: var(--ink-soft);
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.filter span {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--faint);
}
.filter:hover {
border-color: var(--line-2);
}
.filter[aria-pressed="true"] {
color: var(--brand-ink);
background: var(--brand-fill);
border-color: transparent;
}
.filter[aria-pressed="true"] span {
color: rgb(255 255 255 / 0.65);
}
.service-grid {
display: grid;
gap: 1.1rem;
}
.service {
position: relative;
overflow: hidden;
padding: 1.4rem 1.4rem 2rem;
border: 1px solid var(--line);
border-radius: 24px;
background: var(--surface);
text-align: center;
transition: border-color 0.3s, transform 0.4s var(--ease), box-shadow 0.4s var(--ease), opacity 0.8s var(--ease);
}
.service::before {
content: "";
position: absolute;
inset: 0;
background: none;
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
}
.service:hover {
border-color: var(--brand-200);
box-shadow: var(--shadow);
}
.service:hover::before {
opacity: 1;
}
.service__art {
position: relative;
display: grid;
place-items: center;
height: 190px;
margin-bottom: 1.6rem;
border: 1px solid var(--line);
border-radius: 18px;
background:
radial-gradient(circle, rgb(0 0 0 / 0.09) 1px, transparent 1.2px) 0 0 / 16px 16px,
var(--bg-soft);
}
.service__index {
font-family: var(--mono);
font-size: 0.75rem;
font-weight: 600;
color: var(--brand-600);
}
.service__title {
margin-top: 0.4rem;
font-size: 1.45rem;
font-weight: 600;
letter-spacing: -0.035em;
}
.service__text {
max-width: 30ch;
margin: 0.5rem auto 0;
color: var(--muted);
}
.ill {
position: relative;
display: grid;
gap: 8px;
width: 220px;
padding: 12px;
border: 1px solid var(--line-2);
border-radius: 12px;
background: var(--surface);
box-shadow: 0 8px 9px -4px rgb(0 0 0 / 0.4);
transition: transform 0.5s var(--ease);
}
.service:hover .ill {
transform: translateY(-4px) rotate(-1deg);
}
.ill b,
.ill i,
.ill u {
display: block;
}
.ill__bar {
width: 40%;
height: 8px;
border-radius: 4px;
background: #e8e8e8;
}
.ill__hero {
position: relative;
height: 50px;
border-radius: 6px;
background: var(--brand-100);
}
.ill__handles {
position: absolute;
inset: -4px;
border: 1.5px solid var(--brand);
}
.ill__handles i {
position: absolute;
width: 7px;
height: 7px;
border: 1.5px solid var(--brand);
background: var(--surface);
}
.ill__handles i:nth-child(1) { top: -4px; left: -4px; }
.ill__handles i:nth-child(2) { top: -4px; right: -4px; }
.ill__handles i:nth-child(3) { bottom: -4px; left: -4px; }
.ill__handles i:nth-child(4) { bottom: -4px; right: -4px; }
.ill .ill__row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.ill__row i {
height: 26px;
border-radius: 5px;
background: #f0f0f0;
}
.ill--code {
gap: 7px;
border-color: #262626;
background: #161616;
}
.ill .ill__tabs {
display: flex;
gap: 6px;
margin-bottom: 4px;
}
.ill__tabs i {
width: 44px;
height: 8px;
border-radius: 4px;
background: #2c2c2c;
}
.ill__tabs i:first-child {
background: #3a3a3a;
}
.ill .ill__ln {
display: flex;
align-items: center;
gap: 6px;
height: 8px;
}
.ill__ln.i1 { padding-left: 14px; }
.ill__ln.i2 { padding-left: 28px; }
.ill__ln i {
height: 7px;
border-radius: 4px;
background: #4a4a4a;
}
.ill__ln i.w1 { width: 22px; }
.ill__ln i.w2 { width: 38px; }
.ill__ln i.w3 { width: 60px; }
.ill__ln i.o { background: var(--brand); }
.ill__ln .caret-s {
width: 2px;
height: 11px;
border-radius: 0;
background: var(--brand);
animation: blink 1.1s steps(1, end) infinite;
}
.ill--corp {
width: 200px;
height: 132px;
padding: 0;
border: 0;
background: none;
box-shadow: none;
}
.ill .ill__page {
position: absolute;
inset: 0;
display: grid;
align-content: start;
gap: 7px;
padding: 10px;
border: 1px solid var(--line-2);
border-radius: 10px;
background: var(--surface);
box-shadow: 0 8px 9px -4px rgb(0 0 0 / 0.4);
}
.ill .ill__page--back {
background: #f6f6f6;
transform: rotate(-7deg) translate(-14px, 6px);
}
.ill__nav {
height: 7px;
border-radius: 4px;
background: #e8e8e8;
}
.ill__banner {
height: 42px;
border-radius: 6px;
background: linear-gradient(120deg, var(--brand), var(--brand-300));
}
.ill .ill__cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.ill__cols u {
height: 30px;
border-radius: 5px;
background: #f0f0f0;
}
.ill--app {
grid-template-columns: 76px 1fr;
align-items: end;
}
.ill .ill__panel {
display: grid;
gap: 9px;
padding: 6px;
border-radius: 8px;
background: var(--bg-soft);
}
.ill .ill__toggle {
position: relative;
transition: background-color 0.4s;
width: 30px;
height: 16px;
border-radius: 99px;
background: #dcdcdc;
}
.ill__toggle::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--surface);
transition: transform 0.4s var(--ease);
}
.ill .ill__toggle.on {
background: var(--brand);
}
.ill__toggle.on::after {
transform: translateX(14px);
}
.ill .ill__chart {
display: flex;
align-items: flex-end;
gap: 6px;
height: 80px;
padding: 0 4px;
border-bottom: 1px solid var(--line-2);
}
.ill__chart i {
flex: 1;
border-radius: 4px 4px 0 0;
background: #e6e6e6;
transition: height 0.6s var(--ease);
}
.ill__chart i:nth-child(1) { height: 34%; }
.ill__chart i:nth-child(2) { height: 58%; }
.ill__chart i:nth-child(3) { height: 44%; background: var(--brand-300); }
.ill__chart i:nth-child(4) { height: 76%; }
.ill__chart i:nth-child(5) { height: 92%; background: var(--brand); }
.service:hover .ill__chart i:nth-child(1) { height: 52%; }
.service:hover .ill__chart i:nth-child(2) { height: 40%; }
.service:hover .ill__chart i:nth-child(4) { height: 88%; }
.principles {
display: grid;
justify-items: center;
margin-top: clamp(3.5rem, 7vw, 5rem);
text-align: center;
}
.principles__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.55rem;
max-width: 52rem;
margin-top: 1.4rem;
}
.principles__list li {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.6rem 1rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
font-size: 0.95rem;
font-weight: 500;
}
.principles__list .icon {
width: 16px;
height: 16px;
color: var(--brand);
}
.contact {
display: grid;
gap: 1.5rem;
}
.contact__side {
display: grid;
align-content: start;
gap: 1rem;
}
.bizcard {
position: relative;
overflow: hidden;
padding: 1.5rem;
border: 1px solid var(--line);
border-radius: 24px;
background: var(--surface);
box-shadow: var(--shadow);
transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transition: transform 0.5s var(--ease), opacity 0.8s var(--ease);
}
.bizcard.is-tilting {
transition: transform 0.12s linear;
}
.bizcard__glow {
position: absolute;
top: -130px;
right: -90px;
width: 280px;
height: 280px;
border-radius: 50%;
background: none;
pointer-events: none;
}
.bizcard__top {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.bizcard__brand {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.bizcard__brand .logo__svg {
height: 18px;
}
.bizcard__label {
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
text-transform: uppercase;
color: #5c5c5c;
}
.bizcard__person {
position: relative;
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1.75rem;
}
.avatar {
display: grid;
place-items: center;
flex: none;
width: 72px;
height: 72px;
overflow: hidden;
border-radius: 50%;
box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line-2);
background: var(--ink);
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar__initials {
font-size: 1.4rem;
font-weight: 600;
letter-spacing: -0.02em;
color: #fff;
}
.bizcard__who {
display: grid;
}
.bizcard__name {
font-size: 1.35rem;
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.2;
}
.bizcard__role {
margin-top: 0.15rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--brand-600);
}
.bizcard__bio {
position: relative;
margin-top: 1rem;
font-size: 0.93rem;
color: var(--muted);
}
.bizcard__lines {
position: relative;
display: grid;
gap: 0.35rem;
margin-top: 1rem;
}
.bizcard__lines a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.93rem;
color: var(--ink-soft);
text-decoration: none;
overflow-wrap: anywhere;
}
.bizcard__lines a:hover {
color: var(--brand-600);
}
.bizcard__lines .icon {
width: 15px;
height: 15px;
color: var(--brand);
}
.bizcard__foot {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: 1.4rem;
padding-top: 1.1rem;
border-top: 1px dashed var(--line-2);
}
.bizcard__social {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.bizcard__social .icon-btn {
width: 36px;
height: 36px;
}
.channels {
display: grid;
gap: 0.6rem;
}
.channel {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1rem;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--surface);
color: inherit;
text-decoration: none;
transition: border-color 0.2s, transform 0.25s var(--ease);
}
a.channel:hover {
border-color: var(--brand-200);
transform: translateY(-1px);
}
.channel__icon {
display: grid;
place-items: center;
flex: none;
width: 38px;
height: 38px;
border-radius: 11px;
color: var(--brand-600);
background: var(--brand-50);
}
.channel__icon .icon {
width: 17px;
height: 17px;
}
.channel__body {
display: grid;
min-width: 0;
}
.channel__label {
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--faint);
}
.channel__value {
font-weight: 600;
overflow-wrap: anywhere;
}
.channel__go {
width: 16px;
height: 16px;
margin-inline-start: auto;
color: var(--faint);
}
.form {
padding: clamp(1.25rem, 3.5vw, 2.25rem);
border: 1px solid var(--line);
border-radius: 24px;
background: var(--surface);
box-shadow: var(--shadow);
}
.form__head {
margin-bottom: 1.25rem;
}
.hp-field {
position: absolute;
left: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
opacity: 0;
pointer-events: none;
}
.form__grid {
display: grid;
gap: 1rem;
}
.field {
min-width: 0;
}
.field__label {
display: block;
margin-bottom: 0.4rem;
font-size: 0.86rem;
font-weight: 600;
}
.field__req {
color: var(--brand-600);
}
.field__opt {
font-weight: 400;
color: var(--faint);
}
.field__input {
display: block;
width: 100%;
min-height: 48px;
padding: 0.65rem 0.9rem;
border: 1px solid var(--line-2);
border-radius: 12px;
background: var(--bg-soft);
font-size: 1rem;
line-height: 1.4;
transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.field__input:hover {
border-color: #cfcfcf;
}
.field__input:focus {
outline: none;
border-color: var(--brand);
background: var(--surface);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
}
.field__input[aria-invalid="true"] {
border-color: #e5484d;
}
.field__textarea {
min-height: 140px;
resize: vertical;
}
.field__select {
position: relative;
display: block;
}
.field__select select {
appearance: none;
padding-inline-end: 2.5rem;
cursor: pointer;
}
.field__chevron {
position: absolute;
top: 50%;
right: 0.9rem;
width: 16px;
height: 16px;
color: var(--faint);
transform: translateY(-50%) rotate(90deg);
pointer-events: none;
}
.field__error {
margin-top: 0.35rem;
font-size: 0.82rem;
font-weight: 600;
color: #d92d33;
}
.field__error:empty {
display: none;
}
.check {
position: relative;
display: grid;
grid-template-columns: 20px 1fr;
gap: 0.7rem;
align-items: start;
font-size: 0.88rem;
line-height: 1.5;
color: var(--muted);
cursor: pointer;
}
.check__input {
position: absolute;
width: 20px;
height: 20px;
margin: 0;
opacity: 0;
cursor: pointer;
}
.check__box {
display: grid;
place-items: center;
width: 20px;
height: 20px;
margin-top: 1px;
border: 1px solid #cfcfcf;
border-radius: 6px;
background: var(--surface);
transition: background-color 0.2s, border-color 0.2s;
}
.check__box .icon {
width: 13px;
height: 13px;
color: #fff;
stroke-width: 3;
opacity: 0;
}
.check__input:checked + .check__box {
background: var(--brand-600);
border-color: var(--brand-600);
}
.check__input:checked + .check__box .icon {
opacity: 1;
}
.check__input:focus-visible + .check__box {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.check__input[aria-invalid="true"] + .check__box {
border-color: #e5484d;
}
.check__text a {
color: var(--ink);
}
.form__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.25rem;
margin-top: 1.5rem;
}
.form__foot .btn {
width: 100%;
}
.form-status {
font-size: 0.92rem;
font-weight: 600;
}
.form-status:empty {
display: none;
}
.form-status.is-success {
color: #15803d;
}
.form-status.is-error {
color: #d92d33;
}
.glance {
display: grid;
gap: 0.9rem;
}
.glance__item {
display: grid;
justify-items: center;
padding: 1.6rem 1.25rem;
border: 1px solid var(--line);
border-radius: 22px;
background: var(--surface);
text-align: center;
}
.glance__icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
color: var(--brand-600);
background: var(--brand-50);
}
.glance__icon .icon {
width: 18px;
height: 18px;
}
.glance__num {
margin-top: 1rem;
font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.035em;
font-variant-numeric: tabular-nums;
}
.glance__num span {
margin-inline-start: 0.4rem;
font-size: 1rem;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--muted);
}
.glance__text {
max-width: 26ch;
margin-top: 0.75rem;
font-size: 0.92rem;
color: var(--muted);
}
.journey {
display: grid;
justify-items: center;
margin-top: clamp(3.5rem, 7vw, 5rem);
text-align: center;
}
.journey__steps {
display: grid;
gap: 1.75rem;
width: 100%;
max-width: 58rem;
margin-top: 1.75rem;
}
.journey__step {
position: relative;
display: grid;
justify-items: center;
gap: 0.3rem;
}
.journey__icon {
display: grid;
place-items: center;
width: 54px;
height: 54px;
margin-bottom: 0.5rem;
border: 1px solid var(--line-2);
border-radius: 50%;
background: var(--surface);
}
.journey__icon .icon {
width: 20px;
height: 20px;
}
.journey__step:last-child .journey__icon {
border-color: var(--brand);
color: var(--brand-600);
}
.journey__step b {
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -0.02em;
}
.journey__step span:last-child {
font-size: 0.9rem;
color: var(--muted);
}
.note {
display: flex;
gap: 0.85rem;
align-items: flex-start;
max-width: 46rem;
margin: clamp(3rem, 6vw, 4rem) auto 0;
padding: 1.1rem 1.25rem;
border: 1px solid var(--brand-100);
border-radius: 18px;
background: var(--brand-50);
font-size: 0.95rem;
color: var(--ink-soft);
}
.note__icon {
flex: none;
}
.note__icon .icon {
width: 20px;
height: 20px;
margin-top: 2px;
color: var(--brand-600);
}
.details {
display: grid;
justify-items: center;
max-width: 46rem;
margin: clamp(3.5rem, 7vw, 5rem) auto 0;
}
.details__item {
width: 100%;
border-bottom: 1px solid var(--line);
}
.details__item:first-of-type {
margin-top: 1.25rem;
border-top: 1px solid var(--line);
}
.details__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.15rem 0.25rem;
font-size: 1.04rem;
font-weight: 600;
letter-spacing: -0.015em;
list-style: none;
cursor: pointer;
}
.details__item summary::-webkit-details-marker {
display: none;
}
.details__icon {
width: 18px;
height: 18px;
color: var(--muted);
transition: transform 0.3s var(--ease);
}
.details__item[open] .details__icon {
color: var(--brand-600);
transform: rotate(45deg);
}
.details__body {
padding: 0 0.25rem 1.25rem;
color: var(--muted);
}
.details__body ul {
padding-inline-start: 1.1rem;
}
.details__body li + li {
margin-top: 0.45rem;
}
.details__body p + p {
margin-top: 0.6rem;
}
.details__body a {
color: var(--ink);
}
.details__body .rights {
display: grid;
gap: 0.5rem;
padding-inline-start: 0;
}
.details__body .rights li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin: 0;
}
.rights .icon {
width: 16px;
height: 16px;
margin-top: 4px;
color: var(--brand);
}
.details__updated {
margin-top: 1.5rem;
font-family: var(--mono);
font-size: 0.72rem;
color: var(--faint);
}
.meet {
padding-top: 0;
}
.meet__stage {
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
justify-items: center;
max-width: 52rem;
margin: 0 auto;
padding: clamp(3.5rem, 7vw, 5rem) clamp(1rem, 4vw, 3rem) clamp(2.5rem, 5vw, 3.5rem);
border: 1px solid var(--line);
border-radius: 32px;
background: var(--bg-soft);
}
.meet__stage .canvas {
-webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 45%, #000 30%, transparent 85%);
mask-image: radial-gradient(ellipse 75% 80% at 50% 45%, #000 30%, transparent 85%);
}
.meet__card {
position: relative;
width: min(100%, 27rem);
}
.meet__card .bizcard {
text-align: start;
}
.meet__size {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.25rem;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.04em;
color: var(--faint);
}
.meet__size::before,
.meet__size::after {
content: "";
width: 2.25rem;
height: 1px;
background: linear-gradient(90deg, transparent, var(--line-2));
}
.meet__size::after {
transform: scaleX(-1);
}
.ill__handles {
transition: transform 0.5s var(--ease), border-color 0.3s;
}
.ill__handles i {
transition: transform 0.4s var(--ease);
}
.ill__hero {
transition: background-color 0.4s;
}
.ill__row i {
transition: transform 0.45s var(--ease), background-color 0.3s;
}
.ill__ln i {
transform-origin: 0 50%;
transition: transform 0.5s var(--ease);
}
.ill__tabs i {
transition: background-color 0.3s, transform 0.4s var(--ease);
}
.ill .ill__page--back {
transition: transform 0.6s var(--ease);
}
.ill .ill__page {
transition: transform 0.6s var(--ease);
}
.ill__banner {
background-size: 200% 100%;
transition: background-position 0.9s var(--ease);
}
.ill__chart i {
transform-origin: 50% 100%;
}
@media (hover: hover) and (pointer: fine) {
.service:hover .ill__handles {
transform: scale(1.04);
}
.service:hover .ill__handles i:nth-child(odd) {
transform: translate(-2px, -2px);
}
.service:hover .ill__handles i:nth-child(even) {
transform: translate(2px, 2px);
}
.service:hover .ill__hero {
background: var(--brand-200);
}
.service:hover .ill__row i:nth-child(1) { transform: translateY(-3px); }
.service:hover .ill__row i:nth-child(2) { transform: translateY(-3px); transition-delay: 0.06s; }
.service:hover .ill__row i:nth-child(3) { transform: translateY(-3px); transition-delay: 0.12s; }
.service:hover .ill__ln i.w1 { transform: scaleX(1.35); }
.service:hover .ill__ln i.w2 { transform: scaleX(0.75); }
.service:hover .ill__ln i.w3 { transform: scaleX(1.12); }
.service:hover .ill__tabs i:first-child {
transform: translateY(-1px);
}
.service:hover .ill__page--back {
transform: rotate(-11deg) translate(-22px, 8px);
}
.service:hover .ill--corp .ill__page:not(.ill__page--back) {
transform: rotate(2deg) translate(6px, -4px);
}
.service:hover .ill__banner {
background-position: 100% 0;
}
.service:hover .ill .ill__toggle {
background: var(--brand);
}
.service:hover .ill .ill__toggle.on {
background: #dcdcdc;
}
.service:hover .ill__toggle::after {
transform: translateX(14px);
}
.service:hover .ill__toggle.on::after {
transform: none;
}
}
@media (min-width: 560px) {
.form__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.field--full {
grid-column: 1 / -1;
}
.form__foot .btn {
width: auto;
}
.glance {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.details__body .rights {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 720px) {
.works--home,
.works--grid,
.service-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.works--grid > .work,
.works--home.works--n2 > .work {
flex: 0 0 calc((100% - var(--works-gap)) / 2);
}
.works--home > .work {
flex: 0 0 calc((100% - 2 * var(--works-gap)) / 3);
}
.works--home.works--n1 > .work {
flex-basis: min(100%, 36rem);
}
.service-grid > .service {
flex: 0 0 calc((100% - 1.1rem) / 2);
}
.journey__steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.journey__step:not(:last-child)::after {
content: "";
position: absolute;
top: 27px;
left: calc(50% + 40px);
width: calc(100% - 80px + 1.75rem);
border-top: 1.5px dashed var(--line-2);
}
}
@media (min-width: 900px) {
.contact {
grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
align-items: stretch;
gap: 1.75rem;
}
.contact__main {
display: grid;
}
.contact__main .form {
display: flex;
flex-direction: column;
}
.contact__main .form__grid {
flex: 1;
grid-template-rows: auto auto 1fr auto;
}
.contact__main .field--grow {
display: grid;
grid-template-rows: auto 1fr auto;
}
.contact__main .field--grow .field__textarea {
height: 100%;
}
}
@media (min-width: 1040px) {
.glance {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 719px) {
.works--home {
display: flex;
gap: 0.9rem;
margin-inline: calc(-1 * var(--gutter));
padding: 0.5rem var(--gutter) 1.25rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
scrollbar-width: none;
}
.works--home::-webkit-scrollbar {
display: none;
}
.works--home > .work {
flex: 0 0 86%;
scroll-snap-align: start;
}
.reveal-ready .works--home > [data-reveal]:not(.is-in) {
opacity: 1;
transform: none;
}
.works--home .work__meta {
margin-top: 1rem;
}
.works--grid {
gap: 3.25rem;
}
.work__meta {
margin-top: 1.1rem;
}
.work__title {
font-size: 1.22rem;
}
.section-head {
margin-bottom: 2.25rem;
}
.meet__stage {
padding: 2.75rem 1rem 2rem;
}
}
@media (max-width: 719px), (pointer: coarse) and (max-width: 1023px) {
.filters {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none !important;
}
.reveal-ready [data-reveal]:not(.is-in),
.lines-ready [data-lines]:not(.is-in) .ln > span {
opacity: 1;
transform: none;
}
.u-mark::after {
clip-path: inset(-20% 0 -20% 0) !important;
animation: none !important;
}
.u-wave path {
stroke-dashoffset: 0 !important;
animation: none !important;
}
}
@media print {
.nav,
.cta-band,
.form,
.to-top,
.toast,
.cursor-pill,
.copy,
.toc,
.footer__up {
display: none !important;
}
[data-reveal],
.ln > span {
opacity: 1 !important;
transform: none !important;
}
}
.u-ltr {
direction: ltr;
unicode-bidi: isolate;
}
[dir="rtl"] .u-ltr {
display: inline-block;
}
[dir="rtl"] :is(.btn__icon, .link-arrow .icon, .nav__cta-icon, .crumbs__sep, .navpop__more .icon, .announce__arrow, .welcome__arrow, .nfp__arrow, .qcard__arrow, .channel__go, .card__link .icon) {
transform: scaleX(-1);
}
[dir="rtl"] body {
text-align: start;
}
[dir="rtl"] .field__chevron {
right: auto;
left: 0.9rem;
}
:where(.section, .container, .card, .pg-card) :where(div, section, article, aside, nav, ul, ol, li, form, fieldset, header, footer, figure, a, button, label, p) {
min-width: 0;
}
:where(h1, h2, h3, h4, p, li, dd, dt, label, .btn, .pill, .u-mark) {
overflow-wrap: break-word;
}
@media (max-width: 600px) {
:where(h1, h2, h3, .u-mark, .pg-mark) { overflow-wrap: anywhere; hyphens: auto; }
.btn { white-space: normal; text-align: center; }
.pp__head { flex-wrap: wrap; }
}
@media (max-width: 600px) {
[data-lines] .ln, [data-lines] .ln > span { max-width: 100%; overflow-wrap: anywhere; }
html .dm-more__title { font-size: clamp(1.5rem, 6.4vw, 2rem); }
html [data-lines] .ln { max-width: 100%; }
}
.is-offscreen,
.is-offscreen::before,
.is-offscreen::after,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after {
animation-play-state: paused !important;
}

/* css/front/announce.css */

:root {
--announce-h: 40px;
}
@media (max-width: 719px) {
:root {
--announce-h: 56px;
}
}
html.has-announce .nav {
top: var(--announce-vis, var(--announce-h));
}
html:not([data-announce-closed]):has(> body > .announce) .nav {
top: var(--announce-vis, var(--announce-h));
}
html[data-announce-closed] .announce:not(.is-shown) {
display: none;
}
@supports (animation-timeline: scroll()) {
html:not(.has-announce):not([data-announce-closed]):has(> body > .announce) .nav {
animation: announce-nav linear both;
animation-timeline: scroll(root block);
animation-range: 0 var(--announce-h);
}
}
@keyframes announce-nav {
from { top: var(--announce-h); }
to { top: 0; }
}
html.announce-closing .nav {
transition: top 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.announce {
position: relative;
z-index: 1;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
min-height: var(--announce-h);
color: var(--text);
background: var(--surface-2);
border-bottom: 1px solid var(--line);
font-size: 0.8125rem;
line-height: 1.4;
}
.announce::before {
content: "";
position: absolute;
inset: auto 0 0;
z-index: -1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--brand, #ff5a1f) 30%, var(--accent, #ffb347) 70%, transparent);
pointer-events: none;
}
.announce::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
z-index: -1;
width: 40%;
background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--brand) 6%, transparent) 45%, color-mix(in srgb, var(--brand) 12%, transparent) 50%, color-mix(in srgb, var(--brand) 6%, transparent) 55%, transparent 100%);
transform: translateX(-120%);
animation: announce-shimmer 7s 1.2s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
pointer-events: none;
}
.announce__inner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: calc(var(--container, 72rem) + 2 * var(--gutter, 1.25rem));
margin: 0 auto;
padding: 0.5rem calc(var(--gutter, 1.25rem) + 2.25rem);
}
.announce__text {
margin: 0;
text-align: center;
text-wrap: balance;
overflow-wrap: anywhere;
}
.announce__dot {
position: relative;
display: inline-block;
width: 7px;
height: 7px;
margin-right: 0.6rem;
border-radius: 50%;
vertical-align: 0.08em;
background: var(--brand, #ff5a1f);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand, #ff5a1f) 55%, transparent);
animation: announce-pulse 2.4s ease-out infinite;
}
.announce__msg {
color: var(--text-2);
}
.announce__link {
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin-left: 0.65rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--brand) 50%, transparent);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color 0.2s, text-decoration-color 0.2s;
}
.announce__link:hover {
color: var(--brand-600);
text-decoration-color: currentColor;
}
.announce__arrow {
width: 13px;
height: 13px;
flex: none;
transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.announce__link:hover .announce__arrow {
transform: translateX(3px);
}
.announce__sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.announce__close {
position: absolute;
top: 50%;
right: var(--gutter, 1.25rem);
display: grid;
place-items: center;
width: 30px;
height: 30px;
margin-top: -15px;
padding: 0;
border: 0;
border-radius: 50%;
color: var(--text-2);
background: transparent;
cursor: pointer;
transition: color 0.2s, background-color 0.2s;
}
.announce__close[hidden] {
display: none;
}
.announce__close:hover {
color: var(--text);
background: var(--glass-2, var(--surface-3));
}
.announce__x {
width: 15px;
height: 15px;
}
.announce__link:focus-visible,
.announce__close:focus-visible {
outline: 2px solid var(--brand, #ff5a1f);
outline-offset: 2px;
border-radius: 6px;
}
.announce__close:focus-visible {
border-radius: 50%;
}
.announce.is-closing {
min-height: 0;
height: var(--announce-close-from, var(--announce-h));
transition: height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s;
}
.announce.is-closing.is-collapsed {
height: 0;
opacity: 0;
}
@media (max-width: 719px) {
.announce {
font-size: 0.78rem;
}
.announce__inner {
padding: 0.55rem calc(var(--gutter, 1.25rem) + 2rem) 0.55rem var(--gutter, 1.25rem);
}
.announce__text {
text-align: left;
text-wrap: pretty;
}
.announce__close {
right: calc(var(--gutter, 1.25rem) - 0.5rem);
width: 36px;
height: 36px;
margin-top: -18px;
}
}
@keyframes announce-shimmer {
0% { transform: translateX(-120%); }
38%, 100% { transform: translateX(320%); }
}
@keyframes announce-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand, #ff5a1f) 55%, transparent); }
70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
.mnt-pill {
position: fixed;
left: 16px;
bottom: max(16px, env(safe-area-inset-bottom));
z-index: 60;
display: flex;
align-items: center;
gap: 0.6rem;
max-width: calc(100% - 96px);
padding: 0.4rem 0.4rem 0.4rem 0.85rem;
border: 1px solid rgb(255 255 255 / 0.08);
border-radius: 999px;
color: #fff;
background: var(--band-from, #141414);
box-shadow: 0 11px 12px -5px rgb(0 0 0 / 0.55);
font-size: 0.78rem;
line-height: 1.3;
}
.mnt-pill__dot {
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: #f59e0b;
box-shadow: 0 0 0 0 rgb(245 158 11 / 0.6);
animation: mnt-pill-pulse 2s ease-out infinite;
}
.mnt-pill__text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mnt-pill__text strong {
font-weight: 600;
}
.mnt-pill__more {
color: rgb(255 255 255 / 0.72);
}
.mnt-pill__link {
display: inline-flex;
flex: none;
align-items: center;
gap: 0.25rem;
padding: 0.35rem 0.7rem;
border-radius: 999px;
color: var(--ink, #141414);
background: #fff;
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s, color 0.2s;
}
.mnt-pill__link:hover {
color: #fff;
background: var(--brand, #ff5a1f);
}
.mnt-pill__link:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.mnt-pill__icon {
width: 13px;
height: 13px;
}
@media (max-width: 719px) {
.mnt-pill__more {
display: none;
}
}
@keyframes mnt-pill-pulse {
0% { box-shadow: 0 0 0 0 rgb(245 158 11 / 0.6); }
70%, 100% { box-shadow: 0 0 0 7px rgb(245 158 11 / 0); }
}
.mnt {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
overflow-x: hidden;
color: var(--ink, #141414);
background: #fff;
}
.mnt-canvas {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(52% 46% at 50% 0%, color-mix(in srgb, var(--brand, #ff5a1f) 16%, transparent) 0%, transparent 72%),
linear-gradient(to right, rgb(20 20 20 / 0.055) 1px, transparent 1px) 0 0 / 64px 64px,
linear-gradient(to bottom, rgb(20 20 20 / 0.055) 1px, transparent 1px) 0 0 / 64px 64px;
-webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 34%, #000 36%, transparent 82%);
mask-image: radial-gradient(ellipse 78% 72% at 50% 34%, #000 36%, transparent 82%);
}
.mnt-main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 48rem;
margin: 0 auto;
padding: clamp(3rem, 9vh, 6.5rem) 1.25rem 2rem;
text-align: center;
}
.mnt-logo {
display: inline-flex;
margin-bottom: clamp(2.25rem, 7vh, 4rem);
color: var(--ink, #141414);
border-radius: 8px;
}
.mnt-logo__svg {
display: block;
width: 108px;
height: auto;
}
.mnt-chip {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin: 0;
padding: 0.42rem 0.85rem;
border: 1px solid var(--line, #ececec);
border-radius: 999px;
background: rgb(255 255 255 / 0.85);
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted, #6b6b6b);
}
.mnt-chip__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--brand, #ff5a1f);
animation: announce-pulse 2.4s ease-out infinite;
}
.mnt-title {
margin: 2.4rem 0 0;
font-size: clamp(2.1rem, 1.15rem + 3.9vw, 4.2rem);
font-weight: 600;
line-height: 1.06;
letter-spacing: -0.048em;
text-wrap: balance;
}
.mnt-sel {
position: relative;
display: inline-block;
padding: 0.06em 0.18em 0.12em;
}
.mnt-sel__frame {
position: absolute;
inset: 0;
border: 2px solid var(--brand, #ff5a1f);
pointer-events: none;
animation: mnt-frame 0.6s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.mnt-sel__frame i {
position: absolute;
width: 11px;
height: 11px;
border: 2px solid var(--brand, #ff5a1f);
background: #fff;
animation: mnt-pop 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.mnt-sel__frame i:nth-child(1) { top: -6px; left: -6px; animation-delay: 0.55s; }
.mnt-sel__frame i:nth-child(2) { top: -6px; right: -6px; animation-delay: 0.62s; }
.mnt-sel__frame i:nth-child(3) { bottom: -6px; left: -6px; animation-delay: 0.69s; }
.mnt-sel__frame i:nth-child(4) { bottom: -6px; right: -6px; animation-delay: 0.76s; }
.mnt-sel__tag {
position: absolute;
left: -2px;
bottom: calc(100% + 6px);
padding: 0.3rem 0.55rem;
border-radius: 6px 6px 6px 0;
font-family: var(--mono);
font-size: 0.75rem;
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
color: #fff;
background: var(--brand-600, #cc4819);
animation: mnt-pop 0.35s 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.mnt-code {
margin: 1.6rem 0 0;
font-family: var(--mono);
font-size: 0.92rem;
color: var(--ink, #141414);
}
.mnt-code__dim {
color: var(--muted, #6b6b6b);
}
.mnt-caret {
display: inline-block;
width: 0.55em;
height: 1.15em;
margin-left: 0.25em;
vertical-align: -0.22em;
background: var(--brand, #ff5a1f);
animation: mnt-blink 1.1s steps(1, end) infinite;
}
.mnt-text {
max-width: 34rem;
margin: 1.2rem auto 0;
font-size: clamp(1rem, 0.96rem + 0.25vw, 1.15rem);
line-height: 1.6;
color: var(--muted, #6b6b6b);
text-wrap: pretty;
}
.mnt-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.7rem;
margin-top: 2.1rem;
}
.mnt-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 46px;
padding: 0 1.3rem;
border: 1px solid transparent;
border-radius: 999px;
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.2s, border-color 0.2s, color 0.2s;
}
.mnt-btn:hover {
transform: translateY(-2px);
}
.mnt-btn--ink {
color: #fff;
background: var(--ink, #141414);
}
.mnt-btn--ink:hover {
background: var(--brand-700, #ad3d15);
}
.mnt-btn--ghost {
border-color: var(--line-2, #e0e0e0);
color: var(--ink, #141414);
background: #fff;
}
.mnt-btn--ghost:hover {
border-color: var(--ink, #141414);
}
.mnt-btn__icon {
width: 16px;
height: 16px;
}
.mnt-contact {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1.6rem;
margin: 2.2rem 0 0;
padding: 0;
list-style: none;
font-family: var(--mono);
font-size: 0.84rem;
}
.mnt-contact a {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--ink, #141414);
text-decoration: none;
border-radius: 4px;
}
.mnt-contact a:hover span {
text-decoration: underline;
text-decoration-color: var(--brand, #ff5a1f);
text-underline-offset: 3px;
}
.mnt-contact__icon {
width: 15px;
height: 15px;
color: var(--brand, #ff5a1f);
}
.mnt-social {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin: 1.4rem 0 0;
padding: 0;
list-style: none;
}
.mnt-social a {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid var(--line, #ececec);
border-radius: 50%;
color: var(--ink, #141414);
background: #fff;
transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.2s, color 0.2s, border-color 0.2s;
}
.mnt-social a:hover {
color: #fff;
background: var(--ink, #141414);
border-color: var(--ink, #141414);
transform: translateY(-2px);
}
.mnt-social__icon {
width: 17px;
height: 17px;
}
.mnt-foot {
padding: 1.5rem 1.25rem max(2rem, env(safe-area-inset-bottom));
text-align: center;
font-size: 0.8rem;
color: var(--faint, #767676);
}
.mnt-logo:focus-visible,
.mnt-btn:focus-visible,
.mnt-contact a:focus-visible,
.mnt-social a:focus-visible,
.mnt-ribbon__link:focus-visible {
outline: 2px solid var(--brand, #ff5a1f);
outline-offset: 3px;
}
.mnt-ribbon {
position: sticky;
top: 0;
z-index: 5;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.35rem 0.8rem;
padding: 0.55rem 1rem;
color: #fff;
background: var(--ink, #141414);
font-size: 0.8rem;
line-height: 1.4;
text-align: center;
}
.mnt-ribbon__tag {
padding: 0.18rem 0.45rem;
border-radius: 4px;
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
background: var(--brand-700, #ad3d15);
}
.mnt-ribbon__text {
color: rgb(255 255 255 / 0.85);
}
.mnt-ribbon__link {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-weight: 600;
color: #fff;
text-underline-offset: 3px;
border-radius: 4px;
}
.mnt-ribbon__link:focus-visible {
outline-color: #fff;
}
.mnt-ribbon__icon {
width: 14px;
height: 14px;
}
@keyframes mnt-frame {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: none; }
}
@keyframes mnt-pop {
from { opacity: 0; transform: scale(0.4); }
to { opacity: 1; transform: none; }
}
@keyframes mnt-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.announce::after {
display: none;
}
.announce__dot,
.mnt-pill__dot,
.mnt-chip__dot,
.mnt-caret {
animation: none;
}
.mnt-sel__frame,
.mnt-sel__frame i,
.mnt-sel__tag {
animation: none;
}
html.announce-closing .nav,
.announce.is-closing,
.announce__arrow,
.mnt-btn,
.mnt-social a {
transition: none;
}
}
@media print {
.announce,
.mnt-pill,
.mnt-ribbon {
display: none !important;
}
html.has-announce .nav {
top: 0;
}
html:has(> body > .announce) .nav {
top: 0;
}
}

/* css/front/consent.css */

.cs {
position: fixed;
inset-inline-start: max(1rem, env(safe-area-inset-left));
bottom: max(1rem, env(safe-area-inset-bottom));
z-index: 90;
width: min(26rem, calc(100vw - 2rem));
max-height: calc(100vh - 2rem);
overflow-y: auto;
border: 1px solid var(--line-2);
border-radius: var(--radius, 14px);
background: var(--surface);
color: var(--text-2);
box-shadow: var(--shadow-md, 0 18px 40px -24px rgb(0 0 0 / 0.6));
transform: translateY(calc(100% + 2rem));
transition: transform 0.32s var(--ease-out, ease);
}
.cs[hidden] {
display: none;
}
.cs.is-in {
transform: none;
}
.cs:focus {
outline: none;
}
.cs:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.cs::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: var(--brand);
border-radius: var(--radius, 14px) var(--radius, 14px) 0 0;
}
.cs__inner {
display: grid;
gap: 0.85rem;
padding: 1.35rem 1.35rem 1.25rem;
}
.cs__title {
margin: 0;
font-size: 1.1rem;
font-weight: 650;
letter-spacing: -0.02em;
color: var(--text);
}
.cs__text {
margin: 0;
font-size: 0.875rem;
line-height: 1.6;
}
.cs__sum {
display: inline-flex;
align-items: center;
gap: 0.4rem;
list-style: none;
cursor: pointer;
font-size: 0.85rem;
color: var(--brand-700);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.cs__sum::-webkit-details-marker {
display: none;
}
.cs__sum:focus-visible,
.cs a:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 3px;
border-radius: 2px;
}
.cs__chev {
width: 0.9rem;
height: 0.9rem;
transition: transform 0.2s var(--ease);
}
.cs__more[open] .cs__chev {
transform: rotate(180deg);
}
.cs__list {
display: grid;
gap: 0.6rem;
margin: 0.75rem 0 0;
padding: 0.75rem 0 0;
list-style: none;
border-top: 1px solid var(--line);
font-size: 0.82rem;
line-height: 1.55;
}
.cs__list b {
color: var(--text);
}
.cs__list code {
font-family: var(--mono);
font-size: 0.9em;
color: var(--text);
}
.cs__links {
margin: 0.75rem 0 0;
font-size: 0.82rem;
}
.cs a {
color: var(--brand-700);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.cs__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
}
.cs__btn {
justify-content: center;
width: 100%;
min-height: 2.75rem;
border: 1px solid var(--line-2);
background: var(--surface-2);
color: var(--text);
font-weight: 600;
}
.cs__btn:hover {
border-color: var(--brand);
background: var(--brand-soft);
color: var(--text);
}
.cs__btn.is-current {
border-color: var(--brand);
}
@media (max-width: 30rem) {
.cs {
left: 0.75rem;
right: 0.75rem;
width: auto;
bottom: max(0.75rem, env(safe-area-inset-bottom));
}
.cs__inner {
padding: 1.1rem 1rem 1rem;
}
}
html[data-motion="off"] .cs,
html[data-motion="off"] .cs__chev {
transition: none;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.cs,
.cs__chev {
transition: none;
transform: none;
}
}
@media print {
.cs {
display: none !important;
}
}

/* css/front/contact.css */

.copy {
position: relative;
display: inline-grid;
place-items: center;
flex: none;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--line-2);
border-radius: 50%;
background: var(--surface);
color: var(--text-2);
cursor: pointer;
transition: color 0.2s, border-color 0.2s, background-color 0.2s, transform 0.25s var(--ease);
}
.copy[hidden] { display: none; }
.copy .icon {
grid-area: 1 / 1;
width: 14px;
height: 14px;
transition: opacity 0.2s, transform 0.3s var(--ease);
}
.copy__done { color: var(--ok); opacity: 0; transform: scale(0.4); }
.copy:hover { color: var(--text); border-color: var(--text-3); background: var(--surface-2); }
.copy:active { transform: scale(0.94); }
.copy.is-done { border-color: var(--ok); }
.copy.is-done .copy__icon { opacity: 0; transform: scale(0.4); }
.copy.is-done .copy__done { opacity: 1; transform: none; }
.copy__burst { position: absolute; inset: 0; pointer-events: none; }
.copy__burst i {
position: absolute;
left: 50%;
top: 50%;
width: 3px;
height: 3px;
margin: -1.5px;
border-radius: 50%;
background: var(--brand);
opacity: 0;
}
.copy.is-done .copy__burst i { animation: ct-burst 0.6s var(--ease) both; }
.copy__burst i:nth-child(1) { --a: 0deg; }
.copy__burst i:nth-child(2) { --a: 60deg; }
.copy__burst i:nth-child(3) { --a: 120deg; }
.copy__burst i:nth-child(4) { --a: 180deg; }
.copy__burst i:nth-child(5) { --a: 240deg; }
.copy__burst i:nth-child(6) { --a: 300deg; }
@keyframes ct-burst {
0% { opacity: 1; transform: rotate(var(--a)) translateY(0); }
100% { opacity: 0; transform: rotate(var(--a)) translateY(-22px); }
}
.cx-orbit__stage,
.cx-form__card,
.cx-env,
.cx-loc__card {
position: relative;
isolation: isolate;
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--surface);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), var(--shadow-sm);
}
.cx-orbit__stage::before,
.cx-form__card::before,
.cx-env::before,
.cx-loc__card::before {
content: "";
position: absolute;
inset: -1px;
z-index: 2;
padding: 1px;
border-radius: inherit;
background: linear-gradient(140deg, color-mix(in srgb, var(--brand) 70%, transparent), transparent 34%, transparent 66%, color-mix(in srgb, var(--accent) 45%, transparent));
-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);
pointer-events: none;
}
.cx-hero {
position: relative;
isolation: isolate;
padding: calc(var(--header-h) + clamp(2rem, 5vw, 3.75rem)) 0 clamp(1.25rem, 3vw, 2rem);
overflow: clip;
}
.cx-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(50% 55% at 8% 0%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 70%),
radial-gradient(38% 50% at 82% 30%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%),
radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 1.5px) 0 0 / 28px 28px;
-webkit-mask: linear-gradient(#000 55%, transparent);
mask: linear-gradient(#000 55%, transparent);
pointer-events: none;
}
.cx-hero__wrap {
display: grid;
gap: clamp(2rem, 4vw, 3rem);
align-items: center;
}
@media (min-width: 1020px) {
.cx-hero__wrap {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(2.5rem, 4vw, 4rem);
}
}
.cx-hero__main {
min-width: 0;
}
.cx-hero__tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 1.25rem;
padding: 0.4rem 0.9rem 0.4rem 0.75rem;
border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line-2));
border-radius: 999px;
background: var(--brand-soft);
color: var(--brand-600);
font: 600 0.82rem/1 var(--font);
}
.cx-hero__tag .icon { width: 15px; height: 15px; }
.cx-hero__title {
margin: 0;
max-width: 14ch;
font-size: clamp(2.6rem, 1.5rem + 3.6vw, 4.6rem);
font-weight: 700;
line-height: var(--lh-head);
letter-spacing: var(--ls-head);
color: var(--text);
text-wrap: balance;
}
.cx-hero__lead {
max-width: 36rem;
margin: 1.1rem 0 0;
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--text-2);
}
.cx-ch {
display: grid;
gap: 0.75rem;
margin: clamp(1.75rem, 3vw, 2.25rem) 0 0;
padding: 0;
list-style: none;
}
@media (min-width: 560px) {
.cx-ch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cx-ch__item { min-width: 0; }
.cx-ch__card {
--ch: var(--brand);
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.85rem;
align-items: start;
height: 100%;
padding: 0.95rem 1rem;
border: 1px solid var(--line);
border-radius: var(--r);
background: color-mix(in srgb, var(--surface) 88%, transparent);
color: var(--text);
text-decoration: none;
overflow: hidden;
transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.cx-ch__card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brand) 13%, transparent), transparent 70%);
opacity: var(--spot, 0);
transition: opacity 0.4s var(--ease);
}
.cx-ch__card::after {
content: "";
position: absolute;
inset: auto 1rem 0;
height: 1px;
background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--accent) 80%, transparent));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.6s var(--ease-out);
}
[dir="rtl"] .cx-ch__card::after { transform-origin: right; }
.cx-ch__card:hover,
.cx-ch__card:focus-visible,
.cx-ch__card.is-hot {
border-color: color-mix(in srgb, var(--brand) 45%, var(--line-2));
background: var(--surface);
box-shadow: 0 10px 30px -18px var(--brand-glow);
}
.cx-ch__card:hover::after,
.cx-ch__card:focus-visible::after,
.cx-ch__card.is-hot::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
.cx-ch__card:hover { transform: translateY(-2px); }
}
.cx-ch__ico {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line));
border-radius: 12px;
background: var(--brand-soft);
color: var(--brand-600);
transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.4s var(--ease);
}
.cx-ch__ico .icon { width: 19px; height: 19px; }
.cx-ch__card:hover .cx-ch__ico,
.cx-ch__card:focus-visible .cx-ch__ico,
.cx-ch__card.is-hot .cx-ch__ico {
background: var(--brand-fill);
color: var(--brand-ink);
}
.cx-ch__body {
display: grid;
gap: 0.15rem;
min-width: 0;
}
.cx-ch__label {
font-size: 0.95rem;
font-weight: 650;
color: var(--text);
}
.cx-ch__value {
overflow-wrap: anywhere;
font-size: 0.92rem;
color: var(--text-2);
text-align: start;
unicode-bidi: isolate;
}
.cx-ch__note {
margin-top: 0.15rem;
font-size: 0.8rem;
line-height: 1.4;
color: var(--text-3);
}
.cx-ch__go {
align-self: center;
color: var(--text-3);
transition: color 0.3s var(--ease), transform 0.35s var(--ease);
}
.cx-ch__go .icon { width: 17px; height: 17px; }
.cx-ch__card:hover .cx-ch__go,
.cx-ch__card:focus-visible .cx-ch__go { color: var(--brand-600); transform: translateX(3px); }
.cx-ch__card--whatsapp:hover .cx-ch__go,
.cx-ch__card--whatsapp:focus-visible .cx-ch__go { transform: translate(3px, -3px); }
.cx-ch__card--form:hover .cx-ch__go,
.cx-ch__card--form:focus-visible .cx-ch__go { transform: translateY(3px); }
[dir="rtl"] .cx-ch__go .icon { transform: scaleX(-1); }
.cx-orbit {
min-width: 0;
margin: 0;
}
.cx-orbit__stage {
aspect-ratio: 560 / 440;
overflow: hidden;
background:
radial-gradient(45% 45% at 50% 50%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%),
radial-gradient(60% 50% at 0% 100%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%),
radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 1.5px) 0 0 / 22px 22px,
var(--bg-2);
}
.cx-orbit__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.cx-orbit__ring {
fill: none;
stroke: var(--line-2);
stroke-width: 1;
}
.cx-orbit__ring--2 { stroke-dasharray: 2 6; stroke: color-mix(in srgb, var(--text-3) 45%, transparent); }
.cx-orbit__ring--3 { stroke: var(--line); }
.cx-orbit__spin {
transform-box: view-box;
transform-origin: 280px 220px;
animation: cx-spin 9s linear infinite;
}
.cx-orbit__spin--rev { animation-duration: 26s; animation-direction: reverse; }
.cx-orbit__arc {
fill: none;
stroke: var(--brand);
stroke-width: 2.5;
stroke-linecap: round;
stroke-dasharray: 22 78;
filter: drop-shadow(0 0 6px var(--brand-glow));
}
.cx-orbit__sat { fill: var(--accent); }
@keyframes cx-spin { to { transform: rotate(360deg); } }
.cx-orbit__line {
stroke: color-mix(in srgb, var(--text-3) 80%, transparent);
stroke-width: 1;
stroke-dasharray: 3 5;
transition: stroke 0.3s var(--ease);
}
.cx-orbit__flow {
stroke: var(--brand);
stroke-width: 1.6;
stroke-linecap: round;
stroke-dasharray: 10 90;
stroke-dashoffset: 100;
opacity: 0;
transition: opacity 0.3s var(--ease);
}
.cx-orbit__link--s0 { --dx: 170px; --dy: 128px; }
.cx-orbit__link--s1 { --dx: -170px; --dy: 128px; }
.cx-orbit__link--s2 { --dx: 170px; --dy: -128px; }
.cx-orbit__link--s3 { --dx: -170px; --dy: -128px; }
.cx-orbit__pkt {
fill: var(--brand);
opacity: 0;
transform-box: view-box;
animation: cx-pkt 4.8s linear infinite;
}
.cx-orbit__pkt--1 { animation-delay: -1.6s; }
.cx-orbit__pkt--2 { animation-delay: -3.2s; }
.cx-orbit__link--s1 .cx-orbit__pkt { animation-delay: -0.6s; }
.cx-orbit__link--s2 .cx-orbit__pkt { animation-delay: -2.2s; }
.cx-orbit__link--s3 .cx-orbit__pkt { animation-delay: -3.8s; }
.cx-orbit__link--s1 .cx-orbit__pkt--1 { animation-delay: -2.2s; }
.cx-orbit__link--s2 .cx-orbit__pkt--1 { animation-delay: -4.4s; }
.cx-orbit__link--s3 .cx-orbit__pkt--1 { animation-delay: -1s; }
.cx-orbit__pkt--2 { visibility: hidden; }
@keyframes cx-pkt {
0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
12% { opacity: var(--pk-o, 0.45); }
70% { transform: translate(calc(var(--dx) * 0.8), calc(var(--dy) * 0.8)) scale(1); opacity: var(--pk-o, 0.45); }
100% { transform: translate(var(--dx), var(--dy)) scale(0.4); opacity: 0; }
}
.cx-orbit__stage[data-hot] .cx-orbit__link { opacity: 0.5; transition: opacity 0.3s var(--ease); }
.cx-orbit__stage[data-hot="phone"] [data-cx-link="phone"],
.cx-orbit__stage[data-hot="email"] [data-cx-link="email"],
.cx-orbit__stage[data-hot="whatsapp"] [data-cx-link="whatsapp"],
.cx-orbit__stage[data-hot="form"] [data-cx-link="form"] { --pk-o: 1; opacity: 1; }
.cx-orbit__stage[data-hot="phone"] [data-cx-link="phone"] .cx-orbit__line,
.cx-orbit__stage[data-hot="email"] [data-cx-link="email"] .cx-orbit__line,
.cx-orbit__stage[data-hot="whatsapp"] [data-cx-link="whatsapp"] .cx-orbit__line,
.cx-orbit__stage[data-hot="form"] [data-cx-link="form"] .cx-orbit__line { stroke: color-mix(in srgb, var(--brand) 70%, transparent); }
.cx-orbit__stage[data-hot="phone"] [data-cx-link="phone"] .cx-orbit__flow,
.cx-orbit__stage[data-hot="email"] [data-cx-link="email"] .cx-orbit__flow,
.cx-orbit__stage[data-hot="whatsapp"] [data-cx-link="whatsapp"] .cx-orbit__flow,
.cx-orbit__stage[data-hot="form"] [data-cx-link="form"] .cx-orbit__flow {
opacity: 1;
animation: cx-flow 0.9s linear infinite;
}
.cx-orbit__stage[data-hot="phone"] [data-cx-link="phone"] .cx-orbit__pkt,
.cx-orbit__stage[data-hot="email"] [data-cx-link="email"] .cx-orbit__pkt,
.cx-orbit__stage[data-hot="whatsapp"] [data-cx-link="whatsapp"] .cx-orbit__pkt,
.cx-orbit__stage[data-hot="form"] [data-cx-link="form"] .cx-orbit__pkt {
visibility: visible;
animation-duration: 1.05s;
filter: drop-shadow(0 0 4px var(--brand));
}
.cx-orbit__stage[data-hot] .cx-orbit__pkt--1 { animation-delay: -0.35s; }
.cx-orbit__stage[data-hot] .cx-orbit__pkt--2 { animation-delay: -0.7s; }
@keyframes cx-flow { to { stroke-dashoffset: 0; } }
.cx-orbit__core {
position: absolute;
left: 50%;
top: 50%;
z-index: 3;
display: grid;
place-items: center;
width: 19.5%;
aspect-ratio: 1;
border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line-2));
border-radius: 50%;
background: radial-gradient(circle at 50% 30%, var(--surface-3), var(--surface) 70%);
box-shadow: 0 0 0 6px color-mix(in srgb, var(--bg-2) 70%, transparent), 0 0 40px -6px var(--brand-glow);
color: var(--text);
transform: translate(-50%, -50%);
}
.cx-orbit__core .logo__svg { width: 58%; height: auto; }
.cx-orbit__pulse {
position: absolute;
inset: -1px;
border: 1.5px solid var(--brand);
border-radius: 50%;
opacity: 0;
}
.cx-orbit__stage.is-ping .cx-orbit__pulse { animation: cx-ping 0.9s var(--ease-out); }
@keyframes cx-ping {
0% { opacity: 0.9; transform: scale(1); }
100% { opacity: 0; transform: scale(1.45); }
}
.cx-orbit__node {
--nd: clamp(42px, 4.4vw, 56px);
position: absolute;
z-index: 3;
width: 0;
height: 0;
}
.cx-orbit__node--s0 { left: 19.643%; top: 20.909%; }
.cx-orbit__node--s1 { left: 80.357%; top: 20.909%; }
.cx-orbit__node--s2 { left: 19.643%; top: 79.091%; }
.cx-orbit__node--s3 { left: 80.357%; top: 79.091%; }
.cx-orbit__dot {
position: absolute;
left: 0;
top: 0;
display: grid;
place-items: center;
width: var(--nd);
height: var(--nd);
border: 1.5px solid color-mix(in srgb, var(--text-3) 60%, transparent);
border-radius: 50%;
background: var(--surface);
color: var(--text-2);
transform: translate(-50%, -50%);
transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.4s var(--ease);
}
.cx-orbit__dot .icon { width: 42%; height: 42%; }
.cx-orbit__dot::after {
content: "";
position: absolute;
inset: -7px;
border: 1px solid color-mix(in srgb, var(--brand) 55%, transparent);
border-radius: 50%;
opacity: 0;
transform: scale(0.8);
transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
}
.cx-orbit__label {
position: absolute;
left: 0;
white-space: nowrap;
font: 600 0.78rem/1 var(--font);
color: var(--text-3);
transform: translateX(-50%);
transition: color 0.3s var(--ease);
}
.cx-orbit__node--top .cx-orbit__label { bottom: calc(var(--nd) / 2 + 0.6rem); }
.cx-orbit__node--bottom .cx-orbit__label { top: calc(var(--nd) / 2 + 0.6rem); }
.cx-orbit__stage[data-hot="phone"] [data-cx-node="phone"] .cx-orbit__dot,
.cx-orbit__stage[data-hot="email"] [data-cx-node="email"] .cx-orbit__dot,
.cx-orbit__stage[data-hot="whatsapp"] [data-cx-node="whatsapp"] .cx-orbit__dot,
.cx-orbit__stage[data-hot="form"] [data-cx-node="form"] .cx-orbit__dot {
border-color: var(--brand);
background: color-mix(in srgb, var(--brand) 16%, var(--surface));
color: var(--brand-600);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent), 0 0 28px -2px var(--brand-glow);
}
.cx-orbit__stage[data-hot="phone"] [data-cx-node="phone"] .cx-orbit__dot::after,
.cx-orbit__stage[data-hot="email"] [data-cx-node="email"] .cx-orbit__dot::after,
.cx-orbit__stage[data-hot="whatsapp"] [data-cx-node="whatsapp"] .cx-orbit__dot::after,
.cx-orbit__stage[data-hot="form"] [data-cx-node="form"] .cx-orbit__dot::after { opacity: 1; transform: none; }
.cx-orbit__stage[data-hot="phone"] [data-cx-node="phone"] .cx-orbit__label,
.cx-orbit__stage[data-hot="email"] [data-cx-node="email"] .cx-orbit__label,
.cx-orbit__stage[data-hot="whatsapp"] [data-cx-node="whatsapp"] .cx-orbit__label,
.cx-orbit__stage[data-hot="form"] [data-cx-node="form"] .cx-orbit__label { color: var(--brand-600); }
.cx-orbit__cap {
margin-top: 0.6rem;
font: 500 0.7rem/1 var(--mono);
letter-spacing: 0.06em;
color: var(--text-3);
text-align: end;
}
.cx-form {
padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.5rem, 3vw, 2.5rem);
scroll-margin-top: calc(var(--header-h) + 0.5rem);
}
.cx-form__grid {
display: grid;
gap: 1.25rem;
align-items: stretch;
}
@media (min-width: 1020px) {
.cx-form__grid { grid-template-columns: minmax(0, 1.12fr) 56px minmax(0, 0.88fr); gap: 0; }
}
.cx-form__card {
min-width: 0;
padding: clamp(1.25rem, 3vw, 2.25rem);
}
.cx-form__head { margin-bottom: 1.4rem; }
.cx-form .hp-field {
left: 0;
width: 1px;
height: 1px;
clip-path: inset(50%);
opacity: 0;
pointer-events: none;
}
.cx-form__title {
margin: 0;
font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
}
.cx-form__sub {
margin: 0.4rem 0 0;
font-size: 0.92rem;
color: var(--text-2);
}
.cx-form__fields {
display: grid;
gap: 1rem 1rem;
}
@media (min-width: 640px) {
.cx-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cx-form__fields .field--full { grid-column: 1 / -1; }
}
.cx-form .field__label { color: var(--text); }
.cx-form .field__input {
background: var(--bg-2);
border-color: var(--line-2);
color: var(--text);
}
.cx-form .field__input::placeholder { color: var(--text-3); opacity: 1; }
.cx-form .field__input:hover { border-color: color-mix(in srgb, var(--text-3) 70%, transparent); }
.cx-form .field__input:focus { background: var(--surface); border-color: var(--brand); }
.cx-form .field__input[aria-invalid="true"] { border-color: var(--danger); }
.cx-form .field__error { color: var(--danger); }
.cx-form .field__textarea { min-height: 128px; }
.cx-form .field__select select { padding-inline-end: 2.5rem; }
.cx-form .cx-form__chev { right: auto; inset-inline-end: 0.9rem; transform: translateY(-50%); }
.cx-form__mlabel {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.cx-form__count {
font: 500 0.74rem/1.6 var(--mono);
color: var(--text-3);
transition: color 0.3s;
}
.cx-form__count.is-ok b { color: var(--brand-600); }
.cx-form .lg-formnote { margin-top: 0.15rem; }
.cx-form .check { color: var(--text-2); }
.cx-form .check__box { border-color: var(--line-2); background: var(--bg-2); }
.cx-form .check__text a { color: var(--text); }
.cx-form__foot {
display: grid;
gap: 0.9rem;
margin-top: 1.4rem;
padding-top: 1.25rem;
border-top: 1px solid var(--line);
}
.cx-form__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.65rem;
}
.cx-form__status { margin: 0; }
.cx-form__status.is-success { color: var(--ok); }
.cx-form__status.is-error { color: var(--danger); }
.cx-form__send { min-width: 11.5rem; }
.cx-form__send-ico {
position: relative;
display: inline-grid;
place-items: center;
width: 18px;
height: 18px;
}
.cx-form__send-ico > * { grid-area: 1 / 1; transition: opacity 0.25s, transform 0.4s var(--ease); }
.cx-form__send-ico .icon { width: 17px; height: 17px; }
.cx-form__done { opacity: 0; transform: scale(0.4); }
.cx-form__spin {
width: 16px;
height: 16px;
border: 2px solid color-mix(in srgb, var(--brand-ink) 35%, transparent);
border-top-color: var(--brand-ink);
border-radius: 50%;
opacity: 0;
}
[data-state="sending"] .cx-form__plane { opacity: 0; transform: translate(8px, -8px) scale(0.6); }
[data-state="sending"] .cx-form__spin { opacity: 1; animation: cx-spin 0.8s linear infinite; }
[data-state="success"] .cx-form__plane { opacity: 0; transform: translate(14px, -14px); }
[data-state="success"] .cx-form__done { opacity: 1; transform: none; }
[data-state="invalid"] .cx-form__send,
[data-state="error"] .cx-form__send { animation: cx-nudge 0.4s var(--ease); }
@keyframes cx-nudge {
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
@media (max-width: 559.98px) {
.cx-form__actions > * { flex: 1 1 100%; }
}
.cx-form__off { margin: 0; }
.cx-wire {
position: relative;
display: none;
}
@media (min-width: 1020px) {
.cx-wire { display: block; }
}
.cx-wire__line {
position: absolute;
left: 50%;
top: 1.5rem;
bottom: 1.5rem;
border-left: 1px dashed color-mix(in srgb, var(--text-3) 55%, transparent);
}
.cx-wire__node {
position: absolute;
left: 50%;
top: 50%;
display: grid;
place-items: center;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border: 1px solid var(--line-2);
border-radius: 50%;
background: var(--bg);
}
.cx-wire__node::before,
.cx-wire__node::after {
content: "";
position: absolute;
top: 50%;
width: 18px;
border-top: 1px solid var(--line-2);
}
.cx-wire__node::before { right: 100%; }
.cx-wire__node::after { left: 100%; }
.cx-wire__node i {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--text-3);
transition: background-color 0.3s, box-shadow 0.3s;
}
.cx-wire.is-live .cx-wire__node i,
.cx-wire.is-fast .cx-wire__node i {
background: var(--brand);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent), 0 0 14px var(--brand);
}
.cx-wire__pkt {
position: absolute;
left: 50%;
top: 1.5rem;
width: 3px;
height: 34px;
margin-left: -1px;
border-radius: 3px;
background: linear-gradient(transparent, var(--brand));
opacity: 0;
}
.cx-wire.is-live .cx-wire__pkt { animation: cx-drip 2.4s linear infinite; }
.cx-wire.is-fast .cx-wire__pkt { animation: cx-drip 0.8s linear infinite; }
.cx-wire__pkt:nth-child(3) { animation-delay: -0.8s !important; }
.cx-wire__pkt:nth-child(4) { animation-delay: -1.6s !important; }
.cx-wire.is-fast .cx-wire__pkt:nth-child(3) { animation-delay: -0.27s !important; }
.cx-wire.is-fast .cx-wire__pkt:nth-child(4) { animation-delay: -0.53s !important; }
@keyframes cx-drip {
0% { opacity: 0; transform: translateY(0); }
15% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; transform: translateY(var(--wire-h, 520px)); }
}
.cx-env {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
padding: clamp(1.1rem, 2.4vw, 1.6rem);
scroll-margin-top: calc(var(--header-h) + 1rem);
}
.cx-env__head {
display: flex;
align-items: center;
gap: 0.6rem;
}
.cx-env__hico { width: 19px; height: 19px; color: var(--brand-600); }
.cx-env__title {
margin: 0;
font-size: 1.02rem;
font-weight: 650;
color: var(--text);
}
.cx-env__badge {
margin-inline-start: auto;
padding: 0.28rem 0.6rem;
border: 1px solid var(--line-2);
border-radius: 999px;
font: 500 0.7rem/1 var(--mono);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}
.cx-env[data-state="ready"] .cx-env__badge,
.cx-env[data-state="sending"] .cx-env__badge { color: var(--brand-600); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.cx-env[data-state="sent"] .cx-env__badge { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.cx-env[data-state="error"] .cx-env__badge { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.cx-env__stage {
position: relative;
flex: 1 1 auto;
display: grid;
place-items: center;
min-height: 15.5rem;
padding: 1.4rem 1.1rem;
border: 1px solid var(--line);
border-radius: var(--r);
background:
radial-gradient(60% 70% at 50% 40%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%),
var(--bg-2);
overflow: hidden;
}
.cx-letter {
position: relative;
z-index: 2;
width: min(100%, 23rem);
padding: 1rem 1.15rem 1.1rem;
border: 1px solid var(--line-2);
border-radius: 12px;
background: linear-gradient(170deg, var(--surface-3), var(--surface-2));
box-shadow: 0 18px 40px -22px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.06);
transform: rotate(-1.2deg);
transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
}
.cx-letter__stamp {
position: absolute;
top: 0.85rem;
inset-inline-end: 0.85rem;
display: grid;
place-items: center;
width: 3rem;
height: 3.4rem;
border: 1.5px dashed color-mix(in srgb, var(--brand) 60%, transparent);
border-radius: 6px;
background: var(--brand-soft);
color: var(--text);
}
.cx-letter__stamp .logo__svg { width: 76%; height: auto; }
.cx-letter__row {
position: relative;
display: flex;
align-items: baseline;
gap: 0.6rem;
min-height: 1.5rem;
margin: 0 0 0.45rem;
padding-inline-end: 3.6rem;
font-size: 0.9rem;
}
.cx-letter__k {
flex: none;
width: 3.9rem;
font: 500 0.7rem/1.4 var(--mono);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-3);
}
.cx-letter__to { font-size: 1.05rem; color: var(--text); }
.cx-letter__v {
min-width: 0;
overflow: hidden;
color: var(--text);
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.cx-letter__v:empty { display: none; }
.cx-letter__sk {
flex: 1;
max-width: 9rem;
height: 0.6rem;
border-radius: 4px;
background: var(--line-2);
align-self: center;
}
.cx-letter__sk--short { max-width: 6rem; }
.cx-letter__v:not(:empty) + .cx-letter__sk { display: none; }
.cx-letter__row.is-filled .cx-letter__v { animation: cx-ink 0.5s var(--ease); }
@keyframes cx-ink {
from { opacity: 0.2; transform: translateY(3px); }
}
.cx-letter__row.is-missing .cx-letter__sk,
.cx-letter__body.is-missing .cx-letter__lines i { background: color-mix(in srgb, var(--danger) 45%, transparent); }
.cx-letter__body {
margin-top: 0.7rem;
padding-top: 0.7rem;
border-top: 1px solid var(--line);
}
.cx-letter__msg {
display: -webkit-box;
margin: 0 0 0.5rem;
overflow: hidden;
font-size: 0.84rem;
line-height: 1.5;
color: var(--text-2);
overflow-wrap: anywhere;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.cx-letter__msg:empty { display: none; }
.cx-letter__lines {
display: grid;
gap: 0.5rem;
}
.cx-letter__lines i {
height: 0.45rem;
border-radius: 4px;
background: var(--line);
transform-origin: left;
transition: transform 0.5s var(--ease), opacity 0.4s;
}
[dir="rtl"] .cx-letter__lines i { transform-origin: right; }
.cx-letter__lines i:nth-child(2) { width: 92%; }
.cx-letter__lines i:nth-child(3) { width: 84%; }
.cx-letter__lines i:nth-child(4) { width: 58%; }
.cx-letter__body { --fill: 0; }
.cx-letter__lines i { transform: scaleX(calc(1 - var(--fill) * 0.85)); opacity: calc(1 - var(--fill) * 0.6); }
.cx-envelope {
position: absolute;
left: 50%;
top: 50%;
z-index: 3;
width: 9.5rem;
margin: -3.3rem 0 0 -4.75rem;
overflow: visible;
opacity: 0;
transform: scale(0.7);
pointer-events: none;
}
.cx-envelope__back {
fill: var(--surface-3);
stroke: color-mix(in srgb, var(--brand) 60%, transparent);
stroke-width: 1.5;
}
.cx-envelope__side {
fill: none;
stroke: var(--line-2);
stroke-width: 1.5;
}
.cx-envelope__flap {
fill: var(--surface-2);
stroke: var(--brand);
stroke-width: 1.5;
stroke-linejoin: round;
transform-box: fill-box;
transform-origin: 50% 0;
transform: scaleY(-1);
}
.cx-env__trail {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
display: grid;
gap: 0.4rem;
opacity: 0;
pointer-events: none;
}
.cx-env__trail i {
display: block;
width: 3.5rem;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--brand));
}
.cx-env__trail i:nth-child(2) { width: 2.4rem; margin-left: 1rem; }
.cx-env__trail i:nth-child(3) { width: 1.6rem; margin-left: 2rem; }
.cx-env__stage[data-phase="pack"] .cx-letter,
.cx-env__stage[data-phase="fly"] .cx-letter {
opacity: 0;
transform: translateY(18px) scale(0.42);
transition: transform 0.55s var(--ease-io), opacity 0.45s 0.1s;
}
.cx-env__stage[data-phase="pack"] .cx-envelope {
opacity: 1;
transform: none;
transition: opacity 0.3s 0.15s, transform 0.45s 0.15s var(--ease-out);
}
.cx-env__stage[data-phase="pack"] .cx-envelope__flap {
transform: none;
transition: transform 0.35s 0.55s var(--ease-io);
}
.cx-env__stage[data-phase="fly"] .cx-envelope {
opacity: 0;
transform: translate(220%, -170%) rotate(-14deg) scale(0.55);
transition: transform 0.85s var(--ease-io), opacity 0.4s 0.5s;
}
.cx-env__stage[data-phase="fly"] .cx-envelope__flap { transform: none; }
.cx-env__stage[data-phase="fly"] .cx-env__trail { animation: cx-trail 0.85s var(--ease-io); }
@keyframes cx-trail {
0% { opacity: 0; transform: translate(-50%, 0); }
30% { opacity: 1; }
100% { opacity: 0; transform: translate(120%, -120%) rotate(-30deg); }
}
.cx-env__stage[data-phase="done"] .cx-letter { animation: cx-letter-in 0.6s var(--ease-out); }
@keyframes cx-letter-in {
from { opacity: 0; transform: translateY(16px) rotate(-1.2deg) scale(0.96); }
}
.cx-env[data-state="error"] .cx-letter,
.cx-env[data-state="invalid"] .cx-letter { animation: cx-shake 0.45s var(--ease); }
@keyframes cx-shake {
20% { transform: translateX(-6px) rotate(-1.2deg); }
50% { transform: translateX(5px) rotate(-1.2deg); }
80% { transform: translateX(-2px) rotate(-1.2deg); }
}
@media (hover: hover) and (pointer: fine) {
.cx-env__stage:hover .cx-letter { transform: rotate(0deg) translateY(-3px); }
}
.cx-steps {
display: grid;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.cx-step {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.75rem;
align-items: center;
padding: 0.65rem 0.8rem;
border: 1px solid var(--line);
border-radius: 12px;
background: color-mix(in srgb, var(--bg-2) 70%, transparent);
overflow: hidden;
transition: border-color 0.35s, background-color 0.35s;
}
.cx-step__ico {
position: relative;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 1px solid var(--line-2);
border-radius: 50%;
color: var(--text-3);
transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}
.cx-step__ico .icon { grid-area: 1 / 1; width: 15px; height: 15px; transition: opacity 0.25s, transform 0.35s var(--ease); }
.cx-step__ok { opacity: 0; transform: scale(0.4); }
.cx-step__txt { display: grid; gap: 0.1rem; min-width: 0; }
.cx-step__txt b { font-size: 0.88rem; font-weight: 600; color: var(--text-2); transition: color 0.3s; }
.cx-step__txt small { font-size: 0.76rem; color: var(--text-3); }
.cx-step__bar {
position: absolute;
inset: auto 0 0;
height: 2px;
}
.cx-step__bar i {
display: block;
height: 100%;
background: var(--grad-brand);
transform: scaleX(0);
transform-origin: left;
}
[dir="rtl"] .cx-step__bar i { transform-origin: right; }
.cx-step.is-active { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.cx-step.is-active .cx-step__ico { color: var(--brand-600); border-color: var(--brand); }
.cx-step.is-active .cx-step__ico::after {
content: "";
position: absolute;
inset: -4px;
border: 1.5px solid transparent;
border-top-color: var(--brand);
border-radius: 50%;
animation: cx-spin 0.9s linear infinite;
}
.cx-step.is-active .cx-step__txt b { color: var(--text); }
.cx-step.is-active .cx-step__bar i { animation: cx-bar 1.8s var(--ease-io) infinite; }
@keyframes cx-bar {
0% { transform: scaleX(0); opacity: 1; }
70% { transform: scaleX(1); opacity: 1; }
100% { transform: scaleX(1); opacity: 0; }
}
.cx-step.is-done { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); background: color-mix(in srgb, var(--brand) 6%, var(--bg-2)); }
.cx-step.is-done .cx-step__ico { color: var(--brand-ink); border-color: var(--brand); background: var(--brand-fill); }
.cx-step.is-done .cx-step__i { opacity: 0; transform: scale(0.4); }
.cx-step.is-done .cx-step__ok { opacity: 1; transform: none; }
.cx-step.is-done .cx-step__txt b { color: var(--text); }
.cx-step.is-done .cx-step__bar i { transform: scaleX(1); transition: transform 0.6s var(--ease-io); }
.cx-step.is-error { border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
.cx-step.is-error .cx-step__ico { color: var(--danger); border-color: var(--danger); }
.cx-env__note {
margin: auto 0 0;
font-size: 0.76rem;
line-height: 1.5;
color: var(--text-3);
}
.cx-loc {
padding: 0 0 clamp(2rem, 4vw, 3rem);
scroll-margin-top: calc(var(--header-h) + 0.5rem);
}
.cx-loc__card {
display: grid;
overflow: hidden;
background:
radial-gradient(50% 80% at 30% 50%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%),
var(--surface);
}
@media (min-width: 1020px) {
.cx-loc__card { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); align-items: center; }
}
.cx-loc__map {
position: relative;
aspect-ratio: 1240 / 410;
margin: clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.5rem);
}
.cx-loc__map,
.cx-orbit__stage { direction: ltr; }
.cx-loc__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.cx-loc__country {
font: 600 20px var(--font);
letter-spacing: 0.08em;
fill: var(--text-3);
text-transform: uppercase;
}
.cx-loc__info {
display: grid;
align-content: center;
gap: 0.9rem;
padding: clamp(1.25rem, 3vw, 2.5rem);
padding-top: 0;
}
@media (min-width: 1020px) {
.cx-loc__info { padding: 2.25rem 2.5rem 2.25rem 1rem; }
[dir="rtl"] .cx-loc__info { padding: 2.25rem 1rem 2.25rem 2.5rem; }
}
.cx-loc__tagline {
display: inline-flex;
align-items: center;
gap: 0.45rem;
justify-self: start;
margin: 0;
padding: 0.38rem 0.85rem 0.38rem 0.7rem;
border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line-2));
border-radius: 999px;
background: var(--brand-soft);
color: var(--brand-600);
font: 600 0.8rem/1 var(--font);
}
.cx-loc__tagline .icon { width: 15px; height: 15px; }
.cx-loc__title {
margin: 0;
font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
font-weight: 700;
letter-spacing: var(--ls-head);
color: var(--text);
}
.cx-loc__addr {
margin: 0;
font-size: 1.02rem;
color: var(--text-2);
}
.cx-loc__facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6rem;
margin: 0.2rem 0 0;
padding: 0;
list-style: none;
}
.cx-loc__fact {
display: grid;
gap: 0.2rem;
min-width: 0;
padding: 0.7rem 0.85rem;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--bg-2);
}
.cx-loc__fact--wide { grid-column: 1 / -1; }
.cx-loc__k {
font: 500 0.68rem/1.3 var(--mono);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-3);
}
.cx-loc__v { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.cx-loc__v small { font-weight: 500; font-size: 0.75rem; color: var(--text-3); }
.cx-loc__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-top: 0.4rem;
}
.cx-loc__actions .copy { width: 46px; height: 46px; }
@media (max-width: 1019.98px) {
.cx-orbit { max-width: 40rem; }
.cx-orbit__cap { text-align: start; }
}
@media (max-width: 559.98px) {
.cx-hero__title { max-width: none; }
.cx-orbit__label { font-size: 0.7rem; }
.cx-orbit__node { --nd: 38px; }
.cx-loc__map { margin: 1rem 0.75rem 0.5rem; }
.cx-env__stage { min-height: 13.5rem; }
}
.is-paused .cx-orbit__spin,
.is-paused .cx-orbit__pkt,
.is-paused .cx-orbit__flow,
.is-paused .cx-loc__ray,
.is-paused .cx-loc__wave,
.is-paused .cx-lens__ring,
.is-paused .cx-lens__city,
.is-paused .cx-lens__pin { animation-play-state: paused !important; }
html[data-motion="calm"] .cx-orbit__spin { animation-duration: 24s; }
html[data-motion="calm"] .cx-orbit__spin--rev,
html[data-motion="calm"] .cx-lens__city { animation: none; }
html[data-motion="calm"] .cx-orbit__stage:not([data-hot]) .cx-orbit__pkt { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.cx-orbit__spin,
.cx-orbit__pkt,
.cx-orbit__flow,
.cx-loc__ray,
.cx-loc__wave,
.cx-lens__ring,
.cx-lens__city,
.cx-lens__pin,
.cx-wire__pkt,
.cx-step.is-active .cx-step__ico::after,
.cx-step.is-active .cx-step__bar i,
.cx-form__send,
.cx-letter,
.cx-env__trail,
.cx-orbit__pulse { animation: none !important; }
.cx-orbit__pkt, .cx-wire__pkt, .cx-loc__wave, .cx-lens__ring { opacity: 0 !important; }
.cx-orbit__flow { stroke-dasharray: none; }
.cx-letter, .cx-envelope, .cx-envelope__flap, .cx-ch__card, .cx-loc__map .cx-lens { transition: none !important; }
.cx-env__stage[data-phase] .cx-letter { opacity: 1; transform: none; }
.cx-env__stage[data-phase] .cx-envelope { opacity: 0; }
html.fx-js .cx-loc__map:not(.is-in) .cx-lens,
html.fx-js .cx-loc__map:not(.is-in) .cx-loc__cone,
html.fx-js .cx-loc__map:not(.is-in) .cx-loc__ray { opacity: 1; transform: none; }
}
html[data-motion="off"] .cx-orbit__spin,
html[data-motion="off"] .cx-orbit__pkt,
html[data-motion="off"] .cx-orbit__flow,
html[data-motion="off"] .cx-loc__ray,
html[data-motion="off"] .cx-loc__wave,
html[data-motion="off"] .cx-lens__ring,
html[data-motion="off"] .cx-lens__city,
html[data-motion="off"] .cx-lens__pin,
html[data-motion="off"] .cx-wire__pkt,
html[data-motion="off"] .cx-step.is-active .cx-step__ico::after,
html[data-motion="off"] .cx-step.is-active .cx-step__bar i,
html[data-motion="off"] .cx-form__send,
html[data-motion="off"] .cx-letter,
html[data-motion="off"] .cx-env__trail,
html[data-motion="off"] .cx-orbit__pulse { animation: none !important; }
html[data-motion="off"] .cx-orbit__pkt,
html[data-motion="off"] .cx-wire__pkt,
html[data-motion="off"] .cx-loc__wave,
html[data-motion="off"] .cx-lens__ring { opacity: 0 !important; }
html[data-motion="off"] .cx-orbit__flow { stroke-dasharray: none; }
html[data-motion="off"] .cx-env__stage[data-phase] .cx-letter { opacity: 1; transform: none; }
html[data-motion="off"] .cx-env__stage[data-phase] .cx-envelope { opacity: 0; }
html[data-motion="off"] .cx-loc__map .cx-lens,
html[data-motion="off"] .cx-loc__map .cx-loc__cone,
html[data-motion="off"] .cx-loc__map .cx-loc__ray { opacity: 1 !important; transform: none !important; }

/* css/front/demo.css */

.dm {
background: var(--bg);
color: var(--text);
}
.dm [hidden] {
display: none !important;
}
.dm-intro .container,
.dm-outer,
.dm-hall .container {
width: min(100% - 2 * var(--gutter), 82rem);
margin-inline: auto;
}
.dm-crumb a,
.dm-dev,
.dm-pagelist a,
.dm-next,
.dm-more__item {
text-decoration: none;
}
.dm-intro {
position: relative;
padding: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem)) 0 clamp(2.25rem, 4.5vw, 3.5rem);
background: var(--bg);
}
.dm-intro__in {
display: grid;
justify-items: start;
}
.dm-intro__rule {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
}
.dm-crumb {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 1.1rem;
font-size: 0.85rem;
color: var(--text-3);
}
.dm-crumb a {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-weight: 600;
color: var(--text-2);
transition: color 0.25s var(--ease);
}
.dm-crumb a:hover {
color: var(--brand-600);
}
.dm-crumb .icon {
width: 1rem;
height: 1rem;
transition: transform 0.35s var(--ease);
}
.dm-crumb a:hover .icon {
transform: translateX(-3px);
}
.dm-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin: 0 0 0.6rem;
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-600);
}
.dm-eyebrow__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--brand);
animation: dm-dot 2.4s var(--ease-io) infinite;
}
@keyframes dm-dot {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.6); opacity: 0.55; }
}
.dm-title {
max-width: 18ch;
margin: 0;
font-size: var(--fs-h1);
font-weight: 650;
line-height: var(--lh-head);
letter-spacing: -0.035em;
text-wrap: balance;
}
.dm-intro__row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.25rem 2.5rem;
width: 100%;
margin-top: 1.5rem;
}
.dm-summary {
max-width: 38rem;
margin: 0;
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--text-2);
text-wrap: pretty;
}
.dm-hall {
--band-py: clamp(2rem, 4.5vw, 3.5rem);
overflow: hidden;
}
.dm-hall__in {
position: relative;
}
.dm-banner {
display: flex;
align-items: flex-start;
gap: 0.7rem;
margin: 0 0 1.4rem;
padding-left: 1rem;
border-left: 2px solid var(--brand);
font-size: 0.92rem;
color: var(--text-2);
}
.dm-banner b {
color: var(--text);
}
.dm-banner .icon {
flex: none;
width: 1.05rem;
height: 1.05rem;
margin-top: 0.18rem;
color: var(--brand);
}
.dm-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.6rem 1rem;
margin-bottom: 1.1rem;
}
.dm-bar__group {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.dm-bar__group:first-child {
flex-wrap: nowrap;
gap: 0;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
overflow: hidden;
}
.dm-dev {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.45rem;
height: 40px;
padding: 0 0.9rem;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
font: inherit;
font-size: 0.86rem;
font-weight: 600;
color: var(--text);
background: transparent;
cursor: pointer;
transition: color 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.dm-bar__group:first-child .dm-dev {
border: 0;
border-radius: 0;
}
.dm-bar__group:first-child .dm-dev + .dm-dev {
border-left: 1px solid var(--line-2);
}
.dm-dev:hover {
border-color: var(--text);
background: var(--surface);
}
.dm-bar__group:first-child .dm-dev:hover {
border-color: transparent;
}
.dm-bar__group:first-child .dm-dev + .dm-dev:hover {
border-left-color: var(--line-2);
}
.dm-dev[aria-pressed="true"] {
color: var(--brand-ink);
background: var(--brand-fill);
}
.dm-dev:focus-visible,
.dm-next:focus-visible,
.dm-more__item:focus-visible,
.dm-pagelist a:focus-visible,
.dm-crumb a:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 3px;
}
.dm-hall .dm-dev:focus-visible {
outline-color: var(--text);
}
.dm-dev .icon {
width: 1.1rem;
height: 1.1rem;
}
.dm-stage {
scroll-margin-top: 96px;
}
.reveal-ready .dm-hall:not(.is-in) .dm-stage {
opacity: 0;
transform: translate3d(0, 44px, 0);
}
.dm-stage {
transition: opacity 0.9s var(--ease), transform 1s var(--ease);
}
.dm-frame {
position: relative;
width: 100%;
margin-inline: auto;
overflow: hidden;
border: 1px solid var(--line-2);
border-radius: 12px;
background: var(--code-bg);
box-shadow: 0 2px 0 rgb(0 0 0 / 0.25), 0 28px 40px -28px rgb(0 0 0 / 0.65);
transition: max-width 0.5s var(--ease), border-radius 0.4s var(--ease);
}
.dm-frame[data-device="tablet"] {
max-width: 820px;
}
.dm-frame[data-device="phone"] {
max-width: 390px;
border-radius: 26px;
border-width: 7px;
border-color: var(--code-bg);
}
.dm-frame__bar {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.55rem 0.8rem;
border-bottom: 1px solid var(--code-line);
background: var(--code-bg);
}
.dm-frame__dots {
display: inline-flex;
gap: 6px;
}
.dm-frame__dots i {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--code-line);
}
.dm-frame:hover .dm-frame__dots i:nth-child(1) { background: var(--accent-rose); }
.dm-frame:hover .dm-frame__dots i:nth-child(2) { background: var(--accent-amber); }
.dm-frame:hover .dm-frame__dots i:nth-child(3) { background: var(--accent-teal); }
.dm-frame[data-device="phone"] .dm-frame__dots {
display: none;
}
.dm-frame__addr {
position: relative;
display: flex;
flex: 1;
align-items: center;
gap: 0.5rem;
min-width: 0;
height: 30px;
padding: 0 0.4rem 0 0.7rem;
overflow: hidden;
border: 1px solid var(--code-line);
border-radius: 8px;
font-family: var(--mono);
font-size: 0.75rem;
color: var(--code-dim);
background: color-mix(in oklab, var(--code-text) 6%, var(--code-bg));
}
.dm-frame__addr .icon {
width: 0.85rem;
height: 0.85rem;
color: var(--code-dim);
}
.dm-frame__path {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dm-frame__label {
flex: none;
padding: 0.15rem 0.45rem;
border-radius: 5px;
font-size: 0.65rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--brand-ink);
background: var(--brand-fill);
}
.dm-frame__load {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent-amber), var(--brand));
opacity: 0;
transform: scaleX(0);
transform-origin: 0 50%;
}
.dm-frame.is-loading .dm-frame__load {
animation: dm-load 0.9s var(--ease-io) both;
}
@keyframes dm-load {
0% { opacity: 1; transform: scaleX(0); }
70% { opacity: 1; transform: scaleX(1); }
100% { opacity: 0; transform: scaleX(1); }
}
.dm-screen {
height: clamp(520px, 78vh, 820px);
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
container: dms / inline-size;
}
.dm-screen:focus-visible {
outline: 2px solid var(--brand);
outline-offset: -2px;
}
.dm-toast {
position: absolute;
right: 50%;
bottom: 18px;
z-index: 9;
max-width: min(90%, 26rem);
margin: 0;
padding: 0.65rem 1rem;
border-radius: 10px;
font-size: 0.86rem;
font-weight: 600;
color: var(--code-text);
background: var(--code-bg);
box-shadow: 0 0 0 1px var(--code-line);
transform: translateX(50%);
animation: dm-toast 3.2s var(--ease) both;
}
@keyframes dm-toast {
0% { opacity: 0; transform: translate(50%, 12px); }
10%, 86% { opacity: 1; transform: translate(50%, 0); }
100% { opacity: 0; transform: translate(50%, 8px); }
}
.dm-lightbox {
position: absolute;
inset: 0;
z-index: 8;
display: grid;
place-items: center;
padding: 1.25rem;
background: color-mix(in oklab, var(--code-bg) 94%, transparent);
animation: dm-fade 0.25s var(--ease) both;
}
.dm-lightbox__box {
width: min(100%, 640px);
}
.dm-lightbox__box .dm-art {
aspect-ratio: 4 / 3;
height: auto;
}
.dm-lightbox__cap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 0.7rem;
color: var(--code-text);
font-size: 0.95rem;
}
.dm-lightbox__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid var(--code-line);
border-radius: 50%;
color: var(--code-text);
background: transparent;
cursor: pointer;
}
.dm-lightbox__close:focus-visible {
outline: 2px solid var(--code-text);
outline-offset: 2px;
}
@keyframes dm-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.dm-below {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
gap: 2.5rem clamp(1.5rem, 4vw, 4rem);
padding-top: clamp(3rem, 6vw, 5rem);
}
.dm-col {
padding-top: 1.25rem;
border-top: 1px solid var(--line-2);
}
.dm-col__title {
margin: 0 0 1.1rem;
font-size: 1.3rem;
font-weight: 650;
letter-spacing: var(--ls-head);
}
.dm-col__note {
max-width: 34ch;
margin: 0 0 1.25rem;
font-size: 0.95rem;
color: var(--text-2);
}
.dm-col__btns {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.dm-pagelist {
display: grid;
margin: 0 0 1.25rem;
padding: 0;
list-style: none;
}
.dm-pagelist a {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.7rem 0;
border-bottom: 1px solid var(--line);
font-weight: 600;
color: var(--text);
transition: color 0.25s var(--ease), padding-left 0.35s var(--ease);
}
.dm-pagelist a:hover {
padding-left: 0.5rem;
color: var(--brand-600);
}
.dm-pagelist .icon {
width: 1rem;
height: 1rem;
color: var(--brand-600);
transition: transform 0.35s var(--ease);
}
.dm-pagelist a:hover .icon {
transform: translate(3px, -3px);
}
.dm-feats {
display: grid;
gap: 0.4rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.92rem;
color: var(--text-2);
}
.dm-feats li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.dm-feats .icon {
flex: none;
width: 1rem;
height: 1rem;
margin-top: 0.2rem;
color: var(--ok);
}
.dm-pal {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.9rem 1rem;
margin: 0 0 1.25rem;
padding: 0;
list-style: none;
color: var(--text-3);
}
.dm-pal li {
display: flex;
align-items: center;
gap: 0.7rem;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.25;
color: var(--text);
}
.dm-pal svg {
flex: none;
width: 38px;
height: 38px;
color: var(--text);
}
.dm-pal small {
display: block;
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 500;
color: var(--text-3);
}
.dm-jump {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: clamp(3rem, 6vw, 5rem);
border-block: 1px solid var(--line);
}
.dm-next {
position: relative;
display: flex;
align-items: center;
gap: 1.25rem;
padding: clamp(1.4rem, 3vw, 2.2rem) 0;
color: var(--text);
transition: color 0.3s var(--ease);
}
.dm-next:not(.dm-next--prev) {
justify-content: space-between;
padding-left: clamp(1.5rem, 3vw, 3rem);
border-left: 1px solid var(--line);
}
.dm-next:hover {
color: var(--brand-600);
}
.dm-next small {
display: block;
margin-bottom: 0.25rem;
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
}
.dm-next b {
font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
font-weight: 650;
letter-spacing: var(--ls-head);
}
.dm-next .icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
color: var(--brand-600);
transition: transform 0.4s var(--ease);
}
.dm-next:hover .icon {
transform: translateX(6px);
}
.dm-next--prev:hover .icon {
transform: translateX(-6px);
}
.dm-more {
padding-top: clamp(3rem, 6vw, 5rem);
padding-bottom: clamp(3rem, 6vw, 5rem);
}
.dm-more__title {
max-width: 20ch;
margin: 0 0 1.75rem;
font-size: var(--fs-h2);
font-weight: 650;
line-height: var(--lh-head);
letter-spacing: var(--ls-head);
text-wrap: balance;
}
.dm-more__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 clamp(1.5rem, 4vw, 4rem);
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--line);
}
.dm-more__item {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 0.1rem 1rem;
padding: 0.95rem 0;
border-bottom: 1px solid var(--line);
transition: padding-left 0.35s var(--ease), color 0.25s var(--ease);
}
.dm-more__item:hover {
padding-left: 0.6rem;
color: var(--brand-600);
}
.dm-more__item b {
font-size: 1.15rem;
font-weight: 650;
letter-spacing: var(--ls-head);
}
.dm-more__cat {
grid-column: 1;
grid-row: 2;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
}
.dm-more__go {
grid-column: 2;
grid-row: 1 / span 2;
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.84rem;
font-weight: 600;
color: var(--brand-600);
}
.dm-more__go .icon {
width: 0.9rem;
height: 0.9rem;
transition: transform 0.35s var(--ease);
}
.dm-more__item:hover .dm-more__go .icon {
transform: translate(3px, -3px);
}
@media (max-width: 960px) {
.dm-below {
grid-template-columns: 1fr 1fr;
}
.dm-col:first-child {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
.dm-below {
grid-template-columns: 1fr;
}
.dm-jump,
.dm-more__list {
grid-template-columns: minmax(0, 1fr);
}
.dm-next:not(.dm-next--prev) {
padding-left: 0;
border-left: 0;
border-top: 1px solid var(--line);
}
.dm-bar__group:first-child .dm-dev span {
display: none;
}
.dm-bar__group:first-child .dm-dev {
padding: 0 0.95rem;
}
.dm-dev__long {
display: none;
}
.dm-frame[data-device="tablet"],
.dm-frame[data-device="phone"] {
max-width: 100%;
}
.dm-screen {
height: clamp(480px, 74vh, 700px);
}
}
.dm-site {
--s-bg: #fff;
--s-ink: #141414;
--s-accent: #ff5a1f;
--s-on: #fff;
--s-alt: #faf6f1;
--s-c1: #f1d6c7;
--s-c2: #e7e2dc;
--s-c3: #d8d2cc;
--r: 12px;
--rb: 10px;
--t-bg: var(--s-bg);
--t-ink: var(--s-ink);
--f-head: var(--font);
display: flex;
flex-direction: column;
min-height: 100%;
font-family: var(--font);
font-size: 16px;
line-height: 1.55;
color: var(--t-ink);
background: var(--t-bg);
text-align: left;
}
.dm-site[data-shape="sharp"] { --r: 2px; --rb: 2px; }
.dm-site[data-shape="pill"] { --r: 20px; --rb: 999px; }
.dm-site[data-head="serif"] { --f-head: Georgia, "Times New Roman", serif; }
.dm-site[data-head="mono"] { --f-head: var(--mono); }
.dm-site,
.dm-site .dm-sec--alt,
.dm-site .dm-sec--dark,
.dm-site .dm-sec--accent {
--t-muted: color-mix(in srgb, var(--t-ink) 78%, var(--t-bg));
--t-line: color-mix(in srgb, var(--t-ink) 16%, var(--t-bg));
--t-soft: color-mix(in srgb, var(--t-ink) 6%, var(--t-bg));
}
.dm-site .dm-sec--alt { --t-bg: var(--s-alt); }
.dm-site .dm-sec--dark { --t-bg: var(--s-ink); --t-ink: var(--s-bg); }
.dm-site .dm-sec--accent { --t-bg: var(--s-accent); --t-ink: var(--s-on); }
.dm-site * {
box-sizing: border-box;
}
:where(.dm-site) p {
margin: 0;
}
:where(.dm-site) :where(h2, h3, h4) {
margin: 0;
font-family: var(--f-head);
}
:where(.dm-site) a {
color: inherit;
text-decoration: none;
}
.dm-site :focus-visible {
outline: 2px solid var(--t-ink);
outline-offset: 2px;
}
:where(.dm-site) :where(ul, ol) {
margin: 0;
padding: 0;
list-style: none;
}
.dm-site .dm-i {
width: 1.15em;
height: 1.15em;
flex: none;
}
.dm-sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.dm-site[data-head="caps"] .dm-h,
.dm-site[data-head="caps"] .dm-hero__h,
.dm-site[data-head="caps"] .dm-brand__name {
font-weight: 800;
letter-spacing: -0.01em;
text-transform: uppercase;
}
.dm-snav {
position: sticky;
top: 0;
z-index: 6;
border-bottom: 1px solid var(--t-line);
background: var(--s-bg);
}
.dm-snav__in {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: min(100% - 48px, 1120px);
height: 64px;
margin-inline: auto;
}
.dm-brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--f-head);
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.dm-brand__mark {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: var(--r);
color: var(--s-on);
background: var(--s-accent);
}
.dm-brand__mark .dm-i {
width: 19px;
height: 19px;
}
.dm-links__list {
display: flex;
gap: 0.2rem;
}
.dm-link {
position: relative;
padding: 0.5rem 0.8rem;
border-radius: var(--rb);
font-size: 0.92rem;
font-weight: 600;
color: var(--t-muted);
transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.dm-link::after {
content: "";
position: absolute;
right: 0.8rem;
bottom: 2px;
left: 0.8rem;
height: 2px;
background: var(--s-accent);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.3s var(--ease);
}
.dm-link:hover {
color: var(--t-ink);
background: var(--t-soft);
}
.dm-link[aria-selected="true"] {
color: var(--t-ink);
}
.dm-link[aria-selected="true"]::after {
transform: scaleX(1);
}
.dm-snav__end {
display: flex;
align-items: center;
gap: 0.6rem;
}
.dm-cart {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.4rem 0.6rem;
border: 1px solid var(--t-line);
border-radius: var(--rb);
font-size: 0.88rem;
font-weight: 700;
}
.dm-cart .dm-i {
width: 18px;
height: 18px;
}
.dm-cart.is-bump {
animation: dm-bump 0.4s var(--ease);
}
@keyframes dm-bump {
40% { transform: scale(1.12); }
}
.dm-burger {
display: none;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--t-line);
border-radius: var(--rb);
color: var(--t-ink);
background: transparent;
cursor: pointer;
}
.dm-burger span {
display: block;
width: 18px;
height: 2px;
margin: 4px auto;
background: currentColor;
transition: transform 0.3s var(--ease);
}
.dm-snav[data-open] .dm-burger span:first-child { transform: translateY(3px) rotate(45deg); }
.dm-snav[data-open] .dm-burger span:last-child { transform: translateY(-3px) rotate(-45deg); }
.dm-site[data-navstyle="center"] .dm-snav__in {
display: grid;
grid-template-columns: 1fr auto 1fr;
}
.dm-site[data-navstyle="center"] .dm-links { order: -1; }
.dm-site[data-navstyle="center"] .dm-snav__end { justify-content: flex-end; }
.dm-btns {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1.5rem;
}
.dm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 44px;
padding: 0 1.2rem;
border: 1px solid transparent;
border-radius: var(--rb);
font: inherit;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.1;
cursor: pointer;
transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.dm-btn--sm {
min-height: 36px;
padding: 0 0.85rem;
font-size: 0.86rem;
}
.dm-btn--solid {
color: var(--s-on);
background: var(--s-accent);
}
.dm-btn--ghost {
color: var(--t-ink);
border-color: var(--t-line);
background: transparent;
}
.dm-btn--dark {
color: var(--s-bg);
background: var(--s-ink);
}
.dm-btn--light {
color: var(--s-ink);
background: var(--s-bg);
}
.dm-sec--accent .dm-btn--solid {
color: var(--s-bg);
background: var(--s-ink);
}
.dm-sec--dark .dm-btn--ghost {
border-color: color-mix(in srgb, var(--t-ink) 40%, transparent);
}
.dm-btn:hover {
transform: translateY(-1px);
}
.dm-btn--ghost:hover {
border-color: var(--t-ink);
}
.dm-btn__i {
width: 1.05em;
height: 1.05em;
transition: transform 0.25s var(--ease);
}
.dm-btn:hover .dm-btn__i {
transform: translateX(3px);
}
.dm-pages {
flex: 1;
}
.dm-page {
outline: none;
}
.dm-page.is-enter {
animation: dm-in 0.45s var(--ease) both;
}
.dm-page.is-enter .dm-sec {
animation: dm-in 0.55s var(--ease) both;
}
.dm-page.is-enter .dm-sec:nth-child(2) { animation-delay: 60ms; }
.dm-page.is-enter .dm-sec:nth-child(3) { animation-delay: 120ms; }
.dm-page.is-enter .dm-sec:nth-child(n + 4) { animation-delay: 180ms; }
@keyframes dm-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
.dm-sec {
padding: 64px 0;
color: var(--t-ink);
background: var(--t-bg);
}
.dm-sec[data-rv="wait"] {
opacity: 0;
transform: translateY(18px);
}
.dm-sec[data-rv="in"] {
transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.dm-sec--hero,
.dm-sec--pagehead,
.dm-sec--strip {
padding: 0;
}
.dm-wrap {
width: min(100% - 48px, 1120px);
margin-inline: auto;
}
.dm-kicker {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.9rem;
font-family: var(--mono);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--t-muted);
}
.dm-kicker::before {
content: "";
width: 22px;
height: 2px;
background: var(--s-accent);
}
.dm-h {
font-size: clamp(26px, 3.6cqw, 40px);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.025em;
}
.dm-h--page {
font-size: clamp(32px, 5cqw, 56px);
line-height: 1.05;
}
.dm-lead {
max-width: 38rem;
margin-top: 1rem;
font-size: clamp(16px, 1.7cqw, 19px);
color: var(--t-muted);
}
.dm-head {
max-width: 40rem;
margin-bottom: 2rem;
}
.dm-head--c {
margin-inline: auto;
text-align: center;
}
.dm-head--c .dm-kicker {
justify-content: center;
}
.dm-sub {
margin-top: 0.7rem;
color: var(--t-muted);
}
.dm-pagehead {
padding: 56px 0 8px;
}
.dm-sec--pagehead {
background: var(--s-bg);
}
.dm-hero {
position: relative;
padding: 72px 0 80px;
}
.dm-hero__h {
font-size: clamp(34px, 5.4cqw, 66px);
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.035em;
}
.dm-hero--split {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: center;
gap: 48px;
}
.dm-hero--center {
display: grid;
justify-items: center;
text-align: center;
}
.dm-hero--center .dm-lead { margin-inline: auto; }
.dm-hero--center .dm-btns { justify-content: center; }
.dm-hero--center .dm-chips-line { justify-content: center; }
.dm-hero--center .dm-hero__art {
width: 100%;
margin-top: 48px;
}
.dm-hero--center .dm-art {
aspect-ratio: 21 / 8;
}
.dm-hero--big .dm-hero__h {
max-width: 16ch;
font-size: clamp(40px, 8.4cqw, 104px);
line-height: 0.98;
letter-spacing: -0.04em;
}
.dm-hero--big .dm-hero__art {
margin-top: 48px;
}
.dm-hero--big .dm-art {
aspect-ratio: 24 / 6;
}
.dm-hero--full {
display: grid;
min-height: 520px;
align-items: center;
padding: 56px 0;
}
.dm-hero--full .dm-hero__art {
position: absolute;
inset: 0;
}
.dm-hero--full .dm-art {
height: 100%;
aspect-ratio: auto;
border-radius: 0;
}
.dm-hero--full .dm-hero__copy {
position: relative;
max-width: 34rem;
padding: 32px;
border-radius: var(--r);
background: var(--s-bg);
box-shadow: 0 0 0 1px var(--t-line);
}
.dm-hero--full {
width: 100%;
padding-inline: max(24px, calc((100% - 1120px) / 2));
}
.dm-hero--split .dm-art {
aspect-ratio: 5 / 4;
}
.dm-chips-line {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1.6rem;
}
.dm-chips-line li {
padding: 0.3rem 0.7rem;
border: 1px solid var(--t-line);
border-radius: 999px;
font-size: 0.82rem;
font-weight: 600;
color: var(--t-muted);
}
.dm-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-block: 1px solid var(--t-line);
}
.dm-strip li {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 20px 18px;
}
.dm-strip li + li {
border-left: 1px solid var(--t-line);
}
.dm-strip__i {
display: grid;
flex: none;
place-items: center;
width: 40px;
height: 40px;
border-radius: var(--r);
color: var(--s-on);
background: var(--s-accent);
}
.dm-strip b {
display: block;
font-size: 0.95rem;
line-height: 1.25;
}
.dm-strip small {
display: block;
font-size: 0.82rem;
line-height: 1.35;
color: var(--t-muted);
}
.dm-art {
--a1: var(--s-c1);
--a2: var(--s-c2);
--a3: var(--s-c3);
position: relative;
display: block;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--r);
background: var(--a1);
}
.dm-art--v1 { --a1: var(--s-c2); --a2: var(--s-c3); --a3: var(--s-c1); }
.dm-art--v2 { --a1: var(--s-c3); --a2: var(--s-c1); --a3: var(--s-c2); }
.dm-art i {
position: absolute;
display: block;
}
.dm-art__g {
position: absolute;
top: 50%;
left: 50%;
display: grid;
place-items: center;
width: clamp(40px, 22%, 84px);
aspect-ratio: 1;
border: 1px solid var(--t-line);
border-radius: var(--r);
color: var(--s-ink);
background: var(--s-bg);
transform: translate(-50%, -50%);
}
.dm-art__g .dm-i {
width: 54%;
height: 54%;
}
.dm-art--circles i:nth-child(1) { top: 14%; left: 10%; width: 48%; aspect-ratio: 1; border-radius: 50%; background: var(--a2); }
.dm-art--circles i:nth-child(2) { right: 8%; bottom: 10%; width: 36%; aspect-ratio: 1; border-radius: 50%; background: var(--a3); }
.dm-art--circles i:nth-child(3) { top: 12%; right: 22%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: var(--s-accent); }
.dm-art--arch i:nth-child(1) { top: 12%; right: 26%; bottom: 0; left: 26%; border-radius: 999px 999px 0 0; background: var(--a2); }
.dm-art--arch i:nth-child(2) { top: 26%; right: 36%; bottom: 0; left: 36%; border-radius: 999px 999px 0 0; background: var(--a3); }
.dm-art--arch i:nth-child(3) { top: 10%; left: 8%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: var(--s-accent); }
.dm-art--stripes i:nth-child(1) { inset: 0; background: repeating-linear-gradient(90deg, var(--a2) 0 12%, transparent 12% 24%); }
.dm-art--stripes i:nth-child(2) { right: 0; bottom: 0; left: 0; height: 28%; background: var(--a3); }
.dm-art--stripes i:nth-child(3) { top: 14%; right: 12%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--s-accent); }
.dm-art--grid i:nth-child(1) { top: 10%; left: 8%; width: 40%; height: 46%; background: var(--a2); border-radius: calc(var(--r) / 2); }
.dm-art--grid i:nth-child(2) { top: 10%; right: 8%; width: 40%; height: 28%; background: var(--a3); border-radius: calc(var(--r) / 2); }
.dm-art--grid i:nth-child(3) { right: 8%; bottom: 10%; left: 8%; height: 30%; background: var(--s-accent); border-radius: calc(var(--r) / 2); opacity: 0.9; }
.dm-art--blocks i:nth-child(1) { bottom: 0; left: 8%; width: 26%; height: 62%; background: var(--a2); }
.dm-art--blocks i:nth-child(2) { bottom: 0; left: 38%; width: 26%; height: 82%; background: var(--a3); }
.dm-art--blocks i:nth-child(3) { right: 8%; bottom: 0; width: 22%; height: 44%; background: var(--s-accent); }
.dm-art--sun i:nth-child(1) { top: 16%; left: 50%; width: 38%; aspect-ratio: 1; border-radius: 50%; background: var(--s-accent); transform: translateX(-50%); }
.dm-art--sun i:nth-child(2) { right: 0; bottom: 0; left: 0; height: 36%; background: var(--a2); }
.dm-art--sun i:nth-child(3) { right: 0; bottom: 0; width: 60%; height: 52%; background: var(--a3); clip-path: polygon(0 100%, 40% 0, 100% 100%); }
.dm-art--diag i:nth-child(1) { inset: 0; background: var(--a2); clip-path: polygon(0 0, 100% 0, 0 100%); }
.dm-art--diag i:nth-child(2) { inset: 0; background: var(--a3); clip-path: polygon(100% 0, 100% 100%, 30% 100%); }
.dm-art--diag i:nth-child(3) { top: 18%; right: 18%; width: 16%; aspect-ratio: 1; border-radius: 50%; background: var(--s-accent); }
.dm-art--dots i:nth-child(1) { inset: 0; background: radial-gradient(circle, var(--a2) 0 22%, transparent 23%) 0 0 / 16% 22%; }
.dm-art--dots i:nth-child(2) { right: 10%; bottom: 14%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--s-accent); }
.dm-art--dots i:nth-child(3) { top: 10%; left: 10%; width: 18%; aspect-ratio: 1; background: var(--a3); }
.dm-art--frame i:nth-child(1) { inset: 12%; border: 3px solid var(--s-ink); background: var(--a2); }
.dm-art--frame i:nth-child(2) { top: 26%; left: 24%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--a3); }
.dm-art--frame i:nth-child(3) { right: 22%; bottom: 22%; width: 26%; height: 22%; background: var(--s-accent); }
.dm-art--waves i:nth-child(1) { right: -10%; bottom: -30%; left: -10%; height: 70%; border-radius: 50%; background: var(--a2); }
.dm-art--waves i:nth-child(2) { right: -20%; bottom: -44%; left: 10%; height: 70%; border-radius: 50%; background: var(--a3); }
.dm-art--waves i:nth-child(3) { top: 14%; right: 14%; width: 16%; aspect-ratio: 1; border-radius: 50%; background: var(--s-accent); }
.dm-art--bars i:nth-child(1) { bottom: 0; left: 10%; width: 22%; height: 38%; background: var(--a2); }
.dm-art--bars i:nth-child(2) { bottom: 0; left: 39%; width: 22%; height: 62%; background: var(--a3); }
.dm-art--bars i:nth-child(3) { bottom: 0; left: 68%; width: 22%; height: 86%; background: var(--s-accent); }
.dm-art--lens i:nth-child(1) { inset: 10%; border-radius: 50%; background: var(--a2); margin-inline: auto; aspect-ratio: 1; height: 80%; width: auto; }
.dm-art--lens i:nth-child(2) { inset: 24%; border-radius: 50%; background: var(--a3); margin-inline: auto; aspect-ratio: 1; height: 52%; width: auto; }
.dm-art--lens i:nth-child(3) { top: 38%; left: 50%; height: 24%; aspect-ratio: 1; border-radius: 50%; background: var(--s-accent); transform: translateX(-50%); }
.dm-art--hero .dm-art__g {
width: clamp(48px, 16%, 96px);
}
.dm-cards {
display: grid;
gap: 20px;
}
.dm-cols-1 { grid-template-columns: 1fr; }
.dm-cols-2 { grid-template-columns: repeat(2, 1fr); }
.dm-cols-3 { grid-template-columns: repeat(3, 1fr); }
.dm-cols-4 { grid-template-columns: repeat(4, 1fr); }
.dm-card {
display: flex;
flex-direction: column;
gap: 14px;
transition: transform 0.3s var(--ease);
}
.dm-card:hover {
transform: translateY(-3px);
}
.dm-card__art {
position: relative;
}
.dm-card__art .dm-art {
transition: transform 0.4s var(--ease);
}
.dm-card:hover .dm-card__art .dm-art {
transform: scale(1.015);
}
.dm-badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
padding: 0.2rem 0.55rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--s-on);
background: var(--s-accent);
}
.dm-badge--flat {
position: static;
align-self: flex-start;
border: 1px solid var(--t-line);
color: var(--t-muted);
background: transparent;
}
.dm-card__t {
font-size: 1.12rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
}
.dm-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: 6px;
}
.dm-card__body > p {
font-size: 0.95rem;
color: var(--t-muted);
}
.dm-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 10px;
}
.dm-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.dm-meta li {
padding: 0.18rem 0.55rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
color: var(--t-muted);
background: var(--t-soft);
}
.dm-cards--icon .dm-card {
padding: 22px;
border: 1px solid var(--t-line);
border-radius: var(--r);
background: var(--t-bg);
}
.dm-cards--icon .dm-card__art {
width: 56px;
}
.dm-cards--icon .dm-art {
aspect-ratio: 1;
}
.dm-cards--icon .dm-art__g {
inset: 0;
width: 100%;
border: 0;
transform: none;
background: transparent;
}
.dm-cards--icon .dm-art i {
display: none;
}
.dm-cards--icon .dm-art {
background: var(--s-accent);
}
.dm-cards--icon .dm-art__g {
color: var(--s-on);
}
.dm-cards--row {
grid-template-columns: repeat(2, 1fr);
}
.dm-cards--row .dm-card {
flex-direction: row;
gap: 18px;
padding: 14px;
border: 1px solid var(--t-line);
border-radius: var(--r);
}
.dm-cards--row .dm-card__art {
flex: 0 0 42%;
}
.dm-cards--row .dm-art {
height: 100%;
min-height: 120px;
aspect-ratio: auto;
}
.dm-cards--avatar .dm-card {
align-items: center;
text-align: center;
}
.dm-cards--avatar .dm-card__art {
width: 112px;
}
.dm-cards--avatar .dm-art {
aspect-ratio: 1;
border-radius: 50%;
}
.dm-cards--avatar .dm-art__g {
width: 46%;
}
.dm-cards--plain .dm-card {
padding: 22px;
border: 1px solid var(--t-line);
border-radius: var(--r);
}
.dm-empty {
padding: 28px 0;
text-align: center;
color: var(--t-muted);
}
.dm-filter {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 22px;
}
.dm-chip {
min-height: 38px;
padding: 0 1rem;
border: 1px solid var(--t-line);
border-radius: var(--rb);
font: inherit;
font-size: 0.88rem;
font-weight: 600;
color: var(--t-ink);
background: transparent;
cursor: pointer;
transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.dm-chip:hover {
border-color: var(--t-ink);
}
.dm-chip[aria-pressed="true"] {
color: var(--s-bg);
border-color: var(--s-ink);
background: var(--s-ink);
}
.dm-site .dm-sec--dark .dm-chip[aria-pressed="true"] {
color: var(--s-ink);
background: var(--s-bg);
border-color: var(--s-bg);
}
[data-dm-items] > [hidden] {
display: none !important;
}
.dm-card.is-in,
.dm-shot.is-in {
animation: dm-in 0.4s var(--ease) both;
}
.dm-tabs__list {
display: flex;
gap: 4px;
margin-bottom: 24px;
overflow-x: auto;
border-bottom: 1px solid var(--t-line);
}
.dm-tab {
position: relative;
flex: none;
padding: 12px 18px;
border: 0;
font: inherit;
font-size: 0.95rem;
font-weight: 600;
color: var(--t-muted);
background: transparent;
cursor: pointer;
transition: color 0.2s var(--ease);
}
.dm-tab::after {
content: "";
position: absolute;
right: 8px;
bottom: -1px;
left: 8px;
height: 3px;
background: var(--s-accent);
transform: scaleX(0);
transition: transform 0.3s var(--ease);
}
.dm-tab:hover {
color: var(--t-ink);
}
.dm-tab[aria-selected="true"] {
color: var(--t-ink);
font-weight: 700;
}
.dm-tab[aria-selected="true"]::after {
transform: scaleX(1);
}
.dm-tabpanel {
outline: none;
}
.dm-tabpanel:not([hidden]) {
animation: dm-in 0.4s var(--ease) both;
}
.dm-tabpanel__lead {
max-width: 38rem;
margin-bottom: 18px;
color: var(--t-muted);
}
.dm-menu {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 48px;
}
.dm-menu li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 14px 0;
border-bottom: 1px dashed var(--t-line);
}
.dm-menu__t b {
display: block;
font-size: 1rem;
}
.dm-menu__t small {
display: block;
font-size: 0.86rem;
color: var(--t-muted);
}
.dm-price {
flex: none;
padding: 0.15rem 0.55rem;
border: 1px dashed var(--t-muted);
border-radius: 999px;
font-size: 0.74rem;
font-weight: 600;
color: var(--t-muted);
white-space: nowrap;
}
.dm-note {
margin-top: 16px;
font-size: 0.86rem;
color: var(--t-muted);
}
.dm-tablewrap {
overflow-x: auto;
border: 1px solid var(--t-line);
border-radius: var(--r);
}
.dm-table {
width: 100%;
min-width: 560px;
border-collapse: collapse;
font-size: 0.94rem;
}
.dm-table th,
.dm-table td {
padding: 13px 16px;
border-bottom: 1px solid var(--t-line);
text-align: left;
}
.dm-table thead th {
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t-muted);
background: var(--t-soft);
}
.dm-table tbody th {
font-weight: 700;
}
.dm-table tbody tr:last-child > * {
border-bottom: 0;
}
.dm-table tbody tr {
transition: background-color 0.2s var(--ease);
}
.dm-table tbody tr:hover {
background: var(--t-soft);
}
.dm-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
grid-auto-rows: clamp(120px, 17cqw, 210px);
gap: 14px;
}
.dm-shot--w { grid-column: span 2; }
.dm-shot--t { grid-row: span 2; }
.dm-shot--b { grid-column: span 2; grid-row: span 2; }
.dm-shot__btn {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 0;
overflow: hidden;
border: 0;
border-radius: var(--r);
color: inherit;
background: transparent;
cursor: zoom-in;
}
.dm-shot .dm-art {
height: 100%;
aspect-ratio: auto;
transition: transform 0.5s var(--ease);
}
.dm-shot__btn:hover .dm-art {
transform: scale(1.05);
}
.dm-shot__cap {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding: 9px 12px;
font-size: 0.86rem;
color: var(--s-ink);
background: var(--s-bg);
transform: translateY(100%);
transition: transform 0.3s var(--ease);
}
.dm-shot__cap small {
font-size: 0.74rem;
color: color-mix(in srgb, var(--s-ink) 66%, var(--s-bg));
}
.dm-shot__btn:hover .dm-shot__cap,
.dm-shot__btn:focus-visible .dm-shot__cap {
transform: none;
}
.dm-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.dm-steps li {
position: relative;
padding-top: 22px;
border-top: 2px solid var(--t-line);
}
.dm-steps li::before {
content: "";
position: absolute;
top: -2px;
left: 0;
width: 36px;
height: 2px;
background: var(--s-accent);
}
.dm-steps__n {
display: grid;
place-items: center;
width: 36px;
height: 36px;
margin-bottom: 14px;
border-radius: 50%;
font-weight: 800;
color: var(--s-on);
background: var(--s-accent);
}
.dm-steps p {
margin-top: 6px;
font-size: 0.94rem;
color: var(--t-muted);
}
.dm-split {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 56px;
}
.dm-split--flip .dm-split__art {
order: 2;
}
.dm-split__art .dm-art {
aspect-ratio: 1 / 0.9;
}
.dm-split__copy > p {
margin-bottom: 12px;
color: var(--t-muted);
}
.dm-checks {
display: grid;
gap: 10px;
margin: 16px 0;
}
.dm-checks li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.96rem;
}
.dm-checks .dm-i {
width: 20px;
height: 20px;
margin-top: 1px;
padding: 3px;
border-radius: 50%;
color: var(--s-on);
background: var(--s-accent);
}
.dm-sec--accent .dm-checks .dm-i {
color: var(--s-accent);
background: var(--s-on);
}
.dm-faq {
max-width: 48rem;
border-top: 1px solid var(--t-line);
}
.dm-faq details {
border-bottom: 1px solid var(--t-line);
}
.dm-faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 0;
font-size: 1.02rem;
font-weight: 700;
cursor: pointer;
list-style: none;
}
.dm-faq summary::-webkit-details-marker {
display: none;
}
.dm-faq__i {
transition: transform 0.3s var(--ease);
}
.dm-faq details[open] .dm-faq__i {
transform: rotate(45deg);
}
.dm-faq details[open] p {
animation: dm-in 0.35s var(--ease) both;
}
.dm-faq p {
padding: 0 0 18px;
max-width: 40rem;
color: var(--t-muted);
}
.dm-formwrap {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 48px;
align-items: start;
}
.dm-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
padding: 24px;
border: 1px solid var(--t-line);
border-radius: var(--r);
background: var(--s-bg);
color: var(--s-ink);
}
.dm-field {
display: grid;
gap: 6px;
}
.dm-field--wide {
grid-column: 1 / -1;
}
.dm-field label {
font-size: 0.84rem;
font-weight: 700;
}
.dm-field input,
.dm-field select,
.dm-field textarea {
width: 100%;
min-height: 44px;
padding: 0 12px;
border: 1px solid color-mix(in srgb, var(--s-ink) 24%, var(--s-bg));
border-radius: var(--rb);
font: inherit;
font-size: 0.95rem;
color: var(--s-ink);
background: var(--s-bg);
}
.dm-field textarea {
padding: 10px 12px;
resize: vertical;
}
.dm-field input:focus-visible,
.dm-field select:focus-visible,
.dm-field textarea:focus-visible {
border-color: var(--s-ink);
outline: 2px solid var(--s-accent);
outline-offset: 1px;
}
.dm-form__note {
margin-top: 10px;
font-size: 0.8rem;
color: color-mix(in srgb, var(--s-ink) 62%, var(--s-bg));
}
.dm-form .dm-btn--solid {
width: fit-content;
}
.dm-infowrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.dm-info {
display: grid;
gap: 14px;
}
.dm-info li {
display: flex;
align-items: center;
gap: 14px;
}
.dm-info__i {
display: grid;
flex: none;
place-items: center;
width: 44px;
height: 44px;
border-radius: var(--r);
color: var(--s-on);
background: var(--s-accent);
}
.dm-info b {
display: block;
font-size: 0.82rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--t-muted);
}
.dm-info small {
display: block;
font-size: 1rem;
}
.dm-hours {
width: 100%;
margin-top: 24px;
border-collapse: collapse;
font-size: 0.94rem;
}
.dm-hours caption {
padding-bottom: 8px;
font-weight: 700;
text-align: left;
}
.dm-hours th,
.dm-hours td {
padding: 9px 0;
border-top: 1px solid var(--t-line);
text-align: left;
}
.dm-hours td {
text-align: right;
color: var(--t-muted);
}
.dm-map {
position: relative;
aspect-ratio: 4 / 3.4;
overflow: hidden;
border: 1px solid var(--t-line);
border-radius: var(--r);
background: var(--s-c1);
}
.dm-map i {
position: absolute;
background: var(--s-bg);
}
.dm-map i:nth-child(1) { top: 38%; right: 0; left: 0; height: 9%; }
.dm-map i:nth-child(2) { top: 0; bottom: 0; left: 30%; width: 7%; }
.dm-map i:nth-child(3) { top: -10%; right: 18%; width: 5%; height: 130%; transform: rotate(24deg); }
.dm-map__pin {
position: absolute;
top: 38%;
left: 30%;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50% 50% 50% 0;
color: var(--s-on);
background: var(--s-accent);
transform: translate(-45%, -105%) rotate(-45deg);
animation: dm-pin 2.4s var(--ease) infinite;
}
.dm-map__pin .dm-i {
transform: rotate(45deg);
}
@keyframes dm-pin {
0%, 100% { translate: 0 0; }
50% { translate: 0 -5px; }
}
.dm-map__tag {
position: absolute;
bottom: 12px;
left: 12px;
padding: 0.25rem 0.6rem;
border-radius: 6px;
font-size: 0.74rem;
font-weight: 700;
color: var(--s-bg);
background: var(--s-ink);
}
.dm-picker {
padding: 28px;
border: 1px solid var(--t-line);
border-radius: var(--r);
background: var(--t-bg);
}
.dm-picker .dm-head {
margin-bottom: 20px;
}
.dm-picker__group {
margin-bottom: 18px;
}
.dm-picker__label {
margin-bottom: 8px;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t-muted);
}
.dm-picker__opts {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dm-picker__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--t-line);
}
.dm-picker__sum {
font-weight: 600;
}
.dm-picker__sum.is-empty {
font-weight: 400;
color: var(--t-muted);
}
.dm-btn[disabled] {
opacity: 0.45;
cursor: not-allowed;
}
.dm-plans {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
.dm-plan {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
padding: 26px;
border: 1px solid var(--t-line);
border-radius: var(--r);
background: var(--t-bg);
transition: transform 0.3s var(--ease);
}
.dm-plan:hover {
transform: translateY(-3px);
}
.dm-plan--hot {
border: 2px solid var(--s-accent);
}
.dm-plan > p:not(.dm-plan__price) {
font-size: 0.94rem;
color: var(--t-muted);
}
.dm-plan .dm-badge {
top: -12px;
left: 20px;
}
.dm-plan__price {
margin: 4px 0;
}
.dm-plan .dm-checks {
flex: 1;
margin: 6px 0 14px;
}
.dm-plan .dm-btn {
width: 100%;
}
.dm-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px 32px;
padding: 8px 0;
}
.dm-cta .dm-btns {
margin-top: 0;
}
.dm-cta p {
margin-top: 6px;
opacity: 0.85;
}
.dm-sec--cta {
padding: 48px 0;
}
.dm-text {
max-width: 44rem;
}
.dm-text p + p {
margin-top: 14px;
}
.dm-text > p {
color: var(--t-muted);
}
.dm-foot {
border-top: 1px solid var(--t-line);
background: var(--s-alt);
color: var(--s-ink);
}
.dm-foot__in {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 32px;
width: min(100% - 48px, 1120px);
margin-inline: auto;
padding: 40px 0 28px;
}
.dm-foot b {
display: block;
margin-bottom: 8px;
font-size: 0.95rem;
}
.dm-foot p {
font-size: 0.9rem;
color: color-mix(in srgb, var(--s-ink) 68%, var(--s-alt));
}
.dm-foot__col li {
padding: 3px 0;
font-size: 0.9rem;
color: color-mix(in srgb, var(--s-ink) 68%, var(--s-alt));
}
.dm-foot__col a:hover {
color: var(--s-ink);
text-decoration: underline;
}
.dm-foot__note {
width: min(100% - 48px, 1120px);
margin: 0 auto;
padding: 14px 0 22px;
border-top: 1px solid var(--t-line);
font-size: 0.78rem;
}
@container dms (max-width: 900px) {
.dm-cols-4,
.dm-cols-3 { grid-template-columns: repeat(2, 1fr); }
.dm-gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(110px, 24cqw, 190px); }
.dm-steps { grid-template-columns: repeat(2, 1fr); }
.dm-strip { grid-template-columns: repeat(2, 1fr); }
.dm-strip li:nth-child(3) { border-left: 0; }
.dm-strip li:nth-child(n + 3) { border-top: 1px solid var(--t-line); }
.dm-plans { grid-template-columns: 1fr; max-width: 30rem; }
.dm-hero--split { gap: 32px; }
}
@container dms (max-width: 760px) {
.dm-snav__in { width: min(100% - 32px, 1120px); }
.dm-wrap,
.dm-foot__in,
.dm-foot__note { width: min(100% - 32px, 1120px); }
.dm-hero--full { padding-inline: 16px; }
.dm-burger { display: block; }
.dm-snav__cta { display: none; }
.dm-links {
position: absolute;
top: 100%;
right: -16px;
left: -16px;
display: none;
padding: 8px 16px 14px;
border-bottom: 1px solid var(--t-line);
background: var(--s-bg);
}
.dm-snav[data-open] .dm-links { display: block; animation: dm-in 0.3s var(--ease) both; }
.dm-links__list { flex-direction: column; }
.dm-link { padding: 12px 8px; }
.dm-link::after { right: auto; left: 8px; width: 24px; }
.dm-site[data-navstyle="center"] .dm-snav__in { display: flex; }
.dm-sec { padding: 48px 0; }
.dm-hero { padding: 48px 0 56px; }
.dm-hero--split,
.dm-split,
.dm-formwrap,
.dm-infowrap { grid-template-columns: 1fr; gap: 28px; }
.dm-split--flip .dm-split__art { order: 0; }
.dm-cards--row { grid-template-columns: 1fr; }
.dm-menu { grid-template-columns: 1fr; }
.dm-foot__in { grid-template-columns: 1fr 1fr; }
.dm-foot__brand { grid-column: 1 / -1; }
.dm-hero--big .dm-art { aspect-ratio: 16 / 7; }
.dm-hero--center .dm-art { aspect-ratio: 16 / 9; }
}
@container dms (max-width: 560px) {
.dm-cols-4,
.dm-cols-3,
.dm-cols-2 { grid-template-columns: 1fr; }
.dm-cols-4.dm-cards--avatar { grid-template-columns: repeat(2, 1fr); }
.dm-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 34cqw; }
.dm-steps,
.dm-form { grid-template-columns: 1fr; }
.dm-strip { grid-template-columns: 1fr; }
.dm-strip li { border-left: 0 !important; }
.dm-strip li + li { border-top: 1px solid var(--t-line); }
.dm-hero__h { font-size: 34px; }
.dm-hero--big .dm-hero__h { font-size: 44px; }
.dm-picker { padding: 20px; }
.dm-cards--row .dm-card { flex-direction: column; }
.dm-cards--row .dm-card__art { flex: none; }
.dm-cards--row .dm-art { aspect-ratio: 16 / 10; height: auto; }
.dm-foot__in { grid-template-columns: 1fr; }
.dm-btns .dm-btn { flex: 1 1 auto; }
}
html[data-motion="off"] .dm *,
html[data-motion="off"] .dm *::before,
html[data-motion="off"] .dm *::after {
animation: none !important;
transition: none !important;
}
html[data-motion="off"] .dm-sec[data-rv] {
opacity: 1 !important;
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
.dm *,
.dm *::before,
.dm *::after {
animation: none !important;
transition: none !important;
}
.dm-sec[data-rv] {
opacity: 1 !important;
transform: none !important;
}
}
html[data-motion="calm"] .dm-map__pin {
animation: none;
}
.dm-stage {
scroll-margin-top: 96px;
}
.dm-lightbox {
--r: 12px;
--t-line: rgb(255 255 255 / 0.25);
font-family: var(--font);
}
.dm-hero__h + .dm-lead {
margin-top: 1.5rem;
}
.dm-hero--full .dm-hero__art {
z-index: 0;
}
.dm-hero--full .dm-hero__copy {
z-index: 1;
}
html[data-motion="off"] .dm-eyebrow__dot,
html[data-motion="calm"] .dm-eyebrow__dot {
animation: none;
}
html[data-motion="off"] .dm-stage,
html[data-motion="off"] .dm-pagelist a,
html[data-motion="off"] .dm-more__item {
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.dm-eyebrow__dot {
animation: none;
}
.reveal-ready .dm-hall:not(.is-in) .dm-stage {
opacity: 1;
transform: none;
}
}
.dm-title { font-weight: 700; }
.dm-hall {
padding-block: clamp(2rem, 4.5vw, 3.5rem);
border-block: 1px solid var(--line);
background: var(--bg-2);
}
.dm-banner {
padding: 0.8rem 1rem;
border: 1px solid var(--line);
border-left: 2px solid var(--brand);
border-radius: var(--r-sm, 10px);
background: var(--surface);
}
.dm-bar__group:first-child {
padding: 0.2rem;
border-color: var(--line);
border-radius: 999px;
background: var(--surface);
}
.dm-bar__group:first-child .dm-dev { border-radius: 999px; }
.dm-bar__group:first-child .dm-dev + .dm-dev { border-left: 0; }
.dm-dev { height: 38px; border-radius: 999px; color: var(--text-2); }
.dm-dev:hover { color: var(--text); border-color: var(--text-3); background: var(--surface-2); }
.dm-bar__group:first-child .dm-dev:hover { background: var(--surface-2); }
.dm-dev[aria-pressed="true"] { color: var(--brand-ink); background: var(--brand-fill); }
.dm-stage {
position: relative;
isolation: isolate;
}
.dm-frame {
border-radius: 16px;
border-color: color-mix(in srgb, var(--brand) 22%, var(--code-line));
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 0.06),
0 0 0 1px rgb(0 0 0 / 0.4),
0 40px 80px -40px var(--brand-glow, rgb(255 90 31 / 0.35)),
0 30px 60px -30px rgb(0 0 0 / 0.8);
}
.dm-frame[data-device="phone"] { border-radius: 30px; }
.dm-frame__bar {
padding: 0.65rem 0.9rem;
background: linear-gradient(180deg, color-mix(in oklab, var(--code-text) 7%, var(--code-bg)), var(--code-bg));
}
.dm-frame__dots i { width: 9px; height: 9px; }
.dm-frame__addr { height: 32px; border-radius: 999px; }
.dm-frame__label { border-radius: 999px; }
.dm-frame__load { background: var(--grad-brand, linear-gradient(90deg, var(--brand), var(--accent, #ffb347))); }
.dm-below {
gap: 1rem;
padding-top: clamp(2.5rem, 5vw, 4rem);
}
.dm-col { padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--line); }
.dm-col__title { font-weight: 700; font-size: 1.15rem; }
.dm-col__note { max-width: none; font-size: 0.92rem; }
.dm-next {
padding: 1.1rem 1.25rem;
border-radius: var(--r, 16px);
}
.dm-more__title { font-weight: 700; }
.dm-more__item {
padding: 1.1rem 1.25rem;
border-radius: var(--r, 16px);
}
@media (max-width: 900px) {
.dm-below { grid-template-columns: 1fr; }
}

/* css/front/faq.css */

.faq {
interpolate-size: allow-keywords;
}
.faq__wrap {
display: grid;
gap: clamp(2rem, 5vw, 4rem);
}
.faq__intro {
max-width: 28rem;
margin: 1rem 0 0;
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--text-2);
}
.faq__search {
position: relative;
display: block;
max-width: 24rem;
margin-top: 1.75rem;
}
.faq__search .icon {
position: absolute;
left: 0;
top: 50%;
width: 18px;
height: 18px;
color: var(--text-3);
transform: translateY(-50%);
pointer-events: none;
}
.faq__input {
display: block;
width: 100%;
min-height: 48px;
padding: 0.6rem 0.25rem 0.6rem 2rem;
border: 0;
border-bottom: 1px solid var(--line-2);
border-radius: 0;
background: transparent;
color: var(--text);
font: inherit;
transition: border-color 0.25s;
}
.faq__input::placeholder {
color: var(--text-3);
}
.faq__input:focus {
outline: none;
border-color: var(--brand);
}
.faq__input:focus-visible {
box-shadow: 0 1px 0 0 var(--brand);
}
.faq__tools {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
margin-top: 1.25rem;
}
.faq__count {
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
.faq__count b {
color: var(--text);
font-weight: 500;
}
.faq__list {
border-bottom: 1px solid var(--line);
}
.faq__item {
border-top: 1px solid var(--line);
}
.faq__item[hidden] {
display: none;
}
.faq__q {
position: relative;
display: grid;
grid-template-columns: 2.6rem 1fr 1.5rem;
gap: 0.5rem;
align-items: center;
padding: 1.3rem 0.25rem;
list-style: none;
cursor: pointer;
color: var(--text);
transition: color 0.2s;
}
.faq__q::-webkit-details-marker {
display: none;
}
.faq__num {
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.08em;
color: var(--text-3);
transition: color 0.25s;
}
.faq__text {
font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.35rem);
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.35;
}
.faq__item[open] .faq__num,
.faq__q:hover .faq__num {
color: var(--brand-600);
}
.faq__icon {
position: relative;
justify-self: end;
width: 16px;
height: 16px;
}
.faq__icon i {
position: absolute;
inset: 7px 0 auto;
height: 2px;
border-radius: 1px;
background: currentColor;
transition: transform 0.35s var(--ease);
}
.faq__icon i + i {
transform: rotate(90deg);
}
.faq__item[open] .faq__icon i + i {
transform: rotate(0);
}
.faq__item::details-content {
block-size: 0;
overflow: hidden;
transition: block-size 0.4s var(--ease), content-visibility 0.4s allow-discrete;
}
.faq__item[open]::details-content {
block-size: auto;
}
.faq__a-inner {
max-width: 40rem;
padding: 0 0.25rem 1.5rem 3.1rem;
}
.faq__a-inner p {
margin: 0 0 0.8rem;
line-height: 1.7;
color: var(--text-2);
}
.faq__a-inner p:last-child {
margin-bottom: 0;
}
.faq__empty {
margin: 1.5rem 0 0;
color: var(--text-2);
}
.faq__more {
margin: 1.75rem 0 0;
color: var(--text-2);
}
.faq__more-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-left: 0.4rem;
color: var(--brand-600);
font-weight: 600;
}
.faq__more-link .icon {
width: 16px;
height: 16px;
transition: transform 0.3s var(--ease);
}
.faq__more-link:hover .icon {
transform: translateX(3px);
}
@media (min-width: 960px) {
.faq__wrap { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
.faq__side { position: sticky; top: calc(var(--header-h) + 2rem); }
}
@media (max-width: 599px) {
.faq__q { grid-template-columns: 2rem 1fr 1.25rem; }
.faq__a-inner { padding-left: 2.5rem; }
}
.faq__title { font-weight: 700; }
.faq__search { max-width: 22rem; }
.faq__search .icon { left: 0.95rem; }
.faq__input {
min-height: 46px;
padding: 0.5rem 1rem 0.5rem 2.5rem;
border: 1px solid var(--line-2);
border-radius: 999px;
background: var(--surface);
}
.faq__input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); }
.faq__input:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); }
.faq__list {
display: grid;
gap: 0.6rem;
border-bottom: 0;
}
.faq__item { border-top: 0; transition: border-color 0.3s; }
.faq__item[open] { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.faq__q {
grid-template-columns: 2.4rem 1fr 1.5rem;
padding: 1.05rem 1.15rem;
border-radius: inherit;
}
.faq__q:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: inherit; }
.faq__text { font-size: 1.02rem; font-weight: 600; }
.faq__icon { color: var(--text-3); }
.faq__a-inner { padding: 0 1.15rem 1.15rem calc(1.15rem + 2.4rem); }
@media (max-width: 599px) {
.faq__q { grid-template-columns: 2rem 1fr 1.25rem; padding: 0.95rem 1rem; }
.faq__a-inner { padding-left: 1rem; }
}

/* css/front/footer.css */

.status {
--status: var(--ok);
display: inline-flex;
align-items: center;
gap: 0.6rem;
min-height: 34px;
padding-inline: 0.8rem 0.95rem;
border: 1px solid var(--line-2);
border-radius: 999px;
background: var(--surface);
font-size: 0.84rem;
font-weight: 500;
color: var(--text-2);
}
.status--busy {
--status: var(--warn);
}
.status--closed {
--status: var(--text-3);
}
.status__dot {
position: relative;
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--status);
}
.status__dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--status);
animation: ping 2.6s var(--ease) infinite;
}
.status--closed .status__dot::after,
.footer.is-paused .status__dot::after {
animation-play-state: paused;
}
.status--closed .status__dot::after {
display: none;
}
.qlink {
position: relative;
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
padding-block: 0.7rem;
padding-inline: 0.75rem 1rem;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--surface);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
color: var(--text);
text-decoration: none;
transition: border-color 0.2s, background-color 0.2s, transform 0.3s var(--ease), box-shadow 0.3s;
--flame-inset: 0.9rem;
--flame-bottom: 0px;
--flame-h: 11px;
}
.qlink:hover,
.qlink:focus-visible {
border-color: color-mix(in srgb, var(--brand) 40%, transparent);
box-shadow: var(--shadow-glow);
transform: translateY(-2px);
}
.qlink__icon {
flex: none;
box-sizing: content-box;
width: 20px;
height: 20px;
padding: 8px;
border-radius: var(--r-sm);
color: var(--brand-600);
background: var(--brand-soft);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
}
.qlink--whatsapp .qlink__icon {
color: var(--ok);
background: var(--ok-soft, var(--surface-2));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent);
}
.qlink__text {
display: grid;
gap: 0.1rem;
min-width: 0;
}
.qlink__label {
font-size: 0.95rem;
font-weight: 650;
line-height: 1.2;
}
.qlink__value {
overflow: hidden;
font-family: var(--mono);
font-size: 0.78rem;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-2);
}
.cta-band {
--cta-flow: 3.6s;
position: relative;
overflow: hidden;
isolation: isolate;
padding-block: clamp(3.5rem, 7vw, 5.75rem);
border-top: 1px solid var(--line);
background: var(--bg-2);
color: var(--text);
}
.cta-band__fx {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.cta-band__glow {
position: absolute;
inset: 0;
background:
radial-gradient(50% 70% at 6% 8%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
radial-gradient(40% 55% at 82% 50%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 72%);
animation: cta-breathe 7s var(--ease-io) infinite alternate paused;
}
@keyframes cta-breathe {
to { opacity: 0.55; }
}
.cta-band__rings {
position: absolute;
top: 50%;
inset-inline-end: clamp(-16rem, -12vw, -6rem);
width: clamp(26rem, 52vw, 44rem);
height: auto;
aspect-ratio: 1;
overflow: visible;
transform: translateY(-50%);
-webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}
.cta-band__ring {
transform-origin: 300px 300px;
animation: cta-spin 80s linear infinite paused;
}
.cta-band__ring circle {
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.cta-band__ring--1 circle { stroke: var(--line-2); }
.cta-band__ring--2 { animation-duration: 46s; animation-direction: reverse; }
.cta-band__ring--2 circle { stroke: color-mix(in srgb, var(--brand) 26%, transparent); }
.cta-band__ring--3 { animation-duration: 30s; }
.cta-band__ring--3 circle { stroke: color-mix(in srgb, var(--brand) 36%, transparent); }
.cta-band__ring .cta-band__sat {
fill: var(--brand);
stroke: color-mix(in srgb, var(--accent) 60%, transparent);
stroke-width: 6;
stroke-opacity: 0.35;
}
.cta-band__ring .cta-band__sat--sm {
fill: var(--accent);
}
.cta-band__core {
stroke: color-mix(in srgb, var(--brand) 18%, transparent);
stroke-width: 1;
transform-origin: 300px 300px;
animation: cta-core 4.5s var(--ease-io) infinite paused;
}
@keyframes cta-spin {
to { transform: rotate(360deg); }
}
@keyframes cta-core {
0%, 100% { transform: scale(0.94); opacity: 0.5; }
50% { transform: scale(1.06); opacity: 1; }
}
.cta-band__beam {
position: absolute;
top: -40%;
bottom: -40%;
inset-inline-start: 0;
width: 22%;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 9%, transparent) 45%, color-mix(in srgb, var(--accent) 7%, transparent) 55%, transparent);
opacity: 0;
transform: translateX(-120%) rotate(14deg);
animation: cta-beam 11s var(--ease-io) 1.2s infinite paused;
}
@keyframes cta-beam {
0% { opacity: 0; transform: translateX(-120%) rotate(14deg); }
8% { opacity: 1; }
48% { opacity: 1; }
56%, 100% { opacity: 0; transform: translateX(520%) rotate(14deg); }
}
.cta-band.fx-live :is(.cta-band__glow, .cta-band__ring, .cta-band__core, .cta-band__beam, .cta-band__rail i, .cta-band__way::before, .cta-band__eyebrow::before) {
animation-play-state: running;
}
.cta-band__grid {
display: grid;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
@media (min-width: 900px) {
.cta-band__grid {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
}
.cta-band__title {
margin: 0.9rem 0 0;
font-size: var(--fs-h2);
font-weight: 700;
line-height: var(--lh-head);
letter-spacing: var(--ls-head);
color: var(--text);
text-wrap: balance;
}
.cta-band__text {
max-width: 34rem;
margin: 1.1rem 0 0;
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--text-2);
}
.cta-band__paths {
position: relative;
padding-inline-start: 1.6rem;
}
.cta-band__rail {
position: absolute;
top: 1.75rem;
bottom: 1.75rem;
inset-inline-start: 0.4rem;
width: 1px;
overflow: hidden;
background: linear-gradient(to bottom, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
}
.cta-band__rail i {
position: absolute;
inset: 0;
animation: cta-flow var(--cta-flow) linear infinite paused;
}
.cta-band__rail i::before {
content: "";
position: absolute;
inset-inline: 0;
top: 0;
height: 22%;
background: linear-gradient(to bottom, transparent, var(--brand), color-mix(in srgb, var(--accent) 80%, var(--brand)), transparent);
}
@keyframes cta-flow {
from { transform: translateY(-22%); }
to { transform: translateY(100%); }
}
.cta-band__ways {
display: grid;
gap: 0.7rem;
margin: 0;
padding: 0;
list-style: none;
}
.cta-band__way {
position: relative;
}
.cta-band__way::before {
content: "";
position: absolute;
top: 50%;
inset-inline-start: calc(-1.6rem + 0.4rem - 4px);
width: 9px;
height: 9px;
margin-top: -4.5px;
border: 1px solid color-mix(in srgb, var(--brand) 55%, transparent);
border-radius: 50%;
background: var(--bg-2);
animation: cta-node var(--cta-flow) linear infinite paused;
}
.cta-band__way:nth-child(1)::before { animation-delay: 0.85s; }
.cta-band__way:nth-child(2)::before { animation-delay: 1.8s; }
.cta-band__way:nth-child(3)::before { animation-delay: 2.75s; }
@keyframes cta-node {
0% { background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent), 0 0 14px var(--brand-glow); }
22%, 100% { background: var(--bg-2); box-shadow: 0 0 0 0 transparent; }
}
.cway {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 1rem;
padding: 1rem 1.15rem;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--r);
background: color-mix(in srgb, var(--surface) 88%, transparent);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
color: var(--text);
text-decoration: none;
transition: border-color 0.3s, transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background-color 0.25s;
}
.cway::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%);
opacity: var(--spot, 0);
transition: opacity 0.3s;
pointer-events: none;
}
.cway > * {
position: relative;
z-index: 1;
}
.cway:hover,
.cway:focus-visible {
border-color: color-mix(in srgb, var(--brand) 42%, transparent);
box-shadow: var(--shadow-glow), inset 0 1px 0 rgb(255 255 255 / 0.06);
transform: translateY(-2px);
}
.cway__badge {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: var(--r-sm);
color: var(--brand-600);
background: var(--brand-soft);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 24%, transparent);
transition: transform 0.4s var(--ease);
}
.cway:hover .cway__badge,
.cway:focus-visible .cway__badge {
transform: rotate(-6deg) scale(1.06);
}
.cway__icon {
width: 21px;
height: 21px;
}
.cway--wa .cway__badge {
color: var(--ok);
background: color-mix(in srgb, var(--ok) 12%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent);
}
.cway__text {
display: grid;
gap: 0.15rem;
min-width: 0;
}
.cway__label {
font-size: 1.05rem;
font-weight: 650;
letter-spacing: -0.02em;
line-height: 1.2;
}
.cway__value {
overflow: hidden;
font-size: 0.86rem;
line-height: 1.35;
color: var(--text-2);
text-overflow: ellipsis;
white-space: nowrap;
}
.cway__arrow {
width: 20px;
height: 20px;
color: var(--text-3);
transition: transform 0.35s var(--ease), color 0.25s;
}
.cway:hover .cway__arrow,
.cway:focus-visible .cway__arrow {
color: var(--brand-600);
transform: translate(3px, -3px);
}
[dir="rtl"] .cway__arrow {
transform: scaleX(-1);
}
[dir="rtl"] .cway:hover .cway__arrow,
[dir="rtl"] .cway:focus-visible .cway__arrow {
transform: scaleX(-1) translate(3px, -3px);
}
@media (max-width: 599px) {
.cta-band__rings {
inset-inline-end: -14rem;
opacity: 0.6;
}
}
.fx-lvl-calm .cta-band :is(.cta-band__glow, .cta-band__ring, .cta-band__core, .cta-band__beam, .cta-band__rail i, .cta-band__way::before) {
animation: none;
}
.fx-lvl-calm .cta-band__rail i,
.fx-lvl-off .cta-band__rail i,
.fx-lvl-off .cta-band__beam,
.fx-lvl-calm .cta-band__beam {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.cta-band :is(.cta-band__glow, .cta-band__ring, .cta-band__core, .cta-band__beam, .cta-band__rail i, .cta-band__way::before) {
animation: none !important;
}
.cta-band__rail i,
.cta-band__beam {
display: none;
}
}
@property --avail-a {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.avail {
--st: var(--ok);
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
gap: 0.8rem;
margin: 0;
padding-block: 0.6rem;
padding-inline: 0.8rem 1.15rem;
border-radius: 999px;
background:
radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--st) 12%, transparent), transparent 60%),
var(--surface);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 10px 30px -18px color-mix(in srgb, var(--st) 60%, transparent);
white-space: nowrap;
}
.avail::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
padding: 1px;
border-radius: inherit;
background:
conic-gradient(from var(--avail-a), transparent 0deg, transparent 200deg, color-mix(in srgb, var(--brand) 85%, transparent) 280deg, var(--accent) 320deg, transparent 360deg),
linear-gradient(var(--line-2), var(--line-2));
-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);
animation: avail-spin 6s linear infinite;
pointer-events: none;
}
@keyframes avail-spin {
to { --avail-a: 360deg; }
}
.avail--busy {
--st: var(--warn);
}
.avail--closed {
--st: var(--text-3);
}
.avail__dot {
position: relative;
display: grid;
place-items: center;
flex: none;
width: 26px;
height: 26px;
border-radius: 50%;
background: color-mix(in srgb, var(--st) 14%, transparent);
}
.avail__dot::after {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--st);
box-shadow: 0 0 10px color-mix(in srgb, var(--st) 70%, transparent);
}
.avail__dot i {
position: absolute;
inset: 0;
border: 1px solid var(--st);
border-radius: 50%;
opacity: 0;
animation: avail-ping 2.4s var(--ease-out) infinite;
}
@keyframes avail-ping {
0% { opacity: 0.7; transform: scale(0.45); }
100% { opacity: 0; transform: scale(1.35); }
}
.avail--closed .avail__dot i,
.avail--closed::before {
animation: none;
}
.avail__body {
display: grid;
gap: 0.1rem;
line-height: 1.2;
}
.avail__text {
font-size: 0.92rem;
font-weight: 650;
letter-spacing: -0.01em;
color: var(--text);
}
.avail__meta {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.04em;
color: var(--text-3);
}
.avail__clock {
color: var(--text-2);
font-variant-numeric: tabular-nums;
}
.footer.is-paused .avail::before,
.footer.is-paused .avail__dot i,
.fx-lvl-calm .avail::before {
animation-play-state: paused;
}
.fx-lvl-off .avail::before,
.fx-lvl-off .avail__dot i {
animation: none;
}
@media (prefers-reduced-motion: reduce) {
.avail::before,
.avail__dot i {
animation: none;
}
}
.footer {
position: relative;
isolation: isolate;
overflow-x: clip;
padding-block: clamp(2.25rem, 4.5vw, 3.5rem) 0;
border-top: 1px solid var(--line);
background: var(--bg);
color: var(--text);
}
.footer::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(45% 35% at 50% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%),
linear-gradient(to bottom, transparent 60%, color-mix(in srgb, var(--bg-2) 70%, transparent));
pointer-events: none;
}
.footer::after {
content: "";
position: absolute;
top: -1px;
inset-inline: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--brand), transparent);
transform: scaleX(0);
transition: transform 1.4s var(--ease-io);
pointer-events: none;
}
.footer.fx-seen::after {
transform: scaleX(1);
}
.footer__inner {
display: grid;
gap: clamp(2rem, 4vw, 3rem);
}
.fbar {
display: grid;
gap: 0.9rem;
align-items: center;
padding: 0.75rem;
border: 1px solid var(--line);
border-radius: var(--r-lg);
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface) 70%, transparent));
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
}
.fbar__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
gap: 0.25rem;
margin: 0;
padding: 0;
list-style: none;
}
.fbar__item {
display: flex;
align-items: center;
gap: 0.85rem;
min-width: 0;
padding: 0.55rem 0.75rem;
}
.fbar__icon {
display: grid;
flex: none;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
color: var(--brand-600);
background: var(--surface-2);
transition: transform 0.4s var(--ease), border-color 0.3s;
}
.fbar__icon .icon {
width: 19px;
height: 19px;
}
.fbar__item:hover .fbar__icon {
border-color: color-mix(in srgb, var(--brand) 45%, transparent);
transform: translateY(-2px);
}
.fbar__body {
display: grid;
gap: 0.15rem;
min-width: 0;
}
.fbar__value {
overflow-wrap: anywhere;
font-size: 0.95rem;
font-weight: 650;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--text);
text-decoration: none;
}
a.fbar__value:hover,
a.fbar__value:focus-visible {
color: var(--brand-600);
}
.fbar__label {
font-size: 0.8rem;
color: var(--text-3);
}
.fbar .avail {
justify-self: start;
}
@media (min-width: 900px) {
.fbar__item + .fbar__item {
border-inline-start: 1px solid var(--line);
}
}
@media (min-width: 1100px) {
.fbar {
grid-template-columns: minmax(0, 1fr) auto;
padding-inline-end: 1rem;
}
.fbar__list {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
grid-auto-flow: column;
}
.fbar .avail {
justify-self: end;
}
}
.footer__grid {
display: grid;
gap: 2.25rem;
}
@media (min-width: 1000px) {
.footer__grid {
grid-template-columns: minmax(15rem, 0.9fr) minmax(0, 3fr);
gap: 2.5rem;
}
}
.footer__brand {
display: grid;
align-content: start;
gap: 1.15rem;
}
.footer__logo {
display: inline-flex;
justify-self: start;
color: var(--text);
}
.footer__logo .logo__svg {
height: 42px;
width: auto;
}
.footer__address {
display: grid;
gap: 0.55rem;
margin: 0;
font-style: normal;
font-size: 0.92rem;
line-height: 1.45;
color: var(--text-2);
}
.footer__line {
display: flex;
align-items: center;
gap: 0.6rem;
min-width: 0;
}
.footer__line > .icon {
flex: none;
width: 16px;
height: 16px;
color: var(--brand-600);
}
.footer__line a {
color: var(--text-2);
text-decoration: none;
transition: color 0.2s;
}
.footer__line a:hover,
.footer__line a:focus-visible {
color: var(--text);
}
.footer__copyable .copy {
width: 28px;
height: 28px;
margin-inline-start: 0.1rem;
opacity: 0.6;
transition: opacity 0.2s;
}
.footer__copyable:hover .copy,
.footer__copyable .copy:focus-visible {
opacity: 1;
}
.footer__social {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.2rem 0 0;
padding: 0;
list-style: none;
}
.footer__social-link {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--line-2);
border-radius: 50%;
color: var(--text-2);
background: var(--surface);
transition: color 0.2s, border-color 0.2s, transform 0.3s var(--ease), background-color 0.2s;
}
.footer__social-link .icon {
width: 17px;
height: 17px;
}
.footer__social-link:hover,
.footer__social-link:focus-visible {
color: var(--brand-600);
border-color: color-mix(in srgb, var(--brand) 45%, transparent);
background: var(--brand-soft);
transform: translateY(-2px);
}
.footer__cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem 1rem;
}
@media (min-width: 720px) {
.footer__cols {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
}
.footer__col {
padding-inline: 1.5rem 0.5rem;
border-inline-start: 1px solid var(--line);
}
}
.footer__title {
margin: 0 0 1rem;
font-size: 0.98rem;
font-weight: 650;
letter-spacing: -0.01em;
color: var(--text);
}
.footer__list {
display: grid;
gap: 0.7rem;
margin: 0;
padding: 0;
list-style: none;
}
.footer__list a {
display: inline-block;
font-size: 0.9rem;
line-height: 1.35;
color: var(--text-2);
text-decoration: none;
transition: color 0.2s, transform 0.3s var(--ease);
}
.footer__list a:hover,
.footer__list a:focus-visible {
color: var(--text);
transform: translateX(3px);
}
[dir="rtl"] .footer__list a:hover,
[dir="rtl"] .footer__list a:focus-visible {
transform: translateX(-3px);
}
.footer__list a[aria-current="page"] {
color: var(--brand-600);
}
.footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1.5rem;
padding-block: 1.25rem 1.5rem;
border-top: 1px solid var(--line);
}
.footer__copy {
margin: 0;
font-size: 0.85rem;
color: var(--text-3);
}
.footer__bottom-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem;
}
.footer__linkbtn {
padding: 0.35rem 0.85rem;
border: 0;
background: none;
font: inherit;
font-size: 0.85rem;
color: var(--text-2);
text-decoration: none;
cursor: pointer;
transition: color 0.2s;
}
.footer__linkbtn + .footer__linkbtn {
border-inline-start: 1px solid var(--line-2);
}
.footer__linkbtn:hover,
.footer__linkbtn:focus-visible {
color: var(--text);
}
.footer__up {
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-inline-start: 0.6rem;
border: 1px solid var(--line-2);
border-radius: 50%;
color: var(--text);
background: var(--surface);
transition: border-color 0.2s, color 0.2s, transform 0.3s var(--ease), box-shadow 0.3s;
}
.footer__up .icon {
width: 17px;
height: 17px;
}
.footer__up:hover,
.footer__up:focus-visible {
color: var(--brand-600);
border-color: color-mix(in srgb, var(--brand) 50%, transparent);
box-shadow: var(--shadow-glow);
transform: translateY(-3px);
}
@media (max-width: 639px) {
.footer__bottom {
flex-direction: column;
align-items: flex-start;
}
.fbar .avail {
white-space: normal;
}
}
@media print {
.cta-band,
.fbar,
.footer__social,
.footer__bottom-links {
display: none !important;
}
}

/* css/front/home.css */

.page-home {
--hm-glow: color-mix(in srgb, var(--brand) 14%, transparent);
--hm-glow-2: color-mix(in srgb, var(--brand) 8%, transparent);
--hm-radius: 16px;
--hm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
.page-home .amb__objs {
display: none;
}
.hm-head {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
column-gap: clamp(2rem, 6vw, 6rem);
align-items: end;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.hm-head > .eyebrow {
grid-column: 1 / -1;
margin-bottom: 1.1rem;
}
.hm-head--col {
grid-template-columns: minmax(0, 1fr);
align-items: start;
margin-bottom: 0;
}
.hm-head--col > .eyebrow {
grid-column: auto;
}
.hm-num {
font-variant-numeric: tabular-nums;
color: var(--text-3);
}
.hm-num::after {
content: "/";
margin-left: 0.55rem;
color: var(--brand-600);
}
.hm-title {
margin: 0;
font-size: var(--fs-h2);
font-weight: 700;
line-height: var(--lh-head);
letter-spacing: var(--ls-head);
text-wrap: balance;
color: var(--text);
}
.hm-intro {
max-width: 30rem;
margin: 1rem 0 0;
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--text-2);
text-wrap: pretty;
}
.hm-head:not(.hm-head--col):not(.hm-head--stat) .hm-intro {
margin-top: 0;
justify-self: end;
}
.hm-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding-block: 0.45rem;
font-weight: 600;
text-decoration: none;
color: var(--text);
background: linear-gradient(var(--brand), var(--brand)) 0 100% / 0 1px no-repeat, linear-gradient(var(--line-2), var(--line-2)) 0 100% / 100% 1px no-repeat;
transition: background-size 0.5s var(--ease), color 0.2s;
}
.hm-link .icon {
width: 1em;
height: 1em;
transition: transform 0.3s var(--ease);
}
.hm-link:hover {
color: var(--brand-600);
background-size: 100% 1px, 100% 1px;
}
.hm-link:hover .icon {
transform: translateX(4px);
}
.hm-hero__word {
position: relative;
display: inline-block;
color: var(--brand-600);
}
.hm-wave {
position: absolute;
left: -0.02em;
right: -0.02em;
bottom: -0.16em;
width: calc(100% + 0.04em);
height: 0.24em;
color: var(--brand);
overflow: visible;
pointer-events: none;
}
.hm-wave path {
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
.hm-ready .hm-wave path,
.is-in .hm-wave path {
animation: hm-wave-draw 1.1s var(--hm-ease-out) 0.85s forwards;
}
@keyframes hm-wave-draw {
to { stroke-dashoffset: 0; }
}
@media (max-width: 899px) {
.hm-head,
.hm-head--stat {
grid-template-columns: minmax(0, 1fr);
}
.hm-head:not(.hm-head--col):not(.hm-head--stat) .hm-intro {
justify-self: start;
margin-top: 1rem;
}
}
.hm-hero {
position: relative;
overflow: clip;
padding: calc(var(--header-h) + clamp(3.5rem, 7vw, 6.5rem)) 0 clamp(3rem, 6vw, 5rem);
background: var(--bg);
color: var(--text);
}
.hm-hero__light {
position: absolute;
inset: 0;
background:
radial-gradient(55% 45% at 72% 12%, var(--hm-glow), transparent 70%),
radial-gradient(40% 35% at 10% 90%, var(--hm-glow-2), transparent 70%);
pointer-events: none;
}
.hm-hero__inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(2.5rem, 5vw, 4rem);
align-items: center;
}
@media (min-width: 1100px) {
.hm-hero--stack .hm-hero__inner {
grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
column-gap: clamp(2rem, 4vw, 4rem);
}
}
.hm-hero__copy {
max-width: 38rem;
}
.hm-hero__eyebrow {
margin-bottom: 1.4rem;
}
.hm-hero__title {
margin: 0;
font-size: clamp(2.8rem, 1.7rem + 3.9vw, 5.5rem);
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.035em;
color: var(--text);
text-wrap: balance;
}
.hm-hero__ln {
display: block;
overflow: hidden;
padding-bottom: 0.12em;
margin-bottom: -0.08em;
}
.hm-hero__ln > span {
display: inline-block;
}
.hm-hero__lead {
max-width: 32rem;
margin: 1.5rem 0 0;
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--text-2);
text-wrap: pretty;
}
.hm-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 2rem;
}
.hm-ready .hm-in {
animation: hm-in 1s var(--hm-ease-out) both;
animation-delay: calc(var(--hm-d, 0) * 1ms);
}
.hm-ready .hm-hero__ln > .hm-in {
animation-name: hm-in-line;
animation-duration: 1.1s;
}
.hm-ready .hm-hero__stage.hm-in {
animation-name: hm-in-stage;
animation-duration: 1.4s;
}
[data-hm-step="1"] { --hm-d: 0; }
[data-hm-step="2"] { --hm-d: 120; }
[data-hm-step="3"] { --hm-d: 260; }
[data-hm-step="4"] { --hm-d: 520; }
[data-hm-step="5"] { --hm-d: 640; }
[data-hm-step="6"] { --hm-d: 780; }
@keyframes hm-in {
from { opacity: 0; transform: translate3d(0, 18px, 0); }
to { opacity: 1; transform: none; }
}
@keyframes hm-in-line {
from { transform: translate3d(0, 108%, 0); }
to { transform: none; }
}
@keyframes hm-in-stage {
from { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.97); }
to { opacity: 1; transform: none; }
}
.hm-hero__stage {
position: relative;
width: 100%;
max-width: 680px;
margin-inline: auto;
}
.hstack {
--hs-rot: 0deg;
--hs-sc: 1;
container-type: inline-size;
position: relative;
aspect-ratio: 1.18;
perspective: 1600px;
}
.hstack__card {
--py: 0px;
position: absolute;
display: block;
width: 70%;
border-radius: 12px;
border: 1px solid var(--line-2);
background: var(--surface);
color: var(--text);
text-decoration: none;
overflow: hidden;
box-shadow: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 40px 70px -36px rgb(0 0 0 / 0.85), 0 12px 28px -18px rgb(0 0 0 / 0.6);
left: 0;
top: 0;
transform: translate3d(calc(var(--hs-x, 14) * 1cqw), calc(var(--py) + var(--hs-y, 4) * var(--hs-yk, 0.847cqw)), 0) rotate(var(--hs-rot)) scale(var(--hs-sc));
transform-origin: 50% 70%;
transition: transform 0.9s var(--hm-ease-out), opacity 0.6s var(--ease), filter 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.4s;
will-change: transform;
isolation: isolate;
}
.hstack__deck {
position: absolute;
inset: 0;
}
.hstack__card[data-slot="front"] {
--hs-x: 14;
--hs-y: 4;
--hs-rot: 0deg;
--hs-sc: 1;
z-index: 4;
}
.hstack__card[data-slot="left"] {
--hs-x: -3;
--hs-y: 20;
--hs-rot: -7deg;
--hs-sc: 0.84;
z-index: 2;
filter: saturate(0.85) brightness(0.86);
}
.hstack__card[data-slot="right"] {
--hs-x: 32;
--hs-y: 14;
--hs-rot: 6deg;
--hs-sc: 0.86;
z-index: 3;
filter: saturate(0.85) brightness(0.9);
}
.hstack__card[data-slot="out"] {
--hs-x: 14;
--hs-y: 26;
--hs-rot: 0deg;
--hs-sc: 0.7;
z-index: 1;
opacity: 0;
pointer-events: none;
}
.hstack__card:not([data-slot="front"]) {
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.hstack__card[data-slot="left"]:hover,
.hstack__card[data-slot="right"]:hover {
filter: none;
border-color: color-mix(in srgb, var(--brand) 40%, var(--line-2));
}
}
.hstack__card[data-slot="front"] {
border-color: color-mix(in srgb, var(--brand) 42%, var(--line-2));
box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 50px 90px -40px rgb(0 0 0 / 0.9), 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent), 0 24px 60px -30px var(--brand-glow, color-mix(in srgb, var(--brand) 35%, transparent));
}
.hstack__card:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
}
.hstack__bar {
display: flex;
align-items: center;
gap: 0.6rem;
height: 30px;
padding: 0 0.7rem;
border-bottom: 1px solid var(--line);
background: var(--surface-2);
}
.hstack__dots,
.hrc__dots,
.hwire__dots {
display: inline-flex;
gap: 5px;
}
.hstack__dots i,
.hrc__dots i,
.hwire__dots i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--line-2);
}
.hstack__url,
.hrc__url,
.hwire__url {
display: inline-flex;
align-items: center;
gap: 0.4rem;
flex: 1;
min-width: 0;
height: 18px;
padding: 0 0.55rem;
border-radius: 5px;
background: var(--bg);
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.02em;
color: var(--text-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hstack__url .icon,
.hrc__url .icon,
.hwire__url .icon {
flex: none;
width: 10px;
height: 10px;
color: var(--text-3);
}
.hstack__screen {
display: block;
aspect-ratio: 1600 / 911;
overflow: hidden;
background: var(--surface-2);
}
.hstack__screen img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.hstack__tag {
position: absolute;
left: 0.8rem;
bottom: 0.8rem;
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
padding: 0.4rem 0.7rem;
border-radius: 8px;
background: color-mix(in srgb, var(--bg) 85%, transparent);
border: 1px solid var(--line-2);
font-size: 0.8rem;
color: var(--text);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.35s var(--ease), transform 0.45s var(--hm-ease-out);
backdrop-filter: none;
}
.hstack__tag span {
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--brand-600);
}
.hstack__card[data-slot="front"] .hstack__tag {
opacity: 1;
transform: none;
}
.hstack__phone {
--py: 0px;
position: absolute;
right: 3%;
bottom: -3%;
z-index: 5;
width: 21%;
aspect-ratio: 640 / 1386;
padding: 4px;
border-radius: 11% / 5.2%;
background: var(--surface-3);
border: 1px solid var(--line-2);
box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset, 0 40px 60px -30px rgb(0 0 0 / 0.9);
transform: translate3d(0, var(--py), 0);
will-change: transform;
}
.hstack__phone-screen {
display: block;
width: 100%;
height: 100%;
border-radius: 9% / 4.3%;
overflow: hidden;
background: var(--surface-2);
}
.hstack__phone-screen img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.hstack__nav {
position: absolute;
left: 14%;
bottom: -9%;
z-index: 6;
display: flex;
align-items: center;
gap: 0.75rem;
}
.hstack__arrow {
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--line-2);
background: var(--surface);
color: var(--text);
cursor: pointer;
transition: border-color 0.25s, color 0.25s, transform 0.25s var(--hm-ease-out), background-color 0.25s;
}
.hstack__arrow .icon { width: 16px; height: 16px; }
.hstack__arrow:hover {
border-color: color-mix(in srgb, var(--brand) 55%, var(--line-2));
color: var(--brand-600);
transform: translateY(-1px);
}
.hstack__arrow:focus-visible,
.hstack__pip:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
}
.hstack__pips {
display: inline-flex;
align-items: center;
gap: 6px;
}
.hstack__pip {
position: relative;
width: 22px;
height: 24px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.hstack__pip::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 3px;
margin-top: -1.5px;
border-radius: 3px;
background: var(--line-2);
transition: background-color 0.3s;
}
.hstack__pip[aria-pressed="true"] { width: 44px; }
.hstack__pip-fill {
position: absolute;
left: 0;
top: 50%;
height: 3px;
margin-top: -1.5px;
width: 100%;
border-radius: 3px;
background: var(--brand);
transform: scaleX(0);
transform-origin: left center;
}
.hstack__pip[aria-pressed="true"] .hstack__pip-fill { transform: scaleX(1); }
.hstack.is-auto .hstack__pip[aria-pressed="true"] .hstack__pip-fill {
animation: hstack-pip var(--hs-dur, 5200ms) linear forwards;
}
.hstack.is-paused .hstack__pip[aria-pressed="true"] .hstack__pip-fill {
animation-play-state: paused;
}
@keyframes hstack-pip {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.hstack__phone-screen img { transition: opacity 0.35s var(--ease); }
.hstack__phone-screen img.is-swapping { opacity: 0; }
[dir="rtl"] .hstack__nav { left: auto; right: 14%; }
[dir="rtl"] .hstack__arrow .icon { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
.hstack.is-tilting {
transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transition: transform 0.6s var(--hm-ease-out);
transform-style: preserve-3d;
}
}
@media (max-width: 1099px) {
.hm-hero__stage {
max-width: 600px;
}
}
@media (max-width: 599px) {
.hm-hero {
padding-top: calc(var(--header-h) + 2.5rem);
}
.hstack {
aspect-ratio: 1.05;
--hs-yk: 0.952cqw;
}
.hstack__card {
width: 76%;
}
.hstack__card[data-slot="front"] { --hs-x: 12; }
.hstack__tag { left: 0.5rem; bottom: 0.5rem; padding: 0.25rem 0.5rem; font-size: 0.7rem; }
.hstack__tag span { font-size: 0.58rem; }
.hstack__card[data-slot="left"] { --hs-x: -6; --hs-y: 24; }
.hstack__card[data-slot="right"] { --hs-x: 30; --hs-y: 16; }
.hstack__phone { width: 24%; right: 0; }
.hstack__url { display: none; }
}
.hsec {
position: relative;
border-block: 1px solid var(--line);
background: var(--bg-2);
}
.hsec__inner {
display: flex;
align-items: center;
gap: 1rem;
min-height: 60px;
}
.hsec__label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex: none;
margin: 0;
padding-right: 1rem;
border-right: 1px solid var(--line);
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brand-600);
}
.hsec__label .icon {
width: 14px;
height: 14px;
}
.hsec__viewport {
flex: 1;
min-width: 0;
overflow: hidden;
}
.hsec.is-marquee .hsec__viewport {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.hsec__track {
display: flex;
flex-wrap: wrap;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.hsec.is-marquee .hsec__track {
flex-wrap: nowrap;
width: max-content;
animation: hsec-move var(--hsec-dur, 48s) linear infinite;
}
.hsec.is-marquee:hover .hsec__track,
.hsec.is-marquee:focus-within .hsec__track,
.hsec.is-marquee.is-paused .hsec__track {
animation-play-state: paused;
}
@keyframes hsec-move {
to { transform: translate3d(-50%, 0, 0); }
}
.hsec__item {
flex: none;
}
.hsec__link {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 1rem 1.4rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--text-2);
text-decoration: none;
white-space: nowrap;
transition: color 0.25s;
}
.hsec__link::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--line-2);
transition: background-color 0.25s, transform 0.3s var(--ease);
}
a.hsec__link:hover,
a.hsec__link:focus-visible {
color: var(--text);
}
a.hsec__link:hover::before,
a.hsec__link:focus-visible::before {
background: var(--brand);
transform: scale(1.5);
}
@media (max-width: 599px) {
.hsec__label { display: none; }
.hsec__link { padding: 0.85rem 1rem; font-size: 0.9rem; }
}
.hm-refs {
background: var(--bg);
}
.hm-refs__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.25rem, 2.5vw, 2rem);
margin: 0;
padding: 0;
list-style: none;
}
.hm-refs__foot {
margin: clamp(2rem, 4vw, 3rem) 0 0;
text-align: center;
}
@media (max-width: 899px) {
.hm-refs__grid { grid-template-columns: minmax(0, 1fr); }
}
.hrc {
--hrc-dur: 7s;
position: relative;
display: grid;
height: 100%;
border-radius: var(--hm-radius);
border: 1px solid var(--line);
background: var(--surface);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
color: var(--text);
overflow: hidden;
transition: border-color 0.35s, transform 0.6s var(--hm-ease-out), box-shadow 0.5s var(--ease);
}
.hrc:hover {
border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 30px 60px -36px color-mix(in srgb, var(--brand) 40%, transparent);
}
.hrc__visual {
position: relative;
display: block;
padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 2.5vw, 1.5rem) 0;
background: radial-gradient(70% 60% at 50% 100%, var(--hm-glow-2), transparent 70%);
outline: none;
}
.hrc__browser {
position: relative;
display: block;
width: 86%;
border-radius: 10px 10px 0 0;
border: 1px solid var(--line-2);
border-bottom: 0;
background: var(--surface-2);
overflow: hidden;
box-shadow: 0 30px 50px -30px rgb(0 0 0 / 0.8);
}
.hrc__bar {
display: flex;
align-items: center;
gap: 0.6rem;
height: 30px;
padding: 0 0.7rem;
border-bottom: 1px solid var(--line);
}
.hrc__live {
flex: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: var(--mono);
font-size: 9.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ok);
}
.hrc__live::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
}
.hrc__screen {
position: relative;
display: block;
aspect-ratio: 1600 / 911;
overflow: hidden;
background: var(--surface-2);
}
.hrc__desktop {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.hrc__page {
position: absolute;
inset: 0;
display: block;
container-type: size;
opacity: 0;
transition: opacity 0.45s var(--ease);
}
.hrc__page img {
display: block;
width: 100%;
height: auto;
transform: translate3d(0, 0, 0);
transition: transform 0.6s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.hrc:hover .hrc__page,
.hrc:focus-within .hrc__page {
opacity: 1;
}
.hrc:hover .hrc__page img,
.hrc:focus-within .hrc__page img {
transform: translate3d(0, calc(100cqh - 100%), 0);
transition: transform var(--hrc-dur) linear 0.25s;
}
}
.hrc.is-touring .hrc__page {
opacity: 1;
}
.hrc.is-touring .hrc__page img {
transform: translate3d(0, calc(100cqh - 100%), 0);
transition: transform var(--hrc-dur) linear 0.3s;
}
.hrc__phone {
position: absolute;
right: clamp(1rem, 2.5vw, 1.5rem);
bottom: -6%;
z-index: 2;
display: block;
width: 19%;
aspect-ratio: 640 / 1386;
padding: 3px;
border-radius: 11% / 5.2%;
background: var(--surface-3);
border: 1px solid var(--line-2);
box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset, 0 30px 50px -26px rgb(0 0 0 / 0.9);
transform: translate3d(0, 0, 0);
transition: transform 0.7s var(--hm-ease-out);
}
.hrc:hover .hrc__phone {
transform: translate3d(0, -4%, 0);
}
.hrc__phone-screen {
display: block;
width: 100%;
height: 100%;
border-radius: 9% / 4.3%;
overflow: hidden;
}
.hrc__phone-screen img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.hrc__hint {
position: absolute;
left: clamp(1rem, 2.5vw, 1.5rem);
bottom: 0.75rem;
display: none;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.6rem;
border-radius: 6px;
border: 1px solid var(--line-2);
background: color-mix(in srgb, var(--bg) 85%, transparent);
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-2);
transition: opacity 0.3s;
}
.hrc__hint .icon {
width: 12px;
height: 12px;
color: var(--brand-600);
}
@media (hover: hover) and (pointer: fine) {
.hrc__hint { display: inline-flex; }
.hrc:hover .hrc__hint { opacity: 0; }
}
.hrc__body {
display: grid;
gap: 0.6rem;
padding: clamp(1.1rem, 2.5vw, 1.5rem);
border-top: 1px solid var(--line);
}
.hrc__top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
}
.hrc__title {
margin: 0;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
}
.hrc__domain {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.6rem;
border-radius: 999px;
border: 1px solid var(--line-2);
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.02em;
color: var(--text-2);
text-decoration: none;
transition: color 0.25s, border-color 0.25s;
}
.hrc__domain .icon {
width: 12px;
height: 12px;
}
.hrc__domain:hover {
color: var(--brand-600);
border-color: var(--brand);
}
.hrc__meta {
margin: 0;
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
}
.hrc__summary {
margin: 0;
font-size: 0.97rem;
line-height: 1.6;
color: var(--text-2);
text-wrap: pretty;
}
.hrc__tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0.2rem 0 0;
padding: 0;
list-style: none;
}
.hrc__tags li {
padding: 0.25rem 0.55rem;
border-radius: 6px;
background: var(--surface-2);
border: 1px solid var(--line);
font-size: 0.74rem;
color: var(--text-2);
}
.hrc__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
margin-top: 0.5rem;
}
@media (max-width: 599px) {
.hrc__browser { width: 100%; }
.hrc__phone { display: none; }
.hrc__title { font-size: 1.15rem; }
}
.hm-wire {
position: relative;
overflow: clip;
}
.hm-wire::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(50% 40% at 50% 100%, var(--hm-glow-2), transparent 70%);
pointer-events: none;
}
.hm-wire .container {
position: relative;
}
.hm-wire__title {
max-width: 16ch;
}
.hwire {
--mx: 50%;
--my: 50%;
--hw-r: 0px;
position: relative;
margin: 0;
border-radius: var(--hm-radius);
border: 1px solid var(--line-2);
background: var(--bg);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 40px 80px -50px rgb(0 0 0 / 0.9);
overflow: hidden;
}
.hwire__bar {
display: flex;
align-items: center;
gap: 0.75rem;
height: 42px;
padding: 0 1rem;
border-bottom: 1px solid var(--line);
background: var(--surface);
}
.hwire__url {
height: 24px;
font-size: 12px;
}
.hwire__state {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex: none;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ok);
}
.hwire__state i {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 40%, transparent);
}
.hm-run .hwire__state i {
animation: hwire-pulse 2.4s ease-out infinite;
}
@keyframes hwire-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); }
70%, 100% { box-shadow: 0 0 0 8px transparent; }
}
.hwire__stage {
position: relative;
aspect-ratio: 16 / 8.6;
overflow: hidden;
cursor: crosshair;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.hwire__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 44px 44px;
background-position: center top;
-webkit-mask-image: radial-gradient(80% 90% at 50% 40%, #000 40%, transparent 100%);
mask-image: radial-gradient(80% 90% at 50% 40%, #000 40%, transparent 100%);
}
.hwire__frame {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: 9% 40% 24% 9%;
gap: 3%;
padding: 4% 5%;
}
.hwire__box {
--hw-i: 0;
display: grid;
align-content: center;
gap: 7%;
padding: 3% 4%;
border: 1px dashed color-mix(in srgb, var(--brand) 45%, var(--line-2));
border-radius: 8px;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.6s var(--ease), transform 0.8s var(--hm-ease-out);
transition-delay: calc(var(--hw-i) * 90ms);
}
.is-in .hwire__box {
opacity: 1;
transform: none;
}
.hwire__box--fill {
background: color-mix(in srgb, var(--brand) 9%, transparent);
border-style: solid;
border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}
.hwire__box--nav { --hw-i: 0; grid-column: 1 / -1; grid-row: 1; grid-auto-flow: column; justify-content: start; align-items: center; gap: 2.5%; padding: 0 2%; }
.hwire__box--hero { --hw-i: 1; grid-column: 1 / 8; grid-row: 2; }
.hwire__box--img { --hw-i: 2; grid-column: 8 / -1; grid-row: 2; }
.hwire__box--c1 { --hw-i: 3; grid-column: 1 / 5; grid-row: 3; }
.hwire__box--c2 { --hw-i: 4; grid-column: 5 / 9; grid-row: 3; }
.hwire__box--c3 { --hw-i: 5; grid-column: 9 / -1; grid-row: 3; }
.hwire__box--foot { --hw-i: 6; grid-column: 1 / -1; grid-row: 4; }
.hwire__box--nav i {
display: block;
width: 7%;
height: 34%;
border-radius: 3px;
background: var(--line-2);
}
.hwire__box--nav .hwire__logo {
width: 11%;
margin-right: auto;
background: color-mix(in srgb, var(--brand) 55%, transparent);
}
.hwire__t {
display: block;
width: 70%;
height: 9%;
min-height: 4px;
border-radius: 3px;
background: var(--line-2);
}
.hwire__t--lg { width: 85%; height: 15%; min-height: 6px; }
.hwire__t--sm { width: 40%; }
.hwire__btn {
display: block;
width: 28%;
height: 14%;
min-height: 6px;
border-radius: 4px;
background: color-mix(in srgb, var(--brand) 55%, transparent);
}
.hwire__site {
position: absolute;
inset: 0;
opacity: 0.98;
-webkit-mask-image: radial-gradient(circle var(--hw-r) at var(--mx) var(--my), #000 0, #000 58%, transparent 100%);
mask-image: radial-gradient(circle var(--hw-r) at var(--mx) var(--my), #000 0, #000 58%, transparent 100%);
pointer-events: none;
}
.hwire__site img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.hwire__ring {
position: absolute;
left: var(--mx);
top: var(--my);
width: 18px;
height: 18px;
border: 2px solid var(--brand);
border-radius: 50%;
opacity: 0;
transform: translate(-50%, -50%) scale(0.6);
transition: opacity 0.3s, transform 0.4s var(--hm-ease-out);
pointer-events: none;
}
.hwire.is-active .hwire__ring {
opacity: 0.9;
transform: translate(-50%, -50%);
}
.hwire__tip {
position: absolute;
right: 1rem;
bottom: 1rem;
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin: 0;
padding: 0.4rem 0.7rem;
border-radius: 7px;
border: 1px solid var(--line-2);
background: color-mix(in srgb, var(--bg) 85%, transparent);
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-2);
transition: opacity 0.4s;
pointer-events: none;
}
.hwire__tip .icon {
width: 12px;
height: 12px;
color: var(--brand-600);
}
.hwire.is-active .hwire__tip,
.hwire.is-touched .hwire__tip {
opacity: 0;
}
.hwire__caption {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
padding: 0.9rem 1rem;
border-top: 1px solid var(--line);
background: var(--surface);
font-size: 0.9rem;
color: var(--text-2);
}
.hwire__caption b {
color: var(--text);
}
@media (max-width: 699px) {
.hwire__stage { aspect-ratio: 4 / 3.4; }
.hwire__frame { grid-template-rows: 8% 36% 26% 8%; gap: 3.5%; }
.hwire__box--hero { grid-column: 1 / -1; }
.hwire__box--img { display: none; }
.hwire__box--c1 { grid-column: 1 / 7; }
.hwire__box--c2 { grid-column: 7 / -1; }
.hwire__box--c3 { display: none; }
.hwire__grid { background-size: 32px 32px; }
.hwire__state { display: none; }
.hwire__tip { right: 0.6rem; bottom: 0.6rem; font-size: 0.62rem; }
}
.hm-make {
position: relative;
overflow: clip;
background: var(--bg-2);
border-block: 1px solid var(--line);
}
.hm-make::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(45% 55% at 85% 40%, var(--hm-glow-2), transparent 70%);
pointer-events: none;
}
.hm-make__inner {
--hmk-dur: 5.6s;
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.hm-make__title {
max-width: 14ch;
}
.hmk__list {
display: grid;
gap: 0.35rem;
margin: clamp(1.5rem, 3vw, 2rem) 0 0;
padding: 0;
list-style: none;
}
.hmk__btn {
position: relative;
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
gap: 0.9rem;
align-items: center;
width: 100%;
padding: 0.8rem 1rem;
border: 1px solid transparent;
border-radius: 14px;
background: transparent;
color: var(--text-2);
font: inherit;
text-align: start;
cursor: pointer;
overflow: hidden;
transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.25s;
}
.hmk__btn:hover {
color: var(--text);
background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.hmk__btn:focus-visible {
outline: 2px solid var(--focus, var(--brand));
outline-offset: 2px;
}
.hmk__row.is-active .hmk__btn {
color: var(--text);
border-color: var(--line);
background: var(--surface);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
}
.hmk__ico {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 11px;
border: 1px solid var(--line);
color: var(--text-3);
transition: color 0.3s, background-color 0.3s, border-color 0.3s, transform 0.4s var(--hm-ease-out);
}
.hmk__ico .icon {
width: 19px;
height: 19px;
}
.hmk__row.is-active .hmk__ico {
color: var(--brand-600);
border-color: color-mix(in srgb, var(--brand) 35%, transparent);
background: var(--brand-soft);
transform: scale(1.04);
}
.hmk__txt {
display: grid;
gap: 0.15rem;
min-width: 0;
}
.hmk__name {
font-size: 1.05rem;
font-weight: 650;
letter-spacing: -0.01em;
}
.hmk__desc {
font-size: 0.9rem;
line-height: 1.45;
color: var(--text-3);
transition: color 0.3s;
}
.hmk__row.is-active .hmk__desc {
color: var(--text-2);
}
.hmk__bar {
position: absolute;
inset-inline: 1rem;
bottom: 0;
height: 2px;
border-radius: 2px;
overflow: hidden;
opacity: 0;
transition: opacity 0.3s;
}
.hmk__bar i {
display: block;
width: 100%;
height: 100%;
background: var(--grad-brand);
transform: scaleX(0);
transform-origin: left center;
}
[dir="rtl"] .hmk__bar i {
transform-origin: right center;
}
.hm-make.is-cycling .hmk__row.is-active .hmk__bar {
opacity: 1;
}
.hm-make.is-cycling .hmk__row.is-active .hmk__bar i {
animation: hmk-bar var(--hmk-dur) linear forwards;
}
.hm-make.is-holding .hmk__row.is-active .hmk__bar i,
.hm-make:not(.hm-run) .hmk__row.is-active .hmk__bar i {
animation-play-state: paused;
}
@keyframes hmk-bar {
to { transform: scaleX(1); }
}
.hmk__foot {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.75rem;
margin: 1.5rem 0 0;
}
.hmk__win {
position: relative;
margin: 0;
border-radius: var(--hm-radius);
border: 1px solid var(--line-2);
background: var(--surface);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 40px 80px -50px rgb(0 0 0 / 0.9), 0 0 0 1px color-mix(in srgb, var(--brand) 6%, transparent);
overflow: hidden;
}
.hmk__wbar {
display: flex;
align-items: center;
gap: 0.75rem;
height: 42px;
padding: 0 1rem;
border-bottom: 1px solid var(--line);
}
.hmk__dots {
display: inline-flex;
gap: 6px;
flex: none;
}
.hmk__dots i {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--line-2);
}
.hmk__dots i:first-child {
background: color-mix(in srgb, var(--brand) 70%, transparent);
}
.hmk__url {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
height: 24px;
padding: 0 0.7rem;
border-radius: 999px;
background: var(--bg-2);
font-family: var(--mono);
font-size: 11.5px;
color: var(--text-3);
white-space: nowrap;
}
.hmk__url .icon {
width: 11px;
height: 11px;
color: var(--ok);
}
.hmk__tabs {
position: relative;
display: grid;
margin-inline-start: auto;
min-width: 0;
}
.hmk__tab {
grid-area: 1 / 1;
justify-self: end;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-600);
white-space: nowrap;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.35s, transform 0.45s var(--hm-ease-out);
}
.hmk__tab.is-active {
opacity: 1;
transform: none;
}
.hmk__screen {
position: relative;
aspect-ratio: 16 / 10;
container-type: inline-size;
background:
linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 28px 28px,
linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 28px 28px,
var(--bg-2);
}
.hmk__cap {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1rem;
border-top: 1px solid var(--line);
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-3);
}
.hmk__cap-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand);
}
.hm-run .hmk__cap-dot {
animation: hwire-pulse 2.4s ease-out infinite;
}
.hmk-s {
position: absolute;
inset: 0;
padding: 5cqw;
opacity: 0;
transform: scale(0.985);
transition: opacity 0.5s var(--ease), transform 0.7s var(--hm-ease-out);
pointer-events: none;
}
.hmk-s.is-active {
opacity: 1;
transform: none;
}
.hmk-s * {
animation-duration: var(--hmk-dur);
animation-iteration-count: infinite;
animation-timing-function: var(--hm-ease-out);
animation-fill-mode: both;
}
.hm-make:not(.hm-run) .hmk-s *,
.hmk-s:not(.is-active) * {
animation-name: none !important;
}
.hm-make.is-holding .hmk-s * {
animation-play-state: paused;
}
.hmk-s--design {
display: grid;
grid-template-columns: 7cqw minmax(0, 1fr);
gap: 4cqw;
}
.hds__tools {
display: flex;
flex-direction: column;
gap: 1.6cqw;
padding: 1.4cqw;
border-radius: 2cqw;
border: 1px solid var(--line);
background: var(--surface);
align-self: start;
}
.hds__tools i {
aspect-ratio: 1;
border-radius: 50%;
background: var(--brand);
}
.hds__tools i:nth-child(2) { background: var(--accent); }
.hds__tools i:nth-child(3) { background: var(--text); }
.hds__tools i:nth-child(4) { background: var(--surface-3); border: 1px solid var(--line-2); }
.hds__canvas {
position: relative;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-rows: 5cqw 6cqw 3cqw 4.5cqw minmax(0, 1fr);
gap: 2.2cqw 2cqw;
padding: 2.5cqw;
border-radius: 2cqw;
border: 1px solid var(--line);
background: var(--surface);
}
.hds__b {
position: relative;
border-radius: 1cqw;
border: 1px dashed var(--line-2);
}
.hds__b::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
background: var(--surface-3);
}
.hds__b--nav { grid-column: 1 / -1; }
.hds__b--title { grid-column: 1 / 4; }
.hds__b--line { grid-column: 1 / 4; }
.hds__b--btn { grid-column: 1 / 3; }
.hds__b--img { grid-column: 4 / -1; grid-row: 2 / 5; }
.hds__b--c1 { grid-column: 1 / 3; }
.hds__b--c2 { grid-column: 3 / 5; }
.hds__b--c3 { grid-column: 5 / -1; }
.hds__b--nav::after { background: var(--surface-2); }
.hds__b--title::after { background: var(--text); opacity: 0.85; }
.hds__b--line::after { background: var(--text-3); opacity: 0.6; }
.hds__b--btn::after { background: var(--brand); }
.hds__b--img::after { background: linear-gradient(135deg, var(--brand), var(--accent)); opacity: 0.85; }
.hm-run .hmk-s--design.is-active .hds__b::after { animation-name: hds-fill; }
.hm-run .hmk-s--design.is-active .hds__b--title::after { animation-name: hds-fill-85; }
.hm-run .hmk-s--design.is-active .hds__b--line::after { animation-name: hds-fill-60; }
.hm-run .hmk-s--design.is-active .hds__b--img::after { animation-name: hds-fill-85; }
.hds__b--nav::after { animation-delay: 0.15s; }
.hds__b--title::after { animation-delay: 0.45s; }
.hds__b--line::after { animation-delay: 0.65s; }
.hds__b--btn::after { animation-delay: 0.9s; }
.hds__b--img::after { animation-delay: 1.25s; }
.hds__b--c1::after { animation-delay: 1.7s; }
.hds__b--c2::after { animation-delay: 1.85s; }
.hds__b--c3::after { animation-delay: 2s; }
@keyframes hds-fill {
0%, 4% { opacity: 0; transform: scale(0.94); }
14%, 86% { opacity: 1; transform: none; }
96%, 100% { opacity: 0; transform: none; }
}
@keyframes hds-fill-85 {
0%, 4% { opacity: 0; transform: scale(0.94); }
14%, 86% { opacity: 0.85; transform: none; }
96%, 100% { opacity: 0; transform: none; }
}
@keyframes hds-fill-60 {
0%, 4% { opacity: 0; transform: scale(0.94); }
14%, 86% { opacity: 0.6; transform: none; }
96%, 100% { opacity: 0; transform: none; }
}
.hds__cursor {
position: absolute;
top: 0;
left: 0;
width: 2.6cqw;
min-width: 14px;
height: auto;
fill: var(--text);
stroke: var(--bg);
transform: translate(46cqw, 30cqw);
filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.4));
}
.hm-run .hmk-s--design.is-active .hds__cursor {
animation-name: hds-cursor;
animation-timing-function: var(--ease-io);
}
@keyframes hds-cursor {
0% { transform: translate(8cqw, 9cqw); }
10% { transform: translate(60cqw, 9cqw); }
20% { transform: translate(8cqw, 15cqw); }
32% { transform: translate(30cqw, 21cqw); }
44% { transform: translate(9cqw, 21cqw); }
56% { transform: translate(72cqw, 26cqw); }
70% { transform: translate(26cqw, 44cqw); }
86% { transform: translate(46cqw, 30cqw); }
100% { transform: translate(8cqw, 9cqw); }
}
.hmk-s--code {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 3cqw;
}
.hcd__code {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2.4cqw;
padding: 3cqw;
border-radius: 2cqw;
border: 1px solid var(--code-line, var(--line));
background: var(--code-bg, var(--surface));
}
.hcd__ln {
display: flex;
align-items: center;
gap: 1.4cqw;
}
.hcd__ln b {
flex: none;
width: 2.4cqw;
font-family: var(--mono);
font-size: max(8px, 1.5cqw);
font-weight: 400;
color: var(--code-dim, var(--text-3));
text-align: end;
}
.hcd__ln i {
height: 1.3cqw;
min-height: 5px;
border-radius: 99px;
transform-origin: left center;
}
.hcd__ln i:first-of-type { width: 22%; background: var(--brand); }
.hcd__ln i:last-of-type { width: 38%; background: color-mix(in srgb, var(--code-text, var(--text)) 35%, transparent); }
.hcd__ln:nth-child(2) i:first-of-type, .hcd__ln:nth-child(6) i:first-of-type { margin-inline-start: 3cqw; width: 14%; background: var(--accent); }
.hcd__ln:nth-child(3) i:first-of-type, .hcd__ln:nth-child(4) i:first-of-type, .hcd__ln:nth-child(7) i:first-of-type { margin-inline-start: 6cqw; width: 18%; background: color-mix(in srgb, var(--accent) 70%, transparent); }
.hcd__ln:nth-child(3) i:last-of-type { width: 46%; }
.hcd__ln:nth-child(4) i:last-of-type { width: 26%; }
.hcd__ln:nth-child(5) i:last-of-type { width: 30%; }
.hcd__ln:nth-child(8) i:last-of-type { width: 12%; }
.hm-run .hmk-s--code.is-active .hcd__ln i { animation-name: hcd-type; animation-timing-function: steps(6, end); }
.hcd__ln:nth-child(1) i { animation-delay: 0s; }
.hcd__ln:nth-child(2) i { animation-delay: 0.3s; }
.hcd__ln:nth-child(3) i { animation-delay: 0.6s; }
.hcd__ln:nth-child(4) i { animation-delay: 0.9s; }
.hcd__ln:nth-child(5) i { animation-delay: 1.2s; }
.hcd__ln:nth-child(6) i { animation-delay: 1.5s; }
.hcd__ln:nth-child(7) i { animation-delay: 1.8s; }
.hcd__ln:nth-child(8) i { animation-delay: 2.1s; }
@keyframes hcd-type {
0% { transform: scaleX(0); }
8%, 88% { transform: scaleX(1); opacity: 1; }
97%, 100% { transform: scaleX(1); opacity: 0; }
}
.hcd__view {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: 4cqw 5cqw 3cqw 4cqw minmax(0, 1fr);
gap: 2cqw;
padding: 3cqw;
border-radius: 2cqw;
border: 1px solid var(--line);
background: var(--surface);
}
.hcd__p {
border-radius: 1cqw;
background: var(--surface-3);
}
.hcd__p--nav { grid-column: 1 / -1; background: var(--surface-2); border: 1px solid var(--line); }
.hcd__p--title { grid-column: 1 / -1; width: 80%; background: var(--text); opacity: 0.85; }
.hcd__p--text { grid-column: 1 / -1; width: 60%; background: var(--text-3); opacity: 0.6; }
.hcd__p--btn { width: 80%; background: var(--brand); border-radius: 99px; }
.hcd__p--c1 { grid-column: 1; }
.hcd__p--c2 { grid-column: 2; }
.hm-run .hmk-s--code.is-active .hcd__p { animation-name: hcd-pop; }
.hm-run .hmk-s--code.is-active .hcd__p--title { animation-name: hcd-pop-85; }
.hm-run .hmk-s--code.is-active .hcd__p--text { animation-name: hcd-pop-60; }
.hcd__p--nav { animation-delay: 0.35s; }
.hcd__p--title { animation-delay: 0.85s; }
.hcd__p--text { animation-delay: 1.15s; }
.hcd__p--btn { animation-delay: 1.45s; }
.hcd__p--c1 { animation-delay: 1.85s; }
.hcd__p--c2 { animation-delay: 2.15s; }
@keyframes hcd-pop {
0%, 3% { opacity: 0; transform: translateY(1.5cqw); }
12%, 86% { opacity: 1; transform: none; }
96%, 100% { opacity: 0; transform: none; }
}
@keyframes hcd-pop-85 {
0%, 3% { opacity: 0; transform: translateY(1.5cqw); }
12%, 86% { opacity: 0.85; transform: none; }
96%, 100% { opacity: 0; transform: none; }
}
@keyframes hcd-pop-60 {
0%, 3% { opacity: 0; transform: translateY(1.5cqw); }
12%, 86% { opacity: 0.6; transform: none; }
96%, 100% { opacity: 0; transform: none; }
}
.hcp__desk,
.hcp__phone {
position: absolute;
overflow: hidden;
border: 1px solid var(--line-2);
background: var(--surface);
}
.hcp__desk {
inset: 5cqw 24cqw 5cqw 5cqw;
border-radius: 2cqw;
}
.hcp__phone {
right: 6cqw;
bottom: 4cqw;
width: 15cqw;
aspect-ratio: 9 / 18;
border-radius: 2.6cqw;
border-width: 2px;
box-shadow: 0 20px 40px -24px rgb(0 0 0 / 0.8);
}
.hcp__page {
display: grid;
gap: 2cqw;
padding: 2cqw;
}
.hcp__nav { height: 3cqw; border-radius: 0.8cqw; background: var(--surface-3); }
.hcp__hero {
display: grid;
align-content: center;
gap: 1.2cqw;
height: 17cqw;
padding: 0 3cqw;
border-radius: 1.4cqw;
background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 26%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
}
.hcp__hero b { display: block; height: 2cqw; width: 55%; border-radius: 99px; background: var(--text); opacity: 0.85; }
.hcp__hero b:nth-child(2) { width: 38%; height: 1.2cqw; opacity: 0.45; }
.hcp__hero b:nth-child(3) { width: 16%; height: 2.4cqw; background: var(--brand); opacity: 1; }
.hcp__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqw; }
.hcp__row b { height: 10cqw; border-radius: 1cqw; border: 1px solid var(--line); background: var(--surface-2); }
.hcp__band { height: 7cqw; border-radius: 1cqw; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); }
.hcp__foot { height: 6cqw; border-radius: 1cqw; background: var(--surface-3); }
.hcp__page--m { gap: 1cqw; padding: 1cqw; }
.hcp__page--m .hcp__nav { height: 1.6cqw; }
.hcp__page--m .hcp__hero { height: 10cqw; padding: 0 1.4cqw; gap: 0.8cqw; }
.hcp__page--m .hcp__hero b { height: 1cqw; }
.hcp__page--m .hcp__row { grid-template-columns: minmax(0, 1fr); gap: 1cqw; }
.hcp__page--m .hcp__row b { height: 6cqw; }
.hcp__page--m .hcp__band { height: 5cqw; }
.hcp__page--m .hcp__foot { height: 4cqw; }
.hm-run .hmk-s--corp.is-active .hcp__page { animation-name: hcp-scroll; animation-timing-function: var(--ease-io); }
.hm-run .hmk-s--corp.is-active .hcp__page--m { animation-name: hcp-scroll-m; }
@keyframes hcp-scroll {
0%, 12% { transform: none; }
52%, 64% { transform: translateY(-22cqw); }
96%, 100% { transform: none; }
}
@keyframes hcp-scroll-m {
0%, 12% { transform: none; }
52%, 64% { transform: translateY(-38cqw); }
96%, 100% { transform: none; }
}
.hcp__badge {
position: absolute;
top: 7cqw;
right: 9cqw;
display: grid;
place-items: center;
width: 8cqw;
height: 8cqw;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
background: var(--surface);
color: var(--brand-600);
box-shadow: 0 0 0 0 var(--brand-glow);
}
.hcp__badge .icon { width: 45%; height: 45%; }
.hm-run .hmk-s--corp.is-active .hcp__badge { animation-name: hcp-badge; animation-duration: 2.8s; animation-timing-function: ease-out; }
@keyframes hcp-badge {
0% { box-shadow: 0 0 0 0 var(--brand-glow); }
70%, 100% { box-shadow: 0 0 0 2.4cqw transparent; }
}
.hmk-s--app {
display: grid;
grid-template-columns: 17cqw minmax(0, 1fr);
gap: 2.5cqw;
}
.hap__side {
position: relative;
display: flex;
flex-direction: column;
gap: 2.2cqw;
padding: 2.4cqw 2cqw;
border-radius: 2cqw;
border: 1px solid var(--line);
background: var(--surface);
}
.hap__side i {
position: relative;
z-index: 1;
height: 1.4cqw;
width: 70%;
border-radius: 99px;
background: var(--text-3);
opacity: 0.55;
}
.hap__side .hap__logo {
width: 4cqw;
height: 4cqw;
margin-bottom: 1cqw;
border-radius: 1cqw;
background: var(--brand);
opacity: 1;
}
.hap__sel {
position: absolute;
inset-inline: 1cqw;
top: calc(2.4cqw + 5cqw + 2.2cqw - 1.3cqw);
height: 4cqw;
border-radius: 1cqw;
background: var(--brand-soft-2, var(--brand-soft));
}
.hm-run .hmk-s--app.is-active .hap__sel { animation-name: hap-sel; animation-timing-function: var(--ease-io); }
@keyframes hap-sel {
0%, 22% { transform: none; }
30%, 52% { transform: translateY(3.6cqw); }
60%, 82% { transform: translateY(7.2cqw); }
90%, 100% { transform: none; }
}
.hap__main {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 2cqw;
min-width: 0;
}
.hap__kpis {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.6cqw;
}
.hap__kpis i {
height: 7.5cqw;
border-radius: 1.4cqw;
border: 1px solid var(--line);
background:
linear-gradient(var(--text) 0 0) 1.6cqw 1.8cqw / 40% 1.6cqw no-repeat,
linear-gradient(var(--text-3) 0 0) 1.6cqw 4.4cqw / 26% 1cqw no-repeat,
var(--surface);
}
.hap__kpis i:first-child {
background:
linear-gradient(var(--brand) 0 0) 1.6cqw 1.8cqw / 40% 1.6cqw no-repeat,
linear-gradient(var(--text-3) 0 0) 1.6cqw 4.4cqw / 26% 1cqw no-repeat,
var(--surface);
}
.hap__chart {
display: flex;
align-items: flex-end;
gap: 1.4cqw;
padding: 2cqw;
border-radius: 1.6cqw;
border: 1px solid var(--line);
background: var(--surface);
}
.hap__chart i {
flex: 1;
height: 60%;
border-radius: 0.6cqw 0.6cqw 0.2cqw 0.2cqw;
background: color-mix(in srgb, var(--brand) 35%, var(--surface-3));
transform-origin: bottom;
}
.hap__chart i:nth-child(2) { height: 45%; }
.hap__chart i:nth-child(3) { height: 72%; }
.hap__chart i:nth-child(4) { height: 55%; }
.hap__chart i:nth-child(5) { height: 84%; }
.hap__chart i:nth-child(6) { height: 66%; }
.hap__chart i:nth-child(7) { height: 92%; background: var(--grad-brand); }
.hap__chart i:nth-child(8) { height: 78%; }
.hm-run .hmk-s--app.is-active .hap__chart i { animation-name: hap-bar; }
.hap__chart i:nth-child(1) { animation-delay: 0.2s; }
.hap__chart i:nth-child(2) { animation-delay: 0.3s; }
.hap__chart i:nth-child(3) { animation-delay: 0.4s; }
.hap__chart i:nth-child(4) { animation-delay: 0.5s; }
.hap__chart i:nth-child(5) { animation-delay: 0.6s; }
.hap__chart i:nth-child(6) { animation-delay: 0.7s; }
.hap__chart i:nth-child(7) { animation-delay: 0.8s; }
.hap__chart i:nth-child(8) { animation-delay: 0.9s; }
@keyframes hap-bar {
0%, 2% { transform: scaleY(0.08); }
16%, 86% { transform: none; }
97%, 100% { transform: scaleY(0.08); }
}
.hap__list {
display: grid;
gap: 1.2cqw;
}
.hap__list i {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2cqw;
height: 4.4cqw;
padding: 0 1.6cqw;
border-radius: 1cqw;
border: 1px solid var(--line);
background: var(--surface);
}
.hap__list b {
width: 40%;
height: 1.2cqw;
border-radius: 99px;
background: var(--text-3);
opacity: 0.6;
}
.hap__list s {
position: relative;
width: 4.6cqw;
height: 2.4cqw;
border-radius: 99px;
background: var(--brand);
}
.hap__list s::after {
content: "";
position: absolute;
top: 0.3cqw;
right: 0.3cqw;
width: 1.8cqw;
height: 1.8cqw;
border-radius: 50%;
background: var(--brand-ink, #fff);
}
.hap__list i:nth-child(2) s { background: var(--surface-3); }
.hap__list i:nth-child(2) s::after { right: auto; left: 0.3cqw; background: var(--text-3); }
.hm-run .hmk-s--app.is-active .hap__list i:first-child s,
.hm-run .hmk-s--app.is-active .hap__list i:last-child s { animation-name: hap-sw; }
.hm-run .hmk-s--app.is-active .hap__list i:first-child s::after,
.hm-run .hmk-s--app.is-active .hap__list i:last-child s::after { animation-name: hap-knob; animation-duration: var(--hmk-dur); animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: var(--hm-ease-out); }
.hap__list i:last-child s,
.hap__list i:last-child s::after { animation-delay: 0.5s; }
.hap__list i:first-child s,
.hap__list i:first-child s::after { animation-delay: 1.2s; }
@keyframes hap-sw {
0%, 20% { background: var(--surface-3); }
30%, 88% { background: var(--brand); }
96%, 100% { background: var(--surface-3); }
}
@keyframes hap-knob {
0%, 20% { transform: translateX(-2.2cqw); }
30%, 88% { transform: none; }
96%, 100% { transform: translateX(-2.2cqw); }
}
@media (max-width: 1099px) {
.hm-make__inner {
grid-template-columns: minmax(0, 1fr);
}
.hm-make__side {
display: contents;
}
.hm-make__side > .hm-head { order: 1; }
.hmk__win { order: 2; }
.hmk__list { order: 3; margin-top: 0; }
.hmk__foot { order: 4; margin-top: 0; }
.hm-make__inner { gap: 1.25rem; }
.hm-make__side > .hm-head { margin-bottom: 0.75rem; }
}
@media (max-width: 599px) {
.hmk__btn { padding: 0.7rem 0.8rem; grid-template-columns: 36px minmax(0, 1fr); gap: 0.75rem; }
.hmk__ico { width: 36px; height: 36px; }
.hmk__desc { font-size: 0.85rem; }
.hmk__url { display: none; }
.hmk__screen { aspect-ratio: 16 / 11; }
.hmk__list { gap: 0.2rem; }
}
.hm-faq {
background: var(--bg);
}
.hm-faq__inner {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: clamp(2rem, 6vw, 6rem);
align-items: start;
}
.hm-faq__head p:last-child {
margin-top: 1.25rem;
}
.hacc {
border-top: 1px solid var(--line-2);
}
.hacc__item {
border-bottom: 1px solid var(--line);
}
.hacc__q {
margin: 0;
font-size: inherit;
}
.hacc__btn {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 1rem;
width: 100%;
padding: 1.25rem 0;
border: 0;
background: none;
font: inherit;
font-size: 1.08rem;
font-weight: 600;
text-align: left;
color: var(--text);
cursor: pointer;
transition: color 0.25s;
}
.hacc__btn:hover,
.hacc__item.is-open .hacc__btn {
color: var(--brand-600);
}
.hacc__btn:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 4px;
border-radius: 6px;
}
.hacc__n {
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
color: var(--text-3);
}
.hacc__item.is-open .hacc__n {
color: var(--brand-600);
}
.hacc__ico {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid var(--line-2);
transition: border-color 0.3s, background-color 0.3s;
}
.hacc__ico i {
position: absolute;
left: 50%;
top: 50%;
width: 12px;
height: 1.5px;
background: currentColor;
transform: translate(-50%, -50%);
transition: transform 0.45s var(--hm-ease-out);
}
.hacc__ico i:last-child {
transform: translate(-50%, -50%) rotate(90deg);
}
.hacc__item.is-open .hacc__ico {
border-color: var(--brand);
background: var(--brand-soft);
}
.hacc__item.is-open .hacc__ico i:last-child {
transform: translate(-50%, -50%) rotate(0deg);
}
.hacc__a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.5s var(--hm-ease-out);
}
.hacc__item.is-open .hacc__a {
grid-template-rows: 1fr;
}
.hacc__a-inner {
min-height: 0;
overflow: hidden;
}
.hacc__a-inner p {
max-width: 44rem;
margin: 0;
padding: 0 0 1.4rem 2.4rem;
font-size: 0.98rem;
line-height: 1.65;
color: var(--text-2);
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.4s var(--ease), transform 0.5s var(--hm-ease-out);
}
.hacc__item.is-open .hacc__a-inner p {
opacity: 1;
transform: none;
transition-delay: 0.1s;
}
@media (max-width: 899px) {
.hm-faq__inner { grid-template-columns: minmax(0, 1fr); }
.hacc__a-inner p { padding-left: 0; }
}
.hm-meet {
position: relative;
overflow: clip;
background: var(--bg);
}
.hm-meet__light {
position: absolute;
inset: 0;
background: radial-gradient(45% 55% at 78% 50%, var(--hm-glow), transparent 70%);
pointer-events: none;
}
.hm-meet__inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2rem, 6vw, 6rem);
align-items: center;
}
.hm-meet__channels {
display: grid;
gap: 0.25rem;
margin: 2rem 0 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--line-2);
}
.hm-meet__ch {
display: flex;
align-items: center;
gap: 0.75rem;
border-bottom: 1px solid var(--line);
}
.hm-meet__main {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 1rem;
flex: 1;
min-width: 0;
padding: 0.9rem 0;
color: var(--text);
text-decoration: none;
transition: color 0.25s;
}
.hm-meet__main--static {
grid-template-columns: auto minmax(0, 1fr);
}
.hm-meet__ico {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 11px;
border: 1px solid var(--line-2);
background: var(--surface);
color: var(--brand-600);
transition: border-color 0.3s, background-color 0.3s;
}
.hm-meet__ico .icon {
width: 18px;
height: 18px;
}
a.hm-meet__main:hover .hm-meet__ico {
border-color: var(--brand);
background: var(--brand-soft);
}
.hm-meet__text {
display: grid;
min-width: 0;
}
.hm-meet__text small {
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
.hm-meet__text b {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hm-meet__go {
width: 16px;
height: 16px;
color: var(--text-3);
transition: transform 0.3s var(--ease), color 0.25s;
}
a.hm-meet__main:hover .hm-meet__go {
color: var(--brand-600);
transform: translate(2px, -2px);
}
.hm-meet__stage {
display: grid;
justify-items: center;
}
.hm-meet .bizcard {
width: 100%;
max-width: 440px;
border: 1px solid var(--line-2);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 40px 80px -40px rgb(0 0 0 / 0.9);
color: var(--text);
text-align: left;
}
.hm-meet .bizcard__label,
.hm-meet .bizcard__role,
.hm-meet .bizcard__bio { color: var(--text-2); }
.hm-meet .bizcard__name,
.hm-meet .bizcard__lines a { color: var(--text); }
.hm-meet .bizcard__lines .icon,
.hm-meet .bizcard__social .icon-btn { color: var(--brand-600); }
.hm-meet .bizcard .avatar { border-color: var(--line-2); background: color-mix(in srgb, var(--brand) 66%, #000); color: var(--brand-ink); }
.hm-meet .bizcard .icon-btn { border-color: var(--line-2); background: transparent; }
.hm-meet .bizcard .icon-btn:hover { border-color: var(--brand); background: var(--brand-soft); }
.hm-meet .copy {
border-color: var(--line-2);
background: var(--surface);
color: var(--text-2);
}
.hm-meet .copy:hover { border-color: var(--brand); color: var(--brand-600); }
.hm-meet .copy.is-done { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-600); }
@media (max-width: 899px) {
.hm-meet__inner { grid-template-columns: minmax(0, 1fr); }
}
:root[data-theme="light"] .page-home {
--hm-glow: color-mix(in srgb, var(--brand) 10%, transparent);
--hm-glow-2: color-mix(in srgb, var(--brand) 6%, transparent);
}
:root[data-theme="light"] .hstack__card,
:root[data-theme="light"] .hstack__phone,
:root[data-theme="light"] .hrc__browser,
:root[data-theme="light"] .hrc__phone,
:root[data-theme="light"] .hwire,
:root[data-theme="light"] .hm-meet .bizcard {
box-shadow: 0 30px 50px -34px rgb(10 10 10 / 0.35);
}
:root[data-theme="light"] .hrc {
box-shadow: none;
}
:root[data-theme="light"] .hstack__tag,
:root[data-theme="light"] .hwire__tip,
:root[data-theme="light"] .hrc__hint {
background: color-mix(in srgb, #fff 88%, transparent);
}
:root[data-theme="light"] .hwire__t,
:root[data-theme="light"] .hwire__box--nav i {
background: rgb(10 10 10 / 0.14);
}
:root[data-theme="light"] .hwire__box--nav .hwire__logo,
:root[data-theme="light"] .hwire__btn {
background: color-mix(in srgb, var(--brand) 55%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.hm-ready .hm-in,
.hm-ready .hm-hero__ln > .hm-in,
.hm-ready .hm-hero__stage.hm-in,
.hm-wave path,
.hsec.is-marquee .hsec__track,
.hwire__state i {
animation: none !important;
}
.hm-wave path { stroke-dashoffset: 0; }
.hsec.is-marquee .hsec__track { flex-wrap: wrap; width: auto; }
.hsec.is-marquee .hsec__viewport { -webkit-mask-image: none; mask-image: none; }
.hsec__item[aria-hidden="true"] { display: none; }
.hstack__pip-fill { animation: none !important; }
.hstack__card, .hstack__phone, .hrc, .hrc__phone, .hwire__box, .hacc__a, .hacc__a-inner p { transition: none !important; }
.hwire__box { opacity: 1; transform: none; }
.hrc__page img, .hrc.is-touring .hrc__page img { transition: none; }
.hwire { --mx: 50% !important; --my: 46% !important; --hw-r: clamp(170px, 24vw, 320px) !important; }
.hwire__site { opacity: 0.85; }
.hwire__ring, .hwire__tip { display: none; }
}
html[data-motion="off"] .hm-ready .hm-in,
html[data-motion="off"] .hm-ready .hm-hero__ln > .hm-in,
html[data-motion="off"] .hm-ready .hm-hero__stage.hm-in,
html[data-motion="off"] .hm-wave path,
html[data-motion="off"] .hsec.is-marquee .hsec__track,
html[data-motion="off"] .hwire__state i {
animation: none !important;
}
html[data-motion="off"] .hm-wave path { stroke-dashoffset: 0; }
html[data-motion="off"] .hsec.is-marquee .hsec__track { flex-wrap: wrap; width: auto; }
html[data-motion="off"] .hsec.is-marquee .hsec__viewport { -webkit-mask-image: none; mask-image: none; }
html[data-motion="off"] .hsec__item[aria-hidden="true"] { display: none; }
html[data-motion="off"] .hwire__box { opacity: 1; transform: none; transition: none; }
html[data-motion="off"] .hwire { --mx: 50% !important; --my: 46% !important; --hw-r: clamp(170px, 24vw, 320px) !important; }
html[data-motion="off"] .hwire__site { opacity: 0.85; }
html[data-motion="off"] .hwire__ring, html[data-motion="off"] .hwire__tip { display: none; }
html[data-motion="off"] .hrc__page img { transition: none; }
html[data-motion="calm"] .hsec.is-marquee .hsec__track { animation-duration: calc(var(--hsec-dur, 48s) * 2); }
html[data-motion="calm"] .hwire__state i { animation: none; }
.hwire__tip-touch { display: none; }
@media (hover: none), (pointer: coarse) {
.hwire__tip-fine { display: none; }
.hwire__tip-touch { display: inline; }
}
.page-home .section.hm-refs,
.page-home .section.hm-make,
.page-home .section.hm-wire,
.page-home .section.hm-faq,
.page-home .section.hm-meet {
padding-block: clamp(3rem, 6vw, 5.5rem);
}
.page-home .hm-head {
margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.page-home .hm-head--col {
margin-bottom: 0;
}
.hm-hero {
padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.hm-head__aside {
display: grid;
justify-items: start;
gap: 0.75rem;
align-self: end;
}
.hm-head__aside .hm-intro {
margin: 0;
}
.hm-wire__inner {
display: grid;
grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.hm-wire__head {
margin: 0;
}
.hm-wire .hwire__stage {
aspect-ratio: 16 / 9.5;
}
@media (max-width: 1099px) {
.hm-wire__inner {
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
}
}
@media (max-width: 899px) {
.hm-head__aside {
margin-top: 1rem;
}
}
[dir="rtl"] .hm-link .icon {
transform: scaleX(-1);
}
[dir="rtl"] .hm-link:hover .icon {
transform: scaleX(-1) translateX(4px);
}
[dir="rtl"] .hsec__label {
padding-right: 0;
padding-left: 1rem;
border-right: 0;
border-left: 1px solid var(--line);
}
@media (prefers-reduced-motion: reduce) {
.hmk-s, .hmk__tab, .hmk__btn, .hmk__ico { transition: none !important; }
.hmk-s *, .hmk__bar i, .hmk__cap-dot { animation: none !important; }
}
html[data-motion="off"] .hmk-s,
html[data-motion="off"] .hmk__tab { transition: none; }
html[data-motion="off"] .hmk-s *,
html[data-motion="off"] .hmk__bar i,
html[data-motion="off"] .hmk__cap-dot { animation: none !important; }
:root[data-theme="light"] .hmk__win {
box-shadow: 0 30px 50px -34px rgb(10 10 10 / 0.35);
}
.hm-refs .rc__tags {
display: none;
}
@media (max-width: 599px) {
.hm-refs .rc__summary {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.hm-refs__grid {
gap: 1rem;
}
}
[dir="rtl"] .hstack,
[dir="rtl"] .hsec__viewport,
[dir="rtl"] .hmk__screen {
direction: ltr;
}
[dir="rtl"] .hstack__tag {
direction: rtl;
}

/* css/front/legal-modal.css */

.lgm {
width: min(100% - 2rem, 54rem);
max-width: none;
height: min(100% - 3rem, 52rem);
max-height: none;
margin: auto;
padding: 0;
border: 0;
border-radius: 22px;
background: transparent;
color: var(--text);
overflow: visible;
}
.lgm::backdrop {
background: rgb(5 6 8 / 0.62);
backdrop-filter: blur(6px);
}
:root[data-theme="light"] .lgm::backdrop { background: rgb(30 24 18 / 0.38); }
.lgm__panel {
position: relative;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
height: 100%;
border: 1px solid var(--line-2);
border-radius: inherit;
background: var(--surface);
box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(255 255 255 / 0.03) inset;
overflow: hidden;
}
.lgm__panel::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
background: linear-gradient(90deg, #ffd23f, var(--brand) 30%, #ff3b5c 55%, #a77bff 78%, #36c5f0);
}
.lgm[open] .lgm__panel { animation: lgm-in 0.42s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.lgm[open]::backdrop { animation: lgm-fade 0.3s ease both; }
@keyframes lgm-in {
from { opacity: 0; transform: translateY(18px) scale(0.98); }
to { opacity: 1; transform: none; }
}
@keyframes lgm-fade { from { opacity: 0; } }
.lgm__head {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 1.15rem 1.25rem 1rem;
border-bottom: 1px solid var(--line);
}
.lgm__icon {
display: grid;
flex: none;
place-items: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--brand-soft);
color: var(--brand-600);
}
.lgm__icon .icon { width: 20px; height: 20px; }
.lgm__titles { flex: 1; min-width: 0; }
.lgm__eyebrow {
margin: 0 0 0.15rem;
font: 600 0.68rem var(--mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
.lgm__title {
margin: 0;
font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.45rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
}
.lgm__open,
.lgm__close {
display: grid;
flex: none;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--line-2);
border-radius: 50%;
background: var(--surface-2);
color: var(--text-2);
cursor: pointer;
transition: color 0.2s, border-color 0.2s, transform 0.3s var(--ease-out);
}
.lgm__open .icon,
.lgm__close .icon { width: 17px; height: 17px; }
.lgm__open:hover,
.lgm__close:hover { color: var(--text); border-color: color-mix(in srgb, var(--brand) 55%, var(--line-2)); }
.lgm__close:hover { transform: rotate(90deg); }
.lgm__open:focus-visible,
.lgm__close:focus-visible,
.lgm__body:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.lgm__body {
overflow-y: auto;
overscroll-behavior: contain;
padding: 1.25rem clamp(1.1rem, 3vw, 2.25rem) 2rem;
scroll-padding-top: 1rem;
}
.lgm__body .lg-doc { max-width: none; margin: 0; }
.lgm__status { margin: 2rem 0; color: var(--text-3); text-align: center; }
.lgm__foot {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 0.4rem 1rem;
padding: 0.9rem 1.25rem 1rem;
border-top: 1px solid var(--line);
background: var(--surface);
}
.lgm__progress {
grid-column: 1 / -1;
height: 4px;
border-radius: 99px;
background: var(--line);
overflow: hidden;
}
.lgm__progress i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--brand), #ffd23f);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.15s linear;
}
[dir="rtl"] .lgm__progress i { transform-origin: right; }
.lgm.is-read .lgm__progress i { background: linear-gradient(90deg, var(--ok, #2bd67b), #36c5f0); }
.lgm__hint { margin: 0; font-size: 0.86rem; color: var(--text-3); }
.lgm.is-read .lgm__hint { color: var(--text-2); }
.lgm__ok[disabled] { opacity: 0.45; cursor: not-allowed; filter: saturate(0.4); box-shadow: none; }
.lgm.is-read .lgm__ok { animation: lgm-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes lgm-pop { 50% { transform: scale(1.06); } }
html.lgm-open { overflow: hidden; }
@media (max-width: 639.98px) {
.lgm {
width: 100%;
height: calc(100% - 1.5rem);
margin: auto 0 0;
border-radius: 20px 20px 0 0;
}
.lgm__panel { border-bottom: 0; }
.lgm[open] .lgm__panel { animation-name: lgm-up; }
.lgm__foot { grid-template-columns: 1fr; }
.lgm__ok { width: 100%; }
.lgm__head { padding: 1rem; }
}
@keyframes lgm-up { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.lgm[open] .lgm__panel, .lgm[open]::backdrop, .lgm.is-read .lgm__ok { animation: none; }
}
html[data-motion="off"] .lgm[open] .lgm__panel,
html[data-motion="off"] .lgm[open]::backdrop,
html[data-motion="off"] .lgm.is-read .lgm__ok { animation: none; }

/* css/front/legal.css */

.lg {
padding-block: clamp(2rem, 4vw, 3.5rem) var(--section-py, clamp(4rem, 7vw, 7rem));
color: var(--text-2);
}
.lg__wrap {
display: grid;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: start;
}
@media (min-width: 62.01rem) {
.lg__wrap {
grid-template-columns: 15rem minmax(0, 1fr);
gap: clamp(2.5rem, 5vw, 4.5rem);
}
}
.lg-side {
display: grid;
gap: 1.5rem;
min-width: 0;
}
@media (min-width: 62.01rem) {
.lg-side {
position: sticky;
top: calc(var(--header-h, 68px) + 1.5rem);
max-height: calc(100vh - var(--header-h, 68px) - 3rem);
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 0.25rem;
}
}
.lg-toc__sum {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
list-style: none;
cursor: pointer;
padding: 0.7rem 0;
border-block: 1px solid var(--line);
font-family: var(--mono);
font-size: var(--fs-label, 0.75rem);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text);
}
.lg-toc__sum::-webkit-details-marker {
display: none;
}
.lg-toc__sum:focus-visible,
.lg-toc__link:focus-visible,
.lg-docs__link:focus-visible,
.lg-doc a:focus-visible,
.lg-doc pre:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 3px;
border-radius: 2px;
}
.lg-toc__chev {
width: 1rem;
height: 1rem;
color: var(--text-3);
transition: transform 0.25s var(--ease);
}
.lg-toc[open] .lg-toc__chev {
transform: rotate(180deg);
}
@media (min-width: 62.01rem) {
.lg-toc__sum {
cursor: default;
border-top: 0;
}
.lg-toc__chev {
display: none;
}
}
.lg-toc__list {
list-style: none;
margin: 0;
padding: 0.4rem 0 0;
counter-reset: lgtoc;
}
.lg-toc__list li {
counter-increment: lgtoc;
}
.lg-toc__link {
display: grid;
grid-template-columns: 1.75rem 1fr;
gap: 0.25rem;
padding: 0.45rem 0 0.45rem 0.75rem;
border-left: 1px solid var(--line);
color: var(--text-2);
text-decoration: none;
font-size: 0.9rem;
line-height: 1.35;
transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.lg-toc__link::before {
content: counter(lgtoc, decimal-leading-zero);
font-family: var(--mono);
font-size: 0.7rem;
line-height: 1.8;
color: var(--text-3);
}
.lg-toc__link:hover {
color: var(--text);
border-left-color: var(--line-2);
}
.lg-toc__link[aria-current="true"] {
color: var(--text);
border-left-color: var(--brand);
background: linear-gradient(90deg, var(--brand-soft), transparent 85%);
}
.lg-toc__link[aria-current="true"]::before {
color: var(--brand-700);
}
.lg-docs__title {
margin: 0 0 0.5rem;
font-family: var(--mono);
font-size: var(--fs-label, 0.75rem);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
.lg-docs__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1.1rem;
}
.lg-docs__link {
color: var(--text-2);
text-decoration: none;
font-size: 0.9rem;
padding-block: 0.15rem;
border-bottom: 1px solid transparent;
transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lg-docs__link:hover {
color: var(--text);
border-bottom-color: var(--line-2);
}
.lg-docs__link[aria-current="page"] {
color: var(--text);
border-bottom-color: var(--brand);
}
.lg-print {
justify-self: start;
}
.lg-doc {
min-width: 0;
max-width: 52rem;
counter-reset: lgsec;
font-size: 1rem;
line-height: 1.7;
}
.lg-meta {
margin: 0 0 1.75rem;
font-family: var(--mono);
font-size: var(--fs-label, 0.75rem);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
}
.lg-sec {
position: relative;
counter-increment: lgsec;
padding-top: 2.25rem;
margin-top: 2.75rem;
scroll-margin-top: calc(var(--header-h, 68px) + 1rem);
}
.lg-doc > .lg-brief + .lg-sec,
.lg-doc > .lg-meta + .lg-sec {
margin-top: 1rem;
}
.lg-sec::before,
.lg-sec::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 1px;
width: 100%;
}
.lg-sec::before {
background: var(--line);
}
.lg-sec::after {
background: var(--brand);
width: 4.5rem;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.7s var(--ease);
}
.lg-sec.is-in::after {
transform: scaleX(1);
}
.lg-sec h2 {
display: flex;
align-items: baseline;
gap: 0.9rem;
margin: 0 0 1rem;
font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
font-weight: 650;
letter-spacing: -0.025em;
line-height: 1.2;
color: var(--text);
}
.lg-sec h2::before {
content: counter(lgsec, decimal-leading-zero);
flex: none;
font-family: var(--mono);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--brand-700);
}
.lg-sec h3 {
margin: 1.75rem 0 0.5rem;
font-size: 1.05rem;
font-weight: 650;
letter-spacing: -0.01em;
color: var(--text);
}
.lg-sec p {
margin: 0 0 1rem;
}
.lg-sec strong,
.lg-sec b,
.lg-sec dt {
color: var(--text);
font-weight: 650;
}
.lg-sec em {
font-style: normal;
color: var(--text);
border-bottom: 1px dotted var(--line-2);
}
.lg-doc a:not(.btn) {
color: var(--brand-700);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
transition: color 0.2s var(--ease);
}
.lg-doc a:not(.btn):hover {
color: var(--text);
}
.lg-doc code {
font-family: var(--mono);
font-size: 0.85em;
padding: 0.1em 0.4em;
border: 1px solid var(--line);
border-radius: 4px;
background: var(--surface);
color: var(--text);
overflow-wrap: anywhere;
}
.lg-table code {
white-space: nowrap;
overflow-wrap: normal;
}
.lg-fine {
font-size: 0.85rem;
color: var(--text-3);
}
.lg-list {
margin: 0 0 1rem;
padding: 0;
list-style: none;
display: grid;
gap: 0.6rem;
}
.lg-list > li {
position: relative;
padding-left: 1.35rem;
}
ul.lg-list > li::before {
content: "";
position: absolute;
left: 0.15rem;
top: 0.72em;
width: 0.4rem;
height: 0.4rem;
border-radius: 1px;
background: var(--brand);
}
ol.lg-list {
counter-reset: lgalpha;
}
ol.lg-list > li {
counter-increment: lgalpha;
padding-left: 2rem;
}
ol.lg-list > li::before {
content: "(" counter(lgalpha, lower-alpha) ")";
position: absolute;
left: 0;
top: 0;
font-family: var(--mono);
font-size: 0.85rem;
color: var(--brand-700);
}
.lg-brief {
display: grid;
margin: 0 0 1rem;
border-block: 1px solid var(--line);
}
.lg-brief__item {
display: grid;
gap: 0.25rem;
padding: 1.1rem 0;
border-bottom: 1px solid var(--line);
}
.lg-brief__item:last-child {
border-bottom: 0;
}
.lg-brief__label {
font-family: var(--mono);
font-size: var(--fs-label, 0.75rem);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
.lg-brief__value {
margin: 0;
font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
font-weight: 650;
letter-spacing: -0.025em;
line-height: 1.15;
color: var(--text);
}
.lg-brief__text {
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
color: var(--text-2);
}
@media (min-width: 40rem) {
.lg-brief {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg-brief__item {
padding: 1.25rem 1.25rem 1.25rem 0;
}
.lg-brief__item:nth-child(even) {
padding-left: 1.25rem;
border-left: 1px solid var(--line);
}
.lg-brief__item:nth-last-child(-n + 2) {
border-bottom: 0;
}
}
.lg-dl {
margin: 0 0 1.25rem;
border-top: 1px solid var(--line);
}
.lg-dl__row {
display: grid;
gap: 0.15rem 1.5rem;
padding: 0.7rem 0;
border-bottom: 1px solid var(--line);
}
.lg-dl__row dt {
font-family: var(--mono);
font-size: var(--fs-label, 0.75rem);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
font-weight: 500;
}
.lg-dl__row dd {
margin: 0;
color: var(--text);
overflow-wrap: anywhere;
}
@media (min-width: 40rem) {
.lg-dl__row {
grid-template-columns: 13rem minmax(0, 1fr);
align-items: baseline;
}
}
.lg-tablewrap {
margin: 0 0 1.25rem;
}
.lg-table {
width: 100%;
border-collapse: collapse;
font-size: 0.92rem;
line-height: 1.55;
}
.lg-table caption {
text-align: left;
}
.lg-table th,
.lg-table td {
padding: 0.85rem 1rem 0.85rem 0;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--line);
overflow-wrap: anywhere;
}
.lg-table thead th {
border-top: 1px solid var(--line);
font-family: var(--mono);
font-size: var(--fs-label, 0.75rem);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
white-space: nowrap;
}
.lg-table tbody th {
color: var(--text);
font-weight: 650;
}
@media (max-width: 47.99rem) {
.lg-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.lg-table,
.lg-table tbody,
.lg-table tr,
.lg-table th,
.lg-table td {
display: block;
width: 100%;
}
.lg-table tr {
padding: 0.9rem 0;
border-top: 1px solid var(--line);
}
.lg-table tr:last-child {
border-bottom: 1px solid var(--line);
}
.lg-table th,
.lg-table td {
padding: 0.2rem 0;
border: 0;
}
.lg-table tbody th {
padding-bottom: 0.4rem;
font-size: 1rem;
}
.lg-table td::before {
content: attr(data-label);
display: block;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
}
}
.lg-tpl-wrap {
display: grid;
gap: 0.75rem;
justify-items: start;
margin-bottom: 1rem;
}
.lg-tpl {
width: 100%;
max-height: 26rem;
margin: 0;
padding: 1.1rem 1.25rem;
overflow: auto;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm, 8px);
background: var(--surface);
color: var(--text);
font-family: var(--mono);
font-size: 0.8rem;
line-height: 1.7;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.lg-formnote__text {
margin: 0 0 0.85rem;
font-size: 0.85rem;
line-height: 1.6;
color: var(--text-2);
}
.lg-formnote__text strong {
color: var(--text);
}
.lg-formnote__text a {
color: var(--brand-700);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.lg-formnote__hint {
color: var(--text-3);
font-size: 0.85em;
}
.lg-links {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1.25rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.85rem;
}
.lg-links a {
color: var(--text-2);
text-decoration: none;
}
.lg-links a:hover {
color: var(--text);
text-decoration: underline;
text-underline-offset: 0.2em;
}
html[data-motion="off"] .lg-sec::after,
html[data-motion="off"] .lg-toc__chev,
html[data-motion="off"] .lg-toc__link {
transition: none;
}
html[data-motion="off"] .lg-sec::after {
transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
.lg-sec::after,
.lg-toc__chev,
.lg-toc__link,
.lg-docs__link {
transition: none;
}
.lg-sec::after {
transform: scaleX(1);
}
}
@media print {
html,
body {
background: #fff !important;
color: #000 !important;
}
header,
footer,
nav.crumbs,
.nav,
.footer,
.lg-side,
.lg-print,
.lg-copy,
.cs,
[data-consent],
[data-welcome],
dialog,
.to-top,
.toast,
.dial,
.speed-dial,
.announce,
.amb,
.ambient,
.lamp,
.theme-lamp,
.page-head .anim-in:not(h1):not(.page-head__intro) {
display: none !important;
}
.lg,
.lg * {
color: #000 !important;
background: transparent !important;
border-color: #999 !important;
box-shadow: none !important;
}
.lg__wrap {
display: block;
}
.lg-doc {
max-width: none;
}
.lg-sec {
break-inside: avoid-page;
}
.lg-sec::after {
display: none;
}
.lg-doc a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.8em;
}
.lg-tpl {
max-height: none;
overflow: visible;
}
}
.lg-toc { padding: 0.9rem 1.1rem 0.6rem; }
.lg-toc__sum { padding: 0.25rem 0 0.75rem; border-top: 0; }
.lg-toc__link[aria-current="true"] { color: var(--brand-600); }
.lg-toc__link[aria-current="true"]::before { background: var(--brand); }
.lg-sec::after { background: var(--grad-brand, linear-gradient(90deg, var(--brand), var(--accent, #ffb347))); }
.lg-sec h2 { font-weight: 700; }
.lg-sec h2::before { color: var(--brand-600); }
.lg-doc a:not(.btn) { color: var(--brand-600); }
.lg-brief {
gap: 0.75rem;
border: 0;
}
.lg-brief__item {
padding: 1.1rem 1.2rem;
border: 1px solid var(--line);
border-radius: var(--r, 16px);
background: var(--surface);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}
.lg-brief__item:last-child { border-bottom: 1px solid var(--line); }
.lg-brief__value { color: var(--brand-600); font-weight: 700; }
@media (min-width: 40rem) {
.lg-brief__item { padding: 1.1rem 1.2rem; }
.lg-brief__item:nth-child(even) { padding-left: 1.2rem; border-left: 1px solid var(--line); }
.lg-brief__item:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }
}
.lg-tablewrap {
border: 1px solid var(--line);
border-radius: var(--r, 16px);
background: var(--surface);
overflow: clip;
}
.lg-table th, .lg-table td { padding-inline: 1rem; }

/* css/front/mockups.css */

.mock {
--mk-bg: #fafafa;
--mk-ink: #141414;
--mk-accent: #ff5a1f;
--mk-on: #fff;
--mk-line: rgb(0 0 0 / 0.08);
--mk-head: var(--font);
--mk-r: 1.2cqw;
--mk-rb: 99px;
--mk-c1: #f1d6c7;
--mk-c2: #e7e2dc;
--mk-c3: #d8d2cc;
display: flex;
flex-direction: column;
height: 155cqw;
font-family: var(--font);
color: var(--mk-ink);
background: var(--mk-bg);
text-align: left;
}
.mk-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 3.2cqw 5cqw;
}
.mk-logo {
font-family: var(--mk-head);
font-size: 3.1cqw;
font-weight: 700;
letter-spacing: -0.02em;
}
.mk-links {
display: flex;
gap: 2.6cqw;
}
.mk-links i {
width: 6.5cqw;
height: 0.9cqw;
border-radius: 1cqw;
background: currentColor;
opacity: 0.22;
}
.mk-btn {
display: inline-block;
width: fit-content;
padding: 1.5cqw 3.2cqw;
border-radius: var(--mk-rb);
font-size: 2.1cqw;
font-weight: 600;
line-height: 1.2;
color: var(--mk-on);
background: var(--mk-accent);
}
.mk-btn--sm {
padding: 1.1cqw 2.4cqw;
font-size: 1.8cqw;
}
.mk-btn--light {
color: var(--mk-accent);
background: #fff;
}
.mk-hero {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
align-items: center;
gap: 5cqw;
padding: 6cqw 5cqw 7cqw;
}
.mk-copy {
display: grid;
justify-items: start;
}
.mk-kicker {
font-size: 1.8cqw;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mk-accent);
}
.mk-h {
margin: 1.6cqw 0 2.6cqw;
font-family: var(--mk-head);
font-size: 6cqw;
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.035em;
}
.mk-line {
display: block;
width: 92%;
height: 1.1cqw;
margin-bottom: 1.3cqw;
border-radius: 1cqw;
background: currentColor;
opacity: 0.13;
}
.mk-line--short {
width: 62%;
}
.mk-copy .mk-btn {
margin-top: 2cqw;
}
.mk-art {
position: relative;
aspect-ratio: 1 / 1.08;
overflow: hidden;
border-radius: calc(var(--mk-r) * 2);
background: var(--mk-c1);
}
.mk-art i {
position: absolute;
display: block;
}
.mk-section {
padding: 4cqw 5cqw 6cqw;
}
.mk-h2 {
display: block;
font-family: var(--mk-head);
font-size: 3.8cqw;
font-weight: 600;
letter-spacing: -0.03em;
}
.mk-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3cqw;
margin-top: 3.2cqw;
}
.mk-card {
display: grid;
}
.mk-card__img {
aspect-ratio: 4 / 3;
margin-bottom: 2cqw;
border-radius: var(--mk-r);
background: var(--mk-c1);
}
.mk-card__img--2 { background: var(--mk-c2); }
.mk-card__img--3 { background: var(--mk-c3); }
.mk-card__title {
margin-bottom: 1.4cqw;
font-size: 2.2cqw;
font-weight: 600;
}
.mk-band {
display: grid;
justify-items: center;
margin: 0 5cqw;
padding: 6cqw;
border-radius: calc(var(--mk-r) * 2);
color: var(--mk-on);
background: var(--mk-accent);
}
.mk-band .mk-line {
width: 60%;
opacity: 0.45;
}
.mk-band .mk-line--short {
width: 40%;
}
.mk-band .mk-btn {
margin-top: 2cqw;
}
.mk-foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding: 4.5cqw 5cqw;
border-top: 1px solid var(--mk-line);
}
.mock--cafe {
--mk-bg: #f7f0e6;
--mk-ink: #3a2a1f;
--mk-accent: #9c4f25;
--mk-head: Georgia, "Times New Roman", serif;
--mk-c1: #d9a878;
--mk-c2: #e8cfae;
--mk-c3: #c98a55;
}
.mock--cafe .mk-h { font-weight: 400; font-style: italic; }
.mock--cafe .mk-art i:nth-child(1) { inset: 14%; border-radius: 50%; background: #f4eadf; box-shadow: 0 2cqw 4cqw rgb(58 42 31 / 0.25); }
.mock--cafe .mk-art i:nth-child(2) { inset: 26%; border-radius: 50%; background: #fff; }
.mock--cafe .mk-art i:nth-child(3) { inset: 32%; border-radius: 50%; background: radial-gradient(circle at 50% 46%, #f0d9bb 0 16%, transparent 17%), radial-gradient(circle at 44% 40%, #8a5a36, #4a2c18 70%); }
.mock--architecture {
--mk-bg: #f3f2ef;
--mk-ink: #111;
--mk-accent: #111;
--mk-r: 0px;
--mk-rb: 0px;
--mk-c1: #cfcac1;
--mk-c2: #9c968c;
--mk-c3: #e1ddd5;
}
.mock--architecture .mk-h { font-weight: 500; text-transform: uppercase; letter-spacing: -0.01em; font-size: 5.2cqw; }
.mock--architecture .mk-art { background: linear-gradient(180deg, #dfe4e7 0 62%, #cbc5ba 62%); }
.mock--architecture .mk-art i:nth-child(1) { left: 12%; bottom: 38%; width: 34%; height: 50%; background: linear-gradient(90deg, #2a2a2a, #4a4a4a); }
.mock--architecture .mk-art i:nth-child(2) { right: 8%; bottom: 38%; width: 50%; height: 30%; background: repeating-linear-gradient(90deg, #bdb6aa 0 3cqw, #a39c90 3cqw 3.4cqw); }
.mock--architecture .mk-art i:nth-child(3) { left: 30%; bottom: 66%; width: 52%; height: 3%; background: #111; }
.mock--clinic {
--mk-bg: #f2fbfa;
--mk-ink: #0f3b3a;
--mk-accent: #0a7468;
--mk-r: 1.8cqw;
--mk-c1: #c9eee7;
--mk-c2: #e1f4f1;
--mk-c3: #b5e4dc;
}
.mock--clinic .mk-art { background: linear-gradient(160deg, #dff5f1, #bfe9e2); }
.mock--clinic .mk-art i:nth-child(1) { inset: 16% 12% 22% 18%; border-radius: 46% 54% 50% 50% / 52% 44% 56% 48%; background: #fff; box-shadow: 0 2cqw 5cqw rgb(15 59 58 / 0.12); }
.mock--clinic .mk-art i:nth-child(2) { top: 34%; left: 38%; width: 22%; aspect-ratio: 1; border-radius: 22%; background: linear-gradient(#fff, #fff) center / 46% 14% no-repeat, linear-gradient(#fff, #fff) center / 14% 46% no-repeat, #12a594; }
.mock--clinic .mk-art i:nth-child(3) { right: 12%; bottom: 14%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: #12a594; opacity: 0.35; }
.mock--hotel {
--mk-bg: #0f1c2a;
--mk-ink: #f1e8d8;
--mk-accent: #c8a76a;
--mk-on: #0f1c2a;
--mk-line: rgb(255 255 255 / 0.1);
--mk-head: Georgia, "Times New Roman", serif;
--mk-r: 0.4cqw;
--mk-rb: 0.4cqw;
--mk-c1: #2b4a6b;
--mk-c2: #6b5b8e;
--mk-c3: #e98b6d;
}
.mock--hotel .mk-h { font-weight: 400; }
.mock--hotel .mk-art { border-radius: 50% 50% 0.4cqw 0.4cqw / 34% 34% 0.4cqw 0.4cqw; background: linear-gradient(180deg, #f5b98a 0%, #e98b6d 38%, #6b5b8e 72%, #1f3550 100%); }
.mock--hotel .mk-art i:nth-child(1) { left: 0; right: 0; bottom: 0; height: 32%; background: linear-gradient(#2b4a6b, #142a40); }
.mock--hotel .mk-art i:nth-child(2) { left: 38%; top: 46%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #ffd9a0; }
.mock--hotel .mk-art i:nth-child(3) { left: 20%; right: 20%; bottom: 26%; height: 1.2%; background: rgb(255 217 160 / 0.7); }
.mock--saas {
--mk-bg: #0b0c10;
--mk-ink: #f5f5f7;
--mk-accent: #355de0;
--mk-line: rgb(255 255 255 / 0.08);
--mk-r: 1.4cqw;
--mk-c1: #15171e;
--mk-c2: #1b2030;
--mk-c3: #232a40;
}
.mock--saas .mk-kicker { color: #8fa8ff; }
.mock--saas .mk-art { border: 1px solid #262a35; background: #15171e; }
.mock--saas .mk-art i:nth-child(1) { left: 8%; right: 8%; bottom: 10%; height: 52%; background: linear-gradient(to top, rgb(79 124 255 / 0.05), rgb(79 124 255 / 0.55)); clip-path: polygon(0 100%, 0 70%, 18% 58%, 34% 66%, 52% 34%, 70% 44%, 86% 16%, 100% 24%, 100% 100%); }
.mock--saas .mk-art i:nth-child(2) { left: 8%; top: 10%; width: 40%; height: 7%; border-radius: 1cqw; background: #262a35; }
.mock--saas .mk-art i:nth-child(3) { right: 8%; top: 10%; width: 18%; height: 7%; border-radius: 1cqw; background: #4f7cff; }
.mock--shop {
--mk-bg: #fff;
--mk-ink: #151515;
--mk-accent: #d63a52;
--mk-r: 1cqw;
--mk-c1: #f3e9e4;
--mk-c2: #f6efe0;
--mk-c3: #e9eef2;
}
.mock--shop .mk-art i:nth-child(1) { left: 37%; bottom: 18%; width: 26%; height: 52%; border-radius: 3cqw 3cqw 1.6cqw 1.6cqw; background: linear-gradient(#f9d7cf, #e7a597); }
.mock--shop .mk-art i:nth-child(2) { left: 43%; bottom: 70%; width: 14%; height: 9%; border-radius: 0.8cqw; background: #2b2b2b; }
.mock--shop .mk-art i:nth-child(3) { left: 28%; bottom: 14%; width: 44%; height: 5%; border-radius: 50%; background: rgb(0 0 0 / 0.1); }
.mock--portfolio {
--mk-accent: #c2410c;
--mk-c1: #141414;
--mk-c2: #ffd2c0;
--mk-c3: #e9e9e9;
}
.mock--portfolio .mk-art i:nth-child(1) { left: 18%; top: 18%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: #ff5a1f; }
.mock--portfolio .mk-art i:nth-child(2) { right: 14%; bottom: 16%; width: 34%; aspect-ratio: 1; background: #fff; transform: rotate(12deg); }
.mock--portfolio .mk-art i:nth-child(3) { left: 10%; right: 10%; bottom: 46%; height: 1.2%; background: #fff; opacity: 0.5; }
.mock--law {
--mk-bg: #f6f3ee;
--mk-ink: #1e2a38;
--mk-accent: #8a6a3d;
--mk-head: Georgia, "Times New Roman", serif;
--mk-r: 0.6cqw;
--mk-rb: 0.6cqw;
--mk-c1: #e8e0d2;
--mk-c2: #d6c9b3;
--mk-c3: #cbd2da;
}
.mock--law .mk-h { font-weight: 400; }
.mock--law .mk-art { background: linear-gradient(160deg, #e8e0d2, #d6c9b3); }
.mock--law .mk-art i:nth-child(1) { left: 16%; right: 16%; bottom: 16%; height: 46%; background: repeating-linear-gradient(90deg, #f6f3ee 0 6cqw, transparent 6cqw 9.5cqw); }
.mock--law .mk-art i:nth-child(2) { left: 12%; right: 12%; top: 18%; height: 18%; background: #f6f3ee; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mock--law .mk-art i:nth-child(3) { left: 12%; right: 12%; bottom: 10%; height: 6%; background: #f6f3ee; }
.mock--gym {
--mk-bg: #121212;
--mk-ink: #f5f5f0;
--mk-accent: #c6f432;
--mk-on: #121212;
--mk-line: rgb(255 255 255 / 0.1);
--mk-r: 0.6cqw;
--mk-rb: 0.6cqw;
--mk-c1: #222;
--mk-c2: #2d2d2d;
--mk-c3: #3a3a3a;
}
.mock--gym .mk-h { font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; }
.mock--gym .mk-art { background: #1d1d1d; border: 1px solid #2c2c2c; }
.mock--gym .mk-art i:nth-child(1) { left: 8%; right: 8%; top: 48%; height: 4%; background: #8a8a8a; }
.mock--gym .mk-art i:nth-child(2) { left: 18%; top: 26%; width: 9%; height: 48%; border-radius: 1cqw; background: #c6f432; box-shadow: 4.5cqw 0 0 -1.2cqw #c6f432; }
.mock--gym .mk-art i:nth-child(3) { right: 18%; top: 26%; width: 9%; height: 48%; border-radius: 1cqw; background: #c6f432; box-shadow: -4.5cqw 0 0 -1.2cqw #c6f432; }
.mock--course {
--mk-bg: #f5f8ff;
--mk-ink: #14213d;
--mk-accent: #3157d5;
--mk-r: 1.4cqw;
--mk-c1: #dbe4ff;
--mk-c2: #ffe9a8;
--mk-c3: #cfe9df;
}
.mock--course .mk-art { background: #dbe4ff; }
.mock--course .mk-art i:nth-child(1) { left: 12%; right: 12%; bottom: 16%; height: 46%; border-radius: 1.4cqw; background: #fff; box-shadow: 0 0 0 1px #c4d0f5; }
.mock--course .mk-art i:nth-child(2) { right: 14%; top: 12%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #ffc83d; }
.mock--course .mk-art i:nth-child(3) { left: 20%; right: 20%; bottom: 36%; height: 3%; background: #3157d5; opacity: 0.8; }
.mock--beauty {
--mk-bg: #fbf3f1;
--mk-ink: #3b2a2e;
--mk-accent: #a8435d;
--mk-head: Georgia, "Times New Roman", serif;
--mk-c1: #f3d4d6;
--mk-c2: #f7e6dc;
--mk-c3: #e9b4b8;
}
.mock--beauty .mk-h { font-weight: 400; }
.mock--beauty .mk-art { background: #f6e3de; }
.mock--beauty .mk-art i:nth-child(1) { left: 22%; right: 22%; top: 12%; bottom: 0; border-radius: 50% 50% 0 0; background: #f3d4d6; }
.mock--beauty .mk-art i:nth-child(2) { left: 38%; top: 28%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #e9b4b8; }
.mock--beauty .mk-art i:nth-child(3) { left: 44%; bottom: 0; width: 12%; height: 30%; border-radius: 6cqw 6cqw 0 0; background: #b4546b; }
.mock--realestate {
--mk-bg: #fff;
--mk-ink: #10263b;
--mk-accent: #1f7a5a;
--mk-r: 1cqw;
--mk-c1: #dcebe5;
--mk-c2: #e8eef4;
--mk-c3: #f0e8d8;
}
.mock--realestate .mk-art { background: linear-gradient(180deg, #dcebe5 0 68%, #b9d6c8 68%); }
.mock--realestate .mk-art i:nth-child(1) { left: 20%; right: 20%; bottom: 32%; height: 28%; background: #fff; box-shadow: 0 0 0 1px #10263b; }
.mock--realestate .mk-art i:nth-child(2) { left: 14%; right: 14%; bottom: 58%; height: 20%; background: #10263b; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mock--realestate .mk-art i:nth-child(3) { left: 44%; bottom: 32%; width: 12%; height: 16%; background: #1f7a5a; }
.mock--auto {
--mk-bg: #131417;
--mk-ink: #fff;
--mk-accent: #e03131;
--mk-line: rgb(255 255 255 / 0.1);
--mk-r: 0.6cqw;
--mk-rb: 0.6cqw;
--mk-c1: #1d1f24;
--mk-c2: #272a31;
--mk-c3: #33363f;
}
.mock--auto .mk-h { font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; font-size: 5.4cqw; }
.mock--auto .mk-art { background: linear-gradient(180deg, #1d1f24 0 70%, #2a2d34 70%); }
.mock--auto .mk-art i:nth-child(1) { left: 8%; right: 8%; bottom: 34%; height: 15%; border-radius: 2cqw 2cqw 0.8cqw 0.8cqw; background: #e03131; }
.mock--auto .mk-art i:nth-child(2) { left: 26%; right: 24%; bottom: 48%; height: 12%; background: #b92727; clip-path: polygon(14% 100%, 30% 0, 74% 0, 100% 100%); }
.mock--auto .mk-art i:nth-child(3) { left: 14%; right: 14%; bottom: 26%; height: 14%; background: radial-gradient(circle at 18% 50%, #111 0 34%, #8d9099 35% 48%, transparent 49%), radial-gradient(circle at 82% 50%, #111 0 34%, #8d9099 35% 48%, transparent 49%); }
.mock--photo {
--mk-bg: #fafaf8;
--mk-ink: #111;
--mk-accent: #111;
--mk-r: 0.3cqw;
--mk-rb: 0.3cqw;
--mk-c1: #d9d6cf;
--mk-c2: #bdb8ad;
--mk-c3: #efe0bd;
}
.mock--photo .mk-h { font-weight: 500; letter-spacing: -0.03em; }
.mock--photo .mk-art { background: #111; }
.mock--photo .mk-art i:nth-child(1) { inset: 14%; border-radius: 50%; background: #2a2a2a; }
.mock--photo .mk-art i:nth-child(2) { inset: 28%; border-radius: 50%; background: #e8b04a; }
.mock--photo .mk-art i:nth-child(3) { inset: 40%; border-radius: 50%; background: #111; box-shadow: 1.6cqw -1.6cqw 0 -0.9cqw #fff; }
.mock--wedding {
--mk-bg: #fdf8f1;
--mk-ink: #4a3b2c;
--mk-accent: #8a6a35;
--mk-head: Georgia, "Times New Roman", serif;
--mk-r: 0.4cqw;
--mk-c1: #f1e4d0;
--mk-c2: #ead7bd;
--mk-c3: #e4e8dc;
}
.mock--wedding .mk-h { font-weight: 400; }
.mock--wedding .mk-art { background: #f1e4d0; }
.mock--wedding .mk-art i:nth-child(1) { left: 16%; top: 34%; width: 40%; aspect-ratio: 1; border-radius: 50%; border: 1.4cqw solid #a8844d; }
.mock--wedding .mk-art i:nth-child(2) { right: 16%; top: 38%; width: 40%; aspect-ratio: 1; border-radius: 50%; border: 1.4cqw solid #cdb089; }
.mock--wedding .mk-art i:nth-child(3) { left: 38%; top: 20%; width: 12%; aspect-ratio: 1; background: #fff; transform: rotate(45deg); box-shadow: 0 0 0 1px #a8844d; }
.mock--vet {
--mk-bg: #fffaf0;
--mk-ink: #23423f;
--mk-accent: #a85108;
--mk-r: 1.8cqw;
--mk-c1: #fde8c0;
--mk-c2: #d4ecdf;
--mk-c3: #fbd9c4;
}
.mock--vet .mk-art { background: #fde8c0; }
.mock--vet .mk-art i:nth-child(1) { left: 30%; top: 44%; width: 40%; height: 34%; border-radius: 50% 50% 46% 46%; background: #d9741a; }
.mock--vet .mk-art i:nth-child(2) { left: 14%; right: 14%; top: 18%; height: 22%; background: radial-gradient(circle at 12% 70%, #d9741a 0 24%, transparent 25%), radial-gradient(circle at 38% 30%, #d9741a 0 24%, transparent 25%), radial-gradient(circle at 62% 30%, #d9741a 0 24%, transparent 25%), radial-gradient(circle at 88% 70%, #d9741a 0 24%, transparent 25%); }
.mock--vet .mk-art i:nth-child(3) { display: none; }
.mock--florist {
--mk-bg: #fff8f6;
--mk-ink: #35453a;
--mk-accent: #b83a5e;
--mk-r: 1.6cqw;
--mk-c1: #fde0e6;
--mk-c2: #dcefd9;
--mk-c3: #fff0c2;
}
.mock--florist .mk-art { background: #fde0e6; }
.mock--florist .mk-art i:nth-child(1) { left: 49%; bottom: 8%; width: 2%; height: 48%; background: #4d7a50; }
.mock--florist .mk-art i:nth-child(2) { left: 30%; top: 14%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffc83d 0 22%, #d9577c 23% 100%); }
.mock--florist .mk-art i:nth-child(3) { left: 52%; bottom: 20%; width: 18%; height: 10%; border-radius: 0 100% 0 100%; background: #6a9a6d; }
.mock--logistics {
--mk-bg: #f3f6fa;
--mk-ink: #0d2340;
--mk-accent: #f5b301;
--mk-on: #0d2340;
--mk-r: 0.8cqw;
--mk-rb: 0.8cqw;
--mk-c1: #dde6f1;
--mk-c2: #fbe8a8;
--mk-c3: #c9d6e6;
}
.mock--logistics .mk-h { font-weight: 800; }
.mock--logistics .mk-art { background: linear-gradient(180deg, #dde6f1 0 70%, #bccadc 70%); }
.mock--logistics .mk-art i:nth-child(1) { left: 8%; bottom: 30%; width: 54%; height: 34%; background: #0d2340; }
.mock--logistics .mk-art i:nth-child(2) { left: 64%; bottom: 30%; width: 28%; height: 24%; background: #f5b301; clip-path: polygon(0 0, 62% 0, 100% 46%, 100% 100%, 0 100%); }
.mock--logistics .mk-art i:nth-child(3) { left: 12%; right: 10%; bottom: 23%; height: 12%; background: radial-gradient(circle at 12% 50%, #111 0 36%, #9aa7b8 37% 50%, transparent 51%), radial-gradient(circle at 78% 50%, #111 0 36%, #9aa7b8 37% 50%, transparent 51%); }
.mock--consulting {
--mk-bg: #f5f7f7;
--mk-ink: #17302f;
--mk-accent: #0f766e;
--mk-r: 0.8cqw;
--mk-c1: #d4e8e5;
--mk-c2: #e4eceb;
--mk-c3: #c4dcd8;
}
.mock--consulting .mk-art { background: #d4e8e5; }
.mock--consulting .mk-art i:nth-child(1) { left: 12%; bottom: 14%; width: 20%; height: 30%; background: #7fb8b1; }
.mock--consulting .mk-art i:nth-child(2) { left: 40%; bottom: 14%; width: 20%; height: 48%; background: #3d9189; }
.mock--consulting .mk-art i:nth-child(3) { left: 68%; bottom: 14%; width: 20%; height: 68%; background: #0f766e; }
.mock--gallery {
--mk-bg: #fff;
--mk-ink: #111;
--mk-accent: #c2185b;
--mk-r: 0px;
--mk-rb: 0px;
--mk-c1: #f0ebe3;
--mk-c2: #e6dfd2;
--mk-c3: #f4d4e0;
}
.mock--gallery .mk-h { font-weight: 500; letter-spacing: -0.03em; }
.mock--gallery .mk-art { background: #f0ebe3; }
.mock--gallery .mk-art i:nth-child(1) { left: 14%; top: 12%; width: 44%; height: 56%; background: #e6dfd2; box-shadow: 0 0 0 1.2cqw #fff, 0 0 0 1.4cqw #111; }
.mock--gallery .mk-art i:nth-child(2) { right: 12%; bottom: 14%; width: 30%; height: 34%; background: #c2185b; }
.mock--gallery .mk-art i:nth-child(3) { left: 24%; top: 24%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #111; }
.mock--shop .mk-art i:nth-child(3){filter:none}
.mock--auto .mk-kicker { color: #ff7b7e; }
.mock--logistics .mk-kicker { color: #7a5a00; }

/* css/front/motion.css */

@property --fx-a {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
dgr-fx {
display: block;
}
.fx-host {
isolation: isolate;
}
.fx {
position: absolute;
inset: calc(var(--fx-bw, 0px) * -1);
z-index: -1;
border-radius: inherit;
pointer-events: none;
}
.fx > * {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.fx-frame,
.fx-frame-hover {
padding: 1.25px;
background: conic-gradient(
from var(--fx-a),
transparent 0deg 282deg,
color-mix(in srgb, var(--fx-color, var(--brand)) 22%, transparent) 312deg,
var(--fx-color, var(--brand)) 344deg,
var(--fx-tip, color-mix(in srgb, var(--fx-color, var(--brand)) 45%, #fff5e8)) 354deg,
transparent 360deg
);
-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);
animation: fx-spin var(--fx-dur, 9s) linear var(--fx-delay, 0s) infinite paused;
}
.fx-frame {
opacity: 0.9;
transition: opacity 0.6s var(--ease);
}
.fx-live > .fx-frame {
animation-play-state: running;
}
.fx-frame-hover {
opacity: 0;
animation-duration: calc(var(--fx-dur, 9s) * 0.42);
transition: opacity 0.45s var(--ease);
}
.fx-host:focus-within > .fx > .fx-frame-hover {
opacity: 1;
animation-play-state: running;
}
@media (hover: hover) and (pointer: fine) {
.fx-host:hover > .fx > .fx-frame-hover {
opacity: 1;
animation-play-state: running;
}
}
.fx-lvl-calm .fx-frame {
opacity: 0;
animation-duration: calc(var(--fx-dur, 9s) * 0.42);
}
.fx-lvl-calm .fx-host:focus-within > .fx > .fx-frame {
opacity: 0.9;
animation-play-state: running;
}
@media (hover: hover) and (pointer: fine) {
.fx-lvl-calm .fx-host:hover > .fx > .fx-frame {
opacity: 0.9;
animation-play-state: running;
}
}
@keyframes fx-spin {
to {
--fx-a: 360deg;
}
}
.fx-corners {
inset: -7px;
border-radius: 0;
}
.fx-clip > .fx > .fx-corners {
inset: 9px;
}
.fx-corners i {
position: absolute;
width: 11px;
height: 11px;
border: 0 solid var(--fx-color, var(--brand));
opacity: 0;
transition: opacity 0.3s var(--ease), transform 0.5s var(--ease);
}
.fx-corners i:nth-child(1) { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; transform: translate(-6px, -6px); }
.fx-corners i:nth-child(2) { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; transform: translate(6px, -6px); }
.fx-corners i:nth-child(3) { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; transform: translate(6px, 6px); }
.fx-corners i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 1.5px 1.5px; transform: translate(-6px, 6px); }
.fx-corners i:nth-child(2) { transition-delay: 0.04s; }
.fx-corners i:nth-child(3) { transition-delay: 0.08s; }
.fx-corners i:nth-child(4) { transition-delay: 0.12s; }
.fx-host:focus-within > .fx > .fx-corners i {
opacity: 1;
transform: none;
}
@media (hover: hover) and (pointer: fine) {
.fx-host:hover > .fx > .fx-corners i {
opacity: 1;
transform: none;
}
}
.fx-sheen {
overflow: hidden;
}
.fx-sheen i {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 60%;
background: linear-gradient(105deg, transparent 15%, var(--fx-sheen, color-mix(in srgb, var(--brand) 9%, transparent)) 50%, transparent 85%);
transform: translateX(-110%);
}
@media (hover: hover) and (pointer: fine) {
.fx-host:hover > .fx > .fx-sheen i {
transform: translateX(175%);
transition: transform 1.1s var(--ease-io);
}
}
.fx-glow {
box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-color, var(--brand)) 55%, transparent);
opacity: 0.3;
animation: fx-breathe 5.2s ease-in-out var(--fx-glow-delay, 0s) infinite paused;
}
.fx-live > .fx-glow {
animation-play-state: running;
}
.fx-lvl-calm .fx-glow {
animation: none;
opacity: 0.55;
}
@keyframes fx-breathe {
50% {
opacity: 0.9;
}
}
.fx-draw {
width: 100%;
height: 100%;
overflow: visible;
}
.fx-draw rect {
stroke: var(--fx-color, var(--brand));
stroke-width: 1.25;
stroke-dasharray: 100;
stroke-dashoffset: 100;
vector-effect: non-scaling-stroke;
transition: stroke-dashoffset 1.7s var(--ease-io), stroke 1s ease 1.5s;
}
.fx-drawn > .fx-draw rect {
stroke: var(--fx-draw-rest, color-mix(in srgb, var(--brand) 14%, var(--line-2)));
stroke-dashoffset: 0;
}
.fx-lvl-off .fx-frame,
.fx-lvl-off .fx-frame-hover,
.fx-lvl-off .fx-sheen,
.fx-lvl-off .fx-glow {
display: none;
}
.fx-lvl-off .fx-corners i,
.fx-lvl-off .fx-draw rect {
transition: none;
}
.fx-net-host {
isolation: isolate;
}
.fx-net {
position: absolute;
inset: 0;
z-index: -1;
display: block;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
transition: opacity 1.4s ease;
-webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, #000 35%, transparent 100%);
mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, #000 35%, transparent 100%);
}
.fx-net.is-on {
opacity: 1;
}
.marquee {
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
display: flex;
flex-wrap: wrap;
gap: var(--mq-gap, 2.5rem);
align-items: center;
width: max-content;
max-width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.marquee__track > * {
flex: none;
}
.marquee--on {
display: flex;
gap: var(--mq-gap, 2.5rem);
}
.marquee--on .marquee__track {
flex-wrap: nowrap;
max-width: none;
animation: fx-marquee var(--mq-dur, 30s) linear infinite;
}
.marquee--reverse .marquee__track {
animation-direction: reverse;
}
.marquee.is-paused .marquee__track {
animation-play-state: paused;
}
@media (hover: hover) and (pointer: fine) {
.marquee--on:hover .marquee__track {
animation-duration: calc(var(--mq-dur, 30s) * 2.4);
}
}
@keyframes fx-marquee {
to {
transform: translateX(calc(-1 * var(--mq-w, 100%) - var(--mq-gap, 2.5rem)));
}
}
.marquee--static,
.fx-lvl-off .marquee {
-webkit-mask-image: none;
mask-image: none;
}
.fx-lvl-off .marquee__track {
animation: none;
flex-wrap: wrap;
}
.fx-lvl-off .marquee__track--clone {
display: none;
}
[data-tilt] {
transition: transform 0.6s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s;
will-change: transform;
}
[data-tilt].is-tilting {
transition: box-shadow 0.45s var(--ease), border-color 0.3s;
}
.btn--light {
--btn-pass: rgb(255 255 255 / 0.22);
}
@media (hover: hover) and (pointer: fine) {
.btn--ghost::after,
.btn--light::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(105deg, transparent 40%, var(--btn-pass, color-mix(in srgb, var(--brand) 13%, transparent)) 50%, transparent 60%) 115% 0 / 260% 100% no-repeat;
pointer-events: none;
}
.btn--ghost:hover::after,
.btn--light:hover::after {
background-position: -15% 0;
transition: background-position 0.95s var(--ease-io);
}
}
.u-draw::after {
background: linear-gradient(90deg, currentColor 0 62%, var(--brand));
}
.page-head__title.anim-in {
animation: fx-title 0.9s var(--ease) 0.05s both;
}
@keyframes fx-title {
from {
opacity: 0;
transform: translate3d(0, 0.14em, 0);
}
to {
opacity: 1;
transform: none;
}
}
.cta-band__box.fx-host {
--fx-color: #fff;
--fx-tip: #fff;
--fx-sheen: rgb(255 255 255 / 0.14);
}
.bizcard.fx-host {
--fx-tip: color-mix(in srgb, var(--brand) 55%, #fff3e6);
}
@media (min-width: 720px) {
.journey__step:not(:last-child)::before {
content: "";
position: absolute;
top: 24px;
left: calc(50% + 40px);
width: calc(100% - 80px + 1.75rem);
height: 7px;
background: radial-gradient(circle, var(--brand) 0 2.2px, color-mix(in srgb, var(--brand) 25%, transparent) 2.4px 3.2px, transparent 3.6px) 0 50% / 7px 7px no-repeat;
opacity: 0;
pointer-events: none;
animation: fx-journey 7s var(--ease-io) 1s infinite paused;
}
.journey__step:nth-child(2)::before {
animation-delay: 3.4s;
}
.journey.fx-live .journey__step::before {
animation-play-state: running;
}
.fx-lvl-calm .journey__step::before,
.fx-lvl-off .journey__step::before {
display: none;
}
}
@keyframes fx-journey {
0% {
opacity: 0;
background-position: 0 50%;
}
5%,
40% {
opacity: 1;
}
45%,
100% {
opacity: 0;
background-position: 100% 50%;
}
}
.details__item[open] .details__body,
.faq__item[open]:not(.is-closing) .faq__a-inner {
animation: fx-open 0.5s var(--ease) both;
}
@keyframes fx-open {
from {
opacity: 0;
transform: translate3d(0, -6px, 0);
}
}
.toast.is-visible .icon path {
stroke-dasharray: 24;
animation: fx-check 0.5s var(--ease) 0.12s both;
}
@keyframes fx-check {
from {
stroke-dashoffset: 24;
}
to {
stroke-dashoffset: 0;
}
}
.nav__pill {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: var(--pw, 0);
height: var(--ph, 0);
border-radius: 999px;
background: var(--glass-2, var(--surface-2));
opacity: 0;
transform: translate3d(var(--px, 0), var(--py, 0), 0);
transition: transform 0.45s var(--ease), width 0.45s var(--ease), height 0.45s var(--ease), opacity 0.3s;
pointer-events: none;
}
.nav__pill.is-on {
opacity: 1;
}
.nav__link--cta {
position: relative;
overflow: hidden;
}
.nav__link--cta::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 45%;
background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.28), transparent);
opacity: 0;
transform: translateX(-130%) skewX(-18deg);
pointer-events: none;
}
.fx-lvl-full .nav__link--cta::after {
animation: fx-cta-sweep 9s var(--ease-io) 3s infinite;
}
.nav__link--cta:hover::after {
animation: fx-cta-sweep 0.9s var(--ease-io) 1;
}
@keyframes fx-cta-sweep {
0% {
opacity: 0;
transform: translateX(-130%) skewX(-18deg);
}
4% {
opacity: 1;
}
12%,
100% {
opacity: 0;
transform: translateX(330%) skewX(-18deg);
}
}
.fx-flame {
position: relative;
}
.flame {
--_c: var(--flame-color, var(--brand));
--_t: var(--flame-tip, #ffd36b);
position: absolute;
right: var(--flame-inset, 0.85rem);
bottom: var(--flame-bottom, 1px);
left: var(--flame-inset, 0.85rem);
z-index: 2;
display: block;
height: var(--flame-h, 12px);
pointer-events: none;
opacity: 0;
transform: scaleX(0.15);
transform-origin: 50% 100%;
transition: opacity 0.3s, transform 0.6s var(--ease);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.flame.flame--init {
opacity: 0 !important;
transform: scaleX(0.15) !important;
transition: none !important;
}
.flame::before {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
background: linear-gradient(90deg, var(--_c), color-mix(in srgb, var(--_c) 45%, var(--_t)) 30%, color-mix(in srgb, var(--_c) 80%, var(--_t)) 50%, color-mix(in srgb, var(--_c) 45%, var(--_t)) 70%, var(--_c)) 0 0 / 200% 100%;
animation: flame-wick 2.2s linear infinite paused;
}
.flame::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 28%;
min-height: 3px;
background: linear-gradient(to top, var(--_c), color-mix(in srgb, color-mix(in srgb, var(--_c) 60%, var(--_t)) 70%, transparent) 55%, transparent);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 4' preserveAspectRatio='none'%3E%3Cpath d='M0 4V2.4C1.5 1.2 2.5 1.2 3 2.2C3.6 0.9 5 0.8 6 2C7 1 8.4 1.2 9 2.2C9.6 1.2 11 1.2 12 2.4V4Z'/%3E%3C/svg%3E") 0 100% / 12px 100% repeat-x;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 4' preserveAspectRatio='none'%3E%3Cpath d='M0 4V2.4C1.5 1.2 2.5 1.2 3 2.2C3.6 0.9 5 0.8 6 2C7 1 8.4 1.2 9 2.2C9.6 1.2 11 1.2 12 2.4V4Z'/%3E%3C/svg%3E") 0 100% / 12px 100% repeat-x;
animation: flame-bed 0.7s linear infinite paused;
}
.flame i {
position: absolute;
bottom: 0;
left: var(--x);
width: calc(var(--w) * var(--flame-k, 1));
height: var(--h);
margin-left: calc(var(--w) * var(--flame-k, 1) / -2);
background: linear-gradient(to top, color-mix(in srgb, var(--_c) 92%, #c01800) 0%, color-mix(in srgb, var(--_c) 85%, var(--_t)) 35%, color-mix(in srgb, var(--_c) 55%, var(--_t)) 65%, color-mix(in srgb, color-mix(in srgb, var(--_c) 30%, var(--_t)) 35%, transparent) 100%);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' preserveAspectRatio='none'%3E%3Cpath d='M5.4 0C5.6 4.4 9.6 7.4 9.6 11.6A4.8 4.4 0 0 1 0.4 11.6C0.4 9 2.4 7.6 3.2 5.2C4.2 6.8 5 5 5.4 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' preserveAspectRatio='none'%3E%3Cpath d='M5.4 0C5.6 4.4 9.6 7.4 9.6 11.6A4.8 4.4 0 0 1 0.4 11.6C0.4 9 2.4 7.6 3.2 5.2C4.2 6.8 5 5 5.4 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
opacity: 0;
transform-origin: 50% 100%;
animation: flame-lick var(--d) cubic-bezier(0.4, 0, 0.6, 1) var(--dl) infinite paused;
}
.flame i:nth-child(1) { --x: 12%; --w: 4px; --h: 58%; --d: 1.05s; --dl: -0.2s; }
.flame i:nth-child(2) { --x: 24%; --w: 5px; --h: 75%; --d: 1.25s; --dl: -0.7s; }
.flame i:nth-child(3) { --x: 37%; --w: 5.5px; --h: 83%; --d: 0.9s; --dl: -0.35s; }
.flame i:nth-child(4) { --x: 50%; --w: 6px; --h: 92%; --d: 1.1s; --dl: -0.85s; }
.flame i:nth-child(5) { --x: 63%; --w: 5.5px; --h: 83%; --d: 0.95s; --dl: -0.1s; }
.flame i:nth-child(6) { --x: 76%; --w: 5px; --h: 75%; --d: 1.3s; --dl: -0.6s; }
.flame i:nth-child(7) { --x: 88%; --w: 4px; --h: 58%; --d: 1.15s; --dl: -0.95s; }
.flame b {
position: absolute;
bottom: 25%;
left: var(--x);
width: 1.5px;
height: 1.5px;
border-radius: 50%;
background: color-mix(in srgb, var(--_c) 75%, var(--_t));
opacity: 0;
animation: flame-ember var(--d) ease-out var(--dl) infinite paused;
}
.flame b:nth-of-type(1) { --x: 42%; --d: 1.9s; --dl: -0.3s; }
.flame b:nth-of-type(2) { --x: 70%; --d: 2.4s; --dl: -1.4s; }
@keyframes flame-bed {
to {
-webkit-mask-position: 12px 100%;
mask-position: 12px 100%;
}
}
@keyframes flame-lick {
0% { opacity: 0; transform: scale(0.7, 0.2); }
18% { opacity: 1; transform: scale(1, 0.8) skewX(-8deg); }
45% { opacity: 1; transform: scale(0.9, 1.05) skewX(7deg); }
72% { opacity: 0.7; transform: translateY(-1px) scale(0.7, 0.9) skewX(-6deg); }
100% { opacity: 0; transform: translateY(-3px) scale(0.4, 0.55) skewX(4deg); }
}
@keyframes flame-ember {
0% { opacity: 0; transform: translate(0, 0); }
20% { opacity: 0.9; }
100% { opacity: 0; transform: translate(2px, -11px); }
}
@keyframes flame-wick {
to {
background-position: -200% 0;
}
}
:is([data-fx~="flame"], .fx-flame):is(:focus-visible, .is-lit, [aria-expanded="true"], [aria-selected="true"], [aria-pressed="true"], [data-flame="on"], :has(:focus-visible)) > .flame {
opacity: 1;
transform: none;
}
:is([data-fx~="flame"], .fx-flame):is(:focus-visible, .is-lit, [aria-expanded="true"], [aria-selected="true"], [aria-pressed="true"], [data-flame="on"], :has(:focus-visible)) > .flame :is(i, b),
:is([data-fx~="flame"], .fx-flame):is(:focus-visible, .is-lit, [aria-expanded="true"], [aria-selected="true"], [aria-pressed="true"], [data-flame="on"], :has(:focus-visible)) > .flame::before,
:is([data-fx~="flame"], .fx-flame):is(:focus-visible, .is-lit, [aria-expanded="true"], [aria-selected="true"], [aria-pressed="true"], [data-flame="on"], :has(:focus-visible)) > .flame::after {
animation-play-state: running;
}
@media (hover: hover) and (pointer: fine) {
:is([data-fx~="flame"], .fx-flame):hover > .flame {
opacity: 1;
transform: none;
}
:is([data-fx~="flame"], .fx-flame):hover > .flame :is(i, b),
:is([data-fx~="flame"], .fx-flame):hover > .flame::before,
:is([data-fx~="flame"], .fx-flame):hover > .flame::after {
animation-play-state: running;
}
}
:is([data-fx~="flame"], .fx-flame):is([aria-selected="true"], [aria-pressed="true"]) > .flame b {
display: none;
}
.btn {
--flame-inset: 14%;
--flame-bottom: 0px;
}
.btn--primary,
.btn--primary.btn--lg {
--flame-color: #ffd36b;
--flame-tip: #fff3c4;
}
.btn--sm {
--flame-h: 9px;
}
.field {
--flame-inset: 0.9rem;
}
.flame:not(.nav .flame) {
display: none !important;
}
html:not(.fx-js) .nav .fx-flame::after {
content: "";
position: absolute;
right: var(--flame-inset, 0.85rem);
bottom: 0;
left: var(--flame-inset, 0.85rem);
height: 2px;
background: var(--flame-color, var(--brand));
transform: scaleX(0);
transform-origin: 50% 50%;
transition: transform 0.4s var(--ease);
pointer-events: none;
}
html:not(.fx-js) .nav .fx-flame:is(:hover, :focus-visible)::after {
transform: none;
}
.fx-lvl-off .flame i,
.fx-lvl-off .flame b,
.fx-lvl-off .flame::after {
display: none;
}
.fx-lvl-off .flame {
height: 2px;
transition: opacity 0.2s;
transform: none;
}
.fx-lvl-off .flame::before {
animation: none;
}
@media (prefers-reduced-motion: reduce) {
.flame i,
.flame b,
.flame::after {
display: none;
}
.flame {
height: 2px;
transform: none;
}
.flame::before {
animation: none;
}
}
@media (prefers-reduced-motion: reduce) {
.btn--ghost::after,
.btn--light::after {
display: none;
}
.page-head__title.anim-in {
animation: none;
}
.marquee__track {
animation: none !important;
flex-wrap: wrap;
}
.marquee__track--clone {
display: none;
}
[data-tilt] {
transform: none !important;
}
}
html[data-motion="off"] {
scroll-behavior: auto;
}
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
animation-duration: 0.01ms !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
}
html[data-motion="off"] .reveal-ready [data-reveal]:not(.is-in) {
opacity: 1;
transform: none;
}
html[data-motion="off"] .btn--ghost::after,
html[data-motion="off"] .btn--light::after {
display: none;
}
html[data-motion="off"] .page-head__title.anim-in {
animation: none;
}
@media print {
.fx,
.fx-net {
display: none !important;
}
}

/* css/front/neon-cards.css */

.hrc::after,
.rc__neon {
content: "";
position: absolute;
inset: 0;
z-index: 5;
padding: 1.5px;
border-radius: inherit;
background: conic-gradient(from var(--neon-a, 0deg), transparent 0 50%, color-mix(in srgb, var(--brand) 65%, transparent) 64%, #ffd36b 73%, #fff3c4 76%, var(--brand) 82%, transparent 94%);
-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);
opacity: 0;
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--brand) 75%, transparent));
pointer-events: none;
transition: opacity 0.45s var(--ease);
}
.rc__neon { border-radius: var(--rc-radius, 20px); }
.hrc:hover::after,
.hrc:focus-within::after,
.rc:hover .rc__neon,
.rc:focus-within .rc__neon {
opacity: 1;
animation: neon-spin 3s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.hrc:hover::after, .hrc:focus-within::after, .rc:hover .rc__neon, .rc:focus-within .rc__neon { animation: none; --neon-a: 200deg; }
}
html[data-motion="off"] .hrc:hover::after,
html[data-motion="off"] .hrc:focus-within::after,
html[data-motion="off"] .rc:hover .rc__neon,
html[data-motion="off"] .rc:focus-within .rc__neon { animation: none; --neon-a: 200deg; }

/* css/front/neon.css */

@property --neon-a {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.nav__link.is-neon,
.btn.is-neon {
--neon-fill: var(--brand-fill);
--neon-c1: #ff5a1f;
--neon-c2: #ffd36b;
--neon-c3: #fff6d6;
--neon-c4: #ff2e63;
--neon-glow: rgb(255 90 31 / 0.55);
--neon-glow-2: rgb(255 120 40 / 0.22);
border: 2px solid transparent;
background:
linear-gradient(var(--neon-fill), var(--neon-fill)) padding-box,
conic-gradient(from var(--neon-a), var(--neon-c1), var(--neon-c2) 12%, var(--neon-c3) 17%, var(--neon-c2) 22%, var(--neon-c1) 34%, var(--neon-c4) 62%, var(--neon-c1) 100%) border-box;
box-shadow:
0 0 0 1px rgb(255 90 31 / 0.25),
0 0 12px 1px var(--neon-glow),
0 0 30px 4px var(--neon-glow-2),
inset 0 0 10px rgb(255 211 107 / 0.25);
animation:
neon-spin 3.4s linear infinite,
neon-breathe 2.6s ease-in-out infinite;
}
.nav__link.is-neon:hover,
.nav__link.is-neon:focus-visible,
.btn.is-neon:hover,
.btn.is-neon:focus-visible {
--neon-fill: var(--brand-fill-hover);
animation-duration: 1.6s, 2.6s;
}
:root[data-theme="light"] .nav__link.is-neon,
:root[data-theme="light"] .btn.is-neon {
--neon-glow: rgb(240 80 20 / 0.5);
--neon-glow-2: rgb(255 110 40 / 0.2);
--neon-c3: #ffe9a8;
}
@keyframes neon-spin {
to { --neon-a: 360deg; }
}
@keyframes neon-breathe {
0%, 100% {
box-shadow:
0 0 0 1px rgb(255 90 31 / 0.25),
0 0 10px 0 var(--neon-glow),
0 0 24px 2px var(--neon-glow-2),
inset 0 0 8px rgb(255 211 107 / 0.2);
}
50% {
box-shadow:
0 0 0 1px rgb(255 140 60 / 0.45),
0 0 18px 3px var(--neon-glow),
0 0 42px 8px var(--neon-glow-2),
inset 0 0 12px rgb(255 211 107 / 0.35);
}
}
html[data-motion="calm"] .nav__link.is-neon,
html[data-motion="calm"] .btn.is-neon {
animation: neon-spin 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.nav__link.is-neon,
.btn.is-neon {
animation: none;
--neon-a: 200deg;
}
}
html[data-motion="off"] .nav__link.is-neon,
html[data-motion="off"] .btn.is-neon {
animation: none;
--neon-a: 200deg;
}
@media (forced-colors: active) {
.nav__link.is-neon,
.btn.is-neon {
border-color: ButtonText;
animation: none;
}
}

/* css/front/notfound.css */

.nfp {
padding: clamp(7rem, 5rem + 6vw, 9rem) 0 clamp(3.5rem, 6vw, 5.5rem);
}
.nfp__inner {
display: grid;
gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 960px) {
.nfp__inner {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: start;
}
}
.nfp__code {
display: inline-flex;
align-items: stretch;
margin: 0 0 1.25rem;
overflow: hidden;
border: 1px solid var(--line-2);
border-radius: 10px;
background: var(--surface);
font-family: var(--mono);
letter-spacing: 0.06em;
}
.nfp__code span,
.nfp__code b {
padding: 0.4rem 0.8rem;
font-size: var(--fs-label);
font-weight: 500;
text-transform: uppercase;
}
.nfp__code b {
color: var(--text);
background: var(--brand-soft-2);
box-shadow: inset 1px 0 0 var(--line-2);
}
.nfp__title {
margin: 0;
font-size: clamp(2.2rem, 1.4rem + 3vw, 3.75rem);
font-weight: 650;
line-height: 1.06;
letter-spacing: -0.035em;
text-wrap: balance;
animation: rise 0.8s var(--ease) both;
}
.nfp__text {
max-width: 30rem;
margin: 1.25rem 0 0;
font-size: 1.05rem;
line-height: 1.6;
color: var(--muted);
}
.nfp__meta {
display: grid;
gap: 0.6rem;
margin-top: 1.5rem;
}
.nfp__path,
.nfp__suggest {
margin: 0;
font-size: 0.95rem;
}
.nfp__path {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.75rem;
}
.nfp__path-label {
color: var(--muted);
}
.nfp__path-value {
max-width: 100%;
padding: 0.2rem 0.55rem;
overflow: hidden;
border: 1px solid var(--line-2);
border-radius: 8px;
background: var(--surface);
font-family: var(--mono);
font-size: 0.82rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.nfp__suggest-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.1rem 0 0.3rem;
font-weight: 650;
color: var(--brand-600);
text-decoration: none;
--flame-inset: 0px;
--flame-bottom: 0px;
--flame-h: 9px;
}
.nfp__suggest-link .icon {
width: 16px;
height: 16px;
}
.nfp__actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1.75rem;
}
.nfp__quick {
margin-top: 2.25rem;
padding-top: 1.5rem;
border-top: 1px solid var(--line-2);
}
.nfp__quick-title,
.nfp__group-title {
margin: 0 0 0.75rem;
font-family: var(--mono);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.nfp__quick-links {
display: grid;
gap: 0.6rem;
}
@media (min-width: 560px) and (max-width: 959px) {
.nfp__quick-links {
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
}
.nfp__search {
padding: clamp(1rem, 2.5vw, 1.5rem);
border: 1px solid var(--line-2);
border-radius: 20px;
background: var(--surface);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), var(--shadow-md);
}
.nfp__form {
margin-bottom: 1.25rem;
}
.nfp__label {
display: block;
margin-bottom: 0.45rem;
font-size: 0.9rem;
font-weight: 650;
}
.nfp__field {
position: relative;
}
.nfp__search-icon {
position: absolute;
top: 50%;
left: 0.95rem;
width: 18px;
height: 18px;
color: var(--faint);
transform: translateY(-50%);
pointer-events: none;
}
.nfp__input {
display: block;
width: 100%;
min-height: 52px;
padding: 0.7rem 1rem 0.7rem 2.7rem;
border: 1px solid var(--line-2);
border-radius: 14px;
background: var(--bg-soft);
font-size: 1rem;
transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.nfp__input:hover {
border-color: #cfcfcf;
}
.nfp__input:focus {
outline: none;
border-color: var(--brand);
background: var(--surface);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
.nfp__count {
min-height: 1.2rem;
margin: 0.5rem 0 0;
font-size: 0.82rem;
color: var(--muted);
}
.nfp__group + .nfp__group {
margin-top: 1.25rem;
}
.nfp__list {
display: grid;
gap: 0.3rem;
margin: 0;
padding: 0;
list-style: none;
}
.nfp .nf__link {
position: relative;
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.6rem 0.75rem;
overflow: hidden;
border: 1px solid transparent;
border-radius: 12px;
color: var(--ink);
text-decoration: none;
transition: background-color 0.2s, border-color 0.2s;
--flame-inset: 0.75rem;
--flame-bottom: 0px;
--flame-h: 10px;
}
.nfp .nf__link:hover,
.nfp .nf__link:focus-visible {
border-color: var(--brand-100);
background: var(--brand-50);
}
.nfp__icon {
flex: none;
box-sizing: content-box;
width: 18px;
height: 18px;
padding: 7px;
border-radius: 9px;
color: var(--brand-600);
background: var(--brand-50);
box-shadow: inset 0 0 0 1px var(--brand-100);
}
.nfp__link-text {
display: grid;
flex: 1;
gap: 0.1rem;
min-width: 0;
}
.nfp__link-label {
font-size: 0.97rem;
font-weight: 650;
line-height: 1.25;
}
.nfp__link-desc {
overflow: hidden;
font-size: 0.84rem;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--muted);
}
.nfp__arrow {
flex: none;
width: 16px;
height: 16px;
color: var(--faint);
transition: transform 0.3s var(--ease), color 0.2s;
}
.nfp .nf__link:hover .nfp__arrow {
color: var(--brand-600);
transform: translateX(3px);
}
.nfp [data-nf-item][hidden],
.nfp [data-nf-group][hidden] {
display: none;
}
.nfp__empty {
display: grid;
gap: 0.4rem;
padding: 1.25rem;
border: 1px dashed var(--line-2);
border-radius: 14px;
background: var(--bg-soft);
}
.nfp__empty[hidden] {
display: none;
}
.nfp__empty-title {
margin: 0;
font-size: 1.05rem;
font-weight: 650;
}
.nfp__empty-text {
margin: 0 0 0.6rem;
font-size: 0.92rem;
color: var(--muted);
}
.nfp__list > li.is-shown {
animation: rise 0.35s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
.nfp__title,
.nfp__list > li.is-shown {
animation: none;
}
}
html[data-motion="off"] .nfp__title,
html[data-motion="off"] .nfp__list > li.is-shown {
animation: none;
}

/* css/front/pages.css */

.pg-card {
position: relative;
border: 1px solid var(--line);
border-radius: var(--r, 16px);
background: var(--surface);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
color: var(--text);
}
:root[data-theme="light"] .pg-card {
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), var(--shadow-sm);
}
.pg-card--pad {
padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.pg-card--2 {
background: var(--surface-2);
}
.pg-card--glow {
isolation: isolate;
transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s;
}
.pg-card--glow::before {
content: "";
position: absolute;
inset: -1px;
z-index: -1;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 85%, transparent), color-mix(in srgb, var(--brand) 18%, transparent) 36%, transparent 62%, color-mix(in srgb, var(--accent, #ffb347) 40%, transparent));
-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);
opacity: 0.55;
transition: opacity 0.5s var(--ease);
pointer-events: none;
}
.pg-card--glow:focus-within::before {
opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
.pg-card--glow:hover {
transform: translateY(-4px);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 24px 48px -28px var(--brand-glow, rgb(255 90 31 / 0.35)), 0 18px 40px -30px rgb(0 0 0 / 0.7);
}
.pg-card--glow:hover::before {
opacity: 1;
}
}
[data-pg-spot] {
position: relative;
overflow: clip;
}
[data-pg-spot]::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brand) 13%, transparent), transparent 70%);
opacity: var(--spot, 0);
transition: opacity 0.5s var(--ease);
pointer-events: none;
}
[data-pg-spot] > * {
position: relative;
z-index: 1;
}
.pg-head {
max-width: 44rem;
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.pg-head .eyebrow {
margin-bottom: 1rem;
}
.pg-head__title,
.pg-h2 {
margin: 0;
font-size: var(--fs-h2);
font-weight: 700;
line-height: var(--lh-head, 1.06);
letter-spacing: var(--ls-head);
text-wrap: balance;
}
.pg-head__intro {
max-width: 40rem;
margin: 1rem 0 0;
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--text-2);
}
.pg-head--split {
display: grid;
gap: 1.25rem 2rem;
max-width: none;
}
@media (min-width: 900px) {
.pg-head--split {
grid-template-columns: minmax(0, 44rem) auto;
align-items: end;
}
}
.pg-mark {
position: relative;
display: inline-block;
font-style: normal;
color: var(--brand-600);
white-space: nowrap;
}
.pg-mark::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -0.12em;
height: 0.28em;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9c24-8 48-8 72 0s48 8 72 0 36-6 52 0' fill='none' stroke='%23ff5a1f' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
opacity: 0.9;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 1s var(--ease) 0.35s;
}
.is-in .pg-mark::after,
.pg-mark.is-in::after,
html.pg-ready .pg-mark::after {
transform: none;
}
.pg-list {
display: grid;
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
}
.pg-list li {
display: flex;
gap: 0.6rem;
align-items: flex-start;
font-size: 0.95rem;
line-height: 1.5;
color: var(--text-2);
}
.pg-list .icon {
flex: none;
width: 16px;
height: 16px;
margin-top: 0.2rem;
color: var(--brand-600);
}
.pg-num {
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.08em;
color: var(--brand-600);
}
.pg-ico {
display: grid;
place-items: center;
flex: none;
width: 44px;
height: 44px;
border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
border-radius: var(--r-sm, 10px);
background: var(--brand-soft);
color: var(--brand-600);
}
.pg-ico .icon {
width: 20px;
height: 20px;
}
.pg-sub {
margin: 0;
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
.pg-spot {
position: relative;
}
.pg-spot::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(60% 50% at 18% 0%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 70%);
pointer-events: none;
}
.pg-spot--r::before {
background: radial-gradient(55% 50% at 86% 10%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 70%);
}
.pg-line {
position: relative;
display: block;
height: 2px;
border-radius: 2px;
background: var(--line);
overflow: hidden;
}
.pg-line > i {
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--grad-brand, linear-gradient(90deg, var(--brand), var(--accent, #ffb347)));
transform: scaleX(var(--w, 0.6));
transform-origin: 0 50%;
transition: transform 1.4s var(--ease) var(--d, 0.2s);
}
.pg-line > i::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent, #ffb347);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent);
transform: translate(50%, -50%);
}
.pg-line:not(.is-in) > i {
transform: scaleX(0);
}
.pg-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 38px;
padding: 0 0.95rem;
border: 1px solid var(--line-2);
border-radius: 999px;
background: transparent;
font: inherit;
font-size: 0.88rem;
font-weight: 600;
color: var(--text-2);
cursor: pointer;
transition: color 0.2s, border-color 0.2s, background-color 0.2s, transform 0.25s var(--ease);
}
.pg-chip:hover {
color: var(--text);
border-color: var(--text-3);
}
.pg-chip[aria-pressed="true"] {
color: var(--brand-600);
border-color: color-mix(in srgb, var(--brand) 55%, transparent);
background: var(--brand-soft);
}
.pg-chip span,
.pg-chip small {
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 500;
color: var(--text-3);
}
.pg-chip[aria-pressed="true"] span,
.pg-chip[aria-pressed="true"] small {
color: var(--brand-600);
}
@media (prefers-reduced-motion: reduce) {
.pg-card--glow,
.pg-mark::after,
.pg-line > i,
[data-pg-spot]::after {
transition: none !important;
}
.pg-mark::after,
.pg-line:not(.is-in) > i {
transform: none !important;
}
.pg-line > i {
transform: scaleX(var(--w, 0.6)) !important;
}
}
html[data-motion="off"] .pg-card--glow,
html[data-motion="off"] .pg-mark::after,
html[data-motion="off"] .pg-line > i,
html[data-motion="off"] [data-pg-spot]::after {
transition: none !important;
}
html[data-motion="off"] .pg-mark::after {
transform: none !important;
}
html[data-motion="off"] .pg-line > i {
transform: scaleX(var(--w, 0.6)) !important;
}
html[data-motion="off"] [data-pg-spot]::after {
display: none;
}

/* css/front/process.css */

.ps {
position: relative;
padding-block: clamp(1.25rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
}
.ps__grid {
display: grid;
grid-template-areas: "head" "stage" "steps";
gap: 1.5rem;
}
.ps__side {
display: contents;
}
.ps__head {
grid-area: head;
}
.ps-steps {
grid-area: steps;
}
.ps-stage {
grid-area: stage;
}
@media (min-width: 960px) {
.ps__grid {
grid-template-areas: "side stage";
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: center;
gap: clamp(2rem, 4vw, 4rem);
}
.ps__side {
display: block;
grid-area: side;
}
}
.ps__head .eyebrow {
margin: 0 0 0.6rem;
}
.ps__title {
margin: 0 0 1.1rem;
font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
font-weight: 700;
line-height: var(--lh-head, 1.06);
letter-spacing: var(--ls-head, -0.03em);
color: var(--text);
}
.ps-steps {
margin: 0;
padding: 0;
list-style: none;
}
.ps-step {
position: relative;
border-top: 1px solid var(--line);
}
.ps-step:last-child {
border-bottom: 1px solid var(--line);
}
.ps-step__btn {
position: relative;
display: flex;
align-items: center;
gap: 0.9rem;
width: 100%;
padding: 0.95rem 0.25rem;
border: 0;
background: none;
color: var(--text-2);
font: inherit;
text-align: start;
cursor: pointer;
transition: color 0.3s;
}
.ps-step__btn:hover,
.ps-step.is-active .ps-step__btn {
color: var(--text);
}
.ps-step__btn:focus-visible {
outline: 2px solid var(--focus, var(--brand));
outline-offset: 2px;
border-radius: 8px;
}
.ps-step__no {
display: inline-grid;
place-items: center;
flex: none;
width: 2.1rem;
height: 2.1rem;
border: 1px solid var(--line-2);
border-radius: 50%;
font-family: var(--mono);
font-size: 0.72rem;
color: var(--text-3);
transition: background-color 0.35s, border-color 0.35s, color 0.35s, transform 0.45s var(--ease-out, ease);
}
.ps-step.is-done .ps-step__no {
border-color: color-mix(in srgb, var(--brand) 45%, transparent);
color: var(--brand-600);
}
.ps-step.is-active .ps-step__no {
border-color: var(--brand);
background: var(--brand-soft-2, var(--brand-soft));
color: var(--brand-600);
font-weight: 600;
transform: scale(1.06);
box-shadow: 0 0 0 5px var(--brand-soft);
}
.ps-step__name {
font-size: 1.08rem;
font-weight: 600;
letter-spacing: -0.01em;
}
.ps-step__bar {
position: absolute;
inset-inline: 0;
top: -1px;
height: 2px;
overflow: hidden;
pointer-events: none;
}
.ps-step__bar i {
display: block;
height: 100%;
background: var(--grad-brand, var(--brand));
transform: scaleX(0);
transform-origin: left center;
}
.ps-step.is-done .ps-step__bar i {
transform: scaleX(0);
}
.ps-step.is-active .ps-step__bar i {
transform: scaleX(var(--ps-p, 1));
}
.ps-step__more {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.45s var(--ease-out, ease), opacity 0.35s;
}
.ps-step__duo {
display: grid;
gap: 0.45rem;
min-height: 0;
margin: 0;
padding: 0 0.25rem 1rem calc(2.1rem + 1.15rem);
overflow: hidden;
}
.ps-step__duo > div {
display: grid;
grid-template-columns: 3.6rem minmax(0, 1fr);
align-items: baseline;
gap: 0.6rem;
}
.ps-step__duo dt {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-600);
}
.ps-step__duo dt .icon {
width: 0.85rem;
height: 0.85rem;
}
.ps-step__duo dd {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
color: var(--text-2);
}
.ps.ps-on .ps-step__more {
grid-template-rows: 0fr;
opacity: 0;
}
.ps.ps-on .ps-step.is-active .ps-step__more {
grid-template-rows: 1fr;
opacity: 1;
}
.ps.ps-on .ps-step.is-active .ps-step__duo > div {
animation: ps-duo-in 0.5s var(--ease-out, ease) both;
}
.ps.ps-on .ps-step.is-active .ps-step__duo > div + div {
animation-delay: 0.12s;
}
@keyframes ps-duo-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.ps-stage {
position: relative;
isolation: isolate;
margin: 0;
padding: clamp(0.75rem, 1.6vw, 1.1rem);
border: 1px solid var(--line);
border-radius: var(--r-lg, 24px);
background: var(--surface);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), var(--shadow-md, none);
overflow: hidden;
}
.ps-stage::before {
content: "";
position: absolute;
z-index: -1;
inset: -30%;
background: radial-gradient(40% 40% at 30% 30%, var(--brand-glow), transparent 70%);
opacity: 0.35;
pointer-events: none;
}
.ps.is-live .ps-stage::before {
animation: ps-drift 14s var(--ease-io, ease-in-out) infinite alternate;
}
@keyframes ps-drift {
from { transform: translate3d(-6%, -4%, 0); }
to { transform: translate3d(14%, 18%, 0); }
}
.ps-stage__top {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.ps-stage__prog {
display: flex;
flex: 1;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.ps-stage__prog li {
flex: 1;
height: 3px;
border-radius: 3px;
background: var(--line-2);
overflow: hidden;
}
.ps-stage__prog i {
display: block;
height: 100%;
border-radius: inherit;
background: var(--grad-brand, var(--brand));
transform: scaleX(0);
transform-origin: left center;
}
.ps-stage__prog li.is-done i {
transform: scaleX(1);
}
.ps-stage__prog li.is-active i {
transform: scaleX(var(--ps-p, 1));
}
.ps:not(.ps-on) .ps-stage__prog i {
transform: scaleX(1);
}
.ps-stage__pause {
display: inline-grid;
place-items: center;
flex: none;
width: 2rem;
height: 2rem;
padding: 0;
border: 1px solid var(--line-2);
border-radius: 50%;
background: var(--surface-2);
color: var(--text-2);
cursor: pointer;
transition: color 0.2s, border-color 0.2s;
}
.ps-stage__pause:hover {
color: var(--text);
border-color: var(--brand);
}
.ps-stage__pause:focus-visible {
outline: 2px solid var(--focus, var(--brand));
outline-offset: 2px;
}
.ps-stage__pause .icon {
width: 0.85rem;
height: 0.85rem;
}
.ps-stage__pause .ps-ico-play,
.ps-stage__pause[aria-pressed="true"] .ps-ico-pause {
display: none;
}
.ps-stage__pause[aria-pressed="true"] .ps-ico-play {
display: block;
}
.ps-stage__cap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 0.75rem;
}
.ps-stage__names {
display: grid;
}
.ps-stage__name {
grid-area: 1 / 1;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--text);
opacity: 0;
transform: translateY(6px);
transition: opacity 0.4s, transform 0.5s var(--ease-out, ease);
}
.ps-stage__name b {
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 500;
color: var(--brand-600);
}
.ps[data-ps-scene="0"] [data-ps-name="0"],
.ps[data-ps-scene="1"] [data-ps-name="1"],
.ps[data-ps-scene="2"] [data-ps-name="2"],
.ps[data-ps-scene="3"] [data-ps-name="3"] {
opacity: 1;
transform: none;
}
.ps-stage__note {
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
white-space: nowrap;
}
.ps-scene {
display: block;
width: 100%;
height: auto;
direction: ltr;
overflow: visible;
}
.ps-scene * {
transform-box: fill-box;
}
.ps-win { fill: var(--bg-2); stroke: var(--line-2); }
.ps-win--phone { fill: var(--surface); }
.ps-rule { fill: none; stroke: var(--line); }
.ps-dot { fill: var(--surface-3); }
.ps-url { fill: var(--surface-2); stroke: var(--line); }
.ps-faint { fill: var(--text-3); opacity: 0.6; }
.ps-t { fill: var(--text-2); font-family: var(--font); font-size: 13px; font-weight: 500; }
.ps-t--sm { font-size: 11px; fill: var(--text); }
.ps-t--dim { fill: var(--text-3); }
.ps-t--h { fill: var(--text); font-size: 15px; font-weight: 700; }
.ps-t--b { fill: var(--text); font-weight: 600; }
.ps-surf { fill: var(--surface-2); }
.ps-brand { fill: var(--brand); }
.ps-acc { fill: var(--accent); }
.ps-ink { fill: var(--text); opacity: 0.85; }
.ps-dim { fill: var(--text-3); opacity: 0.45; }
.ps-on { fill: var(--brand-ink); }
.ps-line { fill: none; stroke: var(--line-2); }
.ps-soft { fill: var(--brand-soft-2, var(--brand-soft)); }
.ps-grad { fill: url(#ps-grad); }
.ps-stop-a { stop-color: var(--brand); }
.ps-stop-b { stop-color: var(--accent); }
.ps-sun { fill: var(--brand-ink); opacity: 0.85; }
.ps-hill { fill: var(--bg); opacity: 0.4; }
.ps-note { fill: var(--surface-2); stroke: var(--line-2); }
.ps-box { fill: none; stroke: var(--line-2); stroke-width: 1.4; }
.ps-caret { fill: var(--brand); }
.ps-lock { fill: none; stroke: var(--brand); stroke-width: 1.4; stroke-linejoin: round; }
.ps-toast__bg { fill: var(--surface); stroke: var(--line-2); }
.ps-ok { fill: var(--brand); }
.ps-okt { fill: none; stroke: var(--brand-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ps-live-dot { fill: var(--ok, var(--brand)); }
.ps-live-ring { fill: none; stroke: var(--ok, var(--brand)); stroke-width: 1.5; opacity: 0; }
.ps-ping { fill: none; stroke: var(--brand); stroke-width: 1.2; opacity: 0; }
.ps-wf,
.ps-tick,
.ps-okt {
stroke-dasharray: 1;
}
.ps-wf {
fill: none;
stroke: var(--text-3);
stroke-width: 1.2;
stroke-dashoffset: 1;
transition: stroke-dashoffset 0.9s var(--ease-io, ease);
}
.ps-tick {
fill: none;
stroke: var(--brand);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dashoffset: 1;
transition: stroke-dashoffset 0.4s var(--ease-out, ease);
}
.ps-wbar {
fill: var(--line-2);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.6s var(--ease-out, ease);
}
.ps-grow {
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.6s var(--ease-out, ease);
}
.ps-scan {
fill: var(--brand);
opacity: 0;
}
.ps-l-brief,
.ps-l-wire,
.ps-l-design,
.ps-l-live,
.ps-url-draft,
.ps-url-live {
opacity: 0;
transition: opacity 0.55s var(--ease, ease);
}
.ps-l-brief {
transform: translateY(14px) scale(0.97);
transform-origin: 50% 50%;
transition: opacity 0.55s var(--ease, ease), transform 0.7s var(--ease-out, ease);
}
.ps-blk {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s var(--ease, ease), transform 0.6s var(--ease-out, ease);
}
.ps-swatch {
opacity: 0;
transform: translate(312px, 214px) scale(0.6);
transition: opacity 0.4s, transform 0.5s var(--ease-out, ease);
}
.ps-cursor {
opacity: 0;
transform: translate(430px, 330px);
}
.ps-click {
fill: none;
stroke: var(--brand);
stroke-width: 1.5;
opacity: 0;
}
.ps-cur {
fill: var(--text);
stroke: var(--bg);
stroke-width: 1.2;
stroke-linejoin: round;
}
.ps-phone {
opacity: 0;
transform: translateX(46px);
transition: opacity 0.5s, transform 0.75s var(--ease-out, ease);
}
.ps-toast {
opacity: 0;
transform: translateY(-12px) scale(0.92);
transform-origin: 50% 50%;
transition: opacity 0.45s, transform 0.6s var(--ease-out, ease);
}
.ps-d1 { transition-delay: 0.05s; }
.ps-d2 { transition-delay: 0.2s; }
.ps-d3 { transition-delay: 0.35s; }
.ps-d4 { transition-delay: 0.5s; }
.ps-d5 { transition-delay: 0.65s; }
.ps-d6 { transition-delay: 0.8s; }
.ps[data-ps-scene="0"] .ps-l-brief { opacity: 1; transform: none; }
.ps[data-ps-scene="0"] .ps-tick { stroke-dashoffset: 0; }
.ps[data-ps-scene="0"] .ps-grow { transform: none; }
.ps[data-ps-scene="0"] .ps-tick.ps-d2 { transition-delay: 0.45s; }
.ps[data-ps-scene="0"] .ps-tick.ps-d3 { transition-delay: 0.95s; }
.ps[data-ps-scene="0"] .ps-tick.ps-d4 { transition-delay: 1.45s; }
.ps[data-ps-scene="0"] .ps-tick.ps-d5 { transition-delay: 1.95s; }
.ps[data-ps-scene="0"] .ps-grow.ps-d2 { transition-delay: 0.3s; }
.ps[data-ps-scene="0"] .ps-grow.ps-d3 { transition-delay: 0.8s; }
.ps[data-ps-scene="0"] .ps-grow.ps-d4 { transition-delay: 1.3s; }
.ps[data-ps-scene="0"] .ps-grow.ps-d5 { transition-delay: 1.8s; }
.ps[data-ps-scene="1"] .ps-l-wire,
.ps[data-ps-scene="2"] .ps-l-wire { opacity: 1; }
.ps[data-ps-scene="2"] .ps-l-wire { opacity: 0.3; }
.ps[data-ps-scene="1"] .ps-wf,
.ps[data-ps-scene="2"] .ps-wf { stroke-dashoffset: 0; }
.ps[data-ps-scene="1"] .ps-wbar,
.ps[data-ps-scene="2"] .ps-wbar { transform: none; }
.ps[data-ps-scene="2"] .ps-l-design,
.ps[data-ps-scene="3"] .ps-l-design { opacity: 1; }
.ps[data-ps-scene="2"] .ps-blk,
.ps[data-ps-scene="3"] .ps-blk { opacity: 1; transform: none; }
.ps[data-ps-scene="2"] .ps-swatch { opacity: 1; transform: translate(312px, 214px); transition-delay: 0.9s; }
.ps[data-ps-scene="3"] .ps-l-live,
.ps[data-ps-scene="3"] .ps-url-live { opacity: 1; }
.ps[data-ps-scene="3"] .ps-blk { transition-delay: 0s; }
.ps[data-ps-scene="3"] .ps-phone { opacity: 1; transform: none; transition-delay: 0.35s; }
.ps[data-ps-scene="3"] .ps-toast { opacity: 1; transform: none; transition-delay: 0.15s; }
.ps[data-ps-scene="3"] .ps-okt { stroke-dashoffset: 0; transition: stroke-dashoffset 0.45s var(--ease-out, ease) 0.55s; }
.ps-okt { stroke-dashoffset: 1; }
.ps-url-draft { opacity: 1; }
.ps[data-ps-scene="3"] .ps-url-draft { opacity: 0; }
.ps.is-live[data-ps-scene="0"] .ps-caret {
animation: ps-blink 1s steps(2, jump-none) infinite;
}
.ps.is-live[data-ps-scene="1"] .ps-scan {
animation: ps-scan 2.6s var(--ease-io, ease-in-out) 0.6s infinite;
}
.ps.is-live[data-ps-scene="2"] .ps-cursor {
animation: ps-cursor 4.4s var(--ease-io, ease-in-out) 0.6s infinite;
}
.ps.is-live[data-ps-scene="2"] .ps-click {
animation: ps-click 4.4s ease-out 0.6s infinite;
}
.ps.is-live[data-ps-scene="2"] .ps-cta {
animation: ps-press 4.4s ease-out 0.6s infinite;
transform-origin: 50% 50%;
}
.ps.is-live[data-ps-scene="3"] .ps-ping {
animation: ps-ring 2.2s ease-out 0.8s infinite;
transform-origin: 50% 50%;
}
.ps.is-live[data-ps-scene="3"] .ps-live-ring {
animation: ps-ring 1.8s ease-out 1s infinite;
transform-origin: 50% 50%;
}
@keyframes ps-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@keyframes ps-scan {
0% { opacity: 0; transform: translateY(0); }
10% { opacity: 0.55; }
85% { opacity: 0.4; }
100% { opacity: 0; transform: translateY(318px); }
}
@keyframes ps-cursor {
0% { opacity: 0; transform: translate(430px, 330px); }
10% { opacity: 1; }
38% { transform: translate(108px, 204px); }
52% { transform: translate(108px, 204px); }
78% { transform: translate(352px, 216px); }
92% { opacity: 1; transform: translate(352px, 216px); }
100% { opacity: 0; transform: translate(352px, 216px); }
}
@keyframes ps-click {
0%, 40% { opacity: 0; transform: scale(0.2); }
42% { opacity: 0.9; }
54% { opacity: 0; transform: scale(1.6); }
100% { opacity: 0; transform: scale(1.6); }
}
@keyframes ps-press {
0%, 40%, 50%, 100% { transform: none; }
44% { transform: scale(0.95); }
}
@keyframes ps-ring {
0% { opacity: 0.8; transform: scale(1); }
100% { opacity: 0; transform: scale(3); }
}
.pq {
position: relative;
padding-block: clamp(2.25rem, 4.5vw, 3.75rem);
border-top: 1px solid var(--line);
}
.pq__grid {
display: grid;
gap: 1.5rem;
align-items: start;
}
@media (min-width: 1000px) {
.pq__grid {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: clamp(1.75rem, 3.5vw, 3.5rem);
}
}
.pp {
position: relative;
padding: clamp(1.15rem, 2.4vw, 1.65rem);
}
.pp__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.pp .eyebrow,
.pf .eyebrow {
margin: 0 0 0.45rem;
}
.pp__title,
.pf__title {
margin: 0;
font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: var(--ls-head, -0.03em);
color: var(--text);
}
.pp__msg {
margin: 0.35rem 0 0;
font-size: 0.92rem;
color: var(--text-2);
}
.pp__ring {
position: relative;
display: inline-grid;
place-items: center;
flex: none;
width: 4rem;
height: 4rem;
}
.pp__ring svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.pp__ring circle {
fill: none;
stroke-width: 3.5;
}
.pp__ring-bg {
stroke: var(--line-2);
}
.pp__ring-fg {
stroke: var(--brand);
stroke-linecap: round;
stroke-dasharray: 1;
stroke-dashoffset: calc(1 - var(--p, 0));
transition: stroke-dashoffset 0.7s var(--ease-out, ease);
}
.pp__ring b {
font-size: 1rem;
font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.pp__ring small {
font-size: 0.7rem;
font-weight: 500;
color: var(--text-3);
}
.pp.is-full .pp__ring {
animation: pp-pop 0.6s var(--ease-out, ease);
}
.pp__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
gap: 0.5rem;
margin: 1.1rem 0;
padding: 0;
list-style: none;
}
.pp-item {
position: relative;
display: flex;
align-items: center;
gap: 0.65rem;
min-height: 2.9rem;
padding: 0.55rem 0.75rem;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface-2);
cursor: pointer;
transition: border-color 0.25s, background-color 0.25s, transform 0.25s var(--ease-out, ease);
}
.pp-item:hover {
border-color: var(--line-2);
}
.pp-item:active {
transform: scale(0.98);
}
.pp-item__input {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
}
.pp-item__box {
display: inline-grid;
place-items: center;
flex: none;
width: 1.25rem;
height: 1.25rem;
border: 1.5px solid var(--line-2);
border-radius: 6px;
transition: background-color 0.25s, border-color 0.25s;
}
.pp-item__box svg {
width: 0.85rem;
height: 0.85rem;
}
.pp-item__box path {
fill: none;
stroke: var(--brand-ink);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset 0.35s var(--ease-out, ease) 0.05s;
}
.pp-item__text {
flex: 1;
min-width: 0;
font-size: 0.92rem;
font-weight: 500;
line-height: 1.3;
color: var(--text);
}
.pp-item__icon {
flex: none;
color: var(--text-3);
transition: color 0.25s, transform 0.4s var(--ease-out, ease);
}
.pp-item__icon .icon {
width: 1rem;
height: 1rem;
}
.pp-item__input:checked ~ .pp-item__box {
border-color: var(--brand);
background: var(--brand-fill, var(--brand));
animation: pp-pop 0.4s var(--ease-out, ease);
}
.pp-item__input:checked ~ .pp-item__box path {
stroke-dashoffset: 0;
}
.pp-item__input:checked ~ .pp-item__icon {
color: var(--brand-600);
transform: rotate(-8deg) scale(1.1);
}
.pp-item:has(.pp-item__input:checked) {
border-color: color-mix(in srgb, var(--brand) 40%, transparent);
background: var(--brand-soft);
}
.pp-item:has(.pp-item__input:focus-visible) {
outline: 2px solid var(--focus, var(--brand));
outline-offset: 2px;
}
@keyframes pp-pop {
0% { transform: scale(0.8); }
60% { transform: scale(1.12); }
100% { transform: scale(1); }
}
.pp__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.pp__reset {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 38px;
margin-inline-start: auto;
padding: 0 0.6rem;
border: 0;
border-radius: 999px;
background: none;
color: var(--text-3);
font: inherit;
font-size: 0.85rem;
cursor: pointer;
transition: color 0.2s;
}
.pp__reset:hover {
color: var(--text);
}
.pp__reset:hover .icon {
transform: rotate(-180deg);
}
.pp__reset .icon {
width: 0.9rem;
height: 0.9rem;
transition: transform 0.5s var(--ease-out, ease);
}
.pp__reset:focus-visible {
outline: 2px solid var(--focus, var(--brand));
outline-offset: 2px;
}
.pp__note {
margin: 0.8rem 0 0;
font-size: 0.78rem;
color: var(--text-3);
}
.pf__title {
margin-bottom: 0.6rem;
}
.pf-q {
border-bottom: 1px solid var(--line);
}
.pf-q__sum {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.95rem 0;
font-weight: 600;
color: var(--text);
cursor: pointer;
list-style: none;
}
.pf-q__sum::-webkit-details-marker {
display: none;
}
.pf-q__sum:focus-visible {
outline: 2px solid var(--focus, var(--brand));
outline-offset: 2px;
border-radius: 6px;
}
.pf-q__sum i {
position: relative;
flex: none;
width: 1.6rem;
height: 1.6rem;
border: 1px solid var(--line-2);
border-radius: 50%;
transition: border-color 0.25s, background-color 0.25s, transform 0.4s var(--ease-out, ease);
}
.pf-q__sum i::before,
.pf-q__sum i::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0.6rem;
height: 1.5px;
margin: -0.75px 0 0 -0.3rem;
border-radius: 1px;
background: currentColor;
transition: transform 0.35s var(--ease-out, ease);
}
.pf-q__sum i::after {
transform: rotate(90deg);
}
.pf-q__sum:hover i {
border-color: var(--brand);
}
.pf-q[open] .pf-q__sum i {
border-color: var(--brand);
background: var(--brand-soft);
color: var(--brand-600);
transform: rotate(180deg);
}
.pf-q[open] .pf-q__sum i::after {
transform: rotate(0deg);
}
.pf-q__a {
margin: 0 0 1rem;
padding-inline-end: 2.4rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-2);
}
.pf-q[open] .pf-q__a {
animation: ps-duo-in 0.4s var(--ease-out, ease);
}
@media (max-width: 600px) {
.ps-step__btn {
padding-block: 0.8rem;
}
.ps-step__duo {
padding-inline-start: 0.25rem;
}
.ps-stage__note {
font-size: 0.6rem;
}
.pp__reset {
margin-inline-start: 0;
}
.pp__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.4rem;
}
.pp-item {
gap: 0.5rem;
min-height: 2.6rem;
padding: 0.5rem 0.55rem;
}
.pp-item__text {
font-size: 0.82rem;
}
.pp-item__icon {
display: none;
}
}
[dir="rtl"] .ps-step__bar i,
[dir="rtl"] .ps-stage__prog i {
transform-origin: right center;
}
@media (prefers-reduced-motion: reduce) {
.ps *,
.ps *::before,
.ps *::after,
.ps-stage::before,
.pq *,
.pq *::before,
.pq *::after {
animation: none !important;
transition: none !important;
}
}
html[data-motion="off"] .ps *,
html[data-motion="off"] .ps *::before,
html[data-motion="off"] .ps *::after,
html[data-motion="off"] .ps-stage::before,
html[data-motion="off"] .pq *,
html[data-motion="off"] .pq *::before,
html[data-motion="off"] .pq *::after {
animation: none !important;
transition: none !important;
}

/* css/front/projects.css */

.window__url {
position: relative;
}
.window__lock {
transition: color 0.4s var(--ease);
}
.window__load {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1.5px;
background: linear-gradient(90deg, var(--brand-soft-2), var(--brand));
opacity: 0;
transform: scaleX(0);
transform-origin: 0 50%;
pointer-events: none;
}
.window.is-loading .window__load {
animation: win-load 1.15s var(--ease-io) both;
}
.window.is-loading .window__lock {
color: var(--brand-600);
}
@keyframes win-load {
0% { opacity: 1; transform: scaleX(0); }
20% { opacity: 1; transform: scaleX(0.35); }
72% { opacity: 1; transform: scaleX(1); }
100% { opacity: 0; transform: scaleX(1); }
}
.pj-card .window {
background: var(--surface);
border-color: var(--line-2);
box-shadow: var(--shadow-md);
}
.pj-card .window__bar {
border-bottom-color: var(--line);
background: var(--surface-2);
}
.pj-card .window__dots i {
background: var(--line-2);
}
.pj-card .window__url {
color: var(--text-3);
background: var(--bg);
}
.pj-card .window__screen {
background: var(--surface);
}
.pj-card .window__select .h {
background: var(--bg);
}
.pj-card .window__tag {
color: var(--brand-ink);
background: var(--brand-fill);
}
.window__ring {
display: none;
}
.pj-card .window__ring {
position: absolute;
inset: -1px;
z-index: 3;
display: block;
padding: 1.5px;
overflow: hidden;
border-radius: 15px;
pointer-events: none;
opacity: 0;
-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);
transition: opacity 0.45s var(--ease);
}
.pj-card .window__ring i {
position: absolute;
top: 50%;
left: 50%;
width: 150%;
aspect-ratio: 1;
background: conic-gradient(from 0deg, transparent 0 62%, color-mix(in oklab, var(--brand) 35%, transparent) 76%, var(--brand) 88%, var(--brand-600) 93%, transparent 100%);
transform: translate(-50%, -50%) rotate(0deg);
animation: win-ring 3.6s linear infinite paused;
}
@keyframes win-ring {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.pj-card .window.is-loading .window__ring {
animation: win-ring-once 1.8s var(--ease) both;
}
.pj-card .window.is-loading .window__ring i {
animation-play-state: running;
}
@keyframes win-ring-once {
0% { opacity: 0; }
20%, 60% { opacity: 0.9; }
100% { opacity: 0; }
}
.pj-card .window:focus-visible .window__ring {
opacity: 1;
}
.pj-card .window:focus-visible .window__ring i {
animation-play-state: running;
}
@media (hover: hover) and (pointer: fine) {
.pj-card .window:hover {
box-shadow: var(--shadow);
}
.pj-card .window:hover .window__ring {
opacity: 1;
animation: none;
}
.pj-card .window:hover .window__ring i {
animation-play-state: running;
}
.pj-card .window:hover .window__load {
animation: win-load 1.15s var(--ease-io) both;
}
.pj-card .window:hover .window__lock {
color: var(--brand-600);
}
.pj-card .window:hover .window__dots i:nth-child(1) { background: var(--accent-rose); }
.pj-card .window:hover .window__dots i:nth-child(2) { background: var(--accent-amber); }
.pj-card .window:hover .window__dots i:nth-child(3) { background: var(--accent-teal); }
.pj-card:has(.window:hover) .pj-card__title {
color: var(--brand-600);
}
}
.window__tour {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.35rem 0.7rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
color: var(--brand-ink);
background: var(--brand-fill);
opacity: 0;
transform: translateY(6px);
transition: opacity 0.25s var(--ease), transform 0.3s var(--ease);
pointer-events: none;
}
.window__tour .icon {
width: 0.9rem;
height: 0.9rem;
}
.window:focus-visible .window__tour {
opacity: 1;
transform: none;
}
@media (hover: hover) and (pointer: fine) {
.window:hover .window__tour {
opacity: 1;
transform: none;
}
}
@media (hover: none) {
.window--link .window__tour {
opacity: 1;
transform: none;
}
}
.pj {
padding-top: clamp(0.5rem, 2vw, 1.5rem);
padding-bottom: var(--section-py);
}
.pj [hidden] {
display: none !important;
}
.pj-tools {
display: grid;
gap: 1.1rem;
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.pj-tools__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1rem;
padding: 0.75rem;
}
.pj-search {
flex: 1 1 20rem;
min-width: 0;
}
.pj-search__label,
.pj-select label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.pj-search__box,
.pj-select__box {
position: relative;
display: flex;
align-items: center;
gap: 0.6rem;
min-height: 46px;
padding: 0 0.9rem;
border: 1px solid var(--line-2);
border-radius: 999px;
background: var(--bg);
color: var(--text-2);
transition: border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
:root[data-theme="light"] .pj-search__box,
:root[data-theme="light"] .pj-select__box {
background: var(--surface-2);
}
.pj-search__box:focus-within,
.pj-select__box:focus-within {
border-color: var(--brand);
color: var(--text);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
}
.pj-search__box .icon,
.pj-select__box .icon {
flex: none;
width: 1.05rem;
height: 1.05rem;
}
.pj-search__box input {
flex: 1;
min-width: 0;
padding: 0.4rem 0;
border: 0;
font: inherit;
font-size: 1rem;
font-weight: 500;
color: var(--text);
background: transparent;
outline: none;
}
.pj-search__box input::placeholder {
color: var(--text-3);
}
.pj-select__box select {
min-width: 9.5rem;
padding: 0.4rem 1.5rem 0.4rem 0;
border: 0;
font: inherit;
font-size: 0.92rem;
font-weight: 600;
color: var(--text);
background: transparent;
appearance: none;
outline: none;
cursor: pointer;
}
.pj-select__box select option {
color: var(--text);
background: var(--surface-2);
}
.pj-select__box .icon {
position: absolute;
right: 0.9rem;
width: 0.9rem;
height: 0.9rem;
pointer-events: none;
}
.pj-view {
display: inline-flex;
gap: 0.25rem;
padding: 0.2rem;
border: 1px solid var(--line);
border-radius: 999px;
}
.pj-view__btn {
position: relative;
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
padding: 0;
border: 0;
border-radius: 50%;
color: var(--text-2);
background: transparent;
cursor: pointer;
transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.pj-view__btn:hover {
color: var(--text);
background: var(--surface-2);
}
.pj-view__btn[aria-pressed="true"] {
color: var(--brand-ink);
background: var(--brand-fill);
}
.pj-view__btn .icon {
width: 1.05rem;
height: 1.05rem;
}
.pj-view__btn:focus-visible,
.pj-chip:focus-visible,
.pj-card__ask:focus-visible,
.pb__step:focus-visible,
.pb__btn:focus-visible,
.pb__tour:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 3px;
}
.pj-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.pj-chip {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 36px;
padding: 0 0.9rem;
border: 1px solid var(--line-2);
border-radius: 999px;
font: inherit;
font-size: 0.86rem;
font-weight: 600;
color: var(--text-2);
background: transparent;
cursor: pointer;
transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.pj-chip span {
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 500;
color: var(--text-3);
}
.pj-chip:hover {
color: var(--text);
border-color: var(--text-3);
}
.pj-chip[aria-pressed="true"] {
color: var(--brand-600);
border-color: color-mix(in srgb, var(--brand) 55%, transparent);
background: var(--brand-soft);
}
.pj-chip[aria-pressed="true"] span {
color: var(--brand-600);
}
.pj-status {
margin: 0;
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.04em;
color: var(--text-3);
}
.pj-status b {
font-weight: 600;
color: var(--brand-600);
}
.pj-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.25rem, 2.5vw, 1.75rem);
margin: 0;
padding: 0;
list-style: none;
}
.pj-card {
display: grid;
grid-template-rows: auto 1fr;
align-content: start;
gap: 1.15rem;
min-width: 0;
padding: 0.85rem 0.85rem 1.35rem;
scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.reveal-ready .pj-card:not(.is-seen):not(.is-in) {
opacity: 0;
transform: translate3d(0, 28px, 0);
}
.pj-card.is-in {
animation: pj-rise 0.6s var(--ease) both;
}
@keyframes pj-rise {
from { opacity: 0; transform: translate3d(0, 18px, 0); }
to { opacity: 1; transform: none; }
}
.pj-card__stage {
--rx: 0deg;
--ry: 0deg;
perspective: 1100px;
}
.pj-card__stage .window {
transform: rotateX(var(--rx)) rotateY(var(--ry));
}
.pj-card__stage.is-tilting .window {
transition: transform 0.12s linear, box-shadow 0.5s var(--ease);
}
.pj-card .window {
border-radius: 12px;
box-shadow: var(--shadow-sm);
}
.pj-card .window__bar {
border-radius: 11px 11px 0 0;
}
.pj-card__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
padding: 0 0.5rem;
}
.pj-card__cat {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin: 0;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-600);
}
.pj-card__cat::before {
content: "";
width: 18px;
height: 1px;
background: currentColor;
transform-origin: 0 50%;
transition: transform 0.5s var(--ease);
}
.pj-card:hover .pj-card__cat::before {
transform: scaleX(1.5);
}
.pj-card__title {
margin: 0;
font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: var(--ls-head);
transition: color 0.3s var(--ease);
}
.pj-card__summary {
max-width: 40ch;
margin: 0;
font-size: 0.92rem;
line-height: 1.5;
color: var(--text-2);
text-wrap: pretty;
}
.pj-card .tags {
display: flex;
flex-wrap: wrap;
gap: 0.1rem 0;
margin: 0.1rem 0 0;
padding: 0;
list-style: none;
font-family: var(--mono);
font-size: 0.7rem;
color: var(--text-3);
}
.pj-card .tags li {
padding: 0;
border: 0;
border-radius: 0;
background: none;
color: inherit;
font: inherit;
}
.pj-card .tags li + li::before {
content: "·";
margin: 0 0.5rem;
color: var(--brand-600);
}
.pj-card__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 1.2rem;
width: 100%;
margin-top: auto;
padding-top: 0.9rem;
border-top: 1px solid var(--line);
}
.pj-card__ask {
position: relative;
text-decoration: none;
padding: 0.35rem 0;
font-size: 0.88rem;
font-weight: 600;
color: var(--text-2);
transition: color 0.25s var(--ease);
}
.pj-card__ask::after {
content: "";
position: absolute;
right: 0;
bottom: 0.1rem;
left: 0;
height: 1px;
background: currentColor;
transform: scaleX(0.35);
transform-origin: 0 50%;
transition: transform 0.4s var(--ease);
}
.pj-card__ask:hover {
color: var(--text);
}
.pj-card__ask:hover::after {
transform: none;
}
.pj-grid[data-view="list"] {
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
.pj-grid[data-view="list"] .pj-card {
grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
grid-template-rows: auto;
align-items: center;
gap: 1.25rem clamp(1.25rem, 3vw, 2.5rem);
padding: 0.85rem 1.25rem 0.85rem 0.85rem;
}
.pj-grid[data-view="list"] .pj-card__meta {
padding: 0.5rem 0;
}
.pj-empty {
display: grid;
justify-items: start;
gap: 1rem;
padding: clamp(2rem, 5vw, 4rem) 0;
border-top: 1px solid var(--line);
font-size: var(--fs-lead);
color: var(--text-2);
}
.pj-empty p {
margin: 0;
}
.pj-empty b {
color: var(--text);
}
.pj-how {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0 clamp(1.25rem, 3vw, 2.5rem);
margin: clamp(3.5rem, 7vw, 6rem) 0 0;
padding: 0;
list-style: none;
}
.pj-how li {
position: relative;
display: grid;
align-content: start;
gap: 0.4rem;
padding-top: 1.4rem;
}
.pj-how li::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
background: linear-gradient(90deg, var(--brand), var(--line-2) 60%);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 1.1s var(--ease);
transition-delay: calc(var(--i, 0) * 120ms);
}
.pj-how.is-in li::before,
.pj-how:not([data-reveal]) li::before {
transform: none;
}
.pj-how li:nth-child(2) { --i: 1; }
.pj-how li:nth-child(3) { --i: 2; }
.pj-how li:nth-child(4) { --i: 3; }
.pj-how__n {
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--brand-600);
}
.pj-how b {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: var(--ls-head);
}
.pj-how li > span:last-child {
max-width: 26ch;
font-size: 0.92rem;
color: var(--text-2);
}
.pj-band {
padding-block: clamp(1rem, 2vw, 1.5rem);
border-block: 1px solid var(--line);
background: var(--bg-2);
overflow: hidden;
-webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pj-band__marquee {
overflow: hidden;
}
.pj-band__track {
display: flex;
width: max-content;
will-change: transform;
}
.pj-band__row {
display: flex;
flex: none;
margin: 0;
padding: 0;
list-style: none;
}
.pj-band__row li {
display: inline-flex;
align-items: center;
padding-right: clamp(1.25rem, 2.5vw, 2rem);
font-family: var(--mono);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
color: var(--text-2);
}
.pj-band__row li::after {
content: "";
width: 5px;
height: 5px;
margin-left: clamp(1.25rem, 2.5vw, 2rem);
border-radius: 50%;
background: var(--brand);
opacity: 0.8;
}
.pj-band.is-on .pj-band__track {
animation: pj-marquee 70s linear infinite;
}
@keyframes pj-marquee {
to { transform: translate3d(-50%, 0, 0); }
}
.pb__head {
display: grid;
justify-items: start;
gap: 1rem;
margin-bottom: clamp(2.25rem, 5vw, 4rem);
}
.pb__title {
max-width: 18ch;
margin: 0;
font-size: var(--fs-h2);
font-weight: 650;
line-height: var(--lh-head);
letter-spacing: var(--ls-head);
text-wrap: balance;
}
.pb__intro {
max-width: 38rem;
margin: 0;
font-size: var(--fs-lead);
color: var(--text-2);
text-wrap: pretty;
}
.pb__panel {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
.pb__steps {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.pb__item {
position: relative;
}
.pb__step {
position: relative;
display: flex;
align-items: baseline;
gap: 1.1rem;
width: 100%;
padding: 1.05rem 0 1.05rem 1.5rem;
border: 0;
font: inherit;
text-align: left;
color: var(--text-3);
background: transparent;
cursor: pointer;
transition: color 0.3s var(--ease);
}
.pb__step:hover {
color: var(--text-2);
}
.pb__step.is-done {
color: var(--text-2);
}
.pb__step[aria-current="step"] {
color: var(--text);
}
.pb__num {
flex: none;
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--text-3);
transition: color 0.3s var(--ease);
}
.pb__step[aria-current="step"] .pb__num {
color: var(--brand-600);
}
.pb__body {
display: block;
}
.pb__name {
display: block;
font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
font-weight: 650;
line-height: 1.15;
letter-spacing: var(--ls-head);
}
.pb__text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.pb__bar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 2px;
overflow: hidden;
background: var(--line);
}
.pb__bar i {
display: block;
width: 100%;
height: 100%;
background: var(--brand);
transform: scaleY(0);
transform-origin: 50% 0;
transition: transform 0.6s var(--ease);
}
.pb__step.is-done .pb__bar i,
.pb:not(.is-auto) .pb__step[aria-current="step"] .pb__bar i {
transform: none;
}
.pb.is-auto .pb__step[aria-current="step"] .pb__bar i {
transition: none;
animation: pb-prog var(--pb-dur, 4.6s) linear forwards;
}
.pb.is-hold .pb__step[aria-current="step"] .pb__bar i {
animation-play-state: paused;
}
@keyframes pb-prog {
to { transform: scaleY(1); }
}
.pb__main {
display: grid;
align-content: start;
gap: 1.1rem;
min-width: 0;
}
.pb__labels {
display: flex;
align-items: center;
gap: 0.75rem;
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
.pb__label {
color: var(--brand-600);
}
.pb__project {
color: var(--text-2);
}
.pb__stage {
position: relative;
container: pbs / inline-size;
aspect-ratio: 16 / 11;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
background:
linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 36px,
linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 36px 100%,
var(--bg);
}
.pb-desk {
position: absolute;
top: 9%;
left: 4%;
width: 66%;
overflow: hidden;
border: 1px solid var(--line-2);
border-radius: 10px;
background: var(--surface);
box-shadow: var(--shadow-md);
}
.pb-desk__bar {
display: flex;
align-items: center;
gap: 0.6rem;
height: 26px;
padding: 0 0.6rem;
border-bottom: 1px solid var(--line);
background: var(--surface-2);
}
.pb-desk__dots {
display: flex;
gap: 4px;
}
.pb-desk__dots i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--line-2);
}
.pb-desk__url {
flex: 1;
min-width: 0;
height: 16px;
padding: 0 0.5rem;
overflow: hidden;
border-radius: 4px;
font-family: var(--mono);
font-size: 0.6rem;
line-height: 16px;
color: var(--text-3);
white-space: nowrap;
background: var(--bg);
}
.pb-desk__screen {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
container-type: inline-size;
background: var(--surface);
}
.pb-desk__screen > span {
position: absolute;
inset: 0;
display: block;
}
.pb-blank {
display: grid !important;
place-items: center;
margin: 10px;
inset: 0;
border: 1px dashed var(--line-2);
border-radius: 6px;
transition: opacity 0.5s var(--ease);
}
.pb-blank__text {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
}
.pb-wire {
opacity: 0;
filter: grayscale(1);
transition: opacity 0.6s var(--ease);
}
.pb-wire .mock,
.pb-design .mock {
height: 100%;
}
.pb-design {
clip-path: inset(0 0 100% 0);
transition: clip-path 1.5s var(--ease);
}
.pb-scan {
height: 2px !important;
inset: 0 0 auto 0 !important;
background: var(--brand);
opacity: 0;
}
.pb-phone {
position: absolute;
right: 6%;
bottom: 9%;
width: 17%;
aspect-ratio: 9 / 17;
border: 3px solid var(--text);
border-radius: 14px;
background: var(--surface);
box-shadow: var(--shadow-md);
opacity: 0;
transform: translate3d(24px, 0, 0);
transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
}
.pb-phone__screen {
display: block;
height: 100%;
overflow: hidden;
border-radius: 10px;
container-type: inline-size;
}
.pb-ok {
position: absolute;
left: 8px;
bottom: 8px;
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.18rem 0.5rem 0.18rem 0.35rem;
border-radius: 999px;
font-size: 0.66rem;
font-weight: 700;
color: var(--bg);
background: var(--ok);
opacity: 0;
transform: translate3d(0, 6px, 0);
transition: opacity 0.4s var(--ease) 0.4s, transform 0.5s var(--ease) 0.4s;
}
.pb-ok svg {
width: 0.7rem;
height: 0.7rem;
}
.pb-phone .pb-ok {
left: 50%;
bottom: -0.9rem;
transform: translate3d(-50%, 6px, 0);
}
.pb-notes,
.pb-build {
position: absolute;
top: 9%;
right: 4%;
display: grid;
gap: 0.45rem;
width: 25%;
padding: 0.8rem 0.9rem;
border: 1px solid var(--line-2);
border-radius: 10px;
font-size: 0.7rem;
line-height: 1.35;
color: var(--text-2);
background: var(--surface);
opacity: 0;
transform: translate3d(0, 10px, 0);
transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.pb-notes__head,
.pb-build__head {
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-600);
}
.pb-notes__row b {
display: block;
font-weight: 700;
color: var(--text);
}
.pb-build__row {
display: flex;
align-items: center;
gap: 0.45rem;
}
.pb-build__row i {
position: relative;
flex: none;
width: 12px;
height: 12px;
border: 1.5px solid var(--line-2);
border-radius: 50%;
}
.pb-build__row i::after {
content: "";
position: absolute;
inset: -1.5px;
border-radius: 50%;
background: var(--ok);
transform: scale(0);
transition: transform 0.4s var(--ease);
}
.pb-live {
position: absolute;
top: 9%;
right: 4%;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.8rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
color: var(--bg);
background: var(--ok);
opacity: 0;
transform: translate3d(0, 10px, 0);
transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.pb-live i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--bg);
}
.pb__stage[data-step="0"] .pb-notes,
.pb__stage[data-step="3"] .pb-build,
.pb__stage[data-step="5"] .pb-live {
opacity: 1;
transform: none;
}
.pb__stage:not([data-step="0"]) .pb-blank {
opacity: 0;
}
.pb__stage[data-step="1"] .pb-wire {
opacity: 0.8;
}
.pb__stage[data-step="2"] .pb-design,
.pb__stage[data-step="3"] .pb-design,
.pb__stage[data-step="4"] .pb-design,
.pb__stage[data-step="5"] .pb-design {
clip-path: inset(0);
}
.pb__stage[data-step="4"] .pb-phone,
.pb__stage[data-step="5"] .pb-phone {
opacity: 1;
transform: none;
}
.pb__stage[data-step="4"] .pb-ok,
.pb__stage[data-step="5"] .pb-ok {
opacity: 1;
transform: none;
}
.pb__stage[data-step="4"] .pb-phone .pb-ok,
.pb__stage[data-step="5"] .pb-phone .pb-ok {
transform: translate3d(-50%, 0, 0);
}
.pb__stage[data-step="3"] .pb-build__row i::after {
transform: scale(1);
}
.pb__stage[data-step="3"] .pb-build__row:nth-of-type(1) i::after { transition-delay: 0.5s; }
.pb__stage[data-step="3"] .pb-build__row:nth-of-type(2) i::after { transition-delay: 1.2s; }
.pb__stage[data-step="3"] .pb-build__row:nth-of-type(3) i::after { transition-delay: 1.9s; }
.pb__stage[data-step="3"] .pb-build__row:nth-of-type(4) i::after { transition-delay: 2.6s; }
.pb__stage[data-step="3"] .pb-build__row:nth-of-type(5) i::after { transition-delay: 3.3s; }
.pb__stage[data-step="1"] .pb-scan,
.pb__stage[data-step="4"] .pb-scan {
animation: pb-scan 2.4s var(--ease-io) both;
}
@keyframes pb-scan {
0% { opacity: 1; transform: translate3d(0, 0, 0); }
90% { opacity: 1; }
100% { opacity: 0; transform: translate3d(0, 20cqw, 0); }
}
.pb__stage[data-step="5"] .pb-live i {
animation: pb-pulse 1.6s var(--ease-io) infinite;
}
@keyframes pb-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.55); opacity: 0.6; }
}
@container pbs (max-width: 540px) {
.pb-desk {
top: 5%;
left: 4%;
width: 92%;
}
.pb-notes,
.pb-build {
top: auto;
right: 4%;
bottom: 5%;
left: 4%;
width: auto;
font-size: 0.68rem;
}
.pb-notes__row b {
display: inline;
margin-right: 0.35rem;
}
.pb-phone {
right: 6%;
bottom: 5%;
width: 22%;
}
.pb-live {
top: auto;
right: 6%;
bottom: 5%;
}
}
.pb__desc {
display: grid;
gap: 0.35rem;
margin: 0;
padding-top: 1rem;
border-top: 1px solid var(--line);
min-height: 6.5rem;
align-content: start;
}
.pb__desc b {
font-size: 1.15rem;
font-weight: 650;
letter-spacing: var(--ls-head);
}
.pb__desc span {
max-width: 44ch;
color: var(--text-2);
}
.pb__controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.pb__btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-width: 42px;
height: 42px;
padding: 0 0.8rem;
border: 1px solid var(--line-2);
border-radius: 999px;
font: inherit;
font-size: 0.88rem;
font-weight: 600;
color: var(--text);
background: transparent;
cursor: pointer;
transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.pb__btn:hover:not(:disabled) {
border-color: var(--brand);
}
.pb__btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.pb__btn--play[aria-pressed="true"] {
border-color: var(--brand);
background: var(--brand-soft);
}
.pb__btn .icon {
width: 1rem;
height: 1rem;
}
.pb__play-icon {
display: inline-grid;
}
.pb__play-icon > * {
grid-area: 1 / 1;
}
.pb__btn--play .pb__i-pause,
.pb__btn--play[aria-pressed="true"] .pb__i-play {
display: none;
}
.pb__btn--play[aria-pressed="true"] .pb__i-pause {
display: block;
}
.pb__count {
margin: 0 0.5rem;
font-family: var(--mono);
font-size: 0.8rem;
color: var(--text-3);
}
.pb__count b {
font-weight: 600;
color: var(--text);
}
.pb__btn--text {
margin-left: auto;
border-color: transparent;
color: var(--text-2);
}
.pb__tour {
position: relative;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
justify-self: start;
padding: 0.35rem 0;
font-weight: 650;
color: var(--brand-600);
}
.pb__tour .icon {
width: 1rem;
height: 1rem;
transition: transform 0.35s var(--ease);
}
.pb__tour:hover .icon {
transform: translate(3px, -3px);
}
@media (max-width: 1100px) {
.pj-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pb__panel {
grid-template-columns: minmax(0, 1fr);
}
.pb__steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 1rem;
}
.pb__step {
display: grid;
gap: 0.2rem;
padding: 1rem 0 1rem 0;
}
.pb__bar {
top: 0;
right: 0;
bottom: auto;
left: 0;
width: auto;
height: 2px;
}
.pb__bar i {
transform: scaleX(0);
transform-origin: 0 50%;
}
.pb__step.is-done .pb__bar i,
.pb:not(.is-auto) .pb__step[aria-current="step"] .pb__bar i {
transform: none;
}
.pb.is-auto .pb__step[aria-current="step"] .pb__bar i {
animation-name: pb-prog-x;
}
@keyframes pb-prog-x {
to { transform: scaleX(1); }
}
}
@media (max-width: 600px) {
.pb__stage {
aspect-ratio: 1 / 1.05;
}
}
@media (max-width: 760px) {
.pj-grid {
grid-template-columns: minmax(0, 1fr);
}
.pj-grid[data-view="list"] .pj-card {
grid-template-columns: minmax(0, 1fr);
}
.pj-how {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem 1.25rem;
}
.pb__steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pj-tools__row {
gap: 1rem 1.25rem;
}
.pj-select {
flex: 1 1 10rem;
}
.pj-select__box select {
width: 100%;
}
}
html[data-motion="off"] .window__load,
html[data-motion="off"] .pj-card .window__ring {
display: none;
}
html[data-motion="off"] .pj-card,
html[data-motion="off"] .pj-card *,
html[data-motion="off"] .pb *,
html[data-motion="off"] .pj-how li::before {
animation: none !important;
transition: none !important;
}
html[data-motion="off"] .pj-how li::before {
transform: none;
}
html[data-motion="off"] .pj-band__track,
html[data-motion="calm"] .pj-band__track {
animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
.window__load,
.pj-card .window__ring {
display: none;
}
.pj-card,
.pb *,
.pj-band__track {
animation: none !important;
transition: none !important;
}
.pj-how li::before {
transform: none;
transition: none;
}
.reveal-ready .pj-card:not(.is-seen):not(.is-in) {
opacity: 1;
transform: none;
}
}
.pj-empty[hidden],
.pj-grid[hidden] {
display: none;
}
.pjx-hint {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-top: 1.5rem;
padding: 0.55rem 0.95rem;
border: 1px solid var(--line-2);
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 70%, transparent);
color: var(--text-2);
font: 500 0.88rem/1.3 var(--font);
text-decoration: none;
transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.pjx-hint .icon { flex: none; width: 16px; height: 16px; color: var(--brand-600); }
.pjx-hint:hover,
.pjx-hint:focus-visible { border-color: color-mix(in srgb, var(--brand) 45%, var(--line-2)); color: var(--text); }
.pjx-hint:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pjx-hint__go { transition: transform 0.3s var(--ease); }
.pjx-hint:hover .pjx-hint__go { transform: translateY(2px); }
.pjx__halo { fill: color-mix(in srgb, var(--brand) 5%, transparent); stroke: var(--line); stroke-width: 1; }
.pjx__spin {
transform-box: view-box;
transform-origin: 280px 220px;
animation: sig-spin 48s linear infinite;
}
.pjx__orbit { fill: none; stroke: color-mix(in srgb, var(--brand) 40%, transparent); stroke-width: 1.2; stroke-dasharray: 2 10; }
.pjx__ring { fill: none; stroke: var(--line-2); stroke-width: 1; }
.pjx__chords { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; }
.pjx__link { transition: opacity 0.3s var(--ease); }
.pjx__spoke {
fill: none;
stroke: color-mix(in srgb, var(--text-3) 60%, transparent);
stroke-width: 1;
stroke-dasharray: 3 5;
transition: stroke 0.3s var(--ease);
}
.pjx__beam {
fill: none;
stroke: var(--brand);
stroke-width: 1.4;
stroke-linecap: round;
stroke-dasharray: 100;
stroke-dashoffset: 100;
opacity: 0;
transition: stroke-dashoffset 0.6s var(--ease-out), opacity 0.3s var(--ease);
}
.pjx__spark {
fill: none;
stroke: var(--brand);
stroke-width: 4.5;
stroke-linecap: round;
stroke-dasharray: 0 200;
stroke-dashoffset: 0;
opacity: 0;
}
.pjx__spark--1 { animation-delay: 0.2s !important; }
.pjx__spark--2 { animation-delay: 0.4s !important; }
.pjx__spark--3 { animation-delay: 0.6s !important; }
.pjx__spark--4 { animation-delay: 0.8s !important; }
.pjx__spark--5 { animation-delay: 1s !important; }
.pjx__spark--6 { animation-delay: 1.2s !important; }
.pjx__spark--7 { animation-delay: 1.4s !important; }
@keyframes pjx-spark {
0% { stroke-dashoffset: 0; opacity: 0; }
4% { opacity: 1; }
32% { stroke-dashoffset: -100; opacity: 1; }
33%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
.sig-stage[data-hot] .pjx__link:not(.is-hot) { opacity: 0.35; }
.pjx__link.is-on .pjx__spoke { stroke: color-mix(in srgb, var(--brand) 50%, transparent); stroke-dasharray: none; }
.pjx__link.is-hot .pjx__spoke { stroke: color-mix(in srgb, var(--brand) 55%, transparent); }
.pjx__link.is-hot .pjx__beam { opacity: 0.55; stroke-dashoffset: 0; }
.pjx__link.is-hot .pjx__spark {
animation: pjx-spark 2.6s linear infinite;
filter: drop-shadow(0 0 4px var(--brand));
}
.sig-stage[data-hot="*"] .pjx__spark:not(.pjx__spark--0) { animation: none; opacity: 0; }
.sig-stage[data-hot="*"] .pjx__beam { opacity: 0.3; }
.pjx-core__ring {
position: absolute;
inset: -9px;
border: 1px dashed color-mix(in srgb, var(--brand) 45%, transparent);
border-radius: 50%;
animation: sig-spin 30s linear infinite reverse;
pointer-events: none;
}
.sig-stage[data-hot] .pjx-core { box-shadow: 0 0 0 6px color-mix(in srgb, var(--bg-2) 70%, transparent), 0 0 56px -4px var(--brand-glow); }
.pjx-read {
position: absolute;
left: 50%;
top: calc(50% + 15.5%);
z-index: 3;
display: grid;
width: 60%;
justify-items: center;
transform: translateX(-50%);
pointer-events: none;
}
.pjx-read__item {
grid-area: 1 / 1;
display: inline-flex;
align-items: center;
gap: 0.45rem;
max-width: 100%;
padding: 0.32rem 0.75rem;
border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line-2));
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 92%, transparent);
color: var(--text);
font: 600 0.74rem/1.2 var(--font);
text-align: center;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.3s var(--ease), transform 0.4s var(--ease-out);
}
.pjx-read__item i {
flex: none;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand);
box-shadow: 0 0 8px var(--brand);
}
.pjx-read__item.is-hot { opacity: 1; transform: none; }
@media (max-width: 559.98px) {
.pjx-read { top: calc(50% + 14.5%); width: 72%; }
.pjx-read__item { font-size: 0.68rem; padding: 0.25rem 0.6rem; }
}
html[data-motion="calm"] .pjx__spin,
html[data-motion="calm"] .pjx-core__ring { animation: none; }
@media (prefers-reduced-motion: reduce) {
.pjx__spark { display: none; }
.pjx__link.is-hot .pjx__beam { opacity: 1; }
.pjx-hint, .pjx-hint__go { transition: none; }
}
html[data-motion="off"] .pjx__spark { display: none; }
html[data-motion="off"] .pjx__link.is-hot .pjx__beam { opacity: 1; }

/* css/front/references.css */

.rc {
--rc-scroll: 120;          
--rc-dur: 6s;              
--rc-radius: 20px;
position: relative;
display: flex;
flex-direction: column;
gap: 1.15rem;
min-width: 0;
height: 100%;
padding: clamp(0.9rem, 1.6vw, 1.25rem);
border: 1px solid var(--line);
border-radius: var(--rc-radius);
background: var(--surface);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
color: var(--text);
isolation: isolate;
transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.4s var(--ease);
}
.rc::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 70%, transparent), transparent 42%, transparent 68%, color-mix(in srgb, var(--accent, var(--accent-amber, #ffb347)) 45%, transparent));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.35;
pointer-events: none;
transition: opacity 0.5s var(--ease);
z-index: 0;
}
.rc::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(70% 40% at 12% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%);
opacity: 0;
pointer-events: none;
transition: opacity 0.6s var(--ease);
z-index: 0;
}
.rc > * {
position: relative;
z-index: 1;
}
.rc__stage {
position: relative;
min-width: 0;
}
.rc--lg .rc__stage {
padding: 0 11% 7% 0;
}
.rc__browser {
position: relative;
display: block;
overflow: hidden;
border: 1px solid var(--line-2);
border-radius: 14px;
background: var(--surface-2);
color: inherit;
text-decoration: none;
box-shadow: 0 1px 0 rgb(255 255 255 / 0.04), 0 24px 40px -30px rgb(0 0 0 / 0.8);
transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.rc__browser:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 3px;
}
.rc__bar {
display: flex;
align-items: center;
gap: 0.6rem;
height: 34px;
padding: 0 0.7rem;
border-bottom: 1px solid var(--line);
background: var(--surface-2);
}
.rc__dots {
display: flex;
gap: 5px;
flex: none;
}
.rc__dots i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--line-2);
transition: background-color 0.35s var(--ease);
}
.rc__url {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex: 1;
min-width: 0;
max-width: 62%;
height: 21px;
margin: 0 auto;
padding: 0 0.6rem;
overflow: hidden;
border-radius: 6px;
background: var(--line);
font-family: var(--mono);
font-size: 0.66rem;
letter-spacing: 0.01em;
color: var(--text-2);
white-space: nowrap;
text-overflow: ellipsis;
}
.rc__lock {
width: 10px;
height: 10px;
flex: none;
color: var(--text-3);
}
.rc__live {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex: none;
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brand-600);
}
.rc__live i {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent);
animation: rc-ping 2.6s var(--ease) infinite;
}
@keyframes rc-ping {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); }
50% { box-shadow: 0 0 0 5px transparent; }
}
.rc__screen {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 1600 / 911;
background: var(--surface-3);
container-type: inline-size;
}
.rc__desktop,
.rc__blank {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.rc__blank {
display: grid;
align-content: start;
gap: 7%;
padding: 8% 10%;
}
.rc__blank i {
display: block;
height: 4%;
border-radius: 99px;
background: var(--line-2);
}
.rc__blank i:first-child { width: 38%; background: var(--brand); }
.rc__blank i:nth-child(2) { width: 100%; height: 9%; }
.rc__blank i:nth-child(3) { width: 72%; }
.rc__full {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
opacity: 0;
transform: translateY(0);
transition: opacity 0.4s var(--ease), transform 0.9s var(--ease);
will-change: transform;
pointer-events: none;
}
.rc.is-playing .rc__full,
.rc__browser:focus-visible .rc__full {
opacity: 1;
transform: translateY(calc(var(--rc-scroll) * -1cqw));
transition: opacity 0.45s var(--ease), transform var(--rc-dur) cubic-bezier(0.35, 0, 0.25, 1) 0.3s;
}
.rc__phone {
position: absolute;
right: 0;
bottom: 0;
width: 24%;
aspect-ratio: 9 / 19.2;
padding: 3.2%;
border: 1px solid rgb(255 255 255 / 0.16);
border-radius: 14% / 6.6%;
background: #0b0c10;
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05), 0 30px 50px -28px rgb(0 0 0 / 0.9);
transition: transform 0.7s var(--ease);
}
.rc__phone-screen {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 11% / 5.2%;
background: #15171d;
}
.rc__phone-screen img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.rc__phone-island {
position: absolute;
top: 5.5%;
left: 50%;
width: 30%;
height: 2.6%;
border-radius: 99px;
background: #0b0c10;
transform: translateX(-50%);
}
.rc__body {
display: flex;
flex-direction: column;
flex: 1;
gap: 0.6rem;
min-width: 0;
}
.rc__top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
}
.rc__domain {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.4rem;
height: 28px;
padding: 0 0.7rem 0 0.6rem;
border: 1px solid var(--line-2);
border-radius: 999px;
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.01em;
color: var(--text);
background: color-mix(in srgb, var(--surface-2) 70%, transparent);
text-decoration: none;
white-space: nowrap;
transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.rc__domain .icon {
width: 0.85rem;
height: 0.85rem;
color: var(--brand-600);
}
.rc__domain .rc__ext {
width: 0.72rem;
height: 0.72rem;
color: var(--text-3);
transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.rc__domain:hover {
border-color: var(--brand);
}
.rc__domain:hover .rc__ext {
color: var(--brand-600);
transform: translate(1px, -1px);
}
.rc__domain:focus-visible,
.rc__more:focus-visible,
.rc__visit:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 3px;
}
.rc__meta {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.02em;
color: var(--text-3);
white-space: nowrap;
}
.rc__meta i {
font-style: normal;
color: var(--brand);
}
.rc__title {
font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem);
font-weight: 650;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--text);
}
.rc--md .rc__title {
font-size: 1.15rem;
}
.rc__summary {
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-2);
text-wrap: pretty;
}
.rc__tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.1rem;
}
.rc__tags li {
padding: 0.22rem 0.55rem;
border: 1px solid var(--line);
border-radius: 6px;
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.02em;
color: var(--text-2);
background: var(--surface-2);
}
.rc__actions {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: auto;
padding-top: 0.5rem;
}
.rc__actions .btn {
height: 42px;
padding: 0 1.1rem;
font-size: 0.9rem;
font-weight: 650;
}
.rc__more {
cursor: pointer;
color: var(--text);
background: transparent;
border-color: var(--line-2);
}
.rc__more:hover {
border-color: var(--text);
background: transparent;
}
@media (hover: hover) and (pointer: fine) {
.rc:hover {
transform: translateY(-4px);
border-color: transparent;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 40px 70px -40px var(--brand-glow, rgb(255 90 31 / 0.35));
}
.rc:hover::before,
.rc:hover::after {
opacity: 1;
}
.rc:hover .rc__dots i:nth-child(1) { background: #ff5f57; }
.rc:hover .rc__dots i:nth-child(2) { background: #febc2e; }
.rc:hover .rc__dots i:nth-child(3) { background: #28c840; }
.rc:hover .rc__full {
opacity: 1;
transform: translateY(calc(var(--rc-scroll) * -1cqw));
transition: opacity 0.45s var(--ease), transform var(--rc-dur) cubic-bezier(0.35, 0, 0.25, 1) 0.3s;
}
.rc:hover .rc__phone {
transform: translateY(-6px);
}
}
.rc:focus-within::before {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.rc,
.rc__full,
.rc__phone,
.rc__browser {
transition: none !important;
}
.rc__live i {
animation: none;
}
.rc:hover .rc__full,
.rc.is-playing .rc__full,
.rc__browser:focus-visible .rc__full {
opacity: 0;
transform: none;
}
.rc:hover {
transform: none;
}
}
html[data-motion="off"] .rc,
html[data-motion="off"] .rc__full,
html[data-motion="off"] .rc__phone,
html[data-motion="off"] .rc__browser {
transition: none !important;
}
html[data-motion="off"] .rc__live i,
html[data-motion="calm"] .rc__live i {
animation: none;
}
html[data-motion="off"] .rc:hover .rc__full,
html[data-motion="off"] .rc.is-playing .rc__full,
html[data-motion="off"] .rc__browser:focus-visible .rc__full {
opacity: 0;
transform: none;
}
html[data-motion="off"] .rc:hover {
transform: none;
}
.rf {
padding-top: clamp(0.5rem, 2vw, 1.5rem);
}
.rf [hidden] {
display: none !important;
}
.rf__bar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1rem 2rem;
margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
padding-top: 1.1rem;
border-top: 1px solid var(--line);
}
.rf__filters {
display: flex;
flex-wrap: wrap;
gap: 0.15rem 1.5rem;
}
.rf__filter {
position: relative;
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
padding: 0.45rem 0;
border: 0;
font: inherit;
font-size: 0.98rem;
font-weight: 600;
color: var(--text-2);
background: transparent;
cursor: pointer;
transition: color 0.25s var(--ease);
}
.rf__filter::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 2px;
background: var(--brand);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.45s var(--ease);
}
.rf__filter:hover,
.rf__filter[aria-pressed="true"] {
color: var(--text);
}
.rf__filter[aria-pressed="true"]::after {
transform: none;
}
.rf__filter:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 3px;
}
.rf__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(1.25rem, 2.5vw, 2rem);
}
.rf__grid > li {
min-width: 0;
}
@media (min-width: 900px) {
.rf__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.rf__empty {
padding: 3rem 0;
text-align: center;
color: var(--text-2);
}
.rf__note {
margin-top: 1.1rem;
font-size: 0.9rem;
color: var(--text-3);
}
html.rdlg-open {
overflow: hidden;
}
.rdlg {
width: min(1180px, 94vw);
max-width: none;
max-height: 92vh;
margin: auto;
padding: 0;
border: 1px solid var(--line-2);
border-radius: 22px;
background: var(--bg-2);
color: var(--text);
box-shadow: 0 60px 120px -50px rgb(0 0 0 / 0.9);
overflow: hidden;
}
.rdlg::backdrop {
background: rgb(4 4 6 / 0.72);
}
.rdlg[open] {
animation: rdlg-in 0.4s var(--ease);
}
@keyframes rdlg-in {
from { opacity: 0; transform: translateY(14px) scale(0.985); }
to { opacity: 1; transform: none; }
}
.rdlg__inner {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
max-height: 92vh;
}
.rdlg__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1.1rem 0.9rem 1.4rem;
border-bottom: 1px solid var(--line);
}
.rdlg__head .eyebrow {
flex: none;
}
.rdlg__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--line-2);
border-radius: 50%;
color: var(--text);
background: transparent;
cursor: pointer;
transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.rdlg__close .icon {
width: 1.1rem;
height: 1.1rem;
}
.rdlg__close:hover {
border-color: var(--text);
transform: rotate(90deg);
}
.rdlg__close:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 3px;
}
.rdlg__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.25rem;
min-height: 0;
padding: 1.25rem 1.4rem 1.4rem;
overflow: auto;
}
@media (min-width: 900px) {
.rdlg__grid {
grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.85fr);
overflow: hidden;
}
}
.rdlg__browser {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
min-height: 0;
border: 1px solid var(--line-2);
border-radius: 14px;
overflow: hidden;
background: var(--surface-2);
}
.rdlg__bar {
position: relative;
display: flex;
align-items: center;
gap: 0.6rem;
height: 36px;
padding: 0 0.75rem;
border-bottom: 1px solid var(--line);
}
.rdlg__bar .rc__url {
max-width: 70%;
}
.rdlg__progress {
position: absolute;
right: 0;
bottom: -1px;
left: 0;
height: 2px;
background: var(--brand);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.15s linear;
}
.rdlg__scroll {
min-height: 0;
max-height: 70vh;
overflow: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--line-2) transparent;
background: var(--surface-3);
}
@media (min-width: 900px) {
.rdlg__scroll {
max-height: none;
}
}
.rdlg__scroll img {
display: block;
width: 100%;
height: auto;
}
.rdlg__hint {
display: flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.6rem;
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
}
.rdlg__hint .icon {
width: 0.9rem;
height: 0.9rem;
color: var(--brand-600);
}
.rdlg__side {
display: flex;
flex-direction: column;
gap: 0.85rem;
min-height: 0;
overflow: auto;
scrollbar-width: thin;
scrollbar-color: var(--line-2) transparent;
}
.rdlg__phone-wrap {
display: flex;
justify-content: center;
padding: 0.5rem 0 0.25rem;
}
.rdlg__phone-wrap .rc__phone {
position: relative;
right: auto;
bottom: auto;
width: min(46%, 11rem);
}
.rdlg__title {
font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.9rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
}
.rdlg__domain {
align-self: flex-start;
}
.rdlg__summary {
font-size: 0.98rem;
line-height: 1.6;
color: var(--text-2);
}
.rdlg__kv {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin: 0;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
background: var(--line);
}
.rdlg__kv > div {
display: grid;
gap: 0.15rem;
padding: 0.7rem 0.8rem;
background: var(--surface);
}
.rdlg__kv dt {
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
.rdlg__kv dd {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
overflow-wrap: anywhere;
}
.rdlg__actions {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: auto;
padding-top: 0.5rem;
}
.rdlg__actions .btn {
height: 44px;
font-size: 0.92rem;
}
@media (prefers-reduced-motion: reduce) {
.rdlg[open] {
animation: none;
}
.rdlg__close,
.rdlg__progress {
transition: none;
}
}
html[data-motion="off"] .rdlg[open] {
animation: none;
}
@media (max-width: 600px) {
.rdlg {
width: 100vw;
max-height: 100dvh;
border-radius: 0;
border: 0;
}
.rdlg__inner {
max-height: 100dvh;
}
.rdlg__grid {
padding: 1rem;
}
.rdlg__kv {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rc--lg .rc__stage {
padding-right: 9%;
}
}
[dir="rtl"] .rf__filter::after {
transform-origin: 100% 50%;
}
.rfx-list {
display: grid;
gap: 0.55rem;
margin: 1.5rem 0 0;
padding: 0;
list-style: none;
}
@media (min-width: 480px) {
.rfx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rfx-list__item { min-width: 0; }
.rfx-dom {
position: relative;
display: grid;
grid-template-columns: 34px minmax(0, 1fr) 16px;
align-items: center;
gap: 0.7rem;
height: 100%;
padding: 0.62rem 0.8rem;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--surface);
color: var(--text);
text-decoration: none;
transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.35s var(--ease);
}
.rfx-dom::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 2px;
background: var(--grad-brand);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s var(--ease);
}
[dir="rtl"] .rfx-dom::after { transform-origin: right; }
.rfx-dom:hover,
.rfx-dom:focus-visible,
.rfx-dom.is-hot {
border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}
.rfx-dom:hover::after,
.rfx-dom:focus-visible::after,
.rfx-dom.is-hot::after { transform: scaleX(1); }
.rfx-dom:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
.rfx-dom:hover { transform: translateY(-2px); }
}
.rfx-dom__ico {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
border-radius: var(--r-sm);
background: var(--brand-soft);
color: var(--brand-600);
transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.rfx-dom__ico .icon { width: 16px; height: 16px; }
.rfx-dom:hover .rfx-dom__ico,
.rfx-dom:focus-visible .rfx-dom__ico,
.rfx-dom.is-hot .rfx-dom__ico { background: var(--brand-fill); color: var(--brand-ink); }
.rfx-dom__body { display: grid; gap: 0.1rem; min-width: 0; }
.rfx-dom__name {
overflow: hidden;
font: 600 0.92rem/1.25 var(--font);
text-align: start;
text-overflow: ellipsis;
white-space: nowrap;
unicode-bidi: isolate;
}
[dir="rtl"] .rfx-dom__name { text-align: end; }
.rfx-dom__sector {
overflow: hidden;
font-size: 0.76rem;
color: var(--text-3);
text-overflow: ellipsis;
white-space: nowrap;
}
.rfx-dom__go { color: var(--text-3); transition: color 0.3s var(--ease), transform 0.3s var(--ease); }
.rfx-dom__go .icon { width: 15px; height: 15px; }
.rfx-dom:hover .rfx-dom__go,
.rfx-dom:focus-visible .rfx-dom__go { color: var(--brand-600); transform: translateY(2px); }
.rfx__aura { fill: color-mix(in srgb, var(--brand) 4%, transparent); stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; }
.rfx__link { transition: opacity 0.3s var(--ease); }
.rfx__cable {
fill: none;
stroke: color-mix(in srgb, var(--text-3) 60%, transparent);
stroke-width: 1.2;
stroke-dasharray: 3 5;
transition: stroke 0.3s var(--ease);
}
.rfx__flow,
.rfx__beam {
fill: none;
stroke: var(--brand);
stroke-linecap: round;
stroke-dashoffset: 100;
}
.rfx__flow {
stroke-width: 1.6;
stroke-dasharray: 5 95;
opacity: 0.4;
animation: rfx-run 4.4s linear infinite;
}
.rfx__link:nth-child(2n) .rfx__flow { animation-delay: -1.6s; }
.rfx__link:nth-child(3n) .rfx__flow { animation-delay: -2.9s; }
.rfx__beam {
stroke-width: 2.4;
stroke-dasharray: 22 78;
opacity: 0;
transition: opacity 0.3s var(--ease);
}
@keyframes rfx-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.rfx__port { fill: var(--surface-3); stroke: color-mix(in srgb, var(--text-3) 60%, transparent); stroke-width: 1; transition: fill 0.3s var(--ease); }
.sig-stage[data-hot] .rfx__link:not(.is-hot) { opacity: 0.4; }
.rfx__link.is-hot .rfx__cable { stroke: color-mix(in srgb, var(--brand) 60%, transparent); }
.rfx__link.is-hot .rfx__flow { opacity: 0; }
.rfx__link.is-hot .rfx__beam { opacity: 1; animation: rfx-run 1.05s linear infinite; filter: drop-shadow(0 0 5px var(--brand-glow)); }
.rfx__link.is-hot .rfx__port { fill: var(--brand); stroke: var(--brand); filter: drop-shadow(0 0 5px var(--brand)); }
.rfx__letter {
fill: var(--text-2);
font: 700 17px var(--mono);
pointer-events: none;
transition: fill 0.3s var(--ease);
}
.sig-node.is-hot .rfx__letter,
.sig-node.is-on .rfx__letter { fill: var(--brand-600); }
.rfx__label { font-size: 12.5px; }
.rfx-win {
position: absolute;
left: 50%;
top: 50%;
z-index: 3;
display: grid;
width: 50%;
border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line-2));
border-radius: 10px;
background: var(--surface);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--bg-2) 70%, transparent), 0 18px 40px -18px rgb(0 0 0 / 0.6), 0 0 40px -10px var(--brand-glow);
transform: translate(-50%, -50%);
transition: box-shadow 0.4s var(--ease);
}
.sig-stage[data-hot] .rfx-win { box-shadow: 0 0 0 5px color-mix(in srgb, var(--bg-2) 70%, transparent), 0 18px 40px -18px rgb(0 0 0 / 0.6), 0 0 56px -6px var(--brand-glow); }
.rfx-win .sig-core__pulse { border-radius: 10px; }
.rfx-win__bar {
display: flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
padding: 0.32rem 0.45rem;
border-bottom: 1px solid var(--line);
}
.rfx-win__dots { display: inline-flex; flex: none; gap: 3px; }
.rfx-win__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); }
.rfx-win__url {
display: flex;
flex: 1;
align-items: center;
gap: 0.25rem;
min-width: 0;
height: 15px;
padding: 0 0.4rem;
border-radius: 999px;
background: var(--surface-2);
color: var(--text-3);
}
.rfx-win__url .icon { flex: none; width: 8px; height: 8px; }
.rfx-win__urls { display: grid; flex: 1; min-width: 0; }
.rfx-win__u {
grid-area: 1 / 1;
overflow: hidden;
font: 500 0.56rem/15px var(--mono);
color: var(--text-2);
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.3s var(--ease), transform 0.35s var(--ease-out);
}
.rfx-win__u.is-hot { opacity: 1; transform: none; }
.rfx-win__u--idle { display: flex; align-items: center; gap: 4px; opacity: 1; transform: none; }
.rfx-win__u--idle b { height: 4px; border-radius: 2px; background: var(--line-2); }
.rfx-win__u--idle b:first-child { width: 42%; }
.rfx-win__u--idle b:last-child { width: 22%; }
.sig-stage[data-hot] .rfx-win__u--idle { opacity: 0; }
.rfx-win__live {
flex: none;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--text-3);
transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.sig-stage[data-hot] .rfx-win__live { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.rfx-win__screen {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 0 0 9px 9px;
background:
radial-gradient(60% 70% at 50% 50%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%),
radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 1.5px) 0 0 / 12px 12px,
var(--bg-2);
}
.rfx-win__logo { display: grid; place-items: center; width: 36%; color: var(--text); transition: opacity 0.3s var(--ease), transform 0.45s var(--ease); }
.rfx-win__logo .logo__svg { width: 100%; height: auto; }
.sig-stage[data-hot] .rfx-win__logo { opacity: 0; transform: scale(0.85); }
.rfx-win__cover {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
opacity: 0;
transform: scale(1.12) translateY(4%);
transition: opacity 0.45s var(--ease), transform 0.8s var(--ease-out);
}
.rfx-win__cover.is-hot {
opacity: 1;
transform: scale(1.12) translateY(5%);
animation: rfx-pan 7s var(--ease-io) 0.4s infinite alternate;
}
@keyframes rfx-pan {
from { transform: scale(1.12) translateY(5%); }
to { transform: scale(1.12) translateY(-5%); }
}
.rfx-win__scan {
position: absolute;
inset: 0 0 auto;
height: 30%;
background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--brand) 16%, transparent), transparent);
opacity: 0;
transform: translateY(-100%);
pointer-events: none;
}
.sig-stage[data-hot] .rfx-win__scan { animation: rfx-scan 2.8s var(--ease-io) infinite; }
@keyframes rfx-scan {
0% { opacity: 0; transform: translateY(-100%); }
10% { opacity: 1; }
45% { opacity: 1; transform: translateY(340%); }
46%, 100% { opacity: 0; transform: translateY(340%); }
}
@media (max-width: 559.98px) {
.rfx__label { font-size: 16px; }
.rfx-win__bar { padding: 0.22rem 0.35rem; }
.rfx-win__url { height: 12px; }
.rfx-win__u { font-size: 0.5rem; line-height: 12px; }
}
html[data-motion="calm"] .sig-stage:not([data-hot]) .rfx__flow { animation: none; opacity: 0; }
html[data-motion="calm"] .rfx-win__cover.is-hot { animation: none; }
@media (prefers-reduced-motion: reduce) {
.rfx__flow { display: none; }
.rfx__beam { stroke-dasharray: none; }
.rfx-win__scan { display: none; }
.rfx-win__cover { transform: none !important; }
.rfx-dom { transition: none; }
}
html[data-motion="off"] .rfx__flow { display: none; }
html[data-motion="off"] .rfx__beam { stroke-dasharray: none; }
html[data-motion="off"] .rfx-win__scan { display: none; }
html[data-motion="off"] .rfx-win__cover { transform: none !important; }
.rfx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 479.98px) {
.rfx-dom { grid-template-columns: minmax(0, 1fr) 14px; gap: 0.4rem; padding: 0.6rem 0.7rem; }
.rfx-dom__ico { display: none; }
.rfx-dom__name { font-size: 0.84rem; }
.rfx-dom__sector { font-size: 0.72rem; }
}
@media (max-width: 559.98px) {
.rfx__label { display: none; }
}
.rfx-win { animation: rfx-float 6s var(--ease-io) infinite; }
@keyframes rfx-float {
0%, 100% { transform: translate(-50%, -50%); }
50% { transform: translate(-50%, calc(-50% - 5px)); }
}
.rfx-win__neon {
position: absolute;
inset: -2px;
z-index: 2;
padding: 2px;
border-radius: 12px;
background: conic-gradient(from var(--neon-a, 0deg), transparent 0 52%, color-mix(in srgb, var(--brand) 70%, transparent) 64%, #ffd36b 72%, #fff3c4 75%, var(--brand) 80%, transparent 92%);
-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);
opacity: 0.55;
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--brand) 80%, transparent));
pointer-events: none;
animation: neon-spin 5s linear infinite;
transition: opacity 0.4s var(--ease);
}
.sig-stage[data-hot] .rfx-win__neon { opacity: 1; animation-duration: 2.2s; }
.rfx__ring {
fill: none;
stroke: var(--brand);
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 26 8 6 8;
opacity: 0;
transform-box: fill-box;
transform-origin: center;
filter: drop-shadow(0 0 4px var(--brand));
transition: opacity 0.35s var(--ease);
}
.sig-node.is-hot .rfx__ring {
opacity: 1;
animation: rfx-ring 2.4s linear infinite;
}
@keyframes rfx-ring { to { transform: rotate(360deg); } }
.rfx__node { transform-box: fill-box; animation: rfx-bob 5.2s var(--ease-io) infinite; }
.rfx__node:nth-of-type(2n) { animation-delay: -1.7s; }
.rfx__node:nth-of-type(3n) { animation-delay: -3.1s; }
@keyframes rfx-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.rfx-win__cover {
clip-path: inset(0 0 100% 0);
filter: blur(6px) saturate(0.6);
transition: opacity 0.35s var(--ease), clip-path 0.75s cubic-bezier(0.6, 0, 0.2, 1), filter 0.75s var(--ease), transform 0.8s var(--ease-out);
}
.rfx-win__cover.is-hot {
clip-path: inset(0 0 0 0);
filter: none;
}
.rfx-sparks {
position: absolute;
inset: 22% 22%;
z-index: 2;
pointer-events: none;
}
.rfx-sparks i {
position: absolute;
bottom: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--brand);
box-shadow: 0 0 8px 1px var(--brand);
opacity: 0;
animation: rfx-spark 4.8s var(--ease-out) infinite;
}
.rfx-sparks i:nth-child(1) { left: 6%; animation-delay: 0s; }
.rfx-sparks i:nth-child(2) { left: 22%; animation-delay: -0.6s; width: 3px; height: 3px; }
.rfx-sparks i:nth-child(3) { left: 38%; animation-delay: -1.2s; }
.rfx-sparks i:nth-child(4) { left: 52%; animation-delay: -1.8s; width: 3px; height: 3px; background: #ffd36b; }
.rfx-sparks i:nth-child(5) { left: 66%; animation-delay: -2.4s; }
.rfx-sparks i:nth-child(6) { left: 80%; animation-delay: -3s; width: 3px; height: 3px; }
.rfx-sparks i:nth-child(7) { left: 92%; animation-delay: -3.6s; background: #ffd36b; }
.rfx-sparks i:nth-child(8) { left: 30%; animation-delay: -4.2s; width: 2px; height: 2px; }
@keyframes rfx-spark {
0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
15% { opacity: 0.9; }
100% { opacity: 0; transform: translate(10px, -170px) scale(1.1); }
}
.sig-stage[data-hot] .rfx-sparks i { animation-duration: 3.2s; }
.is-paused .rfx-win,
.is-paused .rfx-win__neon,
.is-paused .rfx__node,
.is-paused .rfx__ring,
.is-paused .rfx-sparks i { animation-play-state: paused !important; }
html[data-motion="calm"] .rfx-win,
html[data-motion="calm"] .rfx__node,
html[data-motion="calm"] .rfx-sparks i { animation: none; }
html[data-motion="calm"] .rfx-sparks { display: none; }
@media (prefers-reduced-motion: reduce) {
.rfx-win, .rfx-win__neon, .rfx__node, .rfx__ring, .rfx-sparks i { animation: none !important; }
.rfx-sparks { display: none; }
.rfx-win__cover { clip-path: none; filter: none; transition: opacity 0.2s; }
}
html[data-motion="off"] .rfx-win,
html[data-motion="off"] .rfx-win__neon,
html[data-motion="off"] .rfx__node,
html[data-motion="off"] .rfx__ring,
html[data-motion="off"] .rfx-sparks i { animation: none !important; }
html[data-motion="off"] .rfx-sparks { display: none; }
html[data-motion="off"] .rfx-win__cover { clip-path: none; filter: none; }

/* css/front/services.css */

.sv-h2 {
margin: 0.9rem 0 0;
font-size: var(--fs-h2);
font-weight: 650;
line-height: var(--lh-head);
letter-spacing: var(--ls-head);
text-wrap: balance;
}
.sv-head {
max-width: 46rem;
margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.sv-head__intro {
max-width: 36rem;
margin: 1rem 0 0;
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--text-2);
}
.sv-btn-sm {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 38px;
padding: 0.4rem 0.9rem;
border: 1px solid var(--line-2);
border-radius: 999px;
background: transparent;
color: var(--text);
font-size: 0.86rem;
font-weight: 600;
cursor: pointer;
transition: border-color 0.2s, background-color 0.2s;
}
.sv-btn-sm .icon {
width: 15px;
height: 15px;
}
.sv-btn-sm:hover {
border-color: var(--text-2);
background: var(--surface-2);
}
.sv-chip {
min-height: 38px;
padding: 0.4rem 1rem;
border: 1px solid var(--line-2);
border-radius: 999px;
background: transparent;
color: var(--text-2);
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.sv-chip:hover {
color: var(--text);
border-color: var(--text-2);
}
.sv-chip[aria-pressed="true"] {
background: var(--brand-soft);
border-color: color-mix(in srgb, var(--brand) 55%, transparent);
color: var(--brand-600);
}
.sv-check,
.sv-plain {
display: grid;
gap: 0.7rem;
margin: 0;
padding: 0;
list-style: none;
}
.sv-check li {
display: grid;
grid-template-columns: 18px 1fr;
gap: 0.7rem;
align-items: start;
line-height: 1.5;
}
.sv-check .icon {
width: 18px;
height: 18px;
margin-top: 2px;
color: var(--brand-600);
}
.sv-plain li {
line-height: 1.5;
color: var(--text-2);
}
.sv-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: var(--text-2);
font-weight: 600;
transition: color 0.2s;
}
.sv-link .icon {
width: 16px;
height: 16px;
}
.sv-link:hover {
color: var(--brand-600);
}
.sv--tabs {
padding-top: clamp(2rem, 4vw, 3rem);
}
.sv-jump {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 1.6rem;
margin-bottom: clamp(2rem, 4vw, 3.5rem);
padding-bottom: 1rem;
border-bottom: 1px solid var(--line);
font-size: 0.9rem;
}
.sv-jump__title {
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-3);
}
.sv-jump__link {
position: relative;
padding: 0.2rem 0;
color: var(--text-2);
transition: color 0.2s;
}
.sv-jump__link:hover,
.sv-jump__link.is-active {
color: var(--text);
}
.sv-jump__link.is-active::before {
content: "";
position: absolute;
left: -0.8rem;
top: 50%;
width: 5px;
height: 5px;
margin-top: -2.5px;
border-radius: 50%;
background: var(--brand);
}
.sv__layout {
display: grid;
gap: clamp(2rem, 5vw, 4rem);
}
.sv__tablist {
display: grid;
align-content: start;
}
.sv-tab {
position: relative;
display: grid;
grid-template-columns: 2.4rem 1fr auto;
gap: 0.5rem;
align-items: start;
width: 100%;
padding: 1.2rem 0.25rem;
border: 0;
border-top: 1px solid var(--line);
background: transparent;
color: var(--text-2);
text-align: left;
cursor: pointer;
transition: color 0.25s;
}
.sv-tab:last-of-type {
border-bottom: 1px solid var(--line);
}
.sv-tab::before {
content: "";
position: absolute;
inset: -1px auto auto 0;
width: 100%;
height: 2px;
background: var(--brand);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.5s var(--ease);
}
.sv-tab[aria-selected="true"]::before {
transform: none;
}
.sv-tab:hover {
color: var(--text);
}
.sv-tab[aria-selected="true"] {
color: var(--text);
}
.sv-tab__no {
padding-top: 0.55rem;
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.08em;
color: var(--text-3);
}
.sv-tab[aria-selected="true"] .sv-tab__no {
color: var(--brand-600);
}
.sv-tab__title {
display: block;
font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem);
font-weight: 650;
letter-spacing: -0.02em;
line-height: 1.2;
}
.sv-tab__text {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s var(--ease);
}
.sv-tab__text > span {
overflow: hidden;
font-size: 0.94rem;
line-height: 1.55;
color: var(--text-2);
}
.sv-tab[aria-selected="true"] .sv-tab__text {
grid-template-rows: 1fr;
}
.sv-tab[aria-selected="true"] .sv-tab__text > span {
padding-top: 0.55rem;
}
.sv-tab__go {
width: 20px;
height: 20px;
margin-top: 0.5rem;
color: var(--text-3);
transition: transform 0.3s var(--ease), color 0.2s;
}
.sv-tab[aria-selected="true"] .sv-tab__go,
.sv-tab:hover .sv-tab__go {
color: var(--brand-600);
transform: translateX(4px);
}
.sv-panel[hidden] {
display: none;
}
.sv-panel.is-entering {
animation: sv-in 0.55s var(--ease) both;
}
@keyframes sv-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
.sv-panel:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 6px;
border-radius: 4px;
}
.sv-panel__top {
display: grid;
gap: 1.75rem;
align-items: center;
}
.sv-panel__title {
margin: 0.8rem 0 0;
font-size: var(--fs-h2);
font-weight: 650;
line-height: var(--lh-head);
letter-spacing: var(--ls-head);
}
.sv-panel__text {
max-width: 34rem;
margin: 1rem 0 0;
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--text-2);
}
.sv-scene {
position: relative;
margin: 0;
padding: clamp(0.75rem, 2vw, 1.25rem);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--bg-2);
}
.sv-scene__cap {
position: absolute;
right: 1rem;
bottom: 0.6rem;
font-family: var(--mono);
font-size: 0.66rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-3);
}
.sv-scene .sx {
max-height: 300px;
}
.sv-panel__cols {
display: grid;
gap: 2rem;
margin-top: clamp(2rem, 4vw, 3rem);
padding-top: 2rem;
border-top: 1px solid var(--line);
}
.sv-col__title {
margin: 0 0 1rem;
font-family: var(--mono);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-3);
}
.sv-col__title--gap {
margin-top: 1.75rem;
}
.sv-panel__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.9rem 1.25rem;
margin-top: clamp(2rem, 4vw, 2.75rem);
}
.sbn__wrap {
display: grid;
gap: clamp(2rem, 5vw, 4rem);
}
.sbn__head .eyebrow {
color: var(--text);
}
.sbn__intro {
max-width: 30rem;
margin: 1rem 0 1.5rem;
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--text-2);
}
.sbn__head .sv-btn-sm {
border-color: var(--line);
color: var(--text);
}
.sbn__head .sv-btn-sm:hover {
background: var(--surface);
border-color: var(--text);
}
.sbn__list {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.sbn-card {
border-top: 1px solid var(--line);
}
.sbn-card:last-child {
border-bottom: 1px solid var(--line);
}
.sbn-card__btn {
position: relative;
display: grid;
grid-template-columns: 2.5rem 1fr 1.5rem;
gap: 1rem;
align-items: center;
width: 100%;
padding: 1.2rem 0.25rem;
border: 0;
background: transparent;
color: var(--text);
text-align: left;
cursor: pointer;
}
.sbn-card__icon .icon {
width: 26px;
height: 26px;
stroke-width: 1.5;
}
.sbn-card__title {
display: block;
font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
font-weight: 650;
letter-spacing: -0.02em;
}
.sbn-card__text {
display: block;
margin-top: 0.3rem;
font-size: 0.92rem;
line-height: 1.5;
color: var(--text-2);
}
.sbn-card__plus {
position: relative;
width: 18px;
height: 18px;
justify-self: end;
}
.sbn-card__plus i {
position: absolute;
inset: 8px 0 auto;
height: 2px;
border-radius: 1px;
background: currentColor;
transition: transform 0.35s var(--ease);
}
.sbn-card__plus i + i {
transform: rotate(90deg);
}
.sbn-card.is-open .sbn-card__plus i + i {
transform: rotate(0);
}
.sbn-card__more {
display: grid;
grid-template-rows: 1fr;
}
.js-sbn .sbn-card__more {
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s var(--ease);
}
.js-sbn .sbn-card.is-open .sbn-card__more {
grid-template-rows: 1fr;
}
.sbn-card__more-in {
display: grid;
min-height: 0;
gap: 1rem 2rem;
overflow: hidden;
padding-left: 3.5rem;
}
.sbn-card__more-in::after {
content: "";
grid-column: 1 / -1;
height: 0.4rem;
}
.sbn-card__more-in p {
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-2);
}
.sbn-card__more-in b {
display: block;
margin-bottom: 0.2rem;
font-family: var(--mono);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text);
}
.sbn__tags {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.5rem;
align-items: center;
padding-top: 1.5rem;
border-top: 1px solid var(--line);
}
.sbn__tags-title {
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-2);
}
.sbn__tags ul {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.4rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.92rem;
}
.sbn__tags li {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.sbn__tags .icon {
width: 15px;
height: 15px;
}
.cmp__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem 2rem;
margin-bottom: 1.5rem;
}
.cmp__filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.cmp__legend {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.25rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.86rem;
color: var(--text-2);
}
.cmp__legend li {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.cmp__scroll {
overflow-x: auto;
border-top: 1px solid var(--line);
}
.cmp__scroll:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 4px;
}
.cmp__table {
width: 100%;
min-width: 640px;
border-collapse: collapse;
}
.cmp__table th,
.cmp__table td {
padding: 0.95rem 0.75rem;
border-bottom: 1px solid var(--line);
text-align: center;
transition: background-color 0.2s;
}
.cmp__table thead th {
font-size: 0.92rem;
font-weight: 650;
vertical-align: bottom;
}
.cmp__table tbody th {
width: 38%;
text-align: left;
font-weight: 500;
color: var(--text);
}
.cmp__corner {
text-align: left !important;
}
.cmp__count {
font-family: var(--mono);
font-size: var(--fs-label);
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
.cmp__group {
display: block;
margin-bottom: 0.15rem;
font-family: var(--mono);
font-size: 0.66rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-3);
}
.cmp__colink {
color: var(--text);
transition: color 0.2s;
}
.cmp__colink:hover {
color: var(--brand-600);
}
.cmp__table tr.is-off {
display: none;
}
.cmp__table .is-col {
background: var(--brand-soft);
}
.cmp-mark {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
vertical-align: middle;
}
.cmp-mark--yes {
background: var(--brand);
}
.cmp-mark--part {
border: 2px solid var(--brand);
background: linear-gradient(90deg, var(--brand) 50%, transparent 50%);
}
.cmp-mark--no {
width: 12px;
height: 2px;
border-radius: 1px;
background: var(--text-3);
}
.cmp__foot {
margin: 1.25rem 0 0;
font-size: 0.88rem;
color: var(--text-2);
}
.sv--match {
overflow: hidden;
}
.sv-ticker {
margin: calc(var(--band-py) * -1) 0 clamp(2.5rem, 5vw, 4rem);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.sv-ticker__row {
display: flex;
width: max-content;
gap: 2rem;
padding: 0.9rem 0;
font-family: var(--mono);
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-2);
white-space: nowrap;
}
.sv-ticker__row i {
align-self: center;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand);
}
.sv-ticker__row span,
.sv-ticker__row i {
flex: none;
}
.smatch__wrap {
display: grid;
gap: clamp(2rem, 5vw, 4rem);
}
.smatch__intro {
max-width: 30rem;
margin: 1rem 0 0;
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--text-2);
}
.smatch__opts {
display: grid;
margin-top: 2rem;
}
.smatch__opt {
position: relative;
display: grid;
grid-template-columns: 1fr 18px;
gap: 1rem;
align-items: center;
width: 100%;
padding: 1.1rem 0.25rem;
border: 0;
border-top: 1px solid var(--line);
background: transparent;
color: var(--text-2);
font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.35;
text-align: left;
cursor: pointer;
transition: color 0.25s;
}
.smatch__opt:last-child {
border-bottom: 1px solid var(--line);
}
.smatch__opt-icon {
display: none;
}
.smatch__opt:hover,
.smatch__opt[aria-pressed="true"] {
color: var(--text);
}
.smatch__opt-radio {
width: 18px;
height: 18px;
border: 2px solid var(--line-2);
border-radius: 50%;
transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
}
.smatch__opt[aria-pressed="true"] .smatch__opt-radio {
border-color: var(--brand);
background: var(--brand);
box-shadow: inset 0 0 0 3px var(--bg-2);
}
.smatch__panel[hidden] {
display: none;
}
.smatch__panel.is-entering {
animation: sv-in 0.5s var(--ease) both;
}
.smatch__kicker {
margin: 1.5rem 0 0;
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brand-600);
}
.smatch__ptitle {
color: var(--text);
margin: 0.5rem 0 0;
font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
font-weight: 650;
letter-spacing: -0.025em;
line-height: 1.15;
}
.smatch__why {
margin: 0.9rem 0 0;
line-height: 1.65;
color: var(--text-2);
}
.smatch__next {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--line);
}
.smatch__next-title {
margin: 0 0 0.8rem;
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-3);
}
.smatch__next ul {
display: grid;
gap: 0.6rem;
margin: 0;
padding: 0;
list-style: none;
}
.smatch__next li {
display: grid;
grid-template-columns: 18px 1fr;
gap: 0.7rem;
line-height: 1.5;
}
.smatch__next .icon {
width: 18px;
height: 18px;
margin-top: 2px;
color: var(--brand-600);
}
.smatch__with {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin: 1.4rem 0 0;
font-size: 0.88rem;
color: var(--text-2);
}
.smatch__tag {
padding: 0.25rem 0.8rem;
border: 1px solid var(--line-2);
border-radius: 999px;
color: var(--text);
font-weight: 600;
transition: border-color 0.2s, background-color 0.2s;
}
.smatch__tag:hover {
border-color: var(--brand);
background: var(--brand-soft);
}
.smatch__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.9rem 1.25rem;
margin-top: 1.75rem;
}
.smatch__jump {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: var(--text-2);
font-weight: 600;
}
.smatch__jump:hover {
color: var(--brand-600);
}
.smatch__jump .icon {
width: 16px;
height: 16px;
}
.smatch__note {
margin: 2rem 0 0;
font-size: 0.9rem;
color: var(--text-3);
}
.sv-scene--mini {
padding: 0.75rem;
}
.sv-scene--mini .sx {
max-height: 190px;
}
.qa-sec {
padding-block: clamp(3rem, 6vw, 4.5rem);
border-top: 1px solid var(--line);
}
.qa__lead {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0 0 1.25rem;
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-2);
}
.qa__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brand);
animation: qa-pulse 2.4s ease-in-out infinite;
}
@keyframes qa-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.6); opacity: 0.5; }
}
.qa__list {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.qa__item {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
border-top: 1px solid var(--line);
}
.qa__item:last-child {
border-bottom: 1px solid var(--line);
}
.qa__link {
position: relative;
display: grid;
flex: 1;
grid-template-columns: 1fr auto;
gap: 0.75rem;
align-items: center;
min-width: 0;
padding: 1.1rem 0.25rem;
color: var(--text);
}
.qa__icon {
display: none;
}
.qa__label {
display: block;
font-family: var(--mono);
font-size: var(--fs-label);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
.qa__value {
display: block;
margin-top: 0.2rem;
overflow-wrap: anywhere;
font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
font-weight: 650;
letter-spacing: -0.015em;
}
.qa__go {
width: 20px;
height: 20px;
color: var(--text-3);
transition: transform 0.3s var(--ease), color 0.2s;
}
.qa__link:hover .qa__go {
color: var(--brand-600);
transform: translate(3px, -3px);
}
.sx {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.sx-win { fill: var(--surface); stroke: var(--line-2); }
.sx-card { fill: var(--surface-2); stroke: var(--line-2); }
.sx-b-card { fill: var(--brand-fill); }
.sx-line { fill: none; stroke: var(--line-2); }
.sx-grid { fill: none; stroke: var(--line); stroke-dasharray: 3 5; }
.sx-bar { fill: var(--line-2); }
.sx-bar-v { fill: var(--surface-3); }
.sx-ink { fill: var(--text); }
.sx-dim { fill: color-mix(in oklab, var(--text-3) 60%, transparent); }
.sx-b { fill: var(--brand); }
.sx-b2 { fill: color-mix(in oklab, var(--brand) 40%, var(--surface-2)); }
.sx-soft { fill: var(--brand-soft-2); }
.sx-on { fill: var(--brand-ink); }
.sx-ghost { fill: none; stroke: var(--line-2); stroke-dasharray: 4 4; }
.sx-track { fill: var(--line); }
.sx-box { fill: none; stroke: var(--line-2); }
.sx-toggle { fill: var(--surface-3); stroke: var(--line-2); }
.sx-pill { fill: var(--brand-soft-2); }
.sx-pillbg { fill: var(--surface-3); stroke: var(--line-2); }
.sx-code { fill: var(--code-bg); stroke: var(--line-2); }
.sx-ct { fill: var(--code-text); }
.sx-cd { fill: var(--code-dim); }
.sx-cd2 { fill: color-mix(in oklab, var(--code-text) 40%, transparent); }
.sx-amber { fill: var(--accent-amber); }
.sx-teal { fill: var(--accent-teal); }
.sx-brand-f { fill: var(--brand); }
.sx-caret { fill: var(--brand); }
.sx-link { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sx-flow { stroke: var(--brand); stroke-width: 2; stroke-linecap: round; fill: none; }
.sx-flow-h { stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.sx-trend { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sx-tick { fill: none; stroke: var(--brand-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sx-tickb { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sx-selbox { fill: none; stroke: var(--brand); stroke-dasharray: 4 3; }
.sx-selh { fill: var(--surface); stroke: var(--brand); }
.sx-curs { fill: var(--text); stroke: var(--bg); stroke-width: 1; stroke-linejoin: round; }
.sx-curs-b { fill: var(--brand); stroke: var(--bg); stroke-width: 1; stroke-linejoin: round; }
.sx-lab { font-family: var(--font); font-size: 11px; font-weight: 600; fill: var(--text-2); }
.sx-lab--on { fill: var(--brand-ink); }
.sx-lab--lg { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.sx-tag { font-family: var(--font); font-size: 8px; font-weight: 700; fill: var(--brand-ink); }
.sx-aa { font-family: var(--font); font-size: 34px; font-weight: 700; fill: var(--text); }
.sx-cursor { transform: translate(240px, 98px); }
.pa--design .sx-cursor--a { transform: translate(150px, 150px); }
.pa--design .sx-cursor--b { transform: translate(250px, 60px); }
.sx-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.sx-spin, .sx-pop, .sx-drop, .sx-slide, .sx-grow, .sx-rise, .sx-badge, .sx-sel, .sx-dot, .sx-ping, .sx-caret, .sx-cursor {
transform-box: fill-box;
}
.sx-cursor { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
html:not([data-motion="off"]):not([data-motion="calm"]) .is-live .sx-grow { transform-origin: 0 50%; animation-name: sx-grow; animation-duration: 7s; animation-timing-function: var(--ease); animation-iteration-count: infinite; animation-fill-mode: both; }
html:not([data-motion="off"]):not([data-motion="calm"]) .is-live .sx-rise { transform-origin: 50% 100%; animation-name: sx-rise; animation-duration: 7s; animation-timing-function: var(--ease); animation-iteration-count: infinite; animation-fill-mode: both; }
html:not([data-motion="off"]):not([data-motion="calm"]) .is-live .sx-pop,
html:not([data-motion="off"]):not([data-motion="calm"]) .is-live .sx-badge { transform-origin: 50% 50%; animation-name: sx-pop; animation-duration: 7s; animation-timing-function: var(--ease); animation-iteration-count: infinite; animation-fill-mode: both; }
html:not([data-motion="off"]):not([data-motion="calm"]) .is-live .sx-drop { animation-name: sx-drop; animation-duration: 7s; animation-timing-function: var(--ease); animation-iteration-count: infinite; animation-fill-mode: both; }
html:not([data-motion="off"]):not([data-motion="calm"]) .is-live .sx-slide { animation-name: sx-slide; animation-duration: 7s; animation-timing-function: var(--ease); animation-iteration-count: infinite; animation-fill-mode: both; }
html:not([data-motion="off"]):not([data-motion="calm"]) .is-live .sx-sel { animation-name: sx-sel; animation-duration: 7s; animation-timing-function: var(--ease); animation-iteration-count: infinite; animation-fill-mode: both; }
html:not([data-motion="off"]):not([data-motion="calm"]) .is-live .sx-draw { animation-name: sx-draw; animation-duration: 7s; animation-timing-function: var(--ease); animation-iteration-count: infinite; animation-fill-mode: both; }
html:not([data-motion="off"]):not([data-motion="calm"]) .is-live .sx-spin { transform-origin: 50% 50%; animation: sx-spin 1.6s linear infinite; }
html:not([data-motion="off"]):not([data-motion="calm"]) .is-live .sx-ping { transform-origin: 50% 50%; animation: sx-ping 2s ease-in-out infinite; }
html:not([data-motion="off"]):not([data-motion="calm"]) .is-live .sx-caret { animation: sx-blink 1s steps(2, start) infinite; }
html:not([data-motion="off"]):not([data-motion="calm"]) .is-live .sx-dot { animation: sx-bounce 1.2s ease-in-out infinite; }
html:not([data-motion="off"]):not([data-motion="calm"]) .is-live .sx-dot2 { animation-delay: 0.15s; }
html:not([data-motion="off"]):not([data-motion="calm"]) .is-live .sx-dot3 { animation-delay: 0.3s; }
html:not([data-motion="off"]):not([data-motion="calm"]) .is-live .sx--design .sx-cursor { animation-name: sx-cur-d; animation-duration: 7s; animation-timing-function: var(--ease); animation-iteration-count: infinite; animation-fill-mode: both; }
html:not([data-motion="off"]):not([data-motion="calm"]) .is-live .pa--design .sx-cursor--a { animation-name: sx-cur-a; animation-duration: 7s; animation-timing-function: var(--ease); animation-iteration-count: infinite; animation-fill-mode: both; }
html:not([data-motion="off"]):not([data-motion="calm"]) .is-live .pa--design .sx-cursor--b { animation-name: sx-cur-b; animation-duration: 7s; animation-timing-function: var(--ease); animation-iteration-count: infinite; animation-fill-mode: both; }
html:not([data-motion="off"]):not([data-motion="calm"]) .is-live .sx-grow--slow { animation-name: sx-grow-slow; }
}
.sx-d1 { animation-delay: 0s; }
.sx-d2 { animation-delay: 0.25s; }
.sx-d3 { animation-delay: 0.5s; }
.sx-d4 { animation-delay: 0.75s; }
.sx-d5 { animation-delay: 1s; }
.sx-d6 { animation-delay: 1.25s; }
.sx-d7 { animation-delay: 1.5s; }
.sx-d8 { animation-delay: 1.75s; }
@keyframes sx-grow { 0%, 4% { transform: scaleX(0); } 14%, 88% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes sx-grow-slow { 0%, 4% { transform: scaleX(0); } 70%, 90% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
@keyframes sx-rise { 0%, 4% { transform: scaleY(0); } 16%, 88% { transform: scaleY(1); } 96%, 100% { transform: scaleY(0); } }
@keyframes sx-pop { 0%, 4% { transform: scale(0.9); opacity: 0; } 14%, 88% { transform: none; opacity: 1; } 96%, 100% { transform: scale(0.9); opacity: 0; } }
@keyframes sx-drop { 0%, 4% { transform: translateY(-14px); opacity: 0; } 14%, 88% { transform: none; opacity: 1; } 96%, 100% { transform: translateY(-14px); opacity: 0; } }
@keyframes sx-slide { 0%, 4% { transform: translateX(28px); opacity: 0; } 14%, 88% { transform: none; opacity: 1; } 96%, 100% { transform: translateX(28px); opacity: 0; } }
@keyframes sx-sel { 0%, 20% { opacity: 0; } 30%, 80% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes sx-draw { 0%, 4% { stroke-dashoffset: 1; } 16%, 88% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 1; } }
@keyframes sx-spin { to { transform: rotate(360deg); } }
@keyframes sx-ping { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: 0.35; } }
@keyframes sx-blink { to { visibility: hidden; } }
@keyframes sx-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
@keyframes sx-cur-d { 0%, 100% { transform: translate(300px, 170px); } 25% { transform: translate(70px, 84px); } 50% { transform: translate(60px, 130px); } 75% { transform: translate(230px, 120px); } }
@keyframes sx-cur-a { 0%, 100% { transform: translate(260px, 200px); } 35% { transform: translate(60px, 100px); } 70% { transform: translate(150px, 150px); } }
@keyframes sx-cur-b { 0%, 100% { transform: translate(120px, 40px); } 40% { transform: translate(250px, 60px); } 75% { transform: translate(210px, 130px); } }
@media (prefers-reduced-motion: no-preference) {
html:not([data-motion="off"]):not([data-motion="calm"]) .sv--match.is-live .sv-ticker__row { animation: sv-tick 36s linear infinite; }
html:not([data-motion="off"]):not([data-motion="calm"]) .pw.is-live .pw__ticker-row { animation: sv-tick 40s linear infinite; }
}
@keyframes sv-tick { to { transform: translateX(-50%); } }
@media (min-width: 700px) {
.qa__list { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
.qa__item:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }
.sbn-card__more-in { grid-template-columns: 1fr 1fr; }
.sv-panel__cols { grid-template-columns: 1.4fr 1fr; }
.sv-col--wide .sv-check { grid-template-columns: 1fr 1fr; gap: 0.9rem 1.5rem; }
}
@media (min-width: 960px) {
.sv__layout { grid-template-columns: minmax(260px, 0.36fr) 1fr; align-items: start; }
.sv__tablist { position: sticky; top: calc(var(--header-h) + 2rem); }
.sbn__wrap { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
.sbn__head { position: sticky; top: calc(var(--header-h) + 2rem); }
.smatch__wrap { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}
@media (min-width: 1200px) {
.sv-panel__top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.qa__list { grid-template-columns: repeat(4, 1fr); }
.qa__item { border-bottom: 1px solid var(--line); }
.qa__list:has(.qa__item:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 599px) {
.sbn-card__more-in { padding-left: 0; }
.sbn-card__btn { grid-template-columns: 2rem 1fr 1.5rem; gap: 0.75rem; }
}
.band-orange .btn--primary {
color: var(--brand-ink);
background: var(--brand-fill);
}
.band-orange .btn--primary:hover {
color: var(--brand-ink);
background: var(--brand-fill-hover);
}
.sv-h2 { font-weight: 700; }
.sv__tablist {
gap: 0.25rem;
padding: 0.5rem;
}
.sv-tab {
grid-template-columns: 44px 1fr auto;
gap: 0.9rem;
padding: 0.9rem 0.9rem 0.9rem 0.75rem;
border: 0;
border-radius: var(--r-sm, 10px);
transition: color 0.25s, background-color 0.3s var(--ease);
}
.sv-tab:last-of-type { border-bottom: 0; }
.sv-tab::before {
inset: 0.9rem auto 0.9rem 0;
width: 2px;
height: auto;
border-radius: 2px;
transform: scaleY(0);
transform-origin: 50% 0;
}
.sv-tab[aria-selected="true"]::before { transform: none; }
.sv-tab:hover { background: var(--surface-2); }
.sv-tab[aria-selected="true"] { background: var(--brand-soft); }
.sv-tab__ico {
margin-top: 0.05rem;
border-color: var(--line);
background: var(--surface-2);
color: var(--text-3);
transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
.sv-tab[aria-selected="true"] .sv-tab__ico {
border-color: color-mix(in srgb, var(--brand) 25%, transparent);
background: var(--brand-soft);
color: var(--brand-600);
}
.sv-tab__title { font-size: 1.08rem; font-weight: 700; }
.sv-tab__text > span { font-size: 0.86rem; }
.sv-tab__go { margin-top: 0.7rem; width: 16px; height: 16px; }
.sv-panel {
padding: clamp(1.5rem, 3vw, 2.5rem);
}
.sv-panel__title { font-weight: 700; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); }
.sv-panel__text { font-size: 1.05rem; }
.sv-panel__cols {
gap: 1rem;
margin-top: clamp(1.5rem, 3vw, 2rem);
padding-top: 0;
border-top: 0;
}
.sv-col {
padding: 1.25rem 1.35rem;
}
.sv-col__title { margin-bottom: 0.85rem; }
.sv-check li,
.sv-plain li { font-size: 0.93rem; }
.sv-plain li::before { background: var(--brand-600); }
.sv-panel__actions {
margin-top: clamp(1.5rem, 3vw, 2rem);
padding-top: 1.5rem;
border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
.sv__layout { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); align-items: start; }
.sv__tablist { position: sticky; top: calc(var(--header-h) + 1.25rem); }
.sv-panel__cols { grid-template-columns: 1.15fr 0.85fr; }
}
.sbn__head .eyebrow { color: var(--brand-600); }
.sbn__head .sv-btn-sm { border-color: var(--line-2); color: var(--text-2); }
.sbn__head .sv-btn-sm:hover { background: var(--surface-2); border-color: var(--text-3); color: var(--text); }
.sbn__list { gap: 0.75rem; }
.sbn-card { border-top: 0; }
.sbn-card:last-child { border-bottom: 0; }
.sbn-card__btn {
grid-template-columns: 44px 1fr 1.5rem;
padding: 1.1rem 1.25rem;
border-radius: inherit;
}
.sbn-card__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: inherit; }
.sbn-card__icon .icon { width: 20px; height: 20px; stroke-width: 1.75; }
.sbn-card__title { font-size: 1.08rem; font-weight: 700; }
.sbn-card__text { font-size: 0.9rem; }
.sbn-card__plus { color: var(--text-3); }
.sbn-card__more-in {
padding: 0 1.25rem 0 calc(44px + 2.25rem);
}
.sbn-card__more-in::after { height: 1.15rem; }
.sbn-card__more-in p { font-size: 0.92rem; }
.sbn-card__more-in b { color: var(--brand-600); }
@media (min-width: 900px) {
.sbn__wrap { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
.sbn__head { position: sticky; top: calc(var(--header-h) + 1.25rem); }
.sbn-card__more-in { grid-template-columns: 1fr 1fr; }
}
.sbn__tags { padding-top: 1.25rem; }
.sbn__tags .icon { color: var(--brand-600); }
.cmp__scroll {
border-top: 0;
padding: 0.25rem 0.75rem;
}
.cmp__table th,
.cmp__table td { padding: 0.9rem 0.75rem; }
.cmp__table tbody tr:last-child th,
.cmp__table tbody tr:last-child td { border-bottom: 0; }
.cmp__table thead th { font-size: 0.9rem; font-weight: 700; }
.cmp__table .is-col { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.cmp-mark--yes { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.cmp__legend { font-size: 0.84rem; }
.smatch__opts { gap: 0.6rem; margin-top: 1.75rem; }
.smatch__opt {
grid-template-columns: 44px 1fr 18px;
gap: 0.9rem;
padding: 0.9rem 1rem;
border: 1px solid var(--line);
border-radius: var(--r, 16px);
font-size: 1rem;
transition: color 0.25s, border-color 0.3s, background-color 0.3s, transform 0.35s var(--ease);
}
.smatch__opt:last-child { border-bottom: 1px solid var(--line); }
.smatch__opt-icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--line);
border-radius: var(--r-sm, 10px);
background: var(--surface-2);
color: var(--text-3);
transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
.smatch__opt-icon .icon { width: 20px; height: 20px; }
.smatch__opt:hover { border-color: var(--line-2); background: var(--surface-2); }
.smatch__opt[aria-pressed="true"] {
border-color: color-mix(in srgb, var(--brand) 45%, transparent);
background: var(--brand-soft);
}
.smatch__opt[aria-pressed="true"] .smatch__opt-icon {
border-color: color-mix(in srgb, var(--brand) 25%, transparent);
background: var(--surface);
color: var(--brand-600);
}
.smatch__opt[aria-pressed="true"] .smatch__opt-radio { box-shadow: inset 0 0 0 3px var(--surface); }
.smatch__opt:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.smatch__result {
padding: clamp(1.5rem, 3vw, 2.25rem);
}
.smatch__kicker { margin-top: 0; }
.smatch__ptitle { font-weight: 700; }
.smatch__note { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
@media (min-width: 900px) {
.smatch__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.sig-hero {
position: relative;
isolation: isolate;
padding: calc(var(--header-h) + clamp(1.75rem, 4.5vw, 3.25rem)) 0 clamp(1.75rem, 3.5vw, 2.75rem);
overflow: clip;
}
.sig-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(50% 55% at 8% 0%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 70%),
radial-gradient(38% 50% at 82% 30%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%),
radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 1.5px) 0 0 / 28px 28px;
-webkit-mask: linear-gradient(#000 55%, transparent);
mask: linear-gradient(#000 55%, transparent);
pointer-events: none;
}
.sig-hero__wrap {
display: grid;
gap: clamp(1.75rem, 4vw, 3rem);
align-items: center;
}
@media (min-width: 1020px) {
.sig-hero__wrap {
grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
gap: clamp(2.5rem, 4vw, 4rem);
}
}
.sig-hero__main { min-width: 0; }
.sig-hero__title {
margin: 0.9rem 0 0;
max-width: 14ch;
font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.4rem);
font-weight: 700;
line-height: var(--lh-head);
letter-spacing: var(--ls-head);
color: var(--text);
text-wrap: balance;
overflow-wrap: anywhere;
}
.sig-hero__lead {
max-width: 36rem;
margin: 1rem 0 0;
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--text-2);
text-wrap: pretty;
}
.sig-hero + .section { padding-top: clamp(2rem, 4vw, 3rem); }
.sig-fig {
min-width: 0;
margin: 0;
}
.sig-stage {
position: relative;
isolation: isolate;
aspect-ratio: 560 / 440;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--r-lg);
background:
radial-gradient(45% 45% at 50% 50%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%),
radial-gradient(60% 50% at 100% 100%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%),
radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 1.5px) 0 0 / 22px 22px,
var(--bg-2);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), var(--shadow-sm);
direction: ltr;
-webkit-user-select: none;
user-select: none;
}
.sig-stage::before {
content: "";
position: absolute;
inset: -1px;
z-index: 4;
padding: 1px;
border-radius: inherit;
background: linear-gradient(140deg, color-mix(in srgb, var(--brand) 70%, transparent), transparent 34%, transparent 66%, color-mix(in srgb, var(--accent) 45%, transparent));
-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);
pointer-events: none;
}
.sig-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.sig-core {
position: absolute;
left: 50%;
top: 50%;
z-index: 3;
display: grid;
place-items: center;
width: 22%;
aspect-ratio: 1;
border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line-2));
border-radius: 50%;
background: radial-gradient(circle at 50% 30%, var(--surface-3), var(--surface) 70%);
box-shadow: 0 0 0 6px color-mix(in srgb, var(--bg-2) 70%, transparent), 0 0 40px -6px var(--brand-glow);
color: var(--text);
transform: translate(-50%, -50%);
}
.sig-core .logo__svg { width: 58%; height: auto; }
.sig-core__pulse {
position: absolute;
inset: -1px;
border: 1.5px solid var(--brand);
border-radius: inherit;
opacity: 0;
pointer-events: none;
}
.sig-stage.is-ping .sig-core__pulse { animation: sig-ping 0.9s var(--ease-out); }
@keyframes sig-ping {
0% { opacity: 0.9; transform: scale(1); }
100% { opacity: 0; transform: scale(1.4); }
}
@keyframes sig-spin { to { transform: rotate(360deg); } }
.sig-node { cursor: pointer; transition: opacity 0.3s var(--ease); }
.sig-node__halo {
fill: none;
stroke: color-mix(in srgb, var(--brand) 55%, transparent);
stroke-width: 1;
opacity: 0;
transform-box: fill-box;
transform-origin: center;
transform: scale(0.8);
transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
}
.sig-node__dot {
fill: var(--surface);
stroke: color-mix(in srgb, var(--text-3) 60%, transparent);
stroke-width: 1.5;
transition: fill 0.3s var(--ease), stroke 0.3s var(--ease);
}
.sig-node__ico { color: var(--text-2); transition: color 0.3s var(--ease); }
.sig-node__label {
fill: var(--text-3);
font: 600 13px var(--font);
transition: fill 0.3s var(--ease);
}
.sig-node.is-on .sig-node__dot { stroke: color-mix(in srgb, var(--brand) 60%, transparent); }
.sig-node.is-on .sig-node__ico { color: var(--brand-600); }
.sig-node.is-hot .sig-node__dot {
fill: color-mix(in srgb, var(--brand) 16%, var(--surface));
stroke: var(--brand);
filter: drop-shadow(0 0 8px var(--brand-glow));
}
.sig-node.is-hot .sig-node__halo { opacity: 1; transform: none; }
.sig-node.is-hot .sig-node__ico { color: var(--brand-600); }
.sig-node.is-hot .sig-node__label { fill: var(--brand-600); }
.sig-stage[data-hot] .sig-node:not(.is-hot) { opacity: 0.6; }
.sig-cap {
margin-top: 0.6rem;
font: 500 0.7rem/1 var(--mono);
letter-spacing: 0.06em;
color: var(--text-3);
text-align: end;
}
@media (max-width: 1019.98px) {
.sig-fig { max-width: 40rem; }
.sig-cap { text-align: start; }
}
@media (max-width: 559.98px) {
.sig-node__label { font-size: 19px; }
}
.sig-stage.is-paused *,
.sig-stage.is-paused *::before,
.sig-stage.is-paused *::after { animation-play-state: paused !important; }
.svx-cards {
display: grid;
gap: 0.6rem;
margin: 1.5rem 0 0;
padding: 0;
list-style: none;
}
@media (min-width: 480px) {
.svx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.svx-cards__item { min-width: 0; }
.svx-card {
--mx: 50%;
--my: 50%;
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: 40px minmax(0, 1fr) 18px;
align-items: center;
gap: 0.8rem;
height: 100%;
padding: 0.8rem 0.95rem;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--surface);
color: var(--text);
text-decoration: none;
transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.35s var(--ease);
}
.svx-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(220px circle at var(--mx) var(--my), color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%);
opacity: var(--spot, 0);
transition: opacity 0.3s;
pointer-events: none;
}
.svx-card::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 2px;
background: var(--grad-brand);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s var(--ease);
}
[dir="rtl"] .svx-card::after { transform-origin: right; }
.svx-card:hover,
.svx-card:focus-visible,
.svx-card.is-hot {
border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}
.svx-card:hover::after,
.svx-card:focus-visible::after,
.svx-card.is-hot::after { transform: scaleX(1); }
.svx-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
.svx-card:hover { transform: translateY(-2px); }
}
.svx-card__ico {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
border-radius: var(--r-sm);
background: var(--brand-soft);
color: var(--brand-600);
transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.svx-card__ico .icon { width: 19px; height: 19px; }
.svx-card:hover .svx-card__ico,
.svx-card:focus-visible .svx-card__ico,
.svx-card.is-hot .svx-card__ico {
background: var(--brand-fill);
color: var(--brand-ink);
}
.svx-card__title {
min-width: 0;
font: 600 0.98rem/1.25 var(--font);
overflow-wrap: anywhere;
}
.svx-card__go { color: var(--text-3); transition: color 0.3s var(--ease), transform 0.3s var(--ease); }
.svx-card__go .icon { width: 17px; height: 17px; }
.svx-card:hover .svx-card__go,
.svx-card:focus-visible .svx-card__go { color: var(--brand-600); transform: translateY(2px); }
.svx__orbit { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 7; }
.svx__inner { fill: none; stroke: var(--line); stroke-width: 1; }
.svx__spin {
transform-box: view-box;
transform-origin: 280px 220px;
animation: sig-spin 60s linear infinite;
}
.svx__ring { fill: none; stroke: color-mix(in srgb, var(--text-3) 40%, transparent); stroke-width: 1.2; stroke-dasharray: 1 9; }
.svx__quad {
fill: none;
stroke: color-mix(in srgb, var(--text-3) 35%, transparent);
stroke-width: 2;
stroke-linecap: round;
transition: stroke 0.35s var(--ease), stroke-width 0.35s var(--ease);
}
.svx__quad.is-on { stroke: color-mix(in srgb, var(--brand) 45%, transparent); }
.svx__quad.is-hot {
stroke: var(--brand);
stroke-width: 3;
filter: drop-shadow(0 0 6px var(--brand-glow));
}
.svx__link { transition: opacity 0.3s var(--ease); }
.svx__line {
fill: none;
stroke: color-mix(in srgb, var(--text-3) 70%, transparent);
stroke-width: 1;
stroke-dasharray: 3 5;
transition: stroke 0.3s var(--ease);
}
.svx__flow {
fill: none;
stroke: var(--brand);
stroke-width: 3.6;
stroke-linecap: round;
stroke-dasharray: 0 12.5;
opacity: 0.22;
animation: svx-dots 3.6s linear infinite;
transition: opacity 0.3s var(--ease);
}
.svx__beam {
fill: none;
stroke: var(--brand);
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 16 84;
stroke-dashoffset: 100;
opacity: 0;
transition: opacity 0.3s var(--ease);
}
@keyframes svx-dots { to { stroke-dashoffset: -25; } }
@keyframes svx-beam { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.sig-stage[data-hot] .svx__link:not(.is-hot) { opacity: 0.4; }
.svx__link.is-hot .svx__line { stroke: color-mix(in srgb, var(--brand) 70%, transparent); }
.svx__link.is-hot .svx__flow { opacity: 1; animation-duration: 0.9s; filter: drop-shadow(0 0 3px var(--brand)); }
.svx__link.is-hot .svx__beam { opacity: 1; animation: svx-beam 1.05s linear infinite; filter: drop-shadow(0 0 5px var(--brand-glow)); }
.svx-core__sweep {
position: absolute;
inset: 3px;
border-radius: 50%;
background: conic-gradient(from 0deg, transparent 0 62%, color-mix(in srgb, var(--brand) 55%, transparent) 100%);
-webkit-mask: radial-gradient(circle, transparent 60%, #000 62%);
mask: radial-gradient(circle, transparent 60%, #000 62%);
opacity: 0;
transition: opacity 0.35s var(--ease);
animation: sig-spin 2.4s linear infinite;
pointer-events: none;
}
.sig-stage[data-hot] .svx-core__sweep { opacity: 1; }
.svx-core__logo {
display: grid;
place-items: center;
width: 100%;
transition: opacity 0.3s var(--ease), transform 0.45s var(--ease);
}
.sig-stage[data-hot] .svx-core__logo { opacity: 0; transform: scale(0.6); }
.svx-glyph {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.2rem;
opacity: 0;
transform: scale(0.7);
transition: opacity 0.3s var(--ease), transform 0.45s var(--ease-out);
pointer-events: none;
}
.svx-glyph.is-hot { opacity: 1; transform: none; }
.svx-glyph__art {
width: 44%;
height: auto;
fill: none;
stroke: var(--brand-600);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
}
.svx-glyph__tag {
max-width: 86%;
font: 600 0.62rem/1.1 var(--mono);
letter-spacing: 0.05em;
text-align: center;
text-transform: uppercase;
color: var(--text-2);
overflow-wrap: anywhere;
}
.svx-glyph__art .g-frame { stroke: color-mix(in srgb, var(--text-2) 80%, transparent); }
.svx-glyph__art .g-b,
.svx-glyph__art .g-w,
.svx-glyph__art .g-p { fill: color-mix(in srgb, var(--brand) 22%, transparent); transform-box: fill-box; transform-origin: center; }
.svx-glyph__art .g-p4 { fill: var(--brand); }
.svx-glyph__art .g-s { stroke-dasharray: 1; stroke-dashoffset: 0; }
.svx-glyph.is-hot .g-b { animation: svx-pop 2.4s var(--ease-out) infinite; }
.svx-glyph.is-hot .g-b2 { animation-delay: 0.18s; }
.svx-glyph.is-hot .g-b3 { animation-delay: 0.36s; }
.svx-glyph.is-hot .g-l { animation: svx-code-l 1.6s var(--ease-io) infinite; }
.svx-glyph.is-hot .g-r { animation: svx-code-r 1.6s var(--ease-io) infinite; }
.svx-glyph.is-hot .g-s { animation: svx-draw 1.6s var(--ease-out) infinite; }
.svx-glyph.is-hot .g-w { animation: svx-win 2.4s linear infinite; }
.svx-glyph.is-hot .g-w1 { animation-delay: 0.3s; }
.svx-glyph.is-hot .g-w2 { animation-delay: 0.6s; }
.svx-glyph.is-hot .g-w3 { animation-delay: 0.9s; }
.svx-glyph.is-hot .g-w4 { animation-delay: 1.2s; }
.svx-glyph.is-hot .g-w5 { animation-delay: 1.5s; }
.svx-glyph.is-hot .g-p4 { animation: svx-snap 2s var(--ease-out) infinite; }
@keyframes svx-pop {
0% { opacity: 0; transform: scale(0.3); }
22%, 82% { opacity: 1; transform: none; }
100% { opacity: 0; transform: none; }
}
@keyframes svx-code-l { 0%, 100% { transform: none; } 50% { transform: translateX(-3px); } }
@keyframes svx-code-r { 0%, 100% { transform: none; } 50% { transform: translateX(3px); } }
@keyframes svx-draw { 0% { stroke-dashoffset: 1; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes svx-win {
0%, 100% { fill: color-mix(in srgb, var(--brand) 18%, transparent); }
12%, 40% { fill: var(--brand); }
}
@keyframes svx-snap {
0% { opacity: 0; transform: translate(9px, 9px) rotate(14deg); }
35%, 85% { opacity: 1; transform: none; }
100% { opacity: 1; transform: none; }
}
html[data-motion="calm"] .svx__spin { animation-duration: 140s; }
html[data-motion="calm"] .sig-stage:not([data-hot]) .svx__flow { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.sig-stage *,
.sig-stage *::before,
.sig-stage *::after,
.sig-stage.is-ping .sig-core__pulse { animation: none !important; }
.sig-stage *,
.svx-card { transition: none !important; }
.svx__flow { opacity: 0 !important; }
.svx__beam { stroke-dasharray: none; }
.svx-core__sweep { display: none; }
}
html[data-motion="off"] .sig-stage *,
html[data-motion="off"] .sig-stage *::before,
html[data-motion="off"] .sig-stage *::after,
html[data-motion="off"] .sig-stage.is-ping .sig-core__pulse { animation: none !important; }
html[data-motion="off"] .sig-stage *,
html[data-motion="off"] .svx-card { transition: none !important; }
html[data-motion="off"] .svx__flow { opacity: 0 !important; }
html[data-motion="off"] .svx__beam { stroke-dasharray: none; }
html[data-motion="off"] .svx-core__sweep { display: none; }
.sig-hero .crumbs { display: flex; width: fit-content; }
.svx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 479.98px) {
.svx-card { grid-template-columns: 30px minmax(0, 1fr); gap: 0.6rem; padding: 0.65rem 0.7rem; }
.svx-card__ico { width: 30px; height: 30px; }
.svx-card__ico .icon { width: 16px; height: 16px; }
.svx-card__title { font-size: 0.86rem; }
.svx-card__go { display: none; }
}
@media (max-width: 599.98px) {
.sig-hero { padding-bottom: 1.25rem; }
.sig-hero + .section { padding-top: 1.75rem; }
}

/* css/front/tech-band.css */

.tband {
--tband-h: 64px;
--tband-gap: 2.75rem;
--tband-tile: color-mix(in srgb, var(--surface) 72%, var(--bg));
position: relative;
isolation: isolate;
overflow: hidden;
scroll-margin-top: calc(var(--header-h, 72px) + 1rem);
padding-block: clamp(1rem, 2vw, 1.5rem);
border-top: 1px solid var(--line);
background: var(--bg);
color: var(--text-3);
}
.tband::before {
content: "";
position: absolute;
inset-inline: 0;
top: 50%;
z-index: -1;
height: 1px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 22%, transparent) 30%, color-mix(in srgb, var(--brand) 22%, transparent) 70%, transparent);
opacity: 0.5;
}
.tband__viewport {
direction: ltr;
overflow: hidden;
padding-block: 6px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.tband__track {
display: flex;
width: max-content;
animation: tband-scroll var(--tband-dur, 48s) linear infinite;
will-change: transform;
}
.tband.is-paused .tband__track {
animation-play-state: paused;
}
@keyframes tband-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(var(--tband-shift, -50%), 0, 0); }
}
.tband__list {
display: flex;
flex: none;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.tband__item {
display: flex;
flex: none;
align-items: center;
}
.tband__tile {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.7rem;
height: var(--tband-h);
min-width: 9.5rem;
padding-inline: 1.15rem 1.35rem;
justify-content: center;
border: 1px solid transparent;
border-radius: 14px;
background:
linear-gradient(var(--tband-tile), var(--tband-tile)) padding-box,
linear-gradient(160deg, var(--line-2), var(--line) 45%, color-mix(in srgb, var(--brand) 16%, var(--line)) 100%) border-box;
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
color: var(--text-3);
transition: transform 0.45s var(--ease-out), color 0.3s var(--ease), box-shadow 0.45s var(--ease-out);
}
.tband__tile::after {
content: "";
position: absolute;
inset: -1px;
border: 1px solid color-mix(in srgb, var(--brand) 55%, transparent);
border-radius: inherit;
background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%);
opacity: 0;
pointer-events: none;
transition: opacity 0.4s var(--ease);
}
.tband__glyph {
position: relative;
flex: none;
width: 28px;
height: 28px;
opacity: 0.85;
transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.tband__name {
position: relative;
font-family: var(--font);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1;
white-space: nowrap;
color: var(--text-2);
opacity: 0.8;
transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.tband__mono {
position: relative;
display: inline-grid;
flex: none;
place-items: center;
width: 28px;
height: 28px;
border: 1px solid var(--line-2);
border-radius: 8px;
background: linear-gradient(150deg, color-mix(in srgb, var(--text) 8%, transparent), transparent 70%);
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--text-2);
transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.tband__mono::after {
content: "";
position: absolute;
inset-block-end: -3px;
inset-inline-end: -3px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand);
opacity: 0.55;
}
.tband__wire {
position: relative;
flex: none;
width: var(--tband-gap);
height: 2px;
background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-3) 55%, transparent) 0 3px, transparent 3px 7px);
}
.tband__wire::before,
.tband__wire::after {
content: "";
position: absolute;
top: 50%;
width: 5px;
height: 5px;
margin-top: -2.5px;
border-radius: 50%;
background: var(--tband-tile);
box-shadow: 0 0 0 1px var(--line-2);
}
.tband__wire::before { left: -3px; }
.tband__wire::after { right: -3px; }
.tband__wire > i {
position: absolute;
top: 50%;
left: 0;
width: 16px;
height: 3px;
margin-top: -1.5px;
border-radius: 3px;
background: linear-gradient(90deg, transparent, var(--brand) 70%, var(--accent));
box-shadow: 0 0 8px var(--brand-glow);
opacity: 0;
}
.tband__item.is-pulse .tband__wire > i {
animation: tband-hop 0.8s var(--ease-io) both;
}
.tband__item.is-pulse .tband__wire::before {
animation: tband-port 0.8s var(--ease) both;
}
@keyframes tband-hop {
0% { opacity: 0; transform: translate3d(-4px, 0, 0); }
20% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; transform: translate3d(calc(var(--tband-gap) - 12px), 0, 0); }
}
@keyframes tband-port {
0%, 100% { background: var(--tband-tile); }
25% { background: var(--brand); }
}
.tband__item.is-recv .tband__tile::after {
animation: tband-recv 1.3s var(--ease);
}
.tband__item.is-recv .tband__glyph,
.tband__item.is-recv .tband__mono {
animation: tband-recv-ink 1.3s var(--ease);
}
@keyframes tband-recv {
0% { opacity: 0; }
25% { opacity: 0.7; }
100% { opacity: 0; }
}
@keyframes tband-recv-ink {
0%, 100% { color: var(--text-3); }
25% { color: var(--brand-600); }
}
@media (hover: hover) and (pointer: fine) {
.tband:hover .tband__track {
animation-play-state: paused;
}
.tband__tile:hover {
transform: translate3d(0, -3px, 0);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent), var(--shadow-glow);
}
.tband__tile:hover::after {
opacity: 1;
}
.tband__tile:hover .tband__glyph {
color: var(--brand);
opacity: 1;
}
.tband__tile:hover .tband__mono {
border-color: color-mix(in srgb, var(--brand) 55%, transparent);
color: var(--brand-600);
}
.tband__tile:hover .tband__name {
color: var(--text);
opacity: 1;
}
}
.tband:focus-within .tband__track {
animation-play-state: paused;
}
.tband__toggle {
position: absolute;
top: 50%;
inset-inline-end: 0.6rem;
z-index: 2;
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
margin-top: -15px;
padding: 0;
border: 1px solid var(--line-2);
border-radius: 50%;
background: var(--surface);
color: var(--text-2);
cursor: pointer;
opacity: 0.7;
transition: opacity 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.tband__toggle[hidden] {
display: none;
}
.tband__toggle:hover,
.tband__toggle:focus-visible {
opacity: 1;
color: var(--brand-600);
border-color: color-mix(in srgb, var(--brand) 50%, transparent);
}
.tband__toggle:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.tband__ico-play,
.tband__toggle[aria-pressed="true"] .tband__ico-pause {
display: none;
}
.tband__toggle[aria-pressed="true"] .tband__ico-play {
display: inline;
}
@media (max-width: 600px) {
.tband {
--tband-h: 50px;
--tband-gap: 1.5rem;
padding-block: 1rem;
}
.tband__tile {
min-width: 7.25rem;
gap: 0.5rem;
padding-inline: 0.8rem 0.95rem;
border-radius: 11px;
}
.tband__glyph,
.tband__mono {
width: 22px;
height: 22px;
}
.tband__mono {
border-radius: 6px;
font-size: 0.6rem;
}
.tband__name {
font-size: 0.8rem;
}
.tband__viewport {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.tband__toggle {
width: 26px;
height: 26px;
margin-top: -13px;
}
}
@media (prefers-reduced-motion: reduce) {
.tband__track { width: auto; animation: none; transform: none; will-change: auto; }
.tband__list { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: 0.75rem; padding-inline: var(--gutter); }
.tband__list--clone, .tband__wire, .tband__toggle, .tband::before { display: none; }
.tband__viewport { -webkit-mask-image: none; mask-image: none; }
.tband__tile, .tband__tile::after, .tband__glyph, .tband__name { transition: none; }
}
html[data-motion="off"] .tband__track { width: auto; animation: none; transform: none; will-change: auto; }
html[data-motion="off"] .tband__list { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: 0.75rem; padding-inline: var(--gutter); }
html[data-motion="off"] .tband__list--clone,
html[data-motion="off"] .tband__wire,
html[data-motion="off"] .tband__toggle,
html[data-motion="off"] .tband::before { display: none; }
html[data-motion="off"] .tband__viewport { -webkit-mask-image: none; mask-image: none; }

/* css/front/theme-compat.css */

:root,
.band-dark,
.sec-ink,
.band-light,
.band-orange {
--ink: var(--text);
--ink-soft: color-mix(in oklab, var(--text) 86%, var(--text-2));
--muted: var(--text-2);
--faint: var(--text-3);
--bg-soft: var(--surface);
--brand-50: var(--brand-soft);
--brand-100: var(--brand-soft-2);
--brand-200: color-mix(in oklab, var(--brand) 36%, var(--surface));
--brand-300: color-mix(in oklab, var(--brand) 60%, var(--surface));
--accent-amber: var(--accent);
--accent-amber-soft: var(--accent-soft);
--accent-teal: var(--ok);
--accent-teal-soft: var(--ok-soft);
--accent-rose: var(--danger);
--accent-rose-soft: var(--danger-soft);
--accent-sky: var(--info);
--accent-sky-soft: color-mix(in oklab, var(--info) 14%, var(--surface));
}
:root[data-theme="light"],
.band-light {
--ink-soft: color-mix(in oklab, var(--text) 80%, #fff);
}
.band-orange ::selection {
background: var(--selection);
color: var(--text);
}
:root:not([data-theme="light"]) .chip,
:root:not([data-theme="light"]) .sel__frame i,
:root:not([data-theme="light"]) .marquee__sq,
:root:not([data-theme="light"]) .kvkk-apply,
:root:not([data-theme="light"]) .window__screen,
:root:not([data-theme="light"]) .window__select .h,
:root:not([data-theme="light"]) .filter,
:root:not([data-theme="light"]) .service,
:root:not([data-theme="light"]) .ill,
:root:not([data-theme="light"]) .ill__bar,
:root:not([data-theme="light"]) .ill__handles i,
:root:not([data-theme="light"]) .ill__row i,
:root:not([data-theme="light"]) .ill .ill__page,
:root:not([data-theme="light"]) .ill .ill__page--back,
:root:not([data-theme="light"]) .ill__nav,
:root:not([data-theme="light"]) .ill__cols u,
:root:not([data-theme="light"]) .ill__toggle::after,
:root:not([data-theme="light"]) .principles__list li,
:root:not([data-theme="light"]) .bizcard,
:root:not([data-theme="light"]) .channel,
:root:not([data-theme="light"]) .form,
:root:not([data-theme="light"]) .field__input:focus,
:root:not([data-theme="light"]) .check__box,
:root:not([data-theme="light"]) .glance__item,
:root:not([data-theme="light"]) .journey__icon,
:root:not([data-theme="light"]) .nfp__code,
:root:not([data-theme="light"]) .nfp__path-value,
:root:not([data-theme="light"]) .nfp__search,
:root:not([data-theme="light"]) .nfp__input:focus,
:root:not([data-theme="light"]) .hdev__screen {
background: var(--surface);
}
:root:not([data-theme="light"]) .filter[aria-pressed="true"],
:root:not([data-theme="light"]) .ill--code,
:root:not([data-theme="light"]) .ill__tabs i,
:root:not([data-theme="light"]) .ill__tabs i:first-child,
:root:not([data-theme="light"]) .avatar,
:root:not([data-theme="light"]) .mac__display::before,
:root:not([data-theme="light"]) .mac__screen,
:root:not([data-theme="light"]) .hdev__notch {
background: var(--surface-3);
}
:root:not([data-theme="light"]) .sel__tag,
:root:not([data-theme="light"]) .window__tag,
:root:not([data-theme="light"]) .check__input:checked + .check__box,
:root:not([data-theme="light"]) .nfp__code b {
background: var(--brand-fill);
}
:root:not([data-theme="light"]) .field__input[aria-invalid="true"],
:root:not([data-theme="light"]) .check__input[aria-invalid="true"] + .check__box {
border-color: var(--danger);
}
:root:not([data-theme="light"]) .mac__wall {
background: linear-gradient(to right, rgb(255 255 255 / 0.28) 1px, transparent 1px) 0 0 / 6cqw 6cqw,
linear-gradient(to bottom, rgb(255 255 255 / 0.28) 1px, transparent 1px) 0 0 / 6cqw 6cqw,
color-mix(in srgb, var(--brand) 22%, var(--bg-2));
}
:root:not([data-theme="light"]) .mac__menubar {
color: var(--text);
background: var(--surface);
}

/* css/front/theme-lamp.css */

.lamp {
--lamp-glass: #261710;
--lamp-glass-line: #7d6757;
--lamp-metal: #a89483;
--lamp-fil: #8b7565;
--lamp-wire: #6d5a4d;
position: relative;
z-index: 3;
flex: none;
width: 44px;
height: var(--header-h);
margin: 0 -0.35rem 0 0.15rem;
padding: 0;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--text);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
-webkit-appearance: none;
appearance: none;
}
.lamp:hover,
.lamp:active,
.lamp:focus {
background: transparent;
box-shadow: none;
outline: none;
}
.lamp:focus-visible .lamp__glass {
stroke: var(--brand);
stroke-width: 2.6;
}
.lamp:focus-visible .lamp__svg {
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--brand) 70%, transparent));
}
.lamp__rail {
position: absolute;
top: -51px;
left: 50%;
width: 72px;
height: 124px;
margin-left: -36px;
transition: transform 0.55s var(--ease);
}
.lamp__swing {
display: block;
width: 100%;
height: 100%;
transform-origin: 50% 0;
}
.lamp__svg {
display: block;
width: 72px;
height: 124px;
overflow: visible;
}
.lamp__cord {
stroke: var(--lamp-metal);
stroke-width: 1.5;
fill: none;
opacity: 0.8;
}
.lamp__socket {
fill: var(--lamp-metal);
}
.lamp__thread {
stroke: var(--lamp-glass);
stroke-width: 1.2;
fill: none;
opacity: 0.55;
}
.lamp__glass {
fill: var(--lamp-glass);
stroke: var(--lamp-glass-line);
stroke-width: 1.6;
stroke-linejoin: round;
transition: fill 0.4s, stroke 0.4s;
}
.lamp__wire {
fill: none;
stroke: var(--lamp-wire);
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.4s;
}
.lamp__fil path {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.lamp__fil-line {
stroke: var(--lamp-fil);
stroke-width: 2.1;
transition: stroke 0.4s;
}
.lamp__fil-glow {
stroke: var(--brand);
stroke-width: 6;
opacity: 0;
transition: opacity 0.4s;
}
.lamp__shine {
fill: none;
stroke: #fff;
stroke-width: 1.6;
stroke-linecap: round;
opacity: 0.18;
}
.lamp__rays path {
fill: none;
stroke: var(--brand);
stroke-width: 1.8;
stroke-linecap: round;
}
.lamp__rays {
opacity: 0;
transition: opacity 0.35s;
}
.lamp__s0 { stop-color: var(--brand); stop-opacity: 1; }
.lamp__s1 { stop-color: var(--brand); stop-opacity: 0; }
.lamp__cone {
fill: url(#lampCone);
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
:root[data-theme="light"] .lamp {
--lamp-glass: #ffe7ae;
--lamp-glass-line: var(--brand-600);
--lamp-metal: #6f5a49;
--lamp-fil: var(--brand);
--lamp-wire: #b8864f;
}
:root[data-theme="light"] .lamp__fil-glow {
opacity: 0.28;
}
:root[data-theme="light"] .lamp__rays {
opacity: 0.9;
}
:root[data-theme="light"] .lamp__shine {
opacity: 0.7;
}
:root[data-theme="light"] .lamp__cone {
opacity: 0.2;
}
@media (min-width: 900px) {
.lamp {
overflow: visible;
width: 48px;
}
.lamp__rail {
top: -2px;
}
.nav.is-scrolled .lamp__rail {
transform: translateY(-44px);
}
.nav.is-scrolled .lamp__cone {
opacity: 0;
}
.lamp:hover .lamp__rail:not(.is-pulling) {
transform: translateY(3px);
}
.nav.is-scrolled .lamp:hover .lamp__rail {
transform: translateY(-40px);
}
}
@media (max-width: 899px) {
.lamp__rays,
.lamp__cone {
display: none;
}
}
.lamp.is-pulling .lamp__rail {
animation: lamp-pull 0.85s var(--ease) both;
}
.lamp.is-pulling .lamp__swing {
animation: lamp-swing 1.7s var(--ease-io) both;
}
@keyframes lamp-pull {
0% { translate: 0 0; }
22% { translate: 0 16px; }
48% { translate: 0 -5px; }
72% { translate: 0 3px; }
100% { translate: 0 0; }
}
@keyframes lamp-swing {
0% { transform: rotate(0deg); }
18% { transform: rotate(7deg); }
42% { transform: rotate(-5deg); }
64% { transform: rotate(3deg); }
82% { transform: rotate(-1.4deg); }
100% { transform: rotate(0deg); }
}
html[data-motion="full"][data-theme="light"] .lamp__fil-glow {
animation: lamp-pulse 3.2s ease-in-out infinite;
}
@keyframes lamp-pulse {
0%, 100% { opacity: 0.18; }
50% { opacity: 0.36; }
}
@media (prefers-reduced-motion: reduce) {
.lamp__rail,
.lamp__glass,
.lamp__fil-line,
.lamp__fil-glow,
.lamp__rays,
.lamp__cone {
transition: none;
}
.lamp.is-pulling .lamp__rail,
.lamp.is-pulling .lamp__swing,
html[data-theme="light"] .lamp__fil-glow {
animation: none;
}
}
html[data-motion="off"] .lamp__rail,
html[data-motion="off"] .lamp__glass,
html[data-motion="off"] .lamp__fil-line,
html[data-motion="off"] .lamp__fil-glow,
html[data-motion="off"] .lamp__rays,
html[data-motion="off"] .lamp__cone {
transition: none;
}
html[data-motion="off"] .lamp.is-pulling .lamp__rail,
html[data-motion="off"] .lamp.is-pulling .lamp__swing,
html[data-motion="off"][data-theme="light"] .lamp__fil-glow {
animation: none;
}

/* css/front/welcome.css */

.welcome {
width: min(31rem, calc(100% - 2rem));
max-width: none;
max-height: calc(100dvh - 2rem);
margin: auto;
padding: 0;
overflow: visible;
border: 0;
background: transparent;
color: var(--text);
}
.welcome::backdrop {
background: rgb(10 5 2 / 0.7);
}
.welcome[open]::backdrop {
animation: welcome-fade 0.45s var(--ease) both;
}
.welcome.is-closing::backdrop {
animation: welcome-fade 0.25s var(--ease) reverse both;
}
.welcome__panel {
position: relative;
max-height: calc(100dvh - 2rem);
padding: clamp(1.5rem, 4vw, 2.25rem);
overflow: auto;
border: 1px solid var(--line-2);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-md);
}
.welcome__panel::before {
content: "";
position: absolute;
top: -1px;
right: 2rem;
left: 2rem;
height: 2px;
background: var(--brand);
transform-origin: 0 50%;
}
.welcome[open] .welcome__panel {
animation: welcome-in 0.6s var(--ease) both;
}
.welcome[open] .welcome__panel::before {
animation: welcome-draw 0.9s var(--ease) 0.25s both;
}
.welcome.is-closing .welcome__panel {
animation: welcome-out 0.25s var(--ease) both;
}
.welcome__close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
display: grid;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--text-2);
background: transparent;
transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.3s var(--ease);
}
.welcome__close:hover,
.welcome__close:focus-visible {
color: var(--text);
background: var(--surface-2);
border-color: var(--line-2);
transform: rotate(90deg);
}
.welcome__close .icon {
width: 18px;
height: 18px;
}
.welcome__eyebrow {
margin-bottom: 0.9rem;
}
.welcome__eyebrow::before {
display: none;
}
.welcome__dot {
position: relative;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--brand);
}
.welcome__dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--brand);
animation: ping 2.4s var(--ease) infinite;
}
.welcome__title {
max-width: 14em;
margin-bottom: 0.75rem;
font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
font-weight: 650;
line-height: 1.08;
letter-spacing: var(--ls-head);
color: var(--text);
}
.welcome__text {
margin-bottom: 1.5rem;
max-width: 30em;
font-size: 1rem;
line-height: 1.55;
color: var(--text-2);
}
.welcome__actions {
display: grid;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--line);
}
.welcome__act {
position: relative;
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.95rem 0.25rem;
overflow: hidden;
border-bottom: 1px solid var(--line);
color: var(--text);
text-decoration: none;
transition: color 0.2s, padding 0.3s var(--ease), background-color 0.2s;
--flame-inset: 0.25rem;
--flame-bottom: 0px;
--flame-h: 10px;
}
.welcome__act:hover,
.welcome__act:focus-visible {
padding-inline: 0.7rem;
background: var(--surface-2);
}
.welcome__ico {
flex: none;
width: 22px;
height: 22px;
color: var(--brand-600);
}
.welcome__act-text {
display: grid;
gap: 0.1rem;
min-width: 0;
flex: 1;
}
.welcome__act-label {
font-size: 1.02rem;
font-weight: 650;
letter-spacing: -0.01em;
line-height: 1.25;
}
.welcome__act-sub {
font-size: 0.84rem;
line-height: 1.3;
color: var(--text-2);
}
.welcome__arrow {
flex: none;
width: 18px;
height: 18px;
color: var(--text-3);
transition: transform 0.3s var(--ease), color 0.2s;
}
.welcome__act:hover .welcome__arrow,
.welcome__act:focus-visible .welcome__arrow {
color: var(--brand-600);
transform: translateX(3px);
}
.welcome__act--primary {
margin-bottom: 0.75rem;
padding: 0.95rem 1.1rem;
border: 0;
border-radius: var(--radius-sm);
color: #fff;
background: color-mix(in srgb, var(--brand) 76%, #000);
--flame-color: #ffd36b;
--flame-tip: #fff3c4;
--flame-inset: 10%;
}
.welcome__act--primary:hover,
.welcome__act--primary:focus-visible {
padding-inline: 1.1rem;
background: color-mix(in srgb, var(--brand) 68%, #000);
}
.welcome__act--primary .welcome__ico,
.welcome__act--primary .welcome__arrow,
.welcome__act--primary .welcome__act-sub {
color: var(--brand-ink);
}
.welcome__act--primary .welcome__act-label,
.welcome__act--primary .welcome__act-sub {
color: #fff;
opacity: 1;
}
.welcome__act--primary:hover .welcome__arrow {
color: var(--brand-ink);
transform: translate(2px, -2px);
}
.welcome[open] .welcome__actions > li {
animation: welcome-row 0.55s var(--ease) both;
}
.welcome[open] .welcome__actions > li:nth-child(1) { animation-delay: 0.3s; }
.welcome[open] .welcome__actions > li:nth-child(2) { animation-delay: 0.38s; }
.welcome[open] .welcome__actions > li:nth-child(3) { animation-delay: 0.46s; }
@keyframes welcome-fade {
from { opacity: 0; }
}
@keyframes welcome-in {
from {
opacity: 0;
transform: translate3d(0, 28px, 0) scale(0.97);
}
}
@keyframes welcome-out {
to {
opacity: 0;
transform: translate3d(0, 14px, 0) scale(0.98);
}
}
@keyframes welcome-draw {
from { transform: scaleX(0); }
}
@keyframes welcome-row {
from {
opacity: 0;
transform: translate3d(0, 10px, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.welcome[open]::backdrop,
.welcome[open] .welcome__panel,
.welcome[open] .welcome__panel::before,
.welcome[open] .welcome__actions > li,
.welcome.is-closing::backdrop,
.welcome.is-closing .welcome__panel,
.welcome__dot::after {
animation: none;
}
}
html[data-motion="off"] .welcome[open]::backdrop,
html[data-motion="off"] .welcome[open] .welcome__panel,
html[data-motion="off"] .welcome[open] .welcome__panel::before,
html[data-motion="off"] .welcome[open] .welcome__actions > li,
html[data-motion="off"] .welcome.is-closing::backdrop,
html[data-motion="off"] .welcome.is-closing .welcome__panel,
html[data-motion="off"] .welcome__dot::after {
animation: none;
}
html[data-motion="calm"] .welcome__dot::after {
animation: none;
}
@media print {
.welcome {
display: none !important;
}
}

/* css/front/world.css */

:root {
--wm-y: #ffd23f;
--wm-r: #ff3b5c;
--wm-g: #2bd67b;
--wm-c: #36c5f0;
--wm-v: #a77bff;
--wm-p: #ff6bd6;
--wm-o: var(--brand);
}
:root[data-theme="light"] {
--wm-y: #d99a00;
--wm-r: #e3203f;
--wm-g: #0f9d55;
--wm-c: #0b94c7;
--wm-v: #7246f0;
--wm-p: #d23597;
}
.wm-map {
position: relative;
aspect-ratio: 1200 / 463;
direction: ltr;
}
.wm-dots,
.wm-aurora {
position: absolute;
inset: 0;
-webkit-mask: url("../../img/world-dots.svg") center / 100% 100% no-repeat;
mask: url("../../img/world-dots.svg") center / 100% 100% no-repeat;
}
.wm-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.wm-home {
position: relative;
overflow: hidden;
}
.wm-home::before {
content: "";
position: absolute;
inset: 10% -10% auto;
height: 70%;
background:
radial-gradient(40% 50% at 30% 50%, color-mix(in srgb, var(--wm-c) 9%, transparent), transparent 70%),
radial-gradient(35% 45% at 70% 40%, color-mix(in srgb, var(--wm-v) 9%, transparent), transparent 70%),
radial-gradient(30% 40% at 58% 60%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%);
pointer-events: none;
}
.wm-home > .container { position: relative; }
.wm-home__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.wm-home__grad {
background: linear-gradient(90deg, var(--wm-y), var(--brand) 30%, var(--wm-r) 55%, var(--wm-v) 80%, var(--wm-c));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.wm-stage {
position: relative;
padding: clamp(0.75rem, 2vw, 1.75rem);
border: 1px solid var(--line);
border-radius: var(--radius-lg, 24px);
background:
radial-gradient(70% 90% at 58% 30%, color-mix(in srgb, var(--brand) 6%, transparent), transparent 70%),
var(--surface);
overflow: hidden;
}
.wm-dots {
background: color-mix(in srgb, var(--text-3) 55%, transparent);
}
:root[data-theme="light"] .wm-dots { background: color-mix(in srgb, var(--text-3) 45%, transparent); }
.wm-aurora { overflow: hidden; opacity: 0.62; }
.wm-aurora i {
position: absolute;
inset: 0 auto 0 0;
width: 300%;
background: linear-gradient(100deg,
transparent 0 18%,
var(--wm-y) 24%, var(--brand) 28%, var(--wm-r) 32%, transparent 38% 52%,
var(--wm-g) 58%, var(--wm-c) 62%, var(--wm-v) 66%, transparent 72% 100%);
transform: translateX(-66.66%);
animation: wm-aurora 16s linear infinite;
will-change: transform;
}
@keyframes wm-aurora {
from { transform: translateX(-66.66%); }
to { transform: translateX(0); }
}
.wm-tr circle { fill: var(--brand); }
.wm-tr { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--brand) 70%, transparent)); }
.wm-route { --rc: var(--wm-o); }
.wm-c-y { --rc: var(--wm-y); }
.wm-c-r { --rc: var(--wm-r); }
.wm-c-g { --rc: var(--wm-g); }
.wm-c-c { --rc: var(--wm-c); }
.wm-c-v { --rc: var(--wm-v); }
.wm-c-p { --rc: var(--wm-p); }
.wm-c-o { --rc: var(--wm-o); }
.wm-route path { fill: none; stroke-linecap: round; }
.wm-route__base {
stroke: color-mix(in srgb, var(--rc) 34%, transparent);
stroke-width: 1.1;
stroke-dasharray: 1 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset 1.6s var(--ease-out), stroke 0.3s;
transition-delay: calc(var(--k, 0) * 0.06s);
}
.wm-map.is-in .wm-route__base { stroke-dashoffset: 0; }
.wm-route__head,
.wm-route__glow {
stroke: var(--rc);
stroke-dasharray: 0.09 3;
stroke-dashoffset: 0.09;
opacity: 0;
}
.wm-route__head { stroke-width: 2.4; }
.wm-route__glow { stroke-width: 7; stroke-dasharray: 0.06 3; stroke-dashoffset: 0.06; }
.wm-map.is-in .wm-route__head,
.wm-map.is-in .wm-route__glow {
animation: wm-run 5.2s cubic-bezier(0.45, 0, 0.25, 1) infinite;
animation-delay: calc(1.2s + var(--k, 0) * 0.43s);
}
.wm-map.is-in .wm-route__glow { animation-name: wm-run-glow; }
@keyframes wm-run {
0% { stroke-dashoffset: 0.09; opacity: 0; }
6% { opacity: 1; }
62% { opacity: 1; }
70%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes wm-run-glow {
0% { stroke-dashoffset: 0.06; opacity: 0; }
6% { opacity: 0.28; }
62% { opacity: 0.28; }
70%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
.wm-route__hit {
fill: none;
stroke: var(--rc);
stroke-width: 1.5;
opacity: 0;
transform-box: fill-box;
transform-origin: center;
}
.wm-map.is-in .wm-route__hit {
animation: wm-hit 5.2s ease-out infinite;
animation-delay: calc(1.2s + var(--k, 0) * 0.43s);
}
@keyframes wm-hit {
0%, 64% { opacity: 0; transform: scale(0.4); }
68% { opacity: 1; transform: scale(0.8); }
90%, 100% { opacity: 0; transform: scale(3); }
}
.is-k0 { --k: 0; } .is-k1 { --k: 1; } .is-k2 { --k: 2; } .is-k3 { --k: 3; } .is-k4 { --k: 4; }
.is-k5 { --k: 5; } .is-k6 { --k: 6; } .is-k7 { --k: 7; } .is-k8 { --k: 8; } .is-k9 { --k: 9; }
.is-k10 { --k: 10; } .is-k11 { --k: 11; } .is-k12 { --k: 12; } .is-k13 { --k: 13; } .is-k14 { --k: 14; }
.is-k15 { --k: 15; } .is-k16 { --k: 16; } .is-k17 { --k: 17; } .is-k18 { --k: 18; } .is-k19 { --k: 19; }
.is-k20 { --k: 20; } .is-k21 { --k: 21; } .is-k22 { --k: 22; } .is-k23 { --k: 23; } .is-k24 { --k: 24; }
.wm-city__pt {
fill: var(--text);
opacity: 0.85;
transform-box: fill-box;
transform-origin: center;
transition: transform 0.35s var(--ease-out), fill 0.3s;
}
.wm-city__name {
font: 600 11px var(--mono);
letter-spacing: 0.06em;
text-transform: uppercase;
fill: var(--text-3);
paint-order: stroke;
stroke: var(--surface);
stroke-width: 3px;
stroke-linejoin: round;
transition: fill 0.3s;
}
.wm-city.is-hot .wm-city__pt { fill: var(--brand); transform: scale(2.2); }
.wm-city.is-hot .wm-city__name { fill: var(--text); }
.wm-map[data-hot] .wm-route { opacity: 0.35; transition: opacity 0.3s; }
.wm-map[data-hot] .wm-route.is-hot { opacity: 1; }
.wm-route.is-hot .wm-route__base { stroke: var(--rc); stroke-width: 1.8; }
.wm-hub__core { fill: var(--brand); stroke: var(--surface); stroke-width: 2; }
.wm-hub__wave {
fill: none;
stroke: var(--brand);
stroke-width: 1.4;
opacity: 0;
transform-box: fill-box;
transform-origin: center;
animation: wm-wave 3.6s var(--ease-out) infinite;
}
.wm-hub__wave--2 { animation-delay: 1.2s; }
.wm-hub__wave--3 { animation-delay: 2.4s; }
@keyframes wm-wave {
0% { opacity: 0.9; transform: scale(0.5); }
100% { opacity: 0; transform: scale(4.2); }
}
.wm-hub__tag rect { fill: var(--brand-fill); }
.wm-hub__tag text { font: 700 12.5px var(--font); fill: var(--brand-ink); letter-spacing: 0.02em; }
.wm-hub__tag {
transform-box: fill-box;
transform-origin: 50% 100%;
animation: wm-bob 3.4s var(--ease-io) infinite;
}
@keyframes wm-bob { 50% { transform: translateY(-3px); } }
html.fx-js .wm-map .wm-dots { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--ease-out); }
html.fx-js .wm-map.is-in .wm-dots { clip-path: inset(0 0 0 0); }
html.fx-js .wm-map .wm-cities,
html.fx-js .wm-map .wm-hub,
html.fx-js .wm-map .wm-tr { opacity: 0; transition: opacity 0.8s 0.7s var(--ease); }
html.fx-js .wm-map.is-in .wm-cities,
html.fx-js .wm-map.is-in .wm-hub,
html.fx-js .wm-map.is-in .wm-tr { opacity: 1; }
.wm-cap {
position: absolute;
right: 1.1rem;
bottom: 0.7rem;
margin: 0;
font: 500 0.66rem var(--mono);
letter-spacing: 0.06em;
color: var(--text-3);
}
[dir="rtl"] .wm-cap { right: auto; left: 1.1rem; }
.wm-foot {
display: grid;
gap: 1rem;
margin-top: 1rem;
}
.wm-clocks {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.6rem;
margin: 0;
padding: 0;
list-style: none;
}
.wm-clock {
position: relative;
display: grid;
gap: 0.15rem;
padding: 0.85rem 1rem;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--surface);
overflow: hidden;
cursor: default;
transition: border-color 0.3s var(--ease), transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease);
}
.wm-clock::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 2px;
background: linear-gradient(90deg, var(--wm-y), var(--brand), var(--wm-r), var(--wm-v), var(--wm-c), var(--wm-g));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s var(--ease-out);
}
.wm-clock:hover,
.wm-clock.is-hot {
border-color: color-mix(in srgb, var(--brand) 45%, var(--line-2));
transform: translateY(-3px);
box-shadow: 0 14px 30px -20px var(--brand-glow);
}
.wm-clock:hover::after,
.wm-clock.is-hot::after { transform: scaleX(1); }
.wm-clock--home { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.wm-clock__city {
font: 600 0.68rem var(--mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
.wm-clock__time {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.wm-clock__state {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 1.1em;
font-size: 0.74rem;
color: var(--text-3);
}
.wm-clock__state:not(:empty)::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--text-3);
}
.wm-clock__state.is-on { color: var(--text-2); }
.wm-clock__state.is-on::before { background: var(--ok, #2bd67b); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok, #2bd67b) 22%, transparent); }
.wm-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.wm-chip {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 0.85rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
font-size: 0.86rem;
color: var(--text-2);
}
.wm-chip .icon { width: 15px; height: 15px; color: var(--brand); }
.wm-chip:nth-child(2) .icon { color: var(--wm-c); }
.wm-chip:nth-child(3) .icon { color: var(--wm-g); }
.wm-chip:nth-child(4) .icon { color: var(--wm-v); }
@media (max-width: 699.98px) {
.wm-city__name, .wm-hub__tag { display: none; }
.wm-route__head { stroke-width: 3.6; }
.wm-clock__time { font-size: 1.25rem; }
.wm-clocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wm-home .wm-stage { transform-style: preserve-3d; }
@supports (animation-timeline: view()) {
html[data-motion="full"] .wm-home .wm-stage {
animation: wm-tilt linear both;
animation-timeline: view();
animation-range: entry 0% cover 42%;
}
}
@keyframes wm-tilt {
from { transform: perspective(1400px) rotateX(16deg) scale(0.94); opacity: 0.55; }
to { transform: none; opacity: 1; }
}
.wm-stage::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
padding: 1.5px;
border-radius: inherit;
background: conic-gradient(from var(--neon-a, 0deg), transparent 0 40%, var(--wm-c) 52%, var(--wm-v) 60%, var(--wm-r) 68%, var(--brand) 76%, var(--wm-y) 84%, transparent 94%);
-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);
opacity: 0.55;
pointer-events: none;
animation: neon-spin 12s linear infinite;
}
.wm-layer {
position: absolute;
inset: 0;
transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: transform;
}
.wm-route.is-spot .wm-route__base { stroke: var(--rc); stroke-width: 2.2; stroke-dasharray: none; }
.wm-route.is-spot .wm-route__head { stroke-width: 3.4; }
.wm-city.is-spot .wm-city__pt { fill: var(--wm-spot, var(--brand)); transform: scale(2.4); }
.wm-spot {
position: absolute;
left: 0;
top: 0;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.42rem 0.75rem 0.42rem 0.55rem;
border: 1px solid color-mix(in srgb, var(--wm-spot, var(--brand)) 55%, var(--line-2));
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 78%, transparent);
backdrop-filter: blur(8px);
box-shadow: 0 12px 30px -16px rgb(0 0 0 / 0.55), 0 0 0 4px color-mix(in srgb, var(--wm-spot, var(--brand)) 12%, transparent);
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
color: var(--text);
opacity: 0;
transform: translate(var(--sx, 0), var(--sy, 0)) translate(-50%, calc(-100% - 14px)) scale(0.9);
transition: opacity 0.35s var(--ease), transform 0.55s cubic-bezier(0.2, 1.3, 0.4, 1);
pointer-events: none;
}
.wm-spot.is-on { opacity: 1; transform: translate(var(--sx, 0), var(--sy, 0)) translate(-50%, calc(-100% - 14px)); }
.wm-spot__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--wm-spot, var(--brand));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wm-spot, var(--brand)) 25%, transparent);
}
.wm-spot__arrow { color: var(--text-3); }
@media (max-width: 699.98px) {
.wm-spot { font-size: 0.7rem; padding: 0.3rem 0.6rem 0.3rem 0.45rem; }
}
.is-paused .wm-aurora i,
.is-paused .wm-route__head,
.is-paused .wm-route__glow,
.is-paused .wm-route__hit,
.is-paused .wm-hub__wave,
.is-paused .wm-hub__tag,
.is-paused .wm-stage::after { animation-play-state: paused !important; }
html[data-motion="calm"] .wm-aurora i,
html[data-motion="calm"] .wm-route__glow,
html[data-motion="calm"] .wm-hub__tag,
html[data-motion="calm"] .wm-stage::after { animation: none !important; }
html[data-motion="calm"] .wm-route__glow { opacity: 0; }
html[data-motion="calm"] .wm-map.is-in .wm-route__head { animation-duration: 8s; }
@media (prefers-reduced-motion: reduce) {
.wm-aurora, .wm-route__head, .wm-route__glow, .wm-route__hit, .wm-hub__wave { display: none; }
.wm-hub__tag, .wm-stage::after { animation: none !important; }
.wm-layer, .wm-spot { transition: none; }
html.fx-js .wm-map .wm-dots { clip-path: none; transition: none; }
html.fx-js .wm-map .wm-cities, html.fx-js .wm-map .wm-hub, html.fx-js .wm-map .wm-tr { opacity: 1; transition: none; }
.wm-route__base { stroke-dashoffset: 0; transition: none; }
}
html[data-motion="off"] .wm-aurora,
html[data-motion="off"] .wm-route__head,
html[data-motion="off"] .wm-route__glow,
html[data-motion="off"] .wm-route__hit,
html[data-motion="off"] .wm-hub__wave { display: none; }
html[data-motion="off"] .wm-hub__tag,
html[data-motion="off"] .wm-stage::after { animation: none !important; }
html[data-motion="off"] .wm-layer,
html[data-motion="off"] .wm-spot { transition: none; }
html[data-motion="off"].fx-js .wm-map .wm-dots { clip-path: none; transition: none; }
html[data-motion="off"].fx-js .wm-map .wm-cities,
html[data-motion="off"].fx-js .wm-map .wm-hub,
html[data-motion="off"].fx-js .wm-map .wm-tr { opacity: 1; transition: none; }
html[data-motion="off"] .wm-route__base { stroke-dashoffset: 0; transition: none; }

/* css/front/zz-flair.css */

@supports (animation-timeline: scroll()) {
body::after {
content: "";
position: fixed;
inset: 0 0 auto;
z-index: 200;
height: 2px;
background: linear-gradient(90deg, #ffd23f, var(--brand) 30%, #ff3b5c 55%, #a77bff 78%, #36c5f0);
transform: scaleX(0);
transform-origin: left;
pointer-events: none;
animation: flair-progress linear both;
animation-timeline: scroll(root block);
}
[dir="rtl"] body::after { transform-origin: right; }
}
@keyframes flair-progress {
to { transform: scaleX(1); }
}
.pg-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
padding: 1.5px;
border-radius: inherit;
background: conic-gradient(from var(--neon-a, 0deg), transparent 0 52%, color-mix(in srgb, var(--brand) 65%, transparent) 65%, #ffd36b 74%, #fff3c4 77%, var(--brand) 83%, transparent 94%);
-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);
opacity: 0;
pointer-events: none;
transition: opacity 0.45s var(--ease);
}
.pg-card:hover::after,
.pg-card:focus-within::after {
opacity: 1;
animation: neon-spin 3s linear infinite;
}
.tband__tile {
overflow: hidden;
}
.tband__tile::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, #ffd23f 22%, transparent) 42%, color-mix(in srgb, var(--brand) 26%, transparent) 50%, color-mix(in srgb, #a77bff 22%, transparent) 58%, transparent 70%);
transform: translateX(-110%);
pointer-events: none;
transition: transform 0.8s var(--ease-out);
}
.tband__tile:hover::before { transform: translateX(110%); }
@media (prefers-reduced-motion: reduce) {
body::after { display: none; }
.pg-card:hover::after, .pg-card:focus-within::after { animation: none; --neon-a: 200deg; }
.tband__tile::before { display: none; }
}
html[data-motion="off"] body::after,
html[data-motion="off"] .tband__tile::before { display: none; }
html[data-motion="off"] .pg-card:hover::after,
html[data-motion="off"] .pg-card:focus-within::after { animation: none; --neon-a: 200deg; }