:root {
--color-primary: #261398;
--color-primary-dark: #1a0e70;
--color-primary-80: #5142ad;
--color-primary-60: #7d71c1;
--color-primary-40: #a8a1d6;
--color-primary-20: #d4d0ea;
--color-primary-10: #e9e7f5;
--color-accent: #f8372a;
--color-accent-80: #f95f55;
--color-accent-60: #fb877f;
--color-accent-40: #fcafaa;
--color-accent-20: #fed7d4;
--color-surface: #ebeef9;
--color-lavender: #e9ecfe;
--color-white: #ffffff;
--color-success: #16a34a;
--color-warning: #b45309;
--color-text: #1e1b33;
--color-text-muted: rgb(30 27 51 / 0.68);
--color-text-on-primary: #ffffff;
--gradient-brand: linear-gradient(135deg, #f8372a 0%, #261398 100%);
--gradient-cta: linear-gradient(270deg, #d92316 0%, #a82954 100%);
--shadow-card: 0 1px 3px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04);
--shadow-lift: 0 10px 30px rgb(38 19 152 / 0.12);
--radius-card: 16px;
--radius-button: 10px;
--radius-badge: 999px;
--cut-corner: 1.5rem;
--clip-cut: polygon(0 0, calc(100% - var(--cut-corner)) 0, 100% var(--cut-corner), 100% 100%, 0 100%);
--angle-size: clamp(1.25rem, 2.5vw, 2.5rem);
--font-sans: "Kanit", system-ui, sans-serif;
--container-max: 1200px;
--section-gap: clamp(4rem, 10vw, 7.5rem);
--container-narrow: 720px;
--gutter: clamp(1.25rem, 4vw, 2.5rem);
--header-height: 68px;
--topbar-height: 32px;
--header-stack: calc(var(--topbar-height) + var(--header-height) + 2px);
--border-subtle: 1px solid rgb(38 19 152 / 0.1);
--transition-base: 180ms ease;
--text-h1: clamp(2.5rem, 6vw, 4rem);
--text-h2: clamp(1.875rem, 4vw, 2.75rem);
--text-h3: clamp(1.375rem, 2.4vw, 1.75rem);
--text-lead: clamp(1.125rem, 1.6vw, 1.25rem);
--text-body: clamp(1rem, 1.1vw, 1.125rem);
--text-small: 0.875rem;
}
@font-face {
font-family: "Kanit";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/kanit-400.woff2") format("woff2");
}
@font-face {
font-family: "Kanit";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/kanit-500.woff2") format("woff2");
}
@font-face {
font-family: "Kanit";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/kanit-700.woff2") format("woff2");
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-stack) + 1.5rem);
}
body {
margin: 0;
background: var(--color-white);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--text-body);
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4 {
margin: 0 0 0.5em;
font-weight: 700;
line-height: 1.15;
text-wrap: balance;
color: var(--color-primary);
}
h1 {
font-size: var(--text-h1);
letter-spacing: -0.02em;
}
h2 {
font-size: var(--text-h2);
letter-spacing: -0.01em;
}
h3 {
font-size: var(--text-h3);
}
h4 {
font-size: 1.125rem;
}
p {
margin: 0 0 1rem;
text-wrap: pretty;
}
p:last-child {
margin-bottom: 0;
}
a {
color: var(--color-primary);
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
a:hover {
color: var(--color-primary-80);
}
ul,
ol {
margin: 0 0 1rem;
padding-left: 1.25rem;
}
li + li {
margin-top: 0.5rem;
}
img,
svg,
picture {
display: block;
max-width: 100%;
}
img {
height: auto;
}
strong {
font-weight: 700;
}
:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
border-radius: 4px;
}
.site-header :focus-visible,
.section--primary :focus-visible,
.cta-block__inner :focus-visible,
.site-footer :focus-visible {
outline-color: var(--color-white);
}
.mobile-panel :focus-visible {
outline-color: var(--color-primary);
}
@media (min-width: 900px) {
.mobile-panel :focus-visible {
outline-color: var(--color-white);
}
}
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow {
max-width: var(--container-narrow);
}
main {
display: block;
}
.section {
padding-block: var(--section-gap);
}
.section--tight {
padding-block: clamp(2.5rem, 6vw, 4rem);
}
.section--surface {
background: var(--color-surface);
}
.section--primary {
position: relative;
overflow: hidden;
background: var(--color-primary);
color: var(--color-text-on-primary);
}
.section--primary::before {
content: "";
position: absolute;
top: 50%;
right: -6%;
width: min(38rem, 55vw);
aspect-ratio: 1;
translate: 0 -50%;
background: url("/assets/img/deco/r-symbol.svg") no-repeat center / contain;
opacity: 0.07;
pointer-events: none;
}
.section--primary > .container {
position: relative;
z-index: 1;
}
.section--angled-top {
clip-path: polygon(0 var(--angle-size), 100% 0, 100% 100%, 0 100%);
padding-top: calc(var(--section-gap) + var(--angle-size) / 2);
}
.section--angled-bottom {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--angle-size)), 0 100%);
padding-bottom: calc(var(--section-gap) + var(--angle-size) / 2);
}
.section--angled {
clip-path: polygon(
0 var(--angle-size),
100% 0,
100% calc(100% - var(--angle-size)),
0 100%
);
padding-block: calc(var(--section-gap) + var(--angle-size) / 2);
}
.section--tight.section--angled-top {
padding-top: calc(clamp(2.5rem, 6vw, 4rem) + var(--angle-size) / 2);
}
.section--tight.section--angled-bottom {
padding-bottom: calc(clamp(2.5rem, 6vw, 4rem) + var(--angle-size) / 2);
}
.section--tight.section--angled {
padding-block: calc(clamp(2.5rem, 6vw, 4rem) + var(--angle-size) / 2);
}
.section--deco {
position: relative;
overflow: hidden;
}
.section--deco > .container {
position: relative;
z-index: 1;
}
@media (min-width: 1100px) {
.section--deco::after {
content: "";
position: absolute;
top: 12%;
left: -5rem;
width: 14rem;
height: 18rem;
background: var(--color-lavender);
clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 92%);
pointer-events: none;
}
.section--deco--right::after {
left: auto;
right: -5rem;
top: auto;
bottom: 10%;
}
}
.section--primary h2,
.section--primary h3 {
color: var(--color-text-on-primary);
}
.section-head {
max-width: 46rem;
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.section-head--center {
margin-inline: auto;
text-align: center;
}
.lead {
font-size: var(--text-lead);
color: var(--color-text-muted);
line-height: 1.6;
}
.section--primary .lead {
color: rgb(255 255 255 / 0.82);
}
.microcopy {
font-size: var(--text-small);
color: var(--color-text-muted);
}
.section--primary .microcopy {
color: rgb(255 255 255 / 0.75);
}
.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: 0;
left: 50%;
z-index: 100;
transform: translate(-50%, -120%);
padding: 0.75rem 1.25rem;
background: var(--color-primary);
color: var(--color-text-on-primary);
font-weight: 500;
border-radius: 0 0 var(--radius-button) var(--radius-button);
text-decoration: none;
}
.skip-link:focus {
transform: translate(-50%, 0);
color: var(--color-text-on-primary);
}
.no-wrap {
white-space: nowrap;
}
@media (scripting: enabled) {
.reveal {
opacity: 0;
transform: translateY(20px);
transition:
opacity 500ms ease,
transform 500ms ease;
animation: reveal-fallback 1ms linear 3s forwards;
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
}
@keyframes reveal-fallback {
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal {
opacity: 1 !important;
transform: none !important;
}
}
.btn {
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 48px;
padding: 0.75rem 1.5rem;
border: 0;
border-radius: 0;
background: none;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition:
transform var(--transition-base),
filter var(--transition-base);
}
.btn::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
clip-path: var(--clip-cut);
background: var(--btn-fill, var(--color-primary));
transition: background var(--transition-base);
}
.btn--primary {
--btn-fill: var(--gradient-cta);
color: var(--color-text-on-primary);
}
.btn--primary::before,
.btn--on-primary::before {
content: "";
position: absolute;
right: 0.5rem;
bottom: -0.3rem;
left: 0.5rem;
z-index: -2;
height: 0.625rem;
background: rgb(38 19 152 / 0.28);
filter: blur(5px);
}
.btn--primary:hover {
color: var(--color-text-on-primary);
transform: translateY(-1px);
filter: brightness(1.1);
}
.btn--secondary {
color: var(--color-primary);
}
.btn--secondary::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
clip-path: var(--clip-cut);
background: var(--color-primary);
}
.btn--secondary::after {
inset: 2px;
clip-path: polygon(
0 0,
calc(100% - (var(--cut-corner) - 2px)) 0,
100% calc(var(--cut-corner) - 2px),
100% 100%,
0 100%
);
background: var(--color-white);
}
.btn--secondary:hover {
color: var(--color-primary);
transform: translateY(-1px);
}
.btn--secondary:hover::after {
background: var(--color-primary-10);
}
.btn--large {
min-height: 56px;
padding: 1rem 2rem;
font-size: 1.0625rem;
}
.btn--on-primary {
--btn-fill: var(--color-white);
color: var(--color-primary);
}
.btn--on-primary::before {
background: rgb(0 0 0 / 0.25);
}
.btn--on-primary:hover {
--btn-fill: var(--color-primary-10);
color: var(--color-primary);
transform: translateY(-1px);
}
.btn--ghost-on-primary {
clip-path: var(--clip-cut);
background: rgb(255 255 255 / 0.08);
color: var(--color-text-on-primary);
box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.6);
transition:
background var(--transition-base),
box-shadow var(--transition-base);
}
.btn--ghost-on-primary::after {
content: none;
}
.btn--ghost-on-primary:hover {
background: rgb(255 255 255 / 0.18);
box-shadow: inset 0 0 0 2px var(--color-white);
color: var(--color-text-on-primary);
}
.btn--ghost-on-primary:focus-visible {
outline: none;
box-shadow:
inset 0 0 0 3px var(--color-white),
inset 0 0 0 6px var(--color-primary);
}
@supports (clip-path: polygon(evenodd, 0 0, 1px 0, 0 1px)) {
.btn--ghost-on-primary {
box-shadow: none;
}
.btn--ghost-on-primary::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgb(255 255 255 / 0.6);
clip-path: polygon(
evenodd,
0 0,
calc(100% - var(--cut-corner)) 0,
100% var(--cut-corner),
100% 100%,
0 100%,
0 0,
2px 2px,
2px calc(100% - 2px),
calc(100% - 2px) calc(100% - 2px),
calc(100% - 2px) calc(var(--cut-corner) + 1px),
calc(100% - var(--cut-corner) - 1px) 2px
);
transition: background var(--transition-base);
}
.btn--ghost-on-primary:hover {
box-shadow: none;
}
.btn--ghost-on-primary:hover::before {
background: var(--color-white);
}
.btn--ghost-on-primary:focus-visible {
box-shadow: inset 0 0 0 3px var(--color-primary);
}
.btn--ghost-on-primary:focus-visible::before {
background: var(--color-white);
}
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: 0.875rem;
}
.btn-row--center {
justify-content: center;
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 500;
text-decoration: none;
border-bottom: 2px solid var(--color-primary-40);
padding-bottom: 2px;
}
.link-arrow:hover {
border-bottom-color: var(--color-primary);
}
.link-arrow svg {
transition: transform var(--transition-base);
}
.link-arrow:hover svg {
transform: translateX(3px);
}
.link-arrow--back:hover svg {
transform: translateX(-3px);
}
.badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.9rem;
border-radius: var(--radius-badge);
background: var(--color-primary-20);
color: var(--color-primary);
font-size: var(--text-small);
font-weight: 500;
line-height: 1.3;
}
.badge--accent {
background: var(--color-accent-20);
color: #b3180e;
}
.badge--on-primary {
background: rgb(255 255 255 / 0.16);
color: var(--color-text-on-primary);
}
.badge--module {
background: var(--color-primary);
color: var(--color-text-on-primary);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.75rem;
}
.card {
padding: clamp(1.5rem, 3vw, 2rem);
background: var(--color-white);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
}
.card h3 {
margin-bottom: 0.5rem;
}
.card__icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
margin-bottom: 1rem;
border-radius: 12px;
background: var(--color-primary-10);
color: var(--color-primary);
}
.card--lift {
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.card--lift:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lift);
}
.card--link {
position: relative;
display: flex;
flex-direction: column;
}
.card--link h3 a {
text-decoration: none;
color: var(--color-primary);
}
.card--link h3 a::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--radius-card);
}
.card--link h3 a:focus-visible::after {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
}
.card__cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: auto;
padding-top: 1rem;
font-weight: 500;
color: var(--color-primary);
}
.card--link:hover .card__cta svg {
transform: translateX(3px);
}
.card__cta svg {
transition: transform var(--transition-base);
}
.grid {
display: grid;
gap: clamp(1rem, 2.5vw, 1.75rem);
}
.grid--2 {
grid-template-columns: 1fr;
}
.grid--3,
.grid--4 {
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.grid--2,
.grid--4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 900px) {
.grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.grid--4 {
grid-template-columns: repeat(4, 1fr);
}
}
.check-list {
list-style: none;
margin: 0;
padding: 0;
}
.check-list li {
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.check-list li + li {
margin-top: 0.75rem;
}
.check-list svg {
flex: 0 0 auto;
margin-top: 0.3em;
color: var(--color-success);
}
.check-list--muted svg {
color: var(--color-text-muted);
}
.check-list--primary svg {
color: var(--color-primary);
}
.section--primary .check-list svg {
color: var(--color-white);
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--color-primary);
border-bottom: 1px solid rgb(255 255 255 / 0.15);
}
.topbar {
background: var(--color-primary-dark);
border-bottom: 1px solid rgb(255 255 255 / 0.12);
}
.topbar__inner {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1.25rem;
min-height: var(--topbar-height);
}
.topbar__link {
padding: 0.25rem 0;
font-size: var(--text-small);
font-weight: 500;
color: rgb(255 255 255 / 0.75);
text-decoration: none;
}
.topbar__link:hover {
color: var(--color-white);
text-decoration: underline;
}
.site-header__inner {
display: flex;
align-items: center;
gap: 1rem;
min-height: var(--header-height);
}
.logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-right: auto;
padding: 0.5rem 0;
font-size: 1.375rem;
font-weight: 700;
color: var(--color-white);
text-decoration: none;
letter-spacing: -0.01em;
}
.logo__mark {
flex: none;
color: var(--color-accent);
}
.logo__word + .logo__divider {
margin-left: 0.5rem;
}
.logo__divider {
margin-right: 0.5rem;
color: rgb(255 255 255 / 0.45);
font-weight: 400;
}
.logo__app {
color: var(--color-white);
font-weight: 500;
}
.nav-toggle {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: var(--radius-button);
color: var(--color-white);
cursor: pointer;
}
.nav-toggle:hover {
background: rgb(255 255 255 / 0.12);
}
.nav-toggle__close {
display: none;
}
.nav-checkbox:checked ~ .nav-toggle .nav-toggle__open {
display: none;
}
.nav-checkbox:checked ~ .nav-toggle .nav-toggle__close {
display: block;
}
.site-nav {
display: flex;
flex-direction: column;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.site-nav li + li {
margin-top: 0;
}
.site-nav a {
display: block;
padding: 0.75rem 0.25rem;
font-weight: 500;
text-decoration: none;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
}
.site-nav a:hover {
border-bottom-color: var(--color-primary-40);
}
.site-nav a[aria-current="page"] {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
.mobile-panel {
position: fixed;
inset: var(--header-stack) 0 0;
z-index: 40;
display: none;
padding: 1.5rem var(--gutter) 2rem;
background: var(--color-white);
overflow-y: auto;
}
.nav-checkbox {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.nav-checkbox:checked ~ .mobile-panel {
display: block;
}
.nav-checkbox:focus-visible ~ .nav-toggle {
outline: 3px solid var(--color-white);
outline-offset: 2px;
}
@media (min-width: 900px) {
.nav-toggle,
.nav-checkbox {
display: none;
}
.mobile-panel {
position: static;
display: flex !important;
align-items: center;
gap: 2rem;
padding: 0;
overflow: visible;
background: none;
}
.site-nav {
flex-direction: row;
align-items: center;
gap: 1.75rem;
}
.site-nav a {
white-space: nowrap;
color: rgb(255 255 255 / 0.85);
}
.site-nav a:hover {
color: var(--color-white);
border-bottom-color: rgb(255 255 255 / 0.55);
}
.site-nav a[aria-current="page"] {
color: var(--color-white);
border-bottom-color: var(--color-white);
}
.site-header__inner {
gap: 2rem;
}
}
.hero {
position: relative;
padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
top: -20%;
right: -10%;
width: 60vw;
height: 60vw;
max-width: 720px;
max-height: 720px;
background: radial-gradient(circle, rgb(38 19 152 / 0.1) 0%, rgb(248 55 42 / 0.06) 45%, transparent 70%);
pointer-events: none;
}
.hero__inner {
position: relative;
display: grid;
gap: clamp(2.5rem, 5vw, 3.5rem);
align-items: center;
}
.hero__text > * + * {
margin-top: 1.25rem;
}
.hero__text .badge {
margin-bottom: 0.5rem;
}
.hero h1 {
margin: 0;
}
@media (min-width: 900px) {
.hero__inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.hero__inner--narrow-media {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
}
}
.browser-frame {
border-radius: 14px;
background: var(--color-white);
box-shadow: var(--shadow-lift);
overflow: hidden;
border: 1px solid rgb(38 19 152 / 0.12);
}
.browser-frame--gradient {
padding: 3px;
background: var(--gradient-brand);
border: 0;
}
.browser-frame__bar {
display: flex;
align-items: center;
gap: 6px;
padding: 0.6rem 0.85rem;
background: var(--color-surface);
border-bottom: 1px solid rgb(38 19 152 / 0.1);
}
.browser-frame--gradient .browser-frame__inner {
border-radius: 12px;
overflow: hidden;
background: var(--color-white);
}
.browser-frame__dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-primary-40);
}
.browser-frame__url {
flex: 1;
margin-left: 0.5rem;
padding: 0.2rem 0.6rem;
background: var(--color-white);
border-radius: var(--radius-badge);
font-size: 0.6875rem;
color: var(--color-text-muted);
text-align: center;
}
.phone-frame {
width: 100%;
max-width: 280px;
margin-inline: auto;
padding: 10px;
background: var(--color-text);
border-radius: 32px;
box-shadow: var(--shadow-lift);
}
.phone-frame__screen {
position: relative;
border-radius: 24px;
overflow: hidden;
background: var(--color-white);
}
.phone-frame__notch {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 52px;
height: 5px;
border-radius: var(--radius-badge);
background: rgb(30 27 51 / 0.35);
z-index: 2;
}
.hero__media .phone-frame {
max-width: 240px;
}
.phone-frame--small {
max-width: 190px;
padding: 7px;
border-radius: 24px;
}
.phone-frame--small .phone-frame__screen {
border-radius: 18px;
}
.phone-row {
display: flex;
gap: 1rem;
justify-content: center;
align-items: flex-start;
}
.phone-row .phone-frame {
max-width: 220px;
margin-inline: 0;
}
.phone-row .phone-frame:nth-child(2) {
margin-top: 2rem;
}
.shot-img {
display: block;
width: 100%;
height: auto;
}
.trades {
text-align: center;
}
.trades__title {
margin-bottom: 1.25rem;
font-size: var(--text-small);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary-80);
}
.trades__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.trades__list li {
margin: 0;
padding: 0.45rem 0.95rem;
background: var(--color-white);
border-radius: var(--radius-badge);
font-size: var(--text-small);
font-weight: 500;
color: var(--color-primary);
box-shadow: var(--shadow-card);
}
.trades__list li:last-child {
background: transparent;
box-shadow: none;
color: var(--color-text-muted);
font-weight: 400;
}
.lang-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.lang-list li {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin: 0;
padding: 0.45rem 0.95rem;
background: var(--color-white);
border-radius: var(--radius-badge);
font-size: var(--text-small);
font-weight: 500;
color: var(--color-primary);
box-shadow: var(--shadow-card);
}
.lang-list svg {
flex: 0 0 auto;
}
:where(p, ul, ol, h2, h3) + .lang-list {
margin-top: 1.25rem;
}
.lang-list--center {
justify-content: center;
}
.lang-list .lang-list__more {
background: transparent;
box-shadow: none;
color: var(--color-text-muted);
font-weight: 400;
}
.lang-list--on-primary li {
background: rgb(255 255 255 / 0.16);
color: var(--color-text-on-primary);
box-shadow: none;
}
.lang-list--on-primary .lang-list__more {
background: transparent;
color: rgb(255 255 255 / 0.75);
}
.compare {
display: grid;
gap: clamp(1.25rem, 3vw, 2rem);
}
@media (min-width: 900px) {
.compare {
grid-template-columns: repeat(2, 1fr);
}
}
.compare__col {
padding: clamp(1.5rem, 3vw, 2rem);
border-radius: var(--radius-card);
}
.compare__col--before {
background: var(--color-surface);
}
.compare__col--after {
background: var(--color-white);
box-shadow: var(--shadow-lift);
border-top: 4px solid var(--color-primary);
}
.compare__title {
margin-bottom: 1.25rem;
font-size: 1.125rem;
font-weight: 700;
}
.compare__col--before .compare__title {
color: var(--color-text-muted);
}
.compare__list {
list-style: none;
margin: 0;
padding: 0;
}
.compare__list li {
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.compare__list li + li {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid rgb(38 19 152 / 0.08);
}
.compare__list svg {
flex: 0 0 auto;
margin-top: 0.3em;
}
.compare__col--before .compare__list {
color: var(--color-text-muted);
}
.compare__col--before svg {
color: var(--color-text-muted);
}
.compare__col--after svg {
color: var(--color-success);
}
.steps {
counter-reset: step;
}
.step {
position: relative;
display: flex;
flex-direction: column;
}
.step .phone-frame {
margin-top: auto;
}
.step__number {
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-bottom: 1rem;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-text-on-primary);
font-size: 1.125rem;
font-weight: 700;
}
.step__label {
display: block;
margin-bottom: 0.35rem;
font-size: var(--text-small);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-primary-80);
}
.feature-row {
display: grid;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: center;
}
.feature-row + .feature-row {
margin-top: clamp(3rem, 7vw, 5.5rem);
}
.feature-row__text > * + * {
margin-top: 1rem;
}
.feature-row__text h2,
.feature-row__text h3 {
margin: 0;
}
@media (min-width: 900px) {
.feature-row {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
.feature-row--reverse .feature-row__text {
order: 2;
}
.feature-row--reverse .feature-row__media {
order: 1;
}
}
.feature-list {
list-style: none;
margin: 0;
padding: 0;
}
.feature-list li {
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.feature-list li + li {
margin-top: 0.875rem;
}
.feature-list svg {
flex: 0 0 auto;
margin-top: 0.35em;
color: var(--color-primary);
}
.features-layout {
display: grid;
gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 1000px) {
.features-layout {
grid-template-columns: 210px minmax(0, 1fr);
align-items: start;
}
}
.anchor-nav {
position: sticky;
top: calc(var(--header-stack) + 1.5rem);
z-index: 30;
}
.anchor-nav__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.875rem 1.125rem;
background: var(--color-surface);
border-radius: var(--radius-button);
font-weight: 500;
color: var(--color-primary);
cursor: pointer;
list-style: none;
box-shadow: var(--shadow-card);
}
.anchor-nav__summary svg {
transition: transform var(--transition-base);
}
.anchor-nav__checkbox {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.anchor-nav__checkbox:focus-visible ~ .anchor-nav__summary {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}
.anchor-nav__checkbox:checked ~ .anchor-nav__summary svg {
transform: rotate(180deg);
}
.anchor-nav__panel {
display: none;
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
right: 0;
padding: 0.5rem;
background: var(--color-white);
border: 1px solid var(--color-primary-20);
border-radius: var(--radius-card);
box-shadow: var(--shadow-lift);
max-height: calc(100dvh - var(--header-stack) - 8rem);
overflow-y: auto;
overscroll-behavior: contain;
}
.anchor-nav__checkbox:checked ~ .anchor-nav__panel {
display: block;
}
.anchor-nav__list {
list-style: none;
margin: 0;
padding: 0;
font-size: var(--text-small);
}
.anchor-nav__list li + li {
margin-top: 0;
}
.anchor-nav__list a {
display: block;
padding: 0.4rem 0.75rem;
border-radius: var(--radius-button);
text-decoration: none;
color: var(--color-text-muted);
}
.anchor-nav__list a:hover {
color: var(--color-primary);
background: var(--color-primary-10);
}
.anchor-nav__list a[aria-current='true'] {
color: var(--color-primary);
font-weight: 700;
}
@media (min-width: 1000px) {
.anchor-nav__summary,
.anchor-nav__checkbox {
display: none;
}
.anchor-nav__panel {
display: block;
position: static;
padding: 0;
background: none;
border: 0;
box-shadow: none;
max-height: none;
overflow: visible;
}
.anchor-nav__list a {
border-left: 2px solid var(--color-primary-20);
border-radius: 0;
}
.anchor-nav__list a:hover,
.anchor-nav__list a[aria-current='true'] {
border-left-color: var(--color-primary);
}
.anchor-nav__list a[aria-current='true'] {
font-weight: 500;
}
}
.feature-block {
scroll-margin-top: calc(var(--header-stack) + 2rem);
}
.feature-block .feature-row__text {
max-width: 64ch;
}
.feature-block + .feature-block {
margin-top: clamp(3rem, 7vw, 5rem);
}
.feature-block:nth-of-type(even) {
padding: clamp(1.5rem, 4vw, 3rem);
background: var(--color-surface);
border-radius: var(--radius-card);
}
.gallery {
margin-top: 1.75rem;
}
.gallery__track {
display: flex;
gap: 0.875rem;
padding: 2px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar {
display: none;
}
.gallery__track:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: var(--radius-button);
}
.gallery__item {
flex: 0 0 min(300px, 78%);
scroll-snap-align: start;
align-self: stretch;
padding: 0;
border: 1px solid var(--color-primary-20);
border-radius: var(--radius-button);
background: var(--color-white);
box-shadow: var(--shadow-card);
overflow: hidden;
font: inherit;
color: inherit;
text-align: inherit;
cursor: zoom-in;
transition: box-shadow var(--transition-base);
}
.gallery__item:hover {
box-shadow: var(--shadow-lift);
}
@media (min-width: 700px) {
.gallery__item {
flex: 0 0 calc((100% - 1.75rem) / 2.2);
}
}
.gallery:not(.gallery--single) .gallery__item .shot-img {
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: top center;
}
.gallery--single .gallery__track {
overflow: visible;
}
.gallery--single .gallery__item {
flex: 1 1 auto;
cursor: zoom-in;
}
.gallery__nav {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
margin-top: 0.75rem;
}
.gallery__nav[hidden] {
display: none;
}
.gallery__arrow {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 2px solid var(--color-primary-20);
border-radius: 50%;
background: var(--color-white);
color: var(--color-primary);
cursor: pointer;
transition: background var(--transition-base), border-color var(--transition-base);
}
.gallery__arrow:hover:not(:disabled) {
background: var(--color-primary-10);
border-color: var(--color-primary);
}
.gallery__arrow:disabled {
opacity: 0.4;
cursor: default;
}
.lightbox {
width: min(96vw, 1000px);
max-height: 92vh;
padding: 0;
border: 0;
background: transparent;
overflow: visible;
}
.lightbox::backdrop {
background: rgb(30 27 51 / 0.82);
}
.lightbox__main {
border-radius: var(--radius-card);
background: var(--color-white);
overflow: hidden;
}
.lightbox__thumbs {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
justify-content: center;
margin-top: 0.75rem;
}
.lightbox__thumb {
width: 104px;
padding: 0;
border: 2px solid transparent;
border-radius: 8px;
background: var(--color-white);
overflow: hidden;
cursor: pointer;
}
.lightbox__thumb[aria-current='true'] {
border-color: var(--color-white);
}
.lightbox__thumb:not([aria-current='true']) {
opacity: 0.6;
}
.lightbox__close {
position: absolute;
top: -0.75rem;
right: -0.75rem;
z-index: 1;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: var(--color-white);
color: var(--color-primary);
box-shadow: var(--shadow-lift);
cursor: pointer;
}
.calc {
display: grid;
gap: clamp(1.5rem, 3vw, 2.25rem);
}
.calc__panel {
width: 100%;
max-width: 52rem;
margin-inline: auto;
display: grid;
gap: 1.5rem;
padding: clamp(1.5rem, 3vw, 2.25rem);
border: 2px solid var(--color-primary);
border-radius: var(--radius-card);
background: linear-gradient(180deg, var(--color-primary-10), var(--color-white) 55%);
box-shadow: var(--shadow-lift);
}
.calc__name {
margin: 0;
font-size: 1.5rem;
}
.calc__control,
.calc__dynamic {
display: none;
}
@media (scripting: enabled) {
.calc__control {
display: block;
}
.calc__dynamic {
display: grid;
gap: 1.25rem;
}
.calc__static {
display: none;
}
}
.calc__label {
display: block;
font-weight: 500;
}
.calc__users {
margin: 0.35rem 0 0.75rem;
color: var(--color-text-muted);
}
.calc__users strong {
font-size: 1.5rem;
color: var(--color-primary);
font-variant-numeric: tabular-nums;
}
.calc__range {
appearance: none;
-webkit-appearance: none;
width: 100%;
height: 2.25rem;
background: transparent;
cursor: pointer;
}
.calc__range:focus-visible {
border-radius: var(--radius-badge);
}
.calc__range::-webkit-slider-runnable-track {
height: 0.5rem;
border-radius: var(--radius-badge);
background: linear-gradient(
to right,
var(--color-primary) var(--calc-fill, 4%),
var(--color-primary-20) var(--calc-fill, 4%)
);
}
.calc__range::-moz-range-track {
height: 0.5rem;
border-radius: var(--radius-badge);
background: linear-gradient(
to right,
var(--color-primary) var(--calc-fill, 4%),
var(--color-primary-20) var(--calc-fill, 4%)
);
}
.calc__range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1.75rem;
height: 1.75rem;
margin-top: -0.625rem;
border: 3px solid var(--color-white);
border-radius: 50%;
background: var(--color-primary);
box-shadow: var(--shadow-card);
}
.calc__range::-moz-range-thumb {
width: 1.75rem;
height: 1.75rem;
border: 3px solid var(--color-white);
border-radius: 50%;
background: var(--color-primary);
box-shadow: var(--shadow-card);
}
.calc__scale {
display: flex;
justify-content: space-between;
margin: 0;
font-size: var(--text-small);
color: var(--color-text-muted);
}
.calc__price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4rem;
margin: 0;
min-height: 3.5rem;
}
.calc__price strong {
font-size: clamp(2.25rem, 5vw, 3.25rem);
font-weight: 700;
line-height: 1.1;
color: var(--color-primary);
font-variant-numeric: tabular-nums;
}
.calc__price-unit {
font-size: 1rem;
color: var(--color-text-muted);
}
.calc__facts {
margin: 0;
}
.calc__facts li[hidden] {
display: none;
}
.calc__static {
margin: 0;
}
.calc__footer {
display: grid;
gap: 0.5rem;
}
.calc__footer .btn {
width: 100%;
max-width: 22rem;
}
.calc__args {
width: 100%;
max-width: 52rem;
margin-inline: auto;
display: grid;
gap: 1rem;
padding: 0;
list-style: none;
color: var(--color-text-muted);
}
.calc__args strong {
color: var(--color-text);
}
@media (min-width: 760px) {
.calc__args {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
.table-scroll {
position: relative;
overflow-x: auto;
border-radius: var(--radius-card);
background: var(--color-white);
box-shadow: var(--shadow-card);
}
.compare-table {
width: 100%;
min-width: 640px;
border-collapse: collapse;
font-size: var(--text-small);
}
.compare-table th,
.compare-table td {
padding: 0.875rem 1rem;
text-align: left;
border-bottom: 1px solid rgb(38 19 152 / 0.08);
vertical-align: middle;
}
.compare-table thead th {
background: var(--color-surface);
color: var(--color-primary);
font-size: 1rem;
white-space: nowrap;
text-align: center;
}
.compare-table tbody th {
font-weight: 400;
color: var(--color-text);
}
.compare-table td {
text-align: center;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
border-bottom: 0;
}
.compare-table .is-highlight {
background: var(--color-primary-10);
}
.compare-table svg {
display: inline-block;
color: var(--color-success);
vertical-align: middle;
}
.table-hint {
margin-top: 0.75rem;
font-size: var(--text-small);
color: var(--color-text-muted);
}
.table-hint--center {
max-width: var(--container-narrow);
margin-top: 1.5rem;
margin-inline: auto;
text-align: center;
}
@media (min-width: 900px) {
.table-hint--scroll {
display: none;
}
}
.faq {
max-width: var(--container-narrow);
margin-inline: auto;
}
.faq__item {
background: var(--color-white);
border-radius: var(--radius-button);
box-shadow: var(--shadow-card);
}
.faq__item + .faq__item {
margin-top: 0.75rem;
}
.faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.125rem 1.25rem;
font-weight: 500;
color: var(--color-primary);
cursor: pointer;
list-style: none;
}
.faq__item summary::-webkit-details-marker {
display: none;
}
.faq__item summary svg {
flex: 0 0 auto;
transition: transform var(--transition-base);
}
.faq__item[open] summary svg {
transform: rotate(45deg);
}
.faq__answer {
padding: 0 1.25rem 1.25rem;
color: var(--color-text-muted);
}
.cta-block {
padding-block: clamp(2.5rem, 6vw, 4rem);
}
.cta-block__inner {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(2rem, 5vw, 3.5rem);
border-radius: 0;
clip-path: polygon(0 0, calc(100% - 3rem) 0, 100% 3rem, 100% 100%, 0 100%);
background: var(--gradient-brand);
color: var(--color-text-on-primary);
text-align: center;
}
.cta-block__inner::before {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
height: 4rem;
background: url("/assets/img/deco/chevron-light.svg") repeat-x center / 24px 24px;
opacity: 0.22;
pointer-events: none;
}
.cta-block h2 {
margin: 0 0 0.75rem;
color: var(--color-text-on-primary);
}
.cta-block p {
max-width: 44rem;
margin-inline: auto;
color: rgb(255 255 255 / 0.9);
font-size: var(--text-lead);
}
.cta-block .btn-row {
margin-top: 2rem;
}
.site-footer {
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
background: var(--color-primary);
color: rgb(255 255 255 / 0.78);
}
.site-footer::before {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
height: 3rem;
background: url("/assets/img/deco/chevron-light.svg") repeat-x center / 24px 24px;
opacity: 0.16;
pointer-events: none;
}
.site-footer a {
color: rgb(255 255 255 / 0.85);
text-decoration: none;
}
.site-footer a:hover {
color: var(--color-white);
text-decoration: underline;
}
.site-footer__grid {
display: grid;
gap: 2rem;
}
@media (min-width: 640px) {
.site-footer__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 900px) {
.site-footer__grid {
grid-template-columns: 1.6fr 1fr 1fr;
}
}
.site-footer__brand .logo {
color: var(--color-white);
margin-bottom: 1rem;
}
.site-footer__brand .logo__divider {
color: rgb(255 255 255 / 0.5);
}
.site-footer__brand .logo__app {
color: var(--color-white);
}
.site-footer__tagline {
max-width: 24rem;
}
.site-footer h2 {
margin-bottom: 1rem;
font-size: 1rem;
color: var(--color-white);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.site-footer__list {
list-style: none;
margin: 0;
padding: 0;
}
.site-footer__list li + li {
margin-top: 0.625rem;
}
.site-footer__bottom {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgb(255 255 255 / 0.18);
font-size: var(--text-small);
}
.site-footer__legal {
margin-top: 0.5rem;
opacity: 0.75;
}
.contact-card__value {
display: inline-block;
margin-block: 0.5rem 0.75rem;
font-size: 1.25rem;
font-weight: 500;
}
.billing {
padding: clamp(1.5rem, 3.5vw, 2.5rem);
background: var(--color-white);
border: var(--border-subtle);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
}
.billing__head {
display: flex;
align-items: center;
gap: 0.875rem;
margin-bottom: 1.5rem;
padding-bottom: 1.25rem;
border-bottom: var(--border-subtle);
}
.billing__icon {
display: grid;
place-items: center;
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--color-primary-10);
color: var(--color-primary);
}
.billing__head h2 {
margin: 0;
font-size: var(--text-h3);
}
.billing__list {
display: grid;
gap: 1.25rem 2rem;
margin: 0;
}
@media (min-width: 640px) {
.billing__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.billing__list div {
display: grid;
gap: 0.25rem;
align-content: start;
}
.billing__list dt {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.billing__list dd {
margin: 0;
font-weight: 500;
}
.founder {
display: grid;
gap: clamp(2.75rem, 6vw, 3.5rem);
align-items: center;
}
@media (min-width: 800px) {
.founder {
grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
gap: clamp(3rem, 7vw, 5rem);
}
}
.founder__media {
position: relative;
width: min(calc(100% - 1.25rem), 300px);
margin-inline: auto;
}
@media (min-width: 800px) {
.founder__media {
width: calc(100% - 1.25rem);
max-width: 320px;
margin-inline: 0;
}
}
.founder__media::before {
content: "";
position: absolute;
inset: 1.25rem -1.25rem -1.25rem 1.25rem;
border-radius: var(--radius-card);
background: var(--gradient-brand);
}
.founder__photo {
position: relative;
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--radius-card);
box-shadow: var(--shadow-lift);
}
.founder__quote {
margin: 0 0 1.25rem;
padding-left: 1.25rem;
border-left: 3px solid var(--color-accent);
}
.founder__quote p {
margin: 0;
font-size: var(--text-h3);
font-weight: 500;
line-height: 1.4;
}
.founder__signature {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem 0.5rem;
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: var(--border-subtle);
}
.founder__signature strong {
font-size: 1.125rem;
}
.founder__signature span {
color: var(--color-text-muted);
}
.prose h2 {
margin-top: 2.5rem;
font-size: 1.5rem;
}
.prose h2:first-child {
margin-top: 0;
}
.prose h3 {
margin-top: 1.75rem;
font-size: 1.125rem;
}
.prose ul {
padding-left: 1.25rem;
}
.prose__meta {
margin-bottom: 2.5rem;
padding: 1rem 1.25rem;
background: var(--color-surface);
border-radius: var(--radius-button);
font-size: var(--text-small);
color: var(--color-text-muted);
}
.prose--guide h2 {
margin-top: 3rem;
font-size: clamp(1.5rem, 2.6vw, 1.875rem);
}
.prose--guide h3 {
margin-top: 2rem;
font-size: var(--text-lead);
}
.prose--guide > ul,
.prose--guide > ol {
margin-bottom: 1.5rem;
}
.prose blockquote {
margin: 1.5rem 0;
padding: 0.25rem 0 0.25rem 1.25rem;
border-left: 3px solid var(--color-primary-40);
}
.prose blockquote p:last-child {
margin-bottom: 0;
}
.prose code {
padding: 0.1em 0.35em;
background: var(--color-primary-10);
border-radius: 4px;
font-size: 0.9em;
}
.prose-table {
width: 100%;
min-width: 32rem;
border-collapse: collapse;
text-align: left;
}
.prose-table th,
.prose-table td {
padding: 0.75rem 1rem;
border-bottom: var(--border-subtle);
vertical-align: top;
}
.prose-table thead th {
background: var(--color-surface);
color: var(--color-primary);
white-space: nowrap;
}
.prose-table tbody th {
font-weight: 400;
}
.prose-table tbody tr:last-child th,
.prose-table tbody tr:last-child td {
border-bottom: 0;
}
.guide-back {
margin-bottom: 1.5rem;
font-size: var(--text-small);
}
.shot-article {
margin: 2rem 0;
}
@media (min-width: 900px) {
.shot-article {
margin-inline: calc(-1 * clamp(0rem, 7vw, 9rem));
}
}
.shot-article img {
display: block;
width: 100%;
height: auto;
border: var(--border-subtle);
border-radius: var(--radius-button);
}
.shot-article figcaption {
margin-top: 0.625rem;
font-size: var(--text-small);
color: var(--color-text-muted);
}
.page-404 {
display: grid;
place-items: center;
min-height: 60vh;
text-align: center;
padding-block: var(--section-gap);
}
.page-404 .btn-row {
margin-top: 2rem;
justify-content: center;
}