body { font-family: Lato,sans-serif }
     


      {} *{} {}
     


      #IE-warning {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: white;
      }
      .IE-warning-message {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }
    


        
        .global-style-nK2AH4UiC {
          cursor: pointer;text-decoration-line: none;text-decoration-style: solid;text-decoration-color: initial;
      }
        
        @media (max-width: 639px) {
          
        .global-style-nK2AH4UiC {
          font-size: 24px;color: rgb(255, 255, 255);text-align: center;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;margin-top: 30px;padding-left: 50px;padding-right: 50px;padding-top: 19px;padding-bottom: 19px;align-items: center;display: inline-flex;cursor: pointer;text-decoration-line: none;text-decoration-style: solid;text-decoration-color: initial;
      }
        }
        @media (max-width: 767px) and (min-width: 640px) {
          
        .global-style-nK2AH4UiC {
          font-size: 24px;color: rgb(255, 255, 255);text-align: center;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;margin-top: 30px;padding-left: 50px;padding-right: 50px;padding-top: 19px;padding-bottom: 19px;align-items: center;display: inline-flex;cursor: pointer;text-decoration-line: none;text-decoration-style: solid;text-decoration-color: initial;
      }
        }
        @media (max-width: 991px) and (min-width: 768px) {
          
        .global-style-nK2AH4UiC {
          font-size: 24px;color: rgb(255, 255, 255);text-align: center;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;margin-top: 30px;padding-left: 50px;padding-right: 50px;padding-top: 19px;padding-bottom: 19px;align-items: center;display: inline-flex;cursor: pointer;text-decoration-line: none;text-decoration-style: solid;text-decoration-color: initial;
      }
        }
        @media (max-width: 1199px) and (min-width: 992px) {
          
        .global-style-nK2AH4UiC {
          font-size: 24px;color: rgb(255, 255, 255);text-align: center;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;margin-top: 30px;padding-left: 50px;padding-right: 50px;padding-top: 19px;padding-bottom: 19px;align-items: center;display: inline-flex;cursor: pointer;text-decoration-line: none;text-decoration-style: solid;text-decoration-color: initial;
      }
        }
        @media (min-width: 1200px) {
          
        .global-style-nK2AH4UiC {
          font-size: 24px;color: rgb(255, 255, 255);text-align: center;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;margin-top: 30px;padding-left: 50px;padding-right: 50px;padding-top: 19px;padding-bottom: 19px;align-items: center;display: inline-flex;cursor: pointer;text-decoration-line: none;text-decoration-style: solid;text-decoration-color: initial;
      }
        }
        
        .global-style-nK2AH4UiC:not([data-gp-component="block"]), .global-style-nK2AH4UiC [data-section-overlay] {
          background-color: transparent;
      }
        
        @media (max-width: 639px) {
          
        .global-style-nK2AH4UiC:not([data-gp-component="block"]), .global-style-nK2AH4UiC [data-section-overlay] {
          background-color: rgb(240, 149, 88);
      }
        .global-style-nK2AH4UiC:not([data-gp-component="block"]):hover,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-hover, .global-style-nK2AH4UiC [data-section-overlay]:hover, .global-style-nK2AH4UiC [data-section-overlay].gp-hover {
          background-color: rgb(89, 198, 152);
      }
        .global-style-nK2AH4UiC:not([data-gp-component="block"]):active,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-active, .global-style-nK2AH4UiC [data-section-overlay]:active, .global-style-nK2AH4UiC [data-section-overlay].gp-active {
          background-color: rgb(32, 45, 60);
      }
        }
        @media (max-width: 767px) and (min-width: 640px) {
          
        .global-style-nK2AH4UiC:not([data-gp-component="block"]), .global-style-nK2AH4UiC [data-section-overlay] {
          background-color: rgb(240, 149, 88);
      }
        .global-style-nK2AH4UiC:not([data-gp-component="block"]):hover,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-hover, .global-style-nK2AH4UiC [data-section-overlay]:hover, .global-style-nK2AH4UiC [data-section-overlay].gp-hover {
          background-color: rgb(89, 198, 152);
      }
        .global-style-nK2AH4UiC:not([data-gp-component="block"]):active,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-active, .global-style-nK2AH4UiC [data-section-overlay]:active, .global-style-nK2AH4UiC [data-section-overlay].gp-active {
          background-color: rgb(32, 45, 60);
      }
        }
        @media (max-width: 991px) and (min-width: 768px) {
          
        .global-style-nK2AH4UiC:not([data-gp-component="block"]), .global-style-nK2AH4UiC [data-section-overlay] {
          background-color: rgb(240, 149, 88);
      }
        .global-style-nK2AH4UiC:not([data-gp-component="block"]):hover,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-hover, .global-style-nK2AH4UiC [data-section-overlay]:hover, .global-style-nK2AH4UiC [data-section-overlay].gp-hover {
          background-color: rgb(89, 198, 152);
      }
        .global-style-nK2AH4UiC:not([data-gp-component="block"]):active,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-active, .global-style-nK2AH4UiC [data-section-overlay]:active, .global-style-nK2AH4UiC [data-section-overlay].gp-active {
          background-color: rgb(32, 45, 60);
      }
        }
        @media (max-width: 1199px) and (min-width: 992px) {
          
        .global-style-nK2AH4UiC:not([data-gp-component="block"]), .global-style-nK2AH4UiC [data-section-overlay] {
          background-color: rgb(240, 149, 88);
      }
        .global-style-nK2AH4UiC:not([data-gp-component="block"]):hover,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-hover, .global-style-nK2AH4UiC [data-section-overlay]:hover, .global-style-nK2AH4UiC [data-section-overlay].gp-hover {
          background-color: rgb(89, 198, 152);
      }
        .global-style-nK2AH4UiC:not([data-gp-component="block"]):active,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-active, .global-style-nK2AH4UiC [data-section-overlay]:active, .global-style-nK2AH4UiC [data-section-overlay].gp-active {
          background-color: rgb(32, 45, 60);
      }
        }
        @media (min-width: 1200px) {
          
        .global-style-nK2AH4UiC:not([data-gp-component="block"]), .global-style-nK2AH4UiC [data-section-overlay] {
          background-color: rgb(240, 149, 88);
      }
        .global-style-nK2AH4UiC:not([data-gp-component="block"]):hover,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-hover, .global-style-nK2AH4UiC [data-section-overlay]:hover, .global-style-nK2AH4UiC [data-section-overlay].gp-hover {
          background-color: rgb(89, 198, 152);
      }
        .global-style-nK2AH4UiC:not([data-gp-component="block"]):active,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-active, .global-style-nK2AH4UiC [data-section-overlay]:active, .global-style-nK2AH4UiC [data-section-overlay].gp-active {
          background-color: rgb(32, 45, 60);
      }
        }

:root { /* Core Backgrounds */ --bg: #0a0014; --bg-alt: #170028; --card: #12001f; /* Purple Accent System */ --accent: #c084fc; /* Soft lavender-purple */ --accent-soft: rgba(192, 132, 252, 0.12); --accent-strong: #a855f7; /* Strong royal purple */ /* Text Colors */ --text: #f3e8ff; /* Light lavender-white */ --text-soft: #d1c1e9; /* Softer muted lavender */ /* Borders & Utility Colors */ --border-subtle: rgba(180, 140, 230, 0.30); --danger: #f43f5e; /* Shadows & Radii */ --radius-lg: 18px; --radius-xl: 24px; --shadow-soft: 0 18px 45px rgba(70, 0, 110, 0.6); --shadow-subtle: 0 10px 30px rgba(70, 0, 110, 0.45); --max-width: 1120px; /* Transitions */ --transition-fast: 0.18s ease-out; --transition-med: 0.25s ease-out; } /* RESET & BASE */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; background: radial-gradient(circle at top, #020617, #020617 35%, #000 100%); color: var(--text); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } p { margin: 0 0 1rem; line-height: 1.6; } /* LAYOUT HELPERS */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; } .grid { display: grid; gap: 2rem; } .grid-2 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } } /* HEADER */ .site-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(16px); background: linear-gradient( to bottom, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.0) ); border-bottom: 1px solid rgba(148, 163, 184, 0.15); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1.5rem; } .logo { font-weight: 700; letter-spacing: 0.06em; font-size: 0.95rem; text-transform: uppercase; color: #f9fafb; } .nav { position: relative; } .nav-links { display: flex; gap: 1.25rem; list-style: none; padding: 0; margin: 0; } .nav-links a { font-size: 0.9rem; color: var(--text-soft); padding: 0.35rem 0; border-bottom: 2px solid transparent; transition: border-color var(--transition-fast), color var(--transition-fast); } .nav-links a:hover { color: var(--text); border-color: var(--accent); } .nav-toggle { display: none; border: none; background: none; color: var(--text); font-size: 1.4rem; cursor: pointer; } @media (max-width: 768px) { .nav-toggle { display: block; } .nav-links { position: absolute; right: 0; top: 130%; flex-direction: column; background: rgba(15, 23, 42, 0.98); border-radius: 14px; padding: 0.75rem 1rem; min-width: 210px; box-shadow: var(--shadow-subtle); transform-origin: top right; transform: scale(0.9); opacity: 0; pointer-events: none; transition: opacity var(--transition-med), transform var(--transition-med); } .nav-links.open { transform: scale(1); opacity: 1; pointer-events: auto; } } /* HERO */ .hero { padding: 3.5rem 0 3rem; } .hero-inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2.8rem; align-items: center; } @media (max-width: 900px) { .hero-inner { grid-template-columns: minmax(0, 1fr); padding-top: 0.5rem; } } .eyebrow { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 0.6rem; } .hero h1 { font-size: clamp(1.9rem, 2.8vw, 2.6rem); line-height: 1.15; margin: 0 0 1rem; letter-spacing: -0.03em; } .hero-subtitle { color: var(--text-soft); font-size: 0.98rem; max-width: 34rem; } .hero-cta { margin-top: 1.7rem; } .hero-note { font-size: 0.85rem; color: var(--text-soft); margin-top: 0.75rem; } .hero-card { display: flex; justify-content: flex-end; } .hero-card-inner { background: radial-gradient(circle at top left, #1d283a, #020617); border-radius: var(--radius-xl); padding: 1.6rem 1.5rem; border: 1px solid rgba(148, 163, 184, 0.4); box-shadow: var(--shadow-soft); max-width: 350px; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; font-size: 0.8rem; color: var(--text-soft); } .badge { background: rgba(56, 189, 248, 0.1); color: var(--accent); padding: 0.2rem 0.7rem; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; } .card-body { font-size: 0.9rem; } .card-title { font-weight: 600; margin-bottom: 0.9rem; } .card-list { list-style: none; padding: 0; margin: 0 0 1.2rem; } .card-list li { margin-bottom: 0.4rem; color: var(--text-soft); } /* SECTION SHARED */ .section { padding: 3rem 0; } .section-alt { background: radial-gradient(circle at top left, #020617, #020617 40%, #000 100%); } .section-header { max-width: 40rem; margin-bottom: 2rem; } .section-header h2 { font-size: 1.5rem; margin: 0 0 0.7rem; } .section-header p { color: var(--text-soft); } /* BUTTONS */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: 999px; border: 1px solid transparent; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); text-align: center; } .btn-primary { background: linear-gradient(135deg, var(--accent-strong), var(--accent)); color: #0b1120; box-shadow: 0 15px 35px rgba(56, 189, 248, 0.35); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 40px rgba(56, 189, 248, 0.45); } .btn-outline { background: transparent; border-color: rgba(148, 163, 184, 0.6); color: var(--text); } .btn-outline:hover { background: rgba(15, 23, 42, 0.8); border-color: var(--accent); } .btn-block { width: 100%; } .btn-lg { font-size: 1rem; padding-inline: 1.9rem; } /* PROBLEM SECTION */ .problem-list ul { list-style: none; padding: 0; margin: 0 0 1rem; } .problem-list li { margin-bottom: 0.4rem; color: var(--text-soft); } .highlight { background: var(--accent-soft); border-radius: var(--radius-lg); padding: 0.9rem 1rem; border-left: 3px solid var(--accent); font-size: 0.92rem; } /* FEATURES */ .features { margin-top: 1.5rem; } .feature { background: rgba(15, 23, 42, 0.85); border-radius: var(--radius-lg); padding: 1.2rem 1.3rem; border: 1px solid rgba(148, 163, 184, 0.3); } .feature h3 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.05rem; } /* CTA PANEL */ .cta-panel { margin-top: 2.4rem; padding: 1.6rem 1.6rem; border-radius: var(--radius-xl); background: linear-gradient(120deg, rgba(56, 189, 248, 0.08), rgba(15, 23, 42, 0.95)); border: 1px solid rgba(56, 189, 248, 0.3); display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; } .cta-panel-action { text-align: right; } .cta-small { font-size: 0.85rem; color: var(--text-soft); margin-top: 0.5rem; } @media (max-width: 900px) { .cta-panel { grid-template-columns: minmax(0, 1fr); } .cta-panel-action { text-align: left; } } /* INSIDE SYSTEM */ .inside-grid { margin-top: 1.5rem; } .checklist { list-style: none; padding: 0; margin: 0; } .checklist li { margin-bottom: 1.3rem; padding-left: 1.6rem; position: relative; } .checklist li::before { content: "✔"; position: absolute; left: 0; top: 0.2rem; font-size: 0.8rem; color: var(--accent); } .checklist strong { display: block; margin-bottom: 0.2rem; } /* HIGHLIGHTS / SOCIAL PROOF */ .highlights { margin-top: 1.6rem; } .highlight-card { background: rgba(15, 23, 42, 0.9); border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; border: 1px solid var(--border-subtle); font-size: 0.95rem; } .highlight-label { font-weight: 600; margin-bottom: 0.4rem; } /* STEPS */ .steps { list-style: none; padding: 0; margin: 1.5rem 0 0; border-top: 1px solid rgba(148, 163, 184, 0.35); } .steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1.3rem 0; border-bottom: 1px solid rgba(148, 163, 184, 0.18); } .step-number { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; font-size: 0.95rem; } .steps h3 { margin: 0 0 0.25rem; } /* FINAL CTA */ .final-cta { margin-top: 2.4rem; text-align: center; } .final-cta h3 { margin-bottom: 0.5rem; } .final-cta p { max-width: 32rem; margin: 0 auto 1.2rem; color: var(--text-soft); } .fine-print { font-size: 0.8rem; color: #6b7280; margin-top: 0.9rem; } /* FOOTER */ .site-footer { border-top: 1px solid rgba(148, 163, 184, 0.2); padding: 1.4rem 0 1.8rem; background: #020617; } .footer-inner { text-align: center; font-size: 0.8rem; color: var(--text-soft); } .footer-disclaimer { margin-bottom: 0.6rem; }