:root {
/* ===== Dark purple brand palette ===== */
--bg-deep: hsl(265, 55%, 5%);
--bg: hsl(265, 50%, 7%);
--bg-elev: hsl(265, 45%, 10%);
--bg-card: rgba(255, 255, 255, 0.04);
--bg-card-hov: rgba(255, 255, 255, 0.07);
--foreground: hsl(0, 0%, 98%);
--text: hsl(0, 0%, 98%);
--text-dim: hsla(0, 0%, 100%, 0.7);
--text-mute: hsla(0, 0%, 100%, 0.5);
--primary: hsl(0, 0%, 98%);
--primary-foreground: hsl(265, 50%, 7%);
--accent: hsl(265, 90%, 70%);
--accent-2: hsl(285, 90%, 76%);
--accent-pink: hsl(310, 85%, 72%);
--accent-warm: hsl(25, 95%, 62%);
--accent-cool: hsl(210, 95%, 70%);
--accent-soft: rgba(167, 139, 250, 0.1);
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.15);
--border-soft: rgba(255, 255, 255, 0.04);
--ring: hsl(265, 90%, 70%);
--radius: 0.75rem;
--font-display: 'Playfair Display', 'Times New Roman', serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--shadow-dashboard:
0 50px 100px -20px rgba(0, 0, 0, 0.7),
0 30px 60px -20px rgba(139, 92, 246, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.06);
--maxw: 1200px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg-deep); }
body {
background: var(--bg-deep);
color: var(--text);
font-family: var(--font-body);
font-feature-settings: 'cv11', 'ss01';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.5;
overflow-x: hidden;
font-weight: 400;
position: relative;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, .display {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.0;
color: var(--text);
}
em {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
}
/* ========== PAGE AURORA (subtle ambient gradients across page) ========== */
/* Animated page-wide mesh-gradient feel — three large radial blobs
drifting independently in slow infinite loops, heavily blurred so
they read like a WebGL mesh gradient rather than discrete shapes.
Same colors as the existing brand palette; just adds motion. */
.page-aurora {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
background: transparent;
will-change: transform;
}
/* Bottom-of-viewport blur overlay: as content scrolls up from below the
viewport, it appears slightly blurred and sharpens as it rises. Uses
backdrop-filter masked to fade out toward the top so only the bottom
~150px gets the effect. */
.scroll-blur-bottom {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 160px;
pointer-events: none;
z-index: 30;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%,
rgba(0,0,0,0.35) 45%,
rgba(0,0,0,0.85) 100%);
mask-image: linear-gradient(to bottom,
transparent 0%,
rgba(0,0,0,0.35) 45%,
rgba(0,0,0,0.85) 100%);
}
@media (max-width: 768px) {
.scroll-blur-bottom { height: 110px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
}
.page-aurora::before,
.page-aurora::after,
.page-aurora .blob-c {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(70px);
will-change: transform;
opacity: 0.55;
}
/* Blob A — lavender, drifts diagonally top-left → center-right */
.page-aurora::before {
width: 70vw;
height: 70vw;
left: -15vw;
top: -25vw;
background: radial-gradient(circle, rgba(167, 139, 250, 0.42), transparent 60%);
animation: aurora-drift-a 22s ease-in-out infinite alternate;
}
/* Blob B — pink, drifts counter to A */
.page-aurora::after {
width: 60vw;
height: 60vw;
right: -10vw;
bottom: -20vw;
background: radial-gradient(circle, rgba(236, 72, 153, 0.32), transparent 60%);
animation: aurora-drift-b 28s ease-in-out infinite alternate;
}
@keyframes aurora-drift-a {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(10vw, 6vh) scale(1.08); }
100% { transform: translate(-4vw, 10vh) scale(0.95); }
}
@keyframes aurora-drift-b {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-8vw, -5vh) scale(1.10); }
100% { transform: translate(6vw, -10vh) scale(0.92); }
}
/* Static, very faint SVG noise overlay — adds the premium grain that
shader-driven sites get baked in. Fixed-position, top of the painted
layer stack but pointer-events disabled. ~5% opacity, overlay blend
so it sits naturally on the dark background. */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
}
@media (prefers-reduced-motion: reduce) {
.page-aurora::before,
.page-aurora::after { animation: none; }
}
/* ========== NAVBAR ========== */
.nav {
position: sticky;
top: 0;
z-index: 50;
width: 100%;
font-family: var(--font-body);
background: rgba(10, 5, 24, 0.65);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.nav-inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 48px;
max-width: var(--maxw);
margin: 0 auto;
}
@media (max-width: 768px) {
.nav-inner { padding: 8px 24px; }
}
.brand {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
}
.brand-img {
height: 40px;
width: auto;
display: block;
object-fit: contain;
filter: drop-shadow(0 2px 8px rgba(167, 139, 250, 0.25));
}
.brand-sq {
width: 36px;
height: 36px;
display: block;
object-fit: contain;
border-radius: 9px;
filter: drop-shadow(0 4px 12px rgba(167, 139, 250, 0.35));
}
.brand-wordmark {
font-family: var(--font-body);
font-size: 22px;
font-weight: 400;
letter-spacing: -0.025em;
color: #ffffff;
line-height: 1;
}
.brand-wordmark strong {
font-weight: 800;
letter-spacing: -0.035em;
}
.brand-wordmark-img {
height: 110px;
width: auto;
display: block;
object-fit: contain;
}
.nav .brand-wordmark-img {
margin: -32px 0;
}
@media (max-width: 768px) {
/* Slightly bigger wordmark on mobile per #1 in the mobile audit. */
.brand-wordmark-img { height: 92px; }
.nav .brand-wordmark-img { margin: -26px 0; }
}
@media (max-width: 768px) {
.brand-img { height: 32px; }
.brand-sq { width: 30px; height: 30px; }
}
.brand-mark-wrap {
width: 28px;
height: 28px;
border-radius: 7px;
background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 30%, #fce7f3 60%, #e0f2fe 100%);
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow:
0 4px 16px rgba(167, 139, 250, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.8),
inset 0 -1px 0 rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.brand-mark-svg {
width: 16px;
height: 16px;
color: hsl(265, 60%, 25%);
}
.brand-name {
font-size: 18px;
font-family: var(--font-body);
font-weight: 500;
letter-spacing: -0.02em;
}
.brand-name strong {
font-weight: 700;
}
.nav-links {
display: flex;
gap: 32px;
align-items: center;
font-size: 14px;
color: var(--text-dim);
}
.nav-links a:not(.nav-cta) {
background: linear-gradient(135deg, #c4a7ff 0%, #d896ff 35%, #f078d1 65%, #ff9ad9 100%);
background-size: 100% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: var(--text-dim);
transition: -webkit-text-fill-color 0.3s ease, filter 0.3s ease;
position: relative;
}
.nav-links a:not(.nav-cta):hover {
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 10px rgba(192, 132, 252, 0.45));
}
.nav-cta {
padding: 8px 20px;
border-radius: 100px;
background: var(--text);
color: var(--bg-deep) !important;
font-weight: 600;
transition: opacity 0.2s, transform 0.2s;
}
.nav-cta:hover { opacity: 0.9; transform: translateY(-1px); }
/* ========== HERO ========== */
.hero {
position: relative;
min-height: 100vh;
padding: 30px 24px 0;
overflow: hidden;
}
/* Hero-specific aurora — the most prominent motion on the page, mirrors
what midu.design does with a shader in its hero. Same multi-gradient
composition as before, but the entire layer now slowly breathes and
pans, so the hero feels alive rather than static. */
.hero-aurora {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 60% 50% at 15% 25%, rgba(167, 139, 250, 0.4), transparent 55%),
radial-gradient(ellipse 50% 50% at 85% 30%, rgba(236, 72, 153, 0.25), transparent 60%),
radial-gradient(ellipse 70% 50% at 50% 85%, rgba(192, 132, 252, 0.2), transparent 65%);
filter: blur(40px);
background-size: 130% 130%;
background-position: 0% 0%;
animation: hero-aurora-pan 18s ease-in-out infinite alternate;
will-change: background-position, transform;
}
@keyframes hero-aurora-pan {
0% { background-position: 0% 0%; transform: scale(1); }
50% { background-position: 100% 60%; transform: scale(1.04); }
100% { background-position: 30% 100%; transform: scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
.hero-aurora { animation: none; }
}
/* Iridescent streaks at bottom, mimics the marketing image's light beams */
.iridescent-streaks {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50%;
z-index: 0;
pointer-events: none;
background:
linear-gradient(90deg, transparent 0%, rgba(244, 114, 182, 0.12) 30%, rgba(192, 132, 252, 0.18) 50%, rgba(244, 114, 182, 0.1) 70%, transparent 100%),
linear-gradient(180deg, transparent 0%, rgba(167, 139, 250, 0.08) 70%, rgba(244, 114, 182, 0.12) 100%);
filter: blur(20px);
opacity: 0.7;
}
.hero-inner {
position: relative;
z-index: 1;
max-width: var(--maxw);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
border-radius: 100px;
/* Matched to the "LIVE NOW" roadmap pill, pink neon border + halo */
border: 1px solid rgba(255, 77, 158, 0.55);
background: rgba(20, 12, 36, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #ff9ad9;
font-size: 14px;
font-family: var(--font-body);
font-weight: 500;
margin-bottom: 28px;
box-shadow: 0 0 18px rgba(255, 77, 158, 0.28);
}
.badge-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #ff4d9e;
box-shadow:
0 0 0 3px rgba(255, 77, 158, 0.3),
0 0 16px rgba(255, 77, 158, 1),
0 0 28px rgba(255, 154, 217, 0.6);
animation: live-blink 1.3s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25), 0 0 12px rgba(167, 139, 250, 0.6); }
50% { box-shadow: 0 0 0 6px rgba(167, 139, 250, 0.08), 0 0 18px rgba(167, 139, 250, 0.8); }
}
.hero-headline {
font-size: clamp(2.25rem, 5vw, 4.25rem);
line-height: 1.05;
letter-spacing: -0.025em;
max-width: 1280px;
margin-bottom: 24px;
color: var(--text);
font-weight: 400;
}
.hero-headline em {
font-style: italic;
background: linear-gradient(135deg, #ffffff 0%, #e0d4ff 50%, #fbc5e8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.hero-sub {
font-family: var(--font-body);
font-size: clamp(15px, 1.4vw, 17px);
color: var(--text-dim);
max-width: 640px;
line-height: 1.6;
margin-bottom: 32px;
}
.hero-cta {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 10px;
}
.dl-note {
font-family: var(--font-body);
font-size: 13px;
color: var(--text-mute);
margin-bottom: 14px;
letter-spacing: 0.01em;
}
.hero-support {
font-family: var(--font-body);
font-size: 15px;
color: var(--text-dim);
margin-top: 4px;
margin-bottom: 6px;
letter-spacing: -0.005em;
}
.hero-tagline {
font-family: var(--font-display);
font-size: clamp(20px, 1.9vw, 26px);
font-weight: 400;
font-style: italic;
letter-spacing: -0.01em;
color: var(--text);
margin-top: -4px;
margin-bottom: 30px;
}
.hero-tagline span,
.hero-tagline em {
font-style: italic;
font-weight: 400;
background: linear-gradient(135deg, #c4a7ff 0%, #d896ff 50%, #ff9ad9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 14px rgba(192, 132, 252, 0.35));
}
.hero-trust { margin-bottom: 16px; }
/* ========== PRODUCT VISUAL SECTION ========== */
.product-visual {
padding-top: 60px;
}
.product-visual .section-head {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.visual-caption {
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.15rem, 1.6vw, 1.5rem);
color: var(--text-dim);
margin-top: 36px;
letter-spacing: -0.01em;
}
.visual-caption em {
font-style: italic;
background: linear-gradient(135deg, #c4a7ff 0%, #ff9ad9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ========== INDUSTRY FIRST CLOSING LINE ========== */
.first-closing {
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-size: 1.4rem;
margin-top: 36px;
padding-top: 28px;
border-top: 1px solid rgba(167, 139, 250, 0.18);
letter-spacing: -0.01em;
}
.first-closing em {
background: linear-gradient(135deg, #c4a7ff 0%, #d896ff 50%, #ff9ad9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 16px rgba(192, 132, 252, 0.4));
}
/* ========== MARKETPLACE / CONSENT SECTION ========== */
.marketplace .section-head { margin-bottom: 56px; }
.marketplace-support {
font-family: var(--font-display);
font-style: italic;
font-size: 1.15rem;
color: var(--text-dim);
margin-top: 24px;
letter-spacing: -0.005em;
}
.marketplace-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.marketplace-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
padding: 28px;
text-align: left;
backdrop-filter: blur(10px);
transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.marketplace-card:hover {
transform: translateY(-2px);
border-color: rgba(167, 139, 250, 0.3);
background: rgba(167, 139, 250, 0.04);
}
.marketplace-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(236, 72, 153, 0.08));
border: 1px solid rgba(167, 139, 250, 0.25);
margin-bottom: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.marketplace-icon::after {
content: '';
width: 18px;
height: 18px;
background: var(--accent);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.marketplace-icon[data-icon="lock"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.marketplace-icon[data-icon="share"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.marketplace-icon[data-icon="license"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.marketplace-card h3 {
font-family: var(--font-body);
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
color: var(--text);
}
.marketplace-card p {
font-family: var(--font-body);
font-size: 14.5px;
color: var(--text-dim);
line-height: 1.6;
}
.marketplace-closing {
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-size: 1.5rem;
margin-top: 48px;
letter-spacing: -0.01em;
}
.marketplace-closing em {
background: linear-gradient(135deg, #c4a7ff 0%, #ff9ad9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 18px rgba(192, 132, 252, 0.4));
}
@media (max-width: 768px) {
.marketplace-grid { grid-template-columns: 1fr; }
}
/* ========== MISSION + FINAL CTA (side by side) ========== */
.mission-final {
padding: 100px 0;
}
.mission-final-grid {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 56px;
align-items: center;
}
.mission-col {
display: flex;
flex-direction: column;
text-align: left;
}
.mission-col .eyebrow { align-self: flex-start; margin-bottom: 22px; }
.mission-col h2 {
margin-bottom: 20px;
font-size: clamp(2rem, 3.6vw, 3rem);
}
.mission-col .big-copy {
margin-top: 0;
margin-bottom: 24px;
text-align: left;
max-width: none;
}
.mission-col .mission-support {
text-align: left;
margin-left: 0;
margin-right: 0;
margin-bottom: 24px;
}
.mission-col .mission-closing {
text-align: left;
}
.final-col .final-card {
margin: 0;
padding: 48px 40px;
}
.final-col .final-headline {
font-size: clamp(1.85rem, 3.2vw, 2.75rem);
}
.mission-final .positioning-final {
margin-top: 56px;
}
@media (max-width: 980px) {
.mission-final-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.mission-col { text-align: center; align-items: center; }
.mission-col .eyebrow { align-self: center; }
.mission-col .big-copy,
.mission-col .mission-support,
.mission-col .mission-closing { text-align: center; }
}
/* ========== FOUNDER / MISSION SECTION ========== */
.mission {
text-align: center;
}
.mission .eyebrow {
display: inline-block;
}
.mission h2 {
max-width: 1100px;
margin: 0 auto;
}
.mission .big-copy {
max-width: 900px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.mission-support {
font-family: var(--font-body);
font-size: 17px;
color: var(--text);
font-weight: 500;
margin-top: 28px;
letter-spacing: -0.01em;
max-width: 580px;
margin-left: auto;
margin-right: auto;
}
.mission-closing {
font-family: var(--font-display);
font-style: italic;
font-size: 1.45rem;
margin-top: 28px;
letter-spacing: -0.01em;
}
.mission-closing em {
background: linear-gradient(135deg, #c4a7ff 0%, #d896ff 50%, #ff9ad9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 18px rgba(192, 132, 252, 0.4));
}
/* ========== FINAL CTA SUPPORT LINE ========== */
.final-support {
font-family: var(--font-display);
font-style: italic;
font-size: 1.15rem;
color: var(--text-dim);
margin-top: 16px;
letter-spacing: -0.005em;
}
.final-support em {
background: linear-gradient(135deg, #c4a7ff 0%, #ff9ad9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 24px;
border-radius: 100px;
font-family: var(--font-body);
font-weight: 600;
font-size: 14.5px;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.2s ease;
white-space: nowrap;
}
.btn-primary {
background: var(--text);
color: var(--bg-deep);
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow:
0 10px 28px rgba(167, 139, 250, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
.btn-ghost {
background: rgba(255, 255, 255, 0.06);
color: var(--text);
border-color: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
}
.btn-block {
display: flex;
width: 100%;
margin-top: 24px;
}
.btn-play {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s, background 0.2s;
}
.btn-play:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}
.btn-play svg {
width: 16px;
height: 16px;
color: var(--text);
margin-left: 2px;
}
/* ========== HERO MARKETING IMAGE ========== */
.hero-image {
position: relative;
width: 100vw;
max-width: 100vw;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
margin-top: -120px;
margin-bottom: 0;
perspective: 1800px;
cursor: default;
padding: 0 5vw;
pointer-events: none;
z-index: 0;
}
.hero-cta, .dl-note, .hero-trust { position: relative; z-index: 3; }
.hero-image img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
@media (max-width: 768px) {
/* Force the hero-image container to be the full viewport width, dead
centered. Uses negative-margin break-out (works regardless of any
transform animations from .animate-up — the old `left/translateX`
approach was being clobbered by the entrance animation's transform
and the container drifted off-axis). */
.hero-image {
position: relative;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: -10px;
margin-bottom: 0;
padding: 0;
overflow: hidden;
display: flex;
justify-content: center;
}
/* The element wraps the ![]()
and is the actual flex item.
Without this, the picture takes 100% width and the 120% img inside it
anchors left (overflowing only to the right). Making the picture
centering too keeps the img symmetric in the viewport. */
.hero-image picture {
display: flex;
justify-content: center;
width: 100%;
}
/* Show the FULL dashboard on mobile (no crop). 120% width was
cropping the sides of the app and the soft shadow at the bottom
blended into the page background, making the app look "faded
into" the page rather than presented as a clean dashboard.
100% width with a touch of bottom padding lets the whole app
read cleanly without sides clipping. */
.hero-image {
padding-bottom: 12px;
}
.hero-image img {
display: block;
width: 100% !important;
max-width: 100% !important;
flex-shrink: 0;
margin: 0;
}
/* Calm the iridescent streaks on mobile so they don't blur into
the dashboard image edges. */
.iridescent-streaks {
opacity: 0.35;
}
}
.hero-image img {
width: 100%;
height: auto;
display: block;
background: transparent;
border-radius: 0;
box-shadow: none;
transform-origin: center center;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.hero-image-fallback {
display: none;
}
.hero-image.missing .hero-image-fallback {
display: block;
padding: 60px 40px;
text-align: center;
background: rgba(255, 255, 255, 0.04);
border: 2px dashed rgba(167, 139, 250, 0.4);
border-radius: 24px;
font-family: var(--font-body);
color: var(--text-dim);
}
.hero-image.missing .hero-image-fallback strong {
display: block;
font-size: 18px;
font-weight: 600;
color: var(--text);
margin-bottom: 10px;
}
.hero-image.missing .hero-image-fallback code {
display: inline-block;
background: rgba(0, 0, 0, 0.4);
border: 1px solid var(--border);
border-radius: 6px;
padding: 4px 10px;
font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
font-size: 14px;
color: var(--accent);
margin: 4px 2px;
}
.hero-image.missing .hero-image-fallback .hint {
margin-top: 18px;
font-size: 14px;
}
.legacy-hidden { display: none !important; }
/* ========== DASHBOARD ========== */
.dashboard-wrap {
position: relative;
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
/* Floating iridescent X icon, positioned upper-left of the dashboard like the marketing image */
.floating-icon {
position: absolute;
top: -36px;
left: -16px;
z-index: 5;
transform: rotate(-6deg);
filter: drop-shadow(0 24px 48px rgba(167, 139, 250, 0.5));
pointer-events: none;
animation: float 6s ease-in-out infinite;
}
.floating-icon img {
width: 110px;
height: 110px;
display: block;
object-fit: contain;
}
.final-icon-img {
width: 96px;
height: 96px;
max-width: 100%;
display: block;
object-fit: contain;
margin: 0 auto;
filter: drop-shadow(0 12px 32px rgba(167, 139, 250, 0.5));
}
@media (max-width: 768px) {
.final-icon-img { width: 72px; height: 72px; }
}
.final-icon { margin-bottom: 12px; }
.modal-icon-img {
width: 72px;
height: 72px;
display: block;
object-fit: contain;
margin: 0 auto;
}
/* Desktop: bigger container + object-fit: cover so the icon glyph fills the
square (the source PNG is 512x285 with the icon centered + transparent
padding either side, `contain` was capping the visible icon at ~160px
tall even when the container was 288). */
@media (min-width: 769px) {
.modal-icon-img {
width: 160px;
height: 160px;
object-fit: cover;
}
}
@keyframes float {
0%, 100% { transform: rotate(-6deg) translateY(0); }
50% { transform: rotate(-6deg) translateY(-6px); }
}
@media (max-width: 768px) {
.floating-icon img { width: 72px; height: 72px; }
.floating-icon { top: -22px; left: 6px; }
}
.floating-icon-inner {
width: 86px;
height: 86px;
border-radius: 22px;
background:
linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(232, 218, 255, 0.85) 25%,
rgba(255, 230, 255, 0.85) 50%,
rgba(216, 240, 255, 0.85) 75%,
rgba(255, 255, 255, 0.95) 100%);
border: 1.5px solid rgba(255, 255, 255, 0.7);
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.9),
inset 0 -2px 4px rgba(167, 139, 250, 0.15),
0 12px 32px rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.floating-icon-inner::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
pointer-events: none;
}
.floating-icon-inner svg {
width: 50%;
height: 50%;
color: hsl(265, 60%, 35%);
position: relative;
z-index: 1;
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}
.floating-icon-inner.small {
width: 64px;
height: 64px;
border-radius: 16px;
}
@media (max-width: 768px) {
.floating-icon { top: -20px; left: 8px; }
.floating-icon-inner { width: 56px; height: 56px; border-radius: 14px; }
}
.dashboard-glass {
border-radius: 24px;
padding: 12px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(244, 240, 255, 0.78));
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: var(--shadow-dashboard);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
position: relative;
}
.dashboard {
background: #ffffff;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.04);
user-select: none;
pointer-events: none;
font-size: 11px;
color: hsl(210, 14%, 17%);
}
/* Top bar */
.dash-top {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
background: linear-gradient(180deg, rgba(250, 248, 255, 0.7), rgba(244, 240, 255, 0.4));
}
.dash-brand {
display: flex;
align-items: center;
gap: 7px;
font-weight: 600;
font-size: 12px;
color: hsl(210, 14%, 17%);
}
.dash-logo {
width: 22px;
height: 22px;
border-radius: 6px;
background: linear-gradient(135deg, #e8dfff, #ffd8f1, #d8efff);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 2px 6px rgba(139, 92, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
}
.dash-logo svg {
width: 12px;
height: 12px;
color: hsl(265, 60%, 32%);
}
.dash-logo-img {
width: 22px;
height: 22px;
display: block;
object-fit: contain;
border-radius: 6px;
filter: drop-shadow(0 2px 4px rgba(139, 92, 246, 0.3));
}
.dash-chevron {
width: 12px;
height: 12px;
color: hsl(184, 5%, 55%);
}
.dash-search {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
background: rgba(0, 0, 0, 0.04);
border-radius: 8px;
padding: 6px 10px;
color: hsl(184, 5%, 55%);
font-size: 11px;
max-width: 320px;
margin: 0 auto;
}
.dash-search svg { width: 12px; height: 12px; }
.dash-search kbd {
margin-left: auto;
font-family: var(--font-body);
font-size: 9.5px;
background: #fff;
padding: 1px 5px;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.08);
color: hsl(184, 5%, 55%);
}
.dash-top-actions {
display: flex;
align-items: center;
gap: 8px;
}
.dash-action-pill {
background: var(--accent);
color: white;
border: none;
border-radius: 100px;
padding: 5px 12px;
font-size: 11px;
font-weight: 600;
cursor: default;
box-shadow: 0 2px 6px rgba(139, 92, 246, 0.4);
}
.dash-icon-btn {
width: 26px;
height: 26px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.04);
display: flex;
align-items: center;
justify-content: center;
cursor: default;
}
.dash-icon-btn svg { width: 13px; height: 13px; color: hsl(184, 5%, 55%); }
.dash-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, #a78bfa, #ec4899);
color: white;
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* Body */
.dash-body {
display: flex;
min-height: 460px;
}
/* Sidebar */
.dash-sidebar {
width: 188px;
flex-shrink: 0;
background: linear-gradient(180deg, rgba(248, 244, 255, 0.7), rgba(244, 240, 255, 0.4));
border-right: 1px solid rgba(0, 0, 0, 0.04);
padding: 14px 10px;
display: flex;
flex-direction: column;
gap: 1px;
}
.sb-section {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: hsl(184, 5%, 55%);
padding: 12px 10px 6px;
}
.sb-item {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 10px;
border-radius: 6px;
font-size: 11.5px;
font-weight: 500;
color: hsl(210, 14%, 25%);
cursor: default;
position: relative;
}
.sb-item.active {
background: rgba(139, 92, 246, 0.12);
color: var(--accent);
}
.sb-item.small { font-size: 11px; padding: 5px 10px; }
.sb-icon {
width: 13px;
height: 13px;
flex-shrink: 0;
background: currentColor;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
opacity: 0.7;
}
.sb-item.active .sb-icon { opacity: 1; }
.i-create { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.i-library { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.i-tts { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.i-train { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.i-key { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.i-noise { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.i-stems { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.i-master { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.i-convert { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.i-trim { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.i-settings { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.i-help { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.sb-pill {
margin-left: auto;
font-size: 8.5px;
font-weight: 600;
color: var(--accent);
background: rgba(139, 92, 246, 0.12);
padding: 1px 6px;
border-radius: 4px;
letter-spacing: 0.06em;
}
.sb-foot {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: column;
gap: 1px;
}
.sb-engine {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px 2px;
font-size: 10.5px;
color: hsl(184, 5%, 55%);
}
.engine-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}
/* Main */
.dash-main {
flex: 1;
padding: 18px 22px;
display: flex;
flex-direction: column;
gap: 14px;
background: #ffffff;
overflow: hidden;
}
.lib-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.lib-title {
font-family: var(--font-body);
font-size: 16px;
font-weight: 700;
color: hsl(210, 14%, 17%);
}
.lib-sub { font-size: 11px; color: hsl(184, 5%, 55%); margin-top: 2px; }
.lib-search {
display: flex;
align-items: center;
gap: 6px;
background: rgba(0, 0, 0, 0.04);
border-radius: 8px;
padding: 5px 10px;
font-size: 10.5px;
color: hsl(184, 5%, 55%);
min-width: 200px;
}
.lib-search svg { width: 11px; height: 11px; }
.lib-tabs {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.tab {
background: rgba(0, 0, 0, 0.04);
border: 1px solid transparent;
border-radius: 100px;
padding: 5px 12px;
font-size: 10.5px;
font-weight: 500;
color: hsl(210, 14%, 17%);
cursor: default;
display: inline-flex;
align-items: center;
gap: 5px;
}
.tab.active {
background: rgba(139, 92, 246, 0.1);
color: var(--accent);
border-color: rgba(139, 92, 246, 0.3);
}
.tab span { color: hsl(184, 5%, 55%); font-weight: 400; }
.tab.active span { color: var(--accent); }
.tab-spacer { flex: 1; }
.tab-ghost, .tab-primary {
border: 1px solid rgba(0, 0, 0, 0.08);
background: #fff;
padding: 5px 12px;
border-radius: 100px;
font-size: 10.5px;
font-weight: 500;
color: hsl(210, 14%, 17%);
cursor: default;
}
.tab-primary {
background: var(--accent);
color: white;
border-color: var(--accent);
box-shadow: 0 2px 6px rgba(139, 92, 246, 0.35);
}
/* Voice grid */
.voice-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
}
.voice-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 4px;
}
.voice-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--g1, #a78bfa), var(--g2, #ec4899));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 18px;
font-family: var(--font-body);
letter-spacing: 0.02em;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
margin-bottom: 6px;
position: relative;
}
.voice-avatar::after {
content: '';
position: absolute;
bottom: 0;
right: 2px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent);
border: 2px solid white;
}
.voice-name { font-size: 11px; font-weight: 600; color: hsl(210, 14%, 17%); }
.voice-size { font-size: 10px; color: hsl(184, 5%, 55%); }
.voice-tags {
display: flex;
gap: 4px;
margin-top: 2px;
flex-wrap: wrap;
justify-content: center;
}
.voice-tags span {
font-size: 9px;
padding: 1px 6px;
border-radius: 4px;
background: rgba(139, 92, 246, 0.1);
color: var(--accent);
font-weight: 500;
}
/* Audio player */
.dash-player {
margin-top: auto;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: rgba(0, 0, 0, 0.03);
border-radius: 10px;
font-size: 10.5px;
}
.player-art {
width: 28px;
height: 28px;
border-radius: 6px;
background: linear-gradient(135deg, var(--g1, #a78bfa), var(--g2, #ec4899));
flex-shrink: 0;
}
.player-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.player-title { font-size: 11px; font-weight: 600; color: hsl(210, 14%, 17%); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 140px; }
.player-time { font-size: 10px; color: hsl(184, 5%, 55%); }
.player-time-current, .player-time-end {
font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
font-size: 10px;
color: hsl(184, 5%, 55%);
}
.player-wave {
flex: 1;
height: 24px;
display: flex;
align-items: center;
}
.player-wave svg { width: 100%; height: 100%; }
.player-controls { display: flex; align-items: center; gap: 4px; }
.pc-btn {
width: 22px;
height: 22px;
border-radius: 50%;
border: none;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: default;
color: hsl(210, 14%, 17%);
}
.pc-btn svg { width: 12px; height: 12px; }
.pc-play {
width: 30px;
height: 30px;
background: var(--accent);
color: white;
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}
.pc-play svg { width: 13px; height: 13px; margin-left: 1px; }
/* ========== ANIMATE UP ========== */
.animate-up {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-up.show { opacity: 1; transform: translateY(0); }
.dashboard-wrap.animate-up {
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
/* ========== SECTIONS ========== */
.section {
padding: 120px 0;
position: relative;
}
/* Mission section sits tighter to the roadmap above it, the previous
section already provides 120px of bottom padding, so an additional
120px on top here just creates a big void. */
.section.mission {
padding-top: 40px;
}
@media (max-width: 768px) {
.section.mission { padding-top: 32px; }
}
.container {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 28px;
}
.container.narrow {
max-width: 820px;
}
.container.wide {
max-width: min(80vw, 1280px);
}
.section-head {
text-align: center;
margin-bottom: 72px;
}
.section-lede {
font-family: var(--font-body);
font-size: 17px;
color: var(--text-dim);
max-width: 580px;
margin: 24px auto 0;
line-height: 1.6;
}
.eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
padding: 5px 12px;
background: rgba(167, 139, 250, 0.12);
border: 1px solid rgba(167, 139, 250, 0.25);
border-radius: 100px;
margin-bottom: 28px;
}
.eyebrow.accent-warm {
color: var(--accent-warm);
background: rgba(251, 146, 60, 0.1);
border-color: rgba(251, 146, 60, 0.28);
}
h2 {
font-size: clamp(2.25rem, 5vw, 3.75rem);
line-height: 1.0;
letter-spacing: -0.02em;
}
h2 em {
background: linear-gradient(135deg, #c4a7ff 0%, #d896ff 35%, #f078d1 65%, #ff9ad9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 0 24px rgba(192, 132, 252, 0.45)) drop-shadow(0 0 60px rgba(236, 72, 153, 0.25));
font-weight: 400;
}
h3 {
font-family: var(--font-body);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
color: var(--text);
}
.big-copy {
font-family: var(--font-body);
font-size: 17px;
color: var(--text-dim);
line-height: 1.7;
margin-top: 20px;
}
.pull-quote {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 400;
font-style: italic;
color: var(--text);
line-height: 1.3;
margin: 64px auto 0;
max-width: 720px;
padding: 48px 40px;
background:
radial-gradient(ellipse at top, rgba(167, 139, 250, 0.14), transparent 70%),
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
border: 1px solid rgba(167, 139, 250, 0.28);
border-radius: 24px;
letter-spacing: -0.02em;
text-align: center;
position: relative;
backdrop-filter: blur(10px);
}
.pull-quote::before {
content: '';
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.7), rgba(236, 72, 153, 0.55), transparent);
}
@media (max-width: 768px) {
.pull-quote { padding: 32px 24px; }
}
/* Wrap the transition line in a flex row so the parent enforces horizontal
centering, no chance of drifting from auto-margin math at any viewport.
margin-top + margin-bottom are matched so the line sits visually in the
middle of the empty space between the cards above and the next section
below. */
.transition-wrap {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
/* Equal padding above and below puts the text dead-centre in the gap.
Paired with narrative padding-bottom: 0 and first-section padding-top: 40
(set further down) so the visible gap is symmetric. */
padding: 80px 0 40px;
margin: 0;
}
/* Desktop: shift the transition line down so it lands visually centred
between the "Built by musicians" line above and the "INDUSTRY FIRST"
eyebrow below. The upper card's bottom-padding and the first-callout's
top-padding make the text-to-text gap asymmetric otherwise. */
@media (min-width: 769px) {
.transition-wrap { padding: 96px 0 24px; }
}
/* Drop narrative bottom padding, transition-wrap supplies the space below
the cards. Reduce the first-section's top padding so the bottom of the
gap matches the top. Result: 80px above text, (40 + 40) = 80px below. */
.section.narrative { padding-bottom: 0; }
.section.first-section { padding-top: 40px; }
.transition {
display: inline-block;
font-family: var(--font-display);
font-size: clamp(1.75rem, 3.8vw, 2.75rem);
font-weight: 400;
color: var(--text);
max-width: min(980px, 100%);
margin: 0;
padding: 0 24px;
letter-spacing: -0.02em;
text-align: center;
line-height: 1.15;
box-sizing: border-box;
}
/* Forced line break before "into one place" on mobile only. Uses a
span flipped to display:block (more reliable cross-browser than a
with display tweaks, which iOS Safari sometimes ignores). */
.mobile-line { display: inline; }
@media (max-width: 768px) {
.mobile-line { display: block; }
}
.transition em {
font-style: italic;
background: linear-gradient(135deg, #c4a7ff 0%, #d896ff 35%, #f078d1 65%, #ff9ad9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 0 24px rgba(192, 132, 252, 0.45)) drop-shadow(0 0 60px rgba(236, 72, 153, 0.25));
}
.positioning-tag {
display: inline-block;
margin-top: 36px;
padding: 12px 22px;
font-family: var(--font-body);
font-size: 14.5px;
font-weight: 500;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(167, 139, 250, 0.3);
border-radius: 100px;
color: var(--text);
backdrop-filter: blur(10px);
}
.positioning-tag.warm {
border-color: rgba(251, 146, 60, 0.4);
background: rgba(251, 146, 60, 0.06);
}
/* ========== STORY PAIR (Idea + Problem, hover-grow) ========== */
.story-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: start;
}
.story-card {
background: rgba(255, 255, 255, 0.018);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 24px;
padding: 36px 36px;
display: flex;
flex-direction: column;
gap: 16px;
text-align: left;
backdrop-filter: blur(10px);
transition:
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.4s ease,
border-color 0.4s ease,
background 0.4s ease,
box-shadow 0.4s ease;
transform-origin: center center;
cursor: default;
}
/* When you hover one card, it grows; the other shrinks slightly */
.story-pair:hover .story-card {
transform: scale(0.96);
opacity: 0.65;
}
.story-pair .story-card:hover {
transform: scale(1.04);
opacity: 1;
background: rgba(167, 139, 250, 0.05);
border-color: rgba(167, 139, 250, 0.3);
box-shadow:
0 30px 70px -20px rgba(167, 139, 250, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
z-index: 2;
}
.story-card h2 {
font-size: clamp(1.85rem, 3vw, 2.65rem);
margin-bottom: 4px;
margin-top: 0;
line-height: 1.15;
}
.story-card .pull-quote {
font-size: clamp(1.15rem, 1.6vw, 1.4rem);
padding: 28px 24px;
margin-top: 32px;
}
.story-card .problem-list {
grid-template-columns: 1fr;
gap: 10px;
}
/* Solution card (right), visually emphasized as "the answer" */
.story-card-solution {
border-color: rgba(167, 139, 250, 0.5);
background:
radial-gradient(ellipse at top right, rgba(244, 114, 182, 0.08), transparent 60%),
linear-gradient(180deg, rgba(167, 139, 250, 0.1), rgba(167, 139, 250, 0.02));
box-shadow:
0 40px 100px -20px rgba(167, 139, 250, 0.4),
0 0 60px rgba(244, 114, 182, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
position: relative;
}
.story-card-solution::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(244, 114, 182, 0.4), rgba(167, 139, 250, 0.2) 50%, transparent 80%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.story-card-solution .eyebrow {
background: rgba(244, 114, 182, 0.16);
border-color: rgba(244, 114, 182, 0.45);
color: #ff9ad9;
}
/* Problem subheading lead line */
.problem-lead {
font-weight: 600;
color: var(--text) !important;
margin-top: 8px !important;
margin-bottom: 0 !important;
}
/* Compact horizontal chips, small premium summary tags. Replaces the
heavy two-column bullet grid on the problem card so the section feels
less pitch-deck and more landing page. */
.problem-chips {
list-style: none;
padding: 0;
margin: 6px 0 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.problem-chips li {
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--text-dim);
padding: 6px 12px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 999px;
white-space: nowrap;
transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.story-card:hover .problem-chips li {
border-color: rgba(244, 114, 182, 0.2);
color: var(--text);
}
/* "Scatter list", short fragmented lines that visually communicate
the broken-up, jump-around-from-tool-to-tool workflow. Each line is
its own visual fragment with a soft left-border accent. */
.scatter-list {
list-style: none;
padding: 0;
margin: 4px 0 18px;
display: flex;
flex-direction: column;
gap: 2px;
border-left: 1px solid rgba(167, 139, 250, 0.25);
}
.scatter-list li {
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
line-height: 1.5;
color: var(--text-dim);
padding: 6px 0 6px 16px;
position: relative;
}
.scatter-list li:first-child {
color: var(--text);
font-weight: 600;
}
.scatter-list li::before {
content: '';
position: absolute;
left: -1px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 60%;
background: linear-gradient(180deg, transparent, rgba(244, 114, 182, 0.6), transparent);
opacity: 0;
transition: opacity 0.25s ease;
}
.story-card:hover .scatter-list li::before { opacity: 1; }
/* Dense 2-column bullet list for the longer 11-item problem list */
.problem-list-dense {
grid-template-columns: 1fr 1fr !important;
gap: 12px 22px !important;
margin-top: 4px !important;
}
.problem-list-dense li {
font-size: 16px !important;
line-height: 1.45;
padding-left: 22px;
cursor: text;
}
/* Themed text selection — when the user click-drags to highlight the
actual words, the selection takes on a soft purple tint instead of
the default browser blue. Scoped to these list items so it only
themes the bullets, not the whole page. */
.problem-list-dense li::selection {
background: rgba(244, 114, 182, 0.32);
color: var(--text);
}
.problem-list-dense li::-moz-selection {
background: rgba(244, 114, 182, 0.32);
color: var(--text);
}
.problem-list-dense li::before {
top: 12px;
width: 12px;
height: 2px;
}
@media (max-width: 720px) {
.problem-list-dense { grid-template-columns: 1fr !important; }
}
/* Solution callout, 3 pillars in a vertical stack, each its own mini-row.
Flattened: no card-in-card wrapper, just spacing and the 3 pillars,
so the right card reads as one clean unit. */
.solution-callout {
margin-top: 20px;
padding: 0;
background: none;
border: none;
box-shadow: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.solution-callout::before { display: none; }
.solution-pillar {
display: flex;
align-items: flex-start;
gap: 12px;
font-family: var(--font-body);
padding: 8px 0;
background: none;
border: none;
border-radius: 0;
transition: transform 0.25s ease;
}
.solution-pillar:hover {
transform: translateX(2px);
}
.solution-pillar::before {
content: '';
flex-shrink: 0;
width: 10px;
height: 10px;
margin-top: 6px;
border-radius: 50%;
background: linear-gradient(135deg, #ff9ad9, #d896ff);
box-shadow: 0 0 12px rgba(244, 114, 182, 0.7);
}
.solution-pillar > div {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
}
.solution-pillar strong {
font-size: 15px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.01em;
display: block;
}
.solution-pillar span {
font-size: 13.5px;
color: var(--text-dim);
line-height: 1.5;
display: block;
}
/* Closing line in Idea card, clean readable sans-serif (no script) */
.solution-closing {
font-family: var(--font-body);
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
font-weight: 600;
letter-spacing: -0.01em;
text-align: center;
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid rgba(167, 139, 250, 0.18);
color: var(--text);
}
.solution-closing span {
font-weight: 600;
background: linear-gradient(135deg, #c4a7ff 0%, #d896ff 50%, #ff9ad9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 12px rgba(192, 132, 252, 0.35));
}
/* Standalone Industry First section */
.first-section { padding-top: 40px; }
@media (max-width: 880px) {
.story-pair { grid-template-columns: 1fr; gap: 20px; }
.story-pair:hover .story-card { transform: none; opacity: 1; }
.story-pair .story-card:hover { transform: none; }
}
/* Mobile-only swipe dots for the Problem/Idea carousel, hidden by default. */
.story-dots,
.story-swipe-hint { display: none; }
/* ── Mobile-only: convert the "Problem" and "Idea" cards into a HORIZONTAL
swipeable carousel (same pattern as the roadmap). Each card snaps into
place; dots below indicate which card you're on. ──────────────────── */
@media (max-width: 768px) {
/* Override the 880px-and-below rule that set grid-template-columns: 1fr */
.story-pair {
display: flex !important;
grid-template-columns: none !important;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding: 0 18px;
gap: 14px;
padding: 8px 18px 4px;
margin: 0 -18px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
align-items: stretch;
}
.story-pair::-webkit-scrollbar { display: none; }
.story-card {
flex: 0 0 86%;
min-width: 0;
max-width: 86%;
scroll-snap-align: start;
scroll-snap-stop: always;
}
/* Card itself: tighter padding, slimmer border-radius */
.story-card { padding: 16px 16px; border-radius: 16px; }
/* Headline: shrunk further so the card fits more content in less scroll */
.story-card h2 {
font-size: 1.2rem !important;
line-height: 1.15 !important;
margin-top: 2px !important;
margin-bottom: 8px !important;
letter-spacing: -0.015em;
}
/* Body paragraphs: tighter font + line-height + margin */
.story-card .big-copy {
font-size: 12px !important;
line-height: 1.45 !important;
margin-bottom: 8px !important;
}
.story-card .big-copy:last-of-type { margin-bottom: 10px !important; }
/* The "That creates real problems:" lead line */
.story-card .problem-lead {
font-size: 12px !important;
margin-top: 8px !important;
margin-bottom: 6px !important;
}
/* Bullet list of issues, denser, smaller font */
.story-card .problem-list-dense {
gap: 5px !important;
margin-top: 6px;
}
.story-card .problem-list-dense li {
font-size: 11.5px !important;
line-height: 1.35 !important;
padding-left: 14px;
}
.story-card .problem-list-dense li::before {
top: 6px;
width: 8px;
height: 1.5px;
}
/* Idea card solution-callout: tighter */
.solution-callout {
margin-top: 14px;
padding: 12px 12px;
gap: 8px;
border-radius: 12px;
}
.solution-pillar {
padding: 8px 10px;
gap: 8px;
border-radius: 9px;
}
.solution-pillar::before {
width: 7px;
height: 7px;
margin-top: 5px;
}
.solution-pillar strong { font-size: 12.5px; }
.solution-pillar span { font-size: 11px; line-height: 1.35; }
/* "Built by musicians" closing line tighter */
.solution-closing {
font-size: 0.85rem !important;
margin-top: 12px !important;
padding-top: 10px !important;
}
/* Eyebrow chip smaller */
.story-card .eyebrow {
font-size: 10px;
padding: 3px 10px;
margin-bottom: 8px;
letter-spacing: 0.14em;
}
/* Carousel dots, same look as the roadmap dots */
.story-dots {
display: flex;
justify-content: center;
gap: 8px;
margin: 12px 0 4px;
}
.story-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(167, 139, 250, 0.28);
transition: background 0.25s ease, transform 0.25s ease;
}
.story-dot.is-active {
background: #ff9ad9;
transform: scale(1.25);
box-shadow: 0 0 8px rgba(255, 154, 217, 0.6);
}
.story-swipe-hint {
display: block;
text-align: center;
margin: 0 0 6px;
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--text-mute);
text-transform: uppercase;
}
}
/* ========== NARRATIVE CAROUSEL (Idea / Problem / Industry First) ========== */
.carousel {
position: relative;
margin-bottom: 16px;
}
/* Edge hover zones for auto-scroll */
.carousel::before,
.carousel::after {
content: '';
position: absolute;
top: 0;
bottom: 60px;
width: 14%;
z-index: 2;
pointer-events: none;
transition: opacity 0.25s ease;
}
.carousel::before {
left: 0;
background: linear-gradient(90deg, rgba(8, 5, 24, 0.7), transparent);
}
.carousel::after {
right: 0;
background: linear-gradient(270deg, rgba(8, 5, 24, 0.7), transparent);
}
.carousel.at-start::before { opacity: 0; }
.carousel.at-end::after { opacity: 0; }
.carousel-track {
display: flex;
overflow-x: auto;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 24px;
padding: 16px 0 32px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-page {
flex: 0 0 540px;
scroll-snap-align: center;
padding: 36px 36px;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 22px;
backdrop-filter: blur(10px);
transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
transform: scale(0.94);
opacity: 0.7;
}
.carousel-page.is-active {
transform: scale(1);
opacity: 1;
border-color: rgba(167, 139, 250, 0.25);
background: rgba(167, 139, 250, 0.04);
}
.carousel-page > .eyebrow { align-self: flex-start; }
/* Tighter typography for card-sized pages */
.carousel-page h2 {
font-size: clamp(1.5rem, 2.4vw, 2rem);
margin-bottom: 12px;
}
.carousel-page .big-copy {
font-size: 15px;
margin-top: 14px;
}
.carousel-page .pull-quote {
font-size: 1.25rem;
padding: 24px 20px;
margin-top: 28px;
}
.carousel-page .problem-list {
grid-template-columns: 1fr;
gap: 8px;
margin-top: 20px;
}
.carousel-page .first-callout {
margin-top: 0;
padding: 28px 24px;
width: 100%;
}
.carousel-page .first-h {
font-size: clamp(1.4rem, 2.2vw, 1.85rem);
}
.carousel-page .first-points {
grid-template-columns: 1fr;
gap: 14px;
}
.carousel-page .first-icon { width: 30px; height: 30px; }
.carousel-page .first-icon::after { width: 14px; height: 14px; }
.carousel-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 8px;
position: relative;
z-index: 3;
}
.carousel-arrow {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
backdrop-filter: blur(10px);
}
.carousel-arrow:hover {
background: rgba(167, 139, 250, 0.18);
border-color: rgba(167, 139, 250, 0.45);
transform: translateY(-1px);
}
.carousel-arrow:disabled {
opacity: 0.3;
cursor: not-allowed;
transform: none;
}
.carousel-arrow svg { width: 18px; height: 18px; }
.carousel-dots {
display: flex;
gap: 10px;
align-items: center;
}
.carousel-dots .dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
border: none;
cursor: pointer;
transition: all 0.25s ease;
padding: 0;
}
.carousel-dots .dot:hover {
background: rgba(255, 255, 255, 0.35);
transform: scale(1.15);
}
.carousel-dots .dot.active {
background: var(--accent);
width: 28px;
border-radius: 100px;
box-shadow: 0 0 12px rgba(167, 139, 250, 0.6);
}
@media (max-width: 768px) {
.carousel-page {
flex: 0 0 86%;
padding: 24px 22px;
}
}
/* ========== DESKTOP + WEB SECTORS (side by side) ========== */
.sectors-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: start;
}
.sector-col {
display: flex;
flex-direction: column;
}
.sector-col h2 {
font-size: clamp(1.75rem, 2.6vw, 2.5rem);
margin-bottom: 8px;
}
.sector-col .big-copy {
font-size: 16px;
}
.sector-col .positioning-tag {
align-self: flex-start;
}
@media (max-width: 880px) {
.sectors-grid {
grid-template-columns: 1fr;
gap: 72px;
}
}
/* ========== PROBLEM LIST ========== */
.problem-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 24px;
margin-top: 28px;
font-family: var(--font-body);
}
.problem-list li {
position: relative;
padding-left: 28px;
font-size: 16px;
color: var(--text);
font-weight: 500;
}
.problem-list li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 16px;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-pink));
border-radius: 2px;
}
/* ========== PROVEN IN REAL SESSIONS (Founder proof) ========== */
.proof { padding: 80px 0; }
.proof-head {
text-align: center;
margin-bottom: 40px;
}
.proof-head h2 {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.proof-head .section-lede {
max-width: 1040px;
margin-top: 18px;
}
.proof-head .section-lede strong {
font-weight: 600;
background: linear-gradient(135deg, #c4a7ff 0%, #d896ff 50%, #ff9ad9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 12px rgba(192, 132, 252, 0.3));
}
/* Album covers */
.proof-covers {
display: flex;
justify-content: center;
gap: 28px;
margin: 0 auto 56px;
flex-wrap: wrap;
}
.proof-covers .cover {
width: 220px;
text-align: center;
}
.cover-img {
width: 220px;
height: 220px;
border-radius: 16px;
overflow: hidden;
background:
linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(236, 72, 153, 0.12));
border: 1px solid rgba(167, 139, 250, 0.3);
position: relative;
box-shadow:
0 20px 50px -15px rgba(167, 139, 250, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.cover-img:hover {
transform: translateY(-4px) rotate(0.5deg);
box-shadow:
0 30px 70px -15px rgba(167, 139, 250, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.cover-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cover-img.missing::before {
content: 'assets/' attr(class);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
text-align: center;
padding: 12px;
}
.cover-img.missing::after {
content: 'cover missing, add image';
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-body);
font-size: 10px;
color: rgba(167, 139, 250, 0.6);
white-space: nowrap;
}
.cover figcaption {
margin-top: 14px;
display: flex;
flex-direction: column;
gap: 2px;
}
.cover figcaption strong {
font-family: var(--font-display);
font-size: 18px;
font-weight: 400;
color: var(--text);
letter-spacing: -0.01em;
}
.cover figcaption span {
font-family: var(--font-body);
font-size: 12.5px;
color: var(--text-mute);
}
/* Tighter 4-column proof grid */
.proof-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
max-width: 1100px;
margin: 0 auto;
}
.proof-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 22px 20px;
backdrop-filter: blur(10px);
transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.proof-card:hover {
transform: translateY(-2px);
border-color: rgba(167, 139, 250, 0.35);
background: rgba(167, 139, 250, 0.05);
}
.proof-num {
font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.18em;
color: var(--accent);
margin-bottom: 10px;
}
.proof-card h3 {
font-family: var(--font-body);
font-size: 15.5px;
font-weight: 600;
margin-bottom: 6px;
color: var(--text);
letter-spacing: -0.01em;
}
.proof-card p {
font-family: var(--font-body);
font-size: 13.5px;
color: var(--text-dim);
line-height: 1.55;
}
@media (max-width: 880px) {
.proof-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
/* Keep proof cards as 2×2 grid on phones, much less scrolling than
stacked. Each card shrinks to fit comfortably side-by-side. */
.proof-grid {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.proof-card {
padding: 14px 12px !important;
border-radius: 12px !important;
}
.proof-num {
font-size: 11px !important;
margin-bottom: 8px !important;
}
.proof-card h3 {
font-size: 13.5px !important;
margin-bottom: 6px !important;
line-height: 1.2 !important;
}
.proof-card p {
font-size: 11.5px !important;
line-height: 1.4 !important;
}
.proof-covers .cover { width: 140px; }
.cover-img { width: 140px; height: 140px; }
}
/* ========== INDUSTRY-FIRST CALLOUT ========== */
.first-callout {
margin-top: 56px;
padding: 48px 40px;
background: linear-gradient(180deg, rgba(167, 139, 250, 0.1), rgba(167, 139, 250, 0.02));
border: 1px solid rgba(167, 139, 250, 0.3);
border-radius: 24px;
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
}
.first-callout::before {
content: '';
position: absolute;
top: -50%;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 100%;
background: radial-gradient(ellipse at top, rgba(167, 139, 250, 0.18), transparent 70%);
pointer-events: none;
}
.first-callout > * { position: relative; z-index: 1; }
.first-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
background: rgba(167, 139, 250, 0.14);
border: 1px solid rgba(167, 139, 250, 0.35);
padding: 5px 12px;
border-radius: 100px;
margin-bottom: 22px;
}
.first-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.3), 0 0 10px rgba(167, 139, 250, 0.8);
animation: pulse 2s ease-in-out infinite;
}
.first-h {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.02em;
margin-bottom: 16px;
color: var(--text);
}
.first-h em {
background: linear-gradient(135deg, #ffffff 0%, #e0d4ff 50%, #fbc5e8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.first-sub {
font-family: var(--font-body);
font-size: 16px;
color: var(--text-dim);
line-height: 1.6;
margin-bottom: 16px;
max-width: 580px;
}
/* Privacy/permission promise, soft accent block that sits between the
sub paragraph and the feature grid. Visually quieter than a callout
but distinct from the sub so readers register it as a guarantee. */
.first-promise {
font-family: var(--font-body);
font-size: 15px;
color: var(--text);
line-height: 1.55;
margin: 0 0 36px;
max-width: 620px;
padding: 12px 16px;
border-left: 2px solid rgba(244, 114, 182, 0.55);
background: linear-gradient(90deg, rgba(167, 139, 250, 0.07), transparent 80%);
border-radius: 0 10px 10px 0;
}
.first-promise em {
font-style: normal;
font-weight: 600;
background: linear-gradient(135deg, #c4a7ff 0%, #d896ff 50%, #ff9ad9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.first-points {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px 32px;
}
.first-point {
display: flex;
gap: 14px;
align-items: flex-start;
}
/* 4-column variant uses vertical stacking inside each card */
.first-points.cols-4 .first-point {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 18px 18px 20px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.first-points.cols-4 .first-point:hover {
background: rgba(167, 139, 250, 0.06);
border-color: rgba(167, 139, 250, 0.3);
transform: translateY(-2px);
}
.first-points.cols-4 .first-point > div {
display: flex;
flex-direction: column;
gap: 6px;
}
.first-points.cols-4 .first-point strong {
font-size: 14.5px;
line-height: 1.25;
}
.first-points.cols-4 .first-point span {
font-size: 13px;
line-height: 1.55;
}
.first-points.cols-4 .first-icon {
width: 34px;
height: 34px;
}
.first-icon {
width: 36px;
height: 36px;
border-radius: 9px;
background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(236, 72, 153, 0.1));
border: 1px solid rgba(167, 139, 250, 0.3);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.first-icon::after {
content: '';
width: 16px;
height: 16px;
background: var(--accent);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.first-icon[data-icon="lock"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.first-icon[data-icon="wifi"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.first-icon[data-icon="shield"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.first-icon[data-icon="zap"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.first-icon[data-icon="model"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.first-icon[data-icon="infinity"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.first-icon[data-icon="ban"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.first-icon[data-icon="grid"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.first-icon[data-icon="vault"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
/* 4-column variant for the expanded 8-feature grid (legacy, retained) */
.first-points.cols-4 {
grid-template-columns: repeat(4, 1fr);
gap: 24px 20px;
}
@media (max-width: 1080px) {
.first-points.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.first-points.cols-4 { grid-template-columns: 1fr; }
}
/* New trust/privacy layout: left intro + right stack + bottom pills */
.first-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 64px;
align-items: start;
margin-top: 36px;
}
.first-intro {
display: flex;
flex-direction: column;
}
.first-intro .first-eyebrow {
margin-bottom: 22px;
}
.first-intro .first-h {
margin-bottom: 20px;
}
.first-intro .first-sub {
margin-bottom: 28px;
max-width: 540px;
}
.first-manifesto {
font-family: var(--font-display);
font-size: clamp(1.2rem, 1.7vw, 1.55rem);
line-height: 1.4;
color: var(--text);
padding: 24px 26px;
background: linear-gradient(135deg, rgba(167, 139, 250, 0.1), rgba(236, 72, 153, 0.05));
border: 1px solid rgba(167, 139, 250, 0.28);
border-radius: 16px;
letter-spacing: -0.01em;
margin: 0;
}
.first-manifesto em {
font-style: italic;
background: linear-gradient(135deg, #c4a7ff 0%, #d896ff 50%, #ff9ad9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 18px rgba(192, 132, 252, 0.4));
}
.first-stack {
display: flex;
flex-direction: column;
gap: 14px;
}
.first-stack-item {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 20px 22px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.first-stack-item:hover {
background: rgba(167, 139, 250, 0.05);
border-color: rgba(167, 139, 250, 0.3);
transform: translateX(4px);
}
.first-stack-item .first-icon {
width: 34px;
height: 34px;
flex-shrink: 0;
}
.first-stack-item > div {
display: flex;
flex-direction: column;
gap: 4px;
}
.first-stack-item strong {
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.01em;
}
.first-stack-item span {
font-family: var(--font-body);
font-size: 13.5px;
color: var(--text-dim);
line-height: 1.55;
}
/* Bottom proof-strip pills */
.first-pills {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin: 48px auto 0;
padding: 24px 0 0;
border-top: 1px solid rgba(167, 139, 250, 0.15);
list-style: none;
}
.first-pills li {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--text-dim);
padding: 8px 16px;
border: 1px solid rgba(167, 139, 250, 0.25);
background: rgba(167, 139, 250, 0.05);
border-radius: 100px;
letter-spacing: 0.01em;
transition: all 0.25s ease;
}
.first-pills li:hover {
background: rgba(167, 139, 250, 0.12);
border-color: rgba(167, 139, 250, 0.5);
color: var(--text);
}
@media (max-width: 880px) {
.first-grid {
grid-template-columns: 1fr;
gap: 40px;
}
}
.first-point strong {
display: block;
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.first-point span {
font-family: var(--font-body);
font-size: 14px;
color: var(--text-dim);
line-height: 1.55;
}
@media (max-width: 768px) {
.first-callout { padding: 32px 24px; }
.first-points { grid-template-columns: 1fr; gap: 18px; }
}
/* ========== TOOLKIT, neon belt image with interactive hotspots ========== */
.toolkit { padding: 100px 0; }
.toolkit-stage {
max-width: 960px;
margin: 0 auto;
padding: 28px 36px 36px;
position: relative;
border-radius: 28px;
background:
radial-gradient(ellipse 80% 60% at 50% 38%, rgba(167, 139, 250, 0.07), transparent 70%),
linear-gradient(180deg, rgba(167, 139, 250, 0.025), rgba(244, 114, 182, 0.015));
border: 1px solid rgba(167, 139, 250, 0.18);
backdrop-filter: blur(6px);
}
.toolkit-stage::before {
content: '';
position: absolute;
top: -1px;
left: 22%;
right: 22%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(244, 114, 182, 0.55), rgba(167, 139, 250, 0.55), transparent);
}
.toolkit-instruction {
text-align: center;
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--text-mute);
margin: 0 0 22px;
text-transform: uppercase;
}
/* Bench layout: two flex groups flank a centered buckle. Belt is absolutely
positioned behind everything as a non-interactive background element. */
.toolkit-bench {
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0;
padding: 0;
margin: 0 auto;
max-width: 880px;
min-height: 230px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Each side of the bench: 4 tools left, 3 tools right, each side spreads evenly. */
.tool-group {
display: flex;
flex: 1 1 0;
align-items: flex-start;
justify-content: space-around;
min-width: 0;
}
.toolkit-bench.in-view {
opacity: 1;
transform: translateY(0);
}
/* ===== The belt / rail, PURELY VISUAL background, never interactive =====
It uses pointer-events: none so hovers pass through to the buckle / tools
without "interrupting the scroll-over interaction". */
.tool-rail {
position: absolute;
top: 60px;
left: 0;
right: 0;
height: 36px;
background: linear-gradient(180deg,
rgba(244, 114, 182, 0.05) 0%,
rgba(167, 139, 250, 0.10) 50%,
rgba(244, 114, 182, 0.05) 100%);
border: 2px solid rgba(192, 132, 252, 0.62);
border-radius: 6px;
z-index: 1;
pointer-events: none;
user-select: none;
}
/* Stitching: two dashed lines parallel to the belt edges, like sewing thread */
.tool-rail-line {
position: absolute;
inset: 5px 10px;
pointer-events: none;
border-top: 1px dashed rgba(244, 114, 182, 0.45);
border-bottom: 1px dashed rgba(244, 114, 182, 0.45);
}
/* ===== The buckle = Library (sits in the centre of the belt) =====
Now represents Library, the anchor of the toolkit. */
.tool-buckle {
flex: 0 0 auto;
z-index: 4 !important;
/* The buckle is the visual focal point so it gets a stronger idle glow than
the regular tools. */
color: rgba(244, 169, 233, 0.92);
filter:
drop-shadow(0 0 4px rgba(255, 121, 217, 0.35))
drop-shadow(0 0 10px rgba(192, 132, 252, 0.25));
}
.tool-buckle:hover,
.tool-buckle.is-active {
color: #ffd1f0;
filter:
drop-shadow(0 0 8px rgba(255, 121, 217, 0.7))
drop-shadow(0 0 22px rgba(192, 132, 252, 0.55));
transform: translateY(-4px) scale(1.06);
}
/* ===== Individual tools ===== */
.tool {
position: relative;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
z-index: 2;
color: rgba(192, 132, 252, 0.78);
filter: drop-shadow(0 0 3px rgba(192, 132, 252, 0.18));
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
color 0.35s ease,
filter 0.4s ease;
transform-origin: 50% 75px;
flex: 0 0 auto;
}
.tool svg {
display: block;
height: 200px;
width: auto;
overflow: visible;
}
.tool svg :is(path, rect, circle, line, polyline) {
fill: none;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke-width 0.35s ease;
}
.tool svg .tool-detail { stroke-width: 1.5; opacity: 0.55; }
.tool svg .tool-detail-strong { stroke-width: 2; opacity: 0.85; }
.tool:focus { outline: none; }
.tool:focus-visible {
outline: 2px solid rgba(255, 154, 217, 0.6);
outline-offset: 4px;
border-radius: 6px;
}
.tool:hover,
.tool.is-active {
color: #ffb4ea;
filter:
drop-shadow(0 0 6px rgba(255, 121, 217, 0.55))
drop-shadow(0 0 14px rgba(192, 132, 252, 0.4));
transform: translateY(-6px) scale(1.07);
z-index: 3;
}
.tool.is-active:not(:hover) {
color: #ff9ad9;
filter:
drop-shadow(0 0 5px rgba(255, 121, 217, 0.5))
drop-shadow(0 0 11px rgba(192, 132, 252, 0.32));
}
/* Floating label below each tool on hover (sits in open space below, doesn't
overlap the instruction line above the bench) */
.tool::after {
content: attr(aria-label);
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%) translateY(-4px);
font-family: var(--font-body);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text);
background: rgba(20, 12, 36, 0.95);
border: 1px solid rgba(244, 114, 182, 0.55);
border-radius: 100px;
padding: 5px 12px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease, transform 0.25s ease;
box-shadow: 0 6px 18px rgba(244, 114, 182, 0.35);
backdrop-filter: blur(8px);
z-index: 5;
}
.tool:hover::after,
.tool.is-active::after { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Description panel below the belt, FIXED SIZE so it doesn't jiggle when
different tool copy is selected. Width and min-height are locked. */
.toolkit-panel {
display: flex;
align-items: center;
gap: 16px;
width: 560px;
max-width: calc(100% - 24px);
min-height: 108px;
margin: 64px auto 0;
padding: 20px 24px;
background: linear-gradient(180deg, rgba(167, 139, 250, 0.07), rgba(167, 139, 250, 0.02));
border: 1px solid rgba(167, 139, 250, 0.25);
border-radius: 16px;
position: relative;
transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
text-align: left;
box-sizing: border-box;
}
.toolkit-panel.is-active {
border-color: rgba(244, 114, 182, 0.4);
background: linear-gradient(180deg, rgba(244, 114, 182, 0.06), rgba(167, 139, 250, 0.02));
box-shadow: 0 16px 40px -15px rgba(244, 114, 182, 0.4);
}
.toolkit-panel-icon {
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 12px;
background: linear-gradient(135deg, rgba(244, 114, 182, 0.18), rgba(167, 139, 250, 0.08));
border: 1px solid rgba(244, 114, 182, 0.35);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.toolkit-panel-icon::after {
content: '';
width: 22px;
height: 22px;
background: linear-gradient(135deg, #ff9ad9, #d896ff);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.toolkit-panel-icon[data-icon="create"]::after { -webkit-mask: var(--icon-create); mask: var(--icon-create); }
.toolkit-panel-icon[data-icon="train"]::after { -webkit-mask: var(--icon-train); mask: var(--icon-train); }
.toolkit-panel-icon[data-icon="library"]::after { -webkit-mask: var(--icon-library); mask: var(--icon-library); }
.toolkit-panel-icon[data-icon="keybpm"]::after { -webkit-mask: var(--icon-keybpm); mask: var(--icon-keybpm); }
.toolkit-panel-icon[data-icon="noise"]::after { -webkit-mask: var(--icon-noise); mask: var(--icon-noise); }
.toolkit-panel-icon[data-icon="stems"]::after { -webkit-mask: var(--icon-stems); mask: var(--icon-stems); }
.toolkit-panel-icon[data-icon="master"]::after { -webkit-mask: var(--icon-master); mask: var(--icon-master); }
.toolkit-panel-icon[data-icon="convert"]::after { -webkit-mask: var(--icon-convert); mask: var(--icon-convert); }
.toolkit-panel-text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
min-height: 64px;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.toolkit-panel.fading .toolkit-panel-text { opacity: 0; transform: translateY(4px); }
.toolkit-panel h3 {
font-family: var(--font-display);
font-size: 1.45rem;
font-weight: 400;
color: var(--text);
letter-spacing: -0.02em;
margin: 0;
line-height: 1.2;
}
.toolkit-panel p {
font-family: var(--font-body);
font-size: 14px;
color: var(--text-dim);
line-height: 1.45;
margin: 0;
/* Reserve space for up to 2 lines so the box height doesn't jump
between single-line and two-line descriptions. */
min-height: 2.9em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Hidden script tag */
#tool-data { display: none; }
/* Define icon masks, matched to the actual Xport Studio app sidebar icons */
:root {
/* Create, plus in circle */
--icon-create: url("data:image/svg+xml;utf8,");
/* Library, folder */
--icon-library: url("data:image/svg+xml;utf8,");
/* Train Clone, two people */
--icon-train: url("data:image/svg+xml;utf8,");
/* Key/BPM Finder, music note */
--icon-keybpm: url("data:image/svg+xml;utf8,");
/* Noise Remover, waveform with sparkle */
--icon-noise: url("data:image/svg+xml;utf8,");
/* Split Stems, horizontal stacked bars */
--icon-stems: url("data:image/svg+xml;utf8,");
/* Mix & Master, vertical EQ sliders */
--icon-master: url("data:image/svg+xml;utf8,");
/* Audio Converter, bi-directional arrows */
--icon-convert: url("data:image/svg+xml;utf8,");
}
@media (max-width: 880px) {
.toolkit-bench { min-height: 200px; }
.tool svg { height: 170px; }
.tool-rail { top: 50px; height: 32px; }
.tool { transform-origin: 50% 65px; }
}
@media (max-width: 640px) {
/* Drop the belt metaphor on phones, switch to a wrapped grid where the
buckle (Library) is its own row anchor at top, with the 7 tools below. */
.toolkit-bench {
display: grid;
grid-template-columns: repeat(4, 1fr);
row-gap: 14px;
column-gap: 8px;
min-height: 0;
padding: 0;
}
.toolkit-bench > .tool-rail { display: none; }
.toolkit-bench > .tool-group { display: contents; } /* tools become direct grid items */
.tool-buckle { grid-column: 1 / -1; }
.tool svg { height: 130px; }
.tool { transform-origin: 50% 50%; }
.tool::after { display: none; } /* No tooltips on touch */
.toolkit-panel { flex-direction: column; text-align: center; gap: 14px; width: 100%; }
.toolkit-instruction { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
.toolkit-bench, .tool, .tool-rail, .toolkit-panel,
.toolkit-panel-text, .tool::after { transition: none; }
}
/* Old class kept hidden, superseded by new image-based layout */
.toolbelt-rail, .toolbelt-pods, .toolbelt-info { display: none; }
.toolbelt {
position: relative;
margin-top: 64px;
padding: 60px 28px 0;
}
/* The horizontal rail, thick neon strip */
.toolbelt-rail {
position: relative;
height: 14px;
width: 100%;
margin-bottom: 0;
}
.rail-svg {
width: 100%;
height: 14px;
display: block;
overflow: visible;
}
.rail-line {
stroke-dasharray: 1200;
stroke-dashoffset: 1200;
stroke-width: 4;
transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1);
filter:
drop-shadow(0 0 6px rgba(244, 114, 182, 0.9))
drop-shadow(0 0 16px rgba(192, 132, 252, 0.6));
}
.toolbelt.in-view .rail-line {
stroke-dashoffset: 0;
}
.rail-glow {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 48px;
transform: translateY(-50%);
background:
radial-gradient(ellipse 50% 100% at 50% 50%, rgba(244, 114, 182, 0.4), transparent 70%),
radial-gradient(ellipse 80% 60% at 50% 50%, rgba(167, 139, 250, 0.25), transparent 75%);
filter: blur(10px);
pointer-events: none;
opacity: 0;
transition: opacity 1.2s ease 0.6s;
}
.toolbelt.in-view .rail-glow { opacity: 1; }
/* Pods row */
.toolbelt-pods {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 0;
position: relative;
margin-top: -3px;
}
.tool-pod {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
font-family: var(--font-body);
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.toolbelt.in-view .tool-pod {
opacity: 1;
transform: translateY(0);
}
/* Stagger the reveal */
.toolbelt.in-view .tool-pod[data-i="0"] { transition-delay: 0.20s; }
.toolbelt.in-view .tool-pod[data-i="1"] { transition-delay: 0.32s; }
.toolbelt.in-view .tool-pod[data-i="2"] { transition-delay: 0.44s; }
.toolbelt.in-view .tool-pod[data-i="3"] { transition-delay: 0.56s; }
.toolbelt.in-view .tool-pod[data-i="4"] { transition-delay: 0.68s; }
.toolbelt.in-view .tool-pod[data-i="5"] { transition-delay: 0.80s; }
.toolbelt.in-view .tool-pod[data-i="6"] { transition-delay: 0.92s; }
.toolbelt.in-view .tool-pod[data-i="7"] { transition-delay: 1.04s; }
/* Strap connecting pod to rail, looks like a modular clip wrapping the rail */
.pod-strap {
width: 22px;
height: 28px;
position: relative;
transition: all 0.3s ease;
display: flex;
justify-content: center;
}
/* Thin vertical line from rail down to pod */
.pod-strap::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
background: linear-gradient(180deg, rgba(192, 132, 252, 0.85), rgba(192, 132, 252, 0.2));
border-radius: 2px;
transition: all 0.3s ease;
}
/* The "wrap" clip that visually fastens the strap to the rail */
.pod-strap::after {
content: '';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 22px;
height: 16px;
border-radius: 5px;
border: 1.5px solid rgba(192, 132, 252, 0.5);
background: rgba(167, 139, 250, 0.08);
backdrop-filter: blur(4px);
box-shadow:
0 0 12px rgba(167, 139, 250, 0.4),
inset 0 0 8px rgba(167, 139, 250, 0.15);
transition: all 0.3s ease;
}
/* Pod body, the floating module */
.pod-body {
position: relative;
width: 64px;
height: 64px;
border-radius: 16px;
background: linear-gradient(180deg, rgba(167, 139, 250, 0.08), rgba(167, 139, 250, 0.02));
border: 1px solid rgba(167, 139, 250, 0.22);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow:
0 8px 24px -8px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.pod-body::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 16px;
padding: 1px;
background: linear-gradient(135deg, rgba(244, 114, 182, 0.5), rgba(167, 139, 250, 0.3), transparent 70%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.35s ease;
}
.pod-body .tool-icon {
width: 28px;
height: 28px;
margin: 0;
background: transparent;
border: none;
box-shadow: none;
}
.pod-body .tool-icon::after {
width: 22px;
height: 22px;
background: rgba(192, 132, 252, 0.85);
transition: background 0.35s ease;
}
.pod-label {
font-size: 11.5px;
font-weight: 500;
color: var(--text-dim);
letter-spacing: -0.005em;
text-align: center;
white-space: nowrap;
transition: color 0.3s ease;
}
/* Hover & active states, the pod pops forward */
.tool-pod:hover .pod-body,
.tool-pod.is-active .pod-body {
transform: translateY(8px) scale(1.12);
background: linear-gradient(180deg, rgba(244, 114, 182, 0.18), rgba(167, 139, 250, 0.08));
border-color: rgba(244, 114, 182, 0.6);
box-shadow:
0 18px 50px -10px rgba(244, 114, 182, 0.55),
0 0 24px rgba(167, 139, 250, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.tool-pod:hover .pod-body::before,
.tool-pod.is-active .pod-body::before { opacity: 1; }
.tool-pod:hover .pod-body .tool-icon::after,
.tool-pod.is-active .pod-body .tool-icon::after {
background: linear-gradient(135deg, #ff9ad9, #d896ff);
}
.tool-pod:hover .pod-strap,
.tool-pod.is-active .pod-strap {
height: 36px;
}
.tool-pod:hover .pod-strap::before,
.tool-pod.is-active .pod-strap::before {
background: linear-gradient(180deg, #ff9ad9, rgba(244, 114, 182, 0.4));
width: 2.5px;
}
.tool-pod:hover .pod-strap::after,
.tool-pod.is-active .pod-strap::after {
border-color: rgba(255, 154, 217, 0.95);
background: rgba(244, 114, 182, 0.18);
box-shadow:
0 0 18px rgba(244, 114, 182, 0.85),
inset 0 0 12px rgba(244, 114, 182, 0.3);
}
/* Pinned (clicked) state, slightly more permanent feel */
.tool-pod.is-pinned .pod-body {
border-color: rgba(255, 154, 217, 0.7);
box-shadow:
0 18px 50px -10px rgba(244, 114, 182, 0.55),
0 0 24px rgba(167, 139, 250, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.tool-pod.is-pinned .pod-strap::after {
border-color: rgba(255, 154, 217, 1);
box-shadow:
0 0 22px rgba(244, 114, 182, 1),
inset 0 0 12px rgba(244, 114, 182, 0.4);
}
.tool-pod:hover .pod-label,
.tool-pod.is-active .pod-label {
color: var(--text);
}
/* Info panel, floating description below the belt */
.toolbelt-info {
margin: 56px auto 0;
max-width: 580px;
padding: 28px 32px;
text-align: center;
background: linear-gradient(180deg, rgba(167, 139, 250, 0.06), rgba(167, 139, 250, 0.015));
border: 1px solid rgba(167, 139, 250, 0.22);
border-radius: 18px;
backdrop-filter: blur(10px);
position: relative;
transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.toolbelt-info::before {
content: '';
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(244, 114, 182, 0.7), rgba(167, 139, 250, 0.7), transparent);
}
.toolbelt-info.is-active {
border-color: rgba(244, 114, 182, 0.35);
background: linear-gradient(180deg, rgba(244, 114, 182, 0.07), rgba(167, 139, 250, 0.02));
box-shadow: 0 20px 50px -20px rgba(244, 114, 182, 0.4);
}
.toolbelt-info h3 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.4vw, 2rem);
font-weight: 400;
color: var(--text);
margin-bottom: 8px;
letter-spacing: -0.02em;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.toolbelt-info p {
font-family: var(--font-body);
font-size: 15px;
color: var(--text-dim);
line-height: 1.55;
margin: 0;
transition: opacity 0.25s ease;
}
.toolbelt-info.fading h3,
.toolbelt-info.fading p { opacity: 0; transform: translateY(4px); }
/* Hidden script tag for tool data */
#tool-data { display: none; }
@media (max-width: 880px) {
.toolbelt-pods { grid-template-columns: repeat(4, 1fr); gap: 24px 0; }
.toolbelt-rail { display: none; }
.pod-strap { display: none; }
.toolbelt-info { margin-top: 36px; }
}
@media (max-width: 480px) {
.toolbelt-pods { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.tool-pod, .pod-body, .pod-strap, .toolbelt-info h3, .toolbelt-info p {
transition: none;
}
.toolbelt.in-view .tool-pod { transition-delay: 0s; }
.rail-line { stroke-dashoffset: 0; }
}
/* ========== TOOLS GRID ========== */
.tool-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
perspective: 1600px;
perspective-origin: 50% 40%;
}
.tool-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 18px;
padding: 28px;
transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
transform-style: preserve-3d;
cursor: default;
will-change: transform;
}
.tool-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 18px;
padding: 1px;
background: linear-gradient(135deg, rgba(255, 154, 217, 0.6), rgba(192, 132, 252, 0.5), transparent 70%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease;
}
/* "Tool belt" pop-out effect, hovered card lifts forward in 3D, surrounding cards fade back */
.tool-card:hover {
transform: translateY(-16px) translateZ(60px) scale(1.06) rotateX(-3deg);
background: linear-gradient(180deg, rgba(167, 139, 250, 0.1), rgba(167, 139, 250, 0.03));
border-color: rgba(167, 139, 250, 0.55);
box-shadow:
0 35px 80px -15px rgba(167, 139, 250, 0.55),
0 15px 40px -10px rgba(244, 114, 182, 0.3),
0 0 0 1px rgba(167, 139, 250, 0.4) inset;
z-index: 5;
}
.tool-card:hover::before { opacity: 1; }
/* Surrounding cards de-emphasize so the hovered one truly pops */
.tool-grid:hover .tool-card:not(:hover) {
opacity: 0.5;
transform: scale(0.97);
filter: saturate(0.7);
}
/* Icon also reacts, scales up and glows */
.tool-card:hover .tool-icon {
transform: scale(1.12) rotate(-3deg);
background: linear-gradient(135deg, rgba(167, 139, 250, 0.32), rgba(244, 114, 182, 0.18));
border-color: rgba(167, 139, 250, 0.5);
box-shadow: 0 10px 24px -6px rgba(167, 139, 250, 0.45);
}
.tool-card:hover .tool-icon::after {
background: linear-gradient(135deg, #ff9ad9, #d896ff);
}
.tool-icon {
transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.tool-card,
.tool-icon,
.tool-grid:hover .tool-card:not(:hover) { transition: none; transform: none; }
.tool-card:hover { transform: translateY(-4px); }
}
.tool-icon {
width: 44px;
height: 44px;
border-radius: 11px;
background: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(236, 72, 153, 0.08));
border: 1px solid rgba(167, 139, 250, 0.25);
margin-bottom: 18px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.tool-icon::after {
content: '';
width: 20px;
height: 20px;
background: var(--accent);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.tool-icon[data-icon="create"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.tool-icon[data-icon="train"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.tool-icon[data-icon="library"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.tool-icon[data-icon="keybpm"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.tool-icon[data-icon="noise"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.tool-icon[data-icon="stems"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.tool-icon[data-icon="master"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.tool-icon[data-icon="convert"]::after { -webkit-mask:url("data:image/svg+xml;utf8,"); mask:url("data:image/svg+xml;utf8,"); }
.tool-card h3 { margin-bottom: 8px; }
.tool-card p {
font-family: var(--font-body);
color: var(--text-dim);
font-size: 14.5px;
line-height: 1.6;
}
/* ========== PRICING ========== */
.tools-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
max-width: 720px;
margin: 0 auto 60px;
}
.split-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 18px;
padding: 24px;
backdrop-filter: blur(10px);
}
.split-tag {
display: inline-block;
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 100px;
margin-bottom: 18px;
}
.split-tag.free {
background: rgba(34, 197, 94, 0.12);
color: #4ade80;
border: 1px solid rgba(34, 197, 94, 0.3);
}
.split-tag.paid {
background: rgba(167, 139, 250, 0.12);
color: var(--accent);
border: 1px solid rgba(167, 139, 250, 0.3);
}
.split-card ul {
display: flex;
flex-direction: column;
gap: 8px;
font-family: var(--font-body);
}
.split-card li {
font-size: 15px;
color: var(--text);
padding-left: 22px;
position: relative;
}
.split-card li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 14px;
height: 2px;
background: var(--accent);
border-radius: 2px;
}
.plan-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.plan-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 20px;
padding: 32px 28px;
position: relative;
display: flex;
flex-direction: column;
backdrop-filter: blur(10px);
}
.plan-card.featured {
background: linear-gradient(180deg, rgba(167, 139, 250, 0.18), rgba(167, 139, 250, 0.04));
border-color: rgba(167, 139, 250, 0.45);
transform: translateY(-8px);
box-shadow:
0 30px 80px -20px rgba(167, 139, 250, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.plan-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
background: linear-gradient(135deg, var(--accent), var(--accent-pink));
color: white;
padding: 5px 14px;
border-radius: 100px;
box-shadow: 0 6px 16px rgba(167, 139, 250, 0.5);
}
.plan-name {
font-family: var(--font-body);
font-size: 16px;
font-weight: 600;
color: var(--text-dim);
margin-bottom: 8px;
}
.plan-price {
font-family: var(--font-display);
font-size: 60px;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 8px;
color: var(--text);
}
.plan-price small {
display: block;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--text-mute);
margin-top: 6px;
letter-spacing: 0;
}
.plan-soon {
display: block;
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 500;
color: var(--text-dim);
line-height: 1.45;
letter-spacing: 0.005em;
padding: 6px 0;
}
.plan-tag {
font-family: var(--font-body);
font-size: 14px;
color: var(--text-dim);
line-height: 1.55;
margin-bottom: 24px;
}
.plan-features {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px 0;
border-top: 1px solid var(--border);
font-family: var(--font-body);
}
.plan-features li {
font-size: 14px;
color: var(--text);
padding-left: 22px;
position: relative;
}
.plan-features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--accent);
font-weight: 700;
}
.plan-features li.free::before {
content: '✓';
color: #4ade80;
}
.plan-features li.paid::before {
content: '✦';
color: var(--accent);
text-shadow: 0 0 8px rgba(167, 139, 250, 0.6);
}
/* Pricing legend (replaces the old tools-split categorization box) */
.pricing-legend {
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
margin: 0 auto 40px;
flex-wrap: wrap;
}
.legend-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--text-dim);
letter-spacing: 0.01em;
}
.legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
.legend-free .legend-dot {
background: #4ade80;
box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}
.legend-paid .legend-dot {
background: var(--accent);
box-shadow: 0 0 8px rgba(167, 139, 250, 0.6);
}
.fine-print {
font-family: var(--font-body);
font-size: 13px;
color: var(--text-mute);
text-align: center;
margin-top: 24px;
}
/* ========== ROADMAP ========== */
.phase-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: stretch;
gap: 20px;
position: relative;
padding-top: 56px;
}
/* Subtle timeline track, a thin gradient hairline across the top of the cards.
Apple-style: present and ordered, never demanding attention. */
.phase-grid::before {
content: '';
position: absolute;
top: 28px;
left: calc(16.6% - 4px);
right: calc(16.6% - 4px);
height: 1px;
background: linear-gradient(
90deg,
rgba(244, 114, 182, 0.55) 0%,
rgba(216, 150, 255, 0.35) 50%,
rgba(167, 139, 250, 0.18) 100%
);
border-radius: 1px;
z-index: 0;
}
.phase-card {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005));
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 22px;
padding: 32px 30px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
position: relative;
/* Equal-height cards: flex column with bullet list claiming the leftover space */
display: flex;
flex-direction: column;
min-height: 100%;
}
/* Tiny node where each card meets the rail, smaller, more refined */
.phase-card::before {
content: '';
position: absolute;
top: -32px;
left: 50%;
transform: translateX(-50%);
width: 7px;
height: 28px;
border-radius: 100px;
z-index: 2;
background: linear-gradient(180deg, rgba(216, 150, 255, 0.5), rgba(167, 139, 250, 0.15));
border: 1px solid rgba(216, 150, 255, 0.22);
}
/* Active (Phase 1) node, pink, glowing, but tasteful */
.phase-card.phase-1::before {
background: linear-gradient(180deg, #ff9ad9 0%, #d896ff 100%);
border-color: rgba(255, 154, 217, 0.55);
box-shadow:
0 0 0 3px rgba(244, 114, 182, 0.12),
0 0 14px rgba(244, 114, 182, 0.6);
}
.phase-card.phase-2::before {
background: linear-gradient(180deg, rgba(216, 150, 255, 0.55), rgba(192, 132, 252, 0.2));
border-color: rgba(216, 150, 255, 0.30);
}
.phase-card.phase-3::before {
background: linear-gradient(180deg, rgba(167, 139, 250, 0.35), rgba(167, 139, 250, 0.10));
border-color: rgba(167, 139, 250, 0.18);
}
@media (max-width: 960px) {
.phase-grid { padding-top: 0; }
.phase-grid::before,
.phase-grid::after { display: none; }
.phase-card::before { display: none; }
}
.phase-num {
display: inline-flex;
align-items: center;
align-self: flex-start;
font-family: var(--font-body);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 100px;
margin-bottom: 22px;
}
.phase-1 .phase-num {
background: rgba(244, 114, 182, 0.10);
color: #ff9ad9;
border: 1px solid rgba(244, 114, 182, 0.30);
}
/* ===== "We are here", animated glow on the current phase card ===== */
@property --glow-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
.phase-card.current {
position: relative;
isolation: isolate;
border-color: rgba(255, 154, 217, 0.28);
background:
radial-gradient(
120% 90% at 0% 0%,
rgba(244, 114, 182, 0.08) 0%,
rgba(216, 150, 255, 0.04) 30%,
transparent 65%
),
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
box-shadow:
0 0 0 1px rgba(255, 154, 217, 0.05) inset,
0 30px 80px -40px rgba(244, 114, 182, 0.35);
}
.phase-card.current .phase-num,
.phase-card.current h3,
.phase-card.current .phase-desc,
.phase-card.current .phase-body,
.phase-card.current ul {
position: relative;
z-index: 1;
}
/* "Live now" pill, refined, smaller, Apple-like */
.phase-here {
position: absolute;
top: -12px;
left: 24px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
background: rgba(20, 12, 36, 0.95);
border: 1px solid rgba(167, 139, 250, 0.45);
border-radius: 100px;
box-shadow: 0 4px 14px rgba(167, 139, 250, 0.25);
z-index: 2;
white-space: nowrap;
backdrop-filter: blur(10px);
}
.phase-here-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #ff4d9e;
box-shadow: 0 0 0 3px rgba(255, 77, 158, 0.25), 0 0 14px rgba(255, 77, 158, 1);
animation: live-blink 1.3s ease-in-out infinite;
}
/* Recording-light style blink, vivid electric pink */
@keyframes live-blink {
0%, 100% {
background: #ff4d9e;
box-shadow:
0 0 0 3px rgba(255, 77, 158, 0.3),
0 0 16px rgba(255, 77, 158, 1),
0 0 28px rgba(255, 154, 217, 0.6);
opacity: 1;
transform: scale(1);
}
50% {
background: rgba(255, 77, 158, 0.25);
box-shadow:
0 0 0 1px rgba(255, 77, 158, 0.1),
0 0 2px rgba(255, 77, 158, 0.3);
opacity: 0.35;
transform: scale(0.85);
}
}
/* Boost the badge container itself when it surrounds the live dot */
.phase-here {
color: #ff9ad9;
border-color: rgba(255, 77, 158, 0.55);
box-shadow: 0 0 18px rgba(255, 77, 158, 0.28);
}
/* Phase 1: two-column bullet list for less text-heavy feel */
.phase-list.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 22px;
/* override the column flex from .phase-list so we lay out as grid */
flex: 1;
}
@media (max-width: 1100px) {
.phase-list.two-col { grid-template-columns: 1fr; }
}
/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
.phase-card.current::after { animation: none; }
.phase-here-dot { animation: none; }
}
.phase-2 .phase-num {
background: rgba(216, 150, 255, 0.08);
color: #d896ff;
border: 1px solid rgba(216, 150, 255, 0.22);
}
.phase-3 .phase-num {
background: rgba(167, 139, 250, 0.06);
color: rgba(192, 168, 255, 0.85);
border: 1px solid rgba(167, 139, 250, 0.18);
}
/* Title: bold and gradient, but allowed to wrap on long phase names */
.phase-card h3 {
font-family: var(--font-body);
font-size: clamp(20px, 1.7vw, 24px);
font-weight: 700;
margin: 0 0 12px;
letter-spacing: -0.02em;
line-height: 1.18;
background: linear-gradient(135deg, #ff9ad9 0%, #d896ff 55%, #b387ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Active card title gets a subtle glow */
.phase-1 h3 { filter: drop-shadow(0 0 14px rgba(244, 114, 182, 0.25)); }
.phase-desc {
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
color: var(--text);
margin: 0 0 14px;
letter-spacing: -0.005em;
}
.phase-body {
font-family: var(--font-body);
font-size: 14.5px;
color: var(--text-dim);
line-height: 1.6;
margin: 0 0 24px;
}
/* Core message callout — the short, quotable line under the phase body */
.phase-core {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.55;
color: var(--text);
margin: -8px 0 22px;
padding: 12px 14px;
border-left: 2px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.03);
border-radius: 0 8px 8px 0;
letter-spacing: -0.005em;
}
.phase-core strong {
color: #fff;
font-weight: 600;
}
.phase-1 .phase-core {
border-left-color: rgba(255, 154, 217, 0.55);
background: linear-gradient(90deg, rgba(255, 154, 217, 0.08), rgba(179, 135, 255, 0.04));
}
.phase-2 .phase-core {
border-left-color: rgba(179, 135, 255, 0.45);
background: linear-gradient(90deg, rgba(179, 135, 255, 0.07), rgba(120, 160, 255, 0.03));
}
/* Subtle hairline divider between intro copy and feature list */
.phase-divider {
height: 1px;
border-radius: 1px;
margin: 4px 0 22px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10) 50%, transparent);
}
.phase-1 .phase-divider {
background: linear-gradient(90deg, transparent, rgba(255, 154, 217, 0.30) 50%, transparent);
}
/* Tagline that ties the three phases together — sits below the phase grid */
.roadmap-tagline {
margin: 56px auto 0;
max-width: 820px;
text-align: center;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
color: var(--text-dim);
letter-spacing: -0.005em;
}
.roadmap-tagline strong {
color: var(--text);
font-weight: 600;
}
.roadmap-tagline-emph {
display: block;
margin-top: 14px;
font-size: 15.5px;
font-weight: 600;
letter-spacing: -0.01em;
background: linear-gradient(135deg, #ff9ad9 0%, #d896ff 55%, #b387ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
@media (max-width: 768px) {
.roadmap-tagline {
margin-top: 36px;
font-size: 15px;
padding: 0 4px;
}
.roadmap-tagline-emph {
font-size: 14.5px;
}
}
.phase-card .phase-list {
display: flex;
flex-direction: column;
gap: 11px;
margin: 0;
padding: 0;
list-style: none;
font-family: var(--font-body);
flex: 1; /* push bullets to fill remaining card height, keeps all cards same height */
}
.phase-card .phase-list li {
font-size: 14px;
color: var(--text-dim);
padding-left: 18px;
position: relative;
letter-spacing: -0.003em;
cursor: default;
transition: transform 0.25s ease;
}
/* Per-item hover: animated gradient sweep on the hovered line */
.phase-card .phase-list li:hover {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
animation: phase-grad-sweep 2.4s linear infinite;
transform: translateX(2px);
}
.phase-card .phase-list li:hover::before {
transform: scaleX(1.6);
transform-origin: left center;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.phase-1 .phase-list li:hover {
background-image: linear-gradient(90deg, #ff9ad9, #f472b6, #ec4899, #f472b6, #ff9ad9);
}
.phase-1 .phase-list li:hover::before {
background: #ffb3e1;
box-shadow: 0 0 10px rgba(255, 154, 217, 0.95), 0 0 20px rgba(244, 114, 182, 0.6);
}
.phase-2 .phase-list li:hover {
background-image: linear-gradient(90deg, #e0b3ff, #c084fc, #a855f7, #c084fc, #e0b3ff);
}
.phase-2 .phase-list li:hover::before {
background: #d896ff;
box-shadow: 0 0 10px rgba(216, 150, 255, 0.95), 0 0 20px rgba(168, 85, 247, 0.55);
}
.phase-3 .phase-list li:hover {
background-image: linear-gradient(90deg, #c4b5fd, #a78bfa, #818cf8, #a78bfa, #c4b5fd);
}
.phase-3 .phase-list li:hover::before {
background: #c4b5fd;
box-shadow: 0 0 10px rgba(167, 139, 250, 0.9), 0 0 20px rgba(129, 140, 248, 0.5);
}
@keyframes phase-grad-sweep {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.phase-card .phase-list li:hover { animation: none; }
}
.phase-card .phase-list li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 8px;
height: 1.5px;
border-radius: 2px;
}
.phase-1 .phase-list li::before { background: #ff9ad9; box-shadow: 0 0 6px rgba(244, 114, 182, 0.45); }
.phase-2 .phase-list li::before { background: rgba(216, 150, 255, 0.85); }
.phase-3 .phase-list li::before { background: rgba(167, 139, 250, 0.65); }
/* Highlighted roadmap item — glowing text + brighter dash */
.phase-card .phase-list li.phase-glow {
color: #ffd9f0;
font-weight: 600;
text-shadow:
0 0 6px rgba(255, 154, 217, 0.65),
0 0 14px rgba(244, 114, 182, 0.45),
0 0 28px rgba(244, 114, 182, 0.25);
animation: phase-glow-pulse 2.8s ease-in-out infinite;
}
.phase-card .phase-list li.phase-glow::before {
background: #ffb3e1;
box-shadow:
0 0 8px rgba(255, 154, 217, 0.9),
0 0 16px rgba(244, 114, 182, 0.6);
}
@keyframes phase-glow-pulse {
0%, 100% {
text-shadow:
0 0 6px rgba(255, 154, 217, 0.65),
0 0 14px rgba(244, 114, 182, 0.45),
0 0 28px rgba(244, 114, 182, 0.25);
}
50% {
text-shadow:
0 0 10px rgba(255, 154, 217, 0.9),
0 0 22px rgba(244, 114, 182, 0.65),
0 0 38px rgba(244, 114, 182, 0.4);
}
}
@media (prefers-reduced-motion: reduce) {
.phase-card .phase-list li.phase-glow { animation: none; }
}
/* ========== FINAL CTA ========== */
.final-cta { padding-top: 80px; }
.final-card {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(167, 139, 250, 0.06));
border: 1px solid var(--border-strong);
border-radius: 28px;
padding: 64px 48px;
text-align: center;
position: relative;
overflow: hidden;
backdrop-filter: blur(20px);
}
.final-card::before {
content: '';
position: absolute;
top: -40%;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 100%;
background: radial-gradient(ellipse at top, rgba(167, 139, 250, 0.35), transparent 65%);
pointer-events: none;
}
.final-card > * { position: relative; z-index: 1; }
.final-card .hero-cta { margin-top: 36px; margin-bottom: 0; justify-content: center; }
.final-headline {
font-family: var(--font-display);
font-size: clamp(2.25rem, 4.4vw, 3.75rem);
line-height: 1.05;
letter-spacing: -0.025em;
max-width: 820px;
margin: 0 auto 20px;
color: var(--text);
font-weight: 400;
}
.final-headline em {
font-style: italic;
background: linear-gradient(135deg, #c4a7ff 0%, #d896ff 35%, #f078d1 65%, #ff9ad9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 0 24px rgba(192, 132, 252, 0.45)) drop-shadow(0 0 60px rgba(236, 72, 153, 0.25));
}
.final-sub {
font-family: var(--font-body);
font-size: 17px;
color: rgba(255, 255, 255, 0.82);
line-height: 1.55;
max-width: 640px;
margin: 0 auto;
letter-spacing: -0.005em;
}
/* Trust row, 3 quick value points under the buttons */
.trust-row {
display: flex;
justify-content: center;
align-items: center;
gap: 0;
margin: 28px auto 0;
padding: 0;
list-style: none;
flex-wrap: wrap;
}
.trust-row li {
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 500;
color: var(--text-dim);
padding: 0 18px;
position: relative;
letter-spacing: 0.01em;
}
.trust-row li + li::before {
content: '';
position: absolute;
left: -1px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(167, 139, 250, 0.6);
}
@media (max-width: 600px) {
.trust-row { gap: 4px 0; }
.trust-row li { font-size: 12.5px; padding: 0 12px; }
}
/* Override waitlist form button to be accent purple (not white) so download is the primary CTA */
.final-card .waitlist-form button {
background: var(--accent);
color: white;
box-shadow: 0 6px 18px rgba(167, 139, 250, 0.4);
}
.final-card .waitlist-form button:hover {
background: #b894fa;
box-shadow: 0 10px 24px rgba(167, 139, 250, 0.55);
}
.final-icon {
display: flex;
justify-content: center;
margin-bottom: 28px;
filter: drop-shadow(0 12px 24px rgba(167, 139, 250, 0.4));
}
.waitlist-form {
display: flex;
gap: 8px;
max-width: 460px;
margin: 32px auto 12px;
}
.waitlist-form input {
flex: 1;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--border-strong);
border-radius: 100px;
padding: 12px 20px;
font-family: var(--font-body);
font-size: 14.5px;
color: var(--text);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.waitlist-form input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18);
}
.waitlist-form input::placeholder { color: var(--text-mute); }
.waitlist-form button {
background: var(--text);
color: var(--bg-deep);
border: none;
padding: 12px 22px;
border-radius: 100px;
font-family: var(--font-body);
font-weight: 600;
font-size: 14.5px;
cursor: pointer;
transition: transform 0.2s, opacity 0.2s;
}
.waitlist-form button:hover { transform: translateY(-1px); opacity: 0.9; }
.meta {
font-family: var(--font-body);
font-size: 13px;
color: var(--text-mute);
margin-top: 6px;
}
/* Install note */
.install-note {
margin: 60px auto 0;
max-width: 620px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 18px;
padding: 28px;
text-align: left;
backdrop-filter: blur(10px);
}
.note-tag {
display: inline-block;
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
padding: 4px 10px;
background: rgba(167, 139, 250, 0.12);
border: 1px solid rgba(167, 139, 250, 0.25);
border-radius: 6px;
margin-bottom: 14px;
}
.install-note p {
font-family: var(--font-body);
color: var(--text-dim);
font-size: 14.5px;
line-height: 1.6;
margin-bottom: 14px;
}
.install-note strong { color: var(--text); font-weight: 600; }
.code-block {
position: relative;
background: rgba(0, 0, 0, 0.4);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 18px;
font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
font-size: 13px;
color: #e4e4e7;
overflow-x: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.code-block code { flex: 1; white-space: nowrap; }
.copy-btn {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
}
.copy-btn:hover { color: white; border-color: rgba(255, 255, 255, 0.35); }
.copy-btn.copied {
color: #4ade80;
border-color: rgba(74, 222, 128, 0.5);
background: rgba(74, 222, 128, 0.1);
}
.positioning-final {
text-align: center;
font-family: var(--font-display);
font-size: 22px;
font-style: italic;
color: var(--text-dim);
line-height: 1.5;
max-width: 720px;
margin: 60px auto 0;
letter-spacing: -0.01em;
}
/* ========== FOOTER ========== */
.footer {
border-top: 1px solid var(--border);
padding: 64px 48px 28px;
margin-top: 0;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(10px);
}
.footer-inner {
max-width: 1480px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 56px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 48px;
align-items: start;
}
/* --- Left column: wordmark + status + tagline + CTA --- */
.footer-left {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.footer-wordmark {
display: inline-flex;
align-items: center;
margin-bottom: -8px;
}
.footer .brand-wordmark-img {
height: 96px;
margin: -18px 0;
}
.footer-status {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 13px;
color: var(--text-mute);
letter-spacing: 0.02em;
}
.footer-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: hsl(140, 75%, 60%);
box-shadow: 0 0 8px hsla(140, 75%, 60%, 0.6);
}
.footer-tagline {
font-family: var(--font-display);
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.1;
font-weight: 500;
color: var(--text);
margin: 4px 0 8px;
letter-spacing: -0.02em;
}
.footer-tagline em {
font-style: italic;
color: var(--accent-2);
}
.footer-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
background: var(--text);
color: var(--bg-deep);
border-radius: 100px;
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 8px 24px rgba(255, 255, 255, 0.08);
}
.footer-cta:hover {
transform: translateY(-1px);
box-shadow: 0 12px 32px rgba(255, 255, 255, 0.18);
color: var(--bg-deep);
}
.footer-cta-spark {
font-size: 14px;
line-height: 1;
}
/* --- Right column: 3 link columns --- */
.footer-right {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
padding-top: 8px;
}
.footer-col {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-col-title {
font-family: var(--font-body);
font-size: 13px;
color: var(--text-mute);
letter-spacing: 0.04em;
margin-bottom: 6px;
}
.footer-col a {
font-family: var(--font-body);
font-size: 15px;
color: var(--text-dim);
transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--text); }
/* --- Bottom row: copyright + sub-brand + legal --- */
.footer-bottom {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
padding-top: 24px;
border-top: 1px solid var(--border-soft);
}
.footer-copyright {
font-family: var(--font-body);
font-size: 12px;
color: var(--text-mute);
letter-spacing: 0.06em;
line-height: 1.5;
}
.footer-audio-mark {
display: inline-flex;
justify-content: center;
align-items: center;
}
.footer-audio-img {
height: 70px;
width: auto;
display: block;
object-fit: contain;
margin: -12px 0;
opacity: 0.85;
transition: opacity 0.2s ease;
}
.footer-audio-mark:hover .footer-audio-img { opacity: 1; }
.footer-legal {
display: flex;
justify-content: flex-end;
gap: 28px;
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.06em;
}
.footer-legal a {
color: var(--text-mute);
transition: color 0.2s ease;
}
.footer-legal a:hover { color: var(--text); }
/* --- Responsive --- */
@media (max-width: 1100px) {
.footer { padding: 48px 32px 24px; }
.footer-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-right { padding-top: 0; }
}
@media (max-width: 768px) {
.footer { padding: 28px 18px 18px; }
.footer-inner { gap: 22px; }
.footer .brand-wordmark-img { height: 52px; margin: -8px 0; }
.footer-left { gap: 10px; align-items: center; text-align: center; }
.footer-status { font-size: 11px; }
.footer-tagline { font-size: 17px !important; margin: 2px 0 4px; line-height: 1.2 !important; }
.footer-cta {
padding: 10px 20px;
font-size: 13px;
gap: 8px;
}
.footer-cta-spark { font-size: 12px; }
/* Three compact link columns instead of stacking into a long list.
Centered contents to match the centered .footer-left and bottom rows. */
.footer-right {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px 10px;
padding-top: 0;
max-width: 320px;
margin: 0 auto;
width: 100%;
}
.footer-col {
gap: 6px;
align-items: center;
text-align: center;
}
.footer-col-title {
font-size: 10px;
margin-bottom: 2px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.footer-col a { font-size: 12px; }
/* The BMC inside the Connect column is replaced by a centered pill at
the very bottom of the footer on mobile. */
.footer-col .bmc-link { display: none; }
.footer-bottom {
grid-template-columns: 1fr;
text-align: center;
gap: 10px;
padding-top: 14px;
}
.footer-copyright { font-size: 10.5px; letter-spacing: 0.05em; }
.footer-legal { justify-content: center; gap: 18px; font-size: 10.5px; }
.footer-audio-img { height: 40px; margin: -6px 0; }
}
@media (max-width: 480px) {
/* Keep the 3 columns but allow them to wrap if the labels are too long */
.footer-right { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.footer-col a { font-size: 11.5px; }
}
.bmc-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: linear-gradient(135deg, #ffd966, #ffb347);
color: #2a1a05 !important;
border-radius: 100px;
font-weight: 600;
font-size: 13px;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 12px rgba(255, 179, 71, 0.25);
}
/* Mobile-only BMC pill at the very bottom of the footer. Hidden on desktop
because the same link lives inside the Connect column there. */
.footer-bmc-row { display: none; }
@media (max-width: 768px) {
.footer-bmc-row {
display: flex;
justify-content: center;
padding-top: 4px;
}
.footer-bmc-row .bmc-link {
padding: 5px 12px;
font-size: 11.5px;
gap: 5px;
}
.footer-bmc-row .bmc-icon { font-size: 12px; }
}
.bmc-link:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(255, 179, 71, 0.4);
color: #2a1a05 !important;
}
.bmc-icon {
font-size: 14px;
line-height: 1;
}
/* ========== RESPONSIVE ========== */
@media (max-width: 1100px) {
.voice-grid { grid-template-columns: repeat(4, 1fr); }
.voice-card:nth-child(5) { display: none; }
}
@media (max-width: 960px) {
.plan-grid, .phase-grid { grid-template-columns: 1fr; }
.plan-card.featured { transform: none; }
.dash-sidebar { width: 150px; }
.voice-grid { grid-template-columns: repeat(3, 1fr); }
.voice-card:nth-child(n+4) { display: none; }
}
@media (max-width: 768px) {
.nav { padding: 14px 18px; }
.nav-links { gap: 14px; font-size: 13px; }
.nav-links a:not(.nav-cta) { display: none; }
.section { padding: 60px 0; }
.container, .container.narrow { padding: 0 18px; }
/* ── HERO, feels like a shrunk-down desktop version, dashboard visible
near the fold instead of three screens away. ──────────────────────── */
/* Drop the desktop 100vh floor on mobile. Without this, the hero forces
a full viewport of height even when the content (headline + subhead +
CTAs + dashboard image) is shorter than that, creating a big dark
gap between the hero image and the next section. */
.hero {
padding: 10px 14px 0;
min-height: auto;
}
/* Headline: was 2.75rem (≈44px) which forced 5 lines on a 375px screen.
Now ≈1.75rem so the whole thing fits in 3 short lines. */
h1, .hero-headline {
font-size: 1.75rem !important;
line-height: 1.1 !important;
letter-spacing: -0.02em;
margin-bottom: 14px !important;
}
h2 { font-size: 1.85rem !important; }
.hero-sub {
font-size: 13.5px;
line-height: 1.55;
margin-bottom: 18px;
}
.hero-tagline {
font-size: 18px;
margin-bottom: 18px;
}
/* #4, Mac and Windows download buttons SIDE BY SIDE on mobile.
Use CSS Grid for the top row so both buttons get exact 50/50 columns
regardless of label width, the previous flex-basis approach was
blocked by .btn's `white-space: nowrap`, which made "Download for
Windows" demand more than its 50% basis and wrap onto its own line. */
.hero-cta {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
gap: 8px;
align-items: stretch;
margin-bottom: 8px;
}
.hero-cta .btn {
width: 100%;
min-width: 0;
padding: 11px 8px;
font-size: 12.5px;
gap: 5px;
letter-spacing: -0.005em;
}
.hero-cta .btn svg { width: 13px; height: 13px; flex-shrink: 0; }
/* "Join the beta" spans both columns on its own row below. Keyed by
href (not by .btn-ghost) because the OS-aware JS in script.js demotes
the non-current-OS download button to .btn-ghost on page load. */
.hero-cta a[href="#waitlist"] {
grid-column: 1 / -1;
padding: 9px 14px;
font-size: 13px;
}
.btn-play { width: 44px; align-self: center; }
/* #3, version meta line: smaller font, no wrap, tighter gap. */
.dl-note {
font-size: 11px;
margin-top: 6px;
margin-bottom: 10px;
letter-spacing: 0.005em;
}
/* #3 (cont.), "Private by default • Local-first workflow ..." pills:
smaller font, tighter horizontal padding so they fit in one row. */
.trust-row { margin-top: 12px; gap: 0; row-gap: 4px; }
.trust-row li { font-size: 11px; padding: 0 9px; letter-spacing: 0; }
/* Pull the hero image up so a glimpse of it shows above the fold.
Negative margin overlaps the wrapper's transparent wallpaper-area with
the trust pills above — only the empty top portion of the PNG sits
under the pills, the actual app window visually rises closer to the
text. Adjust if the PNG crop ever changes. */
.hero-image { margin-top: -50px; }
/* Bottom fade — blends the bottom of the hero (purple aurora + library
image edge) into the page's deep background so there's no hard seam
between the hero and the next section on mobile. */
.hero::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 180px;
pointer-events: none;
z-index: 2;
background: linear-gradient(180deg, transparent 0%, var(--bg-deep) 90%);
}
.dashboard-glass { padding: 6px; }
.dash-body { min-height: 380px; }
.dash-sidebar { display: none; }
.dash-main { padding: 14px; }
.voice-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.voice-avatar { width: 48px; height: 48px; font-size: 14px; }
.problem-list { grid-template-columns: 1fr; }
.tools-split { grid-template-columns: 1fr; }
.final-card { padding: 44px 24px; }
.waitlist-form { flex-direction: column; }
.waitlist-form button { width: 100%; }
}
/* Extra tightening for the very narrowest phones (iPhone SE @ 375px). */
@media (max-width: 400px) {
h1, .hero-headline { font-size: 1.55rem !important; }
.hero-sub { font-size: 13px; }
.hero-cta .btn { font-size: 12.5px; padding: 10px 6px; gap: 4px; }
.hero-cta .btn svg { width: 13px; height: 13px; }
.dl-note { font-size: 10.5px; }
.trust-row li { font-size: 10.5px; padding: 0 7px; }
}
/* ========== SCROLL-TRIGGERED FINAL CTA POPUP ========== */
.scroll-popup {
position: fixed;
bottom: 21px;
right: 21px;
z-index: 200;
width: min(546px, calc(100vw - 32px));
opacity: 0;
transform: translateY(20px) scale(0.96);
transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
display: block;
}
.scroll-popup[hidden] {
display: none;
}
.scroll-popup.is-open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.scroll-popup-card {
position: relative;
background: linear-gradient(180deg, rgba(28, 18, 56, 0.96), rgba(18, 10, 38, 0.96));
border: 1px solid var(--border-strong);
border-radius: 18px;
padding: 36px 31px 27px;
text-align: center;
/* Soft drop-shadow only, no extra ::before radial gradient.
The previous version had a 90%-wide rectangular pseudo with a radial
gradient inside it; the rectangle's edges read as a hard glow cutoff
during the popup's entry animation. The box-shadow alone fades
perfectly into the page background. */
box-shadow:
0 30px 70px -16px rgba(0, 0, 0, 0.65),
0 0 60px -10px rgba(167, 139, 250, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.scroll-popup-card > * { position: relative; z-index: 1; }
.scroll-popup-close {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.05);
color: var(--text-dim);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
transition: all 0.2s;
}
.scroll-popup-close:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.1);
}
.scroll-popup-close svg { width: 12px; height: 12px; }
.scroll-popup .hero-badge {
font-size: 11px;
padding: 5px 13px;
margin-bottom: 18px;
}
.scroll-popup .final-headline {
font-size: clamp(1.45rem, 2.2vw, 1.95rem) !important;
line-height: 1.08;
margin-bottom: 14px;
}
.scroll-popup .final-sub {
font-size: 13px !important;
line-height: 1.5;
margin-bottom: 21px;
}
.scroll-popup .hero-cta {
flex-direction: column;
gap: 9px;
margin-bottom: 17px;
margin-top: 0;
}
.scroll-popup .hero-cta .btn {
width: 100%;
padding: 12px 17px;
font-size: 13px;
}
.scroll-popup .waitlist-form {
margin: 0 0 9px;
max-width: none;
gap: 8px;
}
.scroll-popup .waitlist-form input {
padding: 12px 14px;
font-size: 13px;
}
.scroll-popup .waitlist-form button {
padding: 12px 18px;
font-size: 13px;
background: var(--accent);
color: white;
box-shadow: 0 4px 14px rgba(167, 139, 250, 0.4);
}
.scroll-popup .meta {
font-size: 11px;
margin-top: 7px;
}
@media (max-width: 480px) {
.scroll-popup {
bottom: 12px;
right: 12px;
left: 12px;
width: auto;
}
.scroll-popup .hero-cta { flex-direction: column; }
}
/* ========== DOWNLOAD GATE MODAL ========== */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(8, 5, 24, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
/* When hidden, fully remove from layout so backdrop-filter doesn't keep
blurring the entire viewport (some browsers/screenshot engines still
render filters on opacity:0 elements). */
.modal-overlay[hidden] {
display: none;
}
.modal-overlay:not([hidden]) {
opacity: 1;
pointer-events: auto;
}
.modal-card {
position: relative;
width: 100%;
max-width: 460px;
background: linear-gradient(180deg, rgba(28, 18, 56, 0.95), rgba(18, 10, 38, 0.95));
border: 1px solid var(--border-strong);
border-radius: 24px;
padding: 44px 36px 32px;
text-align: center;
box-shadow:
0 50px 100px -20px rgba(0, 0, 0, 0.7),
0 0 60px rgba(167, 139, 250, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transform: translateY(20px) scale(0.96);
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-overlay:not([hidden]) .modal-card {
opacity: 1;
transform: translateY(0) scale(1);
}
.modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.05);
color: var(--text-dim);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.modal-close:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.25);
}
.modal-close svg {
width: 14px;
height: 14px;
}
.modal-icon {
display: flex;
justify-content: center;
margin-bottom: 22px;
filter: drop-shadow(0 10px 24px rgba(167, 139, 250, 0.45));
}
.modal-card h3 {
font-family: var(--font-display);
font-size: 30px;
font-weight: 400;
color: var(--text);
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 10px;
}
.modal-sub {
font-family: var(--font-body);
font-size: 14.5px;
color: var(--text-dim);
line-height: 1.55;
margin-bottom: 22px;
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
.modal-form {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.modal-form input {
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--border-strong);
border-radius: 100px;
padding: 13px 22px;
font-family: var(--font-body);
font-size: 14.5px;
color: var(--text);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
text-align: center;
}
.modal-form input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18);
}
.modal-form input::placeholder { color: var(--text-mute); }
.modal-form button {
background: var(--text);
color: var(--bg-deep);
border: none;
padding: 13px 22px;
border-radius: 100px;
font-family: var(--font-body);
font-weight: 600;
font-size: 14.5px;
cursor: pointer;
transition: transform 0.2s, opacity 0.2s;
}
.modal-form button:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(167, 139, 250, 0.4);
}
.modal-form button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.modal-fine {
font-family: var(--font-body);
font-size: 12px;
color: var(--text-mute);
line-height: 1.5;
max-width: 320px;
margin: 0 auto;
}
/* Success state */
.modal-state.success {
text-align: center;
}
.modal-state.success .success-check {
width: 64px;
height: 64px;
margin: 0 auto 24px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(74, 222, 128, 0.05));
border: 2px solid rgba(74, 222, 128, 0.5);
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: #4ade80;
font-weight: 700;
}
.modal-state.success .btn {
width: 100%;
margin-top: 20px;
}
@media (max-width: 480px) {
.modal-card {
padding: 36px 24px 24px;
}
.modal-card h3 {
font-size: 26px;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto; }
.animate-up { opacity: 1; transform: none; }
}
/* ============================================================
SUBPAGE LAYOUT, used by /feedback, /support, /press, /privacy,
/terms, /updates, /affiliate.
============================================================ */
/* Compact hero for subpages, sits right below the nav with a soft halo */
.subpage-hero {
position: relative;
padding: 96px 0 56px;
text-align: center;
}
.subpage-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(60% 50% at 50% 0%, rgba(167, 139, 250, 0.18), transparent 70%);
pointer-events: none;
z-index: -1;
}
.subpage-hero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 14px;
border-radius: 100px;
border: 1px solid rgba(255, 154, 217, 0.45);
background: rgba(20, 12, 36, 0.7);
color: #ff9ad9;
font-family: var(--font-body);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 22px;
}
.subpage-hero h1 {
font-family: var(--font-display);
font-size: clamp(2.2rem, 5vw, 3.6rem);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.05;
margin: 0 0 18px;
}
.subpage-hero h1 em {
font-style: italic;
background: linear-gradient(135deg, #c4a7ff 0%, #d896ff 50%, #ff9ad9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 14px rgba(192, 132, 252, 0.35));
}
.subpage-hero p.lede {
font-family: var(--font-body);
font-size: 16px;
color: var(--text-dim);
max-width: 640px;
margin: 0 auto;
line-height: 1.55;
}
/* Content container, narrower than the marketing sections */
.subpage-content {
padding: 12px 0 120px;
}
.subpage-section {
max-width: 720px;
margin: 0 auto;
padding: 0 28px;
}
.subpage-section + .subpage-section { margin-top: 64px; }
.subpage-section h2 {
font-family: var(--font-display);
font-size: clamp(1.6rem, 2.5vw, 2.1rem);
font-weight: 400;
letter-spacing: -0.015em;
margin: 0 0 18px;
}
.subpage-section h3 {
font-family: var(--font-body);
font-size: 17px;
font-weight: 700;
color: var(--text);
margin: 28px 0 10px;
}
.subpage-section p,
.subpage-section li {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.65;
color: var(--text-dim);
}
.subpage-section ul, .subpage-section ol {
padding-left: 20px;
margin: 12px 0;
}
.subpage-section li + li { margin-top: 6px; }
.subpage-section a { color: #ff9ad9; text-decoration: none; border-bottom: 1px dashed rgba(255, 154, 217, 0.4); }
.subpage-section a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.6); }
.subpage-section strong { color: var(--text); font-weight: 600; }
.subpage-section code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 13.5px;
background: rgba(167, 139, 250, 0.12);
color: #f0e4ff;
padding: 2px 8px;
border-radius: 6px;
border: 1px solid rgba(167, 139, 250, 0.25);
}
.subpage-section .card {
padding: 24px 26px;
background: linear-gradient(180deg, rgba(167, 139, 250, 0.07), rgba(167, 139, 250, 0.02));
border: 1px solid rgba(167, 139, 250, 0.22);
border-radius: 16px;
margin: 18px 0;
}
.subpage-section .card-strong {
border-color: rgba(255, 154, 217, 0.45);
background: linear-gradient(180deg, rgba(244, 114, 182, 0.08), rgba(167, 139, 250, 0.03));
}
/* Forms inside subpages */
.subform {
display: flex;
flex-direction: column;
gap: 14px;
padding: 28px;
background: linear-gradient(180deg, rgba(167, 139, 250, 0.07), rgba(167, 139, 250, 0.02));
border: 1px solid rgba(167, 139, 250, 0.25);
border-radius: 18px;
}
.subform label {
display: block;
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 6px;
}
.subform input,
.subform select,
.subform textarea {
width: 100%;
background: rgba(8, 5, 24, 0.55);
border: 1px solid rgba(167, 139, 250, 0.28);
color: var(--text);
font-family: var(--font-body);
font-size: 14px;
padding: 12px 14px;
border-radius: 10px;
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}
.subform input:focus,
.subform select:focus,
.subform textarea:focus {
outline: none;
border-color: rgba(255, 154, 217, 0.6);
box-shadow: 0 0 0 3px rgba(255, 154, 217, 0.15);
}
.subform textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.subform button {
appearance: none;
border: none;
cursor: pointer;
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
padding: 14px 22px;
border-radius: 100px;
background: linear-gradient(135deg, #b387ff 0%, #d896ff 55%, #ff9ad9 100%);
color: white;
box-shadow: 0 8px 26px rgba(167, 139, 250, 0.35);
transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.subform button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(255, 154, 217, 0.45); }
.subform button:disabled { opacity: 0.6; cursor: not-allowed; }
.subform [data-form-status] {
font-size: 13.5px;
font-family: var(--font-body);
color: var(--text-dim);
min-height: 18px;
}
.subform [data-form-status][data-state="success"] { color: #b7f5c7; }
.subform [data-form-status][data-state="error"] { color: #ffb4ea; }
/* Press kit asset grid */
.press-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 18px;
margin-top: 16px;
}
.press-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 20px 18px;
background: rgba(20, 12, 36, 0.55);
border: 1px solid rgba(167, 139, 250, 0.22);
border-radius: 14px;
text-align: center;
}
.press-card img {
max-width: 140px;
max-height: 70px;
width: auto;
height: auto;
object-fit: contain;
}
.press-card-name {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.press-card-meta {
font-family: var(--font-body);
font-size: 11.5px;
color: var(--text-mute);
}
.press-card a {
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 600;
color: #ff9ad9;
text-decoration: none;
padding: 6px 14px;
border-radius: 100px;
border: 1px solid rgba(255, 154, 217, 0.4);
background: rgba(20, 12, 36, 0.55);
}
.press-card a:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
/* Updates / changelog */
.changelog-entry {
display: grid;
grid-template-columns: 110px 1fr;
gap: 24px;
padding: 28px 0;
border-top: 1px solid rgba(167, 139, 250, 0.15);
}
.changelog-entry:first-child { border-top: none; padding-top: 0; }
.changelog-version {
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.04em;
color: #ff9ad9;
}
.changelog-date {
font-family: var(--font-body);
font-size: 12px;
color: var(--text-mute);
margin-top: 2px;
}
.changelog-body h3 {
margin-top: 0;
font-family: var(--font-display);
font-size: 20px;
font-weight: 400;
color: var(--text);
}
.changelog-body ul { margin-top: 8px; }
/* Mobile pass for subpages */
@media (max-width: 700px) {
.subpage-hero { padding: 72px 24px 40px; }
.subpage-section { padding: 0 22px; }
.subform { padding: 22px; }
.changelog-entry { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
}
/* ============================================================
MOBILE-ONLY BATCH FIXES
Everything below only fires on phones. Desktop layouts above
are untouched.
============================================================ */
/* The mobile tool list (.toolkit-mobile-list) is INVISIBLE on desktop. */
.toolkit-mobile-list { display: none; }
/* Mobile dot indicators for the roadmap carousel, also hidden by default. */
.phase-dots,
.phase-swipe-hint { display: none; }
@media (max-width: 768px) {
/* ─── FIX #1, TOOL BELT: drop the SVG bench on mobile, show a clean
labeled list of every tool instead. No hover, no tap, just readable. */
.toolkit-stage .toolkit-instruction,
.toolkit-stage .toolkit-bench,
.toolkit-stage .toolkit-panel { display: none !important; }
.toolkit-stage {
padding: 24px 18px 26px;
border-radius: 18px;
}
.toolkit-mobile-list {
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
}
.toolkit-mobile-list li {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 14px;
background: linear-gradient(180deg, rgba(167, 139, 250, 0.06), rgba(167, 139, 250, 0.02));
border: 1px solid rgba(167, 139, 250, 0.22);
border-radius: 14px;
}
/* Phase 1 / Library is the buckle, pink highlight to match desktop active */
.toolkit-mobile-list li:first-child {
border-color: rgba(255, 154, 217, 0.4);
background: linear-gradient(180deg, rgba(244, 114, 182, 0.07), rgba(167, 139, 250, 0.03));
}
.toolkit-mobile-list .tool-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 9px;
background: linear-gradient(135deg, rgba(244, 114, 182, 0.16), rgba(167, 139, 250, 0.06));
border: 1px solid rgba(244, 114, 182, 0.3);
position: relative;
}
.toolkit-mobile-list .tool-icon::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 18px;
height: 18px;
background: linear-gradient(135deg, #ff9ad9, #d896ff);
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
.toolkit-mobile-list .tool-icon[data-icon="create"]::after { -webkit-mask: var(--icon-create); mask: var(--icon-create); }
.toolkit-mobile-list .tool-icon[data-icon="train"]::after { -webkit-mask: var(--icon-train); mask: var(--icon-train); }
.toolkit-mobile-list .tool-icon[data-icon="library"]::after { -webkit-mask: var(--icon-library); mask: var(--icon-library); }
.toolkit-mobile-list .tool-icon[data-icon="keybpm"]::after { -webkit-mask: var(--icon-keybpm); mask: var(--icon-keybpm); }
.toolkit-mobile-list .tool-icon[data-icon="noise"]::after { -webkit-mask: var(--icon-noise); mask: var(--icon-noise); }
.toolkit-mobile-list .tool-icon[data-icon="stems"]::after { -webkit-mask: var(--icon-stems); mask: var(--icon-stems); }
.toolkit-mobile-list .tool-icon[data-icon="master"]::after { -webkit-mask: var(--icon-master); mask: var(--icon-master); }
.toolkit-mobile-list .tool-icon[data-icon="convert"]::after { -webkit-mask: var(--icon-convert); mask: var(--icon-convert); }
.toolkit-mobile-list li > div {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.toolkit-mobile-list strong {
font-family: var(--font-display);
font-size: 17px;
font-weight: 400;
color: var(--text);
letter-spacing: -0.015em;
}
.toolkit-mobile-list span {
font-family: var(--font-body);
font-size: 13px;
line-height: 1.4;
color: var(--text-dim);
}
/* ─── FIX #2, INDUSTRY FIRST: condense the whole section so it fits
comfortably within one mobile viewport. 8 feature points become an
icon-only 4×2 grid with the heading text below the icon; descriptions
are hidden on mobile (kept on desktop). */
/* The desktop .container.wide caps at min(80vw, 1280px) which squeezes
mobile to 300px on a 375px screen. Let it fill the mobile width. */
.first-section .container.wide { max-width: 100%; padding: 0 16px; }
.section.first-section { padding: 16px 0 24px; }
.first-callout {
padding: 16px 14px;
border-radius: 14px;
}
.first-eyebrow {
font-size: 10px !important;
padding: 4px 10px !important;
margin-bottom: 8px !important;
}
.first-h {
font-size: 1.2rem !important;
line-height: 1.15 !important;
margin-bottom: 6px !important;
}
.first-sub {
font-size: 12px !important;
line-height: 1.4 !important;
margin-bottom: 10px !important;
}
.first-promise {
font-size: 12px !important;
line-height: 1.4 !important;
margin: 0 0 14px !important;
padding: 8px 12px !important;
border-radius: 0 8px 8px 0 !important;
}
/* Convert the 8 feature points to a tight 2-column grid (4 rows × 2),
and hide their description text, leaves icon + 1-line heading only. */
.first-points {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 6px !important;
margin-top: 0 !important;
}
.first-point {
flex-direction: row !important;
align-items: center !important;
padding: 9px 10px !important;
gap: 8px !important;
border-radius: 10px !important;
}
.first-point .first-icon {
width: 24px !important;
height: 24px !important;
border-radius: 7px !important;
margin-top: 0 !important;
}
.first-point .first-icon::after {
width: 12px !important;
height: 12px !important;
}
.first-point > div {
width: auto;
flex: 1;
}
.first-point strong {
font-size: 11.5px !important;
line-height: 1.2 !important;
display: block;
}
/* Hide the long descriptions on mobile, the icon + heading is enough
to communicate each point. Keep on desktop. */
.first-point span:not(.first-icon) { display: none !important; }
/* ─── FIX #3, MISSION: centered, tighter, less scroll. */
.section.mission { padding: 72px 0 72px; }
.mission .container.wide,
.section.mission .container {
max-width: 100%;
padding: 0 22px;
text-align: center !important;
}
.section.mission .eyebrow {
display: inline-flex !important;
margin-bottom: 14px;
font-size: 10.5px;
}
.section.mission h2 {
font-size: 1.55rem !important;
line-height: 1.15 !important;
margin-bottom: 14px !important;
text-align: center !important;
}
.section.mission .big-copy {
font-size: 13.5px !important;
line-height: 1.55 !important;
margin: 0 auto 16px !important;
max-width: 460px;
text-align: center !important;
}
.section.mission .mission-support {
font-size: 14px !important;
line-height: 1.45 !important;
margin: 0 auto 16px !important;
max-width: 420px;
text-align: center !important;
}
.section.mission .mission-closing {
font-size: 14px !important;
line-height: 1.4 !important;
margin: 0 auto !important;
max-width: 420px;
text-align: center !important;
}
/* ─── FIX #4, ROADMAP: horizontal swipeable cards instead of vertical stack. */
.section.roadmap .section-head {
text-align: center;
margin-bottom: 20px;
}
.phase-grid {
display: flex !important;
flex-direction: row !important;
grid-template-columns: none !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding: 0 18px;
gap: 14px;
padding: 24px 18px 8px;
margin: 0 -18px;
/* hide scrollbar but keep horizontal scroll working */
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
align-items: stretch;
min-height: 0;
}
.phase-grid::before { display: none !important; }
.phase-grid::-webkit-scrollbar { display: none; }
.phase-card {
flex: 0 0 86%;
min-width: 0;
max-width: 86%;
scroll-snap-align: start;
scroll-snap-stop: always;
min-height: 0;
padding: 24px 22px;
}
.phase-card::before { display: none !important; }
.phase-card .phase-num {
font-size: 10.5px;
margin-bottom: 14px;
}
.phase-card h3 {
font-size: 1.2rem !important;
line-height: 1.2;
}
.phase-card .phase-desc {
font-size: 13.5px;
margin-bottom: 10px;
}
.phase-card .phase-body {
font-size: 13px;
line-height: 1.5;
margin-bottom: 14px;
}
.phase-card .phase-divider { margin: 4px 0 14px; }
.phase-card .phase-list { gap: 8px; }
.phase-card .phase-list li {
font-size: 12.5px;
line-height: 1.4;
}
.phase-card .phase-list.two-col {
grid-template-columns: 1fr;
}
.phase-here {
font-size: 9.5px;
padding: 3px 9px;
letter-spacing: 0.14em;
}
/* Carousel dots */
.phase-dots {
display: flex;
justify-content: center;
gap: 8px;
margin: 4px 0 8px;
}
.phase-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(167, 139, 250, 0.28);
transition: background 0.25s ease, transform 0.25s ease;
}
.phase-dot.is-active {
background: #ff9ad9;
transform: scale(1.25);
box-shadow: 0 0 8px rgba(255, 154, 217, 0.6);
}
.phase-swipe-hint {
display: block;
text-align: center;
margin: 4px 0 0;
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--text-mute);
text-transform: uppercase;
}
}
/* ============================================================
FOUNDING 100 CALLOUT — premium limited-offer card at the top
of the pricing section. Feels like a real offer, not a vague
"coming soon" note.
============================================================ */
.founding-100 {
max-width: 720px;
margin: 0 auto 56px;
padding: 38px 40px 36px;
background:
radial-gradient(ellipse at top right, rgba(244, 114, 182, 0.10), transparent 65%),
linear-gradient(180deg, rgba(167, 139, 250, 0.10), rgba(167, 139, 250, 0.02));
border: 1px solid rgba(167, 139, 250, 0.40);
border-radius: 22px;
box-shadow:
0 30px 80px -25px rgba(167, 139, 250, 0.40),
0 0 50px rgba(244, 114, 182, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
text-align: center;
position: relative;
overflow: hidden;
}
.founding-100::before {
content: '';
position: absolute;
top: -1px; left: 50%;
transform: translateX(-50%);
width: 70%; height: 2px;
background: linear-gradient(90deg, transparent, rgba(244, 114, 182, 0.8), rgba(167, 139, 250, 0.8), transparent);
box-shadow: 0 0 14px rgba(167, 139, 250, 0.5);
border-radius: 2px;
}
.founding-100-tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #ff9ad9;
padding: 6px 14px;
border: 1px solid rgba(244, 114, 182, 0.45);
background: rgba(244, 114, 182, 0.10);
border-radius: 999px;
margin-bottom: 18px;
}
.founding-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #ff9ad9;
box-shadow: 0 0 10px rgba(255, 154, 217, 0.85);
animation: founding-pulse 2.4s ease-in-out infinite;
}
@keyframes founding-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.82); }
}
.founding-100-title {
font-family: var(--font-display);
font-size: clamp(2rem, 3.6vw, 2.8rem);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0 0 14px;
color: var(--text);
}
.founding-100-title em {
font-style: italic;
background: linear-gradient(135deg, #c4a7ff 0%, #d896ff 50%, #ff9ad9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.founding-100-copy {
font-family: var(--font-body);
font-size: 15.5px;
line-height: 1.55;
color: var(--text-dim);
margin: 0 auto 22px;
max-width: 540px;
}
.founding-100-list {
list-style: none;
padding: 0;
margin: 0 auto 28px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 24px;
max-width: 520px;
text-align: left;
}
.founding-100-list li {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.45;
color: var(--text);
padding-left: 22px;
position: relative;
}
.founding-100-list li::before {
content: '';
position: absolute;
left: 0; top: 7px;
width: 12px; height: 2px;
background: linear-gradient(90deg, #d896ff, #ff9ad9);
border-radius: 2px;
}
.founding-100 .btn { max-width: 360px; margin: 0 auto; }
@media (max-width: 720px) {
.founding-100 { padding: 28px 22px 26px; margin-bottom: 36px; }
.founding-100-list { grid-template-columns: 1fr; gap: 8px; }
}
/* ============================================================
BEFORE & AFTER — two side-by-side cards
============================================================ */
.before-after .ba-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
align-items: stretch;
margin-top: 12px;
}
.ba-card {
background: rgba(255, 255, 255, 0.018);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 22px;
padding: 32px 32px;
display: flex;
flex-direction: column;
gap: 16px;
text-align: left;
backdrop-filter: blur(10px);
transition: border-color 0.4s ease, background 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ba-card:hover { transform: translateY(-2px); }
.ba-after {
border-color: rgba(167, 139, 250, 0.35);
background:
radial-gradient(ellipse at top right, rgba(244, 114, 182, 0.06), transparent 60%),
linear-gradient(180deg, rgba(167, 139, 250, 0.07), rgba(167, 139, 250, 0.012));
box-shadow:
0 25px 65px -22px rgba(167, 139, 250, 0.25),
0 0 36px rgba(244, 114, 182, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.ba-card-head {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 4px;
}
.ba-card-titles {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.ba-subtitle {
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--text-mute);
margin: 0;
line-height: 1.3;
}
.ba-after .ba-subtitle { color: rgba(255, 154, 217, 0.85); }
.ba-icon {
width: 32px; height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: 18px;
font-weight: 600;
border-radius: 8px;
line-height: 1;
}
.ba-icon-before {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.55);
}
.ba-icon-after {
background: linear-gradient(135deg, rgba(216, 150, 255, 0.18), rgba(255, 154, 217, 0.18));
border: 1px solid rgba(244, 114, 182, 0.45);
color: #ff9ad9;
box-shadow: 0 0 14px rgba(244, 114, 182, 0.25);
}
.ba-card h3 {
font-family: var(--font-display);
font-size: clamp(1.35rem, 1.9vw, 1.7rem);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0;
color: var(--text);
}
.ba-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.ba-list li {
font-family: var(--font-body);
font-size: 14.5px;
line-height: 1.45;
color: var(--text-dim);
padding-left: 22px;
position: relative;
}
.ba-before .ba-list li::before {
content: '';
position: absolute;
left: 0; top: 10px;
width: 12px; height: 2px;
background: rgba(255, 255, 255, 0.22);
border-radius: 2px;
}
.ba-after .ba-list li {
color: var(--text);
}
.ba-after .ba-list li::before {
content: '';
position: absolute;
left: 0; top: 10px;
width: 12px; height: 2px;
background: linear-gradient(90deg, #d896ff, #ff9ad9);
border-radius: 2px;
}
.ba-tagline {
text-align: center;
margin: 36px auto 0;
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.55vw, 1.4rem);
font-style: italic;
color: var(--text);
letter-spacing: -0.01em;
white-space: nowrap;
cursor: default;
}
/* The
between the two sentences is only
active on mobile (the desktop rule above keeps the tagline on one line). */
.ba-tagline-break { display: none; }
.ba-tagline em {
background: linear-gradient(135deg, #c4a7ff 0%, #d896ff 50%, #ff9ad9 100%);
background-size: 100% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-style: italic;
transition: background-image 0.4s ease, background-size 0.4s ease;
}
.ba-tagline:hover em {
background-image: linear-gradient(90deg,
#6ec1ff 0%,
#a78bfa 18%,
#c4a7ff 34%,
#d896ff 50%,
#ff9ad9 66%,
#ffa674 82%,
#6ec1ff 100%);
background-size: 250% 100%;
animation: ba-tagline-rainbow 5s linear infinite;
}
@keyframes ba-tagline-rainbow {
0% { background-position: 0% 50%; }
100% { background-position: 250% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.ba-tagline:hover em { animation: none; }
}
/* Mobile-only swipe dots for the Before/After carousel, hidden by default. */
.ba-dots,
.ba-swipe-hint { display: none; }
@media (max-width: 768px) {
/* Convert Before/After into a horizontal swipeable carousel, same pattern
as the Problem/Idea carousel above. Each card snaps in place; dots
below indicate which card you're on. */
.before-after .ba-grid {
display: flex !important;
grid-template-columns: none !important;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding: 0 18px;
gap: 14px;
padding: 8px 18px 4px;
margin: 0 -18px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
align-items: stretch;
}
.before-after .ba-grid::-webkit-scrollbar { display: none; }
.ba-card {
flex: 0 0 86%;
min-width: 0;
max-width: 86%;
scroll-snap-align: start;
scroll-snap-stop: always;
padding: 18px 18px;
border-radius: 16px;
gap: 12px;
}
.ba-card-head { gap: 10px; margin-bottom: 2px; }
.ba-icon { width: 26px; height: 26px; font-size: 15px; border-radius: 7px; }
.ba-card h3 {
font-size: 1.1rem !important;
line-height: 1.15 !important;
}
.ba-subtitle { font-size: 11.5px !important; }
.ba-list { gap: 6px; }
.ba-list li {
font-size: 12.5px !important;
line-height: 1.4 !important;
padding-left: 16px;
}
.ba-before .ba-list li::before,
.ba-after .ba-list li::before {
top: 7px;
width: 10px;
height: 1.5px;
}
/* Carousel dots + swipe hint, same look as the story-card carousel */
.ba-dots {
display: flex;
justify-content: center;
gap: 8px;
margin: 12px 0 4px;
}
.ba-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(167, 139, 250, 0.28);
transition: background 0.25s ease, transform 0.25s ease;
}
.ba-dot.is-active {
background: #ff9ad9;
transform: scale(1.25);
box-shadow: 0 0 8px rgba(255, 154, 217, 0.6);
}
.ba-swipe-hint {
display: block;
text-align: center;
margin: 0 0 6px;
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--text-mute);
text-transform: uppercase;
}
/* Vertically center the tagline in the gap between the BA carousel and
the Pricing section. Achieved by zeroing out the BA section's bottom
padding (so the tagline ends right at the section boundary) and giving
the tagline a large top margin to push it down into the middle of the
combined visual void. */
.before-after { padding-bottom: 0 !important; }
.ba-tagline { margin-top: 74px; font-size: 0.95rem; white-space: normal; }
.ba-tagline-break { display: inline; }
}
/* ============================================================
FAQ (collapsible accordion using ) — compact sizing
so the section feels tight, not pitch-deck-bulky.
============================================================ */
.faq .faq-list {
max-width: 1080px;
margin: 8px auto 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(5, auto);
grid-auto-flow: column;
gap: 10px 18px;
align-items: start;
}
.faq-item {
background: rgba(255, 255, 255, 0.018);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 11px;
overflow: hidden;
transition: border-color 0.25s ease, background 0.25s ease;
}
.faq-item:hover {
border-color: rgba(167, 139, 250, 0.22);
background: rgba(167, 139, 250, 0.025);
}
.faq-item[open] {
border-color: rgba(167, 139, 250, 0.32);
background: rgba(167, 139, 250, 0.04);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.005em;
line-height: 1.35;
}
.faq-chev {
flex-shrink: 0;
width: 20px; height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 5px;
background: rgba(167, 139, 250, 0.10);
border: 1px solid rgba(167, 139, 250, 0.20);
position: relative;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
}
.faq-chev::before,
.faq-chev::after {
content: '';
position: absolute;
background: rgba(216, 150, 255, 0.9);
border-radius: 1px;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.faq-chev::before { width: 8px; height: 1.5px; }
.faq-chev::after { width: 1.5px; height: 8px; }
.faq-item[open] .faq-chev {
background: rgba(244, 114, 182, 0.16);
border-color: rgba(244, 114, 182, 0.40);
transform: rotate(180deg);
}
.faq-item[open] .faq-chev::after { opacity: 0; }
.faq-a {
font-family: var(--font-body);
font-size: 13px;
line-height: 1.55;
color: var(--text-dim);
margin: 0;
padding: 0 16px 14px;
}
@media (max-width: 720px) {
.faq .faq-list { max-width: 100%; grid-template-columns: 1fr; gap: 6px; }
.faq-item summary { padding: 11px 14px; }
.faq-q { font-size: 13.5px; }
.faq-a { padding: 0 14px 12px; font-size: 12.5px; }
.faq-chev { width: 18px; height: 18px; }
}
/* ============================================================
FINAL CTA — strong closing section
============================================================ */
.section.final-cta {
padding-top: 40px;
padding-bottom: 80px;
}
.final-cta-inner {
max-width: 720px;
margin: 0 auto;
padding: 56px 40px;
text-align: center;
background:
radial-gradient(ellipse at top, rgba(244, 114, 182, 0.10), transparent 60%),
linear-gradient(180deg, rgba(167, 139, 250, 0.08), rgba(167, 139, 250, 0.02));
border: 1px solid rgba(167, 139, 250, 0.32);
border-radius: 28px;
box-shadow:
0 35px 90px -25px rgba(167, 139, 250, 0.30),
0 0 50px rgba(244, 114, 182, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
position: relative;
overflow: hidden;
}
.final-cta-inner::before {
content: '';
position: absolute;
top: -1px; left: 50%;
transform: translateX(-50%);
width: 60%; height: 2px;
background: linear-gradient(90deg, transparent, rgba(244, 114, 182, 0.8), rgba(167, 139, 250, 0.8), transparent);
box-shadow: 0 0 14px rgba(167, 139, 250, 0.5);
border-radius: 2px;
}
.final-cta-icon {
width: 84px; height: 84px;
margin: 0 auto 20px;
filter: drop-shadow(0 10px 24px rgba(167, 139, 250, 0.40));
}
.final-cta-img {
width: 100%; height: 100%;
object-fit: contain;
display: block;
}
.final-cta-headline {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.2vw, 2.6rem);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0 0 16px;
color: var(--text);
}
.final-cta-headline em {
font-style: italic;
background: linear-gradient(135deg, #c4a7ff 0%, #d896ff 50%, #ff9ad9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.final-cta-copy {
font-family: var(--font-body);
font-size: 15.5px;
line-height: 1.55;
color: var(--text-dim);
margin: 0 auto 28px;
max-width: 500px;
}
.final-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-bottom: 18px;
}
.btn.btn-large {
padding: 14px 28px;
font-size: 15.5px;
}
.final-cta-fine {
font-family: var(--font-body);
font-size: 12.5px;
letter-spacing: 0.02em;
color: var(--text-mute);
margin: 0;
}
@media (max-width: 720px) {
.section.final-cta { padding-bottom: 50px; }
.final-cta-inner { padding: 40px 22px; border-radius: 22px; }
.final-cta-icon { width: 64px; height: 64px; margin-bottom: 16px; }
.final-cta-actions { flex-direction: column; gap: 10px; }
.final-cta-actions .btn { width: 100%; }
}
/* ---------- 3D tilt cards ---------- */
.tilt {
transform-style: preserve-3d;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
will-change: transform;
}
.tilt-glare {
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
rgba(255,255,255,0.10) 0%,
rgba(255,255,255,0.03) 30%,
transparent 60%);
pointer-events: none;
opacity: 0;
transition: opacity 0.35s ease;
mix-blend-mode: screen;
}
.tilt.is-tilting .tilt-glare { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.tilt { transform: none !important; }
.tilt-glare { display: none; }
}