/* Fx Cobra X Neon Theme - Modern UI/UX, Responsive, Accessible */
/* Design tokens */
:root {
  --bg: #0a0f1f;
  --bg-2: #0e162e;
  --text: #e6f0ff;
  --muted: #b8c4d9;
  --neon-1: #00f5ff; /* cyan */
  --neon-2: #8a2be2; /* electric purple */
  --neon-3: #ff3cac; /* magenta */
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --shadow: 0 10px 30px rgba(0, 245, 255, 0.18);
  --radius: 14px;
  --ring: 0 0 0 3px rgba(138, 43, 226, 0.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(255, 60, 172, 0.15), transparent) ,
              radial-gradient(900px 500px at 100% 0%, rgba(0, 245, 255, 0.12), transparent),
              linear-gradient(180deg, var(--bg), var(--bg-2));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  line-height: 1.6;
}

/* Accessibility: focus visible */
:where(a, button, [tabindex="0"]) { outline: none; }
:where(a, button, [tabindex="0"]):focus-visible { box-shadow: var(--ring); border-radius: 8px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(10, 15, 31, 0.65);
  border-bottom: 1px solid rgba(138, 43, 226, 0.35);
}
.header-inner { max-width: 1200px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.brand-logo { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; background: transparent; box-shadow: 0 0 8px rgba(0,0,0,0.25); }
.brand-title { font-weight: 700; letter-spacing: 0.4px; }

.nav { display: flex; gap: 14px; align-items: center; }
.nav a { color: var(--text); text-decoration: none; padding: 8px 12px; border-radius: 10px; transition: all .25s ease; }
.nav a:hover { background: rgba(138, 43, 226, 0.18); box-shadow: 0 0 18px rgba(138, 43, 226, 0.4); transform: translateY(-1px); }
.nav .active { background: rgba(0, 245, 255, 0.18); box-shadow: 0 0 18px rgba(0, 245, 255, 0.35); }

.skip-link { position: absolute; left: -999px; top: -999px; }
.skip-link:focus { left: 12px; top: 12px; background: var(--bg-2); color: var(--text); padding: 10px 12px; border-radius: 10px; box-shadow: var(--ring); }

/* Breadcrumbs */
.breadcrumbs { max-width: 1200px; margin: 0 auto; padding: 10px 20px; font-size: 0.95rem; color: var(--muted); }
.breadcrumbs a { color: var(--neon-1); text-decoration: none; }
.breadcrumbs .sep { margin: 0 8px; opacity: 0.6; }

/* Layout */
.container { max-width: 1200px; margin: 0 auto; padding: 24px 20px; }
.page-title { font-size: 2rem; margin: 10px 0 18px; text-shadow: 0 0 12px rgba(0, 245, 255, 0.25); }

/* Modern detail page layout */
.modern-page { padding-top: 8px; }
.hero { background: linear-gradient(135deg, rgba(138, 43, 226, 0.16), rgba(0, 245, 255, 0.10)); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.hero .subtitle { color: var(--muted); margin-top: 6px; }
.section-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 18px; }
.section-nav a { color: var(--text); text-decoration: none; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); transition: all .25s ease; }
.section-nav a:hover { background: rgba(0, 245, 255, 0.12); box-shadow: 0 0 14px rgba(0, 245, 255, 0.28); transform: translateY(-1px); }
.section-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin: 16px 0; }
.section-card h2 { margin-top: 0; }
.single-card { max-width: 900px; margin: 22px auto; }
.content-wrap { background: #fff; color: #111; border-radius: var(--radius); border: 1px solid rgba(16,24,40,0.12); box-shadow: 0 10px 30px rgba(0,0,0,0.12); padding: 22px; }
.content-wrap .subtitle { color: #3f4550; margin-top: 6px; }
.panel { background: linear-gradient(180deg, rgba(16,24,40,0.03), rgba(16,24,40,0.02)); border: 1px solid rgba(16,24,40,0.06); border-left: 4px solid var(--neon-2); border-radius: 12px; padding: 12px 14px; margin: 16px 0; }
.panel h2 { margin-top: 0; color: #111; }
.content-wrap a { color: #0ea5e9; text-decoration: none; }
.content-wrap a:hover { text-decoration: underline; }

/* Polished single-card look */
.section-card.single-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  padding: 22px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.single-card .page-title {
  text-align: center;
  margin: 0 0 14px;
  text-shadow: 0 0 8px rgba(0,245,255,0.18);
}

.single-card h2 {
  margin: 20px 0 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.single-card p {
  color: var(--muted);
}

.single-card ul.features {
  list-style: disc;
  padding-left: 18px;
}

.single-card ul.features li {
  padding: 4px 0;
  margin: 4px 0;
}

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
  transform: perspective(800px) translateZ(0); transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: perspective(800px) translateZ(14px) rotateX(1deg); box-shadow: 0 16px 40px rgba(255, 60, 172, 0.18), 0 6px 20px rgba(0, 245, 255, 0.15); }
.card h3 { margin: 0 0 10px; font-size: 1.2rem; }
.card p { margin: 0 0 12px; color: var(--muted); }
.card a { display: inline-block; margin-top: 8px; color: var(--neon-1); text-decoration: none; }
.card a:hover { text-decoration: underline; }

/* Feature lists on detail pages (simplified bullets, no card background) */
.features { list-style: disc; padding-left: 18px; margin: 8px 0 12px; }
.features li { background: none; border: none; padding: 4px 0; margin: 4px 0; }
.section-card ul.features { list-style: disc; padding-left: 18px; }
.section-card ul.features li { background: none; border: none; padding: 4px 0; margin: 4px 0; }
.content-wrap ul.features { list-style: disc; padding-left: 18px; margin: 8px 0 12px; }
.content-wrap ul.features li { background: none; border: none; padding: 4px 0; margin: 4px 0; color: #111; }

.print-btn { appearance: none; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(135deg, rgba(0, 245, 255, 0.18), rgba(138, 43, 226, 0.18)); color: var(--text); padding: 10px 14px; border-radius: 12px; cursor: pointer; transition: all .25s ease; }
.print-btn:hover { box-shadow: 0 0 18px rgba(0, 245, 255, 0.35); transform: translateY(-1px); }

/* Footer */
.site-footer { margin-top: 40px; border-top: 1px solid rgba(255,255,255,0.08); background: rgba(10, 15, 31, 0.6); }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 20px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; font-size: 0.95rem; }
.footer-links a { color: var(--muted); text-decoration: none; margin-right: 12px; }
.footer-links a:hover { color: var(--neon-1); }

/* Top progress bar & loading overlay */
.progress-bar { position: fixed; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--neon-3), var(--neon-2), var(--neon-1)); z-index: 100; transition: width .3s ease; }
.loading-overlay { position: fixed; inset: 0; background: rgba(10, 15, 31, 0.5); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 90; }
.loading-overlay.active { display: flex; }
.spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(138, 43, 226, 0.35); border-top-color: var(--neon-1); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Page transitions */
.fade-enter { opacity: 0; transform: translateY(6px); }
.fade-enter-active { opacity: 1; transform: translateY(0); transition: opacity .3s ease, transform .3s ease; }
.fade-exit { opacity: 1; }
.fade-exit-active { opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; }

/* Responsive */
@media (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .header-inner { padding: 12px 14px; }
  .nav { flex-wrap: wrap; gap: 8px; }
  .card-grid { grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Print */
@media print {
  body { background: white; color: #111; }
  .site-header, .site-footer, .progress-bar, .loading-overlay { display: none !important; }
}

/* Compatibility: legacy printable pages use a white content container (.page).
   Ensure text is dark on white and restore classic list bullets for readability. */
.page {
  background: #fff !important;
  color: #111 !important;
}
.page h1, .page h2, .page h3, .page h4, .page h5, .page h6,
.page p, .page li, .page dt, .page dd, .page span, .page strong, .page em, .page small,
.page table, .page th, .page td {
  color: #111 !important;
}
.page a { color: #0ea5e9 !important; }
.page a:hover { text-decoration: underline; }

/* Restore bullet lists inside legacy .page content */
.page ul.features { list-style: disc !important; padding-left: 18px !important; margin: 6px 0 10px !important; }
.page ul.features li {
  background: none !important;
  border: none !important;
  padding: 4px 0 !important;
  margin: 4px 0 !important;
}

/* Hide legacy printable chrome when modernizing */
.brand-bar, .letterhead, .footer { display: none !important; }

/* Hide breadcrumbs per request */
.breadcrumbs { display: none !important; }

/* Landing page */
.landing-hero { 
  display: flex; 
  align-items: center; 
  gap: 18px; 
  background: linear-gradient(135deg, rgba(138,43,226,0.12), rgba(0,245,255,0.08)); 
  border: 1px solid rgba(255,255,255,0.08); 
  border-radius: var(--radius); 
  padding: 24px; 
  box-shadow: var(--shadow); 
  position: relative;
  overflow: hidden;
}
.landing-hero .hero-text h1 { 
  margin: 0 0 8px; 
  font-size: 2rem; 
  text-shadow: 0 0 10px rgba(0,245,255,0.2); 
  min-height: 2.4em;
}
.landing-hero .hero-text p { margin: 0 0 12px; color: var(--muted); }
.landing-hero .logo { 
  width: 64px; 
  height: 64px; 
  border-radius: 14px; 
  object-fit: contain; 
  box-shadow: 0 0 10px rgba(0,0,0,0.25); 
  transform-style: preserve-3d;
}

/* Gooey Marquee Effect */
.gooey-marquee {
  position: relative;
  height: 60px;
  background: linear-gradient(135deg, rgba(138,43,226,0.1), rgba(0,245,255,0.05));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  margin: 20px 0;
  overflow: hidden;
  filter: url(#goo);
}

.gooey-track {
  display: flex;
  width: 200%;
  height: 100%;
  align-items: center;
}

.gooey-text {
  flex: 0 0 50%;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--neon-1);
  text-shadow: 0 0 10px rgba(0,245,255,0.4);
  white-space: nowrap;
  padding: 0 20px;
}

.gooey-filter {
  position: absolute;
  width: 0;
  height: 0;
}

/* 3D Text Marquee Effect */
.marquee-3d {
  position: relative;
  height: 80px;
  background: linear-gradient(135deg, rgba(138,43,226,0.15), rgba(0,245,255,0.1));
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 40px 0 0;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.marquee-track {
  display: flex;
  width: 300%;
  height: 100%;
  align-items: center;
  transform-style: preserve-3d;
}

.marquee-text {
  flex: 0 0 33.333%;
  font-size: 2rem;
  font-weight: 800;
  color: transparent;
  background: linear-gradient(45deg, var(--neon-1), var(--neon-2), var(--neon-3));
  -webkit-background-clip: text;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 2px;
  white-space: nowrap;
  padding: 0 30px;
  transform: translateZ(20px);
  text-shadow: 0 0 20px rgba(0,245,255,0.3);
}

/* Editor Illustration Box - Klare Style */
.editor-illustration {
  background: #0d1117;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  margin: 40px 0;
  overflow: hidden;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  transform: perspective(1000px) rotateX(2deg);
  transition: all 0.3s ease;
}

.editor-illustration:hover {
  transform: perspective(1000px) rotateX(0deg) translateY(-2px);
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.editor-header {
  background: linear-gradient(to bottom, #1f2428, #161b22);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(4px);
}

.editor-dots {
  display: flex;
  gap: 6px;
}

.editor-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: all 0.2s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.editor-dots .dot.red { 
  background: linear-gradient(to bottom, #ff5f56, #e0443e);
  border: 1px solid rgba(255, 95, 86, 0.3);
}
.editor-dots .dot.yellow { 
  background: linear-gradient(to bottom, #ffbd2e, #e6a723);
  border: 1px solid rgba(255, 189, 46, 0.3);
}
.editor-dots .dot.green { 
  background: linear-gradient(to bottom, #27ca3f, #1ea130);
  border: 1px solid rgba(39, 202, 63, 0.3);
}

.editor-dots .dot:hover {
  transform: scale(1.1);
}

.editor-title {
  color: #8b949e;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.editor-content {
  padding: 16px;
  background: #0d1117;
  min-height: 180px;
  overflow: hidden;
  position: relative;
}

.editor-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.1), 
    transparent
  );
}

.editor-content pre {
  margin: 0;
  overflow-x: auto;
  padding-right: 8px;
}

.editor-content code {
  color: #c9d1d9;
  font-family: inherit;
  display: block;
  white-space: pre-wrap;
}

.editor-content .keyword { color: #ff7b72; font-weight: 600; text-shadow: 0 0 5px rgba(255, 123, 114, 0.3); }
.editor-content .function { color: #d2a8ff; text-shadow: 0 0 5px rgba(210, 168, 255, 0.3); }
.editor-content .string { color: #a5d6ff; text-shadow: 0 0 5px rgba(165, 214, 255, 0.3); }
.editor-content .comment { color: #8b949e; font-style: italic; opacity: 0.8; }
.editor-content .number { color: #79c0ff; text-shadow: 0 0 5px rgba(121, 192, 255, 0.3); }
.editor-content .operator { color: #ff7b72; text-shadow: 0 0 5px rgba(255, 123, 114, 0.3); }
.editor-content .bracket { color: #ffa657; text-shadow: 0 0 5px rgba(255, 166, 87, 0.3); }

.editor-footer {
  background: linear-gradient(to bottom, #161b22, #0d1117);
  padding: 6px 12px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #8b949e;
  border-top: 1px solid rgba(255,255,255,0.05);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.editor-status,
.editor-mode {
  opacity: 0.8;
  font-family: 'SF Mono', 'Monaco', monospace;
  letter-spacing: 0.2px;
}

/* Typing cursor animation */
.editor-content code::after {
  content: '|';
  animation: blink 1s infinite;
  color: #58a6ff;
  font-weight: bold;
  margin-left: 2px;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Responsive adjustments for new effects */
@media (max-width: 768px) {
  .gooey-marquee {
    height: 50px;
    margin: 15px 0;
  }
  
  .gooey-text {
    font-size: 0.9rem;
    padding: 0 15px;
  }
  
  .marquee-3d {
    height: 60px;
  }
  
  .marquee-text {
    font-size: 1.5rem;
    padding: 0 20px;
  }
  
  .editor-illustration {
    margin: 30px 0;
    font-size: 11px;
  }
  
  .editor-content {
    padding: 15px;
    min-height: 180px;
  }
}

.btn { display: inline-block; padding: 10px 14px; border-radius: 12px; text-decoration: none; transition: all .25s ease; }
.btn-primary { border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(135deg, rgba(0,245,255,0.18), rgba(138,43,226,0.18)); color: var(--text); }
.btn-primary:hover { box-shadow: 0 0 16px rgba(0,245,255,0.35); transform: translateY(-1px); }
.btn-secondary { border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: var(--text); }
.btn-secondary:hover { box-shadow: 0 0 14px rgba(138,43,226,0.3); transform: translateY(-1px); }

.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.benefit { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px 14px; }
.benefit h3 { margin: 0 0 8px; font-size: 1.05rem; }
.benefit p { margin: 0; color: var(--muted); }

.cta-strip { margin-top: 24px; padding: 16px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: space-between; }
.cta-strip strong { font-weight: 600; }

/* Contact Section for 3D Spatial Scroll Zoom */
.contact-section {
  margin-top: 48px;
  padding: 40px 24px;
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.15), 
    rgba(0, 245, 255, 0.12),
    rgba(255, 60, 172, 0.10)
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  box-shadow: 
    0 20px 40px rgba(0, 245, 255, 0.15),
    0 10px 20px rgba(138, 43, 226, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform-style: preserve-3d;
  perspective: 1000px;
  position: relative;
  overflow: hidden;
}

.contact-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at 20% 50%,
    rgba(0, 245, 255, 0.1) 0%,
    transparent 50%
  );
  pointer-events: none;
}

.contact-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.contact-section h2 {
  font-size: 2.2rem;
  margin: 0 0 16px 0;
  text-shadow: 0 0 15px rgba(0, 245, 255, 0.3);
  background: linear-gradient(135deg, var(--neon-1), var(--neon-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contact-section p {
  font-size: 1.1rem;
  color: var(--muted);
  margin: 0 0 32px 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.contact-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 32px 0;
  padding: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.contact-item:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 245, 255, 0.15);
}

.contact-item strong {
  font-size: 1.1rem;
  color: var(--neon-1);
  margin-bottom: 8px;
}

.contact-item span {
  font-size: 1rem;
  color: var(--text);
  font-weight: 500;
}

.contact-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.contact-actions .btn {
  min-width: 120px;
  text-align: center;
  transform-style: preserve-3d;
}

/* Enhanced card animations */
.card {
  transform-style: preserve-3d;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px) rotateX(2deg) rotateY(1deg) scale(1.02);
  box-shadow: 
    0 25px 50px rgba(255, 60, 172, 0.25),
    0 15px 30px rgba(0, 245, 255, 0.2);
}

/* Navigation animations */
.nav a {
  transform-style: preserve-3d;
  transition: all 0.3s ease;
}

.nav a:hover {
  transform: translateY(-2px) rotateX(5deg);
}

/* Loading animation enhancements */
.spinner {
  border: 3px solid rgba(138, 43, 226, 0.3);
  border-top: 3px solid var(--neon-1);
  animation: spin 1s linear infinite;
  transform-style: preserve-3d;
}

@keyframes spin {
  0% { transform: rotate(0deg) rotateX(10deg); }
  100% { transform: rotate(360deg) rotateX(10deg); }
}

/* Responsive adjustments for animations */
@media (max-width: 768px) {
  .contact-info {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .contact-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .contact-actions .btn {
    width: 100%;
    max-width: 250px;
  }
  
  .contact-section {
    padding: 32px 20px;
  }
  
  .contact-section h2 {
    font-size: 1.8rem;
  }
}