:root{
  --bg:#0a0b12; --card:#121527; --fg:#eaf2ff; --muted:#9fb0d9; --accent:#7a5cff; --accent2:#6b8cff;
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body {
  background: radial-gradient(1200px 600px at 10% -10%, #151a32, transparent),
              #0a0b12;
  color: var(--fg);
  font: 16px/1.6 system-ui, Segoe UI, Inter, Roboto, Arial;
  padding-top: 80px; /* keeps content below header */
}
a{color:var(--fg);text-decoration:none}
/* Navigation links */
nav a {
  color: #eaf2ff;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

nav a:hover {
  background: rgba(255,255,255,0.1);
  color: #ffffff;
}

nav a.active {
  color: #5b7cff;
  font-weight: 600;
}
/* Nav container */
.nav {
  max-width: 1100px;
  margin: 16px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;  /* logo left, links right */
  gap: 20px;
  padding: 10px 20px;

  position: sticky;  /* keep visible on scroll */
  top: 0;
  z-index: 1000;

  background-color: rgba(17, 17, 17, 0.7); /* subtle glass effect */
  backdrop-filter: blur(8px);
}
/* Logo/brand */
.brand {
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 1.2rem;
  color: #eaf2ff;
}
.logo-text {
  font-size: 1.8rem;          /* larger font */
  font-weight: 900;           /* bold */
  color: #5b7cff;             /* Warp = purple-blue */
  text-decoration: none;
  letter-spacing: 0.5px;      /* subtle spacing */
  transition: text-shadow 0.3s ease; /* smooth glow effect */
}

.logo-text span {
  color: #eaf2ff;             /* Foundary = light blue */
}

.logo-text:hover {
  text-shadow: 0 0 8px rgba(91, 124, 255, 0.6); /* glowing hover effect */
}

/* 👇 ADD THIS NEW BLOCK BELOW */
nav a {
  color: #eaf2ff;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}

nav a:hover {
  background: rgba(255,255,255,0.1);
  color: #ffffff;
}

nav a.active {
  color: #5b7cff;
  font-weight: 600;
}

/* 🔹 Your new block */
nav {
  display: flex;
  gap: 12px;
}

.brand {
  flex: 1;   /* ✅ pushes logo to the far left */
}

nav .btn {
  margin-left: 8px;
}
/* keep each nav link on one line */
.nav a {
  white-space: nowrap;
}

/* tighten header on small screens */
@media (max-width: 720px) {
  .logo-text { font-size: 1.4rem; letter-spacing: 0; }
  .nav { padding: 8px 12px; gap: 12px; }
  .brand { flex: 0 0 auto; }   /* don't let logo hog space */
  header.nav nav { gap: 12px; }
}

/* last resort: allow horizontal scroll on very narrow phones */
@media (max-width: 400px) {
  header.nav nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.btn{background:linear-gradient(90deg,var(--accent2),var(--accent));padding:10px 16px;border-radius:12px;font-weight:700;display:inline-block;cursor:pointer}
.btn.small{padding:8px 12px;font-size:14px}
.btn.ghost{background:transparent;border:1px solid #2a365e}
.hero{padding:40px 16px}
.hero-inner{max-width:1100px;margin:0 auto}
h1{font-size:38px;line-height:1.15;margin:10px 0 8px}
.gradient{background:linear-gradient(90deg,#8fb3ff,#b69cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);max-width:760px}
.cta-row{display:flex;gap:12px;margin:16px 0 24px;flex-wrap:wrap}
.generator,.how,.portfolio,.faq,.cta{max-width:1100px;margin:24px auto;padding:0 16px}
/* --- Portfolio Grid --- */
.portfolio .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}


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

.card {
  background: rgba(234, 242, 255, 0.05);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.card h3 {
  margin-top: 10px;
  color: #eaf2ff;
}

.badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(90deg, #8fb3ff, #b69cff);
  padding: 4px 10px;
  border-radius: 12px;
}
h2{font-size:26px;margin:18px 0}
.gen-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{color:#9fb0d9}
textarea,select,input{width:100%;border-radius:12px;border:1px solid #22305a;background:#0e1430;color:#eaf2ff;padding:10px}
.checks{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0}
.out{background:#0c1022;border:1px solid #202748;border-radius:12px;padding:10px;min-height:200px;white-space:pre-wrap}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02));border:1px solid #1b2341;border-radius:16px;padding:16px}
.num{width:28px;height:28px;border-radius:50%;border:1px solid #33406c;display:flex;align-items:center;justify-content:center;margin-bottom:6px;color:#b9c6ef}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02));border:1px solid #1b2341;border-radius:16px;padding:16px}
.badge{display:inline-block;background:#0e1330;border:1px solid #273057;border-radius:999px;padding:4px 8px;font-size:12px;color:#a9b7e3;margin-bottom:8px}
.faq details{background:#0e1330;border:1px solid #273057;border-radius:12px;padding:12px;margin:8px 0}
.cta {
  text-align: center;
}
#signup{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
#signup input{min-width:240px}
.thanks{color:#b4c4ff}
.foot{border-top:1px solid #1b2341;margin-top:30px;padding:20px 16px;text-align:center;color:#9fb0d9}
.small{font-size:12px;color:#7e8fb7}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr 1fr}.gen-grid{grid-template-columns:1fr}}
@media (max-width:640px){h1{font-size:30px}.grid{grid-template-columns:1fr}}
/* Fix nav spacing + sticky header */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: space-between;  /* ✅ logo left, links right */
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  background-color: #111;
}

.nav a {
  text-decoration: none;
  color: white; /* adjust to match theme */
  font-weight: 500;
}

.nav a:hover {
  color: #7e8fb7;          /* soft accent color */
  text-decoration: underline;
  transition: all 0.3s ease;
}
/* Active nav link style */
.nav a.active {
  color: #7e8fb7;       /* same soft accent color */
  text-decoration: underline; 
  font-weight: 600;     /* slightly bolder to stand out */
}
/* ==== Generator form polish ==== */
.generator {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 16px 40px;
}

.gen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* rows stack nicely with even spacing */
.generator .row {
  display: grid;
  grid-template-columns: 160px 1fr; /* label | control */
  align-items: center;
  gap: 12px;
}

/* labels */
.generator label {
  color: #9fb0d9;
  font-size: 14px;
  white-space: nowrap;
}

/* inputs, selects, textarea share a look */
.generator textarea,
.generator select,
.generator input[type="text"] {
  width: 100%;
  background: #0e1430;
  border: 1px solid #22305a;
  color: #eaf2ff;
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* taller idea box */
#idea {
  min-height: 120px;
  resize: vertical;
}

/* focus/hover */
.generator textarea:hover,
.generator select:hover,
.generator input[type="text"]:hover {
  border-color: #2a3a7a;
}
.generator textarea:focus,
.generator select:focus,
.generator input[type="text"]:focus {
  border-color: #5b7cff;
  box-shadow: 0 0 0 3px rgba(91,124,255,.15);
}

/* checkboxes line up and breathe */
.generator .checks {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}
.generator .checks label {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #cbd7ff;
  font-size: 14px;
}
.generator .checks input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #7e8fb7;
}

/* submit button spacing */
#go {
  margin-top: 14px;
  width: 100%;
}

/* section header + helper text */
.generator h2 {
  margin: 6px 0 8px;
}
.generator .muted {
  color: #7e8fb7;
  margin: 0 0 18px;
}

/* Responsive tweaks */
@media (max-width: 780px) {
  .generator .row {
    grid-template-columns: 1fr; /* stack label over control */
  }
  .generator label {
    margin-bottom: 4px;
  }
}
/* --- Hamburger toggle (hidden on desktop) --- */
.menu-toggle {
  display: none;
  width: 40px; height: 40px;
  padding: 8px;
  border: 1px solid rgba(234,242,255,0.2);
  border-radius: 10px;
  background: transparent;
  align-items: center; justify-content: center;
  gap: 4px; cursor: pointer;
}
.menu-toggle span {
  display: block; width: 100%; height: 2px;
  background: #eaf2ff;
  transition: transform .2s ease, opacity .2s ease;
}
header.nav.open .menu-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- Site menu (links) --- */
.site-menu {
  display: flex;
  gap: 16px;
}

/* Hide menu on mobile until opened */
@media (max-width: 860px) {
  .site-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 64px;
    right: 16px;
    background: rgba(20, 20, 35, 0.95);
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 1000;
  }

  header.nav.open .site-menu {
    display: flex;
  }

  .site-menu a {
    padding: 8px 12px;
    white-space: nowrap;
  }
}

/* --- Mobile layout --- */
@media (max-width: 860px) {
  /* you already have more rules here */
  .menu-toggle { display: flex; }
  /* etc */
}

/* Animate to an "X" when open */
header.nav.open .menu-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
header.nav.open .menu-toggle span:nth-child(2) { opacity: 0; }
header.nav.open .menu-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- Mobile layout --- */
@media (max-width: 860px) {
  /* show button, hide links by default */
  .menu-toggle { display: inline-flex; }
  header.nav { position: sticky; top: 0; z-index: 1000; }

  header.nav #site-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column;
    gap: 12px; padding: 12px 16px 16px;
    background: rgba(17,17,17,0.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(234,242,255,0.08);
  }
  header.nav.open #site-menu { display: flex; }

  /* tidy link styles in the dropdown */
  header.nav #site-menu a {
    white-space: normal; /* allow wrapping inside dropdown */
    padding: 8px 4px;
  }

  /* keep brand + button on one line */
  header.nav {
    display: flex; align-items: center; justify-content: space-between;
  }
  header.nav .brand { flex: 1 1 auto; }
}

/* Desktop keeps your current horizontal nav */
@media (min-width: 861px) {
  .menu-toggle { display: none; }
  header.nav #site-menu { position: static; display: flex; }
}
/* --- Mobile layout --- */
@media (max-width: 860px) {
  .site-menu a {
    padding: 8px 12px;
    white-space: nowrap;
  }
}   /* ← this closing curly ends the media query */


/* --- FAQ Section --- */
/* Collapsible FAQ items */
.faq-list details {
  margin: 12px 0;
  border-radius: 10px;
  background: rgba(234, 242, 255, 0.05);
  border: 1px solid rgba(234, 242, 255, 0.08);
  box-shadow:
.faq {
  padding: 60px 20px;
  max-width: 800px;
  margin: 0 auto;
}

.faq h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  text-align: center;
  color: #eaf2ff;
}

.faq-list article {
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 8px;
  background: rgba(234, 242, 255, 0.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.faq-list h3 {
  font-size: 1.25rem;
  margin-bottom: 8px;
  color: #eaf2ff;
}

.faq-list p {
  line-height: 1.6;
  color: #ccc;
}
/* --- Generator Output Area --- */
.output {
  background: rgba(234, 242, 255, 0.05);
  border: 1px solid #333;
  border-radius: 8px;
  padding: 16px;
  margin-top: 20px;
  font-family: monospace;
  white-space: pre-wrap; /* keep line breaks */
  color: #eaf2ff;
}

.out-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
/* --- FAQ (collapsible) --- */
.faq { padding: 60px 20px; max-width: 800px; margin: 0 auto; }
.faq h2 { font-size: 2rem; margin-bottom: 20px; text-align: center; color: #eaf2ff; }

.faq-list details {
  margin: 12px 0;
  border-radius: 10px;
  background: rgba(234,242,255,0.05);
  border: 1px solid rgba(234,242,255,0.08);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  padding: 12px 16px;
  transition: border-color .2s ease, background .2s ease;
}

.faq-list details:hover {
  border-color: rgba(234,242,255,0.18);
}

.faq-list summary {
  list-style: none;         /* hide default triangle (Firefox) */
  cursor: pointer;
  font-weight: 600;
  color: #eaf2ff;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Hide default marker (Chromium/WebKit) */
.faq-list summary::-webkit-details-marker { display: none; }

/* Custom caret */
.faq-list summary::before {
  content: "▸";
  display: inline-block;
  transform: translateY(1px);
  transition: transform .2s ease;
  opacity: 0.85;
}

/* Rotate when open */
.faq-list details[open] summary::before {
  transform: rotate(90deg) translateY(-1px);
}

/* Answer body */
.faq-list details > p {
  margin-top: 10px;
  color: #ccc;
  line-height: 1.6;
}

/* Subtle open animation */
.faq-list details[open] > p {
  animation: faqFade .18s ease;
}
@keyframes faqFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* FAQ Accordion Styles */
.faq details {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
  transition: background 0.3s;
}

.faq details[open] {
  background: #fff;
  border-color: #ccc;
}

.faq summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Custom arrow */
.faq summary::after {
  content: "▸";
  position: absolute;
  right: 0;
  transition: transform 0.3s;
}

.faq details[open] summary::after {
  transform: rotate(90deg);
  content: "▾";
}

.faq p {
  margin-top: 0.5rem;
  line-height: 1.4;
}
/* === Waitlist Form === */
.waitlist {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin: 28px 0 12px;
}
.waitlist input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(234,242,255,.15);
  background: #0f1320;
  color: #eaf2ff;
}
.waitlist label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #98a3c7;
}
/* --- Mobile Nav Fix --- */
@media (max-width: 768px){
  header.nav { position: relative; z-index: 1000; }
  .site-menu{
    display: none;
    position: absolute;
    top: 64px;                 /* below header */
    left: 16px; right: 16px;
    padding: 16px;
    gap: 12px;
    flex-direction: column;
    background: #0e1330;
    border: 1px solid rgba(234,242,255,0.08);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  }
  header.nav.open .site-menu{
    display: flex;             /* reveal when .open */
  }

  /* Make sure links fill width nicely on mobile */
  .site-menu a{
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
  }
}
/* === Footer === */
.footer{
  max-width:1100px;
  margin:60px auto 24px;
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#98a3c7;
}
.footer nav{display:flex;gap:16px;flex-wrap:wrap}
.footer a{color:#98a3c7;text-decoration:none}
.footer a:hover{text-decoration:underline}
/* =================== MOBILE NAV =================== */
.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background: #333; /* or white if dark header */
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* Hide nav by default on mobile */
.site-menu {
  display: none;
  flex-direction: column;
  gap: 15px;
  background: #fff;
  position: absolute;
  top: 60px; /* adjust based on header height */
  right: 20px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  border-radius: 8px;
}

/* Show menu when .open is toggled */
header.nav.open .site-menu {
  display: flex;
}
/* =================== FAQ Accordion =================== */
.faq { margin: 40px auto; }
.faq-list {
  display: grid;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.faq-list details {
  background: rgba(234, 242, 255, 0.05);
  border: 1px solid #1b2341;
  border-radius: 12px;
  padding: 14px 18px;
  transition: border-color .2s ease, background .2s ease;
}

.faq-list details[open] {
  background: rgba(234, 242, 255, 0.08);
  border-color: #22305d;
}

.faq-list summary {
  cursor: pointer;
  list-style: none;           /* hide default marker */
  font-weight: 700;
  color: #eaf2ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-list summary::-webkit-details-marker { display: none; }

/* Caret */
.faq-list summary::after {
  content: "▸";
  font-size: 14px;
  transform: rotate(0deg);
  transition: transform .2s ease;
  margin-left: 12px;
  opacity: .8;
}
.faq-list details[open] summary::after {
  transform: rotate(90deg);
}

/* Answer text */
.faq-list p {
  margin: 10px 0 0;
  line-height: 1.6;
  color: #b9c6ff;
}

/* Better anchor scroll (sticky header offset) */
#faq { scroll-margin-top: 90px; }

/* =================== Deliverables =================== */
#deliverables { scroll-margin-top: 90px; }

.deliverables { 
  max-width: 1100px; 
  margin: 24px auto; 
  padding: 0 16px; 
}

.deliverables h2 { 
  font-size: 26px; 
  margin: 18px 0; 
}

.deliverables .center { 
  text-align: center; 
}

.deliv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.dcard {
  background: rgba(234, 242, 255, 0.05);
  border: 1px solid #1b2341;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.dcard h3 { 
  margin: 6px 0 8px; 
  color: #eaf2ff; 
  font-size: 18px; 
}

.dcard p { 
  color: #b9c6ff; 
  line-height: 1.6; 
}

/* responsive */
@media (max-width: 900px) {
  .deliv-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .deliv-grid { grid-template-columns: 1fr; }
}
/* =================== Unicorn Replicas =================== */
.replicas { max-width:1100px; margin:24px auto; padding:0 16px; }
.replicas h2 { font-size:26px; margin:18px 0; text-align:center; }
.replicas .center { text-align:center; }

.rep-grid {
  display:grid; gap:16px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px){ .rep-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .rep

/* FAQ Section */
.faq {
  padding: 3rem 1rem;
  max-width: 800px;
  margin: 0 auto;
}

.faq h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #ffffff;
}

.faq article {
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 1.2rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.faq h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: #00d4ff; /* accent color */
}

.faq p {
  margin: 0;
  line-height: 1.5;
  color: #ddd;
}

/* Timeline Section */
.timeline {
  padding: 3rem 1rem;
  background: #0b0d17; /* dark bg for contrast */
  color: #fff;
  text-align: center;
}

.timeline h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.timeline .muted {
  font-size: 1rem;
  opacity: 0.8;
  margin-bottom: 2rem;
}

.timeline-grid {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.timeline .tcard {
  background: #1c1f2a;
  border-radius: 12px;
  padding: 1.5rem;
  width: 260px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: transform 0.2s ease;
}

.timeline .tcard:hover {
  transform: translateY(-6px);
}

.timeline .tcard h3 {
  font-size: 1.3rem;
  color: #4ade80; /* highlight green */
  margin-bottom: 0.5rem;
}

.timeline .tcard p {
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ---- Shared card/grid primitives ---- */
.grid-3 {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cardish {
  background: #1c1f2a;
  border-radius: 12px;
  padding: 1.5rem;
  width: 260px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: transform 0.2s ease;
}
.cardish:hover { transform: translateY(-6px); }
.cardish h3 { font-size: 1.15rem; color: #4ade80; margin-bottom: .5rem; }
.cardish p  { font-size: .95rem; line-height: 1.45; }

/* ---- Timeline (already added) ---- */
.timeline { padding: 3rem 1rem; background:#0b0d17; color:#fff; text-align:center; }
.timeline h2 { font-size: 1.8rem; margin-bottom: 1rem; }
.timeline .muted { font-size: 1rem; opacity:.8; margin-bottom: 2rem; }
.timeline-grid { composes: grid-3; }          /* if your bundler doesn’t support composes, keep both classes in HTML */

/* ---- Deliverables: match Timeline ---- */
.deliverables { padding: 3rem 1rem; background:#0b0d17; color:#fff; text-align:center; }
.deliverables h2 { font-size: 1.8rem; margin-bottom: 1rem; }
.deliverables .muted { font-size: 1rem; opacity:.8; margin-bottom: 2rem; }
.deliv-grid { composes: grid-3; }
.dcard { composes: cardish; }
.dcard h3 { color:#60a5fa; } /* blue accent for variety vs. timeline’s green */

/* Social Proof */
.proof { padding: 3rem 1rem; background:#0b0d17; color:#fff; text-align:center; }
.proof h2 { font-size:1.8rem; margin-bottom: .5rem; }
.proof .muted { opacity:.85; margin-bottom:1.5rem; }
.logo-row { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin: 0 auto 2rem; max-width:900px; }
.logo-pill { padding:.6rem .9rem; border-radius:999px; background:#1c1f2a; border:1px solid rgba(255,255,255,.06); font-size:.9rem; }
.quote-grid { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.qcard { background:#1c1f2a; color:#e7e7e7; border-radius:12px; padding:1.1rem 1.2rem; width:300px; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.qcard p { margin:0 0 .6rem; line-height:1.45; }
.qcard footer { opacity:.75; font-size:.9rem; }

/* =================== SOCIAL PROOF =================== */
.social-proof {
  padding: 4rem 2rem;
  background: #f9fafc;
  text-align: center;
}

.social-proof h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.social-proof .muted {
  margin-bottom: 2rem;
}

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

.pitem {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0

/* === Header layout fixes === */
header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg, #0b0b12);
}
header .brand,
header .menu-toggle,
header .site-menu {
  /* ensure flex children behave predictably */
  flex: 0 0 auto;
}

/* Put the header on a single row and push the toggle to the right */
header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.menu-toggle { margin-left: auto; }   /* <- pushes hamburger to the right */

/* Mobile: hide menu links by default */
.site-menu { display: none; }

/* Desktop: hide hamburger, show links and right-align them */
@media (min-width: 768px) {
  .menu-toggle { display: none; }
  .site-menu {
    display: flex;
    gap: 18px;
    margin-left: auto;                /* links align right on desktop */
  }
}

/* Optional: a subtle shadow under sticky header */
header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.08), transparent);
}

.site-menu.open { display: block; }        /* mobile open state */
@media (min-width: 768px){ .site-menu.open { display: flex; } }

/* Put header items on one line and push the button to the right */
header { display: flex; align-items: center; }
.menu-toggle { margin-left: auto; }

/* Force header items into flex row and push menu toggle right */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .menu-toggle {
  margin-left: auto;
  order: 2; /* push to far right */
}

/* --- Force hamburger to the far right regardless of layout --- */
header { position: relative; }  /* anchor for absolute child */

header .menu-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;   /* override earlier margins */
  order: 0 !important;    /* ignore flex order tricks */
}
/* Hard-fix hamburger placement & open state (scoped to header.nav) */
header.nav { position: relative; display: flex; align-items: center; padding: 12px 16px; }

header.nav > .menu-toggle {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

#site-menu { display: none; }
#site-menu.open { display: flex; flex-direction: column; gap: .75rem; padding-top: .5rem; }

@media (min-width: 768px) {
  header.nav > .menu-toggle { display: none !important; }
  #site-menu { display: flex !important; flex-direction: row; gap: 18px; margin-left: auto; padding-top: 0; }
}
/* === Fix hamburger icon states === */
.menu-toggle span{
  display:block;
  width:24px;
  height:2px;
  margin:6px 0;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

/* CLOSED (hamburger visible) */
.menu-toggle[aria-expanded="false"] span:nth-child(1){ transform:none; }
.menu-toggle[aria-expanded="false"] span:nth-child(2){ opacity:1; }
.menu-toggle[aria-expanded="false"] span:nth-child(3){ transform:none; }

/* OPEN (show X) */
.menu-toggle[aria-expanded="true"] span:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

/* Prevent background scroll when menu is open (optional) */
body.no-scroll{ overflow:hidden; }

/* === Hamburger animation === */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.menu-toggle .bar {
  display: block;
  width: 100%;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Animate into X when open */
.menu-toggle.open .bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.open .bar:nth-child(2) {
  opacity: 0;
}
.menu-toggle.open .bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* === Mobile menu reveal (fade + slide) === */
.site-menu {
  display: none;                 /* hidden by default (mobile) */
  opacity: 0;                    /* for fade */
  transform: translateY(-8px);   /* small upward offset */
  transition: opacity .25s ease, transform .25s ease;
}

/* When JS toggles .open, reveal with animation */
.site-menu.open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Staggered fade for individual links (nice touch) */
.site-menu a {
  display: block;
  padding: 12px 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}

/* Only animate links when menu is open */
.site-menu.open a {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: tiny stagger effect */
.site-menu.open a:nth-child(1) { transition-delay: 40ms; }
.site-menu.open a:nth-child(2) { transition-delay: 80ms; }
.site-menu.open a:nth-child(3) { transition-delay: 120ms; }
.site-menu.open a:nth-child(4) { transition-delay: 160ms; }
.site-menu.open a:nth-child(5) { transition-delay: 200ms; }
.site-menu.open a:nth-child(6) { transition-delay: 240ms; }

/* Desktop: show menu normally (no fade) */
@media (min-width: 768px) {
  .site-menu {
    display: flex;
    opacity: 1;
    transform: none;
  }
  .site-menu a {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* === Hamburger icon visuals === */
.menu-toggle {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* the three bars */
.menu-toggle span {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: currentColor; /* inherits text color */
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}

/* positions for the bars */
.menu-toggle span:nth-child(1) { top: 12px; }
.menu-toggle span:nth-child(2) { top: 17px; }
.menu-toggle span:nth-child(3) { top: 22px; }

/* when menu is open, morph to X */
.menu-toggle.open span:nth-child(1) {
  top: 17px;
  transform: rotate(45deg);
}
.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.open span:nth-child(3) {
  top: 17px;
  transform: rotate(-45deg);
}

/* Optional: prevent background scroll when menu is open (JS toggles .no-scroll) */
.no-scroll { overflow: hidden; }

/* menu closed by default on mobile */
header.nav.__fixed .site-menu {
  display: none;
  flex-direction: column;
  gap: .75rem;
  padding-top: .5rem;
}
header.nav.__fixed .site-menu.open { display: flex; }

/* desktop */
@media (min-width: 768px){
  header.nav.__fixed .menu-toggle { display: none; }
  header.nav.__fixed .site-menu {
    display: flex !important;
    flex-direction: row;
    gap: 18px;
    margin-left: auto;
    padding-top: 0;
  }
}

/* === Wire up the *current* header markup === */
header.wf-header { 
  display: flex; 
  align-items: center; 
  gap: 12px;
}

/* push hamburger to the right */
header.wf-header .wf-hamburger { 
  margin-left: auto; 
}

/* hide the real checkbox */
#wfNavToggle { 
  position: absolute; 
  left: -9999px; 
}

/* mobile: menu closed by default unless checked */
#wfNavToggle:not(:checked) ~ nav.wf-menu { 
  display: none; 
}


/* desktop: show menu, hide hamburger */
@media (min-width: 768px){
  header.wf-header .wf-hamburger { display: none; }
  nav.wf-menu { 
    display: flex !important; 
    gap: 18px; 
    margin-left: auto; 
  }
}

/* Force hamburger to the right */
header.wf-header {
  display: flex;
  align-items: center;
}

header.wf-header .wf-hamburger {
  margin-left: auto !important;
  order: 2 !important;
}

/* Force hamburger & close X to stay on the right */
header.wf-header {
  display: flex;
  align-items: center;
}

header.wf-header .wf-hamburger {
  margin-left: auto !important;
  order: 2 !important;
  position: relative;
  right: 0;
}

/* Align hamburger/X perfectly with brand text */
header.wf-header .wf-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;   /* matches header height */
  padding: 0;     /* no extra padding */
  margin-top: 0;
  margin-bottom: 0;
}

/* Shrink hamburger/X clickable area */
header.wf-header .wf-hamburger {
  width: 32px;   /* smaller box */
  height: 28px;  /* reduce tall feel */
  gap: 4px;      /* less space between bars */
}

header.wf-header .wf-hamburger span {
  height: 2px;   /* thin bars */
  border-radius: 2px;
}

/* Force hamburger to the right side */
header.wf-header {
  display: flex;
  justify-content: space-between; /* logo left, hamburger right */
  align-items: center;
}

header.wf-header .wf-hamburger {
  margin-left: auto;   /* push to far right */
  order: 2;            /* make sure it's after logo */
}

/* Hamburger bars */
.wf-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px 0;
  background: #eaf2ff;
  transition: 0.3s ease;
}

/* When menu is open (checkbox checked), animate into X */
#wfNavToggle:checked + label.wf-hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
#wfNavToggle:checked + label.wf-hamburger span:nth-child(2) {
  opacity: 0;
}
#wfNavToggle:checked + label.wf-hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Keep the hamburger button visible above the menu */
.wf-hamburger {
  position: relative;
  z-index: 1001;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}

/* The three bars */
.wf-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px 0;
  background: #eaf2ff;
  transition: transform .25s ease, opacity .25s ease;
}

/* Fallback "X" built with pseudo-elements so it works even if spans get reset */
.wf-hamburger::before,
.wf-hamburger::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 2px;
  background: #eaf2ff;
  transform-origin: center;
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}

/* When checked: hide the bars and show the X */
#wfNavToggle:checked + label.wf-hamburger span { opacity: 0 !important; }
#wfNavToggle:checked + label.wf-hamburger::before {
  opacity: 1; transform: translateY(-1px) rotate(45deg);
}
#wfNavToggle:checked + label.wf-hamburger::after {
  opacity: 1; transform: translateY(-1px) rotate(-45deg);
}

/* === Unicorn Replicas: mobile readability fix === */
.rep-grid { display: grid; gap: 16px; }

.rcard {
  padding: 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
}

.rcard header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
}

.pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.75rem;
  line-height: 1.2;
  border-radius: 999px;
  background: rgba(234,242,255,0.12);
  color: #eaf2ff;
}

.rcard h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
}

.rcard p {
  font-size: 0.95rem;
  line-height: 1.45;
  color: #cfd3dc;
  margin: 8px 0 12px;
}

.btn.small { font-size: 0.9rem; padding: 8px 12px; }

/* 2 columns on tablets/desktop */
@media (min-width: 768px) {
  .rep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 1024px) {
  .rep-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Prevent iOS/Android from shrinking text unexpectedly */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Set a sane base size and stop nested cards from getting smaller */
body { font-size: 16px; line-height: 1.5; }
.rcard { font-size: 1rem; }     /* keep replica cards readable */

/* Kill any accidental horizontal scroll that forces you to pan to see the header */
html, body { overflow-x: hidden; }

.trustbar { display: none !important; }

/* Prevent long company names from wrapping awkwardly on mobile */
.rcard h3 {
  word-break: keep-all;       /* don't break words mid-word */
  overflow-wrap: anywhere;    /* but allow wrap between words if needed */
  line-height: 1.25;
  margin-top: 2px;
}

/* Keep buttons from wrapping onto two lines */
.rcard .btn.small { white-space: nowrap; }

/* Give the header row a little breathing room */
.rcard header { gap: 8px; align-items: baseline; }

/* Replica card layout: stack category above company title */
.replicas .rep-grid .rcard header {
  display: flex;
  flex-direction: column; /* stack items vertically */
  align-items: flex-start; /* left align */
  gap: 0.25rem; /* small spacing between category and title */
}

.replicas .rep-grid .rcard .pill {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Force replica card titles to stack vertically */
.replicas .rep-grid .rcard header {
  display: flex !important;
  flex-direction: column !important;  /* stack items */
  align-items: flex-start !important; /* align left */
  gap: 0.25rem !important;
}

.replicas .rep-grid .rcard .pill {
  display: block !important;
  font-size: 0.85rem;
  opacity: 0.8;
  margin-bottom: 0.2rem;
}

.replicas .rep-grid .rcard h3 {
  display: block !important;
  margin: 0;
}

/* Force category and title to stack vertically */
.replicas .rep-grid .rcard header {
  display: block !important;
}

.replicas .rep-grid .rcard header .pill {
  display: block !important;
  margin-bottom: 4px;
  font-size: 0.85rem;
  color: #ccc;
}

.replicas .rep-grid .rcard header h3 {
  display: block !important;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

/* Replica card header polish */
.replicas .rep-grid .rcard header {
  display: block !important;       /* stack pill above title */
  margin-bottom: 0.5rem;           /* space between header and description */
}

.replicas .rep-grid .rcard .pill {
  display: inline-block !important;
  font-size: 0.75rem;               /* smaller pill text */
  font-weight: 500;
  color: #9ca3af;                   /* light gray text */
  margin-bottom: 0.25rem;           /* tighten space above title */
}

.replicas .rep-grid .rcard h3 {
  display: block !important;
  color: #fff !important;           /* keep titles white */
  font-weight: 700;                 /* stronger than pill */
  font-size: 1rem;
  margin: 0;                        /* remove weird gaps */
  line-height: 1.3;
}

/* Reduce vertical spacing between replica cards */
.replicas .rep-grid .rcard {
  margin-bottom: 1.25rem;   /* tighten space between cards */
  padding-bottom: 0.75rem;  /* slight padding inside each card */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* subtle divider */
}

/* Kill any leftover "As featured in" / trust sections + spacing */
.trustbar,
section:has(.trust-logos),
section:has(.trust-title) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

<style>
  /* Prevent sideways scroll on mobile */
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* Ensure all sections fit screen */
  section, div, header, footer {
    max-width: 100% !important;
    box-sizing: border-box;
  }
</style>

<style>
  /* Layout: stack cards flush with even spacing */
  .replicas .rep-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .replicas .rcard {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Header formatting */
  .replicas .rcard header { display:block !important; }
  .replicas .rcard header .pill {
    display:inline-block !important;
    margin: 0 0 .3rem 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    font-weight: 600 !important;
    color: #a5b4fc !important;
  }
  .replicas .rcard header h3 {
    margin:0 !important;
    font-weight:600; font-size:1rem; color:#fff !important;
  }
  /* Button readability (you already added—keeping for completeness) */
  .replicas .rcard button.btn.small {
    color:#fff !important; font-weight:700 !important;
    text-shadow:0 1px 2px rgba(0,0,0,.6) !important;
  }
</style>

<style>
/* Fix footer cutoff + center align links */
footer.footer {
  padding-bottom: 2.5rem !important; /* extra space */
  text-align: center !important;     /* center everything */
}

footer.footer nav {
  display: inline-block;             /* shrink to content */
}

footer.footer nav a {
  display: inline-block;
  margin: 0 0.75rem;                 /* spacing between links */
  white-space: nowrap;               /* keep words intact */
}
</style>
</body>
</html>