/* =========================================================
   Root variables & design system
   ========================================================= */
:root{
  /* Lighter background system */
  --bg: #f6f8fc;
  --bg-top: #ffffff;
  --panel: #ffffff;
  --panel2: #f1f4fa;

  /* Text */
  --text: #0f172a;
  --muted: #475569;
  --subtle: #64748b;

  /* Borders & effects */
  --border: #e2e8f0;
  --border-soft: #dbe3ef;
  --shadow: 0 10px 30px rgba(15,23,42,0.08);
  --shadow-soft: 0 8px 24px rgba(15,23,42,0.06);

  /* Brand accents */
  --accent-primary: #2563eb;   /* blue */
  --accent-secondary: #7c3aed; /* violet */

  /* Layout */
  --radius: 18px;
  --radius-sm: 12px;
  --max: 1100px;
  --pad: clamp(16px, 3.2vw, 28px);
  --lead: clamp(18px, 2.2vw, 22px);
  --h1: clamp(34px, 5.2vw, 54px);
  --h2: clamp(22px, 2.6vw, 28px);
  --h3: 18px;
  --gap: clamp(14px, 2vw, 18px);

  --focus: rgba(37,99,235,0.35);

  /* Snake sizing */
  --snake-spine: 4px;
  --snake-gap: 28px;        /* gap from spine to card arrow tip */
  --snake-dot: 14px;        /* dot size */
  --snake-track: 44px;      /* middle column width (dot + breathing room) */
}

/* =========================================================
   Base reset
   ========================================================= */
*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  line-height: 1.5;
}

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

/* =========================================================
   Accessibility
   ========================================================= */
.skip{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left: 12px; top: 12px; width:auto; height:auto; padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 10px;
}

/* =========================================================
   Header & navigation (buttons under navlinks)
   ========================================================= */
header{
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.75);
  border-bottom: 1px solid rgba(15,23,42,0.08);
}

.nav{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.logo{
  width: 34px; height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: #fff;
  display:grid; place-items:center;
  box-shadow: 0 10px 20px rgba(15,23,42,0.10);
  font-size: 14px;
}

.navlinks{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.navlinks a{
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--muted);
}
.navlinks a:hover{
  background: rgba(15,23,42,0.04);
  color: var(--text);
  text-decoration: none;
}

.cta{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 18px rgba(15,23,42,0.06);
}
.btn:hover{
  background: rgba(15,23,42,0.02);
  text-decoration:none;
}

.btn.primary{
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: #fff;
  border: none;
}
.btn.primary:hover{ opacity: 0.92; }

/* =========================================================
   Layout
   ========================================================= */
main{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) 70px;
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  padding: 56px 0 24px;
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
}
.hero--plain{
  background: transparent;
  border: none;
  box-shadow: none;
  padding-top: 42px;
}
@media (max-width: 920px){
  .hero{ grid-template-columns: 1fr; }
}

h1{
  font-size: var(--h1);
  margin: 14px 0 12px;
  line-height: 1.06;
  letter-spacing: -0.8px;
}
.lead{
  font-size: var(--lead);
  color: var(--muted);
  max-width: 60ch;
  margin: 0 0 18px;
}

.hero-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.hero-actions--contact{ margin-top: 16px; }

.hero-card{
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.78);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.hero-card-title{
  display:block;
  font-size: 16px;
  margin-bottom: 6px;
  font-weight: 800;
}
.hero-card-lead{
  margin:0;
  color: var(--muted);
}

/* =========================================================
   Pills / highlights
   ========================================================= */
.pillrow{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.pill{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.70);
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

/* =========================================================
   Stats grid
   ========================================================= */
.statgrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 520px){
  .statgrid{ grid-template-columns: 1fr; }
}
.stat{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.70);
  padding: 12px;
  min-height: 76px;
}
.stat .label{ color: var(--subtle); font-size: 13px; font-weight: 700; }
.stat .value{ font-size: 15px; font-weight: 800; margin-top: 6px; }

/* =========================================================
   Sections
   ========================================================= */
section{
  margin-top: 28px;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.78);
  box-shadow: var(--shadow-soft);
}
section h2{
  font-size: var(--h2);
  margin: 0 0 8px;
  letter-spacing: -0.2px;
}
section p{ color: var(--muted); margin: 8px 0 0; max-width: 82ch; }

/* =========================================================
   Grids & cards
   ========================================================= */
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  margin-top: 16px;
}

.card{
  grid-column: span 6;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(15,23,42,0.08);
  padding: 16px;
}
@media (max-width: 900px){
  .card{ grid-column: span 12; }
}

.card h3{
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: -0.1px;
}
.card p{ margin: 0; color: var(--muted); }
.card ul{
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.card li{ margin: 6px 0; }

/* =========================================================
   Split layout
   ========================================================= */
.split{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--gap);
  margin-top: 14px;
}
@media (max-width: 920px){
  .split{ grid-template-columns: 1fr; }
}

/* =========================================================
   Bulleted lists
   ========================================================= */
.bullets{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.bullets li{ margin: 7px 0; }

/* =========================================================
   Banner (positioning box)
   ========================================================= */
.banner{
  margin-top: 16px;
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.70);
}
.banner-title{ display:block; margin-bottom: 8px; font-weight: 800; }
.banner-text{ margin:0; color: var(--muted); }

/* =========================================================
   Contact tip
   ========================================================= */
.tip{
  margin-top: 12px;
  color: var(--subtle);
  font-size: 13px;
}

/* =========================================================
   Footer
   ========================================================= */
.footer{
  margin-top: 28px;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.70);
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
  color: var(--subtle);
}
.footer a{ color: var(--muted); }
.footer-links{ display:flex; gap:12px; flex-wrap:wrap; }

/* =========================================================
   HOW IT WORKS — snake/timeline visualization (FIXED)
   ========================================================= */
/* IMPORTANT: You currently have TWO workflows (snake + .steps).
   Keep ONLY the snake in HTML to avoid clutter. */

.how-snake{
  position: relative;
  margin-top: 18px;
  padding: 10px 0;
}

/* spine */
.how-snake::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: var(--snake-spine);
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
}

/* each row */
.how-step{
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--snake-track) 1fr;
  align-items: center; /* align dot center with card center */
  padding: 10px 0;
}

/* dot is always centered */
.how-dot{
  grid-column: 2 / 3;
  justify-self: center;
  width: var(--snake-dot);
  height: var(--snake-dot);
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 0 0 3px rgba(15,23,42,0.10),
    0 0 0 6px rgba(37,99,235,0.12);
}

/* card base */
.how-card{
  position: relative; /* <-- THIS FIXES ARROW POSITIONING */
  width: min(520px, 90%);
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

/* left vs right placement */
.how-step .how-card{
  grid-column: 1 / 2;
  justify-self: end;
}
.how-step.is-right .how-card{
  grid-column: 3 / 4;
  justify-self: start;
}

/* top row (number + title) */
.how-top{
  display:flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.how-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: #fff;
  font-weight: 900;
  flex: 0 0 auto;
}
.how-step h3{
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.1px;
}
.how-step p{
  margin: 0;
  color: var(--muted);
}

/* arrow connector: anchor to card, point toward spine */
.how-card::after{
  content:"";
  position:absolute;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,0.70);
  border-right: 1px solid rgba(15,23,42,0.10);
  border-bottom: 1px solid rgba(15,23,42,0.10);
  right: calc(-1 * (var(--snake-gap) - 8px)); /* reach toward spine */
  border-radius: 2px;
}

.how-step.is-right .how-card::after{
  left: calc(-1 * (var(--snake-gap) - 8px));
  right: auto;
  transform: translateY(-50%) rotate(135deg);
}

/* spacing so arrow reaches the spine visually */
.how-step .how-card{ margin-right: var(--snake-gap); }
.how-step.is-right .how-card{ margin-left: var(--snake-gap); margin-right: 0; }

/* mobile: collapse to single column, spine to the left */
@media (max-width: 900px){
  .how-snake::before{
    left: 18px;
    transform: none;
  }

  .how-step{
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 0;
  }

  .how-dot{
    grid-column: 1 / 2;
    justify-self: center;
    margin-top: 10px;
  }

  .how-step .how-card,
  .how-step.is-right .how-card{
    grid-column: 2 / 3;
    justify-self: stretch;
    width: 100%;
    margin: 0;
  }

  .how-card::after{ display:none; }
}

/* =========================================================
   Snake alignment FIX — align dot to step header
   ========================================================= */

/* Make how-step a positioning context */
.how-step {
  position: relative;
}

/* Position dot relative to the title row, not card center */
.how-dot {
  position: absolute;
  top: 28px; /* aligns with .how-top vertically */
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

/* Ensure card arrow aligns with the same axis */
.how-card::after {
  top: 28px;
  transform: translateY(-50%) rotate(-45deg);
}

.how-step.is-right .how-card::after {
  top: 28px;
  transform: translateY(-50%) rotate(135deg);
}

/* Mobile adjustment */
@media (max-width: 900px) {
  .how-dot {
    top: 32px;
    left: 18px;
    transform: none;
  }
}