.hero-slider{
  position:relative;
  height:100vh;
  overflow:hidden;
}

.hero-slide{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:2rem;
  text-align:center;

  background-size:cover;
  background-position:center;

  opacity:0;
  visibility:hidden;

  transition:
    opacity .8s ease,
    visibility .8s ease;

  &.active{
    opacity:1;
    visibility:visible;
  }

  /* overlay */
  &::before{
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
      to bottom,
      rgba(5, 8, 22, 0.55),
      rgba(5, 8, 22, 0.75)
    );

    z-index:1;
  }

  /* background images */
  &.slide-1{
    background-image:url("../images/ai-bg2.jpg");
  }

  &.slide-2{
    background-image:url("../images/ai-bg1.jpg");
  }

  &.slide-3{
    background-image:url("../images/ai-bg3.jpg");
  }
}

/* =======================
   CONTENT
======================= */

.hero-content{
  position:relative;
  z-index:2;

  max-width:900px;

  color:#f8fbff;
}

.hero-badge{
  display:inline-flex;

  padding:.8rem 1.2rem;

  border-radius:999px;

  margin-bottom:2rem;

  background:rgba(72, 118, 255, 0.10);

  border:1px solid rgba(125, 166, 255, 0.18);

  backdrop-filter:blur(18px);

  color:#00d4ff;

  font-size:.9rem;
  font-weight:600;
}

.hero-content h1{
  font-size:clamp(3.5rem, 8vw, 7rem);

  line-height:.92;

  letter-spacing:-4px;

  margin-bottom:1.5rem;
}

.hero-content span{
  background:linear-gradient(
    135deg,
    #00d4ff,
    #5b8cff,
    #7c4dff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-subtext{
  max-width:700px;

  margin:auto auto 2.5rem;

  color:rgba(226, 236, 255, 0.78);

  font-size:1.05rem;

  line-height:1.8;
}

/* =======================
   BUTTONS
======================= */

.hero-buttons{
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}

.primary-btn,
.secondary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:1rem 1.8rem;

  border-radius:999px;

  text-decoration:none;

  font-weight:600;

  transition:0.25s ease;
}

/* PRIMARY BUTTON */
.primary-btn{
  background:linear-gradient(
    135deg,
    #5b8cff,
    #7c4dff
  );

  color:#ffffff;

  box-shadow:0 10px 35px rgba(91, 140, 255, 0.25);
}

.primary-btn:hover{
  background:linear-gradient(
    135deg,
    #6b98ff,
    #8b5cff
  );

  transform:translateY(-2px);
}

/* SECONDARY BUTTON */
.secondary-btn{
  background:rgba(72, 118, 255, 0.10);

  border:1px solid rgba(125, 166, 255, 0.18);

  backdrop-filter:blur(18px);

  color:#f8fbff;
}

.secondary-btn:hover{
  background:rgba(255,255,255,0.12);
}

/* =======================
   DOTS
======================= */

.slider-dots{
  position:absolute;

  left:50%;
  bottom:2rem;

  transform:translateX(-50%);

  display:flex;
  gap:.8rem;

  z-index:10;
}

.dot{
  width:10px;
  height:10px;

  border-radius:999px;

  background:rgba(255,255,255,0.3);

  transition:0.25s ease;
}

.dot.active{
  width:36px;
  background:#5b8cff;
}









/* =========================
   SECTION BASE
========================= */

.ai-intelligence{
  position:relative;
  padding:160px 20px;
  background:#050816;
  overflow:hidden;
  color:#fff;
}

/* =========================
   MESH BACKGROUND (MODERN SaaS STYLE)
========================= */

.mesh{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(91,140,255,0.18), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(0,212,255,0.12), transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(124,77,255,0.14), transparent 50%);
  filter: blur(40px);
  animation: floatBg 10s ease-in-out infinite alternate;
}

/* noise overlay */
.noise{
  position:absolute;
  inset:0;
  background-image:url("https://www.transparenttextures.com/patterns/noise.png");
  opacity:0.04;
}

/* glowing orbs */
.glow-orb{
  position:absolute;
  width:300px;
  height:300px;
  border-radius:50%;
  filter:blur(120px);
  opacity:0.2;
}

.orb1{ background:#00d4ff; top:10%; left:-100px; }
.orb2{ background:#7c4dff; bottom:10%; right:-120px; }

/* =========================
   CONTAINER
========================= */

.ai-container{
  position:relative;
  max-width:1200px;
  margin:auto;
  z-index:2;
}

/* =========================
   HEADER
========================= */

.ai-head{
  text-align:center;
  margin-bottom:80px;
}

.badge{
  display:inline-block;
  padding:10px 18px;
  border-radius:100px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  font-size:0.9rem;
  color:#cfe6ff;
  backdrop-filter:blur(12px);
  margin-bottom:20px;
}

.ai-head h2{
  font-size:clamp(2.5rem,5vw,5rem);
  letter-spacing:-3px;
  line-height:1;
  margin-bottom:20px;
}

.ai-head p{
  color:rgba(255,255,255,0.65);
  max-width:600px;
  margin:auto;
}

/* =========================
   CORE NODE (CENTER PIECE)
========================= */

.ai-core{
  position:relative;
  height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:90px;
}

.core-node{
  width:160px;
  height:160px;
  border-radius:50%;
  background:linear-gradient(135deg,#00d4ff,#5b8cff,#7c4dff);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:700;
  box-shadow:0 0 80px rgba(0,212,255,0.3);
  animation:pulseCore 3s infinite;
}

.core-node span{
  font-size:0.75rem;
  opacity:0.8;
}

/* connection lines */
.line{
  position:absolute;
  width:2px;
  height:120px;
  background:linear-gradient(to bottom, transparent, #00d4ff, transparent);
  opacity:0.5;
}

.l1{ top:0; left:30%; transform:rotate(-20deg); }
.l2{ top:0; right:30%; transform:rotate(20deg); }
.l3{ bottom:0; left:35%; transform:rotate(25deg); }
.l4{ bottom:0; right:35%; transform:rotate(-25deg); }

/* =========================
   NODE GRID (CLEAN MODERN)
========================= */

.ai-nodes{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.node{
  padding:28px;
  border-radius:18px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(16px);
  transition:0.3s ease;
}

.node:hover{
  transform:translateY(-8px);
  border-color:rgba(0,212,255,0.4);
}

.node i{
  font-size:1.8rem;
  margin-bottom:14px;
  background:linear-gradient(135deg,#00d4ff,#7c4dff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.node h3{
  margin-bottom:10px;
}

.node p{
  color:rgba(255,255,255,0.65);
  font-size:0.95rem;
  line-height:1.6;
}

/* =========================
   ANIMATION
========================= */

@keyframes pulseCore{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
  100%{ transform:scale(1); }
}

@keyframes floatBg{
  0%{ transform:translateY(0px); }
  100%{ transform:translateY(-20px); }
}

/* =========================
   MOBILE (SWIPE)
========================= */

@media (max-width:600px){

  .ai-nodes{
    display:flex;
    overflow-x:auto;
    gap:16px;
    scroll-snap-type:x mandatory;
    padding:10px 20px;
  }

  .node{
    min-width:80%;
    scroll-snap-align:start;
  }

  .ai-core{
    height:200px;
  }

  .core-node{
    width:130px;
    height:130px;
  }
}







/* =========================
   AI FUTURE HERO
========================= */

.ai-future{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:#050816;
  padding:120px 8%;
  color:#fff;
}

/* =========================
   VIDEO
========================= */

.ai-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.28;
}

/* =========================
   OVERLAY
========================= */

.ai-overlay{
  position:absolute;
  inset:0;

  background:
    radial-gradient(circle at top left,
    rgba(91,140,255,0.18),
    transparent 30%),

    radial-gradient(circle at bottom right,
    rgba(0,212,255,0.12),
    transparent 35%),

    linear-gradient(
      90deg,
      rgba(5,8,22,0.96) 15%,
      rgba(5,8,22,0.72) 55%,
      rgba(5,8,22,0.92) 100%
    );
}

/* =========================
   GRID EFFECT
========================= */

.grid-lines{
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);

  background-size:80px 80px;

  mask-image:linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);

  opacity:0.25;
}

/* =========================
   CONTENT
========================= */

.ai-content{
  position:relative;
  z-index:5;
  max-width:650px;
  animation:fadeUp 1s ease;
}

/* =========================
   MINI BADGE
========================= */

.mini-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:10px 18px;
  border-radius:100px;

  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);

  backdrop-filter:blur(10px);

  margin-bottom:28px;

  font-size:0.92rem;
  color:#dce8ff;
}

.mini-badge span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#00d4ff;
  box-shadow:0 0 12px #00d4ff;
}

/* =========================
   TITLE
========================= */

.ai-content h1{
  font-size:clamp(3rem, 7vw, 6.5rem);
  line-height:0.95;
  letter-spacing:-4px;
  margin-bottom:24px;

  background:linear-gradient(
    135deg,
    #ffffff,
    #9bc7ff,
    #7c4dff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* =========================
   PARAGRAPH
========================= */

.ai-content p{
  font-size:1.1rem;
  line-height:1.8;
  color:rgba(226,236,255,0.76);
  max-width:560px;
  margin-bottom:40px;
}

/* =========================
   BUTTONS
========================= */

.hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{
  padding:16px 28px;
  border-radius:14px;
  text-decoration:none;
  font-weight:600;
  transition:0.35s ease;
}

.btn-primary{
  background:linear-gradient(
    135deg,
    #00d4ff,
    #5b8cff
  );

  color:#fff;

  box-shadow:0 10px 40px rgba(0,212,255,0.35);
}

.btn-primary:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 50px rgba(0,212,255,0.5);
}

.btn-secondary{
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:#fff;
  backdrop-filter:blur(10px);
}

.btn-secondary:hover{
  background:rgba(255,255,255,0.08);
}

/* =========================
   STATS
========================= */

.hero-stats{
  display:flex;
  gap:50px;
  margin-top:60px;
  flex-wrap:wrap;
}

.stat h3{
  font-size:2rem;
  margin-bottom:6px;

  background:linear-gradient(135deg,#00d4ff,#7c4dff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.stat span{
  color:rgba(226,236,255,0.65);
  font-size:0.92rem;
}

/* =========================
   FLOATING TAGS
========================= */

.float-tag{
  position:absolute;
  z-index:3;

  padding:12px 18px;
  border-radius:14px;

  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);

  backdrop-filter:blur(12px);

  color:#dfe9ff;
  font-size:0.9rem;

  animation:float 6s ease-in-out infinite;
}

/* positions */
.t1{
  top:18%;
  right:14%;
}

.t2{
  top:35%;
  right:8%;
  animation-delay:1s;
}

.t3{
  bottom:28%;
  right:18%;
  animation-delay:2s;
}

.t4{
  top:60%;
  right:8%;
  animation-delay:3s;
}

.t5{
  top:12%;
  right:30%;
  animation-delay:4s;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes float{
  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-16px);
  }

  100%{
    transform:translateY(0px);
  }
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(40px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:900px){

  .ai-future{
    justify-content:center;
    text-align:center;
    padding:120px 24px;
  }

  .ai-content{
    max-width:100%;
  }

  .hero-actions{
    justify-content:center;
  }

  .hero-stats{
    justify-content:center;
    gap:30px;
  }

  .float-tag{
    display:none;
  }

  .ai-content h1{
    letter-spacing:-2px;
  }
}


/* =========================
   TRUST STRIP
========================= */

.trust-strip{
  position:relative;
  padding:120px 20px 80px;
  background:#050816;
  overflow:hidden;
  color:#fff;
}

/* =========================
   BG GLOW
========================= */

.trust-bg{
  position:absolute;
  inset:0;

  background:
    radial-gradient(circle at 20% 20%,
    rgba(91,140,255,0.12),
    transparent 30%),

    radial-gradient(circle at 80% 40%,
    rgba(0,212,255,0.08),
    transparent 35%),

    radial-gradient(circle at 50% 100%,
    rgba(124,77,255,0.08),
    transparent 40%);
}

/* =========================
   WRAP
========================= */

.trust-wrap{
  position:relative;
  z-index:2;

  max-width:1250px;
  margin:auto;
}

/* =========================
   INTRO
========================= */

.trust-intro{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:70px;
}

.mini-label{
  display:inline-block;

  padding:10px 18px;
  border-radius:100px;

  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);

  color:#cfe3ff;
  font-size:0.9rem;
  margin-bottom:20px;

  backdrop-filter:blur(10px);
}

.trust-intro h2{
  font-size:clamp(2.5rem,5vw,5rem);
  line-height:1;
  letter-spacing:-3px;
  max-width:700px;

  background:linear-gradient(
    135deg,
    #fff,
    #b7d4ff,
    #7c4dff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* =========================
   GRID
========================= */

.metrics-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

/* =========================
   CARD
========================= */

.metric-card{
  position:relative;

  padding:34px 28px;
  border-radius:24px;

  background:rgba(255,255,255,0.03);

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

  backdrop-filter:blur(18px);

  overflow:hidden;

  transition:0.4s ease;

  min-height:240px;
}

.metric-card:hover{
  transform:translateY(-10px);
  border-color:rgba(91,140,255,0.35);

  box-shadow:0 20px 60px rgba(0,0,0,0.45);
}

/* =========================
   GLOW
========================= */

.metric-glow{
  position:absolute;
  width:180px;
  height:180px;

  border-radius:50%;

  top:-70px;
  right:-70px;

  filter:blur(60px);

  opacity:0.35;
}

.m1{ background:#5b8cff; }
.m2{ background:#00d4ff; }
.m3{ background:#7c4dff; }
.m4{ background:#00ffae; }

.metric-card:hover .metric-glow{
  transform:scale(1.2);
  opacity:0.55;
}

/* =========================
   TEXT
========================= */

.metric-card h3{
  position:relative;
  z-index:2;

  font-size:3rem;
  margin-bottom:18px;
  letter-spacing:-2px;

  background:linear-gradient(
    135deg,
    #fff,
    #9bc7ff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.metric-card p{
  position:relative;
  z-index:2;

  color:rgba(226,236,255,0.72);
  line-height:1.7;
  font-size:0.96rem;
}

/* =========================
   LINE
========================= */

.metric-line{
  position:absolute;
  left:0;
  bottom:0;

  width:100%;
  height:1px;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(91,140,255,0.7),
    transparent
  );
}

/* =========================
   TICKER
========================= */

.market-ticker{
  position:relative;
  z-index:2;

  margin-top:80px;

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

  overflow:hidden;

  background:rgba(255,255,255,0.02);
}

.ticker-track{
  display:flex;
  gap:80px;
  width:max-content;

  padding:18px 0;

  animation:tickerMove 24s linear infinite;
}

.ticker-track span{
  color:#dce8ff;
  font-size:0.95rem;
  letter-spacing:1px;
  white-space:nowrap;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes tickerMove{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:1000px){

  .metrics-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .trust-intro{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width:600px){

  .trust-strip{
    padding:90px 20px 70px;
  }

  .metrics-grid{
    display:flex;
    overflow-x:auto;

    gap:16px;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;
  }

  .metrics-grid::-webkit-scrollbar{
    display:none;
  }

  .metric-card{
    flex:0 0 82%;
    min-height:auto;

    scroll-snap-align:start;
  }

  .trust-intro h2{
    letter-spacing:-2px;
  }

  .ticker-track{
    gap:40px;
  }
}


/* =========================
   HOW AI WORKS
========================= */

.ai-process{
  position:relative;
  padding:160px 20px;
  background:#050816;
  overflow:hidden;
  color:#fff;
}

/* =========================
   BG
========================= */

.process-bg{
  position:absolute;
  inset:0;

  background:
    radial-gradient(circle at 20% 20%,
    rgba(91,140,255,0.12),
    transparent 30%),

    radial-gradient(circle at 80% 60%,
    rgba(0,212,255,0.08),
    transparent 35%);
}

/* =========================
   FLOATING ORBS
========================= */

.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  opacity:0.18;
}

.o1{
  width:300px;
  height:300px;
  background:#5b8cff;

  top:10%;
  left:-100px;
}

.o2{
  width:260px;
  height:260px;
  background:#7c4dff;

  bottom:5%;
  right:-80px;
}

/* =========================
   CONTAINER
========================= */

.process-container{
  position:relative;
  z-index:2;
  max-width:1300px;
  margin:auto;
}

/* =========================
   HEAD
========================= */

.process-head{
  text-align:center;
  max-width:850px;
  margin:auto auto 100px;
}

.process-badge{
  display:inline-block;

  padding:10px 18px;
  border-radius:100px;

  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);

  color:#dce8ff;
  font-size:0.9rem;

  margin-bottom:24px;

  backdrop-filter:blur(10px);
}

.process-head h2{
  font-size:clamp(3rem,6vw,6rem);
  line-height:0.95;
  letter-spacing:-4px;

  margin-bottom:24px;

  background:linear-gradient(
    135deg,
    #fff,
    #b6d6ff,
    #7c4dff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.process-head p{
  color:rgba(226,236,255,0.72);
  line-height:1.9;
  font-size:1.08rem;
}

/* =========================
   LAYOUT
========================= */

.process-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

/* =========================
   STEPS
========================= */

.steps{
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* =========================
   STEP CARD
========================= */

.step-card{
  position:relative;

  display:flex;
  gap:24px;

  padding:28px;
  border-radius:24px;

  background:rgba(255,255,255,0.03);

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

  backdrop-filter:blur(18px);

  transition:0.4s ease;
}

.step-card:hover{
  transform:translateX(12px);

  border-color:rgba(91,140,255,0.35);

  box-shadow:0 20px 60px rgba(0,0,0,0.4);
}

.step-card.active{
  border-color:rgba(91,140,255,0.4);
  background:rgba(91,140,255,0.06);
}

/* =========================
   NUMBER
========================= */

.step-number{
  min-width:70px;
  height:70px;

  border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:1.3rem;
  font-weight:700;

  background:linear-gradient(
    135deg,
    #00d4ff,
    #5b8cff,
    #7c4dff
  );

  color:#fff;

  box-shadow:0 10px 30px rgba(91,140,255,0.3);
}

/* =========================
   CONTENT
========================= */

.step-content h3{
  font-size:1.35rem;
  margin-bottom:14px;
}

.step-content p{
  color:rgba(226,236,255,0.72);
  line-height:1.8;
  margin-bottom:18px;
}

/* =========================
   TAGS
========================= */

.mini-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.mini-tags span{
  padding:8px 14px;
  border-radius:100px;

  background:rgba(255,255,255,0.05);

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

  font-size:0.82rem;
  color:#dce8ff;
}

/* =========================
   VISUAL
========================= */

.visual-panel{
  position:relative;
}

/* image wrapper */
.ai-image-wrap{
  position:relative;

  border-radius:30px;
  overflow:hidden;

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

  background:#0b1022;

  box-shadow:0 40px 100px rgba(0,0,0,0.45);
}

.ai-image-wrap img{
  width:100%;
  display:block;
  object-fit:cover;
}

/* =========================
   FLOATING UI
========================= */

.float-ui{
  position:absolute;

  padding:14px 18px;
  border-radius:16px;

  background:rgba(8,12,30,0.75);

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

  backdrop-filter:blur(16px);

  color:#fff;

  animation:float 5s ease-in-out infinite;
}

.f1{
  top:10%;
  left:-30px;
}

.f2{
  bottom:15%;
  right:-30px;

  animation-delay:1s;
}

.f3{
  top:50%;
  right:-20px;

  font-size:1.5rem;
  font-weight:700;

  background:linear-gradient(
    135deg,
    #00d4ff,
    #7c4dff
  );

  animation-delay:2s;
}

/* dot */
.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#00ffae;

  display:inline-block;
  margin-right:10px;

  box-shadow:0 0 12px #00ffae;
}

/* pulse */
.pulse{
  width:10px;
  height:10px;
  border-radius:50%;

  background:#00d4ff;

  display:inline-block;
  margin-right:10px;

  animation:pulse 1.5s infinite;
}

/* =========================
   BOTTOM STATS
========================= */

.visual-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;

  margin-top:24px;
}

.vs-card{
  padding:24px;
  border-radius:20px;

  background:rgba(255,255,255,0.03);

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

  text-align:center;

  backdrop-filter:blur(16px);
}

.vs-card h4{
  font-size:2rem;
  margin-bottom:10px;

  background:linear-gradient(
    135deg,
    #fff,
    #8bc5ff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.vs-card span{
  color:rgba(226,236,255,0.68);
  font-size:0.9rem;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes float{
  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-16px);
  }

  100%{
    transform:translateY(0px);
  }
}

@keyframes pulse{
  0%{
    box-shadow:0 0 0 0 rgba(0,212,255,0.5);
  }

  70%{
    box-shadow:0 0 0 14px rgba(0,212,255,0);
  }

  100%{
    box-shadow:0 0 0 0 rgba(0,212,255,0);
  }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:1000px){

  .process-layout{
    grid-template-columns:1fr;
  }

  .visual-panel{
    order:-1;
  }

  .f1{
    left:10px;
  }

  .f2{
    right:10px;
  }

  .f3{
    right:10px;
  }
}

@media (max-width:600px){

  .ai-process{
    padding:100px 20px;
  }

  .process-head h2{
    letter-spacing:-2px;
  }

  .step-card{
    flex-direction:column;
  }

  .visual-stats{
    grid-template-columns:1fr;
  }

  .float-ui{
    transform:scale(0.9);
  }
}





/* =========================
   PERFORMANCE SECTION
========================= */

.performance-section{
  position:relative;
  padding:160px 20px;
  background:#050816;
  overflow:hidden;
  color:#fff;
}

/* =========================
   BG
========================= */

.perf-bg{
  position:absolute;
  inset:0;

  background:
    radial-gradient(circle at top left,
    rgba(91,140,255,0.12),
    transparent 30%),

    radial-gradient(circle at bottom right,
    rgba(124,77,255,0.1),
    transparent 35%);
}

/* =========================
   GRID
========================= */

.perf-grid{
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

  background-size:80px 80px;

  opacity:0.35;
}

/* =========================
   ORBS
========================= */

.perf-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  opacity:0.18;
}

.p1{
  width:320px;
  height:320px;
  background:#00d4ff;

  top:10%;
  right:-100px;
}

.p2{
  width:260px;
  height:260px;
  background:#7c4dff;

  bottom:10%;
  left:-100px;
}

/* =========================
   CONTAINER
========================= */

.performance-container{
  position:relative;
  z-index:2;

  max-width:1300px;
  margin:auto;
}

/* =========================
   HEAD
========================= */

.performance-head{
  text-align:center;
  max-width:850px;
  margin:auto auto 100px;
}

.perf-badge{
  display:inline-block;

  padding:10px 18px;
  border-radius:100px;

  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);

  color:#dce8ff;
  font-size:0.9rem;

  margin-bottom:24px;

  backdrop-filter:blur(10px);
}

.performance-head h2{
  font-size:clamp(3rem,6vw,6rem);
  line-height:0.95;
  letter-spacing:-4px;

  margin-bottom:24px;

  background:linear-gradient(
    135deg,
    #fff,
    #9bc7ff,
    #7c4dff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.performance-head p{
  color:rgba(226,236,255,0.72);
  line-height:1.9;
  font-size:1.08rem;
}

/* =========================
   GRID
========================= */

.performance-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:24px;

  margin-bottom:120px;
}

/* =========================
   BIG CARD
========================= */

.big-performance-card{
  position:relative;

  padding:40px;
  border-radius:30px;

  background:rgba(255,255,255,0.03);

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

  overflow:hidden;

  backdrop-filter:blur(20px);

  min-height:500px;
}

/* live */
.live-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:10px 16px;
  border-radius:100px;

  background:rgba(0,255,174,0.08);

  border:1px solid rgba(0,255,174,0.18);

  color:#c9ffe9;
  font-size:0.85rem;
}

.live-pill span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#00ffae;

  box-shadow:0 0 10px #00ffae;

  animation:pulse 1.5s infinite;
}

.big-performance-card h3{
  font-size:clamp(4rem,7vw,7rem);
  margin:30px 0 20px;
  line-height:1;

  background:linear-gradient(
    135deg,
    #fff,
    #8bc5ff,
    #7c4dff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.big-performance-card p{
  color:rgba(226,236,255,0.72);
  max-width:420px;
  line-height:1.8;
}

/* =========================
   CHART
========================= */

.chart{
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  height:220px;
}

.chart-line{
  position:absolute;
  inset:0;

  background:
    linear-gradient(to top,
    rgba(0,212,255,0.18),
    transparent);

  clip-path:polygon(
    0% 100%,
    0% 70%,
    15% 60%,
    30% 68%,
    45% 40%,
    60% 48%,
    75% 20%,
    100% 5%,
    100% 100%
  );
}

.chart-bars{
  position:absolute;
  inset:0;

  display:flex;
  align-items:flex-end;
  justify-content:space-around;

  padding:0 30px 30px;
}

.chart-bars span{
  width:50px;

  border-radius:14px 14px 0 0;

  background:linear-gradient(
    to top,
    #00d4ff,
    #7c4dff
  );

  box-shadow:0 0 25px rgba(0,212,255,0.25);

  animation:bars 4s ease-in-out infinite alternate;
}

/* =========================
   SMALL STATS
========================= */

.small-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.stat-box{
  padding:28px;
  border-radius:24px;

  background:rgba(255,255,255,0.03);

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

  backdrop-filter:blur(16px);

  transition:0.35s ease;
}

.stat-box:hover{
  transform:translateY(-8px);

  border-color:rgba(91,140,255,0.3);
}

.stat-icon{
  width:60px;
  height:60px;

  border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:24px;

  background:linear-gradient(
    135deg,
    #00d4ff,
    #5b8cff,
    #7c4dff
  );

  color:#fff;
  font-size:1.2rem;
}

.stat-box h4{
  font-size:2rem;
  margin-bottom:10px;
}

.stat-box p{
  color:rgba(226,236,255,0.68);
  line-height:1.7;
}

/* =========================
   TIMELINE
========================= */

.timeline-section{
  margin-bottom:120px;
}

.timeline-head{
  text-align:center;
  margin-bottom:70px;
}

.timeline-head span{
  color:#8bc5ff;
  font-size:0.95rem;
}

.timeline-head h3{
  font-size:clamp(2.5rem,5vw,4rem);
  margin-top:18px;
  letter-spacing:-2px;
}

.timeline{
  position:relative;

  max-width:1100px;
  margin:auto;
}

.timeline-line{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;

  width:2px;

  background:linear-gradient(
    to bottom,
    transparent,
    #5b8cff,
    #7c4dff,
    transparent
  );
}

/* item */
.timeline-item{
  position:relative;

  display:flex;
  justify-content:flex-start;

  margin-bottom:60px;
}

.timeline-item:nth-child(even){
  justify-content:flex-end;
}

.timeline-dot{
  position:absolute;

  left:50%;
  top:28px;

  transform:translateX(-50%);

  width:18px;
  height:18px;

  border-radius:50%;

  background:#00d4ff;

  box-shadow:0 0 20px #00d4ff;
}

/* card */
.timeline-card{
  width:45%;

  padding:30px;
  border-radius:24px;

  background:rgba(255,255,255,0.03);

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

  backdrop-filter:blur(16px);
}

.time{
  display:inline-block;

  margin-bottom:16px;

  color:#8bc5ff;
  font-size:0.85rem;
  letter-spacing:1px;
}

.timeline-card h4{
  font-size:1.3rem;
  margin-bottom:14px;
}

.timeline-card p{
  color:rgba(226,236,255,0.7);
  line-height:1.8;
}

/* =========================
   BOTTOM
========================= */

.performance-bottom{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.bottom-card{
  padding:34px 24px;
  border-radius:24px;

  text-align:center;

  background:rgba(255,255,255,0.03);

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

  backdrop-filter:blur(16px);
}

.bottom-card h4{
  font-size:2rem;
  margin-bottom:12px;

  background:linear-gradient(
    135deg,
    #fff,
    #8bc5ff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.bottom-card span{
  color:rgba(226,236,255,0.68);
}

/* =========================
   ANIMATIONS
========================= */

@keyframes pulse{
  0%{
    box-shadow:0 0 0 0 rgba(0,255,174,0.5);
  }

  70%{
    box-shadow:0 0 0 14px rgba(0,255,174,0);
  }

  100%{
    box-shadow:0 0 0 0 rgba(0,255,174,0);
  }
}

@keyframes bars{
  from{
    transform:scaleY(0.92);
  }

  to{
    transform:scaleY(1);
  }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:1000px){

  .performance-grid{
    grid-template-columns:1fr;
  }

  .performance-bottom{
    grid-template-columns:repeat(2,1fr);
  }

  .timeline-line{
    left:20px;
  }

  .timeline-item,
  .timeline-item:nth-child(even){
    justify-content:flex-start;
    padding-left:60px;
  }

  .timeline-dot{
    left:20px;
  }

  .timeline-card{
    width:100%;
  }
}

@media (max-width:600px){

  .performance-section{
    padding:100px 20px;
  }

  .performance-head h2{
    letter-spacing:-2px;
  }

  .small-stats{
    grid-template-columns:1fr;
  }

  .performance-bottom{
    grid-template-columns:1fr;
  }

  .chart-bars span{
    width:28px;
  }

  .big-performance-card{
    padding:30px;
  }
}






/* =========================
   TESTIMONIALS / TRUST
========================= */

.trust-testimonials{
  position:relative;
  padding:160px 20px;
  background:#050816;
  overflow:hidden;
  color:#fff;
}

/* =========================
   BG
========================= */

.tt-bg{
  position:absolute;
  inset:0;

  background:
    radial-gradient(circle at top left,
    rgba(91,140,255,0.12),
    transparent 30%),

    radial-gradient(circle at bottom right,
    rgba(124,77,255,0.1),
    transparent 35%);
}

/* =========================
   GRID
========================= */

.tt-grid{
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

  background-size:90px 90px;

  opacity:0.25;
}

/* =========================
   ORBS
========================= */

.tt-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(120px);
  opacity:0.18;
}

.orb1{
  width:320px;
  height:320px;
  background:#00d4ff;

  top:10%;
  left:-100px;
}

.orb2{
  width:280px;
  height:280px;
  background:#7c4dff;

  bottom:0;
  right:-100px;
}

/* =========================
   CONTAINER
========================= */

.tt-container{
  position:relative;
  z-index:2;

  max-width:1300px;
  margin:auto;
}

/* =========================
   HEAD
========================= */

.tt-head{
  text-align:center;
  max-width:850px;
  margin:auto auto 80px;
}

.tt-badge{
  display:inline-block;

  padding:10px 18px;
  border-radius:100px;

  background:rgba(255,255,255,0.05);

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

  color:#dce8ff;
  font-size:0.9rem;

  margin-bottom:24px;

  backdrop-filter:blur(10px);
}

.tt-head h2{
  font-size:clamp(3rem,6vw,6rem);
  line-height:0.95;
  letter-spacing:-4px;

  margin-bottom:24px;

  background:linear-gradient(
    135deg,
    #fff,
    #9bc7ff,
    #7c4dff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.tt-head p{
  color:rgba(226,236,255,0.72);
  line-height:1.9;
  font-size:1.08rem;
}

/* =========================
   LOGO STRIP
========================= */

.logo-strip{
  overflow:hidden;

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

  background:rgba(255,255,255,0.02);

  margin-bottom:90px;
}

.logo-track{
  display:flex;
  gap:90px;

  width:max-content;

  padding:24px 0;

  animation:logoMove 24s linear infinite;
}

.logo-track span{
  color:rgba(255,255,255,0.5);

  letter-spacing:4px;
  font-size:0.95rem;
  white-space:nowrap;
}

/* =========================
   MAIN LAYOUT
========================= */

.testimonial-layout{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:28px;

  margin-bottom:80px;
}

/* =========================
   FEATURED
========================= */

.featured-review{
  position:relative;

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

  background:rgba(255,255,255,0.03);

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

  backdrop-filter:blur(20px);

  overflow:hidden;
}

/* quote */
.quote-icon{
  width:80px;
  height:80px;

  border-radius:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:40px;

  background:linear-gradient(
    135deg,
    #00d4ff,
    #5b8cff,
    #7c4dff
  );

  font-size:1.6rem;

  box-shadow:0 20px 50px rgba(91,140,255,0.3);
}

.featured-review h3{
  font-size:clamp(2rem,4vw,3.5rem);
  line-height:1.1;
  letter-spacing:-2px;

  margin-bottom:30px;
}

.featured-review p{
  color:rgba(226,236,255,0.72);

  line-height:2;
  max-width:650px;

  margin-bottom:50px;
}

/* user */
.review-user{
  display:flex;
  align-items:center;
  gap:18px;
}

.review-user img{
  width:70px;
  height:70px;
  border-radius:50%;

  object-fit:cover;

  border:2px solid rgba(255,255,255,0.12);
}

.review-user h4{
  font-size:1.1rem;
  margin-bottom:6px;
}

.review-user span{
  color:rgba(226,236,255,0.62);
}

/* =========================
   FLOATING TRUST
========================= */

.trust-floating{
  position:absolute;

  padding:14px 18px;
  border-radius:18px;

  background:rgba(8,12,30,0.75);

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

  backdrop-filter:blur(16px);

  color:#fff;

  animation:float 6s ease-in-out infinite;
}

.tf1{
  top:50px;
  right:40px;

  font-weight:700;

  background:linear-gradient(
    135deg,
    #00d4ff,
    #7c4dff
  );
}

.tf2{
  bottom:50px;
  right:40px;

  animation-delay:2s;
}

/* =========================
   MINI REVIEWS
========================= */

.mini-reviews{
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* card */
.mini-card{
  padding:34px;
  border-radius:28px;

  background:rgba(255,255,255,0.03);

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

  backdrop-filter:blur(18px);

  transition:0.35s ease;
}

.mini-card:hover{
  transform:translateY(-8px);

  border-color:rgba(91,140,255,0.28);
}

/* top */
.mini-top{
  display:flex;
  align-items:center;
  gap:16px;

  margin-bottom:24px;
}

.mini-top img{
  width:60px;
  height:60px;
  border-radius:50%;

  object-fit:cover;
}

.mini-top h4{
  margin-bottom:6px;
}

.mini-top span{
  color:rgba(226,236,255,0.6);
  font-size:0.92rem;
}

.mini-card p{
  color:rgba(226,236,255,0.72);
  line-height:1.9;
}

/* =========================
   TRUST STATS
========================= */

.trust-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.trust-stat{
  padding:30px;
  border-radius:24px;

  text-align:center;

  background:rgba(255,255,255,0.03);

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

  backdrop-filter:blur(16px);
}

.trust-stat h3{
  font-size:2.3rem;
  margin-bottom:10px;

  background:linear-gradient(
    135deg,
    #fff,
    #8bc5ff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.trust-stat span{
  color:rgba(226,236,255,0.68);
}

/* =========================
   SECURITY STRIP
========================= */

.security-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.sec-card{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;

  padding:24px;
  border-radius:22px;

  background:rgba(255,255,255,0.03);

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

  backdrop-filter:blur(16px);

  color:#dce8ff;

  transition:0.35s ease;
}

.sec-card:hover{
  transform:translateY(-6px);

  border-color:rgba(91,140,255,0.3);
}

.sec-card i{
  font-size:1rem;

  background:linear-gradient(
    135deg,
    #00d4ff,
    #7c4dff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes logoMove{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }
}

@keyframes float{
  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-16px);
  }

  100%{
    transform:translateY(0px);
  }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:1000px){

  .testimonial-layout{
    grid-template-columns:1fr;
  }

  .security-strip{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:600px){

  .trust-testimonials{
    padding:100px 20px;
  }

  .tt-head h2{
    letter-spacing:-2px;
  }

  .featured-review{
    padding:34px;
  }

  .featured-review h3{
    line-height:1.2;
  }

  .trust-floating{
    display:none;
  }

  .trust-stats{
    grid-template-columns:1fr;
  }

  .security-strip{
    grid-template-columns:1fr;
  }

  .logo-track{
    gap:40px;
  }
}









/* =========================
   FUTURISTIC FOOTER
========================= */

.ai-footer{
  position:relative;
  padding:140px 20px 40px;
  background:#050816;
  overflow:hidden;
  color:#fff;
}

/* =========================
   BG
========================= */

.footer-bg{
  position:absolute;
  inset:0;

  background:
    radial-gradient(circle at top left,
    rgba(91,140,255,0.12),
    transparent 30%),

    radial-gradient(circle at bottom right,
    rgba(124,77,255,0.12),
    transparent 35%);
}

/* =========================
   GRID
========================= */

.footer-grid{
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

  background-size:80px 80px;

  opacity:0.25;
}

/* =========================
   GLOW
========================= */

.footer-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(120px);
  opacity:0.18;
}

.fo1{
  width:320px;
  height:320px;
  background:#00d4ff;

  top:0;
  left:-100px;
}

.fo2{
  width:280px;
  height:280px;
  background:#7c4dff;

  bottom:0;
  right:-100px;
}

/* =========================
   CONTAINER
========================= */

.footer-container{
  position:relative;
  z-index:2;

  max-width:1300px;
  margin:auto;
}

/* =========================
   CTA
========================= */

.footer-cta{
  text-align:center;

  padding-bottom:100px;
  margin-bottom:80px;

  border-bottom:1px solid rgba(255,255,255,0.06);
}

.footer-badge{
  display:inline-block;

  padding:10px 18px;
  border-radius:100px;

  background:rgba(255,255,255,0.05);

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

  color:#dce8ff;
  font-size:0.9rem;

  margin-bottom:24px;

  backdrop-filter:blur(10px);
}

.footer-cta h2{
  font-size:clamp(3rem,7vw,7rem);
  line-height:0.95;
  letter-spacing:-4px;

  margin-bottom:24px;

  background:linear-gradient(
    135deg,
    #fff,
    #9bc7ff,
    #7c4dff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.footer-cta p{
  max-width:700px;
  margin:auto;

  color:rgba(226,236,255,0.72);

  line-height:1.9;
  font-size:1.08rem;
}

/* =========================
   ACTIONS
========================= */

.footer-actions{
  display:flex;
  justify-content:center;
  gap:18px;

  margin-top:40px;

  flex-wrap:wrap;
}

.footer-btn{
  padding:18px 30px;
  border-radius:18px;

  text-decoration:none;
  font-weight:600;

  transition:0.35s ease;
}

.primary-btn{
  background:linear-gradient(
    135deg,
    #00d4ff,
    #5b8cff,
    #7c4dff
  );

  color:#fff;

  box-shadow:0 20px 50px rgba(91,140,255,0.35);
}

.primary-btn:hover{
  transform:translateY(-6px);
}

.secondary-btn{
  background:rgba(255,255,255,0.04);

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

  color:#fff;

  backdrop-filter:blur(10px);
}

.secondary-btn:hover{
  background:rgba(255,255,255,0.08);
}

/* =========================
   MAIN
========================= */

.footer-main{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px;

  margin-bottom:90px;
}

/* =========================
   BRAND
========================= */

.footer-logo{
  display:flex;
  align-items:center;
  gap:12px;

  font-size:1.3rem;
  font-weight:700;

  margin-bottom:28px;
}

.footer-logo span{
  width:14px;
  height:14px;

  border-radius:50%;

  background:#00d4ff;

  box-shadow:0 0 18px #00d4ff;
}

.footer-brand p{
  max-width:460px;

  color:rgba(226,236,255,0.7);

  line-height:2;

  margin-bottom:40px;
}

/* =========================
   SOCIALS
========================= */

.footer-socials{
  display:flex;
  gap:16px;
}

.footer-socials a{
  width:52px;
  height:52px;

  border-radius:16px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(255,255,255,0.04);

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

  color:#fff;
  text-decoration:none;

  transition:0.35s ease;
}

.footer-socials a:hover{
  transform:translateY(-6px);

  border-color:rgba(91,140,255,0.35);

  background:rgba(91,140,255,0.08);
}

/* =========================
   LINKS
========================= */

.footer-links-wrap{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.footer-links h4{
  margin-bottom:28px;

  font-size:1rem;
  color:#fff;
}

.footer-links a{
  display:block;

  margin-bottom:16px;

  color:rgba(226,236,255,0.65);

  text-decoration:none;

  transition:0.3s ease;
}

.footer-links a:hover{
  color:#fff;
  transform:translateX(6px);
}

/* =========================
   MARKET STRIP
========================= */

.footer-market-strip{
  overflow:hidden;

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

  background:rgba(255,255,255,0.02);

  margin-bottom:40px;
}

.market-track{
  display:flex;
  gap:80px;

  width:max-content;

  padding:20px 0;

  animation:marketMove 24s linear infinite;
}

.market-track span{
  white-space:nowrap;

  color:#dce8ff;
  letter-spacing:1px;
  font-size:0.95rem;
}

/* =========================
   BOTTOM
========================= */

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;

  flex-wrap:wrap;
}

.footer-bottom p{
  color:rgba(226,236,255,0.58);
}

.footer-bottom-links{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}

.footer-bottom-links a{
  color:rgba(226,236,255,0.58);

  text-decoration:none;

  transition:0.3s ease;
}

.footer-bottom-links a:hover{
  color:#fff;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes marketMove{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:1000px){

  .footer-main{
    grid-template-columns:1fr;
    gap:60px;
  }
}

@media (max-width:700px){

  .footer-links-wrap{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:600px){

  .ai-footer{
    padding:100px 20px 40px;
  }

  .footer-cta h2{
    letter-spacing:-2px;
  }

  .footer-links-wrap{
    grid-template-columns:1fr;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }

  .market-track{
    gap:40px;
  }
}