/* -------------------------
       RESET & BASE
       ------------------------- */
    :root{
      --bg-dark:#070717;
      --accent:#f6c24a;     /* bitcoin gold */
      --muted:#cfcfe0;
      --glass: rgba(255,255,255,0.06);
      --nav-white: #ffffff;
      --max-width:1200px;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0; font-family: 'Gotham Light', sans-serif; color:#fff;background:var(--bg-dark);-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}

    /* -------------------------
       HEADER (centered white navbar inside hero)
       ------------------------- */
 .abc-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  transition: background-color 0.3s ease;
  margin-top: 30px;
}

  .abc-nav {
  width: min(920px, calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  background: transparent;
  color: #f0f0f0;
  padding: 12px 26px;
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(8,8,8,0.4);
  transition: transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s;
  backdrop-filter: blur(6px);
  justify-content: space-between;
  
}

    .abc-nav:hover{ transform: translateY(-4px) scale(1.01); box-shadow: 0 18px 40px rgba(8,8,8,0.45); text-decoration: none; }

    .abc-logo { display:flex; gap:12px; align-items:center; font-weight:800; font-size:0.95rem; color:#fff; }
    .abc-logo img{width:200px; display:block; }

    .abc-nav-list { display:flex; gap:18px; align-items:center; list-style:none; margin:0; padding:0; }
    .abc-nav-list a{ font-weight:600; color: #f0f0f0;; opacity:.86; padding:8px 10px; border-radius:8px; font-size:.95rem; }
    .abc-nav-list a:hover{ background: #030137; color:#ff7a18; text-decoration: none; }

    /* CTA on nav */
    .abc-nav-cta { margin-left: 14px; padding:8px 14px; background: linear-gradient(90deg,var(--accent), #ff8a3a); border-radius:12px;  color:#070717; box-shadow: 0 6px 18px rgba(246,194,74,0.22) }
	.abc-nav-cta:hover{ text-decoration: none; }

    /* Mobile nav trigger */
    .abc-mobile-toggle { display:none; margin-left:12px; background:#f0f0f0; border-radius: 20px; color: #ff8a3a; border:none; font-size:1.1rem; cursor:pointer; }

    /* -------------------------
       HERO (video background + content)
       ------------------------- */
    .abc-hero {
      position:relative;
      height:100vh;
      min-height:680px;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      isolation:isolate;
    }

    /* background video layers - swap sources for desktop and mobile with CSS */
    .abc-video-wrap{ position:absolute; inset:0; z-index:0; overflow:hidden; }
    .abc-video{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
      min-width:100%; min-height:100%;
      width:auto; height:auto;
      object-fit:cover;
      filter: brightness(.45) contrast(1.05) saturate(.95);
      will-change:transform,filter;
    }

    /* mobile video shown only on small screens */
    .abc-video--mobile { display:none; }
    @media(max-width:799px){
      .abc-video--desktop{ display:none; }
      .abc-video--mobile{ display:block; }
      .abc-hero{ min-height:640px; padding-top:18px }
      .abc-header{ top:12px }
      .abc-nav-cta{
      font-size: 9px;
    }
    .abc-logo img{
      width: 100%;
    
      
    }
    
    .solatrix-shell{
      overflow-y: hidden;
    }
    
    }
    

    /* subtle overlay or glow orbs */
    .abc-hero::before,
    .abc-hero::after{
      content:"";
      position:absolute;
      z-index:1;
      pointer-events:none;
      filter: blur(120px);
      opacity:.9;
    }
    .abc-hero::before{ width:420px;height:420px; left:-80px; top:-80px; background:radial-gradient(circle,#f6c24a22,#f6c24a00) }
    .abc-hero::after{ width:520px;height:520px; right:-120px; bottom:-120px; background:radial-gradient(circle,#4db7ff20,#4db7ff00) }

    /* hero content container */
    .abc-hero-inner{
      position:relative;
      z-index:10;
      width:100%;
      max-width:var(--max-width);
      margin:0 auto;
      padding: 96px 24px 120px;
     
      grid-template-columns: 1fr 520px;
      gap:36px;
      align-items:center;
    }

    @media(max-width:1100px){
      .abc-hero-inner{ grid-template-columns:1fr 420px}
    }
    @media(max-width:880px){
      .abc-hero-inner{ grid-template-columns:1fr; padding-top:54px; gap:28px; text-align:center }
    }

    /* left copy */
    .abc-hero-copy { width:100%; margin-left:20px }
    @media(max-width:880px){ .abc-hero-copy{ margin: 0 auto; } }

    .abc-eyebrow{ color:var(--muted); font-weight:600; letter-spacing:1px; margin-bottom:14px; text-transform:uppercase; font-size:.85rem }
    .abc-hero-title {
      font-size: clamp(2.2rem, 4.2vw, 4.2rem);
      line-height:1.02;
     
      margin:0 0 18px;
      letter-spacing:-0.02em;
      color:#fff;
      display:inline-block;
      transform-origin:center;
      will-change: filter, transform, opacity;
      /* initial soft blur for cinematic feel */
      filter: blur(12px);
      opacity:0;
      transform:translateY(12px) scale(0.995);
      transition: filter .45s ease, opacity .20s ease, transform .6s cubic-bezier(.2,.9,.3,1);
      text-wrap:balance;
      -webkit-font-smoothing:antialiased;
    }

    /* highlight word */
    .abc-hero-title .abc-highlight{
      color:var(--accent);
      text-shadow: 0 8px 36px rgba(246,194,74,0.12);
    }

    /* subtitle */
    .abc-hero-sub { color:#dcdce6; font-size:1.05rem; margin-bottom:22px; opacity:0; transform:translateY(6px); transition:opacity .5s .1s, transform .5s .1s }

    .abc-hero-ctas { display:flex; gap:14px; flex-wrap:wrap; opacity:0; transform:translateY(8px); transition:all .5s .18s }
    .abc-btn-primary {
      padding:12px 20px; border-radius:999px; background:linear-gradient(90deg,var(--accent),#ff8a3a); color:#070717; font-weight:800; border:0; box-shadow: 0 10px 30px rgba(246,194,74,0.15)
    }
    .abc-btn-ghost { padding:12px 18px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); color:#fff; background:transparent; font-weight:700 }

    /* right media (image or illustration) */
    .abc-hero-media { display:flex; align-items:center; justify-content:center; position:relative }
    .abc-hero-media .abc-graphic {
      width:100%;
      max-width:440px;
      transform: translateY(0);
      transition: transform .5s cubic-bezier(.2,.9,.3,1), filter .45s;
      will-change: transform;
      filter: drop-shadow(0 26px 60px rgba(0,0,0,0.55));
      border-radius:18px;
    }

    /* BTC coin: centered floating 3D */
    .abc-coin-wrap {
      position:absolute;
      z-index:9;
      left:50%;
      top:50%;
      transform: translate(-50%,-5%);
      pointer-events:auto;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .abc-coin {
      width:128px;
      height:128px;
      border-radius:50%;
      background: linear-gradient(145deg,#f6c24a,#f5a32b);
      box-shadow: 0 8px 30px rgba(246,194,74,0.18), inset 0 -6px 18px rgba(0,0,0,0.15);
      display:grid;
      place-items:center;
      transform-style:preserve-3d;
      perspective:900px;
      transition: transform .45s cubic-bezier(.2,.9,.3,1), box-shadow .35s;
      animation: coin-spin 5.8s linear infinite;
    }

    .abc-coin .btc { font-weight:900; font-size:36px; color:#231f20; text-shadow: 0 2px 6px rgba(255,255,255,0.12) }

    .abc-coin:hover { transform: scale(1.06) rotateY(18deg); box-shadow: 0 18px 60px rgba(246,194,74,0.28) ; animation-play-state: paused; cursor:grab }

    @keyframes coin-spin{
      0%{ transform: rotateY(0deg) }
      100%{ transform: rotateY(360deg) }
    }

    /* small pulse glow */
    .abc-coin::after{
      content:"";
      position:absolute; inset:-18px;
      border-radius:50%;
      background: radial-gradient(circle, rgba(246,194,74,0.14), transparent 40%);
      filter:blur(18px);
      z-index:-1;
      opacity:0.9;
    }

    /* reveal classes when hero loads */
    .abc-revealed .abc-hero-title { filter: blur(0px); opacity:1; transform: translateY(0) scale(1) }
    .abc-revealed .abc-hero-sub { opacity:1; transform:translateY(0) }
    .abc-revealed .abc-hero-ctas { opacity:1; transform:translateY(0) }

    /* when scrolled down, increase title blur for cinematic effect */
    .abc-blur-on-scroll .abc-hero-title { filter: blur(10px) !important; transform: translateY(-6px) scale(.995) !important; opacity:.9 }

    /* NAV Mobile overlay panel */
    .abc-mobile-panel {
      position: fixed;
      inset:0;
      display:none;
      z-index:120;
      align-items:center;
      justify-content:center;
      background: rgba(2,2,6,0.72);
      backdrop-filter: blur(8px);
      transform: scale(.96);
      opacity:0;
    }
    .abc-mobile-panel.open{ display:flex; animation: mobile-zoom-in .42s cubic-bezier(.2,.9,.25,1) forwards }

    @keyframes mobile-zoom-in{
      0%{ transform: scale(.92); opacity:0 }
      60%{ transform: scale(1.02); opacity:1 }
      100%{ transform: scale(1); opacity:1 }
    }

    .abc-mobile-menu{
      width: min(520px, calc(100% - 40px));
      background: #fafafa;
      color:#060607;
      border-radius:18px;
      padding:28px;
      box-shadow: 0 20px 60px rgba(2,2,6,0.6);
      display:flex; flex-direction:column; gap:18px;
      text-align:center;
    }
    .abc-mobile-menu a{ font-size:1.1rem; font-weight:700; color:#111; padding:12px 8px; border-radius:10px}
    .abc-mobile-menu a:hover{ background:rgba(0,0,0,0.04) }

    /* small screens: show toggle & hide nav-list */
    @media(max-width:880px){
      .abc-nav-list{ display:none }
      .abc-mobile-toggle{ display:inline-block }
    }

    /* footer of hero spacing so content below doesn't overlap */
    .below-hero-spacer{ height:24px }

    /* small niceties */
    .muted-small{ color:var(--muted); font-size:.95rem }

	.hero-content, .hero-buttons, .hero-graphic {
  animation: fadeBlurIn 10.5s ease forwards;
}

@keyframes fadeBlurIn {
  0% { opacity: 0; filter: blur(40px); transform: translateY(30px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
 :root{
    --bg:#ffffff;
    --text:#121212;
    --muted:#6b6b6b;
    --accent:#f39c12; /* gold/orange */
    --card-shadow: 0 18px 40px rgba(17,17,17,0.06);
    --radius:20px;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0;background:var(--bg); font-family: 'Gotham Light', sans-serif; color:var(--text);-webkit-font-smoothing:antialiased}
  a{color:inherit}

  /* SECTION */
  .highlights-section{
    position:relative;
    height:120vh;              /* compact */
    overflow:hidden;
    display:block;
  }

  /* Header: title + subtitle */
  .highlights-header{
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    text-align:center;
    width: min(1000px, 92%);
    z-index: 30;
    pointer-events:none;
  }
  .highlights-title{
    margin:0;
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    font-weight:800;
    color: var(--text);
    filter: blur(8px);        /* initial blur */
    opacity: 0.0;
    transition: filter .45s ease, opacity .45s ease, transform .45s ease;
    transform: translateY(6px);
    letter-spacing:-0.02em;
  }
  .highlights-title.is-visible{ filter: blur(0); opacity:1; transform:translateY(0) }
  .highlights-sub{
    margin:10px 0 0;
    color:var(--muted);
    font-size:1rem;
    max-width:760px;
    margin-left:auto; margin-right:auto;
    opacity:.95;
  }

  /* center timeline decoration */
  .timeline-deco{
    position:absolute;
    top:0; left:50%;
    transform:translateX(-50%);
    width:4px;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;
    pointer-events:none;
  }
  .timeline-line{
    width:2px;
    height:60%;
    background: linear-gradient(#ffb86b, #f39c12);
    filter:blur(6px);
    border-radius:2px;
    opacity:0.22;
  }
  .timeline-dot{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:12px;height:12px;border-radius:50%;
    background:var(--accent);
    box-shadow: 0 8px 30px rgba(243,156,18,0.18);
    z-index:12;
    opacity:0.9;
  }

  /* Panels wrapper - relative to the section */
  .panels {
    position: absolute;
    inset: 12% 0 0 0; /* top offset to avoid header */
    height: 88%;
    width:100%;
    display:block;
    z-index:20;
    pointer-events: none;
  }

  /* Each panel - stacked centered */
  .panel {
    position: absolute;
    left:50%;
    top: 50%;
    transform: translate(-50%,-50%) translateY(14px) scale(0.985);
    width: min(760px, 92%);
    max-width:760px;
    background: linear-gradient(180deg, #ffffff, #fbfbfb);
    border-radius: var(--radius);
    padding: 34px 34px;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(17,17,17,0.03);
    text-align:center;
    opacity:0;
    transition: opacity .62s cubic-bezier(.2,.9,.25,1), transform .62s cubic-bezier(.2,.9,.25,1);
    pointer-events:auto;
    z-index:5;
  }

  .panel.active{
    opacity:1;
    transform: translate(-50%,-50%) translateY(0) scale(1);
    z-index:30;
  }

  /* icon badge */
  .panel .icon-badge{
    width:76px;height:76px;border-radius:50%;
    display:inline-grid;place-items:center;margin:0 auto 18px;
    background: radial-gradient(circle at 30% 30%, #fff, #fff);
    box-shadow: 0 10px 30px rgba(243,156,18,0.08);
    border: 3px solid rgba(243,156,18,0.12);
  }
  .panel svg{ width:34px;height:34px; display:block; color:var(--accent) }

  /* heading / text */
  .panel h3{ margin:0 0 10px; font-size:1.4rem; color:var(--text); font-weight:700; letter-spacing:-0.01em }
  .panel p{ margin:0; color:var(--muted); font-size:1rem; line-height:1.6 }

  /* subtle accent line under heading */
  .panel .underline{
    width:56px;height:4px;border-radius:2px;margin:16px auto 20px;
    background: linear-gradient(90deg,#ffb86b,#f39c12);
    opacity:.95;
  }

  /* responsive */
  @media (max-width: 880px){
    .highlights-title{ font-size:1.6rem }
    .panel { padding:22px 18px; width:92% }
    .panel .icon-badge{ width:60px; height:60px }
    .panel svg{ width:28px; height:28px }
  }
  /* reduced motion */
  @media (prefers-reduced-motion: reduce){
    .panel, .highlights-title { transition:none; animation:none; }
  }
  /* Basic resets */
body {
  margin: 0;
  font-family: 'Gotham Light', sans-serif;
  background: #fff;
  color: #111;
}

.highlights-showcase {
  padding: 120px 20px;
  position: relative;
  overflow: hidden;
  background-color: #030137;
}

/* Wrapper */
.highlights-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Header zoom-in animation */
.showcase-title {
  font-size: 3rem;
  font-weight: 800;
  color: #ff8a3a;
  margin-bottom: 20px;
  transform: scale(0.5);
  opacity: 0;
  animation: zoomIn 1s forwards ease-out;
   font-family: 'Gotham Bold', sans-serif;
}

@keyframes zoomIn {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Tagline typewriter */
.showcase-tagline {
  font-size: 1.4rem;
  color: #555;
  margin-bottom: 60px;
  height: 28px;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #ff8a3a;
}

/* Grid layout */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 50px;
}

/* Cards */
.showcase-card {

  border-radius: 25px;
  padding: 40px 25px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.08);
  backdrop-filter: blur(20px);
  text-align: center;
  transition: transform 0.6s, box-shadow 0.6s;
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  position: relative;
}

.showcase-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 50px 80px rgba(0,0,0,0.15);
}

.card-icon img {
  width: 90px;
  height: 90px;
  margin-bottom: 20px;
  filter: drop-shadow(0 5px 20px rgba(255,138,58,0.5));
  animation: float 3s ease-in-out infinite;
  justify-self: center;

}

.card-title {
  font-size: 1.7rem;
  margin-bottom: 10px;
  font-weight: 700;
  color: #ff8a3a;
}

.card-desc {
  font-size: 1rem;
  color: #555;
}

/* Floating animations */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* Glow elements */
.floating-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.4;
  z-index: 1;
}

.glow1 {
  width: 300px;
  height: 300px;
  background: #ff8a3a;
  top: -50px;
  left: -50px;
  animation: moveGlow1 8s infinite alternate ease-in-out;
}

.glow2 {
  width: 250px;
  height: 250px;
  background: #ff8a3a;
  bottom: -60px;
  right: -60px;
  animation: moveGlow2 10s infinite alternate ease-in-out;
}

.glow3 {
  width: 150px;
  height: 150px;
  background: #ff8a3a;
  top: 50%;
  left: 50%;
  animation: moveGlow3 12s infinite alternate ease-in-out;
}

@keyframes moveGlow1 {
  0% { transform: translate(0,0); }
  100% { transform: translate(50px, 50px); }
}
@keyframes moveGlow2 {
  0% { transform: translate(0,0); }
  100% { transform: translate(-50px, -50px); }
}
@keyframes moveGlow3 {
  0% { transform: translate(-50%,-50%); }
  100% { transform: translate(-30%,-60%); }
}
/* Blur-in animation for header */
.showcase-title {
  font-size: 3rem;
  font-weight: 800;
  color: #ff8a3a;
  margin-bottom: 20px;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);
  transition: all 1s ease-out;
}

.showcase-title.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.pattern-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('/img/patttern.png'); /* Make sure the path is correct */
  background-repeat: no-repeat;
  background-size: contain; /* or 'cover' if you want full stretch */
  z-index: -1;
  pointer-events: none; /* Prevents it from blocking clicks */
  background-position: center;
  opacity: 0.5; /* Makes sure it's subtle behind content */
}
/* General setup */
.showcase-title {
  font-size: 3rem;
  font-weight: 900;
  display: inline-block;
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  filter: blur(10px);
}

/* Gradient text animation */
.highlight {
  background: linear-gradient(90deg, #ff8a3a, #fff, #ff8a3a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  background-size: 200% 100%;
  animation: gradientShift 3s infinite linear;
   font-family: 'Gotham Bold', sans-serif;
}
.chorus-subdesc {
  margin-top: .65rem;
  font-size: 1.1rem;
  font-weight: 400;
  max-width: 640px;
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
  margin-left: auto;
  margin-right: auto;
   font-family: 'Gotham Light', sans-serif;
}


@keyframes gradientShift {
  0% { background-position: 200% 0; }
  50% { background-position: 0 0; }
  100% { background-position: 200% 0; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .succession-title .char,
  .succession-title .char.animate {
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* Underline animation */
.underline {
  display: block;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, #111, #ff8a3a);
  border-radius: 2px;
  margin-top: 8px;
}

/* Tagline */
.showcase-tagline {
  font-size: 1.4rem;
  color: #555;
  opacity: 0;
  margin-top: 10px;
  filter: blur(10px);
  transform: translateY(20px);
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #ff8a3a;
}

/* Animations on reveal */
@keyframes blurInUp {
  0% { opacity: 0; transform: translateY(30px); filter: blur(10px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes underlineGrow {
  0% { width: 0; }
  100% { width: 100%; }
}

/* Active classes */
.showcase-title.visible {
  animation: blurInUp 1s forwards ease-out;
}

.showcase-title.visible .underline {
  animation: underlineGrow 1s forwards ease-out 0.8s;
}

.showcase-tagline.visible {
  animation: blurInUp 1s forwards ease-out 1s;
}
/* Grid Layout */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* force 4 per row */
  gap: 20px;
  position: relative;
  margin-top: 60px;
}
@media (max-width: 1024px) {
  .showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .showcase-grid {
    grid-template-columns: 1fr;
  }
}


/* Cards */
.showcase-card {
  position: relative;
  background: rgba(255,255,255,0.85);
  border-radius: 25px;
  padding: 40px 25px;
  text-align: center;
  box-shadow: 0 30px 60px rgba(0,0,0,0.08);
  backdrop-filter: blur(20px);
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  overflow: hidden;
}

.showcase-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 50px 80px rgba(0,0,0,0.15);
}

/* Card Icon */
.card-icon img {
  width: 90px;
  height: 90px;
  margin-bottom: 20px;
  filter: drop-shadow(0 5px 20px rgba(255,138,58,0.5));
  animation: floatIcon 3s ease-in-out infinite;
  justify-self: center;
}

@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* Card Text */
.card-title {
  font-size: 1.6rem;
  margin-bottom: 10px;
  font-weight: 700;
  color: #cecece;
}
.bus1{
  background-color: rgba(255, 166, 0, 0.307);
}
.bus2{
  background-color: rgba(234, 255, 0, 0.266);
}
.bus3{
  background-color: rgba(0, 4, 255, 0.158);
}

.card-desc {
  font-size: 1rem;
  color: #cecece;
}

/* Glow elements behind card */
.card-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  z-index: 0;
}

.glow1 {
  width: 250px;
  height: 250px;
  background: #ff8a3a;
  top: -50px;
  left: -50px;
  animation: moveGlow1 8s infinite alternate ease-in-out;
}

.glow2 {
  width: 200px;
  height: 200px;
  background: #ff8a3a;
  bottom: -40px;
  right: -40px;
  animation: moveGlow2 10s infinite alternate ease-in-out;
}

.glow3 {
  width: 150px;
  height: 150px;
  background: #ff8a3a;
  top: 50%;
  left: 50%;
  animation: moveGlow3 12s infinite alternate ease-in-out;
}

@keyframes moveGlow1 {
  0% { transform: translate(0,0); }
  100% { transform: translate(30px, 30px); }
}
@keyframes moveGlow2 {
  0% { transform: translate(0,0); }
  100% { transform: translate(-30px, -30px); }
}
@keyframes moveGlow3 {
  0% { transform: translate(-50%,-50%); }
  100% { transform: translate(-30%,-60%); }
}

/* Reveal animation on scroll */
@keyframes revealCard {
  0% { opacity: 0; transform: translateY(50px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.showcase-card.visible {
  animation: revealCard 0.8s forwards ease-out;
}
/* Section setup */
.about-abc {
  
  padding: 80px 20px;
}

.about-abc-container {
  max-width: 1200px; /* constrain width */
  margin: 0 auto; /* center */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 50px;
}

/* Left content */
.about-abc-left {
  flex: 1;
  min-width: 350px;
  max-width: 600px;
}

/* Title */
.about-abc-title {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 30px;
  color: #111;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

/* Tabs styling */
.about-tabs {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 10px 30px;
  border: 1px solid #ddd;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 600;
  background: #f9f9f9;
  color: #555;
  transition: all 0.3s ease;
  position: relative;
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  height: 3px;
  background: #ff8a3a;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.tab-btn.active::after {
  width: 60%;
}

.tab-btn.active,
.tab-btn:hover {
  background: #fff;
  color: #111;
  border-color: #ff8a3a;
}

/* Panels */
.tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.tab-panel.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Highlight text */
.about-abc-highlight {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ff8a3a;
  margin-top: 15px;
}

/* Button */
.about-abc-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 35px;
  border-radius: 25px;
  background: #ff8a3a;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.about-abc-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(255,138,58,0.3);
}

/* Right image */
.about-abc-right {
  flex: 1;
  min-width: 300px;
  max-width: 550px;
  position: relative;
}

.tab-image {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.05);
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

.tab-image.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Responsive adjustments */
@media screen and (max-width: 900px) {
  .about-abc-container {
    flex-direction: column;
    align-items: center;
  }

  .about-abc-left, .about-abc-right {
    max-width: 100%;
    text-align: center;
  }

  .about-tabs {
    justify-content: center;
  }
}
body {
  margin: 0;
font-family: 'Gotham Light', sans-serif;
}

.solutions-area {
 
  color: #111;
  padding: 80px 20px;
  overflow: hidden;
}

.solutions-container {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.solutions-header h2 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #ff8a3a, #000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.solutions-header p {
  font-size: 1.2rem;
  color: #555;
  margin-bottom: 60px;
}

/* Wrapper */
.solutions-wrapper {
  position: relative;
}

/* Slides */
.solution-slide {
  position: relative;
  margin: 40px 0;
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s ease;
  display: flex;
  justify-content: center;
}

.solution-slide.active {
  opacity: 1;
  transform: translateY(0);
}

/* Container card */
.solution-content {
  background: linear-gradient(145deg, rgba(255,138,58,0.1), rgba(0,0,0,0.02));
  backdrop-filter: blur(15px);
  padding: 50px 30px;
  border-radius: 25px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  max-width: 700px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.solution-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.15);
}

.solution-icon {
  font-size: 4rem;
  color: #ff8a3a;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.5s ease;
}

.solution-slide.active .solution-icon {
  opacity: 1;
  transform: translateY(0);
}

.solution-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease 0.2s;
}

.solution-slide.active .solution-title {
  opacity: 1;
  transform: translateY(0);
}

.solution-desc {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #555;
  opacity: 0;
  min-height: 120px;
  margin-top: 10px;
}
/* Section */
.impact-section {
  
  padding: 90px 20px;
}

.impact-title {
  text-align: center;
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 70px;
  background: linear-gradient(90deg, #ff8a3a, #ff4d4d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Layout */
.impact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(350px, 1fr));
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Card */
.impact-item {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transform: scale(0.92) translateY(60px);
  opacity: 0;
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.impact-item.in-view {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Image */
.impact-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

/* Text body */
.impact-body {
  padding: 30px 30px 40px;
}

/* Title colors */
.impact-heading {
  font-size: 1.6rem;
  font-weight: 700;
  position: relative;
  margin-bottom: 14px;
}

.impact-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 60px;
  height: 4px;
  border-radius: 4px;
}

.heading-1 { color: #ff8a3a; }
.heading-1::after { background: #ff8a3a; }

.heading-2 { color: #00a884; }
.heading-2::after { background: #00a884; }

.heading-3 { color: #3b82f6; }
.heading-3::after { background: #3b82f6; }

.heading-4 { color: #a855f7; }
.heading-4::after { background: #a855f7; }

.impact-text {
  font-size: 1.1rem;
  font-weight: 500;
  color: #444;
  margin-bottom: 12px;
}

.impact-desc {
  font-size: 1rem;
  line-height: 1.65;
  color: #666;
}

/* Mobile */
@media (max-width: 768px) {
  .impact-title { font-size: 2.2rem; }
  .impact-body { text-align: center; }
}
/* --- Roadmap Container --- */
.roadmap-section {
 
  padding: 100px 20px;
  font-family: 'Gotham Light', sans-serif;
}

.roadmap-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(90deg, #ff7a18, #ff3c78);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 80px;
}

/* Timeline line */
.roadmap-timeline {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.roadmap-timeline::after {
  content: "";
  position: absolute;
  width: 2px;
  background: linear-gradient(to bottom, #ff7a18, #ff3c78);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -2px;
  border-radius: 4px;
}

/* Items */
.roadmap-item {
  position: relative;
  width: 50%;
  padding: 30px 40px;
  opacity: 0;
  transform: translateY(60px) scale(0.95);
  transition: all 0.9s ease;
}

.roadmap-item.left {
  left: 0;
}

.roadmap-item.right {
  left: 50%;
}

.roadmap-item.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Content box */
.roadmap-content {
  background: #f8f8f8;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  position: relative;
}
.nnn{
  color: #ff8a3a;
}

.roadmap-icon {
  font-size: 26px;
  background: #ff7a18;
  color: #fff;
  padding: 12px;
  border-radius: 50%;
  position: absolute;
  top: -20px;
  left: -20px;
}

/* Headings */
.roadmap-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #ff8a3a;
}

.roadmap-content span {
  font-size: 0.9rem;
  color: #777;
}

/* Text */
.roadmap-content p {
  font-size: 1rem;
  line-height: 1.7;
  color: #555;
}

/* Responsive */
@media (max-width: 768px) {
  .roadmap-timeline::after { left: 20px; }
  .roadmap-item { width: 100%; left: 0 !important; padding-left: 60px; padding-right: 20px; }
}
/* --- Partners Section --- */
.partners-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8f8ff 100%);
  padding: 100px 20px;
 font-family: 'Gotham Light', sans-serif;
}

.partners-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #ff7a18, #ff3c78);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.partners-subtitle {
  text-align: center;
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 60px;
}

/* Wrapper */
.partners-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Partner Card */
.partner-card {
  flex: 1 1 calc(45% - 30px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  padding: 40px 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transform: scale(0.85);
  opacity: 0;
  transition: all 1s cubic-bezier(.19,1,.22,1);
}

.partner-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(255,122,24,0.2), rgba(255,60,120,0.05));
  transform: scale(0);
  opacity: 0.4;
  border-radius: 50%;
  transition: transform 1.5s ease-out;
}

.partner-card.show {
  transform: scale(1);
  opacity: 1;
}

.partner-card.show::before {
  transform: scale(1);
}

.partner-icon {
  font-size: 40px;
  margin-bottom: 20px;
  color: #ff7a18;
  animation: pulse 3s infinite ease-in-out;
}

.partner-card h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}

.site-footer {
  background: #000;
  color: #f0f0f0;
  padding: 60px 20px 30px;
  font-family: 'Gotham Light', sans-serif;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-brand h3 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: #fff;
}

.footer-brand p {
  max-width: 320px;
  line-height: 1.6;
  color: #f0f0f0;
}

.social-links a {
  font-size: 1.5rem;
  margin-right: 12px;
  color: #fff;
  transition: transform 0.3s ease, color 0.3s ease;
}

.social-links a:hover {
  color: #ff8a3a;
  transform: scale(1.2);
}

.footer-links h4,
.footer-newsletter h4 {
  font-size: 1.3rem;
  margin-bottom: 12px;
  color: #fff;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: #f0f0f0;
  text-decoration: none;
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-links a:hover {
  color: #ff7a18;
  padding-left: 4px;
}

.footer-newsletter p {
  color: #f0f0f0;
  margin-bottom: 10px;
}

.newsletter-form {
  display: flex;
  gap: 10px;
}

.newsletter-form input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 6px;
  border: none;
  outline: none;
}

.newsletter-form button {
  padding: 10px 18px;
  background: #ff7a18;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.newsletter-form button:hover {
  background: #ffb800;
  transform: translateY(-2px);
}

.footer-bottom {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #f0f0f0;
  font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .newsletter-form {
    flex-direction: column;
    width: 100%;
  }
  .newsletter-form input,
  .newsletter-form button {
    width: 100%;
  }
}
/* About ABH Section */
.about-abh-section {
  background: #fff;
  padding: 100px 20px;
 font-family: 'Gotham Light', sans-serif;
  color: #222;
  position: relative;
  overflow: hidden;
}

.about-abh-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Left Image */
.about-abh-image {
  flex: 1 1 450px;
  opacity: 0;
  transform: translateX(-60px);
  animation: slideLeft 1s ease forwards;
}
.about-abh-image img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  transition: transform 1s ease;
}
.about-abh-image img:hover {
  transform: scale(1.05) rotate(-1deg);
}

/* Right Text */
.about-abh-text {
  flex: 1 1 500px;
  position: relative;
}

.about-abh-text h1,
.about-abh-text h2,
.about-abh-text h3,
.about-abh-text p {
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(30px);
}

/* Gradient text */
.about-abh-text h1,
.about-abh-text h2,
.about-abh-text h3 {
  background: linear-gradient(90deg, #ff8a3a, #ff3c78, #ffb800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Typewriter effect for H1 */
.typewriter {
  overflow: hidden;
  border-right: .15em solid #ff3c78;
  white-space: nowrap;
  animation: typing 2s steps(40, end) forwards, blink 0.75s step-end infinite;
}

/* Line-by-line animation */
.about-abh-text .line-anim:nth-child(2) { animation: fadeUp 1s ease forwards 0.6s; }
.about-abh-text .line-anim:nth-child(3) { animation: fadeUp 1s ease forwards 1s; }
.about-abh-text .line-anim:nth-child(4) { animation: fadeUp 1s ease forwards 1.4s; }
.about-abh-text .line-anim:nth-child(5) { animation: fadeUp 1s ease forwards 1.8s; }

/* Decorative accent line */
.accent-line {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #ff8a3a, #ff3c78);
  border-radius: 2px;
  margin-top: 20px;
  opacity: 0;
  transform: translateX(-20px);
  animation: fadeAccent 1s ease forwards 2.2s;
}

/* Animations */
@keyframes slideLeft {
  0% { opacity: 0; transform: translateX(-60px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeAccent {
  0% { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes blink {
  50% { border-color: transparent; }
}

/* Floating shapes */
.about-abh-section::before,
.about-abh-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
  z-index: 0;
}
.about-abh-section::before {
  width: 120px;
  height: 120px;
  background: #ff8a3a;
  top: 20%;
  left: 5%;
  animation: floatShape 6s ease-in-out infinite alternate;
}
.about-abh-section::after {
  width: 80px;
  height: 80px;
  background: #ff3c78;
  bottom: 10%;
  right: 10%;
  animation: floatShape 8s ease-in-out infinite alternate-reverse;
}
@keyframes floatShape {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-20px) rotate(15deg); }
}

/* Responsive */
@media (max-width: 768px) {
  .about-abh-container { flex-direction: column; text-align: center; }
  .about-abh-image { transform: translateX(0); animation: none; }
  .about-abh-text h1, h2, h3 { font-size: 1.8rem; }
}
.faq-section {
 background-color: #030137;
  padding: 100px 20px;
  font-family: 'Gotham Light', sans-serif;
  position: relative;
  overflow: hidden;
}

.faq-container {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.faq-title {
  font-size: 2.5rem;
  background: linear-gradient(90deg, #ff8a3a, #ff8a3a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s ease forwards;
}

.faq-subtitle {
  color: #f0f0f0;
  margin-bottom: 50px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s ease forwards 0.4s;
}

.faq-item {
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.faq-item:hover {
  transform: translateY(-5px);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #ff7a18, #ff8a3a);
  color: #fff;
  cursor: pointer;
  padding: 20px 25px;
  font-weight: 600;
  font-size: 1.1rem;
  position: relative;
  transition: background 0.3s ease;
}

.faq-question:hover {
  background: linear-gradient(90deg, #ff7a18, #030137);
}

.faq-icon {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  background: #fff5f0;
  color: #333;
  padding: 0 25px;
  transition: max-height 0.5s ease, padding 0.5s ease;
}

.faq-answer p {
  padding: 15px 0;
  line-height: 1.6;
}

/* Active state */
.faq-item.active .faq-answer {
  max-height: 200px;
  padding: 15px 25px;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

/* Floating accent shapes */
.faq-section::before,
.faq-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  opacity: 0.12;
  z-index: 0;
}
.faq-section::before {
  width: 100px;
  height: 100px;
  background: #ff8a3a;
  top: 10%;
  left: 5%;
  animation: floatShape 6s ease-in-out infinite alternate;
}
.faq-section::after {
  width: 60px;
  height: 60px;
  background: #ff3c78;
  bottom: 10%;
  right: 8%;
  animation: floatShape 8s ease-in-out infinite alternate-reverse;
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes floatShape {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-15px) rotate(10deg); }
}

/* Responsive */
@media (max-width:768px) {
  .faq-container { text-align: center; }
  .faq-question { justify-content: center; gap: 10px; }
}
.contact-section {
  background: #fff;
  padding: 100px 20px;
  font-family: 'Gotham Light', sans-serif;
  position: relative;
  overflow: hidden;
}

.contact-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Left Image */
.contact-image {
  flex: 1 1 500px;
  opacity: 0;
  transform: translateX(-60px);
  animation: slideLeft 1s ease forwards;
}
.contact-image img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  transition: transform 1s ease;
}
.contact-image img:hover {
  transform: scale(1.05) rotate(-1deg);
}

/* Right Form */
.contact-form-wrapper {
  flex: 1 1 500px;
  opacity: 0;
  transform: translateX(60px);
  animation: slideRight 1s ease forwards 0.4s;
}

.contact-title {
  font-size: 2.5rem;
  background: linear-gradient(90deg, #ff8a3a, #ff8a3a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 15px;
}

.contact-desc {
  color: #555;
  margin-bottom: 30px;
  font-size: 1.1rem;
}

/* Form styling */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 15px 20px;
  border-radius: 12px;
  border: 2px solid #eee;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: #ff8a3a;
  box-shadow: 0 4px 20px rgba(255,138,58,0.25);
  outline: none;
}

.contact-btn {
  padding: 15px 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #ff8a3a, #ff3c78);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255,60,120,0.4);
}

/* Animations */
@keyframes slideLeft {
  0% { opacity: 0; transform: translateX(-60px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
  0% { opacity: 0; transform: translateX(60px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Floating accent shapes */
.contact-section::before,
.contact-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  opacity: 0.12;
  z-index: 0;
}
.contact-section::before {
  width: 100px;
  height: 100px;
  background: #ff8a3a;
  top: 5%;
  left: 5%;
  animation: floatShape 6s ease-in-out infinite alternate;
}
.contact-section::after {
  width: 80px;
  height: 80px;
  background: #ff3c78;
  bottom: 10%;
  right: 10%;
  animation: floatShape 8s ease-in-out infinite alternate-reverse;
}

@keyframes floatShape {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-15px) rotate(10deg); }
}

/* Responsive */
@media(max-width:768px) {
  .contact-container {
    flex-direction: column;
    text-align: center;
  }
  .contact-image { transform: translateX(0); animation: none; }
  .contact-form-wrapper { transform: translateX(0); animation: none; }
}
.conviction-section {

  padding: 150px 20px;
  position: relative;
  overflow: hidden;
  font-family: 'Gotham Light', sans-serif;
}

.conviction-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.conv-line {
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(90deg, #ff8a3a, #ff3c78);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: translateY(50px);
  margin: 0;
  line-height: 1.2;
}

.conv-desc p {
  font-size: 1.2rem;
  color: #555;
  opacity: 0;
  transform: translateY(20px);
  margin: 15px 0;
}

/* Floating shapes */
.conviction-section::before,
.conviction-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  opacity: 0.08;
  z-index: 0;
}
.conviction-section::before {
  width: 120px;
  height: 120px;
  
  top: 10%;
  left: 5%;
  animation: floatShape 6s ease-in-out infinite alternate;
}
.conviction-section::after {
  width: 80px;
  height: 80px;
 
  bottom: 10%;
  right: 8%;
  animation: floatShape 8s ease-in-out infinite alternate-reverse;
}

@keyframes floatShape {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-15px) rotate(15deg); }
}

/* Animations */
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media(max-width:768px){
  .conv-line { font-size: 2.2rem; text-align: center; }
  .conv-desc { text-align: center; }
  .conviction-container { align-items: center; }
}
.conviction-section {
 
  padding-top: 200px;
  padding-bottom: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  
  font-family: 'Gotham Light', sans-serif;
}

.conviction-container {
  max-width: 900px;
  z-index: 2;
}

/* Initial state for scroll animation */
.conv-subtitle, .conv-title, .conv-desc {
  opacity: 0;
  transform: translate(-50px, 50px);
  transition: all 1s ease-out;
}

/* Visible state */
.in-view {
  opacity: 1 !important;
  transform: translate(0,0) !important;
}

/* Sub-title */
.conv-subtitle {
  font-size: 1.2rem;
  color: #ff8a3a;
  margin-bottom: 15px;
}

/* Main title */
.conv-title {
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(90deg, #ff8a3a, #ff7a18);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 20px 0;
}

/* Description */
.conv-desc {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.8;
}
.succession-title {
 font-family: 'Gotham Bold', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  
  line-height: 1.2;
  width: 100%;
  
}
.succession-title .word {
  display: inline-block;   /* keep letters together */
  white-space: nowrap;     /* optional: prevents word splitting inside */
}

.succession-title .char {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  
  will-change: transform, opacity;
}

.succession-title .char.animate {
  animation: rise 0.6s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes rise {
  0%   { transform: translateY(100%); opacity: 0; filter: blur(4px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { transform: translateY(0); opacity: 1; }
}

/* Tablets */
@media (max-width: 992px) {
  .succession-title {
    font-size: 2.4rem; /* ~38px */
  }
}

/* Mobile phones */
@media (max-width: 600px) {
  .succession-title {
    font-size: 1.8rem; /* ~28px */
    line-height: 1.2;
    word-break: break-word;   /* Optional: wrap long words */
    white-space: normal;      /* Allow wrapping */
    width: 80%;
  }
  .conviction-section {
 
 padding-top: 50px;
 padding-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
 
  font-family: 'Gotham Light', sans-serif;
}
}

/* Extra small screens (e.g., <400px) */
@media (max-width: 400px) {
  .succession-title {
    font-size: 2rem; /* ~24px */
    width: 90%;
  }
}

.succession-title .char {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  
}

.succession-title .char.animate {
  animation: rise 0.6s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes rise {
  0% {transform: translateY(100%); opacity:0; filter:blur(4px);}
  60% {opacity:1; filter:blur(0);}
  100% {transform:translateY(0); opacity:1;}
}


/* Floating shapes */
.conviction-section::before,
.conviction-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  opacity: 0.06;
  z-index: 0;
}
.conviction-section::before {
  width: 120px;
  height: 120px;
  background: #ff8a3a;
  top: 5%;
  left: 5%;
  animation: floatShape 6s ease-in-out infinite alternate;
}
.conviction-section::after {
  width: 80px;
  height: 80px;
  background: #ffb800;
  bottom: 5%;
  right: 5%;
  animation: floatShape 8s ease-in-out infinite alternate-reverse;
}

@keyframes floatShape {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-15px) rotate(15deg); }
}

/* Responsive */
@media(max-width:768px){
  .conv-title { font-size: 2.2rem; }
  .conv-desc { font-size: 1rem; }
  .conv-subtitle { font-size: 1rem; }
}
.about-abh-video-section {
  width: 100%;
   /* full viewport height */
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
  background: #fff;
  overflow: hidden;
  position: relative;
}

.video-wrapper {
  width: 80%;
  max-width: 800px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
  animation: fadeInZoom 1.5s ease forwards;
}

.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* Subtle fade + zoom animation */
@keyframes fadeInZoom {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(30px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Responsive */
@media(max-width:768px){
  .video-wrapper {
    width: 95%;
  }
}



  /* Root tokens (minimal, tweak to brand) */
  :root{
    --bg-deep: #030137;
    --bg-deeps: #ff8a3a;  /* deep orange background for section */
    --muted: #98a0a7;
    --glass: rgba(255,255,255,0.06);
    --white: #ffffff;
    --card-radius: 14px;
    --tab-gap: 12px;
  }

  /* Section shell */
  .solatrix-shell {
    background: linear-gradient(180deg, var(--bg-deep) 0%, #ff8a3a 100%);
    padding: 5vh 2vw;
    color: var(--white);
    font-family: 'Gotham Light', sans-serif;
  }
  .solatrixs-shell {
    background: linear-gradient(180deg, var(--bg-deeps) 0%, #030137 70%);
    padding: 5vh 2vw;
    color: var(--white);
   
  }
  .solatrix-wrap { max-width: 1280px; margin: 0 auto; }

  /* Header */
  .solatrix-helm { text-align: left; margin-bottom: 2.25rem; max-width: 980px; padding-top: 70px; }
  .solatrix-head {
    font-size: clamp(1.5rem, 2.8vw, 2.4rem);
    margin: 0 0 0.35rem 0;
    letter-spacing: 0.3px;
    line-height: 1.02;
    display: flex;
    gap: 1ch;
    align-items: baseline;
  }
  .solatrix-accent {
    display: inline-block;
    font-weight: 600;
    color: rgba(255,216,168,0.98);
    margin-left: 6px;
    font-size: 0.9em;
  }
  .solatrix-lead {
    margin: 0;
    color: rgba(255,255,255,0.9);
    max-width: 720px;
    font-size: 1.02rem;
    line-height: 1.5;
    padding-top: 30px;
  }

  /* Body: tabs + viewport (row layout) */
  .solatrix-body { display: flex; gap: 1.5rem; align-items: stretch; margin-top: 1.25rem; }

  /* Tabs column (left) — vertical but we style as pill row look */
  .nebula-tabs {
    display: flex;
    flex-direction: column;
    gap: var(--tab-gap);
    min-width: 220px;
    align-self: stretch;
  }

  .nebula-tab {
    position: relative;
    background: transparent;
    color: rgba(255,255,255,0.92);
    border: none;
    text-align: left;
    padding: 1rem 1.15rem;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.98rem;
    transition: transform .36s cubic-bezier(.2,.9,.28,1), box-shadow .36s ease;
    box-shadow: none;
    overflow: visible;
  }

  .nebula-tab:focus { outline: 2px solid rgba(255,255,255,0.12); outline-offset: 3px; }

  /* active tab: flowing gradient + glow + inner animation */
  .nebula-tab--active {
    color: #ffb800;
    background: linear-gradient(90deg, rgba(255,214,168,0.14), rgba(255,255,255,0.06));
    box-shadow: 0 8px 30px rgba(0,0,0,0.24), 0 2px 0 rgba(255,214,168,0.04) inset;
    transform: translateX(6px);
  }

  /* Animated underline / flow bar inside tab */
  .nebula-tab-underline {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255,214,168,0.98), rgba(255,138,58,0.9));
    box-shadow: 0 6px 20px rgba(255,138,58,0.12);
    opacity: 0;
    transition: opacity .28s ease, transform .36s cubic-bezier(.2,.9,.28,1);
  }

  .nebula-tab--active .nebula-tab-underline { opacity: 1; transform: translateY(-50%) scaleY(1.02); }

  /* Viewport (right side) — full width panels in a horizontal track */
  .plasma-viewport {
    flex: 1;
    min-height: 360px;
    background: rgba(255,255,255,0.02);
    border-radius: 14px;
    padding: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: stretch;
  }

  .plasma-track {
    display: flex;
    gap: 1.5rem;
    width: 300%; /* 3 panels */
    transition: transform .68s cubic-bezier(.2,.9,.28,1);
    will-change: transform;
  }

  .sol-panel {
    width: calc(100% / 1); /* we'll rely on track width for sizing; ensure 100% of viewport area */
    flex: 0 0 100%;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
    padding: 0;
  }

  /* Each panel has an image at the top and copy to the right (row layout inside) */
  .sol-media {
    flex: 0 0 46%;
    min-width: 46%;
    position: relative;
    overflow: hidden;
  }
  .sol-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.03);
    transition: transform .9s cubic-bezier(.2,.9,.28,1), filter .6s ease;
    filter: saturate(0.95) contrast(1.02);
  }

  .sol-copy {
    flex: 1;
    padding: 2.1rem 2.2rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100vw;
  }

  .sol-title {
    margin: 0 0 .6rem 0;
    font-size: clamp(1.05rem, 1.9vw, 1.5rem);
    font-weight: 700;
    color: rgba(255,255,255,0.98);
    display: block;
  }

  .sol-text {
    margin: 0 0 0.75rem 0;
    color: rgba(255,255,255,0.92);
    line-height: 1.6;
    font-size: 0.985rem;
  }

  /* Distinct panel tinting (unique background color per panel, subtle) */
  .sol-panel--amber .sol-copy { background: linear-gradient(180deg, rgba(255,214,168,0.06), rgba(255,214,168,0.02)); }
  .sol-panel--cerulean .sol-copy { background: linear-gradient(180deg, rgba(168,222,255,0.06), rgba(168,222,255,0.02)); }
  .sol-panel--violet  .sol-copy { background: linear-gradient(180deg, rgba(218,188,255,0.06), rgba(218,188,255,0.02)); }

  /* Active panel micro-animation */
  .sol-panel img { transform: scale(1.03); opacity: 0.95; }
  .sol-panel.in-view img { transform: scale(1); opacity: 1; filter: none; }
  .sol-panel .sol-copy { transform: translateY(6px); opacity: 0.96; transition: transform .6s cubic-bezier(.2,.9,.28,1), opacity .6s ease; }
  .sol-panel.in-view .sol-copy { transform: translateY(0); opacity: 1; }

  /* Responsive: stack tabs on top on small screens but keep panels full width */
  @media (max-width: 880px) {
    .solatrix-body { flex-direction: column; gap: 1rem; }
    .nebula-tabs { flex-direction: row; overflow-x: auto; min-width: 100%; padding-bottom: 6px; }
    .nebula-tab { flex: 0 0 auto; white-space: nowrap; }
    .plasma-viewport { min-height: 520px; }
    .sol-media { min-width: 100%; flex-basis: 100%; height: 46%; }
    .sol-copy { padding: 1.25rem; }
    .plasma-track { transition: transform .68s cubic-bezier(.2,.9,.28,1); }
    .sol-panel { flex-direction: column; gap: .5rem; }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .plasma-track, .nebula-tab, .sol-media img, .sol-copy { transition: none !important; animation: none !important; transform: none !important; }
  }
  /* ===== Mobile-friendly overrides (replace/append after existing responsive rules) ===== */
@media (max-width: 880px) {

  /* Let the panel expand vertically on small screens so image + copy are visible */
  .plasma-viewport {
    overflow: visible;      /* allow page scrolling to show content below images */
    min-height: auto;       /* no forced tall viewport that hides copy */
    padding: 0.5rem 0.5rem 1rem;
  }
    .nebula-tab-underline {
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255,214,168,0.98), rgba(255,138,58,0.9));
    box-shadow: 0 6px 20px rgba(255,138,58,0.12);
    opacity: 0;
    transition: opacity .28s ease, transform .36s cubic-bezier(.2,.9,.28,1);
  }
  .card-icon img{
    justify-self: center;
    width: 70px;
    height: 70px;
    
  }
  .card-icon{
    margin-left: 35%;
    margin-right: 35%;
    
  }

  /* Keep horizontal track behavior but ensure panels are full-width and stack content */
  .plasma-track {
    gap: 1rem;
    width: calc(100% * 3);  /* keep track width based on number of panels (adjust if you change panel count) */
    transition: transform .68s cubic-bezier(.2,.9,.28,1);
  }

  /* Make each panel a vertical card with auto height */
  .sol-panel {
    flex-direction: column;
    gap: .75rem;
    min-height: auto;
    align-items: stretch;
    padding: 0;
    box-sizing: border-box;
  }

  /* Make the image responsive but not taller than the viewport */
  .sol-media {
    min-width: 100%;
    flex-basis: 100%;
    height: auto;           /* let image size itself */
  }
  .sol-media img {
    width: 100%;
    height: auto;
    max-height: 40vh;      /* prevent image from swallowing entire screen */
    object-fit: cover;
    display: block;
    border-radius: 8px;
  }

  /* Copy area visible below image (no clipping) */
  .sol-copy {
    padding: 1.25rem;
    background: transparent; /* keep subtle look; if you had panel tinting, it will still show */
    box-sizing: border-box;
  }

  /* Ensure viewport height is generous enough to show image + text on short devices */
  .plasma-viewport { min-height: auto; }

  /* Tabs become a horizontally scrollable row (if they overflow) */
  .nebula-tabs {
    flex-direction: row;
    overflow-x: auto;
    gap: 0.75rem;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .nebula-tab { flex: 0 0 auto; white-space: nowrap; }

  /* Slight spacing and font-size reductions for small phones */
  @media (max-width: 480px) {
    .solatrix-shell { padding: 4vh 4vw; }
    .solatrix-head { font-size: 1.4rem; }
    .solatrix-lead { font-size: 0.95rem; line-height: 1.45; }
    .sol-copy { padding: 1rem; display: block; }
    .sol-title { font-size: 1.15rem; }
    .sol-text { font-size: .93rem; }
  }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .plasma-track, .nebula-tab, .sol-media img, .sol-copy {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  
  }
}
@media (max-width: 880px) {
  .sol-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* we’ll anchor the text ourselves */
    width: 100vw;                  /* full viewport width */
    min-height: 900px;             /* adjust to suit your artwork */
    overflow: hidden;
    border-radius: 12px;
  }
  .solatrix-shell {
  overflow-x: hidden; /* prevent horizontal scrolling */
}

 

  .sol-visual {
    width: 100%;
    height: auto;
    max-height: 55vh;
    object-fit: cover;
    display: block;
  }
  .plasma-track {
    width: 100%;    /* ✅ only one panel visible at a time */
  }
 

  .sol-copy {
    position: absolute;
    left: 0;
    bottom: -20%;                  /* distance from bottom of panel */
    width: 100%;
    height: 90%;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.35); /* readable on any image */
    box-sizing: border-box;
    border-radius: 0 0 12px 12px;
  }

  .sol-text {
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;
    margin: 0;
  }
}
:root {
  --deep-bg: #0a0a23;
  --text-main: #000;
  --text-muted: #000;
  --radius: 14px;
}

.orbit-impact {
 
  padding: 6vh 3vw;
 font-family: 'Gotham Light', sans-serif;
  color: var(--text-main);
  overflow-x: hidden;
  margin-top: 100px;
  overflow-y: hidden;
}

.orbit-wrap { max-width: 90%; margin: 0 auto; }

.orbit-head { max-width: 90%; margin-bottom: 3rem; text-align: center; }
.orbit-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.orbit-title span {
  background: linear-gradient(90deg, #ffb86c, #ff8a3a);
  -webkit-background-clip: text;
  color: transparent;
}
.orbit-lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.nova-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

/* Cards */
.nova-card {
 
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .5s cubic-bezier(.2,.8,.25,1),
              box-shadow .5s ease;
}
.nova-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.nova-figure {
  height: 220px;
  overflow: hidden;
}
.nova-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 1s ease;
}
.nova-card:hover .nova-figure img { transform: scale(1); }

.nova-copy {
  padding: 1.6rem 1.4rem 2rem;
}
.nova-heading {
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
  font-weight: 600;
}
.nova-text {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 0.6rem;
  color: var(--text-muted);
}
.nova-desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #000;
}
.bus4{
  background-color: #00a8842c;
}

/* Subtle panel color tints */


/* Fade-up on scroll */


/* Mobile */
@media (max-width: 680px){
  .orbit-lead { font-size: 0.95rem; }
  .nova-figure { height: 180px; }
}
/* base state – hidden */




/* --- unique motions --- */
.bus1.is-visible { animation: riseFade 1s ease forwards; }
.bus2.is-visible { animation: slideWave 1.1s cubic-bezier(.25,.8,.25,1) forwards; }
.bus3.is-visible { animation: popSpin 1.1s ease-out forwards; }
.bus4.is-visible { animation: tiltGlow 1.2s ease-out forwards; }

@keyframes riseFade {
  0% {opacity:0; transform:translateY(60px);}
  60% {opacity:0.7; transform:translateY(-6px);}
  100%{opacity:1; transform:translateY(0);}s
}

@keyframes slideWave {
  0% {opacity:0; transform:translateX(-80px) rotate(-3deg);}
  70%{opacity:.9; transform:translateX(6px) rotate(1deg);}
  100%{opacity:1; transform:translateX(0) rotate(0);}
}

@keyframes popSpin {
  0% {opacity:0; transform:scale(.8) rotate(-6deg);}
  60%{opacity:.9; transform:scale(1.05) rotate(3deg);}
  100%{opacity:1; transform:scale(1) rotate(0);}
}

@keyframes tiltGlow {
  0% {opacity:0; transform:translateY(40px) rotateY(-10deg);}
  70%{opacity:.9; transform:translateY(-4px) rotateY(2deg);}
  100%{opacity:1; transform:translateY(0) rotateY(0);}
}
/* Container */
.visionary-section {
  background: #030137;
  padding: 4rem 2rem;
}

.visionary-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Video side */
.visionary-media {
  flex: 1 1 50%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.visionary-video {
  display: block;
  width: 100%;
  height: 100%;
  
}

/* Text side */
.visionary-copy {
  flex: 1 1 50%;
  color: #fff5f0;
}

.visionary-heading {
  font-size: 2.4rem;
  font-weight: 700;
  margin: 0 0 1rem;
  line-height: 1.2;
}

.visionary-sub {
  font-size: 1.3rem;
 
  color: #ff8a3a;
  margin: 0 0 1.5rem;
}

.visionary-lead {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #f0f0f0;
}

.visionary-cta {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 2rem 0 0.5rem;
}

.visionary-body {
  font-size: 1rem;
  line-height: 1.6;
  color: #f0f0f0;
}

.visionary-divider {
  display: block;
  width: 70px;
  height: 3px;
  margin-top: 2rem;
  background: linear-gradient(90deg, #ff8a3a, #ffbd5a);
  border-radius: 3px;
}

/* Responsive */
@media (max-width: 900px) {
  .visionary-shell {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }

  .visionary-copy {
    max-width: 600px;
    text-align: left;
  }
}
.stellar-map {
  
  padding: 5rem 2rem;
}

.stellar-shell {
  max-width: 1100px;
  margin: 0 auto;
}

.stellar-head {
  text-align: center;
  margin-bottom: 4rem;
}

.stellar-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #ff8a3a;
  margin-bottom: 1rem;
}

.stellar-lead {
  font-size: 1.1rem;
  color: #555;
  max-width: 700px;
  margin: 0 auto;
}

/* Timeline track */
.stellar-track {
  position: relative;
  padding-left: 2rem;
  padding-right: 2rem;
}

.stellar-track::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, #ff8a3a, #ffbd5a);
  transform: translateX(-50%);
}

/* Nodes */
.stellar-node {
  position: relative;
  width: 50%;
  padding: 2rem 3rem;
  box-sizing: border-box;
}

.stellar-node.is-left {
  left: 0;
  text-align: right;
}

.stellar-node.is-right {
  left: 50%;
}

.stellar-badge {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  font-size: 1.5rem;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

/* Content */
.stellar-content {
  
  padding: 1.8rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.stellar-phase {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: #111;
}

.stellar-phase span {
  font-size: 1rem;
  color: #777;
}

.stellar-points {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stellar-points li {
  font-size: 1rem;
  color: #444;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 800px) {
  .stellar-track::before {
    left: 20px;
  }

  .stellar-node,
  .stellar-node.is-left,
  .stellar-node.is-right {
  
    padding-left: 4rem;
    text-align: left;
    left: -50px;
    margin-bottom: 3rem;
    font-size: 12px;
    
  }
   .stellar-content {
   width: 200px;
   
  }
  .stellar-node{
   
  }
  .stellar-points li{
    font-size: 12px;
  }
   .stellar-phase{
    font-size: 13px;
    font-weight: 800;
  }
  .faq-question span{
    font-size: 13px;
  }
  .faq-answer p{
    font-size: 12px;
  }
  .alliance-hub{
    margin-left: 20px;
    margin-right: 20px;
  }
  .connect-hub{
    margin-left: 20px;
    margin-right: 20px;
  }
  .orbit-form-container{
    margin-top: -170px;
  }

  .stellar-badge {
    left: 20px;
    transform: translateY(-50%);
  }
 
}
/* ---------- Stellar timeline reveal (left/right slide + inner lift + stagger) ---------- */
.stellar-node {
  --stagger: 0s;             /* set by JS per-node for subtle cascading */
  opacity: 0;
  transform: translateX(var(--startX, 0));
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(.22,1,.36,1), opacity 0.85s ease;
  transition-delay: var(--stagger);
}

/* start offsets */
.stellar-node.is-left  { --startX: -90px; }
.stellar-node.is-right { --startX:  90px; }

/* revealed state */
.stellar-node.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* inner content lift for polish */
.stellar-content {
  transform: translateY(10px);
  opacity: 0.95;
  transition: transform .55s cubic-bezier(.23,.9,.28,1), opacity .55s ease;
  transition-delay: calc(var(--stagger) + 0.03s);
}
.stellar-node.revealed .stellar-content {
  transform: translateY(0);
  opacity: 1;
}

/* slight badge pop */
.stellar-badge {
  transform: scale(.95);
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
  transition-delay: calc(var(--stagger) + 0.04s);
}
.stellar-node.revealed .stellar-badge {
  transform: scale(1);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

/* optional micro-delays by node order (fallback) */
.stellar-node[data-order="0"]{ --stagger: 0.04s; }
.stellar-node[data-order="1"]{ --stagger: 0.12s; }
.stellar-node[data-order="2"]{ --stagger: 0.18s; }
.stellar-node[data-order="3"]{ --stagger: 0.24s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .stellar-node,
  .stellar-content,
  .stellar-badge {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
/* ====== Minimalist, businessy, creative look ====== */
.alliance-hub {
  padding: 6vh 3vw;

  color: #111;
  font-family: 'Gotham Light', sans-serif;
}

.orbit-header {
  text-align: center;
  margin-bottom: 3rem;
}

.orbit-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ff8a3a;
}

.orbit-subtitle {
  font-size: 1rem;
  color: #555;
  max-width: 720px;
  margin: 0.5rem auto 0;
}

/* Grid layout */
.stellar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

/* Card design */
.stellar-card {
  
  border-radius: 14px;
  padding: 2rem 1.5rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(.22,1,.36,1), opacity 0.7s ease;
}

.stellar-card.reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Icon style */
.stellar-icon {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  color: #ff8a3a;
}

/* Heading & description */
.stellar-heading {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.stellar-desc {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.55;
}

/* Add micro hover lift for elegance */
.stellar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

/* Optional responsive tweak */
@media (max-width: 600px) {
  .stellar-card {
    padding: 1.5rem 1rem;
  }
  .stellar-icon {
    font-size: 1.9rem;
  }
}
/* ====== Minimalist Business Design ====== */
.connect-hub {
  padding: 6vh 3vw;
  display: flex;
  justify-content: center;
  
  font-family: 'Gotham Light', sans-serif;
  color: #111;
}

.orbit-shell {
  display: flex;
  gap: 4rem;
  flex-wrap: wrap;
  max-width: 1200px;
  width: 100%;
  align-items: center;
}

/* Image Styling */
.orbit-image-wrapper {
  flex: 1 1 400px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(.22,1,.36,1), opacity 0.8s ease;
}
.orbit-image-wrapper.reveal {
  transform: translateY(0);
  opacity: 1;
}
.orbit-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Form Styling */
.orbit-form-container {
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(.22,1,.36,1), opacity 0.8s ease;
}
.orbit-form-container.reveal {
  transform: translateY(0);
  opacity: 1;
}

.orbit-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: #ff8a3a;
}

.orbit-subtitle {
  font-size: 1rem;
  color: #555;
  margin-bottom: 1.5rem;
}

/* Form inputs */
.orbit-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.orbit-input, .orbit-textarea {
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 0.95rem;
 font-family: 'Gotham Light', sans-serif;
  transition: all 0.3s ease;
}
.orbit-input:focus, .orbit-textarea:focus {
  border-color: #ff8a3a;
  box-shadow: 0 4px 12px rgba(255,138,58,0.15);
  outline: none;
}

/* Button */
.orbit-btn {
  padding: 0.85rem 1.5rem;
  border: none;
  border-radius: 8px;
  background: #ff8a3a;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.orbit-btn:hover {
  background: #ffb155;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 880px) {
  .orbit-shell {
    flex-direction: column;
    gap: 2rem;
  }
}
 @font-face {
    font-family: 'Gotham Light';
    src: url('/GOTHAM-LIGHT.TTF') format('woff');
    font-weight: normal;
    font-style: normal;
}
 @font-face {
    font-family: 'Gotham Bold';
    src: url('/GOTHAM-BOLD.TTF') format('woff');
    font-weight: bold;
    font-style: normal;
}
/* Keep the whole header fixed */
.abc-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: transparent;
  transition: background-color 0.3s ease;
}

/* Center the nav content */
.abc-header .abc-nav {
 
  margin: 0 auto;         /* centers horizontally */
  display: flex;
  align-items: center;
  justify-content: space-between; /* keeps logo left, links right */
  padding: 0 20px;        /* optional breathing room */
}

/* White background after scrolling */
.abc-nav.scrolled {
  background-color: #030137;
  color: #030137;
}

.abc-team {
  padding: 100px 20px;
 
  text-align: left;
}

.abc-team-title {
  font-size: 2.5rem;
  margin-bottom: 60px;
  font-weight: 600;
  color: #222;
}

.abc-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.abc-team-card {
  
  padding: 30px 25px 40px;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.abc-team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.1);
}

.abc-team-photo img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
  border: 3px solid #eee;
}

.abc-team-name {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 10px 0 5px;
  color: #030137;
}

.abc-team-role {
  font-size: 1rem;
  color: #888;
  margin-bottom: 15px;
}

.abc-team-bio {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
}
.abc-team-photo img{
  justify-self: left;
}
/* Section wrapper */
.about-section {
  padding: 80px 10%;
  background: #f9f9f9;
  color: #333;
}

/* Layout */
.about-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  flex-wrap: wrap;
  text-align: justify;
}

/* Left: Text */
.about-text {
  flex: 1;
  min-width: 320px;
}

.about-title {
  font-size: 2.5rem;
  color: #030137;
  margin-bottom: 20px;
}

.about-title span {
  color: #ff8a3a;
}

.about-intro {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 20px;
  color: #444;
}

.about-subtitle {
  font-size: 1.3rem;
  margin: 20px 0 10px;
  color: #030137;
}

.about-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
}

.about-list li {
  margin-bottom: 12px;
  padding-left: 25px;
  position: relative;
  line-height: 1.6;
}

.about-list li::before {
  content: "✔";
  color: #ff8a3a;
  font-weight: bold;
  position: absolute;
  left: 0;
}

.about-highlight {
  font-size: 1.1rem;
  margin-top: 20px;
  color: #030137;
}

/* Right: Image */
.about-image {
  flex: 1;
  min-width: 320px;
  text-align: center;
}

.about-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Responsive */
@media (max-width: 992px) {
  .about-container {
    flex-direction: column;
    text-align: center;
  }

  .about-text {
    text-align: center;
  }

  .about-list li {
    text-align: left;
    display: inline-block;
    width: 100%;
  }
}
.partnerships {
  padding: 80px 20px;
  background: #fff;
}

.partnerships .orbit-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px;
}

.partnerships .orbit-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #ff8a3a;
}

.partnerships .orbit-subtitle {
  font-size: 1.1rem;
  color: #555;
  margin-top: 10px;
}

/* Grid layout */
.stellar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
}

/* Card styling */
.stellar-card {
 
  border-radius: 14px;
  padding: 30px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.stellar-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.stellar-icon {
  font-size: 2rem;
  margin-bottom: 15px;
}

.stellar-heading {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #222;
}

.stellar-desc {
  font-size: 1rem;
  color: #555;
}
/* Base reset */
.nebula-contact {
  padding: 80px 20px;
  background: #fdfdfd;
  color: #222;
  width: 100%;
  overflow-x: hidden;
  
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

/* Title & tagline */
.contact-intro {
  grid-column: span 2;
  text-align: center;
}

.contact-title {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}

.contact-tagline {
  font-size: 1.2rem;
  color: #555;
  line-height: 1.6;
}

/* Info block */
.contact-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-info li {
  font-size: 1rem;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #333;
}

.contact-info a {
  color: #0077ff;
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

/* Actions */
.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}

.btn-strange {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.3px;
  text-align: center;
  transition: all 0.3s ease;
  background: #030137;
  color: #fff;
  border: 2px solid #030137;
}

.btn-strange:hover {
  background: transparent;
  color: #030137;
  text-decoration: none;
}

.btn-strange.ghost {
  background: transparent;
  border-color: #ffb86b;
  color: #ffb86b;
}

.btn-strange.ghost:hover {
  background: #ff8a3a;
  color: #fff;
}

/* Responsive */
@media (max-width: 800px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-intro {
    grid-column: span 1;
  }

  .contact-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}