/* ============================================
   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;
  /* svh tracks the viewport as mobile browser chrome hides and shows, so the
     hero does not jump on scroll. Ignored where unsupported. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 140px 24px 80px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--dark);

  /* The artwork is served as WebP: 47KB against 919KB for the PNG, with no
     visible loss on a dark graphic. The PNG stays as a first declaration so
     browsers without WebP still get a background. */
  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-static.png');

  --hero-art: url('../images/hero-bg-2026.webp');
  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%),
    var(--hero-art);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-canvas {
  display: 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(min(300px, 100%), 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(min(320px, 100%), 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(min(220px, 100%), 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;
  /* The 1.15 scale renders the card 15% wider than its box, so a plain
     max-width:400px overflowed once the card filled a narrow container.
     1 / 1.15 = 0.87, so capping at 87% leaves room for the transform. */
  max-width: min(400px, 87%);
  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(min(280px, 100%), 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(min(340px, 100%), 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(min(220px, 100%), 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(min(240px, 100%), 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(min(340px, 100%), 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;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
}
.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;
}

/* A .container nested inside another .container applied the 24px gutter
   twice, leaving the inner content 48px from each edge on a phone. */
.container .container { padding-left: 0; padding-right: 0; }

/* --- Hero artwork on narrow screens -------------------------------------
   The gold detail sits at the far left and right of the source; the middle is
   deliberately empty. `cover` on a tall, narrow screen scales to fill the
   height and crops roughly 77% of the width, so all that survives is the
   empty centre. Fitting the width keeps both halves of the artwork visible,
   with the background colour filling above and below. Smaller files go with
   the smaller canvas. */
@media (max-width: 768px) {
  .hero, .package-hero {
    --hero-art: url('../images/hero-bg-2026-sm.webp');
    /* 170% of the viewport width shows the middle ~59% of the artwork, which
       catches the inner part of both gold clusters instead of the empty
       centre. Because it is a percentage of the viewport, the framing stays
       the same from 320px up to 768px; only the band height changes. */
    background-size: cover, cover, 170% auto;
  }
}

@media (max-width: 480px) {
  .hero, .package-hero {
    --hero-art: url('../images/hero-bg-2026-xs.webp');
  }
}

/* --- Mobile horizontal overflow -----------------------------------------
   The decorative radial glows on these two sections are fixed-size boxes
   (600px and 800px) centred with translateX(-50%). Below roughly 600px they
   extend past the right edge of the viewport and make the whole document
   scroll sideways: page content sits to the left while the fixed navbar
   toggle and chat button stay pinned to the right of the screen.

   Clipping the section removes only the transparent tail of the gradient,
   so the effect is unchanged where there is room for it.

   Note: body { overflow-x: hidden } does NOT fix this. The overflow is on
   the html element, which is why that common workaround measured no change. */
.cta-section,
.page-header { overflow: hidden; }

/* A table cannot shrink below its minimum content width, so the comparison
   table in the guides and the pricing table in the posts both overflowed on
   phones. Tighter cells let them fit, and overflow-x is a safety net for any
   table that still cannot. .comparison-table is left alone: it already has
   its own mobile sizing and does not overflow. */
@media (max-width: 640px) {
  .post-body table,
  table.pricing-table,
  table.compare-table { display: block; overflow-x: auto; }
  .post-body table th, .post-body table td,
  table.pricing-table th, table.pricing-table td { padding: 8px 6px; font-size: 0.85rem; }

  /* Grid items default to min-width:auto, so a track will not shrink below its
     content and the item spills past the screen edge. The footer showed this
     first; the card grids do the same on the narrowest phones. */
  .footer-grid > *,
  .pricing-grid > *,
  .features-grid > *,
  .includes-grid > *,
  .values-grid > *,
  .blog-grid > * { min-width: 0; }

  /* Long unbroken strings (URLs, long feature names) set a min-content width
     that no amount of shrinking can beat. */
  .pricing-card,
  .glass-panel { overflow-wrap: break-word; }

  /* The footer email is a single ~195px token. min-width:0 lets the track
     shrink, but the token itself still sets a min-content floor -- and
     `break-word` does not lower that floor, only `anywhere` does. Without
     this the second footer column pushes past the edge on 360-390px phones. */
  .footer-grid a,
  .footer-brand a { overflow-wrap: anywhere; }

  /* The newsletter sign-up is a nowrap flex row. The button will not compress
     below its text width, so it was pushed past the right edge. Let the row
     wrap and give each control its own line. */
  .newsletter-form { flex-wrap: wrap; }
  .newsletter-form input,
  .newsletter-form .btn { flex: 1 1 100%; }
}

/* Two columns still fit at 320px now that the items can shrink, but the
   tracks are only ~124px there, which wraps the link text badly. One column
   below 360px; 375px and up keep the original two. */
@media (max-width: 359px) {
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Under Construction Banner */
.construction-banner{background:linear-gradient(90deg,#D4AF37,#e8c36a);color:#0A0E14;padding:12px 24px;text-align:center;font-weight:700;font-size:0.9rem;position:relative;z-index:1001}
.construction-banner a{color:#0A0E14;text-decoration:underline}


/* === Touch Target Fix — WCAG 2.1 AA (44×44px minimum) === */
/* Applied 2026-08-31 by DaedalusDev for task t_e1117981 */

/* Footer social icons — were 36×36, now 44×44 */
.footer-social a {
  width: 44px;
  height: 44px;
}

/* Mobile toggle button — no size was set */
.mobile-toggle {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Navbar CTA button */
.navbar-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Desktop nav links */
.navbar-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 0;
  min-width: 44px;
}

/* Dropdown menu links */
.dropdown-menu a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Filter pills (blog page) */
.filter-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* FAQ summary elements */
.faq-item summary {
  min-height: 44px;
  padding: 12px 0;
}

/* Newsletter form controls */
.newsletter-form input {
  min-height: 44px;
}
.newsletter-form .btn {
  min-height: 44px;
}

/* Portfolio link */
.portfolio-link a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
}

/* Blog meta links */
.blog-meta a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Knowledge base article items */
.kb-article-item {
  min-height: 44px;
}

/* Comparison table — mobile sizing */
@media (max-width: 768px) {
  .comparison-table th,
  .comparison-table td {
    padding: 12px 10px;
    min-height: 44px;
  }
}

/* Guide/post body links */
.post-body a,
.guide-content a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
}

/* Sitemap links */
.sitemap-list a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 0;
}

/* Package page CTA buttons */
.package-hero .btn {
  min-height: 44px;
}


/* Navbar logo — was 36px tall */
.navbar-logo {
  min-height: 44px;
}

/* Cookie banner links */
.cookie-banner a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
}

/* Contact method email link */
.contact-methods .method-value a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--gold);
  color: var(--dark);
  padding: 12px 24px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 10000;
  font-weight: 700;
  font-size: 0.9rem;
  transition: top 0.2s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.skip-link:focus {
  top: 0;
  color: var(--dark);
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Copyright link */
.copyright-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* All form inputs — catch any that slipped through */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="color"] {
  min-height: 44px;
}

/* Footer column links — were ~24px height, need 44px minimum */
.footer-col ul a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 0;
}

/* All CTA buttons — padding gives ~43px, enforce 44px minimum */
.btn {
  min-height: 44px;
}

/* Contact form submit button */
.contact-form .btn {
  min-height: 44px;
}

/* Contact form email link (inline styled) */
.contact-section .hero-buttons .btn {
  min-height: 44px;
}

/* Legal/info page content links */
.legal-content a,
.privacy-content a,
.terms-content a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
}

/* Sitemap page links */
.sitemap-section a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 0;
}

/* Knowledge base sidebar links */
.kb-sidebar-card a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 8px 0;
}

/* Blog card links */
.blog-card a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Portfolio card links */
.portfolio-card a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Pricing features list items — ensure touch-friendly */
.pricing-features li {
  min-height: 44px;
}

/* Contact methods list items */
.contact-methods li {
  min-height: 44px;
}

/* Footer bottom links */
.footer-bottom a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Construction banner link */
.construction-banner a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
}

/* Pricing card links (non-button) */
.pricing-card a:not(.btn) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}