/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body { height: 100%; }

body {
  background: #ffffff;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Whole Page */
.stellar-page {
  width: 1440px;
  height: 1864.17px;
  background: #ffffff;
  position: relative;
  margin: 0 auto;
}

/* Background Section */
.stellar-background {
  width: 1440px;
  height: 1864.17px;
  background-color: #ffffff;
  position: relative;
}

/* Sticky Navbar Container */
/* Sticky Navbar Container – FINAL */
.stellar-navbar {
  width: 1344px;
  height: 87.8px;
  background: #fff;
  background-color: #ffffff;

  /* Sticky behavior */
  position: sticky;
  top: 32px;
  margin-left: 48px;
  margin-top: 0px;

  /* Border pill */
  border-radius: 999px;
  border: 1px solid #E9EBF1;

  /* Needed so children can use absolute top/left */
  position: relative;
  
  z-index: 100;

}

.stellar-navbar {
  position: sticky;
}
.stellar-navbar::before { content: ""; } /* keeps sticky stable in some layouts */
.stellar-navbar { position: sticky; }
.stellar-navbar { top: 32px; }
.stellar-navbar { position: sticky; }
.stellar-navbar { position: sticky; }

/* Actually make it relative for children while staying sticky */
.stellar-navbar {
  position: sticky;
  top: 32px;
  position: sticky;
}
.stellar-navbar {
  position: sticky;
  z-index: 100;
  top: 32px;
  position: relative; /* for absolute children */
}
.nav-stellar {
  width: 114px;
  height: 32px;
  position: absolute;
  top: 27.89px;
  left: 24px;

  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  text-decoration: none;
  color: #060B13;
  font-family: "Fustat", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
}

/* Product button */
.nav-product {
  width: 83.18px;
  height: 39.9px;

  position: absolute;
  top: 24px;
  left: 451.91px;

  border-radius: 99px;
  background: #ffffff;           /* change if button has fill */
  border: 1px solid #ffffff;     /* change if Figma border differs */

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: #000; /* change if Figma has different text color */
  font-family: "Fustat", sans-serif; /* replace with your Figma font */
  font-size: 14px; /* replace with your Figma font-size */
  font-weight: 500; /* replace with your Figma weight */
}
/* Base pill style (shared) */
.nav-product,
.nav-about,
.nav-pricing,
.nav-contact,
.nav-blog,
.nav-signin {
  position: absolute;
  top: 24px;

  height: 39.8px;
  border-radius: 99px;

  background: #ffffff;
  border: 1px solid transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: #000;                 /* update if Figma uses different */
  font-family: "Fustat", sans-serif; /* update to Figma font */
  font-size: 14px;             /* update to Figma font-size */
  font-weight: 500;            /* update to Figma weight */
}

/* About */
.nav-about {
  width: 71.05px;
  left: 551.09px;
}

/* Pricing */
.nav-pricing {
  width: 77.44px;
  left: 638.14px;
}

/* Contact */
.nav-contact {
  width: 83.36px;
  left: 731.58px;
}

/* Blog */
.nav-blog {
  width: 61.17px;
  left: 830.94px;
}

/* Sign in */
.nav-signin {
  width: 76.2px;
  left: 1095.03px;
}

/* Sign up for free */
.nav-signup {
  width: 132.79px;
  height: 39.8px;

  position: absolute;
  top: 24px;
  left: 1187.23px;

  border-radius: 999px;

  /* Background color */
  background: #ffffff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: #000;                  
  font-family: "Fustat", sans-serif;
  font-size: 14px;               
  font-weight: 600;              

  /* 3 drop shadows */
  box-shadow:
    0px 0px 1px 0px rgba(102, 109, 128, 0.20),
    0px 3px 4px -2px rgba(128, 136, 151, 0.16),
    0px 0px 0px 1.5px #e9ebf1;
}


body{
  background: #FFFFFF;
  overflow-x: hidden;
  font-family: "Fustat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* WHOLE PAGE */
.login-page{
  width: 1440px;
  height: 1864.17px;
  background: #FFFFFF;
  margin: 0 auto;
  position: relative;
}

/* BG LOGIN SECTION */
.login-bg{
  width: 1440px;
  height: 946.58px;
  position: relative;
  background: #FFFFFF;
}

/* ================= LEFT LOGIN CONTAINER ================= */
.login-left{
  width: 384px;
  height: 626.58px;
  position: absolute;
  top: 208px;
  left: 112px;
}

/* WELCOME PACK (384 x 222.19) */
.login-welcome{
  width: 384px;
  height: 222.19px;
  position: absolute;
  top: 0px;
  left: 0px;
}

/* Login label */
.login-label{
  width: 36.42px;
  height: 23.8px;
  position: absolute;
  top: -15px;

  color: #6E51E0;
  font-weight: 500;
  font-size: 14px;
  line-height: 23.8px;
  letter-spacing: -0.18px;

  display: flex;
  align-items: center;
}

/* Heading: Welcome to Stale! */
.login-title{
  width: 238.51px;
  height: 39px;
  position: absolute;
  top: 30.8px;
  left: 0px;

  color: #060B13;
  font-weight: 500;
  font-size: 28.88px;
  line-height: 38.4px;
  letter-spacing: -0.69px;

  display: flex;
  align-items: center;
}

/* Social container */
.social-wrap{
  width: 384px;
  height: 112px;
  position: absolute;
  top: 110.19px;
  left: 0px;
}

/* Social buttons */
.social-btn{
  width: 384px;
  height: 48px;
  
  border-radius: 999px;
  background: #F7F8FA;

  position: absolute;
  top: 0px;
  left: 0px;

  text-decoration: none;
  display: block;
  position: relative;
}

.social-btn-2{ top: 24px; }

/* icons */
.social-ic{
  width: 24px;
  height: 24px;
  position: absolute;
  top: 12px;
  left: 101.73px;
}

.social-btn-2 .social-ic{
  left: 102.7px;
}

/* text */
.social-txt{
  position: absolute;
  top: 12.09px;
  left: 133.73px;

  width: 141.28px;
  height: 23.8px;

  color: #060B13;
  font-weight: 500;
  font-size: 14px;
  line-height: 23.8px;
  letter-spacing: -0.18px;

  display: flex;
  align-items: center;
}

.social-btn-2 .social-txt{
  left: 134.7px;
  width: 140.61px;
}

/* OR DIVIDER */

.or-line{
  height: 1px;
  background: #E9EBF1;
  position: absolute;
  top: 263.88px; /* vertically center in 15px */
}

.or-line-left{
  width: 162.14px;
  left: 0px;
}

.or-line-right{
  width: 162.14px;
  left: 221.88px;
}

/* or text */
.or-text{
  width: 12.06px;
  height: 15px;
  position: absolute;
  top: 256.19px;
  left: 186.14px;

  color: #979FB4;
  font-weight: 400;
  font-size: 12px;
  line-height: 20.4px;
  letter-spacing: 0.01em;

  display: flex;
  align-items: center;
}

/* FORM (384 x 176, top 305.58) */
.login-form{
  width: 384px;
  height: 176px;
  position: absolute;
  top: 305.58px;
  left: 0px;
}

/* Input pill base */
.input-pill{
  width: 384px;
  height: 47.59px;
  border-radius: 99px;
  background: #F7F8FA;

  position: absolute;
  top: 0px;
  left: 0px;
}

.input-pill-2{ top: 63.59px; }

/* real input */
.field{
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;

  padding-left: 14px; /* your left padding */
  padding-right: 14px;

  color: #060B13;
  font-size: 14px;
  font-weight: 400;
}

/* placeholder styles */
.field::placeholder{
  color: #979FB4;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0;
}

/* Login button */
.login-btn{
  width: 384px;
  height: 47.59px;
  border-radius: 99px;
  background: #6E51E0;

  position: absolute;
  top: 127.19px;
  left: 0px;

  border: none;
  cursor: pointer;
}

/* button text */
.login-btn-text{
  width: 37.75px;
  height: 17px;

  position: absolute;
  top: 15px;
  left: 173.28px;

  font-family: "Crimson Pro", serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 119.6%;
  color: #FFFFFF;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* REGISTER ROW */
.register-row{
  width: 384px;
  height: 24px;
  position: absolute;
  top: 602.58px;
  left: 0px;
}

/* "Don't have an account?" */
.register-msg{
  width: 157.29px;
  height: 24px;
  position: absolute;
  top: 0px;
  left: 0px;

  color: #060B13;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.09px;

  display: flex;
  align-items: center;
}

/* Register link */
.register-link{
  width: 53.64px;
  height: 17px;
  position: absolute;
  top: 3px;
  left: 156.97px;

  color: #979FB4;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.18px;

  text-decoration: none;
  display: flex;
  align-items: center;
}

/* ================= RIGHT PANEL ================= */
.login-right{
  width: 720px;
  height: 890.58px;
  position: absolute;
  left: 720px;
  top: -100px;
  z-index: 0;
  background: #F7F8FA;
  box-shadow: 0px 0px 1px rgba(233, 235, 241, 1);

  border-bottom-left-radius: 24px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 4px #FFFFFF,
    0px 0px 1px rgba(233, 235, 241, 1);
}

/* TOP TEXT CONTAINER */
.right-top{
  width: 720px;
  height: 60.8px;
  position: absolute;
  top: 208px;
  left: 0px;
}

/* icon */
.right-ic{
  width: 24px;
  height: 24px;
  position: absolute;
  top: 30.8px;
  left: 32px;
}

/* texts wrapper */
.right-texts{
  position: absolute;
  top: 0px;
  left: 32px;
  width: 656px;
  height: 60.8px;
}

/* title */
.right-title{
  width: 656px;
  height: 28.8px;
  position: absolute;
  top: 0px;
  left: 0px;

  color: #060B13;
  font-weight: 500;
  font-size: 16.31px;
  line-height: 28.8px;
  letter-spacing: -0.26px;

  display: flex;
  align-items: center;
  padding-left: 32px; 
}

/* subtitle */
.right-sub{
  width: 244.66px;
  height: 20px;
  position: absolute;
  top: 36.8px;
  left: 64px;

  color: #060B13;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.09px;

  display: flex;
  align-items: center;
}

/* Dashboard SS card */
.dash-card{
  width: 640px;
  height: 390.12px;
  position: absolute;
  top: 316.8px;
  left: 120px;
  border-radius: 12px;
  z-index: 0;

  background: rgba(255,255,255,0.002);

  box-shadow:
    0px 0px 4px rgba(255,255,255,1),
    0px 13.09px 104.72px rgba(6, 11, 19, 0.08);

  box-shadow:
    inset 0 0 0 1px #E9EBF1,
    0px 13.09px 104.72px rgba(6, 11, 19, 0.08);
  overflow: hidden;
}

.dash-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Project timeline overlay */
.timeline-card{
  width: 470px;
  height: 269.03px;
  position: absolute;
  top: 526.8px;
  left: 350px;
  border-radius: 10px;
  z-index: 10;
  background: rgba(255,255,255,0.002);

  box-shadow:
    0px 0px 4.97px rgba(255,255,255,1),
    0px 29.81px 79.48px rgba(109, 80, 224, 0.03),
    0px 29.81px 119.22px rgba(6, 11, 19, 0.06);

  box-shadow:
    inset 0 0 0 1px #E9EBF1,
    0px 29.81px 79.48px rgba(109, 80, 224, 0.03),
    0px 29.81px 119.22px rgba(6, 11, 19, 0.06);

  overflow: hidden;
}

.timeline-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scatter bg image */
.scatter-bg{
  width: 720px;
  height: 314px;
  position: absolute;
  top: 576.58px;
  left: 0px;
  object-fit: cover;
  display: block;
  pointer-events: none;
  z-index: -1;
}



/* ================= SECTION 6 ================= */

.s6{
  width: 1440px;
  height: 417.59px;
  top: 946.58px;
  position: absolute;
  background: #F7F8FA;
}
.s6-bgup,
.s6-bgdown {
  width: 1440px;
  height: 192px;
  position: absolute;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

.s6-bgup { top: 0; }
.s6-bgdown { top: 225.59px; }

.s6-bgup img,
.s6-bgdown img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* LEFT CONTENT */
.s6-left{
  position: absolute;
  top: 140px;   
  left: 112px;
  width: 520px;
}

/* Start building today! */
.s6-label{
  width: 132.48px;
  height: 20px;

  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.18px;
  color: #6D50E0;

  display: flex;
  align-items: center;
}

/* Heading */
.s6-title{
  width: 490.64px;    
  height: 58px;

  margin: 35px 0 0 0;

  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 43.31px;
  line-height: 57.6px;
  letter-spacing: -1.25px;
  color: #060B13;
}

/* paragraph */
.s6-desc{
  width: 457.43px;
  height: 26px;

  margin: 12px 0 0 0;

  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: -0.18px;
  color: #363D4F;

  display: flex;
  align-items: center;
}

/* RIGHT MAIN CONTAINER */
.s6-right{
  width: 450px;
  height: 98px;

  position: absolute;
  top: 179.59px;
  left: 866px;
}

/* FORM  */
.s6-form{
  width: 460px;
  height: 50px;

  position: absolute;
  top: 0;
  left: 0;

  display: flex;
}

/* INPUT */
.s6-input{
  width: 273.3px;
  height: 50px;
  border-radius: 99px;
  background: #FFFFFF;
  box-shadow:
    inset 0px 0px 0px 1px #E9EBF1,
    0px 0px 1px rgba(102, 109, 128, 0.20);
  position: relative;
}

/* placeholder text */
.s6-email{
  width: 129.37px;
  height: 17px;
  position: absolute;
  top: 16px;
  left: 16px;

  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 100%;
  letter-spacing: 0;
  color: #979FB4;
  display: flex;
  align-items: center;
}

/* BUTTON */
.s6-btn{
  width: 170.7px;
  height: 50px;
  margin-left: 16px; 
  border-radius: 99px;
  background: #6E51E0;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* button text */
.s6-btn-text{
  width: 141.55px;
  height: 20px;
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: -0.18px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* TICKS ROW */
.s6-ticks{
  width: 450px;
  height: 24px;

  position: absolute;
  top: 74px;
  left: 0;
}

/* tick item base */
.s6-tick-item{
  height: 24px;
  position: absolute;
  top: 0;

  display: flex;
  align-items: center;
  gap: 12px;
}

/* item 1: Free 7-day trail */
.s6-tick-item-1{ left: 0; }

/* item 2: No credit card required */
.s6-tick-item-2{ left: 174.34px; }

/* tick circle */
.s6-tick{
  width: 24px;
  height: 24px;
  border-radius: 999px;

  background: linear-gradient(
    180deg,
    #8F7AF4 0%,
    #6E51E0 100%
  );
  
  display: flex;
  align-items: center;
  justify-content: center;
}

/* tick icon inside circle */
.s6-tick-icon{
  width: 12px;
  height: 12px;
  display: block;
}

/* tick text */
.s6-tick-text{
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 23.8px;
  letter-spacing: -0.18px;
  color: #060B13;

  display: flex;
  align-items: center;
}



/* ================= FOOTER () ================= */

.g-footer{
  width: 1440px;
  height: 500px;
  position: absolute;
  top: 1364px;
  left: 0;
  background: #FFFFFF;
}

.g-container{
  width: 1216px;
  height: 340px;
  position: absolute;
  top: 112px;
  left: 112px;
}

/* Left block */
.g-left{
  width: 312px;
  height: 103.59px;
  position: absolute;
  left: 0;
  top: 0;
}

.g-logo{
  width: 114px;
  height: 36px;
  position: absolute;
  top: -2px;
  left: 0;
  display: block;
}

.g-left-text{
  width: 292.47px;
  height: 40.8px;
  position: absolute;
  top: 59px;
  left: 0;

  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 23.8px;
  letter-spacing: -0.08px;
  color: #363D4F;
  margin: 0;
}

/* Columns base */
.g-col{
  width: 156px;
  height: 172px;
  position: absolute;
  top: 0;
}

.g-col-1{ left: 562px; }
.g-col-2{ left: 728px; }
.g-col-3{ left: 894px; }
.g-col-4{ left: 1060px; }

.g-col-title{
  width: auto;
  height: 20px;

  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 23.8px;
  letter-spacing: -0.18px;
  color: #979FB4;

  margin-bottom: 21px; /* gap to first link (t=55) */
}
/* ===== Exact link text sizes (W/H) + top offsets inside each column ===== */

.g-col { position: absolute; }
.g-col .g-link { position: absolute; left: 0; }

/* ---------- Column 1 (Stellar Page) ---------- */
.g-c1-home    { width: 38.88px; height: 17px; top: 55px; }
.g-c1-about   { width: 39.05px; height: 17px; top: 103px; }
.g-c1-pricing { width: 45.44px; height: 17px; top: 151px; }

/* ---------- Column 2 (Product) ---------- */
.g-c2-contact { width: 51.36px; height: 17px; top: 55px; }
.g-c2-blog    { width: 29.17px; height: 17px; top: 103px; }
.g-c2-product { width: 51.19px; height: 17px; top: 151px; }

/* ---------- Column 3 (Resources) ---------- */
.g-c3-integration { width: 70.02px; height: 17px; top: 55px; }
.g-c3-detail      { width: 110.88px; height: 17px; top: 103px; }
.g-c3-signup      { width: 51.53px; height: 17px; top: 151px; }

/* ---------- Column 4 (Company) ---------- */
.g-c4-login { width: 36.11px; height: 17px; top: 55px; }
.g-c4-404   { width: 26.66px; height: 17px; top: 103px; }
.g-c4-more  { width: 105.11px; height: 17px; top: 151px; }

/* (optional) lock column title heights too */
.g-col-title { height: 20px; }


.g-link{
  display: block;
  height: 17px;
  margin-bottom: 31px; /* 55->103->151 spacing */
  text-decoration: none;

  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.09px;
  color: #363D4F;
}

.g-link:last-child{ margin-bottom: 0; }

/* Bottom bar */
.g-bottom-bar{
  width: 1216px;
  height: 88px;
  position: absolute;
  top: 252px;
  left: 0;

  border-top: 1px solid #E9EBF1;
}

/* Flowbase + copyright */
.g-flowbase{
  width: 71.96px;
  height: 15px;

  position: absolute;
  top: 59.8px; /* 311.8 - 252 */
  left: 0px;

  text-decoration: none;
  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 20.4px;
  letter-spacing: 0.01em;
  color: #363D4F;
}

.g-copyright{
  width: 103.67px;
  height: 15px;

  position: absolute;
  top: 59.8px;
  left: 103.31px;

  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 20.4px;
  letter-spacing: 0.01em;
  color: #505A71;
}

/* Social buttons */
.g-socials{
  position: absolute;
  top: 48px; /* 300 - 252 */
  left: 1072px;
  height: 40px;
}

.g-social{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #E9EBF1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

    text-decoration: none;
}

.g-social img{
  width: 24px;
  height: 24px;
  display: block;
}





.page-scale {
  width: 1440px;             
  transform-origin: top left;
  margin: 0 auto;
}

/* Tablets */
@media (max-width: 1024px) {
  .page-scale {
    transform: scale(0.71);
  }
}

/* Large phones */
@media (max-width: 768px) {
  .page-scale {
    transform: scale(0.53);
  }
}

/* Small phones */
@media (max-width: 480px) {
  .page-scale {
    transform: scale(0.36);
  }
}

/* Prevent sideways scroll */
html, body {
  overflow-x: hidden;
}