:root {
--ps-brand: #00B8A5;
--ps-brand-hover: #00A595;
--ps-brand-dark: #006B61;
--ps-brand-darker: #004D45;
--ps-brand-bg: #E0F4F1;
--ps-brand-bg-soft: #F0F9F7;
--ps-bg: #F5F8F6;
--ps-surface: #FFFFFF;
--ps-surface-soft: #F7FAF9;
--ps-border: #EAEFED;
--ps-border-strong: #D5DDDA;
--ps-text: #0F1F2C;
--ps-text-secondary: #5A6B73;
--ps-text-muted: #8A99A1;
--ps-text-faint: #B0BAC0;
--ps-dark-bg: #0F1F2C;
--ps-dark-surface: #18293A;
--ps-dark-border: rgba(255, 255, 255, 0.08);
--ps-dark-border-strong: rgba(255, 255, 255, 0.16);
--ps-dark-text: #E8EEF2;
--ps-dark-text-secondary: #C5D2DA;
--ps-dark-text-muted: #8A99A1;
--ps-success: #14B86C;
--ps-success-bg: #E6F7EE;
--ps-success-fg: #0F6E33;
--ps-warning: #F59E0B;
--ps-warning-bg: #FEF3E0;
--ps-warning-fg: #7A4A0B;
--ps-danger: #DC2626;
--ps-danger-bg: #FCEBEB;
--ps-danger-fg: #791F1F;
--ps-info: #7C3AED;
--ps-info-bg: #F0E8FE;
--ps-info-fg: #4A2A8C;
--ps-radius-sm: 6px;
--ps-radius-md: 8px;
--ps-radius-lg: 12px;
--ps-radius-xl: 14px;
--ps-radius-pill: 999px;
--ps-shadow-card: 0 1px 2px rgba(15, 31, 44, 0.04);
--ps-shadow-hover: 0 4px 12px rgba(15, 31, 44, 0.08);
--ps-focus-ring: 0 0 0 3px rgba(0, 184, 165, 0.15);
--ps-z-dropdown: 100;
--ps-z-sticky: 200;
--ps-z-modal: 1000;
--ps-z-toast: 2000;
--ps-font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--ps-font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
--ps-fs-h1: 22px;
--ps-fs-h2: 18px;
--ps-fs-h3: 15px;
--ps-fs-h4: 13px;
--ps-fs-body: 13px;
--ps-fs-sm: 12px;
--ps-fs-label: 11px;
--ps-fs-caption: 10px;
--ps-fs-metric: 28px;
--ps-fw-regular: 400;
--ps-fw-medium: 500;
--ps-lh-tight: 1.2;
--ps-lh-normal: 1.4;
--ps-lh-relaxed: 1.5;
--ps-space-1: 4px;
--ps-space-2: 8px;
--ps-space-3: 12px;
--ps-space-4: 16px;
--ps-space-5: 20px;
--ps-space-6: 24px;
--ps-space-8: 32px;
--ps-space-10: 40px;
--ps-transition-fast: 0.1s ease;
--ps-transition-base: 0.15s ease;
--ps-transition-slow: 0.25s ease;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--ps-font-sans);
font-size: var(--ps-fs-body);
color: var(--ps-text);
background: var(--ps-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*:focus-visible {
outline: 2px solid var(--ps-brand);
outline-offset: 2px;
}
@font-face {
font-family: "Inter";
src: url("/assets/fonts/inter-var-latin.c9407645.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root {
--l-fs-hero: clamp(2.55rem, 5.5vw, 4.15rem);
--l-fs-h2: clamp(1.7rem, 3vw, 2.4rem);
--l-fs-h3: 1.125rem;
--l-fs-body: 1.0625rem;
--l-fs-small: 0.9375rem;
--l-maxw: 1180px;
--l-section-y: clamp(64px, 9vw, 120px);
--l-reveal-shift: 14px;
}
html {
scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
font-size: var(--l-fs-body);
line-height: 1.6;
background: var(--ps-surface);
text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; line-height: var(--ps-lh-tight); }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ps-brand-dark); }
.container {
max-width: var(--l-maxw);
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 40px);
}
.mono {
font-family: var(--ps-font-mono);
font-size: 0.8125rem;
letter-spacing: 0.02em;
}
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: -48px; left: 16px;
z-index: calc(var(--ps-z-sticky) + 10);
background: var(--ps-dark-bg);
color: var(--ps-dark-text);
padding: 10px 16px;
border-radius: 0 0 var(--ps-radius-md) var(--ps-radius-md);
text-decoration: none;
transition: top var(--ps-transition-base);
}
.skip-link:focus { top: 0; }
.eyebrow {
font-size: 0.75rem;
font-weight: var(--ps-fw-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ps-brand-dark);
margin: 0 0 14px;
}
.eyebrow-dark { color: var(--ps-brand); }
.eyebrow-center { text-align: center; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 22px;
border-radius: var(--ps-radius-md);
border: 1px solid transparent;
font-size: var(--l-fs-small);
font-weight: var(--ps-fw-medium);
text-decoration: none;
cursor: pointer;
transition: background var(--ps-transition-base), border-color var(--ps-transition-base), transform var(--ps-transition-base), color var(--ps-transition-base);
}
.btn-lg { padding: 14px 28px; font-size: var(--l-fs-body); }
.btn-primary {
background: var(--ps-brand);
color: var(--ps-dark-bg);
}
.btn-primary:hover { background: var(--ps-brand-hover); transform: translateY(-1px); }
.btn-ghost {
color: var(--ps-text);
border-color: var(--ps-border-strong);
background: transparent;
}
.btn-ghost:hover { border-color: var(--ps-text-secondary); }
.btn-ghost-dark {
color: var(--ps-dark-text);
border-color: var(--ps-dark-border-strong);
background: transparent;
}
.btn-ghost-dark:hover { border-color: var(--ps-dark-text-secondary); }
.btn-outline {
color: var(--ps-brand-dark);
border-color: var(--ps-border-strong);
background: var(--ps-surface);
}
.btn-outline:hover { border-color: var(--ps-brand); background: var(--ps-brand-bg-soft); }
.site-header {
position: sticky;
top: 0;
z-index: var(--ps-z-sticky);
border-bottom: 1px solid transparent;
transition: border-color var(--ps-transition-base), box-shadow var(--ps-transition-base);
}
.site-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.site-header.is-scrolled {
border-bottom-color: var(--ps-border);
box-shadow: var(--ps-shadow-card);
}
.header-inner {
display: flex;
align-items: center;
gap: 28px;
height: 68px;
}
.ps-logo {
display: inline-block;
width: 148px;
height: 59px;
background: currentColor;
color: var(--ps-text);
-webkit-mask: url("/assets/logo-lockup.acb9fc60.svg") no-repeat center / contain;
mask: url("/assets/logo-lockup.acb9fc60.svg") no-repeat center / contain;
}
.brand { display: inline-flex; color: var(--ps-text); }
.main-nav {
display: flex;
align-items: center;
gap: 22px;
margin-left: 8px;
}
.main-nav > a {
color: var(--ps-text-secondary);
text-decoration: none;
font-size: var(--l-fs-small);
font-weight: var(--ps-fw-medium);
padding: 6px 2px;
transition: color var(--ps-transition-base);
}
.main-nav > a:hover { color: var(--ps-text); }
.nav-mobile-actions { display: none; }
.header-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
}
.lang-toggle {
font-size: 0.8125rem;
font-weight: var(--ps-fw-medium);
letter-spacing: 0.04em;
color: var(--ps-text-secondary);
text-decoration: none;
border: 1px solid var(--ps-border-strong);
border-radius: var(--ps-radius-pill);
padding: 6px 12px;
transition: color var(--ps-transition-base), border-color var(--ps-transition-base);
}
.lang-toggle:hover { color: var(--ps-brand-dark); border-color: var(--ps-brand); }
.nav-burger {
display: none;
background: none;
border: 0;
padding: 10px;
cursor: pointer;
}
.nav-burger-box { display: block; width: 22px; }
.nav-burger-box span {
display: block;
height: 2px;
margin: 5px 0;
background: var(--ps-text);
border-radius: 2px;
transition: transform var(--ps-transition-slow), opacity var(--ps-transition-base);
}
body.nav-open .nav-burger-box span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-burger-box span:nth-child(2) { opacity: 0; }
body.nav-open .nav-burger-box span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hero {
background: var(--ps-dark-bg);
color: var(--ps-dark-text);
margin-top: -68px;
padding-top: 68px;
}
.hero-inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
align-items: center;
gap: clamp(24px, 5vw, 72px);
min-height: min(88vh, 860px);
padding-top: 48px;
padding-bottom: 56px;
}
.hero-title {
font-size: var(--l-fs-hero);
font-weight: 600;
letter-spacing: -0.022em;
color: var(--ps-dark-text);
margin: 0 0 22px;
text-wrap: balance;
}
.hero-sub {
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
line-height: 1.55;
color: var(--ps-dark-text-secondary);
max-width: 34em;
margin-bottom: 34px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-note {
margin-top: 30px;
color: var(--ps-dark-text-muted);
}
.hero-stage { margin: 0; }
.hero-stage svg { width: 100%; height: auto; display: block; }
.stage-rings .ring {
stroke: var(--ps-brand);
stroke-width: 1.5;
fill: none;
}
.ring-1 { stroke-opacity: 0.30; }
.ring-2 { stroke-opacity: 0.18; }
.ring-3 { stroke-opacity: 0.10; }
.ring-4 { stroke-opacity: 0.055; }
.stage-gauge circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.gauge-track { stroke: rgba(255, 255, 255, 0.09); }
.gauge-value {
stroke: var(--ps-brand);
stroke-dasharray: 76 100;
stroke-dashoffset: 0;
transform: rotate(-90deg);
transform-origin: 280px 200px;
}
.stage-metric {
font-family: var(--ps-font-sans);
font-size: 30px;
font-weight: 600;
font-variant-numeric: tabular-nums;
fill: var(--ps-dark-text);
}
.stage-metric-label {
font-family: var(--ps-font-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
fill: var(--ps-dark-text-muted);
}
.stage-grid line { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.stage-trend {
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.stage-dots circle { stroke: var(--ps-dark-bg); stroke-width: 2; }
.stage-mono {
font-family: var(--ps-font-mono);
font-size: 11px;
fill: var(--ps-warning);
}
.stage-mono-dim { fill: var(--ps-dark-text-muted); }
.stage-chip rect {
fill: var(--ps-dark-surface);
stroke: var(--ps-dark-border);
}
.chip-label {
font-family: var(--ps-font-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
fill: var(--ps-dark-text-muted);
}
.chip-value {
font-family: var(--ps-font-sans);
font-size: 15px;
font-weight: 600;
font-variant-numeric: tabular-nums;
fill: var(--ps-dark-text);
}
.chip-unit { font-size: 10px; fill: var(--ps-dark-text-muted); font-weight: 400; }
.chip-value-warn { fill: #FFC964; font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
.hero-stage .ring { stroke-dasharray: 100; stroke-dashoffset: 100; }
.hero-stage.is-live .ring { animation: ps-draw 1.1s cubic-bezier(0.22, 0.8, 0.36, 1) forwards; }
.hero-stage.is-live .ring-2 { animation-delay: 0.12s; }
.hero-stage.is-live .ring-3 { animation-delay: 0.24s; }
.hero-stage.is-live .ring-4 { animation-delay: 0.36s; }
.hero-stage .gauge-value { stroke-dasharray: 0 100; }
.hero-stage.is-live .gauge-value { animation: ps-gauge 1.2s 0.45s cubic-bezier(0.22, 0.8, 0.36, 1) forwards; }
.hero-stage .stage-trend { stroke-dasharray: 100; stroke-dashoffset: 100; }
.hero-stage.is-live .stage-trend { animation: ps-draw 1.4s 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.hero-stage .stage-dots circle,
.hero-stage .stage-mono,
.hero-stage .stage-chip { opacity: 0; }
.hero-stage.is-live .stage-dots circle { animation: ps-pop 0.4s 1.5s ease forwards; }
.hero-stage.is-live .stage-dots circle:nth-child(2) { animation-delay: 1.62s; }
.hero-stage.is-live .stage-dots circle:nth-child(3) { animation-delay: 1.74s; }
.hero-stage.is-live .stage-mono { animation: ps-fade 0.5s 1.85s ease forwards; }
.hero-stage.is-live .stage-chip { animation: ps-rise 0.6s 1.0s cubic-bezier(0.22, 0.8, 0.36, 1) forwards; }
.hero-stage.is-live .chip-alert { animation-delay: 1.25s; }
}
@keyframes ps-draw { to { stroke-dashoffset: 0; } }
@keyframes ps-gauge { to { stroke-dasharray: 76 100; } }
@keyframes ps-pop { from { opacity: 0; } to { opacity: 1; } }
@keyframes ps-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ps-rise {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.section { padding: var(--l-section-y) 0; }
.section-dark {
background: var(--ps-dark-bg);
color: var(--ps-dark-text);
}
.section-tinted { background: var(--ps-bg); }
.section-title {
font-size: var(--l-fs-h2);
font-weight: 600;
letter-spacing: -0.015em;
color: inherit;
max-width: 24em;
margin-bottom: 18px;
}
.section-title-center { text-align: center; margin-left: auto; margin-right: auto; }
@media (prefers-reduced-motion: no-preference) {
[data-reveal] {
opacity: 0;
transform: translateY(var(--l-reveal-shift));
transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.8, 0.36, 1);
transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].in-view { opacity: 1; transform: none; }
}
.section-steps { padding-bottom: clamp(40px, 6vw, 72px); }
.steps-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-top: 34px;
}
.step-card {
background: var(--ps-surface);
border: 1px solid var(--ps-border);
border-radius: var(--ps-radius-lg);
padding: 26px 24px;
box-shadow: var(--ps-shadow-card);
}
.step-icon {
width: 40px;
height: 40px;
border-radius: var(--ps-radius-md);
background: var(--ps-brand-bg);
color: var(--ps-brand-dark);
display: grid;
place-items: center;
margin-bottom: 16px;
}
.step-icon svg { width: 22px; height: 22px; }
.step-card h3 { font-size: var(--l-fs-h3); font-weight: 600; margin-bottom: 8px; }
.step-card p { color: var(--ps-text-secondary); font-size: var(--l-fs-small); }
.feature-inner {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: clamp(28px, 5vw, 72px);
align-items: center;
}
.feature-reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.feature-body {
color: var(--ps-text-secondary);
max-width: 32em;
}
.section-dark .feature-body { color: var(--ps-dark-text-secondary); }
.check-list {
list-style: none;
padding: 0;
margin: 22px 0 0;
display: grid;
gap: 12px;
}
.check-list li {
position: relative;
padding-left: 30px;
font-size: var(--l-fs-small);
color: var(--ps-text);
}
.check-list li::before {
content: "";
position: absolute;
left: 0; top: 2px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--ps-brand-bg);
-webkit-mask: none;
}
.check-list li::after {
content: "";
position: absolute;
left: 4.5px; top: 6.5px;
width: 9px; height: 5.5px;
border-left: 2px solid var(--ps-brand-dark);
border-bottom: 2px solid var(--ps-brand-dark);
transform: rotate(-45deg);
}
.check-list-dark li { color: var(--ps-dark-text); }
.check-list-dark li::before { background: rgba(0, 184, 165, 0.16); }
.check-list-dark li::after { border-color: var(--ps-brand); }
.browser-frame {
margin: 0;
border-radius: var(--ps-radius-lg);
border: 1px solid var(--ps-border);
background: var(--ps-surface);
box-shadow: var(--ps-shadow-hover);
overflow: hidden;
}
.browser-bar {
display: flex;
gap: 6px;
padding: 10px 14px;
background: var(--ps-surface-soft);
border-bottom: 1px solid var(--ps-border);
}
.browser-bar span {
width: 9px; height: 9px;
border-radius: 50%;
background: var(--ps-border-strong);
}
.browser-frame-dark {
border-color: var(--ps-dark-border-strong);
background: var(--ps-dark-surface);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}
.browser-frame-dark .browser-bar {
background: var(--ps-dark-surface);
border-bottom-color: var(--ps-dark-border);
}
.browser-frame-dark .browser-bar span { background: rgba(255, 255, 255, 0.14); }
.device-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 26px;
}
.device-eyebrow {
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ps-dark-text-muted);
margin-right: 4px;
}
.device-pill {
font-size: 0.8125rem;
font-weight: var(--ps-fw-medium);
color: var(--ps-dark-text-secondary);
border: 1px solid var(--ps-dark-border-strong);
border-radius: var(--ps-radius-pill);
padding: 5px 14px;
}
.section-more { padding-top: 0; }
.more-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 36px;
}
.more-card {
background: var(--ps-surface);
border: 1px solid var(--ps-border);
border-radius: var(--ps-radius-lg);
padding: 20px 22px;
transition: border-color var(--ps-transition-base), transform var(--ps-transition-base);
}
.more-card:hover { border-color: var(--ps-brand); transform: translateY(-2px); }
.more-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.more-card p { color: var(--ps-text-secondary); font-size: var(--l-fs-small); }
.who-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-top: 40px;
}
.who-card {
display: flex;
flex-direction: column;
gap: 12px;
background: var(--ps-surface);
border: 1px solid var(--ps-border);
border-radius: var(--ps-radius-lg);
padding: 30px 28px;
box-shadow: var(--ps-shadow-card);
transition: border-color var(--ps-transition-base), transform var(--ps-transition-base), box-shadow var(--ps-transition-base);
}
.who-card:hover {
border-color: var(--ps-brand);
transform: translateY(-3px);
box-shadow: var(--ps-shadow-hover);
}
.who-card h3 { font-size: var(--l-fs-h3); font-weight: 600; }
.who-card p { color: var(--ps-text-secondary); font-size: var(--l-fs-small); flex: 1; }
.who-card .btn { align-self: flex-start; }
.feature-visual-phone { display: flex; justify-content: center; }
.phone {
width: min(300px, 78vw);
border-radius: 40px;
padding: 12px;
background: var(--ps-dark-bg);
box-shadow: 0 24px 60px rgba(15, 31, 44, 0.28);
}
.phone-screen {
border-radius: 30px;
background: linear-gradient(180deg, #14273A 0%, var(--ps-dark-bg) 70%);
border: 1px solid var(--ps-dark-border);
padding: 18px 18px 22px;
color: var(--ps-dark-text);
display: flex;
flex-direction: column;
gap: 14px;
min-height: 480px;
}
.phone-topbar {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--ps-dark-text-muted);
}
.phone-notch {
width: 74px; height: 22px;
border-radius: var(--ps-radius-pill);
background: rgba(255, 255, 255, 0.06);
}
.phone-greet { color: var(--ps-dark-text-muted); font-size: 0.8125rem; }
.phone-question { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.phone-scale {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 4px;
font-variant-numeric: tabular-nums;
font-size: 0.75rem;
color: var(--ps-dark-text-muted);
}
.phone-scale span {
text-align: center;
padding: 7px 0;
border-radius: var(--ps-radius-sm);
border: 1px solid var(--ps-dark-border);
}
.phone-scale .is-active {
background: var(--ps-brand);
color: var(--ps-dark-bg);
font-weight: 600;
border-color: var(--ps-brand);
}
.phone-slider {
position: relative;
height: 6px;
border-radius: var(--ps-radius-pill);
background: rgba(255, 255, 255, 0.09);
}
.phone-slider-fill {
position: absolute;
inset: 0 44% 0 0;
border-radius: inherit;
background: var(--ps-brand);
}
.phone-slider-knob {
position: absolute;
top: 50%; left: 56%;
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
transform: translate(-50%, -50%);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.phone-card {
margin-top: auto;
background: var(--ps-dark-surface);
border: 1px solid var(--ps-dark-border);
border-radius: var(--ps-radius-md);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.phone-card-label {
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ps-dark-text-muted);
}
.phone-card-value { font-size: 0.9375rem; font-weight: 500; }
.phone-cta {
text-align: center;
background: var(--ps-brand);
color: var(--ps-dark-bg);
font-weight: 600;
font-size: 0.9375rem;
border-radius: var(--ps-radius-md);
padding: 12px;
}
.store-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.store-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--ps-dark-bg);
color: var(--ps-dark-text);
text-decoration: none;
border-radius: var(--ps-radius-md);
padding: 9px 18px 9px 14px;
font-size: 0.9375rem;
font-weight: var(--ps-fw-medium);
line-height: 1.15;
transition: transform var(--ps-transition-base), background var(--ps-transition-base);
}
.store-btn:hover { transform: translateY(-1px); background: #1A3046; }
.store-btn svg { width: 22px; height: 22px; flex: none; }
.store-kicker {
display: block;
font-size: 0.625rem;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--ps-dark-text-muted);
}
.section-metrics { border-top: 1px solid var(--ps-border); border-bottom: 1px solid var(--ps-border); }
.metrics-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
text-align: center;
}
.metric-value {
display: block;
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--ps-brand-dark);
letter-spacing: -0.01em;
}
.metric-label {
display: block;
margin-top: 6px;
color: var(--ps-text-secondary);
font-size: var(--l-fs-small);
}
.section-contact { background: var(--ps-bg); }
.contact-inner {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: clamp(28px, 5vw, 72px);
align-items: start;
}
.contact-facts {
list-style: none;
padding: 0;
margin: 26px 0 0;
display: grid;
gap: 14px;
font-size: var(--l-fs-small);
}
.contact-facts-label {
display: block;
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ps-text-secondary);
margin-bottom: 2px;
}
.email-reveal {
font: inherit;
color: var(--ps-brand-dark);
background: none;
border: 0;
border-bottom: 1px dashed var(--ps-brand);
padding: 0 0 1px;
cursor: pointer;
}
.email-reveal[data-revealed] { border-bottom-style: solid; }
.social-row {
list-style: none;
display: flex;
gap: 10px;
padding: 0;
margin: 30px 0 0;
}
.social-row a {
display: grid;
place-items: center;
width: 40px; height: 40px;
border-radius: var(--ps-radius-md);
border: 1px solid var(--ps-border-strong);
color: var(--ps-text-secondary);
transition: color var(--ps-transition-base), border-color var(--ps-transition-base);
}
.social-row a:hover { color: var(--ps-brand-dark); border-color: var(--ps-brand); }
.social-row svg { width: 20px; height: 20px; }
.contact-form {
background: var(--ps-surface);
border: 1px solid var(--ps-border);
border-radius: var(--ps-radius-xl);
box-shadow: var(--ps-shadow-card);
padding: clamp(22px, 3vw, 34px);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field-full { grid-column: 1 / -1; }
.form-field label {
font-size: 0.8125rem;
font-weight: var(--ps-fw-medium);
color: var(--ps-text);
}
.form-field input,
.form-field textarea {
font: inherit;
font-size: var(--l-fs-small);
color: var(--ps-text);
background: var(--ps-surface);
border: 1px solid var(--ps-border-strong);
border-radius: var(--ps-radius-md);
padding: 10px 12px;
transition: border-color var(--ps-transition-base), box-shadow var(--ps-transition-base);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus-visible,
.form-field textarea:focus-visible {
outline: none;
border-color: var(--ps-brand);
box-shadow: var(--ps-focus-ring);
}
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] { border-color: var(--ps-danger); }
.hp-field {
position: absolute;
left: -9999px;
top: auto;
width: 1px; height: 1px;
overflow: hidden;
}
.turnstile-slot { margin-top: 16px; min-height: 0; }
.turnstile-slot iframe { border-radius: var(--ps-radius-md); }
.form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
margin-top: 18px;
}
.form-privacy { font-size: 0.8125rem; color: var(--ps-text-secondary); }
.form-status {
margin-top: 14px;
font-size: var(--l-fs-small);
font-weight: var(--ps-fw-medium);
border-radius: var(--ps-radius-md);
padding: 12px 14px;
}
.form-status.is-success { background: var(--ps-success-bg); color: var(--ps-success-fg); }
.form-status.is-error { background: var(--ps-danger-bg); color: var(--ps-danger-fg); }
.btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.section-cta-final {
position: relative;
overflow: hidden;
text-align: center;
}
.cta-rings {
position: absolute;
inset: 0;
pointer-events: none;
}
.cta-rings svg { width: 100%; height: 100%; }
.cta-final-inner { position: relative; }
.cta-final-title {
font-size: clamp(2rem, 4.2vw, 3.2rem);
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: 14px;
}
.cta-final-sub {
color: var(--ps-dark-text-secondary);
margin-bottom: 30px;
}
.section-cta-final .hero-ctas { justify-content: center; }
.site-footer {
background: var(--ps-surface);
border-top: 1px solid var(--ps-border);
padding: 56px 0 28px;
}
.footer-grid {
display: grid;
grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
gap: 32px;
}
.ps-logo-footer { width: 120px; height: 48px; }
.footer-tagline { color: var(--ps-text-secondary); margin-top: 6px; font-size: 0.75rem; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h3 {
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ps-text-secondary);
margin-bottom: 4px;
}
.footer-col a {
color: var(--ps-text);
text-decoration: none;
font-size: var(--l-fs-small);
}
.footer-col a:hover { color: var(--ps-brand-dark); }
.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
margin-top: 44px;
padding-top: 22px;
border-top: 1px solid var(--ps-border);
color: var(--ps-text-secondary);
font-size: 0.8125rem;
}
.footer-lang a { color: var(--ps-text-secondary); }
.footer-lang a:hover { color: var(--ps-brand-dark); }
.legal-main { padding: 48px 0 var(--l-section-y); }
.legal-container { max-width: 760px; }
.legal-note {
font-size: 0.8125rem;
color: var(--ps-text-secondary);
border: 1px solid var(--ps-border);
background: var(--ps-bg);
border-radius: var(--ps-radius-md);
padding: 10px 14px;
margin-bottom: 34px;
}
.legal-container h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 10px; }
.legal-container h2 { font-size: 1.25rem; font-weight: 600; margin: 36px 0 10px; }
.legal-container p { margin-bottom: 14px; color: var(--ps-text); }
.legal-container ul { margin: 0 0 14px; padding-left: 22px; }
.legal-container li { margin-bottom: 6px; }
.legal-updated { color: var(--ps-text-secondary); font-size: 0.8125rem; margin-bottom: 26px; }
.page-404 {
position: relative;
min-height: 100vh;
display: grid;
place-items: center;
background: var(--ps-dark-bg);
color: var(--ps-dark-text);
overflow: hidden;
text-align: center;
padding: 40px 0;
}
.notfound-inner { position: relative; display: grid; gap: 14px; justify-items: center; }
.notfound-code { font-size: 1rem; color: var(--ps-brand); letter-spacing: 0.3em; }
.page-404 h1, .page-404 h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 600; }
.page-404 h2 { font-size: 1.15rem; color: var(--ps-dark-text-secondary); }
.page-404 p { color: var(--ps-dark-text-secondary); max-width: 34em; }
.notfound-en { margin-top: 10px; }
.page-404 .hero-ctas { margin-top: 22px; justify-content: center; }
@media (max-width: 980px) {
.hero-inner {
grid-template-columns: 1fr;
min-height: 0;
padding-top: 56px;
}
.hero-stage { max-width: 560px; margin: 0 auto; }
.feature-inner,
.feature-reverse,
.contact-inner { grid-template-columns: 1fr; }
.feature-reverse .feature-visual { order: 2; }
.steps-grid, .who-grid, .more-grid { grid-template-columns: 1fr 1fr; }
.metrics-grid { grid-template-columns: 1fr 1fr; row-gap: 34px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.hide-mobile { display: none; }
.nav-burger { display: block; }
.main-nav {
position: fixed;
inset: 68px 0 0;
z-index: var(--ps-z-sticky);
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin: 0;
padding: 26px clamp(20px, 6vw, 40px);
background: var(--ps-surface);
border-top: 1px solid var(--ps-border);
transform: translateX(100%);
transition: transform var(--ps-transition-slow);
overflow-y: auto;
}
body.nav-open .main-nav { transform: translateX(0); }
body.nav-open { overflow: hidden; }
.main-nav > a { font-size: 1.25rem; padding: 12px 0; }
.nav-mobile-actions {
display: flex;
flex-direction: column;
align-self: stretch;
gap: 12px;
margin-top: 26px;
}
.steps-grid, .who-grid, .more-grid { grid-template-columns: 1fr; }
.form-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
.btn, .more-card, .who-card, .store-btn { transition: none; }
.btn-primary:hover, .more-card:hover, .who-card:hover, .store-btn:hover { transform: none; }
}