@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap"); .dsc-page { --dsc-bg: #0a0a0f;
--dsc-surface: #111118;
--dsc-surface-light: #1a1a22; --dsc-cyan: #22d3ee;
--dsc-cyan-bright: #67e8f9;
--dsc-cyan-dim: rgba(34, 211, 238, 0.08);
--dsc-cyan-glow: rgba(34, 211, 238, 0.25);
--dsc-violet: #a78bfa;
--dsc-violet-dim: rgba(167, 139, 250, 0.08);
--dsc-red: #ef4444;
--dsc-red-dim: rgba(239, 68, 68, 0.1);
--dsc-green: #10b981;
--dsc-green-dim: rgba(16, 185, 129, 0.1);
--dsc-amber: #fbbf24;
--dsc-amber-dim: rgba(251, 191, 36, 0.08); --dsc-text: #f8fafc;
--dsc-text-secondary: #cbd5e1;
--dsc-text-muted: #64748b; --dsc-border: rgba(255, 255, 255, 0.06);
--dsc-border-light: rgba(255, 255, 255, 0.1); --dsc-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--dsc-font-heading: 'Space Grotesk', var(--dsc-font); --dsc-space-xs: 4px;
--dsc-space-sm: 8px;
--dsc-space-md: 16px;
--dsc-space-lg: 24px;
--dsc-space-xl: 32px;
--dsc-space-2xl: 48px;
--dsc-space-3xl: 64px; --dsc-radius-sm: 6px;
--dsc-radius-md: 10px;
--dsc-radius-lg: 16px;
--dsc-radius-xl: 20px;
} .dsc-page *,
.dsc-page *::before,
.dsc-page *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.dsc-page {
font-family: var(--dsc-font);
background: var(--dsc-bg);
color: var(--dsc-text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.dsc-page h1,
.dsc-page h2,
.dsc-page h3,
.dsc-page h4 {
font-family: var(--dsc-font-heading);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
}
.dsc-page a {
color: var(--dsc-cyan);
text-decoration: none;
transition: color 0.2s ease;
}
.dsc-page a:hover {
color: var(--dsc-cyan-bright);
} .dsc-page .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.dsc-page .section {
padding: 80px 0;
}
.dsc-page .section.bg-surface {
background: var(--dsc-surface);
} .dsc-page .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 28px;
border-radius: var(--dsc-radius-md);
font-family: var(--dsc-font-heading);
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
cursor: pointer;
border: none;
text-decoration: none;
}
.dsc-page .btn svg {
width: 18px;
height: 18px;
}
.dsc-page .btn-primary {
background: linear-gradient(135deg, var(--dsc-cyan) 0%, #06b6d4 100%);
color: #0a0a0f;
box-shadow: 0 4px 20px var(--dsc-cyan-glow);
}
.dsc-page .btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 35px var(--dsc-cyan-glow);
color: #0a0a0f;
}
.dsc-page .btn-outline {
background: transparent;
color: var(--dsc-text);
border: 2px solid var(--dsc-border-light);
}
.dsc-page .btn-outline:hover {
border-color: var(--dsc-cyan);
color: var(--dsc-cyan);
background: var(--dsc-cyan-dim);
}
.dsc-page .btn-dark {
background: var(--dsc-bg);
color: var(--dsc-text);
}
.dsc-page .btn-dark:hover {
background: var(--dsc-surface);
}
.dsc-page .btn-ghost {
background: transparent;
color: var(--dsc-bg);
border: 2px solid rgba(10, 10, 15, 0.3);
}
.dsc-page .btn-ghost:hover {
border-color: rgba(10, 10, 15, 0.5);
background: rgba(10, 10, 15, 0.1);
} .dsc-page .hero {
position: relative;
padding: 80px 0 60px;
text-align: center;
overflow: hidden;
}
.dsc-page .hero::before {
content: '';
position: absolute;
top: -50%;
left: -20%;
width: 80%;
height: 150%;
background: radial-gradient(ellipse, rgba(34, 211, 238, 0.08) 0%, transparent 60%);
pointer-events: none;
}
.dsc-page .hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--dsc-cyan-dim);
border: 1px solid rgba(34, 211, 238, 0.2);
padding: 10px 20px;
border-radius: 100px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--dsc-cyan);
margin-bottom: 24px;
}
.dsc-page .hero-badge-dot {
width: 8px;
height: 8px;
background: var(--dsc-cyan);
border-radius: 50%;
animation: dscPulse 2s ease-in-out infinite;
}
@keyframes dscPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.9); }
}
.dsc-page .hero h1 {
font-size: clamp(2.25rem, 5vw, 3.5rem);
margin-bottom: 24px;
background: linear-gradient(135deg, var(--dsc-text) 0%, var(--dsc-cyan) 50%, var(--dsc-violet) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.dsc-page .hero-lead {
font-size: 1.15rem;
color: var(--dsc-text-secondary);
max-width: 750px;
margin: 0 auto 32px;
line-height: 1.7;
}
.dsc-page .hero-ctas {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
} .dsc-page .section-header {
text-align: center;
margin-bottom: 48px;
}
.dsc-page .section-label {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--dsc-cyan);
margin-bottom: 16px;
}
.dsc-page .section-label.red { color: var(--dsc-red); }
.dsc-page .section-label.violet { color: var(--dsc-violet); }
.dsc-page .section-label.green { color: var(--dsc-green); }
.dsc-page .section-header h2 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
margin-bottom: 16px;
}
.dsc-page .section-header p {
font-size: 1.1rem;
color: var(--dsc-text-secondary);
max-width: 650px;
margin: 0 auto;
} .dsc-page .stats-bar {
background: var(--dsc-surface);
border-top: 1px solid var(--dsc-border);
border-bottom: 1px solid var(--dsc-border);
padding: 32px 0;
}
.dsc-page .stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 24px;
text-align: center;
}
.dsc-page .stat-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.dsc-page .stat-number {
font-family: var(--dsc-font-heading);
font-size: 1.75rem;
font-weight: 700;
color: var(--dsc-cyan);
}
.dsc-page .stat-label {
font-size: 0.85rem;
color: var(--dsc-text-muted);
} .dsc-page .cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.dsc-page .card {
background: var(--dsc-surface);
border: 1px solid var(--dsc-border);
border-radius: var(--dsc-radius-lg);
padding: 28px;
transition: all 0.3s ease;
}
.dsc-page .section.bg-surface .card {
background: var(--dsc-bg);
}
.dsc-page .card:hover {
border-color: rgba(34, 211, 238, 0.3);
transform: translateY(-4px);
}
.dsc-page .card-icon {
width: 48px;
height: 48px;
border-radius: var(--dsc-radius-md);
background: var(--dsc-cyan-dim);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.dsc-page .card-icon svg {
width: 24px;
height: 24px;
color: var(--dsc-cyan);
}
.dsc-page .card-icon.violet { background: var(--dsc-violet-dim); }
.dsc-page .card-icon.violet svg { color: var(--dsc-violet); }
.dsc-page .card-icon.red { background: var(--dsc-red-dim); }
.dsc-page .card-icon.red svg { color: var(--dsc-red); }
.dsc-page .card-icon.green { background: var(--dsc-green-dim); }
.dsc-page .card-icon.green svg { color: var(--dsc-green); }
.dsc-page .card-icon.amber { background: var(--dsc-amber-dim); }
.dsc-page .card-icon.amber svg { color: var(--dsc-amber); }
.dsc-page .card h4 {
font-size: 1.1rem;
margin-bottom: 10px;
}
.dsc-page .card p {
font-size: 0.95rem;
color: var(--dsc-text-secondary);
line-height: 1.6;
margin: 0;
} .dsc-page .features-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px 32px;
max-width: 900px;
margin: 0 auto;
}
.dsc-page .feature-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
font-size: 0.95rem;
color: var(--dsc-text-secondary);
}
.dsc-page .feature-item svg {
width: 20px;
height: 20px;
color: var(--dsc-green);
flex-shrink: 0;
} .dsc-page .faq-list {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.dsc-page .faq-item {
background: var(--dsc-surface);
border: 1px solid var(--dsc-border);
border-radius: var(--dsc-radius-lg);
overflow: hidden;
}
.dsc-page .section.bg-surface .faq-item {
background: var(--dsc-bg);
}
.dsc-page .faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 22px 26px;
cursor: pointer;
gap: 20px;
width: 100%;
background: none;
border: none;
text-align: left;
font-family: var(--dsc-font);
color: var(--dsc-text);
transition: background 0.2s ease;
}
.dsc-page .faq-question:hover {
background: var(--dsc-surface-light);
}
.dsc-page .faq-question h4 {
font-size: 1rem;
font-weight: 600;
margin: 0;
}
.dsc-page .faq-toggle {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--dsc-cyan-dim);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
}
.dsc-page .faq-toggle svg {
width: 16px;
height: 16px;
color: var(--dsc-cyan);
transition: transform 0.3s ease;
}
.dsc-page .faq-item.active .faq-toggle {
background: var(--dsc-cyan);
}
.dsc-page .faq-item.active .faq-toggle svg {
color: var(--dsc-bg);
transform: rotate(180deg);
}
.dsc-page .faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.dsc-page .faq-item.active .faq-answer {
max-height: 400px;
}
.dsc-page .faq-answer-inner {
padding: 0 26px 22px;
font-size: 0.95rem;
color: var(--dsc-text-secondary);
line-height: 1.8;
} .dsc-page .tiers-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.dsc-page .tier-card {
background: var(--dsc-surface);
border: 1px solid var(--dsc-border);
border-radius: var(--dsc-radius-xl);
padding: 36px;
position: relative;
transition: all 0.3s ease;
}
.dsc-page .tier-card.featured {
border-color: var(--dsc-cyan);
box-shadow: 0 0 40px var(--dsc-cyan-glow);
}
.dsc-page .tier-card.featured::before {
content: 'Most Popular';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--dsc-cyan) 0%, #06b6d4 100%);
color: #0a0a0f;
padding: 6px 16px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.dsc-page .tier-card:hover {
transform: translateY(-4px);
}
.dsc-page .tier-name {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 8px;
}
.dsc-page .tier-desc {
font-size: 0.9rem;
color: var(--dsc-text-muted);
margin-bottom: 24px;
}
.dsc-page .tier-features {
list-style: none;
margin-bottom: 28px;
}
.dsc-page .tier-features li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
font-size: 0.9rem;
color: var(--dsc-text-secondary);
border-bottom: 1px solid var(--dsc-border);
}
.dsc-page .tier-features li:last-child {
border-bottom: none;
}
.dsc-page .tier-features li svg {
width: 18px;
height: 18px;
color: var(--dsc-green);
flex-shrink: 0;
margin-top: 2px;
}
.dsc-page .tier-cta {
width: 100%;
text-align: center;
} .dsc-page .pain-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.dsc-page .pain-card {
background: var(--dsc-surface);
border: 1px solid var(--dsc-border);
border-radius: var(--dsc-radius-lg);
padding: 24px;
transition: all 0.3s ease;
}
.dsc-page .pain-card:hover {
border-color: rgba(34, 211, 238, 0.3);
}
.dsc-page .pain-card-icon {
width: 44px;
height: 44px;
border-radius: var(--dsc-radius-md);
background: var(--dsc-amber-dim);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.dsc-page .pain-card-icon svg {
width: 22px;
height: 22px;
color: var(--dsc-amber);
}
.dsc-page .pain-card h4 {
font-size: 1rem;
margin-bottom: 8px;
}
.dsc-page .pain-card p {
font-size: 0.9rem;
color: var(--dsc-text-muted);
margin: 0;
line-height: 1.6;
} .dsc-page .cta-section {
padding: 80px 0;
background: linear-gradient(135deg, var(--dsc-cyan) 0%, #0891b2 100%);
position: relative;
overflow: hidden;
}
.dsc-page .cta-section::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.dsc-page .cta-content {
position: relative;
text-align: center;
max-width: 750px;
margin: 0 auto;
}
.dsc-page .cta-content h2 {
font-size: clamp(2rem, 4vw, 2.75rem);
color: #0a0a0f;
margin-bottom: 16px;
}
.dsc-page .cta-content p {
font-size: 1.15rem;
color: rgba(10, 10, 15, 0.8);
margin-bottom: 36px;
}
.dsc-page .cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
} .dsc-page .trust-section {
padding: 60px 0;
border-top: 1px solid var(--dsc-border);
}
.dsc-page .trust-badges {
display: flex;
justify-content: center;
align-items: center;
gap: 48px;
flex-wrap: wrap;
}
.dsc-page .trust-badge {
display: flex;
align-items: center;
gap: 14px;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.dsc-page .trust-badge:hover {
opacity: 1;
}
.dsc-page .trust-badge iframe {
border: none;
width: 52px;
height: 52px;
}
.dsc-page .trust-badge img {
height: 42px;
width: auto;
}
.dsc-page .trust-badge span {
font-size: 0.75rem;
color: var(--dsc-text-muted);
max-width: 90px;
line-height: 1.35;
} .dsc-page .services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
.dsc-page .service-card {
background: var(--dsc-surface);
border: 1px solid var(--dsc-border);
border-radius: var(--dsc-radius-lg);
padding: 28px;
transition: all 0.3s ease;
text-decoration: none;
display: block;
}
.dsc-page .service-card:hover {
border-color: rgba(34, 211, 238, 0.3);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(34, 211, 238, 0.1);
}
.dsc-page .service-icon {
width: 48px;
height: 48px;
border-radius: var(--dsc-radius-md);
background: var(--dsc-cyan-dim);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.dsc-page .service-icon svg {
width: 24px;
height: 24px;
color: var(--dsc-cyan);
}
.dsc-page .service-icon.violet { background: var(--dsc-violet-dim); }
.dsc-page .service-icon.violet svg { color: var(--dsc-violet); }
.dsc-page .service-icon.red { background: var(--dsc-red-dim); }
.dsc-page .service-icon.red svg { color: var(--dsc-red); }
.dsc-page .service-icon.green { background: var(--dsc-green-dim); }
.dsc-page .service-icon.green svg { color: var(--dsc-green); }
.dsc-page .service-card h4 {
font-size: 1.05rem;
margin-bottom: 10px;
color: var(--dsc-text);
}
.dsc-page .service-card p {
font-size: 0.9rem;
color: var(--dsc-text-muted);
margin: 0;
line-height: 1.6;
} @media (max-width: 768px) {
.dsc-page .hero {
padding: 48px 0 40px;
}
.dsc-page .hero h1 {
font-size: 2rem;
}
.dsc-page .section {
padding: 60px 0;
}
.dsc-page .tiers-grid {
grid-template-columns: 1fr;
}
.dsc-page .stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.dsc-page .container {
padding: 0 16px;
}
.dsc-page .hero-ctas {
flex-direction: column;
}
.dsc-page .btn {
width: 100%;
}
.dsc-page .cta-buttons {
flex-direction: column;
}
.dsc-page .stats-grid {
grid-template-columns: 1fr;
}
.dsc-page .trust-badges {
gap: 24px;
}
} .dsc-page .text-center { text-align: center; }
.dsc-page .text-left { text-align: left; }
.dsc-page .text-right { text-align: right; }
.dsc-page .mt-sm { margin-top: var(--dsc-space-sm); }
.dsc-page .mt-md { margin-top: var(--dsc-space-md); }
.dsc-page .mt-lg { margin-top: var(--dsc-space-lg); }
.dsc-page .mt-xl { margin-top: var(--dsc-space-xl); }
.dsc-page .mb-sm { margin-bottom: var(--dsc-space-sm); }
.dsc-page .mb-md { margin-bottom: var(--dsc-space-md); }
.dsc-page .mb-lg { margin-bottom: var(--dsc-space-lg); }
.dsc-page .mb-xl { margin-bottom: var(--dsc-space-xl); }