/* ===== Responsive Stability Patch ===== */
/* Add this file AFTER your main style.css */

/* 1) Global stability */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  height: auto !important;
}

/* 2) Better responsive containers */
.hero-content,
.group2,
.stats-inner,
.testimonials-inner,
.site-footer__inner {
  width: min(1200px, calc(100% - 32px));
  margin-inline: auto;
}

/* 3) Safer image/video rendering */
img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 4) Prevent buttons/text from breaking */
.hero-cta,
.animated-button,
.mobile-hero__cta,
.mobile-hero__showreel {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 5) Hero responsive fixes */
.hero-reveal {
  left: clamp(20px, 6vw, 120px);
  top: clamp(120px, 18vw, 190px);
  font-size: clamp(0.9rem, 1.5vw, 1.15rem);
}

.hero-cta {
  margin-left: clamp(20px, 6vw, 120px);
}

.glasshero img {
  width: min(60%, 780px);
}

/* 6) Reduce Safari issues */
.glasshero {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* 7) Stable about image */
.group4-main img {
  width: 100%;
  height: auto;
  min-height: unset !important;
  max-height: unset !important;
  object-fit: cover;
}

/* 8) Tablet fixes */
@media (max-width: 1024px) {

  .hero {
    width: calc(100% - 20px);
    margin-inline: auto;
  }

  .group2 {
    gap: 36px;
  }

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

  .pro video {
    margin: 0 auto;
    width: min(100%, 420px);
  }

  .project-title {
    font-size: clamp(48px, 7vw, 72px);
  }
}

/* 9) Laptop scaling fixes */
@media (min-width: 1280px) and (max-width: 1536px) {

  .hero-reveal {
    top: 160px;
  }

  .hero-cta {
    margin-top: 24px;
  }

  .glasshero img {
    width: 56%;
  }
}

/* 10) Mobile fixes */
@media (max-width: 768px) {

  .group4 {
    margin-top: 0 !important;
  }

  .group4-main img {
    width: min(100%, 320px);
    margin-top: 24px;
  }

  .project {
    width: min(100%, 420px);
  }

  .stats-grid {
    flex-direction: column;
  }

  .stat-card {
    width: 100%;
  }

  .testimonial-quote {
    line-height: 1.45;
  }

}

/* 11) Prevent random overflow */
.project,
.stats-section,
.testimonials-section,
.site-footer,
.about,
.home {
  overflow-x: hidden;
}

/* 12) Cleaner z-index system */
.about-circle {
  z-index: 20;
}

.nav,
.mobile-hero__nav {
  z-index: 30;
}

.social-clock,
.backtop-btn {
  z-index: 40;
}

.script-modal {
  z-index: 50;
}
.intro-wrap{

  position:fixed;

  inset:0;

  width:100%;

  height:100dvh;

  background:#000;

  z-index:999999999;

  overflow:hidden;
}


/* المشهد */

.scene{

  position:relative;

  width:100%;

  height:100%;

  overflow:hidden;

  background:#000;
}


/* النص */

.santa-text{

  position:absolute;

  top:50%;
  left:50%;

  transform:
  translate(-50%,-50%);

  transform-origin:center center;

  font-family:"Inter",sans-serif;

  font-size:clamp(70px,18vw,300px);

  font-weight:700;

  color:#fff;

  line-height:1;

  white-space:nowrap;

  z-index:2;

  will-change:transform;
}


/* overlay */

.svg-overlay{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  z-index:5;
}