:root {
color-scheme: light;
--color-cyan: #4ABEDD;
--color-deep-blue: #054070;
--color-black: #000000;
--color-white: #FFFFFF;
--gradient-brand: linear-gradient(90deg, #0872BB 0%, #4ABEDD 100%);
--gradient-brand-135: linear-gradient(135deg, #0872BB 0%, #4ABEDD 100%);
--gradient-deep: linear-gradient(135deg, #054070 0%, #0872BB 100%);
--color-primary: #0872BB;
--color-primary-strong: #0872BB;
--color-ink: #0B1F33;
--color-ink-soft: #33475B;
--color-muted: #5E7286;
--color-line: #E2E9F0;
--body-bg: #FFFFFF;
--header-bg: rgba(255, 255, 255, 0.9);
--color-surface: #FFFFFF;
--color-surface-2: #F4F8FB;
--color-surface-3: #EAF2F8;
--code-bg: #0B1F33;
--code-text: #EAF2F8;
--color-on-dark: #FFFFFF;
--color-on-dark-soft: rgba(255, 255, 255, 0.78);
--color-on-dark-muted: rgba(255, 255, 255, 0.60);
--color-line-dark: rgba(255, 255, 255, 0.16);
--mega-bg: #FFFFFF;
--mega-text: #0B1F33;
--mega-muted: #5E7286;
--mega-border: #E2E9F0;
--mega-hover: #F3F8FC;
--mega-shadow: 0 24px 60px rgba(5, 64, 112, 0.16);
--color-success: #1E8E5A;
--color-warning: #B9770B;
--color-error: #C0392B;
--font-heading: "Montserrat", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
--fs-h1: clamp(2.5rem, 1.6rem + 4.2vw, 5.5rem);
--fs-h2: clamp(2rem, 1.4rem + 2.6vw, 4rem);
--fs-h3: clamp(1.5rem, 1.2rem + 1.1vw, 2.375rem);
--fs-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
--fs-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.5rem);
--fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
--fs-small: clamp(0.8125rem, 0.78rem + 0.12vw, 0.9375rem);
--lh-tight: 1.08;
--lh-heading: 1.15;
--lh-snug: 1.35;
--lh-body: 1.65;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.08em;
--space-2xs: 0.25rem;
--space-xs: 0.5rem;
--space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
--space-4xl: 6rem;
--space-5xl: 8rem;
--section-y: clamp(3.5rem, 2.5rem + 4vw, 7rem);
--container-max: 1320px;
--container-wide: 1440px;
--container-reading: 760px;
--gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
--radius-xs: 8px;
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-pill: 999px;
--border-width: 1px;
--border-soft: 1px solid var(--color-line);
--shadow-xs: 0 1px 2px rgba(5, 64, 112, 0.06);
--shadow-sm: 0 4px 16px rgba(5, 64, 112, 0.07);
--shadow-md: 0 12px 32px rgba(5, 64, 112, 0.10);
--shadow-lg: 0 24px 60px rgba(5, 64, 112, 0.14);
--shadow-focus: 0 0 0 3px rgba(8, 114, 187, 0.35);
--dur-fast: 140ms;
--dur-base: 240ms;
--dur-slow: 480ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--z-base: 1;
--z-raised: 10;
--z-sticky: 100;
--z-header: 500;
--z-dropdown: 600;
--z-overlay: 800;
--z-modal: 1000;
--z-toast: 1200;
--z-loader: 2000;
--bp-sm: 480px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
--header-h: 76px;
}
:root[data-theme="dark"] {
color-scheme: dark;
--color-primary: #57BEE8;
--color-primary-strong: #0872BB;
--color-ink: #EAF2F9;
--color-ink-soft: #B6C4D2;
--color-muted: #8496A8;
--color-line: #26333F;
--body-bg: #0B1119;
--header-bg: rgba(11, 17, 25, 0.82);
--color-surface: #131C28;
--color-surface-2: #0F1720;
--color-surface-3: #172434;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.4);
--shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
--mega-bg: #111B27;
--mega-text: #F4F7FA;
--mega-muted: #A8B3C0;
--mega-border: #293747;
--mega-hover: #192737;
--mega-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
html.theme-ready,
html.theme-ready body,
html.theme-ready .site-header,
html.theme-ready .card,
html.theme-ready .cap-group,
html.theme-ready .form-control,
html.theme-ready .nav-dropdown,
html.theme-ready .mega-panel,
html.theme-ready .post-card,
html.theme-ready .featured-post {
transition: background-color var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out);
}
}
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/montserrat-600.woff2") format("woff2");
}
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/montserrat-700.woff2") format("woff2");
}
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/montserrat-800.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-600.woff2") format("woff2");
}
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-ink);
background: var(--body-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh;
}
@supports not selector(::-webkit-scrollbar) {
html {
scrollbar-width: thin;
scrollbar-color: #fff var(--color-deep-blue);
}
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-deep-blue); }
::-webkit-scrollbar-thumb {
background: #fff;
border-radius: var(--radius-pill);
border: 3px solid var(--color-deep-blue);
background-clip: padding-box;
transition: border-width 0.18s ease, background-color 0.18s ease;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
border-width: 1px;
background: #fff;
background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: var(--color-deep-blue); }
@media (forced-colors: active) {
html { scrollbar-color: auto; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-corner { background: canvas; border: 0; }
}
img,
picture,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
svg {
fill: currentColor;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
background: none;
border: none;
}
ul,
ol {
list-style: none;
padding: 0;
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out);
}
a:hover {
color: var(--color-deep-blue);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
font-weight: var(--fw-bold);
line-height: var(--lh-heading);
color: var(--color-ink);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
h1 {
font-size: var(--fs-h1);
font-weight: var(--fw-extrabold);
line-height: var(--lh-tight);
}
h2 {
font-size: var(--fs-h2);
}
h2:has(+ *) {
margin-bottom: 1.5rem;
}
h3 {
font-size: var(--fs-h3);
}
h4 {
font-size: var(--fs-h4);
}
p {
text-wrap: pretty;
}
strong,
b {
font-weight: var(--fw-semibold);
}
:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
border-radius: 4px;
}
:focus:not(:focus-visible) {
outline: none;
}
.skip-link {
position: absolute;
left: var(--space-md);
top: -100px;
z-index: var(--z-toast);
background: var(--color-primary-strong);
color: #fff;
padding: 0.75rem 1.25rem;
border-radius: var(--radius-sm);
font-weight: var(--fw-semibold);
transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus {
top: var(--space-md);
color: #fff;
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.no-scroll {
overflow: hidden;
}
.text-gradient {
background: var(--gradient-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
font-size: var(--fs-small);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-primary);
}
.eyebrow + h2 {
margin-top: var(--space-xs);
}
.page-home h2.eyebrow + .section-title {
margin-top: var(--space-xs);
}
.eyebrow::before {
content: "";
width: 1.75rem;
height: 2px;
background: var(--gradient-brand);
border-radius: var(--radius-pill);
}
.section-title {
font-family: var(--font-heading);
font-weight: var(--fw-bold);
font-size: var(--fs-h2);
line-height: var(--lh-heading);
color: var(--color-ink);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
.section-title:has(+ *) { margin-bottom: 1.5rem; }
.bg-deep .section-title,
.bg-gradient .section-title { color: var(--color-on-dark); }
h2.eyebrow { margin: 0; }
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--wide {
max-width: var(--container-wide);
}
.container--reading {
max-width: var(--container-reading);
}
.section {
padding-block: var(--section-y);
}
.section--tight {
padding-block: calc(var(--section-y) * 0.6);
}
.section--flush-top {
padding-top: 0;
}
.bg-white { background: var(--color-surface); }
.bg-soft { background: var(--color-surface-2); }
.bg-tint { background: var(--color-surface-3); }
.bg-deep {
background: var(--color-deep-blue);
color: var(--color-on-dark);
}
.bg-gradient {
background: var(--gradient-brand-135);
color: var(--color-on-dark);
}
.bg-deep h1, .bg-deep h2, .bg-deep h3, .bg-deep h4,
.bg-gradient h1, .bg-gradient h2, .bg-gradient h3, .bg-gradient h4 {
color: var(--color-on-dark);
}
.grid {
display: grid;
gap: var(--space-xl);
}
.grid--12 {
grid-template-columns: repeat(12, 1fr);
}
.grid--auto {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.split {
display: grid;
gap: clamp(2rem, 1rem + 4vw, 5rem);
align-items: center;
}
@media (min-width: 900px) {
.split {
grid-template-columns: 1.05fr 0.95fr;
}
.split--reverse > :first-child { order: 2; }
}
.section-head {
max-width: 60ch;
margin-bottom: clamp(2rem, 1.2rem + 2vw, 3.5rem);
}
.section-head--center {
margin-inline: auto;
text-align: center;
}
.section-head p {
margin-top: var(--space-md);
font-size: var(--fs-lead);
color: var(--color-ink-soft);
}
.bg-deep .section-head p,
.bg-gradient .section-head p {
color: var(--color-on-dark-soft);
}
.stack > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-xl); }
.cluster {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
align-items: center;
}
.lead {
font-size: var(--fs-lead);
line-height: var(--lh-snug);
color: var(--color-ink-soft);
}
@media (max-width: 768px) {
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
font-size: var(--fs-body);
line-height: 1;
padding: 0.95rem 1.6rem;
border-radius: var(--radius-pill);
border: 2px solid transparent;
cursor: pointer;
text-align: center;
transition: transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
background-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary {
background: var(--color-primary-strong);
color: #fff;
box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
background: var(--color-deep-blue);
color: #fff;
box-shadow: var(--shadow-md);
}
.btn--gradient {
background: var(--gradient-brand);
background-origin: border-box;
background-clip: border-box;
color: #fff;
box-shadow: var(--shadow-sm);
}
.btn--gradient:hover { color: #fff; box-shadow: var(--shadow-md); }
.btn--ghost {
background: transparent;
color: var(--color-primary);
border-color: var(--color-line);
}
.btn--ghost:hover {
border-color: var(--color-primary);
color: var(--color-deep-blue);
background: var(--color-surface-2);
}
.btn--on-dark {
background: #fff;
color: var(--color-deep-blue);
}
.btn--on-dark:hover { background: var(--color-surface-3); color: var(--color-deep-blue); }
.btn--ghost-on-dark {
background: transparent;
color: #fff;
border-color: var(--color-line-dark);
}
.btn--ghost-on-dark:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; }
.btn--lg { padding: 1.1rem 2rem; font-size: var(--fs-lead); }
.btn--sm { padding: 0.6rem 1.1rem; font-size: var(--fs-small); }
.btn--block { display: flex; width: 100%; }
.link-arrow {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
color: var(--color-primary);
}
.link-arrow svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }
.card {
background: var(--color-surface);
border: var(--border-soft);
border-radius: var(--radius-md);
padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.card--hover:hover {
transform: translateY(-8px) scale(1.01);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary);
}
.card__icon {
width: 3rem;
height: 3rem;
display: grid;
place-items: center;
border-radius: var(--radius-sm);
background: var(--color-surface-3);
color: var(--color-primary);
margin-bottom: var(--space-md);
}
.card__icon svg { width: 1.5rem; height: 1.5rem; }
.card h3 { font-size: var(--fs-h4); margin-bottom: var(--space-xs); }
.card p { color: var(--color-ink-soft); }
.badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-heading);
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
padding: 0.35rem 0.8rem;
border-radius: var(--radius-pill);
background: var(--color-surface-3);
color: var(--color-primary);
}
.badge--gradient { background: var(--gradient-brand); color: #fff; }
.placeholder-note {
border: 1px dashed var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-xl);
text-align: center;
color: var(--color-muted);
background: var(--color-surface-2);
}
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background: var(--header-bg);
backdrop-filter: saturate(1.4) blur(10px);
border-bottom: 1px solid transparent;
transition: border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled {
border-bottom-color: var(--color-line);
box-shadow: var(--shadow-xs);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
height: var(--header-h);
}
.brand {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.brand img,
.brand svg { height: 34px; width: auto; }
.brand__logo--dark { display: none; }
:root[data-theme="dark"] .brand__logo--light { display: none; }
:root[data-theme="dark"] .brand__logo--dark { display: block; }
.theme-toggle {
width: 42px;
height: 42px;
border-radius: var(--radius-pill);
display: inline-grid;
place-items: center;
color: var(--color-ink-soft);
border: 1px solid var(--color-line);
background: transparent;
transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-surface-2); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: block; }
.primary-nav { display: none; }
@media (min-width: 1024px) {
.primary-nav {
display: flex;
align-items: center;
gap: 0.25rem;
}
}
.nav-list {
display: flex;
align-items: center;
gap: 0.15rem;
}
.nav-item { position: relative; }
.nav-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: var(--font-heading);
font-weight: var(--fw-medium);
font-size: 0.98rem;
color: var(--color-ink);
padding: 0.6rem 0.85rem;
border-radius: var(--radius-sm);
transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.nav-link:hover { color: var(--color-primary); background: var(--color-surface-2); }
.nav-link[aria-current="page"] { color: var(--color-primary); }
.nav-link[aria-current="page"]::after {
content: "";
position: absolute;
left: 0.85rem;
right: 0.85rem;
bottom: 0.35rem;
height: 2px;
background: var(--gradient-brand);
border-radius: var(--radius-pill);
}
.nav-parent { display: inline-flex; align-items: center; gap: 0; }
.nav-parent > .nav-link:first-child { padding-right: 0.35rem; }
.nav-caret-btn { padding: 0.6rem 0.6rem 0.6rem 0.15rem; display: inline-flex; align-items: center; }
.nav-caret-btn:hover { background: transparent; }
.nav-caret { width: 0.7rem; height: 0.7rem; transition: transform var(--dur-base) var(--ease-out); }
.nav-item[data-open="true"] .nav-caret { transform: rotate(180deg); }
.nav-dropdown {
position: absolute;
top: calc(100% + 0.4rem);
left: 50%;
transform: translateX(-50%) translateY(6px);
min-width: 260px;
background: var(--color-surface);
border: var(--border-soft);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 0.5rem;
opacity: 0;
visibility: hidden;
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-dropdown::before {
content: "";
position: absolute;
top: -0.6rem;
left: 0;
right: 0;
height: 0.6rem;
}
.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown,
.nav-item[data-open="true"] > .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
display: block;
padding: 0.6rem 0.85rem;
border-radius: var(--radius-sm);
color: var(--color-ink);
font-weight: var(--fw-medium);
font-size: 0.95rem;
}
.nav-dropdown a:hover { background: var(--color-surface-3); color: var(--color-primary); }
.nav-dropdown a[aria-current="page"] { color: var(--color-primary); background: var(--color-surface-2); }
.nav-dropdown__head {
padding: 0.6rem 0.85rem 0.4rem;
font-size: var(--fs-small);
color: var(--color-muted);
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
.nav-dropdown__sep { height: 1px; background: var(--color-line); margin: 0.35rem 0.5rem; }
.header-actions { display: flex; align-items: center; gap: var(--space-sm); }
.header-actions .btn { display: none; }
@media (min-width: 1024px) { .header-actions .btn { display: inline-flex; } }
.nav-toggle {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 10px;
border-radius: var(--radius-sm);
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.nav-toggle span {
display: block;
height: 2px;
width: 100%;
background: var(--color-ink);
border-radius: 2px;
transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mega-panel {
position: absolute;
top: calc(100% - 1px);
left: 50%;
transform: translateX(-50%) translateY(10px);
width: min(1100px, calc(100vw - 2 * var(--gutter)));
background: var(--mega-bg);
color: var(--mega-text);
border: 1px solid var(--mega-border);
border-radius: var(--radius-lg);
box-shadow: var(--mega-shadow);
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
z-index: var(--z-dropdown);
}
.mega-panel.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.mega-panel__inner { padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.mega-cols {
display: grid;
grid-template-columns: repeat(var(--mega-cols, 3), 1fr);
gap: 0;
}
.mega-col { padding: 0 clamp(1rem, 0.5rem + 1vw, 1.75rem); }
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child { padding-right: 0; }
.mega-col:not(:last-child) { border-right: 1px solid var(--mega-border); }
.mega-col__head {
font-family: var(--font-heading);
font-size: 0.72rem;
font-weight: var(--fw-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mega-muted);
margin-bottom: 0.75rem;
padding-inline: 0.75rem;
}
.mega-link {
display: block;
padding: 0.6rem 0.75rem;
border-radius: var(--radius-sm);
transition: background-color var(--dur-fast) var(--ease-out);
}
.mega-link:hover, .mega-link:focus-visible { background: var(--mega-hover); }
.mega-link__title {
display: block;
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
color: var(--mega-text);
transition: color var(--dur-fast) var(--ease-out);
}
.mega-link:hover .mega-link__title,
.mega-link:focus-visible .mega-link__title,
.mega-link[aria-current="page"] .mega-link__title { color: var(--color-primary); }
.mega-link__desc {
display: block;
font-size: 0.85rem;
line-height: 1.4;
color: var(--mega-muted);
margin-top: 0.15rem;
}
.mega-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
padding: 1.1rem clamp(1.25rem, 1rem + 1vw, 2rem);
background: var(--gradient-brand-135);
color: #fff;
}
.mega-cta__text strong { display: block; font-family: var(--font-heading); font-size: 1.05rem; }
.mega-cta__desc { display: block; font-size: 0.9rem; color: rgba(255, 255, 255, 0.9); }
.mega-cta__btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
}
.mega-cta__btn svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-base) var(--ease-out); }
.mega-cta:hover .mega-cta__btn svg { transform: translateX(4px); }
@media (max-width: 1023px) {
.mega-panel { display: none; }
}
@media (max-width: 640px) {
.mega-cta { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
}
.mobile-nav {
position: fixed;
inset: var(--header-h) 0 0 0;
background: var(--color-surface);
z-index: var(--z-overlay);
transform: translateX(100%);
transition: transform var(--dur-slow) var(--ease-out);
overflow-y: auto;
padding: var(--space-lg) var(--gutter) calc(var(--space-3xl) + env(safe-area-inset-bottom, 0px));
visibility: hidden;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
@media (min-width: 1024px) { .mobile-nav { display: none; } }
.mobile-nav__list > li { border-bottom: 1px solid var(--color-line); }
.mobile-nav__link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0.25rem;
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
font-size: 1.15rem;
color: var(--color-ink);
width: 100%;
}
.mobile-nav__link[aria-current="page"] { color: var(--color-primary); }
.acc-row { display: flex; align-items: center; justify-content: space-between; padding: 0; }
.acc-parent-link {
flex: 1;
padding: 1rem 0.25rem;
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
font-size: 1.15rem;
color: var(--color-ink);
}
.acc-parent-link[aria-current="page"] { color: var(--color-primary); }
.acc-trigger {
padding: 1rem 0.5rem;
display: inline-flex;
align-items: center;
color: var(--color-ink-soft);
}
.acc-trigger .nav-caret { width: 1rem; height: 1rem; }
.acc-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.acc-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.acc-panel.is-open { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel a {
display: block;
padding: 0.7rem 0.25rem 0.7rem 1rem;
color: var(--color-ink-soft);
font-weight: var(--fw-medium);
border-left: 2px solid var(--color-line);
margin-left: 0.25rem;
}
.acc-panel a:hover,
.acc-panel a[aria-current="page"] { color: var(--color-primary); border-color: var(--color-primary); }
.mobile-nav__cta { margin-top: var(--space-xl); }
.breadcrumbs {
font-size: var(--fs-small);
color: var(--color-muted);
padding-block: var(--space-md);
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 0.4rem; }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--color-line); }
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs [aria-current="page"] { color: var(--color-ink-soft); }
.form-field { margin-bottom: var(--space-lg); }
.form-field label {
display: block;
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
font-size: var(--fs-small);
margin-bottom: 0.4rem;
}
.form-field .req { color: var(--color-primary); }
.form-control {
width: 100%;
padding: 0.85rem 1rem;
border: 1.5px solid var(--color-line);
border-radius: var(--radius-sm);
background: var(--color-surface);
transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.form-control:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: var(--shadow-focus);
}
textarea.form-control { min-height: 140px; resize: vertical; }
.form-hint { font-size: var(--fs-small); color: var(--color-muted); margin-top: 0.3rem; }
.form-error { color: var(--color-error); font-size: var(--fs-small); margin-top: 0.3rem; }
.form-field.has-error .form-control { border-color: var(--color-error); }
.form-consent { display: flex; gap: 0.6rem; align-items: flex-start; }
.form-consent input { margin-top: 0.25rem; width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.form-consent label { font-weight: var(--fw-regular); font-family: var(--font-body); font-size: var(--fs-small); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-alert {
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-sm);
margin-bottom: var(--space-lg);
font-size: var(--fs-small);
}
.form-alert--ok { background: #e7f5ee; color: var(--color-success); border: 1px solid #bfe3cf; }
.form-alert--error { background: #fdecea; color: var(--color-error); border: 1px solid #f6c9c2; }
.site-footer {
background: var(--color-deep-blue);
color: var(--color-on-dark-soft);
padding-top: var(--space-2xl);
}
.footer-reviews {
padding-bottom: var(--space-2xl);
margin-bottom: var(--space-xl);
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-reviews__bar {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4rem 1rem;
margin-bottom: var(--space-md);
}
.footer-reviews__title {
margin: 0;
color: #fff;
font-family: var(--font-heading);
font-weight: var(--fw-bold);
font-size: var(--fs-h3);
line-height: var(--lh-heading, 1.15);
}
.footer-reviews__avg { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-on-dark-soft); }
.footer-reviews__avg .gr-stars--full { font-size: 0.95rem; }
.footer-reviews__avg strong { color: #fff; font-weight: 700; }
.footer-reviews__top { margin-bottom: var(--space-sm); }
.footer-reviews__hint { color: var(--color-on-dark-soft); }
.footer-reviews__track { --fr-gap: 1.5rem; gap: var(--fr-gap); padding-block: 0.25rem 0.5rem; }
.footer-reviews__track .gr-card {
flex-basis: calc((100% - 2 * var(--fr-gap)) / 3);
max-width: none;
}
@media (max-width: 900px) {
.footer-reviews__track .gr-card { flex-basis: calc((100% - var(--fr-gap)) / 2); }
}
@media (max-width: 600px) {
.footer-reviews__track .gr-card { flex-basis: 100%; }
}
.footer-reviews__foot { margin-top: var(--space-lg); text-align: center; }
.footer-reviews__foot .btn svg { width: 1em; height: 1em; margin-left: 0.15rem; }
.gr-card__source {
margin-top: 0.35rem;
font-size: var(--fs-small);
color: var(--color-ink-soft);
opacity: 0.8;
}
.site-footer .footer-col__title {
font-family: var(--font-heading);
font-weight: var(--fw-bold);
line-height: var(--lh-heading);
text-wrap: balance;
color: #fff;
font-size: var(--fs-small);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
margin-bottom: var(--space-md);
}
.footer-top {
display: grid;
gap: var(--space-2xl);
grid-template-columns: 1.6fr 1fr 1fr 1fr;
padding-top: var(--space-2xl);
padding-bottom: var(--space-3xl);
border-bottom: 1px solid var(--color-line-dark);
}
@media (max-width: 1023px) {
.footer-top { grid-template-columns: 1fr 1fr; }
}
.footer-brand > img, .footer-brand > svg { height: 36px; width: auto; margin-bottom: var(--space-md); }
.footer-brand p { max-width: 34ch; color: var(--color-on-dark-soft); }
.footer-contact li { margin-bottom: 0.5rem; }
.footer-contact a { color: var(--color-on-dark-soft); }
.footer-contact a:hover { color: #fff; }
.footer-contact__item { display: flex; align-items: center; gap: 0.6rem; }
.footer-contact__item--addr { align-items: flex-start; }
.footer-contact__ic {
flex-shrink: 0;
display: grid;
place-items: center;
width: 1.15rem; height: 1.15rem;
color: #fff;
}
.footer-contact__item--addr .footer-contact__ic { margin-top: 0.15rem; }
.footer-contact__ic svg, .contact-points__ic svg { fill: none; }
.footer-contact__ic svg { width: 100%; height: 100%; }
.footer-links a { color: var(--color-on-dark-soft); display: inline-block; padding: 0.25rem 0; }
.footer-links a:hover { color: #fff; }
.footer-social { display: flex; gap: 0.6rem; margin-top: var(--space-md); }
.footer-social a {
width: 40px; height: 40px;
display: grid; place-items: center;
border: 1px solid var(--color-line-dark);
border-radius: var(--radius-pill);
color: #fff;
}
.footer-social a:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.footer-social svg { width: 1.1rem; height: 1.1rem; }
.footer-social__title { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: 0.95rem; color: #fff; margin: var(--space-md) 0 0.55rem; }
.footer-social { margin-top: 0; }
.footer-social svg, .hero-social svg, .contact-social svg { fill: currentColor; }
.contact-social-block { margin-top: var(--space-lg); }
.contact-social-block__title {
display: block; font-family: var(--font-heading); font-weight: var(--fw-semibold);
font-size: 0.95rem; color: var(--color-ink); margin-bottom: 0.6rem;
}
.contact-social { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.contact-social__btn {
width: 42px; height: 42px; display: grid; place-items: center;
border: 1px solid var(--color-line); border-radius: var(--radius-pill);
background: var(--color-surface); color: var(--color-primary);
transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.contact-social__btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: translateY(-2px); }
.contact-social__btn svg { width: 1.15rem; height: 1.15rem; }
.map-embed {
position: relative;
display: flex;
flex-direction: column;
min-height: clamp(320px, 34vw, 420px);
background: var(--color-surface-3);
border-radius: var(--radius-lg);
overflow: hidden;
}
.map-embed__ask {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
text-align: center;
}
.map-embed__ic { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--color-primary); }
.map-embed__ic svg { width: 100%; height: 100%; fill: none; }
.map-embed__addr { font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--color-ink); max-width: 30ch; }
.map-embed__note { font-size: var(--fs-small); color: var(--color-ink-soft); max-width: 40ch; }
.map-embed iframe { flex: 1 1 auto; width: 100%; min-height: clamp(280px, 30vw, 380px); border: 0; display: block; }
.map-embed__foot {
display: flex;
justify-content: flex-end;
padding: 0.75rem clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
background: var(--color-surface);
border-top: var(--border-soft);
}
.agency-contact { margin-top: var(--space-lg); }
.contact-points.agency-contact a { color: var(--color-primary); font-weight: var(--fw-semibold); }
.contact-points.agency-contact a:hover { color: var(--color-deep-blue); }
.footer-sectors { padding-block: var(--space-2xl); border-bottom: 1px solid var(--color-line-dark); }
.footer-sectors__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
width: 100%;
color: #fff;
font-family: var(--font-heading);
font-size: var(--fs-small);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
font-weight: var(--fw-semibold);
padding: 0;
}
.footer-sectors__toggle .footer-caret { width: 1rem; height: 1rem; transition: transform var(--dur-base) var(--ease-out); }
.footer-sectors__toggle[aria-expanded="false"] .footer-caret { transform: rotate(-90deg); }
@media (min-width: 1024px) {
.footer-sectors__toggle { cursor: default; pointer-events: none; }
.footer-sectors__toggle .footer-caret { display: none; }
}
@media (max-width: 1023px) {
.js .footer-sectors__grid {
overflow: hidden;
max-height: 0;
transition: max-height var(--dur-base) var(--ease-out);
}
.js .footer-sectors__grid.is-open { max-height: 1400px; }
}
.footer-sectors__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: 0.35rem 1.5rem;
margin-top: var(--space-md);
}
.footer-sectors__grid a {
color: var(--color-on-dark-soft);
padding: 0.35rem 0;
font-size: 0.95rem;
display: inline-block;
}
.footer-sectors__grid a:hover { color: #fff; }
.footer-bottom {
display: flex;
flex-wrap: wrap;
gap: var(--space-md) var(--space-lg);
justify-content: space-between;
align-items: center;
padding-block: var(--space-xl);
font-size: var(--fs-small);
color: var(--color-on-dark-muted);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.footer-legal a { color: var(--color-on-dark-muted); }
.footer-legal a:hover { color: #fff; }
.footer-legal button {
color: var(--color-on-dark-muted);
font: inherit;
text-decoration: underline;
}
.footer-legal button:hover { color: #fff; }
@media (max-width: 900px) {
.footer-top { grid-template-columns: 1fr; gap: var(--space-xl); }
}
.cookie-banner {
position: fixed;
left: var(--gutter);
right: var(--gutter);
bottom: var(--gutter);
max-width: 560px;
margin-inline: auto;
background: var(--color-surface);
border: var(--border-soft);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: var(--space-lg);
z-index: calc(var(--z-toast) + 1);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__title { font-size: var(--fs-h4); margin-bottom: var(--space-sm); }
.cookie-banner p { font-size: var(--fs-small); color: var(--color-ink-soft); margin-bottom: var(--space-md); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.cookie-banner__preferences { display: grid; gap: var(--space-sm); }
.cookie-banner__preferences[hidden] { display: none; }
.cookie-consent-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-sm);
border: var(--border-soft);
border-radius: var(--radius-sm);
font-size: var(--fs-small);
}
.cookie-consent-option span:first-child { display: grid; gap: 0.2rem; }
.cookie-consent-option small { color: var(--color-ink-soft); }
.cookie-consent-option input { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
@media (max-width: 480px) {
.cookie-banner { max-height: calc(100dvh - (2 * var(--gutter))); overflow-y: auto; }
.cookie-consent-option { align-items: flex-start; }
}
.page-loader {
position: fixed;
inset: 0;
z-index: var(--z-loader);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
isolation: isolate;
background: var(--color-deep-blue);
opacity: 0;
transition: opacity var(--dur-base) var(--ease-out);
}
.page-loader.is-on { opacity: 1; }
.page-loader.is-off {
opacity: 0;
transition-duration: var(--dur-slow);
pointer-events: none;
}
.page-loader__video {
display: block;
width: min(520px, 86vw);
height: auto;
max-height: 70vh;
object-fit: contain;
mix-blend-mode: screen;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.page-loader { transition: none; }
}
.js [data-reveal] {
opacity: 0;
transform: translateY(34px) scale(0.98);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
will-change: opacity, transform;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal].reveal-left  { transform: translateX(-64px) scale(0.98); }
.js [data-reveal].reveal-right { transform: translateX(64px) scale(0.98); }
.js [data-reveal].reveal-left.is-visible,
.js [data-reveal].reveal-right.is-visible { transform: none; }
.js [data-reveal].reveal-zoom { transform: scale(0.55); opacity: 0; }
.js [data-reveal].reveal-zoom.is-visible { transform: scale(1); opacity: 1; }
.js [data-reveal].reveal-zoom { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
[data-reveal][data-delay="1"] { transition-delay: 90ms; }
[data-reveal][data-delay="2"] { transition-delay: 180ms; }
[data-reveal][data-delay="3"] { transition-delay: 270ms; }
.js .svc-cards > [data-reveal]:nth-child(2),
.js .grid > [data-reveal]:nth-child(2)  { transition-delay: 90ms; }
.js .svc-cards > [data-reveal]:nth-child(3),
.js .grid > [data-reveal]:nth-child(3)  { transition-delay: 180ms; }
.js .svc-cards > [data-reveal]:nth-child(4),
.js .grid > [data-reveal]:nth-child(4)  { transition-delay: 270ms; }
.js .svc-cards > [data-reveal]:nth-child(5),
.js .grid > [data-reveal]:nth-child(5)  { transition-delay: 360ms; }
.js .svc-cards > [data-reveal]:nth-child(6),
.js .grid > [data-reveal]:nth-child(6)  { transition-delay: 450ms; }
@media (prefers-reduced-motion: reduce) {
.js [data-reveal] { opacity: 1; transform: none; transition: none; }
.js [data-reveal].reveal-left, .js [data-reveal].reveal-right,
.js [data-reveal].reveal-zoom { transform: none; opacity: 1; }
.js .svc-cards > [data-reveal], .js .grid > [data-reveal] { transition-delay: 0ms; }
}
.hero {
position: relative;
padding-top: clamp(3rem, 2rem + 4vw, 5.5rem);
padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
overflow: hidden;
}
.hero__grid {
display: grid;
gap: clamp(2rem, 1rem + 4vw, 4rem);
align-items: center;
}
@media (min-width: 960px) {
.hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}
.hero__eyebrow { margin-bottom: var(--space-lg); }
.hero h1 { margin-bottom: var(--space-lg); }
.hero h1 .text-gradient { display: inline; }
.hero__lead {
font-size: var(--fs-lead);
color: var(--color-ink-soft);
max-width: 46ch;
margin-bottom: var(--space-xl);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-xl); }
.hero__place {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: var(--fs-small);
color: var(--color-muted);
}
.hero__place svg { width: 1rem; height: 1rem; color: var(--color-primary); }
.hero__visual {
position: relative;
aspect-ratio: 1 / 1;
max-width: 520px;
margin-inline: auto;
width: 100%;
}
.hero__visual svg { width: 100%; height: 100%; }
.hero-orbit { transform-origin: center; }
.hero::before {
content: "";
position: absolute;
top: -20%;
right: -10%;
width: 60%;
height: 120%;
background: radial-gradient(circle at 60% 40%, rgba(74, 190, 221, 0.16), transparent 60%);
z-index: -1;
pointer-events: none;
}
.home-topbar { position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); }
.hero-marquee {
background: var(--gradient-brand);
color: #fff;
overflow: hidden;
max-height: 3rem;
transition: max-height var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.home-topbar:has(.site-header.is-scrolled) .hero-marquee { max-height: 0; opacity: 0; }
body.no-scroll .home-topbar .hero-marquee { max-height: 0; opacity: 0; transition: none; }
.hero-marquee__track {
display: flex;
width: max-content;
align-items: center;
white-space: nowrap;
padding-block: 0.42rem;
will-change: transform;
animation: heroMarquee 136s linear infinite;
}
.hero-marquee__content { display: flex; align-items: center; flex: 0 0 auto; }
.hero-marquee__item {
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.hero-marquee__sep { margin-inline: 1.05rem; opacity: 0.55; }
@keyframes heroMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.site-header--floating {
position: static;
background: rgba(10, 26, 44, 0.55);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: saturate(1.4) blur(14px);
box-shadow: 0 10px 30px rgba(4, 14, 28, 0.22);
transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.site-header--floating.is-scrolled {
background: rgba(8, 20, 36, 0.85);
box-shadow: 0 14px 40px rgba(4, 14, 28, 0.40);
}
.site-header--floating .header-inner { max-width: none; }
.site-header--floating .brand__logo--light { display: none; }
.site-header--floating .brand__logo--dark { display: block; }
.site-header--floating .brand img { height: 30px; }
.site-header--floating .nav-link { color: rgba(255, 255, 255, 0.86); }
.site-header--floating .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.site-header--floating .nav-link[aria-current="page"] { color: #fff; }
.site-header--floating .nav-caret { color: rgba(255, 255, 255, 0.7); }
.site-header--floating .theme-toggle { color: rgba(255, 255, 255, 0.88); border-color: rgba(255, 255, 255, 0.28); }
.site-header--floating .theme-toggle:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.14); }
.site-header--floating .nav-toggle span { background: #fff; }
body:not(.page-home) #main { padding-top: calc(var(--header-h) + 2.9rem); }
.home-hero {
position: relative;
min-height: 100svh;
display: grid;
align-content: center;
overflow: hidden;
isolation: isolate;
color: #fff;
padding-top: clamp(5.75rem, 4.75rem + 3.5vw, 7.75rem);
padding-bottom: clamp(3rem, 2rem + 2.5vw, 4.75rem);
}
.home-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--color-deep-blue); }
.home-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.home-hero__video { opacity: 0; transition: opacity .6s ease; }
.home-hero__video.is-ready { opacity: 1; }
.home-hero--v2 .home-hero__poster { animation: none !important; transform: none !important; }
img.home-hero__media { animation: heroZoom 28s ease-in-out infinite alternate; }
@keyframes heroZoom { from { transform: scale(1.03); } to { transform: scale(1.13); } }
.home-hero__scrim {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(6, 18, 34, 0.66) 0%, rgba(6, 18, 34, 0.5) 45%, rgba(5, 14, 27, 0.88) 100%),
radial-gradient(120% 85% at 50% 12%, transparent 38%, rgba(4, 12, 24, 0.55) 100%);
}
.home-hero__inner { position: relative; z-index: 2; text-align: center; max-width: 1240px; margin-inline: auto; }
.home-hero__eyebrow {
display: inline-block;
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
font-size: var(--fs-small);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-cyan);
margin-bottom: var(--space-lg);
}
.home-hero__title {
font-family: var(--font-heading);
font-weight: var(--fw-bold);
font-size: clamp(2.3rem, 1.3rem + 4.4vw, 5rem);
line-height: 1.22;
letter-spacing: var(--tracking-tight);
color: #fff;
margin: 0 auto var(--space-lg);
max-width: 24ch;
text-wrap: balance;
}
.home-hero__line { display: block; }
.home-hero__line > span { display: block; }
.home-hero__accent {
background: var(--gradient-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.home-hero__lead {
font-size: var(--fs-lead);
line-height: var(--lh-snug);
color: rgba(255, 255, 255, 0.82);
max-width: 70ch;
margin: 0 auto var(--space-xl);
}
.home-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.home-hero__actions .btn svg { width: 1.15em; height: 1.15em; transition: transform var(--dur-base) var(--ease-out); }
.home-hero__actions .btn:hover svg { transform: translateX(4px); }
.home-hero__seal {
position: absolute; z-index: 2;
right: clamp(1rem, -1rem + 6vw, 5rem);
bottom: clamp(1.75rem, 0.5rem + 4vw, 4.5rem);
width: clamp(92px, 6vw + 62px, 140px);
aspect-ratio: 1;
pointer-events: none;
}
.hero-seal { width: 100%; height: 100%; display: block; }
.hero-seal__ring { transform-origin: 60px 60px; animation: heroSealSpin 20s linear infinite; }
.hero-seal__ring text {
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
font-size: 8px;
letter-spacing: 1.1px;
fill: rgba(255, 255, 255, 0.92);
}
@keyframes heroSealSpin { to { transform: rotate(360deg); } }
.home-hero__scroll {
position: absolute; z-index: 2;
left: 50%; bottom: clamp(0.9rem, 0.5rem + 1vw, 1.6rem);
width: 42px; height: 42px;
display: grid; place-items: center;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: var(--radius-pill);
transform: translateX(-50%);
transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
animation: heroScrollBob 2.4s ease-in-out infinite;
}
.home-hero__scroll:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.home-hero__scroll svg { width: 20px; height: 20px; }
@keyframes heroScrollBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }
.home-hero__social {
position: absolute; z-index: 3;
left: clamp(1rem, 2.6vw, 3rem);
top: 50%; transform: translateY(-50%);
display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
}
.home-hero__social-label {
font-family: var(--font-heading); font-weight: var(--fw-semibold);
font-size: 0.92rem; color: #fff; letter-spacing: 0.01em;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
.hero-social { display: flex; flex-direction: column; gap: 0.7rem; }
.hero-social__btn {
width: 2.6rem; height: 2.6rem;
display: grid; place-items: center; border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
backdrop-filter: blur(4px);
transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.hero-social__btn:hover { background: rgba(255, 255, 255, 0.24); border-color: #fff; transform: translateY(-3px); color: #fff; }
.hero-social__btn svg { width: 1.15rem; height: 1.15rem; }
@media (max-width: 1100px) {
.home-hero__social {
position: static; left: auto; top: auto; transform: none;
flex-direction: row; align-items: center; justify-content: center;
gap: 0.75rem; margin: var(--space-lg) auto 0;
}
.hero-social { flex-direction: row; }
}
@media (prefers-reduced-motion: no-preference) {
.home-hero__eyebrow { animation: heroFadeUp 0.7s var(--ease-out) 0.05s both; }
.home-hero__line > span { animation: heroLineUp 0.66s var(--ease-out) both; }
.home-hero__line:nth-child(1) > span { animation-delay: 0.06s; }
.home-hero__line:nth-child(2) > span { animation-delay: 0.13s; }
.home-hero__line:nth-child(3) > span { animation-delay: 0.20s; }
.home-hero__line:nth-child(4) > span { animation-delay: 0.27s; }
.home-hero__lead   { animation: heroFadeUp 0.7s var(--ease-out) 0.42s both; }
.home-hero__actions{ animation: heroFadeUp 0.7s var(--ease-out) 0.55s both; }
.home-hero__social { animation: heroFadeUp 0.7s var(--ease-out) 0.68s both; }
.home-hero__seal   { animation: heroFadeUp 0.8s var(--ease-out) 0.7s both; }
}
@keyframes heroLineUp { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
.home-hero__actions { flex-direction: column; align-items: stretch; width: min(100%, 340px); margin-inline: auto; }
.home-hero__actions .btn { width: 100%; }
.hero-marquee__item { font-size: 0.66rem; letter-spacing: 0.12em; }
.home-hero__seal { width: 84px; right: 1rem; bottom: 1.25rem; }
.home-hero.home-hero--v2 { align-content: center; }
}
@media (max-width: 340px) {
.home-hero__seal { display: none; }
}
.home-hero__inner .btn:focus-visible,
.home-hero__scroll:focus-visible,
.site-header--floating .nav-link:focus-visible,
.site-header--floating .theme-toggle:focus-visible,
.site-header--floating .nav-toggle:focus-visible,
.site-header--floating .header-contact-btn:focus-visible,
.site-header--floating .brand:focus-visible {
outline-color: #fff;
outline-offset: 3px;
}
.home-hero--v2 .home-hero__scrim {
background:
linear-gradient(90deg,
rgba(4, 14, 28, 0.94) 0%,
rgba(4, 14, 28, 0.90) 30%,
rgba(4, 14, 28, 0.80) 52%,
rgba(4, 14, 28, 0.52) 66%,
rgba(4, 14, 28, 0.16) 82%,
rgba(4, 14, 28, 0) 100%),
linear-gradient(180deg,
rgba(4, 14, 28, 0.5) 0%, rgba(4, 14, 28, 0) 24%,
rgba(4, 14, 28, 0) 58%, rgba(4, 14, 28, 0.6) 100%);
}
.home-hero--v2 {
align-content: end;
padding-bottom: clamp(5rem, 3.5rem + 5vw, 8rem);
padding-top: calc(var(--header-h) + clamp(2.9rem, 2.4rem + 1.2vw, 4.2rem));
}
.hh2 {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 66%) minmax(0, 1fr);
align-items: end;
gap: var(--space-xl);
text-align: left;
}
@media (min-width: 1101px) {
.hh2 { padding-left: max(var(--gutter), calc(132px - max(0px, (100vw - var(--container-max)) / 2))); }
}
.hh2__content { max-width: 46rem; }
.hh2__eyebrow {
display: block;
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
font-size: var(--fs-small);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-cyan);
margin-bottom: var(--space-md);
}
.hh2__title {
font-family: var(--font-heading);
font-weight: var(--fw-extrabold);
font-size: clamp(1.9rem, 1.1rem + 3.5vw, 3.9rem);
line-height: 1.07;
letter-spacing: var(--tracking-tight);
color: #fff;
margin: 0 0 var(--space-lg);
}
.hh2__l {
display: block;
overflow: hidden;
padding-block: 0.14em 0.18em;
margin-block: -0.14em -0.18em;
}
.hh2__l > span { display: block; }
.hh2__hl {
font-style: normal;
color: var(--color-cyan);
}
.hh2__lead {
font-size: clamp(1rem, 0.94rem + 0.35vw, 1.18rem);
line-height: var(--lh-body);
color: rgba(255, 255, 255, 0.8);
max-width: 46ch;
margin: 0 0 var(--space-xl);
}
.hh2__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
.hh2__cta svg { width: 1.15em; height: 1.15em; fill: none; transition: transform var(--dur-base) var(--ease-out); }
.hh2__cta:hover svg { transform: translateX(4px); }
.hh2__link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
font-size: 1rem;
color: #fff;
padding-block: 0.3rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.34);
transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.hh2__link svg { width: 1.1em; height: 1.1em; fill: none; transition: transform var(--dur-base) var(--ease-out); }
.hh2__link:hover { color: var(--color-cyan); border-color: var(--color-cyan); }
.hh2__link:hover svg { transform: translateX(4px); }
@media (max-width: 900px) {
.hh2 { grid-template-columns: minmax(0, 1fr); }
.hh2__content { max-width: none; }
.home-hero--v2 .home-hero__scrim {
background:
linear-gradient(180deg, rgba(4, 14, 28, 0.82) 0%, rgba(4, 14, 28, 0.72) 45%, rgba(4, 14, 28, 0.9) 100%),
radial-gradient(120% 85% at 50% 12%, transparent 38%, rgba(4, 12, 24, 0.55) 100%);
}
}
@media (max-width: 560px) {
.hh2__actions { align-items: flex-start; gap: var(--space-md); }
.hh2__cta { width: 100%; justify-content: center; }
}
@media (max-width: 400px) {
.hh2__title { font-size: 7.6vw; }
}
@media (max-height: 620px) {
.home-hero--v2 { align-content: center; padding-bottom: clamp(3rem, 2rem + 2.5vw, 4.75rem); }
.hh2__title { font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3rem); }
.hh2__lead { margin-bottom: var(--space-lg); }
}
.home-hero--v2 .home-hero__seal { width: clamp(104px, 6vw + 68px, 150px); }
.home-hero--v2 .hero-seal { overflow: visible; }
.home-hero--v2 .hero-seal__ring text { font-size: 8.4px; letter-spacing: 1.4px; }
.hh2__rating {
display: inline-flex;
flex-direction: column;
gap: 0.15rem;
margin-top: var(--space-md);
text-decoration: none;
color: var(--color-on-dark, #fff);
width: fit-content;
}
.hh2__rating-line { display: inline-flex; align-items: center; gap: 0.5rem; }
.hh2__rating-stars { color: #fbbc04; letter-spacing: 0.12em; font-size: 1.05rem; line-height: 1; }
.hh2__rating-score { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 1.05rem; }
.hh2__rating-label { font-size: var(--fs-small); color: var(--color-on-dark-soft, rgba(255,255,255,0.82)); }
.hh2__rating:hover .hh2__rating-label { text-decoration: underline; }
.hh2__rating:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: var(--radius-sm); }
@media (max-width: 640px) {
.home-hero--v2 .home-hero__seal { width: 84px; }
}
.hh2 .btn:focus-visible,
.hh2__link:focus-visible { outline-color: #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
.hh2__eyebrow { animation: hh2Fade 0.7s var(--ease-out) 0.05s both; }
.hh2__l > span { animation: hh2Mask 0.85s var(--ease-out) both; }
.hh2__l:nth-child(1) > span { animation-delay: 0.12s; }
.hh2__l:nth-child(2) > span { animation-delay: 0.20s; }
.hh2__l:nth-child(3) > span { animation-delay: 0.28s; }
.hh2__l:nth-child(4) > span { animation-delay: 0.36s; }
.hh2__lead    { animation: hh2Fade 0.75s var(--ease-out) 0.56s both; }
.hh2__actions { animation: hh2Fade 0.75s var(--ease-out) 0.68s both; }
}
@keyframes hh2Mask { from { opacity: 0; transform: translateY(108%); } to { opacity: 1; transform: none; } }
@keyframes hh2Fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.hero-marquee__track,
.hero-seal__ring,
.home-hero__scroll,
img.home-hero__media { animation: none !important; }
}
.trust-cards {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
text-align: left;
}
.trust-card { display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; }
.trust-card__icon {
width: 3rem; height: 3rem;
display: grid; place-items: center;
border-radius: var(--radius-sm);
background: var(--color-surface-3);
color: var(--color-primary);
transition: transform var(--dur-base) var(--ease-out),
scale var(--dur-base) var(--ease-out),
rotate var(--dur-base) var(--ease-out),
background-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out);
}
.trust-card__icon svg { width: 1.5rem; height: 1.5rem; }
.trust-card:hover .trust-card__icon {
background: var(--color-primary);
color: #fff;
scale: 1.08;
rotate: -3deg;
}
.trust-card .trust__item { color: var(--color-ink); font-size: var(--fs-body); margin: 0; }
.trust__item strong { color: var(--color-primary); }
.client-logos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--space-xl);
align-items: center;
}
.client-logos img { max-height: 46px; width: auto; margin-inline: auto; opacity: 0.75; filter: grayscale(1); }
.capabilities { display: grid; gap: var(--space-xl); }
@media (min-width: 768px) { .capabilities { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .capabilities { grid-template-columns: repeat(3, 1fr); } }
.cap-group {
background: var(--color-surface);
border: var(--border-soft);
border-radius: var(--radius-lg);
padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.cap-group:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cap-group__icon {
width: 3rem; height: 3rem;
display: grid; place-items: center;
border-radius: var(--radius-sm);
background: var(--gradient-brand);
color: #fff;
margin-bottom: var(--space-md);
}
.cap-group__icon svg { width: 1.5rem; height: 1.5rem; }
.cap-group__icon--img {
width: 3.25rem; height: 3.25rem;
background: none;
border-radius: 0;
}
.cap-group__icon--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cap-group h3 { font-size: var(--fs-h4); margin-bottom: 0.35rem; }
.cap-group > p { color: var(--color-ink-soft); margin-bottom: var(--space-md); font-size: 0.98rem; }
.cap-links { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cap-links a {
font-size: var(--fs-small);
font-weight: var(--fw-medium);
padding: 0.3rem 0.7rem;
border-radius: var(--radius-pill);
background: var(--color-surface-2);
color: var(--color-ink-soft);
}
.cap-links a:hover { background: var(--color-surface-3); color: var(--color-primary); }
@media (min-width: 1024px) {
.svc-split {
display: grid;
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
gap: clamp(2.5rem, 1.5rem + 3vw, 5rem);
align-items: start;
}
.svc-split__intro {
position: sticky;
top: calc(var(--header-h) + 1.5rem);
align-self: start;
margin-bottom: 0;
}
.svc-split__cards.capabilities {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
}
.diff-grid { display: grid; gap: var(--space-xl); }
@media (min-width: 700px) { .diff-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .diff-grid { grid-template-columns: repeat(4, 1fr); } }
.diff-item__num {
font-family: var(--font-heading);
font-weight: var(--fw-extrabold);
font-size: 1.1rem;
color: var(--color-cyan);
margin-bottom: var(--space-sm);
}
.diff-item h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.diff-item p { color: var(--color-on-dark-soft); font-size: 0.98rem; }
.bg-deep .diff-item h3 { color: #fff; }
.why-stage { display: flex; flex-wrap: wrap; gap: var(--space-lg); justify-content: center; }
.why-card {
position: relative;
width: clamp(220px, 30%, 300px);
padding: 1.25rem 1.3rem 1.35rem;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.22);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.55);
outline: none;
}
@media (max-width: 1023px) {
.why-stage { flex-direction: column; align-items: center; }
.why-stage .why-card { width: min(100%, 460px); }
.why-stage.is-accordion .why-card {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background var(--dur-base) var(--ease-out);
}
.why-stage.is-accordion .why-card__title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
margin-bottom: 0;
}
.why-stage.is-accordion .why-card__title::after {
content: "";
flex: none;
width: 0.6rem;
height: 0.6rem;
margin-right: 0.15rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
opacity: 0.85;
transition: transform var(--dur-base) var(--ease-out);
}
.why-stage.is-accordion .why-card.is-open .why-card__title::after {
transform: translateY(1px) rotate(-135deg);
}
.why-stage.is-accordion .why-card__text {
overflow: hidden;
max-height: 0;
margin-top: 0;
opacity: 0;
transition: max-height 0.4s var(--ease-out), opacity 0.3s var(--ease-out), margin-top 0.3s var(--ease-out);
}
.why-stage.is-accordion .why-card.is-open .why-card__text {
max-height: 40rem;
margin-top: 0.7rem;
opacity: 1;
}
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
.why-stage.is-accordion .why-card__text,
.why-stage.is-accordion .why-card__title::after { transition: none; }
}
.why-card--v2 { background: linear-gradient(158deg, rgba(8, 114, 187, 0.82), rgba(5, 64, 112, 0.72)); border-color: rgba(8, 114, 187, 0.7); }
.why-card--v3 { background: rgba(74, 190, 221, 0.36); border-color: rgba(74, 190, 221, 0.5); }
.why-card__num {
display: block;
font-family: var(--font-heading);
font-weight: var(--fw-extrabold);
font-size: 2.9rem;
line-height: 0.9;
letter-spacing: -0.02em;
color: var(--color-cyan);
margin-bottom: 0.55rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
.why-card--v2 .why-card__num { color: #fff; }
.why-card__title { font-size: 1.12rem; line-height: 1.25; margin-bottom: 0.35rem; color: #fff; }
.why-card__text { font-size: 0.95rem; line-height: 1.4; color: var(--color-on-dark-soft); }
.why-card__text p + p { margin-top: 0.6em; }
.why-card__text strong { color: #fff; font-weight: var(--fw-bold); }
.why-scroll.is-why { height: calc(100svh + var(--why-steps, 8) * 38svh); }
.why-scroll.is-why.is-why-free { height: auto; }
.why-scroll.is-why.is-why-free .why-sticky { position: static; }
.why-scroll.is-why .why-sticky {
position: sticky;
top: var(--header-h);
height: calc(100svh - var(--header-h));
display: flex;
align-items: center;
}
.why-scroll.is-why .why-stage {
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 0.7rem;
height: min(58vh, 380px);
overflow: hidden;
}
.why-scroll.is-why .why-stage::after {
content: "";
flex: 0 1 0;
flex-grow: var(--why-rest, 0);
}
.why-scroll.is-why .why-card {
flex: 0 1 0;
flex-grow: var(--g, 1);
opacity: var(--e, 1);
width: auto;
min-width: 0;
height: 100%;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
column-gap: calc(1.3rem * var(--o, 1));
padding: 1.35rem calc(0.6rem * var(--e, 1));
border-width: calc(1px * var(--e, 1));
}
.why-scroll.is-why .why-card__num {
grid-area: 1 / 1;
margin-bottom: 0.75rem;
font-size: clamp(2.2rem, 1.2rem + 1.6vw, 2.9rem);
}
.why-scroll.is-why .why-card__title {
grid-area: 1 / 2;
align-self: center;
margin: 0;
opacity: var(--o, 1);
}
.why-scroll.is-why .why-card__num { position: relative; }
.why-scroll.is-why .why-card__num::after {
content: attr(data-title);
position: absolute;
top: calc(100% + 0.4rem);
left: 50%;
writing-mode: vertical-rl;
transform: translateX(-50%) rotate(180deg);
white-space: nowrap;
font-family: var(--font-heading);
font-weight: var(--fw-bold);
font-size: 1.12rem;
line-height: 1.25;
letter-spacing: var(--tracking-tight);
color: #fff;
text-shadow: none;
opacity: calc(1 - var(--o, 1));
}
.why-scroll.is-why .why-card__text {
grid-area: 2 / 2;
align-self: start;
opacity: var(--o, 1);
}
.why-scroll.is-why .why-stage.is-why-done .why-card {
cursor: pointer;
transition: flex-grow 0.55s var(--ease-out), opacity 0.35s var(--ease-out);
}
.why-scroll.is-why .why-stage.is-why-done .why-card__text,
.why-scroll.is-why .why-stage.is-why-done .why-card__title,
.why-scroll.is-why .why-stage.is-why-done .why-card__num::after {
transition: opacity 0.4s var(--ease-out);
}
.why-scroll.is-why .why-card:focus-visible { box-shadow: 0 0 0 3px var(--color-cyan); }
.method { --method-dot: 2.75rem; --method-cols: 5; display: grid; gap: var(--space-lg); counter-reset: step; }
@media (min-width: 768px) { .method { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.method-step { position: relative; padding-top: var(--space-lg); }
.method-step::before {
counter-increment: step;
content: counter(step);
display: grid; place-items: center;
width: var(--method-dot); height: var(--method-dot);
border-radius: var(--radius-pill);
background: var(--color-white);
border: 2px solid var(--color-primary);
color: var(--color-primary);
font-family: var(--font-heading);
font-weight: var(--fw-bold);
margin-bottom: var(--space-md);
}
.method-step h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.method-step p { font-size: 0.95rem; color: var(--color-ink-soft); }
.method--line { position: relative; }
@media (min-width: 768px) {
.method--line::before {
content: "";
position: absolute;
top: calc(var(--space-lg) + var(--method-dot) / 2 - 1px);
left: calc(var(--method-dot) / 2);
right: calc((100% - (var(--method-cols) - 1) * var(--space-lg)) / var(--method-cols) - var(--method-dot) / 2);
height: 2px;
background: linear-gradient(90deg, var(--color-primary), var(--color-cyan));
opacity: 0.35;
z-index: 0;
}
.method-step { z-index: 1; }
}
.js .method--line[data-reveal] { opacity: 1; transform: none; }
@media (min-width: 768px) {
.js .method--line::before {
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.7s var(--ease-out);
}
.js .method--line.is-visible::before { transform: scaleX(1); }
}
.js .method--line .method-step::before {
opacity: 0;
transform: scale(0.4);
transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.45, 0.6, 1);
transition-delay: calc(var(--i) * 160ms + 250ms);
}
.js .method--line.is-visible .method-step::before { opacity: 1; transform: scale(1); }
.js .method--line .method-step h3,
.js .method--line .method-step p {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.45s ease, transform 0.5s var(--ease-out);
}
.js .method--line .method-step h3 { transition-delay: calc(var(--i) * 160ms + 430ms); }
.js .method--line .method-step p  { transition-delay: calc(var(--i) * 160ms + 520ms); }
.js .method--line.is-visible .method-step h3,
.js .method--line.is-visible .method-step p { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js .method--line::before,
.js .method--line .method-step::before,
.js .method--line .method-step h3,
.js .method--line .method-step p {
opacity: 1; transform: none; transition: none;
}
.js .method--line.is-visible::before { transform: scaleX(1); }
}
.method-cx__bar {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-md); flex-wrap: wrap;
margin-top: var(--space-lg);
}
.method-cx__hint { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-muted); font-size: var(--fs-small); }
.method-cx__hint svg { width: 1.35rem; height: 1.35rem; color: var(--color-primary); }
.method-cx__counter {
font-family: var(--font-heading); font-weight: var(--fw-bold);
font-size: var(--fs-h4); letter-spacing: 0.06em; color: var(--color-muted);
}
.method-cx__counter-cur { color: var(--color-primary); }
.method-cx { margin-top: var(--space-xl); }
.method-cx__track {
position: relative;
display: flex;
gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
padding-block: 0.75rem;
padding-inline: max(var(--gutter), calc((100% - var(--container-max)) / 2));
margin: 0;
list-style: none;
cursor: grab;
user-select: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.method-cx__track::-webkit-scrollbar { display: none; }
.method-cx__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.method-cx__card {
position: relative;
flex: 0 0 auto;
width: min(82vw, 940px);
height: clamp(460px, 50vh, 480px);
scroll-snap-align: center;
display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg);
padding: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
border-radius: var(--radius-xl);
background: var(--gradient-deep);
color: #fff;
overflow: hidden;
isolation: isolate;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: var(--shadow-lg);
transition: border-color var(--dur-base) var(--ease-out);
}
.method-cx__card.is-active { border-color: rgba(74, 190, 221, 0.55); }
.method-cx__glow {
position: absolute; z-index: -1; inset: auto -6% auto auto; top: -14%;
width: 62%; aspect-ratio: 1;
background: radial-gradient(circle at 50% 50%, rgba(74, 190, 221, 0.5), transparent 62%);
pointer-events: none;
}
.method-cx__card::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 100% 3.2rem,
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 3.2rem 100%;
-webkit-mask-image: radial-gradient(130% 90% at 82% 4%, #000, transparent 62%);
mask-image: radial-gradient(130% 90% at 82% 4%, #000, transparent 62%);
opacity: 0.55; pointer-events: none;
}
.method-cx__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.method-cx__num {
font-family: var(--font-heading); font-weight: var(--fw-extrabold);
font-size: clamp(3rem, 1.8rem + 5vw, 5.5rem); line-height: 0.9; letter-spacing: -0.02em;
background: linear-gradient(140deg, #ffffff 0%, var(--color-cyan) 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.method-cx__icon {
flex: 0 0 auto;
width: clamp(3rem, 2.4rem + 1.2vw, 3.6rem); height: clamp(3rem, 2.4rem + 1.2vw, 3.6rem);
display: grid; place-items: center;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
color: var(--color-cyan);
}
.method-cx__icon svg { width: 54%; height: 54%; }
.method-cx__icon--img {
width: clamp(3.5rem, 2.8rem + 1.4vw, 4.2rem); height: clamp(3.5rem, 2.8rem + 1.4vw, 4.2rem);
background: none;
border: 0;
border-radius: 0;
}
.method-cx__icon--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.method-cx__body { max-width: 46ch; }
.method-cx__kicker {
display: inline-block;
font-family: var(--font-heading); font-weight: var(--fw-semibold);
font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--color-cyan); margin-bottom: var(--space-sm);
}
.method-cx__title { color: #fff; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.7rem); line-height: 1.1; margin-bottom: var(--space-sm); }
.method-cx__text { color: rgba(255, 255, 255, 0.82); font-size: 1rem; line-height: 1.5; max-width: 42ch; }
.method-cx__text strong { color: #fff; font-weight: var(--fw-bold); }
@media (max-width: 640px) {
.method-cx__card { width: 86vw; height: clamp(370px, 48vh, 400px); }
}
@media (prefers-reduced-motion: reduce) {
.method-cx__track { scroll-behavior: auto; }
}
.eshop-stack__head { max-width: 60ch; }
.eshop-stack__deck { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
.eshop-card {
position: relative;
width: min(94%, 760px);
min-height: clamp(230px, 32vh, 320px);
margin-inline: auto;
display: flex; flex-direction: column; gap: var(--space-md);
padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
border-radius: var(--radius-xl);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: var(--shadow-lg);
color: #fff;
background: linear-gradient(135deg, var(--color-deep-blue) 0%,
color-mix(in srgb, var(--color-primary), var(--color-cyan) calc(var(--i, 0) * 24%)) 100%);
}
.eshop-card__num {
font-family: var(--font-heading); font-weight: var(--fw-extrabold);
font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1;
background: linear-gradient(140deg, #fff, var(--color-cyan));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.eshop-card__body { flex: 1 1 auto; }
.eshop-card__title { color: #fff; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.2; margin-bottom: 0.4rem; }
.eshop-card__text { color: rgba(255, 255, 255, 0.85); font-size: 1rem; line-height: var(--lh-snug); }
.eshop-card__step {
font-family: var(--font-heading); font-weight: var(--fw-semibold);
font-size: var(--fs-small); letter-spacing: 0.1em; color: var(--color-cyan); align-self: flex-start;
}
.js .eshop-stack { position: relative; height: 340vh; padding-block: 0; }
.js .eshop-stack__sticky {
position: sticky; top: var(--header-h);
height: calc(100svh - var(--header-h));
display: flex; flex-direction: column; overflow: hidden;
}
.js .eshop-stack__sticky > .container {
display: flex; flex-direction: column; height: 100%;
gap: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem);
padding-block: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
}
.js .eshop-stack__head { flex: 0 0 auto; margin-bottom: 0; }
.js .eshop-stack__deck { flex: 1 1 auto; margin-top: 0; gap: 0; display: grid; place-items: center; min-height: 0; }
.js .eshop-card { grid-area: 1 / 1; opacity: 0; will-change: transform, opacity; }
@media (max-width: 768px) { .js .eshop-stack { height: 280vh; } }
@media (prefers-reduced-motion: reduce) {
.js .eshop-stack { height: auto; padding-block: var(--section-y); }
.js .eshop-stack__sticky { position: static; height: auto; overflow: visible; }
.js .eshop-stack__sticky > .container { display: block; height: auto; }
.js .eshop-stack__deck { grid-auto-flow: row; place-items: stretch; gap: var(--space-lg); margin-top: var(--space-xl); }
.js .eshop-card { grid-area: auto; opacity: 1 !important; transform: none !important; width: min(94%, 760px); }
}
.exp-row { display: flex; flex-wrap: wrap; gap: clamp(0.5rem, 1vw, 1rem); }
.exp-card { flex: 1 1 260px; min-width: 0; }
.exp-card > article { height: 100%; }
@media (min-width: 768px) {
.js .exp-section.is-exp { position: relative; height: 320vh; padding-block: 0; }
.js .exp-section.is-exp .exp-sticky {
position: sticky; top: var(--header-h);
height: calc(100svh - var(--header-h));
display: flex; flex-direction: column; justify-content: center; overflow: hidden;
}
.js .exp-section.is-exp .exp-sticky > .container {
display: flex; flex-direction: column; gap: var(--space-lg); width: 100%;
padding-block: clamp(1rem, 0.6rem + 1.6vw, 3.25rem);
}
.js .exp-section.is-exp .exp-head { flex: 0 0 auto; margin-bottom: 0; }
.js .exp-section.is-exp .exp-row {
flex-wrap: nowrap; align-items: stretch;
height: min(46vh, 400px);
}
.js .exp-section.is-exp .exp-card {
flex: 1 1 0; min-width: 0; overflow: hidden;
will-change: flex-grow;
}
.js .exp-section.is-exp .exp-card > article { height: 100%; overflow: hidden; }
.js .exp-section.is-exp .exp-card__text,
.js .exp-section.is-exp .exp-card__link {
opacity: var(--act, 1);
transition: opacity 0.25s var(--ease-out);
}
.js .service-web .exp-section.is-exp .exp-card > article { position: relative; }
.js .service-web .exp-section.is-exp .exp-card > article::before {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
background: var(--color-surface);
opacity: calc((1 - var(--act, 1)) * 0.62);
pointer-events: none;
z-index: 3;
}
.js .service-web .exp-section.is-exp .exp-card > article > * {
filter: blur(calc((1 - var(--act, 1)) * 4px));
}
.js .service-web .exp-section.is-exp .exp-card:not(.is-exp-open) { pointer-events: none; }
}
.vst-body { display: grid; gap: var(--space-lg); }
.vst-nums { display: none; }
.vst-cards { display: grid; gap: var(--space-lg); }
.vst-card > .card { height: 100%; }
.vst-card .card > .vst-card__icon { display: block; margin-bottom: var(--space-md); }
.vst-card .card > .vst-card__icon img {
width: clamp(2.9rem, 2.4rem + 1.6vw, 3.6rem);
height: auto; display: block;
}
.vst-card .card h3 { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); line-height: 1.2; }
.vst-card .card p  { font-size: clamp(1.02rem, 0.96rem + 0.25vw, 1.18rem); line-height: 1.6; }
.vst-card .card p + p { margin-top: 0.6em; }
.vst-card .card .link-arrow { font-size: 1.05rem; }
@media (min-width: 768px) {
.js .vst-section.is-vstack { position: relative; height: 360vh; padding-block: 0; }
.js .vst-section.is-vstack .vst-sticky {
position: sticky; top: var(--header-h);
height: calc(100svh - var(--header-h));
display: flex; flex-direction: column; overflow: hidden;
}
.js .vst-section.is-vstack .vst-sticky > .container {
display: flex; flex-direction: column; gap: var(--space-lg); width: 100%;
height: 100%;
padding-block: clamp(1.25rem, 1rem + 2vw, 2.5rem);
}
.js .vst-section.is-vstack .vst-head { flex: 0 0 auto; margin-bottom: 0; }
.js .vst-section.is-vstack .vst-body {
flex: 1 1 auto; min-height: 0;
margin-top: var(--space-md);
display: grid; grid-template-columns: minmax(96px, 160px) 1fr;
gap: clamp(1rem, 3vw, 3rem); align-items: center;
overflow: hidden;
}
.js .vst-section.is-vstack .vst-nums { display: block; position: relative; height: 100%; overflow: hidden; }
.js .vst-section.is-vstack .vst-num {
position: absolute; left: 0; top: 50%;
font-family: var(--font-heading); font-weight: var(--fw-extrabold);
font-size: clamp(3rem, 6.5vw, 6rem); line-height: 1; letter-spacing: -0.02em;
color: var(--color-cyan);
transform: translate3d(0, -50%, 0);
will-change: transform, opacity;
}
.js .vst-section.is-vstack .vst-cards { position: relative; height: min(58vh, 410px); }
.js .vst-section.is-vstack .vst-card {
position: absolute; inset: 0;
will-change: transform, opacity;
}
.js .vst-section.is-vstack .vst-card > .card {
height: 100%; overflow: hidden;
box-shadow: 0 24px 60px -28px rgba(3, 30, 54, 0.55);
}
}
.stk-list { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 5vh, 3.5rem); }
.stk-item {
position: sticky;
top: calc(var(--header-h) + 1.5rem + var(--i, 0) * 18px);
z-index: calc(var(--i, 0) + 1);
}
.stk-card {
display: grid;
grid-template-columns: 1.02fr 1fr;
align-items: stretch;
gap: 0;
padding: 0;
overflow: hidden;
background: var(--color-surface);
box-shadow: 0 24px 60px -28px rgba(3, 30, 54, 0.55);
}
.stk-card__body {
display: flex; flex-direction: column; justify-content: center;
gap: var(--space-sm);
padding: clamp(1.75rem, 1.1rem + 2.4vw, 3rem);
}
.stk-card__n {
font-family: var(--font-heading); font-weight: var(--fw-bold);
font-size: var(--fs-small); letter-spacing: 0.08em;
color: var(--color-cyan);
}
.stk-card__body h3 { font-size: var(--fs-h3); }
.stk-card__body p { color: var(--color-ink-soft); }
.stk-card__link { margin-top: var(--space-sm); }
.stk-card__media { position: relative; min-height: 100%; background: var(--color-surface-3); }
.stk-card__media img,
.stk-card__media video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.stk-card__ph { position: absolute; inset: 0; display: grid; place-items: center; }
.stk-card__ph img { width: 72px; height: 72px; opacity: 0.5; }
.stk-card--contain .stk-card__media { background: var(--color-surface-3); }
.stk-card--contain .stk-card__media img,
.stk-card--contain .stk-card__media video { object-fit: contain; padding: clamp(0.75rem, 2vw, 1.75rem); }
.stk-card--contain .stk-card__media { overflow: visible; }
.stk-card--contain .stk-card__media > img,
.stk-card--contain .stk-card__media > video,
.stk-card--contain .stk-card__media > .stk-card__ph { z-index: 1; }
.stk-card--contain .stk-card__media::before {
content: "";
position: absolute;
z-index: 0;
--stk-curve: clamp(16px, 2.2vw, 30px);
top: -8%; bottom: -8%;
left: calc(-1 * var(--stk-curve));
width: calc(2 * var(--stk-curve));
background: var(--color-surface-3);
border-radius: 50%;
pointer-events: none;
}
@media (max-width: 719.98px) {
.stk-card--contain .stk-card__media::before {
--stk-curve: clamp(14px, 4vw, 24px);
top: auto; left: 50%;
bottom: calc(-1 * var(--stk-curve));
width: 140%; height: calc(2 * var(--stk-curve));
transform: translateX(-50%);
}
}
[data-tilt] .card {
transform-style: preserve-3d;
will-change: transform;
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
[data-tilt] .card.is-tilting {
transition: transform 0.08s linear,
box-shadow var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
[data-tilt] .tilt-cell { display: flex; }
[data-tilt] .tilt-cell > .card { flex: 1 1 auto; width: 100%; }
.js [data-tilt] .tilt-cell[data-reveal] {
opacity: 0;
transform: perspective(1000px) rotateX(-26deg) translateY(52px) scale(0.94);
transform-origin: 50% 100%;
}
.js [data-tilt] .tilt-cell[data-reveal].is-visible {
opacity: 1;
transform: none;
animation: tiltCardIn 0.8s cubic-bezier(0.21, 1.02, 0.36, 1) backwards;
}
@keyframes tiltCardIn {
0%   { opacity: 0; transform: perspective(1000px) rotateX(-26deg) translateY(52px) scale(0.94); }
55%  { opacity: 1; }
100% { opacity: 1; transform: perspective(1000px) rotateX(0) translateY(0) scale(1); }
}
.js [data-tilt] .tilt-cell[data-reveal]:nth-child(2).is-visible { animation-delay: 70ms; }
.js [data-tilt] .tilt-cell[data-reveal]:nth-child(3).is-visible { animation-delay: 140ms; }
.js [data-tilt] .tilt-cell[data-reveal]:nth-child(4).is-visible { animation-delay: 210ms; }
.js [data-tilt] .tilt-cell[data-reveal]:nth-child(5).is-visible { animation-delay: 280ms; }
.js [data-tilt] .tilt-cell[data-reveal]:nth-child(6).is-visible { animation-delay: 350ms; }
.js [data-tilt] .tilt-cell[data-reveal]:nth-child(7).is-visible { animation-delay: 420ms; }
.js [data-tilt] .tilt-cell[data-reveal]:nth-child(8).is-visible { animation-delay: 490ms; }
.js [data-tilt] .tilt-cell[data-reveal]:nth-child(9).is-visible { animation-delay: 560ms; }
@media (prefers-reduced-motion: reduce) {
[data-tilt] .card { transition: none; transform: none !important; }
.js [data-tilt] .tilt-cell[data-reveal] { opacity: 1; transform: none !important; animation: none; }
}
@media (min-width: 720px) {
.stk-card { min-height: clamp(340px, 44vh, 460px); }
}
@media (max-width: 719.98px) {
.stk-card { grid-template-columns: 1fr; }
.stk-card__media { min-height: 0; aspect-ratio: 16 / 10; order: -1; }
.stk-card__media img, .stk-card__media video { position: static; }
}
@media (prefers-reduced-motion: reduce) {
.stk-item { position: static; }
}
.projects { display: grid; gap: var(--space-xl); }
@media (min-width: 800px) { .projects { grid-template-columns: repeat(2, 1fr); } }
.project-card {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-surface-3);
border: var(--border-soft);
min-height: 320px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.project-card__media { position: absolute; inset: 0; }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; }
.project-card__body {
position: relative;
padding: var(--space-xl);
background: linear-gradient(0deg, rgba(5, 64, 112, 0.92), rgba(5, 64, 112, 0));
color: #fff;
}
.project-card__body h3 { color: #fff; }
.ai-list { display: grid; gap: var(--space-md); }
.ai-list li {
display: flex; gap: 0.75rem; align-items: flex-start;
padding: var(--space-md) 0;
border-bottom: 1px solid var(--color-line-dark);
}
.ai-list li:last-child { border-bottom: 0; }
.ai-list .tick {
flex-shrink: 0;
width: 1.6rem; height: 1.6rem;
display: grid; place-items: center;
border-radius: var(--radius-pill);
background: rgba(255,255,255,0.14);
color: #fff;
}
.ai-list .tick svg { width: 0.9rem; height: 0.9rem; }
.ai-list .tick--img {
background: none;
border-radius: 0;
margin-top: 0.05rem;
}
.ai-list .tick--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.js .ai-list--reveal > li[data-reveal] { transform: translateX(72px); }
.js .ai-list--reveal > li[data-reveal].is-visible { transform: none; }
.js .ai-list--reveal > li[data-reveal]:nth-child(1) { transition-delay: 40ms; }
.js .ai-list--reveal > li[data-reveal]:nth-child(2) { transition-delay: 160ms; }
.js .ai-list--reveal > li[data-reveal]:nth-child(3) { transition-delay: 280ms; }
.js .ai-list--reveal > li[data-reveal]:nth-child(4) { transition-delay: 400ms; }
.js .ai-list--reveal > li[data-reveal]:nth-child(5) { transition-delay: 520ms; }
@media (prefers-reduced-motion: reduce) {
.js .ai-list--reveal > li[data-reveal] { transform: none; transition-delay: 0ms; }
}
.testimonials { display: grid; gap: var(--space-xl); }
@media (min-width: 800px) { .testimonials { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.testimonial { }
.testimonial blockquote { font-size: 1.1rem; color: var(--color-ink); margin-bottom: var(--space-md); }
.testimonial__author { font-weight: var(--fw-semibold); font-family: var(--font-heading); }
.testimonial__role { color: var(--color-muted); font-size: var(--fs-small); }
.post-grid { display: grid; gap: var(--space-xl); }
@media (min-width: 700px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card {
display: flex; flex-direction: column;
border: var(--border-soft);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-surface);
transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.article-related .post-card:hover { transform: translateY(-10px); }
.js .blog-post-grid .post-card[data-reveal] {
opacity: 0;
transform: none;
transition: none;
}
.js .blog-post-grid .post-card[data-reveal].is-visible {
opacity: 1;
animation: postCardIn 0.9s cubic-bezier(0.22, 0.92, 0.28, 1) backwards;
}
.js .blog-post-grid .post-card[data-reveal].is-visible .post-card__media img {
animation: postCardMediaIn 1.2s cubic-bezier(0.22, 0.92, 0.28, 1) backwards;
}
@keyframes postCardIn {
from { opacity: 0; transform: perspective(1100px) rotateX(-16deg) translateY(52px) scale(0.94); }
to   { opacity: 1; transform: perspective(1100px) rotateX(0deg) translateY(0) scale(1); }
}
@keyframes postCardMediaIn {
from { transform: scale(1.14); }
to   { transform: scale(1); }
}
.js .blog-post-grid .post-card:nth-child(even).is-visible,
.js .blog-post-grid .post-card:nth-child(even).is-visible .post-card__media img { animation-delay: 130ms; }
@media (prefers-reduced-motion: reduce) {
.js .blog-post-grid .post-card[data-reveal],
.js .blog-post-grid .post-card[data-reveal].is-visible,
.js .blog-post-grid .post-card[data-reveal].is-visible .post-card__media img {
opacity: 1;
animation: none;
}
}
#blog .section-head { max-width: none; }
#blog .section-head p strong { color: var(--color-ink); font-weight: var(--fw-bold); }
.fld-stage {
display: flex;
flex-wrap: wrap;
gap: 0;
--fld-h: clamp(158px, 14.9vw, 224px);
--fld-r: 20px;
--fld-tab-h: 30%;
--fld-tab-w: 52%;
--fld-slant: 7%;
--fld-lap: calc(var(--fld-h) * 0.32);
}
.fld {
position: relative;
width: var(--w);
height: var(--fld-h);
flex: 0 0 auto;
z-index: calc(var(--row, 0) * 2 + var(--col, 0) + 1);
color: var(--fg);
text-decoration: none;
filter:
drop-shadow(0 1px 1.5px rgba(5, 64, 112, 0.14))
drop-shadow(0 5px 14px rgba(5, 64, 112, 0.16));
opacity: var(--fld-op, 1);
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
pointer-events: none;
}
.fld__shape,
.fld__tab,
.fld__body { pointer-events: auto; }
.fld:nth-child(n + 3) { margin-top: calc(var(--fld-lap) * -1); }
.fld__shape {
position: absolute;
inset: 0;
z-index: 1;
background: var(--c);
clip-path: shape(
from 0 var(--fld-r),
curve to var(--fld-r) 0 with 0 0,
hline to calc(var(--fld-tab-w) - var(--fld-r) * 0.7),
curve to calc(var(--fld-tab-w) + var(--fld-slant) * 0.26)
calc(var(--fld-tab-h) * 0.26)
with var(--fld-tab-w) 0,
line to calc(var(--fld-tab-w) + var(--fld-slant) * 0.74)
calc(var(--fld-tab-h) * 0.74),
curve to calc(var(--fld-tab-w) + var(--fld-slant) + var(--fld-r) * 0.7)
var(--fld-tab-h)
with calc(var(--fld-tab-w) + var(--fld-slant)) var(--fld-tab-h),
hline to calc(100% - var(--fld-r)),
curve to 100% calc(var(--fld-tab-h) + var(--fld-r)) with 100% var(--fld-tab-h),
vline to calc(100% - var(--fld-r)),
curve to calc(100% - var(--fld-r)) 100% with 100% 100%,
hline to var(--fld-r),
curve to 0 calc(100% - var(--fld-r)) with 0 100%,
close
);
}
.fld__tab { display: none; }
@supports not (clip-path: shape(from 0px 0px, close)) {
.fld__shape {
top: var(--fld-tab-h);
clip-path: none;
border-radius: var(--fld-r);
}
.fld__tab {
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: calc(var(--fld-tab-w) + var(--fld-slant));
height: calc(var(--fld-tab-h) + 1px);
background: var(--c);
border-radius: var(--fld-r) var(--fld-r) 0 0;
clip-path: polygon(
0 0,
calc(var(--fld-tab-w) / (var(--fld-tab-w) + var(--fld-slant)) * 100%) 0,
100% 100%,
0 100%
);
}
}
.fld__body {
position: absolute;
z-index: 2;
left: clamp(1.15rem, 2.2vw, 2rem);
top: clamp(0.85rem, 1.8vw, 1.4rem);
right: 46%;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.fld__num {
font-family: var(--font-heading);
font-weight: var(--fw-bold);
font-size: 0.76rem;
letter-spacing: 0.14em;
opacity: 0.7;
}
.fld__name {
font-family: var(--font-heading);
font-weight: var(--fw-bold);
font-size: clamp(1.05rem, 0.72rem + 1.05vw, 1.65rem);
line-height: 1.1;
letter-spacing: var(--tracking-tight);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.fld__count {
margin-top: 0.15rem;
font-family: var(--font-heading);
font-weight: var(--fw-medium);
font-size: var(--fs-small);
opacity: 0.72;
}
.fld__docs { position: absolute; inset: 0; z-index: 0; display: block; }
.fld__doc {
position: absolute;
left: calc(53% + var(--d) * 14.5%);
bottom: 7%;
width: 21%;
overflow: hidden;
border-radius: 5px;
background: var(--color-surface);
box-shadow: 0 8px 16px -10px rgba(5, 64, 112, 0.55);
transform: translateY(0) rotate(0deg) scale(0.97);
transition: transform 0.55s var(--ease-out);
transition-delay: calc(var(--d) * 70ms);
}
.fld__doc img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fld-stage:hover .fld,
.fld-stage:focus-within .fld { --fld-op: 0.55; }
.fld-stage:hover .fld:hover,
.fld-stage:focus-within .fld:focus-visible { --fld-op: 1; z-index: 60; transform: translateY(-10px); }
.fld:hover .fld__doc,
.fld:focus-visible .fld__doc {
transform: translateY(-118%) rotate(calc((var(--d) - 1) * 6deg)) scale(1);
}
.js .fld-stage[data-reveal] { opacity: 1; transform: none; transition: none; }
.js .fld-stage[data-reveal] .fld { opacity: 0; }
.js .fld-stage[data-reveal].is-visible .fld {
opacity: var(--fld-op, 1);
animation: fldIn 0.75s var(--ease-out) var(--delay, 0ms) backwards;
}
@keyframes fldIn {
from { opacity: 0; transform: translateY(42px) scale(0.96); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 767px) {
.fld-stage { --fld-h: clamp(132px, 36vw, 160px); }
.fld { width: 100%; }
.fld:nth-child(n + 3) { margin-top: 0; }
.fld + .fld { margin-top: 0.5rem; }
.fld-stage:hover .fld { --fld-op: 1; }
.fld__docs { display: none; }
.fld__body { right: 34%; }
}
@media (prefers-reduced-motion: reduce) {
.fld, .fld__doc { transition: none; }
.js .fld-stage[data-reveal] .fld,
.js .fld-stage[data-reveal].is-visible .fld { opacity: var(--fld-op, 1); animation: none; }
}
.post-card__media { aspect-ratio: 16 / 9; background: var(--color-surface-3); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.post-card__meta { font-size: var(--fs-small); color: var(--color-muted); display: flex; gap: 0.6rem; flex-wrap: wrap; }
.post-card__body h3 { font-size: 1.15rem; }
.post-card__body h3 a { color: var(--color-ink); }
.post-card__body h3 a:hover { color: var(--color-primary); }
.post-card__excerpt { color: var(--color-ink-soft); font-size: 0.96rem; flex: 1; }
.cta-band {
border-radius: var(--radius-xl);
padding: clamp(2.5rem, 1.5rem + 4vw, 5rem);
text-align: center;
color: #fff;
background: var(--gradient-brand-135);
position: relative;
overflow: hidden;
}
.cta-band h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.cta-band p { color: rgba(255,255,255,0.9); max-width: 52ch; margin: var(--space-md) auto 0; font-size: var(--fs-lead); }
.cta-band .cluster { justify-content: center; margin-top: var(--space-2xl); }
.page-hero {
padding-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.page-hero__inner { max-width: 46rem; }
.page-hero h1 { margin-bottom: var(--space-md); }
.page-hero .lead { max-width: 52ch; }
.page-hero__grid { align-items: center; gap: clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 900px) { .page-hero__grid { grid-template-columns: 1.1fr 0.9fr; } }
.page-hero__media { will-change: transform; }
.page-hero__media img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.page-hero-wrap { position: relative; }
.page-hero--egg { position: relative; overflow: hidden; }
.page-hero--egg > .container { position: relative; z-index: 1; }
.egg-canvas {
position: absolute; inset: 0;
width: 100%; height: 100%;
z-index: 0;
pointer-events: none;
}
.egg-trigger {
position: absolute;
z-index: 2;
right: clamp(1.5rem, 5vw, 5.5rem);
top: calc(clamp(2.5rem, 2rem + 3vw, 4.5rem) + 1.72rem);
width: 68px; height: 68px;
display: none;
place-items: center;
padding: 2px;
border: 0; background: none;
cursor: pointer;
opacity: 0.5;
transform: translateY(-50%);
transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.egg-trigger svg { width: 100%; height: 100%; overflow: visible; }
.egg-sphere__halo { fill: none; stroke: var(--color-primary); stroke-width: 0.6; opacity: 0.16; }
.egg-sphere__links line { stroke: var(--color-primary); stroke-width: 0.5; }
.egg-sphere__links { transition: opacity var(--dur-base) var(--ease-out); }
.egg-sphere__node {
fill: var(--color-primary);
transform-box: fill-box;
transform-origin: center;
transition: transform 0.45s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.35s var(--ease-out);
}
.egg-sphere__node.is-cyan { fill: var(--color-cyan); }
.egg-sphere__node.is-deep { fill: var(--color-deep-blue); }
.egg-sphere__spin {
transform-origin: 20px 20px;
animation: eggSphereSpin 26s linear infinite;
}
.egg-trigger:hover, .egg-trigger:focus-visible { opacity: 1; transform: translateY(-50%) translateY(-3px) scale(1.06); }
.egg-trigger:hover .egg-sphere__node,
.egg-trigger:focus-visible .egg-sphere__node {
transform: translate(calc(var(--dx) * 1.6px), calc(var(--dy) * 1.6px));
}
.egg-trigger:hover .egg-sphere__links,
.egg-trigger:focus-visible .egg-sphere__links { opacity: 0.55; }
.egg-trigger:hover .egg-sphere__spin,
.egg-trigger:focus-visible .egg-sphere__spin { animation-duration: 9s; }
@keyframes eggSphereSpin { to { transform: rotate(360deg); } }
.egg-trigger.is-bursting .egg-sphere__node {
transform: translate(calc(var(--dx) * 13px), calc(var(--dy) * 13px)) scale(0.55);
opacity: 0;
transition: transform 0.28s cubic-bezier(0.3, 0, 0.7, 0.2), opacity 0.28s ease-out;
}
.egg-trigger.is-bursting .egg-sphere__links { opacity: 0; transition-duration: 0.16s; }
.egg-trigger.is-bursting .egg-sphere__halo { opacity: 0; }
.egg-trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 6px; border-radius: var(--radius-sm); }
.egg-trigger:active { transform: translateY(-50%) scale(0.94); }
.egg-trigger.is-bursting { animation: eggRecoil 0.5s var(--ease-out); }
@keyframes eggRecoil {
0% { transform: translateY(-50%) scale(1); }
22% { transform: translateY(-50%) scale(1.16); }
100% { transform: translateY(-50%) scale(1); }
}
.egg-trigger.is-entering {
animation: eggIn 1.15s cubic-bezier(0.22, 0.85, 0.28, 1) 0.35s backwards;
}
@keyframes eggIn {
0%   { transform: translate(var(--egg-in-x, 0px), calc(-50% + var(--egg-in-y, 60vh))) scale(0.7) rotate(-12deg); opacity: 0; }
12%  { opacity: 1; }
66%  { transform: translate(0, calc(-50% - 15px)) scale(1.09) rotate(3deg); opacity: 1; }
84%  { transform: translate(0, calc(-50% + 4px)) scale(0.98) rotate(-1deg); }
100% { transform: translate(0, -50%) scale(1) rotate(0); opacity: 1; }
}
.egg-msg {
position: absolute;
z-index: 2;
left: 50%; bottom: clamp(0.75rem, 2vw, 1.5rem);
transform: translateX(-50%) translateY(6px);
margin: 0;
padding: 0.45rem 0.9rem;
border-radius: var(--radius-pill);
background: var(--color-primary);
color: #fff;
font-family: var(--font-heading);
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.egg-msg.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 900px) { .egg-trigger { display: grid; } }
@media (prefers-reduced-motion: reduce) { .egg-trigger, .egg-canvas, .egg-msg { display: none; } }
html:not(.js) .egg-trigger, html:not(.js) .egg-msg { display: none; }
.page-hero > .container,
.article-hero > .container { position: relative; }
.rev-egg {
position: absolute;
right: 0;
top: 1.72rem;
bottom: auto;
transform: translateY(-50%);
z-index: 4;
}
html:not(.js) .rev-egg { display: none; }
.rev-egg__trigger {
display: inline-grid;
place-items: center;
width: clamp(38px, 1.9rem + 1.2vw, 50px);
height: clamp(38px, 1.9rem + 1.2vw, 50px);
padding: 0;
border: 0;
background: none;
cursor: pointer;
border-radius: 50%;
-webkit-tap-highlight-color: transparent;
animation: revEggIn 0.7s var(--ease-out) 0.45s backwards;
}
.rev-egg__badge {
position: relative;
display: grid;
place-items: center;
width: 100%;
height: 100%;
background: var(--color-surface, #fff);
border: 1.5px solid rgba(8, 114, 187, 0.28);
border-radius: 50%;
box-shadow: var(--shadow-sm);
transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
overflow: visible;
}
@supports (border-color: color-mix(in srgb, red, blue)) {
.rev-egg__badge { border-color: color-mix(in srgb, var(--color-primary) 32%, transparent); }
}
.rev-egg__g { display: block; width: clamp(15px, 1.4vw, 19px); height: auto; }
.rev-egg__orbit {
position: absolute;
inset: -9px;
pointer-events: none;
animation: revEggOrbit 7s linear infinite;
}
.rev-egg__badge-star {
position: absolute;
top: -0.66em;
left: 50%;
transform: translateX(-50%);
font-size: 0.8rem;
line-height: 1;
color: #fbbc04;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.95), 0 1px 2px rgba(8, 114, 187, 0.28);
}
@keyframes revEggOrbit { to { transform: rotate(360deg); } }
.rev-egg__trigger:hover .rev-egg__badge,
.rev-egg__trigger:focus-visible .rev-egg__badge {
transform: translateY(-2px) scale(1.08);
box-shadow: 0 6px 18px rgba(8, 114, 187, 0.28), var(--shadow-sm);
}
.rev-egg__trigger:active .rev-egg__badge { transform: scale(0.95); }
.rev-egg__trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
@keyframes revEggIn {
0%   { opacity: 0; transform: translateY(-12px) scale(0.7); }
60%  { opacity: 1; }
100% { opacity: 1; transform: none; }
}
.rev-egg__card {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
width: 260px;
max-width: min(78vw, 320px);
padding: var(--space-md);
background: var(--color-surface, #fff);
border: 1px solid rgba(8, 114, 187, 0.14);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
color: var(--color-ink);
text-align: left;
z-index: 5;
opacity: 0;
visibility: hidden;
transform: translateY(-6px) scale(0.97);
transform-origin: top right;
transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s linear 0.25s;
}
.rev-egg.is-open .rev-egg__card {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.rev-egg__card-head { display: flex; align-items: baseline; gap: 0.4rem; }
.rev-egg__card-head .rev-egg__g { align-self: center; }
.rev-egg__score { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 1.6rem; color: var(--color-ink); line-height: 1; }
.rev-egg__out { font-size: 0.9rem; color: var(--color-ink-soft); font-weight: 600; }
.rev-egg__stars { margin-top: 0.35rem; letter-spacing: 0.1em; font-size: 1.05rem; }
.rev-egg__star { color: rgba(11, 31, 51, 0.18); }
.rev-egg__star.is-full { color: #fbbc04; }
.rev-egg__star.is-half { position: relative; color: rgba(11, 31, 51, 0.18); }
.rev-egg__star.is-half::before { content: "★"; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: #fbbc04; }
.rev-egg__count { margin: 0.55rem 0 0; font-size: var(--fs-small); color: var(--color-ink-soft); }
.rev-egg__cert {
margin-top: 0.7rem; padding-top: 0.6rem;
border-top: 1px solid rgba(8, 114, 187, 0.12);
display: flex; align-items: center; gap: 0.55rem;
}
.rev-egg__cert-text { font-size: 0.72rem; color: var(--color-ink-soft); line-height: 1.3; }
.rev-egg__cert-logo { height: 26px; width: auto; max-width: 116px; object-fit: contain; flex-shrink: 0; }
@media (max-width: 1023px) {
.rev-egg { right: var(--gutter); }
}
@media (max-width: 600px) {
.rev-egg__card { width: min(84vw, 280px); }
}
@media (prefers-reduced-motion: reduce) {
.rev-egg__trigger { animation: none; }
.rev-egg__orbit { animation: none; }
.rev-egg__card { transition: opacity 0.001s linear, visibility 0s; }
.rev-egg__trigger:hover .rev-egg__badge,
.rev-egg__trigger:focus-visible .rev-egg__badge { transform: none; }
}
.cardfx-grid { perspective: 1000px; }
@media (min-width: 769px) and (max-width: 1023px) {
.grid--3.cardfx-grid { grid-template-columns: repeat(2, 1fr); }
}
.cardfx { position: relative; overflow: hidden; transform-style: preserve-3d; }
.cardfx__glow {
position: absolute;
inset: 0;
z-index: 0;
opacity: 0;
pointer-events: none;
background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
rgba(8, 114, 187, 0.16), rgba(74, 190, 221, 0.07) 45%, transparent 72%);
transition: opacity 0.4s var(--ease-out);
}
.cardfx > *:not(.cardfx__glow) { position: relative; z-index: 1; }
.cardfx [data-fx] {
transition: transform 0.55s var(--ease-out);
will-change: transform;
}
.cardfx.is-fx { will-change: transform; }
.cardfx.is-fx .cardfx__glow { opacity: 1; }
.cardfx.is-fx,
.cardfx.is-fx [data-fx] {
transition: transform 0.12s linear;
}
.cardfx-grid.is-armed .cardfx {
transform: translate3d(var(--fx-dx, 0px), var(--fx-dy, 18px), var(--fx-tz, 0px))
rotateY(var(--fx-ry, 0deg)) rotateX(var(--fx-rx, 7deg)) rotateZ(var(--fx-rz, 0deg))
scale(var(--fx-scale, 0.82));
opacity: 0.25;
z-index: var(--fx-z, 1);
transition: transform 0.95s cubic-bezier(0.22, 0.72, 0.24, 1) var(--fx-delay, 0ms),
opacity 0.5s var(--ease-out) var(--fx-delay, 0ms);
will-change: transform, opacity;
}
.cardfx-grid.is-armed.is-open .cardfx {
transform: none;
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.cardfx__glow { display: none; }
.cardfx [data-fx] { transition: none; transform: none !important; }
}
.card.pillar,
.contact-card.pillar {
background: linear-gradient(158deg, var(--color-surface-3), var(--color-surface) 58%);
--pillar-r: var(--radius-md);
}
.contact-card.pillar { --pillar-r: var(--radius-lg); }
.pillar::before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 46px;
height: 3px;
border-radius: 0 0 3px 0;
background: var(--gradient-brand);
}
.pillar::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
z-index: 0;
width: 118px;
height: 86px;
pointer-events: none;
opacity: 0.16;
background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1.2px);
background-size: 13px 13px;
-webkit-mask-image: linear-gradient(302deg, #000 10%, transparent 66%);
mask-image: linear-gradient(302deg, #000 10%, transparent 66%);
}
.pillar > .pillar__num {
position: absolute;
top: clamp(1.2rem, 0.95rem + 0.8vw, 1.85rem);
right: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
font-family: var(--font-heading);
font-weight: var(--fw-extrabold);
font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.35rem);
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: rgba(8, 114, 187, 0.16);
}
.pillar .card__icon {
background: var(--color-surface-3);
box-shadow: inset 0 0 0 1px rgba(8, 114, 187, 0.16);
}
.pillar .trust-card__icon,
.pillar .contact-card__ic { box-shadow: inset 0 0 0 1px rgba(8, 114, 187, 0.16); }
.pillar .card__icon svg,
.trust-card__icon svg { fill: none; }
.pillars h3 { letter-spacing: -0.015em; }
.contact-card.pillar > .pillar__num {
top: 0.7rem;
right: 0.85rem;
font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem);
}
.contact-card.pillar::before { width: 36px; }
.contact-card.pillar::after { width: 88px; height: 64px; }
.pillar-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pillar-defs stop:first-child { stop-color: var(--color-primary-strong); }
.pillar-defs stop:last-child { stop-color: var(--color-cyan); }
.pillar > .pillar__trace {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
}
.pillar__trace rect {
x: 1px;
y: 1px;
width: calc(100% - 2px);
height: calc(100% - 2px);
rx: calc(var(--pillar-r, var(--radius-md)) - 2px);
fill: none;
stroke: url(#pillarTrace);
stroke-width: 2;
stroke-dasharray: 100;
stroke-dashoffset: 100;
transition: stroke-dashoffset 0.9s var(--ease-out);
}
.pillar:hover > .pillar__trace rect { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
.pillar__trace rect { transition: none; }
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
.card.pillar,
.contact-card.pillar {
background: linear-gradient(158deg,
color-mix(in srgb, var(--color-surface-3) 66%, var(--color-surface)),
var(--color-surface) 58%);
}
.pillar > .pillar__num { color: color-mix(in srgb, var(--color-primary) 17%, transparent); }
.pillar .card__icon {
background: linear-gradient(150deg,
color-mix(in srgb, var(--color-primary) 13%, var(--color-surface)),
color-mix(in srgb, var(--color-cyan) 12%, var(--color-surface)));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 17%, transparent);
}
}
[data-parallax] { transition: transform var(--dur-fast) linear; will-change: transform; }
.agency-photo img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.agency-bg {
position: relative;
isolation: isolate;
overflow: hidden;
--agency-par: 64px;
}
.agency-bg__media {
position: absolute;
left: 0;
right: 0;
top: calc(var(--agency-par) * -1);
bottom: calc(var(--agency-par) * -1);
z-index: 0;
background-image: var(--agency-bg);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
pointer-events: none;
}
@media (max-width: 640px) {
.agency-bg__media { background-image: var(--agency-bg-mobile); }
}
.agency-intro {
max-width: 60rem;
margin-inline: auto;
text-align: center;
}
.agency-intro p {
font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
line-height: var(--lh-body);
color: var(--color-ink-soft);
max-width: 60ch;
margin-inline: auto;
}
.agency-intro p + p { margin-top: var(--space-md); }
.agency-bg__veil {
position: absolute;
inset: 0;
z-index: 1;
background: var(--color-surface-2);
opacity: 0.84;
pointer-events: none;
}
.agency-bg > .container { position: relative; z-index: 2; }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
.agency-bg__veil {
opacity: 1;
background: linear-gradient(180deg,
color-mix(in srgb, var(--color-surface-2) 86%, transparent),
color-mix(in srgb, var(--color-surface-2) 76%, transparent));
}
}
.agency-social {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-md);
max-width: 900px;
margin-inline: auto;
}
.agency-social__card {
display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
padding: var(--space-lg) var(--space-md);
background: var(--color-surface);
border: var(--border-soft);
border-radius: var(--radius-lg);
color: var(--color-ink);
text-align: center;
transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.agency-social__card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary);
}
.agency-social__icon {
width: 54px; height: 54px; display: grid; place-items: center;
border-radius: var(--radius-pill);
background: var(--color-surface-3);
color: var(--color-primary);
transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.agency-social__card:hover .agency-social__icon { background: var(--color-primary); color: #fff; }
.agency-social__icon svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.agency-social__name { font-family: var(--font-heading); font-weight: var(--fw-semibold); }
.social-stage { position: relative; overflow: hidden; isolation: isolate; }
.social-stage > .container { position: relative; z-index: 1; }
.social-stage__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.social-stage__video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.6s var(--ease-out);
}
.social-stage__video.is-on { opacity: 1; }
.social-stage__veil {
position: absolute; inset: 0;
background: var(--color-surface-2);
opacity: 0;
transition: opacity 0.6s var(--ease-out);
}
.social-stage__veil::after {
content: "";
position: absolute; inset: 0;
background: radial-gradient(120% 85% at 50% 0%, rgba(255, 255, 255, 0) 40%, rgba(5, 64, 112, 0.12) 100%);
}
.social-stage.is-playing .social-stage__veil { opacity: 0.74; }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
.social-stage__veil {
background: linear-gradient(180deg,
color-mix(in srgb, var(--color-surface-2) 86%, transparent) 0%,
color-mix(in srgb, var(--color-surface-2) 76%, transparent) 45%,
color-mix(in srgb, var(--color-surface-2) 55%, transparent) 100%);
}
.social-stage.is-playing .social-stage__veil { opacity: 1; }
}
.agency-social__card.is-active {
transform: translateY(-6px);
border-color: var(--color-primary);
box-shadow: var(--shadow-lg), 0 0 0 2px rgba(8, 114, 187, 0.16);
}
.agency-social__card.is-active .agency-social__icon { background: var(--color-primary); color: #fff; }
@media (prefers-reduced-motion: reduce) {
.social-stage__video, .social-stage__veil { display: none; }
}
.video-frame {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
background: var(--color-surface-3);
}
.video-frame video {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.conocenos-split .section-title { max-width: none; }
@media (min-width: 900px) {
.conocenos-split {
grid-template-columns: minmax(0, 1fr) 55%;
gap: clamp(1.75rem, 1rem + 2.2vw, 3.25rem);
}
}
.conocenos-text .lead { max-width: 46ch; }
.conocenos-cta { margin-top: var(--space-lg); }
.conocenos-cta svg {
width: 1.05rem;
height: 1.05rem;
fill: none;
transition: transform var(--dur-base) var(--ease-out);
}
.conocenos-cta:hover svg { transform: translateX(4px); }
.conocenos-media { position: relative; }
.conocenos-media > .video-frame { position: relative; z-index: 1; }
.conocenos-media::before,
.conocenos-media::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.conocenos-media::before {
left: -1rem;
bottom: -1rem;
width: clamp(92px, 11vw, 148px);
height: clamp(92px, 11vw, 148px);
background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1.2px);
background-size: 13px 13px;
opacity: 0.3;
-webkit-mask-image: linear-gradient(45deg, #000 28%, transparent 76%);
mask-image: linear-gradient(45deg, #000 28%, transparent 76%);
}
.conocenos-media::after {
top: -0.9rem;
right: -0.9rem;
width: 42%;
height: 46%;
border-radius: var(--radius-lg);
border: 1px solid rgba(8, 114, 187, 0.22);
}
@media (max-width: 899px) {
.conocenos-media::before { left: -0.5rem; bottom: -0.5rem; }
.conocenos-media::after { top: -0.5rem; right: -0.5rem; }
}
.conocenos-split .video-frame {
box-shadow: 0 22px 48px -28px rgba(5, 64, 112, 0.45);
border: 1px solid rgba(8, 114, 187, 0.14);
}
.conocenos-tags {
position: absolute;
z-index: 2;
left: clamp(0.85rem, 2vw, 1.35rem);
bottom: clamp(0.85rem, 2vw, 1.35rem);
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.conocenos-tags li {
font-family: var(--font-heading);
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
color: #fff;
padding: 0.4rem 0.85rem;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.3);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.js .conocenos-text[data-reveal],
.js .conocenos-media[data-reveal] { opacity: 1; transform: none; transition: none; }
.js .conocenos-text[data-reveal] > * {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.js .conocenos-text[data-reveal].is-visible > * { opacity: 1; transform: none; }
.js .conocenos-text[data-reveal] > :nth-child(2) { transition-delay: 90ms; }
.js .conocenos-text[data-reveal] > :nth-child(3) { transition-delay: 180ms; }
.js .conocenos-text[data-reveal] > :nth-child(4) { transition-delay: 270ms; }
.js .conocenos-media[data-reveal] > .video-frame {
opacity: 0;
clip-path: inset(10% 6% 10% 6% round var(--radius-lg));
transition: clip-path 1s cubic-bezier(0.22, 0.9, 0.28, 1), opacity 0.7s var(--ease-out);
}
.js .conocenos-media[data-reveal].is-visible > .video-frame {
opacity: 1;
clip-path: inset(0 0 0 0 round var(--radius-lg));
}
.js .conocenos-media[data-reveal] > .video-frame img {
transform: scale(1.06);
transition: transform 1.2s cubic-bezier(0.22, 0.9, 0.28, 1);
}
.js .conocenos-media[data-reveal].is-visible > .video-frame img { transform: none; }
@media (prefers-reduced-motion: reduce) {
.js .conocenos-text[data-reveal] > *,
.js .conocenos-media[data-reveal] > .video-frame,
.js .conocenos-media[data-reveal] > .video-frame img {
opacity: 1;
transform: none;
clip-path: none;
transition: none;
}
}
.video-frame--photo img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.video-frame--photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(5, 64, 112, 0.28), rgba(5, 64, 112, 0.52));
pointer-events: none;
}
.quote-band {
position: relative;
overflow: hidden;
display: grid;
place-items: center;
min-height: clamp(360px, 60vh, 560px);
padding-block: clamp(4rem, 8vw, 7rem);
isolation: isolate;
}
.quote-band__media { position: absolute; inset: 0; z-index: -2; }
.quote-band__media video {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.quote-band__scrim {
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(180deg, rgba(5, 64, 112, 0.82), rgba(3, 30, 54, 0.9)),
radial-gradient(120% 120% at 50% 50%, rgba(3, 30, 54, 0.35) 40%, rgba(3, 30, 54, 0.78) 100%);
}
.quote-band .container { position: relative; z-index: 1; text-align: center; }
.quote-band__text { max-width: none; margin-inline: auto; border: 0; padding: 0; }
.quote-band__text p {
font-family: var(--font-heading);
font-weight: var(--fw-bold);
font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem);
line-height: 1.2;
color: #fff;
text-wrap: balance;
margin: 0;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.js .quote-band__text[data-reveal] { opacity: 1; transform: none; }
.quote-reveal .qw { display: inline-block; }
.js .quote-reveal .qw {
opacity: 0;
transform: perspective(700px) rotateX(-38deg) translateY(0.5em);
filter: blur(7px);
transition:
opacity 0.5s ease,
transform 0.62s cubic-bezier(0.22, 1.42, 0.36, 1),
filter 0.5s ease;
transition-delay: calc(var(--wi) * 45ms);
will-change: transform, filter, opacity;
}
.js .quote-band__text.is-visible .qw {
opacity: 1;
transform: none;
filter: blur(0);
}
@media (max-width: 600px) {
.js .quote-reveal .qw {
transform: perspective(480px) rotateX(-22deg) translateY(0.34em);
filter: blur(5px);
transition:
opacity 0.4s ease,
transform 0.5s cubic-bezier(0.22, 1.42, 0.36, 1),
filter 0.4s ease;
transition-delay: calc(var(--wi) * 34ms);
}
}
@media (prefers-reduced-motion: reduce) {
.js .quote-reveal .qw { opacity: 1; transform: none; filter: none; transition: none; }
}
.ig-scroll { position: relative; }
.ig-scroll__grid { display: grid; gap: var(--space-2xl); align-items: center; }
.ig-phases__stage { position: relative; min-height: clamp(320px, 34vh, 360px); }
.ig-phase {
position: absolute; inset: 0;
opacity: 0; transform: translateY(18px);
transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
pointer-events: none;
}
.ig-phase.is-active { opacity: 1; transform: none; pointer-events: auto; }
.ig-phase__title { font-size: var(--fs-h2); margin-bottom: var(--space-md); }
.ig-phase__text { font-size: 1.1rem; color: var(--color-ink-soft); max-width: 46ch; }
.ig-phases__dots { display: flex; gap: 0.5rem; margin-top: var(--space-xl); }
.ig-dot { width: 26px; height: 4px; border-radius: 4px; background: var(--color-line); transition: background 0.4s, width 0.4s; }
.ig-dot.is-active { background: var(--color-primary); width: 40px; }
.ig-phone-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.ig-phone {
--ig-w: 320px;
position: relative;
width: min(var(--ig-w), 82vw);
aspect-ratio: 320 / 660;
background: #0c0d12;
border-radius: 44px;
padding: 12px;
box-shadow: 0 30px 60px -20px rgba(5, 64, 112, 0.45), 0 0 0 2px rgba(255, 255, 255, 0.06) inset;
}
.ig-phone__cam {
position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
width: 42%; height: 22px; background: #0c0d12; border-radius: 0 0 14px 14px; z-index: 3;
}
.ig-phone__screen {
height: 100%;
min-height: 0;
display: flex; flex-direction: column;
background: var(--color-surface);
border-radius: 33px;
overflow: hidden;
}
.ig-phone__topbar {
flex: 0 0 auto;
display: flex; align-items: center; gap: 0.55rem;
padding: 0.7rem 0.9rem;
border-bottom: 1px solid var(--color-line);
}
.ig-ava { border-radius: 50%; background: var(--color-deep-blue); object-fit: cover; padding: 3px; }
.ig-ava--sm { padding: 2px; }
.ig-user { font-weight: var(--fw-bold); font-size: 0.85rem; color: var(--color-ink); }
.ig-more { margin-left: auto; color: var(--color-ink-soft); display: inline-flex; }
.ig-more svg { width: 20px; height: 20px; }
.ig-phone__feed { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; }
.ig-feed-inner { will-change: transform; }
.ig-post { border-bottom: 1px solid var(--color-line); }
.ig-post__head { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem; }
.ig-post__head .ig-user { font-size: 0.8rem; }
.ig-post__media { aspect-ratio: 1 / 1; background: var(--color-surface-2); }
.ig-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-post__actions { display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 0.75rem 0.2rem; color: var(--color-ink); }
.ig-post__actions svg { width: 22px; height: 22px; }
.ig-post__actions .ig-post__save { margin-left: auto; }
.ig-post__caption { font-size: 0.8rem; line-height: 1.4; color: var(--color-ink); padding: 0.2rem 0.75rem 0.85rem; }
.ig-post__caption .ig-user { margin-right: 0.35rem; }
.ig-phone__hint { font-size: 0.85rem; color: var(--color-ink-soft); }
@media (min-width: 1024px) {
.ig-scroll { min-height: 300vh; }
.ig-scroll__sticky {
position: sticky;
top: var(--header-h);
height: calc(100svh - var(--header-h));
display: flex; align-items: center;
overflow: hidden;
}
.ig-scroll__grid { grid-template-columns: 1fr minmax(300px, 360px); gap: clamp(2.5rem, 4vw, 5.5rem); }
.ig-phone {
width: auto;
height: min(660px, calc(100svh - var(--header-h) - 3rem));
}
.ig-phone__hint { display: none; }
}
@media (max-width: 1023px) {
.ig-scroll__sticky { position: static; }
.ig-phone {
width: min(320px, 82vw);
height: min(calc(min(320px, 82vw) * 660 / 320), 74svh);
}
.ig-phone__feed {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ig-phone__feed::-webkit-scrollbar { width: 0; height: 0; }
.ig-feed-inner { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
.ig-phase { transition: opacity 0.25s linear; transform: none; }
.ig-phase.is-active { transform: none; }
}
.marquee-strip {
overflow: hidden;
white-space: nowrap;
border-block: 1px solid var(--color-line);
background: var(--color-surface-2);
padding-block: 0.9rem;
}
.marquee-strip--services { background: transparent; border-top: 0; }
.marquee-track {
display: flex;
width: max-content;
align-items: center;
will-change: transform;
animation: marquee 180s linear infinite;
}
.marquee-track--rev { animation-duration: 152s; }
.marquee-copy { display: flex; align-items: center; gap: 1.5rem; margin-right: 1.5rem; flex: 0 0 auto; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
font-family: var(--font-heading);
font-weight: var(--fw-bold);
font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.3rem);
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--color-ink);
}
.marquee-strip--services .marquee-item { color: var(--color-primary); }
.marquee-dot { color: var(--color-cyan); font-size: 0.7em; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; }
}
.decision-band {
background: var(--gradient-deep);
color: #fff;
text-align: center;
padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}
.decision-band__line {
font-family: var(--font-heading);
font-weight: var(--fw-extrabold);
line-height: 1.12;
text-transform: uppercase;
text-wrap: balance;
}
.decision-band__line--0 { font-size: clamp(1.8rem, 1.2rem + 3.4vw, 3.6rem); color: #fff; }
.decision-band__line--1 { font-size: clamp(1.05rem, 0.9rem + 1.4vw, 1.7rem); color: var(--color-cyan); margin-top: 0.5rem; }
.decision-band--sm .decision-band__line--0 { font-size: clamp(1.25rem, 0.95rem + 1.5vw, 1.95rem); }
.decision-band--sm .decision-band__line { max-width: 52ch; margin-inline: auto; }
.linkhub__inner { text-align: center; max-width: 1120px; margin-inline: auto; }
.linkhub__title {
font-family: var(--font-heading);
font-weight: var(--fw-bold);
font-size: clamp(1.7rem, 1.05rem + 2.6vw, 2.9rem);
line-height: 1.12;
color: var(--color-ink);
margin-top: 0.6rem;
text-wrap: balance;
}
.linkhub__main {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
margin-top: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
}
.linkhub__pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 8.5rem;
padding: 0.72rem 2rem;
font-family: var(--font-heading);
font-weight: var(--fw-bold);
font-size: 1.15rem;
letter-spacing: 0.02em;
color: #fff;
background: var(--color-primary);
border: 2px solid var(--color-primary);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-sm);
text-decoration: none;
transition: transform 0.3s var(--ease-out), background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.linkhub__pill:hover {
transform: translateY(-3px);
background: #3A97D7;
border-color: #3A97D7;
color: #fff;
box-shadow: var(--shadow-md);
}
.linkhub__groups {
margin-top: clamp(2rem, 1.5rem + 1.8vw, 3.25rem);
display: flex;
flex-direction: column;
gap: clamp(1.25rem, 1rem + 1.1vw, 2rem);
}
.linkhub__group-label {
display: block;
font-family: var(--font-heading);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.82rem;
color: var(--color-ink);
margin-bottom: 0.7rem;
}
.linkhub__links {
color: var(--color-ink-soft);
font-size: 0.95rem;
line-height: 1.7;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
row-gap: 0.35rem;
}
.linkhub__link {
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.linkhub__link:hover { text-decoration: underline; }
.linkhub__sep { color: var(--color-cyan); margin-inline: 0.55rem; }
.newsletter__box {
background: var(--gradient-brand-135);
color: #fff;
border-radius: var(--radius-xl);
padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
display: grid;
gap: var(--space-xl);
align-items: center;
}
@media (min-width: 820px) { .newsletter__box { grid-template-columns: 1.1fr 1fr; } }
.newsletter__text h2 { color: #fff; }
.newsletter__text p { color: rgba(255, 255, 255, 0.9); margin-top: 0.5rem; }
.newsletter__form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.newsletter__form .form-control { flex: 1 1 220px; }
.newsletter__msg { grid-column: 1 / -1; font-weight: var(--fw-semibold); }
.newsletter__msg--err { color: #ffe1dc; }
.svc-cards {
display: grid;
gap: var(--space-xl);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
@media (min-width: 700px) {
.page-rsc .svc-cards { grid-template-columns: repeat(2, 1fr); }
}
.svc-card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.6rem;
background: var(--color-surface);
border: var(--border-soft);
border-radius: var(--radius-lg);
padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.svc-card { overflow: hidden; }
.svc-card::after {
content: "";
position: absolute; inset: 0 0 auto 0; height: 4px;
background: var(--gradient-brand);
transform: scaleX(0); transform-origin: left;
transition: transform var(--dur-base) var(--ease-out);
}
.svc-card:hover { transform: translateY(-8px) scale(1.015); box-shadow: var(--shadow-lg); border-color: var(--color-primary); }
.service-web .exp-section .svc-card:hover { transform: none; }
.svc-card:hover::after { transform: scaleX(1); }
.svc-card__n { transition: color var(--dur-base) var(--ease-out); }
.svc-card:hover .svc-card__n { color: var(--color-primary); }
.svc-card__n {
font-family: var(--font-heading);
font-weight: var(--fw-extrabold);
font-size: 1.6rem;
line-height: 1;
color: var(--color-cyan);
-webkit-text-stroke: 0;
}
.svc-card__title {
font-size: var(--fs-h4);
text-transform: uppercase;
letter-spacing: var(--tracking-tight);
}
.svc-card__text { color: var(--color-ink-soft); font-size: 0.98rem; }
.svc-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: var(--space-sm); }
.svc-tag {
font-family: var(--font-heading);
font-size: 0.72rem;
font-weight: var(--fw-semibold);
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 0.3rem 0.65rem;
border-radius: var(--radius-pill);
background: var(--color-surface-3);
color: var(--color-primary);
}
.svc-card__link { margin-top: var(--space-sm); }
.dk {
--dk-card-w: calc(100% - 104px);
--dk-card-h: 440px;
--dk-media-h: 190px;
--dk-step: 64px;
--dk-lift: -12px;
--dk-scale: 0.045;
--dk-vis: 2.8;
--dk-fade: 1;
--dk-exit: 480px;
--dk-drag: 260px;
position: relative;
}
.dk-stage {
display: grid;
gap: var(--space-xl);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
html:not(.js) .dk-nav { display: none; }
.dk-card__media {
--dk-pad: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
margin: calc(-1 * var(--dk-pad)) calc(-1 * var(--dk-pad)) 0.35rem;
background: var(--color-surface-3);
border-bottom: var(--border-soft);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.dk-card__media img {
width: 100%;
height: 100%;
object-fit: contain;
padding: clamp(0.75rem, 2vw, 1.4rem);
display: block;
}
.dk-card__body {
display: flex;
flex-direction: column;
gap: 0.6rem;
min-width: 0;
}
.js .dk {
overflow: hidden;
padding: 18px 14px;
margin: -18px -14px;
}
.js .dk-stage {
display: block;
position: relative;
height: var(--dk-card-h);
cursor: grab;
touch-action: pan-y;
-webkit-user-select: none;
user-select: none;
}
.js .dk-stage.is-dragging { cursor: grabbing; }
.js .dk-stage:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 8px; border-radius: var(--radius-lg); }
.js .dk-card {
position: absolute;
top: 0;
left: 0;
width: var(--dk-card-w);
height: var(--dk-card-h);
margin: 0;
transform-origin: center center;
will-change: transform, opacity;
box-shadow: var(--shadow-md);
transform: translate3d(calc(var(--i) * var(--dk-step)), calc(var(--i) * var(--dk-lift)), 0)
scale(calc(1 - var(--i) * var(--dk-scale)));
opacity: clamp(0, calc((var(--dk-vis) - var(--i)) / var(--dk-fade)), 1);
z-index: calc(100 - var(--i));
transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.js .dk-card:hover { box-shadow: var(--shadow-lg); }
.js .dk-card img { pointer-events: none; }
@media (min-width: 720px) {
.js .dk-card {
display: grid;
grid-template-columns: 0.9fr 1fr;
gap: 0;
padding: 0;
}
.js .dk-card .dk-card__media {
margin: 0;
height: auto;
border-bottom: none;
border-right: var(--border-soft);
}
.js .dk-card .dk-card__body {
padding: clamp(1.5rem, 1.1rem + 1.1vw, 2.5rem);
overflow: hidden;
}
}
@media (max-width: 719px) {
.js .dk-card .dk-card__media { flex: 0 1 auto; height: var(--dk-media-h); min-height: 110px; }
.js .dk-card .dk-card__body { flex: 1 1 auto; min-height: 0; }
.js .dk-card .svc-card__text { font-size: 0.9rem; }
}
.dk-nav {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-top: var(--space-lg);
}
.dk-nav__btn {
width: 42px; height: 42px;
display: grid; place-items: center;
border: var(--border-soft);
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-primary);
cursor: pointer;
transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.dk-nav__btn svg { width: 20px; height: 20px; }
.dk-nav__btn:hover:not(:disabled) { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.dk-nav__btn:disabled { opacity: 0.4; cursor: default; }
.dk-nav__count {
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
font-size: 0.85rem;
letter-spacing: 0.06em;
color: var(--color-ink-soft);
}
@media (max-width: 1023px) {
.dk {
--dk-card-w: calc(100% - 76px);
--dk-card-h: 520px;
--dk-step: 48px;
--dk-vis: 2.4;
--dk-exit: 400px;
--dk-drag: 220px;
}
}
@media (max-width: 719px) {
.dk {
--dk-card-w: calc(100% - 46px);
--dk-card-h: 620px;
--dk-media-h: 150px;
--dk-step: 34px;
--dk-lift: -10px;
--dk-scale: 0.03;
--dk-vis: 1.9;
--dk-fade: 1;
--dk-exit: 250px;
--dk-drag: 170px;
}
}
@media (prefers-reduced-motion: reduce) {
.js .dk { overflow: visible; padding: 0; margin: 0; }
.js .dk-stage {
display: grid;
height: auto;
cursor: auto;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.js .dk-card {
position: static;
width: auto;
height: auto;
transform: none;
opacity: 1;
box-shadow: none;
display: flex;
flex-direction: column;
padding: 0;
}
.js .dk-card .dk-card__media {
height: 200px;
border-right: none;
border-bottom: var(--border-soft);
}
.js .dk-card .dk-card__body { padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); flex: 1 1 auto; }
.dk-nav { display: none; }
}
.svc-cards--glow { grid-template-columns: 1fr; }
@media (min-width: 760px) {
.svc-cards--glow { grid-template-columns: repeat(2, 1fr); }
}
.svc-card--glow .svc-glow__spot,
.svc-card--glow .svc-glow__border {
position: absolute; inset: 0; z-index: 0;
border-radius: inherit;
opacity: 0;
transition: opacity var(--dur-base) var(--ease-out);
pointer-events: none;
}
.svc-card--glow .svc-glow__spot {
background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
rgba(74, 190, 221, 0.16), rgba(8, 114, 187, 0.08) 42%, transparent 72%);
}
.svc-card--glow .svc-glow__border {
padding: 1.5px;
background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%),
rgba(74, 190, 221, 0.7), rgba(8, 114, 187, 0.35) 45%, transparent 65%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.svc-card--glow:hover .svc-glow__spot,
.svc-card--glow:hover .svc-glow__border { opacity: 1; }
.svc-card--glow > .svc-card__n,
.svc-card--glow > .svc-card__title,
.svc-card--glow > .svc-card__text,
.svc-card--glow > .svc-card__tags,
.svc-card--glow > .svc-card__link { position: relative; z-index: 1; }
.js .svc-card--glow[data-reveal] {
transform: translateY(30px);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.js .svc-card--glow[data-reveal].is-visible {
transform: none;
}
@media (min-width: 760px) {
.svc-cards--reveal {
grid-template-rows: 1fr 1fr;
height: clamp(510px, 37.5vw, 620px);
transition: grid-template-columns 0.55s var(--ease-out),
grid-template-rows 0.55s var(--ease-out);
}
.svc-cards--reveal > .svc-card--reveal { height: 100%; min-width: 0; }
.svc-cards--reveal:has(> .svc-card--reveal:nth-child(1).is-open),
.svc-cards--reveal:has(> .svc-card--reveal:nth-child(3).is-open) {
grid-template-columns: 1.4fr 0.6fr;
}
.svc-cards--reveal:has(> .svc-card--reveal:nth-child(2).is-open),
.svc-cards--reveal:has(> .svc-card--reveal:nth-child(4).is-open) {
grid-template-columns: 0.6fr 1.4fr;
}
.svc-cards--reveal:has(> .svc-card--reveal:nth-child(1).is-open),
.svc-cards--reveal:has(> .svc-card--reveal:nth-child(2).is-open) {
grid-template-rows: 1.24fr 0.76fr;
}
.svc-cards--reveal:has(> .svc-card--reveal:nth-child(3).is-open),
.svc-cards--reveal:has(> .svc-card--reveal:nth-child(4).is-open) {
grid-template-rows: 0.76fr 1.24fr;
}
.svc-cards--reveal:has(> .is-open) > .svc-card--reveal:not(.is-open) .svc-card__tags {
opacity: 0;
transform: translateY(6px);
}
.svc-cards--reveal:has(> .is-open) > .svc-card--reveal:not(.is-open) .svc-card__title {
font-size: 1.02rem;
line-height: 1.28;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.svc-cards--reveal:has(> .is-open) > .svc-card--reveal:not(.is-open) .svc-card__n {
font-size: 1.15rem;
}
.svc-cards--reveal > .svc-card--reveal .svc-card__title,
.svc-cards--reveal > .svc-card--reveal .svc-card__n {
transition: font-size 0.5s var(--ease-out);
}
}
.svc-card--reveal { display: flex; flex-direction: column; overflow: hidden; }
.svc-card--reveal > .svc-card__n,
.svc-card--reveal > .svc-card__title { flex-shrink: 0; }
.svc-card--reveal > .svc-card__tags { flex-shrink: 1; min-height: 0; }
.svc-rv__art {
position: absolute;
right: clamp(1rem, 2vw, 1.6rem);
bottom: clamp(1rem, 2vw, 1.6rem);
z-index: 0;
width: clamp(88px, 9vw, 124px);
color: var(--color-primary);
opacity: 0.34;
transform-origin: bottom right;
transition: transform 0.55s var(--ease-out), opacity 0.45s var(--ease-out);
pointer-events: none;
}
.svc-rv__art svg { display: block; width: 100%; height: auto; fill: none; }
.svc-rv__art--img { opacity: 0.85; }
.svc-rv__art--img img { display: block; width: 100%; height: auto; }
.svc-rv__more {
position: absolute;
top: clamp(1rem, 2vw, 1.5rem);
right: clamp(1rem, 2vw, 1.5rem);
width: 1.7rem; height: 1.7rem;
border-radius: 50%;
border: 1.5px solid rgba(8, 114, 187, 0.35);
background: var(--color-surface);
color: var(--color-primary);
z-index: 2;
pointer-events: none;
transition: transform 0.5s var(--ease-out), background 0.3s var(--ease-out),
color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
@supports (color: color-mix(in srgb, red, blue)) {
.svc-rv__more { border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); }
}
.svc-rv__more::before,
.svc-rv__more::after {
content: ""; position: absolute; top: 50%; left: 50%;
background: currentColor; border-radius: 2px;
transform: translate(-50%, -50%);
}
.svc-rv__more::before { width: 0.8rem; height: 2px; }
.svc-rv__more::after  { width: 2px; height: 0.8rem; }
.svc-card--reveal.is-open .svc-rv__more {
transform: rotate(45deg);
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
@media (hover: hover) and (pointer: fine) {
.svc-card--reveal { cursor: pointer; }
.svc-card--reveal:not(.is-open):hover .svc-rv__more {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
transform: scale(1.08);
}
}
.svc-rv__body {
display: grid;
grid-template-rows: 0fr;
position: relative;
z-index: 1;
transition: grid-template-rows 0.55s var(--ease-out), margin-top 0.55s var(--ease-out);
}
.svc-rv__body > .svc-card__text {
overflow: hidden;
min-height: 0;
opacity: 0;
clip-path: inset(0 0 100% 0);
transform: translateY(8px);
transition: opacity 0.45s var(--ease-out) 0.1s, clip-path 0.55s var(--ease-out) 0.1s,
transform 0.5s var(--ease-out) 0.1s;
}
.svc-card--reveal.is-open .svc-rv__body { grid-template-rows: 1fr; margin-top: var(--space-sm); }
.svc-card--reveal.is-open .svc-rv__body > .svc-card__text {
opacity: 1;
clip-path: inset(0 0 0 0);
transform: none;
}
.svc-card--reveal.is-open .svc-rv__art { transform: scale(0.62) translate(14%, 14%); opacity: 0.16; }
.svc-card--reveal .svc-card__tags {
margin-top: auto;
transition: opacity 0.4s var(--ease-out), transform 0.45s var(--ease-out);
}
.js .svc-card--reveal[data-reveal] { --fx: -1; --fy: -1; --fr: -2.5deg; }
.js .svc-card--reveal[data-reveal]:nth-child(2) { --fx: 1; --fy: -1; --fr: 2.5deg; }
.js .svc-card--reveal[data-reveal]:nth-child(3) { --fx: -1; --fy: 1; --fr: 2.5deg; }
.js .svc-card--reveal[data-reveal]:nth-child(4) { --fx: 1; --fy: 1; --fr: -2.5deg; }
.js .svc-card--reveal[data-reveal] {
transform: none;
transition: none;
}
.js .svc-card--reveal[data-reveal].is-visible {
animation: svcRevealIn 0.95s cubic-bezier(0.22, 0.9, 0.28, 1) backwards;
}
@keyframes svcRevealIn {
from {
opacity: 0;
transform: translate(calc(var(--fx) * 12%), calc(var(--fy) * 16%)) rotate(var(--fr)) scale(0.96);
clip-path: inset(
calc(var(--fy) * -14% + 14%) calc(var(--fx) * 14% + 14%)
calc(var(--fy) * 14% + 14%) calc(var(--fx) * -14% + 14%) round var(--radius-lg));
filter: blur(5px);
}
to {
opacity: 1;
transform: translate(0, 0) rotate(0deg) scale(1);
clip-path: inset(0 0 0 0 round var(--radius-lg));
filter: blur(0);
}
}
@media (prefers-reduced-motion: reduce) {
.js .svc-card--reveal[data-reveal],
.js .svc-card--reveal[data-reveal].is-visible { opacity: 1; animation: none; filter: none; }
.svc-cards--reveal, .svc-rv__body, .svc-rv__art,
.svc-card--reveal .svc-card__tags { transition: none; }
}
.sga-lanes { display: flex; flex-direction: column; gap: clamp(3rem, 2rem + 5vw, 6.5rem); }
.sga-pair { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
.sga-figure {
margin: 0;
border-radius: var(--radius-lg);
border: var(--border-soft);
background: linear-gradient(135deg, var(--color-surface-3), var(--color-surface-2));
display: grid; place-items: center;
overflow: hidden;
aspect-ratio: 16 / 10;
}
.sga-figure svg { width: 74%; height: 74%; max-height: 260px; display: block; }
.sga-figure .ln { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sga-figure .ac { fill: none; stroke: var(--color-cyan); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sga-figure .fl { fill: var(--color-cyan); stroke: none; }
.sga-figure .fp { fill: var(--color-primary); stroke: none; }
.sga-figure .bg { fill: var(--color-surface); }
.sga-figure img { width: 100%; height: 100%; object-fit: contain; display: block; padding: clamp(1rem, 0.5rem + 2vw, 2.25rem); }
@media (min-width: 768px) {
.sga-section.is-sga { position: relative; padding-block: 0; height: calc((100svh - var(--header-h)) + var(--sga-steps, 3) * 80svh); }
.sga-section.is-sga .sga-stage {
position: sticky; top: var(--header-h);
height: calc(100svh - var(--header-h));
display: flex; align-items: center;
}
.sga-section.is-sga .sga-stage > .container { width: 100%; }
.sga-section.is-sga .section-head { margin-bottom: var(--space-xl); }
.sga-section.is-sga .sga-lanes { position: relative; display: block; height: clamp(340px, 54vh, 480px); overflow: hidden; }
.sga-section.is-sga .sga-pair { display: contents; }
.sga-section.is-sga [data-sga-cell] {
position: absolute; top: 0; height: 100%;
width: calc(50% - var(--space-xl) / 2);
margin: 0;
will-change: transform;
}
.sga-section.is-sga [data-sga-side="left"]  { left: 0;  transform: translateY(calc(var(--i, 0) * 115%)); }
.sga-section.is-sga [data-sga-side="right"] { right: 0; transform: translateY(calc(var(--i, 0) * -115%)); }
.sga-section.is-sga .sga-figure { aspect-ratio: auto; }
}
.svc-canvas {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.svc-canvas::-webkit-scrollbar { width: 0; height: 0; display: none; }
.svc-canvas.is-carousel { overflow: hidden; cursor: grab; touch-action: pan-y; }
.svc-canvas.is-carousel.is-dragging { cursor: grabbing; }
.svc-canvas__stage {
--svc-gap: clamp(1.5rem, 3vw, 3rem);
display: flex;
align-items: stretch;
gap: var(--svc-gap);
width: max-content;
padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
will-change: transform;
}
.svc-canvas__card {
flex: 0 0 auto;
width: max(230px, calc((100vw - 5 * var(--svc-gap)) / 4));
min-height: clamp(320px, 19vw, 370px);
animation: svc-float var(--float-dur, 5s) ease-in-out var(--float-delay, 0s) infinite;
will-change: transform;
}
.svc-canvas .svc-card__text + .svc-card__text { margin-top: 0.65rem; }
@keyframes svc-float {
0%, 100% { transform: translate3d(0, calc(var(--float-amp, 6px) * -1), 0); }
50%      { transform: translate3d(0, var(--float-amp, 6px), 0); }
}
.svc-canvas .svc-card {
height: 100%;
transition: transform 0.4s cubic-bezier(0.22, 0.8, 0.3, 1),
box-shadow var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
box-shadow: var(--shadow-md);
}
.svc-canvas .svc-card:hover {
transform: translate3d(0, -10px, 0) scale(1.03);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary);
}
.svc-canvas.is-dragging .svc-card { transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
.svc-canvas__card { animation: none; }
.svc-canvas .svc-card, .svc-canvas .svc-card:hover { transform: none; }
}
@media (max-width: 767px) {
.svc-canvas {
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
}
.svc-canvas__stage {
width: max-content;
gap: var(--gutter);
padding-inline: var(--gutter);
}
.svc-canvas__card {
width: calc(100vw - 2 * var(--gutter));
scroll-snap-align: center;
scroll-snap-stop: always;
}
}
.feature-band {
background: var(--gradient-deep);
color: #fff;
text-align: center;
padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}
.feature-band__inner { max-width: none; margin-inline: 0; }
.feature-band__title { color: #fff; font-size: clamp(1.6rem, 1.1rem + 2.6vw, 3rem); text-transform: uppercase; line-height: 1.15; }
.feature-band__sub { color: var(--color-cyan); font-size: var(--fs-h3); margin-top: var(--space-lg); text-transform: uppercase; }
.feature-band__text { color: var(--color-on-dark-soft); margin: var(--space-md) auto 0; max-width: 85ch; font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem); }
.svc-card__text strong,
.stk-card__body p strong,
.vst-card .card p strong,
.faq-item__body strong,
.svc-intro__p strong { color: var(--color-ink); font-weight: var(--fw-bold); }
.eshop-card__text strong,
.feature-band__text strong { color: #fff; font-weight: var(--fw-bold); }
.svc-section { }
.problem-grid, .benefit-grid, .who-grid { display: grid; gap: var(--space-md); }
@media (min-width: 700px) {
.problem-grid, .benefit-grid { grid-template-columns: repeat(2, 1fr); }
.who-grid { grid-template-columns: repeat(3, 1fr); }
}
.check-item, .cross-item {
display: flex; gap: 0.75rem; align-items: flex-start;
padding: var(--space-md);
background: var(--color-surface-2);
border-radius: var(--radius-sm);
}
.check-item .ic, .cross-item .ic {
flex-shrink: 0; width: 1.5rem; height: 1.5rem;
display: grid; place-items: center; border-radius: var(--radius-pill);
}
.check-item .ic { background: var(--color-surface-3); color: var(--color-primary); }
.cross-item .ic { background: #fdecea; color: var(--color-error); }
.check-item .ic svg, .cross-item .ic svg { width: 0.85rem; height: 0.85rem; }
.deliverables { display: grid; gap: 0.6rem; }
@media (min-width: 700px) { .deliverables { grid-template-columns: repeat(2, 1fr); } }
.deliverables li { display: flex; gap: 0.6rem; align-items: flex-start; }
.deliverables li::before { content: "—"; color: var(--color-cyan); font-weight: 700; }
.related-services { display: grid; gap: var(--space-md); }
@media (min-width: 700px) { .related-services { grid-template-columns: repeat(2, 1fr); } }
.related-card {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
padding: var(--space-lg);
border: var(--border-soft);
border-radius: var(--radius-md);
color: var(--color-ink);
transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.related-card:hover { border-color: var(--color-primary); background: var(--color-surface-2); color: var(--color-primary); }
.related-card svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
.faq { max-width: var(--container-reading); }
.faq-item {
border: var(--border-soft);
border-radius: var(--radius-md);
margin-bottom: var(--space-md);
background: var(--color-surface);
overflow: hidden;
}
.faq-item > summary {
cursor: pointer;
list-style: none;
padding: var(--space-lg);
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
content: "+";
font-size: 1.5rem;
color: var(--color-primary);
transition: transform var(--dur-base) var(--ease-out);
flex-shrink: 0;
}
.faq-item[open] > summary::after { content: "–"; }
.faq-item__body { padding: 0 var(--space-lg) var(--space-lg); color: var(--color-ink-soft); }
.process-steps { display: grid; gap: var(--space-lg); counter-reset: pstep; }
@media (min-width: 900px) { .process-steps { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.process-step { padding: var(--space-lg); border-radius: var(--radius-md); background: var(--color-surface-2); }
.process-step__n {
font-family: var(--font-heading); font-weight: var(--fw-extrabold);
color: var(--color-cyan); font-size: 1.4rem; margin-bottom: 0.4rem;
}
.process-step h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.process-step p { font-size: 0.95rem; color: var(--color-ink-soft); }
.contact-split { align-items: start; gap: clamp(2rem, 1rem + 4vw, 4rem); }
@media (min-width: 900px) { .contact-split { grid-template-columns: 0.85fr 1.15fr; } }
.contact-form-wrap { box-shadow: var(--shadow-md); border-color: transparent; }
.contact-form .grid--2 { column-gap: var(--space-2xl); }
@media (max-width: 600px) { .contact-form .grid--2 { column-gap: 0; } }
.contact-hero { align-items: center; gap: clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 900px) { .contact-hero { grid-template-columns: 1.05fr 0.95fr; } }
.contact-hero__media img { width: 100%; border-radius: var(--radius-lg); }
.contact-data { padding-block: clamp(2.25rem, 1.75rem + 2vw, 3.5rem); }
.contact-data__head { margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); max-width: none; }
.contact-cards {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: 1fr;
gap: clamp(0.75rem, 0.5rem + 0.8vw, 1.15rem);
max-width: 1100px;
margin-inline: auto;
}
@media (min-width: 620px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .contact-cards { grid-template-columns: repeat(4, 1fr); } }
.contact-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: clamp(1.15rem, 0.9rem + 0.6vw, 1.6rem) clamp(0.9rem, 0.7rem + 0.5vw, 1.25rem);
background: var(--color-surface);
border: var(--border-soft);
border-radius: var(--radius-lg);
text-align: center;
transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.contact-card:hover, .contact-card:focus-within {
transform: translateY(-4px);
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
.contact-card__ic {
width: 2.75rem; height: 2.75rem;
display: grid; place-items: center;
border-radius: var(--radius-sm);
background: var(--color-surface-3);
color: var(--color-primary);
transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.contact-card__ic svg { width: 1.3rem; height: 1.3rem; fill: none; }
.contact-card:hover .contact-card__ic { background: var(--color-primary); color: #fff; }
.contact-card__title {
font-family: var(--font-heading);
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-ink-soft);
}
.contact-card address { font-style: normal; font-size: 0.95rem; color: var(--color-ink-soft); line-height: 1.5; }
.contact-card__link { display: block; color: inherit; }
.contact-card__link:hover address { color: var(--color-primary); }
.contact-card__lines { display: grid; gap: 0.15rem; }
.contact-card__lines a {
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
color: var(--color-ink);
word-break: break-word;
}
.contact-card__lines a:hover { color: var(--color-primary); }
.contact-card__social {
display: grid;
grid-template-columns: repeat(2, auto);
justify-content: center;
gap: 0.5rem;
margin-top: 0.15rem;
}
.contact-card__social-btn {
width: 44px; height: 44px;
display: grid; place-items: center;
border: 1px solid var(--color-line);
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-primary);
transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out);
}
.contact-card__social-btn svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.contact-card__social-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.contact-form-section { padding-top: clamp(3.5rem, 2.5rem + 4vw, 7.5rem); }
.contact-points { display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
.contact-points li { display: flex; gap: 0.75rem; align-items: center; }
.contact-points__ic {
flex-shrink: 0; width: 2.25rem; height: 2.25rem;
display: grid; place-items: center;
border-radius: var(--radius-sm);
background: var(--color-surface-3); color: var(--color-primary);
}
.contact-points__ic svg { width: 1.2rem; height: 1.2rem; }
.contact-points a { color: var(--color-ink); }
.contact-points a:hover { color: var(--color-primary); }
.whatsapp-float {
position: fixed;
right: clamp(1rem, 0.5rem + 1vw, 1.75rem);
bottom: clamp(1rem, 0.5rem + 1vw, 1.75rem);
z-index: var(--z-toast);
width: 58px; height: 58px;
display: grid; place-items: center;
border-radius: var(--radius-pill);
background: #25D366;
color: #fff;
box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.whatsapp-float:hover { transform: translateY(-3px) scale(1.04); color: #fff; box-shadow: 0 14px 34px rgba(37, 211, 102, 0.55); }
.whatsapp-float svg { width: 30px; height: 30px; }
.svc-head { max-width: none; }
.svc-intro { max-width: none; }
.svc-intro__title { line-height: 1.14; }
.svc-intro__p { max-width: none; color: var(--color-ink-soft); }
.svc-intro__p + .svc-intro__p { margin-top: var(--space-md); }
.svc-intro--compact .svc-intro__p { font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.06rem); }
.svc-intro--compact .svc-intro__p + .svc-intro__p { margin-top: var(--space-sm); }
.svc-txt-split .svc-intro { max-width: 46rem; }
.svc-txt-media { display: flex; justify-content: center; align-items: center; }
.svc-txt-media img { width: 100%; height: auto; max-width: 440px; display: block; }
.svc-txt-media--rounded img { border-radius: var(--radius-lg); }
.svc-event-impact__head { margin-bottom: var(--space-xl); }
.svc-event-impact__grid {
display: grid;
grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
align-items: center;
gap: clamp(1.5rem, 4vw, 4rem);
}
.svc-event-impact__media { min-width: 0; display: flex; justify-content: center; }
.svc-event-impact__media img {
display: block;
width: 100%;
height: auto;
max-width: 420px;
border-radius: var(--radius-lg);
}
.svc-event-impact__copy { min-width: 0; }
@media (max-width: 760px) {
.svc-event-impact__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.svc-event-impact__media img { max-width: min(100%, 420px); }
}
.pv-media { display: flex; justify-content: center; align-items: center; }
.pv-phone {
position: relative;
width: min(300px, 78vw);
aspect-ratio: 320 / 660;
background: #0c0d12;
border-radius: 44px;
padding: 12px;
box-shadow: 0 30px 60px -20px rgba(5, 64, 112, 0.45), 0 0 0 2px rgba(255, 255, 255, 0.06) inset;
}
.pv-phone__cam {
position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
width: 42%; height: 22px; background: #0c0d12; border-radius: 0 0 14px 14px; z-index: 3;
}
.pv-phone__screen {
height: 100%;
border-radius: 33px;
overflow: hidden;
background: #000;
}
.pv-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-txt-media--circle img {
width: clamp(240px, 24vw, 380px);
max-width: 100%;
aspect-ratio: 1 / 1;
height: auto;
object-fit: cover;
border-radius: 50%;
box-shadow: var(--shadow-md);
}
@media (min-width: 900px) {
.svc-txt-split:not(.split--reverse):has(.svc-txt-media--circle) {
grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr);
}
.svc-txt-split.split--reverse:has(.svc-txt-media--circle) {
grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
}
}
.js .svc-txt-split--unfold[data-reveal] { opacity: 1; transform: none; transition: none; }
.js .svc-txt-split--unfold .svc-intro {
opacity: 0;
transform: translateX(80px);
transition: opacity 0.8s var(--ease-out), transform 0.95s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.js .svc-txt-split--unfold.is-visible .svc-intro { opacity: 1; transform: none; }
.js .svc-txt-split--unfold .svc-txt-media img {
transform-origin: top center;
clip-path: inset(0 0 100% 0);
}
.js .svc-txt-split--unfold.is-visible .svc-txt-media img {
animation: svcTxtUnfold 1.35s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
@keyframes svcTxtUnfold {
0%   { clip-path: inset(0 0 100% 0); transform: scale(0.76); }
52%  { clip-path: inset(0 0 0 0);    transform: scale(0.76); }
100% { clip-path: inset(0 0 0 0);    transform: scale(1); }
}
@media (max-width: 599px) {
.js .svc-txt-split--unfold .svc-intro { transform: translateX(48px); }
.js .svc-txt-split--unfold.is-visible .svc-intro { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.js .svc-txt-split--unfold .svc-intro { opacity: 1; transform: none; transition: none; }
.js .svc-txt-split--unfold .svc-txt-media img,
.js .svc-txt-split--unfold.is-visible .svc-txt-media img {
clip-path: none; transform: none; animation: none;
}
}
.svc-tag { transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.svc-card:hover .svc-tag { background: var(--color-primary); color: #fff; }
.case-grid { grid-auto-rows: 1fr; }
.case-card {
height: 100%;
display: flex;
flex-direction: column;
background: var(--color-surface);
border: var(--border-soft);
border-radius: var(--radius-md);
overflow: hidden;
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.case-card:hover {
transform: translateY(-8px) scale(1.01);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary);
}
.case-card__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--color-surface-2);
flex: 0 0 auto;
}
.case-card__media img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
transition: transform var(--dur-slow) var(--ease-out);
}
.case-card:hover .case-card__media img { transform: scale(1.07); }
.case-card--noimg .case-card__media { display: grid; place-items: center; }
.case-card__ph { width: 38%; height: auto; opacity: 0.45; transform: none !important; }
.case-card__body {
flex: 1 1 auto;
padding: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
display: flex; flex-direction: column; gap: 0.45rem;
}
.case-card__body h3 { font-size: var(--fs-h4); }
.case-card__body p { color: var(--color-ink-soft); }
.case-card__body .link-arrow { margin-top: auto; padding-top: var(--space-sm); }
@media (prefers-reduced-motion: reduce) {
.case-card:hover .case-card__media img { transform: none; }
}
.sector-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.page-sector .section-head { max-width: none; }
.page-sector .faq { max-width: none; }
.service-marketing-digital .faq { max-width: none; }
.service-marketing-digital .section-head:has(+ .faq) { max-width: none; }
.pw-stage { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pw-card {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-surface-3);
box-shadow: var(--shadow-md);
}
.pw-card__media { aspect-ratio: 4 / 3; }
.pw-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-card__ph { object-fit: contain; padding: 18%; opacity: 0.5; }
.pw-card__overlay {
position: absolute; inset: auto 0 0 0;
padding: clamp(1rem, 2vw, 1.6rem);
background: linear-gradient(0deg, rgba(3, 30, 54, 0.88), rgba(3, 30, 54, 0.5) 55%, transparent);
color: #fff;
}
.pw-card__cat {
display: inline-block;
font-family: var(--font-heading); font-weight: var(--fw-semibold);
font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--color-cyan); margin-bottom: 0.35rem;
}
.pw-card__title { color: #fff; font-size: var(--fs-h4); margin-bottom: 0.3rem; }
.pw-card__text { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; line-height: 1.4; max-width: 46ch; }
.pw-card__link { margin-top: 0.6rem; color: #fff; }
.pw-card__link:hover { color: var(--color-cyan); }
.pw-hint { display: none; }
.pw-stage .pw-card:only-child { max-width: min(520px, 92vw); margin-inline: auto; }
.pw-stage .pw-card:only-child .pw-card__media { aspect-ratio: 16 / 11; }
.pw-stage.is-wheel {
display: block;
position: relative;
height: min(64vh, 540px);
perspective: 1200px;
transform-style: preserve-3d;
overflow: hidden;
touch-action: pan-y;
}
.pw-stage.is-wheel .pw-card {
position: absolute; left: 50%; top: 50%;
width: min(520px, 74vw);
transform: translate(-50%, -50%);
transform-style: preserve-3d;
box-shadow: 0 30px 60px -24px rgba(3, 30, 54, 0.6);
cursor: grab;
}
.pw-stage.is-wheel .pw-card__media { aspect-ratio: 16 / 11; }
.pw-stage.is-wheel.is-dragging .pw-card { cursor: grabbing; }
.pw-hint { text-align: center; color: var(--color-ink-soft); font-size: 0.9rem; margin-top: var(--space-md); }
.pw-section .pw-track { position: relative; }
.pw-section.pw-desktop .pw-track { height: 320vh; }
.pw-section.pw-desktop .pw-sticky {
position: sticky; top: var(--header-h);
height: calc(100svh - var(--header-h));
display: flex; flex-direction: column; justify-content: center; gap: var(--space-lg);
}
.pw-section.pw-desktop .pw-hint { display: block; }
.nf-scan {
position: relative;
overflow: hidden;
--scan-d: clamp(120px, 12vw, 180px);
}
.nf-scan > .container { position: relative; z-index: 2; }
.nf-404 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
user-select: none;
font-family: var(--font-heading);
font-weight: var(--fw-extrabold);
font-size: clamp(11rem, 34vw, 28rem);
line-height: 0.82;
letter-spacing: -0.04em;
color: var(--color-primary);
opacity: 0.07;
white-space: nowrap;
}
.nf-404__d {
display: inline-block;
transform: translate(var(--px, 0px), var(--py, 0px)) skewX(var(--sk, 0deg));
transition: transform 0.5s var(--ease-out);
will-change: transform;
}
.nf-scan__words {
position: absolute;
inset: 0;
z-index: 1;
display: block;
pointer-events: none;
opacity: var(--scan-on, 0);
transition: opacity 0.45s var(--ease-out);
-webkit-mask-image: radial-gradient(circle calc(var(--scan-d) / 2) at var(--mx, -999px) var(--my, -999px),
#000 42%, rgba(0, 0, 0, 0.45) 70%, transparent 100%);
mask-image: radial-gradient(circle calc(var(--scan-d) / 2) at var(--mx, -999px) var(--my, -999px),
#000 42%, rgba(0, 0, 0, 0.45) 70%, transparent 100%);
}
.nf-word {
position: absolute;
left: var(--x);
top: var(--y);
transform: translate(-50%, -50%) rotate(var(--r));
font-family: var(--font-heading);
font-weight: var(--fw-extrabold);
font-size: var(--s);
line-height: 1;
letter-spacing: 0.08em;
white-space: nowrap;
color: var(--color-primary);
opacity: var(--o);
user-select: none;
}
.nf-scan__ring {
position: absolute;
z-index: 3;
left: var(--mx, -999px);
top: var(--my, -999px);
width: var(--scan-d);
height: var(--scan-d);
margin: calc(var(--scan-d) / -2) 0 0 calc(var(--scan-d) / -2);
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
background: radial-gradient(circle at 50% 50%,
color-mix(in srgb, var(--color-primary) 11%, transparent) 0%,
color-mix(in srgb, var(--color-primary) 5%, transparent) 48%,
transparent 74%);
box-shadow: 0 0 34px -10px color-mix(in srgb, var(--color-primary) 34%, transparent);
filter: blur(0.4px);
opacity: var(--scan-on, 0);
transition: opacity 0.45s var(--ease-out);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.nf-scan__words, .nf-scan__ring { display: none; }
.nf-404__d { transition: none; transform: none; }
}
.gr__grid {
display: grid;
grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
gap: clamp(1.5rem, 1rem + 2.4vw, 3.25rem);
align-items: start;
}
.gr-stars { position: relative; display: inline-block; white-space: nowrap; line-height: 1;
letter-spacing: 0.14em; font-size: 1.2rem; }
.gr-stars__bg { color: #d9e2ec; }
.gr-stars__fg { position: absolute; inset: 0; width: var(--pct, 100%); overflow: hidden; color: #fbbc04; }
.gr-stars--full { color: #fbbc04; letter-spacing: 0.14em; }
.gr-summary {
background: var(--color-surface);
border: var(--border-soft);
border-radius: var(--radius-lg);
padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
box-shadow: 0 24px 60px -34px rgba(3, 30, 54, 0.5);
text-align: center;
position: relative;
overflow: hidden;
}
.gr-summary::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
background: var(--gradient-brand);
}
.gr-summary__brand {
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: var(--font-heading); font-weight: var(--fw-semibold, 600);
font-size: var(--fs-small); color: var(--color-ink-soft);
letter-spacing: 0.02em;
}
.gr-summary__brand .gr-g { flex: 0 0 auto; }
.gr-summary__rating {
display: flex; align-items: baseline; justify-content: center; gap: 0.4rem;
margin-top: var(--space-sm);
}
.gr-summary__score {
font-family: var(--font-heading); font-weight: 800;
font-size: clamp(3.2rem, 2.4rem + 3vw, 4.6rem); line-height: 0.95;
color: var(--color-deep-blue); letter-spacing: -0.02em;
}
.gr-summary__out { font-size: 1.25rem; font-weight: 600; color: var(--color-ink-soft); }
.gr-summary .gr-stars { margin-top: 0.75rem; font-size: 1.5rem; }
.gr-summary__count { margin-top: 0.85rem; color: var(--color-ink-soft); font-size: var(--fs-small); }
.gr-summary__count strong { color: var(--color-ink); font-weight: 700; }
.gr-summary__cta { margin-top: var(--space-lg); width: 100%; }
.gr-summary__cta svg { width: 1em; height: 1em; margin-left: 0.15rem; }
.gr-carousel { min-width: 0; }
.gr-carousel__top {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
margin-bottom: var(--space-md);
}
.gr-carousel__hint {
display: inline-flex; align-items: center; gap: 0.45rem;
font-size: var(--fs-small); color: var(--color-ink-soft); font-weight: 600;
}
.gr-nav { display: inline-flex; gap: 0.5rem; }
.gr-nav__btn {
--sz: 2.6rem; width: var(--sz); height: var(--sz);
display: grid; place-items: center;
border: var(--border-soft); border-radius: 50%;
background: var(--color-surface); color: var(--color-primary);
cursor: pointer; transition: background var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.gr-nav__btn svg { width: 1.15rem; height: 1.15rem; }
.gr-nav__btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.gr-nav__btn:disabled { opacity: 0.4; cursor: default; }
.gr-nav__btn:disabled:hover { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-border, rgba(0,0,0,.1)); }
.gr-track {
list-style: none; margin: 0; padding: 0.5rem 0.25rem 0.75rem;
display: flex; gap: clamp(1rem, 0.6rem + 1vw, 1.5rem);
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory; scroll-behavior: smooth;
scrollbar-width: none; -ms-overflow-style: none;
overscroll-behavior-x: contain;
}
.gr-track::-webkit-scrollbar { display: none; }
.gr-track.is-grabbing { scroll-behavior: auto; cursor: grabbing; scroll-snap-type: none; }
.gr-card {
flex: 0 0 clamp(268px, 80%, 344px);
scroll-snap-align: start;
background: var(--color-surface);
border: var(--border-soft);
border-radius: var(--radius-lg);
padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
display: flex; flex-direction: column; gap: 0.75rem;
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.gr-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); }
@supports not (color: color-mix(in srgb, red, blue)) { .gr-card:hover { border-color: rgba(8, 114, 187, 0.45); } }
.gr-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.gr-card__g { display: inline-flex; opacity: 0.9; }
.gr-card__text {
color: var(--color-ink-soft); margin: 0; font-size: 0.98rem; line-height: 1.6;
display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.gr-card.is-expanded .gr-card__text { -webkit-line-clamp: unset; overflow: visible; }
.gr-card__more {
align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer;
color: var(--color-primary); font-weight: 600; font-size: 0.9rem;
font-family: inherit; margin-top: -0.15rem; text-decoration: none;
}
.gr-card__more:hover { text-decoration: underline; }
.gr-card__author { display: flex; align-items: center; gap: 0.7rem; margin-top: auto; padding-top: 0.4rem; }
.gr-card__avatar {
position: relative; width: 44px; height: 44px; flex: 0 0 auto;
border-radius: 50%; overflow: hidden; display: grid; place-items: center;
background: var(--color-surface-3); color: var(--color-primary);
font-family: var(--font-heading); font-weight: 700;
}
.gr-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gr-card__who { display: flex; flex-direction: column; min-width: 0; }
.gr-card__name { font-weight: 700; color: var(--color-ink); font-size: 0.95rem; }
.gr-card__date { font-size: 0.8rem; color: var(--color-ink-soft); }
.js [data-reviews] .gr-card { opacity: 0; transform: translateY(18px); }
.js [data-reviews].gr-in .gr-card {
opacity: 1; transform: none;
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
transition-delay: calc(var(--i, 0) * 80ms);
}
@media (max-width: 860px) {
.gr__grid { grid-template-columns: 1fr; }
.gr-summary { text-align: center; }
.gr-card { flex-basis: min(82%, 320px); }
}
@media (prefers-reduced-motion: reduce) {
.js [data-reviews] .gr-card { opacity: 1; transform: none; transition: none; }
.gr-track { scroll-behavior: auto; }
}
.kit-prose { max-width: 62rem; }
.kit-prose > p { margin-top: var(--space-md); color: var(--color-ink-soft); font-size: 1.05rem; line-height: var(--lh-body); }
.kit-prose > p:first-of-type { margin-top: var(--space-lg); }
.kit-media { margin-top: var(--space-xl); }
.kit-media img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; }
.kit-logos { padding-block: var(--space-xl); }
.kit-logos__wrap { max-width: 720px; margin-inline: auto; }
.kit-logos__wrap img { width: 100%; height: auto; display: block; }
.kit-cats { display: grid; gap: var(--space-lg); margin-top: var(--space-2xl); grid-template-columns: 1fr; }
@media (min-width: 720px) { .kit-cats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kit-cats { grid-template-columns: repeat(3, 1fr); } }
.kit-card {
display: flex;
flex-direction: column;
height: 100%;
padding: var(--space-lg);
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.kit-card__cat {
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
font-size: var(--fs-small);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.kit-card__rec { color: var(--color-ink-soft); font-size: 0.95rem; line-height: 1.5; margin: 0 0 var(--space-md); }
.kit-card__sol { font-size: 1.05rem; margin: 0 0 0.6rem; color: var(--color-ink); }
.kit-list { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.kit-list li {
position: relative;
padding-left: 1.35rem;
font-size: 0.92rem;
line-height: 1.5;
color: var(--color-ink-soft);
}
.kit-list li::before {
content: "";
position: absolute;
left: 0; top: 0.5em;
width: 0.5rem; height: 0.5rem;
border-radius: 50%;
background: var(--color-cyan);
}
.kit-list li strong { color: var(--color-ink); font-weight: var(--fw-semibold); }
.kit-card__note { font-size: 0.78rem; color: var(--color-muted); line-height: 1.45; margin: 0 0 0.9rem; }
.kit-card__note + .kit-card__note { margin-top: -0.5rem; }
.kit-card__price {
margin-top: auto;
align-self: flex-start;
font-family: var(--font-heading);
font-weight: var(--fw-bold);
font-size: 1.15rem;
color: var(--color-primary);
background: var(--color-surface-2, rgba(8, 114, 187, 0.08));
border: 1px solid rgba(8, 114, 187, 0.18);
border-radius: var(--radius-pill);
padding: 0.5rem 1rem;
}
.kit-prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.kit-prose a:hover { color: var(--color-deep-blue); }
.trabaja-contact__lead { margin-top: var(--space-lg); font-weight: var(--fw-semibold); color: var(--color-ink); }
.trabaja-contact { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.trabaja-contact li { display: flex; align-items: center; gap: 0.85rem; }
.trabaja-contact__ic {
width: 2.75rem; height: 2.75rem;
display: grid; place-items: center;
border-radius: var(--radius-sm);
background: var(--color-surface-3);
color: var(--color-primary);
flex: none;
}
.trabaja-contact__ic svg { width: 1.3rem; height: 1.3rem; fill: none; }
.trabaja-contact a { color: var(--color-ink); font-size: 1.05rem; text-decoration: none; }
.trabaja-contact a:hover { color: var(--color-primary); }
.join-band {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.join-band__text { min-width: min(100%, 22rem); flex: 1 1 22rem; }
.join-band__text .eyebrow { margin-bottom: 0.35rem; }
.join-band__title { margin: 0 0 0.4rem; }
.join-band__text p { margin: 0; color: var(--color-ink-soft); }
.join-band__cta { flex: none; }
.join-row { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 800px) { .join-row { grid-template-columns: repeat(2, 1fr); } }
.join-row .join-band { height: 100%; }
@media (min-width: 800px) {
.join-band__title { font-size: clamp(1.9rem, 1.2rem + 1.9vw, 3rem); }
}
.join-band--photo {
position: relative;
isolation: isolate;
border: 0;
overflow: hidden;
background-image:
linear-gradient(rgba(5, 20, 38, 0.72), rgba(5, 20, 38, 0.72)),
var(--join-bg);
background-size: cover;
background-position: center;
}
.join-band--photo .eyebrow { color: var(--color-cyan); }
.join-band--photo .join-band__title { color: #fff; }
.join-band--photo .join-band__text p { color: rgba(255, 255, 255, 0.88); }
.blog-layout {
display: grid;
gap: clamp(2rem, 1rem + 3vw, 3.5rem);
align-items: start;
}
@media (min-width: 960px) {
.blog-layout { grid-template-columns: 1fr 300px; }
}
.blog-post-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
@media (min-width: 960px) { .blog-post-grid { grid-template-columns: repeat(2, 1fr); } }
.featured-post {
display: grid;
border: var(--border-soft);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: var(--space-2xl);
background: var(--color-surface);
}
@media (min-width: 720px) { .featured-post { grid-template-columns: 1.1fr 1fr; } }
.featured-post__media { display: block; background: var(--color-surface-3); aspect-ratio: 16 / 10; overflow: hidden; }
.featured-post__media img { width: 100%; height: 100%; object-fit: cover; }
.featured-post__body { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: flex; flex-direction: column; gap: var(--space-md); }
.featured-post__body h2 { font-size: var(--fs-h3); }
.featured-post__body h2 a { color: var(--color-ink); }
.featured-post__body h2 a:hover { color: var(--color-primary); }
.featured-post__body p { color: var(--color-ink-soft); }
.featured-post__body .btn { align-self: flex-start; margin-top: auto; }
.pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
margin-top: var(--space-2xl);
flex-wrap: wrap;
}
.pagination__link {
font-family: var(--font-heading);
font-weight: var(--fw-semibold);
padding: 0.6rem 1.1rem;
border: var(--border-soft);
border-radius: var(--radius-pill);
}
.pagination__link:hover { border-color: var(--color-primary); background: var(--color-surface-2); }
.pagination__status { color: var(--color-muted); font-size: var(--fs-small); }
.blog-aside { display: grid; gap: var(--space-xl); position: sticky; top: calc(var(--header-h) + 1rem); }
@media (max-width: 959px) {
.blog-aside { position: static; order: -1; }
.blog-main { order: 0; }
}
.aside-block h3 {
font-size: var(--fs-small);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-muted);
margin-bottom: var(--space-md);
}
.blog-search { display: flex; gap: 0.5rem; align-items: stretch; }
.blog-search .form-control { flex: 1; }
.blog-search__go {
flex: 0 0 auto;
align-self: stretch;
width: 3.5rem;
padding: 0; border: 0; background: none;
cursor: pointer;
display: grid; place-items: center;
transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.blog-search__go img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; display: block; }
.blog-search__go:hover { transform: scale(1.06); filter: brightness(1.05); }
.blog-search__go:active { transform: scale(0.98); }
.blog-search__go:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 50%; }
.aside-list li { border-bottom: 1px solid var(--color-line); }
.aside-list a { display: flex; justify-content: space-between; padding: 0.6rem 0; color: var(--color-ink-soft); }
.aside-list a:hover { color: var(--color-primary); }
.aside-list span { color: var(--color-muted); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-chip {
display: inline-block;
font-size: var(--fs-small);
padding: 0.35rem 0.75rem;
border-radius: var(--radius-pill);
background: var(--color-surface-2);
color: var(--color-ink-soft);
border: 1px solid var(--color-line);
}
.tag-chip:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-surface-3); }
.aside-cta {
background: var(--color-surface-3);
border-radius: var(--radius-md);
padding: var(--space-lg);
}
.aside-cta p { font-size: 0.95rem; color: var(--color-ink-soft); margin-bottom: var(--space-md); }
.article-hero { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); padding-bottom: var(--space-lg); }
.article-hero .badge { margin-bottom: var(--space-md); }
.article-hero h1 { max-width: none; margin-bottom: var(--space-md); }
.article-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--color-muted); font-size: var(--fs-small); }
.article-cover { margin-bottom: var(--space-2xl); }
.article-cover img {
width: 100%;
border-radius: var(--radius-lg);
max-height: 480px;
object-fit: cover;
}
.article-layout { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
@media (min-width: 1024px) { .article-layout { grid-template-columns: 260px minmax(0, 1fr); } }
.article-toc { position: sticky; top: calc(var(--header-h) + 1rem); font-size: 0.95rem; }
@media (max-width: 1023px) {
.article-toc { position: static; background: var(--color-surface-2); padding: var(--space-lg); border-radius: var(--radius-md); }
}
.article-toc h2 { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-muted); margin-bottom: var(--space-md); }
.article-toc ul { border-left: 2px solid var(--color-line); }
.article-toc li a { display: block; padding: 0.35rem 0 0.35rem 1rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--color-ink-soft); }
.article-toc li.toc-h3 a { padding-left: 2rem; font-size: 0.9rem; }
.article-toc li a:hover, .article-toc li a.is-active { color: var(--color-primary); border-color: var(--color-primary); }
.article-body { max-width: var(--container-reading); font-size: 1.075rem; }
.article-body > * + * { margin-top: var(--space-lg); }
.article-body h2 { font-size: var(--fs-h3); margin-top: var(--space-2xl); scroll-margin-top: calc(var(--header-h) + 1rem); }
.article-body h3 { font-size: var(--fs-h4); margin-top: var(--space-xl); scroll-margin-top: calc(var(--header-h) + 1rem); }
.article-body p { line-height: var(--lh-body); color: var(--color-ink); }
.article-body a { text-decoration: underline; text-underline-offset: 3px; }
.post-list { display: grid; gap: 0.6rem; }
.post-list li { position: relative; padding-left: 1.5rem; }
.article-body ul.post-list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; border-radius: 50%; background: var(--gradient-brand); }
.article-body ol.post-list { counter-reset: li; }
.article-body ol.post-list li { counter-increment: li; }
.article-body ol.post-list li::before { content: counter(li); position: absolute; left: 0; top: 0; font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); }
.post-summary {
background: var(--color-surface-3);
border-radius: var(--radius-md);
padding: var(--space-lg) var(--space-xl);
border-left: 4px solid var(--color-primary);
}
.post-summary__title { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-primary); margin-bottom: 0.4rem; }
.post-callout {
background: var(--gradient-brand-135);
color: #fff;
padding: var(--space-lg) var(--space-xl);
border-radius: var(--radius-md);
}
.post-callout p { color: #fff; margin: 0; font-weight: var(--fw-medium); }
.post-quote {
border-left: 4px solid var(--color-cyan);
padding: var(--space-md) var(--space-xl);
font-size: 1.25rem;
font-family: var(--font-heading);
color: var(--color-ink);
}
.post-quote cite { display: block; margin-top: var(--space-sm); font-size: 0.95rem; font-style: normal; color: var(--color-muted); }
.post-figure img { width: 100%; border-radius: var(--radius-md); }
.post-figure figcaption { margin-top: 0.5rem; font-size: var(--fs-small); color: var(--color-muted); text-align: center; }
.post-table-wrap { overflow-x: auto; }
.post-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.post-table th, .post-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--color-line); }
.post-table thead th { background: var(--color-surface-2); font-family: var(--font-heading); }
.post-code {
background: var(--code-bg);
color: var(--code-text);
padding: var(--space-lg);
border-radius: var(--radius-md);
overflow-x: auto;
font-size: 0.9rem;
}
.post-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; }
.post-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-faq { margin-top: var(--space-2xl); }
.post-faq h2 { margin-bottom: var(--space-lg); }
.post-cta {
margin-top: var(--space-2xl);
background: var(--color-surface-2);
border: var(--border-soft);
border-radius: var(--radius-lg);
padding: var(--space-xl);
text-align: center;
}
.post-cta h3 { margin-bottom: 0.5rem; }
.post-cta p { color: var(--color-ink-soft); margin-bottom: var(--space-lg); }
.article-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-2xl); }
.article-share {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md);
margin-top: var(--space-xl); padding-top: var(--space-lg);
border-top: 1px solid var(--color-line);
font-size: var(--fs-small);
}
.article-share a, .article-share button { color: var(--color-primary); font-weight: var(--fw-semibold); font-family: var(--font-heading); }
.article-share span:first-child { color: var(--color-muted); }
.article-nav {
display: grid; gap: var(--space-md);
margin-top: var(--space-3xl);
}
@media (min-width: 700px) { .article-nav { grid-template-columns: 1fr 1fr; } }
.article-nav__link {
display: flex; flex-direction: column; gap: 0.25rem;
padding: var(--space-lg);
border: var(--border-soft); border-radius: var(--radius-md);
color: var(--color-ink);
}
.article-nav__link:hover { border-color: var(--color-primary); background: var(--color-surface-2); }
.article-nav__link span { font-size: var(--fs-small); color: var(--color-muted); }
.article-nav__next { text-align: right; }
html, body { max-width: 100%; overflow-x: clip; }
@media (max-width: 1023px) {
:root { --header-h: 68px; }
}
@media (max-width: 640px) {
.btn { width: 100%; }
.hero-actions .btn { width: auto; }
.cluster .btn { width: auto; }
}
@media (max-width: 380px) {
:root { --gutter: 1.1rem; }
}
@media print {
.site-header, .site-footer, .cookie-banner, .nav-toggle, .mobile-nav { display: none !important; }
body { color: #000; }
a { color: #000; text-decoration: underline; }
}