/* Stream Arena landing page. Used only by Views/Home/Landing.cshtml (own layout). */
:root {
--primary: #8B6CF6;
--primary-light: #A78BFA;
--primary-dark: #6D4FCF;
--accent: #D946EF;
--accent-cool: #06B6D4;
--accent-warm: #F59E0B;
--emerald: #10B981;
--rose: #F43F5E;
--violet: #9B6FF7;
--dark: #08060E;
--dark-soft: #110D1C;
--dark-card: #13102A;
--dark-card-alpha: rgba(16,12,36,0.82);
--gray-900: #1A1530;
--gray-800: #2A2446;
--gray-700: #3D3660;
--gray-600: #5E5488;
--gray-400: #A89EC4;
--gray-300: #D4CDE8;
--white: #F4F0FA;
--glass: rgba(255,255,255,0.04);
--glass-border: rgba(160,140,255,0.1);
--gradient-1: linear-gradient(135deg, #8B6CF6, #D946EF);
--gradient-2: linear-gradient(135deg, #9B6FF7, #EC4899);
--gradient-3: linear-gradient(135deg, #D946EF, #8B6CF6);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', sans-serif;
font-weight: 200;
background: var(--dark);
color: var(--gray-300);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* ── Gradient Border Utility ── */
.gradient-border {
position: relative;
background: var(--dark-card-alpha);
backdrop-filter: blur(16px);
border-radius: 14px;
isolation: isolate;
}
.gradient-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(205,92,69,0.5), rgba(74,127,212,0.3), rgba(155,111,247,0.5));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 1;
}
.gradient-border-warm::before {
background: linear-gradient(135deg, rgba(245,158,11,0.5), rgba(205,92,69,0.4), rgba(155,111,247,0.5));
}
.gradient-border-cool::before {
background: linear-gradient(135deg, rgba(74,127,212,0.5), rgba(95,167,122,0.4), rgba(205,92,69,0.5));
}
/* ── Gradient containers ── */
.gradient-glow-container {
position: relative;
padding: 1.75rem;
border-radius: 16px;
background: linear-gradient(135deg, rgba(205,92,69,0.08), rgba(74,127,212,0.04), rgba(155,111,247,0.06));
overflow: hidden;
}
.gradient-glow-container::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(205,92,69,0.4), rgba(74,127,212,0.2), rgba(155,111,247,0.4));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* ── Scroll reveal ── */
.reveal { opacity: 0; transform: translateY(60px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-80px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(80px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.85); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }
/* ── Unicorn Studio WebGL Background ── */
/* Flashlight overlay — darkens everything except a circle around the cursor */
.flashlight {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(circle 300px at var(--fx, -1000px) var(--fy, -1000px),
transparent 0%,
transparent 20%,
rgba(8,6,14,0.35) 45%,
rgba(8,6,14,0.72) 70%,
rgba(8,6,14,0.82) 100%);
}
/* ── Navbar ── */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 0.75rem 0;
transition: all 0.4s ease;
}
.navbar.scrolled {
background: rgba(8,6,14,0.88);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-bottom: 1px solid var(--glass-border);
padding: 0.5rem 0;
}
.navbar .container { display: flex; align-items: center; justify-content: space-between; }
.logo {
font-size: 1.2rem;
font-weight: 300;
color: var(--white);
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 0.75rem;
}
.nav-links {
display: flex;
align-items: center;
gap: 1.75rem;
list-style: none;
}
.nav-links a {
color: var(--gray-400);
text-decoration: none;
font-weight: 300;
font-size: 0.8rem;
letter-spacing: 0.5px;
transition: color 0.3s;
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 1px;
background: var(--gradient-1);
transition: width 0.3s ease;
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
padding: 0.4rem 1rem;
background: linear-gradient(135deg, rgba(205,92,69,0.15), rgba(74,127,212,0.1));
border: 1px solid rgba(205,92,69,0.3);
border-radius: 100px;
color: var(--white) !important;
font-weight: 300;
font-size: 0.75rem;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
}
.nav-cta:hover { background: var(--primary); border-color: var(--primary); }
.nav-cta::after { display: none !important; }
.mobile-toggle { display: none; background: none; border: none; color: var(--white); font-size: 1.5rem; cursor: pointer; }
/* ── Hero ── */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
padding: 5.5rem 0 3rem;
z-index: 1;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
align-items: center;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.4rem 1.2rem 0.4rem 0.6rem;
border-radius: 100px;
font-size: 0.72rem;
font-weight: 300;
color: var(--gray-400);
margin-bottom: 1.25rem;
animation: fadeInDown 0.8s ease;
position: relative;
background: var(--dark-card-alpha);
backdrop-filter: blur(12px);
}
.hero-badge::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(205,92,69,0.5), rgba(74,127,212,0.3));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.hero-badge-dot {
width: 8px;
height: 8px;
background: var(--emerald);
border-radius: 50%;
animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
0%, 100% { box-shadow: 0 0 0 0 rgba(95,167,122,0.4); }
50% { box-shadow: 0 0 0 6px rgba(95,167,122,0); }
}
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.hero h1 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 100;
color: var(--white);
line-height: 1.1;
margin-bottom: 1rem;
letter-spacing: -1px;
}
.gradient-text {
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 300;
}
.gradient-text-2 {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-desc {
font-size: 0.92rem;
font-weight: 200;
color: var(--gray-400);
line-height: 1.8;
max-width: 420px;
margin-bottom: 1.5rem;
}
.hero-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.btn-primary {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 1.5rem;
background: var(--gradient-1);
color: var(--white);
border: none;
border-radius: 10px;
font-family: inherit;
font-size: 0.82rem;
font-weight: 300;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent, rgba(255,255,255,0.15));
opacity: 0;
transition: opacity 0.3s;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(205,92,69,0.3); }
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 1.5rem;
background: transparent;
color: var(--gray-300);
border: 1px solid var(--glass-border);
border-radius: 10px;
font-family: inherit;
font-size: 0.82rem;
font-weight: 300;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
}
.btn-ghost:hover { border-color: var(--gray-600); color: var(--white); transform: translateY(-2px); }
.hero-meta {
display: flex;
align-items: center;
gap: 1.25rem;
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--glass-border);
}
.hero-meta-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
color: var(--gray-400);
font-weight: 300;
}
.hero-meta-item i { color: var(--primary-light); font-size: 0.75rem; }
/* ── Hero Visual ── */
.hero-visual { position: relative; }
/* ── Hero Dashboard Composite ── */
.hero-dashboard {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
gap: 0.5rem;
}
.hero-dash-card {
background: var(--dark-card-alpha);
backdrop-filter: blur(16px);
border-radius: 10px;
padding: 0.75rem;
position: relative;
isolation: isolate;
}
.hero-dash-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(205,92,69,0.3), rgba(74,127,212,0.2));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.hero-dash-wide { grid-column: 1 / -1; }
.hero-dash-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.hero-dash-label {
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--gray-600);
font-weight: 400;
}
.hero-dash-badge {
font-size: 0.55rem;
padding: 0.15rem 0.5rem;
border-radius: 100px;
font-weight: 400;
letter-spacing: 0.5px;
}
.hero-dash-badge.green { background: rgba(95,167,122,0.12); color: var(--emerald); border: 1px solid rgba(95,167,122,0.2); }
.hero-dash-badge.purple { background: rgba(205,92,69,0.12); color: var(--primary-light); border: 1px solid rgba(205,92,69,0.2); }
.hero-dash-badge.amber { background: rgba(245,158,11,0.12); color: var(--accent-warm); border: 1px solid rgba(245,158,11,0.2); }
.hero-dash-value {
font-size: 1.3rem;
font-weight: 200;
color: var(--white);
line-height: 1;
margin-bottom: 0.15rem;
}
.hero-dash-sub {
font-size: 0.62rem;
color: var(--gray-600);
display: flex;
align-items: center;
gap: 0.3rem;
}
.hero-dash-sub .up { color: var(--emerald); }
.hero-dash-sub .down { color: var(--rose); }
/* Sparkline */
.hero-sparkline {
display: flex;
align-items: flex-end;
gap: 2px;
height: 28px;
margin-top: 0.4rem;
}
.hero-sparkline-bar {
flex: 1;
border-radius: 2px 2px 0 0;
min-width: 3px;
opacity: 0.7;
}
.hero-sparkline-bar:nth-child(odd) { background: var(--gradient-1); }
.hero-sparkline-bar:nth-child(even) { background: rgba(205,92,69,0.25); }
/* Activity feed */
.hero-feed { display: flex; flex-direction: column; gap: 0.35rem; }
.hero-feed-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.5rem;
border-radius: 6px;
background: rgba(0,0,0,0.2);
font-size: 0.62rem;
color: var(--gray-400);
}
.hero-feed-dot {
width: 5px;
height: 5px;
border-radius: 50%;
flex-shrink: 0;
}
.hero-feed-dot.green { background: var(--emerald); }
.hero-feed-dot.purple { background: var(--primary-light); }
.hero-feed-dot.amber { background: var(--accent-warm); }
.hero-feed-dot.rose { background: var(--rose); }
.hero-feed-time { margin-left: auto; font-size: 0.55rem; color: var(--gray-700); }
/* Code block */
.hero-code {
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 0.6rem;
line-height: 1.7;
color: var(--gray-400);
}
.hero-code .kw { color: var(--primary-light); }
.hero-code .fn { color: var(--accent); }
.hero-code .str { color: var(--emerald); }
.hero-code .cmt { color: var(--gray-700); }
.hero-code .num { color: var(--accent-warm); }
/* Progress rows */
.hero-progress { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.35rem; }
.hero-progress-row {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.58rem;
color: var(--gray-400);
}
.hero-progress-row span:first-child { width: 55px; flex-shrink: 0; }
.hero-progress-track {
flex: 1;
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,0.04);
overflow: hidden;
}
.hero-progress-fill {
height: 100%;
border-radius: 2px;
}
.hero-progress-fill.g1 { background: var(--gradient-1); }
.hero-progress-fill.g2 { background: var(--gradient-2); }
.hero-progress-fill.g3 { background: var(--gradient-3); }
.hero-progress-pct { width: 28px; text-align: right; font-size: 0.55rem; color: var(--gray-600); }
/* ── Marquee (compact) ── */
.marquee-section {
position: relative;
z-index: 1;
padding: 0.6rem 0;
border-top: 1px solid var(--glass-border);
border-bottom: 1px solid var(--glass-border);
}
.marquee-wrapper {
overflow: hidden;
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
display: flex;
align-items: center;
gap: 2rem;
animation: marquee 35s linear infinite;
width: max-content;
}
.marquee-item {
font-size: 0.65rem;
font-weight: 300;
color: var(--gray-600);
white-space: nowrap;
letter-spacing: 1.5px;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 0.4rem;
}
.marquee-item i { font-size: 0.55rem; color: var(--gray-700); }
.marquee-sep { color: var(--gray-800); font-size: 0.4rem; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* ── Noise overlay for texture ── */
.bg-noise {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.02;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 256px;
mix-blend-mode: overlay;
}
/* ── Sections ── */
.section { position: relative; z-index: 1; padding: 4.5rem 0; }
.section-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 400;
margin-bottom: 0.6rem;
padding: 0.25rem 0.75rem;
border-radius: 100px;
background: linear-gradient(135deg, rgba(205,92,69,0.1), rgba(74,127,212,0.05));
border: 1px solid rgba(205,92,69,0.2);
color: var(--primary-light);
}
.section-label i { font-size: 0.65rem; }
.section-title {
font-size: clamp(1.5rem, 3vw, 2.2rem);
font-weight: 100;
color: var(--white);
line-height: 1.2;
margin-bottom: 0.6rem;
letter-spacing: -0.5px;
}
.section-subtitle {
font-size: 0.88rem;
font-weight: 200;
color: var(--gray-400);
line-height: 1.8;
max-width: 480px;
}
/* ── Features Bento ── */
.bento-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 0.75rem;
margin-top: 2rem;
}
.bento-card {
background: var(--dark-card-alpha);
backdrop-filter: blur(20px);
border-radius: 12px;
padding: 1.25rem;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
cursor: default;
isolation: isolate;
}
.bento-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(205,92,69,0.3), rgba(74,127,212,0.15), rgba(155,111,247,0.2));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 1;
opacity: 0.5;
transition: opacity 0.4s;
}
.bento-card::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(205,92,69,0.08), transparent 60%);
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
}
.bento-card:hover::before { opacity: 1; }
.bento-card:hover::after { opacity: 1; }
.bento-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
.bento-span-8 { grid-column: span 8; }
.bento-span-4 { grid-column: span 4; }
.bento-span-5 { grid-column: span 5; }
.bento-span-7 { grid-column: span 7; }
.bento-span-6 { grid-column: span 6; }
.bento-span-12 { grid-column: span 12; }
.bento-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
margin-bottom: 0.75rem;
}
.bento-icon.blue { background: linear-gradient(135deg, rgba(205,92,69,0.15), rgba(205,92,69,0.05)); color: var(--primary-light); border: 1px solid rgba(205,92,69,0.15); }
.bento-icon.cyan { background: linear-gradient(135deg, rgba(74,127,212,0.15), rgba(74,127,212,0.05)); color: var(--accent); border: 1px solid rgba(74,127,212,0.15); }
.bento-icon.amber { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.05)); color: var(--accent-warm); border: 1px solid rgba(245,158,11,0.15); }
.bento-icon.emerald { background: linear-gradient(135deg, rgba(95,167,122,0.15), rgba(95,167,122,0.05)); color: var(--emerald); border: 1px solid rgba(95,167,122,0.15); }
.bento-icon.rose { background: linear-gradient(135deg, rgba(205,92,69,0.15), rgba(205,92,69,0.05)); color: var(--rose); border: 1px solid rgba(205,92,69,0.15); }
.bento-icon.violet { background: linear-gradient(135deg, rgba(155,111,247,0.15), rgba(155,111,247,0.05)); color: var(--violet); border: 1px solid rgba(155,111,247,0.15); }
.bento-title { font-size: 0.95rem; font-weight: 300; color: var(--white); margin-bottom: 0.35rem; }
.bento-desc { font-size: 0.8rem; font-weight: 200; color: var(--gray-400); line-height: 1.7; }
.bento-visual { margin-top: 1rem; border-radius: 8px; overflow: hidden; position: relative; }
.bento-visual::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--dark-card), transparent 40%);
pointer-events: none;
}
.bento-visual img { width: 100%; height: 120px; object-fit: cover; opacity: 0.6; transition: opacity 0.4s, transform 0.6s; }
.bento-card:hover .bento-visual img { opacity: 0.8; transform: scale(1.03); }
.mini-chart {
display: flex;
align-items: flex-end;
gap: 4px;
height: 50px;
margin-top: 1rem;
padding: 0.5rem;
border-radius: 8px;
background: rgba(0,0,0,0.2);
}
.mini-chart-bar {
flex: 1;
border-radius: 3px 3px 0 0;
transition: height 0.6s cubic-bezier(0.16,1,0.3,1);
opacity: 0.7;
}
.mini-chart-bar:nth-child(odd) { background: var(--gradient-1); }
.mini-chart-bar:nth-child(even) { background: var(--gradient-3); }
.mini-chart-bar:hover { opacity: 1; }
/* ── Inline code block in bento ── */
.bento-code {
margin-top: 0.75rem;
padding: 0.75rem;
border-radius: 8px;
background: rgba(0,0,0,0.3);
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 0.7rem;
color: var(--gray-400);
line-height: 1.8;
border: 1px solid var(--glass-border);
overflow: hidden;
}
.bento-code .kw { color: var(--primary-light); }
.bento-code .fn { color: var(--accent); }
.bento-code .str { color: var(--emerald); }
.bento-code .cmt { color: var(--gray-700); }
/* ── Animated rings in bento ── */
.bento-rings {
position: absolute;
bottom: -40px;
right: -40px;
width: 200px;
height: 200px;
opacity: 0.08;
}
.bento-rings circle {
fill: none;
stroke: url(#ringGrad);
stroke-width: 1;
}
/* ── How It Works ── */
.how-section { overflow: hidden; }
.steps-container { margin-top: 2.5rem; position: relative; }
.steps-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, transparent, rgba(205,92,69,0.3) 20%, rgba(74,127,212,0.3) 80%, transparent);
}
.step-row {
display: grid;
grid-template-columns: 1fr 80px 1fr;
align-items: center;
margin-bottom: 2rem;
}
.step-row:nth-child(odd) .step-content { grid-column: 1; text-align: right; }
.step-row:nth-child(odd) .step-visual { grid-column: 3; }
.step-row:nth-child(even) .step-content { grid-column: 3; }
.step-row:nth-child(even) .step-visual { grid-column: 1; grid-row: 1; }
.step-number-col { grid-column: 2; display: flex; justify-content: center; }
.step-number {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--dark-card-alpha);
backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 300;
color: var(--primary-light);
position: relative;
z-index: 2;
transition: all 0.4s;
}
.step-number::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--gradient-1);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.step-row:hover .step-number {
background: var(--primary);
color: var(--white);
box-shadow: 0 0 40px rgba(205,92,69,0.4);
}
.step-content { padding: 1rem; }
.step-title { font-size: 1rem; font-weight: 300; color: var(--white); margin-bottom: 0.3rem; }
.step-desc { font-size: 0.8rem; font-weight: 200; color: var(--gray-400); line-height: 1.7; }
.step-visual { padding: 0.75rem; }
.step-visual-card {
padding: 1rem;
border-radius: 10px;
background: var(--dark-card-alpha);
backdrop-filter: blur(16px);
transition: all 0.4s;
position: relative;
}
.step-visual-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(205,92,69,0.3), rgba(74,127,212,0.2));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.step-row:hover .step-visual-card { box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.step-visual-icon { font-size: 1.4rem; margin-bottom: 0.5rem; }
.step-visual-icon.g1 { background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.step-visual-icon.g2 { background: var(--gradient-2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.step-visual-icon.g3 { background: var(--gradient-3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.step-visual-bars { display: flex; flex-direction: column; gap: 6px; }
.step-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.04); position: relative; overflow: hidden; }
.step-bar-fill.reveal-child { height: 100%; border-radius: 3px; width: var(--fill); transform-origin: left; transform: scaleX(0); transition: transform 1s cubic-bezier(0.16,1,0.3,1); }
.step-bar-fill.g1 { background: var(--gradient-1); }
.step-bar-fill.g2 { background: var(--gradient-2); }
.step-bar-fill.g3 { background: var(--gradient-3); }
.visible .step-bar-fill.reveal-child { transform: scaleX(1); }
/* ── Stats ── */
.stats-section {
padding: 1.5rem 0;
position: relative;
z-index: 1;
}
.stats-inner {
padding: 1.25rem 1rem;
border-radius: 12px;
background: linear-gradient(135deg, rgba(205,92,69,0.08), rgba(74,127,212,0.04), rgba(155,111,247,0.06));
backdrop-filter: blur(16px);
position: relative;
}
.stats-inner::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(205,92,69,0.4), rgba(74,127,212,0.2), rgba(155,111,247,0.3));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
}
.stat-block { text-align: center; padding: 0.5rem 0.25rem; position: relative; }
.stat-block::after {
content: '';
position: absolute;
right: 0;
top: 20%;
height: 60%;
width: 1px;
background: linear-gradient(to bottom, transparent, rgba(205,92,69,0.15), transparent);
}
.stat-block:last-child::after { display: none; }
.stat-value {
font-size: clamp(1.3rem, 2vw, 1.6rem);
font-weight: 100;
line-height: 1;
margin-bottom: 0.2rem;
}
.stat-value .counter { background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline; }
.stat-unit { font-weight: 200; }
.stat-label { font-size: 0.65rem; font-weight: 300; color: var(--gray-400); text-transform: uppercase; letter-spacing: 2px; }
.stat-icon { margin-bottom: 0.2rem; font-size: 0.85rem; }
.stat-icon.g1 { background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.stat-icon.g2 { background: var(--gradient-2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.stat-icon.g3 { background: var(--gradient-3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
/* ── Pricing ── */
.pricing-grid {
display: grid;
grid-template-columns: 1fr 1.15fr 1fr;
gap: 1.25rem;
margin-top: 2rem;
align-items: center;
}
.price-card {
background: var(--dark-card-alpha);
backdrop-filter: blur(20px);
border-radius: 12px;
padding: 1.5rem 1.25rem;
position: relative;
transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
isolation: isolate;
}
.price-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(205,92,69,0.2), rgba(74,127,212,0.1));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
transition: opacity 0.4s;
}
.price-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,0.3); }
.price-card:hover::before { opacity: 1; }
.price-card.featured {
background: linear-gradient(135deg, rgba(205,92,69,0.12), rgba(155,111,247,0.06));
padding: 2rem 1.5rem;
}
.price-card.featured::before {
background: linear-gradient(135deg, rgba(205,92,69,0.6), rgba(155,111,247,0.4), rgba(74,127,212,0.4));
}
.price-card.featured:hover { transform: translateY(-8px); }
.price-popular {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
padding: 0.3rem 1.2rem;
background: var(--gradient-1);
border-radius: 100px;
font-size: 0.65rem;
font-weight: 400;
color: var(--white);
letter-spacing: 1.5px;
text-transform: uppercase;
}
.price-name { font-size: 0.7rem; font-weight: 400; color: var(--gray-400); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0.5rem; }
.price-amount { font-size: 2.5rem; font-weight: 100; color: var(--white); line-height: 1; margin-bottom: 0.25rem; }
.price-amount span { font-size: 1.2rem; color: var(--gray-400); }
.price-period { font-size: 0.85rem; color: var(--gray-600); margin-bottom: 1rem; }
.price-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--glass-border), transparent); margin: 0.75rem 0; }
.price-features { list-style: none; margin-bottom: 1.25rem; }
.price-features li {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.3rem 0;
font-size: 0.8rem;
font-weight: 200;
color: var(--gray-300);
}
.price-features li i { font-size: 0.7rem; width: 18px; text-align: center; }
.price-features li i.fa-check { color: var(--emerald); }
.price-btn {
display: block;
width: 100%;
padding: 0.65rem;
border-radius: 10px;
font-family: inherit;
font-size: 0.8rem;
font-weight: 300;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s;
text-align: center;
text-decoration: none;
}
.price-btn-outline {
background: transparent;
border: 1px solid rgba(205,92,69,0.2);
color: var(--gray-300);
}
.price-btn-outline:hover { border-color: var(--primary-light); color: var(--white); background: rgba(205,92,69,0.05); }
.price-btn-solid {
background: var(--gradient-1);
border: none;
color: var(--white);
position: relative;
overflow: hidden;
}
.price-btn-solid::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent, rgba(255,255,255,0.15));
opacity: 0;
transition: opacity 0.3s;
}
.price-btn-solid:hover::before { opacity: 1; }
.price-btn-solid:hover { box-shadow: 0 10px 30px rgba(205,92,69,0.3); transform: translateY(-2px); }
/* ── Testimonials ── */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-top: 2rem;
}
.testimonial-card {
background: var(--dark-card-alpha);
backdrop-filter: blur(20px);
border-radius: 12px;
padding: 1.25rem;
transition: all 0.4s;
position: relative;
isolation: isolate;
}
.testimonial-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(205,92,69,0.2), rgba(74,127,212,0.1));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.5;
transition: opacity 0.4s;
}
.testimonial-card:nth-child(2) { transform: translateY(2rem); }
.testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.testimonial-card:hover::before { opacity: 1; }
.testimonial-card:nth-child(2):hover { transform: translateY(calc(2rem - 4px)); }
.testimonial-quote {
width: 28px;
height: 28px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, rgba(205,92,69,0.15), rgba(205,92,69,0.05));
border: 1px solid rgba(205,92,69,0.15);
}
.testimonial-quote i { background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.testimonial-stars { color: var(--accent-warm); font-size: 0.75rem; margin-bottom: 0.5rem; display: flex; gap: 2px; }
.testimonial-text { font-size: 0.82rem; font-weight: 200; color: var(--gray-300); line-height: 1.8; margin-bottom: 1rem; }
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.testimonial-avatar {
width: 32px;
height: 32px;
border-radius: 8px;
object-fit: cover;
position: relative;
}
.testimonial-name { font-size: 0.8rem; font-weight: 300; color: var(--white); }
.testimonial-role { font-size: 0.65rem; color: var(--gray-600); }
/* ── CTA ── */
.cta-section { padding: 3rem 0 4rem; position: relative; z-index: 1; }
.cta-card {
position: relative;
padding: 2.5rem 2rem;
border-radius: 14px;
background: linear-gradient(135deg, rgba(205,92,69,0.1), rgba(155,111,247,0.06), rgba(74,127,212,0.04));
backdrop-filter: blur(16px);
text-align: center;
overflow: hidden;
isolation: isolate;
}
.cta-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(205,92,69,0.5), rgba(155,111,247,0.3), rgba(74,127,212,0.4));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 1;
}
.cta-card::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, rgba(205,92,69,0.06), transparent, rgba(74,127,212,0.04), transparent);
animation: rotateSlow 20s linear infinite;
}
@keyframes rotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.cta-content { position: relative; z-index: 2; }
.cta-title { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 100; color: var(--white); margin-bottom: 1rem; letter-spacing: -0.5px; }
.cta-desc { font-size: 0.85rem; font-weight: 200; color: var(--gray-400); max-width: 420px; margin: 0 auto 1.5rem; line-height: 1.8; }
.cta-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.cta-trust {
margin-top: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
font-size: 0.68rem;
color: var(--gray-600);
font-weight: 200;
flex-wrap: wrap;
}
.cta-trust span { display: flex; align-items: center; gap: 0.4rem; }
.cta-trust i { background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
/* ── Decorative gradient lines spanning CTA ── */
.cta-deco-line {
position: absolute;
pointer-events: none;
z-index: 0;
}
.cta-deco-line-1 {
width: 300px;
height: 1px;
top: 30%;
left: -50px;
background: linear-gradient(90deg, transparent, rgba(205,92,69,0.2), transparent);
transform: rotate(-15deg);
}
.cta-deco-line-2 {
width: 250px;
height: 1px;
bottom: 25%;
right: -30px;
background: linear-gradient(90deg, transparent, rgba(74,127,212,0.18), transparent);
transform: rotate(10deg);
}
/* ── Footer ── */
.footer {
position: relative;
z-index: 1;
border-top: 1px solid var(--glass-border);
padding: 2.5rem 0 1.5rem;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 2rem;
margin-bottom: 1.5rem;
}
.footer-brand p { font-size: 0.8rem; color: var(--gray-600); line-height: 1.7; margin-top: 0.75rem; max-width: 280px; }
.footer-heading { font-size: 0.62rem; font-weight: 400; color: var(--gray-400); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0.75rem; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 0.4rem; }
.footer-links a { color: var(--gray-600); text-decoration: none; font-size: 0.8rem; font-weight: 200; transition: color 0.3s; }
.footer-links a:hover { color: var(--gray-300); }
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1.25rem;
border-top: 1px solid var(--glass-border);
font-size: 0.72rem;
color: var(--gray-600);
font-weight: 200;
}
.footer-socials { display: flex; gap: 1rem; }
.footer-socials a {
width: 30px;
height: 30px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-600);
font-size: 1rem;
transition: all 0.3s;
background: rgba(255,255,255,0.03);
border: 1px solid var(--glass-border);
}
.footer-socials a:hover { color: var(--primary-light); border-color: rgba(205,92,69,0.3); background: rgba(205,92,69,0.05); }
/* ── Cursor glow ── */
.cursor-glow {
position: fixed;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(205,92,69,0.08), rgba(205,92,69,0.03) 40%, transparent 70%);
pointer-events: none;
z-index: 2;
transform: translate(-50%, -50%);
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.bento-grid { grid-template-columns: repeat(6, 1fr); }
.bento-span-8, .bento-span-7 { grid-column: span 6; }
.bento-span-4, .bento-span-5, .bento-span-6 { grid-column: span 3; }
.bento-grid > .bento-card:last-child { grid-column: span 6; }
.pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
.price-card.featured { padding: 1.5rem 1.25rem; }
.price-card.featured:hover { transform: translateY(-8px); }
.testimonials-grid { grid-template-columns: 1fr; max-width: 500px; margin-left: auto; margin-right: auto; }
.testimonial-card:nth-child(2) { transform: none; }
.testimonial-card:nth-child(2):hover { transform: translateY(-4px); }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.stat-block:nth-child(2)::after { display: none; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.hero-grid { gap: 1.5rem; }
}
@media (max-width: 768px) {
.nav-links { display: none; }
.mobile-toggle { display: block; }
.hero { min-height: auto; padding: 6rem 0 3rem; }
.hero-grid { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; }
.hero-desc { margin-left: auto; margin-right: auto; max-width: 100%; }
.hero-actions { justify-content: center; }
.hero-meta { justify-content: center; flex-wrap: wrap; gap: 0.75rem; }
.hero-visual { margin-top: 1rem; }
.hero-dashboard { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.hero-dash-wide { grid-column: 1 / -1; }
.hero-code { font-size: 0.55rem; overflow-x: auto; white-space: nowrap; }
.section-subtitle { max-width: 100%; }
.bento-grid { display: flex; flex-direction: column; }
.bento-grid > * { width: 100%; }
.bento-code { font-size: 0.65rem; overflow-x: auto; }
.bento-visual img { height: 100px; }
.steps-line { display: none; }
.step-row { grid-template-columns: 60px 1fr; margin-bottom: 2rem; }
.step-number-col { grid-column: 1; grid-row: 1; }
.step-content { grid-column: 2 !important; grid-row: 1; text-align: left !important; }
.step-visual { grid-column: 1 / -1 !important; grid-row: 2 !important; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.stat-block::after { display: none; }
.stats-inner { padding: 1rem 0.75rem; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
.cta-card { padding: 2rem 1.25rem; }
.section { padding: 3rem 0; }
.flashlight { display: none; }
.cursor-glow { display: none; }
}
@media (max-width: 480px) {
.container { padding: 0 1rem; }
.hero h1 { font-size: 2rem; }
.hero-badge { font-size: 0.65rem; padding: 0.35rem 0.9rem 0.35rem 0.5rem; }
.hero-dashboard { grid-template-columns: 1fr; }
.hero-dashboard > * { grid-column: auto; }
.hero-dash-value { font-size: 1.1rem; }
.hero-dash-label { font-size: 0.55rem; }
.hero-feed-item { font-size: 0.55rem; padding: 0.3rem 0.4rem; }
.hero-feed-time { font-size: 0.5rem; }
.hero-progress-row span:first-child { width: 45px; }
.hero-meta-item { font-size: 0.7rem; }
.hero-meta { gap: 0.5rem; }
.btn-primary, .btn-ghost { font-size: 0.78rem; padding: 0.65rem 1.25rem; }
.bento-card { padding: 1rem; }
.bento-title { font-size: 0.88rem; }
.bento-desc { font-size: 0.75rem; }
.stats-grid { grid-template-columns: 1fr; }
.stat-value { font-size: 1.2rem; }
.step-row { grid-template-columns: 45px 1fr; }
.step-number { width: 35px; height: 35px; font-size: 0.7rem; }
.step-title { font-size: 0.9rem; }
.step-desc { font-size: 0.75rem; }
.price-amount { font-size: 2rem; }
.price-features li { font-size: 0.75rem; }
.testimonial-text { font-size: 0.78rem; }
.cta-title { font-size: 1.3rem; }
.cta-desc { font-size: 0.8rem; }
.footer-grid { grid-template-columns: 1fr; }
.footer-brand p { max-width: 100%; }
.cta-trust { font-size: 0.62rem; gap: 0.75rem; }
.marquee-item { font-size: 0.58rem; letter-spacing: 1px; }
}
/* Hide flashlight and cursor glow on touch-only devices */
@media (hover: none) {
.flashlight { display: none; }
.cursor-glow { display: none; }
}
/* ── Mobile nav ── */
.mobile-nav {
position: fixed;
inset: 0;
z-index: 999;
background: rgba(8,6,14,0.97);
backdrop-filter: blur(24px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.mobile-nav.active { opacity: 1; pointer-events: all; }
.mobile-nav a { color: var(--gray-300); text-decoration: none; font-size: 1.5rem; font-weight: 200; transition: color 0.3s; }
.mobile-nav a:hover { color: var(--white); }
.mobile-nav-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: var(--white); font-size: 1.5rem; cursor: pointer; }

/* theme overrides: Editorial night (terracotta on warm black, Syne + Cormorant Garamond) */
:root { --primary: #cd5c45; --primary-light: #e0795f; --primary-dark: #8f3f2e; --accent: #a89f91; --accent-cool: #4a7fd4; --accent-warm: #c9953f; --emerald: #5fa77a; --rose: #cd5c45; --violet: #9a6af0;
  --dark: #0f0e0e; --dark-soft: #151414; --dark-card: #1a1919; --dark-card-alpha: rgba(26,25,25,0.85);
  --gray-900: #1a1919; --gray-800: #262424; --gray-700: #3a3836; --gray-600: #5c5a57; --gray-400: #8d8a86; --gray-300: #b9b5af; --white: #e0dedb;
  --glass: rgba(224,222,219,0.04); --glass-border: rgba(224,222,219,0.1);
  --gradient-1: linear-gradient(135deg, #cd5c45, #e0795f); --gradient-2: linear-gradient(135deg, #a89f91, #cd5c45); --gradient-3: linear-gradient(135deg, #e0795f, #a89f91); }
body { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 1.1rem; background: var(--dark); color: var(--gray-300); font-variant-numeric: lining-nums; }
h1, h2, h3, .section-title, .cta-title, .bento-title, .step-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--white); }
h1 { font-weight: 400; letter-spacing: -1px; }
.stat-value, .hero-dash-value, .step-number, .logo, .nav-links a, .btn-primary, .btn-ghost, .btn-twitch, .section-label, .hero-badge, .hero-dash-label, .marquee-item, .footer-heading, .stat-label, .nav-cta, .mobile-link, .pill, .lib-table th, .preview-tag, .chip-row span, .lib-cat {
  font-family: 'Syne', ui-sans-serif, system-ui, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; }
.chip-row span, .lib-cat, .pill { font-size: .68rem; }
.logo { font-size: 1rem; letter-spacing: .2em; }
.btn-primary, .btn-ghost, .btn-twitch { border-radius: 0; font-size: .72rem; }
.btn-primary { background: var(--primary); color: var(--dark); border: 1px solid var(--primary); border-bottom-width: 1px !important; }
.btn-primary:hover { background: transparent; color: var(--primary-light); }
.btn-twitch { background: #9146ff !important; color: #fff !important; border: 1px solid #9146ff !important; }
.btn-twitch:hover { background: transparent !important; color: #b58cff !important; }
.gradient-text { background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-badge-dot { background: var(--primary) !important; }
.bento-card, .hero-dash-card, .stats-inner, .cta-card, .lib-card, .step-visual-card, .gradient-border { border-radius: 0 !important; }
.bento-icon { border-radius: 50% !important; }
.hero-dash-badge, .hero-badge { border-radius: 999px; }
.cursor-glow, .flashlight { display: none; }
.bg-noise { opacity: .04; }

/* ---- additions for the real app ---- */
.bento-card .viz-wheel { display:block; margin:1.25rem auto 0; width:min(220px,60%); height:auto; filter: drop-shadow(0 10px 30px rgba(205,92,69,.25)); }
.bento-card .viz-wheel .spin { transform-origin: 100px 100px; animation: wheelSpin 18s linear infinite; }
@keyframes wheelSpin { to { transform: rotate(360deg); } }
.chip-row { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.chip-row span { padding:.3rem .7rem; border-radius:100px; font-size:.75rem; border:1px solid var(--glass-border); background:rgba(255,255,255,.04); color: var(--gray-300); }
.join-box { margin-top:1rem; display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem; border-radius:10px; background:rgba(0,0,0,.35); border:1px solid var(--glass-border); font-family:'SF Mono','Fira Code',monospace; font-size:.78rem; color: var(--primary-light); overflow:hidden; }
.join-box i { color: var(--gray-400); }
.join-teams { margin-top:.8rem; display:flex; gap:.5rem; }
.join-teams span { flex:1; text-align:center; padding:.45rem; border-radius:8px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.lib-card { grid-column:1/-1; background:var(--dark-card-alpha); border:1px solid var(--glass-border); border-radius:12px; display:grid; grid-template-columns:250px 1fr; overflow:hidden; }
.lib-side { padding:1.5rem; border-inline-end:1px solid var(--glass-border); background:rgba(0,0,0,.2); }
.lib-main { padding:1.5rem; overflow-x:auto; }
.lib-cat { padding:.4rem .75rem; border-radius:100px; font-size:.8rem; color:var(--gray-300); }
.lib-cat.on { background:var(--primary); color:#000; font-weight:700; }
.lib-table { width:100%; text-align:start; border-collapse:collapse; font-size:.85rem; min-width:460px; }
.lib-table th { padding:.75rem 0; color:var(--gray-400); font-weight:600; border-bottom:1px solid var(--glass-border); text-align:start; }
.lib-table td { padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.05); }
.lib-table tr:last-child td { border-bottom:0; }
.pill { padding:.2rem .55rem; border-radius:4px; font-size:.7rem; }
.pill.easy { background:rgba(95,167,122,.2); color:var(--emerald); }
.pill.medium { background:rgba(201,149,63,.2); color:var(--accent-warm); }
.pill.hard { background:rgba(205,92,69,.2); color:var(--rose); }
.preview-tag { display:inline-block; margin-top:.25rem; font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-400); }
@media (max-width: 768px) { .lib-card { grid-template-columns:1fr; } .lib-side { border-inline-end:0; border-bottom:1px solid var(--glass-border); } }
@media (prefers-reduced-motion: reduce) { .reveal,.reveal-left,.reveal-right,.reveal-scale { opacity:1 !important; transform:none !important; transition:none !important; } .viz-wheel .spin, .marquee-track { animation:none !important; } }

/* Cormorant runs small: lift the reading sizes */
.hero-desc { font-size: 1.35rem; } .section-subtitle, .cta-desc { font-size: 1.25rem; } .bento-desc, .step-desc { font-size: 1.08rem; line-height: 1.5; }
.footer-brand p, .footer-links a, .cta-trust, .footer-bottom { font-size: 1rem; } .lib-table td { font-size: 1.05rem; } input { font-family: inherit; }
.hero-desc, .section-subtitle { color: var(--gray-300); font-weight: 500; line-height: 1.5; }
.bento-desc, .step-desc { color: var(--gray-300); font-weight: 500; }