/* ============================================================
   CSS CUSTOM PROPERTIES — single source of truth for theming
============================================================ */
:root {
  --clr-bg:          #000;
  --clr-surface:     #050505;
  --clr-accent:      #8b5cf6;
  --clr-accent2:     #ec4899;
  --clr-accent3:     #f97316;
  --clr-white:       #ffffff;
  --clr-muted:       rgba(255,255,255,0.5);
  --clr-border:      rgba(255,255,255,0.08);
  --transition-base: 0.3s ease;
  --transition-med:  0.4s ease;
  --radius-card:     20px;
  --radius-pill:     50px;
  --max-w:           1300px;
  --max-w-wide:      1600px;
}

/* ============================================================
   BASE RESET
============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  scroll-behavior: smooth;
}

body {
  background:              var(--clr-bg);
  color:                   var(--clr-white);
  font-family:             'Inter', Arial, sans-serif;
  overflow-x:              hidden;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Custom cursor — hide native */
  cursor:                  none;
}

/* Responsive media defaults */
img,
video {
  max-width: 100%;
  height:    auto;
  display:   block;
}

/* ============================================================
   CUSTOM CURSOR
============================================================ */
.cursor-dot {
  position:       fixed;
  width:          6px;
  height:         6px;
  background:     #ffffff;
  border-radius:  50%;
  pointer-events: none;
  z-index:        9999;
  transform:      translate(-50%, -50%);
  will-change:    left, top;
}

.cursor-circle {
  position:       fixed;
  width:          32px;
  height:         32px;
  border:         1.5px solid rgba(255,255,255,0.7);
  border-radius:  50%;
  pointer-events: none;
  z-index:        9998;
  transform:      translate(-50%, -50%);
  /* Only transition size changes — position driven by rAF */
  transition:     width 0.2s ease, height 0.2s ease;
  will-change:    left, top;
}

/* ============================================================
   DECORATIVE LAYERS (noise + ambient)
   These are purely visual — pointer-events blocked
============================================================ */
.noise,
.ambient {
  position:       fixed;
  inset:          0;
  pointer-events: none;
  z-index:        0;
}

.noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity:        0.035;
}

/* ============================================================
   NAVBAR
============================================================ */
.navbar {
  position:   fixed;
  top:        0;
  left:       0;
  width:      100%;
  padding:    20px 0;
  background: transparent;
  z-index:    1000;
  transition: padding var(--transition-base),
              background var(--transition-base),
              border-bottom var(--transition-base);
}

.navbar.scrolled {
  background:          rgba(0,0,0,0.75);
  backdrop-filter:     blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom:       1px solid rgba(255,255,255,0.08);
  padding:             12px 0;
}

/* Bootstrap's .container handles the inner width */
.navbar .container {
  padding-left:  clamp(20px, 5vw, 64px);
  padding-right: clamp(20px, 5vw, 64px);
}

.logo {
  font-size:   20px;
  font-weight: 700;
  color:       var(--clr-white);
  margin:      0; /* reset h2 default margin */
}

.menu {
  font-size:       14px;
  color:           var(--clr-white);
  cursor:          pointer;
  min-width:       44px;
  min-height:      44px;
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
}

.menu a {
  color:           var(--clr-white);
  text-decoration: none;
  font-size:       16px;
  font-weight:     600;
  transition:      opacity var(--transition-base);
}

.menu a:hover { opacity: 0.7; }

@media (max-width: 768px) {
  .logo     { font-size: 18px; }
  .menu     { font-size: 13px; }
}

/* ============================================================
   NX-SEC — shared section utility
============================================================ */
.nx-sec {
  position: relative;
}

/* ============================================================
   HERO SECTION
============================================================ */
.hero {
  height:          100vh;
  min-height:      600px;
  position:        relative;
  overflow:        hidden;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.hero-video {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  object-fit:     cover;
  z-index:        1;
  pointer-events: none;
}

.overlay {
  position:       absolute;
  inset:          0;
  background:     linear-gradient(
    to right,
    rgba(0,0,0,0.75) 10%,
    rgba(0,0,0,0.55) 40%,
    rgba(0,0,0,0.4)  70%,
    rgba(0,0,0,0.65) 100%
  );
  z-index:        2;
  pointer-events: none;
}

.hero-content {
  position:        relative;
  z-index:         10;
  width:           100%;
  max-width:       900px;
  padding:         0 clamp(20px, 6vw, 80px);
  margin:          0 auto;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             30px;
  text-align:      center;
}

/* Radial dark behind content for contrast */
.hero-content::before {
  content:    "";
  position:   absolute;
  inset:      -60px;
  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0.2),
    rgba(0,0,0,0.75)
  );
  z-index: -1;
  pointer-events: none;
}

.hero-text {
  font-size:      clamp(42px, 8vw, 120px);
  font-weight:    900;
  text-transform: uppercase;
  line-height:    1.05;
  letter-spacing: -1.5px;
  color:          var(--clr-white);
}

.hero-text span {
  display:     inline-block;
  white-space: nowrap;
}

.hero-text .outline {
  color:              transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.9);
}

.hero-text .solid {
  color:       #ffffff;
  text-shadow: 0 10px 40px rgba(0,0,0,0.9);
}

/* GSAP initial off-screen transforms */
.hero-text .left  { transform: translateX(-150vw); }
.hero-text .right { transform: translateX(150vw);  }

/* CTA BLOCK */
.hero-cta {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            20px;
  margin-top:     40px;
}

.cta-btn {
  padding:      16px 34px;
  font-size:    16px;
  font-weight:  600;
  color:        var(--clr-white);
  background:   rgba(255,255,255,0.06);
  border:       1px solid rgba(255,255,255,0.25);
  border-radius: 50px;
  backdrop-filter: blur(10px);
  cursor:       pointer;
  transition:   transform var(--transition-base), background var(--transition-base);
  min-height:   44px;
}

.cta-btn span {
  display:    block;
  font-size:  13px;
  opacity:    0.7;
  margin-top: 4px;
}

.cta-btn:hover {
  transform:  translateY(-3px);
  background: rgba(255,255,255,0.12);
}

/* SCROLL INDICATOR */
.scroll-down {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  font-size:      12px;
  color:          rgba(255,255,255,0.7);
  gap:            6px;
}

.scroll-line {
  width:            2px;
  height:           30px;
  background:       rgba(255,255,255,0.5);
  transform-origin: top;
  animation:        scrollAnim 1.4s infinite;
}

@keyframes scrollAnim {
  0%   { transform: scaleY(0); opacity: 0; }
  50%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}

/* HERO MARQUEE */
.hero-marquee {
  width:      150%;
  overflow:   hidden;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 12px;
}

.marquee-track {
  display:   flex;
  width:      max-content;
  animation: marqueeMove 22s linear infinite;
  will-change: transform;
}

.marquee-track span {
  font-size:    14px;
  color:        rgba(255,255,255,0.75);
  margin-right: 60px;
  white-space:  nowrap;
}

@keyframes marqueeMove {
  0%   { transform: translateX(0);    }
  100% { transform: translateX(-50%); }
}

/* ASTRONAUT */
.hero-image {
  position:       absolute;
  top:            50%;
  left:           0;
  transform:      translate(-15%, -50%);
  z-index:        20;
  pointer-events: none;
}

.hero-image img {
  width:  clamp(450px, 60vw, 1200px);
  height: auto;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,0.8));
}

@media (min-width: 1400px) {
  .hero-image { transform: translate(-10%, -50%); }
}

@media (max-width: 1200px) {
  .hero-image { transform: translate(-18%, -50%); }
}

@media (max-width: 1024px) {
  .hero-image         { transform: translate(-25%, -50%); opacity: 0.85; }
  .hero-image img     { width: clamp(280px, 50vw, 600px); }
  .hero-content       { margin-left: 0; }
}

@media (max-width: 768px) {
  .hero               { min-height: 600px; }
  .hero-content       { padding: 0 20px; }
  .hero-text          { font-size: clamp(28px, 9vw, 48px); line-height: 1.2; }
  .hero-text span     { white-space: normal; }
  .hero-image         { transform: translate(-80%, -50%); opacity: 0.25; }
  .hero-image img     { width: 90vw; }
  .marquee-track span { font-size: 12px; }
}

@media (max-width: 480px) {
  .hero-image         { display: none; }
  .hero-text          { font-size: clamp(24px, 8vw, 36px); }
}

/* ============================================================
   SERVICES SECTION — BENTO GRID
============================================================ */
.services-section {
  position:   relative;
  padding:    clamp(60px, 6vw, 80px) 0 clamp(40px, 6vw, 70px);
  background: transparent; /* ✅ FIXED */
  color:      var(--clr-white);
  overflow:   hidden;
  z-index:    1;
}

.services-bg-video {
  position:   absolute;
  top:        0;
  left:       0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    -1;
  filter:     brightness(0.18) contrast(1.2);
  pointer-events: none;
}


.services-container {
  position:  relative;
  z-index:   2;
  max-width: var(--max-w-wide);
  width:     100%;
  margin:    0 auto;
  padding:   0 clamp(18px, 4vw, 60px);
}

/* HEADER */
.srv-header {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  gap:             clamp(24px, 4vw, 70px);
  margin-bottom:   clamp(36px, 5vw, 72px);
  flex-wrap:       wrap;
}

.srv-header-left { flex: 0 0 auto; }

.srv-eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            10px;
  font-size:      clamp(10px, 1.1vw, 12px);
  font-weight:    700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color:          var(--clr-accent);
  margin-bottom:  clamp(12px, 1.8vw, 22px);
  opacity:        0;
  transform:      translateY(20px);
  animation:      fadeUp 0.8s 0.1s cubic-bezier(0.22,1,0.36,1) forwards;
}

.srv-eyebrow::before {
  content:    '';
  display:    inline-block;
  width:      28px;
  height:     1px;
  background: linear-gradient(90deg, var(--clr-accent), transparent);
}

.srv-eyebrow::after {
  content:      '';
  display:      inline-block;
  width:        5px;
  height:       5px;
  border-radius: 50%;
  background:   var(--clr-accent);
  box-shadow:   0 0 8px var(--clr-accent);
  animation:    pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

.srv-title {
  font-size:      clamp(46px, 7.5vw, 108px);
  font-weight:    900;
  line-height:    0.95;
  letter-spacing: -3px;
  display:        flex;
  flex-direction: column;
}

.srv-title-line {
  display:    block;
  background: linear-gradient(100deg, #ffffff 0%, rgba(255,255,255,0.75) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity:    0;
  transform:  translateX(-70px);
  animation:  slideInLeft 0.9s cubic-bezier(0.22,1,0.36,1) forwards;
}

.srv-title-line:nth-child(1) { animation-delay: 0.2s;  }
.srv-title-line:nth-child(2) { animation-delay: 0.35s; }

.srv-title-stroke {
  color:                   transparent;
  -webkit-text-stroke:     2px rgba(255,255,255,0.45);
  -webkit-text-fill-color: transparent;
  background:              none;
  -webkit-background-clip: unset;
  background-clip:         unset;
}

.srv-header-right {
  flex:      1;
  max-width: 440px;
  opacity:   0;
  transform: translateX(50px);
  animation: slideInRight 0.9s 0.4s cubic-bezier(0.22,1,0.36,1) forwards;
}

.srv-header-desc {
  font-size:     clamp(13px, 1.5vw, 15px);
  color:         rgba(255,255,255,0.5);
  line-height:   1.85;
  margin-bottom: 28px;
  font-weight:   300;
}

.srv-header-stat {
  display:     flex;
  align-items: baseline;
  gap:         16px;
}

.srv-stat-num {
  font-size:   clamp(40px, 5vw, 64px);
  font-weight: 900;
  line-height: 1;
  background:  linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter:      drop-shadow(0 0 20px rgba(139,92,246,0.4));
}

.srv-stat-label {
  font-size:      clamp(10px, 1.2vw, 13px);
  color:          rgba(255,255,255,0.4);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight:    500;
}

/* TICKER STRIP */
.blogs-ticker-wrap {
  position:       relative;
  z-index:        2;
  overflow:       hidden;
  border-top:     1px solid rgba(255,255,255,0.05);
  border-bottom:  1px solid rgba(255,255,255,0.05);
  padding:        14px 0;
  margin-bottom:  clamp(36px, 5vw, 64px);
  opacity:        0;
  animation:      fadeIn 0.8s 0.6s ease forwards;
  background:     linear-gradient(90deg, rgba(139,92,246,0.03), transparent 30%, transparent 70%, rgba(139,92,246,0.03));
}

.blogs-ticker-wrap::before,
.blogs-ticker-wrap::after {
  content:        '';
  position:       absolute;
  top:            0;
  bottom:         0;
  width:          100px;
  z-index:        3;
  pointer-events: none;
}

.blogs-ticker-wrap::before {
  left:       0;
  background: linear-gradient(90deg, var(--clr-bg), transparent);
}

.blogs-ticker-wrap::after {
  right:      0;
  background: linear-gradient(-90deg, var(--clr-bg), transparent);
}

.blogs-ticker-track {
  display:     flex;
  gap:         clamp(24px, 3.5vw, 48px);
  width:       max-content;
  animation:   tickerScroll 26s linear infinite;
  white-space: nowrap;
  will-change: transform;
}

.blogs-ticker-track span {
  font-size:      clamp(11px, 1.4vw, 13px);
  font-weight:    700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.7);
  transition:     color 0.3s;
}

.ticker-sep {
  color:     var(--clr-accent) !important;
  font-size: 9px !important;
  opacity:   0.7;
}

@keyframes tickerScroll {
  from { transform: translateX(0);    }
  to   { transform: translateX(-50%); }
}

/* BENTO GRID */
.srv-bento {
  display:        flex;
  flex-direction: column;
  gap:            clamp(14px, 2vw, 22px);
}

.srv-bento-row {
  display: flex;
  gap:     clamp(14px, 2vw, 22px);
}

.srv-row-1,
.srv-row-2,
.srv-row-3 { align-items: stretch; }

.srv-stack {
  display:        flex;
  flex-direction: column;
  gap:            clamp(14px, 2vw, 22px);
  flex:           0 0 auto;
  width:          clamp(230px, 28vw, 360px);
}

/* BASE CARD */
.srv-card {
  position:        relative;
  border-radius:   clamp(16px, 2vw, 24px);
  overflow:        hidden;
  border:          1px solid rgba(255,255,255,0.07);
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  cursor:          default;
  transition:      transform 0.5s cubic-bezier(0.22,1,0.36,1),
                   box-shadow 0.5s cubic-bezier(0.22,1,0.36,1),
                   border-color 0.4s ease;
  opacity:         0;
  transform:       translateY(60px) scale(0.96);
  background:      rgba(255,255,255,0.02);
}

.srv-card.is-visible {
  opacity:   1;
  transform: translateY(0) scale(1);
}

/* Card BG image */
.srv-card-img {
  position:            absolute;
  inset:               0;
  background-image:    var(--card-img);
  background-size:     cover;
  background-position: center;
  z-index:             0;
  transition:          transform 0.6s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease;
  opacity:             0.55;
}

/* Gradient overlay */
.srv-card::after {
  content:    "";
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    170deg,
    rgba(8,8,16,0.1)  0%,
    rgba(8,8,16,0.45) 35%,
    rgba(8,8,16,0.92) 80%,
    rgba(8,8,16,1)    100%
  );
  z-index:    1;
  pointer-events: none;
}

/* Top shimmer line */
.srv-card::before {
  content:        "";
  position:       absolute;
  top:            0;
  left:           0;
  width:          70%;
  height:         1px;
  background:     linear-gradient(90deg, rgba(139,92,246,0.5), transparent);
  z-index:        4;
  pointer-events: none;
  opacity:        0;
  transition:     opacity 0.4s ease;
}

.srv-card:hover::before { opacity: 1; }

/* Glow blob */
.srv-card-glow {
  position:       absolute;
  bottom:         -50px;
  right:          -50px;
  width:          220px;
  height:         220px;
  border-radius:  50%;
  background:     radial-gradient(circle, rgba(139,92,246,0.4), transparent 70%);
  filter:         blur(50px);
  z-index:        1;
  opacity:        0;
  transition:     opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
  transform:      scale(0.8);
}

/* BODY */
.srv-card-body {
  position:       relative;
  z-index:        3;
  padding:        clamp(18px, 2.5vw, 32px);
  display:        flex;
  flex-direction: column;
  gap:            5px;
}

.srv-num {
  font-family:    'Courier New', monospace;
  font-size:      clamp(10px, 1vw, 11px);
  font-weight:    700;
  letter-spacing: 3px;
  color:          rgba(255,255,255,0.25);
  display:        block;
  margin-bottom:  4px;
}

.srv-name {
  font-size:      clamp(17px, 2.1vw, 26px);
  font-weight:    800;
  color:          var(--clr-white);
  line-height:    1.15;
  text-shadow:    0 4px 24px rgba(0,0,0,0.9);
  margin:         0;
  letter-spacing: -0.3px;
}

.srv-desc {
  font-size:   clamp(11px, 1.2vw, 13px);
  color:       rgba(255,255,255,0.6);
  line-height: 1.65;
  margin:      4px 0 0;
  max-width:   320px;
  font-weight: 300;
  opacity:     0;
  transform:   translateY(10px);
  transition:  opacity 0.4s ease, transform 0.4s ease;
}

.srv-meta {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-top:  10px;
  opacity:     0;
  transform:   translateY(10px);
  transition:  opacity 0.4s 0.06s ease, transform 0.4s 0.06s ease;
}

.srv-tag {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  font-size:      clamp(9px, 0.9vw, 10px);
  font-weight:    700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--clr-accent);
  border:         1px solid rgba(139,92,246,0.3);
  border-radius:  40px;
  padding:        4px 12px;
  width:          fit-content;
  backdrop-filter: blur(10px);
  background:     rgba(139,92,246,0.08);
  transition:     background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.srv-tag--special {
  background:   linear-gradient(135deg, rgba(139,92,246,0.2), rgba(236,72,153,0.2));
  border-color: rgba(236,72,153,0.4);
  color:        var(--clr-accent2);
}

.srv-tag--green {
  background:   rgba(52,211,153,0.1);
  border-color: rgba(52,211,153,0.35);
  color:        var(--clr-accent3);
}

.srv-icon {
  position:        absolute;
  top:             clamp(14px, 2vw, 22px);
  right:           clamp(14px, 2vw, 22px);
  z-index:         3;
  width:           38px;
  height:          38px;
  border-radius:   10px;
  background:      rgba(255,255,255,0.04);
  border:          1px solid rgba(255,255,255,0.08);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       18px;
  opacity:         0;
  transform:       scale(0.7) rotate(-10deg);
  transition:      opacity 0.4s 0.1s ease, transform 0.4s 0.1s cubic-bezier(0.34,1.56,0.64,1);
  backdrop-filter: blur(8px);
}

.srv-arrow {
  position:        absolute;
  bottom:          clamp(14px, 2vw, 22px);
  right:           clamp(14px, 2vw, 22px);
  z-index:         3;
  width:           34px;
  height:          34px;
  border-radius:   50%;
  background:      rgba(139,92,246,0.15);
  border:          1px solid rgba(139,92,246,0.3);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       14px;
  color:           var(--clr-accent);
  opacity:         0;
  transform:       translateX(-6px);
  transition:      opacity 0.35s ease, transform 0.35s ease, background var(--transition-base);
}

/* CARD SIZES */
.srv-card--large  { flex: 1; min-height: clamp(320px, 40vw, 540px); }
.srv-card--tall   { flex: 1; min-height: clamp(160px, 17vw, 260px); }
.srv-card--mid    { flex: 1; min-height: clamp(240px, 25vw, 340px); }
.srv-card--wide   { flex: 1; min-height: clamp(160px, 17vw, 260px); }

.srv-card--coming {
  flex:          0 0 auto;
  width:         clamp(160px, 19vw, 250px);
  min-height:    clamp(160px, 17vw, 260px);
  border-color:  rgba(255,255,255,0.1);
  background:    rgba(255,255,255,0.015);
}

.srv-card--coming .srv-card-img {
  opacity: 0.2;
  filter:  grayscale(0.8);
}

/* HOVER — DESKTOP */
@media (min-width: 769px) {
  .srv-card:hover {
    transform:    translateY(-8px) scale(1.018);
    box-shadow:   0 32px 90px rgba(0,0,0,0.75),
                  0 0 0 1px rgba(139,92,246,0.3),
                  inset 0 1px 0 rgba(255,255,255,0.08);
    border-color: rgba(139,92,246,0.3);
  }

  .srv-card:hover .srv-card-img  { transform: scale(1.09); opacity: 0.7; }
  .srv-card:hover .srv-card-glow { opacity: 1; transform: scale(1); }

  .srv-card:hover .srv-desc,
  .srv-card:hover .srv-meta    { opacity: 1; transform: translateY(0); }

  .srv-card:hover .srv-icon    { opacity: 1; transform: scale(1) rotate(0deg); }
  .srv-card:hover .srv-arrow   { opacity: 1; transform: translateX(0); background: rgba(139,92,246,0.25); }
  .srv-card:hover .srv-tag     { background: rgba(139,92,246,0.2); border-color: rgba(139,92,246,0.5); }
}

/* MOBILE: always visible */
@media (max-width: 768px) {
  .srv-desc,
  .srv-meta,
  .srv-icon,
  .srv-arrow { opacity: 1; transform: none; }
}

/* KEYFRAMES */
@keyframes fadeUp       { to { opacity: 1; transform: translateY(0); } }
@keyframes slideInLeft  { to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { to { opacity: 1; transform: translateX(0); } }
@keyframes fadeIn       { to { opacity: 1; } }

/* SERVICES RESPONSIVE */
@media (max-width: 1100px) {
  .srv-card--large  { min-height: clamp(280px, 34vw, 440px); }
  .srv-card--tall   { min-height: clamp(140px, 15vw, 220px); }
  .srv-card--mid    { min-height: clamp(210px, 23vw, 300px); }
  .srv-card--wide   { min-height: clamp(140px, 15vw, 220px); }
  .srv-card--coming { min-height: clamp(140px, 15vw, 220px); }
  .srv-stack        { width: clamp(210px, 26vw, 320px); }
}

@media (max-width: 768px) {
  .services-section { padding: 55px 0 70px; }

  .srv-header {
    flex-direction: column;
    align-items:    flex-start;
    gap:            22px;
    margin-bottom:  32px;
  }

  .srv-title        { letter-spacing: -1.5px; }
  .srv-header-right { max-width: 100%; }

  .srv-bento-row    { flex-direction: column; }

  .srv-stack {
    width:          100%;
    flex-direction: row;
    gap:            14px;
  }

  .srv-stack .srv-card--tall { min-height: 210px; flex: 1; }
  .srv-card--large  { min-height: 300px; }
  .srv-card--mid    { min-height: 230px; }
  .srv-card--wide   { min-height: 210px; }
  .srv-card--coming { width: 100%; min-height: 190px; }

  .blogs-ticker-track { animation-duration: 20s; }
}

@media (max-width: 480px) {
  .srv-stack                     { flex-direction: column; }
  .srv-stack .srv-card--tall     { min-height: 190px; }
  .srv-card--large               { min-height: 260px; }
  .srv-card--mid                 { min-height: 210px; }
  .srv-card--wide                { min-height: 190px; }
  .srv-num                       { display: none; }
}

/* ============================================================
   CLIENTS SECTION — LOGO-ONLY INFINITE SCROLL MARQUEE
   All headings, descriptions, and interactive elements removed.
   Two rows of logos scroll in opposite directions for a
   premium layered feel. Pure CSS animation — no JS needed.
============================================================ */
.clients-scroll-section {
  position:   relative;
  width:      100%;
  padding:    clamp(50px, 7vw, 100px) 0;
  overflow:   hidden;
  background: var(--clr-bg);
}

/* Subtle gradient border lines top + bottom */
.clients-scroll-section::before,
.clients-scroll-section::after {
  content:        "";
  position:       absolute;
  left:           0;
  width:          100%;
  height:         1px;
  background:     linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  pointer-events: none;
}

.clients-scroll-section::before { top:    0; }
.clients-scroll-section::after  { bottom: 0; }

/* WRAPPER — holds both rows */
.clients-logo-marquee-wrap {
  display:        flex;
  flex-direction: column;
  gap:            clamp(20px, 3vw, 36px);
  width:          100%;
}

/* SINGLE ROW */
.clients-logo-row {
  overflow:   hidden;
  width:      100%;
  position:   relative;
}

/* Fade edges for seamless look */
.clients-logo-row::before,
.clients-logo-row::after {
  content:        "";
  position:       absolute;
  top:            0;
  bottom:         0;
  width:          clamp(60px, 10vw, 160px);
  z-index:        2;
  pointer-events: none;
}

.clients-logo-row::before {
  left:       0;
  background: linear-gradient(90deg, var(--clr-bg), transparent);
}

.clients-logo-row::after {
  right:      0;
  background: linear-gradient(-90deg, var(--clr-bg), transparent);
}

/* TRACK — the scrolling container */
.clients-logo-track {
  display:     flex;
  align-items: center;
  width:       max-content;
  gap:         clamp(40px, 6vw, 90px);
  /* Forward direction */
  animation:   clientsScrollFwd 28s linear infinite;
  will-change: transform;
}

/* Reverse direction */
.clients-logo-track--rev {
  animation: clientsScrollRev 32s linear infinite;
}

@keyframes clientsScrollFwd {
  from { transform: translateX(0);    }
  to   { transform: translateX(-50%); }
}

@keyframes clientsScrollRev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0);    }
}

/* LOGO ITEMS */
.clients-logo-item {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         clamp(10px, 1.5vw, 18px) clamp(16px, 2.5vw, 32px);
  border-radius:   clamp(12px, 1.5vw, 18px);
  border:          1px solid rgba(255,255,255,0.06);
  background:      rgba(255,255,255,0.025);
  /* Smooth hover glow */
  transition:      border-color var(--transition-base),
                   background var(--transition-base),
                   transform var(--transition-base);
}

.clients-logo-item:hover {
  border-color: rgba(139,92,246,0.25);
  background:   rgba(139,92,246,0.05);
  transform:    translateY(-3px);
}

.clients-logo-item img {
  width:      clamp(80px, 12vw, 160px);
  height:     clamp(40px, 5vw,  70px);
  object-fit: contain;
  /* Desaturate logos to keep a cohesive monochrome feel */
  filter:     grayscale(1) brightness(1.2);
  opacity:    0.7;
  transition: filter var(--transition-base), opacity var(--transition-base);
}

.clients-logo-item:hover img {
  filter:  grayscale(0) brightness(1.1);
  opacity: 1;
}

/* Pause animation when user hovers the whole section */
.clients-scroll-section:hover .clients-logo-track {
  animation-play-state: paused;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .clients-logo-item        { padding: 8px 14px; }
  .clients-logo-item img    { width: clamp(60px, 18vw, 120px); height: clamp(30px, 7vw, 55px); }
  .clients-logo-marquee-wrap { gap: 16px; }
}

@media (max-width: 480px) {
  .clients-logo-item img    { width: clamp(50px, 20vw, 100px); height: auto; }
}

/* ============================================================
   ABOUT US SECTION
============================================================ */
.aboutus-section {
  position:   relative;
  background: #030303;
  overflow:   hidden;
  padding:    0;
}

.au-bg-base {
  position:            absolute;
  inset:               0;
  background:
    linear-gradient(rgba(3,3,3,0.75), rgba(3,3,3,0.9)),
    url("../assets/about-bg.jpg");
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  z-index: 0;
}

.au-grain {
  position:         absolute;
  inset:            0;
  z-index:          1;
  opacity:          0.04;
  pointer-events:   none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:  200px 200px;
}

.au-container {
  position:  relative;
  z-index:   2;
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   0 clamp(16px, 4vw, 50px);
}

/* SHARED EYEBROW (about + team + CTA share this class) */
.au-eyebrow {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 4px;
  color:          var(--clr-accent);
  text-transform: uppercase;
  margin:         0 0 24px;
  /* GSAP initial */
  opacity:   0;
  transform: translateY(16px);
}

/* BLOCK 1 — OPENING */
.au-opening {
  position: relative;
  z-index:  2;
  padding:  100px 0 60px;
}

.au-headline-wrap { overflow: hidden; }

.au-headline {
  margin:      0 0 50px;
  padding:     0;
  line-height: 1;
}

.au-hl-line {
  display:        block;
  font-size:      clamp(40px, 8.5vw, 130px);
  font-weight:    900;
  letter-spacing: -3px;
  color:          var(--clr-white);
  /* GSAP initial */
  opacity:     0;
  transform:   translateY(100px);
}

.au-hl-accent {
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent2), var(--clr-accent3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.au-hl-stroke {
  color:               transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,0.35);
}

@media (max-width: 380px) {
  .au-hl-stroke { -webkit-text-stroke: 1px rgba(255,255,255,0.35); }
}

.au-opening-sub {
  display:     flex;
  align-items: flex-start;
  gap:         clamp(20px, 4vw, 60px);
  max-width:   900px;
  /* GSAP initial */
  opacity:   0;
  transform: translateY(40px);
}

.au-opening-sub p {
  font-size:   clamp(14px, 1.8vw, 18px);
  color:       var(--clr-muted);
  line-height: 1.9;
  margin:      0;
  flex:        1;
}

.au-scroll-hint {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  flex-shrink:    0;
}

.au-scroll-line {
  display:     block;
  width:       1px;
  height:      60px;
  background:  linear-gradient(to bottom, var(--clr-accent), transparent);
  animation:   scrollLinePulse 2s ease-in-out infinite;
  will-change: opacity, transform;
}

@keyframes scrollLinePulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1);    }
  50%      { opacity: 1.0; transform: scaleY(1.15); }
}

.au-scroll-hint p {
  font-size:      10px;
  letter-spacing: 2px;
  color:          var(--clr-white);
  text-transform: uppercase;
  writing-mode:   vertical-rl;
  margin:         0;
}

/* BLOCK 2 — MARQUEE */
.au-marquee-divider {
  position:      relative;
  z-index:       2;
  overflow:      hidden;
  border-top:    1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  /* GSAP initial */
  opacity: 0;
}

.au-marquee-track {
  display:     flex;
  gap:         32px;
  padding:     16px 0;
  width:       max-content;
  white-space: nowrap;
  will-change: transform;
}

.au-marquee-fwd { animation: auMarqueeFwd 28s linear infinite; }
.au-marquee-rev { animation: auMarqueeRev 22s linear infinite; }

.au-marquee-track span {
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.85);
}

.au-marquee-track em {
  color:      var(--clr-accent);
  font-style: normal;
  font-size:  9px;
}

@keyframes auMarqueeFwd {
  from { transform: translateX(0);    }
  to   { transform: translateX(-50%); }
}

@keyframes auMarqueeRev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0);    }
}

/* BLOCK 3 — SPLIT STORY */
.au-split-story {
  position: relative;
  z-index:  2;
  padding:  40px 0;
}

.au-split-inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(30px, 5vw, 80px);
  align-items:           start;
}

.au-split-left {
  position: relative;
  /* GSAP initial */
  opacity:   0;
  transform: translateX(-60px);
}

.au-split-year {
  display:       flex;
  align-items:   baseline;
  gap:           12px;
  margin-bottom: 24px;
}

.au-year-num {
  font-size:      clamp(36px, 5vw, 72px);
  font-weight:    900;
  color:          rgba(255,255,255,0.08);
  letter-spacing: -2px;
  line-height:    1;
}

.au-year-label {
  font-size:      12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.4);
  line-height:    1.5;
}

.au-split-img-stack {
  position: relative;
  height:   400px;
  width:    100%;
}

.au-img-card {
  position:      absolute;
  border-radius: 20px;
  overflow:      hidden;
  border:        1px solid var(--clr-border);
  background:    #000;
}

.au-img-card video,
.au-img-card img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.6s ease;
}

.au-img-card:hover video,
.au-img-card:hover img { transform: scale(1.05); }

.au-img-card-back {
  width:     75%;
  height:    320px;
  top:       20px;
  right:     0;
  transform: rotate(3deg);
  opacity:   0.5;
}

.au-img-card-front {
  width:      80%;
  height:     340px;
  bottom:     0;
  left:       0;
  transform:  rotate(-2deg);
  z-index:    2;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}

.au-img-badge {
  position:      absolute;
  bottom:        20px;
  right:         10px;
  background:    rgba(139,92,246,0.95);
  border-radius: 14px;
  padding:       12px 16px;
  z-index:       3;
}

.au-badge-num {
  display:     block;
  font-size:   22px;
  font-weight: 900;
  color:       var(--clr-white);
  line-height: 1;
}

.au-badge-txt {
  display:        block;
  font-size:      11px;
  color:          rgba(255,255,255,0.8);
  letter-spacing: 0.5px;
  margin-top:     4px;
}

.au-split-right {
  display:        flex;
  flex-direction: column;
  padding-top:    20px;
}

.au-story-index {
  display:        block;
  font-size:      11px;
  font-weight:    700;
  color:          var(--clr-accent);
  letter-spacing: 3px;
  margin-bottom:  14px;
}

.au-story-block {
  padding:     clamp(20px, 3vw, 36px) 0 clamp(20px, 3vw, 36px) clamp(16px, 2.5vw, 32px);
  border-left: 1px solid rgba(255,255,255,0.07);
  /* GSAP initial */
  opacity:    0;
  transform:  translateX(50px);
  transition: border-left-color 0.4s ease;
}

.au-story-heading {
  font-size:   clamp(18px, 2.2vw, 26px);
  font-weight: 800;
  color:       var(--clr-white);
  margin:      0 0 10px;
}

.au-story-body {
  font-size:   clamp(13px, 1.4vw, 15px);
  color:       rgba(255,255,255,0.45);
  line-height: 1.85;
  margin:      0;
}

/* HOW WE WORK — TEAM STRIP */
.au-team-wrap {
  position:   relative;
  z-index:    2;
  padding:    30px 0 60px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.au-team-header  { margin-bottom: 50px; }

.au-team-title {
  font-size:      clamp(40px, 6vw, 90px);
  font-weight:    900;
  letter-spacing: -3px;
  color:          var(--clr-white);
  line-height:    0.95;
  margin:         0;
}

.au-team-title span {
  background: linear-gradient(90deg, var(--clr-accent2), var(--clr-accent3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

.au-team-card {
  border-radius: var(--radius-card);
  overflow:      hidden;
  background:    rgba(255,255,255,0.025);
  border:        1px solid rgba(255,255,255,0.07);
  transition:    transform var(--transition-med),
                 box-shadow var(--transition-med),
                 border-color var(--transition-med);
}

.au-team-card:hover {
  transform:    translateY(-8px);
  box-shadow:   0 30px 70px rgba(0,0,0,0.5), 0 0 30px rgba(236,72,153,0.08);
  border-color: rgba(236,72,153,0.2);
}

.au-team-img-wrap {
  position: relative;
  height:   240px;
  overflow: hidden;
}

.au-team-img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
  transition:  transform 0.6s ease, filter 0.6s ease;
  filter:      grayscale(20%);
}

.au-team-card:hover .au-team-img {
  transform: scale(1.07);
  filter:    grayscale(0%);
}

.au-team-img-overlay {
  position:       absolute;
  inset:          0;
  background:     linear-gradient(to top, rgba(3,3,3,0.85) 0%, transparent 55%);
  pointer-events: none;
}

.au-team-info { padding: 20px 20px 24px; }

.au-team-name {
  font-size:      clamp(15px, 1.6vw, 18px);
  font-weight:    800;
  color:          var(--clr-white);
  margin:         0 0 4px;
  letter-spacing: -0.3px;
}

.au-team-role {
  font-size:      12px;
  color:          var(--clr-accent);
  font-weight:    600;
  letter-spacing: 0.5px;
  margin:         0 0 10px;
  text-transform: uppercase;
}

.au-team-vibe {
  font-size:    13px;
  color:        rgba(255,255,255,0.35);
  font-style:   italic;
  line-height:  1.6;
  margin:       0;
  border-left:  2px solid rgba(139,92,246,0.3);
  padding-left: 10px;
}

/* CTA BANNER */
.au-cta-banner {
  position:   relative;
  z-index:    2;
  padding:    clamp(40px, 6vw, 80px) 0 clamp(40px, 6vw, 60px);
  text-align: center;
  overflow:   hidden;
  /* GSAP initial */
  opacity:   0;
  transform: scale(0.96) translateY(60px);
}

.au-cta-glow {
  position:       absolute;
  width:          clamp(400px, 60vw, 800px);
  height:         clamp(400px, 60vw, 800px);
  background:     radial-gradient(circle, rgba(139,92,246,0.16), transparent 65%);
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  filter:         blur(80px);
  pointer-events: none;
  z-index:        0;
}

.au-cta-line {
  position:       absolute;
  left:           5%;
  width:          90%;
  height:         1px;
  background:     linear-gradient(90deg, transparent, rgba(139,92,246,0.25), rgba(236,72,153,0.2), transparent);
  pointer-events: none;
  z-index:        1;
  transform:      scaleX(0);
}

.au-cta-line-top    { top:    0; }
.au-cta-line-bottom { bottom: 0; }

.au-cta-inner { position: relative; z-index: 2; }
.au-cta-inner .au-eyebrow { text-align: center; }

.au-cta-heading {
  font-size:      clamp(32px, 6vw, 100px);
  font-weight:    900;
  letter-spacing: clamp(-1px, -0.3vw, -3px);
  color:          var(--clr-white);
  line-height:    1.05;
  margin:         0 0 50px;
  /* GSAP initial */
  opacity:   0;
  transform: translateY(50px);
}

.au-cta-highlight {
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent2), var(--clr-accent3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* GSAP initial */
  opacity:   0;
  transform: translateX(-30px);
}

.au-cta-actions {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             20px;
  flex-wrap:       wrap;
  /* GSAP initial */
  opacity:   0;
  transform: translateY(30px);
}

.au-cta-primary {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  padding:         clamp(14px, 2vw, 18px) clamp(28px, 3vw, 44px);
  border-radius:   var(--radius-pill);
  background:      linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
  color:           var(--clr-white);
  font-size:       clamp(13px, 1.5vw, 15px);
  font-weight:     700;
  letter-spacing:  0.5px;
  text-decoration: none;
  border:          none;
  cursor:          pointer;
  transition:      transform var(--transition-base),
                   box-shadow var(--transition-base),
                   opacity var(--transition-base);
  box-shadow:      0 10px 40px rgba(139,92,246,0.35);
  min-height:      44px;
}

.au-cta-primary:hover  { transform: translateY(-3px) scale(1.03); box-shadow: 0 20px 60px rgba(139,92,246,0.5); opacity: 0.95; }
.au-cta-primary:active { transform: translateY(-1px) scale(1.01); }

/* OVERLAP SYSTEM */
#section-aboutus {
  z-index:    6;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.7);
}

/* ABOUT US RESPONSIVE */
@media (max-width: 1024px) {
  .au-split-inner  { grid-template-columns: 1fr; gap: 40px; }
  .au-opening-sub  { flex-direction: column; gap: 24px; }
  .au-team-strip   { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .au-team-img-wrap { height: 220px; }
  .au-team-title   { font-size: clamp(36px, 5vw, 60px); letter-spacing: -2px; }
}

@media (max-width: 768px) {
  .au-container    { padding: 0 16px; }
  .au-opening      { padding: 80px 0 50px; }

  .au-hl-line      { font-size: clamp(36px, 10vw, 52px); letter-spacing: -2px; }

  .au-opening-sub  { flex-direction: column; gap: 20px; }
  .au-scroll-hint  { display: none; }

  .au-split-inner     { grid-template-columns: 1fr; gap: 40px; }
  .au-split-img-stack { height: 280px; }
  .au-img-card-back   { height: 220px; }
  .au-img-card-front  { height: 240px; }

  .au-team-strip    { grid-template-columns: 1fr; gap: 16px; }
  .au-team-img-wrap { height: 200px; }
  .au-team-info     { padding: 16px 16px 20px; }
  .au-team-name     { font-size: 15px; }
  .au-team-vibe     { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.5); }
  .au-team-card:hover { transform: none; }

  .au-cta-heading  { font-size: 36px; letter-spacing: -1.5px; }
  .au-team-title   { font-size: 38px; letter-spacing: -1.5px; }
}

@media (max-width: 480px) {
  .au-hl-line         { font-size: clamp(28px, 9vw, 42px); letter-spacing: -1.5px; }
  .au-split-img-stack { height: 240px; }
  .au-img-card-back   { height: 180px; }
  .au-img-card-front  { height: 200px; }
  .au-cta-heading     { font-size: 30px; }
  .au-badge-num       { font-size: 18px; }
  .au-badge-txt       { font-size: 10px; }
  .au-img-badge       { right: 5px; padding: 8px 12px; }
  .au-team-strip      { grid-template-columns: 1fr; gap: 14px; }
  .au-team-img-wrap   { height: 180px; }
  .au-team-info       { padding: 14px 14px 18px; }
  .au-team-name       { font-size: 14px; }
  .au-team-role       { font-size: 11px; }
  .au-team-vibe       { font-size: 11px; color: rgba(255,255,255,0.5); }
  .au-team-title      { font-size: 32px; letter-spacing: -1px; }
}

/* ============================================================
   ABOUT SECTION (legacy .about-section — kept for .reveal)
============================================================ */
.about-section {
  position:    relative;
  min-height:  50vh;
  background:  #050505;
  display:     flex;
  align-items: center;
  overflow:    hidden;
  padding:     clamp(40px, 6vw, 80px) clamp(16px, 4vw, 40px);
}

.about-bg {
  position:   absolute;
  inset:      0;
  background: radial-gradient(circle at 20% 20%, rgba(139,92,246,0.12), transparent),
              radial-gradient(circle at 80% 80%, rgba(236,72,153,0.10), transparent),
              #050505;
  z-index:    1;
}

.about-container {
  position:  relative;
  z-index:   2;
  max-width: 1100px;
  margin:    auto;
  width:     100%;
}

.about-title {
  font-size:     clamp(36px, 7vw, 80px);
  font-weight:   800;
  margin-bottom: 40px;
  line-height:   1.1;
  background:    linear-gradient(90deg, #fff, var(--clr-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-heading {
  font-size:     clamp(22px, 3.5vw, 38px);
  margin-bottom: 25px;
  color:         var(--clr-white);
}

.brand {
  font-weight: 800;
  color:       var(--clr-accent);
}

.about-text {
  font-size:      clamp(14px, 1.8vw, 18px);
  font-weight:    400;
  line-height:    1.9;
  margin-bottom:  22px;
  color:          rgba(255,255,255,0.65);
  letter-spacing: 0.3px;
  transition:     color var(--transition-base);
}

.about-text:hover                    { color: rgba(255,255,255,0.95); }
.about-text.highlight,
.about-text.bold                     { font-weight: 600; color: var(--clr-white); }

.reveal {
  opacity:   0;
  transform: translateY(40px);
}

@media (max-width: 768px) {
  .about-title   { font-size: 36px; }
  .about-heading { font-size: 22px; }
  .about-text    { font-size: 14px; }
}

/* ============================================================
   BLOGS SECTION
============================================================ */
.blogs-section {
  position:   relative;
  background: var(--clr-surface);
  padding:    40px 0 80px;
  overflow:   hidden;
  z-index:    5;
}

.blogs-bg-glow {
  position:       absolute;
  border-radius:  50%;
  filter:         blur(120px);
  pointer-events: none;
  z-index:        0;
}

.glow-1 {
  width:      clamp(300px, 50vw, 600px);
  height:     clamp(300px, 50vw, 600px);
  background: radial-gradient(circle, rgba(139,92,246,0.18), transparent 70%);
  top:        -100px;
  right:      -100px;
}

.glow-2 {
  width:      clamp(250px, 40vw, 500px);
  height:     clamp(250px, 40vw, 500px);
  background: radial-gradient(circle, rgba(236,72,153,0.12), transparent 70%);
  bottom:     100px;
  left:       -80px;
}

.glow-3 {
  width:      clamp(200px, 35vw, 400px);
  height:     clamp(200px, 35vw, 400px);
  background: radial-gradient(circle, rgba(56,189,248,0.08), transparent 70%);
  top:        50%;
  left:       40%;
  transform:  translate(-50%, -50%);
}

.blogs-grain {
  position:         absolute;
  inset:            0;
  z-index:          1;
  opacity:          0.035;
  pointer-events:   none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size:  180px 180px;
  background-repeat: repeat;
}

.blogs-header {
  position:   relative;
  z-index:    2;
  text-align: center;
  max-width:  900px;
  margin:     0 auto 60px;
  padding:    0 clamp(16px, 4vw, 30px);
  overflow:   hidden;
}

.blogs-eyebrow {
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 4px;
  color:          var(--clr-accent);
  margin-bottom:  20px;
  /* GSAP initial */
  opacity:   0;
  transform: translateY(20px);
}

.blogs-title {
  font-size:      clamp(52px, 9vw, 140px);
  font-weight:    900;
  line-height:    0.9;
  letter-spacing: -3px;
  margin:         0 0 30px;
  display:        block;
}

.blogs-title-line {
  display:     block;
  opacity:     0;
  transform:   translateY(80px);
}

.blogs-title-line[data-line="1"] { color: var(--clr-white); }

.blogs-title-line[data-line="2"] {
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent2), var(--clr-accent3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.blogs-title-dot {
  color:               var(--clr-accent2);
  -webkit-text-fill-color: var(--clr-accent2);
}

.blogs-subtitle {
  font-size:   clamp(14px, 1.6vw, 17px);
  color:       var(--clr-muted);
  line-height: 1.7;
  max-width:   520px;
  margin:      0 auto;
  /* GSAP initial */
  opacity:   0;
  transform: translateY(30px);
}

/* FEATURED CARD */
.blogs-featured-wrap {
  position:  relative;
  z-index:   2;
  max-width: var(--max-w);
  margin:    0 auto 80px;
  padding:   0 clamp(16px, 3vw, 40px);
  /* GSAP initial */
  opacity:   0;
  transform: translateY(60px);
}

.blog-featured-card {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 24px;
  overflow:      hidden;
  border:        1px solid rgba(255,255,255,0.07);
  background:    rgba(255,255,255,0.03);
  transition:    transform var(--transition-med), box-shadow var(--transition-med);
}

.blog-featured-card:hover {
  transform:  translateY(-6px);
  box-shadow: 0 40px 100px rgba(139,92,246,0.15);
}

.blog-featured-img-wrap {
  position:   relative;
  overflow:   hidden;
  min-height: 380px;
  height:     100%;
}

.blog-featured-img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
  transition:  transform 0.7s ease;
}

.blog-featured-card:hover .blog-featured-img { transform: scale(1.05); }

.blog-featured-img-overlay {
  position:       absolute;
  inset:          0;
  background:     linear-gradient(to top, rgba(0,0,0,0.5), transparent 60%);
  pointer-events: none;
}

.blog-featured-content {
  padding:         clamp(24px, 4vw, 50px);
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  background:      rgba(10,10,15,0.8);
}

/* SHARED BLOG TAG */
.blog-tag {
  position:       absolute;
  top:            20px;
  left:           20px;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding:        5px 14px;
  border-radius:  50px;
  background:     rgba(139,92,246,0.25);
  color:          #c4b5fd;
  border:         1px solid rgba(139,92,246,0.4);
  z-index:        3;
}

.blog-meta {
  font-size:      12px;
  color:          rgba(255,255,255,0.35);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom:  14px;
}

.blog-featured-title {
  font-size:      clamp(20px, 2.5vw, 36px);
  font-weight:    800;
  line-height:    1.2;
  color:          var(--clr-white);
  margin-bottom:  18px;
  letter-spacing: -0.5px;
}

.blog-featured-excerpt {
  font-size:     clamp(13px, 1.4vw, 15px);
  color:         rgba(255,255,255,0.55);
  line-height:   1.8;
  margin-bottom: 32px;
}

.blog-read-more {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-size:       13px;
  font-weight:     700;
  letter-spacing:  1px;
  text-transform:  uppercase;
  color:           var(--clr-accent);
  text-decoration: none;
  transition:      gap var(--transition-base), color var(--transition-base);
}

.blog-read-more:hover     { gap: 14px; color: #c4b5fd; }
.blog-read-more svg       { transition: transform var(--transition-base); }
.blog-read-more:hover svg { transform: translateX(4px); }

/* BLOG CARDS GRID */
.blogs-grid-wrap {
  position:  relative;
  z-index:   2;
  max-width: var(--max-w);
  margin:    0 auto 80px;
  padding:   0 clamp(16px, 3vw, 40px);
}

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

.blog-card {
  border-radius: var(--radius-card);
  overflow:      hidden;
  background:    rgba(255,255,255,0.03);
  border:        1px solid rgba(255,255,255,0.07);
  transition:    transform var(--transition-med), box-shadow var(--transition-med);
  /* GSAP initial */
  opacity:     0;
  transform:   translateY(70px);
}

.blog-card:hover {
  transform:  translateY(-8px) scale(1.02);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 0 30px rgba(139,92,246,0.08);
}

.blog-card-img-wrap {
  position: relative;
  overflow: hidden;
  height:   180px;
}

.blog-card-img-overlay {
  position:       absolute;
  inset:          0;
  background:     linear-gradient(to top, rgba(0,0,0,0.4), transparent 60%);
  pointer-events: none;
}

.blog-card-img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
  transition:  transform 0.6s ease;
}

.blog-card:hover .blog-card-img { transform: scale(1.08); }

.blog-card-body { padding: 20px 20px 24px; }

.blog-card-title {
  font-size:      15px;
  font-weight:    700;
  color:          var(--clr-white);
  line-height:    1.35;
  margin:         0 0 10px;
  letter-spacing: -0.2px;
}

.blog-card-excerpt {
  font-size:     13px;
  color:         rgba(255,255,255,0.45);
  line-height:   1.75;
  margin-bottom: 16px;
}

/* HORIZONTAL QUOTE STRIP */
.blogs-strip-wrap {
  position:  relative;
  z-index:   2;
  max-width: var(--max-w);
  margin:    0 auto 80px;
  padding:   0 clamp(16px, 3vw, 40px);
  /* GSAP initial */
  opacity:   0;
  transform: translateX(-60px);
}

.blogs-strip-label {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 3px;
  color:          rgba(255,255,255,0.25);
  margin-bottom:  22px;
}

.blogs-strip {
  display:         flex;
  gap:             16px;
  overflow-x:      auto;
  padding-bottom:  12px;
  scrollbar-width: none;
  touch-action:    pan-x;
}

.blogs-strip::-webkit-scrollbar { display: none; }

.blog-strip-card {
  min-width:     260px;
  flex-shrink:   0;
  padding:       24px;
  border-radius: 18px;
  border:        1px solid rgba(255,255,255,0.07);
  background:    rgba(255,255,255,0.025);
  position:      relative;
  transition:    transform var(--transition-base), border-color var(--transition-base);
}

.blog-strip-card:hover {
  transform:    translateY(-4px);
  border-color: rgba(139,92,246,0.3);
}

.strip-card-num {
  display:        block;
  font-size:      11px;
  font-weight:    700;
  color:          var(--clr-accent);
  letter-spacing: 2px;
  margin-bottom:  14px;
}

.strip-card-text {
  font-size:     14px;
  color:         rgba(255,255,255,0.65);
  line-height:   1.75;
  margin:        0 0 18px;
  font-style:    italic;
}

.strip-card-cat {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.2);
}

/* BLOGS CTA */
.blogs-cta-wrap {
  position:   relative;
  z-index:    2;
  text-align: center;
  padding:    0 clamp(16px, 4vw, 40px);
  /* GSAP initial */
  opacity:   0;
  transform: translateY(40px);
}

.blogs-cta-label {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 3px;
  color:          rgba(255,255,255,0.25);
  margin-bottom:  20px;
}

/* BLOGS RESPONSIVE */
@media (max-width: 1024px) {
  .blogs-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .blogs-section          { padding: 60px 0; }
  .blogs-title            { font-size: 52px; letter-spacing: -2px; }
  .blog-featured-card     { grid-template-columns: 1fr; }
  .blog-featured-img-wrap { min-height: 220px; }
  .blog-featured-content  { padding: 24px 20px 30px; }

  .blogs-featured-wrap,
  .blogs-grid-wrap,
  .blogs-strip-wrap       { padding: 0 16px; }

  .blogs-grid             { grid-template-columns: 1fr; gap: 16px; }
  .blog-strip-card        { min-width: 240px; }
}

@media (max-width: 480px) {
  .blogs-title     { font-size: 40px; letter-spacing: -1.5px; }
  .blog-strip-card { min-width: 200px; }
  .blogs-cta-label { letter-spacing: 1.5px; }
}

/* ============================================================
   TOUCH-DEVICE OVERRIDES
============================================================ */
@media (hover: none) {
  .blog-card:hover,
  .au-team-card:hover,
  .blog-featured-card:hover {
    transform:  none;
    box-shadow: none;
  }
}

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .blogs-ticker-track,
  .marquee-track,
  .au-marquee-fwd,
  .au-marquee-rev,
  .au-scroll-line,
  .clients-logo-track,
  .clients-logo-track--rev,
  .scroll-line {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}

/* ============================================================
   MODAL
============================================================ */
.au-modal-overlay {
  position:             fixed;
  inset:                0;
  background:           rgba(0,0,0,0.75);
  backdrop-filter:      blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:              flex;
  align-items:          center;
  justify-content:      center;
  z-index:              9999;
  opacity:              0;
  visibility:           hidden;
  pointer-events:       none;
  transition:           opacity 0.4s ease, visibility 0.4s ease;
  padding:              16px;
}

.au-modal-overlay.active {
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
}

.au-modal-box {
  width:         100%;
  max-width:     520px;
  padding:       clamp(24px, 4vw, 40px) clamp(20px, 3vw, 35px);
  border-radius: 20px;
  background:    rgba(20,20,30,0.9);
  border:        1px solid var(--clr-border);
  box-shadow:    0 40px 120px rgba(0,0,0,0.8);
  transform:     translateY(40px) scale(0.95);
  transition:    transform 0.4s ease;
  max-height:    90vh;
  overflow-y:    auto;
  overscroll-behavior: contain; /* replaces deprecated -webkit-overflow-scrolling */
  position:      relative;
}

.au-modal-overlay.active .au-modal-box {
  transform: translateY(0) scale(1);
}

.au-modal-close {
  position:        absolute;
  top:             15px;
  right:           20px;
  background:      none;
  border:          none;
  font-size:       26px;
  color:           rgba(255,255,255,0.6);
  cursor:          pointer;
  min-width:       44px;
  min-height:      44px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      color var(--transition-base);
}

.au-modal-close:hover { color: var(--clr-white); }

.au-modal-title {
  font-size:     clamp(22px, 4vw, 28px);
  font-weight:   800;
  color:         var(--clr-white);
  margin-bottom: 10px;
}

.au-modal-sub {
  font-size:     14px;
  color:         rgba(255,255,255,0.6);
  margin-bottom: 25px;
}

.au-modal-form {
  display:        flex;
  flex-direction: column;
  gap:            15px;
}

.au-form-group input,
.au-form-group textarea {
  width:          100%;
  padding:        14px 16px;
  border-radius:  10px;
  border:         1px solid rgba(255,255,255,0.08);
  background:     rgba(255,255,255,0.04);
  color:          var(--clr-white);
  font-size:      16px; /* 16px prevents iOS auto-zoom on focus */
  font-family:    inherit;
  outline:        none;
  transition:     border-color var(--transition-base), background var(--transition-base);
  -webkit-appearance: none;
  appearance:     none;
  resize:         vertical;
}

.au-form-group input:focus,
.au-form-group textarea:focus {
  border-color: var(--clr-accent);
  background:   rgba(255,255,255,0.06);
}

.au-form-submit {
  margin-top:    10px;
  padding:       14px;
  border-radius: var(--radius-pill);
  border:        none;
  font-weight:   700;
  font-size:     15px;
  font-family:   inherit;
  background:    linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
  color:         var(--clr-white);
  cursor:        pointer;
  transition:    transform var(--transition-base), box-shadow var(--transition-base);
  min-height:    44px;
}

.au-form-submit:hover {
  transform:  translateY(-2px);
  box-shadow: 0 10px 30px rgba(139,92,246,0.4);
}

/* ============================================================
   FOOTER
============================================================ */
.nx-footer {
  position:   relative;
  background: radial-gradient(circle at 20% 20%, #0f0f0f, #000);
  padding:    clamp(60px, 10vw, 140px) clamp(16px, 3vw, 20px) 50px;
  overflow:   hidden;
}

/* Ambient glow — CSS-only, compositor-friendly */
.nx-footer::before {
  content:        "";
  position:       absolute;
  width:          600px;
  height:         600px;
  background:     radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%);
  top:            -150px;
  left:           -150px;
  filter:         blur(120px);
  animation:      nxFloatGlow 12s ease-in-out infinite alternate;
  pointer-events: none;
  will-change:    transform;
}

@keyframes nxFloatGlow {
  from { transform: translate(0, 0);       }
  to   { transform: translate(80px, 60px); }
}

.nx-footer-main {
  width:         min(1200px, 100%);
  margin:        auto;
  background:    rgba(255,255,255,0.05);
  border-radius: 22px;
  padding:       clamp(30px, 5vw, 70px) clamp(16px, 4vw, 50px) clamp(20px, 3vw, 30px);
  border:        1px solid var(--clr-border);
  box-shadow:    0 40px 120px rgba(0,0,0,0.7), inset 0 0 0.5px rgba(255,255,255,0.3);
  animation:     nxDropMain 1.2s ease-out both;
}

@keyframes nxDropMain {
  from { transform: translateY(120px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.nx-footer-container {
  display:         flex;
  justify-content: space-between;
  gap:             clamp(30px, 5vw, 80px);
  flex-wrap:       wrap;
}

.nx-footer-col {
  flex:      1;
  min-width: 200px;
}

.nx-footer-logo {
  font-size:      24px;
  font-weight:    600;
  letter-spacing: 1px;
  background:     linear-gradient(90deg, #fff, #bbb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom:  20px;
}

.nx-footer-text {
  color:         rgba(255,255,255,0.6);
  line-height:   1.7;
  margin-bottom: 25px;
  font-size:     14px;
}

.nx-footer-contact p {
  font-size:     14px;
  color:         rgba(255,255,255,0.75);
  margin-bottom: 6px;
  transition:    color var(--transition-base), transform var(--transition-base);
}

.nx-footer-contact p:hover { color: var(--clr-white); transform: translateX(4px); }

.nx-footer-contact a {
  color:           inherit;
  text-decoration: none;
}

.nx-footer-links {
  display:   flex;
  gap:       clamp(24px, 4vw, 70px);
  flex-wrap: wrap;
}

.nx-footer-group h4 {
  margin-bottom:  18px;
  font-size:      15px;
  letter-spacing: 0.5px;
  color:          var(--clr-white);
  position:       relative;
}

.nx-footer-group h4::after {
  content:    "";
  position:   absolute;
  width:      0%;
  height:     2px;
  left:       0;
  bottom:     -6px;
  background: linear-gradient(90deg, var(--clr-white), transparent);
  transition: width 0.4s ease;
}

.nx-footer-group:hover h4::after { width: 100%; }

.nx-footer-group a {
  display:         block;
  text-decoration: none;
  color:           rgba(255,255,255,0.6);
  margin-bottom:   10px;
  font-size:       14px;
  position:        relative;
  transition:      color var(--transition-base), transform var(--transition-base);
}

.nx-footer-group a::before {
  content:    "";
  position:   absolute;
  left:       -10px;
  top:        50%;
  width:      0;
  height:     2px;
  background: var(--clr-white);
  transform:  translateY(-50%);
  transition: width 0.3s ease;
}

.nx-footer-group a:hover           { color: var(--clr-white); transform: translateX(6px); }
.nx-footer-group a:hover::before   { width: 6px; }

.nx-footer-bottom {
  text-align:     center;
  margin-top:     50px;
  font-size:      13px;
  color:          rgba(255,255,255,0.5);
  letter-spacing: 0.5px;
  border-top:     1px solid var(--clr-border);
  padding-top:    25px;
}

/* FOOTER RESPONSIVE */
@media (max-width: 992px) {
  .nx-footer-links { gap: 30px; }
}

@media (max-width: 768px) {
  .nx-footer-container {
    flex-direction: column;
    gap:            35px;
  }

  .nx-footer-links {
    flex-direction: row;
    gap:            24px;
    flex-wrap:      wrap;
  }

  .nx-footer-col {
    min-width: unset;
    width:     100%;
  }
}

@media (max-width: 480px) {
  .nx-footer-links { flex-direction: column; gap: 24px; }
}

/* ============================================================
   MOBILE SCROLL-ANIMATION RESET (≤ 767px)
   All GSAP initial states (opacity:0, transform offsets)
   are neutralised here so elements appear naturally on mobile
   where JS scroll animations are disabled.
   Desktop is completely unaffected.
============================================================ */
@media (max-width: 767px) {

  .hero-text .left,
  .hero-text .right   { transform: none; opacity: 1; }

  .services-section   { opacity: 1; }
  .srv-eyebrow        { opacity: 1; transform: none; }
  .srv-title-line     { opacity: 1; transform: none; }
  .srv-header-right   { opacity: 1; transform: none; }
  .blogs-ticker-wrap  { opacity: 1; }
  .srv-card           { opacity: 1; transform: none; }

  /* Clients section — logo rows always visible on mobile */
  .clients-scroll-section { opacity: 1; }

  .blogs-eyebrow      { opacity: 1; transform: none; }
  .blogs-title-line   { opacity: 1; transform: none; }
  .blogs-subtitle     { opacity: 1; transform: none; }
  .blogs-featured-wrap { opacity: 1; transform: none; }
  .blog-card          { opacity: 1; transform: none; }
  .blogs-strip-wrap   { opacity: 1; transform: none; }
  .blogs-cta-wrap     { opacity: 1; transform: none; }

  .au-eyebrow         { opacity: 1; transform: none; }
  .au-hl-line         { opacity: 1; transform: none; }
  .au-opening-sub     { opacity: 1; transform: none; }
  .au-marquee-divider { opacity: 1; }
  .au-split-left      { opacity: 1; transform: none; }
  .au-story-block     { opacity: 1; transform: none; }

  .au-cta-banner      { opacity: 1; transform: none; }
  .au-cta-heading     { opacity: 1; transform: none; }
  .au-cta-highlight   { opacity: 1; transform: none; }
  .au-cta-actions     { opacity: 1; transform: none; }

  .reveal             { opacity: 1; transform: none; }
}