From 3a623278fd64feeb7f9180d74cc0edbce65a9902 Mon Sep 17 00:00:00 2001
From: oliver <oliver@odoo4projects.com>
Date: Wed, 24 Jun 2026 10:28:30 -0300
Subject: [PATCH] h

---
 index.html | 1413 ++++------------------------------------------------
 script.js  |  460 +++++++++++++++++
 style.css  |  867 ++++++++++++++++++++++++++++++++
 3 files changed, 1417 insertions(+), 1323 deletions(-)
 create mode 100644 script.js
 create mode 100644 style.css

diff --git a/index.html b/index.html
index 43f1d4f..20ba023 100644
--- a/index.html
+++ b/index.html
@@ -71,875 +71,7 @@
             media="print"
             onload="this.media = 'all'"
         />
-        <style>
-            * {
-                box-sizing: border-box;
-            }
-            body {
-                margin: 0;
-                font-family: Inter, sans-serif;
-                font-size: 0.8rem;
-                line-height: 1.6;
-                color: #212529;
-                background: #fff;
-            }
-            h1,
-            h2,
-            h3 {
-                font-family:
-                    Inter Tight,
-                    sans-serif;
-                font-weight: 600;
-                line-height: 1.25;
-                margin-top: 0;
-                margin-bottom: 0.5rem;
-            }
-            h1 {
-                font-size: clamp(1.44rem, 3.2vw, 2.24rem);
-            }
-            h2 {
-                font-size: clamp(1.2rem, 2.56vw, 1.76rem);
-            }
-            h3 {
-                font-size: clamp(0.96rem, 2vw, 1.28rem);
-            }
-            p {
-                margin-top: 0;
-                margin-bottom: 1rem;
-            }
-            a {
-                color: #65435c;
-                text-decoration: none;
-            }
-            img {
-                max-width: 100%;
-                height: auto;
-                vertical-align: middle;
-            }
-            :root {
-                --primary: #714b67;
-                --secondary: #f0cda8;
-                --dark: #1b1319;
-                --light: #f6f5f4;
-                --border: #e5e3e0;
-                --radius: 0.6rem;
-                --radius-lg: 1rem;
-            }
-            .container {
-                width: 80%;
-                padding: 0 20px;
-                margin: 0 auto;
-                max-width: 1300px;
-            }
-            @media (max-width: 768px) {
-                .container {
-                    max-width: 100%;
-                }
-            }
-            .row {
-                display: flex;
-                flex-wrap: wrap;
-                margin: 0 -15px;
-            }
-            .col-lg-5 {
-                flex: 0 0 41.666%;
-                max-width: 41.666%;
-                padding: 0 15px;
-            }
-            .col-lg-6 {
-                flex: 0 0 50%;
-                max-width: 50%;
-                padding: 0 15px;
-            }
-            .col-lg-10 {
-                flex: 0 0 83.333%;
-                max-width: 83.333%;
-                padding: 0 15px;
-            }
-            .offset-lg-1 {
-                margin-left: 8.333%;
-            }
-            .offset-lg-6 {
-                margin-left: 50%;
-            }
-            @media (max-width: 992px) {
-                .col-lg-5,
-                .col-lg-6,
-                .col-lg-10 {
-                    flex: 0 0 100%;
-                    max-width: 100%;
-                }
-                .offset-lg-1,
-                .offset-lg-6 {
-                    margin-left: 0;
-                }
-            }
-            .text-center {
-                text-align: center;
-            }
-            .d-none {
-                display: none !important;
-            }
-            .d-flex {
-                display: flex;
-            }
-            .align-items-center {
-                align-items: center;
-            }
-            .mb-4 {
-                margin-bottom: 1.5rem;
-            }
-            .mt-3 {
-                margin-top: 1rem;
-            }
-            .btn {
-                display: inline-block;
-                padding: 0.5rem 1.3rem;
-                font-size: 0.72rem;
-                font-weight: 500;
-                border: 1px solid transparent;
-                border-radius: 0.5rem;
-                cursor: pointer;
-                text-decoration: none;
-                transition: all 0.2s;
-            }
-            .btn-primary {
-                color: #fff;
-                background: var(--primary);
-                border-color: var(--primary);
-            }
-            .btn-primary:hover {
-                background: #5e3f55;
-                border-color: #5e3f55;
-                transform: translateY(-1px);
-            }
-            .btn-outline-primary {
-                color: #65435c;
-                border-color: #65435c;
-                background: transparent;
-            }
-            .btn-outline-primary:hover {
-                color: #fff;
-                background: #65435c;
-                border-color: #65435c;
-            }
-            .btn-lg {
-                padding: 0.75rem 2rem;
-                font-size: 0.84rem;
-                border-radius: 2rem;
-            }
-            .hr {
-                width: 3.5rem;
-                height: 3px;
-                background: linear-gradient(
-                    90deg,
-                    var(--primary),
-                    var(--secondary)
-                );
-                border-radius: 2px;
-                margin: 0 auto 1rem;
-            }
-            .hero-carousel {
-                position: relative;
-                overflow: hidden;
-                min-height: 400px;
-            }
-            .hero-slide {
-                position: absolute;
-                inset: 0;
-                min-height: 400px;
-                display: flex;
-                align-items: center;
-                background-size: cover;
-                background-position: center;
-                transform: translateY(-100%);
-                opacity: 0;
-                transition:
-                    transform 0.5s ease,
-                    opacity 0.5s ease;
-                z-index: 1;
-            }
-            .hero-slide.active {
-                transform: translateY(0);
-                opacity: 1;
-                z-index: 2;
-            }
-            .hero-slide.prev {
-                transform: translateY(100%);
-                opacity: 0;
-                z-index: 1;
-            }
-            .hero-slide::before {
-                content: "";
-                position: absolute;
-                inset: 0;
-                background: none;
-            }
-            .hero-box {
-                position: relative;
-                z-index: 2;
-                padding: 1.5rem;
-                border-radius: var(--radius);
-                background: rgba(27, 19, 25, 0.75);
-                color: #fff;
-                border: 1px solid rgba(255, 255, 255, 0.08);
-            }
-            .hero-box h2 {
-                color: #fff;
-                font-size: clamp(1rem, 2.2vw, 1.4rem);
-                margin-bottom: 0.3rem;
-            }
-            .hero-box p {
-                color: rgba(255, 255, 255, 0.9);
-                font-size: 0.75rem;
-                margin-bottom: 0.5rem;
-            }
-            .carousel-dots {
-                position: absolute;
-                bottom: 1rem;
-                left: 0;
-                right: 0;
-                display: flex;
-                justify-content: center;
-                gap: 0.5rem;
-                z-index: 3;
-            }
-            .carousel-dot {
-                width: 8px;
-                height: 8px;
-                border-radius: 50%;
-                border: none;
-                background: rgba(255, 255, 255, 0.35);
-                cursor: pointer;
-                transition: all 0.3s;
-            }
-            .carousel-dot.active {
-                background: rgba(255, 255, 255, 0.8);
-                transform: scale(1.2);
-            }
-            .arrow {
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-                z-index: 3;
-                background: rgba(27, 19, 25, 0.5);
-                color: #fff;
-                border: none;
-                width: 2.5rem;
-                height: 2.5rem;
-                border-radius: 50%;
-                cursor: pointer;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                transition: all 0.2s;
-            }
-            .arrow:hover {
-                background: rgba(27, 19, 25, 0.8);
-                transform: translateY(-50%) scale(1.05);
-            }
-            .arrow.left {
-                left: 1rem;
-            }
-            .arrow.right {
-                right: 1rem;
-            }
-            @media (max-width: 768px) {
-                .arrow {
-                    display: none;
-                }
-            }
-            .stitle {
-                text-align: center;
-                padding: 2rem 0;
-            }
-            .stitle h1 {
-                font-size: clamp(1.12rem, 2.4vw, 1.6rem);
-                max-width: 720px;
-                margin: 0 auto;
-                color: var(--dark);
-            }
-            .tabs-section {
-                padding: 2rem 0;
-            }
-            .tabs-wrap {
-                display: flex;
-                gap: 2rem;
-            }
-            .tabs-nav {
-                flex: 0 0 220px;
-                max-width: 220px;
-                display: flex;
-                flex-direction: column;
-                gap: 0.25rem;
-            }
-            .tabs-content {
-                flex: 1;
-                min-height: 200px;
-                font-size: 0.84rem;
-                line-height: 1.7;
-            }
-            .tab-btn {
-                display: block;
-                padding: 0.6rem 1rem;
-                color: #212529;
-                border-radius: var(--radius);
-                border: none;
-                background: none;
-                width: 100%;
-                text-align: left;
-                font-size: 0.76rem;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.2s;
-            }
-            .tab-btn:hover {
-                background: var(--light);
-            }
-            .tab-btn.active {
-                background: linear-gradient(
-                    135deg,
-                    rgba(113, 75, 103, 0.08),
-                    rgba(113, 75, 103, 0.03)
-                );
-                color: var(--primary);
-                font-weight: 600;
-                border-left: 3px solid var(--primary);
-            }
-            .tab-btn small {
-                display: block;
-                color: rgba(33, 37, 41, 0.55);
-                font-size: 0.64rem;
-                margin-top: 0.1rem;
-            }
-            .tab-btn.active small {
-                color: rgba(113, 75, 103, 0.6);
-            }
-            .tab-pane {
-                display: none;
-            }
-            .tab-pane.active {
-                display: block;
-            }
-            @media (max-width: 992px) {
-                .tabs-wrap {
-                    flex-direction: column;
-                }
-                .tabs-nav {
-                    flex: 0 0 100%;
-                    max-width: 100%;
-                    flex-direction: row;
-                    overflow-x: auto;
-                    padding-bottom: 0.5rem;
-                    border-bottom: 1px solid var(--border);
-                }
-                .tab-btn {
-                    white-space: nowrap;
-                    width: auto;
-                    border-left: none;
-                }
-                .tab-btn.active {
-                    border-left: none;
-                    border-bottom: 3px solid var(--primary);
-                }
-                .tab-btn small {
-                    display: none;
-                }
-                .tabs-content {
-                    flex: 0 0 100%;
-                    max-width: 100%;
-                }
-            }
-            .psection {
-                padding: 2rem 0;
-                background: var(--light);
-            }
-            .pgrid {
-                display: grid;
-                grid-template-columns: repeat(4, 1fr);
-                gap: 1rem;
-            }
-            .pcard {
-                background: #fff;
-                border: 1px solid var(--border);
-                border-radius: var(--radius-lg);
-                overflow: hidden;
-                display: flex;
-                flex-direction: column;
-                transition: all 0.3s;
-                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-            }
-            .pcard:hover {
-                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-                transform: translateY(-3px);
-            }
-            .pcard.featured {
-                border: 2px solid var(--primary);
-                position: relative;
-            }
-            .pcard.featured::before {
-                content: "Most Popular";
-                position: absolute;
-                top: 0.75rem;
-                right: 0.75rem;
-                background: var(--primary);
-                color: #fff;
-                padding: 0.2rem 0.6rem;
-                border-radius: 2rem;
-                font-size: 0.6rem;
-                font-weight: 600;
-            }
-            .pcard-body {
-                padding: 1.25rem;
-                flex: 1;
-            }
-            .pcard-body h3 {
-                font-size: 0.92rem;
-                font-weight: 700;
-            }
-            .pcard .price {
-                margin: 0.5rem 0;
-            }
-            .pcard .price strong {
-                font-size: clamp(1.28rem, 2vw, 1.92rem);
-                color: var(--dark);
-            }
-            .pcard .price small {
-                color: rgba(33, 37, 41, 0.55);
-                font-size: 0.68rem;
-            }
-            .pcard .desc {
-                font-size: 0.68rem;
-                color: rgba(33, 37, 41, 0.6);
-                min-height: 2rem;
-                font-style: italic;
-            }
-            .pcard .btn {
-                margin-bottom: 0.75rem;
-                width: 100%;
-            }
-            .pcard ul {
-                list-style: none;
-                padding: 0;
-                margin: 0;
-            }
-            .pcard li {
-                padding: 0.4rem 0;
-                font-size: 0.68rem;
-                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-                display: flex;
-                align-items: center;
-                gap: 0.4rem;
-            }
-            .pcard li:last-child {
-                border-bottom: 0;
-            }
-            .pcard-foot {
-                padding: 0.6rem 1.25rem;
-                text-align: center;
-                border-top: 1px solid var(--border);
-                font-size: 0.64rem;
-                color: rgba(33, 37, 41, 0.55);
-            }
-            @media (max-width: 992px) {
-                .pgrid {
-                    grid-template-columns: repeat(2, 1fr);
-                }
-            }
-            @media (max-width: 576px) {
-                .pgrid {
-                    grid-template-columns: 1fr;
-                }
-            }
-            .trial {
-                padding: 3rem 0;
-                background: linear-gradient(135deg, #1b1319, #2a1d27);
-                color: #fff;
-            }
-            .trial h2 {
-                color: #fff;
-            }
-            .trial p {
-                color: rgba(255, 255, 255, 0.8);
-            }
-            .abanner {
-                padding: 2rem 0;
-                text-align: center;
-                background: #fff;
-            }
-            .abanner h2 {
-                font-size: clamp(1.12rem, 2.4vw, 1.6rem) !important;
-                max-width: 700px;
-                margin: 0 auto 0.5rem;
-            }
-            .footer {
-                background: var(--dark);
-                color: rgba(255, 255, 255, 0.85);
-                padding-top: 3rem;
-            }
-            .fgrid {
-                display: grid;
-                grid-template-columns: 1.5fr 3fr 3.5fr;
-                gap: 2rem;
-                padding-bottom: 2rem;
-                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-            }
-            .footer h5 {
-                color: #fff;
-                margin-bottom: 0.8rem;
-                font-weight: 600;
-            }
-            .footer ul {
-                list-style: none;
-                padding: 0;
-            }
-            .footer li {
-                margin-bottom: 0.3rem;
-            }
-            .footer a {
-                color: rgba(255, 255, 255, 0.65);
-                transition: color 0.2s;
-            }
-            .footer a:hover {
-                color: #fff;
-                text-decoration: none;
-            }
-            .footer p {
-                color: rgba(255, 255, 255, 0.7);
-                font-size: 0.72rem;
-                line-height: 1.7;
-            }
-            .footer strong {
-                color: #fff;
-            }
-            .footer .social a {
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
-                width: 2.5rem;
-                height: 2.5rem;
-                border-radius: 50%;
-                background: rgba(255, 255, 255, 0.08);
-                color: rgba(255, 255, 255, 0.7);
-                margin-right: 0.3rem;
-                transition: all 0.2s;
-            }
-            .footer .social a:hover {
-                background: var(--primary);
-                color: #fff;
-            }
-            .fform label {
-                font-weight: 500;
-                margin-bottom: 0.25rem;
-                display: block;
-                color: #fff;
-            }
-            .fform input {
-                display: block;
-                width: 100%;
-                padding: 0.5rem 0.8rem;
-                font-size: 0.72rem;
-                background: rgba(255, 255, 255, 0.08);
-                border: 1px solid rgba(255, 255, 255, 0.12);
-                border-radius: 0.5rem;
-                color: #fff;
-                margin-bottom: 0.75rem;
-            }
-            .fform input:focus {
-                outline: none;
-                border-color: var(--primary);
-            }
-            .fform input::placeholder {
-                color: rgba(255, 255, 255, 0.35);
-            }
-            .fcopy {
-                padding: 1rem 0;
-                text-align: center;
-                font-size: 0.68rem;
-                color: rgba(255, 255, 255, 0.5);
-            }
-            @media (max-width: 992px) {
-                .fgrid {
-                    grid-template-columns: 1fr;
-                }
-            }
-            .spinner-overlay {
-                position: absolute;
-                inset: 0;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                background: var(--dark);
-                z-index: 5;
-                transition: opacity 0.5s;
-            }
-            .spinner-overlay.hidden {
-                opacity: 0;
-                pointer-events: none;
-            }
-            .spinner {
-                width: 2rem;
-                height: 2rem;
-                border: 3px solid rgba(255, 255, 255, 0.15);
-                border-top-color: #fff;
-                border-radius: 50%;
-                animation: spin 0.8s linear infinite;
-            }
-            @keyframes spin {
-                to {
-                    transform: rotate(360deg);
-                }
-            }
-
-            /* ---- Billing Toggle ---- */
-            .billing-toggle-wrap {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                gap: 0.75rem;
-                margin-bottom: 1.5rem;
-            }
-            .toggle-label {
-                font-size: 0.82rem;
-                font-weight: 500;
-                color: rgba(33, 37, 41, 0.6);
-                cursor: pointer;
-                transition: color 0.2s;
-                user-select: none;
-            }
-            .toggle-label.active {
-                color: var(--dark);
-                font-weight: 600;
-            }
-            .toggle-label small {
-                display: block;
-                font-size: 0.62rem;
-                font-weight: 400;
-                color: #28a745;
-                margin-top: 0.1rem;
-            }
-            .toggle-switch {
-                width: 48px;
-                height: 26px;
-                background: var(--border);
-                border-radius: 13px;
-                cursor: pointer;
-                position: relative;
-                transition: background 0.25s;
-                flex-shrink: 0;
-            }
-            .toggle-switch.yearly {
-                background: var(--primary);
-            }
-            .toggle-switch .thumb {
-                position: absolute;
-                top: 3px;
-                left: 3px;
-                width: 20px;
-                height: 20px;
-                background: #fff;
-                border-radius: 50%;
-                transition: left 0.25s;
-                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-            }
-            .toggle-switch.yearly .thumb {
-                left: 25px;
-            }
-            .price-save {
-                font-size: 0.6rem;
-                font-weight: 700;
-                color: #28a745;
-                margin-top: 0.15rem;
-            }
-            .price-period {
-                color: rgba(33, 37, 41, 0.55);
-                font-size: 0.68rem;
-            }
-            /* ---- Blog Section ---- */
-            .blog-section {
-                padding: 3rem 0;
-                background: #08080c;
-                color: #e8e8f0;
-            }
-            .blog-section h2 {
-                color: #e8e8f0;
-            }
-            .blog-search-wrap {
-                max-width: 500px;
-                margin: 0 auto 2rem;
-            }
-            .blog-search {
-                width: 100%;
-                padding: 0.75rem 1rem;
-                font-size: 0.85rem;
-                background: #1a1a2e;
-                border: 1px solid #2a2a4e;
-                border-radius: 0.5rem;
-                color: #e8e8f0;
-                font-family: Inter, sans-serif;
-                transition: border-color 0.2s;
-                outline: none;
-            }
-            .blog-search:focus {
-                border-color: #00f5ff;
-                box-shadow: 0 0 0 2px rgba(0, 245, 255, 0.15);
-            }
-            .blog-search::placeholder {
-                color: rgba(232, 232, 240, 0.35);
-            }
-            .blog-grid {
-                display: grid;
-                grid-template-columns: repeat(3, 1fr);
-                gap: 1.25rem;
-                margin-bottom: 2rem;
-            }
-            @media (max-width: 992px) {
-                .blog-grid {
-                    grid-template-columns: repeat(2, 1fr);
-                }
-            }
-            @media (max-width: 576px) {
-                .blog-grid {
-                    grid-template-columns: 1fr;
-                }
-            }
-            .blog-card {
-                background: #12121c;
-                border: 1px solid #1a1a2e;
-                border-radius: 0.6rem;
-                padding: 1.25rem;
-                display: flex;
-                flex-direction: column;
-                transition:
-                    transform 0.2s,
-                    border-color 0.2s,
-                    box-shadow 0.2s;
-            }
-            .blog-card:hover {
-                transform: translateY(-2px);
-                border-color: #00f5ff;
-                box-shadow: 0 4px 20px rgba(0, 245, 255, 0.08);
-            }
-            .blog-card-top {
-                display: flex;
-                align-items: center;
-                gap: 0.5rem;
-                margin-bottom: 0.75rem;
-                flex-wrap: wrap;
-            }
-            .blog-badge {
-                display: inline-block;
-                padding: 0.15rem 0.5rem;
-                border-radius: 3rem;
-                font-size: 0.6rem;
-                font-weight: 700;
-                letter-spacing: 0.04em;
-                text-transform: uppercase;
-                color: #08080c;
-            }
-            .blog-badge-speed-run {
-                background: #f472b6;
-            }
-            .blog-badge-guide {
-                background: #a78bfa;
-            }
-            .blog-badge-howto {
-                background: #00f5ff;
-            }
-            .blog-badge-news {
-                background: #ffaa00;
-            }
-            .blog-badge-default {
-                background: #a78bfa;
-            }
-            .blog-agent {
-                display: inline-block;
-                padding: 0.15rem 0.45rem;
-                border-radius: 3rem;
-                font-size: 0.56rem;
-                font-weight: 600;
-                background: rgba(0, 245, 255, 0.15);
-                color: #00f5ff;
-                border: 1px solid rgba(0, 245, 255, 0.25);
-            }
-            .blog-date {
-                font-size: 0.7rem;
-                color: rgba(232, 232, 240, 0.45);
-                margin-bottom: 0.4rem;
-            }
-            .blog-card h3 {
-                font-family: "Inter Tight", sans-serif;
-                font-size: 0.95rem;
-                font-weight: 600;
-                margin: 0 0 0.5rem;
-                line-height: 1.35;
-            }
-            .blog-card h3 a {
-                color: #e8e8f0;
-                text-decoration: none;
-                transition: color 0.2s;
-            }
-            .blog-card h3 a:hover {
-                color: #00f5ff;
-            }
-            .blog-teaser {
-                font-size: 0.78rem;
-                color: rgba(232, 232, 240, 0.65);
-                line-height: 1.55;
-                margin-bottom: 1rem;
-                flex: 1;
-            }
-            .blog-readmore {
-                font-size: 0.75rem;
-                color: #00f5ff;
-                text-decoration: none;
-                font-weight: 500;
-                transition: opacity 0.2s;
-                margin-top: auto;
-            }
-            .blog-readmore:hover {
-                opacity: 0.75;
-            }
-            .blog-empty {
-                grid-column: 1 / -1;
-                text-align: center;
-                padding: 2rem;
-                color: rgba(232, 232, 240, 0.5);
-                font-size: 0.9rem;
-            }
-            .blog-pagination {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                gap: 0.75rem;
-                padding: 1rem 0;
-            }
-            .blog-page-btn {
-                padding: 0.4rem 1rem;
-                font-size: 0.78rem;
-                background: #12121c;
-                border: 1px solid #1a1a2e;
-                border-radius: 0.4rem;
-                color: #e8e8f0;
-                cursor: pointer;
-                font-family: Inter, sans-serif;
-                transition:
-                    border-color 0.2s,
-                    background 0.2s;
-            }
-            .blog-page-btn:hover:not(:disabled) {
-                border-color: #00f5ff;
-                background: rgba(0, 245, 255, 0.08);
-            }
-            .blog-page-btn:disabled {
-                opacity: 0.3;
-                cursor: default;
-            }
-            .blog-page-info {
-                font-size: 0.78rem;
-                color: rgba(232, 232, 240, 0.55);
-            }
-        </style>
+        <link rel="stylesheet" href="style.css" />
     </head>
     <body>
         <div class="hero-carousel" id="hc">
@@ -1071,7 +203,7 @@
                 class="hero-slide"
                 style="
                     background-image: url(&quot;images/england.webp&quot;);
-                    background-position: 50% 15.6182%;
+                    background-position: 50% 38%;
                 "
                 data-idx="3"
             >
@@ -1262,6 +394,62 @@
                                 &#127468;&#127463; United Kingdom
                             </option>
                         </select>
+                        <div style="margin-bottom: 1rem">
+                            <label
+                                style="
+                                    font-size: 0.78rem;
+                                    font-weight: 500;
+                                    display: block;
+                                    margin-bottom: 0.25rem;
+                                    color: #1b1319;
+                                "
+                                >Coupon Code</label
+                            >
+                            <div style="display: flex; gap: 0.5rem">
+                                <input
+                                    id="orderCouponInput"
+                                    type="text"
+                                    value="FREE TRIAL"
+                                    style="
+                                        flex: 1;
+                                        padding: 0.55rem 0.8rem;
+                                        font-size: 0.82rem;
+                                        border: 1px solid #e5e3e0;
+                                        border-radius: 0.5rem;
+                                        background: #fff;
+                                        color: #1b1319;
+                                        font-family: Inter, sans-serif;
+                                    "
+                                />
+                                <button
+                                    onclick="applyCoupon()"
+                                    style="
+                                        padding: 0.55rem 1rem;
+                                        font-size: 0.78rem;
+                                        background: #714b67;
+                                        color: #fff;
+                                        border: none;
+                                        border-radius: 0.5rem;
+                                        cursor: pointer;
+                                        font-family: Inter, sans-serif;
+                                        font-weight: 500;
+                                    "
+                                >
+                                    Apply
+                                </button>
+                            </div>
+                            <p
+                                id="orderCouponStatus"
+                                style="
+                                    font-size: 0.7rem;
+                                    color: #28a745;
+                                    margin-top: 0.3rem;
+                                    display: none;
+                                "
+                            >
+                                &#10003; Coupon applied
+                            </p>
+                        </div>
                         <a
                             id="orderBuyBtn"
                             href="/contactus"
@@ -1532,7 +720,12 @@
                                     >$ 19.62</strong
                                 >
                                 <small class="price-period">/ month</small>
-                                <div class="price-save" style="display: none">
+                                <div
+                                    class="price-save"
+                                    style="display: none"
+                                    data-monthly-text="FREE TRIAL coupon = 1 month free"
+                                    data-yearly-text="Save 8%"
+                                >
                                     1 month free
                                 </div>
                             </div>
@@ -1599,7 +792,12 @@
                                     >$ 36.21</strong
                                 >
                                 <small class="price-period">/ month</small>
-                                <div class="price-save" style="display: none">
+                                <div
+                                    class="price-save"
+                                    style="display: none"
+                                    data-monthly-text="FREE TRIAL coupon = 1 month free"
+                                    data-yearly-text="Save 9%"
+                                >
                                     1 month free
                                 </div>
                             </div>
@@ -1661,12 +859,17 @@
                             <div class="price">
                                 <strong
                                     class="price-amount"
-                                    data-monthly="54.54"
-                                    data-yearly="595.00"
-                                    >$ 54.54</strong
+                                    data-monthly="50.00"
+                                    data-yearly="535.00"
+                                    >$ 50.00</strong
                                 >
                                 <small class="price-period">/ month</small>
-                                <div class="price-save" style="display: none">
+                                <div
+                                    class="price-save"
+                                    style="display: none"
+                                    data-monthly-text="FREE TRIAL coupon = 1 month free"
+                                    data-yearly-text="Save 8%"
+                                >
                                     1 month free
                                 </div>
                             </div>
@@ -1679,8 +882,8 @@
                                 onclick="
                                     openOrderWidget(
                                         'Powerhouse',
-                                        54.54,
-                                        595.0,
+                                        50.0,
+                                        535.0,
                                         false,
                                     )
                                 "
@@ -1719,15 +922,17 @@
                         <div class="pcard-body">
                             <h3>Empire</h3>
                             <div class="price">
-                                <strong
-                                    class="price-amount"
-                                    data-monthly="86.67"
-                                    data-yearly="950.00"
+                                <strong class="price-amount"
                                     >&gt;$ 86.67</strong
                                 >
                                 <small class="price-period">/ month</small>
-                                <div class="price-save" style="display: none">
-                                    1 month free
+                                <div
+                                    class="price-save"
+                                    style="display: none"
+                                    data-monthly-text="By case pricing"
+                                    data-yearly-text="By case pricing"
+                                >
+                                    By case pricing
                                 </div>
                             </div>
                             <p class="desc">
@@ -1782,7 +987,6 @@
         <section class="blog-section" id="blog">
             <div class="container">
                 <div class="text-center mb-4">
-                    <div class="hr"></div>
                     <h2>Latest from the Blog</h2>
                 </div>
                 <div class="blog-search-wrap">
@@ -1915,443 +1119,6 @@
             </div>
         </footer>
 
-        <script>
-            var si = 0,
-                slides = document.querySelectorAll(".hero-slide"),
-                dots = document.querySelectorAll(".carousel-dot"),
-                t,
-                dir = 1,
-                autoStop = false,
-                autoInterval = 7000;
-
-            function show(i, direction) {
-                if (direction === undefined) return;
-                var current = slides[si];
-                var next = slides[i];
-                if (direction === 1) {
-                    current.style.transform = "translateY(100%)";
-                    current.style.opacity = "0";
-                    current.style.zIndex = "1";
-                    next.style.transform = "translateY(-100%)";
-                    next.style.opacity = "0";
-                    next.style.zIndex = "1";
-                    requestAnimationFrame(function () {
-                        next.style.transition =
-                            "transform 0.5s ease, opacity 0.5s ease";
-                        next.style.transform = "translateY(0)";
-                        next.style.opacity = "1";
-                        next.style.zIndex = "2";
-                    });
-                } else {
-                    current.style.transform = "translateY(-100%)";
-                    current.style.opacity = "0";
-                    current.style.zIndex = "1";
-                    next.style.transform = "translateY(100%)";
-                    next.style.opacity = "0";
-                    next.style.zIndex = "1";
-                    requestAnimationFrame(function () {
-                        next.style.transition =
-                            "transform 0.5s ease, opacity 0.5s ease";
-                        next.style.transform = "translateY(0)";
-                        next.style.opacity = "1";
-                        next.style.zIndex = "2";
-                    });
-                }
-                for (var j = 0; j < dots.length; j++) {
-                    if (j === i) {
-                        dots[j].classList.add("active");
-                    } else {
-                        dots[j].classList.remove("active");
-                    }
-                }
-                si = i;
-            }
-            function nextSlide() {
-                show((si + 1) % slides.length, 1);
-                resetTimer();
-            }
-            function prevSlide() {
-                show((si - 1 + slides.length) % slides.length, -1);
-                resetTimer();
-            }
-            function goSlide(i) {
-                autoStop = true;
-                show(i, i > si ? 1 : -1);
-                clearInterval(t);
-                t = null;
-            }
-            function resetTimer() {
-                clearInterval(t);
-                t = setInterval(nextSlide, autoInterval);
-            }
-
-            window.addEventListener("load", function () {
-                var o = document.getElementById("spinner");
-                o.classList.add("hidden");
-                setTimeout(function () {
-                    o.style.display = "none";
-                }, 500);
-            });
-            setTimeout(function () {
-                var o = document.getElementById("spinner");
-                o.classList.add("hidden");
-                setTimeout(function () {
-                    o.style.display = "none";
-                }, 500);
-            }, 3000);
-            t = setInterval(nextSlide, autoInterval);
-
-            for (var s = 0; s < slides.length; s++) {
-                slides[s].addEventListener("click", function () {
-                    autoStop = true;
-                    clearInterval(t);
-                    t = null;
-                });
-            }
-
-            setTimeout(function () {
-                var blogSection = document.getElementById("blog");
-                if (blogSection) {
-                    function onBlogScroll() {
-                        var rect = blogSection.getBoundingClientRect();
-                        if (rect.top < window.innerHeight && rect.bottom > 0) {
-                            openTrialWidget();
-                            window.removeEventListener("scroll", onBlogScroll);
-                        }
-                    }
-                    window.addEventListener("scroll", onBlogScroll);
-                }
-            }, 3000);
-
-            document.querySelectorAll(".tab-btn").forEach(function (b) {
-                b.addEventListener("click", function () {
-                    document.querySelectorAll(".tab-btn").forEach(function (x) {
-                        x.classList.remove("active");
-                    });
-                    document
-                        .querySelectorAll(".tab-pane")
-                        .forEach(function (p) {
-                            p.classList.remove("active");
-                        });
-                    this.classList.add("active");
-                    document
-                        .getElementById(this.getAttribute("data-t"))
-                        .classList.add("active");
-                });
-            });
-
-            /* ---- Order Widget ---- */
-            var orderPopupShown = false;
-            function openOrderWidget(
-                plan,
-                monthlyPrice,
-                yearlyPrice,
-                isEmpire,
-            ) {
-                document.getElementById("orderPanelTrial").style.display =
-                    "none";
-                document.getElementById("orderPanelBuy").style.display =
-                    "block";
-                var widget = document.getElementById("orderWidgetOverlay");
-                document.getElementById("orderPlanTitle").textContent = plan;
-                var yearly = yearlyMode;
-                var price = yearly ? yearlyPrice : monthlyPrice;
-                var amountEl = document.getElementById("orderPlanPrice");
-                var prefix = isEmpire ? ">$" : "$";
-                amountEl.textContent = prefix + " " + price.toFixed(2);
-                document.getElementById("orderPlanPeriod").textContent = yearly
-                    ? "/ year"
-                    : "/ month";
-                var couponMsg = document.getElementById("orderCouponMsg");
-                var yearlySave = document.getElementById("orderYearlySave");
-                if (!yearly) {
-                    couponMsg.style.display = "block";
-                    yearlySave.style.display = "none";
-                } else {
-                    couponMsg.style.display = "none";
-                    yearlySave.style.display = "block";
-                    var saved = Math.round(
-                        (1 - yearlyPrice / (monthlyPrice * 12)) * 100,
-                    );
-                    document.getElementById("orderSavePercent").textContent =
-                        saved;
-                }
-                var buyBtn = document.getElementById("orderBuyBtn");
-                var loc = document.getElementById("orderServerLocation").value;
-                buyBtn.href =
-                    "/3/" +
-                    price.toFixed(2) +
-                    "/4/" +
-                    encodeURIComponent(plan) +
-                    "?location=" +
-                    encodeURIComponent(loc);
-                widget.style.display = "flex";
-                orderPopupShown = true;
-            }
-            function openTrialWidget() {
-                document.getElementById("orderPanelBuy").style.display = "none";
-                document.getElementById("orderPanelTrial").style.display =
-                    "block";
-                document.getElementById("orderWidgetOverlay").style.display =
-                    "flex";
-                orderPopupShown = true;
-            }
-            function switchToBuyPanel() {
-                openOrderWidget("On the Rise", 36.21, 395.0, false);
-            }
-            function closeOrderWidget() {
-                document.getElementById("orderWidgetOverlay").style.display =
-                    "none";
-            }
-            document
-                .getElementById("orderServerLocation")
-                .addEventListener("change", function () {
-                    var plan =
-                        document.getElementById("orderPlanTitle").textContent;
-                    var priceText = document
-                        .getElementById("orderPlanPrice")
-                        .textContent.replace(">$", "")
-                        .replace("$", "")
-                        .trim();
-                    var price = parseFloat(priceText);
-                    var loc = this.value;
-                    document.getElementById("orderBuyBtn").href =
-                        "/3/" +
-                        price.toFixed(2) +
-                        "/4/" +
-                        encodeURIComponent(plan) +
-                        "?location=" +
-                        encodeURIComponent(loc);
-                });
-            /* ---- Billing Toggle ---- */
-            var yearlyMode = false;
-            var biSwitch = document.getElementById("billingSwitch");
-            var labels = document.querySelectorAll(".toggle-label");
-            var monthlyLabel = document.querySelector(".toggle-label-monthly");
-            var yearlyLabel = document.querySelector(".toggle-label-yearly");
-
-            function updatePrices(yearly) {
-                var amounts = document.querySelectorAll(".price-amount");
-                for (var k = 0; k < amounts.length; k++) {
-                    var el = amounts[k];
-                    var val = yearly
-                        ? el.getAttribute("data-yearly")
-                        : el.getAttribute("data-monthly");
-                    var prefix =
-                        el.textContent.trim().charAt(0) === ">" ? ">" : "";
-                    el.textContent = prefix + "$ " + parseFloat(val).toFixed(2);
-                }
-                var periods = document.querySelectorAll(".price-period");
-                for (var k = 0; k < periods.length; k++) {
-                    periods[k].textContent = yearly ? "/ year" : "/ month";
-                }
-                var saves = document.querySelectorAll(".price-save");
-                for (var k = 0; k < saves.length; k++) {
-                    saves[k].style.display = yearly ? "block" : "none";
-                }
-            }
-
-            function setBilling(yearly) {
-                yearlyMode = yearly;
-                if (yearly) {
-                    biSwitch.classList.add("yearly");
-                    monthlyLabel.classList.remove("active");
-                    yearlyLabel.classList.add("active");
-                } else {
-                    biSwitch.classList.remove("yearly");
-                    monthlyLabel.classList.add("active");
-                    yearlyLabel.classList.remove("active");
-                }
-                updatePrices(yearly);
-            }
-
-            biSwitch.addEventListener("click", function () {
-                setBilling(!yearlyMode);
-            });
-            monthlyLabel.addEventListener("click", function () {
-                setBilling(false);
-            });
-            yearlyLabel.addEventListener("click", function () {
-                setBilling(true);
-            });
-
-            /* ---- Blog Module ---- */
-            var blogState = {
-                allPosts: [],
-                filteredPosts: [],
-                currentPage: 1,
-                perPage: 6,
-                searchTerm: "",
-            };
-
-            function formatDate(dateStr) {
-                var d = new Date(dateStr + "T00:00:00Z");
-                var months = [
-                    "Jan",
-                    "Feb",
-                    "Mar",
-                    "Apr",
-                    "May",
-                    "Jun",
-                    "Jul",
-                    "Aug",
-                    "Sep",
-                    "Oct",
-                    "Nov",
-                    "Dec",
-                ];
-                return (
-                    months[d.getUTCMonth()] +
-                    " " +
-                    d.getUTCDate() +
-                    ", " +
-                    d.getUTCFullYear()
-                );
-            }
-
-            function badgeClass(area) {
-                var m = {
-                    "speed-run": "speed-run",
-                    guide: "guide",
-                    howto: "howto",
-                    news: "news",
-                };
-                return m[area] || "default";
-            }
-
-            function renderBlog() {
-                var grid = document.getElementById("blogGrid");
-                var search = (blogState.searchTerm || "").toLowerCase();
-                blogState.filteredPosts = blogState.allPosts.filter(
-                    function (p) {
-                        if (!search) return true;
-                        return (
-                            (p.headline + " " + p.teaser)
-                                .toLowerCase()
-                                .indexOf(search) !== -1
-                        );
-                    },
-                );
-                var total = blogState.filteredPosts.length;
-                var totalPages = Math.max(
-                    1,
-                    Math.ceil(total / blogState.perPage),
-                );
-                if (blogState.currentPage > totalPages)
-                    blogState.currentPage = totalPages;
-                var start = (blogState.currentPage - 1) * blogState.perPage;
-                var pagePosts = blogState.filteredPosts.slice(
-                    start,
-                    start + blogState.perPage,
-                );
-
-                var html = "";
-                if (pagePosts.length === 0) {
-                    html =
-                        '<div class="blog-empty">No posts match your search.</div>';
-                } else {
-                    for (var i = 0; i < pagePosts.length; i++) {
-                        var p = pagePosts[i];
-                        var bc = badgeClass(p.area);
-                        var agentHtml = "";
-                        if (p.agent)
-                            agentHtml =
-                                '<span class="blog-agent">' +
-                                p.agent +
-                                "</span>";
-                        html +=
-                            '<div class="blog-card">' +
-                            '<div class="blog-card-top">' +
-                            '<span class="blog-badge blog-badge-' +
-                            bc +
-                            '">' +
-                            p.area +
-                            "</span>" +
-                            agentHtml +
-                            "</div>" +
-                            '<div class="blog-date">' +
-                            formatDate(p.date) +
-                            "</div>" +
-                            '<h3><a href="' +
-                            p.link +
-                            '">' +
-                            p.headline +
-                            "</a></h3>" +
-                            '<p class="blog-teaser">' +
-                            p.teaser +
-                            "</p>" +
-                            '<a href="' +
-                            p.link +
-                            '" class="blog-readmore">Read more &rarr;</a>' +
-                            "</div>";
-                    }
-                }
-                grid.innerHTML = html;
-
-                var pag = document.getElementById("blogPagination");
-                var pagHtml = "";
-                if (totalPages > 1) {
-                    pagHtml +=
-                        '<button class="blog-page-btn" onclick="blogGo(1)"' +
-                        (blogState.currentPage <= 1 ? ' disabled"' : '"') +
-                        ">&laquo;</button>";
-                    pagHtml +=
-                        '<button class="blog-page-btn" onclick="blogGo(' +
-                        (blogState.currentPage - 1) +
-                        ')"' +
-                        (blogState.currentPage <= 1 ? ' disabled"' : '"') +
-                        ">&lsaquo; Prev</button>";
-                    pagHtml +=
-                        '<span class="blog-page-info">Page ' +
-                        blogState.currentPage +
-                        " of " +
-                        totalPages +
-                        "</span>";
-                    pagHtml +=
-                        '<button class="blog-page-btn" onclick="blogGo(' +
-                        (blogState.currentPage + 1) +
-                        ')"' +
-                        (blogState.currentPage >= totalPages
-                            ? ' disabled"'
-                            : '"') +
-                        ">Next &rsaquo;</button>";
-                    pagHtml +=
-                        '<button class="blog-page-btn" onclick="blogGo(' +
-                        totalPages +
-                        ')"' +
-                        (blogState.currentPage >= totalPages
-                            ? ' disabled"'
-                            : '"') +
-                        ">&raquo;</button>";
-                }
-                pag.innerHTML = pagHtml;
-            }
-
-            function blogGo(page) {
-                blogState.currentPage = page;
-                renderBlog();
-            }
-
-            fetch("blog/index.json?_=" + Date.now())
-                .then(function (r) {
-                    return r.json();
-                })
-                .then(function (data) {
-                    blogState.allPosts = data.posts;
-                    renderBlog();
-                })
-                .catch(function () {
-                    document.getElementById("blogGrid").innerHTML =
-                        '<div class="blog-empty">Could not load blog posts.</div>';
-                });
-
-            document
-                .getElementById("blogSearch")
-                .addEventListener("input", function () {
-                    blogState.searchTerm = this.value;
-                    blogState.currentPage = 1;
-                    renderBlog();
-                });
-        </script>
+        <script src="script.js"></script>
     </body>
 </html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..b63feed
--- /dev/null
+++ b/script.js
@@ -0,0 +1,460 @@
+var si = 0,
+                slides = document.querySelectorAll(".hero-slide"),
+                dots = document.querySelectorAll(".carousel-dot"),
+                t,
+                dir = 1,
+                autoStop = false,
+                autoInterval = 7000;
+
+            function show(i, direction) {
+                if (direction === undefined) return;
+                var current = slides[si];
+                var next = slides[i];
+                if (direction === 1) {
+                    current.style.transform = "translateY(100%)";
+                    current.style.opacity = "0";
+                    current.style.zIndex = "1";
+                    next.style.transform = "translateY(-100%)";
+                    next.style.opacity = "0";
+                    next.style.zIndex = "1";
+                    requestAnimationFrame(function () {
+                        next.style.transition =
+                            "transform 0.5s ease, opacity 0.5s ease";
+                        next.style.transform = "translateY(0)";
+                        next.style.opacity = "1";
+                        next.style.zIndex = "2";
+                    });
+                } else {
+                    current.style.transform = "translateY(-100%)";
+                    current.style.opacity = "0";
+                    current.style.zIndex = "1";
+                    next.style.transform = "translateY(100%)";
+                    next.style.opacity = "0";
+                    next.style.zIndex = "1";
+                    requestAnimationFrame(function () {
+                        next.style.transition =
+                            "transform 0.5s ease, opacity 0.5s ease";
+                        next.style.transform = "translateY(0)";
+                        next.style.opacity = "1";
+                        next.style.zIndex = "2";
+                    });
+                }
+                for (var j = 0; j < dots.length; j++) {
+                    if (j === i) {
+                        dots[j].classList.add("active");
+                    } else {
+                        dots[j].classList.remove("active");
+                    }
+                }
+                si = i;
+            }
+            function nextSlide() {
+                show((si + 1) % slides.length, 1);
+                resetTimer();
+            }
+            function prevSlide() {
+                show((si - 1 + slides.length) % slides.length, -1);
+                resetTimer();
+            }
+            function goSlide(i) {
+                autoStop = true;
+                show(i, i > si ? 1 : -1);
+                clearInterval(t);
+                t = null;
+            }
+            function resetTimer() {
+                clearInterval(t);
+                t = setInterval(nextSlide, autoInterval);
+            }
+
+            window.addEventListener("load", function () {
+                var o = document.getElementById("spinner");
+                o.classList.add("hidden");
+                setTimeout(function () {
+                    o.style.display = "none";
+                }, 500);
+            });
+            setTimeout(function () {
+                var o = document.getElementById("spinner");
+                o.classList.add("hidden");
+                setTimeout(function () {
+                    o.style.display = "none";
+                }, 500);
+            }, 3000);
+            t = setInterval(nextSlide, autoInterval);
+
+            for (var s = 0; s < slides.length; s++) {
+                slides[s].addEventListener("click", function () {
+                    autoStop = true;
+                    clearInterval(t);
+                    t = null;
+                });
+            }
+
+            setTimeout(function () {
+                var blogSection = document.getElementById("blog");
+                if (blogSection) {
+                    function onBlogScroll() {
+                        var rect = blogSection.getBoundingClientRect();
+                        if (rect.top < window.innerHeight && rect.bottom > 0) {
+                            openTrialWidget();
+                            window.removeEventListener("scroll", onBlogScroll);
+                        }
+                    }
+                    window.addEventListener("scroll", onBlogScroll);
+                }
+            }, 3000);
+
+            document.querySelectorAll(".tab-btn").forEach(function (b) {
+                b.addEventListener("click", function () {
+                    document.querySelectorAll(".tab-btn").forEach(function (x) {
+                        x.classList.remove("active");
+                    });
+                    document
+                        .querySelectorAll(".tab-pane")
+                        .forEach(function (p) {
+                            p.classList.remove("active");
+                        });
+                    this.classList.add("active");
+                    document
+                        .getElementById(this.getAttribute("data-t"))
+                        .classList.add("active");
+                });
+            });
+
+            /* ---- Order Widget ---- */
+            var orderPopupShown = false;
+            function openOrderWidget(
+                plan,
+                monthlyPrice,
+                yearlyPrice,
+                isEmpire,
+            ) {
+                document.getElementById("orderPanelTrial").style.display =
+                    "none";
+                document.getElementById("orderPanelBuy").style.display =
+                    "block";
+                var widget = document.getElementById("orderWidgetOverlay");
+                document.getElementById("orderPlanTitle").textContent = plan;
+                var yearly = yearlyMode;
+                var price = yearly ? yearlyPrice : monthlyPrice;
+                var amountEl = document.getElementById("orderPlanPrice");
+                var prefix = isEmpire ? ">$" : "$";
+                amountEl.textContent = prefix + " " + price.toFixed(2);
+                document.getElementById("orderPlanPeriod").textContent = yearly
+                    ? "/ year"
+                    : "/ month";
+                var couponMsg = document.getElementById("orderCouponMsg");
+                var yearlySave = document.getElementById("orderYearlySave");
+                if (!yearly) {
+                    couponMsg.style.display = "block";
+                    yearlySave.style.display = "none";
+                } else {
+                    couponMsg.style.display = "none";
+                    yearlySave.style.display = "block";
+                    var saved = Math.round(
+                        (1 - yearlyPrice / (monthlyPrice * 12)) * 100,
+                    );
+                    document.getElementById("orderSavePercent").textContent =
+                        saved;
+                }
+                var buyBtn = document.getElementById("orderBuyBtn");
+                var loc = document.getElementById("orderServerLocation").value;
+                buyBtn.href =
+                    "/3/" +
+                    price.toFixed(2) +
+                    "/4/" +
+                    encodeURIComponent(plan) +
+                    "?location=" +
+                    encodeURIComponent(loc);
+                widget.style.display = "flex";
+                orderPopupShown = true;
+            }
+            function openTrialWidget() {
+                document.getElementById("orderPanelBuy").style.display = "none";
+                document.getElementById("orderPanelTrial").style.display =
+                    "block";
+                document.getElementById("orderWidgetOverlay").style.display =
+                    "flex";
+                orderPopupShown = true;
+            }
+            function switchToBuyPanel() {
+                openOrderWidget("On the Rise", 36.21, 395.0, false);
+            }
+            function closeOrderWidget() {
+                document.getElementById("orderWidgetOverlay").style.display =
+                    "none";
+            }
+            document
+                .getElementById("orderServerLocation")
+                .addEventListener("change", function () {
+                    var plan =
+                        document.getElementById("orderPlanTitle").textContent;
+                    var priceText = document
+                        .getElementById("orderPlanPrice")
+                        .textContent.replace(">$", "")
+                        .replace("$", "")
+                        .trim();
+                    var price = parseFloat(priceText);
+                    var loc = this.value;
+                    document.getElementById("orderBuyBtn").href =
+                        "/3/" +
+                        price.toFixed(2) +
+                        "/4/" +
+                        encodeURIComponent(plan) +
+                        "?location=" +
+                        encodeURIComponent(loc);
+                });
+            function applyCoupon() {
+                var input = document.getElementById("orderCouponInput");
+                var status = document.getElementById("orderCouponStatus");
+                var code = input.value.trim();
+                if (code.toLowerCase() === "free trial") {
+                    status.textContent =
+                        "\u2713 Coupon FREE TRIAL applied - 1 month free";
+                    status.style.color = "#28a745";
+                } else {
+                    status.textContent = "Invalid coupon code";
+                    status.style.color = "#dc3545";
+                }
+                status.style.display = "block";
+            }
+            /* ---- Billing Toggle ---- */
+            var yearlyMode = false;
+            var biSwitch = document.getElementById("billingSwitch");
+            var labels = document.querySelectorAll(".toggle-label");
+            var monthlyLabel = document.querySelector(".toggle-label-monthly");
+            var yearlyLabel = document.querySelector(".toggle-label-yearly");
+
+            function updatePrices(yearly) {
+                var amounts = document.querySelectorAll(".price-amount");
+                for (var k = 0; k < amounts.length; k++) {
+                    var el = amounts[k];
+                    var val = yearly
+                        ? el.getAttribute("data-yearly")
+                        : el.getAttribute("data-monthly");
+                    var prefix =
+                        el.textContent.trim().charAt(0) === ">" ? ">" : "";
+                    el.textContent = prefix + "$ " + parseFloat(val).toFixed(2);
+                }
+                var periods = document.querySelectorAll(".price-period");
+                for (var k = 0; k < periods.length; k++) {
+                    periods[k].textContent = yearly ? "/ year" : "/ month";
+                }
+                var saves = document.querySelectorAll(".price-save");
+                for (var k = 0; k < saves.length; k++) {
+                    var s = saves[k];
+                    if (yearly) {
+                        s.style.display = "block";
+                        s.textContent = s.getAttribute("data-yearly-text");
+                    } else {
+                        s.style.display = "block";
+                        s.textContent = s.getAttribute("data-monthly-text");
+                    }
+                }
+            }
+
+            function setBilling(yearly) {
+                yearlyMode = yearly;
+                if (yearly) {
+                    biSwitch.classList.add("yearly");
+                    monthlyLabel.classList.remove("active");
+                    yearlyLabel.classList.add("active");
+                } else {
+                    biSwitch.classList.remove("yearly");
+                    monthlyLabel.classList.add("active");
+                    yearlyLabel.classList.remove("active");
+                }
+                updatePrices(yearly);
+            }
+
+            biSwitch.addEventListener("click", function () {
+                setBilling(!yearlyMode);
+            });
+            monthlyLabel.addEventListener("click", function () {
+                setBilling(false);
+            });
+            yearlyLabel.addEventListener("click", function () {
+                setBilling(true);
+            });
+
+            /* init billing display to monthly */
+            updatePrices(false);
+
+            /* ---- Blog Module ---- */
+            var blogState = {
+                allPosts: [],
+                filteredPosts: [],
+                currentPage: 1,
+                perPage: 6,
+                searchTerm: "",
+            };
+
+            function formatDate(dateStr) {
+                var d = new Date(dateStr + "T00:00:00Z");
+                var months = [
+                    "Jan",
+                    "Feb",
+                    "Mar",
+                    "Apr",
+                    "May",
+                    "Jun",
+                    "Jul",
+                    "Aug",
+                    "Sep",
+                    "Oct",
+                    "Nov",
+                    "Dec",
+                ];
+                return (
+                    months[d.getUTCMonth()] +
+                    " " +
+                    d.getUTCDate() +
+                    ", " +
+                    d.getUTCFullYear()
+                );
+            }
+
+            function badgeClass(area) {
+                var m = {
+                    "speed-run": "speed-run",
+                    guide: "guide",
+                    howto: "howto",
+                    news: "news",
+                };
+                return m[area] || "default";
+            }
+
+            function renderBlog() {
+                var grid = document.getElementById("blogGrid");
+                var search = (blogState.searchTerm || "").toLowerCase();
+                blogState.filteredPosts = blogState.allPosts.filter(
+                    function (p) {
+                        if (!search) return true;
+                        return (
+                            (p.headline + " " + p.teaser)
+                                .toLowerCase()
+                                .indexOf(search) !== -1
+                        );
+                    },
+                );
+                var total = blogState.filteredPosts.length;
+                var totalPages = Math.max(
+                    1,
+                    Math.ceil(total / blogState.perPage),
+                );
+                if (blogState.currentPage > totalPages)
+                    blogState.currentPage = totalPages;
+                var start = (blogState.currentPage - 1) * blogState.perPage;
+                var pagePosts = blogState.filteredPosts.slice(
+                    start,
+                    start + blogState.perPage,
+                );
+
+                var html = "";
+                if (pagePosts.length === 0) {
+                    html =
+                        '<div class="blog-empty">No posts match your search.</div>';
+                } else {
+                    for (var i = 0; i < pagePosts.length; i++) {
+                        var p = pagePosts[i];
+                        var bc = badgeClass(p.area);
+                        var agentHtml = "";
+                        if (p.agent)
+                            agentHtml =
+                                '<span class="blog-agent">' +
+                                p.agent +
+                                "</span>";
+                        html +=
+                            '<div class="blog-card">' +
+                            '<div class="blog-card-top">' +
+                            '<span class="blog-badge blog-badge-' +
+                            bc +
+                            '">' +
+                            p.area +
+                            "</span>" +
+                            agentHtml +
+                            "</div>" +
+                            '<div class="blog-date">' +
+                            formatDate(p.date) +
+                            "</div>" +
+                            '<h3><a href="' +
+                            p.link +
+                            '">' +
+                            p.headline +
+                            "</a></h3>" +
+                            '<p class="blog-teaser">' +
+                            p.teaser +
+                            "</p>" +
+                            '<a href="' +
+                            p.link +
+                            '" class="blog-readmore">Read more &rarr;</a>' +
+                            "</div>";
+                    }
+                }
+                grid.innerHTML = html;
+
+                var pag = document.getElementById("blogPagination");
+                var pagHtml = "";
+                if (totalPages > 1) {
+                    pagHtml +=
+                        '<button class="blog-page-btn" onclick="blogGo(1)"' +
+                        (blogState.currentPage <= 1 ? ' disabled"' : '"') +
+                        ">&laquo;</button>";
+                    pagHtml +=
+                        '<button class="blog-page-btn" onclick="blogGo(' +
+                        (blogState.currentPage - 1) +
+                        ')"' +
+                        (blogState.currentPage <= 1 ? ' disabled"' : '"') +
+                        ">&lsaquo; Prev</button>";
+                    pagHtml +=
+                        '<span class="blog-page-info">Page ' +
+                        blogState.currentPage +
+                        " of " +
+                        totalPages +
+                        "</span>";
+                    pagHtml +=
+                        '<button class="blog-page-btn" onclick="blogGo(' +
+                        (blogState.currentPage + 1) +
+                        ')"' +
+                        (blogState.currentPage >= totalPages
+                            ? ' disabled"'
+                            : '"') +
+                        ">Next &rsaquo;</button>";
+                    pagHtml +=
+                        '<button class="blog-page-btn" onclick="blogGo(' +
+                        totalPages +
+                        ')"' +
+                        (blogState.currentPage >= totalPages
+                            ? ' disabled"'
+                            : '"') +
+                        ">&raquo;</button>";
+                }
+                pag.innerHTML = pagHtml;
+            }
+
+            function blogGo(page) {
+                blogState.currentPage = page;
+                renderBlog();
+            }
+
+            fetch("blog/index.json?_=" + Date.now())
+                .then(function (r) {
+                    return r.json();
+                })
+                .then(function (data) {
+                    blogState.allPosts = data.posts;
+                    renderBlog();
+                })
+                .catch(function () {
+                    document.getElementById("blogGrid").innerHTML =
+                        '<div class="blog-empty">Could not load blog posts.</div>';
+                });
+
+            document
+                .getElementById("blogSearch")
+                .addEventListener("input", function () {
+                    blogState.searchTerm = this.value;
+                    blogState.currentPage = 1;
+                    renderBlog();
+                });
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..38198e4
--- /dev/null
+++ b/style.css
@@ -0,0 +1,867 @@
+* {
+                box-sizing: border-box;
+            }
+            body {
+                margin: 0;
+                font-family: Inter, sans-serif;
+                font-size: 1rem;
+                line-height: 1.6;
+                color: #212529;
+                background: #fff;
+            }
+            h1,
+            h2,
+            h3 {
+                font-family:
+                    Inter Tight,
+                    sans-serif;
+                font-weight: 600;
+                line-height: 1.25;
+                margin-top: 0;
+                margin-bottom: 0.5rem;
+            }
+            h1 {
+                font-size: clamp(1.8rem, 3.2vw, 2.8rem);
+            }
+            h2 {
+                font-size: clamp(1.4rem, 2.56vw, 2rem);
+            }
+            h3 {
+                font-size: clamp(1.1rem, 2vw, 1.4rem);
+            }
+            p {
+                margin-top: 0;
+                margin-bottom: 1rem;
+            }
+            a {
+                color: #65435c;
+                text-decoration: none;
+            }
+            img {
+                max-width: 100%;
+                height: auto;
+                vertical-align: middle;
+            }
+            :root {
+                --primary: #714b67;
+                --secondary: #f0cda8;
+                --dark: #1b1319;
+                --light: #f6f5f4;
+                --border: #e5e3e0;
+                --radius: 0.6rem;
+                --radius-lg: 1rem;
+            }
+            .container {
+                width: 80%;
+                padding: 0 20px;
+                margin: 0 auto;
+                max-width: 1300px;
+            }
+            @media (max-width: 768px) {
+                .container {
+                    max-width: 100%;
+                }
+            }
+            .row {
+                display: flex;
+                flex-wrap: wrap;
+                margin: 0 -15px;
+            }
+            .col-lg-5 {
+                flex: 0 0 41.666%;
+                max-width: 41.666%;
+                padding: 0 15px;
+            }
+            .col-lg-6 {
+                flex: 0 0 50%;
+                max-width: 50%;
+                padding: 0 15px;
+            }
+            .col-lg-10 {
+                flex: 0 0 83.333%;
+                max-width: 83.333%;
+                padding: 0 15px;
+            }
+            .offset-lg-1 {
+                margin-left: 8.333%;
+            }
+            .offset-lg-6 {
+                margin-left: 50%;
+            }
+            @media (max-width: 992px) {
+                .col-lg-5,
+                .col-lg-6,
+                .col-lg-10 {
+                    flex: 0 0 100%;
+                    max-width: 100%;
+                }
+                .offset-lg-1,
+                .offset-lg-6 {
+                    margin-left: 0;
+                }
+            }
+            .text-center {
+                text-align: center;
+            }
+            .d-none {
+                display: none !important;
+            }
+            .d-flex {
+                display: flex;
+            }
+            .align-items-center {
+                align-items: center;
+            }
+            .mb-4 {
+                margin-bottom: 1.5rem;
+            }
+            .mt-3 {
+                margin-top: 1rem;
+            }
+            .btn {
+                display: inline-block;
+                padding: 0.6rem 1.5rem;
+                font-size: 0.9rem;
+                font-weight: 500;
+                border: 1px solid transparent;
+                border-radius: 0.5rem;
+                cursor: pointer;
+                text-decoration: none;
+                transition: all 0.2s;
+            }
+            .btn-primary {
+                color: #fff;
+                background: var(--primary);
+                border-color: var(--primary);
+            }
+            .btn-primary:hover {
+                background: #5e3f55;
+                border-color: #5e3f55;
+                transform: translateY(-1px);
+            }
+            .btn-outline-primary {
+                color: #65435c;
+                border-color: #65435c;
+                background: transparent;
+            }
+            .btn-outline-primary:hover {
+                color: #fff;
+                background: #65435c;
+                border-color: #65435c;
+            }
+            .btn-lg {
+                padding: 0.75rem 2rem;
+                font-size: 1rem;
+                border-radius: 2rem;
+            }
+            .hr {
+                width: 3.5rem;
+                height: 3px;
+                background: linear-gradient(
+                    90deg,
+                    var(--primary),
+                    var(--secondary)
+                );
+                border-radius: 2px;
+                margin: 0 auto 1rem;
+            }
+            .hero-carousel {
+                position: relative;
+                overflow: hidden;
+                min-height: 400px;
+            }
+            .hero-slide {
+                position: absolute;
+                inset: 0;
+                min-height: 400px;
+                display: flex;
+                align-items: center;
+                background-size: cover;
+                background-position: center;
+                transform: translateY(-100%);
+                opacity: 0;
+                transition:
+                    transform 0.5s ease,
+                    opacity 0.5s ease;
+                z-index: 1;
+            }
+            .hero-slide.active {
+                transform: translateY(0);
+                opacity: 1;
+                z-index: 2;
+            }
+            .hero-slide.prev {
+                transform: translateY(100%);
+                opacity: 0;
+                z-index: 1;
+            }
+            .hero-slide::before {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background: none;
+            }
+            .hero-box {
+                position: relative;
+                z-index: 2;
+                padding: 1.5rem;
+                border-radius: var(--radius);
+                background: rgba(27, 19, 25, 0.75);
+                color: #fff;
+                border: 1px solid rgba(255, 255, 255, 0.08);
+            }
+            .hero-box h2 {
+                color: #fff;
+                font-size: clamp(1rem, 2.2vw, 1.4rem);
+                margin-bottom: 0.3rem;
+            }
+            .hero-box p {
+                color: rgba(255, 255, 255, 0.9);
+                font-size: 0.9rem;
+                margin-bottom: 0.5rem;
+            }
+            .carousel-dots {
+                position: absolute;
+                bottom: 1rem;
+                left: 0;
+                right: 0;
+                display: flex;
+                justify-content: center;
+                gap: 0.5rem;
+                z-index: 3;
+            }
+            .carousel-dot {
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                border: none;
+                background: rgba(255, 255, 255, 0.35);
+                cursor: pointer;
+                transition: all 0.3s;
+            }
+            .carousel-dot.active {
+                background: rgba(255, 255, 255, 0.8);
+                transform: scale(1.2);
+            }
+            .arrow {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                z-index: 3;
+                background: rgba(27, 19, 25, 0.5);
+                color: #fff;
+                border: none;
+                width: 2.5rem;
+                height: 2.5rem;
+                border-radius: 50%;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: all 0.2s;
+            }
+            .arrow:hover {
+                background: rgba(27, 19, 25, 0.8);
+                transform: translateY(-50%) scale(1.05);
+            }
+            .arrow.left {
+                left: 1rem;
+            }
+            .arrow.right {
+                right: 1rem;
+            }
+            @media (max-width: 768px) {
+                .arrow {
+                    display: none;
+                }
+            }
+            .stitle {
+                text-align: center;
+                padding: 2rem 0;
+            }
+            .stitle h1 {
+                font-size: clamp(1.12rem, 2.4vw, 1.6rem);
+                max-width: 720px;
+                margin: 0 auto;
+                color: var(--dark);
+            }
+            .tabs-section {
+                padding: 2rem 0;
+            }
+            .tabs-wrap {
+                display: flex;
+                gap: 2rem;
+            }
+            .tabs-nav {
+                flex: 0 0 220px;
+                max-width: 220px;
+                display: flex;
+                flex-direction: column;
+                gap: 0.25rem;
+            }
+            .tabs-content {
+                flex: 1;
+                min-height: 200px;
+                font-size: 1rem;
+                line-height: 1.7;
+            }
+            .tab-btn {
+                display: block;
+                padding: 0.6rem 1rem;
+                color: #212529;
+                border-radius: var(--radius);
+                border: none;
+                background: none;
+                width: 100%;
+                text-align: left;
+                font-size: 0.9rem;
+                font-weight: 500;
+                cursor: pointer;
+                transition: all 0.2s;
+            }
+            .tab-btn:hover {
+                background: var(--light);
+            }
+            .tab-btn.active {
+                background: linear-gradient(
+                    135deg,
+                    rgba(113, 75, 103, 0.08),
+                    rgba(113, 75, 103, 0.03)
+                );
+                color: var(--primary);
+                font-weight: 600;
+                border-left: 3px solid var(--primary);
+            }
+            .tab-btn small {
+                display: block;
+                color: rgba(33, 37, 41, 0.55);
+                font-size: 0.72rem;
+                margin-top: 0.1rem;
+            }
+            .tab-btn.active small {
+                color: rgba(113, 75, 103, 0.6);
+            }
+            .tab-pane {
+                display: none;
+            }
+            .tab-pane.active {
+                display: block;
+            }
+            @media (max-width: 992px) {
+                .tabs-wrap {
+                    flex-direction: column;
+                }
+                .tabs-nav {
+                    flex: 0 0 100%;
+                    max-width: 100%;
+                    flex-direction: row;
+                    overflow-x: auto;
+                    padding-bottom: 0.5rem;
+                    border-bottom: 1px solid var(--border);
+                }
+                .tab-btn {
+                    white-space: nowrap;
+                    width: auto;
+                    border-left: none;
+                }
+                .tab-btn.active {
+                    border-left: none;
+                    border-bottom: 3px solid var(--primary);
+                }
+                .tab-btn small {
+                    display: none;
+                }
+                .tabs-content {
+                    flex: 0 0 100%;
+                    max-width: 100%;
+                }
+            }
+            .psection {
+                padding: 2rem 0;
+                background: var(--light);
+            }
+            .pgrid {
+                display: grid;
+                grid-template-columns: repeat(4, 1fr);
+                gap: 1rem;
+            }
+            .pcard {
+                background: #fff;
+                border: 1px solid var(--border);
+                border-radius: var(--radius-lg);
+                overflow: hidden;
+                display: flex;
+                flex-direction: column;
+                transition: all 0.3s;
+                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+            }
+            .pcard:hover {
+                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+                transform: translateY(-3px);
+            }
+            .pcard.featured {
+                border: 2px solid var(--primary);
+                position: relative;
+            }
+            .pcard.featured::before {
+                content: "Most Popular";
+                position: absolute;
+                top: 0.75rem;
+                right: 0.75rem;
+                background: var(--primary);
+                color: #fff;
+                padding: 0.2rem 0.6rem;
+                border-radius: 2rem;
+                font-size: 0.6rem;
+                font-weight: 600;
+            }
+            .pcard-body {
+                padding: 1.25rem;
+                flex: 1;
+            }
+            .pcard-body h3 {
+                font-size: 1.1rem;
+                font-weight: 700;
+            }
+            .pcard .price {
+                margin: 0.5rem 0;
+            }
+            .pcard .price strong {
+                font-size: clamp(1.28rem, 2vw, 1.92rem);
+                color: var(--dark);
+            }
+            .pcard .price small {
+                color: rgba(33, 37, 41, 0.55);
+                font-size: 0.82rem;
+            }
+            .pcard .desc {
+                font-size: 0.82rem;
+                color: rgba(33, 37, 41, 0.6);
+                min-height: 2rem;
+                font-style: italic;
+            }
+            .pcard .btn {
+                margin-bottom: 0.75rem;
+                width: 100%;
+            }
+            .pcard ul {
+                list-style: none;
+                padding: 0;
+                margin: 0;
+            }
+            .pcard li {
+                padding: 0.4rem 0;
+                font-size: 0.82rem;
+                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+                display: flex;
+                align-items: center;
+                gap: 0.4rem;
+            }
+            .pcard li:last-child {
+                border-bottom: 0;
+            }
+            .pcard-foot {
+                padding: 0.6rem 1.25rem;
+                text-align: center;
+                border-top: 1px solid var(--border);
+                font-size: 0.78rem;
+                color: rgba(33, 37, 41, 0.55);
+            }
+            @media (max-width: 992px) {
+                .pgrid {
+                    grid-template-columns: repeat(2, 1fr);
+                }
+            }
+            @media (max-width: 576px) {
+                .pgrid {
+                    grid-template-columns: 1fr;
+                }
+            }
+            .trial {
+                padding: 3rem 0;
+                background: linear-gradient(135deg, #1b1319, #2a1d27);
+                color: #fff;
+            }
+            .trial h2 {
+                color: #fff;
+            }
+            .trial p {
+                color: rgba(255, 255, 255, 0.8);
+            }
+            .abanner {
+                padding: 2rem 0;
+                text-align: center;
+                background: #fff;
+            }
+            .abanner h2 {
+                font-size: clamp(1.12rem, 2.4vw, 1.6rem) !important;
+                max-width: 700px;
+                margin: 0 auto 0.5rem;
+            }
+            .footer {
+                background: var(--dark);
+                color: rgba(255, 255, 255, 0.85);
+                padding-top: 3rem;
+            }
+            .fgrid {
+                display: grid;
+                grid-template-columns: 1.5fr 3fr 3.5fr;
+                gap: 2rem;
+                padding-bottom: 2rem;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+            }
+            .footer h5 {
+                color: #fff;
+                margin-bottom: 0.8rem;
+                font-weight: 600;
+            }
+            .footer ul {
+                list-style: none;
+                padding: 0;
+            }
+            .footer li {
+                margin-bottom: 0.3rem;
+            }
+            .footer a {
+                color: rgba(255, 255, 255, 0.65);
+                transition: color 0.2s;
+            }
+            .footer a:hover {
+                color: #fff;
+                text-decoration: none;
+            }
+            .footer p {
+                color: rgba(255, 255, 255, 0.7);
+                font-size: 0.85rem;
+                line-height: 1.7;
+            }
+            .footer strong {
+                color: #fff;
+            }
+            .footer .social a {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                width: 2.5rem;
+                height: 2.5rem;
+                border-radius: 50%;
+                background: rgba(255, 255, 255, 0.08);
+                color: rgba(255, 255, 255, 0.7);
+                margin-right: 0.3rem;
+                transition: all 0.2s;
+            }
+            .footer .social a:hover {
+                background: var(--primary);
+                color: #fff;
+            }
+            .fform label {
+                font-weight: 500;
+                margin-bottom: 0.25rem;
+                display: block;
+                color: #fff;
+            }
+            .fform input {
+                display: block;
+                width: 100%;
+                padding: 0.5rem 0.8rem;
+                font-size: 0.85rem;
+                background: rgba(255, 255, 255, 0.08);
+                border: 1px solid rgba(255, 255, 255, 0.12);
+                border-radius: 0.5rem;
+                color: #fff;
+                margin-bottom: 0.75rem;
+            }
+            .fform input:focus {
+                outline: none;
+                border-color: var(--primary);
+            }
+            .fform input::placeholder {
+                color: rgba(255, 255, 255, 0.35);
+            }
+            .fcopy {
+                padding: 1rem 0;
+                text-align: center;
+                font-size: 0.82rem;
+                color: rgba(255, 255, 255, 0.5);
+            }
+            @media (max-width: 992px) {
+                .fgrid {
+                    grid-template-columns: 1fr;
+                }
+            }
+            .spinner-overlay {
+                position: absolute;
+                inset: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: var(--dark);
+                z-index: 5;
+                transition: opacity 0.5s;
+            }
+            .spinner-overlay.hidden {
+                opacity: 0;
+                pointer-events: none;
+            }
+            .spinner {
+                width: 2rem;
+                height: 2rem;
+                border: 3px solid rgba(255, 255, 255, 0.15);
+                border-top-color: #fff;
+                border-radius: 50%;
+                animation: spin 0.8s linear infinite;
+            }
+            @keyframes spin {
+                to {
+                    transform: rotate(360deg);
+                }
+            }
+
+            /* ---- Billing Toggle ---- */
+            .billing-toggle-wrap {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 0.75rem;
+                margin-bottom: 1.5rem;
+            }
+            .toggle-label {
+                font-size: 0.82rem;
+                font-weight: 500;
+                color: rgba(33, 37, 41, 0.6);
+                cursor: pointer;
+                transition: color 0.2s;
+                user-select: none;
+            }
+            .toggle-label.active {
+                color: var(--dark);
+                font-weight: 600;
+            }
+            .toggle-label small {
+                display: block;
+                font-size: 0.62rem;
+                font-weight: 400;
+                color: #28a745;
+                margin-top: 0.1rem;
+            }
+            .toggle-switch {
+                width: 48px;
+                height: 26px;
+                background: var(--border);
+                border-radius: 13px;
+                cursor: pointer;
+                position: relative;
+                transition: background 0.25s;
+                flex-shrink: 0;
+            }
+            .toggle-switch.yearly {
+                background: var(--primary);
+            }
+            .toggle-switch .thumb {
+                position: absolute;
+                top: 3px;
+                left: 3px;
+                width: 20px;
+                height: 20px;
+                background: #fff;
+                border-radius: 50%;
+                transition: left 0.25s;
+                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+            }
+            .toggle-switch.yearly .thumb {
+                left: 25px;
+            }
+            .price-save {
+                font-size: 0.6rem;
+                font-weight: 700;
+                color: #28a745;
+                margin-top: 0.15rem;
+            }
+            .price-period {
+                color: rgba(33, 37, 41, 0.55);
+                font-size: 0.68rem;
+            }
+            /* ---- Blog Section ---- */
+            .blog-section {
+                padding: 3rem 0;
+                background: #08080c;
+                color: #e8e8f0;
+            }
+            .blog-section h2 {
+                color: #e8e8f0;
+            }
+            .blog-search-wrap {
+                max-width: 500px;
+                margin: 0 auto 2rem;
+            }
+            .blog-search {
+                width: 100%;
+                padding: 0.75rem 1rem;
+                font-size: 0.85rem;
+                background: #1a1a2e;
+                border: 1px solid #2a2a4e;
+                border-radius: 0.5rem;
+                color: #e8e8f0;
+                font-family: Inter, sans-serif;
+                transition: border-color 0.2s;
+                outline: none;
+            }
+            .blog-search:focus {
+                border-color: #00f5ff;
+                box-shadow: 0 0 0 2px rgba(0, 245, 255, 0.15);
+            }
+            .blog-search::placeholder {
+                color: rgba(232, 232, 240, 0.35);
+            }
+            .blog-grid {
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                gap: 1.25rem;
+                margin-bottom: 2rem;
+            }
+            @media (max-width: 992px) {
+                .blog-grid {
+                    grid-template-columns: repeat(2, 1fr);
+                }
+            }
+            @media (max-width: 576px) {
+                .blog-grid {
+                    grid-template-columns: 1fr;
+                }
+            }
+            .blog-card {
+                background: #12121c;
+                border: 1px solid #1a1a2e;
+                border-radius: 0.6rem;
+                padding: 1.25rem;
+                display: flex;
+                flex-direction: column;
+                transition:
+                    transform 0.2s,
+                    border-color 0.2s,
+                    box-shadow 0.2s;
+            }
+            .blog-card:hover {
+                transform: translateY(-2px);
+                border-color: #00f5ff;
+                box-shadow: 0 4px 20px rgba(0, 245, 255, 0.08);
+            }
+            .blog-card-top {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+                margin-bottom: 0.75rem;
+                flex-wrap: wrap;
+            }
+            .blog-badge {
+                display: inline-block;
+                padding: 0.15rem 0.5rem;
+                border-radius: 3rem;
+                font-size: 0.6rem;
+                font-weight: 700;
+                letter-spacing: 0.04em;
+                text-transform: uppercase;
+                color: #08080c;
+            }
+            .blog-badge-speed-run {
+                background: #f472b6;
+            }
+            .blog-badge-guide {
+                background: #a78bfa;
+            }
+            .blog-badge-howto {
+                background: #00f5ff;
+            }
+            .blog-badge-news {
+                background: #ffaa00;
+            }
+            .blog-badge-default {
+                background: #a78bfa;
+            }
+            .blog-agent {
+                display: inline-block;
+                padding: 0.15rem 0.45rem;
+                border-radius: 3rem;
+                font-size: 0.56rem;
+                font-weight: 600;
+                background: rgba(0, 245, 255, 0.15);
+                color: #00f5ff;
+                border: 1px solid rgba(0, 245, 255, 0.25);
+            }
+            .blog-date {
+                font-size: 0.82rem;
+                color: rgba(232, 232, 240, 0.45);
+                margin-bottom: 0.4rem;
+            }
+            .blog-card h3 {
+                font-family: "Inter Tight", sans-serif;
+                font-size: 1.1rem;
+                font-weight: 600;
+                margin: 0 0 0.5rem;
+                line-height: 1.35;
+            }
+            .blog-card h3 a {
+                color: #e8e8f0;
+                text-decoration: none;
+                transition: color 0.2s;
+            }
+            .blog-card h3 a:hover {
+                color: #00f5ff;
+            }
+            .blog-teaser {
+                font-size: 0.9rem;
+                color: rgba(232, 232, 240, 0.65);
+                line-height: 1.55;
+                margin-bottom: 1rem;
+                flex: 1;
+            }
+            .blog-readmore {
+                font-size: 0.85rem;
+                color: #00f5ff;
+                text-decoration: none;
+                font-weight: 500;
+                transition: opacity 0.2s;
+                margin-top: auto;
+            }
+            .blog-readmore:hover {
+                opacity: 0.75;
+            }
+            .blog-empty {
+                grid-column: 1 / -1;
+                text-align: center;
+                padding: 2rem;
+                color: rgba(232, 232, 240, 0.5);
+                font-size: 0.9rem;
+            }
+            .blog-pagination {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 0.75rem;
+                padding: 1rem 0;
+            }
+            .blog-page-btn {
+                padding: 0.4rem 1rem;
+                font-size: 0.85rem;
+                background: #12121c;
+                border: 1px solid #1a1a2e;
+                border-radius: 0.4rem;
+                color: #e8e8f0;
+                cursor: pointer;
+                font-family: Inter, sans-serif;
+                transition:
+                    border-color 0.2s,
+                    background 0.2s;
+            }
+            .blog-page-btn:hover:not(:disabled) {
+                border-color: #00f5ff;
+                background: rgba(0, 245, 255, 0.08);
+            }
+            .blog-page-btn:disabled {
+                opacity: 0.3;
+                cursor: default;
+            }
+            .blog-page-info {
+                font-size: 0.78rem;
+                color: rgba(232, 232, 240, 0.55);
+            }