/* Basic Setup & Variables */
:root {
  --bg:#0f1724; 
  --card:#0b1220; 
  --accent:#7c3aed; 
  --glass:rgba(255,255,255,0.08);
  --text:#f8fafc; 
  --muted:#94a3b8;
  --highlight:#ffea04;
  --check-color: #34d399;
  --cross-color: #f87171;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,sans-serif;}
body{background:var(--bg);color:var(--text);line-height:1.6;}
main{padding:1rem;max-width:900px;margin:auto;}
h1,h2{color:var(--accent);margin-bottom:1rem; text-align:center;}
.highlight{color:var(--highlight); font-weight:700;}

/* Header */
header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:var(--card);border-bottom:1px solid var(--glass);}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700;}
.brand img{width:40px;height:40px;border-radius:8px;}
nav a{color:#fff;margin-left:.5rem;text-decoration:none;font-size:.9rem;background:var(--accent);padding:.4rem .8rem;border-radius:6px; transition:0.3s;}
nav a:hover{background:#6d28d9;}

/* About Section (Simplified) */
.about{
  background: var(--card); /* Simplified background */
  padding:1.5rem;
  border-radius:12px;
  margin-bottom:1.5rem;
  box-shadow:0 4px 15px rgba(0,0,0,0.4);
}
.about h1{font-size:1.6rem; text-align:left;}
.about p{color:#cbd5e1; font-size:.95rem; line-height:1.7;}

/* Forms and Inputs */
.form-box{
  background:var(--card);
  padding:1.5rem;
  border-radius:12px;
  box-shadow:0 4px 15px rgba(0,0,0,0.6);
}
input,button,select{
  width:100%;padding:.8rem;margin:.4rem 0;border-radius:6px;border:1px solid var(--glass);background:var(--glass);color:var(--text);font-size:.95rem;
}
button{background:var(--accent);color:#fff;font-weight:600;border:none;cursor:pointer;margin-top:.8rem;transition:0.3s;}
button:hover{background:var(--highlight); color:#000;}
select option{background:var(--card);color:var(--text);}
#submit-msg{
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; padding: 0.8rem 1.5rem;
  border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none; font-weight: 600; z-index: 9999;
  transition: opacity 0.4s ease;
}

/* --- OPTIMIZED PRICING TABLE STYLES --- */
.pricing-container {
  margin: 1.5rem 0;
  overflow-x: auto; /* Enable horizontal scroll on small screens */
  padding-bottom: 10px; /* Space for scrollbar */
}
.pricing-container h2 { margin-bottom: 1.5rem; }

.pricing-table {
  width: 100%;
  min-width: 500px; /* Ensure table is legible on small screens */
  border-collapse: collapse;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  background: var(--card);
  border-radius: 10px;
  overflow: hidden;
}

/* Header */
.pricing-table thead th {
  background: var(--accent);
  color: #fff;
  padding: 1rem 0.5rem;
  font-size: 1rem;
  border-bottom: 2px solid var(--highlight);
  text-align: center;
}
.pricing-table thead th:first-child {
  background: var(--card);
  color: var(--text);
  border-bottom: none;
  font-size: 1.05rem;
}

/* Rows and Cells */
.pricing-table tbody tr {
  border-bottom: 1px solid var(--glass);
  transition: background 0.2s;
}
.pricing-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); }
.pricing-table tbody tr:last-child { border-bottom: none; }

.feature-col {
  text-align: left;
  padding: 0.8rem 1rem;
  font-weight: 500;
  background: rgba(124,58,237,0.1);
  border-right: 1px solid var(--glass);
}
.pricing-table td {
  text-align: center;
  padding: 0.8rem 0.5rem;
  font-size: 0.95rem;
}

/* Price Row */
.price-row th, .price-row td {
  padding: 1.2rem 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--highlight);
  background: rgba(255, 234, 4, 0.05);
  border-top: 1px solid var(--glass);
}

/* Checkmarks and Crosses */
.pricing-check { color: var(--check-color); font-weight: 900; }
.pricing-cross { color: var(--cross-color); font-weight: 900; }
.pricing-support {
  font-size: 0.85rem;
  color: var(--text);
  background: var(--accent);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

/* Full Package Column Highlight */
.pricing-table th:nth-child(3), 
.pricing-table td:nth-child(3) {
  background: rgba(124, 58, 237, 0.15); /* Light purple background */
  border-left: 2px solid var(--accent); /* Clearer separation */
}

/* Footer */
footer{padding:1.5rem 1rem;background:var(--card);color:var(--muted);margin-top:1.5rem;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:1000px;margin:auto;}
.footer-grid h4{color:var(--accent); margin-bottom: 0.5rem;}
.footer-grid a{color:var(--muted);text-decoration:none;display:block;font-size:0.95rem;margin:.2rem 0;}
.footer-grid a:hover{color:var(--accent);}
.footer-bottom{margin-top:1.5rem;text-align:center;color:var(--muted); font-size: 0.85rem;}

/* Mobile Specific Optimizations */
@media (max-width: 600px) {
    header { padding: 0.8rem 1rem; }
    nav a { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
    .about h1 { font-size: 1.4rem; }
    
    /* Hide specific nav links if too crowded */
    nav a:not(:first-child) { display: none; }
    nav a:first-child { margin-left: auto; }
}