/* nordly digital — Nordic premium design system */
/* ---------- fonts ---------- */
@font-face {
font-family: 'Cabinet';
src: url('../fonts/CabinetGrotesk-Variable.woff2') format('woff2');
font-weight: 100 1000; font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Variable.woff2') format('woff2');
font-weight: 300 900; font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-VariableItalic.woff2') format('woff2');
font-weight: 300 900; font-style: italic; font-display: swap;
}
/* ---------- tokens ---------- */
:root {
--paper: #FAFBFC;
--fog: #EEF2F5;
--ink: #10151C;
--muted: #5A6672;
--navy: #0B1B2B;
--navy-deep: #071220;
--on-dark: #E9EFF4;
--on-dark-muted: #93A5B4;
--teal: #3ADFB4; --cyan: #6FD4FF; --violet: #8B7CF6;
--aurora: linear-gradient(92deg, var(--teal), var(--cyan) 55%, var(--violet));
--hairline: rgba(16, 21, 28, .1);
--hairline-dark: rgba(255, 255, 255, .1);
--r: 18px;
--sp-4: clamp(2.5rem, 5vw, 4rem);
--section: clamp(5rem, 10vw, 8.5rem);
--container: 1240px;
--gutter: clamp(1.25rem, 4vw, 2.5rem);
--ease: cubic-bezier(.16, 1, .3, 1);
}
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip contains decorative glows & slide-in reveal animations so no page
ever scrolls horizontally — which on mobile would expand the layout viewport and push
the fixed header/menu toggle off the right edge (was happening on the homepage). */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
margin: 0; background: var(--paper); color: var(--ink);
font-family: 'Satoshi', system-ui, sans-serif;
font-size: 1.05rem; line-height: 1.65; font-weight: 460;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: 'Cabinet', 'Satoshi', sans-serif; margin: 0; }
::selection { background: var(--teal); color: var(--navy); }
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container.narrow { max-width: 880px; }
.section { padding-block: var(--section); }
.section.alt { background: var(--fog); }
.section.dark { background: var(--navy); color: var(--on-dark); }
.skip {
position: fixed; top: -100px; left: 1rem; z-index: 200; padding: .7rem 1.2rem;
background: var(--navy); color: #fff; border-radius: 10px; transition: top .2s;
}
.skip:focus { top: 1rem; }
/* ---------- type ---------- */
.display-1 { font-size: clamp(2.7rem, 6.5vw, 5.2rem); font-weight: 780; letter-spacing: -.03em; line-height: 1.02; }
.display-2 { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 760; letter-spacing: -.025em; line-height: 1.06; }
.display-3 { font-size: clamp(1.45rem, 2.6vw, 2.1rem); font-weight: 720; letter-spacing: -.02em; line-height: 1.15; }
.lead { font-size: 1.18rem; line-height: 1.65; }
.grad {
background: var(--aurora);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.kicker {
display: flex; align-items: center; gap: .75rem; margin: 0 0 1.1rem;
font-size: .78rem; font-weight: 640; letter-spacing: .16em; text-transform: uppercase;
color: var(--muted);
}
.kicker::before { content: ''; width: 26px; height: 2px; background: var(--aurora); border-radius: 2px; }
.kicker.center { justify-content: center; }
.dark .kicker, .kicker-aurora { color: var(--cyan); }
.eyebrow {
margin: 0 0 1.2rem; font-size: .8rem; font-weight: 620; letter-spacing: .18em;
text-transform: uppercase; color: var(--on-dark-muted);
}
.eyebrow a { color: var(--cyan); }
/* ---------- buttons & links ---------- */
.btn {
display: inline-flex; align-items: center; gap: .6rem;
padding: .95rem 1.7rem; border: 0; border-radius: 999px; cursor: pointer;
background: var(--navy); color: #fff;
font-family: 'Satoshi', sans-serif; font-size: .98rem; font-weight: 620; letter-spacing: .01em;
transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(11, 27, 43, .45); }
.btn-light { background: #fff; color: var(--navy); }
.btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.btn-small { padding: .62rem 1.25rem; font-size: .9rem; }
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.text-link {
display: inline-flex; align-items: center; gap: .45rem;
font-weight: 640; font-size: .98rem; color: inherit;
}
.text-link .arr { transition: transform .35s var(--ease); }
a:hover .text-link .arr, .text-link:hover .arr { transform: translateX(4px); }
/* ---------- header ---------- */
.site-head {
position: fixed; inset: 0 0 auto; z-index: 100;
color: #fff; transition: background .35s, color .35s, box-shadow .35s;
}
.head-inner {
max-width: var(--container); margin-inline: auto; padding: 1.1rem var(--gutter);
display: flex; align-items: center; gap: 2.2rem;
}
.logo { font-family: 'Cabinet', sans-serif; font-size: 1.5rem; font-weight: 820; letter-spacing: -.02em; }
.logo-mark {
font-size: 1.25em; line-height: 0; vertical-align: -.08em;
background: var(--aurora);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.logo-word { margin-left: .16em; font-weight: 540; opacity: .66; letter-spacing: -.01em; }
.head-nav { display: flex; gap: 1.9rem; margin-inline: auto; }
.head-link { position: relative; font-size: .96rem; font-weight: 560; opacity: .85; transition: opacity .2s; }
.head-link::after {
content: ''; position: absolute; left: 0; bottom: -5px; width: 100%; height: 2px;
background: var(--aurora); border-radius: 2px; transform: scaleX(0); transform-origin: left;
transition: transform .35s var(--ease);
}
.head-link:hover, .head-link.active { opacity: 1; }
.head-link:hover::after, .head-link.active::after { transform: scaleX(1); }
.head-right { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.site-head .btn-small { background: #fff; color: var(--navy); }
.site-head.scrolled {
background: rgba(250, 251, 252, .82); color: var(--ink);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
box-shadow: 0 1px 0 var(--hairline);
}
.site-head.scrolled .btn-small { background: var(--navy); color: #fff; }
/* language dropdown */
.lang { position: relative; }
.lang-btn {
display: inline-flex; align-items: center; gap: .4rem;
background: none; border: 0; cursor: pointer; color: inherit;
font-family: inherit; font-size: .88rem; font-weight: 620; letter-spacing: .06em;
padding: .5rem .3rem;
}
.lang-btn svg { transition: transform .25s; }
.lang.open .lang-btn svg { transform: rotate(180deg); }
.lang-menu {
position: absolute; top: calc(100% + .6rem); right: 0; min-width: 150px;
margin: 0; padding: .45rem; list-style: none;
background: #fff; color: var(--ink); border-radius: 14px;
box-shadow: 0 18px 50px -12px rgba(11, 27, 43, .3), 0 0 0 1px var(--hairline);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .25s, transform .25s var(--ease), visibility .25s;
}
.lang.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu a {
display: block; padding: .55rem .85rem; border-radius: 9px;
font-size: .93rem; font-weight: 540;
}
.lang-menu a:hover { background: var(--fog); }
.lang-menu a[aria-current] { background: var(--navy); color: #fff; }
/* mobile nav */
.menu-toggle { display: none; }
.mobile-nav {
position: fixed; inset: 0; z-index: 90;
padding: calc(env(safe-area-inset-top) + 5.5rem) var(--gutter) calc(env(safe-area-inset-bottom) + 2rem);
display: flex; flex-direction: column;
background:
radial-gradient(120% 80% at 85% -10%, rgba(56, 189, 248, .16), transparent 60%),
radial-gradient(90% 70% at 0% 110%, rgba(129, 140, 248, .14), transparent 55%),
var(--navy-deep);
color: var(--on-dark);
opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
overflow-y: auto;
}
.mobile-nav.open { opacity: 1; visibility: visible; }
.mnav-links { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.mnav-link {
display: flex; align-items: center; justify-content: space-between;
padding: 1.15rem 0; border-bottom: 1px solid var(--hairline-dark);
font-family: 'Cabinet', sans-serif; font-size: clamp(1.65rem, 7.5vw, 2.1rem); font-weight: 720; letter-spacing: -.02em;
opacity: 0; transform: translateY(16px);
transition: opacity .55s var(--ease), transform .55s var(--ease), color .25s;
}
.mnav-link::after {
content: '→'; font-size: .55em; font-weight: 500; opacity: .3;
transition: transform .3s var(--ease), opacity .3s;
}
.mnav-link:hover, .mnav-link:focus-visible { color: #fff; }
.mnav-link:hover::after, .mnav-link:focus-visible::after { transform: translateX(5px); opacity: .8; }
.mnav-foot { margin-top: 2.2rem; opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.mnav-cta {
display: flex; width: 100%; justify-content: center;
/* dark ink on the bright aurora reads far better than white did on the light teal end */
background: var(--aurora); color: var(--navy); margin-bottom: 1.4rem;
padding-block: 1.15rem; font-size: 1.06rem; font-weight: 720; letter-spacing: .005em;
}
.mobile-nav.open .mnav-link, .mobile-nav.open .mnav-foot { opacity: 1; transform: none; }
.mobile-nav.open .mnav-link:nth-child(1) { transition-delay: .06s; }
.mobile-nav.open .mnav-link:nth-child(2) { transition-delay: .11s; }
.mobile-nav.open .mnav-link:nth-child(3) { transition-delay: .16s; }
.mobile-nav.open .mnav-link:nth-child(4) { transition-delay: .21s; }
.mobile-nav.open .mnav-link:nth-child(5) { transition-delay: .26s; }
.mobile-nav.open .mnav-link:nth-child(6) { transition-delay: .31s; }
.mobile-nav.open .mnav-foot { transition-delay: .36s; }
.mnav-langs { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.mnav-langs a {
display: block; padding: .5rem 1rem; border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--hairline-dark); font-size: .9rem; transition: background .2s, color .2s;
}
.mnav-langs a:hover { background: rgba(255, 255, 255, .08); }
.mnav-langs a[aria-current] { background: #fff; color: var(--navy); box-shadow: none; }
body.no-scroll { overflow: hidden; }
/* ---------- hero (home) ---------- */
.hero {
position: relative; min-height: 100svh; display: flex; align-items: flex-end;
color: #fff; overflow: hidden; background: var(--navy-deep);
}
.hero-bg, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* slow, perpetual breathing zoom — keeps the scene alive without ever settling */
.hero-bg img { object-fit: cover; will-change: transform; animation: heroZoom 42s ease-in-out infinite alternate; }
@keyframes heroZoom { from { transform: scale(1.05); } to { transform: scale(1.12); } }
.hero-bg::after {
content: ''; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(185deg, rgba(7, 18, 32, .5), rgba(7, 18, 32, .12) 45%, rgba(7, 18, 32, .78));
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(4.5rem, 9vh, 7.5rem); }
.hero .eyebrow { color: rgba(233, 239, 244, .75); }
.hero-title {
margin: 0 0 1.4rem; font-size: clamp(3.1rem, 9vw, 7.2rem);
font-weight: 800; letter-spacing: -.035em; line-height: .98;
}
.hero-sub { max-width: 36rem; margin: 0 0 2.2rem; font-size: 1.16rem; line-height: 1.6; color: #C6D3DE; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; }
.scroll-hint {
position: absolute; right: var(--gutter); bottom: 2.2rem; z-index: 2;
font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(233, 239, 244, .55);
writing-mode: vertical-rl; display: flex; align-items: center; gap: .7rem;
}
.scroll-hint::after {
content: ''; width: 1px; height: 44px;
background: linear-gradient(180deg, var(--cyan), transparent);
animation: drip 2.2s ease-in-out infinite;
}
@keyframes drip { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
/* ---------- page hero (subpages) ---------- */
.page-hero {
position: relative; padding: clamp(9rem, 16vh, 12rem) 0 clamp(3.5rem, 7vh, 5.5rem);
background:
radial-gradient(760px 380px at 88% -12%, rgba(58, 223, 180, .22), transparent 64%),
radial-gradient(620px 340px at 6% 112%, rgba(139, 124, 246, .2), transparent 64%),
var(--navy);
color: var(--on-dark); overflow: hidden;
}
.page-hero .aurora { opacity: .5; }
.page-hero .container { position: relative; z-index: 2; }
/* ---- signature aurora-field hero (services) ---- */
.page-hero-aurora { padding-top: clamp(10rem, 20vh, 14rem); padding-bottom: clamp(5rem, 11vh, 8rem); }
.hero-aurora {
position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block;
/* fade the field out toward the bottom so it melts into the section below */
-webkit-mask-image: linear-gradient(180deg, #000 58%, transparent);
mask-image: linear-gradient(180deg, #000 58%, transparent);
}
/* legibility scrim over the text zone (between canvas and content) */
.page-hero-aurora::before {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, transparent 34%, rgba(7, 18, 32, .34) 74%, rgba(7, 18, 32, .58));
}
.page-hero .display-1, .page-hero .display-2 { max-width: 17ch; }
.page-hero .hero-sub { color: var(--on-dark-muted); max-width: 40rem; }
/* ---------- home sections ---------- */
.manifesto .display-1 { max-width: 16ch; }
.manifesto-sub { max-width: 44rem; margin: 1.6rem 0 0; font-size: 1.3rem; line-height: 1.6; color: var(--muted); }
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .display-2 { max-width: 22ch; }
.section-head.split { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.75rem); }
.svc-card { display: block; transition: transform .55s var(--ease); }
.svc-card:hover { transform: translateY(-6px); }
.svc-img { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.svc-card:hover .svc-img img { transform: scale(1.05); }
.svc-num {
display: inline-block; margin: 1.4rem 0 .5rem; font-weight: 700; font-size: .92rem; letter-spacing: .08em;
background: var(--aurora);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.svc-card h3 { font-size: 1.5rem; font-weight: 730; letter-spacing: -.015em; margin-bottom: .55rem; }
.svc-card p { margin: 0 0 1rem; color: var(--muted); }
/* featured first service — full-width hero card */
.svc-feat {
grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr .8fr;
gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
margin-bottom: clamp(.5rem, 2vw, 1.5rem);
}
.svc-feat .svc-viz { position: relative; }
.svc-feat .svc-num { margin-top: 0; font-size: 1rem; }
.svc-feat h3 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 760; margin-bottom: .8rem; }
.svc-feat p { font-size: clamp(1.02rem, 1.4vw, 1.2rem); max-width: 34ch; margin-bottom: 1.4rem; }
.svc-feat:hover { transform: translateY(-4px); }
/* aurora glow behind the featured vignette */
.svc-glow {
position: absolute; inset: -14% -10%; z-index: 0; border-radius: 50%;
background: radial-gradient(60% 60% at 50% 45%, rgba(111, 212, 255, .38), rgba(58, 223, 180, .18) 45%, transparent 72%);
filter: blur(26px); opacity: .8; transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.svc-feat:hover .svc-glow { opacity: 1; transform: scale(1.06); }
.svc-feat .viz { position: relative; z-index: 1; box-shadow: 0 30px 70px -30px rgba(11, 27, 43, .6); }
.app-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.app-copy .display-2 { margin-bottom: 1.1rem; }
.app-copy .lead { color: var(--on-dark-muted); margin: 0 0 1.6rem; }
.app-visual img { border-radius: var(--r); width: 100%; max-height: 620px; object-fit: cover; }
.check-list { list-style: none; margin: 0 0 2.2rem; padding: 0; }
.check-list li { position: relative; padding: .55rem 0 .55rem 2.5rem; font-weight: 520; }
.check-list li::before {
content: ''; position: absolute; left: 0; top: .68rem; width: 25px; height: 25px; border-radius: 8px;
background:
url('data:image/svg+xml;utf8,') center / 16px no-repeat,
linear-gradient(135deg, #3ADFB4, #6FD4FF 55%, #8B7CF6);
box-shadow: 0 7px 18px -5px rgba(58, 223, 180, .55), inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.1rem, 1.8vw, 1.6rem); }
/* base numeral (used as-is by the contact page's .next-step) */
.proc-num {
font-family: 'Cabinet', sans-serif; font-size: 3.6rem; font-weight: 780; line-height: 1;
color: transparent; -webkit-text-stroke: 1.3px rgba(11, 27, 43, .4);
}
/* --- homepage "how we work" — connected process timeline --- */
/* clean gradient-ring nodes joined by a line that draws in step by step (no glow) */
.process .proc-grid { --pgap: clamp(1.4rem, 2.4vw, 2.1rem); --pstep: .62s; grid-template-columns: repeat(4, 1fr); gap: var(--pgap); align-items: start; text-align: center; }
.proc-step { position: relative; padding: 0 .5rem; }
/* the line linking each node to the next — centre-to-centre, tucked behind the opaque nodes.
Drawn with a gentle ease-in-out and staggered per step, so the timeline builds left → right
deliberately (starts only once its own node has landed) rather than sweeping across at once. */
.proc-step:not(:last-child)::after {
content: ''; position: absolute; top: 31px; left: 50%; width: calc(100% + var(--pgap)); height: 2px; z-index: 0;
transform-origin: left; transform: scaleX(0); border-radius: 2px;
background: linear-gradient(90deg, rgba(58, 223, 180, .5), rgba(111, 212, 255, .45), rgba(139, 124, 246, .38));
transition: transform .95s cubic-bezier(.62, 0, .2, 1) calc(var(--i, 0) * var(--pstep) + .34s);
}
.proc-step.in::after { transform: scaleX(1); }
/* gradient-ring node holding the icon — clean, with a soft neutral shadow (no colour glow) */
.proc-node {
position: relative; z-index: 1; display: grid; place-items: center;
width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1.55rem; padding: 2px;
background: var(--aurora);
box-shadow: 0 10px 24px -12px rgba(11, 27, 43, .28);
/* transform/opacity carry the reveal delay; box-shadow stays instant so hover feels responsive */
transition: transform .8s var(--ease) calc(var(--i, 0) * var(--pstep)), opacity .6s ease calc(var(--i, 0) * var(--pstep)), box-shadow .4s var(--ease) 0s;
}
.proc-icon {
display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
background: var(--paper); color: var(--navy); box-shadow: inset 0 0 0 1px rgba(11, 27, 43, .05);
}
.proc-icon svg { width: 25px; height: 25px; }
/* hover: a gentle neutral shadow lift only — no transform, so the reveal timing stays clean */
.proc-step:hover .proc-node { box-shadow: 0 16px 32px -12px rgba(11, 27, 43, .34); }
/* gradient step number */
.proc-step .proc-num {
display: block; font-family: 'Cabinet', sans-serif; font-size: .88rem; font-weight: 720;
letter-spacing: .2em; line-height: 1; margin-bottom: .6rem;
-webkit-text-stroke: 0; color: transparent; -webkit-text-fill-color: transparent;
background: var(--aurora); -webkit-background-clip: text; background-clip: text;
}
.proc-step h3 { margin: 0 0 .55rem; font-size: 1.28rem; font-weight: 730; letter-spacing: -.015em; }
.proc-step p { margin: 0 auto; max-width: 24ch; color: var(--muted); font-size: .98rem; line-height: 1.62; }
/* choreographed reveal: the step stays put; its node scales in, the line draws to the next node,
then the copy settles — each step offset by --pstep so it reads as a paced, premium build. */
body.anim .process .proc-step.reveal { opacity: 1; transform: none; transition: none; }
body.anim .process .proc-step:not(.in) .proc-node { opacity: 0; transform: scale(.5); }
body.anim .process .proc-step :is(.proc-num, h3, p) { transition: opacity .6s ease, transform .6s var(--ease); }
body.anim .process .proc-step:not(.in) :is(.proc-num, h3, p) { opacity: 0; transform: translateY(12px); }
body.anim .process .proc-step.in :is(.proc-num, h3, p) { transition-delay: calc(var(--i, 0) * var(--pstep) + .2s); }
.industries { padding: var(--section) 0 calc(var(--section) * .8); background: var(--fog); overflow: hidden; }
.marquee { margin-top: 2.2rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: inline-flex; align-items: center; gap: 2.6rem; white-space: nowrap; animation: marquee 36s linear infinite; padding-right: 2.6rem; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-item {
position: relative;
font-family: 'Cabinet', sans-serif; font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 780; letter-spacing: -.02em;
/* default: outline only */
color: transparent; -webkit-text-fill-color: transparent;
-webkit-text-stroke: 1.5px rgba(11, 27, 43, .5);
transition: -webkit-text-stroke-color .5s ease;
}
/* a gradient-filled copy of the word that soft-fades in over the whole body */
.marquee-item::before {
content: attr(data-text); position: absolute; left: 0; top: 0;
-webkit-text-stroke: 0; color: transparent; -webkit-text-fill-color: transparent;
background: var(--aurora); -webkit-background-clip: text; background-clip: text;
opacity: 0; transition: opacity .5s ease;
}
.marquee-item:hover { -webkit-text-stroke-color: transparent; }
.marquee-item:hover::before { opacity: 1; }
.marquee-dot {
font-size: clamp(1.1rem, 2vw, 1.7rem); line-height: 0; color: transparent;
background: var(--aurora);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.4rem); }
/* same crisp hairline + layered elevation as the home service cards, so blog covers read as cards */
.post-img {
border-radius: var(--r); overflow: hidden; aspect-ratio: 3 / 2;
box-shadow: 0 0 0 1px rgba(16, 21, 28, .07), 0 2px 4px rgba(11, 27, 43, .05), 0 14px 30px -12px rgba(11, 27, 43, .22), 0 36px 66px -30px rgba(11, 27, 43, .34);
transition: box-shadow .55s var(--ease);
}
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.post-card { transition: transform .55s var(--ease); }
.post-card:not(.post-card-big):hover { transform: translateY(-5px); }
.post-card:hover .post-img { box-shadow: 0 0 0 1px rgba(16, 21, 28, .09), 0 3px 6px rgba(11, 27, 43, .07), 0 20px 40px -14px rgba(11, 27, 43, .28), 0 52px 92px -34px rgba(11, 27, 43, .44); }
.post-card:hover .post-img img { transform: scale(1.05); }
.post-meta { margin: 1.1rem 0 .4rem; font-size: .84rem; font-weight: 560; letter-spacing: .04em; color: var(--muted); }
.post-card h3 { font-size: 1.3rem; font-weight: 730; letter-spacing: -.015em; margin-bottom: .5rem; }
.post-excerpt {
margin: 0 0 .9rem; color: var(--muted); font-size: .97rem;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* keep the "Read more" link on one baseline across a row of cards, whatever the excerpt length —
the grid stretches the cards to equal height, so push the link to the bottom of each body. */
.post-card:not(.post-card-big) { display: flex; flex-direction: column; }
.post-card:not(.post-card-big) .post-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.post-card:not(.post-card-big) .post-body .text-link { margin-top: auto; }
.post-card-big { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
.post-card-big .post-img { aspect-ratio: 16 / 9; }
.post-card-big h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.post-card-big .post-excerpt { -webkit-line-clamp: 4; font-size: 1.05rem; }
.cta { position: relative; padding: calc(var(--section) * 1.15) 0; background: var(--navy-deep); color: #fff; overflow: hidden; }
.cta-bg, .cta-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cta-bg img { object-fit: cover; opacity: .85; }
.cta-bg::after { content: ''; position: absolute; inset: 0; background: rgba(7, 18, 32, .45); }
.cta-inner { position: relative; z-index: 1; text-align: center; }
.cta-inner .display-2 { max-width: 18ch; margin-inline: auto; }
.cta-sub { max-width: 34rem; margin: 1.3rem auto 2.4rem; color: #B9C8D4; font-size: 1.12rem; }
/* ---------- services page ---------- */
.svc-block-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
/* alternate the vignette left/right down the page for rhythm */
.svc-block-grid.flip .svc-block-viz { order: 2; }
.svc-block-img img { border-radius: var(--r); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* aurora glow behind each vignette for depth */
.svc-block-viz { position: relative; }
.svc-block-viz::before {
content: ''; position: absolute; inset: -12% -8%; z-index: 0; border-radius: 50%;
background: radial-gradient(58% 58% at 50% 45%, rgba(111, 212, 255, .3), rgba(58, 223, 180, .15) 45%, transparent 72%);
filter: blur(30px); opacity: .75; transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.svc-block:hover .svc-block-viz::before { opacity: 1; transform: scale(1.05); }
.svc-block-viz .viz { position: relative; z-index: 1; box-shadow: 0 30px 70px -34px rgba(11, 27, 43, .55); }
.svc-block-viz .svc-shot { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: var(--r); box-shadow: 0 34px 74px -34px rgba(11, 27, 43, .5); }
/* full-width image service block (e.g. AI automation) */
.svc-block--full .svc-block-intro { text-align: center; max-width: 42rem; margin: 0 auto clamp(1.8rem, 4vw, 2.8rem); }
.svc-block--full .svc-block-intro .svc-num { width: fit-content; margin-inline: auto; }
.svc-block--full .svc-block-intro .lead { margin-bottom: 0; }
.svc-figure { margin: 0; position: relative; container-type: inline-size; }
.svc-shot-full { display: block; width: 100%; height: auto; border-radius: var(--r); box-shadow: 0 40px 90px -40px rgba(11, 27, 43, .5); }
/* real CTA overlaid where the image's old "book a demo" button sat; sized in
container units so it scales with the image, drops below it on small screens */
.svc-fig-btn {
position: absolute; left: 5.7%; top: 74.5%; z-index: 2;
display: inline-flex; align-items: center; gap: .5em; white-space: nowrap;
padding: 1.15em 1.7em; border-radius: 999px;
font-family: 'Cabinet', sans-serif; font-weight: 720; font-size: 1.5cqw; line-height: 1;
color: #fff; background: linear-gradient(100deg, #6a5cf5, #8b7cf6);
box-shadow: 0 14px 30px -12px rgba(106, 92, 245, .6);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.svc-fig-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -12px rgba(106, 92, 245, .72); }
.svc-fig-btn .arr { width: 1.05em; height: 1.05em; }
@media (max-width: 640px) {
.svc-fig-btn { position: static; margin: 1.1rem auto 0; font-size: 1rem; padding: .85rem 1.5rem; }
}
/* big editorial numeral above each block title */
.svc-block-copy .svc-num {
display: block; margin: 0 0 .1rem; font-family: 'Cabinet', sans-serif;
font-size: clamp(3rem, 5vw, 4.6rem); font-weight: 800; line-height: 1; letter-spacing: -.02em;
background: none; color: transparent; -webkit-text-fill-color: transparent;
-webkit-text-stroke: 1.4px rgba(11, 27, 43, .26);
}
.svc-block-copy .display-3 { margin: .4rem 0 1rem; }
.svc-block-copy .lead { color: var(--muted); margin: 0 0 1.4rem; }
.svc-block-copy .check-list { margin-bottom: 0; }
.svc-block-copy .check-list li { font-weight: 500; }
.svc-block { scroll-margin-top: 90px; }
/* ---- service-block choreography (agency-grade scroll motion) ---- */
.viz-3d { transform-style: preserve-3d; will-change: transform; }
/* directional entrance: the vignette slides in from its own side */
.svc-block-viz.reveal { transition: opacity .9s var(--ease), transform .9s var(--ease); }
body.anim .svc-block-viz.reveal:not(.in) { opacity: 0; transform: translateX(-46px) scale(.96); }
body.anim .svc-block-grid.flip .svc-block-viz.reveal:not(.in) { transform: translateX(46px) scale(.96); }
/* copy stays put; its children stagger in one after another */
body.anim .svc-block-copy.reveal:not(.in) { opacity: 1; transform: none; }
.svc-block-copy :is(.svc-num, .display-3, .lead, .check-list li) {
transition: opacity .7s ease, transform .7s var(--ease);
}
body.anim .svc-block-copy.reveal:not(.in) :is(.svc-num, .display-3, .lead, .check-list li) {
opacity: 0; transform: translateY(16px);
}
.svc-block-copy.in .svc-num { transition-delay: .04s; }
.svc-block-copy.in .display-3 { transition-delay: .12s; }
.svc-block-copy.in .lead { transition-delay: .2s; }
.svc-block-copy.in .check-list li { transition-delay: calc(.28s + var(--i, 0) * .08s); }
.faq-list { margin-top: 2.4rem; border-top: 1px solid var(--hairline-dark); }
.faq-item { border-bottom: 1px solid var(--hairline-dark); }
.faq-item summary {
display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
padding: 1.35rem 0; cursor: pointer; list-style: none;
font-family: 'Cabinet', sans-serif; font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-x { position: relative; flex: 0 0 16px; height: 16px; }
.faq-x::before, .faq-x::after {
content: ''; position: absolute; inset: 50% auto auto 0; width: 16px; height: 2px;
background: var(--cyan); border-radius: 2px; transform: translateY(-50%); transition: transform .35s var(--ease);
}
.faq-x::after { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] .faq-x::after { transform: translateY(-50%) rotate(0deg); }
.faq-item p { margin: 0; padding: 0 0 1.5rem; max-width: 62ch; color: var(--on-dark-muted); }
/* ---------- app page ---------- */
/* The app hero is followed directly by the dark .pf-showcase section. The hero's bottom-left violet
glow gets hard-clipped at the section edge (overflow:hidden), so its lit bottom met the platform
section's flat-navy top and read as a visible seam. Fade the hero's lower edge back to the exact
same navy the platform section opens on, so the light carries across as one continuous background. */
.app-hero::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 1;
pointer-events: none; background: linear-gradient(180deg, transparent, #0B1B2B 92%);
}
.app-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.app-hero-visual img { border-radius: var(--r); width: 100%; max-height: 520px; object-fit: cover; }
.badge {
display: inline-block; margin-top: 1.6rem; padding: .55rem 1.1rem; border-radius: 999px;
font-size: .85rem; font-weight: 620; color: var(--navy);
background: linear-gradient(92deg, #3ADFB4, #6FD4FF);
}
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.2vw, 1.75rem); }
.feat-card {
position: relative; overflow: hidden;
padding: clamp(1.6rem, 2.3vw, 2.05rem); border-radius: var(--r); background: #fff;
box-shadow: 0 0 0 1px rgba(16, 21, 28, .05), 0 2px 4px rgba(11, 27, 43, .04), 0 26px 52px -34px rgba(11, 27, 43, .3);
transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.feat-card:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(16, 21, 28, .07), 0 4px 10px rgba(11, 27, 43, .06), 0 40px 70px -34px rgba(11, 27, 43, .42); }
/* aurora hairline along the top edge, lit on hover */
.feat-card::before {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
background: var(--aurora); transform: scaleX(0); transform-origin: left;
transition: transform .5s var(--ease);
}
.feat-card:hover::before { transform: scaleX(1); }
/* gradient-tinted icon chip */
.feat-ico {
display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 1.15rem;
color: var(--navy);
background: linear-gradient(150deg, rgba(58, 223, 180, .18), rgba(111, 212, 255, .12) 55%, rgba(139, 124, 246, .16));
box-shadow: inset 0 0 0 1px rgba(58, 223, 180, .3);
transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.feat-card:hover .feat-ico { transform: translateY(-1px) scale(1.04); box-shadow: inset 0 0 0 1px rgba(58, 223, 180, .45), 0 12px 24px -12px rgba(58, 223, 180, .5); }
.feat-ico svg { width: 23px; height: 23px; }
.feat-num {
position: absolute; top: clamp(1.6rem, 2.3vw, 2.05rem); right: clamp(1.4rem, 2vw, 1.8rem);
font-weight: 700; font-size: .82rem; letter-spacing: .1em; opacity: .8;
background: var(--aurora); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.feat-card h3 { margin: 0 0 .5rem; font-size: 1.22rem; font-weight: 730; letter-spacing: -.015em; }
.feat-card p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.6; }
/* ---------- studio page ---------- */
.studio-visual { background: linear-gradient(180deg, var(--navy) 55%, var(--paper) 55%); }
.studio-img { border-radius: var(--r); width: 100%; aspect-ratio: 21 / 10; object-fit: cover; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.8rem, 4vw, 3rem); margin-top: 2.2rem; }
.value { border-top: 1px solid var(--hairline); padding-top: 1.5rem; }
.value .display-3 { margin: .5rem 0 .7rem; }
.value p { margin: 0; color: var(--muted); }
.founder-text { margin: 0; font-family: 'Cabinet', sans-serif; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 640; line-height: 1.4; letter-spacing: -.015em; }
/* ---------- contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.contact-email {
display: inline-block; margin: .3rem 0 1.4rem;
font-family: 'Cabinet', sans-serif; font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 720; letter-spacing: -.015em;
background: var(--aurora);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.contact-hint { color: var(--muted); font-size: .95rem; max-width: 34rem; }
.contact-form label { display: block; margin-bottom: 1.15rem; }
.contact-form label span { display: block; margin-bottom: .4rem; font-size: .88rem; font-weight: 600; color: var(--ink); }
.contact-form input, .contact-form select, .contact-form textarea {
width: 100%; padding: .9rem 1.1rem; border: 1.5px solid transparent; border-radius: 13px;
background: var(--fog); font: inherit; color: var(--ink); transition: border-color .25s, background .25s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
outline: none; border-color: var(--cyan); background: #fff;
}
/* custom chevron so the arrow sits neatly beside the text, not pinned to the far edge */
.contact-form select {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
padding-right: 2.8rem; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235A6672' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 1.1rem center;
}
.contact-form select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235A6672' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; }
.contact-form textarea { resize: vertical; }
.contact-form .btn { margin-top: .4rem; }
.contact-form .btn.is-loading { opacity: .6; pointer-events: none; }
.contact-form :disabled { opacity: .55; cursor: not-allowed; }
/* submission status message under the form */
.form-status {
margin: 1.1rem 0 0; padding: .85rem 1.1rem; border-radius: 12px;
font-size: .95rem; font-weight: 560; line-height: 1.5;
}
.form-status.is-ok { color: #0b6b4f; background: rgba(58, 223, 180, .14); box-shadow: inset 0 0 0 1px rgba(58, 223, 180, .35); }
.form-status.is-err { color: #9a2b2b; background: rgba(220, 80, 80, .1); box-shadow: inset 0 0 0 1px rgba(220, 80, 80, .3); }
/* once sent, dim the fields but keep the confirmation crisp */
.contact-form.is-sent .form-status.is-ok { opacity: 1; }
/* ---------- blog / prose (editorial article) ---------- */
/* slim reading-progress bar at the very top */
.read-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 300; pointer-events: none; }
.read-progress i { display: block; height: 100%; width: 0; background: var(--aurora); box-shadow: 0 0 12px rgba(58, 223, 180, .5); transition: width .1s linear; }
/* article header (on the navy hero) */
.article-hero { padding-top: clamp(8rem, 15vh, 11rem); }
.article-back { display: inline-flex; align-items: center; gap: .5rem; color: var(--cyan); font-weight: 580; font-size: .92rem; }
.article-back:hover { color: #fff; }
.article-title { margin: 1.5rem 0 0; font-family: 'Cabinet', sans-serif; font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; max-width: 20ch; }
.article-dek { margin: 1.4rem 0 0; font-size: clamp(1.12rem, 1.9vw, 1.4rem); line-height: 1.5; color: var(--on-dark-muted); max-width: 46ch; }
.article-byline { display: flex; align-items: center; gap: .9rem; margin-top: 2.3rem; }
.byl-mono { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-family: 'Cabinet', sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--navy); background: var(--aurora); }
.byl-text { display: flex; flex-direction: column; line-height: 1.35; }
.byl-text b { color: #fff; font-weight: 640; font-size: .98rem; }
.byl-text span { color: var(--on-dark-muted); font-size: .85rem; }
/* cover banner bridging the navy → paper transition */
.article-cover { background: linear-gradient(180deg, var(--navy) 46%, var(--paper) 46%); }
.cover-img { border-radius: var(--r); width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
/* prose body */
.prose-wrap { padding-block: clamp(2.6rem, 5vw, 4.4rem) calc(var(--section) * .7); }
.prose { max-width: 690px; margin-inline: auto; padding-inline: var(--gutter); font-size: 1.12rem; line-height: 1.8; color: #232C37; }
/* lead paragraph + drop cap */
.prose > p:first-of-type { font-size: 1.28rem; line-height: 1.62; color: var(--ink); }
.prose > p:first-of-type::first-letter { float: left; font-family: 'Cabinet', sans-serif; font-weight: 800; font-size: 3.5em; line-height: .72; padding: .04em .14em 0 0; color: var(--navy); }
/* section headings with an aurora accent */
.prose h2 { position: relative; margin: 2.5em 0 .75em; font-family: 'Cabinet', sans-serif; font-size: clamp(1.45rem, 2.7vw, 1.95rem); font-weight: 760; letter-spacing: -.025em; color: var(--ink); scroll-margin-top: 6rem; }
.prose h2::before { content: ''; display: block; width: 2.4rem; height: 3px; border-radius: 2px; background: var(--aurora); margin-bottom: 1rem; }
.prose p { margin: 1.2em 0; }
.prose strong { font-weight: 680; color: var(--ink); }
.prose em { color: var(--ink); }
.prose a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 3px; }
.prose ul { list-style: none; padding-left: 0; margin: 1.5em 0; }
.prose ul li { position: relative; padding-left: 1.7em; margin: .8em 0; }
.prose ul li::before { content: ''; position: absolute; left: 0; top: .6em; width: .55em; height: .55em; border-radius: 2px; background: var(--aurora); }
.prose blockquote { margin: 2em 0; padding-left: 1.5rem; border-left: 3px solid var(--teal); font-family: 'Cabinet', sans-serif; font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 560; line-height: 1.32; letter-spacing: -.02em; color: var(--ink); }
/* the closing takeaway, styled as a highlighted callout */
.prose-takeaway { margin: 3em 0 0; padding: 1.7rem 1.9rem; border-radius: var(--r); position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(58, 223, 180, .07), rgba(139, 124, 246, .06)); border: 1px solid var(--hairline); }
.prose-takeaway::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--aurora); }
.prose-takeaway h2 { margin: 0 0 .5rem; font-family: 'Satoshi', sans-serif; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.prose-takeaway h2::before { display: none; }
.prose-takeaway p { margin: 0; font-size: 1.16rem; line-height: 1.62; color: var(--ink); }
.prose-legal { font-size: .98rem; }
.prose-legal h2 { font-size: 1.25rem; margin-top: 1.8em; }
/* ---------- footer ---------- */
.site-foot { background: var(--navy-deep); color: var(--on-dark-muted); padding: calc(var(--section) * .75) 0 2.2rem; }
.foot-top { display: flex; justify-content: space-between; gap: 3rem; flex-wrap: wrap; padding-bottom: 3.2rem; border-bottom: 1px solid var(--hairline-dark); }
.foot-logo { font-family: 'Cabinet', sans-serif; font-size: 2.3rem; font-weight: 820; letter-spacing: -.02em; color: #fff; }
.foot-tag { margin: .7rem 0 0; font-size: .98rem; }
.foot-cols { display: flex; gap: clamp(2.5rem, 6vw, 5.5rem); flex-wrap: wrap; }
.foot-cols h4 { margin: 0 0 1rem; font-size: .82rem; font-weight: 660; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.foot-cols a { display: block; padding: .3rem 0; font-size: .95rem; transition: color .2s; }
.foot-cols a:hover { color: #fff; }
.foot-bottom { padding-top: 1.8rem; font-size: .86rem; }
.foot-bottom p { margin: 0; }
/* ---------- hero trust chips ---------- */
.hero-trust {
display: flex; flex-wrap: wrap; gap: .5rem 1.9rem;
list-style: none; margin: 2.4rem 0 0; padding: 0;
font-size: .9rem; font-weight: 540; color: rgba(233, 239, 244, .78);
}
.hero-trust li { display: flex; align-items: center; gap: .55rem; }
.hero-trust li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--aurora); }
/* ---------- stats / guarantee band ---------- */
.stats { position: relative; padding: clamp(3.5rem, 7vw, 5.5rem) 0; background: var(--navy); color: var(--on-dark); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.stat { border-left: 1px solid var(--hairline-dark); padding-left: 1.5rem; }
.stat-n {
margin: 0; font-family: 'Cabinet', sans-serif; line-height: 1;
font-size: clamp(2.6rem, 4.5vw, 4rem); font-weight: 800; letter-spacing: -.02em;
}
.stat-n > span:first-child {
background: var(--aurora);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-u { font-size: .42em; font-weight: 700; margin-left: .3em; color: var(--on-dark-muted); }
.stat-label { margin: .7rem 0 0; color: var(--on-dark-muted); font-size: .95rem; max-width: 24ch; }
/* ---------- global section ---------- */
.global-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.global-visual img { border-radius: var(--r); width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.global-copy .display-2 { margin-bottom: 1.1rem; }
.global-copy .lead { color: var(--on-dark-muted); margin: 0 0 .4rem; }
.lang-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.7rem 0 1.2rem; }
.lang-chips li {
padding: .45rem 1.05rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
box-shadow: inset 0 0 0 1px var(--hairline-dark);
}
.global-note { color: var(--on-dark-muted); margin: 0 0 2rem; font-size: .98rem; max-width: 34rem; }
/* ---------- comparison table ---------- */
.compare-sub { color: var(--muted); margin: .9rem 0 0; }
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; }
.compare-table th, .compare-table td { padding: 1.05rem 1.3rem; }
.compare-table thead th {
font-family: 'Cabinet', sans-serif; font-weight: 760; font-size: 1.08rem; letter-spacing: -.01em;
text-align: center; padding-bottom: 1.15rem;
}
.compare-table thead th:first-child { width: 30%; }
.compare-table tbody th { text-align: left; font-weight: 600; font-size: .97rem; color: var(--ink); }
.compare-table tbody td { text-align: center; color: var(--muted); font-size: .92rem; }
.compare-table tbody th, .compare-table tbody td { border-top: 1px solid var(--hairline); }
.compare-table .col-nordly { background: #fff; }
.compare-table thead th.col-nordly { position: relative; border-radius: var(--r) var(--r) 0 0; }
.compare-table thead th.col-nordly::after {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
border-radius: 3px 3px 0 0; background: var(--aurora);
}
.compare-table tbody tr:last-child td.col-nordly { border-radius: 0 0 var(--r) var(--r); }
.compare-table .cx { color: #B4BFC9; }
.cmp-text { font-weight: 560; }
td.col-nordly .cmp-text { color: var(--ink); }
/* --- premium restyle --- */
.compare-table th, .compare-table td { padding: 1.15rem 1.45rem; }
.compare-table thead th { vertical-align: top; color: var(--muted); padding-top: 1.15rem; padding-bottom: 1.4rem; }
.compare-table thead th.col-nordly { color: var(--ink); }
.compare-table tbody td:not(.col-nordly) { color: var(--muted); }
/* nordly column → floating white card */
.compare-table td.col-nordly, .compare-table th.col-nordly {
box-shadow: -20px 0 44px -28px rgba(11, 27, 43, .34), 20px 0 44px -28px rgba(11, 27, 43, .34);
}
.compare-table thead th.col-nordly {
border-radius: 16px 16px 0 0;
box-shadow: -20px 0 44px -28px rgba(11, 27, 43, .34), 20px 0 44px -28px rgba(11, 27, 43, .34), 0 -16px 34px -26px rgba(11, 27, 43, .3);
}
.compare-table tbody tr:last-child td.col-nordly {
border-radius: 0 0 16px 16px;
box-shadow: -20px 0 44px -28px rgba(11, 27, 43, .34), 20px 0 44px -28px rgba(11, 27, 43, .34), 0 26px 46px -26px rgba(11, 27, 43, .32);
}
.compare-table tbody td.col-nordly { border-top-color: transparent; }
.compare-table thead th.col-nordly::after { height: 4px; border-radius: 4px 4px 0 0; }
/* recommended badge */
.cmp-badge {
display: block; width: max-content; margin: 10px auto 0; padding: 3px 12px; border-radius: 999px;
font-family: system-ui, -apple-system, sans-serif; font-weight: 700; font-size: .6rem; letter-spacing: .07em; text-transform: uppercase;
color: var(--navy); background: var(--aurora); box-shadow: 0 8px 18px -8px rgba(58, 223, 180, .65);
}
/* row hover — nordly stays white and pops */
.compare-table tbody tr { transition: background .2s ease; }
.compare-table tbody tr:hover { background: rgba(16, 21, 28, .026); }
/* checks: competitors neutral, nordly vivid */
.compare-table td:not(.col-nordly) .ck circle, .compare-table td:not(.col-nordly) .ck path { stroke: #AEB8C1; }
.compare-table td.col-nordly .ck { filter: drop-shadow(0 3px 6px rgba(58, 223, 180, .38)); }
.compare-table .cx { color: #C4CDD5; }
/* ---------- contact next steps ---------- */
.next-steps { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 2rem; }
.next-step { position: relative; border-top: 1px solid var(--hairline); padding-top: 1.4rem; }
.next-step h3 { margin: .8rem 0 .45rem; font-size: 1.2rem; font-weight: 720; }
.next-step p { margin: 0; color: var(--muted); font-size: .96rem; }
/* ---------- aurora drift ---------- */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.aurora::before, .aurora::after {
content: ''; position: absolute; width: 58vw; height: 58vw; min-width: 420px; min-height: 420px;
border-radius: 50%; filter: blur(90px); opacity: .3; mix-blend-mode: screen;
}
.aurora::before {
background: radial-gradient(circle at 35% 35%, rgba(58, 223, 180, .75), transparent 62%);
top: -22%; left: -12%; animation: blob1 22s ease-in-out infinite alternate;
}
.aurora::after {
background: radial-gradient(circle at 60% 40%, rgba(111, 212, 255, .6), transparent 62%);
bottom: -30%; right: -12%; animation: blob2 27s ease-in-out infinite alternate;
}
@keyframes blob1 { to { transform: translate(11vw, 9vh) scale(1.18); } }
@keyframes blob2 { to { transform: translate(-9vw, -7vh) scale(1.12); } }
.hero .aurora { opacity: .7; }
.page-hero { isolation: isolate; }
.page-hero .container { position: relative; z-index: 2; }
/* ---------- heading reveal ---------- */
.w, .wi { display: inline-block; }
/* whole-element soft fade + rise (subpage single-line headings) */
.reveal-words { transition: opacity .8s ease, transform .8s var(--ease); }
body.anim .reveal-words { opacity: 0; transform: translateY(22px); }
body.anim .reveal-words.in { opacity: 1; transform: none; }
/* hero heading: each line fades in on its own, the 2nd line gently staggered so
"that work." gets its own reveal. Gradient-safe — the opacity sits on the
.hline wrapper, never on .grad (fading .grad itself kills background-clip:text). */
.hline { display: block; transition: opacity .85s ease, transform .85s var(--ease); }
body.anim .reveal-lines .hline { opacity: 0; transform: translateY(20px); }
body.anim .reveal-lines.in .hline { opacity: 1; transform: none; }
body.anim .reveal-lines .hline:nth-child(2) { transition-delay: .16s; }
/* ---------- button sheen ---------- */
.btn { position: relative; overflow: hidden; }
.btn::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .32) 50%, transparent 68%);
transform: translateX(-120%); transition: transform .7s ease;
}
.btn-light::before { background: linear-gradient(115deg, transparent 32%, rgba(58, 223, 180, .22) 50%, transparent 68%); }
.btn:hover::before { transform: translateX(120%); }
/* ---------- next-step (contact) line draw ---------- */
.next-step::before {
content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 2px;
background: var(--aurora); transform: scaleX(0); transform-origin: left;
transition: transform 1.1s var(--ease) .25s;
}
.next-step.in::before { transform: scaleX(1); }
/* ---------- film grain ---------- */
body::after {
content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
background-size: 280px;
}
/* ---------- giant footer wordmark ---------- */
.foot-giant {
position: relative; display: block; margin: 0 0 3.2rem; width: fit-content;
font-family: 'Cabinet', sans-serif; font-weight: 820; line-height: .95; letter-spacing: -.04em;
font-size: clamp(4rem, 13vw, 10.5rem);
color: transparent; -webkit-text-fill-color: transparent;
-webkit-text-stroke: 1.5px rgba(255, 255, 255, .2);
transition: -webkit-text-stroke-color .55s ease;
}
/* gradient-filled copy that soft-fades in over the whole wordmark */
.foot-giant::before {
content: attr(data-text); position: absolute; left: 0; top: 0; pointer-events: none;
-webkit-text-stroke: 0; color: transparent; -webkit-text-fill-color: transparent;
background: var(--aurora); -webkit-background-clip: text; background-clip: text;
opacity: 0; transition: opacity .55s ease;
}
.foot-giant:hover { -webkit-text-stroke-color: transparent; }
.foot-giant:hover::before { opacity: 1; }
/* ---------- image unveil ---------- */
.svc-block-img img, .app-visual img, .app-hero-visual img, .global-visual img, .studio-img, .cover-img { transition: transform 1.15s var(--ease); }
body.anim .reveal:not(.in) :is(.svc-img, .post-img, .svc-block-img, .app-visual, .app-hero-visual, .global-visual) img,
body.anim .reveal:not(.in) :is(.studio-img, .cover-img) { transform: scale(1.1); }
.svc-block-img, .app-visual, .app-hero-visual, .global-visual { border-radius: var(--r); overflow: hidden; }
/* ---------- page fade-in ---------- */
@keyframes pageIn { from { opacity: 0; } }
body { animation: pageIn .45s ease; }
/* ---------- browser frame ---------- */
.browser { border-radius: 12px; overflow: hidden; background: #0d1724; box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .55); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 9px 13px; background: #0a121d; }
.b-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.b-dot.r { background: #d9756c; } .b-dot.y { background: #e0b467; } .b-dot.g { background: #74bd8b; }
.b-url {
margin-inline: auto; padding: 3px 14px; border-radius: 6px; max-width: 62%;
background: rgba(255, 255, 255, .07); font-size: .68rem; color: rgba(233, 239, 244, .55);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser img { display: block; width: 100%; aspect-ratio: 1100 / 700; object-fit: cover; object-position: top; }
/* ---------- work gallery ---------- */
.work { overflow: hidden; }
.work-sub { color: var(--muted); margin: .9rem 0 0; max-width: 44rem; }
/* Full-bleed, left-aligned: heading + rail share the page gutter, no centered
container margin, so the cards use the full width and start flush on the left. */
.work-inset { padding-inline: var(--gutter); }
/* Netflix-style row: edge fades + hover edge-arrows, no top buttons */
.work-viewport { position: relative; }
.work-strip {
display: flex; gap: clamp(1.2rem, 2.5vw, 2rem);
overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
/* start flush at the page gutter (scroll-padding matches so is-start works) */
scroll-padding-inline: var(--gutter);
padding: .5rem var(--gutter) 1.6rem;
}
.work-strip::-webkit-scrollbar { display: none; }
/* edge fades — match the .alt section ground (--fog), hidden at the ends */
.work-fade {
position: absolute; top: 0; bottom: 1.6rem; width: clamp(3rem, 9vw, 8rem);
pointer-events: none; z-index: 2; opacity: 1; transition: opacity .4s var(--ease);
}
.work-fade--left { left: 0; background: linear-gradient(90deg, var(--fog), rgba(238, 242, 245, 0)); }
.work-fade--right { right: 0; background: linear-gradient(270deg, var(--fog), rgba(238, 242, 245, 0)); }
.work-viewport.is-start .work-fade--left { opacity: 0; }
.work-viewport.is-end .work-fade--right { opacity: 0; }
/* hover edge-arrows, centred on the card image, hidden at the ends */
.work-edge {
position: absolute; top: calc((100% - 4rem) / 2); transform: translateY(-50%); z-index: 3;
width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
border: 1.5px solid var(--hairline); background: #fff; color: var(--ink);
display: grid; place-items: center; box-shadow: 0 12px 32px -12px rgba(11, 27, 43, .45);
opacity: 0; transition: opacity .3s var(--ease), background .25s, color .25s, border-color .25s, transform .25s;
}
.work-edge--prev { left: clamp(.6rem, 2vw, 1.5rem); }
.work-edge--next { right: clamp(.6rem, 2vw, 1.5rem); }
.work-viewport:hover .work-edge, .work-edge:focus-visible { opacity: 1; }
.work-edge:hover { background: var(--navy); color: #fff; border-color: var(--navy); transform: translateY(-50%) scale(1.06); }
.work-viewport.is-start .work-edge--prev,
.work-viewport.is-end .work-edge--next { opacity: 0 !important; pointer-events: none; }
@media (hover: none) { .work-edge { display: none; } }
.work-card { flex: 0 0 clamp(320px, 40vw, 660px); scroll-snap-align: start; margin: 0; }
/* full-bleed site preview — no browser chrome, the screenshot fills the card */
.work-card .browser-bar { display: none; }
.work-card .browser img { aspect-ratio: 16 / 10; }
.work-card .browser { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.work-card:hover .browser { transform: translateY(-6px); box-shadow: 0 30px 60px -25px rgba(11, 27, 43, .45); }
.work-card figcaption { margin-top: 1rem; display: flex; flex-direction: column; gap: 2px; }
.work-card figcaption strong { font-weight: 660; font-size: 1.02rem; }
.work-card figcaption span { color: var(--muted); font-size: .9rem; }
.work .work-cta { margin-top: .6rem; }
/* ---------- service vignettes ---------- */
.viz {
position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden;
display: flex; align-items: center; justify-content: center;
padding: clamp(1rem, 6cqi, 2.6rem);
background: radial-gradient(120% 130% at 18% 0%, #13293f, var(--navy-deep) 72%);
container-type: inline-size;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .09);
}
/* Ambient aurora bloom — gives the vignette frame depth instead of a flat fill. */
.viz::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(60% 55% at 12% 8%, rgba(58, 223, 180, .22), transparent 70%),
radial-gradient(55% 60% at 92% 100%, rgba(139, 124, 246, .2), transparent 72%);
}
/* Fine engineering grid — barely there, catches the light on premium screens. */
.viz::after {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
background-image:
linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
background-size: 34px 34px; background-position: center;
-webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 45%, transparent 100%);
mask-image: radial-gradient(120% 100% at 50% 0%, #000 45%, transparent 100%);
}
.viz > * { position: relative; z-index: 1; }
.svc-viz .viz, .svc-block-viz .viz { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .09), 0 1px 0 var(--hairline); }
.svc-card:hover .viz { box-shadow: 0 24px 54px -24px rgba(11, 27, 43, .5); }
/* real product screenshots inside the home service cards — same shots as the services page, shown whole.
The shot backgrounds are near-white like the page, so the card is lifted with a crisp hairline edge
+ a layered drop shadow. The elevation lives on the container because .svc-viz--shot clips (overflow
hidden) — a shadow on the img itself would be cut off, which is what made the cards read flat. */
.svc-viz--shot {
border-radius: var(--r); overflow: hidden;
box-shadow:
0 0 0 1px rgba(16, 21, 28, .07),
0 2px 4px rgba(11, 27, 43, .05),
0 14px 30px -12px rgba(11, 27, 43, .22),
0 36px 66px -30px rgba(11, 27, 43, .34);
transition: box-shadow .55s var(--ease);
}
.svc-card:hover .svc-viz--shot {
box-shadow:
0 0 0 1px rgba(16, 21, 28, .09),
0 3px 6px rgba(11, 27, 43, .07),
0 20px 40px -14px rgba(11, 27, 43, .28),
0 52px 92px -34px rgba(11, 27, 43, .44);
}
/* pin every home shot to the SEO/content aspect so all three cards match in height. The SEO & content
shots already sit at ~1600:950 (no-op); only the squarer AI-automation shot is trimmed — and it has
deep empty margins top & bottom, so a centred cover crop keeps every card and label fully visible. */
.svc-viz .svc-shot { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 950; object-fit: cover; object-position: center; transition: transform .8s var(--ease); }
.svc-card:hover .svc-viz .svc-shot { transform: scale(1.03); }
/* keep the "Learn more" link on one baseline across the 3-up cards even when the descriptions
differ in line count — the grid stretches cards to equal height, so push the link to the bottom. */
.svc-card:not(.svc-feat) { display: flex; flex-direction: column; }
.svc-card:not(.svc-feat) .svc-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.svc-card:not(.svc-feat) .svc-body .text-link { margin-top: auto; }
.viz-web { padding: 0; }
.viz-web .browser {
width: 100%; height: 100%; border-radius: var(--r);
display: flex; flex-direction: column; box-shadow: none;
}
.viz-web .browser-bar { display: none; }
.viz-web .browser img { flex: 1; width: 100%; height: 100%; aspect-ratio: auto; object-position: top; }
/* SEO vignette — a local-ranking leaderboard; em-based so it scales (cqi) */
.serp { position: relative; z-index: 2; width: 86%; font-size: clamp(.68rem, 3.6cqi, 1.05rem); display: flex; flex-direction: column; gap: .9em; }
.serp-search {
display: flex; align-items: center; gap: .6em; padding: .8em 1.2em; border-radius: 999px;
background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
color: #d6e1ea; font-size: .95em; font-weight: 520;
}
.serp-search svg { width: 1em; height: 1em; flex: 0 0 auto; color: var(--cyan); }
.serp-list { display: flex; flex-direction: column; gap: .55em; }
/* Winning result */
.serp-hit {
position: relative; display: flex; align-items: center; gap: .8em;
background: linear-gradient(180deg, #fff, #f2f6f9); border-radius: .95em; padding: .9em 1em;
box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(58, 223, 180, .35),
0 20px 40px -18px rgba(0, 0, 0, .6), 0 0 30px -10px rgba(58, 223, 180, .4);
}
.serp-logo {
width: 2.2em; height: 2.2em; flex: 0 0 auto; border-radius: .55em;
background: linear-gradient(140deg, #3ADFB4, #6FD4FF 55%, #8B7CF6);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 6px 14px -6px rgba(58, 223, 180, .6);
}
.serp-hit-main { flex: 1; min-width: 0; }
.serp-title { margin: 0; display: flex; gap: .4em; align-items: center; font-weight: 680; font-size: 1.02em; color: var(--ink); }
.serp-verified { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.serp-stars { margin: .3em 0 0; color: #F5B942; font-size: .84em; letter-spacing: 1.5px; }
.serp-stars span { color: var(--muted); letter-spacing: 0; margin-left: .5em; }
.serp-badge {
display: inline-flex; align-items: center; gap: .3em; flex: 0 0 auto; align-self: flex-start;
padding: .34em .7em; border-radius: 999px; font-size: .74em; font-weight: 760;
background: linear-gradient(92deg, #3ADFB4, #6FD4FF); color: var(--navy);
box-shadow: 0 6px 16px -6px rgba(58, 223, 180, .8);
}
.serp-badge svg { width: .9em; height: .9em; }
/* Competitors below */
.serp-row {
display: flex; align-items: center; gap: .8em; padding: .7em 1em; border-radius: .8em;
background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .06); opacity: .8;
}
.serp-rank {
display: grid; place-items: center; width: 1.7em; height: 1.7em; flex: 0 0 auto; border-radius: .45em;
background: rgba(255, 255, 255, .08); color: var(--on-dark-muted); font-size: .82em; font-weight: 700;
}
.serp-row-lines { flex: 1; display: flex; flex-direction: column; gap: .4em; }
.serp-row-lines b { display: block; height: .5em; border-radius: .25em; background: rgba(255, 255, 255, .13); width: 74%; }
.viz-bars { position: absolute; right: 5%; bottom: 0; height: 72%; display: flex; gap: clamp(7px, 1.8cqi, 12px); align-items: flex-end; z-index: 0; opacity: .4; }
.viz-bars span {
width: clamp(12px, 3.4cqi, 22px); height: var(--h); border-radius: 6px 6px 0 0; transform-origin: bottom;
background: linear-gradient(180deg, rgba(111, 212, 255, .85), rgba(58, 223, 180, .12));
transition: transform 1.1s var(--ease);
}
.viz-bars span:nth-child(2) { transition-delay: .12s; }
.viz-bars span:nth-child(3) { transition-delay: .24s; }
.viz-bars span:nth-child(4) { transition-delay: .36s; }
body.anim .reveal:not(.in) .viz-bars span { transform: scaleY(0); }
/* auto-blog vignette — em-based so it scales with the card (cqi) */
.blogq { width: 86%; font-size: clamp(.68rem, 3.6cqi, 1.05rem); display: flex; flex-direction: column; gap: .85em; }
.bq-row {
display: flex; align-items: center; gap: .85em; background: #fff; border-radius: .9em; padding: .85em 1em;
box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .5);
transition: transform .8s var(--ease) calc(var(--i) * .13s), opacity .8s ease calc(var(--i) * .13s);
}
body.anim .reveal:not(.in) .bq-row { transform: translateX(30px); opacity: 0; }
.bq-thumb { width: 2.5em; height: 2.5em; border-radius: .65em; flex: 0 0 auto; }
.bq-thumb.t1 { background: linear-gradient(135deg, #0B1B2B, #23486b); }
.bq-thumb.t2 { background: linear-gradient(135deg, #3ADFB4, #6FD4FF); }
.bq-thumb.t3 { background: linear-gradient(135deg, #6FD4FF, #8B7CF6); }
.bq-lines { flex: 1; }
.bq-lines b { display: block; height: .5em; border-radius: .25em; background: var(--fog); margin: .4em 0; }
.bq-chip {
display: inline-flex; align-items: center; gap: .4em; white-space: nowrap;
padding: .38em .9em; border-radius: 999px; background: var(--fog); color: var(--muted);
font-size: .62em; font-weight: 720; letter-spacing: .03em; text-transform: uppercase;
}
.bq-chip svg { width: .95em; height: .95em; }
.bq-chip.live { background: linear-gradient(92deg, #3ADFB4, #6FD4FF); color: var(--navy); }
/* automation vignette — a mini automation canvas; em-based so it scales (cqi) */
.flow { display: flex; flex-direction: column; align-items: flex-start; font-size: clamp(.72rem, 3.8cqi, 1.1rem); }
.flow-chip {
position: relative; display: inline-flex; align-items: center; gap: .7em;
margin-left: calc(var(--i) * 2.2em); padding: .55em 1.2em .55em .55em;
background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(232, 240, 246, .9));
color: var(--ink); border-radius: 999px;
font-size: .95em; font-weight: 640; letter-spacing: -.005em;
box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(11, 27, 43, .06),
0 20px 38px -22px rgba(0, 0, 0, .65), 0 5px 12px -7px rgba(0, 0, 0, .4);
transition: transform .8s var(--ease) calc(var(--i) * .2s), opacity .8s ease calc(var(--i) * .2s);
}
/* Leading icon tile — the visual anchor for each step. */
.flow-ico {
display: grid; place-items: center; width: 1.9em; height: 1.9em; flex: 0 0 auto;
border-radius: .62em; background: linear-gradient(150deg, rgba(58, 223, 180, .16), rgba(111, 212, 255, .16));
box-shadow: inset 0 0 0 1px rgba(58, 223, 180, .35);
}
.flow-ico svg { width: 1.05em; height: 1.05em; color: #0f8f76; }
.flow-label { white-space: nowrap; padding-right: .2em; }
.flow-chip.done {
color: var(--navy);
background: linear-gradient(96deg, #3ADFB4, #6FD4FF);
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 20px 44px -16px rgba(58, 223, 180, .7),
0 0 40px -6px rgba(111, 212, 255, .55);
}
.flow-chip.done .flow-ico { background: rgba(7, 18, 32, .16); box-shadow: inset 0 0 0 1px rgba(7, 18, 32, .2); }
.flow-chip.done .flow-ico svg { color: var(--navy); }
/* Soft live ring on the finished step. */
.flow-pulse {
position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow: 0 0 0 0 rgba(111, 212, 255, .5); animation: flowPulse 2.6s var(--ease) infinite;
}
@keyframes flowPulse { 0% { box-shadow: 0 0 0 0 rgba(111, 212, 255, .5); } 70%, 100% { box-shadow: 0 0 0 .9em rgba(111, 212, 255, 0); } }
body.anim .reveal:not(.in) .flow-chip { transform: translateY(16px); opacity: 0; }
/* Elbow connector — drops from the step above, curves right into the next one. */
.flow-link {
position: relative; width: 2.2em; height: 1.5em; margin: .05em 0;
margin-left: calc((var(--i) - 1) * 2.2em + 1.4em);
border-left: 2px solid rgba(111, 212, 255, .85);
border-bottom: 2px solid rgba(111, 212, 255, .85);
border-bottom-left-radius: .9em;
box-shadow: -1px 1px 10px -2px rgba(111, 212, 255, .5);
transform-origin: top; transition: transform .5s var(--ease) calc(var(--i) * .2s), opacity .4s ease calc(var(--i) * .2s);
}
.flow-link i {
position: absolute; right: -.32em; bottom: -.34em; width: .62em; height: .62em; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #c6f8ec, #6FD4FF);
box-shadow: 0 0 12px rgba(111, 212, 255, .85), 0 0 0 3px rgba(111, 212, 255, .14);
}
body.anim .reveal:not(.in) .flow-link { transform: scaleY(0); opacity: 0; }
/* ---------- phone mockup ---------- */
.phone-wrap { display: flex; justify-content: center; }
.phone {
position: relative; width: min(280px, 72vw); border-radius: 42px; padding: 10px;
background: linear-gradient(160deg, #17222f, #090f19);
box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .7),
inset 0 0 0 2px rgba(255, 255, 255, .09), inset 0 2px 5px rgba(255, 255, 255, .07),
inset 0 -3px 6px rgba(0, 0, 0, .5);
}
@keyframes floaty { 50% { transform: translateY(-10px); } }
/* speaker / notch pill */
.phone-notch {
position: absolute; top: 19px; left: 50%; transform: translateX(-50%); z-index: 3;
width: 44px; height: 5px; border-radius: 3px;
background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 2px rgba(0, 0, 0, .4);
}
.phone-screen {
position: relative; border-radius: 34px; overflow: hidden; padding: 30px 15px 20px;
background: radial-gradient(120% 80% at 50% 0%, #16283f, #0B1B2B 70%);
display: flex; flex-direction: column; gap: 13px;
}
.phone-screen::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(70% 40% at 80% 6%, rgba(111, 212, 255, .14), transparent 70%);
}
.phone-screen > * { position: relative; transition: transform .7s var(--ease) calc(var(--i, 0) * .12s + .15s), opacity .7s ease calc(var(--i, 0) * .12s + .15s); }
body.anim .reveal:not(.in) .phone-screen > * { transform: translateY(14px); opacity: 0; }
/* app bar */
.p-head { display: flex; align-items: center; justify-content: space-between; }
.p-brand { font-family: 'Cabinet', sans-serif; font-weight: 820; color: #fff; font-size: 1.05rem; letter-spacing: -.02em; }
.p-brand span {
background: var(--aurora);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.p-ava {
width: 24px; height: 24px; border-radius: 50%;
background: linear-gradient(135deg, #3ADFB4, #8B7CF6);
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), 0 3px 8px -3px rgba(58, 223, 180, .6);
}
/* brand palette */
.p-swatches { display: flex; align-items: center; gap: 8px; }
.p-swatches i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18), 0 4px 8px -4px rgba(0, 0, 0, .5); }
.p-swatch-add {
background: transparent !important; box-shadow: none !important; position: relative;
border: 1.5px dashed rgba(255, 255, 255, .28);
}
.p-swatch-add::after {
content: '+'; position: absolute; inset: 0; display: grid; place-items: center;
color: rgba(255, 255, 255, .5); font-size: 14px; font-weight: 400; line-height: 1;
}
/* media grid */
.p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: 11px; display: block; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
/* post composer card */
.p-card {
display: flex; align-items: center; gap: 9px;
background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .09);
border-radius: 13px; padding: 10px 11px;
}
.p-card-ava { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px; background: linear-gradient(135deg, #3ADFB4, #6FD4FF); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.p-card-lines { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.p-card-lines b { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.p-card-tag { width: 30px; height: 16px; flex: 0 0 auto; border-radius: 999px; background: rgba(111, 212, 255, .16); box-shadow: inset 0 0 0 1px rgba(111, 212, 255, .38); }
/* publish */
.p-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
padding: 12px; border-radius: 999px; background: linear-gradient(92deg, #3ADFB4, #6FD4FF);
color: var(--navy); font-weight: 720; font-size: .85rem;
box-shadow: 0 12px 26px -10px rgba(58, 223, 180, .75), inset 0 1px 0 rgba(255, 255, 255, .3);
}
/* ---------- desktop / macOS app window ---------- */
.mac-wrap { display: flex; justify-content: center; }
.mac {
position: relative; width: min(560px, 100%); border-radius: 16px; overflow: hidden;
background: linear-gradient(158deg, #18232f, #0a1019);
box-shadow: 0 54px 110px -36px rgba(0, 0, 0, .78), 0 12px 30px -14px rgba(0, 0, 0, .6),
inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .12);
}
@keyframes macfloat { 50% { transform: translateY(-9px); } }
body.anim .mac { animation: macfloat 7.5s ease-in-out infinite; }
.mac::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(78% 42% at 80% -6%, rgba(111, 212, 255, .16), transparent 62%),
radial-gradient(72% 46% at 8% 110%, rgba(139, 124, 246, .15), transparent 66%);
}
.mac > * { position: relative; z-index: 1; }
.mac [style*="--i"] { transition: transform .7s var(--ease) calc(var(--i, 0) * .1s + .15s), opacity .7s ease calc(var(--i, 0) * .1s + .15s); }
body.anim .reveal:not(.in) .mac [style*="--i"] { transform: translateY(16px); opacity: 0; }
/* title bar */
.mac-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: rgba(255, 255, 255, .028); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.mac-dots { display: flex; gap: 8px; }
.mac-dots i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .28); }
.mac-dots i:nth-child(1) { background: #ff5f57; }
.mac-dots i:nth-child(2) { background: #febc2e; }
.mac-dots i:nth-child(3) { background: #28c840; }
.mac-url {
margin-inline: auto; display: inline-flex; align-items: center; gap: 1px;
padding: 5px 20px; border-radius: 8px; font-family: 'Cabinet', sans-serif;
font-size: .76rem; font-weight: 640; letter-spacing: -.01em; color: rgba(233, 239, 244, .6);
background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.mac-url span { background: var(--aurora); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mac-tools { display: flex; gap: 7px; }
.mac-tools i { width: 15px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .13); }
/* body: rail + main */
.mac-body { display: grid; grid-template-columns: 56px 1fr; }
.mac-rail { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 17px 0; background: rgba(0, 0, 0, .2); border-right: 1px solid rgba(255, 255, 255, .05); }
.mac-logo {
width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
font-family: 'Cabinet', sans-serif; font-weight: 820; font-size: 1.02rem; color: #fff; line-height: 1;
background: linear-gradient(135deg, rgba(58, 223, 180, .24), rgba(139, 124, 246, .24));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.mac-logo span { background: var(--aurora); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mac-nav { width: 23px; height: 23px; border-radius: 7px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.mac-nav.is-active { background: linear-gradient(135deg, #3ADFB4, #6FD4FF); box-shadow: 0 7px 15px -6px rgba(58, 223, 180, .7); }
.mac-ava { margin-top: auto; width: 27px; height: 27px; border-radius: 50%; background: linear-gradient(135deg, #3ADFB4, #8B7CF6); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
.mac-main { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.mac-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mac-head-txt { display: flex; flex-direction: column; gap: 7px; }
.mac-head-txt b { display: block; height: 9px; width: 94px; border-radius: 4px; background: rgba(255, 255, 255, .24); }
.mac-head-txt i { display: block; height: 6px; width: 62px; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.mac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mac-grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; display: block; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 24px -16px rgba(0, 0, 0, .75); }
.mac-foot { display: flex; align-items: center; gap: 12px; }
.mac-card { flex: 1; margin: 0; }
.mac-btn { flex: 0 0 auto; padding-inline: 22px; }
/* app sign-in screenshot — floats premium on the dark hero */
.app-shot { box-shadow: 0 46px 92px -32px rgba(0, 0, 0, .62), 0 16px 38px -18px rgba(0, 0, 0, .45); }
.app-shot img { max-height: none; object-fit: contain; }
/* ---------- europe map ---------- */
.map-wrap { position: relative; max-width: 400px; margin-inline: auto; color: rgba(233, 239, 244, .3); }
.euromap { display: block; width: 100%; height: auto; }
.map-marker {
position: absolute; width: 11px; height: 11px; border-radius: 50%;
background: linear-gradient(92deg, #3ADFB4, #6FD4FF);
transform: translate(-50%, -50%); box-shadow: 0 0 14px rgba(111, 212, 255, .85);
}
.map-marker::after {
content: ''; position: absolute; inset: -4px; border-radius: 50%;
border: 1.5px solid rgba(111, 212, 255, .7);
animation: ping 2.6s ease-out infinite; animation-delay: calc(var(--i) * .5s);
}
@keyframes ping { 0% { transform: scale(.55); opacity: .95; } 100% { transform: scale(2.7); opacity: 0; } }
/* ---------- demonstrating blog covers ---------- */
.post-img { position: relative; }
.post-cover { position: absolute; inset: 0; overflow: hidden; }
.post-cover .viz {
position: absolute; inset: 0; width: 100%; height: 100%;
aspect-ratio: auto; border-radius: 0;
}
/* photo cover for the newer posts — fills the card thumbnail and the 21:9 article banner */
.post-cover-img { position: absolute; inset: 0; background: #0d1724; }
.post-cover-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.post-card:hover .post-cover-img img { transform: scale(1.05); }
body.anim .reveal:not(.in) .post-cover-img img { transform: scale(1.08); }
.cover-work { position: absolute; inset: 0; display: flex; flex-direction: column; background: #0d1724; }
.cover-work .browser-bar { flex: 0 0 auto; }
.cover-work img {
flex: 1; width: 100%; min-height: 0; object-fit: cover; object-position: top;
transition: transform .8s var(--ease);
}
.post-card:hover .cover-work img { transform: scale(1.04); }
body.anim .reveal:not(.in) .cover-work img { transform: scale(1.08); }
.article-banner { position: relative; margin: 0; aspect-ratio: 21 / 9; border-radius: var(--r); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(7, 18, 32, .55); }
/* posts with a real screenshot cover: 16:10 frame matches the images exactly, so the whole
dashboard shows uncropped and larger on the article page (base + mobile via higher specificity). */
.article-banner.article-banner--img { aspect-ratio: 16 / 10; background: #fff; }
/* ---------- reveal animations ---------- */
.reveal { transition: opacity .8s ease, transform .8s var(--ease); }
body.anim .reveal { opacity: 0; transform: translateY(26px); }
body.anim .reveal.in { opacity: 1; transform: none; }
.svc-grid .reveal:nth-child(2), .post-grid .reveal:nth-child(2), .proc-grid .reveal:nth-child(2),
.values-grid .reveal:nth-child(2), .feat-grid .reveal:nth-child(2) { transition-delay: .12s; }
.svc-grid .reveal:nth-child(3), .post-grid .reveal:nth-child(3), .proc-grid .reveal:nth-child(3),
.values-grid .reveal:nth-child(3), .feat-grid .reveal:nth-child(3) { transition-delay: .24s; }
.svc-grid .reveal:nth-child(4), .proc-grid .reveal:nth-child(4), .feat-grid .reveal:nth-child(4) { transition-delay: .36s; }
/* the app "basics" grid has 6 cards in a 2×3 layout — cascade by column so both rows stagger evenly */
.feat-grid .reveal:nth-child(1) { transition-delay: 0s; }
.feat-grid .reveal:nth-child(2) { transition-delay: .1s; }
.feat-grid .reveal:nth-child(3) { transition-delay: .2s; }
.feat-grid .reveal:nth-child(4) { transition-delay: .1s; }
.feat-grid .reveal:nth-child(5) { transition-delay: .2s; }
.feat-grid .reveal:nth-child(6) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
body { animation: none; }
body.anim .reveal { opacity: 1; transform: none; transition: none; }
body.anim .reveal-words, body.anim .reveal-lines .hline { opacity: 1; transform: none; transition: none; }
body.anim .reveal:not(.in) :is(.svc-img, .post-img, .svc-block-img, .app-visual, .app-hero-visual, .global-visual) img,
body.anim .reveal:not(.in) :is(.studio-img, .cover-img) { transform: none; }
.next-step::before, .proc-step::after { transform: scaleX(1); transition: none; }
body.anim .process .proc-step:not(.in) .proc-node,
body.anim .process .proc-step:not(.in) :is(.proc-num, h3, p) { opacity: 1; transform: none; transition: none; }
.hero-bg img { animation: none; transform: none; }
.marquee-track { animation: none; }
.aurora::before, .aurora::after { animation: none; }
.btn::before { display: none; }
.phone { animation: none; }
.map-marker::after { animation: none; opacity: 0; }
.flow-pulse { animation: none; }
body.anim .reveal:not(.in) :is(.viz-bars span, .bq-row, .flow-chip, .flow-link, .phone-screen > *) { transform: none; opacity: 1; }
}
/* ---------- responsive ---------- */
@media (max-width: 1080px) {
.post-grid { grid-template-columns: repeat(2, 1fr); }
.feat-grid { grid-template-columns: repeat(2, 1fr); }
.process .proc-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
.proc-step:not(:last-child)::after { display: none; }
.stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.6rem; }
}
@media (max-width: 940px) {
.svc-grid { grid-template-columns: repeat(2, 1fr); }
.svc-feat { grid-template-columns: 1fr; gap: 1.8rem; margin-bottom: .5rem; }
.svc-feat .svc-viz { order: -1; }
.head-nav, .site-head .btn-small { display: none; }
.head-right { gap: .5rem; }
.menu-toggle {
display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
width: 44px; height: 44px; padding: 0; cursor: pointer; color: inherit;
background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 13px;
transition: background .25s, border-color .25s;
}
.menu-toggle span { display: block; height: 2px; width: 20px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease); }
.menu-toggle:hover { background: rgba(255, 255, 255, .15); }
.site-head.scrolled .menu-toggle { background: rgba(11, 27, 43, .05); border-color: rgba(11, 27, 43, .12); }
body.no-scroll .menu-toggle { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.menu-toggle.active span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle.active span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
body.no-scroll .site-head { color: #fff; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.app-grid, .app-hero-grid, .svc-block-grid, .contact-grid, .global-grid { grid-template-columns: 1fr; }
.next-grid { grid-template-columns: 1fr; gap: 1.6rem; }
.work-card { flex-basis: 78vw; }
.map-wrap { max-width: 330px; }
.svc-block-grid.flip .svc-block-viz { order: -1; }
.post-card-big { grid-template-columns: 1fr; }
.app-visual { order: -1; }
.app-visual img, .app-hero-visual img { max-height: 380px; }
/* Sign-in showcase: on small screens the fixed max-height + object-fit:contain
letterboxed the near-square image, and the shadow/rounding made it read as
an empty light card on the dark hero. Show it whole and full-bleed instead. */
.app-shot { box-shadow: none; border-radius: 0; overflow: visible; }
.app-visual.app-shot, .app-hero-visual.app-shot {
width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw);
}
.app-shot img { max-height: none; border-radius: 0; }
}
@media (max-width: 640px) {
.svc-grid, .post-grid, .proc-grid, .feat-grid, .values-grid { grid-template-columns: 1fr; }
.process .proc-grid { grid-template-columns: 1fr; }
.hero-title { font-size: clamp(2.7rem, 13vw, 4rem); }
.hero-trust { gap: .6rem 1.2rem; font-size: .84rem; }
.stats-grid { gap: 1.6rem; }
.stat { padding-left: 1.1rem; }
.scroll-hint { display: none; }
.cover-img, .studio-img { aspect-ratio: 16 / 10; }
.article-banner { aspect-ratio: 4 / 3; }
}
/* ============================================================
Platform / product showcase (homepage)
============================================================ */
.platform .section-head.center { text-align: center; }
.platform-sub {
max-width: 42rem; margin: 1.1rem auto 0; color: var(--muted);
font-size: 1.06rem; line-height: 1.65;
}
/* small aurora "product" tag */
.pf-tag {
display: inline-flex; align-items: center; gap: .5rem;
font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
color: var(--ink);
}
.pf-tag-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--aurora); box-shadow: 0 0 0 4px rgba(58, 223, 180, .16);
}
/* featured rows: framed screenshot + copy, alternating */
.pf-feat {
display: grid; grid-template-columns: 1.06fr .94fr;
gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
margin-top: clamp(3rem, 6vw, 5rem);
}
.pf-feat.pf-flip .pf-frame { order: 2; }
.pf-copy h3 { margin: .7rem 0 .9rem; }
.pf-copy .lead { color: var(--muted); margin: 0 0 1.7rem; }
/* accent marker above each showcase title — in place of the removed category pill */
.platform .pf-copy h3::before {
content: ''; display: block; width: 40px; height: 3px; border-radius: 3px; margin-bottom: 1.05rem;
background: linear-gradient(90deg, rgb(var(--acc, 58, 223, 180)), rgba(var(--acc, 58, 223, 180), .18));
box-shadow: 0 0 18px -2px rgba(var(--acc, 58, 223, 180), .55);
}
.pf-card-body h4::before {
content: ''; display: block; width: 26px; height: 3px; border-radius: 3px; margin-bottom: .6rem;
background: linear-gradient(90deg, rgb(var(--acc, 58, 223, 180)), rgba(var(--acc, 58, 223, 180), .2));
}
.pf-frame { position: relative; }
.pf-frame::before {
content: ''; position: absolute; inset: -14% -10% -22%; z-index: 0;
background: radial-gradient(60% 55% at 70% 20%, rgba(58, 223, 180, .22), transparent 70%),
radial-gradient(55% 55% at 25% 90%, rgba(139, 124, 246, .18), transparent 70%);
filter: blur(20px); opacity: .9; pointer-events: none;
}
.pf-frame .browser {
position: relative; z-index: 1;
box-shadow: 0 44px 84px -34px rgba(11, 27, 43, .5);
transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pf-frame .browser img { aspect-ratio: 16 / 10; }
.pf-feat:hover .pf-frame .browser { transform: translateY(-7px); box-shadow: 0 54px 96px -30px rgba(11, 27, 43, .55); }
/* grid of four compact product cards */
.pf-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(1.1rem, 2.4vw, 1.7rem); margin-top: clamp(3rem, 6vw, 5rem);
}
.pf-card { display: flex; flex-direction: column; }
.pf-card .browser { transition: transform .45s var(--ease), box-shadow .45s var(--ease); box-shadow: 0 22px 48px -26px rgba(11, 27, 43, .45); }
.pf-card .browser img { aspect-ratio: 16 / 10; }
.pf-card:hover .browser { transform: translateY(-5px); box-shadow: 0 34px 62px -26px rgba(11, 27, 43, .5); }
.pf-card-body { padding: 1.15rem .15rem 0; }
.pf-card-body h4 { margin: .55rem 0 .4rem; font-size: 1.12rem; letter-spacing: -.01em; }
.pf-card-body p { color: var(--muted); font-size: .92rem; line-height: 1.55; margin: 0; }
/* footer note + cta */
.pf-foot {
display: flex; align-items: center; justify-content: center; gap: 1.6rem;
margin-top: clamp(2.6rem, 5vw, 3.6rem); flex-wrap: wrap; text-align: center;
}
.pf-note { display: inline-flex; align-items: center; gap: .55rem; color: var(--muted); font-weight: 560; margin: 0; }
.pf-note-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--aurora); flex: 0 0 auto; }
@media (max-width: 900px) {
.pf-feat { grid-template-columns: 1fr; gap: 2rem; }
.pf-feat.pf-flip .pf-frame { order: 0; }
.pf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.pf-grid { grid-template-columns: 1fr; }
}
/* ============================================================
App page — centered heads, FAQ accordion
============================================================ */
.section-head.center { text-align: center; }
.section-head.center .kicker { justify-content: center; }
.faq-inner { max-width: 52rem; }
.faq-list { margin-top: clamp(2rem, 4vw, 3rem); }
.faq-item { border-top: 1px solid var(--hairline); }
.faq-item:last-child { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
padding: 1.35rem 0; cursor: pointer; list-style: none;
font-weight: 660; font-size: 1.08rem; color: var(--ink); transition: color .2s var(--ease);
}
.faq-item summary:hover { color: var(--navy); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-ico { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
.faq-ico::before, .faq-ico::after {
content: ''; position: absolute; background: currentColor; border-radius: 2px;
transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.faq-ico::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-ico::after { top: 0; left: 8px; width: 2px; height: 18px; }
.faq-item[open] .faq-ico::after { transform: rotate(90deg); opacity: 0; }
.faq-a { padding: 0 0 1.5rem; max-width: 46rem; }
.faq-a p { margin: 0; color: var(--muted); line-height: 1.66; }
/* Dark (services) FAQ — keep questions/answers legible on navy.
The light-FAQ summary rule above is unscoped and would otherwise
paint these near-black on a dark background. */
.section.dark .faq-item summary { color: var(--on-dark); transition: color .2s var(--ease); }
.section.dark .faq-item summary:hover { color: #fff; }
.section.dark .faq-item p { color: #c4cfdb; line-height: 1.7; }
/* Smooth accordion open/close (progressive enhancement; snaps on browsers
without ::details-content support, so no regression). */
:root { interpolate-size: allow-keywords; }
@media (prefers-reduced-motion: no-preference) {
.faq-item::details-content {
height: 0; overflow: hidden;
transition: height .38s var(--ease), content-visibility .38s allow-discrete;
}
.faq-item[open]::details-content { height: auto; }
}
/* ============================================================
Premium DARK product showcase (app page products section)
============================================================ */
/* A deeper "product environment" that flows OUT of the navy hero: the top
matches the hero's navy, then richens downward — same colour family, cooler
accents (cyan + violet), so it belongs to the page while gaining its own depth. */
.pf-showcase {
background:
radial-gradient(60% 38% at 84% 22%, rgba(111, 212, 255, .09), transparent 60%),
radial-gradient(56% 44% at 12% 64%, rgba(139, 124, 246, .10), transparent 62%),
linear-gradient(180deg, #0B1B2B 0%, #0a1725 18%, #08131f 58%, #061019 100%);
color: var(--on-dark); position: relative; overflow: hidden; isolation: isolate;
}
/* ambient aurora, gently drifting — cool tones to sit with the navy. Glows are kept clear of the top
edge so the section opens on the same flat navy the hero fades into (no seam between the two). */
.pf-showcase::before {
content: ''; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
background:
radial-gradient(34% 30% at 84% 26%, rgba(111, 212, 255, .11), transparent 66%),
radial-gradient(40% 32% at 12% 84%, rgba(139, 124, 246, .14), transparent 66%);
}
@media (prefers-reduced-motion: no-preference) {
.pf-showcase::before { animation: pfDrift 18s ease-in-out infinite alternate; }
}
@keyframes pfDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -2.6%, 0); } }
/* fine dot-grid texture, faded toward the edges */
.pf-showcase::after {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6;
background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.4px);
background-size: 30px 30px;
-webkit-mask: radial-gradient(130% 88% at 50% 22%, #000 34%, transparent 78%);
mask: radial-gradient(130% 88% at 50% 22%, #000 34%, transparent 78%);
}
.pf-showcase .container { position: relative; z-index: 1; }
.pf-showcase .section-head .display-2 { color: #fff; }
.pf-showcase .kicker { color: var(--on-dark-muted); }
.pf-showcase .pf-copy { position: relative; }
.pf-showcase .pf-copy h3 { color: #fff; }
.pf-showcase .pf-copy .lead { color: var(--on-dark-muted); }
.pf-showcase .check-list li { color: var(--on-dark); font-weight: 480; }
/* "Powered by frontier models" chips — glass pills with the OpenAI mark */
.pf-showcase .pf-engine { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin: .2rem 0 1.5rem; }
.pf-showcase .pf-engine-lead { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.pf-showcase .pf-engine-chips { display: flex; gap: .55rem; flex-wrap: wrap; }
.pf-showcase .pf-engine-chip {
display: inline-flex; align-items: center; gap: .5rem;
padding: .42rem .82rem .42rem .58rem; border-radius: 11px;
font-size: .87rem; font-weight: 600; letter-spacing: -.01em; color: #fff;
font-variant-numeric: tabular-nums;
background: rgba(255, 255, 255, .05);
box-shadow: inset 0 0 0 1px rgba(var(--acc, 139, 124, 246), .32), 0 8px 22px -13px rgba(var(--acc, 139, 124, 246), .6);
backdrop-filter: blur(4px);
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pf-showcase .pf-engine-chip:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(var(--acc, 139, 124, 246), .55), 0 16px 32px -12px rgba(var(--acc, 139, 124, 246), .75); }
.pf-showcase .pf-engine-chip svg { width: 17px; height: 17px; flex: none; color: #fff; opacity: .96; }
/* big faint editorial index numeral */
.pf-index {
position: absolute; top: -.62em; right: 0; z-index: 0; pointer-events: none; user-select: none;
font-family: 'Cabinet Grotesk', sans-serif; font-size: clamp(4rem, 7vw, 6.2rem);
font-weight: 800; line-height: 1; letter-spacing: -.05em;
color: transparent; -webkit-text-stroke: 1.3px rgba(255, 255, 255, .085);
}
/* breathing room between the big rows */
.pf-showcase .pf-feat { margin-top: clamp(4.5rem, 9vw, 8rem); }
.pf-showcase .pf-feat:first-of-type { margin-top: clamp(3rem, 6vw, 5rem); }
/* product tag → glowing glass pill with accent dot */
.pf-showcase .pf-tag {
position: relative; color: #fff; padding: .44rem .85rem .44rem .62rem; border-radius: 999px;
background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
backdrop-filter: blur(4px); margin-bottom: .4rem;
}
.pf-showcase .pf-tag-dot {
background: rgb(var(--acc, 58, 223, 180));
box-shadow: 0 0 12px 1px rgba(var(--acc, 58, 223, 180), .9);
}
/* framed screenshots: aurora gradient border + per-product beam glow */
.pf-showcase .pf-frame { position: relative; z-index: 1; }
.pf-showcase .pf-frame::before {
inset: -18% -14% -30%; filter: blur(32px); opacity: 1;
background:
radial-gradient(56% 52% at 50% 20%, rgba(var(--acc, 58, 223, 180), .46), transparent 68%),
radial-gradient(44% 46% at 24% 96%, rgba(139, 124, 246, .2), transparent 72%);
}
.pf-showcase .pf-frame .browser {
border: 1.6px solid transparent;
background:
linear-gradient(#0a121d, #0a121d) padding-box,
conic-gradient(from var(--pfa, 130deg),
rgba(var(--acc, 58, 223, 180), .12),
rgba(var(--acc, 58, 223, 180), .95) 10%,
rgba(111, 212, 255, .6) 28%,
rgba(139, 124, 246, .3) 52%,
rgba(var(--acc, 58, 223, 180), .12) 80%) border-box;
box-shadow: 0 56px 108px -34px rgba(0, 0, 0, .82), 0 0 64px -14px rgba(var(--acc, 58, 223, 180), .22);
}
.pf-showcase .pf-feat:hover .pf-frame .browser {
transform: translateY(-8px);
box-shadow: 0 72px 132px -32px rgba(0, 0, 0, .85), 0 0 80px -10px rgba(var(--acc, 58, 223, 180), .32);
}
/* ============================================================
Showcase animations — scroll entrance + ambient glow
============================================================ */
@property --pfa { syntax: ''; initial-value: 130deg; inherits: false; }
/* The row is a static stage; its parts animate in. */
body.anim .pf-showcase .pf-feat.reveal { opacity: 1; transform: none; }
/* ---------- mobile polish: app.html deep-dives + comparison table ---------- */
@media (max-width: 640px) {
/* deep-dive rows read flat on a phone — brighter lead, checklist as glass chips */
.pf-showcase .pf-copy .lead { color: rgba(233, 239, 244, .82); }
.pf-showcase .check-list { margin-bottom: 0; }
.pf-showcase .check-list li {
background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09);
border-radius: 13px; padding: .82rem 1rem .82rem 3rem; margin-bottom: .55rem; font-weight: 460;
}
.pf-showcase .check-list li::before { left: .82rem; top: .92rem; }
.pf-index { font-size: clamp(3.2rem, 15vw, 4.6rem); top: -.46em; }
/* comparison table → stacked cards so nothing scrolls off-screen */
.compare-scroll { overflow-x: visible; }
.compare-table { min-width: 0; display: block; }
.compare-table thead { display: none; }
.compare-table tbody { display: flex; flex-direction: column; gap: 14px; }
.compare-table tbody tr {
display: block; background: #fff; border-radius: 16px; overflow: hidden;
box-shadow: 0 14px 32px -20px rgba(11, 27, 43, .3), inset 0 0 0 1px var(--hairline);
}
.compare-table tbody tr:hover { background: #fff; }
.compare-table tbody th[scope="row"] {
display: block; padding: 13px 16px; text-align: left; border: none;
font-family: 'Cabinet', sans-serif; font-size: 1.02rem; font-weight: 700; color: var(--ink);
background: var(--fog); border-bottom: 1px solid var(--hairline);
}
.compare-table tbody td {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 11px 16px; text-align: right; color: var(--muted); font-size: .95rem;
border: none; border-bottom: 1px solid color-mix(in srgb, var(--hairline) 55%, transparent);
}
.compare-table tbody td::before {
content: attr(data-col); flex: 1; text-align: left;
font-size: .85rem; font-weight: 600; color: var(--muted); letter-spacing: -.01em;
}
/* neutralise the desktop "floating nordly column" styling in the card view */
.compare-table td.col-nordly, .compare-table th.col-nordly,
.compare-table tbody tr:last-child td.col-nordly { box-shadow: none; border-radius: 0; }
.compare-table tbody td.col-nordly {
background: color-mix(in srgb, var(--teal) 9%, #fff);
border-top: 1px solid var(--hairline); border-bottom: none;
}
.compare-table tbody td.col-nordly::before { color: var(--ink); font-weight: 700; }
.compare-table tbody td.col-nordly .cmp-text { color: var(--ink); font-weight: 650; }
}
/* framed screenshot slides in from its own side + settles */
.pf-showcase .pf-frame { transition: opacity 1s var(--ease), transform 1s var(--ease); will-change: transform, opacity; }
body.anim .pf-showcase .pf-feat.reveal:not(.in) .pf-frame { opacity: 0; transform: translateX(-46px) scale(.96); }
body.anim .pf-showcase .pf-feat.pf-flip.reveal:not(.in) .pf-frame { transform: translateX(46px) scale(.96); }
/* copy parts cascade up */
.pf-showcase .pf-copy > * { transition: opacity .7s var(--ease), transform .7s var(--ease); }
body.anim .pf-showcase .pf-feat.reveal:not(.in) .pf-copy > * { opacity: 0; transform: translateY(22px); }
body.anim .pf-showcase .pf-feat.reveal:not(.in) .pf-copy > .check-list { opacity: 1; transform: none; }
body.anim .pf-showcase .pf-feat.in .pf-copy > *:nth-child(2) { transition-delay: .10s; }
body.anim .pf-showcase .pf-feat.in .pf-copy > *:nth-child(3) { transition-delay: .17s; }
body.anim .pf-showcase .pf-feat.in .pf-copy > *:nth-child(4) { transition-delay: .24s; }
/* bullet points ripple in */
.pf-showcase .check-list li { transition: opacity .6s var(--ease), transform .6s var(--ease); }
body.anim .pf-showcase .pf-feat.reveal:not(.in) .check-list li { opacity: 0; transform: translateY(12px); }
body.anim .pf-showcase .pf-feat.in .check-list li { transition-delay: calc(.30s + var(--i) * .09s); }
@media (prefers-reduced-motion: no-preference) {
/* a highlight sweeps around each frame's gradient border */
.pf-showcase .pf-frame .browser { animation: pfBorderSpin 7s linear infinite; }
@keyframes pfBorderSpin { to { --pfa: 490deg; } }
/* the accent beam gently breathes */
.pf-showcase .pf-frame::before { animation: pfBeam 5.5s ease-in-out infinite; }
@keyframes pfBeam { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
/* the tag's accent dot pulses */
.pf-showcase .pf-tag-dot { animation: pfDot 2.6s ease-in-out infinite; }
@keyframes pfDot {
0%, 100% { box-shadow: 0 0 11px 1px rgba(var(--acc, 58, 223, 180), .85); }
50% { box-shadow: 0 0 20px 3px rgba(var(--acc, 58, 223, 180), .5); }
}
}
@media (prefers-reduced-motion: reduce) {
.mac { animation: none; }
body.anim .reveal:not(.in) .mac [style*="--i"] { transform: none; opacity: 1; }
}