/* ── 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}
}

/* ════════════════════════════════════════════════════════
   AI IN A FLASH TEMPLATE v2 — mobile-first
   ════════════════════════════════════════════════════════ */

/* 1 · Scroll wrapper — 14 000 px tall for 8 sections */
.svp-flash-wrapper{position:relative;height:14000px;background:#020410}

/* 2 · Sticky full-viewport */
.svp-flash-sticky{
  position:sticky;top:0;width:100%;height:100vh;
  overflow:hidden;background:#020410;
  display:flex;align-items:center;justify-content:center;
}

/* 3 · Ambient glow orbs */
.svp-flash-glow-1{
  position:absolute;width:160vw;height:160vw;border-radius:50%;
  background:radial-gradient(circle,rgba(0,220,255,.07) 0%,transparent 60%);
  top:-50%;left:-30%;pointer-events:none;z-index:0;
}
.svp-flash-glow-2{
  position:absolute;width:100vw;height:100vw;border-radius:50%;
  background:radial-gradient(circle,rgba(251,191,36,.05) 0%,transparent 60%);
  bottom:-30%;right:-15%;pointer-events:none;z-index:0;
}

/* 4 · Device frame — mobile-first: full-screen */
.svp-flash-device{
  position:relative;width:100%;height:100%;z-index:2;
  display:flex;flex-direction:column;
}

/* 5 · Browser-chrome bar */
.svp-flash-bar{
  position:absolute;top:0;left:0;right:0;height:44px;
  background:rgba(2,4,16,.95);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  display:flex;align-items:center;gap:10px;padding:0 14px;z-index:10;
  border-bottom:1px solid rgba(0,220,255,.18);
}
/* Desktop-only sub-elements hidden on mobile/tablet */
.svp-flash-bar-row1,.svp-flash-bar-row2,.svp-flash-tabs,
.svp-flash-bar-title-desktop,.svp-flash-bar-actions,
.svp-flash-bar-nav,.svp-flash-bar-extras,
.svp-flash-addr-secure{display:none}
.svp-flash-dots-row{display:flex;gap:6px;flex-shrink:0}
.svp-fd{width:12px;height:12px;border-radius:50%;display:inline-block}
.svp-fd-r{background:#ff5f57}.svp-fd-y{background:#ffbd2e}.svp-fd-g{background:#28ca41}
/* On mobile, the addr is shown inside the flat bar (legacy layout) */
.svp-flash-addr{
  flex:1;background:rgba(255,255,255,.05);
  border:1px solid rgba(0,220,255,.16);border-radius:6px;
  height:26px;display:flex;align-items:center;gap:6px;
  padding:0 10px;font-size:.72rem;
  color:rgba(0,220,255,.8);font-family:'Menlo','Monaco',monospace;
  letter-spacing:.03em;overflow:hidden;
}
.svp-flash-bar-menu{color:rgba(0,220,255,.5);font-size:1.1rem;flex-shrink:0}

/* 5b · Viewport div (wraps video + scanlines) */
.svp-flash-device-viewport{
  position:absolute;top:44px;left:0;right:0;bottom:0;
  overflow:hidden;
}

/* 6 · Video fills viewport */
.svp-flash-video{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:1;
}

/* 7 · Scan-line overlay */
.svp-flash-scanlines{
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    to bottom,transparent 0px,transparent 2px,
    rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px
  );pointer-events:none;z-index:3;opacity:.4;
}

/* ─ TABLET ≥640 px: rounded phone frame ─── */
@media(min-width:640px){
  .svp-flash-sticky{background:#010208}
  .svp-flash-device{
    width:min(50vh,320px);height:min(90vh,640px);
    border-radius:32px;overflow:hidden;
    box-shadow:
      0 0 0 1.5px rgba(0,220,255,.38),
      0 0 55px rgba(0,220,255,.18),
      0 0 110px rgba(0,220,255,.08),
      inset 0 0 28px rgba(0,220,255,.04);
  }
}

/* ─ LARGE TABLET ≥900 px: wider frame ───── */
@media(min-width:900px){
  .svp-flash-device{
    width:min(44vh,360px);height:min(90vh,720px);
    border-radius:34px;
  }
}

/* ─ DESKTOP ≥1200 px: browser window frame ─────────────────────────────────
   Replaces the phone silhouette with a full macOS-style desktop browser window.
   The sticky viewport becomes a "desktop" backdrop; the device becomes the window.
   Mobile phone frame breakpoints (640–1199 px) are untouched.
   ─────────────────────────────────────────────────────────────────────────── */
@media(min-width:1200px){

  /* ── Background: dark desktop wallpaper feel ── */
  .svp-flash-sticky{
    background:radial-gradient(ellipse at 50% 40%,#080f28 0%,#020410 70%);
    align-items:center;
    padding:32px 48px;
    box-sizing:border-box;
  }

  /* ── Ambient desk glow (larger on desktop) ── */
  .svp-flash-glow-1{width:80vw;height:80vw;top:-30%;left:-10%}
  .svp-flash-glow-2{width:60vw;height:60vw;bottom:-20%;right:-5%}

  /* ── Browser window container ── */
  .svp-flash-device{
    width:min(92vw,1400px);
    height:min(80vh,860px);
    border-radius:12px;
    overflow:hidden;
    box-shadow:
      0 0 0 1px rgba(0,220,255,.28),
      0 0 0 2px rgba(0,0,0,.6),
      0 30px 90px rgba(0,0,0,.9),
      0 0 120px rgba(0,220,255,.12),
      0 0 240px rgba(0,220,255,.05);
    display:flex;
    flex-direction:column;
    background:#020410;
  }

  /* ── Show desktop-only chrome; hide mobile-only elements ── */
  .svp-flash-bar-row1{display:flex}
  .svp-flash-bar-row2{display:flex}
  .svp-flash-tabs{display:flex}
  .svp-flash-bar-title-desktop{display:block}
  .svp-flash-bar-actions{display:flex}
  .svp-flash-bar-nav{display:flex}
  .svp-flash-bar-extras{display:flex}
  .svp-flash-addr-secure{display:inline-flex}
  /* Hide mobile addr (it's now inside row2) and hamburger */
  /* The addr in row2 is the real one; the top-level bar flex hides its own addr via row1 */
  .svp-flash-bar > .svp-flash-addr,
  .svp-flash-bar > .svp-flash-dots-row,
  .svp-flash-bar-menu{display:none}

  /* ── Desktop title-bar chrome ── */
  .svp-flash-bar{
    position:relative;          /* no longer absolute — part of flex flow */
    top:auto;left:auto;right:auto;
    height:auto;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    gap:0;
    padding:0;
    background:rgba(6,8,26,.97);
    backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
    border-bottom:1px solid rgba(0,220,255,.2);
    z-index:10;
  }

  /* Row 1: traffic lights + window controls */
  .svp-flash-bar-row1{
    display:flex;align-items:center;gap:10px;
    padding:10px 16px 6px;
  }
  .svp-flash-dots-row{display:flex;gap:6px;flex-shrink:0}
  .svp-fd{width:13px;height:13px}

  /* Window title centred in row 1 */
  .svp-flash-bar-title-desktop{
    flex:1;text-align:center;
    font-size:.7rem;font-family:'Menlo','Monaco',monospace;
    color:rgba(255,255,255,.28);letter-spacing:.08em;text-transform:uppercase;
    pointer-events:none;
  }

  /* Window action buttons (minimise / maximise icons) */
  .svp-flash-bar-actions{
    display:flex;align-items:center;gap:14px;
    font-size:.72rem;color:rgba(0,220,255,.35);
    flex-shrink:0;letter-spacing:.04em;
  }

  /* Row 2: full browser address bar + nav icons */
  .svp-flash-bar-row2{
    display:flex;align-items:center;gap:10px;
    padding:0 16px 10px;
  }
  .svp-flash-bar-nav{
    display:flex;gap:6px;flex-shrink:0;
    color:rgba(0,220,255,.4);font-size:1rem;
  }
  .svp-flash-bar-nav span{cursor:pointer;user-select:none;transition:color .2s}
  .svp-flash-bar-nav span:hover{color:rgba(0,220,255,.75)}

  /* Address bar pill */
  .svp-flash-addr{
    flex:1;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(0,220,255,.2);
    border-radius:8px;
    height:30px;
    display:flex;align-items:center;gap:7px;
    padding:0 12px;
    font-size:.74rem;
    color:rgba(0,220,255,.82);
    font-family:'Menlo','Monaco',monospace;
    letter-spacing:.03em;
    overflow:hidden;
  }
  .svp-flash-addr-secure{
    font-size:.65rem;color:rgba(34,197,94,.8);
    flex-shrink:0;
  }

  /* Bookmarks / extra icons to the right */
  .svp-flash-bar-extras{
    display:flex;align-items:center;gap:10px;
    flex-shrink:0;color:rgba(0,220,255,.35);font-size:.9rem;
  }

  /* ── Tabs row below the address bar ── */
  .svp-flash-tabs{
    display:flex;align-items:flex-end;gap:0;
    padding:0 16px;
    border-top:1px solid rgba(0,220,255,.08);
    background:rgba(2,4,16,.6);
    flex-shrink:0;
  }
  .svp-flash-tab{
    padding:6px 18px;font-size:.68rem;
    font-family:'Menlo','Monaco',monospace;
    color:rgba(0,220,255,.4);
    border:1px solid transparent;
    border-bottom:none;
    border-radius:6px 6px 0 0;
    cursor:pointer;white-space:nowrap;
    transition:background .2s,color .2s;
    letter-spacing:.04em;
  }
  .svp-flash-tab-active{
    background:rgba(0,220,255,.08);
    border-color:rgba(0,220,255,.2);
    color:rgba(0,220,255,.85);
  }
  .svp-flash-tab-new{
    font-size:.9rem;line-height:1;
    padding:6px 12px;
    color:rgba(0,220,255,.25);
  }

  /* ── Video & scanlines fill remaining space ── */
  .svp-flash-video{
    position:absolute;top:0;left:0;
    width:100%;height:100%;
    object-fit:cover;z-index:1;
  }
  /* Video wrapper needs relative positioning below the bar */
  .svp-flash-device-viewport{
    position:relative;flex:1;overflow:hidden;
  }

  .svp-flash-scanlines{opacity:.1}

  /* ── Subtle desktop tray at bottom ── */
  .svp-flash-device::after{
    content:'';
    position:absolute;bottom:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,transparent,rgba(0,220,255,.35),transparent);
    z-index:20;pointer-events:none;
  }

  /* ── Overlay cards stay centred over the viewport ── */
  .svp-flash-wrapper .svp-overlay-section{
    /* position is fixed relative to viewport, so no adjustment needed */
  }
}

/* ── OVERLAY SIZING ──────────────────────── */
.svp-flash-wrapper .svp-overlay-section{max-width:500px;width:92%}
.svp-flash-ov{width:100%;max-width:480px;margin:0 auto}
.svp-flash-ov-xl{max-width:480px}

@media(min-width:768px){
  .svp-flash-wrapper .svp-overlay-section{max-width:740px;width:88%}
  .svp-flash-ov-xl{max-width:720px}
}
@media(min-width:1024px){
  .svp-flash-wrapper .svp-overlay-section{max-width:860px;width:82%}
  .svp-flash-ov-xl{max-width:840px}
}
@media(min-width:1400px){
  .svp-flash-wrapper .svp-overlay-section{max-width:960px;width:75%}
  .svp-flash-ov-xl{max-width:940px}
}

/* ── WEB-WINDOW CARD ─────────────────────── */
.svp-flash-win{
  background:rgba(2,4,22,.9);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border:1px solid rgba(0,220,255,.22);
  border-radius:clamp(14px,3vw,20px);
  overflow:hidden;
  box-shadow:
    0 0 60px rgba(0,220,255,.09),
    0 24px 70px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.svp-flash-win-bar{
  background:rgba(0,220,255,.055);
  border-bottom:1px solid rgba(0,220,255,.14);
  padding:9px 14px;display:flex;align-items:center;gap:8px;
}
.svp-flash-win-title{
  flex:1;font-size:.7rem;
  font-family:'Menlo','Monaco',monospace;
  color:rgba(0,220,255,.6);text-align:center;
  letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.svp-flash-win-body{padding:clamp(14px,4vw,26px) clamp(14px,4vw,26px)}
.svp-flash-win-body-hero{padding-top:clamp(10px,2.5vw,18px)}

/* ── HERO IMAGE ──────────────────────────── */
.svp-flash-hero-img-wrap{
  width:100%;overflow:hidden;line-height:0;
  border-bottom:1px solid rgba(0,220,255,.12);
}
.svp-flash-hero-img{
  width:100%;height:clamp(160px,42vw,240px);
  object-fit:cover;object-position:center;display:block;
  transition:transform .6s ease;
}
.svp-flash-win:hover .svp-flash-hero-img{transform:scale(1.02)}

@media(min-width:768px){.svp-flash-hero-img{height:260px}}
@media(min-width:1200px){.svp-flash-hero-img{height:300px}}

/* ── SPLIT LAYOUT ────────────────────────── */
.svp-flash-body-split{display:block}
@media(min-width:640px){
  .svp-flash-body-split{
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(16px,3vw,28px);align-items:start;
  }
  .svp-flash-split-b-stats{display:flex;align-items:center;justify-content:center}
}

/* ── TYPOGRAPHY ──────────────────────────── */
.svp-flash-title{
  background:linear-gradient(135deg,#00dcff 0%,#fbbf24 50%,#a855f7 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;font-weight:900;line-height:1.08;
  margin:0 0 clamp(8px,2vw,14px);
  font-size:clamp(1.9rem,7.5vw,3.2rem);
}
.svp-flash-sub{
  color:rgba(255,255,255,.62);
  font-size:clamp(.82rem,2.5vw,1rem);
  line-height:1.58;margin:0 0 clamp(12px,3vw,20px);
}

/* ── STATS ROW ───────────────────────────── */
.svp-flash-stats-row{
  display:flex;gap:clamp(10px,2.5vw,20px);
  justify-content:center;flex-wrap:wrap;
  margin-top:clamp(12px,2.5vw,18px);
}
@media(min-width:640px){
  .svp-flash-stats-row{
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    margin-top:0;gap:clamp(8px,2vw,16px);
  }
}
.svp-flash-stat-item{text-align:center}
@media(min-width:640px){.svp-flash-stat-item{text-align:left}}
.svp-flash-stat-num{
  font-size:clamp(2rem,7vw,3.5rem);font-weight:900;line-height:1;
  font-family:system-ui,-apple-system,sans-serif;
}
.svp-flash-stat-label{
  font-size:clamp(.68rem,1.8vw,.82rem);color:rgba(255,255,255,.45);
  text-transform:uppercase;letter-spacing:.1em;margin-top:2px;
}
.svp-flash-c-cyan{color:#00dcff}
.svp-flash-c-green{color:#22c55e}
.svp-flash-c-gold{color:#fbbf24}

/* ── DRIVE PILLS (S2) ────────────────────── */
.svp-flash-drive-row{
  display:flex;flex-wrap:wrap;gap:7px;
  justify-content:center;margin-top:clamp(14px,3vw,22px);
}
.svp-flash-dp{
  padding:7px 14px;border-radius:50px;
  font-size:clamp(.67rem,1.8vw,.83rem);
  font-weight:700;letter-spacing:.04em;border:1.5px solid;
}
.svp-flash-dp-cyan   {color:#06b6d4;border-color:rgba(6,182,212,.5);background:rgba(6,182,212,.1)}
.svp-flash-dp-gold   {color:#fbbf24;border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.1)}
.svp-flash-dp-purple {color:#d946ef;border-color:rgba(217,70,239,.5);background:rgba(217,70,239,.1)}
.svp-flash-dp-blue   {color:#60a5fa;border-color:rgba(96,165,250,.5);background:rgba(96,165,250,.1)}
.svp-flash-dp-green  {color:#22c55e;border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.1)}
.svp-flash-dp-violet {color:#a855f7;border-color:rgba(168,85,247,.5);background:rgba(168,85,247,.1)}
.svp-flash-dp-red    {color:#f87171;border-color:rgba(248,113,113,.5);background:rgba(248,113,113,.1)}
.svp-flash-dp-orange {color:#fb923c;border-color:rgba(251,146,60,.5);background:rgba(251,146,60,.1)}
.svp-flash-dp-teal   {color:#2dd4bf;border-color:rgba(45,212,191,.5);background:rgba(45,212,191,.1)}

/* ── SECURITY BADGES (S3) ────────────────── */
.svp-flash-sec-badge{
  display:flex;align-items:flex-start;gap:12px;
  padding:clamp(12px,2.5vw,16px);
  border-radius:clamp(10px,2vw,14px);
  background:rgba(34,197,94,.06);
  border:1px solid rgba(34,197,94,.24);
  margin-bottom:clamp(8px,2vw,12px);
}
.svp-flash-sec-badge-last{margin-bottom:0}
.svp-flash-sec-icon{
  font-size:clamp(1.4rem,3.5vw,1.9rem);
  flex-shrink:0;line-height:1;margin-top:2px;
}
.svp-flash-sec-title{
  font-size:clamp(.78rem,2vw,.96rem);font-weight:800;
  color:#22c55e;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px;
}
.svp-flash-sec-desc{
  font-size:clamp(.66rem,1.7vw,.8rem);color:rgba(255,255,255,.52);line-height:1.45;
}

/* ── ROLE CARDS (S4 + S5) ────────────────── */
.svp-flash-rcards{display:grid;gap:clamp(10px,2.5vw,14px)}
.svp-flash-rcards-3{grid-template-columns:1fr}
.svp-flash-rcards-4{grid-template-columns:1fr 1fr}
@media(min-width:480px){
  .svp-flash-rcards-3{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:640px){
  .svp-flash-rcards-4{grid-template-columns:repeat(4,1fr)}
}

.svp-flash-rcard{
  padding:clamp(14px,3vw,20px) clamp(12px,2.5vw,18px);
  border-radius:clamp(12px,2.5vw,16px);
  border:1.5px solid rgba(255,255,255,.1);
  text-align:center;
  transition:transform .22s,border-color .22s;
}
.svp-flash-rcard:hover{transform:translateY(-5px)}
.svp-flash-rcard-icon{
  font-size:clamp(1.8rem,5vw,2.8rem);
  display:block;margin-bottom:8px;line-height:1;
}
.svp-flash-rcard h4{
  margin:0 0 6px;font-size:clamp(.82rem,2vw,1rem);
  font-weight:800;color:#fff;letter-spacing:.04em;
}
.svp-flash-rcard p{
  margin:0 0 10px;font-size:clamp(.66rem,1.7vw,.78rem);
  color:#94a3b8;line-height:1.45;
}
.svp-flash-rcard-tag{
  display:inline-block;padding:3px 10px;border-radius:50px;
  font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;border:1px solid;
}
/* Role colors */
.svp-flash-rcard-cyan{background:rgba(6,182,212,.1);border-color:rgba(6,182,212,.3)}
.svp-flash-rcard-cyan .svp-flash-rcard-tag{color:#06b6d4;border-color:rgba(6,182,212,.4)}
.svp-flash-rcard-gold{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.28)}
.svp-flash-rcard-gold .svp-flash-rcard-tag{color:#fbbf24;border-color:rgba(251,191,36,.4)}
.svp-flash-rcard-purple{background:rgba(217,70,239,.1);border-color:rgba(217,70,239,.3)}
.svp-flash-rcard-purple .svp-flash-rcard-tag{color:#d946ef;border-color:rgba(217,70,239,.4)}
.svp-flash-rcard-red{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.3)}
.svp-flash-rcard-red .svp-flash-rcard-tag{color:#f87171;border-color:rgba(248,113,113,.4)}
.svp-flash-rcard-orange{background:rgba(251,146,60,.1);border-color:rgba(251,146,60,.3)}
.svp-flash-rcard-orange .svp-flash-rcard-tag{color:#fb923c;border-color:rgba(251,146,60,.4)}
.svp-flash-rcard-teal{background:rgba(45,212,191,.1);border-color:rgba(45,212,191,.3)}
.svp-flash-rcard-teal .svp-flash-rcard-tag{color:#2dd4bf;border-color:rgba(45,212,191,.4)}

/* ── ECOSYSTEM SPLIT (S6) ────────────────── */
.svp-flash-eco-split{align-items:center}
.svp-flash-eco-img-wrap{
  border-radius:clamp(10px,2vw,14px);
  overflow:hidden;line-height:0;
  border:1px solid rgba(0,220,255,.18);
  display:none; /* hidden on mobile */
}
@media(min-width:640px){.svp-flash-eco-img-wrap{display:block}}
.svp-flash-eco-img{width:100%;height:auto;display:block}

/* ── 10-ROLE ICON GRID (S6) ──────────────── */
.svp-flash-grid-5col{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(6px,1.5vw,10px);margin-top:clamp(10px,2.5vw,14px);
}
@media(max-width:360px){.svp-flash-grid-5col{grid-template-columns:repeat(4,1fr)}}
.svp-flash-role{
  display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:clamp(8px,2vw,12px) 4px;
  border-radius:clamp(10px,2vw,14px);
  font-size:clamp(.6rem,1.5vw,.76rem);font-weight:700;
  color:#fff;border:1px solid rgba(255,255,255,.1);
  transition:transform .2s;
}
.svp-flash-role:hover{transform:translateY(-3px)}
.svp-flash-role span:first-child{font-size:clamp(1rem,2.8vw,1.4rem)}
.svp-flash-role-cyan   {background:rgba(6,182,212,.16);border-color:rgba(6,182,212,.35)}
.svp-flash-role-gold   {background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.32)}
.svp-flash-role-purple {background:rgba(168,85,247,.16);border-color:rgba(168,85,247,.35)}
.svp-flash-role-blue   {background:rgba(59,130,246,.16);border-color:rgba(59,130,246,.35)}
.svp-flash-role-green  {background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.32)}
.svp-flash-role-violet {background:rgba(139,92,246,.16);border-color:rgba(139,92,246,.35)}
.svp-flash-role-red    {background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.35)}
.svp-flash-role-orange {background:rgba(249,115,22,.16);border-color:rgba(249,115,22,.35)}
.svp-flash-role-teal   {background:rgba(20,184,166,.16);border-color:rgba(20,184,166,.35)}

/* ── FEATURE GRID (S7) ───────────────────── */
.svp-flash-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(8px,2vw,12px);text-align:left;
  margin-top:clamp(12px,2.5vw,18px);pointer-events:auto;
}
.svp-flash-grid-3{grid-template-columns:1fr 1fr} /* 2-col mobile */
@media(min-width:640px){.svp-flash-grid-3{grid-template-columns:repeat(3,1fr)}}
@media(max-width:340px){.svp-flash-grid,.svp-flash-grid-3{grid-template-columns:1fr}}

.svp-flash-item{
  background:rgba(0,220,255,.04);
  border:1px solid rgba(0,220,255,.12);
  border-radius:clamp(10px,2vw,14px);
  padding:clamp(10px,2.5vw,16px);
  transition:border-color .3s,background .3s;
}
.svp-flash-item:hover{
  background:rgba(0,220,255,.08);
  border-color:rgba(0,220,255,.26);
}
.svp-flash-item-icon{font-size:clamp(1.2rem,3vw,1.6rem);display:block;margin-bottom:6px}
.svp-flash-item h4{
  margin:0 0 4px;font-size:clamp(.72rem,1.9vw,.88rem);
  color:#e2e8f0;font-weight:700;
}
.svp-flash-item p{
  margin:0;font-size:clamp(.64rem,1.6vw,.76rem);
  color:#94a3b8;line-height:1.45;
}

/* ── TAG PILLS ───────────────────────────── */
.svp-flash-tags{
  display:flex;flex-wrap:wrap;gap:7px;
  justify-content:center;
  margin-top:clamp(10px,2.5vw,16px);
}
.svp-flash-tag{
  padding:6px 13px;border-radius:50px;
  font-size:clamp(.64rem,1.7vw,.8rem);font-weight:600;
  letter-spacing:.03em;border:1px solid;
}
.svp-flash-tag-cyan  {color:#00dcff;border-color:rgba(0,220,255,.4);background:rgba(0,220,255,.08)}
.svp-flash-tag-gold  {color:#fbbf24;border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.08)}
.svp-flash-tag-green {color:#22c55e;border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.08)}
.svp-flash-tag-purple{color:#a855f7;border-color:rgba(168,85,247,.4);background:rgba(168,85,247,.08)}

/* ── DIVIDER ─────────────────────────────── */
.svp-flash-hr{
  border:none;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,220,255,.25),transparent);
  margin:clamp(12px,3vw,20px) 0;
}

/* ── CTA WINDOW ──────────────────────────── */
.svp-flash-cta-body{padding:clamp(24px,5vw,48px);text-align:center}
.svp-flash-cta-bolt{
  font-size:clamp(3rem,10vw,5.5rem);line-height:1;margin-bottom:10px;
  filter:drop-shadow(0 0 24px rgba(0,220,255,.85));
}
.svp-flash-cta-foot{
  margin-top:clamp(12px,2.5vw,18px);
  font-size:clamp(.7rem,1.8vw,.84rem);
  color:rgba(255,255,255,.35);
}

/* ── CTA BUTTON ──────────────────────────── */
@keyframes svp-flash-shine{0%{left:-100%}60%,100%{left:150%}}
.svp-flash-cta{
  display:inline-block;
  padding:clamp(14px,3.5vw,18px) clamp(28px,6vw,52px);
  border-radius:50px;
  font-size:clamp(.8rem,2.2vw,1.05rem);
  font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  text-decoration:none;color:#000;
  background:linear-gradient(135deg,#00dcff,#00b4d8);
  box-shadow:0 8px 36px rgba(0,220,255,.45);
  pointer-events:auto;
  transition:transform .25s,box-shadow .25s;
  position:relative;overflow:hidden;
}
.svp-flash-cta::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  animation:svp-flash-shine 2.5s ease-in-out infinite;
}
.svp-flash-cta:hover{
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 16px 55px rgba(0,220,255,.7);color:#000;
}

/* ── h1/img CHILD-ACTIVE (needed for flash template) ─── */
.svp-overlay-section h1{
  opacity:0;transform:translateY(20px);
  transition:all .6s cubic-bezier(.16,1,.3,1);
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.svp-overlay-section.active h1.svp-child-active{opacity:1;transform:translateY(0)}
.svp-overlay-section img{
  opacity:0;transition:opacity .7s ease;
}
.svp-overlay-section.active img.svp-child-active{opacity:1}