.theme-toggle:hover {
  background:rgba(255,255,255,0.12) !important}

.hero-canvas {
  position:relative;
  background:var(--hero-bg);
  padding:10rem 0 5rem;
  overflow:hidden}

.hero-canvas::before,.hero-canvas::after {
  content:'';
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:0.6;
  animation:orbFloat 12s ease-in-out infinite alternate;
  pointer-events:none}

.hero-canvas::before {
  width:600px;
  height:600px;
  top:-160px;
  left:-180px;
  background:radial-gradient(circle,rgba(99,102,241,0.65) 0%,transparent 70%)}

.hero-canvas::after {
  width:500px;
  height:500px;
  bottom:-120px;
  right:-100px;
  background:radial-gradient(circle,rgba(139,92,246,0.55) 0%,rgba(34,211,238,0.3) 60%,transparent 80%);
  animation-delay:-6s}

.hero-orb-mid {
  position:absolute;
  width:400px;
  height:400px;
  border-radius:50%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(34,211,238,0.12) 0%,transparent 70%);
  filter:blur(60px);
  animation:orbFloat 9s ease-in-out infinite alternate-reverse;
  pointer-events:none}

@keyframes orbFloat {
  from {
  transform:translate(0,0) scale(1)}

to {
  transform:translate(30px,20px) scale(1.08)}

}

.hero-grid-overlay {
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%);
  pointer-events:none}

.hero-canvas .hero-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.35rem 0.875rem;
  background:rgba(99,102,241,0.15);
  border:1px solid rgba(99,102,241,0.35);
  border-radius:1019px;
  font-size:0.75rem;
  font-weight:600;
  color:#a5b4fc;
  letter-spacing:0.05em;
  text-transform:uppercase;
  margin-bottom:1.5rem;
  animation:fadeUp 0.6s ease forwards}

.hero-canvas h1 {
  font-size:clamp(2.5rem,7vw,4.5rem) !important;
  font-weight:900 !important;
  line-height:1.08 !important;
  letter-spacing:-0.04em !important;
  color:#f1f5f9 !important;
  max-width:820px;
  margin:0 auto 1.25rem !important;
  animation:fadeUp 0.6s ease 0.1s both}

.hero-canvas .hero-gradient-word {
  background:linear-gradient(135deg,#a78bfa 0%,#6366f1 35%,#22d3ee 75%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}

.hero-canvas .hero-sub {
  color:var(--hero-muted) !important;
  font-size:clamp(1rem,2vw,1.2rem) !important;
  max-width:540px;
  line-height:1.7 !important;
  margin:0 auto 2.5rem !important;
  animation:fadeUp 0.6s ease 0.2s both}

.hero-split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  position:relative;
  z-index:2}

.hero-text-col {
  text-align:left;
  padding-right:1rem}

.hero-text-col .hero-eyebrow {
  margin-left:0}

.hero-canvas .hero-text-col h1 {
  margin-left:0 !important;
  max-width:640px}

.hero-canvas .hero-text-col .hero-sub {
  margin-left:0 !important;
  margin-right:0 !important}

.hero-canvas .hero-text-col .hero-subactions {
  align-items:flex-start}

.hero-canvas .hero-text-col .hero-link-buttons {
  justify-content:flex-start}

.hero-visual-col {
  display:flex;
  flex-direction:column;
  gap:0.875rem}

.hero-visual-col .hero-chat-glass {
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  padding:1rem;
  box-shadow:0 8px 40px rgba(0,0,0,0.2)}

.hero-visual-col .hero-chat-chips {
  justify-content:flex-start}

.hero-visual-col .chat-chip {
  font-size:0.75rem}

.hero-canvas .hero-actions {
  animation:fadeUp 0.6s ease 0.3s both}

.hero-canvas .btn-primary {
  background:linear-gradient(135deg,var(--p-indigo),var(--p-violet)) !important;
  color:#fff !important;
  border:none !important;
  border-radius:8px !important;
  padding:1rem 2.25rem !important;
  font-size:0.9375rem !important;
  box-shadow:0 0 30px rgba(99,102,241,0.5),inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition:transform 0.2s var(--ease-spring),box-shadow 0.2s ease !important}

.hero-canvas .btn-primary:hover {
  transform:translateY(-2px) !important;
  box-shadow:0 8px 40px rgba(99,102,241,0.65),inset 0 1px 0 rgba(255,255,255,0.2) !important}

.hero-canvas .btn-ghost {
  background:rgba(255,255,255,0.06) !important;
  color:#f1f5f9 !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  border-radius:8px !important;
  padding:1rem 2.25rem !important;
  font-size:0.9375rem !important;
  transition:background 0.2s ease,transform 0.2s var(--ease-spring) !important}

.hero-canvas .btn-ghost:hover {
  background:rgba(255,255,255,0.1) !important;
  transform:translateY(-2px) !important}

.hero-stats-bar {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
  margin-top:4rem;
  flex-wrap:wrap;
  animation:fadeUp 0.7s ease 0.4s both}

.hero-stat-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:1.25rem 2.5rem;
  border-right:1px solid rgba(255,255,255,0.08)}

.hero-stat-item:last-child {
  border-right:none}

.hero-stat-num {
  font-size:1.75rem;
  font-weight:800;
  color:#f1f5f9;
  letter-spacing:-0.03em;
  line-height:1}

.hero-stat-label {
  font-size:0.75rem;
  color:var(--hero-muted);
  margin-top:0.25rem;
  white-space:nowrap}

@keyframes fadeUp {
  from {
  opacity:0;
  transform:translateY(20px)}

to {
  opacity:1;
  transform:translateY(0)}

}

.calc-wrapper-section {
  background:#f8f9fc;
  padding:4rem 0 2rem}

.calc-shell {
  border:1.5px dashed #cbd5e1 !important;
  background:#f8fafc !important;
  border-radius:16px !important;
  padding:2.25rem !important;
  box-shadow:0 4px 24px rgba(0,0,0,0.02),0 1px 4px rgba(0,0,0,0.01) !important}

.calc-shell-title {
  font-weight:800 !important;
  letter-spacing:-0.03em !important;
  color:#0f172a !important}

.calc-shell-sub {
  color:#64748b !important}

.calc-period {
  background:#f1f5f9 !important;
  border:1px solid #e2e8f0 !important;
  border-radius:1019px !important}

.calc-period-btn {
  border:none !important;
  border-radius:1019px !important;
  color:#64748b !important;
  transition:background 0.15s ease,color 0.15s ease !important}

.calc-period-btn.active {
  background:linear-gradient(135deg,var(--p-indigo),var(--p-violet)) !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(99,102,241,0.4) !important}

.calc-period-save {
  background:rgba(16,185,129,0.12) !important;
  color:#10b981 !important;
  border-radius:4px !important}

.calc-vps-btn {
  border:1.5px dashed #cbd5e1 !important;
  border-radius:10px !important;
  background:#fff !important;
  transition:border-color 0.15s ease,box-shadow 0.15s ease,transform 0.15s var(--ease-spring) !important;
  color:#0f172a !important}

.calc-vps-btn:hover {
  border-color:var(--p-indigo) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,0.12) !important;
  transform:translateY(-1px) !important;
  background:#fff !important}

.calc-vps-btn.active {
  border-color:var(--p-indigo) !important;
  border-left-color:var(--p-indigo) !important;
  border-right-color:var(--p-indigo) !important;
  border-top-color:var(--p-indigo) !important;
  border-bottom-color:var(--p-indigo) !important;
  background:rgba(99,102,241,0.06) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,0.15) !important}

.calc-vps-btn.active strong {
  color:var(--p-indigo) !important}

.calc-vps-btn em {
  color:var(--p-indigo) !important}

.calc-price-row {
  border-top:1px solid #f1f5f9 !important}

.calc-price-amount {
  background:linear-gradient(135deg,#0f172a,#334155);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-weight:900 !important;
  letter-spacing:-0.05em !important}

.calc-price-saving {
  color:var(--p-emerald) !important}

.calc-price-currency {
  color:#0f172a !important}

.calc-cta {
  background:linear-gradient(135deg,var(--p-indigo),var(--p-violet)) !important;
  color:#fff !important;
  border:none !important;
  border-radius:10px !important;
  font-size:1rem !important;
  font-weight:700 !important;
  box-shadow:0 4px 20px rgba(99,102,241,0.4),inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition:transform 0.2s var(--ease-spring),box-shadow 0.2s ease !important}

.calc-cta:hover {
  transform:translateY(-2px) !important;
  box-shadow:0 8px 30px rgba(99,102,241,0.55),inset 0 1px 0 rgba(255,255,255,0.2) !important;
  background:linear-gradient(135deg,#5558ea,#7c3aed) !important}

.calc-slider::-webkit-slider-thumb {
  background:var(--p-indigo) !important}

.calc-slider::-moz-range-thumb {
  background:var(--p-indigo) !important}

.products-grid-section {
  background:#f8f9fc;
  padding:1rem 0 4rem}

.solution-card {
  background:#fff !important;
  border:1.5px solid #e8ecf4 !important;
  border-top:none !important;
  border-left:none !important;
  border-right:none !important;
  border-bottom:none !important;
  border-radius:14px !important;
  padding:1.5rem 1.25rem !important;
  transition:transform 0.22s var(--ease-spring),box-shadow 0.22s ease,border-color 0.2s ease !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.05),0 1px 8px rgba(0,0,0,0.04) !important;
  position:relative;
  overflow:hidden}

.solution-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(99,102,241,0.05),rgba(139,92,246,0.03));
  opacity:0;
  transition:opacity 0.2s ease;
  pointer-events:none;
  border-radius:inherit}

.solution-card:hover {
  transform:translateY(-4px) !important;
  box-shadow:0 12px 32px rgba(99,102,241,0.15),0 2px 8px rgba(0,0,0,0.06) !important;
  border-color:rgba(99,102,241,0.3) !important;
  background:#fff !important}

.solution-card:hover::before {
  opacity:1}

.solution-card .card-icon {
  background:linear-gradient(135deg,rgba(99,102,241,0.12),rgba(139,92,246,0.08)) !important;
  border:1.5px solid rgba(99,102,241,0.2) !important;
  border-top:none !important;
  border-left:none !important;
  border-right:none !important;
  border-bottom:none !important;
  border-radius:10px !important;
  transition:background 0.2s ease,transform 0.2s var(--ease-spring) !important}

.solution-card:hover .card-icon {
  background:linear-gradient(135deg,rgba(99,102,241,0.2),rgba(139,92,246,0.15)) !important;
  transform:scale(1.05)}

.solution-card .card-icon svg {
  color:var(--p-indigo) !important}

.solution-card h3 {
  font-weight:700 !important;
  color:#0f172a !important;
  font-size:0.9375rem !important}

.solution-card p {
  color:#64748b !important}

.trust-strip {
  background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#0f172a 100%);
  padding:3.5rem 0;
  position:relative;
  overflow:hidden}

.trust-strip::before {
  content:'';
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:50px 50px;
  pointer-events:none}

.stat-number {
  font-size:1.875rem !important;
  font-weight:800 !important;
  background:linear-gradient(135deg,#f1f5f9,#a5b4fc);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-0.03em;
  line-height:1 !important}

.stat-label {
  color:rgba(148,163,184,0.85) !important;
  font-size:0.8125rem !important;
  margin-top:0.25rem;
  display:block}

.channel-chip {
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  border-top:none !important;
  border-left:none !important;
  border-right:none !important;
  border-bottom:none !important;
  border-radius:1019px !important;
  color:rgba(241,245,249,0.75) !important;
  font-size:0.8125rem !important;
  padding:0.45rem 0.9rem !important;
  gap:0.45rem !important;
  transition:background 0.15s ease,color 0.15s ease,transform 0.15s var(--ease-spring) !important}

.channel-chip:hover {
  background:rgba(99,102,241,0.2) !important;
  color:#f1f5f9 !important;
  transform:translateY(-1px)}

.channel-chip svg {
  width:14px !important;
  height:14px !important;
  color:#a5b4fc !important}

.cta-section {
  background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 40%,#0f172a 100%) !important;
  position:relative;
  overflow:hidden}

.cta-section::before {
  content:'';
  position:absolute;
  width:600px;
  height:600px;
  border-radius:50%;
  top:-200px;
  right:-100px;
  background:radial-gradient(circle,rgba(99,102,241,0.35) 0%,transparent 70%);
  filter:blur(60px);
  pointer-events:none}

.cta-section::after {
  content:'';
  position:absolute;
  width:400px;
  height:400px;
  border-radius:50%;
  bottom:-150px;
  left:-80px;
  background:radial-gradient(circle,rgba(34,211,238,0.2) 0%,transparent 70%);
  filter:blur(50px);
  pointer-events:none}

.cta-section h2 {
  color:#f1f5f9 !important;
  font-weight:800 !important;
  letter-spacing:-0.03em !important;
  font-size:clamp(1.75rem,4vw,2.5rem) !important;
  position:relative;
  z-index:1}

.cta-section p {
  color:rgba(148,163,184,0.9) !important;
  position:relative;
  z-index:1}

.cta-section .btn-primary {
  background:linear-gradient(135deg,var(--p-indigo),var(--p-violet)) !important;
  color:#fff !important;
  border:none !important;
  border-radius:8px !important;
  padding:1rem 2.25rem !important;
  box-shadow:0 0 30px rgba(99,102,241,0.5),inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition:transform 0.2s var(--ease-spring),box-shadow 0.2s ease !important;
  position:relative;
  z-index:1}

.cta-section .btn-primary:hover {
  transform:translateY(-2px) !important;
  box-shadow:0 8px 40px rgba(99,102,241,0.65),inset 0 1px 0 rgba(255,255,255,0.2) !important}

.cta-section .btn-ghost {
  background:rgba(255,255,255,0.07) !important;
  color:#f1f5f9 !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  border-radius:8px !important;
  padding:1rem 2.25rem !important;
  transition:background 0.2s ease,transform 0.2s var(--ease-spring) !important;
  position:relative;
  z-index:1}

.cta-section .btn-ghost:hover {
  background:rgba(255,255,255,0.12) !important;
  transform:translateY(-2px) !important}

.site-footer {
  background:#09090f !important;
  border-top:1px solid rgba(255,255,255,0.07) !important}

.site-footer,.site-footer * {
  color:rgba(148,163,184,0.9)}

.footer-brand .footer-logo {
  color:#f1f5f9 !important}

.footer-brand p {
  color:rgba(148,163,184,0.85) !important}

.footer-col h5 {
  color:rgba(241,245,249,0.6) !important;
  letter-spacing:0.06em}

.footer-col a {
  color:rgba(148,163,184,0.85) !important;
  transition:color 0.15s ease !important}

.footer-col a:hover {
  color:#f1f5f9 !important}

.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.06) !important;
  color:rgba(148,163,184,0.65) !important}

.footer-social a {
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:8px !important;
  color:rgba(148,163,184,0.7) !important;
  transition:background 0.15s ease,color 0.15s ease !important}

.footer-social a:hover {
  background:rgba(99,102,241,0.2) !important;
  color:#f1f5f9 !important}

.btn-primary:not(.hero-canvas .btn-primary):not(.cta-section .btn-primary) {
  background:linear-gradient(135deg,var(--p-indigo),var(--p-violet)) !important;
  color:#fff !important;
  border:none !important;
  border-radius:8px !important;
  box-shadow:0 2px 12px rgba(99,102,241,0.35) !important;
  transition:transform 0.15s var(--ease-spring),box-shadow 0.15s ease !important}

.btn-primary:not(.hero-canvas .btn-primary):not(.cta-section .btn-primary):hover {
  transform:translateY(-1px) !important;
  box-shadow:0 6px 20px rgba(99,102,241,0.5) !important}

.section-wave {
  line-height:0;
  overflow:hidden}

.section-wave svg {
  display:block;
  width:100%}


@media (max-width:768px) {
  .hero-canvas {
  padding:8rem 1.25rem 3.5rem}

.hero-stat-item {
  padding:1rem 1.5rem}

.hero-stat-num {
  font-size:1.375rem}

.trust-strip {
  padding:2.5rem 0}

}


@media (max-width:480px) {
  .hero-stat-item {
  padding:0.75rem 1rem}

}

.mobile-overlay {
  background:rgba(9,9,15,0.97) !important;
  backdrop-filter:blur(20px) !important}

.mobile-overlay a {
  color:rgba(241,245,249,0.8) !important}

.mobile-overlay a:hover,.mobile-overlay a.active {
  background:rgba(255,255,255,0.07) !important;
  color:#f1f5f9 !important}

.mobile-overlay a.nav-cta {
  background:linear-gradient(135deg,var(--p-indigo),var(--p-violet)) !important;
  color:#fff !important;
  border:none !important;
  border-radius:8px !important;
  box-shadow:0 4px 20px rgba(99,102,241,0.4) !important}

.mobile-overlay a.nav-cta:hover {
  opacity:0.9 !important}

[data-theme="dark"] body,[data-theme="dark"] .calc-wrapper-section,[data-theme="dark"] .products-grid-section {
  background:#1e1e1e !important}

[data-theme="dark"] .solution-card {
  background:#2d2d30 !important;
  border-color:rgba(255,255,255,0.08) !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.3),0 1px 8px rgba(0,0,0,0.2) !important}

[data-theme="dark"] .solution-card h3,[data-theme="dark"] .solution-card p {
  color:#e0e0e0 !important}

.section .max-w-6xl > div[style*="background:var(--bg-card)"] {
  background:#fff !important;
  border:1.5px solid #e8ecf4 !important;
  border-top:none !important;
  border-left:none !important;
  border-right:none !important;
  border-bottom:none !important;
  border-radius:14px !important;
  padding:1.75rem 1.5rem !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.05),0 1px 8px rgba(0,0,0,0.04) !important;
  transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.22s ease,border-color 0.2s ease !important;
  position:relative;
  overflow:hidden}

.section .max-w-6xl > div[style*="background:var(--bg-card)"]::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(99,102,241,0.04),rgba(139,92,246,0.02));
  opacity:0;
  transition:opacity 0.2s ease;
  pointer-events:none;
  border-radius:inherit}

.section .max-w-6xl > div[style*="background:var(--bg-card)"]:hover {
  transform:translateY(-4px) !important;
  box-shadow:0 12px 32px rgba(99,102,241,0.12),0 2px 8px rgba(0,0,0,0.06) !important;
  border-color:rgba(99,102,241,0.25) !important}

.section .max-w-6xl > div[style*="background:var(--bg-card)"]:hover::before {
  opacity:1}

.section .max-w-6xl > div[style*="background:var(--bg-card)"] > div > div[style*="background:rgba"] {
  border-radius:10px !important;
  transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important}

.section .max-w-6xl > div[style*="background:var(--bg-card)"]:hover > div > div[style*="background:rgba"] {
  transform:scale(1.08) !important}

.section .max-w-6xl > div[style*="background:var(--bg-card)"] h3 {
  font-weight:700 !important;
  color:#0f172a !important;
  font-size:1rem !important;
  letter-spacing:-0.01em}

.section .max-w-6xl > div[style*="background:var(--bg-card)"] p {
  color:#64748b !important;
  font-size:0.875rem !important;
  line-height:1.65 !important}

.section-label {
  border:none !important;
  border-radius:1019px !important;
  font-weight:600 !important;
  letter-spacing:0.04em !important;
  padding:0.35rem 0.9rem !important}

.section h2.text-3xl {
  font-weight:800 !important;
  letter-spacing:-0.03em !important;
  color:#0f172a !important;
  font-size:clamp(1.75rem,4vw,2.5rem) !important;
  line-height:1.15 !important}

.section p.text-lg.text-muted {
  color:#64748b !important;
  font-size:1.0625rem !important;
  line-height:1.65 !important}

.text-center {
  text-align:center !important}

.text-center * {
  text-align:center !important}

#calc {
  background:#f8f9fc !important;
  border-top:1px solid #e8ecf4 !important}

#calc h2 {
  font-weight:800 !important;
  letter-spacing:-0.03em !important;
  color:#0f172a !important}

#calc p {
  color:#64748b !important}

.section {
  padding:8.5rem 0 !important}

.section-alt {
  background:#f8f9fc !important;
  padding:8.5rem 0 !important}

.section-alt table {
  border-radius:16px !important;
  overflow:hidden;
  border:1px solid #e2e8f0 !important;
  box-shadow:0 10px 30px rgba(0,0,0,0.02),0 1px 3px rgba(0,0,0,0.01) !important;
  border-spacing:0 !important;
  border-collapse:separate !important}

.section-alt thead tr {
  background:#f8fafc !important;
  border-bottom:2px solid #e2e8f0 !important}

.section-alt th {
  color:#475569 !important;
  font-weight:700 !important;
  font-size:0.9rem !important;
  text-transform:uppercase !important;
  letter-spacing:0.06em !important;
  padding:24px 28px !important;
  border-bottom:2px solid #e2e8f0 !important}

.section-alt td {
  border-bottom:1px solid #e2e8f0 !important;
  padding:24px 28px !important;
  transition:background 0.15s ease;
  vertical-align:middle}

.section-alt tbody tr:hover td {
  background:rgba(99,102,241,0.02) !important}

.section-alt tbody tr:last-child td {
  border-bottom:none !important}

.section-alt td:nth-child(2),.section-alt th:nth-child(2) {
  background:rgba(99,102,241,0.04) !important;
  border-left:1px solid rgba(99,102,241,0.08) !important;
  border-right:1px solid rgba(99,102,241,0.08) !important}

.section-alt tbody tr:hover td:nth-child(2) {
  background:rgba(99,102,241,0.06) !important}

section[style*="background:rgba"] {
  background:linear-gradient(135deg,#f8f9fc,#f1f5f9) !important;
  border-top:1px solid #e8ecf4 !important;
  border-bottom:1px solid #e8ecf4 !important}

section[style*="background:rgba"] h4 {
  color:#475569 !important;
  letter-spacing:0.08em !important}

section[style*="background:rgba"] p {
  color:#64748b !important}

section[style*="background:rgba"] .btn-ghost {
  background:#fff !important;
  color:#334155 !important;
  border:1.5px solid #e2e8f0 !important;
  border-radius:10px !important;
  font-weight:600 !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.04) !important;
  transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.2s ease,border-color 0.2s ease,color 0.2s ease !important}

section[style*="background:rgba"] .btn-ghost:hover {
  transform:translateY(-2px) !important;
  box-shadow:0 6px 16px rgba(99,102,241,0.12) !important;
  border-color:rgba(99,102,241,0.3) !important;
  color:#4f46e5 !important}

.cta-section {
  background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 40%,#0f172a 100%) !important;
  position:relative;
  overflow:hidden}

.cta-section::before {
  content:'';
  position:absolute;
  width:600px;
  height:600px;
  border-radius:50%;
  top:-200px;
  right:-100px;
  background:radial-gradient(circle,rgba(99,102,241,0.35) 0%,transparent 70%);
  filter:blur(60px);
  pointer-events:none}

.cta-section::after {
  content:'';
  position:absolute;
  width:400px;
  height:400px;
  border-radius:50%;
  bottom:-150px;
  left:-80px;
  background:radial-gradient(circle,rgba(34,211,238,0.2) 0%,transparent 70%);
  filter:blur(50px);
  pointer-events:none}

.cta-section h2 {
  color:#f1f5f9 !important;
  font-weight:800 !important;
  letter-spacing:-0.03em !important;
  position:relative;
  z-index:1}

.cta-section p {
  color:rgba(148,163,184,0.9) !important;
  position:relative;
  z-index:1}

.cta-section .btn-primary {
  background:linear-gradient(135deg,var(--p-indigo),var(--p-violet)) !important;
  color:#fff !important;
  border:none !important;
  border-radius:10px !important;
  box-shadow:0 0 30px rgba(99,102,241,0.5),inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.2s ease !important;
  position:relative;
  z-index:1}

.cta-section .btn-primary:hover {
  transform:translateY(-2px) !important;
  box-shadow:0 8px 40px rgba(99,102,241,0.65),inset 0 1px 0 rgba(255,255,255,0.2) !important}

.cta-section .btn-ghost {
  background:rgba(255,255,255,0.07) !important;
  color:#f1f5f9 !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  border-radius:10px !important;
  transition:background 0.2s ease,transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
  position:relative;
  z-index:1}

.cta-section .btn-ghost:hover {
  background:rgba(255,255,255,0.12) !important;
  transform:translateY(-2px) !important}

.hero-canvas {
  position:relative;
  overflow:hidden;
  background:var(--hero-bg,var(--bg));
  border-bottom:none !important}

.hero-canvas .container {
  max-width:820px;
  margin-left:auto;
  margin-right:auto}

.hero-canvas h1 {
  max-width:720px;
  margin-left:auto !important;
  margin-right:auto !important}

.hero-canvas .hero-sub {
  max-width:540px;
  margin-left:auto !important;
  margin-right:auto !important}

.hero-canvas::before,.hero-canvas::after {
  content:'';
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:0.6;
  animation:orbFloat 12s ease-in-out infinite alternate;
  pointer-events:none}

.hero-canvas::before {
  width:600px;
  height:600px;
  top:-160px;
  left:-180px;
  background:radial-gradient(circle,rgba(99,102,241,0.35) 0%,transparent 70%)}

.hero-canvas::after {
  width:500px;
  height:500px;
  bottom:-120px;
  right:-100px;
  background:radial-gradient(circle,rgba(139,92,246,0.3) 0%,rgba(34,211,238,0.2) 60%,transparent 80%);
  animation-delay:-6s}

.hero-orb-mid {
  position:absolute;
  width:400px;
  height:400px;
  border-radius:50%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  filter:blur(60px);
  animation:orbFloat 9s ease-in-out infinite alternate-reverse;
  pointer-events:none}

.hero-grid-overlay {
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(0,0,0,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.03) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%);
  pointer-events:none}

[data-theme="dark"] .hero-canvas::before {
  background:radial-gradient(circle,rgba(99,102,241,0.4) 0%,transparent 70%)}

[data-theme="dark"] .hero-canvas::after {
  background:radial-gradient(circle,rgba(139,92,246,0.35) 0%,rgba(34,211,238,0.2) 60%,transparent 80%)}

[data-theme="dark"] .hero-grid-overlay {
  background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px)}

@keyframes orbFloat {
  from {
  transform:translate(0,0) scale(1)}

to {
  transform:translate(30px,20px) scale(1.08)}

}

.section code {
  background:#f1f5f9 !important;
  color:#4f46e5 !important;
  border:1px solid #e2e8f0 !important;
  border-radius:5px !important;
  padding:0.125rem 0.4rem !important;
  font-size:0.8125rem !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

html:not([data-theme="dark"]) .mega-menu-inner {
  background:rgba(255,255,255,0.98) !important;
  backdrop-filter:blur(20px) !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  box-shadow:0 10px 30px rgba(0,0,0,0.1) !important}

html:not([data-theme="dark"]) .mega-col h5 {
  border-bottom-color:rgba(0,0,0,0.08) !important}

html:not([data-theme="dark"]) .mega-col a {
  color:rgba(0,0,0,0.6) !important}

html:not([data-theme="dark"]) .mega-col a:hover {
  color:#000 !important}

html:not([data-theme="dark"]) .mobile-overlay {
  background:rgba(255,255,255,0.98) !important;
  backdrop-filter:blur(20px) !important}

html:not([data-theme="dark"]) .mobile-overlay a {
  color:rgba(0,0,0,0.7) !important}

html:not([data-theme="dark"]) .mobile-overlay a:hover {
  background:rgba(0,0,0,0.04) !important;
  color:#000 !important}

html:not([data-theme="dark"]) .mobile-menu-divider {
  background:rgba(0,0,0,0.1) !important}

html:not([data-theme="dark"]) .mobile-grid-apps a {
  background:rgba(0,0,0,0.02) !important;
  border-color:rgba(0,0,0,0.06) !important;
  color:rgba(0,0,0,0.7) !important}

html:not([data-theme="dark"]) .mobile-grid-apps a:hover {
  background:rgba(0,0,0,0.04) !important;
  color:#000 !important}

html:not([data-theme="dark"]) .mobile-menu-section-title {
  color:#6366f1 !important}

html:not([data-theme="dark"]) .mobile-overlay a.nav-cta {
  background:linear-gradient(135deg,#6366f1,#8b5cf6) !important;
  color:#fff !important}

.header-inner {
  padding:0.5rem 1.5rem 0.5rem 10rem}

.logo-profile {
  position:absolute !important;
  left:calc(1.5rem - 4px) !important;
  top:20px !important;
  transform:none !important}

.logo-profile img {
  width:96px;
  height:96px;
  border:none !important;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(99,102,241,0.3));
  border-radius:0 !important}

.logo-profile.scrolled img {
  width:54px;
  height:54px}

.calc-vps-btn {
  border:1.5px solid #cbd5e1 !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.04) !important}

.calc-vps-btn:hover {
  border-color:#6366f1 !important;
  box-shadow:0 4px 12px rgba(99,102,241,0.12) !important}

[data-theme="dark"] .calc-vps-btn {
  border:1.5px solid #3a3a3c !important}

.calc-slider-row .calc-slider {
  margin-left:0.25rem !important;
  width:calc(100% - 0.5rem) !important}

.az-main {
  padding-left:20px !important}

html:not([data-theme="dark"]) .hero-canvas .btn-ghost {
  background:rgba(0,0,0,0.04) !important;
  color:#334155 !important;
  border:1px solid rgba(0,0,0,0.1) !important}

html:not([data-theme="dark"]) .hero-canvas .btn-ghost:hover {
  background:rgba(0,0,0,0.08) !important}

.section table:not(.az-table) {
  width:100%;
  border-collapse:collapse}

.section table:not(.az-table) th,.section table:not(.az-table) td {
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-size:0.875rem}

.section table:not(.az-table) th {
  background:var(--bg-secondary,#f1f5f9);
  font-weight:700;
  color:var(--fg)}

.section table:not(.az-table) tbody tr:hover {
  background:rgba(99,102,241,0.03)}

[data-theme="dark"] .section table:not(.az-table) th {
  background:#2a2a2c}

[data-theme="dark"] body,[data-theme="dark"] .section .max-w-6xl > div[style*="background:var(--bg-card)"],[data-theme="dark"] .section .max-w-6xl > div[style*="background:var(--bg-card)"] {
  background:#2d2d30 !important}

[data-theme="dark"] .section .max-w-6xl > div[style*="background:var(--bg-card)"] {
  background:#2d2d30 !important;
  border:1.5px solid #3a3a3c !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.2),0 1px 8px rgba(0,0,0,0.15) !important}

[data-theme="dark"] .section .max-w-6xl > div[style*="background:var(--bg-card)"]:hover {
  box-shadow:0 12px 32px rgba(99,102,241,0.2),0 2px 8px rgba(0,0,0,0.2) !important;
  border-color:rgba(99,102,241,0.35) !important}

[data-theme="dark"] .section .max-w-6xl > div[style*="background:var(--bg-card)"] h3 {
  color:#ededed !important}

[data-theme="dark"] .section .max-w-6xl > div[style*="background:var(--bg-card)"] p {
  color:#a8a8a8 !important}

[data-theme="dark"] .section .max-w-6xl > div[style*="background:var(--bg-card)"]::before {
  background:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(139,92,246,0.04)) !important}

[data-theme="dark"] .section h2.text-3xl {
  color:#f1f5f9 !important}

[data-theme="dark"] .section p.text-lg.text-muted {
  color:#94a3b8 !important}

[data-theme="dark"] #calc {
  background:#1e1e1e !important;
  border-top:1px solid #3a3a3c !important}

[data-theme="dark"] #calc h2 {
  color:#f1f5f9 !important}

[data-theme="dark"] #calc p {
  color:#94a3b8 !important}

[data-theme="dark"] .calc-shell {
  background:#1a1a1e !important;
  border:1.5px dashed #3a3a3c !important;
  box-shadow:0 4px 24px rgba(0,0,0,0.3) !important}

[data-theme="dark"] .calc-shell-title {
  color:#f1f5f9 !important}

[data-theme="dark"] .calc-shell-sub {
  color:#94a3b8 !important}

[data-theme="dark"] .calc-period {
  background:#1e1e1e !important;
  border-color:#3a3a3c !important}

[data-theme="dark"] .calc-period-btn {
  background:#2d2d30 !important;
  color:#a8a8a8 !important;
  border-color:#3a3a3c !important}

[data-theme="dark"] .calc-period-btn:hover {
  color:#f1f5f9 !important;
  background:#3a3a3c !important}

[data-theme="dark"] .calc-period-btn.active {
  background:linear-gradient(135deg,var(--p-indigo),var(--p-violet)) !important;