/* =========================================================================
TAN Digital — Corporate Website (v2)
Type: Host Grotesk (via Google Fonts) + Helvetica-stack for labels
Layout: Wide-screen first (1440 base, 1680 max), strong type hierarchy
Style: TAN corporate palette + Oxide-precision + Braga clarity
========================================================================= */
/* Host Grotesk is loaded via Google Fonts in each page's . */
/* -----------------------------
Design tokens
----------------------------- */
:root {
/* Brand */
--tan-blue: #00b9f5;
--tan-blue-hover: #2dd1ff;
--tan-blue-soft: #5dd5ff;
--tan-blue-deep: #1e6fbf;
--tan-blue-dim: #0e3d6e;
--tan-navy: #0b1530;
--tan-black: #05080f;
/* Logica product palette — colours sourced from the 2026 presentation deck */
--logica-erp: #6AA84F; /* slide 8: green */
--logica-erp-soft: #7DC088;
--logica-erp-tint: #E2F5EC;
--logica-spatia: #FFC000; /* slide 9: yellow / gold */
--logica-spatia-deep:#FFA900;
--logica-spatia-tint:#FFF2CC;
--logica-flow: #0087C9; /* slide 10: blue */
--logica-flow-tint: #D9F5FF;
--logica-visi: #EA5952; /* slide 11: red / coral */
--logica-visi-tint: #FFEDEA;
/* Surfaces — light defaults. Dark zones (header, hero, footer, cta-strip)
re-assert dark tokens via their own selectors further down. */
--bg-0: #ffffff;
--bg-1: #f7f9fc;
--bg-2: #eef1f7;
--bg-3: #e3e8f1;
--bg-elev: #ffffff;
--bg-light: #f4f6fa;
/* Borders */
--border-1: #d8dee9;
--border-2: #c4cbda;
--border-3: #aab3c5;
--border-glow: rgba(0, 185, 245, 0.35);
/* Text */
--text-0: #05080f;
--text-1: #1a2238;
--text-2: #3d475b;
--text-3: #5a6479;
--text-4: #6e788c;
/* Status */
--success: #22c55e;
--warning: #f59e0b;
--danger: #ef4444;
/* Glow */
--glow-blue: 0 0 0 1px rgba(0, 185, 245, 0.5), 0 0 60px rgba(0, 185, 245, 0.22);
--glow-soft: 0 0 0 1px rgba(0, 185, 245, 0.35), 0 0 24px rgba(0, 185, 245, 0.18);
/* Elevation scale — six tiers, reserved per surface type.
xs → inset / pressed sm → resting card md → hover card
lg → popover / sticky xl → modal 2xl → hero / floating panels */
--shadow-xs: 0 1px 2px rgba(15, 21, 37, 0.06), 0 0 0 1px rgba(15, 21, 37, 0.03);
--shadow-sm: 0 2px 6px rgba(15, 21, 37, 0.06), 0 1px 2px rgba(15, 21, 37, 0.04);
--shadow-md: 0 8px 24px rgba(15, 21, 37, 0.10), 0 2px 8px rgba(15, 21, 37, 0.06);
--shadow-lg: 0 18px 48px rgba(15, 21, 37, 0.14), 0 6px 18px rgba(15, 21, 37, 0.08);
--shadow-xl: 0 30px 80px rgba(15, 21, 37, 0.22), 0 12px 32px rgba(15, 21, 37, 0.12);
--shadow-2xl: 0 50px 120px rgba(15, 21, 37, 0.28), 0 20px 48px rgba(15, 21, 37, 0.16);
/* Coloured glows — used for product-themed cards and CTAs */
--shadow-glow-blue: 0 0 0 1px rgba(0, 185, 245, 0.45), 0 18px 54px rgba(0, 185, 245, 0.22);
--shadow-glow-green: 0 0 0 1px rgba(106, 168, 79, 0.45), 0 18px 54px rgba(106, 168, 79, 0.22);
--shadow-glow-coral: 0 0 0 1px rgba(234, 89, 82, 0.45), 0 18px 54px rgba(234, 89, 82, 0.22);
--shadow-glow-gold: 0 0 0 1px rgba(255, 169, 0, 0.50), 0 18px 54px rgba(255, 169, 0, 0.22);
/* Motion — named durations + curated easings */
--dur-instant: 80ms;
--dur-fast: 140ms;
--dur-base: 220ms;
--dur-slow: 360ms;
--dur-slower: 560ms;
--dur-cinematic: 920ms;
--ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* most UI */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* entrances */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* large entrances */
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); /* transitions */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful hovers */
/* Border-width emphasis */
--bw-1: 1px;
--bw-2: 2px;
--bw-3: 3px;
/* Alpha scale — used for tinted backgrounds, scrim layers */
--alpha-1: 0.04;
--alpha-2: 0.08;
--alpha-3: 0.14;
--alpha-4: 0.22;
--alpha-5: 0.38;
/* Body texture (very faint dotted grid) */
--body-grid: rgba(0, 91, 130, 0.04);
/* Type families */
--font-sans: "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display: "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Editorial — serif for long-form articles, pull-quotes, drop-caps */
--font-serif: "Source Serif 4", "Newsreader", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", serif;
/* "Technical / precise" labels: Helvetica-based sans, NOT a monospace */
--font-mono: "Helvetica Neue", Helvetica, Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Type scale (fluid clamps) */
--fs-display-2: clamp(56px, 8vw, 128px); /* hero monster */
--fs-display-1: clamp(44px, 6.4vw, 92px); /* hero / page head */
--fs-h1: clamp(36px, 4.6vw, 64px); /* large section */
--fs-h2: clamp(28px, 3.4vw, 46px); /* section head */
--fs-h3: clamp(22px, 2.2vw, 30px); /* sub-section */
--fs-h4: clamp(18px, 1.4vw, 22px); /* card head */
--fs-title: 19px;
--fs-lede: clamp(18px, 1.35vw, 22px);
--fs-body-lg: 18px;
--fs-body: 16.5px;
--fs-body-sm: 16px;
--fs-caption: 16px;
--fs-micro: 15.5px;
/* Line heights */
--lh-tight: 1.05;
--lh-snug: 1.15;
--lh-normal: 1.5;
--lh-relaxed: 1.65;
/* Letter spacing */
--ls-display: -0.035em;
--ls-heading: -0.022em;
--ls-body: -0.005em;
--ls-caps: 0.12em;
--ls-caps-lg: 0.18em;
/* Spacing scale (8pt base) */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-14: 56px;
--sp-16: 64px;
--sp-20: 80px;
--sp-24: 96px;
--sp-28: 112px;
--sp-32: 128px;
--sp-40: 160px;
/* Radii — softer by default */
--r-0: 0;
--r-1: 4px;
--r-2: 10px;
--r-3: 16px;
--r-pill: 9999px;
/* Layout widths */
--container-narrow: 960px;
--container-text: 1100px;
--container: 1440px;
--container-wide: 1680px;
--container-full: 1840px;
--nav-h: 76px;
--gutter: clamp(28px, 5vw, 96px);
}
/* -----------------------------
Reset & base
----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Accessibility — visible focus ring, skip-link, reduced-motion */
*:focus-visible {
outline: 2px solid var(--tan-blue);
outline-offset: 3px;
border-radius: var(--r-1);
}
.skip-link {
position: absolute;
top: -100px;
left: 16px;
z-index: 1000;
padding: 12px 18px;
background: var(--tan-blue);
color: var(--tan-black);
font-weight: 600;
font-size: 14px;
border-radius: var(--r-1);
transition: top .2s ease;
}
.skip-link:focus {
top: 16px;
color: var(--tan-black);
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1 !important; transform: none !important; }
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-body);
font-weight: 400;
line-height: var(--lh-relaxed);
letter-spacing: var(--ls-body);
color: var(--text-1);
background-color: var(--bg-0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "kern", "liga", "calt";
font-optical-sizing: auto;
text-rendering: optimizeLegibility;
overflow-x: hidden;
position: relative;
/* Very faint dotted texture — keeps the white from feeling sterile but stays
subtle so it doesn't fight the content. */
background-image: radial-gradient(var(--body-grid) 1px, transparent 1px);
background-size: 64px 64px;
}
/* Subtle geometric decorations on the sides of white body sections.
Two fixed SVG layers — one anchored to the left, one to the right — sit
behind the content. They use very pale TAN-blue strokes so they only feel
like a soft visual rhythm, not decoration that competes with the content. */
body::before,
body::after {
content: "";
position: absolute;
top: var(--nav-h);
bottom: 0;
width: 300px;
pointer-events: none;
z-index: 0;
opacity: 1;
}
body::before {
left: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat-y;
background-position: left top;
background-size: 300px 1800px;
}
body::after {
right: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat-y;
background-position: right top;
background-size: 300px 1800px;
}
/* Keep dark zones above the geometric layer */
.topbar, .hero, footer, .cta-strip, .page-head, main { position: relative; z-index: 1; }
/* Hide geometric shapes only on very narrow viewports where they crowd content */
@media (max-width: 900px) {
body::before, body::after { display: none; }
}
/* ============================================================
Dark zones — header, hero, footer, CTA strip — re-assert dark
tokens so anything nested inside renders for a dark surface.
============================================================ */
.topbar,
.hero,
footer,
.cta-strip {
--bg-0: #05080f;
--bg-1: #0a0f1c;
--bg-2: #0f1525;
--bg-3: #141b2e;
--bg-elev: #1a2238;
--border-1: #1c2538;
--border-2: #2a3449;
--border-3: #3a465f;
--text-0: #ffffff;
--text-1: #e8edf5;
--text-2: #a5b0c2;
--text-3: #6b7790;
--text-4: #8590a8;
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.4);
color: var(--text-1);
}
img, svg { max-width: 100%; display: block; }
a { color: var(--tan-blue); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--tan-blue-hover); }
button { font-family: inherit; cursor: pointer; }
/* Type hierarchy */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--text-0);
font-weight: 700;
line-height: var(--lh-snug);
letter-spacing: var(--ls-heading);
margin: 0 0 var(--sp-4);
text-wrap: balance;
}
h1 { font-size: var(--fs-display-1); letter-spacing: var(--ls-display); line-height: var(--lh-tight); font-weight: 800; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { margin: 0 0 var(--sp-4); color: var(--text-2); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); color: var(--text-2); }
li { margin-bottom: var(--sp-2); }
::selection { background: var(--tan-blue); color: var(--tan-black); }
/* Inline blue accent for key phrases in body text */
.hl { color: var(--tan-blue); font-weight: 600; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--border-3); }
/* -----------------------------
Containers
----------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { width: 100%; max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.container-text { width: 100%; max-width: var(--container-text); margin: 0 auto; padding: 0 var(--gutter); }
/* -----------------------------
Utilities
----------------------------- */
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none !important; }
.text-accent { color: var(--tan-blue); }
.text-soft { color: var(--tan-blue-soft); }
.text-muted { color: var(--text-3); }
.text-center { text-align: center; }
.mono { font-family: var(--font-mono); }
.tight { letter-spacing: var(--ls-display); }
/* Eyebrow */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--ls-caps-lg);
text-transform: uppercase;
color: var(--tan-blue);
margin-bottom: var(--sp-5);
font-weight: 700;
}
.eyebrow::before {
content: "";
width: 32px;
height: 2px;
background: currentColor;
}
.eyebrow-center { justify-content: center; }
.eyebrow-center::before { display: none; }
.eyebrow-center::after {
content: "";
width: 32px;
height: 2px;
background: currentColor;
}
/* Section head */
.section-head {
max-width: 820px;
margin-bottom: var(--sp-16);
}
.section-head h2 { font-size: var(--fs-h1); margin-bottom: var(--sp-5); }
.section-head p { font-size: var(--fs-lede); color: var(--text-2); line-height: var(--lh-normal); }
.section-head.center { margin: 0 auto var(--sp-16); text-align: center; }
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 14px 24px;
font-family: var(--font-sans);
font-size: var(--fs-body-sm);
font-weight: 600;
letter-spacing: 0.005em;
border: 1px solid transparent;
border-radius: var(--r-1);
cursor: pointer;
transition: all .2s ease;
text-decoration: none;
white-space: nowrap;
position: relative;
}
.btn-primary {
background: var(--tan-blue);
color: var(--tan-black);
border-color: var(--tan-blue);
}
.btn-primary:hover {
background: var(--tan-blue-hover);
border-color: var(--tan-blue-hover);
color: var(--tan-black);
box-shadow: var(--glow-soft);
transform: translateY(-1px);
}
.btn-ghost {
background: rgba(0, 0, 0, 0.02);
color: var(--text-0);
border-color: var(--border-2);
}
.btn-ghost:hover { border-color: var(--tan-blue); color: var(--tan-blue); background: rgba(0,185,245,0.06); }
/* In dark zones (hero, page-head, footer, cta-strip) the ghost button needs
a translucent-white background to be visible on the dark surface. */
.hero .btn-ghost,
.page-head .btn-ghost,
footer .btn-ghost,
.cta-strip .btn-ghost {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.20);
}
.hero .btn-ghost:hover,
.page-head .btn-ghost:hover,
footer .btn-ghost:hover,
.cta-strip .btn-ghost:hover { border-color: var(--tan-blue); background: rgba(0,185,245,0.10); color: var(--tan-blue-soft); }
.btn-outline {
background: transparent;
color: var(--tan-blue);
border-color: var(--tan-blue);
}
.btn-outline:hover { background: var(--tan-blue); color: var(--tan-black); }
.btn-lg { padding: 16px 30px; font-size: var(--fs-body); }
.btn-md { padding: 13px 22px; font-size: 14px; }
.btn-sm { padding: 10px 16px; font-size: 13px; }
.btn .arrow { transition: transform var(--dur-base) var(--ease-out-quart); }
.btn:hover .arrow { transform: translateX(3px); }
/* Button states */
.btn[disabled], .btn:disabled, .btn.is-disabled {
opacity: 0.45;
pointer-events: none;
cursor: not-allowed;
box-shadow: none !important;
transform: none !important;
}
.btn.is-loading {
pointer-events: none;
color: transparent !important;
}
.btn.is-loading::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 18px; height: 18px;
border-radius: 50%;
border: 2px solid currentColor;
border-top-color: transparent;
color: var(--tan-black);
animation: btn-spin 720ms linear infinite;
}
.btn-ghost.is-loading::after, .btn-outline.is-loading::after { color: var(--tan-blue); }
@keyframes btn-spin { to { transform: rotate(360deg); } }
/* Icon-only square button (44×44 — meets tap-target) */
.btn-icon {
padding: 0;
width: 44px;
height: 44px;
justify-content: center;
}
.btn-icon svg { width: 18px; height: 18px; }
/* Badge */
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--tan-blue);
background: rgba(0, 185, 245, 0.08);
border: 1px solid rgba(0, 185, 245, 0.28);
border-radius: var(--r-1);
font-weight: 500;
white-space: nowrap;
}
.badge-muted { color: var(--text-3); background: rgba(255,255,255,0.03); border-color: var(--border-2); }
.badge-success { color: var(--success); background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.28); }
.badge-warn { color: var(--warning); background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.28); }
.badge-danger { color: var(--danger); background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.28); }
/* Size variants */
.badge.sm { padding: 3px 8px; font-size: 12.5px; letter-spacing: 0.10em; }
.badge.lg { padding: 8px 14px; font-size: 14px; }
/* Outline variant — strips fill, keeps colour and border */
.badge.outline { background: transparent; }
.badge.solid { background: var(--tan-blue); color: var(--tan-black); border-color: var(--tan-blue); }
/* Dot prefix — small status dot before the label */
.badge.dot::before {
content: "";
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 8px currentColor;
margin-right: 2px;
}
/* -----------------------------
Logo
----------------------------- */
.logo {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--text-0);
text-decoration: none;
font-weight: 800;
}
.logo-mark {
width: 30px;
height: 30px;
}
.logo-text {
display: flex;
flex-direction: column;
line-height: 1;
letter-spacing: -0.025em;
}
.logo-text .logo-main {
font-family: var(--font-display);
font-size: 19px;
font-weight: 800;
color: var(--text-0);
}
.logo-text .logo-sub {
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
color: var(--tan-blue);
letter-spacing: 0.04em;
margin-top: 3px;
font-style: italic;
}
/* Corporate brand PNG used in topbar + footer */
.logo-corp {
height: 44px;
width: auto;
display: block;
object-fit: contain;
}
.topbar .logo-corp { height: 56px; }
footer .logo-corp { height: 72px; }
/* -----------------------------
Top nav
----------------------------- */
.topbar {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--nav-h);
z-index: 100;
background: rgba(5, 8, 15, 1);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
transition:
height var(--dur-slow) var(--ease-standard),
background var(--dur-slow) var(--ease-standard),
backdrop-filter var(--dur-slow) var(--ease-standard),
border-color var(--dur-slow) var(--ease-standard),
box-shadow var(--dur-slow) var(--ease-standard);
}
.topbar.scrolled {
height: calc(var(--nav-h) - 16px);
background: rgba(5, 8, 15, 0.72);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
border-bottom-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.32);
}
.topbar.scrolled .logo-corp { height: 48px; transition: height var(--dur-slow) var(--ease-standard); }
.topbar .logo-corp { transition: height var(--dur-slow) var(--ease-standard); }
.topbar-inner {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-6);
}
.nav { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
font-size: 17px;
font-weight: 600;
color: var(--text-2);
border-radius: var(--r-1);
transition: color .15s ease;
}
.nav-link:hover { color: var(--text-0); }
.nav-link.active { color: var(--tan-blue); }
.nav-link svg.caret { width: 10px; height: 10px; transition: transform .15s ease; }
.nav-item:hover .nav-link svg.caret { transform: rotate(180deg); }
/* Dropdown */
.nav-dropdown {
position: absolute;
top: calc(100% - 4px);
left: 0;
min-width: 320px;
background: var(--bg-1);
border: 1px solid var(--border-1);
border-radius: var(--r-1);
padding: var(--sp-2);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
box-shadow: var(--shadow-lg);
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown a {
display: block;
padding: 14px 18px;
font-size: 12px;
font-weight: 600;
color: var(--text-1);
border-radius: var(--r-1);
border: 1px solid transparent;
}
.nav-dropdown a:hover {
background: var(--bg-2);
color: var(--tan-blue);
border-color: var(--border-1);
}
.nav-dropdown a .nd-sub {
display: block;
font-size: 14px;
font-weight: 400;
color: var(--text-3);
margin-top: 4px;
font-family: var(--font-mono);
letter-spacing: 0.04em;
}
.nav-cta { display: inline-flex; gap: var(--sp-3); align-items: center; }
.nav-toggle {
display: none;
background: transparent;
border: 1px solid var(--border-2);
color: var(--text-0);
width: 42px; height: 42px;
border-radius: var(--r-1);
align-items: center; justify-content: center;
}
.mobile-menu {
display: none;
position: fixed;
top: var(--nav-h); left: 0; right: 0; bottom: 0;
background: var(--bg-0);
z-index: 99;
overflow-y: auto;
padding: var(--sp-6);
}
.mobile-menu.open { display: block; }
.mobile-menu details { border-bottom: 1px solid var(--border-1); padding: 14px 0; }
.mobile-menu details > summary { font-size: 17px; color: var(--text-0); cursor: pointer; font-weight: 600; }
.mobile-menu details > div { padding: var(--sp-3) 0 var(--sp-2) var(--sp-4); }
.mobile-menu a { display: block; padding: 10px 0; color: var(--text-1); font-size: 15px; }
.mobile-menu a.standalone { padding: 14px 0; border-bottom: 1px solid var(--border-1); font-size: 17px; font-weight: 600; }
main { padding-top: var(--nav-h); }
/* -----------------------------
Hero (home)
----------------------------- */
.hero {
position: relative;
padding: clamp(90px, 14vw, 180px) 0 clamp(60px, 10vw, 140px);
overflow: hidden;
/* Deep black → dark navy gradient. Two radial spotlights add depth. */
background:
radial-gradient(1100px 650px at 78% 8%, rgba(0,185,245,0.20), transparent 65%),
radial-gradient(850px 600px at 8% 100%, rgba(30,111,191,0.18), transparent 60%),
linear-gradient(135deg, #000000 0%, #050810 35%, #07112a 65%, #0b1840 100%);
}
/* Geometric shape overlay — circles, triangles, lines — to give the hero a
strong "design moment" feel while staying subtle enough not to overpower the
typography. */
.hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
/* faint grid */
linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
background-size: 64px 64px, 64px 64px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
pointer-events: none;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
/* Three concentric circle outlines + a thin diagonal accent — rendered as
a single SVG data-URI for crispness at any scale. */
background-image: url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: center;
opacity: 0.9;
}
.hero-inner {
position: relative;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: var(--sp-16);
align-items: center;
}
.hero-text { position: relative; z-index: 2; }
.hero h1 {
font-size: var(--fs-display-1);
letter-spacing: var(--ls-display);
line-height: 0.98;
font-weight: 800;
margin-bottom: var(--sp-6);
color: var(--text-0);
}
.hero h1 .hl {
color: var(--tan-blue);
font-style: italic;
font-weight: 700;
}
.hero h1 .breaker { display: block; }
.hero p.lede {
font-size: var(--fs-lede);
color: var(--text-2);
max-width: 580px;
line-height: var(--lh-normal);
margin-bottom: var(--sp-10);
}
.hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.hero-visual {
position: relative;
min-height: 480px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-visual img {
width: 100%;
height: auto;
max-width: 720px;
filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5));
}
.hero-metrics {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: var(--sp-16);
border-top: 1px solid var(--border-1);
}
.hero-metrics .m {
padding: var(--sp-6) var(--sp-6) var(--sp-6) 0;
border-right: 1px solid var(--border-1);
padding-left: var(--sp-6);
}
.hero-metrics .m:first-child { padding-left: 0; }
.hero-metrics .m:last-child { border-right: none; }
.hero-metrics .m .val {
font-family: var(--font-display);
font-size: clamp(32px, 3.4vw, 48px);
color: var(--text-0);
font-weight: 700;
letter-spacing: var(--ls-display);
line-height: 1;
font-variant-numeric: tabular-nums lining-nums;
}
.hero-metrics .m .lbl {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--text-3);
margin-top: var(--sp-3);
font-weight: 500;
}
/* Marquee strip for clients/journey row */
.strip {
position: relative;
border-top: 1px solid var(--border-1);
border-bottom: 1px solid var(--border-1);
background: var(--bg-1);
padding: var(--sp-5) 0;
overflow: hidden;
}
.strip-inner {
display: flex;
gap: var(--sp-12);
align-items: center;
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--text-3);
}
.strip-inner > span { white-space: nowrap; }
.strip-inner b { color: var(--text-0); font-weight: 600; }
.strip-inner .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--tan-blue); flex: 0 0 auto; }
/* -----------------------------
Page head (sub-pages) — dark "hero zone" matching the homepage hero so the
top of every interior page reads as black/dark-blue before transitioning to
the white content below.
----------------------------- */
.page-head {
--bg-0: #05080f;
--bg-1: #0a0f1c;
--bg-2: #0f1525;
--border-1: #1c2538;
--border-2: #2a3449;
--text-0: #ffffff;
--text-1: #e8edf5;
--text-2: #a5b0c2;
--text-3: #6b7790;
--text-4: #8590a8;
color: var(--text-1);
position: relative;
padding: clamp(100px, 13vw, 180px) 0 clamp(56px, 8vw, 100px);
background:
radial-gradient(1100px 600px at 78% 8%, rgba(0,185,245,0.18), transparent 65%),
radial-gradient(850px 500px at 8% 100%, rgba(30,111,191,0.16), transparent 60%),
linear-gradient(135deg, #000000 0%, #050810 35%, #07112a 65%, #0b1840 100%);
border-bottom: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
}
.page-head::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
background-size: 56px 56px, 56px 56px;
mask-image: linear-gradient(180deg, black, transparent);
-webkit-mask-image: linear-gradient(180deg, black, transparent);
pointer-events: none;
}
.page-head::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: center;
opacity: 0.85;
}
.page-head .container { position: relative; z-index: 1; }
/* -----------------------------
Photo-backed page-head — set --photo on the section to layer an editorial photo
beneath the dark gradient. The gradient stays strong enough to keep the type
legible; the photo bleeds through the lower-right quadrant.
----------------------------- */
/* The photo goes on ::before (replacing the grid-line pattern entirely on photo
pages). A dark gradient is layered on top of the photo inside the same
pseudo. ::after still carries the geometric SVG so the chrome reads consistent. */
.page-head.has-photo::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(135deg, rgba(0,0,0,0.78) 0%, rgba(5,8,16,0.58) 35%, rgba(7,17,42,0.36) 70%, rgba(11,24,64,0.18) 100%),
var(--photo);
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
mask-image: none;
-webkit-mask-image: none;
}
.page-head.has-photo::after {
background-image:
radial-gradient(circle at 100% 100%, transparent 0%, rgba(5,8,15,0.30) 60%, rgba(5,8,15,0.72) 100%),
url("data:image/svg+xml;utf8,");
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
mask-image: none;
-webkit-mask-image: none;
opacity: 1;
}
.page-head h1 {
font-size: var(--fs-display-1);
max-width: 1100px;
margin-bottom: var(--sp-5);
line-height: 1.02;
font-weight: 800;
letter-spacing: var(--ls-display);
}
.page-head h1 .hl { color: var(--tan-blue); font-style: italic; font-weight: 700; }
/* -----------------------------
Logica product page accents
----------------------------- */
body[data-product] { --product-accent: var(--tan-blue); --product-tint: rgba(0,185,245,0.10); }
body[data-product="erp"] { --product-accent: var(--logica-erp); --product-tint: rgba(106,168,79,0.14); }
body[data-product="spatia"] { --product-accent: var(--logica-spatia); --product-tint: rgba(255,192,0,0.14); }
body[data-product="flow"] { --product-accent: var(--logica-flow); --product-tint: rgba(0,135,201,0.14); }
body[data-product="visi"] { --product-accent: var(--logica-visi); --product-tint: rgba(234,89,82,0.14); }
/* Per-product hero: stronger product-colour gradient sitting on a dark base, with
a geometric overlay for visual weight. Each product gets a corner radial
spotlight in its accent colour. */
body[data-product] .page-head {
background:
radial-gradient(800px 460px at 85% 100%, var(--product-tint-strong, rgba(0,185,245,0.32)), transparent 65%),
radial-gradient(700px 380px at 12% -10%, var(--product-tint, rgba(0,185,245,0.14)), transparent 60%),
linear-gradient(135deg, #05080f 0%, #0a0f1c 45%, var(--product-deep, #0e3d6e) 100%);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
body[data-product="erp"] { --product-tint-strong: rgba(106,168,79,0.30); --product-deep: #1f3d0a; }
body[data-product="spatia"] { --product-tint-strong: rgba(255,192,0,0.30); --product-deep: #4d3800; }
body[data-product="flow"] { --product-tint-strong: rgba(0,135,201,0.32); --product-deep: #052943; }
body[data-product="visi"] { --product-tint-strong: rgba(234,89,82,0.28); --product-deep: #4a1612; }
/* Geometric overlay for product heroes — soft outlined shapes anchored to the
right of the page-head, scaled by viewport. */
body[data-product] .page-head::after {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 92% 70%, rgba(255,255,255,0.05) 0 1px, transparent 1.5px),
radial-gradient(circle at 78% 28%, rgba(255,255,255,0.04) 0 1px, transparent 1.5px);
background-size: 360px 360px, 280px 280px;
pointer-events: none;
mask-image: linear-gradient(135deg, transparent 30%, black 70%);
-webkit-mask-image: linear-gradient(135deg, transparent 30%, black 70%);
opacity: 0.6;
}
body[data-product] .page-head h1 .hl { color: var(--product-accent); }
body[data-product] .eyebrow { color: var(--product-accent); }
body[data-product] .eyebrow::before,
body[data-product] .eyebrow-center::after { background: var(--product-accent); }
body[data-product] .breadcrumb .current { color: var(--product-accent); }
body[data-product] .hl { color: var(--product-accent); }
/* Product hero badge + logo block (top-right of page-head) */
.product-hero {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: center;
}
.product-hero-text { min-width: 0; }
.product-logo-block {
display: flex; flex-direction: column; align-items: center; gap: 16px;
padding: 24px 32px;
background: var(--product-tint);
border: 1px solid var(--product-accent);
border-radius: 8px;
min-width: 220px;
}
.product-logo-block img { max-width: 200px; height: auto; display: block; }
.product-badge {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--product-accent);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800;
font-size: 16px;
letter-spacing: 0.02em;
box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}
@media (max-width: 900px) {
.product-hero { grid-template-columns: 1fr; }
.product-logo-block { flex-direction: row; justify-content: flex-start; }
}
/* Product feature cards using product accent */
body[data-product] .card .card-icon {
color: var(--product-accent);
border-color: rgba(255,255,255,0.06);
background: var(--product-tint);
}
body[data-product] .card.accent {
background: linear-gradient(180deg, var(--product-tint), transparent 70%);
border-color: var(--product-accent);
}
body[data-product] .card:hover { border-color: var(--product-accent); }
/* Product CTA button + outline override — applies to in-content buttons only.
The topbar always shows corporate TAN-blue regardless of which product page
you're on, so the brand reads consistently across the site. */
body[data-product] .btn-primary {
background: var(--product-accent);
color: #fff;
border-color: var(--product-accent);
}
body[data-product] .btn-primary:hover { filter: brightness(1.08); }
body[data-product] .btn-outline { color: var(--product-accent); border-color: var(--product-accent); }
body[data-product] .btn-outline:hover { background: var(--product-tint); }
/* Topbar always stays corporate TAN blue — overrides the per-product cascade. */
body[data-product] .topbar .btn-primary {
background: var(--tan-blue);
color: var(--tan-black);
border-color: var(--tan-blue);
}
body[data-product] .topbar .btn-primary:hover {
background: var(--tan-blue-hover);
border-color: var(--tan-blue-hover);
}
/* Key Benefits row (mirroring presentation slides) */
.key-benefits {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
@media (max-width: 900px) { .key-benefits { grid-template-columns: 1fr; } }
.benefit {
border: 1px solid var(--border-1);
background: var(--product-tint);
border-radius: 10px;
padding: 24px;
display: flex; gap: 16px; align-items: flex-start;
}
.benefit-icon {
width: 48px; height: 48px;
flex-shrink: 0;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1.5px solid var(--product-accent);
color: var(--product-accent);
display: inline-flex; align-items: center; justify-content: center;
}
.benefit-text h4 { font-size: 15px; margin: 0 0 6px; color: var(--text-0); }
.benefit-text p { font-size: 14px; margin: 0; color: var(--text-2); line-height: var(--lh-normal); }
/* -----------------------------
Services-page verticals — PPTX-style: white background with a shaded
product-coloured corner that fades diagonally to white. Mirrors slides 8–11.
----------------------------- */
.svc-vert {
--v-accent: var(--tan-blue);
--v-tint: rgba(0,185,245,0.10);
--v-bg: linear-gradient(135deg, #EFF8FE 0%, #F7FCFF 37%, #FFFFFF 100%);
position: relative;
}
.svc-vert[data-vertical="erp"] {
--v-accent: var(--logica-erp);
--v-tint: rgba(106,168,79,0.10);
--v-bg: linear-gradient(135deg, #F0FFF8 0%, #F0FFF8 14%, #FFFFFF 100%);
}
.svc-vert[data-vertical="visi"] {
--v-accent: var(--logica-visi);
--v-tint: rgba(234,89,82,0.10);
--v-bg: linear-gradient(45deg, #FFF7F6 0%, #FFF8F7 20%, #FFFFFF 100%);
}
.svc-vert[data-vertical="spatia"] {
--v-accent: var(--logica-spatia);
--v-tint: rgba(255,192,0,0.10);
--v-bg: linear-gradient(45deg, #FFFFE4 0%, #FFFFF2 50%, #FFFFFF 100%);
}
.svc-vert[data-vertical="flow"] {
--v-accent: var(--logica-flow);
--v-tint: rgba(0,135,201,0.10);
--v-bg: linear-gradient(135deg, #EFF8FE 0%, #F7FCFF 37%, #FFFFFF 100%);
}
/* The bg-1 / bordered classes were applied on these sections for the old dark
look — override their dark background and re-tint borders with the accent. */
.svc-vert,
.svc-vert.bg-1,
section.bg-1.svc-vert {
background: var(--v-bg);
border-top-color: rgba(0,0,0,0.06);
border-bottom-color: rgba(0,0,0,0.06);
}
/* Left edge accent stripe — mirrors the presentation's coloured tile column */
.svc-vert::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0;
width: 4px;
background: var(--v-accent);
opacity: 0.95;
z-index: 1;
}
/* Text on the now-light surface flips to dark for legibility */
.svc-vert h2,
.svc-vert .split-text h2,
.svc-vert .split-text h3,
.svc-vert .feature-list .ft b { color: var(--tan-black); }
.svc-vert .split-text p,
.svc-vert .feature-list .ft { color: rgba(5,8,15,0.72); }
.svc-vert .eyebrow { color: var(--v-accent); }
.svc-vert .eyebrow::before,
.svc-vert .eyebrow-center::after { background: var(--v-accent); }
.svc-vert h2 .hl { color: var(--v-accent); }
.svc-vert .feature-list li { border-bottom-color: rgba(0,0,0,0.08); }
.svc-vert .feature-list .fi {
background: #fff;
border: 1px solid var(--v-accent);
color: var(--v-accent);
}
.svc-vert .btn-outline {
color: var(--v-accent);
border-color: var(--v-accent);
background: rgba(255,255,255,0.6);
}
.svc-vert .btn-outline:hover { background: var(--v-accent); color: #fff; }
/* Illustrations on the services page are light-themed themselves, so the
wrapper is fully transparent. The product logo sits ABOVE the illustration
(not overlaid) — flow layout, so it never collides with the SVG content. */
.svc-vert .illus-frame {
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-5);
}
.svc-vert .svc-vert-logo {
position: static;
display: block;
height: 64px;
width: auto;
max-width: 280px;
object-fit: contain;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: var(--r-2);
padding: 12px 22px;
box-shadow: 0 4px 14px rgba(15, 21, 37, 0.08);
}
.svc-vert .illus-frame > img:not(.svc-vert-logo) {
width: 100%;
height: auto;
}
/* Small product chip above the eyebrow */
.vert-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
border-radius: 999px;
background: #ffffff;
border: 1px solid var(--v-accent);
color: var(--v-accent);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 16px;
}
.vert-chip .vert-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--v-accent);
display: inline-block;
}
.page-head p {
max-width: 820px;
font-size: var(--fs-lede);
color: var(--text-2);
line-height: var(--lh-normal);
}
.breadcrumb {
display: flex; align-items: center; gap: var(--sp-2);
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--text-3);
margin-bottom: var(--sp-8);
}
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--tan-blue); }
.breadcrumb span { color: var(--text-4); }
.breadcrumb .current { color: var(--text-1); }
/* -----------------------------
Section base
----------------------------- */
section { padding: clamp(96px, 12vw, 180px) 0; position: relative; }
section.tight { padding: clamp(64px, 8vw, 110px) 0; }
/* Section rhythm on the light body — alternate flat-white with a faint tint */
section.bg-1 { background: var(--bg-1); }
section.bg-2 { background: var(--bg-2); }
section.bordered { border-top: 1px solid var(--border-1); }
section.bordered-b { border-bottom: 1px solid var(--border-1); }
/* Subtle in-section geometric decorations.
Every light-body section gets a faint shape anchored at a non-content corner.
Sections cycle through different shape/positions for visual variety. */
main > section:not(.cta-strip):not(.page-head):not(.hero):not(.svc-vert):not(.bg-1.svc-vert) {
position: relative;
overflow: hidden;
}
main > section:not(.cta-strip):not(.page-head):not(.hero):not(.svc-vert):not(.bg-1.svc-vert)::before,
main > section:not(.cta-strip):not(.page-head):not(.hero):not(.svc-vert):not(.bg-1.svc-vert)::after {
content: "";
position: absolute;
width: 320px;
height: 320px;
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
z-index: 0;
opacity: 1;
}
/* Default: ::before at bottom-left, ::after at top-right — concentric + triangle + dotted constellation */
main > section:not(.cta-strip):not(.page-head):not(.hero):not(.svc-vert):not(.bg-1.svc-vert)::before {
bottom: 24px; left: 24px;
background-image: url("data:image/svg+xml;utf8,");
}
main > section:not(.cta-strip):not(.page-head):not(.hero):not(.svc-vert):not(.bg-1.svc-vert)::after {
top: 24px; right: 24px;
background-image: url("data:image/svg+xml;utf8,");
}
/* Variant: every 2nd section — triangle TL, dashed dotted ring TR, dot cluster BL, oblong card BR */
main > section:nth-of-type(even):not(.cta-strip):not(.page-head):not(.hero):not(.svc-vert):not(.bg-1.svc-vert)::before {
bottom: auto; left: 24px;
top: 24px;
background-image: url("data:image/svg+xml;utf8,");
}
main > section:nth-of-type(even):not(.cta-strip):not(.page-head):not(.hero):not(.svc-vert):not(.bg-1.svc-vert)::after {
top: auto; right: 24px;
bottom: 24px;
background-image: url("data:image/svg+xml;utf8,");
}
/* Variant: every 3rd section — adds a hexagon outline + radial spokes for additional variety */
main > section:nth-of-type(3n):not(.cta-strip):not(.page-head):not(.hero):not(.svc-vert):not(.bg-1.svc-vert)::before {
background-image: url("data:image/svg+xml;utf8,");
}
main > section:nth-of-type(3n):not(.cta-strip):not(.page-head):not(.hero):not(.svc-vert):not(.bg-1.svc-vert)::after {
background-image: url("data:image/svg+xml;utf8,");
}
/* On very narrow viewports, hide the in-section shapes to avoid clutter. */
@media (max-width: 900px) {
main > section:not(.cta-strip):not(.page-head):not(.hero):not(.svc-vert):not(.bg-1.svc-vert)::before,
main > section:not(.cta-strip):not(.page-head):not(.hero):not(.svc-vert):not(.bg-1.svc-vert)::after {
display: none;
}
}
/* Section content (.container etc.) must stay above the decorative layer. */
main > section > .container,
main > section > .container-wide,
main > section > .container-narrow,
main > section > .container-text { position: relative; z-index: 1; }
/* -----------------------------
Grids
----------------------------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
/* -----------------------------
Cards
----------------------------- */
.card {
background: #ffffff;
border: 1px solid var(--border-1);
border-radius: var(--r-2);
padding: var(--sp-8);
transition: border-color .25s ease, transform .25s ease, background .25s ease, box-shadow .25s ease;
position: relative;
overflow: hidden;
box-shadow: 0 1px 0 rgba(15, 21, 37, 0.04), 0 4px 16px rgba(15, 21, 37, 0.04);
}
.card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--tan-blue), transparent);
opacity: 0;
transition: opacity .25s ease;
}
.card:hover {
border-color: var(--tan-blue);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 185, 245, 0.12), 0 2px 8px rgba(15, 21, 37, 0.06);
}
.card:hover::before { opacity: 0.6; }
.card-link { color: inherit; text-decoration: none; display: block; }
.card-link:hover { color: inherit; }
.card-icon {
width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
background: rgba(0,185,245,0.08);
border: 1px solid rgba(0,185,245,0.28);
color: var(--tan-blue);
border-radius: var(--r-1);
margin-bottom: var(--sp-5);
}
.card-icon svg { width: 24px; height: 24px; }
.card h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-3); font-weight: 700; }
.card p { color: var(--text-2); font-size: var(--fs-body); margin-bottom: var(--sp-4); line-height: var(--lh-normal); }
.card-meta {
display: flex;
gap: var(--sp-3);
align-items: center;
font-family: var(--font-mono);
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: var(--ls-caps);
color: var(--text-3);
margin-top: var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px solid var(--border-1);
font-weight: 500;
}
.card-arrow {
position: absolute;
top: var(--sp-6); right: var(--sp-6);
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
color: var(--text-3);
border: 1px solid var(--border-1);
border-radius: var(--r-1);
transition: color .2s ease, transform .2s ease, border-color .2s ease, background .2s ease;
}
.card:hover .card-arrow {
color: var(--tan-blue);
border-color: var(--tan-blue);
background: rgba(0,185,245,0.08);
transform: translate(3px, -3px);
}
.card.accent {
background: linear-gradient(180deg, rgba(0,185,245,0.08), rgba(0,185,245,0.02));
border-color: rgba(0,185,245,0.35);
}
/* Card variant — left accent stripe; product-aware via --accent-stripe */
.card.with-stripe {
padding-left: calc(var(--sp-8) + 6px);
}
.card.with-stripe::after {
content: "";
position: absolute;
top: 16px; bottom: 16px;
left: 0;
width: 4px;
border-radius: 0 4px 4px 0;
background: var(--accent-stripe, var(--tan-blue));
}
/* Card variant — gradient border (uses pseudo bg + mask trick) */
.card.gradient-border {
border: 0;
background:
linear-gradient(#ffffff, #ffffff) padding-box,
linear-gradient(135deg, rgba(0,185,245,0.45), rgba(30,111,191,0.05) 55%, rgba(0,185,245,0.25)) border-box;
border: 1px solid transparent;
box-shadow: var(--shadow-sm);
}
.card.gradient-border:hover {
background:
linear-gradient(#ffffff, #ffffff) padding-box,
linear-gradient(135deg, rgba(0,185,245,0.85), rgba(30,111,191,0.20) 55%, rgba(0,185,245,0.55)) border-box;
box-shadow: var(--shadow-glow-blue);
}
/* Card variant — featured (larger, stronger shadow) */
.card.feature {
padding: var(--sp-12);
box-shadow: var(--shadow-lg);
}
.card.feature h3 { font-size: var(--fs-h3); }
/* Card skeleton — shows a loading state during async fetches */
.card.is-skeleton {
pointer-events: none;
}
.card.is-skeleton > * { visibility: hidden; }
.card.is-skeleton::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg,
transparent 0%,
rgba(15, 21, 37, 0.06) 50%,
transparent 100%
),
var(--bg-2);
background-size: 220% 100%;
animation: skeleton-shimmer 1400ms linear infinite;
opacity: 1;
height: 100%;
}
@keyframes skeleton-shimmer {
0% { background-position: 220% 0; }
100% { background-position: -220% 0; }
}
/* Card with mini product mockup (used on logica ecosystem cards) */
.card .card-mock {
position: relative;
margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-5);
margin-top: calc(var(--sp-8) * -1);
padding: var(--sp-4) var(--sp-4) 0;
background: linear-gradient(180deg, var(--bg-2), transparent);
border-bottom: 1px solid var(--border-1);
aspect-ratio: 16 / 9;
overflow: hidden;
}
.card .card-mock::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 100% 0%, rgba(0,185,245,0.10), transparent 50%);
}
.card .card-mock img,
.card .card-mock svg {
width: 100%;
height: 100%;
object-fit: contain;
}
/* -----------------------------
Stat block (big-number metrics)
----------------------------- */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--sp-8) var(--sp-10);
align-items: end;
}
.stat {
display: flex;
flex-direction: column;
gap: var(--sp-2);
margin: 0;
border-top: 1px solid var(--border-1);
padding-top: var(--sp-5);
}
.stat .stat-num {
font-family: var(--font-display);
font-weight: 800;
letter-spacing: var(--ls-display);
line-height: 0.95;
font-size: var(--fs-display-2);
color: var(--text-0);
font-variant-numeric: tabular-nums;
background: linear-gradient(180deg, var(--text-0) 0%, var(--text-2) 110%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat .stat-num .stat-suffix {
-webkit-text-fill-color: var(--tan-blue);
background: none;
font-size: 0.5em;
margin-left: 4px;
letter-spacing: 0;
vertical-align: top;
}
.stat .stat-label {
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: var(--ls-caps);
font-size: 13px;
color: var(--text-3);
}
.stat .stat-detail {
color: var(--text-2);
font-size: var(--fs-body);
margin: 0;
max-width: 32ch;
}
/* On dark surfaces, gradient must blend toward light tokens */
.cta-strip .stat .stat-num,
.hero .stat .stat-num,
.page-head .stat .stat-num {
background: linear-gradient(180deg, #ffffff 0%, var(--tan-blue-soft) 110%);
-webkit-background-clip: text;
background-clip: text;
}
/* -----------------------------
Service vertical row (services overview table)
----------------------------- */
.vertical-row {
display: grid;
grid-template-columns: 240px 1fr 1fr 1fr;
gap: var(--sp-8);
padding: var(--sp-10);
border-top: 1px solid var(--border-1);
align-items: center;
transition: background .2s ease;
}
.lifecycle-logo {
height: 56px;
width: auto;
max-width: 180px;
object-fit: contain;
display: block;
}
/* Product logo image replacing the coloured-text badge on Logica cards */
.logica-badge-img {
display: block;
height: 52px;
width: auto;
max-width: 180px;
object-fit: contain;
margin-bottom: var(--sp-5);
}
/* Product logo image replacing "Logica X" text badge on case-study cards */
.case-product-logo {
display: inline-block;
height: 28px;
width: auto;
max-width: 120px;
object-fit: contain;
vertical-align: middle;
margin-bottom: 8px;
}
.vertical-row:last-child { border-bottom: 1px solid var(--border-1); }
.vertical-row:hover { background: var(--bg-1); }
.vertical-row .vh3 {
font-size: var(--fs-h4);
font-weight: 700;
color: var(--text-0);
margin: 0 0 var(--sp-2);
}
.vertical-row .vlist {
list-style: none; padding: 0; margin: 0;
color: var(--text-2);
font-size: var(--fs-body);
}
.vertical-row .vlist li {
position: relative;
padding-left: 18px;
margin-bottom: 8px;
line-height: 1.55;
}
.vertical-row .vlist li::before {
content: "";
position: absolute;
left: 0; top: 11px;
width: 8px; height: 1px;
background: var(--tan-blue);
}
.vertical-cap {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--ls-caps-lg);
text-transform: uppercase;
color: var(--text-3);
margin-bottom: var(--sp-2);
display: block;
font-weight: 500;
}
/* -----------------------------
Logica ecosystem cards
----------------------------- */
.logica-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5);
}
.logica-card {
background: #ffffff;
border: 1px solid var(--border-1);
padding: var(--sp-8);
border-radius: var(--r-2);
position: relative;
overflow: hidden;
transition: all .28s ease;
text-decoration: none;
color: inherit;
box-shadow: 0 1px 0 rgba(15, 21, 37, 0.04), 0 4px 16px rgba(15, 21, 37, 0.04);
}
.logica-card:hover {
border-color: var(--tan-blue);
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(0, 185, 245, 0.14), 0 2px 8px rgba(15, 21, 37, 0.06);
}
.logica-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 100% 0%, rgba(0,185,245,0.18), transparent 60%);
opacity: 0;
transition: opacity .28s ease;
pointer-events: none;
}
.logica-card:hover::before { opacity: 1; }
.logica-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px; height: 64px;
border-radius: 50%;
margin-bottom: var(--sp-5);
font-family: var(--font-mono);
font-weight: 700;
font-size: 13px;
color: #fff;
letter-spacing: 0.04em;
background: linear-gradient(135deg, var(--tan-blue-deep), var(--tan-blue-dim));
border: 1px solid rgba(255,255,255,0.12);
}
.logica-card h3 {
font-size: var(--fs-h3);
margin-bottom: var(--sp-2);
font-weight: 700;
}
.logica-card .lc-sub {
font-family: var(--font-mono);
font-size: var(--fs-micro);
color: var(--tan-blue);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
margin-bottom: var(--sp-4);
font-weight: 500;
}
.logica-card p {
font-size: var(--fs-body);
color: var(--text-2);
margin-bottom: var(--sp-5);
line-height: var(--lh-normal);
}
.logica-card .lc-cta {
font-family: var(--font-mono);
font-size: var(--fs-caption);
color: var(--tan-blue);
display: inline-flex;
align-items: center;
gap: 6px;
letter-spacing: var(--ls-caps);
text-transform: uppercase;
font-weight: 500;
}
/* Product-coloured cards — white base with a soft product-tinted glow in the
top-right corner and product-coloured border + accents. */
.logica-card[data-product] {
background: #ffffff;
border: 1px solid var(--border-1);
}
.logica-card[data-product]::before {
background: radial-gradient(circle at 100% 0%, var(--product-glow, rgba(0,185,245,0.20)), transparent 55%);
opacity: 1;
}
.logica-card[data-product="erp"] { --product-glow: rgba(106,168,79,0.20); --product-stripe: var(--logica-erp); }
.logica-card[data-product="spatia"] { --product-glow: rgba(255,192,0,0.20); --product-stripe: var(--logica-spatia-deep); }
.logica-card[data-product="flow"] { --product-glow: rgba(0,135,201,0.22); --product-stripe: var(--logica-flow); }
.logica-card[data-product="visi"] { --product-glow: rgba(234,89,82,0.20); --product-stripe: var(--logica-visi); }
/* -----------------------------
Logica family cards (logica.html grid-2) — services-style layout with
product-coloured left stripe, larger body text, and an icon-led feature list.
----------------------------- */
.logica-fam-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--sp-5);
padding: var(--sp-10);
padding-left: calc(var(--sp-10) + 8px);
background: var(--bg-elev);
border: 1px solid var(--border-1);
border-radius: var(--r-3);
color: inherit;
text-decoration: none;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition:
transform var(--dur-base) var(--ease-out-quart),
border-color var(--dur-base) var(--ease-out-quart),
box-shadow var(--dur-base) var(--ease-out-quart);
}
.logica-fam-card .lf-stripe {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 5px;
background: var(--lf-accent, var(--tan-blue));
transform-origin: top center;
transform: scaleY(1);
}
.logica-fam-card[data-product="erp"] { --lf-accent: var(--logica-erp); --lf-tint: rgba(106,168,79,0.05); }
.logica-fam-card[data-product="spatia"] { --lf-accent: var(--logica-spatia-deep); --lf-tint: rgba(255,169,0,0.06); }
.logica-fam-card[data-product="flow"] { --lf-accent: var(--logica-flow); --lf-tint: rgba(0,135,201,0.05); }
.logica-fam-card[data-product="visi"] { --lf-accent: var(--logica-visi); --lf-tint: rgba(234,89,82,0.05); }
.logica-fam-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(420px 220px at 100% 0%, var(--lf-tint), transparent 60%);
opacity: 0;
transition: opacity var(--dur-base) var(--ease-out-quart);
pointer-events: none;
}
.logica-fam-card:hover {
transform: translateY(-3px);
border-color: var(--lf-accent);
box-shadow:
0 18px 42px color-mix(in srgb, var(--lf-accent) 16%, transparent),
0 2px 8px rgba(15, 21, 37, 0.06);
}
.logica-fam-card:hover::before { opacity: 1; }
.logica-fam-card .logica-badge-img { height: 56px; width: auto; }
.logica-fam-card .lf-lede {
font-size: var(--fs-body-lg);
line-height: var(--lh-normal);
color: var(--text-2);
margin: 0;
}
.logica-fam-card .lf-lede b { color: var(--text-0); font-weight: 700; }
.logica-fam-card .lf-feats {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-3) var(--sp-5);
}
.logica-fam-card .lf-feats li {
display: flex;
align-items: center;
gap: var(--sp-3);
font-size: var(--fs-body);
color: var(--text-1);
line-height: var(--lh-normal);
font-weight: 500;
margin: 0;
}
.logica-fam-card .lf-tick {
flex: 0 0 22px;
width: 22px; height: 22px;
border-radius: 50%;
padding: 4px;
background: color-mix(in srgb, var(--lf-accent) 18%, transparent);
color: var(--lf-accent);
}
.logica-fam-card .lf-cta {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding-top: var(--sp-4);
border-top: 1px solid var(--border-1);
font-family: var(--font-mono);
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: var(--ls-caps);
color: var(--lf-accent);
font-weight: 600;
transition: transform var(--dur-base) var(--ease-out-quart);
}
.logica-fam-card:hover .lf-cta { transform: translateX(2px); }
@media (max-width: 640px) {
.logica-fam-card { padding: var(--sp-6); padding-left: calc(var(--sp-6) + 8px); }
.logica-fam-card .lf-feats { grid-template-columns: 1fr; }
}
/* Product cards — top tab stripe (in product colour) + bottom faint grid overlay
to feel like a UI panel rather than a content card. */
.logica-card[data-product]::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--product-stripe, var(--tan-blue)) 20%, var(--product-stripe, var(--tan-blue)) 80%, transparent);
opacity: 0.55;
transform: scaleX(0.35);
transform-origin: left center;
transition:
transform var(--dur-slow) var(--ease-out-expo),
opacity var(--dur-slow) var(--ease-out-expo);
pointer-events: none;
}
.logica-card[data-product]:hover::after { transform: scaleX(1); opacity: 1; }
.logica-card[data-product]:hover {
border-color: var(--product-stripe, var(--tan-blue));
box-shadow:
0 18px 40px color-mix(in srgb, var(--product-stripe, var(--tan-blue)) 18%, transparent),
0 2px 8px rgba(15, 21, 37, 0.06);
}
/* Product-tinted CTA arrow on hover */
.logica-card[data-product]:hover .lc-cta { color: var(--product-stripe, var(--tan-blue)); }
.logica-card[data-product="erp"] .lc-sub, .logica-card[data-product="erp"] .lc-cta { color: var(--logica-erp); }
.logica-card[data-product="spatia"] .lc-sub, .logica-card[data-product="spatia"] .lc-cta { color: var(--logica-spatia-deep); }
.logica-card[data-product="flow"] .lc-sub, .logica-card[data-product="flow"] .lc-cta { color: var(--logica-flow); }
.logica-card[data-product="visi"] .lc-sub, .logica-card[data-product="visi"] .lc-cta { color: var(--logica-visi); }
.logica-card[data-product]:hover {
transform: translateY(-3px);
}
.logica-card[data-product="erp"]:hover { border-color: var(--logica-erp); box-shadow: 0 14px 32px rgba(106,168,79,0.18); }
.logica-card[data-product="spatia"]:hover { border-color: var(--logica-spatia); box-shadow: 0 14px 32px rgba(255,169,0,0.20); }
.logica-card[data-product="flow"]:hover { border-color: var(--logica-flow); box-shadow: 0 14px 32px rgba(0,135,201,0.18); }
.logica-card[data-product="visi"]:hover { border-color: var(--logica-visi); box-shadow: 0 14px 32px rgba(234,89,82,0.18); }
/* Per-product badge fills (override the generic blue gradient) */
.logica-badge.erp { background: linear-gradient(135deg, var(--logica-erp-soft), var(--logica-erp)); }
.logica-badge.spatia { background: linear-gradient(135deg, var(--logica-spatia), var(--logica-spatia-deep)); color: var(--tan-black); }
.logica-badge.flow { background: linear-gradient(135deg, #2AA2DD, var(--logica-flow)); }
.logica-badge.visi { background: linear-gradient(135deg, var(--logica-visi), #D6473F); }
/* -----------------------------
Journey timeline
----------------------------- */
.timeline { position: relative; padding: var(--sp-10) 0; }
.timeline-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--sp-5);
position: relative;
}
/* Connecting line — anchored to the grid (not the timeline container) so its
extent matches the dot row exactly. Insets equal half-a-cell so the line
begins at the first dot's centre and ends at the last dot's centre.
Vertical position aligns to the dot centre (top 90 + height/2 = 97). */
.timeline-grid::before {
content: "";
position: absolute;
top: 97px;
left: calc((100% - 4 * var(--sp-5)) / 10);
right: calc((100% - 4 * var(--sp-5)) / 10);
height: 1px;
background: var(--border-3);
z-index: 0;
}
.timeline-node { position: relative; padding-top: 120px; }
.timeline-node::before {
content: "";
position: absolute;
top: 90px;
left: 50%;
transform: translateX(-50%);
width: 14px; height: 14px;
background: var(--bg-0);
border: 2px solid var(--tan-blue);
border-radius: 50%;
box-shadow: var(--glow-soft);
}
.timeline-node::after {
content: "";
position: absolute;
top: 95px;
left: 50%;
transform: translateX(-50%);
width: 4px; height: 4px;
background: var(--tan-blue);
border-radius: 50%;
}
.timeline-year {
position: absolute;
top: 12px;
left: 50%; transform: translateX(-50%);
font-family: var(--font-display);
font-size: 36px;
font-weight: 800;
color: var(--tan-blue);
letter-spacing: var(--ls-display);
}
.timeline-node h4 { font-size: var(--fs-title); margin-bottom: var(--sp-2); text-align: center; font-weight: 700; }
.timeline-node p { font-size: var(--fs-caption); color: var(--text-2); text-align: center; line-height: var(--lh-normal); }
/* ---------- Journey v2 — horizontal spine timeline ---------- */
.journey-v2 {
--jv-dot: 18px;
--jv-spine-y: 92px;
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--sp-6);
padding: var(--sp-8) 0 var(--sp-6);
}
.journey-v2 .jv-spine {
position: absolute;
left: calc((100% / 5) / 2);
right: calc((100% / 5) / 2);
/* Centre a 2px line on the 18px dot's vertical centre.
The dots live inside .jv-node which sits below .journey-v2's padding-top
(--sp-8 = 32px). The spine is absolutely positioned against .journey-v2
itself, so we must add the same padding offset to keep them aligned. */
top: calc(var(--sp-8) + var(--jv-spine-y) + var(--jv-dot) / 2 - 1px);
height: 2px;
background: linear-gradient(90deg, transparent, var(--border-3), var(--border-3) 96%, transparent);
border-radius: 1px;
overflow: hidden;
z-index: 0;
}
.journey-v2 .jv-dot { z-index: 2; }
.journey-v2 .jv-spine-fill {
display: block;
height: 100%;
width: 100%;
background: linear-gradient(90deg, var(--tan-blue-soft), var(--tan-blue) 80%, var(--tan-blue-deep));
transform-origin: left center;
transform: scaleX(0);
transition: transform var(--dur-cinematic) var(--ease-out-expo);
}
.journey-v2.in .jv-spine-fill { transform: scaleX(1); }
/* The spine is decorative — exempt it from the stagger fade so the line is
always visible at its final position (not shifted down 20px during reveal). */
.journey-v2.reveal.stagger > .jv-spine {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.journey-v2 .jv-node {
position: relative;
padding-top: calc(var(--jv-spine-y) + 36px);
text-align: center;
}
.journey-v2 .jv-year {
position: absolute;
top: 16px;
left: 0; right: 0;
font-family: var(--font-display);
font-size: clamp(34px, 3.4vw, 44px);
font-weight: 800;
letter-spacing: var(--ls-display);
color: var(--text-1);
line-height: 1;
}
.journey-v2 .jv-dot {
position: absolute;
top: var(--jv-spine-y);
left: 50%;
transform: translateX(-50%);
width: var(--jv-dot);
height: var(--jv-dot);
border-radius: 50%;
background: var(--bg-elev);
border: 2px solid var(--tan-blue);
box-shadow: 0 0 0 4px rgba(0, 185, 245, 0.10);
z-index: 2;
transition: transform var(--dur-base) var(--ease-spring);
}
.journey-v2 .jv-dot::before {
content: "";
position: absolute;
inset: 4px;
background: var(--tan-blue);
border-radius: 50%;
}
.journey-v2 .jv-node:hover .jv-dot { transform: translateX(-50%) scale(1.18); }
.journey-v2 .jv-now .jv-dot::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1px solid var(--tan-blue);
animation: jv-ping 1.8s var(--ease-out-expo) infinite;
}
.journey-v2 .jv-now-pip {
display: inline-block;
width: 6px; height: 6px;
background: var(--tan-blue);
border-radius: 50%;
margin-left: 8px;
vertical-align: middle;
box-shadow: 0 0 0 4px rgba(0,185,245,0.18);
}
@keyframes jv-ping {
0% { transform: scale(0.85); opacity: 0.9; }
100% { transform: scale(1.7); opacity: 0; }
}
.journey-v2 .jv-card {
border: 1px solid var(--border-1);
border-radius: var(--r-2);
background: var(--bg-elev);
padding: var(--sp-6);
text-align: center;
box-shadow: var(--shadow-sm);
transition:
transform var(--dur-base) var(--ease-out-quart),
border-color var(--dur-base) var(--ease-out-quart),
box-shadow var(--dur-base) var(--ease-out-quart);
}
.journey-v2 .jv-node:hover .jv-card {
transform: translateY(-4px);
border-color: var(--tan-blue);
box-shadow: var(--shadow-md);
}
.journey-v2 .jv-card h4 {
font-size: var(--fs-title);
margin-bottom: var(--sp-2);
font-weight: 700;
}
.journey-v2 .jv-card p {
font-size: var(--fs-caption);
color: var(--text-2);
line-height: var(--lh-normal);
margin: 0;
}
/* -----------------------------
Stat row
----------------------------- */
.stat-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid var(--border-1);
background: var(--bg-1);
}
.stat-row .stat {
padding: var(--sp-10);
border-right: 1px solid var(--border-1);
}
.stat-row .stat:last-child { border-right: none; }
.stat .num {
font-size: clamp(40px, 5vw, 64px);
font-weight: 800;
color: var(--tan-blue);
letter-spacing: var(--ls-display);
margin-bottom: var(--sp-3);
line-height: 1;
font-variant-numeric: tabular-nums lining-nums;
}
.stat .lbl { color: var(--text-1); font-size: var(--fs-title); font-weight: 600; margin-bottom: var(--sp-2); }
.stat .sub { color: var(--text-3); font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
/* -----------------------------
Client logos — horizontal marquee, 4 tiles visible at once
----------------------------- */
.clients-marquee {
--tile-w: clamp(180px, 22vw, 260px);
--tile-gap: 20px;
position: relative;
overflow: hidden;
padding: 8px 0;
/* Fade out the edges so logos appear to drift in/out rather than clip */
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.clients-track {
display: flex;
gap: var(--tile-gap);
width: max-content;
animation: clients-scroll 38s linear infinite;
}
.clients-marquee:hover .clients-track { animation-play-state: paused; }
.client-tile {
flex: 0 0 var(--tile-w);
height: 120px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid var(--border-1);
border-radius: var(--r-2);
padding: 18px 28px;
box-shadow: 0 1px 0 rgba(15, 21, 37, 0.04), 0 4px 14px rgba(15, 21, 37, 0.05);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.client-tile:hover {
transform: translateY(-2px);
border-color: var(--tan-blue);
box-shadow: 0 8px 22px rgba(0, 185, 245, 0.14);
}
.client-tile img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
@keyframes clients-scroll {
from { transform: translateX(0); }
to { transform: translateX(calc(-50% - var(--tile-gap) / 2)); }
}
@media (prefers-reduced-motion: reduce) {
.clients-track { animation: none; }
}
/* Client logo inside case-study engagement-summary sidebar — white tile so the
brand logos (typically designed for white backgrounds) render correctly. */
.case-client-logo {
background: #ffffff;
border: 1px solid var(--border-1);
border-radius: var(--r-2);
padding: 14px 18px;
margin: 8px 0 10px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 0 rgba(15, 21, 37, 0.04), 0 4px 12px rgba(15, 21, 37, 0.06);
}
.case-client-logo img {
max-width: 100%;
max-height: 100%;
width: auto;
object-fit: contain;
}
/* -----------------------------
Testimonials
----------------------------- */
.testimonial { display: flex; flex-direction: column; gap: 16px; position: relative; }
.testimonial-quote { color: var(--tan-blue); opacity: 0.55; flex-shrink: 0; }
.testimonial blockquote {
margin: 0;
font-size: 17px;
line-height: var(--lh-relaxed);
color: var(--text-1);
font-weight: 400;
}
.testimonial figcaption {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--border-1);
display: flex; flex-direction: column; gap: 4px;
}
.testimonial-name { color: var(--text-0); font-weight: 600; font-size: 14px; }
.testimonial-role {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tan-blue);
}
/* -----------------------------
Interactive Logica orbit
----------------------------- */
.orbit-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 48px;
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
@media (max-width: 960px) {
.orbit-grid { grid-template-columns: 1fr; }
}
.orbit-frame {
position: relative;
border: 1px solid var(--border-1);
background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
padding: 24px;
border-radius: 4px;
}
.orbit-frame svg { display: block; width: 100%; height: auto; }
.orbit-rings circle { transform-origin: 350px 350px; transform-box: fill-box; }
@keyframes orb-spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.orbit-frame .orbit-rings circle:nth-child(1) { animation: orb-spin 90s linear infinite; }
.orbit-frame .orbit-rings circle:nth-child(2) { animation: orb-spin 60s linear infinite reverse; }
.orbit-frame .orbit-rings circle:nth-child(3) { animation: orb-spin 45s linear infinite; }
@media (prefers-reduced-motion: reduce) {
.orbit-frame .orbit-rings circle { animation: none; }
}
.product-node { cursor: pointer; transition: opacity .25s ease; outline: none; }
.product-node:focus-visible { outline: none; }
.product-node:focus-visible .product-halo {
stroke-opacity: 1;
stroke-width: 2.5;
}
.orbit-frame[data-hover] .product-node { opacity: 0.35; }
.orbit-frame[data-hover] .product-node.is-active { opacity: 1; }
.product-node.is-active .product-halo {
stroke-opacity: 1;
stroke-width: 2.5;
animation: halo-pulse 1.4s ease-out infinite;
}
@keyframes halo-pulse {
0% { stroke-opacity: 1; r: 58; }
100% { stroke-opacity: 0; r: 80; }
}
@media (prefers-reduced-motion: reduce) {
.product-node.is-active .product-halo { animation: none; }
}
.orbit-panel {
border: 1px solid var(--border-1);
background: var(--bg-1);
padding: 28px;
border-radius: 4px;
min-height: 280px;
}
.orbit-panel h3 { margin: 8px 0 12px; font-size: 22px; }
.orbit-panel p { color: var(--text-2); margin-bottom: 16px; }
.orbit-legend { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 10px; }
.orbit-legend li {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-2);
display: flex; align-items: center; gap: 10px;
}
.orbit-legend .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--tan-blue); flex-shrink: 0;
}
/* -----------------------------
Language switcher (EN / ID)
----------------------------- */
.lang-switch {
display: inline-flex;
border: 1px solid var(--border-2);
border-radius: var(--r-1);
overflow: hidden;
background: rgba(255, 255, 255, 0.02);
}
.lang-btn {
background: transparent;
border: 0;
color: var(--text-3);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
padding: 7px 11px;
cursor: pointer;
transition: background .2s ease, color .2s ease;
}
.lang-btn + .lang-btn { border-left: 1px solid var(--border-2); }
.lang-btn:hover { color: var(--text-0); }
.lang-btn[aria-pressed="true"] { background: var(--tan-blue); color: var(--tan-black); }
/* -----------------------------
Trust strip
----------------------------- */
.trust-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
margin-top: 32px;
padding-top: 28px;
border-top: 1px solid var(--border-1);
}
.trust-item {
display: flex; gap: 12px;
align-items: flex-start;
font-size: 12px;
font-family: var(--font-mono);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-2);
line-height: 1.5;
}
.trust-item svg { color: var(--tan-blue); flex-shrink: 0; }
.trust-item em {
font-style: normal; font-weight: 400; color: var(--text-3); text-transform: none; letter-spacing: 0;
font-family: var(--font-sans); font-size: 13px;
}
@media (max-width: 720px) {
.trust-strip { grid-template-columns: repeat(2, 1fr); }
}
/* ----- Credentials strip — placeholder badges for ISO / SOC / partner programs
(replace the SVG placeholders with real assets when supplied) ----- */
.cred-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: var(--sp-5);
padding: var(--sp-6) 0;
border-top: 1px solid var(--border-1);
border-bottom: 1px solid var(--border-1);
margin: var(--sp-10) 0 0;
}
.cred-tile {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--border-1);
border-radius: var(--r-2);
background: var(--bg-1);
color: var(--text-2);
transition: border-color var(--dur-base) var(--ease-out-quart), background var(--dur-base) var(--ease-out-quart);
}
.cred-tile:hover { border-color: var(--tan-blue); background: var(--bg-elev); }
.cred-tile .cred-mark {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(0,185,245,0.10);
color: var(--tan-blue);
display: flex; align-items: center; justify-content: center;
flex: 0 0 36px;
}
.cred-tile .cred-mark svg { width: 18px; height: 18px; }
.cred-tile .cred-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.cred-tile .cred-text strong {
font-size: 13.5px;
font-weight: 700;
color: var(--text-0);
letter-spacing: 0.005em;
}
.cred-tile .cred-text em {
font-style: normal;
font-size: 12px;
color: var(--text-3);
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: var(--ls-caps);
}
/* -----------------------------
Cal.com embed slot
----------------------------- */
.calendar-slot {
border: 1px dashed var(--border-2);
border-radius: 4px;
padding: 32px;
background: var(--bg-1);
text-align: center;
}
.calendar-slot iframe { width: 100%; min-height: 580px; border: 0; background: transparent; }
/* -----------------------------
Gated PDF download
----------------------------- */
.gated-resource {
border: 1px solid var(--border-1);
background: var(--bg-1);
padding: 32px;
border-radius: 4px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: center;
}
@media (max-width: 760px) {
.gated-resource { grid-template-columns: 1fr; }
}
.gated-resource form { display: flex; flex-direction: column; gap: 12px; }
.gated-resource input[type="email"], .gated-resource input[type="text"] {
width: 100%;
padding: 12px 14px;
background: var(--bg-2);
border: 1px solid var(--border-1);
color: var(--text-0);
font-family: var(--font-sans);
font-size: 14px;
border-radius: 4px;
}
.gated-resource input:focus-visible {
outline: 2px solid var(--tan-blue);
outline-offset: 2px;
}
.gated-resource .resource-status {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
margin-top: 6px;
}
/* -----------------------------
Pillars
----------------------------- */
.pillar {
display: grid;
grid-template-columns: 240px 1fr 1fr;
gap: var(--sp-8);
padding: var(--sp-8);
border-top: 1px solid var(--border-1);
}
.pillar:last-child { border-bottom: 1px solid var(--border-1); }
.pillar .pn {
font-family: var(--font-mono);
color: var(--tan-blue);
font-size: var(--fs-micro);
letter-spacing: var(--ls-caps-lg);
text-transform: uppercase;
font-weight: 500;
}
.pillar h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.pillar p { color: var(--text-2); font-size: var(--fs-body); line-height: var(--lh-normal); }
.pillar .ptag {
font-family: var(--font-mono);
font-size: var(--fs-micro);
color: var(--text-3);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
margin-top: var(--sp-1);
font-weight: 500;
}
/* -----------------------------
Compare (vendor vs partner)
----------------------------- */
.compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-6);
background: transparent;
border: 0;
}
.compare .col {
padding: var(--sp-12);
background: #ffffff;
border: 1px solid var(--border-1);
border-radius: var(--r-2);
box-shadow: 0 1px 0 rgba(15, 21, 37, 0.04), 0 4px 16px rgba(15, 21, 37, 0.04);
position: relative;
}
.compare .col + .col { border-left: 1px solid var(--border-1); }
.compare .col.partner {
background: linear-gradient(180deg, rgba(0,185,245,0.06), rgba(0,185,245,0.015));
border-color: rgba(0, 185, 245, 0.32);
box-shadow: 0 1px 0 rgba(15, 21, 37, 0.04), 0 8px 24px rgba(0, 185, 245, 0.08);
}
.compare h4 {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--ls-caps-lg);
text-transform: uppercase;
color: var(--text-3);
margin-bottom: var(--sp-3);
font-weight: 700;
}
.compare h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-5); }
.compare .col.partner h4 { color: var(--tan-blue); }
.compare ul { list-style: none; padding: 0; margin-top: var(--sp-5); }
.compare ul li {
padding: var(--sp-4) 0 var(--sp-4) 36px;
position: relative;
font-size: var(--fs-body);
color: var(--text-2);
line-height: var(--lh-normal);
border-top: 1px solid var(--border-1);
}
.compare ul li:first-child { border-top: 0; }
.compare ul li::before {
content: "✕";
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(15, 21, 37, 0.06);
color: var(--text-3);
font-size: 11px;
font-weight: 700;
}
.compare .col.partner ul li::before {
content: "✓";
background: var(--tan-blue);
color: var(--tan-black);
}
/* ----- Compare v2 — split infographic with vs. divider ----- */
.compare-v2 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--sp-8);
align-items: stretch;
position: relative;
}
.compare-v2 .cmp-col {
padding: var(--sp-12);
border-radius: var(--r-3);
background: var(--bg-elev);
border: 1px solid var(--border-1);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
.compare-v2 .cmp-against {
background: linear-gradient(180deg, rgba(15, 21, 37, 0.03), transparent 60%), var(--bg-1);
filter: saturate(0.7);
opacity: 0.92;
}
.compare-v2 .cmp-for {
background:
radial-gradient(420px 220px at 100% 0%, rgba(0,185,245,0.08), transparent 60%),
linear-gradient(180deg, rgba(0,185,245,0.04), transparent 70%),
var(--bg-elev);
border-color: rgba(0, 185, 245, 0.32);
box-shadow: var(--shadow-md), 0 0 0 1px rgba(0,185,245,0.06);
}
.compare-v2 .cmp-head h3 {
font-size: var(--fs-h3);
margin-top: var(--sp-3);
margin-bottom: 0;
}
.compare-v2 .cmp-against .cmp-head h3 { color: var(--text-2); }
.compare-v2 .cmp-for .cmp-head h3 { color: var(--text-0); }
.compare-v2 .cmp-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.compare-v2 .cmp-list li {
display: flex;
align-items: flex-start;
gap: var(--sp-4);
padding: var(--sp-4) 0;
border-top: 1px solid var(--border-1);
font-size: var(--fs-body);
color: var(--text-2);
line-height: var(--lh-normal);
}
.compare-v2 .cmp-list li:first-child { border-top: 0; }
.compare-v2 .cmp-mark {
flex: 0 0 28px;
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1px;
font-size: 18px;
font-weight: 700;
line-height: 1;
}
.compare-v2 .cmp-x {
background: rgba(110, 120, 140, 0.10);
color: var(--text-3);
border: 1px solid rgba(110, 120, 140, 0.22);
}
.compare-v2 .cmp-tick {
background: var(--tan-blue);
color: var(--tan-black);
border: 1px solid var(--tan-blue);
box-shadow: 0 0 0 4px rgba(0,185,245,0.10);
}
.compare-v2 .cmp-tick svg { display: block; }
/* "vs." centre divider */
.compare-v2 .cmp-vs {
align-self: center;
font-family: var(--font-display);
font-weight: 800;
font-style: italic;
font-size: clamp(24px, 2vw, 32px);
color: var(--text-3);
letter-spacing: -0.02em;
position: relative;
padding: var(--sp-4) var(--sp-3);
}
.compare-v2 .cmp-vs::before,
.compare-v2 .cmp-vs::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 1px;
background: linear-gradient(180deg, transparent, var(--border-2), transparent);
}
.compare-v2 .cmp-vs::before { top: 0; bottom: 60%; }
.compare-v2 .cmp-vs::after { top: 60%; bottom: 0; }
/* On reveal, animate ticks in */
.reveal.in .compare-v2 .cmp-tick {
animation: cmp-pop var(--dur-slow) var(--ease-spring) both;
}
.reveal.in .compare-v2 .cmp-list li:nth-child(1) .cmp-tick { animation-delay: 80ms; }
.reveal.in .compare-v2 .cmp-list li:nth-child(2) .cmp-tick { animation-delay: 160ms; }
.reveal.in .compare-v2 .cmp-list li:nth-child(3) .cmp-tick { animation-delay: 240ms; }
.reveal.in .compare-v2 .cmp-list li:nth-child(4) .cmp-tick { animation-delay: 320ms; }
.reveal.in .compare-v2 .cmp-list li:nth-child(5) .cmp-tick { animation-delay: 400ms; }
@keyframes cmp-pop {
0% { transform: scale(0.4); opacity: 0; }
60% { transform: scale(1.10); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
/* -----------------------------
Approach compare — vendor vs. strategic partner
----------------------------- */
.approach-compare {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--sp-8);
align-items: stretch;
}
.approach-compare .ac-col {
display: flex;
flex-direction: column;
gap: var(--sp-6);
padding: var(--sp-10);
border-radius: var(--r-3);
background: var(--bg-elev);
border: 1px solid var(--border-1);
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
}
.approach-compare .ac-vendor {
background: linear-gradient(180deg, rgba(15, 21, 37, 0.04), transparent 60%), var(--bg-1);
filter: saturate(0.7);
}
.approach-compare .ac-partner {
background:
radial-gradient(520px 220px at 100% 0%, rgba(0,185,245,0.10), transparent 60%),
linear-gradient(180deg, rgba(0,185,245,0.05), transparent 70%),
var(--bg-elev);
border-color: rgba(0, 185, 245, 0.32);
box-shadow: var(--shadow-md), 0 0 0 1px rgba(0,185,245,0.06);
}
.approach-compare .ac-partner::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--tan-blue), transparent);
opacity: 0.7;
}
.approach-compare .ac-head { display: flex; flex-direction: column; gap: var(--sp-3); }
.approach-compare .ac-tag {
align-self: flex-start;
font-family: var(--font-mono);
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: var(--ls-caps);
color: var(--text-3);
padding: 5px 11px;
border: 1px solid var(--border-2);
border-radius: var(--r-1);
background: transparent;
font-weight: 600;
}
.approach-compare .ac-partner .ac-tag { color: var(--tan-blue); border-color: rgba(0,185,245,0.35); background: rgba(0,185,245,0.06); }
.approach-compare .ac-head h3 {
font-size: var(--fs-h3);
margin: 0;
text-wrap: balance;
}
.approach-compare .ac-vendor .ac-head h3 { color: var(--text-2); }
.approach-compare .ac-partner .ac-head h3 { color: var(--text-0); }
/* Diagram block — SVG fills width, height adapts to aspect */
.approach-compare .ac-diagram {
margin: 0;
padding: var(--sp-5);
background: var(--bg-elev);
border: 1px solid var(--border-1);
border-radius: var(--r-2);
overflow: hidden;
position: relative;
}
.approach-compare .ac-vendor .ac-diagram {
background: linear-gradient(180deg, var(--bg-elev), var(--bg-1));
border-color: var(--border-2);
}
.approach-compare .ac-partner .ac-diagram {
background: linear-gradient(180deg, var(--bg-elev), rgba(0,185,245,0.03));
border-color: rgba(0,185,245,0.20);
box-shadow: 0 6px 18px rgba(0,185,245,0.06);
}
.approach-compare .ac-diagram svg { width: 100%; height: auto; display: block; }
/* Lists with marks */
.approach-compare .ac-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.approach-compare .ac-list li {
display: flex;
align-items: flex-start;
gap: var(--sp-4);
padding: var(--sp-3) 0;
border-top: 1px solid var(--border-1);
font-size: var(--fs-body);
color: var(--text-2);
line-height: var(--lh-normal);
}
.approach-compare .ac-list li:first-child { border-top: 0; padding-top: 0; }
.approach-compare .ac-mark {
flex: 0 0 26px;
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 2px;
font-size: 16px;
font-weight: 700;
line-height: 1;
}
.approach-compare .ac-mark-x {
background: rgba(110, 120, 140, 0.10);
color: var(--text-3);
border: 1px solid rgba(110, 120, 140, 0.22);
}
.approach-compare .ac-mark-tick {
background: var(--tan-blue);
color: var(--tan-black);
border: 1px solid var(--tan-blue);
box-shadow: 0 0 0 4px rgba(0,185,245,0.10);
}
.approach-compare .ac-mark-tick svg { display: block; }
/* "vs." centre divider */
.approach-compare .ac-vs {
align-self: center;
position: relative;
padding: var(--sp-4);
}
.approach-compare .ac-vs span {
display: inline-block;
font-family: var(--font-display);
font-weight: 800;
font-style: italic;
font-size: clamp(22px, 1.9vw, 30px);
color: var(--text-3);
letter-spacing: -0.02em;
padding: 10px 14px;
background: var(--bg-1);
border: 1px solid var(--border-2);
border-radius: 50%;
width: 60px; height: 60px;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-sm);
}
.approach-compare .ac-vs::before,
.approach-compare .ac-vs::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 1px;
background: linear-gradient(180deg, transparent, var(--border-2), transparent);
}
.approach-compare .ac-vs::before { top: 0; bottom: calc(50% + 36px); }
.approach-compare .ac-vs::after { top: calc(50% + 36px); bottom: 0; }
/* Animate ticks in on reveal */
.reveal.in .approach-compare .ac-mark-tick {
animation: cmp-pop var(--dur-slow) var(--ease-spring) both;
}
.reveal.in .approach-compare .ac-list li:nth-child(1) .ac-mark-tick { animation-delay: 100ms; }
.reveal.in .approach-compare .ac-list li:nth-child(2) .ac-mark-tick { animation-delay: 180ms; }
.reveal.in .approach-compare .ac-list li:nth-child(3) .ac-mark-tick { animation-delay: 260ms; }
.reveal.in .approach-compare .ac-list li:nth-child(4) .ac-mark-tick { animation-delay: 340ms; }
.reveal.in .approach-compare .ac-list li:nth-child(5) .ac-mark-tick { animation-delay: 420ms; }
/* -----------------------------
Case study card
----------------------------- */
.case {
display: grid;
grid-template-columns: 1fr 1.4fr;
border: 1px solid var(--border-1);
border-radius: var(--r-1);
overflow: hidden;
transition: border-color .2s ease;
background: var(--bg-1);
}
.case:hover { border-color: var(--border-3); }
.case .case-visual {
background:
radial-gradient(400px 200px at 70% 30%, rgba(0,185,245,0.15), transparent 60%),
linear-gradient(135deg, var(--bg-2) 0%, var(--bg-elev) 100%);
padding: var(--sp-10);
display: flex; flex-direction: column; justify-content: space-between;
min-height: 360px;
position: relative;
overflow: hidden;
}
.case .case-visual::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0,185,245,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,185,245,0.04) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
}
.case .case-visual-inner { position: relative; z-index: 1; }
.case .case-logo {
background: #ffffff;
border: 1px solid var(--border-1);
border-radius: var(--r-2);
padding: 10px 14px;
height: 48px;
width: fit-content;
margin-bottom: 14px;
display: flex;
align-items: center;
box-shadow: 0 1px 0 rgba(15, 21, 37, 0.04), 0 4px 10px rgba(15, 21, 37, 0.05);
}
.case .case-logo img {
max-height: 100%;
max-width: 140px;
width: auto;
height: auto;
object-fit: contain;
}
.case .case-visual .client-tag {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--ls-caps-lg);
text-transform: uppercase;
color: var(--tan-blue);
margin-bottom: var(--sp-3);
font-weight: 500;
}
.case .case-visual h3 {
font-size: var(--fs-h2);
color: var(--text-0);
margin-bottom: var(--sp-4);
line-height: var(--lh-snug);
letter-spacing: var(--ls-heading);
}
.case .case-visual .case-meta {
display: flex;
gap: var(--sp-5);
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--text-3);
position: relative;
z-index: 1;
}
.case .case-visual .case-meta b { color: var(--text-1); font-weight: 600; }
.case .case-body {
padding: var(--sp-10);
background: var(--bg-1);
}
.case .case-body h4 {
font-family: var(--font-mono);
font-size: var(--fs-micro);
color: var(--tan-blue);
letter-spacing: var(--ls-caps-lg);
text-transform: uppercase;
margin-bottom: var(--sp-2);
margin-top: var(--sp-5);
font-weight: 500;
}
.case .case-body h4:first-of-type { margin-top: 0; }
.case .case-body p { font-size: var(--fs-body); line-height: var(--lh-relaxed); margin-bottom: var(--sp-3); }
/* -----------------------------
Feature list
----------------------------- */
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li {
display: flex;
gap: var(--sp-4);
align-items: flex-start;
padding: var(--sp-4) 0;
border-bottom: 1px solid var(--border-1);
}
.feature-list li:last-child { border-bottom: none; }
.feature-list .fi {
flex: 0 0 28px;
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
color: var(--tan-blue);
background: rgba(0,185,245,0.10);
border: 1px solid rgba(0,185,245,0.25);
border-radius: var(--r-1);
margin-top: 2px;
}
.feature-list .fi svg { width: 14px; height: 14px; }
.feature-list .ft { font-size: var(--fs-body); color: var(--text-1); line-height: var(--lh-normal); }
.feature-list .ft b { color: var(--text-0); font-weight: 600; display: block; margin-bottom: 4px; font-size: var(--fs-title); }
/* -----------------------------
Split layout
----------------------------- */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 96px);
align-items: center;
}
.split.split-balanced { grid-template-columns: 1.1fr 0.9fr; }
.split .split-text h2 { font-size: var(--fs-h1); margin-bottom: var(--sp-5); }
.split .split-visual {
position: relative;
aspect-ratio: 4 / 3;
background: var(--bg-1);
border: 1px solid var(--border-1);
overflow: hidden;
border-radius: var(--r-1);
}
/* Decorative diagram surfaces */
.diagram {
position: relative;
background: linear-gradient(135deg, var(--bg-1), var(--bg-2));
border: 1px solid var(--border-1);
padding: var(--sp-10);
border-radius: var(--r-1);
overflow: hidden;
}
.diagram::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0,185,245,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,185,245,0.04) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
mask-image: radial-gradient(circle at center, black 60%, transparent 90%);
-webkit-mask-image: radial-gradient(circle at center, black 60%, transparent 90%);
}
/* Illustration frame — for SVG illustrations in pages */
.illus-frame {
position: relative;
width: 100%;
border-radius: var(--r-1);
overflow: hidden;
}
.illus-frame img, .illus-frame svg {
width: 100%;
height: auto;
display: block;
}
/* Interactive ecosystem SVG — each satellite is a clickable link */
.eco-frame .eco-sat,
.eco-frame > .eco-svg > a {
cursor: pointer;
transition: opacity var(--dur-base) var(--ease-out-quart);
transform-box: fill-box;
transform-origin: center;
}
.eco-frame .eco-sat circle:first-of-type,
.eco-frame .eco-sat image,
.eco-frame .eco-sat text {
transition: transform var(--dur-base) var(--ease-out-quart), filter var(--dur-base) var(--ease-out-quart);
transform-box: fill-box;
transform-origin: center;
}
.eco-frame .eco-sat:hover circle:first-of-type {
filter: drop-shadow(0 10px 24px rgba(0, 185, 245, 0.35));
transform: scale(1.08);
}
.eco-frame .eco-sat:hover image {
transform: scale(1.05);
}
.eco-frame .eco-sat:hover text {
fill: #00b9f5;
}
.eco-frame .eco-sat:focus-visible { outline: none; }
.eco-frame .eco-sat:focus-visible circle:first-of-type {
filter: drop-shadow(0 0 0 2px rgba(0,185,245,0.7));
stroke-width: 2.4;
}
.eco-frame .eco-hub {
transition: transform var(--dur-base) var(--ease-out-quart);
transform-box: fill-box;
transform-origin: center;
}
.eco-frame > .eco-svg > a:hover .eco-hub {
transform: scale(1.04);
}
/* -----------------------------
FAQ
----------------------------- */
.faq-list {
max-width: 880px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.faq-item {
border: 1px solid var(--border-1);
border-radius: var(--r-2);
background: #ffffff;
box-shadow: 0 1px 0 rgba(15, 21, 37, 0.03);
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.faq-item[open] {
border-color: var(--tan-blue);
background: #ffffff;
box-shadow: 0 8px 20px rgba(0, 185, 245, 0.10);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: var(--sp-5) var(--sp-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-5);
font-family: var(--font-display);
font-size: var(--fs-title);
font-weight: 600;
color: var(--text-0);
letter-spacing: -0.005em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--tan-blue); }
.faq-item .faq-q { flex: 1; }
.faq-item .faq-icon {
flex: 0 0 28px;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--tan-blue);
border: 1px solid var(--border-2);
border-radius: 50%;
transition: transform .25s ease, background .2s ease, border-color .2s ease;
}
.faq-item[open] .faq-icon {
transform: rotate(45deg);
background: var(--tan-blue);
color: var(--tan-black);
border-color: var(--tan-blue);
}
.faq-item .faq-a {
padding: 0 var(--sp-6) var(--sp-6);
color: var(--text-2);
max-width: 760px;
}
.faq-item .faq-a p {
margin: 0;
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
}
/* -----------------------------
CTA strip
----------------------------- */
.cta-strip {
position: relative;
padding: clamp(80px, 11vw, 140px) 0;
background: linear-gradient(135deg, var(--tan-navy) 0%, var(--bg-0) 100%);
border-top: 1px solid var(--border-2);
border-bottom: 1px solid var(--border-2);
overflow: hidden;
}
.cta-strip::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(800px 400px at 80% 50%, rgba(0,185,245,0.22), transparent 60%);
pointer-events: none;
}
.cta-strip::after {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse at center, transparent 30%, black 90%);
-webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, black 90%);
pointer-events: none;
}
.cta-strip .container { position: relative; z-index: 1; }
/* Photo-backed CTA strip — photo on ::before, dark overlay on ::before too,
::after keeps the grid + vignette so chrome stays consistent. */
.cta-strip.has-photo::before {
background-image:
linear-gradient(135deg, rgba(0,0,0,0.78) 0%, rgba(5,8,16,0.60) 35%, rgba(7,17,42,0.38) 70%, rgba(11,24,64,0.20) 100%),
var(--photo);
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
mask-image: none;
-webkit-mask-image: none;
}
.cta-strip.has-photo::after {
background-image:
radial-gradient(circle at 100% 100%, transparent 0%, rgba(5,8,15,0.30) 60%, rgba(5,8,15,0.70) 100%),
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: cover, 64px 64px, 64px 64px;
background-repeat: no-repeat, repeat, repeat;
mask-image: none;
-webkit-mask-image: none;
}
.cta-strip h2 {
font-size: var(--fs-display-1);
max-width: 920px;
margin-bottom: var(--sp-5);
font-weight: 800;
line-height: var(--lh-tight);
letter-spacing: var(--ls-display);
}
.cta-strip p {
font-size: var(--fs-lede);
color: var(--text-2);
max-width: 680px;
margin-bottom: var(--sp-8);
line-height: var(--lh-normal);
}
/* -----------------------------
Footer
----------------------------- */
footer {
background: var(--bg-1);
border-top: 1px solid var(--border-1);
padding: var(--sp-20) 0 var(--sp-8);
}
/* Top-row of footer — brand + newsletter, separated from the sitemap grid */
.foot-top {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: var(--sp-16);
padding-bottom: var(--sp-14);
margin-bottom: var(--sp-12);
border-bottom: 1px solid var(--border-1);
align-items: start;
}
.foot-brand p {
color: var(--text-2);
max-width: 480px;
margin: 0 0 var(--sp-5);
line-height: var(--lh-normal);
}
.foot-social {
display: flex;
gap: var(--sp-2);
align-items: center;
}
.foot-social-item {
width: 42px; height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-2);
border: 1px solid var(--border-1);
border-radius: var(--r-1);
background: rgba(255,255,255,0.02);
transition:
color var(--dur-base) var(--ease-out-quart),
border-color var(--dur-base) var(--ease-out-quart),
background var(--dur-base) var(--ease-out-quart),
transform var(--dur-base) var(--ease-spring);
}
.foot-social-item:hover {
color: var(--tan-blue);
border-color: var(--tan-blue);
background: rgba(0, 185, 245, 0.10);
transform: translateY(-2px);
}
.foot-news h5 {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--ls-caps-lg);
text-transform: uppercase;
color: var(--text-3);
margin: 0 0 var(--sp-3);
font-weight: 500;
}
.foot-news p {
color: var(--text-2);
margin: 0 0 var(--sp-4);
max-width: 420px;
font-size: var(--fs-body);
line-height: var(--lh-normal);
}
.foot-news-form {
display: flex;
gap: var(--sp-2);
align-items: stretch;
max-width: 460px;
}
.foot-news-form input[type="email"] {
flex: 1 1 0;
min-width: 0;
padding: 13px 18px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-2);
border-radius: var(--r-1);
color: var(--text-0);
font-family: inherit;
font-size: var(--fs-body-sm);
outline: none;
transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.foot-news-form input[type="email"]:focus {
border-color: var(--tan-blue);
box-shadow: 0 0 0 3px rgba(0,185,245,0.18);
}
.foot-news-form input[type="email"]::placeholder { color: var(--text-3); }
.foot-news-form .btn {
flex-shrink: 0;
white-space: nowrap;
}
.foot-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: var(--sp-12);
margin-bottom: var(--sp-12);
}
.foot-col h5 {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--ls-caps-lg);
text-transform: uppercase;
color: var(--text-3);
margin-bottom: var(--sp-5);
font-weight: 500;
}
.foot-col ul { list-style: none; padding: 0; }
.foot-col li { margin-bottom: 10px; }
.foot-col a { color: var(--text-2); font-size: var(--fs-body); }
.foot-col a:hover { color: var(--tan-blue); }
.foot-col p { font-size: var(--fs-body); color: var(--text-2); max-width: 340px; line-height: var(--lh-normal); }
.foot-bottom {
border-top: 1px solid var(--border-1);
padding-top: var(--sp-6);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-4);
font-size: var(--fs-caption);
color: var(--text-3);
}
.foot-bottom .legal { display: flex; gap: var(--sp-6); }
.foot-bottom .legal a { color: var(--text-3); }
.foot-bottom .legal a:hover { color: var(--tan-blue); }
.foot-bottom .foot-made {
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--text-4);
display: inline-flex;
align-items: center;
gap: 8px;
}
.foot-bottom .foot-made::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--tan-blue);
box-shadow: 0 0 8px rgba(0,185,245,0.65);
}
/* -----------------------------
Forms
----------------------------- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin-bottom: var(--sp-6); }
.field { display: flex; flex-direction: column; gap: 10px; }
.field label {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--text-3);
font-weight: 700;
}
.field input, .field select, .field textarea {
padding: 18px 22px;
background: var(--bg-1);
border: 1px solid var(--border-2);
color: var(--text-0);
font-size: var(--fs-body);
font-family: inherit;
border-radius: var(--r-2);
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-4); opacity: 0.55; }
.field input:focus, .field select:focus, .field textarea:focus {
border-color: var(--tan-blue);
box-shadow: 0 0 0 3px rgba(0,185,245,0.15);
}
.field textarea { resize: vertical; min-height: 160px; line-height: var(--lh-normal); }
.field .field-hint {
font-size: 13px;
color: var(--text-3);
margin: 0;
}
.field .field-error {
font-size: 13px;
color: var(--danger);
margin: 0;
display: none;
}
/* Required indicator */
.field.is-required label::after {
content: " *";
color: var(--tan-blue);
}
/* Validation states */
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
border-color: var(--danger);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}
.field.is-invalid .field-error { display: block; }
.field.is-valid input,
.field.is-valid select,
.field.is-valid textarea {
border-color: var(--success);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 18px center;
background-size: 18px 18px;
padding-right: 48px;
}
/* Form-level success card — swapped in after submit */
.form-success {
display: none;
padding: var(--sp-10);
text-align: center;
border: 1px solid rgba(34, 197, 94, 0.32);
background: linear-gradient(180deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.02));
border-radius: var(--r-3);
box-shadow: var(--shadow-md);
animation: form-success-pop var(--dur-slower) var(--ease-spring) both;
}
.form-success.is-active { display: block; }
.form-success .form-success-mark {
width: 64px; height: 64px;
margin: 0 auto var(--sp-5);
border-radius: 50%;
background: rgba(34, 197, 94, 0.16);
border: 1px solid rgba(34, 197, 94, 0.45);
display: flex; align-items: center; justify-content: center;
color: var(--success);
}
.form-success h3 { color: var(--text-0); margin-bottom: var(--sp-2); }
.form-success p { color: var(--text-2); margin: 0; }
@keyframes form-success-pop {
0% { transform: scale(0.94); opacity: 0; }
60% { transform: scale(1.02); opacity: 1; }
100% { transform: scale(1.00); opacity: 1; }
}
/* Floating-label opt-in (.field.floating). Uses :placeholder-shown trick. */
.field.floating { position: relative; gap: 0; }
.field.floating label {
position: absolute;
top: 18px;
left: 22px;
padding: 0 6px;
background: var(--bg-1);
color: var(--text-3);
letter-spacing: 0.02em;
text-transform: none;
font-family: var(--font-sans);
font-size: var(--fs-body);
font-weight: 500;
pointer-events: none;
transition:
top var(--dur-fast) var(--ease-out-quart),
font-size var(--dur-fast) var(--ease-out-quart),
color var(--dur-fast) var(--ease-out-quart);
}
.field.floating input:not(:placeholder-shown) + label,
.field.floating input:focus + label,
.field.floating textarea:not(:placeholder-shown) + label,
.field.floating textarea:focus + label,
.field.floating select:focus + label {
top: -10px;
font-size: 12px;
color: var(--tan-blue);
text-transform: uppercase;
letter-spacing: var(--ls-caps);
font-family: var(--font-mono);
}
/* -----------------------------
Process row (planning → improvement)
----------------------------- */
/* Process row — connected 5-step pill chain showing lifecycle flow. */
.process-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--sp-3);
margin-bottom: var(--sp-12);
position: relative;
}
.process-row .step {
padding: var(--sp-6) var(--sp-5);
background: #ffffff;
border: 1px solid var(--border-1);
border-radius: var(--r-2);
font-family: var(--font-mono);
font-size: var(--fs-caption);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--text-0);
font-weight: 700;
text-align: center;
position: relative;
box-shadow: 0 1px 0 rgba(15, 21, 37, 0.04), 0 4px 14px rgba(15, 21, 37, 0.05);
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.process-row .step:hover {
transform: translateY(-2px);
border-color: var(--tan-blue);
box-shadow: 0 8px 24px rgba(0, 185, 245, 0.15);
}
/* Connector chevron between steps (skips after the last) */
.process-row .step:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: calc(-1 * var(--sp-3) - 1px);
transform: translateY(-50%);
width: 0; height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid var(--tan-blue);
z-index: 1;
}
/* Top accent bar inside each step — fades through the brand blues for visual rhythm */
.process-row .step::before {
content: "";
position: absolute;
top: 0; left: 12%; right: 12%;
height: 3px;
background: linear-gradient(90deg, var(--tan-blue-soft), var(--tan-blue));
border-radius: 0 0 var(--r-1) var(--r-1);
}
/* -----------------------------
Need circles
----------------------------- */
.need-circles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-8);
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.need-circles .nc { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.need-circles .nc-icon {
width: 100px; height: 100px;
border-radius: 50%;
background: var(--bg-1);
border: 2px solid var(--tan-blue);
display: flex; align-items: center; justify-content: center;
color: var(--tan-blue);
box-shadow: var(--glow-soft);
position: relative;
}
.need-circles .nc-icon::after {
content: "";
position: absolute;
inset: -8px;
border-radius: 50%;
border: 1px dashed rgba(0,185,245,0.4);
}
.need-circles .nc-icon svg { width: 38px; height: 38px; }
.need-circles .nc h4 { color: var(--tan-blue); font-size: var(--fs-h3); margin: 0; font-weight: 700; }
/* -----------------------------
Reveal animations
----------------------------- */
.reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity var(--dur-cinematic) var(--ease-out-expo),
transform var(--dur-cinematic) var(--ease-out-expo);
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
/* Variants — opt in via additional class. translateY(0) keeps existing default. */
.reveal.reveal-fade { transform: none; }
.reveal.reveal-up { transform: translateY(48px); }
.reveal.reveal-scale { transform: scale(0.96); }
.reveal.reveal-left { transform: translateX(-32px); }
.reveal.reveal-right { transform: translateX(32px); }
.reveal.reveal-up.in,
.reveal.reveal-fade.in,
.reveal.reveal-scale.in,
.reveal.reveal-left.in,
.reveal.reveal-right.in { transform: translate(0, 0) scale(1); }
/* Stagger — assigning JS-set --i (or pre-set 1..16 via :nth-child) drives delay */
.reveal.stagger > * {
opacity: 0;
transform: translateY(20px);
transition:
opacity var(--dur-slower) var(--ease-out-quart),
transform var(--dur-slower) var(--ease-out-quart);
transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal.stagger > *:nth-child(1) { --i: 0; }
.reveal.stagger > *:nth-child(2) { --i: 1; }
.reveal.stagger > *:nth-child(3) { --i: 2; }
.reveal.stagger > *:nth-child(4) { --i: 3; }
.reveal.stagger > *:nth-child(5) { --i: 4; }
.reveal.stagger > *:nth-child(6) { --i: 5; }
.reveal.stagger > *:nth-child(7) { --i: 6; }
.reveal.stagger > *:nth-child(8) { --i: 7; }
.reveal.stagger > *:nth-child(9) { --i: 8; }
.reveal.stagger > *:nth-child(10) { --i: 9; }
.reveal.stagger > *:nth-child(11) { --i: 10; }
.reveal.stagger > *:nth-child(12) { --i: 11; }
.reveal.stagger > *:nth-child(13) { --i: 12; }
.reveal.stagger > *:nth-child(14) { --i: 13; }
.reveal.stagger > *:nth-child(15) { --i: 14; }
.reveal.stagger > *:nth-child(16) { --i: 15; }
/* -----------------------------
Display utilities — opt-in monster headline
----------------------------- */
h1.h-monster, h2.h-monster, .h-monster {
font-family: var(--font-display);
font-size: var(--fs-display-2);
line-height: 0.92;
letter-spacing: -0.04em;
font-weight: 800;
text-wrap: balance;
}
.display-light {
font-family: var(--font-display);
font-weight: 300;
font-style: italic;
letter-spacing: -0.01em;
}
/* Subtle idle drift used on hero illustration */
@keyframes hero-drift {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -16px, 0); }
}
.hero-visual.drift {
animation: hero-drift 6000ms var(--ease-in-out-quart) infinite;
}
/* Pull-quote for editorial pages */
.pullquote {
margin: var(--sp-12) 0;
padding: var(--sp-6) 0;
border-top: 1px solid var(--border-1);
border-bottom: 1px solid var(--border-1);
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.35;
color: var(--text-1);
text-wrap: balance;
}
.pullquote cite {
display: block;
margin-top: var(--sp-3);
font-family: var(--font-mono);
font-style: normal;
font-size: 13px;
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--text-3);
}
/* Drop-cap utility for first paragraph of long articles */
.drop-cap::first-letter {
font-family: var(--font-serif);
float: left;
font-size: 4.6em;
line-height: 0.8;
padding: 6px 14px 0 0;
color: var(--tan-blue);
font-weight: 700;
}
/* Reading-progress bar — driven by JS scroll handler */
.read-progress {
position: fixed;
top: 0; left: 0;
height: 3px;
width: 0;
background: linear-gradient(90deg, var(--tan-blue), var(--tan-blue-soft));
z-index: 200;
transition: width var(--dur-fast) linear;
pointer-events: none;
}
/* Page-transition shell — fades main on internal nav clicks */
.page-transition-veil {
position: fixed;
inset: 0;
background: var(--tan-black);
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-standard);
}
.page-transition-veil.is-active {
opacity: 1;
pointer-events: auto;
}
/* -----------------------------
Responsive
----------------------------- */
@media (max-width: 1280px) {
.hero-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
.hero-visual { min-height: 400px; }
}
@media (max-width: 1024px) {
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.foot-top { grid-template-columns: 1fr; gap: var(--sp-10); padding-bottom: var(--sp-10); margin-bottom: var(--sp-10); }
.foot-grid { grid-template-columns: 1fr 1fr; }
.logica-grid { grid-template-columns: repeat(2, 1fr); }
.hero-inner { grid-template-columns: 1fr; }
.hero-visual { order: -1; min-height: 360px; }
.hero-metrics { grid-template-columns: repeat(2, 1fr); }
.hero-metrics .m { padding: var(--sp-5); }
.hero-metrics .m:nth-child(2) { border-right: none; }
.hero-metrics .m:nth-child(3), .hero-metrics .m:nth-child(4) { border-top: 1px solid var(--border-1); }
.clients-marquee { --tile-w: clamp(160px, 30vw, 220px); }
.client-tile { height: 100px; padding: 14px 22px; }
.timeline-grid { grid-template-columns: repeat(2, 1fr); }
.timeline-grid::before { display: none; }
.vertical-row { grid-template-columns: 1fr; gap: var(--sp-4); }
/* Journey v2 — collapse to 2-col grid, spine becomes per-row */
.journey-v2 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-10) var(--sp-6); }
.journey-v2 .jv-spine { display: none; }
.compare-v2 { grid-template-columns: 1fr; gap: var(--sp-5); }
.compare-v2 .cmp-vs { padding: var(--sp-2) 0; align-self: center; text-align: center; }
.compare-v2 .cmp-vs::before,
.compare-v2 .cmp-vs::after { display: none; }
.approach-compare { grid-template-columns: 1fr; gap: var(--sp-5); }
.approach-compare .ac-vs { padding: var(--sp-2) 0; align-self: center; }
.approach-compare .ac-vs::before,
.approach-compare .ac-vs::after { display: none; }
}
@media (max-width: 768px) {
.nav { display: none; }
.nav-cta .btn:not(.menu-only) { display: none; }
.nav-toggle { display: flex; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.split, .split.split-balanced { grid-template-columns: 1fr; gap: var(--sp-10); }
.form-row { grid-template-columns: 1fr; }
.compare { grid-template-columns: 1fr; }
.compare .col + .col { border-left: none; border-top: 1px solid var(--border-1); }
.stat-row { grid-template-columns: 1fr; }
.stat-row .stat { border-right: none; border-bottom: 1px solid var(--border-1); }
.stat-row .stat:last-child { border-bottom: none; }
.case { grid-template-columns: 1fr; }
.foot-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.foot-news-form { flex-direction: column; }
.foot-news-form .btn { width: 100%; justify-content: center; }
.pillar { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-6); }
.process-row { grid-template-columns: 1fr; }
.logica-grid { grid-template-columns: 1fr; }
.timeline-grid { grid-template-columns: 1fr; }
.journey-v2 { grid-template-columns: 1fr; gap: var(--sp-8); }
.clients-marquee { --tile-w: clamp(150px, 38vw, 200px); --tile-gap: 14px; }
.client-tile { height: 88px; padding: 12px 18px; }
.need-circles { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.foot-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
.foot-social-item { width: 38px; height: 38px; }
.foot-bottom { gap: var(--sp-3); }
.foot-news-form input[type="email"] { width: 100%; }
}