:root{
  --container: 1200px;
  --pad: 20px;
  --ink: #0f1b3d;
  --muted: rgba(15,27,61,.72);
  --line: rgba(0,0,0,.08);
  --bg: #ffffff;
  --brand: #ff2d2d;
  --shadow: 0 10px 30px rgba(15,27,61,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  color: var(--ink);
  background: var(--bg);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.btn:active{transform: translateY(1px)}
.btn--primary{
  background: var(--brand);
  color: #fff;
  box-shadow: 0 12px 24px rgba(255,45,45,.22);
}
.btn--primary:hover{box-shadow: 0 16px 30px rgba(255,45,45,.28)}
.btn--ghost{
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover{border-color: rgba(0,0,0,.16)}
.btn--outline{
  background: transparent;
  border-color: rgba(255,45,45,.35);
  color: var(--brand);
}
.btn--outline:hover{border-color: rgba(255,45,45,.55)}

/* Hero */
.hero{
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--line);

  position: relative;
}
.hero__img{
  width: 100%;
  height: auto;
  display: block;
  /* allow clicking hotspots placed above the image */
  pointer-events: none;

  position: relative;
  z-index: 1;
}

/* --- Hero hotspots (clickable areas on top of hero.png) --- */
.hero-media{ position: relative; }
/* index.html uses .hero__visual as the hero media wrapper */
.hero__visual{ position: relative; }
/* ensure hotspot container fills the hero image area */
.hero__hotspots{ position:absolute; inset:0; z-index: 6; }
.hero-hotspot{
  position: absolute;
  display: block;
  border-radius: 999px;
  z-index: 5;
  background: transparent;

  pointer-events: auto;
}

/* Top-right Login pill in the hero header */
.hero-hotspot--login{
  /* enlarge hotspot so the top-right pill is always clickable */
  top: 1.2%;
  right: 2.5%;
  width: 22.0%;
  height: 12.0%;
}

/* Bottom-left "START WITH US" pill inside hero */
.hero-hotspot--demo{
  /* enlarge hotspot so the visible button inside hero image is always clickable */
  top: 72.0%;
  left: 4.0%;
  width: 28.0%;
  height: 12.5%;
}

.hero-hotspot:focus-visible{
  outline: 3px solid rgba(220, 38, 38, 0.35);
  outline-offset: 4px;
}
/* Sections full width images */
.section{background:#fff}
.fullbleed{width:100%; margin:0; padding:0}
.section__img img{width:100%; height:auto}

/* Separator */
.section + .section{border-top: 1px solid var(--line)}

/* Footer CTA card — overlay on footer image (moved up to avoid text collision) */
.footer-section{ position: relative; }

.footer-cta{
  position: absolute;
  left: 0;
  right: 0;
  /* move the card into the empty area above skyline */
  /* moved up by +40px to avoid overlapping the building pillar */
  bottom: clamp(510px, calc(20vw + 70px), 690px);
  background: transparent;
  padding: 0;
  border-top: 0;
}

.footer-cta__inner{
  width: min(var(--container), calc(100% - 2*var(--pad)));
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

.footer-cta h2{margin:0 0 6px 0; font-size:20px; letter-spacing:-0.01em}
.footer-cta p{margin:0; color: var(--muted); font-size:13px; line-height:1.5}
.footer-cta__actions{display:flex; gap:10px; flex-wrap:wrap}

@media (max-width: 900px){
  .footer-cta{
    /* moved up by +40px on smaller screens as well */
    bottom: clamp(270px, calc(18vw + 70px), 390px);
  }
  .footer-cta__inner{
    flex-direction: column;
    align-items: flex-start;
  }
}


/* spacing tweak: give more air between partners and footer brand */
.partners-section{padding-bottom: 64px !important;}
.partners{margin-bottom: 48px !important;}
.site-footer .footer-brand{margin-top: 48px !important;}
