/*
  Signal Swap – design system stylesheet
  Dark, data-dense trading UI with crisp focus states and responsive layout.
  Sections:
  - Tokens (colors, spacing, typography, radius, shadows, z-index)
  - Base + Typography
  - Layout utilities (container, grid, stacks/clusters)
  - Navbar (desktop + mobile collapse)
  - Cards & panels
  - Buttons (variants/sizes/loading/disabled)
  - Forms (fields, errors, help)
  - Tables & lists (dense, sticky header, zebra)
  - Badges & chips
  - Toasts & alerts
  - Code blocks (webhook template + copy button)
  - Loaders & skeletons
  - Animations
  - Responsive breakpoints (1280/1024/768/480)
*/

/* ---------------------------------- */
/* TOKENS - PREMIUM TRADING PLATFORM  */
/* THEME-COMPATIBLE COLOR SYSTEM       */
/* ---------------------------------- */

/* Legacy color aliases mapped to theme system variables */
:root {
  /* Background System - Now uses theme variables */
  --bg-0: var(--bg-canvas);              /* deep background */
  --bg-1: var(--bg-surface);             /* nav / primary surfaces */
  --bg-2: var(--bg-surface-secondary);   /* cards / secondary surfaces */
  --bg-3: var(--bg-hover);               /* elevated panels */
  --bg-4: var(--bg-hover);               /* highest elevation */
  
  /* Border System - Now uses theme variables */
  --line-1: var(--border-light);         /* subtle borders */
  --line-2: var(--border);               /* medium borders */
  --line-3: var(--border-heavy);         /* strong borders */
  
  /* Text System - Now uses theme variables */
  --txt-0: var(--text);                  /* pure white - high contrast */
  --txt-1: var(--text-secondary);        /* primary text */
  --txt-2: var(--muted);                 /* secondary text */
  --txt-3: var(--muted-light);           /* muted text */
  
  /* Signal Swap Text & Background Aliases (CLAUDE.md compatibility) */
  --bg-primary: var(--bg-canvas);        /* Deep background */
  --bg-secondary: var(--bg-surface);     /* Card/surface background */
  --bg-tertiary: var(--bg-surface-secondary); /* Elevated surfaces */
  --bg-quaternary: var(--bg-hover);      /* Highest elevation */
  
  --text-primary: var(--text);           /* Primary headings */
  --text-secondary: var(--text-secondary); /* Body text */
  --text-tertiary: var(--muted);         /* Supporting text */
  --text-muted: var(--muted-light);      /* Muted text */
  
  /* Signal Swap Brand Colors - Now theme-adaptive */
  --signal-primary: var(--accent-1);     /* Primary accent from theme */
  --signal-secondary: var(--accent-2);   /* Secondary accent from theme */
  --signal-accent: var(--warning);       /* Warning/accent from theme */
  
  /* Brand aliases for compatibility - Now theme-adaptive */
  --brand-primary: var(--accent-1);
  --brand-secondary: var(--accent-2);
  --brand-accent: var(--warning);
  --brand-success: var(--success);       /* success green from theme */
  --brand-danger: var(--danger);         /* danger red from theme */
  --brand-warning: var(--warning);       /* warning amber from theme */
  
  /* Interactive States - Now theme-adaptive */
  --interactive-hover: var(--hover-overlay);
  --interactive-active: var(--active-overlay);
  --interactive-focus: var(--ring);
  
  /* Enhanced Gradients - Now theme-adaptive */
  --gradient-primary: var(--btn-grad);
  --gradient-success: linear-gradient(135deg, var(--success) 0%, var(--buy) 100%);
  --gradient-danger: linear-gradient(135deg, var(--danger) 0%, var(--sell) 100%);
  --gradient-premium: var(--btn-grad);
  --gradient-hero: var(--hero-grad);
  --gradient-card: var(--card-grad);
  --gradient-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  
  /* Trading-Specific Colors - Now theme-adaptive */
  --profit-green: var(--buy);
  --loss-red: var(--sell);
  --neutral-gray: var(--muted);
  --chart-blue: var(--info);
  --chart-purple: #8b5cf6;
  --chart-orange: var(--warning);
  
  /* Background Variants - Now theme-adaptive */
  --brand-bg: var(--hover-overlay);
  --success-bg: rgba(var(--success), 0.1);
  --danger-bg: rgba(var(--danger), 0.1);
  --warning-bg: rgba(var(--warning), 0.1);
  --info-bg: rgba(var(--info), 0.1);
  
  /* Enhanced Shadows & Effects - Now theme-adaptive */
  --shadow-xs: var(--shadow);
  --shadow-sm: var(--shadow);
  --shadow-md: var(--shadow);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-xl);
  --shadow-glow: var(--shadow-xl);
  --shadow-focus: 0 0 0 3px var(--ring);
  
  /* Animation Variables */
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.35s;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Border Radius Scale */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  
  /* Glass Morphism */
  --glass-light: rgba(255, 255, 255, 0.1);
  --glass-medium: rgba(255, 255, 255, 0.15);
  --glass-strong: rgba(255, 255, 255, 0.2);
  --backdrop-blur: blur(20px);
  
  /* Trading Chart Colors */
  --chart-grid: rgba(148, 163, 184, 0.1);
  --chart-axis: rgba(148, 163, 184, 0.3);
  --volume-up: rgba(16, 185, 129, 0.6);
  --volume-down: rgba(239, 68, 68, 0.6);
}

/* Light Theme Variables */
body.light-theme {
  --bg-0: #ffffff;         /* page background */
  --bg-1: #f6f8fa;         /* nav / surfaces */
  --bg-2: #ffffff;         /* cards */
  --bg-3: #f6f8fa;         /* panels / list items */
  --bg-4: #ffffff;         /* elevated surfaces */
  --line-1: #d0d7de;       /* subtle borders */
  --line-2: #d8dee4;       /* borders */
  --line-3: #afb8c1;       /* strong borders */
  --txt-0: #1f2328;        /* high contrast text */
  --txt-1: #656d76;        /* primary text */
  --txt-2: #6e7781;        /* secondary text */
  --txt-3: #8c959f;        /* muted text */
  
  --gradient-hero: linear-gradient(135deg, #ffffff 0%, #f6f8fa 25%, #f1f3f4 50%, #e1e4e8 75%, #d0d7de 100%);
  --gradient-card: linear-gradient(145deg, #ffffff, #f6f8fa);
  --gradient-pricing: linear-gradient(135deg, #f6f8fa 0%, #ffffff 100%);

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  /* Professional 8px Base Unit Spacing Scale (CLAUDE.md Compliance) */
  --s-0: 0;
  --s-1: 0.5rem;    /* 8px */
  --s-2: 1rem;      /* 16px */
  --s-3: 1.5rem;    /* 24px */
  --s-4: 2rem;      /* 32px */
  --s-5: 2.5rem;    /* 40px */
  --s-6: 3rem;      /* 48px */
  --s-8: 4rem;      /* 64px */
  --s-10: 5rem;     /* 80px */
  --s-12: 6rem;     /* 96px */
  --s-16: 8rem;     /* 128px */
  
  /* CLAUDE.md Compatible Aliases */
  --space-1: var(--s-1);   /* 8px */
  --space-2: var(--s-2);   /* 16px */
  --space-3: var(--s-3);   /* 24px */
  --space-4: var(--s-4);   /* 32px */
  --space-5: var(--s-5);   /* 40px */
  --space-6: var(--s-6);   /* 48px */
  --space-8: var(--s-8);   /* 64px */
  --space-10: var(--s-10); /* 80px */
  --space-12: var(--s-12); /* 96px */
  --space-16: var(--s-16); /* 128px */

  /* Shadows */
  --shadow-1: 0 1px 0 rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.02) inset;
  --shadow-2: 0 4px 18px rgba(0,0,0,.45);
  --shadow-focus: 0 0 0 3px rgba(47,109,246,.35);

  /* Z-index */
  --z-nav: 100;
  --z-toast: 200;
  --z-modal: 300;

  /* Premium Typography - Professional Trading Platform */
  --font-primary: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-secondary: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', ui-monospace, SFMono-Regular, 'Cascadia Code', monospace;
  --font-display: 'Inter', 'SF Pro Display', system-ui, sans-serif;
  
  /* Precision Type Scale - Golden Ratio Based */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */
  --text-7xl: 4.5rem;      /* 72px */
  --text-8xl: 6rem;        /* 96px */
  --text-9xl: 8rem;        /* 128px */
  
  /* Font Weight Scale */
  --weight-thin: 100;
  --weight-extralight: 200;
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;
  
  /* Line Height Scale */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
}

/* Light Mode Theme Variables */
[data-theme="light"] {
  /* Light Theme Palette */
  --bg-0: #ffffff;         /* page background */
  --bg-1: #f8f9fa;         /* nav / surfaces */
  --bg-2: #f1f3f4;         /* cards */
  --bg-3: #e8eaed;         /* panels / list items */
  --bg-4: #dee1e6;         /* elevated surfaces */
  --line-1: #dadce0;       /* subtle borders */
  --line-2: #c4c7c5;       /* borders */
  --line-3: #9aa0a6;       /* strong borders */
  --txt-0: #202124;        /* high contrast text */
  --txt-1: #3c4043;        /* primary text */
  --txt-2: #5f6368;        /* secondary text */
  --txt-3: #80868b;        /* muted text */
  
  /* Brand Colors (adjusted for light mode) */
  --brand-0: #1a73e8;      /* primary blue */
  --brand-1: #1557b0;      /* primary hover */
  --brand-2: #4285f4;      /* subtle brand */
  --brand-bg: rgba(26, 115, 232, 0.1);  /* brand background */
  
  /* Semantic Colors (light mode) */
  --ok-0: #137333;         /* success */
  --ok-1: #0d652d;         /* success hover */
  --ok-bg: rgba(19, 115, 51, 0.1);      /* success background */
  --warn-0: #f9ab00;       /* warning */
  --warn-bg: rgba(249, 171, 0, 0.1);    /* warning background */
  --err-0: #d93025;        /* danger */
  --err-bg: rgba(217, 48, 37, 0.1);     /* danger background */
  --info-0: #1a73e8;       /* info */
  --info-bg: rgba(26, 115, 232, 0.1);   /* info background */
  
  /* Gradients for light mode */
  --gradient-brand: linear-gradient(135deg, var(--brand-0), var(--brand-2));
  --gradient-hero: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #f1f3f4 100%);
  --gradient-card: linear-gradient(145deg, var(--bg-2), var(--bg-3));

  /* Shadows for light mode */
  --shadow-1: 0 1px 3px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.05) inset;
  --shadow-2: 0 4px 18px rgba(0,0,0,.15);
  --shadow-focus: 0 0 0 3px rgba(26, 115, 232, 0.3);
}

/* ---------------------------------- */
/* BASE + ENHANCED TYPOGRAPHY         */
/* ---------------------------------- */

/* CSS Reset & Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Global text overflow prevention */
h1, h2, h3, h4, h5, h6, p, span, div {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

html {
  height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--s-10); /* 80px - consistent with spacing */
  font-feature-settings: 'kern', 'liga', 'clig', 'calt';
}

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--txt-1);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Enhanced Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--txt-0);
  margin: 0;
}

h1 {
  font-size: var(--text-6xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-none);
}

h2 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
}

h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

h5 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--txt-2);
  margin: 0;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--brand-secondary);
  text-decoration: underline;
}

/* Typography Utility Classes */
.text-primary { color: var(--txt-0); }
.text-secondary { color: var(--txt-1); }
.text-muted { color: var(--txt-2); }
.text-subtle { color: var(--txt-3); }

.text-brand { color: var(--brand-primary); }
.text-success { color: var(--brand-success); }
.text-danger { color: var(--brand-danger); }
.text-warning { color: var(--brand-warning); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }

.font-light { font-weight: var(--weight-light); }
.font-normal { font-weight: var(--weight-normal); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
.font-black { font-weight: var(--weight-black); }

.leading-tight { line-height: var(--leading-tight); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: var(--tracking-wide); }

.font-mono { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }

/* Special Typography Elements */
.eyebrow {
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--brand-primary);
  margin-bottom: 0.5rem;
}

.gradient-text {
  background: var(--gradient-primary);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: gradient-flow 3s ease infinite;
}

.highlight {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: var(--weight-semibold);
}

/* Responsive Typography */
@media (max-width: 768px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-xl); }
  
  .text-responsive-xl { font-size: var(--text-2xl); }
  .text-responsive-lg { font-size: var(--text-lg); }
}

@media (max-width: 480px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-lg); }
  
  body { font-size: var(--text-sm); }
}

/* ---------------------------------- */
/* LAYOUT UTILITIES                   */
/* ---------------------------------- */

/* Professional Section Spacing System */
section {
  position: relative;
}

/* Add consistent vertical rhythm between sections */
section + section {
  margin-top: 0; /* Sections handle their own spacing via padding */
}

/* Section spacing utilities */
.section-spacing-sm { padding: var(--s-6) 0; }
.section-spacing-md { padding: var(--s-8) 0; }
.section-spacing-lg { padding: var(--s-12) 0; }
.section-spacing-xl { padding: var(--s-16) 0; }

/* Professional Section Headers */
.section-header {
  text-align: center;
  margin-bottom: var(--s-8); /* Consistent 64px bottom spacing */
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.section-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: var(--s-3); /* 24px below heading */
}

.section-header p {
  font-size: var(--fs-lg);
  color: var(--text-tertiary);
  line-height: var(--leading-relaxed);
  max-width: 600px;
  margin: 0 auto;
}

/* Professional Spacing Utilities - Create breathing room */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--s-1); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-8 { margin-bottom: var(--s-8); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--s-1); padding-bottom: var(--s-1); }
.py-2 { padding-top: var(--s-2); padding-bottom: var(--s-2); }
.py-3 { padding-top: var(--s-3); padding-bottom: var(--s-3); }
.py-4 { padding-top: var(--s-4); padding-bottom: var(--s-4); }
.py-6 { padding-top: var(--s-6); padding-bottom: var(--s-6); }
.py-8 { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.container { 
  width: 100%; 
  max-width: 90%; /* Utilize 90% of screen width on large screens */
  margin: 0 auto; 
  padding: var(--s-8) var(--s-5); 
}

/* Professional Container Sizes for Different Breakpoints */
@media (min-width: 1920px) {
  .container { max-width: 1728px; } /* 90% of 1920px */
}

@media (min-width: 1440px) and (max-width: 1919px) {
  .container { max-width: 1296px; } /* 90% of 1440px */
}

@media (min-width: 1280px) and (max-width: 1439px) {
  .container { max-width: 1152px; } /* 90% of 1280px */
}
.grid { display: grid; gap: var(--s-6); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Professional 12-Column Grid System */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-6);
  width: 100%;
}

/* Grid Column Spans */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Professional Grid Gaps */
.gap-sm { gap: var(--s-3); }
.gap-md { gap: var(--s-6); }
.gap-lg { gap: var(--s-8); }
.gap-xl { gap: var(--s-12); }

/* Responsive Grid Columns */
@media (min-width: 1024px) {
  .lg\:col-1 { grid-column: span 1; }
  .lg\:col-2 { grid-column: span 2; }
  .lg\:col-3 { grid-column: span 3; }
  .lg\:col-4 { grid-column: span 4; }
  .lg\:col-5 { grid-column: span 5; }
  .lg\:col-6 { grid-column: span 6; }
  .lg\:col-7 { grid-column: span 7; }
  .lg\:col-8 { grid-column: span 8; }
  .lg\:col-9 { grid-column: span 9; }
  .lg\:col-10 { grid-column: span 10; }
  .lg\:col-11 { grid-column: span 11; }
  .lg\:col-12 { grid-column: span 12; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .md\:col-1 { grid-column: span 1; }
  .md\:col-2 { grid-column: span 2; }
  .md\:col-3 { grid-column: span 3; }
  .md\:col-4 { grid-column: span 4; }
  .md\:col-6 { grid-column: span 6; }
  .md\:col-12 { grid-column: span 12; }
}

@media (max-width: 767px) {
  .sm\:col-12 { grid-column: span 12; }
  .grid-12 { grid-template-columns: 1fr; } /* Stack on mobile */
}

.stack-2 > * + * { margin-top: var(--s-2); }
.stack-4 > * + * { margin-top: var(--s-4); }
.cluster { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.hidden { display: none !important; }

/* ---------------------------------- */
/* NAVBAR                             */
/* ---------------------------------- */
header {
  position: relative; 
  z-index: var(--z-nav);
  background: rgba(34, 39, 43, 1); 
  border-bottom: 1px solid var(--line-1);
  width: 100%;
  box-sizing: border-box;
}
.nav-container {
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s-5);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-weight: 700; color: var(--txt-0); font-size: 18px;
}
.brand .mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(135deg, var(--brand-0), #6aa4ff);
  box-shadow: var(--shadow-2);
}
nav a {
  position: relative; display: inline-flex; align-items: center;
  padding: 6px 10px; margin-left: var(--s-3);
  color: var(--txt-1); font-weight: 600; border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
nav a:hover { color: var(--txt-0); background: rgba(47,109,246,.08); }
nav a.active { color: var(--txt-0); background: rgba(47,109,246,.12); }
.nav-actions { display: inline-flex; align-items: center; gap: var(--s-3); }

/* Theme Toggle Button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 32px;
  border: 1px solid var(--line-1);
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: var(--s-2);
}

.theme-toggle-btn:hover {
  background: rgba(47,109,246,.08);
  border-color: var(--line-2);
}

.theme-icon {
  font-size: 16px;
  transition: transform 0.2s ease;
}

.theme-toggle-btn:hover .theme-icon {
  transform: scale(1.1);
}
.hamburger { 
  display: none; 
  width: 32px; 
  height: 32px; 
  border-radius: 6px; 
  background: transparent; 
  border: 1px solid var(--line-1); 
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.hamburger span {
  width: 16px;
  height: 2px;
  background: var(--txt-1);
  border-radius: 1px;
  transition: all 0.2s ease;
}
.hamburger:hover {
  border-color: var(--line-2);
}
.hamburger:hover span {
  background: var(--txt-0);
}
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}

/* ---------------------------------- */
/* USER PROFILE DROPDOWN              */
/* ---------------------------------- */
.user-profile {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.profile-trigger {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: none;
  background: transparent;
  color: var(--txt-1);
}

.profile-trigger:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--txt-0);
}

.profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: white;
  text-transform: uppercase;
}

.profile-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.profile-name {
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.2;
}

.profile-plan {
  font-size: var(--fs-xs);
  color: var(--txt-2);
  line-height: 1;
}

.profile-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.profile-trigger[aria-expanded="true"] .profile-chevron {
  transform: rotate(180deg);
}

.profile-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--s-2);
  min-width: 280px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
}

.profile-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-header {
  padding: var(--s-4);
  border-bottom: 1px solid var(--line-1);
}

.dropdown-user-info {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.dropdown-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
}

.dropdown-user-details h3 {
  margin: 0 0 var(--s-1);
  font-size: var(--fs-md);
  color: var(--txt-0);
}

.dropdown-user-details p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--txt-2);
}

.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  margin-top: var(--s-1);
}

.plan-badge.free {
  background: var(--ok-bg);
  color: var(--ok-0);
}

.plan-badge.trial {
  background: var(--warn-bg);
  color: var(--warn-0);
}

.plan-badge.standard {
  background: var(--brand-bg);
  color: var(--brand-0);
}

.dropdown-menu {
  padding: var(--s-2);
}

.dropdown-section {
  margin-bottom: var(--s-3);
}

.dropdown-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--txt-2);
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-1);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  color: var(--txt-1);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: var(--fs-sm);
}

.dropdown-item:hover {
  background: var(--bg-3);
  color: var(--txt-0);
}

.dropdown-item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.dropdown-item-content {
  flex: 1;
}

.dropdown-item-title {
  font-weight: 500;
  margin-bottom: 2px;
}

.dropdown-item-subtitle {
  font-size: var(--fs-xs);
  color: var(--txt-2);
  line-height: 1.2;
}

.dropdown-separator {
  height: 1px;
  background: var(--line-1);
  margin: var(--s-2) 0;
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3);
  border-radius: var(--r-sm);
}

.theme-switch {
  position: relative;
  width: 48px;
  height: 24px;
  background: var(--line-2);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.theme-switch.active {
  background: var(--brand-0);
}

.theme-switch-handle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.theme-switch.active .theme-switch-handle {
  transform: translateX(24px);
}

.logout-item {
  color: var(--err-0) !important;
}

.logout-item:hover {
  background: var(--err-bg) !important;
}

/* ---------------------------------- */
/* CARDS & PANELS                     */
/* ---------------------------------- */
.card {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.card-header {
  padding: var(--s-5) var(--s-5) var(--s-3);
  border-bottom: 1px solid rgba(255,255,255,.04);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
}
.card-body { padding: var(--s-5); }
.card-footer {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid rgba(255,255,255,.04);
  background: rgba(255,255,255,.02);
}

/* ---------------------------------- */
/* BUTTONS                            */
/* ---------------------------------- */
.btn {
  --btn-bg: var(--bg-3); --btn-fg: var(--txt-0); --btn-bd: var(--line-1);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  border: 1px solid var(--btn-bd); color: var(--btn-fg); background: var(--btn-bg);
  font-weight: 700; font-size: var(--fs-md); padding: 10px 14px; border-radius: 8px;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .02s;
}
.btn:hover { border-color: var(--line-2); background: #1a2f57; }
.btn:active { transform: translateY(1px); }

.btn-primary { --btn-bg: var(--brand-0); --btn-bd: var(--brand-1); }
.btn-primary:hover { background: var(--brand-1); }
.btn-secondary { --btn-bg: #1a2845; }
.btn-ghost { --btn-bg: transparent; --btn-bd: rgba(255,255,255,.14); }
.btn-danger { --btn-bg: var(--err-0); --btn-bd: #c03636; }
.btn-sm { padding: var(--s-1) var(--s-2); font-size: var(--fs-sm); border-radius: 7px; }
.btn-lg { padding: var(--s-2) var(--s-3); font-size: var(--fs-lg); }

.btn[disabled], .btn.disabled {
  opacity: .6; cursor: not-allowed; filter: grayscale(.3);
}
.btn .spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: spin .9s linear infinite;
}

/* ---------------------------------- */
/* FORMS                              */
/* ---------------------------------- */
form { display: grid; gap: var(--s-4); }
.field { display: grid; gap: 6px; }
.field label { color: var(--txt-1); font-weight: 600; font-size: var(--fs-sm); }
.input, .select, input[type="text"], input[type="password"], input[type="email"], select {
  display: block; width: 100%;
  background: var(--bg-3); color: var(--txt-0);
  border: 1px solid var(--line-1); border-radius: 8px;
  padding: 10px 12px; font-size: var(--fs-md); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input:focus, .select:focus, input:focus, select:focus {
  border-color: var(--brand-0); box-shadow: var(--shadow-focus);
}
.help { font-size: var(--fs-xs); color: var(--txt-2); }
.error { font-size: var(--fs-xs); color: var(--err-0); }
fieldset { border: none; padding: 0; margin: 0; }
legend { font-size: var(--fs-sm); color: var(--txt-2); margin-bottom: var(--s-2); }

/* Sliders (e.g., leverage) */
input[type="range"] {
  -webkit-appearance: none; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-0), #0f6) padding-box;
  border: 1px solid var(--line-1);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--brand-0);
}

/* ---------------------------------- */
/* TABLES & LISTS                     */
/* ---------------------------------- */
.table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--r-md);
  overflow: hidden;
}
.table thead th {
  position: sticky; top: 0; background: #112140; color: var(--txt-0);
  text-align: left; font-size: var(--fs-sm); letter-spacing: .02em;
  border-bottom: 1px solid rgba(255,255,255,.06); padding: 10px 12px;
}
.table tbody td {
  font-size: var(--fs-md); color: var(--txt-1); padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.04);
}
.table tbody tr:nth-child(odd) td { background: rgba(255,255,255,.02); }
.table .right { text-align: right; }
.empty-state {
  padding: var(--s-6); text-align: center; color: var(--txt-2);
  border: 1px dashed var(--line-1); border-radius: var(--r-md); background: rgba(255,255,255,.02);
}

/* Existing UL list support */
ul.list { display: grid; gap: var(--s-3); }
ul.list li {
  background: var(--bg-3); border: 1px solid var(--line-1); border-radius: var(--r-sm);
  padding: var(--s-4);
}

/* ---------------------------------- */
/* BADGES & CHIPS                     */
/* ---------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: var(--txt-0);
}
.badge-success { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.4); color: #d3fff0; }
.badge-warn    { background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.4); color: #fff2d6; }
.badge-danger  { background: rgba(239,68,68,.15);  border-color: rgba(239,68,68,.4);  color: #ffe1e1; }
.badge-neutral { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }

/* ---------------------------------- */
/* TOASTS & ALERTS                    */
/* ---------------------------------- */
.toast-container {
  position: fixed; z-index: var(--z-toast); right: 16px; top: 16px;
  display: grid; gap: var(--s-3);
}
.toast {
  min-width: 280px;
  background: #0f1f3a; color: var(--txt-0);
  border: 1px solid var(--line-1); border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5); box-shadow: var(--shadow-2);
  animation: toast-in .18s ease-out;
}
.toast.success { border-color: rgba(16,185,129,.45); }
.toast.error   { border-color: rgba(239,68,68,.45); }
.alert {
  padding: var(--s-4); border: 1px solid var(--line-1); border-radius: var(--r-md);
  background: rgba(255,255,255,.03);
}

/* ---------------------------------- */
/* CODE BLOCKS (webhook templates)    */
/* ---------------------------------- */
.code {
  position: relative; border: 1px solid var(--line-1); border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-3);
}
.code pre { margin: 0; padding: var(--s-5); color: var(--txt-1); font-family: var(--font-mono); font-size: var(--fs-sm); }
.code .copy-btn {
  position: absolute; top: 8px; right: 8px;
  padding: 6px 10px; font-size: var(--fs-sm);
}

/* ---------------------------------- */
/* LOADERS & SKELETON                 */
/* ---------------------------------- */
.spinner {
  width: 24px; height: 24px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: spin .9s linear infinite;
}
.skeleton-line {
  height: 12px; width: 100%; border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-box {
  height: 80px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  animation: shimmer 1.4s ease-in-out infinite;
}

/* ---------------------------------- */
/* ANIMATIONS                         */
/* ---------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

/* ---------------------------------- */
/* FIX FOR VERTICAL NUMBER DISPLAY    */
/* ---------------------------------- */
.stat-value,
.bot-metric-value,
.portfolio-value,
.total-balance,
.balance-display,
[id*="total"],
[id*="balance"],
[id*="value"],
[id*="pnl"],
[id*="equity"],
[class*="number"],
[class*="amount"],
[class*="price"] {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  direction: ltr !important;
  display: inline-block !important;
}

/* Ensure navigation numbers display horizontally */
nav .stat-value,
nav [class*="number"],
nav [class*="value"],
.sidebar .stat-value,
.sidebar [class*="number"],
.sidebar [class*="value"] {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  direction: ltr !important;
  display: inline !important;
}

@keyframes toast-in {
  from { transform: translateY(-6px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

/* ---------------------------------- */
/* RESPONSIVE                         */
/* ---------------------------------- */
@media (max-width: 1279px) {
  .container { max-width: 90%; padding: var(--s-6) var(--s-4); } /* Mobile responsive */
}
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .nav-actions { 
    display: none; 
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--bg-1);
    border-top: 1px solid var(--line-1);
    border-bottom: 1px solid var(--line-1);
    padding: var(--s-4);
    flex-direction: column;
    gap: var(--s-2);
    z-index: calc(var(--z-nav) - 1);
    box-shadow: var(--shadow-2);
    backdrop-filter: blur(8px);
  }
  .nav-actions.active {
    display: flex;
  }
  .nav-actions a {
    padding: var(--s-3) var(--s-4);
    margin: 0;
    border-radius: var(--r-sm);
    text-align: left;
    width: 100%;
    justify-content: flex-start;
  }
  .theme-toggle-btn {
    margin: var(--s-2) 0;
    width: 100%;
    justify-content: center;
  }
  .hamburger { display: flex; }
  .nav-container {
    position: relative;
  }
}

/* Ensure desktop navigation is always horizontal */
@media (min-width: 769px) {
  .nav-actions {
    display: inline-flex !important;
    position: static !important;
    flex-direction: row !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  .nav-actions a {
    padding: 6px 10px !important;
    margin-left: var(--s-3) !important;
    border-radius: 8px !important;
    text-align: center !important;
    width: auto !important;
    justify-content: center !important;
  }
  .theme-toggle-btn {
    margin-left: var(--s-2) !important;
    width: 40px !important;
    justify-content: center !important;
  }
  .hamburger { 
    display: none !important; 
  }
}
@media (max-width: 480px) {
  .nav-container { padding: 0 var(--s-3); }
  .card-body, .card-header, .card-footer { padding: var(--s-4); }
}

/* ---------------------------------- */
/* PREMIUM HERO SECTION               */
/* ---------------------------------- */
.hero-premium {
  position: relative;
  min-height: 85vh; /* Reduced from 100vh for better flow */
  max-height: 800px; /* Prevent excessive height on very large screens */
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: var(--s-8) 0; /* Add some vertical breathing room */
}

/* Hero Background System */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--bg-0) 0%, var(--bg-1) 25%, var(--bg-2) 50%, var(--bg-3) 100%);
}

.hero-bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.03) 1px, transparent 0);
  background-size: 40px 40px;
  animation: floatGentle 20s ease-in-out infinite;
}

.hero-bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(0, 212, 170, 0.1) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: pulseGlow 4s ease-in-out infinite;
}

/* Hero Content Layout */
.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 2;
  max-width: 90%; /* Full screen utilization */
  margin: 0 auto;
  padding: 0 2rem;
}

/* Hero Text Styles */
.hero-text {
  max-width: 600px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 212, 170, 0.1);
  backdrop-filter: var(--backdrop-blur);
  border: 1px solid rgba(0, 212, 170, 0.2);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--brand-primary);
  margin-bottom: 2rem;
}

.badge-dot {
  width: 8px;
  height: 8px;
  background: var(--brand-primary);
  border-radius: 50%;
  animation: pulseGlow 2s ease-in-out infinite;
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: var(--weight-black);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tighter);
  margin: 0 0 2rem;
}

.title-line {
  display: block;
  margin-bottom: 0.25rem;
}

.hero-description {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--txt-2);
  margin-bottom: 3rem;
  max-width: 540px;
}

/* Hero Stats */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--brand-primary);
  font-family: var(--font-mono);
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--txt-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-medium);
}

/* Hero Actions */
.hero-actions {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

/* Hero Trust Indicators */
.hero-trust {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--txt-2);
}

.trust-icon {
  font-size: var(--text-lg);
}

/* Professional Trust Indicators */
.hero-trust-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: rgba(18, 21, 26, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 212, 170, 0.2);
  border-radius: var(--radius-xl);
  transition: all var(--duration-normal) var(--ease-out);
  min-width: 200px;
}

.trust-item:hover {
  background: rgba(0, 212, 170, 0.1);
  border-color: rgba(0, 212, 170, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 212, 170, 0.2);
}

.trust-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  border-radius: 50%;
  flex-shrink: 0;
}

.trust-badge .trust-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: white;
}

.trust-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.trust-title {
  font-weight: 600;
  color: var(--txt-0);
  font-size: 0.9rem;
}

.trust-subtitle {
  font-size: 0.8rem;
  color: var(--txt-2);
  font-weight: 400;
}

/* Mobile responsive for trust indicators */
@media (max-width: 768px) {
  .hero-trust-indicators {
    flex-direction: column;
    gap: 1rem;
  }
  
  .trust-item {
    min-width: auto;
    padding: 0.75rem 1rem;
  }
}
/* Hero Visual Dashboard */
.hero-visual {
  position: relative;
  max-width: 900px;
  margin-left: auto;
}

.trading-dashboard {
  background: var(--gradient-card);
  backdrop-filter: var(--backdrop-blur);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-2xl);
  padding: 3rem;
  box-shadow: var(--shadow-2xl);
  position: relative;
  overflow: hidden;
  min-height: 750px;
}

.trading-dashboard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-primary), transparent);
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--txt-0);
}

.status-indicator {
  width: 8px;
  height: 8px;
  background: var(--brand-success);
  border-radius: 50%;
  animation: pulseGlow 2s ease-in-out infinite;
}

.dashboard-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--txt-2);
}

.portfolio-overview {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-lg);
}

.portfolio-value {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.value-label {
  font-size: var(--text-xs);
  color: var(--txt-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.value-amount {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--txt-0);
  font-family: var(--font-mono);
}

.value-change {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-mono);
}

.value-change.positive {
  color: var(--brand-success);
}

.value-change.negative {
  color: var(--brand-danger);
}

.portfolio-chart {
  width: 120px;
  height: 60px;
}

.mini-chart {
  width: 100%;
  height: 100%;
}

.chart-line {
  stroke-width: 2;
  stroke-linecap: round;
  animation: chartLine 2s ease-out forwards;
}

.recent-signals {
  margin-bottom: 1.5rem;
}

.signals-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--txt-0);
}

.live-indicator {
  width: 6px;
  height: 6px;
  background: var(--brand-danger);
  border-radius: 50%;
  animation: pulseGlow 1s ease-in-out infinite;
}

.signal-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  transition: all var(--duration-fast) var(--ease-out);
}

.signal-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.signal-item.processing {
  border: 1px solid rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.05);
}

.signal-side {
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-align: center;
  min-width: 40px;
}

.signal-side.buy {
  background: var(--success-bg);
  color: var(--brand-success);
}

.signal-side.sell {
  background: var(--danger-bg);
  color: var(--brand-danger);
}

.signal-symbol {
  font-weight: var(--weight-medium);
  color: var(--txt-0);
}

.signal-price {
  font-family: var(--font-mono);
  color: var(--txt-1);
}

.signal-status {
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.signal-status.executed {
  color: var(--brand-success);
}

.signal-status.processing {
  color: var(--brand-warning);
}

.performance-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.metric {
  text-align: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-md);
}

.metric-label {
  font-size: var(--text-xs);
  color: var(--txt-2);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.metric-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--txt-0);
  font-family: var(--font-mono);
}

.metric-value.positive {
  color: var(--brand-success);
}

/* Floating Elements */
.floating-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.notification-popup {
  position: absolute;
  top: -60px;
  right: -40px;
  background: rgba(16, 185, 129, 0.9);
  backdrop-filter: var(--backdrop-blur);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-lg);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: var(--shadow-lg);
  animation: bounce 0.8s ease-out;
}

.notification-icon {
  font-size: var(--text-xl);
}

.notification-content {
  display: flex;
  flex-direction: column;
}

.notification-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: white;
}

.notification-subtitle {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-mono);
}

.profit-indicator {
  position: absolute;
  bottom: -50px;
  left: -50px;
  background: var(--gradient-success);
  border-radius: var(--radius-xl);
  padding: 1rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: floatGentle 3s ease-in-out infinite;
}

.profit-amount {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: white;
  font-family: var(--font-mono);
  white-space: nowrap;
  letter-spacing: normal;
  word-spacing: normal;
  display: inline-block;
}

.profit-percentage {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-mono);
}
/* Responsive Hero Design */
@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
  
  .hero-visual {
    max-width: 500px;
    margin: 0 auto;
  }
  
  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .hero-premium {
    min-height: 80vh;
    padding: 1rem 0;
  }
  
  .hero-content {
    padding: 0 1rem;
    gap: 2rem;
  }
  
  .hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
    margin-bottom: 1.5rem;
  }
  
  .hero-description {
    font-size: var(--text-lg);
    margin-bottom: 2rem;
  }
  
  .hero-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .hero-actions .btn {
    width: 100%;
    max-width: 280px;
  }
  
  .hero-trust {
    justify-content: center;
    gap: 1rem;
  }
  
  .trading-dashboard {
    padding: 1.5rem;
  }
  
  .portfolio-overview {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .performance-metrics {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .notification-popup {
    display: none;
  }
  
  .profit-indicator {
    position: static;
    margin-top: 1rem;
  }
}

@media (max-width: 480px) {
  .hero-badge {
    flex-direction: column;
    text-align: center;
    gap: 0.25rem;
  }
  
  .signal-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    text-align: center;
  }
  
  .metric {
    padding: 0.75rem;
  }
}
.hero .eyebrow {
  display: inline-block;
  background: var(--gradient-brand);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--s-2);
}
.hero h1 {
  font-size: var(--fs-6xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: var(--s-4) 0 var(--s-5);
  background: var(--gradient-text);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  position: relative;
}
.hero h1::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  color: var(--txt-0);
  opacity: 0.8;
}
.hero-description {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--txt-2);
  margin: 0 0 var(--s-6);
}
.hero-actions {
  display: flex;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
}
.hero-badges {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* Hero Visual Showcase */
.hero-showcase {
  display: grid;
  gap: var(--s-4);
  perspective: 1000px;
}
.showcase-item {
  background: var(--gradient-card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-2);
  transition: all 0.3s ease;
  transform: translateZ(0);
}
.showcase-item:hover {
  transform: translateY(-4px) rotateX(2deg);
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  border-color: var(--brand-2);
}
.showcase-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-border);
}
.showcase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-4);
}
.showcase-title {
  font-weight: 600;
  color: var(--txt-0);
  font-size: var(--fs-sm);
}
.showcase-status {
  background: var(--ok-bg);
  color: var(--ok-0);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.showcase-charts .chart-line {
  height: 3px;
  background: var(--brand-0);
  border-radius: 2px;
  margin: 8px 0;
  position: relative;
}
.showcase-charts .chart-line.short { width: 60%; }
.alert-popup {
  position: absolute;
  bottom: var(--s-3);
  right: var(--s-3);
  background: var(--brand-0);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  animation: pulse 2s infinite;
}
.order-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2);
  background: rgba(46, 160, 67, 0.05);
  border-radius: 6px;
}
.order-side.buy {
  background: var(--ok-0);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.order-status.filled {
  color: var(--ok-0);
  font-weight: 700;
}

/* ---------------------------------- */
/* EXCHANGES SECTION                  */
/* ---------------------------------- */
.exchanges {
  padding: var(--s-8) 0; /* Reduced from s-10 to s-8 for better flow */
  background: var(--bg-1);
  border-top: 1px solid var(--line-1);
}
.exchanges-header {
  text-align: center;
  margin-bottom: var(--s-8);
}
.exchanges-header h2 {
  font-size: var(--fs-3xl);
  margin: var(--s-3) 0;
}
.exchanges-header p {
  font-size: var(--fs-lg);
  color: var(--txt-2);
}
.exchanges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-6);
  max-width: 800px;
  margin: 0 auto;
}
.exchange-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.exchange-logo:hover {
  transform: translateY(-2px);
  border-color: var(--line-2);
}
.exchange-logo img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.exchange-logo span {
  font-weight: 600;
  color: var(--txt-1);
}
.exchange-logo.coming-soon {
  opacity: 0.6;
}
.coming-soon-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--warn-0);
  color: var(--bg-0);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  z-index: 10;
}

/* ---------------------------------- */
/* PREMIUM FEATURES SECTION           */
/* ---------------------------------- */
.features-premium {
  padding: var(--s-12) 0; /* Professional 96px spacing */
  background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 50%, var(--bg-0) 100%);
  position: relative;
  overflow: hidden;
}

.features-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(0, 212, 170, 0.05) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(8, 145, 178, 0.05) 0%, transparent 50%);
  pointer-events: none;
}
.section-header {
  text-align: center;
  margin-bottom: 6rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.section-header h2 {
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  margin: 1rem 0 2rem;
  line-height: var(--leading-tight);
}

.section-description {
  font-size: var(--text-xl);
  color: var(--txt-2);
  line-height: var(--leading-relaxed);
  max-width: 600px;
  margin: 0 auto;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 100%;
  margin: 0 auto;
  min-width: 0; /* Prevent overflow */
}
.feature-card-premium {
  position: relative;
  background: var(--gradient-card);
  backdrop-filter: var(--backdrop-blur);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-2xl);
  padding: 2.5rem;
  transition: all var(--duration-slow) var(--ease-out);
  overflow: hidden;
  transform: translateZ(0);
  min-width: 0; /* Prevent overflow */
  word-wrap: break-word; /* Handle long text */
}

.feature-card-premium:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(0, 212, 170, 0.3);
  box-shadow: var(--shadow-2xl), var(--shadow-glow);
}

.feature-card-premium:hover .feature-glow {
  opacity: 1;
  transform: scale(1.2);
}

.feature-card-premium:hover .feature-icon-premium {
  transform: scale(1.1);
}

.feature-card-premium:hover .icon-particles {
  opacity: 1;
  animation: floatGentle 2s ease-in-out infinite;
}
.feature-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-2xl);
}

.feature-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 212, 170, 0.1) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  transition: all var(--duration-slow) var(--ease-out);
}

.feature-icon-premium {
  position: relative;
  width: 80px;
  height: 80px;
  background: var(--gradient-primary);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-lg);
  transition: all var(--duration-normal) var(--ease-out);
  overflow: hidden;
}

.feature-svg {
  width: 32px;
  height: 32px;
  color: white;
  z-index: 2;
  position: relative;
}

.icon-particles {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3) 1px, transparent 1px),
              radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 20px 20px, 15px 15px;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}
.feature-content h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--txt-0);
  margin: 0 0 1rem;
  line-height: var(--leading-tight);
}

.feature-content p {
  font-size: var(--text-base);
  color: var(--txt-2);
  line-height: var(--leading-relaxed);
  margin-bottom: 2rem;
}

.feature-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.metric {
  text-align: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  transition: all var(--duration-normal) var(--ease-out);
}

.metric:hover {
  background: rgba(0, 212, 170, 0.05);
  border-color: rgba(0, 212, 170, 0.2);
}

.metric-value {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--brand-primary);
  font-family: var(--font-mono);
  margin-bottom: 0.25rem;
}

.metric-label {
  font-size: var(--text-xs);
  color: var(--txt-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-medium);
}

/* Features CTA */
.features-cta {
  text-align: center;
  margin-top: 6rem;
  padding: 3rem;
  background: var(--gradient-card);
  backdrop-filter: var(--backdrop-blur);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-2xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.features-cta h3 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--txt-0);
  margin-bottom: 1rem;
}

.features-cta p {
  font-size: var(--text-lg);
  color: var(--txt-2);
  margin-bottom: 2rem;
}

/* Responsive Features - Keep 3 columns as long as possible */
@media (max-width: 1024px) and (min-width: 769px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  
  .feature-card-premium {
    padding: 1.75rem;
  }
  
  .feature-card-premium h3 {
    font-size: 1.125rem;
  }
  
  .feature-card-premium p {
    font-size: 0.875rem;
    line-height: 1.4;
  }
  
  .metric-value {
    font-size: 1.25rem;
  }
}

@media (max-width: 768px) {
  .features-premium {
    padding: var(--s-8) 0; /* 64px on mobile - professional but not excessive */
  }
  
  .section-header {
    margin-bottom: var(--s-6); /* 48px - consistent with spacing system */
  }
  
  .section-header h2 {
    font-size: var(--text-4xl);
  }
  
  .section-description {
    font-size: var(--text-lg);
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .feature-card-premium {
    padding: 1.5rem;
    text-align: center;
  }
  
  .feature-icon-premium {
    margin: 0 auto 1.5rem;
  }
  
  .feature-metrics {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .features-cta {
    margin-top: 3rem;
    padding: 2rem;
  }
  
  .features-cta h3 {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 480px) {
  .feature-card-premium {
    padding: 1.25rem;
  }
  
  .feature-icon-premium {
    width: 60px;
    height: 60px;
  }
  
  .feature-svg {
    width: 24px;
    height: 24px;
  }
}

/* ---------------------------------- */
/* HOW IT WORKS SECTION               */
/* ---------------------------------- */
.how-it-works {
  padding: var(--s-8) 0; /* Consistent professional spacing */
  background: var(--bg-1);
  border-top: 1px solid var(--line-1);
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
  min-width: 0; /* Prevent overflow */
}
.step-card {
  text-align: center;
  position: relative;
  min-width: 0; /* Prevent overflow */
  word-wrap: break-word; /* Handle long text */
}
.step-number {
  width: 64px;
  height: 64px;
  background: var(--gradient-brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: white;
  margin: 0 auto var(--s-5);
}
.step-card h3 {
  font-size: var(--fs-xl);
  margin: 0 0 var(--s-3);
}
.step-card p {
  color: var(--txt-2);
  line-height: var(--lh-relaxed);
}

/* ---------------------------------- */
/* CTA SECTION                        */
/* ---------------------------------- */
.cta {
  padding: var(--s-12) 0;
  background: var(--gradient-hero);
  border-top: 1px solid var(--line-1);
}
.cta-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.cta h2 {
  font-size: var(--fs-4xl);
  margin: 0 0 var(--s-4);
}
.cta p {
  font-size: var(--fs-lg);
  color: var(--txt-2);
  margin: 0 0 var(--s-6);
}
.cta-actions {
  display: flex;
  gap: var(--s-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------------------------------- */
/* SMALL UTILS                        */
/* ---------------------------------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: var(--s-2); } .mb-2 { margin-bottom: var(--s-2); }
.mt-4 { margin-top: var(--s-4); } .mb-4 { margin-bottom: var(--s-4); }
.text-center { text-align: center; }
.right { text-align: right; }

/* ---------------------------------- */
/* RESPONSIVE UPDATES                 */
/* ---------------------------------- */
/* Enhanced Mobile-First Responsive Design */
/* Tablet breakpoint for steps-grid */
@media (max-width: 1024px) and (min-width: 769px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6);
  }
}

@media (max-width: 768px) {
  /* Hero Section Mobile */
  .hero {
    min-height: 70vh;
    padding: 60px 0 40px;
  }
  .hero-content {
    grid-template-columns: 1fr;
    gap: var(--s-8);
    text-align: center;
  }
  .hero h1 {
    font-size: var(--fs-4xl);
    line-height: 1.2;
  }
  .hero-description {
    font-size: var(--fs-md);
    margin-bottom: var(--s-5);
  }
  .hero-actions {
    justify-content: center;
    gap: var(--s-3);
  }
  .hero-badges {
    justify-content: center;
  }
  
  /* Exchange Grid Mobile */
  .exchanges-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4);
  }
  .exchange-card {
    padding: var(--s-4);
  }
  
  /* Features Grid Mobile */
  .features-grid,
  .steps-grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  
  /* Pricing Mobile */
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  
  /* Typography Mobile */
  .section-header h2 {
    font-size: var(--fs-3xl);
  }
  .cta h2 {
    font-size: var(--fs-3xl);
  }
  
  /* Navigation Mobile */
  .container {
    padding: var(--s-6) var(--s-4);
  }
  
  /* Showcase Mobile */
  .hero-showcase {
    margin-top: var(--s-6);
  }
  .showcase-item {
    padding: var(--s-4);
  }
}

@media (max-width: 480px) {
  /* Ultra Mobile Optimizations */
  .hero {
    padding: 40px 0 30px;
    min-height: 60vh;
  }
  .hero h1 {
    font-size: var(--fs-3xl);
    margin: var(--s-3) 0 var(--s-4);
  }
  .hero-description {
    font-size: var(--fs-sm);
  }
  
  /* Single Column Layouts */
  .exchanges-grid {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  
  /* Button Stacking */
  .hero-actions,
  .cta-actions {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .hero-actions .btn,
  .cta-actions .btn {
    width: 100%;
    max-width: 280px;
  }
  
  /* Badge Wrapping */
  .hero-badges {
    gap: var(--s-2);
  }
  .badge {
    font-size: var(--fs-xs);
    padding: var(--s-1) var(--s-2);
  }
  
  /* Compact Spacing */
  .container {
    padding: var(--s-4) var(--s-3);
  }
  section {
    padding: var(--s-8) 0;
  }
  
  /* Typography Scaling */
  .section-header h2 {
    font-size: var(--fs-2xl);
  }
  .feature-card h3 {
    font-size: var(--fs-lg);
  }
  
  /* Showcase Simplification */
  .showcase-item {
    padding: var(--s-3);
  }
  .showcase-title {
    font-size: var(--fs-xs);
  }
}

/* Landscape Mobile Adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    min-height: 60vh;
    padding: 40px 0 30px;
  }
  .hero h1 {
    font-size: var(--fs-4xl);
  }
}

/* ---------------------------------- */
/* PRICING & EXCHANGE COMPONENTS      */
/* ---------------------------------- */

/* Updated Exchange Cards */
.exchanges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-6);
  margin-top: var(--s-8);
}

.exchange-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-8);
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
}

.exchange-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-2);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.exchange-card.coming-soon {
  opacity: 0.7;
  position: relative;
}

.exchange-info {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.exchange-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.exchange-icon svg {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  transition: transform 0.2s ease;
}

.exchange-card:hover .exchange-icon svg {
  transform: scale(1.05);
}

/* Ensure SVG text is properly rendered */
.exchange-icon svg text {
  pointer-events: none;
  user-select: none;
}

.exchange-details {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.exchange-name {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--txt-0);
}

.exchange-features {
  font-size: var(--fs-sm);
  color: var(--txt-2);
}

.exchange-signup {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  justify-content: center;
  white-space: nowrap;
  margin-top: var(--s-6) !important;
}

.btn-icon {
  width: 16px;
  height: 16px;
}


/* Pricing Section */
.pricing {
  padding: var(--s-8) 0; /* Consistent with other sections */
  background: var(--gradient-pricing);
  position: relative;
}
.pricing::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 70% 30%, rgba(88, 166, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-8);
  margin-top: var(--s-8);
  padding-top: 24px; /* Space for badges */
  max-width: 100%;
  overflow: visible; /* Allow badges to show */
}

.pricing-grid-premium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--s-8);
  margin-top: var(--s-8);
  padding-top: 24px; /* Space for badges */
  max-width: 100%;
  overflow: visible; /* Allow badges to show */
  align-items: stretch; /* Ensure equal height cards */
}

.pricing-grid-large {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: var(--s-8);
  margin-top: var(--s-8);
  max-width: 100%;
  overflow: hidden;
}

.pricing-card {
  position: relative;
  background: var(--gradient-card);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 600px; /* Ensure minimum height for consistency */
}
.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-brand);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--brand-2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}
.pricing-card:hover::before {
  opacity: 1;
}

.pricing-card.featured {
  border-color: var(--brand-0);
  box-shadow: 0 12px 35px rgba(46, 160, 67, 0.2);
  transform: scale(1.05);
}
.pricing-card.featured::before {
  opacity: 1;
  background: var(--gradient-cta);
}

.pricing-card.pricing-free {
  background: linear-gradient(135deg, var(--bg-2) 0%, rgba(46, 160, 67, 0.08) 100%);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-0);
  color: var(--bg-0);
  z-index: 10;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-sm);
}

.pricing-header {
  text-align: center;
  margin-bottom: var(--s-6);
}

.pricing-header h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--txt-0);
  margin-bottom: var(--s-2);
}

.pricing-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
}

.price-amount {
  font-size: 3rem;
  font-weight: 700;
  color: var(--brand-0);
}

.price-period {
  font-size: var(--fs-lg);
  color: var(--txt-2);
}

.pricing-description {
  font-size: var(--fs-md);
  color: var(--txt-2);
  line-height: 1.5;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.pricing-features {
  margin-bottom: var(--s-6);
}

.pricing-features h4 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--txt-0);
  margin-bottom: var(--s-4);
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.feature-check {
  width: 20px;
  height: 20px;
  color: var(--brand-0);
  flex-shrink: 0;
  margin-top: 2px;
}

.feature-item span {
  color: var(--txt-1);
  line-height: 1.5;
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.pricing-action {
  text-align: center;
  margin-top: auto !important; /* Push to bottom of flex container */
  padding-top: var(--s-4); /* Add some space above the button */
}

.pricing-action .btn {
  width: 100%;
  margin-bottom: var(--s-2);
  min-height: 60px; /* Consistent button height */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Premium pricing cards specific fixes */
.pricing-card-premium {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 700px !important;
  position: relative;
}

.pricing-card-premium .pricing-action {
  margin-top: auto !important;
  align-self: flex-end !important;
  width: 100%;
}

.pricing-card-premium .pricing-features {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.pricing-note {
  font-size: var(--fs-sm);
  color: var(--txt-2);
  text-align: center;
}

.pricing-note strong {
  color: var(--txt-1);
}

/* Pricing Page Specific */
.pricing-hero {
  padding: var(--s-12) 0 var(--s-8);
  background: var(--bg-0);
  text-align: center;
}

.pricing-hero-content {
  max-width: 600px;
  margin: 0 auto;
}

.pricing-detailed {
  padding: var(--s-8) 0;
  background: var(--bg-1);
}

.pricing-explanation {
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid var(--line-1);
}

.pricing-explanation h2 {
  text-align: center;
  margin-bottom: var(--s-8);
}

.explanation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-6);
  max-width: 100%;
  overflow: hidden;
}

.explanation-item {
  text-align: center;
  padding: var(--s-4);
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.explanation-icon {
  font-size: 2rem;
  margin-bottom: var(--s-3);
}

.explanation-item h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--s-3);
}

.pricing-faq {
  margin-top: var(--s-8);
  padding-top: var(--s-8);
  border-top: 1px solid var(--line-1);
}

.pricing-faq h2 {
  text-align: center;
  margin-bottom: var(--s-8);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-6);
  max-width: 100%;
  overflow: hidden;
}

.faq-item {
  padding: var(--s-4);
  background: var(--bg-2);
  border-radius: var(--radius-md);
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

.faq-item h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--s-3);
  color: var(--txt-0);
}

.faq-item p {
  color: var(--txt-2);
  line-height: 1.5;
}

.pricing-cta {
  padding: var(--s-8) 0;
  background: var(--bg-0);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .pricing-grid,
  .pricing-grid-large {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    margin: var(--s-6) 0;
  }
  
  .pricing-card {
    padding: var(--s-5);
    margin: 0 var(--s-2);
    max-width: calc(100% - var(--s-4));
  }
  
  .pricing-header h3 {
    font-size: var(--fs-lg);
    word-wrap: break-word;
  }
  
  .price-amount {
    font-size: 2.5rem;
  }
  
  .feature-item {
    gap: var(--s-2);
  }
  
  .feature-item span {
    font-size: var(--fs-sm);
    line-height: 1.4;
  }
  
  .exchange-card {
    padding: var(--s-4);
  }
  
  .exchange-info {
    flex-direction: column;
    text-align: center;
  }
  
  .exchange-signup {
    margin-top: var(--s-4) !important;
  }
  
  .price-amount {
    font-size: 2.5rem;
  }
  
  .explanation-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------- */
/* REFERRAL FORM ENHANCEMENTS         */
/* ---------------------------------- */

/* Spinner animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  border: 2px solid var(--line-1);
  border-top: 2px solid var(--brand-0);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: inline-block;
}

/* Referral field styling */
.field select.input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}

/* Validation state styling */
.input.valid {
  border-color: var(--ok-0);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.input.invalid {
  border-color: var(--danger-0);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Enhanced button states */
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

button.loading {
  position: relative;
}

button.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Alert variants for better feedback */
.alert.success {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.1);
  color: var(--ok-0);
}

.alert.warning {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.1);
  color: var(--warn-0);
}

.alert.info {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

/* Form section spacing */
.field + .field {
  margin-top: var(--s-4);
}

/* Responsive form adjustments */
@media (max-width: 480px) {
  .cluster {
    flex-direction: column;
    align-items: stretch;
  }
  
  .cluster button {
    margin-top: var(--s-2);
  }
  
  .field select.input {
    background-position: right 8px center;
    padding-right: 32px;
  }
}

/* ---------------------------------- */
/* SETTINGS & SUBSCRIPTION PAGES     */
/* ---------------------------------- */

/* Theme selector */
.theme-selector {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.theme-option {
  position: relative;
}

.theme-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-label:hover {
  border-color: var(--line-2);
  background: var(--bg-3);
}

.theme-option input[type="radio"]:checked + .theme-label {
  border-color: var(--brand-0);
  background: var(--brand-bg);
}

.theme-preview {
  width: 32px;
  height: 24px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
}

.dark-preview {
  background: linear-gradient(135deg, #1a1d21 0%, #2d333b 100%);
}

.light-preview {
  background: linear-gradient(135deg, #ffffff 0%, #f1f3f4 100%);
}

.theme-label span {
  font-weight: 500;
}

.theme-label small {
  color: var(--txt-2);
  font-size: var(--fs-xs);
  margin-top: 2px;
}

/* Subscription summary */
.subscription-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-4);
  background: var(--bg-3);
  border-radius: var(--r-md);
  border: 1px solid var(--line-1);
}

.summary-info h3 {
  margin: 0 0 var(--s-1);
  color: var(--txt-0);
}

.summary-info p {
  margin: 0 0 var(--s-2);
  color: var(--txt-2);
}

/* Pricing plans */
.pricing-plans {
  display: grid;
  gap: var(--s-5);
}

.pricing-plan {
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  padding: var(--s-5);
  background: var(--bg-3);
  position: relative;
}

.pricing-plan.featured {
  border-color: var(--brand-0);
  background: var(--brand-bg);
}

.plan-header {
  text-align: center;
  margin-bottom: var(--s-4);
  position: relative;
}

.plan-header h3 {
  margin: 0 0 var(--s-2);
  color: var(--txt-0);
}

.plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: var(--s-2);
}

.plan-price .currency {
  font-size: var(--fs-lg);
  color: var(--txt-2);
}

.plan-price .amount {
  font-size: var(--fs-4xl);
  font-weight: 700;
  color: var(--txt-0);
}

.plan-price .period {
  font-size: var(--fs-md);
  color: var(--txt-2);
}

.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-0);
  color: white;
  padding: 6px var(--s-3);
  border-radius: 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  z-index: 10;
  white-space: nowrap;
}

.plan-features ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-4);
}

.plan-features li {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line-1);
  color: var(--txt-1);
}

.plan-features li:last-child {
  border-bottom: none;
}

.plan-action {
  text-align: center;
}

.plan-note {
  font-size: var(--fs-sm);
  color: var(--txt-2);
  margin-bottom: var(--s-3);
  font-style: italic;
}

/* Feature list */
.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  padding: var(--s-1) 0;
  color: var(--txt-1);
}

.feature-list li:before {
  content: "✓";
  color: var(--ok-0);
  font-weight: bold;
  margin-right: var(--s-2);
}

.billing-info {
  margin-top: var(--s-4);
  padding: var(--s-3);
  background: var(--bg-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

/* Modal styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  backdrop-filter: blur(4px);
}

.modal-content {
  background: var(--bg-2);
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-5);
  border-bottom: 1px solid var(--line-1);
}

.modal-header h3 {
  margin: 0;
  color: var(--txt-0);
}

.modal-close {
  background: none;
  border: none;
  font-size: var(--fs-2xl);
  color: var(--txt-2);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: var(--txt-0);
}

.modal-body {
  padding: var(--s-5);
}

.modal-actions {
  display: flex;
  gap: var(--s-3);
  justify-content: flex-end;
  margin-top: var(--s-4);
}

.upgrade-summary {
  margin-bottom: var(--s-5);
  padding: var(--s-4);
  background: var(--bg-3);
  border-radius: var(--r-md);
  border: 1px solid var(--line-1);
}

.upgrade-plan h4 {
  margin: 0 0 var(--s-1);
  color: var(--txt-0);
}

.upgrade-features {
  margin-top: var(--s-3);
}

.upgrade-features h5 {
  margin: 0 0 var(--s-2);
  color: var(--txt-0);
  font-size: var(--fs-sm);
}

.upgrade-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.upgrade-features li {
  padding: 2px 0;
  color: var(--txt-2);
  font-size: var(--fs-sm);
}

.upgrade-features li:before {
  content: "✓";
  color: var(--ok-0);
  margin-right: var(--s-2);
}

/* Loading spinner */
.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  color: var(--txt-2);
}

.loading-spinner:before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid var(--line-2);
  border-top-color: var(--brand-0);
  border-radius: 50%;
  margin-right: var(--s-3);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Badge styles */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.badge.paid {
  background: var(--ok-bg);
  color: var(--ok-0);
}

.badge.pending {
  background: var(--warn-bg);
  color: var(--warn-0);
}

.badge.failed {
  background: var(--err-bg);
  color: var(--err-0);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .subscription-summary {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  
  .summary-action {
    margin-top: var(--s-3);
  }
  
  .pricing-plans {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    width: 95%;
    margin: var(--s-4);
  }
  
  .modal-actions {
    flex-direction: column;
  }
  
  .theme-label {
    flex-direction: column;
    text-align: center;
  }
}

/* ---------------------------------- */
/* PREMIUM ANIMATIONS & MICRO-INTERACTIONS */
/* ---------------------------------- */

/* Core Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Advanced Animations */
@keyframes gradientFlow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 212, 170, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 212, 170, 0.6);
    transform: scale(1.02);
  }
}

@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes rotateY {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -8px, 0);
  }
  70% {
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

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

@keyframes slideInUp {
  from {
    transform: translateY(100vh);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-100vh);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Trading-Specific Animations */
@keyframes priceUp {
  0% {
    color: var(--txt-1);
    transform: scale(1);
  }
  50% {
    color: var(--brand-success);
    transform: scale(1.1);
  }
  100% {
    color: var(--brand-success);
    transform: scale(1);
  }
}

@keyframes priceDown {
  0% {
    color: var(--txt-1);
    transform: scale(1);
  }
  50% {
    color: var(--brand-danger);
    transform: scale(1.1);
  }
  100% {
    color: var(--brand-danger);
    transform: scale(1);
  }
}

@keyframes chartLine {
  from {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Animation Utility Classes */
.animate-fade-in {
  animation: fadeIn 0.6s var(--ease-out) forwards;
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s var(--ease-out) forwards;
}

.animate-fade-in-down {
  animation: fadeInDown 0.8s var(--ease-out) forwards;
}

.animate-fade-in-left {
  animation: fadeInLeft 0.8s var(--ease-out) forwards;
}

.animate-fade-in-right {
  animation: fadeInRight 0.8s var(--ease-out) forwards;
}

.animate-scale-in {
  animation: scaleIn 0.6s var(--ease-bounce) forwards;
}

.animate-slide-up {
  animation: slideUp 0.8s var(--ease-out) forwards;
}

.animate-pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

.animate-float {
  animation: floatGentle 3s ease-in-out infinite;
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradientFlow 3s ease infinite;
}

.animate-shimmer {
  background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.1) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Hover Effects */
.hover-lift {
  transition: all var(--duration-normal) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hover-scale {
  transition: transform var(--duration-normal) var(--ease-out);
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-glow {
  transition: all var(--duration-normal) var(--ease-out);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow);
}

/* Animation Delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-700 { animation-delay: 0.7s; }
.delay-1000 { animation-delay: 1s; }

/* Intersection Observer Triggers */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s var(--ease-out);
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: all 0.8s var(--ease-out);
}

.scroll-reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.scroll-reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.8s var(--ease-out);
}

.scroll-reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.scroll-reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.8s var(--ease-out);
}

.scroll-reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Fallback: Show scroll-reveal elements when JavaScript is disabled/missing */
.no-js .scroll-reveal,
.no-js .scroll-reveal-left,
.no-js .scroll-reveal-right,
.no-js .scroll-reveal-scale {
  opacity: 1 !important;
  transform: none !important;
}

/* Auto-reveal after page load (when JS animations fail) */
body.loaded .scroll-reveal,
body.loaded .scroll-reveal-left,
body.loaded .scroll-reveal-right,
body.loaded .scroll-reveal-scale {
  opacity: 1;
  transform: none;
}

/* Premium Button System */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  transform: translateZ(0);
  backface-visibility: hidden;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}

/* Button Sizes */
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
}

.btn-md {
  padding: 0.75rem 1.5rem;
  font-size: var(--text-base);
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: var(--text-lg);
  border-radius: var(--radius-xl);
}

.btn-xl {
  padding: 1.25rem 2.5rem;
  font-size: var(--text-xl);
  border-radius: var(--radius-xl);
}

/* Button Variants */
.btn-primary {
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
  filter: brightness(1.1);
}

.btn-secondary {
  background: var(--bg-3);
  color: var(--txt-0);
  border: 1px solid var(--line-2);
}

.btn-secondary:hover {
  background: var(--bg-4);
  border-color: var(--brand-primary);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--txt-1);
  border: 1px solid var(--line-1);
}

.btn-ghost:hover {
  background: var(--glass-light);
  backdrop-filter: var(--backdrop-blur);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.btn-glass {
  background: var(--glass-medium);
  backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-light);
  color: var(--txt-0);
}

.btn-glass:hover {
  background: var(--glass-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-success {
  background: var(--gradient-success);
  color: white;
}

.btn-danger {
  background: var(--gradient-danger);
  color: white;
}

/* Button States */
.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn:disabled:hover,
.btn.disabled:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* Button Effects */
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.btn:hover::before {
  left: 100%;
}

.btn-magnetic {
  transition: all var(--duration-normal) var(--ease-out);
}

.btn-magnetic:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}

/* Loading State */
.btn-loading {
  position: relative;
  color: transparent;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Icon Buttons */
.btn-icon {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.btn:hover .btn-icon {
  transform: translateX(2px);
}

/* Focus States */
.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Responsive */
@media (max-width: 768px) {
  .btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: var(--text-base);
  }
  
  .btn-xl {
    padding: 1rem 2rem;
    font-size: var(--text-lg);
  }
}

/* Enhanced card interactions */
.card, .pricing-card, .feature-card, .showcase-item {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.card:hover, .feature-card:hover {
  animation: float 2s ease-in-out infinite;
}

/* Exchange card special effects */
.exchange-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.exchange-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.exchange-card.coming-soon:hover {
  transform: translateY(-4px);
}

/* Text gradient animation */
.gradient-text {
  background: linear-gradient(45deg, var(--brand-0), var(--info-0), var(--brand-0));
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-flow 3s ease infinite;
}

/* Enhanced focus states */
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus), 0 0 0 1px rgba(46, 160, 67, 0.3);
  transform: translateY(-1px);
}

/* Loading shimmer effect */
.loading-shimmer {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: shimmer-enhanced 2s infinite;
}

/* Scroll-triggered animations */
@media (prefers-reduced-motion: no-preference) {
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
  }
  
  .animate-on-scroll.delay-1 { transition-delay: 0.1s; }
  .animate-on-scroll.delay-2 { transition-delay: 0.2s; }
  .animate-on-scroll.delay-3 { transition-delay: 0.3s; }
}

/* Performance Optimizations */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Modern glass morphism effect */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Enhanced CTA section */
.cta {
  background: var(--gradient-cta);
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  animation: pulse 4s ease-in-out infinite;
}


/* Exchange card spacing improvements - fix for clumped buttons */
.exchange-card .exchange-signup {
  margin-top: 2rem !important;
  padding-top: 1rem !important;
}

.exchanges-grid .exchange-card {
  padding: 2rem !important;
  gap: 1.5rem !important;
}

/* ================================================ */
/* PROFESSIONAL MOBILE OPTIMIZATION - SIGNAL SWAP */
/* ================================================ */

/* Mobile-First Responsive Design with Smart Column Usage */
@media (max-width: 768px) {
  /* COMPACT SPACING SYSTEM FOR MOBILE */
  :root {
    --mobile-space-xs: 0.25rem;  /* 4px */
    --mobile-space-sm: 0.5rem;   /* 8px */
    --mobile-space-md: 0.75rem;  /* 12px */
    --mobile-space-lg: 1rem;     /* 16px */
    --mobile-space-xl: 1.5rem;   /* 24px */
    --mobile-space-2xl: 2rem;    /* 32px */
  }

  /* HERO SECTION - COMPACT & PROFESSIONAL */
  .hero-premium {
    min-height: 70vh !important;
    padding: var(--mobile-space-xl) 0 !important;
  }
  
  .hero-content {
    grid-template-columns: 1fr !important;
    gap: var(--mobile-space-lg) !important;
    text-align: center !important;
  }
  
  .hero-title {
    font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
    line-height: 1.2 !important;
    margin: var(--mobile-space-md) 0 !important;
  }
  
  .hero-description {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin-bottom: var(--mobile-space-lg) !important;
  }

  /* HERO ACTIONS - SMART MOBILE LAYOUT */
  .hero-actions {
    flex-direction: row !important;
    gap: var(--mobile-space-md) !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  
  .hero-actions .btn {
    min-width: 140px !important;
    padding: 0.75rem 1.25rem !important;
  }

  /* SECTION SPACING - DRAMATICALLY REDUCED */
  section {
    padding: var(--mobile-space-2xl) 0 !important;
  }
  
  .section-header {
    margin-bottom: var(--mobile-space-xl) !important;
  }
  
  .section-title {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
    margin-bottom: var(--mobile-space-md) !important;
  }

  /* FEATURES SECTION - SMART 2-COLUMN LAYOUT */
  .features-premium {
    padding: var(--mobile-space-2xl) 0 !important;
  }
  
  .features-grid,
  .steps-grid-premium,
  .exchanges-grid,
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--mobile-space-lg) var(--mobile-space-md) !important;
    margin: var(--mobile-space-lg) 0 !important;
  }
  
  .feature-card-premium {
    padding: var(--mobile-space-lg) !important;
    text-align: center !important;
  }
  
  .feature-icon-premium {
    width: 2.5rem !important;
    height: 2.5rem !important;
    margin: 0 auto var(--mobile-space-sm) auto !important;
  }
  
  .feature-card-premium h4 {
    font-size: 0.9rem !important;
    margin-bottom: var(--mobile-space-sm) !important;
  }
  
  .feature-card-premium p {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }

  /* PRICING CARDS - COMPACT SINGLE COLUMN */
  .pricing-grid,
  .pricing-grid-large,
  .pricing-grid-premium {
    grid-template-columns: 1fr !important;
    gap: var(--mobile-space-lg) !important;
    margin: var(--mobile-space-lg) 0 !important;
    padding-top: var(--mobile-space-md) !important;
  }

  .pricing-card,
  .pricing-card-premium {
    min-height: 400px !important;
    padding: var(--mobile-space-lg) !important;
    margin-bottom: var(--mobile-space-md) !important;
  }
  
  .pricing-header {
    margin-bottom: var(--mobile-space-lg) !important;
  }
  
  .pricing-features {
    margin-bottom: var(--mobile-space-lg) !important;
  }
  
  .feature-item {
    margin-bottom: var(--mobile-space-sm) !important;
    gap: var(--mobile-space-sm) !important;
  }
  
  .pricing-action {
    padding-top: var(--mobile-space-md) !important;
  }

  /* TRUSTED BY SECTION - COMPACT GRID */
  .hero-trust-indicators {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--mobile-space-md) !important;
    margin-top: var(--mobile-space-lg) !important;
  }
  
  .trust-item {
    text-align: center !important;
    padding: var(--mobile-space-sm) !important;
  }

  /* STATISTICS - SMART 2x2 GRID */
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--mobile-space-lg) var(--mobile-space-md) !important;
  }
  
  .stat-item {
    text-align: center !important;
    padding: var(--mobile-space-md) !important;
  }
  
  .stat-number {
    font-size: 1.5rem !important;
  }
  
  .stat-label {
    font-size: 0.8rem !important;
  }

  /* TESTIMONIALS - SINGLE COLUMN */
  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: var(--mobile-space-lg) !important;
  }
  
  .testimonial-card {
    padding: var(--mobile-space-lg) !important;
  }

  /* FAQ SECTION - COMPACT */
  .faq-item {
    margin-bottom: var(--mobile-space-md) !important;
  }
  
  .faq-question {
    padding: var(--mobile-space-md) !important;
    font-size: 0.9rem !important;
  }
  
  .faq-answer {
    padding: var(--mobile-space-md) !important;
    font-size: 0.85rem !important;
  }
}

/* ADDITIONAL GRID OVERRIDES FOR MAXIMUM COMPATIBILITY */
@media (max-width: 768px) {
  /* Override all possible grid configurations */
  div[class*="grid"],
  .grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--mobile-space-lg) var(--mobile-space-md) !important;
  }
  
  /* Specific override for single-column items */
  .pricing-grid,
  .pricing-grid-large,
  .pricing-grid-premium {
    grid-template-columns: 1fr !important;
  }
  
  /* Reduce vertical spacing dramatically */
  .section,
  section {
    padding: var(--mobile-space-xl) 0 !important;
    margin: 0 !important;
  }
  
  .container {
    padding: 0 var(--mobile-space-lg) !important;
  }
}

/* ULTRA MOBILE - SINGLE COLUMN OPTIMIZATION */
@media (max-width: 480px) {
  /* FEATURES - SINGLE COLUMN ON SMALL SCREENS */
  .features-grid,
  .steps-grid-premium,
  .exchanges-grid,
  .footer-grid,
  div[class*="grid"],
  .grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: var(--mobile-space-md) !important;
  }
  
  /* HERO ACTIONS - STACK ON TINY SCREENS */
  .hero-actions {
    flex-direction: column !important;
    gap: var(--mobile-space-md) !important;
    align-items: stretch !important;
  }
  
  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  
  /* TRUST INDICATORS - SINGLE COLUMN */
  .hero-trust-indicators {
    grid-template-columns: 1fr !important;
    gap: var(--mobile-space-sm) !important;
  }
  
  /* STATISTICS - SINGLE COLUMN */
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: var(--mobile-space-md) !important;
  }
  
  .cluster {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .form-group {
    margin-bottom: var(--mobile-space-lg) !important;
  }
  
  .btn-group {
    flex-direction: column !important;
    gap: var(--mobile-space-md) !important;
  }
}

/* MOBILE NAVIGATION IMPROVEMENTS */
@media (max-width: 768px) {
  .nav-container {
    padding: 0 var(--mobile-space-lg) !important;
  }
  
  .nav-actions {
    display: none !important;
  }
  
  .hamburger {
    display: flex !important;
  }
}

/* MOBILE CARDS & COMPONENTS */
@media (max-width: 768px) {
  .card-body,
  .card-header,
  .card-footer {
    padding: var(--mobile-space-lg) !important;
  }
  
  .card {
    margin-bottom: var(--mobile-space-lg) !important;
  }
  
  /* TABLE RESPONSIVENESS */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* FORM IMPROVEMENTS */
  .form-row {
    flex-direction: column !important;
    gap: var(--mobile-space-md) !important;
  }
  
  .form-col {
    flex: 1 !important;
    min-width: 100% !important;
  }
  
  /* BUTTON IMPROVEMENTS */
  .btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
  }
  
  .btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
  }
}

/* LANDSCAPE MOBILE ADJUSTMENTS */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-premium {
    min-height: 60vh !important;
    padding: var(--mobile-space-lg) 0 !important;
  }
  
  .hero-title {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
  }
  
  section {
    padding: var(--mobile-space-xl) 0 !important;
  }
}