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 { --bg: #020617; --bg-elevated: #020617; --bg-card: #020617; --bg-soft: #020617; --accent: #38bdf8; --accent-soft: rgba(56, 189, 248, 0.1); --accent-strong: #0ea5e9; --text-main: #e5e7eb; --text-muted: #9ca3af; --border-subtle: rgba(148, 163, 184, 0.2); --danger: #f97373; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px; --shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.85); --max-width: 1080px; --section-gap: 56px; --transition: 180ms ease-out; } * { box-sizing: border-box; } body { margin: 0; font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at top, rgba(56, 189, 248, 0.18) 0, transparent 55%), radial-gradient(circle at bottom, rgba(79, 70, 229, 0.18) 0, transparent 60%), #020617; color: var(--text-main); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .page { min-height: 100vh; padding: 20px 16px 64px; } .shell { max-width: var(--max-width); margin: 0 auto; } /* HEADER / NAV */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px); background: linear-gradient(to bottom, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.4)); border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.35); padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto 28px; max-width: 960px; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.7); } .nav-left { display: flex; align-items: center; gap: 10px; } .nav-logo { width: 26px; height: 26px; border-radius: 10px; background: radial-gradient(circle at 30% 20%, #38bdf8, #0ea5e9 40%, #4f46e5 100%); display: flex; align-items: center; justify-content: center; color: #0b1120; font-size: 14px; font-weight: 700; box-shadow: 0 0 24px rgba(56, 189, 248, 0.5); } .nav-title { font-size: 14px; font-weight: 600; color: #e5e7eb; } .nav-pill { font-size: 11px; color: var(--accent); padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(56, 189, 248, 0.35); background: rgba(15, 23, 42, 0.7); } .nav-cta { display: flex; align-items: center; gap: 12px; } .nav-cta-btn { padding: 9px 18px; border-radius: var(--radius-pill); border: none; background: linear-gradient(135deg, #38bdf8, #0ea5e9); color: #020617; font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 12px 30px rgba(56, 189, 248, 0.4); transition: transform var(--transition), box-shadow var(--transition), filter var(--transition); } .nav-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 18px 40px rgba(56, 189, 248, 0.55); filter: brightness(1.04); } .nav-cta-secondary { display: none; font-size: 12px; color: var(--text-muted); } /* HERO */ .hero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2.2fr); gap: 32px; align-items: center; margin-bottom: var(--section-gap); } .hero-main-eyebrow { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; } .hero-main-eyebrow-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 18px rgba(56, 189, 248, 0.9); } .hero h1 { font-size: clamp(2.3rem, 3.1vw, 3.1rem); line-height: 1.1; margin: 0 0 14px; } .hero h1 span { background: linear-gradient(135deg, #38bdf8, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-subtitle { font-size: 1.05rem; color: #cbd5f5; margin-bottom: 22px; } .hero-bullets { list-style: none; padding: 0; margin: 0 0 26px; font-size: 0.98rem; color: var(--text-muted); } .hero-bullets li { margin-bottom: 6px; display: flex; align-items: flex-start; gap: 8px; } .hero-bullets span { color: var(--accent); margin-top: 3px; } .hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: var(--radius-pill); background: linear-gradient(140deg, #38bdf8, #0ea5e9); border: none; color: #020617; font-weight: 600; font-size: 15px; cursor: pointer; box-shadow: 0 18px 40px rgba(56, 189, 248, 0.5); transition: transform var(--transition), box-shadow var(--transition), filter var(--transition); text-decoration: none; white-space: nowrap; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 22px 55px rgba(56, 189, 248, 0.6); filter: brightness(1.04); } .btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: var(--radius-pill); border: 1px solid rgba(148, 163, 184, 0.5); background: rgba(15, 23, 42, 0.8); color: var(--text-main); font-size: 13px; gap: 8px; cursor: pointer; transition: border-color var(--transition), background var(--transition), transform var(--transition); text-decoration: none; white-space: nowrap; } .btn-outline:hover { border-color: rgba(148, 163, 184, 0.9); background: rgba(15, 23, 42, 0.95); transform: translateY(-1px); } .hero-meta { font-size: 12px; color: var(--text-muted); } .hero-meta span { color: #9fdbff; font-weight: 500; } .hero-side { border-radius: var(--radius-xl); padding: 20px 20px 22px; background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(30, 64, 175, 0.95)); border: 1px solid rgba(148, 163, 184, 0.3); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 16px; } .hero-card-headline { font-size: 1rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .hero-price { font-size: 1.8rem; font-weight: 700; color: #e5f2ff; } .hero-price span { font-size: 0.8rem; color: var(--text-muted); font-weight: 400; } .hero-tagline { font-size: 0.9rem; color: var(--text-muted); } .hero-highlight { font-size: 0.85rem; color: #c4e3ff; padding: 10px 12px; border-radius: 14px; background: rgba(15, 23, 42, 0.9); border: 1px dashed rgba(148, 163, 184, 0.5); } .hero-highlight strong { color: #facc15; } .hero-badges { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.78rem; color: var(--text-muted); } .hero-badge { padding: 6px 10px; border-radius: 999px; background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(148, 163, 184, 0.4); } .hero-disclaimer { font-size: 0.75rem; color: var(--text-muted); } .hero-disclaimer span { color: var(--danger); font-weight: 500; } /* MAIN LAYOUT */ main { display: flex; flex-direction: column; gap: var(--section-gap); } .section { border-radius: var(--radius-xl); background: rgba(15, 23, 42, 0.94); border: 1px solid var(--border-subtle); padding: 26px 22px 26px; box-shadow: 0 20px 60px rgba(15, 23, 42, 0.85); } .section-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .section-eyebrow { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } .section h2 { font-size: 1.5rem; margin: 0; } .section-lede { font-size: 0.98rem; color: var(--text-muted); margin-bottom: 18px; } .two-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr); gap: 24px; } p { margin: 0 0 12px; font-size: 0.97rem; } ul { margin: 0 0 12px 1.1rem; padding: 0; font-size: 0.95rem; color: var(--text-muted); } li { margin-bottom: 6px; } .section-callout { border-radius: 16px; border: 1px solid rgba(56, 189, 248, 0.35); background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.22), transparent 60%); padding: 14px 14px; font-size: 0.9rem; color: #dbeafe; } .section-callout strong { color: #facc15; } .muted { color: var(--text-muted); } .subheading { font-weight: 600; margin: 16px 0 8px; font-size: 1.02rem; } .numbered-list { counter-reset: item; list-style: none; margin-left: 0; } .numbered-list li { counter-increment: item; margin-bottom: 12px; position: relative; padding-left: 26px; } .numbered-list li::before { content: counter(item) "."; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 600; } /* BONUS GRID */ .bonus-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr); gap: 24px; } .badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(250, 204, 21, 0.6); background: rgba(24, 24, 27, 0.9); color: #facc15; margin-bottom: 10px; } .badge span { font-size: 1rem; } /* CTA STRIP */ .cta-strip { border-radius: 24px; padding: 22px 18px; background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.28), rgba(24, 24, 27, 0.98)); border: 1px solid rgba(56, 189, 248, 0.55); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; box-shadow: 0 32px 70px rgba(8, 47, 73, 0.9); } .cta-strip-main { max-width: 470px; } .cta-strip-title { font-size: 1.15rem; font-weight: 600; margin-bottom: 6px; } .cta-strip-sub { font-size: 0.9rem; color: #e0f2fe; } .cta-strip-price { font-size: 0.9rem; color: #dbeafe; } .cta-strip-price strong { font-size: 1.2rem; } .cta-strip-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .cta-strip-note { font-size: 0.78rem; color: #e0f2fe; opacity: 0.9; } /* FOOTER */ footer { margin-top: 40px; text-align: center; font-size: 0.78rem; color: var(--text-muted); } footer a { color: var(--accent); } /* RESPONSIVE */ @media (max-width: 880px) { .nav { border-radius: 16px; } .nav-cta-secondary { display: none; } .hero { grid-template-columns: minmax(0, 1fr); } .hero-side { order: -1; } .two-col, .bonus-grid { grid-template-columns: minmax(0, 1fr); } .section { padding: 20px 16px 20px; } .cta-strip { align-items: flex-start; } .nav-cta-btn span:last-child { display: none; } } @media (max-width: 600px) { .page { padding-inline: 12px; } .hero h1 { font-size: 1.9rem; } .hero-subtitle { font-size: 0.98rem; } .cta-strip { padding: 18px 14px; } } /* --- HERO LAYOUT FIX --- */ /* Base: stack nicely */ .hero { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; margin-bottom: var(--section-gap); } .hero > div { max-width: 640px; } .hero-side { width: 100%; max-width: 420px; margin-top: 8px; } /* Desktop: two balanced columns */ @media (min-width: 960px) { .hero { flex-direction: row; align-items: flex-start; justify-content: space-between; } .hero > div { max-width: 560px; } .hero-side { margin-top: 0; } } /* Small screens: card below text */ @media (max-width: 959px) { .hero { align-items: stretch; } .hero-side { align-self: stretch; } }