<style>
/* Responsive & Performance Fix Start: Global viewport stabilization */
html, body {
  max-width: 100vw;
  overflow-x: clip !important; /* Prevents mobile browser "desktop mode" zoom-out issues & strict horizontal scroll fix without breaking sticky header */
  overscroll-behavior-y: none; /* Prevents pull-to-refresh graphical glitches on touch devices */
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-wrap: break-word; /* Prevents text overflow */
  word-wrap: break-word;
}
img, video {
  max-width: 100%;
  height: auto;
}
/* Responsive Dynamic Viewport Height (dvh) fix for Android/iOS URL bars */
.dvh-fix{
min-height:56vh;
}
/* Ensure WebKit browsers respect sticky positioning */
header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
/* Safe Area support for iPhone notches */
@supports (padding-top: env(safe-area-inset-top)) {
  header { padding-top: env(safe-area-inset-top); }
  .footer-premium { padding-bottom: max(2.5rem, env(safe-area-inset-bottom)); }
}
/* Responsive & Performance Fix End */

html{
  background-color:#030712;
}
body{
  font-family:'Plus Jakarta Sans',sans-serif;
  color:#fff;
  background-color:#030712;
  position:relative;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; /* Changed from optimizeSpeed to optimizeLegibility for better font rendering, standard on modern devices */
}

 #progressBar{
position:fixed;
top:0;
left:0;
height:3px;
width:0%;
background:#3b82f6;
z-index:9999;
transition:width .15s linear;
box-shadow:0 0 12px #3b82f6;
/* Performance Fix: GPU accelerate the scroll progress bar to prevent repaint thrashing */
will-change: width;
transform: translateZ(0);
}
 
/* Apple-style Aurora Background */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;

  background:
  radial-gradient(circle at 15% 20%, rgba(59,130,246,.30), transparent 30%),
  radial-gradient(circle at 85% 15%, rgba(139,92,246,.25), transparent 35%),
  radial-gradient(circle at 50% 90%, rgba(37,99,235,.20), transparent 40%),
  #030712;
}

/* Space Glow Line */
body::after{
  content:"";
  position:fixed;
  left:-10%;
  bottom:20%;
  width:120%;
  height:500px;
  z-index:-1;

  background:
  radial-gradient(
  ellipse at center,
  rgba(96,165,250,.45) 0%,
  rgba(59,130,246,.15) 35%,
  transparent 70%
  );

  transform:rotate(-8deg);
  filter:blur(40px);
}

.card-box{
  background:rgba(15,23,42,.55);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);

  border:1px solid rgba(255,255,255,.08);

  box-shadow:
  0 0 30px rgba(59,130,246,.08),
  inset 0 1px 0 rgba(255,255,255,.05);

  transition:transform .4s cubic-bezier(.22,.61,.36,1), border-color .4s ease, box-shadow .4s ease;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

 .reveal{
opacity:0;
transform:translate3d(0,70px,0);
transition:opacity 1s ease, transform 1s ease;
will-change:opacity, transform;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}

.reveal.active{
opacity:1;
transform:translate3d(0,0,0);
}

/* CSS-driven card stagger — avoids JS style mutation & flicker on first paint */
.reveal .card-box{
  opacity:0;
  transform:translate3d(0,45px,0);
  transition:opacity .7s ease, transform .7s ease;
  will-change:opacity, transform;
}
.reveal.active .card-box{
  opacity:1;
  transform:translate3d(0,0,0);
}
.reveal.active .card-box:nth-child(1){ transition-delay:0ms; }
.reveal.active .card-box:nth-child(2){ transition-delay:100ms; }
.reveal.active .card-box:nth-child(3){ transition-delay:200ms; }
.reveal.active .card-box:nth-child(4){ transition-delay:300ms; }
 
.card-box:hover{
  transform:translate3d(0,-8px,0) scale(1.015);
  border-color:#3b82f6;
  will-change:transform, box-shadow;

  box-shadow:
  0 20px 50px rgba(0,0,0,.35),
  0 0 50px rgba(59,130,246,.25),
  inset 0 1px 0 rgba(255,255,255,.08);
}

 #testimonial-card{
  position:relative;
  overflow:hidden;
  touch-action:pan-y;
  transition:all .4s ease;
}
 
#testimonial-card::before{
content:"";
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;

background:
linear-gradient(
90deg,
transparent,
rgba(59,130,246,.12),
transparent
);

transform:translate3d(-100%,0,0) rotate(25deg);
animation:shine 6s linear infinite;
will-change:transform;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}

@keyframes shine{
0%{
transform:translate3d(-100%,0,0) rotate(25deg);
}
100%{
transform:translate3d(100%,0,0) rotate(25deg);
}
}

 .footer-premium{
  background:linear-gradient(
    to bottom,
    rgba(2,6,23,.95),
    #000208
  );
  border-top:1px solid rgba(59,130,246,.25);
  position:relative;
  overflow:hidden;
}

.footer-premium::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:1px;

  background:linear-gradient(
    90deg,
    transparent,
    #3b82f6,
    transparent
  );
}

.footer-premium::after{
  content:"";
  position:absolute;
  bottom:-120px;
  left:50%;
  transform:translateX(-50%);

  width:700px;
  height:300px;

  background:radial-gradient(
    circle,
    rgba(59,130,246,.25) 0%,
    rgba(59,130,246,.08) 40%,
    transparent 75%
  );

  filter:blur(70px);
  pointer-events:none;
}

/* Exit Popup Styles */
#exitPopup {
  animation: popupSlideIn 0.3s ease-out;
}

@keyframes popupSlideIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===== Premium Animation Additions (Performance-Optimized) ===== */

html{
  scroll-behavior:smooth;
}

/* Animated numeric counters: fixed-width digits avoid layout shift while counting */
[data-counter]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  display:inline-block;
}

/* Hero entrance animation — GPU composited (opacity+transform only) */
.hero-anim{
  margin-bottom:0;
  opacity:0;
  transform:translate3d(0,40px,0);
  animation:heroFadeUp .9s ease forwards;
  will-change:opacity, transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.hero-anim.hero-delay-1{ animation-delay:.15s; }
.hero-anim.hero-delay-2{ animation-delay:.35s; }
.hero-anim.hero-delay-3{ animation-delay:.55s; }

@keyframes heroFadeUp{
  from{
    opacity:0;
    transform:translate3d(0,40px,0);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}
/* CTA soft glowing pulse — driven by a composited opacity layer instead of
   animating box-shadow directly (box-shadow repaints every frame and is the
   single biggest cause of Android jank; opacity is GPU-compositable). */
.cta-pulse{
  position:relative;
  isolation:isolate;
}
.cta-pulse::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:0 0 40px rgba(59,130,246,.75),0 0 90px rgba(59,130,246,.35);
  opacity:0;
  animation:ctaPulseGlow 3.2s ease-in-out infinite;
  will-change:opacity;
  pointer-events:none;
  z-index:-1;
}
@keyframes ctaPulseGlow{
  0%,100%{ opacity:0; }
  50%{ opacity:1; }
}

/* Hero wrapper needs relative positioning for blobs + parallax */
.hero-wrap{
  position:relative;
  isolation:isolate;
  contain:layout paint;
}

.hero-parallax{
  position:absolute;
  inset:-10%;
  z-index:-1;
  transform:translate3d(0,0,0);
  transition:transform .2s ease-out;
  pointer-events:none;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* Floating gradient blobs — GPU composited transforms only */
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:.55;
  pointer-events:none;
  z-index:-1;
  transform:translate3d(0,0,0);
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.blob-1{
  width:380px;
  height:380px;
  top:-80px;
  left:-100px;
  background:radial-gradient(circle at 30% 30%, rgba(59,130,246,.55), transparent 70%);
  animation:floatBlob1 9s ease-in-out infinite;
}
.blob-2{
  width:420px;
  height:420px;
  top:40px;
  right:-140px;
  background:radial-gradient(circle at 60% 40%, rgba(139,92,246,.50), transparent 70%);
  animation:floatBlob2 11s ease-in-out infinite;
}

@keyframes floatBlob1{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(30px,40px,0) scale(1.08); }
}
@keyframes floatBlob2{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-30px,-30px,0) scale(1.05); }
}

/* ===== Premium Buttons ===== */
.btn-premium{
  background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);
  transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;
  transform:translate3d(0,0,0);
}
.btn-premium:hover{
  filter:brightness(1.08);
  transform:translate3d(0,-3px,0);
}
.btn-glass{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  transition:transform .3s ease, background .3s ease, border-color .3s ease;
  transform:translate3d(0,0,0);
}
.btn-glass:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(59,130,246,.5);
  transform:translate3d(0,-3px,0);
}

/* ===== Hero AI Dashboard Illustration (pure CSS/HTML) ===== */
.glass-panel{
  max-width:330px;
margin-left:0;
  background:rgba(15,23,42,.55);
  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 25px 70px rgba(0,0,0,.45),
    0 0 60px rgba(59,130,246,.15),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.glass-panel{
    margin-top:-70px;
}

.glass-chip{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.85rem 1.1rem;
  border-radius:1rem;
  background:rgba(15,23,42,.68);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 32px rgba(0,0,0,.35), 0 0 24px rgba(59,130,246,.14);
}

.donut-chart{
  position:relative;
  width:88px;
  height:88px;
  min-width:88px;
  border-radius:50%;
  background:conic-gradient(#3b82f6 0% 95%, rgba(255,255,255,.08) 95% 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.donut-inner{
  width:66px;
  height:66px;
  border-radius:50%;
  background:#0b1120;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.chart-bar{
  flex:1;
  border-radius:6px 6px 0 0;
  background:linear-gradient(to top, rgba(59,130,246,.25), rgba(59,130,246,.55));
}
.chart-bar-active{
  background:linear-gradient(to top, #3b82f6, #8b5cf6);
  box-shadow:0 0 16px rgba(59,130,246,.5);
}

@keyframes floatSlow{
  0%,100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(0,-14px,0); }
}
.float-slow{
  animation:floatSlow 6s ease-in-out infinite;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

@keyframes floatCard1{
  0%,100%{ transform:translate3d(0,0,0) rotate(-2deg); }
  50%{ transform:translate3d(0,-16px,0) rotate(-2deg); }
}
@keyframes floatCard2{
  0%,100%{ transform:translate3d(0,0,0) rotate(2deg); }
  50%{ transform:translate3d(0,14px,0) rotate(2deg); }
}
@keyframes floatCard3{
  0%,100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(0,-10px,0); }
}
.float-card-1{ animation:floatCard1 5s ease-in-out infinite; will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.float-card-2{ animation:floatCard2 6.5s ease-in-out infinite; will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.float-card-3{ animation:floatCard3 5.5s ease-in-out infinite; will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden; }

@keyframes pulseDotAnim{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.4; transform:scale(.8); }
}
.pulse-dot{
  animation:pulseDotAnim 2s ease-in-out infinite;
  will-change:opacity, transform;
}

/* Mobile-specific performance tuning — visually identical, cheaper to render */
@media (max-width: 767px){
  .blob{
    filter:blur(40px); /* smaller blur radius = far cheaper on Android GPUs, same look at mobile viewport scale */
  }
  #testimonial-card::before{
    animation-duration:8s; /* slightly slower shine reduces per-frame compositing pressure on low-end devices */
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-anim, .cta-pulse::after, .blob-1, .blob-2, #testimonial-card::before,
  .float-slow, .float-card-1, .float-card-2, .float-card-3, .pulse-dot{
    animation:none !important;
  }
  html{
    scroll-behavior:auto;
  }
}

/* ===== Uddisha Style Hero For CareerSteps ===== */

/* ===== Hero ===== */

.hero-title{
    max-width:600px;
    font-size:58px;
    line-height:1.05;
    font-weight:900;
    font-style:italic;
    letter-spacing:-1px;
    color:#fff;
}

.hero-highlight{
    display:block;
    margin-top:18px;
    color:#3b82f6;
    text-decoration:underline;
    text-decoration-color:rgba(59,130,246,.35);
    text-decoration-thickness:4px;
}

.hero-options{
    display:block;
    margin-top:6px;
}

.hero-desc{
    max-width:560px;
    margin-top:34px;
    font-size:22px;
    line-height:1.8;
    color:#cbd5e1;
}

.hero-buttons{
    display:flex;
    gap:18px;
    margin-top:42px;
    max-width:520px;
}

@media (max-width:1024px){

.hero-title{
font-size:56px;
}

}

@media (max-width:768px){

.hero-title{
font-size:48px;
line-height:1.08;
letter-spacing:-1px;
}

.hero-desc{
font-size:18px;
line-height:1.7;
}

.hero-buttons{
flex-direction:column;
max-width:100%;
}

}
</style>
