
:root{
  --ego-blue: #00B0B9;
  --ego-lime: #D0DF00;
  --diginu-ink: #215C73;

  --white: #fff;
  --bg: #f6fbfb;

  --glass-bg: rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.22);

  --shadow: 0 18px 60px rgba(0,0,0,0.10);
  --radius: 22px;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0 !important;
  padding:0 !important;
  width:100%;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#ffffff;
  background:transparent;
  overflow-x:hidden;
}

.container{
  width:min(1120px, 92%);
  margin:0 auto;
}

/* HEADER */


.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 22px;
}

.logo img{
  width:140px;
  height:auto;
  display:block;
}

.main-nav{
  display:flex;
  gap:22px;
}

.main-nav a{
  color:#ffffff;
  text-decoration:none;
  font-weight:600;
  padding:8px 12px;
  border-radius:14px;
  transition:all 0.2s ease;
}

.main-nav a:hover{
  background:rgba(255,255,255,0.12);
}

.ego-left-stack {
  width: 100% !important;
  max-width: 620px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 26px !important;
  align-items: stretch !important;
}

.specs-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 15px !important;
  margin-top: 20px !important;
  margin-bottom: 25px !important;
}

@media (max-width: 768px) {
  .specs-grid {
    grid-template-columns: 1fr !important;
  }
}


/* MOBILE */

@media (max-width:768px){


  .header-inner{
    padding:5px 7px;
    height:60px;
  }

  .logo img{
    width:100px;
  }

  .main-nav{
    gap:6px;
  }

  .main-nav a{
    font-size:11px;
    padding:2px 3px;
  }
}

/* PAGE CONTENT */

.page-content{
  position:relative;
  padding-top:180px !important;
}

/* PILL */

.ego-pill{
  display:inline-block;

  padding:8px 24px;

  border-radius:50px;

  font-size:12px;
  font-weight:800;

  letter-spacing:2px;
  text-transform:uppercase;

  position:relative;

  color:#ffffff !important;

  margin-bottom:20px;

  background:transparent;
}

.ego-pill::before{
  content:"";

  position:absolute;
  inset:0;

  border-radius:50px;
  padding:2px;

  background: linear-gradient(90deg, #00f2ff, #ccff00);

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: destination-out;
  mask-composite: exclude;

  box-shadow:0 0 15px rgba(0,242,255,0.4);
}

/* FORM */



.form-group{
  margin-bottom:15px;
}

.form-group label{
  display:block;

  font-size:12px;
  font-weight:700;

  text-transform:uppercase;
  letter-spacing:1px;

  margin-bottom:6px;

  color:#ffffff !important;
}

.hs-input{
  width:100% !important;

  border-radius:14px !important;

  border:1px solid rgba(255,255,255,0.22) !important;

  background:rgba(0,0,0,0.18) !important;

  color:#fff !important;

  padding:12px 14px !important;

  outline:none !important;
}

.hs-input::placeholder{
  color:rgba(255,255,255,0.55) !important;
}


/* FOOTER */

.site-footer{
  margin-top:46px;
  padding:28px 0;

  color:rgba(255,255,255,0.70);

  border-top:1px solid rgba(255,255,255,0.10);

  background:rgba(0,0,0,0.12);
}

html,
body{
  margin: 0 !important;
  padding: 0 !important;
  background: #080c0e !important;
}

.site-footer{
  margin-bottom: 0 !important;
}

body::after{
  content: "";
  display: block;
  height: 0;
  background: #080c0e;
}

#thankyou-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(8px);
}

#thankyou-modal.show{
  display:flex;
}

.thankyou-box{
  width:min(90%, 420px);
  padding:32px;
  border-radius:24px;
  text-align:center;
  color:white;
  background:rgba(8,12,14,0.72);
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 25px 80px rgba(0,0,0,0.45);
}

/* ===== HOMEPAGE FIXES AFTER HUBSPOT EXPORT ===== */

.ego-bg-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: -3 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
}

.ego-bg-layer img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.ego-overlay-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  background: rgba(0,0,0,0.35) !important;
}

.ego-hero-full {
  min-height: 100vh !important;
  padding: 150px 24px 80px !important;
  display: flex !important;
  align-items: flex-start !important;
}

.ego-hero-inner {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.ego-left-stack {
  width: 100% !important;
  max-width: 620px !important;
  display: flex !important;
  gap: 26px !important;
  align-items: stretch !important;
}

.ego-glass,
.ego-card{
  position: relative !important;
  overflow: visible !important;
}

.ego-glass::after,
.ego-card::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:84%;
  height:6px;
  background:linear-gradient(
    90deg,
    rgba(208,223,0,0.85) 0%,
    rgba(0,176,185,0.95) 35%,
    rgba(0,176,185,0.95) 65%,
    rgba(208,223,0,0.85) 100%
  );
  clip-path:polygon(0% 50%,12% 0%,88% 0%,100% 50%,88% 100%,12% 100%);
  filter:blur(2px);
  opacity:0.9;
  pointer-events:none;
}

.ego-glass::before,
.ego-card::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  width:90%;
  height:16px;
  background:radial-gradient(
    ellipse at center,
    rgba(0,176,185,0.6) 0%,
    rgba(0,176,185,0.4) 30%,
    rgba(208,223,0,0.4) 70%,
    rgba(208,223,0,0.6) 100%
  );
  filter:blur(16px);
  pointer-events:none;
}

.ego-card h1,
.ego-card h2,
.ego-card h3,
.ego-card p {
  text-align: left !important;
}

.ego-intro-block {
  text-align: center !important;
}

.ego-logo {
  max-width: 260px !important;
  height: auto !important;
  margin: 0 auto !important;
}


/* MOBILE HOME CARD FULL WIDTH FIX */
@media (max-width: 768px) {
  .ego-hero-full {
    padding: 95px 0 60px !important;
    width: 100% !important;
  }

  .ego-hero-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
  }

  .ego-left-stack {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  .ego-card,
  .ego-glass,
  .gallery-card,
  .intelligence-bar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}


/* FINAL HOMEPAGE SCALE AND ALIGNMENT FIX */

.ego-hero-full {
  padding-top: 130px !important;
}


.ego-card,
.ego-glass {
  width: 100% !important;
  padding: 26px !important;
  border-radius: 22px !important;
  box-sizing: border-box !important;
}

.ego-card h1 {
  font-size: 32px !important;
  line-height: 1.12 !important;
}

.ego-card h2,
.ego-video-title {
  font-size: 26px !important;
  line-height: 1.15 !important;
}

.ego-card h3 {
  font-size: 22px !important;
}

.ego-card p,
.ego-video-subtitle,
.article-desc {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.price-value {
  font-size: 40px !important;
}

.coming-soon-text {
  font-size: 36px !important;
}

.article-card,
.app-card,
.pricing-card,
.video-card {
  text-align: center !important;
}

.article-card h3,
.article-card p,
.app-card h2,
.app-card p,
.pricing-card p {
  text-align: center !important;
}



/* FINAL HOME PAGE OVERRIDE */

html,
body{
  background: transparent !important;
}

body{
  min-height: 100vh !important;
}

.ego-hero-full,
.ego-hero-inner,
.ego-left-stack{
  background: transparent !important;
}

.ego-glass,
.ego-card,
.gallery-card{
  background: rgba(8,12,14,0.42) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,0.42) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.ego-glass > *,
.ego-card > *,
.gallery-card > *{
  position: relative !important;
  z-index: 2 !important;
}

.ego-intro-wrap{
  display: flex !important;
  justify-content: center !important;
}

.ego-intro{
  display: inline-block !important;
  padding: 10px 34px !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  background:
    linear-gradient(rgba(8,12,14,0.45), rgba(8,12,14,0.45)) padding-box,
    linear-gradient(90deg, #00f2ff, #ccff00) border-box !important;
  color: white !important;
  font-weight: 800 !important;
  letter-spacing: 6px !important;
  text-transform: uppercase !important;
}

.ego-bg-layer{
  background: #080c0e !important;
}

/* FINAL TEXT ALIGNMENT FIXES */

.video-card,
.calculator-card,
.hero-card,
.intro-card,
.top-card,
.feature-card{
  text-align: center !important;
}

.video-card h1,
.video-card h2,
.video-card h3,
.video-card p,
.calculator-card h1,
.calculator-card h2,
.calculator-card h3,
.calculator-card p,
.hero-card h1,
.hero-card h2,
.hero-card h3,
.hero-card p,
.intro-card h1,
.intro-card h2,
.intro-card h3,
.intro-card p,
.top-card h1,
.top-card h2,
.top-card h3,
.top-card p,
.feature-card h1,
.feature-card h2,
.feature-card h3,
.feature-card p{
  text-align: center !important;
}

.video-card .ego-pill,
.calculator-card .ego-pill,
.hero-card .ego-pill,
.intro-card .ego-pill,
.top-card .ego-pill,
.feature-card .ego-pill{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* TRUE CENTER ALIGNMENT FIX */

.calculator-card,
.calculator-card *{
  text-align: center !important;
}

.calculator-card input{
  text-align: center !important;
}

.calculator-card .form-label{
  text-align: center !important;
}

.calculator-card .ego-pill{
  margin-left: auto !important;
  margin-right: auto !important;
}

.features-grid .ego-card,
.features-grid .ego-card *{
  text-align: center !important;
}

.features-grid .ego-card .ego-pill{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* FORCE CENTER SPECIFIC HOMEPAGE CARDS */

.ego-left-stack > .ego-glass:nth-of-type(3),
.ego-left-stack > .ego-glass:nth-of-type(4),
.ego-left-stack > .ego-glass:nth-of-type(5),
.ego-left-stack > .ego-card:has(.calculator-container),
.ego-left-stack > .video-card {
  text-align: center !important;
}

.ego-left-stack > .ego-glass:nth-of-type(3) *,
.ego-left-stack > .ego-glass:nth-of-type(4) *,
.ego-left-stack > .ego-glass:nth-of-type(5) *,
.ego-left-stack > .ego-card:has(.calculator-container) *,
.ego-left-stack > .video-card * {
  text-align: center !important;
}

.ego-left-stack > .ego-card:has(.calculator-container) .calc-label {
  text-align: center !important;
  padding-left: 0 !important;
}

.ego-left-stack > .ego-card:has(.calculator-container) input {
  text-align: center !important;
}

.ego-left-stack > .ego-card:has(.calculator-container) .calculator-container {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* CTA PILLS */

.cta-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;

  padding:14px 34px !important;
  margin-top:18px !important;

  border-radius:999px !important;
  border:2px solid transparent !important;

  background:
    linear-gradient(rgba(8,12,14,0.72), rgba(8,12,14,0.72)) padding-box,
    linear-gradient(90deg, #00f2ff, #d4ff00) border-box !important;

  color:white !important;
  text-decoration:none !important;

  font-weight:800 !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
  font-size:14px !important;

  transition:all 0.25s ease !important;

  box-shadow:
    0 0 18px rgba(0,242,255,0.18),
    0 0 24px rgba(212,255,0,0.12) !important;
}

.cta-pill:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:
    0 0 24px rgba(0,242,255,0.35),
    0 0 30px rgba(212,255,0,0.22) !important;
}

.cta-pill{
  margin-bottom: 18px !important;
}

/* Animated INTRODUCING pill */

.ego-intro-wrap{
  display:flex !important;
  justify-content:center !important;
  margin-bottom:28px !important;
}

.ego-intro{
  position:relative !important;
  overflow:hidden !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:16px 58px !important;
  border-radius:999px !important;

  background:rgba(255,255,255,0.08) !important;
  border:1px solid rgba(255,255,255,0.28) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;

  color:white !important;
  font-size:15px !important;
  font-weight:900 !important;
  letter-spacing:10px !important;
  text-transform:uppercase !important;
}

.ego-intro::before{
  content:"";
  position:absolute;
  top:-45%;
  left:-70%;
  width:55%;
  height:190%;

  background:linear-gradient(
    115deg,
    transparent 0%,
    rgba(0,176,185,0.08) 20%,
    rgba(0,176,185,0.35) 45%,
    rgba(208,223,0,0.28) 60%,
    transparent 100%
  );

  animation:introSweep 2.8s linear infinite;
  pointer-events:none;
}

@keyframes introSweep{
  0%{
    left:-75%;
  }
  100%{
    left:125%;
  }
}

.ego-intro-wrap{
  margin-top: 90px !important;
}


/* Homepage background layers */
.ego-bg-layer{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -3 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.ego-bg-layer img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Mobile only */
@media (max-width: 768px){


  .ego-hero-full{
    display: block !important;
    width: 100% !important;
    padding: 110px 0 60px !important;
  }

  .ego-hero-inner{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .ego-left-stack{
    padding: 0 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .ego-left-stack > *{
    width: 100% !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

}

@media (max-width: 768px){
  .ego-left-stack{
    padding: 0 14px !important;
  }

  .ego-left-stack > *,
  .ego-card,
  .ego-glass,
  .gallery-card,
  .intelligence-bar{
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ego-bg-mobile{
    position: fixed !important;
    inset: 0 !important;
  }

  .ego-bg-mobile img{
    width: 100vw !important;
    height: 100vh !important;

    object-position: center top !important;

    background: #080c0e !important;
  }
}

/* MOBILE CENTER FIX */

@media (max-width: 768px){

  .ego-hero-full{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ego-hero-inner{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ego-left-stack{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  .ego-left-stack > *{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

.ego-bg-desktop {
  display: block !important;
}

.ego-bg-mobile {
  display: none !important;
}

@media (max-width: 768px) {
  .home-mobile-wrap {
    max-width: 550px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}



/* FORCE SINGLE COLUMN MOBILE */
@media (max-width: 768px) {

  .ego-left-stack {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 14px !important;

    align-items: stretch !important;
    justify-content: flex-start !important;

    gap: 22px !important;
  }

  .ego-left-stack > * {
    width: 100% !important;
    max-width: 100% !important;

    flex: 0 0 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }

}

@media (max-width: 768px) {
  .ego-hero-inner,
  .ego-left-stack {
    width: 100% !important;
    max-width: 100% !important;
  }

  .ego-left-stack {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
  }

  .ego-left-stack > *,
  .ego-card,
  .ego-glass,
  .gallery-card,
  .intelligence-bar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {

  .ego-bg-layer{
    position: fixed !important;
    inset: 0 !important;
    z-index: -999 !important;
    overflow: hidden !important;
  }

  img.ego-bg-desktop{
    display: none !important;
  }

  img.ego-bg-mobile{
    display: block !important;

    position: fixed !important;
    top: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    object-fit: cover !important;
    object-position: center center !important;

    z-index: -999 !important;
  }

}

@media (max-width: 768px) {

  /* Move INTRODUCING closer to header */
  .ego-intro-wrap{
    margin-top: -15px !important;
    margin-bottom: -15px !important;
  }

  /* More breathing room under logo */
  .ego-logo{
    margin-bottom: 124px !important;
  }

}
