:root{
  --bg:#f7f9fc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --brand:#0b4ea2;
  --accent:#1ea5ff;
  --border:#e5e7eb;
  --shadow:0 14px 30px rgba(15,23,42,0.08);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

a{text-decoration:none;color:inherit}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

.rotate-device {
  display: none;
  background-color: white;
}

/* OLD HEADER (unused but preserved for safety) */
header{
  position:sticky;top:0;z-index:10;
  background:#ffffffdd;
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}

.nav{
  display:flex;align-items:center;justify-content:space-between;
  min-height:64px;
}

.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--brand);}

.logo{
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:#eff6ff;color:var(--brand);font-size:.9rem;
  border:1px solid #bfdbfe;
}

.nav-links{display:flex;gap:18px;font-size:.95rem;color:var(--muted);}
.nav-links a:hover{color:var(--brand);}

/* Buttons */
.btn{
  display:inline-block;
  padding:9px 16px;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  border:none;
  cursor:pointer;
  transition:transform .05s ease, box-shadow .05s ease, background .15s ease;
}

.btn-primary{
  background:var(--accent);
  color:#fff;
  box-shadow:0 12px 24px rgba(30,165,255,.3);
}

.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 30px rgba(30,165,255,.35);
}

.btn-outline{
  background:#fff;
  color:var(--brand);
  border:1px solid #bfdbfe;
}

/* Hero */
.hero{
  padding:52px 0 36px;
  background:linear-gradient(135deg,#e0f2fe,#f9fafb);
  border-bottom:1px solid #dbeafe;
}

.hero-grid{
  display:grid;
  gap:28px;
  align-items:center;
}

@media(min-width:960px){
  .hero-grid{grid-template-columns:1.15fr .85fr;}
}

.hero h1{
  font-size:clamp(2.0rem,3.4vw,2.6rem);
  line-height:1.15;
  color:#0f172a;
  margin-bottom:12px;
}

.hero p{
  color:var(--muted);
  font-size:1rem;
  max-width:540px;
  margin-bottom:18px;
}

.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}

.badge{
  font-size:.82rem;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #bfdbfe;
  background:#eff6ff;
  color:#1e40af;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px;}

.hero-review{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.9rem;
  color:var(--muted);
}

.stars{color:#f59e0b;}

.hero-visual{
  display: flex;
  align-items: flex-start;
  gap: 24px;
  border-radius:22px;
  background:#0b4ea2;
  color:#e5f2ff;
  padding: 24px;
  box-shadow: 0 14px 30px rgba(15,23,42,0.08);
}

.hero-visual-body {
  flex: 1 1 auto;
  min-width: 0;
}

.hero-visual h2{
  font-size:1.05rem;
  margin-bottom:8px;
  color:#eff6ff;
}

.hero-visual p{
  font-size:.9rem;
  margin-bottom:14px;
  color:#dbeafe;
}

.hero-list{
  list-style:none;
  font-size:.9rem;
  display:grid;
  gap:6px;
  margin-bottom:10px;
}

.hero-list li::before{
  content:"✓";
  margin-right:6px;
  color:#bbf7d0;
}

.phone-placeholder {
  flex: 0 0 160px;
  max-width: 180px;
  padding: 12px;
  border-radius: 24px;
  background: linear-gradient(160deg, #e5f2ff, #93c5fd);
  border: 3px solid #eff6ff;
  box-shadow: 0 16px 32px rgba(15,23,42,.6);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Feature Matrix */
.feature-matrix-container {
  overflow-x: auto;
  margin: 2em 0;
}

.feature-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
  table-layout: fixed;
}

.feature-matrix th,
.feature-matrix td {
  border: 1px solid #ccc;
  padding: 0.75em;
  vertical-align: top;
  word-wrap: break-word;
  text-align: center;
}

.feature-matrix th {
  background-color: #f0f0f0;
  font-weight: bold;
}

.feature-matrix td:first-child {
  text-align: left;
  font-weight: normal;
}

.feature-matrix td:first-child strong {
  display: block;
  margin-bottom: 0.25em;
  font-weight: bold;
}

.feature-matrix td:last-child {
  text-align: left;
}
@media(max-width:959px){
  .phone-placeholder{position:static;width:100%;height:180px;margin-top:10px;}
}

/* Sections */
section{padding:40px 0;}

section h2{
  font-size:clamp(1.5rem,2.4vw,1.9rem);
  margin-bottom:8px;
  color:var(--brand);
}

section p{font-size:.97rem;color:var(--muted);margin-bottom:6px;}

.section-intro{max-width:640px;margin-bottom:22px;}

.grid{
  display:grid;
  gap:18px;
}

@media(min-width:960px){
  .grid-2{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(3,1fr);}
}

.card{
  background:var(--card);
  border-radius:16px;
  border:1px solid var(--border);
  padding:18px 18px 16px;
  box-shadow:var(--shadow);
}

.card h3{
  font-size:1.02rem;
  margin-bottom:8px;
  color:#0f172a;
}

.card p{
  font-size:.93rem;
  color:#4b5563;
  margin-bottom:8px;
}

.pain-label{
  display:inline-block;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#b91c1c;
  background:#fee2e2;
  padding:3px 8px;
  border-radius:999px;
  margin-bottom:6px;
}

.solve-label{
  display:inline-block;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#166534;
  background:#dcfce7;
  padding:3px 8px;
  border-radius:999px;
  margin-bottom:6px;
}

.list{
  list-style:none;
  padding-left:0;
  margin-top:4px;
  font-size:.9rem;
  color:#4b5563;
}

.list li{margin-bottom:4px;}

.list li::before{
  content:"–";
  margin-right:6px;
  color:#9ca3af;
}

.comparison{
  background:#0f172a;
  color:#e5e7eb;
  border-radius:18px;
  padding:24px 20px;
  box-shadow:var(--shadow);
}

.comparison h2{color:#e5e7eb;margin-bottom:10px;}

.comparison p{color:#9ca3af;}

.comparison-grid{
  display:grid;
  gap:16px;
  margin-top:18px;
}

.button-row {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button-row .btn {
  flex: 1;
  text-align: center;
  min-width: 240px; /* keeps them from becoming too narrow */
}



@media(min-width:880px){
  .comparison-grid{grid-template-columns:1.1fr .9fr;}
}

.vs-col h3{
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:8px;
}

.vs-col ul{
  list-style:none;
  font-size:.9rem;
}

.vs-col li{margin-bottom:5px;}

.vs-col li::before{
  content:"•";
  margin-right:6px;
  color:#f97316;
}

.vs-col--trip li::before{
  color:#22c55e;
}

footer{
  padding:22px 0 26px;
  font-size:.85rem;
  color:#9ca3af;
  text-align:center;
}

footer a {
  color: var(--brand);
}
footer a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------
   DARK HEADER WITH HAMBURGER MENU (FINAL)
---------------------------------------------------- */

.site-header-dark {
  background: #0f172a;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
  top: 0;
  z-index: 100;
  width: 100%;
}

.nav-dark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: 0 20px;
}

.brand-dark .site-logo-dark {
  height: 48px;
  width: auto;
  display: block;
}

.nav-links-dark {
  display: flex;
  gap: 22px;
  font-size: 0.95rem;
  font-weight: 600;
}

.nav-links-dark a {
  color: #e5e7eb;
  transition: opacity 0.15s ease;
}

.nav-links-dark a:hover {
  opacity: 0.75;
}

.nav-links-dark a[aria-current="page"] {
  color: var(--accent);
}

/* Hamburger icon */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.nav-toggle span {
  width: 24px;
  height: 3px;
  background: #e5e7eb;
  border-radius: 2px;
}

/* Mobile nav */
@media (max-width: 820px) {

  .nav-toggle {
    display: flex;
  }

  .nav-links-dark {
    position: absolute;
    top: 70px;
    right: 0;
    background: #0f172a;
    width: 100%;
    flex-direction: column;
    padding: 20px;
    gap: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: none;
  }

  .nav-links-dark.open {
    display: flex;
  }

  .nav-links-dark a {
    padding: 8px 0;
    font-size: 1rem;
  }
  
  .rotate-device {
    display: block;
    background-color: white;
    text-align: center;

  }

  .rotate-image {
    max-width: 900px;
    width: 100%;
    height: auto;
    border-radius: 16px;
  }

  

  
  .feature-matrix-container {
    display: none;
  }
}