/* ==========================================================================
   ALVIN.AI — Landing V.01 (Leonardo.ai-inspired, dark futuristic)
   Palette: Void #030303 · Card #0b0f19 · Purple #7e22ce · Magenta #ec4899
            Cyan #06b6d4
   ========================================================================== */

.w-narrow { max-width: 1024px; margin-left: auto; margin-right: auto; }
.w-mid { max-width: 1152px; margin-left: auto; margin-right: auto; }
.rail-head { max-width: 1440px; margin: 0 auto; padding: 0 2rem; }
.ref-band { border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); padding: 2rem 1.25rem; text-align: center; }
.ref-kicker { font-size: 13px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: #9aa3b2; margin-bottom: 1.1rem; }
.ref-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.ref-row a { display: inline-flex; align-items: center; gap: .5rem; font-size: 15px; font-weight: 700; color: #e5e7eb; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: .55rem 1.1rem; text-decoration: none; transition: border-color .2s, transform .2s; }
.ref-row a span { font-size: 12px; font-weight: 400; color: #9aa3b2; }
.ref-row a:hover { border-color: rgba(6,182,212,.6); transform: translateY(-2px); color: #fff; }
.zoom-widget { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; gap: 6px; align-items: center; background: rgba(11,15,25,.92); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: 6px 8px 6px 12px; backdrop-filter: blur(10px); font-size: 13px; }
.zoom-widget button { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); color: #fff; border-radius: 999px; min-width: 32px; height: 32px; font-weight: 800; cursor: pointer; }
.zoom-widget button:hover { border-color: rgba(6,182,212,.7); }
.zoom-widget span { color: #9aa3b2; font-weight: 700; min-width: 44px; text-align: center; }
#pack-grid > div, #price-grid > div { position: relative; overflow: hidden; }
.ripple-ring { position: absolute; border-radius: 9999px; border: 2px solid rgba(6,182,212,.7); box-shadow: inset 0 0 18px rgba(6,182,212,.35); pointer-events: none; transform: scale(0); opacity: .9; animation: ripple-ring 1.4s ease-out forwards; }
@keyframes ripple-ring { to { transform: scale(1); opacity: 0; } }
.landing-wide { max-width: 1440px; margin-left: auto; margin-right: auto; }
/* t-card hover language for every image block */
.feature-visual, .show-card { transition: transform .2s, border-color .2s, box-shadow .2s; }
.feature-visual:hover, .show-card:hover { transform: translateY(-4px); border-color: rgba(6,182,212,.6); box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 22px rgba(6,182,212,.25); }
:root {
  --void: #030303;
  --card: #0b0f19;
  --purple: #7e22ce;
  --magenta: #ec4899;
  --cyan: #06b6d4;
  --text: #f4f6fb;
  --muted: #9aa3b2;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
section[id] { scroll-margin-top: 96px; }

body {
  background: var(--void);
  color: var(--text);
  font-family: "Inter", "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

/* --- ambient background glows --- */
.ambient { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ambient .blob { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .45; }
.ambient .b1 { width: 620px; height: 620px; background: #7e22ce; top: -180px; left: -160px; }
.ambient .b2 { width: 520px; height: 520px; background: #ec4899; top: 8%; right: -180px; opacity: .3; }
.ambient .b3 { width: 480px; height: 480px; background: #06b6d4; bottom: -180px; left: 30%; opacity: .28; }
.grid-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 18%, black, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 18%, black, transparent 78%);
}

/* --- glass nav --- */
.glass-nav {
  background: rgba(3,3,3,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.logo-sheen { position: relative; overflow: hidden; }
.logo-sheen::after {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 50%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: sheen 4s ease-in-out infinite;
}
@keyframes sheen { 0%,60% { left: -60%; } 100% { left: 160%; } }

/* --- hero --- */
.hero-title {
  font-weight: 900; letter-spacing: .02em; line-height: 1.02;
  text-transform: uppercase;
  text-shadow: 0 0 60px rgba(126,34,206,.45);
}
.grad-text {
  background: linear-gradient(100deg, #c4b5fd, #f0abfc 40%, #67e8f9);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pill-primary {
  background: #fff; color: #030303; font-weight: 800;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 12px 40px rgba(236,72,153,.35);
  transition: transform .2s, box-shadow .2s;
}
.pill-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 50px rgba(6,182,212,.45); }
.pill-ghost {
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px); transition: border-color .2s, transform .2s;
}
.pill-ghost:hover { border-color: var(--cyan); transform: translateY(-2px); }

/* --- swarm hero: tiles burst from around the headline, behind the text --- */
#hero.swarm-hero { position: relative; overflow: hidden; }
.swarm-stage {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; border: none;
  background: radial-gradient(ellipse at 50% 38%, rgba(126,34,206,.15), transparent 60%), transparent;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}
.hero-fore { position: relative; z-index: 10; pointer-events: none; max-width: 1500px; margin-left: auto; margin-right: auto; padding-top: 1.5rem; }
.hero-fore a, .hero-fore button { pointer-events: auto; }
.hero-fore h1 { text-shadow: 0 2px 30px rgba(0,0,0,.92), 0 0 60px rgba(126,34,206,.45); }
.hero-fore p { text-shadow: 0 1px 12px rgba(0,0,0,.92); }
.swarm-card {
  position: absolute; left: 0; top: 0;
  border-radius: 14px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); background: var(--card);
  box-shadow: 0 18px 45px -12px rgba(0,0,0,.85), 0 0 22px rgba(126,34,206,.22);
  will-change: transform, opacity;
  transition: border-color .2s, box-shadow .2s;
}
.swarm-card:hover, .swarm-card:focus-visible {
  border-color: rgba(6,182,212,.9); outline: none; z-index: 200 !important;
  box-shadow: 0 0 0 1px rgba(6,182,212,.6), 0 0 30px rgba(6,182,212,.45);
}
.swarm-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.swarm-media img, .swarm-media video {
  width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
}
.swarm-cap {
  font-size: 11px; font-weight: 700; padding: 7px 10px; color: #e5e7eb;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(0,0,0,.55);
}
.drag-hint { user-select: none; }
.a1 { background: linear-gradient(135deg,#7e22ce,#ec4899); }
.a2 { background: linear-gradient(135deg,#06b6d4,#7e22ce); }
.a3 { background: linear-gradient(135deg,#ec4899,#f59e0b); }
.a4 { background: linear-gradient(135deg,#0ea5e9,#6366f1); }
.a5 { background: linear-gradient(135deg,#8b5cf6,#06b6d4); }
.a6 { background: linear-gradient(135deg,#f472b6,#7e22ce); }
.a7 { background: linear-gradient(135deg,#22d3ee,#34d399); }
.a8 { background: linear-gradient(135deg,#a855f7,#ef4444); }

/* --- fullscreen zoom modal showcase --- */
.zoom-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
  background: rgba(0,0,0,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.zoom-overlay.open { opacity: 1; visibility: visible; }
.zoom-panel {
  position: relative; width: min(920px, 100%); max-height: 90vh; overflow: auto;
  display: grid; gap: 0; border-radius: 24px;
  background: linear-gradient(160deg, #131b31, #0a0e1a);
  border: 1px solid rgba(6,182,212,.4);
  box-shadow: 0 0 80px rgba(126,34,206,.45);
  transform: translateY(24px) scale(.97); transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.zoom-overlay.open .zoom-panel { transform: none; }
@media (min-width: 768px) { .zoom-panel { grid-template-columns: 1.1fr 1fr; } }
.zoom-visual { min-height: 300px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 12px; padding: 1.25rem; touch-action: pan-y; cursor: grab; min-width: 0; overflow: hidden; }
#zoomBadge { align-self: flex-start; flex-shrink: 0; }
#zoomMedia { width: 100%; min-width: 0; }
.media-fallback { min-height: 220px; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; color: #9aa3b2; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.25); border-radius: 12px; }
.media-fallback i { font-size: 2rem; }
.media-fallback span { font-size: 13px; font-weight: 700; }
.zoom-visual video { width: 100%; max-width: 100%; min-width: 0; max-height: 52vh; object-fit: contain; background: #000; }
.zoom-info { padding: 1.75rem; text-align: left; }
.zoom-engine { font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #67e8f9; }
.zoom-title { font-size: 1.6rem; font-weight: 900; text-transform: uppercase; margin-top: .4rem; }
.zoom-prompt { font-size: .85rem; color: #9aa3b2; margin-top: .8rem; line-height: 1.6; }
.zoom-count { font-size: 11px; color: #9aa3b2; margin-top: 1rem; letter-spacing: .15em; }
.zoom-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.zoom-close, .zoom-prev, .zoom-next {
  position: absolute; width: 54px; height: 54px; border-radius: 999px; z-index: 5;
  background: rgba(6,182,212,.16); border: 2px solid rgba(6,182,212,.65);
  box-shadow: 0 0 20px rgba(6,182,212,.4);
  color: #fff; font-size: 1.5rem; font-weight: 900; line-height: 1; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s;
}
.zoom-close:hover, .zoom-prev:hover, .zoom-next:hover { border-color: var(--cyan); transform: scale(1.08); }
.zoom-close { top: 12px; right: 12px; }
.zoom-prev { left: 14px; top: 50%; margin-top: -27px; }
.zoom-next { right: 14px; top: 50%; margin-top: -27px; }
.zoom-hint { grid-column: 1 / -1; text-align: center; font-size: 11px; color: #9aa3b2; padding: 0 1rem 1.1rem; }

/* --- studio showcase gallery (full-frame, never cropped) --- */
.show-card { background: var(--card); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; overflow: hidden; }
.show-card img, .show-card video { width: 100%; height: auto; display: block; background: #000; }
.show-card figcaption { font-size: 12px; padding: 10px 14px; color: #9aa3b2; }

/* --- drag rails (#2 classic + #4 RTL Leo-style) --- */
.strip-viewport { position: relative; overflow: hidden; padding: 14px 0 20px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); }
.strip-viewport.dragging { cursor: grabbing; }
.strip-track { display: flex; gap: 1rem; width: max-content; will-change: transform; }
.strip-viewport .art-card { position: relative; width: 420px; flex: 0 0 auto; border-radius: 18px; overflow: hidden; cursor: pointer; border: 1px solid rgba(255,255,255,.12); background: var(--card); box-shadow: 0 24px 60px -20px rgba(0,0,0,.8), 0 0 30px rgba(126,34,206,.18); transition: border-color .2s, box-shadow .2s; }
.strip-viewport .art-card:hover, .strip-viewport .art-card:focus-visible { border-color: rgba(6,182,212,.85); box-shadow: 0 0 0 1px rgba(6,182,212,.6), 0 0 30px rgba(6,182,212,.4); outline: none; }
.art-card .art { height: 260px; position: relative; overflow: hidden; }
.art-card .art img, .art-card .art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.art-tag { position: absolute; left: 12px; bottom: 12px; font-size: 13px; font-weight: 800; background: rgba(0,0,0,.55); padding: 5px 12px; border-radius: 999px; z-index: 1; }
.art-meta { font-size: 14px; color: #9aa3b2; padding: 10px 14px; display: flex; align-items: center; gap: 8px; }
@media (max-width: 768px) { .strip-viewport .art-card { width: 280px; } .art-card .art { height: 180px; } }
/* --- stat blocks --- */
.stat-card {
  background: linear-gradient(160deg, rgba(19,27,49,.85), rgba(10,14,26,.9));
  border: 1px solid rgba(139,92,246,.25); border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 50px -20px rgba(0,0,0,.8);
}
.stat-num { font-weight: 900; letter-spacing: .02em; }

/* --- feature rows --- */
.feature-visual {
  border-radius: 22px; border: 1px solid rgba(255,255,255,.1);
  min-height: 240px; position: relative; overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(126,34,206,.5);
}
.feature-visual img, .feature-visual video { position: relative; width: 100%; height: auto; display: block; }
.feature-visual .orb {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .6;
  width: 220px; height: 220px;
}

/* --- testimonial cards --- */
.t-card {
  background: var(--card); border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; transition: transform .2s, border-color .2s;
}
.t-card:hover { transform: translateY(-4px); border-color: rgba(6,182,212,.6); }

/* --- footer --- */
footer a { color: var(--muted); transition: color .15s; }
footer a:hover { color: #fff; }

/* --- reveal on scroll --- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s; }
.reveal.visible { opacity: 1; transform: none; }

/* --- responsive tuning --- */
@media (max-width: 768px) {
  .hero-title { font-size: 2.1rem !important; }
  .zoom-prev { left: 8px; } .zoom-next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-sheen::after { animation: none !important; }
  .reveal { transition: none; opacity: 1; transform: none; }
}

#footer ul li a { font-size: 15px; }
#footer .col-span-2 p { font-size: 14px; }
#footer h4 { font-size: 13px; }

/* --- navbar/hero layering + spacing (overlap fix, additive only) --- */
.glass-nav { position: sticky; top: 0; z-index: 60; }
.swarm-card:hover, .swarm-card:focus-visible { z-index: 40 !important; }
#hero.swarm-hero { padding-bottom: 5.5rem; }
#stats { padding-top: 3.5rem; }
@media (max-width: 768px) {
  #hero.swarm-hero { padding-bottom: 4rem; }
  #stats { padding-top: 2.5rem; }
}

/* --- mega menu (Create) : dark glass, scoped under header stacking ctx --- */
.mega-anchor { position: relative; }
.has-mega { position: static; }
.mega-trigger { display: inline-flex; align-items: center; gap: 6px; }
.mega-chev { font-size: 10px; color: #67e8f9; transition: transform .2s; }
.has-mega:hover .mega-chev, .has-mega.open .mega-chev { transform: rotate(180deg); }
.mega-panel {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 70;
  width: min(800px, 94vw);
  transform: translate(-50%, 10px);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  background: linear-gradient(165deg, rgba(19,27,49,.96), rgba(10,14,26,.97));
  border: 1px solid rgba(6,182,212,.35);
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.9), 0 0 40px rgba(126,34,206,.25), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.mega-panel::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.has-mega:hover .mega-panel, .has-mega.open .mega-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.has-mega.mega-suppressed .mega-panel { opacity: 0; visibility: hidden; pointer-events: none; }
.has-mega.mega-suppressed .mega-chev { transform: none; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.05fr; gap: 1.4rem; padding: 1.5rem 1.6rem; }
.mega-head { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #67e8f9; margin-bottom: .8rem; }
.mega-item { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0 -8px; border-radius: 12px; transition: background .15s; }
.mega-item:hover { background: rgba(6,182,212,.08); }
.mega-ic { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; flex-shrink: 0; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.mega-item b { display: block; font-size: 13px; color: #fff; }
.mega-item small { display: block; font-size: 11px; color: #9aa3b2; margin-top: 1px; }
.mega-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; font-weight: 700; color: #67e8f9; }
.mega-link:hover { color: #fff; }
.mega-promo { position: relative; overflow: hidden; border-radius: 16px; padding: 1.3rem 1.2rem; background: linear-gradient(150deg, rgba(126,34,206,.35), rgba(6,182,212,.18)); border: 1px solid rgba(168,85,247,.4); }
.mega-promo-orb { position: absolute; top: -50px; right: -50px; width: 140px; height: 140px; border-radius: 50%; background: #7e22ce; filter: blur(50px); opacity: .5; pointer-events: none; }
.mega-promo-kicker { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #f0abfc; }
.mega-promo-title { font-size: 17px; font-weight: 800; color: #fff; margin-top: 6px; line-height: 1.3; }
.mega-promo-sub { font-size: 12px; color: #c6cdd8; margin: 6px 0 14px; }
.mega-panel.mega-sm { width: min(640px, 94vw); }
.mega-grid.ind-grid { grid-template-columns: 1fr 1fr 1.1fr; }
.mega-grid.biz-grid { grid-template-columns: 1.2fr 1fr; }
@media (max-width: 1023px) { .mega-panel { display: none; } }