* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; padding: 0; background: #08080B; }
::selection { background: #6E5BF0; color: #fff; }
a { text-decoration: none; color: inherit; }

/* Page-wide violet cursor spotlight. */
#cursorGlow {
  position: fixed; inset: 0; overflow: hidden;
  pointer-events: none; z-index: -1;
  opacity: 0; transition: opacity .5s ease;
}
#cursorGlow .cg-halo, #cursorGlow .cg-core {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  pointer-events: none; will-change: transform;
}
#cursorGlow .cg-halo {
  width: 680px; height: 680px; filter: blur(44px);
  background: radial-gradient(circle, rgba(110,91,240,0.11), rgba(110,91,240,0.035) 45%, transparent 70%);
}
#cursorGlow .cg-core {
  width: 320px; height: 320px; filter: blur(26px);
  background: radial-gradient(circle, rgba(150,130,255,0.24), rgba(124,107,242,0.09) 45%, transparent 68%);
}

/* Template pass slider — viewport fits exactly 3 cards (3×300 + 2×26 gap). */
.tpl-viewport { position: relative; width: 952px; max-width: 100%; margin: 0 auto; }
.tpl-slider {
  display: flex; gap: 26px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 10px 0 28px;
  scrollbar-width: none;
}
.tpl-slider::-webkit-scrollbar { display: none; }
.tpl-slide {
  flex: 0 0 auto; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; align-items: center; gap: 13px;
}
.tpl-arrow {
  position: absolute; top: 42%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(20,20,28,0.6); border: 1px solid rgba(255,255,255,0.14);
  color: #F4F4F7; font: 600 24px/1 Manrope;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5; user-select: none;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .15s ease, transform .15s ease, opacity .2s ease;
}
.tpl-arrow:hover { background: rgba(40,36,70,0.9); }
.tpl-arrow:active { transform: translateY(-50%) scale(0.92); }
.tpl-arrow.is-off { opacity: 0; pointer-events: none; }
.tpl-prev { left: -56px; }
.tpl-next { right: -56px; }
@media (max-width: 1080px) { .tpl-prev { left: -6px; } .tpl-next { right: -6px; } }
@media (hover: none) { .tpl-arrow { display: none; } }

/* Responsive overrides, the source design is fixed-width; these adapt it down. */
@media (max-width: 1000px) {
  .nav-links { display: none !important; }
}
@media (max-width: 920px) {
  .hero { flex-direction: column !important; min-height: auto !important; padding: 92px 24px 48px !important; gap: 6px !important; }
  .hero-copy { order: 2; }
  .hero-phone { order: 1; transform: scale(0.82); transform-origin: top center; margin: 0 0 -150px !important; }
  .hero-title { font-size: 52px !important; letter-spacing: -1.4px !important; }
  .features-grid { grid-template-columns: 1fr !important; }
  .pricing-row { flex-direction: column !important; }
  .templates-row { flex-wrap: wrap !important; }
  .nav-inner { padding: 13px 20px !important; }
  .section { min-height: auto !important; padding-top: 64px !important; padding-bottom: 64px !important; }
}
@media (max-width: 560px) {
  .hero { padding: 84px 20px 40px !important; }
  .hero-title { font-size: 40px !important; letter-spacing: -1.2px !important; }
  .hero-phone { transform: scale(0.64); transform-origin: top center; margin: 0 0 -268px !important; }
  .templates-row { flex-wrap: wrap !important; }
  .section-pad { padding-left: 20px !important; padding-right: 20px !important; }
  .display-lg { font-size: 32px !important; }
}