body.no-scroll { overflow: hidden; }

/* ── SPLASH ── */
#splash { position: fixed; inset: 0; z-index: 9999; background: #f2f5f7; display: flex; align-items: center; justify-content: center; transition: opacity 0.8s ease, visibility 0.8s ease; }
.hidden { opacity: 0 !important; visibility: hidden !important; }
.splash-logo-wrap { animation: splashIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.1s both; }
.splash-img { width: 380px; max-width: 72vw; display: block; }
@keyframes splashIn { 0% { opacity: 0; transform: scale(0.3) rotate(-8deg); filter: blur(6px); } 40% { opacity: 1; filter: blur(0); } 65% { transform: scale(1.06) rotate(1deg); } 85% { transform: scale(0.97) rotate(-0.5deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }

/* ── HERO BILLBOARD ── */
.hero { position: relative; z-index: 10; padding-top: 5rem; display: flex; flex-direction: column; align-items: center; }
.billboard-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; }
.bb-structure { overflow: hidden; display: flex; flex-direction: column; align-items: center; width: 92%; max-width: 1280px; position: relative; }
.bb-screen { overflow: hidden; position: relative; width: 100%; height: 400px; border-radius: 2px; border: 6px solid #2a2a2a; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), 0 0 0 1px #111, 0 30px 80px rgba(0,0,0,0.4), 0 8px 30px rgba(197,160,89,0.12); z-index: 2; background: #0c182d; }
.bb-support { width: 100%; display: block; overflow: visible; margin-top: -1px; }
.bb-slides-wrap { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.bb-slides-inner { display: flex; height: 100%; transition: transform 0.55s cubic-bezier(0.77,0,0.18,1); }
.bb-slide-item { flex: 0 0 100%; height: 100%; display: flex; align-items: center; padding: 2rem 2.5rem; box-sizing: border-box; position: relative; overflow: hidden; }

.s1 { background: radial-gradient(ellipse 80% 60% at 72% 50%, #1a2a0a 0%, #08110a 40%, #020608 100%); }
.s1::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 80% at 78% 50%, rgba(197,160,89,0.18) 0%, transparent 65%), radial-gradient(ellipse 30% 50% at 80% 48%, rgba(232,200,122,0.22) 0%, transparent 50%); z-index: 0; }
.s1::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(197,160,89,0.04) 60px), repeating-linear-gradient(180deg, transparent, transparent 59px, rgba(197,160,89,0.03) 60px); background-size: 60px 60px; transform: perspective(600px) rotateX(30deg) translateY(20%) scaleX(1.4); transform-origin: bottom center; opacity: 0.9; z-index: 0; }
.s1 .slide-art { position: absolute; right: 0; top: 0; width: 52%; height: 100%; z-index: 1; pointer-events: none; overflow: hidden; }
.s1 .slide-art canvas { width: 100%; height: 100%; display: block; }
.s2 { background: radial-gradient(ellipse 90% 80% at 65% 55%, #021408 0%, #010c06 50%, #010806 100%); }
.s2::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 68% 50%, rgba(80,200,120,0.14) 0%, transparent 65%), radial-gradient(ellipse 25% 35% at 70% 48%, rgba(100,230,140,0.18) 0%, transparent 45%); z-index: 0; }
.s3 { background: radial-gradient(ellipse 85% 70% at 68% 52%, #1c0e00 0%, #0e0600 50%, #060300 100%); }
.s3::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 65% at 72% 50%, rgba(240,180,50,0.16) 0%, transparent 65%), radial-gradient(ellipse 28% 40% at 74% 48%, rgba(255,200,80,0.2) 0%, transparent 48%); z-index: 0; }
.s4 { background: radial-gradient(ellipse 85% 70% at 65% 50%, #0d0520 0%, #060210 50%, #030108 100%); }
.s4::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 70% 50%, rgba(160,100,240,0.18) 0%, transparent 60%), radial-gradient(ellipse 25% 35% at 72% 48%, rgba(190,130,255,0.22) 0%, transparent 45%); z-index: 0; }
.s5 { background: radial-gradient(ellipse 85% 70% at 65% 50%, #010d14 0%, #010810 55%, #010608 100%); }
.s5::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 70% 50%, rgba(0,229,255,0.12) 0%, transparent 65%), radial-gradient(ellipse 22% 30% at 72% 48%, rgba(0,245,255,0.2) 0%, transparent 44%); z-index: 0; }

.slide-bg-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.sl-content { position: relative; z-index: 5; width: 100%; display: flex; align-items: center; gap: 2rem; }
.sl-left { flex: 1; }
.sl-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.sl-tag { font-size: 0.52rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; padding: 3px 10px; border-radius: 2px; display: inline-block; margin-bottom: 0.6rem; }
.tg  { background: rgba(197,160,89,0.15); color: #c5a059; border: 1px solid rgba(197,160,89,0.4); }
.tgn { background: rgba(80,200,120,0.1);  color: #50c878; border: 1px solid rgba(80,200,120,0.3); }
.ta  { background: rgba(240,180,50,0.1);  color: #f0b432; border: 1px solid rgba(240,180,50,0.3); }
.tp  { background: rgba(160,100,240,0.12); color: #a064f0; border: 1px solid rgba(160,100,240,0.35); }
.tc  { background: rgba(0,229,255,0.1);   color: #00e5ff; border: 1px solid rgba(0,229,255,0.3); }
.sl-h { font-size: 1.6rem; font-weight: 900; line-height: 1.1; margin-bottom: 0.6rem; font-family: 'Space Grotesk', sans-serif; }
.sl-p { font-size: 0.75rem; color: rgba(255,255,255,0.6); line-height: 1.6; max-width: 380px; margin-bottom: 1rem; }
.sl-btn { display: inline-block; padding: 0.5rem 1.2rem; background: linear-gradient(135deg,#c5a059,#e8c87a); color: #0c182d; font-weight: 700; font-size: 0.65rem; letter-spacing: 1px; text-transform: uppercase; border-radius: 3px; border: none; cursor: none !important; }
.sl-stat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-top: 2px solid #c5a059; border-radius: 4px; padding: 0.6rem 1rem; text-align: center; min-width: 90px; }
.sl-num { font-size: 1.3rem; font-weight: 700; color: #c5a059; font-family: 'Space Grotesk', sans-serif; line-height: 1; }
.sl-lbl { font-size: 0.52rem; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.sl-acc { width: 40px; height: 3px; background: linear-gradient(90deg,#c5a059,transparent); margin-bottom: 0.8rem; border-radius: 2px; }
.bb-sdots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10; }
.bb-sdot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.25); border: none; cursor: none !important; padding: 0; transition: all 0.25s; }
.bb-sdot.on { background: #c5a059; transform: scale(1.35); }

/* ── SERVICES ── */
.services { position: relative; z-index: 20; margin-top: -40px; padding: 0 4% 5rem; }
.svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.9rem; max-width: 1020px; margin: 0 auto; }
.svc-card { background: rgba(242,246,249,0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.95); border-radius: 6px; text-align: center; padding: 1.9rem 1.1rem 1.7rem; box-shadow: 0 8px 22px rgba(0,0,0,0.06); transition: transform 0.3s, box-shadow 0.3s; }
.svc-card:hover { transform: translateY(-7px); box-shadow: 0 18px 36px rgba(0,0,0,0.1); }
.svc-icon { display: flex; justify-content: center; margin-bottom: 0.8rem; }
.svc-icon svg { width: 42px; height: 42px; stroke: #c5a059; stroke-width: 1.3; fill: none; }
.svc-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 0.84rem; font-weight: 700; color: #2a3545; text-transform: uppercase; letter-spacing: 0.7px; line-height: 1.35; margin-bottom: 0.5rem; }
.svc-card p { font-size: 0.76rem; color: #6a7888; line-height: 1.6; }

/* ── SECTION TITLE ── */
.sec-title { text-align: center; font-family: 'Space Grotesk', sans-serif; font-size: 2rem; color: #0c182d; margin-bottom: 2.2rem; position: relative; z-index: 10; }
.sec-title::after { content: ''; display: block; width: 50px; height: 3px; background: #c5a059; margin: 10px auto 0; }

/* ── MARKETING ── */
.mktg-section { padding: 5rem 4%; position: relative; z-index: 10; }
.mktg-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 5rem; }
.mktg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.mktg-row.reverse { direction: rtl; }
.mktg-row.reverse > * { direction: ltr; }
.mktg-img img { width: 100%; height: 320px; object-fit: contain; display: block; background: transparent; }
.mktg-text .eyebrow { font-size: 0.72rem; font-weight: 700; color: #c5a059; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 0.8rem; display: block; }
.mktg-text h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.9rem; font-weight: 700; color: #0c182d; line-height: 1.25; margin-bottom: 1.2rem; }
.mktg-text h2 span { color: #c5a059; }
.mktg-text p { font-size: 0.9rem; color: #556; line-height: 1.8; margin-bottom: 1rem; }
.mktg-features { list-style: none; margin: 1.2rem 0 1.8rem; display: flex; flex-direction: column; gap: 0.6rem; }
.mktg-features li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; color: #445; font-weight: 500; }
.mktg-features li::before { content: ''; width: 18px; height: 18px; flex-shrink: 0; background: linear-gradient(135deg,#c5a059,#e8c87a); border-radius: 50%; display: inline-block; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='%230c182d' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 11px; background-repeat: no-repeat; background-position: center; }
.mktg-price { font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem; font-weight: 700; color: #c5a059; margin-bottom: 1.4rem; }
.mktg-price span { font-size: 0.9rem; color: #888; font-weight: 400; }

/* ── VIDEO SECTION ── */
.video-section { padding: 5rem 4%; position: relative; z-index: 10; }
.video-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; max-width: 1200px; margin: 0 auto; }
.iphone-wrap { display: flex; justify-content: center; align-items: center; filter: drop-shadow(0 40px 60px rgba(0,0,0,0.35)) drop-shadow(0 0 40px rgba(197,160,89,0.2)); }
.iphone { position: relative; background: linear-gradient(160deg,#1a1a1a 0%,#2e2e2e 40%,#1a1a1a 100%); border-radius: 56px; padding: 22px 16px; display: inline-block; box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 0 0 3px #0a0a0a, inset 0 0 0 1px rgba(255,255,255,0.07), 0 40px 80px rgba(0,0,0,0.6), 0 0 60px rgba(0,0,0,0.3); }
.iphone::before { content: ''; position: absolute; left: -4px; top: 100px; width: 4px; height: 36px; background: linear-gradient(180deg,#444,#555,#444); border-radius: 3px 0 0 3px; box-shadow: 0 52px 0 #4a4a4a, 0 96px 0 #4a4a4a; }
.iphone::after { content: ''; position: absolute; right: -4px; top: 130px; width: 4px; height: 70px; background: linear-gradient(180deg,#444,#555,#444); border-radius: 0 3px 3px 0; }
.iphone-island { width: 110px; height: 32px; background: #000; border-radius: 20px; margin: 0 auto 12px; position: relative; z-index: 3; }
.iphone-island::after { content: ''; width: 11px; height: 11px; background: #0a0a0a; border-radius: 50%; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); border: 1.5px solid #2a2a2a; }
.iphone-screen { background: #000; border-radius: 44px; overflow: hidden; width: 260px; height: 476px; position: relative; }
.iphone-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.iphone-bar { width: 120px; height: 5px; background: rgba(255,255,255,0.28); border-radius: 3px; margin: 12px auto 0; }
.iphone-glow { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); width: 240px; height: 20px; background: radial-gradient(ellipse, rgba(197,160,89,0.55) 0%, transparent 70%); filter: blur(10px); }
.video-text .eyebrow { font-size: 0.72rem; font-weight: 700; color: #c5a059; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 0.8rem; display: block; }
.video-text h2 { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700; color: #0c182d; line-height: 1.25; margin-bottom: 1.2rem; }
.video-text h2 span { color: #c5a059; }
.video-text p { font-size: 0.9rem; color: #556; line-height: 1.8; margin-bottom: 1rem; }
.video-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.8rem 0 2rem; }
.stat { background: rgba(242,246,249,0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.95); border-top: 3px solid #c5a059; border-radius: 8px; padding: 1rem 1.2rem; }
.stat .num { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700; color: #c5a059; line-height: 1; margin-bottom: 0.3rem; }
.stat .label { font-size: 0.72rem; color: #778; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

/* ── PORTFOLIO ── */
.portfolio { padding: 4rem 4% 6rem; position: relative; z-index: 10; }
.port-track { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; max-width: 1200px; margin: 0 auto; }
.port-item { background: rgba(255,255,255,0.93); border-radius: 12px; border: 1px solid #dce8ee; border-top: 3px solid #c5a059; overflow: hidden; box-shadow: 0 5px 16px rgba(0,0,0,0.05); transition: transform 0.3s, box-shadow 0.3s; }
.port-item:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(0,0,0,0.1); }
.port-info { padding: 1.2rem; }
.port-info h4 { font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; color: #0c182d; margin-bottom: 0.35rem; }
.port-info p  { font-size: 0.78rem; color: #778; }
.prod-media-photo { position: relative; width: 100%; height: 185px; overflow: hidden; }
.prod-media-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-media-video { position: relative; width: 100%; height: 185px; overflow: hidden; background: #000; }
.prod-media-video img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease; z-index: 1; }
.prod-media-video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease; opacity: 0; z-index: 2; }
.port-item.playing .prod-media-video img { opacity: 0; }
.port-item.playing .prod-media-video video { opacity: 1; }
.media-toggle { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; border-radius: 20px; overflow: hidden; border: 1.5px solid rgba(197,160,89,0.8); background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); }
.media-toggle button { background: none; border: none; cursor: none !important; padding: 5px 14px; font-size: 0.62rem; font-weight: 700; color: rgba(255,255,255,0.6); letter-spacing: 0.8px; font-family: 'Montserrat', sans-serif; transition: all 0.2s; }
.media-toggle button.active { background: #c5a059; color: #0c182d; }

/* ── BILLBOARD CAROUSEL ── */
.bb-carousel-wrap { display: flex; align-items: center; justify-content: center; padding: 1rem 32px; }
.bb-carousel { position: relative; width: 100%; max-width: 520px; user-select: none; }
.bb-track-clip { overflow: hidden; width: 100%; border-radius: 4px; }
.bb-track { display: flex; transition: transform 0.45s cubic-bezier(0.4,0,0.2,1); will-change: transform; }
.bb-slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; }
.bb-slide img { width: 100%; height: 360px; object-fit: contain; display: block; background: transparent; }
.bb-arrow { position: absolute; top: 45%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(197,160,89,0.7); background: rgba(255,255,255,0.92); color: #c5a059; cursor: none !important; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s, transform 0.2s; z-index: 10; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.bb-arrow:hover { background: #c5a059; color: #fff; border-color: #c5a059; transform: translateY(-50%) scale(1.08); }
.bb-prev { left: -22px; }
.bb-next { right: -22px; }
.bb-dots { display: flex; justify-content: center; gap: 7px; margin-top: 0.8rem; }
.bb-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(197,160,89,0.3); cursor: none !important; transition: background 0.25s, transform 0.25s; }
.bb-dot.active { background: #c5a059; transform: scale(1.3); }

/* ── FAQ ── */
.faq-section { padding: 5rem 4%; position: relative; z-index: 10; }
.faq-inner { max-width: 860px; margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item { background: rgba(255,255,255,0.93); border: 1px solid #dce8ee; border-left: 4px solid #c5a059; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,0.04); transition: box-shadow 0.3s; }
.faq-item:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.faq-question { width: 100%; background: none; border: none; text-align: left; padding: 1.2rem 1.4rem; display: flex; justify-content: space-between; align-items: center; cursor: none !important; gap: 1rem; }
.faq-question span { font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; font-weight: 700; color: #0c182d; line-height: 1.4; }
.faq-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(197,160,89,0.12); border: 1.5px solid rgba(197,160,89,0.4); display: flex; align-items: center; justify-content: center; transition: background 0.25s, transform 0.35s; }
.faq-icon svg { width: 13px; height: 13px; stroke: #c5a059; stroke-width: 2.5; fill: none; }
.faq-item.open .faq-icon { background: #c5a059; transform: rotate(45deg); }
.faq-item.open .faq-icon svg { stroke: #0c182d; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.3s; padding: 0 1.4rem; }
.faq-item.open .faq-answer { max-height: 300px; padding: 0 1.4rem 1.3rem; }
.faq-answer p { font-size: 0.88rem; color: #556; line-height: 1.8; border-top: 1px solid rgba(197,160,89,0.15); padding-top: 1rem; }

/* ── RESPONSIVE ── */
@media(max-width: 1024px) {
  .mktg-row, .mktg-row.reverse { grid-template-columns: 1fr; direction: ltr; gap: 2rem; }
  .video-inner { grid-template-columns: 1fr; gap: 3rem; }
  .iphone-wrap { margin: 0 auto; }
  .video-text h2 { font-size: 1.6rem; }
  .port-track { grid-template-columns: repeat(2,1fr); }
  .svc-grid { grid-template-columns: repeat(2,1fr); }
}
@media(max-width: 768px) {
  .bb-screen { height: 240px; }
  .sl-right { display: none; }
  .sl-h { font-size: 1.1rem; }
  .sl-p { font-size: 0.7rem; }
  .sl-content { gap: 1rem; }
  .svc-grid { grid-template-columns: 1fr; }
  .port-track { grid-template-columns: 1fr; }
  .bb-prev { left: 4px; }
  .bb-next { right: 4px; }
  .bb-slide img { height: 240px; }
}