/* ==========================================================================
WebAdapt.ai — Design System "Volt Terminal"
OLED black · volt-lime signal · Clash Display / Satoshi · machined glass.
The site IS the portfolio: every surface has to read as a $50k build.
========================================================================== */
/* Premium type — Fontshare CDN (no build step). Clash Display for headlines,
Satoshi for UI/body. JetBrains Mono stays for data/terminal DNA. */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=satoshi@300,400,500,700,900&display=swap');
/* ---------- Tokens ---------- */
:root {
/* Canvas — deepest OLED black, warmed a hair so it isn't dead #000 */
--bg: #050505;
--surface-1: #0B0B0A;
--surface-2: #111110;
--surface-3: #181816;
--border: #2A2A27;
--border-soft: rgba(255, 255, 255, 0.06);
--border-mid: rgba(255, 255, 255, 0.10);
--border-strong: rgba(255, 255, 255, 0.16);
/* Text — soft-white headings, warm gray body */
--text-primary: #F4F4F0;
--text-secondary: #9A9A92;
--text-tertiary: #5E5E57;
/* Electric blue — the single accent, carried over from the previous
design. One accent only: no purple, no pink, no gradient rainbow. */
--signal: #0099FF;
--signal-bright: #33ADFF;
--signal-dim: #0077CC;
--signal-glow: rgba(0, 153, 255, 0.22);
--signal-soft: rgba(0, 153, 255, 0.07);
--signal-ink: #02090F; /* near-black w/ blue cast — text on blue */
/* Legacy aliases — every old blue/purple reference now resolves to volt
or a neutral so no stray rainbow survives anywhere in the cascade. */
--accent-purple: #0099FF;
--accent-purple-soft: rgba(0, 153, 255, 0.10);
--ai-accent: #0099FF;
--ai-glow: rgba(0, 153, 255, 0.18);
--gradient-framer: linear-gradient(135deg, #0099FF 0%, #33ADFF 60%, #0A3A66 100%);
--gradient-text: linear-gradient(180deg, #F4F4F0 0%, #B8B8AF 100%);
--success: #4ADE80;
--warning: #F5B544;
--error: #FF5C5C;
--max-width: 1280px;
--bleed-width: 1600px;
--radius: 16px;
--radius-sm: 10px;
--radius-lg: 24px;
--radius-xl: 32px;
/* Type stacks */
--font-display: 'Clash Display', 'Satoshi', system-ui, sans-serif;
--font-body: 'Satoshi', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--ease: cubic-bezier(0.22, 1, 0.36, 1); /* strong ease-out — enters fast, settles smooth */
--ease-sharp: cubic-bezier(0.76, 0, 0.24, 1); /* sharp in-out — for morphing on-screen elements */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* punchy exit — snappier than --ease */
--ease-fluid: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-drawer — Framer uses similar */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot — magnetic snap-back */
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
background: var(--bg);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
scroll-padding-top: 120px; /* offset floating nav when jumping to anchors */
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* Inter's stylistic alternates */
}
section[id] { scroll-margin-top: 80px; }
body { background: var(--bg); line-height: 1.5; overflow-x: hidden; min-height: 100dvh; }
/* Lenis companion rules — when Lenis drives scrolling it stamps `lenis` on
. Native CSS smooth-scroll MUST be off then, or every wheel tick
gets smoothed twice (glide-then-jump feel). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
/* Grain overlay — premium signal */
body::before {
content: '';
position: fixed; inset: 0;
pointer-events: none;
z-index: 1000;
opacity: 0.035;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E");
mix-blend-mode: overlay;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; }
::selection { background: var(--signal); color: var(--bg); }
/* ---------- Typography — Clash Display / Satoshi / JetBrains Mono ---------- */
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 0.95; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.eyebrow {
font-family: var(--font-body);
font-size: 12px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--text-secondary);
}
/* Display face on every major heading — one layer instead of per-rule edits.
Clash Display is natively tighter than Inter, so relax the old tracking. */
h2, h3,
.hero h1, .section-header h2, .final-cta h2, .mega-headline,
.service-title, .work-client, .about-text h2, .ai-left h2,
.case-quote, .pricing-name, .value-card h4, .process-step h4,
.feature-item h4, .stack-row h4, .geo-city {
font-family: var(--font-display);
}
.hero h1 { letter-spacing: -0.02em; }
.section-header h2, .final-cta h2, .about-text h2, .ai-left h2 { letter-spacing: -0.015em; }
.mega-headline { letter-spacing: -0.02em; }
/* ---------- Layout ---------- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 40px; }
.bleed { max-width: var(--bleed-width); margin: 0 auto; padding: 0 40px; }
section { padding: 120px 0; position: relative; }
@media (max-width: 720px) {
.container, .bleed { padding: 0 20px; }
section { padding: 80px 0; }
}
/* ---------- Navigation ---------- */
.nav {
position: fixed; top: 0; left: 0; right: 0;
z-index: 100;
padding: 20px 40px;
display: flex; align-items: center; justify-content: space-between;
background: rgba(10, 10, 11, 0.72);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--border-soft);
}
.logo {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-body); font-weight: 700; font-size: 18px;
letter-spacing: -0.02em;
}
.logo-mark { width: 24px; height: 24px; flex-shrink: 0; }
.logo-mark path { fill: var(--signal); stroke: var(--signal); }
.nav-links { display: flex; gap: 36px; }
.nav-links a {
font-size: 14px; color: var(--text-secondary);
transition: color 0.2s var(--ease); font-weight: 500;
}
.nav-links a:hover, .nav-links a.active { color: var(--text-primary); }
.nav-cta {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px; border-radius: 999px;
background: var(--signal); color: var(--bg);
font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
transition: transform 0.18s var(--ease-out), opacity 0.18s var(--ease-out);
}
.nav-cta:hover { transform: translateY(-1px); }
@media (max-width: 820px) {
.nav { padding: 16px 20px; }
.nav-links { display: none; }
}
/* ---------- Buttons — magnetic volt pills with fill-sweep ----------
JS (site.js) adds the magnetic drift on pointer:fine devices by writing
transform via GSAP quickTo; CSS owns everything else. The sweep layer is
a ::before that scales from the cursor's entry point (JS sets --px/--py). */
.btn-primary {
display: inline-flex; align-items: center; gap: 10px;
padding: 18px 32px; border-radius: 999px;
background: var(--signal); color: var(--signal-ink);
font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
position: relative; overflow: hidden;
isolation: isolate;
transition: box-shadow 0.35s var(--ease), color 0.25s var(--ease);
will-change: transform;
}
/* Fill sweep — brighter volt floods from cursor entry point */
.btn-primary::before {
content: ''; position: absolute; z-index: -1;
left: var(--px, 50%); top: var(--py, 50%);
width: 0; height: 0; border-radius: 50%;
transform: translate(-50%, -50%);
background: var(--signal-bright);
transition: width 0.5s var(--ease), height 0.5s var(--ease);
}
/* Ambient volt glow on hover */
.btn-primary::after {
content: ''; position: absolute; inset: -6px; z-index: -2;
background: var(--signal); border-radius: inherit; opacity: 0;
filter: blur(24px);
transition: opacity 0.35s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.btn-primary:hover::before { width: 240%; height: 600%; }
.btn-primary:hover::after { opacity: 0.45; }
.btn-primary:hover { box-shadow: 0 12px 40px -12px var(--signal-glow); }
}
.btn-ghost {
display: inline-flex; align-items: center; gap: 10px;
padding: 18px 32px; border-radius: 999px;
border: 1px solid var(--border); background: transparent;
color: var(--text-primary);
font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
position: relative; overflow: hidden; isolation: isolate;
transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
will-change: transform;
}
.btn-ghost::before {
content: ''; position: absolute; z-index: -1;
left: var(--px, 50%); top: var(--py, 50%);
width: 0; height: 0; border-radius: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.06);
transition: width 0.45s var(--ease), height 0.45s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.btn-ghost:hover { border-color: var(--border-strong); }
.btn-ghost:hover::before { width: 240%; height: 600%; }
}
.arrow { display: inline-block; transition: transform 0.25s var(--ease); }
.btn-primary:hover .arrow { transform: translateX(4px); }
/* ---------- Hero (shared base) ---------- */
.hero {
min-height: 100dvh; padding: 180px 0 120px;
position: relative; overflow: hidden;
}
.hero::before {
content: ''; position: absolute;
top: -200px; left: 50%; transform: translateX(-50%);
width: 1200px; height: 1200px;
background: radial-gradient(ellipse at center, rgba(0, 153, 255, 0.08) 0%, rgba(30, 30, 34, 0.4) 30%, transparent 60%);
pointer-events: none; z-index: 0;
}
.hero.hero-short { min-height: 80dvh; padding: 180px 0 80px; }
.hero-content { position: relative; z-index: 2; }
.hero-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; animation: fadeUp 0.55s var(--ease) 0.05s both; }
.hero-meta .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--signal); box-shadow: 0 0 12px var(--signal);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.3); }
}
.hero h1 {
font-family: var(--font-body); font-weight: 600;
font-size: clamp(56px, 9vw, 128px);
line-height: 0.92; letter-spacing: -0.045em;
margin-bottom: 32px; animation: fadeUp 0.65s var(--ease) 0.15s both;
}
.hero h1.hero-small { font-size: clamp(44px, 6.5vw, 88px); }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 em {
font-style: normal;
font-family: var(--font-body);
position: relative;
color: var(--text-primary);
}
.hero h1 em.underlined::after {
content: ''; position: absolute; bottom: 0.08em;
left: 0; right: 0; height: 2px;
background: rgba(255, 255, 255, 0.6);
transform: scaleX(0); transform-origin: left;
animation: drawLine 1s var(--ease) 1.4s forwards;
}
@keyframes drawLine { to { transform: scaleX(1); } }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-sub {
font-size: clamp(18px, 1.4vw, 22px);
line-height: 1.4; color: var(--text-secondary);
max-width: 620px; margin-bottom: 48px;
letter-spacing: -0.005em;
animation: fadeUp 0.65s var(--ease) 0.28s both;
}
.hero-sub strong { color: var(--text-primary); font-weight: 500; }
.hero-ctas {
display: flex; gap: 16px; flex-wrap: wrap;
margin-bottom: 100px;
animation: fadeUp 0.65s var(--ease) 0.4s both;
}
/* Hero stat row */
.hero-stat-row {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 1px; background: var(--border-soft);
border-radius: var(--radius); overflow: hidden;
border: 1px solid var(--border-soft);
animation: fadeUp 0.65s var(--ease) 0.55s both;
}
.hero-stat {
background: var(--bg); padding: 28px 32px;
display: flex; flex-direction: column; gap: 6px;
}
.hero-stat-value {
font-family: var(--font-mono); font-size: 28px; font-weight: 500;
color: var(--signal); letter-spacing: -0.02em;
}
.hero-stat-label { font-size: 13px; color: var(--text-secondary); letter-spacing: -0.005em; }
@media (max-width: 720px) { .hero-stat-row { grid-template-columns: 1fr; } }
/* Optimization curve divider */
.curve-divider {
padding: 60px 0; display: flex;
justify-content: center; position: relative;
}
.curve-divider svg { width: 100%; max-width: 900px; height: 80px; }
.curve-path {
fill: none; stroke: var(--signal);
stroke-width: 1.5; stroke-linecap: round;
stroke-dasharray: 2000; stroke-dashoffset: 2000;
animation: drawCurve 3s var(--ease) 1s forwards;
}
@keyframes drawCurve { to { stroke-dashoffset: 0; } }
/* ---------- Section header ---------- */
.section-header { max-width: 720px; margin-bottom: 80px; }
.section-header .eyebrow { margin-bottom: 20px; display: inline-block; }
.section-header h2 {
font-family: var(--font-body); font-weight: 600;
font-size: clamp(36px, 4.5vw, 64px);
line-height: 1; letter-spacing: -0.035em;
margin-bottom: 24px;
}
.section-header h2 em { font-style: normal; color: var(--text-tertiary); }
.section-header h2 em.signal { color: var(--signal); }
.section-header p {
font-size: 18px; color: var(--text-secondary);
line-height: 1.5; max-width: 580px;
}
/* ---------- Trust strip ---------- */
.trust {
padding: 60px 0;
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
}
.trust-grid {
display: grid; grid-template-columns: auto 1fr auto;
align-items: center; gap: 48px;
}
.trust-label {
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--text-tertiary); max-width: 160px; line-height: 1.5;
}
.trust-clients { display: flex; gap: 56px; align-items: center; opacity: 0.85; }
.client-mark {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-body); font-weight: 600; font-size: 17px;
color: var(--text-secondary); letter-spacing: -0.01em;
transition: color 0.25s var(--ease);
}
.client-mark:hover { color: var(--text-primary); }
.client-mark .shape { width: 22px; height: 22px; border: 1.5px solid currentColor; }
.client-mark .shape.circle { border-radius: 50%; }
.client-mark .shape.square { border-radius: 4px; }
.trust-geo {
font-family: var(--font-mono); font-size: 12px;
color: var(--text-tertiary); letter-spacing: 0.04em;
}
@media (max-width: 900px) {
.trust-grid { grid-template-columns: 1fr; gap: 24px; }
.trust-clients { gap: 32px; flex-wrap: wrap; }
}
/* ---------- Problem cards ---------- */
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.problem-card {
background: var(--surface-1); border: 1px solid var(--border-soft);
border-radius: var(--radius); padding: 36px 32px;
min-height: 220px;
display: flex; flex-direction: column; justify-content: space-between;
transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease-out);
position: relative; overflow: hidden;
}
.problem-card::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, transparent, var(--signal-soft) 140%);
opacity: 0; transition: opacity 0.18s var(--ease);
pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.problem-card:hover { border-color: var(--border-mid); transform: translateY(-2px); }
.problem-card:hover::after { opacity: 1; }
}
.problem-card .num {
font-family: var(--font-mono); font-size: 12px;
color: var(--text-tertiary); letter-spacing: 0.1em; margin-bottom: 24px;
}
.problem-card h3 {
font-family: var(--font-body); font-weight: 500;
font-size: 24px; line-height: 1.2; letter-spacing: -0.02em;
}
.problem-card h3 .highlight { color: var(--signal); }
@media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; } }
/* ---------- Bento grid ---------- */
.bento {
display: grid; grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(280px, auto); gap: 20px;
}
.bento-card {
background: var(--surface-1); border: 1px solid var(--border-soft);
border-radius: var(--radius); padding: 40px;
position: relative; overflow: hidden;
transition: border-color 0.18s var(--ease), transform 0.18s var(--ease-out);
display: flex; flex-direction: column; justify-content: space-between;
}
@media (hover: hover) and (pointer: fine) {
.bento-card:hover { border-color: var(--border-mid); transform: translateY(-2px); }
}
.bento-card.span-2 { grid-column: span 2; }
.bento-card.span-3 { grid-column: span 3; }
.bento-card.span-4 { grid-column: span 4; }
.bento-card.span-6 { grid-column: span 6; }
.bento-card.row-2 { grid-row: span 2; }
.service-label {
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--text-tertiary); margin-bottom: 24px;
display: flex; align-items: center; gap: 10px;
}
.service-label::before { content: ''; width: 18px; height: 1px; background: var(--text-tertiary); }
.service-title {
font-family: var(--font-body); font-weight: 500;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 20px;
}
.service-desc { color: var(--text-secondary); font-size: 15px; line-height: 1.55; max-width: 420px; }
.service-link {
margin-top: 24px; display: inline-flex; align-items: center; gap: 8px;
color: var(--signal); font-family: var(--font-mono);
font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
}
.service-link svg, .service-link .arrow {
transition: transform 0.22s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.service-link:hover svg,
.service-link:hover .arrow { transform: translateX(6px); }
}
/* Bento inline visuals */
.ads-bars { display: flex; gap: 8px; align-items: flex-end; height: 120px; }
.ads-bars .bar {
width: 14px; background: var(--surface-3); border-radius: 2px 2px 0 0;
animation: growBar 1.2s var(--ease) forwards;
transform-origin: bottom; transform: scaleY(0);
}
.ads-bars .bar.hot { background: var(--signal); }
.ads-bars .bar:nth-child(1) { animation-delay: 0.1s; height: 40%; }
.ads-bars .bar:nth-child(2) { animation-delay: 0.15s; height: 55%; }
.ads-bars .bar:nth-child(3) { animation-delay: 0.2s; height: 45%; }
.ads-bars .bar:nth-child(4) { animation-delay: 0.25s; height: 70%; }
.ads-bars .bar:nth-child(5) { animation-delay: 0.3s; height: 85%; }
.ads-bars .bar:nth-child(6) { animation-delay: 0.35s; height: 100%; }
@keyframes growBar { to { transform: scaleY(1); } }
.web-cursor { position: relative; width: 220px; padding: 24px 0 0; }
.web-cursor .fake-btn {
display: inline-block; padding: 10px 18px;
background: var(--signal); color: var(--bg);
font-family: var(--font-body); font-size: 12px; font-weight: 600;
border-radius: 8px; letter-spacing: -0.01em;
}
.web-cursor .cursor-icon { position: absolute; right: 20px; top: 10px; color: var(--text-primary); }
.ai-terminal {
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 10px; padding: 16px 18px;
font-family: var(--font-mono); font-size: 12px;
min-width: 280px; color: var(--text-secondary);
}
.ai-terminal .line { display: block; margin-bottom: 6px; }
.ai-terminal .prompt { color: var(--signal); }
.ai-terminal .cmd { color: var(--text-primary); }
.ai-terminal .caret {
display: inline-block; width: 8px; height: 14px;
background: var(--signal); vertical-align: text-bottom;
animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 900px) {
.bento { grid-template-columns: 1fr; }
.bento-card.span-2, .bento-card.span-3, .bento-card.span-4, .bento-card.span-6 { grid-column: 1 / -1; }
}
/* ---------- Case card (featured) ---------- */
.case-card {
background: linear-gradient(135deg, var(--surface-1) 0%, var(--surface-2) 100%);
border: 1px solid var(--border-soft); border-radius: 24px;
padding: 80px; position: relative; overflow: hidden;
display: grid; grid-template-columns: 1.2fr 1fr;
gap: 80px; align-items: center;
}
.case-card::before {
content: ''; position: absolute;
top: -100px; right: -100px;
width: 400px; height: 400px;
background: radial-gradient(circle at center, var(--signal-soft), transparent 60%);
pointer-events: none;
}
.case-left { position: relative; z-index: 2; }
.case-meta {
display: flex; gap: 20px; align-items: center; margin-bottom: 36px;
font-family: var(--font-mono); font-size: 12px;
color: var(--text-tertiary); letter-spacing: 0.1em; text-transform: uppercase;
}
.case-meta span::before {
content: ''; display: inline-block;
width: 4px; height: 4px; background: var(--text-tertiary);
border-radius: 50%; margin-right: 16px; vertical-align: middle;
}
.case-meta span:first-child::before { display: none; }
.case-quote {
font-family: var(--font-body); font-weight: 500;
font-size: clamp(28px, 2.6vw, 38px);
line-height: 1.2; letter-spacing: -0.025em; margin-bottom: 40px;
}
.case-quote em { font-style: normal; color: var(--text-tertiary); }
.case-attribution { display: flex; align-items: center; gap: 16px; }
.case-avatar {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, #1E3A5F, #0C1626);
border: 1px solid var(--border-mid);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-body); font-weight: 600;
color: var(--text-primary); font-size: 16px;
}
.case-attribution-text { line-height: 1.3; }
.case-attribution-text .name { font-weight: 500; font-size: 14px; color: var(--text-primary); }
.case-attribution-text .role { font-size: 13px; color: var(--text-secondary); }
.case-right { position: relative; z-index: 2; }
.metric-mega {
font-family: var(--font-mono); font-weight: 500;
font-size: clamp(96px, 12vw, 200px);
line-height: 0.85; letter-spacing: -0.05em;
color: var(--signal); margin-bottom: 16px;
}
.metric-mega-label {
font-family: var(--font-mono); font-size: 13px;
color: var(--text-secondary); text-transform: uppercase;
letter-spacing: 0.14em; margin-bottom: 48px;
}
.metric-bars { display: flex; flex-direction: column; gap: 20px; }
.metric-bar-row {
display: flex; align-items: baseline; justify-content: space-between;
padding-bottom: 16px; border-bottom: 1px solid var(--border-soft);
}
.metric-bar-row .label { font-size: 13px; color: var(--text-secondary); }
.metric-bar-row .value {
font-family: var(--font-mono); font-size: 18px;
color: var(--text-primary); letter-spacing: -0.02em;
}
.metric-bar-row .value .delta { color: var(--signal); margin-left: 8px; font-size: 13px; }
.case-link {
margin-top: 40px; display: inline-flex; align-items: center; gap: 10px;
padding: 14px 24px; border: 1px solid var(--border-mid);
border-radius: 999px; font-size: 14px; color: var(--text-primary);
transition: background 0.25s var(--ease);
}
.case-link:hover { background: var(--surface-3); }
@media (max-width: 960px) {
.case-card { grid-template-columns: 1fr; padding: 48px 32px; gap: 48px; }
}
/* ---------- AI terminal (full) ---------- */
.ai-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 100px; align-items: center; }
.ai-left h2 {
font-family: var(--font-body); font-weight: 600;
font-size: clamp(36px, 4.5vw, 64px);
line-height: 1; letter-spacing: -0.035em; margin-bottom: 28px;
}
.ai-left h2 em { font-style: normal; color: var(--ai-accent); }
.ai-left p {
font-size: 17px; color: var(--text-secondary);
line-height: 1.55; margin-bottom: 40px; max-width: 480px;
}
.ai-list { display: flex; flex-direction: column; gap: 16px; }
.ai-list li {
display: flex; align-items: flex-start; gap: 14px;
font-size: 15px; color: var(--text-primary);
padding-bottom: 14px; border-bottom: 1px solid var(--border-soft);
}
.ai-list li:last-child { border-bottom: none; }
.ai-list .check {
flex-shrink: 0; width: 18px; height: 18px;
border-radius: 50%; background: var(--signal); color: var(--bg);
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; margin-top: 2px;
}
.terminal {
background: var(--surface-1); border: 1px solid var(--border);
border-radius: 12px; overflow: hidden;
font-family: var(--font-mono);
font-size: 13px; line-height: 1.6;
box-shadow: 0 24px 80px rgba(0,0,0,0.4), 0 0 0 1px var(--border-soft) inset;
}
.terminal-header {
display: flex; align-items: center; gap: 12px;
padding: 14px 20px; border-bottom: 1px solid var(--border);
background: var(--surface-2);
}
.terminal-dots { display: flex; gap: 6px; }
.terminal-dots span {
width: 10px; height: 10px; border-radius: 50%;
background: var(--surface-3);
}
.terminal-title { font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.08em; }
.terminal-body { padding: 28px 24px; min-height: 360px; }
.terminal-body .ln { display: block; margin-bottom: 4px; color: var(--text-secondary); }
.terminal-body .prompt { color: var(--signal); }
.terminal-body .cmd { color: var(--text-primary); }
.terminal-body .t-arrow { color: var(--ai-accent); }
.terminal-body .highlight { color: var(--signal); }
.terminal-body .dim { color: var(--text-tertiary); }
.terminal-body .spacer { display: block; height: 14px; }
.terminal-body .caret {
display: inline-block; width: 8px; height: 15px;
background: var(--signal); vertical-align: text-bottom;
animation: blink 1s step-end infinite; margin-left: 2px;
}
@media (max-width: 960px) { .ai-grid { grid-template-columns: 1fr; gap: 60px; } }
/* ---------- Process steps ---------- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.process-step {
padding: 40px 32px 40px 0;
border-right: 1px solid var(--border-soft); position: relative;
}
.process-step:last-child { border-right: none; }
.process-step .num {
font-family: var(--font-mono); font-size: 14px;
color: var(--signal); letter-spacing: 0.08em; margin-bottom: 20px;
}
.process-step h4 {
font-family: var(--font-body); font-weight: 500;
font-size: 22px; line-height: 1.2; letter-spacing: -0.02em;
margin-bottom: 14px;
}
.process-step p { font-size: 14px; color: var(--text-secondary); line-height: 1.5; max-width: 240px; }
.process-step .when {
display: block; margin-top: 20px;
font-family: var(--font-mono); font-size: 11px;
color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.12em;
}
@media (max-width: 960px) {
.process-grid { grid-template-columns: 1fr 1fr; }
.process-step:nth-child(2) { border-right: none; }
}
@media (max-width: 600px) {
.process-grid { grid-template-columns: 1fr; }
.process-step { border-right: none; border-bottom: 1px solid var(--border-soft); padding: 36px 0; }
.process-step:last-child { border-bottom: none; }
}
/* ---------- Final CTA ---------- */
.final-cta {
padding: 180px 0; position: relative; overflow: hidden;
border-top: 1px solid var(--border-soft);
}
.final-cta::before {
content: ''; position: absolute; inset: 0;
background: transparent;
pointer-events: none;
}
.final-cta-content { position: relative; z-index: 2; text-align: center; }
.final-cta h2 {
font-family: var(--font-body); font-weight: 600;
font-size: clamp(48px, 7vw, 112px);
line-height: 0.95; letter-spacing: -0.045em;
margin-bottom: 32px; max-width: 900px;
margin-left: auto; margin-right: auto;
}
.final-cta h2 em { font-style: normal; color: var(--signal); }
.final-cta p {
font-size: 18px; color: var(--text-secondary);
max-width: 560px; margin: 0 auto 48px; line-height: 1.5;
}
/* ---------- Footer ---------- */
.footer { padding: 80px 0 40px; border-top: 1px solid var(--border-soft); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 80px; }
.footer-brand .logo { margin-bottom: 20px; }
.footer-brand p {
font-size: 14px; color: var(--text-secondary);
line-height: 1.6; max-width: 320px;
}
.footer-col h5 {
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--text-tertiary); margin-bottom: 20px; font-weight: 500;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
font-size: 14px; color: var(--text-secondary);
transition: color 0.2s var(--ease);
}
.footer-col a:hover { color: var(--text-primary); }
.footer-wordmark {
font-family: var(--font-body); font-weight: 700;
font-size: clamp(80px, 16vw, 240px);
line-height: 0.85; letter-spacing: -0.055em;
color: var(--text-primary); margin-bottom: 40px;
background: linear-gradient(180deg, var(--text-primary) 0%, transparent 120%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; user-select: none;
text-align: center;
}
.footer-meta {
display: flex; justify-content: space-between; align-items: center;
padding-top: 32px; border-top: 1px solid var(--border-soft);
font-family: var(--font-mono); font-size: 12px;
color: var(--text-tertiary); letter-spacing: 0.04em;
}
.footer-meta a { color: var(--text-tertiary); transition: color 0.2s var(--ease); }
.footer-meta a:hover { color: var(--text-primary); }
.footer-geo { display: flex; gap: 8px; align-items: center; }
.footer-geo .live {
width: 6px; height: 6px; background: var(--signal);
border-radius: 50%; box-shadow: 0 0 8px var(--signal);
animation: pulse 2s ease-in-out infinite;
}
@media (max-width: 900px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
.footer-meta { flex-direction: column; gap: 20px; align-items: flex-start; }
}
/* ---------- Reveal animations ---------- */
.reveal {
opacity: 0; transform: translateY(10px);
transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal { opacity: 1; transform: none; }
}
/* ==========================================================================
Page-specific components
========================================================================== */
/* ---------- Pricing tiles ---------- */
.pricing-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.pricing-card {
background: var(--surface-1); border: 1px solid var(--border-soft);
border-radius: var(--radius); padding: 40px 36px;
display: flex; flex-direction: column; position: relative;
transition: border-color 0.18s var(--ease), transform 0.18s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.pricing-card:hover { border-color: var(--border-mid); transform: translateY(-2px); }
}
.pricing-card.featured { border-color: var(--signal); }
.pricing-card.featured::before {
content: 'MOST COMMON'; position: absolute; top: -11px; left: 36px;
background: var(--signal); color: var(--bg);
font-family: var(--font-mono); font-size: 10px;
font-weight: 700; letter-spacing: 0.14em;
padding: 4px 10px; border-radius: 4px;
}
.pricing-name {
font-family: var(--font-body); font-weight: 500;
font-size: 22px; letter-spacing: -0.02em; margin-bottom: 8px;
}
.pricing-summary { font-size: 14px; color: var(--text-secondary); margin-bottom: 32px; line-height: 1.5; }
.pricing-price {
font-family: var(--font-mono); font-size: 36px; font-weight: 500;
color: var(--text-primary); letter-spacing: -0.03em; margin-bottom: 6px;
}
.pricing-price .suffix { font-size: 14px; color: var(--text-secondary); margin-left: 4px; }
.pricing-setup {
font-family: var(--font-mono); font-size: 12px;
color: var(--text-tertiary); margin-bottom: 32px;
}
.pricing-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; flex-grow: 1; }
.pricing-features li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 14px; color: var(--text-secondary); line-height: 1.5;
}
.pricing-features li::before {
content: ''; flex-shrink: 0; width: 5px; height: 5px;
background: var(--signal); border-radius: 50%; margin-top: 8px;
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
/* ---------- Work grid ---------- */
.work-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 20px; margin-top: 20px;
}
.work-card {
background: var(--surface-1); border: 1px solid var(--border-soft);
border-radius: var(--radius); padding: 48px 44px;
position: relative; overflow: hidden;
transition: border-color 0.18s var(--ease), transform 0.18s var(--ease-out);
min-height: 420px; display: flex; flex-direction: column; justify-content: space-between;
}
.work-card::after {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at bottom right, var(--signal-soft), transparent 60%);
opacity: 0; transition: opacity 0.25s var(--ease); pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.work-card:hover { border-color: var(--border-mid); transform: translateY(-2px); }
.work-card:hover::after { opacity: 1; }
}
.work-top { position: relative; z-index: 2; }
.work-meta {
font-family: var(--font-mono); font-size: 11px;
color: var(--text-tertiary); letter-spacing: 0.14em;
text-transform: uppercase; margin-bottom: 20px;
}
.work-meta span { margin-right: 20px; }
.work-client {
font-family: var(--font-body); font-weight: 500;
font-size: 32px; line-height: 1.1; letter-spacing: -0.025em;
margin-bottom: 20px;
}
.work-desc { color: var(--text-secondary); font-size: 15px; line-height: 1.55; max-width: 440px; }
.work-metric {
position: relative; z-index: 2;
font-family: var(--font-mono); font-size: clamp(56px, 8vw, 88px);
line-height: 0.9; letter-spacing: -0.04em; color: var(--signal);
margin-top: 48px;
}
.work-metric-label {
font-family: var(--font-mono); font-size: 11px;
color: var(--text-secondary); letter-spacing: 0.14em;
text-transform: uppercase; margin-top: 10px;
}
.work-card.placeholder {
background: transparent; border: 1px dashed var(--border);
align-items: center; justify-content: center; text-align: center;
}
.work-card.placeholder .placeholder-icon {
width: 48px; height: 48px; border-radius: 50%;
background: var(--surface-2); display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.work-card.placeholder h4 {
font-family: var(--font-body); font-weight: 500;
font-size: 20px; color: var(--text-secondary); margin-bottom: 10px;
}
.work-card.placeholder p { font-size: 14px; color: var(--text-tertiary); max-width: 280px; line-height: 1.5; }
@media (max-width: 820px) { .work-grid { grid-template-columns: 1fr; } }
/* ---------- About / Team ---------- */
.about-grid {
display: grid; grid-template-columns: 1.2fr 1fr;
gap: 80px; align-items: start;
}
.about-text h2 {
font-family: var(--font-body); font-weight: 600;
font-size: clamp(36px, 4.5vw, 64px);
line-height: 1; letter-spacing: -0.035em; margin-bottom: 32px;
}
.about-text h2 em { font-style: normal; color: var(--signal); }
.about-text p {
font-size: 18px; color: var(--text-secondary);
line-height: 1.6; margin-bottom: 24px;
}
.about-text p strong { color: var(--text-primary); font-weight: 500; }
.about-visual {
background: var(--surface-1); border: 1px solid var(--border-soft);
border-radius: var(--radius); padding: 40px;
position: relative;
}
.geo-list { display: flex; flex-direction: column; gap: 24px; }
.geo-row {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 20px; border-bottom: 1px solid var(--border-soft);
}
.geo-row:last-child { border-bottom: none; padding-bottom: 0; }
.geo-city {
font-family: var(--font-body); font-weight: 500;
font-size: 22px; letter-spacing: -0.02em;
}
.geo-meta {
font-family: var(--font-mono); font-size: 12px;
color: var(--text-secondary); text-align: right;
}
.geo-time { color: var(--signal); font-size: 14px; margin-top: 4px; display: block; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 48px; } }
/* ---------- Values grid ---------- */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; }
.value-card { background: var(--bg); padding: 40px 36px; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; }
.value-card .num {
font-family: var(--font-mono); font-size: 12px;
color: var(--signal); letter-spacing: 0.14em; margin-bottom: 20px;
}
.value-card h4 {
font-family: var(--font-body); font-weight: 500;
font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 14px;
}
.value-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
@media (max-width: 900px) { .values-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .values-grid { grid-template-columns: 1fr; } }
/* ---------- Contact ---------- */
.contact-grid {
display: grid; grid-template-columns: 1.1fr 1fr;
gap: 80px; align-items: start;
}
.contact-form {
background: var(--surface-1); border: 1px solid var(--border-soft);
border-radius: var(--radius); padding: 48px;
}
.form-group { margin-bottom: 24px; }
.form-group label {
display: block; font-family: var(--font-mono);
font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
color: var(--text-tertiary); margin-bottom: 10px;
}
.form-group input, .form-group textarea, .form-group select {
width: 100%; padding: 16px 18px;
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius-sm); color: var(--text-primary);
font-size: 15px; font-family: var(--font-body);
transition: border-color 0.2s var(--ease);
}
.form-group select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%238A8A94' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 44px;
cursor: pointer;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
outline: none; border-color: var(--signal);
}
.form-group textarea { min-height: 120px; resize: vertical; font-family: var(--font-body); }
.form-submit { width: 100%; justify-content: center; margin-top: 8px; }
.contact-side { display: flex; flex-direction: column; gap: 32px; }
.contact-option {
padding: 28px 32px; background: var(--surface-1);
border: 1px solid var(--border-soft); border-radius: var(--radius);
transition: border-color 0.18s var(--ease), transform 0.18s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.contact-option:hover { border-color: var(--border-mid); transform: translateY(-2px); }
}
.contact-option .label {
font-family: var(--font-mono); font-size: 11px;
color: var(--text-tertiary); letter-spacing: 0.14em;
text-transform: uppercase; margin-bottom: 10px;
}
.contact-option .val {
font-family: var(--font-body); font-weight: 500;
font-size: 20px; letter-spacing: -0.02em; margin-bottom: 8px;
}
.contact-option .val a { transition: color 0.2s var(--ease); }
.contact-option .val a:hover { color: var(--signal); }
.contact-option .note { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 48px; } .contact-form { padding: 32px 28px; } }
/* ---------- FAQ ---------- */
.faq { max-width: 880px; }
.faq-item {
border-bottom: 1px solid var(--border-soft);
padding: 28px 0;
}
.faq-item summary {
cursor: pointer; list-style: none; display: flex;
justify-content: space-between; align-items: flex-start; gap: 32px;
font-family: var(--font-body); font-weight: 500;
font-size: 20px; letter-spacing: -0.02em; color: var(--text-primary);
line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+'; font-family: var(--font-mono);
font-size: 24px; color: var(--signal); font-weight: 400;
line-height: 1; transition: transform 0.2s var(--ease-out);
flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
margin-top: 16px; color: var(--text-secondary);
font-size: 15px; line-height: 1.6; max-width: 760px;
}
/* ---------- Service detail — feature list ---------- */
.feature-list {
display: grid; grid-template-columns: 1fr 1fr; gap: 40px 60px;
}
.feature-item { padding: 24px 0; border-top: 1px solid var(--border-soft); }
.feature-item .num {
font-family: var(--font-mono); font-size: 11px;
color: var(--signal); letter-spacing: 0.14em; margin-bottom: 14px;
}
.feature-item h4 {
font-family: var(--font-body); font-weight: 500;
font-size: 20px; letter-spacing: -0.02em; margin-bottom: 10px;
}
.feature-item p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
@media (max-width: 720px) { .feature-list { grid-template-columns: 1fr; gap: 0; } }
/* ---------- Tools grid ---------- */
.tools-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft);
border-radius: var(--radius); overflow: hidden;
}
.tool-pill {
background: var(--bg); padding: 24px 20px; text-align: center;
transition: background 0.25s var(--ease);
}
.tool-pill:hover { background: var(--surface-1); }
.tool-pill .name {
font-family: var(--font-body); font-weight: 500;
font-size: 15px; color: var(--text-primary); margin-bottom: 4px;
letter-spacing: -0.01em;
}
.tool-pill .role {
font-family: var(--font-mono); font-size: 10px;
color: var(--text-tertiary); letter-spacing: 0.12em; text-transform: uppercase;
}
/* ---------- Methodology (Experience Performance Stack) ---------- */
.stack-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; }
.stack-row {
display: grid; grid-template-columns: 80px 1fr 2fr;
gap: 40px; align-items: center;
padding: 32px 36px; background: var(--surface-1);
border-bottom: 1px solid var(--border-soft);
transition: background 0.25s var(--ease);
}
.stack-row:last-child { border-bottom: none; }
.stack-row:hover { background: var(--surface-2); }
.stack-row .num {
font-family: var(--font-mono); font-size: 14px;
color: var(--signal); letter-spacing: 0.08em;
}
.stack-row h4 {
font-family: var(--font-body); font-weight: 500;
font-size: 24px; letter-spacing: -0.02em;
}
.stack-row p { font-size: 15px; color: var(--text-secondary); line-height: 1.55; }
@media (max-width: 720px) {
.stack-row { grid-template-columns: 1fr; gap: 12px; padding: 24px 20px; }
}
/* ---------- Inline metric callouts ---------- */
.stat-strip {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 1px; background: var(--border-soft);
border: 1px solid var(--border-soft);
border-radius: var(--radius); overflow: hidden;
}
.stat-strip-cell { background: var(--bg); padding: 36px 32px; }
.stat-strip-cell .v {
font-family: var(--font-mono); font-size: 36px;
font-weight: 500; color: var(--signal); letter-spacing: -0.03em;
line-height: 1; margin-bottom: 10px;
}
.stat-strip-cell .l {
font-size: 13px; color: var(--text-secondary); line-height: 1.4;
}
@media (max-width: 720px) { .stat-strip { grid-template-columns: 1fr 1fr; } }
/* ==========================================================================
Stagger reveals — cascade delays so groups don't pop in all at once.
Applied to common grid/list patterns. Delays only affect the reveal
transition; once .in is set (IntersectionObserver fires) each item
waits its offset before fading up.
========================================================================== */
/* Problem cards */
.problem-grid .problem-card:nth-child(2) { transition-delay: 70ms; }
.problem-grid .problem-card:nth-child(3) { transition-delay: 140ms; }
/* Bento tiles */
.bento .bento-card:nth-child(2) { transition-delay: 60ms; }
.bento .bento-card:nth-child(3) { transition-delay: 120ms; }
.bento .bento-card:nth-child(4) { transition-delay: 180ms; }
.bento .bento-card:nth-child(5) { transition-delay: 240ms; }
/* Pricing cards */
.pricing-grid .pricing-card:nth-child(2) { transition-delay: 70ms; }
.pricing-grid .pricing-card:nth-child(3) { transition-delay: 140ms; }
/* Process steps */
.process-grid .process-step:nth-child(2) { transition-delay: 60ms; }
.process-grid .process-step:nth-child(3) { transition-delay: 120ms; }
.process-grid .process-step:nth-child(4) { transition-delay: 180ms; }
/* Values grid */
.values-grid .value-card:nth-child(2) { transition-delay: 60ms; }
.values-grid .value-card:nth-child(3) { transition-delay: 120ms; }
.values-grid .value-card:nth-child(4) { transition-delay: 180ms; }
/* Work cards */
.work-grid .work-card:nth-child(2) { transition-delay: 80ms; }
/* Feature list items */
.feature-list .feature-item:nth-child(even) { transition-delay: 60ms; }
.feature-list .feature-item:nth-child(3),
.feature-list .feature-item:nth-child(4) { transition-delay: 80ms; }
/* AI list items */
.ai-list li:nth-child(2) { transition-delay: 50ms; }
.ai-list li:nth-child(3) { transition-delay: 100ms; }
.ai-list li:nth-child(4) { transition-delay: 150ms; }
/* ==========================================================================
Polish layer — tactile feedback, a11y, typography balance
========================================================================== */
/* Tactile active state — physical push on click */
.btn-primary:active, .nav-cta:active { transform: translateY(0) scale(0.98); transition-duration: 0.08s; }
.btn-ghost:active { transform: scale(0.98); transition-duration: 0.08s; }
.service-link:active, .case-link:active { transform: scale(0.98); }
.pricing-card .btn-primary:active, .pricing-card .btn-ghost:active { transform: scale(0.98); }
/* Keyboard focus rings — visible on Tab, hidden on mouse click */
:focus { outline: none; }
.btn-primary:focus-visible, .btn-ghost:focus-visible, .nav-cta:focus-visible,
.nav-links a:focus-visible, .logo:focus-visible,
.service-link:focus-visible, .client-mark:focus-visible, .case-link:focus-visible,
.footer-col a:focus-visible, .footer-meta a:focus-visible {
outline: 2px solid var(--signal);
outline-offset: 3px;
border-radius: 999px;
}
.form-group input:focus-visible, .form-group textarea:focus-visible, .form-group select:focus-visible {
outline: 2px solid var(--signal);
outline-offset: 2px;
border-color: var(--signal);
}
.faq-item summary:focus-visible {
outline: 2px solid var(--signal);
outline-offset: 4px;
border-radius: 6px;
}
/* Prevent orphan words in multi-line headings */
.hero h1, .section-header h2, .final-cta h2, .case-quote,
.about-text h2, .ai-left h2, .problem-card h3, .service-title,
.hero-sub, .faq-item summary {
text-wrap: balance;
}
.hero-sub, .section-header p, .case-quote { text-wrap: pretty; }
/* Pricing card CTA bottom-alignment — prevents misaligned buttons when content varies */
.pricing-card { display: flex; flex-direction: column; }
.pricing-card > a:last-child,
.pricing-card > .btn-primary:last-child,
.pricing-card > .btn-ghost:last-child { margin-top: auto; }
/* Skip-to-content link — accessibility requirement */
.skip-link {
position: absolute; top: -100px; left: 20px;
background: var(--signal); color: var(--bg);
padding: 12px 20px; border-radius: 10px;
font-family: var(--font-body); font-weight: 600; font-size: 14px;
text-decoration: none; z-index: 9999;
transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 20px; outline: 2px solid var(--text-primary); outline-offset: 3px; }
/* Form success state — shown after valid submit */
.form-success {
display: none;
padding: 32px;
background: var(--surface-2);
border: 1px solid var(--signal);
border-radius: var(--radius);
text-align: center;
animation: fadeUp 0.6s var(--ease) both;
}
.form-success.show { display: block; }
.form-success .success-dot {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%;
background: var(--signal); color: var(--bg);
margin-bottom: 20px; font-size: 22px; font-weight: 700;
}
.form-success h4 {
font-family: var(--font-body); font-weight: 500;
font-size: 22px; letter-spacing: -0.02em; margin-bottom: 10px;
}
.form-success p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
/* Form field error state */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea { border-color: var(--error); }
.form-group .error-msg {
display: none;
font-family: var(--font-mono); font-size: 11px;
color: var(--error); margin-top: 6px;
letter-spacing: 0.04em;
}
.form-group.has-error .error-msg { display: block; }
/* ==========================================================================
AWWWARDS LAYER — high-end-visual-design skill applied
Archetype: Ethereal Glass (SaaS/AI) + Asymmetrical Bento + Floating Island
Principles: Double-Bezel, Button-in-Button, Magnetic Hover, Blur-entry reveals,
Macro whitespace, concentric radii.
========================================================================== */
/* ---- Enhanced easing tokens ---- */
:root {
--ease-fluid: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-drawer curve — premium weight */
--ease-magnetic: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot for magnetic hover */
--radius-lg: 24px;
--radius-xl: 28px;
--bezel-gap: 6px;
}
/* ==========================================================================
1. FRAMER-STYLE TOP BAR NAV — flat, transparent, centered links
========================================================================== */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
transform: none;
padding: 18px 32px;
gap: 0;
width: auto;
max-width: none;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 0;
box-shadow: none;
transition: background 0.3s var(--ease-fluid);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.nav:hover { transform: none; }
.nav .logo {
padding: 0;
justify-self: start;
font-size: 17px;
}
/* Center the nav links in the middle column of the grid */
.nav-links {
justify-self: center;
gap: 36px;
display: flex;
align-items: center;
}
.nav-links a,
.nav-link-drop {
font-size: 14px;
font-weight: 450;
color: rgba(255, 255, 255, 0.72);
letter-spacing: -0.005em;
transition: color 0.2s var(--ease);
}
.nav-links a:hover,
.nav-link-drop:hover { color: #fff; }
/* Right column: the one action that matters — volt pill */
.nav-cta {
justify-self: end;
padding: 9px 18px;
gap: 0;
background: var(--signal);
color: var(--signal-ink);
font-size: 14px;
font-weight: 600;
border-radius: 999px;
border: none;
letter-spacing: -0.005em;
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-cta:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px -8px var(--signal-glow), 0 0 0 1px rgba(0, 153, 255, 0.4) inset;
background: var(--signal-bright);
color: var(--signal-ink);
}
.nav-cta svg {
display: none;
}
@media (max-width: 820px) {
.nav {
top: 0;
padding: 12px 16px;
gap: 16px;
grid-template-columns: auto 1fr auto;
}
.nav .logo { font-size: 16px; }
}
/* Offset scroll-padding to match fixed top-bar nav */
html { scroll-padding-top: 90px; }
/* ==========================================================================
2. HERO EYEBROW — proper pill badge (not just inline dot + text)
========================================================================== */
.hero-meta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 14px 7px 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
width: fit-content;
margin-bottom: 36px;
}
.hero-meta .eyebrow {
font-size: 10.5px;
letter-spacing: 0.18em;
color: var(--text-secondary);
}
/* Section-header eyebrows also get the pill treatment when wrapped */
.section-header .eyebrow.pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* ==========================================================================
3. DOUBLE-BEZEL CARDS — nested "machined hardware" aesthetic
Implemented via layered box-shadow (no HTML changes needed)
Stack reads outward: inner hairline → bezel fill → outer hairline + top highlight
========================================================================== */
.bento-card,
.problem-card,
.pricing-card,
.work-card:not(.placeholder),
.contact-form,
.about-visual {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06), /* inner top highlight */
0 0 0 1px rgba(255, 255, 255, 0.04), /* inner hairline */
0 0 0 7px rgba(255, 255, 255, 0.015), /* bezel fill */
0 0 0 8px rgba(255, 255, 255, 0.06), /* outer hairline */
0 30px 80px -40px rgba(0, 0, 0, 0.6); /* ambient diffused shadow */
border-color: transparent; /* outer hairline replaces default border */
}
/* Hover state — inner glow intensifies + subtle lift */
@media (hover: hover) and (pointer: fine) {
.bento-card:hover,
.problem-card:hover,
.pricing-card:hover,
.work-card:not(.placeholder):hover {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.09),
0 0 0 1px rgba(0, 153, 255, 0.08),
0 0 0 7px rgba(255, 255, 255, 0.02),
0 0 0 8px rgba(255, 255, 255, 0.09),
0 40px 100px -40px rgba(0, 0, 0, 0.75);
transform: translateY(-3px);
}
}
/* Featured pricing card — lime hairline bezel */
.pricing-card.featured {
box-shadow:
inset 0 1px 0 rgba(0, 153, 255, 0.18),
0 0 0 1px rgba(0, 153, 255, 0.35),
0 0 0 7px rgba(0, 153, 255, 0.05),
0 0 0 8px rgba(0, 153, 255, 0.2),
0 40px 100px -30px rgba(0, 153, 255, 0.15);
}
/* Ensure rounded corners accept the layered shadow cleanly */
.bento-card, .problem-card, .pricing-card, .work-card { border-radius: var(--radius-lg); }
/* ==========================================================================
4. BUTTON-IN-BUTTON — circular icon wrapper flush right
Existing .arrow SVG becomes a nested pill icon
========================================================================== */
.btn-primary {
padding: 14px 14px 14px 28px;
gap: 12px;
}
.btn-primary .arrow {
width: 34px;
height: 34px;
padding: 9px;
background: rgba(0, 0, 0, 0.16);
border-radius: 50%;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.25s var(--ease-magnetic), background 0.2s var(--ease);
}
.btn-primary:hover .arrow {
transform: translateX(3px) scale(1.05);
background: rgba(0, 0, 0, 0.24);
}
.btn-ghost {
padding: 14px 14px 14px 28px;
gap: 12px;
}
.btn-ghost .arrow {
width: 34px;
height: 34px;
padding: 9px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50%;
flex-shrink: 0;
transition: transform 0.25s var(--ease-magnetic), background 0.2s var(--ease);
}
.btn-ghost:hover .arrow {
transform: translateX(3px) scale(1.05);
background: rgba(255, 255, 255, 0.12);
}
/* Magnetic press — scale down on active */
.btn-primary:active { transform: scale(0.98); }
.btn-ghost:active { transform: scale(0.98); }
/* ==========================================================================
5. BLUR-ENTRY REVEALS — cinematic scroll-in with depth of field
Replaces the flat opacity+translate with a "pulls into focus" effect
========================================================================== */
.reveal {
opacity: 0;
transform: translateY(16px);
filter: blur(8px);
transition:
opacity 0.7s var(--ease-fluid),
transform 0.7s var(--ease-fluid),
filter 0.7s var(--ease-fluid);
}
.reveal.in {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* Re-trigger reduced motion override */
@media (prefers-reduced-motion: reduce) {
.reveal { filter: none; transform: none; opacity: 1; }
}
/* ==========================================================================
6. MACRO WHITESPACE — cinematic section rhythm
========================================================================== */
section { padding: 160px 0; }
@media (max-width: 900px) { section { padding: 96px 0; } }
.final-cta { padding: 200px 0; }
@media (max-width: 900px) { .final-cta { padding: 120px 0; } }
/* ==========================================================================
7. AMBIENT MESH GRADIENT — background orbs on hero
========================================================================== */
.hero::after {
content: '';
position: absolute;
bottom: -300px;
right: -200px;
width: 700px;
height: 700px;
background: radial-gradient(circle at center, rgba(0, 153, 255, 0.06) 0%, transparent 55%);
pointer-events: none;
z-index: 0;
filter: blur(60px);
}
/* ==========================================================================
8. CASE CARD — upgrade to Double-Bezel variant
========================================================================== */
.case-card {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 0 0 1px rgba(255, 255, 255, 0.04),
0 0 0 7px rgba(255, 255, 255, 0.015),
0 0 0 8px rgba(255, 255, 255, 0.06),
0 50px 120px -50px rgba(0, 0, 0, 0.7);
border-color: transparent;
border-radius: 28px;
}
/* ==========================================================================
9. TERMINAL — concentric nested radii, deeper shadow
========================================================================== */
.terminal {
border-radius: 16px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 0 0 1px rgba(255, 255, 255, 0.04),
0 0 0 7px rgba(255, 255, 255, 0.015),
0 0 0 8px rgba(255, 255, 255, 0.06),
0 60px 120px -40px rgba(0, 0, 0, 0.8);
border-color: transparent;
}
/* ==========================================================================
10. PILL-BADGE FOR "MOST COMMON" — upgrade positioning
========================================================================== */
.pricing-card.featured::before {
top: -12px;
padding: 6px 12px;
border-radius: 999px;
box-shadow: 0 8px 24px rgba(0, 153, 255, 0.35);
}
/* ==========================================================================
11. FRAMER-STYLE NAV DROPDOWN
========================================================================== */
.nav-links { position: relative; }
.nav-item { position: relative; list-style: none; }
.nav-link-drop {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-secondary);
text-decoration: none;
font-weight: 500;
font-size: 14px;
letter-spacing: -0.005em;
cursor: pointer;
transition: color 0.2s var(--ease);
}
.nav-link-drop .nav-caret {
transition: transform 0.3s var(--ease-fluid);
opacity: 0.6;
}
.nav-item:hover .nav-link-drop,
.nav-item:focus-within .nav-link-drop { color: var(--text-primary); }
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret { transform: rotate(180deg); opacity: 1; }
.nav-dropdown {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%) translateY(-8px);
min-width: 340px;
padding: 10px;
background: rgba(14, 14, 18, 0.92);
backdrop-filter: blur(28px) saturate(200%);
-webkit-backdrop-filter: blur(28px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 24px 60px -18px rgba(0, 0, 0, 0.75),
0 0 0 1px rgba(0, 0, 0, 0.35);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.25s var(--ease-fluid),
transform 0.35s var(--ease-fluid),
visibility 0s linear 0.25s;
z-index: 120;
}
.nav-dropdown::before {
content: "";
position: absolute;
top: -14px; left: 0; right: 0;
height: 14px;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition:
opacity 0.25s var(--ease-fluid),
transform 0.35s var(--ease-fluid),
visibility 0s linear 0s;
}
.nav-dropdown-item {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 12px 14px;
border-radius: 12px;
text-decoration: none;
color: var(--text-primary);
transition: background 0.2s var(--ease);
position: relative;
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
background: rgba(255, 255, 255, 0.04);
outline: none;
}
.nav-dropdown-icon {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 10px;
display: grid; place-items: center;
background: linear-gradient(135deg, rgba(0, 153, 255, 0.16), rgba(51, 173, 255, 0.10));
border: 1px solid rgba(255, 255, 255, 0.06);
color: var(--signal);
transition: transform 0.35s var(--ease-fluid), background 0.3s var(--ease);
}
.nav-dropdown-item:hover .nav-dropdown-icon {
transform: scale(1.05) rotate(-3deg);
background: linear-gradient(135deg, rgba(0, 153, 255, 0.26), rgba(51, 173, 255, 0.18));
}
.nav-dropdown-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.nav-dropdown-title {
font-weight: 600;
font-size: 14px;
letter-spacing: -0.01em;
color: var(--text-primary);
}
.nav-dropdown-sub {
font-size: 12.5px;
color: var(--text-secondary);
letter-spacing: -0.005em;
line-height: 1.4;
}
.nav-dropdown-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
margin-top: 4px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
font-size: 13px;
font-weight: 500;
color: var(--signal);
text-decoration: none;
border-radius: 0 0 12px 12px;
transition: color 0.2s var(--ease);
}
.nav-dropdown-footer:hover { color: var(--text-primary); }
.nav-dropdown-footer svg { transition: transform 0.3s var(--ease-fluid); }
.nav-dropdown-footer:hover svg { transform: translateX(3px); }
/* Mobile: collapse dropdown into inline list */
@media (max-width: 820px) {
.nav-dropdown {
position: static;
transform: none;
min-width: 0;
box-shadow: none;
background: transparent;
border: none;
padding: 0;
display: none;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
transform: none;
display: block;
}
.nav-link-drop .nav-caret { display: none; }
}
/* ==========================================================================
12. FRAMER GRADIENT TEXT TREATMENT
========================================================================== */
.gradient-text {
background: var(--gradient-framer);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Hero em — Framer-style plain white */
.display em.underlined {
font-style: normal;
position: relative;
color: var(--text-primary);
}
/* ==========================================================================
13. FRAMER-STYLE HERO — clean black, centered, no glow
========================================================================== */
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding-top: 180px;
padding-bottom: 120px;
text-align: center;
}
.hero .hero-content { text-align: center; }
.hero-meta {
margin-left: auto;
margin-right: auto;
justify-content: center;
}
.hero h1.display {
text-align: center;
margin-left: auto;
margin-right: auto;
max-width: 18ch;
}
.hero-sub {
text-align: center;
max-width: 58ch;
margin-left: auto;
margin-right: auto;
font-size: clamp(17px, 1.6vw, 20px);
color: rgba(255, 255, 255, 0.6);
}
.hero-ctas {
justify-content: center;
}
.hero-stat-row {
justify-content: center;
}
/* Hero buttons inherit the volt system; ghost gets a glass treatment */
.hero-ctas .btn-ghost {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #fff;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* ==========================================================================
14. FRAMER-STYLE SHOWCASE CARD ROW — horizontal scrolling mockup tiles
========================================================================== */
.showcase-row {
position: relative;
overflow: hidden;
padding: 40px 0 100px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.showcase-track {
display: flex;
gap: 20px;
width: max-content;
animation: showcase-scroll 45s linear infinite;
}
.showcase-row:hover .showcase-track {
animation-play-state: paused;
}
@keyframes showcase-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.showcase-card {
width: 320px;
height: 420px;
flex-shrink: 0;
border-radius: 18px;
overflow: hidden;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.06);
background: var(--surface-1);
transition: transform 0.4s var(--ease-fluid), border-color 0.3s var(--ease);
}
.showcase-card:hover {
transform: translateY(-4px);
border-color: rgba(255, 255, 255, 0.15);
}
.showcase-card-visual {
height: 72%;
position: relative;
overflow: hidden;
display: grid;
place-items: center;
}
.showcase-card-body {
padding: 18px 20px;
}
.showcase-card-title {
font-weight: 600;
font-size: 15px;
letter-spacing: -0.01em;
color: #fff;
}
.showcase-card-sub {
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
margin-top: 2px;
}
/* Visual variants — gradient-based mini mockups */
.viz-sunset { background: linear-gradient(180deg, #1a1a2e 0%, #e07856 55%, #f4c47a 100%); }
.viz-blobs { background: #0a0a0a; }
.viz-blobs::before, .viz-blobs::after, .viz-blobs > i {
content: ""; position: absolute; border-radius: 50%;
filter: blur(24px); opacity: 0.9;
}
.viz-blobs::before { width: 120px; height: 120px; left: 20%; top: 30%; background: #0099FF; }
.viz-blobs::after { width: 140px; height: 140px; right: 15%; top: 20%; background: #0A3A66; }
.viz-blobs > i { width: 100px; height: 100px; left: 45%; bottom: 15%; background: #E8E8E0; display: block; }
.viz-portrait { background: linear-gradient(160deg, #1a1a1a, #2a1a2a); }
.viz-portrait::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(circle at 30% 40%, rgba(255, 220, 180, 0.25), transparent 50%),
radial-gradient(circle at 70% 60%, rgba(0, 230, 200, 0.25), transparent 50%);
}
.viz-voice { background: linear-gradient(135deg, #f5f5f7 0%, #e0e0e5 100%); color: #000; }
.viz-voice::before {
content: "voice.ai"; position: absolute; top: 14px; left: 16px;
font-size: 11px; font-weight: 600; letter-spacing: -0.01em; color: #000;
}
.viz-voice::after {
content: ""; position: absolute; inset: 40px 20px;
background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 6px);
mask: linear-gradient(90deg, transparent, #000, #000, transparent);
-webkit-mask: linear-gradient(90deg, transparent, #000, #000, transparent);
opacity: 0.6;
}
.viz-brand { background: linear-gradient(145deg, #0a0a0a 0%, #1a0a2a 100%); }
.viz-brand::before {
content: ""; position: absolute; width: 140px; height: 140px;
left: 50%; top: 50%; transform: translate(-50%, -50%);
background: conic-gradient(from 135deg, #0099FF, #33ADFF, #0A3A66, #0077CC, #0099FF);
filter: blur(20px); opacity: 0.7;
border-radius: 12px;
}
.viz-ocean { background: linear-gradient(180deg, #0a1929 0%, #1a3a5c 50%, #64b5e8 100%); }
.viz-ocean::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% 90%, rgba(255, 255, 255, 0.2), transparent 60%);
}
.viz-grid { background: #000; }
.viz-grid::before {
content: ""; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(0, 153, 255, 0.25) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 153, 255, 0.25) 1px, transparent 1px);
background-size: 28px 28px;
mask: radial-gradient(ellipse at center, #000 30%, transparent 80%);
-webkit-mask: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
/* ==========================================================================
15. FRAMER-STYLE BIG TESTIMONIAL CARD — huge image + quote
========================================================================== */
.framer-testimonial {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 0;
border-radius: 28px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.06);
background: var(--surface-1);
min-height: 520px;
}
.framer-testimonial-body {
padding: 48px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.framer-testimonial-quote {
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.02em;
color: #fff;
margin-top: 100px;
}
.framer-testimonial-who {
display: flex;
gap: 14px;
align-items: center;
margin-top: 40px;
}
.framer-testimonial-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #0099FF, #0A3A66);
flex-shrink: 0;
}
.framer-testimonial-name {
font-weight: 600;
font-size: 15px;
}
.framer-testimonial-role {
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
}
.framer-testimonial-visual {
position: relative;
background: linear-gradient(135deg, #2a1515 0%, #4a2520 50%, #8a4530 100%);
overflow: hidden;
}
.framer-testimonial-visual::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(ellipse at 30% 30%, rgba(255, 180, 100, 0.3), transparent 50%),
radial-gradient(ellipse at 70% 70%, rgba(100, 200, 255, 0.15), transparent 60%);
}
.framer-testimonial-visual::after {
content: ""; position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 70%; aspect-ratio: 16/10;
background: rgba(10, 10, 10, 0.9);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.8);
}
@media (max-width: 820px) {
.framer-testimonial { grid-template-columns: 1fr; }
.framer-testimonial-body { padding: 32px; }
.framer-testimonial-quote { margin-top: 24px; }
.framer-testimonial-visual { min-height: 280px; order: -1; }
}
/* ==========================================================================
16. FRAMER-STYLE FEATURE GRID — 4 column marketplace-style cards
========================================================================== */
.feature-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.feature-tile {
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.06);
background: var(--surface-1);
transition: transform 0.4s var(--ease-fluid), border-color 0.3s var(--ease);
}
.feature-tile:hover {
transform: translateY(-3px);
border-color: rgba(255, 255, 255, 0.14);
}
.feature-tile-visual {
aspect-ratio: 1/1;
position: relative;
overflow: hidden;
}
.feature-tile-body {
padding: 14px 16px 16px;
}
.feature-tile-title {
font-size: 14px;
font-weight: 600;
color: #fff;
letter-spacing: -0.01em;
}
.feature-tile-sub {
font-size: 12.5px;
color: rgba(255, 255, 255, 0.5);
margin-top: 2px;
}
@media (max-width: 820px) {
.feature-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* ==========================================================================
17. MASSIVE CENTER HEADLINE — "Design bold. Launch fast." style
========================================================================== */
/* ==========================================================================
18. TRUSTED-BY LOGO STRIP — real client names
========================================================================== */
.trust-strip {
padding: 60px 0 20px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.trust-strip-label {
text-align: center;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.38);
margin-bottom: 32px;
}
.logo-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 22px 56px;
max-width: 1200px;
margin: 0 auto;
}
.logo-strip-item {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 4px;
text-decoration: none;
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.logo-strip-item .logo-mark {
display: block;
height: 28px;
width: auto;
max-width: 160px;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: 0.72;
transition: opacity 0.2s var(--ease);
}
.logo-strip-item:hover {
transform: translateY(-1px);
}
.logo-strip-item:hover .logo-mark {
opacity: 1;
}
@media (max-width: 720px) {
.logo-strip { gap: 18px 32px; }
.logo-strip-item .logo-mark { height: 22px; max-width: 120px; }
}
/* ==========================================================================
19. BRAND-SPECIFIC SHOWCASE CARD VISUALS
Each card visual hints at the real brand's look & feel.
========================================================================== */
.brand-wordmark {
position: relative;
z-index: 2;
font-family: var(--font-body);
font-weight: 700;
font-size: 34px;
letter-spacing: -0.02em;
color: #fff;
text-align: center;
}
/* Carvehouse — auto detailing, orange/dark editorial */
.viz-carve {
background:
radial-gradient(ellipse at 30% 20%, rgba(255, 110, 30, 0.28), transparent 55%),
linear-gradient(160deg, #1a1310 0%, #0d0907 100%);
}
.viz-carve .brand-wordmark {
letter-spacing: 0.2em;
font-weight: 800;
font-size: 26px;
color: #f3e7db;
}
.viz-carve::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 70% 75%, rgba(255, 160, 80, 0.15), transparent 50%);
}
/* Kaleja — warm beige/terracotta lifestyle */
.viz-kaleja {
background: linear-gradient(160deg, #d9b892 0%, #b57a52 60%, #7a3d24 100%);
}
.viz-kaleja .brand-wordmark {
font-family: Georgia, 'Times New Roman', serif;
font-weight: 500;
font-style: italic;
color: #fff8ee;
font-size: 38px;
letter-spacing: -0.02em;
}
/* Etide Botanicals — soft sage / cream */
.viz-etide {
background: linear-gradient(170deg, #dfe4d3 0%, #a9b598 45%, #6a7a5b 100%);
}
.viz-etide .brand-wordmark {
color: #2e3826;
font-weight: 500;
letter-spacing: 0.28em;
font-size: 22px;
}
.viz-etide::before {
content: ""; position: absolute;
width: 180px; height: 180px;
left: -40px; bottom: -40px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 60%);
border-radius: 50%;
}
/* Niran Farm — lush green / organic */
.viz-niran {
background: linear-gradient(180deg, #1f3a1f 0%, #3b6b3b 60%, #78a860 100%);
}
.viz-niran .brand-wordmark {
color: #eef7e2;
font-weight: 400;
font-size: 30px;
letter-spacing: 0.02em;
}
.viz-niran::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% 110%, rgba(255, 220, 120, 0.35), transparent 55%);
}
/* Gege — editorial, muted pastel */
.viz-gege {
background: linear-gradient(135deg, #f4e7e0 0%, #e8c4b6 50%, #c78d7a 100%);
}
.viz-gege .brand-wordmark {
color: #3a1e18;
font-weight: 300;
font-style: italic;
font-size: 52px;
font-family: Georgia, 'Times New Roman', serif;
}
/* Outfitters — bold red/black fashion */
.viz-outfitters {
background: linear-gradient(135deg, #0a0a0a 0%, #1a0606 60%, #c8102e 100%);
}
.viz-outfitters .brand-wordmark {
color: #fff;
font-weight: 800;
letter-spacing: 0.18em;
font-size: 24px;
}
.viz-outfitters::after {
content: ""; position: absolute;
right: -30px; top: -30px;
width: 160px; height: 160px;
background: radial-gradient(circle, rgba(255, 60, 60, 0.5), transparent 65%);
filter: blur(10px);
}
/* Travelpro — navy / slate, premium luggage */
.viz-travelpro {
background: linear-gradient(155deg, #0f1a2e 0%, #1e3252 50%, #2c4a75 100%);
}
.viz-travelpro .brand-wordmark {
color: #fff;
font-weight: 800;
letter-spacing: 0.04em;
font-size: 28px;
}
.viz-travelpro .brand-wordmark sup {
font-size: 14px;
font-weight: 500;
vertical-align: super;
margin-left: 2px;
}
.viz-travelpro::before {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(90deg, transparent 49.5%, rgba(255, 255, 255, 0.06) 50%, transparent 50.5%),
linear-gradient(0deg, transparent 49.5%, rgba(255, 255, 255, 0.06) 50%, transparent 50.5%);
}
/* Wigiwama — pastel kids brand, soft pink/blue */
.viz-wigiwama {
background: linear-gradient(135deg, #ffd6e0 0%, #ffe4c7 50%, #c4e0f5 100%);
}
.viz-wigiwama .brand-wordmark {
color: #2a2a2a;
font-weight: 600;
font-family: var(--font-body);
font-size: 40px;
letter-spacing: -0.03em;
}
/* PENN Fishing — gold/black nautical */
.viz-penn {
background: radial-gradient(ellipse at 50% 50%, #2a1f0a 0%, #0a0603 80%);
}
.viz-penn .brand-wordmark {
font-weight: 900;
letter-spacing: 0.02em;
font-size: 52px;
background: linear-gradient(180deg, #f5c96b 0%, #d19b2e 50%, #8f6516 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* UMZU — wellness, sage/white clinical */
.viz-umzu {
background: linear-gradient(180deg, #f6f4ee 0%, #d9dbce 55%, #8a9574 100%);
}
.viz-umzu .brand-wordmark {
color: #1a2a1a;
font-weight: 700;
letter-spacing: 0.14em;
font-size: 40px;
}
.viz-umzu::before {
content: ""; position: absolute;
width: 200px; height: 200px;
right: -40px; top: -40px;
background: radial-gradient(circle, rgba(180, 210, 150, 0.5), transparent 60%);
border-radius: 50%;
}
/* Base — centre the wordmark in every brand card */
.showcase-card-visual {
display: grid;
place-items: center;
padding: 20px;
}
/* ==========================================================================
19b. DEVICE-FRAMED SCREENSHOT CARDS — Framer.com-style
========================================================================== */
/* Showcase card gets taller + swaps grey bg for a subtle coloured scene */
.showcase-card {
width: 380px;
height: 460px;
background: linear-gradient(160deg, #141418 0%, #0a0a0c 100%);
padding: 22px 22px 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.showcase-card .showcase-card-body {
padding: 18px 2px 20px;
}
/* Desktop browser mockup */
.browser-frame {
position: relative;
width: 100%;
height: 300px;
border-radius: 10px;
overflow: hidden;
background: #1a1a1d;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 20px 40px -15px rgba(0, 0, 0, 0.6);
}
.browser-chrome {
height: 22px;
background: #1f1f22;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
gap: 6px;
padding: 0 10px;
flex-shrink: 0;
}
.browser-chrome span {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
}
.browser-chrome span:nth-child(1) { background: #FF5F57; }
.browser-chrome span:nth-child(2) { background: #FEBC2E; }
.browser-chrome span:nth-child(3) { background: #28C840; }
.browser-viewport {
position: relative;
height: calc(100% - 22px);
overflow: hidden;
background: #0a0a0a;
}
/* Phone mockup — tall, portrait */
.phone-frame {
position: relative;
width: 180px;
height: 360px;
margin: 0 auto;
border-radius: 28px;
overflow: hidden;
background: #0a0a0a;
border: 2px solid rgba(255, 255, 255, 0.14);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.5),
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 30px 50px -20px rgba(0, 0, 0, 0.8);
}
.phone-notch {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 60px; height: 16px;
background: #000;
border-radius: 100px;
z-index: 3;
}
.phone-viewport {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: 24px;
}
/* The site screenshot — parks at top, then slow-scrolls to show the page */
.site-shot {
width: 100%;
height: auto;
display: block;
transform: translateY(0);
transition: transform 12s cubic-bezier(0.33, 0, 0.67, 1);
will-change: transform;
}
/* Auto-scroll when card is in viewport — simulates the Framer "site preview" motion */
.showcase-card .site-shot {
animation: site-shot-scroll 14s ease-in-out infinite alternate;
}
@keyframes site-shot-scroll {
0% { transform: translateY(0%); }
100% { transform: translateY(-55%); }
}
.phone-frame .site-shot {
animation: site-shot-scroll-mobile 12s ease-in-out infinite alternate;
}
@keyframes site-shot-scroll-mobile {
0% { transform: translateY(0%); }
100% { transform: translateY(-50%); }
}
/* On hover — freeze at top so user can read it */
.showcase-row:hover .site-shot { animation-play-state: paused; }
/* Static poster images (used in the duplicated clone row so they don't re-animate out of phase) */
.site-shot-static {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: top center;
}
/* Real screen recordings — play inline, fill the device viewport */
.site-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: top center;
background: #0a0a0a;
pointer-events: none; /* click falls through to parent */
}
.phone-frame .site-video {
border-radius: 24px;
}
/* On hover, pause videos too for readability */
.showcase-row:hover .site-video { /* no-op — videos handled via JS if needed, purely visual */ }
/* Hover lift */
.showcase-card:hover .browser-frame,
.showcase-card:hover .phone-frame {
transform: translateY(-3px);
transition: transform 0.4s var(--ease-fluid);
}
.browser-frame, .phone-frame {
transition: transform 0.4s var(--ease-fluid);
}
/* Reduced-motion: no auto scroll */
@media (prefers-reduced-motion: reduce) {
.showcase-card .site-shot,
.phone-frame .site-shot {
animation: none;
}
}
/* Mobile — shrink cards a little */
@media (max-width: 720px) {
.showcase-card { width: 300px; height: 400px; }
.browser-frame { height: 240px; }
.phone-frame { width: 150px; height: 300px; }
}
/* Stats strip — honest by-the-numbers block */
.stats-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: rgba(255, 255, 255, 0.06);
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.stat-cell {
background: var(--surface-1);
padding: 40px 28px;
text-align: left;
}
.stat-num {
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(40px, 5vw, 64px);
letter-spacing: -0.035em;
line-height: 1;
color: #fff;
margin-bottom: 12px;
}
.stat-label {
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
line-height: 1.45;
letter-spacing: -0.005em;
}
@media (max-width: 820px) {
.stats-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.stats-strip { grid-template-columns: 1fr; }
}
h2.mega-headline,
.mega-headline {
text-align: center;
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(56px, 9vw, 140px);
line-height: 0.95;
letter-spacing: -0.045em;
color: #fff;
margin: 0 auto;
max-width: 14ch;
max-width: none;
}
.mega-headline .line { display: block; }
/* ─────────────────────────────────────────────────────────────
SECTION 19c — Framer-style WORK WALL (two-row infinite marquee)
───────────────────────────────────────────────────────────── */
.work-wall {
padding: 88px 0 120px;
background: #000;
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden;
}
.wall-row {
width: 100%;
overflow: hidden;
/* soft fade into edges, like Framer */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.wall-track {
display: flex;
gap: 10px;
width: max-content;
will-change: transform;
animation: wall-marquee-left 80s linear infinite;
}
.wall-track--right {
animation: wall-marquee-right 90s linear infinite;
}
@keyframes wall-marquee-left {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@keyframes wall-marquee-right {
from { transform: translate3d(-50%, 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
/* Pause on hover so users can actually look — only when the cursor is
actually on a tile, not merely over the surrounding row/section padding.
:has() scopes the pause to the specific track whose tile is hovered. */
.wall-track:has(.wall-tile:hover) { animation-play-state: paused; }
.wall-tile {
flex: 0 0 auto;
height: 320px;
border-radius: 14px;
overflow: hidden;
position: relative;
display: block;
background: #0e0e10;
text-decoration: none;
transition: transform 0.35s var(--ease-fluid, cubic-bezier(0.2, 0.6, 0.2, 1)),
box-shadow 0.35s var(--ease-fluid, cubic-bezier(0.2, 0.6, 0.2, 1));
}
.wall-tile:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.8);
}
.wall-tile--wide { width: 540px; }
.wall-tile--tall { width: 190px; }
.wall-tile--square { width: 320px; }
.wall-media {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: top center;
pointer-events: none; /* let click fall through to parent */
background: #0e0e10;
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
.wall-track,
.wall-track--right { animation: none; }
}
/* Tablet */
@media (max-width: 900px) {
.wall-tile { height: 260px; }
.wall-tile--wide { width: 440px; }
.wall-tile--tall { width: 150px; }
}
/* Mobile */
@media (max-width: 560px) {
.work-wall { padding: 60px 0 80px; gap: 8px; }
.wall-row { gap: 8px; }
.wall-track { gap: 8px; }
.wall-tile { height: 220px; border-radius: 12px; }
.wall-tile--wide { width: 340px; }
.wall-tile--tall { width: 120px; }
}
/* ==========================================================================
SECTION 20 — PAGE TRANSITION (Framer soft left-to-right reveal)
--------------------------------------------------------------------------
Frame-by-frame analysis of realest.framer.website shows:
- the outgoing page fades out uniformly (opacity 1 → 0)
- the incoming page is uncovered by a soft left-to-right gradient
wipe — the left half becomes visible first, the right half last
- the gradient edge is vertical, ~30% wide, easing cubic
- total on-page transition window ~300ms (their SPA overlap)
We emulate this on a multi-page site with a single fixed `.page-wipe`
bridge panel built as a 200vw-wide horizontal gradient. The panel starts
translated so its opaque half covers the viewport, then translates right
so its transparent half covers the viewport — producing the soft
left-to-right reveal. A short opacity fade-in of a solid cover variant
handles the leave phase before the browser's actual navigation fires.
========================================================================== */
/* The bridge panel — 300vw wide horizontal gradient. At rest it's parked
so the solid-black half covers the viewport (viewport sees panel's
50–100% region, all solid). On page load the panel translates 300vw
to the right so the viewport ends up entirely outside the panel's
gradient (panel's left edge clears past screen x=100vw before the
animation finishes) — this over-travel kills the abrupt "dump" at
the end of the reveal that you felt earlier. */
.page-wipe {
position: fixed;
top: 0;
left: 0;
width: 300vw;
height: 100vh;
z-index: 9999;
pointer-events: none;
/* 0–30% transparent → clears the viewport at the end of the animation
30–50% soft ramp → the blended gradient edge that sweeps across
50–100% solid black → covers the viewport at the start
Full ramp spans 20% of a 300vw panel = 60vw of on-screen fade zone. */
background: linear-gradient(
90deg,
transparent 0%,
transparent 30%,
rgba(5, 5, 5, 0.35) 38%,
rgba(5, 5, 5, 0.75) 45%,
#050505 50%,
#050505 100%
);
/* Covering start: viewport maps to panel 66.7–100%, entirely solid. */
transform: translate3d(-200vw, 0, 0);
will-change: transform;
animation: page-wipe-reveal 540ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Reveal — panel travels +300vw so at the end, viewport (screen 0–100vw)
is fully past the panel's right edge (panel is at +100..+400vw), i.e.
viewport is completely cleared. The ease-out curve (0.22, 1, 0.36, 1)
decelerates into the final frames so the right edge of the sweep
smoothly reaches zero opacity — no abrupt dump. */
@keyframes page-wipe-reveal {
0% { transform: translate3d(-200vw, 0, 0); }
100% { transform: translate3d(100vw, 0, 0); }
}
/* Leave phase — JS adds `.is-covering` on intercepted link click. The panel
swaps to a solid full-viewport black and fades in to hide the outgoing
page just before navigation. Runs in parallel with the body fade. */
.page-wipe.is-covering {
width: 100vw;
background: #050505;
transform: translate3d(0, 0, 0);
opacity: 0;
animation: page-wipe-cover 180ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes page-wipe-cover {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Once the reveal finishes JS parks the panel so it's removed from paint. */
.page-wipe.is-idle {
display: none;
animation: none;
}
/* Outgoing page fades uniformly — matches the old-page behaviour in the
reference. Runs alongside the cover-phase overlay. */
body.is-leaving {
opacity: 0;
transition: opacity 160ms cubic-bezier(0.55, 0, 1, 0.45);
}
/* Reduced motion — no sweep, no body fade, straight swap. */
@media (prefers-reduced-motion: reduce) {
.page-wipe { display: none !important; animation: none !important; }
body.is-leaving { opacity: 1 !important; transition: none !important; }
}
/* ==========================================================================
SECTION 21 — VOLT TERMINAL LAYER (conversion redesign)
New components introduced by the research-driven rebuild. Everything is
additive: existing class APIs stay intact, these extend them.
========================================================================== */
/* ---- 21.1 Split hero (index) — asymmetric editorial, aurora canvas bed ---- */
.hero--split {
text-align: left;
display: flex;
align-items: center;
}
.hero--split .hero-content {
text-align: left;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 64px;
align-items: center;
width: 100%;
}
.hero--split .hero-meta { margin-left: 0; margin-right: 0; justify-content: flex-start; }
.hero--split h1.display {
text-align: left;
margin-left: 0;
max-width: none;
font-size: clamp(46px, 5.4vw, 86px);
line-height: 1.02;
}
.hero--split .hero-sub {
text-align: left;
margin-left: 0;
max-width: 54ch;
}
.hero--split .hero-ctas { justify-content: flex-start; }
.hero--split .hero-stat-row { margin-top: 0; }
@media (max-width: 1080px) {
.hero--split .hero-content { grid-template-columns: 1fr; gap: 48px; }
.hero--split .hero-proof { max-width: 560px; }
}
/* Volt keyword inside the hero headline */
.hero h1 .volt { color: var(--signal); }
/* Aurora canvas — sits behind hero content, pure decoration */
.aurora-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
opacity: 0.9;
}
/* Static fallback when WebGL is off / reduced motion / mobile-degraded */
.hero--aurora {
background:
radial-gradient(ellipse 55% 45% at 72% 30%, rgba(0, 153, 255, 0.10), transparent 60%),
radial-gradient(ellipse 45% 40% at 20% 75%, rgba(10, 58, 102, 0.18), transparent 65%),
radial-gradient(ellipse 70% 55% at 50% 110%, rgba(8, 18, 30, 0.5), transparent 70%),
var(--bg);
}
/* Soft floor fade so the hero melts into the page */
.hero--aurora::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 180px;
background: linear-gradient(180deg, transparent, var(--bg));
pointer-events: none;
z-index: 1;
}
/* Kinetic line reveal — pure CSS, no JS gate. Lines rise out of masked
rows as soon as the stylesheet lands, so a script failure can never
leave the headline invisible. Delays start after the page-wipe's
leading edge has cleared the text column. */
.split-lines .sl-line {
display: block;
overflow: hidden;
}
.split-lines .sl-inner {
display: block;
transform: translateY(110%);
will-change: transform;
animation: sl-up 0.9s var(--ease) both;
}
.split-lines .sl-line:nth-child(1) .sl-inner { animation-delay: 0.22s; }
.split-lines .sl-line:nth-child(2) .sl-inner { animation-delay: 0.32s; }
.split-lines .sl-line:nth-child(3) .sl-inner { animation-delay: 0.42s; }
.split-lines .sl-line:nth-child(4) .sl-inner { animation-delay: 0.52s; }
@keyframes sl-up { to { transform: translateY(0); } }
/* ---- 21.2 Hero proof panel — the 60-Second Engine, live ---- */
.hero-proof {
position: relative;
z-index: 2;
border-radius: 20px;
background: rgba(11, 11, 10, 0.72);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.07),
0 0 0 1px rgba(255, 255, 255, 0.03),
0 40px 90px -40px rgba(0, 0, 0, 0.8),
0 0 120px -60px var(--signal-glow);
overflow: hidden;
animation: fadeUp 0.8s var(--ease) 0.5s both;
}
.hero-proof-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--text-tertiary);
}
.hero-proof-head .live-dot {
display: inline-flex; align-items: center; gap: 8px;
color: var(--signal);
}
.hero-proof-head .live-dot::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--signal); box-shadow: 0 0 10px var(--signal);
animation: pulse 2s ease-in-out infinite;
}
.hero-proof-body { padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
/* Chat exchange — inquiry in, AI reply out, timed */
.chat-msg {
max-width: 85%;
padding: 12px 16px;
border-radius: 14px;
font-size: 13.5px;
line-height: 1.5;
opacity: 0;
transform: translateY(10px);
}
.chat-msg.in {
align-self: flex-start;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.07);
color: var(--text-primary);
border-bottom-left-radius: 4px;
}
.chat-msg.out {
align-self: flex-end;
background: linear-gradient(160deg, rgba(0, 153, 255, 0.16), rgba(0, 153, 255, 0.08));
border: 1px solid rgba(0, 153, 255, 0.25);
color: var(--text-primary);
border-bottom-right-radius: 4px;
}
.chat-msg .chat-meta {
display: block;
margin-top: 6px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--text-tertiary);
}
.chat-msg.out .chat-meta { color: var(--signal-dim); }
.hero-proof.play .chat-msg:nth-child(1) { animation: chatIn 0.5s var(--ease) 1.1s forwards; }
.hero-proof.play .chat-msg:nth-child(2) { animation: chatIn 0.5s var(--ease) 2.2s forwards; }
.hero-proof.play .chat-msg:nth-child(3) { animation: chatIn 0.5s var(--ease) 3.0s forwards; }
@keyframes chatIn { to { opacity: 1; transform: translateY(0); } }
.hero-proof-foot {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
font-family: var(--font-mono); font-size: 11px;
color: var(--text-secondary);
}
.hero-proof-foot .stamp { color: var(--signal); }
/* ---- 21.3 Cursor spotlight cards — radial highlight tracks pointer ---- */
.spot {
position: relative;
}
.spot::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%),
rgba(0, 153, 255, 0.07), transparent 45%);
opacity: 0;
transition: opacity 0.4s var(--ease);
pointer-events: none;
z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
.spot:hover::before { opacity: 1; }
}
/* ---- 21.4 Sticky mobile CTA bar (+31% pattern) ---- */
.sticky-cta {
position: fixed;
left: 12px; right: 12px; bottom: 12px;
z-index: 900;
display: none;
gap: 10px;
padding: 10px;
border-radius: 18px;
background: rgba(11, 11, 10, 0.88);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
transform: translateY(130%);
transition: transform 0.5s var(--ease);
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .btn-primary {
flex: 1.4;
justify-content: center;
padding: 14px 18px;
font-size: 14px;
}
.sticky-cta .btn-wa {
flex: 1;
justify-content: center;
padding: 14px 16px;
font-size: 14px;
}
@media (max-width: 820px) {
.sticky-cta { display: flex; }
}
/* ---- 21.5 WhatsApp button — labeled, never a mystery bubble ---- */
.btn-wa {
display: inline-flex; align-items: center; gap: 10px;
padding: 18px 28px; border-radius: 999px;
background: rgba(37, 211, 102, 0.12);
border: 1px solid rgba(37, 211, 102, 0.35);
color: #6BE28F;
font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
position: relative; overflow: hidden; isolation: isolate;
transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
will-change: transform;
}
.btn-wa svg { flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
.btn-wa:hover {
background: rgba(37, 211, 102, 0.2);
border-color: rgba(37, 211, 102, 0.55);
}
}
/* ---- 21.6 Homepage pricing anchor — the transparency wedge ---- */
.pricing-mini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.pricing-mini-card {
position: relative;
padding: 32px 30px;
border-radius: var(--radius-lg);
background: var(--surface-1);
border: 1px solid var(--border-soft);
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color 0.25s var(--ease), transform 0.25s var(--ease-out);
overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
.pricing-mini-card:hover { transform: translateY(-3px); border-color: var(--border-mid); }
}
.pricing-mini-card.hot { border-color: rgba(0, 153, 255, 0.35); }
.pricing-mini-card.hot::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(160deg, rgba(0, 153, 255, 0.06), transparent 50%);
pointer-events: none;
}
.pricing-mini-name {
font-family: var(--font-mono);
font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
color: var(--text-tertiary);
}
.pricing-mini-price {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(30px, 3vw, 40px);
letter-spacing: -0.02em;
color: var(--text-primary);
}
.pricing-mini-price .suffix {
font-family: var(--font-mono);
font-size: 13px; color: var(--text-secondary);
font-weight: 400; margin-left: 4px; letter-spacing: 0;
}
.pricing-mini-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
@media (max-width: 820px) { .pricing-mini { grid-template-columns: 1fr; } }
/* ---- 21.7 Guarantee / risk-reversal band ---- */
.guarantee-band {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--border-soft);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
overflow: hidden;
}
.guarantee-cell {
background: var(--surface-1);
padding: 36px 32px;
position: relative;
}
.guarantee-cell .g-icon {
width: 40px; height: 40px;
border-radius: 12px;
display: grid; place-items: center;
background: rgba(0, 153, 255, 0.10);
border: 1px solid rgba(0, 153, 255, 0.2);
color: var(--signal);
margin-bottom: 20px;
}
.guarantee-cell h4 {
font-family: var(--font-display);
font-weight: 500;
font-size: 20px; letter-spacing: -0.01em;
margin-bottom: 10px;
}
.guarantee-cell p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
@media (max-width: 820px) { .guarantee-band { grid-template-columns: 1fr; } }
/* ---- 21.8 Count-up metrics (JS animates [data-count]) ---- */
[data-count] { font-variant-numeric: tabular-nums; }
/* ---- 21.9 Marquee logo strip — velocity-aware (JS), edge-faded ---- */
.logo-marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
padding: 8px 0;
}
.logo-marquee-track {
display: flex;
align-items: center;
gap: 72px;
width: max-content;
will-change: transform;
animation: logo-marquee 38s linear infinite;
}
@keyframes logo-marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
.logo-marquee .logo-strip-item .logo-mark {
height: 26px;
max-width: 150px;
}
@media (prefers-reduced-motion: reduce) {
.logo-marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}
/* ---- 21.10 Section eyebrow tag — mono ticket style ---- */
.tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-secondary);
}
.tag::before {
content: '';
width: 5px; height: 5px;
border-radius: 50%;
background: var(--signal);
box-shadow: 0 0 8px var(--signal);
}
/* ---- 21.11 Reduced motion for all Section 21 pieces ---- */
@media (prefers-reduced-motion: reduce) {
.split-lines .sl-inner { transform: none !important; animation: none !important; }
.hero-proof { animation: none; }
.hero-proof .chat-msg { opacity: 1 !important; transform: none !important; animation: none !important; }
.aurora-canvas { display: none; }
.sticky-cta { transition: none; }
}
/* ---- 21.12 Two-step contact form ---- */
.form-progress {
height: 3px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
overflow: hidden;
margin-bottom: 28px;
}
.form-progress i {
display: block;
height: 100%;
width: 50%;
border-radius: inherit;
background: linear-gradient(90deg, var(--signal-dim), var(--signal));
box-shadow: 0 0 12px var(--signal-glow);
transition: width 0.6s var(--ease);
}
.form-step { border: none; padding: 0; margin: 0; min-width: 0; }
.choice-grid { display: flex; flex-direction: column; gap: 8px; }
.choice-pill { display: block; cursor: pointer; }
.choice-pill input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.choice-pill span {
display: block;
padding: 14px 18px;
border-radius: 12px;
background: var(--bg);
border: 1px solid var(--border);
font-size: 14.5px;
color: var(--text-secondary);
transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
background 0.2s var(--ease), transform 0.15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.choice-pill:hover span { border-color: var(--border-strong); color: var(--text-primary); }
}
.choice-pill input:checked + span {
border-color: var(--signal);
color: var(--text-primary);
background: rgba(0, 153, 255, 0.06);
box-shadow: inset 0 0 0 1px var(--signal), 0 0 24px -12px var(--signal-glow);
}
.choice-pill input:focus-visible + span {
outline: 2px solid var(--signal);
outline-offset: 2px;
}
.choice-pill input:checked + span::before {
content: '✓ ';
color: var(--signal);
font-weight: 700;
}
.form-micro {
margin-top: 16px;
text-align: center;
font-size: 10.5px;
letter-spacing: 0.1em;
color: var(--text-tertiary);
}
.form-back {
display: block;
margin: 14px auto 0;
font-size: 13px;
color: var(--text-tertiary);
background: none;
transition: color 0.2s var(--ease);
}
.form-back:hover { color: var(--text-primary); }
.form-group .opt { color: var(--text-tertiary); text-transform: none; letter-spacing: 0.02em; }
/* ==========================================================================
SECTION 22 — PRODUCT SHOWCASES (Framer-style full-bleed app windows)
--------------------------------------------------------------------------
Three simulated consoles that demonstrate the services instead of
describing them. Default state = finished panel (works with zero JS);
adding .play re-runs every entrance/draw animation, and site.js loops
.play on an interval while the panel is on screen.
========================================================================== */
.showcase { padding: 110px 0 30px; }
.showcase + .showcase { padding-top: 40px; }
.sc-head { max-width: 760px; margin-bottom: 44px; }
.sc-head h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(32px, 4vw, 54px);
line-height: 1.02;
letter-spacing: -0.015em;
margin: 18px 0 16px;
}
.sc-head h2 em { font-style: normal; color: var(--text-tertiary); }
.sc-head p { font-size: 17px; color: var(--text-secondary); line-height: 1.55; max-width: 620px; }
.sc-head .service-link { margin-top: 18px; }
/* ---- Stage + window shell ---- */
.sc-stage { position: relative; }
.sc-stage::before {
content: '';
position: absolute;
inset: -80px -60px;
background: radial-gradient(ellipse 60% 55% at 50% 40%, var(--signal-soft), transparent 65%);
filter: blur(40px);
pointer-events: none;
}
.sc-window {
position: relative;
border-radius: 20px;
background: rgba(9, 11, 14, 0.86);
backdrop-filter: blur(18px) saturate(130%);
-webkit-backdrop-filter: blur(18px) saturate(130%);
border: 1px solid rgba(255, 255, 255, 0.09);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.07),
0 0 0 1px rgba(0, 0, 0, 0.4),
0 60px 140px -50px rgba(0, 0, 0, 0.9),
0 0 160px -70px var(--signal-glow);
overflow: hidden;
}
.sc-chrome {
display: flex; align-items: center; gap: 14px;
height: 46px; padding: 0 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
}
.sc-dots { display: flex; gap: 6px; }
.sc-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.12); }
.sc-dots i:nth-child(1) { background: #FF5F57; }
.sc-dots i:nth-child(2) { background: #FEBC2E; }
.sc-dots i:nth-child(3) { background: #28C840; }
.sc-chrome .sc-title {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--text-tertiary);
}
.sc-chrome .sc-live {
margin-left: auto;
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--signal);
}
.sc-chrome .sc-live::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--signal); box-shadow: 0 0 10px var(--signal);
animation: pulse 2s ease-in-out infinite;
}
.sc-chrome .sc-tabs { display: flex; gap: 4px; margin-left: 10px; }
.sc-chrome .sc-tab {
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
color: var(--text-tertiary);
padding: 5px 12px; border-radius: 7px;
}
.sc-chrome .sc-tab.on { color: var(--text-primary); background: rgba(255, 255, 255, 0.07); }
/* Shared bits */
.sc-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 9px; border-radius: 6px;
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.08em; text-transform: uppercase;
white-space: nowrap;
}
.sc-chip.blue { background: rgba(0, 153, 255, 0.14); color: var(--signal); border: 1px solid rgba(0, 153, 255, 0.3); }
.sc-chip.red { background: rgba(255, 92, 92, 0.12); color: #FF7B7B; border: 1px solid rgba(255, 92, 92, 0.3); }
.sc-chip.dim { background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); border: 1px solid rgba(255, 255, 255, 0.08); }
.sc-note {
display: flex; flex-wrap: wrap; gap: 10px 28px;
margin-top: 22px;
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
}
.sc-note span::before { content: '— '; color: var(--signal); }
/* ==========================================================================
22a. ADS CONSOLE
========================================================================== */
.sc-ads .sc-body {
display: grid;
grid-template-columns: 1.3fr 0.7fr;
min-height: 470px;
}
.sc-ads .sc-left { padding: 26px 0 28px; border-right: 1px solid rgba(255,255,255,0.06); min-width: 0; }
.sc-ads .sc-left-head {
display: flex; align-items: baseline; justify-content: space-between;
padding: 0 26px 16px;
}
.sc-ads .sc-left-head .t {
font-family: var(--font-display); font-weight: 500;
font-size: 18px; letter-spacing: -0.01em;
}
.sc-ads .sc-left-head .s { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.sc-cols {
display: grid;
grid-template-columns: 2.4fr 0.9fr 0.8fr 0.9fr 1.3fr;
gap: 12px;
padding: 10px 26px;
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--text-tertiary);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sc-row {
display: grid;
grid-template-columns: 2.4fr 0.9fr 0.8fr 0.9fr 1.3fr;
gap: 12px;
align-items: center;
padding: 15px 26px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
position: relative;
}
.sc-row .n { font-size: 13.5px; color: var(--text-primary); display: flex; align-items: center; gap: 10px; min-width: 0; }
.sc-row .n .ch { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; font-weight: 700; font-family: var(--font-mono); }
.sc-row .n .ch.g { background: rgba(66, 133, 244, 0.15); color: #7BAAF7; }
.sc-row .n .ch.m { background: rgba(0, 132, 255, 0.12); color: #4FA8FF; }
.sc-row .n .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-row .v { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sc-row .v.good { color: var(--signal); }
.sc-row .v.bad { color: #FF7B7B; }
.sc-row .st { justify-self: end; }
/* Winner + waster row treatments */
.sc-row.win { background: linear-gradient(90deg, rgba(0, 153, 255, 0.05), transparent 70%); }
.sc-row.lose.played { background: linear-gradient(90deg, rgba(255, 92, 92, 0.04), transparent 70%); }
.sc-row.lose .fade-on-pause { transition: opacity 0.4s var(--ease); }
/* Budget shift bar under winner */
.sc-budget {
grid-column: 1 / -1;
height: 4px; border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
margin-top: 10px;
}
.sc-budget i {
display: block; height: 100%;
width: 86%;
border-radius: inherit;
background: linear-gradient(90deg, var(--signal-dim), var(--signal));
box-shadow: 0 0 14px var(--signal-glow);
}
/* Scanline sweep */
.sc-scan {
position: absolute;
left: 0; right: 0; top: 0;
height: 52px;
background: linear-gradient(180deg, transparent, rgba(0, 153, 255, 0.06), transparent);
opacity: 0;
pointer-events: none;
}
/* Right column: chart + ROAS */
.sc-ads .sc-right { padding: 26px; display: flex; flex-direction: column; min-width: 0; }
.sc-ads .sc-roas-label {
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text-tertiary); margin-bottom: 8px;
}
.sc-ads .sc-roas {
font-family: var(--font-mono); font-weight: 500;
font-size: clamp(44px, 4.5vw, 64px);
letter-spacing: -0.03em; line-height: 1;
color: var(--signal);
margin-bottom: 4px;
}
.sc-ads .sc-roas-delta { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); margin-bottom: 22px; }
.sc-ads .sc-roas-delta b { color: var(--signal); font-weight: 500; }
.sc-chart { position: relative; flex: 1; min-height: 190px; }
.sc-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-chart .grid line { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.sc-chart .area { fill: url(#scAreaFill); opacity: 0.85; }
.sc-chart .stroke {
fill: none; stroke: var(--signal); stroke-width: 2;
stroke-linecap: round;
filter: drop-shadow(0 0 6px rgba(0, 153, 255, 0.5));
}
/* Toast */
.sc-toast {
position: absolute;
right: 22px; bottom: 20px;
display: flex; align-items: center; gap: 12px;
padding: 13px 18px;
border-radius: 12px;
background: rgba(10, 14, 18, 0.95);
border: 1px solid rgba(0, 153, 255, 0.35);
box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.9), 0 0 40px -18px var(--signal-glow);
font-size: 13px; color: var(--text-primary);
z-index: 3;
}
.sc-toast .tick {
width: 22px; height: 22px; border-radius: 50%;
background: var(--signal); color: var(--signal-ink);
display: grid; place-items: center;
font-size: 12px; font-weight: 700;
}
.sc-toast b { color: var(--signal); font-weight: 600; }
/* --- Ads console animation (under .play) --- */
.sc.play .sc-row { opacity: 0; animation: scRowIn 0.5s var(--ease) both; }
.sc.play .sc-row:nth-child(2) { animation-delay: 0.15s; }
.sc.play .sc-row:nth-child(3) { animation-delay: 0.30s; }
.sc.play .sc-row:nth-child(4) { animation-delay: 0.45s; }
.sc.play .sc-row:nth-child(5) { animation-delay: 0.60s; }
@keyframes scRowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sc.play .sc-scan { animation: scScan 1.6s var(--ease) 1.1s both; }
@keyframes scScan {
0% { opacity: 0; transform: translateY(0); }
15% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; transform: translateY(220px); }
}
.sc.play .sc-chip.pause-chip { opacity: 0; animation: scPop 0.45s var(--ease-spring) 3.1s both; }
.sc.play .sc-chip.win-chip { opacity: 0; animation: scPop 0.45s var(--ease-spring) 3.9s both; }
@keyframes scPop {
0% { opacity: 0; transform: scale(0.6); }
100% { opacity: 1; transform: scale(1); }
}
.sc.play .sc-row.lose .dim-on-pause { animation: scDim 0.5s var(--ease) 3.3s both; }
@keyframes scDim { to { opacity: 0.35; } }
.sc.play .sc-budget i { animation: scBudget 1.2s var(--ease) 4.2s both; }
@keyframes scBudget { from { width: 34%; } to { width: 86%; } }
.sc.play .sc-chart .stroke { stroke-dasharray: 620; animation: scDraw 2.6s var(--ease) 0.8s both; }
@keyframes scDraw { from { stroke-dashoffset: 620; } to { stroke-dashoffset: 0; } }
.sc.play .sc-chart .area { animation: scAreaIn 1.4s var(--ease) 2s both; }
@keyframes scAreaIn { from { opacity: 0; } to { opacity: 0.85; } }
.sc.play .sc-toast { animation: scToast 8.4s var(--ease) 5.6s both; }
@keyframes scToast {
0% { opacity: 0; transform: translateY(16px); }
6% { opacity: 1; transform: none; }
88% { opacity: 1; }
100% { opacity: 0; transform: translateY(6px); }
}
/* ==========================================================================
22b. WEBSITE LAB
========================================================================== */
.sc-web .sc-body {
display: grid;
grid-template-columns: 1.25fr 0.75fr;
min-height: 470px;
}
.sc-web .sc-left { padding: 26px; border-right: 1px solid rgba(255,255,255,0.06); display: flex; }
/* Mini browser building the client site */
.sc-browser {
position: relative;
flex: 1;
border-radius: 12px;
background: #0D1117;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
overflow: hidden;
display: flex; flex-direction: column;
}
.sc-browser-bar {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px;
background: rgba(255, 255, 255, 0.03);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sc-browser-bar .sc-dots i { width: 8px; height: 8px; }
.sc-url {
flex: 1; max-width: 300px; margin: 0 auto;
padding: 5px 14px; border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
font-family: var(--font-mono); font-size: 10.5px;
color: var(--text-secondary); text-align: center;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.sc-url::before { content: '🔒 '; font-size: 9px; }
/* The crafted landing page inside */
.sc-site {
position: relative; flex: 1; overflow: hidden;
background:
radial-gradient(ellipse 90% 60% at 70% 10%, rgba(64, 160, 255, 0.25), transparent 60%),
linear-gradient(180deg, #06121E 0%, #0A2238 46%, #0E3A5C 78%, #145078 100%);
padding: 22px 26px;
display: flex; flex-direction: column;
}
.sc-site::after {
/* water shimmer */
content: '';
position: absolute; left: -20%; right: -20%; bottom: -40px; height: 120px;
background: radial-gradient(ellipse at 50% 0%, rgba(120, 200, 255, 0.25), transparent 70%);
filter: blur(18px);
}
.sc-site-nav { display: flex; align-items: center; gap: 18px; margin-bottom: 34px; }
.sc-site-logo { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: #EAF6FF; letter-spacing: -0.01em; }
.sc-site-links { display: flex; gap: 14px; margin-left: auto; }
.sc-site-links i {
width: 34px; height: 5px; border-radius: 3px;
background: rgba(234, 246, 255, 0.28);
}
.sc-site-h1 {
font-family: var(--font-display); font-weight: 600;
font-size: clamp(22px, 2.4vw, 34px);
line-height: 1.06; letter-spacing: -0.015em;
color: #F2FAFF;
max-width: 12ch;
margin-bottom: 12px;
}
.sc-site-sub { display: flex; flex-direction: column; gap: 7px; margin-bottom: 22px; }
.sc-site-sub i { height: 6px; border-radius: 3px; background: rgba(234, 246, 255, 0.22); }
.sc-site-sub i:nth-child(1) { width: 62%; }
.sc-site-sub i:nth-child(2) { width: 44%; }
.sc-bookbtn {
position: relative;
display: inline-flex; align-items: center; gap: 8px;
width: fit-content;
padding: 11px 22px; border-radius: 999px;
background: var(--signal); color: var(--signal-ink);
font-size: 13px; font-weight: 700;
box-shadow: 0 10px 30px -10px rgba(0, 153, 255, 0.7);
}
.sc-bookbtn .rip {
position: absolute; left: 50%; top: 50%;
width: 10px; height: 10px; border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.9);
transform: translate(-50%, -50%) scale(0);
opacity: 0;
pointer-events: none;
}
.sc-site-meta {
margin-top: auto;
display: flex; gap: 8px; position: relative; z-index: 2;
}
.sc-site-meta .sc-chip { backdrop-filter: blur(6px); }
/* Fake cursor */
.sc-cursor {
position: absolute;
z-index: 5;
left: 78%; top: 84%;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
opacity: 0;
pointer-events: none;
}
/* Confirmation card */
.sc-confirm {
position: absolute;
z-index: 4;
left: 26px; bottom: 54px;
display: flex; align-items: center; gap: 10px;
padding: 11px 16px;
border-radius: 11px;
background: rgba(8, 14, 20, 0.94);
border: 1px solid rgba(0, 153, 255, 0.4);
box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.9);
font-size: 12.5px; color: var(--text-primary);
opacity: 0;
}
.sc-confirm .tick {
width: 20px; height: 20px; border-radius: 50%;
background: var(--signal); color: var(--signal-ink);
display: grid; place-items: center;
font-size: 11px; font-weight: 700;
}
.sc-confirm .sub { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); margin-top: 2px; }
/* Right rail: speed gauge */
.sc-web .sc-right { padding: 30px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sc-gauge { position: relative; width: 168px; height: 168px; margin: 8px 0 6px; }
.sc-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sc-gauge .bg { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 9; }
.sc-gauge .val {
fill: none; stroke: var(--signal); stroke-width: 9; stroke-linecap: round;
stroke-dasharray: 339.3;
stroke-dashoffset: 6.8; /* 98/100 */
filter: drop-shadow(0 0 8px rgba(0, 153, 255, 0.5));
}
.sc-gauge .num {
position: absolute; inset: 0;
display: grid; place-items: center;
font-family: var(--font-mono); font-weight: 500;
font-size: 44px; letter-spacing: -0.03em;
color: var(--signal);
}
.sc-gauge-label {
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 22px;
}
.sc-vitals { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 240px; }
.sc-vital {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
font-family: var(--font-mono); font-size: 11.5px;
color: var(--text-secondary);
}
.sc-vital b { color: var(--signal); font-weight: 500; }
.sc-web .sc-right .foot {
margin-top: auto; padding-top: 20px;
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--text-tertiary);
}
/* --- Website lab animation --- */
.sc.play .sc-site-h1 { animation: scRowIn 0.6s var(--ease) 0.4s both; }
.sc.play .sc-site-sub i { animation: scBarGrow 0.7s var(--ease) both; transform-origin: left; }
.sc.play .sc-site-sub i:nth-child(1) { animation-delay: 0.7s; }
.sc.play .sc-site-sub i:nth-child(2) { animation-delay: 0.85s; }
@keyframes scBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sc.play .sc-bookbtn { animation: scPop 0.5s var(--ease-spring) 1.15s both; }
.sc.play .sc-cursor { animation: scCursor 3.4s cubic-bezier(0.45, 0.05, 0.35, 1) 1.6s both; }
@keyframes scCursor {
0% { opacity: 0; transform: translate(0, 0); }
12% { opacity: 1; }
55% { transform: translate(-236px, -96px); }
63% { transform: translate(-236px, -96px) scale(1); }
68% { transform: translate(-236px, -96px) scale(0.82); }
76% { transform: translate(-236px, -96px) scale(1); }
100% { opacity: 1; transform: translate(-236px, -96px); }
}
.sc.play .sc-bookbtn .rip { animation: scRipple 0.7s var(--ease) 4.0s both; }
@keyframes scRipple {
0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(9); }
}
.sc.play .sc-confirm { animation: scConfirm 7s var(--ease) 4.5s both; }
@keyframes scConfirm {
0% { opacity: 0; transform: translateY(14px) scale(0.95); }
7% { opacity: 1; transform: none; }
90% { opacity: 1; }
100% { opacity: 0; transform: translateY(6px); }
}
.sc.play .sc-gauge .val { animation: scGauge 2.2s var(--ease) 1s both; }
@keyframes scGauge { from { stroke-dashoffset: 339.3; } to { stroke-dashoffset: 6.8; } }
.sc.play .sc-vital { opacity: 0; animation: scRowIn 0.5s var(--ease) both; }
.sc.play .sc-vital:nth-child(1) { animation-delay: 2.2s; }
.sc.play .sc-vital:nth-child(2) { animation-delay: 2.35s; }
.sc.play .sc-vital:nth-child(3) { animation-delay: 2.5s; }
/* ==========================================================================
22c. 60-SECOND ENGINE CONSOLE
========================================================================== */
.sc-eng .sc-body {
display: grid;
grid-template-columns: repeat(3, 1fr) 252px;
min-height: 440px;
}
.sc-lane {
padding: 20px 18px;
border-right: 1px solid rgba(255, 255, 255, 0.05);
display: flex; flex-direction: column; gap: 10px;
min-width: 0;
}
.sc-lane-head {
display: flex; align-items: center; gap: 9px;
padding-bottom: 12px; margin-bottom: 4px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--text-secondary);
}
.sc-lane-head .dot { width: 7px; height: 7px; border-radius: 50%; }
.sc-lane-head .dot.wa { background: #25D366; box-shadow: 0 0 8px rgba(37, 211, 102, 0.6); }
.sc-lane-head .dot.ig { background: #E1306C; box-shadow: 0 0 8px rgba(225, 48, 108, 0.6); }
.sc-lane-head .dot.ln { background: #06C755; box-shadow: 0 0 8px rgba(6, 199, 85, 0.6); }
.sc-lane-head .tm { margin-left: auto; color: var(--text-tertiary); letter-spacing: 0.04em; }
.sc-msg {
max-width: 94%;
padding: 10px 13px;
border-radius: 12px;
font-size: 12.5px; line-height: 1.45;
color: var(--text-primary);
}
.sc-msg.in {
align-self: flex-start;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.07);
border-bottom-left-radius: 4px;
}
.sc-msg.out {
align-self: flex-end;
background: linear-gradient(160deg, rgba(0, 153, 255, 0.16), rgba(0, 153, 255, 0.07));
border: 1px solid rgba(0, 153, 255, 0.3);
border-bottom-right-radius: 4px;
}
.sc-msg .mt {
display: block; margin-top: 5px;
font-family: var(--font-mono); font-size: 9.5px;
letter-spacing: 0.05em;
color: var(--text-tertiary);
}
.sc-msg.out .mt { color: var(--signal-dim); }
.sc-typing {
align-self: flex-end;
display: inline-flex; gap: 4px;
opacity: 0; /* transient — only .play shows it */
padding: 10px 14px;
border-radius: 12px; border-bottom-right-radius: 4px;
background: rgba(0, 153, 255, 0.08);
border: 1px solid rgba(0, 153, 255, 0.18);
}
.sc-typing i {
width: 5px; height: 5px; border-radius: 50%;
background: var(--signal);
animation: scTypeDot 1s ease-in-out infinite;
}
.sc-typing i:nth-child(2) { animation-delay: 0.15s; }
.sc-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes scTypeDot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
/* Calendar rail */
.sc-cal {
padding: 20px;
display: flex; flex-direction: column;
}
.sc-cal-head {
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 14px;
}
.sc-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
margin-bottom: 18px;
}
.sc-cal-grid i {
aspect-ratio: 1;
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.sc-cal-grid i.booked {
background: rgba(0, 153, 255, 0.22);
border-color: rgba(0, 153, 255, 0.45);
box-shadow: 0 0 12px -4px var(--signal-glow);
}
.sc-cal-count {
font-family: var(--font-display); font-weight: 600;
font-size: 30px; letter-spacing: -0.02em;
color: var(--text-primary);
line-height: 1.1;
}
.sc-cal-count b { color: var(--signal); font-weight: 600; }
.sc-cal-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 6px; line-height: 1.45; }
.sc-cal .langs { margin-top: auto; display: flex; gap: 8px; }
/* --- Engine animation: three lanes staggered --- */
.sc.play .sc-msg, .sc.play .sc-typing { opacity: 0; animation: scMsgIn 0.45s var(--ease) both; }
@keyframes scMsgIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.sc.play .sc-lane:nth-child(1) .sc-msg.in { animation-delay: 0.6s; }
.sc.play .sc-lane:nth-child(1) .sc-typing { animation-name: scTypingLife; animation-duration: 1.5s; animation-delay: 1.3s; }
.sc.play .sc-lane:nth-child(1) .sc-msg.out { animation-delay: 2.7s; }
.sc.play .sc-lane:nth-child(2) .sc-msg.in { animation-delay: 2.1s; }
.sc.play .sc-lane:nth-child(2) .sc-typing { animation-name: scTypingLife; animation-duration: 1.5s; animation-delay: 2.9s; }
.sc.play .sc-lane:nth-child(2) .sc-msg.out { animation-delay: 4.3s; }
.sc.play .sc-lane:nth-child(3) .sc-msg.in { animation-delay: 3.6s; }
.sc.play .sc-lane:nth-child(3) .sc-typing { animation-name: scTypingLife; animation-duration: 1.5s; animation-delay: 4.4s; }
.sc.play .sc-lane:nth-child(3) .sc-msg.out { animation-delay: 5.8s; }
@keyframes scTypingLife {
0% { opacity: 0; transform: translateY(9px); }
15% { opacity: 1; transform: none; }
85% { opacity: 1; }
100% { opacity: 0; transform: translateY(-4px); }
}
/* typing bubble must end hidden — replaced by the reply */
.sc.play .sc-typing { animation-fill-mode: both; }
.sc.play .sc-cal-grid i.booked { animation: scSlotIn 0.4s var(--ease-spring) both; }
.sc.play .sc-cal-grid i.booked:nth-of-type(9) { animation-delay: 3.0s; }
.sc.play .sc-cal-grid i.booked:nth-of-type(13) { animation-delay: 4.6s; }
.sc.play .sc-cal-grid i.booked:nth-of-type(19) { animation-delay: 6.1s; }
@keyframes scSlotIn {
0% { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.05); box-shadow: none; transform: scale(0.85); }
60% { transform: scale(1.12); }
100% { background: rgba(0, 153, 255, 0.22); border-color: rgba(0, 153, 255, 0.45); box-shadow: 0 0 12px -4px var(--signal-glow); transform: scale(1); }
}
.sc.play .sc-cal-count, .sc.play .sc-cal-sub { opacity: 0; animation: scRowIn 0.5s var(--ease) 6.4s both; }
/* ==========================================================================
22d. Responsive + reduced motion
========================================================================== */
@media (max-width: 1080px) {
.sc-eng .sc-body { grid-template-columns: repeat(3, 1fr); }
.sc-cal { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,0.05); flex-direction: row; align-items: center; gap: 24px; }
.sc-cal-grid { margin-bottom: 0; flex: 1; max-width: 320px; }
.sc-cal .langs { margin-top: 0; margin-left: auto; }
}
@media (max-width: 900px) {
.sc-ads .sc-body, .sc-web .sc-body { grid-template-columns: 1fr; }
.sc-ads .sc-left, .sc-web .sc-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sc-cols, .sc-row { grid-template-columns: 2.2fr 1fr 1.3fr; }
.sc-cols .hide-m, .sc-row .hide-m { display: none; }
.sc-chart { min-height: 150px; }
}
@media (max-width: 720px) {
.showcase { padding: 70px 0 20px; }
.sc-eng .sc-body { grid-template-columns: 1fr; }
.sc-lane { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
.sc-cal { flex-direction: column; align-items: flex-start; gap: 14px; }
.sc-cursor { display: none; }
.sc-confirm { left: 14px; bottom: 14px; }
.sc-toast { right: 12px; bottom: 12px; font-size: 12px; padding: 10px 14px; }
.sc-row { padding: 13px 18px; }
.sc-cols { padding: 8px 18px; }
.sc-ads .sc-left-head { padding: 0 18px 12px; }
}
@media (hover: none) and (pointer: coarse) {
.sc-cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.sc .sc-row, .sc .sc-msg, .sc .sc-typing, .sc .sc-vital,
.sc .sc-cal-count, .sc .sc-cal-sub, .sc .sc-toast, .sc .sc-confirm,
.sc .sc-cursor, .sc .sc-scan, .sc .sc-chip,
.sc .sc-site-h1, .sc .sc-site-sub i, .sc .sc-bookbtn {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.sc .sc-typing, .sc .sc-cursor { opacity: 0 !important; }
.sc .sc-chart .stroke, .sc .sc-chart .area, .sc .sc-gauge .val,
.sc .sc-budget i, .sc .sc-cal-grid i.booked {
animation: none !important;
}
}