/* ═══════════════════════════════════════════════════════════
   FUTURE UI — 2030 Design System
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg-deep: #050508;
  --bg-surface: rgba(12, 14, 24, 0.72);
  --bg-card: rgba(18, 22, 38, 0.55);
  --border-glow: rgba(0, 212, 255, 0.18);
  --border-active: rgba(0, 212, 255, 0.45);
  --accent-cyan: #00d4ff;
  --accent-violet: #8b5cf6;
  --accent-magenta: #ec4899;
  --accent-emerald: #10b981;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --glow-cyan: 0 0 40px rgba(0, 212, 255, 0.25);
  --glow-violet: 0 0 40px rgba(139, 92, 246, 0.25);
  --radius-lg: 20px;
  --radius-xl: 28px;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Outfit', system-ui, sans-serif;
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.future-ui {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ── Ambient background ── */
.future-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.future-bg__mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(0, 212, 255, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(236, 72, 153, 0.06) 0%, transparent 50%),
    var(--bg-deep);
}

.future-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 75%);
}

.future-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: orbFloat 20s ease-in-out infinite;
}

.future-bg__orb--1 {
  width: 500px; height: 500px;
  background: rgba(139, 92, 246, 0.18);
  top: -10%; left: -5%;
}

.future-bg__orb--2 {
  width: 400px; height: 400px;
  background: rgba(0, 212, 255, 0.14);
  bottom: -5%; right: -5%;
  animation-delay: -7s;
}

.future-bg__orb--3 {
  width: 300px; height: 300px;
  background: rgba(236, 72, 153, 0.1);
  top: 40%; left: 50%;
  animation-delay: -14s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.05); }
  66% { transform: translate(-20px, 30px) scale(0.95); }
}

/* ── Typography overrides ── */
body.future-ui h1,
body.future-ui h2,
body.future-ui h3,
body.future-ui h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

body.future-ui .text-gray-800,
body.future-ui .text-gray-700 { color: var(--text-primary) !important; }
body.future-ui .text-gray-600 { color: var(--text-secondary) !important; }
body.future-ui .text-gray-500,
body.future-ui .text-gray-400 { color: var(--text-muted) !important; }
body.future-ui .text-gray-300 { color: #cbd5e1 !important; }

/* ── Header ── */
body.future-ui header {
  background: rgba(8, 10, 18, 0.75) !important;
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid var(--border-glow);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
}

body.future-ui header a,
body.future-ui header button {
  color: var(--text-secondary) !important;
  transition: color var(--transition);
}

body.future-ui header a:hover,
body.future-ui header button:hover {
  color: var(--accent-cyan) !important;
}

body.future-ui #header-logo,
body.future-ui #footer-logo {
  font-family: var(--font-display);
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.future-ui header svg { color: var(--accent-cyan) !important; }

body.future-ui .dropdown {
  background: rgba(14, 18, 32, 0.95) !important;
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--glow-cyan), 0 20px 60px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden;
}

body.future-ui .dropdown a {
  color: var(--text-secondary) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: all var(--transition);
}

body.future-ui .dropdown a:hover {
  background: rgba(0, 212, 255, 0.08) !important;
  color: var(--accent-cyan) !important;
  padding-left: 1.25rem !important;
}

body.future-ui .dropdown a.nav-active {
  background: rgba(0, 212, 255, 0.1) !important;
  color: var(--accent-cyan) !important;
  border-left: 2px solid var(--accent-cyan);
}

/* ── Sections ── */
body.future-ui .bg-white,
body.future-ui .bg-gray-50 {
  background: transparent !important;
}

body.future-ui section {
  position: relative;
}

body.future-ui .gradient-bg {
  background: transparent !important;
  position: relative;
}

body.future-ui .gradient-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(0, 212, 255, 0.08) 0%,
    rgba(139, 92, 246, 0.12) 50%,
    rgba(236, 72, 153, 0.06) 100%);
  border-top: 1px solid var(--border-glow);
  border-bottom: 1px solid var(--border-glow);
}

body.future-ui .gradient-bg > .container {
  position: relative;
  z-index: 1;
}

/* ── Glass cards ── */
body.future-ui .custom-shadow,
body.future-ui .shadow-lg,
body.future-ui .rounded-lg.shadow-lg {
  background: var(--bg-card) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

body.future-ui .bg-white.rounded-lg,
body.future-ui .bg-gray-50.rounded-lg,
body.future-ui .bg-gray-50.p-6,
body.future-ui .border.border-gray-200 {
  background: var(--bg-card) !important;
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius-lg) !important;
}

body.future-ui .hover-lift {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

body.future-ui .hover-lift:hover {
  transform: translateY(-8px);
  border-color: var(--border-active) !important;
  box-shadow: var(--glow-cyan), 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

/* ── Stat / feature icon circles ── */
body.future-ui .bg-green-100,
body.future-ui .bg-blue-100,
body.future-ui .bg-yellow-100,
body.future-ui .bg-purple-100,
body.future-ui .bg-red-100,
body.future-ui .bg-indigo-100,
body.future-ui .bg-orange-100 {
  background: rgba(0, 212, 255, 0.1) !important;
  border: 1px solid var(--border-glow);
}

body.future-ui .bg-blue-50,
body.future-ui .bg-green-50,
body.future-ui .bg-purple-50,
body.future-ui .bg-orange-50,
body.future-ui .bg-red-50,
body.future-ui .bg-yellow-50,
body.future-ui .bg-indigo-50 {
  background: rgba(0, 212, 255, 0.06) !important;
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: var(--radius-lg);
}

/* ── Buttons ── */
body.future-ui button,
body.future-ui a > button,
body.future-ui .inline-block.bg-red-500,
body.future-ui .inline-block.bg-green-500,
body.future-ui .inline-block.bg-purple-500,
body.future-ui .inline-block.bg-blue-500,
body.future-ui .inline-block.bg-pink-500 {
  border-radius: 12px !important;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all var(--transition) !important;
  position: relative;
  overflow: hidden;
}

body.future-ui .bg-red-500,
body.future-ui .bg-pink-500 { background: linear-gradient(135deg, #ec4899, #f43f5e) !important; }
body.future-ui .bg-green-500 { background: linear-gradient(135deg, #10b981, #059669) !important; }
body.future-ui .bg-blue-500,
body.future-ui .bg-blue-600 { background: linear-gradient(135deg, #00d4ff, #8b5cf6) !important; }
body.future-ui .bg-purple-500 { background: linear-gradient(135deg, #8b5cf6, #a855f7) !important; }

body.future-ui button:hover,
body.future-ui a > button:hover,
body.future-ui .inline-block:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-cyan) !important;
  filter: brightness(1.1);
}

body.future-ui .gradient-bg button.bg-white,
body.future-ui .gradient-bg a.bg-white {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0a0a0f !important;
  border: none;
}

body.future-ui .gradient-bg .border-2.border-white,
body.future-ui .gradient-bg a.border-2 {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

body.future-ui .gradient-bg .border-2.border-white:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: var(--accent-cyan) !important;
}

/* ── Hero text glow ── */
body.future-ui .gradient-bg h1 {
  background: linear-gradient(135deg, #fff 30%, var(--accent-cyan) 70%, var(--accent-violet) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.future-ui .gradient-bg p { color: var(--text-secondary) !important; }

/* ── Inputs ── */
body.future-ui input,
body.future-ui textarea,
body.future-ui select {
  background: rgba(8, 12, 24, 0.8) !important;
  border: 1px solid var(--border-glow) !important;
  color: var(--text-primary) !important;
  border-radius: 12px !important;
  transition: border-color var(--transition), box-shadow var(--transition);
}

body.future-ui input::placeholder,
body.future-ui textarea::placeholder {
  color: var(--text-muted) !important;
}

body.future-ui input:focus,
body.future-ui textarea:focus,
body.future-ui select:focus {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15) !important;
  outline: none;
}

/* ── Tags / hashtags ── */
body.future-ui .hashtag-tag,
body.future-ui .tag-item {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(139, 92, 246, 0.15)) !important;
  border: 1px solid var(--border-glow);
  color: var(--accent-cyan) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(8px);
}

body.future-ui .hashtag-tag:hover,
body.future-ui .tag-item:hover {
  border-color: var(--accent-cyan);
  box-shadow: var(--glow-cyan);
  color: white !important;
}

body.future-ui .tag-item.bg-gray-100 {
  background: rgba(0, 212, 255, 0.08) !important;
  color: var(--text-primary) !important;
}

/* ── Footer ── */
body.future-ui footer {
  background: rgba(5, 6, 12, 0.9) !important;
  border-top: 1px solid var(--border-glow);
  backdrop-filter: blur(20px);
}

body.future-ui footer a:hover { color: var(--accent-cyan) !important; }
body.future-ui footer .border-gray-700 { border-color: var(--border-glow) !important; }

/* ── Mission cards ── */
body.future-ui .mission-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border-glow);
  backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
}

/* ── Testimonials ── */
body.future-ui .bg-gray-50.p-6.rounded-lg {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-glow);
}

/* ── Loading spinner ── */
body.future-ui .loading-spinner {
  border-color: rgba(0, 212, 255, 0.2) !important;
  border-top-color: var(--accent-cyan) !important;
}

/* ── Copy notification ── */
body.future-ui .copy-notification {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border-radius: 12px;
  box-shadow: var(--glow-cyan);
}

body.future-ui .fixed.top-4.right-4.bg-green-500 {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border-radius: 12px;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ── Platform toggle ── */
body.future-ui .platform-toggle {
  background: rgba(0, 212, 255, 0.1) !important;
  border: 1px solid var(--border-glow);
}

body.future-ui .platform-toggle.active {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet)) !important;
  border-color: transparent;
}

/* ── Prose / guide sections ── */
body.future-ui .border-l-4 { border-color: var(--accent-cyan) !important; }
body.future-ui .border-red-500 { border-color: #f43f5e !important; }
body.future-ui .text-blue-800, body.future-ui .text-blue-700 { color: #7dd3fc !important; }
body.future-ui .text-green-800, body.future-ui .text-green-700 { color: #6ee7b7 !important; }
body.future-ui .text-purple-800, body.future-ui .text-purple-700 { color: #c4b5fd !important; }
body.future-ui .text-red-800, body.future-ui .text-red-700 { color: #fca5a5 !important; }
body.future-ui .text-orange-800, body.future-ui .text-orange-700 { color: #fdba74 !important; }
body.future-ui .text-yellow-800, body.future-ui .text-yellow-700 { color: #fde047 !important; }
body.future-ui .text-indigo-800, body.future-ui .text-indigo-700 { color: #a5b4fc !important; }

body.future-ui .bg-gradient-to-br,
body.future-ui .bg-gradient-to-r {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-lg);
}

/* ── Links ── */
body.future-ui a.text-blue-600 { color: var(--accent-cyan) !important; }
body.future-ui a.text-blue-600:hover { color: var(--accent-violet) !important; }
body.future-ui a.hover\:text-blue-600:hover { color: var(--accent-cyan) !important; }

/* ── Tool card accent icons ── */
body.future-ui .text-pink-500 { color: #ec4899 !important; }
body.future-ui .text-red-500 { color: #f43f5e !important; }
body.future-ui .text-green-500 { color: #10b981 !important; }
body.future-ui .text-purple-500 { color: #a855f7 !important; }
body.future-ui .text-blue-500 { color: #00d4ff !important; }
body.future-ui .text-yellow-500 { color: #eab308 !important; }
body.future-ui .text-orange-500 { color: #f97316 !important; }
body.future-ui .text-indigo-500 { color: #818cf8 !important; }

/* ── Scrollbar ── */
body.future-ui::-webkit-scrollbar { width: 8px; }
body.future-ui::-webkit-scrollbar-track { background: var(--bg-deep); }
body.future-ui::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--accent-cyan), var(--accent-violet));
  border-radius: 4px;
}

/* ── Nav toggles ── */
.dropdown { display: none; }
.dropdown.active { display: block; }
.mobile-menu { display: none; }
.mobile-menu.active { display: block; }

body.future-ui .mobile-menu {
  border-top: 1px solid var(--border-glow);
  padding-top: 1rem;
}

/* ── Futuristic badge ── */
.future-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid var(--border-glow);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 1.5rem;
}

.future-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent-cyan);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4); }
  50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(0, 212, 255, 0); }
}

/* ── Section divider glow line ── */
.future-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-violet), transparent);
  margin: 0 auto;
  max-width: 200px;
  opacity: 0.5;
}

/* ── Stat numbers glow ── */
body.future-ui .text-2xl.font-bold.text-blue-600,
body.future-ui .text-2xl.font-bold.text-green-600,
body.future-ui .text-2xl.font-bold.text-purple-600 {
  font-family: var(--font-display);
  text-shadow: 0 0 20px currentColor;
}

/* ── Responsive hero sizing ── */
@media (max-width: 768px) {
  body.future-ui .gradient-bg h1 { font-size: 2rem !important; }
}

/* ── Tool-specific: keywords ── */
body.future-ui .keyword-tag {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(139, 92, 246, 0.12)) !important;
  border: 1px solid var(--border-glow) !important;
  color: var(--accent-cyan) !important;
  cursor: pointer;
  transition: all var(--transition);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  display: inline-block;
  margin: 0.2rem;
}

body.future-ui .keyword-tag:hover {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet)) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: var(--glow-cyan);
}

body.future-ui .keyword-tag.copied {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: white !important;
}

/* ── Tool-specific: blog tags ── */
body.future-ui .tag-category { border-left: 3px solid var(--accent-cyan); padding-left: 1rem; margin-bottom: 1.25rem; }
body.future-ui .primary-tags { border-color: #f43f5e; }
body.future-ui .secondary-tags { border-color: var(--accent-cyan); }
body.future-ui .longtail-tags { border-color: #10b981; }
body.future-ui .related-tags { border-color: var(--accent-violet); }

/* ── Tool-specific: platform tabs ── */
body.future-ui .platform-tab { transition: all var(--transition); border-radius: 12px; }
body.future-ui .platform-tab.active {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet)) !important;
  color: white !important;
}

/* ── Copy animation ── */
.copy-animation { animation: copyPulse 0.6s ease-in-out; }
@keyframes copyPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

body.future-ui .refresh-animation { animation: spin 1s linear infinite; }
body.future-ui .loading-spinner { animation: spin 1s linear infinite; }

/* ── Trend indicator ── */
body.future-ui .trend-up { color: #10b981 !important; }
body.future-ui .trend-hot { color: #f43f5e !important; }

/* ── Hover lift utility ── */
.hover-lift { transition: transform 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); }
.custom-shadow { box-shadow: 0 10px 25px rgba(0,0,0,0.1); }