/* Limitless Web – Design Tokens v1 */
:root {
  /* Brand palette */
  --color-brand-50:  hsl(199 100% 96%);
  --color-brand-100: hsl(199 94% 90%);
  --color-brand-200: hsl(199 90% 85%);
  --color-brand-300: hsl(199 84% 74%);
  --color-brand-400: hsl(199 78% 60%);
  --color-brand-500: hsl(199 84% 48%); /* primary */
  --color-brand-600: hsl(199 88% 40%);
  --color-brand-700: hsl(199 90% 34%);
  --color-brand-800: hsl(199 92% 28%);
  --color-brand-900: hsl(199 95% 20%);

  --color-accent-500: hsl(43 100% 50%);
  --color-accent-600: hsl(43 100% 42%);

  /* Neutral palette */
  --color-bg:        #0b0d12;
  --color-surface:   #121621;
  --color-elev-1:    #182033;
  --color-elev-2:    #1f2a44;
  --color-text:      #f2f5fb;
  --color-muted:     #aab3c7;
  --color-border:    #2a3552;
  --color-success:   #22c55e;
  --color-danger:    #ef4444;
  --color-warning:   #f59e0b;
  --color-info:      var(--color-brand-400);

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica Neue, Arial, Noto Sans, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Type scale (fluid) */
  --fs-100: clamp(0.80rem, 0.77rem + 0.12vw, 0.88rem);
  --fs-200: clamp(0.90rem, 0.85rem + 0.20vw, 1.00rem);
  --fs-300: clamp(1.00rem, 0.95rem + 0.30vw, 1.12rem);
  --fs-400: clamp(1.10rem, 1.00rem + 0.45vw, 1.25rem);
  --fs-500: clamp(1.25rem, 1.10rem + 0.70vw, 1.50rem);
  --fs-600: clamp(1.50rem, 1.25rem + 1.10vw, 1.90rem);
  --fs-700: clamp(1.90rem, 1.60rem + 1.60vw, 2.50rem);
  --fs-800: clamp(2.40rem, 2.00rem + 2.20vw, 3.25rem);
  --fs-900: clamp(3.00rem, 2.40rem + 3.00vw, 4.00rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radii & shadows */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-1: 0 2px 8px hsl(220 40% 2% / 0.25);
  --shadow-2: 0 4px 16px hsl(220 40% 2% / 0.35);
  --shadow-3: 0 8px 32px hsl(220 40% 2% / 0.45);

  /* Content widths */
  --container-narrow: 760px;
  --container: 1120px;
  --container-wide: 1320px;

  /* Z-index scale */
  --z-header: 1000;
  --z-overlay: 1100;
  --z-skiplink: 1200;
}

/* Base styles */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  line-height: 1.6;
  color: var(--color-text);
  background: radial-gradient(1200px 600px at 10% -10%, #16203a 0%, transparent 60%), radial-gradient(1200px 600px at 120% 10%, #102035 0%, transparent 60%), var(--color-bg);
}

/* Accessibility helpers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 1px, 1px);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed;
  top: 0.5rem; left: 0.5rem;
  z-index: var(--z-skiplink);
  background: var(--color-brand-600);
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid white; }

/* Containers */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.container-wide { max-width: var(--container-wide); }
.container-narrow { max-width: var(--container-narrow); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  backdrop-filter: saturate(1.2) blur(8px);
  background: linear-gradient(180deg, hsl(220 33% 10% / 0.85), hsl(220 33% 10% / 0.65));
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}
.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand img { width: 36px; height: 36px; }
.brand span { font-weight: 700; letter-spacing: 0.3px; font-size: var(--fs-400); color: #fff; }

/* Navigation (mega menu) */
.nav {
  position: relative;
}
.menu {
  list-style: none;
  display: flex; gap: var(--space-6);
  margin: 0; padding: 0;
}
.menu > li { position: relative; }
.menu a {
  text-decoration: none; color: var(--color-text);
  font-weight: 600;
}
.menu a[aria-current="page"] { color: var(--color-accent-500); }

/* Mega dropdown */
.dropdown-toggle { display: inline-flex; align-items: center; gap: 0.25rem; }
.dropdown {
  position: absolute;
  left: 0; top: calc(100% + 0.75rem);
  min-width: 640px;
  padding: var(--space-6);
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}
.menu > li:focus-within .dropdown,
.menu > li:hover .dropdown { display: grid; }

.dropdown h4 {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--fs-300);
  color: var(--color-muted);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.dropdown ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.dropdown a { color: #fff; font-weight: 600; }
.dropdown a small { color: var(--color-muted); font-weight: 400; display: block; }

/* Mobile nav */
.nav-toggle {
  display: none;
  background: transparent; color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 0.5rem 0.75rem; border-radius: var(--radius-sm);
}
@media (max-width: 920px) {
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: var(--space-6); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
  .menu.open { display: grid; gap: var(--space-4); }
  .dropdown { position: static; display: grid; min-width: 0; padding: 0; border: none; border-radius: 0; box-shadow: none; grid-template-columns: 1fr; gap: var(--space-3); }
  .nav-toggle { display: inline-flex; align-items: center; gap: 0.5rem; }
}

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}
.button.primary { background: var(--color-brand-500); color: #fff; }
.button.primary:hover { background: var(--color-brand-600); }
.button.secondary { background: transparent; color: #fff; border-color: var(--color-border); }
.button.ghost { background: transparent; color: var(--color-accent-500); border-color: transparent; }
.button.small { padding: 0.5rem 0.75rem; font-size: var(--fs-200); }
.badge { display: inline-block; background: hsl(199 88% 40% / 0.2); border: 1px solid var(--color-brand-600); color: #c5e9ff; padding: 0.25rem 0.5rem; border-radius: 999px; font-size: var(--fs-100); }

/* Hero */
.hero { padding: var(--space-16) 0 var(--space-12); }
.hero h1 { font-size: var(--fs-900); line-height: 1.1; margin: 0 0 var(--space-4) 0; letter-spacing: -0.5px; }
.hero p.lead { font-size: var(--fs-500); color: var(--color-muted); margin: 0 0 var(--space-6) 0; }
.hero-cta { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero-illus { width: 100%; max-width: 560px; height: auto; }

/* Sections */
.section { padding: var(--space-12) 0; }
.section h2 { font-size: var(--fs-700); margin: 0 0 var(--space-6) 0; }
.section h3 { font-size: var(--fs-600); margin: var(--space-8) 0 var(--space-4); }

/* Cards grid */
.grid { display: grid; gap: var(--space-6); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 920px) {
  .grid-4, .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}
.card {
  background: linear-gradient(180deg, var(--color-surface), hsl(220 33% 10% / 0.2));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
}
.card h3 { margin-top: 0; }

/* Testimonials */
.testimonial {
  border-left: 3px solid var(--color-brand-500);
  padding-left: var(--space-4);
  font-style: italic;
  color: #e8eefc;
}
.testimonial cite { display: block; margin-top: var(--space-3); color: var(--color-muted); font-style: normal; }

/* Pricing */
.pricing { gap: var(--space-6); align-items: start; }
.price-card { position: relative; }
.price-card .price {
  font-size: var(--fs-700); font-weight: 900;
}
.price-card .period { color: var(--color-muted); }
.price-card .popular {
  position: absolute; top: -12px; right: var(--space-6);
  background: var(--color-accent-600); color: black; padding: 0.25rem 0.5rem;
  border-radius: 6px; font-weight: 800; letter-spacing: 0.3px;
}

/* Comparison table */
.table {
  width: 100%; border-collapse: collapse; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.table th, .table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); }
.table thead th { background: var(--color-elev-1); text-align: left; }
.table tbody tr:nth-child(odd) { background: hsl(220 33% 12% / 0.35); }

/* FAQ */
details.faq { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); }
details.faq + details.faq { margin-top: var(--space-4); }
details.faq summary { cursor: pointer; font-weight: 700; }
details[open].faq { box-shadow: var(--shadow-2); }

/* Forms */
.form { display: grid; gap: var(--space-4); }
.input, textarea, select {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  width: 100%;
}
.input:focus, textarea:focus, select:focus { outline: 2px solid var(--color-brand-500); outline-offset: 2px; }
.help { color: var(--color-muted); font-size: var(--fs-200); }

/* Footer */
.site-footer {
  padding: var(--space-12) 0 var(--space-8);
  border-top: 1px solid var(--color-border);
  background: linear-gradient(180deg, hsl(220 33% 10% / 0.4), transparent);
}
.footer-grid {
  display: grid; gap: var(--space-8);
  grid-template-columns: 2fr 1fr 1fr 1fr;
}
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-8); color: var(--color-muted); font-size: var(--fs-200); }
@media (max-width: 920px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Utilities */
.center { text-align: center; }
.muted { color: var(--color-muted); }
.kbd { font-family: var(--font-mono); background: #000; border: 1px solid var(--color-border); padding: 0.1rem 0.35rem; border-radius: 6px; }

/* Case grid */
.case-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.case img { display: block; width: 100%; height: auto; }
.case .p { padding: var(--space-4); }

/* Timeline (Process) */
.timeline { position: relative; display: grid; gap: var(--space-6); }
.timeline::before {
  content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--color-border);
}
.step { position: relative; padding-left: 2.5rem; }
.step::before {
  content: ""; position: absolute; left: 6px; top: 0.2rem; width: 12px; height: 12px; background: var(--color-brand-500); border-radius: 50%;
  box-shadow: 0 0 0 2px var(--color-bg);
}

/* Code blocks */
pre, code { font-family: var(--font-mono); }
pre { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-bg); overflow: auto; }

/* Breadcrumbs */
.breadcrumbs { font-size: var(--fs-200); color: var(--color-muted); margin-bottom: var(--space-4); }
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs .sep { margin: 0 0.35rem; color: var(--color-border); }


/* Utilities patched for CSP (no inline styles) */
.flex-hero { display: flex; gap: var(--space-12); align-items: center; flex-wrap: wrap-reverse; }
.flex-1 { flex: 1; min-width: 320px; }
.overflow-auto { overflow: auto; }