/* ============================================================================
 * goprogrammer.io — site.css
 * Self-contained stylesheet. No build step, no Tailwind dependency.
 * Class names mirror Tailwind utilities used in index.html.
 * Brand color (Go Cyan): #00ADD8
 * ============================================================================ */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; border: 0 solid #1e293b; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; scroll-behavior: smooth; scroll-padding-top: 5rem; }
:root { color-scheme: dark; }
body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: #020617; color: #f1f5f9; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv02","cv03","cv04","cv11"; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; background: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }
code, pre { font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
::selection { background: rgba(0,173,216,.30); color: #fff; }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* ---------- CSS variables ---------- */
:root {
  --brand-300: #33CFE5;
  --brand-400: #08BAD6;
  --brand-500: #00ADD8;
  --brand-600: #0091B5;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --amber-400: #fbbf24;
  --rose-300: #fda4af;
  --rose-400: #fb7185;
  --rose-500: #f43f5e;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;
}

/* ---------- Layout ---------- */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }
.top-0    { top: 0; }
.-top-3   { top: -0.75rem; }
.left-1\/2 { left: 50%; }
.z-50     { z-index: 50; }
.-z-10    { z-index: -10; }

.block        { display: block; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.hidden       { display: none; }

.flex-col   { flex-direction: column; }
.flex-1     { flex: 1 1 0%; }
.flex-none  { flex: none; }
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch  { align-items: stretch; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.min-h-screen { min-height: 100vh; }
.h-full { height: 100%; }
.w-full { width: 100%; }
.w-2   { width: 0.5rem; }    .h-2   { height: 0.5rem; }
.w-2\.5{ width: 0.625rem; }  .h-2\.5{ height: 0.625rem; }
.w-3   { width: 0.75rem; }   .h-3   { height: 0.75rem; }
.w-3\.5{ width: 0.875rem; }  .h-3\.5{ height: 0.875rem; }
.w-4   { width: 1rem; }      .h-4   { height: 1rem; }
.w-5   { width: 1.25rem; }   .h-5   { height: 1.25rem; }
.w-6   { width: 1.5rem; }    .h-6   { height: 1.5rem; }
.w-9   { width: 2.25rem; }   .h-9   { height: 2.25rem; }
.w-11  { width: 2.75rem; }   .h-11  { height: 2.75rem; }
.h-1\.5 { height: 0.375rem; }

.max-w-md   { max-width: 28rem; }
.max-w-xl   { max-width: 36rem; }
.max-w-2xl  { max-width: 42rem; }
.max-w-4xl  { max-width: 56rem; }
.max-w-7xl  { max-width: 80rem; }

.mx-auto    { margin-left: auto; margin-right: auto; }
.ml-1       { margin-left: 0.25rem; }
.mt-0\.5    { margin-top: 0.125rem; }
.mt-2       { margin-top: 0.5rem; }
.mt-3       { margin-top: 0.75rem; }
.mt-4       { margin-top: 1rem; }
.mt-6       { margin-top: 1.5rem; }
.mt-8       { margin-top: 2rem; }
.mt-10      { margin-top: 2.5rem; }
.mt-12      { margin-top: 3rem; }
.mt-14      { margin-top: 3.5rem; }
.mb-1       { margin-bottom: 0.25rem; }
.mb-1\.5    { margin-bottom: 0.375rem; }
.mb-4       { margin-bottom: 1rem; }
.mb-5       { margin-bottom: 1.25rem; }
.mb-6       { margin-bottom: 1.5rem; }

.p-1   { padding: 0.25rem; }
.p-5   { padding: 1.25rem; }
.p-6   { padding: 1.5rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2  { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3  { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4  { padding-left: 1rem; padding-right: 1rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1  { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2  { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3  { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4  { padding-top: 1rem; padding-bottom: 1rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.pb-20 { padding-bottom: 5rem; }
.pt-4  { padding-top: 1rem; }
.pt-6  { padding-top: 1.5rem; }
.pt-16 { padding-top: 4rem; }

.gap-1   { gap: 0.25rem; }
.gap-1\.5{ gap: 0.375rem; }
.gap-2   { gap: 0.5rem; }
.gap-3   { gap: 0.75rem; }
.gap-4   { gap: 1rem; }
.gap-6   { gap: 1.5rem; }
.gap-8   { gap: 2rem; }
.gap-10  { gap: 2.5rem; }

/* space-y-* — adjacent siblings */
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }

/* divide-y */
.divide-y > * + * { border-top-width: 1px; border-top-style: solid; }
.divide-slate-800 > * + * { border-color: var(--slate-800); }

/* ---------- Borders ---------- */
.border         { border-width: 1px; border-style: solid; }
.border-b       { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t       { border-top-width: 1px; border-top-style: solid; }
.border-slate-700 { border-color: var(--slate-700); }
.border-slate-800 { border-color: var(--slate-800); }
.border-slate-900 { border-color: var(--slate-900); }
.border-slate-900\/70 { border-color: rgba(15,23,42,0.7); }
.border-brand-500\/30 { border-color: rgba(0,173,216,0.30); }
.border-brand-500\/40 { border-color: rgba(0,173,216,0.40); }
.border-emerald-500\/20 { border-color: rgba(16,185,129,0.20); }

.rounded        { border-radius: 0.25rem; }
.rounded-md     { border-radius: 0.375rem; }
.rounded-lg     { border-radius: 0.5rem; }
.rounded-xl     { border-radius: 0.75rem; }
.rounded-full   { border-radius: 9999px; }

/* ring */
.ring-1 { box-shadow: 0 0 0 1px var(--tw-ring, transparent); }
.ring-brand-500\/30 { --tw-ring: rgba(0,173,216,0.30); }

/* ---------- Colors / backgrounds ---------- */
.bg-slate-800 { background-color: var(--slate-800); }
.bg-slate-900\/40 { background-color: rgba(15,23,42,0.40); }
.bg-slate-900\/50 { background-color: rgba(15,23,42,0.50); }
.bg-slate-900\/60 { background-color: rgba(15,23,42,0.60); }
.bg-slate-950 { background-color: var(--slate-950); }
.bg-slate-950\/60 { background-color: rgba(2,6,23,0.60); }
.bg-slate-950\/80 { background-color: rgba(2,6,23,0.80); }
.bg-brand-400 { background-color: var(--brand-400); }
.bg-brand-500 { background-color: var(--brand-500); }
.bg-brand-500\/10 { background-color: rgba(0,173,216,0.10); }
.bg-emerald-400 { background-color: var(--emerald-400); }
.bg-emerald-500\/5  { background-color: rgba(16,185,129,0.05); }
.bg-emerald-500\/10 { background-color: rgba(16,185,129,0.10); }
.bg-rose-500 { background-color: var(--rose-500); }
.bg-rose-500\/10 { background-color: rgba(244,63,94,0.10); }
.bg-rose-500\/70 { background-color: rgba(244,63,94,0.70); }

.text-slate-100 { color: var(--slate-100); }
.text-slate-200 { color: var(--slate-200); }
.text-slate-300 { color: var(--slate-300); }
.text-slate-400 { color: var(--slate-400); }
.text-slate-500 { color: var(--slate-500); }
.text-slate-950 { color: var(--slate-950); }
.text-white     { color: #ffffff; }
.text-brand-300 { color: var(--brand-300); }
.text-brand-400 { color: var(--brand-400); }
.text-brand-500 { color: var(--brand-500); }
.text-emerald-300 { color: var(--emerald-300); }
.text-emerald-400 { color: var(--emerald-400); }
.text-amber-400 { color: var(--amber-400); }
.text-rose-300  { color: var(--rose-300); }
.text-rose-400  { color: var(--rose-400); }
.text-transparent { color: transparent; }

/* Gradient text */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-from, transparent), var(--tw-via, transparent), var(--tw-to, transparent)); }
.from-brand-400 { --tw-from: var(--brand-400); }
.from-rose-500  { --tw-from: var(--rose-500); }
.via-amber-400  { --tw-via:  var(--amber-400); }
.to-emerald-400 { --tw-to:   var(--emerald-400); }
/* Without via */
.from-brand-400.to-emerald-400 { background-image: linear-gradient(to right, var(--brand-400), var(--emerald-400)); }
.from-rose-500.via-amber-400.to-emerald-400 { background-image: linear-gradient(to right, var(--rose-500), var(--amber-400), var(--emerald-400)); }

.bg-clip-text { -webkit-background-clip: text; background-clip: text; }

/* Selection helpers */
.selection\:bg-brand-500\/30 *::selection,
.selection\:bg-brand-500\/30::selection { background: rgba(0,173,216,0.30); }
.selection\:text-white *::selection,
.selection\:text-white::selection { color: #fff; }

/* ---------- Typography ---------- */
.font-sans { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.font-mono { font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.text-[10px] { font-size: 10px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[13px\] { font-size: 13px; }
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.uppercase   { text-transform: uppercase; }

.tracking-tight  { letter-spacing: -0.025em; }
.tracking-wide   { letter-spacing:  0.025em; }
.tracking-wider  { letter-spacing:  0.05em; }

.leading-relaxed { line-height: 1.625; }
.text-balance    { text-wrap: balance; }
.text-pretty     { text-wrap: pretty; }

/* ---------- Effects ---------- */
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.35), 0 4px 6px -4px rgba(0,0,0,0.4); }
.shadow-glow    { box-shadow: 0 0 0 1px rgba(0,173,216,0.35), 0 0 24px -2px rgba(0,173,216,0.45); }
.shadow-glow-lg { box-shadow: 0 0 0 1px rgba(0,173,216,0.45), 0 10px 40px -6px rgba(0,173,216,0.55); }
.shadow         { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.25), 0 1px 2px -1px rgba(0,0,0,0.4); }

.opacity-30 { opacity: 0.30; }
.backdrop-blur { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }

.cursor-pointer { cursor: pointer; }
.list-none      { list-style: none; }

/* ---------- Transitions ---------- */
.transition-all       { transition: all 200ms ease; }
.transition-colors    { transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, fill 200ms ease, stroke 200ms ease; }
.transition-transform { transition: transform 200ms ease; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.duration-\[1400ms\] { transition-duration: 1400ms; }
.ease-out { transition-timing-function: cubic-bezier(0,0,0.2,1); }

/* ---------- Transforms ---------- */
.-translate-x-1\/2 { transform: translateX(-50%); }

/* ---------- Backgrounds: gradient layers & decorative patterns ---------- */
.bg-grid-fade {
  background-image:
    radial-gradient(ellipse at top, rgba(0,173,216,0.18), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(16,185,129,0.10), transparent 60%);
}
.bg-dot-grid {
  background-image: radial-gradient(rgba(148,163,184,0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
}

/* ---------- Components (custom) ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0.75rem; border-radius: 9999px;
  border: 1px solid var(--slate-800);
  background: rgba(15,23,42,0.7);
  color: var(--slate-300);
  font-size: 0.75rem; line-height: 1rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.btn-primary, .btn-ghost, .btn-glow {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.625rem 1.25rem; border-radius: 0.5rem;
  font-size: 0.875rem; font-weight: 500;
  transition: transform 200ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
  will-change: transform;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--brand-500); color: var(--slate-950);
  box-shadow: 0 0 0 1px rgba(0,173,216,.35), 0 0 24px -2px rgba(0,173,216,.45);
}
.btn-primary:hover { background: var(--brand-400); transform: scale(1.02); }
.btn-primary:active { transform: scale(0.99); }
.btn-glow {
  background: var(--brand-500); color: var(--slate-950);
  box-shadow: 0 0 0 1px rgba(0,173,216,.45), 0 10px 40px -6px rgba(0,173,216,.55);
}
.btn-glow:hover { background: var(--brand-400); transform: scale(1.02); }
.btn-ghost {
  border-color: var(--slate-700); color: var(--slate-100);
  background: transparent;
}
.btn-ghost:hover { border-color: rgba(0,173,216,0.60); background: rgba(15,23,42,0.6); }

.card {
  position: relative; border-radius: 0.75rem;
  border: 1px solid var(--slate-800);
  background: rgba(15,23,42,0.40);
  padding: 1.5rem;
  transition: border-color 300ms ease, background-color 300ms ease;
}
.card:hover { border-color: var(--slate-700); }

.card-gradient {
  position: relative; border-radius: 0.75rem; padding: 1px;
  background: linear-gradient(140deg, rgba(0,173,216,0.45), rgba(16,185,129,0.18) 40%, rgba(30,41,59,0.4) 70%);
}
.card-gradient > .card-inner {
  height: 100%; border-radius: 11px; background: rgba(2,6,23,0.80); padding: 1.5rem;
}

/* code scrollbar */
.code-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.code-scroll::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.25); border-radius: 8px; }
.code-scroll::-webkit-scrollbar-track { background: transparent; }

/* syntax token colors */
.tok-key { color: #f472b6; }
.tok-str { color: #34d399; }
.tok-com { color: #64748b; font-style: italic; }
.tok-fn  { color: #38bdf8; }
.tok-typ { color: #f59e0b; }
.tok-num { color: #c084fc; }
.tok-pkg { color: #67e8f9; }
.tok-op  { color: #94a3b8; }

/* ---------- Hover / group / state utilities ---------- */
.hover\:text-white:hover { color: #fff; }
.hover\:text-brand-300:hover { color: var(--brand-300); }
.hover\:border-brand-500\/50:hover { border-color: rgba(0,173,216,0.50); }
.hover\:border-brand-500\/60:hover { border-color: rgba(0,173,216,0.60); }
.hover\:bg-slate-900\/60:hover { background-color: rgba(15,23,42,0.60); }

.group:hover .group-hover\:translate-x-0\.5 { transform: translateX(0.125rem); }
details[open] > summary .group-open\:rotate-180 { transform: rotate(180deg); }

/* ---------- Animations ---------- */
@keyframes fade-up   { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.animate-pulse-dot { animation: pulse-dot 1.6s ease-in-out infinite; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease-out, transform 600ms ease-out; will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Accessible focus */
a:focus-visible, button:focus-visible {
  outline: 2px solid rgba(0,173,216,0.7); outline-offset: 3px; border-radius: 4px;
}

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .sm\:flex-row     { flex-direction: row; }
  .sm\:items-center { align-items: center; }
  .sm\:px-6         { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:pt-20        { padding-top: 5rem; }
  .sm\:py-24        { padding-top: 6rem; padding-bottom: 6rem; }
  .sm\:text-4xl     { font-size: 2.25rem; line-height: 2.5rem; }
  .sm\:text-5xl     { font-size: 3rem; line-height: 1; }
  .sm\:text-lg      { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:w-auto       { width: auto; }
}

@media (min-width: 768px) {
  .md\:flex                { display: flex; }
  .md\:hidden              { display: none; }
  .md\:inline-block        { display: inline-block; }
  .md\:grid-cols-2         { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3         { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-\[2fr_1fr_1fr\] { grid-template-columns: 2fr 1fr 1fr; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3         { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-\[1fr_1fr_280px\] { grid-template-columns: 1fr 1fr 280px; }
  .lg\:px-8                { padding-left: 2rem; padding-right: 2rem; }
  .lg\:pt-28               { padding-top: 7rem; }
  .lg\:text-6xl            { font-size: 3.75rem; line-height: 1; }
}

/* supports-* */
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .supports-\[backdrop-filter\]\:bg-slate-950\/60 { background-color: rgba(2,6,23,0.60); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Gradient text correction (clip path requires text color transparent) */
.bg-clip-text.text-transparent { -webkit-text-fill-color: transparent; }

/* ===========================================================================
 * Modal: Request Beta Access
 * =========================================================================== */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  padding: 1rem;
}
.modal.is-open { display: flex; }

.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(2, 6, 23, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: modal-fade-in 200ms ease-out;
}

.modal-dialog {
  position: relative; z-index: 1;
  width: 100%; max-width: 28rem;
  border-radius: 1rem;
  border: 1px solid var(--slate-800);
  background: linear-gradient(180deg, rgba(15,23,42,0.95), rgba(2,6,23,0.98));
  box-shadow:
    0 0 0 1px rgba(0,173,216,0.18),
    0 25px 50px -12px rgba(0,0,0,0.6),
    0 0 60px -10px rgba(0,173,216,0.25);
  padding: 1.75rem;
  animation: modal-pop-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.modal-close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.5rem;
  color: var(--slate-400);
  border: 1px solid transparent;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.modal-close:hover {
  color: #fff;
  background-color: rgba(15,23,42,0.6);
  border-color: var(--slate-800);
}

/* Honeypot — visually hidden but focusable for bots */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Form controls */
.form-label {
  display: block;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--slate-300);
  margin-bottom: 0.375rem;
}
.form-input {
  display: block; width: 100%;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid var(--slate-800);
  background: rgba(2,6,23,0.7);
  color: var(--slate-100);
  font-size: 0.875rem;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.form-input::placeholder { color: var(--slate-500); }
.form-input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(0,173,216,0.18);
  background: rgba(2,6,23,0.9);
}
.form-input:invalid:not(:placeholder-shown):not(:focus) {
  border-color: rgba(244,63,94,0.6);
}
.form-input[aria-invalid="true"] {
  border-color: rgba(244,63,94,0.7);
  box-shadow: 0 0 0 3px rgba(244,63,94,0.15);
}
select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 12px;
  padding-right: 2.25rem;
}
.form-hint {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--slate-500);
}

/* Spinner */
.spinner {
  display: inline-block;
  width: 1rem; height: 1rem;
  border: 2px solid rgba(2,6,23,0.3);
  border-top-color: var(--slate-950);
  border-radius: 50%;
  animation: spin 720ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Prevent body scroll while modal open */
body.modal-open { overflow: hidden; }

/* Underline utility (used in fine print) */
.underline { text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal-dialog { animation: none; }
}