*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
    --yellow: #f5c800;
    --yellow-deep: #e0b400;
    --dark: #111111;
    --dark-2: #161616;
    --dark-3: #1c1c1c;
    --text: #ffffff;
    --text-muted: rgba(255,255,255,0.55);
    --text-dim: rgba(255,255,255,0.3);
    --border: rgba(255,255,255,0.08);
}

html { scroll-behavior: smooth; }

body {
  
    background: var(--dark);
    color: var(--text);
    overflow-x: hidden;
}

/* =============================================
   TYPOGRAPHY
   ============================================= */
h1, h2, h3, h4 {
    /*font-family: 'Syne', sans-serif;*/
    letter-spacing: -0.02em;
}


/* =============================================
   SECTION WRAPPER
   ============================================= */
.section-wrap {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

/* =============================================
   HERO SECTION
   Image 1: dark left half, yellow right half,
   diagonal split. Camera illustration on right.
   Badge + large headline + subtitle + two CTAs.
   ============================================= */
.hero {
    position: relative;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 80px;
    background:#151515;
}

/* Diagonal background split — dark left, yellow right */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg-dark {
    position: absolute;
    inset: 0;
    background: var(--dark);
}

@media (max-width: 768px) {
  .hero-bg-dark {
    background: var(--dark);
  }
}

/* Yellow triangle — right side polygon */
/* .hero-bg-yellow {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 62%;
    background: var(--yellow);
    clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
} */

/* Dark corner triangle cutting the yellow from top-left */
.hero-bg-dark-corner {
    position: absolute;
    top: 0; right: 0;
    width: 62%;
    height: 52%;
    background: var(--dark);
    clip-path: polygon(18% 0%, 100% 0%, 100% 0%);
}
.hero-camera-wrap {
    position: absolute;
    right: 0px;
    top: 80px;
    bottom: 0;
    max-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
}

.hero-camera-wrap img {
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
/* Content layout */
.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    /* padding: 0 80px; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.hero-left {
    max-width: 720px;
    position: relative;
    z-index: 2;
}

/* Badge pill */
.hero-badge {
    display: inline-block;
    padding: 6px 18px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50px;
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

/* Headline: "Don't Just Launch" white + "ECHO" yellow */
.hero-h1 {
    font-size: 72px;
    font-weight: 700;
    line-height: 1.0;
    margin-bottom: 8px;
    color: #ffffff;
}

.hero-h1 .bold { font-weight: 800; }

.hero-echo {
    font-family: 'Syne', sans-serif;
    font-size: 90px;
    font-weight: 800;
    color: var(--yellow);
    line-height: 1.0;
    letter-spacing: -1px;
    margin-bottom: 24px;
    display: block;
}

.hero-subtitle {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255,255,255,0.6);
    max-width: 400px;
    margin-bottom: 40px;
}

/* CTA buttons */
.hero-btns {
    display: flex;
    gap: 14px;
    align-items: center;
}

.btn-yellow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--yellow);
    color: #111;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Syne', sans-serif;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.25s, transform 0.2s;
}

.btn-yellow:hover { background: var(--yellow-deep); transform: translateY(-1px); }

.btn-arrow {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: transparent;
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.25s, color 0.25s;
}

.btn-ghost:hover { border-color: rgba(255,255,255,0.6); color: #fff; }



/* The SVG camera — will be animated by JS during scroll */
.hero-camera-svg {
    width: 420px;
    height: auto;
    filter: drop-shadow(0 20px 60px rgba(0,0,0,0.5));
    position: relative;
    z-index: 2;
}

/* =============================================
   SCROLLING CAMERA TRACK (full-width)
   Camera moves left → right → left as user scrolls
   ============================================= */
.camera-track {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 140px;
    background: var(--dark-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
}

/* The moving camera inside the track */
.track-camera {
    position: absolute;
    left: -160px;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    transition: left 0.1s linear;
}

/* Dashed rail line behind camera */
.track-rail {
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    height: 2px;
    border-top: 2px dashed rgba(245,200,0,0.18);
    transform: translateY(-50%);
}

/* =============================================
   WHY CHOOSE US — IMAGE 2
   "Premium Products Deserve Premium Media"
   ============================================= */
.why-section {
    /* Top padding clears the fixed site header (~80–100px) plus a
       comfortable gap so the "Why Choose Us" pill and title don't
       sit behind the nav. Bottom padding kept tight so the cards
       and video still fit inside the 100vh slide. */
    padding: 160px 80px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Background lives on .fade-pair-slide so the why-deco
       camera (which sits behind both inner sections) stays
       visible through this layer. */
    background: transparent;
}

@media (max-width: 768px) {
  .why-section {
    padding: 80px 24px 40px;
  }
}

/* Faint camera watermark — rest position is the left
   side of the Why slide. JS (GSAP) animates a transform
   to fly it across to the right side for Capabilities,
   so DO NOT set transform/width here or it will fight
   the tween. The image's natural size is used. */
.why-deco {
    position: absolute;
    left: -285px;
    top: 24%;
    pointer-events: none;
    z-index: 2;
    will-change: transform, opacity;
}

.why-deco img {
    display: block;
    height: auto;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.35));
}

.section-pill {
    display: inline-block;
    padding: 5px 18px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,0.45);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
  .section-pill {
    margin-bottom: 16px;
    font-size: 9px;
  }
}

.why-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 18px;
    /*max-width: 820px;*/
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
  .why-title {
    font-size: 32px;
    margin-bottom: 12px;
  }
}

.why-title .accent { color: var(--yellow); }

.why-subtitle {
    font-size: 16px;
    font-weight: 300;
    color: var(--text-muted);
    max-width: 440px;
    margin: 0 auto 56px;
    line-height: 1.7;
}

@media (max-width: 768px) {
  .why-subtitle {
    font-size: 14px;
    margin: 0 auto 32px;
  }
}

/* Video embed placeholder */
.video-box {
    width: 1173px;
    max-width: 100%;
    height: 274px;
    margin: 0 auto 60px;
    background: #0a0a0a;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.07);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
  .video-box {
    height: 200px;
    margin: 0 auto 40px;
  }
}

.video-box .video-wrapper,
.video-box video {
    width: 100%;
    height: 100%;
}

.video-box video {
    object-fit: cover;
}

.video-play-btn {
    width: 64px; height: 64px;
    background: var(--yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s, background 0.25s;
}

.video-play-btn:hover { transform: scale(1.08); background: var(--yellow-deep); }

.video-play-btn svg { margin-left: 4px; }

/* Feature cards row */
.why-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}

@media (max-width: 768px) {
  .why-cards {
    gap: 14px;
  }
}

.why-card {
    background: var(--dark-3);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 36px 32px;
    text-align: left;
    transition: border-color 0.25s, transform 0.25s;
}

@media (max-width: 768px) {
  .why-card {
    padding: 24px 20px;
  }
}

.why-card:hover {
    border-color: rgba(245,200,0,0.3);
    transform: translateY(-3px);
}

.why-card-icon {
    width: 46px; height: 46px;
    background: rgba(245,200,0,0.12);
    border: 1px solid rgba(245,200,0,0.2);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 22px;
}

.why-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #fff;
}

.why-card p {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--text-muted);
}

/* =============================================
   CAPABILITIES SECTION — IMAGE 3
   "What We Create" — 4 service cards in 2x2 grid
   ============================================= */
.capabilities-section {
    /* Same header-clearing top padding as .why-section so the
       "Our Capabilities" pill and title don't slide under the nav. */
    padding: 160px 80px 60px;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
  .capabilities-section {
    padding: 80px 24px 40px;
  }
}

/* Cap-state camera marker, kept invisible so its offset can be measured
   at runtime. The why-deco animates to overlay this slot; JS handles the
   final horizontal flip so the upright projector faces the cards. */
.cap-deco {
    position: absolute;
    right: clamp(-340px, -27vw, -260px);
    top: clamp(145px, 21vh, 190px);
    width: clamp(420px, 50vw, 570px);
    height: auto;
    pointer-events: none;
}

.cap-deco img {
    display: block;
    width: 100%;
    height: auto;
}

.cap-header {
    text-align: center;
    margin-bottom: 64px;
}

@media (max-width: 768px) {
  .cap-header {
    margin-bottom: 40px;
  }
}
.top-left-image {
    top: 30%;
}
.cap-title {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 14px;
}

@media (max-width: 768px) {
  .cap-title {
    font-size: 32px;
    margin-bottom: 10px;
  }
}

.cap-title .accent { color: var(--yellow); }

.cap-subtitle {
    font-size: 15px;
    font-weight: 300;
    color: var(--text-muted);
}

@media (max-width: 768px) {
  .cap-subtitle {
    font-size: 14px;
  }
}

/* 2×2 grid of service cards */
.cap-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: clamp(560px, 50vw, 860px);
    margin: 0 auto;
}

@media (max-width: 768px) {
  .cap-grid {
    gap: 14px;
    max-width: 100%;
  }
}

.cap-card {
    background: var(--dark-3);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 36px 32px 32px;
    min-height: 394px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.25s, transform 0.25s;
}

@media (max-width: 768px) {
  .cap-card {
    padding: 24px 20px 20px;
    min-height: auto;
  }
}

.cap-card:hover {
    border-color: rgba(245,200,0,0.25);
    transform: translateY(-3px);
}


.cap-card.featured .cap-card-title { color: var(--yellow); }

.cap-card-icon {
    width: 44px; height: 44px;
    background: rgba(245,200,0,0.1);
    border: 1px solid rgba(245,200,0,0.18);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
}

.cap-card-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff;
}

.cap-card-desc {
    font-size: 13.5px;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

.cap-card-list {
    list-style: none;
    margin-bottom: 28px;
}

.cap-card-list li {
    font-size: 13px;
    font-weight: 300;
    color: var(--text-muted);
    margin-bottom: 7px;
    padding-left: 18px;
    position: relative;
}

.cap-card-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 7px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--yellow);
    opacity: 0.7;
}

.cap-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--yellow);
    font-size: 13.5px;
    font-weight: 600;
    font-family: 'Syne', sans-serif;
    text-decoration: none;
    transition: gap 0.2s;
}

.cap-card-link:hover { gap: 10px; }



/* =============================================
   FLOATING SOCIAL CARDS — pulled out of flow
   The markup ships 6 <span> tiles per section.
   Without absolute positioning they render
   inline and push the heading off the screen.
   ============================================= */
.social-floating-cards {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.floating-card {
    position: absolute;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    opacity: 0.12;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
    will-change: transform;
    animation: socialCardDrift 9s ease-in-out infinite;
}

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

.floating-card.fc-9  { left: -15%; top: 25%;  width: 30vw; height: 22vw;  animation-delay: -1.2s; }
.floating-card.fc-6  { left: 53%;  top: 34%;  width: 36vw; height: 26vw;  animation-delay: -3.4s; }
.floating-card.fc-7  { left: 78%;  top: 33%;  width: 15vw; height: 11vw;  animation-delay: -5.1s; }
.floating-card.fc-8  { left: 83%;  top: 55%;  width: 10vw; height: 7.5vw; animation-delay: -2.8s; }
.floating-card.fc-10 { left: 8%;   top: 24%;  width: 10vw; height: 7.5vw; animation-delay: -4.5s; }
.floating-card.fc-5  { left: 79%;  top: -17%; width: 36vw; height: 26vw;  animation-delay: -6.6s; }

@keyframes socialCardDrift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    25%      { transform: translate3d(-14px, -10px, 0) rotate(-1.2deg); }
    50%      { transform: translate3d(8px, -22px, 0) rotate(0.8deg); }
    75%      { transform: translate3d(16px, -8px, 0) rotate(1.4deg); }
}

@media (max-width: 860px) {
    .floating-card.fc-7,
    .floating-card.fc-8,
    .floating-card.fc-10 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .floating-card { animation: none; }
}

/* Lift section copy above the camera + floating cards */
.why-section .why-section-wrapper,
.why-section .video-box,
.capabilities-section .cap-header,
.capabilities-section .cap-grid {
    position: relative;
    z-index: 3;
}

.why-section .top-left-image,
.why-section .top-right-ai-image,
.capabilities-section .top-left-image,
.capabilities-section .top-right-ai-image {
    z-index: 1;
}

@media (max-width: 1100px) {
    .why-deco { left: -220px; top: 42%; }
    .why-deco img { max-width: 480px; }
    .cap-deco { right: -265px; top: 21%; width: 480px; }
}

@media (max-width: 860px) {
    .why-deco { left: -180px; opacity: 0.55; }
    .why-deco img { max-width: 380px; }
    .cap-deco { right: -235px; top: 28%; width: 380px; }
    .cap-card { min-height: auto; }
}

/* =============================================
   SCROLL REVEAL ANIMATIONS
   ============================================= */
.reveal {
    opacity: 1;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

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

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* =============================================
   CAMERA SVG STYLES
   ============================================= */
.camera-svg {
    width: 100%;
    height: auto;
}
/* CTA Section */
.cta-section {
    background: #f3ce34;
    padding: 80px 105px;
    text-align: center;
    margin: 100px 0;
    animation: fadeInUp 1s ease-out;
    position: relative;
    z-index: 5;
      margin-top: 0px ;
}

@media (max-width: 768px) {
  .cta-section {
    padding: 50px 24px;
    margin: 30px 0;
  }
}

.cta-section h2 {
    color: #151515;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 40px;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

@media (max-width: 768px) {
  .cta-section h2 {
    font-size: 32px;
    margin-bottom: 24px;
  }
}
.cta-status .status-sep
 {
    opacity: 0.5;
}
.cta-status .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1f7a34;
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(31, 122, 52, 0.2);
}
.cta-section p {
    color: #151515;
    font-size: 18px;
    margin-bottom: 40px;
    animation: fadeInUp 0.8s ease-out 0.3s both;
}
.cta-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 30px;
    flex-wrap: wrap;
    color: #151515;
    font-size: 14px;
    font-weight: 500;
}
.cta-phone img{
width: 100%;
}
.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    animation: fadeInUp 0.8s ease-out 0.4s both;
}
.cta-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
padding: 24px 66.958px 24px 56px;
gap: 16.927px;
height: 28px;
}
.btn-dark {
    padding: 16px 40px;
    border: none;
    border-radius: 25px;
    background: #151515;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-dark:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.btn-outline {
    padding: 16px 40px;
    border: 2px solid #151515;
    border-radius: 25px;
    background: transparent;
    color: #151515;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: #151515;
    color: #f3ce34;
    transform: translateY(-3px);
}

/* CTA Wrapper */
.cta-wrapper {
    position: relative;
    padding-top: 120px;
    margin-top: 40px;
    z-index: 4;
    background: #181716;
    padding: 50px 0px;
    padding-top: 200px;
    /* Clip the oversized CTA camera image — only the lens portion is
       supposed to dip down into the slide. */
    overflow: hidden;
}

@media (max-width: 768px) {
  .cta-wrapper {
    padding-top: 80px;
    padding-bottom: 40px;
  }
}
.top-left-image {
    position: absolute;
    top: 90px;
    /* left: 50%;
    transform: translateX(-50%); */
}
.top-left-image  img{
    width:100%;
}
/* CTA-state camera — exact Figma values (rotated -90deg so the lens
   points down into the yellow CTA box). The image canvas is 1968x787
   and most of it sits above the slide; .cta-wrapper { overflow: hidden }
   clips the rest. */
.top-left-image.matter-right-img.ui-right-image {
    position: absolute;
    left: 367px;
    top: -475px;
    width: 1968px;
    height: 787px;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    pointer-events: none;
}
.top-left-image.matter-right-img.ui-right-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.top-right-image {
    position: absolute;
    top: 0px;
    right: 0px;
}
.top-right-ai-image {
    position: absolute;
    right: 5%;
    top: 40%;
    left: unset;
}
/* Hard on/off blink — used by the .light-image overlay so the
   yellow beam on the left content flicks fully on and off, like
   a flickering projector lamp. */
@keyframes lightOnOff {
  0%, 49%   { visibility: visible; }
  50%, 100% { visibility: hidden; }
}

/* Hero blink disabled per request — keep the beam steady (no flicker). */
.light-image img {
  /* animation: lightOnOff 1.2s infinite step-end; */
}

/* Light-shedding overlay sits on the LEFT of the hero behind the
   hero-left copy. Overrides .hero-camera-wrap's right-aligned defaults. */
/* Fill the entire hero so the yellow beam projects across the whole
   left content (heading, subtitle, buttons) without being cut at
   the bottom. The image is a beam polygon — widest on the left,
   narrowing to the camera on the right. We overscale it so the
   sloped bottom edge of the polygon clears the bottom-left corner
   instead of leaving a dark wedge there. */
.hero-camera-wrap.light-image {
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.hero-camera-wrap.light-image img {
  position: absolute;
  top: -12%;
  left: -5%;
  width: 115%;
  height: 125%;
  max-width: none;
  max-height: none;
  object-fit: fill;
  filter: brightness(0.72) saturate(0.9);
  display: block;
}

@media (max-width: 768px) {
  .hero-camera-wrap.light-image {
    display: none;
  }
  .hero-camera-wrap.light-image img {
    display: none;
  }
}

/* Camera deco sits above the light so it reads as the source of
   the projection. */
.hero-camera-wrap:not(.light-image) {
  z-index: 4;
}

@media (max-width: 768px) {
  .hero-camera-wrap.light-image { display: none; }
}

/* Subtle "shed light" flicker — opacity-only so the camera/phone
   itself stays visible while the light pulses gently, instead of
   the whole image disappearing every half-second. */
@keyframes lightFlicker {
  0%, 100% { opacity: 1; }
  42%      { opacity: 0.95; }
  46%      { opacity: 0.72; }
  50%      { opacity: 1; }
  54%      { opacity: 0.85; }
  58%      { opacity: 1; }
}

/* CTA blink consolidation: only one blinking element on the CTA
   slide — the trapezoid light beam (.cta-light-trapezoid) below.
   The phone and deco stay static. */

/* Why Choose Us — left-side camera deco blinks */


/* =============================================
   RESPONSIVE
   ============================================= */
   @media (min-width: 1720px) {
.hero {
    position: relative;
    min-height: 70vh;}
   }
@media (max-width: 1100px) {
    .hero-h1 { font-size: 54px; }
    .hero-echo { font-size: 70px; }
    .hero-camera-wrap { width: 90%; }
    .hero-camera-svg { width: 320px; }
    .hero-content{
        padding:0px;
    }
    .hero-left {
    max-width: 420px;
}

}

@media (max-width: 860px) {
    header { padding: 18px 24px; }
    nav { display: none; }
    .hero-content { padding: 0 32px; }
    .hero-camera-wrap { width: 100%; height: 200px; display: none; }
    .hero { min-height: auto; height: auto; padding-top: 60px; padding-bottom: 40px; }
    .hero-h1 { font-size: 44px; }
    .hero-echo { font-size: 58px; }
    .hero-subtitle { font-size: 14px; margin-bottom: 30px; }
    .why-section, .capabilities-section, .cta-dark, .cta-yellow { padding-left: 32px; padding-right: 32px; }
    .why-title { font-size: 36px; }
    .cap-title { font-size: 36px; }
    .cap-grid, .why-cards { grid-template-columns: 1fr; }
    .cta-title { font-size: 34px; }
    .footer-top { flex-direction: column; }
    .footer-bottom { flex-direction: column; gap: 12px; }
    .hero-camera-wrap {
        display: none;
    }
    .hero-content {
        padding: 0px;
        order: 1;
    }
    .hero-left {
        max-width: 100%;
    }
    .hero-camera-wrap img {
        width: 100%;
    }
    .hero-btns {
        flex-wrap: wrap;
    }
    .hero-badge {
        margin-bottom: 16px;
    }
    .cta-section {
        padding: 60px 40px;
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: auto;
        height: auto;
        padding-top: 50px;
        padding-bottom: 40px;
        max-height: none;
    }
    .hero-left {
        max-width: 100%;
    }
    .hero-h1 {
        font-size: 40px;
        margin-bottom: 4px;
    }
    .hero-echo {
        font-size: 50px;
        margin-bottom: 16px;
    }
    .hero-badge {
        margin-bottom: 14px;
        font-size: 9px;
    }
    .hero-subtitle {
        font-size: 13px;
        margin-bottom: 24px;
    }
    .hero-btns {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    .btn-yellow, .btn-ghost {
        width: 100%;
    }
    .why-section {
        padding: 100px 24px 40px;
    }
    .capabilities-section {
        padding: 100px 24px 40px;
    }
    .cap-grid, .why-cards {
        gap: 16px;
        max-width: 100%;
    }
    .top-left-image, .top-right-ai-image {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .cta-section {
        padding: 40px 20px;
        margin: 40px 0;
    }

    .cta-section h2 {
        font-size: 28px;
    }

    .cta-actions {
        gap: 15px;
        flex-direction: column;
        align-items: center;
    }

    .btn-dark,
    .btn-outline {
        width: 100%;
        max-width: 250px;
    }
}

/* =============================================
   VERTICAL FULLPAGE SLIDER
   Each section is a full-viewport "slide" stacked at
   the same position. The active slide gets `.is-active`
   from social-media-marketing.js and crossfades in
   over the others — pure opacity, no transform.
   ============================================= */
html, body {
    overflow: hidden;
    height: 100%;
    margin: 0;
    overscroll-behavior-y: none;
}

.fp-slider-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.fp-slides-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.fp-slides-container > section {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1),
                visibility 0s linear 1s;
    will-change: opacity;
    z-index: 1;
}

.fp-slides-container > section.is-active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1),
                visibility 0s linear 0s;
    z-index: 2;
}

/* The slider owns each section's opacity via .is-active. The fade-in
   keyframe used by `.scroll-animate` also drives opacity, which would
   freeze it at 1 and override the slider's fade. Kill the section-level
   keyframe so the slider's transition can run. (Inner children with
   .scroll-animate still animate normally.) */
.fp-slides-container > section.scroll-animate {
    animation: none !important;
}

/* Hide scrollbars on the per-slide scroll containers */
.fp-slides-container > section::-webkit-scrollbar { width: 0; background: transparent; }
.fp-slides-container > section::-webkit-scrollbar-track { background: transparent; }
.fp-slides-container > section::-webkit-scrollbar-thumb { background: transparent; }
.fp-slides-container > section { scrollbar-width: none; -ms-overflow-style: none; }

/* Footer slide */
.footer-slide {
    background: #010101;
    padding: 0;
    margin: 0;
}

.footer-slide footer {
    position: relative;
    background: transparent;
}

.footer-slide .site-footer,
.footer-slide footer {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 0;
}

/* Inside the slider, the hero no longer needs its own 100vh because
   the slide wrapper enforces it. Force overflow:hidden so the
   oversized .light-image (1920x886) cannot create scrollable space
   inside the slide — the default `.fp-slides-container > section`
   rule sets overflow-y:auto which would let it bleed. */
.fp-slides-container > section.hero {
  min-height: 0;
  overflow: hidden;
}

/* The pre-existing CTA-state camera (camera2-2-1.png, rotated -90deg
   and dipping in from above) is now superseded by .cta-deco-projection,
   which is the why-deco continuation. Hide the old one so only the
   projecting deco is visible. */
.cta-wrapper .top-left-image.matter-right-img.ui-right-image {
  display: none;
}

/* CTA-side projection of the why-deco — sits at the top-center of
   the CTA slide (mirroring the why-deco's home placement on the
   capabilities slide: left: 785px, top: -28%) and rotates into a
   downward-facing pose when CTA activates so the lens projects
   onto the CTA copy below. The image renders at its natural size
   — no width/height stretching.
   
   Animation: why-deco travels from its end position on Capabilities
   (far right, translate 1947px) to center on CTA while rotating.
   Offset calculation: why-deco at ~1662px (left: -285px + translate 1947px),
   cta-deco at left: 785px, so translate needed: 877px right initially. */
.cta-deco-projection {
  position: absolute;
  left: 57%;
  top: 1%;
  transform-origin: 50% 50%;
  transform: perspective(900px) translate(877px, 204.5px) rotateY(176deg) rotateZ(31deg);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity 0.9s ease 0.4s,
              transform 1.4s cubic-bezier(0.34, 1.4, 0.6, 1) 0.4s;
}

.cta-deco-projection img {
  display: block;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.35));
}

.fp-slides-container > section.cta-wrapper.is-active .cta-deco-projection {
  opacity: 1;
  transform: perspective(900px) translate(-57%, -49%) rotateZ(-102deg) rotateY(144deg);
}

/* .cta-trapezoid-beam removed entirely — no yellow trapezoid on CTA. */

/* Projector-lamp blink for the CTA trapezoid: background color
   alternates between black and yellow every 0.5s with step-end so
   it pops like a flickering projector. The inline element keeps
   its own width/height/clip-path; only the background animates,
   so layout is unaffected. */
@keyframes ctaTrapezoidBlink {
  0%, 49%   { background-color: #f5c800; opacity: 0.3; }
  50%, 100% { background-color: #1E1E1E; }
}

/* The blink animation runs continuously, but visibility is gated
   on the CTA being active — and only AFTER the deco-projection
   camera has settled (the camera transition finishes at ~1.8s
   from when .is-active is applied). The beam pops on at 1.6s,
   slightly before the camera fully locks in, then the copy
   reveals at 2.0s — giving a "camera → beam → image projected"
   reading order.

   Asymmetric visibility transition:
     - entering CTA (.is-active):  delay 1.6s before showing
     - leaving CTA (no .is-active): hide instantly                  */
.cta-trapezoid-blink {
  animation: ctaTrapezoidBlink 0.5s infinite step-end;
  visibility: hidden;
  transition: visibility 0s linear 0s;
}

.fp-slides-container > section.cta-wrapper.is-active .cta-trapezoid-blink {
  visibility: visible;
  transition: visibility 0s linear 1.6s;
}

/* CTA content fades in AFTER the camera + beam sequence:
     0.4s  — camera starts traveling from cap-position
     ~1.3s — camera mostly visible
     ~1.8s — camera transform settles
     1.6s  — trapezoid beam pops in (projector light hits the screen)
     2.0s  — content reveal starts (the projection illuminates the copy) */
.fp-slides-container > section.cta-wrapper .cta-section,
.fp-slides-container > section.cta-wrapper .cta-phone {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease 2.0s, transform 0.8s ease 2.0s;
}

.fp-slides-container > section.cta-wrapper.is-active .cta-section,
.fp-slides-container > section.cta-wrapper.is-active .cta-phone {
  opacity: 1;
  transform: translateY(0);
}

/* CTA section margin would push content past the slide boundary —
   neutralize it inside the slider. */
.fp-slides-container > section.cta-wrapper .cta-section { margin: 0; }

/* =============================================
   SCROLL-REVEAL ANIMATION (data-animate, observer-driven)
   Single fade-in — no slide/translate/scale.
   ============================================= */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.scroll-animate.fade-in { animation: fadeIn 1s ease forwards; }

@media (min-width: 1920px) {
    .fp-slides-container > section {
        height: 100vh;
        max-height: 100vh;
        min-height: auto;
    }
    .hero { padding: 100px 80px; }
}

@media (max-width: 768px) {
    .fp-slides-container > section { height: 100vh; }
}

/* =============================================
   COMBINED Why ↔ Capabilities fade slide
   Both inner sections stack at the same viewport
   position so GSAP can crossfade between them
   without any vertical motion.
   ============================================= */
.fade-pair-slide {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #151515;
}

.fade-pair-slide > .why-section,
.fade-pair-slide > .capabilities-section {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
}

/* ===== Why ↔ Capabilities crossfade — pure CSS, no GSAP =====
   Driven entirely by the `.showing-cap` class on .fade-pair-slide
   (toggled from JS). Each layer has TWO transition rules — the
   "fade IN" (slow, delayed) lives on the state where the layer
   is visible, and the "fade OUT" (fast, no delay) lives on the
   opposite state. Whichever rule is currently active determines
   the timing of the next opacity change, so going IN is slow and
   going OUT is fast regardless of direction.                       */

/* Why layer — visible by default, hidden when showing cap. */
.fade-pair-slide > .why-section {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
    transition: opacity 0.8s ease-out 0.9s; /* applies on fade-IN (0→1) */
}

.fade-pair-slide.showing-cap > .why-section {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.6s ease-in 0s;     /* applies on fade-OUT (1→0) */
}

/* Capabilities layer — hidden by default, visible when showing cap. */
.fade-pair-slide > .capabilities-section {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.6s ease-in 0s;     /* applies on fade-OUT (1→0) */
}

.fade-pair-slide.showing-cap > .capabilities-section {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
    transition: opacity 0.8s ease-out 0.9s;  /* applies on fade-IN (0→1) */
}

/* Hide cap-deco completely — why-deco animates over and takes its
   place visually. Keep cap-deco in layout (visibility: hidden, not
   display: none) so its offset can be measured if needed. */
.fade-pair-slide .cap-deco {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* why-deco lives at the slide level so it is not clipped by the
   why-section's opacity tween. It sits BEHIND the section copy so the
   bright yellow camera does not paint over the cards on the right of
   the Capabilities slide. */
.fade-pair-slide > .why-deco {
    z-index: 1;
    will-change: transform, left, top;
    transform: perspective(900px) translate(0px, 0px) rotateY(0deg);
    transform-origin: 50% 50%;
    transition: transform 1.0s cubic-bezier(0.65, 0, 0.35, 1) 0.3s,
                left 1.0s cubic-bezier(0.65, 0, 0.35, 1) 0.3s,
                top 1.0s cubic-bezier(0.65, 0, 0.35, 1) 0.3s;
}

/* Deco glides to the right edge of the screen when capabilities is
   showing. The home position is left: -285px, so a larger translate-X
   pushes the camera off the cards and toward the viewport's right
   edge instead of overlapping the right column of cap-cards. */
.fade-pair-slide.showing-cap > .why-deco {
    /* Position driven by left/top (viewport-percentage) so the deco
       stays on-screen at any viewport size. Transform carries only
       the horizontal flip + tilt — no translate, so nothing pushes
       it off-screen on smaller viewports. */
    left: 86%;
    top: 5%;
    transform: perspective(900px) rotateY(176deg) rotateZ(31deg);
}

/* Inner-content stagger — capabilities cards reveal one after the
   other once the cap layer has begun fading in. Going back to why
   they all drop together (fast, no delay). */
.fade-pair-slide > .capabilities-section .cap-card {
    opacity: 0;
    transition: opacity 0.6s ease-in 0s;
}

.fade-pair-slide.showing-cap > .capabilities-section .cap-card {
    opacity: 1;
    transition: opacity 0.7s ease-out 1.1s;
}

.fade-pair-slide.showing-cap > .capabilities-section .cap-card:nth-child(2) {
    transition-delay: 1.18s;
}

.fade-pair-slide.showing-cap > .capabilities-section .cap-card:nth-child(3) {
    transition-delay: 1.26s;
}

.fade-pair-slide.showing-cap > .capabilities-section .cap-card:nth-child(4) {
    transition-delay: 1.34s;
}

/* =============================================
   MOBILE-ONLY OVERRIDES (≤ 768px)
   Scoped to mobile so desktop/tablet stay untouched.
   ============================================= */
@media (max-width: 768px) {

    /* ---- Natural document flow on mobile ----
       Disable the desktop fullpage slider entirely on phones. Each
       <section> takes its own content height, the page scrolls
       naturally, and there is no empty 100vh band below short
       sections like the hero. The slider/pair JS bails at the same
       breakpoint so it doesn't intercept scroll. */
    html, body {
        overflow: auto !important;
        height: auto !important;
        overscroll-behavior-y: auto;
    }
    .fp-slider-container,
    .fp-slides-container {
        height: auto !important;
        overflow: visible !important;
    }
    .fp-slides-container > section {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        transition: none !important;
        z-index: auto !important;
        animation: none !important;
    }
    .fp-slides-container > section.hero {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    /* Why ↔ Capabilities: stack vertically instead of crossfading. */
    .fade-pair-slide {
        height: auto !important;
        overflow: visible !important;
    }
    .fade-pair-slide > .why-section,
    .fade-pair-slide > .capabilities-section {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: auto !important;
        transition: none !important;
    }
    .fade-pair-slide.showing-cap > .why-section,
    .fade-pair-slide > .capabilities-section .cap-card,
    .fade-pair-slide.showing-cap > .capabilities-section .cap-card {
        opacity: 1 !important;
        transition: none !important;
    }
    /* Footer slide: let the WordPress footer take its natural height. */
    .footer-slide,
    .footer-slide .site-footer,
    .footer-slide footer {
        min-height: 0 !important;
        height: auto !important;
    }

    /* ---- Hide decorative-only elements on mobile ---- */
    .hero .hero-camera-wrap,
    .hero .hero-camera-wrap.light-image,
    .hero .camer-lights,
    .why-section .why-deco,
    .fade-pair-slide > .why-deco,
    .cta-wrapper .cta-deco-projection,
    .cta-wrapper .cta-trapezoid-blink {
        display: none !important;
    }

    /* ---- Subtle fade-in for scroll-revealed content ----
       The desktop reveal uses fade-up / slide-left / float / scale
       (with bounce easing). On mobile we collapse all of these to a
       single, lightweight opacity fade so content appears naturally
       without big translates or overshoot. */
    @keyframes smmMobileFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* User asked for the slider/fade effect to be off on mobile — content
       just appears, no animation. Cancel both desktop reveal keyframes
       and the mobile fade so nothing animates. */
    .scroll-animate,
    .scroll-animate.fade-up,
    .scroll-animate.slide-left,
    .scroll-animate.slide-right,
    .scroll-animate.scale,
    .scroll-animate.float,
    .scroll-animate.fade-in,
    .scroll-animate.is-visible {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* The slider keeps owning the section-level opacity via .is-active —
       don't let the mobile fade keyframe paint over it. */
    .fp-slides-container > section.scroll-animate {
        animation: none !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .scroll-animate,
        .scroll-animate.fade-up,
        .scroll-animate.slide-left,
        .scroll-animate.slide-right,
        .scroll-animate.scale,
        .scroll-animate.float,
        .scroll-animate.fade-in {
            animation: none !important;
        }
    }

    /* ---- Hero ----
       Slide is content-height (see natural-flow block above), so zero
       padding-bottom — the next section starts right below the buttons. */
    .hero {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 90px 20px 0 !important;
    }
    .hero-content {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        padding: 0;
        height: auto;
    }
    .hero-left {
        max-width: 100%;
    }
    .hero-btns {
        margin-bottom: 0;
    }
    .hero-badge {
        font-size: 9px;
        padding: 5px 14px;
        margin-bottom: 18px;
        letter-spacing: 1.5px;
    }
    .hero-h1 {
        font-size: 38px;
        line-height: 1.05;
        margin-bottom: 6px;
    }
    .hero-echo {
        font-size: 50px;
        margin-bottom: 18px;
    }
    .hero-subtitle {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 28px;
        max-width: 100%;
    }
    .hero-btns {
        gap: 10px;
        flex-wrap: wrap;
    }
    .btn-yellow,
    .btn-ghost {
        padding: 12px 22px;
        font-size: 13px;
    }
    /* Top corner decorations are noisy on small screens */
    .hero .top-left-image,
    .hero .top-right-ai-image {
        display: none;
    }

    /* ---- Why Choose Us ----
       Tighter top padding so the gap between Hero and Why isn't huge,
       and tighter bottom padding so Why → Capabilities feels close. */
    .why-section {
        padding: 50px 20px 30px !important;
    }
    .section-pill {
        font-size: 9px;
        padding: 4px 14px;
        margin-bottom: 18px;
        letter-spacing: 2px;
    }
    .why-title {
        font-size: 30px;
        line-height: 1.15;
        margin-bottom: 14px;
    }
    .why-subtitle {
        font-size: 14px;
        line-height: 1.6;
        margin: 0 auto 32px;
        max-width: 100%;
    }
    .video-box {
        height: auto;
        aspect-ratio: 16 / 9;
        margin: 0 auto 32px;
        border-radius: 12px;
    }
    .why-cards {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 100%;
    }
    .why-card {
        padding: 24px 22px;
        border-radius: 14px;
    }
    .why-card-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 16px;
    }
    .why-card h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }
    .why-card p {
        font-size: 13px;
        line-height: 1.6;
    }

    /* ---- Capabilities ----
       Mid-page on mobile (no header to clear), so top padding stays
       small — keeps the Why → Capabilities transition tight. */
    .capabilities-section {
        padding: 30px 20px 40px !important;
    }
    .cap-header {
        margin-bottom: 24px;
    }
    .cap-title {
        font-size: 30px;
        line-height: 1.15;
    }
    .cap-subtitle {
        font-size: 14px;
    }
    .cap-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 100%;
    }
    .cap-card {
        min-height: auto;
        padding: 24px 22px;
        border-radius: 14px;
    }
    .cap-card-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 16px;
    }
    .cap-card-title {
        font-size: 16px;
    }
    .cap-card-desc {
        font-size: 13px;
        margin-bottom: 16px;
    }
    .cap-card-list {
        margin-bottom: 18px;
    }
    .cap-card-list li {
        font-size: 12.5px;
    }
    .cap-card-link {
        font-size: 13px;
    }
    /* Cap-side floating cards — they're already faint, just hide on small screens to reduce noise */
    .capabilities-section .social-floating-cards,
    .why-section .social-floating-cards {
        display: none;
    }

    /* ---- CTA ----
       Wrapper paints yellow so the inner card blends edge-to-edge. */
    .cta-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        background: #f3ce34 !important;
    }
    .cta-wrapper .top-left-image,
    .cta-wrapper .top-right-image,
    .cta-wrapper .top-right-ai-image {
        display: none !important;
    }
    .fp-slides-container > section.cta-wrapper .cta-section {
        background: transparent !important;
        padding: 60px 24px !important;
        margin: 0 !important;
        width: 100%;
    }
    .cta-section h2 {
        font-size: 26px;
        margin-bottom: 18px;
        line-height: 1.2;
    }
    .cta-section p {
        font-size: 14px;
        margin-bottom: 24px;
        line-height: 1.55;
    }
    /* Buttons stack vertically and are horizontally centered (not
       full-width). Each button sizes to its own content with a sensible
       minimum so the two stay visually balanced. */
    .cta-actions {
        gap: 12px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .cta-actions button {
        padding: 14px 32px;
        height: auto;
        gap: 10px;
    }
    .btn-dark,
    .btn-outline {
        padding: 14px 32px;
        font-size: 13px;
        width: auto;
        min-width: 220px;
        max-width: 100%;
    }
    .cta-status {
        margin-top: 20px;
        font-size: 12px;
        gap: 8px;
    }
}