/* Niktasoft — bespoke "vibrant" theme (not a claude.ai/design pull).
   Tokens + component classes follow the same contract every prior design
   system on this site used (the color, font, space, radius and shadow custom
   properties, plus .btn, .card, .nav, .tag, .field, .input, .table, .dialog),
   so assets/css/site.css and every page keep working unchanged against a new
   visual language: glassmorphic light-mode surfaces over a vibrant
   indigo-violet-orange brand gradient, Sora headings over Inter body text. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@600;700&display=swap');

:root {
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-text: #18181b;
  --color-accent: #6366f1;
  --color-accent-2: #a855f7;
  --color-divider: color-mix(in srgb, #18181b 12%, transparent);

  --gradient-brand: linear-gradient(135deg, #6366f1 0%, #a855f7 55%, #fb923c 100%);
  --gradient-brand-soft: linear-gradient(135deg, color-mix(in srgb, #6366f1 12%, transparent), color-mix(in srgb, #a855f7 12%, transparent));

  --color-neutral-100: #f9f9fb;
  --color-neutral-200: #f0f0f4;
  --color-neutral-300: #e4e4ea;
  --color-neutral-400: #c7c7d1;
  --color-neutral-500: #a1a1ae;
  --color-neutral-600: #71717a;
  --color-neutral-700: #52525b;
  --color-neutral-800: #3f3f46;
  --color-neutral-900: #27272a;

  --color-accent-100: #eef2ff;
  --color-accent-200: #e0e7ff;
  --color-accent-300: #c7d2fe;
  --color-accent-400: #a5b4fc;
  --color-accent-500: #6366f1;
  --color-accent-600: #4f46e5;
  --color-accent-700: #4338ca;
  --color-accent-800: #3730a3;
  --color-accent-900: #312e81;

  --color-accent-2-100: #faf5ff;
  --color-accent-2-200: #f3e8ff;
  --color-accent-2-300: #e9d5ff;
  --color-accent-2-400: #d8b4fe;
  --color-accent-2-500: #a855f7;
  --color-accent-2-600: #9333ea;
  --color-accent-2-700: #7e22ce;
  --color-accent-2-800: #6b21a8;
  --color-accent-2-900: #581c87;

  --font-heading: "Sora", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-sm: 0 1px 3px rgba(24,24,27,.06), 0 1px 2px rgba(24,24,27,.04);
  --shadow-md: 0 8px 24px rgba(99,102,241,.10), 0 2px 6px rgba(24,24,27,.06);
  --shadow-lg: 0 20px 48px rgba(99,102,241,.16), 0 6px 16px rgba(24,24,27,.08);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

/* — kinetic headline: static gradient fill; site.css animates it under
   prefers-reduced-motion:no-preference — reduced-motion users still get the
   gradient, just not the drift */
.gradient-text {
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-2) 50%, #fb923c 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* text-box-trim shrinks the line box to cap-height/alphabetic-baseline, which
     also shrinks the region background-clip:text paints into — descenders
     (p, g, y...) would render unfilled/invisible if it were left on */
  text-box: none;
}

/* — photography: rounded, lifted, softly saturated — replaces every prior
   system's duotone/halftone/washed treatment */
.glow {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 12px 32px rgba(99,102,241,.18), 0 2px 8px rgba(0,0,0,.06);
}
.glow img { filter: saturate(1.08) contrast(1.02); }

/* ══════════════════════════════════════════════════════════════════════════
   Components — plain CSS, no build step. Same class contract as every prior
   system on this site (.btn/.card/.nav/.tag/.field/.input/.table/.dialog).
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--space-2);
}
h1 { font-size: 44px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent-2) 30%, transparent); }

/* — rules — */
.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 15px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.4);
  border-radius: 999px;
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
  background: var(--gradient-brand); color: #fff;
  box-shadow: 0 4px 14px rgba(99,102,241,.35);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 6px 22px rgba(99,102,241,.45); }
.btn-primary:active { filter: brightness(0.95); }
.btn-secondary {
  background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-color: var(--color-divider);
}
.btn-secondary:hover { background: rgba(255,255,255,.9); border-color: var(--color-accent-300); }
.btn-secondary:active { background: #fff; }
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 13px; margin-bottom: 6px; font-weight: 500;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 44px; padding: 8px 14px; font: inherit;
  font-size: 15px; color: var(--color-text); caret-color: var(--color-accent);
  background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 35%, transparent); }
.input:focus-visible {
  border-color: var(--color-accent); outline-offset: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
textarea.input { min-height: 120px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: #fff; }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--shadow-md);
}
.card-kicker { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--color-accent-700); }
.card-title { font-family: var(--font-heading); font-weight: 600; font-size: 18px; line-height: 1.25; }
.card-body { margin: 0; font-size: 14px; opacity: 0.75; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — notice card: amber-tinted variant for disclaimers/important notes that
   need to stand out from the regular glass cards — */
.card-notice {
  background: color-mix(in srgb, #f59e0b 14%, rgba(255,255,255,.6));
  border-color: color-mix(in srgb, #f59e0b 40%, transparent);
}
.card-notice h2, .card-notice h3 { color: #92400e; }
.card-notice .icon-badge { background: color-mix(in srgb, #f59e0b 22%, transparent); color: #92400e; }

/* — icons: one flat/outline system everywhere (nav, cards, lists, buttons) —
   plain stroke glyphs sized off font-size via 1em, so they inherit color and
   scale with whatever text they sit next to; no icon font, no external fetch */
.icon { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -0.2em; }
.btn .icon { width: 16px; height: 16px; }
.icon-arrow { transition: transform .2s cubic-bezier(.16,1,.3,1); }
.btn:hover .icon-arrow { transform: translateX(3px); }

.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-md); flex: none;
  background: var(--gradient-brand-soft); color: var(--color-accent-700);
  margin-bottom: var(--space-1);
}
.icon-badge .icon { width: 22px; height: 22px; }
.icon-badge.accent-2 { color: var(--color-accent-2-700); }
.icon-badge.sm { width: 34px; height: 34px; border-radius: var(--radius-sm); }
.icon-badge.sm .icon { width: 18px; height: 18px; }

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.feature-list li { display: flex; align-items: flex-start; gap: 8px; }
.feature-list .icon { color: var(--color-accent-600); margin-top: 2px; }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em; padding: 4px 12px; border-radius: 999px;
}
.tag-accent { background: linear-gradient(135deg, var(--color-accent-100), var(--color-accent-2-100)); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent-300); background: rgba(255,255,255,.5); color: var(--color-accent-700); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(250,250,250,.7);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,.5);
}
.nav-brand { font-family: var(--font-heading); font-weight: 700; font-size: 19px; margin-right: auto; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; font-weight: 500; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent-700); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-accent) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--shadow-lg);
}
.dialog-title { font-family: var(--font-heading); font-weight: 700; font-size: 21px; }
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }