*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

:root {
   --primary-bg: #10141c;
   --secondary-bg: #1f2431;
   --text-primary: #fafafa;
   --text-secondary: #c3cada;
   --accent-green: #18fb6f;
   --primary-blue: #191BC5;
   --accent-blue: #5992ff;
   --accent-blue-light: #3c7fff;
   --accent-red: #c43400;
   --accent-red-dark: #cc2f32;
   --accent-green-dark: #669c64;
   --border-color: #161a25;
   --border-light: #f2ecff;
   --gradient-primary: linear-gradient(104.127deg, rgb(2, 87, 250) 2.8731%, rgb(25, 27, 197) 96.995%);
   --gradient-secondary: linear-gradient(106.081deg, rgb(2, 87, 250) 2.8731%, rgb(25, 27, 197) 96.995%);
}

html {
   scroll-behavior: smooth;
   font-size: 16px;
}

body {
   font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   background: var(--primary-bg);
   color: var(--text-primary);
   overflow-x: hidden;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   display: flex;
   flex-direction: column;
   align-items: center;
}

section {
   width: 100%;
   max-width: 1240px;
}

/* ========== Header ========== */
.header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 80px;
   background: var(--primary-bg);
   border-bottom: 1px solid var(--border-color);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   transition: box-shadow 0.3s ease;
}

.header.scrolled {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.header-container {
   width: 100%;
   max-width: 1440px;
   padding: 0 100px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
}

.navbar {
   width: 100%;
}

.logo {
   font-size: 24px;
   font-weight: 700;
   color: var(--text-primary);
   letter-spacing: -0.5px;
}

.navigation {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
   height: 24px;
}

.nav-item {
   padding: 0 16px;
   font-size: 16px;
   font-weight: 400;
   color: var(--text-primary);
   text-transform: capitalize;
   cursor: pointer;
   transition: opacity 0.3s ease;
   text-decoration: none;
   white-space: nowrap;
}

.nav-item:hover {
   opacity: 0.7;
}

.nav-item.active {
   color: var(--accent-green);
}

.header-actions {
   display: flex;
   gap: 16px;
   align-items: center;
}

.new-footer {
   width: 100%;
}

.btn {
   padding: 8px 25px;
   height: 40px;
   border-radius: 8px;
   font-size: 16px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s ease;
   border: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   text-transform: capitalize;
   font-family: 'Plus Jakarta Sans', sans-serif;
   white-space: nowrap;
}

.btn-outline {
   background: transparent;
   border: 1px solid var(--border-light);
   color: var(--text-primary);
}

.btn-outline:hover {
   background: rgba(242, 236, 255, 0.1);
}

.btn-primary {
   background: var(--gradient-secondary);
   color: var(--text-primary);
   font-weight: 600;
}

.btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 30px rgba(2, 87, 250, 0.4);
}

.btn-large {
   height: 50px;
   padding: 16px 35px;
   font-weight: 600;
   font-size: 16px;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
   display: none;
   width: 40px;
   height: 40px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 6px;
   cursor: pointer;
   background: transparent;
   border: none;
}

.mobile-menu-toggle span {
   width: 24px;
   height: 2px;
   background: var(--text-primary);
   transition: all 0.3s ease;
}

.mobile-menu {
   display: none;
   position: fixed;
   top: 80px;
   left: 0;
   width: 100%;
   background: var(--primary-bg);
   border-bottom: 1px solid var(--border-color);
   padding: 24px;
   flex-direction: column;
   gap: 16px;
   z-index: 999;
   max-height: calc(100vh - 80px);
   overflow-y: auto;
}

.mobile-menu.active {
   display: flex;
}

/* ========== Pricing Hero ========== */
.pricing-hero {
   margin-top: 80px;
   padding: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}

.section-badge {
   color: var(--accent-green);
   font-size: 16px;
   font-weight: 500;
   border-radius: 9999px;
   padding: 8px 24px;
   margin-bottom: 16px;
   background: linear-gradient(rgba(25, 27, 35, 0.7), rgba(25, 27, 35, 0.7)) padding-box,
      linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.02) 100%) border-box;
   border: 1px solid transparent;
   backdrop-filter: blur(10px);
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.pricing-hero-title {
   font-size: 40px;
   font-weight: 600;
   color: var(--text-primary);
   line-height: 140%;
   margin-bottom: 13px;
}

.pricing-hero-subtitle {
   font-size: 16px;
   color: var(--text-secondary);
   line-height: 1.6;
   max-width: 520px;
   margin-bottom: 12px;
}

.no-lock-text {
   font-size: 18px;
   color: var(--text-secondary);
   margin-bottom: 50px;
}

/* ========== Billing Toggle ========== */
.billing-toggle {
   display: flex;
   align-items: center;
   gap: 8px;
   background: #161A25;
   border: 1px solid rgba(250, 250, 250, 0.12);
   border-radius: 12px;
   padding: 4px;
   margin-bottom: 16px;
   width: 548.653px;
   justify-content: space-between;
}

.toggle-btn {
   padding: 12px 16px;
   border-radius: 8px;
   font-size: 18px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.25s ease;
   border: none;
   color: #9BA3B5;
   background: transparent;
   font-family: inherit;
   white-space: nowrap;
   display: flex;
   align-items: center;
   gap: 8px;
   justify-content: center;
   line-height: normal;
}

.toggle-btn.active {
   background: var(--accent-green);
   color: #10141c;
   font-weight: 600;
   min-width: 180px;
}

.toggle-badge {
   border-radius: 4px;
   background: rgba(255, 255, 255, 0.08);
   color: #FAFAFA;
   font-size: 11px;
   font-weight: 400;
   padding: 4px;
}

.toggle-btn.active .toggle-badge {
   background: #fff;
   color: #636262;
   font-weight: 700;
}

/* ========== Pricing Section ========== */
.pricing-section {
   padding: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 120px;
}

.divider-dotted {
   height: stretch;
   width: 1px;
   border: 1px dashed #707070;
   border-left: 0px;
   margin: 0 50px;
}

/* Free Plan — wide card */
.free-plan-card {
   max-width: 940px;
   background: #161A25;
   border: 1px solid rgba(250, 250, 250, 0.12);
   border-radius: 16px;
   padding: 32px;
   margin-bottom: 32px;
   display: flex;
   gap: 0px;
   align-items: flex-start;
}

.free-plan-left {
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 356px;
}

.plan-icon-label {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 8px;
}

.plan-icon {
   width: 60px;
   height: 60px;
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.08);
   display: flex;
   align-items: center;
   justify-content: center;
}

.plan-icon>svg {
   width: 28px !important;
   height: 28px !important;
}

.plan-name {
   font-size: 20px;
   font-weight: 700;
   color: var(--text-primary);
}

.plan-tagline {
   font-weight: 600;
   font-size: 14px;
   color: var(--text-secondary);
}

.plan-price-row {
   display: flex;
   align-items: baseline;
   gap: 4px;
}

.plan-price {
   font-size: 32px;
   font-weight: 800;
   color: var(--text-primary);
}

.plan-period {
   font-size: 14px;
   color: #9BA3B5;
}

.plan-desc {
   font-size: 14px;
   color: var(--text-secondary);
   line-height: 1.5;
   font-weight: 600;
}

.plan-cta {
   padding: 12px 28px;
   border-radius: 8px;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.25s ease;
   border: none;
   font-family: inherit;
   display: inline-block;
   text-align: center;
   width: 100%;
}

.cta-blue {
   background: var(--gradient-secondary);
   color: white;
}

.cta-blue:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(2, 87, 250, 0.4);
}

.cta-outline {
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: var(--text-primary);
}

.cta-outline:hover {
   background: rgba(255, 255, 255, 0.05);
}

.free-plan-right {
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 420px;
}

.feature-item-check {
   display: flex;
   gap: 12px;
   font-size: 16px;
   color: var(--text-secondary);
}

.white-highlight-text {
   color: #FAFAFA;
   font-style: normal;
   font-weight: 600;
   line-height: 160%;
}

.table-icon-container {
   width: 20px;
   height: 20px;
   margin-top: 3px;
}

.check-icon {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
}

.check-icon.green {
   color: var(--accent-green);
}

.check-icon.muted {
   color: rgba(255, 255, 255, 0.2);
}

/* Paid Plans Grid */
.paid-plans-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   width: 100%;
}

.plan-card {
   background: #161A25;
   border: 1px solid rgba(250, 250, 250, 0.12);
   border-radius: 16px;
   padding: 32px;
   display: flex;
   flex-direction: column;
   gap: 24px;
   position: relative;
   transition: transform 0.3s ease, border-color 0.3s ease;
}

.plan-card:hover {
   transform: translateY(-4px);
}

.plan-card.recommended {
   border: 2px solid #2F76FF;
   background: linear-gradient(145deg, rgba(47, 118, 255, 0.07) 0%, #161A25 60%);
}

.recommended-badge {
   position: absolute;
   top: 12px;
   right: -12px;
   background: #18FB6F;
   color: #161616;
   font-size: 12px;
   font-weight: 600;
   padding: 4px 8px;
   border-radius: 4px;
   text-transform: uppercase;
   letter-spacing: 1px;
   white-space: nowrap;
}

.plan-header {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.plan-features-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
   flex: 1;
}

.plan-divider {
   height: 1px;
   background: rgba(255, 255, 255, 0.07);
}

.plan-cta-full {
   width: 100%;
   padding: 13px;
   border-radius: 8px;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.25s ease;
   border: none;
   font-family: inherit;
   background: var(--gradient-secondary);
   color: white;
}

.plan-cta-full:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(2, 87, 250, 0.4);
}

/* ========== FAQ Section ========== */
.faq-section {
   padding: 0px;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 126px;
}

.section-title {
   color: #FAFAFA;
   text-align: center;
   font-size: 40px;
   font-weight: 600;
   line-height: 150%;
   max-width: 820px;
   margin-bottom: 16px;
}

.section-subtitle {
   color: #C3CADA;
   text-align: center;
   font-size: 18px;
   font-weight: 400;
   line-height: 30.6px;
   max-width: 892px;
   margin-bottom: 0;
}

.faq-container {
   width: 100%;
   max-width: 960px;
   margin: 50px auto 0;
   border: 1px solid #2A2F3C;
   border-radius: 20px;
   overflow: hidden;
   background: #161A25;
}

.faq-item {
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.faq-item:last-child {
   border-bottom: none;
}

.faq-question {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   padding: 26px 32px;
   background: transparent;
   border: none;
   color: var(--text-primary);
   font-size: 16px;
   font-weight: 600;
   text-align: left;
   cursor: pointer;
   transition: background 0.2s ease;
   font-family: inherit;
}

.faq-question:hover {
   background: rgba(255, 255, 255, 0.03);
}

.faq-question.open {
   background: rgba(255, 255, 255, 0.02);
}

.faq-chevron {
   flex-shrink: 0;
   width: 20px;
   height: 20px;
   color: var(--text-secondary);
   transition: transform 0.3s ease;
}

.faq-question.open .faq-chevron {
   transform: rotate(180deg);
}

.faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), padding 0.3s ease;
   padding: 0 32px;
}

.faq-answer.open {
   max-height: 400px;
   padding: 0 32px 26px;
}

.faq-answer p {
   font-size: 16px;
   font-weight: 400;
   line-height: 27.2px;
   color: var(--text-secondary);
   margin: 0;
}

/* ========== Blue CTA Section ========== */
.blue-cta-section {
   padding: 0px;
   position: relative;
   margin-bottom: 120px;
}

.blue-glow-bg {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translate(-50%, 50%);
   width: 100%;
   max-width: 1200px;
   height: 500px;
   border-radius: 33554400px;
   opacity: 0.1;
   background: #0257FA;
   filter: blur(250px);
   z-index: -1;
   pointer-events: none;
}

.blue-cta-container {
   position: relative;
   width: 100%;
   max-width: 1240px;
   margin: 0 auto;
   background: #191BC5;
   border-radius: 24px;
   padding: 56px 148px;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   overflow: hidden;
}

.blue-cta-container::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image: radial-gradient(circle, rgba(255, 255, 255, 0.12) 1.5px, transparent 1.5px);
   background-size: 36px 36px;
   pointer-events: none;
}

.blue-cta-container::after {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at center, transparent 40%, rgba(26, 31, 200, 0.85) 100%);
   pointer-events: none;
}

.blue-cta-logo {
   position: relative;
   z-index: 2;
   width: 64px;
   height: 64px;
   background: white;
   border-radius: 9.375px;
   margin-bottom: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   font-weight: 800;
   color: #191BC5;
}

.blue-cta-title {
   position: relative;
   z-index: 2;
   font-size: 40px;
   font-weight: 600;
   color: white;
   max-width: 680px;
   line-height: 160%;
   margin-bottom: 20px;
}

.blue-cta-subtitle {
   position: relative;
   z-index: 2;
   font-size: 18px;
   line-height: 170%;
   color: #F2ECFF;
   max-width: 610px;
   margin-bottom: 32px;
}

.blue-cta-buttons {
   position: relative;
   z-index: 2;
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
   justify-content: center;
}

.btn-blue-cta-primary {
   padding: 14px 32px;
   border-radius: 8px;
   background: white;
   color: #1a1fc8;
   font-weight: 600;
   font-size: 15px;
   border: 2px solid white;
   cursor: pointer;
   transition: all 0.25s ease;
   font-family: inherit;
   display: flex;
   align-items: center;
   gap: 8px;
}

.btn-blue-cta-primary:hover {
   background: #f0f0f0;
   transform: translateY(-2px);
}

.btn-blue-cta-outline {
   padding: 14px 32px;
   border-radius: 8px;
   background: transparent;
   color: white;
   font-weight: 500;
   font-size: 15px;
   border: 2px solid rgba(255, 255, 255, 0.5);
   cursor: pointer;
   transition: all 0.25s ease;
   font-family: inherit;
}

.btn-blue-cta-outline:hover {
   border-color: white;
   background: rgba(255, 255, 255, 0.08);
   transform: translateY(-2px);
}

/* ========== Footer ========== */
.footer {
   padding: 60px 100px 40px;
}

.footer-content {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
   gap: 60px;
   margin-bottom: 40px;
}

.footer-brand {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.footer-logo {
   font-size: 24px;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 10px;
}

.footer-logo-icon {
   width: 32px;
   height: 32px;
   background: var(--gradient-secondary);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   font-weight: 800;
   color: white;
}

.footer-description {
   font-size: 14px;
   line-height: 1.6;
   color: var(--text-secondary);
   max-width: 320px;
}

.footer-newsletter {
   margin-top: 8px;
}

.footer-newsletter-label {
   font-size: 14px;
   color: var(--text-secondary);
   margin-bottom: 10px;
}

.footer-newsletter-form {
   display: flex;
   gap: 8px;
}

.footer-newsletter-input {
   flex: 1;
   padding: 10px 14px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   color: var(--text-primary);
   font-size: 14px;
   font-family: inherit;
   outline: none;
   transition: border-color 0.2s ease;
}

.footer-newsletter-input:focus {
   border-color: var(--accent-blue);
}

.footer-newsletter-input::placeholder {
   color: rgba(255, 255, 255, 0.3);
}

.footer-newsletter-btn {
   width: 40px;
   height: 40px;
   background: var(--gradient-secondary);
   border: none;
   border-radius: 8px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.2s ease;
   flex-shrink: 0;
}

.footer-newsletter-btn:hover {
   transform: scale(1.05);
}

.footer-social {
   display: flex;
   gap: 10px;
   margin-top: 16px;
}

.social-link {
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.05);
   transition: all 0.3s ease;
   text-decoration: none;
   color: var(--text-primary);
}

.social-link:hover {
   background: rgba(89, 146, 255, 0.2);
   transform: translateY(-2px);
}

.footer-column {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.footer-column-title {
   font-size: 15px;
   font-weight: 600;
   margin-bottom: 4px;
}

.footer-link {
   font-size: 14px;
   color: var(--text-secondary);
   text-decoration: none;
   transition: color 0.3s ease;
}

.footer-link:hover {
   color: var(--text-primary);
}

.footer-bottom {
   padding-top: 32px;
   border-top: 1px solid var(--border-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.copyright {
   font-size: 14px;
   color: var(--text-secondary);
   display: flex;
   align-items: center;
   gap: 4px;
}

/* ========== SVG Check Icons ========== */
.svg-check-green {
   color: var(--accent-green);
}

.svg-check-muted {
   color: rgba(255, 255, 255, 0.18);
}

/* ========== Responsive — Tablet ========== */
@media (max-width: 1024px) {

   .header-container,
   .blue-cta-section,
   .footer {
      padding-left: 40px;
      padding-right: 40px;
   }

   .paid-plans-grid {
      grid-template-columns: 1fr;
      max-width: 480px;
   }

   .free-plan-card {
      flex-direction: column;
   }

   .footer-content {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 40px;
   }
}

/* ========== Responsive — Mobile ========== */
@media (max-width: 768px) {

   /* Header */
   .header {
      height: 56px;
   }

   .header-container {
      padding: 0 16px;
   }

   .logo {
      font-size: 16px;
   }

   .navigation,
   .header-actions {
      display: none;
   }

   .mobile-menu-toggle {
      display: flex;
   }

   .mobile-menu {
      top: 56px;
      padding: 20px 16px;
   }

   /* Pricing Hero */
   .pricing-hero {
      margin-top: 56px;
      padding: 28px 16px 0px;
      align-items: flex-start;
      text-align: left;
   }

   .section-badge {
      font-size: 10px;
      padding: 10px 12px;
      margin-bottom: 12px;
   }

   .pricing-hero-title {
      font-size: 24px;
      line-height: 150%;
      margin-bottom: 12px;
      text-align: left;
   }

   .no-lock-text {
      font-size: 12px;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 24px;
      align-items: flex-start;
   }

   .billing-toggle {
      gap: 4px;
      padding: 4px;
      margin-bottom: 20px;
      width: 100%;
      justify-content: stretch;
   }

   .toggle-btn {
      flex: 1;
      padding: 8px 10px;
      font-size: 13px;
      justify-content: center;
      gap: 4px;
   }

   .toggle-badge {
      font-size: 10px;
      padding: 1px 5px;
   }

   /* Pricing Section */
   .pricing-section {
      padding: 0 16px 0px;
      align-items: stretch;
   }

   .pricing-section {
      margin-bottom: 60px;
   }

   .free-plan-left {
      width: 100%;
   }

   .divider-dotted {
      width: 100%;
      height: 1px;
      border-bottom: 0px;
   }

   /* Free Plan Card — single column stacked */
   .free-plan-card {
      flex-direction: column;
      padding: 32px 24px;
      margin-bottom: 16px;
      border-radius: 16px;
      gap: 24px;
   }

   .plan-icon {
      width: 60px;
      height: 60px;
      border-radius: 8px;
   }

   .plan-icon svg {
      width: 28px;
      height: 28px;
   }

   .plan-name {
      font-size: 18px;
   }

   .plan-tagline {
      font-size: 13px;
   }

   .plan-price {
      font-size: 32px;
   }

   .plan-period {
      font-size: 14px;
   }

   .plan-desc {
      display: none;
      font-size: 13px;
      max-width: 100%;
   }

   .plan-cta {
      font-size: 14px;
      padding: 11px 20px;
      width: 100%;
      text-align: center;
   }

   .free-plan-right {
      width: 100%;
      gap: 8px;
   }

   .table-icon-container {
      margin-top: 0;
   }

   .feature-item-check {
      font-size: 13px;
      gap: 8px;
   }

   .toggle-btn.active {
      width: auto;
      min-width: auto;
   }

   .check-icon {
      width: 16px;
      height: 16px;
   }

   /* Paid Plans — single column, full width */
   .paid-plans-grid {
      grid-template-columns: 1fr;
      max-width: 100%;
      gap: 16px;
   }

   .plan-card {
      padding: 24px 20px;
      gap: 18px;
      border-radius: 16px;
   }

   .recommended-badge {
      font-size: 11px;
      padding: 3px 12px;
      font-weight: 600;
      top: 12px;
   }

   .plan-header {
      gap: 10px;
   }

   .plan-cta-full {
      padding: 12px;
      font-size: 13px;
   }

   .plan-features-list {
      gap: 16px;
   }

   /* FAQ Section */
   .faq-section {
      padding: 0px 16px 0px;
      align-items: flex-start;
      margin-bottom: 60px;
   }

   .section-title {
      font-size: 24px;
      text-align: left;
      line-height: 1.3;
      margin-bottom: 10px;
   }

   .section-subtitle {
      font-size: 13px;
      text-align: left;
      line-height: 1.6;
   }

   .faq-container {
      margin-top: 28px;
      border-radius: 14px;
   }

   .faq-question {
      padding: 18px 20px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
   }

   .faq-chevron {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
   }

   .faq-answer {
      padding: 0 20px;
   }

   .faq-answer.open {
      padding: 0 20px 18px;
   }

   .faq-answer p {
      font-size: 13px;
      line-height: 1.6;
   }

   /* Blue CTA */
   .blue-cta-section {
      padding: 0px 16px;
      overflow: hidden;
      margin-bottom: 60px;
   }

   .blue-glow-bg {
      width: 150%;
      height: 300px;
      filter: blur(150px);
   }

   .blue-cta-container {
      padding: 36px 24px;
      border-radius: 20px;
   }

   .blue-cta-logo {
      width: 52px;
      height: 52px;
      border-radius: 12px;
      margin-bottom: 24px;
      font-size: 18px;
   }

   .blue-cta-title {
      font-size: 24px;
      margin-bottom: 14px;
   }

   .blue-cta-subtitle {
      font-size: 14px;
      margin-bottom: 32px;
      color: #F2ECFF;
   }

   .blue-cta-buttons {
      flex-direction: column;
      width: 100%;
      gap: 12px;
   }

   .btn-blue-cta-primary,
   .btn-blue-cta-outline {
      width: 100%;
      justify-content: center;
      font-size: 14px;
      padding: 13px 20px;
   }

   /* Footer */
   .footer {
      padding: 36px 16px 28px;
   }

   .footer-content {
      grid-template-columns: 1fr 1fr;
      gap: 28px 20px;
      margin-bottom: 28px;
   }

   /* Brand spans full width on mobile */
   .footer-brand {
      grid-column: 1 / -1;
   }

   .footer-logo {
      font-size: 18px;
   }

   .footer-logo-icon {
      width: 28px;
      height: 28px;
      font-size: 10px;
   }

   .footer-description {
      font-size: 13px;
      max-width: 100%;
   }

   .footer-newsletter-label {
      font-size: 13px;
   }

   .footer-newsletter-input {
      font-size: 13px;
      padding: 9px 12px;
   }

   .footer-newsletter-btn {
      width: 38px;
      height: 38px;
   }

   .footer-social {
      margin-top: 12px;
   }

   .social-link {
      width: 32px;
      height: 32px;
   }

   .footer-column {
      gap: 10px;
   }

   .footer-column-title {
      font-size: 14px;
      margin-bottom: 2px;
   }

   .footer-link {
      font-size: 13px;
   }

   .footer-bottom {
      padding-top: 24px;
      flex-direction: column;
      gap: 16px;
      text-align: center;
   }

   .copyright {
      font-size: 12px;
      flex-wrap: wrap;
      justify-content: center;
   }
}

/* Extra small screens */
@media (max-width: 375px) {
   .pricing-hero-title {
      font-size: 21px;
   }

   .toggle-btn {
      font-size: 12px;
      padding: 7px 8px;
   }

   .toggle-badge {
      display: none;
   }
}