/* Cosmos Online — Design tokens & global styles */

:root {
  /* Refined corporate palette */
  --blue-900: #0e2c4a;
  --blue-800: #143a5e;
  --blue-700: #1c4d7a;
  --blue-600: #2363a0; /* primary */
  --blue-500: #3d7bb8;
  --blue-100: #e7f0fa;
  --blue-50:  #f3f7fc;

  --red-700: #9b181d;
  --red-600: #b81e24; /* refined corporate red */
  --red-500: #d12a31;
  --red-100: #fbe5e6;

  --yellow-500: #fbe503; /* hard pop */
  --yellow-400: #ffec3d;
  --yellow-100: #fff8c4;

  /* Warm neutrals */
  --ink-900: #0c1320;
  --ink-800: #1a2436;
  --ink-700: #2c3a52;
  --ink-600: #4a5a76;
  --ink-500: #6c7a93;
  --ink-400: #94a0b5;
  --ink-300: #c1c9d6;
  --ink-200: #e2e7ee;
  --ink-150: #ecf0f5;
  --ink-100: #f4f6fa;
  --ink-50:  #fafbfd;
  --white:   #ffffff;

  /* Semantic */
  --accent: var(--blue-600);
  --accent-deep: var(--blue-800);
  --accent-soft: var(--blue-50);
  --danger: var(--red-600);
  --bg: var(--white);
  --bg-soft: var(--ink-50);
  --bg-tint: var(--blue-50);
  --text: var(--ink-900);
  --text-soft: var(--ink-600);
  --text-faint: var(--ink-500);
  --border: var(--ink-200);
  --border-strong: var(--ink-300);

  /* Spacing */
  --pad-screen: 56px;
  --gap: 16px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;

  /* Type scale */
  --display: 'Archivo', 'Helvetica Neue', sans-serif;
  --body: 'Manrope', 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(14,44,74,.06);
  --shadow-sm: 0 2px 6px rgba(14,44,74,.06), 0 1px 2px rgba(14,44,74,.04);
  --shadow-md: 0 12px 28px -12px rgba(14,44,74,.14), 0 4px 8px -3px rgba(14,44,74,.06);
  --shadow-lg: 0 30px 60px -24px rgba(14,44,74,.22), 0 8px 16px -8px rgba(14,44,74,.08);
}

/* Accent palette swaps via Tweaks */
:root[data-accent="red"] {
  --accent: var(--red-600);
  --accent-deep: var(--red-700);
  --accent-soft: var(--red-100);
  --bg-tint: #fdf3f3;
}
:root[data-accent="ink"] {
  --accent: var(--ink-900);
  --accent-deep: #000;
  --accent-soft: var(--ink-150);
  --bg-tint: var(--ink-100);
}

:root[data-density="compact"] {
  --pad-screen: 40px;
  --gap: 12px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 1.5;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Type */
.display { font-family: var(--display); letter-spacing: -0.02em; line-height: 1.04; font-weight: 800; }
.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.mono { font-family: var(--mono); }

/* App shell */
.app-shell {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.screen {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* Screen jumper (prototype-only chrome) */
.jumper {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 999;
  background: var(--ink-900);
  color: #fff;
  border-radius: 999px;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shadow-lg);
  font-family: var(--mono);
  font-size: 12px;
  max-width: calc(100vw - 110px);
}
@media (max-width: 600px) {
  .jumper { left: 12px; bottom: 12px; padding: 4px; }
  .jumper .label { display: none; }
  .jumper select { padding: 6px 8px; max-width: 140px; }
  .jumper button { padding: 6px 10px; }
}
.jumper button {
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: 0;
  padding: 8px 12px;
  border-radius: 999px;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.jumper button:hover { color: #fff; background: rgba(255,255,255,0.08); }
.jumper button.active { background: var(--accent); color: #fff; }
.jumper .label { letter-spacing: 0.08em; text-transform: uppercase; font-size: 10.5px; padding-left: 10px; color: rgba(255,255,255,0.45); }
.jumper select {
  background: transparent;
  color: #fff;
  border: 0;
  font: inherit;
  padding: 8px 12px;
  outline: none;
}
.jumper select option { background: var(--ink-900); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  padding: 11px 18px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--ink-150);
  color: var(--ink-900);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--ink-200); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.danger { background: var(--red-600); color: #fff; border-color: var(--red-600); }
.btn.danger:hover { background: var(--red-700); border-color: var(--red-700); }
.btn.ghost { background: transparent; border-color: var(--border); }
.btn.ghost:hover { background: var(--ink-100); border-color: var(--border-strong); }
.btn.link { background: transparent; color: var(--accent); padding-left: 0; padding-right: 0; }
.btn.link:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.btn.sm { padding: 7px 12px; font-size: 13px; }
.btn.lg { padding: 14px 22px; font-size: 15px; }
.btn.xl { padding: 18px 28px; font-size: 16px; border-radius: 10px; }
.btn.block { width: 100%; }
.btn.whatsapp { background: #25D366; color: #073d1f; border-color: #25D366; }
.btn.whatsapp:hover { background: #1ebd5b; }

/* Form inputs */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
  letter-spacing: 0;
}
.field .hint { font-size: 12px; color: var(--text-faint); }
.input, .select, .textarea {
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-500) 50%), linear-gradient(135deg, var(--ink-500) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }

.checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-700);
  line-height: 1.45;
  cursor: pointer;
}
.checkbox input { margin-top: 2px; accent-color: var(--accent); width: 16px; height: 16px; }

.radio-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  background: #fff;
}
.radio-card:hover { border-color: var(--border-strong); }
.radio-card.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 12%, transparent); }
.radio-card input { margin-top: 4px; accent-color: var(--accent); }

/* Card */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.card.hov:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.card.flat { box-shadow: none; }

/* Tags / Badges */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--ink-100);
  color: var(--ink-700);
  letter-spacing: 0.01em;
}
.tag.blue { background: var(--blue-100); color: var(--blue-800); }
.tag.red { background: var(--red-100); color: var(--red-700); }
.tag.yellow { background: var(--yellow-100); color: #6b5a00; }
.tag.green { background: #dff5e3; color: #1c5b2f; }
.tag.ink { background: var(--ink-900); color: #fff; }
.tag.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }

.kbd {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--ink-100);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink-700);
}

/* Section helpers */
.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--pad-screen); }
.container.tight { max-width: 1100px; }
.container.narrow { max-width: 880px; }

.section { padding: 80px 0; }
.section.tight { padding: 56px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.section-head h2 { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1.05; letter-spacing: -0.022em; margin: 8px 0 0; max-width: 720px; }
.section-head p.lede { color: var(--text-soft); font-size: 16px; max-width: 540px; margin: 0; }

/* Divider */
.divider { height: 1px; background: var(--border); width: 100%; }
.divider.dashed { background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 12px); }

/* Imagery placeholder */
.img-fill { width: 100%; height: 100%; object-fit: cover; display: block; }
.imgbox { position: relative; overflow: hidden; background: var(--ink-100); }
.imgbox::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,44,74,0) 60%, rgba(14,44,74,0.22) 100%);
  pointer-events: none;
}

/* Sticky-section nav indicator */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  background: transparent;
  border: 0;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-soft);
  padding: 14px 18px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.tabs button:hover { color: var(--ink-900); }
.tabs button.active { color: var(--ink-900); border-color: var(--accent); }

/* Page transition */
.fade-in { animation: fade 320ms ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Cosmos logo wordmark (CSS-only) */
.cosmos-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--red-600);
  font-size: 28px;
}
.cosmos-logo .online {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--yellow-500);
  text-shadow: -0.5px 0 0 #b29800, 0.5px 0 0 #b29800;
  transform: translateY(-9px);
  position: relative;
}
.cosmos-logo .online::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 2px solid var(--yellow-500);
  border-radius: 50%;
  border-top-color: transparent;
  transform: rotate(0deg) translateY(1px);
  margin-right: 2px;
}
.cosmos-logo.dim { color: var(--ink-300); }
.cosmos-logo.dim .online { color: var(--ink-300); text-shadow: none; }
.cosmos-logo.dim .online::before { border-color: var(--ink-300); }
.cosmos-logo.lg { font-size: 56px; }
.cosmos-logo.lg .online { font-size: 22px; transform: translateY(-18px); }
.cosmos-logo.lg .online::before { width: 14px; height: 14px; }
.cosmos-logo.sm { font-size: 22px; }
.cosmos-logo.sm .online { font-size: 10px; transform: translateY(-7px); }
.cosmos-logo.sm .online::before { width: 7px; height: 7px; border-width: 1.5px; }

/* Hide scrollbar utility */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Mobile preview frame (used when mobile mode toggled) */
.mobile-frame-wrap {
  background: linear-gradient(135deg, #0c1320, #1c2842);
  min-height: 100vh;
  padding: 32px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.mobile-frame {
  width: 390px;
  max-width: 100%;
  background: #fff;
  border-radius: 36px;
  border: 10px solid #0c1320;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  min-height: 800px;
}

/* Generic helpers */
.row { display: flex; align-items: center; gap: var(--gap); }
.col { display: flex; flex-direction: column; gap: var(--gap); }
.spread { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.center { display: flex; align-items: center; justify-content: center; }
.muted { color: var(--text-soft); }
.faint { color: var(--text-faint); }
.tnum { font-variant-numeric: tabular-nums; }
.stat-num { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }

/* Responsive */
@media (max-width: 1100px) {
  :root { --pad-screen: 32px; }
}
@media (max-width: 900px) {
  :root { --pad-screen: 20px; }
  .section { padding: 48px 0; }
  .section.tight { padding: 36px 0; }
  .section-head { margin-bottom: 22px; }
  .section-head h2 { font-size: 28px; }
  .section-head p.lede { font-size: 14.5px; }
  .btn.xl { padding: 14px 22px; font-size: 15px; }
  .btn.lg { padding: 12px 18px; font-size: 14px; }
  .display { letter-spacing: -0.015em; }
  body { font-size: 14.5px; }
  /* Allow breadcrumbs to overflow */
  .breadcrumb { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; padding-bottom: 4px; }
  .breadcrumb::-webkit-scrollbar { display: none; }
  .breadcrumb > * { flex-shrink: 0; }
}
@media (max-width: 600px) {
  :root { --pad-screen: 16px; }
  .section { padding: 40px 0; }
  .section.tight { padding: 28px 0; }
  .section-head h2 { font-size: 24px; line-height: 1.1; }
  .stat-num { letter-spacing: -0.022em; }
}

/* Touch-friendly hit areas on small screens */
@media (max-width: 600px) {
  .btn.sm { padding: 9px 14px; font-size: 13px; }
  .btn { min-height: 40px; }
  .tag { font-size: 11px; padding: 5px 9px; }
}