/* =====================================================
   TechVerse WordPress Theme — Main Stylesheet
   Complete dark-mode glassmorphism design system
   ===================================================== */

/* ---- CSS Custom Properties ---- */
:root {
  --ink-950: #08090C;
  --ink-900: #0A0A0A;
  --ink-850: #0F1115;
  --ink-800: #13151A;
  --ink-700: #1F2228;
  --brand-50: #FFF1F1;
  --brand-100: #FFDCDC;
  --brand-400: #F54747;
  --brand-500: #EA2E2E;
  --brand-600: #E01F1F;
  --brand-700: #CC1919;
  --ember: #FA784C;
  --mint: #10B981;
  --mintlight: #34D399;
}

/* ---- Base ---- */
html, body { background-color: var(--ink-950); }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: #E5E7EB;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
::selection { background: rgba(224, 31, 31, 0.35); color: #fff; }

/* ---- Typography ---- */
.font-display { font-family: 'Space Grotesk', system-ui, sans-serif; }
.font-body { font-family: 'Inter', system-ui, sans-serif; }
.font-serif { font-family: 'Instrument Serif', ui-serif, Georgia, serif; }

/* ---- Custom Scrollbar ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb {
  background: var(--ink-700);
  border-radius: 6px;
  border: 2px solid var(--ink-900);
}
::-webkit-scrollbar-thumb:hover { background: #2a2e36; }

/* ---- Background Layers ---- */
.dot-grid {
  background-image: radial-gradient(circle at 1px 1px, rgba(243, 244, 246, 0.5) 0.5px, transparent 0px);
  background-size: 44px 44px;
  opacity: 0.06;
}
.noise-overlay { position: relative; }
.noise-overlay::after {
  content: "";
  position: fixed;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 100;
}
@media (max-width: 768px) { .noise-overlay::after { display: none; } }

/* ---- Aurora glow blobs ---- */
.glow-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
}
.glow-soft { filter: blur(200px); }

/* ---- Frosted glass card ---- */
.glass {
  background: rgba(15, 17, 21, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(31, 34, 40, 0.55);
  box-shadow: rgba(255, 255, 255, 0.04) 0 1px 0 0 inset, rgba(0, 0, 0, 0.25) 0 8px 30px -10px;
}
.glass-strong {
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.glass-top-glow { position: relative; }
.glass-top-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(224, 31, 31, 0.10), transparent 38%);
  pointer-events: none;
}

/* ---- Buttons ---- */
.btn-primary {
  background: linear-gradient(180deg, #EA2E2E 0%, #CC1919 100%);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  border-radius: 16px;
  box-shadow:
    rgba(255, 255, 255, 0.18) 0 1px 0 0 inset,
    rgba(0, 0, 0, 0.25) 0 -1px 0 0 inset,
    rgba(0, 0, 0, 0.15) 0 1px 0 0,
    rgba(227, 28, 28, 0.45) 0 12px 24px -8px,
    rgba(227, 28, 28, 0.35) 0 0 0 1px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border: none;
}
.btn-primary:hover {
  transform: translateY(-1px);
  color: #fff;
  box-shadow:
    rgba(255, 255, 255, 0.25) 0 1px 0 0 inset,
    rgba(0, 0, 0, 0.30) 0 -1px 0 0 inset,
    rgba(0, 0, 0, 0.20) 0 1px 0 0,
    rgba(227, 28, 28, 0.60) 0 16px 32px -8px,
    rgba(227, 28, 28, 0.45) 0 0 0 1px;
}

.btn-free {
  background: rgb(15, 17, 21) linear-gradient(180deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.06));
  color: #F3F4F6;
  border: 1px solid rgba(52, 211, 153, 0.40);
  border-radius: 9999px;
  box-shadow: rgba(18, 211, 147, 0.5) 0 8px 24px -12px, rgba(255, 255, 255, 0.08) 0 1px 0 0 inset;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.btn-free:hover {
  transform: translateY(-1px);
  border-color: rgba(52, 211, 153, 0.7);
  color: #F3F4F6;
}

.btn-ghost {
  color: #9AA0AC;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  transition: color 0.25s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  background: none;
  border: none;
}
.btn-ghost:hover { color: #F3F4F6; }

/* ---- Navbar ---- */
#navbar {
  transition: background 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    backdrop-filter 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
#navbar.scrolled {
  background: rgba(8, 9, 12, 0.75);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  border-bottom: 1px solid rgba(31, 34, 40, 0.6);
  box-shadow: rgba(255, 255, 255, 0.04) 0 1px 0 0 inset, rgba(0, 0, 0, 0.25) 0 8px 30px -10px;
}

/* ---- Mobile Menu ---- */
#mobile-menu {
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#mobile-menu.hidden-menu {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

/* ---- Desktop Dropdown Menus ---- */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  width: 16rem; /* w-64 */
  border-radius: 1rem; /* rounded-2xl */
  padding: 0.5rem; /* p-2 */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 50;
}
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---- Gradient Text ---- */
.text-gradient-red {
  background: linear-gradient(135deg, #F54747 0%, #FA784C 50%, #E42525 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- Eyebrow Badge ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 9999px;
  background: rgba(224, 31, 31, 0.08);
  border: 1px solid rgba(224, 31, 31, 0.20);
  color: rgba(224, 31, 31, 0.95);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
}
.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E01F1F;
  box-shadow: 0 0 8px rgba(224, 31, 31, 0.8);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* ---- Reveal Animation ---- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ---- Marquee ---- */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- Hero H1 ---- */
.hero-h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.045em;
}

/* ---- Card Hover ---- */
.card-hover {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.4s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(224, 31, 31, 0.45);
  box-shadow: rgba(255, 255, 255, 0.06) 0 1px 0 0 inset, rgba(227, 28, 28, 0.15) 0 12px 40px -10px;
}

/* ---- FAQ Accordion ---- */
.faq-item .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  opacity: 0;
}
.faq-item.open .faq-answer { max-height: 500px; opacity: 1; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }

/* ---- Hairline Decorations ---- */
.hairline-top {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(224, 31, 31, 0.35), transparent);
}
.section-line {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(31, 34, 40, 0.8), transparent);
}

/* ---- Stats ---- */
.stat-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  display: inline-block;
  line-height: 1.25;
  padding-bottom: 0.05em;
}

/* ---- Float Animation (dashboard mockups, floating stat chips) ---- */
.animate-float-slow {
  animation: float-y 6s ease-in-out infinite;
}
.float-delay-1 { animation-delay: 1s; }
.float-delay-2 { animation-delay: 2s; }
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ---- Icon Box ---- */
.icon-box {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(224, 31, 31, 0.18), rgba(224, 31, 31, 0.04));
  border: 1px solid rgba(224, 31, 31, 0.25);
}

/* ---- Brand Strip ---- */
.brand-strip {
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* ---- Form Inputs ---- */
.tv-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: rgba(8, 9, 12, 0.6);
  border: 1px solid var(--ink-700);
  color: #fff;
  font-size: 14px;
  transition: border-color 0.3s ease;
  outline: none;
  font-family: 'Inter', sans-serif;
}
.tv-input:focus { border-color: rgba(234, 46, 46, 0.5); }
.tv-input::placeholder { color: #6B7280; }
select.tv-input { appearance: none; cursor: pointer; }
select.tv-input option { background: var(--ink-950); }
textarea.tv-input { resize: none; }

/* ---- Policy Pages ---- */
.policy-body { line-height: 1.8; color: #C9D1D9; font-size: 15px; }
.policy-body p { margin-bottom: 1.25rem; }
.policy-body h2, .policy-body h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: #fff;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.policy-body ul { list-style: disc; margin-left: 1.5rem; margin-bottom: 1.25rem; }

/* ---- Pricing Card ---- */
.pricing-card {
  position: relative;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: rgba(227, 28, 28, 0.20) 0 20px 50px -15px;
}
.pricing-card.featured {
  border-color: rgba(224, 31, 31, 0.5);
}

/* ---- Skill Progress Bar ---- */
.skill-bar-bg {
  height: 8px;
  background: rgba(31, 34, 40, 0.8);
  border-radius: 4px;
  overflow: hidden;
}
.skill-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--brand-500), var(--ember));
  transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0;
}
.skill-bar-fill.animated { /* JS adds this class */ }

/* ---- Color Utility Classes ---- */
.bg-ink-950 { background-color: var(--ink-950); }
.bg-ink-900 { background-color: var(--ink-900); }
.bg-ink-850 { background-color: var(--ink-850); }
.bg-ink-800 { background-color: var(--ink-800); }
.bg-ink-700 { background-color: var(--ink-700); }
.text-brand-400 { color: var(--brand-400); }
.text-brand-500 { color: var(--brand-500); }
.text-brand-600 { color: var(--brand-600); }
.text-brand-700 { color: var(--brand-700); }
.bg-brand-500 { background-color: var(--brand-500); }
.text-ember { color: var(--ember); }
.bg-mint { background-color: var(--mint); }
.text-mint { color: var(--mint); }

/* ---- Tailwind-equivalent Utility Classes ---- */
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.scroll-smooth { scroll-behavior: smooth; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- WordPress Menu Fixes ---- */
.menu li { list-style: none; }
.menu a { text-decoration: none; color: #B0B8C4; transition: color 0.25s ease; }
.menu a:hover { color: #fff; }

/* ---- WP Admin Bar Fix ---- */
.admin-bar #navbar { top: 32px; }
@media (max-width: 782px) {
  .admin-bar #navbar { top: 46px; }
}

/* ---- Blog Pagination ---- */
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #B0B8C4;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}
.page-numbers:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.page-numbers.current { background: #E01F1F; border-color: #E01F1F; color: #fff; }
.page-numbers.dots { background: transparent; border: none; }

/* ---- Blog Single Post Content ---- */
.blog-content { line-height: 1.85; color: #C9D1D9; font-size: 16px; }
.blog-content p { margin-bottom: 1.5rem; }
.blog-content h2, .blog-content h3, .blog-content h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: #fff;
  margin-top: 2.25rem;
  margin-bottom: 1rem;
}
.blog-content h2 { font-size: 28px; }
.blog-content h3 { font-size: 22px; }
.blog-content ul, .blog-content ol { margin: 0 0 1.5rem 1.25rem; color: #C9D1D9; }
.blog-content ul { list-style: disc; }
.blog-content ol { list-style: decimal; }
.blog-content li { margin-bottom: 0.5rem; }
.blog-content a { color: #F54747; text-decoration: underline; text-underline-offset: 2px; }
.blog-content a:hover { color: #ff6b6b; }
.blog-content img { border-radius: 16px; margin: 2rem 0; }
.blog-content blockquote {
  border-left: 3px solid #E01F1F;
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: #B0B8C4;
}
.blog-content code {
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
}
.blog-content pre {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1.25rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}
.blog-content pre code { background: none; padding: 0; }