/* ==========================================================================
   P.Apps — High-Impact Light Mode Visual Showcase (Apple / Stripe / Linear)
   Color System: 90% Light Canvas (#F8FAFC), Pure White Cards (#FFFFFF),
                 Deep Ink (#0F172A), Slate Body (#475569)
                 10% Cobalt Blue Accent (#2563EB / #1D4ED8)
   Physics: cubic-bezier(0.16, 1, 0.3, 1)
   ========================================================================== */

:root {
  --bg-canvas: #F8FAFC;
  --surface-card: #FFFFFF;
  --surface-mockup: rgba(241, 245, 249, 0.85);
  --text-ink: #0F172A;
  --text-body: #475569;
  --text-muted: #94A3B8;
  --border-hairline: rgba(226, 232, 240, 0.85);
  --blue-primary: #2563EB;
  --blue-hover: #1D4ED8;
  --emerald-status: #10B981;
  --amber-status: #F59E0B;
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-canvas);
  color: var(--text-ink);
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  background-color: var(--bg-canvas);
  color: var(--text-ink);
  overflow-x: hidden;
}

::selection {
  background-color: rgba(37, 99, 235, 0.14);
  color: #0F172A;
}

/* Tabular numbers for financial & stock metrics */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* Subtle Light Architectural Dot/Grid Pattern on #F8FAFC Canvas */
.bg-light-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(15, 23, 42, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.028) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 85% 55% at 50% 18%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 55% at 50% 18%, #000 35%, transparent 100%);
}

/* Apple / Stripe Multi-Layered Soft Elevation for Cards */
.apple-card {
  background-color: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 
    0 2px 4px rgba(15, 23, 42, 0.02),
    0 12px 24px -4px rgba(15, 23, 42, 0.06);
  transition: all 0.5s var(--ease-spring);
}

.apple-card:hover {
  border-color: rgba(203, 213, 225, 0.95);
  box-shadow: 
    0 4px 8px rgba(15, 23, 42, 0.03),
    0 20px 40px -10px rgba(15, 23, 42, 0.1);
}

/* Elevated Floating Device Mockup Shadow (Hero Showcase) */
.showcase-window-shadow {
  box-shadow: 
    0 2px 6px rgba(15, 23, 42, 0.03),
    0 24px 48px -12px rgba(15, 23, 42, 0.09),
    0 0 0 1px rgba(226, 232, 240, 0.85);
}

.floating-layer-shadow {
  box-shadow: 
    0 4px 10px rgba(15, 23, 42, 0.04),
    0 28px 54px -10px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(226, 232, 240, 0.9);
}

/* Primary 10% Cobalt Blue Button (#2563EB) */
.btn-cobalt {
  background-color: #2563EB;
  color: #FFFFFF;
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4);
  transition: all 0.5s var(--ease-spring);
}

.btn-cobalt:hover {
  background-color: #1D4ED8;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -5px rgba(37, 99, 235, 0.5);
}

.btn-cobalt:active {
  transform: translateY(0) scale(0.985);
}

/* Secondary Clean Surface Button */
.btn-light-secondary {
  background-color: #FFFFFF;
  color: #1E293B;
  border: 1px solid #E2E8F0;
  box-shadow: 
    0 2px 4px rgba(15, 23, 42, 0.02),
    0 6px 14px -3px rgba(15, 23, 42, 0.04);
  transition: all 0.5s var(--ease-spring);
}

.btn-light-secondary:hover {
  background-color: #F8FAFC;
  border-color: #CBD5E1;
  transform: translateY(-2px);
  box-shadow: 
    0 4px 8px rgba(15, 23, 42, 0.03),
    0 12px 24px -6px rgba(15, 23, 42, 0.08);
}

/* Continuous Subtle Ambient Float for Hero Showcase Layers */
@keyframes floatSlowLeft {
  0%, 100% {
    transform: translate3d(0, 0px, 0);
  }
  50% {
    transform: translate3d(0, -7px, 0);
  }
}

@keyframes floatSlowRight {
  0%, 100% {
    transform: translate3d(0, 0px, 0);
  }
  50% {
    transform: translate3d(0, 6px, 0);
  }
}

.animate-float-left {
  animation: floatSlowLeft 6.5s ease-in-out infinite;
}

.animate-float-right {
  animation: floatSlowRight 7.2s ease-in-out infinite;
}

/* Initial states for GSAP / Fallback Scroll Reveal */
.gsap-reveal {
  opacity: 0;
  transform: translateY(30px);
}

.gsap-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: 
    opacity 0.75s var(--ease-spring),
    transform 0.75s var(--ease-spring);
}

/* Custom Clean Light Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #F8FAFC;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
  border: 2px solid #F8FAFC;
}

::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}