:root { --slate-950: #06070b; --slate-925: #090b11; --slate-900: #0c0f16; --slate-875: #11141d; --slate-850: #151926; --slate-800: #1b2030; --slate-700: #252c3f; --slate-600: #323b52; --slate-500: #4a5570; --slate-400: #6b7790; --slate-300: #95a0b8; --slate-200: #c1c9da; --slate-100: #e4e8f1; --slate-050: #f4f6fb; --white: #ffffff; --azure-700: #1e44b8; --azure-600: #2b5ae0; --azure-500: #3d7bff; --azure-400: #6798ff; --azure-300: #9bbaff; --cyan-500: #1fd6e6; --cyan-400: #4ee4f0; --violet-600: #6d49e8; --violet-500: #8a63ff; --violet-400: #b095ff; --green-500: #21c179; --green-400: #48df9b; --gold-100: #f8edd2; --gold-200: #f1ddac; --gold-300: #e8c986; --gold-400: #ddb463; --gold-500: #cf9d43; --gold-600: #b07f28; --gold-700: #8a6212; --amber-500: #f5a623; --red-500: #f04757; color-scheme: dark; --color-bg: var(--slate-950); --color-bg-subtle: var(--slate-925); --color-surface: var(--slate-900); --color-surface-2: var(--slate-875); --color-surface-3: var(--slate-850); --color-elevated: #131826; --color-border: rgba(149, 160, 184, 0.12); --color-border-strong: rgba(149, 160, 184, 0.22); --color-border-faint: rgba(149, 160, 184, 0.07); --color-text: var(--slate-050); --color-text-secondary: var(--slate-300); --color-text-muted: #77839c; --color-text-faint: #5f6b86; --color-text-on-accent: var(--white); --color-accent: var(--azure-500); --color-accent-hover: var(--azure-400); --color-accent-press: var(--azure-600); --color-accent-soft: rgba(61, 123, 255, 0.12); --color-accent-ring: rgba(61, 123, 255, 0.50); --color-accent-2: var(--violet-500); --color-accent-2-soft: rgba(138, 99, 255, 0.13); --color-accent-contrast: #211803; --color-azure: var(--azure-500); --color-data: var(--cyan-500); --color-violet: var(--violet-500); --color-gold: var(--gold-400); --color-green: var(--green-500); --color-success: var(--green-500); --color-warning: var(--amber-500); --color-danger: var(--red-500); --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent-ring); --grid-line: rgba(149, 160, 184, 0.04); --dot-line: rgba(132, 150, 200, 0.16); --scrollbar-thumb: var(--slate-700); --scrollbar-thumb-hover: var(--slate-600); --header-bg: color-mix(in srgb, var(--color-bg) 70%, transparent); --hero-glow-color: rgba(61, 123, 255, 0.16); --noise-opacity: 0.03; --ambient-1: rgba(61, 123, 255, 0.14); --ambient-2: rgba(138, 99, 255, 0.13); --ambient-3: rgba(45, 96, 200, 0.13); --ambient-vignette: rgba(2, 3, 7, 0.55); --gradient-gold: linear-gradient(165deg, var(--gold-200) 0%, var(--gold-400) 48%, var(--gold-500) 100%); --gradient-accent: linear-gradient(135deg, var(--azure-500) 0%, var(--violet-500) 100%); --gradient-accent-line: linear-gradient(90deg, transparent, var(--azure-500), transparent); --gradient-surface: linear-gradient(180deg, rgba(61, 123, 255, 0.05) 0%, rgba(138, 99, 255, 0.03) 44%, rgba(61, 123, 255, 0) 100%); --gradient-text: linear-gradient(180deg, var(--slate-050) 0%, var(--slate-300) 100%); --gradient-hero-glow: radial-gradient(60% 50% at 50% 0%, var(--hero-glow-color) 0%, rgba(61, 123, 255, 0) 70%); --gradient-grid-fade: radial-gradient(80% 70% at 50% 28%, #000 28%, transparent 100%); --gradient-display: linear-gradient(110deg, var(--slate-050) 0%, var(--azure-300) 52%, var(--violet-400) 100%); --glass-bg: color-mix(in srgb, var(--color-surface) 60%, transparent); --glass-border: rgba(255, 255, 255, 0.09); --glass-blur: blur(22px) saturate(150%); --aurora-1: rgba(61, 123, 255, 0.22); --aurora-2: rgba(138, 99, 255, 0.18); --aurora-3: rgba(45, 96, 200, 0.16); --aurora-4: rgba(31, 214, 230, 0.10); --hairline: rgba(255, 255, 255, 0.06); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); --shadow-accent: 0 16px 44px rgba(61, 123, 255, 0.28); --shadow-gold: 0 12px 34px -8px rgba(221, 180, 99, 0.45); --shadow-inset-line: inset 0 1px 0 rgba(255, 255, 255, 0.04); --font-display: "Clash Display", "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif; --font-sans: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, "Menlo", "Cascadia Code", "Roboto Mono", monospace; --fs-statement: clamp(2.5rem, 1.1rem + 5.4vw, 6.25rem); --fs-display: clamp(3rem, 1.25rem + 5.6vw, 7rem); --fs-h1: clamp(2.6rem, 1.3rem + 4.8vw, 5.75rem); --fs-h2: clamp(2.05rem, 1.15rem + 3.3vw, 4.4rem); --fs-h3: clamp(1.45rem, 1.15rem + 1.1vw, 2.15rem); --fs-h4: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem); --fs-body-lg: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem); --fs-body: 1.0625rem; --fs-sm: 0.98rem; --fs-xs: 0.875rem; --fs-2xs: 0.8125rem; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-display: 0.98; --lh-tight: 1.04; --lh-snug: 1.16; --lh-normal: 1.6; --lh-relaxed: 1.7; --ls-tighter: -0.035em; --ls-tight: -0.018em; --ls-normal: 0; --ls-wide: 0.08em; --ls-wider: 0.14em; --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 6rem; --space-12: 8rem; --space-13: 10rem; --section-y: clamp(5rem, 2.5rem + 8vw, 10rem); --section-y-sm: clamp(3.75rem, 2.5rem + 5vw, 7rem); --container-max: 1680px; --container-narrow: 880px; --container-reading: 72ch; --gutter: clamp(1.5rem, 0.9rem + 4vw, 6.5rem); --grid-cols: 12; --grid-gap: clamp(1rem, 0.6rem + 1.4vw, 2rem); --header-h: 72px; --header-h-scrolled: 60px; --radius-xs: 3px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 999px; --radius-circle: 50%; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 140ms; --dur-base: 260ms; --dur-slow: 480ms; --dur-slower: 800ms; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 1000; --z-dropdown: 1100; --z-overlay: 1200; --z-modal: 1300; --z-toast: 1400; --z-max: 9999; } :root[data-theme="light"] { color-scheme: light; --color-bg: #f5f7fb; --color-bg-subtle: #eef1f7; --color-surface: #ffffff; --color-surface-2: #f7f9fc; --color-surface-3: #eef2f8; --color-elevated: #ffffff; --color-border: rgba(11, 16, 32, 0.10); --color-border-strong: rgba(11, 16, 32, 0.16); --color-border-faint: rgba(11, 16, 32, 0.05); --color-text: #0b1020; --color-text-secondary: #424c63; --color-text-muted: #60687d; --color-text-faint: #7f879a; --color-text-on-accent: #ffffff; --color-accent: var(--azure-600); --color-accent-hover: var(--azure-500); --color-accent-press: var(--azure-700); --color-accent-soft: rgba(43, 90, 224, 0.10); --color-accent-ring: rgba(43, 90, 224, 0.40); --color-accent-2: var(--violet-600); --color-accent-2-soft: rgba(109, 73, 232, 0.10); --color-accent-contrast: #211803; --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent-ring); --grid-line: rgba(11, 16, 32, 0.04); --dot-line: rgba(31, 52, 110, 0.12); --scrollbar-thumb: #c7cedd; --scrollbar-thumb-hover: #aeb7cc; --header-bg: color-mix(in srgb, #ffffff 80%, transparent); --hero-glow-color: rgba(43, 90, 224, 0.12); --noise-opacity: 0.018; --ambient-1: rgba(43, 90, 224, 0.09); --ambient-2: rgba(109, 73, 232, 0.08); --ambient-3: rgba(43, 90, 224, 0.05); --ambient-vignette: rgba(11, 16, 32, 0.05); --gradient-text: linear-gradient(180deg, #0b1020 0%, #424c63 100%); --gradient-display: linear-gradient(110deg, #0b1020 0%, var(--azure-600) 55%, var(--violet-600) 100%); --gradient-gold: linear-gradient(165deg, var(--gold-200) 0%, var(--gold-400) 48%, var(--gold-500) 100%); --gradient-accent: linear-gradient(135deg, var(--azure-600) 0%, var(--violet-600) 100%); --gradient-accent-line: linear-gradient(90deg, transparent, var(--azure-600), transparent); --gradient-surface: linear-gradient(180deg, rgba(43, 90, 224, 0.05) 0%, rgba(109, 73, 232, 0.03) 44%, rgba(43, 90, 224, 0) 100%); --glass-bg: color-mix(in srgb, #ffffff 74%, transparent); --glass-border: rgba(11, 16, 32, 0.07); --aurora-1: rgba(43, 90, 224, 0.14); --aurora-2: rgba(109, 73, 232, 0.10); --aurora-3: rgba(43, 90, 224, 0.08); --aurora-4: rgba(31, 214, 230, 0.08); --hairline: rgba(11, 16, 32, 0.06); --shadow-xs: 0 1px 2px rgba(11, 16, 32, 0.06); --shadow-sm: 0 2px 10px rgba(11, 16, 32, 0.07); --shadow-md: 0 12px 30px rgba(11, 16, 32, 0.09); --shadow-lg: 0 28px 70px rgba(11, 16, 32, 0.12); --shadow-accent: 0 16px 44px rgba(43, 90, 224, 0.22); --shadow-gold: 0 12px 34px -8px rgba(176, 127, 40, 0.40); --shadow-inset-line: inset 0 1px 0 rgba(255, 255, 255, 0.6); } @media (prefers-contrast: more) { :root { --color-text-secondary: var(--slate-200); --color-border: rgba(149, 160, 184, 0.28); --color-border-strong: rgba(149, 160, 184, 0.42); } :root[data-theme="light"] { --color-text-secondary: #2a3242; --color-border: rgba(11, 16, 32, 0.22); --color-border-strong: rgba(11, 16, 32, 0.34); } }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-5)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { min-height: 100%; font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--color-text-secondary); background-color: var(--color-bg); background-image: radial-gradient(125% 115% at 50% 38%, transparent 55%, var(--ambient-vignette) 100%), radial-gradient(52% 46% at 12% -6%, var(--ambient-1), transparent 60%), radial-gradient(46% 42% at 94% 4%, var(--ambient-2), transparent 58%), radial-gradient(66% 60% at 82% 114%, var(--ambient-3), transparent 62%); background-attachment: fixed; background-repeat: no-repeat; font-feature-settings: "ss01", "kern", "liga", "calt"; overflow-x: hidden; transition: background-color var(--dur-slow) var(--ease-standard), color var(--dur-slow) var(--ease-standard); } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(var(--dot-line) 1px, transparent 1.5px); background-size: 40px 40px; -webkit-mask-image: var(--gradient-grid-fade); mask-image: var(--gradient-grid-fade); opacity: 0.4; } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--noise-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } h1, h2, h3, h4, h5, h6 { color: var(--color-text); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-wrap: balance; } h1, h2 { font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tighter); line-height: 1.02; } h2 { font-weight: var(--fw-medium); } .font-display { font-family: var(--font-display); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); } h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--ls-normal); } h5 { font-size: var(--fs-body-lg); letter-spacing: var(--ls-normal); } h6 { font-size: var(--fs-sm); letter-spacing: var(--ls-normal); } p { text-wrap: pretty; } p + p { margin-top: var(--space-4); } a { color: var(--color-accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); } a:hover { color: var(--color-accent-hover); } strong, b { color: var(--color-text); font-weight: var(--fw-semibold); } small { font-size: var(--fs-xs); } ul, ol { list-style: none; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; } hr { border: 0; height: 1px; background: var(--color-border); margin: var(--space-6) 0; } img, svg, video, canvas, picture { display: block; max-width: 100%; height: auto; } svg { fill: currentColor; } input, button, textarea, select { font: inherit; color: inherit; background: none; border: none; } button { cursor: pointer; } textarea { resize: vertical; } ::placeholder { color: var(--color-text-muted); opacity: 1; } ::selection { background: var(--color-accent); color: var(--color-accent-contrast); } * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-pill); border: 2px solid var(--color-bg); } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } :focus { outline: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: var(--space-3); left: var(--space-3); z-index: var(--z-max); padding: var(--space-2) var(--space-4); background: var(--color-accent); color: var(--color-accent-contrast); border-radius: var(--radius-sm); font-weight: var(--fw-semibold); font-size: var(--fs-sm); transform: translateY(-150%); transition: transform var(--dur-base) var(--ease-out); } .skip-link:focus-visible { transform: translateY(0); box-shadow: var(--shadow-md); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } [hidden] { display: none !important; } body.is-locked { overflow: hidden; }
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .container--wide { max-width: none; } .container--reading { max-width: var(--container-reading); } .section { position: relative; padding-block: var(--section-y); } .section--sm { padding-block: var(--section-y-sm); } .section--flush-top { padding-top: 0; } .section--flush-bottom { padding-bottom: 0; } .section--subtle { background: var(--color-bg-subtle); } .section--bordered { border-top: 1px solid var(--color-border-faint); } .grid { display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); gap: var(--grid-gap); } .grid-auto { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .grid-auto--lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } .grid-auto--sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-12 { grid-column: 1 / -1; } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .stack { display: flex; flex-direction: column; } .stack > * + * { margin-top: var(--space-4); } .between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .center-x { display: flex; justify-content: center; } .section-head { max-width: 720px; margin-bottom: var(--space-8); } .section-head--center { margin-inline: auto; text-align: center; } .section-head__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--color-accent); margin-bottom: var(--space-4); } .section-head__eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--color-accent); opacity: 0.6; } .section-head--center .section-head__eyebrow::before { display: none; } .section-head__title { font-size: var(--fs-h2); margin-bottom: var(--space-4); } .section-head__lede { font-size: var(--fs-body-lg); color: var(--color-text-secondary); line-height: var(--lh-relaxed); } .site-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-header); height: var(--header-h); display: flex; align-items: center; transition: height var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); border-bottom: 1px solid transparent; } .site-header__inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .site-header__inner > .cluster { flex-wrap: nowrap; gap: var(--space-2); } .site-header.is-scrolled { height: var(--header-h-scrolled); background: var(--header-bg); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border-bottom-color: var(--color-border); } .site-main { padding-top: var(--header-h); } .site-footer { position: relative; border-top: 1px solid var(--color-border); background: var(--color-bg-subtle); padding-block: var(--space-10) var(--space-7); } .site-footer__top { display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-border); } .site-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-6); } @media (max-width: 1024px) { .site-footer__top { grid-template-columns: 1fr 1fr 1fr; } .site-footer__top > :first-child { grid-column: 1 / -1; } } @media (max-width: 900px) { .col-3, .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: 1 / -1; } } @media (max-width: 640px) { .site-footer__top { grid-template-columns: 1fr 1fr; } .site-footer__bottom { flex-direction: column; align-items: flex-start; } } .text-center { text-align: center; } .text-mono { font-family: var(--font-mono); } .text-muted { color: var(--color-text-muted); } .text-secondary { color: var(--color-text-secondary); } .text-gradient { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .accent { color: var(--color-accent); } .mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-7 { margin-top: var(--space-7); } .mt-8 { margin-top: var(--space-8); } .mt-9 { margin-top: var(--space-9); } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--space-2); } .mb-6 { margin-bottom: var(--space-6); } .pt-0 { padding-top: 0; } .bt-0 { border-top: none; } .mx-auto { margin-inline: auto; } .measure-52 { max-width: 52ch; } .measure-62 { max-width: 62ch; } .fs-xs { font-size: var(--fs-xs); } .fs-sm { font-size: var(--fs-sm); } .fs-h3 { font-size: var(--fs-h3); } .full-bleed { width: 100%; } .relative { position: relative; } .overflow-hidden { overflow: hidden; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text); font-weight: var(--fw-semibold); } .brand:hover { color: var(--color-text); } .brand__mark { width: 30px; height: 30px; flex-shrink: 0; color: var(--color-accent); transition: transform var(--dur-base) var(--ease-out); } .brand:hover .brand__mark { transform: rotate(-8deg) scale(1.04); } .brand__name { font-size: 1.0625rem; letter-spacing: var(--ls-tight); line-height: 1; } .brand__name b { font-weight: var(--fw-bold); color: var(--color-text); } .brand__suffix { display: block; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); color: var(--color-text-muted); text-transform: uppercase; margin-top: 2px; } .brand__logo { height: clamp(30px, 3.2vw, 38px); width: auto; display: none; transition: opacity var(--dur-base) var(--ease-out); } .brand:hover .brand__logo { opacity: 0.82; } :root[data-theme="dark"] .brand__logo--dark, :root:not([data-theme]) .brand__logo--dark { display: block; } :root[data-theme="light"] .brand__logo--light { display: block; } .btn { --btn-bg: transparent; --btn-fg: var(--color-text); --btn-border: transparent; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.8125rem 1.5rem; font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-normal); line-height: 1; color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); } .btn:active { transform: translateY(1px); } .btn:focus-visible { box-shadow: var(--focus-ring); } .btn__icon { width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease-out); } .btn:hover .btn__icon--arrow { transform: translateX(3px); } .btn--primary { --btn-bg: var(--gradient-gold); --btn-fg: var(--color-accent-contrast); font-weight: var(--fw-bold); letter-spacing: 0.01em; box-shadow: var(--shadow-gold), var(--shadow-inset-line); } .btn--primary:hover { color: var(--color-accent-contrast); transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 18px 44px -8px rgba(221,180,99,0.55), var(--shadow-inset-line); } .btn--primary:active { transform: translateY(0); filter: brightness(0.98); } .btn--secondary { --btn-bg: transparent; --btn-fg: var(--color-text); --btn-border: var(--color-border-strong); } .btn--secondary:hover { --btn-bg: var(--color-surface-2); --btn-border: var(--color-accent); color: var(--color-text); transform: translateY(-1px); } .btn--ghost { --btn-fg: var(--color-text-secondary); } .btn--ghost:hover { --btn-fg: var(--color-accent); --btn-bg: var(--color-accent-soft); } .btn--gold-line { --btn-fg: var(--color-accent); --btn-border: color-mix(in srgb, var(--color-accent) 42%, transparent); --btn-bg: var(--color-accent-soft); font-weight: var(--fw-semibold); } .btn--gold-line:hover { --btn-fg: var(--gold-200); --btn-border: var(--color-accent); transform: translateY(-1px); box-shadow: var(--shadow-gold); } .btn--lg { padding: 1.0625rem 2rem; font-size: var(--fs-body); } .btn--sm { padding: 0.5625rem 1.0625rem; font-size: var(--fs-xs); } .btn--block { width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } .link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--color-accent); } .link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); } .link-arrow:hover svg { transform: translateX(4px); } .badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.375rem 0.75rem; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-secondary); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-pill); } .badge__dot { width: 6px; height: 6px; border-radius: var(--radius-circle); background: var(--gradient-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } .badge--live .badge__dot { background: var(--color-success); box-shadow: 0 0 0 3px rgba(33,193,121,0.18); animation: pulse-dot 2.4s var(--ease-in-out) infinite; } .tag { display: inline-flex; align-items: center; padding: 0.3125rem 0.6875rem; font-size: var(--fs-xs); color: var(--color-text-secondary); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-pill); } .tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); } .card { --card-accent: var(--color-accent); --card-accent-soft: var(--color-accent-soft); position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-inset-line); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard); } .card--interactive:hover { transform: translateY(-4px); border-color: var(--color-border-strong); } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--space-5); color: var(--card-accent); background: var(--card-accent-soft); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .card__icon svg { width: 24px; height: 24px; } .card__kicker { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--card-accent); margin-bottom: var(--space-3); } .card__title { font-size: var(--fs-h4); color: var(--color-text); margin-bottom: var(--space-3); } .card__title a { color: inherit; } .card__title a:hover { color: var(--color-accent); } .card__body { color: var(--color-text-secondary); font-size: var(--fs-sm); line-height: var(--lh-relaxed); } .card__footer { margin-top: var(--space-5); padding-top: var(--space-4); } .card__meta { margin-top: auto; padding-top: var(--space-5); } .card__go { margin-top: auto; padding-top: var(--space-5); display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--card-accent); } .card__go svg { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); } .card--interactive:hover .card__go svg { transform: translateX(4px); } .card__index { position: absolute; top: var(--space-5); right: var(--space-5); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-faint); } .card--rail::before { content: ""; position: absolute; left: 0; top: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); width: 3px; height: 2.25rem; border-radius: 0 3px 3px 0; background: var(--card-accent); } .card--violet { --card-accent: var(--color-violet); --card-accent-soft: rgba(138, 99, 255, 0.13); } .card--gold { --card-accent: var(--amber-500); --card-accent-soft: rgba(245, 166, 35, 0.13); } .card--green { --card-accent: var(--color-green); --card-accent-soft: rgba(33, 193, 121, 0.13); } .card--cyan { --card-accent: var(--color-data); --card-accent-soft: rgba(31, 214, 230, 0.12); } .card--feature { padding: var(--space-7); } .card--principle { padding: var(--space-7) var(--space-6) var(--space-6); isolation: isolate; } .card--principle > .card__icon, .card--principle > .card__title, .card--principle > .card__body { position: relative; z-index: 2; } .card--principle .card__wm { position: absolute; top: -0.26em; right: 0.04em; z-index: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(5rem, 9vw, 7.5rem); line-height: 1; color: color-mix(in srgb, var(--card-accent) 8%, transparent); -webkit-text-stroke: 1.25px var(--card-accent); opacity: 0.16; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .card--principle:hover .card__wm { opacity: 0.34; transform: translateY(4px) scale(1.03); } .card--principle::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(125% 85% at 100% 0%, color-mix(in srgb, var(--card-accent) 14%, transparent), transparent 58%); opacity: 0.45; pointer-events: none; transition: opacity var(--dur-base) var(--ease-standard); } .card--principle:hover::after { opacity: 1; } .card--principle .card__icon { box-shadow: 0 0 0 1px color-mix(in srgb, var(--card-accent) 22%, transparent); transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .card--principle:hover { box-shadow: var(--shadow-lg); } .card--principle:hover .card__icon { background: color-mix(in srgb, var(--card-accent) 22%, transparent); box-shadow: 0 10px 24px color-mix(in srgb, var(--card-accent) 30%, transparent); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .card--principle .card__wm, .card--principle:hover .card__wm, .card--principle:hover .card__icon { transform: none; } } .feature-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); } .feature-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-secondary); } .feature-list li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--card-accent, var(--color-accent)); } .stat { display: flex; flex-direction: column; gap: var(--space-2); } .stat__value { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem); font-weight: var(--fw-bold); letter-spacing: var(--ls-tighter); line-height: 1; color: var(--color-text); font-variant-numeric: tabular-nums; } .stat__value .stat__suffix { color: var(--color-accent); } .stat__label { font-size: var(--fs-sm); color: var(--color-text-muted); } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--grid-gap); } .stat-row--bordered .stat { padding-left: var(--space-5); border-left: 1px solid var(--color-border); } .nav { display: flex; align-items: center; gap: var(--space-2); } .nav__list { display: flex; align-items: center; gap: clamp(0rem, 0.25vw, 0.35rem); } .nav__item { position: relative; } .nav__link { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.5rem clamp(0.5rem, 0.15rem + 0.45vw, 0.8rem); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-text-secondary); border-radius: var(--radius-sm); white-space: nowrap; transition: color var(--dur-fast) var(--ease-standard); } .nav__link::before { content: ""; position: absolute; left: clamp(0.5rem, 0.15rem + 0.45vw, 0.8rem); right: clamp(0.5rem, 0.15rem + 0.45vw, 0.8rem); bottom: 0.25rem; height: 1.5px; background: var(--color-accent); border-radius: var(--radius-pill); transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .nav__link:hover { color: var(--color-text); } .nav__link:hover::before { transform: scaleX(1); opacity: 0.7; } .nav__link[aria-current="page"] { color: var(--color-text); } .nav__link[aria-current="page"]::before { transform: scaleX(1); opacity: 1; } .nav__caret { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out); } .nav__item--has-menu[aria-expanded="true"] .nav__caret, .nav__trigger[aria-expanded="true"] .nav__caret { transform: rotate(180deg); } .nav__menu { position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% 0; width: min(640px, 90vw); padding: var(--space-4); background: var(--color-elevated); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base); z-index: var(--z-dropdown); } .nav__item--has-menu:hover .nav__menu, .nav__item--has-menu.is-open .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav__menu-link { display: flex; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); transition: background-color var(--dur-fast) var(--ease-standard); } .nav__menu-link:hover { background: var(--color-surface-2); } .nav__menu-icon { flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center; color: var(--color-accent); background: var(--color-accent-soft); border-radius: var(--radius-sm); } .nav__menu-icon svg { width: 20px; height: 20px; } .nav__menu-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text); } .nav__menu-desc { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; } .lang-switch { display: inline-flex; align-items: center; height: 36px; padding: 2px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); overflow: hidden; } .lang-switch__btn { height: 100%; padding: 0 0.6rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--color-text-muted); border-radius: var(--radius-pill); transition: color var(--dur-fast), background-color var(--dur-fast); } .lang-switch__btn[aria-current="true"] { color: var(--color-text); background: var(--color-surface-3); } .lang-switch__btn[disabled] { cursor: not-allowed; opacity: 0.55; } .lang-switch__btn:not([disabled]):hover { color: var(--color-text); } .nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text); } .nav-toggle__bars { position: relative; width: 18px; height: 12px; } .nav-toggle__bars span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast); } .nav-toggle__bars span:nth-child(1) { top: 0; } .nav-toggle__bars span:nth-child(2) { top: 5px; } .nav-toggle__bars span:nth-child(3) { top: 10px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } .nav-drawer { position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-overlay); background: var(--color-bg); padding: var(--space-6) var(--gutter) var(--space-8); overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow); } .nav-drawer.is-open { transform: translateX(0); visibility: visible; } .nav-drawer__list { display: flex; flex-direction: column; } .nav-drawer__link { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; font-family: var(--font-display); font-weight: var(--fw-medium); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); letter-spacing: var(--ls-tight); color: var(--color-text); border-bottom: 1px solid var(--color-border); } .nav-drawer__sublist { padding: var(--space-2) 0 var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); } .nav-drawer__sublink { padding: var(--space-2) 0; color: var(--color-text-secondary); font-size: var(--fs-body); } .nav-drawer__cta { margin-top: var(--space-6); } .form { display: flex; flex-direction: column; gap: var(--space-5); } .hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: var(--space-2); } .field--full { grid-column: 1 / -1; } .field__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text); } .field__label .req { color: var(--color-accent); } .field__hint { font-size: var(--fs-xs); color: var(--color-text-muted); } .field__control { width: 100%; padding: 0.8125rem 1rem; font-size: var(--fs-sm); color: var(--color-text); background: var(--color-surface-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard); } .field__control:hover { border-color: var(--slate-500); } .field__control:focus-visible { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); background: var(--color-surface); } textarea.field__control { min-height: 132px; line-height: var(--lh-normal); } select.field__control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2395a0b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.75rem; } .field.has-error .field__control { border-color: var(--color-danger); } .field__error { font-size: var(--fs-xs); color: var(--color-danger); display: none; } .field.has-error .field__error { display: block; } .check { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-secondary); } .check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-accent); flex-shrink: 0; } .form-status { display: none; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); font-size: var(--fs-sm); } .form-status.is-visible { display: flex; } .form-status--success { background: rgba(33,193,121,0.1); border: 1px solid rgba(33,193,121,0.3); color: var(--color-text); } .form-status--error { background: rgba(240,71,87,0.1); border: 1px solid rgba(240,71,87,0.3); color: var(--color-text); } .steps { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); counter-reset: step; } .step { position: relative; padding-top: var(--space-6); } .step::before { counter-increment: step; content: "0" counter(step); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-accent); } .step__bar { height: 2px; background: var(--color-border); margin: var(--space-3) 0; position: relative; overflow: hidden; } .step__bar::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--color-accent); } .step__title { font-size: var(--fs-h4); color: var(--color-text); margin-bottom: var(--space-3); } .step__body { font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: var(--lh-relaxed); } .trust-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-8); } .trust-row__item { color: var(--color-text-muted); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); opacity: 0.7; transition: opacity var(--dur-base), color var(--dur-base); } .trust-row__item:hover { opacity: 1; color: var(--color-text-secondary); } .cta-banner { position: relative; overflow: hidden; padding: clamp(3rem, 1.5rem + 7vw, 8rem) clamp(1.5rem, 1rem + 4vw, 6rem); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); text-align: center; } .cta-banner::before { content: ""; position: absolute; inset: 0; background: var(--gradient-hero-glow); pointer-events: none; } .cta-banner > * { position: relative; } .cta-banner__title { font-size: var(--fs-h2); max-width: 18ch; margin: 0 auto var(--space-5); } .cta-banner__lede { font-size: var(--fs-body-lg); color: var(--color-text-secondary); max-width: 52ch; margin: 0 auto var(--space-8); } .page-hero { position: relative; padding-block: clamp(4rem, 2rem + 9vw, 9.5rem) var(--section-y-sm); overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; background: var(--gradient-hero-glow); pointer-events: none; } .page-hero > .container { position: relative; } .breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: var(--space-5); } .breadcrumb a { color: var(--color-text-muted); } .breadcrumb a:hover { color: var(--color-text); } .breadcrumb__sep { color: var(--color-text-faint); } .page-hero__title { font-size: var(--fs-h1); line-height: var(--lh-display); max-width: 16ch; margin-bottom: var(--space-6); } .page-hero__lede { font-size: var(--fs-body-lg); color: var(--color-text-secondary); max-width: 56ch; line-height: var(--lh-relaxed); } .footer-col__title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-text-muted); margin-bottom: var(--space-4); } .footer-col__list { display: flex; flex-direction: column; gap: var(--space-3); } .footer-col__list a { color: var(--color-text-secondary); font-size: var(--fs-sm); } .footer-col__list a:hover { color: var(--color-text); } .footer-brand__desc { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); max-width: 32ch; margin-top: var(--space-4); } .footer-legal { color: var(--color-text-muted); font-size: var(--fs-xs); } .social-row { display: flex; gap: var(--space-2); } .social-row a { width: 38px; height: 38px; display: grid; place-items: center; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast); } .social-row a:hover { color: var(--color-text); border-color: var(--color-border-strong); background: var(--color-surface-2); } .social-row svg { width: 18px; height: 18px; } @media (min-width: 1281px) { .nav-drawer { display: none; } } @media (max-width: 1280px) { .nav, .site-header .lang-switch { display: none; } .nav-toggle { display: inline-flex; } } @media (max-width: 560px) { .site-header .btn--primary { display: none; } .brand__suffix { display: none; } } .theme-toggle { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-secondary); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-pill); transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), transform var(--dur-base) var(--ease-spring); } .theme-toggle:hover { color: var(--color-text); border-color: var(--color-border-strong); background: var(--color-surface-3); } .theme-toggle:active { transform: scale(0.9); } .theme-toggle:focus-visible { box-shadow: var(--focus-ring); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } :root[data-theme="light"] .theme-toggle__sun { display: block; } :root[data-theme="light"] .theme-toggle__moon { display: none; } .scroll-progress { position: fixed; inset-block-start: 0; inset-inline: 0; height: 2px; z-index: calc(var(--z-header) + 1); pointer-events: none; } .scroll-progress__bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--color-accent), var(--color-data)); box-shadow: 0 0 14px var(--color-accent-ring); transform-origin: left; transition: width 90ms linear; } .stat__value { font-family: var(--font-display); letter-spacing: var(--ls-tighter); } .btn { position: relative; overflow: hidden; } .btn--primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,0.28) 50%, transparent 68%); transform: translateX(-130%); transition: transform var(--dur-slower) var(--ease-out); pointer-events: none; } .btn--primary:hover::after { transform: translateX(130%); } .card--interactive:hover { box-shadow: var(--shadow-lg); } .nav__link { position: relative; } :root.theme-anim, :root.theme-anim *:not(.scroll-progress__bar) { transition: background-color 0.45s var(--ease-standard), border-color 0.45s var(--ease-standard), color 0.45s var(--ease-standard), fill 0.45s var(--ease-standard) !important; } :root[data-theme="light"] .badge--live .badge__dot { box-shadow: 0 0 0 3px rgba(33,193,121,0.2); } .aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .aurora::before, .aurora::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; } .aurora::before { width: 62vw; height: 62vw; left: -14vw; top: -24vw; background: radial-gradient(circle, var(--aurora-1), transparent 62%); animation: aurora-drift 26s var(--ease-in-out) infinite alternate; } .aurora::after { width: 52vw; height: 52vw; right: -14vw; top: -10vw; background: radial-gradient(circle, var(--aurora-3), transparent 62%); animation: aurora-drift 34s var(--ease-in-out) infinite alternate-reverse; } .aurora--soft::before { opacity: .7; } .aurora--soft::after { opacity: .6; } .section-head { max-width: 960px; margin-bottom: clamp(3rem, 2rem + 4vw, 6rem); } .section-head__title { line-height: 1.02; } .section-head__eyebrow { font-size: var(--fs-2xs); margin-bottom: var(--space-5); } .section-head__lede { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); } .section-head--xl .section-head__title { font-size: var(--fs-h1); } .statement { position: relative; padding-block: var(--section-y); overflow: hidden; } .statement .container { position: relative; z-index: 1; } .statement__text { font-family: var(--font-display); font-size: var(--fs-statement); font-weight: var(--fw-medium); line-height: 1; letter-spacing: var(--ls-tighter); color: var(--color-text); max-width: 20ch; text-wrap: balance; } .statement--center .statement__text { margin-inline: auto; text-align: center; } .statement__text .dim { color: var(--color-text-muted); } .statement__text .accent { background: var(--gradient-display); -webkit-background-clip: text; background-clip: text; color: transparent; } .statement__line { display: block; } .statement__sub { font-size: var(--fs-body-lg); color: var(--color-text-secondary); max-width: 60ch; line-height: var(--lh-relaxed); margin-top: var(--space-7); } .statement--center .statement__sub { margin-inline: auto; text-align: center; } .media-frame { position: relative; border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); overflow: hidden; background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-subtle) 100%); box-shadow: var(--shadow-lg); } .media-frame::after, .scrolly__figure::after { content: ""; position: absolute; inset: 12px; pointer-events: none; z-index: 2; --mark: color-mix(in srgb, var(--color-accent) 60%, transparent); --ml: 16px; background: linear-gradient(var(--mark), var(--mark)) top left / var(--ml) 1px no-repeat, linear-gradient(var(--mark), var(--mark)) top left / 1px var(--ml) no-repeat, linear-gradient(var(--mark), var(--mark)) top right / var(--ml) 1px no-repeat, linear-gradient(var(--mark), var(--mark)) top right / 1px var(--ml) no-repeat, linear-gradient(var(--mark), var(--mark)) bottom left / var(--ml) 1px no-repeat, linear-gradient(var(--mark), var(--mark)) bottom left / 1px var(--ml) no-repeat, linear-gradient(var(--mark), var(--mark)) bottom right / var(--ml) 1px no-repeat, linear-gradient(var(--mark), var(--mark)) bottom right / 1px var(--ml) no-repeat; } .media-frame > svg, .media-frame > img { display: block; width: 100%; height: auto; position: relative; } .showcase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: center; padding-block: var(--section-y-sm); } .showcase--reverse .showcase__media { order: -1; } .showcase__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-4); } .showcase__title { font-size: var(--fs-h2); margin-bottom: var(--space-5); } .showcase__text { font-size: var(--fs-body-lg); color: var(--color-text-secondary); line-height: var(--lh-relaxed); } .showcase__media { position: relative; } .scrolly { position: relative; } .scrolly__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem, 1rem + 4vw, 5rem); } .scrolly__sticky { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: flex; align-items: center; } .scrolly__steps { display: flex; flex-direction: column; } .scrolly__step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.35; transition: opacity var(--dur-slow) var(--ease-out); } .scrolly__step.is-active { opacity: 1; } .scrolly__step-num { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-accent); margin-bottom: var(--space-3); } .scrolly__step-title { font-size: var(--fs-h3); margin-bottom: var(--space-4); } .scrolly__step-body { font-size: var(--fs-body-lg); color: var(--color-text-secondary); line-height: var(--lh-relaxed); max-width: 46ch; } .stack-viz { width: 100%; max-width: 480px; margin-inline: auto; display: grid; gap: var(--space-3); } .stack-layer { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); opacity: 0.45; transform: scale(0.97) translateZ(0); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base), background-color var(--dur-base), box-shadow var(--dur-base); } .stack-layer.is-active { opacity: 1; transform: scale(1); border-color: var(--color-accent); background: var(--color-surface-2); box-shadow: var(--shadow-lg); } .stack-layer__icon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; color: var(--color-accent); background: var(--color-accent-soft); border-radius: var(--radius-md); } .stack-layer__icon svg { width: 22px; height: 22px; } .stack-layer__num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); } .stack-layer__title { font-size: var(--fs-h4); color: var(--color-text); } @media (max-width: 900px) { .showcase, .showcase--reverse { grid-template-columns: 1fr; } .showcase--reverse .showcase__media { order: 0; } .scrolly__grid { grid-template-columns: 1fr; gap: 0; } .scrolly__sticky { position: static; height: auto; margin-bottom: var(--space-7); } .scrolly__step { min-height: 0; opacity: 1; padding-block: var(--space-6); border-top: 1px solid var(--color-border); } } @media (prefers-reduced-motion: reduce) { .aurora::before, .aurora::after { animation: none !important; } .scrolly__step { opacity: 1 !important; } .stack-layer { opacity: 1 !important; transform: none !important; } } .scrolly__figure { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 4 / 3; border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-subtle) 100%); } .scrolly__scene { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(0.5rem, 1.5vw, 1.25rem); opacity: 0; transform: scale(0.97); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); } .scrolly__scene.is-active { opacity: 1; transform: scale(1); } .scrolly__scene img, .scrolly__scene > svg { width: 100%; height: auto; max-height: 100%; } .figure { margin: 0; } .big-list { display: grid; } .big-list__item { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.25rem, 3vw, 3rem); padding: clamp(1.5rem, 3vw, 2.75rem) 0; border-top: 1px solid var(--color-border); align-items: start; } .big-list__num { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--color-text-faint); line-height: 0.9; letter-spacing: var(--ls-tighter); } .big-list__title { font-size: var(--fs-h4); color: var(--color-text); margin-bottom: var(--space-2); } .big-list__body { color: var(--color-text-secondary); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); max-width: 60ch; } .scale-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); } @media (max-width: 1080px) { .scale-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .scale-row { grid-template-columns: 1fr; } } .tile { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), background-color var(--dur-base); } a.tile:hover { transform: translateY(-4px); border-color: var(--color-border-strong); background: var(--color-surface-2); } .tile__icon { width: 52px; height: 52px; display: grid; place-items: center; color: var(--color-accent); background: var(--color-accent-soft); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .tile__icon svg { width: 26px; height: 26px; } .tile__title { font-size: var(--fs-h4); color: var(--color-text); } .tile__body { font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: var(--lh-relaxed); margin-top: auto; } .results { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .result-card { display: flex; flex-direction: column; gap: var(--space-3); padding: clamp(1.4rem, 1rem + 1.4vw, 2rem); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); transition: transform 0.25s ease, border-color 0.25s ease; } .result-card:hover { transform: translateY(-3px); border-color: var(--color-border-strong); } .result-card__metric { font-family: var(--font-display); font-weight: 500; line-height: 1; font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem); letter-spacing: var(--ls-tighter); color: var(--color-gold); } :root[data-theme="light"] .result-card__metric { color: var(--gold-700); } .result-card__label { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); color: var(--color-text); } .result-card__body { font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: var(--lh-normal); } .result-card__sector { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-border-faint); font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .quote-card { max-width: 880px; margin: var(--space-9) auto 0; text-align: center; padding: clamp(1.6rem, 1rem + 2vw, 2.6rem); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-xl); } .quote-card__text { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.3; letter-spacing: var(--ls-tight); color: var(--color-text); } .quote-card__attr { display: block; margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .booking { max-width: 720px; margin: 0 auto; text-align: center; position: relative; overflow: hidden; padding: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); } .booking::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gradient-gold); opacity: 0.9; } .booking__title { font-size: var(--fs-h2); margin: var(--space-3) 0; } .booking__lede { font-size: var(--fs-body-lg); color: var(--color-text-secondary); max-width: 52ch; margin: 0 auto var(--space-6); } .booking__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } .booking__alt { margin-top: var(--space-5); font-size: var(--fs-sm); } .booking-embed { min-height: 580px; margin-top: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .form-more { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); overflow: hidden; } .form-more__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; font-size: var(--fs-sm); font-weight: 500; color: var(--color-text-secondary); } .form-more__summary::-webkit-details-marker { display: none; } .form-more__summary:hover { color: var(--color-text); } .form-more__chevron { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.2s ease; } .form-more[open] .form-more__summary { color: var(--color-text); } .form-more[open] .form-more__chevron { transform: rotate(180deg); } .form-more__grid { padding: 0 var(--space-5) var(--space-5); } .form-alt { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--color-text-muted); } .faq { max-width: var(--container-narrow); border-top: 1px solid var(--color-border); } .faq__item { border-bottom: 1px solid var(--color-border); } .faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--color-text); transition: color var(--dur-fast) var(--ease-standard); } .faq__question::-webkit-details-marker { display: none; } .faq__question:hover { color: var(--color-accent-hover); } .faq__question:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); } .faq__chevron { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-text-muted); transition: transform var(--dur-base) var(--ease-out); } .faq__item[open] .faq__chevron { transform: rotate(180deg); color: var(--color-accent); } .faq__answer { max-width: var(--container-reading); padding: 0 0 var(--space-5); margin: 0; color: var(--color-text-secondary); line-height: var(--lh-normal); } .whatsapp-fab { position: fixed; right: clamp(1rem, 0.6rem + 1.6vw, 2rem); bottom: clamp(1rem, 0.6rem + 1.6vw, 1.75rem); z-index: calc(var(--z-header) - 1); display: inline-flex; align-items: center; min-height: 52px; padding: 0 calc(var(--space-3) + 2px); border-radius: var(--radius-pill); background: var(--gradient-gold); color: var(--color-accent-contrast); box-shadow: var(--shadow-gold), var(--shadow-inset-line); text-decoration: none; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); } .whatsapp-fab:hover { color: var(--color-accent-contrast); transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 18px 44px -8px rgba(221, 180, 99, 0.55), var(--shadow-inset-line); } .whatsapp-fab:active { transform: translateY(0); filter: brightness(0.98); } .whatsapp-fab:focus-visible { outline: none; box-shadow: var(--focus-ring); } .whatsapp-fab__icon { width: 24px; height: 24px; flex-shrink: 0; } .whatsapp-fab__label { font-weight: var(--fw-semibold); font-size: var(--fs-sm); white-space: nowrap; max-width: 0; overflow: hidden; opacity: 0; transition: max-width var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out), margin var(--dur-slow) var(--ease-out); } .whatsapp-fab:hover .whatsapp-fab__label, .whatsapp-fab:focus-visible .whatsapp-fab__label { max-width: 14ch; opacity: 1; margin-right: var(--space-2); } @media (max-width: 720px) { .whatsapp-fab { min-height: 48px; padding: 0 var(--space-3); } .whatsapp-fab__icon { width: 22px; height: 22px; } } @media print { .whatsapp-fab { display: none; } } .lang-toast { position: fixed; left: clamp(1rem, 0.6rem + 1.6vw, 2rem); bottom: clamp(1rem, 0.6rem + 1.6vw, 1.75rem); z-index: var(--z-toast); display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-4); max-width: min(92vw, 27rem); padding: var(--space-4) var(--space-5); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .lang-toast__text { margin: 0; font-size: var(--fs-sm); color: var(--color-text-secondary); } .lang-toast__actions { display: flex; align-items: center; gap: var(--space-3); } .lang-toast__dismiss { background: none; border: none; cursor: pointer; padding: var(--space-1); font-size: var(--fs-xs); color: var(--color-text-muted); text-decoration: underline; } .lang-toast__dismiss:hover { color: var(--color-text); } @media (prefers-reduced-motion: reduce) { .whatsapp-fab, .whatsapp-fab__label, .faq__chevron { transition: none; } } .rail { margin-inline: calc(-1 * var(--gutter)); } .rail__track { display: flex; gap: var(--grid-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: var(--space-2) var(--gutter) var(--space-4); scrollbar-width: none; } .rail__track::-webkit-scrollbar { display: none; } .rail__track > * { flex: 0 0 clamp(264px, 76vw, 340px); scroll-snap-align: start; } .rail__track:focus-visible { box-shadow: none; outline: 2px solid var(--color-accent-ring); outline-offset: -2px; } .rail__controls { display: flex; justify-content: flex-end; gap: var(--space-2); padding-inline: var(--gutter); margin-top: var(--space-4); } .rail__btn { width: 44px; height: 44px; display: grid; place-items: center; color: var(--color-text); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-pill); transition: background-color var(--dur-fast), border-color var(--dur-fast), opacity var(--dur-fast); } .rail__btn:hover { background: var(--color-surface-3); border-color: var(--color-border-strong); } .rail__btn[disabled] { opacity: 0.35; cursor: default; } .rail__btn svg { width: 18px; height: 18px; } .no-js .rail__controls { display: none; } .disciplines { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) clamp(1.25rem, 0.8rem + 1.6vw, 2.75rem); margin-top: clamp(3rem, 2rem + 3vw, 5rem); font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--color-text-muted); } .label-mono { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-3); } .cluster--center { justify-content: center; } .social-row--spaced { margin-top: var(--space-5); } .ill { display: block; width: 100%; height: auto; overflow: visible; } .ill, .ill * { fill: none; vector-effect: non-scaling-stroke; } .ill .gr { stroke: color-mix(in srgb, var(--color-text) 6%, transparent); stroke-width: 1; } .ill .gr2 { stroke: color-mix(in srgb, var(--color-text) 9%, transparent); stroke-width: 1; } .ill .pm { stroke: color-mix(in srgb, var(--color-text) 22%, transparent); stroke-width: 1; } .ill .ln { stroke: color-mix(in srgb, var(--color-text) 46%, transparent); stroke-width: 1; } .ill .lm { stroke: color-mix(in srgb, var(--color-text) 22%, transparent); stroke-width: 1; } .ill .az { stroke: var(--color-accent); stroke-width: 1; } .ill .cy { stroke: var(--color-data); stroke-width: 1; } .ill .vi { stroke: var(--color-violet); stroke-width: 1; } .ill .go { stroke: var(--amber-500); stroke-width: 1; } .ill .gn { stroke: var(--color-green); stroke-width: 1; } .ill .w15 { stroke-width: 1.5; } .ill .dash { stroke-dasharray: 3 5; } .ill .dim { opacity: 0.45; } .ill .fbg { fill: var(--color-surface); } .ill .faz { fill: var(--color-accent); } .ill .fcy { fill: var(--color-data); } .ill .fink { fill: color-mix(in srgb, var(--color-text) 55%, transparent); } .ill .fsaz { fill: color-mix(in srgb, var(--color-accent) 9%, transparent); } .ill .fscy { fill: color-mix(in srgb, var(--color-data) 14%, transparent); } .ill text { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; fill: var(--color-text-muted); stroke: none; } .ill .txa { fill: var(--color-accent); } :root[data-theme="light"] .ill .cy { stroke: #0e9aa8; } :root[data-theme="light"] .ill .fcy { fill: #0e9aa8; } @keyframes ill-flow { to { stroke-dashoffset: -48; } } @keyframes ill-pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } } @keyframes ill-blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } } @keyframes ill-scan { from { transform: translateY(0); } to { transform: translateY(108px); } } .ill .fl { stroke-dasharray: 2 10; animation: ill-flow 2.6s linear infinite; } .ill .pl { transform-box: fill-box; transform-origin: center; animation: ill-pulse 2.8s var(--ease-out) infinite; } .ill .bk { animation: ill-blink 2.4s var(--ease-in-out) infinite; } .ill .bk2 { animation: ill-blink 2.4s var(--ease-in-out) 0.8s infinite; } .ill .bk3 { animation: ill-blink 2.4s var(--ease-in-out) 1.6s infinite; } .ill .rt { transform-box: view-box; animation: orbit 60s linear infinite; } .ill .sc { animation: ill-scan 2.8s var(--ease-in-out) infinite alternate; } .ill .fl, .ill .pl, .ill .bk, .ill .bk2, .ill .bk3, .ill .rt, .ill .sc { animation-play-state: paused; } .ill.is-live .fl, .ill.is-live .pl, .ill.is-live .bk, .ill.is-live .bk2, .ill.is-live .bk3, .ill.is-live .rt, .ill.is-live .sc { animation-play-state: running; } @media (prefers-reduced-motion: reduce) { .ill .fl, .ill .pl, .ill .bk, .ill .bk2, .ill .bk3, .ill .rt, .ill .sc { animation: none; } .ill .pl { opacity: 0; } } @property --mk-l { syntax: "<length>"; inherits: false; initial-value: 0px; } .card { --card-pad: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); padding: var(--card-pad); background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface) 62%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 7%, transparent); } .card--interactive { --mk: color-mix(in srgb, var(--card-accent) 80%, transparent); background: linear-gradient(var(--mk), var(--mk)) top 10px left 10px / var(--mk-l) 1px no-repeat, linear-gradient(var(--mk), var(--mk)) top 10px left 10px / 1px var(--mk-l) no-repeat, linear-gradient(var(--mk), var(--mk)) top 10px right 10px / var(--mk-l) 1px no-repeat, linear-gradient(var(--mk), var(--mk)) top 10px right 10px / 1px var(--mk-l) no-repeat, linear-gradient(var(--mk), var(--mk)) bottom 10px left 10px / var(--mk-l) 1px no-repeat, linear-gradient(var(--mk), var(--mk)) bottom 10px left 10px / 1px var(--mk-l) no-repeat, linear-gradient(var(--mk), var(--mk)) bottom 10px right 10px / var(--mk-l) 1px no-repeat, linear-gradient(var(--mk), var(--mk)) bottom 10px right 10px / 1px var(--mk-l) no-repeat, linear-gradient(180deg, var(--color-surface-2), var(--color-surface) 62%); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), --mk-l var(--dur-slow) var(--ease-out); } .card--interactive:hover { --mk-l: 12px; border-color: color-mix(in srgb, var(--card-accent) 38%, var(--color-border)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--card-accent) 55%, transparent), var(--shadow-lg); } .card__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) var(--card-pad); background-color: var(--color-bg-subtle); background-image: linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-text) 4%, transparent) 1px, transparent 1px); background-size: 24px 24px; background-position: center; border-bottom: 1px solid var(--color-border); overflow: hidden; } .card__media .ill { width: 100%; height: 100%; } .card__media .ill text, .card__media .ill .gr { display: none; } .bento-fam { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--grid-gap); } .bento-fam > * { grid-column: span 2; } .bento-fam > :nth-child(-n+2) { grid-column: span 3; } .bento-fam > :nth-child(-n+2) .card__media { aspect-ratio: 16 / 9; } @media (max-width: 1024px) { .bento-fam { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento-fam > *, .bento-fam > :nth-child(-n+2) { grid-column: span 1; } .bento-fam > :first-child { grid-column: 1 / -1; } } @media (max-width: 640px) { .bento-fam { grid-template-columns: 1fr; } .bento-fam > *, .bento-fam > :nth-child(-n+2), .bento-fam > :first-child { grid-column: 1 / -1; } } .tech-list { border-top: 1px solid var(--color-border); } .tech-row { --row-accent: var(--color-accent); position: relative; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: var(--space-6); align-items: center; padding: clamp(1.15rem, 0.8rem + 1vw, 1.85rem) var(--space-3); border-bottom: 1px solid var(--color-border); color: inherit; transition: background-color var(--dur-base) var(--ease-standard); } .tech-row::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px; background: var(--row-accent); transform: scaleY(0); transform-origin: center; transition: transform var(--dur-base) var(--ease-out); } .tech-row:hover { color: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--row-accent) 7%, transparent), transparent 72%); } .tech-row:hover::before { transform: scaleY(1); } .tech-row__code { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--row-accent); } .tech-row__name { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h3); letter-spacing: var(--ls-tight); line-height: 1.1; color: var(--color-text); } .tech-row__items { font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: var(--lh-normal); } .tech-row__go { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); color: var(--color-text-secondary); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), color var(--dur-base); } .tech-row__go svg { width: 16px; height: 16px; } .tech-row:hover .tech-row__go { transform: translateX(4px); border-color: var(--row-accent); color: var(--row-accent); } .tech-row--violet { --row-accent: var(--color-violet); } .tech-row--cyan { --row-accent: var(--color-data); } .tech-row--gold { --row-accent: var(--amber-500); } .tech-row--green { --row-accent: var(--color-green); } @media (max-width: 760px) { .tech-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); } .tech-row__code, .tech-row__name, .tech-row__items { grid-column: 1; } .tech-row__go { grid-column: 2; grid-row: 1 / span 3; } } .section--grid { isolation: isolate; } .section--grid::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--color-text) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-text) 5%, transparent) 1px, transparent 1px); background-size: 64px 64px; background-position: center top; -webkit-mask-image: radial-gradient(75% 65% at 50% 45%, #000 15%, transparent 78%); mask-image: radial-gradient(75% 65% at 50% 45%, #000 15%, transparent 78%); } .cta-banner { --mk: color-mix(in srgb, var(--color-accent) 65%, transparent); background: linear-gradient(var(--mk), var(--mk)) top 16px left 16px / 18px 1px no-repeat, linear-gradient(var(--mk), var(--mk)) top 16px left 16px / 1px 18px no-repeat, linear-gradient(var(--mk), var(--mk)) top 16px right 16px / 18px 1px no-repeat, linear-gradient(var(--mk), var(--mk)) top 16px right 16px / 1px 18px no-repeat, linear-gradient(var(--mk), var(--mk)) bottom 16px left 16px / 18px 1px no-repeat, linear-gradient(var(--mk), var(--mk)) bottom 16px left 16px / 1px 18px no-repeat, linear-gradient(var(--mk), var(--mk)) bottom 16px right 16px / 18px 1px no-repeat, linear-gradient(var(--mk), var(--mk)) bottom 16px right 16px / 1px 18px no-repeat, linear-gradient(180deg, var(--color-surface-2), var(--color-surface)); } .cta-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--color-text) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-text) 5%, transparent) 1px, transparent 1px); background-size: 48px 48px; background-position: center; -webkit-mask-image: radial-gradient(60% 80% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(60% 80% at 50% 0%, #000, transparent 75%); } .scrolly--process .scrolly__grid { grid-template-columns: 1.15fr 0.85fr; } .scrolly--process .scrolly__figure { max-width: 680px; } .step-specs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); } .step-specs li { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.45rem 0.8rem; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-pill); } .step-specs li::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--color-accent); } .ill .dial-figure { font-family: var(--font-display); font-weight: 500; font-size: 46px; letter-spacing: -0.03em; fill: var(--color-text); } .ill .fsgo { fill: color-mix(in srgb, var(--amber-500) 12%, transparent); } .ill .fsgn { fill: color-mix(in srgb, var(--color-green) 12%, transparent); } .scrolly__step-num { display: block; font-family: var(--font-display); font-weight: var(--fw-medium); font-size: clamp(3rem, 2rem + 3vw, 5rem); line-height: 1; letter-spacing: 0; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--color-text) 30%, transparent); margin-bottom: var(--space-4); transition: -webkit-text-stroke-color var(--dur-slow) var(--ease-out); } .scrolly__step.is-active .scrolly__step-num { -webkit-text-stroke-color: var(--color-accent); } .scrolly__step-kicker { display: block; margin-bottom: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-accent); } .big-list__num { color: transparent; font-weight: var(--fw-medium); -webkit-text-stroke: 1px var(--color-accent); } @media (max-width: 900px) { .scrolly__step-num { font-size: 2.75rem; -webkit-text-stroke-color: var(--color-accent); } } @keyframes ill-swing { from { transform: rotate(-7deg); } to { transform: rotate(6deg); } } @keyframes ill-swing2 { from { transform: rotate(10deg); } to { transform: rotate(-12deg); } } .ill .sw { transform-box: view-box; animation: ill-swing 3.4s var(--ease-in-out) infinite alternate; } .ill .sw2 { transform-box: view-box; animation: ill-swing2 2.6s var(--ease-in-out) infinite alternate; } .ill .rtf { transform-box: view-box; animation: orbit 1.6s linear infinite; } .ill .sw, .ill .sw2, .ill .rtf { animation-play-state: paused; } .ill.is-live .sw, .ill.is-live .sw2, .ill.is-live .rtf { animation-play-state: running; } @media (prefers-reduced-motion: reduce) { .ill .sw, .ill .sw2, .ill .rtf { animation: none; } }
@keyframes fade-up { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 3px rgba(33,193,121,0.18); } 50% { box-shadow: 0 0 0 6px rgba(33,193,121,0.04); } } @keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } @keyframes dash { to { stroke-dashoffset: 0; } } @keyframes orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes grid-pan { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 84px 84px, 84px 84px, 0 0, 0 0; } } @keyframes node-pulse { 0%, 100% { transform: scale(1); opacity: 0.72; } 50% { transform: scale(1.22); opacity: 1; } } @keyframes panel-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } } @keyframes bar-rise { 0%, 100% { transform: scaleY(0.74); } 50% { transform: scaleY(1); } } @keyframes metric-fill { from { transform: scaleX(0.18); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } } @keyframes rise-in { from { opacity: 0; transform: translate3d(0, 0.55em, 0); } to { opacity: 1; transform: none; } } .js .rise > *, .js .hero__title .line { animation: rise-in 900ms var(--ease-out) both; animation-delay: calc(var(--d, 0) * 90ms + 60ms); } .js .hero__title .line { display: block; } .js .rise > :nth-child(2) { --d: 1; } .js .rise > :nth-child(3) { --d: 2; } .js .rise > :nth-child(4) { --d: 3; } .js .rise > :nth-child(5) { --d: 4; } .js .rise > :nth-child(6) { --d: 5; } .js .rise > :nth-child(7) { --d: 6; } .js .hero__title .line:nth-child(2) { --d: 1; } .js .hero__title .line:nth-child(3) { --d: 2; } .js .hero__title .line:nth-child(4) { --d: 3; } .hero__title .line { display: block; } [data-reveal] { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); will-change: opacity, transform; } [data-reveal="fade"] { transform: none; } [data-reveal="scale"] { transform: scale(0.97); } [data-reveal="left"] { transform: translate3d(-28px, 0, 0); } [data-reveal="right"] { transform: translate3d(28px, 0, 0); } [data-reveal].is-visible { opacity: 1; transform: none; will-change: auto; } [data-reveal-stagger] > * { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); } [data-reveal-stagger].is-visible > * { opacity: 1; transform: none; } .counting { font-variant-numeric: tabular-nums; } .draw-line { position: relative; } .draw-line::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: linear-gradient(90deg, var(--color-accent), transparent); transition: width var(--dur-slower) var(--ease-out); } .draw-line.is-visible::after { width: 100%; } .float-soft { animation: float-soft 7s var(--ease-in-out) infinite; } @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; } .float-soft, .hero-figure__core, .hero-figure__sweep, .hero-figure__node, .hero-figure__orbit { animation: none !important; } } [data-reveal="blur"] { filter: blur(12px); transform: translate3d(0, 18px, 0); transition: opacity var(--dur-slower) var(--ease-out), transform var(--dur-slower) var(--ease-out), filter var(--dur-slower) var(--ease-out); } [data-reveal="blur"].is-visible { filter: blur(0); transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal="blur"] { filter: none !important; } } @keyframes aurora-drift { from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } to { transform: translate3d(4vw, 3vw, 0) rotate(16deg) scale(1.08); } } [data-parallax] { will-change: transform; } .statement__line { will-change: opacity, transform; } .page-transition { position: fixed; inset: 0; z-index: var(--z-max); pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--color-accent) 9%, transparent), transparent 60%), var(--color-bg-subtle); display: grid; place-items: center; opacity: 0; } .page-transition__mark { max-width: 150px; max-height: 40px; width: auto; height: auto; opacity: 0; transform: scale(0.9); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--color-accent) 45%, transparent)); } .page-transition__edge { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gradient-accent-line); opacity: 0; } html.is-leaving .page-transition { opacity: 1; transition: opacity 240ms var(--ease-standard); } html.is-leaving .page-transition__mark { opacity: 1; transform: scale(1); transition: opacity 200ms var(--ease-out) 40ms, transform 320ms var(--ease-out); } html.is-leaving .page-transition__edge { opacity: 1; transition: opacity 180ms linear; } @keyframes page-enter { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes header-enter { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .js .site-main { animation: page-enter 520ms var(--ease-out) both; } .js .site-header { animation: header-enter 520ms var(--ease-out) both; } @media (prefers-reduced-motion: reduce) { .page-transition { display: none !important; } .js .site-main, .js .site-header, .js .rise > *, .js .hero__title .line { animation: none !important; } } .js .rise > .hero__title { animation: none; }
.hero { position: relative; min-height: clamp(640px, 94svh, 1000px); display: flex; align-items: center; padding-block: clamp(4rem, 2.5rem + 6vw, 8rem); overflow: hidden; isolation: isolate; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(44rem 34rem at 74% 24%, rgba(61, 123, 255, 0.18), transparent 66%), radial-gradient(34rem 30rem at 92% 74%, rgba(138, 99, 255, 0.15), transparent 72%), radial-gradient(36rem 28rem at 12% 22%, rgba(45, 96, 200, 0.12), transparent 72%), linear-gradient(90deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 84%, transparent) 46%, color-mix(in srgb, var(--color-bg) 64%, transparent) 100%); pointer-events: none; } .hero::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%); pointer-events: none; z-index: 0; } .hero > .container { position: relative; z-index: 2; } .hero__content { max-width: min(900px, 60vw); } .hero__eyebrow { margin-bottom: var(--space-6); } .hero__title { font-size: var(--fs-display); font-weight: var(--fw-semibold); line-height: var(--lh-display); letter-spacing: var(--ls-tighter); margin-bottom: var(--space-7); } .hero__title .accent-word { background: var(--gradient-display); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__lede { font-size: var(--fs-body-lg); color: var(--color-text-secondary); line-height: var(--lh-relaxed); max-width: 50ch; margin-bottom: var(--space-8); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); } .hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-5) clamp(1.5rem, 1rem + 2.5vw, 3.5rem); max-width: 100%; } .hero__meta .stat { padding-left: var(--space-5); border-left: 1px solid var(--color-border-strong); } .hero__meta .stat:first-child { padding-left: 0; border-left: 0; } .hero__meta .stat__value { font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem); } .hero-figure { position: absolute; inset: 0 calc(-1 * var(--gutter) * 0.4) 0 auto; width: clamp(420px, 56vw, 900px); z-index: 1; pointer-events: none; display: grid; place-items: center; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 100%); } .hero-figure__globe { position: relative; width: clamp(360px, 42vw, 660px); height: auto; color: var(--color-text-faint); overflow: visible; } .hero-figure__wire { will-change: opacity; } .qg-line--gold { stroke: var(--color-accent); } .hero-figure__node { fill: var(--azure-300); } .qg-orbit-ring { stroke: var(--color-violet); stroke-opacity: 0.20; fill: none; } .qg-sat { fill: var(--color-violet); } .qg-core-0 { stop-color: var(--azure-300); stop-opacity: 0.30; } .qg-core-1 { stop-color: var(--azure-500); stop-opacity: 0.07; } .qg-core-2 { stop-color: var(--azure-500); stop-opacity: 0; } .hero-figure__core { position: absolute; width: clamp(260px, 30vw, 460px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--hero-glow-color) 0%, transparent 62%); filter: blur(8px); animation: core-breathe 7s var(--ease-in-out) infinite; } .hero-figure__sweep { position: absolute; width: clamp(360px, 42vw, 660px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, rgba(61,123,255,0.16) 30deg, transparent 64deg); -webkit-mask-image: radial-gradient(circle, transparent 0 28%, #000 30% 49%, transparent 50%); mask-image: radial-gradient(circle, transparent 0 28%, #000 30% 49%, transparent 50%); animation: orbit 22s linear infinite; opacity: 0.8; } .hero-figure__node { transform-box: fill-box; transform-origin: center; animation: node-pulse 3.2s var(--ease-in-out) infinite; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--azure-400) 60%, transparent)); } .hero-figure__node:nth-child(2) { animation-delay: 0.5s; } .hero-figure__node:nth-child(3) { animation-delay: 1s; } .hero-figure__node:nth-child(4) { animation-delay: 1.6s; } .hero-figure__orbit { transform-box: view-box; transform-origin: 300px 300px; animation: orbit 16s linear infinite; } .hero-mark { position: absolute; inset: 0 calc(-1 * var(--gutter) * 0.4) 0 auto; width: clamp(420px, 56vw, 900px); z-index: 1; pointer-events: none; display: grid; place-items: center; } .hero-mark__q { width: clamp(190px, 24vw, 380px); height: auto; display: none; filter: drop-shadow(0 12px 34px rgba(0, 0, 0, 0.45)); animation: float-soft 8s var(--ease-in-out) infinite; } :root[data-theme="dark"] .hero-mark__q--dark, :root:not([data-theme]) .hero-mark__q--dark { display: block; } :root[data-theme="light"] .hero-mark__q--light { display: block; } @media (max-width: 940px) { .hero-mark { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-mark__q { animation: none; } } @keyframes core-breathe { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { .hero-figure__core, .hero-figure__sweep, .hero-figure__node, .hero-figure__orbit { animation: none !important; } } @media (max-width: 940px) { .hero { min-height: auto; padding-block: clamp(4.5rem, 5vw, 6rem) clamp(4rem, 7vw, 6rem); } .hero__content { max-width: 100%; } .hero-figure { inset: auto 0 -8% auto; width: min(620px, 96vw); height: 70%; opacity: 0.4; -webkit-mask-image: radial-gradient(70% 70% at 70% 50%, #000 0 46%, transparent 78%); mask-image: radial-gradient(70% 70% at 70% 50%, #000 0 46%, transparent 78%); } .hero__meta { width: 100%; } } .industry-grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; } .disclose-list { display: grid; gap: var(--space-4); } .industry { --ind: var(--color-accent); --ind-soft: color-mix(in srgb, var(--ind) 13%, transparent); position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: linear-gradient(180deg, color-mix(in srgb, var(--ind) 6%, transparent), transparent 38%), var(--color-surface); overflow: hidden; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out); } .industry::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--ind), transparent 72%); opacity: 0.85; } .industry:hover { border-color: color-mix(in srgb, var(--ind) 42%, var(--color-border)); box-shadow: 0 20px 54px -22px color-mix(in srgb, var(--ind) 55%, transparent); } .industry__head { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: start; padding: var(--space-5); text-align: left; background: none; } .industry__icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--ind); background: var(--ind-soft); border: 1px solid color-mix(in srgb, var(--ind) 26%, transparent); border-radius: var(--radius-md); } .industry__icon svg { width: 24px; height: 24px; } .industry__heading { min-width: 0; } .industry__kicker { display: block; margin-bottom: 5px; font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--ind); } .industry__title { display: block; font-size: var(--fs-h4); color: var(--color-text); } .industry__pitch { display: block; margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: var(--lh-normal); } .industry__toggle { align-self: center; width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius-pill); transition: transform var(--dur-base) var(--ease-out), color var(--dur-base), border-color var(--dur-base); } .industry__toggle svg { width: 16px; height: 16px; } .industry__head:hover .industry__toggle { color: var(--ind); border-color: color-mix(in srgb, var(--ind) 50%, transparent); } .industry__head[aria-expanded="true"] .industry__toggle { transform: rotate(45deg); color: var(--ind); border-color: var(--ind); } .industry__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); } .industry__head[aria-expanded="true"] + .industry__panel { grid-template-rows: 1fr; } .industry__panel-inner { overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--dur-slow); } .industry__head[aria-expanded="true"] + .industry__panel .industry__panel-inner { visibility: visible; transition-delay: 0s; } .industry__panel-content { padding: var(--space-2) var(--space-5) var(--space-5); border-top: 1px solid var(--color-border); margin-top: var(--space-1); } .industry__line { display: flex; gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: var(--lh-normal); margin-top: var(--space-4); } .industry__tag { flex-shrink: 0; width: 5.5rem; font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--ind); padding-top: 2px; } .industry__uc-label { display: block; margin: var(--space-5) 0 var(--space-3); font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-text-muted); } .industry__uc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-2) var(--space-4); margin-bottom: var(--space-5); } .industry__uc li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-sm); color: var(--color-text-secondary); } .industry__uc li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: 8px; border-radius: 2px; background: var(--ind); box-shadow: 0 0 8px color-mix(in srgb, var(--ind) 60%, transparent); } .industry .link-arrow { color: var(--ind); } .industry--educacion { --ind: var(--azure-500); } .industry--salud { --ind: var(--green-500); } .industry--retail { --ind: #e05a9c; } .industry--manufactura { --ind: var(--cyan-500); } .industry--energia { --ind: var(--amber-500); } .industry--gobierno { --ind: var(--violet-500); } .industry--logistica { --ind: #2bd4a0; } .industry--transporte { --ind: #5b95ff; } .industry--petroleo { --ind: #e0784a; } .industry--investigacion { --ind: #6f8cff; } .industry--tecnologia { --ind: #e5556a; } .industry--finanzas { --ind: #9ace3a; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: center; } .split--reverse .split__media { order: 2; } .split__media { position: relative; padding: var(--space-7); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-inset-line); } .featured-kicker { padding: 0.5rem 0.75rem; font-size: var(--fs-xs); color: var(--color-accent-2); background: var(--color-accent-2-soft); border: 1px solid color-mix(in srgb, var(--color-accent-2) 26%, transparent); border-radius: var(--radius-sm); } .featured-kicker::before { display: none; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--space-7); } .split--reverse .split__media { order: 0; } } .timeline { position: relative; display: grid; gap: var(--space-8); } .timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 22%, transparent)); } .timeline__item { position: relative; padding-left: var(--space-7); } .timeline__item::before { content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: var(--radius-circle); background: var(--color-bg); border: 2px solid var(--color-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 12%, transparent); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .timeline__item:hover::before { transform: scale(1.14); box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 18%, transparent); } .timeline__item--now::before { background: var(--color-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 20%, transparent), 0 0 22px color-mix(in srgb, var(--color-accent) 55%, transparent); } .timeline__year { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-accent); } .timeline__badge { display: inline-block; margin-left: var(--space-3); padding: 2px 10px; border-radius: var(--radius-pill); vertical-align: middle; font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; color: var(--color-accent); background: var(--color-accent-soft); border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); } .timeline__title { font-size: var(--fs-h4); color: var(--color-text); margin: var(--space-2) 0; } .timeline__body { font-size: var(--fs-body); color: var(--color-text-secondary); line-height: var(--lh-relaxed); max-width: 64ch; } .founder { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: var(--space-8); align-items: start; padding: var(--space-8); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-inset-line); } .founder::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 100% 0%, var(--color-accent-soft), transparent 55%); } .founder__aside { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-4); } .founder__avatar { width: 116px; height: 116px; border-radius: var(--radius-circle); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 2.3rem; letter-spacing: var(--ls-tighter); color: var(--color-accent-contrast); background: var(--gradient-gold); object-fit: cover; object-position: center top; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-gold) 42%, transparent), var(--shadow-md); } .founder__name { font-size: var(--fs-h4); color: var(--color-text); } .founder__role { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; color: var(--color-accent); margin-top: 2px; } .founder__links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); } .founder__links a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--color-text-secondary); } .founder__links a:hover { color: var(--color-accent); } .founder__links svg { width: 16px; height: 16px; } .founder__body { position: relative; z-index: 1; } .founder__body > p { color: var(--color-text-secondary); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); } .founder__body > .founder__quote { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--color-text); line-height: var(--lh-snug); margin: var(--space-6) 0 0; padding-left: var(--space-5); border-left: 2px solid var(--color-accent); } @media (max-width: 760px) { .founder { grid-template-columns: 1fr; gap: var(--space-6); } } .statement__eyebrow { display: block; text-align: center; margin-bottom: var(--space-5); } .matrix-diagram { width: 100%; height: auto; display: block; } .matrix-diagram .matrix-grid line { stroke: var(--color-border); stroke-width: 1; } .matrix-diagram .matrix-col-label { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--color-text-secondary); } .matrix-diagram .matrix-node { fill: var(--color-bg); stroke: var(--color-border-strong); stroke-width: 1.5; } .matrix-diagram .matrix-node--on { fill: var(--color-accent); } .matrix-diagram .matrix-glow { fill: none; stroke: var(--color-accent); stroke-width: 1.5; opacity: 0.32; } .matrix-diagram .matrix-link path { stroke: var(--color-accent); stroke-width: 1.75; fill: none; opacity: 0.5; } .matrix-diagram .matrix-hub { fill: var(--color-surface-2); stroke: var(--color-accent); stroke-width: 1.5; } .matrix-diagram .matrix-hub-label { font-family: var(--font-display); font-weight: 600; font-size: 17px; fill: var(--color-text); } .legal-doc { max-width: 78ch; } .legal-doc__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-text-muted); padding-bottom: var(--space-5); margin-bottom: var(--space-7); border-bottom: 1px solid var(--color-border); } .legal-doc__intro { font-size: var(--fs-body-lg); color: var(--color-text-secondary); line-height: var(--lh-relaxed); margin-bottom: var(--space-7); } .legal-doc section { margin-bottom: var(--space-7); scroll-margin-top: calc(var(--header-h) + 1.5rem); } .legal-doc h2 { font-size: var(--fs-h4); color: var(--color-text); margin-bottom: var(--space-4); display: flex; gap: var(--space-3); align-items: baseline; } .legal-doc__num { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-accent); flex-shrink: 0; } .legal-doc h3 { font-size: var(--fs-body-lg); color: var(--color-text); margin: var(--space-5) 0 var(--space-3); } .legal-doc p { color: var(--color-text-secondary); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); } .legal-doc ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); display: grid; gap: var(--space-2); } .legal-doc li { color: var(--color-text-secondary); line-height: var(--lh-relaxed); } .legal-doc li::marker { color: var(--color-accent); } .legal-doc a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; } .legal-doc strong { color: var(--color-text); font-weight: 600; } .legal-doc__note { margin-top: var(--space-7); padding: var(--space-5) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 2px solid var(--color-accent); border-radius: var(--radius-lg); font-size: var(--fs-sm); color: var(--color-text-muted); line-height: var(--lh-relaxed); } .lab-grid--empty { display: block; } .lab-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .lab-card__badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--card-accent); padding: 4px 10px; border-radius: var(--radius-pill); background: var(--card-accent-soft); border: 1px solid color-mix(in srgb, var(--card-accent) 28%, transparent); } .lab-card__tags { margin-top: var(--space-4); } .lab-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); } .lab-card__actions .link-arrow svg { width: 15px; height: 15px; } .lab-card__actions .link-arrow + .link-arrow { color: var(--color-text-muted); } .lab-card__actions .link-arrow + .link-arrow:hover { color: var(--color-accent); } .lab-noscript { grid-column: 1 / -1; text-align: center; color: var(--color-text-muted); padding: var(--space-7); } @keyframes lab-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .lab-card { animation: lab-rise 0.55s var(--ease-out) both; } .lab-card:nth-child(2) { animation-delay: 0.06s; } .lab-card:nth-child(3) { animation-delay: 0.12s; } .lab-card:nth-child(4) { animation-delay: 0.18s; } .lab-card:nth-child(5) { animation-delay: 0.24s; } .lab-card:nth-child(6) { animation-delay: 0.30s; } @media (prefers-reduced-motion: reduce) { .lab-card { animation: none; } } .lab-empty { grid-column: 1 / -1; text-align: center; padding: clamp(2.5rem, 5vw, 4.5rem) var(--space-6); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--color-surface) 60%, transparent); } .lab-empty__icon { width: 58px; height: 58px; margin: 0 auto var(--space-5); display: grid; place-items: center; color: var(--color-accent); background: var(--color-accent-soft); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .lab-empty__icon svg { width: 28px; height: 28px; } .lab-empty__title { font-size: var(--fs-h4); margin-bottom: var(--space-3); } .lab-empty__body { color: var(--color-text-secondary); max-width: 52ch; margin-inline: auto; line-height: var(--lh-relaxed); } .filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-8); } .filterbar__label { font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-text-muted); margin-right: var(--space-2); } .filter-chip { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; padding: 0.55rem 1.05rem; border-radius: var(--radius-pill); cursor: pointer; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .filter-chip:hover { color: var(--color-text); border-color: var(--color-border-strong); } .filter-chip[aria-pressed="true"] { color: var(--color-accent); background: var(--color-accent-soft); border-color: color-mix(in srgb, var(--color-accent) 35%, transparent); } .product-grid { display: grid; gap: var(--grid-gap); align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); } .product { --pa: var(--card-accent, var(--color-accent)); --pa-soft: color-mix(in srgb, var(--pa) 13%, transparent); position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: linear-gradient(180deg, color-mix(in srgb, var(--pa) 6%, transparent), transparent 40%), var(--color-surface); overflow: hidden; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out); } .product::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--pa), transparent 72%); opacity: 0.85; } .product:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--pa) 42%, var(--color-border)); box-shadow: 0 20px 54px -22px color-mix(in srgb, var(--pa) 55%, transparent); } .product[hidden] { display: none; } .product__head { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: start; padding: var(--space-5); text-align: left; background: none; cursor: pointer; } .product__icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--pa); background: var(--pa-soft); border: 1px solid color-mix(in srgb, var(--pa) 26%, transparent); border-radius: var(--radius-md); } .product__icon svg { width: 24px; height: 24px; } .product__heading { min-width: 0; } .product__kicker { display: block; margin-bottom: 5px; font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--pa); } .product__title { display: block; font-size: var(--fs-h4); color: var(--color-text); } .product__pitch { display: block; margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: var(--lh-normal); } .product__toggle { align-self: center; width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius-pill); transition: transform var(--dur-base) var(--ease-out), color var(--dur-base), border-color var(--dur-base); } .product__toggle svg { width: 16px; height: 16px; } .product__head:hover .product__toggle { color: var(--pa); border-color: color-mix(in srgb, var(--pa) 50%, transparent); } .product__head[aria-expanded="true"] .product__toggle { transform: rotate(45deg); color: var(--pa); border-color: var(--pa); } .product__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); } .product__head[aria-expanded="true"] + .product__panel { grid-template-rows: 1fr; } .product__panel-inner { overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--dur-slow); } .product__head[aria-expanded="true"] + .product__panel .product__panel-inner { visibility: visible; transition-delay: 0s; } .product__panel-content { padding: var(--space-2) var(--space-5) var(--space-5); border-top: 1px solid var(--color-border); margin-top: var(--space-1); } .product__line { display: flex; gap: var(--space-4); font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: var(--lh-normal); margin-top: var(--space-4); } .product__line span:last-child { flex: 1; } .product__tag { flex-shrink: 0; width: 6.25rem; padding-top: 2px; font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--pa); } .product__line a { color: var(--pa); text-decoration: underline; text-underline-offset: 2px; } .product__techlabel { display: block; margin: var(--space-5) 0 var(--space-3); font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-text-muted); } .product__panel-content .tag-list { margin-bottom: var(--space-5); } .product .link-arrow { color: var(--pa); } .product-rank-note { display: none; } .js .product-rank-note { display: inline-flex; align-items: center; gap: var(--space-3); margin: calc(-1 * var(--space-2)) 0 var(--space-6); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); color: var(--color-text-muted); } .product-rank-note__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 60%, transparent); animation: rank-note-pulse 2.6s var(--ease-standard) infinite; } @keyframes rank-note-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent); } 70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .product-rank-note__dot { animation: none; } } .product--gold { --card-accent: var(--amber-500); } .product--cyan { --card-accent: var(--cyan-500); } .product--violet { --card-accent: var(--violet-500); } .product--green { --card-accent: var(--green-500); } @media (max-width: 520px) { .product__line { flex-direction: column; gap: var(--space-1); } .product__tag { width: auto; padding-top: 0; } } .contact-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-9); align-items: start; } @media (max-width: 900px) { .contact-split { grid-template-columns: 1fr; gap: var(--space-7); } } .contact-info__item { display: flex; gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--color-border); } .contact-info__icon { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; color: var(--color-accent); background: var(--color-accent-soft); border-radius: var(--radius-sm); } .contact-info__icon svg { width: 20px; height: 20px; } .contact-info__label { font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--ls-wide); } .contact-info__value { font-size: var(--fs-body); color: var(--color-text); margin-top: 2px; } .contact-card { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); } .error-page { position: relative; overflow: hidden; min-height: 70vh; display: grid; place-items: center; text-align: center; padding-block: var(--section-y); } .error-page > .container { position: relative; } .error-code { font-family: var(--font-mono); font-size: clamp(4rem, 2rem + 12vw, 9rem); line-height: 1; color: var(--color-text); letter-spacing: var(--ls-tighter); } .error-code .accent { color: var(--color-accent); } .error-terminal { display: inline-flex; align-items: center; gap: var(--space-3); max-width: min(92vw, 64ch); margin-bottom: var(--space-6); padding: var(--space-2) var(--space-4); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface-2); } .error-terminal__line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .error-terminal__line .accent { color: var(--color-accent); } .error-terminal__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--color-danger); box-shadow: 0 0 0 3px rgba(240, 71, 87, 0.16); animation: pulse-dot 2.4s var(--ease-in-out) infinite; } .error-code--node { display: inline-flex; align-items: center; gap: 0.06em; } .error-code__zero { position: relative; display: inline-block; width: 0.7em; height: 0.7em; margin: 0 0.05em; } .error-code__ring { position: absolute; inset: 0; border-radius: 50%; border: 0.045em dashed var(--color-accent); opacity: 0.9; animation: error-ring-spin 26s linear infinite; } .error-code__sat { position: absolute; inset: -0.16em; animation: error-sat-orbit 7s linear infinite; } .error-code__sat::before { content: ""; position: absolute; top: 50%; left: -0.045em; width: 0.09em; height: 0.09em; margin-top: -0.045em; border-radius: 50%; background: var(--color-gold); box-shadow: 0 0 0.14em 0.02em rgba(221, 180, 99, 0.55); } @keyframes error-ring-spin { to { transform: rotate(360deg); } } @keyframes error-sat-orbit { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .error-code__ring, .error-code__sat, .error-terminal__dot { animation: none; } } .anchor-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); } .anchor-nav a { padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-pill); } .anchor-nav a:hover { color: var(--color-text); border-color: var(--color-border-strong); background: var(--color-surface-2); } @media (min-width: 1440px) { .split { gap: var(--space-12); } } @media (min-width: 1680px) { .grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } } @media (max-width: 400px) { .hero__actions .btn { width: 100%; } .hero__meta { gap: var(--space-5); } } .hero > .container { position: relative; z-index: 1; } .hero .aurora { z-index: 0; } .hero-figure__globe { fill: none; } .qg-bezel { stroke: currentColor; stroke-width: 1; opacity: 0.55; } .qg-bezel__major { stroke: var(--color-text-muted); } .qg-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; fill: var(--color-text-muted); stroke: none; } .qg-arc { fill: none; stroke: var(--color-accent); stroke-width: 1; opacity: 0.5; } .qg-arc--violet { stroke: var(--color-violet); } .qg-arc--data { stroke: var(--color-data); } .qg-flow { opacity: 1; stroke-dasharray: 2 12; animation: ill-flow 3.2s linear infinite; animation-play-state: paused; } .hero-figure__globe.is-live .qg-flow { animation-play-state: running; } @media (prefers-reduced-motion: reduce) { .qg-flow { animation: none; } } .page-hero__dial { position: absolute; z-index: 0; pointer-events: none; top: 50%; right: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter))); width: clamp(360px, 33vw, 540px); translate: 0 -46%; opacity: 0.95; } .js .page-hero__dial { animation: rise-in 1100ms var(--ease-out) 240ms both; } @media (min-width: 1100px) { .page-hero--dial { min-height: clamp(600px, 74vh, 820px); display: flex; align-items: center; } .page-hero--dial > .container { width: 100%; } .page-hero--dial .page-hero__title { max-width: 13ch; } .page-hero--dial .page-hero__lede { max-width: 44ch; } } @media (max-width: 1099px) { .page-hero__dial { display: none; } } @media (prefers-reduced-motion: reduce) { .js .page-hero__dial { animation: none; } } .contact-panel { --mk: color-mix(in srgb, var(--color-accent) 65%, transparent); position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md), inset 0 1px 0 color-mix(in srgb, var(--color-text) 7%, transparent); background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface)); } .contact-panel::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(var(--mk), var(--mk)) top 14px left 14px / 18px 1px no-repeat, linear-gradient(var(--mk), var(--mk)) top 14px left 14px / 1px 18px no-repeat, linear-gradient(var(--mk), var(--mk)) top 14px right 14px / 18px 1px no-repeat, linear-gradient(var(--mk), var(--mk)) top 14px right 14px / 1px 18px no-repeat, linear-gradient(var(--mk), var(--mk)) bottom 14px left 14px / 18px 1px no-repeat, linear-gradient(var(--mk), var(--mk)) bottom 14px left 14px / 1px 18px no-repeat, linear-gradient(var(--mk), var(--mk)) bottom 14px right 14px / 18px 1px no-repeat, linear-gradient(var(--mk), var(--mk)) bottom 14px right 14px / 1px 18px no-repeat; } .contact-panel__side, .contact-panel__main { padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); } .contact-panel__side { position: relative; display: flex; flex-direction: column; border-right: 1px solid var(--color-border); background-color: color-mix(in srgb, var(--color-bg-subtle) 70%, transparent); background-image: linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-text) 4%, transparent) 1px, transparent 1px); background-size: 32px 32px; scroll-margin-top: calc(var(--header-h) + var(--space-6)); } .contact-panel__title { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h3); letter-spacing: var(--ls-tight); line-height: 1.1; color: var(--color-text); margin-bottom: var(--space-3); } .contact-panel__lede { color: var(--color-text-secondary); line-height: var(--lh-relaxed); max-width: 44ch; } .contact-panel__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); } .contact-panel__info { margin-top: auto; padding-top: var(--space-8); } .contact-panel__info .contact-info__item { padding: var(--space-4) 0; } .contact-panel__info .label-mono { display: block; margin-bottom: var(--space-2); } .contact-panel__main .label-mono { display: block; } @media (max-width: 960px) { .contact-panel { grid-template-columns: 1fr; } .contact-panel__side { border-right: 0; border-bottom: 1px solid var(--color-border); } }