:root {
--bg-deepest: #08041A;
--bg-dark: #150B3D;
--bg-surface: #1F1248;
--bg-elevated: #2A1A5C;
--purple-deep: #6D28D9;
--purple-primary: #7C3AED;
--purple-light: #A78BFA;
--purple-subtle: #C4B5FD;
--yellow: #FACA33;
--orange: #F59E0B;
--glow-purple: rgba(124, 58, 237, 0.4);
--glow-magenta: rgba(236, 72, 153, 0.3);
--glow-yellow: rgba(250, 202, 51, 0.25);
--text-primary: #FFFFFF;
--text-secondary: rgba(255, 255, 255, 0.7);
--text-tertiary: rgba(255, 255, 255, 0.5);
--text-disabled: rgba(255, 255, 255, 0.3);
--border-subtle: rgba(167, 139, 250, 0.12);
--border-default: rgba(167, 139, 250, 0.2);
--border-strong: rgba(167, 139, 250, 0.35);
--success: #10B981;
--error: #EF4444;
--warning: #F59E0B;
--info: #6D28D9;
--font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'Geist Mono', 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
--font-serif: 'Times New Roman', Georgia, serif;
--text-xs: 0.8125rem;
--text-sm: 0.9375rem;
--text-base: 1.0625rem;
--text-lg: 1.25rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.5rem;
--text-4xl: 3.5rem;
--text-5xl: 4.25rem;
--text-6xl: 5rem;
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-extrabold: 800;
--leading-tight: 1.05;
--leading-snug: 1.15;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
--tracking-tighter: -0.03em;
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.05em;
--tracking-wider: 0.1em;
--tracking-widest: 0.15em;
--space-0: 0;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-32: 8rem;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-pill: 999px;
--radius-full: 50%;
--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);
--shadow-glow-purple: 0 0 40px rgba(124, 58, 237, 0.35);
--shadow-glow-yellow: 0 0 30px rgba(250, 202, 51, 0.3);
--shadow-cta: 0 8px 24px rgba(250, 202, 51, 0.25), 0 0 1px rgba(255, 255, 255, 0.1) inset;
--bp-sm: 640px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1200px;
--container-wide: 1400px;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--transition-fast: 0.15s var(--ease-out);
--transition-default: 0.2s var(--ease-out);
--transition-slow: 0.3s var(--ease-out);
}
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
overflow-x: clip;
}
html, body {
overflow-x: clip;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--text-primary);
background-color: var(--bg-deepest);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(ellipse 80% 40% at 15% 15%, var(--glow-purple) 0%, transparent 55%),
radial-gradient(ellipse 60% 35% at 85% 50%, var(--glow-magenta) 0%, transparent 50%),
radial-gradient(ellipse 50% 30% at 50% 85%, var(--glow-yellow) 0%, transparent 50%);
background-size: 200% 200%;
animation: aurora-drift 26s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
0% { background-position: 0% 0%; transform: scale(1); opacity: 0.98; }
13% { background-position: 24% 7%; transform: scale(1.04); opacity: 1; }
27% { background-position: 50% 15%; transform: scale(1.06); opacity: 0.98; }
40% { background-position: 28% 8%; transform: scale(1.05); opacity: 1; }
46% { background-position: 64% 26%; transform: scale(1.03); opacity: 0.95; }
50% { background-position: 98% 46%; transform: scale(1.02); opacity: 0.92; }
54% { background-position: 64% 26%; transform: scale(1.03); opacity: 0.95; }
60% { background-position: 28% 8%; transform: scale(1.05); opacity: 1; }
73% { background-position: 50% 15%; transform: scale(1.06); opacity: 0.98; }
87% { background-position: 24% 7%; transform: scale(1.04); opacity: 1; }
100% { background-position: 0% 0%; transform: scale(1); opacity: 0.98; }
}
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.035;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
.marketing-header,
.dashboard-header,
.newpage-hero,
.newpage-body,
.newpage-cta,
.section,
.footer {
position: relative;
z-index: 1;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: var(--font-bold);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
color: var(--text-primary);
}
p {
margin: 0;
line-height: var(--leading-normal);
color: var(--text-secondary);
}
a {
color: var(--purple-light);
text-decoration: none;
transition: color var(--transition-default);
}
a:hover {
color: var(--yellow);
}
ul, ol {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
display: block;
}
button {
font-family: inherit;
cursor: pointer;
}
:focus-visible {
outline: 2px solid var(--purple-light);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
::selection {
background: rgba(167, 139, 250, 0.3);
color: #fff;
}
.display-1 {
font-size: clamp(2.5rem, 4.5vw, 4.5rem);
font-weight: var(--font-extrabold);
letter-spacing: var(--tracking-tighter);
line-height: 1.05;
}
.display-2 {
font-size: clamp(2rem, 3vw, 2.75rem);
font-weight: var(--font-bold);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-snug);
}
.hero-title-base {
display: block;
background: linear-gradient(135deg, var(--purple-light) 0%, #ffffff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; color: #fff;
}
.hero-title-yellow {
display: block;
background: linear-gradient(110deg, var(--purple-light) 0%, var(--purple-primary) 40%, var(--text-primary) 60%, var(--purple-light) 100%);
background-size: 200% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: #fff;
animation: shimmer-flow 8s ease-in-out infinite alternate;
font-size: 0.95em;
margin-top: 0.15em;
}
.hero-title-gradient {
background: linear-gradient(
110deg,
var(--purple-light) 0%,
var(--purple-primary) 40%,
var(--text-primary) 60%,
var(--purple-light) 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; color: #fff;
animation: shimmer-flow 8s ease-in-out infinite alternate;
}
@keyframes shimmer-flow {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.heading-section {
font-size: clamp(2rem, 3vw, 3rem);
font-weight: var(--font-bold);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-snug);
}
.lead {
font-size: var(--text-lg);
color: var(--text-secondary);
line-height: var(--leading-normal);
}
.text-eyebrow {
display: inline-block;
font-size: var(--text-xs);
color: var(--purple-subtle);
background: rgba(167, 139, 250, 0.12);
border: 0.5px solid rgba(167, 139, 250, 0.25);
border-radius: var(--radius-pill);
padding: var(--space-1) var(--space-3);
font-weight: var(--font-medium);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.text-mono {
font-family: var(--font-mono);
}
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-yellow { color: var(--yellow); }
.text-purple { color: var(--purple-light); }
.gradient-text {
background: linear-gradient(135deg, var(--purple-light) 0%, var(--yellow) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; color: #fff;
}
.gradient-text-multi {
background: linear-gradient(90deg, var(--purple-subtle) 0%, #EC4899 50%, var(--orange) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; color: #fff;
}
.container {
width: 100%;
max-width: var(--container-xl);
margin-inline: auto;
padding-inline: clamp(1rem, 3vw, 2rem);
}
.section {
padding-block: var(--space-16);
}
.section-tight {
padding-block: var(--space-10);
}
.section-loose {
padding-block: var(--space-24);
}
.aurora-soft {
background:
radial-gradient(ellipse 60% 50% at 15% 20%, var(--glow-purple) 0%, transparent 55%),
radial-gradient(ellipse 50% 45% at 85% 75%, var(--glow-magenta) 0%, transparent 50%),
radial-gradient(ellipse 40% 35% at 50% 100%, var(--glow-yellow) 0%, transparent 50%),
var(--bg-deepest);
}
.aurora-spotlight {
background:
radial-gradient(ellipse 80% 50% at 50% 0%, var(--glow-purple) 0%, transparent 60%),
var(--bg-deepest);
}
.aurora-center {
background:
radial-gradient(ellipse 70% 80% at 50% 50%, var(--glow-purple) 0%, transparent 65%),
var(--bg-deepest);
}
.aurora-subtle {
background:
radial-gradient(ellipse 50% 50% at 50% 0%, rgba(124, 58, 237, 0.15) 0%, transparent 70%),
var(--bg-dark);
}
.tile {
background-color: var(--bg-surface);
border: 0.5px solid var(--border-subtle);
border-radius: 16px;
padding: var(--space-6);
position: relative;
overflow: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.tile:hover {
transform: translateY(-4px);
border-color: rgba(167, 139, 250, 0.5);
box-shadow:
0 10px 40px -10px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(167, 139, 250, 0.2);
}
.tile-icon {
width: 32px;
height: 32px;
color: var(--yellow);
margin-bottom: var(--space-4);
stroke-width: 1.75;
flex-shrink: 0;
}
.tile-featured {
border-top: 3px solid var(--yellow);
}
.tile-featured:hover {
box-shadow:
0 10px 40px -10px rgba(0, 0, 0, 0.5),
0 0 0 1px var(--yellow),
0 0 30px -10px var(--yellow);
}
.tile-glass {
background-color: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.tile-gradient {
background: linear-gradient(135deg, #4C1D95 0%, var(--purple-primary) 100%);
border-color: rgba(167, 139, 250, 0.3);
}
.tile-gradient:hover {
background: linear-gradient(135deg, #5B21B6 0%, #8B4FFA 100%);
}
.tile-yellow {
background: var(--yellow);
color: var(--bg-dark);
border-color: rgba(0, 0, 0, 0.1);
}
.tile-yellow:hover {
background: #FCD34D;
}
.tile-orange {
background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%);
color: #4A2600;
border-color: rgba(0, 0, 0, 0.1);
}
.tile-elevated {
background-color: var(--bg-elevated);
}
.tile-vstack {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-3);
}
.tile-vstack .btn,
.tile-vstack a.btn,
.tile-vstack > a:last-child {
margin-top: auto;
}
.tile p,
.card-glass p {
font-size: 1.125rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.85);
}
.tile h2 {
font-size: 1.625rem;
font-weight: var(--font-bold);
margin-bottom: var(--space-3);
}
.faq-item {
position: relative;
background: linear-gradient(180deg, rgba(31, 18, 72, 0.6) 0%, rgba(31, 18, 72, 0.3) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 0.5px solid var(--border-subtle);
border-radius: 16px;
margin-bottom: var(--space-3);
overflow: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item:hover {
border-color: var(--border-default);
}
.faq-item[open] {
background: linear-gradient(180deg, rgba(124, 58, 237, 0.15) 0%, rgba(31, 18, 72, 0.5) 100%);
border-color: rgba(167, 139, 250, 0.4);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: var(--space-5) var(--space-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary:focus-visible {
outline: 2px solid var(--purple-light);
outline-offset: -2px;
}
.faq-question {
font-size: 1.5rem;
font-weight: var(--font-bold);
color: var(--text-primary);
line-height: var(--leading-snug);
}
.faq-caret {
flex-shrink: 0;
color: var(--purple-light);
transition: transform var(--transition-default), color var(--transition-default);
}
.faq-item:hover .faq-caret {
color: var(--text-primary);
}
.faq-item[open] .faq-caret {
transform: rotate(180deg);
color: var(--yellow);
}
.faq-answer {
padding: 0 var(--space-6) var(--space-5);
}
.faq-answer p {
font-size: 1.125rem;
line-height: 1.7;
color: var(--text-secondary);
margin: 0;
}
.info-callout {
border-left: 2px solid var(--yellow);
background: rgba(250, 202, 51, 0.04);
padding: 1.25rem 1.5rem;
border-radius: 0 12px 12px 0;
margin: 2rem auto;
max-width: 1200px;
}
.info-callout-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.info-callout-icon {
width: 18px;
height: 18px;
color: var(--yellow);
flex-shrink: 0;
}
.info-callout h2,
.info-callout h3 {
font-size: 1rem;
font-weight: var(--font-bold);
margin: 0;
color: var(--yellow);
}
.info-callout p {
font-size: 0.875rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.8);
margin: 0;
}
.brand-pullquote {
max-width: 720px;
margin: 4rem auto 2rem;
padding: 0 2rem;
border-left: 2px solid rgba(167, 139, 250, 0.3);
}
.brand-pullquote p {
font-size: 1.125rem;
line-height: 1.65;
font-style: italic;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
.brand-divider {
width: 60px;
height: 2px;
background: var(--yellow);
margin: 0 auto var(--space-6);
border-radius: 2px;
}
.section-eyebrow-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
margin-bottom: 1.75rem;
}
.section-eyebrow-line {
width: 40px;
height: 2px;
background: var(--yellow);
border-radius: 2px;
}
.bento-row-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1.25rem;
}
@media (max-width: 640px) {
.bento-row-3 {
grid-template-columns: 1fr;
}
}
.bento-feature {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
grid-template-rows: auto auto;
gap: var(--space-2);
}
.bento-feature > :first-child {
grid-row: span 2;
}
@media (max-width: 768px) {
.bento-feature {
grid-template-columns: 1fr 1fr;
}
.bento-feature > :first-child {
grid-column: 1 / -1;
grid-row: auto;
}
}
.bento-six {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
}
.bento-six .tile-wide {
grid-column: span 2;
}
@media (max-width: 768px) {
.bento-six {
grid-template-columns: 1fr 1fr;
}
.bento-six .tile-wide {
grid-column: span 2;
}
}
@media (max-width: 480px) {
.bento-six {
grid-template-columns: 1fr;
}
.bento-six .tile-wide {
grid-column: span 1;
}
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
letter-spacing: 0;
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
transition: all var(--transition-default);
text-decoration: none;
white-space: nowrap;
}
.btn-primary,
.btn.btn-primary {
background-color: var(--purple-primary);
color: var(--text-primary);
border-color: var(--purple-primary);
}
.btn-primary:hover,
.btn.btn-primary:hover {
background-color: var(--purple-deep);
border-color: var(--purple-deep);
color: var(--text-primary);
}
.btn-yellow {
background-color: var(--yellow);
color: var(--bg-dark);
border-color: var(--yellow);
font-weight: var(--font-bold);
}
.btn-yellow:hover {
background-color: #FCD34D;
box-shadow: var(--shadow-glow-yellow);
color: var(--bg-dark);
}
.btn-secondary,
.btn.btn-default {
background-color: rgba(255, 255, 255, 0.08);
color: var(--text-primary);
border-color: rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover,
.btn.btn-default:hover {
background-color: rgba(255, 255, 255, 0.15);
color: var(--text-primary);
}
.btn-ghost {
background-color: transparent;
color: var(--text-secondary);
border-color: transparent;
}
.btn-ghost:hover {
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.06);
}
.btn-pill {
border-radius: var(--radius-pill);
padding-inline: var(--space-6);
}
.btn-lg {
font-size: var(--text-base);
padding: var(--space-4) var(--space-8);
}
.btn-xs {
font-size: var(--text-xs);
padding: var(--space-1) var(--space-3);
}
.btn-sm {
font-size: var(--text-sm);
padding: var(--space-2) var(--space-4);
}
.tile-button-group {
display: flex;
gap: var(--space-2);
margin-top: auto;
flex-wrap: wrap;
}
.tile-button-group .btn {
flex: 1;
min-width: 0;
white-space: nowrap;
}
.card {
background-color: var(--bg-surface);
border: 0.5px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.card-glass {
background-color: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.card-stat {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.card-stat .label {
font-size: var(--text-xs);
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
font-weight: var(--font-medium);
}
.card-stat .value {
font-size: var(--text-3xl);
font-weight: var(--font-extrabold);
color: var(--text-primary);
line-height: 1;
}
.card-stat .delta {
font-size: var(--text-xs);
color: var(--success);
margin-top: var(--space-1);
}
.card-stat .delta-yellow {
color: var(--yellow);
}
.logo {
display: inline-flex;
align-items: baseline;
gap: 1px;
font-weight: var(--font-bold);
letter-spacing: var(--tracking-tighter);
font-size: clamp(20px, 2.5vw, 28px);
color: var(--text-primary);
text-decoration: none;
}
.logo:hover {
color: var(--text-primary);
}
.logo-text {
color: var(--text-primary);
}
.logo-arrow {
color: var(--yellow);
font-size: 1.1em;
transform: translateY(-3px) rotate(-15deg);
display: inline-block;
}
.logo img {
height: clamp(28px, 3.5vw, 40px);
width: auto;
object-fit: contain;
display: block;
}
.navbar,
.navbar-default {
background-color: transparent;
border: none;
margin-bottom: 0;
}
.nav-pill {
background-color: rgba(255, 255, 255, 0.05);
border: 0.5px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-pill);
padding: var(--space-2) var(--space-4);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.nav-links {
display: flex;
align-items: center;
gap: var(--space-4);
list-style: none;
}
.nav-links a,
.nav-links li > a {
color: var(--text-secondary);
font-size: var(--text-sm);
text-decoration: none;
padding: 0.5rem 0.875rem;
border-radius: var(--radius-sm);
transition: color var(--transition-default);
}
.nav-links a:hover {
color: var(--text-primary);
}
.nav-links a.nav-cta {
color: var(--yellow);
}
.nav-links a.nav-cta-primary {
background-color: var(--yellow);
color: var(--bg-dark);
padding: var(--space-1) var(--space-4);
border-radius: var(--radius-pill);
font-weight: var(--font-semibold);
}
.nav-links a.nav-cta-primary:hover {
background-color: #FCD34D;
color: var(--bg-dark);
}
.form-group {
margin-bottom: var(--space-4);
}
.control-label,
label {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--text-secondary);
margin-bottom: var(--space-2);
}
.form-control {
width: 100%;
background-color: var(--bg-surface);
color: var(--text-primary);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
font-family: var(--font-sans);
font-size: var(--text-base);
transition: border-color var(--transition-default), background-color var(--transition-default);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-control:focus {
outline: none;
border-color: var(--purple-primary);
background-color: var(--bg-elevated);
}
.form-control::placeholder {
color: var(--text-tertiary);
}
select.form-control {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A78BFA' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-4) center;
background-size: 16px;
padding-right: var(--space-10);
}
.alert {
border-radius: var(--radius-md);
border: 1px solid;
padding: var(--space-4) var(--space-5);
margin-bottom: var(--space-4);
font-size: var(--text-sm);
}
.alert-danger,
.alert-error {
background-color: rgba(239, 68, 68, 0.12);
border-color: rgba(239, 68, 68, 0.3);
color: #FCA5A5;
}
.alert-success {
background-color: rgba(16, 185, 129, 0.12);
border-color: rgba(16, 185, 129, 0.3);
color: #6EE7B7;
}
.alert-info {
background-color: rgba(124, 58, 237, 0.12);
border-color: rgba(124, 58, 237, 0.3);
color: var(--purple-light);
}
.alert-warning {
background-color: rgba(245, 158, 11, 0.12);
border-color: rgba(245, 158, 11, 0.3);
color: var(--yellow);
}
.alert .close {
background: none;
border: none;
color: inherit;
opacity: 0.6;
font-size: var(--text-lg);
padding: 0 0 0 var(--space-3);
cursor: pointer;
}
.alert .close:hover {
opacity: 1;
}
.table {
width: 100%;
background-color: var(--bg-surface);
border-radius: var(--radius-lg);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
border: 0.5px solid var(--border-subtle);
}
.table thead th {
background-color: var(--bg-elevated);
color: var(--text-secondary);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
padding: var(--space-3) var(--space-4);
border-bottom: 0.5px solid var(--border-default);
text-align: left;
}
.table tbody td {
padding: var(--space-3) var(--space-4);
color: var(--text-primary);
font-size: var(--text-sm);
border-bottom: 0.5px solid var(--border-subtle);
}
.table tbody tr:last-child td {
border-bottom: none;
}
.table tbody tr:hover {
background-color: var(--bg-elevated);
}
.dropdown-menu {
background-color: var(--bg-elevated);
border: 0.5px solid var(--border-default);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: var(--space-2);
}
.dropdown-menu > li > a,
.dropdown-item {
color: var(--text-primary);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
}
.dropdown-menu > li > a:hover,
.dropdown-item:hover {
background-color: var(--bg-surface);
color: var(--text-primary);
}
.dropdown-menu > .active > a {
background-color: var(--purple-primary);
color: var(--text-primary);
}
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
border-radius: var(--radius-sm);
background-color: var(--bg-elevated);
color: var(--text-primary);
}
.badge-success {
background-color: rgba(16, 185, 129, 0.15);
color: var(--success);
}
.badge-yellow {
background-color: rgba(250, 202, 51, 0.15);
color: var(--yellow);
}
.badge-purple {
background-color: rgba(124, 58, 237, 0.15);
color: var(--purple-light);
}
.pill {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-4);
font-size: var(--text-sm);
border-radius: var(--radius-pill);
background-color: rgba(167, 139, 250, 0.12);
border: 0.5px solid rgba(167, 139, 250, 0.25);
color: var(--purple-subtle);
}
.footer {
background-color: var(--bg-dark);
border-top: 0.5px solid var(--border-subtle);
padding-block: var(--space-12);
margin-top: var(--space-20);
}
.footer a {
color: var(--text-secondary);
text-decoration: none;
transition: color var(--transition-default);
}
.footer a:hover {
color: var(--text-primary);
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--space-8);
margin-bottom: var(--space-12);
}
.footer-heading {
font-size: 1rem;
font-weight: var(--font-bold);
color: var(--text-primary);
margin-bottom: var(--space-4);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.footer-col a {
color: var(--text-secondary);
font-size: 1.0625rem;
}
.footer-bottom {
padding-top: var(--space-6);
border-top: 0.5px solid var(--border-subtle);
}
.footer-bottom p {
font-size: 1rem;
color: var(--text-tertiary);
}
@media (max-width: 768px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.footer-brand {
grid-column: 1 / -1;
}
}
.marketing-header,
.dashboard-header {
position: sticky;
top: 0;
z-index: 100;
padding-block: var(--space-4);
transition: background-color var(--transition-default);
}
.header-scrolled {
background-color: rgba(8, 4, 26, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.newpage-hero {
padding-block: 5rem 3rem;
text-align: center;
}
.newpage-hero .hero-meta {
margin-bottom: var(--space-6);
}
.newpage-hero h1 {
max-width: 900px;
margin-inline: auto;
margin-bottom: var(--space-6);
}
.newpage-hero .lead {
max-width: 680px;
margin-inline: auto;
font-size: 1.5rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.75);
}
.newpage-body {
padding-block: 3.5rem;
}
.container-narrow {
max-width: 960px;
margin-inline: auto;
padding-inline: clamp(1rem, 3vw, 2rem);
}
.container-wide {
width: 100%;
max-width: var(--container-wide);
margin-inline: auto;
padding-inline: clamp(1rem, 3vw, 2rem);
}
.page-content h2 {
margin-top: var(--space-12);
margin-bottom: var(--space-4);
font-size: var(--text-3xl);
}
.page-content h3 {
margin-top: var(--space-8);
margin-bottom: var(--space-3);
font-size: var(--text-2xl);
}
.page-content p {
margin-bottom: var(--space-4);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
}
.page-content ul,
.page-content ol {
padding-left: var(--space-6);
margin-bottom: var(--space-4);
}
.page-content li {
margin-bottom: var(--space-2);
color: var(--text-secondary);
}
.page-content a {
color: var(--purple-light);
}
.page-content a:hover {
color: var(--yellow);
}
.newpage-cta {
padding-block: 4rem 5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.newpage-cta::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(250, 202, 51, 0.5), transparent);
}
.newpage-cta .lead {
font-size: 1.5rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.8);
}
.cta-row {
display: flex;
gap: var(--space-4);
justify-content: center;
flex-wrap: wrap;
}
.educational-body .page-content {
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
}
@media (max-width: 768px) {
.newpage-hero {
padding-block: var(--space-12);
}
.newpage-cta {
padding-block: var(--space-12);
}
.cta-row {
flex-direction: column;
align-items: stretch;
}
}
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.hidden { display: none; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.rtl-table th,
.rtl-table td {
text-align: right;
}
.rtl-navbar .nav-links {
flex-direction: row-reverse;
}
.rtl-form .form-group {
text-align: right;
}
[dir="rtl"] .logo-arrow {
transform: translateY(-3px) rotate(15deg) scaleX(-1);
}
@media (max-width: 768px) {
.display-1 { font-size: 2rem; }
.display-2 { font-size: 1.75rem; }
.heading-section { font-size: var(--text-2xl); }
.section { padding-block: var(--space-10); }
.section-loose { padding-block: var(--space-16); }
.container { padding-inline: var(--space-4); }
.nav-links {
gap: var(--space-2);
}
.nav-links a {
font-size: var(--text-xs);
}
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }
.row { display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--space-3)); }
[class*="col-"] { padding: 0 var(--space-3); }
.col-xs-12, .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
.col-xs-6, .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
.col-xs-4, .col-sm-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-xs-3, .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
.container-fluid {
width: 100%;
padding-inline: var(--space-6);
}
.well {
background-color: var(--bg-surface);
border: 0.5px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-5);
margin-bottom: var(--space-4);
}
.pagination {
display: flex;
gap: var(--space-1);
list-style: none;
padding: 0;
}
.pagination > li > a {
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 var(--space-3);
background-color: var(--bg-surface);
border: 0.5px solid var(--border-subtle);
border-radius: var(--radius-sm);
color: var(--text-secondary);
text-decoration: none;
font-size: var(--text-sm);
transition: all var(--transition-default);
}
.pagination > li > a:hover {
background-color: var(--bg-elevated);
color: var(--text-primary);
border-color: var(--border-default);
}
.pagination > .active > a {
background-color: var(--purple-primary);
border-color: var(--purple-primary);
color: var(--text-primary);
}
@property --angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
@keyframes spin-angle {
to { --angle: 360deg; }
}
.tile {
isolation: isolate;
}
.tile::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: conic-gradient(
from var(--angle),
transparent 0deg,
var(--purple-primary) 90deg,
var(--yellow) 180deg,
var(--purple-primary) 270deg,
transparent 360deg
);
-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;
pointer-events: none;
z-index: 0;
}
.tile:hover::before {
opacity: 1;
animation: spin-angle 4s linear infinite;
}
.bento-row-3 {
position: relative;
}
.bento-row-3::after {
content: '';
position: absolute;
inset: -2rem;
pointer-events: none;
background: radial-gradient(
280px circle at var(--mx, 50%) var(--my, 50%),
rgba(167, 139, 250, 0.12),
transparent 65%
);
border-radius: 24px;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 0;
}
.bento-row-3:hover::after {
opacity: 1;
}
[data-reveal] {
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
[data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-delay="3"] { transition-delay: 240ms; }
[data-reveal][data-delay="4"] { transition-delay: 320ms; }
@keyframes faq-slide {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.faq-item[open] summary ~ * {
animation: faq-slide 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-caret {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
color var(--transition-default);
}
.btn-yellow {
position: relative;
isolation: isolate;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-yellow::after {
content: '';
position: absolute;
inset: -4px;
border-radius: inherit;
background: var(--yellow);
filter: blur(20px);
opacity: 0.4;
z-index: -1;
transition: opacity 0.3s ease;
}
.btn-yellow:hover {
transform: translateY(-1px);
}
.btn-yellow:hover::after {
opacity: 0.7;
}
.btn-yellow:active {
transform: translateY(0) scale(0.98);
transition-duration: 0.08s;
}
.still-questions {
position: relative;
padding: var(--space-10) var(--space-8);
border-radius: 24px;
isolation: isolate;
}
.tile-featured-dot {
position: absolute;
top: 1rem;
right: 1rem;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--yellow);
box-shadow: 0 0 0 0 rgba(250, 202, 51, 0.7);
animation: pulse-dot 3.5s ease-in-out infinite;
z-index: 1;
}
@keyframes pulse-dot {
0%, 100% {
box-shadow: 0 0 0 0 rgba(250, 202, 51, 0.6);
}
50% {
box-shadow: 0 0 0 8px rgba(250, 202, 51, 0);
}
}
@media (prefers-reduced-motion: reduce) {
body::before { animation: none; }
body::after { opacity: 0; }
.tile:hover::before { animation: none; }
.bento-row-3::after { display: none; }
[data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
.faq-item[open] summary ~ * { animation: none; }
.tile-featured-dot { animation: none; }
.hero-title-gradient { animation: none; background-position: 0% 50%; }
.aff-h1 { animation: none; background-position: 0% 50%; }
}
@media (max-width: 768px) {
body::before { animation: none; }
}
.skip-to-content {
position: absolute;
top: -100px;
left: 1rem;
z-index: 200;
padding: 0.75rem 1.25rem;
background: var(--yellow);
color: var(--bg-dark);
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: top 0.2s ease;
}
.skip-to-content:focus {
top: 1rem;
outline: 2px solid var(--purple-light);
outline-offset: 2px;
}
.marketing-header {
position: sticky;
top: 0;
z-index: 50;
background: transparent;
border-bottom: 1px solid transparent;
transition:
background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
border-bottom-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.marketing-header.scrolled {
background: rgba(8, 4, 26, 0.7);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom-color: rgba(124, 58, 237, 0.12);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: 1.25rem;
gap: 2rem;
transition: padding-block 0.3s var(--ease-out);
}
.marketing-header.scrolled .header-inner,
.marketing-header.header-scrolled .header-inner {
padding-block: 0.75rem;
}
.header-logo {
display: inline-flex;
align-items: center;
position: relative;
isolation: isolate;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.header-logo:hover {
transform: scale(1.03);
}
.header-logo::after {
content: "";
position: absolute;
inset: -8px;
border-radius: 12px;
background: radial-gradient(circle, var(--glow-purple), transparent 70%);
opacity: 0;
z-index: -1;
transition: opacity 0.3s ease;
}
.header-logo:hover::after { opacity: 0.5; }
.header-logo-img {
height: 32px;
width: auto;
aspect-ratio: 3000 / 575;
object-fit: contain;
display: block;
}
.header-logo .logo-text,
.header-logo .logo-arrow {
display: inline-block;
font-weight: 700;
font-size: 1.25rem;
letter-spacing: -0.02em;
}
.header-logo .logo-arrow { color: var(--yellow); transform: rotate(-15deg); }
.header-nav {
flex: 1;
display: flex;
justify-content: center;
}
.header-nav-list {
display: flex;
align-items: center;
gap: 1.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.header-nav-item { display: inline-flex; }
.header-nav-link {
position: relative;
display: inline-block;
padding-block: 0.5rem;
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
transition: color 0.2s ease;
white-space: nowrap;
}
.header-nav-link:hover { color: rgba(255, 255, 255, 1); }
.header-nav-link::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--purple-primary), transparent);
transition:
width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.header-nav-link:hover::after {
width: 100%;
left: 0;
}
.header-cta {
display: flex;
align-items: center;
gap: 0.75rem;
}
.header-mega-chevron {
width: 13px; height: 13px; margin-inline-start: 4px; vertical-align: -1px;
opacity: 0.7; transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
}
.has-mega:hover .header-mega-chevron,
.has-mega:focus-within .header-mega-chevron { transform: rotate(180deg); opacity: 1; }
.header-mega {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
width: min(860px, calc(100vw - 40px));
padding-top: 12px;
opacity: 0;
visibility: hidden;
z-index: 60;
transition:
opacity 0.2s var(--ease-out) 0.2s,
transform 0.2s var(--ease-out) 0.2s,
visibility 0s linear 0.4s;
}
.header-mega::after {
content: "";
position: absolute;
top: -18px;
left: -40px;
right: -40px;
height: 20px;
}
.header-mega::before {
content: "";
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: 40px;
}
.has-mega:hover .header-mega,
.has-mega:focus-within .header-mega {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition:
opacity 0.2s var(--ease-out) 0s,
transform 0.2s var(--ease-out) 0s,
visibility 0s linear 0s;
}
.header-mega-inner {
position: relative;
overflow: hidden;
isolation: isolate;
display: grid;
grid-template-columns: 236px 1fr;
gap: 16px;
padding: 16px;
border-radius: 18px;
background: linear-gradient(180deg, rgba(31,18,72,0.99), rgba(18,9,52,0.99));
border: 1px solid rgba(167,139,250,0.2);
box-shadow: 0 30px 80px -30px rgba(8,4,26,0.92), inset 0 1px 0 rgba(255,255,255,0.05);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
.header-mega-inner::before {
content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
background:
radial-gradient(420px circle at 16% 0%, rgba(124,58,237,0.26), transparent 70%),
radial-gradient(360px circle at 100% 100%, rgba(250,202,51,0.10), transparent 70%);
}
.header-mega-feat {
display: flex; flex-direction: column; gap: 8px;
padding: 18px; border-radius: 14px; text-decoration: none;
background: linear-gradient(160deg, rgba(124,58,237,0.18), rgba(124,58,237,0.05));
border: 1px solid rgba(167,139,250,0.25);
transition: transform 0.25s var(--ease-out), border-color 0.25s ease, background 0.25s ease;
}
.header-mega-feat:hover {
transform: translateY(-2px); border-color: rgba(167,139,250,0.5);
background: linear-gradient(160deg, rgba(124,58,237,0.28), rgba(124,58,237,0.08));
}
.header-mega-feat-ic {
width: 42px; height: 42px; border-radius: 11px; display: inline-flex;
align-items: center; justify-content: center; color: var(--purple-light);
background: rgba(255,255,255,0.06); border: 1px solid rgba(167,139,250,0.25);
}
.header-mega-feat-ic svg { width: 22px; height: 22px; }
.header-mega-feat-title { font-size: 16px; font-weight: 700; color: #fff; }
.header-mega-feat-sub { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.6); }
.header-mega-feat-cta {
margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; font-weight: 600; color: var(--purple-light);
}
.header-mega-feat-cta svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease-out); }
.header-mega-feat:hover .header-mega-feat-cta svg { transform: translateX(3px); }
.header-mega-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 3px; align-content: start;
}
.header-mega-item {
display: flex; align-items: center; gap: 9px;
padding: 7px 9px; border-radius: 10px; text-decoration: none;
color: rgba(255,255,255,0.78);
transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out), transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.header-mega-item:hover { background: rgba(167,139,250,0.1); color: #fff; transform: translate(2px, -2px); box-shadow: 0 6px 16px -8px rgba(167, 139, 250, 0.45); }
@media (prefers-reduced-motion: no-preference) {
@keyframes header-mega-item-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.has-mega:hover .header-mega-feat,
.has-mega:focus-within .header-mega-feat,
.has-mega:hover .header-mega-item,
.has-mega:focus-within .header-mega-item {
animation-name: header-mega-item-in;
animation-duration: 0.34s;
animation-timing-function: var(--ease-out);
animation-fill-mode: backwards;
}
.header-mega-feat { animation-delay: 0ms; }
.header-mega-item:nth-child(1) { animation-delay: 45ms; }
.header-mega-item:nth-child(2) { animation-delay: 63ms; }
.header-mega-item:nth-child(3) { animation-delay: 81ms; }
.header-mega-item:nth-child(4) { animation-delay: 99ms; }
.header-mega-item:nth-child(5) { animation-delay: 117ms; }
.header-mega-item:nth-child(6) { animation-delay: 135ms; }
.header-mega-item:nth-child(7) { animation-delay: 153ms; }
.header-mega-item:nth-child(8) { animation-delay: 171ms; }
.header-mega-item:nth-child(9) { animation-delay: 189ms; }
.header-mega-item:nth-child(10) { animation-delay: 207ms; }
.header-mega-item:nth-child(11) { animation-delay: 225ms; }
.header-mega-item:nth-child(12) { animation-delay: 243ms; }
.header-mega-item:nth-child(13) { animation-delay: 261ms; }
.header-mega-item:nth-child(14) { animation-delay: 279ms; }
.header-mega-item:nth-child(15) { animation-delay: 297ms; }
.header-mega-item:nth-child(16) { animation-delay: 315ms; }
.header-mega-item:nth-child(17) { animation-delay: 333ms; }
.header-mega-item:nth-child(18) { animation-delay: 351ms; }
.header-mega-item:nth-child(19) { animation-delay: 369ms; }
.header-mega-item:nth-child(20) { animation-delay: 387ms; }
.header-mega-item:nth-child(21) { animation-delay: 405ms; }
.header-mega-item:nth-child(22) { animation-delay: 423ms; }
.header-mega-item:nth-child(23) { animation-delay: 441ms; }
}
.header-mega-ic {
width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px;
border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center;
}
.header-mega-ic svg { width: 16px; height: 16px; }
.header-mega-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 959px) {
.header-mega, .header-mega-chevron { display: none; }
}
.m-nav-sub-row { display: flex; align-items: center; justify-content: space-between; }
.m-nav-sub-row > a { flex: 1; border-bottom: none; }
.m-nav-sub-row { border-bottom: 1px solid rgba(255,255,255,0.06); }
.m-nav-sub-toggle {
flex-shrink: 0; width: 44px; height: 44px; background: none; border: none; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.55);
-webkit-tap-highlight-color: rgba(124,58,237,0.2); transition: color 0.2s ease;
}
.m-nav-sub-toggle:hover, .m-nav-sub-toggle:focus-visible { color: var(--purple-light); }
.m-nav-sub-toggle svg { width: 22px; height: 22px; transition: transform 0.3s var(--ease-out); }
.m-nav-sub.is-open .m-nav-sub-toggle svg { transform: rotate(180deg); }
.m-nav-sublist {
list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden;
transition: max-height 0.4s var(--ease-out);
}
.m-nav-sub.is-open .m-nav-sublist { max-height: 1500px; }
.m-nav-sublist li a {
font-size: 1.05rem; font-weight: 500;
padding: 0.65rem 0 0.65rem 1rem;
color: rgba(255,255,255,0.68);
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.m-nav-sublist li a:hover, .m-nav-sublist li a:focus-visible { color: var(--purple-light); padding-left: 1.4rem; }
.m-nav-sublist li a.m-nav-sub-all { color: var(--purple-light); font-weight: 600; }
.header-signin {
color: rgba(255, 255, 255, 0.75);
font-weight: 500;
font-size: 14px;
padding: 0.5rem 1rem;
text-decoration: none;
transition: color 0.2s ease;
}
.header-signin:hover { color: white; }
.header-signup {
font-size: 14px;
padding: 0.5rem 1.25rem;
}
.header-burger {
display: none;
width: 48px;
height: 48px;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
padding: 0;
position: relative;
cursor: pointer;
flex-direction: column;
-webkit-tap-highlight-color: transparent;
}
.header-burger span {
display: block;
width: 24px;
height: 2px;
background: white;
margin: 5px 0;
border-radius: 2px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s ease;
}
.header-burger[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.header-burger[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.header-burger[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
@media (max-width: 959px) {
.header-nav,
.header-cta {
display: none;
}
.header-burger {
display: flex;
}
}
.site-footer {
position: relative;
margin-top: 6rem;
padding-block: 5rem 2rem;
background: linear-gradient(180deg,
transparent 0%,
rgba(8, 4, 26, 0.75) 25%,
var(--bg-deepest) 60%);
border-top: 1px solid rgba(124, 58, 237, 0.12);
isolation: isolate;
z-index: 1;
}
.site-footer::before {
content: "";
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 200px;
background: radial-gradient(
ellipse 70% 100% at 50% 0%,
rgba(124, 58, 237, 0.06),
transparent 70%);
opacity: 0.5;
pointer-events: none;
z-index: -1;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 4rem;
}
@media (min-width: 768px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
}
}
@media (min-width: 1024px) {
.footer-grid {
grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
gap: 2rem;
}
}
.footer-brand .footer-logo {
display: inline-flex;
align-items: center;
margin-bottom: 1.5rem;
text-decoration: none;
}
.footer-brand .footer-logo-img {
height: 32px;
width: auto;
}
.footer-brand-text p {
font-size: 0.9375rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 1rem;
}
.footer-brand-text p:last-child { margin-bottom: 0; }
.footer-social {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 2rem;
padding: 0;
list-style: none;
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.7);
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.footer-social a:hover {
background: rgba(124, 58, 237, 0.08);
border-color: rgba(124, 58, 237, 0.3);
color: white;
transform: translateY(-2px);
}
.footer-social a svg {
width: 20px;
height: 20px;
display: block;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.footer-social a:hover svg {
transform: scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
.footer-social a svg { transition: none; }
}
.footer-column-title {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin: 0 0 1.25rem 0;
}
.footer-link-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.footer-link-list a {
position: relative;
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
display: inline-block;
}
.footer-link-list a:hover {
color: var(--purple-subtle);
transform: translateX(4px);
}
.footer-link-list a::after {
content: "\002192";
position: absolute;
right: -1.25rem;
opacity: 0;
transform: translateX(-4px);
transition: opacity 0.2s ease, transform 0.2s ease;
color: var(--purple-primary);
}
.footer-link-list a:hover::after {
opacity: 1;
transform: translateX(0);
}
.site-footer .footer-bottom {
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1.5rem;
flex-wrap: wrap;
}
.footer-legal {
display: flex;
align-items: center;
gap: 1rem;
}
.footer-legal a {
font-size: 0.875rem;
color: var(--text-tertiary);
text-decoration: none;
transition: color 0.25s var(--ease-out);
}
.footer-legal a:hover { color: var(--purple-subtle); }
.footer-bottom .footer-copyright,
.footer-bottom .footer-legal a {
font-size: 0.875rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.55);
}
.footer-bottom .footer-legal a:hover { color: var(--purple-subtle); }
@media (max-width: 600px) {
.footer-bottom { flex-direction: column; text-align: center; }
}
.footer-trust {
margin-top: 1rem;
padding: 1.5rem 0;
border-top: 1px solid var(--border-default);
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.footer-trust-signals {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem 1.75rem;
}
.footer-trust-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.75);
}
.footer-trust-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 8px;
flex-shrink: 0;
}
.footer-trust-ic svg { width: 15px; height: 15px; }
.ft-ic-green { color: var(--success); background: rgba(16, 185, 129, 0.12); }
.ft-ic-lav { color: var(--purple-light); background: rgba(167, 139, 250, 0.12); }
.ft-ic-yellow { color: var(--yellow); background: rgba(250, 202, 51, 0.12); }
.footer-trust-pay {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.footer-pay-badge {
font-size: 0.8125rem;
font-weight: 700;
padding: 5px 11px;
border-radius: 7px;
background: #ffffff;
color: #1a1a2e;
line-height: 1;
transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.footer-pay-badge:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5);
}
.fp-visa { color: #1A1F71; }
.fp-mc { color: #EB001B; }
.fp-pp { color: #003087; }
.fp-crypto { color: #B45309; }
.fp-payoneer { color: #D83A00; }
.fp-bank { color: #5B4B8A; }
.footer-copyright {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.5);
margin: 0;
}
@media (prefers-reduced-motion: reduce) {
.header-logo,
.header-logo::after,
.header-nav-link::after,
.footer-social a,
.footer-link-list a,
.footer-link-list a::after,
.marketing-header {
transition: none;
}
}
.mobile-overlay {
position: fixed;
inset: 0;
z-index: 100;
background: var(--bg-deepest);
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
overflow: clip;
overscroll-behavior: contain;
visibility: hidden;
}
.mobile-overlay.is-open {
transform: translateX(0);
visibility: visible;
}
.mobile-overlay::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 40% at 20% 30%, var(--glow-purple), transparent 60%),
radial-gradient(ellipse 50% 30% at 80% 70%, var(--glow-magenta), transparent 60%);
opacity: 0.4;
pointer-events: none;
z-index: -1;
}
.mobile-overlay-inner {
min-height: 100vh;
padding: 1.5rem 1.5rem 2rem;
padding-top: max(1.5rem, env(safe-area-inset-top, 0px));
padding-bottom: calc(env(safe-area-inset-bottom, 0) + 2rem);
display: flex;
flex-direction: column;
position: relative;
}
.mobile-overlay-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: all 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.mobile-overlay-close:hover,
.mobile-overlay-close:focus-visible {
background: rgba(124, 58, 237, 0.1);
border-color: rgba(124, 58, 237, 0.3);
color: white;
}
.mobile-overlay-logo {
display: inline-block;
margin-bottom: 3rem;
align-self: flex-start;
}
.mobile-overlay-logo img {
height: 32px;
width: auto;
}
.mobile-overlay-nav {
flex: 1;
margin-top: 1.25rem;
margin-bottom: 2rem;
}
.mobile-overlay-nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.mobile-overlay-nav a {
display: block;
padding: 1rem 0;
font-size: 1.5rem;
font-weight: 500;
color: white;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
transition: color 0.2s ease, padding 0.2s ease;
-webkit-tap-highlight-color: rgba(124, 58, 237, 0.2);
}
.mobile-overlay-nav a:hover,
.mobile-overlay-nav a:focus-visible {
color: var(--purple-light);
padding-left: 0.5rem;
}
.mobile-overlay-cta {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 2rem;
}
.mobile-overlay-cta .btn {
width: 100%;
text-align: center;
padding: 1rem;
font-size: 1rem;
}
.mobile-overlay-social {
display: flex;
justify-content: center;
gap: 0.75rem;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.mobile-overlay-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.7);
transition: all 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.mobile-overlay-social a:hover,
.mobile-overlay-social a:focus-visible {
background: rgba(124, 58, 237, 0.1);
border-color: rgba(124, 58, 237, 0.3);
color: white;
transform: translateY(-2px);
}
.mobile-overlay-social svg {
width: 20px;
height: 20px;
}
body.no-scroll {
position: fixed;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
}
@media (max-width: 959px) {
.footer-link-list a {
padding-block: 0.5rem;
min-height: 44px;
display: flex;
align-items: center;
}
.footer-social a {
width: 44px;
height: 44px;
}
.btn,
.header-burger,
.footer-link-list a,
.footer-social a,
.mobile-overlay-nav a,
.mobile-overlay-social a,
.mobile-overlay-close {
touch-action: manipulation;
}
}
@media (prefers-reduced-motion: reduce) {
.mobile-overlay,
.mobile-overlay-nav a,
.mobile-overlay-social a,
.mobile-overlay-close,
.header-burger span {
transition: none;
}
}
:root,
html {
background-color: #08041A;
-webkit-tap-highlight-color: rgba(167, 139, 250, 0.18);
}
:where(a, button, summary, [role="button"], input, select, textarea) {
outline: none;
}
:where(a, button, summary, [role="button"]):focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 2px;
border-radius: 6px;
}
.btn-primary:focus-visible,
a[href*="signup"]:focus-visible,
a[href*="sign-up"]:focus-visible,
.cta-signup:focus-visible {
outline: 2px solid #FACA33;
outline-offset: 3px;
box-shadow: 0 0 0 4px rgba(250, 202, 51, 0.25);
}
#mobile-overlay a:focus-visible,
.mobile-overlay a:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 4px;
}
.header-burger,
.hamburger,
button.header-burger {
min-width: 44px;
min-height: 44px;
}
.site-footer .footer-col a,
.site-footer nav a,
.site-footer ul a {
display: inline-block;
padding-block: 0.5rem;
min-height: 44px;
box-sizing: border-box;
}
.site-footer .footer-social a,
.site-footer .social-icons a {
padding-block: 0;
min-height: unset;
}
:where(a, button, summary, [role="button"]):focus:not(:focus-visible) {
outline: none;
}
#mobile-overlay a:focus,
#mobile-overlay button:focus,
.mobile-overlay a:focus,
.mobile-overlay button:focus {
outline: none;
}
#mobile-overlay a:focus-visible,
#mobile-overlay button:focus-visible,
.mobile-overlay a:focus-visible,
.mobile-overlay button:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 4px;
background: rgba(167, 139, 250, 0.10);
border-radius: 8px;
}
@media (max-width: 767px) {
.brand-pullquote {
display: none;
}
}
.btn-lg {
min-width: 0;
padding-inline: 20px;
}
@media (max-width: 479px) {
.btn-lg {
width: 100%;
}
}
@media (min-width: 480px) {
.btn-lg {
padding-inline: 32px;
}
}
.display-1 {
font-size: clamp(1.75rem, 5vw + 1rem, 3.5rem);
line-height: 1.08;
letter-spacing: -0.02em;
}
.lead {
font-size: clamp(1rem, 1.6vw + 0.6rem, 1.25rem);
line-height: 1.55;
font-weight: 400;
}
.heading-section {
font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
line-height: 1.18;
}
.bento-row-3 h2,
.reach-card h2 {
font-size: clamp(1.25rem, 2vw + 0.5rem, 1.625rem);
line-height: 1.25;
word-break: normal;
hyphens: auto;
-webkit-hyphens: auto;
}
@media (max-width: 359px) {
.display-1 {
font-size: 1.5rem;
line-height: 1.1;
}
}
#mobile-overlay nav a,
#mobile-overlay .mobile-overlay-link,
.mobile-overlay nav a,
.mobile-overlay .mobile-overlay-link {
font-size: clamp(1.125rem, 1.5vw + 1rem, 1.375rem);
line-height: 1.4;
font-weight: 500;
padding-block: 14px;
min-height: 48px;
display: flex;
align-items: center;
letter-spacing: -0.01em;
}
#mobile-overlay,
.mobile-overlay {
padding-top: max(24px, env(safe-area-inset-top));
padding-bottom: max(24px, env(safe-area-inset-bottom));
padding-inline: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
}
#mobile-overlay .mobile-overlay-inner,
.mobile-overlay .mobile-overlay-inner {
padding-top: 0;
padding-bottom: 32px;
}
.mobile-overlay-logo {
display: inline-block;
margin-top: 4px;
margin-bottom: 32px;
}
.mobile-overlay-close {
position: absolute;
top: max(16px, env(safe-area-inset-top));
right: max(16px, env(safe-area-inset-right));
}
.footer-social {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px 14px;
padding: 0;
margin: 32px auto 0;
list-style: none;
max-width: 280px;
}
@media (min-width: 960px) {
.footer-social {
gap: 8px 12px;
max-width: 248px;
}
}
:root,
html {
background-color: transparent;
}
html,
body {
min-height: 100dvh;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
.site-footer {
margin-top: auto;
flex-shrink: 0;
}
.site-footer {
position: relative;
}
.site-footer::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 100vh;
background-color: #08041A;
pointer-events: none;
z-index: 0;
}
.footer-social {
justify-content: flex-start;
margin: 32px 0 0;
max-width: none;
}
@media (min-width: 960px) {
.footer-social {
max-width: none;
margin: 32px 0 0;
}
}
.footer-social a,
.footer-social li > a,
.footer-social > li > a,
.social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
}
#mobile-overlay nav a,
#mobile-overlay .mobile-overlay-link,
.mobile-overlay nav a,
.mobile-overlay .mobile-overlay-link {
font-size: clamp(1rem, 0.75vw + 0.875rem, 1.125rem);
line-height: 1.35;
padding-block: 10px;
min-height: 44px;
}
.site-footer::after {
display: none !important;
content: none !important;
}
html,
body {
min-height: 100vh;
min-height: 100dvh;
}
body {
display: flex;
flex-direction: column;
}
body > * {
flex-shrink: 0;
}
.site-footer {
margin-top: auto !important;
flex-shrink: 0 !important;
position: relative;
z-index: 1;
}
body > main,
body > .page-wrapper,
body > .content-wrapper,
body > #app,
body > .main-content {
flex: 0 1 auto;
}
:root,
html {
background-color: #08041A;
}
html,
body {
min-height: auto;
}
body {
display: block;
}
body > * {
flex-shrink: initial;
}
.site-footer {
margin-top: 0;
flex-shrink: initial;
}
body::before {
z-index: 0;
}
body > * {
position: relative;
z-index: 1;
}
body {
padding-bottom: 0;
}
.header-signin {
white-space: nowrap;
}
.footer-column-title {
font-size: 14px;
font-weight: 700;
color: #A78BFA;
letter-spacing: 1.5px;
margin-bottom: 16px;
}
@media (min-width: 768px) {
.footer-column a {
padding-block: 4px;
min-height: 0;
}
}
@media (min-width: 768px) {
.footer-column a,
.site-footer .footer-col a,
.site-footer nav a,
.site-footer ul a {
padding-block: 2px;
line-height: 1.3;
min-height: 0;
}
.footer-column li,
.footer-column-list li,
.site-footer li {
margin-block: 0;
padding-block: 0;
}
.footer-column ul,
.footer-column-list,
.site-footer .footer-col ul {
gap: 0;
row-gap: 0;
}
}
@media (min-width: 768px) {
.footer-column a,
.site-footer .footer-col a,
.site-footer nav a,
.site-footer ul a {
padding-block: 5px;
line-height: 1.5;
min-height: 0;
}
}
.lead {
font-size: clamp(0.9375rem, 1.4vw + 0.5rem, 1.125rem);
line-height: 1.6;
}
.newpage-hero {
padding-bottom: 24px;
}
.newpage-body {
padding-top: 32px;
}
.brand-pullquote {
display: none;
}
.newpage-cta {
padding-bottom: 48px;
}
.site-footer {
padding-top: 56px;
}
.mobile-overlay-social {
display: none;
}
#mobile-overlay,
.mobile-overlay,
.mobile-overlay-inner {
justify-content: flex-start;
}
.mobile-overlay-nav {
flex-grow: 0;
flex: 0 0 auto;
margin-bottom: 0;
padding-bottom: 0;
}
.mobile-overlay-cta {
margin-top: 24px;
align-self: stretch;
}
.lead {
font-size: clamp(0.875rem, 1vw + 0.4rem, 1rem);
line-height: 1.6;
}
.newpage-hero .lead,
.still-questions .lead,
.newpage-cta .lead {
font-size: clamp(0.9375rem, 0.6vw + 0.75rem, 1.0625rem);
line-height: 1.6;
}
.site-footer .footer-social {
max-width: 248px;
gap: 12px;
}
body {
font-feature-settings: 'cv11', 'ss01', 'ss03', 'kern' 1, 'calt' 1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.tabular,
[class*="stat-"],
.copyright {
font-variant-numeric: tabular-nums;
}
.tile {
transition:
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tile:hover {
transform: translateY(-2px);
border-color: rgba(167, 139, 250, 0.35);
box-shadow:
0 12px 32px -12px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(167, 139, 250, 0.08);
}
.tile-featured {
border-color: rgba(167, 139, 250, 0.2);
box-shadow:
0 0 0 1px rgba(167, 139, 250, 0.08),
0 24px 48px -24px rgba(124, 58, 237, 0.4);
}
.btn-yellow {
box-shadow: 0 4px 14px -4px rgba(250, 202, 51, 0.4);
}
.btn-yellow:hover {
box-shadow: 0 8px 24px -6px rgba(250, 202, 51, 0.6);
transform: translateY(-1px);
}
.btn-yellow:active {
transform: translateY(0);
transition-duration: 0.1s;
}
.btn-secondary {
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-secondary:hover {
border-color: rgba(167, 139, 250, 0.5);
background: rgba(167, 139, 250, 0.08);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(167, 139, 250, 0.3) transparent;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: rgba(167, 139, 250, 0.25);
border-radius: 5px;
border: 2px solid #08041A;
}
*::-webkit-scrollbar-thumb:hover {
background: rgba(167, 139, 250, 0.45);
}
html::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.025;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
[data-reveal] {
opacity: 1 !important;
transform: none !important;
}
}
.header-nav a {
position: relative;
transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.header-nav a::after {
transition:
width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
left: 50%;
}
.header-nav a:hover::after,
.header-nav a:focus-visible::after {
width: 100%;
left: 0;
}
.faq-item summary {
transition: color 0.25s ease, background-color 0.25s ease;
cursor: pointer;
border-radius: 8px;
}
.faq-item summary:hover {
color: rgb(167, 139, 250);
}
.faq-item summary:focus-visible {
outline: 2px solid rgba(167, 139, 250, 0.5);
outline-offset: 4px;
}
.faq-item[open] summary svg,
.faq-item[open] summary .faq-chevron {
transform: rotate(180deg);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.response-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
margin-bottom: 16px;
border-radius: 999px;
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.25);
color: rgb(134, 239, 172);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
width: fit-content;
}
.response-badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: rgb(34, 197, 94);
box-shadow: 0 0 6px rgb(34, 197, 94);
animation: pulse-online 2s ease-in-out infinite;
}
@keyframes pulse-online {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
.response-badge::before {
animation: none;
}
}
.newpage-body .process-steps {
list-style: none;
padding-left: 0;
margin: var(--space-12, 3rem) 0 0;
display: flex;
flex-direction: column;
gap: clamp(2.5rem, 5vw, 4rem);
position: relative;
}
.process-steps::before {
content: "";
position: absolute;
top: 1.5rem;
bottom: 1.5rem;
left: clamp(1.75rem, 4vw, 2.75rem);
width: 2px;
background: linear-gradient(to bottom,
var(--purple-primary, #6D28D9) 0%,
var(--amethyst, #A78BFA) 40%,
var(--yellow-cta, #FACA33) 75%,
transparent 100%);
opacity: 0.35;
pointer-events: none;
}
.process-step {
display: grid;
grid-template-columns: clamp(70px, 10vw, 120px) 1fr;
gap: clamp(1rem, 2.5vw, 1.75rem);
align-items: start;
position: relative;
}
.process-step-numeral {
font-size: clamp(2.75rem, 6.5vw, 5rem);
font-weight: 700;
line-height: 0.9;
letter-spacing: -0.04em;
background: linear-gradient(135deg,
var(--purple-primary, #6D28D9) 0%,
var(--amethyst, #A78BFA) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #fff;
position: relative;
z-index: 2;
font-feature-settings: "tnum", "ss01";
user-select: none;
}
.process-step-body {
padding-top: 0.5rem;
min-width: 0;
}
.process-step-body .process-step-title {
font-size: clamp(1.375rem, 2.5vw, 1.875rem);
font-weight: 600;
color: var(--purple-light, #C4B5FD);
margin: 0 0 var(--space-4, 1rem);
letter-spacing: -0.015em;
line-height: 1.2;
}
.process-step-body p {
font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
line-height: 1.7;
color: rgba(255, 255, 255, 0.78);
margin: 0 0 var(--space-4, 1rem);
}
.process-step-body p:last-child {
margin-bottom: 0;
}
.process-step-body a {
color: var(--amethyst, #A78BFA);
text-decoration: none;
border-bottom: 1px solid rgba(167, 139, 250, 0.3);
transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.process-step-body a:hover {
color: var(--yellow-cta, #FACA33);
border-bottom-color: var(--yellow-cta, #FACA33);
}
.newpage-body .process-step-list {
list-style: none;
padding-left: 0;
margin: var(--space-4, 1rem) 0;
}
.process-step-list li {
position: relative;
padding-left: 1.75rem;
color: rgba(255, 255, 255, 0.78);
line-height: 1.7;
margin-bottom: var(--space-2, 0.5rem);
font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
}
.process-step-list li::before {
content: "\2192";
position: absolute;
left: 0;
top: 0;
color: var(--yellow-cta, #FACA33);
font-weight: 600;
}
.newpage-body .platform-grid {
list-style: none;
padding: 0;
margin: var(--space-8, 2rem) 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: clamp(0.5rem, 1.2vw, 0.875rem);
}
.platform-tile {
margin: 0;
padding: 0;
}
.platform-tile-link {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-3, 0.75rem);
padding: clamp(0.875rem, 2vw, 1.25rem) clamp(0.5rem, 1.5vw, 0.875rem);
background: linear-gradient(180deg,
rgba(167, 139, 250, 0.04),
rgba(167, 139, 250, 0.08));
border: 1px solid rgba(167, 139, 250, 0.15);
border-radius: 14px;
text-decoration: none !important;
color: inherit;
height: 100%;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.platform-tile-link:hover {
transform: translateY(-2px);
border-color: rgba(167, 139, 250, 0.4);
background: linear-gradient(180deg,
rgba(167, 139, 250, 0.08),
rgba(167, 139, 250, 0.12));
box-shadow: 0 4px 24px rgba(109, 40, 217, 0.15);
}
.platform-tile-monogram {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 11px;
background: linear-gradient(135deg,
var(--purple-primary, #6D28D9),
var(--amethyst, #A78BFA));
color: white;
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.04em;
box-shadow: 0 2px 12px rgba(109, 40, 217, 0.25);
flex-shrink: 0;
font-feature-settings: "ss01";
}
.platform-tile-name {
font-size: 0.9375rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
margin: 0;
line-height: 1.25;
}
.platform-tile-features {
font-size: 0.8125rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.6);
margin: 0;
}
@media (max-width: 768px) {
.process-step {
grid-template-columns: clamp(55px, 14vw, 75px) 1fr;
gap: var(--space-4, 1rem);
}
.process-step-body { padding-top: 0.25rem; }
.process-steps::before { left: clamp(1.25rem, 7vw, 1.75rem); }
}
@media (max-width: 1024px) {
.newpage-body .platform-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 560px) {
.newpage-body .platform-grid {
grid-template-columns: repeat(2, 1fr);
}
.newpage-body .platform-grid > .platform-tile:nth-child(5) {
grid-column: 1 / -1;
max-width: 60%;
margin-inline: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.platform-tile-link,
.process-step-body a {
transition: none;
}
.platform-tile-link:hover {
transform: none;
}
}
.newpage-body .differentiator-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: clamp(1rem, 2vw, 1.5rem);
margin: var(--space-8, 2rem) auto 0;
max-width: 1200px;
}
.differentiator-grid > .differentiator {
grid-column: span 2;
margin: 0;
}
.differentiator-grid > .differentiator:nth-child(4) {
grid-column: 2 / span 2;
}
.differentiator-grid > .differentiator:nth-child(5) {
grid-column: 4 / span 2;
}
@media (max-width: 1024px) {
.newpage-body .differentiator-grid {
grid-template-columns: repeat(2, 1fr);
}
.differentiator-grid > .differentiator,
.differentiator-grid > .differentiator:nth-child(4),
.differentiator-grid > .differentiator:nth-child(5) {
grid-column: auto;
}
.differentiator-grid > .differentiator:nth-child(5) {
grid-column: 1 / -1;
max-width: 50%;
margin-inline: auto;
}
}
@media (max-width: 600px) {
.newpage-body .differentiator-grid {
grid-template-columns: 1fr;
}
.differentiator-grid > .differentiator:nth-child(5) {
max-width: 100%;
}
}
.newpage-body .platform-insights {
list-style: none;
padding: 0;
margin: var(--space-8, 2rem) auto 0;
max-width: 1100px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.platform-insights > li {
position: relative;
padding: clamp(1.125rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
padding-left: clamp(1.5rem, 3vw, 2rem);
background: linear-gradient(180deg,
rgba(167, 139, 250, 0.04),
rgba(167, 139, 250, 0.07));
border: 1px solid rgba(167, 139, 250, 0.12);
border-radius: 14px;
font-size: clamp(0.9375rem, 1.4vw, 1rem);
line-height: 1.65;
color: rgba(255, 255, 255, 0.78);
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.platform-insights > li::before {
content: "";
position: absolute;
top: clamp(1rem, 2vw, 1.25rem);
bottom: clamp(1rem, 2vw, 1.25rem);
left: 0;
width: 3px;
background: linear-gradient(180deg,
var(--yellow-cta, #FACA33),
var(--amethyst, #A78BFA));
border-radius: 0 2px 2px 0;
opacity: 0.75;
}
.platform-insights > li:hover {
transform: translateY(-1px);
border-color: rgba(167, 139, 250, 0.25);
background: linear-gradient(180deg,
rgba(167, 139, 250, 0.06),
rgba(167, 139, 250, 0.1));
}
.platform-insights > li strong {
color: var(--purple-light, #C4B5FD);
font-weight: 600;
letter-spacing: -0.005em;
}
@media (max-width: 768px) {
.newpage-body .platform-insights {
grid-template-columns: 1fr;
}
}
.newpage-body .prose-block {
max-width: 760px;
margin: var(--space-8, 2rem) auto 0;
text-align: left;
}
.prose-block > p {
font-size: clamp(1rem, 1.5vw, 1.0625rem);
line-height: 1.75;
color: rgba(255, 255, 255, 0.78);
margin: 0 0 var(--space-4, 1rem);
}
.prose-block > p:last-child {
margin-bottom: 0;
}
.prose-block > p:first-child {
font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
color: rgba(255, 255, 255, 0.88);
font-weight: 400;
}
@media (prefers-reduced-motion: reduce) {
.platform-insights > li {
transition: none;
}
.platform-insights > li:hover {
transform: none;
}
}
.section > .brand-pullquote,
.section > .brand-pullquote[data-reveal] {
display: block;
opacity: 1;
transform: none;
}
html {
overflow-x: hidden;
}
body {
overflow-x: clip;
}
.display-1,
.heading-section,
.process-step-title,
.platform-tile-name,
.faq-question {
overflow-wrap: anywhere;
word-wrap: break-word;
hyphens: auto;
}
.platform-tile-monogram svg {
width: 22px;
height: 22px;
fill: currentColor;
display: block;
flex-shrink: 0;
}
.newpage-body .bts-grid {
display: flex;
flex-direction: column;
gap: clamp(0.875rem, 1.5vw, 1.25rem);
max-width: 920px;
margin: var(--space-8, 2rem) auto 0;
}
.bts-item {
display: grid;
grid-template-columns: 56px 1fr;
gap: clamp(1rem, 2vw, 1.5rem);
align-items: start;
padding: clamp(1.125rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
padding-left: clamp(1.5rem, 3vw, 2rem);
background: linear-gradient(135deg,
rgba(167, 139, 250, 0.05) 0%,
rgba(167, 139, 250, 0.02) 100%);
border: 1px solid rgba(167, 139, 250, 0.12);
border-radius: 16px;
position: relative;
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.bts-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg,
var(--yellow-cta, #FACA33) 0%,
var(--amethyst, #A78BFA) 100%);
opacity: 0.5;
pointer-events: none;
}
.bts-item:hover {
transform: translateY(-2px);
border-color: rgba(167, 139, 250, 0.25);
background: linear-gradient(135deg,
rgba(167, 139, 250, 0.08) 0%,
rgba(167, 139, 250, 0.04) 100%);
box-shadow: 0 4px 24px rgba(109, 40, 217, 0.12);
}
.bts-icon {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,
var(--purple-primary, #6D28D9),
var(--amethyst, #A78BFA));
border-radius: 12px;
color: white;
flex-shrink: 0;
box-shadow: 0 2px 12px rgba(109, 40, 217, 0.25);
}
.bts-icon svg {
width: 24px;
height: 24px;
display: block;
}
.bts-content {
min-width: 0;
}
.bts-content .bts-title {
font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
font-weight: 600;
color: var(--purple-light, #C4B5FD);
margin: 0 0 var(--space-2, 0.5rem);
letter-spacing: -0.01em;
line-height: 1.3;
}
.bts-content p {
font-size: clamp(0.9375rem, 1.4vw, 1rem);
line-height: 1.7;
color: rgba(255, 255, 255, 0.78);
margin: 0;
}
@media (max-width: 640px) {
.bts-item {
grid-template-columns: 1fr;
gap: var(--space-3, 0.75rem);
}
}
@media (prefers-reduced-motion: reduce) {
.bts-item {
transition: none;
}
.bts-item:hover {
transform: none;
}
}
.hero-video {
position: relative;
max-width: 880px;
margin: var(--space-8, 3rem) auto 0;
border-radius: 20px;
overflow: hidden;
isolation: isolate;
background: linear-gradient(135deg, rgba(109, 40, 217, 0.18), rgba(167, 139, 250, 0.08));
border: 1px solid rgba(167, 139, 250, 0.2);
box-shadow:
0 24px 60px -20px rgba(109, 40, 217, 0.35),
inset 0 0 0 1px rgba(196, 181, 253, 0.05);
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-video:not(.is-playing):hover {
transform: translateY(-2px);
box-shadow:
0 32px 80px -20px rgba(109, 40, 217, 0.5),
inset 0 0 0 1px rgba(196, 181, 253, 0.15);
}
.hero-video-thumb {
position: relative;
display: block;
width: 100%;
padding: 0;
margin: 0;
border: none;
background: transparent;
cursor: pointer;
aspect-ratio: 16 / 9;
overflow: hidden;
outline: none;
}
.hero-video-thumb:focus-visible {
outline: 2px solid var(--amethyst, #A78BFA);
outline-offset: 4px;
}
.hero-video-thumb-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.85) saturate(1.05);
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-video-thumb:hover .hero-video-thumb-img {
transform: scale(1.04);
filter: brightness(0.95) saturate(1.15);
}
.hero-video-thumb::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at center,
rgba(8, 4, 26, 0.1) 0%,
rgba(8, 4, 26, 0.4) 100%
);
z-index: 1;
pointer-events: none;
transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-video-thumb:hover::before {
opacity: 0.7;
}
.hero-video-play {
position: absolute;
top: 50%;
left: 50%;
width: 88px;
height: 88px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--yellow-cta, #FACA33) 0%, #F4A621 100%);
color: var(--bg-deepest, #08041A);
transform: translate(-50%, -50%);
z-index: 2;
box-shadow:
0 10px 32px rgba(250, 202, 51, 0.4),
0 0 0 8px rgba(250, 202, 51, 0.15),
0 0 0 16px rgba(250, 202, 51, 0.06);
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-video-play svg {
width: 36px;
height: 36px;
margin-left: 4px;
}
.hero-video-thumb:hover .hero-video-play {
transform: translate(-50%, -50%) scale(1.08);
box-shadow:
0 14px 40px rgba(250, 202, 51, 0.55),
0 0 0 10px rgba(250, 202, 51, 0.2),
0 0 0 20px rgba(250, 202, 51, 0.08);
}
.hero-video-thumb:active .hero-video-play {
transform: translate(-50%, -50%) scale(0.96);
}
.hero-video.is-playing .hero-video-thumb {
display: none;
}
.hero-video iframe {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: none;
}
@media (max-width: 640px) {
.hero-video {
margin-top: var(--space-6, 2rem);
border-radius: 16px;
}
.hero-video-play {
width: 64px;
height: 64px;
box-shadow:
0 8px 24px rgba(250, 202, 51, 0.4),
0 0 0 6px rgba(250, 202, 51, 0.15),
0 0 0 12px rgba(250, 202, 51, 0.06);
}
.hero-video-play svg {
width: 26px;
height: 26px;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-video,
.hero-video-thumb-img,
.hero-video-thumb::before,
.hero-video-play {
transition: none;
}
.hero-video:not(.is-playing):hover,
.hero-video-thumb:hover .hero-video-thumb-img,
.hero-video-thumb:hover .hero-video-play {
transform: none;
}
}
.press-wall {
list-style: none;
padding: 0;
margin: var(--space-6, 2rem) auto 0;
max-width: 1120px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: rgba(167, 139, 250, 0.12);
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(167, 139, 250, 0.18);
}
.press-wall-item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-5, 1.5rem) var(--space-4, 1rem);
background: rgba(8, 4, 26, 0.6);
min-height: 96px;
transition: background 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.press-wall-item:hover {
background: rgba(109, 40, 217, 0.12);
}
.press-wall-link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
outline: none;
}
.press-wall-link:focus-visible {
outline: 2px solid var(--amethyst, #A78BFA);
outline-offset: -2px;
border-radius: 4px;
}
.press-wall-img {
display: block;
max-width: 100%;
max-height: 48px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(1) brightness(0.85) contrast(1.1);
opacity: 0.65;
transition: filter 0.32s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.press-wall-link:hover .press-wall-img,
.press-wall-link:focus-visible .press-wall-img {
filter: grayscale(0) brightness(1) contrast(1);
opacity: 1;
transform: scale(1.05);
}
@media (max-width: 1024px) {
.press-wall {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.press-wall {
grid-template-columns: repeat(2, 1fr);
max-width: 480px;
}
.press-wall-item {
min-height: 80px;
padding: var(--space-4, 1rem) var(--space-3, 0.75rem);
}
.press-wall-img {
max-height: 40px;
}
}
@media (prefers-reduced-motion: reduce) {
.press-wall-item,
.press-wall-img {
transition: none;
}
.press-wall-link:hover .press-wall-img {
transform: none;
}
}
.audience-pills {
list-style: none;
padding: 0;
margin: 0 auto var(--space-6, 2rem);
max-width: 720px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.audience-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px 10px 14px;
border-radius: 9999px;
background: rgba(167, 139, 250, 0.08);
border: 1px solid rgba(167, 139, 250, 0.2);
transition: background 0.32s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.32s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.audience-pill:hover {
background: rgba(167, 139, 250, 0.15);
border-color: rgba(167, 139, 250, 0.4);
transform: translateY(-1px);
}
.audience-pill-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(109, 40, 217, 0.3), rgba(167, 139, 250, 0.2));
color: var(--amethyst, #A78BFA);
flex-shrink: 0;
}
.audience-pill-icon svg {
width: 16px;
height: 16px;
display: block;
}
.audience-pill-label {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.92);
white-space: nowrap;
}
@media (max-width: 640px) {
.audience-pills {
gap: 8px;
}
.audience-pill {
padding: 8px 14px 8px 10px;
gap: 8px;
}
.audience-pill-icon {
width: 24px;
height: 24px;
}
.audience-pill-icon svg {
width: 14px;
height: 14px;
}
.audience-pill-label {
font-size: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.audience-pill {
transition: none;
}
.audience-pill:hover {
transform: none;
}
}
.platform-grid:has(> .platform-tile:nth-child(8)) {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
.platform-grid:has(> .platform-tile:nth-child(8)) {
grid-template-columns: repeat(2, 1fr);
}
}
.newpage-body[data-variant="speed"] {
position: relative;
isolation: isolate;
}
.newpage-body[data-variant="speed"]::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: min(960px, 92%);
height: 78%;
transform: translate(-50%, -50%);
background: radial-gradient(
ellipse at center,
rgba(167, 139, 250, 0.10) 0%,
rgba(109, 40, 217, 0.05) 35%,
transparent 70%
);
z-index: -1;
pointer-events: none;
}
.newpage-body[data-variant="speed"] .text-eyebrow {
color: var(--yellow-cta, #FACA33);
}
.newpage-body[data-variant="speed"] .section-eyebrow-line {
background: linear-gradient(90deg, transparent, var(--yellow-cta, #FACA33), transparent);
opacity: 0.6;
}
.newpage-body[data-variant="speed"] .prose-block > p:first-of-type {
font-size: 18px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.92);
}
.bts-grid[data-variant="trust"] .bts-icon {
background: linear-gradient(135deg, var(--purple-primary, #6D28D9) 0%, var(--purple-light, #C4B5FD) 100%);
}
.bts-grid[data-variant="trust"] .bts-title {
color: var(--amethyst, #A78BFA);
}
.bts-grid[data-variant="trust"] .bts-item::before {
background: linear-gradient(180deg, rgba(167, 139, 250, 0.7), rgba(196, 181, 253, 0.2));
}
.bts-grid[data-variant="trust"] {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"featured featured"
"secondary tertiary";
gap: 20px;
}
.bts-grid[data-variant="trust"] .bts-item:nth-child(1) {
grid-area: featured;
padding: 36px 32px;
position: relative;
}
.bts-grid[data-variant="trust"] .bts-item:nth-child(1)::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
background: linear-gradient(
135deg,
rgba(167, 139, 250, 0.18),
rgba(196, 181, 253, 0.06)
);
z-index: -1;
opacity: 0.7;
pointer-events: none;
}
.bts-grid[data-variant="trust"] .bts-item:nth-child(1) .bts-icon {
width: 64px;
height: 64px;
}
.bts-grid[data-variant="trust"] .bts-item:nth-child(1) .bts-icon svg {
width: 30px;
height: 30px;
}
.bts-grid[data-variant="trust"] .bts-item:nth-child(1) .bts-title {
font-size: 22px;
}
.bts-grid[data-variant="trust"] .bts-item:nth-child(2) {
grid-area: secondary;
}
.bts-grid[data-variant="trust"] .bts-item:nth-child(3) {
grid-area: tertiary;
}
.bts-grid[data-variant="trust"] .bts-item .bts-icon {
background: linear-gradient(135deg, #6D28D9 0%, #C4B5FD 100%);
}
.bts-grid[data-variant="trust"] .bts-item .bts-title {
color: #A78BFA;
}
@media (max-width: 768px) {
.bts-grid[data-variant="trust"] {
grid-template-columns: 1fr;
grid-template-areas:
"featured"
"secondary"
"tertiary";
}
.bts-grid[data-variant="trust"] .bts-item:nth-child(1) {
padding: 24px;
}
.bts-grid[data-variant="trust"] .bts-item:nth-child(1) .bts-icon {
width: 48px;
height: 48px;
}
.bts-grid[data-variant="trust"] .bts-item:nth-child(1) .bts-icon svg {
width: 24px;
height: 24px;
}
.bts-grid[data-variant="trust"] .bts-item:nth-child(1) .bts-title {
font-size: 18px;
}
}
.newpage-body[data-variant="speed"] .prose-block {
counter-reset: speed-step;
max-width: 960px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
text-align: left;
margin-left: auto;
margin-right: auto;
}
.newpage-body[data-variant="speed"] .prose-block > p,
.newpage-body[data-variant="speed"] .prose-block > p:first-of-type {
counter-increment: speed-step;
position: relative;
padding-top: 64px;
font-size: 15px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.78);
margin: 0;
}
.newpage-body[data-variant="speed"] .prose-block > p::before {
content: counter(speed-step, decimal-leading-zero);
position: absolute;
top: 0;
left: 0;
font-size: 44px;
font-weight: 700;
line-height: 1;
background: linear-gradient(135deg, #FACA33, #F4A621);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; color: #fff;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
@media (max-width: 768px) {
.newpage-body[data-variant="speed"] .prose-block {
grid-template-columns: 1fr;
gap: 28px;
max-width: 600px;
}
.newpage-body[data-variant="speed"] .prose-block > p,
.newpage-body[data-variant="speed"] .prose-block > p:first-of-type {
padding-top: 56px;
}
.newpage-body[data-variant="speed"] .prose-block > p::before {
font-size: 38px;
}
}
.still-questions .gradient-text {
color: var(--purple-light, #C4B5FD);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
.still-questions .gradient-text {
color: transparent;
}
}
@supports not (-webkit-background-clip: text) {
.still-questions .gradient-text {
color: #C4B5FD;
-webkit-text-fill-color: #C4B5FD;
background: none;
}
.newpage-body[data-variant="speed"] .prose-block > p::before {
color: #FACA33;
-webkit-text-fill-color: #FACA33;
background: none;
}
}
.bts-grid[data-variant="trust"] .bts-item:nth-child(n+2) .bts-title {
font-size: 18px;
}
.bts-grid[data-variant="trust"] .bts-item:nth-child(n+2) {
padding: 24px 28px;
}
a:not(.btn):focus-visible {
outline: 2px solid var(--amethyst, #A78BFA);
outline-offset: 2px;
border-radius: 2px;
}
.newpage-body:has(+ .newpage-cta) {
padding-bottom: 88px;
}
@media (max-width: 768px) {
.newpage-body:has(+ .newpage-cta) {
padding-bottom: 64px;
}
}
@keyframes hero-play-breath {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.025); }
}
.hero-video:not(.is-playing) .hero-video-play {
animation: hero-play-breath 3.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.hero-video:not(.is-playing) .hero-video-play:hover,
.hero-video:not(.is-playing) .hero-video-play:focus-visible {
animation: none;
}
.bts-grid[data-variant="trust"] .bts-item:first-child {
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.bts-grid[data-variant="trust"] .bts-item:first-child:hover {
transform: translateY(-4px) scale(1.005);
}
.audience-pill .audience-pill-icon {
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.audience-pill:hover .audience-pill-icon {
transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
.hero-video-play {
animation: none !important;
}
.bts-grid[data-variant="trust"] .bts-item:first-child:hover {
transform: none;
}
.audience-pill:hover .audience-pill-icon {
transform: none;
}
}
.platform-grid:has(> .platform-tile:nth-child(8)) > .platform-tile:nth-child(5) {
grid-column: auto;
max-width: none;
margin-inline: 0;
}
.bts-grid {
gap: 16px;
}
.bts-grid:not([data-variant="trust"]) .bts-item,
.bts-grid[data-variant="trust"] .bts-item:not(:first-child) {
padding: 24px 28px 32px;
}
.bts-grid:not([data-variant="trust"]) .bts-title,
.bts-grid[data-variant="trust"] .bts-item:not(:first-child) .bts-title {
font-size: 18px;
line-height: 1.4;
}
@media (max-width: 480px) {
.newpage-cta .btn-yellow,
.newpage-cta .btn-secondary,
.newpage-cta .btn-primary,
.still-questions .btn-primary {
width: 100%;
max-width: 320px;
justify-content: center;
}
}
.faq-caret {
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
details[open] > summary .faq-caret,
.faq-item[open] > summary .faq-caret {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.faq-caret {
transition: none;
}
}
[data-variant="speed"] .prose-block > p::before {
opacity: 0.7;
}
.hero-eyebrow {
display: inline-block;
padding: 6px 16px;
border: 1px solid rgba(167, 139, 250, 0.25);
border-radius: 9999px;
background: rgba(167, 139, 250, 0.06);
}
.reseller-h1 {
text-align: center;
margin-top: var(--space-5, 24px);
}
.reseller-subhead {
text-align: center;
margin-top: var(--space-4, 16px);
max-width: 880px;
margin-inline: auto;
}
.reseller-hero-leads {
max-width: 880px;
margin-inline: auto;
margin-top: var(--space-5, 24px);
}
.reseller-hero-cta {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
margin-top: var(--space-6, 32px);
}
.bts-grid[data-variant="reseller-features"] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
@media (max-width: 768px) {
.bts-grid[data-variant="reseller-features"] {
grid-template-columns: 1fr;
}
}
.step-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
counter-reset: step-num;
margin-top: var(--space-6, 32px);
}
.step {
counter-increment: step-num;
position: relative;
padding: 32px 24px;
border-radius: 16px;
border: 1px solid rgba(167, 139, 250, 0.14);
background: linear-gradient(180deg, rgba(167, 139, 250, 0.04) 0%, rgba(167, 139, 250, 0.01) 100%);
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.step:hover {
transform: translateY(-2px);
border-color: rgba(167, 139, 250, 0.24);
}
.step::before {
content: counter(step-num, decimal-leading-zero);
display: block;
font-size: 44px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #C4B5FD 0%, #A78BFA 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #fff;
margin-bottom: 16px;
opacity: 0.85;
}
@supports not (-webkit-background-clip: text) {
.step::before {
color: #C4B5FD;
-webkit-text-fill-color: #C4B5FD;
}
}
.step-title {
font-size: 18px;
line-height: 1.4;
font-weight: 600;
margin: 0 0 12px;
color: #C4B5FD;
}
.step p {
font-size: 15px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.72);
margin: 0;
}
.step p a {
color: #C4B5FD;
text-decoration: underline;
text-underline-offset: 2px;
}
@media (max-width: 1024px) {
.step-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.step-grid {
grid-template-columns: 1fr;
}
}
.newpage-body[data-variant="steps"] {
position: relative;
overflow: hidden;
}
.newpage-body[data-variant="steps"] .section-eyebrow-wrapper .text-eyebrow {
color: #FACA33;
}
.newpage-body[data-variant="steps"]::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 60% 50% at 50% 0%,
rgba(250, 202, 51, 0.05) 0%, transparent 70%);
z-index: 0;
}
.newpage-body[data-variant="steps"] > .container {
position: relative;
z-index: 1;
}
.trust-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: var(--space-6, 32px);
}
.trust-card {
display: flex;
gap: 20px;
align-items: flex-start;
padding: 28px 28px 28px 24px;
border-radius: 16px;
border: 1px solid rgba(167, 139, 250, 0.14);
background: linear-gradient(180deg, rgba(167, 139, 250, 0.04) 0%, rgba(167, 139, 250, 0.01) 100%);
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.trust-card:hover {
transform: translateY(-2px);
border-color: rgba(167, 139, 250, 0.26);
}
.trust-card-icon {
flex-shrink: 0;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: linear-gradient(135deg,
rgba(109, 40, 217, 0.18) 0%,
rgba(167, 139, 250, 0.10) 100%);
color: #C4B5FD;
}
.trust-card-body {
flex: 1;
min-width: 0;
}
.trust-card-title {
font-size: 18px;
line-height: 1.4;
font-weight: 600;
color: #C4B5FD;
margin: 0 0 10px;
}
.trust-card-body p {
font-size: 15px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.74);
margin: 0;
}
@media (max-width: 768px) {
.trust-grid {
grid-template-columns: 1fr;
}
.trust-card {
padding: 24px 20px;
gap: 16px;
}
.trust-card-icon {
width: 48px;
height: 48px;
}
}
.reseller-why-lead {
max-width: 720px;
margin-inline: auto;
}
.reseller-cta-h2 {
margin-bottom: var(--space-4, 16px);
max-width: 720px;
margin-inline: auto;
}
.reseller-cta-leads {
max-width: 720px;
margin-inline: auto;
margin-top: var(--space-4, 16px);
}
.get-started-block {
margin-top: var(--space-6, 32px);
padding-top: var(--space-6, 32px);
border-top: 1px solid rgba(167, 139, 250, 0.10);
}
.get-started-eyebrow {
display: inline-block;
margin-bottom: 12px;
color: #FACA33;
}
.reseller-cta-closing {
max-width: 720px;
margin-inline: auto;
margin-top: 0;
}
.reseller-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
margin-top: var(--space-6, 32px);
}
.reseller-cta-buttons .btn svg {
margin-right: 8px;
vertical-align: middle;
}
@media (max-width: 480px) {
.reseller-hero-cta .btn,
.reseller-cta-buttons .btn {
width: 100%;
max-width: 320px;
justify-content: center;
}
}
.bts-grid[data-variant="reseller-features"] .bts-item {
align-items: center;
row-gap: 16px;
}
.bts-grid[data-variant="reseller-features"] .bts-item > p {
grid-column: 1 / -1;
margin: 0;
}
:root {
--ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
--dur-hover: 240ms;
}
.bts-grid[data-variant="reseller-features"] .bts-item {
align-items: start;
align-content: start;
grid-template-rows: 48px auto;
}
.bts-grid[data-variant="reseller-features"] .bts-item .bts-title {
align-self: center;
}
.bts-grid[data-variant="reseller-features"] {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
.step-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1024px) {
.step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.step-grid { grid-template-columns: minmax(0, 1fr); }
}
:where(a, button, [role="button"], .bts-item, .step, .trust-card):focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 3px;
border-radius: inherit;
}
@media (prefers-reduced-motion: reduce) {
[data-reveal] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.bts-item, .step, .trust-card, .btn, .btn-yellow, .btn-secondary {
transition: none !important;
}
}
.bts-item, .step, .trust-card, .btn, .btn-yellow, .btn-secondary {
transition: transform var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium),
box-shadow var(--dur-hover) var(--ease-premium),
color var(--dur-hover) var(--ease-premium);
}
.newpage-hero a:not(.btn),
.newpage-body a:not(.btn),
.newpage-cta a:not(.btn) {
transition: color 200ms var(--ease-premium),
border-color 200ms var(--ease-premium);
}
.section-eyebrow-line {
background: #A78BFA;
}
.get-started-eyebrow {
color: #C4B5FD;
}
.step {
padding: 32px 28px;
}
.step::before {
margin-bottom: 20px;
}
.trust-card {
padding: 28px;
}
.bts-grid[data-variant="reseller-features"] .bts-item > p,
.step p,
.trust-card-body p {
color: rgba(255, 255, 255, 0.74);
}
.reseller-h1 {
font-size: clamp(40px, 4.5vw + 1rem, 56px);
letter-spacing: clamp(-1.4px, -0.025em, -0.8px);
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.btn-yellow:focus-visible,
.btn-secondary:focus-visible,
.bts-item:focus-visible,
.step:focus-visible,
.trust-card:focus-visible,
[data-reveal] a:focus-visible {
outline: 2px solid #A78BFA !important;
outline-offset: 3px !important;
border-radius: inherit;
}
@media (max-width: 768px) {
.bts-grid[data-variant="reseller-features"] {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 480px) {
.reseller-hero-cta .btn,
.reseller-cta-buttons .btn {
width: 100% !important;
max-width: 100% !important;
justify-content: center !important;
text-align: center !important;
}
.reseller-hero-cta,
.reseller-cta-buttons {
align-items: stretch;
}
}
.newpage-body[data-variant="steps"]::before {
inset: -160px 0 0 0;
background: radial-gradient(ellipse 70% 65% at 50% 12%,
rgba(250, 202, 51, 0.06) 0%,
rgba(250, 202, 51, 0.02) 45%,
transparent 80%);
}
.newpage-body[data-variant="steps"] {
padding-top: 48px;
}
.newpage-body:has(+ .newpage-body[data-variant="steps"]) {
padding-bottom: 48px;
}
@media (max-width: 560px) {
.trust-card {
flex-direction: column !important;
gap: 12px !important;
padding: 24px !important;
}
.trust-card-icon {
width: 48px !important;
height: 48px !important;
}
}
.newpage-body[data-variant="steps"] .section-eyebrow-wrapper .text-eyebrow {
color: #C4B5FD;
}
.bts-icon {
background: linear-gradient(135deg,
rgba(109, 40, 217, 0.18) 0%,
rgba(167, 139, 250, 0.10) 100%) !important;
border: 1px solid rgba(167, 139, 250, 0.18);
color: #C4B5FD;
}
.bts-icon svg {
stroke: currentColor;
}
.step-grid {
position: relative;
}
.step-grid::after {
content: "";
position: absolute;
top: 54px;
left: 28px;
right: 28px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(167, 139, 250, 0.22) 12%,
rgba(167, 139, 250, 0.22) 88%,
transparent 100%);
z-index: 0;
pointer-events: none;
}
.step {
position: relative;
z-index: 1;
}
@media (max-width: 1024px) {
.step-grid::after { display: none; }
}
.newpage-hero p a,
.newpage-body p a,
.newpage-cta p a {
border-bottom: 1px solid rgba(167, 139, 250, 0.35);
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.newpage-hero p a:hover,
.newpage-body p a:hover,
.newpage-cta p a:hover {
color: #C4B5FD;
border-bottom-color: rgba(167, 139, 250, 0.85);
}
.bts-title {
font-weight: 600;
}
.hero-eyebrow {
transition: border-color var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium),
color var(--dur-hover) var(--ease-premium);
}
.newpage-body:has(.trust-grid) {
padding-bottom: 56px;
}
.section-eyebrow-line {
height: 3px;
}
.bts-item {
border-color: rgba(167, 139, 250, 0.14);
}
.step::before {
margin-bottom: 24px;
}
.btn-secondary {
background-color: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.10);
}
.btn-yellow:focus-visible {
outline-color: #150B3D !important;
}
.step-grid::after {
display: none;
}
.newpage-body[data-variant="steps"]::before {
inset: -200px 0 0 0;
background: radial-gradient(ellipse 85% 70% at 50% 18%,
rgba(250, 202, 51, 0.10) 0%,
rgba(167, 139, 250, 0.04) 35%,
transparent 80%);
}
.newpage-body[data-variant="steps"] {
padding-top: 24px;
}
.newpage-body:has(+ .newpage-body[data-variant="steps"]) {
padding-bottom: 24px;
}
.newpage-body[data-variant="steps"] {
overflow: visible;
}
.newpage-body[data-variant="steps"]::before {
inset: -240px 0 0 0;
background: radial-gradient(ellipse 90% 75% at 50% 22%,
rgba(250, 202, 51, 0.12) 0%,
rgba(167, 139, 250, 0.05) 35%,
rgba(109, 40, 217, 0.02) 60%,
transparent 85%);
}
.newpage-body[data-variant="steps"] {
overflow: hidden;
}
.newpage-body[data-variant="steps"] {
padding-top: 0;
}
.newpage-body:has(+ .newpage-body[data-variant="steps"]) {
padding-bottom: 0;
}
.newpage-body[data-variant="steps"]::before {
inset: 0;
background: radial-gradient(ellipse 80% 70% at 50% 0%,
rgba(250, 202, 51, 0.10) 0%,
rgba(167, 139, 250, 0.04) 35%,
transparent 75%);
}
.newpage-body[data-variant="steps"] > .container {
padding-top: 80px;
}
.newpage-body:has(+ .newpage-body[data-variant="steps"]) {
overflow: hidden;
}
.newpage-body[data-variant="steps"] .section-eyebrow-line {
display: none;
}
.newpage-body[data-variant="steps"] > .container {
padding-top: 48px;
}
.newpage-body[data-variant="steps"]::before {
inset: 0;
background: radial-gradient(ellipse 75% 60% at 50% 0%,
rgba(250, 202, 51, 0.18) 0%,
rgba(167, 139, 250, 0.06) 35%,
transparent 70%);
}
.newpage-body[data-variant="steps"]::before {
background: radial-gradient(80% 55% at 50% 40%,
rgba(250, 202, 51, 0.22) 0%,
rgba(167, 139, 250, 0.08) 30%,
transparent 65%);
}
.bts-grid[data-variant="reseller-features"] > .bts-item:nth-last-child(-n+2) {
border-bottom-color: transparent;
}
.faq-h1 {
text-align: center;
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
.faq-hero-lead {
text-align: center;
max-width: 640px;
margin: 24px auto 0;
}
.faq-container {
max-width: 880px;
}
.faq-category {
margin-bottom: 64px;
}
.faq-category:last-child {
margin-bottom: 0;
}
.faq-category-title {
font-size: 24px;
font-weight: 600;
color: #C4B5FD;
letter-spacing: -0.25px;
margin: 0 0 24px 0;
line-height: 1.3;
}
.faq-stack {
display: flex;
flex-direction: column;
gap: 10px;
}
.faq-q {
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.92);
letter-spacing: -0.1px;
line-height: 1.5;
flex: 1;
padding-right: 16px;
}
.faq-a {
padding: 0 24px 24px 24px;
color: rgba(255, 255, 255, 0.74);
line-height: 1.7;
font-size: 15px;
}
.faq-a p {
margin: 0 0 14px;
}
.faq-a p:last-child {
margin-bottom: 0;
}
.faq-a ul {
padding-left: 24px;
margin: 0 0 14px;
}
.faq-a li {
margin-bottom: 8px;
}
.faq-a li:last-child {
margin-bottom: 0;
}
@media (max-width: 768px) {
.faq-container { padding-left: 20px; padding-right: 20px; }
.faq-category-title { font-size: 22px; margin-bottom: 20px; }
.faq-category { margin-bottom: 48px; }
.faq-a { padding: 0 20px 20px 20px; font-size: 14.5px; }
.faq-q { font-size: 15.5px; padding-right: 12px; }
}
.hero-eyebrow {
display: inline-block;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 1.3px !important;
text-transform: uppercase !important;
color: #C4B5FD !important;
padding: 6px 14px;
border: 1px solid rgba(167, 139, 250, 0.25);
border-radius: 9999px;
background-color: transparent;
}
.faq-h1 {
font-size: clamp(40px, 4.5vw + 1rem, 56px) !important;
letter-spacing: clamp(-1.4px, -0.025em, -0.5px) !important;
line-height: 1.15;
}
.faq-category[data-reveal] {
transform: none !important;
transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
details.faq-item[open] {
background: linear-gradient(180deg,
rgba(109, 40, 217, 0.15) 0%,
rgba(31, 18, 72, 0.5) 100%);
}
.faq-a {
font-size: 16px;
color: rgba(255, 255, 255, 0.74);
}
.faq-a p {
color: inherit;
}
.faq-a {
transition: padding var(--dur-hover) var(--ease-premium);
}
details.faq-item {
transition: background var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
details.faq-item summary {
transition: color var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium);
}
details.faq-item summary:focus-visible {
outline: 2px solid #A78BFA !important;
outline-offset: 3px !important;
}
.cat-count {
display: inline-block;
font-size: 13px;
font-weight: 500;
color: rgba(196, 181, 253, 0.55);
letter-spacing: 0.1px;
margin-left: 8px;
vertical-align: middle;
}
.faq-stack {
gap: 8px;
}
.faq-toc {
display: none;
}
@media (min-width: 1100px) {
.newpage-body[data-variant="faq-content"] .faq-container {
display: grid;
grid-template-columns: 200px 1fr;
gap: 56px;
max-width: 1136px;
align-items: start;
}
.faq-categories-col {
grid-column: 2;
display: flex;
flex-direction: column;
gap: 64px;
min-width: 0;
}
.faq-toc {
display: block;
position: sticky;
top: 128px;
grid-column: 1;
padding-top: 4px;
max-height: calc(100vh - 144px);
overflow-y: auto;
}
.faq-toc::-webkit-scrollbar { width: 0; }
.faq-toc { scrollbar-width: none; }
.faq-toc-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.8);
margin: 0 0 16px 12px;
}
.faq-toc-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.faq-toc a {
display: block;
padding: 7px 12px;
font-size: 13.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
border-left: 2px solid transparent;
border-radius: 0;
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium);
letter-spacing: 0.1px;
}
.faq-toc a:hover {
color: #C4B5FD;
background-color: rgba(167, 139, 250, 0.04);
}
.faq-toc a[aria-current="true"] {
color: #C4B5FD;
border-left-color: #A78BFA;
background-color: rgba(167, 139, 250, 0.06);
}
}
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.faq-category[data-reveal] { transition: none !important; }
}
.faq-category[id] {
scroll-margin-top: 128px;
}
@media (min-width: 1100px) {
.faq-categories-col .faq-category {
margin-bottom: 0;
}
}
.faq-toc-group-label {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.8);
padding: 16px 12px 6px;
margin: 0;
}
.faq-toc-group-label--first,
.faq-toc-group-label:first-child {
padding-top: 4px;
}
@media (min-width: 1100px) {
.faq-toc a {
color: rgba(255, 255, 255, 0.7);
}
.faq-toc a:hover {
color: rgba(255, 255, 255, 0.85);
background: transparent;
}
.faq-toc a[aria-current="true"] {
color: rgb(255, 255, 255);
background: rgba(167, 139, 250, 0.10);
border-left-color: rgb(167, 139, 250);
}
}
.faq-toc-end {
display: block;
margin-top: 20px;
padding: 7px 12px;
font-size: 12px;
letter-spacing: 0.2px;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
text-decoration: none;
border-left: 2px solid transparent;
transition: color var(--dur-hover) var(--ease-premium);
}
.faq-toc-end:hover {
color: rgba(196, 181, 253, 0.85);
}
.faq-toc-end::before {
content: "\002191 ";
}
.newpage-body[data-variant="faq-content"] {
padding-bottom: 56px;
}
.newpage-cta {
padding-top: 48px;
position: relative;
isolation: isolate;
}
.newpage-cta::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: -160px 0 auto 0 !important;
height: 320px !important;
width: auto !important;
background: radial-gradient(
ellipse 55% 100% at 50% 50%,
rgba(167, 139, 250, 0.18) 0%,
rgba(167, 139, 250, 0.04) 40%,
rgba(167, 139, 250, 0) 65%
) !important;
pointer-events: none !important;
z-index: -1 !important;
}
.newpage-cta {
overflow: visible !important;
}
.cta-row .btn {
justify-content: center;
text-align: center;
}
.still-questions::before {
content: none;
}
.still-questions {
box-shadow:
0 80px 120px -20px rgba(124, 58, 237, 0.28),
0 24px 48px -8px rgba(124, 58, 237, 0.12);
}
.still-questions {
box-shadow: none !important;
}
body::before {
content: "" !important;
background-image:
radial-gradient(120% 80% at 50% 0%, rgba(167, 139, 250, 0.40) 0%, rgba(0,0,0,0) 60%),
radial-gradient(120% 80% at 50% 100%, rgba(236, 72, 153, 0.25) 0%, rgba(0,0,0,0) 60%),
radial-gradient(80% 50% at 50% 70%, rgba(250, 202, 51, 0.08) 0%, rgba(0,0,0,0) 65%)
!important;
}
.site-footer {
border-top: 0 !important;
position: relative;
}
.site-footer::before {
content: "";
position: absolute;
top: -64px;
left: 0;
right: 0;
height: 64px;
background: linear-gradient(
to bottom,
rgba(124, 58, 237, 0) 0%,
rgba(124, 58, 237, 0.04) 100%
);
pointer-events: none;
}
.newpage-cta::before {
content: none !important;
background-image: none !important;
}
.still-questions {
position: relative !important;
padding: 40px 32px !important;
border-radius: 24px !important;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.06) 0%,
rgba(124, 58, 237, 0.02) 100%) !important;
background-image: linear-gradient(180deg,
rgba(124, 58, 237, 0.06) 0%,
rgba(124, 58, 237, 0.02) 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
-webkit-backdrop-filter: blur(12px) !important;
backdrop-filter: blur(12px) !important;
isolation: isolate !important;
box-shadow: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
.still-questions::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
background: radial-gradient(
ellipse 80% 60% at 50% 100%,
rgba(124, 58, 237, 0.4),
transparent 70%
) !important;
background-image: radial-gradient(
ellipse 80% 60% at 50% 100%,
rgba(124, 58, 237, 0.4),
transparent 70%
) !important;
opacity: 0.6 !important;
z-index: -1 !important;
pointer-events: none !important;
}
body::before {
content: "" !important;
position: fixed !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
background-image:
radial-gradient(80% 40% at 15% 15%, rgba(124, 58, 237, 0.52) 0%, rgba(0,0,0,0) 55%),
radial-gradient(60% 35% at 85% 50%, rgba(236, 72, 153, 0.34) 0%, rgba(0,0,0,0) 50%),
radial-gradient(50% 30% at 50% 85%, rgba(250, 202, 51, 0.25) 0%, rgba(0,0,0,0) 50%)
!important;
}
body {
background-color: transparent !important;
}
@media (max-width: 600px) {
.site-footer .footer-social {
column-gap: 7px;
row-gap: 12px;
}
}
.tile-button-group .btn-sm {
min-height: 47px;
}
.terms-body {
padding-block: var(--space-12) var(--space-16);
}
.terms-container {
max-width: 1136px;
}
@media (min-width: 1024px) {
.terms-container {
display: grid;
grid-template-columns: 280px 1fr;
column-gap: 64px;
align-items: start;
}
.terms-toc-toggle {
display: none;
}
}
.terms-toc-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 12px 16px;
margin-bottom: 24px;
background: rgba(167, 139, 250, 0.06);
border: 1px solid rgba(167, 139, 250, 0.18);
border-radius: 12px;
color: rgba(255, 255, 255, 0.88);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1px;
cursor: pointer;
transition: background var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.terms-toc-toggle:hover {
background: rgba(167, 139, 250, 0.10);
border-color: rgba(167, 139, 250, 0.32);
}
.terms-toc-toggle-label {
flex: 1;
text-align: left;
}
.terms-toc-toggle-caret {
transition: transform 240ms var(--ease-premium);
flex-shrink: 0;
color: #C4B5FD;
}
.terms-toc-toggle[aria-expanded="true"] .terms-toc-toggle-caret {
transform: rotate(180deg);
}
.terms-toc {
max-height: 0;
overflow: hidden;
visibility: hidden;
transition: max-height 360ms var(--ease-premium),
visibility 0s linear 360ms;
margin-bottom: 24px;
}
.terms-toc.is-open {
max-height: 720px;
padding-block: 8px 12px;
visibility: visible;
transition: max-height 360ms var(--ease-premium),
visibility 0s linear 0s;
}
@media (min-width: 1024px) {
.terms-toc {
position: sticky;
top: 128px;
grid-column: 1;
max-height: calc(100vh - 160px);
overflow-y: auto;
visibility: visible;
margin-bottom: 0;
padding-block: 0;
transition: none;
}
.terms-toc::-webkit-scrollbar { width: 0; }
.terms-toc { scrollbar-width: none; }
}
.terms-toc-group-label {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.45);
padding: 16px 12px 6px;
margin: 0;
}
.terms-toc-group-label--first,
.terms-toc-group-label:first-child {
padding-top: 4px;
}
.terms-toc-list {
list-style: none;
padding: 0;
margin: 0 0 4px;
display: flex;
flex-direction: column;
gap: 2px;
}
.terms-toc a {
display: block;
padding: 7px 12px;
font-size: 13.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
border-left: 2px solid transparent;
letter-spacing: 0.1px;
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium);
}
.terms-toc a:hover {
color: rgba(255, 255, 255, 0.88);
background: rgba(167, 139, 250, 0.04);
}
.terms-toc a[aria-current="true"] {
color: rgb(255, 255, 255);
background: rgba(167, 139, 250, 0.10);
border-left-color: rgb(167, 139, 250);
}
.terms-toc a:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 2px;
border-radius: 4px;
}
.terms-toc-toggle:focus-visible,
.terms-toc-end:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 2px;
}
.terms-toc-end {
display: block;
margin-top: 20px;
padding: 7px 12px;
font-size: 12px;
letter-spacing: 0.2px;
color: rgba(255, 255, 255, 0.32);
text-decoration: none;
transition: color var(--dur-hover) var(--ease-premium);
}
.terms-toc-end:hover {
color: rgba(196, 181, 253, 0.85);
}
.terms-toc-end::before {
content: "\002191 ";
}
.terms-prose-col {
min-width: 0;
}
@media (min-width: 1024px) {
.terms-prose-col {
grid-column: 2;
max-width: 760px;
}
}
.terms-article {
position: relative;
padding: 40px 40px 32px;
margin-bottom: 48px;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.04) 0%,
rgba(124, 58, 237, 0.01) 100%);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 20px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
isolation: isolate;
}
.terms-article:last-child {
margin-bottom: 0;
}
.terms-article-header {
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.terms-article-eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.55);
margin: 0 0 8px;
}
.terms-h2 {
font-size: clamp(28px, 2.2vw + 0.5rem, 32px);
font-weight: 600;
letter-spacing: -0.4px;
color: #FFFFFF;
line-height: 1.2;
margin: 0;
}
.terms-section {
scroll-margin-top: 128px;
margin-bottom: 48px;
}
.terms-section:last-child {
margin-bottom: 0;
}
.terms-h3 {
font-size: 19px;
font-weight: 600;
letter-spacing: -0.15px;
color: #C4B5FD;
line-height: 1.3;
margin: 0 0 16px;
}
.terms-section p {
font-size: 15.5px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.78);
margin: 0 0 14px;
}
.terms-section p:last-child {
margin-bottom: 0;
}
.terms-list {
margin: 0 0 14px;
padding-left: 24px;
color: rgba(255, 255, 255, 0.78);
font-size: 15.5px;
line-height: 1.7;
}
.terms-list li {
margin-bottom: 8px;
}
.terms-list li:last-child {
margin-bottom: 0;
}
.terms-list li::marker {
color: rgba(196, 181, 253, 0.7);
font-weight: 600;
}
.terms-section a:not(.btn) {
color: #C4B5FD;
text-decoration: none;
border-bottom: 1px solid rgba(196, 181, 253, 0.3);
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.terms-section a:not(.btn):hover {
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 768px) {
.terms-body {
padding-block: var(--space-8) var(--space-12);
}
.terms-article {
padding: 28px 24px 24px;
margin-bottom: 24px;
border-radius: 16px;
}
.terms-article-header {
margin-bottom: 20px;
padding-bottom: 16px;
}
.terms-section {
margin-bottom: 28px;
}
.terms-section p,
.terms-list {
font-size: 15px;
}
}
@media (max-width: 480px) {
.terms-article {
padding: 24px 20px 20px;
border-radius: 14px;
}
.terms-h3 {
font-size: 17px;
}
.terms-section p,
.terms-list {
font-size: 14.5px;
line-height: 1.7;
}
.terms-list {
padding-left: 20px;
}
}
@media (min-width: 1024px) {
.terms-toc-toggle {
display: none !important;
}
.terms-toc {
display: block;
visibility: visible;
}
}
@media (max-width: 1023.98px) {
.terms-toc-toggle {
display: flex;
visibility: visible;
}
.terms-toc {
display: none;
}
.terms-toc.is-open {
display: block;
}
.terms-container {
grid-template-columns: 1fr;
gap: 20px;
}
}
.api-info-section {
padding-block: var(--space-6) var(--space-8);
}
.api-info-panel {
max-width: 880px;
margin: 0 auto;
padding: 28px 32px;
border-radius: 20px;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.08) 0%,
rgba(124, 58, 237, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
isolation: isolate;
}
.api-info-row {
display: grid;
grid-template-columns: 160px 1fr;
gap: 16px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.api-info-row:last-child {
border-bottom: none;
}
.api-info-label {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.3px;
color: rgba(196, 181, 253, 0.85);
}
.api-info-value {
font-size: 14.5px;
color: rgba(255, 255, 255, 0.85);
line-height: 1.5;
}
.api-info-value a {
color: #C4B5FD;
text-decoration: none;
border-bottom: 1px solid rgba(196, 181, 253, 0.4);
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.api-info-value a:hover {
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.7);
}
.api-method-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--yellow);
color: #08041A;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
text-transform: uppercase;
}
.api-url {
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
font-size: 13.5px;
color: #C4B5FD;
background: rgba(167, 139, 250, 0.10);
padding: 6px 12px;
border-radius: 8px;
border: 1px solid rgba(167, 139, 250, 0.18);
display: inline-block;
word-break: break-all;
}
.api-inline-code {
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
font-size: 13px;
color: #C4B5FD;
background: rgba(167, 139, 250, 0.10);
padding: 3px 8px;
border-radius: 4px;
}
.api-body {
padding-block: var(--space-8) var(--space-16);
}
.api-container {
max-width: 1280px;
}
@media (min-width: 1024px) {
.api-container {
display: grid;
grid-template-columns: 280px 1fr;
column-gap: 64px;
align-items: start;
}
}
.api-toc-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 12px 16px;
margin-bottom: 24px;
background: rgba(167, 139, 250, 0.06);
border: 1px solid rgba(167, 139, 250, 0.18);
border-radius: 12px;
color: rgba(255, 255, 255, 0.88);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1px;
cursor: pointer;
transition: background var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.api-toc-toggle:hover {
background: rgba(167, 139, 250, 0.10);
border-color: rgba(167, 139, 250, 0.32);
}
.api-toc-toggle-label {
flex: 1;
text-align: left;
}
.api-toc-toggle-caret {
flex-shrink: 0;
color: #C4B5FD;
transition: transform 240ms var(--ease-premium);
}
.api-toc-toggle[aria-expanded="true"] .api-toc-toggle-caret {
transform: rotate(180deg);
}
.api-toc-toggle:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 2px;
}
.api-toc {
margin-bottom: 24px;
}
@media (min-width: 1024px) {
.api-toc {
position: sticky;
top: 128px;
grid-column: 1;
max-height: calc(100vh - 160px);
overflow-y: auto;
margin-bottom: 0;
padding: 4px 0 8px;
}
.api-toc::-webkit-scrollbar { width: 0; }
.api-toc { scrollbar-width: none; }
}
.api-toc-group-label {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.45);
padding: 4px 12px 6px;
margin: 0 0 4px;
}
.api-toc-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.api-toc-link {
display: block;
padding: 7px 12px;
font-size: 13.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
border-left: 2px solid transparent;
letter-spacing: 0.1px;
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium);
}
.api-toc-link:hover {
color: rgba(255, 255, 255, 0.88);
background: rgba(167, 139, 250, 0.04);
}
.api-toc-link.is-active {
color: rgb(255, 255, 255);
background: rgba(167, 139, 250, 0.10);
border-left-color: rgb(167, 139, 250);
}
.api-toc-link:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 2px;
border-radius: 4px;
}
.api-toc-end {
display: block;
margin-top: 20px;
padding: 7px 12px;
font-size: 12px;
letter-spacing: 0.2px;
color: rgba(255, 255, 255, 0.32);
text-decoration: none;
transition: color var(--dur-hover) var(--ease-premium);
}
.api-toc-end::before {
content: "\002191 ";
}
.api-toc-end:hover {
color: rgba(196, 181, 253, 0.85);
}
.api-toc-end:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 2px;
}
.api-prose-col {
min-width: 0;
}
@media (min-width: 1024px) {
.api-prose-col {
grid-column: 2;
}
}
.api-method-card {
position: relative;
padding: 32px;
margin-bottom: 48px;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.06) 0%,
rgba(124, 58, 237, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 24px;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
isolation: isolate;
scroll-margin-top: 128px;
}
.api-method-card:last-of-type {
margin-bottom: 0;
}
.api-method-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.api-method-title {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.25px;
color: #C4B5FD;
line-height: 1.2;
margin: 0;
}
.api-service-selector {
margin-bottom: 20px;
padding: 16px;
background: rgba(167, 139, 250, 0.05);
border: 1px solid rgba(167, 139, 250, 0.15);
border-radius: 12px;
}
.api-select-label {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.7);
margin-bottom: 8px;
}
.api-select {
width: 100%;
padding: 10px 16px;
background: rgba(8, 4, 26, 0.6);
color: #FFFFFF;
border: 1px solid rgba(167, 139, 250, 0.25);
border-radius: 8px;
font-size: 14px;
font-family: inherit;
cursor: pointer;
transition: border-color var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23C4B5FD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.api-select:hover {
border-color: rgba(167, 139, 250, 0.45);
background-color: rgba(8, 4, 26, 0.8);
}
.api-select:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 2px;
}
.api-params-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 24px;
font-size: 14px;
}
.api-params-table th {
text-align: left;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.3px;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.85);
padding: 12px 16px;
border-bottom: 2px solid rgba(167, 139, 250, 0.3);
background: rgba(167, 139, 250, 0.04);
}
.api-params-table td {
padding: 14px 16px;
color: rgba(255, 255, 255, 0.75);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
vertical-align: top;
line-height: 1.55;
}
.api-params-table tbody tr:nth-child(odd) td {
background: rgba(124, 58, 237, 0.03);
}
.api-params-table tbody tr:last-child td {
border-bottom: none;
}
.api-params-table td code {
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
font-size: 13px;
color: #C4B5FD;
background: rgba(167, 139, 250, 0.12);
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
}
.api-example {
margin-top: 8px;
}
.api-example-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.7);
margin-bottom: 10px;
}
.api-code-block {
background: #0D0623 !important;
border: 1px solid rgba(167, 139, 250, 0.2);
border-radius: 12px;
padding: 20px;
font-size: 13px;
line-height: 1.6;
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace) !important;
overflow-x: auto;
margin: 0;
}
.api-code-block code[class*="language-"],
.api-code-block pre[class*="language-"] {
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace) !important;
text-shadow: none;
background: transparent;
}
.api-code-block .token.property { color: #C4B5FD; }
.api-code-block .token.string,
.api-code-block .token.attr-value { color: #FACA33; }
.api-code-block .token.number { color: #A78BFA; }
.api-code-block .token.boolean { color: #F59E0B; }
.api-code-block .token.null { color: #EC4899; }
.api-code-block .token.punctuation { color: rgba(255, 255, 255, 0.5); }
.api-code-block .token.operator { color: rgba(255, 255, 255, 0.5); }
.api-php-section {
margin-top: 40px;
text-align: center;
}
.api-php-cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 28px;
background: var(--yellow);
color: #08041A;
border-radius: 12px;
font-weight: 700;
font-size: 14.5px;
letter-spacing: 0.1px;
text-decoration: none;
transition: transform var(--dur-hover) var(--ease-premium),
box-shadow var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium);
}
.api-php-cta:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px -8px rgba(250, 202, 51, 0.4);
background: #FFD24D;
}
.api-php-cta:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 3px;
}
.api-php-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(8, 4, 26, 0.18);
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
font-size: 13px;
font-weight: 800;
color: #08041A;
}
@media (max-width: 768px) {
.api-info-section {
padding-block: var(--space-4) var(--space-6);
}
.api-info-panel {
padding: 20px 22px;
border-radius: 16px;
}
.api-info-row {
grid-template-columns: 120px 1fr;
gap: 12px;
padding: 10px 0;
}
.api-info-label {
font-size: 12px;
}
.api-info-value,
.api-url {
font-size: 13px;
}
.api-body {
padding-block: var(--space-6) var(--space-12);
}
.api-method-card {
padding: 24px 20px;
margin-bottom: 32px;
border-radius: 18px;
}
.api-method-title {
font-size: 20px;
}
.api-params-table {
font-size: 13px;
}
.api-params-table th {
padding: 10px 12px;
}
.api-params-table td {
padding: 12px 12px;
}
.api-code-block {
font-size: 12px;
padding: 16px;
border-radius: 10px;
}
}
@media (max-width: 480px) {
.api-info-row {
grid-template-columns: 1fr;
gap: 6px;
}
.api-method-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.api-params-table {
font-size: 12.5px;
}
.api-params-table th,
.api-params-table td {
padding: 10px;
}
.api-params-table td code {
font-size: 12px;
white-space: normal;
word-break: break-word;
}
.api-php-cta {
padding: 12px 20px;
font-size: 13.5px;
}
}
@media (min-width: 1024px) {
.api-toc-toggle {
display: none !important;
}
.api-toc {
display: block;
visibility: visible;
}
}
@media (max-width: 1023.98px) {
.api-toc-toggle {
display: flex;
visibility: visible;
}
.api-toc {
display: none;
}
.api-toc.is-open {
display: block;
}
.api-container {
grid-template-columns: 1fr;
gap: 20px;
}
}
.signup-hero-tagline {
font-size: clamp(20px, 1.8vw + 0.5rem, 26px);
font-weight: 600;
letter-spacing: -0.3px;
color: rgba(255, 255, 255, 0.92);
line-height: 1.3;
margin: 16px 0 6px;
}
.signup-hero-subtagline {
font-size: clamp(15px, 1vw + 0.5rem, 17px);
font-weight: 500;
color: rgba(196, 181, 253, 0.85);
line-height: 1.45;
margin: 0 0 4px;
}
.signup-hero-lead {
max-width: 720px;
}
.signup-form-section {
padding: 32px 0 60px;
}
.signup-form-wrapper {
display: flex;
justify-content: center;
padding: 0 16px;
}
.signup-form-card {
width: 100%;
max-width: 520px;
padding: 40px 36px;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.08) 0%,
rgba(124, 58, 237, 0.03) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5);
isolation: isolate;
}
.signup-google-wrapper {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 8px;
}
.signup-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0 24px;
}
.signup-divider::before,
.signup-divider::after {
content: "";
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.1);
}
.signup-divider span {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.5px;
color: rgba(255, 255, 255, 0.5);
text-transform: lowercase;
}
.signup-form-group {
margin-bottom: 16px;
}
.signup-label {
display: block;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 6px;
letter-spacing: 0.1px;
}
.signup-form .signup-input,
.signup-form input.form-control {
width: 100%;
height: auto !important;
min-height: 48px;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(167, 139, 250, 0.2);
border-radius: 10px;
color: #FFFFFF;
font-size: 15px;
font-family: inherit;
line-height: 1.4;
transition: background-color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium),
box-shadow var(--dur-hover) var(--ease-premium);
}
.signup-form .signup-input::placeholder {
color: rgba(255, 255, 255, 0.35);
}
.signup-form .signup-input:hover {
border-color: rgba(167, 139, 250, 0.32);
background: rgba(255, 255, 255, 0.05);
}
.signup-form .signup-input:focus,
.signup-form .signup-input:focus-visible {
outline: none;
border-color: rgba(167, 139, 250, 0.55);
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.12);
}
.signup-captcha-wrapper {
display: flex;
justify-content: center;
margin: 16px 0;
}
.signup-terms-group {
margin: 18px 0 8px;
}
.signup-terms-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-weight: 400;
}
.signup-terms-checkbox {
flex-shrink: 0;
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
margin-top: 2px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(167, 139, 250, 0.35);
border-radius: 4px;
cursor: pointer;
transition: background-color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
position: relative;
}
.signup-terms-checkbox:hover {
border-color: rgba(167, 139, 250, 0.6);
}
.signup-terms-checkbox:checked {
background: rgb(167, 139, 250);
border-color: rgb(167, 139, 250);
}
.signup-terms-checkbox:checked::after {
content: "";
position: absolute;
inset: 2px 0 0 5px;
width: 6px;
height: 11px;
border-right: 2px solid #08041A;
border-bottom: 2px solid #08041A;
transform: rotate(45deg);
}
.signup-terms-checkbox:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 2px;
}
.signup-terms-text {
font-size: 13.5px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.75);
}
.signup-terms-link {
color: #C4B5FD;
text-decoration: none;
border-bottom: 1px solid rgba(196, 181, 253, 0.4);
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.signup-terms-link:hover {
color: var(--yellow);
border-color: rgba(250, 202, 51, 0.6);
}
.signup-form .signup-submit,
.signup-form .signup-submit.btn-primary,
.signup-form button.signup-submit {
display: block;
width: 100%;
margin-top: 24px;
padding: 14px 24px;
background: var(--yellow) !important;
color: #08041A !important;
border: 1px solid var(--yellow) !important;
border-radius: 12px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.2px;
cursor: pointer;
transition: transform var(--dur-hover) var(--ease-premium),
box-shadow var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium);
}
.signup-form .signup-submit:hover {
transform: translateY(-2px);
background: #FFD24D !important;
box-shadow: 0 10px 24px -8px rgba(250, 202, 51, 0.4);
}
.signup-form .signup-submit:active {
transform: translateY(0);
}
.signup-form .signup-submit:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 3px;
}
.signup-signin-row {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
text-align: center;
font-size: 13.5px;
color: rgba(255, 255, 255, 0.6);
}
.signup-signin-text {
margin-right: 4px;
}
.signup-signin-link {
color: #C4B5FD;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.signup-signin-link:hover {
color: var(--yellow);
border-color: rgba(250, 202, 51, 0.6);
}
.signup-form .alert {
position: relative;
padding: 14px 44px 14px 16px;
margin-bottom: 18px;
border-radius: 10px;
font-size: 14px;
line-height: 1.5;
}
.signup-form .alert-danger {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #FCA5A5;
}
.signup-form .alert-success {
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
color: #6EE7B7;
}
.signup-form .alert .close {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
background: transparent;
border: none;
font-size: 20px;
line-height: 1;
color: inherit;
opacity: 0.6;
cursor: pointer;
padding: 0 6px;
}
.signup-form .alert .close:hover {
opacity: 1;
}
.signup-section-head {
text-align: center;
max-width: 800px;
margin: 0 auto 48px;
}
.signup-section-head h2 {
margin-bottom: 16px;
}
.signup-section-lead {
font-size: 15.5px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.75);
margin: 0 auto;
}
.signup-section-lead a {
color: #C4B5FD;
text-decoration: none;
border-bottom: 1px solid rgba(196, 181, 253, 0.4);
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.signup-section-lead a:hover {
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.6);
}
.signup-features-section {
padding-block: var(--space-12) var(--space-12);
}
.signup-features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 1080px;
margin: 0 auto;
}
.signup-feature-card {
padding: 32px 28px;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.06) 0%,
rgba(124, 58, 237, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 20px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: transform var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.signup-feature-card:hover {
transform: translateY(-2px);
border-color: rgba(167, 139, 250, 0.2);
}
.signup-feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 14px;
background: rgba(167, 139, 250, 0.12);
border: 1px solid rgba(167, 139, 250, 0.22);
color: #C4B5FD;
margin-bottom: 18px;
}
.signup-feature-title {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.2px;
color: #C4B5FD;
line-height: 1.3;
margin: 0 0 10px;
}
.signup-feature-text {
font-size: 14.5px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.75);
margin: 0;
}
.signup-feature-text a {
color: #C4B5FD;
text-decoration: none;
border-bottom: 1px solid rgba(196, 181, 253, 0.4);
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.signup-feature-text a:hover {
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.6);
}
.signup-platforms-section {
padding-block: var(--space-12) var(--space-12);
}
.signup-platforms-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.signup-platform-card {
display: block;
padding: 26px 22px;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.06) 0%,
rgba(124, 58, 237, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 18px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
text-decoration: none;
color: inherit;
transition: transform var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium),
box-shadow var(--dur-hover) var(--ease-premium);
}
.signup-platform-card:hover {
transform: translateY(-3px);
border-color: rgba(167, 139, 250, 0.25);
box-shadow: 0 12px 32px -12px rgba(124, 58, 237, 0.4);
}
.signup-platform-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.06);
margin-bottom: 14px;
}
.signup-platform-title {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.15px;
color: #FFFFFF;
margin: 0 0 8px;
}
.signup-platform-text {
font-size: 13.5px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
.signup-how-section {
padding-block: var(--space-12) var(--space-12);
}
.signup-steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 1200px;
margin: 0 auto;
}
.signup-step-card {
position: relative;
padding: 32px 24px 28px;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.06) 0%,
rgba(124, 58, 237, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 20px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
text-align: center;
transition: transform var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.signup-step-card:hover {
transform: translateY(-2px);
border-color: rgba(167, 139, 250, 0.2);
}
.signup-step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--yellow);
color: #08041A;
font-size: 14px;
font-weight: 800;
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
margin: 0 auto 16px;
box-shadow: 0 4px 12px -2px rgba(250, 202, 51, 0.3);
}
.signup-step-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 14px;
background: rgba(167, 139, 250, 0.12);
border: 1px solid rgba(167, 139, 250, 0.22);
color: #C4B5FD;
margin: 0 auto 16px;
}
.signup-step-title {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.1px;
color: #C4B5FD;
line-height: 1.3;
margin: 0 0 10px;
}
.signup-step-text {
font-size: 13.5px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.75);
margin: 0;
}
.signup-amplify-section {
padding-block: var(--space-12) var(--space-16);
}
.signup-amplify-content {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.signup-amplify-content h2 {
margin-bottom: 24px;
}
.signup-amplify-text {
font-size: 16px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.78);
margin: 0 0 18px;
}
.signup-amplify-text:last-child {
margin-bottom: 0;
}
@media (max-width: 1024px) {
.signup-platforms-grid {
grid-template-columns: repeat(2, 1fr);
}
.signup-steps-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 768px) {
.signup-form-card {
padding: 32px 24px;
border-radius: 20px;
}
.signup-features-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.signup-platforms-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.signup-feature-card,
.signup-platform-card,
.signup-step-card {
padding: 24px 20px;
}
.signup-section-head {
margin-bottom: 32px;
}
.signup-section-lead {
font-size: 14.5px;
}
.signup-feature-text,
.signup-platform-text,
.signup-step-text {
font-size: 14px;
}
.signup-amplify-text {
font-size: 15px;
line-height: 1.75;
}
}
@media (max-width: 480px) {
.signup-form-card {
padding: 28px 20px;
}
.signup-platforms-grid,
.signup-steps-grid {
grid-template-columns: 1fr;
}
.signup-hero-tagline {
font-size: 18px;
}
.signup-hero-subtagline {
font-size: 14px;
}
.signup-feature-title,
.signup-step-title {
font-size: 16px;
}
.signup-platform-title {
font-size: 16px;
}
}
.signup-form-card input.signup-input:focus,
.signup-form-card input.signup-input:focus-visible {
outline: none !important;
border-color: rgba(167, 139, 250, 0.6) !important;
background: rgba(255, 255, 255, 0.06) !important;
box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25) !important;
}
.signup-form-card input.signup-input:focus {
-webkit-box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25) !important;
}
.signup-amplify-card {
max-width: 800px;
margin: 0 auto;
padding: 48px 56px;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.06) 0%,
rgba(124, 58, 237, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 24px;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
text-align: center;
isolation: isolate;
}
@media (max-width: 640px) {
.signup-amplify-card {
padding: 32px 24px;
border-radius: 18px;
}
}
altcha-widget {
--altcha-color-base: rgba(255, 255, 255, 0.04);
--altcha-color-base-rgb: 255, 255, 255;
--altcha-color-border: rgba(167, 139, 250, 0.25);
--altcha-color-text: rgba(255, 255, 255, 0.9);
--altcha-color-text-rgb: 255, 255, 255;
--altcha-color-footer-bg: rgba(255, 255, 255, 0.02);
--altcha-color-error: #FCA5A5;
--altcha-color-error-rgb: 252, 165, 165;
--altcha-border-radius: 10px;
--altcha-max-width: 100%;
display: block;
width: 100%;
margin: 16px 0;
border-radius: 10px;
}
altcha-widget::part(checkbox) {
accent-color: var(--yellow, #FACA33);
}
altcha-widget::part(label) {
color: rgba(255, 255, 255, 0.9);
font-size: 13px;
}
altcha-widget::part(verified) {
background: rgba(167, 139, 250, 0.15);
color: #C4B5FD;
border-color: rgba(167, 139, 250, 0.3);
}
altcha-widget::part(error) {
color: #FCA5A5;
}
altcha-widget::part(spinner) {
border-top-color: var(--yellow, #FACA33);
}
.signup-captcha-wrapper {
margin: 16px 0;
}
form.signup-form .signup-form-card input.signup-input:focus,
form.signup-form .signup-form-card input.signup-input:focus-visible,
.signup-form-card input.form-control.signup-input:focus,
.signup-form-card input.form-control.signup-input:focus-visible {
outline: 2px solid rgba(167, 139, 250, 0.6) !important;
outline-offset: 0 !important;
border-color: rgba(167, 139, 250, 0.6) !important;
background: rgba(255, 255, 255, 0.06) !important;
box-shadow:
0 0 0 3px rgba(167, 139, 250, 0.25),
inset 0 0 0 1px rgba(167, 139, 250, 0.6) !important;
}
.signup-form-card input:focus,
.signup-form-card input:focus-visible {
outline-color: rgba(167, 139, 250, 0.6) !important;
}
.services-hero-tagline {
font-size: clamp(20px, 1.8vw + 0.5rem, 26px);
font-weight: 600;
letter-spacing: -0.3px;
color: rgba(255, 255, 255, 0.92);
line-height: 1.3;
margin: 16px 0 6px;
}
.services-hero-subtagline {
font-size: clamp(15px, 1vw + 0.5rem, 17px);
font-weight: 500;
color: rgba(196, 181, 253, 0.85);
line-height: 1.45;
margin: 0 0 4px;
}
.services-hero-lead {
max-width: 760px;
}
.services-browser {
max-width: 1280px;
margin: 0 auto 60px;
padding: 0 20px;
}
.services-browser .row {
margin: 0;
}
.services-browser .col-lg-12 {
padding: 0;
}
.services-browser .nav.nav-pills.services-nav-pills {
position: relative;
z-index: 50;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
padding: 16px 20px;
max-width: 100%;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.08) 0%,
rgba(124, 58, 237, 0.03) 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
list-style: none;
margin: 0 0 24px 0;
}
.services-browser .nav.nav-pills > li {
margin: 0;
float: none;
list-style: none;
}
.services-browser .dropdown .btn.dropdown-toggle.btn-primary {
background: rgba(167, 139, 250, 0.15) !important;
border: 1px solid rgba(167, 139, 250, 0.35) !important;
color: #FFFFFF !important;
padding: 10px 18px !important;
min-height: 44px !important;
font-size: 14px !important;
font-weight: 500 !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
box-shadow: none !important;
transition: background-color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.services-browser .dropdown .btn.dropdown-toggle.btn-primary:hover,
.services-browser .dropdown.open .btn.dropdown-toggle.btn-primary {
background: rgba(167, 139, 250, 0.22) !important;
border-color: rgba(167, 139, 250, 0.55) !important;
}
.services-browser .dropdown .btn.dropdown-toggle.btn-primary:focus-visible {
outline: 2px solid rgba(167, 139, 250, 0.6) !important;
outline-offset: 2px !important;
}
.services-browser [data-filter-active-category]:empty::before {
content: "All Categories";
color: rgba(255, 255, 255, 0.95);
}
.services-browser .dropdown .btn.dropdown-toggle .caret {
border-top-color: rgba(196, 181, 253, 0.9) !important;
margin-left: 6px;
}
.services-browser .nav.nav-pills > li.dropdown {
position: relative;
}
.services-browser .dropdown.open {
z-index: 2000;
}
.services-browser .dropdown-menu {
position: absolute !important;
top: 100% !important;
left: 0 !important;
z-index: 2001 !important;
margin-top: 4px !important;
min-width: 280px !important;
max-height: 400px !important;
overflow-y: auto !important;
background: #0D0623 !important;
border: 1px solid rgba(167, 139, 250, 0.3) !important;
border-radius: 12px !important;
padding: 8px !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.services-browser .dropdown-menu > li > a,
.services-browser .dropdown-menu .dropdown-item {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 12px !important;
color: rgba(255, 255, 255, 0.9) !important;
border-radius: 8px !important;
font-size: 13px !important;
text-decoration: none !important;
transition: background-color var(--dur-hover) var(--ease-premium),
color var(--dur-hover) var(--ease-premium);
}
.services-browser .dropdown-menu > li > a:hover,
.services-browser .dropdown-menu .dropdown-item:hover,
.services-browser .dropdown-menu .dropdown-item:focus,
.services-browser .dropdown-menu > li.active > a {
background: rgba(167, 139, 250, 0.18) !important;
color: #FFFFFF !important;
}
.services-browser .dropdown-menu > li:nth-child(even) > a,
.services-browser .dropdown-menu .dropdown-item:nth-child(even) {
background: rgba(167, 139, 250, 0.04);
}
.services-browser .dropdown-menu .dropdown-item .fa-star {
color: var(--yellow, #FACA33);
}
.services-browser .dropdown-menu img.img-responsive {
width: 16px !important;
height: 16px !important;
object-fit: contain;
display: inline-block !important;
margin: 0 !important;
}
.services-browser ul.nav.nav-pills > li.search,
.services-browser ul.nav.nav-pills > li.pull-right.search {
margin-left: 0 !important;
flex: 1 1 320px !important;
width: auto !important;
max-width: none !important;
min-width: 280px !important;
float: none !important;
clear: none !important;
position: relative !important;
right: auto !important;
}
@media (min-width: 768px) {
.services-browser ul.nav.nav-pills.services-nav-pills {
padding-right: 32px !important;
}
}
#service-table.services-table tbody tr.service-row > td:nth-child(3) {
color: #FFFFFF !important;
font-weight: 700 !important;
}
@media (max-width: 767px) {
html body #service-table.services-table tbody tr.service-row > td:nth-child(3)::before {
color: rgba(196, 181, 253, 0.7) !important;
font-weight: 500 !important;
}
}
.services-marketing ul.services-bullet-list,
.services-marketing-section ul.services-bullet-list,
.services-marketing-section ul,
section[class*="marketing"] ul {
list-style: none !important;
padding-left: 0 !important;
}
.services-marketing ul.services-bullet-list li,
.services-marketing-section ul.services-bullet-list li,
.services-marketing-section ul li,
section[class*="marketing"] ul li {
position: relative !important;
padding-left: 28px !important;
margin-bottom: 10px !important;
line-height: 1.6 !important;
}
.services-marketing ul.services-bullet-list li::before,
.services-marketing-section ul.services-bullet-list li::before,
.services-marketing-section ul li::before,
section[class*="marketing"] ul li::before {
content: "\002713" !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
color: #FACA33 !important;
font-weight: 700 !important;
font-size: 16px !important;
line-height: 1.6 !important;
}
.services-browser ul.nav.nav-pills > li .btn .fa-filter,
.services-browser ul.nav.nav-pills > li .dropdown-toggle .fa-filter,
.services-browser ul.nav.nav-pills > li .fal.fa-filter,
.services-browser ul.nav.nav-pills > li .fa.fa-filter,
.services-browser ul.nav.nav-pills > li svg[class*="filter"] {
color: #FACA33 !important;
fill: #FACA33 !important;
}
.services-browser ul.nav.nav-pills > li.search .input-group-btn .btn .fa-search,
.services-browser ul.nav.nav-pills > li.search .input-group-btn .btn .fa.fa-search,
.services-browser ul.nav.nav-pills > li.search button[data-filter-serch-btn] .fa-search,
.services-browser ul.nav.nav-pills > li.search button[data-filter-serch-btn] svg,
.services-browser ul.nav.nav-pills > li.search .input-group-btn .btn svg {
color: #FACA33 !important;
fill: #FACA33 !important;
}
.services-browser ul.nav.nav-pills > li.search .input-group-btn .btn:hover {
background: rgba(250, 202, 51, 0.12) !important;
border-color: #FACA33 !important;
}
html body #service-table.services-table tbody tr.service-description-row > td,
html body #service-table.services-table tbody tr.service-description-row.is-open > td {
color: rgba(255, 255, 255, 0.85) !important;
line-height: 1.65 !important;
}
@media (min-width: 768px) {
#service-table.services-table tbody tr.service-row {
transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#service-table.services-table tbody tr.service-row:hover {
background-color: rgba(167, 139, 250, 0.05) !important;
box-shadow: inset 3px 0 0 0 rgba(167, 139, 250, 0.55) !important;
}
}
#service-table.services-table tbody tr.service-row > td:nth-child(3),
#service-table.services-table tbody tr.service-row > td:nth-child(4),
#service-table.services-table tbody tr.service-row > td:nth-child(5) {
font-variant-numeric: tabular-nums !important;
font-feature-settings: "tnum" 1, "kern" 1 !important;
}
@media (min-width: 768px) {
#service-table.services-table tbody tr.service-row .btn-desc-toggle,
#service-table.services-table tbody tr.service-row button.btn-desc-toggle {
transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
background-color 0.18s ease !important;
}
#service-table.services-table tbody tr.service-row .btn-desc-toggle:hover,
#service-table.services-table tbody tr.service-row button.btn-desc-toggle:hover {
transform: translateY(-1px) !important;
color: #FACA33 !important;
background-color: rgba(250, 202, 51, 0.10) !important;
box-shadow: 0 4px 12px rgba(250, 202, 51, 0.25),
0 0 0 1px rgba(250, 202, 51, 0.6) inset !important;
}
#service-table.services-table tbody tr.service-row .btn-desc-toggle:active,
#service-table.services-table tbody tr.service-row button.btn-desc-toggle:active {
transform: translateY(0) !important;
box-shadow: 0 1px 4px rgba(250, 202, 51, 0.12) inset !important;
}
}
@media (min-width: 768px) {
.services-browser .well.well-float.services-catalog-well {
box-shadow: 0 20px 60px -20px rgba(124, 58, 237, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
}
html body #service-table.services-table tbody tr.service-description-row,
html body #service-table.services-table tbody tr.service-description-row.is-open {
border-left: 0 !important;
background: rgba(8, 4, 26, 0.6) !important;
box-shadow: none !important;
}
html body #service-table.services-table tbody tr.service-description-row > td,
html body #service-table.services-table tbody tr.service-description-row.is-open > td {
background: transparent !important;
border-left: 0 !important;
}
@media (min-width: 768px) {
html body #service-table.services-table tbody tr.service-row a.btn-default,
html body #service-table.services-table tbody tr.service-row .btn-default {
transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
background-color 0.18s ease,
color 0.18s ease !important;
}
html body #service-table.services-table tbody tr.service-row a.btn-default:hover,
html body #service-table.services-table tbody tr.service-row .btn-default:hover {
transform: translateY(-1px) !important;
color: #FACA33 !important;
background-color: rgba(250, 202, 51, 0.10) !important;
box-shadow: 0 6px 14px rgba(250, 202, 51, 0.22),
inset 0 0 0 1px rgba(250, 202, 51, 0.7) !important;
}
html body #service-table.services-table tbody tr.service-row a.btn-default:active,
html body #service-table.services-table tbody tr.service-row .btn-default:active {
transform: translateY(0) !important;
}
}
.services-browser ul.nav.nav-pills > li.search::before {
display: none !important;
}
.services-browser .input-group > .form-control.services-search-input {
float: none !important;
}
.services-browser .nav.nav-pills > li.search .input-group {
width: 100% !important;
display: flex !important;
align-items: stretch !important;
}
.services-browser .nav.nav-pills > li.search .input-group .form-control.services-search-input {
flex: 1 1 auto !important;
width: auto !important;
height: auto !important;
min-height: 44px !important;
padding: 10px 14px !important;
background: rgba(255, 255, 255, 0.04);
color: #FFFFFF;
border: 1px solid rgba(167, 139, 250, 0.25);
border-radius: 10px 0 0 10px !important;
font-size: 14px;
transition: background-color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium),
box-shadow var(--dur-hover) var(--ease-premium);
}
.services-browser .nav.nav-pills > li.search .input-group .form-control.services-search-input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.services-browser .nav.nav-pills > li.search .input-group .form-control.services-search-input:hover {
border-color: rgba(167, 139, 250, 0.4);
}
.services-browser .nav.nav-pills > li.search .input-group .form-control.services-search-input:focus,
.services-browser .nav.nav-pills > li.search .input-group .form-control.services-search-input:focus-visible {
outline: 2px solid rgba(167, 139, 250, 0.6) !important;
outline-offset: 0 !important;
border-color: rgba(167, 139, 250, 0.6) !important;
background: rgba(255, 255, 255, 0.06) !important;
box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25) !important;
}
.services-browser .nav.nav-pills > li.search .input-group-btn .btn {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 14px !important;
min-height: 44px !important;
background: rgba(167, 139, 250, 0.15) !important;
color: #C4B5FD !important;
border: 1px solid rgba(167, 139, 250, 0.25) !important;
border-left: none !important;
border-radius: 0 10px 10px 0 !important;
cursor: pointer;
transition: background-color var(--dur-hover) var(--ease-premium),
color var(--dur-hover) var(--ease-premium);
}
.services-browser .nav.nav-pills > li.search .input-group-btn .btn:hover {
background: rgba(167, 139, 250, 0.25) !important;
color: #FFFFFF !important;
}
.services-browser .well.well-float.services-catalog-well {
background: linear-gradient(180deg,
rgba(8, 4, 26, 0.5) 0%,
rgba(8, 4, 26, 0.3) 100%) !important;
border: 1px solid rgba(167, 139, 250, 0.15) !important;
border-radius: 16px !important;
padding: 0 !important;
box-shadow: none !important;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
overflow: visible !important;
margin: 0;
}
#service-table.services-table.table {
width: 100%;
margin: 0;
background: transparent;
color: rgba(255, 255, 255, 0.85);
border-collapse: separate;
border-spacing: 0;
}
#service-table.services-table thead {
background: rgba(124, 58, 237, 0.1);
}
#service-table.services-table thead th {
text-align: left;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.9);
padding: 14px 16px;
background: transparent;
border-bottom: 2px solid rgba(167, 139, 250, 0.25);
border-top: none;
}
#service-table.services-table thead th .fa-exclamation-circle {
margin-left: 4px;
color: rgba(196, 181, 253, 0.5);
font-size: 12px;
}
#service-table.services-table tbody tr {
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
transition: background-color 200ms var(--ease-premium);
}
#service-table.services-table tbody tr:has(> td[colspan]) {
background: linear-gradient(90deg,
rgba(167, 139, 250, 0.12) 0%,
rgba(124, 58, 237, 0.06) 100%);
}
#service-table.services-table tbody tr td[colspan] {
padding: 14px 16px;
font-size: 14px;
color: #C4B5FD;
border-bottom: 1px solid rgba(167, 139, 250, 0.15);
}
#service-table.services-table tbody tr td[colspan] strong {
color: #FFFFFF;
font-weight: 700;
font-size: 15px;
margin-left: 6px;
}
#service-table.services-table tbody tr:not(:has(> td[colspan])):nth-of-type(odd) {
background: rgba(167, 139, 250, 0.025);
}
#service-table.services-table tbody tr:not(:has(> td[colspan])):hover {
background: rgba(167, 139, 250, 0.08);
}
#service-table.services-table tbody tr td {
padding: 12px 16px;
font-size: 14px;
color: rgba(255, 255, 255, 0.85);
border: none;
vertical-align: middle;
}
#service-table.services-table tbody tr td[data-filter-table-service-id] {
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", "Geist Mono", monospace);
color: #A78BFA;
font-size: 13px;
font-weight: 500;
}
#service-table.services-table tbody tr td.service-name {
color: rgba(255, 255, 255, 0.95);
font-weight: 500;
}
#service-table.services-table tbody tr td span[data-favorite-service-id] {
cursor: pointer;
color: rgba(255, 255, 255, 0.3);
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
transition: color var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium),
transform var(--dur-hover) var(--ease-premium);
}
#service-table.services-table tbody tr td span[data-favorite-service-id]:hover {
color: var(--yellow, #FACA33);
background: rgba(250, 202, 51, 0.08);
transform: scale(1.1);
}
#service-table.services-table tbody tr td span[data-favorite-service-id].favorite-active {
color: var(--yellow, #FACA33);
}
#service-table.services-table tbody tr.service-description.visible-xs td,
#service-table.services-table tbody tr.service-description.visible-sm td {
padding: 6px 16px 14px;
background: rgba(8, 4, 26, 0.4);
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.55;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.services-marketing-section {
padding-block: var(--space-12) var(--space-10);
}
.services-section-head {
text-align: center;
max-width: 800px;
margin: 0 auto 40px;
}
.services-section-head h2 {
margin-bottom: 16px;
}
.services-marketing-content {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 36px;
}
.services-marketing-article {
padding: 28px 32px;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.04) 0%,
rgba(124, 58, 237, 0.01) 100%);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 18px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.services-marketing-h3 {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.2px;
color: #C4B5FD;
line-height: 1.3;
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(167, 139, 250, 0.15);
}
.services-marketing-article p {
font-size: 15px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.78);
margin: 0 0 14px;
}
.services-marketing-article p:last-child {
margin-bottom: 0;
}
.services-marketing-article a {
color: #C4B5FD;
text-decoration: none;
border-bottom: 1px solid rgba(196, 181, 253, 0.4);
transition: color var(--dur-hover) var(--ease-premium),
border-color var(--dur-hover) var(--ease-premium);
}
.services-marketing-article a:hover {
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.6);
}
.services-bullet-intro {
margin-bottom: 12px !important;
color: rgba(255, 255, 255, 0.88) !important;
}
.services-bullet-list {
list-style: none;
padding: 0;
margin: 0 0 8px;
display: flex;
flex-direction: column;
gap: 10px;
}
.services-bullet-list li {
position: relative;
padding-left: 22px;
font-size: 15px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.78);
}
.services-bullet-list li::before {
content: "\0025C6";
position: absolute;
left: 0;
top: 0;
color: #C4B5FD;
font-size: 11px;
line-height: 1.8;
}
.services-signup-cta-section {
padding-block: var(--space-10) var(--space-12);
}
.services-signup-cta-card {
max-width: 820px;
margin: 0 auto;
padding: 56px 48px;
text-align: center;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.08) 0%,
rgba(124, 58, 237, 0.03) 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 24px;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
isolation: isolate;
}
.services-signup-cta-card h2 {
margin-bottom: 20px;
}
.services-signup-cta-text {
font-size: 16px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.85);
max-width: 640px;
margin: 0 auto 24px;
}
.services-signup-cta-buttons {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.services-signup-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
background: var(--yellow, #FACA33);
color: #08041A;
border: 1px solid var(--yellow, #FACA33);
border-radius: 12px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.2px;
text-decoration: none;
transition: transform var(--dur-hover) var(--ease-premium),
box-shadow var(--dur-hover) var(--ease-premium),
background-color var(--dur-hover) var(--ease-premium);
}
.services-signup-cta-btn:hover,
a.services-signup-cta-btn:hover {
transform: translateY(-2px);
background: #FACA33;
color: #08041A;
text-decoration: none;
box-shadow: 0 10px 28px rgba(250, 202, 51, 0.45),
0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}
.services-signup-cta-btn:focus-visible {
outline: 2px solid #A78BFA;
outline-offset: 3px;
}
.services-admin-text-section {
padding-block: var(--space-6) var(--space-10);
}
.services-admin-text-wrapper {
max-width: 760px;
margin: 0 auto;
padding: 28px 32px;
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.04) 0%,
rgba(124, 58, 237, 0.01) 100%);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 16px;
font-size: 15px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.78);
}
.modal-content {
background: linear-gradient(180deg, rgba(8, 4, 26, 0.95), rgba(8, 4, 26, 0.92));
border: 1px solid rgba(167, 139, 250, 0.2);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-radius: 24px;
color: rgba(255, 255, 255, 0.9);
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}
.modal-content .modal-header,
.modal-content .modal-footer {
border-color: rgba(167, 139, 250, 0.12);
}
.modal-content .modal-title {
color: #FFFFFF;
font-weight: 700;
}
.modal-content .close,
.modal-content button.close {
color: rgba(255, 255, 255, 0.6);
text-shadow: none;
opacity: 1;
}
.modal-content .close:hover {
color: #FFFFFF;
}
@media (max-width: 1024px) {
.services-browser .nav.nav-pills.services-nav-pills {
padding: 16px 18px;
}
}
@media (max-width: 767.98px) {
.services-browser {
margin-bottom: 40px;
}
.services-browser .nav.nav-pills.services-nav-pills {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 14px;
}
.services-browser .nav.nav-pills > li.pull-right.search {
margin-left: 0;
flex: 1;
width: 100%;
}
.services-browser .nav.nav-pills > li {
width: 100%;
}
.services-browser .nav.nav-pills > li .dropdown {
width: 100%;
}
.services-browser .nav.nav-pills > li .dropdown .btn.btn-primary.dropdown-toggle {
width: 100%;
justify-content: space-between;
}
.services-browser .nav.nav-pills > li .dropdown-menu {
width: 100%;
}
.services-browser .well.well-float.services-catalog-well {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#service-table.services-table {
min-width: 480px;
}
#service-table.services-table thead th,
#service-table.services-table tbody td {
padding: 10px 12px;
font-size: 13px;
}
.services-marketing-section,
.services-signup-cta-section {
padding-block: var(--space-8) var(--space-8);
}
.services-marketing-article {
padding: 22px 22px;
}
.services-signup-cta-card {
padding: 40px 24px;
border-radius: 20px;
}
.services-signup-cta-text {
font-size: 15px;
}
}
@media (max-width: 480px) {
.services-marketing-h3 {
font-size: 18px;
}
.services-marketing-article p,
.services-bullet-list li {
font-size: 14px;
}
.services-signup-cta-btn {
padding: 12px 24px;
font-size: 14.5px;
}
}
#service-table {
table-layout: auto !important;
width: 100% !important;
}
#service-table colgroup {
display: none !important;
}
#service-table th,
#service-table td {
padding: 10px 12px;
vertical-align: middle;
}
#service-table th:first-child:not(.width-service-name),
#service-table td:first-child:not(.service-name) {
width: 60px !important;
}
#service-table th.width-service-name,
#service-table td.service-name {
width: auto !important;
min-width: 280px !important;
max-width: none !important;
white-space: normal !important;
word-break: break-word !important;
}
#service-table th.nowrap,
#service-table td.nowrap {
width: 1% !important;
white-space: nowrap !important;
font-variant-numeric: tabular-nums !important;
}
#service-table td.nowrap {
text-align: right;
}
#service-table th.nowrap {
text-align: center;
}
#service-table th.service-description__th,
#service-table td.service-description-cell {
width: 110px !important;
text-align: center !important;
}
#service-table td.text-right {
text-align: right;
}
.btn-desc-toggle,
button.btn-desc-toggle,
.services-table .btn-desc-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 14px !important;
background: transparent !important;
border: 1.5px solid #FACA33 !important;
color: #FACA33 !important;
border-radius: 8px !important;
font-size: 13px !important;
font-weight: 600 !important;
font-family: inherit;
cursor: pointer !important;
white-space: nowrap;
transition: all 0.2s ease !important;
}
.btn-desc-toggle:hover,
button.btn-desc-toggle:hover,
.services-table .btn-desc-toggle:hover {
background: rgba(250, 202, 51, 0.10) !important;
color: #FACA33 !important;
border-color: #FACA33 !important;
box-shadow: 0 4px 14px rgba(250, 202, 51, 0.25),
0 0 0 1px rgba(250, 202, 51, 0.6) inset !important;
}
.btn-desc-toggle:focus,
.btn-desc-toggle:focus-visible,
button.btn-desc-toggle:focus {
outline: 2px solid #FACA33 !important;
outline-offset: 2px !important;
}
.btn-desc-toggle .chev {
display: inline-block;
font-size: 10px;
transition: transform 200ms ease;
}
.btn-desc-toggle[aria-expanded="true"] .chev {
transform: rotate(180deg);
}
.btn-desc-toggle[aria-expanded="true"] {
background: rgba(250, 202, 51, 0.15);
border-color: rgba(250, 202, 51, 0.4);
color: var(--yellow, #FACA33);
}
@media (min-width: 768px) {
#service-table tr.service-description-row.visible-xs.visible-sm {
display: none !important;
}
#service-table tr.service-description-row.visible-xs.visible-sm.is-open {
display: table-row !important;
}
#service-table tr.service-description-row td {
background: rgba(167, 139, 250, 0.04) !important;
border-left: 3px solid rgba(167, 139, 250, 0.5);
padding: 16px 20px !important;
color: rgba(255, 255, 255, 0.85);
line-height: 1.6;
font-size: 14px;
}
}
#service-table tbody tr[data-filter-table-category-id] > td[colspan] {
background: linear-gradient(135deg, rgba(250, 202, 51, 0.20) 0%, rgba(124, 58, 237, 0.08) 100%) !important;
background-image: linear-gradient(135deg, rgba(250, 202, 51, 0.20) 0%, rgba(124, 58, 237, 0.08) 100%) !important;
border: none !important;
border-left: 4px solid #FACA33 !important;
box-shadow: inset 0 -2px 0 rgba(250, 202, 51, 0.35),
0 2px 12px rgba(250, 202, 51, 0.10) !important;
padding: 16px 20px !important;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #FFFFFF !important;
}
#service-table tbody tr[data-filter-table-category-id] > td[colspan] strong,
#service-table tbody tr[data-filter-table-category-id] > td[colspan] b {
display: inline-block;
font-size: 15px;
letter-spacing: 0.02em;
text-transform: none;
color: #FFFFFF !important;
font-weight: 700;
margin-left: 4px;
}
@media (min-width: 768px) {
html body #service-table.services-table tbody tr[data-filter-table-category-id]:not(.service-row):not(.service-description-row) {
background: transparent !important;
box-shadow: none !important;
}
html body #service-table.services-table tbody tr[data-filter-table-category-id]:not(.service-row):not(.service-description-row) > td {
background: linear-gradient(135deg, rgba(250, 202, 51, 0.20) 0%, rgba(124, 58, 237, 0.08) 100%) !important;
background-image: linear-gradient(135deg, rgba(250, 202, 51, 0.20) 0%, rgba(124, 58, 237, 0.08) 100%) !important;
border-left: 4px solid #FACA33 !important;
box-shadow: inset 0 -2px 0 rgba(250, 202, 51, 0.35),
0 2px 12px rgba(250, 202, 51, 0.10) !important;
color: #FFFFFF !important;
font-weight: 700 !important;
}
html body #service-table.services-table tbody tr[data-filter-table-category-id]:not(.service-row):not(.service-description-row) > td strong,
html body #service-table.services-table tbody tr[data-filter-table-category-id]:not(.service-row):not(.service-description-row) > td b {
color: #FFFFFF !important;
font-weight: 700 !important;
}
}
#service-table tr.service-description-row > td {
text-transform: none !important;
letter-spacing: normal !important;
font-size: 14px !important;
line-height: 1.6 !important;
color: rgba(255, 255, 255, 0.85) !important;
}
#service-table td .cell-placeholder {
color: rgba(196, 181, 253, 0.35);
font-weight: 400;
}
#service-table tbody tr.service-row:hover {
background: rgba(167, 139, 250, 0.06) !important;
transition: background 150ms ease;
}
#service-table tbody tr.search-empty-state td {
padding: 60px 24px;
text-align: center;
color: rgba(196, 181, 253, 0.7);
font-size: 16px;
}
#service-table tbody tr.search-empty-state .empty-query {
color: var(--yellow, #FACA33);
font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
[data-reveal],
*[data-reveal] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (max-width: 767px) {
.services-hero {
padding: 32px 16px 16px !important;
}
.services-hero h1,
.services-hero h1.display-1 {
font-size: 32px !important;
line-height: 1.15 !important;
margin: 0 0 16px !important;
padding: 0 !important;
}
.services-hero h2 {
font-size: 22px !important;
}
.services-hero .lead,
.services-hero p.lead {
font-size: 16px !important;
line-height: 1.5 !important;
}
.services-browser ul.nav.nav-pills {
flex-direction: column !important;
align-items: stretch !important;
padding: 12px 16px !important;
}
.services-browser ul.nav.nav-pills > li {
width: 100% !important;
display: block !important;
}
.services-browser ul.nav.nav-pills > li .dropdown,
.services-browser ul.nav.nav-pills > li .btn.dropdown-toggle {
width: 100% !important;
justify-content: space-between !important;
}
.services-browser ul.nav.nav-pills > li.search,
.services-browser ul.nav.nav-pills > li.pull-right.search {
flex: 1 1 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
}
.services-browser ul.nav.nav-pills > li.search::before {
display: none !important;
}
.services-browser .dropdown-menu {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
}
html body .services-browser,
html body .services-browser .row,
html body .services-browser .col-lg-12 {
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important;
overflow-x: hidden !important;
}
html body .services-browser ul.nav.nav-pills {
flex-wrap: wrap !important;
width: 100% !important;
min-width: 0 !important;
flex-direction: column !important;
align-items: stretch !important;
padding: 12px 16px !important;
}
html body .services-browser ul.nav.nav-pills > li {
flex: 1 1 100% !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin-left: 0 !important;
}
html body .well.well-float.services-catalog-well,
html body #service-table.services-table,
html body #service-table.services-table tbody,
html body #service-table.services-table tbody tr.service-row {
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
html body .well.well-float.services-catalog-well {
padding: 0 16px !important;
background: transparent !important;
border: none !important;
overflow: visible !important;
}
html body #service-table.services-table,
html body #service-table.services-table tbody {
display: block !important;
}
html body #service-table.services-table thead,
html body #service-table.services-table colgroup {
display: none !important;
}
html body #service-table.services-table tbody tr[data-filter-table-category-id]:not(.service-row):not(.service-description-row) {
display: block !important;
width: 100% !important;
margin: 24px 0 8px !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 12px !important;
box-shadow: none !important;
box-sizing: border-box !important;
position: relative !important;
overflow: hidden !important;
}
html body #service-table.services-table tbody tr[data-filter-table-category-id]:not(.service-row):not(.service-description-row) > td {
display: block !important;
width: 100% !important;
padding: 14px 18px !important;
background: linear-gradient(135deg, rgba(250, 202, 51, 0.20) 0%, rgba(124, 58, 237, 0.08) 100%) !important;
background-image: linear-gradient(135deg, rgba(250, 202, 51, 0.20) 0%, rgba(124, 58, 237, 0.08) 100%) !important;
border: 0 !important;
border-left: 3px solid #FACA33 !important;
border-radius: 12px !important;
box-shadow: inset 0 -1px 0 rgba(250, 202, 51, 0.30),
0 1px 8px rgba(250, 202, 51, 0.08) !important;
color: #FFFFFF !important;
font-weight: 700 !important;
font-size: 15px !important;
text-align: center !important;
box-sizing: border-box !important;
}
html body #service-table.services-table tbody tr.service-row {
display: block !important;
box-sizing: border-box !important;
margin: 12px 0 !important;
padding: 14px 12px !important;
background: linear-gradient(180deg, rgba(167,139,250,0.08), rgba(124,58,237,0.04)) !important;
border: 1px solid rgba(167,139,250,0.15) !important;
border-radius: 16px !important;
position: relative !important;
}
html body #service-table.services-table tbody tr.service-row > td {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-sizing: border-box !important;
}
html body #service-table.services-table tbody tr.service-row > td:nth-child(1) {
text-align: center !important;
font-family: monospace !important;
font-size: 13px !important;
color: #C4B5FD !important;
margin-bottom: 8px !important;
}
html body #service-table.services-table tbody tr.service-row > td:nth-child(1)::before {
content: "ID #" !important;
margin-right: 4px !important;
font-size: 11px !important;
letter-spacing: 0.1em !important;
color: rgba(196,181,253,0.5) !important;
}
html body #service-table.services-table tbody tr.service-row > td.service-name,
html body #service-table.services-table tbody tr.service-row > td:nth-child(2) {
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
text-align: center !important;
font-size: 13px !important;
color: #FFFFFF !important;
line-height: 1.5 !important;
margin-bottom: 16px !important;
word-break: break-word !important;
white-space: normal !important;
}
html body #service-table.services-table tbody tr.service-row > td:nth-child(6) {
display: none !important;
}
html body #service-table.services-table tbody tr.service-row > td:nth-child(3),
html body #service-table.services-table tbody tr.service-row > td:nth-child(4),
html body #service-table.services-table tbody tr.service-row > td:nth-child(5) {
display: inline-block !important;
width: 32% !important;
vertical-align: top !important;
text-align: center !important;
padding: 8px 2px !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #FFFFFF !important;
box-sizing: border-box !important;
}
html body #service-table.services-table tbody tr.service-row > td:nth-child(3),
html body #service-table.services-table tbody tr.service-row > td:nth-child(4) {
border-right: 1px solid rgba(167, 139, 250, 0.15) !important;
}
html body #service-table.services-table tbody tr.service-row > td:nth-child(3)::before,
html body #service-table.services-table tbody tr.service-row > td:nth-child(4)::before,
html body #service-table.services-table tbody tr.service-row > td:nth-child(5)::before {
content: attr(data-label) !important;
display: block !important;
font-size: 10px !important;
font-weight: 500 !important;
color: rgba(196,181,253,0.7) !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
margin-bottom: 4px !important;
}
html body #service-table.services-table tbody tr.service-row > td:last-child {
text-align: center !important;
margin-top: 12px !important;
padding-top: 12px !important;
border-top: 1px solid rgba(167,139,250,0.15) !important;
}
html body #service-table.services-table tbody tr.service-description-row {
display: none !important;
}
html body #service-table.services-table tbody tr.service-description-row.is-open {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: -8px 0 12px !important;
padding: 16px !important;
background: rgba(8,4,26,0.6) !important;
border-radius: 12px !important;
box-sizing: border-box !important;
}
html body #service-table.services-table tbody tr.service-description-row.is-open > td {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
padding: 0 !important;
color: rgba(255,255,255,0.85) !important;
line-height: 1.6 !important;
font-size: 13px !important;
text-transform: none !important;
letter-spacing: normal !important;
white-space: normal !important;
word-break: break-word !important;
}
html body .services-browser ul.nav.nav-pills > li.search .input-group {
display: flex !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
html body .services-browser ul.nav.nav-pills > li.search .input-group .form-control.services-search-input {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: calc(100% - 50px) !important;
border-radius: 10px 0 0 10px !important;
}
html body .services-browser ul.nav.nav-pills > li.search .input-group .input-group-btn {
flex: 0 0 50px !important;
width: 50px !important;
}
html body .services-browser ul.nav.nav-pills > li.search .input-group .input-group-btn .btn {
width: 50px !important;
min-width: 50px !important;
border-radius: 0 10px 10px 0 !important;
}
.services-marketing-section,
.services-marketing-content {
padding: 24px 16px !important;
}
.services-marketing-content article,
.services-marketing-section article {
padding: 20px 16px !important;
margin-bottom: 20px !important;
}
.services-marketing-content h2,
.services-marketing-section h2 {
font-size: 26px !important;
margin-bottom: 20px !important;
}
.services-marketing-content h3,
.services-marketing-section h3 {
font-size: 20px !important;
margin-top: 24px !important;
margin-bottom: 12px !important;
}
.services-marketing-content p {
font-size: 15px !important;
line-height: 1.6 !important;
}
.services-signup-cta-section,
.services-signup-cta-card {
padding: 32px 20px !important;
margin: 0 16px !important;
}
.services-signup-cta-card h2 {
font-size: 28px !important;
}
.services-signup-cta-btn {
width: 100% !important;
max-width: 100% !important;
padding: 14px 24px !important;
font-size: 16px !important;
justify-content: center !important;
}
.services-browser {
max-width: 100% !important;
padding: 0 4px !important;
}
html body #service-table.services-table tbody tr.service-row,
html body #service-table.services-table tbody tr[data-filter-table-category-id]:not(.service-row):not(.service-description-row),
html body #service-table.services-table tbody tr.service-description-row.is-open {
margin-left: 16px !important;
margin-right: 16px !important;
width: calc(100% - 32px) !important;
max-width: calc(100% - 32px) !important;
box-sizing: border-box !important;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.services-browser ul.nav.nav-pills > li.search::before {
display: none;
}
.services-hero h1.display-1 {
font-size: 44px;
}
}
html body #service-table.services-table tbody tr.service-description-row,
html body #service-table.services-table tbody tr.service-description-row.is-open {
box-shadow: none !important;
border: none !important;
border-left: 0 !important;
background: rgba(8, 4, 26, 0.6) !important;
background-image: none !important;
}
html body #service-table.services-table tbody tr.service-description-row > td,
html body #service-table.services-table tbody tr.service-description-row.is-open > td {
box-shadow: none !important;
border: none !important;
border-left: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
background: transparent !important;
background-image: none !important;
}
.services-signup-cta-card {
max-width: 800px !important;
width: auto !important;
box-sizing: border-box !important;
}
.services-signup-cta-section {
padding-block: 48px var(--space-12) !important;
}
.services-marketing-content {
gap: 28px !important;
}
@media (max-width: 767px) {
.services-signup-cta-section {
padding-block: 32px 48px !important;
}
.services-signup-cta-card {
padding: 36px 24px !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.services-marketing-section {
padding-block: 32px 24px !important;
}
.services-marketing-content {
gap: 20px !important;
}
}
html body .services-marketing-section {
padding-bottom: 0 !important;
}
html body .services-signup-cta-section,
html body section.services-signup-cta-section {
padding-top: 24px !important;
margin-top: 0 !important;
}
html body .services-marketing-content > .services-marketing-article:last-child,
html body .services-marketing-section .services-marketing-article:last-of-type {
margin-bottom: 0 !important;
}
html body .services-marketing-content {
gap: 24px !important;
}
@media (max-width: 767px) {
html body .services-marketing-section {
padding-bottom: 0 !important;
}
html body .services-signup-cta-section,
html body section.services-signup-cta-section {
padding-top: 24px !important;
margin-top: 0 !important;
}
html body .services-marketing-content {
gap: 24px !important;
}
}
.services-platforms {
width: 100%;
max-width: 1280px;
margin: 0 auto 24px;
padding: 0 4px;
box-sizing: border-box;
}
.services-platforms-head {
text-align: center;
margin: 0 0 16px;
}
.services-platforms-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #C4B5FD;
background: rgba(167, 139, 250, 0.12);
padding: 6px 16px;
border-radius: 999px;
}
.services-platforms-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.platform-card {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: linear-gradient(180deg, rgba(167, 139, 250, 0.08), rgba(124, 58, 237, 0.04));
border: 1px solid rgba(167, 139, 250, 0.15);
border-radius: 12px;
text-decoration: none;
color: #FFFFFF;
font-weight: 600;
font-size: 13px;
box-sizing: border-box;
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.2s ease,
background 0.2s ease;
}
.platform-card:hover {
transform: translateY(-2px);
border-color: rgba(167, 139, 250, 0.45);
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.22);
background: linear-gradient(180deg, rgba(167, 139, 250, 0.14), rgba(124, 58, 237, 0.07));
text-decoration: none;
color: #FFFFFF;
}
.platform-ico {
width: 22px;
height: 22px;
flex-shrink: 0;
object-fit: contain;
}
.platform-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.platform-card-all {
background: #FACA33 !important;
border-color: #FACA33 !important;
color: #08041A !important;
font-weight: 700;
}
.platform-card-all:hover {
background: #FACA33 !important;
border-color: #FACA33 !important;
color: #08041A !important;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(250, 202, 51, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}
@media (max-width: 1024px) {
.services-platforms-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
.services-platforms { padding: 0 16px; }
.services-platforms-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.platform-card { padding: 12px 10px; font-size: 12px; gap: 8px; }
.platform-ico { width: 20px; height: 20px; }
}
.aff-page {
max-width: 1120px;
margin: 0 auto;
padding: 0 20px 64px;
box-sizing: border-box;
color: #fff;
}
.aff-hero { text-align: center; padding: 24px 0 8px; }
.aff-eyebrow {
display: inline-block; font-size: 12px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase; color: #C4B5FD;
background: rgba(167,139,250,0.12); padding: 6px 16px; border-radius: 999px;
margin-bottom: 20px;
}
.aff-h1 {
font-size: clamp(30px, 5.5vw, 52px); font-weight: 800; line-height: 1.1;
margin: 0 0 12px; letter-spacing: -0.02em;
background: linear-gradient(
110deg,
var(--purple-light) 0%,
var(--purple-primary) 40%,
var(--text-primary) 60%,
var(--purple-light) 100%
);
background-size: 200% 100%;
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
color: #fff;
animation: shimmer-flow 8s ease-in-out infinite alternate;
filter: drop-shadow(0 4px 24px rgba(167,139,250,0.28));
}
.aff-h2 { font-size: clamp(20px, 3.5vw, 32px); font-weight: 700; line-height: 1.25; margin: 0 0 24px; color: #fff; }
.aff-yellow { color: #FACA33; }
.aff-lead {
max-width: 760px; margin: 0 auto 16px; font-size: clamp(15px, 1.6vw, 17px);
line-height: 1.7; color: rgba(255,255,255,0.8);
}
.aff-inline-link {
color: #A78BFA;
text-decoration: underline;
text-decoration-color: rgba(167,139,250,0.45);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.aff-inline-link:hover { text-decoration-color: #A78BFA; color: #C4B5FD; }
.aff-stats {
display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 32px auto 0; max-width: 720px;
}
.aff-stat {
flex: 1 1 160px; background: linear-gradient(180deg, rgba(167,139,250,0.08), rgba(124,58,237,0.04));
border: 1px solid rgba(167,139,250,0.15); border-radius: 16px; padding: 20px 16px; text-align: center;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.aff-stat:hover {
transform: translateY(-2px);
border-color: rgba(250,202,51,0.4);
}
.aff-stat-num { display: block; font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: #FACA33; line-height: 1; }
.aff-stat-label { display: block; margin-top: 8px; font-size: 13px; color: rgba(196,181,253,0.8); }
.aff-section { margin-top: 56px; }
.aff-hero + .aff-section { margin-top: 88px; }
.aff-section-title {
font-size: clamp(24px, 3.5vw, 34px); font-weight: 700; text-align: center; margin: 0 0 12px; color: #fff;
}
.aff-section-intro { text-align: center; color: rgba(255,255,255,0.75); margin: 0 0 32px; font-size: 16px; }
.aff-callout {
max-width: 820px; margin: 0 auto 32px; padding: 20px 24px;
background: linear-gradient(90deg, rgba(250,202,51,0.12), rgba(250,202,51,0.02));
border-left: 4px solid #FACA33; border-radius: 12px;
color: rgba(255,255,255,0.85); line-height: 1.6; font-size: 15px;
}
.aff-callout-label { font-weight: 700; color: #FACA33; }
.aff-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 18px;
}
.aff-card {
background: linear-gradient(180deg, rgba(167,139,250,0.08), rgba(124,58,237,0.04));
border: 1px solid rgba(167,139,250,0.15); border-radius: 16px; padding: 24px 20px;
transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s, border-color 0.2s;
}
.aff-card:hover {
transform: translateY(-4px); border-color: rgba(167,139,250,0.4);
box-shadow: 0 16px 40px rgba(124,58,237,0.28);
}
.aff-ico {
display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
border-radius: 12px; background: rgba(167,139,250,0.12); color: #A78BFA; margin-bottom: 16px;
}
.aff-ico svg { width: 26px; height: 26px; }
.aff-card-title { font-size: 18px; font-weight: 700; margin: 0 0 10px; color: #fff; }
.aff-card-text { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.75); margin: 0; }
.aff-grid-steps .aff-step {
position: relative; background: linear-gradient(180deg, rgba(167,139,250,0.08), rgba(124,58,237,0.04));
border: 1px solid rgba(167,139,250,0.15); border-radius: 16px; padding: 24px 20px;
transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s, border-color 0.2s;
}
.aff-grid-steps .aff-step:hover {
transform: translateY(-4px); border-color: rgba(167,139,250,0.4); box-shadow: 0 16px 40px rgba(124,58,237,0.28);
}
.aff-step-num {
display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
border-radius: 50%; background: #FACA33; color: #08041A; font-weight: 800; font-size: 18px; margin-bottom: 16px;
}
.aff-grid-steps .aff-card-title { min-height: 2.6em; }
.aff-cta {
margin-top: 56px; text-align: center; padding: 48px 24px;
background: linear-gradient(180deg, rgba(167,139,250,0.10), rgba(124,58,237,0.05));
border: 1px solid rgba(167,139,250,0.15); border-radius: 20px;
}
.aff-cta-title { font-size: clamp(26px, 4vw, 38px); font-weight: 800; margin: 0 0 12px; color: #fff; }
.aff-cta-text { max-width: 620px; margin: 0 auto 28px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.8); }
.aff-cta-btn {
display: inline-flex; align-items: center; gap: 10px; background: #FACA33; color: #08041A;
padding: 14px 32px; border-radius: 10px; font-weight: 700; font-size: 16px; text-decoration: none;
box-shadow: 0 4px 14px rgba(250,202,51,0.22);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.aff-cta-btn:hover, .aff-cta-btn:focus, .aff-cta-btn:focus-visible {
transform: translateY(-2px); color: #150B3D !important; text-decoration: none !important;
box-shadow: 0 12px 28px rgba(250,202,51,0.35);
filter: brightness(1.05);
}
.header-nav-link.is-active-nav { color: var(--purple-subtle); }
.header-nav-link.is-active-nav::after {
width: 100%;
left: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--purple-light), transparent);
box-shadow: 0 0 8px rgba(167, 139, 250, 0.5);
}
.mobile-overlay-nav ul li a.is-active-nav {
color: var(--purple-subtle);
border-inline-start: 2px solid var(--purple-light);
padding-inline-start: 0.5rem;
}
.header-mega-item.is-active-mega {
background: rgba(167, 139, 250, 0.14);
color: #fff;
box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.4);
}
.m-nav-sublist li a.is-active-mega {
color: var(--purple-subtle);
background: rgba(167, 139, 250, 0.1);
}
.crypto-page { max-width: 1120px; margin: 0 auto; padding: 48px 20px 80px; color: #fff; }
.crypto-hero { text-align: center; }
.crypto-eyebrow { display: inline-block; padding: 6px 16px; border-radius: 999px; background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.25); color: #C4B5FD; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 20px; }
.crypto-h1 { font-size: clamp(32px, 6vw, 56px); font-weight: 800; line-height: 1.1; margin: 0 0 10px; letter-spacing: -0.02em; background: linear-gradient(110deg, var(--purple-light) 0%, var(--purple-primary) 40%, var(--text-primary) 60%, var(--purple-light) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; animation: shimmer-flow 8s ease-in-out infinite alternate; filter: drop-shadow(0 4px 24px rgba(167,139,250,0.28)); }
.crypto-sub { font-size: clamp(18px, 2.6vw, 26px); font-weight: 700; margin: 0 0 20px; color: #FACA33; }
.crypto-lead { max-width: 760px; margin: 0 auto 28px; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.8); }
.crypto-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0 auto 28px; }
.crypto-stat { flex: 1 1 180px; max-width: 240px; padding: 20px 16px; border-radius: 16px; background: rgba(167,139,250,0.06); border: 1px solid rgba(167,139,250,0.15); display: flex; flex-direction: column; gap: 4px; transition: transform 0.2s ease, border-color 0.2s ease; }
.crypto-stat:hover { transform: translateY(-2px); border-color: rgba(250,202,51,0.4); }
.crypto-stat-val { font-size: 24px; font-weight: 800; color: #FACA33; }
.crypto-stat-label { font-size: 13px; color: rgba(196,181,253,0.8); }
.crypto-cta-btn { display: inline-block; padding: 16px 32px; border-radius: 10px; background: #FACA33; color: #150B3D; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; }
.crypto-cta-btn:hover, .crypto-cta-btn:focus, .crypto-cta-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(250,202,51,0.35); filter: brightness(1.05); color: #150B3D !important; text-decoration: none !important; }
.crypto-cta-btn-lg { padding: 18px 40px; font-size: 17px; }
.crypto-coins { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 36px auto 0; max-width: 820px; }
.crypto-coin { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(167,139,250,0.18); font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.9); transition: transform 0.2s ease, border-color 0.2s ease; }
.crypto-coin:hover { transform: translateY(-2px); border-color: rgba(167,139,250,0.4); }
.crypto-coin-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 15px; font-weight: 700; }
.crypto-coin-more { padding: 8px 16px; color: rgba(196,181,253,0.7); }
.crypto-section { margin-top: 56px; }
.crypto-hero + .crypto-section { margin-top: 88px; }
.crypto-section-title { text-align: center; font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; margin: 0 0 12px; color: #fff; }
.crypto-section-intro { text-align: center; max-width: 680px; margin: 0 auto 32px; font-size: 16px; color: rgba(255,255,255,0.75); line-height: 1.6; }
.crypto-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.crypto-grid > * { flex: 1 1 300px; max-width: 340px; }
.crypto-grid-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.crypto-grid-steps > * { flex: 1 1 220px; max-width: 260px; }
.crypto-card { display: block; padding: 28px 24px; border-radius: 16px; text-decoration: none; background: rgba(255,255,255,0.03); border: 1px solid rgba(167,139,250,0.15); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.crypto-card:hover { transform: translateY(-4px); border-color: rgba(167,139,250,0.4); box-shadow: 0 16px 40px rgba(124,58,237,0.28); }
.crypto-platform-icon { width: 40px; height: 40px; margin-bottom: 16px; display: block; }
.crypto-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; margin-bottom: 16px; background: rgba(167,139,250,0.12); color: #A78BFA; }
.crypto-card-title { font-size: 18px; font-weight: 700; margin: 0 0 10px; color: #fff; }
.crypto-grid-steps .crypto-card-title { min-height: 2.6em; }
.crypto-card-text { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.75); margin: 0; }
.crypto-step { position: relative; padding: 28px 24px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(167,139,250,0.15); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.crypto-step:hover { transform: translateY(-4px); border-color: rgba(167,139,250,0.4); box-shadow: 0 16px 40px rgba(124,58,237,0.28); }
.crypto-step-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; margin-bottom: 16px; background: #FACA33; color: #150B3D; font-size: 18px; font-weight: 800; }
.crypto-pay { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 820px; margin: 0 auto; }
.crypto-pay-badge { padding: 9px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; background: rgba(255,255,255,0.04); border: 1px solid rgba(167,139,250,0.15); color: rgba(255,255,255,0.82); }
.crypto-pay-crypto { border-color: rgba(250,202,51,0.4); color: #FACA33; background: rgba(250,202,51,0.06); }
.crypto-final-cta { text-align: center; padding: 48px 32px; border-radius: 24px; background: radial-gradient(120% 120% at 50% 0%, rgba(167,139,250,0.12), rgba(124,58,237,0.04) 60%, transparent); border: 1px solid rgba(167,139,250,0.18); }
.crypto-final-title { font-size: clamp(24px, 3.6vw, 36px); font-weight: 800; margin: 0 0 14px; color: #fff; }
.crypto-final-text { max-width: 680px; margin: 0 auto 28px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.8); }
.crypto-support { margin: 20px 0 0; font-size: 14px; color: rgba(255,255,255,0.7); }
.crypto-inline-link { color: #A78BFA; text-decoration: underline; text-decoration-color: rgba(167,139,250,0.45); text-underline-offset: 3px; transition: text-decoration-color 0.2s ease, color 0.2s ease; }
.crypto-inline-link:hover { text-decoration-color: #A78BFA; color: #C4B5FD; }
.crypto-card:hover, .crypto-card:focus, .crypto-card:focus-visible { text-decoration: none !important; }
.crypto-card:hover .crypto-card-title, .crypto-card:focus .crypto-card-title { color: #fff !important; }
.crypto-card:hover .crypto-card-text, .crypto-card:focus .crypto-card-text { color: rgba(255,255,255,0.75) !important; }
.crypto-grid > * { flex: 0 1 340px; }
.crypto-grid-steps > * { flex: 0 1 240px; }
.crypto-hero { position: relative; z-index: 0; }
.crypto-hero::before {
content: ""; position: absolute; inset: -40px -20px 0; z-index: -1; pointer-events: none;
background:
radial-gradient(60% 50% at 50% 0%, rgba(167,139,250,0.18), transparent 70%),
radial-gradient(42% 40% at 16% 82%, rgba(250,202,51,0.10), transparent 70%),
radial-gradient(42% 40% at 84% 28%, rgba(124,58,237,0.16), transparent 70%);
filter: blur(22px);
}
.crypto-hero::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image:
linear-gradient(rgba(167,139,250,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(167,139,250,0.05) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask: radial-gradient(62% 60% at 50% 28%, #000, transparent 78%);
mask: radial-gradient(62% 60% at 50% 28%, #000, transparent 78%);
}
.crypto-eyebrow {
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 16px rgba(124,58,237,0.18);
}
.crypto-card, .crypto-step {
background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
transition: transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.25s ease, border-color 0.2s ease;
}
.crypto-card:hover, .crypto-step:hover {
transform: translateY(-6px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 20px 50px rgba(124,58,237,0.32), 0 0 0 1px rgba(167,139,250,0.12);
}
.crypto-ico {
background: radial-gradient(120% 120% at 30% 20%, rgba(167,139,250,0.35), rgba(167,139,250,0.08) 70%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.2), 0 8px 22px rgba(124,58,237,0.22);
}
.crypto-step-num {
background: linear-gradient(180deg, #FFE07A, #FACA33 60%, #E0A800);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 6px 16px rgba(250,202,51,0.3);
}
.crypto-cta-btn {
background: linear-gradient(180deg, #FFE07A, #FACA33 55%, #F0B400);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 0 rgba(180,130,0,0.3), 0 8px 22px rgba(250,202,51,0.28);
}
.crypto-cta-btn:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 14px 32px rgba(250,202,51,0.42);
}
.crypto-coin {
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.crypto-coin:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 24px rgba(124,58,237,0.28); }
.crypto-coin-badge { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 10px rgba(0,0,0,0.35); }
.crypto-pay-crypto {
background: linear-gradient(180deg, rgba(250,202,51,0.16), rgba(250,202,51,0.06));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 6px 18px rgba(250,202,51,0.22);
}
.crypto-stat {
background: radial-gradient(120% 80% at 50% 0%, rgba(167,139,250,0.14), transparent 60%), rgba(167,139,250,0.06);
}
.crypto-stat-val { text-shadow: 0 0 24px rgba(250,202,51,0.4); }
.platform-tile-link:hover,
.platform-tile-link:focus,
.platform-tile-link:focus-visible {
color: inherit;
text-decoration: none;
}
.marketing-header {
background: rgba(8, 4, 26, 0.42);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.marketing-header.scrolled,
.marketing-header.header-scrolled,
header.header-scrolled {
background: rgba(8, 4, 26, 0.7);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-bottom-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 8px 32px -12px rgba(8, 4, 26, 0.6);
}
.plat-hero-badge { width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); border: 1px solid rgba(167,139,250,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 14px 44px -14px rgba(167,139,250,0.5); position: relative; }
.plat-hero-badge::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 120% at 50% 0%, rgba(167,139,250,0.28), transparent 62%); pointer-events: none; }
.plat-hero-icon { width: 52px; height: 52px; display: block; position: relative; }
.plat-status-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 940px; margin: 0 auto; }
.plat-status { flex: 0 1 280px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)); border: 1px solid rgba(167,139,250,0.15); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.plat-status-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-bottom: 6px; color: #C4B5FD; }
.plat-status-name::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.plat-status-desc { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.72); margin: 0; }
.plat-status-completed .plat-status-name { color: #34D399; }
.plat-status-pending .plat-status-name { color: #94A3B8; }
.plat-status-processing .plat-status-name { color: #A78BFA; }
.plat-status-progress .plat-status-name { color: #38BDF8; }
.plat-status-refilling .plat-status-name { color: #22D3EE; }
.plat-status-canceled .plat-status-name { color: #F87171; }
.plat-status-partial .plat-status-name { color: #FACA33; }
.plat-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 38px auto 0; max-width: 780px; }
.plat-stat { flex: 1 1 150px; min-width: 132px; max-width: 200px; padding: 18px 16px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); border: 1px solid rgba(167,139,250,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 30px -16px rgba(124,58,237,0.4); text-align: center; }
.plat-stat-num { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plat-stat-label { display: block; margin-top: 6px; font-size: 12.5px; color: rgba(255,255,255,0.62); font-weight: 500; }
.plat-stat-services .plat-stat-num { color: #C4B5FD; }
.plat-stat-users .plat-stat-num { color: #C4B5FD; }
.plat-stat-completion .plat-stat-num { color: #6FAE8E; }
.plat-stat-time .plat-stat-num { color: #C4B5FD; }
.lp-order-section { max-width: 1100px; margin: 0 auto; padding: 20px 20px 8px; }
.lp-order-head { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.lp-order-sub { color: rgba(255,255,255,0.62); font-size: 15px; line-height: 1.6; margin: 10px 0 0; }
.lp-form { max-width: 560px; margin: 0 auto; padding: 26px 24px 24px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); border: 1px solid rgba(167,139,250,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 30px 70px -30px rgba(124,58,237,0.5); position: relative; }
.lp-form-header { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(167,139,250,0.12); }
.lp-form-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(167,139,250,0.16); flex: none; }
.lp-form-title { font-weight: 700; font-size: 16px; color: #fff; }
.lp-form-subtitle { font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 2px; }
.lp-field { margin-bottom: 16px; }
.lp-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(196,181,253,0.7); margin-bottom: 7px; }
.lp-select-wrap { position: relative; }
.lp-select-wrap::after { content: "\25BE"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: rgba(196,181,253,0.7); font-size: 12px; }
.lp-select, .lp-input { width: 100%; box-sizing: border-box; padding: 13px 14px; border-radius: 12px; background: rgba(8,4,26,0.55); border: 1px solid rgba(167,139,250,0.2); color: #fff; font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.lp-select { -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer; }
.lp-select option { background: #150B3D; color: #fff; }
.lp-select:focus, .lp-input:focus { border-color: rgba(167,139,250,0.5); box-shadow: 0 0 0 3px rgba(167,139,250,0.15); }
.lp-input::placeholder { color: rgba(255,255,255,0.35); }
.lp-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lp-preset { flex: 1 1 auto; min-width: 52px; padding: 8px 6px; border-radius: 9px; background: rgba(167,139,250,0.08); border: 1px solid rgba(167,139,250,0.2); color: #C4B5FD; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.lp-preset:hover { background: rgba(167,139,250,0.16); color: #fff; }
.lp-minmax { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 8px; }
.lp-summary { margin: 20px 0 18px; padding: 16px 18px; border-radius: 14px; background: rgba(8,4,26,0.5); border: 1px solid rgba(167,139,250,0.14); }
.lp-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: rgba(255,255,255,0.7); }
.lp-summary-total { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(167,139,250,0.14); font-size: 16px; font-weight: 700; color: #fff; }
.lp-summary-total span:last-child { color: #34D399; font-size: 22px; }
.lp-order-btn { display: block; text-align: center; padding: 15px; border-radius: 13px; background: linear-gradient(180deg, #FFE07A, #FACA33 60%, #E0A800); color: #150B3D !important; font-weight: 700; font-size: 15px; text-decoration: none !important; box-shadow: 0 12px 30px -10px rgba(250,202,51,0.5); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.lp-order-btn:hover, .lp-order-btn:focus, .lp-order-btn:focus-visible { color: #150B3D !important; text-decoration: none !important; transform: translateY(-2px); box-shadow: 0 16px 38px -10px rgba(250,202,51,0.6); }
.lp-form-foot { text-align: center; font-size: 13px; color: rgba(255,255,255,0.55); margin: 14px 0 0; }
.lp-status { text-align: center; font-size: 13px; color: rgba(196,181,253,0.8); margin: 10px 0 0; min-height: 1px; }
.crypto-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 12px; background: linear-gradient(160deg, rgba(167,139,250,0.18), rgba(167,139,250,0.05)); border: 1px solid rgba(167,139,250,0.2); color: #C4B5FD; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.crypto-card-icon svg { width: 22px; height: 22px; }
.crypto-grid-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; align-items: stretch; justify-content: stretch; }
.crypto-grid-steps .crypto-step { max-width: none; width: auto; }
.plat-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; align-items: stretch; justify-content: stretch; max-width: 940px; }
.plat-status-grid .plat-status { max-width: none; width: auto; }
.lp-dd { position: relative; }
.lp-dd-toggle { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border-radius: 12px; background: rgba(8,4,26,0.55); border: 1px solid rgba(167,139,250,0.2); color: #fff; font-size: 14px; font-family: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.lp-dd-toggle:hover { border-color: rgba(167,139,250,0.38); }
.lp-dd.open .lp-dd-toggle { border-color: rgba(167,139,250,0.55); box-shadow: 0 0 0 3px rgba(167,139,250,0.15); }
.lp-dd-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-dd-value.placeholder { color: rgba(255,255,255,0.4); }
.lp-dd-caret { flex: none; color: rgba(196,181,253,0.85); transition: transform 0.2s ease; }
.lp-dd.open .lp-dd-caret { transform: rotate(180deg); }
.lp-dd-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; display: none; flex-direction: column; max-height: 340px; border-radius: 14px; background: linear-gradient(180deg, #1B1138, #150C30); border: 1px solid rgba(167,139,250,0.28); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05); overflow: hidden; }
.lp-dd.open .lp-dd-panel { display: flex; animation: lpDdIn 0.16s ease; }
@keyframes lpDdIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.lp-dd-search-wrap { padding: 10px; border-bottom: 1px solid rgba(167,139,250,0.14); }
.lp-dd-search { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 9px; background: rgba(8,4,26,0.6); border: 1px solid rgba(167,139,250,0.2); color: #fff; font-size: 13px; font-family: inherit; outline: none; }
.lp-dd-search::placeholder { color: rgba(255,255,255,0.35); }
.lp-dd-search:focus { border-color: rgba(167,139,250,0.45); }
.lp-dd-list { overflow-y: auto; padding: 6px; }
.lp-dd-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 9px; font-size: 13.5px; line-height: 1.35; color: rgba(255,255,255,0.82); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.lp-dd-item:hover, .lp-dd-item.active { background: rgba(167,139,250,0.15); color: #fff; }
.lp-dd-item.selected { background: rgba(167,139,250,0.1); color: #fff; }
.lp-dd-item-label { flex: 1; }
.lp-dd-check { flex: none; color: #C4B5FD; font-weight: 700; margin-top: 1px; }
.lp-dd-empty { padding: 16px 12px; text-align: center; font-size: 13px; color: rgba(255,255,255,0.4); }
.lp-dd-list::-webkit-scrollbar { width: 8px; }
.lp-dd-list::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.3); border-radius: 8px; }
.lp-dd-list::-webkit-scrollbar-track { background: transparent; }
.lp-dd-toggle-icon { flex: none; width: 22px; height: 22px; border-radius: 5px; object-fit: cover; }
.lp-dd-icon-slot { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.lp-dd-icon { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; }
.lp-reviews { max-width: 1280px; margin: 0 auto; padding: 24px 0 8px; overflow: hidden; }
.lp-reviews-head { text-align: center; max-width: 640px; margin: 0 auto 30px; padding: 0 20px; }
.lp-marquee { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.lp-marquee-track { display: flex; width: max-content; animation: lpMarquee 45s linear infinite; }
.lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }
@keyframes lpMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lp-review-card { flex: none; margin-right: 18px; width: clamp(150px, 42vw, 196px); aspect-ratio: 9 / 16; border: none; padding: 0; border-radius: 16px; overflow: hidden; position: relative; cursor: pointer; background: #150B3D; box-shadow: 0 16px 40px -18px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(167,139,250,0.12); transition: transform 0.2s ease; }
.lp-review-card:hover { transform: translateY(-5px); }
.lp-review-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-review-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(250,202,51,0.95); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,0.45); transition: transform 0.2s ease; }
.lp-review-card:hover .lp-review-play { transform: translate(-50%, -50%) scale(1.08); }
.lp-review-play svg { width: 22px; height: 22px; color: #150B3D; margin-left: 2px; }
.lp-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.lp-lightbox.open { display: flex; }
.lp-lightbox-backdrop { position: absolute; inset: 0; background: rgba(4,2,12,0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lp-lightbox-inner { position: relative; z-index: 1; width: min(90vw, 360px); aspect-ratio: 9 / 16; max-height: 84vh; }
.lp-lightbox-frame { width: 100%; height: 100%; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.6); background: #000; }
.lp-lightbox-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.lp-lightbox-close { position: absolute; top: -46px; right: 0; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,0.14); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; transition: background 0.15s ease; }
.lp-lightbox-close:hover { background: rgba(255,255,255,0.26); }
.lp-marquee { touch-action: pan-y; cursor: grab; }
.lp-marquee.dragging { cursor: grabbing; }
.lp-marquee-track { animation: none; -webkit-user-select: none; user-select: none; will-change: transform; }
.lp-review-thumb, .lp-review-play { pointer-events: none; }
.lp-review-thumb { -webkit-user-drag: none; }
.lp-dd-toggle:focus-visible, .lp-input:focus-visible, .lp-preset:focus-visible, .lp-dd-search:focus-visible, .lp-order-btn:focus-visible, .lp-review-card:focus-visible, .lp-lightbox-close:focus-visible { outline: 2px solid #A78BFA; outline-offset: 2px; }
.lp-preset:disabled, .lp-preset-disabled { opacity: 0.32; cursor: not-allowed; }
html { scroll-behavior: smooth; }
.crypto-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin: 32px auto 0; }
.crypto-hero-cta .crypto-cta-btn { margin: 0; }
.crypto-cta-btn-outline { background: rgba(167,139,250,0.1) !important; color: #C4B5FD !important; border: 1px solid rgba(167,139,250,0.4) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important; }
.crypto-cta-btn-outline:hover, .crypto-cta-btn-outline:focus, .crypto-cta-btn-outline:focus-visible { background: rgba(167,139,250,0.18) !important; color: #fff !important; border-color: rgba(167,139,250,0.65) !important; text-decoration: none !important; }
.crypto-section-head {
text-align: center;
max-width: 640px;
margin: 0 auto 28px;
}
.crypto-section-head .crypto-eyebrow { margin-bottom: 12px; }
.crypto-section-head .crypto-section-title { margin-top: 0; }
.ctry-feature-list {
max-width: 760px; margin: 0 auto; display: flex; flex-direction: column;
border: 1px solid rgba(167,139,250,0.14); border-radius: 16px; overflow: hidden;
}
.ctry-feature-row {
display: flex; gap: 16px; align-items: flex-start;
padding: 18px 20px; border-bottom: 1px solid rgba(167,139,250,0.1);
background: rgba(255,255,255,0.015); transition: background .2s ease;
}
.ctry-feature-row:last-child { border-bottom: none; }
.ctry-feature-row:hover { background: rgba(167,139,250,0.05); }
.ctry-feature-icon {
flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px;
background: rgba(167,139,250,0.1); border: 1px solid rgba(167,139,250,0.22);
display: flex; align-items: center; justify-content: center; color: #C4B5FD;
}
.ctry-feature-icon svg { width: 20px; height: 20px; }
.ctry-feature-title { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 4px; }
.ctry-feature-desc { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.6); margin: 0; }
.ctry-plat-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 420px));
justify-content: center;
gap: 12px; max-width: 860px; margin: 0 auto;
}
.ctry-plat-grid > .ctry-plat-tile:last-child:nth-child(odd) {
grid-column: 1 / -1;
justify-self: center;
width: 100%;
max-width: 420px;
}
.ctry-plat-tile {
display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px;
border-radius: 14px; background: rgba(255,255,255,0.02);
border: 1px solid rgba(167,139,250,0.13); transition: border-color .2s, transform .2s;
}
.ctry-plat-tile:hover { border-color: rgba(167,139,250,0.3); transform: translateY(-2px); }
.ctry-plat-ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.ctry-plat-ico svg { width: 22px; height: 22px; }
.ctry-plat-body { min-width: 0; }
.ctry-plat-title { font-size: 15px; font-weight: 600; color: #fff; margin: 0 0 4px; }
.ctry-plat-desc { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.58); margin: 0; }
.ctry-plat-desc a.crypto-inline-link { color: #C4B5FD; }
.ctry-seg-list { max-width: 720px; margin: 0 auto; counter-reset: ctryseg; }
.ctry-seg { display: flex; gap: 18px; align-items: flex-start; padding: 18px 0; border-top: 1px solid rgba(167,139,250,0.1); counter-increment: ctryseg; }
.ctry-seg:first-child { border-top: none; }
.ctry-seg::before {
content: counter(ctryseg, decimal-leading-zero);
flex-shrink: 0; font-size: 28px; font-weight: 700; line-height: 1;
color: rgba(167,139,250,0.4); width: 46px; font-variant-numeric: tabular-nums;
}
.ctry-seg-title { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 4px; }
.ctry-seg-desc { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.6); margin: 0; }
a.crypto-cta-btn:focus-visible,
.crypto-cta-btn:focus-visible {
outline: 2px solid #A78BFA !important;
outline-offset: 2px;
}
.blog-intro { max-width: 640px; margin: 0 auto; }
.blog-intro p { margin: 0 0 10px; }
.blog-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 28px auto 40px; max-width: 760px; }
.blog-filter-btn { appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; color: #C4B5FD; background: rgba(167,139,250,0.1); border: 1px solid rgba(167,139,250,0.25); transition: background .2s, color .2s, border-color .2s; }
.blog-filter-btn:hover { background: rgba(167,139,250,0.18); color: #fff; }
.blog-filter-btn.active { background: #FACA33; color: #150B3D; border-color: #FACA33; }
.blog-posts { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.blog-featured { display: flex; flex-wrap: wrap; gap: 24px; align-items: start; margin: 0 0 72px; padding: 24px; border-radius: 18px; background: rgba(255,255,255,0.035); border: 1px solid rgba(167,139,250,0.16); }
.blog-feat-media { flex: 1 1 280px; }
.blog-feat-body { flex: 2 1 340px; min-width: 0; display: flex; flex-direction: column; }
.blog-feat-title { font-size: clamp(20px, 2.6vw, 28px); font-weight: 800; color: #fff; margin: 12px 0 10px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; margin-bottom: 72px; }
.blog-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,0.02); border: 1px solid rgba(167,139,250,0.14); transition: transform .2s, border-color .2s; }
.blog-card:hover { transform: translateY(-3px); border-color: rgba(167,139,250,0.32); }
.blog-card-body { padding: 20px; display: flex; flex-direction: column; min-width: 0; }
.blog-card-title { font-size: 17px; font-weight: 700; color: #fff; margin: 12px 0 8px; line-height: 1.35; }
.blog-thumb-slot { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background-size: cover; background-position: center; background-color: rgba(124,58,237,0.12); }
.blog-feat-media .blog-thumb-slot { aspect-ratio: 16 / 10; height: auto; min-height: 0; width: 100%; }
.blog-thumb-fallback { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(124,58,237,0.3), rgba(167,139,250,0.15)); }
.blog-thumb-ph { font-size: 38px; opacity: 0.7; }
.blog-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.blog-chip { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.blog-chip-cat { background: rgba(250,202,51,0.14); color: #FACA33; border: 1px solid rgba(250,202,51,0.3); text-transform: uppercase; letter-spacing: 0.04em; }
.blog-chip-author { background: rgba(167,139,250,0.12); color: #C4B5FD; text-decoration: none; }
.blog-chip-meta { font-size: 11.5px; color: rgba(255,255,255,0.7); }
.blog-excerpt { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.6); margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-feat-body .blog-excerpt { -webkit-line-clamp: 4; }
.blog-content-raw { display: none !important; }
.blog-readmore { align-self: flex-start; margin-top: auto; }
.blog-card-readmore { margin-top: auto; align-self: flex-start; font-size: 13px; font-weight: 600; color: #C4B5FD; text-decoration: none; }
.blog-card-readmore:hover { color: #fff; }
.blog-pag { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 0; margin: 32px 0 0; }
.blog-pag li a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border-radius: 10px; color: #C4B5FD; text-decoration: none; background: rgba(167,139,250,0.08); border: 1px solid rgba(167,139,250,0.2); transition: background .2s, color .2s; }
.blog-pag li a:hover { background: rgba(167,139,250,0.18); color: #fff; }
.blog-pag li.active a { background: #FACA33; color: #150B3D; border-color: #FACA33; }
.blog-cta { margin-top: 8px; }
.blog-hero-lead { max-width: 600px; margin-left: auto; margin-right: auto; }
.blog-intro-seo { max-width: 1100px; margin: 72px auto; padding: 0 20px; }
.blog-intro-card { position: relative; overflow: hidden; background: rgba(167,139,250,0.09); border: 1px solid rgba(167,139,250,0.22); border-radius: 20px; padding: 40px 44px; }
.blog-intro-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #A78BFA, #FACA33); }
.blog-intro-eyebrow { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: #C4B5FD; background: rgba(167,139,250,0.12); border: 0.5px solid rgba(167,139,250,0.22); padding: 4px 11px; border-radius: 999px; margin-bottom: 14px; }
.blog-intro-body h2 { font-size: 20px; font-weight: 600; color: #fff; margin: 0 0 12px; }
.blog-intro-body h3 { font-size: 16px; font-weight: 600; color: #fff; margin: 22px 0 10px; }
.blog-intro-body p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.6); margin: 0 0 16px; }
.blog-intro-body p:last-child { margin-bottom: 0; }
.blog-intro-body a { color: #C4B5FD; text-decoration: underline; text-underline-offset: 2px; }
.blog-intro-body a:hover { color: #A78BFA; }
.blog-intro-body ul, .blog-intro-body ol { padding-inline-start: 22px; margin: 0 0 12px; color: rgba(255,255,255,0.6); }
.blog-card, .blog-featured { transition: transform .25s cubic-bezier(.4,0,.2,1), border-color .25s, box-shadow .25s, opacity .25s; }
.blog-card:hover, .blog-featured:hover { transform: translateY(-4px); border-color: rgba(167,139,250,0.4); box-shadow: 0 12px 32px rgba(109,40,217,0.18); }
.blog-card-media, .blog-feat-media { overflow: hidden; position: relative; }
.blog-card-media .blog-thumb-slot, .blog-feat-media .blog-thumb-slot { transition: transform .35s cubic-bezier(.4,0,.2,1); }
.blog-card:hover .blog-thumb-slot, .blog-featured:hover .blog-thumb-slot { transform: scale(1.06); }
[data-post].is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
.cat-guides { background: rgba(56,99,180,0.15); color: #85B7EB; border-color: rgba(56,99,180,0.35); }
.cat-platform-tips { background: rgba(29,158,117,0.15); color: #5DCAA5; border-color: rgba(29,158,117,0.35); }
.cat-reseller { background: rgba(167,139,250,0.15); color: #C4B5FD; border-color: rgba(167,139,250,0.35); }
.cat-case-studies { background: rgba(99,153,34,0.15); color: #97C459; border-color: rgba(99,153,34,0.35); }
.cat-news { background: rgba(186,117,23,0.15); color: #EF9F27; border-color: rgba(186,117,23,0.35); }
.blog-feat-title { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.blog-card-title { font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.blog-chip-meta { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.blog-excerpt { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.55); }
.blog-empty { text-align: center; padding: 3rem 1rem; }
.blog-empty-ico { font-size: 32px; display: block; margin-bottom: 10px; opacity: 0.5; }
.blog-empty-text { font-size: 14px; color: rgba(255,255,255,0.5); }
.blog-avatar { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 600; background: linear-gradient(135deg, #A78BFA, #6D28D9); color: #fff; margin-right: 5px; vertical-align: middle; }
.blog-feat-badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #150B3D; background: #FACA33; padding: 4px 11px; border-radius: 999px; }
.blog-section-head { margin-bottom: 24px; }
.blog-section-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(196,181,253,0.7); }
.blogpost-page { max-width: 1120px; margin: 0 auto; padding: 40px 20px 80px; }
.blogpost-hero { max-width: 720px; margin: 0 auto 40px; }
.blogpost-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #C4B5FD; text-decoration: none; transition: color .2s; margin-bottom: 24px; }
.blogpost-back:hover { color: #fff; }
.blogpost-meta-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.blogpost-meta-bar:empty { display: none; }
.blogpost-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: #fff; margin: 0; }
.blogpost-content-raw { display: none !important; }
.blogpost-body { max-width: 720px; margin-left: auto; margin-right: auto; font-size: 17px; line-height: 1.75; color: rgba(255,255,255,0.85); }
.blogpost-body p.has-dropcap::first-letter { float: left; font-size: 3.2rem; line-height: 0.85; font-weight: 700; margin: 4px 10px 0 0; color: #C4B5FD; }
.blogpost-body h2 { font-size: 1.5rem; font-weight: 600; color: #fff; line-height: 1.3; margin: 40px 0 16px; letter-spacing: -0.01em; }
.blogpost-body h3 { font-size: 1.2rem; font-weight: 600; color: #fff; line-height: 1.35; margin: 32px 0 12px; }
.blogpost-body p { margin: 0 0 16px; }
.blogpost-body a { color: #C4B5FD; text-decoration: underline; text-underline-offset: 2px; transition: color .2s; }
.blogpost-body a:hover { color: #A78BFA; }
.blogpost-body img {
display: block !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
margin: 1.5rem auto !important;
border-radius: 12px;
border: 0.5px solid rgba(167,139,250,0.16);
}
.blogpost-body ul, .blogpost-body ol { padding-inline-start: 24px; margin: 0 0 16px; }
.blogpost-body li { margin-bottom: 8px; }
.blogpost-body blockquote { margin: 24px 0; padding: 16px 20px; border-inline-start: 3px solid #A78BFA; background: rgba(167,139,250,0.06); border-radius: 0 12px 12px 0; color: rgba(255,255,255,0.7); font-style: italic; }
.blogpost-body strong { color: #fff; }
.blogpost-author { max-width: 720px; display: flex; gap: 16px; align-items: flex-start; margin: 64px auto 0; padding: 24px; border-radius: 16px; background: rgba(167,139,250,0.05); border: 0.5px solid rgba(167,139,250,0.22); }
.blogpost-author-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; font-size: 18px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #A78BFA, #6D28D9); }
.blogpost-author-info { min-width: 0; }
.blogpost-author-label { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #C4B5FD; margin-bottom: 8px; }
.blogpost-author-text { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.6); margin: 0; }
.blogpost-nav { display: flex; flex-wrap: wrap; gap: 16px; margin: 48px 0; }
.blogpost-nav-prev, .blogpost-nav-next { flex: 1 1 240px; min-width: 0; max-width: 100%; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 14px; background: rgba(255,255,255,0.025); border: 0.5px solid rgba(167,139,250,0.16); text-decoration: none; transition: transform .2s cubic-bezier(.4,0,.2,1), border-color .2s, background .2s; }
.blogpost-nav-prev:hover, .blogpost-nav-next:hover { transform: translateY(-3px); border-color: rgba(167,139,250,0.4); background: rgba(255,255,255,0.04); box-shadow: 0 10px 28px rgba(109,40,217,0.16); }
.blogpost-nav-next { flex-direction: row-reverse; text-align: right; }
.blogpost-nav-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(196,181,253,0.7); transition: transform .25s; }
.blogpost-nav-prev:hover .blogpost-nav-label { transform: translateX(-3px); }
.blogpost-nav-next:hover .blogpost-nav-label { transform: translateX(3px); }
.blogpost-nav-title { display: block; max-width: 100%; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blogpost-cta { margin-top: 64px; }
.blogpost-cta .accent { background: linear-gradient(90deg, #FACA33, #F59E0B); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; }
.blogpost-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(167,139,250,0.18); z-index: 3000; }
.blogpost-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #A78BFA, #FACA33); transition: width .1s linear; }
.blogpost-share { display: flex; align-items: center; gap: 10px; max-width: 720px; margin: 32px auto 0; }
.blogpost-share-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.7); }
.blogpost-share-btn { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgba(167,139,250,0.1); border: 0.5px solid rgba(167,139,250,0.22); color: #C4B5FD; cursor: pointer; text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.blogpost-share-btn:hover { background: rgba(167,139,250,0.2); border-color: rgba(167,139,250,0.4); color: #fff; }
.blogpost-share-btn.copied { background: #FACA33; color: #150B3D; border-color: #FACA33; }
.blogpost-nav-thumb { width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0; background-size: cover; background-position: center; background-color: rgba(167,139,250,0.1); display: flex; align-items: center; justify-content: center; }
.blogpost-nav-thumb-fallback { font-size: 22px; color: rgba(196,181,253,0.4); }
.blogpost-nav-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.blogpost-body table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: 15px; background: rgba(255,255,255,0.02); border-radius: 12px; overflow: hidden; display: block; overflow-x: auto; }
.blogpost-body thead th { background: rgba(167,139,250,0.12); color: #C4B5FD; font-weight: 600; text-align: left; padding: 14px 16px; border-bottom: 1px solid rgba(167,139,250,0.2); }
.blogpost-body tbody td { padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.82); vertical-align: top; }
.blogpost-body tbody tr:last-child td { border-bottom: none; }
.blogpost-body tbody tr:hover { background: rgba(167,139,250,0.04); }
.blogpost-body tbody td:first-child { font-weight: 600; color: rgba(255,255,255,0.95); }
.blog-filter-results { margin-top: 8px; }
.blog-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.blog-fcard { display: flex; flex-direction: column; background: rgba(255,255,255,0.02); border: 1px solid rgba(167,139,250,0.12); border-radius: 16px; overflow: hidden; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.blog-fcard:hover { transform: translateY(-4px); border-color: rgba(167,139,250,0.35); box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
.blog-fcard-img { aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: rgba(167,139,250,0.1); }
.blog-fcard-img-fallback { display: flex; align-items: center; justify-content: center; font-size: 32px; color: rgba(196,181,253,0.4); }
.blog-fcard-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.blog-fcard-title { font-size: 16px; font-weight: 600; color: #fff; margin: 0; line-height: 1.35; }
.blog-fcard-excerpt { font-size: 13px; color: rgba(255,255,255,0.6); margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-fcard-meta { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 4px; }
.blog-fcard-date, .blog-fcard-read { display: inline-flex; align-items: center; }
.blog-chip-tag { display: inline-flex; align-items: center; width: fit-content; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; }
@media (max-width: 600px) {
.blogpost-nav-thumb { width: 44px; height: 44px; }
.blogpost-nav-title { font-size: 14px; }
.blogpost-nav-label { font-size: 11px; }
}
.home-hero {
position: relative; z-index: 0; overflow: visible; padding: 80px 0;
background:
radial-gradient(ellipse 65% 50% at 8% 16%, rgba(146,90,250,0.32) 0%, transparent 60%),
radial-gradient(ellipse 80% 62% at 14% 26%, rgba(167,139,250,0.10) 0%, transparent 66%);
}
.home-hero::before {
content: ""; position: absolute; inset: -40px -20px 0; z-index: -1; pointer-events: none;
background:
radial-gradient(60% 50% at 50% 0%, rgba(167,139,250,0.18), transparent 70%),
radial-gradient(42% 40% at 16% 82%, rgba(250,202,51,0.10), transparent 70%),
radial-gradient(42% 40% at 84% 28%, rgba(124,58,237,0.16), transparent 70%);
filter: blur(22px);
}
.home-hero::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image:
linear-gradient(rgba(167,139,250,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(167,139,250,0.05) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask: radial-gradient(62% 60% at 50% 28%, #000, transparent 78%);
mask: radial-gradient(62% 60% at 50% 28%, #000, transparent 78%);
}
.home-hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.25fr 0.9fr; gap: 48px; align-items: center; }
.home-eyebrow { display: inline-block; padding: 6px 16px; border-radius: 999px; background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.22); color: #C4B5FD; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 20px; }
.home-hero-title { font-size: clamp(32px, 5vw, 52px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 18px; background: linear-gradient(110deg, var(--purple-light) 0%, var(--purple-primary) 40%, var(--text-primary) 60%, var(--purple-light) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; animation: shimmer-flow 8s ease-in-out infinite alternate; filter: drop-shadow(0 4px 24px rgba(167,139,250,0.28)); }
.home-hero-sub { font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: rgba(255,255,255,0.7); margin: 0 0 28px; max-width: 560px; }
.home-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.home-cta-primary { display: inline-block; padding: 14px 28px; border-radius: 12px; background: #FACA33; color: #150B3D; font-weight: 600; font-size: 16px; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; }
.home-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(250,202,51,0.35); filter: brightness(1.05); color: #150B3D; }
.home-cta-secondary { display: inline-block; padding: 14px 28px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(167,139,250,0.3); color: #fff; font-weight: 600; font-size: 16px; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; }
.home-cta-secondary:hover { transform: translateY(-2px); background: rgba(167,139,250,0.15); border-color: rgba(167,139,250,0.5); color: #fff; }
.home-hero-login { background: rgba(255,255,255,0.04); border: 1px solid rgba(167,139,250,0.25); border-radius: 18px; padding: 28px; box-shadow: 0 20px 50px rgba(8,4,26,0.4); }
.home-login-title { font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 20px; }
.home-login-input { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(167,139,250,0.2); border-radius: 10px; padding: 12px 16px; color: #fff; font-size: 15px; margin-bottom: 12px; transition: border-color 0.2s ease, background 0.2s ease; box-sizing: border-box; }
.home-login-input::placeholder { color: rgba(255,255,255,0.4); }
.home-login-input:focus { outline: none; border-color: rgba(167,139,250,0.55); background: rgba(255,255,255,0.08); }
.home-login-forgot { display: block; text-align: right; font-size: 13px; color: #C4B5FD; text-decoration: none; margin: -4px 0 14px; }
.home-login-forgot:hover { color: #A78BFA; }
.home-login-captcha { margin-bottom: 14px; }
.home-login-btn { width: 100%; background: #FACA33; color: #150B3D; border: none; padding: 13px; border-radius: 10px; font-weight: 600; font-size: 16px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; }
.home-login-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(250,202,51,0.35); filter: brightness(1.05); }
.home-login-google { margin-top: 14px; display: flex; justify-content: center; }
.home-login-signup-text { display: block; margin-top: 16px; font-size: 13px; color: rgba(255,255,255,0.6); text-align: center; }
.home-login-signup-text a { color: #C4B5FD; text-decoration: underline; text-underline-offset: 2px; }
.home-login-signup-text a:hover { color: #A78BFA; }
.home-login-alert { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 13px; }
.home-login-alert-error { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5; }
.home-login-alert-success { background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); color: #6ee7b7; }
@media (max-width: 900px) {
.home-hero { padding: 56px 0; }
.home-hero-inner { grid-template-columns: 1fr; gap: 36px; }
.home-hero-login { order: 2; }
}
.home-press { padding: 40px 0; overflow: hidden; }
.home-press-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.home-press-eyebrow { display: table; margin: 0 auto 28px; padding: 6px 16px; border-radius: 999px; background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.22); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #C4B5FD; }
.home-press-marquee { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.home-press-track { display: flex; width: max-content; align-items: center; gap: 26px; animation: lpMarquee 38s linear infinite; }
.home-press-marquee:hover .home-press-track { animation-play-state: paused; }
.home-press-logo { flex: none; display: flex; align-items: center; justify-content: center; height: 58px; padding: 0 22px; border-radius: 12px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.3); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.home-press-logo:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.45); }
.home-press-logo img { height: 30px; width: auto; max-width: 160px; object-fit: contain; display: block; }
@media (max-width: 600px) {
.home-press-track { gap: 16px; }
.home-press-logo { height: 50px; padding: 0 16px; }
.home-press-logo img { height: 24px; }
}
.home-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1); }
.home-reveal.is-visible { opacity: 1; transform: none; }
.home-hero-orbits { position: absolute; inset: 0; z-index: 0; overflow: visible; pointer-events: none; }
.home-orbit { position: absolute; top: 50%; left: 60%; width: 0; height: 0; }
.home-orbit-1 { animation: home-spin 60s linear infinite; }
.home-orbit-2 { animation: home-spin 80s linear infinite reverse; }
.home-orbit-icon { position: absolute; top: 0; left: 0; width: 46px; height: 46px; margin: -23px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(167,139,250,0.12); color: rgba(196,181,253,0.45); transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))); box-shadow: 0 8px 24px rgba(8,4,26,0.25); }
.home-orbit-icon svg { width: 22px; height: 22px; }
.home-orbit-1 .home-orbit-icon { --r: 330px; }
.home-orbit-2 .home-orbit-icon { --r: 205px; }
@keyframes home-spin { to { transform: rotate(360deg); } }
.home-section { padding: 80px 0; position: relative; }
.home-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.home-section-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.home-section-eyebrow { display: inline-block; padding: 6px 16px; border-radius: 999px; background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.22); color: #C4B5FD; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
.home-section-title { font-size: clamp(26px, 3.5vw, 40px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: #fff; margin: 0; }
.home-section-lead { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.65); margin: 16px auto 0; max-width: 680px; }
.home-story-inner .home-section-title { margin-bottom: 24px; }
.home-stat { flex: 1 1 180px; max-width: 260px; text-align: center; }
.home-stat-num { font-family: 'Geist Mono', monospace; font-size: clamp(28px, 4vw, 40px); font-weight: 800; line-height: 1; background: linear-gradient(135deg, #C4B5FD, #A78BFA); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; }
.home-faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.home-faq-item { border-radius: 14px; background: rgba(255,255,255,0.025); border: 1px solid rgba(167,139,250,0.14); overflow: hidden; transition: border-color 0.25s ease; }
.home-faq-item[open] { border-color: rgba(167,139,250,0.3); }
.home-faq-item summary { list-style: none; cursor: pointer; padding: 20px 24px; font-size: 16px; font-weight: 600; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.home-faq-item summary::-webkit-details-marker { display: none; }
.home-faq-item summary::after { content: "+"; font-size: 22px; font-weight: 400; color: #C4B5FD; transition: transform 0.25s ease; flex-shrink: 0; }
.home-faq-item[open] summary::after { transform: rotate(45deg); }
.home-final-cta { padding: 96px 0; }
.home-final-inner { position: relative; overflow: hidden; max-width: 820px; margin: 0 auto; text-align: center; padding: 54px 40px; border-radius: 24px; background: linear-gradient(160deg, rgba(127,119,221,0.18), rgba(20,12,42,0.5)); border: 1px solid rgba(167,139,250,0.25); border-top-color: rgba(196,181,253,0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 24px 60px rgba(8,4,26,0.45); }
.home-final-title { font-size: clamp(24px, 3.2vw, 32px); font-weight: 800; line-height: 1.25; margin: 0 auto 16px; max-width: 640px; letter-spacing: -0.02em; background: linear-gradient(120deg, #fff, #C4B5FD 60%, #fff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; animation: shimmer-flow 10s ease-in-out infinite alternate; }
.home-final-accent { background: linear-gradient(120deg, #fff, #C4B5FD 60%, #fff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; animation: shimmer-flow 10s ease-in-out infinite alternate; }
.home-final-inner p { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.7); margin: 0 0 28px; }
.home-cta-lg { padding: 15px 38px; font-size: 17px; border-radius: 12px; background: linear-gradient(135deg, #FACA33, #E0A800); box-shadow: 0 10px 30px rgba(250,202,51,0.25); }
@media (max-width: 900px) {
.home-hero-orbits { display: none; }
.home-section { padding: 56px 0; }
.home-final-cta { padding: 64px 0; }
.home-final-inner { padding: 40px 24px; }
}
@media (prefers-reduced-motion: reduce) {
.home-orbit { animation: none; }
.home-reveal { opacity: 1; transform: none; transition: none; }
}
.home-card-premium,
.home-feature-card, .home-step-card, .home-testi-card, .home-region-card, .home-hero-login {
background: linear-gradient(160deg, rgba(167,139,250,0.13), rgba(255,255,255,0.02) 60%);
border: 1px solid rgba(167,139,250,0.18);
border-top-color: rgba(196,181,253,0.4);
box-shadow: 0 8px 32px rgba(0,0,0,0.35);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.home-card-premium:hover,
.home-feature-card:hover, .home-step-card:hover, .home-testi-card:hover, .home-region-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 32px rgba(167,139,250,0.15);
border-color: rgba(167,139,250,0.4);
border-top-color: rgba(196,181,253,0.6);
}
.home-features, .home-stats, .home-testimonials, .home-regional, .home-final-cta { overflow: hidden; }
.home-features::before { content: ""; position: absolute; top: -120px; left: -100px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(167,139,250,0.22), transparent 70%); pointer-events: none; z-index: -1; }
.home-features::after { content: ""; position: absolute; bottom: -140px; right: -120px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(127,119,221,0.18), transparent 70%); pointer-events: none; z-index: -1; }
.home-testimonials::after { content: ""; position: absolute; top: 40px; right: -130px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(167,139,250,0.16), transparent 70%); pointer-events: none; z-index: -1; }
.home-stats::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 50%, rgba(167,139,250,0.14), transparent 70%), radial-gradient(40% 60% at 85% 30%, rgba(250,202,51,0.10), transparent 70%); pointer-events: none; z-index: -1; }
.home-final-cta::before { content: ""; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 640px; height: 420px; background: radial-gradient(circle, rgba(124,58,237,0.28), transparent 70%); pointer-events: none; z-index: -1; }
.home-final-cta::after { content: ""; position: absolute; bottom: -120px; right: 8%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(250,202,51,0.14), transparent 70%); pointer-events: none; z-index: -1; }
.home-hero::before {
background:
radial-gradient(60% 50% at 50% 0%, rgba(167,139,250,0.28), transparent 70%),
radial-gradient(44% 42% at 14% 84%, rgba(250,202,51,0.13), transparent 70%),
radial-gradient(46% 44% at 86% 26%, rgba(124,58,237,0.24), transparent 70%);
}
.home-orbit-icon { background: rgba(255,255,255,0.05); border-color: rgba(167,139,250,0.2); color: rgba(196,181,253,0.6); }
.home-faq-item[open] { background: linear-gradient(160deg, rgba(167,139,250,0.1), rgba(255,255,255,0.02) 70%); }
@keyframes home-pulse { 0%, 100% { box-shadow: 0 8px 24px rgba(250,202,51,0.28); } 50% { box-shadow: 0 10px 40px rgba(250,202,51,0.55); } }
.home-cta-lg { animation: home-pulse 2.8s ease-in-out infinite; }
.home-cta-lg:hover { animation: none; }
@media (prefers-reduced-motion: reduce) {
.home-cta-lg { animation: none; }
}
.home-features-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.home-features-glow-1 { top: -80px; left: -60px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(167,139,250,0.2), transparent 70%); }
.home-features-glow-2 { bottom: -100px; right: -80px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(250,202,51,0.1), transparent 70%); }
.home-bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: auto; gap: 16px; position: relative; z-index: 2; align-items: stretch; }
.home-bento-card { position: relative; display: flex; flex-direction: column; border-radius: 16px; padding: 22px 24px; overflow: hidden; background: linear-gradient(160deg, rgba(167,139,250,0.1), rgba(255,255,255,0.02) 65%); border: 1px solid rgba(167,139,250,0.18); border-top-color: rgba(196,181,253,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 28px rgba(0,0,0,0.32); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; }
.home-bento-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 36px rgba(167,139,250,0.18); border-color: rgba(167,139,250,0.42); border-top-color: rgba(196,181,253,0.6); }
.home-bento-feat { background: linear-gradient(160deg, rgba(167,139,250,0.14), rgba(255,255,255,0.02) 60%); border-color: rgba(167,139,250,0.28); border-top-color: rgba(167,139,250,0.5); }
.home-bento-feat:hover { border-color: rgba(167,139,250,0.5); box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 36px rgba(124,58,237,0.14); }
.bento-3 { grid-column: span 3; }
.bento-2 { grid-column: span 2; }
.bento-6 { grid-column: span 6; }
.home-bento-ic { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; flex-shrink: 0; background: linear-gradient(135deg, #A78BFA, #7F77DD); color: #fff; box-shadow: 0 6px 18px rgba(167,139,250,0.4); }
.home-bento-ic svg { width: 24px; height: 24px; }
.home-bento-ic-yellow { background: linear-gradient(135deg, #A78BFA, #7C3AED); color: #fff; box-shadow: 0 6px 18px rgba(124,58,237,0.4); }
.home-bento-card h3 { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.home-bento-card p { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.62); margin: 0; }
.home-bento-feat h3 { font-size: 20px; }
.home-bento-feat p { font-size: 14px; color: rgba(255,255,255,0.72); }
.home-bento-card.is-horizontal { flex-direction: row; align-items: flex-start; gap: 16px; }
.bento-6.is-horizontal { align-items: center; }
.is-horizontal .home-bento-ic { margin-bottom: 0; }
.home-bento-wide-body { min-width: 0; }
.home-grad { background: linear-gradient(135deg, #C4B5FD, #fff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; }
@media (max-width: 900px) {
.home-bento { grid-template-columns: repeat(2, 1fr); }
.bento-3 { grid-column: span 2; }
.bento-2 { grid-column: span 1; }
.bento-6 { grid-column: span 2; }
}
@media (max-width: 560px) {
.home-bento { grid-template-columns: 1fr; }
.bento-3, .bento-2, .bento-6 { grid-column: span 1; }
.home-bento-card.is-horizontal { flex-direction: column; align-items: flex-start; gap: 12px; }
}
.home-orbit-icon { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); box-shadow: 0 8px 22px rgba(8,4,26,0.35); }
.ob-instagram { color: #E1306C; }
.ob-youtube { color: #FF0000; }
.ob-tiktok { color: #25F4EE; }
.ob-facebook { color: #1877F2; }
.ob-x { color: #FFFFFF; }
.ob-telegram { color: #26A5E4; }
.ob-spotify { color: #1DB954; }
.ob-linkedin { color: #0A66C2; }
.ob-discord { color: #5865F2; }
.ob-pinterest { color: #E60023; }
.ob-twitch { color: #9146FF; }
.ob-reddit { color: #FF4500; }
.ob-snapchat { color: #FFD400; }
.home-hero-inner { position: relative; z-index: 1; }
.home-hero-login { position: relative; z-index: 10; background: rgba(13,7,38,0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.home-login-input::placeholder { color: rgba(255,255,255,0.5); }
.home-orbit { left: 28%; }
.home-orbit-1 .home-orbit-icon { --r: 300px; }
.home-orbit-2 .home-orbit-icon { --r: 185px; }
.home-press-track { gap: 22px; }
.home-press-logo { height: 72px; padding: 0 26px; }
.home-press-logo img { height: 38px; max-width: 170px; }
.home-page { position: relative; background: transparent; overflow: hidden; }
.home-page-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(50px); }
.home-page-glow-1 { top: 12%; left: -8%; width: 640px; height: 640px; background: radial-gradient(circle, rgba(124,58,237,0.10), transparent 70%); }
.home-page-glow-2 { top: 45%; right: -10%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(167,139,250,0.09), transparent 70%); }
.home-page-glow-3 { top: 76%; left: 8%; width: 620px; height: 620px; background: radial-gradient(circle, rgba(250,202,51,0.05), transparent 70%); }
.home-page > section { position: relative; z-index: 1; }
.home-section-title { background: linear-gradient(110deg, #ffffff 0%, var(--purple-light) 50%, #ffffff 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; animation: shimmer-flow 12s ease-in-out infinite alternate; }
.home-section { padding: 64px 0; }
.home-hero { padding: 56px 0 64px; }
.home-press { padding: 40px 0 48px; }
.home-final-cta { padding: 72px 0; }
@media (max-width: 900px) {
.home-hero { padding: 40px 0 48px; }
.home-section { padding: 48px 0; }
.home-final-cta { padding: 56px 20px; }
.home-press-logo { height: 60px; padding: 0 18px; }
.home-press-logo img { height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
.home-section-title { animation: none; }
}
.home-orbit { left: 72%; top: 50%; }
.home-orbit-1 .home-orbit-icon { --r: 310px; }
.home-orbit-2 .home-orbit-icon { --r: 200px; }
.home-press-logo { box-sizing: border-box; height: 70px; padding: 0 20px; }
.home-press-logo img { height: 46px; width: auto; max-width: 150px; object-fit: contain; }
@media (max-width: 600px) {
.home-press-logo { height: 56px; padding: 0 14px; }
.home-press-logo img { height: 34px; }
}
.home-hero::before,
.home-features::before, .home-features::after,
.home-testimonials::after, .home-regional::before,
.home-stats::before, .home-final-cta::before, .home-final-cta::after,
.home-features-glow, .home-page-glow { display: none !important; }
.home-press-logo { height: 88px; padding: 0 18px; }
.home-press-logo img { height: 58px; max-width: 150px; -webkit-user-drag: none; user-select: none; }
.home-press-marquee { touch-action: pan-y; cursor: grab; }
.home-press-marquee.dragging { cursor: grabbing; }
.home-press-track { -webkit-user-select: none; user-select: none; will-change: transform; }
@media (max-width: 600px) {
.home-press-logo { height: 66px; padding: 0 14px; }
.home-press-logo img { height: 42px; }
}
.home-story-inner .home-section-eyebrow { margin-bottom: 16px; }
@media (max-width: 900px) {
}
.home-story-lead .home-section-title { font-size: clamp(26px, 3vw, 34px); line-height: 1.2; text-align: left; margin: 14px 0 0; }
@media (max-width: 900px) {
.home-story-lead .home-section-title { margin-top: 12px; }
}
.accent-yellow { color: #FACA33; -webkit-text-fill-color: #FACA33; background: none; }
.home-bigbrands { padding: 40px 0; }
.home-bigbrands-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: 44px; align-items: center; }
.home-bigbrands-text .home-section-eyebrow { margin-bottom: 14px; }
.home-bigbrands-text .home-section-title { text-align: left; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.2; margin: 0 0 16px; }
.home-bigbrands-text p { text-align: left; color: rgba(255,255,255,0.65); line-height: 1.7; font-size: 15.5px; margin: 0 0 16px; }
.home-bigbrands-text .home-story-quote { margin: 18px 0; }
.home-bigbrands-media { position: relative; display: flex; align-items: center; justify-content: center; }
.home-bigbrands-media::before { content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(167,139,250,0.22), transparent 65%); pointer-events: none; z-index: 0; }
@media (max-width: 900px) {
.home-bigbrands { padding: 40px 0; }
.home-bigbrands-grid { grid-template-columns: 1fr; gap: 30px; }
.home-bigbrands-media { order: 2; }
}
.home-platforms-inner { max-width: 1100px; }
.home-platforms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.home-platform-card { display: flex; flex-direction: column; height: 100%; border-radius: 16px; padding: 20px; background: linear-gradient(160deg, rgba(167,139,250,0.1), rgba(255,255,255,0.02) 65%); border: 1px solid rgba(167,139,250,0.16); border-top-color: rgba(196,181,253,0.35); text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.home-platform-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.4), 0 0 32px rgba(167,139,250,0.22); border-color: rgba(167,139,250,0.42); border-top-color: rgba(196,181,253,0.6); }
.home-platform-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid transparent; font-size: 17px; font-weight: 700; line-height: 1; margin-bottom: 14px; flex-shrink: 0; }
.home-platform-ic svg { width: 22px; height: 22px; }
.home-platform-card h3 { font-size: 15px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.home-platform-card p { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,0.55); margin: 0 0 14px; flex: 1; }
.home-platform-cta { margin-top: auto; font-size: 12.5px; font-weight: 600; color: #A78BFA; }
.home-platform-card.is-hidden { display: none; }
.home-platforms.is-expanded .home-platform-card.is-hidden { display: flex; }
.home-platforms-toggle { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 30px auto 0; padding: 12px 24px; border-radius: 999px; background: rgba(167,139,250,0.08); border: 1px solid rgba(167,139,250,0.3); color: #C4B5FD; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.home-platforms-toggle:hover { background: rgba(167,139,250,0.16); border-color: rgba(167,139,250,0.5); }
.home-platforms-chevron { width: 18px; height: 18px; transition: transform .25s ease; }
.home-platforms.is-expanded .home-platforms-chevron { transform: rotate(180deg); }
@media (max-width: 900px) { .home-platforms-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .home-platforms-grid { grid-template-columns: 1fr; } }
.plat-youtube { color: #FF0000; background: rgba(255,0,0,0.12); border-color: rgba(255,0,0,0.3); }
.plat-tiktok { color: #ffffff; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); }
.plat-instagram { color: #E1306C; background: rgba(225,48,108,0.12); border-color: rgba(225,48,108,0.3); }
.plat-facebook { color: #1877F2; background: rgba(24,119,242,0.12); border-color: rgba(24,119,242,0.3); }
.plat-twitter { color: #ffffff; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); }
.plat-spotify { color: #1DB954; background: rgba(29,185,84,0.12); border-color: rgba(29,185,84,0.3); }
.plat-telegram { color: #229ED9; background: rgba(34,158,217,0.12); border-color: rgba(34,158,217,0.3); }
.plat-linkedin { color: #0A66C2; background: rgba(10,102,194,0.12); border-color: rgba(10,102,194,0.3); }
.plat-discord { color: #5865F2; background: rgba(88,101,242,0.12); border-color: rgba(88,101,242,0.3); }
.plat-snapchat { color: #FFD400; background: rgba(255,212,0,0.12); border-color: rgba(255,212,0,0.3); }
.plat-pinterest { color: #E60023; background: rgba(230,0,35,0.12); border-color: rgba(230,0,35,0.3); }
.plat-websitetraffic { color: #A78BFA; background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.3); }
.plat-twitch { color: #9146FF; background: rgba(145,70,255,0.12); border-color: rgba(145,70,255,0.3); }
.plat-clubhouse { color: #F1EFE3; background: rgba(241,239,227,0.12); border-color: rgba(241,239,227,0.3); }
.plat-kick { color: #53FC18; background: rgba(83,252,24,0.12); border-color: rgba(83,252,24,0.3); }
.plat-trovo { color: #19D66B; background: rgba(25,214,107,0.12); border-color: rgba(25,214,107,0.3); }
.plat-coinmarketcap { color: #3861FB; background: rgba(56,97,251,0.12); border-color: rgba(56,97,251,0.3); }
.plat-applemusic { color: #FA243C; background: rgba(250,36,60,0.12); border-color: rgba(250,36,60,0.3); }
.plat-shopee { color: #EE4D2D; background: rgba(238,77,45,0.12); border-color: rgba(238,77,45,0.3); }
.plat-rumble { color: #85C742; background: rgba(133,199,66,0.12); border-color: rgba(133,199,66,0.3); }
.plat-reddit { color: #FF4500; background: rgba(255,69,0,0.12); border-color: rgba(255,69,0,0.3); }
.plat-bluesky { color: #0085FF; background: rgba(0,133,255,0.12); border-color: rgba(0,133,255,0.3); }
.plat-truthsocial { color: #5448EE; background: rgba(84,72,238,0.12); border-color: rgba(84,72,238,0.3); }
.home-platform-card, .home-platform-card h3, .home-platform-card p { text-decoration: none; }
.home-platform-card:hover .home-platform-cta { text-decoration: none; }
.home-whyrocks-text .home-section-eyebrow { margin-bottom: 14px; }
.home-whyrocks-text .home-section-title { text-align: left; font-size: clamp(26px, 3vw, 36px); margin: 0 0 16px; }
.home-howto-steps { position: relative; max-width: 760px; margin: 0 auto; padding-left: 20px; }
.home-howto-row:not(:last-child)::before { content: ""; position: absolute; left: 26px; top: 25px; height: calc(100% + 30px); width: 2px; background: linear-gradient(180deg, rgba(167,139,250,0.5), rgba(167,139,250,0.45)); z-index: 0; }
.home-howto-row { position: relative; display: grid; grid-template-columns: 90px 1fr; gap: 24px; align-items: start; margin-bottom: 30px; }
.home-howto-row:last-child { margin-bottom: 0; }
.home-howto-bignum { font-size: 50px; font-weight: 800; line-height: 1; background: linear-gradient(135deg, #C4B5FD, #7F77DD); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; position: relative; z-index: 2; }
.home-howto-row:last-child .home-howto-bignum { background: linear-gradient(135deg, #FACA33, #E0A800); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.home-howto-body { padding-top: 8px; }
.home-howto-body h3 { font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.home-howto-body p { font-size: 13.5px; color: rgba(255,255,255,0.6); line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .home-howto-row { grid-template-columns: 64px 1fr; gap: 18px; } .home-howto-row:not(:last-child)::before { left: 22px; top: 20px; } .home-howto-bignum { font-size: 40px; } }
@media (max-width: 900px) {
}
.home-faq-split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 36px; align-items: start; }
.home-faq-lead { text-align: left; }
.home-faq-lead .home-section-eyebrow { margin-bottom: 14px; }
.home-faq-lead .home-section-title { text-align: left; font-size: clamp(26px, 3vw, 36px); margin: 0 0 14px; }
.home-faq-lead p { color: rgba(255,255,255,0.6); line-height: 1.6; font-size: 14.5px; margin: 0 0 22px; }
@media (min-width: 901px) { .home-faq-lead { position: sticky; top: 100px; } }
.home-faq-list { display: flex; flex-direction: column; gap: 12px; max-width: none; }
.home-faq-item { border-radius: 12px; background: rgba(255,255,255,0.025); border: 1px solid rgba(167,139,250,0.14); transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; overflow: hidden; }
.home-faq-item.is-open { background: linear-gradient(160deg, rgba(167,139,250,0.12), rgba(255,255,255,0.02) 70%); border-color: rgba(167,139,250,0.35); box-shadow: 0 8px 28px rgba(109,40,217,0.14); }
.home-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 18px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; font-size: 14px; font-weight: 600; color: #fff; }
.home-faq-ico { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(167,139,250,0.12); color: #C4B5FD; transition: transform .3s ease, background .25s ease, color .25s ease; }
.home-faq-ico svg { width: 16px; height: 16px; }
.home-faq-item.is-open .home-faq-ico { transform: rotate(180deg); background: rgba(167,139,250,0.18); color: #C4B5FD; }
.home-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.home-faq-item.is-open .home-faq-a { max-height: 620px; }
.home-faq-a p { margin: 0; padding: 0 18px 18px; font-size: 13px; line-height: 1.65; color: rgba(255,255,255,0.6); }
.home-faq-a a { color: var(--purple-light); text-decoration: none; border-bottom: 1px solid rgba(167,139,250,0.35); transition: color .2s ease, border-color .2s ease; }
.home-faq-a a:hover { color: var(--purple-subtle); border-bottom-color: var(--purple-light); }
.home-eyebrow-yellow { color: #C4B5FD; background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.28); }
.home-passport { position: relative; overflow: hidden; }
.home-passport-map { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 165%; max-width: 1600px; z-index: 0; pointer-events: none; opacity: 0.36; }
.home-passport-svg { width: 100%; height: auto; display: block; }
.home-passport > .home-wrap { position: relative; z-index: 1; }
.home-passport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 940px; margin: 0 auto; align-items: stretch; }
.home-passport-card { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; padding: 20px; border-radius: 16px; background: linear-gradient(160deg, rgba(31,20,62,0.86), rgba(17,10,38,0.82)); border: 1px solid rgba(167,139,250,0.22); border-top-color: rgba(196,181,253,0.4); text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 26px rgba(8,4,26,0.4); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.home-passport-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(8,4,26,0.55), 0 0 34px rgba(167,139,250,0.22); border-color: rgba(167,139,250,0.45); }
.home-passport-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.home-passport-flag { font-size: 28px; line-height: 1; flex-shrink: 0; }
.home-passport-name { font-size: 16px; font-weight: 700; color: #fff; margin: 0; }
.home-passport-desc { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.72); margin: 0 0 14px; }
.home-passport-go { margin-top: auto; font-size: 12.5px; font-weight: 600; color: #A78BFA; }
@media (max-width: 900px) { .home-faq-split { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 700px) { .home-passport-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .home-passport-grid { grid-template-columns: 1fr; } }
.home-whyrocks { padding: 40px 0; }
.home-platform-card, .home-platform-card h3, .home-platform-card p { text-decoration: none !important; }
.home-platform-card:hover, .home-platform-card:hover h3, .home-platform-card:hover p { text-decoration: none !important; }
.home-platform-card:hover .home-platform-cta { text-decoration: none; }
.home-community { padding: 48px 0; }
.home-community-card { position: relative; overflow: hidden; border-radius: 24px; padding: 40px; background: linear-gradient(160deg, rgba(167,139,250,0.12), rgba(127,119,221,0.04)); border: 1px solid rgba(167,139,250,0.2); border-top-color: rgba(196,181,253,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 16px 44px rgba(8,4,26,0.4); }
.home-community-card::before { content: ""; position: absolute; top: -120px; right: -80px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(167,139,250,0.22), transparent 70%); pointer-events: none; }
.home-community-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.home-community-left { text-align: left; }
.home-community-left .home-section-eyebrow { margin-bottom: 14px; }
.home-community-left .home-section-title { text-align: left; font-size: clamp(24px, 3vw, 32px); margin: 0 0 14px; }
.home-community-lead { font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,0.65); margin: 0 0 22px; }
.home-community-benefits { display: flex; flex-direction: column; gap: 12px; }
.home-community-benefit { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: rgba(255,255,255,0.82); }
.home-community-chk { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(167,139,250,0.18); color: #A78BFA; margin-top: 1px; }
.home-community-chk svg { width: 15px; height: 15px; }
.home-community-btns { display: flex; flex-direction: column; gap: 12px; }
.home-community-btn { display: flex; align-items: center; gap: 13px; padding: 16px 20px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(167,139,250,0.25); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.home-community-btn:hover { transform: translateY(-3px); border-color: rgba(167,139,250,0.5); background: rgba(255,255,255,0.06); box-shadow: 0 14px 34px rgba(8,4,26,0.4), 0 0 30px rgba(167,139,250,0.2); }
.home-community-ico { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; }
.home-community-ico svg { width: 22px; height: 22px; }
.home-community-ico-wa { background: #25D366; box-shadow: 0 6px 16px rgba(37,211,102,0.4); }
.home-community-ico-tg { background: #229ED9; box-shadow: 0 6px 16px rgba(34,158,217,0.4); }
.home-community-btn-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.home-community-btn-title { font-size: 14px; font-weight: 600; color: #fff; }
.home-community-btn-sub { font-size: 11px; color: rgba(255,255,255,0.45); }
.home-community-btn-arrow { flex-shrink: 0; display: inline-flex; color: #A78BFA; transition: transform 0.2s ease; }
.home-community-btn-arrow svg { width: 18px; height: 18px; }
.home-community-btn:hover .home-community-btn-arrow { transform: translateX(3px); }
@media (max-width: 768px) {
.home-community-card { padding: 28px 22px; }
.home-community-grid { grid-template-columns: 1fr; gap: 26px; }
}
.home-stats { padding: 32px 0; }
.home-stats-eyebrow { display: table; margin: 0 auto 22px; padding: 6px 16px; border-radius: 999px; background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.22); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #C4B5FD; }
.home-stats-marquee { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.home-stats-marquee.dragging { cursor: grabbing; }
.home-stats-track { display: flex; gap: 14px; width: max-content; align-items: stretch; animation: statscroll 60s linear infinite; -webkit-user-select: none; user-select: none; will-change: transform; }
@keyframes statscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.home-stats-marquee:hover .home-stats-track { animation-play-state: paused; }
.home-stats-pill { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 5px; padding: 18px 28px; border-radius: 16px; white-space: nowrap; background: linear-gradient(160deg, rgba(167,139,250,0.12), rgba(255,255,255,0.02) 70%); border: 1px solid rgba(167,139,250,0.2); border-top-color: rgba(196,181,253,0.4); box-shadow: 0 8px 24px rgba(8,4,26,0.35); }
.home-stats-pill .num { display: block; margin: 0; padding: 0; font-size: 28px; font-weight: 800; line-height: 1; text-align: left; background: linear-gradient(135deg, #C4B5FD, #fff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; }
.home-stats-pill .label { display: block; margin: 0; padding: 0; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.55); text-align: left; }
.home-stats-pill.is-price { border-color: rgba(250,202,51,0.4); border-top-color: rgba(250,202,51,0.6); background: linear-gradient(160deg, rgba(250,202,51,0.12), rgba(255,255,255,0.02) 70%); }
.home-stats-pill img { -webkit-user-drag: none; }
@media (prefers-reduced-motion: reduce) {
.home-stats-track { animation: none; }
.home-stats-marquee { overflow-x: auto; }
}
.home-reviews-tabs { display: flex; flex-wrap: wrap; justify-content: center; width: max-content; max-width: 100%; gap: 6px; margin: 0 auto 38px; padding: 6px; border-radius: 999px; background: rgba(31,18,72,0.5); border: 1px solid rgba(167,139,250,0.18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 28px rgba(8,4,26,0.4); }
.home-reviews-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: none; border-radius: 999px; background: transparent; color: rgba(255,255,255,0.6); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; }
.home-reviews-tab svg { width: 16px; height: 16px; flex: none; }
.home-reviews-tab:hover { color: #fff; }
.home-reviews-tab.is-active { color: #fff; background: linear-gradient(135deg, #7C3AED, #A78BFA); box-shadow: 0 6px 18px rgba(124,58,237,0.4); }
.home-reviews-panel { display: none; }
.home-reviews-panel.is-active { display: block; animation: homeReviewsFade 0.5s ease; }
@keyframes homeReviewsFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.home-reviews-customer-mq { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.home-reviews-customer-mq.dragging { cursor: grabbing; }
.home-reviews-customer-track { display: flex; gap: 18px; width: max-content; align-items: stretch; -webkit-user-select: none; user-select: none; will-change: transform; }
.home-reviews-platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 980px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.home-platform-review-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 36px 28px; border-radius: 16px; background: linear-gradient(160deg, rgba(167,139,250,0.1), rgba(255,255,255,0.02) 70%); border: 1px solid rgba(167,139,250,0.18); border-top-color: rgba(196,181,253,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 12px 30px rgba(8,4,26,0.35); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.home-platform-review-card:hover { transform: translateY(-4px); border-color: rgba(167,139,250,0.4); box-shadow: 0 18px 44px rgba(124,58,237,0.28); }
.home-platform-review-name { color: #fff; font-size: 19px; font-weight: 700; }
.home-platform-review-stars { color: #FACA33; font-size: 18px; letter-spacing: 4px; line-height: 1; }
.home-platform-review-meta { color: rgba(255,255,255,0.55); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.home-platform-review-cta { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 11px 22px; border-radius: 12px; background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.35); color: #C4B5FD; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 18px rgba(124,58,237,0.16); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; }
.home-platform-review-cta:hover { transform: translateY(-2px); background: rgba(167,139,250,0.2); border-color: rgba(167,139,250,0.55); box-shadow: 0 12px 28px rgba(124,58,237,0.28); }
@media (max-width: 700px) {
.home-reviews-platform-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.home-reviews-panel.is-active { animation: none; }
}
@media (max-width: 600px) {
.home-hero-title { font-size: clamp(23px, 6.2vw, 30px); line-height: 1.2; }
.home-faq .home-wrap { padding-left: 18px; padding-right: 18px; }
.home-faq-q { padding: 15px 18px; gap: 12px; font-size: 13.5px; }
.home-faq-ico { width: 24px; height: 24px; }
.home-faq-a p { padding: 0 18px 16px; }
.home-reviews-tabs { width: 100%; flex-wrap: nowrap; gap: 4px; padding: 5px; border-radius: 16px; }
.home-reviews-tab { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 4px; padding: 9px 6px; font-size: 11.5px; line-height: 1.2; white-space: normal; text-align: center; border-radius: 12px; }
.home-reviews-tab svg { width: 16px; height: 16px; }
}
.home-faq-lead .home-cta-primary { background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.35); color: #C4B5FD; box-shadow: none; }
.home-faq-lead .home-cta-primary:hover { background: rgba(167,139,250,0.2); border-color: rgba(167,139,250,0.55); color: #fff; box-shadow: 0 10px 26px rgba(124,58,237,0.24); }
.home-stats-pill.is-price .num { background: linear-gradient(135deg, #FACA33, #fff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; }
.home-passport-card, .home-passport-card h3, .home-passport-card p { text-decoration: none !important; }
.home-passport-card:hover, .home-passport-card:hover h3, .home-passport-card:hover p { text-decoration: none !important; }
.home-passport-card:hover .home-passport-go { text-decoration: none; }
.home-articles { padding: 64px 0; }
.home-articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; margin-top: 36px; }
.home-article-card { display: flex; flex-direction: column; height: 100%; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, rgba(167,139,250,0.1), rgba(255,255,255,0.02) 65%); border: 1px solid rgba(167,139,250,0.18); border-top-color: rgba(196,181,253,0.35); text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 10px 30px rgba(8,4,26,0.35); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.home-article-card:hover { transform: translateY(-5px); border-color: rgba(167,139,250,0.42); box-shadow: 0 20px 48px rgba(8,4,26,0.5), 0 0 36px rgba(167,139,250,0.2); }
.home-article-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(8,4,26,0.4); }
.home-article-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.home-article-card:hover .home-article-thumb img { transform: scale(1.05); }
.home-article-meta { padding: 18px 20px 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #A78BFA; }
.home-article-title { padding: 8px 20px 0; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-article-excerpt { padding: 10px 20px 0; margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-article-readmore { margin-top: auto; padding: 16px 20px 20px; font-size: 13px; font-weight: 600; color: #A78BFA; }
.home-article-card, .home-article-card h3, .home-article-card p { text-decoration: none !important; }
.home-article-card:hover, .home-article-card:hover h3, .home-article-card:hover p { text-decoration: none !important; }
.home-article-card:hover .home-article-readmore { text-decoration: none; }
@media (max-width: 768px) { .home-articles-grid { grid-template-columns: 1fr; } }
.home-testimonials .lp-review-play { background: linear-gradient(135deg, #A78BFA, #7F77DD) !important; }
.home-testimonials .lp-review-play svg { color: #fff !important; }
.home-testimonials .lp-review-card:hover .lp-review-play { background: linear-gradient(135deg, #B9A4FC, #8E86E6) !important; }
.home-cta-primary:active, .home-cta-secondary:active, .home-reviews-tab:active, .home-community-btn:active, .home-platforms-toggle:active, .home-platform-review-cta:active { transform: scale(0.97); transition: transform 0.1s var(--ease-out); }
@keyframes home-stagger-in { from { opacity: 0; } to { opacity: 1; } }
.home-platforms-grid.home-reveal, .home-articles-grid.home-reveal, .home-bento.home-reveal { opacity: 1; transform: none; transition: none; }
.home-platforms-grid.home-reveal > .home-platform-card, .home-articles-grid.home-reveal > .home-article-card, .home-bento.home-reveal > .home-bento-card { opacity: 0; }
.home-platforms-grid.home-reveal.is-visible > .home-platform-card, .home-articles-grid.home-reveal.is-visible > .home-article-card, .home-bento.home-reveal.is-visible > .home-bento-card { animation-name: home-stagger-in; animation-duration: 0.5s; animation-timing-function: var(--ease-out); animation-fill-mode: forwards; }
.home-platforms-grid.is-visible > :nth-child(2), .home-articles-grid.is-visible > :nth-child(2), .home-bento.is-visible > :nth-child(2) { animation-delay: 60ms; }
.home-platforms-grid.is-visible > :nth-child(3), .home-articles-grid.is-visible > :nth-child(3), .home-bento.is-visible > :nth-child(3) { animation-delay: 120ms; }
.home-platforms-grid.is-visible > :nth-child(4), .home-articles-grid.is-visible > :nth-child(4), .home-bento.is-visible > :nth-child(4) { animation-delay: 180ms; }
.home-platforms-grid.is-visible > :nth-child(5), .home-articles-grid.is-visible > :nth-child(5), .home-bento.is-visible > :nth-child(5) { animation-delay: 240ms; }
.home-platforms-grid.is-visible > :nth-child(6), .home-articles-grid.is-visible > :nth-child(6), .home-bento.is-visible > :nth-child(6) { animation-delay: 300ms; }
.home-platforms-grid.is-visible > :nth-child(7), .home-articles-grid.is-visible > :nth-child(7), .home-bento.is-visible > :nth-child(7) { animation-delay: 360ms; }
.home-platforms-grid.is-visible > :nth-child(8), .home-articles-grid.is-visible > :nth-child(8), .home-bento.is-visible > :nth-child(8) { animation-delay: 420ms; }
.home-platforms-grid.is-visible > :nth-child(n+9), .home-articles-grid.is-visible > :nth-child(n+9), .home-bento.is-visible > :nth-child(n+9) { animation-delay: 480ms; }
@media (prefers-reduced-motion: reduce) {
.home-platforms-grid.home-reveal > .home-platform-card, .home-articles-grid.home-reveal > .home-article-card, .home-bento.home-reveal > .home-bento-card { opacity: 1; animation: none; }
}
.home-scrollbar { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #7C3AED, #A78BFA 50%, #C4B5FD); transform: scaleX(0); transform-origin: left center; z-index: 9999; pointer-events: none; will-change: transform; }
.home-platform-cta::after, .home-passport-go::after, .home-article-readmore::after { content: "\00a0\2192"; display: inline-block; transition: transform 0.2s var(--ease-out); }
.home-platform-review-cta::after { content: "\2192"; display: inline-block; transition: transform 0.2s var(--ease-out); }
.home-platform-card:hover .home-platform-cta::after, .home-passport-card:hover .home-passport-go::after, .home-article-card:hover .home-article-readmore::after, .home-platform-review-cta:hover::after { transform: translateX(4px); }
.home-platform-cta, .home-passport-go, .home-article-readmore { position: relative; }
.home-platform-cta::before, .home-passport-go::before, .home-article-readmore::before { content: ""; position: absolute; left: 50%; bottom: -2px; width: 0; height: 1.5px; background: currentColor; transform: translateX(-50%); transition: width 0.25s var(--ease-out); }
.home-platform-card:hover .home-platform-cta::before, .home-passport-card:hover .home-passport-go::before, .home-article-card:hover .home-article-readmore::before { width: 100%; }
@keyframes home-hero-pulse { 0%, 100% { box-shadow: 0 6px 18px rgba(250,202,51,0.28); } 50% { box-shadow: 0 8px 26px rgba(250,202,51,0.42); } }
.home-hero-cta .home-cta-primary { animation: home-hero-pulse 3s ease-in-out infinite; }
.home-hero-cta .home-cta-primary:hover { animation: none; }
@media (prefers-reduced-motion: reduce) {
.home-hero-cta .home-cta-primary { animation: none; }
.home-scrollbar { display: none; }
}
.home-hero-spotlight { position: absolute; top: 0; left: 0; width: 480px; height: 480px; margin: -240px 0 0 -240px; border-radius: 50%; background: radial-gradient(circle, rgba(167,139,250,0.16), transparent 65%); pointer-events: none; z-index: -1; opacity: 0; transition: opacity 0.4s ease; will-change: transform, opacity; }
.home-hero-spotlight.is-on { opacity: 1; }
@keyframes home-mesh-drift { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(36px,-28px) scale(1.14); } }
.home-community::after, .home-faq::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 360px; height: 360px; border-radius: 50%; filter: blur(72px); opacity: 0.4; will-change: transform; }
.home-community::after { top: 24%; right: 4%; background: radial-gradient(circle, rgba(167,139,250,0.2), transparent 70%); animation: home-mesh-drift 34s ease-in-out infinite; }
.home-faq::after { top: 40%; left: 3%; background: radial-gradient(circle, rgba(236,72,153,0.13), transparent 70%); animation: home-mesh-drift 42s ease-in-out infinite reverse; }
@media (hover: hover) and (pointer: fine) {
.home-platforms-grid, .home-bento, .home-articles-grid { perspective: 1000px; }
.home-platform-card, .home-bento-card, .home-article-card { transform-style: preserve-3d; }
}
@media (hover: none), (pointer: coarse) {
.home-hero-spotlight { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.home-community::after, .home-faq::after { animation: none; }
.home-hero-spotlight { display: none; }
}
.author-page { position: relative; background: transparent; overflow: hidden; }
.author-page > section { position: relative; z-index: 1; }
.author-hero { position: relative; padding-top: 72px; }
.author-hero::before { content: ""; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 600px; height: 380px; background: radial-gradient(circle, rgba(167,139,250,0.16), transparent 70%); pointer-events: none; z-index: -1; }
.author-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.author-avatar { position: relative; z-index: 1; width: 100px; height: 100px; border-radius: 50%; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; font-size: 44px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7C3AED, #A78BFA); box-shadow: 0 16px 44px rgba(124,58,237,0.4), 0 0 50px rgba(167,139,250,0.4), inset 0 1px 0 rgba(255,255,255,0.18); }
.author-name { font-size: clamp(40px, 6vw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 0; background: linear-gradient(110deg, #fff 0%, #C4B5FD 50%, #fff 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; animation: shimmer-flow 10s ease-in-out infinite alternate; }
.author-role { display: inline-block; margin: 14px 0 26px; padding: 6px 16px; border-radius: 999px; background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.22); color: #C4B5FD; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.author-bio p { font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,0.72); margin: 0 0 16px; }
.author-bio p:last-child { margin-bottom: 0; }
.author-covers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.author-cover-card { display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 22px; border-radius: 16px; background: linear-gradient(160deg, rgba(167,139,250,0.1), rgba(255,255,255,0.02) 70%); border: 1px solid rgba(167,139,250,0.18); border-top-color: rgba(196,181,253,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 10px 30px rgba(8,4,26,0.32); transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out); }
.author-cover-card:hover { transform: translateY(-5px); border-color: rgba(167,139,250,0.42); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 20px 48px rgba(8,4,26,0.5), 0 0 36px rgba(167,139,250,0.22); }
.author-cover-ic { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(167,139,250,0.16); color: #A78BFA; margin-top: 1px; }
.author-cover-ic svg { width: 17px; height: 17px; }
.author-cover-card p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.78); }
.author-trust-card { max-width: 820px; margin: 0 auto; padding: 32px 34px; border-radius: 16px; text-align: left; background: linear-gradient(160deg, rgba(167,139,250,0.1), rgba(255,255,255,0.02) 70%); border: 1px solid rgba(167,139,250,0.18); border-top-color: rgba(196,181,253,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 12px 34px rgba(8,4,26,0.35); }
.author-trust-card p { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.75); margin: 0 0 16px; }
.author-trust-card p:last-child { margin-bottom: 0; }
.author-process-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.author-check { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px; border-radius: 16px; background: linear-gradient(160deg, rgba(167,139,250,0.08), rgba(255,255,255,0.015) 70%); border: 1px solid rgba(167,139,250,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.author-check-ic { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(167,139,250,0.16); color: #A78BFA; margin-top: 1px; }
.author-check-ic svg { width: 16px; height: 16px; }
.author-check p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.8); }
.author-connect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 880px; margin: 0 auto; }
.author-connect-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(167,139,250,0.25); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); text-decoration: none; transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background 0.25s var(--ease-out); }
.author-connect-card:hover { transform: translateY(-4px); border-color: rgba(167,139,250,0.5); background: rgba(255,255,255,0.06); box-shadow: 0 16px 40px rgba(8,4,26,0.4), 0 0 30px rgba(167,139,250,0.18); }
.author-connect-ic { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #A78BFA, #7C3AED); color: #fff; box-shadow: 0 6px 16px rgba(124,58,237,0.4); }
.author-connect-ic svg { width: 22px; height: 22px; }
.author-connect-ic-tg { background: #229ED9; box-shadow: 0 6px 16px rgba(34,158,217,0.4); }
.author-connect-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.author-connect-title { font-size: 14px; font-weight: 600; color: #fff; }
.author-connect-sub { font-size: 12px; color: rgba(255,255,255,0.5); overflow-wrap: anywhere; word-break: break-word; }
.author-covers-grid.home-reveal { opacity: 1; transform: none; transition: none; }
.author-covers-grid.home-reveal > .author-cover-card { opacity: 0; }
.author-covers-grid.home-reveal.is-visible > .author-cover-card { animation-name: home-stagger-in; animation-duration: 0.5s; animation-timing-function: var(--ease-out); animation-fill-mode: forwards; }
.author-covers-grid.is-visible > :nth-child(2) { animation-delay: 70ms; }
.author-covers-grid.is-visible > :nth-child(3) { animation-delay: 140ms; }
.author-covers-grid.is-visible > :nth-child(4) { animation-delay: 210ms; }
.author-covers-grid.is-visible > :nth-child(5) { animation-delay: 280ms; }
.author-covers-grid.is-visible > :nth-child(6) { animation-delay: 350ms; }
@media (prefers-reduced-motion: reduce) {
.author-covers-grid.home-reveal > .author-cover-card { opacity: 1; animation: none; }
}
@media (max-width: 768px) {
.author-covers-grid { grid-template-columns: 1fr; }
.author-connect-grid { grid-template-columns: 1fr; }
}
.contact-channels-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
margin-bottom: 48px;
}
@media (max-width: 900px) {
.contact-channels-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.contact-channels-4 { grid-template-columns: 1fr; }
}
.util-compact .display-1,
.util-compact .heading-hero,
.util-compact .aff-h1 {
font-size: clamp(32px, 5vw, 52px) !important;
line-height: 1.15;
letter-spacing: -0.02em;
}
.util-compact .display-2,
.util-compact .heading-section,
.util-compact .aff-h2,
.util-compact .aff-section-title,
.util-compact .aff-cta-title {
font-size: clamp(26px, 3.5vw, 40px) !important;
line-height: 1.2;
letter-spacing: -0.01em;
}
.util-compact .text-eyebrow,
.util-compact .aff-eyebrow {
font-size: 12px !important;
letter-spacing: 0.08em;
}
.util-compact .hero-leads,
.util-compact .aff-lead,
.util-compact .section-intro {
font-size: 16px !important;
line-height: 1.6;
}
.util-compact .process-step-title,
.util-compact .differentiator-grid h3,
.util-compact .bts-title {
font-size: 20px !important;
line-height: 1.35;
letter-spacing: -0.01em;
}
.util-compact .contact-channels-4 h2 {
font-size: 20px !important;
line-height: 1.35;
}
.newpage-body.util-compact:has(+ .newpage-cta) { padding-bottom: 48px; }
.newpage-cta.util-compact { padding-top: 40px !important; padding-bottom: 80px !important; }
.contact-channels-4 .tile p { font-size: 14px; line-height: 1.5; }
.util-compact .reseller-hero-leads p,
.util-compact .bts-grid[data-variant="reseller-features"] .bts-item > p,
.util-compact .still-questions p {
font-size: 15px !important;
line-height: 1.6;
}
.util-compact .prose-block > p,
.util-compact .bts-content p {
font-size: 15px !important;
line-height: 1.6;
}
.util-compact .process-step-body p,
.util-compact .differentiator p {
font-size: 15px !important;
line-height: 1.6;
}
.differentiator.tile-vstack { justify-content: flex-start; }
.signup-amplify-section.newpage-body:has(+ .newpage-cta) { padding-bottom: var(--space-12) !important; }
@media (max-width: 768px) {
.signup-cta .cta-row { align-items: center; }
.signup-cta .cta-row .btn { width: 100%; max-width: 320px; }
}
.site-footer .footer-social {
max-width: 250px;
gap: 12px;
justify-content: flex-start;
}
.site-footer .footer-social a {
width: 38px;
height: 38px;
}
.site-footer .footer-social a svg {
width: 18px;
height: 18px;
}
.header-signup-mobile { display: none; }
.mobile-overlay-inner { min-height: 100%; max-height: 100%; box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mobile-overlay-logo { margin-bottom: 1.5rem; }
.mobile-overlay-nav a { font-size: 1.2rem; padding: 0.7rem 0; }
.m-nav-parent-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
background: none;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
cursor: pointer;
padding: 0.7rem 0;
font-size: clamp(1rem, 0.75vw + 0.875rem, 1.125rem);
font-weight: 500;
color: #fff;
text-align: start;
font-family: inherit;
-webkit-tap-highlight-color: rgba(124, 58, 237, 0.2);
transition: color 0.2s ease, padding 0.2s ease;
}
.m-nav-parent-btn:hover,
.m-nav-parent-btn:focus-visible { color: var(--purple-light); }
.m-nav-parent-btn.is-active-nav { color: var(--purple-subtle); }
.m-nav-parent-chevron { width: 20px; height: 20px; flex-shrink: 0; color: rgba(255, 255, 255, 0.5); }
.m-nav-panel {
position: absolute;
inset: 0;
z-index: 2;
background: rgba(8, 4, 26, 0.85);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
padding: 0;
visibility: hidden;
}
.m-nav-panel.is-open { transform: translateX(0); visibility: visible; }
.m-nav-panel-head {
position: sticky;
top: 0;
z-index: 3;
padding: max(1rem, env(safe-area-inset-top, 0px)) 1.25rem 0.875rem;
background: rgba(8, 4, 26, 0.85);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(167, 139, 250, 0.12);
}
.m-nav-back {
display: inline-flex;
align-items: center;
gap: 0.3rem;
min-height: 44px;
padding: 0 16px;
background: rgba(255, 255, 255, 0.06);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(167, 139, 250, 0.25);
border-radius: 999px;
color: var(--purple-light);
font-size: 0.95rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 0.2s var(--ease-out), border-color 0.2s ease, background 0.2s ease;
}
.m-nav-back:active {
transform: scale(0.97);
border-color: rgba(167, 139, 250, 0.55);
background: rgba(255, 255, 255, 0.1);
}
.m-nav-back svg { width: 18px; height: 18px; }
.m-nav-panel-body { padding: 1.5rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 2rem); }
.m-nav-panel-all {
display: flex;
align-items: center;
gap: 0.75rem;
min-height: 52px;
padding: 0.75rem 0.875rem;
margin-bottom: 1rem;
border-radius: 14px;
text-decoration: none;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(250, 202, 51, 0.22);
box-shadow: inset 3px 0 0 var(--yellow);
transition: transform 0.18s var(--ease-out), background 0.2s ease, border-color 0.2s ease;
}
.m-nav-panel-all:active {
transform: scale(0.99);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(250, 202, 51, 0.4);
}
.m-nav-panel-all-ic {
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(250, 202, 51, 0.14);
color: var(--yellow);
}
.m-nav-panel-all-ic svg { width: 18px; height: 18px; }
.m-nav-panel-all-text { flex: 1; font-size: 1.05rem; font-weight: 700; color: #fff; }
.m-nav-panel-all-arrow { width: 18px; height: 18px; flex-shrink: 0; color: rgba(255, 255, 255, 0.5); }
.m-nav-panel-list { list-style: none; margin: 0; padding: 0; }
.m-nav-panel-list li { margin-bottom: 5px; }
.m-nav-panel-list li a {
display: flex;
align-items: center;
gap: 0.75rem;
min-height: 40px;
padding: 7px 14px;
border-radius: 12px;
font-size: 1.05rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.92);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.m-nav-panel-list li a:active { background: rgba(167, 139, 250, 0.1); transform: scale(0.99); }
.m-nav-panel-ic {
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 9px;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
justify-content: center;
}
.m-nav-panel-ic svg { width: 18px; height: 18px; }
.m-nav-panel-list li a.is-active-mega { color: var(--purple-subtle); background: rgba(167, 139, 250, 0.12); }
@media (max-width: 959px) {
.header-inner { padding-block: 0.375rem; gap: 0.75rem; }
.header-burger { width: 44px; height: 44px; }
.header-signup-mobile {
display: inline-flex;
align-items: center;
margin-inline-start: auto;
padding: 0.5rem 1rem;
font-size: 14px;
}
}
@media (max-width: 959px) {
html { overflow-x: clip; }
.marketing-header { position: sticky; top: 0; z-index: 50; }
}
@media (max-width: 959px) {
#mobile-overlay { height: 100dvh; box-sizing: border-box; }
#mobile-overlay .mobile-overlay-logo { margin-bottom: 0.75rem; }
#mobile-overlay .mobile-overlay-nav { margin-top: 2rem; }
#mobile-overlay .mobile-overlay-nav ul { gap: 5px; }
#mobile-overlay nav a,
#mobile-overlay .mobile-overlay-link {
padding-block: 7px;
min-height: 40px;
}
#mobile-overlay .m-nav-parent-btn { padding-block: 7px; }
#mobile-overlay .mobile-overlay-cta {
margin-top: 14px;
gap: 8px;
margin-bottom: 16px;
}
#mobile-overlay .mobile-overlay-inner {
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
}
}
@media (max-width: 767px) {
.footer-column-title { margin-bottom: 1.625rem; }
.footer-link-list { gap: 0.25rem; }
.site-footer .footer-link-list a {
min-height: 32px;
padding-block: 0.25rem;
}
}
@media (max-width: 959px) {
.lp-preset { min-height: 44px; display: flex; align-items: center; justify-content: center; }
.header-signup-mobile { min-height: 44px; }
#mobile-overlay nav a,
#mobile-overlay .mobile-overlay-link,
#mobile-overlay .m-nav-parent-btn { min-height: 44px; }
.home-reviews-tab { min-height: 44px; }
.blog-filter-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.site-footer .footer-link-list a { min-height: 44px; }
.site-footer .footer-social a { width: 44px; height: 44px; }
.signup-form .signup-input { font-size: 16px; }
.signup-terms-checkbox { width: 24px; height: 24px; }
}
.home-hero [data-reveal],
.newpage-hero [data-reveal],
.crypto-hero [data-reveal] {
opacity: 1;
animation: heroRevealRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.home-hero [data-reveal][data-delay="1"],
.newpage-hero [data-reveal][data-delay="1"],
.crypto-hero [data-reveal][data-delay="1"] { animation-delay: 80ms; }
.home-hero [data-reveal][data-delay="2"],
.newpage-hero [data-reveal][data-delay="2"],
.crypto-hero [data-reveal][data-delay="2"] { animation-delay: 160ms; }
.home-hero [data-reveal][data-delay="3"],
.newpage-hero [data-reveal][data-delay="3"],
.crypto-hero [data-reveal][data-delay="3"] { animation-delay: 240ms; }
.home-hero [data-reveal][data-delay="4"],
.newpage-hero [data-reveal][data-delay="4"],
.crypto-hero [data-reveal][data-delay="4"] { animation-delay: 320ms; }
.home-hero [data-reveal][data-delay="60"],
.newpage-hero [data-reveal][data-delay="60"],
.crypto-hero [data-reveal][data-delay="60"] { animation-delay: 60ms; }
.home-hero [data-reveal][data-delay="120"],
.newpage-hero [data-reveal][data-delay="120"],
.crypto-hero [data-reveal][data-delay="120"] { animation-delay: 120ms; }
@keyframes heroRevealRise {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.home-hero [data-reveal],
.newpage-hero [data-reveal],
.crypto-hero [data-reveal] {
animation: none;
opacity: 1;
transform: none;
}
}
.home-hero-title { font-size: clamp(32px, 5vw, 56px); font-weight: 800; }
@media (max-width: 600px) {
.home-hero-title { font-size: clamp(23px, 6.2vw, 30px); }
}
.heading-section { font-size: clamp(26px, 3.5vw, 40px); font-weight: 700; }
.crypto-section-title { font-size: clamp(24px, 3.4vw, 40px); font-weight: 700; }
.aff-h2 { font-size: clamp(26px, 3.5vw, 40px); font-weight: 700; }
.display-2 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; }
.text-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; }
.hero-eyebrow { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; }
.aff-eyebrow, .crypto-eyebrow, .home-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; }
.home-cta-primary { border-radius: 10px; }
.home-cta-secondary { border-radius: 10px; }
.home-cta-lg { border-radius: 10px; background: var(--yellow, #FACA33); }
.crypto-cta-btn { background: var(--yellow, #FACA33); box-shadow: none; }
.crypto-cta-btn:hover, .crypto-cta-btn:focus, .crypto-cta-btn:focus-visible { box-shadow: 0 14px 32px rgba(250, 202, 51, 0.42); }
.lp-order-btn { border-radius: 10px; background: var(--yellow, #FACA33); }
.btn.btn-primary.home-login-btn {
background: var(--yellow, #FACA33);
border-color: var(--yellow, #FACA33);
color: #150B3D;
border-radius: 10px;
}
.btn.btn-primary.home-login-btn:hover,
.btn.btn-primary.home-login-btn:focus,
.btn.btn-primary.home-login-btn:focus-visible {
background: var(--yellow, #FACA33);
border-color: var(--yellow, #FACA33);
color: #150B3D;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(250, 202, 51, 0.35);
filter: brightness(1.05);
}
.cat-guides,
.cat-platform-tips,
.cat-case-studies,
.cat-news {
background: rgba(167, 139, 250, 0.15);
color: #C4B5FD;
border-color: rgba(167, 139, 250, 0.35);
}
.api-container { max-width: var(--container-xl, 1200px); }
.services-browser { max-width: var(--container-xl, 1200px); }
.services-platforms { max-width: var(--container-xl, 1200px); }
.home-reviews-customer-mq { max-width: var(--container-xl, 1200px); }
.lp-reviews { max-width: var(--container-xl, 1200px); }
.home-hero-login { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.api-info-panel,
.api-method-card,
.signup-form-card,
.services-signup-cta-card,
.signup-feature-card,
.signup-step-card,
.terms-article { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 18px; }
.signup-amplify-card,
.signup-platform-card,
.services-marketing-article { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.still-questions { backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; }
.card-glass { border-radius: 18px; }
.crypto-eyebrow { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.api-method-badge { background: rgba(167, 139, 250, 0.15); color: #C4B5FD; }
.home-bento-card.is-horizontal { flex-direction: column; align-items: flex-start; }
@media (max-width: 480px) {
.home-eyebrow { white-space: nowrap; font-size: 10px; letter-spacing: 0.06em; padding: 5px 12px; }
}
input, select, textarea, button, table, .table, td, th { font-family: var(--font-sans); }
.related-section { padding: 64px 0; }
.related-head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.related-eyebrow { display: inline-block; padding: 6px 16px; border-radius: 999px; background: rgba(167, 139, 250, 0.12); border: 1px solid rgba(167, 139, 250, 0.22); color: #C4B5FD; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); margin-bottom: 16px; }
.related-h2 { font-size: clamp(24px, 3.4vw, 40px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 10px; background: linear-gradient(135deg, #ffffff 30%, #C4B5FD 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; }
.related-sub { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.65); margin: 0; }
.related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: var(--container-xl, 1200px); margin: 0 auto; }
.related-tile { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(160deg, rgba(167, 139, 250, 0.08), rgba(255, 255, 255, 0.02) 70%); border: 1px solid rgba(167, 139, 250, 0.16); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); text-decoration: none; transition: transform 0.25s var(--ease-out, ease), border-color 0.25s ease, box-shadow 0.25s ease; }
.related-tile:hover { transform: translateY(-3px); border-color: rgba(167, 139, 250, 0.4); box-shadow: 0 14px 32px rgba(109, 40, 217, 0.18); text-decoration: none; }
.related-tile-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(167, 139, 250, 0.14); }
.related-tile-flag { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(167, 139, 250, 0.14); font-size: 20px; line-height: 1; }
.related-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.related-tile-name { font-size: 14.5px; font-weight: 600; color: #fff; }
.related-tile-meta { font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.related-tile-arrow { flex-shrink: 0; margin-inline-start: auto; color: #C4B5FD; opacity: 0.7; transition: transform 0.25s var(--ease-out, ease), opacity 0.25s ease; }
.related-tile:hover .related-tile-arrow { transform: translateX(3px); opacity: 1; }
@media (max-width: 860px) {
.related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.related-section { padding: 48px 0; }
.related-grid { gap: 10px; }
.related-tile { min-height: 64px; padding: 12px 14px; gap: 10px; }
.related-tile-meta { display: none; }
}
.faq-h1 { font-weight: 800; }
body .panel {
background-color: #1F1248;
border: 1px solid rgba(167, 139, 250, 0.16);
border-radius: 18px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
body .panel-default > .panel-heading {
color: #FFFFFF;
background-color: rgba(167, 139, 250, 0.08);
border-color: rgba(167, 139, 250, 0.16);
}
body .panel-footer {
background-color: rgba(167, 139, 250, 0.06);
border-top: 1px solid rgba(167, 139, 250, 0.16);
}
body .panel-title { color: #FFFFFF; }
body .panel-group .panel-heading + .panel-collapse > .panel-body,
body .panel-group .panel-heading + .panel-collapse > .list-group {
border-top-color: rgba(167, 139, 250, 0.16);
}
body .list-group-item {
background-color: rgba(255, 255, 255, 0.03);
border-color: rgba(167, 139, 250, 0.14);
color: rgba(255, 255, 255, 0.85);
}
body a.list-group-item,
body button.list-group-item { color: rgba(255, 255, 255, 0.85); }
body a.list-group-item .list-group-item-heading,
body button.list-group-item .list-group-item-heading { color: #FFFFFF; }
body a.list-group-item:hover,
body a.list-group-item:focus,
body button.list-group-item:hover,
body button.list-group-item:focus {
color: #FFFFFF;
background-color: rgba(167, 139, 250, 0.1);
}
body .list-group-item.active,
body .list-group-item.active:hover,
body .list-group-item.active:focus {
color: #FFFFFF;
background-color: var(--purple-deep, #6D28D9);
border-color: var(--purple-deep, #6D28D9);
}
body .list-group-item.disabled,
body .list-group-item.disabled:hover,
body .list-group-item.disabled:focus {
color: rgba(255, 255, 255, 0.35);
background-color: rgba(255, 255, 255, 0.02);
}
body .border-rounded {
background: rgba(8, 4, 26, 0.35);
border-radius: 12px;
}
body .border-solid {
border-color: rgba(167, 139, 250, 0.16);
}
body .form-control[readonly],
body .form-control[disabled],
body fieldset[disabled] .form-control {
background-color: rgba(8, 4, 26, 0.45);
color: rgba(255, 255, 255, 0.75);
border-color: rgba(167, 139, 250, 0.16);
cursor: default;
}
.dbx {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 264px 1fr;
min-height: 100vh;
transition: grid-template-columns 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx.is-collapsed { grid-template-columns: 76px 1fr; }
.dbx-sidebar {
position: sticky;
top: 0;
height: 100vh;
background: #0B0524;
border-right: 1px solid rgba(255, 255, 255, 0.05);
padding: 24px 16px;
}
.dbx.is-collapsed .dbx-sidebar { padding: 24px 12px; }
.dbx-sidebar-inner { position: relative; height: 100%; display: flex; flex-direction: column; }
.dbx-toggle {
position: absolute;
top: 2px;
right: -29px;
width: 26px;
height: 26px;
border-radius: 999px;
background: #1F1248;
border: 1px solid rgba(250, 202, 51, 0.45);
color: #FACA33;
font-size: 0.625rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 5;
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
}
.dbx-toggle:hover { background: rgba(250, 202, 51, 0.12); }
.dbx-toggle:focus-visible { outline: 2px solid #A78BFA; outline-offset: 2px; }
.dbx.is-collapsed .dbx-toggle { transform: rotate(180deg); }
.dbx-logo { position: relative; display: flex; align-items: center; padding: 4px 12px 22px; }
.dbx-logo::after {
content: "";
position: absolute;
left: 10%;
top: 100%;
width: 80%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.35), transparent);
}
.dbx-logo-full { height: 30px; width: auto; display: block; }
.dbx-logo-mark { display: none; width: 28px; height: 28px; box-sizing: border-box; transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx.is-collapsed .dbx-logo-full { display: none; }
.dbx.is-collapsed .dbx-logo-mark {
display: block;
width: 40px;
height: 40px;
padding: 10px;
border-radius: 12px;
background: rgba(167, 139, 250, 0.12);
border: 1px solid rgba(167, 139, 250, 0.22);
}
.dbx.is-collapsed .dbx-logo { justify-content: center; padding-left: 0; padding-right: 0; }
.dbx-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; margin-top: 16px; }
.dbx-nav-item {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 12px;
color: rgba(255, 255, 255, 0.72);
text-decoration: none;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1;
border: 1px solid transparent;
transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx-nav-item svg { width: 17px; height: 17px; stroke: currentColor; opacity: 0.75; flex: none; }
.dbx-nav-item:hover { background: rgba(167, 139, 250, 0.10); color: #fff; text-decoration: none; }
.dbx-nav-item:focus-visible { outline: 2px solid #A78BFA; outline-offset: 2px; }
.dbx-nav-item.is-active-nav {
background: rgba(167, 139, 250, 0.16);
border-color: transparent;
box-shadow: inset 3px 0 0 #A78BFA;
color: #fff;
}
.dbx-nav-item.is-active-nav svg { stroke: #FACA33; opacity: 1; }
.dbx-nav-badge {
margin-left: auto;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: #FACA33;
color: #150B3D;
font-size: 0.6875rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dbx.is-collapsed .dbx-nav-item { justify-content: center; padding: 12px 0; gap: 0; }
.dbx.is-collapsed .dbx-nav-label { display: none; }
.dbx.is-collapsed .dbx-nav-badge {
position: absolute;
top: 4px;
right: 4px;
min-width: 8px;
height: 8px;
padding: 0;
font-size: 0;
}
.dbx-main { padding: 28px 36px 64px; min-width: 0; }
.dbx-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.dbx-topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dbx-pill { position: relative; }
.dbx-pill > .dropdown-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 14px;
border-radius: 999px;
background: rgba(31, 18, 72, 0.5);
border: 1px solid rgba(167, 139, 250, 0.16);
color: rgba(255, 255, 255, 0.72);
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx-pill > .dropdown-toggle:hover { border-color: rgba(167, 139, 250, 0.32); color: #fff; text-decoration: none; }
.dbx-pill > .dropdown-toggle:focus-visible { outline: 2px solid #A78BFA; outline-offset: 2px; }
.dbx-pill .caret { opacity: 0.6; }
.dbx-avatar {
width: 24px;
height: 24px;
border-radius: 999px;
background: linear-gradient(135deg, #A78BFA, #6D28D9);
color: #fff;
font-size: 0.6875rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
}
.dbx-user-chip .badge.badge-purple { background: rgba(167, 139, 250, 0.2); color: #fff; font-weight: 700; }
.dbx-pill .dropdown-menu { left: auto; right: 0; }
.dbx-lb {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 18px;
margin-bottom: 20px;
border-radius: 14px;
background: rgba(250, 202, 51, 0.07);
border: 1px solid rgba(250, 202, 51, 0.4);
}
.dbx-lb.is-hidden { display: none; }
.dbx-lb-ic { width: 18px; height: 18px; stroke: #FACA33; flex: none; }
.dbx-lb-text { flex: 1; font-size: 0.84375rem; color: rgba(255, 255, 255, 0.72); }
.dbx-lb-text strong { color: #fff; }
.dbx-lb-cta {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 16px;
border-radius: 10px;
background: #FACA33;
color: #150B3D;
font-size: 0.8125rem;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx-lb-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(250, 202, 51, 0.25); color: #150B3D; text-decoration: none; }
.dbx-lb-dismiss {
background: none;
border: none;
color: rgba(255, 255, 255, 0.60);
font-size: 1rem;
cursor: pointer;
padding: 4px;
line-height: 1;
}
.dbx-lb-dismiss:hover { color: #fff; }
.dbx-mobile-head { display: none; }
.dbx-probe {
position: fixed;
bottom: 8px;
left: 8px;
z-index: 99999;
max-width: min(520px, 90vw);
max-height: 40vh;
overflow: auto;
background: rgba(0, 0, 0, 0.88);
color: #9be29b;
font-family: var(--font-mono, monospace);
font-size: 10px;
line-height: 1.5;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid rgba(167, 139, 250, 0.3);
white-space: pre-wrap;
word-break: break-all;
}
@media (max-width: 900px) {
.dbx { display: block; }
.dbx-sidebar { display: none; }
.dbx-main { padding: 20px 16px 48px; }
.dbx-mobile-head { display: block; margin-bottom: 14px; }
.dbx-mobile-links {
display: flex;
gap: 6px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 6px;
}
.dbx-mobile-links a {
flex: none;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 0 14px;
border-radius: 999px;
background: #14093A;
border: 1px solid rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.72);
font-size: 0.8125rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.dbx-mobile-links a.is-active-nav { background: rgba(167, 139, 250, 0.16); border-color: rgba(167, 139, 250, 0.35); color: #fff; }
.dbx-topbar { margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.dbx,
.dbx-toggle,
.dbx-logo-mark,
.dbx-nav-item,
.dbx-pill > .dropdown-toggle,
.dbx-lb-cta { transition: none; }
}
.dbx-ohdr { display: none; }
@media (min-width: 901px) {
.dbx-ohdr {
display: flex;
width: 100%;
box-sizing: border-box;
align-items: stretch;
flex-wrap: nowrap;
gap: 14px;
background: var(--bg-surface);
padding: 14px 16px 14px 24px;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-md);
margin-bottom: 24px;
}
.dbx-ohdr .dbx-stat { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dbx-ohdr > .dbx-stat { flex: 1 1 0; }
.dbx-ohdr .dbx-stat-body { min-width: 0; }
.dbx-ohdr .dbx-stat-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-ohdr-welcome { padding-right: 18px; }
.dbx-ohdr-avatar {
flex: none;
width: 36px;
height: 36px;
border-radius: 999px;
background: var(--bg-elevated);
border: 1px solid var(--border-default);
display: inline-flex;
align-items: center;
justify-content: center;
}
.dbx-ohdr-avatar svg { width: 16px; height: 16px; stroke: var(--purple-light); }
.dbx-ohdr .dbx-stat-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.60); margin-bottom: 2px; }
.dbx-ohdr .dbx-stat-value { font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.dbx-ohdr-balance {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 20px;
border-radius: 12px;
box-sizing: border-box;
text-decoration: none;
border: 2px solid transparent;
background:
linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
linear-gradient(120deg, var(--purple-primary), var(--yellow)) border-box;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.dbx-ohdr-balance:hover { transform: translateY(-2px); text-decoration: none; }
.dbx-ohdr-balance:hover .dbx-stat-value,
.dbx-ohdr-balance:hover .dbx-stat-meta { text-decoration: none; }
.dbx-ohdr-balance-ic { flex: none; width: 20px; height: 20px; }
.dbx-ohdr-balance-ic svg { width: 20px; height: 20px; stroke: var(--text-primary); }
.dbx-ohdr-balance .dbx-stat-value { font-size: 1rem; }
.dbx-ohdr-balance .dbx-stat-meta { font-size: 0.75rem; font-weight: 600; color: var(--yellow); margin-top: 2px; }
.dbx-ohdr-item {
padding: 8px 22px;
border-left: 1px solid var(--border-subtle);
border-radius: 10px;
transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.dbx-ohdr-item:hover { background: var(--bg-elevated); }
.dbx-ohdr-item .dbx-stat-ic { flex: none; width: 18px; height: 18px; }
.dbx-ohdr-item .dbx-stat-ic svg { width: 18px; height: 18px; stroke: var(--purple-light); }
.dbx-ohdr-item .dbx-stat-meta { font-size: 0.75rem; font-weight: 600; margin-top: 2px; }
.dbx-ohdr-item .dbx-stat-meta,
.dbx-ohdr-item .dbx-stat-meta a { color: var(--yellow); text-decoration: none; }
.dbx-ohdr-item .dbx-stat-meta a:hover { color: #FFD75E; text-decoration: none; }
.dbx-ohdr-level .dbx-stat-meta,
.dbx-ohdr-level .dbx-stat-meta a { color: var(--purple-subtle); }
.dbx-ohdr-level .dbx-stat-meta a:hover { color: #fff; }
}
.dbx-ohdr-m { display: none; }
@media (max-width: 900px) {
.dbx-ohdr-m { display: block; margin-bottom: 24px; }
.dbx-lvl-card {
background: linear-gradient(160deg, var(--bg-surface), var(--bg-dark));
border: 1px solid var(--border-strong);
border-radius: 16px;
padding: 18px;
box-shadow: 0 8px 24px -6px rgba(124, 58, 237, 0.35);
}
.dbx-lvl-top { display: flex; align-items: center; gap: 14px; }
.dbx-lvl-badge {
flex: none;
width: 54px;
height: 54px;
border-radius: 999px;
padding: 2.5px;
background: conic-gradient(from 200deg, var(--purple-primary), var(--yellow), var(--purple-primary));
display: flex;
align-items: center;
justify-content: center;
}
.dbx-lvl-badge-in {
width: 100%;
height: 100%;
border-radius: 999px;
background: var(--bg-dark);
display: flex;
align-items: center;
justify-content: center;
}
.dbx-lvl-badge-in svg { width: 24px; height: 24px; color: var(--yellow); }
.dbx-lvl-info { min-width: 0; }
.dbx-lvl-eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple-light); margin-bottom: 2px; }
.dbx-lvl-name { display: block; font-size: 1.375rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.dbx-lvl-chip { display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--yellow); background: rgba(250, 202, 51, 0.14); padding: 3px 10px; border-radius: 999px; }
.dbx-lvl-divider { height: 1px; background: var(--border-subtle); margin: 16px 0; }
.dbx-lvl-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.dbx-lvl-bal-label { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.60); margin-bottom: 4px; }
.dbx-lvl-bal-value { display: block; font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
.dbx-lvl-add {
flex: none;
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--yellow);
color: #1A1235;
text-decoration: none;
font-weight: 700;
font-size: 0.875rem;
padding: 10px 18px;
border-radius: 999px;
}
.dbx-lvl-add:hover, .dbx-lvl-add:active, .dbx-lvl-add:focus { color: #1A1235; text-decoration: none; }
.dbx-lvl-add svg { width: 16px; height: 16px; stroke: #1A1235; }
.dbx-lvl-sum { margin-top: 14px; }
.dbx-lvl-sum-trig {
cursor: pointer;
list-style: none;
padding: 4px 2px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.60);
}
.dbx-lvl-sum-trig::-webkit-details-marker { display: none; }
.dbx-lvl-sum-chev { flex: none; width: 16px; height: 16px; stroke: var(--purple-light); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.dbx-lvl-sum[open] .dbx-lvl-sum-chev { transform: rotate(180deg); }
.dbx-lvl-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.dbx-lvl-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: var(--bg-dark);
border: 1px solid var(--border-subtle);
border-radius: 12px;
padding: 14px 16px;
box-sizing: border-box;
}
.dbx-lvl-row-hi {
border: 1.5px solid transparent;
background:
linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
linear-gradient(120deg, var(--purple-primary), var(--yellow)) border-box;
}
.dbx-lvl-row-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dbx-lvl-row-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.dbx-lvl-row-ic-purple { background: rgba(167, 139, 250, 0.12); }
.dbx-lvl-row-ic-purple svg { width: 16px; height: 16px; stroke: var(--purple-light); }
.dbx-lvl-row-ic-yellow { background: rgba(250, 202, 51, 0.14); }
.dbx-lvl-row-ic-yellow svg { width: 16px; height: 16px; stroke: var(--yellow); }
.dbx-lvl-row-label { font-size: 0.8125rem; font-weight: 500; color: rgba(255, 255, 255, 0.60); }
.dbx-lvl-row-val { flex: none; font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); }
}
.dbx-content { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 22px; align-items: start; }
.dbx-card {
background: #0E0729;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 20px;
box-shadow: inset 0 1px 0 rgba(196, 181, 253, 0.10);
transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx-card:hover { border-color: rgba(167, 139, 250, 0.18); }
.dbx-order-card { padding: 24px; }
.dbx-oc-tabs { display: flex; gap: 7px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(167, 139, 250, 0.16); flex-wrap: wrap; }
.dbx-oc-tab {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 16px;
border-radius: 12px;
background: #14093A;
border: 1px solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.72);
font-family: inherit;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx-oc-tab svg { width: 14px; height: 14px; stroke: currentColor; }
.dbx-oc-tab:hover { border-color: rgba(167, 139, 250, 0.32); color: #fff; }
.dbx-oc-tab:focus-visible { outline: 2px solid #A78BFA; outline-offset: 2px; }
.dbx-oc-tab.is-on {
background: linear-gradient(180deg, #2F1A6E, #251357);
border-color: #A78BFA;
color: #fff;
box-shadow: inset 0 1px 0 rgba(196, 181, 253, 0.3), 0 6px 16px rgba(109, 40, 217, 0.3);
}
.dbx-oc-tab.is-on svg { stroke: #C4B5FD; }
.dbx-oc-pane { display: none; }
.dbx-oc-pane.is-on { display: block; }
.dbx-pane-intro { font-size: 0.84375rem; line-height: 1.6; color: rgba(255, 255, 255, 0.72); margin: 0 0 16px; }
.dbx-pane-intro a { color: #C4B5FD; text-decoration: none; }
.dbx-pane-intro a:hover { text-decoration: underline; }
.dbx-fav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dbx-fav-item { padding: 14px 16px; border-radius: 14px; background: #14093A; border: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.8125rem; color: rgba(255, 255, 255, 0.72); word-break: break-all; }
.dbx-cta-link {
display: inline-flex;
align-items: center;
height: 44px;
padding: 0 22px;
border-radius: 10px;
background: #FACA33;
color: #150B3D;
font-size: 0.875rem;
font-weight: 700;
text-decoration: none;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx-cta-link:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(250, 202, 51, 0.25); color: #150B3D; text-decoration: none; }
.dbx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dbx-chip {
display: inline-flex;
align-items: center;
gap: 7px;
height: 36px;
padding: 0 12px;
border-radius: 12px;
background: #14093A;
border: 1px solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.72);
font-family: inherit;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx-chip:hover { border-color: rgba(167, 139, 250, 0.32); color: #fff; transform: translateY(-1px); background: #1A0D47; }
.dbx-chip:focus-visible { outline: 2px solid #A78BFA; outline-offset: 2px; }
.dbx-chip.is-on {
background: linear-gradient(180deg, #2F1A6E, #251357);
border-color: #A78BFA;
color: #fff;
font-weight: 600;
box-shadow: inset 0 1px 0 rgba(196, 181, 253, 0.3), 0 6px 16px rgba(109, 40, 217, 0.3);
}
.dbx-chip-ic { width: 14px; height: 14px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; }
.dbx-chip-ic svg { width: 14px; height: 14px; display: block; }
.dbx-chip-ic-all { color: #C4B5FD; }
.dbx-chip-count { font-size: 0.75rem; color: rgba(255, 255, 255, 0.60); font-weight: 500; }
.dbx-chip.is-on .dbx-chip-count { color: #C4B5FD; }
.dbx .dbx-field { margin-bottom: 16px; }
.dbx #order-form .control-label { display: block; font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, 0.72); margin-bottom: 7px; }
.dbx #order-form .form-control,
.dbx #order-form select.form-control {
width: 100%;
height: 44px;
padding: 0 14px;
border-radius: 12px;
background-color: #14093A;
border: 1px solid rgba(255, 255, 255, 0.07);
color: #fff;
font-size: 0.9375rem;
box-shadow: none;
transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx #order-form textarea.form-control { height: auto; padding: 12px 14px; line-height: 1.6; }
.dbx #order-form .form-control:focus {
outline: none;
border-color: rgba(167, 139, 250, 0.5);
box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.14);
}
.dbx #order-form .form-control::placeholder { color: rgba(255, 255, 255, 0.60); }
.dbx #order-form #charge[readonly] { background-color: rgba(8, 4, 26, 0.45); color: rgba(255, 255, 255, 0.75); cursor: default; }
.dbx #order-form .fa-search { color: #A78BFA; }
.dbx-submit-row { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.dbx #order-form .btn.btn-primary {
height: 48px;
padding: 0 28px;
border: none;
border-radius: 10px;
background: #FACA33;
color: #150B3D;
font-size: 0.9375rem;
font-weight: 700;
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx #order-form .btn.btn-primary:hover { background: #FACA33; border-color: transparent; color: #150B3D; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(250, 202, 51, 0.25); }
.dbx #order-form .btn.btn-primary::after {
content: "";
position: absolute;
top: 0;
left: -80%;
width: 50%;
height: 100%;
background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
transform: skewX(-20deg);
transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx #order-form .btn.btn-primary:hover::after { left: 130%; }
.dbx-submit-note { font-size: 0.75rem; color: rgba(255, 255, 255, 0.60); }
.dbx-submit-note a { color: #C4B5FD; text-decoration: none; }
.dbx-terms .control-label { font-weight: 500; }
.dbx-mass-hint { margin: 16px 0 0; font-size: 0.75rem; color: rgba(255, 255, 255, 0.60); }
.dbx-mass-hint a { color: #C4B5FD; text-decoration: none; }
.dbx-mass-hint a:hover { text-decoration: underline; }
.dbx-rail { display: flex; flex-direction: column; gap: 16px; }
.dbx-rail-card, .dbx-notice { padding: 24px; }
.dbx-rail-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #C4B5FD;
margin-bottom: 13px;
}
.dbx-rail-title::after { content: ""; flex: 1; height: 1px; background: rgba(167, 139, 250, 0.16); }
.dbx-rail-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.dbx-rail-tab {
flex: 1;
height: 40px;
border-radius: 12px;
background: #14093A;
border: 1px solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.72);
font-family: inherit;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx-rail-tab:hover { border-color: rgba(167, 139, 250, 0.32); color: #fff; }
.dbx-rail-tab:focus-visible { outline: 2px solid #A78BFA; outline-offset: 2px; }
.dbx-rail-tab.is-on {
background: linear-gradient(180deg, #2F1A6E, #251357);
border-color: #A78BFA;
color: #fff;
box-shadow: inset 0 1px 0 rgba(196, 181, 253, 0.3);
}
.dbx-rail-pane { display: none; }
.dbx-rail-pane.is-on { display: block; }
.dbx-rail-empty { font-size: 0.8125rem; line-height: 1.6; color: rgba(255, 255, 255, 0.60); margin: 0; }
.dbx #service_description .control-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #C4B5FD; margin-bottom: 10px; display: block; }
.dbx #service_description .panel-body.border-solid.border-rounded {
background: #14093A;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 12px;
padding: 14px 16px;
font-size: 0.8125rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.72);
}
.dbx-rules { list-style: none; counter-reset: dbxrule; margin: 0; padding: 0; }
.dbx-rules li {
position: relative;
padding: 0 0 14px 34px;
font-size: 0.8125rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.72);
counter-increment: dbxrule;
}
.dbx-rules li::before {
content: counter(dbxrule);
position: absolute;
left: 0;
top: 0;
width: 22px;
height: 22px;
border-radius: 999px;
background: rgba(167, 139, 250, 0.10);
border: 1px solid rgba(167, 139, 250, 0.16);
color: #C4B5FD;
font-size: 0.6875rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dbx-rules li strong { color: #fff; }
.dbx-rules li:last-child { padding-bottom: 0; }
.dbx-notice { background: rgba(167, 139, 250, 0.08); border-color: rgba(167, 139, 250, 0.16); }
.dbx-notice-text { font-size: 0.8125rem; line-height: 1.6; color: rgba(255, 255, 255, 0.72); margin: 0 0 14px; }
.dbx-notice-text { margin-bottom: 0; }
.dbx-notice-text strong { color: #fff; }
.dbx-notes-well { margin-top: 22px; padding: 24px; }
@media (max-width: 1380px) {
.dbx-content { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (max-width: 1280px) {
.dbx-content { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.dbx-order-card, .dbx-rail-card, .dbx-notice { padding: 18px; }
.dbx-chips { gap: 6px; }
.dbx #order-form .form-control { font-size: 1rem; height: 48px; }
.dbx-oc-tab { flex: 1 1 calc(50% - 7px); justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.dbx-card,
.dbx-chip,
.dbx-oc-tab,
.dbx-rail-tab,
.dbx-cta-link,
.dbx #order-form .btn.btn-primary { transition: none; }
.dbx #order-form .btn.btn-primary::after { display: none; }
}
.dbx #service_description:not(.hidden) ~ .dbx-rail-empty { display: none; }
.dbx-chip.is-empty { opacity: 0.4; cursor: default; }
.dbx-chip.is-empty:hover { transform: none; border-color: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.72); background: #14093A; }
.dbx-qty-ux { margin-top: 9px; }
.dbx-qty-presets { display: flex; flex-wrap: wrap; gap: 7px; }
.dbx-qty-preset {
height: 32px;
padding: 0 13px;
border-radius: 999px;
background: rgba(8, 4, 26, 0.45);
border: 1px solid rgba(167, 139, 250, 0.16);
color: rgba(255, 255, 255, 0.72);
font-family: inherit;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx-qty-preset:hover { border-color: rgba(167, 139, 250, 0.32); color: #fff; background: rgba(167, 139, 250, 0.10); }
.dbx-qty-preset.is-on { background: rgba(167, 139, 250, 0.16); border-color: #A78BFA; color: #fff; }
.dbx-linkwarn {
margin-top: 9px;
padding: 10px 13px;
border-radius: 10px;
background: rgba(250, 202, 51, 0.07);
border: 1px solid rgba(250, 202, 51, 0.3);
font-size: 0.78125rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.72);
}
.dbx-linkwarn strong { color: #fff; }
.dbx #order-form .form-control {
height: 44px;
font-size: 0.8125rem;
padding-top: 0;
padding-bottom: 0;
}
.dbx .select2-container { width: 100% !important; }
.dbx .select2-container--default .select2-selection--single,
.dbx .select2-container .select2-selection--single {
background-color: #14093A;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 12px;
outline: none;
}
.dbx .select2-container .select2-selection--single .select2-selection__rendered {
color: #fff;
font-size: 0.8125rem;
}
.dbx .select2-container .select2-selection--single .select2-selection__arrow {
right: 10px;
}
.dbx .select2-container .select2-selection--single .select2-selection__arrow b { border-color: #A78BFA transparent transparent transparent; }
.dbx .select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #A78BFA transparent; }
.dbx .select2-container--focus .select2-selection--single,
.dbx .select2-container--open .select2-selection--single {
border-color: rgba(167, 139, 250, 0.5);
box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.14);
}
.select2-container--open .select2-dropdown {
background-color: #0E0729;
border: 1px solid rgba(167, 139, 250, 0.32);
border-radius: 12px;
overflow: hidden;
font-size: 0.8125rem;
z-index: 10060;
}
.select2-container--open .select2-search--dropdown { padding: 8px; }
.select2-container--open .select2-search--dropdown .select2-search__field {
background-color: #14093A;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 10px;
color: #fff;
height: 36px;
padding: 0 12px;
font-size: 0.8125rem;
outline: none;
}
.select2-container--open .select2-results > .select2-results__options { max-height: 320px; }
.dbx-content { grid-template-columns: minmax(0, 1fr) 500px; }
@media (max-width: 1500px) {
.dbx-content { grid-template-columns: minmax(0, 1fr) 440px; }
}
@media (max-width: 1380px) {
.dbx-content { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (max-width: 1280px) {
.dbx-content { grid-template-columns: 1fr; }
}
.dbx-content { grid-template-columns: minmax(0, 880px) minmax(480px, 1fr); }
@media (max-width: 1500px) {
.dbx-content { grid-template-columns: minmax(0, 1fr) 440px; }
}
@media (max-width: 1380px) {
.dbx-content { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (max-width: 1280px) {
.dbx-content { grid-template-columns: 1fr; }
}
.dbx-total { display: inline-flex; align-items: baseline; gap: 8px; }
.dbx-total-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.60); }
.dbx-total-val { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: #FACA33; white-space: nowrap; }
.dbx-content { grid-template-columns: minmax(0, 2fr) minmax(400px, 1fr); }
@media (max-width: 1500px) {
.dbx-content { grid-template-columns: minmax(0, 1fr) 440px; }
}
@media (max-width: 1380px) {
.dbx-content { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (max-width: 1280px) {
.dbx-content { grid-template-columns: 1fr; }
}
.dbx #order-form #charge,
.dbx #order-form label[for="charge"] { display: none; }
.dbx-submit-row {
flex-wrap: wrap;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(167, 139, 250, 0.14);
}
.dbx-submit-row .dbx-total { order: 2; margin-inline-start: 4px; }
.dbx-total-val { font-size: 1.375rem; font-weight: 700; }
.dbx-submit-note {
order: 3;
flex-basis: 100%;
margin-top: 10px;
font-size: 0.71875rem;
color: rgba(255, 255, 255, 0.5);
}
.select2-container--open .select2-dropdown {
background-color: #14093A;
border: 1px solid rgba(167, 139, 250, 0.25);
border-radius: 12px;
box-shadow: 0 18px 44px rgba(5, 2, 16, 0.6);
overflow: hidden;
}
.select2-container--open .select2-dropdown--above,
.select2-container--open .select2-dropdown--below { border-color: rgba(167, 139, 250, 0.25); }
.select2-container--open .select2-results__group {
color: #C4B5FD;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 10px 14px 6px;
}
.select2-container--open .select2-search--dropdown {
padding: 8px;
background-color: #14093A;
border-bottom: 1px solid rgba(167, 139, 250, 0.14);
}
.select2-container--open .select2-search--dropdown .select2-search__field {
background-color: rgba(8, 4, 26, 0.45);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 10px;
color: #fff;
height: 36px;
padding: 0 12px;
font-size: 0.8125rem;
outline: none;
}
.select2-container--open .select2-search--dropdown .select2-search__field:focus {
border-color: rgba(167, 139, 250, 0.5);
box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.14);
}
.select2-container--open .select2-results > .select2-results__options {
max-height: 320px;
scrollbar-width: thin;
scrollbar-color: rgba(167, 139, 250, 0.35) transparent;
}
.select2-container--open .select2-results > .select2-results__options::-webkit-scrollbar { width: 8px; }
.select2-container--open .select2-results > .select2-results__options::-webkit-scrollbar-track { background: transparent; }
.select2-container--open .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
background: rgba(167, 139, 250, 0.35);
border-radius: 999px;
}
.dbx #order-form .alert-success.dbx-ok {
background: #120A33;
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: inset 3px 0 0 #10B981;
border-radius: 14px;
padding: 18px 20px;
color: rgba(255, 255, 255, 0.85);
text-shadow: none;
}
.dbx-ok .dbx-ok-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9375rem;
font-weight: 700;
color: #fff;
margin: 0 0 14px;
}
.dbx-ok .dbx-ok-title::before {
content: "\2713";
flex: none;
width: 24px;
height: 24px;
border-radius: 999px;
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.4);
color: #10B981;
font-size: 0.75rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dbx-ok .dbx-ok-rows { display: grid; gap: 7px; }
.dbx-ok .dbx-ok-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
font-size: 0.8125rem;
}
.dbx-ok .dbx-ok-label { color: rgba(255, 255, 255, 0.55); flex: none; }
.dbx-ok .dbx-ok-val { color: #fff; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.dbx-ok .dbx-ok-money .dbx-ok-val { color: #FACA33; font-weight: 700; }
.dbx-ok .close {
color: rgba(255, 255, 255, 0.6);
opacity: 1;
text-shadow: none;
font-size: 1.125rem;
}
.dbx-ok .close:hover { color: #fff; opacity: 1; }
.dbx #order-form #dripfeed .form-group__checkbox {
display: flex;
align-items: center;
gap: 10px;
margin: 4px 0 12px;
}
.dbx #order-form #dripfeed .form-group__checkbox-label {
position: relative;
display: inline-flex;
margin: 0;
cursor: pointer;
}
.dbx #order-form #dripfeed input[type="checkbox"] {
position: absolute;
inset: 0;
width: 20px;
height: 20px;
margin: 0;
opacity: 0;
cursor: pointer;
}
.dbx #order-form #dripfeed .checkmark {
width: 20px;
height: 20px;
border-radius: 6px;
background: #14093A;
border: 1px solid rgba(255, 255, 255, 0.12);
display: inline-block;
position: relative;
transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx #order-form #dripfeed input[type="checkbox"]:checked + .checkmark {
background: #FACA33;
border-color: #FACA33;
}
.dbx #order-form #dripfeed input[type="checkbox"]:checked + .checkmark::after {
content: "";
position: absolute;
left: 6.5px;
top: 3px;
width: 5px;
height: 10px;
border: solid #150B3D;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.dbx #order-form #dripfeed input[type="checkbox"]:focus-visible + .checkmark {
outline: 2px solid #A78BFA;
outline-offset: 2px;
}
.dbx #order-form #dripfeed .form-group__label-title {
font-size: 0.8125rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
margin: 0;
cursor: pointer;
}
.dbx #order-form #dripfeed-options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
background: rgba(167, 139, 250, 0.06);
border: 1px solid rgba(167, 139, 250, 0.14);
border-radius: 12px;
padding: 16px;
margin-top: 4px;
}
.dbx #order-form #dripfeed-options .form-group { margin-bottom: 0; }
.dbx #order-form #dripfeed-options .control-label {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 899px) {
.dbx #order-form #dripfeed-options { grid-template-columns: 1fr; }
}
body.dbx-on .select2-dropdown { background: #14093A !important; }
body.dbx-on .select2-results__options { background: transparent !important; }
.dbx-linkx {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 13px 14px;
margin-bottom: 16px;
background: #14093A;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
box-shadow: inset 2px 0 0 rgba(167, 139, 250, 0.55);
}
.dbx-linkx.is-hidden { display: none; }
.dbx-linkx-ic {
flex: none;
width: 30px;
height: 30px;
border-radius: 9px;
background: rgba(167, 139, 250, 0.14);
border: 1px solid rgba(167, 139, 250, 0.25);
display: inline-flex;
align-items: center;
justify-content: center;
}
.dbx-linkx-ic svg { width: 14px; height: 14px; stroke: #C4B5FD; }
.dbx-linkx-body { min-width: 0; }
.dbx-linkx-label {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 3px;
}
.dbx-linkx-val { font-size: 0.8125rem; font-weight: 600; color: #fff; line-height: 1.4; overflow-wrap: anywhere; }
.dbx-linkx-val a { color: #C4B5FD; text-decoration: none; word-break: break-all; font-weight: 500; }
.dbx-linkx-val a:hover { text-decoration: underline; }
.dbx .dbx-linkwarn ~ .dbx-linkwarn { display: none !important; }
.dbx-crumb {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(167, 139, 250, 0.12);
border: 1px solid rgba(167, 139, 250, 0.16);
font-size: 0.75rem;
max-width: 100%;
}
.dbx-crumb-pre { color: rgba(255, 255, 255, 0.6); white-space: nowrap; }
.dbx-crumb-page { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbx-chat {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 13px;
border-radius: 999px;
background: rgba(31, 18, 72, 0.5);
border: 1px solid rgba(167, 139, 250, 0.16);
color: rgba(255, 255, 255, 0.85);
font-size: 0.75rem;
font-weight: 600;
text-decoration: none;
transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx-chat img { width: 15px; height: 15px; flex: none; }
.dbx-chat:hover { border-color: rgba(167, 139, 250, 0.32); color: #fff; transform: translateY(-1px); text-decoration: none; }
.dbx-chat:focus-visible { outline: 2px solid #A78BFA; outline-offset: 2px; }
@media (max-width: 1280px) {
.dbx-chat { padding: 0 10px; }
.dbx-chat .dbx-chat-label { display: none; }
}
@media (max-width: 900px) {
.dbx-chat { display: none; }
}
.dbx-strip {
display: flex;
align-items: center;
gap: 8px;
margin-inline-start: auto;
min-width: 0;
}
.dbx-strip-copy {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.55);
white-space: nowrap;
margin-inline-end: 4px;
}
.dbx-strip-copy strong { color: #fff; font-weight: 500; }
@media (max-width: 1500px) {
.dbx-strip-copy { display: none; }
}
@media (max-width: 900px) {
.dbx-strip { display: none; }
}
body.dbx-on .search-dropdown .input-wrapper .form-control,
body.dbx-on .search-dropdown .select2-selection--single,
.dbx .search-dropdown .input-wrapper .form-control {
padding-left: 42px !important;
padding-inline-start: 42px !important;
}
.dbx .search-dropdown .input-wrapper { position: relative; }
.dbx .search-dropdown .input-wrapper .input-wrapper__prepend,
body.dbx-on .search-dropdown .input-wrapper__prepend {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
}
.dbx .search-dropdown .fa-search { color: #A78BFA; font-size: 14px; }
html[dir="rtl"] body.dbx-on .search-dropdown .input-wrapper .form-control,
html[dir="rtl"] .dbx .search-dropdown .input-wrapper .form-control {
padding-left: 14px !important;
padding-right: 42px !important;
}
html[dir="rtl"] .dbx .search-dropdown .input-wrapper .input-wrapper__prepend {
left: auto;
right: 12px;
}
.dbx-mode-fav .dbx-chips,
.dbx-mode-fav .dbx-grp-search,
.dbx-mode-fav .dbx-grp-category { display: none; }
.dbx-fav-note { display: none; font-size: 0.78125rem; color: rgba(255, 255, 255, 0.6); margin: 0 0 10px; }
.dbx-mode-fav .dbx-fav-note { display: block; }
.dbx .dbx-mass-ta {
height: auto !important;
min-height: 170px;
padding: 12px 14px !important;
line-height: 1.6;
resize: vertical;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.8125rem !important;
}
.dbx #dbx-mass-form .btn.btn-primary {
height: 48px;
padding: 0 28px;
border: none;
border-radius: 10px;
background: #FACA33;
color: #150B3D;
font-size: 0.9375rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.dbx #dbx-mass-form .btn.btn-primary:hover:not([disabled]) { background: #FACA33; color: #150B3D; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(250, 202, 51, 0.25); }
.dbx #dbx-mass-form .btn.btn-primary[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.dbx-mode-subs .dbx-chips,
.dbx-mode-subs .dbx-grp-search { display: none; }
.dbx-subs-note { display: none; font-size: 0.78125rem; color: rgba(255, 255, 255, 0.6); margin: 0 0 10px; }
.dbx-subs-note a { color: #C4B5FD; text-decoration: none; }
.dbx-subs-note a:hover { text-decoration: underline; }
.dbx-mode-subs .dbx-subs-note { display: block; }
.dbx-search-empty { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); margin: 6px 0 0; }
.dbx { background-color: #0D0726; }
.dbx .dbx-card {
background: #1A1040;
border: 1px solid rgba(167, 139, 250, 0.26);
}
.dbx #order-form .form-control,
.dbx #order-form select.form-control,
.dbx #dbx-mass-form .form-control,
.dbx .select2-container .select2-selection--single,
.dbx .select2-container--default .select2-selection--single {
background-color: #0E0729;
border-color: rgba(167, 139, 250, 0.26);
}
.dbx .dbx-chip {
background: #0E0729;
border-color: rgba(167, 139, 250, 0.26);
}
.dbx .dbx-chip.is-on {
background: linear-gradient(180deg, #2F1A6E, #251357);
border-color: #A78BFA;
}
.dbx #order-form .form-control:focus,
.dbx #dbx-mass-form .form-control:focus,
.dbx .search-dropdown input:focus,
.dbx .select2-container--focus .select2-selection--single,
.dbx .select2-container--open .select2-selection--single {
outline: none;
border-color: #A78BFA;
box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.5);
}
.dbx .dbx-user-chip .badge.badge-purple {
color: #FACA33;
background: rgba(250, 202, 51, 0.10);
}
.dbx-main { font-size: 0.8125rem; }
.dbx-submit-note { font-size: 0.75rem; }
.dbx .dbx-terms .control-label {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.65);
}
.dbx .dbx-terms .control-label a { color: #C4B5FD; }
.dbx .dbx-card {
transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx .dbx-card:hover {
transform: translateY(-1px);
box-shadow: 0 10px 26px rgba(5, 2, 16, 0.45), inset 0 1px 0 rgba(196, 181, 253, 0.10);
}
@media (prefers-reduced-motion: reduce) {
.dbx .dbx-card { transition: none; }
.dbx .dbx-card:hover { transform: none; }
}
.dbx .dbx-capsule {
display: inline-flex;
align-items: stretch;
border-radius: 10px;
overflow: hidden;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx .dbx-capsule:hover {
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(250, 202, 51, 0.22);
}
.dbx .dbx-capsule .btn.btn-primary {
border-radius: 0;
height: 48px;
}
.dbx .dbx-capsule .btn.btn-primary:hover {
transform: none;
box-shadow: none;
}
.dbx-capsule-total {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 1px;
min-width: 92px;
height: 48px;
padding: 0 16px;
background: #0E0729;
border: 1px solid rgba(167, 139, 250, 0.26);
border-left: 1px solid rgba(167, 139, 250, 0.4);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
cursor: pointer;
user-select: none;
}
.dbx-capsule-label {
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
line-height: 1;
}
.dbx-capsule-val {
font-size: 0.9375rem;
font-weight: 700;
color: #FACA33;
line-height: 1.2;
white-space: nowrap;
}
.dbx-capsule-total.is-zero .dbx-capsule-val { color: rgba(255, 255, 255, 0.45); }
@media (prefers-reduced-motion: reduce) {
.dbx .dbx-capsule { transition: none; }
.dbx .dbx-capsule:hover { transform: none; }
}
.dbx .dbx-user-chip .dropdown-menu li > a[href=""] { display: none; }
.dbx .dbx-user-chip .dropdown-menu li:has(> a[href=""]) { display: none; }
.dbx-step { padding: 22px 0 24px; border-bottom: 1px solid rgba(167, 139, 250, 0.14); }
.dbx-step:last-of-type { border-bottom: none; padding-bottom: 0; }
#dbx-step1 { padding-top: 4px; }
.dbx-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.dbx-step-num {
width: 22px;
height: 22px;
border-radius: 7px;
background: rgba(167, 139, 250, 0.16);
border: 1px solid rgba(167, 139, 250, 0.26);
color: #C4B5FD;
font-size: 0.75rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
}
.dbx-step-label { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: #A78BFA; font-weight: 700; }
.dbx-step-title { font-size: 0.9375rem; font-weight: 700; color: #fff; margin-left: 2px; }
.dbx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dbx-grid2 .form-group { margin-bottom: 0; }
.dbx-row34 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.dbx-checkout-card {
position: relative;
overflow: hidden;
background: #0E0729;
border: 1px solid rgba(167, 139, 250, 0.26);
border-radius: 14px;
padding: 20px;
}
.dbx-checkout-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, #FACA33, rgba(250, 202, 51, 0));
}
.dbx-co-label { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: #A78BFA; font-weight: 700; margin-bottom: 10px; }
.dbx-co-amount { font-size: 2rem; font-weight: 800; color: #FACA33; letter-spacing: -0.01em; line-height: 1; }
.dbx-co-amount.is-zero { color: rgba(255, 255, 255, 0.45); }
.dbx-co-lines { margin: 16px 0 18px; }
.dbx-co-line {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.55);
padding: 9px 0;
border-bottom: 1px solid rgba(167, 139, 250, 0.14);
}
.dbx-co-line b {
color: #EDE9FE;
font-weight: 600;
max-width: 60%;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dbx .dbx-checkout-card .btn.btn-primary { width: 100%; height: 48px; border-radius: 10px; }
.dbx-co-terms { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.55); margin-top: 12px; text-align: center; }
.dbx-co-terms a { color: #C4B5FD; text-decoration: none; }
.dbx-co-terms a:hover { text-decoration: underline; }
.dbx-mode-fav #dbx-step1,
.dbx-mode-subs #dbx-step1 { display: none; }
.dbx-mode-fav .dbx-step-num,
.dbx-mode-subs .dbx-step-num { display: none; }
@media (max-width: 900px) {
.dbx-row34 { grid-template-columns: 1fr; }
.dbx-grid2 { grid-template-columns: 1fr; }
}
.dbx-step2-grid { display: grid; grid-template-columns: 3fr 7fr; gap: 14px; }
.dbx-step2-grid .form-group { margin-bottom: 0; }
.dbx-step2-grid .dbx-grp-service { grid-column: 1 / -1; }
@media (max-width: 900px) {
.dbx-step2-grid { grid-template-columns: 1fr; }
}
.dbx::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(900px 600px at 10% -8%, rgba(109, 40, 217, 0.16), transparent 60%),
radial-gradient(440px 440px at 97% 97%, rgba(109, 40, 217, 0.12), transparent 70%);
}
.dbx-sidebar, .dbx-main { position: relative; z-index: 1; }
.dbx .dbx-card,
.dbx .dbx-checkout-card {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.dbx .dbx-card:hover {
box-shadow: 0 10px 26px rgba(5, 2, 16, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.dbx-co-amount:not(.is-zero) { text-shadow: 0 0 24px rgba(250, 202, 51, 0.25); }
.dbx .dbx-checkout-card .btn.btn-primary { position: relative; overflow: hidden; }
@keyframes dbxEnter {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.dbx .dbx-order-card { animation: dbxEnter 0.3s cubic-bezier(0.16, 1, 0.3, 1) 40ms both; }
.dbx .dbx-rail { animation: dbxEnter 0.3s cubic-bezier(0.16, 1, 0.3, 1) 80ms both; }
.dbx .dbx-chip.is-on {
box-shadow: 0 0 0 1px #A78BFA, 0 4px 14px rgba(109, 40, 217, 0.35);
}
@keyframes dbxPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
.dbx .dbx-svc-loading .select2-selection--single { animation: dbxPulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.dbx .dbx-order-card,
.dbx .dbx-rail { animation: none; }
.dbx .dbx-svc-loading .select2-selection--single { animation: none; opacity: 1; }
.dbx-co-amount:not(.is-zero) { text-shadow: none; }
}
.dbx { background-color: #0C0626; }
.dbx::before {
background:
radial-gradient(900px 520px at 12% -8%, rgba(109, 40, 217, 0.32), transparent 60%),
radial-gradient(700px 480px at 95% 100%, rgba(196, 181, 253, 0.08), transparent 60%);
}
.dbx .dbx-card {
position: relative;
background: #1B1045;
background: linear-gradient(180deg, #221453, #170D3D);
border: 1px solid rgba(167, 139, 250, 0.32);
box-shadow: 0 30px 80px rgba(9, 3, 30, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.dbx .dbx-card { border-radius: 26px; }
.dbx .dbx-order-card,
.dbx .dbx-rail-card,
.dbx .dbx-notice { padding: 30px; }
.dbx .dbx-card:hover {
box-shadow: 0 30px 80px rgba(9, 3, 30, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.dbx .dbx-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
pointer-events: none;
background: linear-gradient(135deg, rgba(196, 181, 253, 0.55), rgba(109, 40, 217, 0.15));
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.dbx .dbx-step-num {
background: linear-gradient(135deg, #C4B5FD, #A78BFA);
border: none;
border-radius: 8px;
color: #150B3D;
font-weight: 800;
}
.dbx .dbx-step-title { font-weight: 800; }
.dbx .dbx-step-label,
.dbx .dbx-co-label,
.dbx .dbx-rail-title { letter-spacing: 0.1em; }
.dbx .dbx-checkout-card {
background: linear-gradient(180deg, #13092F, #0E0625);
border-radius: 16px;
box-shadow: 0 30px 70px rgba(9, 3, 30, 0.8), 0 0 0 1px rgba(250, 202, 51, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.dbx .dbx-co-amount { font-size: 2.125rem; }
.dbx { background-color: #08041A; }
.dbx::before {
background:
radial-gradient(900px 520px at 12% -8%, rgba(109, 40, 217, 0.38), transparent 60%),
radial-gradient(700px 480px at 95% 100%, rgba(196, 181, 253, 0.10), transparent 60%);
}
.dbx #order-form .form-control,
.dbx #order-form select.form-control,
.dbx #dbx-mass-form .form-control,
.dbx .select2-container .select2-selection--single,
.dbx .select2-container--default .select2-selection--single {
background-color: #0A0420;
border-color: rgba(167, 139, 250, 0.22);
}
.dbx .dbx-chip {
background: #0A0420;
border-color: rgba(167, 139, 250, 0.22);
}
.dbx .dbx-qty-preset {
background: #0A0420;
border-color: rgba(167, 139, 250, 0.22);
}
.dbx .dbx-step-num {
background: #FACA33;
color: #150B3D;
}
.dbx .dbx-chip.is-on {
border-color: #FACA33;
box-shadow: 0 0 0 1px rgba(250, 202, 51, 0.35), 0 4px 14px rgba(250, 202, 51, 0.22);
}
.dbx .dbx-oc-tab.is-on {
box-shadow: inset 0 -2px 0 #FACA33, inset 0 1px 0 rgba(196, 181, 253, 0.3);
}
.dbx-fav-note { white-space: nowrap; }
.dbx-fav-note a { color: #C4B5FD; text-decoration: none; }
.dbx-fav-note a:hover { text-decoration: underline; }
.dbx-mode-subs .dbx-step2-grid { grid-template-columns: 1fr; }
.dbx-subs-note { white-space: nowrap; }
.dbx-pill > .dropdown-toggle { height: 36px; border-color: rgba(167, 139, 250, 0.22); }
.dbx-chat { height: 36px; border-color: rgba(167, 139, 250, 0.22); font-size: 0.8125rem; gap: 8px; padding: 0 12px 0 8px; }
.dbx-strip { gap: 10px; }
.dbx-strip-copy { font-size: 0.8125rem; font-weight: 500; color: rgba(237, 233, 254, 0.52); margin-inline-end: 8px; }
.dbx-strip-copy strong { color: #EDE9FE; font-weight: 600; }
.dbx-chat-ic {
flex: none;
width: 22px;
height: 22px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dbx-chat-ic img { width: 14px; height: 14px; display: block; }
.dbx-chat-ic-wa { background: rgba(37, 211, 102, 0.15); }
.dbx-chat-ic-tg { background: rgba(41, 171, 226, 0.15); }
.dbx-rail-tabs {
gap: 4px;
padding: 4px;
background: #0A0420;
border: 1px solid rgba(167, 139, 250, 0.22);
border-radius: 14px;
}
.dbx-rail-tab { height: 36px; border-radius: 10px; background: transparent; border: none; }
.dbx-linkx-ic { background: rgba(250, 202, 51, 0.12); border-color: rgba(250, 202, 51, 0.25); }
.dbx-linkx-ic svg { stroke: #FACA33; }
.dbx #service_description .control-label {
font-size: 0.625rem;
letter-spacing: 0.1em;
font-weight: 700;
color: #A78BFA;
padding-bottom: 10px;
border-bottom: 1px solid rgba(167, 139, 250, 0.16);
margin-bottom: 12px;
}
.dbx #service_description .panel-body.border-solid.border-rounded {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
line-height: 1.65;
max-height: 520px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(167, 139, 250, 0.35) transparent;
}
.dbx #service_description .panel-body::-webkit-scrollbar { width: 6px; }
.dbx #service_description .panel-body::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, 0.3); border-radius: 999px; }
.dbx #service_description .panel-body::-webkit-scrollbar-track { background: transparent; }
.dbx-linkx-label,
.dbx-rail-title {
font-size: 0.625rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
color: #A78BFA;
}
.dbx-co-head { margin-bottom: 14px; }
.dbx .dbx-card::before { content: none; }
.dbx-toggle { width: 44px; height: 44px; right: -38px; top: -7px; padding: 0; }
.dbx-toggle .dbx-toggle-img {
width: 22px;
height: 22px;
display: block;
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx-toggle:hover .dbx-toggle-img { transform: scale(1.05); }
.dbx.is-collapsed .dbx-toggle { transform: none; }
.dbx-toggle { width: 26px; height: 26px; right: -29px; top: 2px; }
.dbx.is-collapsed .dbx-toggle { transform: rotate(180deg); }
.dbx.is-collapsed .dbx-logo-mark { padding: 7px; }
.dbx-rail-tabs {
gap: 10px;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
justify-content: flex-start;
}
.dbx-rail-tab {
flex: 0 0 auto;
height: 40px;
padding: 0 16px;
border-radius: 12px;
background: #14093A;
border: 1px solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.72);
font-size: 0.8125rem;
font-weight: 600;
}
.dbx-rail-tab:hover { border-color: rgba(167, 139, 250, 0.32); color: #fff; }
.dbx-rail-tab.is-on {
background: linear-gradient(180deg, #2F1A6E, #251357);
border-color: #A78BFA;
color: #fff;
box-shadow: inset 0 -2px 0 #FACA33, inset 0 1px 0 rgba(196, 181, 253, 0.3);
}
.dbx-co-head { margin-bottom: 0; }
.dbx-checkout-card .dbx-co-amount { margin-top: 14px; }
.dbx-strip {
gap: 14px;
height: 44px;
padding: 0 10px 0 18px;
border-radius: 12px;
background: #0A0420;
border: 1px solid rgba(250, 202, 51, 0.3);
position: relative;
overflow: hidden;
}
.dbx-strip::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(105deg, transparent 30%, rgba(250, 202, 51, 0.12) 50%, transparent 70%);
animation: dbxSweep 3.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes dbxSweep {
0% { transform: translateX(-100%); }
60%, 100% { transform: translateX(100%); }
}
.dbx-strip-copy { font-size: 0.8125rem; font-weight: 600; color: #EDE9FE; margin-inline-end: 0; }
.dbx-strip-y { color: #FACA33; font-weight: 600; }
.dbx-chat { height: 30px; padding: 0 11px 0 5px; }
.dbx-chat-ic { width: 20px; height: 20px; }
@media (max-width: 1500px) {
.dbx-strip { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
.dbx-strip::before { content: none; }
}
.dbx-avatar svg { width: 13px; height: 13px; display: block; }
body.dbx-on #currencies-list {
min-width: 0 !important;
width: auto !important;
max-width: 120px;
}
body.dbx-on #currencies-list > li > a {
padding: 8px 14px !important;
text-align: left;
white-space: nowrap;
border-radius: 8px;
}
body.dbx-on #currencies-list > li > a:hover { background: rgba(167, 139, 250, 0.14); color: #fff; }
body.dbx-on #currencies-list > li.active > a { background: rgba(109, 40, 217, 0.45); color: #fff; }
body.dbx-on .dbx-opt-id {
font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
font-size: 0.625rem;
font-weight: 600;
color: #C4B5FD;
flex: none;
}
body.dbx-on .dbx-opt-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.dbx-on .dbx-opt-tags { display: flex; gap: 5px; flex: none; }
body.dbx-on .dbx-opt-tag {
font-size: 0.625rem;
font-weight: 600;
color: #C4B5FD;
background: rgba(167, 139, 250, 0.1);
border-radius: 4px;
padding: 2px 7px;
white-space: nowrap;
}
body.dbx-on .dbx-opt-price {
font-weight: 700;
color: #FACA33;
font-size: 0.75rem;
flex: none;
min-width: 80px;
text-align: right;
}
body.dbx-on .dbx .select2-selection__rendered .badge,
body.dbx-on .dbx .select2-selection__rendered .label,
body.dbx-on .dbx .select2-selection__rendered strong {
font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
font-size: 0.625rem;
font-weight: 600;
color: #C4B5FD;
background: rgba(167, 139, 250, 0.12);
border: 1px solid rgba(167, 139, 250, 0.25);
border-radius: 5px;
padding: 2px 6px;
display: inline-block;
line-height: 1.2;
}
body.dbx-on .dbx-opt-price {
display: inline;
flex: none;
min-width: 0;
font-size: inherit;
font-family: inherit;
text-align: inherit;
font-weight: 700;
color: #FACA33;
}
body.dbx-on .dbx-ntc {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px !important;
border-radius: 14px !important;
font-size: 0.8125rem !important;
margin-bottom: 18px;
color: #EDE9FE !important;
text-shadow: none !important;
box-shadow: none !important;
}
body.dbx-on .dbx-ntc.is-ok {
background: linear-gradient(90deg, rgba(52, 211, 153, 0.1), rgba(52, 211, 153, 0.02)) !important;
border: 1px solid rgba(52, 211, 153, 0.35) !important;
}
body.dbx-on .dbx-ntc.is-err {
background: linear-gradient(90deg, rgba(248, 113, 113, 0.12), rgba(248, 113, 113, 0.02)) !important;
border: 1px solid rgba(248, 113, 113, 0.4) !important;
}
body.dbx-on .dbx-ntc.is-info {
background: linear-gradient(90deg, rgba(167, 139, 250, 0.12), rgba(167, 139, 250, 0.02)) !important;
border: 1px solid rgba(167, 139, 250, 0.35) !important;
}
body.dbx-on .dbx-ntc-ic {
flex: none;
width: 26px;
height: 26px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 800;
font-style: normal;
}
body.dbx-on .dbx-ntc.is-ok .dbx-ntc-ic { background: rgba(52, 211, 153, 0.15); border: 1px solid rgba(52, 211, 153, 0.5); color: #34D399; }
body.dbx-on .dbx-ntc.is-err .dbx-ntc-ic { background: rgba(248, 113, 113, 0.15); border: 1px solid rgba(248, 113, 113, 0.5); color: #F87171; }
body.dbx-on .dbx-ntc.is-info .dbx-ntc-ic { background: rgba(167, 139, 250, 0.15); border: 1px solid rgba(167, 139, 250, 0.5); color: #C4B5FD; }
body.dbx-on .dbx-ntc-title { font-weight: 700; color: #fff; white-space: nowrap; flex: none; }
body.dbx-on .dbx-ntc-detail {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgba(237, 233, 254, 0.52);
}
body.dbx-on .dbx-ntc-detail .dbx-ntc-money { color: #FACA33; font-weight: 700; }
body.dbx-on .dbx-ntc-act {
flex: none;
background: none;
border: none;
padding: 0;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 600;
color: #C4B5FD;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
body.dbx-on .dbx-ntc-act:hover { color: #fff; text-decoration: none; }
body.dbx-on .dbx-ntc.is-err .dbx-ntc-act { color: #FACA33; font-weight: 700; }
body.dbx-on .dbx-ntc-x {
flex: none;
background: none;
border: none;
padding: 0 2px;
color: rgba(237, 233, 254, 0.45);
font-size: 0.75rem;
line-height: 1;
cursor: pointer;
}
body.dbx-on .dbx-ntc-x:hover { color: #fff; }
.dbx #service_description .panel-body.border-solid.border-rounded {
max-height: none;
overflow: visible;
}
.dbx-railupd-row { padding: 10px 0; border-bottom: 1px solid rgba(167, 139, 250, 0.1); }
.dbx-railupd-row:last-child { border-bottom: none; }
.dbx-railupd-date { font-size: 0.6875rem; color: rgba(237, 233, 254, 0.45); margin-bottom: 2px; }
.dbx-railupd-name {
font-size: 0.8125rem;
font-weight: 600;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dbx-railupd-sum { font-size: 0.75rem; color: rgba(237, 233, 254, 0.52); margin-top: 2px; line-height: 1.5; }
.dbx-railupd-sum .dbx-railupd-money { color: #FACA33; font-weight: 700; }
.dbx-railupd-all {
display: block;
padding-top: 12px;
color: #C4B5FD;
font-size: 0.8125rem;
font-weight: 600;
text-decoration: none;
}
.dbx-railupd-all:hover { color: #fff; text-decoration: none; }
.dbx-railupd-err { font-size: 0.75rem; color: rgba(237, 233, 254, 0.52); margin: 0; }
.dbx-railupd-loading { animation: dbxPulse 1s ease-in-out infinite; }
.dbx-railupd-loading::before { content: "Loading updates..."; font-size: 0.75rem; color: rgba(237, 233, 254, 0.52); }
@media (prefers-reduced-motion: reduce) {
.dbx-railupd-loading { animation: none; }
}
body.dbx-on .select2-results__options li > a {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
color: inherit !important;
display: block;
}
body.dbx-on .select2-results__options.dropdown-menu > .active > a,
body.dbx-on .select2-results__options li.active > a,
body.dbx-on .select2-results__options li > a:hover,
body.dbx-on .select2-results__options li > a:focus {
background: transparent !important;
color: inherit !important;
}
body.dbx-on .select2-dropdown,
body.dbx-on .select2-container--open .select2-dropdown {
background: #0C0626 !important;
border: 1px solid rgba(167, 139, 250, 0.2) !important;
border-radius: 14px !important;
box-shadow: 0 28px 70px rgba(4, 2, 14, 0.8) !important;
overflow: hidden;
}
body.dbx-on .select2-results > .select2-results__options {
padding: 8px !important;
}
body.dbx-on .select2-results__option,
body.dbx-on .select2-container--open .select2-results__option {
position: relative;
border-radius: 10px !important;
padding: 9px 12px !important;
margin: 0 0 4px !important;
font-size: 0.8125rem !important;
border: 1px solid transparent !important;
background: rgba(167, 139, 250, 0.04) !important;
color: #EDE9FE !important;
box-shadow: none !important;
}
body.dbx-on .select2-results__option:last-child { margin-bottom: 0 !important; }
body.dbx-on .select2-results__option:hover,
body.dbx-on .select2-container--open .select2-results__option:hover {
border-color: rgba(167, 139, 250, 0.3) !important;
background: rgba(167, 139, 250, 0.08) !important;
}
body.dbx-on .select2-results__option--highlighted,
body.dbx-on .select2-results__option--highlighted[aria-selected],
body.dbx-on .select2-results__option[aria-selected="true"],
body.dbx-on .select2-results__option--selected,
body.dbx-on .select2-container--open .select2-results__option--highlighted,
body.dbx-on .select2-container--open .select2-results__option[aria-selected="true"] {
border-color: #A78BFA !important;
background: rgba(109, 40, 217, 0.16) !important;
box-shadow: 0 0 14px rgba(109, 40, 217, 0.25) !important;
color: #EDE9FE !important;
}
body.dbx-on .select2-results__option[aria-selected="true"],
body.dbx-on .select2-results__option--selected {
padding-right: 32px !important;
}
body.dbx-on .select2-results__option[aria-selected="true"]::after,
body.dbx-on .select2-results__option--selected::after {
content: "\2713";
color: #FACA33;
font-weight: 800;
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
}
.dbx-step2-grid { grid-template-columns: 1fr; }
.dbx-avt {
display: inline-flex;
align-items: center;
gap: 9px;
margin: 12px 0 2px;
padding: 10px 14px;
background: #0A0420;
border: 1px solid rgba(167, 139, 250, 0.22);
border-radius: 10px;
}
.dbx-avt.is-hidden { display: none; }
.dbx-avt-ic { width: 15px; height: 15px; flex: none; }
.dbx-avt-label { font-size: 0.6875rem; color: rgba(237, 233, 254, 0.52); }
.dbx-avt-val { font-size: 0.8125rem; font-weight: 600; color: #EDE9FE; }
.dbx-chips:not(.is-expanded) .dbx-chip[data-tier="2"],
.dbx-chips:not(.is-expanded) .dbx-chip-dyn { display: none; }
@media (max-width: 900px) {
.dbx-chips:not(.is-expanded) .dbx-chip[data-tier="b"] { display: none; }
}
.dbx-chips.is-expanded .dbx-chip-more { display: none; }
.dbx-chips:not(.is-expanded) .dbx-chip-less { display: none; }
.dbx-chip-more,
.dbx-chip-less {
display: inline-flex;
align-items: center;
gap: 7px;
height: 36px;
padding: 0 14px;
border-radius: 12px;
background: transparent;
border: 1px dashed rgba(167, 139, 250, 0.4);
color: #C4B5FD;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx-chip-more:hover,
.dbx-chip-less:hover { border-color: #A78BFA; color: #fff; }
.dbx-chip-more-n { font-size: 0.75rem; font-weight: 500; color: rgba(237, 233, 254, 0.52); }
.dbx-chip-ic-dyn img { width: 14px; height: 14px; display: block; }
.dbx-chip-ic-dyn.is-mono {
width: 16px;
height: 16px;
border-radius: 5px;
background: rgba(167, 139, 250, 0.14);
color: #C4B5FD;
font-size: 0.5625rem;
font-weight: 600;
}
.dbx-chip-dyn-label {
max-width: none;
overflow: visible;
text-overflow: clip;
white-space: nowrap;
}
body.dbx-on .select2-results__option .badge,
body.dbx-on .select2-results__option .label,
body.dbx-on .select2-results__option > a > b:first-child,
body.dbx-on .select2-results__option > a > strong:first-child {
font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
font-size: 0.625rem !important;
font-weight: 600;
line-height: 1.2;
color: #C4B5FD;
background: rgba(167, 139, 250, 0.12);
border: 1px solid rgba(167, 139, 250, 0.25);
border-radius: 5px;
padding: 1px 5px;
vertical-align: 1px;
}
body.dbx-on .select2-results__option .badge,
body.dbx-on .select2-results__option .label,
body.dbx-on .select2-results__option > a > b:first-child,
body.dbx-on .select2-results__option > a > strong:first-child,
body.dbx-on .dbx .select2-selection__rendered .badge,
body.dbx-on .dbx .select2-selection__rendered .label,
body.dbx-on .dbx .select2-selection__rendered strong {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto !important;
min-width: 0 !important;
max-width: none;
text-align: center;
padding: 2px 6px;
}
.dbx #order-form .form-group.dbx-qty-off { display: none !important; }
.dbx #dbx-mass-submit {
background: #FACA33;
border: none;
color: #150B3D;
height: 48px;
padding: 0 24px;
border-radius: 10px;
font-size: 0.9375rem;
font-weight: 700;
transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx #dbx-mass-submit:hover:not(:disabled) { background: #FFD75E; transform: translateY(-1px); color: #150B3D; }
.dbx #dbx-mass-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.dbx #order-form small,
.dbx #fields small,
.dbx #order-form .help-block { font-size: 0.6875rem; }
.dbx-linkwarn,
.dbx-fav-note,
.dbx-subs-note { font-size: 0.75rem; }
.dbx-co-line b { margin-left: auto; }
.dbx #order-form .form-control:focus-visible,
.dbx #order-form textarea:focus-visible,
.dbx #dbx-mass-form .form-control:focus-visible,
.dbx .search-dropdown input:focus-visible,
.dbx .select2-selection--single:focus-visible {
outline: 2px solid #A78BFA !important;
outline-offset: 2px;
}
.dbx-nav-item { position: relative; }
.dbx.is-collapsed .dbx-nav { overflow: visible; }
.dbx.is-collapsed .dbx-nav-item::after {
content: attr(aria-label);
position: absolute;
left: calc(100% + 12px);
top: 50%;
transform: translateY(-50%);
background: #0C0626;
border: 1px solid rgba(167, 139, 250, 0.3);
border-radius: 8px;
padding: 6px 10px;
font-size: 0.75rem;
font-weight: 600;
color: #EDE9FE;
white-space: nowrap;
opacity: 0;
pointer-events: none;
z-index: 60;
box-shadow: 0 8px 24px rgba(4, 2, 14, 0.6);
}
.dbx.is-collapsed .dbx-nav-item:hover::after,
.dbx.is-collapsed .dbx-nav-item:focus-visible::after { opacity: 1; }
.dbx-co-need {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0 0 14px;
background: rgba(248, 113, 113, 0.1);
border: 1px solid rgba(248, 113, 113, 0.35);
border-radius: 10px;
padding: 9px 12px;
font-size: 0.75rem;
}
.dbx-co-need.is-hidden { display: none; }
.dbx-co-need b { color: #F87171; font-weight: 700; }
.dbx-co-need a { color: #FACA33; font-weight: 700; text-decoration: none; white-space: nowrap; }
.dbx-co-need a:hover { color: #FFD75E; text-decoration: none; }
.dbx-checkout-card.is-low .btn.btn-primary {
background: rgba(250, 202, 51, 0.22) !important;
color: rgba(21, 11, 61, 0.55) !important;
box-shadow: none !important;
pointer-events: none;
cursor: not-allowed;
transform: none !important;
}
.dbx-co-trust {
display: flex;
justify-content: center;
gap: 14px;
margin-top: 12px;
font-size: 0.6875rem;
color: rgba(237, 233, 254, 0.52);
white-space: nowrap;
}
.dbx-co-trust b { color: #34D399; font-weight: 800; }
@media (min-width: 900px) {
.dbx-row34 .dbx-checkout-card {
position: sticky;
top: 24px;
align-self: start;
}
}
.dbx-railupd-click {
position: relative;
cursor: pointer;
padding-right: 64px;
transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx-railupd-click:hover { background: rgba(167, 139, 250, 0.07); }
.dbx-railupd-go {
position: absolute;
right: 4px;
top: 12px;
font-size: 0.6875rem;
font-weight: 600;
color: #C4B5FD;
white-space: nowrap;
}
.dbx-railupd-click:hover .dbx-railupd-go { color: #fff; }
.dbx #order-form .form-control.dbx-f-err,
.dbx #order-form textarea.dbx-f-err {
border-color: rgba(248, 113, 113, 0.55) !important;
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12) !important;
}
.dbx-f-errmsg {
font-size: 0.75rem;
font-weight: 600;
color: #F87171;
margin: 7px 0 0;
}
.dbx-ntc-acts { display: inline-flex; align-items: center; gap: 12px; flex: none; }
body.dbx-on .dbx-ntc-act.dbx-ntc-reorder {
background: rgba(250, 202, 51, 0.12);
border: 1px solid rgba(250, 202, 51, 0.4);
border-radius: 999px;
padding: 4px 12px;
color: #FACA33;
font-weight: 700;
font-size: 0.75rem;
}
body.dbx-on .dbx-ntc-act.dbx-ntc-reorder:hover { background: rgba(250, 202, 51, 0.2); color: #FFD75E; }
.dbx-nudge { color: inherit; text-decoration: none; }
.dbx-nudge:hover { color: #fff; text-decoration: none; }
.dbx-nudge .dbx-nudge-money { color: #FACA33; font-weight: 700; }
.dbx-nudge .dbx-nudge-arrow { color: #C4B5FD; font-weight: 600; }
@media (hover: hover) {
.dbx-qty-preset { position: relative; }
.dbx-qty-preset[data-price]:hover::after {
content: attr(data-price);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #0C0626;
border: 1px solid rgba(167, 139, 250, 0.35);
border-radius: 8px;
padding: 5px 10px;
font-size: 0.75rem;
font-weight: 700;
color: #FACA33;
white-space: nowrap;
pointer-events: none;
z-index: 40;
}
.dbx-qty-preset[data-price]:hover::before {
content: "";
position: absolute;
bottom: calc(100% + 5px);
left: 50%;
width: 7px;
height: 7px;
background: #0C0626;
border-right: 1px solid rgba(167, 139, 250, 0.35);
border-bottom: 1px solid rgba(167, 139, 250, 0.35);
transform: translateX(-50%) rotate(45deg);
pointer-events: none;
z-index: 41;
}
}
.dbx-grid23 {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 24px;
align-items: start;
}
.dbx-col-main { min-width: 0; }
@media (max-width: 900px) {
.dbx-grid23 { grid-template-columns: 1fr; }
}
@media (min-width: 900px) {
.dbx-grid23 .dbx-checkout-card {
position: sticky;
top: 24px;
align-self: start;
}
}
@media (min-width: 900px) {
.dbx-grid23 .dbx-checkout-card { margin-top: 85px; }
}
.dbx-sidebar {
position: static;
height: auto;
align-self: stretch;
padding: 0;
}
.dbx.is-collapsed .dbx-sidebar { padding: 0; }
.dbx-sidebar-inner {
position: sticky;
top: 0;
height: 100vh;
padding: 24px 16px;
}
.dbx.is-collapsed .dbx-sidebar-inner { padding: 24px 12px; }
.dbx-mtop { display: none; }
@media (max-width: 900px) {
.dbx-mtop {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.dbx-mtop-logo img { height: 28px; width: auto; display: block; }
.dbx-burger {
width: 44px;
height: 44px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.dbx-burger span {
display: block;
width: 22px;
height: 2px;
border-radius: 2px;
background: #EDE9FE;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
}
.dbx-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dbx-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dbx-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.dbx-topbar { display: none; }
}
@media (min-width: 900px) {
.dbx-mov { display: none; }
}
.dbx-mov {
position: fixed;
inset: 0;
z-index: 120;
background: #08041A;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
visibility: hidden;
overflow: clip;
overscroll-behavior: contain;
}
.dbx-mov.is-open { transform: translateX(0); visibility: visible; }
.dbx-mov-inner {
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 24px 22px 44px;
}
.dbx-mov-close {
position: absolute;
top: 18px;
right: 16px;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(167, 139, 250, 0.08);
border: 1px solid rgba(167, 139, 250, 0.22);
border-radius: 12px;
color: #EDE9FE;
cursor: pointer;
}
.dbx-mov-logo { display: inline-block; margin: 4px 0 10px; }
.dbx-mov-logo img { height: 30px; width: auto; display: block; }
.dbx-mov-label {
font-size: 0.625rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
color: #A78BFA;
margin: 18px 0 8px;
padding-top: 16px;
border-top: 1px solid rgba(167, 139, 250, 0.14);
}
.dbx-mov-nav ul { list-style: none; margin: 0; padding: 0; }
.dbx-mov-nav a {
display: flex;
align-items: center;
gap: 8px;
padding: 13px 4px;
font-size: 1.0625rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
border-bottom: 1px solid rgba(167, 139, 250, 0.08);
}
.dbx-mov-nav li:last-child a { border-bottom: none; }
.dbx-mov-nav a.is-active-nav { color: #C4B5FD; font-weight: 700; }
.dbx-mov-cur { display: flex; flex-wrap: wrap; gap: 8px; }
.dbx-mov-cur-item {
height: 38px;
padding: 0 14px;
border-radius: 10px;
background: #14093A;
border: 1px solid rgba(167, 139, 250, 0.18);
color: rgba(255, 255, 255, 0.8);
font-family: inherit;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
}
.dbx-mov-cur-item.is-active {
border-color: #A78BFA;
background: rgba(109, 40, 217, 0.25);
color: #fff;
}
.dbx-mov-acct { display: flex; flex-direction: column; }
.dbx-mov-acct a {
padding: 11px 4px;
font-size: 0.9375rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
border-bottom: 1px solid rgba(167, 139, 250, 0.08);
}
.dbx-mov-acct a:last-child { border-bottom: none; }
.dbx-mov-acct a.is-active-nav { color: #C4B5FD; }
@media (prefers-reduced-motion: reduce) {
.dbx-mov, .dbx-burger span { transition: none; }
}
.dbx-mov-cur-item.is-current {
border-color: rgba(250, 202, 51, 0.6);
color: #fff;
background: rgba(250, 202, 51, 0.08);
}
.dbx-mov-cur-item.is-current::before {
content: "\2713";
color: #FACA33;
font-weight: 800;
margin-right: 7px;
}
.dbx-rail-tabs { flex-wrap: wrap; gap: 8px; }
.dbx-rail, .dbx-rail-card, .dbx-rail-pane, .dbx-railupd-list, .dbx-railupd-row { min-width: 0; }
.dbx-rail-card { max-width: 100%; }
.dbx-mov-comm { display: flex; flex-wrap: wrap; gap: 10px; }
.dbx-mov-nav a { gap: 12px; }
.dbx-mov-ic {
width: 20px;
height: 20px;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
color: #C4B5FD;
}
.dbx-mov-ic svg { width: 19px; height: 19px; stroke: currentColor; display: block; }
.dbx-mov-nav a.is-active-nav .dbx-mov-ic { color: #FACA33; }
.dbx #fields input { font-size: 0.8125rem !important; }
body.dbx-on .tempus-dominus-widget,
body.dbx-on .tempus-dominus-widget.light,
body.dbx-on .tempus-dominus-widget.dark {
background: #0C0626 !important;
border: 1px solid rgba(167, 139, 250, 0.25) !important;
border-radius: 14px !important;
box-shadow: 0 28px 70px rgba(4, 2, 14, 0.8) !important;
padding: 10px !important;
color: #EDE9FE !important;
}
body.dbx-on .tempus-dominus-widget .arrow { display: none !important; }
body.dbx-on .tempus-dominus-widget .calendar-header {
color: #EDE9FE !important;
font-weight: 700 !important;
}
body.dbx-on .tempus-dominus-widget .calendar-header .previous,
body.dbx-on .tempus-dominus-widget .calendar-header .next {
color: #C4B5FD !important;
border-radius: 8px !important;
}
body.dbx-on .tempus-dominus-widget .calendar-header .previous:hover,
body.dbx-on .tempus-dominus-widget .calendar-header .next:hover,
body.dbx-on .tempus-dominus-widget .calendar-header .picker-switch:hover {
background: rgba(167, 139, 250, 0.12) !important;
}
body.dbx-on .tempus-dominus-widget .calendar-header .previous.disabled,
body.dbx-on .tempus-dominus-widget .calendar-header .next.disabled {
opacity: 0.3;
background: transparent !important;
}
body.dbx-on .tempus-dominus-widget .calendar-header .picker-switch {
font-size: 0.8125rem !important;
font-weight: 700 !important;
border-radius: 8px !important;
}
body.dbx-on .tempus-dominus-widget .date-container-days .dow {
font-size: 0.625rem !important;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
color: rgba(237, 233, 254, 0.45) !important;
}
body.dbx-on .tempus-dominus-widget .date-container-days .cw {
font-size: 0.625rem !important;
color: rgba(237, 233, 254, 0.3) !important;
}
body.dbx-on .tempus-dominus-widget [class*="date-container-"] div:not(.no-highlight),
body.dbx-on .tempus-dominus-widget .time-container-clock div:not(.no-highlight) {
font-size: 0.8125rem !important;
border-radius: 8px !important;
color: #EDE9FE !important;
}
body.dbx-on .tempus-dominus-widget [class*="date-container-"] div:not(.no-highlight):hover,
body.dbx-on .tempus-dominus-widget .time-container-clock div:not(.no-highlight):hover {
background: rgba(167, 139, 250, 0.12) !important;
}
body.dbx-on .tempus-dominus-widget [class*="date-container-"] div:not(.no-highlight).old,
body.dbx-on .tempus-dominus-widget [class*="date-container-"] div:not(.no-highlight).new {
color: rgba(237, 233, 254, 0.3) !important;
}
body.dbx-on .tempus-dominus-widget [class*="date-container-"] div:not(.no-highlight).today {
border: 1px solid rgba(167, 139, 250, 0.6) !important;
}
body.dbx-on .tempus-dominus-widget [class*="date-container-"] div:not(.no-highlight).today:before {
display: none !important;
}
body.dbx-on .tempus-dominus-widget [class*="date-container-"] div:not(.no-highlight).active,
body.dbx-on .tempus-dominus-widget [class*="date-container-"] div:not(.no-highlight).active:hover,
body.dbx-on .tempus-dominus-widget .time-container-clock div:not(.no-highlight).active {
background: #FACA33 !important;
color: #150B3D !important;
text-shadow: none !important;
}
body.dbx-on .tempus-dominus-widget [class*="date-container-"] div:not(.no-highlight).disabled,
body.dbx-on .tempus-dominus-widget [class*="date-container-"] div:not(.no-highlight).disabled:hover {
background: transparent !important;
color: rgba(237, 233, 254, 0.25) !important;
cursor: not-allowed;
}
body.dbx-on .tempus-dominus-widget .toolbar div:hover {
background: rgba(167, 139, 250, 0.12) !important;
border-radius: 8px;
}
.dbx #dbx-mass-form .control-label {
font-size: 0.75rem !important;
color: rgba(237, 233, 254, 0.52) !important;
font-weight: 600;
}
.dbx #dbx-mass-form textarea::placeholder { font-size: 0.8125rem; }
.dbx-toggle {
width: 44px;
height: 44px;
top: 17px;
right: -22px;
background: transparent;
border: none;
color: #FACA33;
border-radius: 999px;
cursor: pointer;
z-index: 60;
}
.dbx-toggle::before {
content: "";
position: absolute;
inset: 9px;
border-radius: 999px;
background: #1F1248;
border: 1px solid rgba(250, 202, 51, 0.45);
z-index: -1;
}
.dbx-toggle:hover::before { background: rgba(250, 202, 51, 0.12); }
.dbx #order-form input.form-control,
.dbx #order-form .input-group input,
.dbx input[name*="expiry" i],
.dbx .datetimepicker-input {
font-size: 0.8125rem !important;
font-family: inherit !important;
}
.dbx-step2-grid { grid-template-columns: minmax(0, 1fr); }
.dbx-mode-fav .dbx-step2-grid,
.dbx-mode-subs .dbx-step2-grid { grid-template-columns: minmax(0, 1fr); }
.dbx-step2-grid > .form-group,
.dbx-step2-grid .dbx-grp-service { min-width: 0; }
@media (min-width: 900px) {
.dbx-mode-fav .dbx-checkout-card,
.dbx-mode-subs .dbx-checkout-card { margin-top: 125px; }
}
body.dbx-s2-open .search-dropdown .select2-dropdown,
body.dbx-s2-open .search-dropdown ul,
body.dbx-s2-open .search-dropdown li { display: none !important; }
.dbx-f-fix {
margin-left: 8px;
background: rgba(250, 202, 51, 0.12);
border: 1px solid rgba(250, 202, 51, 0.4);
border-radius: 999px;
padding: 2px 10px;
color: #FACA33;
font-family: inherit;
font-size: 0.6875rem;
font-weight: 700;
cursor: pointer;
}
.dbx-f-fix:hover { background: rgba(250, 202, 51, 0.2); }
.dbx form[action="/massorder"] button[type="submit"] {
background: #FACA33;
border: none;
color: #150B3D;
height: 48px;
padding: 0 24px;
border-radius: 10px;
font-size: 0.9375rem;
font-weight: 700;
}
.dbx form[action="/massorder"] button[type="submit"]:hover {
background: #FFD75E;
color: #150B3D;
}
.dbx::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 80% 52% at 16% 16%, rgba(124, 58, 237, 0.42), transparent 55%),
radial-gradient(ellipse 64% 42% at 86% 56%, rgba(236, 72, 153, 0.26), transparent 52%),
radial-gradient(ellipse 74% 48% at 48% 90%, rgba(124, 58, 237, 0.36), transparent 55%);
background-size: 200% 200%;
}
.dbx-main { position: relative; z-index: 1; background: transparent; }
.dbx .dbx-rail-card { background: #14093A; border: 1px solid rgba(167, 139, 250, 0.22); }
.dbx-checkout-card.is-low .btn.btn-primary { color: #C4B5FD !important; }
#service-table .dbx-svc-order-th {
text-align: center;
white-space: nowrap;
}
#service-table .dbx-svc-order-td {
text-align: center;
white-space: nowrap;
vertical-align: middle;
}
#service-table .dbx-svc-order {
display: inline-flex;
align-items: center;
justify-content: center;
height: 30px;
padding: 0 16px;
border-radius: 8px;
background: #FACA33;
color: #150B3D;
font-size: 0.75rem;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
#service-table .dbx-svc-order:hover { background: #FFD75E; color: #150B3D; text-decoration: none; }
.dbx-orders {
background: #1B1045;
background: linear-gradient(180deg, #221453, #170D3D);
border: 1px solid rgba(167, 139, 250, 0.32);
border-radius: 20px;
box-shadow: 0 30px 80px rgba(9, 3, 30, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
overflow: hidden;
margin-top: 18px;
}
.dbx-orders .dbx-ord-row {
display: grid;
grid-template-columns: 4px minmax(0, 2.3fr) 1.5fr 1.25fr auto;
align-items: center;
gap: 18px;
padding: 18px 22px 18px 0;
border-bottom: 1px solid rgba(167, 139, 250, 0.1);
transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx-orders .dbx-ord-row:last-child { border-bottom: none; }
.dbx-orders .dbx-ord-row:hover { background: rgba(167, 139, 250, 0.05); }
.dbx-orders .dbx-ord-rail { align-self: stretch; width: 4px; border-radius: 0 3px 3px 0; background: #A78BFA; }
.dbx-orders .is-ok .dbx-ord-rail { background: #34D399; }
.dbx-orders .is-wait .dbx-ord-rail { background: #A78BFA; }
.dbx-orders .is-run .dbx-ord-rail { background: #38BDF8; }
.dbx-orders .is-proc .dbx-ord-rail { background: #818CF8; }
.dbx-orders .is-part .dbx-ord-rail { background: #FB923C; }
.dbx-orders .is-bad .dbx-ord-rail { background: #F87171; }
.dbx-orders .dbx-ord-svc { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dbx-orders .dbx-ord-ic {
flex: none; width: 34px; height: 34px; border-radius: 9px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.2);
}
.dbx-orders .dbx-ord-ic img { width: 16px; height: 16px; display: block; }
.dbx-orders .dbx-ord-ic.is-mono { color: #C4B5FD; font-size: 0.8125rem; font-weight: 700; }
.dbx-orders .dbx-ord-svc-body { min-width: 0; }
.dbx-orders .dbx-ord-svc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dbx-orders .dbx-ord-name {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 0.8125rem; font-weight: 600; color: #fff;
}
.dbx-orders .dbx-ord-id {
flex: none; display: inline-flex; align-items: center; gap: 5px;
height: 22px; padding: 0 8px; border-radius: 6px; cursor: pointer;
font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
font-size: 0.75rem; font-weight: 700;
color: #FACA33; background: rgba(250, 202, 51, 0.14); border: 1px solid rgba(250, 202, 51, 0.45);
transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s, border-color 0.2s;
}
.dbx-orders .dbx-ord-id:hover { background: rgba(250, 202, 51, 0.22); }
.dbx-orders .dbx-ord-id-ic { display: inline-flex; }
.dbx-orders .dbx-ord-id-ic svg { width: 12px; height: 12px; display: block; }
.dbx-orders .dbx-ord-id.is-copied {
color: #34D399; background: rgba(52, 211, 153, 0.16); border-color: rgba(52, 211, 153, 0.5);
}
.dbx-orders .dbx-ord-link {
margin-top: 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 0.75rem; color: rgba(237, 233, 254, 0.52);
}
.dbx-orders .dbx-ord-prog { min-width: 0; }
.dbx-orders .dbx-ord-prog-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.dbx-orders .dbx-ord-prog-lbl { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(237, 233, 254, 0.52); }
.dbx-orders .dbx-ord-prog-pct { font-size: 0.75rem; font-weight: 700; color: #EDE9FE; }
.dbx-orders .dbx-ord-track { height: 5px; border-radius: 999px; background: rgba(167, 139, 250, 0.14); overflow: hidden; }
.dbx-orders .dbx-ord-fill { display: block; height: 100%; border-radius: 999px; background: #A78BFA; transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-orders .is-ok .dbx-ord-fill { background: #34D399; }
.dbx-orders .is-bad .dbx-ord-fill { background: #F87171; }
.dbx-orders .dbx-ord-status { min-width: 0; }
.dbx-orders .dbx-ord-status-top { display: flex; align-items: center; gap: 7px; }
.dbx-orders .dbx-ord-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: #A78BFA; }
.dbx-orders .dbx-ord-status-lbl { font-size: 0.8125rem; font-weight: 600; color: #A78BFA; }
.dbx-orders .dbx-ord-substat { margin-top: 3px; font-size: 0.75rem; color: rgba(237, 233, 254, 0.52); }
.dbx-orders .is-ok .dbx-ord-dot { background: #34D399; } .dbx-orders .is-ok .dbx-ord-status-lbl { color: #34D399; }
.dbx-orders .is-wait .dbx-ord-dot { background: #A78BFA; } .dbx-orders .is-wait .dbx-ord-status-lbl { color: #A78BFA; }
.dbx-orders .is-run .dbx-ord-dot { background: #38BDF8; } .dbx-orders .is-run .dbx-ord-status-lbl { color: #38BDF8; }
.dbx-orders .is-proc .dbx-ord-dot { background: #818CF8; } .dbx-orders .is-proc .dbx-ord-status-lbl { color: #A5B4FC; }
.dbx-orders .is-part .dbx-ord-dot { background: #FB923C; } .dbx-orders .is-part .dbx-ord-status-lbl { color: #FB923C; }
.dbx-orders .is-bad .dbx-ord-dot { background: #F87171; } .dbx-orders .is-bad .dbx-ord-status-lbl { color: #F87171; }
.dbx-orders .dbx-ord-act { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }
.dbx-orders .dbx-ord-charge { font-size: 0.9375rem; font-weight: 700; color: #FACA33; white-space: nowrap; }
.dbx-orders .dbx-ord-charge.is-zero { color: rgba(250, 202, 51, 0.45); }
.dbx-orders .dbx-ord-reorder {
display: inline-flex; align-items: center; gap: 6px; flex: none;
height: 32px; padding: 0 14px; border-radius: 999px;
background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.3);
color: #C4B5FD; font-size: 0.75rem; font-weight: 600; text-decoration: none;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.dbx-orders .dbx-ord-reorder:hover { border-color: #A78BFA; color: #fff; background: rgba(167, 139, 250, 0.18); text-decoration: none; }
.dbx-orders .dbx-ord-reorder-ic svg { width: 13px; height: 13px; display: block; }
.dbx-orders .dbx-ord-empty { padding: 56px 24px; text-align: center; }
.dbx-orders .dbx-ord-empty-t { font-size: 1.0625rem; font-weight: 700; color: #fff; }
.dbx-orders .dbx-ord-empty-s { margin: 8px 0 18px; font-size: 0.8125rem; color: rgba(237, 233, 254, 0.52); }
.dbx-orders .dbx-ord-empty-cta {
display: inline-flex; align-items: center; height: 42px; padding: 0 22px; border-radius: 10px;
background: #FACA33; color: #150B3D; font-size: 0.875rem; font-weight: 700; text-decoration: none;
}
.dbx-orders .dbx-ord-empty-cta:hover { background: #FFD75E; color: #150B3D; text-decoration: none; }
.dbx .dbx-ord-tab {
display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 10px;
background: #14093A; border: 1px solid rgba(167, 139, 250, 0.16);
color: rgba(255, 255, 255, 0.72); font-size: 0.8125rem; font-weight: 600;
text-decoration: none; transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.dbx .dbx-ord-tab:hover { border-color: rgba(167, 139, 250, 0.32); color: #fff; text-decoration: none; }
.dbx .dbx-ord-tab.is-active { background: #FACA33; border-color: #FACA33; color: #150B3D; }
.dbx .dbx-ord-search {
background: #0A0420; border: 1px solid rgba(167, 139, 250, 0.22); border-radius: 10px;
color: #EDE9FE;
}
.dbx .dbx-ord-search:focus { outline: none; border-color: #A78BFA; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.14); }
.dbx-orders .dbx-ord-linkrow { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 5px; }
.dbx-orders .dbx-ord-linkrow .dbx-ord-link { margin-top: 0; flex: 1 1 auto; }
.dbx-orders-toolbar {
display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
background: rgba(167, 139, 250, 0.045);
border: 1px solid rgba(167, 139, 250, 0.16);
border-radius: 16px;
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
padding: 12px 14px;
box-shadow: 0 8px 28px rgba(9, 3, 30, 0.35);
margin-top: 4px;
}
.dbx-orders-filters { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.dbx .dbx-ord-tab {
display: inline-flex; align-items: center; height: 38px; padding: 9px 15px; border-radius: 10px;
background: transparent; border: none; color: rgba(237, 233, 254, 0.55);
font-size: 0.8125rem; font-weight: 600; text-decoration: none;
transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s;
}
.dbx .dbx-ord-tab:hover { background: rgba(167, 139, 250, 0.1); color: #EDE9FE; text-decoration: none; }
.dbx .dbx-ord-tab.is-active { background: #FACA33; border: none; color: #150B3D; box-shadow: 0 4px 14px rgba(250, 202, 51, 0.25); }
.dbx-orders-search {
display: flex; align-items: center; margin: 0; flex: 0 1 300px;
background: #0A0420; border: 1px solid rgba(167, 139, 250, 0.22); border-radius: 11px; overflow: hidden;
}
.dbx-orders-search:focus-within { border-color: #A78BFA; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.16); }
.dbx-orders-search .input-group { display: flex; flex: 1; align-items: center; background: transparent; border: none; box-shadow: none; margin: 0; width: auto; }
.dbx-orders-mag { display: inline-flex; align-items: center; padding: 0 4px 0 12px; color: rgba(237, 233, 254, 0.45); flex: none; }
.dbx-orders-mag svg { width: 16px; height: 16px; display: block; }
.dbx .dbx-orders-search .dbx-ord-search {
flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 10px;
background: transparent; border: none; box-shadow: none; color: #EDE9FE;
}
.dbx .dbx-orders-search .dbx-ord-search:focus { outline: none; border: none; box-shadow: none; }
.dbx-orders-search .dbx-orders-go {
flex: none; height: 40px; padding: 0 14px; border: none; border-radius: 0; box-shadow: none;
background: rgba(167, 139, 250, 0.14); color: #C4B5FD; font-weight: 700; cursor: pointer;
}
.dbx-orders-search .dbx-orders-go:hover { background: rgba(167, 139, 250, 0.24); color: #fff; }
.dbx-orders .dbx-ord-qr { display: flex; gap: 18px; margin-top: 6px; }
.dbx-orders .dbx-ord-qr-item { display: flex; flex-direction: column; }
.dbx-orders .dbx-ord-qr-lbl { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(237, 233, 254, 0.52); }
.dbx-orders .dbx-ord-qr-val { font-size: 0.8125rem; font-weight: 600; color: #EDE9FE; margin-top: 2px; }
.dbx-orders-toolbar {
display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
background: rgba(167, 139, 250, 0.045); border: 1px solid rgba(167, 139, 250, 0.16);
border-radius: 16px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
padding: 12px 14px; margin: 0 0 18px; box-shadow: 0 8px 28px rgba(9, 3, 30, 0.35);
}
.dbx-orders-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.dbx .dbx-ord-tab {
-webkit-appearance: none; appearance: none; border: 1px solid transparent; background: transparent;
color: rgba(237, 233, 254, 0.52); font: inherit; font-size: 13px; font-weight: 600;
padding: 9px 15px; border-radius: 10px; cursor: pointer; text-decoration: none; white-space: nowrap;
display: inline-flex; align-items: center; height: auto;
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx .dbx-ord-tab:hover { color: #EDE9FE; background: rgba(167, 139, 250, 0.1); text-decoration: none; }
.dbx .dbx-ord-tab.is-active { color: #150B3D; background: #FACA33; font-weight: 700; box-shadow: 0 4px 14px rgba(250, 202, 51, 0.25); }
.dbx-orders-search {
display: flex; align-items: center; margin: 0; flex: 0 1 300px; min-width: 220px;
background: #0A0420; border: 1px solid rgba(167, 139, 250, 0.22); border-radius: 11px; overflow: hidden;
transition: border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx-orders-search:focus-within { border-color: #A78BFA; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.16); }
.dbx-orders-search .input-group { display: flex; flex: 1; align-items: center; background: transparent; border: none; box-shadow: none; margin: 0; width: auto; }
.dbx-orders-mag { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 40px; }
.dbx-orders-mag svg { width: 16px; height: 16px; stroke: rgba(237, 233, 254, 0.52); }
.dbx .dbx-orders-search .dbx-ord-search {
flex: 1; min-width: 0; background: transparent; border: none; box-shadow: none; color: #EDE9FE;
font: inherit; font-size: 14px; height: 40px; padding: 0 4px 0 0;
}
.dbx .dbx-orders-search .dbx-ord-search:focus { outline: none; border: none; box-shadow: none; }
.dbx-orders-search .dbx-orders-go {
flex: 0 0 auto; height: 40px; padding: 0 14px; border: none; border-radius: 0; box-shadow: none;
background: rgba(167, 139, 250, 0.14); color: #C4B5FD; cursor: pointer; font: inherit;
display: grid; place-items: center; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx-orders-search .dbx-orders-go:hover { background: rgba(167, 139, 250, 0.26); color: #fff; }
.dbx-orders-search .dbx-orders-go svg { width: 15px; height: 15px; stroke: currentColor; }
.dbx-ord-cols {
display: grid; grid-template-columns: 4px minmax(0, 2.1fr) minmax(150px, 1.25fr) 160px 110px;
gap: 18px; align-items: center; padding: 0 22px 10px;
font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(237, 233, 254, 0.52);
}
.dbx-ord-cols span:nth-child(5) { text-align: right; }
.dbx-orders { margin-top: 0; }
.dbx-orders .dbx-ord-row {
display: grid; grid-template-columns: 4px minmax(0, 2.1fr) minmax(150px, 1.25fr) 160px 110px;
gap: 18px; align-items: center; padding: 18px 22px;
}
.dbx-orders .dbx-ord-rail { width: 4px; height: 42px; align-self: center; border-radius: 999px; }
.dbx-orders .dbx-ord-svc { display: flex; gap: 13px; align-items: center; min-width: 0; }
.dbx-orders .dbx-ord-ic { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.22); display: grid; place-items: center; }
.dbx-orders .dbx-ord-ic img { width: 19px; height: 19px; }
.dbx-orders .dbx-ord-name { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.dbx-orders .dbx-ord-linkrow { display: flex; align-items: center; gap: 9px; min-width: 0; margin-top: 0; }
.dbx-orders .dbx-ord-id {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; font-weight: 700;
color: #FACA33; background: rgba(250, 202, 51, 0.14); border: 1px solid rgba(250, 202, 51, 0.45);
padding: 3px 9px; border-radius: 7px; cursor: pointer; height: auto; user-select: none;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx-orders .dbx-ord-id:hover { background: rgba(250, 202, 51, 0.24); border-color: #FACA33; color: #fff; }
.dbx-orders .dbx-ord-id.is-copied { color: #34D399; border-color: rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.14); }
.dbx-orders .dbx-ord-id svg { width: 11px; height: 11px; stroke: currentColor; opacity: 0.8; }
.dbx-orders .dbx-ord-link { flex: 1 1 auto; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; color: rgba(237, 233, 254, 0.52); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0; }
.dbx-orders .dbx-ord-prog-top { display: flex; justify-content: space-between; font-size: 11px; color: rgba(237, 233, 254, 0.52); margin-bottom: 6px; }
.dbx-orders .dbx-ord-prog-pct { color: #C4B5FD; font-weight: 600; }
.dbx-orders .dbx-ord-prog-lbl { letter-spacing: normal; text-transform: none; color: rgba(237, 233, 254, 0.52); font-size: 11px; }
.dbx-orders .dbx-ord-track { height: 5px; border-radius: 999px; background: rgba(167, 139, 250, 0.14); overflow: hidden; }
.dbx-orders .dbx-ord-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6D28D9, #A78BFA); }
.dbx-orders .is-ok .dbx-ord-fill { background: linear-gradient(90deg, #10b981, #34D399); }
.dbx-orders .dbx-ord-status { display: flex; flex-direction: column; gap: 8px; }
.dbx-orders .dbx-ord-status-top { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.dbx-orders .dbx-ord-dot { width: 7px; height: 7px; border-radius: 50%; }
.dbx-orders .dbx-ord-status-lbl { font-size: 13px; font-weight: 600; }
.dbx-orders .dbx-ord-qr { display: flex; gap: 18px; margin-top: 0; }
.dbx-orders .dbx-ord-qr-item { display: flex; flex-direction: column; gap: 1px; }
.dbx-orders .dbx-ord-qr-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(237, 233, 254, 0.52); }
.dbx-orders .dbx-ord-qr-val { font-size: 13px; font-weight: 600; color: #EDE9FE; margin-top: 0; }
.dbx-orders .dbx-ord-act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; justify-content: center; }
.dbx-orders .dbx-ord-charge { font-size: 16px; font-weight: 800; color: #FACA33; white-space: nowrap; }
.dbx-orders .dbx-ord-charge.is-zero { color: rgba(250, 202, 51, 0.45); }
.dbx-main .dbx-orders .dbx-ord-row,
.dbx-main .dbx-ord-cols {
grid-template-columns: 4px minmax(0, 2fr) minmax(120px, 0.8fr) 180px 110px;
column-gap: 30px;
}
.dbx-orders a.dbx-ord-link { text-decoration: none; cursor: pointer; transition: color 0.18s ease; }
.dbx-orders a.dbx-ord-link:hover { color: #C4B5FD; text-decoration: underline; }
.dbx-orders .dbx-ord-refill {
display: inline-flex; align-items: center; gap: 6px; flex: none;
height: 32px; padding: 0 14px; border-radius: 999px; cursor: pointer; line-height: 1;
background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.26);
color: #6EE7B7; font: inherit; font-size: 0.75rem; font-weight: 600;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.dbx-orders .dbx-ord-refill:hover { border-color: rgba(52, 211, 153, 0.6); color: #fff; background: rgba(16, 185, 129, 0.16); }
.dbx-orders .dbx-ord-refill-ic { display: inline-flex; }
.dbx-orders .dbx-ord-refill-ic svg { width: 13px; height: 13px; display: block; }
.dbx-orders .dbx-ord-refill:focus-visible { outline: 2px solid #34D399; outline-offset: 2px; }
.dbx-orders .dbx-ord-cancel {
display: inline-flex; align-items: center; gap: 6px; flex: none;
height: 32px; padding: 0 14px; border-radius: 999px; cursor: pointer; line-height: 1;
background: rgba(248, 113, 113, 0.09); border: 1px solid rgba(248, 113, 113, 0.3);
color: #FCA5A5; font: inherit; font-size: 0.75rem; font-weight: 600;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.dbx-orders .dbx-ord-cancel:hover { border-color: rgba(248, 113, 113, 0.6); color: #fff; background: rgba(248, 113, 113, 0.18); }
.dbx-orders .dbx-ord-cancel-ic { display: inline-flex; }
.dbx-orders .dbx-ord-cancel-ic svg { width: 13px; height: 13px; display: block; }
.dbx-orders .dbx-ord-cancel:focus-visible { outline: 2px solid #F87171; outline-offset: 2px; }
.dbx-orders .dbx-ord-cancel.is-requested {
background: rgba(148, 163, 184, 0.12); border-color: rgba(148, 163, 184, 0.32);
color: #CBD5E1; cursor: default; pointer-events: none;
}
.dbx-orders .dbx-ord-cancel.is-requested .dbx-ord-cancel-ic svg { stroke: #34D399; }
.dbx-orders .dbx-ord-refill.is-locked {
background: rgba(16, 185, 129, 0.05); border-color: rgba(16, 185, 129, 0.16);
color: rgba(110, 231, 183, 0.55); cursor: help;
}
.dbx-orders .dbx-ord-refill.is-locked:hover {
background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.3); color: rgba(110, 231, 183, 0.82);
}
.dbx-orders .dbx-ord-cancel.is-locked {
background: rgba(248, 113, 113, 0.05); border-color: rgba(248, 113, 113, 0.16);
color: rgba(252, 165, 165, 0.55); cursor: help;
}
.dbx-orders .dbx-ord-cancel.is-locked:hover {
background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.3); color: rgba(252, 165, 165, 0.82);
}
.dbx-ord-tip {
position: fixed; left: 0; top: 0; z-index: 10000;
transform: translate(-50%, calc(-100% - 11px));
background: #1B1045; border: 1px solid rgba(167, 139, 250, 0.4); color: #EDE9FE;
font-size: 12px; font-weight: 500; line-height: 1.45; text-align: center;
padding: 8px 11px; border-radius: 9px; max-width: 240px; white-space: normal;
box-shadow: 0 14px 34px rgba(9, 3, 30, 0.6);
opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.dbx-ord-tip.is-on { opacity: 1; }
.dbx-ord-tip::after {
content: ''; position: absolute; top: 100%; left: calc(50% + var(--arrow-dx, 0px)); transform: translateX(-50%);
border: 6px solid transparent; border-top-color: rgba(167, 139, 250, 0.4);
}
.dbx-ord-tip.is-below { transform: translate(-50%, 11px); }
.dbx-ord-tip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: rgba(167, 139, 250, 0.4); }
.dbx-main .dbx-orders .dbx-ord-qr-lbl { color: rgba(237, 233, 254, 0.52); }
.dbx-main .dbx-orders .dbx-ord-link { color: rgba(237, 233, 254, 0.52); }
.dbx-main .dbx-orders .dbx-ord-svc-body .dbx-ord-date,
.dbx-main .dbx-orders .dbx-ord-svc-body .dbx-ord-date-txt { color: rgba(237, 233, 254, 0.52); }
.dbx-main .dbx-subs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: rgba(167, 139, 250, 0.045); border: 1px solid rgba(167, 139, 250, 0.16); border-radius: 16px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 12px 14px; margin: 0 0 18px; box-shadow: 0 8px 28px rgba(9, 3, 30, 0.35); }
.dbx-main .dbx-subs-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.dbx .dbx-subs-tab { -webkit-appearance: none; appearance: none; border: 1px solid transparent; background: transparent; color: rgba(237, 233, 254, 0.52); font: inherit; font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 10px; cursor: pointer; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; height: auto; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx .dbx-subs-tab:hover { color: #EDE9FE; background: rgba(167, 139, 250, 0.1); text-decoration: none; }
.dbx .dbx-subs-tab.is-active { color: #150B3D; background: #FACA33; font-weight: 700; box-shadow: 0 4px 14px rgba(250, 202, 51, 0.25); }
.dbx-main .dbx-subs-search { display: flex; align-items: center; margin: 0; flex: 0 1 300px; min-width: 220px; background: #0A0420; border: 1px solid rgba(167, 139, 250, 0.22); border-radius: 11px; overflow: hidden; transition: border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-subs-search:focus-within { border-color: #A78BFA; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.16); }
.dbx-main .dbx-subs-search .input-group { display: flex; flex: 1; align-items: center; background: transparent; border: none; box-shadow: none; margin: 0; width: auto; }
.dbx-main .dbx-subs-mag { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 40px; }
.dbx-main .dbx-subs-mag svg { width: 16px; height: 16px; stroke: rgba(237, 233, 254, 0.52); }
.dbx .dbx-subs-search .dbx-subs-search-in { flex: 1; min-width: 0; background: transparent; border: none; box-shadow: none; color: #EDE9FE; font: inherit; font-size: 14px; height: 40px; padding: 0 4px 0 0; }
.dbx .dbx-subs-search .dbx-subs-search-in:focus { outline: none; border: none; box-shadow: none; }
.dbx-main .dbx-subs-search .dbx-subs-go { flex: 0 0 auto; height: 40px; padding: 0 14px; border: none; border-radius: 0; box-shadow: none; background: rgba(167, 139, 250, 0.14); color: #C4B5FD; cursor: pointer; display: grid; place-items: center; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-subs-search .dbx-subs-go:hover { background: rgba(167, 139, 250, 0.26); color: #fff; }
.dbx-main .dbx-subs-search .dbx-subs-go svg { width: 15px; height: 15px; stroke: currentColor; }
.dbx-main .dbx-subs-cols { display: grid; grid-template-columns: 4px minmax(0, 2fr) minmax(140px, 1fr) minmax(150px, 1.2fr) 150px; gap: 26px; align-items: center; padding: 0 22px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(237, 233, 254, 0.52); }
.dbx-main .dbx-subs-cols span:nth-child(5) { text-align: right; }
.dbx-main .dbx-subs { background: linear-gradient(180deg, #221453, #170D3D); background-color: #1B1045; border: 1px solid rgba(167, 139, 250, 0.32); border-radius: 20px; box-shadow: 0 30px 80px rgba(9, 3, 30, 0.55); overflow: hidden; }
.dbx-main .dbx-subs .dbx-subs-row { display: grid; grid-template-columns: 4px minmax(0, 2fr) minmax(140px, 1fr) minmax(150px, 1.2fr) 150px; gap: 26px; align-items: center; padding: 18px 22px; border-bottom: 1px solid rgba(167, 139, 250, 0.1); transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-subs .dbx-subs-row:last-child { border-bottom: none; }
.dbx-main .dbx-subs .dbx-subs-row:hover { background: rgba(167, 139, 250, 0.05); }
.dbx-main .dbx-subs .dbx-subs-rail { width: 4px; height: 54px; align-self: center; border-radius: 999px; background: #A78BFA; }
.dbx-main .dbx-subs .is-act .dbx-subs-rail { background: #34D399; }
.dbx-main .dbx-subs .is-pause .dbx-subs-rail { background: #FB923C; }
.dbx-main .dbx-subs .is-comp .dbx-subs-rail { background: #38BDF8; }
.dbx-main .dbx-subs .is-exp .dbx-subs-rail { background: #9A93C4; }
.dbx-main .dbx-subs .is-canc .dbx-subs-rail { background: #F87171; }
.dbx-main .dbx-subs .dbx-subs-idy { display: flex; gap: 13px; align-items: flex-start; min-width: 0; }
.dbx-main .dbx-subs .dbx-subs-ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px; background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.22); display: grid; place-items: center; }
.dbx-main .dbx-subs .dbx-subs-ic img { width: 20px; height: 20px; }
.dbx-main .dbx-subs .dbx-subs-ic svg { width: 20px; height: 20px; display: block; }
.dbx-main .dbx-subs .dbx-subs-ic.is-mono { font-weight: 700; font-size: 15px; color: #C4B5FD; }
.dbx-main .dbx-subs .dbx-subs-idy-b { min-width: 0; }
.dbx-main .dbx-subs .dbx-subs-name { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.dbx-main .dbx-subs .dbx-subs-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; min-width: 0; }
.dbx-main .dbx-subs .dbx-subs-id { display: inline-flex; align-items: center; gap: 5px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; font-weight: 700; color: #FACA33; background: rgba(250, 202, 51, 0.14); border: 1px solid rgba(250, 202, 51, 0.45); padding: 3px 9px; border-radius: 7px; cursor: pointer; user-select: none; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-subs .dbx-subs-id:hover { background: rgba(250, 202, 51, 0.24); border-color: #FACA33; color: #fff; }
.dbx-main .dbx-subs .dbx-subs-id.is-copied { color: #34D399; border-color: rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.14); }
.dbx-main .dbx-subs .dbx-subs-id svg { width: 11px; height: 11px; stroke: currentColor; opacity: 0.8; }
.dbx-main .dbx-subs .dbx-subs-user { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: #C4B5FD; min-width: 0; max-width: 100%; }
.dbx-main .dbx-subs .dbx-subs-user svg { width: 13px; height: 13px; stroke: currentColor; opacity: 0.8; flex: none; }
.dbx-main .dbx-subs .dbx-subs-user-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-main .dbx-subs .dbx-subs-dates { display: flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(237, 233, 254, 0.52); line-height: 1; }
.dbx-main .dbx-subs .dbx-subs-dates svg { width: 11px; height: 11px; stroke: currentColor; opacity: 0.75; flex: none; }
.dbx-main .dbx-subs .dbx-subs-prog { min-width: 0; }
.dbx-main .dbx-subs .dbx-subs-prog-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.dbx-main .dbx-subs .dbx-subs-prog-l { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(237, 233, 254, 0.52); font-weight: 600; }
.dbx-main .dbx-subs .dbx-subs-prog-v { font-size: 13px; font-weight: 700; color: #C4B5FD; }
.dbx-main .dbx-subs .dbx-subs-track { height: 6px; border-radius: 999px; background: rgba(167, 139, 250, 0.14); overflow: hidden; position: relative; }
.dbx-main .dbx-subs .dbx-subs-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6D28D9, #A78BFA); box-shadow: 0 0 10px rgba(167, 139, 250, 0.45); position: relative; }
.dbx-main .dbx-subs .dbx-subs-fill::after { content: ''; position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 60%); }
.dbx-main .dbx-subs .is-act .dbx-subs-fill { background: linear-gradient(90deg, #10b981, #34D399); box-shadow: 0 0 10px rgba(52, 211, 153, 0.45); }
.dbx-main .dbx-subs .is-pause .dbx-subs-fill { background: linear-gradient(90deg, #EA7A1E, #FB923C); box-shadow: 0 0 10px rgba(251, 146, 60, 0.45); }
.dbx-main .dbx-subs .is-comp .dbx-subs-fill { background: linear-gradient(90deg, #0EA5E9, #38BDF8); box-shadow: 0 0 10px rgba(56, 189, 248, 0.45); }
.dbx-main .dbx-subs .is-exp .dbx-subs-fill { background: linear-gradient(90deg, #7C74A8, #9A93C4); box-shadow: none; }
.dbx-main .dbx-subs .is-canc .dbx-subs-fill { background: rgba(248, 113, 113, 0.4); box-shadow: none; }
.dbx-main .dbx-subs .is-canc .dbx-subs-fill::after { display: none; }
.dbx-main .dbx-subs .dbx-subs-oldp { font-size: 11px; color: rgba(237, 233, 254, 0.52); margin-top: 7px; }
.dbx-main .dbx-subs .dbx-subs-oldp b { color: #EDE9FE; font-weight: 600; }
.dbx-main .dbx-subs .dbx-subs-det { display: flex; flex-direction: column; gap: 7px; }
.dbx-main .dbx-subs .dbx-subs-it { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.dbx-main .dbx-subs .dbx-subs-it-l { color: rgba(237, 233, 254, 0.52); }
.dbx-main .dbx-subs .dbx-subs-it-v { color: #EDE9FE; font-weight: 600; text-align: right; }
.dbx-main .dbx-subs .dbx-subs-sa { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.dbx-main .dbx-subs .dbx-subs-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.dbx-main .dbx-subs .dbx-subs-dot { width: 6px; height: 6px; border-radius: 50%; }
.dbx-main .dbx-subs .dbx-subs-badge.is-act { color: #34D399; background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.42); }
.dbx-main .dbx-subs .dbx-subs-badge.is-act .dbx-subs-dot { background: #34D399; }
.dbx-main .dbx-subs .dbx-subs-badge.is-pause { color: #FB923C; background: rgba(251, 146, 60, 0.12); border-color: rgba(251, 146, 60, 0.42); }
.dbx-main .dbx-subs .dbx-subs-badge.is-pause .dbx-subs-dot { background: #FB923C; }
.dbx-main .dbx-subs .dbx-subs-badge.is-comp { color: #38BDF8; background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.42); }
.dbx-main .dbx-subs .dbx-subs-badge.is-comp .dbx-subs-dot { background: #38BDF8; }
.dbx-main .dbx-subs .dbx-subs-badge.is-exp { color: #9A93C4; background: rgba(154, 147, 196, 0.14); border-color: rgba(154, 147, 196, 0.42); }
.dbx-main .dbx-subs .dbx-subs-badge.is-exp .dbx-subs-dot { background: #9A93C4; }
.dbx-main .dbx-subs .dbx-subs-badge.is-canc { color: #F87171; background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.42); }
.dbx-main .dbx-subs .dbx-subs-badge.is-canc .dbx-subs-dot { background: #F87171; }
.dbx-main .dbx-subs .dbx-subs-act { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 999px; cursor: pointer; border: 1px solid; text-decoration: none; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-subs .dbx-subs-act svg { width: 12px; height: 12px; stroke: currentColor; }
.dbx-main .dbx-subs .dbx-subs-act.is-lav { color: #C4B5FD; background: rgba(167, 139, 250, 0.08); border-color: rgba(167, 139, 250, 0.22); }
.dbx-main .dbx-subs .dbx-subs-act.is-lav:hover { border-color: #A78BFA; background: rgba(167, 139, 250, 0.16); color: #fff; text-decoration: none; }
.dbx-main .dbx-subs .dbx-subs-act.is-cancel { color: #F87171; background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.35); }
.dbx-main .dbx-subs .dbx-subs-act.is-cancel:hover { border-color: #F87171; background: rgba(248, 113, 113, 0.16); color: #fff; text-decoration: none; }
.dbx-main .dbx-subs .dbx-subs-act:focus-visible, .dbx-main .dbx-subs .dbx-subs-id:focus-visible { outline: 2px solid #A78BFA; outline-offset: 2px; }
.dbx-main .dbx-subs .dbx-subs-empty { padding: 40px 22px; text-align: center; color: rgba(237, 233, 254, 0.52); }
.dbx-main .dbx-subs,
.dbx-main .dbx-subs-cols,
.dbx-main .dbx-subs-toolbar { max-width: 1180px; margin-right: auto; }
.dbx-main .dbx-subs .dbx-subs-row,
.dbx-main .dbx-subs-cols { grid-template-columns: 4px minmax(300px, 1fr) 180px 210px 150px; column-gap: 30px; }
.dbx-main .dbx-subs,
.dbx-main .dbx-subs-cols,
.dbx-main .dbx-subs-toolbar { max-width: none; margin-right: 0; }
.dbx-main .dbx-subs .dbx-subs-row,
.dbx-main .dbx-subs-cols { grid-template-columns: 4px minmax(0, 2fr) minmax(160px, 1fr) minmax(190px, 1.1fr) 160px; }
.dbx-main .dbx-subs,
.dbx-main .dbx-subs-cols,
.dbx-main .dbx-subs-toolbar { max-width: 1180px; margin-right: auto; }
.dbx-main .dbx-subs .dbx-subs-row,
.dbx-main .dbx-subs-cols { grid-template-columns: 4px minmax(300px, 1fr) 180px 210px 150px; column-gap: 30px; }
.dbx-main .dbx-drip-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: rgba(167, 139, 250, 0.045); border: 1px solid rgba(167, 139, 250, 0.16); border-radius: 16px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 12px 14px; margin: 0 0 18px; box-shadow: 0 8px 28px rgba(9, 3, 30, 0.35); }
.dbx-main .dbx-drip-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.dbx .dbx-drip-tab { -webkit-appearance: none; appearance: none; border: 1px solid transparent; background: transparent; color: rgba(237, 233, 254, 0.52); font: inherit; font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 10px; cursor: pointer; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; height: auto; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx .dbx-drip-tab:hover { color: #EDE9FE; background: rgba(167, 139, 250, 0.1); text-decoration: none; }
.dbx .dbx-drip-tab.is-active { color: #150B3D; background: #FACA33; font-weight: 700; box-shadow: 0 4px 14px rgba(250, 202, 51, 0.25); }
.dbx-main .dbx-drip-search { display: flex; align-items: center; margin: 0; flex: 0 1 300px; min-width: 220px; background: #0A0420; border: 1px solid rgba(167, 139, 250, 0.22); border-radius: 11px; overflow: hidden; transition: border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-drip-search:focus-within { border-color: #A78BFA; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.16); }
.dbx-main .dbx-drip-search .input-group { display: flex; flex: 1; align-items: center; background: transparent; border: none; box-shadow: none; margin: 0; width: auto; }
.dbx-main .dbx-drip-mag { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 40px; }
.dbx-main .dbx-drip-mag svg { width: 16px; height: 16px; stroke: rgba(237, 233, 254, 0.52); }
.dbx .dbx-drip-search .dbx-drip-search-in { flex: 1; min-width: 0; background: transparent; border: none; box-shadow: none; color: #EDE9FE; font: inherit; font-size: 14px; height: 40px; padding: 0 4px 0 0; }
.dbx .dbx-drip-search .dbx-drip-search-in:focus { outline: none; border: none; box-shadow: none; }
.dbx-main .dbx-drip-search .dbx-drip-go { flex: 0 0 auto; height: 40px; padding: 0 14px; border: none; border-radius: 0; box-shadow: none; background: rgba(167, 139, 250, 0.14); color: #C4B5FD; cursor: pointer; display: grid; place-items: center; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-drip-search .dbx-drip-go:hover { background: rgba(167, 139, 250, 0.26); color: #fff; }
.dbx-main .dbx-drip-search .dbx-drip-go svg { width: 15px; height: 15px; stroke: currentColor; }
.dbx-main .dbx-drip-cols { gap: 30px; align-items: center; padding: 0 22px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(237, 233, 254, 0.52); }
.dbx-main .dbx-drip-cols span:nth-child(5) { text-align: right; }
.dbx-main .dbx-drip { background: linear-gradient(180deg, #221453, #170D3D); background-color: #1B1045; border: 1px solid rgba(167, 139, 250, 0.32); border-radius: 20px; box-shadow: 0 30px 80px rgba(9, 3, 30, 0.55); overflow: hidden; }
.dbx-main .dbx-drip .dbx-drip-row { display: grid; align-items: center; padding: 18px 22px; border-bottom: 1px solid rgba(167, 139, 250, 0.1); transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-drip .dbx-drip-row:last-child { border-bottom: none; }
.dbx-main .dbx-drip .dbx-drip-row:hover { background: rgba(167, 139, 250, 0.05); }
.dbx-main .dbx-drip .dbx-drip-rail { width: 4px; height: 62px; align-self: center; border-radius: 999px; background: #A78BFA; }
.dbx-main .dbx-drip .is-act .dbx-drip-rail { background: #34D399; }
.dbx-main .dbx-drip .is-comp .dbx-drip-rail { background: #38BDF8; }
.dbx-main .dbx-drip .is-canc .dbx-drip-rail { background: #F87171; }
.dbx-main .dbx-drip .dbx-drip-idy { display: flex; gap: 13px; align-items: flex-start; min-width: 0; }
.dbx-main .dbx-drip .dbx-drip-ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px; background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.22); display: grid; place-items: center; }
.dbx-main .dbx-drip .dbx-drip-ic img { width: 20px; height: 20px; }
.dbx-main .dbx-drip .dbx-drip-ic svg { width: 20px; height: 20px; display: block; }
.dbx-main .dbx-drip .dbx-drip-ic.is-mono { font-weight: 700; font-size: 15px; color: #C4B5FD; }
.dbx-main .dbx-drip .dbx-drip-idy-b { min-width: 0; }
.dbx-main .dbx-drip .dbx-drip-svc-line { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-width: 0; }
.dbx-main .dbx-drip .dbx-drip-name { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-main .dbx-drip .dbx-drip-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; min-width: 0; }
.dbx-main .dbx-drip .dbx-drip-id { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; font-weight: 700; color: #FACA33; background: rgba(250, 202, 51, 0.14); border: 1px solid rgba(250, 202, 51, 0.45); padding: 3px 9px; border-radius: 7px; cursor: pointer; text-decoration: none; user-select: none; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-drip .dbx-drip-id:hover { background: rgba(250, 202, 51, 0.24); border-color: #FACA33; color: #fff; text-decoration: none; }
.dbx-main .dbx-drip .dbx-drip-id svg { width: 11px; height: 11px; stroke: currentColor; opacity: 0.8; }
.dbx-main .dbx-drip .dbx-drip-id:focus-visible { outline: 2px solid #FACA33; outline-offset: 2px; }
.dbx-main .dbx-drip .dbx-drip-link { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: rgba(237, 233, 254, 0.52); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-main .dbx-drip .dbx-drip-dates { display: flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(237, 233, 254, 0.52); line-height: 1; }
.dbx-main .dbx-drip .dbx-drip-dates svg { width: 11px; height: 11px; stroke: currentColor; opacity: 0.75; flex: none; }
.dbx-main .dbx-drip .dbx-drip-runs { min-width: 0; }
.dbx-main .dbx-drip .dbx-drip-runs-top { display: flex; align-items: baseline; margin-bottom: 6px; }
.dbx-main .dbx-drip .dbx-drip-runs-l { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(237, 233, 254, 0.52); font-weight: 600; }
.dbx-main .dbx-drip .dbx-drip-runs-v { font-size: 13px; font-weight: 700; color: #C4B5FD; margin-left: auto; }
.dbx-main .dbx-drip .dbx-drip-track { height: 6px; border-radius: 999px; background: rgba(167, 139, 250, 0.14); overflow: hidden; position: relative; }
.dbx-main .dbx-drip .dbx-drip-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6D28D9, #A78BFA); position: relative; }
.dbx-main .dbx-drip .dbx-drip-fill::after { content: ''; position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 60%); }
.dbx-main .dbx-drip .is-act .dbx-drip-fill { background: linear-gradient(90deg, #10b981, #34D399); box-shadow: 0 0 10px rgba(52, 211, 153, 0.45); }
.dbx-main .dbx-drip .is-comp .dbx-drip-fill { background: linear-gradient(90deg, #0EA5E9, #38BDF8); box-shadow: 0 0 10px rgba(56, 189, 248, 0.45); }
.dbx-main .dbx-drip .is-canc .dbx-drip-fill { background: linear-gradient(90deg, #DC6A6A, #F87171); box-shadow: none; }
.dbx-main .dbx-drip .dbx-drip-totq { font-size: 11px; color: rgba(237, 233, 254, 0.52); margin-top: 7px; }
.dbx-main .dbx-drip .dbx-drip-totq b { color: #EDE9FE; font-weight: 600; }
.dbx-main .dbx-drip .dbx-drip-det { display: flex; flex-direction: column; gap: 10px; }
.dbx-main .dbx-drip .dbx-drip-it-l { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(237, 233, 254, 0.52); font-weight: 600; margin-bottom: 2px; }
.dbx-main .dbx-drip .dbx-drip-it-v { font-size: 12.5px; color: #fff; font-weight: 600; }
.dbx-main .dbx-drip .dbx-drip-it-v.is-money { color: #FACA33; }
.dbx-main .dbx-drip .dbx-drip-it-v.is-zero { color: rgba(237, 233, 254, 0.52); }
.dbx-main .dbx-drip .dbx-drip-sa { display: flex; justify-content: flex-end; }
.dbx-main .dbx-drip .dbx-drip-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.dbx-main .dbx-drip .dbx-drip-dot { width: 6px; height: 6px; border-radius: 50%; }
.dbx-main .dbx-drip .dbx-drip-badge.is-act { color: #34D399; background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.42); }
.dbx-main .dbx-drip .dbx-drip-badge.is-act .dbx-drip-dot { background: #34D399; }
.dbx-main .dbx-drip .dbx-drip-badge.is-comp { color: #38BDF8; background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.42); }
.dbx-main .dbx-drip .dbx-drip-badge.is-comp .dbx-drip-dot { background: #38BDF8; }
.dbx-main .dbx-drip .dbx-drip-badge.is-canc { color: #F87171; background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.42); }
.dbx-main .dbx-drip .dbx-drip-badge.is-canc .dbx-drip-dot { background: #F87171; }
.dbx-main .dbx-drip .dbx-drip-empty { padding: 40px 22px; text-align: center; color: rgba(237, 233, 254, 0.52); }
.dbx-main .dbx-subs .dbx-subs-fill { display: block; }
.dbx-main .dbx-drip .dbx-drip-fill { display: block; }
.dbx-main .dbx-subs,
.dbx-main .dbx-subs-cols,
.dbx-main .dbx-subs-toolbar { max-width: none; margin-right: 0; }
.dbx-main .dbx-subs .dbx-subs-row,
.dbx-main .dbx-subs-cols { grid-template-columns: 4px minmax(0, 2fr) minmax(160px, 1fr) minmax(190px, 1.1fr) 160px; column-gap: 30px; }
.dbx-main .dbx-drip .dbx-drip-id.is-copied { color: #34D399; border-color: rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.14); }
.dbx-main .dbx-drip .dbx-drip-it-l { text-transform: none; letter-spacing: normal; font-weight: 400; }
.dbx-main .dbx-subs .dbx-subs-det .dbx-subs-it-l { text-transform: none; letter-spacing: normal; font-weight: 400; }
.dbx-main .pagination {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 6px; margin: 20px 0 0; padding: 0; list-style: none;
}
.dbx-main .pagination li { display: flex; margin: 0; padding: 0; list-style: none; }
.dbx-main .pagination li a {
display: inline-flex; align-items: center; justify-content: center;
min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px;
border: 1px solid rgba(167, 139, 250, 0.16);
background: rgba(167, 139, 250, 0.045);
color: var(--purple-subtle, #C4B5FD);
font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none;
box-shadow: none; transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbx-main .pagination li a:hover {
background: rgba(167, 139, 250, 0.14);
color: var(--text-primary, #FFFFFF);
border-color: var(--border-strong, rgba(167, 139, 250, 0.35));
text-decoration: none;
}
.dbx-main .pagination li a:focus { outline: none; box-shadow: none; }
.dbx-main .pagination li a:focus-visible {
outline: 2px solid var(--purple-light, #A78BFA); outline-offset: 2px;
}
.dbx-main .pagination li.active a,
.dbx-main .pagination li.active a:hover,
.dbx-main .pagination li.active a:focus {
background: var(--yellow, #FACA33);
color: var(--bg-dark, #150B3D);
border-color: transparent; font-weight: 700;
}
.dbx-main .pagination li a span {
display: inline-flex; align-items: center; line-height: 1;
}
.dbx-main .dbx-refill-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: rgba(167, 139, 250, 0.045); border: 1px solid rgba(167, 139, 250, 0.16); border-radius: 16px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 12px 14px; margin: 0 0 18px; box-shadow: 0 8px 28px rgba(9, 3, 30, 0.35); }
.dbx-main .dbx-refill-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.dbx .dbx-refill-tab { -webkit-appearance: none; appearance: none; border: 1px solid transparent; background: transparent; color: rgba(237, 233, 254, 0.52); font: inherit; font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 10px; cursor: pointer; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; height: auto; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx .dbx-refill-tab:hover { color: #EDE9FE; background: rgba(167, 139, 250, 0.1); text-decoration: none; }
.dbx .dbx-refill-tab.is-active { color: #150B3D; background: #FACA33; font-weight: 700; box-shadow: 0 4px 14px rgba(250, 202, 51, 0.25); }
.dbx-main .dbx-refill-search { display: flex; align-items: center; margin: 0; flex: 0 1 300px; min-width: 220px; background: #0A0420; border: 1px solid rgba(167, 139, 250, 0.22); border-radius: 11px; overflow: hidden; transition: border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-refill-search:focus-within { border-color: #A78BFA; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.16); }
.dbx-main .dbx-refill-search .input-group { display: flex; flex: 1; align-items: center; background: transparent; border: none; box-shadow: none; margin: 0; width: auto; }
.dbx-main .dbx-refill-mag { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 40px; }
.dbx-main .dbx-refill-mag svg { width: 16px; height: 16px; stroke: rgba(237, 233, 254, 0.52); }
.dbx .dbx-refill-search .dbx-refill-search-in { flex: 1; min-width: 0; background: transparent; border: none; box-shadow: none; color: #EDE9FE; font: inherit; font-size: 14px; height: 40px; padding: 0 4px 0 0; }
.dbx .dbx-refill-search .dbx-refill-search-in:focus { outline: none; border: none; box-shadow: none; }
.dbx-main .dbx-refill-search .dbx-refill-go { flex: 0 0 auto; height: 40px; padding: 0 14px; border: none; border-radius: 0; box-shadow: none; background: rgba(167, 139, 250, 0.14); color: #C4B5FD; cursor: pointer; display: grid; place-items: center; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-refill-search .dbx-refill-go:hover { background: rgba(167, 139, 250, 0.26); color: #fff; }
.dbx-main .dbx-refill-search .dbx-refill-go svg { width: 15px; height: 15px; stroke: currentColor; }
.dbx-main .dbx-refill-cols { gap: 30px; align-items: center; padding: 0 22px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(237, 233, 254, 0.52); }
.dbx-main .dbx-refill-cols .dbx-refill-cols-r { text-align: right; }
.dbx-main .dbx-refill { background: linear-gradient(180deg, #221453, #170D3D); background-color: #1B1045; border: 1px solid rgba(167, 139, 250, 0.32); border-radius: 20px; box-shadow: 0 30px 80px rgba(9, 3, 30, 0.55); overflow: hidden; }
.dbx-main .dbx-refill .dbx-refill-row { display: grid; align-items: center; padding: 18px 22px; border-bottom: 1px solid rgba(167, 139, 250, 0.1); transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-refill .dbx-refill-row:last-child { border-bottom: none; }
.dbx-main .dbx-refill .dbx-refill-row:hover { background: rgba(167, 139, 250, 0.05); }
.dbx-main .dbx-refill .dbx-refill-rail { width: 4px; height: 56px; align-self: center; border-radius: 999px; background: #A78BFA; }
.dbx-main .dbx-refill .is-pending .dbx-refill-rail { background: #A78BFA; }
.dbx-main .dbx-refill .is-inprog .dbx-refill-rail { background: #38BDF8; }
.dbx-main .dbx-refill .is-comp .dbx-refill-rail { background: #34D399; }
.dbx-main .dbx-refill .is-rej .dbx-refill-rail { background: #F87171; }
.dbx-main .dbx-refill .is-err .dbx-refill-rail { background: #FB923C; }
.dbx-main .dbx-refill .dbx-refill-idy { display: flex; gap: 13px; align-items: flex-start; min-width: 0; }
.dbx-main .dbx-refill .dbx-refill-ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px; background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.22); display: grid; place-items: center; }
.dbx-main .dbx-refill .dbx-refill-ic img { width: 20px; height: 20px; }
.dbx-main .dbx-refill .dbx-refill-ic svg { width: 20px; height: 20px; display: block; }
.dbx-main .dbx-refill .dbx-refill-ic.is-mono { font-weight: 700; font-size: 15px; color: #C4B5FD; }
.dbx-main .dbx-refill .dbx-refill-idy-b { min-width: 0; }
.dbx-main .dbx-refill .dbx-refill-name { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-main .dbx-refill .dbx-refill-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; min-width: 0; }
.dbx-main .dbx-refill .dbx-refill-id { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; font-weight: 700; color: #FACA33; background: rgba(250, 202, 51, 0.14); border: 1px solid rgba(250, 202, 51, 0.45); padding: 3px 9px; border-radius: 7px; cursor: pointer; text-decoration: none; user-select: none; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-refill .dbx-refill-id:hover { background: rgba(250, 202, 51, 0.24); border-color: #FACA33; color: #fff; }
.dbx-main .dbx-refill .dbx-refill-id svg { width: 11px; height: 11px; stroke: currentColor; opacity: 0.8; }
.dbx-main .dbx-refill .dbx-refill-id:focus-visible { outline: 2px solid #FACA33; outline-offset: 2px; }
.dbx-main .dbx-refill .dbx-refill-id.is-copied { color: #34D399; border-color: rgba(52, 211, 153, 0.6); background: rgba(52, 211, 153, 0.16); }
.dbx-main .dbx-refill .dbx-refill-order { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #C4B5FD; background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.28); padding: 3px 9px; border-radius: 7px; text-decoration: none; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-refill .dbx-refill-order:hover { background: rgba(167, 139, 250, 0.2); color: #fff; border-color: #A78BFA; text-decoration: none; }
.dbx-main .dbx-refill .dbx-refill-order svg { width: 11px; height: 11px; stroke: currentColor; }
.dbx-main .dbx-refill .dbx-refill-link { display: block; min-width: 0; font-size: 12.5px; color: rgba(237, 233, 254, 0.52); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-main .dbx-refill a.dbx-refill-link:hover { color: #C4B5FD; text-decoration: underline; }
.dbx-main .dbx-refill .dbx-refill-sa { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.dbx-main .dbx-refill .dbx-refill-date { display: flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(237, 233, 254, 0.52); line-height: 1; }
.dbx-main .dbx-refill .dbx-refill-date svg { width: 11px; height: 11px; stroke: currentColor; opacity: 0.75; flex: none; }
.dbx-main .dbx-refill .dbx-refill-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.dbx-main .dbx-refill .dbx-refill-dot { width: 6px; height: 6px; border-radius: 50%; }
.dbx-main .dbx-refill .dbx-refill-badge.is-pending { color: #A78BFA; background: rgba(167, 139, 250, 0.12); border-color: rgba(167, 139, 250, 0.42); }
.dbx-main .dbx-refill .dbx-refill-badge.is-pending .dbx-refill-dot { background: #A78BFA; }
.dbx-main .dbx-refill .dbx-refill-badge.is-inprog { color: #38BDF8; background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.42); }
.dbx-main .dbx-refill .dbx-refill-badge.is-inprog .dbx-refill-dot { background: #38BDF8; }
.dbx-main .dbx-refill .dbx-refill-badge.is-comp { color: #34D399; background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.42); }
.dbx-main .dbx-refill .dbx-refill-badge.is-comp .dbx-refill-dot { background: #34D399; }
.dbx-main .dbx-refill .dbx-refill-badge.is-rej { color: #F87171; background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.42); }
.dbx-main .dbx-refill .dbx-refill-badge.is-rej .dbx-refill-dot { background: #F87171; }
.dbx-main .dbx-refill .dbx-refill-badge.is-err { color: #FB923C; background: rgba(251, 146, 60, 0.12); border-color: rgba(251, 146, 60, 0.42); }
.dbx-main .dbx-refill .dbx-refill-badge.is-err .dbx-refill-dot { background: #FB923C; }
.dbx-main .dbx-refill .dbx-refill-empty { padding: 40px 22px; text-align: center; color: rgba(237, 233, 254, 0.52); }
.dbx-main .dbx-refunds-notice { display: flex; align-items: center; gap: 10px; background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.28); color: #BAE6FD; border-radius: 12px; padding: 11px 15px; margin: 0 0 18px; font-size: 13px; }
.dbx-main .dbx-refunds-notice-ic { display: inline-flex; flex: 0 0 auto; }
.dbx-main .dbx-refunds-notice svg { width: 16px; height: 16px; stroke: currentColor; }
.dbx-main .dbx-refunds-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: rgba(167, 139, 250, 0.045); border: 1px solid rgba(167, 139, 250, 0.16); border-radius: 16px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 12px 14px; margin: 0 0 18px; box-shadow: 0 8px 28px rgba(9, 3, 30, 0.35); }
.dbx-main .dbx-refunds-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.dbx .dbx-refunds-tab { -webkit-appearance: none; appearance: none; border: 1px solid transparent; background: transparent; color: rgba(237, 233, 254, 0.52); font: inherit; font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 10px; cursor: pointer; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; height: auto; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx .dbx-refunds-tab:hover { color: #EDE9FE; background: rgba(167, 139, 250, 0.1); text-decoration: none; }
.dbx .dbx-refunds-tab.is-active { color: #150B3D; background: #FACA33; font-weight: 700; box-shadow: 0 4px 14px rgba(250, 202, 51, 0.25); }
.dbx-main .dbx-refunds-search { display: flex; align-items: center; margin: 0; flex: 0 1 300px; min-width: 220px; background: #0A0420; border: 1px solid rgba(167, 139, 250, 0.22); border-radius: 11px; overflow: hidden; transition: border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-refunds-search:focus-within { border-color: #A78BFA; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.16); }
.dbx-main .dbx-refunds-search .input-group { display: flex; flex: 1; align-items: center; background: transparent; border: none; box-shadow: none; margin: 0; width: auto; }
.dbx-main .dbx-refunds-mag { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 40px; }
.dbx-main .dbx-refunds-mag svg { width: 16px; height: 16px; stroke: rgba(237, 233, 254, 0.52); }
.dbx .dbx-refunds-search .dbx-refunds-search-in { flex: 1; min-width: 0; background: transparent; border: none; box-shadow: none; color: #EDE9FE; font: inherit; font-size: 14px; height: 40px; padding: 0 4px 0 0; }
.dbx .dbx-refunds-search .dbx-refunds-search-in:focus { outline: none; border: none; box-shadow: none; }
.dbx-main .dbx-refunds-search .dbx-refunds-go { flex: 0 0 auto; height: 40px; padding: 0 14px; border: none; border-radius: 0; box-shadow: none; background: rgba(167, 139, 250, 0.14); color: #C4B5FD; cursor: pointer; display: grid; place-items: center; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-refunds-search .dbx-refunds-go:hover { background: rgba(167, 139, 250, 0.26); color: #fff; }
.dbx-main .dbx-refunds-search .dbx-refunds-go svg { width: 15px; height: 15px; stroke: currentColor; }
.dbx-main .dbx-refunds { background: linear-gradient(180deg, #221453, #170D3D); background-color: #1B1045; border: 1px solid rgba(167, 139, 250, 0.32); border-radius: 20px; box-shadow: 0 30px 80px rgba(9, 3, 30, 0.55); overflow: hidden; }
.dbx-main .dbx-refunds .dbx-refunds-row { display: grid; align-items: center; padding: 18px 22px; border-bottom: 1px solid rgba(167, 139, 250, 0.1); transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-refunds .dbx-refunds-row:last-child { border-bottom: none; }
.dbx-main .dbx-refunds .dbx-refunds-row:hover { background: rgba(167, 139, 250, 0.05); }
.dbx-main .dbx-refunds .dbx-refunds-rail { width: 4px; height: 48px; align-self: center; border-radius: 999px; background: rgba(167, 139, 250, 0.5); }
.dbx-main .dbx-refunds .is-canc .dbx-refunds-rail { background: #F87171; }
.dbx-main .dbx-refunds .is-partial .dbx-refunds-rail { background: #FB923C; }
.dbx-main .dbx-refunds .is-neutral .dbx-refunds-rail { background: rgba(167, 139, 250, 0.5); }
.dbx-main .dbx-refunds .dbx-refunds-ic { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.22); display: grid; place-items: center; color: #C4B5FD; }
.dbx-main .dbx-refunds .dbx-refunds-ic svg { width: 20px; height: 20px; stroke: currentColor; display: block; }
.dbx-main .dbx-refunds .dbx-refunds-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dbx-main .dbx-refunds .dbx-refunds-ord { display: inline-flex; align-items: center; gap: 5px; width: -moz-fit-content; width: fit-content; max-width: 100%; font-size: 13px; font-weight: 600; color: #C4B5FD; text-decoration: none; }
.dbx-main .dbx-refunds .dbx-refunds-ord:hover { color: #fff; }
.dbx-main .dbx-refunds .dbx-refunds-ord svg { width: 12px; height: 12px; stroke: currentColor; opacity: 0.75; flex: none; }
.dbx-main .dbx-refunds .dbx-refunds-amt { font-size: 16px; font-weight: 700; color: #FACA33; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.dbx-main .dbx-refunds .dbx-refunds-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.dbx-main .dbx-refunds .dbx-refunds-date { font-size: 12.5px; color: rgba(237, 233, 254, 0.52); white-space: nowrap; }
.dbx-main .dbx-refunds .dbx-refunds-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.dbx-main .dbx-refunds .dbx-refunds-dot { width: 6px; height: 6px; border-radius: 50%; }
.dbx-main .dbx-refunds .dbx-refunds-badge.is-canc { color: #F87171; background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.42); }
.dbx-main .dbx-refunds .dbx-refunds-badge.is-canc .dbx-refunds-dot { background: #F87171; }
.dbx-main .dbx-refunds .dbx-refunds-badge.is-partial { color: #FB923C; background: rgba(251, 146, 60, 0.12); border-color: rgba(251, 146, 60, 0.42); }
.dbx-main .dbx-refunds .dbx-refunds-badge.is-partial .dbx-refunds-dot { background: #FB923C; }
.dbx-main .dbx-refunds .dbx-refunds-badge.is-neutral { color: rgba(237, 233, 254, 0.7); background: rgba(167, 139, 250, 0.1); border-color: rgba(167, 139, 250, 0.3); }
.dbx-main .dbx-refunds .dbx-refunds-badge.is-neutral .dbx-refunds-dot { background: rgba(237, 233, 254, 0.6); }
.dbx-main .dbx-refunds .dbx-refunds-empty { padding: 40px 22px; text-align: center; color: rgba(237, 233, 254, 0.52); }
.dbx .dbx-mass-result { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-radius: 12px; padding: 11px 15px; margin: 0 0 16px; font-size: 13px; border: 1px solid transparent; }
.dbx .dbx-mass-result.is-ok { background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.4); }
.dbx .dbx-mass-result.is-err { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.4); }
.dbx .dbx-mass-result-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.dbx .dbx-mass-result.is-ok .dbx-mass-result-ic { background: rgba(52, 211, 153, 0.2); color: #34D399; }
.dbx .dbx-mass-result.is-err .dbx-mass-result-ic { background: rgba(248, 113, 113, 0.2); color: #F87171; }
.dbx .dbx-mass-result-t { font-weight: 700; color: #fff; }
.dbx .dbx-mass-result-d { color: rgba(237, 233, 254, 0.7); min-width: 0; }
.dbx .dbx-mass-result-a { margin-inline-start: auto; color: #C4B5FD; text-decoration: none; font-weight: 600; white-space: nowrap; }
.dbx .dbx-mass-result-a:hover { color: #fff; text-decoration: underline; }
.dbx .dbx-mass-result-x { background: none; border: none; color: rgba(237, 233, 254, 0.5); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; flex: 0 0 auto; }
.dbx .dbx-mass-result-x:hover { color: #fff; }
.dbx-main .dbx-orders .dbx-ord-status-top { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; border: 1px solid transparent; }
.dbx-main .dbx-orders .dbx-ord-dot { width: 6px; height: 6px; }
.dbx-main .dbx-orders .dbx-ord-status-lbl { font-size: 12px; }
.dbx-main .dbx-orders .is-ok .dbx-ord-status-top { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.42); }
.dbx-main .dbx-orders .is-wait .dbx-ord-status-top { background: rgba(167, 139, 250, 0.12); border-color: rgba(167, 139, 250, 0.42); }
.dbx-main .dbx-orders .is-run .dbx-ord-status-top { background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.42); }
.dbx-main .dbx-orders .is-proc .dbx-ord-status-top { background: rgba(129, 140, 248, 0.12); border-color: rgba(129, 140, 248, 0.42); }
.dbx-main .dbx-orders .is-part .dbx-ord-status-top { background: rgba(251, 146, 60, 0.12); border-color: rgba(251, 146, 60, 0.42); }
.dbx-main .dbx-orders .is-bad .dbx-ord-status-top { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.42); }
.dbx-main .dbx-drip .is-act .dbx-drip-rail { background: #38BDF8; }
.dbx-main .dbx-drip .is-comp .dbx-drip-rail { background: #34D399; }
.dbx-main .dbx-drip .is-act .dbx-drip-fill { background: linear-gradient(90deg, #0EA5E9, #38BDF8); box-shadow: 0 0 10px rgba(56, 189, 248, 0.45); }
.dbx-main .dbx-drip .is-comp .dbx-drip-fill { background: linear-gradient(90deg, #10b981, #34D399); box-shadow: 0 0 10px rgba(52, 211, 153, 0.45); }
.dbx-main .dbx-drip .dbx-drip-badge.is-act { color: #38BDF8; background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.42); }
.dbx-main .dbx-drip .dbx-drip-badge.is-act .dbx-drip-dot { background: #38BDF8; }
.dbx-main .dbx-drip .dbx-drip-badge.is-comp { color: #34D399; background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.42); }
.dbx-main .dbx-drip .dbx-drip-badge.is-comp .dbx-drip-dot { background: #34D399; }
.dbx-main .dbx-updates-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: rgba(167, 139, 250, 0.045); border: 1px solid rgba(167, 139, 250, 0.16); border-radius: 16px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 12px 14px; margin: 0 0 18px; box-shadow: 0 8px 28px rgba(9, 3, 30, 0.35); }
.dbx-main .dbx-updates-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.dbx .dbx-updates-tab { -webkit-appearance: none; appearance: none; border: 1px solid transparent; background: transparent; color: rgba(237, 233, 254, 0.52); font: inherit; font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 10px; cursor: pointer; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; height: auto; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx .dbx-updates-tab:hover { color: #EDE9FE; background: rgba(167, 139, 250, 0.1); text-decoration: none; }
.dbx .dbx-updates-tab.is-active { color: #150B3D; background: #FACA33; font-weight: 700; box-shadow: 0 4px 14px rgba(250, 202, 51, 0.25); }
.dbx-main .dbx-updates-search { display: flex; align-items: center; margin: 0; flex: 0 1 300px; min-width: 220px; background: #0A0420; border: 1px solid rgba(167, 139, 250, 0.22); border-radius: 11px; overflow: hidden; transition: border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-updates-search:focus-within { border-color: #A78BFA; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.16); }
.dbx-main .dbx-updates-search .input-group { display: flex; flex: 1; align-items: center; background: transparent; border: none; box-shadow: none; margin: 0; width: auto; }
.dbx-main .dbx-updates-mag { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 40px; }
.dbx-main .dbx-updates-mag svg { width: 16px; height: 16px; stroke: rgba(237, 233, 254, 0.52); }
.dbx .dbx-updates-search .dbx-updates-search-in { flex: 1; min-width: 0; background: transparent; border: none; box-shadow: none; color: #EDE9FE; font: inherit; font-size: 14px; height: 40px; padding: 0 4px 0 0; }
.dbx .dbx-updates-search .dbx-updates-search-in:focus { outline: none; border: none; box-shadow: none; }
.dbx-main .dbx-updates-search .dbx-updates-go { flex: 0 0 auto; height: 40px; padding: 0 14px; border: none; border-radius: 0; box-shadow: none; background: rgba(167, 139, 250, 0.14); color: #C4B5FD; cursor: pointer; display: grid; place-items: center; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-updates-search .dbx-updates-go:hover { background: rgba(167, 139, 250, 0.26); color: #fff; }
.dbx-main .dbx-updates-search .dbx-updates-go svg { width: 15px; height: 15px; stroke: currentColor; }
.dbx-main .dbx-updates-cols { gap: 22px; align-items: center; padding: 0 22px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(237, 233, 254, 0.52); }
.dbx-main .dbx-updates-cols .dbx-updates-cols-r { text-align: right; }
.dbx-main .dbx-updates { background: linear-gradient(180deg, #221453, #170D3D); background-color: #1B1045; border: 1px solid rgba(167, 139, 250, 0.32); border-radius: 20px; box-shadow: 0 30px 80px rgba(9, 3, 30, 0.55); overflow: hidden; }
.dbx-main .dbx-updates .dbx-upd-row { display: grid; align-items: center; gap: 22px; padding: 18px 22px; border-bottom: 1px solid rgba(167, 139, 250, 0.1); transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-updates .dbx-upd-row:last-child { border-bottom: none; }
.dbx-main .dbx-updates .dbx-upd-row:hover { background: rgba(167, 139, 250, 0.05); }
.dbx-main .dbx-updates .dbx-upd-rail { width: 4px; height: 40px; align-self: center; border-radius: 999px; background: #A78BFA; }
.dbx-main .dbx-updates .is-down .dbx-upd-rail, .dbx-main .dbx-updates .is-enabled .dbx-upd-rail { background: #34D399; }
.dbx-main .dbx-updates .is-up .dbx-upd-rail, .dbx-main .dbx-updates .is-disabled .dbx-upd-rail { background: #F87171; }
.dbx-main .dbx-updates .dbx-upd-ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px; background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.22); display: grid; place-items: center; }
.dbx-main .dbx-updates .dbx-upd-ic img { width: 19px; height: 19px; opacity: 0.95; }
.dbx-main .dbx-updates .dbx-upd-ic svg { width: 19px; height: 19px; display: block; }
.dbx-main .dbx-updates .dbx-upd-ic.is-mono { font-weight: 700; font-size: 15px; color: #C4B5FD; }
.dbx-main .dbx-updates .dbx-upd-svc { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dbx-main .dbx-updates .dbx-upd-sid { flex: 0 0 auto; display: inline-flex; align-items: center; background: rgba(167, 139, 250, 0.24); border: 1px solid rgba(167, 139, 250, 0.55); color: #DDD6FE; font-weight: 700; font-size: 12px; padding: 3px 9px; border-radius: 8px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.dbx-main .dbx-updates .dbx-upd-name { font-size: 14px; font-weight: 600; color: #EDE9FE; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dbx-main .dbx-updates .dbx-upd-cell { justify-self: start; min-width: 0; }
.dbx-main .dbx-updates .dbx-upd-rate { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.dbx-main .dbx-updates .dbx-upd-rate-ic { display: inline-flex; }
.dbx-main .dbx-updates .dbx-upd-rate-ic svg { width: 15px; height: 15px; }
.dbx-main .dbx-updates .dbx-upd-old { color: rgba(237, 233, 254, 0.52); }
.dbx-main .dbx-updates .dbx-upd-arr { color: rgba(237, 233, 254, 0.52); font-size: 12px; }
.dbx-main .dbx-updates .dbx-upd-arr::before { content: "\2192"; }
.dbx-main .dbx-updates .dbx-upd-rate.is-down .dbx-upd-rate-ic svg { stroke: #34D399; }
.dbx-main .dbx-updates .dbx-upd-rate.is-down .dbx-upd-new { color: #34D399; font-weight: 700; }
.dbx-main .dbx-updates .dbx-upd-rate.is-up .dbx-upd-rate-ic svg { stroke: #F87171; }
.dbx-main .dbx-updates .dbx-upd-rate.is-up .dbx-upd-new { color: #F87171; font-weight: 700; }
.dbx-main .dbx-updates .dbx-upd-raw { font-size: 13px; }
.dbx-main .dbx-updates .dbx-upd-raw.is-down { color: #34D399; }
.dbx-main .dbx-updates .dbx-upd-raw.is-up { color: #F87171; }
.dbx-main .dbx-updates .dbx-upd-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.dbx-main .dbx-updates .dbx-upd-badge-ic { display: inline-flex; }
.dbx-main .dbx-updates .dbx-upd-badge-ic svg { width: 13px; height: 13px; }
.dbx-main .dbx-updates .dbx-upd-badge.is-enabled { color: #34D399; background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.42); }
.dbx-main .dbx-updates .dbx-upd-badge.is-enabled .dbx-upd-badge-ic svg { stroke: #34D399; }
.dbx-main .dbx-updates .dbx-upd-badge.is-disabled { color: #F87171; background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.42); }
.dbx-main .dbx-updates .dbx-upd-badge.is-disabled .dbx-upd-badge-ic svg { stroke: #F87171; }
.dbx-main .dbx-updates .dbx-upd-date { font-size: 12.5px; color: rgba(237, 233, 254, 0.52); text-align: right; white-space: nowrap; }
.dbx-main .dbx-updates .dbx-upd-meta { display: none; }
.dbx-main .dbx-updates .dbx-upd-date-s { font-size: 12.5px; color: rgba(237, 233, 254, 0.52); white-space: nowrap; }
.dbx-main .dbx-updates .dbx-updates-empty { padding: 40px 22px; text-align: center; color: rgba(237, 233, 254, 0.52); }
.dbx-main .dbx-updates .is-new-service .dbx-upd-rail { background: #38BDF8; }
.dbx-main .dbx-updates .dbx-upd-badge.is-new-service { color: #38BDF8; background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.42); }
.dbx-main .dbx-updates .dbx-upd-badge.is-new-service .dbx-upd-badge-ic svg { stroke: #38BDF8; }
.dbx-main .dbx-updates .dbx-upd-name .dbx-upd-tags { color: rgba(237, 233, 254, 0.52); font-weight: 500; }
.dbx-main .dbx-account { width: 100%; }
.dbx-main .dbx-account .dbx-acc-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #A78BFA; margin-bottom: 8px; }
.dbx-main .dbx-account .dbx-acc-h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 22px; color: #fff; }
.dbx-main .dbx-account .dbx-acc-tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(167, 139, 250, 0.16); margin-bottom: 26px; overflow-x: auto; }
.dbx-main .dbx-account .dbx-acc-tab { position: relative; font: inherit; font-size: 14px; font-weight: 600; color: rgba(237, 233, 254, 0.52); background: transparent; border: none; padding: 13px 16px; cursor: pointer; white-space: nowrap; transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.dbx-main .dbx-account .dbx-acc-tab-ic { display: inline-flex; }
.dbx-main .dbx-account .dbx-acc-tab-ic svg { width: 16px; height: 16px; stroke: currentColor; }
.dbx-main .dbx-account .dbx-acc-tab:hover { color: #EDE9FE; }
.dbx-main .dbx-account .dbx-acc-tab.is-active { color: #C4B5FD; }
.dbx-main .dbx-account .dbx-acc-tab.is-active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: #A78BFA; border-radius: 2px; }
.dbx-main .dbx-account .dbx-acc-panel { display: none; }
.dbx-main .dbx-account .dbx-acc-panel.is-show { display: block; }
.dbx-main .dbx-account .dbx-acc-card { background: linear-gradient(180deg, #221453, #170D3D); background-color: #1B1045; border: 1px solid rgba(167, 139, 250, 0.32); border-radius: 18px; box-shadow: 0 24px 60px rgba(9, 3, 30, 0.5); padding: 24px; margin-bottom: 18px; }
.dbx-main .dbx-account .dbx-acc-card-t { font-size: 17px; font-weight: 700; margin: 0 0 4px; color: #fff; }
.dbx-main .dbx-account .dbx-acc-card-d { font-size: 13px; color: rgba(237, 233, 254, 0.52); line-height: 1.55; margin: 0 0 18px; }
.dbx-main .dbx-account .dbx-acc-field { margin-bottom: 16px; }
.dbx-main .dbx-account .dbx-acc-label, .dbx-main .dbx-account label, .dbx-main .dbx-account .control-label { display: block; font-size: 12.5px; font-weight: 600; color: #C4B5FD; margin-bottom: 7px; }
.dbx-main .dbx-account .dbx-acc-hint, .dbx-main .dbx-account .help-block { font-size: 12px; color: rgba(237, 233, 254, 0.52); margin-top: 12px; }
.dbx-main .dbx-account .dbx-acc-inp, .dbx-main .dbx-account .form-control, .dbx-main .dbx-account input[type="text"], .dbx-main .dbx-account input[type="email"], .dbx-main .dbx-account input[type="password"], .dbx-main .dbx-account select { width: 100%; background: #0A0420; border: 1px solid rgba(167, 139, 250, 0.22); border-radius: 11px; color: #EDE9FE; font: inherit; font-size: 14px; padding: 12px 14px; box-shadow: none; height: auto; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-account .form-control:focus, .dbx-main .dbx-account input:focus, .dbx-main .dbx-account select:focus { outline: none; border-color: #A78BFA; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.16); }
.dbx-main .dbx-account input[readonly], .dbx-main .dbx-account .dbx-acc-inp[readonly] { color: rgba(237, 233, 254, 0.52); background: rgba(10, 4, 32, 0.6); }
.dbx-main .dbx-account select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A78BFA' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.dbx-main .dbx-account .dbx-acc-erow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dbx-main .dbx-account .dbx-acc-inp-grow { flex: 1; min-width: 220px; width: auto; }
.dbx-main .dbx-account .dbx-acc-btn, .dbx-main .dbx-account .btn, .dbx-main .dbx-account button[type="submit"], .dbx-main .dbx-account input[type="submit"] { display: inline-flex; align-items: center; gap: 8px; background: #7C3AED; color: #fff; font: inherit; font-size: 14px; font-weight: 600; border: none; border-radius: 11px; padding: 12px 20px; cursor: pointer; box-shadow: none; text-shadow: none; width: auto; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-account .btn:hover, .dbx-main .dbx-account button[type="submit"]:hover, .dbx-main .dbx-account input[type="submit"]:hover, .dbx-main .dbx-account .dbx-acc-btn:hover { background: #8B5CF6; color: #fff; transform: translateY(-1px); }
.dbx-main .dbx-account .dbx-acc-btn-sm { padding: 9px 15px; font-size: 13px; }
.dbx-main .dbx-account .dbx-acc-form { margin: 0; }
.dbx-main .dbx-account .dbx-acc-form .form-group { margin-bottom: 16px; }
.dbx-main .dbx-account .dbx-acc-pwwrap { position: relative; display: block; }
.dbx-main .dbx-account .dbx-acc-pwwrap .form-control, .dbx-main .dbx-account .dbx-acc-pwwrap input { padding-right: 44px; }
.dbx-main .dbx-account .dbx-acc-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border: none; cursor: pointer; padding: 0; box-shadow: none; }
.dbx-main .dbx-account .dbx-acc-eye:hover { background: transparent; transform: translateY(-50%); }
.dbx-main .dbx-account .dbx-acc-eye svg { width: 17px; height: 17px; stroke: rgba(237, 233, 254, 0.52); }
.dbx-main .dbx-account .dbx-acc-eye:hover svg { stroke: #C4B5FD; }
.dbx-main .dbx-account .dbx-acc-meter { display: flex; gap: 5px; margin-top: 9px; }
.dbx-main .dbx-account .dbx-acc-meter span { flex: 1; height: 4px; border-radius: 999px; background: rgba(167, 139, 250, 0.18); transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-account .dbx-acc-meter-lbl { font-size: 11.5px; color: rgba(237, 233, 254, 0.52); margin-top: 6px; }
.dbx-main .dbx-account .dbx-acc-warn { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: #FB923C; background: rgba(251, 146, 60, 0.08); border: 1px solid rgba(251, 146, 60, 0.25); border-radius: 10px; padding: 9px 12px; margin: 14px 0; }
.dbx-main .dbx-account .dbx-acc-warn-ic { display: inline-flex; flex: 0 0 auto; margin-top: 1px; }
.dbx-main .dbx-account .dbx-acc-warn svg { width: 14px; height: 14px; stroke: currentColor; }
.dbx-main .dbx-account .dbx-acc-link { display: inline-flex; align-items: center; gap: 6px; color: #C4B5FD; font-size: 13px; font-weight: 600; text-decoration: none; margin-bottom: 4px; }
.dbx-main .dbx-account .dbx-acc-link:hover { color: #fff; }
.dbx-main .dbx-account .dbx-acc-link-ic { display: inline-flex; }
.dbx-main .dbx-account .dbx-acc-link svg { width: 14px; height: 14px; stroke: currentColor; }
.dbx-main .dbx-account .dbx-acc-form p { font-size: 13px; color: rgba(237, 233, 254, 0.52); line-height: 1.55; margin: 0 0 14px; }
.dbx-main .dbx-account .dbx-acc-notif-prefs table { width: 100%; border-collapse: collapse; }
.dbx-main .dbx-account .dbx-acc-notif-prefs th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(237, 233, 254, 0.52); padding: 0 0 10px; border-bottom: 1px solid rgba(167, 139, 250, 0.16); }
.dbx-main .dbx-account .dbx-acc-notif-prefs td { padding: 13px 0; border-bottom: 1px solid rgba(167, 139, 250, 0.1); font-size: 14px; color: #EDE9FE; vertical-align: middle; }
.dbx-main .dbx-account .dbx-acc-notif-prefs tr:last-child td { border-bottom: none; }
.dbx-main .dbx-account .dbx-acc-tog { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(167, 139, 250, 0.1); }
.dbx-main .dbx-account .dbx-acc-tog:first-child { padding-top: 0; }
.dbx-main .dbx-account .dbx-acc-tog:last-child { border-bottom: none; }
.dbx-main .dbx-account .dbx-acc-tog-l { min-width: 0; }
.dbx-main .dbx-account .dbx-acc-tog-t { font-size: 14px; font-weight: 600; color: #fff; }
.dbx-main .dbx-account .dbx-acc-tog-d { font-size: 12px; color: rgba(237, 233, 254, 0.52); margin-top: 3px; line-height: 1.45; }
.dbx-main .dbx-account .dbx-acc-switch { flex: 0 0 auto; position: relative; width: 42px; height: 24px; border-radius: 999px; background: rgba(167, 139, 250, 0.2); border: 1px solid rgba(167, 139, 250, 0.22); cursor: pointer; padding: 0; transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-account .dbx-acc-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #C4B5FD; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.dbx-main .dbx-account .dbx-acc-switch.is-on { background: #7C3AED; border-color: #7C3AED; }
.dbx-main .dbx-account .dbx-acc-switch.is-on::after { left: 20px; background: #fff; }
.dbx-main .dbx-account .dbx-acc-saved { display: inline-block; font-size: 12.5px; color: #34D399; margin-top: 12px; }
.dbx-main .dbx-account .dbx-acc-notif-prefs table, .dbx-main .dbx-account .dbx-acc-notif-prefs tbody { display: block; width: 100%; }
.dbx-main .dbx-account .dbx-acc-notif-prefs thead { display: none; }
.dbx-main .dbx-account .dbx-acc-notif-prefs tr { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid rgba(167, 139, 250, 0.1); }
.dbx-main .dbx-account .dbx-acc-notif-prefs tr:last-child { border-bottom: none; }
.dbx-main .dbx-account .dbx-acc-notif-prefs td { display: block; padding: 0; border: none; }
.dbx-main .dbx-account .dbx-acc-notif-prefs td:first-child { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #fff; }
.dbx-main .dbx-account .dbx-acc-notif-prefs td:last-child { flex: 0 0 auto; }
.dbx-main .dbx-account .dbx-acc-confrow { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.dbx-main .dbx-account .dbx-acc-confl { flex: 1; min-width: 240px; }
.dbx-main .dbx-account .dbx-acc-conft { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.dbx-main .dbx-account .dbx-acc-conft > span:first-child { font-size: 17px; font-weight: 700; color: #fff; }
.dbx-main .dbx-account .dbx-acc-confl .dbx-acc-card-d { margin: 0; }
.dbx-main .dbx-account .dbx-acc-confform { margin: 0; flex: 0 0 auto; }
.dbx-main .dbx-account .dbx-acc-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.dbx-main .dbx-account .dbx-acc-badge-dot { width: 6px; height: 6px; border-radius: 50%; }
.dbx-main .dbx-account .dbx-acc-badge.is-warn { color: #FB923C; background: rgba(251, 146, 60, 0.12); border-color: rgba(251, 146, 60, 0.4); }
.dbx-main .dbx-account .dbx-acc-badge.is-warn .dbx-acc-badge-dot { background: #FB923C; }
.dbx-main .dbx-account .dbx-acc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dbx-acc-modal { z-index: 1060; }
.dbx-acc-modal .modal-content { background: linear-gradient(180deg, #221453, #170D3D); background-color: #1B1045; border: 1px solid rgba(167, 139, 250, 0.32); border-radius: 18px; box-shadow: 0 40px 100px rgba(6, 2, 18, 0.7); color: #EDE9FE; }
.dbx-acc-modal .modal-header { border-bottom: 1px solid rgba(167, 139, 250, 0.16); padding: 18px 22px; }
.dbx-acc-modal .modal-title, .dbx-acc-modal .modal-header h4 { color: #fff; font-weight: 700; font-size: 18px; }
.dbx-acc-modal .modal-body { padding: 20px 22px; }
.dbx-acc-modal .modal-footer { border-top: 1px solid rgba(167, 139, 250, 0.16); padding: 16px 22px; }
.dbx-acc-modal label, .dbx-acc-modal .control-label { color: #C4B5FD; font-size: 12.5px; font-weight: 600; margin-bottom: 7px; }
.dbx-acc-modal .form-control, .dbx-acc-modal input[type="text"], .dbx-acc-modal input[type="email"], .dbx-acc-modal input[type="password"] { width: 100%; background: #0A0420; border: 1px solid rgba(167, 139, 250, 0.22); border-radius: 11px; color: #EDE9FE; height: auto; padding: 12px 14px; box-shadow: none; }
.dbx-acc-modal .form-control:focus { border-color: #A78BFA; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.16); }
.dbx-acc-modal .btn-primary, .dbx-acc-modal button[type="submit"] { background: #7C3AED; border: none; border-radius: 11px; color: #fff; padding: 12px 20px; }
.dbx-acc-modal .btn-primary:hover, .dbx-acc-modal button[type="submit"]:hover { background: #8B5CF6; color: #fff; }
.dbx-acc-modal .btn-default { background: transparent; border: 1px solid rgba(167, 139, 250, 0.4); color: #C4B5FD; border-radius: 11px; }
.dbx-acc-modal .close { color: #C4B5FD; text-shadow: none; opacity: 0.8; }
.dbx-reset{
position:relative;
min-height:60vh;
display:flex;
align-items:flex-start;
justify-content:center;
padding:64px 20px 96px;
}
.dbx-reset::before{
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
background:
radial-gradient(900px 540px at 88% -10%, rgba(109,40,217,.26), transparent 60%),
radial-gradient(720px 520px at 4% 108%, rgba(250,202,51,.05), transparent 58%);
}
.dbx-reset-card{
position:relative;
z-index:1;
width:100%;
max-width:440px;
margin:0 auto;
background:linear-gradient(180deg,#221453,#170D3D);
background-color:#1B1045;
border:1px solid rgba(167,139,250,.32);
border-radius:20px;
box-shadow:0 30px 80px rgba(9,3,30,.55);
padding:36px;
}
.dbx-reset-ico{
width:54px;height:54px;
border-radius:14px;
background:rgba(167,139,250,.12);
border:1px solid rgba(167,139,250,.22);
display:grid;place-items:center;
margin-bottom:20px;
}
.dbx-reset-ico svg{width:24px;height:24px;stroke:#C4B5FD;stroke-width:2;fill:none}
.dbx-reset-ico-green{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.4)}
.dbx-reset-ico-green svg{stroke:#34D399}
.dbx-reset-h1{
font-size:24px;font-weight:800;letter-spacing:-.01em;
color:#EDE9FE;line-height:1.2;margin:0 0 8px;
}
.dbx-reset-desc{
font-size:13.5px;color:rgba(237,233,254,.52);
line-height:1.55;margin:0 0 24px;
}
.dbx-reset-desc b{color:#C4B5FD;font-weight:600}
.dbx-reset-err{
font-size:13px;color:#FCA5A5;
background:rgba(239,68,68,.1);
border:1px solid rgba(239,68,68,.32);
border-radius:11px;
padding:11px 14px;margin-bottom:16px;
line-height:1.5;
}
.dbx-reset-field{margin-bottom:18px}
.dbx-reset-field label{
display:block;font-size:12.5px;font-weight:600;
color:#C4B5FD;margin-bottom:7px;
}
.dbx-reset .dbx-reset-field input[type="email"],
.dbx-reset .dbx-reset-field input.form-control{
width:100%;
height:auto;
background:#0A0420;
border:1px solid rgba(167,139,250,.22);
border-radius:11px;
color:#EDE9FE;
font:inherit;font-size:14px;
padding:13px 14px;
box-shadow:none;
transition:border-color .2s cubic-bezier(.16,1,.3,1), box-shadow .2s cubic-bezier(.16,1,.3,1);
}
.dbx-reset .dbx-reset-field input[type="email"]:focus,
.dbx-reset .dbx-reset-field input.form-control:focus{
outline:none;
border-color:#A78BFA;
box-shadow:0 0 0 3px rgba(167,139,250,.16);
}
.dbx-reset .dbx-reset-field input::placeholder{color:rgba(237,233,254,.4)}
.dbx-reset-captcha{margin-bottom:18px}
.dbx-reset .dbx-reset-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
width:100%;
background:#7C3AED;
color:#fff;
font:inherit;font-size:14px;font-weight:600;
border:none;
border-radius:11px;
padding:13px 20px;
cursor:pointer;
text-decoration:none;
transition:background-color .2s cubic-bezier(.16,1,.3,1), transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s cubic-bezier(.16,1,.3,1);
}
.dbx-reset .dbx-reset-btn:hover,
.dbx-reset .dbx-reset-btn:focus{
background:#8B5CF6;color:#fff;text-decoration:none;
transform:translateY(-1px);
box-shadow:0 10px 26px rgba(124,58,237,.34);
}
.dbx-reset .dbx-reset-btn:active{transform:translateY(0)}
.dbx-reset .dbx-reset-btn svg{width:16px;height:16px;stroke:currentColor;fill:none}
.dbx-reset .dbx-reset-btn-ghost{
background:transparent;
border:1px solid rgba(167,139,250,.4);
color:#C4B5FD;
box-shadow:none;
margin-top:2px;
}
.dbx-reset .dbx-reset-btn-ghost:hover,
.dbx-reset .dbx-reset-btn-ghost:focus{
background:rgba(167,139,250,.1);
color:#fff;
box-shadow:none;
transform:translateY(-1px);
}
.dbx-reset-success-pill{
display:inline-flex;align-items:center;gap:6px;
font-size:11.5px;font-weight:600;color:#34D399;
background:rgba(52,211,153,.12);
border:1px solid rgba(52,211,153,.4);
padding:4px 10px;border-radius:999px;
margin-bottom:14px;
}
.dbx-reset-success-pill svg{width:12px;height:12px;stroke:#34D399;stroke-width:2.4;fill:none}
.dbx-reset-muted-line{
font-size:12.5px;color:rgba(237,233,254,.52);
text-align:center;margin:12px 0 0;line-height:1.55;
}
.dbx-reset-muted-line a{color:#C4B5FD;font-weight:600;text-decoration:none}
.dbx-reset-muted-line a:hover{color:#fff}
.dbx-reset-foot{
margin:22px 0 0;text-align:center;
font-size:13px;color:rgba(237,233,254,.52);
}
.dbx-reset-foot a{
color:#C4B5FD;text-decoration:none;font-weight:600;
display:inline-flex;align-items:center;gap:5px;
}
.dbx-reset-foot a:hover{color:#fff}
.dbx-reset-foot a svg{width:13px;height:13px;stroke:currentColor;fill:none}
[dir="rtl"] .dbx-reset .dbx-reset-btn svg,
[dir="rtl"] .dbx-reset-foot a svg{transform:scaleX(-1)}
@media (max-width:520px){
.dbx-reset{padding:40px 16px 72px}
.dbx-reset-card{padding:28px 22px;border-radius:18px}
.dbx-reset-h1{font-size:22px}
.dbx-reset-ico{width:48px;height:48px;border-radius:12px}
.dbx-reset-ico svg{width:22px;height:22px}
.dbx-reset .dbx-reset-pwwrap input.form-control{padding-right:42px}
.dbx-reset-eye{width:30px;height:30px;right:5px}
.dbx-reset-match{font-size:12px}
.dbx-reset .dbx-reset-field input[readonly]{font-size:13.5px}
}
.dbx-reset-ok{
font-size:13px;color:#6EE7B7;
background:rgba(52,211,153,.1);
border:1px solid rgba(52,211,153,.32);
border-radius:11px;
padding:11px 14px;margin-bottom:16px;
line-height:1.5;
}
.dbx-reset .dbx-reset-field input[readonly]{
color:rgba(237,233,254,.62);
cursor:not-allowed;
background:rgba(10,4,32,.7);
}
.dbx-reset-pwwrap{position:relative}
.dbx-reset .dbx-reset-pwwrap input.form-control{padding-right:46px}
.dbx-reset-eye{
position:absolute;
top:50%;right:6px;
transform:translateY(-50%);
display:grid;place-items:center;
width:34px;height:34px;
background:transparent;border:none;
color:rgba(196,181,253,.7);
cursor:pointer;border-radius:8px;
transition:color .2s, background-color .2s;
}
.dbx-reset-eye:hover{color:#C4B5FD;background:rgba(167,139,250,.1)}
.dbx-reset-eye svg{width:18px;height:18px;stroke:currentColor;fill:none}
.dbx-reset-eye .dbx-reset-eye-off{display:none}
.dbx-reset-eye.is-on .dbx-reset-eye-open{display:none}
.dbx-reset-eye.is-on .dbx-reset-eye-off{display:block}
.dbx-reset-meter{
height:5px;border-radius:999px;
background:rgba(167,139,250,.14);
margin-top:9px;overflow:hidden;
}
.dbx-reset-meter span{
display:block;height:100%;width:0;
border-radius:inherit;
transition:width .25s cubic-bezier(.16,1,.3,1), background-color .25s;
}
.dbx-reset-meter[data-s="1"] span{width:25%;background:#EF4444}
.dbx-reset-meter[data-s="2"] span{width:50%;background:#F59E0B}
.dbx-reset-meter[data-s="3"] span{width:75%;background:#A78BFA}
.dbx-reset-meter[data-s="4"] span{width:100%;background:#34D399}
.dbx-reset-meter-lbl{
font-size:11.5px;font-weight:600;
margin-top:6px;min-height:14px;
color:rgba(237,233,254,.52);
}
.dbx-reset-meter-lbl[data-s="1"]{color:#F87171}
.dbx-reset-meter-lbl[data-s="2"]{color:#FBBF24}
.dbx-reset-meter-lbl[data-s="3"]{color:#C4B5FD}
.dbx-reset-meter-lbl[data-s="4"]{color:#34D399}
.dbx-reset-match{
font-size:12px;font-weight:600;
margin-top:8px;min-height:14px;
}
.dbx-reset-match[data-ok="1"]{color:#34D399}
.dbx-reset-match[data-ok="0"]{color:#FCA5A5}
.dbx-main .dbx-account .dbx-acc-card-thead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; }
.dbx-main .dbx-account .dbx-acc-card-thead .dbx-acc-card-t { margin: 0; }
.dbx-main .dbx-account .dbx-acc-2fa-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.dbx-main .dbx-account .dbx-acc-2fa-pill-ic { display: inline-flex; }
.dbx-main .dbx-account .dbx-acc-2fa-pill-ic svg { width: 13px; height: 13px; stroke: currentColor; }
.dbx-main .dbx-account .dbx-acc-2fa-pill.is-off { color: #FB923C; background: rgba(251, 146, 60, 0.12); border-color: rgba(251, 146, 60, 0.4); }
.dbx-main .dbx-account .dbx-acc-2fa-pill.is-on { color: #34D399; background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.4); }
.dbx-main .dbx-account .dbx-acc-switch.is-locked { opacity: 0.4; cursor: not-allowed; }
.dbx-main .dbx-account .dbx-acc-lock-note { margin-top: 16px; font-size: 12.5px; font-weight: 500; color: #FB923C; line-height: 1.5; }
.dbx-main .dbx-account .dbx-acc-notif-prefs .dbx-acc-btn { margin-top: 20px; }
.dbx-2fa{ position:relative; min-height:60vh; display:flex; align-items:flex-start; justify-content:center; padding:64px 20px 96px; }
.dbx-2fa::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background: radial-gradient(900px 540px at 88% -10%, rgba(109,40,217,.26), transparent 60%), radial-gradient(720px 520px at 4% 108%, rgba(250,202,51,.05), transparent 58%); }
.dbx-2fa-card{ position:relative; z-index:1; width:100%; max-width:460px; margin:0 auto;
background:linear-gradient(180deg,#221453,#170D3D); background-color:#1B1045;
border:1px solid rgba(167,139,250,.32); border-radius:20px; box-shadow:0 30px 80px rgba(9,3,30,.55); padding:36px; }
.dbx-2fa-ico{ width:54px; height:54px; border-radius:14px; background:rgba(167,139,250,.12); border:1px solid rgba(167,139,250,.22); display:grid; place-items:center; margin-bottom:20px; }
.dbx-2fa-ico svg{ width:24px; height:24px; stroke:#C4B5FD; stroke-width:2; fill:none; }
.dbx-2fa-h1{ font-size:24px; font-weight:800; letter-spacing:-.01em; color:#EDE9FE; line-height:1.2; margin:0 0 8px; }
.dbx-2fa-desc{ font-size:13.5px; color:rgba(237,233,254,.52); line-height:1.55; margin:0 0 22px; }
.dbx-2fa-email-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; background:rgba(167,139,250,.12); border:1px solid rgba(167,139,250,.3); color:#C4B5FD; padding:4px 10px; border-radius:999px; margin:2px 0 14px; }
.dbx-2fa-email-pill svg{ width:12px; height:12px; stroke:currentColor; fill:none; }
.dbx-2fa-err{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:#F87171; background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.35); border-radius:10px; padding:9px 12px; margin-bottom:14px; line-height:1.5; }
.dbx-2fa-err svg{ width:14px; height:14px; stroke:currentColor; fill:none; flex:0 0 auto; margin-top:1px; }
.dbx-2fa-code{ display:flex; gap:10px; justify-content:space-between; }
.dbx-2fa-code input{ flex:1; min-width:0; aspect-ratio:1 / 1; max-width:54px; height:54px; background:#0A0420; border:1px solid rgba(167,139,250,.22); border-radius:12px; color:#EDE9FE; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:24px; font-weight:600; text-align:center; padding:0; transition:all .2s cubic-bezier(.16,1,.3,1); }
.dbx-2fa-code input:focus{ outline:none; border-color:#A78BFA; box-shadow:0 0 0 3px rgba(167,139,250,.16); }
.dbx-2fa-code input.filled{ border-color:rgba(167,139,250,.5); background:rgba(167,139,250,.08); }
.dbx-2fa-code.err input{ border-color:rgba(248,113,113,.55); background:rgba(248,113,113,.06); animation:dbx-2fa-shake .35s cubic-bezier(.16,1,.3,1); }
@keyframes dbx-2fa-shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }
.dbx-2fa-resend{ text-align:center; margin-top:16px; font-size:12.5px; color:rgba(237,233,254,.52); line-height:1.55; }
.dbx-2fa-resend .timer{ color:#C4B5FD; font-variant-numeric:tabular-nums; font-weight:600; }
.dbx-2fa-resend a{ color:#C4B5FD; font-weight:600; text-decoration:none; }
.dbx-2fa-resend a:hover{ color:#fff; }
.dbx-2fa-resend a.disabled{ color:rgba(237,233,254,.52); cursor:not-allowed; pointer-events:none; }
.dbx-2fa .dbx-2fa-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:20px;
background:#7C3AED; color:#fff; font:inherit; font-size:14px; font-weight:600; border:none; border-radius:11px; padding:13px 20px; cursor:pointer; text-decoration:none;
transition:background-color .2s cubic-bezier(.16,1,.3,1), transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s cubic-bezier(.16,1,.3,1); }
.dbx-2fa .dbx-2fa-btn:hover:not(:disabled), .dbx-2fa .dbx-2fa-btn:focus:not(:disabled){ background:#8B5CF6; color:#fff; transform:translateY(-1px); box-shadow:0 10px 26px rgba(124,58,237,.34); }
.dbx-2fa .dbx-2fa-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.dbx-2fa .dbx-2fa-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; }
.dbx-2fa-foot{ margin:22px 0 0; text-align:center; font-size:13px; color:rgba(237,233,254,.52); }
.dbx-2fa-foot a{ color:#C4B5FD; text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:5px; }
.dbx-2fa-foot a:hover{ color:#fff; }
.dbx-2fa-foot a svg{ width:13px; height:13px; stroke:currentColor; fill:none; }
[dir="rtl"] .dbx-2fa .dbx-2fa-btn svg, [dir="rtl"] .dbx-2fa-foot a svg{ transform:scaleX(-1); }
@media (max-width:520px){
.dbx-2fa{ padding:40px 16px 72px; }
.dbx-2fa-card{ padding:28px 22px; border-radius:18px; }
.dbx-2fa-h1{ font-size:22px; }
.dbx-2fa-code{ gap:6px; }
.dbx-2fa-code input{ max-width:46px; height:46px; font-size:22px; }
}
@media (max-width:360px){
.dbx-2fa-code input{ max-width:44px; height:44px; }
}
.dbx-cp{ padding:8px 24px 64px; }
.dbx-cp-wrap{ max-width:1180px; margin:0 auto; }
.dbx-cp-hero{ padding:48px 0 40px; text-align:center; }
.dbx-cp-tagline{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:#C4B5FD; background:rgba(167,139,250,.1); border:1px solid rgba(167,139,250,.3); padding:6px 14px; border-radius:999px; margin-bottom:22px; }
.dbx-cp-tagline svg{ width:13px; height:13px; stroke:currentColor; stroke-width:2.4; fill:none; }
.dbx-cp-h1{ font-size:54px; font-weight:800; letter-spacing:-.025em; line-height:1.05; margin:0 auto 18px; max-width:880px; color:#fff; }
.dbx-cp-h1 .hl{ color:#FACA33; }
.dbx-cp-lede{ font-size:18px; color:rgba(237,233,254,.52); line-height:1.55; max-width:680px; margin:0 auto 32px; }
.dbx-cp-lede b{ color:#C4B5FD; font-weight:600; }
.dbx-cp-cta{ display:inline-flex; align-items:center; gap:8px; background:#7C3AED; color:#fff; font:inherit; font-size:15px; font-weight:600; border:none; border-radius:12px; padding:15px 26px; cursor:pointer; transition:background-color .2s cubic-bezier(.16,1,.3,1), transform .2s cubic-bezier(.16,1,.3,1); box-shadow:0 14px 40px rgba(124,58,237,.4); }
.dbx-cp-cta:hover{ background:#8B5CF6; transform:translateY(-1px); }
.dbx-cp-cta svg{ width:17px; height:17px; stroke:currentColor; fill:none; }
.dbx-cp-trust{ margin-top:18px; font-size:13px; color:rgba(237,233,254,.52); }
.dbx-cp-trust b{ color:#C4B5FD; font-weight:600; }
.dbx-cp-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:rgba(167,139,250,.04); border:1px solid rgba(167,139,250,.16); border-radius:16px; padding:6px; margin-top:46px; }
.dbx-cp-statc{ padding:18px 14px; text-align:center; border-right:1px solid rgba(167,139,250,.12); }
.dbx-cp-statc:last-child{ border-right:none; }
.dbx-cp-statv{ font-size:24px; font-weight:800; color:#C4B5FD; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.dbx-cp-statl{ font-size:11.5px; color:rgba(237,233,254,.52); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; font-weight:600; }
.dbx-cp-section{ padding:72px 0 0; }
.dbx-cp-h2{ font-size:34px; font-weight:800; letter-spacing:-.02em; text-align:center; margin:0 0 14px; color:#fff; }
.dbx-cp-sublede{ font-size:15px; color:rgba(237,233,254,.52); text-align:center; max-width:560px; margin:0 auto 40px; line-height:1.55; }
.dbx-cp-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.dbx-cp-step{ background:linear-gradient(180deg,#221453,#170D3D); background-color:#1B1045; border:1px solid rgba(167,139,250,.32); border-radius:16px; padding:22px; position:relative; }
.dbx-cp-step-num{ position:absolute; top:18px; right:18px; font-size:11px; font-weight:700; color:#A78BFA; letter-spacing:.05em; }
.dbx-cp-step-ic{ width:42px; height:42px; border-radius:11px; background:rgba(167,139,250,.12); border:1px solid rgba(167,139,250,.22); display:grid; place-items:center; margin-bottom:14px; }
.dbx-cp-step-ic svg{ width:20px; height:20px; stroke:#C4B5FD; stroke-width:2; fill:none; }
.dbx-cp-step-t{ font-size:15px; font-weight:700; color:#EDE9FE; margin-bottom:5px; }
.dbx-cp-step-d{ font-size:13px; color:rgba(237,233,254,.52); line-height:1.55; }
.dbx-cp-benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.dbx-cp-benefit{ background:linear-gradient(180deg,#221453,#170D3D); background-color:#1B1045; border:1px solid rgba(167,139,250,.32); border-radius:16px; padding:22px; }
.dbx-cp-benefit-ic{ width:42px; height:42px; border-radius:11px; background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.32); display:grid; place-items:center; margin-bottom:13px; }
.dbx-cp-benefit-ic svg{ width:20px; height:20px; stroke:#34D399; stroke-width:2.2; fill:none; }
.dbx-cp-benefit-t{ font-size:15.5px; font-weight:700; margin-bottom:5px; color:#fff; }
.dbx-cp-benefit-d{ font-size:13px; color:rgba(237,233,254,.52); line-height:1.55; }
.dbx-cp-order{ background:linear-gradient(180deg,#221453,#170D3D); background-color:#1B1045; border:1px solid rgba(167,139,250,.32); border-radius:22px; box-shadow:0 30px 80px rgba(9,3,30,.6); padding:36px; margin-top:50px; }
.dbx-cp-order-head{ text-align:center; margin-bottom:30px; }
.dbx-cp-order-head h2{ font-size:28px; font-weight:800; letter-spacing:-.01em; margin:0 0 8px; color:#fff; }
.dbx-cp-order-head p{ font-size:14px; color:rgba(237,233,254,.52); margin:0; }
.dbx-cp-err{ display:flex; gap:8px; align-items:flex-start; font-size:13px; color:#F87171; background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.35); border-radius:11px; padding:11px 14px; margin:0 auto 18px; max-width:680px; line-height:1.5; }
.dbx-cp-err svg{ width:15px; height:15px; stroke:currentColor; fill:none; flex:0 0 auto; margin-top:1px; }
.dbx-cp-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:680px; margin:0 auto; }
.dbx-cp-full{ grid-column:1 / -1; }
.dbx-cp-field{ min-width:0; }
.dbx-cp-field label{ display:block; font-size:12.5px; font-weight:600; color:#C4B5FD; margin-bottom:7px; }
.dbx-cp .dbx-cp-form .form-control{ width:100%; height:auto; background:#0A0420; border:1px solid rgba(167,139,250,.22); border-radius:11px; color:#EDE9FE; font:inherit; font-size:14px; padding:12px 14px; box-shadow:none; transition:border-color .2s cubic-bezier(.16,1,.3,1), box-shadow .2s cubic-bezier(.16,1,.3,1); }
.dbx-cp .dbx-cp-form .form-control:focus{ outline:none; border-color:#A78BFA; box-shadow:0 0 0 3px rgba(167,139,250,.16); }
.dbx-cp .dbx-cp-form .form-control::placeholder{ color:rgba(237,233,254,.4); }
.dbx-cp .dbx-cp-form select.form-control{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A78BFA' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }
.dbx-cp-notice{ display:flex; gap:10px; align-items:flex-start; background:rgba(56,189,248,.07); border:1px solid rgba(56,189,248,.28); color:#BAE6FD; border-radius:11px; padding:12px 14px; font-size:13px; line-height:1.5; }
.dbx-cp-notice svg{ width:15px; height:15px; stroke:currentColor; fill:none; flex:0 0 auto; margin-top:2px; }
.dbx-cp-notice code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:#fff; background:rgba(56,189,248,.12); padding:1px 6px; border-radius:5px; font-size:12px; }
.dbx-cp-price{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:18px; background:rgba(250,202,51,.06); border:1px solid rgba(250,202,51,.28); border-radius:11px; padding:14px 16px; margin-top:6px; }
.dbx-cp-pl{ font-size:13.5px; color:rgba(237,233,254,.52); }
.dbx-cp-pl b{ color:#C4B5FD; font-weight:600; display:block; font-size:14.5px; margin-bottom:2px; }
.dbx-cp-pr{ font-size:28px; font-weight:800; color:#FACA33; font-variant-numeric:tabular-nums; letter-spacing:-.01em; white-space:nowrap; }
.dbx-cp-pr small{ font-size:14px; font-weight:600; color:rgba(237,233,254,.52); margin-left:2px; }
.dbx-cp-price-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.dbx-cp .dbx-cp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; background:#7C3AED; color:#fff; font:inherit; font-size:15px; font-weight:600; border:none; border-radius:11px; padding:14px 20px; cursor:pointer; text-decoration:none; transition:background-color .2s cubic-bezier(.16,1,.3,1), transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s cubic-bezier(.16,1,.3,1); }
.dbx-cp .dbx-cp-btn:hover, .dbx-cp .dbx-cp-btn:focus{ background:#8B5CF6; color:#fff; transform:translateY(-1px); box-shadow:0 10px 30px rgba(124,58,237,.35); }
.dbx-cp .dbx-cp-btn svg{ width:17px; height:17px; stroke:currentColor; fill:none; }
.dbx-cp-fineprint{ font-size:11.5px; color:rgba(237,233,254,.52); text-align:center; line-height:1.5; margin:0; }
.dbx-cp-fineprint a{ color:#C4B5FD; font-weight:600; text-decoration:none; }
.dbx-cp-fineprint a:hover{ color:#fff; }
.dbx-cp-faq{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.dbx-cp-faqitem{ background:rgba(167,139,250,.045); border:1px solid rgba(167,139,250,.16); border-radius:14px; overflow:hidden; transition:border-color .2s cubic-bezier(.16,1,.3,1); }
.dbx-cp-faqitem:hover{ border-color:rgba(167,139,250,.3); }
.dbx-cp-faqq{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; cursor:pointer; font-size:14.5px; font-weight:600; color:#EDE9FE; user-select:none; }
.dbx-cp-chev{ flex:0 0 auto; width:20px; height:20px; display:grid; place-items:center; transition:transform .25s cubic-bezier(.16,1,.3,1); }
.dbx-cp-chev svg{ width:14px; height:14px; stroke:#C4B5FD; stroke-width:2.4; fill:none; }
.dbx-cp-faqitem.open .dbx-cp-chev{ transform:rotate(180deg); }
.dbx-cp-faqa{ max-height:0; overflow:hidden; transition:max-height .3s cubic-bezier(.16,1,.3,1); }
.dbx-cp-faqitem.open .dbx-cp-faqa{ max-height:500px; }
.dbx-cp-faqa-inner{ padding:0 18px 18px; font-size:13.5px; color:rgba(237,233,254,.52); line-height:1.65; }
.dbx-cp-faqa-inner b{ color:#C4B5FD; font-weight:600; }
@media (max-width:880px){
.dbx-cp-h1{ font-size:38px; }
.dbx-cp-steps{ grid-template-columns:1fr 1fr; }
.dbx-cp-benefits{ grid-template-columns:1fr 1fr; }
.dbx-cp-order{ padding:24px; }
}
@media (max-width:840px){ .dbx-cp-faq{ grid-template-columns:1fr; } }
@media (max-width:760px){
.dbx-cp-stats{ grid-template-columns:1fr 1fr; }
.dbx-cp-statc:nth-child(2){ border-right:none; }
.dbx-cp-statc:nth-child(1), .dbx-cp-statc:nth-child(2){ border-bottom:1px solid rgba(167,139,250,.12); }
}
@media (max-width:680px){ .dbx-cp-form{ grid-template-columns:1fr; } }
@media (max-width:520px){
.dbx-cp{ padding:4px 16px 56px; }
.dbx-cp-h1{ font-size:28px; }
.dbx-cp-lede{ font-size:16px; }
.dbx-cp-h2{ font-size:26px; }
.dbx-cp-steps{ grid-template-columns:1fr; }
.dbx-cp-benefits{ grid-template-columns:1fr; }
.dbx-cp-order{ padding:20px; }
.dbx-cp-price{ flex-direction:column; align-items:flex-start; gap:8px; }
}
.dbx-cp-listwrap{ max-width:920px; margin:0 auto; padding-top:24px; }
.dbx-cp-list-head{ margin-bottom:22px; }
.dbx-cp-eyebrow{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#A78BFA; margin-bottom:8px; }
.dbx-cp-list-h{ font-size:28px; font-weight:800; letter-spacing:-.01em; margin:0; color:#fff; }
.dbx-cp-table{ background:linear-gradient(180deg,#221453,#170D3D); background-color:#1B1045; border:1px solid rgba(167,139,250,.22); border-radius:16px; overflow:hidden; }
.dbx-cp-thead{ display:grid; grid-template-columns:2fr 1.1fr 1.2fr 1.2fr auto; gap:14px; align-items:center; padding:14px 20px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:rgba(237,233,254,.52); border-bottom:1px solid rgba(167,139,250,.16); }
.dbx-cp-trow{ display:grid; grid-template-columns:2fr 1.1fr 1.2fr 1.2fr auto; gap:14px; align-items:center; padding:16px 20px; font-size:14px; color:#EDE9FE; border-bottom:1px solid rgba(167,139,250,.08); }
.dbx-cp-trow:last-child{ border-bottom:none; }
.dbx-cp-cell-domain{ font-weight:600; color:#fff; word-break:break-all; }
.dbx-cp-cell-action{ text-align:right; }
.dbx-cp-cell::before{ display:none; }
.dbx-cp-status{ display:inline-flex; align-items:center; font-size:12px; font-weight:600; padding:4px 11px; border-radius:999px; color:#C4B5FD; background:rgba(167,139,250,.12); border:1px solid rgba(167,139,250,.3); white-space:nowrap; }
.dbx-cp-admin-btn{ display:inline-flex; align-items:center; font-size:12.5px; font-weight:600; color:#C4B5FD; background:rgba(167,139,250,.1); border:1px solid rgba(167,139,250,.32); border-radius:9px; padding:7px 13px; text-decoration:none; white-space:nowrap; transition:background-color .2s, color .2s; }
.dbx-cp-admin-btn:hover{ background:rgba(167,139,250,.18); color:#fff; }
@media (max-width:640px){
.dbx-cp-thead{ display:none; }
.dbx-cp-trow{ grid-template-columns:1fr; gap:9px; padding:16px; }
.dbx-cp-cell{ display:flex; justify-content:space-between; align-items:center; gap:14px; }
.dbx-cp-cell-action{ text-align:left; }
.dbx-cp-cell::before{ content:attr(data-label); display:inline; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:rgba(237,233,254,.45); }
.dbx-cp-cell-action::before{ content:none; }
}
.header-mega-feat:hover, .header-mega-feat:focus-visible,
.header-mega-feat:hover .header-mega-feat-title, .header-mega-feat:hover .header-mega-feat-sub { text-decoration: none; }
.header-mega-feat:hover .header-mega-feat-cta,
.header-mega-feat:focus-visible .header-mega-feat-cta { text-decoration: underline; text-underline-offset: 3px; }
body .crypto-sub {
color: #C4B5FD;
}