/* style.css - Chinh Extension Landing Page Stylesheet */

:root {
  --bg-primary: #030305;
  --bg-secondary: #090b11;
  --bg-card: rgba(15, 23, 42, 0.35);
  --border-card: rgba(255, 255, 255, 0.08);
  --color-primary: #3b82f6;
  --color-secondary: #60a5fa;
  --color-accent: #818cf8;
  --color-glow: rgba(59, 130, 246, 0.15);
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Global Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-primary);
  font-family: var(--font-family);
  color: var(--text-primary);
  overflow-x: hidden;
}

body {
  position: relative;
  overflow-x: hidden;
  line-height: 1.6;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.3);
}

/* Ambient Background Glow Elements */
.ambient-glow-1 {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, rgba(0, 0, 0, 0) 70%);
  top: -100px;
  right: -100px;
  z-index: -1;
  pointer-events: none;
  animation: floatGlow 15s infinite alternate ease-in-out;
}

.ambient-glow-2 {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
  top: 50%;
  left: -200px;
  z-index: -1;
  pointer-events: none;
  animation: floatGlow 20s infinite alternate-reverse ease-in-out;
}

.ambient-glow-3 {
  position: absolute;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
  bottom: 10%;
  right: -100px;
  z-index: -1;
  pointer-events: none;
  animation: floatGlow 18s infinite alternate ease-in-out;
}

@keyframes floatGlow {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(50px, 30px) scale(1.1); }
}

/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 40px;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(3, 3, 5, 0.7);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: var(--transition-smooth);
}

.navbar.scrolled {
  padding: 14px 40px;
  background: rgba(3, 3, 5, 0.85);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.nav-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav-brand img {
  height: 26px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(96, 165, 250, 0.3));
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  transition: var(--transition-smooth);
}

.nav-links a:hover {
  color: var(--color-secondary);
}

.nav-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.45);
}

.nav-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
}

.nav-btn:hover::before {
  left: 100%;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  background: var(--text-primary);
  transition: var(--transition-smooth);
}

/* Sections Base */
section {
  padding: 120px 8%;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

.section-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 60px auto;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-header p {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

/* Hero Section */
.hero {
  padding-top: 180px;
  min-height: 90vh;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-tag {
  align-self: flex-start;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: var(--color-secondary);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-tag span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-secondary);
  box-shadow: 0 0 8px var(--color-secondary);
  display: inline-block;
  animation: pulseGlow 1.5s infinite alternate;
}

@keyframes pulseGlow {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.3); opacity: 1; }
}

.hero h1 {
  font-size: 3.8rem;
  line-height: 1.15;
  font-weight: 800;
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}

.hero-desc {
  color: var(--text-secondary);
  font-size: 1.15rem;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: #ffffff;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(59, 130, 246, 0.35);
  transition: var(--transition-smooth);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.55);
}

/* Mock Browser Demo in Hero */
.hero-visual {
  display: flex;
  justify-content: center;
  position: relative;
}

.mock-browser {
  width: 100%;
  max-width: 500px;
  background: rgba(10, 11, 16, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(59, 130, 246, 0.1);
  overflow: hidden;
  position: relative;
}

.browser-header {
  height: 36px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 6px;
}

.browser-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
}

.browser-dot.red { background-color: #ef4444; }
.browser-dot.yellow { background-color: #f59e0b; }
.browser-dot.green { background-color: #10b981; }

.browser-bar {
  flex-grow: 1;
  height: 18px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  margin: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--text-muted);
}

.browser-content {
  padding: 24px;
  height: 320px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  position: relative;
}

.chat-bubble {
  padding: 12px 16px;
  border-radius: 12px;
  max-width: 85%;
  line-height: 1.5;
}

.chat-bubble.user {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
  align-self: flex-end;
  color: var(--text-primary);
}

.chat-bubble.ai {
  background: rgba(59, 130, 246, 0.03);
  border: 1px solid rgba(59, 130, 246, 0.08);
  align-self: flex-start;
}

/* Floating highlighting simulation */
.highlighted-text {
  background-color: rgba(59, 130, 246, 0.25);
  color: #fff;
  border-bottom: 2px solid var(--color-secondary);
  position: relative;
  cursor: pointer;
}

/* Injected Floating Pen Button */
.mock-float-btn {
  position: absolute;
  background: var(--color-primary);
  color: #fff;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
  z-index: 10;
  top: 154px;
  left: 202px;
  animation: floatPen 2s infinite alternate ease-in-out;
}

@keyframes floatPen {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-4px) scale(1.05); }
}

.mock-float-btn svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* Injected Mock Sidebar Note Panel */
.mock-sidebar {
  position: absolute;
  top: 36px;
  right: -180px;
  width: 170px;
  height: 320px;
  background: rgba(10, 11, 16, 0.97);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateX(180px);
}

.mock-sidebar.open {
  transform: translateX(0);
}

.mock-sidebar-header {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 8px;
  display: flex;
  justify-content: space-between;
}

.mock-sidebar-note {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 10px;
  font-size: 0.7rem;
  border-left: 3px solid #6366f1;
}

.mock-note-quote {
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-size: 0.65rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Features Grid Section */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 40px 30px;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(96, 165, 250, 0.3);
  background: rgba(15, 23, 42, 0.5);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(59, 130, 246, 0.08);
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.05) 0%, transparent 60%);
  pointer-events: none;
}

.feature-icon {
  width: 54px;
  height: 54px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
  transition: var(--transition-smooth);
}

.feature-card:hover .feature-icon {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  color: #fff;
  transform: scale(1.05);
}

.feature-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.feature-card h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.feature-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Interactive Playground Section */
.playground-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 50px;
  backdrop-filter: blur(16px);
  position: relative;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.playground-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.playground-left h3 {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.playground-left p {
  color: var(--text-secondary);
  font-size: 1.05rem;
}

.demo-chat-box {
  background: rgba(10, 11, 16, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  font-size: 0.88rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.demo-instruction {
  font-size: 0.85rem;
  color: var(--color-secondary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.demo-instruction span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-secondary);
  animation: pulseGlow 1.5s infinite alternate;
}

.demo-text-selector {
  line-height: 1.6;
  color: var(--text-primary);
}

.selectable-phrase {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: var(--transition-smooth);
  border-bottom: 2px dashed rgba(96, 165, 250, 0.4);
}

.selectable-phrase:hover {
  background: rgba(59, 130, 246, 0.15);
  border-bottom-color: var(--color-secondary);
}

.selectable-phrase.selected {
  background: rgba(59, 130, 246, 0.25);
  border-bottom: 2px solid var(--color-secondary);
}

/* Floating editor widget inside playground */
.playground-editor-popup {
  background: rgba(10, 10, 14, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 16px;
  display: none;
  flex-direction: column;
  gap: 12px;
  width: 280px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8);
  position: absolute;
  z-index: 100;
}

.playground-editor-popup textarea {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #fff;
  padding: 8px;
  font-size: 0.78rem;
  font-family: inherit;
  resize: none;
  height: 60px;
  outline: none;
}

.playground-editor-popup textarea:focus {
  border-color: var(--color-secondary);
}

.playground-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.playground-btn-save {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.playground-btn-cancel {
  background: transparent;
  color: var(--text-secondary);
  border: none;
  padding: 6px 12px;
  font-size: 0.75rem;
  cursor: pointer;
}

/* Playground Dashboard Side */
.playground-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.playground-db-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.demo-dashboard {
  background: rgba(10, 11, 16, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 24px;
  flex-grow: 1;
  height: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  position: relative;
}

.demo-db-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.demo-db-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 14px;
  font-size: 0.78rem;
  border-left: 3px solid var(--color-secondary);
  animation: cardSlideIn 0.3s ease-out;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.demo-db-card-quote {
  font-style: italic;
  color: var(--text-muted);
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  padding-left: 8px;
}

.demo-db-card-note {
  color: var(--text-primary);
  font-weight: 500;
}

.demo-db-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  gap: 10px;
  text-align: center;
}

.demo-db-empty svg {
  width: 40px;
  height: 40px;
  fill: currentColor;
}

/* Security & Privacy Section */
.security-container {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.security-content h3 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.security-content p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-bottom: 24px;
}

.security-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.security-list li {
  display: flex;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.security-list li svg {
  width: 20px;
  height: 20px;
  color: var(--color-secondary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Comparison Table */
.comparison-table-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 30px;
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
}

.comparison-table th, .comparison-table td {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.comparison-table th {
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.comparison-table td {
  color: var(--text-secondary);
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-table td.highlight {
  color: var(--color-secondary);
  font-weight: 600;
}

.status-good {
  color: #10b981 !important;
  font-weight: 600;
}

.status-bad {
  color: #f43f5e !important;
}

/* FAQ Section */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.faq-item:hover {
  border-color: rgba(96, 165, 250, 0.2);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  color: var(--text-primary);
  padding: 24px;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition-smooth);
}

.faq-question::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--text-secondary);
  transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
  transform: rotate(45deg);
  color: var(--color-secondary);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

.faq-item.active .faq-answer {
  max-height: 200px;
  padding: 0 24px 24px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.02);
}

/* Call to Action */
.cta-section {
  text-align: center;
  padding: 100px 8%;
  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
}

.cta-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 24px;
  padding: 80px 40px;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.cta-card h2 {
  font-size: 2.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta-card p {
  color: var(--text-secondary);
  font-size: 1.15rem;
  max-width: 550px;
}

/* Footer */
.footer {
  background: #020203;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding: 60px 8% 30px 8%;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}

.footer-logo img {
  height: 24px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(96, 165, 250, 0.3));
}

.footer-info p {
  line-height: 1.5;
}

.footer-links {
  display: flex;
  gap: 80px;
  flex-wrap: wrap;
}

.footer-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-group h4 {
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.footer-group ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-group a {
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.footer-group a:hover {
  color: var(--color-secondary);
}

.footer-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.02);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

/* Scroll Animation Reveal Classes */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered Children Reveal cascade */
.reveal-cascade > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-cascade.visible > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-cascade.visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-cascade.visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-cascade.visible > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-cascade.visible > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-cascade.visible > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-cascade.visible > *:nth-child(6) { transition-delay: 0.55s; }

/* Responsive Media Queries */
@media (max-width: 968px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 140px;
    gap: 60px;
  }
  .hero-tag {
    align-self: center;
  }
  .hero-actions {
    justify-content: center;
  }
  .playground-container {
    grid-template-columns: 1fr;
    padding: 30px;
  }
  .security-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .navbar {
    padding: 20px;
  }
  .navbar.scrolled {
    padding: 14px 20px;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(3, 3, 5, 0.95);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px 20px;
    gap: 24px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  }
  .nav-links.open {
    display: flex;
  }
  .menu-toggle {
    display: flex;
  }
  .menu-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }
  .menu-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 2.8rem;
  }
  .section-header h2 {
    font-size: 2rem;
  }
  .cta-card h2 {
    font-size: 2rem;
  }
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .hero-actions a {
    width: 100%;
    text-align: center;
  }
  .comparison-table th, .comparison-table td {
    padding: 12px 10px;
    font-size: 0.8rem;
  }
}

/* --- Premium Animations & Brand 3D Styling --- */

/* 3D Brand Text Style with dynamic light reflection */
.brand-text-3d {
  font-family: var(--font-family);
  font-weight: 800;
  color: #ffffff;
  display: inline-block;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #ffffff 40%, #a5cbf7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(59, 130, 246, 0.45));
  text-shadow: 
    0.5px 0.5px 0px rgba(59, 130, 246, 0.5),
    1px 1px 0px rgba(59, 130, 246, 0.4),
    1.5px 1.5px 0px rgba(59, 130, 246, 0.3),
    2px 2px 5px rgba(0, 0, 0, 0.5);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.4s ease, filter 0.4s ease;
  transform-style: preserve-3d;
}

.brand-text-3d:hover {
  transform: translateY(-2px) translateZ(10px) scale(1.05);
  filter: drop-shadow(0 4px 15px rgba(59, 130, 246, 0.7));
  text-shadow: 
    0.5px 0.5px 0px rgba(59, 130, 246, 0.6),
    1px 1px 0px rgba(59, 130, 246, 0.5),
    1.5px 1.5px 0px rgba(96, 165, 250, 0.4),
    2px 2px 0px rgba(96, 165, 250, 0.3),
    2.5px 2.5px 12px rgba(59, 130, 246, 0.8);
}

/* 3D Tilt container setup */
.tilt-3d {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
}

/* Floating animation for logo */
@keyframes floatLogo {
  0% {
    transform: translateY(0) rotate(0deg);
    filter: drop-shadow(0 10px 25px rgba(59, 130, 246, 0.4));
  }
  50% {
    transform: translateY(-12px) rotate(2.5deg);
    filter: drop-shadow(0 15px 35px rgba(59, 130, 246, 0.65));
  }
  100% {
    transform: translateY(0) rotate(0deg);
    filter: drop-shadow(0 10px 25px rgba(59, 130, 246, 0.4));
  }
}

/* Additional Micro-interaction for demo dashboard cards */
.demo-db-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.demo-db-card:hover {
  transform: translateX(4px) scale(1.01);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), 0 0 10px rgba(255, 255, 255, 0.02);
  background: rgba(255, 255, 255, 0.04);
}