/* ========== GLOBAL WRAPPER ========== */
.ai-body{
  font-family:"Poppins",sans-serif;
  background:#050013;
  color:#fff;
  margin:0;
}

/* ========== CONTAINER ========== */
.ai-container{
  width:90%;
  max-width:1300px;
  margin:0 auto;
}

/* ========== HEADER ========== */
.ai-header{
  position:fixed;
  top:0; left:0;
  width:100%;
  height:150px;
  z-index:999;
  background:rgba(10,14,25,.25);
  backdrop-filter:blur(0px);
  border-bottom:1px solid rgba(15,23,42,.08);
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.ai-header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* LOGO */
.ai-logo{display:flex;align-items:center;}
.ai-logo a{display:inline-flex;align-items:center;}
.ai-logo img{height:150px;width:auto;display:block;}

/* Scrolled header */
.ai-header.is-scrolled{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 30px rgba(2,6,23,.12);
}

/* Optional: shrink logo on scroll */
.ai-header.is-scrolled .ai-logo img{
  height:38px;
  max-height:60px;
}

/* NAV */
.ai-nav{
  display:flex;
  align-items:center;
  gap:22px;
  color:#fff;
}

.ai-nav-link{
  background:none;
  border:0;
  font:inherit;
  font-weight:800;
  font-size:14.5px;
  color:rgba(255,255,255,.92);
  cursor:pointer;
  text-decoration:none;
}
.ai-nav-link:visited{color:rgba(255,255,255,.92);}
.ai-nav-link:hover{color:#fff;}

/* Text/icons become dark when scrolled */
.ai-header.is-scrolled .ai-nav-link,
.ai-header.is-scrolled .ai-nav-link:visited{color:#0f172a;}

/* Dropdown button also dark (kept as-is; selector used elsewhere) */
.ai-header.is-scrolled .ai-nav-dropdown-btn{color:#0f172a;}

/* ==== NAV DROPDOWN ==== */
.ai-nav-dropdown{position:relative;}

.ai-dropdown-menu{
  position:absolute;
  top:calc(100% + 14px);
  left:0;
  min-width:280px;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 20px 40px rgba(2,6,23,.12);
  padding:10px 0;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:all .22s ease;
  z-index:1000;
}

.ai-dropdown-item{
  display:block;
  padding:10px 18px;
  font-size:14px;
  font-weight:600;
  color:#0f172a;
  text-decoration:none;
}
.ai-dropdown-item:hover{
  background:rgba(124,77,255,.08);
  color:#3b1b6d;
}

/* Hover open (desktop) */
.ai-nav-dropdown:hover .ai-dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* ========== BUTTONS ========== */
.ai-btn{
  padding:10px 22px;
  border-radius:50px;
  font-size:.9rem;
  font-weight:600;
  text-decoration:none;
  display:inline-block;
}

.ai-btn-primary{
  background:linear-gradient(135deg,#8e24aa,#7c4dff);
  color:#fff;
  box-shadow:0 8px 20px rgba(124,77,255,.5);
}

.ai-btn-outline{
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.4);
  background:transparent;
  font-weight:800;
  color:#fff;
}

.ai-btn-outline-contact{
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.20) !important;
  background:transparent;
  font-weight:800;
  color:#3b1b6d !important;
}

/* Contact button in scrolled state */
.ai-header.is-scrolled .ai-btn-outline{
  border-color:rgba(15,23,42,.18);
  color:#0f172a;
}

/* Mobile header logo size */
@media (max-width:768px){
  .ai-logo img{height:36px;}
}

/* ========== HERO SECTION ========== */
.ai-hero{
  padding:170px 0 100px;
  background:
    linear-gradient(90deg,rgba(5,0,19,.8),rgba(5,0,19,.3)),
    url("../assets/Banner-1.webp");
  background-size:cover;
  background-position:right center;
  background-repeat:no-repeat;
}

.ai-hero-inner{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
  align-items:center;
}

.ai-hero-subtitle{
  text-transform:uppercase;
  letter-spacing:5px;
  color:#bbb;
  font-size:.8rem;
  margin-bottom:10px;
}

.ai-hero-title{
  font-size:3rem;
  font-weight:800;
  line-height:1.1;
  text-transform:uppercase;
}

.ai-hero-highlight{
  background:linear-gradient(135deg,#b388ff,#ff80ab);
  -webkit-background-clip:text;
  color:transparent;
}

.ai-hero-text{
  margin-top:20px;
  margin-bottom:20px;
  max-width:500px;
  color:rgba(255,255,255,.7);
}

/* HERO BUTTONS */
.ai-hero-btns .ai-btn{margin-right:12px;}

/* HERO IMAGE */
.ai-hero-right{text-align:right;}
.ai-hero-img{
  width:100%;
  max-width:500px;
  filter:drop-shadow(0 0 25px rgba(175,0,255,.4));
}

/* ========== HERO RESPONSIVE ========== */
@media (max-width:900px){
  .ai-hero-inner{grid-template-columns:1fr;}
  .ai-hero-right{text-align:center;}
  .ai-hero-img{max-width:350px;}
}

/* ===============================
   SERVICES HIGHLIGHT SECTION
================================ */
.ai-services-highlight{
  padding:120px 0;
  background:linear-gradient(185deg,#3b1b6d,#02001a);
}

.ai-services-highlight-inner{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:60px;
  align-items:center;
}

/* LEFT CONTENT */
.ai-services-title{
  font-size:2.4rem;
  font-weight:800;
  line-height:1.2;
  margin-bottom:30px;
  color:#fff;
}

.ai-services-title-highlight{
  background:linear-gradient(135deg,#b388ff,#7c4dff);
  -webkit-background-clip:text;
  color:transparent;
}

.ai-services-list{
  list-style:none;
  padding:0;
  margin-bottom:30px;
}

.ai-services-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:14px;
  font-size:.95rem;
  color:#fff;
}

.ai-check{color:#7c4dff;font-weight:700;margin-top:2px;}
.ai-accent{margin-left:6px;color:#7c4dff;font-weight:600;}

.ai-services-text{
  max-width:560px;
  color:#fff;
  font-size:.95rem;
  line-height:1.7;
}

/* RIGHT VISUAL */
.ai-services-right{
  position:relative;
  display:flex;
  justify-content:center;
}

.ai-services-mockup{
  width:100%;
  max-width:420px;
  height:420px;
  border-radius:12px;
  background:
    radial-gradient(circle at top right,rgba(124,77,255,.35),transparent 60%),
    radial-gradient(circle at bottom left,rgba(179,136,255,.35),transparent 60%),
    rgba(15,5,40,.9);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 80px rgba(124,77,255,.35);
  position:relative;
}

/* ==== SERVICES RIGHT IMAGE ==== */
.ai-services-image-wrap{
  position:relative;
  width:100%;
  max-width:480px;
  margin:0 auto;
}

.ai-services-image{
  width:100%;
  border-radius:14px;
  display:block;
  background:radial-gradient(circle at top right,rgba(124,77,255,.35),transparent 60%);
}

.ai-services-badge{
  position:absolute;
  bottom:20px;
  left:20px;
  background:linear-gradient(135deg,#8e24aa,#7c4dff);
  padding:10px 16px;
  border-radius:20px;
  font-size:.8rem;
  font-weight:600;
  color:#fff;
  box-shadow:0 10px 30px rgba(124,77,255,.45);
}

/* SERVICES RESPONSIVE */
@media (max-width:900px){
  .ai-services-highlight-inner{grid-template-columns:1fr;}
  .ai-services-right{order:-1;}
  .ai-services-title{font-size:2rem;}
}

/* ================= OUR WORK ================= */
.ai-work{
  padding:120px 0;
  background:linear-gradient(185deg,#02001a,#3b1b6d);
  text-align:center;
}

.ai-work-eyebrow{
  color:#7c4dff;
  font-weight:700;
  letter-spacing:3px;
}

.ai-work-title{
  font-size:2.6rem;
  font-weight:800;
  margin:10px 0;
}

.ai-work-subtitle{
  color:rgba(255,255,255,.75);
  max-width:600px;
  margin:0 auto 40px;
}

.ai-work-tabs{
  display:flex;
  justify-content:center;
  gap:15px;
  margin-bottom:50px;
}

.ai-work-tab{
  background:transparent;
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  padding:12px 26px;
  border-radius:40px;
  cursor:pointer;
}

.ai-work-tab.active{
  background:linear-gradient(135deg,#8e24aa,#7c4dff);
  box-shadow:0 10px 30px rgba(124,77,255,.5);
  border:none;
}

.ai-work-panel{display:none;}
.ai-work-panel.active{display:block;}

.ai-work-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
}

/* CARD */
.ai-work-card{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  height:360px;
}

.ai-work-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  display:block;
  transition:transform .4s ease;
}

.ai-work-card:hover .ai-work-thumb{transform:scale(1.08);}

/* MOBILE TAB (final effective rules) */
#mobile{max-width:700px;margin:0 auto;}

#mobile .ai-work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  justify-items:center;
}

#mobile .ai-work-card{
  width:100%;
  max-width:260px;
  height:420px;
}

#mobile .ai-work-thumb{
  object-fit:contain;
  object-position:center;
  background:#050013;
  padding:15px;
}

#logo .ai-work-card{width:100%;height:420px;}

/* OVERLAY */
.ai-work-overlay{
  position:absolute;
  inset:0;
  background:rgba(5,0,20,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:.3s;
}
.ai-work-card:hover .ai-work-overlay{opacity:1;}

.ai-work-overlay span{
  background:linear-gradient(135deg,#8e24aa,#7c4dff);
  padding:12px 24px;
  border-radius:30px;
  font-weight:600;
}

/* LIGHTBOX */
.ai-lightbox{
  position:fixed;
  inset:0;
  background:rgba(5,0,20,.85);
  backdrop-filter:blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.ai-lightbox.active{display:flex;}

.ai-lightbox-img{
  max-width:90%;
  max-height:90%;
  border-radius:12px;
  box-shadow:0 40px 100px rgba(124,77,255,.6);
}

.ai-lightbox-close{
  position:absolute;
  top:25px;
  right:30px;
  font-size:2.5rem;
  color:#fff;
  cursor:pointer;
}

/* OUR WORK RESPONSIVE */
@media (max-width:900px){
  .ai-work-grid{grid-template-columns:1fr;}
}

/* ===============================
   TOOLS & SOFTWARE SECTION
================================ */
.ai-tools{
  padding:120px 0;
  background:linear-gradient(135deg,#02001a,#7c4dff);
  overflow:hidden;
}

.ai-tools-header{text-align:center;margin-bottom:60px;}
.ai-tools-eyebrow{color:#7c4dff;font-weight:700;letter-spacing:3px;}
.ai-tools-title{font-size:2.6rem;font-weight:800;margin:10px 0;}
.ai-tools-subtitle{
  max-width:680px;
  margin:0 auto;
  color:rgba(255,255,255,.75);
}

/* MARQUEE */
.ai-marquee{width:100%;overflow:hidden;margin:25px 0;}
.ai-marquee-track{
  display:flex;
  gap:30px;
  width:max-content;
  animation:marquee-left 40s linear infinite;
}
.ai-marquee-right .ai-marquee-track{animation:marquee-right 45s linear infinite;}

/* TOOL CARD */
.ai-tool{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 26px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  white-space:nowrap;
  backdrop-filter:blur(6px);
}
.ai-tool img{width:28px;height:28px;}
.ai-tool span{font-size:.9rem;font-weight:600;}

/* ANIMATIONS */
@keyframes marquee-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes marquee-right{from{transform:translateX(-50%);}to{transform:translateX(0);}}

/* TOOLS RESPONSIVE */
@media (max-width:768px){
  .ai-marquee-track{animation-duration:25s;}
  .ai-tool{padding:12px 18px;}
}

/* ===============================
   WHY AIFINITY SECTION
================================ */
.ai-why{
  padding:120px 0;
  background:linear-gradient(185deg,#3b1b6d,#02001a);
}

.ai-why-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
}

/* LEFT */
.ai-why-left{position:sticky;top:120px;}
.ai-why-eyebrow{color:#7c4dff;font-weight:700;letter-spacing:3px;margin-bottom:15px;}
.ai-why-title{
  font-size:2.8rem;
  font-weight:800;
  line-height:1.15;
  margin-bottom:25px;
}
.ai-why-text{
  max-width:480px;
  color:rgba(255,255,255,.75);
  line-height:1.7;
  margin-bottom:30px;
}

/* LEFT IMAGE */
.ai-why-image img{
  width:100%;
  max-width:420px;
  border-radius:16px;
  box-shadow:0 30px 80px rgba(124,77,255,.4);
}

/* RIGHT SCROLL */
.ai-why-right{
  max-height:560px;
  overflow-y:auto;
  padding-right:10px;
}
.ai-why-right::-webkit-scrollbar{width:6px;}
.ai-why-right::-webkit-scrollbar-thumb{
  background:linear-gradient(135deg,#8e24aa,#7c4dff);
  border-radius:10px;
}

/* SERVICE ITEM */
.ai-service-item{
  display:flex;
  gap:20px;
  padding:26px 28px;
  margin-bottom:20px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  transition:.3s ease;
}
.ai-service-item i{
  font-size:28px;
  color:#7c4dff;
  min-width:30px;
  margin-top:4px;
}
.ai-service-item h4{font-size:1.1rem;font-weight:700;margin-bottom:6px;}
.ai-service-item p{font-size:.9rem;color:rgba(255,255,255,.75);line-height:1.6;}
.ai-service-item:hover{
  background:linear-gradient(135deg,rgba(142,36,170,.25),rgba(124,77,255,.25));
  transform:translateX(6px);
}

/* WHY RESPONSIVE */
@media (max-width:900px){
  .ai-why-inner{grid-template-columns:1fr;gap:40px;}
  .ai-why-left{position:relative;top:0;}
  .ai-why-right{max-height:none;overflow:visible;}
  .ai-why-title{font-size:2.2rem;}
}

/* ===============================
   CMS EXPERIENCE SECTION
================================ */
.ai-cms-x{
  padding:140px 0;
  background:linear-gradient(185deg,#02001a,#3b1b6d);
  overflow:hidden;
}

.ai-cms-x-inner{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:80px;
}

/* LEFT */
.ai-cms-x-left{position:sticky;top:120px;}
.ai-cms-x-eyebrow{color:#7c4dff;font-weight:700;letter-spacing:3px;}
.ai-cms-x-title{
  font-size:2.9rem;
  font-weight:800;
  line-height:1.1;
  margin:15px 0 25px;
}
.ai-cms-x-text{
  max-width:460px;
  color:rgba(255,255,255,.75);
  line-height:1.7;
  margin-bottom:30px;
}
.ai-cms-x-stack span{
  display:inline-block;
  margin-right:14px;
  margin-bottom:10px;
  padding:10px 18px;
  border-radius:30px;
  background:rgba(255,255,255,.08);
  font-weight:600;
}

/* RIGHT */
.ai-cms-x-right{overflow-x:auto;padding-bottom:20px;}
.ai-cms-x-right::-webkit-scrollbar{height:6px;}
.ai-cms-x-right::-webkit-scrollbar-thumb{
  background:linear-gradient(135deg,#8e24aa,#7c4dff);
  border-radius:10px;
}

.ai-cms-x-track{display:flex;gap:26px;width:max-content;}

.ai-cms-x-card{
  min-width:300px;
  padding:34px 30px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  backdrop-filter:blur(6px);
  transition:.4s ease;
}
.ai-cms-x-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 70px rgba(124,77,255,.45);
}
.ai-cms-x-card i{font-size:28px;color:#7c4dff;margin-bottom:18px;}
.ai-cms-x-card h4{font-size:1.15rem;font-weight:700;margin-bottom:10px;}
.ai-cms-x-card p{font-size:.95rem;color:rgba(255,255,255,.75);line-height:1.6;}

/* CMS RESPONSIVE */
@media (max-width:900px){
  .ai-cms-x-inner{grid-template-columns:1fr;}
  .ai-cms-x-left{position:relative;top:0;}
}

/* ===============================
   GENERAL PROCESS SECTION
================================ */
.ai-process{
  padding:140px 0;
  background:linear-gradient(185deg,#02001a,#3b1b6d);
  overflow:hidden;
}

/* HEADER */
.ai-process-header{
  text-align:center;
  max-width:780px;
  margin:0 auto 60px;
}
.ai-process-title{font-size:2.8rem;font-weight:800;margin-bottom:16px;}
.ai-process-subtitle{color:rgba(255,255,255,.75);line-height:1.7;}

/* PROCESS TABS */
.ai-process-tabs{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-bottom:80px;
  flex-wrap:wrap;
}
.ai-process-tab{
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  padding:12px 26px;
  border-radius:30px;
  color:#fff;
  cursor:pointer;
  font-weight:600;
  transition:.3s ease;
}
.ai-process-tab.active{
  background:linear-gradient(135deg,#8e24aa,#7c4dff);
  border-color:transparent;
  box-shadow:0 10px 30px rgba(124,77,255,.5);
}

/* PROCESS FLOW */
.ai-process-flow{position:relative;padding-top:90px;}
.ai-process-line-track{position:absolute;top:45px;left:0;width:100%;}
.ai-process-line-fill{
  height:3px;
  width:0%;
  background:linear-gradient(90deg,#8e24aa,#7c4dff);
  margin:0 auto;
  transition:width 1.4s ease;
}

/* STEPS GRID */
.ai-process-steps{
  display:none;
  grid-template-columns:repeat(5,1fr);
  gap:40px;
  position:relative;
  z-index:2;
}
.ai-process-steps.active{display:grid;}

/* STEP */
.ai-process-step{text-align:center;position:relative;padding-top:40px;}

/* ICON – EXACTLY ON LINE */
.ai-process-icon{
  width:72px;height:72px;
  border-radius:50%;
  background:linear-gradient(135deg,#8e24aa,#7c4dff);
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  top:-62px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
}
.ai-process-icon i{font-size:28px;color:#fff;}

.ai-process-step h4{margin-top:20px;font-size:1.1rem;font-weight:700;}
.ai-process-step p{font-size:.9rem;color:rgba(255,255,255,.75);line-height:1.6;}

/* CTA */
.ai-process-cta{text-align:center;margin-top:100px;}
.ai-process-cta h3{font-size:2rem;font-weight:800;margin-bottom:10px;}
.ai-process-cta p{color:rgba(255,255,255,.75);margin-bottom:26px;}

/* PROCESS RESPONSIVE (merged) */
@media (max-width:1100px){
  .ai-process-steps{grid-template-columns:repeat(3,1fr);row-gap:110px;}
}
@media (max-width:700px){
  .ai-process-line-track{display:none;}
  .ai-process-steps{grid-template-columns:1fr;gap:50px;}
  .ai-process-icon{position:relative;top:0;transform:none;margin:0 auto 20px;}
  .ai-process-title{font-size:2.2rem;}
  .ai-process-tabs{margin-bottom:50px;}
}

/* ===============================
   WHY AIFINITY – PAGE SCROLL
================================ */
.aif-why{
  padding:140px 0;
  background:#fff;
}

.aif-why-layout{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:80px;
  align-items:flex-start;
}

/* LEFT FIXED */
.aif-why-left{position:sticky;top:120px;}

.aif-why-title{
  font-size:2.8rem;
  font-weight:800;
  line-height:1.2;
  margin-bottom:18px;
  color:#0b1b4d;
}
.aif-why-title span{
  background:linear-gradient(135deg,#3b1b6d,#7c4dff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.aif-why-intro{
  font-size:1.05rem;
  line-height:1.8;
  color:#555;
  max-width:520px;
}

/* RIGHT GRID (NO SCROLLBAR) */
.aif-why-right{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:50px 60px;
}

/* ITEMS */
.aif-why-item{display:flex;flex-direction:column;gap:10px;}
.aif-why-item i{font-size:26px;color:#7c4dff;}
.aif-why-item h4{font-size:1.15rem;font-weight:700;color:#0b1b4d;}
.aif-why-item p{font-size:.95rem;line-height:1.7;color:#555;}

/* AIF WHY RESPONSIVE */
@media (max-width:900px){
  .aif-why-layout{grid-template-columns:1fr;gap:60px;}
  .aif-why-left{position:relative;top:0;}
  .aif-why-right{grid-template-columns:1fr;gap:40px;}
  .aif-why-title{font-size:2.3rem;}
}

/* ================= BEFORE & AFTER REDESIGNS ================= */
.ai-ba{
  padding:90px 0;
  background:#fff;
}

.ai-ba-header{
  text-align:center;
  max-width:920px;
  margin:0 auto 36px;
}

.ai-ba-body{display:flex;flex-direction:column;}
.ai-ba-compare{order:1;}
.ai-ba-meta{order:2;}

.ai-ba-eyebrow{
  display:inline-block;
  letter-spacing:.16em;
  font-weight:700;
  font-size:13px;
  color:#3b1b6d;
  margin-bottom:10px;
}

.ai-ba-title{
  font-size:clamp(34px,4vw,56px);
  line-height:1.05;
  margin:0 0 12px;
  color:#0c1b3a;
  font-weight:800;
}

.ai-ba-subtitle{font-size:18px;color:#64748b;margin:0 0 10px;}

.ai-ba-link{
  display:inline-block;
  font-weight:700;
  color:#0f172a;
  text-decoration:none;
}
.ai-ba-link:hover{text-decoration:underline;}

.ai-ba-slider{
  position:relative;
  max-width:1100px;
  margin:0 auto;
  padding:22px 56px 18px;
  overflow:visible;
}

.ai-ba-stage{position:relative;overflow:visible;padding:10px 0 18px;}

.ai-ba-slide{
  display:none;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .35s ease,transform .35s ease;
}
.ai-ba-slide.is-active{
  display:block;
  opacity:1;
  transform:translateY(0);
}

.ai-ba-toplabels{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin:6px 0 22px;
}

.ai-ba-tag{font-weight:900;letter-spacing:.16em;font-size:13px;color:#7c4dff;}

.ai-ba-swap{width:68px;height:30px;position:relative;}
.ai-ba-swap-arrow{
  position:absolute;
  inset:0;
  margin:auto;
  width:68px;
  height:28px;
  background:#7c4dff;
  clip-path:polygon(0% 35%,70% 35%,70% 12%,100% 50%,70% 88%,70% 65%,0% 65%);
  border-radius:999px;
  opacity:.95;
}

.ai-ba-compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:flex-start;
  justify-content:center;
  perspective:1200px;
}

.ai-ba-screen{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#0b1220;
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}
.ai-ba-screen img{width:100%;height:auto;display:block;}

.ai-ba-screen--before{
  transform:rotateY(12deg) rotateZ(-1.5deg);
  transform-origin:right center;
  opacity:.96;
}
.ai-ba-screen--after{
  transform:rotateY(-10deg) rotateZ(1.2deg);
  transform-origin:left center;
}

.ai-ba-meta{text-align:center;margin-top:100px;}
.ai-ba-meta h3{margin:0 0 6px;font-size:20px;color:#0c1b3a;}
.ai-ba-meta p{margin:0;color:#64748b;font-size:15.5px;}

/* Nav buttons */
.ai-ba-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(2,6,23,.12);
  z-index:2;
}
.ai-ba-nav i{color:#0f172a;font-size:16px;}
.ai-ba-nav:hover{transform:translateY(-50%) scale(1.03);}

.ai-ba-prev{left:8px;}
.ai-ba-next{right:8px;}

/* Dots */
.ai-ba-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:14px;
}
.ai-ba-dot{
  width:9px;height:9px;
  border-radius:99px;
  border:0;
  background:rgba(15,23,42,.22);
  cursor:pointer;
}
.ai-ba-dot.is-active{background:#3b1b6d;width:22px;}

/* FULL SCREEN CLICK AREAS */
.ai-ba-click{
  position:absolute;
  top:0; left:0;
  height:100%;
  width:50%;
  z-index:1;
  cursor:pointer;
}
.ai-ba-click-prev{left:0;}
.ai-ba-click-next{left:auto;right:0;}

/* Responsive */
@media (max-width:900px){
  .ai-ba-slider{padding:22px 18px 18px;}
  .ai-ba-nav{display:none;}
  .ai-ba-compare{grid-template-columns:1fr;gap:14px;}
  .ai-ba-screen--before,
  .ai-ba-screen--after{transform:none;}
}

/* ================= SEO CONTENT — AIFINITY ================= */
.ai-seo-long{
  padding:90px 0;
  background:
    radial-gradient(1100px 600px at 50% -10%,rgba(124,77,255,.10),transparent 60%),
    #fff;
}

.ai-seo-long-header{text-align:center;max-width:980px;margin:0 auto 34px;}

.ai-seo-long-eyebrow{
  display:inline-block;
  font-weight:800;
  letter-spacing:.18em;
  font-size:12px;
  color:#3b1b6d;
  margin-bottom:10px;
}

.ai-seo-long-title{
  margin:0 0 12px;
  font-size:clamp(30px,3.4vw,48px);
  line-height:1.1;
  color:#0c1b3a;
  font-weight:800;
}

.ai-seo-long-subtitle{margin:0;font-size:18px;color:#64748b;line-height:1.6;}

.ai-seo-long-grid{
  display:grid;
  grid-template-columns:2.7fr .9fr;
  gap:26px;
  align-items:start;
  max-width:1120px;
  margin:0 auto;
}

.ai-seo-long-content{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:20px;
  padding:30px;
  box-shadow:0 18px 45px rgba(2,6,23,.08);
}

.ai-seo-long-content h3{margin:0 0 10px;font-size:20px;color:#0f172a;font-weight:800;}
.ai-seo-long-content p{margin:0 0 14px;font-size:16.5px;line-height:1.78;color:#334155;}
.ai-seo-long-lead{margin-top:6px;font-weight:800;color:#0f172a;}

.ai-seo-long-divider{height:1px;background:rgba(15,23,42,.08);margin:22px 0;}

.ai-seo-long-list{margin:10px 0 14px;padding-left:18px;color:#334155;line-height:1.8;font-size:16px;}

.ai-seo-long-steps{display:grid;gap:14px;margin-top:14px;}

.ai-seo-long-step{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:12px;
  padding:16px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  background:#fff;
}

.ai-seo-long-step-num{
  width:44px;height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:800;
  color:#fff;
  background:#7c4dff;
  box-shadow:0 12px 22px rgba(124,77,255,.22);
}

.ai-seo-long-step-body h4{margin:0 0 8px;font-size:16.5px;font-weight:800;color:#0f172a;}
.ai-seo-long-step-body p{margin:0 0 10px;color:#475569;font-size:15.5px;line-height:1.75;}
.ai-seo-long-step-body ul{margin:0 0 10px;padding-left:18px;color:#475569;line-height:1.7;font-size:15.5px;}

.ai-seo-long-mini{font-weight:800;color:#0f172a;}

.ai-seo-long-services{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:12px;
}

.ai-seo-long-service{
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(124,77,255,.04);
}

.ai-seo-long-service h4{margin:0 0 8px;font-size:15.8px;font-weight:800;color:#0f172a;}
.ai-seo-long-service p{margin:0;font-size:15.3px;color:#475569;line-height:1.7;}

.ai-seo-long-cta{
  margin-top:18px;
  padding:18px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(124,77,255,.10),rgba(124,77,255,.04));
  border:1px solid rgba(124,77,255,.22);
}
.ai-seo-long-cta h3{margin:0 0 8px;}

.ai-seo-long-aside{position:sticky;top:90px;}

.ai-seo-long-sidecard{
  border-radius:20px;
  background:#0b1220;
  color:#e5e7eb;
  padding:22px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 45px rgba(2,6,23,.20);
}
.ai-seo-long-sidecard h3{margin:0 0 10px;font-size:18px;font-weight:800;color:#fff;}
.ai-seo-long-sidecard p{margin:0 0 14px;color:rgba(255,255,255,.75);line-height:1.7;font-size:14.5px;}

.ai-seo-long-badges{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px;}
.ai-seo-long-badges span{
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  font-size:12.5px;
  font-weight:700;
  color:#fff;
}

.ai-seo-long-sidebtn{width:80%;text-align:center;margin-top:6px;}

/* SEO RESPONSIVE */
@media (max-width:980px){
  .ai-seo-long-grid{grid-template-columns:1fr;}
  .ai-seo-long-aside{position:static;}
  .ai-seo-long-services{grid-template-columns:1fr;}
}

/* ================= FAQ (HOME) ================= */
.ai-faq{
  padding:90px 0;
  background:
    radial-gradient(1100px 600px at 50% -10%,rgba(124,77,255,.10),transparent 60%),
    #fff;
}

.ai-faq-header{text-align:center;max-width:980px;margin:0 auto 34px;}

.ai-faq-eyebrow{
  display:inline-block;
  font-weight:800;
  letter-spacing:.18em;
  font-size:12px;
  color:#3b1b6d;
  margin-bottom:10px;
}

.ai-faq-title{
  margin:0 0 12px;
  font-size:clamp(30px,3.4vw,48px);
  line-height:1.1;
  color:#0c1b3a;
  font-weight:900;
}

.ai-faq-subtitle{margin:0;font-size:18px;color:#64748b;line-height:1.6;}

.ai-faq-grid{
  display:grid;
  grid-template-columns:1.6fr .9fr;
  gap:26px;
  align-items:start;
  max-width:1120px;
  margin:0 auto;
}

/* FAQ list */
.ai-faq-list{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:20px;
  padding:14px;
  box-shadow:0 18px 45px rgba(2,6,23,.08);
}

.ai-faq-item{
  border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  overflow:hidden;
  margin:10px 0;
}

.ai-faq-q{
  list-style:none;
  cursor:pointer;
  padding:16px;
  font-weight:900;
  color:#0f172a;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.ai-faq-q::-webkit-details-marker{display:none;}
.ai-faq-q::after{
  content:"+";
  font-weight:900;
  font-size:18px;
  color:#7c4dff;
  line-height:1;
}
.ai-faq-item[open] .ai-faq-q::after{content:"–";}

.ai-faq-a{padding:0 16px 16px;overflow:hidden;}
.ai-faq-a p{margin:0;color:#475569;line-height:1.75;font-size:15.5px;}
.ai-faq-item:not([open]) .ai-faq-a{height:0;}
.ai-faq-a > *:first-child{margin-top:0;}
.ai-faq-a > *:last-child{margin-bottom:0;}

/* Side card */
.ai-faq-side{position:sticky;top:90px;}

.ai-faq-card{
  border-radius:20px;
  background:#0b1220;
  color:#e5e7eb;
  padding:22px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 45px rgba(2,6,23,.20);
}
.ai-faq-card h3{margin:0 0 10px;font-size:18px;font-weight:900;color:#fff;}
.ai-faq-card p{margin:0 0 14px;color:rgba(255,255,255,.75);line-height:1.7;font-size:14.5px;}

.ai-faq-btn{
  width:90%;
  text-align:center;
  margin-top:12px;
  padding:14px 18px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  white-space:nowrap;
}

/* FAQ RESPONSIVE */
@media (max-width:980px){
  .ai-faq-grid{grid-template-columns:1fr;}
  .ai-faq-side{position:static;}
}
@media (max-width:600px){
  .ai-faq-card{padding:20px 16px;}
}

/* ================= CONTACT STRIP ================= */
.ai-contact-strip{
  padding:90px 0;
  background:linear-gradient(185deg,#3b1b6d,#02001a);
  color:#fff;
}

.ai-contact-strip-inner{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:40px;
  align-items:start;
}

.ai-contact-eyebrow{
  display:inline-block;
  font-weight:800;
  letter-spacing:.18em;
  font-size:12px;
  color:rgba(255,255,255,.85);
  margin-bottom:12px;
  text-transform:uppercase;
}

.ai-contact-title{
  margin:0 0 14px;
  font-size:clamp(34px,4vw,56px);
  line-height:1.05;
  font-weight:900;
}

.ai-contact-highlight{color:#7c4dff;}

.ai-contact-text{
  margin:0 0 22px;
  color:rgba(255,255,255,.75);
  font-size:16.5px;
  line-height:1.75;
  max-width:520px;
}

.ai-contact-follow{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:28px;
  color:rgba(255,255,255,.85);
  font-weight:700;
}

.ai-contact-social{display:flex;gap:12px;}
.ai-contact-social a{
  width:44px;height:44px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff;
  text-decoration:none;
}
.ai-contact-social a:hover{background:rgba(255,255,255,.12);}

/* RIGHT */
.ai-contact-form-title{margin:0 0 18px;font-size:34px;font-weight:900;letter-spacing:-.02em;}
.ai-contact-form{display:grid;gap:14px;}

.ai-field{
  position:relative;
  padding:18px 0 10px;
  border-bottom:1px solid rgba(255,255,255,.26);
}
.ai-field i{
  position:absolute;
  left:0;
  top:20px;
  color:rgba(255,255,255,.75);
  font-size:18px;
}

.ai-field input,
.ai-field textarea{
  width:100%;
  padding:6px 0 6px 34px;
  border:0;
  outline:none;
  background:transparent;
  color:#fff;
  font-size:16px;
  font-weight:600;
}
.ai-field input::placeholder,
.ai-field textarea::placeholder{color:rgba(255,255,255,.75);}

.ai-field-textarea{padding-top:18px;}
.ai-field textarea{resize:vertical;min-height:120px;}

/* Submit */
.ai-contact-submit{
  margin-top:18px;
  width:180px;
  height:54px;
  border:2px solid rgba(124,77,255,.85);
  background:rgba(124,77,255,.10);
  color:#fff;
  font-weight:900;
  letter-spacing:.12em;
  border-radius:12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:0 18px 45px rgba(0,0,0,.25);
}
.ai-contact-submit:hover{background:rgba(124,77,255,.18);}

.ai-contact-note{margin:10px 0 0;color:rgba(255,255,255,.65);font-size:13px;line-height:1.6;}
.ai-hp{display:none !important;}

/* CONTACT STRIP RESPONSIVE */
@media (max-width:980px){
  .ai-contact-strip-inner{grid-template-columns:1fr;}
  .ai-contact-form-title{font-size:28px;}
  .ai-contact-submit{width:100%;}
}

/* ================= THANK YOU PAGE ================= */
.ai-thanks{
  padding:300px 0;
  background:
    radial-gradient(1000px 600px at 50% -10%,rgba(124,77,255,.12),transparent 60%),
    #fff;
}

.ai-thanks-inner{
  max-width:820px;
  margin:0 auto;
  text-align:center;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:22px;
  padding:40px 24px;
  box-shadow:0 18px 45px rgba(2,6,23,.08);
}

.ai-thanks-badge{
  display:inline-block;
  font-weight:900;
  letter-spacing:.16em;
  font-size:12px;
  color:#3b1b6d;
  background:rgba(124,77,255,.10);
  border:1px solid rgba(124,77,255,.22);
  padding:10px 14px;
  border-radius:999px;
  margin-bottom:14px;
}

.ai-thanks-title{
  margin:0 0 10px;
  font-size:clamp(30px,3.6vw,46px);
  line-height:1.1;
  color:#0c1b3a;
  font-weight:900;
}

.ai-thanks-text{
  margin:0 auto 20px;
  max-width:620px;
  color:#475569;
  line-height:1.75;
  font-size:16.5px;
}

.ai-thanks-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ================= FOOTER ================= */
.ai-footer{
  background:linear-gradient(185deg,#02001a,#3b1b6d);
  color:rgba(255,255,255,.78);
  padding-top:60px;
}

.ai-footer-inner{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr 1.1fr;
  gap:34px;
  padding-bottom:38px;
}

.ai-footer-brand{margin:0 0 10px;font-size:22px;font-weight:900;color:#fff;}
.ai-footer-desc{
  margin:0 0 16px;
  max-width:420px;
  font-size:15.5px;
  line-height:1.7;
  color:rgba(255,255,255,.70);
}

.ai-footer-title{margin:0 0 12px;font-size:15px;font-weight:900;color:#fff;}
.ai-footer-title-sm{margin-top:16px;}

.ai-footer-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}

.ai-footer-list a{
  color:rgba(255,255,255,.70);
  text-decoration:none;
  font-size:14.5px;
  line-height:1.35;
}
.ai-footer-list a:hover{color:#fff;}

/* Social */
.ai-footer-social{display:flex;gap:10px;flex-wrap:wrap;}
.ai-footer-social a{
  width:42px;height:42px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#fff;
  text-decoration:none;
}
.ai-footer-social a:hover{background:rgba(255,255,255,.14);}

/* Contact block */
.ai-footer-contact{margin-top:6px;}

.ai-footer-contact-link,
.ai-footer-contact-line{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  color:rgba(255,255,255,.70);
  text-decoration:none;
  font-size:14.5px;
  line-height:1.4;
}
.ai-footer-contact-link:hover{color:#fff;}
.ai-footer-contact-link i,
.ai-footer-contact-line i{color:rgba(255,255,255,.80);}

/* Bottom */
.ai-footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:16px 0;
  text-align:center;
}
.ai-footer-bottom-text{margin:0;font-size:14px;color:rgba(255,255,255,.60);}

/* FOOTER RESPONSIVE */
@media (max-width:980px){
  .ai-footer-inner{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .ai-footer-inner{grid-template-columns:1fr;}
}

/* ================= SCROLL REVEAL ANIMATIONS ================= */
.ai-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease;
  will-change:opacity,transform;
  transition-delay:var(--ai-delay,0ms);
}

.ai-reveal.is-visible{opacity:1;transform:translateY(0);}
.ai-reveal-up{transform:translateY(18px);}
.ai-reveal-left{transform:translateX(-22px);}
.ai-reveal-right{transform:translateX(22px);}
.ai-reveal-zoom{transform:scale(.96);}

.ai-reveal.is-visible.ai-reveal-left,
.ai-reveal.is-visible.ai-reveal-right{transform:translateX(0);}
.ai-reveal.is-visible.ai-reveal-zoom{transform:scale(1);}

@media (prefers-reduced-motion:reduce){
  .ai-reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ================= CONTACT PAGE HERO ================= */
.ai-contact-hero{padding:90px 0 40px;background:#fff;}
.ai-contact-hero-inner{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:28px;
  align-items:start;
}

.ai-contact-hero-eyebrow{
  display:inline-block;
  font-weight:900;
  letter-spacing:.16em;
  font-size:12px;
  color:#3b1b6d;
  background:rgba(124,77,255,.10);
  border:1px solid rgba(124,77,255,.20);
  padding:10px 14px;
  border-radius:999px;
  margin-bottom:12px;
}

.ai-contact-hero-title{
  margin:0 0 10px;
  font-size:clamp(30px,3.8vw,56px);
  line-height:1.05;
  font-weight:900;
  color:#0c1b3a;
}
.ai-contact-hero-title span{color:#7c4dff;}

.ai-contact-hero-text{
  margin:0 0 18px;
  max-width:720px;
  color:#475569;
  font-size:16.5px;
  line-height:1.7;
}

/* Contact cards */
.ai-contact-hero-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  max-width:520px;
}

.ai-contact-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 18px 45px rgba(2,6,23,.06);
  text-decoration:none;
  color:inherit;
}
.ai-contact-card:hover{border-color:rgba(124,77,255,.28);}

.ai-contact-card-ico{
  width:44px;height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(124,77,255,.10);
  border:1px solid rgba(124,77,255,.22);
  color:#3b1b6d;
}
.ai-contact-card-txt h4{margin:0 0 3px;font-size:14px;font-weight:900;color:#0f172a;}
.ai-contact-card-txt p{margin:0;font-size:14.5px;color:#475569;}
.ai-contact-card-static{cursor:default;}

/* Map card */
.ai-contact-map-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(2,6,23,.08);
}
.ai-contact-map-top{padding:16px 18px;border-bottom:1px solid rgba(15,23,42,.08);}
.ai-contact-map-top h3{margin:0 0 4px;font-size:16px;font-weight:900;color:#0f172a;}
.ai-contact-map-top p{margin:0;font-size:14px;color:#64748b;}
.ai-contact-map-embed{width:100%;height:340px;}
.ai-contact-map-embed iframe{width:100%;height:100%;border:0;display:block;}
.ai-contact-map-btn{
  width:calc(100% - 24px);
  margin:12px auto 16px;
  display:inline-flex;
  justify-content:center;
  gap:8px;
}

/* Contact page responsive */
@media (max-width:980px){
  .ai-contact-hero-inner{grid-template-columns:1fr;}
  .ai-contact-hero-cards{max-width:100%;}
}

/* ================= ABOUT US ================= */
.ai-hero-about{
  background:linear-gradient(185deg,#02001a,#3b1b6d);
  background-color:#000;
  color:#fff;
  padding:64px 0 30px;
  position:relative;
  overflow:hidden;
  background-image:url("/assets/image.webp");
}

.ai-hero-about ~ .ai-section,
.ai-hero-about ~ .ai-cta{
  background:linear-gradient(185deg,#02001a,#3b1b6d);
  background-color:#000;
  color:#fff;
}

.ai-hero-about .ai-hero-card{
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(90deg,rgba(62,23,255,.16),rgba(124,77,255,.16));
  border-radius:26px;
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
  margin-top:80px;
  margin-bottom:80px;
}

.ai-hero-about .ai-hero-inner{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  padding:34px;
  align-items:center;
}

@media (max-width:900px){
  .ai-hero-about .ai-hero-inner{grid-template-columns:1fr;padding:26px;}
}

.ai-hero-about .ai-eyebrow{
  display:inline-block;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  font-weight:900;
  margin-bottom:12px;
}

.ai-hero-about h1{
  font-size:clamp(30px,4vw,52px);
  line-height:1.05;
  margin-bottom:12px;
  font-weight:950;
}
.ai-hero-about h1 .grad{
  background:linear-gradient(90deg,var(--accent),#c7d2ff,var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:#b388ff;
}

.ai-hero-about p{
  color:rgba(255,255,255,.86);
  line-height:1.7;
  max-width:60ch;
  font-size:15px;
  margin-bottom:18px;
}

.ai-hero-about .ai-hero-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* Badges */
.ai-hero-about .ai-hero-badges{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:18px;
}
@media (max-width:600px){
  .ai-hero-about .ai-hero-badges{grid-template-columns:1fr;}
}

.ai-hero-about .ai-badge{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(11,15,20,.25);
  border-radius:18px;
  padding:14px;
}
.ai-hero-about .ai-badge .big{
  font-size:34px;
  font-weight:950;
  letter-spacing:.5px;
  color:rgba(255,255,255,.95);
}
.ai-hero-about .ai-badge .label{
  color:rgba(255,255,255,.78);
  font-weight:800;
  letter-spacing:2px;
  font-size:12px;
  text-transform:uppercase;
  margin-top:6px;
  display:block;
}

/* Hero visual */
.ai-hero-about .ai-hero-visual{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background-color:rgba(11,15,20,.25);
  background-image:url("/assets/image.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  min-height:320px;
  display:grid;
  place-items:center;
}

.ai-hero-about .ai-hero-visual::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:linear-gradient(185deg,#3b1b6d,#02001a);
  filter:blur(2px);
  opacity:.9;
}

.ai-hero-about .ai-hero-visual .ai-hero-mark{
  position:relative;
  text-align:center;
  padding:24px;
}
.ai-hero-about .ai-hero-visual .ai-hero-mark i{font-size:44px;margin-bottom:10px;color:rgba(255,255,255,.95);}
.ai-hero-about .ai-hero-visual .ai-hero-mark strong{display:block;font-size:18px;font-weight:950;margin-bottom:8px;}
.ai-hero-about .ai-hero-visual .ai-hero-mark span{color:rgba(255,255,255,.82);font-size:14px;line-height:1.6;display:block;}

/* ABOUT sections styling */
.ai-hero-about ~ .ai-section{padding:70px 0;}

.ai-hero-about ~ .ai-section .ai-section-head{
  text-align:center;
  margin-bottom:26px;
  margin-top:80px;
}
.ai-hero-about ~ .ai-section .ai-section-head .t{
  font-size:clamp(26px,3vw,40px);
  line-height:1.15;
  font-weight:950;
  margin-bottom:10px;
}
.ai-hero-about ~ .ai-section .ai-section-head .s{
  color:var(--muted);
  max-width:72ch;
  margin:0 auto;
  line-height:1.7;
  font-size:15px;
}

/* Story grid */
.ai-hero-about ~ .ai-section .ai-story{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:26px;
}
@media (max-width:900px){
  .ai-hero-about ~ .ai-section .ai-story{grid-template-columns:1fr;}
}

.ai-hero-about ~ .ai-section .ai-card{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(16,24,38,.55);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}
.ai-hero-about ~ .ai-section .ai-card h3{font-size:18px;font-weight:950;margin-bottom:10px;}
.ai-hero-about ~ .ai-section .ai-card p{color:var(--muted);line-height:1.7;font-size:14.8px;}

/* Values grid */
.ai-hero-about ~ .ai-section .ai-values{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:24px;
}
@media (max-width:950px){
  .ai-hero-about ~ .ai-section .ai-values{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .ai-hero-about ~ .ai-section .ai-values{grid-template-columns:1fr;}
}

.ai-hero-about ~ .ai-section .ai-value{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(16,24,38,.55);
  border-radius:var(--radius);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.ai-hero-about ~ .ai-section .ai-value::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(185deg,#3b1b6d,#02001a);
  opacity:.35;
  z-index:0;
}
.ai-hero-about ~ .ai-section .ai-value > *{position:relative;z-index:1;}
.ai-hero-about ~ .ai-section .ai-value i{font-size:20px;margin-bottom:10px;}
.ai-hero-about ~ .ai-section .ai-value h4{font-size:16px;font-weight:950;margin-bottom:8px;}
.ai-hero-about ~ .ai-section .ai-value p{color:var(--muted);line-height:1.7;font-size:14.5px;}

/* Capabilities list */
.ai-hero-about ~ .ai-section .ai-caps{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:24px;
}
@media (max-width:850px){
  .ai-hero-about ~ .ai-section .ai-caps{grid-template-columns:1fr;}
}

.ai-hero-about ~ .ai-section .ai-cap{
  display:flex;
  gap:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(16,24,38,.55);
  border-radius:var(--radius);
  padding:18px;
  align-items:flex-start;
}
.ai-hero-about ~ .ai-section .ai-cap .icon{
  width:42px;height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  flex:0 0 auto;
}
.ai-hero-about ~ .ai-section .ai-cap h4{font-weight:950;margin-bottom:6px;}
.ai-hero-about ~ .ai-section .ai-cap p{color:var(--muted);line-height:1.7;font-size:14.5px;}

/* CTA */
.ai-hero-about ~ .ai-cta{
  border-top:1px solid rgba(255,255,255,.10);
  padding:60px 0 70px;
}
.ai-hero-about ~ .ai-cta .ai-cta-card{
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(90deg,rgba(100,23,255,.12),rgba(124,77,255,.12));
  border-radius:26px;
  box-shadow:var(--shadow);
  padding:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.ai-hero-about ~ .ai-cta .ai-cta-card h3{font-size:22px;font-weight:950;margin-bottom:6px;}
.ai-hero-about ~ .ai-cta .ai-cta-card p{color:rgba(255,255,255,.82);line-height:1.7;font-size:14.5px;}

/* ================= SOCIAL MEDIA SERVICE PAGE ================= */
.ai-smm-hero{
  padding:160px 0 60px;
  background:linear-gradient(185deg,#02001a,#3b1b6d);
  position:relative;
  overflow:hidden;
}

.ai-smm-hero::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.10),transparent 45%),
    radial-gradient(circle at 80% 60%,rgba(255,255,255,.08),transparent 40%),
    radial-gradient(circle at 55% 10%,rgba(255,255,255,.06),transparent 40%);
  pointer-events:none;
  z-index:0;
}

/* particles */
#aiParticles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.9;
}
.ai-smm-hero .ai-container{position:relative;z-index:2;}

/* centered top */
.ai-smm-top{
  max-width:1500px;
  margin:0 auto;
  text-align:center;
}

/* Hero layout */
.ai-smm-hero-inner{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:44px;
  align-items:start;
  position:relative;
  z-index:1;
}

.ai-smm-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-weight:700;
  letter-spacing:.3px;
  font-size:13px;
}
.ai-smm-top .ai-smm-pill{justify-content:center;}

.ai-smm-title{
  margin:14px 0 10px;
  color:#fff;
  font-size:clamp(32px,4.2vw,50px);
  line-height:1.08;
}
.ai-smm-subtitle{
  color:rgba(255,255,255,.78);
  font-size:16px;
  line-height:1.7;
  max-width:560px;
}
.ai-smm-top .ai-smm-subtitle{margin-left:auto;margin-right:auto;}

.ai-smm-hero-points{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 14px;
}
.ai-smm-top .ai-smm-hero-points{justify-items:center;}

.ai-smm-point{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:12px;
}
.ai-smm-top .ai-smm-point{width:100%;max-width:360px;}

.ai-smm-point i{margin-top:2px;color:rgba(255,255,255,.95);}

.ai-smm-hero-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}
.ai-smm-top .ai-smm-hero-cta{justify-content:center;}

.ai-smm-trust{
  margin-top:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.ai-smm-trust-item{
  flex:1 1 160px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
}
.ai-smm-trust-item strong{display:block;font-size:14px;}
.ai-smm-trust-item span{display:block;margin-top:4px;color:rgba(255,255,255,.72);font-size:13px;}

/* Platforms row */
.ai-smm-platforms{
  padding:46px 0 40px;
  background:linear-gradient(185deg,#3b1b6d,#02001a);
}
.ai-smm-platforms-inner{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}
.ai-smm-platform{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.88);
}
.ai-smm-platform i{color:rgba(255,255,255,.95);}

/* Sections typography */
.ai-smm-h2{
  color:#fff;
  font-size:clamp(26px,3.2vw,40px);
  line-height:1.15;
  margin:6px 0 10px;
}
.ai-smm-p{color:rgba(255,255,255,.78);line-height:1.8;font-size:16px;}
.ai-smm-small{color:rgba(255,255,255,.72);line-height:1.7;font-size:13px;margin-top:10px;}

/* Intro section */
.ai-smm-intro{padding:70px 0;background:linear-gradient(185deg,#3b1b6d,#02001a);}
.ai-smm-intro-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:32px;
  align-items:start;
}

.ai-smm-mini-cards{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.ai-smm-mini{
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
}
.ai-smm-mini h3{font-size:14px;margin:0 0 6px;}
.ai-smm-mini p{margin:0;color:rgba(255,255,255,.72);font-size:13px;line-height:1.6;}

.ai-smm-infograph{
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
}
.ai-smm-infograph h3{margin:0 0 10px;font-size:16px;}
.ai-smm-infograph svg{width:100%;height:auto;display:block;}

.ai-smm-section-head{text-align:center;margin-bottom:22px;}

/* Pains */
.ai-smm-pains{padding:70px 0;background:linear-gradient(185deg,#02001a,#3b1b6d);}
.ai-smm-pain-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:18px;
}
.ai-smm-pain{
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
}
.ai-smm-pain i{font-size:18px;margin-bottom:10px;}
.ai-smm-pain h3{margin:0 0 6px;font-size:16px;}
.ai-smm-pain p{margin:0;color:rgba(255,255,255,.72);line-height:1.6;}

/* Services grid */
.ai-smm-services{padding:70px 0;background:linear-gradient(185deg,#3b1b6d,#02001a);}
.ai-smm-service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:18px;
}
.ai-smm-service-card{
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
}
.ai-smm-service-card h3{
  margin:0 0 10px;
  font-size:16px;
  display:flex;
  gap:10px;
  align-items:center;
}
.ai-smm-service-card p{margin:0 0 12px;color:rgba(255,255,255,.74);line-height:1.7;}
.ai-smm-service-card ul{margin:0;padding-left:18px;color:rgba(255,255,255,.78);line-height:1.8;font-size:14px;}

/* Process */
.ai-smm-process{padding:70px 0;background:linear-gradient(185deg,#02001a,#3b1b6d);}
.ai-smm-steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin-top:18px;
}
.ai-smm-step{
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
}
.ai-smm-step-num{
  width:34px;height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  margin-bottom:10px;
  font-weight:800;
}
.ai-smm-step h3{margin:0 0 6px;font-size:15px;}
.ai-smm-step p{margin:0;color:rgba(255,255,255,.72);line-height:1.6;font-size:13px;}

/* Packages */
.ai-smm-packages{padding:70px 0;background:linear-gradient(185deg,#3b1b6d,#02001a);}
.ai-smm-package-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:18px;
}
.ai-smm-package{
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  position:relative;
}
.ai-smm-package-featured{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}
.ai-smm-badge{
  position:absolute;
  top:14px;
  right:14px;
  font-size:12px;
  font-weight:800;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
}
.ai-smm-package-top h3{margin:0 0 6px;font-size:18px;}
.ai-smm-package-top p{margin:0 0 12px;color:rgba(255,255,255,.72);}

.ai-smm-package-list{
  list-style:none;
  padding:0;
  margin:0 0 14px;
  display:grid;
  gap:10px;
  color:rgba(255,255,255,.82);
}
.ai-smm-package-list i{margin-right:8px;}

.ai-smm-package-btn{width:90%;text-align:center;justify-content:center;}

.ai-smm-note{
  margin-top:18px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.78);
}

/* CTA strip */
.ai-smm-cta{padding:60px 0;background:linear-gradient(185deg,#3b1b6d,#02001a);}
.ai-smm-cta-inner{
  display:flex;
  gap:18px;
  justify-content:space-between;
  align-items:center;
  padding:22px;
  border-radius:24px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12);
}
.ai-smm-cta h2{margin:0 0 6px;color:#fff;font-size:28px;}
.ai-smm-cta p{margin:0;color:rgba(255,255,255,.78);line-height:1.7;}
.ai-smm-cta-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* SMM RESPONSIVE */
@media (max-width:1024px){
  .ai-smm-hero-inner{grid-template-columns:1fr;}
  .ai-smm-hero-points{grid-template-columns:1fr;}
  .ai-smm-intro-grid{grid-template-columns:1fr;}
  .ai-smm-mini-cards{grid-template-columns:1fr;}
  .ai-smm-pain-grid{grid-template-columns:1fr 1fr;}
  .ai-smm-service-grid{grid-template-columns:1fr 1fr;}
  .ai-smm-steps{grid-template-columns:1fr 1fr;}
  .ai-smm-package-grid{grid-template-columns:1fr;}
  .ai-smm-cta-inner{flex-direction:column;align-items:flex-start;}
}
@media (max-width:560px){
  .ai-smm-pain-grid{grid-template-columns:1fr;}
  .ai-smm-service-grid{grid-template-columns:1fr;}
}

/* =========================================================
   SMM HERO – FINAL (ISOLATED, NO CONFLICTS)
   Paste at VERY BOTTOM of style.css
========================================================= */
.smm-hero-fixed{
  background:linear-gradient(185deg,#3b1b6d,#02001a) !important;
  position:relative !important;
  overflow:hidden !important;
  padding-top:190px !important;
  padding-bottom:80px !important;
}

.smm-hero-grid{
  display:grid !important;
  grid-template-columns:520px 1fr !important;
  gap:60px !important;
  align-items:start !important;
}

@media (max-width:1100px){
  .smm-hero-grid{grid-template-columns:1fr !important;gap:28px !important;}
  .smm-hero-fixed{padding-top:160px !important;}
}

/* LEFT */
.smm-hero-left{max-width:560px;}

.smm-pill{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-weight:800;
  font-size:13px;
}

.smm-title{
  margin:18px 0 14px !important;
  color:#fff !important;
  font-weight:900 !important;
  line-height:1.02 !important;
  font-size:64px !important;
  letter-spacing:-.02em;
}
@media (max-width:600px){.smm-title{font-size:44px !important;}}
.smm-grad{color:#b388ff;}

.smm-subtitle{
  margin:0 0 18px !important;
  color:rgba(255,255,255,.78) !important;
  line-height:1.8 !important;
  font-size:16px !important;
  max-width:520px;
}

.smm-points{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 14px;
  margin-top:18px;
  max-width:520px;
}
@media (max-width:600px){.smm-points{grid-template-columns:1fr;}}
.smm-point{
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:12px;
  color:rgba(255,255,255,.90);
}
.smm-point i{margin-top:2px;}

.smm-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
}

/* RIGHT – scroller box */
.smm-hero-right{align-self:start !important;}

.smm-scroller{
  position:relative;
  border-radius:26px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  padding:22px 56px 18px;
  overflow:hidden;
}

/* Stage */
.smm-stage{
  display:flex;
  align-items:center;
  gap:18px;
  min-height:420px;
  overflow:hidden;
  justify-content:center;
}

/* Cards */
.smm-card{
  width:260px;
  height:360px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  flex:0 0 auto;
  transform:scale(.92);
  opacity:.55;
  transition:transform .35s ease,opacity .35s ease,filter .35s ease;
  position:relative;
}
.smm-card img{width:100%;height:100%;object-fit:cover;display:block;}

.smm-card.is-active{
  transform:scale(1.07);
  opacity:1;
  filter:saturate(1.05) contrast(1.02);
  box-shadow:0 25px 70px rgba(0,0,0,.45);
}

.smm-card-meta{
  position:absolute;
  left:14px;
  right:14px;
  bottom:12px;
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-size:12px;
  backdrop-filter:blur(8px);
}
.smm-card-meta .dot{
  width:6px;height:6px;
  border-radius:99px;
  background:rgba(255,255,255,.7);
}

/* Nav buttons */
.smm-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;height:40px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:10;
}
.smm-prev{left:14px;}
.smm-next{right:14px;}
.smm-nav:hover{background:rgba(255,255,255,.16);}

/* Dots */
.smm-dots{display:flex;justify-content:center;gap:8px;margin-top:14px;}

/* Mobile scroller sizing */
@media (max-width:600px){
  .smm-scroller{padding:18px 16px 14px;}
  .smm-stage{min-height:360px;}
  .smm-card{width:220px;height:320px;}
  .smm-nav{display:none;}
}

/* =========================================================
   UI/UX HERO ARC CAROUSEL (FIXED)
   Scoped to .ai-smm-showcase only
   (Merged + cleaned so there are NO global conflicts)
========================================================= */
.ai-smm-showcase{
  position:relative;
  z-index:2;
  margin-top:34px;
  overflow:hidden;
}

/* soft glow behind arc */
.ai-smm-showcase::before{
  content:"";
  position:absolute;
  left:50%;
  top:70%;
  transform:translate(-50%,-50%);
  width:900px;
  height:520px;
  background:radial-gradient(circle,rgba(124,77,255,.28),transparent 62%);
  filter:blur(10px);
  pointer-events:none;
}

/* STAGE */
.ai-smm-showcase .ai-smm-stage{
  position:relative;
  height:560px;
  width:100%;
  margin:0 auto;
  perspective:5500px;
  transform-style:preserve-3d;
  outline:none;
  max-width:1600px;
}

/* CARDS */
.ai-smm-showcase .ai-smm-card{
  position:absolute;
  left:50%;
  top:52%;
  width:240px;
  height:340px;
  border-radius:22px;
  overflow:hidden;
  transform-style:preserve-3d;

  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 25px 80px rgba(0,0,0,.45);

  transition:transform .55s ease,opacity .55s ease,filter .55s ease;
  will-change:transform,opacity;
}

.ai-smm-showcase .ai-smm-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* META */
.ai-smm-showcase .ai-smm-card-meta{
  position:absolute;
  left:14px;
  right:14px;
  bottom:12px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:12px;
  backdrop-filter:blur(8px);
}
.ai-smm-showcase .ai-smm-tag{font-weight:800;opacity:.9;}
.ai-smm-showcase .ai-smm-dot{
  width:6px;height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
}

/* NAV */
.ai-smm-showcase .ai-smm-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;height:42px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:10;
}
.ai-smm-showcase .ai-smm-prev{left:16px;}
.ai-smm-showcase .ai-smm-next{right:16px;}
.ai-smm-showcase .ai-smm-nav:hover{background:rgba(255,255,255,.16);}

/* DOTS */
.ai-smm-showcase .ai-smm-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:16px;
}
.ai-smm-showcase .ai-smm-dotbtn{
  width:8px;height:8px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.30);
  cursor:pointer;
}
.ai-smm-showcase .ai-smm-dotbtn.is-active{
  background:rgba(255,255,255,.95);
  width:22px;
}
/* UI/UX showcase: image crop from TOP */
#aiUxStage .ai-smm-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top; /* ✅ top aligned */
  display: block;
}

/* ensure card has fixed height so object-fit works properly */
#aiUxStage .ai-smm-card{
  overflow: hidden;
}

#aiLogoStage .ai-smm-card {
  display: flex;
  align-items: flex-start; /* ✅ top */
  justify-content: center;
}

#aiLogoStage .ai-smm-card img {
  height: 100%;
    object-fit: contain;

}


/* Responsive */
@media (max-width:980px){
  .ai-smm-showcase .ai-smm-nav{display:none;}
  .ai-smm-showcase .ai-smm-stage{height:420px;}
  .ai-smm-showcase .ai-smm-card{width:220px;height:320px;}
}
@media (max-width:560px){
  .ai-smm-showcase .ai-smm-stage{height:360px;}
  .ai-smm-showcase .ai-smm-card{width:200px;height:290px;}
}