Homepage relaunch: contrast fix, heading hierarchy, order widget refactor, final CTA band, depth & polish

2026-08-15 09:35:00 +00:00
parent cc5667bf7b
commit 85334fc4d2
7 changed files with 982 additions and 93 deletions
@@ -0,0 +1,132 @@
+---
+target: homepage index.html
+total_score: 26
+max_score: 36
+na_heuristics: 10
+p0_count: 3
+p1_count: 3
+timestamp: 2026-08-15T09-22-42Z
+slug: index-html
+---
+# ODOO4projects.com Homepage — Design Critique
+
+Method: dual-agent (A: design review · B: detector + browser evidence)
+
+## Design Health Score
+
+| # | Heuristic | Score | Key Issue |
+|---|-----------|-------|-----------|
+| 1 | Visibility of System Status | 3/4 | Billing toggle gives feedback; order widget never marks server location as required |
+| 2 | Match System / Real World | 3/4 | "No FTP, no shenanigans" is borderline informal for B2B hosting voice |
+| 3 | User Control and Freedom | 2/4 | Order widget: no Escape key, no backdrop-click close, small × target |
+| 4 | Consistency and Standards | 3/4 | Blog post pages still dark/cyan (legacy); order widget uses ~15 inline styles bypassing tokens |
+| 5 | Error Prevention | 2/4 | No validation before Stripe redirect — empty `?location=` possible; no pre-checkout confirm |
+| 6 | Recognition Rather Than Recall | 4/4 | Features fully visible on cards; Most Popular badge kills comparison effort |
+| 7 | Flexibility and Efficiency | 3/4 | Yearly toggle good; domain-count differences buried in feature text |
+| 8 | Aesthetic and Minimalist Design | 3/4 | Blog cards after pricing add density to an already long Persuade page |
+| 9 | Error Recovery | 3/4 | Coupon feedback clear; blog fetch failure shows only "Could not load blog posts." |
+| 10 | Help and Documentation | n/a | Persuade surface; FAQ tab + support link cover it |
+| **Total** | | **26/36** | **Good (72%)** |
+
+## Design Specificity Verdict
+
+**High specificity — composed for THIS product.** Hero headline ("Deploy Odoo in 5 Minutes"), Odoo-specific features (Quick Git, ODOO Settings Panel, 2 Workers), growth-themed plan names (Side Hustle → Empire), real partner instances in the trust bar, Odoo-specific blog topics, and a custom Stripe routing pattern. The skeleton (icon cards + pricing grid) is a familiar hosting-page pattern, but the content is authentically this product.
+
+**Deterministic scan:** Detector exit code 2 (44 findings, regex-only mode — HTML parser modules unavailable, so this is an undercount). Real hits: 12 low-contrast green check icons (#28a745 at 2.9:1–3.1:1), 4 undersized functional labels (9.6–9.92px), 2 skipped heading levels, 5 line-length violations, 17 off-ramp font sizes, 19 off-palette colors. The detector caught the contrast and text-size failures that the human review missed — those are its best catches. False positives: `overused-font` (Inter IS the brand font per DESIGN.md), hero gradient midpoint #2a1a26 (within palette family), rgba(33,37,41,X) opacity tones (intentional accessibility variants), em-dash count (moderate for marketing copy).
+
+**Visual overlays:** Browser injection succeeded; 17 anti-patterns reported in console. No reliable user-visible overlay persists (servers auto-exited after idle).
+
+## Overall Impression
+
+A warm, confident, genuinely specific landing page with a working pricing widget and honest social proof. The bones are good. The problems cluster at the edges: legibility (green checks, tiny labels), dismissal (order widget trap), and ending (blog after the conversion point). The single biggest opportunity: turn the post-pricing ending from content exploration back into a conversion moment.
+
+## What's Working
+
+1. **The pricing widget plays.** Billing toggle live-updates all four prices; location selector is Odoo-contextual; coupon defaults to "FREE TRIAL" — warm hand-holding most hosts don't do.
+2. **The dark hero band with Warm Sand CTA** creates sharp hierarchy; the "5 Minutes" highlight in #f0cda8 draws the eye to the value prop; Holland.webp at 8% adds texture without noise.
+3. **"Your Company" placeholder in the trust bar** is strategically honest — it invites the visitor to imagine themselves there and links to pricing.
+
+## Priority Issues
+
+**[P0] Low-contrast green check icons fail WCAG AA** (detector)
+- **What**: 12 `fa-check` icons in #28a745 on pricing cards — 2.9:1 on Warm Paper, 3.1:1 on white.
+- **Why**: Below 4.5:1; fails accessibility and reads washed-out on the featured card.
+- **Fix**: Darken the success green (e.g. #1e7a34) or switch checks to Plum Velvet with green reserved for savings text.
+- **Command**: /impeccable colorize
+
+**[P0] Undersized functional text** (detector)
+- **What**: "1 month free" and "up to -10%" at 9.92px; badge labels "guide"/"news" at 9.6px — below the 10–11px floor.
+- **Why**: These are decision-relevant (savings, content type); unreadable on mobile.
+- **Fix**: Raise to ≥0.72rem with 11px minimum; give the toggle sub-labels room.
+- **Command**: /impeccable typeset
+
+**[P0] Order widget traps users** (design review)
+- **What**: `#orderWidgetOverlay` closes only via a 2.4rem × button — no Escape, no backdrop click, undersized touch target.
+- **Why**: Accidentally opened widget = forced path; mobile users have no convenient exit.
+- **Fix**: Backdrop click + Escape listener in script.js; enlarge close hit area to ≥2.8rem.
+- **Command**: /impeccable harden
+
+**[P1] Hero stats waste prime real estate on redundancy** (design review)
+- **What**: "Deploy in 5 min" and "Instant setup" say the same thing; two of four stat slots.
+- **Why**: The hero is the only place for credibility metrics; redundancy forfeits it.
+- **Fix**: Replace "Instant setup" with a real metric (uptime, instances deployed, avg deploy time).
+- **Command**: /impeccable layout
+
+**[P1] Empire plan: blank feature row + weakest CTA on the highest-margin plan** (design review)
+- **What**: `<li><br/></li>` blank entry in the feature list; "Contact Us" as outline button vs "Buy Now" primaries below it.
+- **Why**: Blank row reads as "ran out of things to say"; the custom plan should be the most confident ask.
+- **Fix**: Replace blank row with a concrete feature; make CTA "Get Custom Quote" in primary style.
+- **Command**: /impeccable clarify
+
+**[P1] Skipped heading levels hurt structure** (detector)
+- **What**: h1→h3 (missing h2) at hero→features; h3→h5 (missing h4) at blog→footer; footer uses h5s.
+- **Why**: Screen-reader navigation and outline integrity for assistive tech.
+- **Fix**: Promote features-strip headings to h2; footer headings to h3/p.
+- **Command**: /impeccable audit
+
+**[P2] Blog after pricing weakens the conversion ending** (design review + synthesis)
+- **What**: Page ends on content exploration ("Read more →") right after the pricing decision.
+- **Why**: Peak-end rule — the emotional close should reinforce the decision, not invite second-guessing.
+- **Fix**: Replace trailing blog grid with a final CTA band ("Ready to deploy?" + pricing link), or move blog above pricing.
+- **Command**: /impeccable layout
+
+**[P2] "Satisfied or reimbursed" is undefined** (design review)
+- **What**: Strong claim with no qualifier anywhere.
+- **Why**: "Reimbursed for what, when?" introduces a tiny trust question at the exact conversion moment.
+- **Fix**: Add a time qualifier ("within 7 days") or link to legal.html.
+- **Command**: /impeccable clarify
+
+**[P2] Weak features-strip hierarchy** (design review)
+- **What**: Feature h3s at 0.9rem compete with their own descriptions; line-height 1.
+- **Why**: The first value-prop section after social proof should lead the eye, not whisper.
+- **Fix**: h3 to 1rem+, line-height 1.3, tighter tracking.
+- **Command**: /impeccable typeset
+
+## Persona Red Flags
+
+**Jordan (first-timer)**:
+- Tab 1 contains nested `<strong>` tags ("Full management through your <strong>ODOO Settings Panel</strong>") — invalid HTML, visually noisy, and "ODOO Settings Panel" is unexplained jargon.
+- FAQ tab has only 4 questions — no "What is Odoo?" or "Do I need to know code?"; feels like a teaser, not help.
+
+**Riley (stress tester / comparison shopper)**:
+- On the Rise (featured, $36.25) is 87% more than Side Hustle ($19.40) with the only listed difference being Git module installs — the price jump needs a clearer justification or feature gap.
+- Empire: "Our service on your server" doesn't answer who provides infrastructure or whether it's BYO cloud.
+
+**Casey (mobile, on-the-go)**:
+- Trust bar partner row (7 items, 2rem gaps) forces horizontal scrolling on 390px viewports; logos read as tiny unlabeled icons.
+- Billing toggle sub-labels at 0.62rem are barely legible; 48×26px switch is a tight thumb target.
+
+## Minor Observations
+
+- Order widget ~15 inline styles bypass the CSS custom properties — theming drift.
+- Footer uses h5 headings ("Useful Links," "About us," "Follow us on") — odd semantics.
+- "AccellerSales" spelling (double l) in the trust bar — verify.
+- Chat widget (agent.js) overlaps the footer on narrow viewports.
+- Holland.webp hero texture's purpose is unclear — if it signals the NL data region, label it.
+- script.js `isEmpire` param naming is unclear (controls CTA style, not price).
+
+## Questions to Consider
+
+- Why does "On the Rise" carry "Most Popular" when Side Hustle is 47% cheaper — is that badge conversion data or a guess? Would "Recommended — best value for growing teams" be more honest?
+- The page says "No DevOps required" then features "Git-based module deployment" — who is actually reading this page, the owner or their technical contact?
+- What if the highest-priced plan made the strongest ask instead of the weakest?
@@ -0,0 +1,216 @@
+{
+  "schemaVersion": 2,
+  "generatedAt": "2026-08-15T09:01:14Z",
+  "title": "Design System: ODOO4projects",
+  "extensions": {
+    "colorMeta": {
+      "plum-velvet": {
+        "role": "primary",
+        "displayName": "Plum Velvet",
+        "canonical": "#714b67",
+        "tonalRamp": ["#3b2b37","#402639","#46203c","#4c1a3f","#521442","#580e44","#5e0847","#63034a"]
+      },
+      "deep-plum": {
+        "role": "primary",
+        "displayName": "Deep Plum",
+        "canonical": "#65435c",
+        "tonalRamp": ["#3b2b37","#402639","#46203c","#4c1a3f","#521442","#580e44","#5e0847","#63034a"]
+      },
+      "warm-sand": {
+        "role": "secondary",
+        "displayName": "Warm Sand",
+        "canonical": "#f0cda8",
+        "tonalRamp": ["#c0b5aa","#c8b6a2","#d1b699","#d9b691","#e2b788","#eab780","#f3b777","#fbb76f"]
+      },
+      "ink-cocoa": {
+        "role": "neutral",
+        "displayName": "Ink Cocoa",
+        "canonical": "#1b1319",
+        "tonalRamp": ["#32252f","#372031","#3c1b34","#411636","#461139","#4b0c3b","#50073e","#550240"]
+      },
+      "warm-paper": {
+        "role": "neutral",
+        "displayName": "Warm Paper",
+        "canonical": "#f6f5f4",
+        "tonalRamp": ["#acaaa9","#bab7b5","#c8c4c1","#d5d1ce","#e3dfdb","#f1ece7","#f8f3ef","#fefaf5"]
+      },
+      "parchment": {
+        "role": "neutral",
+        "displayName": "Parchment",
+        "canonical": "#e5e3e0",
+        "tonalRamp": ["#9e9c9a","#acaaa7","#bab8b5","#c9c6c2","#d7d4d0","#e5e2de","#f4f0eb","#fefaf6"]
+      }
+    },
+    "typographyMeta": {
+      "display": {
+        "displayName": "Display",
+        "purpose": "Hero H1 only. Inter Tight 800, clamp(2rem, 4.5vw, 3.2rem), 1.15 line-height."
+      },
+      "headline": {
+        "displayName": "Headline",
+        "purpose": "Section H2s. Inter Tight 600, clamp(1.8rem, 3.2vw, 2.8rem), 1.25 line-height."
+      },
+      "title": {
+        "displayName": "Title",
+        "purpose": "Card H3s, plan names, tab headers. Inter Tight 600, clamp(1.1rem, 2vw, 1.4rem), 1.25."
+      },
+      "body": {
+        "displayName": "Body",
+        "purpose": "Paragraph text. Inter 400, 1rem, 1.6 line-height. Max ~580-680ch in prose."
+      },
+      "label": {
+        "displayName": "Label",
+        "purpose": "Meta text, plan features, small-print, tab subtitles. Inter Tight 500, 0.82rem, 0.04em letter-spacing."
+      }
+    },
+    "shadows": [
+      {
+        "name": "card-rest",
+        "value": "0 1px 3px rgba(0,0,0,0.06)",
+        "purpose": "Baseline pricing card shadow at rest."
+      },
+      {
+        "name": "card-hover",
+        "value": "0 4px 16px rgba(0,0,0,0.08)",
+        "purpose": "Interactive card hover, paired with translateY(-2px/-3px)."
+      },
+      {
+        "name": "toggle-thumb",
+        "value": "0 1px 3px rgba(0,0,0,0.15)",
+        "purpose": "Billing toggle thumb shadow."
+      },
+      {
+        "name": "blog-hover",
+        "value": "0 4px 20px rgba(113,75,103,0.08)",
+        "purpose": "Blog card hover on the light theme variant (homepage)."
+      }
+    ],
+    "motion": [
+      {
+        "name": "state-transition",
+        "value": "all 0.2s",
+        "purpose": "Default easing for state transitions (hover, focus, active)."
+      },
+      {
+        "name": "partner-scroll",
+        "value": "40s linear infinite",
+        "purpose": "Seamless partner logo carousel animation."
+      },
+      {
+        "name": "spinner",
+        "value": "0.8s linear infinite",
+        "purpose": "Loading spinner rotation."
+      },
+      {
+        "name": "toggle",
+        "value": "left 0.25s, background 0.25s",
+        "purpose": "Billing toggle switch animation."
+      }
+    ],
+    "breakpoints": [
+      { "name": "lg", "value": "992px" },
+      { "name": "md", "value": "768px" },
+      { "name": "sm", "value": "576px" }
+    ]
+  },
+  "components": [
+    {
+      "name": "Primary Button",
+      "kind": "button",
+      "refersTo": "button-primary",
+      "description": "Primary call-to-action on light surfaces. Use once per section.",
+      "html": "<button class=\"ds-btn-primary\">See Plans & Pricing</button>",
+      "css": ".ds-btn-primary{display:inline-block;padding:0.6rem 1.5rem;font-family:'Inter Tight','Inter',sans-serif;font-size:0.9rem;font-weight:500;background:#714b67;color:#fff;border:1px solid #714b67;border-radius:0.5rem;cursor:pointer;text-decoration:none;transition:all 0.2s}.ds-btn-primary:hover{background:#65435c;border-color:#65435c;transform:translateY(-1px)}"
+    },
+    {
+      "name": "Hero Button",
+      "kind": "button",
+      "refersTo": "button-hero",
+      "description": "Primary call-to-action inside the dark hero band. Warm Sand on Ink Cocoa.",
+      "html": "<a class=\"ds-btn-hero\">Deploy in 5 Minutes</a>",
+      "css": ".ds-btn-hero{display:inline-block;padding:0.85rem 2.5rem;background:#f0cda8;color:#1b1319;border-radius:0.5rem;font-family:'Inter Tight','Inter',sans-serif;font-size:1rem;font-weight:700;text-decoration:none;transition:opacity 0.2s,transform 0.2s}.ds-btn-hero:hover{opacity:0.9;transform:translateY(-2px)}"
+    },
+    {
+      "name": "Outline Button",
+      "kind": "button",
+      "refersTo": "button-outline",
+      "description": "Secondary/ghost action. Deep Plum border.",
+      "html": "<button class=\"ds-btn-outline\">How It Works</button>",
+      "css": ".ds-btn-outline{display:inline-block;padding:0.85rem 1.5rem;background:transparent;color:#65435c;border:1px solid #65435c;border-radius:0.5rem;font-family:'Inter Tight','Inter',sans-serif;font-size:0.9rem;text-decoration:none;transition:all 0.2s;cursor:pointer}.ds-btn-outline:hover{background:#65435c;color:#fff}"
+    },
+    {
+      "name": "Pricing Card",
+      "kind": "card",
+      "refersTo": "card-pricing",
+      "description": "Pricing plan card. Featured variant adds Plum Velvet border + Most Popular pill.",
+      "html": "<div class=\"ds-card-pricing featured\"><div class=\"ds-card-badge\">Most Popular</div><h3>On the Rise</h3><div class=\"ds-card-price\"><strong>$36.25</strong> <small>/month</small></div><p class=\"ds-card-desc\">I need some modules and professional reports</p><ul><li><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#28a745\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"/></svg> ODOO CE Hosting</li><li><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#28a745\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"/></svg> Automatic Backups</li><li><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#28a745\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"/></svg> Module installation via GIT</li></ul><button class=\"ds-btn-primary\" style=\"width:100%;box-sizing:border-box\">Buy Now</button></div>",
+      "css": ".ds-card-pricing{background:#fff;border:1px solid #e5e3e0;border-radius:1rem;overflow:hidden;display:flex;flex-direction:column;transition:all 0.3s;box-shadow:0 1px 3px rgba(0,0,0,0.06)}.ds-card-pricing.featured{border:2px solid #714b67;position:relative}.ds-card-pricing:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08);transform:translateY(-3px)}.ds-card-badge{position:absolute;top:0.75rem;right:0.75rem;background:#714b67;color:#fff;padding:0.2rem 0.6rem;border-radius:2rem;font-size:0.6rem;font-weight:600}.ds-card-pricing h3{font-family:'Inter Tight',sans-serif;font-size:1.1rem;font-weight:700;margin:0 0 0.5rem}.ds-card-price{margin:0.5rem 0}.ds-card-price strong{font-size:clamp(1.28rem,2vw,1.92rem);color:#1b1319}.ds-card-price small{color:rgba(33,37,41,0.55);font-size:0.82rem}.ds-card-desc{font-size:0.82rem;color:rgba(33,37,41,0.6);font-style:italic;min-height:3rem}.ds-card-pricing ul{list-style:none;padding:0;margin:0;flex-grow:1}.ds-card-pricing 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}.ds-card-pricing .ds-btn-primary{margin-top:0.75rem}"
+    },
+    {
+      "name": "Search Input",
+      "kind": "input",
+      "refersTo": "input",
+      "description": "Blog search / general text input on light surfaces.",
+      "html": "<div style=\"position:relative\"><svg style=\"position:absolute;left:0.75rem;top:50%;transform:translateY(-50%);color:rgba(33,37,41,0.35)\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.35-4.35\"/></svg><input class=\"ds-input\" type=\"text\" placeholder=\"Search posts...\"></div>",
+      "css": ".ds-input{width:100%;padding:0.75rem 1rem 0.75rem 2.5rem;font-size:0.85rem;font-family:Inter,sans-serif;background:#fff;border:1px solid #e5e3e0;border-radius:0.5rem;color:#212529;outline:none;transition:border-color 0.2s;box-sizing:border-box}.ds-input:focus{border-color:#714b67;box-shadow:0 0 0 2px rgba(113,75,103,0.15)}.ds-input::placeholder{color:rgba(33,37,41,0.35)}"
+    },
+    {
+      "name": "Navigation Tab (Active)",
+      "kind": "nav",
+      "refersTo": "tab-active",
+      "description": "Mission tab navigation — vertical rail on desktop, horizontal scroll on mobile.",
+      "html": "<nav style=\"display:flex;flex-direction:column;gap:0.25rem;width:220px\"><button class=\"ds-tab active\">Our Mission<small>What makes us different</small></button><button class=\"ds-tab\">Competitive Edge<small>We practice what we preach</small></button><button class=\"ds-tab\">Infrastructure<small>How we scale with you</small></button></nav>",
+      "css": ".ds-tab{display:block;padding:0.6rem 1rem;color:#212529;border-radius:0.6rem;border:none;background:none;width:100%;text-align:left;font-family:'Inter Tight','Inter',sans-serif;font-size:0.9rem;font-weight:500;cursor:pointer;transition:all 0.2s}.ds-tab:hover{background:#f6f5f4}.ds-tab.active{background:linear-gradient(135deg,rgba(113,75,103,0.08),rgba(113,75,103,0.03));color:#714b67;font-weight:600;border-left:3px solid #714b67}.ds-tab small{display:block;color:rgba(33,37,41,0.55);font-size:0.72rem;margin-top:0.1rem}.ds-tab.active small{color:rgba(113,75,103,0.6)}"
+    },
+    {
+      "name": "Billing Toggle",
+      "kind": "custom",
+      "refersTo": "toggle-switch",
+      "description": "Monthly / Yearly billing toggle with sliding thumb.",
+      "html": "<div style=\"display:flex;align-items:center;justify-content:center;gap:0.75rem\"><span class=\"ds-toggle-label active\">Monthly<small>1 month free</small></span><div class=\"ds-toggle-switch\"><div class=\"ds-toggle-thumb\"></div></div><span class=\"ds-toggle-label\">Yearly<small>up to -10%</small></span></div>",
+      "css": ".ds-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}.ds-toggle-label.active{color:#1b1319;font-weight:600}.ds-toggle-label small{display:block;font-size:0.62rem;font-weight:400;color:#28a745;margin-top:0.1rem}.ds-toggle-switch{width:48px;height:26px;background:#e5e3e0;border-radius:13px;cursor:pointer;position:relative;transition:background 0.25s;flex-shrink:0}.ds-toggle-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)}"
+    },
+    {
+      "name": "Blog Card",
+      "kind": "card",
+      "refersTo": "card-blog",
+      "description": "Blog post card on the homepage (light theme variant).",
+      "html": "<div class=\"ds-card-blog\"><div class=\"ds-card-blog-top\"><span class=\"ds-badge-guide\">guide</span><span class=\"ds-badge-agent\">AI</span></div><div class=\"ds-card-blog-date\">June 27, 2026</div><h3><a href=\"#\">Odoo Community vs. Enterprise: The Real Cost Breakdown (2026)</a></h3><p class=\"ds-card-blog-teaser\">A transparent cost comparison including hosting, licensing, and hidden costs for 5, 10, and 25-user teams.</p><a href=\"#\" class=\"ds-card-blog-link\">Read more &rarr;</a></div>",
+      "css": ".ds-card-blog{background:#fff;border:1px solid #e5e3e0;border-radius:0.6rem;padding:1.25rem;display:flex;flex-direction:column;transition:transform 0.2s,border-color 0.2s,box-shadow 0.2s}.ds-card-blog:hover{transform:translateY(-2px);border-color:#714b67;box-shadow:0 4px 20px rgba(113,75,103,0.08)}.ds-card-blog-top{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;flex-wrap:wrap}.ds-badge-guide{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;background:#a78bfa}.ds-badge-agent{display:inline-block;padding:0.15rem 0.45rem;border-radius:3rem;font-size:0.56rem;font-weight:600;background:rgba(113,75,103,0.1);color:#714b67;border:1px solid rgba(113,75,103,0.2)}.ds-card-blog-date{font-size:0.82rem;color:rgba(33,37,41,0.45);margin-bottom:0.4rem}.ds-card-blog h3{margin:0 0 0.5rem}.ds-card-blog h3 a{font-family:'Inter Tight',sans-serif;font-size:1.1rem;font-weight:600;line-height:1.35;color:#1b1319;text-decoration:none;transition:color 0.2s}.ds-card-blog h3 a:hover{color:#714b67}.ds-card-blog-teaser{font-size:0.9rem;color:rgba(33,37,41,0.6);line-height:1.55;margin:0 0 1rem;flex:1}.ds-card-blog-link{font-size:0.85rem;color:#714b67;text-decoration:none;font-weight:500;transition:opacity 0.2s;margin-top:auto}.ds-card-blog-link:hover{opacity:0.75}"
+    }
+  ],
+  "narrative": {
+    "northStar": "The Global Workbench",
+    "overview": "ODOO4projects is a managed Odoo hosting brand built on a warm, quietly premium plum-and-sand palette. The system's personality is warm, trustworthy, quietly premium — infrastructure that feels approachable and dependable for business owners who are not sysadmins. The North Star — The Global Workbench — names the promise: tools are pre-configured, the bench is set up, and the work is ready to start anywhere in the world. The interface is light by default: Warm Paper surfaces on white, Ink Cocoa text, with Plum Velvet as the single strong accent and Warm Sand as its warm counterpoint. Components are tactile and confident: rounded corners, solid buttons, immediate hover feedback, small upward lifts. Depth is currently subtle (flat at rest, gentle lift on interaction) and is slated to deepen.",
+    "keyCharacteristics": [
+      "Light, warm surfaces with one strong plum accent and a peach counterpoint",
+      "Generous, centered layout with clear vertical rhythm",
+      "Tactile, confident components with rounded corners (0.5–1rem)",
+      "Subtle interaction-driven elevation — flat at rest, lift on hover",
+      "Inter Tight for display/headings, Inter for body",
+      "No emojis, no gradients-as-decoration, no dark surfaces in the brand system (legacy dark blog theme is being phased out)"
+    ],
+    "rules": [
+      { "name": "The One-Accent Rule", "body": "Plum Velvet is the only full-strength accent. Green is reserved exclusively for functional success states.", "section": "colors" },
+      { "name": "The Warmth Rule", "body": "Every neutral must land warm — plum-tinted grays, never cold blue-grays.", "section": "colors" },
+      { "name": "The Small-Print Silence Rule", "body": "Label text is always one or two steps quieter in color so it never raises its voice over headline content.", "section": "typography" },
+      { "name": "The Flat-By-Default Rule", "body": "Surfaces are flat at rest. Shadow and lift appear only as a response to hover, focus, or active state.", "section": "elevation" }
+    ],
+    "dos": [
+      "Do lead with Plum Velvet for any single accent moment — the button, the active tab, the featured border.",
+      "Do keep all neutrals warm; any gray on the page should read as plum-tinted or sand-tinted, not blue.",
+      "Do use warm, client-focused copy with short sentences and bullets; no tech jargon, no emojis.",
+      "Do keep section containers centered at 80% / max 1300px and let sections breathe at 2–3rem padding.",
+      "Do give interactive elements an immediate hover response — a lift, a fill change, or a border shift within 0.2s.",
+      "Do use the pill for badges and the lg radius for cards; consistency of the radius ladder is what makes the system feel composed."
+    ],
+    "donts": [
+      "Don't use the legacy dark/cyan blog theme (#08080c background, #00f5ff cyan accents) — it is an older style being phased out; the brand is the plum/peach light system only.",
+      "Don't paint large areas Plum Velvet; it is an accent, not a surface.",
+      "Don't introduce additional accent colors; green belongs to success states only.",
+      "Don't use sharp rectangular corners (0 radius) on interactive elements.",
+      "Don't decorate with gradients other than the established hero band and the primary-to-secondary 'hr' divider.",
+      "Don't add permanent shadows to resting surfaces; depth responds to interaction."
+    ]
+  }
+}
@@ -0,0 +1,225 @@
+---
+name: ODOO4projects
+description: Managed Odoo hosting — the Global Workbench. Warm plum and sand, enterprise-grade but approachable.
+colors:
+  plum-velvet: "#714b67"
+  deep-plum: "#65435c"
+  warm-sand: "#f0cda8"
+  ink-cocoa: "#1b1319"
+  warm-paper: "#f6f5f4"
+  parchment: "#e5e3e0"
+  white: "#ffffff"
+typography:
+  display:
+    fontFamily: "'Inter Tight', 'Inter', sans-serif"
+    fontSize: "clamp(2rem, 4.5vw, 3.2rem)"
+    fontWeight: 800
+    lineHeight: 1.15
+  headline:
+    fontFamily: "'Inter Tight', 'Inter', sans-serif"
+    fontSize: "clamp(1.8rem, 3.2vw, 2.8rem)"
+    fontWeight: 600
+    lineHeight: 1.25
+  title:
+    fontFamily: "'Inter Tight', 'Inter', sans-serif"
+    fontSize: "clamp(1.1rem, 2vw, 1.4rem)"
+    fontWeight: 600
+    lineHeight: 1.25
+  body:
+    fontFamily: "Inter, 'Segoe UI', sans-serif"
+    fontSize: "1rem"
+    fontWeight: 400
+    lineHeight: 1.6
+  label:
+    fontFamily: "'Inter Tight', 'Inter', sans-serif"
+    fontSize: "0.82rem"
+    fontWeight: 500
+    letterSpacing: "0.04em"
+rounded:
+  sm: "0.5rem"
+  md: "0.6rem"
+  lg: "1rem"
+  pill: "2rem"
+spacing:
+  xs: "0.25rem"
+  sm: "0.5rem"
+  md: "1rem"
+  lg: "1.5rem"
+  xl: "2rem"
+components:
+  button-primary:
+    backgroundColor: "{colors.plum-velvet}"
+    textColor: "{colors.white}"
+    rounded: "{rounded.sm}"
+    padding: "0.6rem 1.5rem"
+  button-primary-hover:
+    backgroundColor: "{colors.deep-plum}"
+    textColor: "{colors.white}"
+    rounded: "{rounded.sm}"
+    padding: "0.6rem 1.5rem"
+  button-hero:
+    backgroundColor: "{colors.warm-sand}"
+    textColor: "{colors.ink-cocoa}"
+    rounded: "{rounded.sm}"
+    padding: "0.85rem 2.5rem"
+  button-outline:
+    textColor: "{colors.deep-plum}"
+    rounded: "{rounded.sm}"
+    padding: "0.6rem 1.5rem"
+  card-pricing:
+    backgroundColor: "{colors.white}"
+    rounded: "{rounded.lg}"
+    padding: "1.25rem"
+  tab-active:
+    textColor: "{colors.plum-velvet}"
+    rounded: "{rounded.md}"
+    padding: "0.6rem 1rem"
+  input:
+    backgroundColor: "{colors.white}"
+    rounded: "{rounded.sm}"
+    padding: "0.75rem 1rem"
+---
+
+# Design System: ODOO4projects
+
+**Creative North Star: "The Global Workbench"**
+
+## Overview
+
+ODOO4projects is a managed Odoo hosting brand built on a warm, quietly premium plum-and-sand palette. The system's personality is "warm, trustworthy, quietly premium — infrastructure that feels approachable and dependable" for business owners who are not sysadmins. The North Star — *The Global Workbench* — names the promise: tools are pre-configured, the bench is set up, and the work is ready to start anywhere in the world. Six global data regions are a literal fact of the product and the visual system leans into that reach.
+
+The interface is light by default: Warm Paper surfaces on white, Ink Cocoa text, with Plum Velvet as the single strong accent and Warm Sand as its warm counterpoint. Density is relaxed — generous section padding, centered constrained containers (80% width, max 1300px) — and the tone is conversational, not technical. Components are tactile and confident: rounded corners, solid buttons, immediate hover feedback, small upward lifts. Depth is currently subtle (flat at rest, gentle lift on interaction) and is slated to deepen.
+
+The homepage is a single long persuasion surface: hero → trust bar → features → mission tabs → how-it-works → pricing → blog → footer. Tabs and pricing cards carry the interactive weight; everything else is rhythm.
+
+**Key Characteristics:**
+- Light, warm surfaces with one strong plum accent and a peach counterpoint
+- Generous, centered layout with clear vertical rhythm
+- Tactile, confident components with rounded corners (0.5–1rem)
+- Subtle interaction-driven elevation — flat at rest, lift on hover
+- Inter Tight for display/headings, Inter for body
+- No emojis, no gradients-as-decoration, no dark surfaces in the brand system (legacy dark blog theme is being phased out)
+
+## Colors
+
+The palette is warm through and through — every neutral carries a whisper of plum or sand. Plum Velvet does the brand's talking; Warm Sand does the welcoming; Warm Paper and Parchment do the quiet work.
+
+### Primary
+- **Plum Velvet** (#714b67): The brand accent. Primary buttons, active tabs, featured plan border, footer social hover, link color context. Used sparingly — as fills on buttons and edges on active states, never as a wash across large areas.
+- **Deep Plum** (#65435c): Hover/darker variant of the accent. Primary button hover, outline button text and border.
+
+### Secondary
+- **Warm Sand** (#f0cda8): The welcoming counterpoint. Hero primary CTA background with Ink Cocoa text, the "hr" divider gradient, hero headline accent span. Reads as warm light, not cautionary yellow.
+
+### Neutral
+- **Warm Paper** (#f6f5f4): Section backgrounds (trust bar, how-it-works, pricing, light blog override). One step off pure white.
+- **Parchment** (#e5e3e0): Borders, dividers, card edges, toggle-switch off state.
+- **Ink Cocoa** (#1b1319): Text on light surfaces, footer background, hero gradient base, headline color, price figures.
+- **White** (#ffffff): Main page background, card backgrounds, text on Plum Velvet buttons.
+
+### Named Rules
+**The Warmth Rule.** Every neutral must land warm — plum-tinted grays, never cold blue-grays. When choosing a gray, err toward the sand side.
+
+**The One-Accent Rule.** Plum Velvet is the only full-strength accent. Green (#28a745) is reserved exclusively for functional success states (checkmarks, savings labels); it never competes as a brand color.
+
+## Typography
+
+**Display Font:** Inter Tight (fallback Inter, sans-serif)
+**Body Font:** Inter (fallback Segoe UI, sans-serif)
+
+**Character:** A quiet Swiss pairing — Inter Tight carries headings with slightly condensed confidence; Inter carries body copy with neutral legibility. The hierarchy leans on weight and size contrast rather than color.
+
+### Hierarchy
+- **Display** (800, clamp(2rem, 4.5vw, 3.2rem), 1.15): Hero H1 only (e.g. "Deploy Odoo in 5 Minutes — Fully Managed Hosting"). Accent span in Warm Sand.
+- **Headline** (600, clamp(1.8rem, 3.2vw, 2.8rem), 1.25): Section H2s ("Your Plan, Your Timing: Upgrade Anytime", "Latest from the Blog").
+- **Title** (600, clamp(1.1rem, 2vw, 1.4rem), 1.25): Card H3s, tab names, plan names.
+- **Body** (400, 1rem, 1.6): Paragraph text; line lengths held to ~580–680px in hero and section intro blocks.
+- **Label** (500, 0.82rem, 0.04em): Meta text — plan features, small-print, tab subtitles, footer links. The trust-bar kicker ("Trusted by businesses worldwide") is uppercase at 0.75rem with 0.08em tracking.
+
+### Named Rules
+**The Small-Print Silence Rule.** Label text is always one or two steps quieter in color (55–70% opacity of its surface's text color) so it never raises its voice over headline content.
+
+## Layout
+
+A single centered column system: `.container` at 80% width, max 1300px, with 20px side padding. Sections stack in full-bleed bands that alternate Warm Paper and White to create rhythm without borders.
+
+- **Hero:** full-bleed dark band (Ink Cocoa gradient 135deg #1b1319 → #2a1a26 → #3d2235) with a faint country-map image at 8% opacity, content left-aligned, max 720px headline width.
+- **Trust bar:** Warm Paper strip, centered kicker, seamless looping partner logo carousel (40s linear, pause on hover).
+- **Feature strip:** auto-fit grid, min 220px columns.
+- **Mission tabs:** 220px fixed left rail + fluid content; below 992px the rail becomes a horizontal scrollable tab row with a bottom border indicator.
+- **How-it-works:** 3-step centered grid (max 800px), numbered circles.
+- **Pricing:** 4-column grid → 2 → 1 at 992px / 576px; featured card gets a Plum Velvet border and a "Most Popular" pill.
+- **Blog:** 3-column card grid → 2 → 1 at 992px / 576px.
+- **Footer:** Ink Cocoa band; 3 columns (1.5fr 3fr 3.5fr) collapsing to 1 column at 992px.
+
+**Spacing rhythm:** sections breathe at 2–3rem vertical padding; cards use 1.25rem internal padding; grids gap at 1–1.5rem (features 1.5rem, pricing 1rem, blog 1.25rem).
+
+## Elevation & Depth
+
+The system is **flat at rest with interaction-driven lift**. Cards at rest carry only a whisper of shadow (0 1px 3px rgba(0,0,0,0.06)) or none; on hover they rise — translateY(-2px to -3px) with a soft shadow (0 4px 16px rgba(0,0,0,0.08)). Buttons lift 1–2px on hover. The hero band is the exception: it is the one physically "deep" surface, built from color gradient and imagery rather than shadow.
+
+**Forward direction (user-confirmed):** depth is currently conservative and is intended to *increase*. Future work should add more pronounced elevation, layered surfaces, or subtle depth cues without abandoning the flat-at-rest principle.
+
+### Shadow Vocabulary
+- **Card rest** (`0 1px 3px rgba(0,0,0,0.06)`): baseline pricing cards.
+- **Card hover** (`0 4px 16px rgba(0,0,0,0.08)`): interactive cards on hover, paired with translateY(-2px/-3px).
+- **Toggle thumb** (`0 1px 3px rgba(0,0,0,0.15)`): the billing toggle's sliding thumb.
+
+### Named Rules
+**The Flat-By-Default Rule.** Surfaces are flat at rest. Shadow and lift appear only as a response to hover, focus, or active state — never as permanent decoration.
+
+## Shapes
+
+The form language is soft and approachable: everything rounds off, nothing is sharp enough to feel technical. Radius scales in three steps plus pill: **sm** 0.5rem (8px) for buttons and inputs, **md** 0.6rem (~10px) for tabs and badges, **lg** 1rem (16px) for pricing cards and feature items, and **pill** 2rem for "Most Popular" badges, promo tags, the hero "How It Works" ghost button, and large buttons (.btn-lg). Circles handle the small geometry: numbered how-to steps (2.5rem), social icons (2.5rem), carousel dots (8px), toggle thumbs (20px).
+
+Borders are 1px Parchment for cards and inputs; the featured pricing card doubles to 2px Plum Velvet. Active tabs mark themselves with a 3px Plum Velvet bar — left edge on desktop, bottom edge below 992px.
+
+## Components
+
+### Buttons
+- **Shape:** rounded sm (0.5rem), full-width within pricing cards and on mobile hero, inline otherwise.
+- **Primary:** Plum Velvet fill, white text, 0.6rem 1.5rem padding. Hover: Deep Plum fill, translateY(-1px). Transition: all 0.2s.
+- **Hero:** Warm Sand fill, Ink Cocoa text, 0.85rem 2.5rem, weight 700 Inter Tight. Hover: opacity 0.9, translateY(-2px).
+- **Outline:** Deep Plum border and text on transparent. Hover: Deep Plum fill, white text. Used for "Contact Us" (Empire plan) and hero secondary.
+- **Large:** .btn-lg — pill radius (2rem), 0.75rem 2rem padding.
+
+### Cards / Containers
+- **Corner Style:** rounded lg (1rem); feature items 1rem; blog cards 0.6rem.
+- **Background:** white on light sections; #fff overrides in the home blog section; blog post pages use the legacy dark card (#12121c) pending the brand-wide phase-out of the dark theme.
+- **Shadow Strategy:** flat at rest, hover lift per Elevation & Depth.
+- **Border:** 1px Parchment.
+- **Internal Padding:** 1.25rem (pricing, blog); feature items 1.5rem 1rem.
+
+### Inputs / Fields
+- **Style:** white fill, 1px Parchment border, rounded sm (0.5rem), 0.75rem 1rem padding, Inter.
+- **Focus:** Plum Velvet border + a soft 2px ring rgba(113,75,103,0.15).
+- **Footer variant:** translucent fill rgba(255,255,255,0.08) with a lighter border — form inputs on the Ink Cocoa footer.
+
+### Navigation
+- **Tabs (desktop):** 220px left rail; tab = label + small subtitle, left-aligned, rounded md; active = Plum Velvet 3px left bar + soft plum-tinted gradient fill (rgba 0.08→0.03) + Plum Velvet text at 600.
+- **Tabs (mobile, <992px):** horizontal scroll row; active bar moves to the bottom edge; subtitles hidden.
+- **Footer navigation:** Ink Cocoa band, white headings, links at 65% white, hover to full white.
+
+### Billing Toggle
+- 48 × 26px pill track; off = Parchment, on = Plum Velvet; 20px white thumb with soft shadow slides left 3px → right 25px over 0.25s.
+
+### Blog Card
+- rounded md (0.6rem), white fill, 1.25rem padding, area badge pill (violet/sky/amber/cyan legacy palette — being replaced by plum-family in the brand system), date at 45% opacity, headline in Ink Cocoa, teaser at 60% opacity, "Read more →" in Plum Velvet. Hover: translateY(-2px), border to Plum Velvet, soft plum glow.
+
+## Do's and Don'ts
+
+### Do:
+- **Do** lead with Plum Velvet for any single accent moment — the button, the active tab, the featured border.
+- **Do** keep all neutrals warm; any gray on the page should read as plum-tinted or sand-tinted, not blue.
+- **Do** use warm, client-focused copy with short sentences and bullets; no tech jargon, no emojis.
+- **Do** keep section containers centered at 80% / max 1300px and let sections breathe at 2–3rem padding.
+- **Do** give interactive elements an immediate hover response — a lift, a fill change, or a border shift within 0.2s.
+- **Do** use the pill for badges and the lg radius for cards; consistency of the radius ladder is what makes the system feel composed.
+
+### Don't:
+- **Don't** use the legacy dark/cyan blog theme (#08080c background, #00f5ff cyan accents) — it is an older style being phased out; the brand is the plum/peach light system only.
+- **Don't** paint large areas Plum Velvet; it is an accent, not a surface.
+- **Don't** introduce additional accent colors; green belongs to success states only.
+- **Don't** use sharp rectangular corners (0 radius) on interactive elements.
+- **Don't** decorate with gradients other than the established hero band and the primary→secondary "hr" divider.
+- **Don't** add permanent shadows to resting surfaces; depth responds to interaction.
@@ -0,0 +1,63 @@
+# Product
+
+<!-- impeccable:product-schema 1 -->
+
+## Platform
+
+web
+
+## Users
+
+Primary: business owners and small-to-mid teams worldwide who need Odoo (Community) running for their business but do not want to hire DevOps or manage servers. They are evaluating or already using Odoo and need a production-ready instance fast — deploy in about 5 minutes — with backups, SSL, custom modules, and support handled for them.
+
+The site copy speaks to non-technical decision makers ("built for business owners, not sysadmins") and to growing businesses that will outgrow entry plans. Trust bar names real customer businesses across regions (Paraguay, Kenya, Germany, sales/automation consultancies).
+
+## Product Purpose
+
+Fully managed Odoo Community hosting: deploy a production-ready instance in about 5 minutes without DevOps. Automatic daily backups, free SSL on every domain, Git-based module deployment, management through an ODOO Settings Panel, an AI support bot plus human support, and a choice of 6 global data regions. Success = the customer has a running, maintained Odoo instance and never touches a command line.
+
+## Positioning
+
+Enterprise-grade Odoo Community hosting without the enterprise price tag. Community is treated as a powerful ERP that deserves first-class infrastructure — not a budget option. AI-first and global from day one: instances are ready to connect with AI tools and automation, deployed across 6 world regions; going global is a setting, not a project.
+
+## Operating Context
+
+- Static site (index.html, support.html, legal.html, blog/) deployed via git push to git.odoo4projects.com; auto-deploys on every change.
+- Order flow: inline order widget on the homepage opens Stripe checkout; coupon FREE TRIAL = 1 month free; yearly billing saves roughly 8-10%; "Satisfied or reimbursed" guarantee; server location chosen at checkout (US, Brazil, India, Australia, Netherlands, UK).
+- Support: AI support bot (agent.js from static.odoo4projects.com) plus human team; email support@odoo4projects.com; /contactus route.
+- Blog with guides and news (10 posts); homepage renders it with search and pagination.
+
+## Capabilities and Constraints
+
+- Plans: Side Hustle $19.40/mo, On the Rise $36.25/mo (Git modules), Powerhouse $49.60/mo (2 workers, 2GB HDD, 3 domains), Empire $80+/mo (service on the customer's own server, contact to order).
+- Features: automatic daily backups (FIFO rotation, redundant slots), free SSL on every domain, Git-based module deployment (Quick Git one-click), full management via ODOO Settings Panel, worker scaling, daily security audits with automated patching, continuous performance monitoring, 6 regions.
+- Enterprise-ready on Powerhouse and above; customer brings their own license.
+- ODOO4projects LLC; founding date 2020; partner: OD8N.
+- Constraint: this site remains a pure Odoo hosting seller. The PM Suite (Odoo-based project management + accounting tool for independent project managers, sold without Odoo branding) is a separate product on its own landing page and is not marketed on this site.
+- Technology: plain static HTML/CSS/JS, no framework, no build step; Inter and Inter Tight fonts; Font Awesome icons.
+
+## Brand Commitments
+
+- Name: ODOO4projects (ODOO4projects LLC).
+- Voice: client-focused, no tech jargon, short sentences, bullet points where appropriate, no emojis in content; lead with the Odoo Community focus and the benefit to the customer; use user-provided copy verbatim.
+- Identity assets: logo.png, favicon.ico; LinkedIn company page; YouTube channel.
+- Real named customers in the trust bar are commitments (Paraguay Service, Estancia Agape, KATE Group, agilnova, Ramani Kenya, Start Paraguay, AccellerSales); "Your Company" is an explicit placeholder for prospects.
+
+## Evidence on Hand
+
+- 7 named customer/partner sites with logos in the trust bar (see Brand Commitments).
+- 10 blog posts: Community vs Enterprise cost breakdown, AI agents with Community, enterprise migration guide, custom module how-to, deploy and backup speed runs, platform update, official partner news.
+- Plan names, prices, coupons, guarantees as listed above (from homepage code).
+- No invented testimonials beyond plan quotes; no case studies on site.
+
+## Product Principles
+
+1. Hosting must be zero-DevOps for the customer; everything manageable from a panel.
+2. Community edition gets enterprise-grade treatment — the infrastructure is the product's dignity.
+3. AI and automation are first-class capabilities, not add-ons.
+4. Trust is explicit: backups, SSL, guarantees, real named customers.
+5. Copy stays client-focused and jargon-free; facts over hype.
+
+## Accessibility & Inclusion
+
+No product-specific accessibility requirement has been established; standard web best practices apply.
@@ -202,13 +202,23 @@
                font-size: 1.5rem;
                color: var(--primary);
                margin-bottom: 0.75rem;
-                display: block;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                width: 3.25rem;
+                height: 3.25rem;
+                border-radius: 1rem;
+                background: linear-gradient(135deg, rgba(113,75,103,0.12), rgba(113,75,103,0.04));
+                border: 1px solid rgba(113,75,103,0.1);
+                box-shadow: 0 4px 12px rgba(113, 75, 103, 0.12);
            }
-            .features-strip .item h3 {
-                font-size: 0.9rem;
-                font-weight: 600;
-                margin-bottom: 0.3rem;
+            .features-strip .item h2 {
+                font-size: 1.02rem;
+                font-weight: 700;
+                line-height: 1.3;
+                margin-bottom: 0.35rem;
                color: var(--dark);
+                letter-spacing: -0.01em;
            }
            .features-strip .item p {
                font-size: 0.8rem;
@@ -292,7 +302,7 @@
                <div class="hero-stats">
                    <span class="hero-stat"><i class="fas fa-check-circle"></i> 6 global locations</span>
                    <span class="hero-stat"><i class="fas fa-check-circle"></i> Deploy in 5 min</span>
-                    <span class="hero-stat"><i class="fas fa-check-circle"></i> Instant setup</span>
+                    <span class="hero-stat"><i class="fas fa-check-circle"></i> AI support included</span>
                    <span class="hero-stat"><i class="fas fa-check-circle"></i> Instant backups</span>
                </div>
                <div>
@@ -384,27 +394,27 @@
                <div class="grid">
                    <div class="item">
                        <i class="fas fa-rocket"></i>
-                        <h3>5-Minute Deployment</h3>
+                        <h2>5-Minute Deployment</h2>
                        <p>No DevOps team needed. Pick a plan, choose your region, and your Odoo instance is live in minutes.</p>
                    </div>
                    <div class="item">
                        <i class="fas fa-shield-alt"></i>
-                        <h3>Automatic Backups &amp; SSL</h3>
+                        <h2>Automatic Backups &amp; SSL</h2>
                        <p>Daily backups stored in redundant slots. Free SSL certificates on every domain — always secure.</p>
                    </div>
                    <div class="item">
                        <i class="fas fa-globe"></i>
-                        <h3>6 Global Locations</h3>
+                        <h2>6 Global Locations</h2>
                        <p>US, UK, Brazil, India, Australia, Netherlands. Choose your data region at deploy time.</p>
                    </div>
                    <div class="item">
                        <i class="fas fa-code-branch"></i>
-                        <h3>Git-Based Module Deployment</h3>
-                        <p>Push custom modules via Git or use one-click Quick Git. No FTP, no shenanigans.</p>
+                        <h2>Git-Based Module Deployment</h2>
+                        <p>Push custom modules via Git or use one-click Quick Git. No FTP, no hassle.</p>
                    </div>
                    <div class="item">
                        <i class="fas fa-headset"></i>
-                        <h3>Support Bot &amp; Human Support</h3>
+                        <h2>Support Bot &amp; Human Support</h2>
                        <p>AI support bot for instant fixes. Human team for everything else. Your UUID is your key.</p>
                    </div>
                </div>
@@ -458,7 +468,7 @@
                                                    via Git or use one-click Quick Git. No FTP, no hassle.
                                                </li>
                                                <li style="margin-bottom: 0.5rem;">
-                                                    <strong>Full management through your <strong>ODOO Settings Panel</strong></strong>
+                                                    <strong>Full management through your ODOO Settings Panel</strong>
                                                    &mdash; no SSH, no terminal, no DevOps team required.
                                                </li>
                                            </ol>
@@ -573,9 +583,9 @@
                            <p class="desc">&ldquo;ODOO Standard .. that is all my business needs&rdquo;</p>
                            <a href="javascript:void(0)" class="btn btn-primary" onclick="openOrderWidget('Side Hustle', 19.40, 214.0, false)">Buy Now</a>
                            <ul>
-                                <li><i class="fas fa-check" style="color: #28a745"></i> ODOO CE Hosting</li>
-                                <li><i class="fas fa-check" style="color: #28a745"></i> Automatic Backups</li>
-                                <li><i class="fas fa-check" style="color: #28a745"></i> Domain Mapping, SSL Cert</li>
+                                <li><i class="fas fa-check" style="color: var(--success)"></i> ODOO CE Hosting</li>
+                                <li><i class="fas fa-check" style="color: var(--success)"></i> Automatic Backups</li>
+                                <li><i class="fas fa-check" style="color: var(--success)"></i> Domain Mapping, SSL Cert</li>
                            </ul>
                        </div>
                        <div class="pcard-foot">Instant setup, satisfied or reimbursed.</div>
@@ -592,10 +602,10 @@
                            <p class="desc">&ldquo;I need some modules and professional reports&rdquo;</p>
                            <a href="javascript:void(0)" class="btn btn-primary" onclick="openOrderWidget('On the Rise', 36.25, 395.0, false)">Buy Now</a>
                            <ul>
-                                <li><i class="fas fa-check" style="color: #28a745"></i> ODOO CE Hosting</li>
-                                <li><i class="fas fa-check" style="color: #28a745"></i> Automatic Backups</li>
-                                <li><i class="fas fa-check" style="color: #28a745"></i> Domain Mapping, SSL Cert</li>
-                                <li><i class="fas fa-check" style="color: #28a745"></i> Module installation via GIT / quickGIT</li>
+                                <li><i class="fas fa-check" style="color: var(--success)"></i> ODOO CE Hosting</li>
+                                <li><i class="fas fa-check" style="color: var(--success)"></i> Automatic Backups</li>
+                                <li><i class="fas fa-check" style="color: var(--success)"></i> Domain Mapping, SSL Cert</li>
+                                <li><i class="fas fa-check" style="color: var(--success)"></i> Module installation via GIT / quickGIT</li>
                            </ul>
                        </div>
                        <div class="pcard-foot">Instant setup, satisfied or reimbursed.</div>
@@ -612,12 +622,12 @@
                            <p class="desc">&ldquo;ODOO Enterprise is a must have!&rdquo;</p>
                            <a href="javascript:void(0)" class="btn btn-primary" onclick="openOrderWidget('Powerhouse', 49.60, 535.0, false)">Buy Now</a>
                            <ul>
-                                <li><i class="fas fa-check" style="color: #28a745"></i> ODOO CE Hosting</li>
-                                <li><i class="fas fa-check" style="color: #28a745"></i> Automatic Backups</li>
-                                <li><i class="fas fa-check" style="color: #28a745"></i> 3 Domain Mapping, SSL Cert</li>
-                                <li><i class="fas fa-check" style="color: #28a745"></i> Module installation via GIT / quickGIT</li>
-                                <li><i class="fas fa-check" style="color: #28a745"></i> 2 Workers</li>
-                                <li><i class="fas fa-check" style="color: #28a745"></i> 2GB HDD</li>
+                                <li><i class="fas fa-check" style="color: var(--success)"></i> ODOO CE Hosting</li>
+                                <li><i class="fas fa-check" style="color: var(--success)"></i> Automatic Backups</li>
+                                <li><i class="fas fa-check" style="color: var(--success)"></i> 3 Domain Mapping, SSL Cert</li>
+                                <li><i class="fas fa-check" style="color: var(--success)"></i> Module installation via GIT / quickGIT</li>
+                                <li><i class="fas fa-check" style="color: var(--success)"></i> 2 Workers</li>
+                                <li><i class="fas fa-check" style="color: var(--success)"></i> 2GB HDD</li>
                            </ul>
                        </div>
                        <div class="pcard-foot">Instant setup, satisfied or reimbursed.</div>
@@ -632,12 +642,12 @@
                                <div class="price-save empire-no-save" style="display: none" data-monthly-text="" data-yearly-text=""></div>
                            </div>
                            <p class="desc">&ldquo;My house! My Horse! My Server!&rdquo;</p>
-                            <a href="javascript:void(0)" class="btn btn-outline-primary" onclick="openOrderWidget('Empire', 80.0, 950.0, true)">Contact Us</a>
+                            <a href="javascript:void(0)" class="btn btn-primary" onclick="openOrderWidget('Empire', 80.0, 950.0, true)">Get Custom Quote</a>
                            <ul>
-                                <li><i class="fas fa-check" style="color: #28a745"></i> Our service on your server</li>
-                                <li><i class="fas fa-check" style="color: #28a745"></i> All modules &amp; features</li>
-                                <li><i class="fas fa-check" style="color: #28a745"></i> Unlimited customization</li>
-                                <li><br /></li>
+                                <li><i class="fas fa-check" style="color: var(--success)"></i> Our service on your server</li>
+                                <li><i class="fas fa-check" style="color: var(--success)"></i> All modules &amp; features</li>
+                                <li><i class="fas fa-check" style="color: var(--success)"></i> Unlimited customization</li>
+                                <li><i class="fas fa-check" style="color: var(--success)"></i> Priority support &amp; dedicated onboarding</li>
                            </ul>
                        </div>
                        <div class="pcard-foot">Instant setup, satisfied or reimbursed.</div>
@@ -648,38 +658,36 @@
        </section>

        <!-- Order Widget -->
-        <div id="orderWidgetOverlay" style="display:none;position:fixed;inset:0;z-index:999;background:rgba(0,0,0,0.6);align-items:center;justify-content:center;">
-            <div id="orderPanelBuy" style="display:none;">
-                <div style="background:#fff;border-radius:1rem;max-width:460px;width:90%;overflow:hidden;position:relative;">
-                    <button onclick="closeOrderWidget()" style="position:absolute;top:0.75rem;right:0.75rem;z-index:10;background:#fff;border:none;width:2.4rem;height:2.4rem;border-radius:50%;cursor:pointer;font-size:1.3rem;box-shadow:0 2px 8px rgba(0,0,0,0.1);color:#555;">&times;</button>
-                    <div style="padding:2rem;">
-                        <h2 style="font-size:clamp(1rem,2vw,1.24rem);margin-bottom:0.5rem;color:#1b1319;" id="orderPlanTitle">On the Rise</h2>
-                        <p style="font-size:0.8rem;color:rgba(33,37,41,0.6);margin-bottom:1rem;">
-                            <span id="orderPlanPrice">$ 36.25</span> <span id="orderPlanPeriod">/ month</span>
-                            <span id="orderPlanTax" style="font-size:0.7rem;color:rgba(33,37,41,0.45);">+ tax</span>
-                        </p>
-                        <p id="orderCouponMsg" style="font-size:0.78rem;color:#28a745;margin-bottom:1rem;display:none;">Use coupon <strong>FREE TRIAL</strong> at checkout for 1 month free</p>
-                        <p id="orderYearlySave" style="font-size:0.78rem;color:#28a745;margin-bottom:1rem;display:none;">Save <span id="orderSavePercent">15</span>% with yearly billing</p>
-                        <label style="font-size:0.78rem;font-weight:500;display:block;margin-bottom:0.25rem;color:#1b1319;">Server Location</label>
-                        <select id="orderServerLocation" style="width:100%;padding:0.6rem 0.8rem;font-size:0.82rem;border:1px solid #e5e3e0;border-radius:0.5rem;background:#fff;color:#1b1319;margin-bottom:1.5rem;font-family:Inter,sans-serif;cursor:pointer;">
-                            <option value="USA">&#127482;&#127480; United States</option>
-                            <option value="Brazil">&#127463;&#127479; Brazil</option>
-                            <option value="India">&#127470;&#127475; India</option>
-                            <option value="Australia">&#127462;&#127482; Australia</option>
-                            <option value="Netherlands">&#127475;&#127473; Netherlands</option>
-                            <option value="UK">&#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 id="orderWidgetOverlay" class="ow-overlay" onclick="if(event.target===this)closeOrderWidget()">
+            <div id="orderPanelBuy" class="ow-panel" style="display:none">
+                <button class="ow-close" onclick="closeOrderWidget()">&times;</button>
+                <div class="ow-content">
+                    <h2 class="ow-title" id="orderPlanTitle">On the Rise</h2>
+                    <p class="ow-price">
+                        <span class="ow-price-amount" id="orderPlanPrice">$ 36.25</span> <span id="orderPlanPeriod">/ month</span>
+                        <span class="ow-price-tax" id="orderPlanTax">+ tax</span>
+                    </p>
+                    <p class="ow-coupon-msg" id="orderCouponMsg">Use coupon <strong>FREE TRIAL</strong> at checkout for 1 month free</p>
+                    <p class="ow-yearly-save" id="orderYearlySave">Save <span id="orderSavePercent">15</span>% with yearly billing</p>
+                    <label class="ow-field-label" for="orderServerLocation">Server Location</label>
+                    <select id="orderServerLocation" class="ow-select">
+                        <option value="USA">&#127482;&#127480; United States</option>
+                        <option value="Brazil">&#127463;&#127479; Brazil</option>
+                        <option value="India">&#127470;&#127475; India</option>
+                        <option value="Australia">&#127462;&#127482; Australia</option>
+                        <option value="Netherlands">&#127475;&#127473; Netherlands</option>
+                        <option value="UK">&#127468;&#127463; United Kingdom</option>
+                    </select>
+                    <div style="margin-bottom:1rem">
+                        <label class="ow-field-label" for="orderCouponInput">Coupon Code</label>
+                        <div class="ow-coupon-row">
+                            <input id="orderCouponInput" type="text" value="FREE TRIAL" class="ow-input" />
+                            <button class="ow-btn-apply" onclick="applyCoupon()">Apply</button>
                        </div>
-                        <a id="orderBuyBtn" href="/contactus" class="btn btn-primary btn-lg" style="width:100%;text-align:center;display:block;">Continue to Stripe &rarr;</a>
-                        <p style="font-size:0.68rem;color:rgba(33,37,41,0.45);text-align:center;margin-top:0.6rem;">&#128274; Secure Stripe checkout &middot; Credit card required</p>
+                        <p class="ow-coupon-status" id="orderCouponStatus">&#10003; Coupon applied</p>
                    </div>
+                    <a id="orderBuyBtn" href="/contactus" class="btn btn-primary btn-lg ow-buy">Continue to Stripe &rarr;</a>
+                    <p class="ow-note">&#128274; Secure Stripe checkout &middot; Credit card required</p>
                </div>
            </div>
        </div>
@@ -704,12 +712,21 @@
            </div>
        </section>

+        <!-- Final CTA -->
+        <section class="final-cta">
+            <div class="container">
+                <h2>Ready to deploy your Odoo?</h2>
+                <p>Pick a plan, choose your region, and your instance is live in under 5 minutes. No DevOps required.</p>
+                <a href="#pricing" class="btn-hero">See Plans &amp; Pricing &rarr;</a>
+            </div>
+        </section>
+
        <!-- Footer -->
        <footer class="footer">
            <div class="container">
                <div class="fgrid">
                    <div>
-                        <h5>Useful Links</h5>
+                        <h4>Useful Links</h4>
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li><a href="support.html">Support</a></li>
@@ -719,12 +736,12 @@
                        </ul>
                    </div>
                    <div>
-                        <h5>About us</h5>
+                        <h4>About us</h4>
                        <p>We build smart, scalable business solutions by combining the <strong>stability</strong> of Odoo ERP with the <strong>power</strong> of AI and N8N automation.</p>
                        <p>From streamlined sales to global rollouts, our <strong>lean, eco-friendly</strong> approach helps businesses cut costs, boost efficiency, and grow without limits.</p>
                    </div>
                    <div>
-                        <h5>Follow us on</h5>
+                        <h4>Follow us on</h4>
                        <div class="social">
                            <a href="https://www.linkedin.com/company/odoo4projects/" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                            <a href="/" target="_blank" aria-label="Home"><i class="fas fa-home"></i></a>
@@ -158,6 +158,17 @@ var si = 0,
                document.getElementById("orderWidgetOverlay").style.display =
                    "none";
            }
+            // Escape key closes the order widget
+            document.addEventListener("keydown", function (e) {
+                if (e.key === "Escape") {
+                    var widget = document.getElementById(
+                        "orderWidgetOverlay",
+                    );
+                    if (widget && widget.style.display === "flex") {
+                        closeOrderWidget();
+                    }
+                }
+            });
            document
                .getElementById("orderServerLocation")
                .addEventListener("change", function () {
@@ -185,7 +196,7 @@ var si = 0,
                if (code.toLowerCase() === "free trial") {
                    status.textContent =
                        "\u2713 Coupon FREE TRIAL applied - 1 month free";
-                    status.style.color = "#28a745";
+                    status.style.color = "#1a7f37";
                } else {
                    status.textContent = "Invalid coupon code";
                    status.style.color = "#dc3545";
@@ -44,12 +44,18 @@ img {
 }
 :root {
    --primary: #714b67;
+    --primary-hover: #65435c;
    --secondary: #f0cda8;
    --dark: #1b1319;
    --light: #f6f5f4;
    --border: #e5e3e0;
+    --success: #1a7f37;
    --radius: 0.6rem;
    --radius-lg: 1rem;
+    --shadow-rest: 0 2px 8px rgba(27, 19, 25, 0.07);
+    --shadow-hover: 0 14px 32px rgba(27, 19, 25, 0.14);
+    --shadow-primary: 0 8px 20px rgba(113, 75, 103, 0.28);
+    --shadow-featured: 0 10px 28px rgba(113, 75, 103, 0.18);
 }
 .container {
    width: 80%;
@@ -135,19 +141,21 @@ img {
    border-color: var(--primary);
 }
 .btn-primary:hover {
-    background: #5e3f55;
-    border-color: #5e3f55;
+    background: var(--primary-hover);
+    border-color: var(--primary-hover);
    transform: translateY(-1px);
+    box-shadow: var(--shadow-primary);
 }
 .btn-outline-primary {
-    color: #65435c;
-    border-color: #65435c;
+    color: var(--primary-hover);
+    border-color: var(--primary-hover);
    background: transparent;
 }
 .btn-outline-primary:hover {
    color: #fff;
-    background: #65435c;
-    border-color: #65435c;
+    background: var(--primary-hover);
+    border-color: var(--primary-hover);
+    box-shadow: var(--shadow-primary);
 }
 .btn-lg {
    padding: 0.75rem 2rem;
@@ -389,15 +397,16 @@ img {
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--shadow-rest);
 }
 .pcard:hover {
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-    transform: translateY(-3px);
+    box-shadow: var(--shadow-hover);
+    transform: translateY(-4px);
 }
 .pcard.featured {
    border: 2px solid var(--primary);
    position: relative;
+    box-shadow: var(--shadow-featured);
 }
 .pcard.featured::before {
    content: "Most Popular";
@@ -512,10 +521,11 @@ img {
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
-.footer h5 {
+.footer h4 {
    color: #fff;
    margin-bottom: 0.8rem;
    font-weight: 600;
+    font-size: 1rem;
 }
 .footer ul {
    list-style: none;
@@ -586,10 +596,220 @@ img {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
 }
-@media (max-width: 992px) {
+@media (max-width: 768px) {
    .fgrid {
        grid-template-columns: 1fr;
    }
+    .footer {
+        padding-bottom: 5rem;
+    }
+}
+
+/* ---- Order Widget ---- */
+.ow-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 999;
+    display: none;
+    background: rgba(0,0,0,0.6);
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+.ow-panel {
+    background: #fff;
+    border-radius: 1rem;
+    max-width: 460px;
+    width: 90%;
+    overflow: hidden;
+    position: relative;
+    cursor: default;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
+}
+.ow-close {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+    z-index: 10;
+    background: #fff;
+    border: 1px solid var(--border);
+    width: 2.8rem;
+    height: 2.8rem;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 1.4rem;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    color: #555;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+.ow-close:hover {
+    background: var(--light);
+    color: var(--dark);
+    transform: scale(1.05);
+}
+.ow-content {
+    padding: 2rem;
+}
+.ow-title {
+    font-size: clamp(1rem, 2vw, 1.24rem);
+    margin-bottom: 0.5rem;
+    color: var(--dark);
+}
+.ow-price {
+    font-size: 0.8rem;
+    color: rgba(33,37,41,0.6);
+    margin-bottom: 1rem;
+}
+.ow-price .ow-price-amount {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--dark);
+}
+.ow-price .ow-price-tax {
+    font-size: 0.7rem;
+    color: rgba(33,37,41,0.45);
+}
+.ow-coupon-msg {
+    font-size: 0.78rem;
+    color: var(--success);
+    margin-bottom: 1rem;
+    display: none;
+}
+.ow-yearly-save {
+    font-size: 0.78rem;
+    color: var(--success);
+    margin-bottom: 1rem;
+    display: none;
+}
+.ow-field-label {
+    font-size: 0.78rem;
+    font-weight: 500;
+    display: block;
+    margin-bottom: 0.25rem;
+    color: var(--dark);
+}
+.ow-select {
+    width: 100%;
+    padding: 0.6rem 0.8rem;
+    font-size: 0.85rem;
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    background: #fff;
+    color: var(--dark);
+    margin-bottom: 1.5rem;
+    font-family: Inter, sans-serif;
+    cursor: pointer;
+    transition: border-color 0.2s;
+}
+.ow-select:focus {
+    border-color: var(--primary);
+    outline: none;
+}
+.ow-coupon-row {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+.ow-input {
+    flex: 1;
+    padding: 0.55rem 0.8rem;
+    font-size: 0.85rem;
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    background: #fff;
+    color: var(--dark);
+    font-family: Inter, sans-serif;
+    transition: border-color 0.2s;
+}
+.ow-input:focus {
+    border-color: var(--primary);
+    outline: none;
+}
+.ow-btn-apply {
+    padding: 0.55rem 1rem;
+    font-size: 0.78rem;
+    background: var(--primary);
+    color: #fff;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    font-family: Inter, sans-serif;
+    font-weight: 500;
+    transition: all 0.2s;
+}
+.ow-btn-apply:hover {
+    background: var(--primary-hover);
+}
+.ow-coupon-status {
+    font-size: 0.75rem;
+    margin-top: 0.3rem;
+    display: none;
+}
+.ow-buy {
+    width: 100%;
+    text-align: center;
+    display: block;
+    box-sizing: border-box;
+}
+.ow-note {
+    font-size: 0.72rem;
+    color: rgba(33,37,41,0.45);
+    text-align: center;
+    margin-top: 0.6rem;
+}
+
+/* ---- Final CTA ---- */
+.final-cta {
+    padding: 4rem 0;
+    background: linear-gradient(135deg, #1b1319, #2a1a26, #3d2235);
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+.final-cta::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: url('images/holland.webp') center/cover no-repeat;
+    opacity: 0.06;
+    z-index: 0;
+}
+.final-cta .container {
+    position: relative;
+    z-index: 1;
+}
+.final-cta h2 {
+    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
+    font-weight: 800;
+    color: #fff;
+    margin-bottom: 0.75rem;
+}
+.final-cta p {
+    font-size: 1.05rem;
+    color: rgba(255,255,255,0.7);
+    max-width: 520px;
+    margin: 0 auto 1.5rem;
+    line-height: 1.7;
+}
+.final-cta .btn-hero {
+    display: inline-block;
+    padding: 0.85rem 2.5rem;
+    background: var(--secondary);
+    color: var(--dark);
+    border-radius: 0.5rem;
+    font-family: "Inter Tight", sans-serif;
+    font-size: 1rem;
+    font-weight: 700;
+    text-decoration: none;
+    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
+}
+.final-cta .btn-hero:hover {
+    opacity: 0.9;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(113, 75, 103, 0.3);
 }
 .spinner-overlay {
    position: absolute;
@@ -641,9 +861,9 @@ img {
 }
 .toggle-label small {
    display: block;
-    font-size: 0.62rem;
-    font-weight: 400;
-    color: #28a745;
+    font-size: 0.72rem;
+    font-weight: 500;
+    color: var(--success);
    margin-top: 0.1rem;
 }
 .toggle-switch {
@@ -674,9 +894,9 @@ img {
    left: 25px;
 }
 .price-save {
-    font-size: 0.6rem;
+    font-size: 0.72rem;
    font-weight: 700;
-    color: #28a745;
+    color: var(--success);
    margin-top: 0.15rem;
 }
 .price-period {
@@ -836,38 +1056,43 @@ img {
 }
 .blog-badge {
    display: inline-block;
-    padding: 0.15rem 0.5rem;
+    padding: 0.2rem 0.6rem;
    border-radius: 3rem;
-    font-size: 0.6rem;
+    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #08080c;
 }
 .blog-badge-speed-run {
-    background: #f472b6;
+    background: #f0cda8;
+    color: #1b1319;
 }
 .blog-badge-guide {
-    background: #a78bfa;
+    background: #d9c4d8;
+    color: #1b1319;
 }
 .blog-badge-howto {
-    background: #00f5ff;
+    background: #cbb3cc;
+    color: #1b1319;
 }
 .blog-badge-news {
-    background: #ffaa00;
+    background: #e8c9a8;
+    color: #1b1319;
 }
 .blog-badge-default {
-    background: #a78bfa;
+    background: #d9c4d8;
+    color: #1b1319;
 }
 .blog-agent {
    display: inline-block;
-    padding: 0.15rem 0.45rem;
+    padding: 0.2rem 0.55rem;
    border-radius: 3rem;
-    font-size: 0.56rem;
+    font-size: 0.7rem;
    font-weight: 600;
-    background: rgba(0, 245, 255, 0.15);
-    color: #00f5ff;
-    border: 1px solid rgba(0, 245, 255, 0.25);
+    background: rgba(113, 75, 103, 0.15);
+    color: #714b67;
+    border: 1px solid rgba(113, 75, 103, 0.25);
 }
 .blog-date {
    font-size: 0.82rem;