
: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 */

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:999;

  width:min(1200px, 94%);
  margin:16px auto 0;

  border-radius:26px;

  background: rgba(8,12,14,0.42);

  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);

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

  box-shadow:0 18px 60px rgba(0,0,0,0.38);

  overflow:hidden;
}

.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:26px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  pointer-events:none;
}

.site-header::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);

  width:84%;
  height:6px;

  background: linear-gradient(
    90deg,
    rgba(208,223,0,0.80) 0%,
    rgba(0,176,185,0.95) 35%,
    rgba(0,176,185,0.95) 65%,
    rgba(208,223,0,0.80) 100%
  );

  clip-path: polygon(
    0% 50%,
    12% 0%,
    88% 0%,
    100% 50%,
    88% 100%,
    12% 100%
  );

  filter:blur(2px);
  opacity:0.85;
}

@media (max-width: 768px){

  .site-header::after{
    bottom: -2px !important;
  }

}

.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);
}

/* MAIN BACKGROUND */

.site-shell{
  min-height:100vh;
  width:100vw;

  background-image:url('/assets/images/driver-bg.png') !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:right center !important;
  background-attachment:fixed !important;
}

/* MOBILE */

@media (max-width:768px){

  .site-shell{
    background-image:url('/assets/images/MOBILE DRIVERS PIC FINAL.png') !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-attachment:fixed !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;
}

/* CARDS */

.card{
  position:relative;
  overflow:visible;

  padding:26px;
  padding-bottom:44px;

  border-radius:22px;

  border:1px solid rgba(255,255,255,0.14);

  background:rgba(8,12,14,0.42);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(2px);

  box-shadow:0 18px 60px rgba(8,12,14,0.22);

  color:#ffffff;

  margin-bottom:40px;
}

.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);
}

.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(14px);

  box-shadow:
    0 0 12px rgba(0,176,185,0.55),
    0 0 22px rgba(0,176,185,0.35),
    0 0 12px rgba(208,223,0,0.45),
    0 0 22px rgba(208,223,0,0.30);
}

/* 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 */

.hs-form{
  margin-top:8px;
}

.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(8,12,14,0.42) !important;

  color:#fff !important;

  padding:12px 14px !important;

  outline:none !important;
}

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

/* BUTTON */

#driver-submit-btn{
  display:inline-block !important;

  width:auto !important;

  padding:16px 40px !important;

  border-radius:50px !important;

  font-size:16px !important;
  font-weight:800 !important;

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

  color:#ffffff !important;

  background:transparent !important;

  cursor:pointer !important;

  position:relative !important;

  border:none !important;
}

#driver-submit-btn::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);

  z-index:-1;
}

/* 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);
}



.site-header {
  background: rgba(8,12,14,0.42) !important;
}



html,
body{
  background: transparent !important;
}

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




/* Driver page background */
.site-shell{
  min-height: 100vh !important;
  width: 100% !important;
  background-image: url('/assets/images/driver-bg.png') !important;
  background-size: cover !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

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


  .site-shell{
    background-image: url('/assets/images/MOBILE DRIVERS PIC FINAL.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
  }
}

/* MAKE HOME MOBILE CARDS BEHAVE LIKE DRIVER PAGE */
@media (max-width: 768px) {
  .ego-hero-full {
    padding: 110px 0 60px !important;
  }

  .ego-hero-inner {
    width: min(1120px, 92%) !important;
    margin: 0 auto !important;
  }

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

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