/* ═══════════════════════════════════════════════════════
   Kuliso — Global Visual Polish
   Loaded on all public-facing pages
═══════════════════════════════════════════════════════ */

/* ── TEXT SELECTION ── */
::selection {
  background: rgba(124,58,237,0.16);
  color: #0f1729;
}
::-moz-selection {
  background: rgba(124,58,237,0.16);
  color: #0f1729;
}

/* ── CUSTOM SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(124,58,237,0.22);
  border-radius: 100px;
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(124,58,237,0.42);
}

/* ── FONT + TEXT RENDERING ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* ── FOCUS RINGS ── */
:focus-visible {
  outline: 2.5px solid rgba(124,58,237,0.55);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ── FOOTER FONT CONSISTENCY ── */
/* Footer uses inline font-family override — force brand font */
footer, footer a, footer div, footer span, footer p {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
footer a {
  transition: color 0.15s ease !important;
}
footer a:hover {
  color: rgba(255,255,255,0.95) !important;
  text-decoration: none !important;
}

/* ── LINK UNDERLINE OFFSET ── */
a { text-underline-offset: 3px; }

/* ── IMAGE RENDERING ── */
img {
  image-rendering: auto;
  max-width: 100%;
  height: auto;
}

/* ── SMOOTH TRANSITIONS FOR NAV LOGO ── */
.nav-logo img {
  transition: transform 0.2s ease;
}
.nav-logo:hover img {
  transform: scale(1.05);
}
.nav-logo {
  transition: opacity 0.2s ease;
}
.nav-logo:hover {
  opacity: 0.85;
  text-decoration: none;
}

/* ── NAV SCROLLED STATE ── */
.nav.scrolled {
  box-shadow: 0 4px 28px rgba(0,0,0,0.09);
}

/* ── GRADIENT NAV BORDER ACCENT ── */
/* Note: nav is position:fixed, ::after positions relative to it */
.nav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(124,58,237,0.2) 30%,
    rgba(13,148,136,0.2) 70%,
    transparent 100%
  );
  pointer-events: none;
}

/* ── BUTTON ACTIVE PRESS ── */
.btn-hero-primary:active,
.btn-hero-secondary:active,
.btn-primary:active,
.btn-teal:active,
.pricing-btn:active,
.btn-prog:active,
.btn-prog-primary:active,
.sandbox-start-btn:active {
  transform: translateY(1px) scale(0.98) !important;
}

/* ── STAT NUMBER TABULAR FIGURES ── */
.stat-num, .pricing-price, .prog-price {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

/* ── SECTION TYPOGRAPHY IMPROVEMENTS ── */
.section-title {
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.section-sub,
.hero-sub,
.feat-desc {
  line-height: 1.72;
}

/* ── CARD GPU COMPOSITING ── */
.prog-card,
.pricing-card,
.early-perk,
.stat-card,
.feat-browser {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ── PROGRAMS CARD REVEAL ── */
/* These classes are added via JS/HTML; ensure smooth stagger */
.prog-card.reveal-pop:nth-child(1) { transition-delay: 0s; }
.prog-card.reveal-pop:nth-child(2) { transition-delay: 0.09s; }
.prog-card.reveal-pop:nth-child(3) { transition-delay: 0.18s; }

/* ── MOBILE TOUCH TARGETS ── */
@media (max-width: 768px) {
  .btn-hero-primary,
  .btn-hero-secondary,
  .btn-prog,
  .btn-prog-primary,
  .pricing-btn,
  .btn-primary,
  .btn-teal {
    min-height: 52px;
    font-size: 16px;
  }
  .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* Body text slightly larger on mobile for readability */
  body {
    font-size: 16px;
  }
  p, li, .feat-desc, .section-sub {
    line-height: 1.75;
  }
}

/* ── PROGRAMS PAGE HERO SPACING ── */
@media (max-width: 640px) {
  .hero {
    padding-top: 72px !important;
  }
  .hero h1 {
    font-size: clamp(1.85rem, 7vw, 2.6rem) !important;
  }
}

/* ── PRICING CARD IMPROVEMENTS ── */
.pricing-card {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}

/* ── SMOOTH FOCUS TRANSITION ── */
.form-input,
.form-select,
.chat-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus,
.form-select:focus,
.chat-input:focus {
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}

/* ── SECTION ENTRY ANIMATION ── */
/* Works in tandem with animations.css reveal system */
.section-head.reveal,
.section-head > .section-title {
  will-change: opacity, transform;
}

/* ── PROGRAMS PAGE COMPARISON TABLE ── */
.comparison-table tbody tr {
  transition: background 0.15s ease;
}
.comparison-table tbody tr:hover {
  background: rgba(124,58,237,0.02);
}

/* ── FAQ ACCORDION POLISH ── */
.faq-item {
  transition: background 0.2s ease;
}
.faq-item.open {
  background: rgba(124,58,237,0.02);
}

/* ── TESTIMONIAL CARD HOVER ── */
.testimonial-card,
.review-card {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.3s ease;
}
.testimonial-card:hover,
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.07);
}

/* ── DEMO PAGE ENHANCEMENTS ── */
.step-wrap {
  -webkit-font-smoothing: antialiased;
}
.nav-step-dot {
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.nav-step-dot.active {
  transform: scale(1.1);
}
.nav-step-dot.done {
  transform: scale(1.05);
}

/* ── PROGRESS BAR POLISH ── */
.progress-fill {
  box-shadow: 0 0 8px rgba(124,58,237,0.3);
}

/* ── URGENCY BANNER POLISH ── */
.urgency-banner {
  letter-spacing: 0.01em;
  box-shadow: 0 2px 12px rgba(124,58,237,0.2);
}

/* ── FOOTER GRID ── */
@media (max-width: 600px) {
  footer > div > div:first-child {
    margin-bottom: 8px;
  }
}