:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-card: #161616;
  --bg-card-hover: #1c1c1c;
  --border: #222222;
  --border-hover: #333333;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-muted: #666666;
  --accent-gold: #d4a843;
  --accent-red: #c0392b;
  --accent-dark-red: #8b1a1a;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:#0a0a0a;color:#f5f5f5;overflow-x:hidden;line-height:1.6}

body::before{
  content:'';position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,#0a0a0a 0%,#1a0a0a 20%,#2d0f0f 40%,#1a0a0a 70%,#0a0a0a 100%),
    linear-gradient(rgba(139,26,26,0.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,26,26,0.12) 1px,transparent 1px);
  background-size:100% 100%,50px 50px,50px 50px;
}
body::after{
  content:'';position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;pointer-events:none;opacity:0.02;
  background: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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#0a0a0a}
::-webkit-scrollbar-thumb{background:#8b1a1a;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#c0392b}
.gradient-text {
  background: linear-gradient(135deg, #f5f5f5, #d4a843, #c0392b);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
/* NAV */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  background:rgba(10,10,10,0.85);backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(139,26,26,0.2);transition:all 0.4s ease;
}
.nav-inner{max-width:1400px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.nav-logo-text{font-family:'Space Grotesk',sans-serif;font-weight:900;font-size:1.4rem;letter-spacing:0.12em;color:#f5f5f5;text-transform:uppercase}
.nav-logo-media{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:0.65rem;letter-spacing:0.3em;color:#d4a843;text-transform:uppercase}
.nav-logo-img{display:block;height:34px;width:auto;max-width:180px;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-link{color:#888;text-decoration:none;font-size:0.9rem;font-weight:500;transition:color 0.3s;position:relative}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:#c0392b;transition:width 0.3s}
.nav-link:hover{color:#f5f5f5}
.nav-link:hover::after{width:100%}
.nav-cta{padding:10px 28px;background:linear-gradient(135deg,#8b1a1a,#5c1212);color:#f5f5f5;border-radius:100px;font-size:0.85rem;font-weight:600;text-decoration:none;transition:all 0.3s;border:1px solid rgba(139,26,26,0.3)}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(139,26,26,0.3)}

/* HAMBURGER */
.nav-hamburger{
  display:none;flex-direction:column;justify-content:center;gap:6px;
  width:44px;height:44px;background:transparent;border:1px solid rgba(139,26,26,0.3);
  border-radius:10px;cursor:pointer;padding:10px;z-index:110;
}
.nav-hamburger span{display:block;width:100%;height:2px;background:#f5f5f5;border-radius:2px;transition:all 0.3s ease}
.nav-hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-hamburger.active span:nth-child(2){opacity:0}
.nav-hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.menu-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);
  z-index:104;opacity:0;visibility:hidden;transition:opacity 0.35s ease,visibility 0.35s ease;
}
.menu-overlay.active{opacity:1;visibility:visible}

.mobile-menu{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0.9);
  width:min(420px,90vw);
  background:rgba(15,15,15,0.98);backdrop-filter:blur(30px);
  border:1px solid rgba(139,26,26,0.3);border-radius:24px;
  z-index:105;padding:48px 32px 40px;
  opacity:0;visibility:hidden;
  transition:all 0.35s cubic-bezier(0.16,1,0.3,1);
  box-shadow:0 30px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(212,168,67,0.08);
}
.mobile-menu.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}

.mobile-close{
  position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(139,26,26,0.3);background:rgba(139,26,26,0.15);color:#f5f5f5;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;
}
.mobile-close svg{width:20px;height:20px}
.mobile-close:hover{background:rgba(139,26,26,0.35);border-color:rgba(212,168,67,0.5);transform:rotate(90deg)}

.mobile-nav{display:flex;flex-direction:column;align-items:center;gap:4px}
.mobile-link{color:#ccc;text-decoration:none;font-size:1.15rem;font-weight:500;padding:14px 0;width:100%;text-align:center;border-bottom:1px solid rgba(139,26,26,0.1);transition:color 0.3s}
.mobile-link:hover{color:#d4a843}
.mobile-cta{
  margin-top:20px;padding:16px 32px;background:linear-gradient(135deg,#8b1a1a,#5c1212);
  color:#f5f5f5;border-radius:100px;font-size:0.95rem;font-weight:600;text-decoration:none;
  text-align:center;border:1px solid rgba(139,26,26,0.3);width:100%;max-width:260px;
}

/* HERO */
.hero{position:relative;min-height:50vh;justify-content: center;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow:hidden;padding:120px 20px 60px}
/* Short viewports (landscape phones, small tablets, split-screen): don't
   force a full-screen hero — let it size to its content so nothing is
   pushed under the browser chrome / off the top. */
/* @media (max-height: 760px){
  .hero{min-height:auto;padding:104px 20px 44px}
  .hero-content{margin-bottom:24px}
}
/* Tablet portrait: tighten the hero and stats spacing. */
/* @media (min-width: 621px) and (max-width: 1024px){
  .hero{padding:110px 24px 48px}
  .hero-stats{gap:32px} */
 */
.hero-video-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden;background:#0a0a0a}
.hero-video-bg video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0.7;min-width:100%;min-height:100%}
.hero-video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(10,10,10,0.3) 0%,rgba(10,10,10,0.6) 50%,rgba(10,10,10,0.95) 100%);z-index:1;pointer-events:none}
.hero-content{position:relative;z-index:10;text-align:center;max-width:100vw;margin-bottom:40px}
.hero-tagline{font-size:clamp(1.3rem,3vw,1.3rem);color:#e0e0e0;margin-bottom:16px;max-width:900px;margin-left:auto;margin-right:auto;font-weight:300;letter-spacing:0.02em}
.hero-tagline span{color:#d4a843;font-weight:600}
.hero-desc{color:#999;font-size:1rem;max-width:900px;margin:0 auto 32px; text-align: center; padding-top: 30px;}
.hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:45px; padding-top: 30px;}
.btn-primary{width: 200px;  padding: 15px; display:inline-flex;align-items:center;gap:10px; justify-content: center;  background:linear-gradient(135deg,#8b1a1a,#5c1212);color:#f5f5f5;border-radius:100px;font-weight:600;font-size:0.95rem;text-decoration:none;border:1px solid rgba(139,26,26,0.4);transition:all 0.4s;position:relative;overflow:hidden}
.btn-primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);transition:left 0.5s}
.btn-primary:hover::before{left:100%}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(139,26,26,0.35); width: 212.91px;}
.btn-secondary{ justify-content:center;  width: 200px; display:inline-flex;align-items:center;gap:10px;padding:15px;background:transparent;color:#f5f5f5;border-radius:100px;font-weight:600;font-size:0.95rem;text-decoration:none;border:1px solid rgba(212,168,67,0.4);transition:all 0.4s}
.btn-secondary:hover{background:rgba(212,168,67,0.1);border-color:rgba(212,168,67,0.7);transform:translateY(-3px)}
.hero-stats{display:flex;gap:48px;justify-content:center;flex-wrap:wrap}
.stat-item{text-align:center}
.stat-num{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:clamp(2.5rem,5vw,3.5rem);color:#f5f5f5;line-height:1}
.stat-label{color:#888;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.15em;margin-top:6px}
.hero-layouting-1{
  font-size: 7rem;
  text-align: center;
}
.hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(4rem, 6.5vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.hero-title .line {
  display: flex;
  overflow: hidden;
  gap: 15px;
}
.hero-title .line > span {
  display: block;
  transform: translateY(100%);
  animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-title .line:nth-child(1) > span { animation-delay: 0.2s; }
.hero-title .line:nth-child(2) > span { animation-delay: 0.35s; }
.hero-title .line:nth-child(3) > span { animation-delay: 0.5s; }
.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 700px;
  margin-bottom: 40px;
  line-height: 1.7;
  animation: fadeInUp 0.8s ease 0.6s forwards;
  opacity: 0;
  position: relative;
  z-index: 2;
  margin: 0 auto;
  text-align: center;
}
@keyframes slideUp {
  to { transform: translateY(0); }
}
/* VIDEO MARQUEE */
.video-scroll-section{width:100%;overflow:hidden;padding:60px 0;position:relative}
.video-scroll-section::before,.video-scroll-section::after{content:'';position:absolute;top:0;width:120px;height:100%;z-index:5;pointer-events:none}
.video-scroll-section::before{left:0;background:linear-gradient(90deg,#0a0a0a,transparent)}
.video-scroll-section::after{right:0;background:linear-gradient(270deg,#0a0a0a,transparent)}
.video-track{display:flex;align-items:center;gap:20px;animation:scrollH 35s linear infinite;width:max-content;will-change:transform}
.video-track:hover{animation-play-state:paused}
@keyframes scrollH{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.video-card{flex-shrink:0;width:220px;height:390px;border-radius:16px;overflow:hidden;position:relative;border:1px solid rgba(139,26,26,0.2);background:#111;transition:transform 0.4s,box-shadow 0.4s}
.video-card.landscape{width:340px;height:220px}
.video-card:hover{transform:scale(1.05);z-index:10;box-shadow:0 20px 60px rgba(139,26,26,0.2)}
.video-card video{width:100%;height:100%;object-fit:cover}
.video-badge{position:absolute;top:10px;left:10px;padding:4px 10px;background:rgba(10,10,10,0.8);backdrop-filter:blur(10px);border:1px solid rgba(212,168,67,0.3);border-radius:100px;font-size:0.7rem;color:#d4a843;font-weight:600}
.video-stats{position:absolute;bottom:10px;left:10px;right:10px;display:flex;gap:8px;flex-wrap:wrap}
.video-stat{padding:3px 8px;background:rgba(10,10,10,0.7);backdrop-filter:blur(10px);border-radius:6px;font-size:0.65rem;color:#aaa;display:flex;align-items:center;gap:4px}

/* MARQUEE */
.marquee-wrap{overflow:hidden;white-space:nowrap;padding:20px 0;border-top:1px solid rgba(139,26,26,0.1);border-bottom:1px solid rgba(139,26,26,0.1);background:rgba(17,17,17,0.5)}
.marquee-track{display:inline-flex;animation:marquee 30s linear infinite}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-item{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2rem,5vw,4rem);color:rgba(139,26,26,0.15);text-transform:uppercase;margin:0 24px;letter-spacing:0.1em}
.marquee-dot{color:#8b1a1a;margin:0 16px;font-size:2rem}

/* INTRO */
.spacing{
  width: 5%;
}
.intro-parent{
  display: flex;
}
.intro-section{padding:120px 20px;position:relative}
.intro-inner{max-width:100%;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:40px;align-items:center}
.intro-badge{display:inline-block;padding:6px 16px;background:rgba(139,26,26,0.15);border:1px solid rgba(139,26,26,0.3);border-radius:100px;font-size:0.75rem;color:#d4a843;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:16px}
.intro-title{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:2.9rem;color:#f5f5f5;margin-bottom:16px}
.g-text{background:linear-gradient(135deg,#f5f5f5,#d4a843,#c0392b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.intro-text{color:#888;font-size:1rem;line-height:1.7;max-width:500px}
.intro-stats-parent{max-width: 80%; margin-left: 8rem;}
.intro-stats{display:flex;flex-direction:column;gap:32px}
.spacing-margin{margin-left: 4rem;}
.intro-stat-items{margin-left: 8rem;}
.intro-stat-num{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:clamp(2.5rem,4vw,3.5rem);color:#f5f5f5;line-height:1}
.intro-stat-label{color:#666;font-size:0.85rem;margin-top:4px}
.intro-stat-line{width:100%;height:1px;background:linear-gradient(90deg,#8b1a1a,transparent);margin-top:16px;opacity:0.3}
.intro-features{display:flex;flex-direction:column;gap:5px; max-width: 100%;}
.intro-feature{display:flex;gap:15px;align-items:flex-start}
.intro-feature-icon{width:40px;height:40px;border-radius:10px;background:rgba(139,26,26,0.15);border:1px solid rgba(139,26,26,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.intro-feature-icon svg{width:20px;height:20px;color:#d4a843}
.intro-feature-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.1rem;color:#f5f5f5;margin-bottom:4px}
.intro-feature-desc{color:#666; padding-bottom: 18px;  font-size:0.85rem;line-height:1.5 }
.phone-mockup{position:relative;width:280px;height:560px;margin:0 auto;border-radius:40px;border:3px solid rgba(139,26,26,0.3);background:#111;overflow:hidden;box-shadow:0 30px 80px rgba(139,26,26,0.15)}
.phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:28px;background:#0a0a0a;border-radius:0 0 20px 20px;z-index:20}
.phone-screen{width:100%;height:100%;overflow:hidden;position:relative}
.phone-scroll{display:flex;flex-direction:column;gap:8px;animation:scrollV 20s linear infinite}
@keyframes scrollV{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
.phone-video{width:100%;height:200px;flex-shrink:0;border-radius:12px;overflow:hidden;position:relative;background:linear-gradient(135deg,#1a1a1a,#2a2a2a)}
.phone-video video{width:100%;height:100%;object-fit:cover}
.phone-video-badge{position:absolute;top:8px;left:8px;padding:3px 8px;background:rgba(10,10,10,0.8);border-radius:6px;font-size:0.6rem;color:#d4a843;font-weight:600}

/* PROCESS */
.process-section{padding:120px 20px;position:relative}
.process-inner{max-width:1000px;margin:0 auto}
.process-header{text-align:center;margin-bottom:80px}
.process-title{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:clamp(2.5rem,5vw,4rem);color:#f5f5f5;margin-bottom:12px}
.process-subtitle{color:#888;font-size:1rem}
.process-timeline{position:relative}
.process-timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,#8b1a1a,transparent);transform:translateX(-50%)}
.process-card{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:60px;opacity:0.3;filter:blur(4px) grayscale(0.8);transition:all 0.8s cubic-bezier(0.16,1,0.3,1)}
.process-card.active{opacity:1;filter:blur(0) grayscale(0)}
.process-card:nth-child(even) .process-card-text{order:2}
.process-card:nth-child(even) .process-card-visual{order:1}
.process-card-text{padding:30px}
.process-card-num{font-family:'Space Grotesk',sans-serif;font-weight:900;font-size:6rem;color:rgba(139,26,26,0.1);line-height:1;position:absolute;bottom:20px;left:20px}
.process-card-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.8rem;color:#f5f5f5;margin-bottom:12px;position:relative;z-index:2}
.process-card-desc{color:#888;font-size:0.95rem;line-height:1.6;position:relative;z-index:2}
.process-card-visual{height:280px;border-radius:20px;overflow:hidden;position:relative;border:1px solid rgba(139,26,26,0.2);background:#111}
.process-card-visual img,.process-card-visual video{width:100%;height:100%;object-fit:cover}
.process-card-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(139,26,26,0.1),transparent)}

/* TESTIMONIALS */
.testimonials-section{padding:120px 20px;position:relative;overflow:hidden}
.testimonials-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:30px;align-items:center}
.testimonials-header{text-align:center;margin-bottom:60px}
.testimonials-title{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:clamp(2.5rem,5vw,4rem);color:#f5f5f5;margin-bottom:12px}
.scroll-col{height:500px;overflow:hidden;position:relative;mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent)}
.scroll-col-left .scroll-track{animation:scrollUp 25s linear infinite}
.scroll-col-right .scroll-track{animation:scrollDown 25s linear infinite}
@keyframes scrollUp{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
@keyframes scrollDown{0%{transform:translateY(-50%)}100%{transform:translateY(0)}}
.scroll-track{display:flex;flex-direction:column;gap:16px}
.scroll-track:hover{animation-play-state:paused}
.testi-card{background:rgba(17,17,17,0.8);border:1px solid rgba(139,26,26,0.1);border-radius:16px;padding:24px;transition:all 0.3s}
.testi-card:hover{border-color:rgba(139,26,26,0.3);transform:translateY(-4px);box-shadow:0 10px 40px rgba(139,26,26,0.1)}
.testi-stars{display:flex;gap:4px;margin-bottom:12px}
.testi-stars svg{width:16px;height:16px;color:#d4a843;fill:#d4a843}
.testi-text{color:#aaa;font-size:0.85rem;line-height:1.6;margin-bottom:16px}
.testi-author{display:flex;align-items:center;gap:12px}
.testi-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#8b1a1a,#5c1212);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;color:#f5f5f5}
.testi-name{color:#f5f5f5;font-weight:600;font-size:0.9rem}
.testi-role{color:#666;font-size:0.75rem}

/* TESTIMONIAL PHONE — Instagram-style swipe reels */
.testi-phone-wrap{display:flex;justify-content:center}
.testi-phone{
  width:auto;;height:520px;border-radius:36px;border:3px solid rgba(139,26,26,0.3);
  background:#111;overflow:hidden;position:relative;
  box-shadow:0 30px 80px rgba(139,26,26,0.15);
  user-select:none;touch-action:none;
}
.testi-phone-notch{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100px;height:24px;background:#0a0a0a;border-radius:0 0 16px 16px;
  z-index:20;pointer-events:none;
}
.testi-phone-viewport{width:100%;height:100%;overflow:hidden;position:relative;cursor:grab}
.testi-phone-viewport.is-dragging{cursor:grabbing}
.testi-phone-track{display:flex;flex-direction:column;height:100%;will-change:transform;transition:transform 0.45s cubic-bezier(0.16,1,0.3,1)}
.testi-phone-track.no-transition{transition:none}
.testi-phone-slide{width:100%;height:100%;flex-shrink:0;position:relative;background:linear-gradient(160deg,#1a1113,#0a0a0a 60%);background-size:cover;background-position:center;background-repeat:no-repeat}
.testi-phone-slide video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;position:relative;z-index:1}
.testi-reels-dots{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:6px;z-index:15;pointer-events:none;
}
.testi-reels-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.35);transition:all 0.3s ease}
.testi-reels-dot.active{height:18px;border-radius:4px;background:#d4a843}
.testi-swipe-hint{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:0.65rem;color:rgba(255,255,255,0.7);z-index:15;pointer-events:none;
  animation:swipeHintBounce 2s ease-in-out infinite;transition:opacity 0.4s ease;
}
.testi-swipe-hint svg{width:18px;height:18px;color:#d4a843}
.testi-swipe-hint.hidden{opacity:0}
@keyframes swipeHintBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}

/* CTA */
.cta-section{padding:120px 20px;position:relative;overflow:hidden}
.cta-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.cta-badge{margin-bottom:16px}
.cta-title{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:clamp(2.5rem,5vw,4rem);color:#f5f5f5;margin-bottom:20px;line-height:1.1}
.cta-desc{color:#888;font-size:1rem;line-height:1.7;margin-bottom:32px;max-width:500px}
.cta-btns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.cta-spots{display:flex;align-items:center;gap:8px;color:#666;font-size:0.85rem}
.cta-spots-dot{width:8px;height:8px;border-radius:50%;background:#d4a843;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.cta-visual{position:relative;height:500px;display:flex;align-items:center;justify-content:center}
.cta-phone{width:280px;height:auto;border-radius:40px;border:3px solid rgba(139,26,26,0.3);background:#111;overflow:hidden;position:relative;box-shadow:0 30px 80px rgba(139,26,26,0.2);z-index:10}
.cta-phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:28px;background:#0a0a0a;border-radius:0 0 20px 20px;z-index:20}
.cta-phone-screen{width:100%;height:100%;overflow:hidden}
.cta-phone video{width:100%;height:100%;object-fit:cover}
.floating-tags{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:16px;z-index:20}
.floating-tag{padding:10px 18px;background:rgba(17,17,17,0.9);backdrop-filter:blur(20px);border:1px solid rgba(212,168,67,0.3);border-radius:12px;display:flex;align-items:center;gap:10px;font-size:0.85rem;color:#f5f5f5;font-weight:500;animation:floatTag 3s ease-in-out infinite;box-shadow:0 10px 30px rgba(0,0,0,0.3)}
.floating-tag:nth-child(1){animation-delay:0s;margin-left:0}
.floating-tag:nth-child(2){animation-delay:0.5s;margin-left:-20px}
.floating-tag:nth-child(3){animation-delay:1s;margin-left:-40px}
.floating-tag:nth-child(4){animation-delay:1.5s;margin-left:-60px}
.floating-tag:nth-child(5){animation-delay:2s;margin-left:-80px}
@keyframes floatTag{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.floating-tag-icon{width:28px;height:28px;border-radius:8px;background:rgba(139,26,26,0.2);display:flex;align-items:center;justify-content:center}
.floating-tag-icon svg{width:16px;height:16px;color:#d4a843}

/* SERVICES */
.services-section{padding:120px 20px}
.services-inner{max-width:1400px;margin:0 auto}
.services-header{text-align:center;margin-bottom:60px}
.services-title{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:clamp(2.5rem,5vw,4rem);color:#f5f5f5;margin-bottom:12px}
.services-grid{display:grid;grid-template-columns: auto auto auto;;gap:20px}
.service-card{background:linear-gradient(135deg,rgba(26,26,26,0.8),rgba(17,17,17,0.9));border:1px solid rgba(139,26,26,0.1);border-radius:20px;margin:15px; padding: 35px; position:relative;overflow:hidden;transition:all 0.5s}
.service-card:hover{border-color:rgba(139,26,26,0.3);transform:translateY(-10px);box-shadow:0 20px 60px rgba(139,26,26,0.1)}
.service-card-num{position:absolute;top:15px;right:25px;font-family:'Space Grotesk',sans-serif;font-weight:900;font-size:4rem;color:rgba(139,26,26,0.08);line-height:1}
.service-icon{width:50px;height:50px;border-radius:14px;background:rgba(139,26,26,0.1);border:1px solid rgba(139,26,26,0.2);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.service-icon svg{width:24px;height:24px;color:#d4a843}
.service-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.2rem;color:#f5f5f5;margin-bottom:8px}
.service-desc{color:#888;font-size:0.85rem;line-height:1.6}


/* INDUSTRIES */
.industries-section{padding:120px 20px;background:#080808}
.industries-inner{max-width:1400px;margin:0 auto}
.industries-header{text-align:center;margin-bottom:60px}
 .industries-grid{
 display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    align-items:stretch;}
.industry-card{background:rgba(26,26,26,0.6);backdrop-filter:blur(20px);border:1px solid rgba(139,26,26,0.15);border-radius:16px;padding:28px;transition:all 0.4s}
.industry-card:hover{border-color:rgba(139,26,26,0.4);transform:translateY(-8px);box-shadow:0 20px 60px rgba(139,26,26,0.1)}
.industry-icon{width:44px;height:44px;border-radius:12px;background:rgba(139,26,26,0.1);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.industry-icon svg{width:22px;height:22px;color:#d4a843}
.industry-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1rem;color:#f5f5f5;margin-bottom:5px}
.industry-desc{color:#888;font-size:0.78rem;line-height:1.4}

/* FAQ */
.faq-section{padding:120px 20px;background:#080808}
.faq-inner{max-width:800px;margin:0 auto}
.faq-header{text-align:center;margin-bottom:60px}
.faq-item{border-bottom:1px solid rgba(139,26,26,0.1);overflow:hidden}
.faq-question{padding:24px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:color 0.3s}
.faq-question:hover{color:#d4a843}
.faq-q-text{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.1rem;color:#f5f5f5;padding-right:16px}
.faq-icon{transition:transform 0.3s;flex-shrink:0}
.faq-icon svg{width:20px;height:20px;color:#d4a843}
.faq-item.active .faq-icon{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.5s ease,padding 0.5s ease}
.faq-item.active .faq-answer{max-height:500px;padding-bottom:24px}
.faq-a-text{color:#888;font-size:0.9rem;line-height:1.7}

/* FOOTER */
/* FOOTER */
.footer{background:#050505;border-top:1px solid rgba(139,26,26,0.1);padding:60px 20px 30px}
.footer-inner{max-width:1400px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px}
.footer-links-cols{display:contents}
.footer-brand{margin-bottom:16px}
.footer-brand-text{font-family:'Space Grotesk',sans-serif;font-weight:900;font-size:1.5rem;color:#f5f5f5;letter-spacing:0.1em}
.footer-brand-media{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:0.6rem;letter-spacing:0.3em;color:#d4a843;margin-left:4px}
.footer-brand-img{display:block;height:32px;width:auto;max-width:200px;object-fit:contain}
.footer-desc{color:#666;font-size:0.85rem;line-height:1.6;max-width:300px}
.footer-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:0.9rem;color:#f5f5f5;margin-bottom:16px}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-link{color:#666;text-decoration:none;font-size:0.85rem;transition:color 0.3s}
.footer-link:hover{color:#d4a843}
.footer-social{display:flex;gap:12px;margin-top:16px}
.footer-social-link{width:40px;height:40px;border-radius:50%;background:rgba(26,26,26,0.8);border:1px solid rgba(139,26,26,0.2);display:flex;align-items:center;justify-content:center;color:#888;transition:all 0.3s;text-decoration:none}
.footer-social-link:hover{background:rgba(139,26,26,0.2);border-color:rgba(139,26,26,0.5);color:#f5f5f5;transform:translateY(-3px)}
.footer-social-link svg{width:18px;height:18px}
.footer-bottom{border-top:1px solid rgba(139,26,26,0.1);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer-copy{color:#555;font-size:0.8rem}
.footer-legal{display:flex;gap:24px}
.footer-legal a{color:#555;text-decoration:none;font-size:0.8rem;transition:color 0.3s}
.footer-legal a:hover{color:#d4a843}

/* FOOTER — RESPONSIVE */
@media (max-width: 1024px) {
  .footer-grid{
    grid-template-columns:1.5fr 1fr 1fr;
    gap:32px 24px;
  }
  .footer-brand-col{grid-column:1 / -1}
}

@media (max-width: 768px) {
  .footer{padding:48px 20px 24px}
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:32px 20px;
    margin-bottom:36px;
  }
  .footer-brand-col{grid-column:1 / -1}
  .footer-desc{max-width:100%}
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .footer-legal{gap:20px}
}

@media (max-width: 480px) {
  .footer{padding:40px 16px 20px}
  .footer-grid{
    grid-template-columns:1fr;
    gap:28px;
    margin-bottom:32px;
  }
  .footer-brand-text{font-size:1.3rem}
  .footer-social{gap:10px}
  .footer-social-link{width:36px;height:36px}
  .footer-social-link svg{width:16px;height:16px}
  .footer-title{margin-bottom:12px}
  .footer-links{gap:8px}
  .footer-bottom{
    padding-top:20px;
    text-align:left;
  }
  .footer-legal{
    flex-direction:column;
    gap:8px;
  }
}

.reveal{opacity:0;transform:translateY(40px);transition:all 0.8s cubic-bezier(0.16,1,0.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

@media(max-width:1024px){
  .intro-inner,.testimonials-inner,.cta-inner{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav-hamburger{display:flex}
  .nav-links{display:none}
  .hero-stats{gap:24px}
  .video-scroll-section{padding:40px 0}
  .video-card{width:160px;height:280px}
  .video-card.landscape{width:260px;height:160px}
  .phone-mockup{width:220px;height:440px}
  .floating-tags{position:relative;right:auto;top:auto;transform:none;margin-top:30px;align-items:center}
  .floating-tag{margin-left:0 !important}
  .process-timeline::before{left:20px}
  .process-card{grid-template-columns:1fr !important}
  .process-card-text,.process-card-visual{order:unset !important}
  .scroll-col{height:300px}
  .footer-grid{grid-template-columns:1fr}
  .industries-grid{grid-template-columns:1fr 1fr}
}
@media screen and (min-width:375px) and (max-width:464px){
  .cta-visual{display:inline-block;align-items:center}
  .intro-badge{display:flex;justify-content:center}
  .cta-btns{justify-content:center}
  .cta-spots{display:flex;justify-content:center}
  .reveal.visible{display:block;height:auto;}
  .intro-feature{margin-bottom:20px}
  .intro-title{text-align:center}
}
@media screen and (min-width:1025px) and (max-width:1192px){
  .intro-stats-parent{
    margin-left: 2rem;
  }
  .intro-title{
    font-size: 2.5rem;
  }
}
@media screen and (min-width:375px) and (max-width:423px){
.intro-stats-parent{
  margin-left: 2rem;
}
}
@media screen and (min-width:858px) and (max-width:1287px){
  .service-card{
    width: auto;
    height: 250px;
  }
  .service-title{
    font-size: 1rem;
  }

}
@media screen and (min-width:500px) and (max-width:858px){
  .service-parent{
    width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .services-grid{
display: flex;
flex-direction: column;
  }
  .service-title{
    font-size: 1rem;
  }

}
@media screen and (min-width:375px) and (max-width:500px){
  .service-parent{
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap:10px;
  }
  .services-grid{
display: flex;
flex-direction: column;
gap: 5px;
  }
  .service-title{
    font-size: 1rem;
  }

}
/* Tablet */

@media screen and (max-width:900px){

    .industries-grid{
        grid-template-columns:repeat(2,1fr);
        gap:18px;
    }

}

/* Mobile */

@media screen and (max-width:480px){

    .industries-grid{
        grid-template-columns:1fr;
        gap:14px;
    }



}
@media(max-width:1125px) and (min-width:979px){
  .hero-layouting-1{
    font-size: 6rem;
  }
.hero-title{
  gap: 20px;
}
}
@media (max-width: 979px) and (min-width:620px){
.hero-layouting-1{
  font-size: 5rem;
}
.hero-title{
  gap: 15px;
}
}
@media(max-width:620px) and (min-width:375px){
.hero-layouting-1{
  font-size: 10vw;
}
.hero-title{
  gap: 10px;
}
}

/* NAV SERVICES DROPDOWN (desktop) */
.nav-item{position:relative}
.nav-dropdown-toggle{
  background:none;border:none;cursor:pointer;padding:0;
  color:#888;font-family:inherit;font-size:0.9rem;font-weight:500;line-height:1;
  display:inline-flex;align-items:center;gap:6px;
}
.nav-dropdown-toggle svg{width:12px;height:12px;flex-shrink:0;transition:transform 0.3s ease}
.nav-item.open .nav-dropdown-toggle svg{transform:rotate(180deg)}
.nav-dropdown{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(-8px);
  min-width:260px;background:rgba(15,8,8,0.98);backdrop-filter:blur(20px);
  border:1px solid rgba(212,168,67,0.25);border-radius:14px;
  padding:10px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;pointer-events:none;transition:all 0.25s ease;
  box-shadow:0 20px 50px rgba(0,0,0,0.6);z-index:200;
}
.nav-item.open .nav-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-dropdown a{
  color:#ccc;text-decoration:none;font-size:0.92rem;font-weight:500;
  padding:10px 14px;border-radius:8px;transition:all 0.2s ease;
  letter-spacing:0.02em;
}
.nav-dropdown a:hover{background:rgba(212,168,67,0.1);color:#d4a843}

/* MOBILE SERVICES DROPDOWN */
.mobile-item{width:100%}
.mobile-dropdown-toggle{
  background:none;border:none;cursor:pointer;
  color:#ccc;font-family:inherit;font-size:1.15rem;font-weight:500;
  line-height:1.4;padding:14px 0;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-bottom:1px solid rgba(139,26,26,0.1);
  transition:color 0.3s;
  margin-left: 14px;
}
.mobile-dropdown-toggle svg{
  width:14px;height:14px;flex-shrink:0;
  transition:transform 0.3s ease;
}
.mobile-dropdown-toggle:hover{color:#d4a843}
.mobile-item.open .mobile-dropdown-toggle{color:#d4a843}
.mobile-item.open .mobile-dropdown-toggle svg{transform:rotate(180deg)}
.mobile-submenu{
  max-height:0;overflow:hidden;transition:max-height 0.35s ease;
  display:flex;flex-direction:column;
}
.mobile-item.open .mobile-submenu{max-height:600px}
.mobile-submenu a{
  color:#aaa;text-decoration:none;font-size:0.95rem;font-weight:400;
  padding:10px 0;text-align:center;border-bottom:1px solid rgba(139,26,26,0.06);
  transition:color 0.2s;
}
.mobile-submenu a:hover{color:#d4a843}

  .services-dropdown{padding:14px 44px 14px 16px;font-size:0.95rem}


@media(prefers-reduced-motion:reduce){
  .video-track,.marquee-track,.phone-scroll,.scroll-track{animation:none !important}
  .testi-phone-track{transition:none !important}
  .testi-swipe-hint{animation:none}
  /* The hero title spans start translated 100% down and are only revealed
     by the slideUp animation — make sure they're visible when animations
     are suppressed, so the heading never stays hidden. */
  .hero-title .line > span{animation:none !important;transform:none !important}
  .reveal{opacity:1 !important;transform:none !important}
}

.pf-clients { padding: 6px 0 30px; text-align: center; }
.pf-clients-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 26px;
}
.pf-clients-label::before,
.pf-clients-label::after {
  content: '';
  width: 42px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,0.5));
}
.pf-clients-label::after {
  background: linear-gradient(90deg, rgba(212,168,67,0.5), transparent);
}
.pf-clients-viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  padding: 4px 0;
}
.pf-clients-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: pfClients 30s linear infinite;
  will-change: transform;
}
.pf-clients-viewport:hover .pf-clients-track { animation-play-state: paused; }
@keyframes pfClients { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.pf-client {
  color: rgba(245,245,245,0.78);
  flex-shrink: 0;
  padding: 14px 26px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  transition: color 0.35s, border-color 0.35s, transform 0.35s, box-shadow 0.35s;
}
.pf-client:hover {
  border-color: rgba(212,168,67,0.45);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.pf-client:hover img {
  filter: drop-shadow(0 0 7px rgba(212,168,67,0.55)) brightness(1.1);
}
.pf-client img { transition: filter 0.35s; }
.pf-client img { height: 26px; width: auto; display: block; }
/* Trusted Section */

  .trusted-by-section{background:transparent;padding:70px 0 60px;position:relative;overflow:hidden}
  .trusted-by-inner{max-width:1400px;margin:0 auto;padding:0 24px}
  .trusted-by-label{display:flex;align-items:center;justify-content:center;gap:16px;color:#c9a24a;font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.35em;font-weight:600;margin-bottom:36px;text-transform:uppercase}
  .tb-line{display:inline-block;width:60px;height:1px;background:linear-gradient(90deg,transparent,#c9a24a,transparent)}
  .trusted-marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .trusted-marquee-track{display:flex;gap:22px;width:max-content;animation:trustedScroll 40s linear infinite}
  .trusted-marquee:hover .trusted-marquee-track{animation-play-state:paused}
  .trusted-logo{flex:0 0 auto;min-width:220px;height:88px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);border-radius:14px;display:flex;align-items:center;justify-content:center;padding:0 32px;transition:transform .3s ease,border-color .3s ease,background .3s ease}
  .trusted-logo:hover{transform:translateY(-3px);border-color:rgba(201,162,74,.4);background:linear-gradient(180deg,rgba(201,162,74,.08),rgba(255,255,255,.02))}
  .trusted-logo img{max-height:44px;max-width:160px;width:auto;height:auto;object-fit:contain;filter:brightness(1.05)}
  @keyframes trustedScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (max-width:640px){.trusted-logo{min-width:170px;height:74px;padding:0 22px}.trusted-logo img{max-height:36px;max-width:130px}.trusted-by-label{font-size:11px}}

/* ============================================================
   TABLET / MID-WIDTH PASS  —  everything between phone (<=768)
   and desktop (>1024). Added last so it overrides the older,
   overlapping breakpoints above without editing them. Purely
   additive; desktop (>1024) is untouched.
   ============================================================ */
@media (max-width: 1024px){
  /* Nothing should be able to scroll the page sideways. */
  html, body { overflow-x: hidden; max-width: 100%; }
  .hero-content, .hero-title { max-width: 100%; }
  #showcase, .video-scroll-section { max-width: 100vw; overflow: hidden; }

  /* Nav stays as the desktop link row down to 768px (the phone breakpoint
     above swaps in the hamburger); just tighten its padding here. */
  .nav-inner { padding: 14px 20px; }

  /* Consistent side gutters for every section. */
  .hero, #about, .intro, #services, .services-section,
  #process, #industries, #faq, #contact, .cta-section,
  .testimonials-section { padding-left: 24px; padding-right: 24px; }

  /* Stack the multi-column section layouts. */
  .intro-inner, .testimonials-inner, .cta-inner {
    grid-template-columns: 1fr; gap: 32px;
  }
  .process-card { grid-template-columns: 1fr !important; gap: 24px; margin-bottom: 44px; }
  .process-card .process-card-text,
  .process-card .process-card-visual { order: unset !important; }
  .services-grid { display: flex; flex-direction: column; gap: 14px; }
  .service-parent { width: 100%; max-width: 560px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 14px; }
  .industries-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .faq-inner { max-width: 100%; }

  /* Give every media box a real height so the clip has somewhere to
     paint (a collapsed container reads as "video not playing"). */
  .process-card-visual { min-height: 240px; }
  .process-card-visual video,
  .video-card video, .phone-video video,
  .cta-phone-screen video, .cta-visual video { width: 100%; height: 100%; object-fit: cover; }
  .cta-visual, .cta-phone { margin-left: auto; margin-right: auto; }
  .testi-phone { height: 480px; }
}

/* Tablet portrait / large phone. */
@media (max-width: 820px){
  .hero-title { font-size: clamp(2.6rem, 8vw, 3.4rem); }
  .hero-stats { gap: 20px 28px; }
  .industries-grid { grid-template-columns: 1fr; }
}