:root {
     --bg-primary: #0f172a;
     --bg-secondary: #0c1220;
     --bg-tertiary: #080c16;
     --accent: #0a96e4;
 }

 body {
     background-color: var(--bg-primary);
     color: #e2e8f0;
     scroll-behavior: smooth;
 }

 .logo-inline::before {
     content: "";
     width: 32px;
     height: 32px;
     display: inline-block;
     background-size: contain;
     background-image: url('../images/logo.ico');
     background-position: center 2px;
     background-repeat: no-repeat;
     position: relative;
 }

 .feature-card {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     background-color: var(--bg-secondary);
 }

 .feature-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 10px 25px rgba(10, 150, 228, 0.2);
 }

 .step-item {
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.5s ease, transform 0.5s ease;
 }

 .step-item.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .step-connector {
     height: 2px;
     background: linear-gradient(90deg, var(--accent), transparent);
     width: 0;
     transition: width 1s ease;
     margin: 0 10px;
 }

 .step-connector.active {
     width: 80px;
 }

 .faq-item {
     border-bottom: 1px solid var(--bg-secondary);
     background-color: var(--bg-secondary);
     border-radius: 8px;
     overflow: hidden;
     margin-bottom: 16px;
     display: grid;
     grid-template-rows: auto 0fr;
     transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }

 section#faq {
    max-height: 120vh;
 }

 .faq-item.open {
     grid-template-rows: auto 1fr;
 }

 .faq-question {
     user-select: none;
     cursor: pointer;
     transition: color 0.3s ease;
     padding: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .faq-question:hover {
     color: var(--accent);
 }

 .faq-answer {
     overflow: hidden;
     padding: 0 20px;
     opacity: 0;
     transform: translateY(-10px);
     transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
 }

 .faq-item.open .faq-answer {
     opacity: 1;
     transform: translateY(0);
     padding: 0 20px 20px 20px;
 }

 .faq-icon {
     transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .faq-icon.rotated {
     transform: rotate(180deg);
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-10px);
     }
 }

 .floating {
     animation: float 3s ease-in-out infinite;
 }

 .tab-active {
     color: var(--accent);
 }

 .mobile-tab-active {
     color: var(--accent);
     font-weight: 600;
 }

 .app-preview {
     border-radius: 10px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
     transition: transform 0.3s ease;
 }

 .app-preview:hover {
     transform: scale(1.02);
 }

 .discord-btn {
     background-color: #5865F2;
     transition: background-color 0.3s ease;
 }

 .discord-btn:hover {
     background-color: #4752c4;
 }

 .overlay-demo {
     position: relative;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
 }

 .overlay-content {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: rgba(15, 23, 42, 0.9);
     padding: 20px;
     border-radius: 10px;
     z-index: 2;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
     width: 80%;
     max-width: 300px;
 }

 .animated-bg {
     position: relative;
     overflow: hidden;
 }

 .animated-bg::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: linear-gradient(45deg,
             transparent,
             rgba(10, 150, 228, 0.1),
             transparent);
     animation: shine 3s infinite;
     z-index: 0;
 }

 @keyframes shine {
     0% {
         transform: translateX(-100%) translateY(-100%) rotate(45deg);
     }

     100% {
         transform: translateX(100%) translateY(100%) rotate(45deg);
     }
 }

 .content-over-bg {
     position: relative;
     z-index: 1;
 }

 .faq-icon {
     transition: transform 0.3s ease;
 }

 .faq-icon.rotated {
     transform: rotate(180deg);
 }

 .divider-section {
     display: grid;
     grid-template-columns: 1fr 1px 1.5fr;
     gap: 40px;
     align-items: center;
 }

 .vertical-divider {
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, transparent, var(--accent), transparent);
     margin: 0 auto;
 }

 .theme-video {
     width: 100%;
     border-radius: 10px;
     aspect-ratio: 16/9;
     background-color: var(--bg-tertiary);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--accent);
     font-size: 24px;
 }

 .page {
     display: none;
 }

 .page.active {
     display: block;
 }

 .vanta-overlay-blur {
     top: 0;
     left: 0;
     position: absolute;
     background: linear-gradient(rgb(15 23 42 / 64%), rgb(15 23 42 / 64%), rgb(15 23 42 / 78%));
     width: 100%;
     height: 100%;
 }



 /* pricing */

 .center-self {
     align-self: center;
 }

 .pricing-container {
     max-width: 1000px;
     width: 100%;
     margin: 0 auto;
 }

 .pricing-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1rem;
 }

 .pricing-card {
     position: relative;
     background: var(--bg-secondary);
     border-radius: 12px;
     padding: 1.5rem;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.3s ease;
     display: flex;
     flex-direction: column;
     height: 100%;
 }

 .pricing-card.featured {
     border-color: var(--accent);
     box-shadow: 0 0 20px rgba(10, 150, 228, 0.3);
     transform: scale(1.02);
 }

 .pricing-card.lifetime {
     border-color: #ffa726;
 }

 .divider-section .text-center:hover {
     transform: scale(1.4);
 }

 #overlaypreview:hover {
     background: var(--bg-primary);
 }

 .card-header {
     text-align: center;
     margin-bottom: 1rem;
     padding-bottom: 1rem;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .card-title {
     font-size: 1.25rem;
     font-weight: 700;
     margin-bottom: 0.25rem;
 }

 .card-subtitle {
     font-size: 0.875rem;
     color: #94a3b8;
 }

 .price {
     font-size: 2rem;
     font-weight: 800;
     color: var(--accent);
     text-align: center;
     margin: 1rem 0;
 }

 .price-strike {
     text-decoration: line-through;
     color: #94a3b8;
     font-size: 1.25rem;
     margin-left: 0.5rem;
 }

 .price-savings {
     display: block;
     font-size: 0.75rem;
     color: #10b981;
     margin-top: 0.25rem;
 }

 .discounted-price {
     color: #ffa726;
     font-size: 2rem;
 }

 .limited-badge {
     pointer-events: none;
     user-select: none;
     background: linear-gradient(45deg, #ff6b6b, #ffa726);
     color: white;
     padding: 0.3rem 0.7rem;
     border-radius: 6px;
     font-size: 0.7rem;
     font-weight: 700;
     display: inline-block;
     margin-left: 0.5rem;
     animation: pulse 2s infinite;
 }

 @keyframes pulse {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.05);
     }

     100% {
         transform: scale(1);
     }
 }

 .discount {
     color: deepskyblue;
 }

 .discount-code {
     background: rgba(255, 255, 255, 2%);
     border: 1px dashed var(--accent);
     border-radius: 6px;
     padding: 0.5rem;
     font-family: monospace;
     font-size: 1.1rem;
     font-weight: 700;
     text-align: center;
     margin: 0.5rem 0;
     cursor: pointer;
     transition: all 0.2s ease;
     position: relative;
 }

 .discount-code:hover {
     background: rgba(10, 150, 228, 0.1);
 }

 .discount-code.copied::after {
     content: 'Copied!';
     position: absolute;
     top: -25px;
     left: 50%;
     transform: translateX(-50%);
     background: #10b981;
     color: white;
     padding: 0.3rem 0.6rem;
     border-radius: 4px;
     font-size: 0.7rem;
     font-weight: 600;
 }


 .feature-list {
     flex-grow: 1;
     margin: 1rem 0;
 }

 .feature-item {
     display: flex;
     align-items: center;
     margin-bottom: 15px;
     font-size: 16px;
 }

 .feature-icon {
     color: var(--accent);
     margin-right: 12px;
     font-size: 14px;
     background: rgba(10, 150, 228, 0.1);
     width: 24px;
     height: 24px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .pricing-btn {
     width: 100%;
     padding: 0.75rem;
     border-radius: 6px;
     font-weight: 600;
     font-size: 0.875rem;
     transition: all 0.2s ease;
     margin-top: auto;
 }

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

 .pricing-btn.primary:hover {
     background: #0886c4;
     transform: translateY(-1px);
 }

 .pricing-btn.secondary {
     background: rgba(255, 255, 255, 0.1);
     color: white;
 }

 .pricing-btn.secondary:hover {
     background: rgba(255, 255, 255, 0.2);
 }

 .badge {
     user-select: none;
     display: inline-block;
     background: var(--accent);
     color: white;
     padding: 0.25rem 0.5rem;
     border-radius: 12px;
     font-size: 0.75rem;
     font-weight: 600;
     margin-left: 0.5rem;
 }

 .card-badge.lifetime {
     background: #ffa726;
 }

 .card-badge {
     position: absolute;
     top: -10px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--accent);
     color: white;
     padding: 0.4rem 1rem;
     border-radius: 20px;
     font-size: 0.75rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
     z-index: 10;
 }

 @media (max-width: 768px) {
     .pricing-grid {
         grid-template-columns: 1fr;
         gap: 1rem;
     }

     .pricing-card {
         padding: 1.25rem;
     }

     .pricing-card.featured {
         transform: scale(1);
     }
 }

 @media (min-width: 769px) and (max-width: 1024px) {
     .pricing-grid {
         grid-template-columns: repeat(3, 1fr);
         gap: 1rem;
     }

     .pricing-card {
         padding: 1.25rem;
     }
 }