@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');


:root {
 --primary: #6366F1;
 --primary-dark: #4F46E5;
 --primary-light: #818CF8;
 --accent: #10B981;
 --bg-dark: #0F172A;
 --bg-darker: #020617;
 --bg-card: #1E293B;
 --text-primary: #F1F5F9;
 --text-secondary: #94A3B8;
 --text-muted: #64748B;
 --border: #334155;
 --border-light: #475569;
}


.dexpn-page {
 font-family: "Inter", sans-serif;
 background: var(--bg-dark);
 color: var(--text-primary);
 min-height: 100vh;
 line-height: 1.6;
}


.container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 24px;
}


/* Header */
.dexpn-header {
 position: sticky;
 top: 0;
 z-index: 100;
 background: rgba(15, 23, 42, 0.95);
 backdrop-filter: blur(10px);
 border-bottom: 1px solid var(--border);
 padding: 20px 0;
}


.dexpn-header__content {
 display: flex;
 justify-content: space-between;
 align-items: center;
}


.dexpn-header__logo a {
 font-size: 24px;
 font-weight: 800;
 color: var(--primary);
 text-decoration: none;
 letter-spacing: -0.5px;
}


.dexpn-header__nav {
 display: flex;
 gap: 32px;
 align-items: center;
}


.dexpn-header__nav a {
 color: var(--text-secondary);
 text-decoration: none;
 font-weight: 500;
 transition: color 0.3s;
 font-size: 15px;
}


.dexpn-header__nav a:hover {
 color: var(--primary);
}


/* Buttons */
.dexpn-btn {
 padding: 14px 28px;
 border-radius: 8px;
 font-weight: 600;
 font-size: 16px;
 border: none;
 cursor: pointer;
 transition: all 0.3s;
 text-decoration: none;
 display: inline-block;
 text-align: center;
 font-family: inherit;
}


.dexpn-btn--primary {
 background: var(--primary);
 color: white;
}


.dexpn-btn--primary:hover {
 background: var(--primary-dark);
 transform: translateY(-2px);
 box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}


.dexpn-btn--large {
 padding: 18px 36px;
 font-size: 18px;
}


/* Hero Section */
.dexpn-hero {
 padding: 120px 0 100px;
 background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
 position: relative;
 overflow: hidden;
}


.dexpn-hero::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
 pointer-events: none;
}


.dexpn-hero__content {
 position: relative;
 z-index: 1;
 text-align: center;
 max-width: 800px;
 margin: 0 auto;
}


.dexpn-hero__title {
 font-size: 56px;
 font-weight: 800;
 line-height: 1.2;
 margin-bottom: 24px;
 color: var(--text-primary);
 letter-spacing: -1px;
}


.dexpn-hero__title .highlight {
 color: var(--primary);
}


.dexpn-hero__text {
 font-size: 20px;
 color: var(--text-secondary);
 margin-bottom: 40px;
 line-height: 1.7;
}


/* Welcome Section */
.dexpn-welcome {
 padding: 100px 0;
 background: var(--bg-darker);
}


.dexpn-welcome__content {
 max-width: 900px;
 margin: 0 auto;
}


.dexpn-welcome__title {
 font-size: 42px;
 font-weight: 700;
 text-align: center;
 margin-bottom: 16px;
 color: var(--text-primary);
}


.dexpn-welcome__title .highlight {
 color: var(--primary);
}


.dexpn-welcome__subtitle {
 font-size: 18px;
 color: var(--text-secondary);
 text-align: center;
 margin-bottom: 48px;
 line-height: 1.7;
}


.dexpn-welcome__steps-title {
 font-size: 28px;
 font-weight: 600;
 color: var(--text-primary);
 margin-bottom: 32px;
 text-align: center;
}


.dexpn-steps {
 display: grid;
 gap: 24px;
 margin-bottom: 32px;
}


.dexpn-step {
 display: flex;
 gap: 24px;
 padding: 24px;
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 12px;
 transition: all 0.3s;
}


.dexpn-step:hover {
 border-color: var(--primary);
 transform: translateY(-2px);
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}


.dexpn-step__number {
 width: 48px;
 height: 48px;
 background: var(--primary);
 color: white;
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 24px;
 font-weight: 700;
 flex-shrink: 0;
}


.dexpn-step__content {
 flex: 1;
}


.dexpn-step__title {
 font-size: 20px;
 font-weight: 600;
 color: var(--text-primary);
 margin-bottom: 8px;
}


.dexpn-step__text {
 font-size: 16px;
 color: var(--text-secondary);
 line-height: 1.6;
 margin: 0;
}


.dexpn-welcome__note {
 padding: 20px;
 background: rgba(99, 102, 241, 0.1);
 border: 1px solid rgba(99, 102, 241, 0.3);
 border-radius: 12px;
 border-left: 4px solid var(--primary);
}


.dexpn-welcome__note p {
 margin: 0;
 color: var(--text-secondary);
 line-height: 1.7;
}


.dexpn-welcome__note strong {
 color: var(--text-primary);
}


/* Section Styles */
.section-title {
 font-size: 42px;
 font-weight: 700;
 text-align: center;
 margin-bottom: 16px;
 color: var(--text-primary);
 letter-spacing: -0.5px;
}


.section-title .highlight {
 color: var(--primary);
}


.section-subtitle {
 font-size: 18px;
 color: var(--text-secondary);
 text-align: center;
 max-width: 800px;
 margin: 0 auto 64px;
 line-height: 1.7;
}


/* Advantages Section */
.dexpn-advantages {
 padding: 100px 0;
 background: var(--bg-dark);
}


.dexpn-advantages__header {
 margin-bottom: 64px;
}


.dexpn-advantages__grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 24px;
}


.dexpn-advantage-card {
 padding: 32px;
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 16px;
 text-align: center;
 transition: all 0.3s;
}


.dexpn-advantage-card:hover {
 border-color: var(--primary);
 transform: translateY(-4px);
 box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}


.dexpn-advantage-card__icon {
 color: var(--primary);
 margin-bottom: 24px;
 display: flex;
 justify-content: center;
}


.dexpn-advantage-card__title {
 font-size: 20px;
 font-weight: 600;
 color: var(--text-primary);
 margin-bottom: 12px;
}


.dexpn-advantage-card__text {
 font-size: 16px;
 color: var(--text-secondary);
 line-height: 1.6;
 margin: 0;
}


/* How It Works Section */
.dexpn-how {
 padding: 100px 0;
 background: var(--bg-darker);
}


.dexpn-how__header {
 margin-bottom: 64px;
}


.dexpn-how__features {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 32px;
 margin-bottom: 48px;
}


.dexpn-how-feature {
 padding: 32px;
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 16px;
 text-align: center;
}


.dexpn-how-feature__icon {
 color: var(--primary);
 margin-bottom: 24px;
 display: flex;
 justify-content: center;
}


.dexpn-how-feature__title {
 font-size: 22px;
 font-weight: 600;
 color: var(--text-primary);
 margin-bottom: 12px;
}


.dexpn-how-feature__text {
 font-size: 16px;
 color: var(--text-secondary);
 line-height: 1.6;
 margin: 0;
}


.dexpn-how__benefits {
 max-width: 800px;
 margin: 0 auto;
 padding: 40px;
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 16px;
}


.dexpn-how__benefits-title {
 font-size: 24px;
 font-weight: 600;
 color: var(--text-primary);
 margin-bottom: 24px;
}


.dexpn-how__benefits-list {
 list-style: none;
 padding: 0;
 margin: 0 0 24px 0;
}


.dexpn-how__benefits-list li {
 padding: 12px 0;
 padding-left: 32px;
 position: relative;
 color: var(--text-secondary);
 font-size: 16px;
 line-height: 1.7;
}


.dexpn-how__benefits-list li::before {
 content: '✓';
 position: absolute;
 left: 0;
 color: var(--accent);
 font-weight: 700;
 font-size: 20px;
}


.dexpn-how__cta-text {
 font-size: 18px;
 color: var(--text-primary);
 font-weight: 600;
 text-align: center;
 margin: 0;
}


/* Technical Specs Section */
.dexpn-specs {
 padding: 100px 0;
 background: var(--bg-dark);
}


.dexpn-specs__header {
 margin-bottom: 64px;
}


.dexpn-specs__content {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 24px;
 margin-bottom: 48px;
}


.dexpn-spec-card {
 padding: 32px;
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 16px;
}


.dexpn-spec-card__title {
 font-size: 20px;
 font-weight: 600;
 color: var(--primary);
 margin-bottom: 12px;
}


.dexpn-spec-card__text {
 font-size: 16px;
 color: var(--text-secondary);
 line-height: 1.7;
 margin: 0;
}


.dexpn-specs__footer {
 text-align: center;
 padding: 32px;
 background: rgba(99, 102, 241, 0.1);
 border: 1px solid rgba(99, 102, 241, 0.3);
 border-radius: 12px;
}


.dexpn-specs__footer p {
 font-size: 18px;
 color: var(--text-primary);
 font-weight: 600;
 margin: 0;
 line-height: 1.7;
}


/* CTA Section */
.dexpn-cta {
 padding: 100px 0;
 background: linear-gradient(180deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
 text-align: center;
}


.dexpn-cta__content {
 max-width: 600px;
 margin: 0 auto;
}


.dexpn-cta__title {
 font-size: 42px;
 font-weight: 700;
 color: var(--text-primary);
 margin-bottom: 16px;
}


.dexpn-cta__text {
 font-size: 18px;
 color: var(--text-secondary);
 margin-bottom: 32px;
 line-height: 1.7;
}


.dexpn-cta__note {
 margin-top: 16px;
 font-size: 14px;
 color: var(--text-muted);
}


/* Footer */
.dexpn-footer {
 padding: 48px 0;
 background: var(--bg-darker);
 border-top: 1px solid var(--border);
 text-align: center;
}


.dexpn-footer__content {
 color: var(--text-muted);
 font-size: 14px;
}


/* Purchase Modal */
.purchase-modal {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 1000;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.3s, visibility 0.3s;
}


.purchase-modal--active {
 opacity: 1;
 visibility: visible;
}


.purchase-modal__overlay {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0, 0, 0, 0.8);
 backdrop-filter: blur(4px);
}


.purchase-modal__content {
 position: relative;
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 16px;
 padding: 48px;
 max-width: 800px;
 width: 90%;
 max-height: 90vh;
 overflow-y: auto;
 transform: scale(0.9);
 transition: transform 0.3s;
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}


.purchase-modal--active .purchase-modal__content {
 transform: scale(1);
}


.purchase-modal__close {
 position: absolute;
 top: 16px;
 right: 16px;
 background: transparent;
 border: none;
 color: var(--text-secondary);
 cursor: pointer;
 padding: 8px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 8px;
 transition: all 0.3s;
}


.purchase-modal__close:hover {
 background: rgba(99, 102, 241, 0.1);
 color: var(--text-primary);
}


.purchase-modal__body {
 text-align: center;
}


.purchase-modal__title {
 font-size: 32px;
 font-weight: 700;
 color: var(--text-primary);
 margin-bottom: 16px;
}


.purchase-modal__text {
 font-size: 18px;
 color: var(--text-secondary);
 margin-bottom: 32px;
}


.purchase-modal__plans {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 24px;
 margin-bottom: 32px;
}


.purchase-plan {
 padding: 32px 24px;
 background: var(--bg-dark);
 border: 2px solid var(--border);
 border-radius: 12px;
 position: relative;
 transition: all 0.3s;
}


.purchase-plan:hover {
 border-color: var(--primary);
 transform: translateY(-4px);
}


.purchase-plan--popular {
 border-color: var(--primary);
 background: rgba(99, 102, 241, 0.05);
}


.purchase-plan__badge {
 position: absolute;
 top: -12px;
 left: 50%;
 transform: translateX(-50%);
 background: var(--primary);
 color: white;
 padding: 4px 16px;
 border-radius: 20px;
 font-size: 12px;
 font-weight: 600;
}


.purchase-plan__title {
 font-size: 20px;
 font-weight: 600;
 color: var(--text-primary);
 margin-bottom: 16px;
}


.purchase-plan__price {
 font-size: 32px;
 font-weight: 700;
 color: var(--primary);
 margin-bottom: 8px;
}


.purchase-plan__savings {
 font-size: 14px;
 color: var(--accent);
 margin-bottom: 24px;
 font-weight: 600;
}


.purchase-modal__note {
 font-size: 14px;
 color: var(--text-muted);
 line-height: 1.6;
 margin: 0;
}


/* Responsive Design */
@media (max-width: 1024px) {
 .container {
   padding: 0 32px;
 }


 .dexpn-hero__title {
   font-size: 48px;
 }


 .section-title {
   font-size: 36px;
 }
}


@media (max-width: 768px) {
 .container {
   padding: 0 24px;
 }


 .dexpn-header__nav {
   gap: 16px;
   font-size: 14px;
 }


 .dexpn-hero {
   padding: 80px 0 60px;
 }


 .dexpn-hero__title {
   font-size: 36px;
 }


 .dexpn-hero__text {
   font-size: 18px;
 }


 .section-title {
   font-size: 28px;
 }


 .section-subtitle {
   font-size: 16px;
 }


 .dexpn-advantages__grid {
   grid-template-columns: 1fr;
 }


 .dexpn-how__features {
   grid-template-columns: 1fr;
 }


 .dexpn-specs__content {
   grid-template-columns: 1fr;
 }


 .dexpn-step {
   flex-direction: column;
   text-align: center;
 }


 .purchase-modal__plans {
   grid-template-columns: 1fr;
 }


 .purchase-modal__content {
   padding: 32px 24px;
 }
}


@media (max-width: 480px) {
 .dexpn-header__nav a:not(.btn-primary) {
   display: none;
 }


 .dexpn-hero__title {
   font-size: 28px;
 }


 .dexpn-btn--large {
   padding: 16px 28px;
   font-size: 16px;
 }
}