/* ==========================================================================
   Hosternet — WordPress Showcase + Redesigned Comparison Cards
   ========================================================================== */

/* ===== WP/Woo Showcase ===== */
.wp-showcase{display:grid;grid-template-columns:1.5fr 1fr;gap:1.5rem;align-items:stretch}
.wp-stage{position:relative}
.wp-browser{background:var(--bg-dark);border:1px solid var(--border-strong);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg),0 0 0 1px rgba(61,224,131,0.08);height:100%;display:flex;flex-direction:column}
.wp-browser-bar{display:flex;align-items:center;gap:0.75rem;padding:0.7rem 1rem;background:rgba(5,8,7,0.6);border-bottom:1px solid var(--border)}
.wp-browser-dots{display:flex;gap:0.35rem}
.wp-browser-dots span{width:9px;height:9px;border-radius:50%;background:var(--bg-light)}
.wp-browser-dots span:nth-child(1){background:#ef4444;opacity:0.6}
.wp-browser-dots span:nth-child(2){background:#eab308;opacity:0.6}
.wp-browser-dots span:nth-child(3){background:var(--primary);opacity:0.8}
.wp-browser-url{flex:1;display:flex;align-items:center;gap:0.4rem;background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--r-pill);padding:0.32rem 0.85rem;font-family:var(--font-mono);font-size:0.74rem;color:var(--text-muted);direction:ltr;max-width:340px}
.wp-lock{color:var(--primary);display:flex;align-items:center}
.wp-browser-badge{font-family:var(--font-mono);font-size:0.6rem;color:var(--primary-bright);letter-spacing:0.2em;padding:0.2rem 0.5rem;border:1px solid var(--border-strong);border-radius:var(--r-xs)}
.wp-browser-body{position:relative;flex:1;min-height:340px;background:var(--bg-void);overflow:hidden}
/* faux site skeleton */
.wp-site{padding:1.25rem;opacity:0.25;transition:opacity 0.8s var(--ease-quiet)}
.wp-site.loaded{opacity:1}
.wp-site-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.wp-site-logo{width:90px;height:18px;background:var(--bg-light);border-radius:3px}
.wp-site-nav{display:flex;gap:0.5rem}
.wp-site-nav span{width:38px;height:8px;background:var(--bg-elevated);border-radius:2px}
.wp-site-hero{text-align:center;margin-bottom:1.5rem}
.wp-site-hero-title{width:60%;height:22px;background:var(--primary-dim);border-radius:4px;margin:0 auto 0.6rem}
.wp-site-hero-sub{width:40%;height:10px;background:var(--bg-elevated);border-radius:3px;margin:0 auto 0.8rem}
.wp-site-hero-btn{width:110px;height:26px;background:var(--primary);border-radius:var(--r-sm);margin:0 auto}
.wp-posts{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.wp-post{background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--r-sm);padding:0.6rem;overflow:hidden}
.wp-post-img{width:100%;height:60px;background:linear-gradient(135deg,var(--bg-elevated),var(--bg-light));border-radius:var(--r-xs);margin-bottom:0.5rem}
.wp-post-line{height:8px;background:var(--bg-elevated);border-radius:2px;margin-bottom:0.3rem}
.wp-post-line.w1{width:80%}.wp-post-line.w2{width:50%}
.wp-products{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.6rem}
.wp-product{background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--r-sm);padding:0.5rem;overflow:hidden;text-align:center}
.wp-product-img{width:100%;aspect-ratio:1;background:linear-gradient(135deg,var(--bg-elevated),var(--primary-soft));border-radius:var(--r-xs);margin-bottom:0.4rem}
.wp-product-name{height:8px;background:var(--bg-elevated);border-radius:2px;margin:0 auto 0.3rem;width:70%}
.wp-product-price{height:10px;background:var(--primary-dim);border-radius:2px;margin:0 auto 0.4rem;width:50%}
.wp-product-cart{height:18px;background:var(--primary);border-radius:var(--r-xs);width:100%}
/* speed overlay */
.wp-load-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(5,8,7,0.75);backdrop-filter:blur(4px);transition:opacity 0.5s,visibility 0.5s;z-index:5}
.wp-load-overlay.done{opacity:0;visibility:hidden}
.wp-speed-ring{position:relative;width:110px;height:110px}
.wp-speed-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.wp-speed-track{fill:none;stroke:var(--bg-light);stroke-width:6}
.wp-speed-arc{fill:none;stroke:var(--primary);stroke-width:6;stroke-linecap:round;stroke-dasharray:326.7 326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset 0.3s linear;filter:drop-shadow(0 0 6px rgba(61,224,131,0.6))}
.wp-speed-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-mono)}
.wp-speed-val span{font-size:1.7rem;font-weight:600;color:#fff;line-height:1}
.wp-speed-val small{font-size:0.7rem;color:var(--text-dim);margin-top:2px}
.wp-speed-label{margin-top:0.75rem;font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.25em;color:var(--primary-bright);text-transform:uppercase}

/* metrics column */
.wp-metrics{display:flex;flex-direction:column;gap:0.75rem}
.wp-metric{display:flex;align-items:center;gap:0.9rem;background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--r-md);padding:1rem 1.1rem;transition:border-color 0.3s,transform 0.3s}
.wp-metric:hover{border-color:var(--primary);transform:translateX(-3px)}
.wp-metric-icon{width:42px;height:42px;flex-shrink:0;border-radius:var(--r-sm);background:var(--primary-soft);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;color:var(--primary)}
.wp-metric-body{flex:1;min-width:0}
.wp-metric-num{font-family:var(--font-mono);font-size:1.15rem;font-weight:600;color:#fff;line-height:1.2}
.wp-metric-num small{font-size:0.65em;color:var(--text-dim);margin-inline-start:0.15em}
.wp-metric-label{font-size:0.74rem;color:var(--text-dim);margin-top:0.2rem}
.wp-metric-spark{width:64px;height:24px;flex-shrink:0}
.wp-metric-spark svg{width:100%;height:100%}

/* plugins */
.wp-plugins{margin-top:0.5rem;background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--r-md);padding:1rem 1.1rem}
.wp-plugins-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem}
.wp-plugins-title{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.2em;color:var(--primary-bright);text-transform:uppercase}
.wp-plugins-meta{font-family:var(--font-mono);font-size:0.62rem;color:var(--text-dim);letter-spacing:0.1em}
.wp-plugins-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
.wp-plugin{display:flex;align-items:center;gap:0.5rem;font-size:0.78rem;color:var(--text);font-family:var(--font-mono)}
.wp-plugin-dot{width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 4px var(--primary);flex-shrink:0;transition:transform 0.3s,box-shadow 0.3s}
.wp-plugin-dot.pulse{transform:scale(1.8);box-shadow:0 0 12px var(--primary),0 0 20px rgba(61,224,131,0.4)}

/* ===== Redesigned Comparison (interactive plan cards) ===== */
.plans-compare{position:relative}
.plans-compare-head{text-align:center;margin-bottom:3rem}
.plans-compare-head h2{font-size:clamp(1.8rem,3.6vw,2.8rem);margin:1rem 0}
.plans-compare-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;align-items:stretch}
/* individual plan card (premium redesign) */
.pc-card{position:relative;background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.75rem 1.5rem;display:flex;flex-direction:column;gap:1rem;transition:all 0.45s var(--ease-quiet)}
.pc-card::before{content:'';position:absolute;top:0;inset-inline:0;height:3px;background:linear-gradient(90deg,transparent,var(--primary),transparent);opacity:0;transition:opacity 0.4s;border-radius:var(--r-lg) var(--r-lg) 0 0}
.pc-card:hover{border-color:var(--primary);transform:translateY(-6px);box-shadow:var(--shadow-lg),0 0 40px -10px rgba(61,224,131,0.3)}
.pc-card:hover::before{opacity:1}
.pc-card.featured{background:linear-gradient(180deg,var(--bg-mid) 0%,rgba(61,224,131,0.05) 100%);border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),var(--glow-soft)}
.pc-card.featured::before{opacity:1;background:var(--primary)}
.pc-badge{display:inline-block;background:var(--primary);color:var(--bg-void);font-size:0.66rem;font-weight:700;padding:0.32rem 0.8rem;border-radius:var(--r-pill);letter-spacing:0.08em;box-shadow:0 4px 12px rgba(61,224,131,0.4);margin-bottom:0.6rem;align-self:flex-start}
.pc-rank{font-family:var(--font-mono);font-size:0.7rem;color:var(--text-dim);letter-spacing:0.2em}
.pc-head{padding-top:0}
.pc-tag{font-family:var(--font-mono);font-size:0.64rem;color:var(--primary-bright);letter-spacing:0.22em;text-transform:uppercase;direction:ltr;margin-bottom:0.3rem}
.pc-name{font-size:1.4rem;font-weight:800;color:#fff;letter-spacing:-0.02em}
.pc-desc{font-size:0.82rem;color:var(--text-dim);margin-top:0.4rem;line-height:1.6;min-height:2.6em}
.pc-price{display:flex;align-items:baseline;gap:0.4rem;padding:1rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.pc-price .amount{font-family:var(--font-mono);font-size:2.1rem;font-weight:600;color:#fff;letter-spacing:-0.03em;line-height:1;direction:ltr}
.pc-price .unit{font-size:0.74rem;color:var(--text-dim)}
.pc-price .old{font-size:0.82rem;color:var(--text-dim);text-decoration:line-through;margin-inline-start:0.4rem;direction:ltr}
.pc-features{list-style:none;display:flex;flex-direction:column;gap:0.6rem;flex:1}
.pc-features li{display:flex;align-items:flex-start;gap:0.55rem;font-size:0.85rem;color:var(--text);line-height:1.5}
.pc-features li svg{width:15px;height:15px;flex-shrink:0;color:var(--primary);margin-top:2px}
.pc-features li.disabled{color:var(--text-dim);opacity:0.5}
.pc-features li.disabled svg{color:var(--text-dim)}
.pc-cta{display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.95rem 1.2rem;border:1px solid var(--border-strong);border-radius:var(--r-sm);font-size:0.95rem;font-weight:600;color:var(--text);transition:all 0.35s var(--ease-quiet);position:relative;overflow:hidden}
.pc-cta svg{width:16px;height:16px;transition:transform 0.3s}
.pc-cta:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-bright)}
.pc-cta:hover svg{transform:translateX(-4px)}
.pc-card.featured .pc-cta{background:var(--primary);color:var(--bg-void);border-color:var(--primary);font-weight:700;box-shadow:0 8px 24px -8px rgba(61,224,131,0.5)}
.pc-card.featured .pc-cta::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.3) 50%,transparent 70%);transform:translateX(-120%);transition:transform 0.6s var(--ease-quiet)}
.pc-card.featured .pc-cta:hover::after{transform:translateX(120%)}
.pc-card.featured .pc-cta:hover{background:var(--primary-bright)}
/* explicit primary variant on .pc-cta (used on web-design packages) */
.pc-cta.primary{background:var(--primary);color:var(--bg-void);border-color:var(--primary);font-weight:700;box-shadow:0 8px 24px -8px rgba(61,224,131,0.5);position:relative;overflow:hidden}
.pc-cta.primary::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.3) 50%,transparent 70%);transform:translateX(-120%);transition:transform 0.6s var(--ease-quiet)}
.pc-cta.primary:hover::after{transform:translateX(120%)}
.pc-cta.primary:hover{background:var(--primary-bright)}
.pc-note{text-align:center;font-size:0.76rem;color:var(--text-dim);margin-top:1.5rem}

/* comparison detail toggle (expandable feature matrix) */
.pc-detail-toggle{text-align:center;margin-top:2rem}
.pc-detail-toggle button{display:inline-flex;align-items:center;gap:0.5rem;padding:0.7rem 1.4rem;background:var(--bg-mid);border:1px solid var(--border-strong);border-radius:var(--r-pill);color:var(--text);font-size:0.88rem;cursor:pointer;transition:all 0.3s}
.pc-detail-toggle button:hover{border-color:var(--primary);color:var(--primary-bright)}
.pc-detail-toggle button svg{width:16px;height:16px;transition:transform 0.3s}
.pc-detail-toggle.open button svg{transform:rotate(180deg)}
.pc-detail{max-height:0;overflow:hidden;transition:max-height 0.6s var(--ease-quiet);margin-top:2rem}
.pc-detail.open{max-height:2000px}
.pc-detail-inner{background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.pc-detail-inner table{width:100%;border-collapse:collapse;font-size:0.88rem}
.pc-detail-inner th,.pc-detail-inner td{padding:0.85rem 1rem;text-align:center;border-bottom:1px solid var(--border)}
.pc-detail-inner th:first-child,.pc-detail-inner td:first-child{text-align:start;color:var(--text);font-weight:500}
.pc-detail-inner thead th{background:var(--bg-dark);color:#fff;font-weight:700;font-size:0.85rem}
.pc-detail-inner thead th.hl{background:var(--primary-soft);color:var(--primary-bright)}
.pc-detail-inner tbody td.hl{background:var(--primary-soft)}
.pc-detail-inner .yes{color:var(--primary)}
.pc-detail-inner .no{color:var(--text-dim)}
.pc-detail-inner .yes svg,.pc-detail-inner .no svg{width:16px;height:16px;vertical-align:middle}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .wp-showcase{grid-template-columns:1fr}
  .plans-compare-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .wp-showcase{grid-template-columns:1fr}
  .plans-compare-grid{grid-template-columns:1fr}
  .wp-products{grid-template-columns:1fr 1fr}
  .wp-plugins-grid{grid-template-columns:1fr}
  .wp-browser-url{font-size:0.65rem}
}

/* ===== Comparison: Real Table with rows/columns, hover, price + order ===== */
.cmp-table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--border-strong);background:var(--bg-mid);box-shadow:var(--shadow-md);-webkit-overflow-scrolling:touch}
.cmp-table{width:100%;border-collapse:collapse;min-width:680px}
.cmp-table th,.cmp-table td{padding:1rem 0.85rem;text-align:center;border-bottom:1px solid var(--border);border-inline-start:1px solid var(--border);transition:background 0.25s,box-shadow 0.25s;vertical-align:middle}
.cmp-table th:first-child,.cmp-table td:first-child{border-inline-start:none;text-align:start}
.cmp-table thead th{background:var(--bg-dark);position:sticky;top:0;z-index:2;border-bottom:2px solid var(--border-strong)}
.cmp-table .cmp-feat-col{font-weight:600;color:var(--text);background:var(--bg-dark);text-align:start;width:180px;min-width:140px}
/* plan column headers */
.cmp-plan-col{color:var(--text)}
.cmp-plan-col.featured{background:var(--primary-soft)}
.cmp-plan-name{font-size:1.05rem;font-weight:700;color:#fff}
th.cmp-plan-col.featured .cmp-plan-name{color:var(--primary-bright)}
.cmp-table-badge{display:inline-block;background:var(--primary);color:var(--bg-void);font-size:0.6rem;font-weight:700;padding:0.22rem 0.6rem;border-radius:var(--r-pill);letter-spacing:0.06em;margin-bottom:0.4rem;box-shadow:0 3px 10px rgba(61,224,131,0.35)}
/* price row */
.cmp-price-row td{background:var(--bg-dark);border-bottom:2px solid var(--border-strong)}
.cmp-price-row .cmp-plan-col.featured{background:var(--primary-soft)}
.cmp-table-price{font-family:var(--font-mono);font-size:1.3rem;font-weight:700;color:#fff;line-height:1;direction:ltr}
.cmp-plan-col.featured .cmp-table-price{color:var(--primary-bright)}
.cmp-table-unit{font-size:0.66rem;color:var(--text-dim);margin-top:0.25rem}
/* feature rows */
.cmp-feat-row td{font-size:0.88rem;color:var(--text)}
.cmp-feat-row.alt td{background:rgba(255,255,255,0.012)}
.cmp-yes{color:var(--primary);display:inline-flex;align-items:center;justify-content:center}
.cmp-yes svg{width:18px;height:18px}
.cmp-no{color:var(--text-dim);font-size:1.1rem}
.cmp-val{color:#fff;font-weight:500;font-family:var(--font-mono);font-size:0.84rem;direction:ltr}
/* hover: highlight entire column */
.cmp-table tbody tr:hover .cmp-plan-col{background:rgba(61,224,131,0.04)}
.cmp-table tbody tr:hover .cmp-plan-col.featured{background:rgba(61,224,131,0.12)}
/* order row */
.cmp-order-row td{background:var(--bg-dark);border-top:2px solid var(--border-strong);border-bottom:none;padding:1.2rem 0.85rem}
.cmp-order-row .cmp-plan-col.featured{background:var(--primary-soft)}
.cmp-table-cta{display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.7rem 1.2rem;border:1px solid var(--border-strong);border-radius:var(--r-sm);font-size:0.85rem;font-weight:600;color:var(--text);transition:all 0.3s var(--ease-quiet);white-space:nowrap;background:transparent}
.cmp-table-cta svg{width:14px;height:14px;transition:transform 0.3s}
.cmp-table-cta:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-bright);transform:translateY(-2px)}
.cmp-table-cta:hover svg{transform:translateX(-3px)}
.cmp-table-cta.primary{background:var(--primary);color:var(--bg-void);border-color:var(--primary);font-weight:700;box-shadow:0 6px 18px -6px rgba(61,224,131,0.5)}
.cmp-table-cta.primary:hover{background:var(--primary-bright);transform:translateY(-2px);box-shadow:0 10px 28px -8px rgba(61,224,131,0.6)}
/* mobile: horizontal scroll with hint */
@media (max-width:680px){
  .cmp-table-wrap{position:relative}
  .cmp-table-wrap::after{content:'← اسکرول →';position:absolute;bottom:0.5rem;inset-inline-start:50%;transform:translateX(50%);font-family:var(--font-mono);font-size:0.65rem;color:var(--text-dim);pointer-events:none;opacity:0.6}
}

/* ===== FAQ page redesign ===== */
.faq-hero-stats{display:flex;gap:2rem;flex-wrap:wrap;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border)}
.faq-hero-stat{display:flex;flex-direction:column;gap:0.3rem}
.faq-hero-stat .v{font-family:var(--font-mono);font-size:1.6rem;color:var(--primary);font-weight:600}
.faq-hero-stat .l{font-size:0.78rem;color:var(--text-dim)}
.faq-cat-pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.6rem 1.1rem;border:1px solid var(--border);border-radius:var(--r-pill);font-size:0.85rem;color:var(--text-muted);transition:all 0.3s;cursor:pointer;background:var(--bg-mid)}
.faq-cat-pill:hover,.faq-cat-pill.active{border-color:var(--primary);color:var(--primary-bright);background:var(--primary-soft)}
.faq-cat-pill .count{font-family:var(--font-mono);font-size:0.72rem;background:var(--bg-light);padding:0.1rem 0.4rem;border-radius:var(--r-xs);color:var(--text-dim)}
.faq-cat-pill.active .count{background:var(--primary);color:var(--bg-void)}
.faq-cats-pills{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:2rem}
.faq-item{background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;transition:all 0.3s}
.faq-item:hover{border-color:var(--border-strong)}
.faq-item.open{border-color:var(--primary);box-shadow:0 0 30px -10px rgba(61,224,131,0.2)}
.faq-item-q{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.5rem;cursor:pointer;font-size:0.98rem;font-weight:600;color:var(--text-strong);transition:color 0.3s}
.faq-item-q:hover{color:var(--primary-bright)}
.faq-item-icon{width:32px;height:32px;flex-shrink:0;border:1px solid var(--border-strong);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--primary);transition:all 0.4s var(--ease-quiet)}
.faq-item.open .faq-item-icon{transform:rotate(180deg);background:var(--primary);color:var(--bg-void);border-color:var(--primary)}
.faq-item-icon svg{width:16px;height:16px}
.faq-item-a{max-height:0;overflow:hidden;transition:max-height 0.5s var(--ease-quiet)}
.faq-item-a-inner{padding:0 1.5rem 1.4rem;color:var(--text-muted);line-height:1.85;font-size:0.92rem}
.faq-item-tag{display:inline-block;font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.15em;color:var(--primary-bright);text-transform:uppercase;margin-bottom:0.5rem;padding:0.2rem 0.5rem;border:1px solid var(--border-strong);border-radius:var(--r-xs)}

/* ===== Product page showcase animations (generic) ===== */
.prod-showcase{display:grid;grid-template-columns:1.2fr 1fr;gap:1.5rem;align-items:stretch}
.prod-stage{position:relative;background:var(--bg-dark);border:1px solid var(--border-strong);border-radius:var(--r-lg);overflow:hidden;min-height:340px;box-shadow:var(--shadow-lg)}
.prod-stage-canvas{position:absolute;inset:0;width:100%;height:100%}
.prod-stage-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;pointer-events:none}
.prod-stage-label{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.2em;color:var(--primary-bright);text-transform:uppercase;margin-bottom:0.3rem}
.prod-stage-title{font-size:1.3rem;font-weight:700;color:#fff}
.prod-metrics{display:flex;flex-direction:column;gap:0.75rem}
.prod-metric{display:flex;align-items:center;gap:0.9rem;background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--r-md);padding:1rem 1.1rem;transition:all 0.3s}
.prod-metric:hover{border-color:var(--primary);transform:translateX(-3px)}
.prod-metric-icon{width:40px;height:40px;flex-shrink:0;border-radius:var(--r-sm);background:var(--primary-soft);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;color:var(--primary)}
.prod-metric-icon svg{width:20px;height:20px}
.prod-metric-body{flex:1}
.prod-metric-num{font-family:var(--font-mono);font-size:1.1rem;font-weight:600;color:#fff;line-height:1.2}
.prod-metric-num small{font-size:0.65em;color:var(--text-dim);margin-inline-start:0.15em}
.prod-metric-label{font-size:0.74rem;color:var(--text-dim);margin-top:0.2rem}
.prod-metric-bar{width:50px;height:3px;background:var(--bg-light);border-radius:2px;overflow:hidden;flex-shrink:0}
.prod-metric-bar-fill{height:100%;background:var(--primary);border-radius:2px;transition:width 1s var(--ease-quiet);box-shadow:0 0 6px var(--primary)}
@media (max-width:768px){.prod-showcase{grid-template-columns:1fr}}

/* ===== Security Showcase ===== */
.sec-showcase{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch}
.sec-stage{position:relative;background:var(--bg-dark);border:1px solid var(--border-strong);border-radius:var(--r-lg);overflow:hidden;min-height:400px;aspect-ratio:1/1;box-shadow:var(--shadow-lg)}
.sec-canvas{position:absolute;inset:0;width:100%;height:100%}
.sec-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:2;pointer-events:none}
.sec-shield{color:var(--primary);margin-bottom:0.5rem;filter:drop-shadow(0 0 12px rgba(61,224,131,0.5))}
.sec-shield svg{width:48px;height:48px}
.sec-score{font-family:var(--font-mono);font-size:2rem;font-weight:700;color:#fff;line-height:1}
.sec-score small{font-size:0.5em;color:var(--text-dim);margin-inline-start:0.15em}
.sec-score-label{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.25em;color:var(--primary-bright);text-transform:uppercase;margin-top:0.3rem}
.sec-info{display:flex;flex-direction:column;gap:1rem}
.sec-layers{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem}
.sec-layer{display:flex;flex-direction:column;align-items:center;gap:0.3rem;padding:0.85rem;background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--r-sm);text-align:center;transition:all 0.3s var(--ease-quiet)}
.sec-layer.pulse{border-color:var(--primary);box-shadow:0 0 20px -4px rgba(61,224,131,0.4);transform:translateY(-2px)}
.sec-layer-icon{width:34px;height:34px;border-radius:var(--r-sm);background:var(--primary-soft);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;color:var(--primary)}
.sec-layer-name{font-size:0.82rem;font-weight:600;color:#fff}
.sec-layer-status{font-family:var(--font-mono);font-size:0.58rem;letter-spacing:0.15em;color:var(--primary);text-transform:uppercase}
.sec-threats{background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--r-md);padding:1rem 1.1rem}
.sec-threats-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem}
.sec-threats-title{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.2em;color:var(--primary-bright);text-transform:uppercase}
.sec-threats-count{font-family:var(--font-mono);font-size:1.1rem;font-weight:600;color:#fff}
.sec-threats-list{display:flex;flex-direction:column;gap:0.4rem;max-height:140px;overflow:hidden}
.sec-threat-item{display:flex;align-items:center;gap:0.5rem;padding:0.35rem 0.5rem;background:var(--bg-dark);border-radius:var(--r-xs);font-size:0.76rem;animation:threatIn 0.4s var(--ease-quiet)}
@keyframes threatIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.sec-threat-blocked{color:var(--primary);font-weight:700}
.sec-threat-name{color:var(--text);flex:1;font-family:var(--font-mono)}
.sec-threat-time{color:var(--text-dim);font-size:0.68rem}
@media (max-width:768px){.sec-showcase{grid-template-columns:1fr}}

/* ===== Premium Plugins Gift Section (enhanced, animated) ===== */
.gift-section{position:relative;padding:7rem 0;background:linear-gradient(180deg,var(--bg-void) 0%,var(--bg-mid) 100%);overflow:hidden}
.gift-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(61,224,131,0.12),transparent 60%);pointer-events:none}
.gift-section::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(61,224,131,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(61,224,131,0.03) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 50% 50% at center,black 15%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 50% 50% at center,black 15%,transparent 70%);pointer-events:none}
.gift-inner{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:0 2rem}
.gift-head{text-align:center;margin-bottom:3.5rem}
.gift-head h2{font-size:clamp(2rem,4vw,3.2rem);margin:1rem 0}
.gift-banner{display:flex;align-items:center;justify-content:center;gap:1.25rem;background:linear-gradient(120deg,var(--primary-dim),rgba(61,224,131,0.04));border:1px solid var(--primary);border-radius:var(--r-lg);padding:1.75rem 2rem;margin-bottom:3rem;text-align:start;box-shadow:var(--glow-soft);position:relative;overflow:hidden}
.gift-banner::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(61,224,131,0.06),transparent);transform:translateX(-100%);animation:giftShine 4s ease-in-out infinite}
@keyframes giftShine{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}
.gift-banner-icon{width:60px;height:60px;border-radius:var(--r-md);background:var(--primary);color:var(--bg-void);display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:giftPulse 2s ease-in-out infinite;box-shadow:0 8px 24px -6px rgba(61,224,131,0.5)}
.gift-banner-icon svg{width:30px;height:30px}
@keyframes giftPulse{0%,100%{transform:scale(1);box-shadow:0 8px 24px -6px rgba(61,224,131,0.5),0 0 0 0 rgba(61,224,131,0.4)}50%{transform:scale(1.06);box-shadow:0 12px 32px -6px rgba(61,224,131,0.6),0 0 0 16px rgba(61,224,131,0)}}
.gift-banner-text{flex:1}
.gift-banner-title{font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:0.4rem}
.gift-banner-desc{font-size:0.92rem;color:var(--text-muted);line-height:1.7}
.gift-banner-desc strong{color:var(--primary-bright);font-weight:600}
.gift-banner-value{font-family:var(--font-mono);font-size:1.1rem;font-weight:700;color:var(--primary-bright);white-space:nowrap}
.gift-plugins{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-bottom:2rem}
.gift-plugin{position:relative;background:var(--bg-dark);border:1px solid var(--border);border-radius:var(--r-md);padding:1.35rem 1rem;text-align:center;transition:all 0.4s var(--ease-quiet);overflow:hidden}
.gift-plugin::before{content:'';position:absolute;top:0;inset-inline:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);opacity:0;transition:opacity 0.4s}
.gift-plugin::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(61,224,131,0.08),transparent 60%);opacity:0;transition:opacity 0.4s;pointer-events:none}
.gift-plugin:hover{border-color:var(--primary);transform:translateY(-5px);box-shadow:var(--shadow-md),0 0 30px -8px rgba(61,224,131,0.25)}
.gift-plugin:hover::before{opacity:1}
.gift-plugin:hover::after{opacity:1}
.gift-plugin-badge{display:inline-block;font-family:var(--font-mono);font-size:0.52rem;letter-spacing:0.12em;color:var(--bg-void);background:var(--primary);padding:0.18rem 0.5rem;border-radius:var(--r-xs);text-transform:uppercase;margin-bottom:0.6rem;font-weight:600}
.gift-plugin-icon{width:48px;height:48px;margin:0 auto 0.75rem;border-radius:var(--r-md);background:var(--primary-soft);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;color:var(--primary);transition:transform 0.4s var(--ease-quiet)}
.gift-plugin:hover .gift-plugin-icon{transform:scale(1.1) rotate(-3deg)}
.gift-plugin-icon svg{width:24px;height:24px}
.gift-plugin-name{font-size:0.88rem;font-weight:600;color:#fff;margin-bottom:0.3rem}
.gift-plugin-desc{font-size:0.72rem;color:var(--text-dim);line-height:1.5;min-height:2.4em}
.gift-plugin-price{font-family:var(--font-mono);font-size:0.72rem;color:var(--text-dim);margin-top:0.6rem;text-decoration:line-through}
.gift-plugin-free{font-family:var(--font-mono);font-size:0.82rem;color:var(--primary-bright);font-weight:700;margin-top:0.2rem;display:inline-flex;align-items:center;gap:0.2rem}
.gift-plugin-free::before{content:'✓';color:var(--primary)}
.gift-sms{background:linear-gradient(135deg,var(--bg-dark),var(--bg-mid));border:1px solid var(--primary);border-radius:var(--r-lg);padding:1.75rem;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;justify-content:space-between;position:relative;overflow:hidden;box-shadow:var(--glow-soft)}
.gift-sms::before{content:'';position:absolute;top:0;inset-inline:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent)}
.gift-sms-info{flex:1;min-width:240px}
.gift-sms-title{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:0.4rem}
.gift-sms-desc{font-size:0.86rem;color:var(--text-muted);line-height:1.7}
.gift-sms-badge{display:inline-flex;align-items:center;gap:0.4rem;background:var(--primary);color:var(--bg-void);font-size:0.75rem;font-weight:700;padding:0.45rem 0.95rem;border-radius:var(--r-pill);margin-top:0.6rem;box-shadow:0 4px 12px -3px rgba(61,224,131,0.4)}
.gift-sms-badge svg{width:14px;height:14px}
.gift-note{text-align:center;margin-top:1.5rem;font-size:0.82rem;color:var(--text-dim)}
@media (max-width:1024px){.gift-plugins{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.gift-plugins{grid-template-columns:repeat(2,1fr)}.gift-banner{flex-direction:column;text-align:center}.gift-sms{flex-direction:column;text-align:center}}

/* ===== NVMe Speed Comparison Animation ===== */
.nvme-showcase{display:grid;grid-template-columns:1.4fr 1fr;gap:1.5rem;align-items:stretch}
.nvme-bars{display:flex;flex-direction:column;gap:1rem}
.nvme-bar-item{display:flex;flex-direction:column;gap:0.4rem}
.nvme-bar-info{display:flex;justify-content:space-between;align-items:baseline}
.nvme-bar-name{font-size:0.88rem;font-weight:600;color:var(--text)}
.nvme-bar-name em{font-style:normal;color:var(--primary-bright);font-size:0.74rem;margin-inline-start:0.4rem;font-family:var(--font-mono)}
.nvme-bar-speed{font-family:var(--font-mono);font-size:0.82rem;color:var(--text-dim)}
.nvme-bar-item.featured .nvme-bar-name{color:#fff}
.nvme-bar-item.featured .nvme-bar-speed{color:var(--primary-bright);font-weight:600}
.nvme-bar-track{height:28px;background:var(--bg-dark);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;position:relative}
.nvme-bar-fill{height:100%;width:0;border-radius:var(--r-sm);transition:none;position:relative;box-shadow:0 0 12px rgba(61,224,131,0.3)}
.nvme-bar-item.featured .nvme-bar-fill{box-shadow:0 0 20px rgba(61,224,131,0.5)}
.nvme-bar-fill::after{content:'';position:absolute;top:0;inset-inline-start:0;height:100%;width:40px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);animation:nvmeShine 2s linear infinite}
@keyframes nvmeShine{0%{transform:translateX(-40px)}100%{transform:translateX(calc(100vw + 40px))}}
.nvme-extra{display:flex;flex-direction:column;gap:1rem}
.nvme-transfer{background:var(--bg-dark);border:1px solid var(--border-strong);border-radius:var(--r-md);padding:1.25rem}
.nvme-transfer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.85rem}
.nvme-transfer-label{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.2em;color:var(--primary-bright);text-transform:uppercase}
.nvme-transfer-file{font-family:var(--font-mono);font-size:0.74rem;color:var(--text-dim)}
.nvme-transfer-track{height:8px;background:var(--bg-mid);border-radius:4px;overflow:hidden;margin-bottom:0.75rem}
.nvme-transfer-fill{height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--primary-glow));border-radius:4px;transition:none;box-shadow:0 0 8px rgba(61,224,131,0.5)}
.nvme-transfer-stats{display:flex;justify-content:space-between;font-size:0.78rem;color:var(--text-muted)}
.nvme-transfer-stats strong{color:#fff;font-family:var(--font-mono);font-weight:600}
.nvme-advantage{background:linear-gradient(135deg,var(--primary-dim),rgba(61,224,131,0.04));border:1px solid var(--primary);border-radius:var(--r-md);padding:1.25rem;text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center}
.nvme-advantage-num{font-family:var(--font-mono);font-size:2.5rem;font-weight:700;color:var(--primary-bright);line-height:1;letter-spacing:-0.03em}
.nvme-advantage-label{font-size:0.82rem;color:var(--text-muted);margin-top:0.4rem}
@media (max-width:768px){.nvme-showcase{grid-template-columns:1fr}}

/* ===== LiteSpeed Comparison (unique design) ===== */
.ls-comparison{display:grid;grid-template-columns:1.5fr 1fr;gap:1.5rem;align-items:stretch}
.ls-servers{display:flex;flex-direction:column;gap:0.85rem}
.ls-server{background:var(--bg-dark);border:1px solid var(--border);border-radius:var(--r-md);padding:1rem 1.1rem;transition:all 0.3s}
.ls-server.featured{border-color:var(--primary);box-shadow:0 0 20px -6px rgba(61,224,131,0.25)}
.ls-server-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0.5rem}
.ls-server-name{font-size:0.92rem;font-weight:600;color:var(--text)}
.ls-server-name em{font-style:normal;color:var(--primary-bright);font-size:0.74rem;margin-inline-start:0.4rem;font-family:var(--font-mono)}
.ls-server.featured .ls-server-name{color:#fff}
.ls-server-rps{font-family:var(--font-mono);font-size:0.8rem;color:var(--text-dim);direction:ltr}
.ls-server.featured .ls-server-rps{color:var(--primary-bright);font-weight:600}
.ls-pipeline{position:relative;height:24px;background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;margin-bottom:0.5rem}
.ls-pipeline-track{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 18px,rgba(61,224,131,0.04) 18px,rgba(61,224,131,0.04) 19px)}
.ls-pipeline-glow{position:absolute;top:0;bottom:0;inset-inline-start:0;width:100%;background:linear-gradient(90deg,transparent,rgba(61,224,131,0.06),transparent);animation:lsGlowMove 3s linear infinite}
@keyframes lsGlowMove{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.ls-packet{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;transform:translateY(-50%);animation:lsPacketFlow linear infinite;box-shadow:0 0 6px currentColor}
@keyframes lsPacketFlow{0%{inset-inline-start:-10px;opacity:0}10%{opacity:1}90%{opacity:1}100%{inset-inline-start:calc(100% + 10px);opacity:0}}
.ls-server-stats{display:flex;justify-content:space-between;font-size:0.72rem;color:var(--text-dim)}
.ls-server-stats strong{color:var(--text);font-family:var(--font-mono);font-weight:500}
.ls-summary{display:flex;flex-direction:column;gap:1rem}
.ls-gauge-wrap{text-align:center;background:var(--bg-dark);border:1px solid var(--border-strong);border-radius:var(--r-md);padding:1.5rem}
.ls-gauge{position:relative;width:140px;height:140px;margin:0 auto}
.ls-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.ls-gauge-track{fill:none;stroke:var(--bg-light);stroke-width:8}
.ls-gauge-arc{fill:none;stroke:var(--primary);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 0.5s var(--ease-quiet);filter:drop-shadow(0 0 6px rgba(61,224,131,0.5))}
.ls-gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ls-gauge-num{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;color:#fff;line-height:1}
.ls-gauge-unit{font-size:0.68rem;color:var(--text-dim);margin-top:0.2rem;letter-spacing:0.1em}
.ls-gauge-label{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.2em;color:var(--primary-bright);text-transform:uppercase;margin-top:0.75rem}
.ls-features{background:var(--bg-dark);border:1px solid var(--border);border-radius:var(--r-md);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:0.55rem;flex:1}
.ls-feature{display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;color:var(--text)}
.ls-feature-check{color:var(--primary);font-weight:700;font-size:0.9rem}
@media (max-width:768px){.ls-comparison{grid-template-columns:1fr}}

/* ===== SEO Showcase ===== */
.seo-showcase{display:grid;grid-template-columns:1.4fr 1fr;gap:1.5rem;align-items:stretch}
.seo-stage{background:var(--bg-dark);border:1px solid var(--border-strong);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.seo-search-bar{display:flex;align-items:center;gap:0.6rem;padding:0.85rem 1.1rem;background:rgba(5,8,7,0.6);border-bottom:1px solid var(--border)}
.seo-search-icon{font-size:1rem}
.seo-search-text{font-size:0.88rem;color:var(--text);transition:opacity 0.3s}
.seo-results{padding:1rem;flex:1;display:flex;flex-direction:column;gap:0.75rem}
.seo-ai-answer{background:linear-gradient(135deg,var(--primary-dim),rgba(61,224,131,0.04));border:1px solid var(--border-strong);border-radius:var(--r-md);padding:1rem;animation:seoAiPulse 3s ease-in-out infinite}
@keyframes seoAiPulse{0%,100%{box-shadow:0 0 0 0 rgba(61,224,131,0.2)}50%{box-shadow:0 0 20px -4px rgba(61,224,131,0.3)}}
.seo-ai-label{font-size:0.72rem;font-weight:600;color:var(--primary-bright);margin-bottom:0.4rem;letter-spacing:0.05em}
.seo-ai-text{font-size:0.84rem;color:var(--text);line-height:1.7;margin-bottom:0.4rem}
.seo-ai-source{font-size:0.72rem;color:var(--text-dim);font-family:var(--font-mono);direction:ltr}
.seo-rank-list{display:flex;flex-direction:column;gap:0.35rem}
.seo-rank-item{display:flex;align-items:center;gap:0.6rem;padding:0.55rem 0.75rem;background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--r-xs);font-size:0.8rem;transition:all 0.3s}
.seo-rank-item.featured{border-color:var(--primary);background:var(--primary-soft)}
.seo-rank-num{width:22px;height:22px;border-radius:50%;background:var(--bg-light);color:var(--text-dim);display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:600;flex-shrink:0;font-family:var(--font-mono)}
.seo-rank-item.featured .seo-rank-num{background:var(--primary);color:var(--bg-void)}
.seo-rank-url{color:var(--text-muted);font-family:var(--font-mono);direction:ltr;flex:1;font-size:0.78rem}
.seo-rank-item.featured .seo-rank-url{color:var(--primary-bright);font-weight:600}
.seo-rank-badge{font-size:0.6rem;font-weight:700;color:var(--bg-void);background:var(--primary);padding:0.15rem 0.45rem;border-radius:var(--r-xs)}
.seo-metrics{display:flex;flex-direction:column;gap:0.75rem}
.seo-metric{display:flex;align-items:center;gap:0.8rem;background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--r-md);padding:1rem 1.1rem;transition:all 0.3s}
.seo-metric:hover{border-color:var(--primary)}
.seo-metric-icon{font-size:1.3rem;flex-shrink:0}
.seo-metric-body{flex:1}
.seo-metric-num{font-family:var(--font-mono);font-size:1.1rem;font-weight:600;color:#fff;line-height:1.2}
.seo-metric-label{font-size:0.72rem;color:var(--text-dim);margin-top:0.2rem}
.seo-metric-bar{width:60px;height:4px;background:var(--bg-light);border-radius:2px;overflow:hidden;flex-shrink:0}
.seo-metric-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-glow));border-radius:2px;transition:width 1s var(--ease-quiet);box-shadow:0 0 6px var(--primary)}
@media (max-width:768px){.seo-showcase{grid-template-columns:1fr}}

/* ===== Maintenance Showcase ===== */
.maint-showcase{display:grid;grid-template-columns:1.4fr 1fr;gap:1.5rem;align-items:stretch}
.maint-dashboard{background:var(--bg-dark);border:1px solid var(--border-strong);border-radius:var(--r-lg);overflow:hidden}
.maint-dash-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.1rem;background:rgba(5,8,7,0.6);border-bottom:1px solid var(--border)}
.maint-dash-title{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.2em;color:var(--primary-bright);text-transform:uppercase}
.maint-dash-status{font-family:var(--font-mono);font-size:0.66rem;color:var(--primary);letter-spacing:0.1em}
.maint-dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem;padding:1rem}
.maint-dash-card{background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--r-sm);padding:0.85rem;text-align:center;transition:all 0.3s}
.maint-dash-card:hover{border-color:var(--primary)}
.maint-dash-icon{font-size:1.4rem;margin-bottom:0.3rem}
.maint-dash-label{font-size:0.74rem;color:var(--text-dim);margin-bottom:0.2rem}
.maint-dash-val{font-family:var(--font-mono);font-size:0.92rem;font-weight:600;color:#fff;direction:ltr}
.maint-dash-sub{font-size:0.66rem;color:var(--primary);margin-top:0.2rem}
.maint-timeline{padding:0.75rem 1.1rem 1rem;display:flex;flex-direction:column;gap:0.5rem}
.maint-tl-item{display:flex;align-items:center;gap:0.5rem;font-size:0.76rem;color:var(--text-muted);padding:0.3rem 0}
.maint-tl-time{font-family:var(--font-mono);font-size:0.68rem;color:var(--text-dim);width:90px;flex-shrink:0;direction:ltr}
.maint-tl-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 6px var(--primary);flex-shrink:0}
.maint-tl-text{flex:1}
.maint-activities{background:var(--bg-dark);border:1px solid var(--border-strong);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.maint-act-head{padding:1rem 1.1rem;font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.2em;color:var(--primary-bright);text-transform:uppercase;background:rgba(5,8,7,0.6);border-bottom:1px solid var(--border)}
.maint-act-item{display:flex;align-items:center;gap:0.7rem;padding:0.75rem 1.1rem;border-bottom:1px solid var(--border);transition:background 0.3s}
.maint-act-item:last-child{border-bottom:none}
.maint-act-item:hover{background:var(--primary-soft)}
.maint-act-icon{font-size:1.1rem;flex-shrink:0}
.maint-act-body{flex:1}
.maint-act-name{font-size:0.84rem;font-weight:600;color:#fff}
.maint-act-desc{font-size:0.7rem;color:var(--text-dim);margin-top:0.1rem}
.maint-act-switch{font-family:var(--font-mono);font-size:0.66rem;font-weight:700;padding:0.2rem 0.5rem;border-radius:var(--r-xs);letter-spacing:0.1em}
.maint-act-switch.on{background:var(--primary);color:var(--bg-void)}
@media (max-width:768px){.maint-showcase{grid-template-columns:1fr}}

/* ===== Discount Code Section ===== */
.discount-section{position:relative;padding:5rem 0;background:linear-gradient(135deg,var(--bg-mid),var(--bg-dark));overflow:hidden}
.discount-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(61,224,131,0.1),transparent 60%);pointer-events:none}
.discount-section::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(61,224,131,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(61,224,131,0.03) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 50% 50% at center,black 15%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 50% 50% at center,black 15%,transparent 70%);pointer-events:none}
.discount-inner{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:0 2rem;text-align:center}
.discount-badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 1rem;background:var(--primary);color:var(--bg-void);font-size:0.72rem;font-weight:700;letter-spacing:0.1em;border-radius:var(--r-pill);margin-bottom:1.5rem;text-transform:uppercase;box-shadow:0 4px 16px -4px rgba(61,224,131,0.5);animation:discountPulse 2.5s ease-in-out infinite}
@keyframes discountPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.discount-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;color:#fff;margin-bottom:1rem;letter-spacing:-0.02em}
.discount-desc{font-size:1.05rem;color:var(--text-muted);line-height:1.8;margin-bottom:2rem;max-width:560px;margin-inline:auto}
.discount-code-box{display:inline-flex;align-items:center;gap:1rem;background:var(--bg-dark);border:2px dashed var(--primary);border-radius:var(--r-lg);padding:1.25rem 2rem;margin-bottom:1.5rem;box-shadow:0 0 30px -8px rgba(61,224,131,0.3);transition:all 0.3s}
.discount-code-box:hover{border-style:solid;box-shadow:0 0 40px -8px rgba(61,224,131,0.5)}
.discount-code-label{font-size:0.78rem;color:var(--text-dim);margin-bottom:0.2rem;text-align:start}
.discount-code{font-family:var(--font-mono);font-size:1.8rem;font-weight:700;color:var(--primary-bright);letter-spacing:0.05em;direction:ltr}
.discount-copy-btn{background:var(--primary);color:var(--bg-void);border:none;border-radius:var(--r-sm);padding:0.6rem 1rem;font-size:0.82rem;font-weight:600;cursor:pointer;transition:all 0.3s;white-space:nowrap;align-self:center;margin-top:1.1rem}
.discount-copy-btn:hover{background:var(--primary-bright);transform:translateY(-1px)}
.discount-copy-btn.copied{background:var(--bg-light);color:var(--primary)}
.discount-note{font-size:0.82rem;color:var(--text-dim);margin-top:0.5rem}
@media (max-width:640px){.discount-code-box{flex-direction:column;gap:0.75rem;padding:1rem}.discount-code{font-size:1.4rem}}