:root{
  --blue: #2F6FAE;
  --dark: #123A5A;
}

/* Page center */
html, body { height: 100%; margin: 0; }

/* Home background + base typography */
body.home{
  padding: 0;
  display: block;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: #fff; /* or whatever base you want */
}


/* Your fixed design frame */
.desktop{
  position: relative;
  width: 1440px;
  height: 1024px;          /* use height for predictable scale */
  margin: 0 auto;
  transform-origin: top left;
}

/* Mobile: scale desktop down to fit screen width */
@media (max-width: 600px){

  :root{
    --scale: calc(100vw / 1440);
  }

  .desktop{
    transform: scale(var(--scale));
    transform-origin: top left;
  }

  /* Make the page the correct height AFTER scaling */
  .pageScroll{
    height: calc(1024px * var(--scale));
  }

  body.home{
    margin: 0;
    overflow: visible;
    min-height: calc(1024px * var(--scale));
  }
}

.heroButtons{
  margin-top: 28px;
  display: flex;
  gap: 30px;
}

.lite-btn,
.pro-features-btn{
  position: static; /* important */
}


.desktop { position: relative; } /* if not already */

.heroCopy{
  position: absolute;
  left: 90px;
  top: 260px;
  max-width: 640px;
  z-index: 2;
}


.heroCopy .subheadline{
  margin-top: 14px;
  font-size: 24px;
  line-height: 1.55;
  color: rgba(0,0,0,0.62);
  max-width: 620px;
}


/* The hero image now lives in the same layout system */
.hero-img{
  position: absolute;
  inset: 0;               /* fill desktop */
  width: 100%;
  height: 100%;
  object-fit: cover;      /* same idea as background-size: cover */
  object-position: center;
  z-index: 0;             /* behind everything */
  pointer-events: none;
}

/* Your UI already uses z-index:2, but make it explicit */
.logo, .nav, .pro-btn, .card{
  position: absolute;
  z-index: 2;
}



/*Allows for scrolling page on mobile*/
.pageScroll{
  width: 100%;
  overflow: visible;
}


/* Logo */
.logo{
  position:absolute;
  left:38px; top:31px;
  font-weight:700;
  font-size:34px;
  line-height:41px;
  letter-spacing:-0.04em;
  color:var(--blue);
  z-index:2;
}

/* Nav items */
.nav{
  position:absolute;
  left:527px; top:35px;
  display:flex;
  gap:32px;
  z-index:2;
  font-weight:600;
  font-size:25px;
  line-height:30px;
  letter-spacing:-0.04em;
  color:var(--blue);
}
.nav a{ color:inherit; text-decoration:none; }
.nav a:hover{ text-decoration:underline; }

/* Pro Login button */
.pro-btn{
  position:absolute;
  left:1135px; top:27px;
  width:135px; height:51px;
  border-radius:10px;
  background:var(--blue);
  color:#fff;
  font-family:"Inclusive Sans", Inter, sans-serif;
  font-size:24px;
  display:flex;
  justify-content:center;
  align-items:center;
  letter-spacing:-0.04em;
  z-index:2;
  cursor:pointer;
  border:none;
}

/* Hero headline */
.headline{
  position: static;   /* important */
  width: 750px;
  font-weight: 700;
  font-size: 65px;
  line-height: 85px;
  letter-spacing: -0.01em;
  color: var(--dark);
}


/* Run Free Lite Version Button */
.lite-btn{
  width:343px; height:73px;
  border-radius:10px;
  background:var(--blue);
  color:#fff;
  font-weight:700;
  font-size:29px;
  display:flex;
  justify-content:center;
  align-items:center;
  letter-spacing:-0.04em;
  z-index:2;
  cursor:pointer;
  border:none;

  /* if this is <a>, not <button> */
  text-decoration:none;
}

/* See Pro Features Button */
.pro-features-btn{
  width:343px; height:73px;
  border-radius:10px;
  background:#fff;
  color:var(--blue);
  font-weight:700;
  font-size:29px;
  display:flex;
  justify-content:center;
  align-items:center;
  letter-spacing:-0.04em;
  z-index:2;
  cursor:pointer;
  border:2px solid rgba(47,111,174,0.25);
}

/* Bottom feature cards */
.card{
  position:absolute;
  width:387px;
  height:211px;
  background:#fff;
  border:1px solid var(--blue);
  border-radius:20px;
  z-index:2;
  padding:18px 20px;
  box-sizing:border-box;
}
.card h3{
  margin:0;
  font-size:26px;
  line-height:31px;
  letter-spacing:-0.04em;
  color:var(--blue);
  font-weight:700;
  text-align:center;
}
.card .item{
  margin-top:12px;
  font-size:24px;
  line-height:29px;
  letter-spacing:-0.04em;
  color:var(--blue);
  font-weight:400;
  text-align:center;
}

/* Card positions */
.card.one{ left:100px; top:802px; }
.card.two{ left:527px; top:802px; }
.card.three{ left:954px; top:802px; }

/* Modal overlay */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 28, 0.55);
  backdrop-filter: blur(1px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.hidden{ display:none; }

.modal{
  width: min(560px, calc(100vw - 32px));
  background: #fff;
  border-radius: 14px;
  padding: 26px 26px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  position: relative;
  border: 1px solid rgba(47,111,174,0.25);
}

.modal-title{
  margin: 0 0 18px;
  font-size: 34px;
  font-weight: 700;
  color: var(--dark);
}

.modal-close{
  position: absolute;
  top: 14px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #1f2b3a;
  border-radius: 10px;
}
.modal-close:hover{ background: rgba(0,0,0,0.05); }

.modal-input{
  width: 100%;
  height: 48px;
  border-radius: 10px;
  border: 2px solid rgba(47,111,174,0.45);
  padding: 0 14px;
  font-size: 18px;
  outline: none;
  margin: 10px 0;
  box-sizing: border-box;
}
.modal-input:focus{
  border-color: rgba(47,111,174,0.85);
  box-shadow: 0 0 0 3px rgba(47,111,174,0.15);
}

.modal-primary{
  width: 100%;
  height: 52px;
  margin-top: 14px;
  border: none;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}
.modal-primary:hover{ filter: brightness(0.96); }

.modal-footer{
  margin-top: 14px;
  text-align: center;
  font-size: 16px;
  color: #3b4b5e;
}
.modal-footer a{
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}
.modal-footer a:hover{ text-decoration: underline; }

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}