/* ==========================================================================
   LITTLECREEK FINANCE v3 - DESIGN SYSTEM
   Palette, typo, spacing, animations, utilities
   Inspiration : Revolut x Tickmill
   ========================================================================== */

:root {
  /* ----- DARK PALETTE (sections sombres) ----- */
  --lc-dark-base: #0B1437;
  --lc-dark-mid: #0F1A47;
  --lc-dark-light: #162055;
  --lc-dark-deep: #060D2E;
  --lc-dark-mesh: radial-gradient(at 20% 20%, rgba(123,92,240,0.18) 0%, transparent 50%),
                  radial-gradient(at 80% 80%, rgba(77,166,255,0.14) 0%, transparent 50%),
                  #0B1437;

  /* ----- LIGHT PALETTE (sections claires) ----- */
  --lc-light-base: #F8F9FF;
  --lc-light-pure: #FFFFFF;
  --lc-light-soft: #F2F4FB;
  --lc-light-border: #E8EBF5;

  /* ----- ACCENT (CTA, links, focus) ----- */
  --lc-violet: #7B5CF0;
  --lc-violet-hover: #6A4FDC;
  --lc-violet-soft: rgba(123,92,240,0.12);
  --lc-blue: #4DA6FF;
  --lc-blue-hover: #3A8FE8;
  --lc-gradient: linear-gradient(135deg, #7B5CF0 0%, #4DA6FF 100%);
  --lc-gradient-hover: linear-gradient(135deg, #6A4FDC 0%, #3A8FE8 100%);
  --lc-gradient-vertical: linear-gradient(180deg, #7B5CF0 0%, #4DA6FF 100%);

  /* ----- TEXT ----- */
  --lc-text: #FFFFFF;
  --lc-text-dark: #0B1437;
  --lc-text-secondary: #A8B4CC;
  --lc-text-muted: #6B7A99;
  --lc-text-on-light: #2A3358;
  --lc-text-on-light-secondary: #5A6584;

  /* ----- GLASSMORPHISM ----- */
  --lc-glass-bg: rgba(255,255,255,0.06);
  --lc-glass-bg-strong: rgba(255,255,255,0.10);
  --lc-glass-border: rgba(255,255,255,0.12);
  --lc-glass-blur: blur(12px);
  --lc-glass-blur-strong: blur(20px);

  /* ----- STATES ----- */
  --lc-success: #2ECC71;
  --lc-warning: #F5A623;
  --lc-danger: #E74C3C;
  --lc-info: #4DA6FF;

  /* ----- TYPOGRAPHY ----- */
  --lc-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --lc-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --lc-fw-regular: 400;
  --lc-fw-medium: 500;
  --lc-fw-semibold: 600;
  --lc-fw-bold: 700;
  --lc-fw-extrabold: 800;

  /* Type scale (mobile-first, scale up in breakpoints) */
  --lc-fs-xs: 12px;
  --lc-fs-sm: 14px;
  --lc-fs-base: 16px;
  --lc-fs-lg: 18px;
  --lc-fs-xl: 20px;
  --lc-fs-2xl: 24px;
  --lc-fs-3xl: 30px;
  --lc-fs-4xl: 36px;
  --lc-fs-5xl: 48px;
  --lc-fs-h1: 44px;
  --lc-fs-h1-desktop: 72px;

  --lc-lh-tight: 1.1;
  --lc-lh-snug: 1.3;
  --lc-lh-normal: 1.5;
  --lc-lh-relaxed: 1.7;

  /* ----- SPACING ----- */
  --lc-sp-1: 4px;
  --lc-sp-2: 8px;
  --lc-sp-3: 12px;
  --lc-sp-4: 16px;
  --lc-sp-5: 20px;
  --lc-sp-6: 24px;
  --lc-sp-8: 32px;
  --lc-sp-10: 40px;
  --lc-sp-12: 48px;
  --lc-sp-16: 64px;
  --lc-sp-20: 80px;
  --lc-sp-24: 96px;
  --lc-sp-32: 128px;

  /* ----- LAYOUT ----- */
  --lc-container: 1200px;
  --lc-container-narrow: 760px;
  --lc-container-wide: 1440px;
  --lc-radius-sm: 6px;
  --lc-radius: 8px;
  --lc-radius-md: 12px;
  --lc-radius-lg: 16px;
  --lc-radius-xl: 24px;
  --lc-radius-full: 9999px;

  /* ----- SHADOWS ----- */
  --lc-shadow-sm: 0 1px 2px rgba(11,20,55,0.06);
  --lc-shadow: 0 4px 12px rgba(11,20,55,0.08);
  --lc-shadow-md: 0 8px 24px rgba(11,20,55,0.10);
  --lc-shadow-lg: 0 16px 48px rgba(11,20,55,0.14);
  --lc-shadow-violet: 0 8px 24px rgba(123,92,240,0.28);
  --lc-shadow-violet-lg: 0 16px 40px rgba(123,92,240,0.34);

  /* ----- TRANSITIONS ----- */
  --lc-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --lc-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --lc-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ----- Z-INDEX ----- */
  --lc-z-topbar: 50;
  --lc-z-header: 100;
  --lc-z-dropdown: 200;
  --lc-z-modal: 1000;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--lc-font-sans);
  font-weight: var(--lc-fw-extrabold);
  line-height: var(--lc-lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--lc-sp-4);
  color: inherit;
}

h1, .h1 { font-size: var(--lc-fs-h1); font-weight: var(--lc-fw-extrabold); }
h2, .h2 { font-size: var(--lc-fs-3xl); font-weight: var(--lc-fw-bold); }
h3, .h3 { font-size: var(--lc-fs-2xl); font-weight: var(--lc-fw-bold); }
h4, .h4 { font-size: var(--lc-fs-xl); font-weight: var(--lc-fw-semibold); }
h5, .h5 { font-size: var(--lc-fs-lg); font-weight: var(--lc-fw-semibold); }
h6, .h6 { font-size: var(--lc-fs-base); font-weight: var(--lc-fw-semibold); }

@media (min-width: 1024px) {
  h1, .h1 { font-size: var(--lc-fs-h1-desktop); }
  h2, .h2 { font-size: var(--lc-fs-4xl); }
  h3, .h3 { font-size: var(--lc-fs-3xl); }
}

p {
  margin: 0 0 var(--lc-sp-4);
  line-height: var(--lc-lh-relaxed);
}

a {
  color: var(--lc-violet);
  text-decoration: none;
  transition: color var(--lc-transition-fast);
}
a:hover { color: var(--lc-violet-hover); }
a:focus-visible {
  outline: 2px solid var(--lc-violet);
  outline-offset: 3px;
  border-radius: var(--lc-radius-sm);
}

/* ==========================================================================
   CTA BUTTONS
   ========================================================================== */

.lc-btn,
.lc-cta,
button.lc-btn,
a.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lc-sp-2);
  padding: 14px 28px;
  font-family: var(--lc-font-sans);
  font-size: var(--lc-fs-base);
  font-weight: var(--lc-fw-semibold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--lc-radius);
  cursor: pointer;
  transition: all var(--lc-transition);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.lc-btn-primary {
  background: var(--lc-violet);
  color: #FFFFFF !important;
  box-shadow: var(--lc-shadow-violet);
}
.lc-btn-primary:hover {
  background: var(--lc-violet-hover);
  transform: translateY(-2px);
  box-shadow: var(--lc-shadow-violet-lg);
}
.lc-btn-primary:active { transform: translateY(0); }

.lc-btn-gradient {
  background: var(--lc-gradient);
  color: #FFFFFF !important;
  box-shadow: var(--lc-shadow-violet);
}
.lc-btn-gradient:hover {
  background: var(--lc-gradient-hover);
  transform: translateY(-2px);
  box-shadow: var(--lc-shadow-violet-lg);
}

.lc-btn-ghost {
  background: transparent;
  color: var(--lc-text) !important;
  border: 1px solid var(--lc-glass-border);
  backdrop-filter: var(--lc-glass-blur);
  -webkit-backdrop-filter: var(--lc-glass-blur);
}
.lc-btn-ghost:hover {
  background: var(--lc-glass-bg-strong);
  border-color: var(--lc-violet);
}

.lc-btn-sm { padding: 10px 18px; font-size: var(--lc-fs-sm); }
.lc-btn-lg { padding: 18px 36px; font-size: var(--lc-fs-lg); }

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.lc-container {
  max-width: var(--lc-container);
  margin: 0 auto;
  padding: 0 var(--lc-sp-5);
}
.lc-container-narrow { max-width: var(--lc-container-narrow); margin: 0 auto; padding: 0 var(--lc-sp-5); }
.lc-container-wide { max-width: var(--lc-container-wide); margin: 0 auto; padding: 0 var(--lc-sp-5); }

@media (min-width: 1024px) {
  .lc-container,
  .lc-container-narrow,
  .lc-container-wide {
    padding: 0 var(--lc-sp-8);
  }
}

.lc-section { padding: var(--lc-sp-16) 0; }
.lc-section-lg { padding: var(--lc-sp-20) 0; }
@media (min-width: 1024px) {
  .lc-section { padding: var(--lc-sp-20) 0; }
  .lc-section-lg { padding: var(--lc-sp-24) 0; }
}

/* Section variants */
.lc-section-dark { background-color: var(--lc-dark-base); color: var(--lc-text); }
.lc-section-dark-mesh { background: var(--lc-dark-mesh); color: var(--lc-text); position: relative; }
.lc-section-light { background-color: var(--lc-light-pure); color: var(--lc-text-on-light); }
.lc-section-light-soft { background-color: var(--lc-light-base); color: var(--lc-text-on-light); }

.lc-section-light h1, .lc-section-light h2, .lc-section-light h3,
.lc-section-light-soft h1, .lc-section-light-soft h2, .lc-section-light-soft h3 {
  color: var(--lc-text-dark);
}

/* Kicker (eyebrow text) */
.lc-kicker {
  display: inline-block;
  padding: 6px 14px;
  font-size: var(--lc-fs-xs);
  font-weight: var(--lc-fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lc-violet);
  background: var(--lc-violet-soft);
  border-radius: var(--lc-radius-full);
  margin-bottom: var(--lc-sp-4);
}

.lc-kicker-light {
  color: #FFFFFF;
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--lc-glass-border);
}

/* Lead paragraph */
.lc-lead {
  font-size: var(--lc-fs-lg);
  line-height: var(--lc-lh-relaxed);
  color: var(--lc-text-secondary);
  max-width: 640px;
}
.lc-section-light .lc-lead,
.lc-section-light-soft .lc-lead {
  color: var(--lc-text-on-light-secondary);
}

/* Grid utilities */
.lc-grid { display: grid; gap: var(--lc-sp-6); }
.lc-grid-2 { grid-template-columns: repeat(2, 1fr); }
.lc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.lc-grid-4 { grid-template-columns: repeat(4, 1fr); }
.lc-grid-6 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1024px) {
  .lc-grid-3, .lc-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .lc-grid-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 782px) {
  .lc-grid-2, .lc-grid-3, .lc-grid-4, .lc-grid-6 { grid-template-columns: 1fr; }
}

/* Visually hidden */
.lc-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes lc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes lc-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes lc-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(123,92,240,0.4); }
  50%      { box-shadow: 0 0 0 12px rgba(123,92,240,0); }
}

@keyframes lc-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes lc-orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}