/* ============================================
   Daedalus Design — Professional Website + AI Assistant
   Dark theme with gold accents
   ============================================ */

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

:root {
  --dark:        #0A0E14;
  --dark-blue:   #1a365d;
  --dark-surface:#111827;
  --dark-card:   #1a2332;
  --gold:        #D4AF37;
  --gold-dim:    rgba(212,175,55,0.15);
  --gold-glow:   rgba(212,175,55,0.3);
  --white:       #f0f0f0;
  --grey:        #9ca3af;
  --grey-light:  #d1d5db;
  --green:       #10b981;
  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;
  --radius:      12px;
  --radius-sm:   8px;
  --max-w:       1200px;
  --transition:  0.3s ease;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--dark);
  color: var(--white);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; transition: color var(--transition); }
a:hover { color: #e8c36a; }

img { max-width: 100%; height: auto; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

/* --- Premium Utilities --- */
.bg-constellation {
  background-color: var(--dark);
  background-image: 
    radial-gradient(circle at 15% 50%, rgba(212,175,55,0.05) 0%, transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(212,175,55,0.08) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L30 60M0 30L60 30' stroke='rgba(212,175,55,0.04)' stroke-width='1' fill='none'/%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(212,175,55,0.2)'/%3E%3C/svg%3E");
}

.glass-panel {
  background: rgba(10,14,20,0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(212,175,55,0.15);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); }

.section-label {
  display: inline-block;
  background: var(--gold-dim);
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}

.section-title { margin-bottom: 16px; }
.section-subtitle { color: var(--grey); font-size: 1.1rem; max-width: 600px; }

.text-gold { color: var(--gold); }
.text-center { text-align: center; }
.text-center .section-subtitle { margin: 0 auto 48px; }

/* --- Navigation --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(10,14,20,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(212,175,55,0.15);
  transition: background var(--transition);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: 70px;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.5px;
}

.navbar-logo img.logo-img {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.4));
}

.navbar-logo .logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--gold), #b8912e);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--dark);
  font-weight: 900;
}

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

.navbar-links a {
  color: var(--grey);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--transition);
}

.navbar-links a:hover, .navbar-links a[aria-current="page"] { color: var(--gold); }

.navbar-cta {
  background: var(--gold);
  color: var(--dark) !important;
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
  transition: transform var(--transition), box-shadow var(--transition);
}

.navbar-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px var(--gold-glow);
}

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
}

/* --- Dropdown Navigation --- */
.dropdown {
  position: relative;
}

.dropdown-toggle::after {
  content: '▼';
  font-size: 0.6rem;
  margin-left: 6px;
  display: inline-block;
  transition: transform var(--transition);
}

.dropdown:hover .dropdown-toggle::after,
.dropdown.open .dropdown-toggle::after {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--dark-surface);
  border: 1px solid rgba(212,168,67,0.2);
  border-radius: var(--radius-sm);
  padding: 8px 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition);
  z-index: 999;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}

.dropdown:hover .dropdown-menu,
.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dropdown-menu a {
  display: block;
  padding: 10px 20px;
  color: var(--grey);
  font-size: 0.9rem;
  font-weight: 500;
}

.dropdown-menu a:hover {
  color: var(--gold);
  background: rgba(212,175,55,0.05);
}

.dropdown-menu a[aria-current="page"] {
  color: var(--gold);
}

.hero, .package-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 24px 80px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--dark);
  background-image: 
    radial-gradient(circle at 50% 30%, rgba(212,175,55,0.08) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(26,54,93,0.35) 0%, transparent 50%),
    url('../images/hero-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-cinematic, .package-hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: center;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
}

@media (max-width: 992px) {
  .hero-cinematic {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.hero-content {
  padding: 48px;
  text-align: center;
  margin: 0 auto;
  max-width: 860px;
  position: relative;
  z-index: 2;
}

.hero-content .hero-buttons {
  justify-content: center;
}

.hero-content .social-proof {
  justify-content: center;
  margin-top: 40px;
}

@media (max-width: 992px) {
  .hero-content {
    padding: 32px;
    text-align: center;
  }
  .hero-content .hero-buttons,
  .hero-content .social-proof {
    justify-content: center;
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold-dim);
  border: 1px solid rgba(212,168,67,0.3);
  color: var(--gold);
  padding: 8px 20px;
  border-radius: 24px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 28px;
  letter-spacing: 0.5px;
}

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  margin-bottom: 24px;
  letter-spacing: -1px;
  /* The hero panel caps at 860px, which breaks the headline after "can" and
     leaves it dangling. Balancing evens the lines out without forcing a break,
     so narrow viewports still reflow freely. */
  text-wrap: balance;
}

.hero h1 .gradient-text {
  background: linear-gradient(135deg, var(--gold), #e8c36a, var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  font-size: 1.2rem;
  color: var(--grey);
  max-width: 640px;
  margin: 0 auto 40px;
  line-height: 1.8;
}

.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}

.btn-primary {
  background: var(--gold);
  color: var(--dark);
}

.btn-primary:hover {
  background: #e8c36a;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--gold-glow);
  color: var(--dark);
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.2);
}

.btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* --- Social Proof Bar --- */
.social-proof {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 48px;
}

.proof-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--grey);
  font-size: 0.85rem;
}

.proof-item .icon { font-size: 1.1rem; }

/* --- Features Section --- */
.features {
  padding: 100px 0;
  background: var(--dark-surface);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.feature-card {
  background: rgba(10,14,20,0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(212,175,55,0.15);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  border-radius: var(--radius);
  padding: 36px;
  transition: all var(--transition);
}

.feature-card:hover {
  border-color: rgba(212,168,67,0.2);
  transform: translateY(-4px);
}

.feature-icon {
  width: 52px;
  height: 52px;
  background: var(--gold-dim);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.feature-card h3 { margin-bottom: 12px; font-size: 1.15rem; }
.feature-card p { color: var(--grey); font-size: 0.95rem; }

/* --- Pricing Section --- */
.pricing {
  padding: 100px 0;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  align-items: start;
}

.pricing-card {
  background: rgba(10,14,20,0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(212,175,55,0.15);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  border-radius: var(--radius);
  padding: 40px 32px;
  position: relative;
  transition: all var(--transition);
}

.pricing-card:hover {
  border-color: rgba(212,168,67,0.2);
  transform: translateY(-4px);
}

.pricing-card.featured {
  border-color: var(--gold);
  box-shadow: 0 0 40px rgba(212,168,67,0.1);
}

.pricing-card.featured::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--dark);
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1px;
}

.pricing-tier {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold);
  margin-bottom: 8px;
}

.pricing-card h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.pricing-price {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 4px;
}

.pricing-price .currency { font-size: 1.5rem; vertical-align: top; }
.pricing-price .period { font-size: 0.9rem; color: var(--grey); font-weight: 400; }

.pricing-subtitle {
  color: var(--grey);
  font-size: 0.85rem;
  margin-bottom: 28px;
}

.pricing-features {
  list-style: none;
  margin-bottom: 32px;
}

.pricing-features li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--grey-light);
}

.pricing-features li:last-child { border-bottom: none; }

.pricing-features .check { color: var(--green); font-weight: bold; }

.pricing-card .btn { width: 100%; justify-content: center; }

/* --- How It Works --- */
.how-it-works {
  padding: 100px 0;
  background: var(--dark-surface);
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin-top: 48px;
}

.step {
  text-align: center;
  position: relative;
}

.step-number {
  width: 48px;
  height: 48px;
  background: var(--gold-dim);
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gold);
  margin: 0 auto 16px;
}

.step h4 { margin-bottom: 8px; font-size: 1rem; }
.step p { color: var(--grey); font-size: 0.9rem; }

.step.step-highlighted {
  grid-column: 1 / -1;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  transform: scale(1.15);
  background: rgba(212, 175, 55, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 16px;
  padding: 24px 16px;
  margin-top: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.step-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--black);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 12px;
  white-space: nowrap;
}

/* --- Comparison Table --- */
.comparison {
  padding: 100px 0;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 48px;
  font-size: 0.9rem;
}

.comparison-table th,
.comparison-table td {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.comparison-table th {
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1px;
}

.comparison-table td { color: var(--grey-light); }
.comparison-table tr:hover td { color: var(--white); }
.comparison-table .check-col { text-align: center; }

/* --- About Section --- */
.about-section {
  padding: 100px 0;
  background: var(--dark-surface);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-content h2 { margin-bottom: 20px; }
.about-content p { color: var(--grey); margin-bottom: 16px; }

.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 32px;
}

.value-item {
  background: var(--dark-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  padding: 24px;
}

.value-item .icon { font-size: 1.5rem; margin-bottom: 8px; }
.value-item h4 { font-size: 0.95rem; margin-bottom: 6px; }
.value-item p { font-size: 0.85rem; color: var(--grey); margin: 0; }

/* --- Tech Stack --- */
.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.tech-tag {
  background: var(--dark-card);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--grey-light);
  font-family: var(--font-mono);
}

/* --- Contact Section --- */
.contact-section {
  padding: 100px 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.contact-info h2 { margin-bottom: 20px; }
.contact-info p { color: var(--grey); margin-bottom: 24px; }

.contact-methods { list-style: none; }

.contact-methods li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.contact-methods .method-icon {
  width: 44px;
  height: 44px;
  background: var(--gold-dim);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.contact-methods .method-label {
  font-size: 0.8rem;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.contact-methods .method-value {
  font-size: 1rem;
  color: var(--white);
  font-weight: 500;
}

/* Contact Form */
.contact-form {
  background: var(--dark-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 40px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--grey-light);
  margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--font);
  font-size: 0.95rem;
  transition: border-color var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.form-group textarea { resize: vertical; min-height: 120px; }

.form-group select option {
  background: var(--dark);
  color: var(--white);
}

/* --- CTA Section --- */
.cta-section {
  padding: 100px 0;
  text-align: center;
  background: var(--dark-surface);
  position: relative;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(212,168,67,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.cta-section h2 { margin-bottom: 16px; }
.cta-section p { color: var(--grey); max-width: 500px; margin: 0 auto 32px; }

/* --- Footer --- */
.footer {
  padding: 60px 0 30px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2.2fr repeat(4, 1fr);
  gap: 36px;
  margin-bottom: 40px;
}

.footer-brand p { color: var(--grey); font-size: 0.9rem; margin-top: 12px; }

.footer-col h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold);
  margin-bottom: 16px;
}

.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul a { color: var(--grey); font-size: 0.9rem; }
.footer-col ul a:hover { color: var(--white); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.8rem;
  color: var(--grey);
}

.footer-social {
  display: flex;
  gap: 16px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  background: var(--dark-card);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey);
  transition: all var(--transition);
}

.footer-social a:hover {
  background: var(--gold-dim);
  color: var(--gold);
}

/* --- Page Header (inner pages) --- */
.page-header {
  padding: 140px 0 60px;
  text-align: center;
  background: var(--dark-surface);
  position: relative;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(26,54,93,0.3) 0%, transparent 70%);
  pointer-events: none;
}

.page-header h1 { margin-bottom: 16px; }
.page-header p { color: var(--grey); max-width: 600px; margin: 0 auto; font-size: 1.1rem; }

/* --- Package Detail Page --- */
.package-hero {
  padding: 140px 0 60px;
  background: var(--dark-surface);
  position: relative;
  text-align: center;
}

.package-hero-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.package-hero .section-label { margin-bottom: 12px; }
.package-hero h1 { margin-bottom: 16px; }
.package-hero p { color: var(--grey); font-size: 1.1rem; margin-bottom: 24px; margin-left: auto; margin-right: auto; }

.package-price-bar {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}

.package-hero .hero-buttons {
  justify-content: center;
}

.package-price-bar .price {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--gold);
}

.package-price-bar .period {
  color: var(--grey);
  font-size: 1rem;
}

.package-includes {
  padding: 80px 0;
}

.includes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.include-card {
  background: var(--dark-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 28px;
}

.include-card .icon {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.include-card h4 { margin-bottom: 8px; }
.include-card p { color: var(--grey); font-size: 0.9rem; }

/* --- FAQ --- */
.faq {
  padding: 80px 0;
  background: var(--dark-surface);
}

.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 20px 0;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  color: var(--white);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-item summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--gold);
  transition: transform var(--transition);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin-top: 12px;
  color: var(--grey);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .navbar-links { display: none; }
  .mobile-toggle { display: block; }

  .navbar-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--dark-surface);
    padding: 24px;
    border-bottom: 1px solid rgba(212,168,67,0.1);
    gap: 16px;
  }

  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: var(--dark);
    border: 1px solid rgba(255,255,255,0.06);
    margin-top: 8px;
  }

  .dropdown-menu a {
    padding: 10px 20px;
  }

  .hero { min-height: auto; padding: 120px 24px 60px; }
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 1rem; }

  .features-grid,
  .pricing-grid,
  .includes-grid { grid-template-columns: 1fr; }

  .about-grid,
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }

  .values-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }

  .comparison-table { font-size: 0.8rem; }
  .comparison-table th, .comparison-table td { padding: 10px 12px; }

  .steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .steps { grid-template-columns: 1fr; }
  .social-proof { gap: 20px; }
}

@media (max-width: 380px) {
  .hero-content {
    padding: 24px 16px;
  }
  .hero h1 {
    font-size: 1.75rem;
  }
  .hero p {
    font-size: 0.95rem;
    margin-bottom: 24px;
  }
  .hero-buttons {
    flex-direction: column;
    gap: 12px;
  }
  .btn {
    width: 100%;
    justify-content: center;
  }
  .social-proof {
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }
  .hero-badge {
    padding: 6px 12px;
    font-size: 0.75rem;
    margin-bottom: 20px;
  }
}

/* --- Animations --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-in {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

.animate-in:nth-child(2) { animation-delay: 0.1s; }
.animate-in:nth-child(3) { animation-delay: 0.2s; }
.animate-in:nth-child(4) { animation-delay: 0.3s; }

/* --- Scroll animations --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* ============================================
   Blog & Insights Components
   ============================================ */
.blog-hero {
  padding: 140px 0 60px;
  text-align: center;
  position: relative;
}

.blog-filters {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 36px 0;
}

.filter-pill {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(212,175,55,0.15);
  color: var(--grey-light);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.filter-pill:hover,
.filter-pill.active {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 16px var(--gold-glow);
}

.featured-article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 40px;
  background: rgba(10,14,20,0.6);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: var(--radius);
  margin-bottom: 60px;
  align-items: center;
}

.featured-content h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin: 12px 0 16px;
  line-height: 1.3;
}

.featured-content p {
  color: var(--grey);
  margin-bottom: 24px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 32px;
  margin-bottom: 80px;
}

.blog-card {
  background: rgba(10,14,20,0.5);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(212,175,55,0.15);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition);
}

.blog-card:hover {
  border-color: var(--gold);
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(212,175,55,0.15);
}

.blog-tag {
  display: inline-block;
  background: var(--gold-dim);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 16px;
  width: fit-content;
}

.blog-card h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
  line-height: 1.4;
}

.blog-card p {
  color: var(--grey);
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.blog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--grey);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 16px;
}

.newsletter-box {
  background: linear-gradient(135deg, rgba(26,54,93,0.4), rgba(10,14,20,0.8));
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 50px 30px;
  text-align: center;
  margin-bottom: 80px;
  box-shadow: 0 0 40px rgba(212,175,55,0.1);
}

.newsletter-box h3 {
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.newsletter-form {
  display: flex;
  max-width: 500px;
  margin: 24px auto 0;
  gap: 12px;
}

.newsletter-form input {
  flex: 1;
  padding: 14px 20px;
  background: var(--dark);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: var(--radius-sm);
  color: var(--white);
}

/* ============================================
   Knowledge Base Components
   ============================================ */
.kb-hero {
  padding: 140px 0 70px;
  text-align: center;
  position: relative;
}

.kb-hero .section-subtitle {
  margin: 0 auto;
  text-align: center;
}

.kb-search-container {
  max-width: 680px;
  margin: 36px auto 0;
  position: relative;
}

.kb-search-input {
  width: 100%;
  padding: 18px 24px 18px 56px;
  background: rgba(17,24,39,0.9);
  border: 2px solid rgba(212,175,55,0.3);
  border-radius: 50px;
  color: var(--white);
  font-size: 1.05rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  transition: all var(--transition);
}

.kb-search-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 24px var(--gold-glow);
}

.kb-search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--gold);
  pointer-events: none;
}

.kb-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin: 60px 0;
}

.kb-cat-card {
  background: rgba(10,14,20,0.5);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(212,175,55,0.15);
  border-radius: var(--radius);
  padding: 30px 24px;
  text-align: center;
  transition: all var(--transition);
}

.kb-cat-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(212,175,55,0.15);
}

.kb-cat-icon {
  width: 56px;
  height: 56px;
  background: var(--gold-dim);
  border: 1px solid var(--gold);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 16px;
  color: var(--gold);
}

.kb-cat-card h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.kb-cat-card p {
  color: var(--grey);
  font-size: 0.85rem;
}

.kb-articles-section {
  padding: 60px 0;
}

.kb-articles-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}

.kb-article-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kb-article-item {
  background: rgba(17,24,39,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all var(--transition);
}

.kb-article-item:hover {
  border-color: var(--gold);
  background: rgba(212,175,55,0.05);
  transform: translateX(6px);
}

.kb-article-title {
  font-weight: 600;
  color: var(--white);
}

.kb-article-meta {
  font-size: 0.8rem;
  color: var(--grey);
  margin-top: 4px;
}

.kb-sidebar-card {
  background: rgba(10,14,20,0.6);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: var(--radius);
  padding: 28px;
}

.kb-sidebar-card h4 {
  color: var(--gold);
  margin-bottom: 16px;
  font-size: 1.1rem;
}

.kb-sidebar-card ul {
  list-style: none;
}

.kb-sidebar-card ul li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .featured-article { grid-template-columns: 1fr; }
  .kb-articles-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* --- Portfolio Teaser --- */
.portfolio-teaser {
  padding: 100px 0;
  background: var(--dark-surface);
}

.portfolio-teaser .section-title {
  max-width: 600px;
  margin: 0 auto 16px;
}

.portfolio-teaser .section-subtitle {
  max-width: 600px;
  margin: 0 auto 48px;
}

.portfolio-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  max-width: 800px;
  margin: 0 auto 40px;
}

.portfolio-preview-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  text-align: center;
  border-radius: var(--radius);
  background: rgba(10,14,20,0.4);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  transition: all var(--transition);
}

.portfolio-preview-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212,168,67,0.2);
}

.portfolio-thumb {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
}

.portfolio-label {
  font-size: 0.8rem;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- Portfolio Grid --- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.portfolio-card {
  background: rgba(10,14,20,0.4);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  overflow: hidden;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  transition: all var(--transition);
}

.portfolio-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212,168,67,0.2);
}

.portfolio-preview {
  position: relative;
  height: 200px;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.portfolio-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--gold-dim);
  color: var(--gold);
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.portfolio-content {
  padding: 28px;
}

.portfolio-content h3 {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.portfolio-category {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.portfolio-description {
  color: var(--grey);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.portfolio-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.portfolio-type {
  color: var(--grey);
  font-size: 0.8rem;
}

.portfolio-link a {
  color: var(--gold);
  font-weight: 600;
}

@media (max-width: 768px) {
  .portfolio-preview-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* --- Legal & Cookie Banner --- */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(10,14,20,0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(212,175,55,0.2);
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
}
.cookie-banner.visible {
  transform: translateY(0);
}
.cookie-banner p {
  color: var(--grey-light);
  font-size: 0.9rem;
  margin: 0;
  max-width: 800px;
}
.cookie-banner a {
  color: var(--gold);
  text-decoration: underline;
}
.cookie-banner-actions {
  display: flex;
  gap: 12px;
}
@media (max-width: 768px) {
  .cookie-banner {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 20px;
  }
}
.copyright-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.copyright-link:hover {
  color: var(--gold);
}

/* Portfolio teaser screenshots — added with the SingularityAI.uk launch.
   Fixed aspect ratio keeps the three cards aligned regardless of the source
   screenshot dimensions; top-left origin keeps each site's masthead visible
   rather than centring on empty hero space. */
.portfolio-shot {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
}

/* --- Mobile package sub-menu ---------------------------------------------
   The earlier mobile rule pinned .dropdown-menu open (position:static with
   visibility:visible), so all three package links were permanently on show
   rather than behaving as a dropdown.

   Toggled with `display` rather than an animated max-height, matching how
   .navbar-links itself opens. A height transition leaves the menu stuck at
   its start value in any environment that freezes transitions, which is a
   silent failure; display has no intermediate state to get stuck in.        */
@media (max-width: 768px) {
  .navbar-links.open .dropdown-menu {
    display: none;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: var(--dark);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    margin-top: 8px;
    padding: 8px 0;
    transition: none;
  }

  .navbar-links.open .dropdown.open .dropdown-menu {
    display: block;
  }

  /* The caret signals that this expands — keep it visible on mobile. */
  .navbar-links.open .dropdown-toggle::after { display: inline-block; }
}

/* Portfolio teaser screenshots. All sources are 1280x800, so a 16:10 box shows
   them whole; contain rather than cover so an odd-sized future screenshot
   letterboxes instead of losing its edges. */
.portfolio-preview-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: contain;
  background: #0A0E14;
  display: block;
  border-radius: 12px 12px 0 0;
}

/* Portfolio card thumbnails.
   .portfolio-preview was locked to height:200px with overflow:visible, so a
   16:10 screenshot rendered ~396px tall, spilled out of the card and pushed the
   page into horizontal scroll. The box now carries the aspect ratio itself and
   the image fills it exactly, so nothing overflows and nothing is cropped. */
.portfolio-preview {
  height: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: block;
  position: relative;
}

.portfolio-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0A0E14;
  display: block;
}

/* Keep the category chip above the screenshot. */
.portfolio-preview .portfolio-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}