/* ============================================================
   DIGITAL NEST — Design Tokens & Shared Components
   Palette: deep blue / teal / white (client-directed)
   Display: Space Grotesk  |  Body: Inter
   Signature element: the "Lane" roadmap — a two-lane road showing
   the beginner's lane vs. the Digital Nest lane, merging at each
   milestone. Used on the homepage preview and the full roadmap page.
   ============================================================ */

:root{
  --navy:        #0B2545;
  --navy-2:      #14315C;
  --navy-soft:   #1E3A66;
  --teal:        #0EA5A0;
  --teal-deep:   #0A7C79;
  --teal-tint:   #E6FBF8;
  --amber:       #F5A524;
  --ink:         #0A1626;
  --ink-soft:    #46586E;
  --paper:       #F7FAFC;
  --paper-2:     #EEF3F7;
  --white:       #FFFFFF;
  --line:        #DCE6EE;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-card: 0 1px 2px rgba(11,37,69,0.04), 0 8px 24px rgba(11,37,69,0.08);
  --shadow-pop:  0 10px 30px rgba(11,37,69,0.16);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}
h1,h2,h3,h4,.font-display{
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  word-break: break-word;
}
p{ overflow-wrap: break-word; }

/* Grid items default to a min-width based on their content's natural size,
   which can force text wider than the screen instead of wrapping. This
   resets that so grid children shrink and wrap normally on mobile. */
.grid{ min-width: 0; }
.grid > *{ min-width: 0; }
a{ color: inherit; }
img{ max-width:100%; display:block; }
:focus-visible{ outline: 2px solid var(--teal); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width: 1180px; margin:0 auto; padding: 0 24px; }
@media (max-width: 640px){
  .container{ padding: 0 28px; }
}
@media (max-width: 380px){
  .container{ padding: 0 24px; }
}

/* Extra mobile edge spacing specifically for the hero banner and footer,
   so they feel well-aligned and never sit flush against the screen edge. */
@media (max-width: 640px){
  .hero-inner, .footer-top, .footer-bottom-inner{ padding-left: 32px !important; padding-right: 32px !important; }
}
.section{ padding: 88px 0; }
.section-sm{ padding: 56px 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--teal-deep); background: var(--teal-tint);
  padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(14,165,160,0.25);
}
.eyebrow.on-dark{ color:#BDEFEA; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight: 600; font-size: 15.5px; padding: 13px 26px; border-radius: 10px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  border: 1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--teal); color: var(--white); box-shadow: 0 6px 18px rgba(14,165,160,0.30); }
.btn-primary:hover{ background: var(--teal-deep); }
.btn-outline{ background: transparent; color: var(--white); border-color: rgba(255,255,255,0.35); }
.btn-outline:hover{ background: rgba(255,255,255,0.10); }
.btn-dark{ background: var(--navy); color: var(--white); }
.btn-dark:hover{ background: var(--navy-2); }
.btn-ghost{ background: var(--paper-2); color: var(--navy); }
.btn-ghost:hover{ background: var(--line); }
.btn-sm{ padding: 9px 16px; font-size: 13.5px; border-radius: 8px; }

/* ---------- Nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 60;
  background: rgba(247,250,252,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size: 19px; color: var(--navy); text-decoration:none; }
.brand-mark{
  width: 38px; height:38px; border-radius: 9px;
  background: #fff url('../images/logo-icon.png') center / 76% no-repeat;
  border: 1px solid var(--line);
  flex-shrink:0;
}
.footer-title ~ .brand-mark, .site-footer .brand-mark{
  border-color: rgba(255,255,255,0.18);
}
.nav-link{
  font-size: 14.5px; font-weight: 500; color: var(--ink-soft); text-decoration:none;
  padding: 8px 4px; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease;
}
.nav-link:hover, .nav-link.active{ color: var(--navy); border-bottom-color: var(--teal); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy); color: #C9D6E6; }
.footer-title{ color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; margin-bottom:14px; }
.footer-link{ color:#AFC0D6; text-decoration:none; font-size:14px; display:block; padding:5px 0; transition: color .15s; }
.footer-link:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); }

/* ---------- Cards ---------- */
.card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.trust-chip{
  display:flex; align-items:center; gap:10px; background: var(--white); border:1px solid var(--line);
  border-radius: 999px; padding: 10px 18px; font-size: 13.5px; font-weight: 600; color: var(--navy);
}

/* ---------- Badges ---------- */
.badge-we{
  display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  color:#7A4B00; background: #FFF1D6; border:1px solid #F4D690; padding: 5px 11px; border-radius: 999px;
}
.badge-you{
  display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  color: var(--navy); background: var(--paper-2); border:1px solid var(--line); padding: 5px 11px; border-radius: 999px;
}
.badge-beginner{
  display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; letter-spacing:.03em;
  color: var(--teal-deep); background: var(--teal-tint); border:1px solid rgba(14,165,160,.3); padding:4px 10px; border-radius:999px;
}

/* ============================================================
   SIGNATURE ELEMENT: THE LANE ROADMAP
   Two vertical lanes (You / Digital Nest) merge visually at each
   numbered milestone via a center node + connecting road markings.
   ============================================================ */
.lane-road{ position:relative; }
.lane-road::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, var(--line) 0 10px, transparent 10px 20px);
}
.lane-step{ position:relative; display:grid; grid-template-columns: 1fr 56px 1fr; gap:0; align-items:stretch; margin-bottom: 34px; }
.lane-node{
  position:relative; z-index:2; width:56px; height:56px; border-radius:50%;
  background: var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px;
  box-shadow: 0 0 0 6px var(--paper), var(--shadow-pop); align-self:start; margin-top: 6px;
}
.lane-node.is-nest{ background: var(--teal); }
.lane-card{ background:var(--white); border:1px solid var(--line); border-radius: var(--radius-md); padding: 22px 24px; box-shadow: var(--shadow-card); }
.lane-card.you{ margin-right: 22px; }
.lane-card.nest{ margin-left: 22px; border-color: rgba(14,165,160,.35); }

@media (max-width: 860px){
  .lane-step{ grid-template-columns: 40px 1fr; }
  .lane-road::before{ left:20px; }
  .lane-node{ width:40px; height:40px; font-size:15px; margin-top:2px; }
  .lane-card.you, .lane-card.nest{ margin: 0; }
  .lane-step > .lane-card:nth-of-type(1){ grid-column: 2; }
  .lane-step-inner{ display:flex; flex-direction:column; gap:12px; grid-column:2; }
}

/* ---------- FAQ Accordion ---------- */
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; text-align:left; padding: 20px 4px; cursor:pointer;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; color: var(--navy);
}
.faq-icon{ flex-shrink:0; transition: transform .2s ease; color: var(--teal); }
.faq-item.open .faq-icon{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.faq-a-inner{ padding: 0 4px 20px; color: var(--ink-soft); font-size:14.5px; line-height:1.7; }

/* ---------- WhatsApp floating button ---------- */
.wa-fab{
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  width: 58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 24px rgba(37,211,102,.45);
  text-decoration:none; transition: transform .15s ease;
}
.wa-fab:hover{ transform: scale(1.06); }
.wa-fab::after{
  content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid #25D366; opacity:.55;
  animation: wa-pulse 2.2s ease-out infinite;
}
@keyframes wa-pulse{ 0%{ transform:scale(.85); opacity:.55;} 100%{ transform:scale(1.25); opacity:0;} }

/* ---------- Mobile nav ---------- */
#mobileMenu{ display:none; }
#mobileMenu.open{ display:block; }

/* ---------- Legal page prose ---------- */
.legal h2{ font-size:20px; margin-top: 40px; color: var(--navy); }
.legal h3{ font-size:16px; margin-top: 24px; color: var(--navy); }
.legal p, .legal li{ color: var(--ink-soft); font-size: 15px; line-height: 1.8; }
.legal ul{ padding-left: 20px; }
.legal .updated{ color: var(--ink-soft); font-size: 13.5px; }

/* ---------- Misc ---------- */
.hero-grid-bg{
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 42px 42px;
}
.stat-num{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size: 34px; color: var(--navy); }