/* ================================================
   ADDSWALA — CYBERPUNK NEON PATCH
   Applies from #about to footer only.
   DO NOT touch hero / navbar rules above.
   ================================================ */

/* ---------- SMOKE CANVAS LAYER ---------- */
#smoke-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  mix-blend-mode: screen;
}

/* ---------- SECTION NEON DIVIDER ---------- */
.section:not(.hero)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(183, 255, 0, 0.55),
    rgba(0, 245, 255, 0.55),
    transparent
  );
  pointer-events: none;
}

/* ---------- SECTION AMBIENT ORBS ---------- */
.section:not(.hero) {
  position: relative;
  overflow: hidden;
}

.section:not(.hero)::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  background: radial-gradient(circle, #b7ff00, transparent 70%);
  top: -80px;
  right: -120px;
  filter: blur(60px);
  transform: translateZ(0);
}

/* alternate glow side for even sections */
#partners::before,
#ad-generator::before,
#website-builder::before,
#footer::before {
  right: auto;
  left: -120px;
  background: radial-gradient(circle, #00f5ff, transparent 70%);
}

/* ---------- ABOUT SECTION ---------- */


/* ---------- PARTNERS SECTION ---------- */
#partners .partner-card {
  position: relative;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  transform: translateZ(0);
  will-change: transform;
}

#partners .partner-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(183,255,0,0), rgba(0,245,255,0));
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
  pointer-events: none;
}

#partners .partner-card:hover {
  transform: translateY(-6px) scale(1.03) translateZ(0);
  box-shadow:
    0 0 28px rgba(183,255,0,0.22),
    0 0 36px rgba(0,245,255,0.16);
}

#partners .partner-card:hover::before { opacity: 1; }

/* ---------- AD SERVICES SECTION ---------- */
/* ---------- AD SERVICES SECTION: PINNED STACKED ROW CARDS ---------- */

/* ---------- AD SERVICES SECTION ---------- */

/* ---------- AD SERVICES SECTION ---------- */
/* ---------- AD SERVICES SECTION: GREENSOCK STYLE STACKING CARDS ---------- */

/* ---------- AD SERVICES SECTION: FINAL PINNED STACK FIX ---------- */

#ad-services {
  position: relative;
  overflow: hidden;
}

#ad-services.ad-services-stackfx {
  position: relative;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}

#ad-services.ad-services-stackfx::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(183, 255, 0, 0.12), transparent 34%),
    radial-gradient(circle at 82% 35%, rgba(0, 245, 255, 0.12), transparent 38%);
  pointer-events: none;
  z-index: 0;
}

#ad-services.ad-services-stackfx::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(183, 255, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 255, 0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

#ad-services.ad-services-stackfx .container {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: 108px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Heading stays visible inside pinned section */
#ad-services.ad-services-stackfx .section-head {
  position: relative;
  z-index: 50;
  width: min(980px, calc(100% - 48px));
  margin: 0 auto 34px;
  text-align: center;
  opacity: 1 !important;
  transform: none !important;
}

#ad-services.ad-services-stackfx .section-head .section-tag {
  margin-bottom: 14px;
}

#ad-services.ad-services-stackfx .section-head h2 {
  margin-bottom: 18px;
}

#ad-services.ad-services-stackfx .section-head p {
  max-width: 780px;
  margin-inline: auto;
}

/* Fixed card stage below heading */
#ad-services.ad-services-stackfx .services-rows {
  position: relative;
  z-index: 20;
  width: min(1050px, calc(100% - 48px));
  height: 390px;
  margin: 0 auto;
  overflow: hidden;
  perspective: 1400px;
}

/* Cards are placed in one controlled stack */
#ad-services.ad-services-stackfx .service-row {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 360px;
  min-height: 360px;
  display: grid;
  grid-template-columns: 230px 1fr;
  align-items: center;
  gap: clamp(26px, 5vw, 70px);
  padding: clamp(28px, 4vw, 54px);
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(183, 255, 0, 0.28);

  background: #06100d !important;
  background-image:
    radial-gradient(circle at 18% 18%, rgba(183, 255, 0, 0.18), transparent 34%),
    radial-gradient(circle at 82% 72%, rgba(0, 245, 255, 0.14), transparent 36%),
    linear-gradient(135deg, #06100d 0%, #03080c 100%) !important;

  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.8),
    0 0 34px rgba(183, 255, 0, 0.14),
    inset 0 0 38px rgba(0, 245, 255, 0.08);

  opacity: 1;
  transform-origin: center top;
  will-change: transform, opacity;
  isolation: isolate;
}

#ad-services.ad-services-stackfx .service-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.08) 42%, transparent 62%);
  transform: translateX(-130%);
  opacity: 0.75;
  pointer-events: none;
  z-index: 1;
}

#ad-services.ad-services-stackfx .service-row:hover::before {
  animation: adServiceSweep 1.15s ease forwards;
}

@keyframes adServiceSweep {
  to {
    transform: translateX(130%);
  }
}

#ad-services.ad-services-stackfx .service-row-text,
#ad-services.ad-services-stackfx .service-row-visual,
#ad-services.ad-services-stackfx .service-icon,
#ad-services.ad-services-stackfx .service-row-num {
  position: relative;
  z-index: 5;
}

#ad-services.ad-services-stackfx .service-row-text {
  text-align: left;
  position: relative;
  z-index: 5;
}

#ad-services.ad-services-stackfx .service-row-text h3 {
  color: #ffffff;
  font-size: clamp(1.9rem, 3.4vw, 3.4rem);
  line-height: 1;
  margin-bottom: 16px;
  text-shadow: 0 0 22px rgba(183, 255, 0, 0.22);
}

#ad-services.ad-services-stackfx .service-row-text p {
  color: rgba(235, 255, 250, 0.84);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.65;
  max-width: 740px;
}

#ad-services.ad-services-stackfx .service-row-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
}

/* Odd cards: content left, number right */
#ad-services.ad-services-stackfx .service-row:nth-child(odd) {
  grid-template-columns: 1fr 230px;
}

#ad-services.ad-services-stackfx .service-row:nth-child(odd) .service-row-text {
  grid-column: 1;
  grid-row: 1;
  text-align: left;
}

#ad-services.ad-services-stackfx .service-row:nth-child(odd) .service-row-visual {
  grid-column: 2;
  grid-row: 1;
}

/* Even cards: number left, content right */
#ad-services.ad-services-stackfx .service-row:nth-child(even) {
  grid-template-columns: 230px 1fr;
}

#ad-services.ad-services-stackfx .service-row:nth-child(even) .service-row-visual {
  grid-column: 1;
  grid-row: 1;
}

#ad-services.ad-services-stackfx .service-row:nth-child(even) .service-row-text {
  grid-column: 2;
  grid-row: 1;
  text-align: left;
}

#ad-services.ad-services-stackfx .service-icon {
  width: 92px;
  height: 92px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(183, 255, 0, 0.95), rgba(0, 245, 255, 0.9));
  color: #06100d;
  box-shadow:
    0 0 34px rgba(183, 255, 0, 0.34),
    0 0 42px rgba(0, 245, 255, 0.2);
}

#ad-services.ad-services-stackfx .service-row-num {
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.09);
  text-shadow: 0 0 30px rgba(183, 255, 0, 0.18);
}

/* Mobile normal layout */
@media (max-width: 768px) {
  #ad-services.ad-services-stackfx {
    min-height: auto;
    padding: 70px 0;
    overflow: hidden;
  }

  #ad-services.ad-services-stackfx::before,
  #ad-services.ad-services-stackfx::after {
    display: none;
  }

  #ad-services.ad-services-stackfx .container {
    min-height: auto;
    padding-top: 0;
    padding-bottom: 0;
    display: block;
  }

  #ad-services.ad-services-stackfx .section-head {
    width: 100%;
    margin-bottom: 32px;
  }

  #ad-services.ad-services-stackfx .services-rows {
  position: relative;
  z-index: 20;
  width: min(1050px, calc(100% - 48px));
  height: 390px;
  margin: 0 auto;
  overflow: hidden;
  perspective: 1400px;
  border-radius: 34px;
}

  #ad-services.ad-services-stackfx .service-row {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 360px;
  min-height: 360px;
  display: grid;
  grid-template-columns: 230px 1fr;
  align-items: center;
  gap: clamp(26px, 5vw, 70px);
  padding: clamp(28px, 4vw, 54px);
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(183, 255, 0, 0.28);

  background: #06100d !important;
  background-image:
    radial-gradient(circle at 18% 18%, rgba(183, 255, 0, 0.18), transparent 34%),
    radial-gradient(circle at 82% 72%, rgba(0, 245, 255, 0.14), transparent 36%),
    linear-gradient(135deg, #06100d 0%, #03080c 100%) !important;

  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.8),
    0 0 34px rgba(183, 255, 0, 0.14),
    inset 0 0 38px rgba(0, 245, 255, 0.08);

  opacity: 0;
  pointer-events: none;
  transform-origin: center top;
  will-change: transform, opacity;
  isolation: isolate;
  }
  #ad-services.ad-services-stackfx .service-row.is-active {
  opacity: 1;
  pointer-events: auto;
}

  #ad-services.ad-services-stackfx .service-icon {
    width: 76px;
    height: 76px;
    border-radius: 22px;
  }

  #ad-services.ad-services-stackfx .service-row-text h3 {
    font-size: 1.65rem;
  }

  #ad-services.ad-services-stackfx .service-row:nth-child(odd),
  #ad-services.ad-services-stackfx .service-row:nth-child(even) {
    grid-template-columns: 1fr;
  }

  #ad-services.ad-services-stackfx .service-row:nth-child(odd) .service-row-text,
  #ad-services.ad-services-stackfx .service-row:nth-child(odd) .service-row-visual,
  #ad-services.ad-services-stackfx .service-row:nth-child(even) .service-row-text,
  #ad-services.ad-services-stackfx .service-row:nth-child(even) .service-row-visual {
    grid-column: auto;
    grid-row: auto;
  }
}
/* ---------- SHOWCASE SECTION ---------- */

/* ---------- AD GENERATOR SECTION ---------- */
#ad-generator .generator-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(0,245,255,0.14);
}

#ad-generator .generator-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #b7ff00, #00f5ff, #b7ff00);
  background-size: 200% 100%;
  animation: borderFlow 3.5s linear infinite;
  transform: translateZ(0);
}

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

/* result box neon glow pulse */
#ad-generator .result-box {
  animation: resultPulse 4s ease-in-out infinite;
  transform: translateZ(0);
}

@keyframes resultPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(183,255,0,0.1), inset 0 1px 0 rgba(255,255,255,0.05); }
  50% { box-shadow: 0 0 32px rgba(0,245,255,0.18), 0 0 20px rgba(183,255,0,0.14), inset 0 1px 0 rgba(255,255,255,0.05); }
}

/* price highlight */
#ad-generator .final-amount {
  display: inline-block;
  position: relative;
}

#ad-generator .final-amount::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #b7ff00, #00f5ff);
  border-radius: 2px;
}

/* ---------- WEB PLANS SECTION ---------- */
#web-plans .plan-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform: translateZ(0);
  will-change: transform;
}

/* corner accent */
#web-plans .plan-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  background: linear-gradient(225deg, rgba(183,255,0,0.12), transparent 65%);
  border-radius: 0 var(--radius) 0 100%;
  pointer-events: none;
  transition: opacity 0.4s ease;
  opacity: 0.5;
}

#web-plans .plan-card:hover::before { opacity: 1; }

/* top neon bar on featured */
#web-plans .plan-card.featured::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #b7ff00, #00f5ff);
  border-radius: var(--radius) var(--radius) 0 0;
}

#web-plans .plan-card:hover {
  transform: translateY(-10px) translateZ(0);
  box-shadow:
    0 0 38px rgba(183,255,0,0.22),
    0 0 52px rgba(0,245,255,0.16);
  border-color: rgba(183,255,0,0.38);
}

/* price counter glow */
#web-plans .price {
  position: relative;
  display: inline-block;
  transition: text-shadow 0.4s ease;
}

#web-plans .plan-card:hover .price {
  text-shadow:
    0 0 18px rgba(183,255,0,0.65),
    0 0 36px rgba(183,255,0,0.35);
}

/* checkmark neon pulse on hover */
#web-plans .plan-card:hover li::before {
  text-shadow: 0 0 8px rgba(183,255,0,0.8);
}

/* ---------- WEBSITE BUILDER SECTION ---------- */
#website-builder .generator-card {
  border-color: rgba(0,245,255,0.18);
  position: relative;
  overflow: hidden;
}

#website-builder .generator-card::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00f5ff, #b7ff00, #00f5ff);
  background-size: 200% 100%;
  animation: borderFlow 3.5s linear infinite reverse;
  transform: translateZ(0);
}

/* select / input neon focus ring */
#website-builder .input-group input:focus,
#website-builder .input-group select:focus,
#website-builder .input-group textarea:focus,
#ad-generator .input-group input:focus,
#ad-generator .input-group select:focus,
#ad-generator .input-group textarea:focus {
  border-color: rgba(183,255,0,0.55);
  box-shadow:
    0 0 0 3px rgba(183,255,0,0.09),
    0 0 22px rgba(183,255,0,0.14);
  transform: translateZ(0);
}

/* ---------- CONTACT SECTION ---------- */
#contact .contact-info {
  position: relative;
}

#contact .info-box {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s ease, border-color 0.35s ease;
  transform: translateZ(0);
  will-change: transform;
}

#contact .info-box:hover {
  transform: translateX(6px) translateZ(0);
  border-color: rgba(183,255,0,0.28);
  box-shadow: 0 0 22px rgba(183,255,0,0.1);
}

/* contact form neon border top */
#contact .contact-form {
  position: relative;
  overflow: hidden;
}

#contact .contact-form::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #b7ff00, #00f5ff, transparent);
  transform: translateZ(0);
}

/* submit button pulse */
#contact .btn-primary {
  position: relative;
  overflow: hidden;
}

#contact .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,0.18) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: none;
  pointer-events: none;
}

#contact .btn-primary:hover::after {
  animation: shimmerSweep 0.6s ease forwards;
}

/* ---------- FOOTER ---------- */
.footer {
  position: relative;
  overflow: hidden;
}

/* neon scan line at top of footer */
.footer::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183,255,0,0.6), rgba(0,245,255,0.6), transparent);
  pointer-events: none;
}

.footer-brand,
.footer-links,
.footer-contact {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform: translateZ(0);
}

.footer-brand:hover,
.footer-links:hover,
.footer-contact:hover {
  transform: translateY(-4px) translateZ(0);
  border-color: rgba(183,255,0,0.2);
  box-shadow:
    0 0 24px rgba(183,255,0,0.1),
    0 0 32px rgba(0,245,255,0.08);
}

.back-top {
  position: relative;
  transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
  display: inline-block;
  transform: translateZ(0);
}

.back-top:hover {
  transform: translateY(-3px) translateZ(0);
  text-shadow: 0 0 16px rgba(183,255,0,0.7), 0 0 28px rgba(183,255,0,0.4);
}

/* ---------- NEON SECTION TAG GLOW PULSE ---------- */
.section-tag {
  animation: tagPulse 3s ease-in-out infinite;
}

@keyframes tagPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(183,255,0,0.08); }
  50% { box-shadow: 0 0 28px rgba(183,255,0,0.22), 0 0 20px rgba(0,245,255,0.1); }
}

/* ---------- NEON CURSOR DOT ---------- */
.neon-cursor {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b7ff00;
  box-shadow: 0 0 14px #b7ff00, 0 0 24px rgba(183,255,0,0.5);
  pointer-events: none;
  z-index: 99999999;
  transform: translate(-50%, -50%) translateZ(0);
  transition: transform 0.08s ease, width 0.2s ease, height 0.2s ease, opacity 0.3s ease;
  will-change: transform;
  mix-blend-mode: screen;
}

.neon-cursor.expanded {
  width: 24px;
  height: 24px;
  background: rgba(0,245,255,0.35);
  box-shadow: 0 0 18px #00f5ff, 0 0 32px rgba(0,245,255,0.4);
}

/* ---------- REVEAL RESET (GPU safe) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  will-change: transform, opacity;
}

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

/* ---------- MOBILE OVERRIDES ---------- */
@media (max-width: 768px) {
  #smoke-canvas { display: none; }
  .neon-cursor { display: none; }

  #ad-services .service-card::before { display: none; }
 

  @keyframes resultPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(183,255,0,0.08); }
    50% { box-shadow: 0 0 18px rgba(0,245,255,0.12); }
  }

  @keyframes tagPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(183,255,0,0.06); }
    50% { box-shadow: 0 0 14px rgba(183,255,0,0.12); }
  }
}
/* =========================================================
   ABOUT — CYBER HOLOGRAM SECTION
   New clean About design only
========================================================= */

#about.about-holo-section {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  isolation: isolate;
}

#about.about-holo-section::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.28;
  background:
    linear-gradient(rgba(183, 255, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 255, 0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
}

#about .about-holo-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(38px, 6vw, 86px);
  align-items: center;
}

#about .about-holo-card {
  position: relative;
  min-height: 520px;
  border-radius: 34px;
  padding: 2px;
  background:
    linear-gradient(135deg, rgba(183, 255, 0, 0.75), rgba(0, 245, 255, 0.65), rgba(183, 255, 0, 0.2));
  box-shadow:
    0 0 48px rgba(183, 255, 0, 0.18),
    0 0 70px rgba(0, 245, 255, 0.14);
  overflow: hidden;
  transform-style: preserve-3d;
}

#about .about-holo-card::before {
  content: "";
  position: absolute;
  left: -20%;
  top: -130%;
  width: 140%;
  height: 42%;
  z-index: 5;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(183, 255, 0, 0.08),
    rgba(183, 255, 0, 0.55),
    rgba(0, 245, 255, 0.55),
    transparent
  );
  filter: blur(1px);
  opacity: 0;
  pointer-events: none;
}

#about.about-holo-live .about-holo-card::before {
  animation: aboutHoloScan 1.25s ease-out 0.25s 1 forwards;
}

#about .about-holo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.1;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.04) 0px,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 2px,
      transparent 7px
    );
  mix-blend-mode: screen;
}

#about .holo-card-inner {
  position: relative;
  z-index: 2;
  min-height: 516px;
  border-radius: 32px;
  padding: clamp(26px, 4vw, 44px);
  background:
    radial-gradient(circle at 20% 18%, rgba(183, 255, 0, 0.16), transparent 32%),
    radial-gradient(circle at 80% 78%, rgba(0, 245, 255, 0.16), transparent 35%),
    linear-gradient(135deg, rgba(5, 5, 5, 0.95), rgba(7, 18, 14, 0.96));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#about .holo-card-inner::before,
#about .holo-card-inner::after {
  content: "";
  position: absolute;
  width: 74px;
  height: 74px;
  pointer-events: none;
}

#about .holo-card-inner::before {
  top: 22px;
  left: 22px;
  border-top: 2px solid rgba(183, 255, 0, 0.75);
  border-left: 2px solid rgba(183, 255, 0, 0.75);
}

#about .holo-card-inner::after {
  right: 22px;
  bottom: 22px;
  border-right: 2px solid rgba(0, 245, 255, 0.75);
  border-bottom: 2px solid rgba(0, 245, 255, 0.75);
}

#about .holo-card-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--neon-lime);
  border: 1px solid rgba(183, 255, 0, 0.22);
  background: rgba(183, 255, 0, 0.06);
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

#about .holo-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--neon-lime);
  box-shadow: 0 0 16px rgba(183, 255, 0, 0.9);
}

#about .holo-aw-mark {
  display: grid;
  place-items: center;
  min-height: 210px;
}

#about .holo-aw-mark span {
  font-family: "Michroma", sans-serif;
  font-size: clamp(4.5rem, 9vw, 8rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(90deg, #b7ff00, #35ff72, #00f5ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 22px rgba(183, 255, 0, 0.3),
    0 0 34px rgba(0, 245, 255, 0.22);
}

#about .holo-data-list {
  display: grid;
  gap: 12px;
}

#about .holo-data-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.075);
}

#about .holo-data-row span {
  color: var(--soft-gray);
  font-size: 0.9rem;
}

#about .holo-data-row strong {
  color: var(--white);
  font-size: 0.9rem;
  text-align: right;
}

#about .holo-bars {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

#about .holo-bars span {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(183, 255, 0, 0.85), rgba(0, 245, 255, 0.75), transparent);
  transform-origin: left;
}

#about .holo-bars span:nth-child(2) {
  width: 72%;
}

#about .holo-bars span:nth-child(3) {
  width: 48%;
}

#about .about-holo-content {
  position: relative;
}

#about .about-holo-content h2 {
  margin: 18px 0 20px;
  font-family: "Poppins", sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -1.8px;
  color: var(--white);
}

#about .about-holo-content h2 span {
  display: block;
}

#about .about-holo-content p {
  max-width: 780px;
  color: rgba(235, 235, 235, 0.82);
  font-size: clamp(1rem, 1.25vw, 1.08rem);
  line-height: 1.75;
  margin-bottom: 14px;
}

#about .about-holo-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}

#about .about-holo-chip {
  position: relative;
  overflow: hidden;
  min-height: 62px;
  padding: 18px 20px;
  border-radius: 18px;
  color: var(--white);
  font-weight: 900;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(17, 17, 17, 0.78);
  border: 1px solid rgba(183, 255, 0, 0.15);
  box-shadow:
    0 18px 50px rgba(0, 245, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#about .about-holo-chip::before {
  content: "✦";
  color: var(--neon-lime);
  margin-right: 8px;
}

#about .about-holo-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(183, 255, 0, 0) 32%,
    rgba(183, 255, 0, 0.35) 48%,
    rgba(0, 245, 255, 0.28) 58%,
    transparent 76%
  );
  transform: translateX(-130%);
  opacity: 0;
  pointer-events: none;
}

#about.about-holo-live .about-holo-chip::after {
  animation: aboutChipSweep 0.8s ease-out 1 forwards;
}

#about.about-holo-live .about-holo-chip:nth-child(1)::after {
  animation-delay: 1.2s;
}

#about.about-holo-live .about-holo-chip:nth-child(2)::after {
  animation-delay: 1.32s;
}

#about.about-holo-live .about-holo-chip:nth-child(3)::after {
  animation-delay: 1.44s;
}

#about.about-holo-live .about-holo-chip:nth-child(4)::after {
  animation-delay: 1.56s;
}

@keyframes aboutHoloScan {
  0% {
    top: -130%;
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  72% {
    opacity: 1;
  }

  100% {
    top: 130%;
    opacity: 0;
  }
}

@keyframes aboutChipSweep {
  0% {
    opacity: 0;
    transform: translateX(-130%);
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(130%);
  }
}

@media (max-width: 1024px) {
  #about .about-holo-grid {
    grid-template-columns: 1fr;
  }

  #about .about-holo-card {
    min-height: 460px;
  }

  #about .holo-card-inner {
    min-height: 456px;
  }
}

@media (max-width: 768px) {
  #about.about-holo-section {
    padding: 82px 0;
  }

  #about .about-holo-card {
    min-height: 430px;
    border-radius: 26px;
  }

  #about .holo-card-inner {
    min-height: 426px;
    border-radius: 24px;
  }

  #about .about-holo-content h2 {
    font-size: clamp(2rem, 10vw, 3.2rem);
  }

  #about .about-holo-chips {
    grid-template-columns: 1fr;
  }
}
#about .about-holo-card {
  background:
    linear-gradient(135deg, rgba(183, 255, 0, 0.95), rgba(0, 245, 255, 0.85), rgba(183, 255, 0, 0.18));
}

#about .holo-card-inner {
  background:
    radial-gradient(circle at 18% 16%, rgba(183, 255, 0, 0.18), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(0, 245, 255, 0.18), transparent 34%),
    linear-gradient(rgba(183, 255, 0, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 255, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, rgba(5, 5, 5, 0.96), rgba(5, 18, 14, 0.98));
  background-size:
    auto,
    auto,
    34px 34px,
    34px 34px,
    auto;
}

#about .holo-card-inner::before {
  box-shadow:
    18px 0 0 -16px rgba(183, 255, 0, 0.8),
    0 18px 0 -16px rgba(183, 255, 0, 0.8),
    0 0 22px rgba(183, 255, 0, 0.35);
}

#about .holo-card-inner::after {
  box-shadow:
    -18px 0 0 -16px rgba(0, 245, 255, 0.8),
    0 -18px 0 -16px rgba(0, 245, 255, 0.8),
    0 0 22px rgba(0, 245, 255, 0.35);
}

/* forever scan */
#about.about-holo-live .about-holo-card::before {
  animation: aboutHoloScanForever 2.8s ease-in-out 0.2s infinite;
}

/* extra digital flicker layer */
#about .about-holo-card::after {
  opacity: 0.16;
  animation: holoNoiseFlicker 1.8s steps(2, end) infinite;
}

/* AW mark more holographic */
#about .holo-aw-mark {
  position: relative;
}

#about .holo-aw-mark::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(183, 255, 0, 0.22);
  box-shadow:
    inset 0 0 28px rgba(183, 255, 0, 0.08),
    0 0 38px rgba(0, 245, 255, 0.12);
  animation: holoRingSpin 10s linear infinite;
}

#about .holo-aw-mark::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 245, 255, 0.34);
  animation: holoRingSpinReverse 7s linear infinite;
}

#about .holo-aw-mark span {
  position: relative;
  z-index: 2;
  filter:
    drop-shadow(0 0 14px rgba(183, 255, 0, 0.55))
    drop-shadow(0 0 26px rgba(0, 245, 255, 0.35));
}

/* hologram message lines */
#about .holo-message-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: -6px 0 18px;
}

#about .holo-message-stack span {
  position: relative;
  overflow: hidden;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  color: rgba(230, 255, 246, 0.92);
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  background: rgba(0, 245, 255, 0.055);
  border: 1px solid rgba(0, 245, 255, 0.18);
  box-shadow:
    0 0 18px rgba(0, 245, 255, 0.08),
    inset 0 0 18px rgba(183, 255, 0, 0.04);
}

#about .holo-message-stack span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(183, 255, 0, 0.28), transparent);
  transform: translateX(-120%);
}

#about.about-holo-live .holo-message-stack span::before {
  animation: holoTextSweep 1.1s ease forwards;
}

#about.about-holo-live .holo-message-stack span:nth-child(1)::before {
  animation-delay: 1.45s;
}

#about.about-holo-live .holo-message-stack span:nth-child(2)::before {
  animation-delay: 1.6s;
}

#about.about-holo-live .holo-message-stack span:nth-child(3)::before {
  animation-delay: 1.75s;
}

/* data rows become more techy */
#about .holo-data-row {
  background:
    linear-gradient(90deg, rgba(183, 255, 0, 0.06), rgba(0, 245, 255, 0.035)),
    rgba(255, 255, 255, 0.035);
  border-color: rgba(183, 255, 0, 0.14);
  box-shadow:
    inset 0 0 18px rgba(0, 245, 255, 0.035),
    0 0 18px rgba(183, 255, 0, 0.035);
}

#about .holo-data-row strong {
  color: #eafff5;
  text-shadow: 0 0 12px rgba(183, 255, 0, 0.24);
}

@keyframes aboutHoloScanForever {
  0% {
    top: -135%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  48% {
    opacity: 1;
  }

  62% {
    top: 135%;
    opacity: 0;
  }

  100% {
    top: 135%;
    opacity: 0;
  }
}

@keyframes holoNoiseFlicker {
  0%, 100% {
    opacity: 0.11;
  }

  50% {
    opacity: 0.22;
  }
}

@keyframes holoRingSpin {
  from {
    transform: rotate(0deg) scale(1);
  }

  to {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes holoRingSpinReverse {
  from {
    transform: rotate(360deg) scale(1);
  }

  to {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes holoTextSweep {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(120%);
  }
}
/* =========================================================
   ABOUT CARD — SELF GENERATING TECH HOLOGRAM UPGRADE
   Paste at bottom so it overrides older About card rules
========================================================= */

#about .about-holo-card {
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(183, 255, 0, 0.95), rgba(0, 245, 255, 0.85), rgba(183, 255, 0, 0.16));
}

#about .holo-build-lines {
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: 34px;
  pointer-events: none;
}

#about .holo-build-lines .holo-line {
  position: absolute;
  display: block;
  background: linear-gradient(90deg, #b7ff00, #00f5ff);
  box-shadow:
    0 0 18px rgba(183, 255, 0, 0.75),
    0 0 28px rgba(0, 245, 255, 0.45);
}

#about .holo-line-top {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform-origin: left center;
}

#about .holo-line-right {
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  transform-origin: top center;
}

#about .holo-line-bottom {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  transform-origin: right center;
}

#about .holo-line-left {
  bottom: 0;
  left: 0;
  width: 2px;
  height: 100%;
  transform-origin: bottom center;
}

#about .holo-card-inner {
  background:
    radial-gradient(circle at 18% 16%, rgba(183, 255, 0, 0.2), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(0, 245, 255, 0.18), transparent 34%),
    linear-gradient(rgba(183, 255, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 255, 0.04) 1px, transparent 1px),
    linear-gradient(135deg, rgba(5, 5, 5, 0.96), rgba(5, 18, 14, 0.98));
  background-size:
    auto,
    auto,
    34px 34px,
    34px 34px,
    auto;
}

/* Forever scan starts after card generates */
#about.about-holo-live .about-holo-card::before {
  animation: aboutHoloScanForever 2.9s ease-in-out 1.3s infinite;
}

#about .about-holo-card::after {
  opacity: 0.16;
  animation: holoNoiseFlicker 1.8s steps(2, end) infinite;
}

/* More techy AW center */
#about .holo-aw-mark {
  position: relative;
}

#about .holo-aw-mark::before {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  border: 1px solid rgba(183, 255, 0, 0.24);
  box-shadow:
    inset 0 0 30px rgba(183, 255, 0, 0.08),
    0 0 42px rgba(0, 245, 255, 0.13);
  animation: holoRingSpin 10s linear infinite;
}

#about .holo-aw-mark::after {
  content: "";
  position: absolute;
  width: 195px;
  height: 195px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 245, 255, 0.38);
  animation: holoRingSpinReverse 7s linear infinite;
}

#about .holo-aw-mark span {
  position: relative;
  z-index: 2;
  filter:
    drop-shadow(0 0 14px rgba(183, 255, 0, 0.62))
    drop-shadow(0 0 28px rgba(0, 245, 255, 0.38));
}

/* Terminal shuffle text */
#about .holo-message-stack {
  display: grid;
  gap: 9px;
  margin: -4px 0 18px;
}

#about .holo-message-stack span {
  position: relative;
  width: fit-content;
  min-height: 30px;
  padding: 7px 14px;
  border-radius: 999px;
  color: rgba(230, 255, 246, 0.95);
  font-family: "Courier New", monospace;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  background: rgba(0, 245, 255, 0.055);
  border: 1px solid rgba(0, 245, 255, 0.2);
  box-shadow:
    0 0 18px rgba(0, 245, 255, 0.08),
    inset 0 0 18px rgba(183, 255, 0, 0.04);
  overflow: hidden;
}

#about .holo-message-stack span::after {
  content: "_";
  margin-left: 4px;
  color: var(--neon-lime);
  animation: terminalCursorBlink 0.75s steps(2, end) infinite;
}

#about .holo-message-stack span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(183, 255, 0, 0.28), transparent);
  transform: translateX(-120%);
}

#about.about-holo-live .holo-message-stack span::before {
  animation: holoTextSweep 1.05s ease forwards;
}

#about.about-holo-live .holo-message-stack span:nth-child(1)::before {
  animation-delay: 1.35s;
}

#about.about-holo-live .holo-message-stack span:nth-child(2)::before {
  animation-delay: 1.52s;
}

#about.about-holo-live .holo-message-stack span:nth-child(3)::before {
  animation-delay: 1.69s;
}

/* Stats become more hologram-like */
#about .holo-data-row {
  background:
    linear-gradient(90deg, rgba(183, 255, 0, 0.07), rgba(0, 245, 255, 0.04)),
    rgba(255, 255, 255, 0.035);
  border-color: rgba(183, 255, 0, 0.14);
  box-shadow:
    inset 0 0 18px rgba(0, 245, 255, 0.04),
    0 0 18px rgba(183, 255, 0, 0.04);
}

#about .holo-data-row strong {
  color: #eafff5;
  text-shadow: 0 0 12px rgba(183, 255, 0, 0.25);
}

@keyframes aboutHoloScanForever {
  0% {
    top: -135%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  48% {
    opacity: 1;
  }

  62% {
    top: 135%;
    opacity: 0;
  }

  100% {
    top: 135%;
    opacity: 0;
  }
}

@keyframes holoNoiseFlicker {
  0%, 100% {
    opacity: 0.1;
  }

  50% {
    opacity: 0.22;
  }
}

@keyframes holoRingSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes holoRingSpinReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes holoTextSweep {
  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(120%);
  }
}

@keyframes terminalCursorBlink {
  0%, 45% {
    opacity: 1;
  }

  46%, 100% {
    opacity: 0;
  }
}
/* =========================================================
   ABOUT — MECHANICAL GEAR TO BLUEPRINT TO HOLOGRAM CARD
   Paste at bottom to override previous About card styling
========================================================= */

/* Card starts like blueprint, not full-color */
#about .about-holo-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(0, 245, 255, 0.45), rgba(183, 255, 0, 0.16), rgba(0, 245, 255, 0.32));
  box-shadow:
    0 0 32px rgba(0, 245, 255, 0.18),
    0 0 42px rgba(183, 255, 0, 0.08);
  transition:
    background 0.9s ease,
    box-shadow 0.9s ease,
    border-color 0.9s ease;
}

/* Full color turns on after mechanical generation */
#about.about-color-on .about-holo-card {
  background:
    linear-gradient(135deg, rgba(183, 255, 0, 0.95), rgba(0, 245, 255, 0.86), rgba(183, 255, 0, 0.2));
  box-shadow:
    0 0 52px rgba(183, 255, 0, 0.2),
    0 0 78px rgba(0, 245, 255, 0.16);
}

/* Blueprint inner body */
#about .holo-card-inner {
  background:
    linear-gradient(rgba(0, 245, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 255, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 18% 16%, rgba(0, 245, 255, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(2, 10, 12, 0.98), rgba(3, 18, 20, 0.96));
  background-size:
    30px 30px,
    30px 30px,
    auto,
    auto;
  transition: background 0.9s ease;
}

/* Color fills after blueprint */
#about.about-color-on .holo-card-inner {
  background:
    radial-gradient(circle at 18% 16%, rgba(183, 255, 0, 0.2), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(0, 245, 255, 0.18), transparent 34%),
    linear-gradient(rgba(183, 255, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 255, 0.04) 1px, transparent 1px),
    linear-gradient(135deg, rgba(5, 5, 5, 0.96), rgba(5, 18, 14, 0.98));
  background-size:
    auto,
    auto,
    34px 34px,
    34px 34px,
    auto;
}

/* Gear core starts first */
#about .holo-gear-core {
  position: absolute;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  pointer-events: none;
}

#about .holo-gear {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.55);
}

/* Complex gear look using conic teeth */

#about .holo-gear-ring {
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 245, 255, 0.5);
  box-shadow:
    inset 0 0 28px rgba(0, 245, 255, 0.08),
    0 0 28px rgba(0, 245, 255, 0.16);
  opacity: 0;
  transform: scale(0.65);
}

/* Blueprint build lines */
#about .holo-build-lines {
  position: absolute;
  inset: 0;
  z-index: 30;
  border-radius: 34px;
  pointer-events: none;
}

#about .holo-build-lines .holo-line {
  position: absolute;
  display: block;
  background: linear-gradient(90deg, rgba(0, 245, 255, 0.95), rgba(183, 255, 0, 0.55));
  box-shadow:
    0 0 18px rgba(0, 245, 255, 0.75),
    0 0 30px rgba(183, 255, 0, 0.22);
}

#about .holo-line-top {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform-origin: left center;
}

#about .holo-line-right {
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  transform-origin: top center;
}

#about .holo-line-bottom {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  transform-origin: right center;
}

#about .holo-line-left {
  bottom: 0;
  left: 0;
  width: 2px;
  height: 100%;
  transform-origin: bottom center;
}

/* Forever scan should start only after color fill */
#about.about-holo-live:not(.about-color-on) .about-holo-card::before {
  animation: none !important;
  opacity: 0 !important;
}

#about.about-color-on .about-holo-card::before {
  animation: aboutHoloScanForever 2.9s ease-in-out 0.25s infinite !important;
}

/* AW center rings */
#about .holo-aw-mark {
  position: relative;
}

#about .holo-aw-mark::before {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  border: 1px solid rgba(183, 255, 0, 0.24);
  box-shadow:
    inset 0 0 30px rgba(183, 255, 0, 0.08),
    0 0 42px rgba(0, 245, 255, 0.13);
  animation: holoRingSpin 10s linear infinite;
}

#about .holo-aw-mark::after {
  content: "";
  position: absolute;
  width: 195px;
  height: 195px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 245, 255, 0.38);
  animation: holoRingSpinReverse 7s linear infinite;
}

#about .holo-aw-mark span {
  position: relative;
  z-index: 2;
  filter:
    drop-shadow(0 0 14px rgba(183, 255, 0, 0.62))
    drop-shadow(0 0 28px rgba(0, 245, 255, 0.38));
}

/* Terminal typography for left and right text */
#about .terminal-hover {
  position: relative;
  display: inline-block;
  cursor: default;
}

#about .terminal-hover.is-scrambling::after {
  content: "_";
  margin-left: 4px;
  color: var(--neon-lime);
  animation: terminalCursorBlink 0.7s steps(2, end) infinite;
}

/* Right heading line structure */
#about .about-terminal-title {
  margin: 18px 0 20px;
  font-family: "Poppins", sans-serif;
  font-size: clamp(2rem, 3.8vw, 3.65rem);
  line-height: 1.05;
  letter-spacing: -1.4px;
  color: var(--white);
}

#about .about-terminal-title .terminal-line {
  display: block;
  width: fit-content;
}

/* Left terminal message stack */
#about .holo-message-stack {
  display: grid;
  gap: 9px;
  margin: -4px 0 18px;
}

#about .holo-message-stack span {
  position: relative;
  width: fit-content;
  min-height: 30px;
  padding: 7px 14px;
  border-radius: 999px;
  color: rgba(230, 255, 246, 0.95);
  font-family: "Courier New", monospace;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  background: rgba(0, 245, 255, 0.055);
  border: 1px solid rgba(0, 245, 255, 0.2);
  box-shadow:
    0 0 18px rgba(0, 245, 255, 0.08),
    inset 0 0 18px rgba(183, 255, 0, 0.04);
  overflow: hidden;
}

/* Data rows blueprint-to-holo feel */
#about .holo-data-row {
  background:
    linear-gradient(90deg, rgba(183, 255, 0, 0.07), rgba(0, 245, 255, 0.04)),
    rgba(255, 255, 255, 0.035);
  border-color: rgba(183, 255, 0, 0.14);
  box-shadow:
    inset 0 0 18px rgba(0, 245, 255, 0.04),
    0 0 18px rgba(183, 255, 0, 0.04);
}

#about .holo-data-row strong {
  color: #eafff5;
  text-shadow: 0 0 12px rgba(183, 255, 0, 0.25);
}

@keyframes aboutHoloScanForever {
  0% {
    top: -135%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  48% {
    opacity: 1;
  }

  62% {
    top: 135%;
    opacity: 0;
  }

  100% {
    top: 135%;
    opacity: 0;
  }
}

@keyframes holoRingSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes holoRingSpinReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes terminalCursorBlink {
  0%, 45% {
    opacity: 1;
  }

  46%, 100% {
    opacity: 0;
  }
}
/* =========================================================
   AD SERVICES — REDUCE STACK CARD HEIGHT
   Only fixes card fitting issue
========================================================= */

#ad-services.ad-services-stackfx .container {
  padding-top: 92px;
  padding-bottom: 36px;
}

#ad-services.ad-services-stackfx .section-head {
  margin-bottom: 22px;
}

#ad-services.ad-services-stackfx .services-rows {
  height: 315px;
}

#ad-services.ad-services-stackfx .service-row {
  height: 295px;
  min-height: 295px;
  padding: clamp(22px, 3vw, 38px);
  border-radius: 28px;
}

#ad-services.ad-services-stackfx .service-icon {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  margin-bottom: 14px;
}

#ad-services.ad-services-stackfx .service-row-num {
  font-size: clamp(3.2rem, 7vw, 6.2rem);
}

#ad-services.ad-services-stackfx .service-row-text h3 {
  font-size: clamp(1.55rem, 2.8vw, 2.75rem);
  margin-bottom: 12px;
}

#ad-services.ad-services-stackfx .service-row-text p {
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.5;
}
/* =========================================================
   ABOUT — MORE COMPLEX MECHANICAL GEARS
   Only upgrades gear visuals
========================================================= */

#about .holo-gear-main,
#about .holo-gear-small,
#about .holo-gear-ring {
  overflow: visible;
}

/* Main gear: teeth + inner rings + spokes */
#about .holo-gear-main {
  width: 178px;
  height: 178px;
  background:
    radial-gradient(circle, transparent 0 18%, rgba(0, 245, 255, 0.95) 19% 22%, transparent 23% 31%, rgba(183, 255, 0, 0.5) 32% 36%, transparent 37%),
    repeating-conic-gradient(
      from 4deg,
      rgba(0, 245, 255, 1) 0deg 5deg,
      transparent 5deg 9deg,
      rgba(183, 255, 0, 0.85) 9deg 12deg,
      transparent 12deg 18deg
    );
  -webkit-mask:
    radial-gradient(circle, transparent 0 24%, #000 25% 34%, transparent 35% 40%, #000 41% 68%, transparent 69%);
  mask:
    radial-gradient(circle, transparent 0 24%, #000 25% 34%, transparent 35% 40%, #000 41% 68%, transparent 69%);
  filter:
    drop-shadow(0 0 18px rgba(0, 245, 255, 0.9))
    drop-shadow(0 0 34px rgba(183, 255, 0, 0.42));
}

#about .holo-gear-main::before {
  content: "";
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 245, 255, 0.45);
  box-shadow:
    inset 0 0 26px rgba(0, 245, 255, 0.08),
    0 0 28px rgba(0, 245, 255, 0.18);
  animation: holoRingSpinReverse 5s linear infinite;
}

#about .holo-gear-main::after {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(183, 255, 0, 0.9) 0deg 7deg,
      transparent 7deg 22deg
    );
  -webkit-mask: radial-gradient(circle, transparent 0 36%, #000 37% 55%, transparent 56%);
  mask: radial-gradient(circle, transparent 0 36%, #000 37% 55%, transparent 56%);
  filter: drop-shadow(0 0 12px rgba(183, 255, 0, 0.7));
}

/* Small gear: more teeth + counter-mechanical feel */
#about .holo-gear-small {
  width: 86px;
  height: 86px;
  transform: translate(82px, -68px) scale(0.55);
  background:
    radial-gradient(circle, transparent 0 20%, rgba(183, 255, 0, 0.95) 21% 26%, transparent 27% 38%),
    repeating-conic-gradient(
      from 0deg,
      rgba(183, 255, 0, 1) 0deg 8deg,
      transparent 8deg 14deg,
      rgba(0, 245, 255, 0.85) 14deg 18deg,
      transparent 18deg 25deg
    );
  -webkit-mask:
    radial-gradient(circle, transparent 0 26%, #000 27% 67%, transparent 68%);
  mask:
    radial-gradient(circle, transparent 0 26%, #000 27% 67%, transparent 68%);
}

#about .holo-gear-small::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(183, 255, 0, 0.38);
  box-shadow: 0 0 18px rgba(183, 255, 0, 0.18);
}

#about .holo-gear-small::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: rgba(0, 245, 255, 0.85);
  box-shadow: 0 0 16px rgba(0, 245, 255, 0.75);
}

/* Outer ring: blueprint dial details */
#about .holo-gear-ring {
  width: 250px;
  height: 250px;
  border: 1px dashed rgba(0, 245, 255, 0.6);
}

#about .holo-gear-ring::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px solid rgba(183, 255, 0, 0.24);
}

#about .holo-gear-ring::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(0, 245, 255, 0.7) 0deg 2deg,
      transparent 2deg 12deg
    );
  -webkit-mask: radial-gradient(circle, transparent 0 82%, #000 83% 86%, transparent 87%);
  mask: radial-gradient(circle, transparent 0 82%, #000 83% 86%, transparent 87%);
  opacity: 0.9;
}
/* =========================================================
   TRUSTED BY — 10 LOGO ONE ROW GLITCH MARQUEE
   Only targets #partners
========================================================= */

#partners.trusted-marquee-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  isolation: isolate;
}

#partners.trusted-marquee-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 16% 30%, rgba(183, 255, 0, 0.13), transparent 34%),
    radial-gradient(circle at 84% 70%, rgba(0, 245, 255, 0.12), transparent 36%);
  pointer-events: none;
}

#partners.trusted-marquee-section .container {
  position: relative;
  z-index: 2;
}

#partners .trusted-marquee-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 28px;
  overflow: hidden;
}

#partners .trusted-marquee-wrap::before,
#partners .trusted-marquee-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  width: 15%;
  height: 100%;
  z-index: 8;
  pointer-events: none;
}

#partners .trusted-marquee-wrap::before {
  left: 0;
  background: linear-gradient(90deg, #050505, rgba(5, 5, 5, 0.72), transparent);
}

#partners .trusted-marquee-wrap::after {
  right: 0;
  background: linear-gradient(270deg, #050505, rgba(5, 5, 5, 0.72), transparent);
}

#partners .trusted-marquee-row {
  width: 100%;
  overflow: hidden;
  padding: 10px 0;
}

#partners .trusted-marquee-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  will-change: transform;
  animation: trustedMoveLeft10 42s linear infinite;
}

/* hover anywhere on marquee = pause */
#partners .trusted-marquee-wrap:hover .trusted-marquee-track {
  animation-play-state: paused;
}

#partners .trusted-logo-card {
  position: relative;
  flex: 0 0 210px;
  height: 116px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow: hidden;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(17, 17, 17, 0.78);

  border: 1px solid rgba(183, 255, 0, 0.14);

  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(183, 255, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transform: translateZ(0);
  animation: trustedCardGlitch10 7.2s steps(1, end) infinite;
}

/* different glitch timing for natural random feel */
#partners .trusted-logo-card:nth-child(2n) {
  animation-delay: 1.1s;
}

#partners .trusted-logo-card:nth-child(3n) {
  animation-delay: 2.3s;
}

#partners .trusted-logo-card:nth-child(4n) {
  animation-delay: 3.2s;
}

#partners .trusted-logo-card:nth-child(5n) {
  animation-delay: 4.4s;
}

#partners .trusted-logo-card:nth-child(7n) {
  animation-delay: 5.3s;
}

#partners .trusted-logo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(183, 255, 0, 0.2), rgba(0, 245, 255, 0.18), transparent);
  transform: translateX(-130%);
  opacity: 0;
  pointer-events: none;
}

#partners .trusted-logo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.035) 0px,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 2px,
      transparent 6px
    );
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

#partners .trusted-logo-card:hover {
  border-color: rgba(183, 255, 0, 0.45);
  box-shadow:
    0 0 34px rgba(183, 255, 0, 0.22),
    0 0 42px rgba(0, 245, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#partners .trusted-logo-card:hover::before {
  animation: trustedSweep10 0.7s ease forwards;
  opacity: 1;
}

#partners .trusted-logo-card:hover::after {
  opacity: 0.14;
}

#partners .trusted-logo-card img {
  max-width: 150px;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) brightness(1.6) contrast(1.08) opacity(0.78);
  transition: transform 0.35s ease, filter 0.35s ease;
}

#partners .trusted-logo-card:hover img {
  transform: scale(1.08);
  filter:
    grayscale(0%)
    brightness(1.12)
    contrast(1.08)
    opacity(1)
    drop-shadow(0 0 14px rgba(183, 255, 0, 0.25));
}

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

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

/* occasional card glitch */
@keyframes trustedCardGlitch10 {
  0%, 86%, 100% {
    transform: translate(0, 0) skew(0deg);
    filter: none;
  }

  87% {
    transform: translate(2px, -1px) skew(-1deg);
    filter: hue-rotate(60deg) brightness(1.35);
  }

  88% {
    transform: translate(-3px, 1px) skew(1.4deg);
    filter: hue-rotate(170deg) brightness(1.16);
  }

  89% {
    transform: translate(1px, 0) skew(0deg);
    filter: none;
  }
}

@keyframes trustedSweep10 {
  from {
    transform: translateX(-130%);
  }

  to {
    transform: translateX(130%);
  }
}

@media (max-width: 768px) {
  #partners.trusted-marquee-section {
    padding: 80px 0;
  }

  #partners .trusted-marquee-track {
    gap: 16px;
    animation-duration: 30s;
  }

  #partners .trusted-logo-card {
    flex-basis: 165px;
    height: 96px;
    border-radius: 18px;
    padding: 18px;
  }

  #partners .trusted-logo-card img {
    max-width: 120px;
    max-height: 58px;
  }
}/* =========================================================
   HERO — BRANDS WORD SOFTER LIME TO CYAN GLOW
   Only targets BRANDS text
========================================================= */

.hero-bottom {
  background: linear-gradient(
    90deg,
    #b7ff00 0%,
    #7cff00 32%,
    #35ff72 58%,
    #00f5ff 100%
  ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;

  text-shadow:
    0 0 8px rgba(183, 255, 0, 0.32),
    0 0 16px rgba(124, 255, 0, 0.22),
    0 0 24px rgba(0, 245, 255, 0.2) !important;

  filter: drop-shadow(0 0 10px rgba(0, 245, 255, 0.12));
}

.hero-bottom::after {
  background: linear-gradient(
    90deg,
    #b7ff00 0%,
    #7cff00 32%,
    #35ff72 58%,
    #00f5ff 100%
  ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;

  filter: blur(7px) !important;
  opacity: 0.42 !important;
}
/* =========================================================
   TRUSTED BY — STRONGER MEDIUM GLITCH TIMING
   Only increases logo card glitch effect
========================================================= */

#partners .trusted-logo-card {
  animation: trustedCardGlitch10 4.8s steps(1, end) infinite !important;
}

/* stagger timing so every logo glitches, but not all together */
#partners .trusted-logo-card:nth-child(1n) {
  animation-delay: 0s !important;
}

#partners .trusted-logo-card:nth-child(2n) {
  animation-delay: 0.45s !important;
}

#partners .trusted-logo-card:nth-child(3n) {
  animation-delay: 0.9s !important;
}

#partners .trusted-logo-card:nth-child(4n) {
  animation-delay: 1.35s !important;
}

#partners .trusted-logo-card:nth-child(5n) {
  animation-delay: 1.8s !important;
}

#partners .trusted-logo-card:nth-child(7n) {
  animation-delay: 2.25s !important;
}

/* logo image also glitches slightly */
#partners .trusted-logo-card img {
  animation: trustedLogoImageGlitch10 4.8s steps(1, end) infinite;
}

#partners .trusted-logo-card:nth-child(2n) img {
  animation-delay: 0.45s;
}

#partners .trusted-logo-card:nth-child(3n) img {
  animation-delay: 0.9s;
}

#partners .trusted-logo-card:nth-child(4n) img {
  animation-delay: 1.35s;
}

#partners .trusted-logo-card:nth-child(5n) img {
  animation-delay: 1.8s;
}

#partners .trusted-logo-card:nth-child(7n) img {
  animation-delay: 2.25s;
}

/* stronger card glitch */
@keyframes trustedCardGlitch10 {
  0%, 76%, 100% {
    transform: translate(0, 0) skew(0deg);
    filter: none;
  }

  77% {
    transform: translate(4px, -2px) skew(-1.6deg);
    filter: hue-rotate(70deg) brightness(1.45) contrast(1.15);
  }

  78% {
    transform: translate(-5px, 2px) skew(1.8deg);
    filter: hue-rotate(180deg) brightness(1.25) contrast(1.22);
  }

  79% {
    transform: translate(3px, 1px) skew(-0.8deg);
    filter: hue-rotate(250deg) brightness(1.35);
  }

  80% {
    transform: translate(-2px, -1px) skew(0.8deg);
    filter: hue-rotate(110deg) brightness(1.18);
  }

  81%, 100% {
    transform: translate(0, 0) skew(0deg);
    filter: none;
  }
}

/* separate logo image flicker */
@keyframes trustedLogoImageGlitch10 {
  0%, 76%, 100% {
    transform: scale(1);
    filter: grayscale(100%) brightness(1.6) contrast(1.08) opacity(0.78);
  }

  77% {
    transform: translateX(3px) scale(1.04);
    filter:
      grayscale(20%)
      brightness(1.45)
      contrast(1.3)
      opacity(1)
      drop-shadow(2px 0 rgba(0, 245, 255, 0.55))
      drop-shadow(-2px 0 rgba(183, 255, 0, 0.45));
  }

  78% {
    transform: translateX(-4px) scale(1.02);
    filter:
      grayscale(0%)
      brightness(1.3)
      contrast(1.35)
      opacity(1)
      drop-shadow(-3px 0 rgba(0, 245, 255, 0.45))
      drop-shadow(3px 0 rgba(183, 255, 0, 0.45));
  }

  79% {
    transform: translateY(2px) scale(1.05);
    filter:
      grayscale(0%)
      brightness(1.25)
      contrast(1.2)
      opacity(1)
      drop-shadow(0 0 14px rgba(183, 255, 0, 0.35));
  }

  80%, 100% {
    transform: scale(1);
    filter: grayscale(100%) brightness(1.6) contrast(1.08) opacity(0.78);
  }
}

/* keep hover clean and premium */
#partners .trusted-logo-card:hover {
  animation-play-state: paused !important;
}

#partners .trusted-logo-card:hover img {
  animation-play-state: paused !important;
}
/* ==================================================
   HOME RIGHT LOGO — STRONG CODEPEN-STYLE GLITCH
   Clean version. Only affects right-side home logo.
================================================== */
/* ==================================================
   HOME RIGHT LOGO — FIXED STRONG GLITCH
   Only affects right-side hero logo
   Important fix: no opacity/transform !important
================================================== */

#home .hero-logo-stage {
  position: relative !important;
  z-index: 3 !important;
  isolation: isolate !important;
  width: min(760px, 110%) !important;
  padding-top: 150px !important;
}

/* wrapper */
#home .stage-logo-glitch {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  line-height: 0 !important;
  isolation: isolate !important;
  transform: translateZ(0);
  animation: awHeroLogoBoot 0.9s steps(1, end) both;
}

/* reset old stage-logo animation only inside this glitch wrapper */
#home .stage-logo-glitch .stage-logo {
  width: 100% !important;
  max-width: 760px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
  pointer-events: none !important;
  animation: none;
}

/* main logo */
#home .stage-logo-main {
  position: relative !important;
  z-index: 3 !important;
  display: block !important;

  filter:
    drop-shadow(0 26px 30px rgba(0, 0, 0, 0.82))
    drop-shadow(0 0 28px rgba(183, 255, 0, 0.34))
    drop-shadow(0 0 30px rgba(0, 245, 255, 0.24)) !important;

  animation: awHeroMainGlitch 1.25s steps(1, end) infinite !important;
}

/* duplicate layers exactly above main logo */
#home .stage-logo-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  object-fit: contain !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;

  opacity: 0;
  transform: translate3d(0, 0, 0);
  clip-path: inset(0 0 0 0);
  will-change: opacity, transform, clip-path;
}

/* cyan layer */
#home .stage-logo-layer-cyan {
  filter:
    brightness(1.3)
    contrast(1.25)
    drop-shadow(12px 0 rgba(0, 245, 255, 1))
    drop-shadow(0 0 18px rgba(0, 245, 255, 0.85)) !important;

  animation: awHeroCyanGlitch 1.25s steps(1, end) infinite !important;
}

/* lime layer */
#home .stage-logo-layer-lime {
  filter:
    brightness(1.3)
    contrast(1.25)
    drop-shadow(-12px 0 rgba(183, 255, 0, 1))
    drop-shadow(0 0 18px rgba(183, 255, 0, 0.8)) !important;

  animation: awHeroLimeGlitch 1.25s steps(1, end) infinite 0.06s !important;
}

/* keep floating labels above */
#home .hero-image .floating-box {
  z-index: 9 !important;
}

/* first appearance */
@keyframes awHeroLogoBoot {
  0% {
    opacity: 0;
    transform: translate3d(24px, -8px, 0) scale(1.05);
    filter: blur(5px);
  }

  8% {
    opacity: 1;
    transform: translate3d(-24px, 8px, 0) scale(0.98);
    filter: blur(0);
  }

  18% {
    opacity: 0.45;
    transform: translate3d(16px, 0, 0) scale(1.03);
  }

  30% {
    opacity: 1;
    transform: translate3d(-10px, 4px, 0) scale(1);
  }

  45%,
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

/* main logo shakes slightly */
@keyframes awHeroMainGlitch {
  0%, 52%, 100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }

  54% {
    opacity: 0.6;
    transform: translate3d(6px, 0, 0);
    clip-path: inset(8% 0 18% 0);
  }

  56% {
    opacity: 1;
    transform: translate3d(-6px, 2px, 0);
    clip-path: inset(0 0 0 0);
  }

  58% {
    opacity: 0.75;
    transform: translate3d(0, -3px, 0);
    clip-path: inset(20% 0 8% 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
}

/* cyan broken slices */
@keyframes awHeroCyanGlitch {
  0%, 50%, 72%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }

  52% {
    opacity: 1;
    transform: translate3d(30px, -6px, 0);
    clip-path: inset(4% 0 72% 0);
  }

  54% {
    opacity: 0.85;
    transform: translate3d(-24px, 5px, 0);
    clip-path: inset(32% 0 42% 0);
  }

  56% {
    opacity: 1;
    transform: translate3d(22px, 2px, 0);
    clip-path: inset(60% 0 12% 0);
  }

  58% {
    opacity: 0.75;
    transform: translate3d(-14px, -3px, 0);
    clip-path: inset(16% 0 58% 0);
  }

  62% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
}

/* lime broken slices */
@keyframes awHeroLimeGlitch {
  0%, 50%, 72%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }

  52% {
    opacity: 0.95;
    transform: translate3d(-30px, 6px, 0);
    clip-path: inset(72% 0 4% 0);
  }

  54% {
    opacity: 0.75;
    transform: translate3d(24px, -5px, 0);
    clip-path: inset(42% 0 32% 0);
  }

  56% {
    opacity: 0.9;
    transform: translate3d(-22px, -2px, 0);
    clip-path: inset(12% 0 60% 0);
  }

  58% {
    opacity: 0.65;
    transform: translate3d(14px, 3px, 0);
    clip-path: inset(58% 0 16% 0);
  }

  62% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
}

/* mobile reduce movement */
@media (max-width: 768px) {
  #home .hero-logo-stage {
    padding-top: 82px !important;
  }

  #home .stage-logo-layer-cyan {
    filter:
      brightness(1.25)
      contrast(1.15)
      drop-shadow(7px 0 rgba(0, 245, 255, 1)) !important;
  }

  #home .stage-logo-layer-lime {
    filter:
      brightness(1.25)
      contrast(1.15)
      drop-shadow(-7px 0 rgba(183, 255, 0, 1)) !important;
  }
}
/* ==================================================
   FIX — MOVE HOME RIGHT LOGO UP
   Only affects right-side hero logo position
================================================== */
/* ==================================================
   FIX — MOVE HOME RIGHT LOGO UP
   Only affects right-side hero logo position
================================================== */

#home .hero-logo-stage {
  padding-top: 0 !important;
  transform: translate3d(0, -5500px, 0) !important;
}

/* keep logo glitch wrapper stable after moving parent */
#home .stage-logo-glitch {
  margin: 0 auto !important;
}

/* tablet */
@media (max-width: 1024px) {
  #home .hero-logo-stage {
    padding-top: 0 !important;
    transform: translate3d(0, -30px, 0) !important;
  }
}

/* mobile */
@media (max-width: 768px) {
  #home .hero-logo-stage {
    padding-top: 0 !important;
    transform: translate3d(0, 0, 0) !important;
  }
}

/* ==================================================
   HOME RIGHT LOGO — INTRO GLITCH BOOT BEFORE FOREVER GLITCH
   Paste at VERY END of stylespatch.css
================================================== */
/* ==================================================
   FIX — RESTORE HERO FIRST-SCREEN POSITION
   Moves full home hero content up, not navbar
================================================== */

#home .hero-grid {
  transform: translateY(-190px) !important;
}

/* keep right logo aligned after full hero move */
#home .hero-logo-stage {
  padding-top: 120px !important;
  transform: none !important;
}

/* tablet */
@media (max-width: 1024px) {
  #home .hero-grid {
    transform: translateY(-45px) !important;
  }

  #home .hero-logo-stage {
    padding-top: 90px !important;
  }
}

/* mobile: do not pull hero up too much */
@media (max-width: 768px) {
  #home .hero-grid {
    transform: none !important;
  }

  #home .hero-logo-stage {
    padding-top: 82px !important;
    transform: none !important;
  }
}

/* ==================================================
   HERO RIGHT LOGO — OUTLINE SCAN + MULTI GLITCH
   Clean final version — no old conflict
================================================== */

#home .hero-grid {
  transform: none !important;
}

#home .hero-logo-stage {
  position: relative !important;
  z-index: 3 !important;
  width: min(760px, 100%) !important;
  padding-top: 82px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  isolation: isolate !important;
  transform: none !important;
}

#home .aw-hero-logo {
  position: relative !important;
  width: min(720px, 100%) !important;
  line-height: 0 !important;
  isolation: isolate !important;
  contain: layout paint !important;
  transform: translateZ(0) !important;
}

#home .aw-logo {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  backface-visibility: hidden !important;
  transform: translateZ(0);
}

/* outline first */
#home .aw-logo-outline {
  position: relative !important;
  z-index: 1 !important;
  opacity: 0;

  filter:
    brightness(0) invert(1)
    drop-shadow(1px 0 0 rgba(183, 255, 0, 0.9))
    drop-shadow(-1px 0 0 rgba(183, 255, 0, 0.9))
    drop-shadow(0 1px 0 rgba(0, 245, 255, 0.8))
    drop-shadow(0 -1px 0 rgba(0, 245, 255, 0.8));

  animation:
    awOutlineIn 0.45s ease-out forwards,
    awOutlineDim 0.75s ease-out forwards 1.45s;
}

/* color logo revealed by scanner */
#home .aw-logo-color {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  opacity: 1 !important;
  clip-path: inset(0 100% 0 0);

  filter:
    drop-shadow(0 0 20px rgba(183, 255, 0, 0.24))
    drop-shadow(0 0 24px rgba(0, 245, 255, 0.16));

  animation:
    awColorScanReveal 1.08s cubic-bezier(.22, 1, .36, 1) 0.45s forwards,
    awLogoMicroJitter 4.8s steps(1, end) infinite 1.8s;
}

/* scanner */
#home .aw-logo-scan {
  position: absolute !important;
  top: -7% !important;
  bottom: -7% !important;
  left: 0 !important;
  width: 18% !important;
  z-index: 5 !important;
  opacity: 0;
  pointer-events: none !important;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 245, 255, 0.3),
    rgba(183, 255, 0, 0.95),
    rgba(0, 245, 255, 0.28),
    transparent
  );

  box-shadow:
    0 0 18px rgba(183, 255, 0, 0.42),
    0 0 26px rgba(0, 245, 255, 0.3);

  transform: translate3d(-145%, 0, 0) skewX(-14deg);
  animation: awScannerPass 1.08s cubic-bezier(.22, 1, .36, 1) 0.45s forwards;
}

/* glitch layers */
#home .aw-logo-glitch {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  opacity: 0;
  mix-blend-mode: screen !important;
  will-change: transform, opacity, clip-path;
}

#home .aw-logo-glitch-cyan {
  filter:
    brightness(1.15)
    drop-shadow(7px 0 rgba(0, 245, 255, 0.95))
    drop-shadow(0 0 12px rgba(0, 245, 255, 0.55));

  animation: awMultiGlitchCyan 4.2s steps(1, end) infinite 1.85s;
}

#home .aw-logo-glitch-lime {
  filter:
    brightness(1.12)
    drop-shadow(-7px 0 rgba(183, 255, 0, 0.95))
    drop-shadow(0 0 12px rgba(183, 255, 0, 0.55));

  animation: awMultiGlitchLime 5s steps(1, end) infinite 2.05s;
}

@keyframes awOutlineIn {
  0% {
    opacity: 0;
    transform: scale(0.985) translateZ(0);
  }

  100% {
    opacity: 0.9;
    transform: scale(1) translateZ(0);
  }
}

@keyframes awOutlineDim {
  to {
    opacity: 0.18;
  }
}

@keyframes awColorScanReveal {
  0% {
    clip-path: inset(0 100% 0 0);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes awScannerPass {
  0% {
    opacity: 0;
    transform: translate3d(-145%, 0, 0) skewX(-14deg);
  }

  10% {
    opacity: 1;
  }

  86% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(680%, 0, 0) skewX(-14deg);
  }
}

@keyframes awLogoMicroJitter {
  0%, 18%, 21%, 42%, 45%, 66%, 69%, 100% {
    transform: translate3d(0, 0, 0);
  }

  19% {
    transform: translate3d(2px, 0, 0);
  }

  20% {
    transform: translate3d(-2px, 1px, 0);
  }

  43% {
    transform: translate3d(-3px, 0, 0);
  }

  44% {
    transform: translate3d(2px, -1px, 0);
  }

  67% {
    transform: translate3d(2px, 1px, 0);
  }

  68% {
    transform: translate3d(-2px, 0, 0);
  }
}

@keyframes awMultiGlitchCyan {
  0%, 15%, 18%, 36%, 39%, 57%, 60%, 78%, 81%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }

  16% {
    opacity: 0.85;
    transform: translate3d(-9px, -1px, 0);
    clip-path: inset(8% 0 74% 0);
  }

  17% {
    opacity: 0.55;
    transform: translate3d(6px, 1px, 0);
    clip-path: inset(38% 0 36% 0);
  }

  37% {
    opacity: 0.75;
    transform: translate3d(7px, 0, 0);
    clip-path: inset(62% 0 14% 0);
  }

  38% {
    opacity: 0.42;
    transform: translate3d(-5px, -1px, 0);
    clip-path: inset(24% 0 52% 0);
  }

  58% {
    opacity: 0.8;
    transform: translate3d(-8px, 1px, 0);
    clip-path: inset(72% 0 8% 0);
  }

  59% {
    opacity: 0.5;
    transform: translate3d(5px, 0, 0);
    clip-path: inset(12% 0 62% 0);
  }

  79% {
    opacity: 0.7;
    transform: translate3d(6px, -1px, 0);
    clip-path: inset(46% 0 28% 0);
  }

  80% {
    opacity: 0.4;
    transform: translate3d(-4px, 1px, 0);
    clip-path: inset(18% 0 58% 0);
  }
}

@keyframes awMultiGlitchLime {
  0%, 20%, 23%, 44%, 47%, 63%, 66%, 84%, 87%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }

  21% {
    opacity: 0.82;
    transform: translate3d(9px, 1px, 0);
    clip-path: inset(20% 0 58% 0);
  }

  22% {
    opacity: 0.48;
    transform: translate3d(-6px, 0, 0);
    clip-path: inset(70% 0 8% 0);
  }

  45% {
    opacity: 0.78;
    transform: translate3d(-8px, -1px, 0);
    clip-path: inset(6% 0 78% 0);
  }

  46% {
    opacity: 0.44;
    transform: translate3d(5px, 1px, 0);
    clip-path: inset(42% 0 34% 0);
  }

  64% {
    opacity: 0.7;
    transform: translate3d(7px, -1px, 0);
    clip-path: inset(54% 0 18% 0);
  }

  65% {
    opacity: 0.42;
    transform: translate3d(-5px, 0, 0);
    clip-path: inset(14% 0 64% 0);
  }

  85% {
    opacity: 0.74;
    transform: translate3d(-7px, 1px, 0);
    clip-path: inset(32% 0 42% 0);
  }

  86% {
    opacity: 0.4;
    transform: translate3d(4px, -1px, 0);
    clip-path: inset(68% 0 10% 0);
  }
}

@media (max-width: 1024px) {
  #home .hero-logo-stage {
    padding-top: 58px !important;
  }

  #home .aw-hero-logo {
    width: min(620px, 100%) !important;
  }
}

@media (max-width: 768px) {
  #home .hero-logo-stage {
    padding-top: 20px !important;
  }

  #home .aw-logo-scan {
    width: 22% !important;
  }

  #home .aw-logo-glitch-cyan {
    animation-duration: 5.2s;
  }

  #home .aw-logo-glitch-lime {
    animation-duration: 6s;
  }
}
/* ==================================================
   HERO RIGHT LOGO — GSAP CONTROL BASE
   Paste at VERY END of stylespatch.css
================================================== */

#home .hero-grid {
  transform: none !important;
}

#home .hero-logo-stage {
  position: relative !important;
  z-index: 3 !important;
  width: min(760px, 100%) !important;
  padding-top: 82px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  isolation: isolate !important;
  transform: none !important;
}

#home .aw-hero-logo {
  position: relative !important;
  width: min(720px, 100%) !important;
  line-height: 0 !important;
  isolation: isolate !important;
  contain: layout paint !important;
  transform: translateZ(0) !important;
  overflow: visible !important;
}

#home .aw-logo {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  backface-visibility: hidden !important;
  animation: none !important;
}

#home .aw-logo-outline {
  position: relative !important;
  z-index: 1 !important;
  opacity: 0;
  filter:
    brightness(0) invert(1)
    drop-shadow(1px 0 0 rgba(183, 255, 0, 0.95))
    drop-shadow(-1px 0 0 rgba(183, 255, 0, 0.95))
    drop-shadow(0 1px 0 rgba(0, 245, 255, 0.85))
    drop-shadow(0 -1px 0 rgba(0, 245, 255, 0.85)) !important;
}

#home .aw-logo-color {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  filter:
    drop-shadow(0 0 22px rgba(183, 255, 0, 0.25))
    drop-shadow(0 0 26px rgba(0, 245, 255, 0.18)) !important;
}

#home .aw-logo-glitch {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  opacity: 0;
  mix-blend-mode: screen !important;
  animation: none !important;
  will-change: transform, opacity, clip-path;
}

#home .aw-logo-glitch-cyan {
  filter:
    brightness(1.2)
    drop-shadow(8px 0 rgba(0, 245, 255, 0.95))
    drop-shadow(0 0 14px rgba(0, 245, 255, 0.55)) !important;
}

#home .aw-logo-glitch-lime {
  filter:
    brightness(1.16)
    drop-shadow(-8px 0 rgba(183, 255, 0, 0.95))
    drop-shadow(0 0 14px rgba(183, 255, 0, 0.55)) !important;
}

#home .aw-logo-scan {
  position: absolute !important;
  top: -8% !important;
  bottom: -8% !important;
  left: 0 !important;
  width: 18% !important;
  z-index: 7 !important;
  opacity: 0;
  pointer-events: none !important;
  animation: none !important;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 245, 255, 0.28),
    rgba(183, 255, 0, 1),
    rgba(0, 245, 255, 0.28),
    transparent
  );

  box-shadow:
    0 0 20px rgba(183, 255, 0, 0.55),
    0 0 34px rgba(0, 245, 255, 0.38);

  transform: translate3d(-160%, 0, 0) skewX(-14deg);
}

@media (max-width: 768px) {
  #home .hero-logo-stage {
    padding-top: 24px !important;
  }

  #home .aw-logo-scan {
    width: 24% !important;
  }
}
/* ==================================================
   FINAL HERO LANDING POSITION FIX
   Move hero content up + make right animated logo bigger
   Paste at VERY END of stylespatch.css
================================================== */

/* move full hero content up like your reference */
#home .hero-grid {
  transform: translateY(-165px) !important;
  align-items: center !important;
}

/* right side logo area */
#home .hero-logo-stage {
  position: relative !important;
  z-index: 3 !important;

  width: min(900px, 122%) !important;
  padding-top: 0 !important;

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

  transform: translate3d(0, 35px, 0) !important;
}

/* make animated Addswala logo bigger */
#home .aw-hero-logo {
  width: min(860px, 100%) !important;
  max-width: 860px !important;
}

/* keep performance chip above the logo, not too high */
#home .box-one {
  top: 96px !important;
  left: 10% !important;
}

/* keep premium websites chip controlled */
#home .box-two {
  bottom: 120px !important;
  right: 5% !important;
}

/* tablet */
@media (max-width: 1024px) {
  #home .hero-grid {
    transform: translateY(-70px) !important;
  }

  #home .hero-logo-stage {
    width: min(680px, 100%) !important;
    transform: translate3d(0, 20px, 0) !important;
  }

  #home .aw-hero-logo {
    width: min(650px, 100%) !important;
  }
}

/* mobile */
@media (max-width: 768px) {
  #home .hero-grid {
    transform: none !important;
  }

  #home .hero-logo-stage {
    width: 100% !important;
    padding-top: 20px !important;
    transform: none !important;
  }

  #home .aw-hero-logo {
    width: 100% !important;
  }
}
/* ==================================================
   FIX — REDUCE EMPTY SPACE AFTER PREMIUM WEBSITES
   Only affects home hero bottom spacing
=======================================




/* ==================================================
   FINAL HERO FIX — KEEP TOP POSITION + REDUCE BOTTOM GAP
   Only targets home hero layout
================================================== */

#home.hero {
  min-height: 100vh !important;
  height: auto !important;
  padding-top: 125px !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}

/* keep the landing content high like before */
#home .hero-grid {
  transform: translateY(-165px) !important;
  margin-bottom: -150px !important;
  align-items: center !important;
}

/* reduce real empty space without pushing content down */
#home .hero-image,
#home .hero-visual,
#home .hero-showcase {
  min-height: 520px !important;
}

/* keep right animated logo aligned with BRANDS */
#home .hero-logo-stage {
  width: min(900px, 122%) !important;
  padding-top: 0 !important;
  transform: translate3d(0, 35px, 0) !important;
}

#home .aw-hero-logo {
  width: min(860px, 100%) !important;
  max-width: 860px !important;
}

/* floating labels */
#home .box-one {
  top: 96px !important;
  left: 10% !important;
}

#home .box-two {
  bottom: 90px !important;
  right: 5% !important;
}

/* desktop small height screens */
@media (max-height: 760px) and (min-width: 1025px) {
  #home .hero-grid {
    transform: translateY(-135px) !important;
    margin-bottom: -125px !important;
  }

  #home .hero-image,
  #home .hero-visual,
  #home .hero-showcase {
    min-height: 480px !important;
  }
}

/* tablet */
@media (max-width: 1024px) {
  #home.hero {
    min-height: auto !important;
    padding-bottom: 25px !important;
  }

  #home .hero-grid {
    transform: translateY(-70px) !important;
    margin-bottom: -60px !important;
  }

  #home .hero-image,
  #home .hero-visual,
  #home .hero-showcase {
    min-height: 420px !important;
  }

  #home .hero-logo-stage {
    width: min(680px, 100%) !important;
    transform: translate3d(0, 20px, 0) !important;
  }

  #home .aw-hero-logo {
    width: min(650px, 100%) !important;
  }
}

/* mobile */
@media (max-width: 768px) {
  #home.hero {
    min-height: auto !important;
    padding-top: 115px !important;
    padding-bottom: 30px !important;
  }

  #home .hero-grid {
    transform: none !important;
    margin-bottom: 0 !important;
  }

  #home .hero-image,
  #home .hero-visual,
  #home .hero-showcase {
    min-height: 300px !important;
  }

  #home .hero-logo-stage {
    width: 100% !important;
    padding-top: 20px !important;
    transform: none !important;
  }

  #home .aw-hero-logo {
    width: 100% !important;
  }
}
/* =========================================================
   OUR WORK — PIXEL DOWNLOAD + POSTER/VIDEO MARQUEE
   Only targets #showcase
========================================================= */

#showcase.portfolio-marquee-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0 120px;
  isolation: isolate;
}

#showcase.portfolio-marquee-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 24%, rgba(183, 255, 0, 0.13), transparent 34%),
    radial-gradient(circle at 82% 76%, rgba(0, 245, 255, 0.12), transparent 36%);
  pointer-events: none;
}

#showcase .container,
#showcase .portfolio-marquee-area {
  position: relative;
  z-index: 2;
}

#showcase .portfolio-marquee-area {
  display: grid;
  gap: 44px;
  margin-top: 34px;
}

#showcase .portfolio-row-block {
  opacity: 0;
  transform: translateY(36px);
  filter: blur(14px);
  transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
}

#showcase.portfolio-ready .portfolio-row-block {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

#showcase.portfolio-ready .video-row-block {
  transition-delay: 0.14s;
}

#showcase .portfolio-row-head {
  width: min(92%, var(--container));
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

#showcase .portfolio-row-head span {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

#showcase .portfolio-row-head small {
  color: var(--neon-lime);
  border: 1px solid rgba(183, 255, 0, 0.2);
  background: rgba(183, 255, 0, 0.06);
  padding: 7px 12px;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
}

#showcase .portfolio-marquee-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 6px 0 12px;
}

#showcase .portfolio-marquee-wrap::before,
#showcase .portfolio-marquee-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  width: 13%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

#showcase .portfolio-marquee-wrap::before {
  left: 0;
  background: linear-gradient(90deg, #050505, rgba(5, 5, 5, 0.75), transparent);
}

#showcase .portfolio-marquee-wrap::after {
  right: 0;
  background: linear-gradient(270deg, #050505, rgba(5, 5, 5, 0.75), transparent);
}

#showcase .portfolio-marquee-track {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  will-change: transform;
}

#showcase .poster-marquee-track {
  animation: portfolioMoveLeft 48s linear infinite;
}

#showcase .video-marquee-track {
  animation: portfolioMoveRight 66s linear infinite;
}

#showcase .portfolio-marquee-wrap:hover .portfolio-marquee-track {
  animation-play-state: paused;
}

/* Poster cards */
#showcase .portfolio-poster-card {
  position: relative;
  flex: 0 0 230px;
  height: 310px;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(17, 17, 17, 0.78);
  border: 1px solid rgba(183, 255, 0, 0.14);
  box-shadow:
    0 20px 58px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(183, 255, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateZ(0);
}

#showcase .portfolio-poster-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.08) brightness(0.9);
  transition: transform 0.45s ease, filter 0.45s ease;
}

#showcase .portfolio-poster-card::before,
#showcase .portfolio-video-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(90deg, transparent, rgba(183, 255, 0, 0.2), rgba(0, 245, 255, 0.18), transparent);
  transform: translateX(-130%);
  opacity: 0;
  pointer-events: none;
}

#showcase .portfolio-poster-card::after,
#showcase .portfolio-video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.04) 0px,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 2px,
      transparent 6px
    );
  mix-blend-mode: screen;
}

#showcase .portfolio-poster-card:hover,
#showcase .portfolio-video-card:hover {
  border-color: rgba(183, 255, 0, 0.45);
  box-shadow:
    0 0 34px rgba(183, 255, 0, 0.2),
    0 0 44px rgba(0, 245, 255, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#showcase .portfolio-poster-card:hover::before,
#showcase .portfolio-video-card:hover::before {
  animation: portfolioSweep 0.65s ease forwards;
  opacity: 1;
}

#showcase .portfolio-poster-card:hover::after,
#showcase .portfolio-video-card:hover::after {
  opacity: 0.14;
}

#showcase .portfolio-poster-card:hover img {
  transform: scale(1.08);
  filter: saturate(1.1) contrast(1.12) brightness(1);
}

/* Video cards */
#showcase .portfolio-video-card {
  position: relative;
  flex: 0 0 270px;
  height: 360px;
  border-radius: 26px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(0, 245, 255, 0.14);
  box-shadow:
    0 22px 64px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(0, 245, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateZ(0);
}

#showcase .portfolio-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.88) contrast(1.08) brightness(0.82);
  transition: transform 0.45s ease, filter 0.45s ease;
}

#showcase .portfolio-video-card:hover .portfolio-video {
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.12) brightness(1);
}

#showcase .portfolio-video-card span {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 6;
  padding: 8px 11px;
  border-radius: 999px;
  color: #050505;
  background: var(--gradient-btn);
  font-family: "Montserrat", sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow:
    0 0 22px rgba(183, 255, 0, 0.25),
    0 0 22px rgba(0, 245, 255, 0.18);
}




/* Pixel loader */
#showcase .portfolio-loader {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(0, 245, 255, 0.1), transparent 38%),
    rgba(5, 5, 5, 0.72);
  opacity: 0;
  visibility: hidden;
}

#showcase.is-loading .portfolio-loader {
  opacity: 1;
  visibility: visible;
}

#showcase.portfolio-ready .portfolio-loader {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

#showcase .pixel-loader-box {
  width: min(420px, 86vw);
  padding: 28px;
  border-radius: 0;
  border: 2px solid rgba(183, 255, 0, 0.65);
  background:
    linear-gradient(rgba(0, 245, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183, 255, 0, 0.08) 1px, transparent 1px),
    rgba(5, 5, 5, 0.92);
  background-size: 18px 18px;
  box-shadow:
    0 0 28px rgba(183, 255, 0, 0.18),
    0 0 38px rgba(0, 245, 255, 0.14);
}

#showcase .pixel-loader-text {
  display: block;
  color: var(--neon-lime);
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
  margin-bottom: 18px;
  text-shadow: 0 0 14px rgba(183, 255, 0, 0.42);
}

#showcase .pixel-loader-bar {
  height: 18px;
  padding: 3px;
  border: 1px solid rgba(0, 245, 255, 0.45);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

#showcase .pixel-loader-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background:
    repeating-linear-gradient(
      90deg,
      #b7ff00 0 10px,
      #00f5ff 10px 20px
    );
}

#showcase.is-loading .pixel-loader-bar span {
  animation: pixelDownload 0.9s steps(8, end) forwards;
}

#showcase .pixel-loader-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}

#showcase .pixel-loader-grid i {
  height: 16px;
  background: rgba(183, 255, 0, 0.12);
  box-shadow: 0 0 12px rgba(183, 255, 0, 0.12);
  animation: pixelBlink 0.8s steps(2, end) infinite;
}

#showcase .pixel-loader-grid i:nth-child(2n) {
  background: rgba(0, 245, 255, 0.14);
  animation-delay: 0.15s;
}

#showcase .pixel-loader-grid i:nth-child(3n) {
  animation-delay: 0.28s;
}

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

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

@keyframes portfolioMoveRight {
  from {
    transform: translateX(calc(-50% - 11px));
  }

  to {
    transform: translateX(0);
  }
}

@keyframes portfolioSweep {
  from {
    transform: translateX(-130%);
  }

  to {
    transform: translateX(130%);
  }
}

@keyframes pixelDownload {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes pixelBlink {
  0%, 100% {
    opacity: 0.25;
  }

  50% {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  #showcase.portfolio-marquee-section {
    padding: 82px 0 90px;
  }

  #showcase .portfolio-marquee-area {
    gap: 34px;
  }

  #showcase .portfolio-row-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  #showcase .portfolio-marquee-track {
    gap: 16px;
  }

  #showcase .poster-marquee-track {
    animation-duration: 36s;
  }

  #showcase .video-marquee-track {
    animation-duration: 46s;
  }

  #showcase .portfolio-poster-card {
    flex-basis: 170px;
    height: 235px;
    border-radius: 18px;
  }

  #showcase .portfolio-video-card {
    flex-basis: 200px;
    height: 285px;
    border-radius: 20px;
  }
}
/* =========================================================
   OUR WORK — FINAL BRIGHTNESS FIX
   Removes dark layer but keeps pixel loader visible
========================================================= */

/* keep showcase content above all background effects */
#showcase .portfolio-marquee-area,
#showcase .portfolio-row-block,
#showcase .portfolio-marquee-wrap,
#showcase .portfolio-marquee-track {
  position: relative !important;
  z-index: 10 !important;
}

/* loader should NOT darken the full section */
#showcase .portfolio-loader,
#showcase.is-loading .portfolio-loader,
#showcase.portfolio-marquee-section.is-loading .portfolio-loader {
  background: transparent !important;
  opacity: 1;
  visibility: visible;
  pointer-events: none !important;
}

/* hide loader fully after ready */
#showcase.portfolio-ready .portfolio-loader {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
}

/* only the small pixel box should be visible */
#showcase .pixel-loader-box {
  position: relative !important;
  z-index: 30 !important;
  background:
    linear-gradient(rgba(0, 245, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183, 255, 0, 0.08) 1px, transparent 1px),
    rgba(5, 5, 5, 0.92) !important;
}

/* force rows visible after loader */
#showcase.portfolio-ready .portfolio-row-block {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: none !important;
}

/* make posters naturally bright */
#showcase .portfolio-poster-card img {
  filter: saturate(1.12) contrast(1.06) brightness(1.08) !important;
}

/* remove extra darkness from poster/video cards */
#showcase .portfolio-poster-card,
#showcase .portfolio-video-card {
  background: rgba(8, 8, 8, 0.45) !important;
}

/* video preview should not be too dark */
#showcase .portfolio-video {
  filter: saturate(1.08) contrast(1.04) brightness(1.06) !important;
  opacity: 1 !important;
}

/* reduce side dark fade */
#showcase .portfolio-marquee-wrap::before {
  width: 7% !important;
  background: linear-gradient(90deg, #050505, rgba(5, 5, 5, 0.22), transparent) !important;
}

#showcase .portfolio-marquee-wrap::after {
  width: 7% !important;
  background: linear-gradient(270deg, #050505, rgba(5, 5, 5, 0.22), transparent) !important;
}

/* remove scanner darkness on cards */
#showcase .portfolio-poster-card::after,
#showcase .portfolio-video-card::after {
  opacity: 0 !important;
}

#showcase .portfolio-poster-card:hover::after,
#showcase .portfolio-video-card:hover::after {
  opacity: 0.08 !important;
}
/* =========================================================
   AD GENERATOR — SCHOOL GROWTH COMBO OFFER ANIMATION
   Only affects generated price result
========================================================= */

#ad-generator .result-box {
  position: relative;
  overflow: hidden;
}

#ad-generator #resultAdPackagePrice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

#ad-generator .old-offer-price {
  position: relative;
  display: inline-block;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 900;
  transform-origin: left center;
}

#ad-generator .old-offer-price::after {
  content: "";
  position: absolute;
  left: -6%;
  top: 52%;
  width: 0%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff3131, #b7ff00, #00f5ff);
  box-shadow:
    0 0 14px rgba(255, 49, 49, 0.6),
    0 0 18px rgba(183, 255, 0, 0.35);
  transform: rotate(-7deg);
  transform-origin: left center;
}

#ad-generator .new-offer-price {
  display: inline-block;
  color: #b7ff00;
  font-size: 1.45em;
  font-weight: 1000;
  opacity: 0;
  transform: translateY(14px) scale(0.86);
  text-shadow:
    0 0 14px rgba(183, 255, 0, 0.55),
    0 0 28px rgba(0, 245, 255, 0.28);
}

#ad-generator #resultAdPackagePrice.price-offer-animate .old-offer-price::after {
  animation: cutOldPrice 0.55s ease forwards;
}

#ad-generator #resultAdPackagePrice.price-offer-animate .old-offer-price {
  animation: oldPriceFade 0.65s ease forwards 0.45s;
}

#ad-generator #resultAdPackagePrice.price-offer-animate .new-offer-price {
  animation: newOfferPop 0.7s cubic-bezier(.18, 1.35, .35, 1) forwards 0.62s;
}

#ad-generator .party-particle {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  font-size: 1.25rem;
  opacity: 0;
  transform: translate(0, 0) rotate(0deg) scale(0.4);
  animation: partyBlast 1.35s ease-out forwards;
}

#ad-generator .party-blast-active {
  box-shadow:
    0 0 38px rgba(183, 255, 0, 0.28),
    0 0 52px rgba(0, 245, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

@keyframes cutOldPrice {
  from {
    width: 0%;
  }

  to {
    width: 112%;
  }
}

@keyframes oldPriceFade {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0.45;
    transform: scale(0.96);
  }
}

@keyframes newOfferPop {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.86);
    filter: blur(5px);
  }

  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.12);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes partyBlast {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg) scale(0.4);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1.15);
  }
}
@media (max-width: 768px) {
  #ad-services .service-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    font-size: 18px;
  }

  #ad-services .service-icon svg,
  #ad-services .service-icon i,
  #ad-services .service-icon img {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 768px) {
  #ad-services .service-row-visual,
  #ad-services .service-row-num {
    display: none !important;
  }

  #ad-services .service-row {
    grid-template-columns: 1fr !important;
  }

  #ad-services .service-row-text {
    width: 100% !important;
  }
}
@media (max-width: 768px) {
  #ad-services {
    padding-top: 80px !important;
    padding-bottom: 40px !important;
    min-height: 100svh !important;
  }

  #ad-services .container {
    min-height: calc(100svh - 120px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  #ad-services .section-head {
    margin-bottom: 22px !important;
    padding: 0 6px !important;
  }

  #ad-services .section-head h2 {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.18 !important;
    letter-spacing: -1.5px !important;
    margin-bottom: 0 !important;
  }

  #ad-services .services-rows {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  #ad-services .service-row {
    min-height: 330px !important;
    padding: 34px 26px !important;
    align-items: flex-start !important;
  }

  #ad-services .service-icon {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    font-size: 30px !important;
    margin-bottom: 20px !important;
  }

  #ad-services .service-row-text h3 {
    font-size: clamp(28px, 7vw, 36px) !important;
    line-height: 1.12 !important;
    margin-bottom: 16px !important;
  }

  #ad-services .service-row-text p {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
}/* AD SERVICES — MOBILE HEADING SIZE FIX */
@media (max-width: 768px) {
  body #ad-services .section-head {
    margin-bottom: 16px !important;
    padding: 0 10px !important;
  }

  body #ad-services .section-head h2 {
    font-size: 23px !important;
    line-height: 1.22 !important;
    letter-spacing: -0.4px !important;
    max-width: 92% !important;
    margin: 0 auto !important;
  }

  body #ad-services .section-head h2 .word-wrap,
  body #ad-services .section-head h2 .word-inner {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  body #ad-services .services-rows {
    margin-top: 12px !important;
  }

  body #ad-services .service-row {
    min-height: 310px !important;
    padding: 28px 24px !important;
  }
}
/* AD SERVICES — MOBILE HEADING MOVE UP HARD FIX */
@media (max-width: 768px) {
  body #ad-services .section-head {
    position: relative !important;
    top: -55px !important;
    margin-bottom: -35px !important;
    z-index: 5 !important;
  }

  body #ad-services .section-head h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    max-width: 92% !important;
    margin: 0 auto !important;
  }

  body #ad-services .section-head h2 .word-wrap,
  body #ad-services .section-head h2 .word-inner {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  body #ad-services .services-rows {
    position: relative !important;
    top: -25px !important;
  }
}
/* HOME HERO SCANNER LOGO — MOVE SLIGHTLY UP */
.hero-logo-stage,
.aw-hero-logo {
  position: relative !important;
  top: -60px !important;
}

/* Mobile adjustment */
@media (max-width: 768px) {
  .hero-logo-stage,
  .aw-hero-logo {
    top: -60px !important;
  }
}
/* WEBSITE PLANS — TECHY PREMIUM FONT */
#web-plans .section-head h2,
#web-plans .plan-card h3,
#web-plans .plan-card .price {
  font-family: "Orbitron", sans-serif !important;
  letter-spacing: 0.5px;
}

#web-plans .plan-card p,
#web-plans .plan-card li,
#web-plans .plans-note {
  font-family: "Rajdhani", sans-serif !important;
  font-size: 17px;
  letter-spacing: 0.3px;
}

#web-plans .plan-card .price {
  font-size: clamp(34px, 4vw, 52px) !important;
  font-weight: 800 !important;
  letter-spacing: 1px;
  text-shadow:
    0 0 12px rgba(183, 255, 0, 0.35),
    0 0 24px rgba(0, 245, 255, 0.18);
}

#web-plans .plan-card h3 {
  text-transform: uppercase;
  font-weight: 800;
}

#web-plans .plan-card ul li {
  line-height: 1.45;
}
/* GLOBAL TECH HEADING FONT — EXCEPT HOME HERO */
body section:not(.hero) h2,
body section:not(.hero) h3,
body footer h3,
body #about .about-terminal-title,
body #about .about-terminal-title .terminal-line {
  font-family: "Orbitron", sans-serif !important;
  letter-spacing: 0.6px;
}

/* Keep normal text readable */
body section:not(.hero) p,
body section:not(.hero) li,
body footer p,
body footer li {
  font-family: "Rajdhani", sans-serif !important;
}

/* Heading hover cyber feel */
body .tech-heading-hover {
  cursor: pointer;
  transition:
    text-shadow 0.25s ease,
    filter 0.25s ease,
    letter-spacing 0.25s ease;
}

body .tech-heading-hover:hover {
  text-shadow:
    0 0 10px rgba(183, 255, 0, 0.55),
    0 0 22px rgba(0, 245, 255, 0.35),
    2px 0 0 rgba(0, 245, 255, 0.45),
    -2px 0 0 rgba(183, 255, 0, 0.35);
  filter: saturate(1.35);
  letter-spacing: 1px;
}

body .tech-heading-hover.is-scrambling {
  text-shadow:
    0 0 14px rgba(183, 255, 0, 0.8),
    0 0 28px rgba(0, 245, 255, 0.45);
}
/* AD SERVICES — TRUE EDGE-TO-EDGE STACK */
#ad-services.ad-services-true-stack .services-rows {
  position: relative !important;
  height: 420px !important;
  overflow: visible !important;
}

#ad-services.ad-services-true-stack .service-row {
  margin: 0 !important;
  transform-origin: center center !important;
  will-change: transform, opacity;
}

/* Mobile stack height */
@media (max-width: 768px) {
  #ad-services.ad-services-true-stack .services-rows {
    height: 360px !important;
  }

  #ad-services.ad-services-true-stack .service-row {
    min-height: 320px !important;
  }
}
/* MOBILE GAP FIX — TRUSTED BY TO AD SERVICES */
@media (max-width: 768px) {
  #partners.trusted-marquee-section {
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
  }

  #partners .trusted-marquee-wrap,
  #partners .trusted-marquee-row {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #ad-services {
    margin-top: 0 !important;
    padding-top: 80px !important;
  }

  #ad-services .container {
    padding-top: 0 !important;
  }
}



/* SCROLL STABILITY — LENIS */
html {
  scroll-behavior: auto !important;
  overscroll-behavior: none;
}

body {
  overscroll-behavior: none;
  touch-action: pan-y;
}

.section {
  isolation: isolate;
}
/* =========================================================
   SCROLL ENGINEERING — SECTION STABILITY
========================================================= */
html {
  scroll-behavior: auto !important;
  overscroll-behavior: none;
}

body {
  overscroll-behavior: none;
  touch-action: pan-y;
}

.section {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
}

.pin-spacer {
  isolation: isolate;
}

#ad-services {
  overflow: visible !important;
}

#ad-services .services-rows {
  isolation: isolate;
}

@media (max-width: 768px) {
  #ad-services {
    min-height: 100svh !important;
  }

  .section {
    overflow-x: hidden;
  }
}

/* OUR WORK — INCREASE VIDEO CARD HEIGHT FOR FULL VIDEO VIEW */
#showcase .portfolio-video-card {
  flex: 0 0 280px !important;
  height: 500px !important;
  border-radius: 28px !important;
}

/* Show full video without cropping */
#showcase .portfolio-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
}

/* Mobile video card height */
@media (max-width: 768px) {
  #showcase .portfolio-video-card {
    flex: 0 0 225px !important;
    height: 400px !important;
    border-radius: 22px !important;
  }

  #showcase .portfolio-video {
    object-fit: contain !important;
  }
}



/* =========================================================
   ABOUT — REMOVE HOLOGRAM CARD ONLY ON MOBILE
   Desktop/PC remains unchanged
========================================================= */

@media (max-width: 768px) {
  #about .about-holo-card {
    display: none !important;
  }

  #about .about-holo-grid {
    display: block !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  #about .about-holo-content {
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  #about .about-terminal-title,
  #about .about-terminal-title .terminal-line {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  #about .about-holo-content p {
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #about .about-holo-chips {
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* =========================================================
   ABOUT — REMOVE HOLOGRAM CARD ONLY ON MOBILE
   Desktop/PC remains unchanged
========================================================= */

@media (max-width: 768px) {
  #about .about-holo-card {
    display: none !important;
  }

  #about .about-holo-grid {
    display: block !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  #about .about-holo-content {
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  #about .about-terminal-title,
  #about .about-terminal-title .terminal-line {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  #about .about-holo-content p {
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #about .about-holo-chips {
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}





/* ABOUT HOLOGRAM — REMOVE TOP LEFT + BOTTOM RIGHT BOXES */
#about .holo-card-inner::before,
#about .holo-card-inner::after {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
}



/* =========================================================
   FPS BOOST — SMOOTHER ANIMATION PERFORMANCE
   Safe patch: reduces jank without changing full design
========================================================= */

/* GPU-safe rendering for animated cards */
#home .aw-hero-logo,
#home .aw-logo,
#partners .trusted-marquee-track,
#partners .trusted-logo-card,
#showcase .portfolio-marquee-track,
#showcase .portfolio-poster-card,
#showcase .portfolio-video-card,
#ad-services .service-row,
#about .about-holo-card {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Avoid too much paint on video/poster hover */
#showcase .portfolio-poster-card img,
#showcase .portfolio-video {
  will-change: transform;
}

/* Pause heavy hover paint on mobile */
@media (max-width: 768px) {
  /* mobile does not need desktop-level glitch */
  #partners .trusted-logo-card,
  #partners .trusted-logo-card img {
    animation: none !important;
  }

  /* reduce heavy scanline overlays on mobile */
  #showcase .portfolio-poster-card::after,
  #showcase .portfolio-video-card::after {
    display: none !important;
  }

  /* reduce expensive blur/filter work */
  #showcase .portfolio-row-block {
    filter: none !important;
  }

  /* section tag pulse can cause continuous repaint */
  .section-tag {
    animation: none !important;
  }

  /* reduce heavy shadows on mobile cards */
  #partners .trusted-logo-card,
  #showcase .portfolio-poster-card,
  #showcase .portfolio-video-card,
  #web-plans .plan-card,
  #ad-generator .generator-card,
  #website-builder .generator-card {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35) !important;
  }
}

/* Pause heavy animations when section is offscreen */
#partners:not(.is-in-view) .trusted-marquee-track,
#partners:not(.is-in-view) .trusted-logo-card,
#partners:not(.is-in-view) .trusted-logo-card img,
#showcase:not(.is-in-view) .portfolio-marquee-track,
#about:not(.is-in-view) .about-holo-card,
#about:not(.is-in-view) .holo-aw-mark::before,
#about:not(.is-in-view) .holo-aw-mark::after {
  animation-play-state: paused !important;
}


/* MOBILE ONLY — REMOVE HOME ANIMATED LOGO */
@media (max-width: 768px) {
  #home .hero-image.hero-visual,
  #home .hero-logo-stage,
  #home .aw-hero-logo {
    display: none !important;
  }
}

/* =========================================================
   AD SERVICES — MOBILE ONLY NORMAL GRID
   Desktop stacking stays untouched
========================================================= */

@media (max-width: 768px) {
  #ad-services {
    min-height: auto !important;
    height: auto !important;
    padding: 70px 0 !important;
    overflow: visible !important;
  }

  #ad-services .container {
    min-height: auto !important;
    height: auto !important;
    display: block !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #ad-services .section-head {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    margin: 0 auto 28px !important;
    padding: 0 14px !important;
    opacity: 1 !important;
    text-align: center !important;
  }

  #ad-services .section-head h2 {
    font-size: 24px !important;
    line-height: 1.22 !important;
    max-width: 95% !important;
    margin: 0 auto !important;
  }

  #ad-services .section-head h2 .word-wrap,
  #ad-services .section-head h2 .word-inner {
    font-size: inherit !important;
    line-height: inherit !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #ad-services .services-rows {
    position: relative !important;
    top: auto !important;
    width: calc(100% - 28px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px 18px !important;
    perspective: none !important;
  }

  #ad-services .service-row {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 1 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #ad-services .service-row::before,
  #ad-services .service-row::after {
    display: none !important;
  }

  #ad-services .service-row-text {
    width: 100% !important;
    text-align: left !important;
  }

  #ad-services .service-icon {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    border-radius: 18px !important;
    font-size: 24px !important;
    margin: 0 0 18px 0 !important;
  }

  #ad-services .service-row-text h3 {
    font-size: 28px !important;
    line-height: 1.12 !important;
    margin-bottom: 14px !important;
  }

  #ad-services .service-row-text p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: rgba(235, 255, 250, 0.82) !important;
  }

  #ad-services .service-row-visual,
  #ad-services .service-row-num {
    display: none !important;
  }
}



/* =========================================================
   OUR WORK — MOBILE ONLY REAL MANUAL HORIZONTAL SCROLL
   Desktop auto-marquee stays unchanged
========================================================= */

@media (max-width: 768px) {
  /* Main row wrapper must become the scroll area */
  #showcase .poster-marquee-wrap,
  #showcase .video-marquee-wrap,
  #showcase .portfolio-marquee-wrap {
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: 50% !important;
    transform: translateX(-50%) !important;

    overflow-x: scroll !important;
    overflow-y: hidden !important;

    padding: 10px 18px 18px !important;

    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-x: contain !important;

    touch-action: pan-x !important;
    cursor: grab !important;
  }

  /* Hide scrollbar but keep scrolling active */
  #showcase .poster-marquee-wrap::-webkit-scrollbar,
  #showcase .video-marquee-wrap::-webkit-scrollbar,
  #showcase .portfolio-marquee-wrap::-webkit-scrollbar {
    display: none !important;
  }

  #showcase .poster-marquee-wrap,
  #showcase .video-marquee-wrap,
  #showcase .portfolio-marquee-wrap {
    scrollbar-width: none !important;
  }

  /* Remove side fade overlays on mobile */
  #showcase .portfolio-marquee-wrap::before,
  #showcase .portfolio-marquee-wrap::after {
    display: none !important;
    content: none !important;
  }

  /* Track must be wider than screen and must NOT animate */
  #showcase .poster-marquee-track,
  #showcase .video-marquee-track,
  #showcase .portfolio-marquee-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    width: max-content !important;
    min-width: max-content !important;

    gap: 16px !important;

    animation: none !important;
    transform: none !important;
    translate: none !important;
    will-change: auto !important;

    pointer-events: auto !important;
  }

  /* Cards must not shrink, otherwise row will not overflow */
  #showcase .portfolio-poster-card,
  #showcase .portfolio-video-card {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    pointer-events: auto !important;
  }

  /* Poster mobile size */
  #showcase .portfolio-poster-card {
    flex: 0 0 175px !important;
    width: 175px !important;
    min-width: 175px !important;
    height: 245px !important;
    border-radius: 18px !important;
  }

  /* Video mobile size */
  #showcase .portfolio-video-card {
    flex: 0 0 225px !important;
    width: 225px !important;
    min-width: 225px !important;
    height: 400px !important;
    border-radius: 22px !important;
  }

  #showcase .portfolio-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
  }

  /* Optional: hide duplicate cards on mobile, keep originals only */
  #showcase .poster-marquee-track .portfolio-poster-card:nth-child(n + 16) {
    display: none !important;
  }

  #showcase .video-marquee-track .portfolio-video-card:nth-child(n + 23) {
    display: none !important;
  }
}


/* ==================================================
   MOBILE ONLY — DISABLE HOVER EFFECTS
   PC hover will still work
================================================== */
@media (max-width: 768px), (hover: none), (pointer: coarse) {

  

  /* common card/button hover movement off */
  .btn:hover,
  .service-card:hover,
  .plan-card:hover,
  .partner-card:hover,
  .showcase-card:hover,
  #partners .partner-card:hover,
  #partners .trusted-logo-card:hover,
  #showcase .portfolio-poster-card:hover,
  #showcase .portfolio-video-card:hover,
  #web-plans .plan-card:hover,
  #contact .info-box:hover,
  .footer-brand:hover,
  .footer-links:hover,
  .footer-contact:hover,
  .back-top:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* remove hover sweep/scan overlays */
  #partners .partner-card:hover::before,
  #partners .trusted-logo-card:hover::before,
  #partners .trusted-logo-card:hover::after,
  #showcase .portfolio-poster-card:hover::before,
  #showcase .portfolio-video-card:hover::before,
  #showcase .portfolio-poster-card:hover::after,
  #showcase .portfolio-video-card:hover::after,
  #ad-services.ad-services-stackfx .service-row:hover::before,
  #contact .btn-primary:hover::after {
    animation: none !important;
    opacity: 0 !important;
  }

  /* remove image/video zoom on touch */
  #partners .trusted-logo-card:hover img,
  #partners .partner-card:hover img,
  #showcase .portfolio-poster-card:hover img,
  #showcase .portfolio-video-card:hover .portfolio-video {
    transform: none !important;
  }

  /* do not pause marquee on mobile hover/tap */
  #partners .trusted-marquee-wrap:hover .trusted-marquee-track,
  #showcase .portfolio-marquee-wrap:hover .portfolio-marquee-track {
    animation-play-state: running !important;
  }

  /* remove heading hover glow on mobile */
  body .tech-heading-hover:hover {
    text-shadow: none !important;
    filter: none !important;
    letter-spacing: inherit !important;
  }
}


/* =========================================================
   AD SERVICES — MOBILE ONLY SMALLER TITLES + SHORT TEXT
   Desktop stays untouched
========================================================= */

@media (max-width: 768px) {
  #ad-services .service-row-text h3 {
    font-size: 18px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.3px !important;
    margin-bottom: 8px !important;
    word-break: normal !important;
  }

  #ad-services .service-row-text p {
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    color: transparent !important;
  }

  #ad-services .service-row-text p::after {
    display: block !important;
    font-size: 12.5px !important;
    line-height: 1.38 !important;
    font-weight: 500 !important;
    color: rgba(235, 255, 250, 0.78) !important;
  }

  #ad-services .service-row:nth-child(1) .service-row-text p::after {
    content: "Boost brand visibility with smart ad placement.";
  }

  #ad-services .service-row:nth-child(2) .service-row-text p::after {
    content: "Promotional videos for ads and campaigns.";
  }

  #ad-services .service-row:nth-child(3) .service-row-text p::after {
    content: "Sharp edits for reels and ad creatives.";
  }

  #ad-services .service-row:nth-child(4) .service-row-text p::after {
    content: "Social-ready creatives for better reach.";
  }

  #ad-services .service-row:nth-child(5) .service-row-text p::after {
    content: "Clear packages with quick cost planning.";
  }

  #ad-services .service-row:nth-child(6) .service-row-text p::after {
    content: "Ads plus website support for digital trust.";
  }

  #ad-services .service-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    font-size: 20px !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
  }

  #ad-services .service-row {
    padding: 14px 12px !important;
  }
}


/* =========================================================
   AD SERVICES — MOBILE ONLY REDUCE CARD ROW GAP
   Desktop stays untouched
========================================================= */

@media (max-width: 768px) {
  #ad-services .services-rows {
    gap: 18px 18px !important;
    align-items: start !important;
  }

  body #ad-services .service-row {
    min-height: 205px !important;
    height: auto !important;
    padding: 18px 14px !important;
    align-self: start !important;
  }

  #ad-services .service-icon {
    margin-bottom: 10px !important;
  }

  #ad-services .service-row-text h3 {
    margin-bottom: 6px !important;
  }

  #ad-services .service-row-text p::after {
    line-height: 1.28 !important;
  }
}

/* PERFORMANCE — GPU COMPOSITING FIX */
#partners .trusted-logo-card,
#home .aw-logo-glitch-cyan,
#home .aw-logo-glitch-lime,
#home .aw-logo-color,
#home .aw-logo-scan {
  will-change: transform, opacity;
  contain: layout style;
}

#showcase .portfolio-poster-card,
#showcase .portfolio-video-card {
  contain: layout style paint;
}



/* =========================================================
   NEW ADS WALA NAVBAR — DESKTOP + MOBILE
========================================================= */

.aw-site-header {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(94%, 1380px);
  z-index: 999999;
  pointer-events: none;
}

.aw-navbar {
  pointer-events: auto;
  min-height: 76px;
  padding: 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  border-radius: 999px;
  border: 1px solid rgba(183, 255, 0, 0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)),
    rgba(5, 5, 5, 0.78);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(183, 255, 0, 0.12),
    0 0 34px rgba(0, 245, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.aw-nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.aw-nav-logo {
  width: 172px;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 14px rgba(183, 255, 0, 0.22))
    drop-shadow(0 0 10px rgba(0, 245, 255, 0.12));
}

.aw-nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(14px, 1.4vw, 26px);
}

.aw-nav-links a {
  position: relative;
  color: rgba(255, 255, 255, 0.86);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.62rem, 0.72vw, 0.82rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  white-space: nowrap;
  transition: color 0.28s ease, text-shadow 0.28s ease;
}

.aw-nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 0;
  height: 2px;
  border-radius: 99px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #b7ff00, #00f5ff);
  box-shadow: 0 0 12px rgba(183, 255, 0, 0.65);
  transition: width 0.28s ease;
}

.aw-nav-links a:hover {
  color: #b7ff00;
  text-shadow: 0 0 14px rgba(183, 255, 0, 0.45);
}

.aw-nav-links a:hover::after {
  width: 100%;
}

/* hamburger hidden on desktop */
.aw-menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(183, 255, 0, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    rgba(10, 10, 10, 0.92);
  cursor: pointer;
  padding: 12px;
  flex-shrink: 0;
}

.aw-menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  margin: 5px 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #b7ff00, #00f5ff);
  box-shadow: 0 0 10px rgba(183, 255, 0, 0.4);
  transition: transform 0.28s ease, opacity 0.28s ease;
}

/* opened icon */
.aw-site-header.nav-open .aw-menu-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.aw-site-header.nav-open .aw-menu-toggle span:nth-child(2) {
  opacity: 0;
}

.aw-site-header.nav-open .aw-menu-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ================= MOBILE NAV ================= */

@media (max-width: 1024px) {
  .aw-site-header {
    top: 14px;
    width: min(94%, 720px);
  }

  .aw-navbar {
    min-height: 70px;
    padding: 0 16px 0 20px;
    border-radius: 26px;
  }

  .aw-nav-logo {
    width: 142px;
  }

  .aw-menu-toggle {
    display: block;
  }

  .aw-nav-links {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;

    display: grid;
    grid-template-columns: 1fr;
    gap: 0;

    padding: 14px;
    border-radius: 24px;
    border: 1px solid rgba(183, 255, 0, 0.18);
    background:
      radial-gradient(circle at 15% 10%, rgba(183, 255, 0, 0.13), transparent 32%),
      radial-gradient(circle at 85% 90%, rgba(0, 245, 255, 0.12), transparent 34%),
      rgba(5, 5, 5, 0.94);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow:
      0 22px 60px rgba(0, 0, 0, 0.62),
      0 0 26px rgba(0, 245, 255, 0.12);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.98);
    pointer-events: none;
    transition:
      opacity 0.26s ease,
      visibility 0.26s ease,
      transform 0.26s ease;
  }

  .aw-site-header.nav-open .aw-nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  .aw-nav-links a {
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .aw-nav-links a:last-child {
    border-bottom: 0;
  }

  .aw-nav-links a:hover {
    background: rgba(183, 255, 0, 0.07);
  }

  .aw-nav-links a::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .aw-site-header {
    width: calc(100% - 24px);
    top: 12px;
  }

  .aw-navbar {
    min-height: 64px;
    padding: 0 12px 0 16px;
    border-radius: 22px;
  }

  .aw-nav-logo {
    width: 124px;
  }

  .aw-menu-toggle {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
}


/* /* =========================================================
   EMERGENCY SCROLL RESTORE FIX
========================================================= */

html,
body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body {
  position: relative !important;
  touch-action: auto !important;
}

.aw-site-header {
  pointer-events: none !important;
}

.aw-navbar,
.aw-menu-toggle,
.aw-nav-links,
.aw-nav-links a {
  pointer-events: auto !important;
} 

/* =========================================================
   HARD SCROLL RESTORE — TEST MODE
========================================================= */

html,
body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  position: relative !important;
  touch-action: auto !important;
  overscroll-behavior-y: auto !important;
}

body {
  pointer-events: auto !important;
}

main,
section,
.section {
  pointer-events: auto !important;
}

/* stop any old Lenis lock class */
html.lenis,
html.lenis body,
.lenis,
.lenis-smooth,
.lenis-stopped {
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* if ScrollTrigger left pin wrappers, don't let them trap scroll */
.pin-spacer {
  pointer-events: auto !important;
}





/* =========================================================
   REMOVE ANIMATION + LAZY RENDER FOR AFTER-OUR-WORK SECTIONS
========================================================= */

#ad-generator,
#web-plans,
#website-builder,
#contact {
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

#ad-generator *,
#web-plans *,
#website-builder *,
#contact * {
  animation: none !important;
  transition: none !important;
}

#ad-generator .reveal,
#web-plans .reveal,
#website-builder .reveal,
#contact .reveal,
#ad-generator .section-head,
#web-plans .section-head,
#website-builder .section-head,
#contact .section-head,
#web-plans .plan-card,
#website-builder .generator-card,
#ad-generator .generator-card,
#contact .contact-info,
#contact .contact-form {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}



/* =========================================================
   FIX — OUR WORK HEADING VISIBLE AFTER REMOVING REVEAL JS
========================================================= */

#showcase .section-head {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  position: relative !important;
  z-index: 20 !important;
}

#showcase .section-head * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}