:root {
  /* Cool Light Theme inspired by Apple */
  --bg: #f5f5f7;
  /* Reverted to Neutral */
  --bg-alt-cool: #EEF3F9;
  /* Cool Alternate Section */
  --bg-feature: #D9EAF1;
  /* Feature Card / Blue-Gray */
  /* Soft warm white / cream */
  --bg-alt: #ffffff;
  /* Pure white for cards */
  --card: #ffffff;
  --accent: #C2E4F0;
  /* Powder Blue */
  --accent-text: #41758B;
  /* Slate Blue for text contrast */
  --accent-soft: rgba(194, 228, 240, 0.25);
  --accent-soft-2: rgba(244, 209, 209, 0.4);
  /* Soft Blush Pink */

  --text: #1d1d1f;
  /* Soft charcoal black */
  --muted: #5C5C60;
  /* Charcoal Gray for readability */
  --border: rgba(0, 0, 0, 0.08);

  --radius-lg: 1.5rem;
  --radius-xl: 2rem;

  --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.06);
  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.04);

  --max-width: 1120px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

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

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.shell {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* NAV */
header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.80);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Old brand-mark deprecated */
/*
.brand-mark {
  width: 32px;

  height: 32px;
  border-radius: 999px;
  background: #f1d5df;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9),
    0 12px 30px rgba(248, 250, 252, 0.12);
}

.brand-mark span {
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
}
*/

.brand-mark-img {
  width: 40px;
  /* Slightly larger for visibility */
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  /* Soft rounded corners matching Apple icons */
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.brand-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brand-tagline {
  font-size: 0.75rem;
  color: var(--muted);
}

.nav-links {
  display: none;
  gap: 1.75rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 0%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent-text), #FAD0C4);
  transition: width 0.18s ease-out;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-cta {
  display: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.5rem 1.4rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  background: var(--bg-alt);
  color: var(--text);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.btn-primary {
  background: var(--accent);
  color: var(--text);
  /* Dark text for contrast on light blue */
  box-shadow: 0 4px 15px var(--accent-soft);
}

.btn-subtle {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--muted);
  box-shadow: var(--shadow-subtle);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.btn-primary:hover {
  box-shadow: 0 8px 25px var(--accent-soft);
  background: #ADD8E6;
  /* Slightly darker powder blue */
}

.btn span.icon {
  font-size: 1rem;
}

/* HERO */
.hero-wrap {
  position: relative;
  /* padding-top/bottom adjusted for fullscreen feel if desired, 
     but keeping spacing consistent for now */
  padding-top: 6rem;
  padding-bottom: 6rem;
  overflow: hidden;
  background: #000;
  /* Fallback */
}

/* Gradient blend to page background */
.hero-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 12rem;
  background: linear-gradient(to top, var(--bg) 10%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: opacity 1.5s ease-in-out;
}

.hero-bg-video.fade-out {
  opacity: 0;
}

.hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Behind video initially */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.3) 40%,
      rgba(0, 0, 0, 0.6) 100%),
    linear-gradient(to right,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0.2) 60%,
      transparent 100%);
  z-index: 2;
  backdrop-filter: blur(2px);
  /* Slight blur for focus */
}

/* Ensure content sits above video */
.hero-wrap .shell {
  position: relative;
  z-index: 3;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 3rem;
  /* align-items: center; */
}

/* Hero Typography Updates for Overlay */
.hero h1 {
  color: #ffffff;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.hero h1 span.accent {
  /* Make accent clearer on dark bg */
  color: #C2E4F0;
  text-shadow: 0 0 20px rgba(194, 228, 240, 0.4);
}

.hero-sub {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.pill {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.pill-badge {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
}

h1 {
  font-size: clamp(2.5rem, 3.3vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 0.9rem;
}

h1 span.accent {
  color: var(--accent-text);
  background: none;
  -webkit-background-clip: initial;
  color: initial;
}

.hero-sub {
  max-width: 34rem;
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 1.7rem;
}

.hero-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.hero-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.85rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.8rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.hero-check:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.hero-check-icon {
  margin-top: 0.1rem;
  font-size: 1.1rem;
  color: #ffffff;
  /* background: rgba(255,255,255,0.2); 
     circle icon if desired, but checkmark is fine */
}

.hero-check-icon {
  margin-top: 0.1rem;
  font-size: 1.1rem;
  color: var(--accent-text);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 1rem;
}

.hero-note {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 1rem;
}

.hero-note span {
  color: #ffffff;
  font-weight: 500;
}

.hero-right {
  position: relative;
}

.hero-card {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.85);
  /* Slightly more opaque for readability of scan content */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 1.5rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.hero-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}

.hero-card-title {
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text);
}

.signal-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2D80B5;
  box-shadow: 0 0 0 6px rgba(45, 128, 181, 0.15);
}

.hero-card-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted);
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #f5f5f7;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
  padding-left: 0.2rem;
}

.timeline-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.timeline-icon {
  font-size: 1.1rem;
  margin-top: 0.05rem;
}

.timeline-body {
  font-size: 0.78rem;
  color: var(--muted);
}

.timeline-body strong {
  color: var(--text);
  font-weight: 500;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.7rem;
}

.hero-tag {
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 0.18rem 0.65rem;
  background: #f4f4f5;
  color: var(--muted);
}

.hero-orbit {
  position: absolute;
  inset: -30px;
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: screen;
  background:

    radial-gradient(circle at 10% -10%, rgba(244, 244, 245, 0.15), transparent 50%),
    radial-gradient(circle at 110% 80%, rgba(45, 128, 181, 0.15), transparent 55%);
  z-index: -1;
}

/* SECTION WRAPPER */
section {
  padding: 3.5rem 0;
}



.section-heading {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.8rem;
}

.eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
}

h2 {
  font-size: 1.6rem;
  margin: 0;
  letter-spacing: -0.03em;
}

.section-lede {
  max-width: 30rem;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.7;
}

/* WHO IT'S FOR */
#who {
  background: linear-gradient(180deg, #f5f5f7 0%, #C2E4F0 30%, #C2E4F0 70%, #f5f5f7 100%);
  padding: 5rem 0;
}

/* Kept Neutral */
.who-grid {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
}

.who-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 1.4rem;
  background: #fff;
  box-shadow: var(--shadow-subtle);
  font-size: 0.87rem;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.who-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

.who-header-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 3rem;
  /* align-items: center; */
  margin-bottom: 3rem;
}

.who-header-img img {
  width: 100%;
  border-radius: 1.5rem;
  box-shadow: var(--shadow-soft);
  object-fit: cover;
}

@media (max-width: 768px) {
  .who-header-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* On mobile, put text first as usual, or image? Usually text first is better for flow */
}

.who-title {
  font-size: 0.97rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--text);
}

/* SERVICES */
.services-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: flex-start;
}

.service-list {
  display: grid;
  gap: 0.9rem;
}

.service-card {
  border-radius: 1.2rem;
  border: 1px solid var(--border);
  padding: 1.5rem;
  background: #fff;
  font-size: 0.88rem;
  color: var(--muted);
  box-shadow: var(--shadow-subtle);
}

.service-card h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
}

.service-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.chip {
  font-size: 0.7rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  color: var(--muted);
}

.service-side {
  border-radius: 1.4rem;
  border: 1px solid var(--border);
  padding: 1.5rem;
  background: linear-gradient(135deg, #fff 0%, #fefcfb 100%);
  font-size: 0.85rem;
  color: var(--muted);
  box-shadow: var(--shadow-soft);
}

.service-side h3 {
  font-size: 0.95rem;
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.service-side ul {
  padding-left: 1.1rem;
  margin: 0 0 0.9rem;
}

.service-side li {
  margin-bottom: 0.4rem;
}

.service-side p strong {
  color: var(--text);
}

/* HOW IT WORKS */
/* Kept Neutral */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.step-card {
  border-radius: 1.2rem;
  border: 1px solid var(--border);
  padding: 1.4rem;
  background: #fff;
  font-size: 0.86rem;
  color: var(--muted);
  box-shadow: var(--shadow-subtle);
}

.step-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  font-size: 0.65rem;
}

.step-card h3 {

  margin: 0 0 0.3rem;
  font-size: 0.98rem;
  color: var(--text);
}

/* HOSTING / N8N SECTION */
.hosting {
  border-radius: 1.6rem;
  border: 1px solid var(--border);
  padding: 1.8rem;
  background: var(--bg-feature);
  box-shadow: var(--shadow-soft);
  font-size: 0.86rem;
  color: var(--muted);
}

.hosting-header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.8rem;
}

.hosting-title {
  font-size: 0.95rem;
  font-weight: 500;
}

.hosting-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.7rem;
}

.hosting-pill {
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
  border: 1px solid var(--border);
  background: #f5f5f7;
  color: var(--muted);
}

.hosting-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.3rem;
}

.hosting ul {
  padding-left: 1.1rem;
  margin: 0.2rem 0 0.8rem;
}

.hosting li {
  margin-bottom: 0.25rem;
}

.hosting strong {
  color: var(--text);
}

/* PRICING SECTION */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  border-radius: 1.8rem;
  border: 1px solid var(--border);
  background: #fff;
  padding: 2rem;
  box-shadow: var(--shadow-subtle);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.pricing-card.featured {
  background: radial-gradient(circle at top right, rgba(194, 228, 240, 0.3), #fff 60%);
  border-color: rgba(194, 228, 240, 0.8);
  position: relative;
  overflow: hidden;
}

.pricing-card.featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, var(--accent-text), #C2E4F0);
}

.pricing-header h3 {
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
  color: var(--text);
}

.pricing-desc {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  line-height: 1.6;
  min-height: 3rem;
}

.pricing-cost {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.pricing-cost span {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--muted);
}

.pricing-features {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

.pricing-features ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 0.8rem;
  line-height: 1.5;
}

.pricing-check {
  color: var(--accent-text);
  font-weight: bold;
  font-size: 1rem;
  line-height: 1.2;
}

.systems-care-row {
  margin-top: 2rem;
  padding: 2rem;
  background: var(--bg-feature);
  border-radius: 1.8rem;
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 2rem;
  align-items: center;
}

@media (max-width: 768px) {
  .systems-care-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ABOUT + WORK WITH ME */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.3rem;
  align-items: flex-start;
}

.about-card {
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  padding: 1.6rem;
  background: #fff;
  font-size: 0.88rem;
  color: var(--muted);
  box-shadow: var(--shadow-subtle);
}

.about-card h3 {
  margin-top: 0;
  margin-bottom: 0.45rem;
  font-size: 1rem;

  color: var(--text);
}

.about-card p+p {
  margin-top: 0.5rem;
}

.about-avatar {
  float: right;
  width: 120px;
  height: 120px;
  border-radius: 12px;
  /* 10% approx */
  object-fit: cover;
  box-shadow: var(--shadow-subtle);
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.about-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.8rem;
  font-size: 0.7rem;
  color: var(--muted);
}

.about-badge {
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  border: 1px solid var(--border);
  background: #f5f5f7;
}

.work-card {
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  padding: 1.6rem;
  background: #fff;
  font-size: 0.86rem;
  color: var(--muted);
  box-shadow: var(--shadow-soft);
}

.work-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.work-card ul {
  padding-left: 1.1rem;
  margin: 0.2rem 0 0.8rem;
}

.work-card li {
  margin-bottom: 0.3rem;
}

.work-card p strong {
  color: var(--text);
}

/* FAQ */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  font-size: 0.86rem;
}

.faq-item {
  border-radius: 1.2rem;
  border: 1px solid var(--border);
  padding: 1.2rem;
  background: #fff;
  color: var(--muted);
}

.faq-item h3 {
  margin-top: 0;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  color: var(--text);
}

/* CTA FOOTER */
.cta-wrap {
  padding: 3.2rem 0 3.6rem;
}

.cta-card {
  border-radius: 1.8rem;
  border: 1px solid var(--border);
  padding: 3rem 2rem;
  background: #fff;
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.cta-card h2 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.cta-lede {
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 48rem;
  margin: 0 auto 1.5rem;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-bottom: 0.9rem;
}

.cta-footnote {
  font-size: 0.75rem;
  color: var(--muted);
}

footer {
  border-top: 1px solid var(--border);
  padding: 1.4rem 0 2rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: center;
}

.footer-links {

  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-links a {
  text-decoration: none;
  color: var(--muted);
}

/* MOBILE TOGGLE */
.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 50;
  padding: 0;
}

.mobile-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--text);
  border-radius: 99px;
  transition: all 0.3s ease;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .mobile-toggle {
    display: flex;
  }

  .nav-links,
  .nav-cta {
    display: none;
    /* Hidden by default on mobile unless active */
  }

  /* Mobile Nav Active State */
  .nav.active {
    /* No special styles needed on container, just logic hooks */
  }

  .nav.active .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 4.25rem;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 2rem 1.5rem;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    gap: 1.5rem;
    font-size: 1.1rem;
    z-index: 39;
    align-items: center;
    text-align: center;
  }

  .nav.active .nav-cta {
    /* If we want the CTA inside the dropdown, we must move it or style it to appear.
       Ideally, we just show nav-links. The prompt asked for nav items.
       Let's append CTA to the bottom of the dropdown list via specialized selector or JS,
       or just rely on the user scrolling down to the hero CTA.
       
       Better approach for single-page lander: Just show the links. 
       The "Apply" button is prominent in Hero.
       But let's display it for completeness if possible.
    */
    display: flex;
    position: absolute;
    top: calc(4.25rem + 15rem);
    /* Rough estimate, or structure it better */
    left: 0;
    width: 100%;
    justify-content: center;
    z-index: 40;
    pointer-events: none;
    /* Hacky if not structured together. */
    /* Simpler: Let's assume nav-links and nav-cta are siblings. 
       We'll style them to stack if both are shown. 
       Actually, standard simple fix: just hide CTA in navbar on mobile, 
       users will see Hero CTA immediately.
       Let's stick to showing nav-links.
    */
  }

  /* Fix: Let's make nav-links container include the CTA stylistically if needed 
     or just hide CTA in nav for mobile as originally designed (line 169 was display:none).
     Wait, line 169 says .nav-cta { display: none; } by default? 
     Ah, possibly relying on media query to show it.
     
     Let's look at lines 840+.
  */
}

@media (min-width: 769px) {

  .nav-links,
  .nav-cta {
    display: flex;
  }
}

@media (max-width: 880px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-right {
    order: -1;
  }

  .services-grid,
  .about-grid,
  .hosting-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Shift image focus to the right on mobile/tablet to keep woman in frame */
  .hero-bg-image {
    object-position: 65% center;
  }
}

@media (max-width: 640px) {
  .hero-wrap {
    padding-top: 3.1rem;
  }

  .hero-card {
    border-radius: 1.4rem;
  }

  .cta-card {
    padding: 1.5rem 1.3rem;
  }

  .cta-card {
    padding: 1.5rem 1.3rem;
  }
}