/* ═══════════════════════════════════════════════════════════
   VISUAL POLISH — Frontend quality & responsiveness upgrade
   Loaded last; preserves existing animations & design tokens
   ═══════════════════════════════════════════════════════════ */

:root {
  --glow-primary: 0 0 48px rgba(94, 163, 255, 0.18);
  --glow-accent: 0 0 36px rgba(68, 215, 182, 0.14);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-bg: rgba(15, 26, 47, 0.72);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Ambient page atmosphere ───────────────────────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 50% at 15% -10%, rgba(94, 163, 255, 0.14), transparent 55%),
    radial-gradient(ellipse 60% 40% at 85% 5%, rgba(68, 215, 182, 0.1), transparent 50%),
    radial-gradient(ellipse 50% 35% at 50% 100%, rgba(47, 125, 240, 0.08), transparent 45%);
}

.page-home::before {
  background:
    radial-gradient(ellipse 90% 55% at 10% -5%, rgba(94, 163, 255, 0.2), transparent 52%),
    radial-gradient(ellipse 70% 45% at 92% 8%, rgba(68, 215, 182, 0.14), transparent 48%),
    radial-gradient(ellipse 55% 40% at 50% 105%, rgba(47, 125, 240, 0.1), transparent 42%);
}

/* ─── Header: scroll state & nav polish ─────────────────── */
.site-header {
  transition:
    background 0.35s var(--ease-smooth),
    box-shadow 0.35s var(--ease-smooth),
    border-color 0.35s var(--ease-smooth),
    backdrop-filter 0.35s var(--ease-smooth);
}

.site-header.is-scrolled {
  backdrop-filter: blur(22px) saturate(1.2);
  background:
    linear-gradient(180deg, rgba(8, 14, 26, 0.97), rgba(6, 11, 20, 0.94)),
    rgba(9, 17, 31, 0.95);
  border-bottom-color: rgba(94, 163, 255, 0.12);
  box-shadow:
    0 12px 40px rgba(2, 8, 23, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.site-nav a {
  position: relative;
  transition: color 0.2s ease, background 0.2s ease;
}

@media (min-width: 981px) {
  .site-nav a::after {
    content: "";
    position: absolute;
    inset-inline: 12px;
    bottom: 4px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.28s var(--ease-spring);
  }

  .site-nav a:hover::after,
  .site-nav a.active::after {
    transform: scaleX(1);
  }
}

/* ─── Buttons: refined glow & touch feedback ────────────── */
.btn-primary {
  box-shadow:
    0 12px 28px rgba(47, 125, 240, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    transform 0.22s var(--ease-spring),
    box-shadow 0.22s ease,
    background 0.22s ease;
}

.btn-primary:hover {
  box-shadow:
    0 16px 36px rgba(47, 125, 240, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.btn-secondary {
  transition:
    transform 0.22s var(--ease-spring),
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.btn-secondary:hover {
  border-color: rgba(94, 163, 255, 0.35);
  box-shadow: 0 8px 24px rgba(2, 8, 23, 0.18);
}

.touch-active {
  transform: scale(0.98);
  opacity: 0.92;
}

/* ─── Hero: richer presentation ─────────────────────────── */
.home-hero {
  position: relative;
  overflow: clip;
}

.home-hero-copy h1 {
  letter-spacing: -0.02em;
}

.gradient-text {
  background: linear-gradient(135deg, #7ec4ff 0%, var(--primary) 40%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: gradientShift 8s ease-in-out infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

.home-proof-card {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.28s var(--ease-spring),
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

.home-proof-card::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  opacity: 0.7;
}

.home-proof-card:hover {
  transform: translateY(-3px);
  border-color: rgba(94, 163, 255, 0.22);
  box-shadow: 0 20px 44px rgba(2, 8, 23, 0.22);
}

.home-link-row a {
  transition:
    transform 0.22s var(--ease-spring),
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.home-link-row a:hover {
  transform: translateY(-2px);
  background: rgba(94, 163, 255, 0.1);
  border-color: rgba(94, 163, 255, 0.28);
  color: var(--text);
}

.hero-logo-stage {
  isolation: isolate;
}

.hero-logo-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    145deg,
    rgba(94, 163, 255, 0.35),
    rgba(68, 215, 182, 0.15) 50%,
    rgba(255, 255, 255, 0.06)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hero-floating-card {
  transition: transform 0.35s var(--ease-spring);
}

.hero-floating-card:hover {
  transform: translateY(-4px) scale(1.02);
}

/* ─── Sections: rhythm & alternating depth ──────────────── */
.section-head h2 {
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem);
  letter-spacing: -0.015em;
}

.section-head.center .section-badge {
  animation: badgePulse 4s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(94, 163, 255, 0); }
  50% { box-shadow: 0 0 0 6px rgba(94, 163, 255, 0.06); }
}

.site-main > .section:nth-of-type(even) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 40%),
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(94, 163, 255, 0.04), transparent 60%);
}

/* ─── Cards: premium hover & popular highlight ────────────── */
.plan-card,
.feature-card,
.testimonial,
.stat-card {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.32s var(--ease-spring),
    box-shadow 0.32s ease,
    border-color 0.32s ease;
}

.plan-card::before,
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(94, 163, 255, 0.08) 0%,
    transparent 45%,
    rgba(68, 215, 182, 0.05) 100%
  );
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
}

.plan-card:hover::before,
.feature-card:hover::before {
  opacity: 1;
}

.plan-card.popular {
  border-color: rgba(94, 163, 255, 0.35);
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(94, 163, 255, 0.12),
    var(--glow-primary);
}

.feature-card .feature-icon {
  transition: transform 0.32s var(--ease-spring);
}

.feature-card:hover .feature-icon {
  transform: scale(1.08) rotate(-3deg);
}

.testimonial {
  border-inline-start: 3px solid rgba(68, 215, 182, 0.45);
}

.stat-card .emoji {
  display: inline-block;
  transition: transform 0.32s var(--ease-spring);
}

.stat-card:hover .emoji {
  transform: scale(1.12);
}

.stats-animated .stat-card.is-counted {
  animation: statPop 0.5s var(--ease-spring) both;
}

@keyframes statPop {
  from {
    opacity: 0.6;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ─── FAQ accordion polish ──────────────────────────────── */
.faq-item {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-item:has(.faq-question[aria-expanded="true"]) {
  border-color: rgba(94, 163, 255, 0.25);
  box-shadow: 0 12px 32px rgba(2, 8, 23, 0.16);
}

.faq-question {
  transition: color 0.2s ease;
}

.faq-item:has(.faq-question[aria-expanded="true"]) .faq-question {
  color: var(--text);
}

/* ─── CTA: animated gradient frame ──────────────────────── */
.cta-section {
  padding-block: clamp(40px, 6vw, 72px);
}

.cta-box {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at top right, rgba(94, 163, 255, 0.16), transparent 42%),
    radial-gradient(circle at bottom left, rgba(68, 215, 182, 0.1), transparent 38%),
    linear-gradient(135deg, rgba(19, 31, 56, 0.95), rgba(12, 22, 39, 0.92));
  border: 1px solid rgba(94, 163, 255, 0.22);
  box-shadow:
    0 24px 56px rgba(47, 125, 240, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cta-box::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(94, 163, 255, 0.08),
    transparent,
    rgba(68, 215, 182, 0.06),
    transparent
  );
  animation: ctaRotate 12s linear infinite;
  pointer-events: none;
}

@keyframes ctaRotate {
  to { transform: rotate(360deg); }
}

.cta-grid {
  position: relative;
  z-index: 1;
}

.cta-box h2 {
  font-size: clamp(1.35rem, 1rem + 1.2vw, 1.85rem);
}

/* ─── Footer refinement ─────────────────────────────────── */
.site-footer {
  position: relative;
  background:
    linear-gradient(180deg, rgba(94, 163, 255, 0.04), transparent 24%),
    rgba(6, 11, 20, 0.96);
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(94, 163, 255, 0.35),
    rgba(68, 215, 182, 0.25),
    transparent
  );
}

.footer-links a,
.contact-list a {
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-links a:hover,
.contact-list a:hover {
  color: var(--primary);
  transform: translateX(-3px);
}

/* ─── Back to top: smooth reveal ────────────────────────── */
.back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(0.9);
  transition:
    opacity 0.3s var(--ease-smooth),
    transform 0.3s var(--ease-spring),
    visibility 0.3s;
  box-shadow:
    0 10px 28px rgba(68, 215, 182, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  z-index: 40;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* ─── Scroll reveal: staggered entrance ─────────────────── */
.js-enhanced [data-aos] {
  transition:
    opacity 0.55s var(--ease-smooth),
    transform 0.55s var(--ease-spring);
}

.js-enhanced .plans-grid [data-aos]:nth-child(1),
.js-enhanced .cards-grid [data-aos]:nth-child(1),
.js-enhanced .stats-grid [data-aos]:nth-child(1) { transition-delay: 0ms; }

.js-enhanced .plans-grid [data-aos]:nth-child(2),
.js-enhanced .cards-grid [data-aos]:nth-child(2),
.js-enhanced .stats-grid [data-aos]:nth-child(2) { transition-delay: 80ms; }

.js-enhanced .plans-grid [data-aos]:nth-child(3),
.js-enhanced .cards-grid [data-aos]:nth-child(3),
.js-enhanced .stats-grid [data-aos]:nth-child(3) { transition-delay: 160ms; }

.js-enhanced .plans-grid [data-aos]:nth-child(4),
.js-enhanced .cards-grid [data-aos]:nth-child(4),
.js-enhanced .stats-grid [data-aos]:nth-child(4) { transition-delay: 240ms; }

.js-enhanced .stack [data-aos]:nth-child(1) { transition-delay: 0ms; }
.js-enhanced .stack [data-aos]:nth-child(2) { transition-delay: 70ms; }
.js-enhanced .stack [data-aos]:nth-child(3) { transition-delay: 140ms; }

.js-enhanced .home-proof-grid [data-aos]:nth-child(1),
.js-enhanced .home-proof-grid > :nth-child(1) { transition-delay: 0ms; }
.js-enhanced .home-proof-grid > :nth-child(2) { transition-delay: 70ms; }
.js-enhanced .home-proof-grid > :nth-child(3) { transition-delay: 140ms; }

/* ─── Responsive: tablet & mobile ───────────────────────── */
@media (max-width: 1024px) {
  .home-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-proof-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .hero-logo-stage {
    min-height: clamp(380px, 52vw, 480px);
  }
}

/* ═══════════════════════════════════════════════════════════
   SPECIAL LAYER SUPPORT (visual polish companion to premium-animations)
   Meters track, cart states, progress bar, result emphasis.
   ═══════════════════════════════════════════════════════════ */

.resource-item .resource-meter {
  background: rgba(94, 163, 255, .10);
  border-radius: 999px;
}

.cart-chip.pop {
  background: rgba(94,163,255,.12);
  border-color: rgba(94,163,255,.35);
}

.scroll-progress {
  box-shadow: 0 1px 4px rgba(94,163,255,.25);
}

/* Domain result stronger when available */
.domain-result-card.available {
  border-color: rgba(34,197,94,.28);
}

.filter-result-count.visible {
  animation: badgeEnter 380ms var(--ease-spring) both;
}

/* Dashboard & Panel continuation visual support */
.dashboard-surface-card,
.dashboard-rich-item,
.list-card {
  background: var(--glass-bg, rgba(15,26,47,.72));
  border: 1px solid var(--glass-border, rgba(255,255,255,.1));
  border-radius: var(--radius-lg, 16px);
}

.dashboard-section-hero {
  background: linear-gradient(135deg, rgba(19,31,56,.95), rgba(12,22,39,.92));
  border: 1px solid rgba(94,163,255,.18);
}

.status-badge {
  font-size: 0.8rem;
  padding: 2px 10px;
  border-radius: 999px;
}

/* Panel harmonization basics (when main CSS is loaded in panel) */
.panel-card,
.server-card,
.config-card,
.monitor-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  padding: 18px 20px;
}

.panel-card .card-head,
.server-card .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.usage-bar {
  height: 8px;
  background: #f1f3f5;
  border-radius: 999px;
  margin-top: 6px;
  overflow: hidden;
}

@media (max-width: 980px) {
  .home-hero-shell {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 40px);
  }

  .home-hero-visual {
    order: -1;
    max-width: min(100%, 520px);
    margin-inline: auto;
  }

  .hero-logo-stage {
    min-height: auto;
    padding: clamp(24px, 4vw, 36px);
    border-radius: clamp(28px, 4vw, 36px);
  }

  .hero-orbit {
    opacity: 0.45;
  }

  .hero-logo-core {
    position: relative;
    inset: auto;
    width: clamp(140px, 36vw, 200px);
    height: clamp(140px, 36vw, 200px);
    margin: 0 auto 20px;
  }

  .hero-floating-card {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-bottom: 12px;
  }

  .hero-curved-panel {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: 8px;
    border-radius: clamp(22px, 3vw, 28px);
  }

  .hero-logo-stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .hero-orbit {
    display: none;
  }

  .split-grid {
    gap: clamp(32px, 5vw, 48px);
  }
}

@media (max-width: 720px) {
  .home-proof-grid {
    grid-template-columns: 1fr;
  }

  .home-proof-grid > :last-child:nth-child(odd) {
    grid-column: auto;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .home-hero-copy .pill-list {
    gap: 8px;
  }

  .cta-actions {
    width: 100%;
  }

  .cta-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .back-to-top {
    inset-inline-end: max(16px, env(safe-area-inset-right, 16px));
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 480px) {
  .home-hero {
    padding-top: 20px;
    padding-bottom: 32px;
  }

  .home-hero-copy h1 {
    font-size: clamp(1.55rem, 6.5vw, 2rem);
  }

  .section {
    padding-block: clamp(24px, 5vw, 40px);
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .plan-card:hover,
  .feature-card:hover,
  .pricing-card:hover,
  .home-proof-card:hover {
    transform: none;
  }

  .gradient-text {
    animation: none;
  }

  .cta-box::before {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text,
  .section-head.center .section-badge,
  .cta-box::before {
    animation: none !important;
  }

  .js-enhanced [data-aos],
  .js-enhanced .plans-grid [data-aos],
  .js-enhanced .cards-grid [data-aos],
  .js-enhanced .stats-grid [data-aos],
  .js-enhanced .stack [data-aos] {
    transition-delay: 0ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   UI REFINEMENTS 2026 — Spacing fixes, rounded corners, icon styles,
   dynamic polish, categories, visitor sections, color & micro-details
   Non-breaking enhancements layered on top (visual-polish loads last)
   ═══════════════════════════════════════════════════════════ */

/* --- Refined CSS vars for better spacing/radius --- */
:root {
  --radius-lg: 22px;
  --radius-xl: 28px;
  --inner-gap-sm: clamp(6px, 1.2vw, 10px);
  --inner-gap: clamp(8px, 1.6vw, 14px);
  --card-pad: clamp(18px, 2.4vw, 26px);
  --section-pad: clamp(32px, 5vw, 56px);
}

/* --- Global more generous spacing & fluid elements (fix "چسبیده") --- */
.section {
  padding-block: var(--section-pad);
}

.panel,
.plan-card,
.feature-card,
.stat-card,
.testimonial,
.empty-state,
.hero-card {
  padding: var(--card-pad);
  border-radius: var(--radius-lg);
}

.cards-grid,
.plans-grid,
.stats-grid,
.split-grid,
.home-proof-grid {
  gap: clamp(18px, 3vw, 28px);
}

.stack {
  gap: clamp(12px, 2.2vw, 18px);
}

/* Fix tight lists and micro elements */
.check-list,
.feature-list,
.footer-links,
.contact-list,
.detail-list {
  gap: 12px;
}

.pill,
.status-badge {
  padding: 7px 14px;
  gap: 7px;
  border-radius: 999px;
}

.home-proof-grid {
  gap: clamp(14px, 2.5vw, 20px);
}

.home-proof-card {
  padding: clamp(16px, 2.2vw, 20px);
  border-radius: var(--radius);
}

/* Home hero & inline sections spacing/rounded polish */
.home-hero {
  padding-block: clamp(42px, 7vw, 72px);
}

.home-hero .hero-actions {
  gap: clamp(10px, 1.8vw, 14px);
  margin-top: 4px;
}

.home-hero .home-proof-grid {
  margin-top: 18px;
}

.home-link-row {
  gap: 10px;
  margin-top: 12px;
}

.home-link-row a {
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.86rem;
  transition: all 0.15s ease;
}

.home-link-row a:hover {
  background: rgba(94, 163, 255, 0.12);
  color: var(--primary);
}

.featured-home-plans {
  gap: clamp(18px, 2.8vw, 26px);
}

/* Extra for metrics/features in pages (tight fix) */
.metrics,
.features {
  gap: clamp(12px, 2vw, 18px);
}

.metric,
.feature {
  padding: clamp(16px, 2.2vw, 22px);
  border-radius: var(--radius);
}

/* --- Buttons: consistent rounded, better touch & dynamic --- */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-sm {
  border-radius: 14px;
  transition: transform 0.22s var(--ease-spring), box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: scale(0.985);
}

.btn-sm {
  border-radius: 12px;
  padding: 8px 14px;
}

/* --- Icon styling (fix unstyled icons in product detail, features etc) --- */
.spec-icon,
.feature-icon,
.detail-stat .spec-icon,
.launch-step-card .spec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(94, 163, 255, 0.12), rgba(68, 215, 182, 0.08));
  color: var(--primary);
  border: 1px solid rgba(94, 163, 255, 0.18);
  margin-bottom: 6px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.spec-icon svg,
.feature-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
}

.detail-stat:hover .spec-icon,
.use-case-card:hover .spec-icon {
  transform: scale(1.05);
  background: linear-gradient(145deg, rgba(94, 163, 255, 0.18), rgba(68, 215, 182, 0.12));
}

.feature-icon {
  width: 52px;
  height: 52px;
  font-size: 1.6rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

/* --- Product detail & pricing micro components (fix tight elements) --- */
.hero-micro-stats {
  gap: 10px;
  margin-top: 14px;
}

.hero-micro-stats .mini-stat {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 0.86rem;
}

.product-spec-grid,
.feature-grid {
  gap: 16px;
}

.detail-stat {
  padding: 14px 16px;
  gap: 8px;
  border-radius: 16px;
}

.detail-stat strong {
  font-size: 1.05rem;
  line-height: 1.3;
}

.detail-stat span:last-child {
  font-size: 0.82rem;
  margin-top: 2px;
}

.hero-value-strip {
  gap: 16px;
  margin-top: 18px;
}

.hero-value-card {
  padding: 16px 18px;
  border-radius: 16px;
  gap: 4px;
}

.hero-value-card strong {
  font-size: 1.15rem;
  margin: 6px 0 4px;
}

.hero-value-card p {
  font-size: 0.86rem;
  line-height: 1.5;
}

.feature-pill-list {
  gap: 8px;
  margin-top: 14px;
}

.feature-pill {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.86rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Resource grid in cards (major tight spacing fix) --- */
.resource-grid {
  gap: 12px;
}

.resource-item {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.resource-item > div {
  gap: 6px;
}

.resource-item strong {
  font-size: 0.78rem;
  letter-spacing: 0.3px;
}

.resource-item span {
  font-size: 1.02rem;
}

/* --- Categories / segment control development (more prominent, rounded, dynamic) --- */
.segment-control {
  padding: 10px;
  border-radius: 20px;
  gap: 8px;
  background: linear-gradient(135deg, rgba(19, 31, 56, 0.96), rgba(25, 40, 70, 0.92));
  border: 1px solid rgba(94, 163, 255, 0.22);
}

.segment-head {
  text-align: center;
  margin-bottom: 8px;
}

.segment-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  padding: 3px 11px;
  border-radius: 999px;
  letter-spacing: 0.4px;
}

.segment-chip {
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 0.2s var(--ease-smooth);
}

.segment-chip:hover {
  transform: translateY(-1px);
}

.segment-chip.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(47, 125, 240, 0.35);
}

.seg-ico {
  font-size: 1.05rem;
  line-height: 1;
  display: inline-block;
}

/* --- FAQ, accordion, forms micro polish (spacing + radius) --- */
.faq-item {
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}

.faq-question {
  padding: 16px 20px;
  gap: 12px;
  border-radius: var(--radius);
}

.faq-answer {
  padding: 0 20px 16px;
}

.faq-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

/* --- Footer, header, nav visitor areas --- */
.site-footer {
  padding-top: 42px;
}

.footer-grid {
  gap: clamp(28px, 4vw, 42px);
}

.footer-card {
  padding: 4px 0;
}

.footer-links a,
.contact-list a {
  padding: 4px 0;
  display: inline-block;
  transition: color 0.15s ease, transform 0.15s ease;
}

.footer-links a:hover,
.contact-list a:hover {
  color: var(--primary);
  transform: translateX(2px);
}

.footer-bottom-row {
  padding-block: 18px;
  gap: 14px;
}

.site-header {
  border-bottom: 1px solid rgba(43, 58, 93, 0.6);
}

.nav-panel {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.nav-actions .btn {
  border-radius: 12px;
}

/* --- Other visitor polish: about, contact, domain, support, testimonials --- */
.eyebrow {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(94, 163, 255, 0.1);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.testimonial {
  border-radius: var(--radius);
  padding: 20px;
}

.breadcrumbs {
  gap: 8px;
  margin-bottom: 16px;
}

.breadcrumbs span {
  opacity: 0.75;
}

.breadcrumbs a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* --- Dynamic & responsive touches --- */
@media (min-width: 768px) {
  .detail-stat,
  .resource-item,
  .hero-value-card,
  .use-case-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .detail-stat:hover,
  .resource-item:hover,
  .hero-value-card:hover,
  .use-case-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  }
}

@media (max-width: 640px) {
  .resource-grid {
    gap: 10px;
  }

  .resource-item {
    padding: 12px 14px;
  }

  .spec-icon,
  .feature-icon {
    width: 38px;
    height: 38px;
  }

  .spec-icon svg,
  .feature-icon svg {
    width: 18px;
    height: 18px;
  }

  .segment-chip {
    padding: 8px 14px;
    font-size: 0.86rem;
    min-height: 38px;
  }

  .hero-value-strip,
  .product-spec-grid {
    gap: 12px;
  }
}

/* --- Subtle color & contrast refinements (more attractive, still dark theme) --- */
:root {
  --muted: #a3b5d4;
}

.muted,
p.muted,
.card-meta,
.price-note {
  color: var(--muted);
  line-height: 1.7;
}

.gradient-text {
  background: linear-gradient(92deg, #fff 0%, #c9ddff 38%, #5ea3ff 72%, #44d7b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pill-primary {
  background: rgba(94, 163, 255, 0.18);
  color: #a8c9ff;
}

.pill-accent {
  background: rgba(68, 215, 182, 0.16);
  color: #7fe8cc;
}

/* --- Ensure no horizontal scroll & fluid on all visitor pages --- */
.products-page,
.page-home,
.page-about,
.page-faq,
.page-contact,
.hosting-page {
  overflow-x: clip;
}

/* --- Small polish for location cards, launch steps, compare --- */
.location-card,
.launch-step-card,
.mobile-compare-card {
  border-radius: 14px;
}

.launch-step-number {
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(94, 163, 255, 0.15);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.85rem;
}

/* --- Form fields polish for contact, auth visitor forms (spacing, radius) --- */
.field-group {
  margin-bottom: 14px;
}

.field-row {
  gap: 14px;
}

label {
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}

input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-radius: 12px;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(94, 163, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  outline: none;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

.form-card,
.contact-form-card {
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 28px);
}

.contact-support-card {
  border-radius: var(--radius);
  padding: 18px 20px;
}

/* ═══════════════════════════════════════════════════════════
   PROFESSIONAL ITERATION 2 — Deep structure completion
   Domain, Support, Base layout, Product detail sticky, 
   Tables, Trust, Micro UX, Accessibility, Cohesive polish
   for real end-user professional experience
   ═══════════════════════════════════════════════════════════ */

/* --- Domain page (search + results + popular extensions) --- */
.domain-search-card,
.domain-popular-card {
  border-radius: var(--radius-lg);
}

.domain-search-form .btn {
  margin-top: 4px;
}

.domain-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.domain-result-head h3 {
  margin: 0;
  font-size: 1.25rem;
  word-break: break-all;
}

.domain-price-table-wrap {
  margin: 14px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.domain-price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.domain-price-table th,
.domain-price-table td {
  padding: 12px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.domain-price-table th {
  background: rgba(255, 255, 255, 0.04);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.domain-price-table tr:last-child td {
  border-bottom: none;
}

.domain-price-table strong {
  color: var(--text);
  font-weight: 700;
}

.domain-register-cta {
  margin-top: 8px;
}

.domain-extensions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.domain-ext-card {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

.domain-ext-card:hover {
  border-color: rgba(94, 163, 255, 0.25);
  transform: translateY(-2px);
}

.domain-ext-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.domain-ext-name {
  font-size: 1.05rem;
  font-weight: 700;
}

.domain-ext-prices {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.domain-price-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  align-items: center;
}

.domain-price-label {
  color: var(--muted);
  font-size: 0.82rem;
}

.pill-sm {
  font-size: 0.72rem;
  padding: 2px 8px;
}

/* --- Support page (refactored for professional consistency) --- */
.page-support .support-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.support-head-copy h1 {
  margin: 0 0 6px;
  font-size: 1.55rem;
}

.support-head-actions {
  gap: 10px;
}

.support-tickets-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.support-ticket-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 16px 18px;
  border-radius: var(--radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.support-ticket-card:hover {
  transform: translateY(-2px);
  border-color: rgba(94, 163, 255, 0.3);
}

.support-ticket-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.support-ticket-id {
  font-family: monospace;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--primary);
}

.support-ticket-subject {
  flex: 1;
  min-width: 120px;
  font-weight: 600;
}

.support-ticket-meta {
  display: flex;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.support-ticket-meta .sep {
  opacity: 0.4;
}

.support-status {
  font-size: 0.78rem;
  padding: 3px 10px;
}

.support-empty {
  text-align: center;
  padding: 28px 20px;
}

.support-footer-note {
  margin-top: 12px;
  border-radius: var(--radius);
}

.support-note-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --- Product detail: sticky purchase panel (professional conversion) --- */
@media (min-width: 980px) {
  .purchase-panel {
    position: sticky;
    top: 90px;
    align-self: start;
  }
}

/* --- Base layout deeper professional touches (header, nav, footer, banner) --- */
.site-banner {
  border-radius: 0;
}

.site-banner-inner {
  gap: 12px;
}

.nav-panel {
  border-radius: 0 0 20px 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.nav-actions {
  gap: 10px;
}

.avatar-chip {
  border-radius: 50%;
}

.cart-chip {
  border-radius: 999px;
}

.footer-branding {
  gap: 14px;
}

.footer-card h4 {
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: var(--text);
}

.enamad-trust-badge,
.pill-list {
  border-radius: 999px;
}

.back-to-top {
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* --- Tables general (domain + any public) --- */
.table-wrap,
.domain-price-table-wrap {
  border-radius: 12px;
  overflow: hidden;
}

.responsive-table {
  border-radius: inherit;
}

/* --- Empty states, section heads, inline actions consistency --- */
.empty-state {
  padding: clamp(22px, 3vw, 32px);
  text-align: center;
  border-radius: var(--radius);
}

.section-head h2 {
  line-height: 1.25;
}

.inline-actions {
  gap: 10px;
  flex-wrap: wrap;
}

.inline-actions .btn {
  white-space: nowrap;
}

/* --- Additional professional micro details --- */
.card-meta,
.domain-price-label {
  font-size: 0.84rem;
  color: var(--muted);
}

.dashboard-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.benefit-strip,
.compact-benefits {
  gap: 6px;
}

.benefit-chip {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  background: rgba(68, 215, 182, 0.12);
  color: var(--accent);
  border: 1px solid rgba(68, 215, 182, 0.2);
}

/* --- Focus, touch targets & accessibility for real users --- */
.btn,
.segment-chip,
.faq-question,
.support-ticket-card,
.domain-ext-card,
.domain-result-card {
  min-height: 44px;
}

:focus-visible {
  outline: 2px solid rgba(94, 163, 255, 0.9);
  outline-offset: 3px;
}

@media (hover: none) {
  .domain-ext-card:hover,
  .support-ticket-card:hover {
    transform: none;
  }
}

/* --- Final cohesion for all visitor pages --- */
.page-about .feature-card,
.page-faq .faq-item,
.page-contact .form-card,
.page-contact .side-card,
.page-contact .contact-support-card {
  border-radius: var(--radius-lg);
}

/* Make sure pricing cards benefit-strip and meta get love */
.pricing-meta-row {
  gap: 8px;
  flex-wrap: wrap;
}

.pricing-meta-row span {
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.035);
  border-radius: 8px;
  font-size: 0.78rem;
}

/* ═══════════════════════════════════════════════════════════
   PROFESSIONAL LAYER 3 — MAXIMUM ELEVATION
   Best-in-class development on current structure.
   Premium hero, conversion flows, typography, depth, mobile excellence,
   trust, cohesion across every public page.
   ═══════════════════════════════════════════════════════════ */

/* --- Homepage Hero — True Premium Impact --- */
.home-hero {
  padding-block: clamp(52px, 9vw, 88px);
}

.home-hero-shell {
  gap: clamp(32px, 5vw, 48px);
}

.home-hero-copy h1 {
  font-size: clamp(1.85rem, 5.2vw, 3.1rem);
  line-height: 1.15;
  margin-bottom: 14px;
}

.home-hero-copy .lead {
  font-size: clamp(1.02rem, 2.1vw, 1.18rem);
  max-width: 620px;
  margin-bottom: 18px;
}

.premium-proof {
  margin-top: 18px;
  gap: 14px;
}

.home-proof-card {
  padding: 18px 20px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proof-icon {
  font-size: 1.35rem;
  margin-bottom: 2px;
}

.premium-pill-list {
  margin-top: 14px;
  gap: 8px;
}

.premium-links {
  margin-top: 16px;
  gap: 8px;
}

.premium-links a {
  padding: 6px 14px;
  border-radius: 12px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.2s ease;
}

.premium-links a:hover {
  background: rgba(94, 163, 255, 0.15);
  color: var(--primary);
  transform: translateY(-1px);
}

/* --- Premium Section Heads & Grids --- */
.premium-section-head {
  margin-bottom: 22px;
}

.premium-section-head .section-lead {
  max-width: 620px;
  margin: 8px auto 0;
  font-size: 0.98rem;
  color: var(--muted);
}

.premium-plans-grid,
.premium-cards-grid,
.premium-stats-grid {
  gap: clamp(18px, 2.8vw, 26px);
}

.premium-stack {
  gap: 12px;
}

/* --- Elevated Plan & Feature Cards --- */
.plan-card,
.feature-card {
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s ease, border-color 0.2s ease;
}

.plan-card:hover,
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.32);
  border-color: rgba(94, 163, 255, 0.25);
}

.plan-card .price-main {
  font-size: 1.65rem;
}

.feature-card .feature-icon {
  margin-bottom: 10px;
}

/* --- Stats & Testimonials Premium --- */
.stat-card {
  padding: 22px 20px;
  text-align: center;
  border-radius: 18px;
}

.stat-card strong {
  font-size: 1.9rem;
  line-height: 1.1;
  margin: 6px 0 4px;
}

.testimonial {
  padding: 22px 24px;
}

.testimonial .dashboard-head {
  margin-bottom: 10px;
}

/* --- CTA Section — High Conversion --- */
.premium-cta {
  padding-block: 36px;
}

.premium-cta-box {
  padding: clamp(32px, 5vw, 44px);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(19, 31, 56, 0.96), rgba(15, 26, 47, 0.92));
  border: 1px solid rgba(94, 163, 255, 0.18);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.cta-copy h2 {
  font-size: clamp(1.45rem, 3.8vw, 2.1rem);
  margin-bottom: 8px;
}

.btn-lg {
  padding: 13px 26px;
  font-size: 1.02rem;
  border-radius: 14px;
}

/* --- Product Detail — Conversion & Flow Excellence --- */
.purchase-panel {
  border-radius: 20px;
  padding: 24px 22px;
}

.purchase-panel-headline {
  margin-bottom: 14px;
}

.purchase-highlights {
  gap: 10px;
  margin: 16px 0;
}

.purchase-highlight {
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.detail-overview-grid {
  gap: 24px;
}

.feature-grid,
.use-cases-grid {
  gap: 16px;
}

.detail-feature-card,
.use-case-card,
.enhanced-use-case-card {
  padding: 18px 20px;
  border-radius: 16px;
}

.launch-step-card {
  padding: 16px 18px;
  border-radius: 14px;
}

/* --- Products Page Further Elevation --- */
.products-page .pricing-hero-card h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
}

.products-page .pricing-hero-card .muted {
  max-width: 680px;
}

/* --- Base Layout — Header, Alerts, Footer Premium --- */
.premium-header {
  border-bottom: 1px solid rgba(43, 58, 93, 0.55);
}

.premium-brand {
  gap: 12px;
}

.premium-alerts {
  margin-top: 4px;
}

.premium-alert {
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.95rem;
}

.premium-footer {
  background: linear-gradient(to bottom, rgba(9, 17, 31, 0.6), transparent);
  padding-top: 48px;
}

.premium-footer-brand {
  padding-bottom: 8px;
}

.footer-grid {
  gap: clamp(26px, 4vw, 40px);
}

/* --- Stronger Depth, Glass & Micro Details --- */
.panel,
.pricing-card,
.domain-card,
.testimonial,
.stat-card,
.home-proof-card,
.support-ticket-card {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
  transition: transform 0.22s var(--ease-smooth), box-shadow 0.22s ease, border-color 0.2s ease;
}

.panel:hover,
.pricing-card:hover,
.domain-card:hover {
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.32);
}

/* --- Typography & Readability for Professional Feel --- */
h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -0.2px;
}

.lead,
.section-lead {
  line-height: 1.7;
}

.muted {
  line-height: 1.75;
}

/* --- Mobile Excellence (Final Push) --- */
@media (max-width: 640px) {
  .home-hero {
    padding-block: 36px 48px;
  }

  .home-proof-card {
    padding: 15px 16px;
  }

  .premium-cta-box {
    padding: 26px 20px;
  }

  .purchase-panel {
    padding: 20px 18px;
  }

  .domain-extensions-grid {
    grid-template-columns: 1fr;
  }

  .support-ticket-card {
    padding: 14px 16px;
  }
}

/* --- Final Cohesion & Trust Polish --- */
.section-badge {
  letter-spacing: 0.6px;
}

.pill,
.status-badge {
  font-weight: 600;
  letter-spacing: 0.2px;
}

.gradient-text {
  background-size: 200% 100%;
  animation: gradient-shift 6s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* --- Ensure all public pages feel finished --- */
.page-home,
.page-products,
.page-about,
.page-contact,
.page-faq,
.page-support {
  --page-top-padding: clamp(8px, 1.5vw, 16px);
}

.site-main {
  padding-top: var(--page-top-padding);
}

/* ═══════════════════════════════════════════════════════════
   PROFESSIONAL LAYER 4 — Conversion, Trust, Forms, Core Components
   Pricing cards (the heart of the site), FAQ, Contact, Forms,
   Buttons, Trust signals, Final mobile & cohesion
   ═══════════════════════════════════════════════════════════ */

/* --- Core Pricing Card — The Most Important Component --- */
.premium-pricing-card {
  border-radius: 22px;
  padding: clamp(24px, 3.2vw, 32px);
  transition: transform 0.28s var(--ease-smooth), box-shadow 0.28s ease, border-color 0.2s ease;
}

.premium-pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 75px rgba(0, 0, 0, 0.38);
  border-color: rgba(94, 163, 255, 0.35);
}

.premium-pricing-card.featured {
  border-color: rgba(94, 163, 255, 0.55);
  box-shadow: 0 28px 72px rgba(47, 125, 240, 0.32);
}

.premium-meta-row {
  gap: 8px;
  margin-top: 6px;
}

.premium-resource-grid {
  gap: 12px;
  margin-top: 4px;
}

.premium-price-display {
  margin: 8px 0 4px;
}

.premium-billing-toggle {
  margin-bottom: 4px;
}

.premium-benefits {
  margin: 8px 0;
}

.premium-card-cta {
  margin-top: 12px;
  gap: 10px;
}

.premium-card-cta .btn {
  padding-block: 12px;
  border-radius: 14px;
}

/* --- FAQ Page — Professional Accordion Experience --- */
.premium-faq-stack {
  gap: 10px;
}

.premium-faq-item {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.premium-faq-question {
  padding: 18px 22px;
  font-weight: 600;
  width: 100%;
  text-align: right;
  background: transparent;
  border: none;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.premium-faq-question:hover {
  background: rgba(255, 255, 255, 0.03);
}

.premium-faq-answer {
  padding: 0 22px 18px;
  line-height: 1.75;
  color: var(--muted);
}

.premium-faq-help {
  margin-top: 24px;
  padding: 24px;
  border-radius: 18px;
}

/* --- Contact Page — Premium Form & Support Experience --- */
.premium-contact-grid {
  gap: 24px;
}

.premium-form-card {
  padding: clamp(26px, 3.5vw, 34px);
}

.premium-contact-form .field-group {
  margin-bottom: 16px;
}

.premium-contact-form label {
  font-weight: 500;
  margin-bottom: 7px;
}

.premium-support-grid {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.premium-support-card {
  padding: 20px 22px;
  border-radius: 16px;
}

/* --- Buttons — Stronger Professional Variants --- */
.btn-primary,
.btn-secondary,
.btn-ghost {
  font-weight: 600;
  letter-spacing: 0.2px;
}

.btn-primary {
  box-shadow: 0 14px 32px rgba(47, 125, 240, 0.32);
}

.btn-primary:hover {
  box-shadow: 0 18px 40px rgba(47, 125, 240, 0.42);
  transform: translateY(-2px);
}

.btn-lg {
  font-size: 1.05rem;
  padding: 14px 28px;
  border-radius: 15px;
}

/* --- Trust, Proof & Micro Elements --- */
.premium-proof .home-proof-card {
  position: relative;
}

.premium-proof .proof-icon {
  position: absolute;
  top: 14px;
  left: 18px;
  font-size: 1.1rem;
  opacity: 0.85;
}

.premium-proof .home-proof-card strong {
  padding-left: 26px;
}

.section-lead {
  color: #a8b9d8;
  font-size: 0.96rem;
  max-width: 580px;
  margin-inline: auto;
}

/* --- Final Mobile & Accessibility Polish --- */
@media (max-width: 580px) {
  .premium-pricing-card {
    padding: 20px 18px;
  }

  .premium-faq-question {
    padding: 16px 18px;
    font-size: 0.98rem;
  }

  .premium-support-grid {
    gap: 12px;
  }

  .premium-cta-box {
    border-radius: 20px;
  }
}

/* --- Global Form & Input Excellence --- */
input, select, textarea {
  font-size: 0.98rem;
}

.field-error {
  color: var(--danger);
  font-size: 0.88rem;
  margin-top: 4px;
}

/* --- Empty States & Alerts Final Polish --- */
.premium-empty-state {
  padding: 32px 24px;
  border-radius: 18px;
}

.premium-alert {
  border-radius: 12px;
  border-left: 4px solid var(--primary);
}

/* --- Cohesion for All Remaining Public Pages --- */
.page-faq .page-hero,
.page-contact .page-hero,
.page-domain .page-hero {
  padding-bottom: clamp(28px, 4vw, 40px);
}

.breadcrumbs {
  font-size: 0.88rem;
  opacity: 0.75;
}

/* --- Last Layer of Professional Depth --- */
.premium-header .site-logo-shell {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.premium-footer .footer-card {
  transition: transform 0.2s ease;
}

.premium-footer .footer-card:hover {
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   ROUND 6 / LAYER 6 — "فرایند شروع سریع" Complete Professional Implementation
   Fix icon positioning (no more sinking into text), proper structure,
   unique attractive design, fully dynamic, responsive, premium for real users.
   Based on the provided reference image + our design system.
   Thorough, focused improvements.
   ═══════════════════════════════════════════════════════════ */

.premium-launch-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
  margin-top: 16px;
}

.premium-launch-step-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s ease, border-color 0.2s ease;
  min-height: 140px;
  overflow: hidden;
}

.premium-launch-step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  border-color: rgba(94, 163, 255, 0.25);
}

.step-visual {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 52px;
  min-width: 52px;
}

.launch-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(94, 163, 255, 0.18), rgba(47, 125, 240, 0.12));
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
  border: 1px solid rgba(94, 163, 255, 0.3);
  box-shadow: 0 2px 6px rgba(94, 163, 255, 0.15);
  z-index: 2;
}

.step-icon {
  font-size: 1.35rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
  margin-top: -2px;
}

.step-content {
  flex: 1 1 auto;
  min-width: 0; /* prevents text overflow issues */
  padding-top: 2px;
}

.step-title {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 6px;
  color: var(--text);
}

.step-desc {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* Unique professional touches */
.premium-launch-step-card::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  width: 3px;
  height: 38px;
  background: linear-gradient(to bottom, var(--primary), var(--accent));
  border-radius: 3px;
  opacity: 0.25;
  pointer-events: none;
}

/* Fully responsive & dynamic */
@media (max-width: 900px) {
  .premium-launch-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 640px) {
  .premium-launch-steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .premium-launch-step-card {
    flex-direction: row;
    min-height: auto;
    padding: 14px 14px;
    gap: 12px;
  }

  .step-visual {
    width: 46px;
    min-width: 46px;
  }

  .launch-step-number {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
  }

  .step-icon {
    font-size: 1.15rem;
  }

  .step-title {
    font-size: 0.92rem;
  }

  .step-desc {
    font-size: 0.82rem;
    line-height: 1.5;
  }
}

/* Make sure it works inside panels without clipping */
.launch-steps.premium-launch-steps {
  position: relative;
  z-index: 1;
}

/* Small enhancement for the section head above it */
.panel .section-head + .premium-launch-steps {
  margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════════
   PROFESSIONAL LAYER 5 — Dynamic, Responsive & Unique Design
   Smart push: Mobile Compare (key conversion tool), unique visual language,
   stronger dynamic interactions, fluid responsiveness, signature professional touches.
   Structure remains solid; everything more alive, unique, and perfect on all devices.
   ═══════════════════════════════════════════════════════════ */

/* --- Mobile Compare Sheet — Unique & Highly Usable --- */
.premium-compare-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 24px auto 0;
  padding: 14px 22px;
  background: linear-gradient(135deg, rgba(94, 163, 255, 0.1), rgba(68, 215, 182, 0.08));
  border: 1px solid rgba(94, 163, 255, 0.25);
  border-radius: 16px;
  color: var(--text);
  font-weight: 600;
  transition: all 0.25s var(--ease-smooth);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.premium-compare-toggle:hover {
  background: linear-gradient(135deg, rgba(94, 163, 255, 0.18), rgba(68, 215, 182, 0.12));
  border-color: rgba(94, 163, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.compare-toggle-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
}

.compare-toggle-content small {
  font-weight: 400;
  opacity: 0.8;
  font-size: 0.82rem;
}

.compare-icon {
  font-size: 1.4rem;
  opacity: 0.9;
}

.premium-compare-overlay {
  background: rgba(5, 10, 20, 0.75);
  backdrop-filter: blur(6px);
}

.premium-compare-sheet {
  background: linear-gradient(180deg, #0f1a2f 0%, #09111f 100%);
  border: 1px solid rgba(94, 163, 255, 0.2);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.45);
}

.premium-compare-head {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.compare-head-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.compare-subtitle {
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0.85;
}

.premium-compare-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.premium-compare-close:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.05);
}

.premium-compare-rail {
  padding: 16px;
  display: grid;
  gap: 14px;
  max-height: 65vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.premium-compare-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  transition: all 0.2s var(--ease-smooth);
}

.premium-compare-card.featured {
  border-color: rgba(94, 163, 255, 0.35);
  background: rgba(94, 163, 255, 0.06);
}

.premium-compare-card:hover {
  transform: translateY(-2px);
  border-color: rgba(94, 163, 255, 0.3);
}

.premium-compare-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.mobile-compare-plan {
  font-weight: 700;
  font-size: 1.05rem;
}

.mobile-compare-type {
  font-size: 0.78rem;
  padding: 2px 9px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.premium-compare-price {
  font-size: 1.15rem;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.premium-compare-specs {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 0.88rem;
}

.premium-compare-specs li {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.compare-card-actions .compare-btn {
  width: 100%;
  text-align: center;
}

.compare-sheet-footer {
  padding: 12px 16px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- Dynamic Interactions & Unique Touches --- */
.premium-billing-toggle,
.card-billing-toggle {
  transition: all 0.3s var(--ease-smooth);
}

.billing-switch-option,
.toggle-track {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.premium-faq-item[open],
.premium-faq-item:has(.faq-question[aria-expanded="true"]) {
  border-color: rgba(94, 163, 255, 0.3);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
}

.premium-compare-card .mobile-compare-price strong {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* --- Enhanced Responsiveness & Fluid Design --- */
@media (max-width: 720px) {
  .premium-compare-rail {
    grid-template-columns: 1fr;
    gap: 12px;
    max-height: 58vh;
  }

  .premium-compare-sheet {
    border-radius: 18px 18px 0 0;
  }

  .premium-compare-toggle {
    max-width: 100%;
    padding: 12px 18px;
  }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .premium-compare-rail {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Unique Professional Signature Elements --- */
.section-badge {
  background: linear-gradient(135deg, rgba(94, 163, 255, 0.12), rgba(68, 215, 182, 0.08));
  border: 1px solid rgba(94, 163, 255, 0.2);
  padding: 4px 14px;
  font-weight: 600;
  letter-spacing: 0.8px;
}

.premium-section-head .section-lead {
  font-style: italic;
  opacity: 0.9;
}

/* --- Dynamic Cards & Trust Amplification --- */
.premium-pricing-card .pricing-badges {
  gap: 6px;
}

.spotlight-badge {
  transition: all 0.2s ease;
}

.premium-pricing-card:hover .spotlight-badge {
  transform: scale(1.03);
}

/* --- Final Responsive Grids & Dynamic States --- */
.premium-cards-grid,
.premium-plans-grid,
.premium-stats-grid,
.premium-support-grid {
  transition: gap 0.2s ease;
}

@media (max-width: 480px) {
  .premium-cards-grid,
  .premium-plans-grid {
    gap: 14px;
  }

  .home-proof-card {
    padding: 14px 16px;
  }
}

/* --- Accessibility & Polish for Unique Professional Feel --- */
.premium-compare-toggle:focus-visible,
.premium-compare-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

[data-aos] {
  transition: opacity 0.4s ease, transform 0.4s var(--ease-smooth);
}

/* --- Subtle Unique Depth Across Site --- */
.premium-header,
.premium-footer {
  position: relative;
}

.premium-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(94, 163, 255, 0.15), transparent);
}