/* 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: 4790px;
  background: #ffffff;
  position: relative;
  margin: 0 auto;
}

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

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

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

  /* Border pill */
  border-radius: 999px;
  border: 1px solid #E9EBF1;
  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; }

.stellar-navbar {
  position: sticky;
  top: 32px;
  position: sticky;
}
.stellar-navbar {
  position: sticky;
  z-index: 100;
  top: 32px;
  position: relative;
}
.nav-stellar {
  height: 32px;
  position: absolute;
  top: 27.89px;
  left: 24px;

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

  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;           
  border: 1px solid #ffffff;     
  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: #000; /* change if Figma has different text color */
  font-family: Arial, sans-serif; 
  font-size: 14px; 
  font-weight: 500; 
}

/* 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: Arial, 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: Arial, 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;
}

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

.stellar-main-wrap {
  position: absolute;
  top: 208px;
  left: 112px;
  width: 1216px;
  height: 701.98px;
}
/* Main container inside background */
.stellar-main-container {
  width: 1216px;
  height: 701.98px;
  position: relative;
  top: 0px;
  left: 0px;
}

/* Overlay + shadow container */
.stellar-overlay-card {
  width: 280px;
  height: 248px;

  position: absolute;
  top: 457.98px;
  left: 936px;

  border-radius: 12px;
  background: rgba(255, 255, 255, 0.002);

  box-shadow:
    0px 0px 96px 6px rgba(6, 11, 19, 0.10),
    0px 0px 0px 4px #ffffff;

  padding: 8px 3px;

  box-sizing: border-box;
}

/* Inner border container */
.stellar-overlay-border {
  width: 280px;
  height: 248px; 
  border-radius: 12px;
  border: 1px solid #e9ebf1;
  overflow: hidden;
}

/* Image (SVG) */
.stellar-overlay-img {
  width: 280px;
  height: 248px;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}

/* Shadow layer ONLY */
.stellar-overlay-card-sm {
  width: 176px;
  height: 176px;
  position: absolute;
  top: 233.98px;
  left: 936px;
  border-radius: 12px;

  box-shadow:
    0px 12px 96px 0px rgba(6, 11, 19, 0.10),
    0px 0px 0px 4px #ffffff;


  pointer-events: none;
}

/* Border + background layer */
.stellar-overlay-border-sm {
  width: 176px;
  height: 176px;
  position: absolute;
  top: 233.98px;
  left: 936px;

  border-radius: 12px;
  border: 1px solid #E9EBF1;

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

  overflow: hidden;
  z-index: 1;
}

/* Image */
.stellar-overlay-img-sm {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Next container */
.stellar-next-container {
  width: 1440px;
  height: 1009.98px;
  position: absolute;
  top: 301.98px;
  background: transparent;
  left: 0px;
  z-index: 10;
}

/* Gradient divider (Figma-accurate) */
.stellar-divider {
  width: 223px;
  height: 2px;
  position: absolute;
  top: 400px;

  background: linear-gradient(
    90deg,
    #E9EBF100 0%,
    #E9EBF1 50%,
    #E9EBF100 100%
  );
}

/* Divider 1 */
.stellar-divider-1 {
  left: 608px;
}

/* Divider 2 */
.stellar-divider-2 {
  left: 385px;
}

/* Image 1 */
.stellar-img-1 {
  width: 446px;
  height: 17px;

  position: absolute;
  top: 386px;
  left: 385px;

  display: block;
}

/* Image 2 */
.stellar-img-2 {
  width: 448px;
  height: 400px;

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

  display: block;
}

/* Overlay + shadow */
.stellar-overlay-card-280 {
  width: 280px;
  height: 248px;
  position: absolute;
  top: 457.98px; 

  border-radius: 12px;

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

  /* Shadows */
  box-shadow:
    0px 12px 96px 0px rgba(6, 11, 19, 0.10),
    0px 0px 0px 4px #ffffff;

  /* Inner alignment */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Border */
.stellar-overlay-border-280 {
  width: 280px;
  height: 248px;
  border-radius: 12px;
  border: 1px solid #e9ebf1;

  overflow: hidden;
}

/* Image */
.stellar-overlay-img-280 {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* SHADOW ONLY (outer layer) */
.stellar-overlay-shadow-176 {
  width: 176px;
  height: 176px;
  position: absolute;
  top: 233.98px;
  left: 104px;

  border-radius: 12px;

  /* Shadows */
  box-shadow:
    0px 12px 96px 0px rgba(6, 11, 19, 0.10),
    0px 0px 0px 4px #ffffff;

  pointer-events: none;
}

/* BORDER + BACKGROUND */
.stellar-overlay-border-176 {
  width: 176px;
  height: 176px;
  position: absolute;
  top: 233.98px;
  left: 104px;

  border-radius: 12px;
  border: 1px solid #E9EBF1;

  /* #FFFFFF 0.2% */
  background: rgba(255, 255, 255, 0.002);

  overflow: hidden;
  z-index: 1;
}

/* IMAGE */
.stellar-overlay-img-176 {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 12px;
}

/* Container above phone */
.stellar-above-phone {
  position: absolute;
  left: 312px;
  width: 592px;
  height: 273.98px;

  top: 0px;
}

/*  Our Frame Template */
.stellar-frame-label {
  width: 121.44px;
  height: 15px;
  position: absolute;
  top: 2px;
  left: 235.47px;

  font-family: "Fustat", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 20.4px;
  letter-spacing: 0.01em;

  text-align: center;
  color: #6E51E0;
}

/* Heading 1: same time and build */
.stellar-heading-primary {
  width: 516.28px;
  height: 77px;
  position: absolute;
  top: 32.29px;
  left: 37.95px;

  font-family: "Fustat", sans-serif;
  font-size: 56.8px;
  font-weight: 500;
  letter-spacing: -1.61px;
  line-height: 76.8px;

  text-align: center;
  color: #060B13;
  margin: 0;
}

/* Heading 2: better with */
.stellar-heading-secondary {
  width: 281.84px;
  height: 77px;
  position: absolute;
  top: 113.19px;
  left: 48.34px;

  font-family: "Fustat", sans-serif;
  font-size: 56.75px;
  font-weight: 500;
  line-height: 76.8px;
  letter-spacing: -1.61px;
  line-height: 76.8px;

  text-align: center;
  color: #060B13;
  margin: 0;
}
.stellar-pill {
  width: 201.68px;
  height: 84.79px;
  position: absolute;
  top: 109.19px;
  left: 324px;
  border-radius: 999px;

  /* FILL */
  background: linear-gradient(
    180deg,
    #8F7AF4 0%,
    #6E51E0 100%
  );

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

  /* TEXT COLOR  */
  color: #FFFFFF;
  font-family: "Fustat", sans-serif;
  font-size: 56.75px;
  font-weight: 500;
  letter-spacing: -1.61px;

  
  box-shadow:
    inset 0px 1px 1px rgba(255, 255, 255, 0.35),
    0px 6px 12px rgba(110, 81, 224, 0.35);
}

/* Subheading base */
.stellar-subheading {
  font-family: "Fustat", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.18px;
  text-align: center;
  color: #363D4F;
  margin: 0;
}

/* Subheading line 1 */
.stellar-subheading-1 {
  width: 415.93px;
  height: 20px;
  position: absolute;
  top: 215.98px;
  left: 90.38px;
}

/* Subheading line 2 */
.stellar-subheading-2 {
  width: 191.72px;
  height: 20px;
  position: absolute;
  top: 247.98px;
  left: 200.39px;
}

/* ================= SECOND BACKGROUND ================= */
.stellar-bg-2 {
  width: 1440px;
  height: 494.19px;
  background: #FFFFFF;
  margin: 0 auto;
}

.stellar-bg-2-container {
  width: 1216px;
  margin: 96px auto 0;
  text-align: center;
}

/* Heading */
.stellar-mask-heading {
  width: 533.31px;
  height: 39px;
  margin: 0 auto 32px;

  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 28.75px;
  line-height: 38.4px;
  letter-spacing: -0.69px;
  color: #060B13;
}

/* LOGOS IMAGE */
.trusted-logos {
  width: 1216px;
  height: 80px;
  margin: 0 auto 24px;
}

.trusted-logos img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Description text */
.stellar-bg-2-text {
  width: 547.19px;
  height: 32px;
  margin: 0 auto 24px;

  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 40px;
  letter-spacing: -0.33px;
  color: #363D4F;
}

/* CTA Button */
.stellar-bg-2-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 206.11px;
  height: 47.74px;
  border-radius: 999px;

  background: linear-gradient(180deg, #ECEFF3 0%, #ECEFF3 4%);
  text-decoration: none;

  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #060B13;

  box-shadow:
    0px 0.5px 1px rgba(102, 109, 128, 0.20),
    0px 3px 4px -2px rgba(128, 136, 151, 0.16),
    0px 0px 0px 1.5px #E9EBF1;
}

/* ================= THIRD BACKGROUND ================= */

.stellar-bg-3 {
  width: 1440px;
  height: 690.98px;
  position: absolute;
  top: 1504.17px;
  left: 0px;
  background: #FFFFFF;
}

/* Overlay shadow wrapper */
.stellar-bg-3-card {
  width: 384px;.stellar-bg-2 {
  width: 1440px;
  height: 494.19px;
  background: #FFFFFF;
  margin: 0 auto;
}

.stellar-bg-2-container {
  width: 1216px;
  margin: 96px auto 0;
  text-align: center;
}

/* Heading */
.stellar-mask-heading {
  width: 533.31px;
  height: 39px;
  margin: 0 auto 32px;

  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 28.75px;
  line-height: 38.4px;
  letter-spacing: -0.69px;
  color: #060B13;
}

/* LOGOS IMAGE */
.trusted-logos {
  width: 1216px;
  height: 80px;
  margin: 0 auto 24px;
}

.trusted-logos img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Description text */
.stellar-bg-2-text {
  width: 547.19px;
  height: 32px;
  margin: 0 auto 24px;

  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 40px;
  letter-spacing: -0.33px;
  color: #363D4F;
}

/* CTA Button */
.stellar-bg-2-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 206.11px;
  height: 47.74px;
  border-radius: 999px;

  background: linear-gradient(180deg, #ECEFF3 0%, #ECEFF3 4%);
  text-decoration: none;

  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #060B13;

  box-shadow:
    0px 0.5px 1px rgba(102, 109, 128, 0.20),
    0px 3px 4px -2px rgba(128, 136, 151, 0.16),
    0px 0px 0px 1.5px #E9EBF1;
}

  height: 256px;
  position: absolute;
  top: 89.49px;
  left: 776px;
  border-radius: 12px;

  /* #FFFFFF 0.2% */
  background: rgba(255, 255, 255, 0.002);

  box-shadow:
    0px 0px 96px 0px rgba(6, 11, 19, 0.10),
    0px 0px 0px 4px #FFFFFF;
}

/* Border layer */
.stellar-bg-3-border {
  width: 384px;
  height: 256px;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 12px;
  border: 1px solid #E9EBF1;
  z-index: 10;
  overflow: hidden;

}

/* Image */
.stellar-bg-3-img {
  width: 384px;
  height: 256px;
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
  object-fit: cover;
  z-index: 10;
}

/* Clip path group 10 */
.stellar-clip-1 {
  width: 180px;
  height: 48px;
  position: absolute;
  top: 180px;
  left: 176px;
  border: 1px solid #505A71;
  border-radius: 0px; 
  background: transparent;
}
.stellar-clip-1::after {
  content: "";
  width: 186px;
  height: 33.82px;
  position: absolute;
  top: 14.18px;  
  left: 0px;
  border-radius: 1px;
}

/* Clip path group 2 */
.stellar-clip-2 {
  width: 180px;
  height: 48px;
  position: absolute;
  top: 108px;
  left: 176px;
  border: 1px solid #6E51E0;
  border-radius: 1px;
  background: transparent;
}

/* ================= SMALL CIRCULAR OVERLAY ================= */

/* OUTER SHADOW */
.stellar-circle-card {
  width: 88px;
  height: 88px;
  position: absolute;
  top: 437.49px;
  left: 816px;
  border-radius: 99px;

  /* #FFFFFF 0.2% */
  background: rgba(255, 255, 255, 0.002);

  box-shadow:
    0px 12px 96px rgba(6, 11, 19, 0.10),
    0px 0px 0px 4px #FFFFFF;

  padding: 4px;
}

/* INNER LINING (border) */
.stellar-circle-inner {
  width: 100%;
  height: 100%;
  border-radius: 99px;
  background: #FFFFFF;

  /* inner border */
  box-shadow: inset 0 0 0 1px #E9EBF1;

  overflow: hidden;
  position: relative;
  z-index: 10;
}

/* IMAGE */
.stellar-circle-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 99px;
}


/* ================= OVERLAY 280 x 208 (INNER LINING) ================= */

.stellar-overlay-280x208 {
  width: 280px;
  height: 208px;
  position: absolute;
  top: 389.49px;
  left: 1048px;
  border-radius: 12px;

  /* #FFFFFF 0.2% */
  background: rgba(255, 255, 255, 0.002);

  /* Shadows from Figma */
  box-shadow:
    0px 12px 96px rgba(6, 11, 19, 0.10),
    0px 0px 0px 4px #FFFFFF;

  padding: 6px;
  z-index: 10;        
  pointer-events: none;
}



/* Inner border lining layer */
.stellar-overlay-280x208-inner {
  width: 100%;
  height: 100%;
  border-radius: 10px; 
  background: #FFFFFF;

  /* inner border (Figma "inner alignment") */
  box-shadow: inset 0 0 0 1px #E9EBF1;

  overflow: hidden;
  position: relative;
}

/* Image layer */
.stellar-overlay-280x208-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 10px;
}

/* ================= CIRCULAR BACKGROUND IMAGE ================= */

.stellar-bg-circle {
  width: 448px;
  height: 448px;
  position: absolute;
  top: 121.49px;
  left: 808px;
  border-radius: 999px;
  overflow: hidden;
  z-index: 1;
}

.stellar-bg-circle-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 999px;
}

/* ================= SECTION 3 LEFT CONTAINER ================= */

.s3-left {
  width: 488px;
  height: 462.98px;
  position: absolute;
  top: 114px;
  left: 184px;
}

/* Meet Stellar */
.s3-label {
  width: 78.63px;
  height: 20px;
  position: absolute;
  top: 20px;
  left: 0px;
  margin: 0;
  padding: 0;
  display: block;

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

/* Heading container (488 x 150.99) */
.s3-title {
  width: 396.5px;
  height: 115.59px;
  position: absolute;
  top: 35.8px;
  left: 0px;

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

/* Paragraph container (488 x 230.99) */
.s3-desc {
  width: 469.65px;
  height: 52px;
  position: absolute;
  top: 172.99px;
  left: 0px;

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

/* Features wrapper (488 x 110.4) – positioned at top 262.99 */
.s3-features {
  width: 488px;
  height: 104px;
  position: absolute;
  top: 262.99px;
  left: 0px;
}

/* Each feature row uses your exact offsets */
.s3-feature {
  width: 488px;
  height: 104px;
  position: absolute;
  left: 0px;
}

.s3-feature-1 { top: 0.09px; }
.s3-feature-2 { top: 40.09px; }
.s3-feature-3 { top: 80.09px; }

/* Tick */
.s3-tick {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 999px;
  display: block;
}

/* Feature text (uses your font rules) */
.s3-feature-text {
  position: absolute;
  top: 0.09px;
  left: 36px;
  height: 20px;

  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 23.8px;
  letter-spacing: -0.18px;
  color: #060B13;
  white-space: nowrap;
}

/* CTA Button (154.83 x 48 at top 414.99) */
.s3-cta {
  width: 154.83px;
  height: 48px;
  position: absolute;
  top: 414.99px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  text-decoration: none;
  background: (180deg, #ECEFF3);

  box-shadow:
    0px 0.5px 1px rgba(102, 109, 128, 0.20),
    0px 3px 4px -2px rgba(128, 136, 151, 0.16),
    0px 0px 0px 1.5px #E9EBF1;
}

/* Button text (87.35 x 20 at left 20) */
.s3-cta-text {
  width: 87.35px;
  height: 20px;
  margin-left: 20px;
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 23.8px;
  letter-spacing: -0.18px;
  color: #060B13;
  display: inline-flex;
  align-items: center;
}

/* Arrow (24 x 24 at left 114.83, top 12) */
.s3-cta-arrow {
  width: 24px;
  height: 24px;
  margin-left: 7.48px; /* 114.83 - (20 + 87.35) = 7.48 */
  display: block;
}

.s3-tick {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: 0;
}

.s3-tick-bg {
  width: 24px;
  height: 24px;
  display: block;
}

.s3-tick-icon {
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* ================= SECTION 4 (d) ================= */

.stellar-bg-4{
  width: 1440px;
  height: 876.58px;
  position: absolute;
  top: 2159px;
  left: 0;
  background: #F7F8FA;
  overflow: hidden;
}

/* top & bottom background images */
.bg4-top{
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 192px;
  object-fit: cover;
  z-index: 1;
}

.bg4-bottom{
  position: absolute;
  top: 684.57px;
  left: 0;
  width: 1440px;
  height: 192px;
  object-fit: cover;
  z-index: 1;
}

/* inner container */
.bg4-container{
  width: 1072px;
  height: 636.58px;
  position: absolute;
  top: 120px;
  left: 184px;
  z-index: 2;
}

/* header block above 3 cards */
.bg4-header{
  width: 592px;
  height: 193.98px;
  position: absolute;
  left: 240px;
  top: 0;
}

/* small label */
.bg4-label{
  width: 104.69px;
  height: 15px;
  position: absolute;
  top: 2px;
  left: 243.83px;

  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 20.4px;
  letter-spacing: 0.01em;
  color: #6E51E0;
  text-align: center;
}

/* main heading lines */
.bg4-h1{
  width: 427.25px;
  height: 77px;
  position: absolute;
  top: 32.39px;
  left: 82.47px;

  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 58.13px;
  line-height: 76.8px;
  letter-spacing: -1.61px;
  color: #060B13;
  text-align: center;
  margin: 0;
}

.bg4-h2{
  width: 242.12px;
  height: 77px;
  position: absolute;
  top: 113.18px;
  left: 42.36px;

  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 57.25px;
  line-height: 76.8px;
  letter-spacing: -1.61px;
  color: #060B13;
  text-align: center;
  margin: 0;
}

/* features pill */
.bg4-pill{
  width: 253.35px;
  height: 84.8px;
  position: absolute;
  top: 109.18px;
  left: 284px;
  border-radius: 999px;
  background: rgba(255,255,255,0.002);

  box-shadow:
    0px 1px 6px rgba(38, 20, 85, 0.50),
    0px 0px 0px 1.5px #6E51E0,
    0px 6px 8px -4px rgba(127, 81, 242, 0.30);
 
}

.bg4-pill-inner{
  width: 100%;
  height: 100%;
  border-radius: 999px;

  background: linear-gradient(
    180deg,
    #9B8AF7 0%,
    #7F51F2 100%
  );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);

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

.bg4-pill-text{
  width: 199px;
  height: 77px;
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 56.75px;
  line-height: 76.8px;
  letter-spacing: -1.61px;
  color: #FFFFFF;
}

/* shared card style (336 x 255) */
.bg4-card{
  width: 336px;
  height: 255px;
  position: absolute;
  top: 257.98px;
  border-radius: 12px;

  background: rgba(255,255,255,0.002);
  box-shadow:
    0px 12px 96px rgba(6, 11, 19, 0.06),
    0px 0px 0px 4px #FFFFFF;

  padding: 6px; 
}

.bg4-card-inner{
  width: 100%;
  height: 100%;
  border-radius: 11px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px #E9EBF1;
  overflow: hidden;
  position: relative;
}

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

/* card positions */
.bg4-card-1{ left: 0px; }
.bg4-card-2{ left: 368px; }
.bg4-card-3{ left: 736px; }

/* icons */
.bg4-icon{
  width: 32px;
  height: 32px;
  position: absolute;
  top: 544.98px;
}

.bg4-icon-1{ left: 0px; }
.bg4-icon-2{ left: 368px; }
.bg4-icon-3{ left: 736px; }

/* titles */
.bg4-title{
  height: 28.8px;
  position: absolute;
  top: 546.57px;
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 21.75px;
  line-height: 28.8px;
  letter-spacing: -0.47px;
  color: #060B13;
  margin: 0;
}

.bg4-title-1{ width: 162.26px; left: 40px; }
.bg4-title-2{ width: 197.28px; left: 408px; }
.bg4-title-3{ width: 182.98px; left: 776px; }

/* descriptions */
.bg4-text{
  height: 40.8px;
  position: absolute;
  top: 591.98px;
  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 23.8px;          
  letter-spacing: -0.09px;
  color: #363D4F;
  margin: 0;
}

.bg4-text-1{ width: 307.72px; left: 0px; }
.bg4-text-2{ width: 310.09px; left: 388px; }
.bg4-text-3{ width: 273.26px; left: 736px; }
.save-badge{
  width: 116.59px;
  height: 27.8px;

  position: absolute;
  top: 0;
  right: 0;

  background: #F7F8FA;
  border-radius: 999px;

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

  font-family: "Fustat", system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 23.8px;
  letter-spacing: -0.09px;

  color: #060B13;
}



/* ================= SECTION 5 ================= */

.s5{
  width:1440px;
  height:799.97px;
  position:absolute;
  top:3072px;
  left:0;
  background:#FFFFFF;
}

.s5-inner{
  width:1072px;
  height:559.97px;
  position:absolute;
  top:120px;
  left:184px;
}

/* LEFT CONTENT */
.s5-left{
  width:520px;
  height:559.97px;
  position:absolute;
  top:0;
  left:0;
}

/* Heading container above 4 boxes */
.s5-heading-wrap{
  width:520px;
  height:151.19px;
  position:absolute;
  top:0;
  left:0;
}

.s5-heading{
  width:520px;
  height:115.6px;
  position:absolute;
  top:36px;
  left:0;

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

/* 4 Boxes area */
.s5-box-area{
  width:520px;
  height:559.97px;
  position:absolute;
  left:0;
}

/* top row */
.s5-row{
  width:520px;
  position:absolute;
  left:0;
  display:flex;
  gap:32px;
}

.s5-row-top{
  height:148.39px;
  top:215.19px; /*  container up */
}

.s5-row-bottom{
  height:148.58px;
  top:411.58px; /* container down  */
}

/* divider border */
.s5-divider{
  width:520px;
  height:279.98px;
  position:absolute;
  top:279.99px;
  left:552px;
  border:1px solid #E9EBF1;

  border-top-left-radius:20px;
  border-top-right-radius:20px;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;

  box-shadow: inset 0 0 0 1px rgba(233,235,241,0.6);
  background:transparent;
  z-index: 0;
}

/* Each box */
.s5-box{
  width:244px;
  height:148.39px;
  position:relative;
}

.s5-icon-wrap{
  width:48px;
  height:48px;
  position:absolute;
  top:0;
  left:0;

  border-radius:40px;
  background:#FFFFFF;
  border:1px solid #E9EBF1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.s5-icon{
  width:32px;
  height:32px;
}

/* Text inside box */
.s5-text-wrap{
  width:244px;
  height:84.39px;
  position:absolute;
  top:64px;
  left:0;
}

.s5-box-title{
  width:244px;
  height:24px;

  font-family:"Fustat",sans-serif;
  font-weight:500;
  font-size:16.31px;
  line-height:28.8px;
  letter-spacing:-0.26px;
  color:#060B13;
}

.s5-box-desc{
  margin:0;
  position:absolute;
  top:39.8px;
  left:0;

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

/* RIGHT PHONES */
.s5-phones{
  width:520px;
  height:559.97px;
  position:absolute;
  top:0;
  left:552px;
}

.s5-phone-straight{
  width:304px;
  height:401px;
  position:absolute;
  top:158.97px;
  left:70px;
}

.s5-phone-cross{
  width:272px;
  height:540px;
  position:absolute;
  top:19.97px;
  left:178px;
}

.features-label {
  width: 112.8px;
  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;
}

/* ================= SECTION 6 (TEMPLATE) ================= */

.s6{
  width: 1440px;
  height: 417.59px;
  top: 3872px;
  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;    /* label top */
  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;    /* you typed 4900.64, using realistic 490.64 */
  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 (460 x 50) */
.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;

  /* inner shadow + map shadow */
  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; /* 289.3 - 273.3 = 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 (SECTION G) ================= */

.g-footer{
  width: 1440px;
  height: 500px;
  position: absolute;
  top: 4290px;
  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;
}