/* ==========================================================================
   LOOKATO DESIGN SYSTEM
   A monospace-first, dark-theme design system for data-driven products.
   
   Sections:
   1. Design Tokens (CSS Custom Properties)
   2. Reset & Base
   3. Typography
   4. Layout & Grid
   5. Buttons
   6. Cards
   7. Inputs & Forms
   8. Tabs
   9. Badges & Chips
   10. Avatars
   11. Status Indicators
   12. KPI / Stat Cards
   13. Bar Chart (CSS-only)
   14. Tables
   15. Alerts & Callouts
   16. Progress Bars
   17. Tooltips
   18. Modals
   19. Dropdowns
   20. Navigation
   21. Status Bar
   22. Section Headers
   23. Testimonial Cards
   24. Pricing Cards
   25. Connector / Integration Icons
   26. Steps / How-It-Works
   27. Logo Strip / Social Proof
   28. Dividers
   29. Footer
   30. Utility Classes
   31. Animations
   32. Responsive
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* ---- Backgrounds ---- */
  --lo-bg-base:       #0b0f1a;
  --lo-bg-raised:     #101525;
  --lo-bg-card:       #141a2e;
  --lo-bg-hover:      #1b2240;
  --lo-bg-overlay:    rgba(11, 15, 26, 0.8);
  --lo-bg-inset:      #070a12;

  /* ---- Borders ---- */
  --lo-border:        #1f2847;
  --lo-border-bright: #2d3a5c;
  --lo-border-focus:  #f0b429;

  /* ---- Text ---- */
  --lo-text:          #b8c0d0;
  --lo-text-bright:   #e8ecf4;
  --lo-text-dim:      #505a72;
  --lo-text-muted:    #3a4260;

  /* ---- Accent: Amber (Primary) ---- */
  --lo-amber:         #f0b429;
  --lo-amber-hover:   #d9a01e;
  --lo-amber-dim:     rgba(240, 180, 41, 0.15);
  --lo-amber-bg:      rgba(240, 180, 41, 0.06);

  /* ---- Accent: Blue (Info / Links) ---- */
  --lo-blue:          #6cb4ee;
  --lo-blue-hover:    #539bd5;
  --lo-blue-dim:      rgba(108, 180, 238, 0.15);
  --lo-blue-bg:       rgba(108, 180, 238, 0.06);

  /* ---- Accent: Teal (Success) ---- */
  --lo-teal:          #2dd4bf;
  --lo-teal-hover:    #20b8a5;
  --lo-teal-dim:      rgba(45, 212, 191, 0.15);
  --lo-teal-bg:       rgba(45, 212, 191, 0.06);

  /* ---- Accent: Rose (Warning) ---- */
  --lo-rose:          #f472b6;
  --lo-rose-hover:    #db5a9e;
  --lo-rose-dim:      rgba(244, 114, 182, 0.15);
  --lo-rose-bg:       rgba(244, 114, 182, 0.06);

  /* ---- Accent: Red (Danger) ---- */
  --lo-red:           #ef4444;
  --lo-red-hover:     #d63030;
  --lo-red-dim:       rgba(239, 68, 68, 0.15);
  --lo-red-bg:        rgba(239, 68, 68, 0.06);

  /* ---- Typography ---- */
  --lo-font:          'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  --lo-font-size-xs:  11px;
  --lo-font-size-sm:  12px;
  --lo-font-size-base: 14px;
  --lo-font-size-md:  15px;
  --lo-font-size-lg:  18px;
  --lo-font-size-xl:  24px;
  --lo-font-size-2xl: 32px;
  --lo-font-size-3xl: 40px;
  --lo-font-size-4xl: 52px;
  --lo-line-height:   1.7;
  --lo-line-height-tight: 1.3;
  --lo-line-height-heading: 1.15;

  /* ---- Spacing ---- */
  --lo-space-1:  4px;
  --lo-space-2:  8px;
  --lo-space-3:  12px;
  --lo-space-4:  16px;
  --lo-space-5:  20px;
  --lo-space-6:  24px;
  --lo-space-8:  32px;
  --lo-space-10: 40px;
  --lo-space-12: 48px;
  --lo-space-16: 64px;
  --lo-space-20: 80px;
  --lo-space-24: 96px;

  /* ---- Radii ---- */
  --lo-radius-sm: 4px;
  --lo-radius:    8px;
  --lo-radius-lg: 12px;
  --lo-radius-xl: 16px;
  --lo-radius-full: 9999px;

  /* ---- Shadows ---- */
  --lo-shadow-sm:  0 2px 8px rgba(0,0,0,0.2);
  --lo-shadow:     0 8px 24px rgba(0,0,0,0.3);
  --lo-shadow-lg:  0 24px 80px rgba(0,0,0,0.5);
  --lo-shadow-glow-amber: 0 0 24px rgba(240,180,41,0.08);
  --lo-shadow-glow-blue:  0 0 24px rgba(108,180,238,0.08);

  /* ---- Transitions ---- */
  --lo-transition-fast: 0.15s ease;
  --lo-transition:      0.2s ease;
  --lo-transition-slow: 0.3s ease;

  /* ---- Z-Index ---- */
  --lo-z-dropdown: 50;
  --lo-z-sticky:   100;
  --lo-z-modal:    200;
  --lo-z-tooltip:  300;
  --lo-z-toast:    400;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--lo-font);
  font-size: var(--lo-font-size-base);
  line-height: var(--lo-line-height);
  color: var(--lo-text);
  background: var(--lo-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
a { color: var(--lo-blue); text-decoration: none; transition: color var(--lo-transition); }
a:hover { color: var(--lo-amber); }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--lo-amber-dim); color: var(--lo-text-bright); }
:focus-visible { outline: 2px solid var(--lo-amber); outline-offset: 2px; border-radius: var(--lo-radius-sm); }


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  color: var(--lo-text-bright);
  font-weight: 700;
  line-height: var(--lo-line-height-tight);
  margin: 0;
}
h1 { font-size: var(--lo-font-size-4xl); line-height: var(--lo-line-height-heading); }
h2 { font-size: var(--lo-font-size-2xl); }
h3 { font-size: var(--lo-font-size-lg); }
h4 { font-size: var(--lo-font-size-md); }
h5 { font-size: var(--lo-font-size-base); }
h6 { font-size: var(--lo-font-size-sm); text-transform: uppercase; letter-spacing: 0.5px; }

p { margin: 0; }
strong, b { font-weight: 600; color: var(--lo-text-bright); }
small { font-size: var(--lo-font-size-sm); }
code {
  font-family: var(--lo-font);
  background: var(--lo-bg-hover);
  padding: 2px 6px;
  border-radius: var(--lo-radius-sm);
  font-size: 0.9em;
  color: var(--lo-amber);
}
pre {
  background: var(--lo-bg-inset);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius);
  padding: var(--lo-space-4);
  overflow-x: auto;
  font-size: var(--lo-font-size-sm);
  line-height: 1.8;
  color: var(--lo-text);
}
pre code { background: none; padding: 0; }
blockquote {
  border-left: 3px solid var(--lo-amber);
  padding-left: var(--lo-space-4);
  color: var(--lo-text);
  font-style: italic;
}

/* Named text sizes */
.text-xs   { font-size: var(--lo-font-size-xs); }
.text-sm   { font-size: var(--lo-font-size-sm); }
.text-base { font-size: var(--lo-font-size-base); }
.text-md   { font-size: var(--lo-font-size-md); }
.text-lg   { font-size: var(--lo-font-size-lg); }
.text-xl   { font-size: var(--lo-font-size-xl); }
.text-2xl  { font-size: var(--lo-font-size-2xl); }
.text-3xl  { font-size: var(--lo-font-size-3xl); }
.text-4xl  { font-size: var(--lo-font-size-4xl); }

/* Named text colors */
.text-default { color: var(--lo-text); }
.text-bright  { color: var(--lo-text-bright); }
.text-dim     { color: var(--lo-text-dim); }
.text-muted   { color: var(--lo-text-muted); }
.text-amber   { color: var(--lo-amber); }
.text-blue    { color: var(--lo-blue); }
.text-teal    { color: var(--lo-teal); }
.text-rose    { color: var(--lo-rose); }
.text-red     { color: var(--lo-red); }

/* Font weights */
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* Label (small uppercase) */
.label {
  display: inline-block;
  font-size: var(--lo-font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--lo-amber);
}


/* ==========================================================================
   4. LAYOUT & GRID
   ========================================================================== */

.container       { max-width: 1200px; margin: 0 auto; padding: 0 var(--lo-space-10); }
.container-sm    { max-width: 720px;  margin: 0 auto; padding: 0 var(--lo-space-10); }
.container-lg    { max-width: 1400px; margin: 0 auto; padding: 0 var(--lo-space-10); }
.container-fluid { width: 100%;       padding: 0 var(--lo-space-10); }

.section    { padding: var(--lo-space-20) 0; }
.section-lg { padding: var(--lo-space-24) 0; }
.section-sm { padding: var(--lo-space-12) 0; }

.grid   { display: grid; gap: var(--lo-space-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-6 { grid-column: span 6; }

.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.flex-1      { flex: 1; }
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.self-center { align-self: center; }

.gap-1  { gap: var(--lo-space-1); }
.gap-2  { gap: var(--lo-space-2); }
.gap-3  { gap: var(--lo-space-3); }
.gap-4  { gap: var(--lo-space-4); }
.gap-5  { gap: var(--lo-space-5); }
.gap-6  { gap: var(--lo-space-6); }
.gap-8  { gap: var(--lo-space-8); }
.gap-10 { gap: var(--lo-space-10); }

/* Vertical stack with uniform spacing between children */
.stack > * + * { margin-top: var(--lo-space-4); }
.stack-sm > * + * { margin-top: var(--lo-space-2); }
.stack-lg > * + * { margin-top: var(--lo-space-8); }
.stack-xl > * + * { margin-top: var(--lo-space-12); }


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--lo-space-2);
  font-family: var(--lo-font);
  font-size: var(--lo-font-size-sm);
  font-weight: 600;
  line-height: 1;
  padding: 10px 22px;
  border-radius: var(--lo-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--lo-transition);
  white-space: nowrap;
  text-decoration: none;
}
.btn:focus-visible { outline-offset: 2px; }
.btn:disabled, .btn[disabled] {
  opacity: 0.4; cursor: not-allowed; pointer-events: none;
}

/* Primary (amber) */
.btn-primary {
  background: var(--lo-amber); color: var(--lo-bg-base);
  border-color: var(--lo-amber);
}
.btn-primary:hover { background: var(--lo-amber-hover); border-color: var(--lo-amber-hover); color: var(--lo-bg-base); }

/* Ghost (bordered, transparent) */
.btn-ghost {
  background: transparent; color: var(--lo-text);
  border-color: var(--lo-border);
}
.btn-ghost:hover { border-color: var(--lo-border-bright); background: var(--lo-bg-hover); color: var(--lo-text-bright); }

/* Outline */
.btn-outline {
  background: transparent; color: var(--lo-text);
  border-color: var(--lo-border);
}
.btn-outline:hover { border-color: var(--lo-amber); color: var(--lo-amber); }

/* Danger */
.btn-danger {
  background: var(--lo-red); color: #fff;
  border-color: var(--lo-red);
}
.btn-danger:hover { background: var(--lo-red-hover); border-color: var(--lo-red-hover); }

/* Teal */
.btn-teal {
  background: var(--lo-teal); color: var(--lo-bg-base);
  border-color: var(--lo-teal);
}
.btn-teal:hover { background: var(--lo-teal-hover); border-color: var(--lo-teal-hover); color: var(--lo-bg-base); }

/* Blue */
.btn-blue {
  background: var(--lo-blue); color: var(--lo-bg-base);
  border-color: var(--lo-blue);
}
.btn-blue:hover { background: var(--lo-blue-hover); border-color: var(--lo-blue-hover); color: var(--lo-bg-base); }

/* Sizes */
.btn-sm { padding: 6px 14px; font-size: var(--lo-font-size-xs); }
.btn-lg { padding: 14px 28px; font-size: var(--lo-font-size-base); }
.btn-full { width: 100%; }

/* Icon-only button */
.btn-icon {
  padding: 8px; width: 36px; height: 36px;
}
.btn-icon.btn-sm { width: 28px; height: 28px; padding: 4px; }
.btn-icon.btn-lg { width: 44px; height: 44px; padding: 10px; }


/* ==========================================================================
   6. CARDS
   ========================================================================== */

.card {
  background: var(--lo-bg-card);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius-lg);
  transition: all 0.25s;
}
.card:hover { border-color: var(--lo-border-bright); }
.card-raised { box-shadow: var(--lo-shadow); }
.card-interactive:hover { transform: translateY(-2px); border-color: var(--lo-border-bright); }
.card-amber  { border-color: var(--lo-amber); }
.card-amber:hover { box-shadow: var(--lo-shadow-glow-amber); }

.card-header {
  padding: var(--lo-space-5) var(--lo-space-6);
  border-bottom: 1px solid var(--lo-border);
}
.card-body { padding: var(--lo-space-6); }
.card-footer {
  padding: var(--lo-space-5) var(--lo-space-6);
  border-top: 1px solid var(--lo-border);
}
.card-flush { padding: 0; }
.card-body.card-flush { padding: 0; }


/* ==========================================================================
   7. INPUTS & FORMS
   ========================================================================== */

.input {
  display: block; width: 100%;
  font-family: var(--lo-font);
  font-size: var(--lo-font-size-sm);
  color: var(--lo-text-bright);
  background: var(--lo-bg-base);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius);
  padding: 10px 14px;
  transition: all var(--lo-transition);
}
.input::placeholder { color: var(--lo-text-dim); }
.input:hover { border-color: var(--lo-border-bright); }
.input:focus { border-color: var(--lo-border-focus); outline: none; box-shadow: 0 0 0 3px var(--lo-amber-dim); }
.input:disabled { opacity: 0.4; cursor: not-allowed; }
.input-error { border-color: var(--lo-red); }
.input-error:focus { box-shadow: 0 0 0 3px var(--lo-red-dim); }

.input-sm { padding: 6px 10px; font-size: var(--lo-font-size-xs); }
.input-lg { padding: 14px 18px; font-size: var(--lo-font-size-base); }

/* Input group (icon + input) */
.input-group {
  position: relative; display: flex; align-items: center;
}
.input-group .input { padding-left: 38px; }
.input-group-icon {
  position: absolute; left: 12px;
  color: var(--lo-text-dim);
  font-size: var(--lo-font-size-sm);
  pointer-events: none;
  z-index: 1;
}

/* Textarea */
textarea.input { min-height: 100px; resize: vertical; }

/* Select */
.select {
  display: block; width: 100%;
  font-family: var(--lo-font);
  font-size: var(--lo-font-size-sm);
  color: var(--lo-text-bright);
  background: var(--lo-bg-base);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius);
  padding: 10px 14px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23505a72' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: all var(--lo-transition);
}
.select:hover { border-color: var(--lo-border-bright); }
.select:focus { border-color: var(--lo-border-focus); outline: none; box-shadow: 0 0 0 3px var(--lo-amber-dim); }

/* Toggle / Switch */
.toggle {
  position: relative; display: inline-block;
  width: 40px; height: 22px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--lo-bg-hover);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius-full);
  cursor: pointer;
  transition: all var(--lo-transition);
}
.toggle-slider::before {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--lo-text-dim);
  border-radius: 50%;
  transition: all var(--lo-transition);
}
.toggle input:checked + .toggle-slider {
  background: var(--lo-amber-dim);
  border-color: var(--lo-amber);
}
.toggle input:checked + .toggle-slider::before {
  transform: translateX(18px);
  background: var(--lo-amber);
}

/* Checkbox */
.checkbox {
  display: inline-flex; align-items: center; gap: var(--lo-space-2);
  font-size: var(--lo-font-size-sm); color: var(--lo-text);
  cursor: pointer;
}
.checkbox input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--lo-amber);
  cursor: pointer;
}

/* Radio */
.radio {
  display: inline-flex; align-items: center; gap: var(--lo-space-2);
  font-size: var(--lo-font-size-sm); color: var(--lo-text);
  cursor: pointer;
}
.radio input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--lo-amber);
  cursor: pointer;
}

/* Form group */
.form-group { display: flex; flex-direction: column; gap: var(--lo-space-2); }
.form-label {
  font-size: var(--lo-font-size-sm); font-weight: 600;
  color: var(--lo-text-bright);
}
.form-hint { font-size: var(--lo-font-size-xs); color: var(--lo-text-dim); }
.form-error { font-size: var(--lo-font-size-xs); color: var(--lo-red); }


/* ==========================================================================
   8. TABS
   ========================================================================== */

.tabs {
  display: flex; gap: var(--lo-space-1);
  border-bottom: 1px solid var(--lo-border);
  padding-bottom: 0;
}
.tab {
  padding: var(--lo-space-3) var(--lo-space-4);
  font-size: var(--lo-font-size-sm);
  color: var(--lo-text-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: all var(--lo-transition);
  background: none; border-top: none; border-left: none; border-right: none;
}
.tab:hover { color: var(--lo-text); }
.tab.active, .tab[aria-selected="true"] {
  color: var(--lo-amber);
  border-bottom-color: var(--lo-amber);
}

/* Pill tabs (no underline, bg style) */
.tabs-pill {
  display: flex; gap: var(--lo-space-1);
  background: var(--lo-bg-card);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius);
  padding: var(--lo-space-1);
}
.tabs-pill .tab {
  border-bottom: none; margin-bottom: 0;
  border-radius: var(--lo-radius-sm);
  padding: var(--lo-space-2) var(--lo-space-4);
}
.tabs-pill .tab.active {
  background: var(--lo-bg-hover);
  color: var(--lo-text-bright);
  border-bottom-color: transparent;
}


/* ==========================================================================
   9. BADGES & CHIPS
   ========================================================================== */

.badge {
  display: inline-flex; align-items: center; gap: var(--lo-space-2);
  font-size: var(--lo-font-size-xs);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--lo-radius-full);
  border: 1px solid;
}
.badge-amber  { background: var(--lo-amber-bg); border-color: var(--lo-amber-dim); color: var(--lo-amber); }
.badge-blue   { background: var(--lo-blue-bg);  border-color: var(--lo-blue-dim);  color: var(--lo-blue); }
.badge-teal   { background: var(--lo-teal-bg);  border-color: var(--lo-teal-dim);  color: var(--lo-teal); }
.badge-rose   { background: var(--lo-rose-bg);  border-color: var(--lo-rose-dim);  color: var(--lo-rose); }
.badge-red    { background: var(--lo-red-bg);   border-color: var(--lo-red-dim);   color: var(--lo-red); }
.badge-neutral { background: var(--lo-bg-hover); border-color: var(--lo-border);   color: var(--lo-text); }

/* Chip (larger, removable) */
.chip {
  display: inline-flex; align-items: center; gap: var(--lo-space-2);
  font-size: var(--lo-font-size-sm);
  padding: var(--lo-space-2) var(--lo-space-4);
  background: var(--lo-bg-card);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius-full);
  color: var(--lo-text);
  transition: all var(--lo-transition);
}
.chip:hover { border-color: var(--lo-amber); color: var(--lo-amber); }
.chip i { font-size: var(--lo-font-size-base); }


/* ==========================================================================
   10. AVATARS
   ========================================================================== */

.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--lo-bg-hover);
  border: 1px solid var(--lo-border);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--lo-font-size-sm); font-weight: 600;
  color: var(--lo-amber);
  overflow: hidden;
  flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: var(--lo-font-size-xs); }
.avatar-lg { width: 48px; height: 48px; font-size: var(--lo-font-size-base); }
.avatar-xl { width: 64px; height: 64px; font-size: var(--lo-font-size-lg); }

/* Avatar group (overlapping) */
.avatar-group { display: flex; }
.avatar-group .avatar { margin-left: -8px; border: 2px solid var(--lo-bg-base); }
.avatar-group .avatar:first-child { margin-left: 0; }


/* ==========================================================================
   11. STATUS INDICATORS
   ========================================================================== */

.status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lo-text-dim);
}
.status-dot-green  { background: var(--lo-teal); }
.status-dot-amber  { background: var(--lo-amber); }
.status-dot-red    { background: var(--lo-red); }
.status-dot-blue   { background: var(--lo-blue); }

/* Pulsing variant */
.status-dot-pulse { animation: lo-pulse 2s ease-in-out infinite; }


/* ==========================================================================
   12. KPI / STAT CARDS
   ========================================================================== */

.kpi {
  background: var(--lo-bg-card);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius);
  padding: var(--lo-space-4);
}
.kpi-label {
  font-size: var(--lo-font-size-xs);
  color: var(--lo-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--lo-space-2);
}
.kpi-value {
  font-size: var(--lo-font-size-xl);
  font-weight: 700;
  color: var(--lo-text-bright);
  margin-bottom: var(--lo-space-1);
}
.kpi-change { font-size: var(--lo-font-size-xs); }
.kpi-up   { color: var(--lo-teal); }
.kpi-down { color: var(--lo-red); }
.kpi-flat { color: var(--lo-text-dim); }

/* Stat row (horizontal stats with dividers) */
.stat-row {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
}
.stat-item { text-align: center; padding: 0 var(--lo-space-10); }
.stat-value { font-size: var(--lo-font-size-2xl); font-weight: 700; color: var(--lo-amber); margin-bottom: var(--lo-space-1); }
.stat-label { font-size: var(--lo-font-size-sm); color: var(--lo-text-dim); }
.stat-divider { width: 1px; height: 40px; background: var(--lo-border); }


/* ==========================================================================
   13. BAR CHART (CSS-ONLY)
   ========================================================================== */

.bar-chart { display: flex; flex-direction: column; gap: var(--lo-space-3); }
.bar-row { display: flex; align-items: center; gap: var(--lo-space-3); }
.bar-label { font-size: var(--lo-font-size-sm); color: var(--lo-text); min-width: 100px; }
.bar-track { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.bar-fill {
  height: 8px; border-radius: var(--lo-radius-sm);
  transition: width 1s ease;
}
.bar-fill-amber  { background: var(--lo-amber); }
.bar-fill-blue   { background: var(--lo-blue); }
.bar-fill-teal   { background: var(--lo-teal); }
.bar-fill-rose   { background: var(--lo-rose); }
.bar-fill-dim    { background: var(--lo-border-bright); }
.bar-value {
  font-size: var(--lo-font-size-sm); font-weight: 600;
  color: var(--lo-text-bright);
  min-width: 60px; text-align: right;
}


/* ==========================================================================
   14. TABLES
   ========================================================================== */

.table {
  width: 100%; border-collapse: collapse;
  font-size: var(--lo-font-size-sm);
}
.table th {
  text-align: left;
  font-size: var(--lo-font-size-xs);
  font-weight: 600;
  color: var(--lo-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--lo-space-3) var(--lo-space-4);
  border-bottom: 1px solid var(--lo-border);
}
.table td {
  padding: var(--lo-space-3) var(--lo-space-4);
  color: var(--lo-text);
  border-bottom: 1px solid var(--lo-border);
}
.table tr:hover td { background: var(--lo-bg-hover); }
.table-striped tr:nth-child(even) td { background: var(--lo-bg-raised); }
.table-compact th, .table-compact td { padding: var(--lo-space-2) var(--lo-space-3); }


/* ==========================================================================
   15. ALERTS & CALLOUTS
   ========================================================================== */

.callout {
  display: flex; gap: var(--lo-space-3); align-items: flex-start;
  border-radius: var(--lo-radius);
  padding: var(--lo-space-4);
  font-size: var(--lo-font-size-sm);
  line-height: var(--lo-line-height);
}
.callout i { margin-top: 2px; flex-shrink: 0; }
.callout-amber {
  background: var(--lo-amber-bg); border: 1px solid var(--lo-amber-dim);
  color: var(--lo-text);
}
.callout-amber i, .callout-amber strong { color: var(--lo-amber); }
.callout-blue {
  background: var(--lo-blue-bg); border: 1px solid var(--lo-blue-dim);
  color: var(--lo-text);
}
.callout-blue i, .callout-blue strong { color: var(--lo-blue); }
.callout-teal {
  background: var(--lo-teal-bg); border: 1px solid var(--lo-teal-dim);
  color: var(--lo-text);
}
.callout-teal i, .callout-teal strong { color: var(--lo-teal); }
.callout-red {
  background: var(--lo-red-bg); border: 1px solid var(--lo-red-dim);
  color: var(--lo-text);
}
.callout-red i, .callout-red strong { color: var(--lo-red); }
.callout-rose {
  background: var(--lo-rose-bg); border: 1px solid var(--lo-rose-dim);
  color: var(--lo-text);
}
.callout-rose i, .callout-rose strong { color: var(--lo-rose); }


/* ==========================================================================
   16. PROGRESS BARS
   ========================================================================== */

.progress {
  width: 100%; height: 6px;
  background: var(--lo-bg-hover);
  border-radius: var(--lo-radius-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: var(--lo-radius-full);
  transition: width 0.6s ease;
}
.progress-fill-amber { background: var(--lo-amber); }
.progress-fill-blue  { background: var(--lo-blue); }
.progress-fill-teal  { background: var(--lo-teal); }
.progress-fill-rose  { background: var(--lo-rose); }
.progress-fill-red   { background: var(--lo-red); }
.progress-lg { height: 10px; }


/* ==========================================================================
   17. TOOLTIPS
   ========================================================================== */

.tooltip {
  position: relative;
  cursor: pointer;
}
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) scale(0.95);
  background: var(--lo-bg-card);
  border: 1px solid var(--lo-border);
  color: var(--lo-text-bright);
  font-size: var(--lo-font-size-xs);
  padding: var(--lo-space-2) var(--lo-space-3);
  border-radius: var(--lo-radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all var(--lo-transition-fast);
  z-index: var(--lo-z-tooltip);
}
.tooltip:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }


/* ==========================================================================
   18. MODALS
   ========================================================================== */

.modal-overlay {
  position: fixed; inset: 0;
  background: var(--lo-bg-overlay);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--lo-z-modal);
  padding: var(--lo-space-10);
}
.modal {
  background: var(--lo-bg-raised);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius-lg);
  width: 100%; max-width: 520px;
  box-shadow: var(--lo-shadow-lg);
  overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--lo-space-5) var(--lo-space-6);
  border-bottom: 1px solid var(--lo-border);
}
.modal-header h3 { font-size: var(--lo-font-size-md); }
.modal-body { padding: var(--lo-space-6); }
.modal-footer {
  display: flex; justify-content: flex-end; gap: var(--lo-space-3);
  padding: var(--lo-space-5) var(--lo-space-6);
  border-top: 1px solid var(--lo-border);
}


/* ==========================================================================
   19. DROPDOWNS
   ========================================================================== */

.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 180px;
  background: var(--lo-bg-raised);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius);
  box-shadow: var(--lo-shadow);
  padding: var(--lo-space-1);
  z-index: var(--lo-z-dropdown);
}
.dropdown-item {
  display: flex; align-items: center; gap: var(--lo-space-2);
  padding: var(--lo-space-2) var(--lo-space-3);
  font-size: var(--lo-font-size-sm);
  color: var(--lo-text);
  border-radius: var(--lo-radius-sm);
  cursor: pointer;
  transition: all var(--lo-transition-fast);
}
.dropdown-item:hover { background: var(--lo-bg-hover); color: var(--lo-text-bright); }
.dropdown-item.active { color: var(--lo-amber); }
.dropdown-divider { height: 1px; background: var(--lo-border); margin: var(--lo-space-1) 0; }


/* ==========================================================================
   20. NAVIGATION
   ========================================================================== */

.navbar {
  border-bottom: 1px solid var(--lo-border);
  padding: 0 var(--lo-space-10);
  position: sticky; top: 0;
  z-index: var(--lo-z-sticky);
  background: rgba(11,15,26,0.92);
  backdrop-filter: blur(12px);
}
.navbar-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--lo-space-8);
  height: 60px;
}
.navbar-brand {
  font-size: 17px; font-weight: 700;
  color: var(--lo-text-bright);
  white-space: nowrap; display: flex; align-items: center; gap: var(--lo-space-2);
  text-decoration: none;
}
.navbar-brand:hover { color: var(--lo-text-bright); }
.navbar-brand-mark { color: var(--lo-amber); font-size: var(--lo-font-size-base); }
.navbar-links { display: flex; gap: var(--lo-space-2); flex: 1; }
.navbar-links a {
  color: var(--lo-text-dim);
  padding: var(--lo-space-2) var(--lo-space-3);
  border-radius: var(--lo-radius);
  font-size: var(--lo-font-size-sm);
  transition: all var(--lo-transition);
}
.navbar-links a:hover { color: var(--lo-text); background: var(--lo-bg-hover); }
.navbar-links a.active { color: var(--lo-text-bright); }
.navbar-actions { display: flex; gap: var(--lo-space-3); align-items: center; }

/* Breadcrumbs */
.breadcrumbs {
  display: flex; align-items: center; gap: var(--lo-space-2);
  font-size: var(--lo-font-size-sm);
}
.breadcrumbs a { color: var(--lo-text-dim); }
.breadcrumbs a:hover { color: var(--lo-amber); }
.breadcrumbs-sep { color: var(--lo-text-muted); }
.breadcrumbs-current { color: var(--lo-text-bright); }

/* Pagination */
.pagination {
  display: flex; gap: var(--lo-space-1);
  align-items: center;
}
.page-item {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  font-size: var(--lo-font-size-sm);
  color: var(--lo-text-dim);
  border-radius: var(--lo-radius-sm);
  cursor: pointer;
  transition: all var(--lo-transition);
}
.page-item:hover { background: var(--lo-bg-hover); color: var(--lo-text); }
.page-item.active { background: var(--lo-amber-dim); color: var(--lo-amber); }


/* ==========================================================================
   21. STATUS BAR
   ========================================================================== */

.status-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--lo-bg-inset);
  border-bottom: 1px solid var(--lo-border);
  padding: var(--lo-space-2) var(--lo-space-6);
  font-size: var(--lo-font-size-xs);
  color: var(--lo-text-dim);
}


/* ==========================================================================
   22. SECTION HEADERS
   ========================================================================== */

.section-header { margin-bottom: var(--lo-space-12); text-align: center; }
.section-label {
  display: inline-block;
  color: var(--lo-amber); font-size: var(--lo-font-size-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: var(--lo-space-4);
}
.section-title {
  font-size: var(--lo-font-size-2xl); font-weight: 700;
  color: var(--lo-text-bright); margin: 0 0 var(--lo-space-4);
  line-height: var(--lo-line-height-tight);
}
.section-sub {
  color: var(--lo-text-dim); font-size: var(--lo-font-size-md);
  max-width: 600px; margin-left: auto; margin-right: auto;
}


/* ==========================================================================
   23. TESTIMONIAL CARDS
   ========================================================================== */

.testimonial {
  background: var(--lo-bg-card);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius-lg);
  padding: var(--lo-space-6);
  transition: all 0.25s;
}
.testimonial:hover { border-color: var(--lo-border-bright); }
.testimonial-featured { border-color: var(--lo-amber); }
.testimonial-featured:hover { box-shadow: var(--lo-shadow-glow-amber); }
.testimonial-stars {
  color: var(--lo-amber); font-size: var(--lo-font-size-base);
  letter-spacing: 2px; margin-bottom: var(--lo-space-4);
}
.testimonial-quote {
  font-size: var(--lo-font-size-base);
  color: var(--lo-text-bright);
  line-height: var(--lo-line-height);
  margin-bottom: var(--lo-space-5);
}
.testimonial-author {
  display: flex; align-items: center; gap: var(--lo-space-3);
}
.testimonial-name { font-size: var(--lo-font-size-sm); font-weight: 600; color: var(--lo-text-bright); }
.testimonial-role { font-size: var(--lo-font-size-sm); color: var(--lo-text-dim); }


/* ==========================================================================
   24. PRICING CARDS
   ========================================================================== */

.price-card {
  background: var(--lo-bg-card);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius-lg);
  padding: var(--lo-space-8) var(--lo-space-6);
  position: relative;
  transition: all 0.25s;
}
.price-card:hover { border-color: var(--lo-border-bright); }
.price-popular {
  border-color: var(--lo-amber);
  background: linear-gradient(180deg, var(--lo-amber-bg) 0%, var(--lo-bg-card) 40%);
}
.price-popular:hover { box-shadow: var(--lo-shadow-glow-amber); }
.price-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--lo-amber); color: var(--lo-bg-base);
  padding: 3px 16px; border-radius: var(--lo-radius-full);
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
}
.price-name { font-size: var(--lo-font-size-md); font-weight: 600; color: var(--lo-text-bright); margin-bottom: var(--lo-space-2); }
.price-amount { font-size: 36px; font-weight: 700; color: var(--lo-text-bright); }
.price-per { font-size: var(--lo-font-size-base); font-weight: 400; color: var(--lo-text-dim); }
.price-period { font-size: var(--lo-font-size-sm); color: var(--lo-text-dim); margin-top: var(--lo-space-1); }
.price-features {
  list-style: none; padding: 0; margin: var(--lo-space-6) 0;
  display: flex; flex-direction: column; gap: var(--lo-space-3);
}
.price-features li {
  font-size: var(--lo-font-size-sm);
  display: flex; gap: var(--lo-space-3); align-items: center;
  color: var(--lo-text);
}
.price-features li i { color: var(--lo-teal); font-size: var(--lo-font-size-sm); }
.price-disabled { color: var(--lo-text-dim) !important; }
.price-disabled i { color: var(--lo-text-dim) !important; }


/* ==========================================================================
   25. CONNECTOR / INTEGRATION ICONS
   ========================================================================== */

.connector {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--lo-bg-card);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius);
  font-size: var(--lo-font-size-lg);
  color: var(--lo-blue);
  transition: all var(--lo-transition);
}
.connector:hover { border-color: var(--lo-amber); color: var(--lo-amber); }
.connector-sm { width: 36px; height: 36px; font-size: var(--lo-font-size-base); }
.connector-lg { width: 64px; height: 64px; font-size: var(--lo-font-size-xl); border-radius: var(--lo-radius-lg); }

.connector-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--lo-space-3);
  background: var(--lo-bg-card);
  border: 1px solid var(--lo-border);
  border-radius: var(--lo-radius-lg);
  padding: var(--lo-space-6) var(--lo-space-3);
  font-size: var(--lo-font-size-sm); color: var(--lo-text-dim);
  transition: all var(--lo-transition);
}
.connector-card i { font-size: 22px; color: var(--lo-blue); }
.connector-card:hover { border-color: var(--lo-border-bright); color: var(--lo-text); transform: translateY(-2px); }


/* ==========================================================================
   26. STEPS / HOW-IT-WORKS
   ========================================================================== */

.steps { display: flex; flex-direction: column; }
.step {
  display: grid; grid-template-columns: 60px 1fr 1fr;
  gap: var(--lo-space-6); align-items: center;
  padding: var(--lo-space-10) 0;
  border-top: 1px solid var(--lo-border);
}
.step-num {
  font-size: 36px; font-weight: 700;
  color: var(--lo-amber); opacity: 0.4;
  line-height: 1;
}
.step-title { font-size: var(--lo-font-size-lg); font-weight: 600; color: var(--lo-text-bright); margin-bottom: var(--lo-space-3); }
.step-desc { font-size: var(--lo-font-size-base); color: var(--lo-text); line-height: var(--lo-line-height); }


/* ==========================================================================
   27. LOGO STRIP / SOCIAL PROOF
   ========================================================================== */

.logo-strip {
  display: flex; align-items: center; gap: var(--lo-space-8);
  justify-content: center; flex-wrap: wrap;
}
.logo-strip-label { font-size: var(--lo-font-size-sm); color: var(--lo-text-dim); white-space: nowrap; }
.logo-strip-items {
  display: flex; gap: var(--lo-space-5) var(--lo-space-10); flex-wrap: wrap;
  justify-content: center;
  font-size: var(--lo-font-size-md); font-weight: 600;
  color: var(--lo-text-dim); letter-spacing: 1px;
}


/* ==========================================================================
   28. DIVIDERS
   ========================================================================== */

.divider {
  height: 1px; background: var(--lo-border);
  border: none; margin: var(--lo-space-6) 0;
}
.divider-section { margin: 0; }
.divider-bright { background: var(--lo-border-bright); }


/* ==========================================================================
   29. FOOTER
   ========================================================================== */

.footer {
  padding: var(--lo-space-16) var(--lo-space-10) var(--lo-space-10);
  border-top: 1px solid var(--lo-border);
}
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-grid {
  display: grid; grid-template-columns: 1fr 3fr;
  gap: var(--lo-space-16); margin-bottom: var(--lo-space-10);
}
.footer-tagline { font-size: var(--lo-font-size-sm); color: var(--lo-text-dim); line-height: 1.6; }
.footer-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lo-space-6); }
.footer-col h4 {
  font-size: var(--lo-font-size-sm); font-weight: 600;
  color: var(--lo-text-bright); margin-bottom: var(--lo-space-4);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.footer-col a { display: block; font-size: var(--lo-font-size-sm); color: var(--lo-text-dim); padding: 3px 0; }
.footer-col a:hover { color: var(--lo-text); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--lo-space-6);
  border-top: 1px solid var(--lo-border);
  font-size: var(--lo-font-size-sm); color: var(--lo-text-dim);
}
.footer-legal a { color: var(--lo-text-dim); }
.footer-legal a:hover { color: var(--lo-text); }


/* ==========================================================================
   30. UTILITY CLASSES
   ========================================================================== */

/* Display */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.hidden       { display: none; }

/* Width */
.w-full { width: 100%; }
.max-w-sm { max-width: 420px; }
.max-w-md { max-width: 600px; }
.max-w-lg { max-width: 800px; }

/* Text alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Text transform */
.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }
.tracking-wide { letter-spacing: 1px; }
.tracking-wider { letter-spacing: 1.5px; }
.leading-tight { line-height: var(--lo-line-height-tight); }
.leading-normal { line-height: var(--lo-line-height); }
.italic { font-style: italic; }
.no-wrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Backgrounds */
.bg-base   { background: var(--lo-bg-base); }
.bg-raised { background: var(--lo-bg-raised); }
.bg-card   { background: var(--lo-bg-card); }
.bg-hover  { background: var(--lo-bg-hover); }
.bg-inset  { background: var(--lo-bg-inset); }

/* Borders */
.border     { border: 1px solid var(--lo-border); }
.border-t   { border-top: 1px solid var(--lo-border); }
.border-b   { border-bottom: 1px solid var(--lo-border); }
.border-bright { border-color: var(--lo-border-bright); }
.border-amber  { border-color: var(--lo-amber); }
.border-none   { border: none; }
.rounded    { border-radius: var(--lo-radius); }
.rounded-sm { border-radius: var(--lo-radius-sm); }
.rounded-lg { border-radius: var(--lo-radius-lg); }
.rounded-xl { border-radius: var(--lo-radius-xl); }
.rounded-full { border-radius: var(--lo-radius-full); }

/* Shadows */
.shadow-sm { box-shadow: var(--lo-shadow-sm); }
.shadow    { box-shadow: var(--lo-shadow); }
.shadow-lg { box-shadow: var(--lo-shadow-lg); }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Opacity */
.opacity-40 { opacity: 0.4; }
.opacity-60 { opacity: 0.6; }
.opacity-80 { opacity: 0.8; }

/* Spacing (margin & padding) — scale: 0,1,2,3,4,5,6,8,10,12,16,20 */
.p-0  { padding: 0; }
.p-1  { padding: var(--lo-space-1); }
.p-2  { padding: var(--lo-space-2); }
.p-3  { padding: var(--lo-space-3); }
.p-4  { padding: var(--lo-space-4); }
.p-5  { padding: var(--lo-space-5); }
.p-6  { padding: var(--lo-space-6); }
.p-8  { padding: var(--lo-space-8); }
.p-10 { padding: var(--lo-space-10); }

.px-0  { padding-left: 0; padding-right: 0; }
.px-2  { padding-left: var(--lo-space-2); padding-right: var(--lo-space-2); }
.px-3  { padding-left: var(--lo-space-3); padding-right: var(--lo-space-3); }
.px-4  { padding-left: var(--lo-space-4); padding-right: var(--lo-space-4); }
.px-5  { padding-left: var(--lo-space-5); padding-right: var(--lo-space-5); }
.px-6  { padding-left: var(--lo-space-6); padding-right: var(--lo-space-6); }
.px-8  { padding-left: var(--lo-space-8); padding-right: var(--lo-space-8); }
.px-10 { padding-left: var(--lo-space-10); padding-right: var(--lo-space-10); }

.py-0  { padding-top: 0; padding-bottom: 0; }
.py-2  { padding-top: var(--lo-space-2); padding-bottom: var(--lo-space-2); }
.py-3  { padding-top: var(--lo-space-3); padding-bottom: var(--lo-space-3); }
.py-4  { padding-top: var(--lo-space-4); padding-bottom: var(--lo-space-4); }
.py-5  { padding-top: var(--lo-space-5); padding-bottom: var(--lo-space-5); }
.py-6  { padding-top: var(--lo-space-6); padding-bottom: var(--lo-space-6); }
.py-8  { padding-top: var(--lo-space-8); padding-bottom: var(--lo-space-8); }
.py-10 { padding-top: var(--lo-space-10); padding-bottom: var(--lo-space-10); }
.py-12 { padding-top: var(--lo-space-12); padding-bottom: var(--lo-space-12); }
.py-16 { padding-top: var(--lo-space-16); padding-bottom: var(--lo-space-16); }
.py-20 { padding-top: var(--lo-space-20); padding-bottom: var(--lo-space-20); }

.m-0    { margin: 0; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-1  { margin-top: var(--lo-space-1); }
.mt-2  { margin-top: var(--lo-space-2); }
.mt-3  { margin-top: var(--lo-space-3); }
.mt-4  { margin-top: var(--lo-space-4); }
.mt-5  { margin-top: var(--lo-space-5); }
.mt-6  { margin-top: var(--lo-space-6); }
.mt-8  { margin-top: var(--lo-space-8); }
.mt-10 { margin-top: var(--lo-space-10); }
.mt-12 { margin-top: var(--lo-space-12); }

.mb-1  { margin-bottom: var(--lo-space-1); }
.mb-2  { margin-bottom: var(--lo-space-2); }
.mb-3  { margin-bottom: var(--lo-space-3); }
.mb-4  { margin-bottom: var(--lo-space-4); }
.mb-5  { margin-bottom: var(--lo-space-5); }
.mb-6  { margin-bottom: var(--lo-space-6); }
.mb-8  { margin-bottom: var(--lo-space-8); }
.mb-10 { margin-bottom: var(--lo-space-10); }
.mb-12 { margin-bottom: var(--lo-space-12); }


/* ==========================================================================
   31. ANIMATIONS
   ========================================================================== */

@keyframes lo-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes lo-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lo-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lo-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.animate-pulse    { animation: lo-pulse 2s ease-in-out infinite; }
.animate-fade-in  { animation: lo-fade-in 0.3s ease forwards; }
.animate-slide-up { animation: lo-slide-up 0.4s ease forwards; }
.animate-spin     { animation: lo-spin 1s linear infinite; }


/* ==========================================================================
   32. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
  .step { grid-template-columns: 60px 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--lo-space-10); }
}

@media (max-width: 768px) {
  :root {
    --lo-font-size-4xl: 36px;
    --lo-font-size-3xl: 28px;
    --lo-font-size-2xl: 24px;
  }

  .container, .container-sm, .container-lg, .container-fluid {
    padding: 0 var(--lo-space-5);
  }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-6 { grid-template-columns: repeat(2, 1fr); }

  .navbar-links { display: none; }
  .status-bar { display: none; }

  .step { grid-template-columns: 1fr; gap: var(--lo-space-4); }
  .step-num { font-size: var(--lo-font-size-xl); }

  .stat-row { flex-direction: column; gap: var(--lo-space-6); }
  .stat-divider { width: 40px; height: 1px; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; gap: var(--lo-space-3); text-align: center; }

  /* Hide on mobile */
  .hide-mobile { display: none !important; }
}

@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }
  .grid-6 { grid-template-columns: 1fr 1fr; }

  .btn-lg { padding: 12px 20px; font-size: var(--lo-font-size-sm); }
}

/* ========================================
   DEMO / SIGNUP MODAL
   ======================================== */

.lo-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 1rem;
}
.lo-modal-overlay.active { display: flex; animation: loFadeIn 0.25s ease-out; }

@keyframes loFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes loScaleIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.lo-modal {
  position: relative; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  background: var(--lo-bg-card); border: 1px solid var(--lo-border); border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6); animation: loScaleIn 0.3s ease-out;
  padding: 2rem;
}

.lo-modal-close {
  position: absolute; top: 1rem; right: 1rem; background: none; border: none;
  color: var(--lo-text-muted); font-size: 1.5rem; cursor: pointer; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  transition: all 0.2s ease;
}
.lo-modal-close:hover { background: var(--lo-bg-hover); color: var(--lo-text-bright); }

.lo-modal-header { margin-bottom: 1.5rem; }
.lo-modal-header h3 {
  font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 700;
  color: var(--lo-text-bright); margin: 0;
}
.lo-modal-header p { color: var(--lo-text-dim); margin: 0.5rem 0 0; font-size: 0.9rem; }

.lo-form { display: flex; flex-direction: column; gap: 1rem; }
.lo-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lo-form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.lo-form-group label {
  font-size: 0.8rem; font-weight: 500; color: var(--lo-text-dim);
  font-family: 'JetBrains Mono', monospace;
}

.lo-form-group input,
.lo-form-group select,
.lo-form-group textarea {
  width: 100%; padding: 0.6rem 0.9rem; border-radius: 8px;
  border: 1px solid var(--lo-border); background: var(--lo-bg-base);
  color: var(--lo-text-bright); font-size: 0.9rem; font-family: 'JetBrains Mono', monospace;
  transition: border-color 0.2s ease; outline: none;
}
.lo-form-group input::placeholder,
.lo-form-group textarea::placeholder { color: var(--lo-text-muted); }
.lo-form-group input:focus,
.lo-form-group select:focus,
.lo-form-group textarea:focus { border-color: var(--lo-amber); box-shadow: 0 0 0 2px var(--lo-amber-dim); }
.lo-form-group textarea { resize: vertical; min-height: 60px; }

.lo-form-group select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2371717a' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem;
}
.lo-form-group select option { background: var(--lo-bg-card); color: var(--lo-text-bright); }

.lo-form-submit {
  margin-top: 0.5rem; width: 100%; padding: 0.75rem; border: none; border-radius: 8px;
  background: var(--lo-amber); color: var(--lo-bg-base);
  font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease;
}
.lo-form-submit:hover { filter: brightness(1.1); }
.lo-form-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Success State */
.lo-modal-success {
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem 0;
}
.lo-success-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(45, 212, 191, 0.15); color: var(--lo-teal);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; margin-bottom: 1.5rem;
}
.lo-modal-success h3 {
  font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 700;
  color: var(--lo-text-bright); margin: 0;
}
.lo-modal-success p { color: var(--lo-text-dim); margin: 0.75rem 0 0; font-size: 0.9rem; max-width: 300px; }
.lo-form-close-btn {
  margin-top: 2rem; padding: 0.6rem 2rem; border-radius: 8px;
  border: 1px solid var(--lo-border); background: var(--lo-bg-hover);
  color: var(--lo-text-bright); font-weight: 500; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; transition: background 0.2s ease;
}
.lo-form-close-btn:hover { background: var(--lo-bg-card); }

@media (max-width: 480px) {
  .lo-form-row { grid-template-columns: 1fr; }
  .lo-modal { padding: 1.5rem; }
}