/* AZION Static – Blue, Orange, White & Grey Palette */
/* @import removed — fonts already loaded via tags in HTML */
:root {
/* -- Core Surfaces: White & Grey Base -- */
--bg: #ffffff;
/* Pure White canvas */
--bg-2: #eef4ff;
/* Soft cool blue-grey for alternating sections */
--panel: #ffffff;
/* Card/Component backgrounds */
/* -- Deep Structural Dark Blues -- */
--dark-blue: #0f172a;
/* Deep Navy for heavy sections/footer */
--dark-blue-panel: #1e293b;
/* Lighter navy for cards on dark backgrounds */
/* -- Line / Typography -- */
--line: rgba(15, 23, 42, 0.08);
/* Soft grey line for crisp borders */
--text: #1e293b;
/* Deep Charcoal/Navy for readability */
--muted: #64748b;
/* Cool Slate Grey for body copy */
/* -- Brand Accent Color Palette (Blue & Orange) -- */
--primary: #2563eb;
/* Core Cobalt Blue */
--primary-2: #3b82f6;
/* Bright Sky Blue */
--accent: #f97316;
/* Vibrant Orange */
--accent-hover: #ea580c;
/* Deep Orange for hover states */
/* -- Design Tokens & Effects -- */
--radius: 12px;
--maxw: min(92vw, 1400px);
/* Gradients & Glows mixing Blue and Orange */
--grad-flight: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
--glow-primary: 0 4px 20px rgba(37, 99, 235, 0.2);
--glow-accent: 0 4px 20px rgba(249, 115, 22, 0.25);
--shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
--shadow-card-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background:
radial-gradient(circle at 8% 0%, rgba(37, 99, 235, 0.05), transparent 40%),
radial-gradient(circle at 100% 15%, rgba(59, 130, 246, 0.04), transparent 35%),
linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
color: var(--text);
font-family: 'Inter', system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
/* scroll-behavior: smooth; — removed: it made ALL scrolling (wheel, touch)
feel laggy by forcing interpolation. JS scrollTo({behavior:'smooth'}) still works. */
}
@media(prefers-reduced-motion: reduce) {
html,
body {
scroll-behavior: auto;
}
* {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button {
font-family: inherit;
cursor: pointer;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 6px;
}
.container {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 24px;
}
/* TYPOGRAPHY */
h1,
h2,
h3,
h4 {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
color: #0f172a;
letter-spacing: -0.02em;
margin: 0;
}
h1 {
font-size: clamp(2.5rem, 6vw, 4.8rem);
line-height: 1.05;
}
h2 {
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
line-height: 1.15;
}
h3 {
font-size: 1.35rem;
font-weight: 600;
}
p {
color: black;
line-height: 1.7;
margin: 0;
}
/* SECTION VARIATIONS */
.section {
padding: 120px 0;
position: relative;
content-visibility: auto;
contain-intrinsic-size: auto 800px;
}
.section.alt-grey {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #f2f8ff 0%, #ffffff 100%);
}
.section.alt-grey::before {
content: "";
position: absolute;
width: clamp(320px, 45vw, 700px);
height: clamp(320px, 45vw, 700px);
border-radius: 50%;
background: rgba(59, 130, 246, 0.14); /* Brighter Blue */
top: -18%;
left: -18%;
filter: blur(12px);
pointer-events: none;
}
.section.alt-grey::after {
content: "";
position: absolute;
width: clamp(360px, 52vw, 800px);
height: clamp(360px, 52vw, 800px);
border-radius: 45%;
background: rgba(96, 165, 250, 0.12);
bottom: -25%;
right: -18%;
transform: rotate(25deg);
filter: blur(18px);
pointer-events: none;
}
.section.alt-grey .container {
position: relative;
z-index: 2;
}
.section.alt-grey .container::before {
content: "";
position: absolute;
width: clamp(380px, 55vw, 900px);
height: clamp(380px, 55vw, 900px);
border-radius: 45%;
background: rgba(37, 99, 235, 0.10);
top: 5%;
right: -35%;
transform: rotate(30deg);
filter: blur(16px);
pointer-events: none;
z-index: -1;
}
.section.alt-grey .container::after {
content: "";
position: absolute;
width: clamp(320px, 45vw, 700px);
height: clamp(320px, 45vw, 700px);
border-radius: 45%;
background: rgba(59, 130, 246, 0.09);
bottom: -20%;
left: -20%;
transform: rotate(-20deg);
filter: blur(12px);
pointer-events: none;
z-index: -1;
}
.section.dark-navy {
background: var(--dark-blue);
color: #f8fafc;
}
.section.dark-navy h1,
.section.dark-navy h2,
.section.dark-navy h3 {
color: #ffffff;
}
.section.dark-navy p {
color: #94a3b8;
}
.section.dark-navy .card {
background: var(--dark-blue-panel);
}
.section.dark-navy .card::before {
background: rgba(255, 255, 255, 0.08);
}
.section.dark-navy .card h3 {
color: #ffffff;
}
/* UI ELEMENTS */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
}
.eyebrow::before {
content: "";
width: 16px;
height: 2px;
background: var(--accent);
border-radius: 2px;
}
/* BUTTONS */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: clamp(14px, 1vw, 18px) clamp(24px, 2vw, 34px);
border-radius: 8px;
background: var(--primary);
color: #fff;
font-weight: 600;
font-size: 0.95rem;
border: none;
transition: all 0.3s ease;
box-shadow: var(--glow-primary);
}
.btn:hover {
background: var(--primary-2);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
}
.btn.accent {
background: var(--accent);
box-shadow: var(--glow-accent);
}
.btn.accent:hover {
background: var(--accent-hover);
box-shadow: 0 6px 20px rgba(249, 115, 22, 0.35);
}
.btn.ghost {
background: var(--primary);
border: 1px solid var(--primary);
color: #fff;
box-shadow: var(--glow-primary);
}
.btn.ghost:hover {
border-color: var(--primary-2);
background: var(--primary-2);
color: #fff;
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
}
/* NAVIGATION */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: clamp(16px, 2vw, 24px) 0;
transition: all 0.3s ease;
}
.nav.scrolled {
background: rgb(197, 198, 199);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--line);
padding: 14px 0;
box-shadow: 0 4px 30px rgb(186, 186, 186);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
}
.brand img {
width: 36px;
height: 36px;
border-radius: 8px;
object-fit: cover;
}
.nav .brand img {
width: 52px;
height: 52px;
border-radius: 12px;
}
.nav-links {
display: flex;
gap: 32px;
align-items: center;
}
.nav-links a {
font-size: 0.95rem;
font-weight: 500;
color: #000000;
transition: color 0.2s;
position: relative;
}
.nav-links a:hover,
.nav-links a.active {
color: var(--accent);
}
.nav-links a.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 2px;
background: var(--accent);
border-radius: 2px;
}
.burger {
display: none;
background: none;
border: none;
color: var(--text);
width: 44px;
height: 44px;
border-radius: 50%;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
}
.burger span {
position: absolute;
left: 12px;
right: 12px;
height: 2px;
background: var(--text);
border-radius: 2px;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.25s ease,
top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger.open span:nth-child(1) {
top: 21px;
transform: rotate(45deg);
}
.burger.open span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.burger.open span:nth-child(3) {
top: 21px;
transform: rotate(-45deg);
}
@media(max-width: 1150px) {
.nav .brand img {
width: 46px;
height: 46px;
}
.nav.menu-open {
background: var(--bg);
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
backdrop-filter: none;
}
.nav-links {
display: flex;
position: fixed;
top: 84px;
left: 0;
right: 0;
bottom: 0;
background: var(--bg);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
padding: 48px 24px 40px;
overflow-y: auto;
z-index: 90;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(-16px);
transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}
.nav-links.open {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.nav-links a,
.nav-links .btn {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-links.open a,
.nav-links.open .btn {
opacity: 1;
transform: translateY(0);
}
.nav-links.open a:nth-child(1) { transition-delay: 0.05s; }
.nav-links.open a:nth-child(2) { transition-delay: 0.1s; }
.nav-links.open a:nth-child(3) { transition-delay: 0.15s; }
.nav-links.open a:nth-child(4) { transition-delay: 0.2s; }
.nav-links.open a:nth-child(5) { transition-delay: 0.25s; }
.nav-links.open a:nth-child(6) { transition-delay: 0.3s; }
.nav-links.open a:nth-child(7) { transition-delay: 0.35s; }
.nav-links.open .btn { transition-delay: 0.4s; }
.nav-links a {
font-size: 1.3rem;
font-weight: 600;
}
.nav-links a.active::after {
bottom: -8px;
}
.nav-links .btn {
margin-top: 16px;
font-size: 1rem !important;
padding: 16px 40px !important;
}
.burger {
display: inline-flex;
position: relative;
z-index: 101;
}
html.nav-open,
body.nav-open {
overflow: hidden;
height: 100%;
}
}
/* HERO */
.hero {
position: relative;
display: flex;
align-items: center;
overflow: hidden;
min-height: min(900px, 100svh);
padding-top: clamp(110px, 8vw, 140px);
padding-bottom: clamp(60px, 6vw, 90px);
background: var(--bg);
}
/* Faint blue tint — right to left gradient */
.hero-blue-tint {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(to left,
rgba(37, 99, 235, 0.10) 0%,
rgba(59, 130, 246, 0.06) 30%,
rgba(147, 197, 253, 0.03) 60%,
transparent 100%);
pointer-events: none;
}
/* Dot world map canvas */
.hero-dotmap {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.6;
}
.hero-dotmap canvas {
width: 100%;
height: 100%;
display: block;
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-bg::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 15% 25%, rgba(37, 99, 235, 0.06), transparent 50%),
radial-gradient(circle at 85% 15%, rgba(249, 115, 22, 0.05), transparent 50%),
linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
}
.hero-inner {
position: relative;
z-index: 2;
width: 100%;
}
.hero-grid {
display: grid;
grid-template-columns:
minmax(320px, 1fr)
minmax(360px, 1fr);
gap: clamp(30px, 5vw, 90px);
align-items: center;
position: relative;
width: 100%;
}
.hero-text-content {
display: flex;
flex-direction: column;
}
.hero-visual {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
}
#earth-canvas {
width: min(42vw, 560px);
aspect-ratio: 1;
height: auto;
max-width: 100%;
position: relative;
top: 0;
transform: translateY(-4%);
display: block;
cursor: grab;
}
#earth-canvas:active {
cursor: grabbing;
}
@media(max-width: 1100px) {
.hero-grid {
grid-template-columns: 1fr;
gap: 50px;
text-align: center;
}
.hero-text-content {
align-items: center;
max-width: min(560px, 100%);
margin: 0 auto;
}
.hero-cta {
justify-content: center;
}
.hero-inner {
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.hero-grid {
justify-items: center;
justify-content: center;
width: 100%;
max-width: 100%;
}
.hero-visual {
margin: 0 auto;
}
#earth-canvas {
width: min(80vw, 480px);
transform: none;
margin: 0 auto;
}
}
@media(max-width: 576px) {
#earth-canvas {
width: min(90vw, 360px);
}
}
.hero h1 {
font-size: clamp(3rem, 5vw, 5.3rem);
line-height: 0.95;
max-width: 8ch;
}
.hero h1 span {
background: var(--grad-flight);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-lead {
width: min(100%, 560px);
margin-top: clamp(20px, 2vw, 30px);
margin-bottom: clamp(28px, 3vw, 40px);
font-size: clamp(1rem, 1.1vw, 1.15rem);
line-height: 1.7;
}
.hero-cta {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
/* HERO SVG WAVES */
.hero-waves {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 200px;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.hero-wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
}
.hero-wave path {
fill-opacity: 1;
}
/* Wave 1 — deepest, most opaque */
.hero-wave--1 path {
fill: rgba(37, 99, 235, 0.12);
animation: waveShift1 8s ease-in-out infinite alternate;
}
/* Wave 2 — mid layer */
.hero-wave--2 path {
fill: rgba(59, 130, 246, 0.08);
animation: waveShift2 11s ease-in-out infinite alternate;
}
/* Wave 3 — topmost, lightest */
.hero-wave--3 path {
fill: rgba(147, 197, 253, 0.10);
animation: waveShift3 14s ease-in-out infinite alternate;
}
@keyframes waveShift1 {
0% {
d: path("M0,120 C180,60 360,180 540,120 C720,60 900,180 1080,120 C1260,60 1380,100 1440,80 L1440,200 L0,200 Z");
}
50% {
d: path("M0,90 C200,150 400,60 600,130 C780,190 960,70 1140,130 C1300,180 1400,60 1440,90 L1440,200 L0,200 Z");
}
100% {
d: path("M0,140 C150,80 310,170 500,110 C700,50 880,160 1060,100 C1240,50 1380,120 1440,100 L1440,200 L0,200 Z");
}
}
@keyframes waveShift2 {
0% {
d: path("M0,100 C200,170 400,40 600,110 C800,170 1000,50 1200,120 C1320,155 1400,90 1440,100 L1440,200 L0,200 Z");
}
50% {
d: path("M0,130 C160,70 360,160 560,100 C760,50 920,160 1100,100 C1260,50 1380,130 1440,110 L1440,200 L0,200 Z");
}
100% {
d: path("M0,80 C220,150 440,30 640,120 C840,190 1040,60 1220,130 C1360,170 1420,80 1440,80 L1440,200 L0,200 Z");
}
}
@keyframes waveShift3 {
0% {
d: path("M0,140 C160,80 320,160 480,130 C640,100 800,170 960,140 C1120,110 1300,160 1440,140 L1440,200 L0,200 Z");
}
50% {
d: path("M0,110 C200,170 380,80 560,140 C740,190 900,90 1080,150 C1240,190 1380,100 1440,120 L1440,200 L0,200 Z");
}
100% {
d: path("M0,150 C180,100 340,170 520,120 C700,70 860,160 1040,110 C1220,60 1360,150 1440,140 L1440,200 L0,200 Z");
}
}
/* The hero-wave animations above morph the SVG path's `d` attribute directly,
which forces the browser to recompute and repaint the path shape on every
frame, forever (three overlapping infinite animations per page, and every
page has them). That's cheap on a fast device but a genuine continuous
drain on a weak one. Turn it off for detected low-end devices (main.js
adds `reduced-fx` to ) and for anyone with the OS-level reduced
motion preference set — the waves just hold their initial static shape. */
html.reduced-fx .hero-wave--1 path,
html.reduced-fx .hero-wave--2 path,
html.reduced-fx .hero-wave--3 path {
animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
.hero-wave--1 path,
.hero-wave--2 path,
.hero-wave--3 path {
animation: none !important;
}
}
/* HERO STATS */
.hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
margin-top: 80px;
padding-top: 40px;
border-top: 1px solid var(--line);
}
.stat .num {
font-family: 'Space Grotesk', sans-serif;
font-size: 2.2rem;
font-weight: 700;
color: var(--text);
}
.stat .lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--accent);
margin-top: 6px;
}
@media(max-width: 720px) {
.hero-stats {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
/* GENERIC PAGE HERO */
.page-hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 14% 18%, rgba(37, 99, 235, 0.12), transparent 34%),
radial-gradient(circle at 88% 14%, rgba(249, 115, 22, 0.08), transparent 24%),
linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
padding: 118px 0 88px;
}
.page-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 38%, rgba(255, 255, 255, 0.18) 100%);
}
.page-hero-shell {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
gap: clamp(24px, 3.4vw, 56px);
align-items: stretch; /* was: center */
}
.page-hero-shell {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
gap: clamp(24px, 3.4vw, 56px);
align-items: center;
}
.page-hero-copy {
max-width: 640px;
}
.page-hero-copy .eyebrow {
justify-content: flex-start;
}
.page-hero-copy h1 {
font-size: clamp(2.8rem, 5.6vw, 4.9rem);
line-height: 0.95;
max-width: 9.8ch;
}
.page-hero-copy h1 .accent {
color: var(--accent);
}
.page-hero-copy p {
max-width: 30rem;
margin: 20px 0 0;
font-size: clamp(0.98rem, 1.45vw, 1.08rem);
color: #334155;
}
.page-hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 28px;
}
.page-hero-actions .btn {
justify-content: center;
}
.page-hero-visual {
position: relative;
min-height: clamp(420px, 60vw, 640px);
}
.page-hero-visual::before {
content: "";
position: absolute;
inset: 8% 12% auto auto;
width: clamp(180px, 24vw, 340px);
height: clamp(180px, 24vw, 340px);
border-radius: 50%;
background: radial-gradient(circle, rgba(37, 99, 235, 0.2), transparent 72%);
filter: blur(8px);
}
.page-hero-card {
position: relative;
min-height: inherit;
border-radius: 32px;
overflow: visible;
background:
radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.72) 28%, transparent 30%),
conic-gradient(from 138deg, rgba(124, 58, 237, 0.92), rgba(37, 99, 235, 0.96), rgba(249, 115, 22, 0.88), rgba(255, 255, 255, 0.94), rgba(124, 58, 237, 0.92));
box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18);
border: 0;
}
.page-hero-card::before {
content: "";
position: absolute;
inset: -18px;
border-radius: 40px;
background:
radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.85), transparent 34%),
conic-gradient(from 120deg, rgba(249, 115, 22, 0.22), rgba(37, 99, 235, 0.28), rgba(124, 58, 237, 0.32), rgba(249, 115, 22, 0.22));
filter: blur(1px);
z-index: -1;
}
.page-hero-card::after {
content: "";
position: absolute;
inset: 24px;
border-radius: inherit;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.2), transparent 48%),
linear-gradient(180deg, transparent 62%, rgba(15, 23, 42, 0.1));
pointer-events: none;
z-index: 2;
}
.page-hero-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
.page-hero-card .page-hero-media {
inset: 24px;
width: calc(100% - 48px);
height: calc(100% - 48px);
border-radius: inherit;
object-fit: cover;
object-position: center 38%;
transform: scale(1.04);
background: #ffffff;
z-index: 1;
}
.page-hero-copy-deco {
position: absolute;
right: -28px;
bottom: 22px;
width: clamp(150px, 19vw, 240px);
height: clamp(90px, 11vw, 138px);
border-radius: 22px;
backdrop-filter: blur(14px);
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(226, 232, 240, 0.9);
box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
padding: 14px 18px;
gap: 10px;
z-index: 2;
}
.page-hero-copy-deco span {
display: grid;
place-items: center;
text-align: center;
font-family: 'JetBrains Mono', monospace;
font-size: 0.76rem;
color: var(--text);
min-height: 100%;
border-left: 1px solid rgba(148, 163, 184, 0.35);
}
.page-hero-copy-deco span:first-child {
border-left: 0;
}
.page-hero-copy-deco strong {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: 1rem;
color: var(--primary);
margin-bottom: 4px;
}
.ph-blob {
position: absolute;
border-radius: 50%;
filter: blur(70px);
opacity: 0.55;
will-change: transform;
animation: phFloat 16s ease-in-out infinite alternate;
}
.ph-blob--1 {
width: 420px;
height: 420px;
top: -160px;
left: -120px;
background: radial-gradient(circle, rgba(37, 99, 235, 0.35), transparent 70%);
}
.ph-blob--2 {
width: 380px;
height: 380px;
bottom: -170px;
right: -100px;
background: radial-gradient(circle, rgba(249, 115, 22, 0.28), transparent 70%);
animation-delay: 2.5s;
animation-direction: alternate-reverse;
}
@keyframes phFloat {
0% {
transform: translate(0, 0) scale(1);
}
100% {
transform: translate(26px, -18px) scale(1.08);
}
}
/* Faint dot grid, faded toward the edges */
.ph-dots {
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(15, 23, 42, 0.10) 1px, transparent 1px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(circle at 50% 35%, black 0%, transparent 70%);
mask-image: radial-gradient(circle at 50% 35%, black 0%, transparent 70%);
}
.page-hero .container {
position: relative;
z-index: 2;
width: 100%;
}
body:not(.home-page) .section {
position: relative;
z-index: 2;
background: var(--bg);
}
body:not(.home-page) .section.alt-grey {
background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 55%, #f7fbff 100%);
}
body:not(.home-page) .section.dark-navy {
background: var(--dark-blue);
}
body:not(.home-page) .page-hero-copy h1 {
font-size: clamp(2.0rem, 5.1vw, 4.45rem);
}
body:not(.home-page) .page-hero-copy p {
font-size: clamp(0.95rem, 1.35vw, 1.02rem);
}
body:not(.home-page) footer.footer {
position: relative;
z-index: 2;
}
body:not(.home-page) .scrolly {
position: relative;
z-index: 2;
background: var(--bg);
}
body:not(.home-page) .slideshow {
position: relative;
z-index: 2;
background: var(--dark-blue);
}
body:not(.home-page) .slideshow-pin {
background: var(--dark-blue);
}
.page-hero .hero-waves {
display: block;
height: 140px;
z-index: 2;
}
.page-hero .hero-wave {
height: 140px;
}
@media(max-width: 1080px) {
.page-hero {
padding: 112px 0 118px;
}
.page-hero .hero-waves,
.page-hero .hero-wave {
height: 90px;
}
.page-hero-shell {
grid-template-columns: 1fr;
gap: 28px;
}
.page-hero-copy {
max-width: 100%;
text-align: center;
margin: 0 auto;
}
.page-hero-copy .eyebrow {
justify-content: center;
}
.page-hero-copy h1 {
max-width: 11ch;
margin-inline: auto;
}
.page-hero-copy p {
margin-inline: auto;
}
.page-hero-actions {
justify-content: center;
}
.page-hero-visual {
min-height: clamp(280px, 50vw, 460px);
}
.page-hero-copy-deco {
right: 20px;
bottom: 18px;
}
}
@media(max-width: 720px) {
.page-hero {
min-height: 100vh;
min-height: 100svh;
padding: 100px 0 88px;
}
/* Keep the decorative wave clear of the content instead of
overlapping the image/buttons at the bottom of the hero */
.page-hero .hero-waves,
.page-hero .hero-wave {
height: 56px;
}
.page-hero-shell {
gap: 18px;
}
.page-hero-copy h1 {
max-width: 11.5ch;
font-size: clamp(1.9rem, 8.4vw, 3.4rem);
line-height: 1.06;
}
body:not(.home-page) .page-hero-copy h1 {
font-size: clamp(1.7rem, 7.4vw, 3.1rem);
}
.page-hero-copy p {
font-size: 0.94rem;
max-width: 34rem;
margin-top: 12px;
}
/* Simple, clean image card — no blob shape, no glow ring */
.page-hero-visual {
min-height: 0;
}
.page-hero-visual::before {
content: none;
}
.page-hero-card {
min-height: clamp(160px, 46vw, 220px);
border-radius: 18px;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}
.page-hero-card::before,
.page-hero-card::after {
content: none;
}
.page-hero-card .page-hero-media {
inset: 0;
width: 100%;
height: 100%;
border-radius: 18px;
transform: none;
}
/* Consistent, side-by-side CTA buttons on mobile */
.page-hero-actions {
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
justify-content: center;
gap: 10px;
width: 100%;
margin-top: 18px;
}
.page-hero-actions .btn {
flex: 1 1 0;
width: auto;
min-width: 0;
text-align: center;
padding: 13px 10px;
font-size: 0.86rem;
white-space: nowrap;
}
.page-hero-copy-deco {
position: static;
width: 100%;
margin-top: 18px;
}
.ph-blob--1,
.ph-blob--2 {
width: 200px;
height: 200px;
filter: blur(45px);
opacity: 0.4;
}
}
@media(max-width: 420px) {
.page-hero {
padding: 96px 0 84px;
}
.page-hero-card {
min-height: clamp(150px, 44vw, 200px);
}
.page-hero-actions .btn {
font-size: 0.8rem;
padding: 12px 8px;
}
}
/* GRID DESIGNS */
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media(max-width: 900px) {
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
gap: 32px;
}
}
/* PREMIUM CARDS */
@property --card-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
.card {
--card-angle: 0deg;
background: var(--panel);
border-radius: var(--radius);
padding: 32px;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: var(--shadow-card);
position: relative;
isolation: isolate;
overflow: hidden;
}
/* Static hairline so the card still reads as bordered before hover/animation kicks in.
Excludes .site-map-card, which has its own left-accent-bar treatment. */
.card:not(.site-map-card)::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--line);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 1;
pointer-events: none;
transition: opacity 0.4s ease;
}
/* Rotating conic gradient ring, revealed on hover/focus */
.card:not(.site-map-card)::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.5px;
background: conic-gradient(from var(--card-angle),
var(--primary), var(--primary-2), var(--accent), var(--primary-2), var(--primary));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 1;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
animation: card-border-spin 3.5s linear infinite;
animation-play-state: paused;
}
.card:not(.site-map-card):hover,
.card:not(.site-map-card):focus-within {
transform: translateY(-6px);
box-shadow: var(--shadow-card-hover), 0 0 32px rgba(37, 99, 235, 0.14);
}
.card:not(.site-map-card):hover::before {
opacity: 0;
}
.card:not(.site-map-card):hover::after,
.card:not(.site-map-card):focus-within::after {
opacity: 1;
animation-play-state: running;
}
@keyframes card-border-spin {
to {
--card-angle: 360deg;
}
}
.card .icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(37, 99, 235, 0.08);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 1.3rem;
margin-bottom: 20px;
border: 1px solid rgba(37, 99, 235, 0.14);
position: relative;
z-index: 2;
transition: background 0.3s ease, color 0.3s ease;
}
.card:not(.site-map-card):hover .icon {
background: var(--grad-flight);
color: #fff;
border-color: transparent;
}
.card h3,
.card p {
position: relative;
z-index: 2;
}
.card h3 {
margin-bottom: 12px;
}
@media(prefers-reduced-motion: reduce) {
.card:not(.site-map-card)::after {
animation: none;
}
}
/* DAY-ONE CARDS */
.dayone-sub {
color: var(--muted);
font-size: 1.02rem;
max-width: 560px;
margin: 0 auto 46px;
text-align: center;
line-height: 1.6;
}
.dayone-card {
--card-angle: 0deg;
background: var(--panel);
border-radius: var(--radius);
padding: 30px 28px 26px;
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 300px;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: var(--shadow-card);
}
/* Static hairline, matches .card's treatment */
.dayone-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--line);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 1;
pointer-events: none;
transition: opacity 0.4s ease;
}
/* Rotating conic gradient ring, revealed on hover/focus */
.dayone-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.5px;
background: conic-gradient(from var(--card-angle),
var(--primary), var(--primary-2), var(--accent), var(--primary-2), var(--primary));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 1;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
animation: card-border-spin 3.5s linear infinite;
animation-play-state: paused;
}
.dayone-card:hover,
.dayone-card:focus-within {
transform: translateY(-6px);
box-shadow: var(--shadow-card-hover), 0 0 32px rgba(37, 99, 235, 0.14);
}
.dayone-card:hover::before {
opacity: 0;
}
.dayone-card:hover::after,
.dayone-card:focus-within::after {
opacity: 1;
animation-play-state: running;
}
@media(prefers-reduced-motion: reduce) {
.dayone-card::after {
animation: none;
}
}
.dayone-card > * {
position: relative;
z-index: 2;
}
.dayone-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(37, 99, 235, 0.08);
border: 1px solid rgba(37, 99, 235, 0.14);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
margin-bottom: 18px;
flex-shrink: 0;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.dayone-card:hover .dayone-icon {
background: var(--grad-flight);
color: #fff;
border-color: transparent;
}
.dayone-icon svg {
width: 24px;
height: 24px;
}
.dayone-card h3 {
margin: 0 0 10px;
font-size: 1.15rem;
}
.dayone-underline {
width: 34px;
height: 3px;
border-radius: 2px;
background: var(--accent);
margin-bottom: 16px;
flex-shrink: 0;
transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.dayone-card:hover .dayone-underline {
width: 52px;
}
.dayone-card p {
color: var(--muted);
font-size: 0.95rem;
line-height: 1.65;
margin: 0;
}
.dayone-illustration {
margin-top: auto;
padding-top: 26px;
display: flex;
gap: 10px;
justify-content: flex-end;
align-items: center;
}
.mini-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mini-icon svg {
width: 17px;
height: 17px;
}
.mini-icon--blue {
background: rgba(37, 99, 235, 0.08);
border: 1px solid rgba(37, 99, 235, 0.16);
color: var(--primary);
}
.mini-icon--accent {
background: rgba(249, 115, 22, 0.08);
border: 1px solid rgba(249, 115, 22, 0.18);
color: var(--accent);
}
@media(max-width: 900px) {
.dayone-sub {
margin-top: 0;
}
}
/* MARQUEE */
.marquee {
overflow: hidden;
padding: 40px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--bg-2);
}
.marquee-track {
display: flex;
gap: 60px;
animation: marquee 30s linear infinite;
white-space: nowrap;
font-family: 'Space Grotesk';
font-size: 1.5rem;
color: var(--muted);
}
.marquee-track span {
opacity: 0.45;
transition: opacity 0.3s, color 0.3s;
}
.marquee-track span:hover {
opacity: 1;
color: var(--accent);
}
@keyframes marquee {
to {
transform: translateX(-50%);
}
}
/* SLIDESHOW */
.slideshow {
position: relative;
height: 400vh;
}
.slideshow-pin {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
.slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.8s ease;
}
.slide.active {
opacity: 1;
}
.slide-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1.05);
transition: transform 1.2s ease;
}
.slide.active .slide-bg {
transform: scale(1);
}
.slide-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.95));
}
.slide-content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
padding: 0 24px;
}
.slide-content .num {
font-family: 'JetBrains Mono', monospace;
color: var(--accent);
letter-spacing: 0.4em;
font-size: 1.1rem;
margin-bottom: 18px;
}
.slide-content h2 {
font-size: clamp(2.4rem, 7vw, 6rem);
max-width: 900px;
color: #fff;
}
.slide-content p {
max-width: 560px;
margin-top: 20px;
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.8);
}
.slide-progress {
position: absolute;
left: 24px;
bottom: 32px;
right: 24px;
display: flex;
gap: 8px;
z-index: 3;
}
.slide-progress span {
flex: 1;
height: 2px;
background: rgba(255, 255, 255, 0.15);
position: relative;
overflow: hidden;
border-radius: 2px;
}
.slide-progress span.on::after {
content: "";
position: absolute;
inset: 0;
background: var(--grad-flight);
}
/* SCROLLEYTELLING & ACCORDIONS */
.scrolly {
position: relative;
padding: 120px 0;
}
.scrolly-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.scrolly-media,
.acc-media {
position: sticky;
top: 15vh;
height: 70vh;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--line);
box-shadow: var(--shadow-card-hover);
}
.scrolly-media .img,
.acc-media .img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.6s ease, transform 1s ease;
transform: scale(1.06);
}
.scrolly-media .img.on,
.acc-media .img.on {
opacity: 1;
transform: scale(1);
}
.scrolly-steps {
display: flex;
flex-direction: column;
gap: 40vh;
padding: 20vh 0;
}
.step {
opacity: 0.25;
transition: opacity 0.5s, transform 0.5s;
transform: translateY(20px);
}
.step.on {
opacity: 1;
transform: translateY(0);
}
.step .num {
font-family: 'JetBrains Mono', monospace;
color: var(--accent);
font-size: 0.8rem;
letter-spacing: 0.3em;
margin-bottom: 14px;
display: block;
}
.step h3 {
font-size: 2rem;
margin-bottom: 16px;
}
@media(max-width: 900px) {
.scrolly-wrap,
.acc-wrap {
grid-template-columns: 1fr;
}
.scrolly-wrap {
display: block;
}
/* On mobile, neither media panel is sticky/pinned anymore (see above),
so there's nothing left for it to accompany — just hide it, the same
way .acc-media already is, instead of leaving a large empty/blank
50vh block sitting after all the step text. */
.scrolly-media,
.acc-media {
display: none;
}
.scrolly-steps {
/* The old 20vh gap/padding was sized to match how long the desktop
pinned image needed to stay on screen while scrolling. With the
media panel gone on mobile, that's just dead space — use normal,
fixed spacing between stacked steps instead. */
gap: 48px;
padding: 0;
}
}
/* ACCORDION (Why AZION) */
.acc-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.acc-list {
display: flex;
flex-direction: column;
gap: 12px;
}
@media(max-width: 900px) {
.acc-wrap {
grid-template-columns: 1fr;
}
.acc-list {
width: 100%;
}
}
.acc-item {
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
background: var(--panel);
transition: all 0.3s ease;
box-shadow: var(--shadow-card);
}
.acc-item.open {
border-color: rgba(249, 115, 22, 0.4);
background: #fff9f5;
box-shadow: 0 4px 20px rgba(249, 115, 22, 0.05);
}
.acc-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 28px;
background: none;
border: none;
color: var(--text);
width: 100%;
text-align: left;
font-size: 1.15rem;
font-weight: 600;
}
.acc-head .plus {
font-size: 1.5rem;
color: var(--primary);
transition: transform 0.3s;
}
.acc-item.open .acc-head {
color: var(--accent);
}
.acc-item.open .plus {
transform: rotate(45deg);
color: var(--accent);
}
.acc-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
padding: 0 28px;
}
.acc-item.open .acc-body {
max-height: 400px;
padding-bottom: 24px;
}
@media(max-width: 720px) {
.acc-head {
padding: 18px 20px;
font-size: 1rem;
line-height: 1.4;
}
.acc-head .plus {
font-size: 1.2rem;
flex-shrink: 0;
margin-left: 12px;
}
.acc-body {
padding: 0 20px;
}
.acc-item.open .acc-body {
max-height: 600px;
padding: 0 20px 20px 20px;
}
.acc-body p {
font-size: 0.95rem;
line-height: 1.6;
}
}
/* PROCESS STEPS */
.process-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
counter-reset: step;
}
@media(max-width: 900px) {
.process-grid {
grid-template-columns: 1fr 1fr;
}
}
.pstep {
position: relative;
padding: 32px 24px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
counter-increment: step;
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
box-shadow: var(--shadow-card);
}
.pstep:hover {
transform: translateY(-4px);
border-color: rgba(249, 115, 22, 0.3);
box-shadow: var(--shadow-card-hover);
}
.pstep::before {
content: "0" counter(step);
font-family: 'JetBrains Mono', monospace;
font-size: 2.2rem;
font-weight: 600;
background: var(--grad-flight);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: block;
margin-bottom: 10px;
}
.pstep h4 {
margin-bottom: 10px;
font-size: 1.05rem;
}
.pstep p {
font-size: 0.9rem;
}
/* FORMS */
.form {
max-width: 640px;
margin: 0 auto;
display: grid;
gap: 16px;
}
.form input,
.form textarea,
.form select {
background: #ffffff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 14px 18px;
color: var(--text);
font-family: inherit;
font-size: 0.95rem;
box-shadow: var(--shadow-card);
transition: border 0.2s, background 0.2s, box-shadow 0.2s;
}
.form select {
color: var(--muted);
}
.form select:focus,
.form select.has-value {
color: var(--text);
}
.form input:focus,
.form textarea:focus,
.form select:focus {
outline: none;
border-color: var(--accent);
background: #fff;
box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
}
.form textarea {
resize: vertical;
min-height: 120px;
}
.form .btn,
.form button[type="submit"] {
justify-self: start;
width: auto;
}
@media(max-width: 720px) {
.form .btn,
.form button[type="submit"] {
justify-self: center;
}
}
/* COUNTRIES */
.countries {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media(max-width: 720px) {
.countries {
grid-template-columns: repeat(2, 1fr);
}
}
.country {
padding: 20px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--panel);
text-align: center;
transition: all 0.3s;
box-shadow: var(--shadow-card);
}
.country:hover {
border-color: var(--accent);
background: rgba(249, 115, 22, 0.03);
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.country .flag {
font-size: 2rem;
margin-bottom: 8px;
}
.country .name {
font-size: 0.9rem;
font-weight: 500;
}
/* FOOTER */
.footer {
background: linear-gradient(
to right,
#1f56d6 0%,
#1847b8 30%,
#12399a 65%,
#0b256b 100%
);
padding: 80px 0 30px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
margin-top: 0;
color: #ffffff;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 50px;
}
@media(max-width: 800px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
.footer h4 {
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 18px;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer a {
color: #ffffff;
font-size: 0.9rem;
transition: color 0.2s;
}
.footer a:hover {
color: #ffffff;
}
.footer .brand {
color: #ffffff;
}
.footer .brand span {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.15rem;
}
.footer-bottom {
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
color: #64748b;
font-size: 0.85rem;
}
/* FOOTER — mobile-only cleanup */
@media (max-width: 640px) {
.footer {
padding: 56px 0 28px;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 32px;
margin-bottom: 36px;
}
/* Brand block gets a divider so it reads as its own section
instead of pairing awkwardly with the column next to it */
.footer-grid > div:first-child {
padding-bottom: 28px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-grid > div:first-child p {
max-width: 100% !important;
}
.footer h4 {
font-size: 0.7rem;
margin-bottom: 14px;
}
.footer ul {
gap: 12px;
}
.footer a {
font-size: 0.95rem;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding-top: 20px;
color: rgba(255, 255, 255, 0.55);
font-size: 0.8rem;
}
}
/* TESTIMONIALS */
.tcard {
padding: 36px;
border: 1px solid var(--line);
border-left: 4px solid transparent;
border-image: var(--grad-flight) 1;
border-radius: var(--radius);
background: var(--panel);
box-shadow: var(--shadow-card);
}
.tcard blockquote {
margin: 0 0 20px;
font-size: 1.1rem;
color: var(--text);
line-height: 1.6;
}
.tcard .who {
color: var(--muted);
font-size: 0.9rem;
}
.tcard .who strong {
color: var(--primary);
}
/* UTILS */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s, transform 0.8s;
will-change: opacity, transform;
}
.reveal.on {
opacity: 1;
transform: translateY(0);
will-change: auto;
}
body.intro-active,
html.intro-active {
overflow: hidden;
height: 100%;
}
html.intro-pending,
html.intro-pending body {
overflow: hidden;
height: 100%;
}
html.intro-pending body > * {
visibility: hidden;
}
html.intro-pending body > .intro-loader {
visibility: visible;
}
.intro-loader {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
background: #050b16;
opacity: 0;
visibility: hidden;
transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
.intro-loader.is-visible {
opacity: 1;
visibility: visible;
transition: opacity 0.45s ease;
}
.intro-loader.is-fading {
opacity: 0;
visibility: hidden;
}
.intro-loader__backdrop {
position: absolute;
inset: 0;
background:
radial-gradient(circle at top, rgba(37, 99, 235, 0.22), transparent 48%),
radial-gradient(circle at 80% 80%, rgba(249, 115, 22, 0.16), transparent 42%),
rgba(5, 11, 22, 0.92);
}
.intro-loader__video {
position: relative;
z-index: 1;
width: 100vw;
height: 100vh;
object-fit: cover;
border-radius: 0;
box-shadow: none;
transform: scale(1.01);
transition: transform 0.7s ease, opacity 0.7s ease;
}
.intro-loader.is-visible .intro-loader__video {
transform: scale(1);
}
.intro-loader.is-fading .intro-loader__video {
opacity: 0;
transform: scale(1.02);
}
@media (max-width: 768px) {
.intro-loader__video {
width: 100vw;
height: 100vh;
border-radius: 0;
}
}
/* SCROLL PROGRESS BAR */
.progress-bar {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: var(--grad-flight);
z-index: 200;
width: 0;
transition: width 0.1s;
}
/* RECRUITMENT PIPELINE TIMELINE */
.pipeline-section {
position: relative;
width: min(1120px, 100%);
max-width: 1120px;
margin: 60px auto;
padding: 40px 0;
--pipeline-icon-size: 72px;
--pipeline-track-height: 4px;
--pipeline-progress: 0;
--pipeline-plane-opacity: 0;
}
.pipeline-track {
position: absolute;
top: calc(40px + (var(--pipeline-icon-size) / 2) - (var(--pipeline-track-height) / 2));
left: calc(var(--pipeline-icon-size) / 2);
right: calc(var(--pipeline-icon-size) / 2);
height: var(--pipeline-track-height);
background: rgba(37, 99, 235, 0.12);
border-radius: 999px;
z-index: 1;
overflow: hidden;
}
.pipeline-track-fill {
position: absolute;
inset: 0 auto 0 0;
width: calc(var(--pipeline-progress) * 100%);
background: linear-gradient(90deg, #2f6df6 0%, #2f6df6 42%, #7fb3ff 100%);
border-radius: inherit;
box-shadow: 0 0 18px rgba(47, 109, 246, 0.35);
}
.pipeline-plane {
position: absolute;
top: 50%;
left: calc(var(--pipeline-progress) * 100%);
width: 30px;
height: 30px;
transform: translate(-50%, -50%) translateY(-1px) rotate(12deg);
transform-origin: center;
opacity: var(--pipeline-plane-opacity);
transition: opacity 0.16s ease;
z-index: 1;
pointer-events: none;
filter: drop-shadow(0 6px 10px rgba(37, 99, 235, 0.2));
}
.pipeline-plane svg {
width: 100%;
height: 100%;
display: block;
fill: #2f6df6;
stroke: none;
}
.pipeline-steps {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: clamp(10px, 1vw, 18px);
position: relative;
z-index: 2;
margin-bottom: 50px;
}
.pipeline-step {
display: flex;
flex: 1 1 0;
min-width: 0;
flex-direction: column;
align-items: center;
cursor: pointer;
width: auto;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 2;
}
.pipeline-icon-container {
position: relative;
width: var(--pipeline-icon-size);
height: var(--pipeline-icon-size);
margin-bottom: 16px;
z-index: 2;
}
.pipeline-icon {
width: var(--pipeline-icon-size);
height: var(--pipeline-icon-size);
border-radius: 20px;
background: #eff6ff;
/* Soft blue background */
border: 1px solid rgba(37, 99, 235, 0.15);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pipeline-icon svg {
width: 26px;
height: 26px;
stroke: currentColor;
transition: transform 0.3s ease;
}
.pipeline-label {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.85rem;
font-weight: 600;
color: var(--muted);
text-align: center;
line-height: 1.35;
transition: color 0.3s ease;
white-space: normal;
max-width: 12ch;
min-height: 2.7em;
text-wrap: balance;
}
/* Hover & Active States */
.pipeline-step:hover .pipeline-icon {
transform: translateY(-4px);
background: #dbeafe;
color: var(--primary);
border-color: rgba(37, 99, 235, 0.3);
box-shadow: 0 6px 15px rgba(37, 99, 235, 0.15);
}
.pipeline-step.active .pipeline-icon {
background: var(--primary);
color: #ffffff;
border-color: var(--primary);
box-shadow: 0 8px 25px rgba(37, 99, 235, 0.35);
transform: scale(1.05);
}
.pipeline-step.active .pipeline-label {
color: var(--text);
font-weight: 700;
}
/* Sticky Scroll Wrapper styling */
.pipeline-scroll-container {
position: relative;
height: clamp(2600px, 430vh, 4200px);
margin-bottom:20px;
/* Creates scroll space for 6 steps */
}
.pipeline-sticky-wrap {
position: sticky;
top: 90px;
min-height: calc(100vh - 90px);
display: flex;
flex-direction: column;
justify-content: center;
padding: 0vh 0;
}
/* Details Card Container */
.pipeline-details-container {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 40px;
box-shadow: var(--shadow-card);
position: relative;
overflow: hidden;
margin-bottom: 30px;
}
.pipeline-details-card {
display: none;
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s ease;
grid-template-columns: 1.1fr 0.9fr;
gap: 40px;
align-items: center;
}
.pipeline-details-card.active {
display: grid;
opacity: 1;
transform: translateY(0);
}
.pipeline-details-text {
display: flex;
flex-direction: column;
}
.pipeline-accent-line {
width: 40px;
height: 3px;
background: var(--accent);
margin-bottom: 20px;
border-radius: 2px;
}
.pipeline-details-card h3 {
font-size: 2rem;
color: var(--dark-blue);
margin: 0 0 10px 0;
line-height: 1.2;
}
.pipeline-details-card .lead {
font-size: 1.05rem;
color: var(--muted);
margin: 0 0 24px 0;
font-weight: 400;
line-height: 1.6;
}
.pipeline-details-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.pipeline-details-list li {
position: relative;
padding-left: 24px;
color: var(--text);
font-size: 0.95rem;
line-height: 1.5;
}
.pipeline-details-list li::before {
content: "\25C6";
position: absolute;
left: 0;
top: 0;
color: var(--accent);
font-size: 0.85rem;
}
/* Image Placeholder & Container */
.pipeline-details-image {
position: relative;
align-self: stretch;
}
.pipeline-image-placeholder {
width: 100%;
height: 360px;
border-radius: 16px;
overflow: hidden;
position: relative;
background: #f8fafc;
border: 1px solid var(--line);
transition: all 0.3s ease;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02);
}
.pipeline-image-placeholder img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
aspect-ratio: 16 / 10;
background: #f1f5f9;
}
.pipeline-image-placeholder.is-empty {
border: 2px dashed rgba(37, 99, 235, 0.12);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.01) 0%, rgba(59, 130, 246, 0.03) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.pipeline-image-placeholder.is-empty::after {
content: "Image Placeholder";
font-family: 'Space Grotesk', sans-serif;
color: var(--muted);
font-size: 0.85rem;
opacity: 0.5;
letter-spacing: 0.05em;
}
/* Dots and Navigation Arrows footer */
.pipeline-navigation {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 10px;
}
.pipeline-nav-btn {
background: #ffffff;
border: 1px solid var(--line);
border-radius: 50%;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
box-shadow: var(--shadow-card);
transition: all 0.2s ease;
}
.pipeline-nav-btn:hover {
background: #eff6ff;
border-color: rgba(37, 99, 235, 0.2);
color: var(--primary);
transform: translateY(-1px);
}
.pipeline-nav-btn svg {
width: 18px;
height: 18px;
}
.pipeline-dots {
display: flex;
gap: 12px;
align-items: center;
}
.pipeline-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #e2e8f0;
cursor: pointer;
transition: all 0.3s ease;
}
.pipeline-dot.active {
background: var(--primary);
transform: scale(1.3);
}
@media(max-width: 1280px) and (min-width: 821px) {
.pipeline-section {
width: min(100%, 1040px);
}
.pipeline-section {
--pipeline-icon-size: 64px;
--pipeline-track-height: 4px;
}
.pipeline-track {
top: calc(40px + (var(--pipeline-icon-size) / 2) - (var(--pipeline-track-height) / 2));
left: calc(var(--pipeline-icon-size) / 2);
right: calc(var(--pipeline-icon-size) / 2);
}
.pipeline-icon-container {
width: var(--pipeline-icon-size);
height: var(--pipeline-icon-size);
margin-bottom: 14px;
}
.pipeline-icon {
width: var(--pipeline-icon-size);
height: var(--pipeline-icon-size);
border-radius: 18px;
}
.pipeline-icon svg {
width: 23px;
height: 23px;
}
.pipeline-plane {
width: 26px;
height: 26px;
}
.pipeline-label {
font-size: 0.8rem;
max-width: 10ch;
}
.pipeline-scroll-container {
height: clamp(2400px, 410vh, 3800px);
}
.pipeline-sticky-wrap {
top: 78px;
min-height: calc(100vh - 78px);
}
.pipeline-details-container {
padding: 32px;
}
.pipeline-details-card {
grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr);
gap: 28px;
}
.pipeline-details-card h3 {
font-size: 1.8rem;
}
.pipeline-details-card .lead {
font-size: 1rem;
margin-bottom: 20px;
}
.pipeline-details-list {
gap: 12px;
}
.pipeline-details-list li {
font-size: 0.92rem;
}
.pipeline-image-placeholder {
height: 320px;
}
}
@media(max-width: 1100px) and (min-width: 821px) {
.pipeline-section {
--pipeline-icon-size: 64px;
}
.pipeline-label {
font-size: 0.76rem;
max-width: 9ch;
}
.pipeline-details-container {
padding: 28px;
}
.pipeline-details-card {
grid-template-columns: minmax(0, 0.95fr) minmax(300px, 1fr);
gap: 22px;
}
.pipeline-details-card h3 {
font-size: 1.65rem;
}
.pipeline-details-card .lead {
font-size: 0.96rem;
line-height: 1.5;
}
.pipeline-details-list li {
font-size: 0.9rem;
line-height: 1.45;
}
.pipeline-image-placeholder {
height: 290px;
}
}
@media(max-height: 900px) and (min-width: 821px) {
.pipeline-section {
margin: 30px auto;
padding: 20px 0;
}
.pipeline-steps {
margin-bottom: 28px;
}
.pipeline-scroll-container {
height: clamp(2600px, 440vh, 4000px);
}
.pipeline-sticky-wrap {
top: 72px;
min-height: calc(100vh - 72px);
justify-content: flex-start;
}
.pipeline-details-container {
padding: 26px;
margin-bottom: 18px;
}
.pipeline-details-card {
gap: 20px;
}
.pipeline-details-card h3 {
font-size: 1.55rem;
}
.pipeline-details-card .lead {
margin-bottom: 16px;
}
.pipeline-details-list {
gap: 9px;
}
.pipeline-image-placeholder {
height: 260px;
}
.pipeline-navigation {
margin-top: 0;
}
}
/* Responsive Mobile Layout */
@media(max-width: 820px) {
.nav .brand img {
width: 46px;
height: 46px;
}
.pipeline-sticky-wrap {
position: relative;
top: 0;
height: auto;
display: block;
padding: 20px 0;
}
.pipeline-scroll-container {
height: auto !important;
/* Disables sticky scroll on mobile */
}
.pipeline-section {
padding: 10px 0;
margin: 20px auto;
}
.pipeline-track {
display: none;
}
.pipeline-plane {
display: none;
}
.pipeline-steps {
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.pipeline-step {
position: relative;
flex-direction: row;
width: 100%;
align-items: center;
gap: 16px;
padding: 12px 16px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--panel);
box-shadow: var(--shadow-card);
}
/* Chevron affordance showing each step is tappable/expandable */
.pipeline-step::after {
content: "";
width: 8px;
height: 8px;
margin-left: auto;
flex-shrink: 0;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(45deg);
transition: transform 0.3s ease, border-color 0.3s ease;
}
.pipeline-step.active::after {
transform: rotate(-135deg);
border-color: var(--primary);
}
.pipeline-icon-container {
margin-bottom: 0;
width: 48px;
height: 48px;
flex-shrink: 0;
}
.pipeline-icon {
width: 48px;
height: 48px;
border-radius: 12px;
}
.pipeline-icon svg {
width: 20px;
height: 20px;
}
.pipeline-label {
text-align: left;
font-size: 0.95rem;
}
.pipeline-step.active {
border-color: rgba(37, 99, 235, 0.4);
background: rgba(37, 99, 235, 0.02);
}
.pipeline-details-container {
padding: 24px 20px;
margin: 14px 0 0;
}
.pipeline-navigation {
display: none;
}
.pipeline-details-card {
grid-template-columns: 1fr;
gap: 24px;
}
.pipeline-image-placeholder {
height: 220px;
}
}
.scrolly-steps .step:last-child {
padding-bottom: 20vh;
}
@media(max-width: 900px) {
/* On mobile .scrolly-media isn't sticky/pinned anymore, so the large
end-of-timeline buffer below (meant to give the desktop pinned image
room to keep displaying the last step while scrolling) is just an
empty gap here. Collapse it back down. */
.scrolly-steps .step:last-child {
padding-bottom: 0;
}
}
.scrolly-spacer {
height: 20vh;
}
.hospitality-bg{
background-position: center 1%;
}
/* =========================================
HOMEPAGE SPECIFIC HERO STYLES
========================================= */
.home-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
padding: 140px 0 100px;
background: var(--bg);
overflow: hidden;
}
/* Background layout structure */
.home-hero::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 45%;
height: 100%;
background: #eef4ff; /* Light blue background behind the curve */
border-bottom-left-radius: 100px;
z-index: 0;
}
.home-hero-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 40px;
align-items: center;
position: relative;
z-index: 2;
}
/* --- Left Column: Typography & Buttons --- */
.home-hero-content {
padding-right: 20px;
}
.home-hero-content h1 {
font-size: clamp(3rem, 5.5vw, 5rem);
line-height: 1.1;
color: var(--dark-blue);
margin-bottom: 20px;
}
.home-hero-content .accent-text {
color: var(--accent);
}
/* The orange underline beneath the headline */
.accent-underline {
width: 80px;
height: 4px;
background: var(--accent);
margin-bottom: 30px;
border-radius: 2px;
}
.home-hero-content p {
font-size: 1.1rem;
color: var(--muted);
max-width: 540px;
margin-bottom: 40px;
}
.home-hero-actions {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
}
.btn.with-icon {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
border-radius: 8px;
color: var(--text);
border: 1px solid var(--line);
background: #fff;
}
.btn.with-icon:hover {
background: #f8fafc;
border-color: var(--muted);
}
.play-icon {
width: 20px;
height: 20px;
color: var(--muted);
}
/* --- Right Column: Curved Image & Floating Card --- */
.home-hero-visual {
position: relative;
height: 600px;
width: 100%;
}
.hero-image-mask {
width: 100%;
height: 100%;
/* Creates that sweeping curve on the left side */
border-radius: 200px 0 0 200px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}
.hero-image-mask img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Floating Regions Card */
.floating-regions-card {
position: absolute;
bottom: -30px;
right: 40px;
background: #ffffff;
padding: 24px 32px;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
display: flex;
gap: 32px;
z-index: 10;
border: 1px solid rgba(0,0,0,0.03);
}
.floating-regions-card .region {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.floating-regions-card .region-icon {
width: 32px;
height: 32px;
}
.floating-regions-card span {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.9rem;
font-weight: 600;
color: var(--dark-blue);
}
/* Dotted Background Accents */
.hero-bg-dots {
position: absolute;
bottom: 20%;
left: 35%;
width: 200px;
height: 200px;
background-image: radial-gradient(rgba(15, 23, 42, 0.15) 2px, transparent 2px);
background-size: 20px 20px;
z-index: 1;
}
/* Mobile Responsiveness for the new Hero */
@media(max-width: 991px) {
.home-hero-grid {
grid-template-columns: 1fr;
text-align: center;
}
.home-hero::before {
display: none;
}
.home-hero-content {
padding-right: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.home-hero-content p {
text-align: center;
}
.home-hero-actions {
justify-content: center;
}
.hero-image-mask {
border-radius: 32px; /* Simplify curve for mobile */
height: 400px;
}
.home-hero-visual {
height: auto;
margin-top: 40px;
}
.floating-regions-card {
right: 50%;
transform: translateX(50%);
bottom: -40px;
width: max-content;
padding: 16px 24px;
gap: 20px;
}
}
.world-map-section {
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.world-map-card {
position: relative;
/* increase vertical space so the full map image can be visible */
height: clamp(420px, 52vw, 720px);
border-radius: 28px;
overflow: hidden;
border: none;
}
.world-map-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* fill the card edge-to-edge with the image (no black bars) */
object-fit: cover;
object-position: center center;
z-index: 0;
}
@media(max-width: 720px) {
.world-map-card {
/* mobile: give a bit more height so the full map remains visible */
height: 340px;
border-radius: 22px;
}
}
/* Sticky sitemap explore section */
.site-map-scroll {
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
overflow: visible;
}
.site-map-layout {
display: grid;
grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.25fr);
gap: clamp(48px, 7vw, 96px);
align-items: start;
}
.site-map-sticky {
position: sticky;
top: 18vh;
min-height: 62vh;
display: grid;
grid-template-columns: 5px minmax(0, 1fr);
gap: clamp(24px, 3vw, 40px);
align-items: center;
}
.site-map-line {
position: relative;
width: 5px;
height: min(420px, 48vh);
border-radius: 999px;
overflow: hidden;
background: rgba(37, 99, 235, 0.14);
box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.1), 0 18px 45px rgba(37, 99, 235, 0.18);
}
.site-map-line-fill {
position: absolute;
left: 0;
right: 0;
top: 0;
height: calc(var(--site-map-progress, 0) * 100%);
border-radius: inherit;
background: linear-gradient(180deg, var(--accent), var(--primary));
box-shadow: 0 12px 30px rgba(37, 99, 235, 0.35);
transition: height 0.16s ease-out;
}
.site-map-sticky h2 {
max-width: 560px;
margin-top: 18px;
font-size: clamp(2.7rem, 6vw, 5.8rem);
line-height: 0.95;
letter-spacing: 0;
}
.site-map-sticky p {
max-width: 420px;
margin-top: 24px;
color: var(--muted);
font-size: 1.05rem;
}
.site-map-list {
display: grid;
gap: 28px;
padding: 12vh 0 8vh;
}
.site-map-card {
position: relative;
display: block;
min-height: 210px;
overflow: hidden;
text-decoration: none;
transform-origin: center right;
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border: 1px solid rgba(37, 99, 235, 0.12);
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}
.site-map-card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 5px;
background: linear-gradient(180deg, var(--primary), var(--accent));
opacity: 0.9;
}
.site-map-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(37, 99, 235, 0.08), transparent 44%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.site-map-card .icon {
border-color: rgba(37, 99, 235, 0.24);
background: #eff6ff;
color: var(--primary);
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
}
.site-map-card .icon svg {
width: 26px;
height: 26px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.site-map-card h3,
.site-map-card p,
.site-map-card .icon {
position: relative;
z-index: 1;
}
.site-map-card.reveal {
transform: translateX(56px);
}
.site-map-card.reveal.on {
transform: translateX(0);
}
.site-map-card:nth-child(2) {
transition-delay: 0.06s;
}
.site-map-card:nth-child(3) {
transition-delay: 0.12s;
}
.site-map-card:nth-child(4) {
transition-delay: 0.18s;
}
.site-map-card:nth-child(5) {
transition-delay: 0.24s;
}
.site-map-card:nth-child(6) {
transition-delay: 0.3s;
}
.site-map-card:nth-child(7) {
transition-delay: 0.36s;
}
.site-map-card:nth-child(even) {
margin-left: clamp(0px, 5vw, 54px);
}
.site-map-card:hover {
border-color: rgba(37, 99, 235, 0.32);
transform: translateY(-4px);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}
.site-map-card:hover::after {
opacity: 1;
}
.site-map-card:hover h3 {
color: var(--primary);
}
@media(max-width: 900px) {
.site-map-scroll {
padding: 84px 0;
}
.site-map-layout {
grid-template-columns: 1fr;
gap: 34px;
}
.site-map-sticky {
position: relative;
top: auto;
min-height: 0;
grid-template-columns: 4px minmax(0, 1fr);
gap: 20px;
align-items: start;
}
.site-map-line {
height: 100%;
min-height: 190px;
}
.site-map-sticky h2 {
font-size: clamp(2.2rem, 13vw, 3.5rem);
}
.site-map-sticky p {
margin-top: 18px;
}
.site-map-list {
gap: 18px;
padding: 0;
}
.site-map-card,
.site-map-card:nth-child(even) {
min-height: 0;
margin-left: 0;
}
.site-map-card .icon {
width: 44px;
height: 44px;
margin-bottom: 16px;
}
.site-map-card .icon svg {
width: 23px;
height: 23px;
}
.site-map-card.reveal {
transform: translateY(24px);
}
.site-map-card.reveal.on {
transform: translateY(0);
}
}
/* Footer logo */
.footer .brand img{
width: 70px;
height: auto;
object-fit: contain;
}
.brand-text{
display:flex;
flex-direction:column;
justify-content:center;
line-height:1;
}
.brand-name{
font-size:1.6rem;
font-weight:700;
}
.brand-sub{
font-size:0.65rem;
letter-spacing:0.35em;
color:var(--accent);
margin-top:3px;
}
.footer-contact li{
display:flex;
align-items:flex-start;
gap:14px;
}
.footer-icon{
width:22px;
height:22px;
color:var(--accent);
flex-shrink:0;
margin-top:2px;
}
/* =========================================
MISSION / VISION CARDS (matching reference)
========================================= */
.mv-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: stretch;
}
.mv-card {
position: relative;
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid var(--line);
border-radius: 24px;
padding: 40px;
box-shadow: var(--shadow-card);
overflow: hidden;
}
.mv-card--accent {
padding-bottom: 40px;
}
.mv-card--globe {
background:
radial-gradient(circle at 92% 8%, rgba(37, 99, 235, 0.05), transparent 42%),
#ffffff;
}
.mv-map-dots {
position: absolute;
top: -30px;
right: -30px;
width: 280px;
height: 220px;
background-image: radial-gradient(rgba(37, 99, 235, 0.14) 1.4px, transparent 1.4px);
background-size: 15px 15px;
-webkit-mask-image: radial-gradient(circle at 68% 32%, black 0%, transparent 68%);
mask-image: radial-gradient(circle at 68% 32%, black 0%, transparent 68%);
pointer-events: none;
}
.mv-icon-wrap {
position: relative;
width: 72px;
height: 72px;
border-radius: 50%;
background: #eef4ff;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
margin-bottom: 24px;
z-index: 1;
}
.mv-icon-wrap svg {
width: 34px;
height: 34px;
}
.mv-icon-wrap .mv-star {
position: absolute;
color: var(--accent);
line-height: 1;
}
.mv-star--1 { top: -4px; right: 4px; font-size: 0.85rem; }
.mv-star--2 { top: 16px; right: -12px; font-size: 0.6rem; }
.mv-star--3 { bottom: 0; right: -12px; font-size: 0.55rem; }
.mv-pin {
position: absolute;
top: 10px;
right: 4px;
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--accent);
border: 2px solid #ffffff;
z-index: 1;
}
.mv-card h2 {
font-size: clamp(1.5rem, 2.6vw, 2rem);
line-height: 1.12;
max-width: 100%;
text-wrap: balance;
position: relative;
z-index: 1;
}
.mv-card h2 .dot {
color: var(--accent);
}
.mv-underline {
width: 48px;
height: 4px;
background: var(--accent);
border-radius: 4px;
margin: 8px 0 22px;
}
.mv-card > p {
color: #334155;
font-size: 0.98rem;
position: relative;
z-index: 1;
}
.mv-divider {
height: 1px;
background: var(--line);
border: none;
margin: 98px 0 26px;
}
.mv-card--globe .mv-subgrid--boxed {
margin-top: auto !important;
}
.mv-subgrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
position: relative;
z-index: 1;
}
.mv-subgrid--boxed {
background: #eef4ff;
border-radius: 16px;
padding: 26px 20px;
box-shadow:
inset 0 1px 2px rgba(15, 23, 42, 0.04),
0 4px 14px rgba(37, 99, 235, 0.08);
}
.mv-sub {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
}
.mv-sub-icon {
width: 42px;
height: 42px;
color: var(--primary);
}
.mv-sub-icon svg {
width: 100%;
height: 100%;
}
.mv-sub h4 {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 0.95rem;
color: #0f172a;
line-height: 1.25;
margin: 0;
}
.mv-sub p {
font-size: 0.82rem;
color: #64748b;
line-height: 1.45;
}
@media(max-width: 900px) {
.mv-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.mv-subgrid {
grid-template-columns: repeat(2, 1fr);
}
}
@media(max-width: 480px) {
.mv-card {
padding: 28px 20px 26px;
}
.mv-icon-wrap {
width: 60px;
height: 60px;
margin-bottom: 18px;
}
.mv-icon-wrap svg {
width: 28px;
height: 28px;
}
.mv-divider {
margin: 32px 0 20px;
}
.mv-subgrid {
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.mv-subgrid--boxed {
padding: 18px 14px;
}
.mv-sub-icon {
width: 34px;
height: 34px;
}
.mv-sub h4 {
font-size: 0.85rem;
}
.mv-sub p {
font-size: 0.76rem;
}
}
/* =========================================
FEATURE CARDS WITH TOP ICON + CORNER ILLUSTRATION
(used on the Services teaser & Why AZION sections)
========================================= */
.feature-card {
position: relative;
overflow: hidden;
}
.feature-card .icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.feature-card h3,
.feature-card p,
.feature-card .icon {
position: relative;
z-index: 2;
}
/* reserve room at the bottom-right so copy never runs under the illustration */
.feature-card p {
padding-right: 92px;
padding-bottom: 8px;
}
.feature-illust {
position: absolute;
right: -14px;
bottom: -14px;
width: 104px;
height: 104px;
z-index: 1;
pointer-events: none;
opacity: 0.95;
}
.feature-illust svg {
width: 100%;
height: 100%;
display: block;
}
@media(max-width: 900px) {
.feature-card p {
padding-right: 0;
}
.feature-illust {
width: 90px;
height: 90px;
right: -10px;
bottom: -10px;
opacity: 0.8;
}
}
@media(max-width: 480px) {
.feature-illust {
width: 78px;
height: 78px;
}
}
/* Decorative section image backgrounds for the white screenshot sections. */
.section-bg-art {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: #f8fbff;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.section.mv-tight {
padding: 56px 0;
}
.section-bg-art::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: rgba(255, 255, 255, 0.28);
pointer-events: none;
}
/* Abstract light-blue shapes drawn purely in CSS, so the section never
looks empty even if the background photo above doesn't load. Soft
blurred blobs + a faint dot grid, echoing the hero's visual language. */
.section-bg-art::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(rgba(37, 99, 235, 0.09) 1px, transparent 1px) 0 0/28px 28px,
radial-gradient(circle at 6% 12%, rgba(37, 99, 235, 0.16), transparent 34%),
radial-gradient(circle at 96% 8%, rgba(124, 58, 237, 0.12), transparent 30%),
radial-gradient(circle at 92% 94%, rgba(37, 99, 235, 0.14), transparent 32%),
radial-gradient(circle at 4% 96%, rgba(249, 115, 22, 0.08), transparent 26%);
-webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 55%, transparent 100%);
mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 55%, transparent 100%);
}
.section-bg-art > .container {
position: relative;
z-index: 1;
}
.section-bg-art--one {
background-image: url('../images/backround1.webp');
}
.section-bg-art--two {
background-image: url('../images/backround2.webp');
}
@media(max-width: 760px) {
.section-bg-art {
background-position: center top;
}
.section-bg-art::after {
background:
radial-gradient(rgba(37, 99, 235, 0.09) 1px, transparent 1px) 0 0/22px 22px,
radial-gradient(circle at 12% 8%, rgba(37, 99, 235, 0.16), transparent 36%),
radial-gradient(circle at 90% 92%, rgba(37, 99, 235, 0.14), transparent 34%);
}
}
/* FOLLOW US SOCIAL ROW */
.social-follow {
margin-top: 48px;
text-align: center;
}
.social-follow-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 22px;
}
.social-follow-line {
width: 64px;
height: 1px;
background: var(--line);
position: relative;
}
.social-follow-line::after {
content: "";
position: absolute;
top: 50%;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--primary);
transform: translateY(-50%);
}
.social-follow-divider .social-follow-line:first-child::after {
right: -2px;
}
.social-follow-divider .social-follow-line:last-child::after {
left: -2px;
}
.social-follow-label {
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 0.95rem;
color: var(--text);
}
.social-follow-icons {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.social-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-card);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.social-icon:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.social-icon svg {
width: 22px;
height: 22px;
}
.social-icon--facebook { color: #1877f2; }
.social-icon--linkedin { color: #0a66c2; }
.social-icon--instagram { color: #e1306c; }
.social-icon--twitter { color: #1da1f2; }
.social-icon--youtube { color: #ff0000; }
.social-icon--x svg {
width: 20px;
height: 20px;
display: block;
}
.section-constellation {
position: relative;
isolation: isolate;
overflow: hidden;
}
.section-constellation::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: url('../images/constellation-bg.svg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: 0.9;
pointer-events: none;
}
.section-constellation > .container {
position: relative;
z-index: 1;
}
.section-abstract {
position: relative;
isolation: isolate;
overflow: hidden;
}
.section-abstract::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: url('../images/abstract-bg.svg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
pointer-events: none;
}
.section-abstract > .container {
position: relative;
z-index: 1;
}
/* Hero headline font override — Bahnschrift Condensed */
.home-hero-content h1, /* index.html hero */
.hero h1, /* generic/legacy hero */
.page-hero-copy h1 { /* all inner-page heroes */
font-family: 'Bahnschrift Condensed', 'Bahnschrift', 'Space Grotesk', sans-serif;
font-stretch: condensed;
}
.built-beyond-title {
text-align: center;
margin-top: 35px;
margin-bottom: 50px; /* Increase to 60px or 70px if needed */
}
/* PRIVACY POLICY — intentionally static, long-form reading layout */
.privacy-hero { padding: 180px 0 92px; background: linear-gradient(135deg, #eef5ff 0%, #fff 55%, #fff4eb 100%); border-bottom: 1px solid var(--line); }
.privacy-hero h1 { max-width: 700px; margin: 12px 0 20px; font-size: clamp(3rem, 6vw, 5.4rem); }
.privacy-hero h1 span { color: var(--accent); }
.privacy-hero > .container > p:not(.privacy-kicker):not(.privacy-updated) { max-width: 650px; color: #334155; font-size: 1.08rem; }
.privacy-kicker { color: var(--primary); font-size: .72rem; font-weight: 700; letter-spacing: .16em; margin: 0; }
.privacy-updated { margin-top: 28px; color: var(--muted); font-size: .9rem; }
.privacy-content { padding: 92px 0 120px; }
.privacy-layout { display: grid; grid-template-columns: 220px minmax(0, 800px); justify-content: center; gap: clamp(48px, 8vw, 120px); }
.privacy-aside { position: sticky; top: 120px; align-self: start; padding: 20px 0; border-top: 2px solid var(--primary); }
.privacy-aside p { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .12em; margin-bottom: 14px; }
.privacy-aside a { display: block; color: #475569; font-size: .86rem; padding: 7px 0; }
.privacy-aside a:hover { color: var(--primary); }
.privacy-article section { padding: 0 0 42px; margin-bottom: 42px; border-bottom: 1px solid var(--line); }
.privacy-article h2 { font-size: clamp(1.55rem, 2.5vw, 2.15rem); margin-bottom: 18px; }
.privacy-article h3 { margin: 26px 0 10px; font-size: 1.1rem; }
.privacy-article p, .privacy-article li { color: #334155; line-height: 1.8; }
.privacy-article p + p { margin-top: 16px; }
.privacy-article ul { margin: 16px 0 0; padding-left: 22px; }
.privacy-article li + li { margin-top: 8px; }
.privacy-contact { background: #f1f6ff; border: 1px solid #dce9ff !important; border-left: 4px solid var(--accent) !important; border-radius: var(--radius); padding: 36px !important; }
.privacy-contact .privacy-kicker { margin-bottom: 12px; }
.privacy-contact address { color: #334155; font-style: normal; line-height: 1.8; margin-top: 20px; }
.privacy-contact address a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .privacy-hero { padding: 140px 0 64px; } .privacy-content { padding: 56px 0 80px; } .privacy-layout { display: block; } .privacy-aside { display: none; } .privacy-article section { padding-bottom: 32px; margin-bottom: 32px; } .privacy-contact { padding: 26px !important; } }