:root{
  --brand-50:#eff4ff;
  --brand-100:#dbe6fe;
  --brand-200:#bfd3fe;
  --brand-500:#3b82f6;
  --brand-600:#2563eb;
  --brand-700:#1d4ed8;
  --slate-50:#f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-800:#1f2937;
  --slate-900:#0f172a;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 10px 30px rgba(2,6,23,.08);
  --shadow-lg:0 20px 60px rgba(2,6,23,.12);
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1000px 500px at 100% 0%, rgba(59,130,246,.12), transparent 55%),
    radial-gradient(800px 500px at 0% 60%, rgba(99,102,241,.10), transparent 50%),
    linear-gradient(to bottom, var(--slate-50), #fff);
  color:var(--slate-900);
}

.container-custom{max-width:80rem;margin:0 auto;padding:0 1rem}
@media (min-width:640px){.container-custom{padding:0 1.5rem}}
@media (min-width:1024px){.container-custom{padding:0 2rem}}

.text-gradient{
  background:linear-gradient(90deg, var(--brand-600), #6366f1);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.bg-gradient-primary{background:linear-gradient(135deg, var(--brand-600), #4f46e5)}

.card{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:1.25rem;
  box-shadow:var(--shadow-md);
}

.card-hover{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(191,211,254,.9)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius:.875rem;
  padding:.75rem 1.25rem;
  font-weight:600;
  font-size:.95rem;
  line-height:1.2;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
  user-select:none;
}

.btn-primary{
  background:var(--brand-600);
  color:#fff;
  box-shadow:0 12px 30px rgba(37,99,235,.25);
}
.btn-primary:hover{background:var(--brand-700);box-shadow:0 14px 36px rgba(37,99,235,.32)}
.btn-primary:active{transform:translateY(1px)}

.btn-secondary{
  background:rgba(255,255,255,.85);
  color:var(--slate-700);
  border:1px solid rgba(226,232,240,.9);
  box-shadow:var(--shadow-sm);
}
.btn-secondary:hover{background:#fff;color:var(--slate-900);border-color:rgba(191,211,254,.9)}

.btn-outline{
  background:transparent;
  color:var(--brand-700);
  border:2px solid rgba(37,99,235,.65);
}
.btn-outline:hover{background:rgba(239,244,255,.9)}

.ro-card{background:#fff;border:1px solid rgba(226,232,240,.9);border-radius:1.25rem;box-shadow:var(--shadow-sm)}
.ro-input{width:100%;border-radius:.9rem;border:1px solid rgba(226,232,240,.9);background:rgba(248,250,252,.9);padding:.75rem 1rem;font-size:.95rem;transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;outline:none}
.ro-input:focus{border-color:rgba(37,99,235,.7);background:#fff;box-shadow:0 0 0 6px rgba(37,99,235,.12)}

.ro-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.875rem;padding:.65rem 1.05rem;font-weight:700;font-size:.9rem;line-height:1.2;transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease}
.ro-btn-primary{background:var(--brand-600);color:#fff;box-shadow:0 10px 24px rgba(37,99,235,.25)}
.ro-btn-primary:hover{background:var(--brand-700);box-shadow:0 12px 28px rgba(37,99,235,.32)}
.ro-btn-secondary{background:#fff;color:var(--slate-700);border:1px solid rgba(226,232,240,.9);box-shadow:var(--shadow-sm)}
.ro-btn-secondary:hover{border-color:rgba(191,211,254,.9);color:var(--slate-900)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(241,245,249,.8)}
::-webkit-scrollbar-thumb{background:rgba(148,163,184,.9);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,.95)}