/* ========== MyWave Base Styles ========== */
:root{
  --navy: #003366;
  --cove: #66b2ff;
  --harbor: #0d2a4a;
  --bg: #f7f9fc;
  --panel: #ffffff;
  --text: #333333;
  --muted: #3054a1;
  --crisp: #e2caa6;
  --border: #e5e7eb;
  --shadow: 0 1px 8px rgba(0,0,0,0.08);
  --radius: 10px;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
}

html{
  scroll-behavior: smooth;
}

body{
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

/* ========== Layout Helpers ========== */
.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
}

/* ========== Header & Nav ========== */
.site-header {
  background: #003366;
  padding: 0.5rem 0;
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand img {
  height: 42px;
  width: auto;
}

.main-nav a {
  color: #fff;
  text-decoration: none;
  margin-left: 1.5rem;
  font-weight: 500;
}

.main-nav a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .header-bar {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ========== Hero ========== */
.hero {
  background: url('images/mywave-banner.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 4rem 1rem;
  position: relative;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35); /* dark overlay for readability */
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.btn {
  background: #ffffff;
  color: #003366;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.btn:hover {
  background: #e0ecf8;
}
/* ========== Value Props ========== */
.values{
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 1.5rem;
  flex-wrap: wrap;
  text-align: center;
  margin: 2rem auto;
}
.values > div{
  flex: 1 1 260px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
}
.values h3{ margin-top: 0; }

/* ========== Products ========== */
.products{
  background: #eef4fb;
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.products h2{
  text-align: center;
  margin: 0 0 0.25rem;
}
.products p{
  text-align: center;
  color: var(--muted);
  margin: 0 0 1.5rem;
}
.product-cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Card Base */
.card {
  display: flex;
  gap: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}

.card-image img {
  width: 140px;
  height: auto;
  border-radius: 8px;
  display: block;
}

.card.cove .card-image img {
  border: 3px solid var(--cove);
}

.card.harbor .card-image img {
  border: 3px solid var(--navy);
}

.card-hooks, .card-specs {
  flex: 1;
}

.card-hooks h3 {
  margin: 0 0 0.25rem;
}

.card-hooks .tag {
  margin-bottom: 0.75rem;
  font-weight: 500;
  color: var(--muted);
}

.card-hooks ul,
.card-specs ul {
  margin: 0;
  padding-left: 1rem;
}

.card-hooks li,
.card-specs li {
  margin: 0.35rem 0;
}

/* Mobile stacking */
@media (max-width: 640px) {
  .card {
    flex-direction: column;
  }
  .card-image img {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
}

/* ========== Comparison Table ========== */
.comparison {
  width: 100%;
  margin: 2rem 0;
  border-collapse: collapse;
  background-color: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  font-size: 0.95rem;
}

/* Table Header */
.comparison thead {
  background-color: #f1f5fb;
}

.comparison thead th {
  padding: 1rem;
  color: #0f172a;
  font-weight: 700;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

/* Table Body */
.comparison tbody td {
  padding: 0.85rem 1rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

/* Last row cleanup */
.comparison tbody tr:last-child td {
  border-bottom: none;
}

/* Zebra striping for readability */
.comparison tbody tr:nth-child(even) {
  background-color: #f9fbfd;
}

/* Responsive scroll on small screens */
@media (max-width: 640px) {
  .comparison {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Make table horizontally scrollable on small screens */
@media (max-width: 640px){
  .comparison{ display: block; overflow-x: auto; white-space: nowrap; }
}

/* ========== Why MyWave ========== */
.why{
  background: var(--panel);
  padding: 2rem 0;
}

.why h2{
  text-align: center;
  margin: 0 0 0.5rem;
}
.why > .container > p{
  text-align: center;
  color: var(--muted);
  max-width: 800px;
  margin: 0.25rem auto 1.5rem;
}

.pillars{
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.pillars > div{
  flex: 1 1 320px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  background: #fafcff;
  box-shadow: var(--shadow);
}
.pillars h3{ margin-top: 0; }

/* ========== Contact ========== */
.contact{
  background: #e8f1fb;
  padding: 2rem 0;
  border-top: 1px solid var(--border);
}

.contact h2{
  text-align: center;
  margin: 0 0 0.25rem;
}
.contact > .container > p{
  text-align: center;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

.contact-flex{
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.contact-flex > div{
  flex: 1 1 260px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
}

.contact form{
  flex: 2 1 340px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
}

.contact form input,
.contact form select,
.contact form textarea{
  width: 100%;
  padding: 0.75rem 0.85rem;
  margin: 0.45rem 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 1rem;
}

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

.contact form input:focus,
.contact form select:focus,
.contact form textarea:focus{
  outline: 3px solid #bcd6ff;
  outline-offset: 1px;
  border-color: #9bbcff;
}

.contact form button{
  display: inline-block;
  margin-top: 0.5rem;
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 0.85rem 1.2rem;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.08s ease, background 0.2s ease;
}
.contact form button:hover{ background: #02284f; transform: translateY(-1px); }
.contact form button:focus{ outline: 3px solid #aac9ff; outline-offset: 2px; }

/* ========== CTA bar ========== */
.cta-bar {
  background: linear-gradient(90deg, #003366 0%, #005f99 100%);
  color: #fff;
  text-align: center;
  padding: 2rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.cta-bar h2 {
  margin: 0 0 0.5rem;
  font-size: 1.8rem;
}

.cta-bar p {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  opacity: 0.9;
}

.cta-bar .btn {
  background: #ffffff;
  color: #003366;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: background 0.2s ease, transform 0.1s ease;
}

.cta-bar .btn:hover {
  background: #e0ecf8;
  transform: translateY(-1px);
}

/* ========== Footer ========== */
footer{
  background: var(--navy);
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* ========== Responsive Tweaks ========== */
@media (max-width: 900px){
  header .container{ justify-content: center; }
  nav{ width: 100%; text-align: center; }
}

@media (max-width: 768px){
  .hero h2{ font-size: 1.75rem; }
  .values{ margin: 1.5rem auto; }
  .product-cards{ gap: 1rem; }
  .pillars > div, .values > div{ flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn, .card{ transition: none; }
}