/* ============================================
   BIRLAB — ULTRA DESIGN SYSTEM v7
   Brand: Purple #640FFF · Green #0FFD3C · Yellow #FFB20F
   Orange-Red #FF5011 · Black #000 · Gray #E3E3E5
   ============================================ */

/* --- Brand Variables — WHITE THEME --- */
:root {
  --color-bg-black-color: #ffffff !important;
  --second-color: #640FFF !important;
  --third-color: #640FFF !important;
  --main-color: #111111 !important;
  --purple: #640FFF;
  --purple-light: #8B5CF6;
  --black: #111111;
  --gray: #E3E3E5;
  --gray-dim: rgba(0,0,0,0.06);
  --purple-glow: rgba(100,15,255,0.2);
  --serif: 'Outfit', sans-serif;
  --body-font: 'Outfit', sans-serif;
}
html { scroll-behavior: smooth; overflow-x: hidden; }
body { background: #fff !important; color: #111 !important; font-family: 'Outfit', sans-serif !important; overflow-x: hidden; }
.page-content { background: #fff !important; position: relative; z-index: 100; }
.main-strip { background: transparent !important; }

/* ============================================
   1. PAGE LOADER — GRADIENT
   ============================================ */
.page-loader {
  position: fixed; inset: 0;
  background: #fff;
  z-index: 9999999;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.page-loader::after {
  content: '';
  width: 32px; height: 32px;
  border: 2px solid transparent;
  border-top-color: var(--purple);
  border-right-color: var(--purple);
  border-radius: 50%;
  animation: loaderSpin 0.7s linear infinite;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }

/* ============================================
   2. SCROLL PROGRESS — GRADIENT BAR
   ============================================ */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  width: 0%; height: 3px;
  background: var(--purple);
  z-index: 999999; pointer-events: none;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================
   3. CUSTOM CURSOR — PURPLE/GREEN
   ============================================ */
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 6px; height: 6px;
  background: var(--purple);
  border-radius: 50%; pointer-events: none;
  z-index: 99999999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.3s;
  box-shadow: 0 0 8px var(--purple-glow);
}
.cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 38px; height: 38px;
  border: 1.5px solid rgba(100,15,255,0.2);
  border-radius: 50%; pointer-events: none;
  z-index: 99999998;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, border-color 0.3s, background 0.3s;
}
.cursor-dot.hovering {
  width: 14px; height: 14px;
  background: var(--purple);
  box-shadow: 0 0 16px var(--purple-glow);
}
.cursor-ring.hovering {
  width: 55px; height: 55px;
  border-color: rgba(100,15,255,0.15);
  background: rgba(100,15,255,0.03);
}

/* ============================================
   4. FILM GRAIN — SUBTLE
   ============================================ */
.grain-overlay {
  position: fixed; inset: 0; z-index: 10000;
  pointer-events: none; opacity: 0.015;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' 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-repeat: repeat; background-size: 128px;
  animation: grain 0.3s steps(2) infinite;
}
@keyframes grain {
  0%  { transform: translate(0,0); }
  50% { transform: translate(-1px,1px); }
  100%{ transform: translate(1px,-1px); }
}

/* ============================================
   5. FLOATING AURORA SHAPES
   ============================================ */
.aurora-shape {
  position: fixed; border-radius: 50%;
  filter: blur(120px); pointer-events: none;
  z-index: -1; opacity: 0.04;
  animation: auroraFloat 20s ease-in-out infinite alternate;
}
.aurora-shape.a1 {
  width: 600px; height: 600px;
  background: var(--purple);
  top: -10%; left: -10%;
}
.aurora-shape.a2 {
  width: 500px; height: 500px;
  background: var(--purple);
  bottom: 10%; right: -5%;
  animation-delay: -7s;
  animation-duration: 25s;
}
.aurora-shape.a3 {
  width: 400px; height: 400px;
  background: var(--purple);
  top: 40%; left: 50%;
  animation-delay: -14s;
  animation-duration: 30s;
}
@keyframes auroraFloat {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(50px, -30px) scale(1.1); }
  66%  { transform: translate(-30px, 50px) scale(0.9); }
  100% { transform: translate(20px, -20px) scale(1.05); }
}

/* ============================================
   6. NAVBAR — FLOATING PILL / BUBBLE
   ============================================ */
.navbar {
  position: fixed !important;
  top: 18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: 90vw !important;
  background: var(--purple) !important;
  padding: 8px 10px 8px 14px !important;
  border-radius: 60px !important;
  z-index: 9000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  box-shadow: 0 4px 30px rgba(100,15,255,0.25), 0 2px 10px rgba(0,0,0,0.1) !important;
  transition: box-shadow 0.4s, transform 0.4s, top 0.4s !important;
  overflow: visible !important;
}
.w-nav-overlay {
  overflow: visible !important;
  width: auto !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.w-nav-overlay[style*="display: none"],
.w-nav-overlay[data-nav-menu-open=""] {
  pointer-events: none !important;
}

/* Ensure form sections are clickable above any overlays */
.form-block,
.contact-wrapper,
.subscribe-form,
.footer-grid-second {
  position: relative;
  z-index: 10;
}
.text-field-main,
.w-input,
.w-select,
.w-checkbox,
.w-checkbox-input,
.checkbox-field-2,
.subscribe-field-footer,
.button-subscribe {
  position: relative;
  z-index: 11;
  pointer-events: auto !important;
}

/* Footer subscribe — icon button */
.subscribe-form {
  display: flex;
  align-items: center;
  gap: 0;
}
.button-subscribe.subscribe {
  background-size: 24px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  min-width: 48px;
  padding: 10px !important;
}
.navbar.scrolled {
  background: var(--purple) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 6px 40px rgba(100,15,255,0.3), 0 2px 15px rgba(0,0,0,0.15) !important;
}

/* Logo — white version inside pill */
.logo-link {
  order: -1 !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.main-logo {
  width: 38px !important;
  height: auto !important;
}

/* Nav links container */
.last-item {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}
.nav-menu {
  align-items: center !important;
  gap: 4px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
@media (min-width: 992px) {
  .nav-menu { display: flex !important; }
}

/* Nav link pills */
.navigation-link {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.85) !important;
  padding: 7px 16px !important;
  border-radius: 30px !important;
  transition: background 0.3s, color 0.3s !important;
  height: auto !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}
.navigation-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.15) !important;
}
.navigation-link.w--current {
  color: var(--purple) !important;
  background: #fff !important;
  font-weight: 600 !important;
}
.button-text.coma { display: none !important; }
.line-below { display: none !important; }

/* Burger menu — plain hamburger lines (about, work, contact pages) */
.hamburger-line {
  width: 22px;
  height: 2px;
  background-color: #fff;
  margin: 5px 0;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.menu-button.w--open .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.menu-button.w--open .hamburger-line:nth-child(2) {
  opacity: 0;
}
.menu-button.w--open .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Burger menu — white icon on purple bg */
.menu-button .lottie-white {
  filter: none !important;
}
.menu-button .lottie-white svg path,
.menu-button .lottie-white svg rect,
.menu-button .lottie-white svg line {
  stroke: #fff !important;
  fill: #fff !important;
}
.w-nav-button {
  color: #fff !important;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  padding: 10px !important;
}
/* Hamburger icon — wide visible lines */
.w-icon-nav-menu {
  color: #fff !important;
  font-size: 28px !important;
  width: 28px !important;
  height: 20px !important;
}
.w-icon-nav-menu::before {
  font-size: 28px !important;
}

/* ============================================
   7. HERO — FULL OVERRIDE
   ============================================ */
.hero-wrapper { height: 100vh !important; position: relative; background: #fff !important; overflow: hidden !important; }
.hero-first {
  z-index: 25; height: 100vh; min-height: 100vh;
  display: flex; flex-direction: column;
  position: relative; top: 0;
  background: #fff !important;
}
.hero-preview {
  background: #fff !important;
}
.hero-content {
  background: #fff !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  overflow: visible !important;
  position: relative !important;
  margin-bottom: 0 !important;
  height: 100% !important;
}
.hero-text-wrapper {
  max-width: 90vw !important;
  align-items: center !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.hero-home-flex {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
}
.hero-overflow-title {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
}
.top-title-overflow {
  overflow: visible !important;
}
.hero-main-title {
  color: #640FFF !important;
  font-family: 'Outfit', sans-serif !important;
  text-shadow: none !important;
  font-size: clamp(52px, 10vw, 160px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.15 !important;
  position: relative;
  white-space: normal !important;
  text-align: center !important;
  width: 100% !important;
}
.hero-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* Hero — solid purple, no broken shimmer */
.hero-main-title.shimmer .hero-word {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #640FFF !important;
  animation: none !important;
  text-shadow: none !important;
}
.hero-main-title.sweep::after { display: none; }

/* Glitch effect — disabled to prevent shaking */
.hero-main-title.glitch-active {
  animation: none;
}

/* Hero badge */
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px;
  border: 1px solid rgba(100,15,255,0.2);
  border-radius: 30px;
  background: rgba(100,15,255,0.06);
  margin-bottom: clamp(20px, 3vw, 36px);
  transition: border-color 0.4s, background 0.4s;
}
.hero-badge:hover {
  border-color: rgba(100,15,255,0.4);
  background: rgba(100,15,255,0.08);
}
.hero-badge span {
  font-size: clamp(10px, 1.1vw, 12px);
  color: #666;
  letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 500;
}
.hero-badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--purple);
  animation: dotPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(100,15,255,0.4); }
  50%      { opacity: 0.5; box-shadow: 0 0 0 8px rgba(100,15,255,0); }
}

/* Hero subtitle */
.hero-subtitle {
  font-size: clamp(14px, 1.4vw, 18px);
  color: #666;
  font-weight: 400; line-height: 1.7;
  max-width: 520px;
  margin: clamp(20px, 3vw, 40px) auto 0;
  text-align: center;
}

/* Hero CTA row */
.hero-cta-row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 2.5vw, 32px);
  margin-top: clamp(30px, 4vw, 48px);
  flex-wrap: wrap;
}
.hero-link-subtle {
  font-size: clamp(12px, 1.2vw, 14px);
  color: #888;
  text-decoration: none; letter-spacing: 0.06em;
  transition: color 0.3s; font-weight: 500;
  position: relative;
}
.hero-link-subtle:hover { color: var(--purple); }
.hero-link-subtle::after {
  content: ''; position: absolute;
  bottom: -2px; left: 0; width: 0; height: 1px;
  background: var(--purple);
  transition: width 0.4s cubic-bezier(0.23,1,0.32,1);
}
.hero-link-subtle:hover::after { width: 100%; }

/* Hero particles */
.hero-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none; z-index: 5;
}

/* Hero ambient glow — hidden, no longer needed */
.hero-interaction {
  display: none !important;
}

/* Scroll track — rail between hero and services */
.scroll-track-wrapper {
  position: relative;
  height: 180px;
  margin-top: -60px;
  padding-top: 30px;
  display: flex;
  justify-content: center;
  background: transparent;
  z-index: 30;
  overflow: visible;
}
.scroll-track-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 70px;
  width: 1px;
  height: calc(100% - 70px);
  background: linear-gradient(to bottom, var(--purple), transparent);
  z-index: 1;
}
/* Scroll indicator — sits on the track */
.scroll-indicator {
  position: absolute !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: auto !important;
  z-index: 12;
  animation: indicatorPulse 2.5s ease-in-out infinite;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.scroll-indicator .scroll-text { color: #999 !important; background: #fff; padding: 0 8px; position: relative; z-index: 2; }
.scroll-indicator .scroll-arrow { border-color: var(--purple) !important; background: #fff; position: relative; z-index: 2; }
.scroll-arrow::after {
  border-right-color: var(--purple) !important;
  border-bottom-color: var(--purple) !important;
}
/* Hide CTA row from hero */
.hero-cta-row { display: none !important; }
@keyframes indicatorPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* Hero images warm hover */
.main-image {
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), box-shadow 0.5s ease !important;
}
.main-image:hover {
  box-shadow: 0 20px 60px rgba(100,15,255,0.15) !important;
}
.main-image .service-title {
  border-color: rgba(100,15,255,0.2) !important;
  backdrop-filter: blur(12px) !important;
}
.main-image:hover .service-title {
  background: var(--purple) !important;
  border-color: rgba(100,15,255,0.4) !important;
  box-shadow: 0 0 25px rgba(100,15,255,0.2) !important;
}

/* ============================================
   8. SECTION — GLOBAL OVERRIDES
   ============================================ */
.section {
  background-color: #fff !important;
  position: relative;
}
.container { max-width: 1400px !important; }
.subhead-main {
  color: #888 !important;
  font-weight: 400 !important;
}
.subhead-main._80 { max-width: 75% !important; }
.fade-gradient {
  background-image: linear-gradient(90deg, transparent, #fff 25%) !important;
}
.line-divider {
  background: var(--purple) !important;
  opacity: 0.15 !important; height: 1px !important;
}
.margin-250px { margin-top: 160px !important; }

/* ============================================
   9. BUTTONS — NEON BRAND
   ============================================ */
.button-3d {
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.23,1,0.32,1), box-shadow 0.35s !important;
}
.button-3d:hover {
  transform: perspective(600px) translateZ(10px) translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(100,15,255,0.2), 0 0 20px rgba(100,15,255,0.08) !important;
}
.button-face {
  background-color: var(--purple) !important;
  color: #fff !important; font-weight: 600 !important;
  transition: box-shadow 0.3s !important;
}
.button-face.hover {
  background-color: #111 !important;
  color: #fff !important;
}
.button-flex { margin: 3vw 0 !important; }

/* Pulse glow on CTA buttons */
.hero-cta-row .button-3d .button-face {
  animation: btnPulse 3s ease-in-out infinite;
}
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(100,15,255,0.3); }
  50%      { box-shadow: 0 0 25px 5px rgba(100,15,255,0.15); }
}

/* ============================================
   10a. AWARDS SECTION — YARIŞMALAR
   ============================================ */
.awards-section {
  background: #fff !important;
  padding: clamp(80px, 10vw, 130px) 5%;
  position: relative;
  z-index: 200;
}
.awards-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.awards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.award-card {
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s;
  display: flex;
  flex-direction: column;
}
.award-card:hover {
  border-color: rgba(100,15,255,0.2);
  box-shadow: 0 16px 48px rgba(100,15,255,0.1);
  transform: translateY(-4px);
}
.award-card-img {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.award-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1);
}
.award-card:hover .award-card-img img {
  transform: scale(1.05);
}
.award-card-body {
  padding: 28px 28px 32px;
}
.award-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  background: var(--purple);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.award-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  color: #111;
  line-height: 1.3;
  margin-bottom: 8px;
}
.award-desc {
  font-size: 15px;
  color: #666;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 767px) {
  .awards-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 32px;
  }
  .award-card-img { height: 180px; }
  .award-card-body { padding: 20px 20px 24px; }
}

/* ============================================
   10b. PRODUCTS SECTION — MƏHSULLARIMIZ
   ============================================ */
.products-section {
  background: #fff !important;
  padding: clamp(80px, 10vw, 130px) 5%;
  position: relative;
  z-index: 200;
}
.products-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.product-card {
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  border-color: rgba(100,15,255,0.2);
  box-shadow: 0 20px 60px rgba(100,15,255,0.1);
  transform: translateY(-6px);
}
.product-card-img {
  width: 100%;
  height: 260px;
  overflow: hidden;
  background: #f0f0f0;
}
.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1);
}
.product-card:hover .product-card-img img {
  transform: scale(1.05);
}
.product-card-body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  background: var(--purple);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 14px;
  width: fit-content;
}
.product-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 700;
  color: #111;
  line-height: 1.2;
  margin-bottom: 10px;
}
.product-desc {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  margin: 0 0 16px;
}
.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.product-tag {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(100,15,255,0.15);
  color: var(--purple);
  font-size: 12px;
  font-weight: 500;
  background: rgba(100,15,255,0.04);
}
.product-link {
  margin-top: auto;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--purple);
  text-decoration: none;
  transition: opacity 0.3s;
}
.product-link:hover {
  opacity: 0.7;
}
@media (max-width: 767px) {
  .products-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 32px;
  }
  .product-card-img { height: 200px; }
  .product-card-body { padding: 22px 20px 26px; }
}

/* ============================================
   10. SERVICES SHOWCASE — NEON CARDS
   ============================================ */
.services-showcase {
  position: relative; z-index: 200;
  background: #fff !important;
  padding: clamp(80px, 10vw, 140px) 5%; overflow: hidden;
}
.services-showcase::before {
  display: none;
}
.services-showcase-inner { max-width: 1100px; margin: 0 auto; }
.services-showcase-title {
  font-family: 'Outfit', sans-serif !important;
  color: #111; font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  text-align: left; margin-bottom: 12px;
  letter-spacing: -0.03em;
}
.services-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 18px; perspective: 1200px;
}
/* First card — spans 2 cols */
.sc-card:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1;
}
/* Third card (Dizayn) — full width */
.sc-card:nth-child(3) {
  grid-column: 1 / 4;
  grid-row: 2;
}
/* Cards 4 & 5 — row 3 */
.sc-card:nth-child(4) {
  grid-column: 1 / 2;
  grid-row: 3;
}
.sc-card:nth-child(5) {
  grid-column: 2 / 4;
  grid-row: 3;
}
.sc-card {
  position: relative; display: flex; flex-direction: column;
  align-items: flex-start; text-align: left;
  padding: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 32px) clamp(20px, 2.5vw, 28px);
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 20px; cursor: pointer;
  transform-style: preserve-3d;
  transition: border-color 0.5s, box-shadow 0.5s, background 0.5s, transform 0.5s;
  overflow: hidden;
}
.sc-card:hover {
  border-color: rgba(100,15,255,0.2);
  box-shadow: 0 16px 50px rgba(0,0,0,0.08), 0 0 25px rgba(100,15,255,0.05);
  background: #fff;
  transform: translateY(-4px);
}
.sc-card-num {
  font-size: 48px; font-weight: 800;
  color: rgba(100,15,255,0.06); letter-spacing: -0.03em;
  font-family: 'Outfit', sans-serif;
  line-height: 1; margin-bottom: 16px;
  transition: color 0.4s;
  position: static;
}
.sc-card:hover .sc-card-num { color: rgba(100,15,255,0.12); }
.sc-card-icon {
  width: 48px; height: 48px; margin-bottom: 20px;
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), filter 0.4s;
}
.sc-card:hover .sc-card-icon {
  transform: scale(1.12);
  filter: drop-shadow(0 6px 20px rgba(100,15,255,0.25));
}
.sc-card-icon svg { width: 100%; height: 100%; }
.sc-card-title {
  color: #111; font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 700; margin: 0 0 8px; transition: color 0.3s;
  font-family: 'Outfit', sans-serif;
}
.sc-card:hover .sc-card-title { color: var(--purple); }
.sc-card-desc {
  color: #888; font-size: clamp(12px, 1.1vw, 14px);
  line-height: 1.6; margin: 0; transition: color 0.3s;
}
.sc-card:hover .sc-card-desc { color: #555; }
.sc-card-shine {
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(100,15,255,0.06) 50%, transparent 70%);
  transition: left 0.8s ease; pointer-events: none;
}
.sc-card:hover .sc-card-shine { left: 160%; }
.sc-card::after {
  display: none;
}

/* ============================================
   11. MARQUEE RIBBON — BRAND COLORS
   ============================================ */
.marquee-ribbon {
  overflow: hidden; white-space: nowrap;
  padding: 18px 0;
  border-top: 1px solid rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  position: relative; z-index: 200;
  background: #fafafa !important;
}
.marquee-ribbon-track {
  display: inline-flex;
  animation: marquee 20s linear infinite;
}
.marquee-ribbon-track.reverse { animation-direction: reverse; }
.marquee-ribbon-track span {
  display: inline-flex; align-items: center;
  font-size: clamp(13px, 1.4vw, 16px); font-weight: 500;
  color: rgba(0,0,0,0.25);
  text-transform: uppercase; letter-spacing: 0.15em;
  padding: 0 30px; white-space: nowrap;
  transition: color 0.3s;
}
.marquee-ribbon:hover .marquee-ribbon-track span {
  color: rgba(0,0,0,0.45);
}
.marquee-ribbon-track span::after {
  content: '✦'; margin-left: 30px; font-size: 0.5em;
  color: var(--purple);
  -webkit-text-fill-color: var(--purple);
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-ribbon:hover .marquee-ribbon-track { animation-play-state: paused; }

/* Scroll-driven ribbon: no auto-animation, controlled by GSAP */
.marquee-ribbon.scroll-driven .scroll-driven-track {
  animation: none !important;
}

/* ============================================
   12. SECTION HEADERS — GRADIENT SERIF
   ============================================ */
.section-header { margin-bottom: clamp(35px, 5vw, 65px); }
.section-label {
  display: inline-block;
  font-size: clamp(10px, 1vw, 12px);
  color: var(--purple);
  letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 600; font-family: monospace;
  margin-bottom: clamp(12px, 1.5vw, 20px);
}
.section-heading {
  font-family: 'Outfit', sans-serif !important;
  font-size: clamp(38px, 6vw, 78px);
  font-weight: 700; color: #111;
  letter-spacing: -0.02em; line-height: 1.05; margin: 0;
}
.section-heading em {
  font-style: italic;
  color: var(--purple);
  -webkit-text-fill-color: var(--purple);
  background: none;
}

/* ============================================
   13. STATEMENT BANNER
   ============================================ */
.statement-banner {
  padding: clamp(80px, 12vw, 160px) clamp(20px, 5vw, 80px);
  position: relative; overflow: hidden;
  background: #fafafa !important;
}
.statement-banner-inner { max-width: 1100px; margin: 0 auto; }
.statement-num {
  display: block;
  font-size: clamp(11px, 1vw, 13px);
  color: var(--purple);
  letter-spacing: 0.25em; text-transform: uppercase;
  margin-bottom: clamp(22px, 3vw, 44px);
  font-weight: 600; font-family: monospace;
}
.statement-text {
  font-family: 'Outfit', sans-serif !important;
  font-size: clamp(28px, 4.5vw, 58px);
  font-weight: 400; line-height: 1.3;
  color: #888;
  margin: 0;
}
.statement-text em {
  font-style: normal;
  color: var(--purple);
  -webkit-text-fill-color: var(--purple);
  background: none;
}
.statement-banner::after {
  content: ''; position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--purple);
  transition: width 1.8s cubic-bezier(0.23,1,0.32,1);
}
.statement-banner.in-view::after { width: 50%; }

/* ============================================
   14. SCROLL TEXT REVEAL
   ============================================ */
.reveal-word {
  display: inline;
  color: rgba(0,0,0,0.08);
  transition: color 0.35s ease;
}
.reveal-word.active { color: #111; }

/* ============================================
   15. LOGO / ABOUT SECTION
   ============================================ */
.section.for-logo { background: #fff !important; }
.logo-grid-list {
  width: 100% !important;
  margin-left: 0 !important; margin-right: 0 !important;
  perspective: 1200px;
}
.logo-grid-wrapper {
  transform-style: preserve-3d; position: relative;
  padding: 1.5rem 0 !important;
}
.logo-grid-wrapper::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(500px circle at var(--mouse-x,50%) var(--mouse-y,50%), rgba(100,15,255,0.06), transparent 55%);
  pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.4s;
}
.logo-grid-wrapper:hover::after { opacity: 1; }
.logo-client {
  filter: grayscale(100%) brightness(100%) !important;
  transition: filter 0.5s cubic-bezier(0.23,1,0.32,1), transform 0.5s, box-shadow 0.5s !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  border-radius: 12px !important;
  background: #fafafa !important;
  padding: 0.8rem !important;
}
.logo-client:hover {
  filter: grayscale(0%) brightness(105%) !important;
  transform: scale(1.05) translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  border-color: rgba(100,15,255,0.12) !important;
}
.logo-grid-track { gap: 2rem !important; }
.logo-grid-track:hover { animation-play-state: paused !important; }
.logo-grid-track a { display: inline-flex; flex-shrink: 0; text-decoration: none; }

/* ============================================
   16. WORK / PORTFOLIO — ASYMMETRIC GRID
   ============================================ */
.section.for-work { background: #fff !important; }
.project-flex {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  grid-template-rows: none !important;
  grid-auto-rows: minmax(340px, auto) !important;
  gap: 20px !important;
  flex-flow: unset !important;
}
.project-flex .work-wrapper:nth-child(1) {
  grid-column: 1 / 13;
  grid-row: span 1;
}
.project-flex .work-wrapper:nth-child(2) {
  grid-column: 1 / 7;
  grid-row: span 1;
}
.project-flex .work-wrapper:nth-child(3) {
  grid-column: 7 / 13;
  grid-row: span 1;
}
.project-flex .work-wrapper:nth-child(4) {
  grid-column: 1 / 8;
  grid-row: span 1;
}
.project-flex .work-wrapper:nth-child(5) {
  grid-column: 8 / 13;
  grid-row: span 1;
}
.project-flex .work-wrapper:nth-child(6) {
  grid-column: 1 / 13;
  grid-row: span 1;
}
.project-flex .work-wrapper:nth-child(7) {
  grid-column: 1 / 5;
  grid-row: span 1;
}
.project-flex .work-wrapper:nth-child(8) {
  grid-column: 5 / 13;
  grid-row: span 1;
}
.work-wrapper {
  position: relative; transform-style: preserve-3d;
  border-radius: 16px;
  overflow: hidden;
  opacity: 1 !important;
  visibility: visible !important;
}
.work-wrapper .image-wrap {
  overflow: hidden; border-radius: 16px;
  border: none !important;
  height: 100% !important;
  transition: transform 0.6s cubic-bezier(0.23,1,0.32,1), box-shadow 0.6s !important;
}
.work-wrapper:hover .image-wrap {
  box-shadow: 0 24px 60px rgba(0,0,0,0.12), 0 0 30px rgba(100,15,255,0.06) !important;
}
.work-wrapper .paralax-image {
  transition: transform 1s cubic-bezier(0.23,1,0.32,1) !important;
  height: 100% !important; object-fit: cover !important;
}
.work-wrapper:hover .paralax-image { transform: scale(1.06) !important; }
.work-overlay {
  background-image: linear-gradient(transparent 40%, rgba(0,0,0,0.65)) !important;
  border-radius: 16px;
}
.title-wrapper {
  justify-content: flex-end !important;
  align-items: flex-start !important;
  padding: clamp(20px, 3vw, 40px) !important;
}
.work-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(24px, 4vw, 56px) !important;
  color: #fff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
  line-height: 1 !important;
}
.top-part {
  z-index: 30;
  position: absolute !important;
  top: clamp(14px, 2vw, 24px) !important;
  left: clamp(14px, 2vw, 24px) !important;
  padding: 0 !important;
}
.top-text {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: rgba(100,15,255,0.85) !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  backdrop-filter: blur(10px) !important;
}
.work-wrapper .button-flex { margin: 12px 0 0 !important; }
.work-wrapper .button-face.static {
  font-size: 11px !important;
  padding: 10px 20px !important;
}
.work-wrapper .button-face.hover {
  font-size: 11px !important;
  padding: 10px 20px !important;
}
.work-num-badge { display: none; }

/* ============================================
   17. PARTNERS — BRAND
   ============================================ */
.partners-wrapper { padding: 80px 0 !important; }
.partners-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: #111 !important;
}
.partner-logo {
  perspective: 600px;
  background: transparent !important;
}
.partner-logo a {
  background: transparent !important;
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), box-shadow 0.5s, filter 0.5s !important;
}
.partner-logo a:hover {
  transform: perspective(600px) translateZ(10px) scale(1.06) !important;
  box-shadow: none !important;
  filter: brightness(1.1) !important;
}
.partner-image {
  background: transparent !important;
  mix-blend-mode: multiply;
}

/* ============================================
   17b. WORK PORTFOLIO GRID (work.html)
   ============================================ */
.work-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.work-portfolio-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #111;
  min-height: 420px;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), box-shadow 0.5s;
}
.work-portfolio-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.work-portfolio-card--wide {
  grid-column: 1 / -1;
  min-height: 480px;
}
.work-portfolio-card-img {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.work-portfolio-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.23,1,0.32,1);
}
.work-portfolio-card:hover .work-portfolio-card-img img {
  transform: scale(1.05);
}
.work-portfolio-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.05) 100%);
  pointer-events: none;
}
.work-portfolio-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: clamp(20px, 3vw, 40px);
}
.work-portfolio-badge {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(100,15,255,0.85);
  padding: 5px 14px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  margin-bottom: 10px;
}
.work-portfolio-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin: 0;
}
@media (max-width: 767px) {
  .work-portfolio-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .work-portfolio-card {
    min-height: 320px;
  }
  .work-portfolio-card--wide {
    min-height: 360px;
  }
}

/* ============================================
   18. TESTIMONIALS / STATS — NEON
   ============================================ */
.testimonials-text {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 400 !important; font-style: italic !important;
  font-size: clamp(28px, 5vw, 55px) !important;
  color: #666 !important;
}
.founder-wrapper .image-wrap.cricle {
  border: 2px solid rgba(100,15,255,0.25) !important;
  box-shadow: 0 0 30px rgba(100,15,255,0.08) !important;
}
.fun-facts-grid { perspective: 1000px; }
.align-center {
  transform-style: preserve-3d; will-change: transform;
  transition: transform 0.4s cubic-bezier(0.23,1,0.32,1) !important;
}
.fun-number {
  font-weight: 500 !important;
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), color 0.5s !important;
}
.align-center:hover .fun-number {
  transform: perspective(500px) translateZ(20px) scale(1.1) !important;
  color: var(--purple) !important;
  -webkit-text-fill-color: var(--purple) !important;
}

/* ============================================
   19. SERVICE DETAILS — MODERN CARD LAYOUT
   ============================================ */
.section.for-work {
  padding-left: 3% !important;
  padding-right: 3% !important;
}
.home-services-item {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #fafafa !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  margin: 0 auto 24px !important;
  max-width: 1400px !important;
  transition: box-shadow 0.5s, border-color 0.5s !important;
  position: relative !important;
}
.home-services-item.sticky {
  position: relative !important;
  top: auto !important;
}
.home-services-item:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 0 30px rgba(100,15,255,0.04) !important;
  border-color: rgba(100,15,255,0.12) !important;
}
.home-services-item .image-wrap {
  border-radius: 0 !important;
  height: 100% !important;
  min-height: 420px !important;
  transition: transform 0.6s cubic-bezier(0.23,1,0.32,1) !important;
}
.home-services-item .image-wrap.mobile-auto {
  height: 100% !important;
}
.home-services-item .paralax-image {
  height: 100% !important;
  object-fit: cover !important;
}
.home-services-item:hover .image-wrap .paralax-image {
  transform: scale(1.04) !important;
}
.services-left-content {
  background-color: transparent !important;
  border-right: none !important;
  height: auto !important;
  padding: clamp(40px, 5vw, 70px) clamp(30px, 4vw, 60px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.service-content {
  background-color: rgba(100,15,255,0.08) !important;
  color: var(--purple) !important;
  border: 1px solid rgba(100,15,255,0.2);
  border-radius: 8px;
  padding: 8px 16px !important;
  font-size: 13px !important;
  transition: background 0.3s, border-color 0.3s, color 0.3s !important;
}
.service-content:hover {
  background-color: var(--purple) !important;
  border-color: var(--purple);
  color: #fff !important;
}
.service-num {
  display: inline-block;
  font-size: clamp(11px, 1vw, 13px);
  color: var(--purple);
  letter-spacing: 0.2em; font-weight: 700;
  margin-bottom: 14px; font-family: monospace;
}
.service-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.15 !important;
  margin-bottom: 16px !important;
  transition: color 0.3s !important;
}
.home-services-item:hover .service-title {
  color: var(--purple) !important;
}
.service-flex {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
/* Reverse layout — flip grid order */
.home-services-item.sticky.reverse {
  direction: rtl !important;
}
.home-services-item.sticky.reverse > * {
  direction: ltr !important;
}

/* ============================================
   20. BIG TEXT — GRADIENT STROKE
   ============================================ */
.big-text {
  font-weight: 700 !important;
  font-family: 'Outfit', sans-serif !important;
  transition: all 0.6s cubic-bezier(0.23,1,0.32,1) !important;
}
.big-text.stroke-mode {
  -webkit-text-stroke: 1.5px rgba(0,0,0,0.1);
  color: transparent !important;
}
.big-text.stroke-mode:hover,
.big-text.stroke-mode.fill {
  -webkit-text-stroke: 0px transparent;
  color: var(--purple) !important;
  -webkit-text-fill-color: var(--purple) !important;
  background: none !important;
}
.flex-big {
  transform-style: preserve-3d; overflow: visible !important;
  position: relative;
}
.flex-big::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--purple);
  transition: width 0.7s cubic-bezier(0.23,1,0.32,1);
}
.flex-big:hover::after { width: 100%; }
.image-wrap.square {
  border-radius: 0; overflow: hidden;
  border: none;
  background: #fff;
}
.image-wrap.square video {
  background: #fff;
  mix-blend-mode: multiply;
}
.image-wrap.square .video-fallback-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.image-wrap.square video.video-unsupported + .video-fallback-img {
  display: block;
}
.image-wrap.square video.video-unsupported {
  display: none;
}

/* ============================================
   21. CTA — BRAND
   ============================================ */
.cta-wrapper {
  background-color: #fff !important;
  perspective: 1000px;
}
.text-rotator-main {
  background-color: #fff !important;
  transition: all 0.4s cubic-bezier(0.23,1,0.32,1) !important;
}
.text-rotator-main:hover {
  filter: none !important;
  background: var(--purple) !important;
}
.text-rotator { font-weight: 600 !important; }
.line-icon { background-color: rgba(0,0,0,0.06) !important; }
.text-rotator-main:hover .line-icon { background-color: rgba(255,255,255,0.35) !important; }
.text-rotator-main:hover .text-rotator { color: #fff !important; }

/* ============================================
   22. FOOTER — BRAND
   ============================================ */
.footer {
  background-color: #fafafa !important;
  color: #111 !important;
  padding: 80px 3% 30px !important;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.footer-top {
  display: flex; justify-content: space-between;
  align-items: flex-end; gap: 40px;
  padding-bottom: clamp(55px, 8vw, 110px);
}
.footer-top-left { flex: 1; }
.footer-big-text {
  font-family: 'Outfit', sans-serif !important;
  font-size: clamp(42px, 7.5vw, 100px);
  font-weight: 700; color: #111;
  letter-spacing: -0.02em; line-height: 1.05; margin: 0;
}
.footer-big-text em {
  font-style: italic;
  color: var(--purple);
  -webkit-text-fill-color: var(--purple);
  background: none;
}
.footer-top-right { flex-shrink: 0; }
.footer-divider {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--purple), transparent);
  margin-bottom: clamp(45px, 7vw, 90px);
}
.footer-grid-second {
  grid-template-columns: 4fr 2fr 2fr 2fr 2fr !important;
}
.footer-title {
  font-size: 12px !important; font-weight: 700 !important;
  color: var(--purple) !important; opacity: 1 !important;
  letter-spacing: 0.15em; text-transform: uppercase;
  font-family: monospace;
}
.button-line {
  font-size: 17px !important;
  color: #888 !important;
  transition: color 0.3s !important;
}
.button-line:hover { color: var(--purple) !important; }
.line-bottom {
  background: var(--purple) !important;
  opacity: 0; height: 1px !important;
  transition: opacity 0.3s !important;
}
.button-line:hover .line-bottom { opacity: 0.6; }
.navigation-flex { margin-top: 18px !important; }
.subscribe-field-footer {
  background-color: #fff !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  background-image: none !important;
  padding-left: 22px !important;
  font-size: 15px !important;
  transition: border-color 0.3s !important;
}
.subscribe-field-footer:focus {
  border-color: rgba(100,15,255,0.4) !important;
  box-shadow: 0 0 12px rgba(100,15,255,0.06) !important;
}
.subscribe-field-footer::placeholder { color: #999 !important; }
.button-subscribe.subscribe {
  background-color: var(--purple) !important; color: #fff !important;
}
.button-subscribe.subscribe:hover {
  background-color: #111 !important; color: #fff !important;
}
.copyright-flex-bottom { margin-top: 80px !important; }
.figma-text { font-size: 14px !important; color: #999 !important; }
.button-button-icon.relative {
  background: var(--purple) !important;
  color: #fff !important; border: none !important;
  border-radius: 50%;
  transition: transform 0.3s, box-shadow 0.3s !important;
}
.button-button-icon.relative:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 25px rgba(100,15,255,0.2) !important;
}

/* ============================================
   23. DECORATIVE GRID LINES
   ============================================ */
.grid-lines {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  display: flex; justify-content: space-between;
  padding: 0 5%;
  overflow: hidden;
}
.grid-lines span {
  width: 1px; height: 100%;
  background: rgba(0,0,0,0.03);
}

/* ============================================
   24. TEXT SCRAMBLE STYLE
   ============================================ */
.scramble-char {
  display: inline-block;
  transition: color 0.1s;
}
.scramble-char.decoding {
  color: var(--purple);
}

/* ============================================
   25. IMAGE CLIP REVEAL
   ============================================ */
.image-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s cubic-bezier(0.77,0,0.175,1);
}
.image-reveal.revealed { clip-path: inset(0); }

/* ============================================
   26. REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .scroll-progress, .grain-overlay, .aurora-shape, .grid-lines { display: none; }
}
@media (hover: none) and (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ============================================
   27. RESPONSIVE — TABLET
   ============================================ */
@media (max-width: 991px) {
  .services-showcase-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 14px;
  }
  .sc-card:nth-child(1) { grid-column: 1 / 3; }
  .sc-card:nth-child(3) { grid-column: 1 / 3; grid-row: auto; }
  .sc-card:nth-child(4) { grid-column: 1; grid-row: auto; }
  .sc-card:nth-child(5) { grid-column: 2; grid-row: auto; }
  .sc-card { padding: 24px 18px 20px; }
  .sc-card-num { font-size: 36px; }
  .sc-card-icon { width: 44px; height: 44px; }
  .project-flex {
    grid-template-columns: repeat(6, 1fr) !important;
  }
  .project-flex .work-wrapper:nth-child(1) { grid-column: 1 / 7; }
  .project-flex .work-wrapper:nth-child(2) { grid-column: 1 / 4; }
  .project-flex .work-wrapper:nth-child(3) { grid-column: 4 / 7; }
  .project-flex .work-wrapper:nth-child(4) { grid-column: 1 / 4; }
  .project-flex .work-wrapper:nth-child(5) { grid-column: 4 / 7; }
  .project-flex .work-wrapper:nth-child(6) { grid-column: 1 / 7; }
  .project-flex .work-wrapper:nth-child(7) { grid-column: 1 / 4; }
  .project-flex .work-wrapper:nth-child(8) { grid-column: 4 / 7; }
  .home-services-item {
    border-radius: 20px !important;
  }
  .footer-grid-second { grid-template-columns: 1fr 1fr !important; gap: 30px !important; }
  .aurora-shape { display: none; }
  /* Navbar pill shrinks on tablet */
  .navbar {
    padding: 8px 12px !important;
  }
  .nav-menu {
    position: absolute !important;
    top: 60px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #fff !important;
    border-radius: 20px !important;
    padding: 16px 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 260px !important;
    width: max-content !important;
  }
  .navigation-link {
    color: #111 !important;
    padding: 12px 24px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    white-space: nowrap !important;
    width: 100% !important;
    text-align: left !important;
  }
  .navigation-link:hover {
    background: rgba(100,15,255,0.06) !important;
    color: var(--purple) !important;
  }
  .navigation-link.w--current {
    background: var(--purple) !important;
    color: #fff !important;
  }
  .w-nav-overlay {
    background: transparent !important;
  }
}

/* ============================================
   28. RESPONSIVE — MOBILE
   ============================================ */
@media (max-width: 767px) {
  /* Navbar pill on mobile */
  .navbar {
    top: 10px !important;
    padding: 6px 8px 6px 12px !important;
    max-width: 94vw !important;
  }
  .main-logo { width: 32px !important; }
  .nav-menu {
    position: absolute !important;
    top: 55px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #fff !important;
    border-radius: 18px !important;
    padding: 14px 10px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 240px !important;
    width: max-content !important;
    z-index: 9999 !important;
  }
  .navigation-link {
    color: #111 !important;
    padding: 14px 22px !important;
    border-radius: 12px !important;
    font-size: 17px !important;
    background: transparent !important;
    white-space: nowrap !important;
    width: 100% !important;
    text-align: left !important;
  }
  .navigation-link:hover {
    background: rgba(100,15,255,0.06) !important;
    color: var(--purple) !important;
  }
  .navigation-link.w--current {
    background: var(--purple) !important;
    color: #fff !important;
  }
  .w-nav-overlay { background: transparent !important; }

  /* Hero — fix text cutoff + vertical centering */
  .hero-main-title {
    font-size: clamp(32px, 10vw, 60px) !important;
    padding: 0 4vw !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  .hero-content {
    overflow: visible !important;
  }
  .hero-first {
    overflow: visible !important;
  }
  .hero-wrapper {
    overflow: visible !important;
  }
  .hero-main-title.shimmer .hero-word {
    -webkit-text-fill-color: unset;
    background: none !important;
    -webkit-background-clip: unset; background-clip: unset;
    animation: none; color: #640FFF;
    -webkit-text-fill-color: #640FFF;
  }
  .hero-wrapper { height: 100vh !important; }
  .hero-first { height: 100vh !important; min-height: 100vh !important; }
  .hero-content {
    padding-top: 0 !important;
    padding-bottom: 5vh !important;
    padding-left: 4vw !important;
    padding-right: 4vw !important;
    justify-content: center !important;
  }
  .hero-text-wrapper {
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
  }
  .hero-particle { display: none; }
  .cursor-dot, .cursor-ring { display: none !important; }
  .hero-badge { margin-bottom: 16px; padding: 6px 14px; }
  .hero-subtitle { max-width: 100%; margin-top: 14px; padding: 0 2vw; }
  .hero-cta-row { margin-top: 22px; gap: 14px; }
  .section-header { margin-bottom: 26px; text-align: center !important; }
  .section-heading { font-size: clamp(30px, 9vw, 48px) !important; }
  .section-label { font-size: 10px; }
  .statement-text { font-size: clamp(22px, 6vw, 36px) !important; }
  .work-num-badge { display: none; }
  .services-showcase { padding: 70px 4% 80px; }
  .services-showcase-title { margin-bottom: 35px; }
  .services-showcase-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 14px;
  }
  .sc-card:nth-child(1),
  .sc-card:nth-child(3),
  .sc-card:nth-child(4),
  .sc-card:nth-child(5) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .sc-card { padding: 22px 18px 20px; border-radius: 16px; }
  .sc-card-num { font-size: 32px; margin-bottom: 10px; }
  .sc-card-icon { width: 38px; height: 38px; margin-bottom: 12px; }
  .sc-card-title { font-size: 15px; }
  .sc-card-desc { font-size: 12px; }
  .project-flex {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 280px !important;
    gap: 14px !important;
  }
  .project-flex .work-wrapper {
    grid-column: 1 !important;
    grid-row: span 1 !important;
  }
  .testimonials-text { font-size: clamp(22px, 6vw, 36px) !important; max-width: 90% !important; }
  .fun-number { font-size: clamp(40px, 12vw, 80px) !important; }
  .service-num { margin-bottom: 8px; }
  .services-left-content { padding: 30px 20px !important; height: auto !important; }
  .home-services-item {
    grid-template-columns: 1fr !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
  }
  .home-services-item .image-wrap {
    min-height: 240px !important;
    max-height: 280px !important;
  }
  .home-services-item.sticky.reverse {
    direction: ltr !important;
  }
  .service-title {
    font-size: 22px !important;
    color: #fff !important;
  }
  .home-services-item .services-left-content {
    text-align: center !important;
    align-items: center !important;
  }
  .section.for-work { padding-left: 4% !important; padding-right: 4% !important; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 40px; }
  .footer-big-text { font-size: clamp(32px, 10vw, 56px); }
  .footer-divider { margin-bottom: 40px; }
  .footer-grid-second { grid-template-columns: 1fr !important; gap: 28px !important; }
  .button-line { font-size: 16px !important; }
  .copyright-flex-bottom { margin-top: 50px !important; flex-direction: column; gap: 20px; }
  .grid-lines { display: none; }
  .aurora-shape { display: none; }
  .logo-grid-list { padding: 0.5rem 0 !important; }
  .logo-client { height: 5rem !important; max-height: 5rem !important; padding: 0.5rem !important; }

  /* About page — stats grid: 4→2 columns on mobile */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  /* About page — mission: 2-col to stack */
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Contact page — 2-col to stack */
  [style*="grid-template-columns: 1fr 1.6fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .contact-wrapper {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .contact-wrapper .input-flex {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .contact-wrapper .input-100 {
    width: 100% !important;
    max-width: 100% !important;
  }
  .contact-wrapper .text-field-main,
  .contact-wrapper .w-input,
  .contact-wrapper textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .contact-wrapper .button.full.w-button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .contact-wrapper .checkbox-flex {
    flex-wrap: wrap !important;
  }
  /* About page — 3-col services grid to 1 col */
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Products grid — stack on mobile */
  .products-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Awards grid — stack on mobile */
  .awards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Scroll indicator — pull up into hero viewport on mobile */
  .scroll-track-wrapper {
    margin-top: -140px !important;
    height: 120px !important;
    padding-top: 0 !important;
    z-index: 30 !important;
    position: relative !important;
  }
  .scroll-track-line {
    top: 30px !important;
    height: calc(100% - 30px) !important;
  }
  .scroll-indicator {
    top: 0 !important;
  }
}