@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=Inter:wght@300;400;500;600&display=swap");

:root {
  --radius: 1rem;
  /* Sustainable Energypreneur palette */
  --power-blue: #002ABC;
  --sky-blue: #47A0FF;
  --energy-orange: #FF6229;
  --warm-amber: #FFBD39;
  --sustain-green: #0D4BD1;

  --background: #002ABC;                  /* Power Blue */
  --foreground: #FFFFFF;
  --deep: #001A7A;                        /* deeper power blue */
  --electric: #47A0FF;                    /* sky blue glow */
  --mesh: #47A0FF;
  --card: #001E8F;
  --card-foreground: #FFFFFF;
  --popover: #001E8F;
  --popover-foreground: #FFFFFF;
  --primary: #FF6229;                     /* Energy Orange — primary CTA */
  --primary-foreground: #FFFFFF;
  --secondary: #47A0FF;
  --secondary-foreground: #001A7A;
  --muted: #0a37c9;
  --muted-foreground: #BCD5FF;
  --accent: #FF6229;                      /* Energy Orange accent */
  --accent-foreground: #FFFFFF;
  --destructive: oklch(0.65 0.24 25);
  --destructive-foreground: #FFFFFF;
  --border: rgba(255,255,255,0.14);
  --input: rgba(255,255,255,0.18);
  --ring: #FF6229;
}
#about{
  background-color: var(--foreground);
  color: var(--energy-orange);
}
#career{
  background-color: var(--foreground);
}
* {
  border-color: var(--border);
  font-family: "proxima-nova", system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "proxima-nova", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  margin: 0;
}

h1, h2, h3, h4 {
  letter-spacing: -0.02em;
}

.text-balance {
  text-wrap: balance;
}

.bg-deep {
  background-color: var(--deep);
}
.bg-foreground {
  background-color: black;
}
.p{
  color: black;
}
.b{
  color: blue;
}
.liquid-gradient {
  background:
    radial-gradient(60% 80% at 15% 20%, rgba(71,160,255,0.45), transparent 60%),
    radial-gradient(60% 60% at 85% 25%, rgba(255,98,41,0.30), transparent 60%),
    radial-gradient(60% 60% at 80% 80%, rgba(13,75,209,0.35), transparent 60%),
    radial-gradient(80% 70% at 50% 105%, rgba(0,26,122,0.85), transparent 60%),
    var(--background);
}
ul{
  color: var(--energy-orange);
}
h2{
  color: var(--energy-orange);
}
.glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.text-mesh-gradient {
  background: linear-gradient(120deg, #FFFFFF 0%, #FFBD39 35%, #FF6229 65%, #FFFFFF 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mesh-shimmer 6s ease-in-out infinite;
}
.text-mesh-gradient2 {
  background: linear-gradient(120deg, #FFFFFF 0%, #1E90FF 35%, #003CFF 65%, #FFFFFF 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mesh-shimmer 6s ease-in-out infinite;
}

@keyframes mesh-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes wave-drift {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(-20px) translateY(-10px); }
  100% { transform: translateX(0) translateY(0); }
}
.animate-wave-drift {
  animation: wave-drift 14s ease-in-out infinite;
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(2deg); }
}
.animate-float-slow {
  animation: float-slow 8s ease-in-out infinite;
}

@keyframes blob-morph {
  0%, 100% { border-radius: 42% 58% 70% 30% / 45% 30% 70% 55%; }
  50% { border-radius: 70% 30% 35% 65% / 60% 55% 45% 40%; }
}
.animate-blob {
  animation: blob-morph 12s ease-in-out infinite;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* GSAP Reveal initial state */
.gsap-reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  transition: opacity 0.1s, transform 0.1s, filter 0.1s; /* smooth start */
}

/* ---------------- CAROUSEL ANIMATION ---------------- */
@keyframes infinite-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 12px)); } /* 12px accounts for half the gap */
}
.animate-carousel {
  animation: infinite-scroll 40s linear infinite;
  display: flex;
  gap: 1.5rem; /* 24px = gap-6 equivalent */
  width: max-content;
}
.animate-carousel:hover {
  animation-play-state: paused;
}
.carousel-card {
  width: 380px;
  flex-shrink: 0;
}


/* Signature and curated IEA blogs */
.about-signature {
  max-width: 640px;
}
.signature-wave-img {
  width: min(100%, 640px);
  border-radius: 1.25rem;
  box-shadow: 0 24px 70px rgba(0, 42, 188, 0.20);
}
.wave-bg-image {
  position: absolute;
  width: min(900px, 95vw);
  opacity: 0.28;
  filter: saturate(1.25) blur(0.2px);
  mix-blend-mode: screen;
  animation: wave-drift 16s ease-in-out infinite;
}
.wave-bg-top {
  top: 4rem;
  right: -12rem;
}
.featured-blog-card,
.compact-blog-card,
.blog-card {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.20);
}
.blog-page-body {
  background: var(--background);
  color: var(--foreground);
}
.blog-hero {
  min-height: 72vh;
}
.blog-content p,
.blog-content li {
  color: rgba(255,255,255,0.82);
  line-height: 1.85;
}
.blog-content h2 {
  color: #fff;
}

/* Updated standalone signature + animated wave accents */
.about-signature {
  max-width: 360px;
}
.signature-img {
  width: min(100%, 340px);
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 18px 35px rgba(0, 42, 188, 0.18));
}
.signature-wave-img {
  display: none;
}
.wave-bg-image {
  pointer-events: none;
  user-select: none;
}
.wave-bg-about {
  top: 2rem;
  right: -8rem;
  transform: rotate(-7deg);
  opacity: 0.24;
}
@keyframes wave-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg) scale(1); }
  50% { transform: translate3d(-34px, 18px, 0) rotate(2deg) scale(1.06); }
}


/* Final refinements: signature logo, quote signature, IEA blog system */
.site-signature-logo{width:150px;max-height:42px;object-fit:contain;display:block;filter:drop-shadow(0 8px 18px rgba(71,160,255,.22));}
.quote-signature-img{width:min(260px,55vw);height:auto;object-fit:contain;filter:drop-shadow(0 14px 30px rgba(71,160,255,.22));}
.iea-reference-badge{display:inline-flex;align-items:center;gap:.75rem;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);border-radius:999px;padding:.65rem 1rem;color:rgba(255,255,255,.82);font-size:.8rem;letter-spacing:.04em;backdrop-filter:blur(14px);}
.iea-logo-text{font-family:Sora,system-ui,sans-serif;font-weight:900;letter-spacing:.08em;color:white;background:linear-gradient(135deg,#0d5fff,#47a0ff);border-radius:.55rem;padding:.28rem .48rem;box-shadow:0 10px 24px rgba(71,160,255,.2);}
.blog-category-pill{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:rgba(255,255,255,.78);border-radius:999px;padding:.7rem 1rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;}
.blog-category-pill:first-child{background:var(--primary);color:#fff;border-color:transparent;}
.featured-blog-card img,.compact-blog-card img,.blog-card img{filter:saturate(1.08) contrast(1.03);} 
.blog-card:hover img,.compact-blog-card:hover img{transform:scale(1.04);transition:transform .8s ease;}
.blog-card img,.compact-blog-card img{transition:transform .8s ease;}


/* Proportion fixes requested */
.site-signature-logo{width:92px !important;max-height:30px !important;height:auto !important;object-fit:contain !important;}
header .glass{padding-top:.55rem !important;padding-bottom:.55rem !important;}
.conference-speaker-img{object-position:center top !important;}
.featured-blog-card img,.compact-blog-card img,.blog-card img{object-position:center center;}