/* alphadforge — Design System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* ==============================
   DESIGN TOKENS
============================== */
:root {
  /* Core Palette */
  --bg:           #F6F8FB;
  --bg-white:     #FFFFFF;
  --bg-soft:      #DCE5EC;
  --primary:      #0E1726;
  --accent1:      #5F7BFF; /* Blue primary accent */
  --accent1-hover:#4564E6; /* Blue hover accent */
  --accent2:      #0EC5A4; /* Mint secondary accent */
  --purple:       #8A5CF6; /* Purple */
  --success:      #16C784;
  --warning:      #F4B740;
  --danger:       #E5484D;

  /* Borders */
  --border:       #DCE5EC;
  --border-dark:  #BCCAD6;

  /* Text */
  --text-dark:    #0E1726; /* Primary */
  --text-mid:     #667085; /* Secondary */
  --text-muted:   #9CA3AF;

  /* Shadows */
  --shadow-sm:    0 1px 3px rgba(14,23,38,0.05), 0 1px 2px rgba(14,23,38,0.03);
  --shadow-md:    0 4px 16px rgba(14,23,38,0.06), 0 2px 6px rgba(14,23,38,0.03);
  --shadow-lg:    0 20px 60px rgba(14,23,38,0.08), 0 8px 20px rgba(14,23,38,0.04);
  --shadow-glow:  0 0 40px rgba(95,123,255,0.28);

  /* Mouse tracking */
  --mouse-x: 50%;
  --mouse-y: 50%;

  /* Scroll progress */
  --scroll-progress: 0%;
}

/* ==============================
   BASE STYLES
============================== */
html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  scroll-behavior: smooth;
  background-color: var(--bg);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.012em;
}

body {
  position: relative;
  background:
    radial-gradient(700px circle at var(--mouse-x) var(--mouse-y), rgba(95, 123, 255, 0.04), transparent 75%),
    var(--bg);
  background-attachment: fixed;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-dark);
}

/* ==============================
   SCROLLBAR
============================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ==============================
   SCROLL PROGRESS BAR
============================= */
.progress-bar-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9999;
  background: transparent;
}
.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--purple));
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* ==============================
   GLASS HEADER
============================= */
.glass-header {
  background: rgba(246,248,251,0.80);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* ==============================
   NOISE OVERLAY
============================== */
.noise-overlay {
  position: relative;
}
.noise-overlay::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.012'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* ==============================
   TRANSITIONS
============================== */
.transition-forge {
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ==============================
   INPUT STYLES
============================== */
.input-forge {
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  border: 1.5px solid var(--border);
  background-color: var(--bg-white);
  border-radius: 10px;
  color: var(--text-dark);
}
.input-forge:focus {
  outline: none;
  border-color: var(--accent1);
  box-shadow: 0 0 0 4px rgba(18,184,134,0.12);
}

/* ==============================
   CARDS
============================== */
.card-forge {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.card-forge:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--border-dark);
}

/* ==============================
   ANIMATED BACKGROUND GRID
============================== */
.bg-grid {
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center center;
}

/* ==============================
   HERO ANIMATED SHAPES (Floating)
============================== */
.float-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.06;
  animation: floatShape 8s ease-in-out infinite;
}
.float-shape:nth-child(1) { animation-delay: 0s; }
.float-shape:nth-child(2) { animation-delay: -2.5s; }
.float-shape:nth-child(3) { animation-delay: -5s; }

@keyframes floatShape {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(12px, -18px) scale(1.04); }
  66%       { transform: translate(-8px, 10px) scale(0.97); }
}

/* ==============================
   SVG LINE DRAW
============================== */
.svg-line-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 2.5s ease forwards;
}
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

/* ==============================
   SCROLL REVEAL (handled by JS, base states here)
============================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.25,1,0.5,1), transform 0.7s cubic-bezier(0.25,1,0.5,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.7s cubic-bezier(0.25,1,0.5,1), transform 0.7s cubic-bezier(0.25,1,0.5,1);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.7s cubic-bezier(0.25,1,0.5,1), transform 0.7s cubic-bezier(0.25,1,0.5,1);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ==============================
   RIPPLE BUTTON
============================== */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.btn-ripple:active::after {
  transform: scale(2.5);
  opacity: 1;
  transition: 0s;
}

/* ==============================
   MAGNETIC BUTTON (JS handles transform, CSS defines it)
============================== */
.btn-magnetic {
  transition: transform 0.25s cubic-bezier(0.25,1,0.5,1), box-shadow 0.25s ease;
  display: inline-block;
}

/* ==============================
   CURSOR SPOTLIGHT
============================== */
.cursor-spotlight {
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(95, 123, 255, 0.08) 0%, transparent 50%);
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
}

/* ==============================
   PARALLAX LAYER
============================== */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ==============================
   DEMO BADGE (simulation warning)
============================== */
.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.30);
  border-radius: 999px;
  color: #92400E;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ==============================
   CHART BARS (simulation)
============================== */
.sim-bar {
  transition: height 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  border-radius: 4px 4px 0 0;
}

/* ==============================
   TICKER TAPE
============================== */
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-inner {
  display: flex;
  white-space: nowrap;
  animation: ticker 28s linear infinite;
  width: max-content;
}
.ticker-inner:hover { animation-play-state: paused; }

/* ==============================
   HERO ANIMATIONS
============================== */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-animate { animation: heroFadeUp 0.9s cubic-bezier(0.25,1,0.5,1) forwards; }
.hero-animate-d1 { animation-delay: 0.1s; opacity: 0; }
.hero-animate-d2 { animation-delay: 0.22s; opacity: 0; }
.hero-animate-d3 { animation-delay: 0.36s; opacity: 0; }
.hero-animate-d4 { animation-delay: 0.52s; opacity: 0; }
.hero-animate-d5 { animation-delay: 0.68s; opacity: 0; }

/* ==============================
   NUMBER ROLLING
============================== */
.counter-val {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ==============================
   LOADING SKELETON
============================== */
.skeleton {
  background: linear-gradient(90deg, var(--bg-soft) 25%, var(--border) 50%, var(--bg-soft) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==============================
   ACCORDION
============================== */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25,1,0.5,1), padding 0.3s ease;
}
.accordion-content.open {
  max-height: 600px;
}

/* ==============================
   TIMELINE
============================== */
.timeline-line {
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent1), var(--accent2), transparent);
  border-radius: 2px;
}

/* ==============================
   PROGRESS BAR COMPONENT
============================== */
.progress-track {
  height: 6px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  transition: width 1.2s cubic-bezier(0.25,1,0.5,1);
  width: 0%;
}
.progress-fill.animated { width: var(--target-width); }

/* ==============================
   HOVER LIFT
============================== */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.25,1,0.5,1), box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ==============================
   LINK DEFAULT
============================== */
a { color: inherit; text-decoration: none; }