/* ===== Critical: reveal contract (was inline in ) ===== */
.reveal{opacity:1;transform:none}
html.js-anim .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
html.js-anim .reveal.in{opacity:1;transform:none}
html.js-anim .reveal.d1{transition-delay:.07s}html.js-anim .reveal.d2{transition-delay:.14s}html.js-anim .reveal.d3{transition-delay:.21s}
@media (prefers-reduced-motion:reduce){html.js-anim .reveal{opacity:1;transform:none;transition:none}}
/* ========================================================
ATeam — Agentic AI for Dubai Enterprises · v2
Mostly white · purple as accent · graphic-led 2026 design
======================================================== */
:root {
--bg: #ffffff;
--bg-soft: #fafaf7;
--bg-tint: #f5f3fb;
--surface: #ffffff;
--surface-2: #f8f7fb;
--surface-3: #efeaf8;
--ink: #0c0a1f;
--ink-2: #221d3a;
--ink-soft: #524d6a;
--ink-mute: #6a6680;
--line: #ebe9f2;
--line-soft: #f1eff7;
--line-strong: #d6cfe8;
/* Purple — desaturated, used sparingly */
--p-50: #f5f0ff;
--p-100: #ebe1ff;
--p-200: #d4c2fd;
--p-300: #b69bfb;
--p-400: #9670f5;
--p-500: #7c4dee;
--p-600: #6a35e0;
--p-700: #5824c5;
--p-800: #441a9b;
--p-900: #2e1175;
--purple: var(--p-600);
--purple-soft: var(--p-50);
--purple-glow: rgba(124, 77, 238, 0.22);
/* Secondary accents — used across sections to break monotony */
--teal: #0a7d71;
--teal-2: #d4f3ee;
--coral: #9c3409;
--coral-2: #fbe0db;
--amber: #d99e2b;
--amber-2:#fbecc8;
/* Blue */
--blue-50: #eef4ff;
--blue-100: #dbe8ff;
--blue-500: #3a72e0;
--blue-600: #1d4fa8;
--blue-700: #1f57b5;
/* Green / mint */
--green-50: #e9f8ef;
--green-100: #cdeede;
--green-500: #17aa5a;
--green-600: #0d6f3b;
--mint: #22c07f;
--mint-50: #e7faf0;
--success: #0f6b31;
--warn: #d6443a;
--serif: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
--sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
--mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in: cubic-bezier(0.4, 0, 0.6, 1);
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px;
--r-xl: 32px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-weight: 400;
font-size: 16px;
line-height: 1.55;
overflow-x: hidden;
text-wrap: pretty;
}
::selection { background: var(--p-200); color: var(--p-900); }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
position: relative;
z-index: 3;
}
@media (max-width: 640px) {
.container { padding: 0 20px; }
}
/* ===================== NAV ===================== */
.nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.78);
border-bottom: 1px solid transparent;
transition: border-color 0.3s, background 0.3s;
}
.nav.scrolled {
border-bottom-color: var(--line);
background: rgba(255, 255, 255, 0.92);
}
.nav-progress {
position: absolute;
bottom: 0; left: 0;
height: 2px;
width: var(--scroll, 0%);
background: linear-gradient(90deg, var(--p-400), var(--p-700));
transition: width 0.05s linear;
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 32px;
max-width: 1320px;
margin: 0 auto;
width: 100%;
}
.logo-link {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.logo-img {
height: 36px;
width: auto;
display: block;
}
.nav-links {
display: flex;
gap: 2px;
align-items: center;
}
.nav-links a {
font-size: 14px;
color: var(--ink-soft);
text-decoration: none;
padding: 8px 14px;
border-radius: 8px;
transition: color 0.2s, background 0.2s;
letter-spacing: -0.005em;
white-space: nowrap;
margin: 0 1em;
}
.nav-links a:hover { color: var(--ink); background: var(--surface-2); }
.nav-cta {
margin-left: 10px;
padding: 9px 16px !important;
background: var(--ink);
color: #fff !important;
border-radius: 100px;
font-size: 13px !important;
font-weight: 500;
transition: transform 0.2s var(--ease), background 0.2s;
}
.nav-cta:hover {
background: var(--purple) !important;
transform: translateY(-1px);
}
@media (max-width: 820px) {
.nav-links a:not(.nav-cta) { display: none; }
.nav-inner { padding: 12px 20px; }
.logo-img { height: 30px; }
}
/* ===================== BUTTONS ===================== */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
border-radius: 100px;
font-family: var(--sans);
font-size: 15px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
border: none;
letter-spacing: -0.005em;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s;
position: relative;
white-space: nowrap;
}
.btn svg.arrow { transition: transform 0.3s var(--ease); }
.btn:hover svg.arrow { transform: translateX(4px); }
.btn-primary {
background: var(--ink);
color: #fff;
box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 10px 30px -10px rgba(12, 10, 31, 0.45);
}
.btn-primary:hover {
background: var(--purple);
transform: translateY(-2px);
box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 14px 38px -10px var(--purple-glow);
}
.btn-primary::before {
content: '';
position: absolute;
inset: 0;
border-radius: 100px;
background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
transform: translateX(-100%);
transition: transform 0.6s var(--ease);
}
.btn-primary:hover::before { transform: translateX(100%); }
.btn-purple {
background: var(--purple) !important;
color: #fff;
box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 30px -10px var(--purple-glow);
font-size: 14px !important;
border-radius: 40px !important;
}
.btn-purple:hover {
background: var(--p-700) !important;
transform: translateY(-2px);
}
.btn-ghost {
background: var(--surface);
color: var(--ink);
border: 1px solid var(--line);
}
.btn-ghost:hover {
border-color: var(--line-strong);
background: var(--surface-2);
}
/* ===================== HERO ===================== */
.hero {
padding: 56px 0 60px;
position: relative;
overflow: hidden;
}
.hero::before {
/* very subtle vignette only behind hero visual */
content: '';
position: absolute;
right: -10%; top: -10%;
width: 60%; height: 80%;
background: radial-gradient(circle, var(--p-50), transparent 65%);
pointer-events: none;
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 56px;
align-items: center;
}
@media (max-width: 1000px) {
.hero-grid { grid-template-columns: 1fr; gap: 48px; }
.hero { padding: 32px 0 32px; }
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 14px 6px 6px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 100px;
font-size: 13px;
letter-spacing: -0.005em;
color: var(--ink-2);
margin-bottom: 28px;
box-shadow: 0 4px 14px -8px rgba(106, 53, 224, 0.15);
}
.eyebrow .chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--ink);
color: #fff;
font-size: 10.5px;
font-weight: 600;
padding: 4px 10px;
border-radius: 100px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.eyebrow .star { color: var(--amber); font-size: 13px; }
.h1 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(38px, 4.6vw, 62px);
line-height: 0.96;
letter-spacing: -0.025em;
color: var(--ink);
max-width: 16ch;
margin-bottom: 28px;
}
.h1 em {
font-style: italic;
background: linear-gradient(120deg, var(--p-500) 0%, var(--p-700) 50%, var(--p-500) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shine 8s linear infinite;
}
@keyframes shine {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.h1-sub {
font-size: 19px;
color: var(--ink-soft);
max-width: 52ch;
line-height: 1.55;
margin-bottom: 36px;
}
.hero-ctas {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.hero-meta {
margin-top: 28px;
display: flex;
align-items: center;
gap: 16px;
color: var(--ink-mute);
font-size: 13px;
}
.hero-meta .avatars { display: flex; align-items: center; }
.hero-meta .avatars span {
width: 28px; height: 28px;
border-radius: 50%;
border: 2px solid var(--bg);
margin-left: -8px;
background-size: cover;
}
.hero-meta .avatars span:first-child { margin-left: 0; }
.av-1 { background: linear-gradient(135deg, #ffd6a5, #d97757); }
.av-2 { background: linear-gradient(135deg, #c4b1ff, var(--p-600)); }
.av-3 { background: linear-gradient(135deg, #a0e7c8, #2a9d6c); }
.av-4 { background: linear-gradient(135deg, #ffb3c1, #c33567); }
.av-5 {
background: linear-gradient(135deg, #b1cdff, #3a6dd9);
color: #fff; font-size: 10px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--sans);
}
/* ============ HERO VISUAL — Animated Agent Network ============ */
.hero-visual {
position: relative;
aspect-ratio: 1 / 0.95;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 1000px) {
.hero-visual { aspect-ratio: 1 / 0.85; }
}
.hv-svg {
width: 100%;
height: 100%;
position: relative;
z-index: 2;
}
.hv-node {
transition: filter 0.3s;
}
.hv-node circle {
fill: #fff;
stroke: var(--line);
stroke-width: 1;
}
.hv-node.primary circle {
fill: var(--ink);
stroke: var(--ink);
}
.hv-node.purple circle {
fill: var(--purple);
stroke: var(--purple);
}
.hv-edge {
stroke: var(--line-strong);
stroke-width: 1;
fill: none;
}
.hv-edge.live {
stroke: var(--purple);
stroke-width: 1.4;
stroke-dasharray: 4 4;
animation: dash 8s linear infinite;
}
@keyframes dash { to { stroke-dashoffset: -100; } }
.hv-pulse {
fill: var(--purple);
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { r: 4; opacity: 1; }
50% { r: 7; opacity: 0.5; }
}
/* floating UI chips over the network */
.hv-chip {
position: absolute;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 10px 14px;
box-shadow: 0 14px 30px -16px rgba(70, 30, 160, 0.18), 0 1px 0 rgba(255,255,255,0.8) inset;
font-size: 12.5px;
color: var(--ink-2);
display: flex; align-items: center; gap: 10px;
white-space: nowrap;
z-index: 3;
animation: float 7s ease-in-out infinite;
}
.hv-chip-2 { animation: float 9s ease-in-out infinite reverse; }
.hv-chip-3 { animation: float 6s ease-in-out infinite; }
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.hv-chip .ic {
width: 26px; height: 26px;
border-radius: 7px;
background: var(--p-50);
display: inline-flex; align-items: center; justify-content: center;
color: var(--purple);
}
.hv-chip .ic svg { width: 14px; height: 14px; }
.hv-chip .ic.ok { background: rgba(15,107,49,0.10); color: var(--success); }
.hv-chip .ic.coral { background: var(--coral-2); color: var(--coral); }
.hv-chip .tl { font-weight: 500; }
.hv-chip .sb { color: var(--ink-mute); font-size: 11px; margin-top: 2px; }
.hv-chip.top { top: 6%; left: 4%; }
.hv-chip.right { top: 22%; right: -4%; }
.hv-chip.bot { bottom: 8%; left: 8%; }
.hv-chip.botr { bottom: 14%; right: 4%; }
/* center "agent" hub */
.hv-hub {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 132px; height: 132px;
border-radius: 50%;
background: linear-gradient(160deg, var(--p-500), var(--p-800));
display: flex; align-items: center; justify-content: center;
color: #fff;
font-family: var(--serif);
font-style: italic;
font-size: 32px;
box-shadow: 0 24px 60px -20px var(--purple-glow), 0 0 0 1px rgba(255,255,255,0.4) inset;
z-index: 3;
}
.hv-hub::before, .hv-hub::after {
content: '';
position: absolute;
inset: -16px;
border-radius: 50%;
border: 1px solid var(--p-200);
animation: ring 4s ease-out infinite;
}
.hv-hub::after { animation-delay: 2s; }
@keyframes ring {
0% { transform: scale(0.9); opacity: 0.8; }
100% { transform: scale(1.6); opacity: 0; }
}
/* ===================== TRUST STRIP ===================== */
.trust {
padding: 56px 0 64px;
text-align: center;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--bg-soft);
}
.trust-label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 28px;
}
.trust-row {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(28px, 5vw, 64px);
flex-wrap: wrap;
opacity: 0.78;
}
.trust-row span,
.trust-row .item {
color: var(--ink-soft);
letter-spacing: -0.01em;
white-space: nowrap;
font-size: 18px;
font-weight: 500;
}
.trust-row .bold { font-weight: 700; letter-spacing: -0.03em; font-size: 22px; }
.trust-row .mono { font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; }
.trust-row .serif { font-family: var(--serif); font-style: italic; font-size: 23px; }
/* ===================== SECTION BASE ===================== */
section { padding: 120px 0; position: relative; }
@media (max-width: 760px) { section { padding: 80px 0; } }
.section-tag {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--purple);
margin-bottom: 20px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.section-tag::before {
content: '';
width: 24px; height: 1px; background: var(--purple);
}
.section-h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(38px, 5vw, 64px);
line-height: 1.02;
letter-spacing: -0.022em;
color: var(--ink);
max-width: 22ch;
margin-bottom: 24px;
}
.section-h2 em { font-style: italic; color: var(--purple); }
.section-lead {
font-size: 18px;
color: var(--ink-soft);
max-width: 62ch;
line-height: 1.6;
margin-bottom: 56px;
}
/* ===================== PROBLEM ===================== */
.problem {
background: var(--bg);
}
.problem-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 64px;
align-items: start;
}
@media (max-width: 980px) {
.problem-grid { grid-template-columns: 1fr; gap: 40px; }
}
.problem-text p {
font-size: 17px;
color: var(--ink-soft);
margin-bottom: 18px;
line-height: 1.7;
}
.problem-text strong { color: var(--ink); font-weight: 600; }
.quote-pull {
margin: 26px 0;
padding: 22px 26px;
border-radius: 14px;
background: var(--bg-soft);
border-left: 3px solid var(--purple);
font-family: var(--serif);
font-size: 22px;
line-height: 1.4;
color: var(--ink);
font-style: italic;
}
/* Pilot-failure chart visualization */
.pilot-chart {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 36px;
position: relative;
overflow: hidden;
box-shadow: 0 18px 50px -28px rgba(70, 30, 160, 0.2);
}
.pc-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 26px;
}
.pc-title {
font-size: 13px;
color: var(--ink-2);
font-weight: 500;
display: flex; align-items: center; gap: 10px;
}
.pc-title .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--purple);
box-shadow: 0 0 0 4px var(--p-50);
}
.pc-source {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.pc-stat {
display: flex;
align-items: baseline;
gap: 16px;
margin-bottom: 18px;
}
.pc-stat .big {
font-family: var(--serif);
font-size: clamp(80px, 11vw, 132px);
font-weight: 400;
color: var(--purple);
line-height: 0.9;
letter-spacing: -0.04em;
}
.pc-stat .lbl {
font-size: 14.5px;
color: var(--ink-2);
max-width: 18ch;
line-height: 1.4;
}
.pc-bar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
height: 14px;
border-radius: 100px;
overflow: hidden;
margin: 18px 0 8px;
}
.pc-bar .fill {
background: linear-gradient(90deg, var(--p-400), var(--p-700));
position: relative;
overflow: hidden;
}
.pc-bar .fill::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
animation: shimmer 3s linear infinite;
}
@keyframes shimmer { 100% { transform: translateX(200%); } }
.pc-bar .ghost { background: var(--surface-2); }
.pc-bar.r-80 .fill { grid-column: 1 / span 1; }
.pc-bar.r-80 .ghost { grid-column: 2 / span 1; }
.pc-legend {
display: flex; justify-content: space-between;
font-family: var(--mono); font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.pc-legend strong { color: var(--ink-2); font-weight: 500; }
.pc-divider {
margin-top: 26px;
padding-top: 24px;
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: auto 1fr;
gap: 18px;
align-items: center;
}
.pc-mini {
font-family: var(--serif);
font-size: 56px;
line-height: 0.9;
color: var(--ink);
letter-spacing: -0.03em;
}
.pc-mini em { color: var(--purple); font-style: normal; }
.pc-divider p {
font-size: 13.5px;
color: var(--ink-soft);
line-height: 1.5;
}
/* ===================== CASES (Bento) ===================== */
.cases {
background: var(--bg-soft);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.cases-head {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: end;
margin-bottom: 48px;
}
@media (max-width: 760px) {
.cases-head { grid-template-columns: 1fr; }
}
.cases-head .section-lead { margin-bottom: 0; }
.bento {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
}
.bento .card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 32px;
position: relative;
overflow: hidden;
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
display: flex;
flex-direction: column;
}
.bento .card:hover {
transform: translateY(-4px);
box-shadow: 0 30px 80px -32px rgba(70, 30, 160, 0.22);
border-color: var(--p-200);
}
.bento .c-1 { grid-column: span 8; }
.bento .c-2 { grid-column: span 4; }
.bento .c-3 { grid-column: span 4; }
.bento .c-4 { grid-column: span 8; }
.bento .c-5 { grid-column: span 6; }
.bento .c-6 { grid-column: span 6; }
@media (max-width: 980px) {
.bento { grid-template-columns: repeat(2, 1fr); }
.bento .card { grid-column: span 2 !important; }
}
@media (max-width: 640px) {
.bento { grid-template-columns: 1fr; }
.bento .card { grid-column: span 1 !important; }
}
.case-num {
display: inline-flex;
align-items: center; gap: 10px;
font-family: var(--mono);
font-size: 11px;
color: var(--purple);
letter-spacing: 0.12em;
margin-bottom: 14px;
font-weight: 600;
}
.case-num::before {
content: ''; width: 20px; height: 1px; background: var(--purple);
}
.case-industry {
display: flex; gap: 6px; flex-wrap: wrap;
margin-bottom: 22px;
}
.case-industry .tag {
padding: 4px 10px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 100px;
font-size: 11.5px;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.case-title {
font-family: var(--serif);
font-size: 26px;
font-weight: 400;
line-height: 1.18;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 18px;
}
.case-context {
color: var(--ink-soft);
font-size: 14.5px;
line-height: 1.65;
margin-bottom: 18px;
}
.case-solution {
color: var(--ink-soft);
font-size: 13.5px;
line-height: 1.65;
border-top: 1px dashed var(--line-strong);
padding-top: 16px;
}
.case-solution strong { color: var(--ink); font-weight: 600; }
/* Result KPI row inside a case */
.kpi-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin: 4px 0 18px;
}
.kpi {
background: var(--surface-2);
border-radius: var(--r-sm);
padding: 12px 14px;
}
.kpi .v {
font-family: var(--serif);
font-size: 28px;
font-weight: 400;
color: var(--purple);
line-height: 1;
letter-spacing: -0.02em;
}
.kpi .l {
font-size: 11.5px;
color: var(--ink-mute);
margin-top: 6px;
line-height: 1.3;
}
/* === CASE VISUAL — Nurse calendar heatmap === */
.viz-roster {
display: grid;
grid-template-columns: repeat(14, 1fr);
gap: 3px;
margin: 18px 0 22px;
}
.viz-roster .cell {
aspect-ratio: 1;
border-radius: 3px;
background: var(--surface-2);
}
.viz-roster .cell.l1 { background: var(--p-50); }
.viz-roster .cell.l2 { background: var(--p-200); }
.viz-roster .cell.l3 { background: var(--p-400); }
.viz-roster .cell.l4 { background: var(--p-600); }
.viz-roster .cell.gap { background: repeating-linear-gradient(45deg, var(--coral-2), var(--coral-2) 2px, #fff 2px, #fff 4px); }
.viz-legend {
display: flex; justify-content: space-between;
font-family: var(--mono); font-size: 10.5px;
color: var(--ink-mute);
letter-spacing: 0.04em;
margin-bottom: 12px;
}
.viz-legend .scale {
display: inline-flex; align-items: center; gap: 4px;
}
.viz-legend .scale span {
width: 12px; height: 12px; border-radius: 3px;
}
/* === CASE VISUAL — Channel merge === */
.viz-channels {
display: grid;
grid-template-columns: 1fr 24px 1fr 24px 1fr;
gap: 8px;
align-items: center;
margin: 12px 0 22px;
}
.viz-channels .ch-stack {
display: flex; flex-direction: column;
gap: 6px;
}
.viz-channels .ch {
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 8px 10px;
font-size: 11.5px;
color: var(--ink-2);
display: flex; align-items: center; gap: 8px;
}
.viz-channels .ch .d {
width: 6px; height: 6px; border-radius: 50%;
background: var(--ink-mute);
}
.viz-channels .ch.email .d { background: var(--purple); }
.viz-channels .ch.wapp .d { background: var(--teal); }
.viz-channels .ch.portal .d { background: var(--amber); }
.viz-channels .arrow-x {
text-align: center; color: var(--ink-mute); font-size: 16px;
}
.viz-channels .agent {
background: linear-gradient(160deg, var(--ink) 0%, #2b2540 100%);
color: #fff;
border-radius: 12px;
padding: 18px 12px;
text-align: center;
position: relative;
overflow: hidden;
}
.viz-channels .agent::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(124, 77, 238, 0.4), transparent 60%);
}
.viz-channels .agent .lbl {
position: relative;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--p-200);
margin-bottom: 4px;
}
.viz-channels .agent .nm {
position: relative;
font-family: var(--serif);
font-style: italic;
font-size: 18px;
line-height: 1.1;
}
.viz-channels .clean {
background: var(--p-50);
border: 1px solid var(--p-100);
border-radius: 8px;
padding: 8px 10px;
font-size: 11.5px;
color: var(--p-800);
display: flex; align-items: center; gap: 8px;
font-family: var(--mono);
}
.viz-channels .clean .d {
width: 6px; height: 6px; border-radius: 50%;
background: var(--purple);
}
/* === CASE VISUAL — Claim funnel === */
.viz-funnel {
display: flex; flex-direction: column;
gap: 8px;
margin: 12px 0 22px;
}
.viz-funnel .row {
display: grid;
grid-template-columns: 90px 1fr 64px;
gap: 10px;
align-items: center;
font-family: var(--mono);
font-size: 11px;
}
.viz-funnel .row .lbl {
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.viz-funnel .row .bar {
height: 22px;
background: var(--surface-2);
border-radius: 6px;
position: relative;
overflow: hidden;
}
.viz-funnel .row .fill {
height: 100%;
background: linear-gradient(90deg, var(--p-400), var(--p-700));
display: flex; align-items: center; justify-content: flex-end;
padding-right: 8px;
color: #fff;
font-size: 10.5px;
font-weight: 600;
border-radius: 6px;
position: relative;
}
.viz-funnel .row .fill.lite {
background: linear-gradient(90deg, var(--p-100), var(--p-200));
color: var(--p-800);
}
.viz-funnel .row .fill.coral {
background: linear-gradient(90deg, var(--coral-2), var(--coral));
color: #fff;
}
.viz-funnel .row .v {
font-size: 12px;
color: var(--ink-2);
font-weight: 600;
font-family: var(--sans);
}
.viz-funnel .delta {
margin-top: 10px;
display: flex; gap: 8px; align-items: center;
font-family: var(--mono);
font-size: 11px;
color: var(--purple);
padding: 8px 12px;
background: var(--p-50);
border-radius: 8px;
letter-spacing: 0.04em;
}
/* Confidential meta */
.confidential {
margin-top: auto;
padding-top: 16px;
border-top: 1px dashed var(--line);
font-size: 11.5px;
color: var(--ink-mute);
font-family: var(--mono);
display: flex; align-items: center; gap: 6px;
letter-spacing: 0.02em;
}
.confidential::before {
content: '◐'; color: var(--purple);
}
/* === Small cards in bento (results-only / quote) === */
.bento .card.dark {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.bento .card.dark::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 20% 0%, rgba(124, 77, 238, 0.35), transparent 60%),
radial-gradient(ellipse 60% 50% at 90% 100%, rgba(180, 130, 255, 0.20), transparent 60%);
pointer-events: none;
}
.bento .card.dark > * { position: relative; }
.bento .card.dark .case-title { color: #fff; }
.bento .card.dark .case-num { color: var(--p-300); }
.bento .card.dark .case-num::before { background: var(--p-300); }
.bento .card.dark .kpi { background: rgba(255,255,255,0.05); }
.bento .card.dark .kpi .v { color: var(--p-300); }
.bento .card.dark .kpi .l { color: rgba(255,255,255,0.55); }
.bento .card.dark .confidential { color: rgba(255,255,255,0.5); border-top-color: rgba(255,255,255,0.12); }
/* ===================== FRAMEWORK ===================== */
.framework-intro { max-width: 720px; }
.compare-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 8px;
}
@media (max-width: 880px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-col {
padding: 36px;
border-radius: var(--r-lg);
border: 1px solid var(--line);
background: var(--surface);
position: relative;
}
.compare-col.old { background: var(--bg-soft); }
.compare-col.new {
border-color: var(--p-200);
background: linear-gradient(180deg, #fff 0%, var(--p-50) 100%);
box-shadow: 0 30px 60px -30px var(--purple-glow);
}
.compare-col.new::after {
content: 'OUR FRAMEWORK';
position: absolute;
top: -12px; right: 24px;
background: var(--ink);
color: #fff;
padding: 5px 12px;
border-radius: 100px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.1em;
font-weight: 600;
}
.compare-head {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 6px;
}
.compare-col.new .compare-head { color: var(--purple); }
.compare-title {
font-family: var(--serif);
font-size: 26px;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 24px;
line-height: 1.18;
}
.compare-list {
list-style: none;
display: flex; flex-direction: column;
gap: 14px;
}
.compare-list li {
padding-left: 32px;
position: relative;
color: var(--ink-soft);
font-size: 14.5px;
line-height: 1.6;
}
.compare-list li::before {
content: ''; position: absolute; left: 0; top: 2px;
width: 20px; height: 20px;
border-radius: 50%;
}
.compare-col.old .compare-list li::before {
background: var(--coral-2);
background-image: url("data:image/svg+xml;utf8,");
}
.compare-col.new .compare-list li::before {
background: var(--p-100);
background-image: url("data:image/svg+xml;utf8,");
}
.compare-list li strong { color: var(--ink); font-weight: 600; }
/* ===================== AGENT FLOW (How agents handle wrong) ===================== */
.agent-flow {
margin-top: 56px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 48px 48px 56px;
position: relative;
overflow: hidden;
}
@media (max-width: 760px) {
.agent-flow { padding: 32px; }
}
.af-head {
margin-bottom: 36px;
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 24px;
}
@media (max-width: 760px) { .af-head { grid-template-columns: 1fr; } }
.af-title {
font-family: var(--serif);
font-size: 30px;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.15;
max-width: 24ch;
}
.af-title em { color: var(--purple); font-style: italic; }
.af-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.06em;
text-transform: uppercase;
display: flex; align-items: center; gap: 8px;
}
.af-meta::before {
content: ''; width: 8px; height: 8px; border-radius: 50%;
background: var(--success); box-shadow: 0 0 0 4px rgba(15,107,49,0.15);
}
.af-stages {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
position: relative;
}
@media (max-width: 880px) {
.af-stages { grid-template-columns: 1fr; gap: 12px; }
}
.af-stage {
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 18px 16px 16px;
position: relative;
}
.af-stage .num {
font-family: var(--mono);
font-size: 10.5px;
color: var(--purple);
letter-spacing: 0.1em;
font-weight: 600;
margin-bottom: 8px;
}
.af-stage .nm {
font-family: var(--serif);
font-size: 19px;
font-weight: 400;
letter-spacing: -0.015em;
color: var(--ink);
margin-bottom: 6px;
line-height: 1.18;
}
.af-stage .ds {
font-size: 12.5px;
color: var(--ink-soft);
line-height: 1.45;
}
.af-stage::after {
content: '→';
position: absolute;
top: 50%;
right: -16px;
transform: translateY(-50%);
font-size: 18px;
color: var(--ink-mute);
z-index: 2;
}
.af-stage:last-child::after { display: none; }
@media (max-width: 880px) { .af-stage::after { display: none; } }
/* "guardrails" branching off */
.af-rails {
margin-top: 36px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
@media (max-width: 760px) { .af-rails { grid-template-columns: 1fr; } }
.af-rail {
background: var(--p-50);
border: 1px solid var(--p-100);
border-radius: var(--r-md);
padding: 18px 18px;
display: flex; gap: 14px; align-items: flex-start;
}
.af-rail .icb {
width: 32px; height: 32px;
border-radius: 9px;
background: var(--purple);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.af-rail .icb svg { width: 16px; height: 16px; }
.af-rail .ttl {
font-weight: 600;
font-size: 13.5px;
color: var(--ink);
margin-bottom: 2px;
}
.af-rail .ds {
font-size: 12.5px;
color: var(--ink-soft);
line-height: 1.5;
}
/* ===================== APPROACH TIMELINE ===================== */
.timeline {
position: relative;
margin-top: 24px;
}
.timeline::before {
content: '';
position: absolute;
left: 32px; top: 0; bottom: 0;
width: 2px;
background: var(--line);
border-radius: 2px;
}
@media (max-width: 600px) {
.timeline::before,
}
.tl-step {
position: relative;
display: grid;
grid-template-columns: 80px 1fr;
gap: 32px;
padding: 32px 0;
}
@media (max-width: 600px) {
.tl-step { grid-template-columns: 56px 1fr; gap: 18px; }
}
.tl-dot {
width: 64px; height: 64px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--line);
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--serif);
font-size: 24px;
font-style: italic;
color: var(--ink-mute);
position: relative;
z-index: 2;
transition: all 0.4s var(--ease);
}
.tl-step.in .tl-dot {
background: var(--purple);
border-color: var(--purple);
color: #fff;
box-shadow: 0 0 0 6px var(--p-50);
}
@media (max-width: 600px) {
.tl-dot { width: 36px; height: 36px; font-size: 14px; }
}
.tl-body {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 28px 32px;
transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.tl-body:hover {
transform: translateX(6px);
border-color: var(--p-200);
box-shadow: 0 16px 40px -22px var(--purple-glow);
}
.tl-meta {
display: flex; gap: 12px;
align-items: center;
margin-bottom: 10px;
}
.tl-time {
font-family: var(--mono);
font-size: 11px;
color: var(--purple);
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
}
.tl-tag {
font-family: var(--mono);
font-size: 10.5px;
color: var(--ink-mute);
letter-spacing: 0.06em;
padding: 3px 8px;
background: var(--surface-2);
border-radius: 4px;
}
.tl-title {
font-family: var(--serif);
font-size: 28px;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 10px;
line-height: 1.18;
}
.tl-desc {
font-size: 15px;
color: var(--ink-soft);
line-height: 1.6;
}
.tl-deliv {
margin-top: 18px;
display: flex; gap: 8px;
flex-wrap: wrap;
}
.tl-deliv span {
font-size: 11.5px;
font-family: var(--mono);
color: var(--ink-2);
padding: 4px 10px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 100px;
letter-spacing: 0.02em;
}
/* ===================== TECH STACK CONSTELLATION ===================== */
.stack-section {
background: var(--ink);
color: #fff;
border-radius: var(--r-xl);
margin: 0 24px;
padding: 96px 56px;
position: relative;
overflow: hidden;
}
@media (max-width: 760px) {
.stack-section { margin: 0 16px; padding: 72px 28px; }
}
.stack-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 60% at 20% 30%, rgba(124, 77, 238, 0.35), transparent 60%),
radial-gradient(ellipse 50% 50% at 90% 80%, rgba(15, 181, 163, 0.18), transparent 60%);
pointer-events: none;
}
.stack-section::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
opacity: 0.5;
}
.stack-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 56px;
align-items: center;
position: relative;
}
@media (max-width: 980px) { .stack-grid { grid-template-columns: 1fr; gap: 40px; } }
.stack-section .section-tag { color: var(--p-300); }
.stack-section .section-tag::before { background: var(--p-300); }
.stack-section .section-h2 { color: #fff; }
.stack-section .section-h2 em { color: var(--p-300); }
.stack-section .lead {
font-size: 16px; color: rgba(255,255,255,0.65); line-height: 1.65;
}
.stack-section .lead strong { color: #fff; font-weight: 500; }
/* Floating chips arrangement */
.constellation {
position: relative;
aspect-ratio: 1 / 0.78;
}
.cnst-chip {
position: absolute;
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
padding: 9px 14px;
border-radius: 100px;
font-size: 13px;
color: #fff;
font-weight: 500;
letter-spacing: -0.005em;
animation: float 8s ease-in-out infinite;
transition: transform 0.3s var(--ease), background 0.3s, border-color 0.3s;
}
.cnst-chip:hover {
background: rgba(124, 77, 238, 0.25);
border-color: var(--p-300);
transform: translateY(-4px) scale(1.04);
}
.cnst-chip .d {
width: 8px; height: 8px; border-radius: 50%;
background: var(--p-400);
box-shadow: 0 0 8px var(--p-400);
}
.cnst-chip .d.t { background: var(--teal); box-shadow: 0 0 8px var(--teal); }
.cnst-chip .d.a { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
/* exact placements */
.c-anthropic { top: 4%; left: 14%; animation-delay: 0s; }
.c-openai { top: 14%; left: 56%; animation-delay: 1.5s; }
.c-gemini { top: 6%; right: 4%; animation-delay: 0.5s; }
.c-langgraph { top: 30%; left: 4%; animation-delay: 2s; }
.c-crewai { top: 38%; left: 38%; animation-delay: 1s; }
.c-llama { top: 30%; right: 14%; animation-delay: 2.5s; }
.c-bedrock { top: 58%; left: 18%; animation-delay: 0.8s; }
.c-azure { top: 50%; left: 54%; animation-delay: 1.8s; }
.c-g42 { top: 58%; right: 4%; animation-delay: 0.3s; }
.c-supabase { top: 80%; left: 4%; animation-delay: 2.2s; }
.c-pg { top: 84%; left: 42%; animation-delay: 0.6s; }
.c-temporal { top: 76%; right: 12%; animation-delay: 1.3s; }
@media (max-width: 760px) {
.constellation { aspect-ratio: 1 / 1.4; }
}
/* ===================== WHY US ===================== */
.why-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-top: 8px;
}
@media (max-width: 760px) { .why-grid { grid-template-columns: 1fr; } }
.why-cell {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 32px;
position: relative;
transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
overflow: hidden;
display: flex; gap: 22px;
}
.why-cell:hover {
transform: translateY(-4px);
border-color: var(--p-200);
box-shadow: 0 24px 60px -28px var(--purple-glow);
}
.why-glyph {
width: 56px; height: 56px;
flex-shrink: 0;
border-radius: var(--r-md);
background: var(--p-50);
display: inline-flex; align-items: center; justify-content: center;
color: var(--purple);
position: relative;
}
.why-glyph svg { width: 26px; height: 26px; }
.why-cell-num {
font-family: var(--mono);
font-size: 11px;
color: var(--purple);
letter-spacing: 0.12em;
margin-bottom: 12px;
font-weight: 600;
}
.why-cell-title {
font-family: var(--serif);
font-size: 22px;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 12px;
line-height: 1.22;
}
.why-cell-desc {
font-size: 14px;
color: var(--ink-soft);
line-height: 1.62;
}
/* ===================== HERO CLIENT LOGOS — logo wall ===================== */
.hero-clients {
margin-top: 38px;
padding-top: 26px;
border-top: 1px solid var(--line);
}
.hc-label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 16px;
display: flex; align-items: center; gap: 10px;
}
.hc-label::after {
content: '';
flex: 1; height: 1px;
background: linear-gradient(90deg, var(--line), transparent);
}
.hc-wall {
display: flex;
align-items: stretch;
gap: 10px;
flex-wrap: nowrap;
}
.hc-card {
flex: 1 1 0;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 56px;
padding: 0 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 2px 10px -6px rgba(70, 30, 160, 0.10);
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
position: relative;
overflow: hidden;
}
.hc-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 40%, rgba(124,77,238,0.10) 50%, transparent 60%);
transform: translateX(-120%);
transition: transform 0.7s var(--ease);
}
.hc-card:hover {
transform: translateY(-4px);
border-color: var(--p-200);
box-shadow: 0 16px 34px -16px rgba(70, 30, 160, 0.28);
}
.hc-card:hover::after { transform: translateX(120%); }
/* Vodafone */
.brand-vodafone .vf-icon { width: 26px; height: 26px; flex-shrink: 0; }
.brand-vodafone .vf-word {
font-family: 'Geist', sans-serif;
color: #e60000;
font-weight: 700;
font-size: 17px;
letter-spacing: -0.03em;
}
/* CP Axtra */
.brand-cpaxtra .cp-badge {
width: 26px; height: 26px; flex-shrink: 0;
border-radius: 6px;
background: linear-gradient(135deg, #e2231a, #b3160f);
display: inline-flex; align-items: center; justify-content: center;
color: #fff;
font-family: 'Geist', sans-serif;
font-weight: 800;
font-size: 11px;
letter-spacing: 0.02em;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.brand-cpaxtra .cp-word {
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 17px;
letter-spacing: -0.01em;
color: #14213d;
}
/* Aster */
.brand-aster .as-icon { width: 26px; height: 26px; flex-shrink: 0; }
.brand-aster .as-word {
font-family: 'Geist', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: -0.01em;
color: #2a3b47;
}
/* The New American — masthead */
.brand-tna { flex-direction: column; gap: 1px; line-height: 1; }
.brand-tna .tna-the {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-size: 11px;
color: #b3261e;
letter-spacing: 0.02em;
}
.brand-tna .tna-main {
font-family: 'Instrument Serif', serif;
font-weight: 400;
font-size: 19px;
letter-spacing: -0.01em;
color: #14213d;
white-space: nowrap;
}
/* 550 Group */
.brand-550 .g550-num {
font-family: 'Geist', sans-serif;
font-weight: 800;
font-size: 20px;
color: var(--ink);
letter-spacing: -0.03em;
}
.brand-550 .g550-word {
font-family: 'Geist Mono', monospace;
font-weight: 500;
font-size: 10px;
letter-spacing: 0.16em;
color: var(--ink-soft);
border-left: 1px solid var(--line-strong);
padding-left: 7px;
margin-left: 1px;
}
@media (max-width: 900px) {
.hc-wall {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding-bottom: 4px;
margin: 0 -20px;
padding-left: 20px; padding-right: 20px;
mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.hc-wall::-webkit-scrollbar { display: none; }
.hc-wall { scrollbar-width: none; }
.hc-card {
flex: 0 0 auto;
min-width: 140px;
scroll-snap-align: start;
height: 52px;
}
}
/* ===================== CASE WIDE (case 3) ===================== */
.case-wide-inner {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 36px;
}
@media (max-width: 880px) {
.case-wide-inner { grid-template-columns: 1fr; gap: 28px; }
}
/* ===================== TESTIMONIAL — dark, modern slab ===================== */
.testimonial-section {
padding: 80px 0 120px;
}
.testimonial-card {
position: relative;
background: #0c0a1f;
color: #fff;
border-radius: var(--r-xl);
padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 72px);
overflow: hidden;
isolation: isolate;
}
.tc-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
border-radius: var(--r-xl);
}
.tc-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.55;
}
.tc-orb-1 {
width: 520px; height: 520px;
background: radial-gradient(circle, #7c4dee, transparent 65%);
top: -180px; left: -120px;
animation: orb-drift 18s ease-in-out infinite alternate;
}
.tc-orb-2 {
width: 420px; height: 420px;
background: radial-gradient(circle, #b69bfb, transparent 65%);
bottom: -160px; right: -80px;
animation: orb-drift 22s ease-in-out infinite alternate-reverse;
}
@keyframes orb-drift {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(40px, 20px) scale(1.12); }
}
.tc-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 36px 36px;
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 75%);
}
.tc-inner {
position: relative;
z-index: 1;
max-width: 980px;
margin: 0 auto;
text-align: left;
}
.tc-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 14px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 100px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
margin-bottom: 36px;
}
.tc-stars {
color: var(--amber);
letter-spacing: 0.05em;
font-family: var(--sans);
font-size: 12px;
}
.tc-quote {
font-family: var(--serif);
font-style: italic;
font-size: clamp(28px, 4vw, 56px);
font-weight: 400;
line-height: 1.18;
letter-spacing: -0.02em;
color: #fff;
margin: 0 0 48px;
position: relative;
text-wrap: balance;
}
.tc-quote em {
color: var(--p-300);
font-style: italic;
background: linear-gradient(120deg, #b69bfb, #d4c2fd 50%, #b69bfb);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: shine 8s linear infinite;
}
.tc-mark {
font-family: var(--serif);
font-size: 1.2em;
color: var(--p-300);
margin-right: 4px;
display: inline-block;
vertical-align: -0.05em;
}
.tc-attr {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,0.10);
}
.tc-avatar {
width: 52px; height: 52px;
border-radius: 50%;
background: linear-gradient(160deg, var(--p-400), var(--p-700));
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: #fff;
letter-spacing: 0.06em;
box-shadow: 0 12px 24px -10px var(--purple-glow), inset 0 1px 0 rgba(255,255,255,0.25);
flex-shrink: 0;
}
.tc-name {
font-size: 15px;
font-weight: 500;
color: #fff;
letter-spacing: -0.005em;
margin-bottom: 3px;
}
.tc-meta {
font-size: 13px;
color: rgba(255,255,255,0.55);
font-family: var(--sans);
}
.tc-ref {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
color: rgba(255,255,255,0.55);
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 8px 14px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 100px;
}
.tc-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--success);
box-shadow: 0 0 0 4px rgba(15,107,49,0.20);
}
@media (max-width: 700px) {
.tc-ref { margin-left: 0; order: 3; }
}
/* legacy editorial quote — keep for safety, hidden */
.tquote, .tquote-attr { display: none; }
/* ===================== FAQ ===================== */
.faq-grid {
display: flex; flex-direction: column;
gap: 10px;
margin-top: 8px;
}
.faq-item {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-md);
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-item:hover { border-color: var(--p-200); }
.faq-item.open {
border-color: var(--p-300);
box-shadow: 0 14px 36px -22px var(--purple-glow);
}
.faq-q {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
padding: 22px 28px;
font-family: var(--serif);
font-size: 22px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.015em;
line-height: 1.25;
}
.faq-toggle {
width: 32px; height: 32px;
flex-shrink: 0;
border-radius: 50%;
background: var(--p-50);
color: var(--purple);
display: inline-flex; align-items: center; justify-content: center;
transition: transform 0.3s var(--ease), background 0.3s;
}
.faq-toggle svg { width: 14px; height: 14px; }
.faq-item.open .faq-toggle {
background: var(--purple); color: #fff; transform: rotate(45deg);
}
.faq-a-wrap {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s var(--ease);
}
.faq-item.open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a {
color: var(--ink-soft);
font-size: 15px;
line-height: 1.7;
padding: 0 28px 24px 28px;
max-width: 70ch;
}
/* ===================== CTA FORM ===================== */
.cta-section {
position: relative;
padding: 120px 0 140px;
overflow: hidden;
background: var(--bg-soft);
}
.cta-section::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 50% at 50% 30%, var(--p-50), transparent 65%);
pointer-events: none;
}
.cta-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 64px;
align-items: start;
position: relative;
z-index: 2;
}
@media (max-width: 980px) { .cta-grid { grid-template-columns: 1fr; gap: 40px; } }
.cta-head .section-h2 { margin-bottom: 24px; }
.cta-head .lead {
font-size: 17px;
color: var(--ink-soft);
max-width: 52ch;
line-height: 1.6;
margin-bottom: 28px;
}
.cta-bullets {
list-style: none;
display: flex; flex-direction: column;
gap: 14px;
margin-bottom: 28px;
}
.cta-bullets li {
display: flex; align-items: flex-start; gap: 12px;
font-size: 15px;
color: var(--ink-2);
}
.cta-bullets svg {
width: 22px; height: 22px;
flex-shrink: 0;
margin-top: 1px;
color: var(--purple);
}
.cta-meta {
display: flex; gap: 24px;
flex-wrap: wrap;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.cta-meta div { font-size: 13px; color: var(--ink-mute); line-height: 1.5; }
.cta-meta strong { display: block; font-size: 14px; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.form-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 36px;
box-shadow:
0 30px 80px -30px rgba(70, 30, 160, 0.25),
0 2px 8px -4px rgba(70, 30, 160, 0.06);
position: relative;
overflow: hidden;
}
.form-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--p-400), var(--p-700));
}
.form-title {
font-family: var(--serif);
font-size: 26px;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 6px;
}
.form-sub {
font-size: 14px;
color: var(--ink-mute);
margin-bottom: 24px;
}
.form-row { display: grid; gap: 16px; }
.form-row.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form-row.two { grid-template-columns: 1fr; } }
.field { position: relative; }
.field label {
font-size: 14px;
color: var(--ink-mute);
pointer-events: none;
transition: all 0.2s var(--ease);
background: var(--surface);
padding: 0 4px;
margin: 0;
}
.field > p {
margin: 0;
}
.field input,
.field textarea,
.field select {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
font-family: var(--sans);
font-size: 15px;
color: var(--ink);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
letter-spacing: -0.005em;
}
.field textarea {
min-height: 110px;
height: 110px;
resize: vertical;
line-height: 1.5;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
border-color: var(--purple);
box-shadow: 0 0 0 4px var(--p-50);
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label,
.field select:valid + label,
.field select:focus + label {
top: 0;
font-size: 11px;
color: var(--purple);
font-weight: 500;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.field select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
cursor: pointer;
}
.form-submit {
margin-top: 22px; width: 100%;
justify-content: center;
padding: 16px 22px;
font-size: 15px;
font-weight: 500;
}
.form-fine {
margin-top: 14px;
font-size: 12px;
color: var(--ink-mute);
text-align: center;
line-height: 1.55;
}
.form-success {
display: none;
text-align: center;
padding: 40px 16px;
}
.form-card.sent .form-actual { display: none; }
.form-card.sent .form-success { display: block; }
.form-success .ic {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--p-50);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.form-success .ic svg { width: 28px; height: 28px; color: var(--purple); }
.form-success h3 {
font-family: var(--serif);
font-size: 28px;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 8px;
}
.form-success p {
font-size: 15px;
color: var(--ink-soft);
max-width: 36ch;
margin: 0 auto;
line-height: 1.55;
}
/* ===================== FOOTER ===================== */
footer {
border-top: 1px solid var(--line);
padding: 56px 0 40px;
background: var(--bg);
position: relative;
z-index: 3;
}
.foot-grid {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 32px;
}
.foot-brand .logo-img { height: 36px; margin-bottom: 14px; }
.foot-brand p {
font-size: 14px;
color: var(--ink-mute);
max-width: 40ch;
line-height: 1.6;
}
.foot-meta {
font-size: 13px;
color: var(--ink-mute);
line-height: 1.7;
text-align: right;
}
.foot-locations {
display: flex; gap: 16px; flex-wrap: wrap;
justify-content: flex-end;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-2);
margin-bottom: 8px;
}
@media (max-width: 700px) {
.foot-meta, .foot-locations { text-align: left; justify-content: flex-start; }
}
/* ===================== STICKY CTA ===================== */
.sticky-cta {
position: fixed;
bottom: 22px; right: 22px;
z-index: 90;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s, transform 0.4s;
pointer-events: none;
}
.sticky-cta.show {
opacity: 1; transform: translateY(0); pointer-events: auto;
}
.sticky-cta a {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
background: var(--ink);
color: #fff;
border-radius: 100px;
font-size: 14px; font-weight: 500;
text-decoration: none;
box-shadow: 0 14px 40px -10px rgba(70, 30, 160, 0.45);
transition: transform 0.2s, background 0.2s;
}
.sticky-cta a:hover {
background: var(--purple);
transform: translateY(-2px);
}
@media (max-width: 600px) {
.sticky-cta { left: 22px; right: 22px; }
.sticky-cta a { width: 100%; justify-content: center; }
}
/* ===================== REVEAL ===================== */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }
/* =========================================================
GRAPHIC VIZ COMPONENTS (v3 — more visuals)
========================================================= */
/* ---- Pilot Mortality Funnel ---- */
.pmf {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 36px;
position: relative;
overflow: hidden;
box-shadow: 0 18px 50px -28px rgba(70, 30, 160, 0.18);
}
.pmf-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 24px;
flex-wrap: wrap; gap: 12px;
}
.pmf-title {
font-size: 13px; color: var(--ink-2); font-weight: 500;
display: flex; align-items: center; gap: 10px;
}
.pmf-title .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--purple);
box-shadow: 0 0 0 4px var(--p-50);
}
.pmf-source {
font-family: var(--mono); font-size: 10.5px;
color: var(--ink-mute); letter-spacing: 0.06em;
}
.pmf-headline {
display: flex; align-items: baseline; gap: 18px;
margin-bottom: 22px;
flex-wrap: wrap;
}
.pmf-headline .big {
font-family: var(--serif);
font-size: clamp(74px, 11vw, 124px);
font-weight: 400;
color: var(--purple);
line-height: 0.9;
letter-spacing: -0.04em;
}
.pmf-headline .lbl {
font-size: 14.5px;
color: var(--ink-2);
max-width: 22ch;
line-height: 1.4;
}
.pmf-funnel {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
margin: 24px 0 12px;
position: relative;
}
.pmf-stage {
text-align: center;
position: relative;
}
.pmf-stage .label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 8px;
min-height: 24px;
display: flex; align-items: center; justify-content: center;
}
.pmf-bar {
height: 78px;
border-radius: 8px;
position: relative;
overflow: hidden;
background: var(--surface-2);
border: 1px solid var(--line);
display: flex; align-items: flex-end;
justify-content: center;
}
.pmf-fill {
width: 100%;
background: linear-gradient(180deg, var(--p-400), var(--p-700));
border-radius: 7px 7px 0 0;
position: relative;
transition: height 1.2s var(--ease);
display: flex; align-items: flex-end; justify-content: center;
padding-bottom: 6px;
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
color: #fff;
}
.pmf-fill::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent, rgba(255,255,255,0.5), transparent);
transform: translateY(110%);
animation: shimmer-y 4s linear infinite;
}
@keyframes shimmer-y {
to { transform: translateY(-110%); }
}
.pmf-drop {
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.05em;
color: var(--warn);
font-weight: 600;
background: var(--coral-2);
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
}
.pmf-stage .v {
margin-top: 8px;
font-family: var(--serif);
font-size: 22px;
color: var(--ink);
font-weight: 400;
letter-spacing: -0.02em;
}
.pmf-arrow {
position: absolute;
top: 42px;
right: -4px;
z-index: 2;
font-size: 12px;
color: var(--ink-mute);
}
.pmf-stage:last-child .pmf-arrow { display: none; }
.pmf-divider {
margin-top: 22px;
padding-top: 22px;
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: auto 1fr;
gap: 18px;
align-items: center;
}
.pmf-mini {
font-family: var(--serif);
font-size: 52px;
line-height: 0.9;
color: var(--ink);
letter-spacing: -0.03em;
}
.pmf-mini em { color: var(--purple); font-style: normal; }
.pmf-divider p {
font-size: 13.5px;
color: var(--ink-soft);
line-height: 1.5;
}
/* ---- Phase Illustrations (timeline) ---- */
.tl-body {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: stretch;
}
.tl-body.has-viz {
grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 760px) {
.tl-body.has-viz { grid-template-columns: 1fr; }
}
.tl-viz {
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 18px;
position: relative;
overflow: hidden;
min-height: 200px;
display: flex;
flex-direction: column;
}
.tl-viz .viz-title {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-mute);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 14px;
}
/* Phase 1 — Opportunity Matrix */
.op-matrix {
display: flex; flex-direction: column;
gap: 8px;
}
.op-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
}
.op-row .nm {
font-size: 12.5px;
color: var(--ink-2);
font-weight: 500;
}
.op-bars {
display: flex; gap: 4px; align-items: center;
}
.op-bars .b {
width: 7px; height: 14px;
background: var(--surface-2);
border-radius: 2px;
}
.op-bars .b.on { background: var(--purple); }
.op-row .score {
font-family: var(--mono);
font-size: 11px;
color: var(--purple);
font-weight: 600;
letter-spacing: 0.04em;
padding: 2px 8px;
background: var(--p-50);
border-radius: 4px;
min-width: 38px;
text-align: center;
}
/* Phase 2 — Live dashboard */
.dash-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.dash-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px;
}
.dash-card .lb {
font-family: var(--mono);
font-size: 9.5px;
color: var(--ink-mute);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 4px;
}
.dash-card .vl {
font-family: var(--serif);
font-size: 24px;
color: var(--ink);
font-weight: 400;
line-height: 1;
letter-spacing: -0.02em;
}
.dash-card .vl em { color: var(--purple); font-style: normal; }
.dash-card .ch {
margin-top: 6px;
font-size: 10.5px;
color: var(--success);
font-family: var(--mono);
}
.dash-card .ch.warn { color: var(--warn); }
.dash-spark {
margin-top: 12px;
height: 36px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
padding: 6px 10px;
display: flex; align-items: center; gap: 6px;
}
.dash-spark .sp {
flex: 1;
height: 100%;
position: relative;
}
.dash-spark .sp::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(124,77,238,0.20), transparent 80%);
clip-path: polygon(0 70%, 8% 60%, 16% 65%, 24% 50%, 32% 55%, 40% 35%, 48% 40%, 56% 25%, 64% 30%, 72% 18%, 80% 22%, 88% 12%, 100% 8%, 100% 100%, 0 100%);
}
.dash-spark .sp::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, var(--purple), transparent 80%);
clip-path: polygon(0 70%, 8% 60%, 16% 65%, 24% 50%, 32% 55%, 40% 35%, 48% 40%, 56% 25%, 64% 30%, 72% 18%, 80% 22%, 88% 12%, 100% 8%, 100% 9%, 88% 13%, 80% 23%, 72% 19%, 64% 31%, 56% 26%, 48% 41%, 40% 36%, 32% 56%, 24% 51%, 16% 66%, 8% 61%, 0 71%);
opacity: 0.9;
}
.dash-spark .sp-label {
font-family: var(--mono); font-size: 9.5px;
color: var(--ink-mute); letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Phase 3 — Integration topology */
.topo {
position: relative;
flex: 1;
min-height: 160px;
}
.topo-hub {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: var(--purple);
color: #fff;
border-radius: 8px;
padding: 8px 12px;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
z-index: 2;
box-shadow: 0 6px 18px -6px var(--purple-glow);
}
.topo-node {
position: absolute;
background: #fff;
border: 1px solid var(--line);
border-radius: 6px;
padding: 5px 9px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-2);
letter-spacing: 0.04em;
z-index: 2;
}
.topo-n1 { top: 4%; left: 6%; }
.topo-n2 { top: 4%; right: 6%; }
.topo-n3 { top: 50%; left: 0; transform: translateY(-50%); }
.topo-n4 { top: 50%; right: 0; transform: translateY(-50%); }
.topo-n5 { bottom: 4%; left: 18%; }
.topo-n6 { bottom: 4%; right: 18%; }
.topo svg.topo-svg {
position: absolute; inset: 0;
width: 100%; height: 100%;
z-index: 1;
}
.topo svg .ln {
stroke: var(--p-200);
stroke-width: 1.2;
stroke-dasharray: 3 3;
fill: none;
animation: dash 6s linear infinite;
}
/* Phase 4 — Deliverables stack */
.deliv-stack {
display: flex; flex-direction: column;
gap: 6px;
flex: 1;
}
.deliv-item {
background: #fff;
border: 1px solid var(--line);
border-radius: 8px;
padding: 9px 12px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center;
font-size: 12px;
color: var(--ink-2);
}
.deliv-item .ic {
width: 22px; height: 22px;
border-radius: 6px;
background: var(--p-50);
display: inline-flex; align-items: center; justify-content: center;
color: var(--purple);
}
.deliv-item .ic svg { width: 12px; height: 12px; }
.deliv-item .check {
font-family: var(--mono);
font-size: 10px;
color: var(--success);
letter-spacing: 0.06em;
}
.deliv-item.transfer { border-color: var(--p-200); background: linear-gradient(90deg, #fff, var(--p-50)); }
/* ---- Why Us — Mini Illustrations ---- */
.why-cell {
flex-direction: column;
gap: 24px;
}
.why-illus {
height: 132px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 14px;
position: relative;
overflow: hidden;
}
/* GCC map mini */
.illus-map {
width: 100%; height: 100%;
}
.illus-map svg { width: 100%; height: 100%; display: block; }
.illus-map .pin {
animation: pin-pulse 3s ease-in-out infinite;
}
.illus-map .pin-2 { animation-delay: 0.5s; }
.illus-map .pin-3 { animation-delay: 1s; }
.illus-map .pin-4 { animation-delay: 1.5s; }
.illus-map .pin-5 { animation-delay: 2s; }
@keyframes pin-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
/* IP ownership vault */
.illus-vault {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
height: 100%;
}
.illus-vault .file {
background: #fff;
border: 1px solid var(--line);
border-radius: 6px;
padding: 6px 8px;
display: flex; align-items: center; gap: 6px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-2);
letter-spacing: 0.03em;
}
.illus-vault .file .ic {
width: 14px; height: 14px;
border-radius: 3px;
background: var(--p-50);
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
color: var(--purple);
}
.illus-vault .file .ic svg { width: 8px; height: 8px; }
.illus-vault .file .lock {
margin-left: auto;
font-size: 10px;
color: var(--success);
}
/* Engineer headcount grid */
.illus-eng {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 4px;
align-items: center;
height: 100%;
}
.illus-eng .dot {
aspect-ratio: 1;
border-radius: 50%;
background: linear-gradient(135deg, var(--p-300), var(--p-600));
opacity: 0.85;
}
.illus-eng .dot.muted { background: var(--surface-2); border: 1px solid var(--line); opacity: 1; }
.illus-eng .count {
grid-column: span 12;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-mute);
letter-spacing: 0.06em;
margin-top: 4px;
text-align: right;
}
/* CEO in the room — meeting table */
.illus-meet {
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.illus-meet svg { width: 100%; height: 100%; }
.illus-meet .seat-ceo { fill: var(--purple); }
.illus-meet .table { fill: #fff; stroke: var(--line-strong); stroke-width: 1.2; }
.illus-meet .seat { fill: var(--surface-3); }
.illus-meet .label {
position: absolute;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.08em;
color: var(--purple);
font-weight: 600;
background: #fff;
padding: 2px 6px;
border-radius: 4px;
border: 1px solid var(--p-200);
}
.illus-meet .label-ceo {
top: 6%; left: 50%; transform: translateX(-50%);
}
.why-cell-body { display: contents; }
.why-cell .why-glyph { display: none; }
/* ---- Section dividers — subtle SVG flourish ---- */
.flourish {
display: flex; align-items: center; justify-content: center;
padding: 24px 0;
opacity: 0.45;
}
.flourish svg { width: 64px; height: 14px; }
@media (max-width: 880px) {
.pmf { padding: 24px; }
.pmf-funnel { grid-template-columns: repeat(5, 1fr); gap: 4px; }
.pmf-stage .label { font-size: 8.5px; min-height: 18px; }
.pmf-bar { height: 60px; }
.pmf-stage .v { font-size: 17px; }
.pmf-drop { font-size: 8.5px; padding: 1px 4px; }
.pmf-arrow { display: none; }
.tl-body.has-viz { grid-template-columns: 1fr; gap: 18px; }
.tl-viz { padding: 14px; min-height: 160px; }
.why-cell { gap: 18px; }
.why-illus { height: 110px; padding: 10px; }
}
/* ===================================================
MOBILE OPTIMIZATION
=================================================== */
@media (max-width: 880px) {
/* tighten section vertical rhythm */
section { padding: 72px 0; }
.container { padding: 0 20px; }
/* nav */
.nav-inner { padding: 12px 16px; }
.logo-img { height: 28px; }
/* hero copy tighter */
.hero { padding: 24px 0 32px; }
.hero-grid { gap: 32px; }
.h1 { font-size: clamp(42px, 9vw, 64px); margin-bottom: 20px; }
.h1-sub { font-size: 16.5px; margin-bottom: 28px; }
.eyebrow { margin-bottom: 20px; font-size: 12px; padding-left: 4px; }
.eyebrow .chip { font-size: 10px; padding: 3px 8px; }
.hero-ctas .btn { padding: 13px 18px; font-size: 14px; }
/* hero visual scales down */
.hero-visual { aspect-ratio: 1 / 0.9; }
.hv-hub { width: 96px; height: 96px; font-size: 26px; }
.hv-chip { padding: 8px 12px; font-size: 11px; }
.hv-chip .ic { width: 22px; height: 22px; border-radius: 6px; }
.hv-chip.right { right: -2%; }
/* hero meta wrap */
.hero-meta { font-size: 12.5px; flex-wrap: wrap; gap: 12px; }
/* trust strip */
.trust { padding: 40px 0 48px; }
.trust-row { gap: 22px 32px; }
.trust-row .bold { font-size: 18px; }
.trust-row .serif { font-size: 19px; }
.trust-row .mono { font-size: 12px; }
.trust-row span { font-size: 15px; }
/* section h2 */
.section-h2 { font-size: clamp(32px, 7.5vw, 48px); }
.section-lead { font-size: 16px; margin-bottom: 36px; }
/* problem chart */
.pilot-chart { padding: 28px; }
.pc-stat .big { font-size: clamp(72px, 16vw, 96px); }
.pc-mini { font-size: 44px; }
/* bento padding */
.bento .card { padding: 24px; border-radius: 18px; }
.case-title { font-size: 22px; }
.case-context { font-size: 14px; }
.case-solution { font-size: 13px; }
.kpi-row { grid-template-columns: 1fr 1fr !important; gap: 8px; }
.kpi { padding: 10px 12px; }
.kpi .v { font-size: 22px; }
/* case 1 roster heatmap — keep dense but fits */
.viz-roster { gap: 2px; }
/* case 2 channel merge — stack vertically on mobile */
.viz-channels {
grid-template-columns: 1fr;
gap: 8px;
}
.viz-channels .arrow-x {
transform: rotate(90deg);
height: 18px;
}
.viz-channels .agent { padding: 14px; }
/* case 3 wide grid — already collapses at 880 via case-wide-inner rule */
.case-wide-inner { gap: 24px; }
.case-wide .case-title { font-size: 22px !important; }
/* framework / compare */
.compare-col { padding: 28px 24px; }
.compare-title { font-size: 22px; }
.compare-col.new::after { right: 16px; font-size: 9px; padding: 4px 10px; }
/* agent flow */
.agent-flow { padding: 32px 24px; margin-top: 36px; }
.af-title { font-size: 24px; }
.af-stages { grid-template-columns: 1fr; gap: 10px; }
.af-stage { padding: 16px; }
.af-rails { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
.af-rail { padding: 16px; }
/* approach timeline */
.tl-step { grid-template-columns: 48px 1fr; gap: 16px; padding: 22px 0; }
.tl-dot { width: 48px; height: 48px; font-size: 18px; }
.timeline::before,
.tl-body { padding: 22px 22px; border-radius: 16px; }
.tl-title { font-size: 22px; }
.tl-desc { font-size: 14px; }
.tl-deliv span { font-size: 10.5px; padding: 3px 8px; }
/* tech stack constellation */
.stack-section { margin: 0 16px; padding: 56px 24px; border-radius: 24px; }
.stack-grid { grid-template-columns: 1fr; gap: 32px; }
.constellation { aspect-ratio: 1 / 1.6; max-height: 560px; }
.cnst-chip { font-size: 12px; padding: 7px 12px; }
/* re-place chips into a compact column layout on mobile */
.c-anthropic { top: 2%; left: 6%; }
.c-openai { top: 10%; right: 6%; left: auto; }
.c-gemini { top: 18%; left: 24%; right: auto; }
.c-langgraph { top: 26%; right: 4%; left: auto; }
.c-crewai { top: 34%; left: 4%; }
.c-llama { top: 42%; right: 8%; left: auto; }
.c-bedrock { top: 50%; left: 14%; }
.c-azure { top: 58%; right: 4%; left: auto; }
.c-g42 { top: 66%; left: 4%; right: auto; }
.c-supabase { top: 74%; right: 14%; left: auto; }
.c-pg { top: 82%; left: 6%; }
.c-temporal { top: 90%; right: 8%; left: auto; }
/* why us */
.why-cell { padding: 24px; gap: 16px; flex-direction: column; }
.why-glyph { width: 48px; height: 48px; }
.why-glyph svg { width: 22px; height: 22px; }
.why-cell-title { font-size: 19px; }
/* testimonial */
.testimonial-section { padding: 56px 0 80px; }
.testimonial-card { padding: 48px 28px; border-radius: 20px; }
.tc-quote { font-size: clamp(22px, 6vw, 32px); margin-bottom: 32px; }
.tc-attr { gap: 12px; padding-top: 24px; }
.tc-avatar { width: 44px; height: 44px; font-size: 10px; }
.tc-name { font-size: 14px; }
.tc-meta { font-size: 12px; }
/* faq */
.faq-q { padding: 18px 20px; font-size: 17px; gap: 16px; }
.faq-a { padding: 0 20px 20px 20px; font-size: 14px; }
.faq-toggle { width: 28px; height: 28px; }
/* cta */
.cta-section { padding: 72px 0 88px; }
.cta-grid { gap: 32px; }
.form-card { padding: 24px; border-radius: 22px; }
.form-title { font-size: 22px; }
.field input, .field textarea, .field select { font-size: 16px; /* prevent iOS zoom */ }
.cta-meta { gap: 16px; padding-top: 20px; }
/* footer */
footer { padding: 40px 0 32px; }
.foot-grid { flex-direction: column; align-items: flex-start; gap: 24px; }
.foot-meta, .foot-locations { text-align: left; justify-content: flex-start; }
.foot-brand .logo-img { height: 30px; }
/* sticky cta */
.sticky-cta { bottom: 16px; }
.sticky-cta a { padding: 12px 18px; font-size: 13.5px; }
}
@media (max-width: 520px) {
.h1 { font-size: clamp(36px, 10vw, 52px); }
.hero-ctas { gap: 8px; }
.hero-ctas .btn { padding: 12px 16px; font-size: 13.5px; width: 100%; justify-content: center; }
.hero-clients { margin-top: 28px; padding-top: 0; }
.hc-row { gap: 14px 22px; }
/* hero chips — reduce clutter on tiny screens */
.hv-chip.hv-chip-3 { display: none; }
.hv-hub { width: 88px; height: 88px; font-size: 24px; }
/* avoid testimonial quote getting unreadable */
.tc-quote { font-size: 22px; }
.tc-eyebrow { margin-bottom: 24px; font-size: 10px; padding: 5px 12px; }
/* nav links hide already, ensure CTA still visible */
.nav-cta { padding: 8px 14px !important; font-size: 12px !important; }
/* compare cols */
.compare-col { padding: 24px 20px; }
.compare-list li { font-size: 13.5px; padding-left: 28px; }
/* funnel rows */
.viz-funnel .row { grid-template-columns: 70px 1fr 50px; gap: 8px; }
.viz-funnel .row .lbl { font-size: 10.5px; }
}
/* =========================================================
v5 — Nav logo highlight, modal, richer case animations
========================================================= */
/* ----- Nav logo: single line + highlighted chip ----- */
.logo-link {
padding: 6px 12px;
border-radius: 12px;
background: #fff;
border: 1px solid var(--line);
box-shadow: 0 4px 16px -10px rgba(70, 30, 160, 0.25);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s;
white-space: nowrap;
line-height: 0;
}
.logo-link:hover {
transform: translateY(-1px);
border-color: var(--p-200);
box-shadow: 0 10px 26px -12px var(--purple-glow);
}
.nav .logo-img { height: 30px; }
.foot-brand .logo-link { background: transparent; border: none; box-shadow: none; padding: 0; }
@media (max-width: 820px) {
.nav .logo-img { height: 26px; }
.logo-link { padding: 5px 10px; }
}
/* ----- CTA Modal ----- */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(12, 10, 31, 0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
position: relative;
width: 100%;
max-width: 460px;
background: var(--surface);
border-radius: var(--r-xl);
padding: 36px;
box-shadow: 0 40px 100px -30px rgba(12, 10, 31, 0.6);
transform: translateY(24px) scale(0.97);
opacity: 0;
transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
max-height: 92vh;
overflow-y: auto;
height: auto;
display: block;
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); opacity: 1; }
.modal::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
border-radius: var(--r-xl) var(--r-xl) 0 0;
background: linear-gradient(90deg, var(--p-400), var(--p-700));
}
.modal-close {
position: absolute;
top: 18px; right: 18px;
width: 34px; height: 34px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--ink-soft);
font-size: 18px;
line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
transition: background 0.2s, color 0.2s, transform 0.2s;
}
.modal-close:hover { background: var(--ink); color: #fff; transform: rotate(90deg); }
.modal-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--purple);
background: var(--p-50);
padding: 5px 12px;
border-radius: 100px;
margin-bottom: 16px;
}
.modal-eyebrow .d { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(15,107,49,0.18); }
.modal-title {
font-family: var(--serif);
font-size: 30px;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.1;
margin-bottom: 8px;
}
.modal-sub {
font-size: 14px;
color: var(--ink-soft);
margin-bottom: 24px;
line-height: 1.5;
}
.modal .form-row { display: grid; gap: 14px; margin-bottom: 14px; }
.modal .form-row.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 420px) { .modal .form-row.two { grid-template-columns: 1fr; } }
.modal .field input,
.modal .field textarea {
font-size: 16px;
}
.modal-submit { width: 100%; justify-content: center; margin-top: 6px; }
.modal-fine {
margin-top: 12px;
font-size: 11.5px;
color: var(--ink-mute);
text-align: center;
line-height: 1.5;
}
.modal-success { display: none; text-align: center; padding: 20px 8px; }
.modal.sent .modal-form { display: none; }
.modal.sent .modal-success { display: block; }
.modal-success .ic {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--p-50);
display: inline-flex; align-items: center; justify-content: center;
margin: 0 auto 18px;
animation: pop-check 0.5s var(--ease) both;
}
@keyframes pop-check { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.modal-success .ic svg { width: 28px; height: 28px; color: var(--purple); }
.modal-success h3 { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.02em; }
.modal-success p { font-size: 14.5px; color: var(--ink-soft); max-width: 34ch; margin: 0 auto; line-height: 1.55; }
/* ----- Case-study scroll-triggered animations ----- */
.case-card { will-change: transform; }
/* roster heatmap cascade */
.viz-roster .cell {
opacity: 0;
transform: scale(0.4);
}
.case-card.viz-in
@keyframes cellPop {
0% { opacity: 0; transform: scale(0.4); }
60% { opacity: 1; transform: scale(1.12); }
100% { opacity: 1; transform: scale(1); }
}
/* channel chips slide-in */
.viz-channels .ch,
.viz-channels .clean {
opacity: 0;
transform: translateX(-10px);
}
.viz-channels .agent { opacity: 0; transform: scale(0.9); }
.case-card.viz-in .viz-channels .ch:nth-child(1) { animation: slideIn 0.5s var(--ease) 0.05s forwards; }
.case-card.viz-in .viz-channels .ch:nth-child(2) { animation: slideIn 0.5s var(--ease) 0.12s forwards; }
.case-card.viz-in .viz-channels .ch:nth-child(3) { animation: slideIn 0.5s var(--ease) 0.19s forwards; }
.case-card.viz-in .viz-channels .ch:nth-child(4) { animation: slideIn 0.5s var(--ease) 0.26s forwards; }
.case-card.viz-in .viz-channels .agent { animation: popScale 0.5s var(--ease) 0.34s forwards; }
.case-card.viz-in .viz-channels .clean { animation: slideInR 0.5s var(--ease) 0.46s forwards; }
.case-card.viz-in .viz-channels .clean:nth-child(2) { animation-delay: 0.52s; }
.case-card.viz-in .viz-channels .clean:nth-child(3) { animation-delay: 0.58s; }
.case-card.viz-in .viz-channels .clean:nth-child(4) { animation-delay: 0.64s; }
@keyframes slideIn { to { opacity: 1; transform: translateX(0); } }
@keyframes slideInR { from { opacity: 0; transform: translateX(10px);} to { opacity: 1; transform: translateX(0); } }
@keyframes popScale { to { opacity: 1; transform: scale(1); } }
/* funnel bars grow */
.viz-funnel .fill { transform: scaleX(0); transform-origin: left center; }
.case-card.viz-in .viz-funnel .row:nth-child(1) .fill { animation: growX 0.9s var(--ease) 0.1s forwards; }
.case-card.viz-in .viz-funnel .row:nth-child(2) .fill { animation: growX 0.9s var(--ease) 0.25s forwards; }
.case-card.viz-in .viz-funnel .row:nth-child(3) .fill { animation: growX 0.9s var(--ease) 0.4s forwards; }
.case-card.viz-in .viz-funnel .row:nth-child(4) .fill { animation: growX 0.9s var(--ease) 0.55s forwards; }
.viz-funnel .delta { opacity: 0; transform: translateY(8px); }
.case-card.viz-in .viz-funnel .delta { animation: slideUp 0.6s var(--ease) 0.8s forwards; }
@keyframes growX { to { transform: scaleX(1); } }
@keyframes slideUp { to { opacity: 1; transform: translateY(0); } }
/* KPI tiles cascade */
.kpi { opacity: 0; transform: translateY(12px); }
.case-card.viz-in .kpi { animation: kpiIn 0.5s var(--ease) forwards; }
.case-card.viz-in .kpi:nth-child(1) { animation-delay: 0.1s; }
.case-card.viz-in .kpi:nth-child(2) { animation-delay: 0.18s; }
.case-card.viz-in .kpi:nth-child(3) { animation-delay: 0.26s; }
.case-card.viz-in .kpi:nth-child(4) { animation-delay: 0.34s; }
@keyframes kpiIn { to { opacity: 1; transform: translateY(0); } }
.kpi .v { display: inline-block; }
.case-card.viz-in .kpi .v { animation: kpiPop 0.5s var(--ease) both; }
@keyframes kpiPop { 0% { transform: scale(0.6); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
/* pmf funnel bars grow on view */
.pmf-fill { transform: scaleY(0); transform-origin: bottom; }
.pmf.viz-in .pmf-stage:nth-child(1) .pmf-fill { animation: growY 0.8s var(--ease) 0.1s forwards; }
.pmf.viz-in .pmf-stage:nth-child(2) .pmf-fill { animation: growY 0.8s var(--ease) 0.24s forwards; }
.pmf.viz-in .pmf-stage:nth-child(3) .pmf-fill { animation: growY 0.8s var(--ease) 0.38s forwards; }
.pmf.viz-in .pmf-stage:nth-child(4) .pmf-fill { animation: growY 0.8s var(--ease) 0.52s forwards; }
.pmf.viz-in .pmf-stage:nth-child(5) .pmf-fill { animation: growY 0.8s var(--ease) 0.66s forwards; }
.pmf-drop { opacity: 0; }
.pmf.viz-in .pmf-drop { animation: slideUp 0.5s var(--ease) 0.9s forwards; }
@keyframes growY { to { transform: scaleY(1); } }
/* ----- Framework af-title — bigger + animated underline ----- */
.af-title {
font-size: clamp(34px, 4.2vw, 52px) !important;
max-width: 20ch !important;
line-height: 1.08 !important;
}
.af-title em {
position: relative;
display: inline-block;
}
.af-title em::after {
content: '';
position: absolute;
left: 0; bottom: 0.04em;
width: 100%; height: 0.5em;
background: linear-gradient(90deg, var(--p-200), var(--p-400));
opacity: 0.28;
z-index: -1;
transform: scaleX(0);
transform-origin: left;
border-radius: 4px;
}
.agent-flow.viz-in .af-title em::after { animation: growX 0.9s var(--ease) 0.3s forwards; }
.agent-flow {
position: relative;
overflow: hidden;
}
.agent-flow::after {
content: '';
position: absolute;
right: -120px; top: -120px;
width: 360px; height: 360px;
background: radial-gradient(circle, var(--p-50), transparent 70%);
pointer-events: none;
}
.af-stage {
opacity: 0;
transform: translateY(16px);
}
.agent-flow.viz-in .af-stage { animation: kpiIn 0.55s var(--ease) forwards; }
.agent-flow.viz-in .af-stage:nth-child(1) { animation-delay: 0.15s; }
.agent-flow.viz-in .af-stage:nth-child(2) { animation-delay: 0.27s; }
.agent-flow.viz-in .af-stage:nth-child(3) { animation-delay: 0.39s; }
.agent-flow.viz-in .af-stage:nth-child(4) { animation-delay: 0.51s; }
.agent-flow.viz-in .af-stage:nth-child(5) { animation-delay: 0.63s; }
.af-stage::after { transition: color 0.3s; }
.agent-flow.viz-in .af-stage::after { animation: arrowPulse 1.6s var(--ease) infinite; }
@keyframes arrowPulse {
0%, 100% { color: var(--ink-mute); transform: translate(0, -50%); }
50% { color: var(--purple); transform: translate(4px, -50%); }
}
.af-rail {
opacity: 0;
transform: translateY(16px);
}
.agent-flow.viz-in .af-rail { animation: kpiIn 0.55s var(--ease) forwards; }
.agent-flow.viz-in .af-rail:nth-child(1) { animation-delay: 0.7s; }
.agent-flow.viz-in .af-rail:nth-child(2) { animation-delay: 0.8s; }
.agent-flow.viz-in .af-rail:nth-child(3) { animation-delay: 0.9s; }
.af-rail .icb { transition: transform 0.3s var(--ease); }
.af-rail:hover .icb { transform: scale(1.12) rotate(-6deg); }
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; }
.viz-roster .cell, .viz-channels .ch, .viz-channels .clean, .viz-channels .agent,
.viz-funnel .fill, .viz-funnel .delta, .kpi, .af-stage, .af-rail, .pmf-fill, .pmf-drop {
opacity: 1 !important; transform: none !important;
}
}
/* =========================================================
v6 — Conversion redesign: less text, more visuals
========================================================= */
.section-head-center { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.section-h2.center { margin-left: auto; margin-right: auto; }
.section-lead.center { margin-left: auto; margin-right: auto; }
/* ----- Product screenshot frame ----- */
.screen-frame {
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--line);
background: #fff;
box-shadow: 0 34px 90px -40px rgba(70, 30, 160, 0.30), 0 4px 14px -6px rgba(70,30,160,0.08);
transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.screen-frame:hover { transform: translateY(-6px); box-shadow: 0 44px 110px -40px rgba(70, 30, 160, 0.38); }
.screen-frame img { width: 100%; height: auto; display: block; }
/* ----- PROBLEM split ----- */
.problem2 { padding: 110px 0; }
.split {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 60px;
align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } }
.split-lead { font-size: 18px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 26px; max-width: 46ch; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.fact {
font-size: 13.5px;
color: var(--ink-2);
padding: 8px 14px;
border-radius: 100px;
background: var(--surface-2);
border: 1px solid var(--line);
font-weight: 500;
}
/* ----- HOW: 3 steps ----- */
.how { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 860px) { .steps3 { grid-template-columns: 1fr; } }
.step3 {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 30px 28px;
transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.step3:hover { transform: translateY(-4px); border-color: var(--p-200); box-shadow: 0 24px 60px -30px var(--purple-glow); }
.step3.accent { background: linear-gradient(180deg, #fff, var(--p-50)); border-color: var(--p-200); }
.step3-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.step3-num {
font-family: var(--serif); font-style: italic; font-size: 30px;
color: var(--purple); line-height: 1;
}
.step3-tag {
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ink-mute); padding: 4px 10px; background: var(--surface-2); border-radius: 100px;
}
.step3-title { font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 10px; }
.step3-desc { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 18px; }
.step3-out {
font-size: 13px; color: var(--p-800); font-weight: 500;
padding-top: 14px; border-top: 1px dashed var(--p-200);
}
/* ----- Wide product screenshot band ----- */
.screen-wide {
margin-top: 56px;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 48px;
align-items: center;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 44px;
}
@media (max-width: 900px) { .screen-wide { grid-template-columns: 1fr; gap: 28px; padding: 28px; } }
.screen-wide-h { font-family: var(--serif); font-size: clamp(26px, 3vw, 36px); font-weight: 400; letter-spacing: -0.02em; color: var(--ink); line-height: 1.12; margin: 4px 0 12px; }
.screen-wide-h em { color: var(--purple); font-style: italic; }
.screen-wide-copy p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 22px; max-width: 42ch; }
.kpi-strip { display: flex; gap: 24px; flex-wrap: wrap; }
.kpi-strip .kpi-b .v { font-family: var(--serif); font-size: 38px; font-weight: 400; color: var(--purple); line-height: 1; letter-spacing: -0.02em; }
.kpi-strip .kpi-b .l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-top: 6px; }
/* ----- OUR WORK gallery ----- */
.work { padding: 120px 0; }
.sol-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 980px) { .sol-gallery { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
.sol-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
}
.sol-card:hover { transform: translateY(-6px); border-color: var(--p-200); box-shadow: 0 34px 80px -36px rgba(70,30,160,0.30); }
.sol-shot { overflow: hidden; border-bottom: 1px solid var(--line); }
.sol-shot img { width: 100%; height: auto; display: block; transition: transform 0.6s var(--ease); }
.sol-card:hover .sol-shot img { transform: scale(1.03); }
.sol-card figcaption { padding: 22px 24px 26px; }
.sol-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); margin-bottom: 10px; }
.sol-title { font-family: var(--sans); font-size: 19px; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); line-height: 1.22; margin-bottom: 14px; }
.sol-kpi { font-size: 13.5px; color: var(--ink-soft); }
.sol-kpi strong { color: var(--purple); font-weight: 600; }
/* ----- Build grid ----- */
.build-grid {
margin-top: 32px;
background: var(--ink);
color: #fff;
border-radius: var(--r-xl);
padding: 44px;
display: grid;
grid-template-columns: 0.9fr 1.4fr;
gap: 40px;
align-items: center;
position: relative;
overflow: hidden;
}
.build-grid::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse 50% 60% at 15% 20%, rgba(124,77,238,0.35), transparent 60%);
pointer-events: none;
}
@media (max-width: 900px) { .build-grid { grid-template-columns: 1fr; gap: 28px; padding: 30px; } }
.build-head { position: relative; }
.build-head h3 { font-family: var(--serif); font-size: 30px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 12px; }
.build-head h3 em { color: var(--p-300); font-style: italic; }
.build-head p { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.55; max-width: 34ch; }
.build-items { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .build-items { grid-template-columns: 1fr; } }
.build-item {
display: flex; align-items: center; gap: 12px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
padding: 14px 16px;
font-size: 14px; font-weight: 500;
transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.build-item:hover { background: rgba(124,77,238,0.22); border-color: var(--p-300); transform: translateY(-2px); }
.bi-ic { font-size: 18px; filter: grayscale(0.1); }
/* ----- AUTHORITY band ----- */
.authority { padding: 40px 0 120px; }
.auth-card {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: 0 30px 80px -44px rgba(70,30,160,0.30);
}
@media (max-width: 860px) { .auth-card { grid-template-columns: 1fr; } }
.auth-img { position: relative; min-height: 100%; }
.auth-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) { .auth-img img { max-height: 320px; } }
.auth-copy { padding: 48px 44px; align-self: center; }
@media (max-width: 860px) { .auth-copy { padding: 32px 28px; } }
.auth-flag {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ink-2); margin-bottom: 18px;
}
.auth-flag .uae {
width: 22px; height: 15px; border-radius: 2px; overflow: hidden;
background:
linear-gradient(90deg, #ce1126 0 5px, transparent 5px),
linear-gradient(180deg, #009739 0 33%, #ffffff 33% 66%, #000 66%);
border: 1px solid var(--line);
}
.auth-h { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 46px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.06; color: var(--ink); margin-bottom: 18px; }
.auth-h em { color: var(--purple); font-style: italic; }
.auth-sub { font-size: 16px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 28px; max-width: 52ch; }
/* ----- WHY US 2 ----- */
.why2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 980px) { .why2-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why2-grid { grid-template-columns: 1fr; } }
.why2 {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 30px 26px;
transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.why2:hover { transform: translateY(-4px); border-color: var(--p-200); box-shadow: 0 24px 60px -30px var(--purple-glow); }
.why2-ic {
width: 52px; height: 52px; border-radius: 14px;
background: var(--p-50); color: var(--purple);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.why2-ic svg { width: 26px; height: 26px; }
.why2 h3 { font-family: var(--serif); font-size: 21px; font-weight: 400; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 10px; }
.why2 p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 860px) {
.problem2 { padding: 72px 0; }
.work { padding: 80px 0; }
.section-head-center { margin-bottom: 40px; }
}
/* =========================================================
v7 — Native product mockups (no raw ad images)
========================================================= */
.mock {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 20px;
box-shadow: 0 30px 80px -42px rgba(70,30,160,0.30), 0 3px 10px -5px rgba(70,30,160,0.08);
}
/* --- Rollout mock (problem) --- */
.mock-rollout .mock-bar {
display: flex; align-items: center; gap: 7px;
padding-bottom: 14px; margin-bottom: 14px;
border-bottom: 1px solid var(--line);
font-size: 12px; color: var(--ink-2); font-weight: 500;
}
.mock-dot { width: 9px; height: 9px; border-radius: 50%; }
.mock-dot.r { background: #9c3409; } .mock-dot.y { background: #d99e2b; } .mock-dot.g { background: #0f6b31; }
.mock-title { margin-left: 6px; }
.mock-flag { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 100px; }
.mock-flag.warn { background: rgba(232,93,74,0.10); color: #c33; }
.mock-modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.mod {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 12px; border-radius: 10px; font-size: 11.5px; font-weight: 500;
border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
}
.mod .ms { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.mod.ok { border-color: rgba(15,107,49,0.25); background: rgba(15,107,49,0.06); }
.mod.ok .ms { background: #0f6b31; color: #fff; }
.mod.bad { border-color: rgba(232,93,74,0.35); background: rgba(232,93,74,0.07); color: #a33; }
.mod.bad .ms { background: #9c3409; color: #fff; }
.mod.idle { opacity: 0.6; }
.mod.idle .ms { background: var(--line-strong); color: #fff; }
.mock-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.mst { background: var(--surface-2); border-radius: 10px; padding: 12px; text-align: center; }
.mst .v { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--ink); }
.mst .v.ok { color: #0f6b31; } .mst .v.warn { color: #d99e2b; } .mst .v.bad { color: #9c3409; }
.mst .l { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); margin-top: 6px; }
.mock-risk {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
background: rgba(232,93,74,0.07); border: 1px solid rgba(232,93,74,0.22);
border-radius: 10px; padding: 12px 14px;
}
.mock-risk .rl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #a33; }
.mock-risk .rv { font-weight: 700; color: #9c3409; }
.mock-risk .rd { font-size: 12px; color: var(--ink-soft); margin-left: auto; }
/* --- Live dashboard mock --- */
.mock-dash { padding: 24px; }
.md-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.md-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.md-name { font-family: var(--serif); font-size: 22px; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.md-live { font-family: var(--sans); font-size: 11px; color: #0f6b31; display: inline-flex; align-items: center; gap: 5px; background: rgba(15,107,49,0.10); padding: 3px 9px; border-radius: 100px; }
.md-live .ld { width: 6px; height: 6px; border-radius: 50%; background: #0f6b31; animation: pulse 2s ease-in-out infinite; }
.md-ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.md-ring svg { transform: rotate(-90deg); width: 64px; height: 64px; }
.md-ring .rbg { fill: none; stroke: var(--surface-3); stroke-width: 6; }
.md-ring .rfg { fill: none; stroke: var(--purple); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 170; stroke-dashoffset: 10; }
.md-ring-v { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 8px; color: var(--ink-mute); }
.md-ring-v strong { font-family: var(--serif); font-size: 17px; color: var(--ink); font-weight: 400; }
.md-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.md-kpi { background: var(--surface-2); border-radius: 10px; padding: 12px 10px; }
.md-kpi .l { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.md-kpi .v { font-family: var(--serif); font-size: 20px; color: var(--ink); margin: 4px 0 2px; }
.md-kpi .c { font-size: 10px; color: #0f6b31; font-family: var(--mono); }
.md-health { background: var(--surface-2); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.md-health-top { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-mute); font-family: var(--mono); margin-bottom: 8px; }
.md-health-top .ok { color: #0f6b31; }
.md-spark { width: 100%; height: 46px; display: block; }
.md-spark polyline { fill: none; stroke: var(--purple); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.md-spark polygon { fill: rgba(124,77,238,0.12); stroke: none; }
.md-issues { display: flex; flex-direction: column; gap: 6px; }
.mi { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-2); padding: 9px 12px; background: var(--surface-2); border-radius: 8px; }
.mi .fx { font-family: var(--mono); font-size: 10px; color: #0f6b31; }
/* --- Sol mocks (fill the sol-shot slot) --- */
.sol-mock { border-bottom: 1px solid var(--line); padding: 22px; min-height: 300px; background: linear-gradient(180deg, var(--p-50), #fff); }
.mock-chat { display: flex; flex-direction: column; gap: 8px; }
.chat-head { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-mute); font-family: var(--mono); margin-bottom: 4px; }
.chat-head .wa { width: 14px; height: 14px; border-radius: 50%; background: #25d366; }
.bub { font-size: 12.5px; line-height: 1.4; padding: 10px 12px; border-radius: 12px; max-width: 80%; }
.bub.in { background: #fff; border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.bub.out { background: #dcf8c6; align-self: flex-end; border-bottom-right-radius: 4px; color: #14351e; }
.bub.slots { display: flex; flex-direction: column; gap: 6px; background: #eaf7dd; }
.bub .slot { background: #fff; border: 1px solid #c9e6b0; border-radius: 8px; padding: 6px 9px; font-size: 11.5px; color: #14351e; }
.bub.ok { background: #fff; border: 1px solid var(--p-200); color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.bub.ok strong { color: var(--purple); }
.mock-flow { display: flex; flex-direction: column; justify-content: center; }
.flow-cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.fc-src { display: flex; flex-direction: column; gap: 7px; }
.src { font-size: 11.5px; padding: 8px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); display: flex; align-items: center; gap: 7px; }
.src.email { color: #1d4fa8; } .src.wapp { color: #0f6b31; } .src.wechat { color: #137d12; }
.src .src-d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.fc-agent { width: 62px; height: 62px; border-radius: 16px; background: linear-gradient(160deg, var(--p-500), var(--p-800)); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--serif); font-size: 20px; line-height: 1; box-shadow: 0 12px 26px -10px var(--purple-glow); margin: 0 auto; }
.fc-agent small { font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.fc-out { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.fc-out .orc { color: #c2281b; font-weight: 800; font-size: 13px; letter-spacing: 0.08em; margin-bottom: 4px; }
.fc-out .row { height: 8px; border-radius: 3px; background: var(--surface-3); }
.fc-out .row.ok { background: rgba(15,107,49,0.4); }
.flow-note { font-family: var(--mono); font-size: 10.5px; color: var(--ink-mute); text-align: center; margin-top: 16px; letter-spacing: 0.02em; }
.mock-steps { display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.cstep { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: var(--ink-2); font-weight: 500; }
.cstep .cn { width: 24px; height: 24px; border-radius: 7px; background: var(--p-50); color: var(--purple); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; font-weight: 600; }
.cstep .ck { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(15,107,49,0.12); color: #0f6b31; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.cstep .ck.live { background: var(--p-50); color: var(--purple); animation: pulse 2s ease-in-out infinite; }
/* --- Authority native visual --- */
.auth-viz { position: relative; overflow: hidden; min-height: 300px; }
.auth-viz .skyline { width: 100%; height: 100%; display: block; object-fit: cover; }
.auth-badge {
position: absolute; left: 24px; bottom: 24px;
display: flex; align-items: center; gap: 12px;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.25); border-radius: 14px; padding: 12px 16px; color: #fff;
}
.auth-badge .ab-ic { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.18); display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif); font-style: italic; font-size: 16px; }
.auth-badge strong { display: block; font-size: 14px; font-weight: 600; }
.auth-badge span { font-size: 11px; color: rgba(255,255,255,0.7); }
/* --- v8: restored content (stat band, step chips, framework) --- */
.framework2 { padding: 110px 0; }
.stat-band {
display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
background: linear-gradient(120deg, var(--ink) 0%, #241d43 100%);
border-radius: var(--r-xl);
padding: 40px 44px;
position: relative; overflow: hidden;
}
.stat-band::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse 40% 80% at 85% 50%, rgba(124,77,238,0.35), transparent 60%);
pointer-events: none;
}
.sb-item { position: relative; flex: 1 1 260px; }
.sb-v { font-family: var(--serif); font-size: clamp(56px, 8vw, 88px); line-height: 0.9; color: #fff; letter-spacing: -0.03em; }
.sb-item:first-child .sb-v { color: var(--p-300); }
.sb-l { font-size: 15px; color: rgba(255,255,255,0.72); line-height: 1.5; margin-top: 10px; max-width: 30ch; }
.sb-div { width: 1px; height: 90px; background: rgba(255,255,255,0.14); }
@media (max-width: 760px) { .sb-div { display: none; } }
.sb-src { position: relative; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: rgba(255,255,255,0.4); align-self: flex-end; text-transform: uppercase; }
.step3-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.step3-chips span {
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em;
color: var(--ink-2); padding: 4px 9px; border-radius: 100px;
background: var(--surface-2); border: 1px solid var(--line);
}
/* --- Agentic explainer band --- */
.explain { padding: 30px 0 0; }
.explain-inner {
display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
background: var(--bg-soft); border: 1px solid var(--line);
border-radius: var(--r-xl); padding: 44px;
}
@media (max-width: 900px) { .explain-inner { grid-template-columns: 1fr; gap: 28px; padding: 28px; } }
.explain-lead { font-size: 17px; color: var(--ink-soft); line-height: 1.6; max-width: 46ch; }
.explain-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ef {
display: inline-flex; align-items: center; gap: 9px;
background: #fff; border: 1px solid var(--line); border-radius: 12px;
padding: 14px 18px; font-size: 14px; font-weight: 500; color: var(--ink-2);
box-shadow: 0 8px 22px -14px rgba(70,30,160,0.2);
}
.ef-ic { font-size: 16px; }
.ef.done { background: var(--purple); color: #fff; border-color: var(--purple); }
.ea { color: var(--p-300); font-size: 18px; }
@media (max-width: 900px) { .explain-flow .ea { transform: rotate(90deg); } .explain-flow { flex-direction: column; } }
@media (max-width: 860px) {
.framework2 { padding: 72px 0; }
.stat-band { padding: 28px; gap: 20px; }
.sb-src { align-self: flex-start; }
}
/* =========================================================
v9 — multi-color, reference-style mockups, redesigns
========================================================= */
body { font-weight: 400; letter-spacing: -0.006em; }
/* multi-color section tags rotate away from pure purple monotony */
.explain .section-tag { color: var(--blue-600); }
.explain .section-tag::before { background: var(--blue-600); }
.work .section-tag { color: var(--mint); }
.work .section-tag::before { background: var(--mint); }
/* ---- Regular vs Agentic comparison ---- */
.vs-grid {
display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch;
max-width: 1000px; margin: 0 auto;
}
@media (max-width: 820px) { .vs-grid { grid-template-columns: 1fr; gap: 16px; } }
.vs-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; }
.vs-card.plain { background: linear-gradient(180deg, var(--blue-50), #fff); border-color: var(--blue-100); }
.vs-card.agent { background: linear-gradient(180deg, var(--p-50), #fff); border-color: var(--p-200); box-shadow: 0 24px 60px -34px var(--purple-glow); }
.vs-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.vs-ic { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vs-ic svg { width: 22px; height: 22px; }
.vs-ic.blue { background: var(--blue-100); color: var(--blue-600); }
.vs-ic.purple { background: var(--p-100); color: var(--purple); }
.vs-kick { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.vs-name { font-family: var(--serif); font-size: 22px; color: var(--ink); }
.vs-thread { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vs-bub { font-size: 13px; line-height: 1.45; padding: 10px 13px; border-radius: 12px; max-width: 88%; }
.vs-bub.in { align-self: flex-end; background: var(--blue-600); color: #fff; border-bottom-right-radius: 4px; }
.vs-bub.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); color: var(--ink-2); border-bottom-left-radius: 4px; }
.vs-steps { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vsr { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--ink-2); font-weight: 500; }
.vsr.done { border-color: var(--p-200); background: #fff; }
.vsr-n { width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 700; color: #fff; }
.vsr-n.blue { background: var(--blue-600); } .vsr-n.teal { background: var(--teal); } .vsr-n.amber { background: var(--amber); } .vsr-n.green { background: var(--mint); }
.vsr-ck { margin-left: auto; color: var(--mint); font-size: 13px; }
.vsr-ck.live { color: var(--purple); animation: pulse 2s ease-in-out infinite; }
.vs-foot { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 12.5px; font-weight: 500; }
.vs-foot.dead { color: var(--ink-mute); }
.vs-foot.live { color: var(--p-800); }
.vs-mid { display: flex; align-items: center; justify-content: center; }
.vs-vs { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink-mute); width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 820px) { .vs-vs { transform: rotate(90deg); } }
/* ---- Problem: real photo + floating cards ---- */
.photo-stack { position: relative; padding: 0 0 30px; }
.photo-main { display: block; width: 100%; height: 420px; border-radius: 22px; box-shadow: 0 34px 90px -44px rgba(12,10,31,0.4); }
@media (max-width: 900px) { .photo-main { height: 320px; } }
.float-card { position: absolute; background: rgba(255,255,255,0.92); border: 1px solid rgba(255,255,255,0.9); border-radius: 16px; box-shadow: 0 20px 50px -24px rgba(12,10,31,0.35); padding: 16px 18px; }
.fc-fail { top: 24px; left: -18px; width: 210px; }
.fc-top { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-mute); font-family: var(--mono); letter-spacing: 0.04em; margin-bottom: 8px; }
.fc-dot { width: 8px; height: 8px; border-radius: 50%; } .fc-dot.red { background: var(--coral); box-shadow: 0 0 0 4px rgba(232,93,74,0.14); }
.fc-big { font-family: var(--serif); font-size: 30px; color: var(--coral); line-height: 1; }
.fc-sub { font-size: 12px; color: var(--ink-soft); margin-top: 6px; line-height: 1.4; }
.fc-live { bottom: 0; right: -14px; display: flex; align-items: center; gap: 12px; }
.fc-badge { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; }
.fc-badge.green { background: var(--mint-50); color: var(--green-600); }
.fc-live-copy { font-size: 12.5px; color: var(--ink-2); line-height: 1.3; } .fc-live-copy strong { display: block; color: var(--ink); }
@media (max-width: 520px) { .fc-fail { left: 0; } .fc-live { right: 0; } }
/* ---- Build gallery (Dubai solutions) ---- */
.build-head2 { text-align: center; max-width: 640px; margin: 72px auto 40px; }
.build-head2 h3 { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 40px); font-weight: 400; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 10px; }
.build-head2 h3 em { color: var(--purple); font-style: italic; }
.build-head2 p { font-size: 16px; color: var(--ink-soft); line-height: 1.55; }
.build-gallery .sol-mock { min-height: 220px; display: flex; align-items: center; justify-content: center; padding: 24px; }
/* tint backgrounds */
.tint-blue { background: linear-gradient(160deg, var(--blue-50), #fff); }
.tint-green { background: linear-gradient(160deg, var(--green-50), #fff); }
.tint-teal { background: linear-gradient(160deg, var(--teal-2), #fff); }
.tint-amber { background: linear-gradient(160deg, var(--amber-2), #fff); }
.tint-purple{ background: linear-gradient(160deg, var(--p-50), #fff); }
.tint-orb { background: radial-gradient(circle at 50% 45%, #eef2ff, #fff 70%); flex-direction: column; gap: 14px; }
.sol-tag.blue { color: var(--blue-600); } .sol-tag.green { color: var(--green-600); }
.sol-tag.teal { color: var(--teal); } .sol-tag.amber { color: #8a5d0a; } .sol-tag.purple { color: var(--purple); }
/* booking table */
.bk-tbl { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 11.5px; }
.bk-head { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; padding: 9px 12px; background: var(--blue-50); color: var(--ink-mute); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.bk-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line); }
.bk-row b { color: var(--ink); font-weight: 600; } .bk-row small { display: block; color: var(--ink-mute); font-size: 9.5px; }
.bk-row > span { color: var(--ink-2); align-self: center; }
.bk-btn { font-size: 10px; font-weight: 600; padding: 5px 12px; border-radius: 100px; color: #fff; }
.bk-btn.blue { background: var(--blue-600); }
/* voice orb */
.orb { width: 118px; height: 118px; border-radius: 50%; background: conic-gradient(from 180deg, #b1cdff, #c4b1ff, #a0e7c8, #ffd6a5, #b1cdff); filter: blur(2px); box-shadow: 0 20px 50px -18px rgba(124,77,238,0.4), inset 0 0 30px rgba(255,255,255,0.6); animation: orb-spin 8s linear infinite; }
@keyframes orb-spin { to { transform: rotate(360deg); } }
.orb-cap { font-size: 14px; color: var(--ink-soft); font-style: italic; }
/* lead pipeline */
.pipe { width: 100%; }
.pipe-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pipe-top > span:first-child { font-weight: 700; font-size: 13px; color: var(--ink); }
.pipe-badge { font-family: var(--mono); font-size: 10px; color: var(--green-600); background: var(--mint-50); padding: 3px 9px; border-radius: 100px; }
.pipe-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; margin-bottom: 7px; }
.pipe-row b { font-size: 12px; color: var(--ink); } .pipe-row small { display: block; font-size: 10px; color: var(--ink-mute); }
.pi-ic { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.pi-ic.meta { background: var(--blue-50); color: var(--blue-600); } .pi-ic.land { background: var(--p-50); color: var(--purple); } .pi-ic.voice { background: var(--mint-50); color: var(--green-600); }
.pi-st { margin-left: auto; font-size: 11px; font-weight: 600; }
.pi-st.blue { color: var(--blue-600); } .pi-st.purple { color: var(--purple); } .pi-st.green { color: var(--green-600); }
/* claim steps */
.claim-steps { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.clm { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.clm-ic { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.clm-ic.teal { background: var(--teal); } .clm-ic.mint { background: var(--mint); }
.clm.live .clm-ic { animation: pulse 2s ease-in-out infinite; }
/* supplier flow */
.sup { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sup-src { display: flex; gap: 6px; }
.chp { font-size: 11px; font-weight: 600; padding: 6px 11px; border-radius: 100px; }
.chp.blue { background: var(--blue-50); color: var(--blue-600); } .chp.green { background: var(--mint-50); color: var(--green-600); } .chp.amber { background: var(--amber-2); color: #8a5d0a; }
.sup-arrow { color: var(--ink-mute); font-size: 16px; }
.sup-out { display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 22px; }
.sup-orc { color: #c2281b; font-weight: 800; font-size: 15px; letter-spacing: 0.06em; }
.sup-ok { font-size: 11px; color: var(--green-600); font-family: var(--mono); }
/* ERP report */
.rep { width: 100%; }
.rep-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-mute); }
.rep-up { color: var(--green-600); font-weight: 700; background: var(--mint-50); padding: 2px 8px; border-radius: 100px; font-size: 11px; }
.rep-big { font-family: var(--serif); font-size: 34px; color: var(--ink); letter-spacing: -0.02em; margin: 4px 0 10px; }
.rep-spark { width: 100%; height: 48px; display: block; }
.rep-spark polyline { fill: none; stroke: var(--purple); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rep-spark polygon { fill: rgba(124,77,238,0.12); stroke: none; }
/* ---- Authority real photo ---- */
.auth-photo { position: relative; min-height: 100%; overflow: hidden; }
.auth-slot { display: block; width: 100%; height: 100%; min-height: 340px; }
@media (max-width: 860px) { .auth-slot { min-height: 260px; } }
/* ---- Why-us multi-color icons ---- */
.why2:nth-child(1) .why2-ic { background: var(--blue-50); color: var(--blue-600); }
.why2:nth-child(2) .why2-ic { background: var(--mint-50); color: var(--green-600); }
.why2:nth-child(3) .why2-ic { background: var(--amber-2); color: #8a5d0a; }
.why2:nth-child(4) .why2-ic { background: var(--p-50); color: var(--purple); }
/* ---- Testimonial v2 (reference style) ---- */
.testimonial2 { padding: 100px 0; text-align: center; background: linear-gradient(180deg, #fbfbfd, #f4f2f9); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.t2-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; margin-bottom: 30px; }
.t2-eyebrow .t2-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); }
.t2-quote { font-family: var(--sans); font-weight: 700; font-size: clamp(26px, 4.4vw, 52px); line-height: 1.16; letter-spacing: -0.025em; color: var(--ink); max-width: 20ch; margin: 0 auto 40px; text-wrap: balance; }
.t2-quote .hl { color: var(--purple); }
.t2-attr { display: inline-flex; align-items: center; gap: 14px; }
.t2-avatar { display: block; width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0; }
.t2-attr > div { text-align: left; }
.t2-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.t2-role { font-size: 13.5px; color: var(--ink-mute); }
@media (max-width: 860px) {
.testimonial2 { padding: 72px 0; }
.build-head2 { margin: 56px auto 32px; }
.photo-main { height: 300px; }
}
/* =========================================================
v10 — readable mockup fonts + unique lifecycle visual
========================================================= */
/* Swap the mono variable to the readable sans inside product/visual
sections, so every small label becomes legible while serif display
numbers stay elegant. */
.problem2, .explain, .how, .work, .authority, .testimonial2, .framework2 {
--mono: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}
/* mono-based labels were tuned for a monospace face — relax the tracking
and nudge size so Jakarta reads cleanly */
.problem2 .section-tag, .explain .section-tag, .how .section-tag,
.work .section-tag, .authority .section-tag, .framework2 .section-tag,
.md-eyebrow, .md-kpi .l, .md-health-top, .mi .fx, .bk-head, .pipe-badge,
.sup-ok, .flow-note, .fc-top, .fc-badge, .sol-tag, .vs-kick, .lc-legend,
.lc-axisrow, .step3-tag, .step3-chips span, .tl-time, .tl-tag {
letter-spacing: 0.02em;
font-weight: 600;
}
.md-kpi .l, .bk-head, .flow-note, .lc-axisrow { font-size: 10.5px; }
.mock, .sol-mock, .vs-card, .lifecycle { font-feature-settings: "tnum" 1; }
/* ---- Unique AI-pilot-lifecycle chart ---- */
.lifecycle {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 26px 28px 22px; box-shadow: 0 30px 80px -44px rgba(70,30,160,0.28);
}
.lc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.lc-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.lc-legend { display: flex; gap: 14px; }
.lc-legend .lg { font-size: 11px; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 6px; }
.lc-legend .lg::before { content: ''; width: 14px; height: 3px; border-radius: 2px; background: var(--line-strong); }
.lc-legend .lg.purple::before { background: var(--purple); }
.lc-chart { position: relative; margin-top: 8px; }
.lc-svg { width: 100%; height: 240px; display: block; overflow: visible; }
.lc-axis { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.lc-typ { fill: none; stroke: #c7c2d6; stroke-width: 2.4; stroke-linecap: round; }
.lc-ours { fill: none; stroke: var(--purple); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 6px 10px rgba(124,77,238,0.25)); }
.lc-ours-fill { fill: url(#none); fill: rgba(124,77,238,0.07); stroke: none; }
.lc-peak { fill: #fff; stroke: #c7c2d6; stroke-width: 2.5; }
.lc-crash { fill: var(--coral); }
.lc-live { fill: var(--purple); stroke: #fff; stroke-width: 2.5; }
.lc-ann { position: absolute; font-size: 11px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.lc-ann small { display: block; font-size: 10px; font-weight: 500; color: var(--ink-mute); margin-top: 2px; }
.lc-ann.demo { top: 2%; left: 40%; transform: translateX(-50%); text-align: center; }
.lc-ann.crash { top: 60%; left: 60%; color: var(--coral); }
.lc-ann.crash small { color: var(--ink-mute); }
.lc-ann.live { top: 2%; right: 0; text-align: right; color: var(--purple); }
.lc-axisrow { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: var(--ink-mute); }
@media (max-width: 520px) { .lc-ann { font-size: 10px; } .lc-svg { height: 200px; } }
/* =========================================================
v11 — Impact / case-study section
========================================================= */
.impact { padding: 120px 0; background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.impact .section-tag { color: var(--purple); }
.impact .section-tag::before { background: var(--purple); }
/* headline metrics */
.impact-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 900px) { .impact-metrics { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .impact-metrics { grid-template-columns: 1fr; } }
.im-metric { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.im-metric:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -34px rgba(70,30,160,0.24); }
.im-v { font-family: var(--serif); font-size: clamp(40px, 5vw, 58px); line-height: 0.95; letter-spacing: -0.03em; }
.im-v.purple { color: var(--purple); } .im-v.blue { color: var(--blue-600); } .im-v.teal { color: var(--teal); } .im-v.green { color: var(--green-600); }
.im-l { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 10px; }
.im-c { font-size: 12.5px; color: var(--ink-mute); margin-top: 6px; line-height: 1.4; }
/* case studies */
.cases2 { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.case2 {
display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
}
.case2:hover { transform: translateY(-3px); border-color: var(--p-200); box-shadow: 0 30px 80px -40px rgba(70,30,160,0.24); }
@media (max-width: 860px) { .case2 { grid-template-columns: 1fr; } }
.case2-side { padding: 34px 36px; }
@media (max-width: 520px) { .case2-side { padding: 26px 24px; } }
.case2-tag { display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; margin-bottom: 16px; }
.case2-tag.purple { background: var(--p-50); color: var(--purple); }
.case2-tag.teal { background: var(--teal-2); color: #06695e; }
.case2-tag.amber { background: var(--amber-2); color: #8a5d0a; }
.case2-h { font-family: var(--serif); font-size: clamp(23px, 2.6vw, 30px); font-weight: 400; letter-spacing: -0.02em; color: var(--ink); line-height: 1.15; margin-bottom: 16px; }
.case2-mess, .case2-fix { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 12px; }
.case2-mess .lbl { color: var(--coral); font-weight: 700; }
.case2-fix .lbl { color: var(--purple); font-weight: 700; }
.case2-proof { background: linear-gradient(180deg, var(--surface-2), #fff); border-left: 1px solid var(--line); padding: 34px 32px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
@media (max-width: 860px) { .case2-proof { border-left: none; border-top: 1px solid var(--line); } }
.ba-row { display: flex; align-items: center; gap: 14px; }
.ba { flex: 1; text-align: center; padding: 16px 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.ba-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.ba-v { font-family: var(--serif); font-size: 36px; line-height: 1; letter-spacing: -0.02em; color: var(--ink-2); }
.ba-s { font-size: 11.5px; color: var(--ink-mute); margin-top: 6px; }
.ba.before .ba-v { color: var(--coral); }
.ba.after { border-color: var(--p-200); background: var(--p-50); }
.ba.after.purple .ba-v { color: var(--purple); }
.ba.after.teal { border-color: #9fe3d8; background: var(--teal-2); } .ba.after.teal .ba-v { color: #06695e; }
.ba.after.amber { border-color: #f2d99a; background: var(--amber-2); } .ba.after.amber .ba-v { color: #8a5d0a; }
.ba-arrow { color: var(--p-300); flex-shrink: 0; } .ba-arrow svg { width: 26px; height: 26px; }
.ba-bar { height: 8px; border-radius: 100px; background: var(--surface-3); overflow: hidden; }
.ba-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--p-400), var(--p-700)); transform: scaleX(0); transform-origin: left; }
.ba-bar.teal .ba-fill { background: linear-gradient(90deg, #34c6b4, #06695e); }
.ba-bar.amber .ba-fill { background: linear-gradient(90deg, #eec14e, #c8901a); }
.case2.viz-in .ba-fill, .impact .im-metric.reveal.in ~ * .ba-fill { animation: growX 1s var(--ease) 0.2s forwards; }
.case2.viz-in .ba-fill { animation: growX 1s var(--ease) 0.2s forwards; }
.ba-foot { font-size: 13px; color: var(--ink-soft); line-height: 1.5; } .ba-foot strong { color: var(--ink); font-weight: 700; }
.impact-note { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 26px; font-size: 13px; color: var(--ink-mute); text-align: center; }
.in-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); flex-shrink: 0; }
@media (max-width: 860px) { .impact { padding: 80px 0; } }
/* =========================================================
v12 — stronger highlights, readable titles, reworks
========================================================= */
/* brighter highlight violet for emphasis */
:root { --violet: #7c2ce6; }
/* Solutions-in-Dubai heading — make the highlight unmistakable */
.build-head2 h3 { font-weight: 800; }
.build-head2 h3 em {
font-style: normal; color: var(--violet); font-weight: 800;
background: linear-gradient(180deg, transparent 62%, rgba(124,44,230,0.18) 62%);
padding: 0 2px;
}
/* Case-study titles — bold, high-contrast, attention-grabbing */
.case2-h {
font-family: var(--sans);
font-weight: 800;
font-size: clamp(22px, 2.5vw, 29px);
letter-spacing: -0.03em;
color: var(--ink);
line-height: 1.12;
}
.case2-side { position: relative; }
.case2-side::before {
content: ''; position: absolute; left: 0; top: 34px; width: 4px; height: 30px;
border-radius: 0 4px 4px 0; background: var(--violet);
}
.case2:nth-child(2) .case2-side::before { background: var(--teal); }
.case2:nth-child(3) .case2-side::before { background: var(--amber); }
@media (max-width: 520px) { .case2-side::before { top: 26px; } }
/* WHY US — rework: bold readable titles, prominent cards */
#why { padding-top: 110px; }
.why2 { padding: 34px 28px; }
.why2-ic { width: 56px; height: 56px; border-radius: 15px; margin-bottom: 22px; }
.why2-ic svg { width: 28px; height: 28px; }
.why2 h3 {
font-family: var(--sans);
font-weight: 800;
font-size: 20px;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.22;
margin-bottom: 10px;
}
.why2 p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.62; }
.why2:hover { box-shadow: 0 28px 64px -30px var(--purple-glow); }
/* section-h2 highlight — a touch brighter across page */
.section-h2 em { color: var(--violet); }
/* Testimonial highlight → brighter violet, matching reference */
.t2-quote .hl { color: var(--violet); }
.t2-quote { max-width: 22ch; }
/* Tech-stack rationale chips */
.stack-why { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.stack-why .sw {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 500;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
padding: 8px 14px; border-radius: 100px;
}
.stack-why .sw::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--p-300); }
/* --- Why-us: modern number-forward layout (no icon boxes) --- */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
@media (max-width: 900px) { .trust-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-cell {
padding: 40px 32px;
border-right: 1px solid var(--line);
position: relative;
transition: background 0.3s var(--ease);
}
.trust-cell:last-child { border-right: none; }
@media (max-width: 900px) {
.trust-cell:nth-child(2n) { border-right: none; }
.trust-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
.trust-cell { border-right: none; border-bottom: 1px solid var(--line); }
.trust-cell:last-child { border-bottom: none; }
}
.trust-cell:hover { background: var(--bg-soft); }
.tc-fig {
font-family: var(--serif);
font-size: clamp(52px, 6vw, 76px);
line-height: 0.9;
letter-spacing: -0.04em;
margin-bottom: 22px;
}
.tc-fig span { font-size: 0.5em; vertical-align: super; margin-left: 2px; }
.tc-fig.purple { color: var(--violet); } .tc-fig.teal { color: var(--teal); }
.tc-fig.amber { color: #c8901a; } .tc-fig.blue { color: var(--blue-600); }
.trust-cell h3 { font-family: var(--sans); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 10px; line-height: 1.2; }
.trust-cell p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
/* --- Merged "How it works": steps + live proof --- */
.how-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
@media (max-width: 940px) { .how-layout { grid-template-columns: 1fr; gap: 40px; } }
.how-steps { position: relative; display: flex; flex-direction: column; gap: 8px; }
.hstep { display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding: 8px 0; position: relative; }
.hstep-rail { position: relative; display: flex; justify-content: center; }
.hstep-num {
width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--serif); font-size: 22px; color: var(--ink);
background: #fff; border: 1.5px solid var(--line-strong); z-index: 2;
transition: all 0.4s var(--ease);
}
.hstep-num.accent { background: var(--violet); border-color: var(--violet); color: #fff; box-shadow: 0 8px 22px -8px var(--purple-glow); }
/* connecting line down the rail */
.hstep:not(:last-child) .hstep-rail::after {
content: ''; position: absolute; top: 44px; bottom: -8px; left: 50%;
width: 2px; transform: translateX(-50%);
background: linear-gradient(180deg, var(--line-strong), var(--line));
}
.hstep-body { padding-bottom: 20px; }
.hstep-time { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); margin-bottom: 6px; }
.hstep-title { font-family: var(--sans); font-weight: 800; font-size: clamp(19px, 2.1vw, 23px); letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; margin-bottom: 8px; }
.hstep-desc { font-size: 14.5px; color: var(--ink-soft); line-height: 1.62; max-width: 42ch; }
.how-proof { position: relative; }
.how-proof-cap { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 14px; text-align: center; }
.how-proof-cap strong { color: var(--violet); font-weight: 700; }
.how-proof .mock-dash { box-shadow: 0 40px 100px -44px rgba(70,30,160,0.35); }
@media (max-width: 940px) { .how-proof-cap { text-align: left; } }
/* ROI hero + human-routed pill in the proof card */
.md-roi { background: linear-gradient(120deg, var(--p-50), #fff); border: 1px solid var(--p-100); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.md-roi .roi-l { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.md-roi .roi-v { font-family: var(--serif); font-size: 30px; color: var(--ink); letter-spacing: -0.02em; margin-top: 3px; display: flex; align-items: baseline; gap: 8px; }
.md-roi .roi-up { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--green-600); background: var(--mint-50); padding: 2px 8px; border-radius: 100px; }
.mi .fx.to-human { color: var(--blue-600); }
/* --- Proof: business photo + live ROI overlay --- */
.proof-photo { position: relative; }
.proof-slot { display: block; width: 100%; height: 380px; border-radius: 20px; box-shadow: 0 36px 90px -44px rgba(12,10,31,0.42); }
@media (max-width: 940px) { .proof-slot { height: 320px; } }
.proof-badge { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.92); border-radius: 100px; padding: 7px 14px 7px 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); box-shadow: 0 10px 24px -14px rgba(12,10,31,0.4); }
.pb-live { display: inline-flex; align-items: center; gap: 6px; background: var(--mint-50); color: var(--green-600); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 100px; }
.pb-live .ld { width: 6px; height: 6px; border-radius: 50%; background: var(--green-600); animation: pulse 2s ease-in-out infinite; }
.proof-roi { position: absolute; bottom: -18px; right: -14px; background: #fff; border: 1px solid var(--p-100); border-radius: 16px; padding: 16px 20px; box-shadow: 0 26px 56px -24px var(--purple-glow); max-width: 260px; }
.pr-l { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.pr-v { font-family: var(--serif); font-size: 30px; color: var(--ink); letter-spacing: -0.02em; margin: 4px 0; display: flex; align-items: baseline; gap: 8px; }
.pr-up { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--green-600); background: var(--mint-50); padding: 2px 8px; border-radius: 100px; }
.pr-sub { font-size: 12px; color: var(--ink-soft); }
@media (max-width: 520px) { .proof-roi { right: 0; max-width: 220px; } }
/* --- Proof hero (reference-style photo card) --- */
.proof-hero { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 36px 90px -44px rgba(12,10,31,0.45); aspect-ratio: 3 / 2.5; }
@media (max-width: 940px) { .proof-hero { aspect-ratio: 3 / 2; } }
.proof-hero-img { display: block; width: 100%; height: 100%; }
.proof-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,10,31,0.42) 0%, rgba(12,10,31,0.15) 40%, rgba(12,10,31,0.75) 100%); }
.proof-hero-title { position: absolute; top: 26px; left: 26px; right: 26px; }
.ph-live { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; margin-bottom: 14px; }
.ph-live .ld { width: 6px; height: 6px; border-radius: 50%; background: #4be0a0; box-shadow: 0 0 0 3px rgba(75,224,160,0.3); animation: pulse 2s ease-in-out infinite; }
.proof-hero-title h3 { font-family: var(--sans); font-weight: 800; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.03em; line-height: 1.08; color: #fff; }
.proof-hero-strip { position: absolute; left: 20px; right: 20px; bottom: 20px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: 16px; padding: 16px 18px; }
.phs-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 10px; }
.phs-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.phs { display: flex; flex-direction: column; }
.phs .v { font-family: var(--serif); font-size: clamp(22px, 3vw, 30px); line-height: 1; color: #fff; letter-spacing: -0.02em; }
.phs .l { font-size: 11px; color: rgba(255,255,255,0.72); margin-top: 5px; line-height: 1.3; }
@media (max-width: 400px) { .phs .l { font-size: 10px; } }
/* --- Slider upgraded to a card --- */
.t2-slider { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 48px 44px; box-shadow: 0 30px 80px -46px rgba(70,30,160,0.25); }
@media (max-width: 640px) { .t2-slider { padding: 32px 22px; } }
.t2-slide { padding: 0 4px; }
.t2-quote::before { content: '\201C'; display: block; font-family: var(--serif); font-size: 60px; line-height: 0.5; color: var(--p-200); margin-bottom: 18px; }
.t2-nav { margin-top: 28px; }
/* --- FAQ: readable sans font --- */
.faq-q { font-family: var(--sans) !important; font-weight: 700 !important; font-size: 17.5px !important; letter-spacing: -0.015em; color: var(--ink); }
.faq-a { font-family: var(--sans); font-size: 15px; }
/* --- Case-study H3s: bolder, framed visual treatment --- */
.case2-side::before { display: none; }
.case2-h {
position: relative;
font-family: var(--sans);
font-weight: 800;
font-size: clamp(21px, 2.4vw, 27px);
letter-spacing: -0.03em;
color: var(--ink);
line-height: 1.18;
padding-bottom: 14px;
margin-bottom: 16px;
}
.case2-h::after {
content: '';
position: absolute; left: 0; bottom: 0;
width: 48px; height: 4px; border-radius: 100px;
background: var(--violet);
}
.case2:nth-child(1) .case2-h::after { background: var(--violet); }
.case2:nth-child(2) .case2-h::after { background: var(--teal); }
.case2:nth-child(3) .case2-h::after { background: var(--amber); }
/* --- Bold readable sans H2 for chosen sections --- */
.h2-sans { font-family: var(--sans) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; line-height: 1.08 !important; }
.h2-sans em { font-family: var(--sans); font-weight: 800; font-style: normal; color: var(--violet); }
/* --- Reality panel (replaces stat-band) --- */
.reality { background: linear-gradient(135deg, #14102b 0%, #241a48 100%); border-radius: var(--r-xl); padding: 48px; position: relative; overflow: hidden; }
@media (max-width: 640px) { .reality { padding: 30px 24px; } }
.reality::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 70% at 90% 20%, rgba(124,44,230,0.35), transparent 60%); pointer-events: none; }
.reality-head { position: relative; margin-bottom: 28px; }
.reality-h { font-family: var(--sans); font-weight: 800; font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.03em; color: #fff; line-height: 1.12; max-width: 22ch; margin-top: 12px; }
.reality-cards { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .reality-cards { grid-template-columns: 1fr; } }
.rcard { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-md); padding: 24px; }
.rcard.warn { border-color: rgba(232,93,74,0.4); }
.rcard.good { border-color: rgba(34,192,127,0.4); }
.rc-top { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 14px; }
.rc-ic { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.rc-ic svg { width: 15px; height: 15px; }
.rc-ic.warn { background: rgba(232,93,74,0.18); color: #ff8a75; }
.rc-ic.good { background: rgba(34,192,127,0.18); color: #4be0a0; }
.rc-v { font-family: var(--serif); font-size: clamp(56px, 8vw, 78px); line-height: 0.9; letter-spacing: -0.04em; color: #fff; margin-bottom: 12px; }
.rcard.warn .rc-v { color: #ff8a75; }
.rcard.good .rc-v { color: #4be0a0; }
.rc-l { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.55; }
.reality-foot { position: relative; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 14.5px; color: #fff; font-weight: 600; }
.reality-foot .src { display: block; margin-top: 6px; font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.45); letter-spacing: 0.02em; }
/* --- Compare 'Production-first' title in positive green --- */
.compare-title.good { color: var(--green-600); }
/* --- compact reality strip (no animation) --- */
.reality2 { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: center; padding: 4px 0 14px; }
@media (max-width: 820px) { .reality2 { grid-template-columns: 1fr; gap: 20px; } }
.r2-h { font-family: var(--sans); font-weight: 800; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.03em; color: var(--ink); line-height: 1.12; margin-top: 10px; max-width: 16ch; }
.r2-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 480px) { .r2-stats { grid-template-columns: 1fr; gap: 20px; } }
.r2-stat { border-left: 3px solid var(--line-strong); padding-left: 18px; }
.r2-stat:first-child { border-left-color: var(--coral); }
.r2-stat:last-child { border-left-color: var(--mint); }
.r2-v { font-family: var(--serif); font-size: clamp(48px, 6vw, 64px); line-height: 0.9; letter-spacing: -0.04em; }
.r2-v.warn { color: var(--coral); } .r2-v.good { color: var(--green-600); }
.r2-l { font-size: 14px; color: var(--ink-soft); line-height: 1.45; margin-top: 8px; max-width: 24ch; }
.r2-src { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; margin-top: 8px; }
/* --- compare column contrast --- */
.compare-col.old { background: var(--bg-soft); border-color: var(--line); }
.compare-col.old .compare-title { color: var(--ink-mute); }
.ch-badge { display: inline-flex; align-items: center; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; }
.ch-badge.bad { background: var(--coral-2); color: var(--coral); }
.ch-badge.good { background: var(--mint-50); color: var(--green-600); }
.compare-col.new { background: linear-gradient(180deg, #fff, var(--p-50)); border-color: var(--p-200); box-shadow: 0 30px 70px -40px var(--purple-glow); }
/* --- Testimonial slider --- */
.t2-slider { overflow: hidden; max-width: 900px; margin: 0 auto; }
.t2-track { display: flex; transition: transform 0.5s var(--ease); }
.t2-slide { min-width: 100%; padding: 0 8px; text-align: center; }
.t2-quote { font-family: var(--sans); font-weight: 700; font-size: clamp(20px, 3vw, 34px); line-height: 1.24; letter-spacing: -0.02em; color: var(--ink); max-width: 24ch; margin: 0 auto 32px; text-wrap: balance; }
.t2-quote .hl { color: var(--violet); }
.t2-attr { display: inline-flex; align-items: center; gap: 13px; }
.t2-avatar { display: block; width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; }
.t2-attr > div { text-align: left; }
.t2-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.t2-role { font-size: 13px; color: var(--ink-mute); }
.t2-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; }
.t2-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; }
.t2-arrow svg { width: 15px; height: 15px; }
.t2-arrow:hover { background: var(--violet); border-color: var(--violet); color: #fff; }
.t2-dots { display: flex; gap: 8px; }
.t2-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--line-strong); cursor: pointer; transition: all 0.2s; padding: 0; }
.t2-dots button.active { background: var(--violet); width: 24px; border-radius: 100px; }
/* =========================================================
v13 — hero: channels -> AI -> outcomes
========================================================= */
.hero-visual { position: relative; aspect-ratio: 1 / 0.92; }
@media (max-width: 1000px) { .hero-visual { aspect-ratio: 1 / 0.8; } }
.hv2-mesh { position: absolute; inset: 6% 6% 6% 6%; border-radius: 50%; background: radial-gradient(circle at 55% 45%, rgba(124,44,230,0.20), rgba(180,155,251,0.10) 45%, transparent 70%); filter: blur(26px); animation: mesh-drift 16s ease-in-out infinite alternate; }
@keyframes mesh-drift { 0% { transform: scale(1) translate(0,0);} 100% { transform: scale(1.08) translate(10px,-8px);} }
.hv2-flow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hv2-flow .fl { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 5 6; opacity: 0.7; }
.hv2-flow .fl.out { stroke: var(--violet); opacity: 0.55; }
.hv2-flow .fl-dot { fill: var(--p-400); }
.hv2-flow .fl-dot.out { fill: var(--violet); }
/* channel source chips */
.hv2-src { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px 10px 10px; box-shadow: 0 16px 34px -20px rgba(12,10,31,0.28); animation: floaty 6s ease-in-out infinite; }
.src-a { top: 6%; left: 0; }
.src-b { top: 43%; left: -4%; animation-delay: 1s; }
.src-c { bottom: 8%; left: 2%; animation-delay: 2s; }
@keyframes floaty { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-7px);} }
.hv2-ic { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hv2-ic svg { width: 22px; height: 22px; }
.hv2-ic.wa { background: #25d366; } .hv2-ic.em { background: #1d4fa8; } .hv2-ic.ph { background: #0f6b31; }
.hv2-src .t { font-size: 13px; font-weight: 700; color: var(--ink); }
.hv2-src .s { font-size: 11.5px; color: var(--ink-mute); }
/* center AI hub */
.hv2-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 4; width: 128px; height: 128px; display: flex; align-items: center; justify-content: center; }
.hub-rings span { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--p-300); opacity: 0; animation: hubring 3s ease-out infinite; }
.hub-rings span:last-child { animation-delay: 1.5s; }
@keyframes hubring { 0% { transform: scale(0.7); opacity: 0.7; } 100% { transform: scale(1.5); opacity: 0; } }
.hub-core { width: 108px; height: 108px; border-radius: 50%; background: linear-gradient(160deg, var(--p-500), var(--p-800)); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; box-shadow: 0 24px 54px -18px var(--purple-glow), inset 0 2px 0 rgba(255,255,255,0.25); }
.hub-ai { font-family: var(--sans); font-weight: 800; font-size: 34px; letter-spacing: -0.03em; line-height: 1; }
.hub-status { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-top: 5px; min-height: 12px; }
.hub-status::after { content: ''; }
/* outcome result card */
.hv2-result { position: absolute; z-index: 5; top: 42%; right: -2%; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--p-100); border-radius: 16px; padding: 14px 16px; box-shadow: 0 22px 50px -22px var(--purple-glow); max-width: 230px; animation: floaty 7s ease-in-out infinite reverse; transition: opacity 0.3s; }
.res-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--mint-50); color: var(--green-600); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.res-ic svg { width: 18px; height: 18px; }
.res-t { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.res-s { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; line-height: 1.35; }
.hv2-result.swap { opacity: 0; transform: translateY(6px); }
@media (max-width: 520px) {
.hv2-src .s { display: none; }
.hv2-result { max-width: 190px; right: 0; }
.hub-core { width: 92px; height: 92px; } .hv2-hub { width: 108px; height: 108px; }
}
/* --- Agent steps: animate as if the AI is working --- */
.vs-card.agent .vsr { opacity: 0.45; transform: translateX(-4px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), border-color 0.3s; }
.vs-card.agent .vsr .vsr-ck { opacity: 0; transform: scale(0.4); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.vs-card.agent.in .vsr { opacity: 1; transform: translateX(0); }
.vs-card.agent.in .vsr:nth-child(1) { transition-delay: 0.2s; }
.vs-card.agent.in .vsr:nth-child(2) { transition-delay: 0.7s; }
.vs-card.agent.in .vsr:nth-child(3) { transition-delay: 1.2s; }
.vs-card.agent.in .vsr:nth-child(4) { transition-delay: 1.7s; }
.vs-card.agent.in .vsr .vsr-ck { opacity: 1; transform: scale(1); }
.vs-card.agent.in .vsr:nth-child(1) .vsr-ck { transition-delay: 0.5s; }
.vs-card.agent.in .vsr:nth-child(2) .vsr-ck { transition-delay: 1.0s; }
.vs-card.agent.in .vsr:nth-child(3) .vsr-ck { transition-delay: 1.5s; }
.vs-card.agent.in .vsr:nth-child(4) .vsr-ck { transition-delay: 2.0s; }
.vs-card.agent.in .vsr.done { border-color: var(--p-200); background: var(--p-50); }
.vs-foot.live { opacity: 0; transition: opacity 0.5s var(--ease) 2.3s; }
.vs-card.agent.in .vs-foot.live { opacity: 1; }
/* --- Agent live scenario (WhatsApp-style, plays out) --- */
.vs-scene { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 210px; background: linear-gradient(180deg, #ece7f6, #fff); border-radius: 14px; padding: 14px; position: relative; }
.sc-thread { display: flex; flex-direction: column; gap: 8px; }
.sc-msg { font-size: 13px; line-height: 1.4; padding: 9px 12px; border-radius: 12px; max-width: 85%; opacity: 0; transform: translateY(8px); animation: scIn 0.4s var(--ease) forwards; }
@keyframes scIn { to { opacity: 1; transform: translateY(0); } }
.sc-msg.in { align-self: flex-start; background: #fff; border: 1px solid var(--line); color: var(--ink-2); border-bottom-left-radius: 4px; }
.sc-msg.out { align-self: flex-end; background: var(--violet); color: #fff; border-bottom-right-radius: 4px; }
.sc-msg.slots { align-self: flex-end; background: #fff; border: 1px solid var(--p-200); color: var(--ink-2); display: flex; flex-direction: column; gap: 5px; max-width: 92%; }
.sc-msg.slots .s { background: var(--p-50); border-radius: 7px; padding: 5px 9px; font-size: 12px; display: flex; justify-content: space-between; align-items: center; }
.sc-msg.slots .s.pick { background: var(--violet); color: #fff; }
.sc-msg.ok { align-self: flex-end; background: var(--mint-50); border: 1px solid #b6ead0; color: #0c6b4a; display: flex; flex-direction: column; gap: 2px; }
.sc-msg.ok strong { display: flex; align-items: center; gap: 6px; color: var(--green-600); }
.sc-work { display: flex; align-items: center; gap: 9px; align-self: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 7px 14px; font-size: 12px; color: var(--ink-soft); margin-top: 2px; opacity: 0; transition: opacity 0.3s; }
.sc-work.show { opacity: 1; }
.sc-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--p-200); border-top-color: var(--violet); animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* --- Reality2 redesign --- */
.reality2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; padding: 8px 0 16px; }
@media (max-width: 820px) { .reality2 { grid-template-columns: 1fr; gap: 28px; } }
.r2-h { font-family: var(--sans); font-weight: 800; font-size: clamp(24px, 3vw, 36px); letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; margin-top: 12px; max-width: 20ch; }
.r2-p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; margin-top: 14px; max-width: 46ch; }
.r2-stats { display: grid; grid-template-columns: 1fr; gap: 14px; }
.r2-stat { display: flex; align-items: center; gap: 20px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px 24px; border-left-width: 4px; }
.r2-stat:first-child { border-left-color: var(--coral); }
.r2-stat:last-child { border-left-color: var(--mint); }
.r2-v { font-family: var(--serif); font-size: clamp(46px, 6vw, 60px); line-height: 0.85; letter-spacing: -0.04em; flex-shrink: 0; }
.r2-v span { font-size: 0.5em; vertical-align: super; }
.r2-v.warn { color: var(--coral); } .r2-v.good { color: var(--green-600); }
.r2-l { font-size: 14.5px; color: var(--ink-2); line-height: 1.4; font-weight: 500; }
.r2-src { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; margin-top: 14px; text-align: right; }
@media (max-width: 820px) { .r2-src { text-align: left; } }
/* --- Stronger compare contrast --- */
.compare-col.old { background: #f4f2f6; border-color: #e4e0ec; }
.compare-col.old .compare-list li { color: var(--ink-mute); }
.compare-col.old .compare-list li strong { color: var(--ink-soft); }
.compare-col.old .compare-title { color: #a29db3; }
.compare-col.new { background: linear-gradient(180deg, #fff, #f3ecff); border: 1.5px solid var(--p-300); box-shadow: 0 34px 80px -40px var(--purple-glow); }
.compare-col.new .compare-list li { color: var(--ink-2); }
/* --- Case-study visual scenes --- */
.c2scene { border-radius: 14px; padding: 18px; margin-bottom: 18px; border: 1px solid var(--line); }
.c2scene.claims { background: linear-gradient(160deg, var(--p-50), #fff); display: flex; align-items: center; gap: 14px; }
.c2s-doc { width: 46px; height: 58px; background: #fff; border: 1px solid var(--p-200); border-radius: 6px; padding: 9px 7px; display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.c2s-line { height: 4px; border-radius: 2px; background: var(--p-200); }
.c2s-line.w1 { width: 100%; } .c2s-line.w2 { width: 70%; } .c2s-line.w3 { width: 85%; }
.c2s-checks { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.c2s-chk { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 6px; }
.c2s-chk.ok { background: var(--mint-50); color: var(--green-600); }
.c2s-chk.flag { background: var(--blue-50); color: var(--blue-600); }
.c2s-out { align-self: center; font-family: var(--sans); font-weight: 800; font-size: 13px; padding: 8px 14px; border-radius: 100px; flex-shrink: 0; }
.c2s-out.purple { background: var(--violet); color: #fff; }
.c2scene.booking { background: linear-gradient(160deg, var(--teal-2), #fff); display: flex; align-items: center; gap: 16px; }
.c2s-chat { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.c2s-bub { font-size: 11px; padding: 5px 9px; border-radius: 9px; max-width: 82%; }
.c2s-bub.in { align-self: flex-start; background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
.c2s-bub.out { align-self: flex-end; background: #06695e; color: #fff; }
.c2s-bub.ok { align-self: flex-end; background: var(--mint-50); color: var(--green-600); font-weight: 700; border: 1px solid #b6ead0; }
.c2s-clock { text-align: center; flex-shrink: 0; }
.c2s-24 { display: block; font-family: var(--sans); font-weight: 800; font-size: 24px; color: #06695e; letter-spacing: -0.03em; }
.c2s-cl { font-size: 10px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; }
.c2scene.supply { background: linear-gradient(160deg, var(--amber-2), #fff); display: flex; align-items: center; gap: 12px; }
.c2s-srcs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; flex: 1; }
.c2s-src { font-size: 10.5px; font-weight: 600; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; text-align: center; }
.c2s-merge { font-size: 20px; color: #c8901a; flex-shrink: 0; }
.c2s-erp { flex-shrink: 0; text-align: center; background: #fff; border: 1px solid #f2d99a; border-radius: 10px; padding: 12px 16px; font-family: var(--sans); font-weight: 800; font-size: 15px; color: #8a5d0a; }
.c2s-erp span { display: block; font-family: var(--sans); font-weight: 500; font-size: 9.5px; color: var(--ink-mute); margin-top: 3px; }
@media (max-width: 520px) { .c2scene { flex-wrap: wrap; } }
/* === Product-screen mockups (Dubai solutions) === */
.build-gallery { align-items: start; }
.build-gallery .sol-mock, .build-gallery .sol-shot { display: none; }
.build-gallery .sol-card { display: flex; flex-direction: column; }
.build-gallery .ps { margin: 24px 22px 0; height: 400px; }
.ps-web, .ps-phone { width: auto; }
/* web chrome */
.ps-web { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(12,10,31,0.35); display: flex; flex-direction: column; }
.ps-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.ps-bar .d { width: 9px; height: 9px; border-radius: 50%; }
.ps-bar .d.r { background: #ff5f57; } .ps-bar .d.y { background: #febc2e; } .ps-bar .d.g { background: #28c840; }
.ps-url { margin-left: 10px; font-family: var(--mono); font-size: 11px; color: var(--ink-mute); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 4px 12px; flex: 1; }
.ps-app { padding: 18px; display: flex; flex-direction: column; flex: 1; overflow: hidden; }
/* phone chrome — center the frame within the fixed-height slot */
.ps-phone { display: flex; align-items: center; justify-content: center; background: none; border: none; box-shadow: none; }
/* phone chrome */
.ps-phone { padding-top: 22px; }
.ps-phone-frame { position: relative; width: 200px; background: #0c0a1f; border-radius: 28px; padding: 10px 9px; box-shadow: 0 26px 54px -24px rgba(12,10,31,0.5); }
.ps-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 60px; height: 15px; background: #0c0a1f; border-radius: 0 0 12px 12px; z-index: 3; }
.ps-phone .ps-app { border-radius: 20px; height: 360px; overflow: hidden; padding: 18px; }
/* app color themes */
.app-blue { background: linear-gradient(180deg, #eef4ff, #fff); }
.app-teal { background: #fff; }
.app-green { background: #fff; }
.app-amber { background: #fff; }
.app-purple { background: #fff; }
.app-voice { background: linear-gradient(180deg, #16102e, #2a1d54); }
/* booking phone app */
.psa-top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
.psa-back { color: var(--blue-600); font-size: 20px; }
.psa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-500); }
.psa-doc { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--blue-100); border-radius: 12px; padding: 10px; margin-bottom: 14px; }
.psa-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #7aa5ff, var(--blue-600)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.psa-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.psa-spec { font-size: 11px; color: var(--ink-mute); }
.psa-day { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 9px; }
.psa-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 16px; }
.psa-slot { text-align: center; font-size: 12px; font-weight: 600; padding: 9px 0; border-radius: 9px; background: #fff; border: 1px solid var(--blue-100); color: var(--ink-2); }
.psa-slot.sel { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.psa-cta { text-align: center; background: var(--blue-600); color: #fff; font-size: 13px; font-weight: 700; padding: 12px; border-radius: 12px; }
/* voice call app */
.app-voice { display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; padding: 22px 16px; }
.pv-status { font-size: 11px; color: rgba(255,255,255,0.6); letter-spacing: 0.04em; margin-bottom: 22px; }
.pv-orb { position: relative; width: 84px; height: 84px; margin-bottom: 20px; }
.pv-orb span { position: absolute; inset: 0; border-radius: 50%; }
.pv-orb span:nth-child(1) { background: radial-gradient(circle at 40% 35%, #b69bfb, #6a35e0); }
.pv-orb span:nth-child(2) { border: 1.5px solid rgba(180,155,251,0.5); animation: hubring 2.4s ease-out infinite; }
.pv-orb span:nth-child(3) { border: 1.5px solid rgba(180,155,251,0.4); animation: hubring 2.4s ease-out infinite 1.2s; }
.pv-caption { font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,0.9); max-width: 22ch; margin-bottom: 18px; }
.pv-wave { display: flex; align-items: center; gap: 3px; height: 26px; margin-bottom: 20px; }
.pv-wave i { width: 3px; border-radius: 2px; background: var(--p-300); animation: wave 1s ease-in-out infinite; }
.pv-wave i:nth-child(odd) { animation-delay: 0.2s; } .pv-wave i:nth-child(3n) { animation-delay: 0.4s; }
@keyframes wave { 0%,100% { height: 7px; } 50% { height: 24px; } }
.pv-actions { display: flex; align-items: center; gap: 14px; }
.pv-end { background: #c2281b; color: #fff; font-size: 12px; font-weight: 700; padding: 8px 20px; border-radius: 100px; }
.pv-live { font-size: 11px; color: #4be0a0; }
/* lead pipeline (green) */
/* lead pipeline (green) — funnel */
.pg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pg-title { font-size: 13px; font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.pg-badge { font-size: 11px; font-weight: 700; color: var(--green-600); background: var(--mint-50); padding: 4px 10px; border-radius: 100px; }
.pg-hero { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.pg-hero-n { font-size: 46px; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
.pg-hero-up { font-size: 14px; font-weight: 700; color: var(--green-600); }
.pg-funnel { display: flex; flex-direction: column; gap: 12px; }
.pgf { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 12px; }
.pgf-l { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.pgf-bar { height: 20px; border-radius: 6px; background: linear-gradient(90deg, #9fe0bd, #0f6b31); }
.pgf-bar.win { background: linear-gradient(90deg, #0f6b31, var(--green-600)); }
.pgf-v { font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* claims (teal) — ring + chips */
.pc-ringwrap { position: relative; width: 130px; height: 130px; margin: 4px auto 18px; }
.pc-ring { width: 130px; height: 130px; transform: rotate(-90deg); }
.pcr-bg { fill: none; stroke: var(--teal-2); stroke-width: 11; }
.pcr-fg { fill: none; stroke: #06695e; stroke-width: 11; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 19; }
.pc-ringv { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pc-ringv b { font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
.pc-ringv span { font-size: 10px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.pc-chip { font-size: 11.5px; font-weight: 600; padding: 6px 12px; border-radius: 100px; background: var(--teal-2); color: #06695e; }
.pc-chip.approved { background: #06695e; color: #fff; }
/* supplier (amber) */
.pu-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 13px; font-weight: 700; color: var(--ink); }
.pu-live { font-size: 11px; color: #8a5d0a; font-weight: 600; }
.pu-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 9px; }
.pu-ch { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; flex-shrink: 0; }
.pu-ch.email { background: var(--blue-600); } .pu-ch.wa { background: #0f6b31; } .pu-ch.portal { background: #8a5d0a; }
.pu-body { flex: 1; } .pu-body b { font-size: 13px; color: var(--ink); } .pu-body small { display: block; font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.pu-ok { font-size: 11px; font-weight: 700; color: var(--green-600); flex-shrink: 0; }
.pu-flag { font-size: 11px; font-weight: 700; color: #8a5d0a; flex-shrink: 0; }
/* ERP reporting (purple) — bar chart */
.pr-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-mute); font-weight: 600; }
.pr-up { color: var(--green-600); font-weight: 700; }
.pr-big { font-size: 34px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; margin: 6px 0 16px; white-space: nowrap; }
.pr-bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; margin-bottom: 16px; }
.pr-bars span { flex: 1; border-radius: 6px 6px 0 0; background: var(--p-100); }
.pr-bars span.win { background: linear-gradient(180deg, var(--p-400), var(--violet)); }
.pr-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* === Branded hero panels (Dubai solution cards 3-6) === */
.build-gallery .ps.solhero { position: relative; overflow: hidden; border-radius: 16px; display: flex; align-items: center; justify-content: center; border: none; box-shadow: 0 24px 50px -30px rgba(12,10,31,0.4); }
.sh-green { background: linear-gradient(155deg, #0d6f3b 0%, #0b5f34 100%); }
.sh-teal { background: linear-gradient(155deg, #0a7d71 0%, #086b60 100%); }
.sh-amber { background: linear-gradient(155deg, #d99e2b 0%, #8a5f10 100%); }
.sh-purple { background: linear-gradient(155deg, #7c4dee 0%, #3a1c8f 100%); }
.sh-rings { position: absolute; inset: 0; background-image: radial-gradient(circle at 72% 28%, transparent 0, transparent 38px, rgba(255,255,255,0.09) 39px, rgba(255,255,255,0.09) 40px, transparent 41px), radial-gradient(circle at 72% 28%, transparent 0, transparent 74px, rgba(255,255,255,0.07) 75px, rgba(255,255,255,0.07) 76px, transparent 77px), radial-gradient(circle at 72% 28%, transparent 0, transparent 118px, rgba(255,255,255,0.05) 119px, rgba(255,255,255,0.05) 120px, transparent 121px); }
.sh-inner { position: relative; z-index: 2; color: #fff; text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sh-badge { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28); padding: 6px 14px; border-radius: 100px; }
.sh-badge.light { background: rgba(255,255,255,0.9); color: #3a1c8f; border: none; }
.sh-metric { font-family: var(--sans); font-weight: 800; font-size: 42px; letter-spacing: -0.04em; line-height: 0.9; }
.sh-metric span { display: block; font-size: 13px; font-weight: 500; letter-spacing: 0; margin-top: 8px; color: rgba(255,255,255,0.8); }
.sh-note { font-size: 13px; font-weight: 600; background: rgba(255,255,255,0.16); padding: 6px 14px; border-radius: 100px; }
.sh-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sh-chips span { font-size: 11.5px; font-weight: 600; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); padding: 5px 12px; border-radius: 100px; }
.sh-shield { width: 58px; height: 58px; border-radius: 16px; background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; color: #fff; }
.sh-shield svg { width: 30px; height: 30px; }
.sh-flow { display: flex; gap: 8px; }
.sh-flow span { font-size: 12px; font-weight: 600; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28); padding: 7px 13px; border-radius: 10px; }
.sh-arrow { font-size: 22px; opacity: 0.85; }
.sh-erp { font-size: 22px; font-weight: 800; letter-spacing: 0.05em; background: rgba(255,255,255,0.92); color: #8a5f10; padding: 12px 26px; border-radius: 12px; }
.sh-bars { display: flex; align-items: flex-end; gap: 8px; height: 84px; width: 190px; margin-top: 6px; }
.sh-bars i { flex: 1; border-radius: 5px 5px 0 0; background: rgba(255,255,255,0.35); }
.sh-bars i.win { background: #fff; }
/* === Portfolio image cards (reference style) === */
.build-gallery.portfolio { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 44px; }
@media (max-width: 760px) { .build-gallery.portfolio { grid-template-columns: 1fr; gap: 32px; } }
.build-gallery.portfolio .sol-card { background: none; border: none; box-shadow: none; padding: 0; overflow: visible; }
.build-gallery.portfolio .sol-card:hover { transform: none; box-shadow: none; border: none; }
.build-gallery.portfolio .sol-hero { display: block; width: 100%; height: 300px; border-radius: 16px; overflow: hidden; box-shadow: 0 26px 56px -34px rgba(12,10,31,0.4); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
@media (max-width: 520px) { .build-gallery.portfolio .sol-hero { height: 230px; } }
.build-gallery.portfolio .sol-card:hover .sol-hero { transform: translateY(-6px); box-shadow: 0 40px 80px -34px rgba(12,10,31,0.45); }
.build-gallery.portfolio figcaption { padding: 20px 4px 0; }
.build-gallery.portfolio .sol-title { font-family: var(--sans); font-weight: 800; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.03em; color: var(--ink); line-height: 1.14; margin-bottom: 8px; }
.build-gallery.portfolio .sol-kpi { font-size: 14.5px; color: var(--ink-soft); }
/* custom illustration heroes */
.sol-illus { height: 300px; border-radius: 16px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; box-shadow: 0 26px 56px -34px rgba(12,10,31,0.4); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
@media (max-width: 520px) { .sol-illus { height: 230px; } }
.sol-card:hover .sol-illus { transform: translateY(-6px); box-shadow: 0 40px 80px -34px rgba(12,10,31,0.45); }
.sol-illus svg { width: 78%; height: 78%; overflow: visible; }
.si-blue { background: linear-gradient(155deg, #eaf1ff, #d6e4ff); }
.si-purple { background: linear-gradient(155deg, #f1ebff, #e6dcff); }
.si-green { background: linear-gradient(155deg, #e7f8ef, #cdeede); }
.si-teal { background: linear-gradient(155deg, #e2f6f2, #cfeee7); }
.si-amber { background: linear-gradient(155deg, #fbf1d9, #f6e6bd); }
.si-violet { background: linear-gradient(155deg, #efe8ff, #ddd0fb); }
.si-float { animation: floaty 6s ease-in-out infinite; }
.si-float2 { animation: floaty 7s ease-in-out infinite reverse; }
.pr-tile { background: var(--p-50); border-radius: 10px; padding: 12px 14px; }
.pr-tile b { font-size: 17px; font-weight: 800; color: var(--ink); } .pr-tile small { display: block; font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
/* --- Dubai solution card animations (on scroll) --- */
.sol-card.mock-anim.viz-in .bk-row { opacity: 0; animation: kpiIn 0.5s var(--ease) forwards; }
.sol-card.mock-anim.viz-in .bk-row:nth-child(2) { animation-delay: 0.2s; }
.sol-card.mock-anim.viz-in .bk-row:nth-child(3) { animation-delay: 0.45s; }
.sol-card.mock-anim.viz-in .bk-row:nth-child(4) { animation-delay: 0.7s; }
.sol-card.mock-anim .bk-btn { transition: background 0.3s, color 0.3s; }
.sol-card.mock-anim.viz-in .bk-row:nth-child(2) .bk-btn { animation: btnConfirm 0.5s var(--ease) 1.0s forwards; }
.sol-card.mock-anim.viz-in .bk-row:nth-child(3) .bk-btn { animation: btnConfirm 0.5s var(--ease) 1.3s forwards; }
.sol-card.mock-anim.viz-in .bk-row:nth-child(4) .bk-btn { animation: btnConfirm 0.5s var(--ease) 1.6s forwards; }
@keyframes btnConfirm { to { background: var(--mint-50); color: var(--green-600); } }
.sol-card.mock-anim .clm { opacity: 0.4; transition: opacity 0.4s var(--ease); }
.sol-card.mock-anim.viz-in .clm { opacity: 1; }
.sol-card.mock-anim.viz-in .clm:nth-child(1) { transition-delay: 0.2s; }
.sol-card.mock-anim.viz-in .clm:nth-child(2) { transition-delay: 0.6s; }
.sol-card.mock-anim.viz-in .clm:nth-child(3) { transition-delay: 1.0s; }
.sol-card.mock-anim.viz-in .clm:nth-child(4) { transition-delay: 1.4s; }
.sol-card.mock-anim .clm-ic { transform: scale(0.4); transition: transform 0.35s var(--ease); }
.sol-card.mock-anim.viz-in .clm:nth-child(1) .clm-ic { transition-delay: 0.4s; transform: scale(1); }
.sol-card.mock-anim.viz-in .clm:nth-child(2) .clm-ic { transition-delay: 0.8s; transform: scale(1); }
.sol-card.mock-anim.viz-in .clm:nth-child(3) .clm-ic { transition-delay: 1.2s; transform: scale(1); }
.sol-card.mock-anim.viz-in .clm:nth-child(4) .clm-ic { transition-delay: 1.6s; transform: scale(1); }
/* =========================================================
v14 — Apple-style headings (SF Pro) + section reworks
========================================================= */
/* Apple display type: bold, tightly tracked, upright (no italic) */
.h1, .section-h2, .tl-title, .case-title, .compare-title, .af-title,
.why-cell-title, .form-title, .modal-title, .auth-h, .build-head h3,
.screen-wide-h, .why2 h3, .vs-name, .r2-h {
font-weight: 700;
letter-spacing: -0.035em;
}
.h1 { font-weight: 700; letter-spacing: -0.04em; max-width: 15ch; }
.section-h2 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
.h1 em, .section-h2 em, .auth-h em, .screen-wide-h em, .build-head h3 em,
.tc-quote em, .compare-title em, .af-title em {
font-style: normal !important;
}
/* keep decorative script-y italics from looking broken in system font */
.step3-num, .vs-vs, .tc-mark, .fc-agent, .auth-badge .ab-ic { font-style: normal; }
/* ---- Reality: natural editorial layout ---- */
.reality2 { grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; padding: 8px 0 20px; }
.r2-h { font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; max-width: 18ch; }
.r2-p { font-size: 16px; }
.r2-stats { gap: 0; }
.r2-stat { border-left: none; padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.r2-stat:first-child { padding-top: 0; }
.r2-stat:last-child { border-bottom: none; padding-bottom: 0; }
.r2-v { font-family: var(--serif); font-weight: 700; font-size: clamp(46px, 6vw, 62px); }
.r2-v.warn { color: var(--ink); } .r2-v.good { color: var(--ink); }
.r2-v.warn span, .r2-v.good span { color: var(--ink-mute); font-weight: 600; }
.r2-stat::before { content: none; }
/* small colored keyline before each stat number */
.r2-stat { position: relative; padding-left: 20px; }
.r2-stat::after { content: ''; position: absolute; left: 0; top: 26px; bottom: 26px; width: 4px; border-radius: 4px; }
.r2-stat:first-child::after { top: 4px; background: var(--coral); }
.r2-stat:last-child::after { bottom: 4px; background: var(--mint); }
/* ---- Compare columns: cleaner bg + type ---- */
.compare-col { border-radius: var(--r-lg); padding: 36px 34px; }
.compare-col.old { background: #f6f5f8; border-color: #e8e5f0; }
.compare-col.old .compare-title { color: var(--ink-2); }
.compare-col.old .compare-head { opacity: 0.9; }
.compare-col.new { background: #fff; border: 1.5px solid var(--p-200); box-shadow: 0 30px 70px -42px var(--purple-glow); }
.compare-col.new::before { content: ''; position: absolute; inset: 0; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(124,77,238,0.05), transparent 40%); pointer-events: none; }
.compare-title { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 22px; }
.compare-list li { font-size: 14.5px; line-height: 1.55; }
/* --- Why-us: human layout (team photo + points) --- */
.trust2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .trust2 { grid-template-columns: 1fr; gap: 36px; } }
.trust2-photo { position: relative; }
.trust2-panel { position: relative; background: linear-gradient(160deg, #14102b 0%, #241a48 100%); border-radius: var(--r-xl); padding: 40px; overflow: hidden; }
.trust2-panel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 85% 15%, rgba(124,44,230,0.35), transparent 60%); pointer-events: none; }
.tp-stats { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; margin-bottom: 28px; }
.tp-stat .tp-n { font-family: var(--sans); font-weight: 800; font-size: clamp(38px, 5vw, 52px); line-height: 0.9; letter-spacing: -0.04em; color: #fff; }
.tp-stat .tp-n span { color: var(--p-300); font-size: 0.55em; }
.tp-stat .tp-c { font-size: 13px; color: rgba(255,255,255,0.65); margin-top: 8px; line-height: 1.4; }
.tp-compliance { position: relative; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); }
.tp-comp-l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 12px; }
.tp-comp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-comp-tags span { font-size: 12px; font-weight: 600; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); border-radius: 100px; padding: 6px 13px; }
.tp-foot { position: relative; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 13px; color: rgba(255,255,255,0.8); display: flex; align-items: center; gap: 9px; }
.tp-dot { width: 8px; height: 8px; border-radius: 50%; background: #4be0a0; box-shadow: 0 0 0 3px rgba(75,224,160,0.25); animation: pulse 2s ease-in-out infinite; flex-shrink: 0; }
.trust2-points { display: flex; flex-direction: column; gap: 12px; }
.t2p { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 26px; transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s; }
.t2p:hover { transform: translateY(-3px); border-color: var(--p-200); box-shadow: 0 22px 54px -32px var(--purple-glow); }
.t2p-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--p-50); color: var(--purple); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.t2p:nth-child(2) .t2p-ic { background: var(--mint-50); color: var(--green-600); }
.t2p:nth-child(3) .t2p-ic { background: var(--blue-50); color: var(--blue-600); }
.t2p-ic svg { width: 24px; height: 24px; }
.t2p-body h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); margin-bottom: 6px; line-height: 1.2; }
.t2p-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
/* ---- Case-study before/after: calmer, editorial ---- */
.case2-proof { background: var(--bg-soft); border-left: 1px solid var(--line); gap: 22px; }
.ba-row { align-items: stretch; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.ba { flex: 1; text-align: left; padding: 20px 22px; border-radius: 0; background: #fff; border: none; }
.ba.before { border-right: 1px solid var(--line); }
.ba-k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px; }
.ba-v { font-family: var(--serif); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -0.03em; color: var(--ink-mute); }
.ba-s { font-size: 12px; color: var(--ink-mute); margin-top: 8px; }
.ba.before { background: #faf9fc; }
.ba.before .ba-v { color: #b6b1c4; }
.ba.after { background: #fff; }
.ba.after.purple .ba-v { color: var(--violet); }
.ba.after.teal .ba-v { color: #06695e; }
.ba.after.amber .ba-v { color: #8a5d0a; }
.ba.after .ba-k { color: var(--ink-2); }
/* remove the arrow chip — replaced by the divider between panes */
.ba-arrow { display: none; }
.ba-bar { height: 6px; }
.ba-foot { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.ba-foot strong { color: var(--ink); font-weight: 700; }
@media (max-width: 860px) { .ba.before { border-right: none; border-bottom: 1px solid var(--line); } }
/* ============================================================
AUTHORITATIVE Dubai-solutions gallery layout (final override)
============================================================ */
.sol-gallery.build-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
align-items: stretch;
}
@media (max-width: 980px) { .sol-gallery.build-gallery { grid-template-columns: 1fr 1fr; max-width: none; margin: 0; } }
@media (max-width: 640px) { .sol-gallery.build-gallery { grid-template-columns: 1fr; } }
.sol-gallery.build-gallery .sol-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0;
}
.sol-gallery.build-gallery .sol-card:hover { transform: translateY(-5px); box-shadow: 0 30px 70px -38px rgba(70,30,160,0.28); border-color: var(--p-200); }
/* the screen slot */
.sol-gallery.build-gallery .ps {
margin: 0;
height: 460px;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-soft);
border-bottom: 1px solid var(--line);
}
/* web browser window */
.sol-gallery.build-gallery .ps.ps-web {
display: flex; flex-direction: column;
align-items: stretch; justify-content: flex-start;
padding: 0; background: #fff;
}
.sol-gallery.build-gallery .ps-web .ps-bar { flex-shrink: 0; }
.sol-gallery.build-gallery .ps-web.nobar .ps-app { padding-top: 20px; }
/* full-image solution shots (booking, leads, supplier, ERP) */
.sol-gallery.build-gallery .sol-shot-img { display: block; width: 100%; height: 460px; object-fit: cover; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
/* single-screen solution dashboards (leads, supplier, ERP) */
.dashx.ps-web { background: none; border: none; box-shadow: none; }
.dx { height: 460px; display: flex; flex-direction: column; gap: 12px; padding: 22px !important; color: #fff; border-bottom: none; }
.dx-leads { background: linear-gradient(165deg, #0f2a1c, #08160f); }
.dx-sup { background: linear-gradient(165deg, #2a1f0a, #14100a); }
.dx-erp { background: linear-gradient(165deg, #1c1340, #100a24); }
.dx-top { display: flex; align-items: center; justify-content: space-between; }
.dx-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.dx-badge { font-size: 11px; font-weight: 800; color: #0c1a12; background: #8ef0b0; padding: 4px 11px; border-radius: 100px; }
.dx-erp .dx-badge { background: #c9b8ff; color: #1a0f3d; }
.dx-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #f0c674; background: rgba(217,158,43,0.16); padding: 4px 11px; border-radius: 100px; }
.dx-live .ld { width: 6px; height: 6px; border-radius: 50%; background: #f0c674; animation: pulse 2s ease-in-out infinite; }
.dx-hero { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dx-n { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; white-space: nowrap; }
.dx-sub { font-size: 12.5px; color: rgba(255,255,255,0.7); } .dx-sub b { color: #8ef0b0; }
.dx-sup .dx-sub b { color: #f0c674; }
.dx-src { display: flex; gap: 7px; }
.dxs { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(255,255,255,0.08); border-radius: 10px; padding: 8px 4px; font-size: 11px; font-weight: 600; }
.dxs svg { width: 15px; height: 15px; }
.dx-funnel { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.dxf { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 10px; }
.dxf-l { font-size: 11.5px; color: rgba(255,255,255,0.75); }
.dxf-track { height: 18px; background: rgba(255,255,255,0.1); border-radius: 6px; overflow: hidden; }
.dxf-track i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #3fbf78, #8ef0b0); }
.dxf-track i.win { background: #8ef0b0; }
.dxf-v { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dx-rows { display: flex; flex-direction: column; gap: 8px; }
.dxr { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.07); border-radius: 11px; padding: 9px 11px; }
.dxr-ic { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dxr-ic svg { width: 16px; height: 16px; }
.dxr-b { flex: 1; min-width: 0; } .dxr-b b { font-size: 12px; } .dxr-b small { display: block; font-size: 10.5px; color: rgba(255,255,255,0.5); }
.dxr-ok { font-size: 11px; font-weight: 800; color: #8ef0b0; } .dxr-flag { font-size: 11px; font-weight: 800; color: #f0c674; }
.dx-chart { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding: 8px; background: rgba(255,255,255,0.05); border-radius: 14px; }
.dx-chart span { flex: 1; border-radius: 5px 5px 2px 2px; background: rgba(201,184,255,0.4); }
.dx-chart span.win { background: linear-gradient(180deg, #b49bff, #8b6dff); }
.dx-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dxt { background: rgba(255,255,255,0.07); border-radius: 11px; padding: 10px 12px; }
.dxt b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; } .dxt small { font-size: 10px; color: rgba(255,255,255,0.5); }
.dx-foot { margin-top: auto; font-size: 11.5px; color: rgba(255,255,255,0.6); text-align: center; padding-top: 4px; }
.sol-gallery.build-gallery .ps-web .ps-app { flex: 1; overflow: hidden; padding: 18px; }
/* phone frame centered in the slot */
.sol-gallery.build-gallery .ps.ps-phone { padding: 0; }
.sol-gallery.build-gallery .ps-phone-frame { width: 200px; height: 420px; padding: 9px 8px; }
.sol-gallery.build-gallery .ps-phone .ps-app { height: 100%; border-radius: 20px; padding: 16px; overflow: hidden; }
/* caption */
.sol-gallery.build-gallery figcaption { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.sol-gallery.build-gallery .sol-title { font-family: var(--sans); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.25; margin: 4px 0 8px; min-height: 2.5em; }
.sol-gallery.build-gallery .sol-kpi { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin-top: auto; }
/* AI booking — modern 2026 customer mobile app */
.bkapp { padding: 0 !important; background: #fbfbfe; display: flex; flex-direction: column; font-family: var(--sans); }
.bk-status { display: flex; align-items: center; justify-content: space-between; padding: 9px 20px 5px; font-size: 11px; font-weight: 700; color: #fff; position: relative; z-index: 2; }
.bk-sig { width: 15px; height: 9px; border-radius: 2px; background: #fff; opacity: 0.9; }
.bk-hero { position: relative; background: linear-gradient(155deg, #6d5cff 0%, #4a2fd6 55%, #3a1fb0 100%); padding: 4px 18px 20px; border-radius: 0 0 28px 28px; overflow: hidden; }
.bk-hero-glow { position: absolute; top: -40px; right: -30px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.35), transparent 70%); }
.bk-hero-top { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bk-pill { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; color: #fff; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3); padding: 4px 10px; border-radius: 100px; }
.bk-heart { color: rgba(255,255,255,0.85); font-size: 15px; }
.bk-hero-row { position: relative; display: flex; align-items: center; gap: 11px; min-width: 0; }
.bk-docwrap { min-width: 0; flex: 1; }
.bk-avatar { width: 40px; height: 40px; border-radius: 12px; overflow: hidden; border: 1.5px solid rgba(255,255,255,0.5); display: block; box-shadow: 0 6px 16px -6px rgba(0,0,0,0.3); flex-shrink: 0; }
.bk-doc { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-spec { font-size: 11.5px; color: rgba(255,255,255,0.82); margin-top: 2px; }
.bk-body { padding: 14px 18px 16px; flex: 1; display: flex; flex-direction: column; }
.bk-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9a95ad; margin-bottom: 8px; }
.bk-dates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 14px; }
.bk-date { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 0; border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(20,10,50,0.05), inset 0 0 0 1px #eeecf6; }
.bk-date i { font-size: 9.5px; font-weight: 600; color: #9a95ad; font-style: normal; }
.bk-date b { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.bk-date.on { background: linear-gradient(155deg, #6d5cff, #4a2fd6); box-shadow: 0 8px 18px -6px rgba(93,63,238,0.55); }
.bk-date.on i, .bk-date.on b { color: #fff; }
.bk-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 16px; }
.bk-time { text-align: center; padding: 10px 0; border-radius: 12px; background: #fff; font-size: 12px; font-weight: 700; color: var(--ink-2); box-shadow: 0 1px 3px rgba(20,10,50,0.05), inset 0 0 0 1px #eeecf6; }
.bk-time.on { background: #efecff; color: #4a2fd6; box-shadow: inset 0 0 0 1.5px #6d5cff; }
.bk-confirm { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(120deg, #6d5cff, #4a2fd6); color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; padding: 13px; border-radius: 15px; box-shadow: 0 12px 26px -10px rgba(93,63,238,0.6); }
.bk-arrow { font-size: 15px; }
/* Omni-channel lead capture — modern 2026 web dashboard */
.lg2 { background: #fbfbfe; display: flex; flex-direction: column; gap: 14px; }
.lg2-head { display: flex; align-items: flex-start; justify-content: space-between; }
.lg2-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9a95ad; margin-bottom: 4px; }
.lg2-big { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); line-height: 0.9; display: flex; align-items: baseline; gap: 10px; }
.lg2-up { font-size: 13px; font-weight: 700; color: var(--green-600); }
.lg2-roas { text-align: center; background: linear-gradient(150deg, #22c07f, #0d6f3b); color: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 10px 22px -10px rgba(18,146,78,0.6); }
.lg2-roas b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.lg2-roas small { font-size: 9.5px; font-weight: 600; opacity: 0.9; letter-spacing: 0.06em; }
.lg2-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lg2-ch { display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 11px; padding: 9px 11px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1px #eeecf6; }
.lg2-ch b { margin-left: auto; font-size: 14px; font-weight: 800; color: var(--ink); }
.lg2-ic { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.lg2-ic svg { width: 18px; height: 18px; }
.lg2-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.lg2-dot.meta { background: #4267f0; } .lg2-dot.goog { background: #ea4335; } .lg2-dot.wa { background: #0f6b31; }
.lg2-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9a95ad; margin-bottom: -4px; }
.lg2-funnel { display: flex; flex-direction: column; gap: 9px; }
.lg2f { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 12px; }
.lg2f-l { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.lg2f-track { height: 22px; background: #f0eef7; border-radius: 7px; overflow: hidden; }
.lg2f-bar { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #6ee0aa, #22c07f); }
.lg2f-bar.win { background: linear-gradient(90deg, #22c07f, #0d6f3b); }
.lg2f-v { font-size: 12px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
/* AI claims processing — modern 2026 web dashboard */
.cl2 { background: #fbfbfe; display: flex; flex-direction: column; gap: 14px; }
.cl2-head { display: flex; align-items: center; justify-content: space-between; }
.cl2-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8f97a3; margin-bottom: 4px; white-space: nowrap; }
.cl2-amt { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 0.9; white-space: nowrap; }
.cl2-ring { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.cl2-ring svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.cl2r-bg { fill: none; stroke: #d7 efea; stroke-width: 5; }
.cl2r-bg { fill: none; stroke: #d7efea; stroke-width: 5; }
.cl2r-fg { fill: none; stroke: #0a7d71; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 7; }
.cl2-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.cl2-steps { display: flex; flex-direction: column; gap: 7px; }
.cl2-step { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 11px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1px #ebeef0; }
.cl2-ic { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; background: #0a7d71; flex-shrink: 0; }
.cl2-step.live { box-shadow: inset 0 0 0 1.5px #0a7d71; background: #ecf9f6; }
.cl2-step.live .cl2-ic { background: #0d6f3b; animation: pulse 2s ease-in-out infinite; }
.cl2-t { margin-left: auto; font-size: 10.5px; font-weight: 700; color: #8f97a3; font-variant-numeric: tabular-nums; }
.cl2-foot { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.cl2-badge { font-size: 11.5px; font-weight: 800; color: #fff; background: linear-gradient(120deg, #0a7d71, #06695e); padding: 8px 16px; border-radius: 100px; box-shadow: 0 10px 20px -10px rgba(15,181,163,0.6); }
.cl2-sub { font-size: 11.5px; color: var(--ink-soft); }
/* AI claims processing — centered approval hero (distinct) */
.cx { background: radial-gradient(ellipse 80% 60% at 50% 0%, #e2f6f2, #fbfbfe 70%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.cx-seal { width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(150deg, #12b89e, #06695e); display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px -10px rgba(15,181,163,0.6), 0 0 0 8px rgba(15,181,163,0.12); margin: 6px 0 10px; }
.cx-seal svg { width: 30px; height: 30px; }
.cx-status { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: #06695e; text-transform: uppercase; }
.cx-amt { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1; white-space: nowrap; }
.cx-meta { font-size: 11.5px; color: var(--ink-mute); margin-bottom: 14px; }
.cx-track { display: flex; align-items: center; width: 100%; padding: 0 6px; }
.cx-node { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; background: #fff; box-shadow: inset 0 0 0 2px #d0e8e2; }
.cx-node.done { background: #0a7d71; box-shadow: 0 0 0 3px rgba(15,181,163,0.18); }
.cx-node.now { background: #fff; box-shadow: 0 0 0 3px rgba(15,181,163,0.3), inset 0 0 0 3px #0a7d71; animation: pulse 2s ease-in-out infinite; }
.cx-line { flex: 1; height: 3px; background: #d0e8e2; }
.cx-line.done { background: #0a7d71; }
.cx-labels { display: flex; justify-content: space-between; width: 100%; padding: 0 2px; margin-top: 8px; }
.cx-labels span { font-size: 10px; font-weight: 700; color: var(--ink-mute); letter-spacing: 0.02em; }
.cx-foot { margin-top: 16px; font-size: 12px; color: var(--ink-soft); background: #fff; border-radius: 10px; padding: 10px 14px; box-shadow: inset 0 0 0 1px #e2f0ec; }
.cx-foot b { color: #06695e; font-weight: 800; }
/* Case study — photo proof with overlaid stats */
.case2-photo { position: relative; padding: 0; border-left: none; overflow: hidden; min-height: 300px; display: block; }
@media (max-width: 860px) { .case2-photo { min-height: 260px; } }
.c2ph-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.c2ph-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,10,45,0.15) 0%, rgba(20,10,45,0.05) 40%, rgba(20,10,45,0.82) 100%); }
.c2ph-badge { position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.9); border-radius: 100px; padding: 6px 13px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.c2ph-dot { width: 6px; height: 6px; border-radius: 50%; background: #0f6b31; box-shadow: 0 0 0 3px rgba(15,107,49,0.25); animation: pulse 2s ease-in-out infinite; }
.c2ph-panel { position: absolute; left: 18px; right: 18px; bottom: 18px; }
.c2ph-ba { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.c2ph-cell { display: flex; flex-direction: column; }
.c2ph-k { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.65); }
.c2ph-v { font-family: var(--sans); font-size: 40px; font-weight: 800; letter-spacing: -0.04em; color: #fff; line-height: 1; }
.c2ph-v.red { color: #ff8a75; }
.c2ph-s { font-size: 10.5px; color: rgba(255,255,255,0.6); }
.c2ph-arrow { font-size: 22px; color: rgba(255,255,255,0.55); }
.c2ph-foot { font-size: 12.5px; color: rgba(255,255,255,0.85); line-height: 1.5; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; padding: 10px 13px; }
.c2ph-foot b { color: #fff; font-weight: 800; }
/* AI supplier tracking — modern 2026 web dashboard */
.su2 { background: #fbfbfe; display: flex; flex-direction: column; gap: 8px; }
.su2-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; }
.su2-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a8926a; margin-bottom: 3px; }
.su2-title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.su2-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #8a5d0a; background: #fbf1d9; padding: 5px 10px; border-radius: 100px; }
.su2-live .ld { width: 6px; height: 6px; border-radius: 50%; background: #d99e2b; animation: pulse 2s ease-in-out infinite; }
.su2-row { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 9px 11px; box-shadow: inset 0 0 0 1px #efe6d4; }
.su2-ch { width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.su2-ch svg { width: 18px; height: 18px; }
.su2-ch.email { background: #fff; box-shadow: inset 0 0 0 1px #f0d9a8; } .su2-ch.wa { background: #0f6b31; } .su2-ch.portal { background: #d99e2b; }
.su2-b { flex: 1; min-width: 0; } .su2-b b { font-size: 12.5px; color: var(--ink); } .su2-b small { display: block; font-size: 10.5px; color: var(--ink-mute); }
.su2-ok { font-size: 11px; font-weight: 800; color: #0d6f3b; flex-shrink: 0; }
.su2-flag { font-size: 11px; font-weight: 800; color: #8a5d0a; flex-shrink: 0; }
.su2-foot { margin-top: 2px; font-size: 12px; color: var(--ink-soft); text-align: center; }
.su2-foot b { color: var(--ink); font-weight: 800; }
/* AI ERP reporting — modern 2026 web dashboard */
.er2 { background: #fbfbfe; display: flex; flex-direction: column; gap: 14px; }
.er2-head { display: flex; align-items: flex-start; justify-content: space-between; }
.er2-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9a8fc4; margin-bottom: 4px; }
.er2-big { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 0.9; white-space: nowrap; }
.er2-up { font-size: 12px; font-weight: 800; color: #0d6f3b; background: #e7f8ef; padding: 5px 11px; border-radius: 100px; }
.er2-chart { display: flex; align-items: flex-end; gap: 8px; height: 132px; padding: 10px 4px; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1px #eeecf6; }
.er2-chart span { flex: 1; border-radius: 6px 6px 3px 3px; background: #ddd2f7; }
.er2-chart span.win { background: linear-gradient(180deg, #8b6dff, #5d3fee); box-shadow: 0 8px 16px -6px rgba(93,63,238,0.5); }
.er2-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.er2-tile { background: #f2edff; border-radius: 12px; padding: 11px 12px; }
.er2-tile b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; white-space: nowrap; }
.er2-tile small { font-size: 10px; color: var(--ink-mute); font-weight: 600; }
/* ============================================================
SEO CONTENT SECTIONS (definition, services, industries, cost…)
============================================================ */
.seoSec { padding: 100px 0; }
.seoSecAlt { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 860px) { .seoSec { padding: 68px 0; } }
.seoProse { max-width: 780px; margin: 0 auto; }
.seoProse p { font-size: 16.5px; line-height: 1.72; color: var(--ink-soft); margin-bottom: 18px; }
.seoProse p strong { color: var(--ink); font-weight: 700; }
.seoH3 { font-family: var(--sans); font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.03em; color: var(--ink); margin: 40px 0 18px; }
.seoList { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.seoList li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.seoList li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.seoListX li::before { background: var(--coral); }
.seoNote { padding: 16px 20px; background: var(--p-50); border-left: 3px solid var(--violet); border-radius: 0 10px 10px 0; font-size: 15px !important; color: var(--ink-2) !important; }
.seoFormula { padding: 18px 20px; background: var(--ink); color: #fff !important; border-radius: 12px; font-weight: 700; font-size: 15px !important; text-align: center; }
.seoSources { font-size: 13.5px !important; color: var(--ink-mute) !important; padding-top: 16px; border-top: 1px solid var(--line); }
.seoSources a { color: var(--violet); }
.seoLink { display: inline-block; font-weight: 700; font-size: 15px; color: var(--violet); text-decoration: none; border-bottom: 2px solid var(--p-200); padding-bottom: 2px; transition: border-color .2s, color .2s; }
.seoLink:hover { color: var(--p-800); border-bottom-color: var(--violet); }
.seoKicker { max-width: 760px; margin: 40px auto 0; text-align: center; font-family: var(--sans); font-weight: 800; font-size: clamp(17px, 2vw, 21px); letter-spacing: -0.02em; line-height: 1.4; color: var(--ink); }
/* comparison table */
.seoTableWrap { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.seoTable { width: 100%; border-collapse: collapse; min-width: 620px; }
.seoTable th, .seoTable td { text-align: left; padding: 14px 18px; font-size: 14.5px; line-height: 1.5; border-bottom: 1px solid var(--line); vertical-align: top; }
.seoTable thead th { background: var(--surface-2); font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.seoTable tbody th { font-weight: 800; color: var(--ink); width: 22%; }
.seoTable td { color: var(--ink-soft); }
.seoTable tbody tr:last-child th, .seoTable tbody tr:last-child td { border-bottom: none; }
.seoTable tbody tr:last-child { background: var(--p-50); }
/* card grids */
.seoGrid { display: grid; gap: 16px; }
.seoGrid3 { grid-template-columns: repeat(3, 1fr); }
.seoGrid4 { grid-template-columns: repeat(4, 1fr); }
.seoGrid5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .seoGrid4, .seoGrid5 { grid-template-columns: repeat(2, 1fr); } .seoGrid3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .seoGrid3, .seoGrid4, .seoGrid5 { grid-template-columns: 1fr; } }
.seoCard { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.seoCard:hover { transform: translateY(-4px); border-color: var(--p-200); box-shadow: 0 24px 60px -34px var(--purple-glow); }
.seoCardNum { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--violet); letter-spacing: 0.1em; margin-bottom: 12px; }
.seoCard h3 { font-family: var(--sans); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.28; margin-bottom: 10px; }
.seoCard p { font-size: 14px; line-height: 1.62; color: var(--ink-soft); }
.seoCard p strong { color: var(--ink); font-weight: 700; }
.seoIndustry .seoList { margin-bottom: 14px; }
.seoIndustry .seoList li { font-size: 13.5px; padding-left: 20px; }
.seoIndustry .seoList li::before { width: 5px; height: 5px; top: 7px; }
.seoIndustry .seoLink { font-size: 13.5px; margin-top: 12px; }
.seoDept .seoList li { font-size: 13.5px; padding-left: 20px; }
.seoDept .seoList li::before { width: 5px; height: 5px; top: 7px; }
.seoPrice { text-align: center; }
.seoPriceV { font-family: var(--sans); font-weight: 800; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.03em; color: var(--violet); margin: 10px 0 12px; }
/* quick answer */
.seoQuickSec { background: var(--bg-soft); border-top: 1px solid var(--line); }
.seoQuick { max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; }
@media (max-width: 720px) { .seoQuick { grid-template-columns: 1fr; } }
.seoQuick dt { font-weight: 800; font-size: 14.5px; color: var(--ink); margin-bottom: 4px; }
.seoQuick dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.seoReview { max-width: 820px; margin: 40px auto 0; padding-top: 22px; border-top: 1px solid var(--line); text-align: center; font-size: 13px; color: var(--ink-mute); }
.seoReview strong { color: var(--ink-2); font-weight: 700; }
/* ============================================================
SEO SECTIONS — modern visual pass (match page design system)
============================================================ */
/* colored icon squares */
.seoIcon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.seoIcon svg { width: 23px; height: 23px; }
.ic-vi { background: var(--p-50); color: var(--violet); }
.ic-bl { background: var(--blue-50); color: var(--blue-600); }
.ic-te { background: var(--teal-2); color: #06695e; }
.ic-am { background: var(--amber-2); color: #8a5d0a; }
.ic-gr { background: var(--mint-50); color: var(--green-600); }
.ic-glass { background: rgba(255,255,255,0.1); color: #fff; }
.seoSvc { position: relative; }
.seoSvc .seoCardNum { position: absolute; top: 24px; right: 24px; margin: 0; opacity: .45; }
/* numbered dots (security) */
.seoDot { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; font-weight: 700; margin-bottom: 16px; }
.dt-vi { background: var(--p-50); color: var(--violet); }
.dt-bl { background: var(--blue-50); color: var(--blue-600); }
.dt-te { background: var(--teal-2); color: #06695e; }
.dt-am { background: var(--amber-2); color: #8a5d0a; }
.dt-gr { background: var(--mint-50); color: var(--green-600); }
/* industry cards with photo headers */
.seoIndustry { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.seoIndShot { height: 168px; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.seoIndImg { display: block; width: 100%; height: 100%; }
.seoIndustry:hover .seoIndImg { transform: scale(1.04); }
.seoIndImg { transition: transform .6s var(--ease); }
.seoIndBody { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.seoIndTag { align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; margin-bottom: 12px; }
.tg-vi { background: var(--p-50); color: var(--violet); }
.tg-bl { background: var(--blue-50); color: var(--blue-600); }
.tg-te { background: var(--teal-2); color: #06695e; }
.tg-am { background: var(--amber-2); color: #8a5d0a; }
.tg-gr { background: var(--mint-50); color: var(--green-600); }
.seoIndustry h3 { font-size: 19px; margin-bottom: 14px; }
.seoIndustry .seoLink { margin-top: auto; }
/* dark sections */
.seoDark { background: linear-gradient(165deg, #14102b 0%, #241a48 100%); border: none; position: relative; overflow: hidden; }
.seoDark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 85% 12%, rgba(124,44,230,.32), transparent 62%); pointer-events: none; }
.seoDark > .container { position: relative; z-index: 1; }
.seoDark .section-h2 { color: #fff; }
.seoDark .section-h2 em { color: #c9b8ff; }
.seoDark .section-tag { color: #c9b8ff; }
.seoDark .section-tag::before { background: #c9b8ff; }
.seoDark .section-lead { color: rgba(255,255,255,.68); }
.seoDark .seoCard { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.seoDark .seoCard:hover { background: rgba(255,255,255,.09); border-color: rgba(201,184,255,.5); box-shadow: none; }
.seoDark .seoCard h3 { color: #fff; }
.seoDark .seoCard p, .seoDark .seoList li { color: rgba(255,255,255,.7); }
.seoDark .seoList li::before { background: #c9b8ff; }
.seoDark .seoKicker { color: #fff; }
.seoDark .seoQuick dt { color: #fff; }
.seoDark .seoQuick dd { color: rgba(255,255,255,.7); }
.seoDark .seoReview { color: rgba(255,255,255,.5); border-top-color: rgba(255,255,255,.14); }
.seoDark .seoReview strong { color: rgba(255,255,255,.8); }
/* integration stack chips */
.seoStack h3 { margin-bottom: 14px; }
.seoChips { display: flex; flex-wrap: wrap; gap: 7px; }
.seoChips span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; transition: all .2s; }
.seoStack:hover .seoChips span { border-color: var(--p-200); background: var(--p-50); color: var(--p-800); }
/* pricing cards */
.seoPrice { position: relative; padding-top: 34px; }
.seoPriceTag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
.seoPriceTag.hot { background: var(--violet); color: #fff; }
.seoPriceFeat { border: 1.5px solid var(--p-300); background: linear-gradient(180deg, #fff, var(--p-50)); box-shadow: 0 34px 80px -40px var(--purple-glow); }
.seoPriceFeat .seoPriceV { font-size: clamp(24px, 3vw, 32px); }
/* checklist */
.seoAsk { display: flex; flex-direction: column; }
.seoAskN { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; margin-bottom: 16px; }
.seoAsk:hover .seoAskN { background: var(--violet); }
/* comparison table polish */
.seoTable thead th { background: var(--ink); color: rgba(255,255,255,.75); }
.seoTable tbody tr { transition: background .2s; }
.seoTable tbody tr:hover { background: var(--surface-2); }
.seoTable tbody tr:last-child { background: var(--p-50); }
.seoTable tbody tr:last-child th { color: var(--violet); }
/* quick answer on dark */
.seoQuickSec .seoQuick { gap: 22px 40px; }
.seoQuickSec .seoQuick > div { padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (max-width: 680px) { .seoIndShot { height: 190px; } }
/* ============================================================
DEFINITION SECTION — split copy + agent flow visual
============================================================ */
.defSec { padding: 110px 0; }
.defTop { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
@media (max-width: 980px) { .defTop { grid-template-columns: 1fr; gap: 40px; } }
.defCopy .section-h2 { max-width: 18ch; }
.defLead { font-size: 18px; line-height: 1.65; color: var(--ink-2); font-weight: 500; margin-bottom: 16px; }
.defBody { font-size: 16px; line-height: 1.72; color: var(--ink-soft); margin-bottom: 22px; }
.defAsk { font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); padding: 18px 22px; background: var(--p-50); border-left: 3px solid var(--violet); border-radius: 0 12px 12px 0; }
.defAsk em { font-style: italic; }
.defAsk strong { color: var(--ink); font-weight: 800; }
/* agent-vs-chatbot visual */
.defViz { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 22px; box-shadow: 0 34px 84px -44px rgba(70,30,160,.3); }
.dvHead { margin-bottom: 14px; }
.dvKick { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.dvSplit { display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px; }
@media (max-width: 560px) { .dvSplit { grid-template-columns: 1fr; } }
.dvCol { border-radius: 16px; padding: 16px; }
.dvBot { background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; }
.dvAgent { background: linear-gradient(170deg, #16102e, #2a1d54); }
.dvTag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; background: #fff; border: 1px solid var(--line); color: var(--ink-soft); margin-bottom: 14px; }
.dvTag.hot { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.25); color: #fff; }
.dvStep { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.dvIc { width: 30px; height: 30px; border-radius: 9px; background: var(--blue-50); color: var(--blue-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dvIc svg { width: 16px; height: 16px; }
.dvDead { margin-top: auto; padding-top: 14px; font-size: 11.5px; font-weight: 700; color: var(--coral); }
.dvFlow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; counter-reset: dv; }
.dvFlow li { counter-increment: dv; position: relative; display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,.07); font-size: 12px; color: rgba(255,255,255,.85); line-height: 1.3; }
.dvFlow li::before { content: counter(dv, decimal-leading-zero); font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: #c9b8ff; flex-shrink: 0; }
.dvFlow li.esc { background: rgba(217,158,43,.18); color: #f5d089; }
.dvFlow li.esc::before { color: #f0c674; }
.dvFlow li.done { background: rgba(75,224,160,.18); color: #9ff0c6; }
.dvFlow li.done::before { color: #4be0a0; }
/* five signals */
.defSignals { margin-top: 72px; }
.dsHead { max-width: 640px; margin-bottom: 26px; }
.dsHead p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; margin-top: 10px; }
.dsGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1000px) { .dsGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dsGrid { grid-template-columns: 1fr; } }
.dsCard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.dsCard:hover { transform: translateY(-4px); border-color: var(--p-200); box-shadow: 0 24px 54px -32px var(--purple-glow); }
.dsN { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--violet); margin-bottom: 12px; }
.dsCard p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.dsCard p strong { color: var(--ink); font-weight: 700; }
.defCompare { margin-top: 72px; max-width: 900px; }
/* ============================================================
WHY DUBAI — photo band + stat tiles + timeline
============================================================ */
.dubSec { position: relative; padding: 110px 0; overflow: hidden; background: #0d0a20; isolation: isolate; }
@media (max-width: 860px) { .dubSec { padding: 76px 0; } .defSec { padding: 76px 0; } }
.dubBg { position: absolute; inset: 0; z-index: 0; }
.dubPhoto { display: block; width: 100%; height: 100%; }
.dubScrim { position: absolute; inset: 0; background:
linear-gradient(180deg, rgba(13,10,32,.9) 0%, rgba(13,10,32,.82) 45%, rgba(13,10,32,.95) 100%),
radial-gradient(ellipse 60% 55% at 82% 8%, rgba(124,44,230,.42), transparent 62%); }
.dubInner { position: relative; z-index: 1; }
.dubHead { max-width: 760px; margin-bottom: 44px; }
.dubSec .section-tag { color: #c9b8ff; }
.dubSec .section-tag::before { background: #c9b8ff; }
.dubSec .section-h2 { color: #fff; max-width: 22ch; }
.dubLead { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.7); max-width: 56ch; }
.dubStats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 44px; }
@media (max-width: 900px) { .dubStats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dubStats { grid-template-columns: 1fr; } }
.dubStat { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 24px 22px; transition: background .3s, border-color .3s, transform .3s var(--ease); }
.dubStat:hover { background: rgba(255,255,255,.11); border-color: rgba(201,184,255,.45); transform: translateY(-4px); }
.dubStat .dsV { font-family: var(--sans); font-weight: 800; font-size: clamp(32px, 4vw, 46px); letter-spacing: -.04em; line-height: .95; color: #fff; white-space: nowrap; }
.dubStat .dsV span { color: #c9b8ff; font-size: .55em; }
.dubStat .dsL { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.62); margin-top: 10px; }
.dubGrid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 940px) { .dubGrid { grid-template-columns: 1fr; gap: 32px; } }
.dubTimeline { list-style: none; margin: 0; padding: 0; position: relative; }
.dubTimeline::before { content: ''; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, #c9b8ff, rgba(201,184,255,.15)); }
.dubTimeline li { position: relative; padding: 0 0 26px 34px; }
.dubTimeline li:last-child { padding-bottom: 0; }
.dubTimeline li::before { content: ''; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #0d0a20; border: 2px solid #c9b8ff; }
.dtDate { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c9b8ff; margin-bottom: 7px; }
.dubTimeline p { font-size: 15px; line-height: 1.62; color: rgba(255,255,255,.72); }
.dubTimeline p strong { color: #fff; font-weight: 700; }
.dubTake { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 30px 28px; }
.dubTake h3 { font-family: var(--sans); font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: #fff; margin-bottom: 14px; }
.dubTake p { font-size: 14.5px; line-height: 1.62; color: rgba(255,255,255,.7); margin-bottom: 14px; }
.dubTake .btn { margin-top: 6px; }
.dubSources { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; color: rgba(255,255,255,.5); }
.dubSources strong { color: rgba(255,255,255,.75); }
.dubSources a { color: #c9b8ff; }
/* ============ Definition visual: real photo + live agent overlay ============ */
.defViz { padding: 0; overflow: hidden; position: relative; }
.dvPhoto { position: relative; height: 210px; overflow: hidden; }
.dvPhotoImg { display: block; width: 100%; height: 100%; }
.dvPhotoScrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,10,32,.35) 0%, rgba(13,10,32,.62) 60%, rgba(13,10,32,.92) 100%); }
.dvBadge { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); padding: 6px 13px; border-radius: 100px; }
.dvLd { width: 7px; height: 7px; border-radius: 50%; background: #4be0a0; box-shadow: 0 0 0 3px rgba(75,224,160,.28); animation: pulse 2s ease-in-out infinite; }
.dvOverlay { margin-top: -46px; position: relative; z-index: 2; padding: 0 20px 22px; }
.dvMail { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: 0 18px 40px -22px rgba(12,10,31,.45); margin-bottom: 14px; }
.dvMailTop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dvMailFrom { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }
.dvMailTag { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--blue-600); background: var(--blue-50); padding: 4px 10px; border-radius: 100px; }
.dvMail p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); font-style: italic; }
.defViz .dvFlow { background: linear-gradient(170deg, #16102e, #2a1d54); border-radius: 16px; padding: 14px; gap: 5px; }
.defViz .dvFlow li { opacity: .32; transform: translateX(-6px); transition: opacity .45s var(--ease), transform .45s var(--ease), background .45s; }
.defViz .dvFlow li.on { opacity: 1; transform: translateX(0); }
.dvVs { margin-top: 12px; text-align: center; }
.dvVsBot { font-size: 12.5px; color: var(--ink-mute); font-style: italic; }
@media (max-width: 560px) { .dvPhoto { height: 168px; } }
/* ============ Five signals: dark gradient band ============ */
.sigDark { position: relative; margin-top: 80px; padding: 56px 40px 52px; border-radius: 28px; overflow: hidden; background: linear-gradient(160deg, #14102b 0%, #2a1d54 55%, #16102e 100%); }
@media (max-width: 640px) { .sigDark { padding: 38px 22px 34px; border-radius: 20px; } }
.sigDark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 88% 6%, rgba(124,44,230,.45), transparent 60%), radial-gradient(ellipse 45% 55% at 6% 96%, rgba(75,224,160,.14), transparent 62%); pointer-events: none; }
.sigDark::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000, transparent 75%); pointer-events: none; }
.sigDark > * { position: relative; z-index: 1; }
.sigDark .seoH3 { color: #fff; }
.sigDark .dsHead p { color: rgba(255,255,255,.68); }
.sigDark .dsCard { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); position: relative; overflow: hidden; }
.sigDark .dsCard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.13) 50%, transparent 60%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.sigDark .dsCard:hover { background: rgba(255,255,255,.1); border-color: rgba(201,184,255,.55); transform: translateY(-6px); box-shadow: 0 26px 60px -28px rgba(124,44,230,.5); }
.sigDark .dsCard:hover::after { transform: translateX(120%); }
.sigDark .dsN { color: #c9b8ff; }
.sigDark .dsCard p { color: rgba(255,255,255,.74); }
.sigDark .dsCard p strong { color: #fff; }
.dsIc { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(201,184,255,.14); color: #c9b8ff; margin: 0 0 14px; transition: background .3s, color .3s, transform .3s var(--ease); }
.dsIc svg { width: 20px; height: 20px; }
.sigDark .dsCard:hover .dsIc { background: #c9b8ff; color: #2a1d54; transform: scale(1.08) rotate(-5deg); }
.sigDark .dsCard { display: flex; flex-direction: column; }
.sigDark .dsN { order: -1; }
/* ============ Definition visual v2: live agent console ============ */
.dvClock { position: absolute; top: 16px; right: 16px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: #fff; background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.22); padding: 5px 11px; border-radius: 8px; letter-spacing: .04em; }
.dvConsole { margin-top: -34px; position: relative; z-index: 2; padding: 0 18px 20px; display: flex; flex-direction: column; gap: 12px; }
/* inbound request */
.dvIn { display: flex; gap: 11px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; box-shadow: 0 18px 42px -22px rgba(12,10,31,.5); }
.dvInIc { width: 32px; height: 32px; border-radius: 10px; background: #e8f9ee; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dvInIc svg { width: 18px; height: 18px; }
.dvInBody { min-width: 0; }
.dvInTop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.dvInTop b { font-size: 13px; color: var(--ink); font-weight: 800; }
.dvInTop span { font-family: var(--mono); font-size: 10.5px; color: var(--ink-mute); }
.dvIn p { font-size: 13px; line-height: 1.45; color: var(--ink-soft); font-style: italic; }
/* pipeline */
.dvPipe { position: relative; padding: 16px 6px 4px; }
.dvPipeLine { position: absolute; left: 30px; right: 30px; top: 34px; height: 3px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.dvPipeLine i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--p-400), var(--violet)); transition: width .55s var(--ease); }
.dvNodes { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.dvNode { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.dvNIc { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid var(--line-strong); color: var(--ink-mute); display: flex; align-items: center; justify-content: center; transition: all .4s var(--ease); }
.dvNIc svg { width: 17px; height: 17px; }
.dvNode em { font-size: 10.5px; font-weight: 700; font-style: normal; letter-spacing: .03em; color: var(--ink-mute); transition: color .35s; }
.dvNode.on .dvNIc { background: var(--violet); border-color: var(--violet); color: #fff; transform: scale(1.12); box-shadow: 0 8px 20px -6px var(--purple-glow); }
.dvNode.on em { color: var(--ink); }
.dvNode[data-n="4"].on .dvNIc { background: #d99e2b; border-color: #d99e2b; box-shadow: 0 8px 20px -6px rgba(217,158,43,.55); }
.dvNode[data-n="5"].on .dvNIc { background: var(--green-600); border-color: var(--green-600); box-shadow: 0 8px 20px -6px rgba(18,146,78,.5); }
/* tool log */
.dvLog { background: linear-gradient(170deg, #16102e, #2a1d54); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 5px; }
.dvLogRow { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,.06); opacity: 0; transform: translateX(-8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.dvLogRow.on { opacity: 1; transform: translateX(0); }
.dvSys { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; flex-shrink: 0; }
.sysWa { background: rgba(37,211,102,.18); color: #6ce8a0; }
.sysErp { background: rgba(58,114,224,.22); color: #9dc0ff; }
.sysRate { background: rgba(201,184,255,.2); color: #c9b8ff; }
.sysHold { background: rgba(217,158,43,.22); color: #f0c674; }
.sysCrm { background: rgba(75,224,160,.2); color: #9ff0c6; }
.dvAct { font-size: 11.5px; color: rgba(255,255,255,.8); line-height: 1.3; }
.dvLogRow.warn .dvAct { color: #f5d089; }
.dvLogRow.ok .dvAct { color: #9ff0c6; }
/* output quote */
.dvQuote { background: linear-gradient(160deg, #fff, var(--p-50)); border: 1.5px solid var(--p-200); border-radius: 16px; padding: 15px 17px; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.dvQuote.on { opacity: 1; transform: translateY(0) scale(1); }
.dvQTop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dvQTag { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); }
.dvQOk { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--green-600); padding: 4px 10px; border-radius: 100px; }
.dvQAmt { font-family: var(--sans); font-weight: 800; font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.035em; color: var(--ink); line-height: 1; }
.dvQAmt span { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: var(--ink-mute); margin-top: 6px; }
.dvQMeta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--p-200); }
.dvQMeta span { font-size: 11.5px; color: var(--ink-soft); }
.dvQMeta b { color: var(--violet); font-weight: 800; }
@media (max-width: 560px) { .dvNode em { font-size: 9px; } .dvNIc { width: 30px; height: 30px; } .dvPipeLine { left: 24px; right: 24px; top: 31px; } }
/* ============ Client logo wall — real brand assets ============ */
.hc-wall { align-items: stretch; }
.hc-card.logoTile { flex: 1 1 0; min-width: 0; height: 74px; padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 16px -10px rgba(70,30,160,.14); transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s; }
.hc-card.logoTile:hover { transform: translateY(-5px); border-color: var(--p-200); box-shadow: 0 20px 42px -18px rgba(70,30,160,.28); }
.hcImg { max-width: 78%; max-height: 46px; width: auto; height: auto; object-fit: contain; display: block; filter: saturate(.96); transition: filter .3s, transform .32s var(--ease); }
.hc-card.logoTile:hover .hcImg { filter: saturate(1.06); transform: scale(1.04); }
/* full-bleed brand tile (artwork carries its own background) */
.hcImgBleed { max-width: none; max-height: none; width: 100%; height: 100%; object-fit: cover; }
/* square marks need a tighter cap so they don't dwarf wordmarks */
.hcImgSq { max-height: 52px; max-width: 52px; }
@media (max-width: 900px) {
.hc-card.logoTile { flex: 0 0 auto; min-width: 148px; height: 66px; }
.hcImg { max-height: 40px; }
.hcImgSq { max-height: 46px; max-width: 46px; }
}
/* ============ Comparison ladder (replaces table) ============ */
.defCompare { max-width: 940px; }
.cmpHead { margin-bottom: 26px; }
.cmpH { font-family: var(--sans); font-weight: 800; font-size: clamp(24px,3vw,34px); letter-spacing: -.032em; color: var(--ink); line-height: 1.12; margin: 10px 0 10px; }
.cmpSub { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; }
.cmpLadder { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.cmpRow { display: grid; grid-template-columns: 92px 1fr; gap: 20px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; transition: transform .32s var(--ease), border-color .32s, box-shadow .32s, background .32s; }
.cmpRow:hover { transform: translateX(6px); border-color: var(--p-200); box-shadow: 0 20px 46px -26px var(--purple-glow); }
.cmpRail { position: relative; display: flex; align-items: center; gap: 8px; }
.cmpDot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; transition: background .32s, box-shadow .32s; }
.cmpBar { flex: 1; height: 5px; border-radius: 4px; background: var(--surface-3); position: relative; overflow: hidden; }
.cmpBar::after { content: ''; position: absolute; inset: 0; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, var(--p-300), var(--violet)); transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease) .15s; }
.cmpRow.in .cmpBar::after { transform: scaleX(1); }
.cmpTop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.cmpMain h4 { font-family: var(--sans); font-weight: 800; font-size: 19px; letter-spacing: -.025em; color: var(--ink); }
.cmpAuto { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 4px 11px; border-radius: 100px; }
.cmpAuto.lvl1, .cmpAuto.lvl2 { background: var(--surface-3); color: var(--ink-mute); }
.cmpAuto.lvl3 { background: var(--blue-50); color: var(--blue-600); }
.cmpAuto.lvl4 { background: var(--amber-2); color: #8a5d0a; }
.cmpAuto.lvl5 { background: var(--violet); color: #fff; }
.cmpWhat { font-size: 15px; font-weight: 600; color: var(--ink-2); line-height: 1.5; margin-bottom: 5px; }
.cmpEg { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.cmpEg span { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); margin-right: 6px; }
.cmpRow.cmpWin { background: linear-gradient(120deg, #fff 0%, var(--p-50) 100%); border: 1.5px solid var(--p-300); box-shadow: 0 26px 60px -34px var(--purple-glow); }
.cmpRow.cmpWin .cmpDot { background: var(--violet); box-shadow: 0 0 0 4px rgba(124,44,230,.18); }
.cmpRow.cmpWin h4 { color: var(--p-800); }
@media (max-width: 640px) {
.cmpRow { grid-template-columns: 1fr; gap: 12px; padding: 16px 18px; }
.cmpRail { order: 2; }
}
/* ============ Services bento ============ */
.svcBento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; grid-auto-flow: dense; }
@media (max-width: 1040px) { .svcBento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .svcBento { grid-template-columns: 1fr; } }
.svcCard { grid-column: span 3; /* default, overridden per-child below */ position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 14px; transition: transform .34s var(--ease), border-color .34s, box-shadow .34s; }
.svcCard.wide { grid-column: span 3; }
@media (max-width: 1040px) { .svcCard, .svcCard.wide { grid-column: span 1; } }
@media (max-width: 700px) { .svcCard, .svcCard.wide { grid-column: span 1; } }
.svcCard:hover { transform: translateY(-6px); border-color: var(--p-200); box-shadow: 0 30px 68px -32px var(--purple-glow); }
.svcNum { font-family: var(--sans); font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); transition: -webkit-text-stroke-color .34s, color .34s; }
.svcCard:hover .svcNum { -webkit-text-stroke-color: var(--p-300); }
.svcBody { position: relative; z-index: 1; }
.svcKick { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; margin-bottom: 11px; }
.k-vi { background: var(--p-50); color: var(--violet); }
.k-bl { background: var(--blue-50); color: var(--blue-600); }
.k-te { background: var(--teal-2); color: #06695e; }
.k-am { background: var(--amber-2); color: #8a5d0a; }
.k-gr { background: var(--mint-50); color: var(--green-600); }
.svcCard h3 { font-family: var(--sans); font-weight: 800; font-size: 18px; letter-spacing: -.025em; color: var(--ink); line-height: 1.25; margin-bottom: 10px; }
.svcCard p { font-size: 14px; line-height: 1.62; color: var(--ink-soft); }
.svcCard p strong { color: var(--ink); font-weight: 700; }
.svcGlow { position: absolute; width: 190px; height: 190px; border-radius: 50%; filter: blur(58px); top: -70px; right: -60px; opacity: 0; transition: opacity .4s; pointer-events: none; }
.svcCard:hover .svcGlow { opacity: .5; }
.g-vi { background: #c9b8ff; } .g-bl { background: #b1cdff; } .g-te { background: #9fe3d8; } .g-am { background: #f2d99a; } .g-gr { background: #a8e9c6; }
/* --- Services bento: explicit tiling so every desktop row sums to 6 --- */
@media (min-width: 1041px) {
.svcBento > .svcCard:nth-child(1) { grid-column: span 4; }
.svcBento > .svcCard:nth-child(2) { grid-column: span 2; }
.svcBento > .svcCard:nth-child(3) { grid-column: span 2; }
.svcBento > .svcCard:nth-child(4) { grid-column: span 4; }
.svcBento > .svcCard:nth-child(5) { grid-column: span 3; }
.svcBento > .svcCard:nth-child(6) { grid-column: span 3; }
.svcBento > .svcCard:nth-child(7) { grid-column: span 3; }
.svcBento > .svcCard:nth-child(8) { grid-column: span 3; }
}
/* narrower: clean 2-up, then 1-up — no orphan holes */
@media (max-width: 1040px) {
.svcBento { grid-template-columns: repeat(2, 1fr); }
.svcBento > .svcCard, .svcBento > .svcCard.wide { grid-column: span 1 !important; }
}
@media (max-width: 700px) {
.svcBento { grid-template-columns: 1fr; }
.svcBento > .svcCard, .svcBento > .svcCard.wide { grid-column: span 1 !important; }
}
/* wide cards get a roomier reading measure */
@media (min-width: 1041px) {
.svcBento > .svcCard:nth-child(1) p, .svcBento > .svcCard:nth-child(4) p { max-width: 62ch; }
}
/* ============ Client logo row — borderless, equal optical weight ============ */
.hero-clients { margin-top: 44px; padding-top: 0; border-top: none; }
.hcTop { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.hcLine { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.hcLabel { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.hcRow { display: flex; align-items: center; justify-content: space-between; gap: clamp(14px, 3vw, 34px); }
.hcItem { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 4px 0; }
.hcItem img {
width: auto; height: auto; display: block;
/* assets are tight-cropped; caps below equalise INK AREA, not bounding box —
square/badge marks need more height than wide wordmarks to read equally */
opacity: .82;
transition: opacity .38s var(--ease), transform .38s var(--ease);
}
.hcItem:hover img { opacity: 1; transform: scale(1.05); }
.hcRow { min-height: 84px; }
/* wide wordmarks (ratio ~3.3) */
.wWord img { max-width: 148px; max-height: 46px; }
/* vodafone lockup (ratio ~1.46) */
.wVoda img { max-width: 100px; max-height: 68px; }
/* square badge (ratio 1.0) */
.wSquare img { max-width: 78px; max-height: 78px; }
.hcSep { width: 1px; height: 30px; background: var(--line); flex: 0 0 auto; }
@media (max-width: 760px) {
.hcRow { flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.hcRow .hcItem { flex: 0 0 40%; }
.hcItem img { max-width: 132px; filter: none; }
.hcSep { display: none; }
.hcTop .hcLine { display: none; }
.hcTop { justify-content: center; }
}
@media (max-width: 760px) {
.hcRow { min-height: 0; }
.wWord img { max-width: 120px; max-height: 38px; }
.wVoda img { max-width: 82px; max-height: 56px; }
.wSquare img { max-width: 62px; max-height: 62px; }
.hcItem img { opacity: .88; }
}
/* equal-height items so all marks share one optical centreline */
.hcRow { align-items: stretch; }
.hcItem { align-self: stretch; min-height: 84px; }
.hcSep { align-self: center; }
@media (max-width: 760px) { .hcItem { min-height: 64px; } }
/* ============ Services: compact expandable list (2-up) ============ */
.svcList { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 820px) { .svcList { grid-template-columns: 1fr; } }
.svcRow { background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: border-color .28s, box-shadow .28s, background .28s; align-self: start; }
.svcRow:hover { border-color: var(--p-200); }
.svcRow[open] { border-color: var(--p-300); box-shadow: 0 18px 44px -28px var(--purple-glow); background: linear-gradient(180deg,#fff,var(--p-50)); }
.svcRow summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px 1fr 20px; gap: 13px; align-items: center; padding: 16px 18px; }
.svcRow summary::-webkit-details-marker { display: none; }
.svcRowN { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11.5px; font-weight: 700; }
.n-vi { background: var(--p-50); color: var(--violet); } .n-bl { background: var(--blue-50); color: var(--blue-600); }
.n-te { background: var(--teal-2); color: #06695e; } .n-am { background: var(--amber-2); color: #8a5d0a; } .n-gr { background: var(--mint-50); color: var(--green-600); }
.svcRowTxt { min-width: 0; }
.svcRowTxt strong { display: block; font-family: var(--sans); font-weight: 800; font-size: 15px; letter-spacing: -.022em; color: var(--ink); line-height: 1.28; }
.svcRowTxt em { display: block; font-style: normal; font-size: 13px; color: var(--ink-soft); margin-top: 3px; line-height: 1.45; }
.svcRowChev { color: var(--ink-mute); display: flex; transition: transform .3s var(--ease), color .3s; }
.svcRowChev svg { width: 16px; height: 16px; }
.svcRow[open] .svcRowChev { transform: rotate(180deg); color: var(--violet); }
.svcRow > p { margin: 0; padding: 0 18px 18px 65px; font-size: 13.5px; line-height: 1.62; color: var(--ink-soft); }
.svcRow > p strong { color: var(--ink); font-weight: 700; }
@media (max-width: 560px) { .svcRow > p { padding-left: 18px; } }
/* ============ Why Dubai: compact dated notes (replaces timeline) ============ */
.dubNotes { display: flex; flex-direction: column; gap: 12px; }
.dubNotes p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.72); padding-left: 0; }
.dubNotes p strong { color: #fff; font-weight: 700; }
.dnD { display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #c9b8ff; background: rgba(201,184,255,.14); padding: 3px 9px; border-radius: 6px; margin-right: 9px; white-space: nowrap; }
/* ============ Departments: compact rows (replaces 5 icon cards) ============ */
.deptList { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 820px) { .deptList { grid-template-columns: 1fr; } }
.deptRow { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); border-radius: 14px; padding: 16px 18px; transition: background .28s, border-color .28s; }
.deptRow:hover { background: rgba(255,255,255,.1); border-color: rgba(201,184,255,.45); }
.deptRow h3 { font-family: var(--sans); font-weight: 800; font-size: 14.5px; letter-spacing: -.02em; color: #fff; margin-bottom: 6px; }
.deptRow p { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.6); }
/* ===== Banner audit fixes ===== */
/* hero visual must not sprawl once the grid collapses to one column */
@media (max-width: 1000px) {
.hero-visual { max-width: 520px; margin: 0 auto; aspect-ratio: 1 / 1.02; }
}
@media (max-width: 560px) {
.hero-visual { max-width: 100%; aspect-ratio: 1 / 1.14; }
}
/* keep the console readable at every width */
.defViz, .hero-visual { min-width: 0; }
/* ===== Hero visual: contained static stack once the grid collapses ===== */
@media (max-width: 1000px) {
.hero-visual { max-width: 460px; margin: 8px auto 0; aspect-ratio: auto; height: auto; display: block; overflow: visible; }
.hero-visual .hv2-flow, .hero-visual .hv2-mesh { display: none; }
.hero-visual .hv2-hub { position: static; transform: none; margin: 0 auto 16px; width: 104px; height: 104px; }
.hero-visual .hv2-src,
.hero-visual .hv2-result {
position: static; top: auto; left: auto; right: auto; bottom: auto;
margin: 0 0 8px; max-width: 100%; animation: none;
}
.hero-visual .hv2-result { margin-top: 4px; }
.hero-visual .hv2-src .s, .hero-visual .hv2-src .sb { display: block; }
}
@media (max-width: 1000px) {
/* centre the stacked hero visual and stop the hub rings drawing an oversized oval */
.hero-grid > .hero-visual { width: 100%; max-width: 360px; margin-inline: auto; }
.hero-visual .hub-rings, .hero-visual .hv2-hub::before, .hero-visual .hv2-hub::after { display: none; }
.hero-visual .hv2-src, .hero-visual .hv2-result { width: 100%; }
}
/* client logos: brand colour at every breakpoint (no greyscale/alpha filter) */
.hcItem img, .hcItem:hover img { filter: none !important; }
@media (max-width: 760px) { .hcItem img { opacity: .9; } }
/* WCAG AA: darken mid-tone brand text on light tinted backgrounds */
.sol-tag.teal, .seoIndTag.teal { color: #076b60; }
.sol-tag.green, .seoIndTag.green, .work .section-tag { color: #0f7d43; }
.work .section-tag::before { background: #0f7d43; }
.sol-tag.amber, .seoIndTag.amber { color: #8a5f10; }
.pc-chip, .c2s-chk.ok, .clm { color: #076b60; }
.pipe-badge, .pg-badge, .pu-ok, .sup-ok, .pr-up, .rep-up, .dxr-ok,
.pg-tag.green, .pi-st.green, .fc-badge.green, .im-v.green, .tc-fig.teal { color: #0f7d43; }
.pu-flag, .dxr-flag, .sol-kpi strong, .chp.amber, .pi-st.amber { color: #8a5f10; }
.case2-mess .lbl, .fc-big, .lc-ann.crash, .ba.before .ba-v { color: #b8402f; }
.c2s-chk.flag { color: #1f57b5; }
/* new Vodafone lockup is a wide wordmark (4.06:1) — match the other wordmarks */
.hcItem.wVoda img { max-width: 152px; max-height: 44px; }
@media (max-width: 760px) { .hcItem.wVoda img { max-width: 132px; } }
/* ============================================================
Agent trace — enterprise-grade explainer visual
============================================================ */
.agentTrace {
margin: 0;
border-radius: 20px;
background: linear-gradient(168deg, #12101f 0%, #191631 52%, #120f22 100%);
border: 1px solid rgba(255,255,255,0.09);
box-shadow: 0 40px 90px -46px rgba(12,10,31,0.62), inset 0 1px 0 rgba(255,255,255,0.06);
overflow: hidden;
position: relative;
}
.agentTrace::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(120% 80% at 88% -12%, rgba(124,44,230,0.22), transparent 62%);
}
/* header */
.atHead {
position: relative; display: flex; align-items: center; gap: 14px;
padding: 18px 24px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.atTitle {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(255,255,255,0.92);
}
.atCase { font-size: 11.5px; color: rgba(255,255,255,0.5); letter-spacing: 0.01em; }
.atState {
margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
font-size: 11px; font-weight: 600; color: #7fe3b0; white-space: nowrap;
}
.atState i { width: 6px; height: 6px; border-radius: 50%; background: #4be0a0; box-shadow: 0 0 0 3px rgba(75,224,160,0.16); }
.atBody { position: relative; padding: 24px; }
/* objective */
.atReq {
border-left: 2px solid rgba(124,44,230,0.55);
padding: 2px 0 2px 16px; margin-bottom: 26px;
}
.atReqK {
display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase; color: rgba(255,255,255,0.42); margin-bottom: 7px;
}
.atReqV {
margin: 0 0 8px; font-size: 16.5px; font-weight: 500; line-height: 1.42;
letter-spacing: -0.015em; color: #fff;
}
.atReqSrc { font-size: 11.5px; color: rgba(255,255,255,0.45); }
/* steps */
.atSteps { list-style: none; margin: 0; padding: 0; position: relative; }
.atSteps::before {
content: ''; position: absolute; left: 5px; top: 12px; bottom: 12px;
width: 1px; background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05));
}
.atStep {
position: relative; display: grid; grid-template-columns: 12px 1fr auto;
align-items: baseline; gap: 16px; padding: 11px 0;
opacity: 0; transform: translateY(6px);
transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.agentTrace.inview .atStep { opacity: 1; transform: none; }
.agentTrace.inview .atStep[data-n="1"] { transition-delay: 0.10s; }
.agentTrace.inview .atStep[data-n="2"] { transition-delay: 0.32s; }
.agentTrace.inview .atStep[data-n="3"] { transition-delay: 0.54s; }
.agentTrace.inview .atStep[data-n="4"] { transition-delay: 0.76s; }
.agentTrace.inview .atStep[data-n="5"] { transition-delay: 0.98s; }
.atDot {
width: 11px; height: 11px; border-radius: 50%; margin-top: 4px;
background: #191631; border: 1.5px solid rgba(255,255,255,0.34);
position: relative; z-index: 2;
}
.atStep.atHold .atDot { border-color: #f0c674; background: #f0c674; box-shadow: 0 0 0 4px rgba(240,198,116,0.14); }
.atStep.atDone .atDot { border-color: #4be0a0; background: #4be0a0; box-shadow: 0 0 0 4px rgba(75,224,160,0.14); }
.atStepBody { min-width: 0; }
.atAct {
display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.012em;
color: rgba(255,255,255,0.95); margin-bottom: 3px;
}
.atStep.atHold .atAct { color: #ffd98a; }
.atStep.atDone .atAct { color: #8ef0b0; }
.atDetail { display: block; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.52); }
.atSys {
font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: rgba(255,255,255,0.44); white-space: nowrap;
border: 1px solid rgba(255,255,255,0.14); border-radius: 100px; padding: 4px 10px;
}
.atStep.atHold .atSys { color: #f0c674; border-color: rgba(240,198,116,0.34); }
.atStep.atDone .atSys { color: #4be0a0; border-color: rgba(75,224,160,0.34); }
/* footer metrics */
.atFoot {
position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
border-top: 1px solid rgba(255,255,255,0.08);
}
.atMetric { padding: 18px 24px; border-right: 1px solid rgba(255,255,255,0.08); }
.atMetric:last-child { border-right: none; }
.atMetric b {
display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.03em; color: #fff;
}
.atMetric span { display: block; font-size: 11.5px; color: rgba(255,255,255,0.5); margin-top: 3px; }
.atNote {
position: relative; margin: 0; padding: 15px 24px 18px;
border-top: 1px solid rgba(255,255,255,0.08);
font-size: 12.5px; font-style: italic; color: rgba(255,255,255,0.5);
}
@media (max-width: 620px) {
.atHead { flex-wrap: wrap; gap: 8px 12px; padding: 16px 18px; }
.atState { margin-left: 0; }
.atBody { padding: 20px 18px; }
.atReqV { font-size: 15px; }
.atStep { grid-template-columns: 12px 1fr; gap: 12px; }
.atSys { grid-column: 2; justify-self: start; margin-top: 6px; }
.atFoot { grid-template-columns: 1fr; }
.atMetric { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 14px 18px; }
.atMetric:last-child { border-bottom: none; }
.atNote { padding: 14px 18px 16px; }
}
/* real client portraits in the hero proof row */
.avatars .avImg {
width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
border: 2px solid #fff; margin-left: -10px; display: block;
box-shadow: 0 2px 8px -2px rgba(12,10,31,0.3);
}
.avatars .avImg:first-child { margin-left: 0; }
.avatars .av-5 {
width: 34px; height: 34px; margin-left: -10px;
font-size: 10.5px; font-weight: 700; letter-spacing: -0.02em;
background: var(--ink); color: #fff; border: 2px solid #fff;
}
/* ============================================================
HERO VISUAL v2 — premium dark agent panel
============================================================ */
.hero-visual { position: relative; aspect-ratio: auto; display: block; }
.hvPanel {
position: relative; overflow: hidden; isolation: isolate;
border-radius: 24px; padding: 18px 18px 16px;
background: linear-gradient(160deg, #150e33 0%, #0d0822 55%, #090616 100%);
border: 1px solid rgba(255,255,255,0.10);
box-shadow: 0 40px 90px -46px rgba(30,10,80,0.75), inset 0 1px 0 rgba(255,255,255,0.10);
}
.hvGlow { position: absolute; inset: -30% -20% auto -20%; height: 78%; pointer-events: none;
background: radial-gradient(ellipse at 76% 22%, rgba(150,100,255,0.42), transparent 62%); }
.hvArc { position: absolute; left: 50%; bottom: -46%; width: 132%; aspect-ratio: 1; transform: translateX(-50%);
border-radius: 50%; pointer-events: none;
background: radial-gradient(circle at 50% 0%, rgba(180,140,255,0.16), transparent 58%);
border-top: 1px solid rgba(190,150,255,0.30); }
.hvTop { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hvState { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700;
letter-spacing: 0.07em; text-transform: uppercase; color: #d9cbff;
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
padding: 6px 13px; border-radius: 100px; }
.hvDot { width: 7px; height: 7px; border-radius: 50%; background: #5fe0a2;
box-shadow: 0 0 0 3px rgba(95,224,162,0.22); animation: pulse 2s ease-in-out infinite; }
.hvClock { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; }
.hvStage { position: relative; border-radius: 16px; overflow: hidden; }
.hvShot { display: block; width: 100%; aspect-ratio: 10 / 7; border-radius: 14px; }
.hvFlow { position: relative; display: flex; gap: 8px; margin-top: 14px; }
.hvStep { flex: 1; text-align: center; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.62);
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px; padding: 9px 6px; line-height: 1.25; }
.hvStep.on { color: #fff; border-color: rgba(190,150,255,0.42); background: rgba(150,100,255,0.16); }
.hvCertify { position: relative; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); }
.hvCertLabel { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.44); }
.hvCertMarks { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hvMark { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.9); }
.hvMark svg { width: 17px; height: 17px; }
.hvSep { width: 1px; height: 16px; background: rgba(255,255,255,0.18); }
@media (max-width: 1000px) {
.hero-grid > .hero-visual { max-width: 520px; }
.hvShot { aspect-ratio: 10 / 6.4; }
}
@media (max-width: 560px) {
.hvPanel { padding: 14px; border-radius: 20px; }
.hvStep { font-size: 10.5px; padding: 8px 4px; }
.hvCertify { gap: 10px; }
.hvMark { font-size: 12px; }
}
/* image-slot ignores aspect-ratio in some layouts — pin explicit heights */
.hvShot { aspect-ratio: auto; height: 300px; }
@media (max-width: 1000px) { .hvShot { height: 280px; } }
@media (max-width: 560px) { .hvShot { height: 220px; } }
/* ---- Definition section visual: Dubai skyline ---- */
.dubaiViz { margin: 0; }
.dvFrame {
position: relative; overflow: hidden; border-radius: 22px;
background: #0b1020;
box-shadow: 0 30px 70px -34px rgba(20,16,48,.45), 0 2px 0 rgba(255,255,255,.6) inset;
border: 1px solid rgba(20,16,48,.08);
}
.dvFrame img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 13; }
@media (min-width: 1001px) { .dvFrame img { aspect-ratio: 4 / 3.4; } }
.dvGlow {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(120% 70% at 50% 0%, rgba(124,77,238,.16), transparent 62%),
linear-gradient(to top, rgba(8,10,24,.92) 0%, rgba(8,10,24,.62) 26%, rgba(8,10,24,0) 56%);
}
.dvChip {
position: absolute; top: 16px; left: 16px; z-index: 2;
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 13px; border-radius: 999px;
background: rgba(12,14,32,.5); border: 1px solid rgba(255,255,255,.22);
font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: #fff;
}
.dvChip i { width: 6px; height: 6px; border-radius: 50%; background: #4be0a0; box-shadow: 0 0 0 3px rgba(75,224,160,.22); }
.dvCap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 24px 24px; display: grid; gap: 7px; }
.dvCapT { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1.2; }
.dvCapS { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.76); max-width: 46ch; }
@media (max-width: 560px) {
.dvCap { padding: 18px 18px 20px; }
.dvCapT { font-size: 15.5px; }
.dvCapS { font-size: 12.5px; }
}
/* ============================================================
HERO — dark astronaut banner (final)
============================================================ */
.hero.heroDark {
position: relative;
background: radial-gradient(120% 90% at 78% 12%, #241a48 0%, #150f2e 42%, #0b0818 100%);
color: #fff;
overflow: hidden;
padding: 64px 0 72px;
isolation: isolate;
}
.hero.heroDark::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
background-size: 30px 30px;
mask-image: radial-gradient(ellipse 70% 70% at 30% 40%, #000, transparent 72%);
-webkit-mask-image: radial-gradient(ellipse 70% 70% at 30% 40%, #000, transparent 72%);
}
.heroBgGlow { position: absolute; z-index: 0; width: 720px; height: 720px; right: -140px; top: -220px;
background: radial-gradient(circle, rgba(124,44,230,.42), transparent 66%); filter: blur(28px); pointer-events: none; }
.hero.heroDark .container { position: relative; z-index: 2; }
.hero.heroDark .hero-grid { grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr); gap: 40px; align-items: center; }
.heroEyebrow { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.82); box-shadow: none; }
.heroEyebrow .chip { background: #fff; color: #1a1033; }
.h1.heroH1 {
font-size: clamp(40px, 5.1vw, 68px);
line-height: 1.02; letter-spacing: -0.035em; font-weight: 800;
color: #fff; max-width: 18ch; margin-bottom: 20px;
}
.h1.heroH1 em {
font-style: normal;
background: linear-gradient(100deg, #c9b3ff 0%, #7c2ce6 52%, #c9b3ff 100%);
background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
color: transparent; animation: shine 8s linear infinite;
}
.h1-sub.heroSub { color: rgba(255,255,255,.72); font-size: 17px; max-width: 50ch; margin-bottom: 30px; }
.heroActions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn.heroCta {
background: linear-gradient(180deg, #7c2ce6, #6a24e0); color: #fff;
padding: 15px 26px; font-weight: 700; font-size: 15px; border-radius: 12px;
box-shadow: 0 14px 34px -12px rgba(124,44,230,.7), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn.heroCta:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -12px rgba(124,44,230,.8), inset 0 1px 0 rgba(255,255,255,.34); }
.heroProof { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 10px;
border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(255,255,255,.06); }
.heroFaces { display: inline-flex; }
.heroFaces img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
border: 2px solid rgba(20,14,40,.9); margin-left: -10px; background: #241a48; }
.heroFaces img:first-child { margin-left: 0; }
.heroProofText { font-size: 12.5px; line-height: 1.3; color: rgba(255,255,255,.7); display: flex; flex-direction: column; }
.heroProofText strong { color: #fff; font-weight: 700; font-size: 13px; }
.heroBuilt { display: flex; align-items: center; gap: 18px; margin-top: 34px; padding-top: 26px;
border-top: 1px solid rgba(255,255,255,.12); flex-wrap: wrap; }
.heroBuiltLabel { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.heroBuiltMarks { display: inline-flex; align-items: center; gap: 20px; }
.hbLogo { height: 27px; width: auto; opacity: .95; display: block; }
.hbLogo.hbOai { height: 31px; }
.hbSep { width: 1px; height: 26px; background: rgba(255,255,255,.2); }
.heroArt { position: relative; display: flex; align-items: center; justify-content: center; }
.heroAstro { width: 100%; max-width: 470px; height: auto; display: block;
filter: drop-shadow(0 40px 70px rgba(0,0,0,.55));
mask-image: radial-gradient(115% 105% at 52% 46%, #000 62%, rgba(0,0,0,.35) 84%, transparent 100%);
-webkit-mask-image: radial-gradient(115% 105% at 52% 46%, #000 62%, rgba(0,0,0,.35) 84%, transparent 100%);
}
/* logo wall sits on the dark banner */
.heroDark .hero-clients { border-top-color: rgba(255,255,255,.12); margin-top: 46px; padding-top: 30px; }
.heroDark .hcLabel { color: rgba(255,255,255,.55); }
.heroDark .hcLine { background: linear-gradient(90deg, transparent, rgba(255,255,255,.2)); }
.heroDark .hcTop > .hcLine:last-child { background: linear-gradient(90deg, rgba(255,255,255,.2), transparent); }
.heroDark .hcSep { background: rgba(255,255,255,.16); }
.heroDark .hcItem img { filter: brightness(0) invert(1) !important; opacity: .78; }
.heroDark .hcItem:hover img { opacity: 1; }
@media (max-width: 1000px) {
.hero.heroDark { padding: 40px 0 52px; }
.hero.heroDark .hero-grid { grid-template-columns: 1fr; gap: 30px; }
.heroArt { order: -1; }
.heroAstro { max-width: 330px; }
.h1.heroH1 { max-width: 22ch; }
}
@media (max-width: 560px) {
.h1.heroH1 { font-size: clamp(32px, 9vw, 42px); }
.heroActions { gap: 12px; }
.btn.heroCta { width: 100%; justify-content: center; }
.heroProof { width: 100%; }
.heroAstro { max-width: 260px; }
.heroBuiltMarks { gap: 14px; }
.hbLogo { height: 23px; } .hbLogo.hbOai { height: 26px; }
}
/* hero: near-black stage so the astronaut plate blends, and screen-blend
the artwork so its black background disappears entirely */
.hero.heroDark {
background: radial-gradient(120% 92% at 76% 10%, #1a1233 0%, #0e0a1e 46%, #06040d 100%);
}
.heroBgGlow { width: 620px; height: 620px; right: -160px; top: -240px;
background: radial-gradient(circle, rgba(124,44,230,.30), transparent 68%); }
.heroAstro {
mix-blend-mode: screen;
mask-image: none; -webkit-mask-image: none;
filter: none;
}
/* astronaut now has real alpha — drop the blend hack and add a soft violet bloom */
.heroAstro { mix-blend-mode: normal; filter: drop-shadow(0 30px 60px rgba(0,0,0,.5)); }
.heroArt::before { content: ''; position: absolute; z-index: 0; width: 78%; aspect-ratio: 1;
left: 50%; top: 46%; transform: translate(-50%,-50%);
background: radial-gradient(circle, rgba(124,44,230,.34), transparent 66%); filter: blur(34px); }
.heroAstro { position: relative; z-index: 1; }
/* soften the artwork's outer edges so the lit wall/porthole dissolves into the stage */
.heroAstro {
mask-image: radial-gradient(118% 104% at 44% 56%, #000 52%, rgba(0,0,0,.55) 78%, transparent 96%);
-webkit-mask-image: radial-gradient(118% 104% at 44% 56%, #000 52%, rgba(0,0,0,.55) 78%, transparent 96%);
}
/* complete the fade inside the image box so no hard edge remains */
.heroAstro {
mask-image: radial-gradient(86% 90% at 42% 54%, #000 40%, rgba(0,0,0,.45) 70%, transparent 85%);
-webkit-mask-image: radial-gradient(86% 90% at 42% 54%, #000 40%, rgba(0,0,0,.45) 70%, transparent 85%);
}
/* ---- hero fixes: art height-capped, copy leads when stacked, logos keep brand colour ---- */
.heroArt img, .heroAstro { max-height: 520px; width: auto; }
@media (max-width: 1000px) {
.heroArt { order: 0; }
.heroCopy { order: -1; }
.heroAstro { max-width: 260px; max-height: 300px; margin-inline: auto; }
}
@media (max-width: 620px) {
.heroAstro { max-width: 210px; max-height: 240px; }
}
/* restore full-colour client logos on the dark stage */
.heroDark .hcItem img { filter: none !important; opacity: 1 !important; }
.heroDark .hcRow .hcItem { background: rgba(255,255,255,0.94); border-radius: 12px; padding: 12px 18px; }
.heroDark .hcRow { gap: 14px; }
.heroDark .hcItem + .hcItem { border-left: none; }
@media (max-width: 1000px) {
.heroAstro, .heroAstro img { max-height: 300px !important; width: auto !important; }
.heroArt { display: flex; justify-content: center; }
}
@media (max-width: 620px) {
.heroAstro, .heroAstro img { max-height: 240px !important; }
}
/* --- hero: astronaut presence + borderless logo row on dark --- */
@media (max-width: 1000px) {
/* sequence: copy -> astronaut -> BUILT ON */
.heroDark .heroBuilt { order: 1; }
.heroAstro, .heroAstro img { max-height: 410px !important; }
}
@media (max-width: 620px) {
.heroAstro, .heroAstro img { max-height: 320px !important; }
}
/* restore the borderless row with hairline dividers on the dark stage:
one shared light panel instead of per-mark plates */
.heroDark .hcRow {
background: rgba(255,255,255,0.94);
border-radius: 16px;
padding: 10px 6px;
}
.heroDark .hcRow .hcItem {
background: none !important;
border-radius: 0 !important;
padding: 10px 22px !important;
}
.heroDark .hcItem + .hcItem { border-left: 1px solid rgba(12,10,31,0.10) !important; }
@media (max-width: 760px) {
.heroDark .hcItem + .hcItem { border-left: none !important; }
}
.heroDark .hero-clients .hcRow .hcItem + .hcItem { border-left: 1px solid rgba(12,10,31,0.12) !important; border-left-style: solid !important; }
@media (max-width: 760px) { .heroDark .hero-clients .hcRow .hcItem + .hcItem { border-left-style: none !important; } }
.heroDark .heroBuilt { margin-top: 28px; grid-column: 1 / -1; }
.heroDark .hcRow .hcItem + .hcItem { border-left: 1px solid rgba(12,10,31,0.12) !important; border-left-style: solid !important; }
@media (max-width: 760px) { .heroDark .hcRow .hcItem + .hcItem { border-left-style: none !important; } }
/* dividers: adjacency-independent (explicit separator nodes may sit between items) */
.heroDark .hcRow .hcItem:not(:first-child) { border-left: 1px solid rgba(12,10,31,0.12) !important; }
@media (max-width: 760px) { .heroDark .hcRow .hcItem:not(:first-child) { border-left: none !important; } }
/* faces pill: stop flex from compressing the avatars into slivers */
.heroProof .heroFaces { display: inline-flex; align-items: center; flex: 0 0 auto; }
.heroProof .heroFaces img {
flex: 0 0 auto !important;
width: 36px !important; height: 36px !important;
min-width: 36px; min-height: 36px;
border-radius: 50% !important;
object-fit: cover !important; object-position: center 28% !important;
border: 2px solid #17122e;
background: #241c46;
}
.heroProof .heroFaces img + img { margin-left: -11px; }
.heroProof { flex-wrap: nowrap; }
.heroProof .heroProofText { flex: 1 1 auto; min-width: 0; }
/* partner marks: tight crops, optically balanced, crisp on dark */
.heroBuiltMarks { gap: 22px; }
.heroBuiltMarks .hbLogo { image-rendering: -webkit-optimize-contrast; }
.hbSep { width: 1px; height: 26px; background: rgba(255,255,255,.20); display: inline-block; }
@media (max-width: 760px) { .hbSep { height: 22px; } }
/* astronaut plate carries baked volumetric light + feathered alpha:
no CSS mask needed, and masks would only clip the haze */
.heroAstro,
.heroArt img.heroAstro {
mask-image: none !important;
-webkit-mask-image: none !important;
mix-blend-mode: normal;
filter: drop-shadow(0 34px 64px rgba(0,0,0,.55));
}
/* the plate supplies its own bloom; keep the stage glow subtle behind it */
.heroArt::before { opacity: .55; }
/* ==========================================================
Services: dark obsidian + violet/crimson gradient
========================================================== */
.seoSec#services { position: relative; overflow: hidden; background: #07060f; padding-top: 96px; padding-bottom: 100px; }
@media (max-width: 760px) { .seoSec#services { padding-top: 68px; padding-bottom: 72px; } }
/* layered light: violet from top-left, crimson from bottom-right */
.seoSec#services::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 62% 58% at 8% -6%, rgba(124,44,230,.42), transparent 62%),
radial-gradient(ellipse 56% 52% at 100% 104%, rgba(88,36,197,.30), transparent 62%),
radial-gradient(ellipse 44% 40% at 74% 30%, rgba(88,36,197,.26), transparent 64%);
}
/* fine grid + vignette so the black reads engineered, not flat */
.seoSec#services::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 78% 68% at 50% 42%, #000 10%, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 42%, #000 10%, transparent 78%);
}
.seoSec#services > .container { position: relative; z-index: 1; }
/* heading block */
.seoSec#services .section-tag { color: #cbb6ff; }
.seoSec#services .section-tag::before { background: linear-gradient(90deg, #7c2ce6, #b49bff); }
.seoSec#services .section-h2 { color: #fff; }
.seoSec#services .section-h2 em {
background: linear-gradient(96deg, #b49bff 0%, #7c4dee 96%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.seoSec#services .section-lead { color: rgba(255,255,255,.62); }
.seoSec#services .seoOutro { color: rgba(255,255,255,.9); }
.seoSec#services .seoOutro strong { color: #fff; }
/* rows: glass on obsidian */
.seoSec#services .svcRow {
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.10);
border-radius: 16px;
position: relative; overflow: hidden;
}
/* gradient hairline that ignites on hover/open */
.seoSec#services .svcRow::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
background: linear-gradient(180deg, #b49bff, #7c4dee);
opacity: 0; transition: opacity .3s var(--ease);
}
.seoSec#services .svcRow:hover { background: rgba(255,255,255,.06); border-color: rgba(180,155,255,.42); }
.seoSec#services .svcRow:hover::before { opacity: .75; }
.seoSec#services .svcRow[open] {
background: linear-gradient(180deg, rgba(180,155,255,.13), rgba(255,255,255,.03));
border-color: rgba(180,155,255,.55);
box-shadow: 0 26px 62px -30px rgba(124,44,230,.55);
}
.seoSec#services .svcRow[open]::before { opacity: 1; }
.seoSec#services .svcRowTxt strong { color: #fff; }
.seoSec#services .svcRowTxt em { color: rgba(255,255,255,.66); }
.seoSec#services .svcRow > p { color: rgba(255,255,255,.74); }
.seoSec#services .svcRow > p strong { color: #fff; }
.seoSec#services .svcRowChev { color: rgba(255,255,255,.45); }
.seoSec#services .svcRow[open] .svcRowChev { color: #cbb6ff; }
/* numerals: translucent tinted chips */
.seoSec#services .svcRowN { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #fff; }
.seoSec#services .svcRowN.n-vi { color: #c9b8ff; border-color: rgba(180,155,255,.4); }
.seoSec#services .svcRowN.n-bl { color: #9fc2ff; border-color: rgba(120,165,255,.38); }
.seoSec#services .svcRowN.n-te { color: #7fe3d6; border-color: rgba(90,215,200,.36); }
.seoSec#services .svcRowN.n-am { color: #ffcf87; border-color: rgba(255,190,110,.36); }
.seoSec#services .svcRowN.n-gr { color: #90e9b4; border-color: rgba(110,225,160,.36); }
.seoSec#services .svcRow[open] .svcRowN { background: linear-gradient(150deg, #7c2ce6, #5824c5); color: #fff; border-color: transparent; }
/* ==========================================================
Five signals: deeper black + larger head
========================================================== */
.sigDark { background: linear-gradient(158deg, #08060f 0%, #1b1140 48%, #140d2e 100%) !important; padding: 64px 44px 58px !important; }
@media (max-width: 640px) { .sigDark { padding: 40px 22px 36px !important; } }
.sigDark::before {
background:
radial-gradient(ellipse 54% 60% at 88% 4%, rgba(124,44,230,.50), transparent 62%),
radial-gradient(ellipse 50% 54% at 4% 98%, rgba(124,77,238,.34), transparent 62%) !important;
}
.dsHead { max-width: 760px; margin-bottom: 34px; }
.dsEyebrow {
display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
letter-spacing: .2em; text-transform: uppercase; color: #cbb6ff;
padding: 6px 13px; border-radius: 100px;
background: rgba(180,155,255,.13); border: 1px solid rgba(180,155,255,.3);
margin-bottom: 18px;
}
.dsTitle {
font-family: var(--sans); font-weight: 800;
font-size: clamp(28px, 3.9vw, 46px); line-height: 1.06; letter-spacing: -.035em;
color: #fff; margin: 0;
}
.dsTitle em {
font-style: normal;
background: linear-gradient(96deg, #b49bff 0%, #7c4dee 98%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.dsLede { font-size: 16.5px; line-height: 1.62; color: rgba(255,255,255,.72) !important; margin-top: 16px; max-width: 62ch; }
/* ==========================================================
Autonomy ladder: let Agentic AI dominate
========================================================== */
.cmpRow.cmpWin {
background: linear-gradient(100deg, rgba(124,44,230,.10), rgba(124,77,238,.07)) !important;
border-color: var(--p-300) !important;
box-shadow: 0 24px 58px -30px var(--purple-glow) !important;
transform: scale(1.02);
position: relative; z-index: 2;
}
.cmpRow.cmpWin .cmpTop h4 { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.cmpRow.cmpWin .cmpWhat { color: var(--ink-2); font-weight: 600; font-size: 15px; }
.cmpRow.cmpWin .cmpEg { color: var(--ink-soft); }
.cmpRow.cmpWin .cmpAuto { background: linear-gradient(140deg, #7c2ce6, #5824c5) !important; color: #fff !important; border-color: transparent !important; }
.cmpRow.cmpWin .cmpBar { background: linear-gradient(90deg, #7c2ce6, #b49bff) !important; box-shadow: 0 0 18px -2px rgba(124,44,230,.5); }
.cmpRow.cmpWin .cmpDot { background: #7c2ce6 !important; box-shadow: 0 0 0 5px rgba(124,44,230,.18) !important; }
/* the ladder ends on Agentic AI — give it breathing room as the conclusion */
.cmpRow.cmpWin { margin-top: 6px; }
/* ==========================================================
Five signals: title must read at scale
========================================================== */
.dsTitle {
/* match the page's h2 scale + weight, in white */
font-family: var(--sans) !important;
font-weight: 700 !important;
font-size: clamp(38px, 5vw, 64px) !important;
line-height: 1.05 !important;
letter-spacing: -.035em !important;
color: #fff !important;
-webkit-text-fill-color: #fff;
max-width: 22ch;
}
.dsTitle em {
-webkit-text-fill-color: transparent;
background: linear-gradient(96deg, #c9b8ff 0%, #7c2ce6 98%);
-webkit-background-clip: text; background-clip: text;
}
.dsLede { font-size: 17.5px !important; color: rgba(255,255,255,.78) !important; }
/* ==========================================================
Why Dubai — image-forward, collapsed, sleek
========================================================== */
#why-dubai { position: relative; overflow: hidden; padding: 104px 0 108px; background: #06050d; }
@media (max-width: 760px) { #why-dubai { padding: 72px 0 76px; } }
#why-dubai::before {
content: ''; position: absolute; inset: 0;
background-image: url('../images/dubai-museum.jpg');
background-size: cover; background-position: 50% 42%;
opacity: .40; filter: saturate(1.1) contrast(1.04);
}
#why-dubai::after {
content: ''; position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(6,5,13,.72) 0%, rgba(6,5,13,.34) 38%, rgba(6,5,13,.88) 100%),
radial-gradient(ellipse 60% 60% at 8% 4%, rgba(124,44,230,.44), transparent 62%),
radial-gradient(ellipse 52% 50% at 100% 100%, rgba(124,77,238,.32), transparent 60%);
}
#why-dubai > .container { position: relative; z-index: 1; }
.whyD { max-width: 1000px; }
.whyDHead { max-width: 760px; }
.whyDTag {
display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
letter-spacing: .2em; text-transform: uppercase; color: #d6c6ff;
padding: 7px 14px; border-radius: 100px;
background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); margin-bottom: 22px;
}
.whyDTitle {
font-family: var(--sans); font-weight: 800;
font-size: clamp(32px, 5vw, 62px); line-height: 1.02; letter-spacing: -.042em;
color: #fff; margin: 0 0 16px;
text-shadow: 0 4px 30px rgba(0,0,0,.5);
}
.whyDTitle em {
font-style: normal;
background: linear-gradient(96deg, #c9b8ff 0%, #7c2ce6 98%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.whyDLede { font-size: 16.5px; color: rgba(255,255,255,.72); margin: 0; }
/* stat strip: hairline-separated, no boxes */
.whyDStats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
margin: 46px 0 34px;
border-top: 1px solid rgba(255,255,255,.16);
border-bottom: 1px solid rgba(255,255,255,.16);
}
@media (max-width: 820px) { .whyDStats { grid-template-columns: 1fr 1fr; } }
.whyDStat { padding: 26px 22px; border-left: 1px solid rgba(255,255,255,.12); }
.whyDStat:first-child { border-left: none; padding-left: 0; }
@media (max-width: 820px) {
.whyDStat:nth-child(odd) { border-left: none; padding-left: 0; }
.whyDStat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
}
.wdN {
display: block; font-family: var(--sans); font-weight: 800;
font-size: clamp(30px, 3.6vw, 46px); line-height: .95; letter-spacing: -.04em; color: #fff;
}
.wdN i { font-style: normal; font-size: .5em; color: #c9b8ff; vertical-align: super; }
.wdL { display: block; font-size: 12.5px; color: rgba(255,255,255,.62); margin-top: 10px; line-height: 1.4; }
/* collapsed detail */
.whyDMore {
border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
background: rgba(255,255,255,.05);
transition: border-color .3s, background .3s;
}
.whyDMore:hover { border-color: rgba(201,184,255,.42); }
.whyDMore[open] { background: rgba(255,255,255,.07); border-color: rgba(201,184,255,.5); }
.whyDMore summary {
list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 17px 20px;
}
.whyDMore summary::-webkit-details-marker { display: none; }
.wdMoreT { font-size: 14.5px; font-weight: 700; color: #fff; }
.wdMoreC { color: rgba(255,255,255,.55); display: flex; transition: transform .3s var(--ease), color .3s; }
.wdMoreC svg { width: 17px; height: 17px; }
.whyDMore[open] .wdMoreC { transform: rotate(180deg); color: #c9b8ff; }
.wdMoreBody { padding: 4px 20px 22px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; }
@media (max-width: 820px) { .wdMoreBody { grid-template-columns: 1fr; gap: 22px; } }
.wdTimeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.wdTimeline li { position: relative; padding-left: 20px; }
.wdTimeline li::before {
content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%;
background: linear-gradient(140deg, #b49bff, #7c4dee);
}
.wdTimeline li:not(:last-child)::after {
content: ''; position: absolute; left: 3px; top: 18px; bottom: -14px; width: 1px;
background: rgba(255,255,255,.16);
}
.wdDate {
display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: #c9b8ff; margin-bottom: 5px;
}
.wdTimeline p { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.72); }
.wdTimeline strong { color: #fff; }
.wdTake { border-left: 1px solid rgba(255,255,255,.14); padding-left: 26px; }
@media (max-width: 820px) { .wdTake { border-left: none; border-top: 1px solid rgba(255,255,255,.14); padding: 20px 0 0; } }
.wdTake p { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.76); margin: 0 0 12px; }
.wdTake p:last-child { margin: 0; }
.whyDCta { margin-top: 30px; }
/* ==========================================================
Departments — modern interactive grid
========================================================== */
#departments .section-h2 { color: #fff; font-family: var(--sans); font-weight: 800; letter-spacing: -.04em; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.04; }
.deptGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1000px) { .deptGrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .deptGrid { grid-template-columns: 1fr; } }
/* first two cards lead the row */
.deptCard:nth-child(1), .deptCard:nth-child(2) { grid-column: span 1; }
.deptCard {
position: relative; overflow: hidden;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
border-radius: 20px; padding: 26px 24px 24px;
transition: transform .45s var(--ease), border-color .35s, background .35s, box-shadow .45s var(--ease);
}
.deptCard:hover { transform: translateY(-6px); background: rgba(255,255,255,.07); border-color: rgba(201,184,255,.45); box-shadow: 0 30px 66px -34px rgba(124,44,230,.55); }
/* travelling sheen */
.deptGlow { position: absolute; inset: -1px; border-radius: 20px; pointer-events: none;
background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.14) 50%, transparent 62%);
transform: translateX(-130%); transition: transform .85s var(--ease); }
.deptCard:hover .deptGlow { transform: translateX(130%); }
.deptTop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.deptIc {
width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
transition: transform .4s var(--ease), background .35s, border-color .35s;
}
.deptIc svg { width: 21px; height: 21px; }
.deptCard:hover .deptIc { transform: scale(1.1) rotate(-6deg); }
.dt-vi .deptIc { color: #c9b8ff; } .dt-vi:hover .deptIc { background: rgba(180,155,255,.22); border-color: rgba(180,155,255,.5); }
.dt-bl .deptIc { color: #9fc2ff; } .dt-bl:hover .deptIc { background: rgba(120,165,255,.2); border-color: rgba(120,165,255,.48); }
.dt-te .deptIc { color: #7fe3d6; } .dt-te:hover .deptIc { background: rgba(90,215,200,.2); border-color: rgba(90,215,200,.46); }
.dt-am .deptIc { color: #ffcf87; } .dt-am:hover .deptIc { background: rgba(255,190,110,.2); border-color: rgba(255,190,110,.46); }
.dt-gr .deptIc { color: #90e9b4; } .dt-gr:hover .deptIc { background: rgba(110,225,160,.2); border-color: rgba(110,225,160,.46); }
.deptN { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.34); }
.deptName { font-family: var(--sans); font-weight: 800; font-size: 19px; letter-spacing: -.025em; color: #fff; margin: 0 0 16px; line-height: 1.2; }
.deptTags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.deptTags li {
font-size: 12px; color: rgba(255,255,255,.74);
padding: 6px 11px; border-radius: 100px;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.deptCard:hover .deptTags li { background: rgba(255,255,255,.09); color: #fff; border-color: rgba(255,255,255,.16); }
.deptTags li:hover { transform: translateY(-2px); }
/* ==========================================================
Departments — folder-tab industry panel (enterprise, dark)
========================================================== */
.indSec { position: relative; overflow: hidden; background: #07060d; padding: 100px 0 104px; }
@media (max-width: 760px) { .indSec { padding: 70px 0 74px; } }
.indSec::before { content:''; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(ellipse 58% 54% at 6% -8%, rgba(124,44,230,.30), transparent 62%),
radial-gradient(ellipse 50% 48% at 100% 106%, rgba(88,36,197,.26), transparent 62%); }
.indSec > .container { position: relative; z-index: 1; }
.indHead { max-width: 900px; margin-bottom: 40px; }
.indTag { display:inline-block; font-family: var(--mono); font-size:10.5px; font-weight:700;
letter-spacing:.2em; text-transform:uppercase; color:#d6c6ff; padding:7px 14px; border-radius:100px;
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); margin-bottom:20px; }
.indTitle { font-family: var(--sans); font-weight:700; font-size:clamp(32px,4.6vw,58px);
line-height:1.04; letter-spacing:-.038em; color:#fff; margin:0; max-width:24ch; }
.indTitle em { font-style:normal; background:linear-gradient(96deg,#c9b8ff 0%,#7c2ce6 98%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
/* folder tabs */
.indTabs { display:flex; gap:6px; padding:0 8px; overflow-x:auto; scrollbar-width:none; }
.indTabs::-webkit-scrollbar { display:none; }
.indTab { position:relative; flex:0 0 auto; border:none; cursor:pointer;
font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:-.01em;
color:rgba(255,255,255,.56); background:rgba(255,255,255,.045);
padding:15px 26px; border-radius:14px 14px 0 0;
border-top:2px solid transparent; transition:color .28s, background .28s, border-color .28s; }
.indTab:hover { color:rgba(255,255,255,.85); background:rgba(255,255,255,.07); }
.indTab.isOn { color:#fff; background:rgba(255,255,255,.075); border-top-color:#7c2ce6; }
.indTab.isOn::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:rgba(255,255,255,.075); }
@media (max-width: 620px) { .indTab { font-size:13.5px; padding:13px 18px; } }
/* stage */
.indStage { position:relative; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.11);
border-radius:0 22px 22px 22px; padding:46px 48px 44px; }
@media (max-width: 760px) { .indStage { padding:30px 24px 32px; border-radius:0 16px 16px 16px; } }
.indPanel { display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center;
animation: indIn .55s var(--ease) both; }
@media (max-width: 940px) { .indPanel { grid-template-columns:1fr; gap:30px; } }
.indPanel[hidden] { display:none; }
@keyframes indIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.indH { font-family:var(--sans); font-weight:700; font-size:clamp(25px,3.1vw,38px);
line-height:1.1; letter-spacing:-.035em; color:#fff; margin:0 0 16px; max-width:22ch; }
.indP { font-size:16px; line-height:1.68; color:rgba(255,255,255,.7); margin:0 0 24px; max-width:52ch; }
.indExplore { display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:600;
color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.34);
transition:gap .3s var(--ease), border-color .3s; }
.indExplore svg { width:19px; height:19px; }
.indExplore:hover { gap:14px; border-bottom-color:#c9b8ff; }
.indTagsWrap { margin-top:38px; }
.indTagsLabel { display:block; font-size:13px; color:rgba(255,255,255,.5); margin-bottom:14px; }
.indTags { list-style:none; margin:0; padding:18px 20px; display:flex; flex-wrap:wrap; gap:8px;
border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(255,255,255,.03); }
.indTags li { font-size:12.5px; color:rgba(255,255,255,.76); padding:6px 12px; border-radius:100px;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); transition:transform .3s var(--ease), color .3s; }
.indTags li:hover { transform:translateY(-2px); color:#fff; }
/* image card + stacked depth */
.indShot { margin:0; position:relative; }
.indShotFrame { position:relative; border-radius:20px; overflow:hidden;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:12px; }
.indShotFrame::before, .indShotFrame::after { content:''; position:absolute; border-radius:20px;
border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); z-index:-1; }
.indShotFrame::before { inset:14px -16px -14px 16px; }
.indShotFrame::after { inset:26px -30px -26px 30px; opacity:.6; }
.indShotFrame img { display:block; width:100%; height:280px; object-fit:cover; border-radius:12px; }
@media (max-width: 940px) { .indShotFrame img { height:230px; } }
.indBadge { position:absolute; top:24px; right:24px; z-index:2; font-size:11.5px; font-weight:600;
color:#fff; background:rgba(12,10,31,.62); border:1px solid rgba(255,255,255,.2);
padding:6px 13px; border-radius:100px; }
.indShot figcaption { margin-top:20px; font-family:var(--sans); font-weight:700; font-size:19px;
line-height:1.28; letter-spacing:-.025em; color:#fff; max-width:26ch; }
/* dots */
.indDots { position:absolute; right:-26px; top:50%; transform:translateY(-50%);
display:flex; flex-direction:column; gap:11px; }
@media (max-width: 1120px) { .indDots { display:none; } }
.indDot { width:8px; height:8px; border-radius:50%; border:1px solid rgba(255,255,255,.42); transition:all .3s; }
.indDot.isOn { background:#fff; border-color:#fff; }
.indKicker { margin-top:38px; font-size:16px; line-height:1.6; color:rgba(255,255,255,.62);
max-width:74ch; padding-left:20px; border-left:2px solid rgba(124,44,230,.55); }
/* ==========================================================
Integrations — light split rail (modern, no card grid)
========================================================== */
.intSec { position:relative; overflow:hidden; background:linear-gradient(180deg,#fbfaff 0%,#f4f1fb 100%); padding:100px 0 104px; }
@media (max-width:760px){ .intSec{ padding:70px 0 74px; } }
.intSec::before { content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse 54% 50% at 92% 4%, rgba(124,44,230,.10), transparent 62%),
radial-gradient(ellipse 46% 44% at 2% 98%, rgba(124,77,238,.08), transparent 62%); }
.intSec > .container { position:relative; z-index:1; }
.intHead { max-width:940px; margin-bottom:44px; }
.intTitle { font-family:var(--sans); font-weight:700; font-size:clamp(30px,4.4vw,56px);
line-height:1.05; letter-spacing:-.038em; color:var(--ink); margin:14px 0 16px; max-width:30ch; }
.intTitle em { font-style:normal; background:linear-gradient(96deg,#7c2ce6 0%,#5824c5 98%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.intLede { font-size:17px; line-height:1.66; color:var(--ink-soft); max-width:64ch; margin:0; }
.intWrap { display:grid; grid-template-columns:266px 1fr; gap:32px; align-items:start; }
@media (max-width:940px){ .intWrap{ grid-template-columns:1fr; gap:20px; } }
/* vertical rail */
.intRail { display:flex; flex-direction:column; gap:4px; }
@media (max-width:940px){ .intRail{ flex-direction:row; overflow-x:auto; gap:8px; scrollbar-width:none; }
.intRail::-webkit-scrollbar{ display:none; } }
.intTab { display:flex; align-items:center; gap:13px; width:100%; cursor:pointer; text-align:left;
border:1px solid transparent; background:transparent; border-radius:14px; padding:14px 16px;
font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:-.012em; color:var(--ink-soft);
transition:background .26s, color .26s, border-color .26s, transform .26s var(--ease); }
@media (max-width:940px){ .intTab{ width:auto; flex:0 0 auto; } .intTabL{ white-space:nowrap; } }
.intTab:hover { background:rgba(124,44,230,.06); color:var(--ink); }
.intTab.isOn { background:#fff; border-color:var(--p-200); color:var(--ink);
box-shadow:0 16px 38px -26px var(--purple-glow); }
.intTabIc { display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex:0 0 auto;
border-radius:11px; background:rgba(124,44,230,.09); color:var(--violet);
transition:background .28s, color .28s, transform .3s var(--ease); }
.intTabIc svg { width:19px; height:19px; }
.intTab.isOn .intTabIc { background:linear-gradient(150deg,#7c2ce6,#5824c5); color:#fff; transform:scale(1.06); }
/* stage */
.intStage { position:relative; background:#fff; border:1px solid var(--line); border-radius:22px;
padding:44px 46px; box-shadow:0 30px 70px -46px rgba(70,30,160,.28); min-height:288px; }
@media (max-width:760px){ .intStage{ padding:28px 24px; } }
.intPane { opacity:1; transform:none; }
.intPane[hidden] { display:none; }
@keyframes intIn { from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.intH { font-family:var(--sans); font-weight:700; font-size:clamp(23px,2.7vw,32px);
line-height:1.14; letter-spacing:-.032em; color:var(--ink); margin:0 0 14px; max-width:26ch; }
.intP { font-size:16px; line-height:1.68; color:var(--ink-soft); margin:0 0 28px; max-width:56ch; }
.intChips { list-style:none; margin:0; padding:24px 0 0; display:flex; flex-wrap:wrap; gap:9px;
border-top:1px dashed var(--line-strong); }
.intChips li { font-size:13.5px; font-weight:500; color:var(--ink-2); padding:9px 15px; border-radius:100px;
background:var(--surface-2); border:1px solid var(--line);
transition:transform .28s var(--ease), border-color .28s, background .28s, color .28s; }
.intChips li:hover { transform:translateY(-3px); background:var(--p-50); border-color:var(--p-200); color:var(--p-800); }
.intKicker { margin-top:38px; font-size:16.5px; line-height:1.6; color:var(--ink-2); font-weight:500;
max-width:74ch; padding-left:20px; border-left:2px solid var(--violet); }
/* ==========================================================
Reveal safety: opacity:0 only applies once JS confirms it
can drive the transition. Without .js-anim (JS disabled,
script error, or a stalled animation timeline) every
.reveal block renders fully visible.
========================================================== */
html:not(.js-anim) .reveal { opacity: 1 !important; transform: none !important; }
/* single visible-state convention: .in (added by the IntersectionObserver) */
.reveal.in, .reveal.revealed { opacity: 1 !important; transform: none !important; }
/* scroll affordance on the horizontal tab rails (<=940px) */
@media (max-width: 940px) {
.intRail, .indTabs {
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
}
}
/* ==========================================================
Security — layered-defence spine (dark, enterprise)
========================================================== */
.secSec { position:relative; overflow:hidden; background:#07060d; padding:104px 0 108px; }
@media (max-width:760px){ .secSec{ padding:72px 0 76px; } }
.secSec::before { content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse 56% 52% at 4% -6%, rgba(124,44,230,.30), transparent 62%),
radial-gradient(ellipse 48% 46% at 100% 104%, rgba(88,36,197,.24), transparent 62%); }
.secSec::after { content:''; position:absolute; inset:0; pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
background-size:66px 66px;
-webkit-mask-image:radial-gradient(ellipse 76% 66% at 50% 40%, #000 8%, transparent 78%);
mask-image:radial-gradient(ellipse 76% 66% at 50% 40%, #000 8%, transparent 78%); }
.secSec > .container { position:relative; z-index:1; }
.secGrid { display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:60px; align-items:start; }
@media (max-width:1000px){ .secGrid{ grid-template-columns:1fr; gap:38px; } }
.secStick { position:sticky; top:104px; }
@media (max-width:1000px){ .secStick{ position:static; } }
.secTag { display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:700;
letter-spacing:.2em; text-transform:uppercase; color:#d6c6ff; padding:7px 14px; border-radius:100px;
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); margin-bottom:20px; }
.secTitle { font-family:var(--sans); font-weight:700; font-size:clamp(30px,3.9vw,50px);
line-height:1.05; letter-spacing:-.038em; color:#fff; margin:0 0 18px; }
.secTitle em { font-style:normal; background:linear-gradient(96deg,#c9b8ff 0%,#7c2ce6 98%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.secLede { font-size:16px; line-height:1.68; color:rgba(255,255,255,.68); margin:0; max-width:50ch; }
/* concentric shield */
.secShield { position:relative; width:220px; height:220px; margin:46px 0 0; display:flex; align-items:center; justify-content:center; }
@media (max-width:1000px){ .secShield{ display:none; } }
.ssRing { position:absolute; border-radius:50%; border:1px solid rgba(180,155,255,.28); }
.ssR1 { inset:0; animation:ssPulse 4.4s ease-out infinite; }
.ssR2 { inset:28px; animation:ssPulse 4.4s ease-out infinite 1.4s; }
.ssR3 { inset:56px; animation:ssPulse 4.4s ease-out infinite 2.8s; }
@keyframes ssPulse { 0%{ transform:scale(.94); opacity:.85; } 100%{ transform:scale(1.1); opacity:0; } }
.ssCore { position:relative; width:88px; height:88px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:linear-gradient(155deg,#7c2ce6,#4a1aa0); color:#fff;
box-shadow:0 22px 50px -20px rgba(124,44,230,.6), inset 0 1px 0 rgba(255,255,255,.3); }
.ssCore svg { width:36px; height:36px; }
.ssCount { position:absolute; bottom:2px; right:6px; font-family:var(--sans); font-weight:800; font-size:26px;
letter-spacing:-.03em; color:#fff; }
.ssCount i { font-style:normal; display:block; font-size:11px; font-weight:600; letter-spacing:.1em;
text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:2px; }
/* layer spine */
.secLayers { list-style:none; margin:0; padding:0; }
.secLayer { position:relative; display:grid; grid-template-columns:56px 1fr; gap:20px; padding:0 0 26px 0; }
.secLayer:last-child { padding-bottom:0; }
.slSpine { position:absolute; left:27px; top:44px; bottom:-4px; width:1px; background:linear-gradient(180deg, rgba(180,155,255,.42), rgba(255,255,255,.06)); }
.secLayer:last-child .slSpine { display:none; }
.slNum { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
font-family:var(--sans); font-weight:800; font-size:16px; letter-spacing:-.02em; color:#fff;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
transition:background .35s, border-color .35s, transform .4s var(--ease); }
.slBody { position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
border-radius:18px; padding:22px 24px 22px 26px; overflow:hidden;
transition:background .35s, border-color .35s, transform .45s var(--ease), box-shadow .45s var(--ease); }
.slBody::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
background:linear-gradient(180deg,#b49bff,#7c4dee); opacity:0; transition:opacity .35s; }
.secLayer:hover .slBody { background:rgba(255,255,255,.07); border-color:rgba(201,184,255,.4);
transform:translateX(6px); box-shadow:0 26px 60px -34px rgba(124,44,230,.5); }
.secLayer:hover .slBody::before { opacity:1; }
.secLayer:hover .slNum { transform:scale(1.06); border-color:rgba(201,184,255,.5); }
.slIc { position:absolute; top:20px; right:20px; width:38px; height:38px; border-radius:11px;
display:flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.06); transition:background .35s, color .35s, transform .4s var(--ease); }
.slIc svg { width:19px; height:19px; }
.secLayer:hover .slIc { transform:scale(1.1) rotate(-6deg); }
.sl-vi .slIc { color:#c9b8ff; } .sl-vi:hover .slIc { background:rgba(180,155,255,.2); }
.sl-bl .slIc { color:#9fc2ff; } .sl-bl:hover .slIc { background:rgba(120,165,255,.2); }
.sl-te .slIc { color:#7fe3d6; } .sl-te:hover .slIc { background:rgba(90,215,200,.2); }
.sl-am .slIc { color:#ffcf87; } .sl-am:hover .slIc { background:rgba(255,190,110,.2); }
.sl-gr .slIc { color:#90e9b4; } .sl-gr:hover .slIc { background:rgba(110,225,160,.2); }
.sl-vi .slNum { color:#e5dcff; } .sl-bl .slNum { color:#dbe8ff; } .sl-te .slNum { color:#d6f6f1; }
.sl-am .slNum { color:#ffeccd; } .sl-gr .slNum { color:#dcf7e8; }
.slH { font-family:var(--sans); font-weight:700; font-size:18.5px; letter-spacing:-.026em; color:#fff;
margin:0 0 9px; padding-right:52px; line-height:1.24; }
.slP { font-size:14.5px; line-height:1.66; color:rgba(255,255,255,.68); margin:0; }
/* UAE residency */
.secUae { margin-top:64px; display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start;
padding-top:52px; border-top:1px solid rgba(255,255,255,.12); }
@media (max-width:940px){ .secUae{ grid-template-columns:1fr; gap:28px; } }
.suH { font-family:var(--sans); font-weight:700; font-size:clamp(24px,2.8vw,34px); letter-spacing:-.032em;
color:#fff; margin:0 0 18px; line-height:1.1; }
.suCopy p { font-size:15.5px; line-height:1.7; color:rgba(255,255,255,.68); margin:0 0 16px; max-width:60ch; }
.suNote { color:#c9b8ff !important; font-weight:600; padding:14px 18px; border-radius:12px;
background:rgba(124,44,230,.12); border:1px solid rgba(180,155,255,.28); }
.suLink { display:inline-flex; align-items:center; gap:9px; margin-top:6px; font-size:15px; font-weight:600;
color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.32);
transition:gap .3s var(--ease), border-color .3s; }
.suLink svg { width:19px; height:19px; }
.suLink:hover { gap:14px; border-bottom-color:#c9b8ff; }
.suCard { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:20px;
padding:26px 26px 22px; }
.suCardTag { display:block; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; color:#c9b8ff; margin-bottom:18px; }
.suQs { list-style:none; margin:0; padding:0; }
.suQs li { position:relative; padding:11px 0 11px 30px; font-size:14px; line-height:1.5;
color:rgba(255,255,255,.78); border-bottom:1px solid rgba(255,255,255,.07); }
.suQs li:last-child { border-bottom:none; }
.suQs li::before { content:''; position:absolute; left:4px; top:17px; width:11px; height:11px; border-radius:50%;
border:1px solid rgba(180,155,255,.6); }
.suQs li::after { content:''; position:absolute; left:7px; top:20px; width:5px; height:5px; border-radius:50%;
background:#b49bff; opacity:0; transition:opacity .3s; }
.suQs li:hover { color:#fff; }
.suQs li:hover::after { opacity:1; }
/* ==========================================================
Cost — clean enterprise pricing tiers (light)
========================================================== */
.cstSec { position:relative; overflow:hidden; background:linear-gradient(180deg,#fbfaff 0%,#f5f2fc 100%); padding:100px 0 104px; }
@media (max-width:760px){ .cstSec{ padding:70px 0 74px; } }
.cstSec::before { content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse 50% 46% at 88% 2%, rgba(124,44,230,.09), transparent 62%); }
.cstSec > .container { position:relative; z-index:1; }
.cstHead { max-width:820px; margin:0 auto 52px; text-align:center; }
.cstTag, .roiTag { display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:700;
letter-spacing:.2em; text-transform:uppercase; color:var(--violet); padding:7px 14px; border-radius:100px;
background:rgba(124,44,230,.09); border:1px solid rgba(124,44,230,.2); margin-bottom:20px; }
.cstTitle, .roiTitle { font-family:var(--sans); font-weight:700; font-size:clamp(30px,4.3vw,54px);
line-height:1.05; letter-spacing:-.038em; color:var(--ink); margin:0 0 16px; }
.cstTitle em, .roiTitle em { font-style:normal; background:linear-gradient(96deg,#7c2ce6 0%,#5824c5 98%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.cstLede { font-size:17px; line-height:1.66; color:var(--ink-soft); margin:0 auto; max-width:62ch; }
.cstTiers { display:grid; grid-template-columns:repeat(3,1fr); gap:0;
background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden;
box-shadow:0 30px 74px -48px rgba(70,30,160,.3); }
@media (max-width:940px){ .cstTiers{ grid-template-columns:1fr; } }
.cstTier { position:relative; padding:36px 32px 34px; border-left:1px solid var(--line);
display:flex; flex-direction:column; transition:background .3s; }
.cstTier:first-child { border-left:none; }
@media (max-width:940px){ .cstTier{ border-left:none; border-top:1px solid var(--line); }
.cstTier:first-child{ border-top:none; } }
.cstTier:hover { background:#fdfcff; }
.ctFeat { background:linear-gradient(180deg,#faf7ff,#fff); }
.ctFeat::before { content:''; position:absolute; top:0; left:0; right:0; height:3px;
background:linear-gradient(90deg,#7c2ce6,#5824c5); }
.ctLabel { display:inline-block; font-family:var(--mono); font-size:10px; font-weight:700;
letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute);
padding:5px 11px; border-radius:100px; background:var(--surface-2); border:1px solid var(--line); }
.ctLabelHot { color:#fff; background:linear-gradient(140deg,#7c2ce6,#5824c5); border-color:transparent; }
.ctName { font-family:var(--sans); font-weight:700; font-size:16.5px; letter-spacing:-.024em;
color:var(--ink); margin:16px 0 0; line-height:1.3; min-height:2.6em; }
.ctPrice { font-family:var(--sans); font-weight:800; font-size:clamp(26px,2.7vw,33px);
letter-spacing:-.038em; color:var(--ink); margin:22px 0 16px; padding-top:22px;
border-top:1px dashed var(--line-strong); white-space:nowrap; }
.ctFeat .ctPrice { color:var(--p-800); }
.ctCur { display:block; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
color:var(--ink-mute); margin-bottom:6px; }
.ctTo { color:var(--ink-mute); font-weight:500; margin:0 2px; }
.ctPlus { color:var(--violet); }
.ctDesc { font-size:14px; line-height:1.62; color:var(--ink-soft); margin:0; }
.cstFoot { display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:start; margin-top:44px; }
@media (max-width:940px){ .cstFoot{ grid-template-columns:1fr; gap:26px; } }
.cstWhy { font-size:15.5px; line-height:1.72; color:var(--ink-soft); margin:0; max-width:62ch; }
.cdLabel { display:block; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; color:var(--ink-mute); margin-bottom:14px; }
.cdList { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.cdList li { font-size:13px; color:var(--ink-2); padding:7px 13px; border-radius:100px;
background:#fff; border:1px solid var(--line); transition:transform .28s var(--ease), border-color .28s; }
.cdList li:hover { transform:translateY(-2px); border-color:var(--p-200); }
.cstLink, .suLinkLight { grid-column:1 / -1; display:inline-flex; align-items:center; gap:9px; justify-self:start;
font-size:15px; font-weight:600; color:var(--ink); text-decoration:none; padding-bottom:6px;
border-bottom:1px solid var(--line-strong); transition:gap .3s var(--ease), border-color .3s; }
.cstLink svg { width:19px; height:19px; }
.cstLink:hover { gap:14px; border-bottom-color:var(--violet); }
/* ==========================================================
ROI — measurement + worked example
========================================================== */
.roiSec { position:relative; background:#fff; padding:100px 0 104px; }
@media (max-width:760px){ .roiSec{ padding:70px 0 74px; } }
.roiTop { display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:start; }
@media (max-width:940px){ .roiTop{ grid-template-columns:1fr; gap:30px; } }
.roiLede { font-size:16.5px; line-height:1.7; color:var(--ink-soft); margin:0; max-width:54ch; }
.roiLede strong { color:var(--ink); font-weight:700; }
.roiMeasure { background:var(--surface-2); border:1px solid var(--line); border-radius:20px; padding:26px 28px; }
.rmLabel { display:block; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; color:var(--violet); margin-bottom:16px; }
.rmList { list-style:none; margin:0; padding:0; columns:2; column-gap:26px; }
@media (max-width:560px){ .rmList{ columns:1; } }
.rmList li { position:relative; padding:7px 0 7px 18px; font-size:13.5px; line-height:1.5;
color:var(--ink-2); break-inside:avoid; }
.rmList li::before { content:''; position:absolute; left:0; top:14px; width:6px; height:6px;
border-radius:50%; background:var(--p-300); }
.roiWork { margin-top:56px; background:linear-gradient(160deg,#0b0817,#1b1140); border-radius:24px;
padding:38px 40px 34px; position:relative; overflow:hidden; }
@media (max-width:760px){ .roiWork{ padding:26px 24px; } }
.roiWork::before { content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse 46% 60% at 92% 0%, rgba(124,44,230,.4), transparent 62%); }
.rwLabel { position:relative; display:block; font-family:var(--mono); font-size:10.5px; font-weight:700;
letter-spacing:.18em; text-transform:uppercase; color:#c9b8ff; margin-bottom:26px; }
.roiFlow { position:relative; display:flex; align-items:stretch; flex-wrap:wrap; gap:14px; }
.rfStep { flex:1 1 150px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
border-radius:16px; padding:18px 20px; transition:background .3s, border-color .3s, transform .35s var(--ease); }
.rfStep:hover { transform:translateY(-4px); background:rgba(255,255,255,.09); border-color:rgba(201,184,255,.4); }
.rfK { display:block; font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
color:rgba(255,255,255,.5); margin-bottom:10px; }
.rfV { display:block; font-family:var(--sans); font-weight:800; font-size:clamp(24px,2.6vw,32px);
letter-spacing:-.038em; color:#fff; line-height:1; }
.rfV i { display:block; font-style:normal; font-size:12px; font-weight:500; letter-spacing:0;
color:rgba(255,255,255,.56); margin-top:9px; }
.rfNow { background:rgba(255,255,255,.09); }
.rfWin { background:linear-gradient(150deg, rgba(124,44,230,.3), rgba(88,36,197,.18));
border-color:rgba(201,184,255,.5); }
.rfWin .rfV { color:#e8dcff; }
.rfOp { align-self:center; font-family:var(--sans); font-weight:700; font-size:19px; color:rgba(255,255,255,.42); }
.rfArrow { align-self:center; color:#c9b8ff; display:flex; }
.rfArrow svg { width:26px; height:26px; }
@media (max-width:760px){ .rfOp, .rfArrow{ display:none; } .rfStep{ flex:1 1 100%; } }
.rwNote { position:relative; margin:26px 0 0; font-size:14.5px; line-height:1.68;
color:rgba(255,255,255,.7); max-width:74ch; }
.roiFormula { margin:34px 0 0; padding:26px 30px; border:1px solid var(--p-200); border-radius:18px;
background:linear-gradient(120deg, var(--p-50), #fff); }
.roiFormula figcaption { font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.18em;
text-transform:uppercase; color:var(--violet); margin-bottom:12px; }
.roiFormula p { margin:0; font-family:var(--sans); font-weight:600; font-size:clamp(15px,1.7vw,19px);
line-height:1.6; letter-spacing:-.02em; color:var(--ink); }
.roiFormula span { color:var(--violet); font-weight:800; margin:0 4px; }
.roiFormula .minus { color:#9c3409; }
/* ==========================================================
When not to build — verdict split (light)
========================================================== */
.wnSec { position:relative; overflow:hidden; background:linear-gradient(180deg,#fbfaff,#f5f2fc); padding:100px 0 104px; }
@media (max-width:760px){ .wnSec{ padding:70px 0 74px; } }
.wnSec::before { content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse 48% 46% at 4% 4%, rgba(156,52,9,.06), transparent 62%); }
.wnSec > .container { position:relative; z-index:1; }
.wnGrid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
@media (max-width:940px){ .wnGrid{ grid-template-columns:1fr; gap:32px; } }
.wnTag { display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.2em;
text-transform:uppercase; color:#9c3409; padding:7px 14px; border-radius:100px;
background:rgba(156,52,9,.08); border:1px solid rgba(156,52,9,.2); margin-bottom:20px; }
.wnTitle { font-family:var(--sans); font-weight:700; font-size:clamp(30px,4.2vw,52px); line-height:1.05;
letter-spacing:-.038em; color:var(--ink); margin:0 0 16px; }
.wnTitle em { font-style:normal; color:#9c3409; }
.wnLede { font-size:16.5px; line-height:1.68; color:var(--ink-soft); margin:0 0 28px; max-width:52ch; }
.wnQuote { position:relative; padding:22px 24px 22px 52px; border-radius:16px; background:#fff;
border:1px solid var(--line); box-shadow:0 18px 44px -34px rgba(70,30,160,.3); }
.wnQMark { position:absolute; left:20px; top:16px; font-family:var(--serif); font-size:46px; line-height:1;
color:var(--p-200); }
.wnQuote p { margin:0; font-size:16px; line-height:1.6; color:var(--ink-2); }
.wnQuote strong { color:var(--ink); font-weight:700; }
.wnClose { margin:24px 0 0; font-size:15.5px; line-height:1.7; color:var(--ink-soft); max-width:56ch; }
.wnList { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;
background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden;
box-shadow:0 28px 68px -46px rgba(70,30,160,.3); }
.wnItem { display:grid; grid-template-columns:34px 1fr; gap:16px; align-items:start;
padding:20px 24px; border-top:1px solid var(--line-soft); transition:background .28s; }
.wnItem:first-child { border-top:none; }
.wnItem:hover { background:#fffaf7; }
.wnX { width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center;
background:rgba(156,52,9,.09); color:#9c3409; transition:transform .32s var(--ease); }
.wnX svg { width:16px; height:16px; }
.wnItem:hover .wnX { transform:scale(1.1) rotate(90deg); }
.wnItemBody b { display:block; font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:-.022em;
color:var(--ink); margin-bottom:5px; }
.wnItemBody span { display:block; font-size:14px; line-height:1.6; color:var(--ink-soft); }
/* ==========================================================
Why us — credentials masthead
========================================================== */
.whySec { background:#fff; padding:100px 0 104px; }
@media (max-width:760px){ .whySec{ padding:70px 0 74px; } }
.whyHead { max-width:840px; margin-bottom:46px; }
.whyTag { display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.2em;
text-transform:uppercase; color:var(--violet); padding:7px 14px; border-radius:100px;
background:rgba(124,44,230,.09); border:1px solid rgba(124,44,230,.2); margin-bottom:20px; }
.whyTitle { font-family:var(--sans); font-weight:700; font-size:clamp(30px,4.3vw,54px); line-height:1.05;
letter-spacing:-.038em; color:var(--ink); margin:0 0 16px; }
.whyTitle em { font-style:normal; background:linear-gradient(96deg,#7c2ce6,#5824c5);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.whyLede { font-size:17px; line-height:1.68; color:var(--ink-soft); margin:0; max-width:64ch; }
.whyFigures { display:grid; grid-template-columns:repeat(4,1fr); gap:0;
border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
@media (max-width:820px){ .whyFigures{ grid-template-columns:1fr 1fr; } }
.wfItem { padding:30px 26px; border-left:1px solid var(--line); }
.wfItem:first-child { border-left:none; padding-left:0; }
@media (max-width:820px){ .wfItem:nth-child(odd){ border-left:none; padding-left:0; }
.wfItem:nth-child(n+3){ border-top:1px solid var(--line); } }
.wfN { display:block; font-family:var(--sans); font-weight:800; font-size:clamp(34px,4vw,52px);
line-height:.94; letter-spacing:-.045em; color:var(--ink); }
.wfN i { font-style:normal; font-size:.44em; color:var(--violet); margin-left:2px; }
.wfL { display:block; font-size:13px; line-height:1.45; color:var(--ink-soft); margin-top:12px; }
.whyBand { display:flex; align-items:center; flex-wrap:wrap; gap:16px 22px; margin:34px 0 46px;
padding:22px 26px; border-radius:18px; background:linear-gradient(120deg,var(--p-50),#fff);
border:1px solid var(--p-100); }
.wbLabel { font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; color:var(--violet); }
.wbTags { display:flex; flex-wrap:wrap; gap:7px; }
.wbTags span { font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--p-800);
padding:6px 12px; border-radius:8px; background:#fff; border:1px solid var(--p-200); }
.wbGeo { margin-left:auto; display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-soft); }
@media (max-width:940px){ .wbGeo{ margin-left:0; } }
.wbDot { width:8px; height:8px; border-radius:50%; background:var(--green-600);
box-shadow:0 0 0 3px rgba(15,107,49,.18); }
.whyPoints { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:940px){ .whyPoints{ grid-template-columns:1fr; } }
.wpItem { padding:28px 26px 26px; border-radius:20px; background:var(--surface-2);
border:1px solid var(--line); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s, background .3s; }
.wpItem:hover { transform:translateY(-5px); background:#fff; border-color:var(--p-200);
box-shadow:0 28px 64px -40px var(--purple-glow); }
.wpIc { display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:14px;
background:#fff; border:1px solid var(--line); color:var(--violet); margin-bottom:20px;
transition:transform .4s var(--ease), background .3s, color .3s; }
.wpIc svg { width:22px; height:22px; }
.wpItem:hover .wpIc { transform:scale(1.08) rotate(-6deg); background:linear-gradient(150deg,#7c2ce6,#5824c5); color:#fff; }
.wpItem h3 { font-family:var(--sans); font-weight:700; font-size:17.5px; letter-spacing:-.026em;
color:var(--ink); margin:0 0 10px; line-height:1.26; }
.wpItem p { font-size:14.5px; line-height:1.64; color:var(--ink-soft); margin:0; }
/* ==========================================================
Buyer checklist — numbered ledger
========================================================== */
.askSec { position:relative; overflow:hidden; background:#07060d; padding:100px 0 104px; }
@media (max-width:760px){ .askSec{ padding:70px 0 74px; } }
.askSec::before { content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse 54% 50% at 96% 0%, rgba(124,44,230,.28), transparent 62%),
radial-gradient(ellipse 44% 42% at 0% 100%, rgba(88,36,197,.22), transparent 62%); }
.askSec > .container { position:relative; z-index:1; }
.askHead { max-width:820px; margin-bottom:44px; }
.askTag { display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.2em;
text-transform:uppercase; color:#d6c6ff; padding:7px 14px; border-radius:100px;
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); margin-bottom:20px; }
.askTitle { font-family:var(--sans); font-weight:700; font-size:clamp(30px,4.3vw,54px); line-height:1.05;
letter-spacing:-.038em; color:#fff; margin:0; }
.askTitle em { font-style:normal; background:linear-gradient(96deg,#c9b8ff,#7c2ce6);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.askLedger { list-style:none; margin:0; padding:0; counter-reset:none;
border-top:1px solid rgba(255,255,255,.12); }
.askRow { display:grid; grid-template-columns:82px 1fr; gap:26px; align-items:baseline;
padding:26px 8px 26px 0; border-bottom:1px solid rgba(255,255,255,.1);
transition:background .3s, padding-left .35s var(--ease); }
@media (max-width:640px){ .askRow{ grid-template-columns:52px 1fr; gap:16px; padding:20px 0; } }
.askRow:hover { background:rgba(255,255,255,.035); padding-left:14px; }
.arN { font-family:var(--sans); font-weight:800; font-size:clamp(26px,3vw,38px); line-height:1;
letter-spacing:-.04em; color:rgba(255,255,255,.46); transition:color .32s; }
.askRow:hover .arN { color:#c9b8ff; }
.arQ { font-family:var(--sans); font-weight:700; font-size:clamp(17px,2vw,21px); letter-spacing:-.028em;
color:#fff; margin:0 0 8px; line-height:1.26; }
.arA { font-size:14.5px; line-height:1.66; color:rgba(255,255,255,.66); margin:0; max-width:74ch; }
.askKicker { margin:38px 0 0; font-size:16.5px; line-height:1.6; color:rgba(255,255,255,.7);
padding-left:20px; border-left:2px solid var(--violet); }
.askKicker strong { color:#fff; font-weight:700; }
/* ==========================================================
THEME UNIFICATION — departments language, light-first
One token set for eyebrow / title / lede / surface / motion
========================================================== */
:root {
--sec-pad: 100px;
--ease-sleek: cubic-bezier(.22,1,.36,1);
--surf-light: linear-gradient(180deg,#fbfaff 0%,#f5f2fc 100%);
--edge: rgba(12,10,31,.08);
}
/* --- shared eyebrow pill (light) --- */
.svcTagL, .askTagL, .uaeTag {
display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:700;
letter-spacing:.2em; text-transform:uppercase; color:var(--violet);
padding:7px 14px; border-radius:100px;
background:rgba(124,44,230,.08); border:1px solid rgba(124,44,230,.2);
margin-bottom:20px;
}
/* ==========================================================
SERVICES → light, departments-grade
========================================================== */
.seoSec#services { background:var(--surf-light) !important; padding:var(--sec-pad) 0 104px; }
.seoSec#services::before {
background:radial-gradient(ellipse 56% 52% at 6% -6%, rgba(124,44,230,.10), transparent 62%),
radial-gradient(ellipse 48% 46% at 100% 104%, rgba(124,77,238,.08), transparent 62%) !important;
}
.seoSec#services::after { display:none; }
.seoSec#services .section-head-center { text-align:left; margin-left:0; max-width:900px; }
.seoSec#services .section-tag { justify-content:flex-start !important; color:var(--violet); }
.seoSec#services .section-tag::before { background:var(--violet); }
.seoSec#services .section-h2 {
color:var(--ink); font-family:var(--sans); font-weight:700;
font-size:clamp(32px,4.6vw,58px); line-height:1.04; letter-spacing:-.038em;
margin-left:0; margin-right:0; max-width:26ch;
}
.seoSec#services .section-lead { color:var(--ink-soft); margin-left:0; margin-right:0; max-width:66ch; }
.seoSec#services .seoOutro { color:var(--ink-2); }
.seoSec#services .seoOutro strong { color:var(--ink); }
/* rows: light glass, two-up */
.svcList { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
@media (max-width:880px){ .svcList{ grid-template-columns:1fr; } }
.seoSec#services .svcRow {
background:#fff !important; border:1px solid var(--line) !important; border-radius:18px !important;
box-shadow:0 18px 44px -38px rgba(70,30,160,.34);
transition:transform .4s var(--ease-sleek), box-shadow .4s var(--ease-sleek), border-color .3s;
}
.seoSec#services .svcRow::before { background:linear-gradient(180deg,#b49bff,#7c4dee) !important; }
.seoSec#services .svcRow:hover {
background:#fff !important; border-color:var(--p-200) !important;
transform:translateY(-4px); box-shadow:0 30px 66px -40px var(--purple-glow);
}
.seoSec#services .svcRow[open] {
background:linear-gradient(180deg,#fff,var(--p-50)) !important;
border-color:var(--p-300) !important; box-shadow:0 28px 64px -40px var(--purple-glow) !important;
}
.seoSec#services .svcRowTxt strong { color:var(--ink); }
.seoSec#services .svcRowTxt em { color:var(--ink-soft); }
.seoSec#services .svcRow > p { color:var(--ink-soft); }
.seoSec#services .svcRow > p strong { color:var(--ink); }
.seoSec#services .svcRowChev { color:var(--ink-mute); }
.seoSec#services .svcRow[open] .svcRowChev { color:var(--violet); }
.seoSec#services .svcRowN {
background:var(--surface-2) !important; border:1px solid var(--line) !important; color:var(--ink-2) !important;
}
.seoSec#services .svcRowN.n-vi { color:var(--violet) !important; border-color:var(--p-200) !important; }
.seoSec#services .svcRowN.n-bl { color:var(--blue-600) !important; border-color:rgba(58,114,224,.28) !important; }
.seoSec#services .svcRowN.n-te { color:#06695e !important; border-color:rgba(15,181,163,.28) !important; }
.seoSec#services .svcRowN.n-am { color:#8a5d0a !important; border-color:rgba(217,158,43,.3) !important; }
.seoSec#services .svcRowN.n-gr { color:var(--green-600) !important; border-color:rgba(18,146,78,.28) !important; }
.seoSec#services .svcRow[open] .svcRowN {
background:linear-gradient(150deg,#7c2ce6,#5824c5) !important; color:#fff !important; border-color:transparent !important;
}
/* ==========================================================
BUYER CHECKLIST → light ledger
========================================================== */
.askSec { background:#fff !important; }
.askSec::before {
background:radial-gradient(ellipse 50% 46% at 96% 0%, rgba(124,44,230,.09), transparent 62%),
radial-gradient(ellipse 42% 40% at 0% 100%, rgba(124,77,238,.07), transparent 62%) !important;
}
.askTag { color:var(--violet) !important; background:rgba(124,44,230,.08) !important; border-color:rgba(124,44,230,.2) !important; }
.askTitle { color:var(--ink) !important; }
.askTitle em { background-image:linear-gradient(96deg,#7c2ce6,#5824c5) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:transparent !important; }
.askLedger { border-top-color:var(--line) !important; }
.askRow { border-bottom-color:var(--line-soft) !important; }
.askRow:hover { background:var(--surface-2) !important; }
.arN { color:var(--line-strong) !important; }
.askRow:hover .arN { color:var(--violet) !important; }
.arQ { color:var(--ink) !important; }
.arA { color:var(--ink-soft) !important; }
.askKicker { color:var(--ink-2) !important; }
.askKicker strong { color:var(--ink) !important; }
/* ==========================================================
UAE privacy — three-column governance block (inside dark sec)
========================================================== */
.uaeBlock { margin-top:64px; padding-top:52px; border-top:1px solid rgba(255,255,255,.12); }
.uaeHead { max-width:70ch; margin-bottom:38px; }
.uaeBlock .uaeTag {
color:#d6c6ff; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16);
}
.uaeTitle { font-family:var(--sans); font-weight:700; font-size:clamp(25px,3vw,38px);
line-height:1.08; letter-spacing:-.034em; color:#fff; margin:0 0 16px; }
.uaeTitle em { font-style:normal; background:linear-gradient(96deg,#c9b8ff,#7c2ce6);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.uaeLede { font-size:16px; line-height:1.68; color:rgba(255,255,255,.7); margin:0; max-width:64ch; }
.uaeCols { display:grid; grid-template-columns:repeat(3,1fr); gap:0;
border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); }
@media (max-width:940px){ .uaeCols{ grid-template-columns:1fr; } }
.uaeCol { padding:30px 30px 32px; border-left:1px solid rgba(255,255,255,.1);
transition:background .32s var(--ease-sleek); }
.uaeCol:first-child { border-left:none; padding-left:0; }
@media (max-width:940px){
.uaeCol { border-left:none; padding-left:0; padding-right:0; border-top:1px solid rgba(255,255,255,.1); }
.uaeCol:first-child { border-top:none; }
}
.uaeCol:hover { background:rgba(255,255,255,.03); }
.ucN { display:block; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.16em;
color:#c9b8ff; margin-bottom:14px; }
.uaeCol h4 { font-family:var(--sans); font-weight:700; font-size:17px; letter-spacing:-.026em;
color:#fff; margin:0 0 11px; line-height:1.24; }
.uaeCol p { font-size:14px; line-height:1.66; color:rgba(255,255,255,.66); margin:0; }
.ucDeploy { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.ucDeploy li { font-size:12px; font-weight:600; color:#e5dcff; padding:6px 11px; border-radius:8px;
background:rgba(180,155,255,.13); border:1px solid rgba(180,155,255,.26); }
.ucQs { list-style:none; margin:0; padding:0; }
.ucQs li { position:relative; padding:9px 0 9px 22px; font-size:13.5px; line-height:1.5;
color:rgba(255,255,255,.7); border-bottom:1px solid rgba(255,255,255,.06); transition:color .26s; }
.ucQs li:last-child { border-bottom:none; }
.ucQs li::before { content:''; position:absolute; left:2px; top:15px; width:8px; height:8px;
border-radius:50%; border:1px solid rgba(180,155,255,.6); transition:background .26s; }
.ucQs li:hover { color:#fff; }
.ucQs li:hover::before { background:#b49bff; }
.uaeNote { display:flex; align-items:flex-start; gap:13px; margin:34px 0 0; padding:18px 22px;
border-radius:14px; background:rgba(124,44,230,.12); border:1px solid rgba(180,155,255,.28);
font-size:15px; line-height:1.6; font-weight:600; color:#e5dcff; }
.uaeNoteIc { flex:0 0 auto; width:24px; height:24px; color:#c9b8ff; }
.uaeNoteIc svg { width:24px; height:24px; }
/* ==========================================================
GLOBAL POLISH — even rhythm, sleek motion, no dated edges
========================================================== */
section { scroll-margin-top:88px; }
img { image-rendering:auto; }
/* consistent reveal easing everywhere */
.reveal { transition:opacity .78s var(--ease-sleek), transform .78s var(--ease-sleek); }
/* focus visibility (a11y) */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
outline:2px solid var(--violet); outline-offset:3px; border-radius:6px;
}
/* kill any legacy serif-italic accents left over from older revisions */
.section-h2 em, .sol-title em { font-style:normal; }
@media (prefers-reduced-motion: reduce) {
.reveal { transition:none !important; }
}
/* checklist numerals: readable on white (was 1.51:1) */
.arN { color: var(--ink-mute) !important; }
.askRow:hover .arN { color: var(--violet) !important; }
/* ==========================================================
object-fit for images converted from .
The component fitted internally; plain ![]()
defaults to
'fill', which stretches whenever both axes are constrained.
Photos → cover (crop, never distort). Logos → contain.
========================================================== */
.seoIndImg, .c2ph-img, .t2-avatar, .proof-hero-img,
.indShot img, .sol-shot img, .dvFrame img {
object-fit: cover; object-position: center;
}
/* brand marks must never be cropped */
.hcRow img, .heroBuiltMarks img, .logo-img { object-fit: contain; object-position: center; }
/* transparent artwork keeps its own silhouette */
.heroAstro { object-fit: contain; object-position: center bottom; }
/* portrait faces: bias to the upper third so heads are not cropped */
.t2-avatar { object-position: 50% 28%; }
/* ==========================================================
Why us — organised two-column masthead (rework)
========================================================== */
.whyGrid { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:60px; align-items:start; }
@media (max-width:1000px){ .whyGrid{ grid-template-columns:1fr; gap:38px; } }
.whyHead { max-width:none; margin-bottom:36px; }
.whyLede { max-width:46ch; }
/* figures: 2x2 quiet grid, no full-bleed rules */
.whyFigures { display:grid !important; grid-template-columns:1fr 1fr; gap:0 !important;
border-top:1px solid var(--line) !important; border-bottom:none !important; margin:0; }
.whyFigures .wfItem { padding:22px 24px 22px 0 !important; border-left:none !important;
border-bottom:1px solid var(--line); margin:0; }
.whyFigures .wfItem:nth-child(even){ padding-left:26px !important; border-left:1px solid var(--line) !important; }
.whyFigures .wfItem:nth-last-child(-n+2){ border-bottom:none; }
.whyFigures dt.wfN { font-size:clamp(30px,3.2vw,42px) !important; margin:0; }
.whyFigures dd.wfL { margin:8px 0 0; font-size:12.5px; max-width:24ch; }
/* right panel holds the three commitments as one object */
.whyPanel { background:var(--surface-2); border:1px solid var(--line); border-radius:22px;
padding:30px 32px 12px; box-shadow:0 28px 68px -50px rgba(70,30,160,.3); }
@media (max-width:640px){ .whyPanel{ padding:24px 22px 8px; } }
.wpTag { display:block; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; color:var(--violet); margin-bottom:20px; }
.whyPoints { display:block !important; grid-template-columns:none !important; list-style:none; margin:0; padding:0; }
.whyPoints .wpItem { display:grid; grid-template-columns:46px 1fr; gap:18px; align-items:start;
padding:22px 0 !important; margin:0; border-radius:0 !important; background:transparent !important;
border:none !important; border-top:1px solid var(--line) !important; box-shadow:none !important;
transform:none !important; transition:none; }
.whyPoints .wpItem:first-child { border-top:none !important; padding-top:0 !important; }
.whyPoints .wpIc { width:46px; height:46px; margin:0 !important; background:#fff; border:1px solid var(--line);
transition:transform .35s var(--ease), background .3s, color .3s; }
.whyPoints .wpItem:hover .wpIc { transform:scale(1.06) rotate(-6deg);
background:linear-gradient(150deg,#7c2ce6,#5824c5); color:#fff; }
.whyPoints .wpBody h3 { font-size:17px !important; margin:2px 0 8px !important; }
.whyPoints .wpBody p { font-size:14.5px; line-height:1.62; color:var(--ink-soft); margin:0; }
/* compliance rail sits under the grid as one aligned band */
.whyBand { margin:48px 0 0 !important; align-items:flex-end !important; }
.wbCol { display:flex; flex-direction:column; gap:12px; }
/* ==========================================================
When not to build — dark stage, corner auras, point-led
========================================================== */
.wnSec { position:relative; overflow:hidden; background:#05040b !important; padding:104px 0 108px !important; }
@media (max-width:760px){ .wnSec{ padding:74px 0 78px !important; } }
.wnSec::before, .wnSec::after { content:none !important; }
/* bright bleeding corner auras */
.wnAura { position:absolute; border-radius:50%; pointer-events:none; filter:blur(70px); }
.wnA1 { width:640px; height:640px; top:-260px; left:-200px;
background:radial-gradient(circle,rgba(124,44,230,.60),rgba(124,44,230,0) 68%);
animation:wnDrift 15s ease-in-out infinite alternate; }
.wnA2 { width:560px; height:560px; bottom:-240px; right:-160px;
background:radial-gradient(circle,rgba(88,36,197,.55),rgba(88,36,197,0) 68%);
animation:wnDrift 19s ease-in-out infinite alternate-reverse; }
.wnA3 { width:460px; height:460px; top:38%; left:52%;
background:radial-gradient(circle,rgba(180,155,255,.28),rgba(180,155,255,0) 70%);
animation:wnPulse 11s ease-in-out infinite; }
@keyframes wnDrift { 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(60px,44px) scale(1.14);} }
@keyframes wnPulse { 0%,100%{opacity:.5; transform:scale(1);} 50%{opacity:.9; transform:scale(1.12);} }
.wnSec > .container { position:relative; z-index:1; }
.wnHead { max-width:860px; margin-bottom:44px; }
.wnTag { color:#e0d2ff !important; background:rgba(255,255,255,.08) !important;
border-color:rgba(255,255,255,.18) !important; }
.wnTitle { color:#fff !important; margin-bottom:14px !important; }
.wnTitle em { font-style:normal; background-image:linear-gradient(96deg,#c9b8ff,#7c2ce6) !important;
-webkit-background-clip:text !important; background-clip:text !important;
-webkit-text-fill-color:transparent !important; color:transparent !important; }
.wnLede { color:rgba(255,255,255,.66) !important; font-size:17px !important; margin:0 !important; }
/* the points are the hero: 3-up glass grid */
.wnList { display:grid !important; grid-template-columns:repeat(3,1fr); gap:16px !important;
background:none !important; border:none !important; border-radius:0 !important;
box-shadow:none !important; overflow:visible !important; }
@media (max-width:940px){ .wnList{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .wnList{ grid-template-columns:1fr; } }
.wnItem { display:block !important; position:relative; overflow:hidden;
padding:26px 24px 24px !important; border:1px solid rgba(255,255,255,.10) !important;
border-radius:20px; background:rgba(255,255,255,.045) !important;
transition:transform .45s var(--ease), background .35s, border-color .35s, box-shadow .45s var(--ease); }
.wnItem:hover { transform:translateY(-6px); background:rgba(255,255,255,.075) !important;
border-color:rgba(201,184,255,.46) !important; box-shadow:0 32px 70px -34px rgba(124,44,230,.6); }
.wnSheen { position:absolute; inset:-1px; border-radius:20px; pointer-events:none;
background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.15) 50%,transparent 62%);
transform:translateX(-130%); transition:transform .9s var(--ease); }
.wnItem:hover .wnSheen { transform:translateX(130%); }
.wnN { display:block; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.16em;
color:rgba(255,255,255,.62); margin-bottom:16px; transition:color .32s; }
.wnItem:hover .wnN { color:#c9b8ff; }
.wnK { font-family:var(--sans); font-weight:700; font-size:18.5px; letter-spacing:-.026em; color:#fff;
margin:0 0 9px; line-height:1.24; }
.wnT { font-size:14.5px; line-height:1.62; color:rgba(255,255,255,.68); margin:0; }
/* tone accents on the top edge */
.wnItem::after { content:''; position:absolute; left:24px; right:24px; top:0; height:2px; border-radius:2px;
opacity:0; transition:opacity .35s; }
.wnItem:hover::after { opacity:1; }
.wt-vi::after { background:linear-gradient(90deg,#c9b8ff,#7c2ce6); }
.wt-bl::after { background:linear-gradient(90deg,#9fc2ff,#3a72e0); }
.wt-te::after { background:linear-gradient(90deg,#7fe3d6,#0a7d71); }
.wt-am::after { background:linear-gradient(90deg,#ffcf87,#d99e2b); }
.wt-ro::after { background:linear-gradient(90deg,#ffb3a0,#e2563f); }
.wt-gr::after { background:linear-gradient(90deg,#90e9b4,#0d6f3b); }
.wnClose { margin:44px 0 0 !important; max-width:78ch !important; font-size:16.5px !important;
line-height:1.66 !important; color:rgba(255,255,255,.66) !important;
padding-left:20px; border-left:2px solid var(--violet); }
.wnClose strong { color:#fff; font-weight:700; }
@media (prefers-reduced-motion:reduce){ .wnAura{ animation:none !important; } }
/* failsafe — content must never stay hidden */
@keyframes revealFailsafe { to { opacity:1; transform:none; } }
html.js-anim .reveal { animation: revealFailsafe .5s var(--ease-sleek) 3s forwards; }
html.js-anim .reveal.in, html.js-anim .reveal.revealed { animation: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity:1 !important; transform:none !important; animation:none !important; }
}
/* ==========================================================
Reveal contract — visible by default; hidden ONLY when the
renderer proves it can run frames (html.js-anim set in rAF).
A running transition outranks author !important, so the
hidden state must never exist in frameless contexts.
========================================================== */
.reveal { opacity: 1; transform: none; }
html.js-anim .reveal {
opacity: 0; transform: translateY(24px);
transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
html.js-anim .reveal.in { opacity: 1; transform: none; }
html.js-anim .reveal.d1 { transition-delay: .07s; }
html.js-anim .reveal.d2 { transition-delay: .14s; }
html.js-anim .reveal.d3 { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
html.js-anim .reveal { opacity: 1; transform: none; transition: none; }
}
/* ==========================================================
Frosted glass restored (was stripped on a wrong theory)
========================================================== */
.hv-chip, .hvPill, .heroBuilt, .whyPanel, .intTab.isOn, .intStage,
.slBody, .suCard, .t2-slider, .modal, .nav, .eyebrow, .whyDTag,
.secTag, .askTag, .wnQuote, .deptCard, .tp-comp-tags span {
-webkit-backdrop-filter: blur(14px) saturate(1.15);
backdrop-filter: blur(14px) saturate(1.15);
}
.nav { -webkit-backdrop-filter: saturate(1.2) blur(18px); backdrop-filter: saturate(1.2) blur(18px); }
/* ==========================================================
Hero awards — Clutch rating + badges
========================================================== */
.heroAwards { display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-top:46px; }
@media (max-width:760px){ .heroAwards{ gap:18px; margin-top:34px; } }
.haRating { display:flex; align-items:center; gap:14px; }
.haRoundel { height:46px; width:auto; display:block; opacity:.95; }
@media (max-width:760px){ .haRoundel{ height:38px; } }
.haRateBody { display:flex; flex-direction:column; gap:3px; }
.haStars { font-size:15px; letter-spacing:.16em; color:#f5a623; line-height:1; }
.haRateTxt { font-size:14px; font-weight:500; color:rgba(255,255,255,.82); letter-spacing:-.01em; }
.haSep { width:1px; height:52px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.22),transparent); }
@media (max-width:760px){ .haSep{ display:none; } }
.haBadges { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.haBadges img { height:76px; width:auto; display:block;
filter:drop-shadow(0 8px 22px rgba(0,0,0,.35));
transition:transform .4s cubic-bezier(.22,1,.36,1); }
@media (max-width:760px){ .haBadges img{ height:60px; } }
.haBadges img:hover { transform:translateY(-4px) scale(1.03); }
/* wall now carries 6 marks — allow a graceful wrap */
.hcRow { flex-wrap:wrap; row-gap:22px; }
@media (max-width:1100px){ .hcRow .hcSep:nth-of-type(3){ display:none; } }
/* ==========================================================
Client wall — light panel, full-colour marks (restored).
Per-brand caps from real aspect ratios so every mark lands
on the same optical area (~6400px², square marks capped 78px).
========================================================== */
.hcPanel { display:flex; align-items:center; justify-content:space-between; gap:0;
background:#f1f1f3; border-radius:22px; padding:24px 30px; flex-wrap:wrap; row-gap:18px;
box-shadow:0 26px 60px -40px rgba(0,0,0,.55); }
@media (max-width:900px){ .hcPanel{ padding:22px 18px; justify-content:center; gap:10px 24px; } }
.hcPanel .hcItem { display:flex; align-items:center; justify-content:center; flex:1 1 auto; min-width:0; padding:0 6px; }
.hcPanel .hcItem img { width:auto; height:auto; object-fit:contain; display:block;
transition:transform .4s cubic-bezier(.22,1,.36,1); }
.hcPanel .hcItem:hover img { transform:translateY(-3px); }
.hcPanel .hcSep { flex:0 0 1px; width:1px; align-self:stretch; min-height:66px; background:rgba(20,26,46,.13); }
@media (max-width:900px){ .hcPanel .hcSep{ display:none; } }
.hcPanel .hc-voda img { max-width:161px; max-height:40px; }
.hcPanel .hc-cpax img { max-width:144px; max-height:44px; }
.hcPanel .hc-aster img { max-width:78px; max-height:78px; }
.hcPanel .hc-tna img { max-width:142px; max-height:45px; }
.hcPanel .hc-greyt img { max-width:105px; max-height:61px; }
.hcPanel .hc-ddc img { max-width:113px; max-height:57px; }
@media (max-width:760px){
.hcPanel .hc-voda img { max-width:126px; max-height:31px; }
.hcPanel .hc-cpax img { max-width:112px; max-height:34px; }
.hcPanel .hc-aster img { max-width:61px; max-height:61px; }
.hcPanel .hc-tna img { max-width:111px; max-height:35px; }
.hcPanel .hc-greyt img { max-width:82px; max-height:48px; }
.hcPanel .hc-ddc img { max-width:88px; max-height:44px; }
}
/* ==========================================================
Client wall — single-row contract (overrides stale dark-row
rules; items size to content so space-between sets rhythm)
========================================================== */
.heroDark .hcPanel .hcItem, .hcPanel .hcItem {
flex: 0 0 auto !important;
padding: 0 4px !important;
min-width: 0;
}
.hcPanel { padding: 24px 20px !important; flex-wrap: nowrap !important; }
@media (max-width: 900px) {
.hcPanel { flex-wrap: wrap !important; padding: 22px 16px !important; justify-content: center; }
.heroDark .hcPanel .hcItem, .hcPanel .hcItem { flex: 0 0 auto !important; }
}
/* greytHR v2: re-normalised to sibling optical area */
.hcPanel .hc-greyt img { max-width:108px !important; max-height:60px !important; }
/* ==========================================================
Entry animations — same inversion as .reveal.
Visible is the default; the from-state exists only when the
renderer proves it can run frames (html.js-anim, set in rAF).
animation-fill-mode:both / an in-flight transition on a never-
started timeline would otherwise pin these at opacity 0.
========================================================== */
.indPanel.isOn { opacity: 1; transform: none; }
html.js-anim .indPanel.isOn { opacity:1; transform:none; }
.intPane { opacity: 1; transform: none; }
html.js-anim .intPane { animation: intIn .5s cubic-bezier(.22,1,.36,1) both; }
/* autonomy ladder fills: full by default, grow only under frames */
.cmpBar::after { transform: scaleX(1); transition: none; }
html.js-anim .cmpBar::after { transform: scaleX(0); transition: transform .9s cubic-bezier(.22,1,.36,1) .15s; }
html.js-anim .cmpRow.in .cmpBar::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
html.js-anim .indPanel.isOn,
html.js-anim .intPane { animation: none; opacity: 1; transform: none; }
html.js-anim .cmpBar::after { transform: scaleX(1); transition: none; }
}
/* greytHR v3: cap solved for VISIBLE ink area, not box area */
.hcPanel .hc-greyt img { max-width:206px !important; max-height:98px !important; }
/* ungated defaults must cancel the animation itself — setting opacity alone
loses to animation-fill-mode:both on a never-started timeline */
.indPanel.isOn, .intPane { animation: none !important; }
html.js-anim .indPanel.isOn { animation: indIn .55s cubic-bezier(.22,1,.36,1) both !important; }
html.js-anim .intPane { animation: intIn .5s cubic-bezier(.22,1,.36,1) both !important; }
/* single-row refit after greytHR re-normalisation (scale 0.905) */
.hcPanel .hc-voda img { max-width:146px !important; max-height:36px !important; }
.hcPanel .hc-cpax img { max-width:130px !important; max-height:40px !important; }
.hcPanel .hc-aster img { max-width:71px !important; max-height:71px !important; }
.hcPanel .hc-tna img { max-width:129px !important; max-height:41px !important; }
.hcPanel .hc-greyt img { max-width:186px !important; max-height:89px !important; }
.hcPanel .hc-ddc img { max-width:102px !important; max-height:52px !important; }
/* ==========================================================
Client wall — one optical height band (supersedes the
area-based caps above; area sizing over-weighted greytHR)
========================================================== */
.hcPanel .hc-voda img { max-width:161px !important; max-height:40px !important; }
.hcPanel .hc-cpax img { max-width:131px !important; max-height:40px !important; }
.hcPanel .hc-aster img { max-width:52px !important; max-height:52px !important; }
.hcPanel .hc-tna img { max-width:126px !important; max-height:40px !important; }
.hcPanel .hc-greyt img { max-width:84px !important; max-height:40px !important; }
.hcPanel .hc-ddc img { max-width:79px !important; max-height:40px !important; }
.hcPanel .hcItem img { width:auto; height:auto; object-fit:contain; }
/* Aster badge +50% (circular mark carries the extra weight well) */
.hcPanel .hc-aster img { max-width:78px !important; max-height:78px !important; }
/* Portrait phone shot: contain, not cover — a 0.53-ratio device cropped to a
460px landscape box reads as an extreme zoom. At h=460 the whole handset is
~242px wide, so it fits the card with room to breathe. */
.sol-gallery.build-gallery .sol-shot-img.sol-shot-fit {
object-fit: contain;
padding: 26px 20px;
background: linear-gradient(180deg, #214225 0%, #335638 25%, #496e4d 50%, #5f8764 75%, #739d78 100%);
}
/* ==========================================================
Provenance / maintenance block — visible counterpart to the
reviewedBy + lastReviewed schema (schema must mirror content)
========================================================== */
.eeat { background:#fff; padding:0 0 84px; }
.eeatBox { border:1px solid var(--line); border-radius:22px; padding:34px 36px;
background:linear-gradient(180deg,#fbfaff,#f6f3fc); }
@media (max-width:640px){ .eeatBox{ padding:24px 22px; } }
.eeatH { font-family:var(--sans); font-weight:700; font-size:clamp(19px,2.1vw,24px); letter-spacing:-.028em;
color:var(--ink); margin:0 0 22px; }
.eeatMeta { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:0 0 24px; padding:0 0 22px;
border-bottom:1px solid var(--line); }
@media (max-width:760px){ .eeatMeta{ grid-template-columns:1fr; gap:14px; } }
.eeatMeta dt { font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:var(--violet); margin-bottom:6px; }
.eeatMeta dd { margin:0; font-size:14.5px; font-weight:600; color:var(--ink); }
.eeatNotes { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.eeatNotes li { position:relative; padding-left:20px; font-size:13.5px; line-height:1.68; color:var(--ink-soft); }
.eeatNotes li::before { content:''; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%;
background:var(--p-300); }
.eeatNotes strong { color:var(--ink); font-weight:700; }
/* citation links inside the provenance notes */
.eeatNotes a { color:var(--p-800); font-weight:600; text-decoration:none; border-bottom:1px solid var(--p-200);
transition:border-color .25s, color .25s; }
.eeatNotes a:hover { color:var(--violet); border-bottom-color:var(--violet); }
.eeatNotes em { color:var(--ink-2); font-style:italic; }
/* ==========================================================
Executive leadership — named accountability (E-E-A-T)
========================================================== */
.ldSec { background:#fff; padding:96px 0 84px; }
@media (max-width:760px){ .ldSec{ padding:68px 0 60px; } }
.ldHead { max-width:760px; margin-bottom:52px; }
.ldTag { display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.2em;
text-transform:uppercase; color:var(--violet); padding:7px 14px; border-radius:100px;
background:rgba(124,44,230,.09); border:1px solid rgba(124,44,230,.2); margin-bottom:20px; }
.ldTitle { font-family:var(--sans); font-weight:700; font-size:clamp(30px,4.2vw,52px); line-height:1.05;
letter-spacing:-.038em; color:var(--ink); margin:0 0 16px; }
.ldTitle em { font-style:normal; background:linear-gradient(96deg,#7c2ce6,#5824c5);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.ldLede { font-size:16.5px; line-height:1.68; color:var(--ink-soft); margin:0; max-width:62ch; }
.ldGrid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:38px 24px; }
@media (max-width:1080px){ .ldGrid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:800px){ .ldGrid{ grid-template-columns:repeat(3,1fr); gap:30px 18px; } }
@media (max-width:520px){ .ldGrid{ grid-template-columns:repeat(2,1fr); } }
.ldCard { text-align:center; }
.ldRing { position:relative; display:grid; place-items:center; width:132px; height:132px;
margin:0 auto 16px; border-radius:50%; padding:0; background:none; flex:0 0 auto;
transition:transform .42s var(--ease), filter .42s var(--ease); }
/* ring drawn as its own layer so it can never clip or offset the photo */
.ldRing::before { content:''; position:absolute; inset:0; border-radius:50%; z-index:0;
background:conic-gradient(from 210deg, #7c2ce6 0deg, #7c2ce6 200deg, #ede4ff 200deg, #ede4ff 360deg); }
.ldRing::after { content:''; position:absolute; inset:5px; border-radius:50%; background:#f4f2f7; z-index:1; }
.ldCard:hover .ldRing { transform:translateY(-5px) scale(1.03); filter:drop-shadow(0 18px 34px rgba(124,44,230,.32)); }
.ldRing img { width:100%; height:100%; display:block; border-radius:50%; object-fit:cover;
background:#f4f2f7; filter:grayscale(1) contrast(1.04); transition:filter .42s var(--ease); }
.ldCard:hover .ldRing img { filter:grayscale(0) contrast(1); }
.ldName { display:block; font-family:var(--sans); font-weight:700; font-size:15.5px; letter-spacing:-.022em;
color:var(--ink); line-height:1.25; }
.ldRole { display:block; font-size:13px; font-weight:600; color:var(--violet); margin-top:5px; line-height:1.4; }
/* NAP links in the provenance meta */
.eeatMeta dd a { color:var(--p-800); text-decoration:none; border-bottom:1px solid var(--p-200);
transition:border-color .25s, color .25s; }
.eeatMeta dd a:hover { color:var(--violet); border-bottom-color:var(--violet); }
.eeatMeta { grid-template-columns:repeat(4,1fr) !important; }
@media (max-width:900px){ .eeatMeta{ grid-template-columns:1fr 1fr !important; } }
@media (max-width:560px){ .eeatMeta{ grid-template-columns:1fr !important; } }
/* photo sits above both ring layers, always a true circle */
.ldRing img { position:relative; z-index:2; width:122px !important; height:122px !important;
border-radius:50%; object-fit:cover; object-position:50% 50%; display:block;
background:#f4f2f7; filter:grayscale(1) contrast(1.04); transition:filter .42s var(--ease); }
.ldCard:hover .ldRing img { filter:grayscale(0) contrast(1); }
@media (max-width:520px){
.ldRing { width:112px; height:112px; }
.ldRing img { width:102px !important; height:102px !important; }
}
/* footer Dubai address */
.foot-addr { font-style:normal; font-size:13.5px; line-height:1.7; color:var(--ink-soft); margin:0 0 14px; }
.foot-addr strong { display:inline-block; font-weight:700; color:var(--ink); margin-right:8px;
font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; }
.foot-addr a { color:var(--p-800); text-decoration:none; border-bottom:1px solid var(--p-200); }
.foot-addr a:hover { color:var(--violet); border-bottom-color:var(--violet); }