/* Risivo Brand System
   Primary Purple: #6C4CE0
   Primary Orange: #F26B2C
*/

:root {
  --risivo-purple: #6C4CE0;
  --risivo-purple-dark: #5635C7;
  --risivo-purple-light: #8A6EF0;
  --risivo-purple-50: #F4F0FF;
  --risivo-purple-100: #E8E0FF;
  --risivo-orange: #F26B2C;
  --risivo-orange-dark: #D9551A;
  --risivo-orange-light: #FF8A52;
  --risivo-orange-50: #FFF3EC;
  --risivo-ink: #0E0B1F;
  --risivo-ink-soft: #2A2440;
  --risivo-gray: #6B6480;
  --risivo-gray-light: #E8E5F0;
  --risivo-bg: #FAFAFE;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--risivo-ink);
  background: #fff;
}

.text-risivo-purple { color: var(--risivo-purple); }
.text-risivo-orange { color: var(--risivo-orange); }
.bg-risivo-purple { background-color: var(--risivo-purple); }
.bg-risivo-orange { background-color: var(--risivo-orange); }
.border-risivo-purple { border-color: var(--risivo-purple); }

.bg-risivo-gradient {
  background: linear-gradient(135deg, var(--risivo-purple) 0%, var(--risivo-orange) 100%);
}
.bg-risivo-gradient-soft {
  background: linear-gradient(135deg, var(--risivo-purple-50) 0%, var(--risivo-orange-50) 100%);
}
.text-risivo-gradient {
  background: linear-gradient(135deg, var(--risivo-purple) 0%, var(--risivo-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--risivo-purple);
  color: white !important;
  font-weight: 600; border-radius: 0.625rem;
  transition: all 0.2s; border: none; cursor: pointer; font-size: 0.95rem;
  text-decoration: none;
}
.btn-primary:hover {
  background: var(--risivo-purple-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(108, 76, 224, 0.3);
}

.btn-orange {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--risivo-orange);
  color: white !important;
  font-weight: 600; border-radius: 0.625rem;
  transition: all 0.2s; border: none; cursor: pointer; font-size: 0.95rem;
  text-decoration: none;
}
.btn-orange:hover {
  background: var(--risivo-orange-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(242, 107, 44, 0.3);
}

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; background: white;
  color: var(--risivo-ink); font-weight: 600; border-radius: 0.625rem;
  border: 1.5px solid var(--risivo-gray-light); transition: all 0.2s;
  cursor: pointer; font-size: 0.95rem; text-decoration: none;
}
.btn-secondary:hover { border-color: var(--risivo-purple); color: var(--risivo-purple); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; color: var(--risivo-ink); font-weight: 500;
  border-radius: 0.5rem; transition: all 0.2s; text-decoration: none;
}
.btn-ghost:hover { background: var(--risivo-purple-50); color: var(--risivo-purple); }

.card {
  background: white; border-radius: 1rem;
  border: 1px solid var(--risivo-gray-light); transition: all 0.3s;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(108, 76, 224, 0.1);
  border-color: var(--risivo-purple-light);
}

@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0);} }
.animate-fade-up { animation: fadeInUp 0.6s ease-out forwards; }
@keyframes pulse-glow { 0%,100%{ box-shadow:0 0 0 0 rgba(108,76,224,0.4);} 50%{ box-shadow:0 0 0 12px rgba(108,76,224,0);} }
.animate-pulse-glow { animation: pulse-glow 2s infinite; }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.animate-float { animation: float 6s ease-in-out infinite; }

.hero-blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.5; pointer-events:none; }

.prose-risivo { max-width: 720px; font-size: 1.0625rem; line-height: 1.75; color: var(--risivo-ink-soft); }
.prose-risivo h2 { font-size: 1.75rem; font-weight: 700; color: var(--risivo-ink); margin-top: 2.5rem; margin-bottom: 1rem; }
.prose-risivo h3 { font-size: 1.375rem; font-weight: 700; color: var(--risivo-ink); margin-top: 2rem; margin-bottom: 0.75rem; }
.prose-risivo p { margin-bottom: 1.25rem; }
.prose-risivo ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.prose-risivo ul li { margin-bottom: 0.5rem; }
.prose-risivo strong { color: var(--risivo-ink); font-weight: 600; }
.prose-risivo em { color: var(--risivo-purple); font-style: normal; font-weight: 500; }
.prose-risivo a { color: var(--risivo-purple); text-decoration: underline; }

.admin-sidebar-link {
  display:flex; align-items:center; gap:0.75rem;
  padding:0.625rem 1rem; color:rgba(255,255,255,0.7); font-weight:500;
  border-radius:0.5rem; transition:all 0.2s; font-size:0.925rem; text-decoration:none;
}
.admin-sidebar-link:hover { background:rgba(255,255,255,0.08); color:white; }
.admin-sidebar-link.active { background:rgba(255,255,255,0.12); color:white; }

.admin-input {
  width:100%; padding:0.625rem 0.875rem;
  border:1.5px solid var(--risivo-gray-light); border-radius:0.5rem;
  font-size:0.95rem; transition:border-color 0.2s; background:white; color:var(--risivo-ink);
}
.admin-input:focus { outline:none; border-color:var(--risivo-purple); box-shadow:0 0 0 3px var(--risivo-purple-50); }
.admin-label { display:block; font-size:0.825rem; font-weight:600; color:var(--risivo-ink); margin-bottom:0.4rem; }

.badge { display:inline-flex; align-items:center; gap:0.375rem; padding:0.25rem 0.625rem; font-size:0.75rem; font-weight:600; border-radius:999px; }
.badge-purple { background: var(--risivo-purple-50); color: var(--risivo-purple); }
.badge-orange { background: var(--risivo-orange-50); color: var(--risivo-orange); }
.badge-green { background: #ECFDF5; color: #059669; }
.badge-gray { background: #F3F4F6; color: #4B5563; }
.badge-yellow { background: #FEF3C7; color: #B45309; }

.logo-mark-gradient {
  background: linear-gradient(135deg, var(--risivo-purple) 0%, var(--risivo-orange) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 800; letter-spacing: -0.02em;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f5f3fb; }
::-webkit-scrollbar-thumb { background: var(--risivo-purple-light); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--risivo-purple); }

.mega-menu {
  position: absolute; top: 100%; left: 50%;
  width: 760px; background: white; border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(14,11,31,0.15);
  border: 1px solid var(--risivo-gray-light); padding: 1.5rem;
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: all 0.2s; z-index: 50; margin-top: 0.5rem;
}
.mega-menu-trigger { position: relative; }
.mega-menu-trigger:hover .mega-menu,
.mega-menu:hover { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }

.feature-grid-bg {
  background-image:
    linear-gradient(rgba(108,76,224,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,76,224,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Quill rich text editor */
.quill-wrapper .ql-toolbar.ql-snow {
  border: 1.5px solid var(--risivo-gray-light);
  border-bottom: 0; border-radius: 0.5rem 0.5rem 0 0;
  background: var(--risivo-bg);
}
.quill-wrapper .ql-container.ql-snow {
  border: 1.5px solid var(--risivo-gray-light);
  border-radius: 0 0 0.5rem 0.5rem;
  font-family: 'Inter', sans-serif; font-size: 0.95rem;
}
.quill-wrapper .ql-editor { min-height: 320px; padding: 1rem 1.25rem; }
.quill-wrapper .ql-editor.ql-blank::before { font-style: normal; color: #9ca3af; }
.quill-wrapper .ql-editor h1 { font-size: 1.875rem; font-weight: 700; margin: 1.25rem 0 0.75rem; }
.quill-wrapper .ql-editor h2 { font-size: 1.5rem; font-weight: 700; margin: 1rem 0 0.5rem; }
.quill-wrapper .ql-editor h3 { font-size: 1.25rem; font-weight: 600; margin: 0.875rem 0 0.5rem; }
.quill-wrapper .ql-editor p { margin: 0.5rem 0; }

/* Admin row hover hint */
tbody tr[data-href] { cursor: pointer; }