/* ── Hero split background ── */
    .vd-hero {
      position: relative;
      overflow: hidden;
      /* Hard 50/50 split: black left, deep crimson right */
      background: linear-gradient(to right, #07090f 50%, #280909 50%);
    }
    /* Crimson moon — behind logo, radial-masked to center-right */
    .vd-hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('assets/images/login_bg.png');
      background-size: 55%;
      background-position: 75% 50%;
      background-repeat: no-repeat;
      opacity: .20;
      filter: saturate(0.55) brightness(0.65);
      -webkit-mask-image: radial-gradient(ellipse 44% 65% at 75% 50%, black 20%, transparent 72%);
      mask-image: radial-gradient(ellipse 44% 65% at 75% 50%, black 20%, transparent 72%);
      pointer-events: none;
      z-index: 1;
    }
    /* Soft blend at the split edge */
    .vd-hero-edge {
      position: absolute;
      left: calc(50% - 60px);
      top: 0; bottom: 0;
      width: 120px;
      background: linear-gradient(to right,
        #07090f 0%,
        rgba(7,9,15,.4) 40%,
        rgba(40,9,9,.4) 60%,
        #280909 100%
      );
      pointer-events: none;
      z-index: 2;
    }
    /* Bottom fade into page */
    .vd-hero-fade {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 110px;
      background: linear-gradient(to top, #07090f, transparent);
      pointer-events: none;
      z-index: 2;
    }
    .vd-hero > .container { position: relative; z-index: 3; }

    /* ── Hero logo breathing animation ── */
    .vd-hero-logo-main {
      width: clamp(200px, 28vw, 360px);
      filter: drop-shadow(0 0 40px rgba(255,74,61,.55));
      animation: vdBreathe 3.2s ease-in-out infinite;
    }
    @keyframes vdBreathe {
      0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 32px rgba(255,74,61,.45));
      }
      50% {
        transform: scale(1.045);
        filter: drop-shadow(0 0 60px rgba(255,74,61,.75));
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .vd-hero-logo-main { animation: none; }
    }

    /* ── Hero wordmark under logo ── */
    .vd-hero-wordmark {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(22px, 3vw, 36px);
      font-weight: 900;
      letter-spacing: -1px;
      opacity: .9;
    }

    /* ── Tracks with images ── */
    .vd-track-pill img {
      width: 20px;
      height: 20px;
      object-fit: cover;
      border-radius: 4px;
      flex-shrink: 0;
    }

    /* ── Roadmap card with image ── */
    .vd-roadmap-card {
      position: relative;
      overflow: hidden;
    }
    .vd-rm-img {
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: 40%;
      object-fit: cover;
      opacity: .18;
      mask-image: linear-gradient(to left, rgba(0,0,0,.7) 0%, transparent 100%);
      -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.7) 0%, transparent 100%);
    }
    .vd-roadmap-card > *:not(.vd-rm-img) {
      position: relative;
      z-index: 1;
    }

    /* ── Rank badges grid ── */
    .vd-rank-badges {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
      gap: 14px;
    }
    .vd-rank-badge-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 14px 8px;
      border-radius: 12px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      cursor: default;
      transition: border-color .18s, transform .18s, box-shadow .18s;
    }
    .vd-rank-badge-item:hover {
      border-color: rgba(255,74,61,.35);
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0,0,0,.4);
    }
    .vd-rank-badge-item.vd-rbadge-done { border-color: rgba(34,197,94,.22); }
    .vd-rank-badge-item.vd-rbadge-active {
      border-color: rgba(255,74,61,.5);
      background: rgba(255,74,61,.07);
      box-shadow: 0 0 18px rgba(255,74,61,.18);
    }
    .vd-rank-badge-item.vd-rbadge-gold {
      border-color: rgba(255,215,0,.35);
      background: rgba(255,215,0,.05);
    }
    .vd-rank-badge-item img {
      width: 44px;
      height: 44px;
      object-fit: contain;
      filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
    }
    .vd-rank-badge-name {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .4px;
      text-align: center;
      color: var(--muted);
      text-transform: uppercase;
      line-height: 1.2;
    }
    .vd-rbadge-done   .vd-rank-badge-name { color: var(--green); }
    .vd-rbadge-active .vd-rank-badge-name { color: var(--red); }
    .vd-rbadge-gold   .vd-rank-badge-name { color: var(--gold); }

    /* ── Disciplines strip ── */
    .vd-disc-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 12px;
      margin-top: 40px;
    }
    .vd-disc-card {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      transition: border-color .18s, transform .18s;
    }
    .vd-disc-card:hover {
      border-color: rgba(255,74,61,.35);
      transform: translateY(-3px);
    }
    .vd-disc-card-img {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      opacity: .75;
    }
    .vd-disc-card-label {
      padding: 8px 10px;
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: .3px;
    }

    /* ── Dashboard hero image strip ── */
    .vd-img-strip {
      position: relative;
      height: clamp(260px, 35vw, 420px);
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid var(--border);
    }
    .vd-img-strip img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .55;
    }
    .vd-img-strip-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(7,9,15,.9) 0%, rgba(255,74,61,.08) 60%, transparent 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 28px;
    }
    .vd-img-strip-overlay h3 {
      font-size: clamp(20px, 3vw, 28px);
      font-weight: 900;
      letter-spacing: -1px;
      margin-bottom: 6px;
    }
    .vd-img-strip-overlay p {
      font-size: 13px;
      color: var(--muted);
      max-width: 400px;
      margin: 0;
    }

/* FAQ */
.vd-faq-item{border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1rem 1.25rem;margin-bottom:.75rem;background:rgba(255,255,255,.02)}
.vd-faq-item summary{cursor:pointer;font-weight:700}
.vd-faq-item p{margin:.75rem 0 0;color:var(--muted)}
a.vd-feature-card:hover{border-color:rgba(255,74,61,.5)}
.vd-nav-link.active{color:#ff4a3d}

/* ══════════ v3 redesign: navbar ══════════ */
.vd-nav-wrap { position: sticky; top: 0; z-index: 1040; padding: 12px 0 0; pointer-events: none; }
.vd-nav-wrap .vd-nav { pointer-events: auto; }
.vd-nav { position: relative; max-width: 1180px; margin: 0 auto; padding: 8px 10px;
  background: rgba(14,16,24,.72); border: 1px solid rgba(255,255,255,.09); border-radius: 18px;
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); transition: box-shadow .3s, background .3s; }
.vd-nav::before { content:""; position:absolute; inset:-1px; border-radius:18px; padding:1px; pointer-events:none;
  background: linear-gradient(110deg, rgba(255,74,61,.55), transparent 35%, transparent 65%, rgba(255,74,61,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.7; }
.vd-nav.vd-nav-scrolled { background: rgba(9,10,16,.9); box-shadow: 0 14px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,74,61,.08); }
.vd-nav-inner { padding-left: 8px; padding-right: 8px; }
.vd-nav-logo { border-radius: 10px; box-shadow: 0 0 18px rgba(255,74,61,.45); }
.vd-brand { font-size: 21px; }
.vd-nav-link { position: relative; font-size: 13.5px; padding: 8px 14px !important; }
.vd-nav-link::after { content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; border-radius:2px; background:var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.vd-nav-link:hover::after, .vd-nav-link.active::after, .vd-mega.show > .vd-nav-link::after { transform: scaleX(1); }
.vd-nav-link.active { color: var(--white) !important; }
.vd-nav-cta { background: linear-gradient(135deg,#ff6a4d,#ff2d3d); box-shadow: 0 4px 18px rgba(255,74,61,.4); padding: 10px 20px; border-radius: 12px; white-space: nowrap; }
.vd-nav-cta:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(255,74,61,.6); }
.vd-nav .dropdown-toggle::after { border-width: .28em .28em 0; margin-left: .45em; vertical-align: .15em; }
/* mega menu */
.vd-mega-menu { background: rgba(12,13,20,.97); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 16px;
  min-width: 440px; box-shadow: 0 24px 60px rgba(0,0,0,.6); margin-top: 10px; }
@media (min-width: 992px) { .vd-mega-menu { left: 50%; transform: translateX(-50%); } .vd-mega-menu::before { content:""; position:absolute; inset:-14px 0 100% 0; } }
.vd-mega-title { font: 700 10px 'JetBrains Mono', monospace; letter-spacing: 2px; text-transform: uppercase; color: var(--red); margin: 0 0 12px; }
.vd-mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vd-mega-tile { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px; border-radius:12px; text-decoration:none;
  color: var(--muted); font-size: 11px; font-weight: 600; text-align:center; border:1px solid transparent; transition: .2s; }
.vd-mega-tile img { object-fit: contain; transition: transform .25s; }
.vd-mega-tile:hover { background: var(--red-dim); border-color: rgba(255,74,61,.3); color:#fff; }
.vd-mega-tile:hover img { transform: translateY(-3px) scale(1.08); }
.vd-mega-all { display:block; margin-top:12px; text-align:center; font-size:12px; font-weight:700; color:var(--red); text-decoration:none; }
/* burger */
.vd-toggler { border: 1px solid var(--border) !important; border-radius: 12px; padding: 10px 11px !important; background: rgba(255,255,255,.03); }
.vd-toggler:focus { box-shadow: 0 0 0 3px var(--red-dim); }
.vd-burger { display:flex; flex-direction:column; gap:4px; width:20px; }
.vd-burger i { display:block; height:2px; border-radius:2px; background:#fff; transition: transform .25s, opacity .2s; }
.vd-toggler[aria-expanded="true"] .vd-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.vd-toggler[aria-expanded="true"] .vd-burger i:nth-child(2) { opacity: 0; }
.vd-toggler[aria-expanded="true"] .vd-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 991.98px) {
  .vd-nav-wrap { padding: 8px 10px 0; }
  .vd-nav { border-radius: 16px; }
  .vd-nav .navbar-collapse { padding: 12px 6px 6px; }
  .vd-nav-link { font-size: 16px; padding: 12px 10px !important; }
  .vd-nav-link::after { display: none; }
  .vd-nav-link.active { background: var(--red-dim); }
  .vd-mega-menu { min-width: 0; margin: 4px 0 8px; box-shadow: none; position: static !important; transform: none; }
  .vd-mega-grid { grid-template-columns: repeat(3, 1fr); }
  .vd-nav-cta { display: block; text-align: center; margin-top: 10px; padding: 14px; }
}

/* ══════════ v3 redesign: home ══════════ */
.vd-hero2 { position: relative; overflow: hidden; padding: 72px 0 90px; margin-top: -76px; padding-top: 150px; isolation: isolate; }
.vd-hero2-bg, .vd-hero2-bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 70% 40%; z-index:-2; }
.vd-hero2-shade { position:absolute; inset:0; z-index:-1;
  background: linear-gradient(90deg, rgba(7,9,15,.96) 0%, rgba(7,9,15,.82) 45%, rgba(7,9,15,.35) 100%), linear-gradient(to top, var(--bg) 0%, transparent 35%); }
.vd-h1 { font-size: clamp(36px, 6vw, 68px); font-weight: 900; letter-spacing: -2px; line-height: 1.02; margin-bottom: 22px; }
.vd-h1 em { font-style: normal; }
.vd-grad { background: linear-gradient(100deg,#ff7a45,#ff2d3d 60%,#ff4a8a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vd-lead { font-size: clamp(15px, 1.6vw, 18px); color: rgba(255,255,255,.7); line-height: 1.7; max-width: 520px; margin-bottom: 28px; }
.vd-btn-lg { padding: 15px 28px; font-size: 14px; border-radius: 12px; }
.vd-hero2 .vd-btn-red { background: linear-gradient(135deg,#ff6a4d,#ff2d3d); box-shadow: 0 8px 28px rgba(255,74,61,.4); }
.vd-stats { display:flex; flex-wrap:wrap; gap: 14px 34px; margin:0; justify-content:center; }
@media (min-width:992px){ .vd-stats { justify-content:flex-start; } }
.vd-stats dt { font-size: 28px; font-weight: 900; line-height: 1; letter-spacing: -1px; }
.vd-stats dd { margin: 4px 0 0; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.vd-device { position: relative; padding: 10px; border-radius: 22px; background: linear-gradient(145deg, rgba(255,74,61,.5), rgba(255,255,255,.06) 40%, rgba(255,74,61,.2));
  box-shadow: 0 30px 80px rgba(0,0,0,.65), 0 0 80px rgba(255,74,61,.25); transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transition: transform .5s; }
.vd-device:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.vd-device-img { display:block; width:100%; height:auto; border-radius: 14px; }
.vd-float { position:absolute; filter: drop-shadow(0 10px 22px rgba(255,74,61,.55)); animation: vdFloat 5s ease-in-out infinite; }
.vd-float-1 { width: 20%; top: -9%; right: -4%; } .vd-float-2 { width: 17%; bottom: -8%; left: -4%; animation-delay: -1.6s; } .vd-float-3 { width: 15%; bottom: 14%; right: -5%; animation-delay: -3s; }
@keyframes vdFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }

.vd-marquee { overflow: hidden; border-block: 1px solid var(--border); background: var(--surface); padding: 20px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.vd-marquee-track { display:flex; gap: 38px; width: max-content; animation: vdScroll 60s linear infinite; }
.vd-marquee-track img { height: 80px; width: auto; flex: none; filter: drop-shadow(0 4px 14px rgba(255,74,61,.25)); }
@keyframes vdScroll { to { transform: translateX(-50%); } }

.vd-show { display: grid; gap: clamp(48px, 8vw, 96px); }
.vd-show-row { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 992px) { .vd-show-row { grid-template-columns: 5fr 7fr; gap: 56px; } .vd-show-row.vd-rev { grid-template-columns: 7fr 5fr; } .vd-show-row.vd-rev .vd-show-copy { order: 2; } }
.vd-show-copy h3 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.8px; line-height: 1.12; margin-bottom: 14px; }
.vd-show-copy p { color: var(--muted); line-height: 1.75; font-size: 15px; }
.vd-show-fig { margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,74,61,.25); box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 60px rgba(255,74,61,.12); position: relative; }
.vd-show-fig img { display:block; width:100%; height:auto; transition: transform .8s; }
.vd-show-fig:hover img { transform: scale(1.04); }
.vd-link { color: var(--red); font-weight: 700; font-size: 14px; text-decoration: none; }
.vd-link:hover { text-decoration: underline; }
.vd-ach { display:flex; gap: 14px; align-items:center; margin-top: 18px; }
.vd-ach img { filter: drop-shadow(0 6px 16px rgba(255,215,0,.35)); }

.vd-tiles { display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width:576px){ .vd-tiles { grid-template-columns: repeat(3,1fr); } } @media (min-width:768px){ .vd-tiles { grid-template-columns: repeat(4,1fr); } } @media (min-width:1100px){ .vd-tiles { grid-template-columns: repeat(5,1fr); } }
.vd-tile { display:flex; flex-direction:column; align-items:center; gap: 10px; padding: 20px 10px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border);
  text-decoration:none; color: #fff; font-size: 13px; font-weight: 700; text-align:center; transition: .25s; }
.vd-tile img { height: 80px; width: auto; max-width: 100%; object-fit: contain; transition: transform .3s; }
.vd-tile:hover { transform: translateY(-5px); border-color: rgba(255,74,61,.5); background: linear-gradient(180deg, rgba(255,74,61,.12), var(--surface-2)); box-shadow: 0 14px 34px rgba(255,74,61,.15); }
.vd-tile:hover img { transform: scale(1.1) rotate(-3deg); }

.vd-ranks-band { position: relative; padding: 100px 0; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(255,74,61,.28), transparent 70%), linear-gradient(#07090f, #1a0606); }
.vd-rank-fan { display:flex; justify-content:center; align-items:flex-end; gap: clamp(2px, 1.5vw, 18px); flex-wrap: nowrap; }
.vd-rank-fan img { width: clamp(44px, 9vw, 108px); height:auto; filter: drop-shadow(0 10px 22px rgba(0,0,0,.6)); transition: transform .3s; }
.vd-rank-fan img:nth-child(odd) { margin-bottom: 18px; }
.vd-rank-fan img:hover { transform: translateY(-10px) scale(1.08); }
.vd-rank-fan .vd-fan-hero { width: clamp(70px, 14vw, 148px); margin-bottom: 0; filter: drop-shadow(0 0 34px rgba(255,215,0,.55)); }

.vd-plan { display:block; height:100%; padding: 28px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); text-decoration:none; color:#fff; text-align:center; transition:.25s; }
.vd-plan span { font: 700 11px 'JetBrains Mono', monospace; letter-spacing:2px; text-transform:uppercase; color: var(--muted); }
.vd-plan strong { display:block; font-size: 40px; font-weight: 900; letter-spacing:-1.5px; margin: 8px 0; } .vd-plan small { font-size: 14px; color: var(--muted); font-weight: 600; }
.vd-plan p { margin:0; color: var(--muted); font-size: 14px; }
.vd-plan:hover { transform: translateY(-4px); border-color: rgba(255,74,61,.5); }
.vd-plan-hot { border-color: rgba(255,74,61,.6); background: linear-gradient(180deg, rgba(255,74,61,.16), var(--surface)); box-shadow: 0 0 50px rgba(255,74,61,.18); }
.vd-plan-hot span { color: var(--red); }

.vd-cta-icon { border-radius: 28px; box-shadow: 0 0 60px rgba(255,74,61,.55); animation: vdBreathe 3.2s ease-in-out infinite; }

/* sub-page banners */
.vd-banner { margin: 40px auto 0; padding: 0 12px; max-width: 1080px; }
.vd-banner img { width: 100%; height: auto; border-radius: 20px; border: 1px solid rgba(255,74,61,.25); box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 60px rgba(255,74,61,.14); }
.vd-banner-icons { display:flex; justify-content:center; align-items:center; gap: 22px; }
.vd-banner-icons img { width: auto; height: 88px; border: 0; box-shadow: none; filter: drop-shadow(0 8px 20px rgba(255,74,61,.5)); border-radius: 18px; }

@media (max-width: 575.98px) {
  .vd-hero2 { padding-top: 120px; padding-bottom: 60px; }
  .vd-device { transform: none; } .vd-float-1,.vd-float-3 { right: -2%; } .vd-float-2 { left: -2%; }
  .vd-section { padding: 64px 0; }
}
@media (prefers-reduced-motion: reduce) { .vd-marquee-track, .vd-float, .vd-cta-icon { animation: none; } html { scroll-behavior: auto; } }

/* breadcrumbs */
.breadcrumb-item a { color: var(--red); text-decoration: none; font-weight: 600; }
.breadcrumb-item.active { color: var(--muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--muted-2); }

/* app intro + strip */
.vd-app-points { list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:576px){ .vd-app-points { grid-template-columns:1fr 1fr; } }
.vd-app-points li { display:flex; gap:14px; align-items:center; padding:16px; border-radius:16px; background:var(--surface-2); border:1px solid var(--border); transition:.25s; }
.vd-app-points li:hover { border-color:rgba(255,74,61,.45); transform:translateY(-3px); }
.vd-app-points img { flex:none; width:52px; height:auto; filter:drop-shadow(0 6px 14px rgba(255,74,61,.4)); }
.vd-app-points strong { display:block; font-size:14px; margin-bottom:3px; } .vd-app-points span { font-size:12.5px; color:var(--muted); line-height:1.55; }
.vd-appstrip { padding:28px 0; background:linear-gradient(90deg,rgba(255,74,61,.16),rgba(255,74,61,.05)); border-block:1px solid rgba(255,74,61,.25); }
.vd-appstrip img { border-radius:14px; filter:drop-shadow(0 0 18px rgba(255,74,61,.5)); }
.vd-appstrip strong { display:block; font-size:17px; font-weight:800; } .vd-appstrip span { font-size:13px; color:var(--muted); }

/* slogan + social */
.vd-slogan { font: 700 12px 'JetBrains Mono', monospace; letter-spacing: 2.5px; text-transform: uppercase; color: var(--red); margin: -6px 0 16px; }
.vd-social { display:flex; justify-content:center; gap:12px; margin-bottom:22px; }
.vd-social a { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:var(--muted); background:var(--surface-2); border:1px solid var(--border); transition:.2s; }
.vd-social a:hover { color:#fff; background:var(--red); border-color:var(--red); transform:translateY(-3px); box-shadow:0 8px 20px rgba(255,74,61,.4); }

/* intro video */
.vd-video { max-width: 900px; margin: 0 auto; aspect-ratio: 16/9; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,74,61,.35);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 70px rgba(255,74,61,.2); background:#000; }
.vd-video iframe, .vd-video-btn { width:100%; height:100%; border:0; display:block; }
.vd-video-btn { position:relative; padding:0; background:#000; cursor:pointer; color:#fff; }
.vd-video-btn img { width:100%; height:100%; object-fit:cover; opacity:.8; transition: transform .6s, opacity .3s; }
.vd-video-btn:hover img { transform: scale(1.04); opacity:1; }
.vd-play { position:absolute; inset:0; margin:auto; width:84px; height:84px; border-radius:50%; display:grid; place-items:center;
  background: linear-gradient(135deg,#ff6a4d,#ff2d3d); box-shadow:0 0 0 10px rgba(255,74,61,.25), 0 12px 40px rgba(255,74,61,.6); animation: vdPulseRing 2.4s infinite; }
.vd-play svg { margin-left:4px; }
.vd-video-cap { position:absolute; left:16px; bottom:14px; font:700 11px 'JetBrains Mono',monospace; letter-spacing:1.5px; text-transform:uppercase; padding:6px 12px; border-radius:100px; background:rgba(0,0,0,.6); }
@keyframes vdPulseRing { 0%,100% { box-shadow:0 0 0 8px rgba(255,74,61,.25), 0 12px 40px rgba(255,74,61,.6);} 50% { box-shadow:0 0 0 18px rgba(255,74,61,.05), 0 12px 40px rgba(255,74,61,.6);} }
@media (prefers-reduced-motion: reduce) { .vd-play { animation:none; } }

/* CTA logo: transparent logo, no frame */
.vd-cta-icon { border-radius: 0; box-shadow: none; width: 120px; height: auto; filter: drop-shadow(0 0 32px rgba(255,74,61,.55)); }

/* wide images with overlay text */
.vd-show { display:grid; gap: clamp(24px, 4vw, 40px); }
.vd-wide { position:relative; margin:0; overflow:hidden; border-radius:22px; border:1px solid rgba(255,74,61,.28); min-height: clamp(280px, 38vw, 460px);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 60px rgba(255,74,61,.12); background:#000; }
.vd-wide > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .8s; }
.vd-wide:hover > img { transform: scale(1.04); }
.vd-wide-cap { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; height:100%; min-height:inherit;
  padding: clamp(24px, 4vw, 56px); max-width: 640px;
  background: linear-gradient(100deg, rgba(7,9,15,.94) 0%, rgba(7,9,15,.78) 55%, transparent 100%); }
.vd-wide-cap h2, .vd-wide-cap h3 { font-size: clamp(24px, 3.6vw, 42px); font-weight: 900; letter-spacing: -1.2px; line-height: 1.08; margin: 0 0 12px; }
.vd-wide-cap p { font-size: clamp(13px, 1.3vw, 15px); color: rgba(255,255,255,.72); line-height: 1.7; max-width: 440px; margin: 0 0 14px; }
.vd-wide-cap .vd-ach { margin-top: 4px; }
.vd-banner-wrap { margin-top: 40px; max-width: 1080px; }
.vd-banner-wide { min-height: clamp(240px, 30vw, 380px); }
@media (max-width: 767.98px) {
  .vd-wide { min-height: 0; display:flex; flex-direction:column; }
  .vd-wide > img { position:relative; height: 210px; }
  .vd-wide-cap { max-width:none; background: var(--surface); height:auto; padding: 22px 20px 24px; }
}

/* hero phone */
.vd-phone-stage { position:relative; display:flex; justify-content:center; padding: 10px 0; }
.vd-phone-stage .vd-float-1 { top:2%; right: max(2%, calc(50% - 215px)); width:84px; }
.vd-phone-stage .vd-float-2 { bottom:6%; left: max(2%, calc(50% - 225px)); width:76px; }
.vd-phone-stage .vd-float-3 { bottom:30%; right: max(0%, calc(50% - 235px)); width:66px; }
.vd-phone { position:relative; width:290px; aspect-ratio: 9/19; border-radius:44px; padding:10px; background: linear-gradient(145deg,#3a3d4a,#0d0e14 40%,#2a1010);
  box-shadow: 0 0 0 2px #15161d, 0 40px 90px rgba(0,0,0,.7), 0 0 90px rgba(255,74,61,.35); transform: rotate(4deg); transition: transform .5s; }
.vd-phone:hover { transform: rotate(0); }
.vd-phone-btn { position:absolute; width:3px; background:#2a2c36; border-radius:2px; }
.vd-phone-btn-1 { left:-3px; top:110px; height:48px; } .vd-phone-btn-2 { right:-3px; top:140px; height:70px; }
.vd-phone-screen { position:relative; height:100%; border-radius:35px; overflow:hidden; background:#07090f; display:flex; flex-direction:column; font-size:11px; color:#fff; }
.vd-ps-notch { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:84px; height:22px; border-radius:14px; background:#000; z-index:3; }
.vd-ps-status { display:flex; justify-content:space-between; padding:11px 22px 0; font-size:10px; font-weight:700; position:absolute; inset:0 0 auto 0; z-index:2; }
.vd-ps-hero { position:relative; height:150px; flex:none; }
.vd-ps-hero img { width:100%; height:100%; object-fit:cover; object-position:60% 40%; }
.vd-ps-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,#07090f 5%,rgba(7,9,15,.1) 70%); }
.vd-ps-hero div { position:absolute; left:14px; bottom:8px; z-index:1; } .vd-ps-hero small { display:block; font-size:9px; color:rgba(255,255,255,.65); } .vd-ps-hero strong { font-size:19px; font-weight:900; letter-spacing:-.5px; }
.vd-ps-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:0 12px; margin-top:4px; }
.vd-ps-stats div { background:#14161e; border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:7px 4px; text-align:center; }
.vd-ps-stats b { display:block; font-size:13px; font-weight:800; } .vd-ps-stats small { font-size:8px; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.5px; }
.vd-ps-rank { display:flex; gap:10px; align-items:center; margin:10px 12px 0; padding:10px; border-radius:12px; background:linear-gradient(135deg,rgba(255,74,61,.2),#14161e); border:1px solid rgba(255,74,61,.35); }
.vd-ps-rank img { flex:none; width:40px; height:auto; } .vd-ps-rank > div { flex:1; } .vd-ps-rank strong { font-size:13px; font-weight:800; }
.vd-ps-bar { display:block; height:6px; border-radius:6px; background:rgba(255,255,255,.1); margin:5px 0 3px; overflow:hidden; } .vd-ps-bar i { display:block; width:62%; height:100%; background:linear-gradient(90deg,#ff7a45,#ff2d3d); border-radius:6px; }
.vd-ps-rank small { font-size:8.5px; color:rgba(255,255,255,.55); }
.vd-ps-h { margin:10px 14px 6px; font-size:11px; font-weight:800; }
.vd-ps-cards { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 12px; }
.vd-ps-cards div { display:flex; align-items:center; gap:6px; padding:8px; border-radius:11px; background:#14161e; border:1px solid rgba(255,255,255,.07); font-size:9.5px; font-weight:700; line-height:1.3; }
.vd-ps-cards img { width:30px; height:auto; flex:none; }
.vd-ps-tabs { margin-top:auto; display:flex; justify-content:space-around; padding:9px 0 12px; background:#0e1018; border-top:1px solid rgba(255,255,255,.07); font-size:15px; color:rgba(255,255,255,.4); }
.vd-ps-tabs .on { color:var(--red); }
@media (max-width:575.98px){ .vd-phone { width:260px; } .vd-phone-stage .vd-float-1,.vd-phone-stage .vd-float-3{ right:2%; } .vd-phone-stage .vd-float-2{ left:2%; } }
.vd-ps-hero { height: 112px; }
.vd-ps-stats small { white-space: nowrap; font-size: 7.5px; }
.vd-ps-h { margin: 8px 14px 5px; }
.vd-ps-rank { margin-top: 8px; padding: 8px 10px; }
.vd-ps-tabs { padding: 7px 0 10px; flex: none; }

/* real app artwork inside the phone */
.vd-phone-real { display:block; }
.vd-ps-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:86% 50%; }
.vd-phone-real::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(to bottom, rgba(7,9,15,.55) 0%, transparent 22%, transparent 55%, rgba(7,9,15,.92) 100%); }
.vd-ps-brand { position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; align-items:center; gap:2px; padding:0 18px 30px; text-align:center; }
.vd-ps-brand img { width:60px; height:auto; filter: drop-shadow(0 0 18px rgba(255,74,61,.7)); }
.vd-ps-brand strong { font-size:22px; font-weight:900; letter-spacing:-.6px; }
.vd-ps-brand small { font-size:9px; letter-spacing:1.6px; text-transform:uppercase; color:rgba(255,255,255,.7); font-family:'JetBrains Mono',monospace; }

/* real app screenshot: show it as-is */
.vd-phone-real::after { display:none; }
.vd-ps-art { object-position: 50% 50%; }

/* ══ 3D phone ══ */
.vd-phone-stage { perspective: 1500px; perspective-origin: 50% 40%; padding: 30px 0 50px; }
.vd-phone-stage::after { content:""; position:absolute; left:50%; bottom:14px; width:230px; height:34px; transform:translateX(-50%); border-radius:50%;
  background: radial-gradient(ellipse, rgba(255,74,61,.45), rgba(0,0,0,.55) 45%, transparent 70%); filter: blur(10px); animation: vdShadow 6s ease-in-out infinite; }
@keyframes vdShadow { 0%,100% { transform:translateX(-50%) scale(1); opacity:.9; } 50% { transform:translateX(-50%) scale(.82); opacity:.6; } }
.vd-phone { transform-style: preserve-3d; transform: rotateY(var(--ry,-18deg)) rotateX(var(--rx,7deg)) rotateZ(2deg);
  transition: transform .25s ease-out; animation: vdPhoneFloat 6s ease-in-out infinite;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 14px rgba(255,255,255,.08), 0 0 70px rgba(255,74,61,.3); }
.vd-phone:hover { transform: rotateY(var(--ry,-18deg)) rotateX(var(--rx,7deg)) rotateZ(2deg); }
@keyframes vdPhoneFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.vd-phone-layer { position:absolute; inset:0; border-radius:inherit; transform: translateZ(var(--z)); pointer-events:none;
  background: linear-gradient(135deg,#4a4d5c,#1a1b23 45%,#3a1414); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.vd-phone-btn { transform: translateZ(-8px); background:#555867; }
.vd-phone-screen { transform: translateZ(1px); box-shadow: 0 0 0 1px #000; }
/* glass glare that follows the tilt */
.vd-phone-screen::before { content:""; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit;
  background: linear-gradient(115deg, transparent calc(var(--gx,35%) - 22%), rgba(255,255,255,.2) var(--gx,35%), transparent calc(var(--gx,35%) + 18%)); mix-blend-mode: screen; }
/* floating badges sit in front of the phone */
.vd-phone-stage .vd-float { z-index: 3; }
@media (max-width: 575.98px) { .vd-phone { --ry: -12deg; } }
@media (prefers-reduced-motion: reduce) { .vd-phone, .vd-phone-stage::after { animation: none; } }

/* ══ App tour ══ */
.vd-tour-tabs { display:flex; gap:10px; overflow-x:auto; padding:4px 2px 14px; margin-bottom:6px; scrollbar-width:none; justify-content:flex-start; -webkit-overflow-scrolling:touch; }
.vd-tour-tabs::-webkit-scrollbar { display:none; }
@media (min-width:992px){ .vd-tour-tabs { justify-content:center; } }
.vd-tour-tab { flex:none; display:flex; align-items:center; gap:12px; padding:10px 18px 10px 12px; border-radius:16px; color:#fff; text-align:left; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border); transition: .25s; position:relative; overflow:hidden; }
.vd-tour-tab img { width:38px; height:38px; object-fit:contain; filter:grayscale(.8) opacity(.7); transition:.25s; }
.vd-tour-tab strong { display:block; font-size:14px; font-weight:800; line-height:1.2; }
.vd-tour-tab small { font-size:11px; color:var(--muted); }
.vd-tour-tab:hover { border-color:rgba(255,74,61,.5); }
.vd-tour-tab:hover img { filter:none; }
.vd-tour-tab.is-active { background:linear-gradient(135deg,rgba(255,74,61,.28),rgba(255,74,61,.08)); border-color:rgba(255,74,61,.7); box-shadow:0 8px 28px rgba(255,74,61,.22); }
.vd-tour-tab.is-active img { filter:drop-shadow(0 4px 12px rgba(255,74,61,.6)); transform:scale(1.08); }
.vd-tour-tab.is-active::after { content:""; position:absolute; left:0; bottom:0; height:3px; background:var(--red); animation: vdTab 6.5s linear forwards; }
@keyframes vdTab { from { width:0 } to { width:100% } }
.vd-tour:hover .vd-tour-tab.is-active::after, .vd-tour:focus-within .vd-tour-tab.is-active::after { animation:none; width:100%; }
.vd-tour-tab:focus-visible { outline:2px solid var(--red); outline-offset:3px; }

.vd-tour-stage { position:relative; border-radius:28px; overflow:hidden; border:1px solid rgba(255,74,61,.3); background:#050509;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 80px rgba(255,74,61,.14); }
.vd-tour-panel { position:relative; display:grid; grid-template-columns:1fr; gap:24px; align-items:center; padding:clamp(24px,4vw,56px); min-height:560px; isolation:isolate; }
.vd-tour-panel[hidden] { display:none; }
.vd-tour-panel.is-active { animation: vdPanel .6s cubic-bezier(.2,.8,.2,1); }
@keyframes vdPanel { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }
.vd-tour-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.55; filter:saturate(1.1); }
.vd-tour-panel::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(95deg, rgba(5,5,9,.96) 0%, rgba(5,5,9,.82) 42%, rgba(5,5,9,.25) 100%); }
.vd-tour-copy h3 { font-size:clamp(26px,3.6vw,42px); font-weight:900; letter-spacing:-1.2px; line-height:1.08; margin-bottom:14px; }
.vd-tour-copy p { color:rgba(255,255,255,.75); line-height:1.75; font-size:15px; max-width:440px; margin-bottom:16px; }
.vd-chips { list-style:none; padding:0; margin:0 0 20px; display:flex; flex-wrap:wrap; gap:8px; }
.vd-chips li { padding:6px 12px; border-radius:100px; font-size:11.5px; font-weight:700; background:rgba(255,74,61,.14); border:1px solid rgba(255,74,61,.35); color:#ffd9d5; }
.vd-dev { justify-self:center; position:relative; background:linear-gradient(145deg,#3b3e4b,#0c0d12 45%,#2a1010); box-shadow:0 0 0 1px #1a1b22, 0 30px 70px rgba(0,0,0,.7), 0 0 70px rgba(255,74,61,.3); }
.vd-dev img { display:block; width:100%; height:100%; object-fit:cover; }
.vd-dev-phone { height:clamp(400px,46vw,540px); aspect-ratio:600/1304; padding:8px; border-radius:36px; transform:perspective(1200px) rotateY(-10deg) rotateZ(1.5deg); transition:transform .5s; }
.vd-dev-phone img { border-radius:29px; }
.vd-dev-phone::before { content:""; position:absolute; top:14px; left:50%; width:72px; height:20px; transform:translateX(-50%); background:#000; border-radius:12px; z-index:2; }
.vd-dev-tablet { width:min(100%,560px); aspect-ratio:4/3; padding:10px; border-radius:26px; transform:perspective(1400px) rotateY(-9deg) rotateX(3deg); transition:transform .5s; }
.vd-dev-tablet img { border-radius:17px; }
.vd-tour-stage:hover .vd-dev { transform:none; }
@media (min-width:992px){ .vd-tour-panel { grid-template-columns:5fr 6fr; gap:48px; } }
@media (max-width:991.98px){ .vd-tour-panel { min-height:0; text-align:center; } .vd-tour-copy p { margin-inline:auto; } .vd-chips { justify-content:center; }
  .vd-tour-panel::before { background:linear-gradient(to bottom, rgba(5,5,9,.92), rgba(5,5,9,.7)); } .vd-dev-phone, .vd-dev-tablet { transform:none; } }
@media (prefers-reduced-motion: reduce){ .vd-tour-panel.is-active, .vd-tour-tab.is-active::after { animation:none; } }

/* CTA logo on all pages: transparent logo with soft glow */
.vd-cta-logo { width: 120px; height: auto; filter: drop-shadow(0 0 32px rgba(255,74,61,.55)); animation: vdBreathe 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .vd-cta-logo { animation: none; } }

/* ══ Professional page headers ══ */
.vd-phero { position:relative; overflow:hidden; isolation:isolate; margin-top:-76px; padding: 150px 0 64px; border-bottom:1px solid rgba(255,74,61,.25); }
.vd-phero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 40%; z-index:-2; }
.vd-phero-shade { position:absolute; inset:0; z-index:-1;
  background: linear-gradient(90deg, rgba(7,9,15,.97) 0%, rgba(7,9,15,.86) 45%, rgba(7,9,15,.4) 100%), linear-gradient(to top, var(--bg) 0%, transparent 40%); }
.vd-phero-crumbs { margin:0 0 18px; font-size:12.5px; font-weight:600; }
.vd-phero-crumbs .breadcrumb-item+.breadcrumb-item::before { color:var(--muted-2); content:"/"; }
.vd-phero-h1 { font-size:clamp(34px,5.4vw,60px); font-weight:900; letter-spacing:-1.8px; line-height:1.04; margin:0 0 18px; max-width:760px; }
.vd-phero-lead { font-size:clamp(15px,1.5vw,17px); color:rgba(255,255,255,.72); line-height:1.75; max-width:640px; margin:0 0 26px; }
.vd-phero .vd-btn-red { background:linear-gradient(135deg,#ff6a4d,#ff2d3d); box-shadow:0 8px 28px rgba(255,74,61,.4); }
.vd-phero-stats { list-style:none; padding:22px 0 0; margin:0; display:flex; flex-wrap:wrap; gap:18px 40px; border-top:1px solid rgba(255,255,255,.1); max-width:640px; }
.vd-phero-stats strong { display:block; font-size:24px; font-weight:900; letter-spacing:-.6px; line-height:1.1; }
.vd-phero-stats span { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; font-weight:600; }
.vd-phero-art { position:relative; height:300px; }
.vd-phero-art img { position:absolute; filter:drop-shadow(0 14px 36px rgba(255,74,61,.6)); animation: vdFloat 5s ease-in-out infinite; }
.vd-phero-a1 { width:190px; height:auto; right:30px; top:20px; }
.vd-phero-a2 { width:110px; height:auto; left:10px; bottom:10px; animation-delay:-2s !important; }
@media (max-width:575.98px){ .vd-phero { padding:120px 0 44px; } .vd-phero-shade { background:linear-gradient(to bottom, rgba(7,9,15,.88), rgba(7,9,15,.95)); } .vd-phero-stats { gap:16px 28px; } }
@media (prefers-reduced-motion: reduce){ .vd-phero-art img { animation:none; } }

/* ══════════ True 3D hero phone ══════════ */
.vd-p3d { position:relative; width:100%; max-width:460px; height:640px; margin:0 auto; perspective:1500px; perspective-origin:50% 38%;
  display:grid; place-items:center; --pw:250px; --ph:530px; }
.vd-p3d-rig { position:relative; width:var(--pw); height:var(--ph); transform-style:preserve-3d; animation:p3dSway 10s ease-in-out infinite; }
@keyframes p3dSway {
  0%,100% { transform: rotateY(-30deg) rotateX(7deg) rotateZ(2deg) translateY(0); }
  50%     { transform: rotateY(-8deg)  rotateX(3deg) rotateZ(-1deg) translateY(-16px); }
}
.vd-p3d-body { position:absolute; inset:0; transform-style:preserve-3d; transform: rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)); transition: transform .25s ease-out; }
.vd-p3d-halo { position:absolute; inset:-40px; border-radius:80px; background:radial-gradient(closest-side, rgba(255,74,61,.5), transparent 72%); filter:blur(26px); transform:translateZ(-60px); pointer-events:none; }

/* thickness: a stack of rounded plates forms the titanium side wall */
.vd-p3d-l { position:absolute; inset:0; border-radius:46px; transform:translateZ(var(--z)); pointer-events:none;
  background:linear-gradient(160deg,#8d8f9c 0%,#3c3e4a 30%,#17181f 60%,#4a2420 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2), inset 0 0 0 3px rgba(0,0,0,.35); }
.vd-p3d-l:nth-of-type(odd) { filter:brightness(.82); }
.vd-p3d-l:last-of-type { background:#0b0b10; box-shadow: 0 0 0 2px #000; }

/* front glass */
.vd-p3d-front { position:absolute; inset:0; border-radius:46px; padding:9px; transform:translateZ(1px); transform-style:preserve-3d;
  background:linear-gradient(145deg,#a9abb8 0%,#4a4c58 22%,#15161d 55%,#5a2a26 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4), inset 0 0 0 4px #07070a, 0 0 0 1px #000; }
.vd-p3d-screen { position:relative; width:100%; height:100%; border-radius:38px; overflow:hidden; background:#000; box-shadow:0 0 0 1px #000; }
.vd-p3d-screen img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vd-p3d-island { position:absolute; top:11px; left:50%; width:78px; height:22px; border-radius:14px; background:#000; transform:translateX(-50%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.vd-p3d-island::after { content:""; position:absolute; right:10px; top:7px; width:8px; height:8px; border-radius:50%; background:radial-gradient(circle,#2b3a66,#05060c 70%); }
.vd-p3d-glare { position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(115deg, transparent calc(var(--gx,30%) - 26%), rgba(255,255,255,.22) var(--gx,30%), transparent calc(var(--gx,30%) + 14%)); }
.vd-p3d-screen::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow: inset 0 0 40px rgba(0,0,0,.45); }

/* hardware buttons stick out from the side wall */
.vd-p3d-btn { position:absolute; width:5px; border-radius:3px; background:linear-gradient(90deg,#6d707e,#2a2c35); transform: translateZ(-14px); }
.vd-p3d-btn-a { left:-4px; top:110px; height:34px; } .vd-p3d-btn-b { left:-4px; top:156px; height:56px; } .vd-p3d-btn-c { right:-4px; top:170px; height:84px; }

/* glass chips + badges floating at different depths (parallax) */
.vd-p3d-chip { position:absolute; display:flex; align-items:center; gap:9px; padding:10px 14px; border-radius:14px; white-space:nowrap; font-size:12.5px; font-weight:800;
  background:rgba(18,12,16,.62); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 28px rgba(255,74,61,.25), inset 0 1px 0 rgba(255,255,255,.12);
  transform:translateZ(var(--z)); animation:p3dBob 6s ease-in-out infinite; }
.vd-p3d-chip b { font-size:18px; line-height:1; }
.vd-p3d-c1 { left:-110px; top:84px; } .vd-p3d-c2 { right:-120px; top:300px; animation-delay:-2s; } .vd-p3d-c3 { left:-90px; bottom:92px; animation-delay:-4s; }
.vd-p3d-badge { position:absolute; transform:translateZ(var(--z)); filter:drop-shadow(0 16px 26px rgba(255,74,61,.6)); animation:p3dBob 5s ease-in-out infinite; }
.vd-p3d-b1 { right:-62px; top:-26px; width:84px; height:auto; } .vd-p3d-b2 { left:-76px; bottom:-30px; width:72px; height:auto; animation-delay:-1.5s; } .vd-p3d-b3 { right:-52px; bottom:62px; width:60px; height:auto; animation-delay:-3s; }
@keyframes p3dBob { 0%,100% { translate:0 0; } 50% { translate:0 -12px; } }

.vd-p3d-floor { position:absolute; left:50%; bottom:6px; width:300px; height:46px; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,74,61,.55), rgba(0,0,0,.6) 45%, transparent 72%); filter:blur(12px); animation:p3dFloor 10s ease-in-out infinite; }
@keyframes p3dFloor { 0%,100% { transform:translateX(-50%) scale(1); opacity:.95; } 50% { transform:translateX(-46%) scale(.8); opacity:.6; } }

@media (max-width:991.98px){ .vd-p3d { height:600px; } }
@media (max-width:575.98px){
  .vd-p3d { height:520px; max-width:100%; } .vd-p3d-rig { scale:.8; }
  .vd-p3d-c1 { left:-70px; } .vd-p3d-c2 { right:-70px; } .vd-p3d-c3 { left:-60px; }
  .vd-p3d-chip { padding:8px 11px; font-size:11px; }
}
@media (prefers-reduced-motion:reduce){
  .vd-p3d-rig { animation:none; transform:rotateY(-20deg) rotateX(5deg); }
  .vd-p3d-chip,.vd-p3d-badge,.vd-p3d-floor { animation:none; }
}
@media (max-width:575.98px){ .vd-p3d-c1 { left:-34px; } .vd-p3d-c2 { right:-44px; } .vd-p3d-c3 { left:-30px; } .vd-p3d-b2 { left:-34px; } .vd-p3d-b1 { right:-40px; } }

/* ══════════ Application pages (auth, upgrade, legal) — product theme ══════════ */
body.vd-app { position: relative; background: var(--bg); }
body.vd-app::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(7,9,15,.88) 0%, rgba(7,9,15,.96) 70%, var(--bg) 100%),
    url('/assets/images/hero_dojos.webp') 70% 20% / cover no-repeat; }
.vd-phero-sm { padding: 150px 0 48px; }
@media (max-width:575.98px){ .vd-phero-sm { padding: 120px 0 36px; } }

/* centered card pages */
body.vd-app .vd-auth-page, body.vd-app .vd-up-page { min-height: calc(100vh - 200px); }
body.vd-app .vd-auth-card, body.vd-app .vd-up-card {
  position: relative; background: rgba(14,16,24,.78); border: 1px solid rgba(255,255,255,.09); border-radius: 22px;
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); }
body.vd-app .vd-auth-card::before, body.vd-app .vd-up-card::before { content:""; position:absolute; inset:-1px; border-radius:22px; padding:1px; pointer-events:none;
  background: linear-gradient(120deg, rgba(255,74,61,.5), transparent 35%, transparent 65%, rgba(255,74,61,.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.7; }
body.vd-app .vd-btn-submit { background: linear-gradient(135deg,#ff6a4d,#ff2d3d); box-shadow: 0 8px 26px rgba(255,74,61,.35); border-radius: 12px; }
body.vd-app .vd-btn-submit:hover { opacity: 1; transform: translateY(-1px); }
body.vd-app .vd-btn-submit:disabled { box-shadow: none; }
body.vd-app .vd-field input { border-radius: 12px; }

/* confirm page */
.vd-auth-page { display:flex; align-items:center; justify-content:center; padding: 48px 20px; }
.vd-auth-card { width:100%; max-width:440px; padding:40px; }
.vd-auth-title { font-size:1.6rem; font-weight:900; letter-spacing:-.6px; margin:0 0 10px; }
.vd-auth-text { color: var(--muted); font-size:.92rem; line-height:1.7; margin:0 0 24px; }
.vd-card-icon.vd-card-ok { margin-inline:auto; background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.3); }
.vd-card-icon.vd-card-ok svg { color: var(--green); }
.vd-card-icon.vd-card-bad { margin-inline:auto; }
.vd-card-icon { width:56px; height:56px; border-radius:14px; background:var(--red-dim); border:1px solid rgba(255,74,61,.2); display:flex; align-items:center; justify-content:center; }
.vd-card-icon svg { width:26px; height:26px; color:var(--red); }