/* ── BASE SCROLL VIDEO ───────────────────────────────── */
.svp-container{position:relative;width:100%;background:#000}
.svp-video-wrapper{position:sticky;top:0;left:0;width:100%;height:100vh;overflow:hidden;z-index:1}
.svp-video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover}
.svp-content-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none}
.svp-overlay-section{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:90%;max-width:860px;
  text-align:center;color:#fff;opacity:0;
  transition:all 0.75s cubic-bezier(0.16,1,0.3,1);
  pointer-events:none;
  font-family:'Helvetica Neue',Arial,sans-serif;
}
.svp-overlay-section.active{pointer-events:auto;opacity:1;transform:translate(-50%,-50%)}

/* Animations */
.svp-anim-slide-up{transform:translate(-50%,-30%)}
.svp-overlay-section.active.svp-anim-slide-up{transform:translate(-50%,-50%)}
.svp-anim-zoom-in{transform:translate(-50%,-50%) scale(0.82)}
.svp-overlay-section.active.svp-anim-zoom-in{transform:translate(-50%,-50%) scale(1)}

.svp-overlay-section h2,.svp-overlay-section p,.svp-overlay-section div,.svp-overlay-section a{
  opacity:0;transform:translateY(20px);
  transition:all 0.6s cubic-bezier(0.16,1,0.3,1);
  text-shadow:0 2px 12px rgba(0,0,0,0.6);
}
.svp-overlay-section.active h2.svp-child-active,
.svp-overlay-section.active p.svp-child-active,
.svp-overlay-section.active div.svp-child-active,
.svp-overlay-section.active a.svp-child-active{opacity:1;transform:translateY(0)}
.svp-overlay-section h2{font-size:clamp(2rem,6vw,4rem);margin-bottom:1rem}
.svp-overlay-section p{font-size:clamp(1rem,2.5vw,1.5rem)}

/* ── AI BRAND GPT TEMPLATE ───────────────────────────── */
.svp-aibgpt-scroll-wrapper{position:relative;height:10000px;background:#000}

/* Sticky viewport */
.svp-aibgpt-wave-bg{
  position:sticky;top:0;width:100%;height:100vh;
  z-index:1;background:#000;overflow:hidden;
}

/* Video fill — covers full viewport on ALL screen sizes */
.svp-aibgpt-wave-ratio{
  position:absolute;
  top:50%;left:50%;
  width:177.78vh; /* always wider than screen at 16:9 */
  height:100vh;
  min-width:100%;
  min-height:56.25vw; /* taller than screen on portrait mobile */
  transform:translate(-50%,-50%);
}
.svp-aibgpt-wave-ratio iframe{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  border:0;display:block;
}

/* Native video element */
.svp-aibgpt-video{
  position:absolute;
  top:50%;left:50%;
  width:177.78vh;
  height:100vh;
  min-width:100%;
  min-height:56.25vw;
  transform:translate(-50%,-50%);
  object-fit:cover;
  pointer-events:none;
}

/* Overlay layer */
.svp-aibgpt-content{
  position:absolute;top:0;left:0;width:100%;height:100%;
  z-index:10;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}

/* ── LOGO ────────────────────────────────────────────── */
@keyframes svp-logo-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes svp-logo-halo-pulse{
  from{transform:rotate(0deg) scale(1)}
  to{transform:rotate(360deg) scale(1.08)}
}
.svp-logo-spin{
  animation:svp-logo-spin 8s linear infinite;
  width:clamp(70px,15vw,120px);height:clamp(70px,15vw,120px);
  border-radius:50%;object-fit:contain;
  filter:drop-shadow(0 0 24px rgba(120,80,255,0.9)) drop-shadow(0 0 50px rgba(0,200,255,0.6));
}
.svp-logo-halo{display:inline-block;animation:svp-logo-halo-pulse 4s ease-in-out infinite alternate}

/* ── FEATURE CARD ────────────────────────────────────── */
.svp-feat-card{
  background:rgba(8,8,28,0.78);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(120,80,255,0.32);
  border-radius:clamp(18px,4vw,28px);
  padding:clamp(22px,5vw,48px) clamp(18px,5vw,56px);
  display:inline-block;
  width:90%;max-width:820px;
  box-shadow:0 0 80px rgba(120,80,255,0.12),inset 0 1px 0 rgba(255,255,255,0.07);
  position:relative;
}
.svp-feat-card::before{
  content:'';position:absolute;top:-1px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.55),transparent);
}

/* ── GRADIENT TEXT ───────────────────────────────────── */
.svp-g-text{
  background:linear-gradient(120deg,#a78bfa,#38bdf8,#f472b6,#facc15);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ── FEATURE GRID ────────────────────────────────────── */
.svp-feat-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(10px,2vw,18px);
  text-align:left;margin-top:clamp(16px,3vw,28px);
  pointer-events:auto;
}
@media(max-width:540px){
  .svp-feat-grid{grid-template-columns:1fr}
  .svp-feat-card{padding:20px 16px;width:95%}
}
.svp-feat-item{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:clamp(12px,3vw,18px);
  padding:clamp(12px,3vw,22px) clamp(14px,3vw,24px);
  transition:border-color .3s,background .3s;
}
.svp-feat-item .svp-icon{font-size:clamp(1.3rem,4vw,2rem);margin-bottom:7px;display:block}
.svp-feat-item h4{margin:0 0 5px;font-size:clamp(0.82rem,2vw,1rem);color:#e2e8f0;font-weight:600}
.svp-feat-item p{margin:0;font-size:clamp(0.72rem,1.8vw,0.87rem);color:#94a3b8;line-height:1.55}

/* ── CTA BUTTON ──────────────────────────────────────── */
@keyframes svp-btn-shine{0%{left:-100%}60%,100%{left:150%}}
.svp-cta-btn{
  display:inline-block;
  padding:clamp(14px,3vw,20px) clamp(28px,5vw,56px);
  border-radius:50px;
  font-size:clamp(0.78rem,2vw,1.15rem);
  font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  text-decoration:none;color:#fff;
  background:linear-gradient(135deg,#7c3aed,#0ea5e9,#ec4899);
  box-shadow:0 8px 40px rgba(120,80,255,0.5);
  pointer-events:auto;
  transition:transform .25s,box-shadow .25s;
  position:relative;overflow:hidden;
}
.svp-cta-btn::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);
  animation:svp-btn-shine 2.5s ease-in-out infinite;
}
.svp-cta-btn:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 16px 60px rgba(120,80,255,0.75)}

/* ── MOBILE HEADING SIZES ────────────────────────────── */
@media(max-width:480px){
  .svp-feat-card .svp-g-text[style*="clamp"]{font-size:clamp(1.4rem,6vw,2rem)!important}
  .svp-cta-btn{padding:14px 28px;font-size:0.8rem}
}