/* ============================================================
   Invedom — Main Stylesheet
   All custom styles extracted from inline <style> blocks.
   Tailwind utilities are in output.css (compiled separately).
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --bg0:    #05070f;
  --bg1:    #070b16;
  --card:   rgba(255,255,255,.06);
  --card2:  rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.12);
  --stroke2:rgba(255,255,255,.16);
  --text:   rgba(255,255,255,.92);
  --muted:  rgba(255,255,255,.68);
  --gold1:  #f5d37a;
  --gold2:  #fbbf24;
  --gold3:  #eab308;
}

/* ── Font ───────────────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── Base ───────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(59,130,246,.20),  transparent 60%),
    radial-gradient(900px  600px at 70%   0%, rgba(99,102,241,.18),  transparent 65%),
    radial-gradient(900px  600px at 90%  50%, rgba(16,185,129,.12),  transparent 60%),
    radial-gradient(1200px 800px at 50% 100%, rgba(245,158,11,.10),  transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ── Grid overlay ───────────────────────────────────────────── */
.grid-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(800px 500px at 50% 0%, rgba(0,0,0,.9), transparent 70%);
  z-index: 0;
}

/* ── Glass card ─────────────────────────────────────────────── */
.glass {
  background: rgba(10,14,28,.55);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ── Text gradients ─────────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,.70), rgba(255,255,255,.92));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gold-gradient {
  background: linear-gradient(90deg, var(--gold1), var(--gold2), var(--gold3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(245,158,11,.15);
}

/* ── Interactive components ─────────────────────────────────── */
.btn {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  will-change: transform;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.99); }

.lift {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(2,6,23,.35);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.075);
}

.shadow-soft { box-shadow: 0 4px 20px rgba(0,0,0,.3); }

/* ── Focus system ───────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible {
  outline: none;
  border-radius: 10px;
  box-shadow: 0 0 0 3px #fbbf24, 0 0 0 6px rgba(251,191,36,.35);
  border-color: #fbbf24;
  transition: box-shadow .18s ease, border-color .18s ease;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
  box-shadow: none;
}

/* ── Stat card ──────────────────────────────────────────────── */
.stat-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1rem;
  padding: 1.25rem;
  text-align: center;
}

/* ── Value list ─────────────────────────────────────────────── */
.value-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.value-item:last-child { border-bottom: none; }
.value-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.125rem;
}

/* ── Table scrollbar ────────────────────────────────────────── */
.table-scroll::-webkit-scrollbar,
.table-container::-webkit-scrollbar { height: 6px; width: 6px; }
.table-scroll::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track {
  background: rgba(255,255,255,.05);
  border-radius: 3px;
}
.table-scroll::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,.5);
  border-radius: 3px;
}
.table-scroll::-webkit-scrollbar-thumb:hover,
.table-container::-webkit-scrollbar-thumb:hover {
  background: rgba(99,102,241,.75);
}
.table-scroll  { scrollbar-color: rgba(99,102,241,.55) rgba(255,255,255,.06); scrollbar-width: thin; }
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Modal animations ───────────────────────────────────────── */
.modal-backdrop {
  opacity: 0;
  transition: opacity .18s ease;
}
.modal-backdrop.open { opacity: 1; }
.modal-panel {
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
.modal-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Background blobs (homepage) ────────────────────────────── */
.bg-blob-1 {
  background: radial-gradient(circle at 30% 30%, rgba(99,102,241,.35), rgba(59,130,246,.18), transparent 60%);
  animation-delay: 0s;
}
.bg-blob-2 {
  background: radial-gradient(circle at 40% 35%, rgba(16,185,129,.28), rgba(34,197,94,.14), transparent 60%);
  animation-delay: -2s;
}
.bg-blob-3 {
  background: radial-gradient(circle at 45% 35%, rgba(245,158,11,.30), rgba(234,179,8,.10), transparent 60%);
  animation-delay: -4s;
}

/* ── Blog listing ───────────────────────────────────────────── */
.article-card {
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.article-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.07) !important;
}
.cat-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .2rem .75rem;
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}
.read-more {
  color: #a5b4fc;
  text-decoration: none;
  font-size: .875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: gap .15s;
}
.read-more:hover { gap: .6rem; }

/* ── Blog prose ─────────────────────────────────────────────── */
.prose h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  margin: 2.25rem 0 .875rem;
  letter-spacing: -.01em;
  padding-bottom: .625rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.prose h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  margin: 1.75rem 0 .625rem;
}
.prose p {
  font-size: .9375rem;
  color: rgba(255,255,255,.7);
  line-height: 1.9;
  margin-bottom: 1.125rem;
}
.prose ul {
  padding: 0;
  margin-bottom: 1.25rem;
  list-style: none;
}
.prose ul li {
  font-size: .9375rem;
  color: rgba(255,255,255,.7);
  line-height: 1.8;
  padding: .25rem 0 .25rem 1.375rem;
  position: relative;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85rem;
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: rgba(245,158,11,.75);
}
.prose ol {
  padding: 0;
  margin-bottom: 1.25rem;
  list-style: none;
  counter-reset: step;
}
.prose ol li {
  font-size: .9375rem;
  color: rgba(255,255,255,.7);
  line-height: 1.8;
  padding: .25rem 0 .25rem 2rem;
  position: relative;
  counter-increment: step;
}
.prose ol li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .35rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: rgba(99,102,241,.25);
  border: 1px solid rgba(99,102,241,.35);
  font-size: .7rem;
  font-weight: 700;
  color: #a5b4fc;
  text-align: center;
  line-height: 1.375rem;
}
.prose a {
  color: #a5b4fc;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s;
}
.prose a:hover { color: #c7d2fe; }
.prose strong  { color: rgba(255,255,255,.9); font-weight: 600; }

.callout {
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: .875rem;
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
}
.callout p       { margin: 0; color: rgba(255,255,255,.75); }
.callout-warn    { background: rgba(245,158,11,.1);  border-color: rgba(245,158,11,.25); }
.callout-success { background: rgba(16,185,129,.1);  border-color: rgba(16,185,129,.25); }

/* ── Legal pages ────────────────────────────────────────────── */
.legal-h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  margin: 0 0 .875rem;
  padding-bottom: .625rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.legal-p {
  font-size: .9375rem;
  color: rgba(255,255,255,.68);
  line-height: 1.85;
  margin: 0 0 .875rem;
}
.legal-ul {
  padding: 0;
  margin: 0 0 .875rem;
  list-style: none;
}
.legal-ul li {
  font-size: .9375rem;
  color: rgba(255,255,255,.68);
  line-height: 1.8;
  padding: .2rem 0 .2rem 1.25rem;
  position: relative;
}
.legal-ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .75rem;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: rgba(245,158,11,.7);
}
.legal-note {
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  margin-bottom: .875rem;
}
.legal-note p {
  margin: 0;
  font-size: .875rem;
  color: rgba(255,255,255,.7);
  line-height: 1.75;
}
.toc-link {
  display: block;
  padding: .375rem .75rem;
  font-size: .8125rem;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  border-radius: .5rem;
  transition: background .12s, color .12s;
}
.toc-link:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.9); }

/* ── Domain detail page ─────────────────────────────────────── */
.use-case-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.use-case-item:last-child { border-bottom: none; }

/* ── Tailwind classes missing from compiled output.css ─────── */
.backdrop-blur-sm { backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.divide-y > * + * { border-top-width: 1px; border-top-style: solid; }
.divide-white\/5 > * + * { border-color: rgba(255,255,255,.05); }
.space-y-6 > * + * { margin-top: 1.5rem; }
.tracking-widest  { letter-spacing: .1em; }
.min-w-\[800px\]  { min-width: 800px; }
.min-w-\[160px\]  { min-width: 160px; }
.min-w-\[140px\]  { min-width: 140px; }
.min-w-\[130px\]  { min-width: 130px; }
.bg-clip-text     { -webkit-background-clip: text; background-clip: text; }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent)); }
.from-emerald-400 { --tw-gradient-from: #34d399; }
.to-cyan-400      { --tw-gradient-to: #22d3ee; }
.w-full           { width: 100%; }
.mb-8             { margin-bottom: 2rem; }
button:disabled,
.disabled\:opacity-40:disabled         { opacity: .4; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

/* ── Responsive overrides ───────────────────────────────────── */
@media (min-width: 768px) {
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  table    { font-size: 14px; }
  th, td   { padding: 12px 10px; }
  .animate-floaty { animation: none; }
  .bg-blob-1, .bg-blob-2, .bg-blob-3 { opacity: .4; }
  button, .btn, input[type="button"], input[type="submit"] {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (hover: hover) {
  .btn:hover { transform: translateY(-1px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .lift, .modal-backdrop, .modal-panel { transition: none !important; }
  .animate-floaty { animation: none !important; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}