/*
 * Service / plan pages ("صفحه‌ی خدمات / پلن" template). The page body is HTML
 * written in the admin code editor using these lp-* blocks; see the snippets
 * in public/assets/admin/editor.js.
 */
.is-landing .site-main { padding: 0; }
.lp-content { --lp-gutter: max(16px, calc((100% - 1168px) / 2)); line-height: 2; }
.lp-content > :not(.lp-hero):not(.lp-section):not(.lp-cta):not(.lp-crumbs) { margin-inline: var(--lp-gutter); }
.lp-content h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.55; margin: 0 0 12px; color: var(--ink); font-weight: 800; text-wrap: balance; }
.lp-content h3 { font-size: 1.1rem; line-height: 1.7; margin: 0 0 6px; color: var(--ink); }
.lp-content p { margin: 0 0 1em; }
.lp-content a:not(.lp-btn) { font-weight: 600; }

/* Breadcrumbs (printed by the template) */
.lp-crumbs { padding: 14px var(--lp-gutter) 0; font-size: .82rem; color: var(--muted); background: #f4f8fc; }
.lp-crumbs a { color: var(--muted); }
.lp-crumbs .sep { margin: 0 6px; }

/* Buttons */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border-radius: 12px; background: var(--primary); color: #fff; font-weight: 700; text-decoration: none; border: 1.5px solid transparent; transition: background .2s, color .2s, border-color .2s, transform .2s; box-shadow: 0 8px 20px -8px rgba(21, 96, 255, .55); }
.lp-btn:hover { background: var(--primary-dark); color: #fff; text-decoration: none; }
.lp-btn.is-ghost { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: none; }
.lp-btn.is-ghost:hover { background: var(--ink); color: #fff; }
.lp-btn.is-light { background: #fff; color: var(--primary-dark); box-shadow: none; }
.lp-btn.is-light:hover { background: var(--primary-soft); color: var(--primary-dark); }
.lp-btn.is-soft { background: var(--primary-soft); color: var(--primary-dark); box-shadow: none; }
.lp-btn.is-soft:hover { background: var(--primary); color: #fff; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--primary); background: rgba(21, 96, 255, .07); border: 1px solid rgba(21, 96, 255, .2); padding: 2px 14px; border-radius: 999px; margin-bottom: 14px; }
.lp-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px var(--primary); }

/* Hero */
.lp-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center;
  padding: 56px var(--lp-gutter) 72px;
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(21, 96, 255, .12), transparent 70%),
    linear-gradient(rgba(21, 96, 255, .06) 1px, transparent 1px) 0 0 / 100% 48px,
    #f4f8fc;
  border-bottom: 1px solid var(--border);
}
.lp-hero h1 { font-size: clamp(1.8rem, 3.8vw, 2.8rem); line-height: 1.45; margin: 0; font-weight: 800; color: var(--ink); text-wrap: balance; }
.lp-hero-copy > p { margin: 18px 0 0; color: var(--muted); font-size: 1.07rem; max-width: 36em; }
.lp-facts { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-wrap: wrap; gap: 0; }
.lp-facts li { padding-inline-end: 26px; margin-inline-end: 26px; border-inline-end: 1px solid var(--border); line-height: 1.5; }
.lp-facts li:last-child { border: 0; margin: 0; padding: 0; }
.lp-facts strong { display: block; font-size: 1.3rem; font-weight: 800; color: var(--ink); }
.lp-facts span { font-size: .82rem; color: var(--muted); }
.lp-hero-card { background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 26px; box-shadow: 0 24px 60px -28px rgba(11, 27, 51, .3); max-width: 420px; justify-self: end; width: 100%; }
.lp-hero-card .lp-tag { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--primary-dark); background: var(--primary-soft); padding: 0 12px; border-radius: 999px; }
.lp-hero-card .lp-price { margin: 14px 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .9rem; line-height: 1.6; }
.lp-hero-card .lp-btn { display: flex; margin-top: 20px; }
@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; padding-bottom: 48px; }
  .lp-hero-card { justify-self: stretch; max-width: none; }
}
@media (max-width: 520px) { .lp-actions .lp-btn { flex: 1 1 100%; } .lp-facts li { padding-inline-end: 14px; margin-inline-end: 14px; } }

/* Price (hero card + plans) */
.lp-price strong { display: inline-block; font-size: 2.4rem; font-weight: 900; line-height: 1.1; color: var(--ink); margin-inline-end: 6px; }

/* Check lists */
.lp-content ul.lp-checks, .lp-plan ul, .lp-hero-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lp-checks li, .lp-plan li, .lp-hero-card li { position: relative; padding-inline-start: 28px; font-size: .93rem; line-height: 1.8; color: #33435c; }
.lp-checks li::before, .lp-plan li::before, .lp-hero-card li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231560ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.8 2.6L12 5.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.lp-content ul.lp-checks.is-cols { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px 28px; }

/* Sections */
.lp-section { padding: 72px var(--lp-gutter); }
.lp-section.is-alt { background: #fff; border-block: 1px solid var(--border); }
.lp-section.is-tight { padding-top: 24px; }
.lp-head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.lp-head p { color: var(--muted); margin: 0; }
@media (max-width: 640px) { .lp-section { padding-top: 52px; padding-bottom: 52px; } }

/* Plans */
.lp-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; align-items: stretch; }
.lp-plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 26px 22px 22px; transition: transform .2s, box-shadow .2s; }
.lp-plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.lp-plan.is-featured { border: 2px solid var(--primary); box-shadow: 0 18px 40px -20px rgba(21, 96, 255, .45); }
.lp-badge { position: absolute; top: 0; inset-inline-start: 22px; transform: translateY(-50%); background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-size: .75rem; font-weight: 700; padding: 2px 12px; border-radius: 999px; line-height: 1.8; }
.lp-plan-code { align-self: flex-start; font-size: .75rem; font-weight: 700; color: var(--primary-dark); background: var(--primary-soft); padding: 0 10px; border-radius: 6px; direction: ltr; line-height: 1.8; }
.lp-plan h3 { margin: 10px 0 0; }
.lp-plan .lp-price { margin: 6px 0 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--border); color: var(--muted); font-size: .85rem; line-height: 1.6; }
.lp-plan .lp-price strong { font-size: 1.7rem; }
.lp-price del { color: var(--muted); font-size: .95rem; margin-inline-end: 4px; opacity: .8; }
.lp-plan ul { flex: 1; margin-bottom: 20px; }
.lp-plan .lp-btn { display: flex; min-height: 44px; }
.lp-plan:not(.is-featured) .lp-btn { background: var(--primary-soft); color: var(--primary-dark); box-shadow: none; }
.lp-plan:not(.is-featured) .lp-btn:hover { background: var(--primary); color: #fff; }
.lp-note { text-align: center; color: var(--muted); font-size: .88rem; margin-top: 22px; }

/* Feature cards & chips */
.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.lp-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 22px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.lp-section.is-alt .lp-card { background: var(--bg); }
.lp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(21, 96, 255, .3); }
.lp-card p { margin: 0; color: var(--muted); font-size: .93rem; }
.lp-card .lp-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); font-weight: 900; font-size: 1.1rem; margin-bottom: 12px; }
.lp-content ul.lp-chips { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.lp-chips li { padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--border); font-weight: 600; color: var(--ink); text-align: center; font-size: .94rem; line-height: 1.7; }
.lp-chips li::before { content: "✓"; color: var(--primary); font-weight: 900; margin-inline-end: 8px; }

/* Two columns */
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.lp-split img { border-radius: 18px; box-shadow: var(--shadow); display: block; }
.lp-box { background: linear-gradient(135deg, var(--primary-soft), #fff); border: 1px solid var(--border); border-radius: 20px; padding: 26px; }
@media (max-width: 860px) { .lp-split { grid-template-columns: 1fr; gap: 28px; } }

/* Tables (comparison, specs) */
.lp-content .table-wrap { overflow-x: auto; }
.lp-content table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; font-size: .93rem; }
.lp-content th, .lp-content td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: start; vertical-align: top; }
.lp-content tr:last-child td { border-bottom: 0; }
.lp-content th { background: var(--ink); color: #fff; font-weight: 700; }
.lp-content tbody tr:nth-child(even) td { background: #f8fafd; }
.lp-content details.lp-specs { background: #fff; border: 1px solid var(--border); border-radius: 18px; }
.lp-specs > summary, .lp-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; font-weight: 700; color: var(--ink); }
.lp-specs > summary::-webkit-details-marker, .lp-faq summary::-webkit-details-marker { display: none; }
.lp-specs > summary::after, .lp-faq summary::after { content: ""; width: 9px; height: 9px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; flex-shrink: 0; margin-top: -4px; }
.lp-specs[open] > summary::after, .lp-faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.lp-specs .table-wrap { padding: 0 14px 14px; }
.lp-specs table { border-radius: 12px; }
.lp-specs td:first-child { width: 40%; font-weight: 700; color: #123a63; background: var(--primary-soft) !important; }

/* FAQ */
.lp-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.lp-faq details { background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.lp-section.is-alt .lp-faq details { background: var(--bg); }
.lp-faq details > :not(summary) { margin: 0; padding: 0 20px 16px; color: #33435c; }

/* Call to action */
.lp-cta { margin: 0 var(--lp-gutter) 72px; padding: 44px 40px; border-radius: 24px; background: linear-gradient(135deg, #1560ff, #2343fa 55%, #011b82); color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.lp-cta h2 { color: #fff; margin: 0 0 6px; }
.lp-cta p { margin: 0; color: rgba(255, 255, 255, .85); }
@media (max-width: 640px) { .lp-cta { padding: 32px 22px; margin-bottom: 52px; } }
.lp-figure { margin: 0; }
.lp-figure img, .lp-content img.up-slot-empty { display: block; width: 100%; height: auto; border-radius: 18px; }
.lp-figure img { box-shadow: var(--shadow); }
.lp-figure figcaption { margin-top: 10px; font-size: .85rem; color: var(--muted); text-align: center; }
.lp-box > .lp-figure { margin: -6px -6px 18px; }
.lp-wide { margin-top: 28px; } .lp-section.is-tight > .lp-wide { margin-top: 0; }

/*
 * Colored heroes: <section class="lp-hero lp-hero--python"> etc. Each theme sets
 * --hero-a/--hero-b (background gradient), --hero-glow and --hero-accent (main
 * button, eyebrow dot) and --hero-on-accent (main button text). The theme is set
 * on .lp-content too (via :has) so the breadcrumb bar above the hero matches.
 */
.lp-hero--iran-host, .lp-content:has(> .lp-hero--iran-host) { --hero-a: #064e47; --hero-b: #0d9488; --hero-glow: rgba(45, 212, 191, .45); --hero-accent: #5eead4; --hero-on-accent: #053b36; }
.lp-hero--germany-host, .lp-content:has(> .lp-hero--germany-host) { --hero-a: #7c2d12; --hero-b: #ea580c; --hero-glow: rgba(251, 146, 60, .5); --hero-accent: #fed7aa; --hero-on-accent: #7c2d12; }
.lp-hero--wordpress, .lp-content:has(> .lp-hero--wordpress) { --hero-a: #0b3554; --hero-b: #21759b; --hero-glow: rgba(56, 189, 248, .45); --hero-accent: #7dd3fc; --hero-on-accent: #0b3554; }
.lp-hero--python, .lp-content:has(> .lp-hero--python) { --hero-a: #1b3a63; --hero-b: #3776ab; --hero-glow: rgba(255, 212, 59, .4); --hero-accent: #ffd43b; --hero-on-accent: #1b3a63; }
.lp-hero--cheap-host, .lp-content:has(> .lp-hero--cheap-host) { --hero-a: #14532d; --hero-b: #16a34a; --hero-glow: rgba(190, 242, 100, .45); --hero-accent: #d9f99d; --hero-on-accent: #14532d; }
.lp-hero--reseller, .lp-content:has(> .lp-hero--reseller) { --hero-a: #3b0764; --hero-b: #7c3aed; --hero-glow: rgba(232, 121, 249, .45); --hero-accent: #f0abfc; --hero-on-accent: #3b0764; }
.lp-hero--windows, .lp-content:has(> .lp-hero--windows) { --hero-a: #003a75; --hero-b: #0078d4; --hero-glow: rgba(0, 164, 239, .55); --hero-accent: #7fdbff; --hero-on-accent: #003a75; }
.lp-hero--vps-iran, .lp-content:has(> .lp-hero--vps-iran) { --hero-a: #020c0a; --hero-b: #064e3b; --hero-glow: rgba(52, 211, 153, .45); --hero-accent: #34d399; --hero-on-accent: #022c22; }
.lp-hero--vps-germany, .lp-content:has(> .lp-hero--vps-germany) { --hero-a: #0c0a09; --hero-b: #44200b; --hero-glow: rgba(251, 191, 36, .4); --hero-accent: #fbbf24; --hero-on-accent: #1c1917; }
.lp-hero--vps-finland, .lp-content:has(> .lp-hero--vps-finland) { --hero-a: #04102a; --hero-b: #1e3a8a; --hero-glow: rgba(147, 197, 253, .45); --hero-accent: #bae6fd; --hero-on-accent: #0c1f4d; }
.lp-hero--ssl, .lp-content:has(> .lp-hero--ssl) { --hero-a: #022c22; --hero-b: #047857; --hero-glow: rgba(253, 230, 138, .35); --hero-accent: #fde68a; --hero-on-accent: #022c22; }
.lp-hero--wp-support, .lp-content:has(> .lp-hero--wp-support) { --hero-a: #172554; --hero-b: #1d4ed8; --hero-glow: rgba(251, 146, 60, .4); --hero-accent: #fdba74; --hero-on-accent: #172554; }
.lp-hero--support, .lp-content:has(> .lp-hero--support) { --hero-a: #4c0519; --hero-b: #be123c; --hero-glow: rgba(251, 113, 133, .5); --hero-accent: #fecdd3; --hero-on-accent: #4c0519; }
.lp-hero--about, .lp-content:has(> .lp-hero--about) { --hero-a: #1e1b4b; --hero-b: #4f46e5; --hero-glow: rgba(165, 180, 252, .5); --hero-accent: #c7d2fe; --hero-on-accent: #1e1b4b; }
.lp-hero--terms, .lp-content:has(> .lp-hero--terms) { --hero-a: #0f172a; --hero-b: #334155; --hero-glow: rgba(148, 163, 184, .45); --hero-accent: #e2e8f0; --hero-on-accent: #0f172a; }
.lp-hero--affiliate, .lp-content:has(> .lp-hero--affiliate) { --hero-a: #451a03; --hero-b: #b45309; --hero-glow: rgba(252, 211, 77, .5); --hero-accent: #fde68a; --hero-on-accent: #451a03; }
.lp-hero--domain, .lp-content:has(> .lp-hero--domain) { --hero-a: #082f49; --hero-b: #0e7490; --hero-glow: rgba(103, 232, 249, .4); --hero-accent: #a5f3fc; --hero-on-accent: #082f49; }
.lp-hero--bot, .lp-content:has(> .lp-hero--bot) { --hero-a: #0b3150; --hero-b: #1d8fcf; --hero-glow: rgba(125, 211, 252, .42); --hero-accent: #bae6fd; --hero-on-accent: #0b3150; }
.lp-hero--free-host, .lp-content:has(> .lp-hero--free-host) { --hero-a: #064e3b; --hero-b: #059669; --hero-glow: rgba(110, 231, 183, .4); --hero-accent: #a7f3d0; --hero-on-accent: #064e3b; }
.lp-hero--nodejs, .lp-content:has(> .lp-hero--nodejs) { --hero-a: #10231a; --hero-b: #2f7d32; --hero-glow: rgba(155, 227, 122, .38); --hero-accent: #bef264; --hero-on-accent: #14280f; }
.lp-hero--download, .lp-content:has(> .lp-hero--download) { --hero-a: #4a044e; --hero-b: #a21caf; --hero-glow: rgba(240, 171, 252, .36); --hero-accent: #f0abfc; --hero-on-accent: #3b0a3f; }
.lp-hero--vps-usa, .lp-content:has(> .lp-hero--vps-usa) { --hero-a: #0b1324; --hero-b: #334a7d; --hero-glow: rgba(252, 165, 165, .32); --hero-accent: #fca5a5; --hero-on-accent: #3b0a0a; }

.lp-hero[class*="lp-hero--"] {
  background:
    radial-gradient(520px 340px at 12% 30%, var(--hero-glow), transparent 70%),
    radial-gradient(700px 420px at 100% 120%, rgba(255, 255, 255, .12), transparent 70%),
    linear-gradient(160deg, var(--hero-a) 0%, var(--hero-b) 100%);
  border-bottom: 0;
  color: #fff;
}
.lp-hero[class*="lp-hero--"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-position: 24px 16px;
  -webkit-mask-image: radial-gradient(ellipse 55% 85% at 22% 50%, #000 20%, rgba(0, 0, 0, .45) 58%, transparent 82%);
  mask-image: radial-gradient(ellipse 55% 85% at 22% 50%, #000 20%, rgba(0, 0, 0, .45) 58%, transparent 82%);
}
/* A motif per service, drawn as a faint tile behind the hero image. */
.lp-hero--iran-host::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cg fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='1'%3E%3Cpath d='M20 30H110' stroke-opacity='.22'/%3E%3Cpath d='M60 62H200' stroke-opacity='.14'/%3E%3Cpath d='M10 94H80' stroke-opacity='.25'/%3E%3Cpath d='M120 120H230' stroke-opacity='.18'/%3E%3Cpath d='M150 30H190' stroke-opacity='.12'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='0.5' stroke='none'%3E%3Ccircle cx='110' cy='30' r='2'/%3E%3Ccircle cx='80' cy='94' r='2'/%3E%3Ccircle cx='230' cy='120' r='2'/%3E%3C/g%3E%3C/svg%3E"); background-size: 240px 160px; }
.lp-hero--germany-host::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.14'%3E%3Cpath d='M28 66L0 50V16L28 0L56 16V50L28 66ZM28 66V100'/%3E%3C/g%3E%3C/svg%3E"); background-size: 56px 100px; }
.lp-hero--wordpress::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.2'%3E%3Ccircle cx='55' cy='55' r='30'/%3E%3Ccircle cx='55' cy='55' r='19'/%3E%3Ccircle cx='0' cy='0' r='19'/%3E%3Ccircle cx='110' cy='0' r='19'/%3E%3Ccircle cx='0' cy='110' r='19'/%3E%3Ccircle cx='110' cy='110' r='19'/%3E%3C/g%3E%3C/svg%3E"); background-size: 110px 110px; }
.lp-hero--python::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60' viewBox='0 0 160 60'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.2'%3E%3Cpath d='M0 22C26 2 54 2 80 22S134 42 160 22'/%3E%3Cpath d='M0 38C26 58 54 58 80 38S134 18 160 38' stroke-dasharray='2 5'/%3E%3C/g%3E%3C/svg%3E"); background-size: 160px 60px; }
.lp-hero--cheap-host::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.22'%3E%3Cpath d='M26 20V32M20 26H32'/%3E%3C/g%3E%3C/svg%3E"); background-size: 52px 52px; }
.lp-hero--reseller::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.17'%3E%3Cpath d='M75 75L25 30M75 75L130 40M75 75L40 125M75 75L125 120M25 30L0 50M130 40L150 50M130 40L120 0M40 125L50 150M125 120L150 100M25 30L30 0'/%3E%3Ccircle cx='75' cy='75' r='7'/%3E%3Ccircle cx='25' cy='30' r='4'/%3E%3Ccircle cx='130' cy='40' r='4'/%3E%3Ccircle cx='40' cy='125' r='4'/%3E%3Ccircle cx='125' cy='120' r='4'/%3E%3C/g%3E%3C/svg%3E"); background-size: 150px 150px; }
.lp-hero--windows::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.14'%3E%3Cpath d='M38 42L58 39V58H38ZM61 38.5L84 35V58H61ZM38 61H58V80L38 77ZM61 61H84V84L61 80.5Z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 120px 120px; }
.lp-hero--vps-iran::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='92' viewBox='0 0 200 92'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.14'%3E%3Crect x='10' y='8' width='150' height='20' rx='4'/%3E%3Crect x='10' y='36' width='150' height='20' rx='4'/%3E%3Cpath d='M110 13V23M116 13V23M122 13V23M128 13V23M134 13V23M110 41V51M116 41V51M122 41V51M128 41V51M134 41V51'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='0.45' stroke='none'%3E%3Ccircle cx='22' cy='18' r='2'/%3E%3Ccircle cx='31' cy='18' r='2'/%3E%3Ccircle cx='22' cy='46' r='2'/%3E%3Ccircle cx='31' cy='46' r='2'/%3E%3C/g%3E%3C/svg%3E"); background-size: 200px 92px; }
.lp-hero--vps-germany::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.14'%3E%3Cpath d='M30 0L60 17.32L30 34.64L0 17.32Z' fill='white' fill-opacity='.035'/%3E%3Cpath d='M0 0V52L30 69.28L60 52V0M30 34.64V104M0 86.6L30 69.28L60 86.6M0 86.6V104M60 86.6V104'/%3E%3C/g%3E%3C/svg%3E"); background-size: 60px 104px; }
.lp-hero--vps-finland::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='140' viewBox='0 0 240 140'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.2'%3E%3Cpath d='M0 70C40 30 80 30 120 70S200 110 240 70'/%3E%3Cpath d='M0 88C40 54 80 54 120 88S200 122 240 88' stroke-opacity='.6'/%3E%3Cpath d='M0 104C40 76 80 76 120 104S200 132 240 104' stroke-opacity='.35'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='0.5' stroke='none'%3E%3Ccircle cx='30' cy='18' r='1.3'/%3E%3Ccircle cx='92' cy='30' r='1.3'/%3E%3Ccircle cx='150' cy='12' r='1.3'/%3E%3Ccircle cx='210' cy='34' r='1.3'/%3E%3Ccircle cx='180' cy='4' r='1.3'/%3E%3C/g%3E%3C/svg%3E"); background-size: 240px 140px; }
.lp-hero--ssl::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.17'%3E%3Crect x='20' y='40' width='26' height='20' rx='4'/%3E%3Cpath d='M25 40V34A8 8 0 0 1 41 34V40'/%3E%3Ccircle cx='33' cy='48' r='2.4'/%3E%3Cpath d='M33 50.5V54'/%3E%3Crect x='84' y='94' width='20' height='16' rx='3'/%3E%3Cpath d='M88 94V89A6 6 0 0 1 100 89V94'/%3E%3C/g%3E%3C/svg%3E"); background-size: 130px 130px; }
.lp-hero--wp-support::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.15'%3E%3Ccircle cx='50' cy='52' r='15' stroke-width='6' stroke-dasharray='4.2 5.2'/%3E%3Ccircle cx='50' cy='52' r='11'/%3E%3Ccircle cx='50' cy='52' r='4'/%3E%3Ccircle cx='80' cy='80' r='10' stroke-width='5' stroke-dasharray='3.4 4.4'/%3E%3Ccircle cx='80' cy='80' r='7'/%3E%3Ccircle cx='80' cy='80' r='2.5'/%3E%3C/g%3E%3C/svg%3E"); background-size: 150px 150px; }
.lp-hero--support::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='140' viewBox='0 0 150 140'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.17'%3E%3Cpath d='M22 22H66A8 8 0 0 1 74 30V46A8 8 0 0 1 66 54H40L30 63V54H22A8 8 0 0 1 14 46V30A8 8 0 0 1 22 22Z'/%3E%3Cpath d='M96 78H128A7 7 0 0 1 135 85V99A7 7 0 0 1 128 106H124V114L114 106H96A7 7 0 0 1 89 99V85A7 7 0 0 1 96 78Z'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='0.4' stroke='none'%3E%3Ccircle cx='32' cy='38' r='2'/%3E%3Ccircle cx='44' cy='38' r='2'/%3E%3Ccircle cx='56' cy='38' r='2'/%3E%3C/g%3E%3C/svg%3E"); background-size: 150px 140px; }
.lp-hero--about::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.13'%3E%3Cpath transform='translate%28110 110%29 scale%280.35%29' d='M0 -60C40 -60 65 -30 60 0S30 60 0 58S-60 35 -58 0S-35 -60 0 -60Z' vector-effect='non-scaling-stroke'/%3E%3Cpath transform='translate%28110 110%29 scale%280.7%29' d='M0 -60C40 -60 65 -30 60 0S30 60 0 58S-60 35 -58 0S-35 -60 0 -60Z' vector-effect='non-scaling-stroke'/%3E%3Cpath transform='translate%28110 110%29 scale%281.05%29' d='M0 -60C40 -60 65 -30 60 0S30 60 0 58S-60 35 -58 0S-35 -60 0 -60Z' vector-effect='non-scaling-stroke'/%3E%3Cpath transform='translate%28110 110%29 scale%281.4%29' d='M0 -60C40 -60 65 -30 60 0S30 60 0 58S-60 35 -58 0S-35 -60 0 -60Z' vector-effect='non-scaling-stroke'/%3E%3Cpath transform='translate%280 0%29 scale%280.4%29' d='M0 -60C40 -60 65 -30 60 0S30 60 0 58S-60 35 -58 0S-35 -60 0 -60Z' vector-effect='non-scaling-stroke'/%3E%3Cpath transform='translate%280 0%29 scale%280.8%29' d='M0 -60C40 -60 65 -30 60 0S30 60 0 58S-60 35 -58 0S-35 -60 0 -60Z' vector-effect='non-scaling-stroke'/%3E%3Cpath transform='translate%280 220%29 scale%280.4%29' d='M0 -60C40 -60 65 -30 60 0S30 60 0 58S-60 35 -58 0S-35 -60 0 -60Z' vector-effect='non-scaling-stroke'/%3E%3Cpath transform='translate%280 220%29 scale%280.8%29' d='M0 -60C40 -60 65 -30 60 0S30 60 0 58S-60 35 -58 0S-35 -60 0 -60Z' vector-effect='non-scaling-stroke'/%3E%3Cpath transform='translate%28220 0%29 scale%280.4%29' d='M0 -60C40 -60 65 -30 60 0S30 60 0 58S-60 35 -58 0S-35 -60 0 -60Z' vector-effect='non-scaling-stroke'/%3E%3Cpath transform='translate%28220 0%29 scale%280.8%29' d='M0 -60C40 -60 65 -30 60 0S30 60 0 58S-60 35 -58 0S-35 -60 0 -60Z' vector-effect='non-scaling-stroke'/%3E%3Cpath transform='translate%28220 220%29 scale%280.4%29' d='M0 -60C40 -60 65 -30 60 0S30 60 0 58S-60 35 -58 0S-35 -60 0 -60Z' vector-effect='non-scaling-stroke'/%3E%3Cpath transform='translate%28220 220%29 scale%280.8%29' d='M0 -60C40 -60 65 -30 60 0S30 60 0 58S-60 35 -58 0S-35 -60 0 -60Z' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E"); background-size: 220px 220px; }
.lp-hero--terms::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='140' viewBox='0 0 150 140'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.16'%3E%3Cpath d='M22 16H56L68 28V80H22Z'/%3E%3Cpath d='M56 16V28H68'/%3E%3Cpath d='M30 38H58M30 47H60M30 56H54M30 65H58'/%3E%3Cpath d='M96 70H124L134 80V124H96Z' stroke-opacity='.6'/%3E%3Cpath d='M103 88H126M103 96H127M103 104H120' stroke-opacity='.6'/%3E%3C/g%3E%3C/svg%3E"); background-size: 150px 140px; }
.lp-hero--affiliate::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='130' viewBox='0 0 220 130'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.18'%3E%3Cpath d='M10 104L52 82L82 92L124 56L156 66L198 24'/%3E%3Cpath d='M186 24H198V36'/%3E%3Cpath d='M20 122V112M40 122V104M60 122V108M80 122V98' stroke-opacity='.5'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='0.45' stroke='none'%3E%3Ccircle cx='52' cy='82' r='2.4'/%3E%3Ccircle cx='82' cy='92' r='2.4'/%3E%3Ccircle cx='124' cy='56' r='2.4'/%3E%3Ccircle cx='156' cy='66' r='2.4'/%3E%3C/g%3E%3C/svg%3E"); background-size: 220px 130px; }
.lp-hero--domain::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='150' viewBox='0 0 170 150'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.17'%3E%3Ccircle cx='45' cy='45' r='22'/%3E%3Cellipse cx='45' cy='45' rx='9' ry='22'/%3E%3Cpath d='M23 45H67M27 33H63M27 57H63'/%3E%3Ccircle cx='125' cy='112' r='14' stroke-opacity='.6'/%3E%3Cellipse cx='125' cy='112' rx='6' ry='14' stroke-opacity='.6'/%3E%3Cpath d='M111 112H139' stroke-opacity='.6'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='0.4' stroke='none'%3E%3Ccircle cx='100' cy='40' r='1.6'/%3E%3Ccircle cx='108' cy='40' r='1.6'/%3E%3Ccircle cx='116' cy='40' r='1.6'/%3E%3Ccircle cx='30' cy='120' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); background-size: 170px 150px; }
.lp-hero--bot::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='150' viewBox='0 0 180 150'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.17'%3E%3Cpath d='M20 52L74 28L62 80L48 64L20 52Z'/%3E%3Cpath d='M74 28L48 64V80L56 70'/%3E%3Cpath d='M112 96H150A8 8 0 0 1 158 104V118A8 8 0 0 1 150 126H128L118 135V126H112A8 8 0 0 1 104 118V104A8 8 0 0 1 112 96Z' stroke-opacity='.6'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='0.4' stroke='none'%3E%3Ccircle cx='119' cy='111' r='1.8'/%3E%3Ccircle cx='131' cy='111' r='1.8'/%3E%3Ccircle cx='143' cy='111' r='1.8'/%3E%3Ccircle cx='130' cy='30' r='1.8'/%3E%3Ccircle cx='30' cy='120' r='1.8'/%3E%3C/g%3E%3C/svg%3E"); background-size: 180px 150px; }
.lp-hero--free-host::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='150' viewBox='0 0 170 150'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.17'%3E%3Crect x='22' y='38' width='44' height='34' rx='3'/%3E%3Cpath d='M18 30H70V38H18ZM44 30V72'/%3E%3Cpath d='M44 30C36 18 26 22 30 28M44 30C52 18 62 22 58 28'/%3E%3Crect x='112' y='100' width='30' height='24' rx='2' stroke-opacity='.6'/%3E%3Cpath d='M109 94H145V100H109ZM127 94V124' stroke-opacity='.6'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='0.4' stroke='none'%3E%3Ccircle cx='100' cy='40' r='1.6'/%3E%3Ccircle cx='110' cy='30' r='1.6'/%3E%3Ccircle cx='36' cy='120' r='1.6'/%3E%3Ccircle cx='150' cy='60' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); background-size: 170px 150px; }
.lp-hero--nodejs::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='150' viewBox='0 0 180 150'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.17'%3E%3Cpath d='M40 26C30 26 32 40 26 44C32 48 30 62 40 62M60 26C70 26 68 40 74 44C68 48 70 62 60 62'/%3E%3Cpath d='M118 104L106 116L118 128M146 104L158 116L146 128M136 100L128 132' stroke-opacity='.6'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='0.4' stroke='none'%3E%3Ccircle cx='50' cy='44' r='1.6'/%3E%3Ccircle cx='110' cy='40' r='1.6'/%3E%3Ccircle cx='120' cy='40' r='1.6'/%3E%3Ccircle cx='30' cy='120' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); background-size: 180px 150px; }
.lp-hero--download::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='150' viewBox='0 0 170 150'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.17'%3E%3Cpath d='M40 22V52M28 40L40 52L52 40M24 62H56'/%3E%3Cpath d='M120 88V114M110 104L120 114L130 104M106 124H134' stroke-opacity='.6'/%3E%3Cpath d='M96 30H138M96 38H124' stroke-opacity='.5'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='0.4' stroke='none'%3E%3Ccircle cx='70' cy='100' r='1.6'/%3E%3Ccircle cx='80' cy='100' r='1.6'/%3E%3Ccircle cx='90' cy='100' r='1.6'/%3E%3Ccircle cx='150' cy='40' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); background-size: 170px 150px; }
.lp-hero--vps-usa::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='150' viewBox='0 0 200 150'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.16'%3E%3Cpath d='M30 30L33.5 40.5H44.5L35.5 47L39 57.5L30 51L21 57.5L24.5 47L15.5 40.5H26.5Z'/%3E%3Cpath d='M90 100H190M90 112H190M90 124H190' stroke-opacity='.55'/%3E%3Crect x='120' y='22' width='56' height='36' rx='4' stroke-opacity='.6'/%3E%3Cpath d='M120 40H176' stroke-opacity='.6'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='0.45' stroke='none'%3E%3Ccircle cx='132' cy='31' r='1.6'/%3E%3Ccircle cx='142' cy='31' r='1.6'/%3E%3Ccircle cx='132' cy='49' r='1.6'/%3E%3Ccircle cx='142' cy='49' r='1.6'/%3E%3Ccircle cx='40' cy='120' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); background-size: 200px 150px; }
.lp-hero[class*="lp-hero--"]::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 420px; height: 420px; border-radius: 50%; inset-inline-end: -140px; top: -180px;
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 0 0 60px rgba(255, 255, 255, .03), 0 0 0 120px rgba(255, 255, 255, .02);
}
.lp-hero[class*="lp-hero--"] h1 { color: #fff; }
.lp-hero[class*="lp-hero--"] .lp-hero-copy > p { color: rgba(255, 255, 255, .86); }
.lp-hero[class*="lp-hero--"] .lp-hero-copy a:not(.lp-btn) { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.lp-hero[class*="lp-hero--"] .lp-eyebrow { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); backdrop-filter: blur(4px); }
.lp-hero[class*="lp-hero--"] .lp-eyebrow::before { background: var(--hero-accent); box-shadow: 0 0 10px var(--hero-accent); }
.lp-hero[class*="lp-hero--"] .lp-facts li { border-color: rgba(255, 255, 255, .22); }
.lp-hero[class*="lp-hero--"] .lp-facts strong { color: #fff; }
.lp-hero[class*="lp-hero--"] .lp-facts span { color: rgba(255, 255, 255, .72); }
.lp-hero[class*="lp-hero--"] .lp-actions .lp-btn { background: var(--hero-accent); color: var(--hero-on-accent); box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55); }
.lp-hero[class*="lp-hero--"] .lp-actions .lp-btn:hover { background: #fff; color: var(--hero-on-accent); transform: translateY(-1px); }
.lp-hero[class*="lp-hero--"] .lp-actions .lp-btn.is-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); box-shadow: none; }
.lp-hero[class*="lp-hero--"] .lp-actions .lp-btn.is-ghost:hover { background: #fff; color: var(--hero-a); border-color: #fff; }
.lp-hero[class*="lp-hero--"] .lp-hero-card { border: 0; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); }
/* The breadcrumb bar sits on top of the colored hero instead of above it. */
.lp-content:has(> .lp-hero[class*="lp-hero--"]) > .lp-crumbs { position: relative; z-index: 1; height: 44px; margin-bottom: -44px; background: transparent; color: rgba(255, 255, 255, .7); }
.lp-crumbs + .lp-hero[class*="lp-hero--"] { padding-top: 96px; }
@media (max-width: 900px) { .lp-crumbs + .lp-hero[class*="lp-hero--"] { padding-top: 68px; } }
.lp-content:has(> .lp-hero[class*="lp-hero--"]) > .lp-crumbs a { color: rgba(255, 255, 255, .85); }

/* Hero image in place of the price card (slot hero-*.webp, 720x600) */
.lp-hero-media { position: relative; margin: 0; justify-self: end; width: 100%; max-width: 520px; }
.lp-hero-media::before { content: ""; position: absolute; inset: 10% 8%; z-index: -1; border-radius: 50%; background: var(--hero-glow, rgba(21, 96, 255, .25)); filter: blur(60px); }
.lp-hero-media img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }
.lp-hero-media img.up-slot-empty { border-radius: 22px; filter: none; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); }
@media (max-width: 900px) { .lp-hero-media { justify-self: center; max-width: 420px; } }
